@linhey/rhine-design 0.3.0 → 0.5.0

package/preview/SubscriptionGallery.tsx

@@ -0,0 +1,84 @@
+import { useState } from 'react';
+import { Badge, Button, DataTable, Dialog, Grid, Inline, KeyValue, Menu, Metric, Select, Stack, Surface, Text, TextField } from '../components';
+import './subscriptions.css';
+
+const initialPlans = [
+  { id: 'gpt100', name: 'GPT100', color: 'green', count: 12, price: 100, description: '日常创作与轻量任务', status: '运行中' },
+  { id: 'gpt200', name: 'GPT200', color: 'orange', count: 8, price: 200, description: '复杂推理与高频工作', status: '运行中' },
+  { id: 'grok', name: 'Grok', color: 'violet', count: 4, price: 80, description: '探索灵感与多样表达', status: '运行中' },
+];
+const money = (value: number) => `¥${value.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+type Plan = typeof initialPlans[number];
+function TypeTag({ plan }: { plan: Plan }) {
+  return <span className="rhine-type-tag" data-color={plan.color}>{plan.name}</span>;
+}
+
+export function SubscriptionGallery() {
+  const [plans, setPlans] = useState(initialPlans);
+  const [createOpen, setCreateOpen] = useState(false);
+  const [planId, setPlanId] = useState('gpt100');
+  const [quantity, setQuantity] = useState('1');
+  const [error, setError] = useState('');
+  const [message, setMessage] = useState('');
+  const [showPrices, setShowPrices] = useState(true);
+  const total = plans.reduce((sum, plan) => sum + plan.count, 0);
+  const cost = plans.reduce((sum, plan) => sum + plan.count * plan.price, 0);
+  const displayMoney = (value: number) => showPrices ? money(value) : '••••';
+  const selectedPlan = plans.find(plan => plan.id === planId)!;
+
+  return <section id="subscriptions" className="ds-subscriptions">
+    <div className="ds-subscription-heading">
+      <div><Text variant="overline" tone="muted" lang="en">YOUR SUBSCRIPTIONS, AT A GLANCE</Text><h1>订阅，一目了然<span aria-hidden="true">.</span></h1><Text tone="muted">数量、支出与状态，在这里轻松掌握。</Text></div>
+      <Inline gap={3}>
+        <Dialog title="新增订阅" description="选择类型与数量，预览更新后的订阅概览。仅使用演示数据，不产生实际扣费。" open={createOpen} onOpenChange={open => { setCreateOpen(open); setError(''); }} trigger={<Button>＋ 新增订阅</Button>}>
+          <form onSubmit={event => {
+            event.preventDefault();
+            const count = Number(quantity);
+            if (!Number.isInteger(count) || count < 1 || count > 99) { setError('请输入 1–99 之间的整数。'); return; }
+            setPlans(current => current.map(plan => plan.id === planId ? { ...plan, count: plan.count + count } : plan));
+            setMessage(`已添加 ${count} 个 ${selectedPlan.name} 演示订阅。`);
+            setCreateOpen(false); setQuantity('1');
+          }} noValidate>
+            <Stack gap={4}>
+              <Select label="订阅类型" value={planId} onChange={event => setPlanId(event.target.value)}>{plans.map(plan => <option value={plan.id} key={plan.id}>{plan.name}</option>)}</Select>
+              <TextField label="订阅数量" type="number" inputMode="numeric" min={1} max={99} value={quantity} onChange={event => setQuantity(event.target.value)} error={error} hint="每次可添加 1–99 个演示订阅。" />
+              <KeyValue items={[{ key: 'price', label: '单价 / 月', value: displayMoney(selectedPlan.price) }]} />
+              <Inline gap={3}><Button type="submit">添加到概览</Button><Button variant="secondary" onClick={() => setCreateOpen(false)}>取消</Button></Inline>
+            </Stack>
+          </form>
+        </Dialog>
+        <Menu label="订阅管理" trigger={<Button variant="secondary" aria-label="管理订阅">管理 ⋯</Button>} items={[
+          { id: 'amounts', label: showPrices ? '隐藏金额' : '显示金额', onSelect: () => setShowPrices(value => !value) },
+          { id: 'reset', label: '重置演示数据', onSelect: () => { setPlans(initialPlans); setMessage('演示数据已重置。'); } },
+        ]} />
+      </Inline>
+    </div>
+    <div className="ds-subscription-notice"><span>主题场景 / 订阅管理</span><span>示例数量与价格 · 无实际交易</span></div>
+    <div role="status" className="ds-subscription-status">{message}</div>
+    <Surface className="ds-subscription-summary"><Grid minWidth={180} gap={6}>
+      <Metric label="订阅总数" value={total} unit="个" description="所有订阅均在正常运行" />
+      <Metric label="每月支出" value={displayMoney(cost)} description="按当前演示订阅计算" />
+      <Metric label="订阅类型" value="03" unit="类" description="GPT100 / GPT200 / Grok" />
+    </Grid></Surface>
+    <div className="ds-subscription-section-head"><Text as="h2" variant="section">我的订阅</Text><Text tone="muted" variant="caption">点击卡片，查看明细 ↗</Text></div>
+    <div className="ds-subscription-cards">{plans.map(plan => <Dialog key={plan.id} title={`${plan.name} 订阅明细`} description={plan.description} trigger={
+      <button type="button" className="rhine-surface ds-subscription-card" aria-label={`查看 ${plan.name} 订阅明细`}>
+        <span className="ds-subscription-card-top"><TypeTag plan={plan} /><span className="ds-subscription-arrow" aria-hidden="true">↗</span></span>
+        <span className="ds-subscription-count">{plan.count}<small>个订阅</small></span>
+        <span className="ds-subscription-description">{plan.description}</span>
+        <span className="ds-subscription-card-bottom"><span className="ds-subscription-running">● {plan.status}</span><strong>{displayMoney(plan.count * plan.price)}<small> / 月</small></strong></span>
+      </button>
+    }><Stack gap={6}><Inline><TypeTag plan={plan} /><Badge tone="success">{plan.status}</Badge></Inline><Metric label="当前订阅数量" value={plan.count} unit="个" /><KeyValue items={[
+      { key: 'price', label: '单价 / 月', value: displayMoney(plan.price) },
+      { key: 'total', label: '每月合计', value: displayMoney(plan.count * plan.price) },
+      { key: 'cycle', label: '计费周期', value: '按月 · 演示数据' },
+    ]} /><Text variant="caption" tone="muted">这是交互示例，价格不代表真实产品报价。</Text></Stack></Dialog>)}</div>
+    <Surface className="ds-subscription-table"><DataTable caption="每月费用明细" rows={plans} rowKey={plan => plan.id} columns={[
+      { key: 'type', header: '订阅类型', render: plan => <TypeTag plan={plan} /> },
+      { key: 'count', header: '数量', align: 'right', render: plan => `${plan.count} 个` },
+      { key: 'price', header: '单价 / 月', align: 'right', render: plan => displayMoney(plan.price) },
+      { key: 'total', header: '合计 / 月', align: 'right', render: plan => <strong>{displayMoney(plan.count * plan.price)}</strong> },
+      { key: 'status', header: '状态', render: plan => <Badge tone="success">{plan.status}</Badge> },
+    ]} /><div className="ds-subscription-total"><Text tone="muted">每月合计</Text><Text variant="heading" numeric>{displayMoney(cost)}</Text></div></Surface>
+  </section>;
+}

package/preview/backgrounds.css

@@ -0,0 +1,10 @@
+.ds-background-controls { display:flex; flex-wrap:wrap; align-items:end; gap:16px; margin:24px 0; }
+.ds-background-controls .rhine-select { width:min(100%,260px); }
+.ds-background-scenes { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:24px; }
+.ds-background-example { min-width:0; }
+.ds-background-label { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; margin-bottom:8px; }
+.ds-background-label code { font:12px/20px var(--rhine-mono); color:var(--rhine-muted); }
+.ds-background-sample { display:grid; align-content:center; gap:8px; min-height:136px; padding:24px; border:1px solid var(--rhine-line); border-radius:var(--rhine-radius-card); overflow-wrap:anywhere; }
+.ds-background-backdrop { padding:16px; background:var(--rhine-backdrop-bg); border-radius:var(--rhine-radius-card); }
+.ds-background-backdrop .ds-background-sample { min-height:104px; padding:16px; }
+.ds-background-local { margin-top:24px; }

package/preview/extensions.css

@@ -0,0 +1,6 @@
+.ds-extension-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr)); gap:24px; margin-top:24px; }
+.ds-extension-grid>* { min-width:0; }
+.ds-extension-controls { display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-bottom:24px; }
+.ds-extension-controls .rhine-select { width:auto; max-width:100%; }
+.ds-shell-stage { height:680px; max-height:85dvh; min-height:380px; min-width:0; }
+.ds-background-swatch { display:grid; gap:24px; padding:24px; border:1px solid var(--rhine-line); }

package/preview/line-height.css

@@ -0,0 +1,2 @@
+.ds-leading-sample[data-guides=true] { background-image:repeating-linear-gradient(to bottom,var(--rhine-selected) 0,var(--rhine-selected) calc(var(--ds-leading) - 1px),var(--rhine-line) calc(var(--ds-leading) - 1px),var(--rhine-line) var(--ds-leading)); }
+.ds-leading-paragraphs { max-width:44ch; }

package/preview/main.tsx

@@ -5,6 +5,14 @@ import './preview.css';
 import { CommonGallery } from './CommonGallery';
 import { MotionGallery } from './MotionGallery';
 import { StartupGallery } from './StartupGallery';
+import { PatternGallery } from './PatternGallery';
+import { GalleryShell } from './GalleryShell';
+import { SpacingGallery } from './SpacingGallery';
+import { LineHeightGallery } from './LineHeightGallery';
+import { SubscriptionGallery } from './SubscriptionGallery';
+import { BackgroundGallery } from './BackgroundGallery';
+import { AdvancedDataGallery, AdvancedFormsGallery, MediaGallery, ShellGallery } from './ExtensionsGallery';
+import { MonitoringGallery } from './MonitoringGallery';
 
 function Gallery() {
   const [motion, setMotion] = useState('system');
@@ -22,15 +30,30 @@ function Gallery() {
   const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
   useEffect(() => () => { if (timer.current) clearTimeout(timer.current); }, []);
   const simulate = () => { setBusy(true); timer.current = setTimeout(() => { setBusy(false); setNotice(true); }, 900); };
-  return <div className="rhine-theme ds-gallery" data-rhine-motion={motion}>
-    <header className="ds-header"><a href="#top" className="ds-brand"><Logo variant="lockup" size={36} /><span>DESIGN SYSTEM</span></a><Badge>V1.4 / COMPONENTS</Badge></header>
-    <main id="top">
-      <div className="ds-hero"><div><p className="ds-kicker">FOUNDATIONS / COMPONENTS / MOTION</p><h1>精密，有序。<br /><span>每一次交互都有回应。</span></h1><p>40 个通用组件，共用一套视觉变量和动效规则。<br />这里运行的就是后续业务页面可直接导入的 React 组件。</p></div><div className="ds-motion-control"><span className="ds-caption">动效偏好 · 仅预览</span><SegmentedControl label="动效偏好" items={[{ value:'system', label:'跟随系统' },{ value:'reduced', label:'减少动态' }]} value={motion} onValueChange={setMotion} /><p>系统减少动态始终优先。<br />动画不延迟操作，也不代替业务结果。</p></div></div>
-      <nav className="ds-nav" aria-label="组件目录"><a href="#startup">启动动画</a><a href="#motion">动效实验室</a><a href="#brand">品牌标志</a><a href="#foundation">视觉基础</a><a href="#typography">字体与文字</a><a href="#actions">按钮与输入</a><a href="#selection">选择与切换</a><a href="#feedback">状态与加载</a><a href="#disclosure">展开与组合</a><a href="#data">数据与分页</a><a href="#forms">表单与选择</a><a href="#utilities">操作与布局</a><a href="#overlays">浮层与反馈</a></nav>
+  return <GalleryShell motion={motion} onMotionChange={setMotion}>{section => <>
+    {section === 'monitoring' && <MonitoringGallery />}
+    {section === 'backgrounds' && <BackgroundGallery />}
+    {section === 'app-shell' && <ShellGallery />}
+    {section === 'advanced-forms' && <AdvancedFormsGallery />}
+    {section === 'advanced-data' && <AdvancedDataGallery />}
+    {section === 'media' && <MediaGallery />}
+    {section === 'subscriptions' && <SubscriptionGallery />}
+    {section === 'top' && <>
+      <div className="ds-hero"><div><p className="ds-kicker">FOUNDATIONS / COMPONENTS / MOTION</p><h1>精密，有序。<br /><span>每一次交互都有回应。</span></h1><p>59 个通用组件，共用一套视觉变量和动效规则。<br />这里运行的就是后续业务页面可直接导入的 React 组件。</p></div></div>
+      <div className="ds-overview-links">{[
+        ['foundation','视觉基础','从色彩、间距与材质开始。'],
+        ['typography','字体与文字','清晰的层级，稳定的阅读节奏。'],
+        ['patterns','场景与交互指南','先明确任务，再选择组件和动效。'],
+        ['motion','动效实验室','播放、重播，观察交互的连续性。'],
+      ].map(([id,title,description]) => <a key={id} href={`#${id}`}><strong>{title}</strong><span aria-hidden="true">↗</span><p>{description}</p></a>)}</div>
+    </>}
 
