fix(ci): normalize directory casing to lowercase for Linux CI

macOS is case-insensitive but Linux CI is case-sensitive. Git was tracking uppercase Layout/Text/Media but imports used lowercase. Renamed via git mv to make both consistent (lowercase). Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
2026-05-20 16:54:35 +08:00
parent 5dd273faa2
commit 941df8d79f
18 changed files with 0 additions and 0 deletions
@@ -0,0 +1,51 @@
+'use client';
+import React, { CSSProperties } from 'react';
+import { clampSpan, cx } from '@newspaperui/utils';
+import { useSection } from '../layout/Section';
+import { Caption } from '../text/Caption';
+
+export interface FigureProps {
+  src: string;
+  alt: string;
+  caption?: string;
+  credit?: string;
+  span?: number;
+  className?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * Figure — 图文组合（img + Caption）
+ *
+ * - 将图片与 Caption 组合为语义化 figure 元素
+ * - 支持 caption 文字说明和 credit 来源标注
+ * - 自动避免 print 分页断开（break-inside: avoid）
+ *
+ * @example
+ * <Figure
+ *   src="/photo.jpg"
+ *   alt="City skyline"
+ *   caption="Downtown at dusk"
+ *   credit="Photo by John"
+ *   span={10}
+ * />
+ */
+export const Figure: React.FC<FigureProps> = ({
+  src, alt, caption, credit, span, className, style,
+}) => {
+  const section = useSection();
+  const cols = span ? clampSpan(span, section.columns) : undefined;
+  return (
+    <figure
+      className={cx('nui-figure nui-avoid-break', className)}
+      style={{
+        margin: 0,
+        gridColumn: cols ? `span ${cols}` : undefined,
+        ...style,
+      }}
+    >
+      <img src={src} alt={alt} style={{ display: 'block', width: '100%', height: 'auto' }} />
+      {(caption || credit) && <Caption credit={credit}>{caption}</Caption>}
+    </figure>
+  );
+};