-

packages/components/src/Text/BodyText.tsx

@@ -1,44 +1,60 @@
-import React from 'react';
+'use client';
+import React, { ReactNode, CSSProperties } from 'react';
 import { visualWeights, resolveFontSize } from '@newspaperui/theme';
-import { calculateSpanWidth } from '@newspaperui/utils';
-import { useSection } from '../Section/Section';
+import { clampSpan, cx } from '@newspaperui/utils';
+import { useSection } from '../layout/Section';
 
 export interface BodyTextProps {
   weight?: 'High' | 'Medium' | 'Low';
   span?: number;
-  children: React.ReactNode;
+  columns?: 1 | 2 | 3 | 4;     // 多栏文字流
+  columnWidth?: string;         // 默认 '18em'
+  columnFill?: 'auto' | 'balance';
+  dropCap?: boolean;
+  className?: string;
+  style?: CSSProperties;
+  children: ReactNode;
 }
 
 export const BodyText: React.FC<BodyTextProps> = ({
-  weight = 'Medium',
-  span,
-  children,
+  weight = 'Medium', span, columns = 1, columnWidth = '18em',
+  columnFill = 'auto', dropCap = false,
+  className, style, children,
 }) => {
   const section = useSection();
-  const config = visualWeights.BodyText[weight];
-
-  if (!config) {
-    throw new Error(`Invalid weight: ${weight} for BodyText`);
-  }
-
-  const finalSpan = span || (Array.isArray(config.span) ? config.span[0] : config.span);
-  const width = calculateSpanWidth(finalSpan, section.columns);
+  const config = visualWeights.BodyText[weight]!;
+  const cols = span ? clampSpan(span, section.columns) : undefined;
+  const useColumns = columns >= 2;
 
   return (
-    <p
-      className="newspaper-body-text"
+    <div
+      className={cx(
+        'nui-bodytext',
+        'nui-paragraph-flow',
+        'nui-osf',
+        'nui-hanging-punctuation',
+        useColumns && 'nui-column-rule',
+        dropCap && 'nui-drop-cap',
+        className,
+      )}
       style={{
+        fontFamily: `var(${config.fontFamily})`,
         fontSize: resolveFontSize(config.fontSize),
         fontWeight: config.fontWeight,
         lineHeight: config.lineHeight,
-        color: config.color,
+        color: `var(${config.color})`,
         margin: config.margin,
-        width,
+        gridColumn: cols ? `span ${cols}` : undefined,
+        columnCount: useColumns ? columns : undefined,
+        columnWidth: useColumns ? columnWidth : undefined,
+        columnGap: useColumns ? 'var(--nui-gutter)' : undefined,
+        columnFill: useColumns ? columnFill : undefined,
+        ...style,
       }}
       data-weight={weight}
-      data-span={finalSpan}
+      data-columns={columns}
     >
       {children}
-    </p>
+    </div>
   );
 };

packages/components/src/Text/Byline.tsx

@@ -1,26 +1,28 @@
-import React from 'react';
+'use client';
+import React, { ReactNode, CSSProperties } from 'react';
 import { visualWeights, resolveFontSize } from '@newspaperui/theme';
+import { cx } from '@newspaperui/utils';
 
 export interface BylineProps {
-  children: React.ReactNode;
+  className?: string;
+  style?: CSSProperties;
+  children: ReactNode;          // e.g. "BY ALICE SMITH"
 }
 