-      <StartupGallery reduced={motion==='reduced'} />
-      <MotionGallery reduced={motion==='reduced'} />
-      <section id="brand"><div className="ds-section-title"><span>00</span><h2>三角构架 · Rhine Design</h2></div>
+
+      {['navigation','form-workflow','patterns'].includes(section) && <PatternGallery section={section} />}
+      {section === 'spacing' && <SpacingGallery />}
+      {section === 'startup' && <StartupGallery reduced={motion==='reduced'} />}
+      {section === 'motion' && <MotionGallery reduced={motion==='reduced'} />}
+      {section === 'brand' && <section id="brand"><div className="ds-section-title"><span>00</span><h2>三角构架 · Rhine Design</h2></div>
         <div className="ds-logo-pair">
           <div className="ds-logo-stage"><Logo variant="icon" size={192} theme="light" /><span>浅色 / LIGHT</span></div>
           <div className="ds-logo-stage ds-logo-stage--dark"><Logo variant="icon" size={192} theme="dark" /><span>深色 / DARK</span></div>
@@ -38,14 +61,14 @@ function Gallery() {
         <p className="ds-caption">浅色与深色共用同一份矢量母版，图形在方形画布内水平、垂直居中。</p>
         <div className="ds-grid"><Surface><div className="ds-component-title"><h3>Logo · 尺寸与组合</h3><span>16 / 24 / 32 / 48 / 64px</span></div><div className="ds-row">{[16,24,32,48,64].map(size=><Logo key={size} size={size} label={`Rhine Design ${size}px`} />)}</div><div className="ds-gap-top"><Logo variant="lockup" size={48} /></div></Surface>
           <Surface><div className="ds-component-title"><h3>Logo · 三块归位</h3><span>240ms / 单次入场</span></div><div className="ds-row"><Logo key={logoReplay} size={80} animate /><Button variant="secondary" onClick={()=>setLogoReplay(value=>value+1)}>重播标志动画</Button></div><p className="ds-caption">默认静态；减少动态时直接呈现。标志不表示同步进度。</p></Surface></div>
-      </section>
+      </section>}
 
-      <section id="foundation"><div className="ds-section-title"><span>01</span><h2>同一套变量，贯穿所有组件</h2></div>
+      {section === 'foundation' && <section id="foundation"><div className="ds-section-title"><span>01</span><h2>同一套变量，贯穿所有组件</h2></div>
         <div className="ds-palette">{[['PAPER','#F2F1E9'],['INK','#242B28'],['SAGE','#E5ECE3'],['GREEN','#425C4B'],['SIGNAL','#C65C34']].map(([name,color])=><div key={name}><div style={{background:color}} /><strong>{name}</strong><code>{color}</code></div>)}</div>
         <div className="ds-notes"><span>14px 正文 / 12px 辅助信息</span><span>4px 卡片 / 3px 按钮圆角</span><span>120–240ms 交互过渡</span></div>
-      </section>
+      </section>}
 
-      <section id="typography"><div className="ds-section-title"><span>TYPE</span><h2>字体与文字 · 清晰先于装饰</h2></div>
+      {section === 'typography' && <section id="typography"><div className="ds-section-title"><span>TYPE</span><h2>字体与文字 · 清晰先于装饰</h2></div>
         <p className="ds-caption">系统无衬线用于中英文正文；等宽字体用于路径、模型标识和代码。业务字号不低于 12px，中文不增加装饰字距。</p>
         <Surface><div className="ds-type-scale">{([
           ['title','30 / 38 · 600','连接你的工作空间'],
@@ -58,6 +81,7 @@ function Gallery() {
           ['metric','26 / 32 · 600','1,280.00'],
           ['code','12 / 20 · 400','~/.codex/auth.json'],
         ] satisfies [TextVariant,string,string][]).map(([variant,spec,sample])=><div className="ds-type-row" key={variant}><div><Text variant="code">{variant}</Text><Text variant="caption" tone="muted">{spec}</Text></div><Text variant={variant}>{sample}</Text></div>)}</div></Surface>
+        <LineHeightGallery />
         <div className="ds-grid ds-gap-top"><Surface><Text as="h3" variant="heading">中英文与数字</Text><div className="ds-type-copy"><Text>已完成 128 次请求，共使用 1.4M Token。</Text><Text numeric>预估费用 $5.44 · 平均耗时 2.4 s</Text><Text tone="muted" variant="caption">2026-10-22 14:32 · 上海（UTC+8）</Text><Text variant="overline" lang="en">Usage / Today</Text><Text>未采集的数据显示「—」，不替换为 0。小数位按指标语义固定，原始值保持可查。</Text></div></Surface>
         <Surface><Text as="h3" variant="heading">换行与状态文案</Text><div className="ds-type-copy"><Text>长标题、错误原因和下一步操作允许自然换行。</Text><Text variant="code">example-very-long-model-identifier-for-wrapping-preview-2026-10-22</Text><Text tone="error">暂时无法读取列表。请检查连接后重试。</Text><Text variant="caption" tone="muted">文字不缩放、不跑马灯、不逐字播放；复制或展开应能获取完整内容。</Text></div></Surface></div>
         <div className="ds-gap-top"><Toolbar title="Rhine Design / 设计评审" description="工具栏与静态页面样稿共用一套样式。">
@@ -65,36 +89,35 @@ function Gallery() {
           <Select label="场景示例" defaultValue="normal"><option value="normal">正常</option><option value="loading">读取中 / 等待授权</option></Select>
         </Toolbar></div>
         <div className="ds-grid ds-gap-top"><Select label="错误状态" defaultValue="" error="请选择一个页面后继续。"><option value="" disabled>请选择</option><option value="usage">数据概览</option></Select><Select label="禁用状态" disabled defaultValue="fixed" hint="原生菜单保留键盘操作，箭头不接收点击。"><option value="fixed">暂不可更改</option></Select></div>
-      </section>
+      </section>}
 
-      <section id="actions"><div className="ds-section-title"><span>02</span><h2>操作有分量，反馈不打断</h2></div>
+      {section === 'actions' && <section id="actions"><div className="ds-section-title"><span>02</span><h2>操作有分量，反馈不打断</h2></div>
         <div className="ds-grid"><Surface><div className="ds-component-title"><h3>Button</h3><span>悬停 120ms / 按下 80ms</span></div><div className="ds-row"><Button busy={busy} busyLabel="正在保存" onClick={simulate}>保存修改</Button><Button variant="secondary" onClick={()=>setNotice(false)}>取消提示</Button><Button variant="quiet" onClick={()=>setNotice(true)}>查看反馈</Button><Button variant="danger" disabled>删除记录</Button></div><p className="ds-caption">处理中保持尺寸和键盘焦点，阻止重复提交。</p><Button disabled>暂不可用</Button></Surface>
         <Surface><div className="ds-component-title"><h3>TextField</h3><span>边框反馈 / 不抖动报错</span></div><TextField label="显示名称" value={field} onChange={event=>setField(event.target.value)} hint="此字段仅演示输入状态，不保存数据。" error={showError&&!field.trim()?'请输入显示名称':undefined} placeholder="例如：研究工作区" /><div className="ds-row ds-gap-top"><Button variant="secondary" onClick={()=>setShowError(true)}>验证输入</Button></div></Surface></div>
-      </section>
+      </section>}
 
-      <section id="selection"><div className="ds-section-title"><span>03</span><h2>选择清楚，位置稳定</h2></div>
+      {section === 'selection' && <section id="selection"><div className="ds-section-title"><span>03</span><h2>选择清楚，位置稳定</h2></div>
         <div className="ds-grid"><div><SelectionCard label="可选择容器" selected={selected} onSelectedChange={setSelected}><span className="ds-caption">适用于账号、模板或可取消选择项。<br />同一位置切换底色与边框，不抬升卡片。</span><div className="ds-gap-top"><Badge tone={selected?'success':'neutral'}>{selected?'已选择':'未选择'}</Badge></div></SelectionCard><p className="ds-caption">SelectionCard · 背景与边界 120ms</p></div>
         <Surface><div className="ds-component-title"><h3>SegmentedControl</h3><span>原生单选 / 120ms</span></div><SegmentedControl label="展示指标" items={[{value:'tokens',label:'Token'},{value:'requests',label:'请求数'},{value:'cost',label:'费用',disabled:true}]} value={metric} onValueChange={setMetric} /><p className="ds-caption">当前指标：{metric==='tokens'?'Token':'请求数'}。方向键切换，自动跳过禁用项。</p></Surface></div>
         <Surface className="ds-gap-top"><div className="ds-component-title"><h3>Tabs</h3><span>下划线与内容进入 180ms</span></div><Tabs label="组件说明" value={tab} onValueChange={setTab} items={[{value:'tokens',label:'视觉变量',content:<p>颜色、间距、字体与动效集中定义。业务页面只消费语义变量。</p>},{value:'disabled',label:'预留示例',disabled:true,content:null},{value:'motion',label:'动效规则',content:<p>内容进入最多移动 3px。保留隐藏面板状态，切换不触发重复业务操作。</p>}]} /></Surface>
-      </section>
+      </section>}
 
-      <section id="feedback"><div className="ds-section-title"><span>04</span><h2>告诉用户发生了什么</h2></div>
+      {section === 'feedback' && <section id="feedback"><div className="ds-section-title"><span>04</span><h2>告诉用户发生了什么</h2></div>
         <div className="ds-row ds-badges"><Badge>未开始</Badge><Badge tone="success">已完成</Badge><Badge tone="warning">需要处理</Badge><Badge tone="error">操作失败</Badge></div>
         <div className="ds-grid"><Surface><div className="ds-component-title"><h3>Progress</h3><span>数值更新 240ms</span></div><Progress label="进度示例" value={progress} /><div className="ds-row ds-gap-top"><Button variant="secondary" onClick={()=>setProgress(value=>value===null?38:Math.min(100,value+20))}>推进进度</Button><Button variant="quiet" onClick={()=>setProgress(value=>value===null?38:null)}>切换未知进度</Button></div><p className="ds-caption">只有真实进度才显示百分比；未知进度单独表达。</p></Surface>
         <Surface><div className="ds-component-title"><h3>Skeleton</h3><span>1400ms 低幅明暗</span></div>{loading?<Skeleton label="正在读取组件示例" />:<p className="ds-loaded">内容已准备好。加载占位与内容共用容器。</p>}<div className="ds-gap-top"><Button variant="secondary" onClick={()=>setLoading(value=>!value)}>切换加载状态</Button></div></Surface></div>
         <div className="ds-gap-top"><Button variant="secondary" onClick={()=>setNotice(value=>!value)}>切换提示</Button></div>
         {notice&&<div className="ds-gap-top"><Notice tone="success" title="修改已保存（演示）" action={<Button variant="quiet" onClick={()=>setNotice(false)}>关闭提示</Button>}>这是组件的本地反馈，没有写入任何业务数据。</Notice></div>}
         <div className="ds-gap-top"><Notice tone="warning" title="状态文字始终可见">颜色和动画只增强反馈，不承担唯一的状态含义。</Notice></div>
-      </section>
+      </section>}
 
-      <section id="disclosure"><div className="ds-section-title"><span>05</span><h2>逐步展开，保持可读</h2></div>
+      {section === 'disclosure' && <section id="disclosure"><div className="ds-section-title"><span>05</span><h2>逐步展开，保持可读</h2></div>
         <div className="ds-grid"><Surface><div className="ds-component-title"><h3>Disclosure</h3><span>实测高度 / 200ms</span></div><Disclosure title="查看组件动画规则"><p>展开和收起都支持中途反向。关闭后内容不参与 Tab 导航。</p><Button variant="secondary" onClick={()=>setNotice(true)}>内容内操作</Button><p>减少动态模式直接到达最终状态，信息不会丢失。</p></Disclosure></Surface>
         <EmptyState title="暂无记录" description="用一句话说明当前状态，按业务需要提供一个下一步操作。" action={<Button variant="secondary" onClick={()=>setNotice(true)}>演示下一步</Button>} /></div>
-      </section>
-      <CommonGallery />
-      <footer className="ds-footer"><span>Rhine Design · 通用设计组件 V1.4</span><span>合成数据；复制示例仅在点击时写入演示文字。</span></footer>
-    </main>
-  </div>;
+      </section>}
+      {['data','forms','utilities','overlays'].includes(section) && <CommonGallery key={section} section={section} />}
+  </>}</GalleryShell>;
+
 }
 
 createRoot(document.getElementById('root')!).render(<StrictMode><Gallery /></StrictMode>);

package/preview/patterns.css

@@ -0,0 +1,7 @@
+.ds-navigation-demo { display:grid; grid-template-columns:180px minmax(0,1fr); gap:24px; margin-top:20px; }
+.ds-navigation-content { border-inline-start:1px solid var(--rhine-line); padding:24px; }
+.ds-pattern-detail { margin-top:28px; padding-top:24px; border-top:1px solid var(--rhine-line); animation:rhine-pattern-enter var(--rhine-duration-panel) var(--rhine-ease-standard); }
+.ds-pattern-detail h3 { font-size:22px; line-height:1.4; margin:8px 0 24px; overflow-wrap:anywhere; }
+.ds-pattern-detail dl { display:grid; grid-template-columns:80px minmax(0,1fr); gap:20px; margin:0; }
+.ds-pattern-detail dt { font-size:12px; color:var(--rhine-muted); }.ds-pattern-detail dd { margin:0; }
+@media(max-width:600px) { .ds-navigation-demo { grid-template-columns:1fr; gap:16px; }.ds-navigation-content { border-inline-start:0; border-top:1px solid var(--rhine-line); padding:20px 0; }.ds-pattern-detail dl { grid-template-columns:1fr; gap:8px; }.ds-pattern-detail dd { margin-bottom:12px; } }

package/preview/preview.css

@@ -3,25 +3,19 @@ body { margin:0; }
 .ds-type-row:last-child { border:0; }
 .ds-type-copy { display:grid; gap:12px; margin-top:16px; max-width:60ch; }
 @media(max-width:600px) { .ds-type-row { grid-template-columns:1fr; } }
-.ds-header { display:flex; justify-content:space-between; align-items:center; gap:16px; border-bottom:1px solid var(--rhine-line); padding:20px max(24px,calc((100vw - 1080px)/2)); }
-.ds-brand { display:inline-flex; align-items:center; color:var(--rhine-ink); text-decoration:none; }
-.ds-brand>span:not(.rhine-logo) { font:12px var(--rhine-mono); letter-spacing:1px; margin-left:16px; }
 .ds-logo-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
 .ds-logo-stage { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; padding:32px 12px; background:var(--rhine-surface); border:1px solid var(--rhine-line); }
 .ds-logo-stage>span:last-child { font:12px var(--rhine-mono); letter-spacing:2px; }
 .ds-logo-stage--dark { background:var(--rhine-ink); color:var(--rhine-bg); border-color:var(--rhine-ink); }
 @media(max-width:600px) { .ds-logo-pair { grid-template-columns:1fr; } }
-.ds-gallery main { max-width:1128px; padding:0 24px; margin:auto; }
-.ds-hero { display:grid; grid-template-columns:1.5fr 1fr; gap:48px; padding:56px 0 40px; align-items:end; }
+.ds-hero { display:grid; grid-template-columns:1fr; gap:48px; padding:56px 0 40px; align-items:end; }
 .ds-kicker { font:12px var(--rhine-mono); letter-spacing:1px; color:var(--rhine-muted); }
 .ds-hero h1 { font-size:44px; line-height:1.35; letter-spacing:-2px; margin:24px 0; font-weight:600; }.ds-hero h1>span { color:var(--rhine-green); }
 .ds-hero p { color:var(--rhine-muted); }
-.ds-motion-control { border-left:2px solid var(--rhine-signal); padding-left:24px; }.ds-motion-control>.ds-caption { display:block; margin-bottom:12px; }.ds-motion-control p { font-size:12px; }
-.ds-nav { display:flex; flex-wrap:wrap; gap:16px 28px; padding:16px 0; border-block:1px solid var(--rhine-ink); }.ds-nav a { color:var(--rhine-green); text-decoration:none; min-height:28px; display:flex; align-items:center; }
 .ds-gallery section { padding:32px 0; scroll-margin-top:24px; }.ds-section-title { display:flex; align-items:baseline; gap:16px; margin-bottom:24px; }.ds-section-title>span { font:12px var(--rhine-mono); color:var(--rhine-warning); }.ds-section-title h2 { font-size:22px; font-weight:600; margin:0; }
 .ds-palette { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }.ds-palette>div>div { height:82px; border:1px solid var(--rhine-line); }.ds-palette strong,.ds-palette code { display:block; font:12px/1.8 var(--rhine-mono); }.ds-palette strong { margin-top:10px; }.ds-palette code { color:var(--rhine-muted); }
 .ds-notes { display:flex; flex-wrap:wrap; gap:12px 32px; margin-top:24px; padding-top:16px; border-top:1px solid var(--rhine-line); font-size:12px; color:var(--rhine-muted); }
 .ds-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:start; }.ds-grid>* { min-width:0; }.ds-component-title { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:20px; }.ds-component-title h3 { font:600 16px var(--rhine-mono); margin:0; }.ds-component-title>span { color:var(--rhine-muted); font-size:12px; }
 .ds-row { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }.ds-caption { font-size:12px; line-height:1.8; color:var(--rhine-muted); }.ds-gap-top { margin-top:20px; }.ds-badges { margin-bottom:24px; }.ds-loaded { min-height:72px; margin:0; }
 .ds-footer { border-top:1px solid var(--rhine-ink); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:24px 0; color:var(--rhine-muted); font-size:12px; }
