feat: responsive system, engineering infra, new components, performance

- Section: responsive prop with media query injection
- visual-weights: fontSize clamp() for responsive sizing
- variables.css: add border-radius/shadow/transition/z-index tokens
- ESLint flat config + Prettier + Changeset init
- New components: Footer, NewsSidebar, BreakingNewsBanner
- Image/Figure: loading=lazy, aspectRatio, sizes props

packages/components/src/layout/BreakingNewsBanner.tsx

@@ -0,0 +1,48 @@
+'use client';
+import React, { ReactNode, CSSProperties } from 'react';
+import { cx } from 'newspaperui-utils';
+
+export interface BreakingNewsBannerProps {
+  label?: string;
+  className?: string;
+  style?: CSSProperties;
+  children: ReactNode;
+}
+
+/**
+ * BreakingNewsBanner — 突发新闻横幅
+ *
+ * @example
+ * <BreakingNewsBanner label="BREAKING">
+ *   Major earthquake strikes coastal region
+ * </BreakingNewsBanner>
+ */
+export const BreakingNewsBanner: React.FC<BreakingNewsBannerProps> = ({
+  label = 'BREAKING', className, style, children,
+}) => (
+  <div
+    className={cx('nui-breaking', className)}
+    role="alert"
+    style={{
+      gridColumn: '1 / -1',
+      background: 'var(--nui-accent-primary)',
+      color: 'var(--nui-bg-page)',
+      padding: 'var(--nui-space-3) var(--nui-space-6)',
+      fontFamily: 'var(--font-family-meta)',
+      fontSize: '13px',
+      fontWeight: 600,
+      display: 'flex',
+      alignItems: 'center',
+      gap: 'var(--nui-space-4)',
+      ...style,
+    }}
+  >
+    <span style={{
+      fontVariantCaps: 'small-caps',
+      letterSpacing: '0.1em',
+      fontWeight: 700,
+      flexShrink: 0,
+    }}>{label}</span>
+    <span style={{ flex: 1 }}>{children}</span>
+  </div>
+);