-export const Byline: React.FC<BylineProps> = ({ children }) => {
-  const config = visualWeights.Byline.Standard;
-
-  if (!config) {
-    throw new Error('Byline configuration not found');
-  }
-
+export const Byline: React.FC<BylineProps> = ({ className, style, children }) => {
+  const config = visualWeights.Byline.Standard!;
   return (
     <div
-      className="newspaper-byline"
+      className={cx('nui-byline nui-small-caps', className)}
       style={{
+        fontFamily: `var(${config.fontFamily})`,
         fontSize: resolveFontSize(config.fontSize),
         fontWeight: config.fontWeight,
         lineHeight: config.lineHeight,
-        color: config.color,
+        letterSpacing: config.letterSpacing,
+        color: `var(${config.color})`,
         margin: config.margin,
+        ...style,
       }}
     >
       {children}

packages/components/src/Text/Caption.tsx

@@ -1,29 +1,47 @@
-import React from 'react';
+'use client';
+import React, { ReactNode, CSSProperties } from 'react';
 import { visualWeights, resolveFontSize } from '@newspaperui/theme';
+import { cx } from '@newspaperui/utils';
 
 export interface CaptionProps {
-  children: React.ReactNode;
+  credit?: string;              // e.g. "Photograph by Jane Doe"
+  className?: string;
+  style?: CSSProperties;
+  children: ReactNode;
 }
 
-export const Caption: React.FC<CaptionProps> = ({ children }) => {
-  const config = visualWeights.Caption.Standard;
-
-  if (!config) {
-    throw new Error('Caption configuration not found');
-  }
-
+export const Caption: React.FC<CaptionProps> = ({ credit, className, style, children }) => {
+  const config = visualWeights.Caption.Standard!;
   return (
     <figcaption
-      className="newspaper-caption"
+      className={cx('nui-caption nui-osf', className)}
       style={{
+        fontFamily: `var(${config.fontFamily})`,
         fontSize: resolveFontSize(config.fontSize),
         fontWeight: config.fontWeight,
+        fontStyle: config.fontStyle,
         lineHeight: config.lineHeight,
-        color: config.color,
+        color: `var(${config.color})`,
         margin: config.margin,
+        ...style,
       }}
     >
       {children}
+      {credit && (
+        <span
+          className="nui-small-caps"
+          style={{
+            display: 'inline-block',
+            marginLeft: 'var(--nui-space-2)',
+            fontSize: '11px',
+            color: 'var(--nui-text-muted)',
+            fontStyle: 'normal',
+            letterSpacing: '0.06em',
+          }}
+        >
+          {credit}
+        </span>
+      )}
     </figcaption>
   );
 };

packages/components/src/Text/Headline.tsx

@@ -1,51 +1,49 @@
-import React from 'react';
+'use client';
+import React, { ReactNode, CSSProperties } from 'react';
 import { visualWeights, resolveFontSize } from '@newspaperui/theme';
-import { calculateSpanWidth } from '@newspaperui/utils';
-import { useSection } from '../Section/Section';
+import { clampSpan, cx } from '@newspaperui/utils';
+import { useSection } from '../layout/Section';
 
 const weightToTag: Record<'High' | 'Medium' | 'Low', 'h1' | 'h2' | 'h3'> = {
-  High: 'h1',
-  Medium: 'h2',
-  Low: 'h3',
+  High: 'h1', Medium: 'h2', Low: 'h3',
 };
 
 export interface HeadlineProps {
   weight?: 'High' | 'Medium' | 'Low';
   span?: number;
-  as?: 'h1' | 'h2' | 'h3' | 'h4';
-  children: React.ReactNode;
+  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  align?: 'left' | 'center' | 'right';
+  className?: string;
+  style?: CSSProperties;
+  children: ReactNode;
 }
 
 export const Headline: React.FC<HeadlineProps> = ({
-  weight = 'High',
-  span,
-  as,
-  children,
+  weight = 'High', span, as, align, className, style, children,
 }) => {
   const section = useSection();
-  const config = visualWeights.Headline[weight];
-
-  if (!config) {
-    throw new Error(`Invalid weight: ${weight} for Headline`);
-  }
-
-  const finalSpan = span || (Array.isArray(config.span) ? config.span[0] : config.span);
-  const width = calculateSpanWidth(finalSpan, section.columns);
-  const Tag = as ?? weightToTag[weight];
+  const config = visualWeights.Headline[weight]!;
+  const Tag = (as ?? weightToTag[weight]) as keyof JSX.IntrinsicElements;
+  const cols = span ? clampSpan(span, section.columns) : undefined;
+  const variantClass = config.fontVariant?.includes('lining') ? 'nui-tnum' : 'nui-osf';
 
   return (
     <Tag
-      className="newspaper-headline"
+      className={cx('nui-headline', variantClass, className)}
       style={{
+        fontFamily: `var(${config.fontFamily})`,
         fontSize: resolveFontSize(config.fontSize),
         fontWeight: config.fontWeight,
         lineHeight: config.lineHeight,
-        color: config.color,
+        letterSpacing: config.letterSpacing,
+        color: `var(${config.color})`,
         margin: config.margin,
-        width,
+        textAlign: align,
+        textWrap: 'balance' as CSSProperties['textWrap'],
+        gridColumn: cols ? `span ${cols}` : undefined,
+        ...style,
       }}
       data-weight={weight}
-      data-span={finalSpan}
     >
       {children}
     </Tag>

packages/components/src/Text/Quote.tsx

@@ -1,42 +1,50 @@
-import React from 'react';
+'use client';
+import React, { ReactNode, CSSProperties } from 'react';
 import { visualWeights, resolveFontSize } from '@newspaperui/theme';
-import { calculateSpanWidth } from '@newspaperui/utils';
-import { useSection } from '../Section/Section';
+import { clampSpan, cx } from '@newspaperui/utils';
+import { useSection } from '../layout/Section';
 
 export interface QuoteProps {
+  variant?: 'block' | 'inline';
   weight?: 'High' | 'Medium';
   span?: number;
-  children: React.ReactNode;
+  cite?: string;
+  className?: string;
+  style?: CSSProperties;
+  children: ReactNode;
 }
 
 export const Quote: React.FC<QuoteProps> = ({
-  weight = 'Medium',
-  span,
-  children,
+  variant = 'block', weight = 'Medium', span, cite, className, style, children,
 }) => {
   const section = useSection();
-  const config = visualWeights.Quote[weight];
+  const config = visualWeights.Quote[weight]!;
+  const cols = span ? clampSpan(span, section.columns) : undefined;
 
-  if (!config) {
-    throw new Error(`Invalid weight: ${weight} for Quote`);
+  if (variant === 'inline') {
+    return (
+      <em className={cx('nui-quote nui-quote--inline', className)} style={style}>
+        {children}
+      </em>
+    );
   }
 
-  const finalSpan = span || (Array.isArray(config.span) ? config.span[0] : config.span);
-  const width = calculateSpanWidth(finalSpan, section.columns);
-
   return (
     <blockquote
-      className="newspaper-quote"
+      cite={cite}
+      className={cx('nui-quote nui-quote--block nui-osf', className)}
       style={{
+        fontFamily: `var(${config.fontFamily})`,
         fontSize: resolveFontSize(config.fontSize),
         fontWeight: config.fontWeight,
         lineHeight: config.lineHeight,
-        color: config.color,
+        color: `var(${config.color})`,
         margin: config.margin,
-        width,
+        gridColumn: cols ? `span ${cols}` : undefined,
+        borderLeft: 'none',
+        ...style,
       }}
       data-weight={weight}
-      data-span={finalSpan}
     >
       {children}
     </blockquote>

packages/components/src/Text/Subhead.tsx

@@ -1,44 +1,42 @@
-import React from 'react';
+'use client';
+import React, { ReactNode, CSSProperties } from 'react';
 import { visualWeights, resolveFontSize } from '@newspaperui/theme';
-import { calculateSpanWidth } from '@newspaperui/utils';
-import { useSection } from '../Section/Section';
+import { clampSpan, cx } from '@newspaperui/utils';
+import { useSection } from '../layout/Section';
 
 export interface SubheadProps {
   weight?: 'High' | 'Medium';
   span?: number;
-  children: React.ReactNode;
+  as?: 'h2' | 'h3' | 'h4' | 'p';
+  className?: string;
+  style?: CSSProperties;
+  children: ReactNode;
 }
 
 export const Subhead: React.FC<SubheadProps> = ({
-  weight = 'Medium',
-  span,
-  children,
+  weight = 'Medium', span, as = 'p', className, style, children,
 }) => {
   const section = useSection();
-  const config = visualWeights.Subhead[weight];
-
-  if (!config) {
-    throw new Error(`Invalid weight: ${weight} for Subhead`);
-  }
-
-  const finalSpan = span || (Array.isArray(config.span) ? config.span[0] : config.span);
-  const width = calculateSpanWidth(finalSpan, section.columns);
-
+  const config = visualWeights.Subhead[weight]!;
+  const Tag = as as keyof JSX.IntrinsicElements;
+  const cols = span ? clampSpan(span, section.columns) : undefined;
   return (
-    <h2
-      className="newspaper-subhead"
+    <Tag
+      className={cx('nui-subhead nui-osf', className)}
       style={{
+        fontFamily: `var(${config.fontFamily})`,
         fontSize: resolveFontSize(config.fontSize),
         fontWeight: config.fontWeight,
+        fontStyle: config.fontStyle,
         lineHeight: config.lineHeight,
-        color: config.color,
+        color: `var(${config.color})`,
         margin: config.margin,
-        width,
+        gridColumn: cols ? `span ${cols}` : undefined,
+        ...style,
       }}
       data-weight={weight}
-      data-span={finalSpan}
     >
       {children}
-    </h2>
+    </Tag>
   );
 };