-@media(max-width:760px) { .ds-hero,.ds-grid { grid-template-columns:1fr; gap:24px; }.ds-hero { padding-top:32px; }.ds-hero h1 { font-size:32px; letter-spacing:-1px; }.ds-brand>span:not(.rhine-logo) { display:none; }.ds-palette { grid-template-columns:repeat(auto-fit,minmax(min(100%,90px),1fr)); }.ds-palette>div>div { height:64px; }.ds-gallery main { padding:0 20px; }.ds-header { padding:16px 20px; flex-wrap:wrap; }.ds-section-title h2 { font-size:19px; } }
+@media(max-width:760px) { .ds-hero,.ds-grid { grid-template-columns:1fr; gap:24px; }.ds-hero { padding-top:32px; }.ds-hero h1 { font-size:32px; letter-spacing:-1px; }.ds-palette { grid-template-columns:repeat(auto-fit,minmax(min(100%,90px),1fr)); }.ds-palette>div>div { height:64px; }.ds-section-title h2 { font-size:19px; } }

package/preview/shell.css

@@ -0,0 +1,35 @@
+.ds-shell { display:grid; grid-template-columns:232px minmax(0,1fr); height:100dvh; background:var(--rhine-bg); }
+.ds-skip { position:fixed; top:8px; left:16px; z-index:100; padding:12px; background:var(--rhine-ink); color:var(--rhine-surface); transform:translateY(-160%); }
+.ds-skip:focus { transform:none; }
+.ds-sidebar { display:flex; flex-direction:column; min-height:0; border-right:1px solid var(--rhine-line); background:var(--rhine-surface); }
+.ds-sidebar-brand { padding:28px 24px 24px; }
+.ds-sidebar-brand>a { display:flex; gap:12px; align-items:center; color:var(--rhine-ink); text-decoration:none; font-size:18px; font-weight:600; }
+.ds-sidebar-brand small { display:block; margin-top:2px; font:10px/16px var(--rhine-mono); letter-spacing:.08em; color:var(--rhine-muted); }
+.ds-sidebar-nav { flex:1; min-height:0; overflow:auto; padding:0 16px 20px; scrollbar-width:thin; }
+.ds-sidebar-foot { display:grid; gap:6px; padding:20px 28px; border-top:1px solid var(--rhine-line); color:var(--rhine-muted); font:12px/18px var(--rhine-font); }
+.ds-sidebar-foot>span:first-child { font:10px/16px var(--rhine-mono); letter-spacing:.06em; }
+.ds-menu-toggle { display:none; }
+.ds-workspace { min-width:0; min-height:0; overflow:auto; scrollbar-gutter:stable; }
+.ds-workspace:focus { outline:none; }
+.ds-workspace-head { min-height:80px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 32px; border-bottom:1px solid var(--rhine-line); }
+.ds-head-controls { display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; }
+.ds-workspace-head>div:first-child { font-size:12px; }.ds-workspace-head>div:first-child>span { color:var(--rhine-muted); }
+.ds-page { max-width:1200px; margin:0 auto; padding:0 32px; animation:rhine-enter var(--rhine-duration-panel) var(--rhine-ease-standard); }
+.ds-overview-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; padding-bottom:40px; }
+.ds-overview-links>a { display:grid; grid-template-columns:1fr auto; gap:12px; padding:24px; color:var(--rhine-ink); text-decoration:none; background:var(--rhine-surface); border:1px solid var(--rhine-line); transition:border-color var(--rhine-duration-hover) var(--rhine-ease-standard); }
+.ds-overview-links>a:hover { border-color:var(--rhine-green); }.ds-overview-links strong { font-size:18px; }.ds-overview-links p { grid-column:1/-1; margin:0; color:var(--rhine-muted); }
+@media(min-width:761px) and (max-width:1100px) {
+  .ds-shell { grid-template-columns:200px minmax(0,1fr); }.ds-page { padding:0 24px; }
+  .ds-page .ds-grid,.ds-page .ds-startup-layout,.ds-page .ds-motion-grid { grid-template-columns:1fr; }
+  .ds-page .ds-hero { grid-template-columns:1fr; gap:24px; }.ds-page .ds-hero h1 { font-size:36px; }
+  .ds-page .ds-type-row { grid-template-columns:130px minmax(0,1fr); }
+}
+@media(max-width:760px) {
+  .ds-shell { grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); }
+  .ds-sidebar { border-right:0; border-bottom:1px solid var(--rhine-line); }
+  .ds-sidebar-brand { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 20px; }
+  .ds-menu-toggle { display:inline-flex; }.ds-sidebar-foot { display:none; }
+  .ds-sidebar-nav { display:none; flex:none; max-height:45dvh; }.ds-sidebar[data-open=true] .ds-sidebar-nav { display:block; }
+  .ds-workspace-head { min-height:0; padding:16px 20px; flex-wrap:wrap; gap:12px; }
+  .ds-page { padding:0 20px; }.ds-overview-links { grid-template-columns:1fr; }
+}

package/preview/spacing.css

@@ -0,0 +1,2 @@
+.ds-spacing-scale { display:grid; grid-template-columns:88px 48px minmax(0,1fr); align-items:center; gap:var(--rhine-space-4); }
+.ds-spacing-bar { display:block; height:var(--rhine-space-3); background:var(--rhine-green); }

package/preview/subscriptions.css

@@ -0,0 +1,27 @@
+.ds-subscription-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
+.ds-subscription-heading h1 { font-size: clamp(28px, 3vw, 40px); line-height: 1.3; font-weight: 800; letter-spacing: -1px; margin: 12px 0; }
+.ds-subscription-heading h1>span { color: var(--rhine-signal); }
+.ds-subscription-notice { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 24px; font-size: 12px; color: var(--rhine-muted); }
+.ds-subscription-status { color: var(--rhine-green); font-size: 12px; }
+.ds-subscription-status:not(:empty) { margin-top: 16px; }
+.ds-subscription-summary { margin-top: 24px; }
+.ds-subscription-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; margin: 32px 0 20px; }
+.ds-subscription-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 24px; }
+.ds-subscription-cards>.rhine-overlay-anchor { display: block; min-width: 0; }
+.ds-subscription-card { display: flex; flex-direction: column; width: 100%; height: 100%; text-align: left; font: inherit; color: var(--rhine-ink); cursor: pointer; transition: background-color 120ms; }
+.ds-subscription-card:hover { background: var(--rhine-selected); }
+.ds-subscription-card-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
+.ds-subscription-arrow { font-size: 24px; }
+.ds-subscription-count { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; font-size: 52px; font-weight: 800; line-height: 1.2; margin: 24px 0 8px; font-variant-numeric: tabular-nums; }
+.ds-subscription-count small, .ds-subscription-card-bottom small { font-size: 12px; color: var(--rhine-muted); font-weight: 400; }
+.ds-subscription-description { font-size: 12px; color: var(--rhine-muted); margin-bottom: 24px; }
+.ds-subscription-card-bottom { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--rhine-line); }
+.ds-subscription-running { color: var(--rhine-green); font-size: 12px; }
+.ds-subscription-card-bottom strong { font-size: 16px; font-variant-numeric: tabular-nums; }
+.ds-subscription-table { margin-top: 32px; }
+.ds-subscription-total { display: flex; justify-content: space-between; gap: 16px; padding-top: 20px; }
+.ds-subscriptions .rhine-type-tag { font-size: 12px; font-weight: 700; }
+@media(max-width:480px) {
+  .ds-subscription-heading h1 { font-size: 28px; }
+  .ds-subscription-summary .rhine-grid { grid-template-columns: 1fr; }
+}

package/preview/theme-arknights.css

@@ -0,0 +1,234 @@
+/* Gallery-only chrome and decoration. Not imported by the public theme entry. */
+/* ================= 全局质感 ================= */
+
+/* 坐标网格底纹 + 顶部扫描线氛围 */
+.rhine-theme[data-rhine-theme="arknights"] .ds-workspace {
+  background-image:
+    linear-gradient(var(--ak-gridline) 1px, transparent 1px),
+    linear-gradient(90deg, var(--ak-gridline) 1px, transparent 1px);
+  background-size: 56px 56px;
+}
+
+/* ================= 字体性格 ================= */
+/* 标签、编号、说明全部等宽化，正文保持无衬线可读性 */
+.rhine-theme[data-rhine-theme="arknights"] .ds-caption,
+.rhine-theme[data-rhine-theme="arknights"] .ds-component-title>span,
+.rhine-theme[data-rhine-theme="arknights"] .ds-notes {
+  font-family: var(--rhine-mono);
+  letter-spacing: .04em;
+}
+
+/* ================= 顶栏 ================= */
+.rhine-theme[data-rhine-theme="arknights"] .ds-workspace-head {
+  position: relative;
+  background: rgba(11, 13, 16, .85);
+  border-bottom-color: var(--rhine-line);
+}
+.rhine-theme[data-rhine-theme="arknights"] .ds-workspace-head::after {
+  content: '';
+  position: absolute;
+  left: 32px;
+  bottom: -1px;
+  width: 160px;
+  height: 4px;
+  background: var(--ak-hazard);
+}
+
+/* ================= 侧栏：深色舱室 ================= */
+.rhine-theme[data-rhine-theme="arknights"] .ds-sidebar {
+  background: #08090c;
+  border-right-color: var(--rhine-line);
+}
+.rhine-theme[data-rhine-theme="arknights"] .ds-sidebar-brand {
+  border-bottom: 1px solid var(--rhine-line);
+  background: repeating-linear-gradient(-45deg, rgba(255, 212, 0, .07) 0 10px, transparent 10px 20px);
+}
+.rhine-theme[data-rhine-theme="arknights"] .ds-sidebar-brand>a { color: var(--rhine-ink); }
+.rhine-theme[data-rhine-theme="arknights"] .ds-sidebar-brand small { color: var(--ak-accent); letter-spacing: .18em; }
+.rhine-theme[data-rhine-theme="arknights"] .ds-sidebar-foot>span:first-child { color: var(--ak-accent); }
+
+/* ================= 主视觉 Hero ================= */
+.rhine-theme[data-rhine-theme="arknights"] .ds-kicker {
+  color: var(--ak-accent);
+  letter-spacing: 3px;
+}
+.rhine-theme[data-rhine-theme="arknights"] .ds-kicker::before { content: '// '; }
+.rhine-theme[data-rhine-theme="arknights"] .ds-hero h1 {
+  font-size: 56px;
+  font-weight: 700;
+  letter-spacing: 0;
+  line-height: 1.2;
+}
+.rhine-theme[data-rhine-theme="arknights"] .ds-hero h1>span {
+  color: var(--ak-accent);
+  /* 黄色高光下划线块 */
+  background: linear-gradient(transparent 62%, rgba(255, 212, 0, .22) 62%);
+}
+@media(max-width:760px) {
+  .rhine-theme[data-rhine-theme="arknights"] .ds-hero h1 { font-size: 34px; }
+}
+
+/* 总览卡片：大号幽灵编号 + 斜切 */
+.rhine-theme[data-rhine-theme="arknights"] .ds-overview-links { counter-reset: ak-link; }
+.rhine-theme[data-rhine-theme="arknights"] .ds-overview-links>a {
+  counter-increment: ak-link;
+  position: relative;
+  background: var(--ak-panel);
+  clip-path: polygon(0 0, calc(100% - var(--ak-cut)) 0, 100% var(--ak-cut), 100% 100%, 0 100%);
+  overflow: hidden;
+}
+.rhine-theme[data-rhine-theme="arknights"] .ds-overview-links>a::after {
+  content: counter(ak-link, decimal-leading-zero);
+  position: absolute;
+  right: 12px;
+  bottom: -14px;
+  font: 700 72px/1 var(--rhine-mono);
+  color: rgba(238, 240, 236, .05);
+  pointer-events: none;
+}
+.rhine-theme[data-rhine-theme="arknights"] .ds-overview-links>a:hover {
+  border-color: var(--ak-accent);
+  background: var(--ak-panel-hi);
+}
+.rhine-theme[data-rhine-theme="arknights"] .ds-overview-links>a:hover>span { color: var(--ak-accent); }
+
+/* ================= 章节标题 ================= */
+.rhine-theme[data-rhine-theme="arknights"] .ds-section-title { align-items:center; }
+.rhine-theme[data-rhine-theme="arknights"] .ds-section-title>span {
+  background: var(--ak-accent);
+  color: var(--ak-accent-ink);
+  font: 700 12px/1 var(--rhine-mono);
+  padding: 5px 8px;
+  clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
+}
+.rhine-theme[data-rhine-theme="arknights"] .ds-section-title h2 { letter-spacing: .02em; }
+
+/* 组件标题等宽化 */
+.rhine-theme[data-rhine-theme="arknights"] .ds-component-title h3 { letter-spacing: .06em; }
+
+/* ================= 面板与容器：斜切 + 角标框架 ================= */
+.rhine-theme[data-rhine-theme="arknights"] .ds-logo-stage {
+  background: var(--ak-panel);
+  clip-path: polygon(0 0, calc(100% - var(--ak-cut)) 0, 100% var(--ak-cut), 100% 100%, 0 100%);
+}
+
+/* ================= Logo 展台 ================= */
+.rhine-theme[data-rhine-theme="arknights"] .ds-logo-stage--dark { background: #08090c; border-color: var(--rhine-line); }
+.rhine-theme[data-rhine-theme="arknights"] .ds-logo-stage>span:last-child { letter-spacing: 3px; color: var(--rhine-muted); }
+
+/* ================= 页脚 ================= */
+.rhine-theme[data-rhine-theme="arknights"] .ds-footer {
+  border-top: 0;
+  position: relative;
+  font-family: var(--rhine-mono);
+  letter-spacing: .06em;
+}
+.rhine-theme[data-rhine-theme="arknights"] .ds-footer::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 200px;
+  height: 4px;
+  background: var(--ak-hazard);
+}
+
+/* ================= 调色板展示 ================= */
+.rhine-theme[data-rhine-theme="arknights"] .ds-palette>div>div { border-color: var(--rhine-control); }
+
+/* ================= 进阶：HUD 视框 / 扫描 / 开机 ================= */
+
+/* 终端读数（默认隐藏，仅本主题显示） */
+.ak-readout { display: none; }
+.rhine-theme[data-rhine-theme="arknights"] .ak-readout {
+  display: block;
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px dashed var(--rhine-line);
+  color: var(--ak-accent);
+  font: 11px/18px var(--rhine-mono);
+  letter-spacing: .08em;
+  font-variant-numeric: tabular-nums;
+}
+
+/* 四角 HUD 取景框 */
+.ak-hud { display: none; }
+.rhine-theme[data-rhine-theme="arknights"] .ak-hud {
+  display: block;
+  position: fixed;
+  inset: 10px;
+  z-index: 90;
+  pointer-events: none;
+}
+.rhine-theme[data-rhine-theme="arknights"] .ak-hud i {
+  position: absolute;
+  width: 26px;
+  height: 26px;
+  border: 2px solid rgba(255, 212, 0, .5);
+}
+.rhine-theme[data-rhine-theme="arknights"] .ak-hud i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
+.rhine-theme[data-rhine-theme="arknights"] .ak-hud i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
+.rhine-theme[data-rhine-theme="arknights"] .ak-hud i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
+.rhine-theme[data-rhine-theme="arknights"] .ak-hud i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }
+
+/* 主题切换开机闪屏 */
+.rhine-theme[data-rhine-theme="arknights"].ds-shell::after {
+  content: '';
+  position: fixed;
+  inset: 0;
+  z-index: 200;
+  pointer-events: none;
+  background:
+    repeating-linear-gradient(0deg, rgba(255, 212, 0, .06) 0 2px, transparent 2px 4px),
+    #050608;
+  animation: ak-boot 520ms steps(3, end) both;
+}
+@keyframes ak-boot {
+  0% { opacity: 1; }
+  55% { opacity: .55; }
+  100% { opacity: 0; visibility: hidden; }
+}
+
+/* 屏幕右缘竖排标识 */
+.rhine-theme[data-rhine-theme="arknights"].ds-shell::before {
+  content: 'RHINE // TACTICAL TERMINAL';
+  position: fixed;
+  right: 6px;
+  top: 50%;
+  transform: translateY(-50%);
+  writing-mode: vertical-rl;
+  font: 10px/1 var(--rhine-mono);
+  letter-spacing: 5px;
+  color: rgba(238, 240, 236, .16);
+  z-index: 50;
+  pointer-events: none;
+}
+@media(max-width:760px) {
+  .rhine-theme[data-rhine-theme="arknights"].ds-shell::before { content: none; }
+}
+
+/* Hero 扫描线 */
+.rhine-theme[data-rhine-theme="arknights"] .ds-hero { position: relative; overflow: hidden; }
+.rhine-theme[data-rhine-theme="arknights"] .ds-hero::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: -120px;
+  height: 120px;
+  background: linear-gradient(180deg, transparent, rgba(255, 212, 0, .07), transparent);
+  pointer-events: none;
+  animation: ak-scan 4.5s linear infinite;
+}
+@keyframes ak-scan {
+  from { top: -120px; }
+  to { top: 100%; }
+}
+
+/* 减少动态：关闭扫描与开机闪屏 */
+@media(prefers-reduced-motion:reduce) {
+  .rhine-theme[data-rhine-theme="arknights"] .ds-hero::after { animation: none; content: none; }
+  .rhine-theme[data-rhine-theme="arknights"].ds-shell::after { animation: none; content: none; }
+}
+.rhine-theme[data-rhine-theme="arknights"][data-rhine-motion=reduced] .ds-hero::after,
+.rhine-theme[data-rhine-theme="arknights"][data-rhine-motion=reduced].ds-shell::after { animation: none; content: none; }

package/preview/theme-neo-brutalism.css

@@ -0,0 +1,11 @@
+/* Gallery-only chrome and decoration. Not imported by the public theme entry. */
+/* Gallery chrome uses the same theme; application layout stays with its host. */
+.rhine-theme[data-rhine-theme="neo-brutalism"] .ds-sidebar { border-right-width: 2px; border-color: var(--rhine-ink); }
+.rhine-theme[data-rhine-theme="neo-brutalism"] .ds-workspace-head { background: var(--rhine-surface); border-bottom: 2px solid var(--rhine-ink); flex-wrap: wrap; }
+.rhine-theme[data-rhine-theme="neo-brutalism"] .ds-overview-links>a { border: 2px solid var(--rhine-ink); border-radius: 22px; box-shadow: var(--rhine-hard-shadow); }
+.rhine-theme[data-rhine-theme="neo-brutalism"] .ds-hero h1 { font-weight: 800; }
+.rhine-theme[data-rhine-theme="neo-brutalism"] .ds-hero h1>span { color: var(--rhine-ink); text-decoration: underline; text-decoration-color: var(--rhine-signal); text-decoration-thickness: 6px; text-underline-offset: 8px; }
+.rhine-theme[data-rhine-theme="neo-brutalism"] .ds-logo-stage { border: 2px solid var(--rhine-ink); border-radius: 22px; }
+@media(max-width:760px) {
+  .rhine-theme[data-rhine-theme="neo-brutalism"] .ds-sidebar { border-right: 0; border-bottom: 2px solid var(--rhine-ink); }
+}