@linhey/rhine-design 0.2.0 → 0.3.0

package/components/tokens.css

@@ -1,58 +1,58 @@
 /* Canonical tokens for the component library and design previews. */
 :root {
-  --tod-bg: #f2f1e9;
-  --tod-surface: #fcfcf8;
-  --tod-ink: #242b28;
-  --tod-muted: #59645d;
-  --tod-line: #c5ccc1;
-  --tod-control: #78857b;
-  --tod-selected: #e5ece3;
-  --tod-green: #425c4b;
-  --tod-signal: #c65c34;
-  --tod-warning: #8a472c;
-  --tod-error: #a13e35;
-  --tod-warning-bg: #f4e8dc;
-  --tod-error-bg: #f6e9e4;
-  --tod-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans CJK SC', sans-serif;
-  --tod-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
-  --tod-text-title: 30px;
-  --tod-leading-title: 38px;
-  --tod-text-section: 18px;
-  --tod-leading-section: 26px;
-  --tod-text-heading: 16px;
-  --tod-leading-heading: 24px;
-  --tod-text-body: 14px;
-  --tod-leading-body: 22px;
-  --tod-text-caption: 12px;
-  --tod-leading-caption: 18px;
-  --tod-text-metric: 26px;
-  --tod-leading-metric: 32px;
-  --tod-text-metric-compact: 20px;
-  --tod-leading-metric-compact: 26px;
-  --tod-text-code: 12px;
-  --tod-leading-code: 20px;
-  --tod-weight-regular: 400;
-  --tod-weight-label: 500;
-  --tod-weight-heading: 600;
-  --tod-space-1: 4px;
-  --tod-space-2: 8px;
-  --tod-space-3: 12px;
-  --tod-space-4: 16px;
-  --tod-space-6: 24px;
-  --tod-space-8: 32px;
-  --tod-space-12: 48px;
-  --tod-radius-card: 4px;
-  --tod-radius-control: 3px;
-  --tod-duration-hover: 120ms;
-  --tod-duration-press: 80ms;
-  --tod-duration-panel: 180ms;
-  --tod-duration-notice: 200ms;
-  --tod-duration-progress: 240ms;
-  --tod-duration-brand: 240ms;
-  --tod-duration-overlay: 160ms;
-  --tod-duration-loading: 1000ms;
-  --tod-duration-skeleton: 1400ms;
-  --tod-ease-standard: cubic-bezier(.2, 0, 0, 1);
-  --tod-ease-exit: cubic-bezier(.4, 0, 1, 1);
-  --tod-motion-distance: 3px;
+  --rhine-bg: #f2f1e9;
+  --rhine-surface: #fcfcf8;
+  --rhine-ink: #242b28;
+  --rhine-muted: #59645d;
+  --rhine-line: #c5ccc1;
+  --rhine-control: #78857b;
+  --rhine-selected: #e5ece3;
+  --rhine-green: #425c4b;
+  --rhine-signal: #c65c34;
+  --rhine-warning: #8a472c;
+  --rhine-error: #a13e35;
+  --rhine-warning-bg: #f4e8dc;
+  --rhine-error-bg: #f6e9e4;
+  --rhine-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans CJK SC', sans-serif;
+  --rhine-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
+  --rhine-text-title: 30px;
+  --rhine-leading-title: 38px;
+  --rhine-text-section: 18px;
+  --rhine-leading-section: 26px;
+  --rhine-text-heading: 16px;
+  --rhine-leading-heading: 24px;
+  --rhine-text-body: 14px;
+  --rhine-leading-body: 22px;
+  --rhine-text-caption: 12px;
+  --rhine-leading-caption: 18px;
+  --rhine-text-metric: 26px;
+  --rhine-leading-metric: 32px;
+  --rhine-text-metric-compact: 20px;
+  --rhine-leading-metric-compact: 26px;
+  --rhine-text-code: 12px;
+  --rhine-leading-code: 20px;
+  --rhine-weight-regular: 400;
+  --rhine-weight-label: 500;
+  --rhine-weight-heading: 600;
+  --rhine-space-1: 4px;
+  --rhine-space-2: 8px;
+  --rhine-space-3: 12px;
+  --rhine-space-4: 16px;
+  --rhine-space-6: 24px;
+  --rhine-space-8: 32px;
+  --rhine-space-12: 48px;
+  --rhine-radius-card: 4px;
+  --rhine-radius-control: 3px;
+  --rhine-duration-hover: 120ms;
+  --rhine-duration-press: 80ms;
+  --rhine-duration-panel: 180ms;
+  --rhine-duration-notice: 200ms;
+  --rhine-duration-progress: 240ms;
+  --rhine-duration-brand: 240ms;
+  --rhine-duration-overlay: 160ms;
+  --rhine-duration-loading: 1000ms;
+  --rhine-duration-skeleton: 1400ms;
+  --rhine-ease-standard: cubic-bezier(.2, 0, 0, 1);
+  --rhine-ease-exit: cubic-bezier(.4, 0, 1, 1);
+  --rhine-motion-distance: 3px;
 }

package/components/typography.css

@@ -1,31 +1,31 @@
-.tod-text { margin:0; font-family:var(--tod-font); font-weight:var(--tod-weight-regular); letter-spacing:0; overflow-wrap:anywhere; }
-.tod-text--title { font-size:var(--tod-text-title); line-height:var(--tod-leading-title); font-weight:var(--tod-weight-heading); }
-.tod-text--section { font-size:var(--tod-text-section); line-height:var(--tod-leading-section); font-weight:var(--tod-weight-heading); }
-.tod-text--heading { font-size:var(--tod-text-heading); line-height:var(--tod-leading-heading); font-weight:var(--tod-weight-heading); }
-.tod-text--body,.tod-text--label { font-size:var(--tod-text-body); line-height:var(--tod-leading-body); }
-.tod-text--label { font-weight:var(--tod-weight-label); }
-.tod-text--caption,.tod-text--overline { font-size:var(--tod-text-caption); line-height:var(--tod-leading-caption); }
-.tod-text--overline { font-weight:var(--tod-weight-label); }
-.tod-text--overline:lang(en) { letter-spacing:.08em; text-transform:uppercase; }
-.tod-text--metric { font-size:var(--tod-text-metric); line-height:var(--tod-leading-metric); font-weight:var(--tod-weight-heading); font-variant-numeric:tabular-nums lining-nums; }
-.tod-text--code { font:var(--tod-text-code)/var(--tod-leading-code) var(--tod-mono); }
-.tod-text--numeric { font-variant-numeric:tabular-nums lining-nums; }
-.tod-text--default { color:inherit; }
-.tod-text--muted { color:var(--tod-muted); }
-.tod-text--success { color:var(--tod-green); }
-.tod-text--warning { color:var(--tod-warning); }
-.tod-text--error { color:var(--tod-error); }
-.tod-select { position:relative; min-width:0; color:var(--tod-ink); }
-.tod-select select { appearance:none; -webkit-appearance:none; display:block; width:100%; min-width:0; min-height:44px; padding:10px 40px 10px 12px; border:1px solid var(--tod-control); border-radius:var(--tod-radius-control); background:var(--tod-surface); color:var(--tod-ink); font:var(--tod-text-body)/var(--tod-leading-body) var(--tod-font); cursor:pointer; transition:border-color var(--tod-duration-hover) var(--tod-ease-standard),background-color var(--tod-duration-hover) var(--tod-ease-standard); }
-.tod-select select:hover:not(:disabled) { border-color:var(--tod-green); }
-.tod-select select[aria-invalid=true] { border-color:var(--tod-error); }
-.tod-select select:disabled { color:var(--tod-muted); background:var(--tod-selected); cursor:default; }
-.tod-select__arrow { position:absolute; width:16px; height:16px; right:12px; top:50%; transform:translateY(-50%); pointer-events:none; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
-.tod-select select:disabled+.tod-select__arrow { color:var(--tod-muted); }
-.tod-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px 32px; padding:20px 24px; color:var(--tod-ink); background:var(--tod-surface); border-bottom:1px solid var(--tod-line); }
-.tod-toolbar__intro { min-width:0; flex:1 1 220px; }
-.tod-toolbar__intro>p { margin-top:4px; }
-.tod-toolbar__controls { display:flex; flex-wrap:wrap; align-items:flex-start; gap:12px; flex:2 1 440px; min-width:0; }
-.tod-toolbar__controls>.tod-field { flex:1 1 150px; min-width:0; }
-.tod-toolbar .tod-field>label { font-size:var(--tod-text-caption); line-height:var(--tod-leading-caption); }
-@media(forced-colors:active) { .tod-select select { appearance:auto; -webkit-appearance:auto; } .tod-select__arrow { display:none; } }
+.rhine-text { margin:0; font-family:var(--rhine-font); font-weight:var(--rhine-weight-regular); letter-spacing:0; overflow-wrap:anywhere; }
+.rhine-text--title { font-size:var(--rhine-text-title); line-height:var(--rhine-leading-title); font-weight:var(--rhine-weight-heading); }
+.rhine-text--section { font-size:var(--rhine-text-section); line-height:var(--rhine-leading-section); font-weight:var(--rhine-weight-heading); }
+.rhine-text--heading { font-size:var(--rhine-text-heading); line-height:var(--rhine-leading-heading); font-weight:var(--rhine-weight-heading); }
+.rhine-text--body,.rhine-text--label { font-size:var(--rhine-text-body); line-height:var(--rhine-leading-body); }
+.rhine-text--label { font-weight:var(--rhine-weight-label); }
+.rhine-text--caption,.rhine-text--overline { font-size:var(--rhine-text-caption); line-height:var(--rhine-leading-caption); }
+.rhine-text--overline { font-weight:var(--rhine-weight-label); }
+.rhine-text--overline:lang(en) { letter-spacing:.08em; text-transform:uppercase; }
+.rhine-text--metric { font-size:var(--rhine-text-metric); line-height:var(--rhine-leading-metric); font-weight:var(--rhine-weight-heading); font-variant-numeric:tabular-nums lining-nums; }
+.rhine-text--code { font:var(--rhine-text-code)/var(--rhine-leading-code) var(--rhine-mono); }
+.rhine-text--numeric { font-variant-numeric:tabular-nums lining-nums; }
+.rhine-text--default { color:inherit; }
+.rhine-text--muted { color:var(--rhine-muted); }
+.rhine-text--success { color:var(--rhine-green); }
+.rhine-text--warning { color:var(--rhine-warning); }
+.rhine-text--error { color:var(--rhine-error); }
+.rhine-select { position:relative; min-width:0; color:var(--rhine-ink); }
+.rhine-select select { appearance:none; -webkit-appearance:none; display:block; width:100%; min-width:0; min-height:44px; padding:10px 40px 10px 12px; border:1px solid var(--rhine-control); border-radius:var(--rhine-radius-control); background:var(--rhine-surface); color:var(--rhine-ink); font:var(--rhine-text-body)/var(--rhine-leading-body) var(--rhine-font); cursor:pointer; transition:border-color var(--rhine-duration-hover) var(--rhine-ease-standard),background-color var(--rhine-duration-hover) var(--rhine-ease-standard); }
+.rhine-select select:hover:not(:disabled) { border-color:var(--rhine-green); }
+.rhine-select select[aria-invalid=true] { border-color:var(--rhine-error); }
+.rhine-select select:disabled { color:var(--rhine-muted); background:var(--rhine-selected); cursor:default; }
+.rhine-select__arrow { position:absolute; width:16px; height:16px; right:12px; top:50%; transform:translateY(-50%); pointer-events:none; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
+.rhine-select select:disabled+.rhine-select__arrow { color:var(--rhine-muted); }
+.rhine-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px 32px; padding:20px 24px; color:var(--rhine-ink); background:var(--rhine-surface); border-bottom:1px solid var(--rhine-line); }
+.rhine-toolbar__intro { min-width:0; flex:1 1 220px; }
+.rhine-toolbar__intro>p { margin-top:4px; }
+.rhine-toolbar__controls { display:flex; flex-wrap:wrap; align-items:flex-start; gap:12px; flex:2 1 440px; min-width:0; }
+.rhine-toolbar__controls>.rhine-field { flex:1 1 150px; min-width:0; }
+.rhine-toolbar .rhine-field>label { font-size:var(--rhine-text-caption); line-height:var(--rhine-leading-caption); }
+@media(forced-colors:active) { .rhine-select select { appearance:auto; -webkit-appearance:auto; } .rhine-select__arrow { display:none; } }

package/docs/DESIGN_SYSTEM.md

@@ -16,22 +16,23 @@
 
 ## 3. 视觉变量
 
+公开样式接口统一使用 `rhine-`：主题根 `.rhine-theme`、变量 `--rhine-*`、组件类与关键帧 `rhine-*`、减少动态属性 `data-rhine-motion="reduced"`。消费项目的品牌名称只通过内容与组件参数传入，不进入共享命名空间。
 
 ### 3.1 色彩
 
 | Token | 值 | 用途 |
 | --- | --- | --- |
-| `--tod-bg` | `#F2F1E9` | 窗口底色 |
-| `--tod-surface` | `#FCFCF8` | 卡片、输入、浮层 |
-| `--tod-ink` | `#242B28` | 正文、主按钮 |
-| `--tod-muted` | `#59645D` | 次级文字 |
-| `--tod-line` | `#C5CCC1` | 装饰分隔线，不独立承担控件识别 |
-| `--tod-control` | `#78857B` | 必须可识别的控件边界 |
-| `--tod-selected` | `#E5ECE3` | 选中背景 |
-| `--tod-green` | `#425C4B` | 选中标记、成功文字、焦点环 |
-| `--tod-signal` | `#C65C34` | 少量品牌定位色，不用于小字 |
-| `--tod-warning` | `#8A472C` | 待处理、冲突、覆盖不完整 |
-| `--tod-error` | `#A13E35` | 操作失败、需要恢复 |
+| `--rhine-bg` | `#F2F1E9` | 窗口底色 |
+| `--rhine-surface` | `#FCFCF8` | 卡片、输入、浮层 |
+| `--rhine-ink` | `#242B28` | 正文、主按钮 |
+| `--rhine-muted` | `#59645D` | 次级文字 |
+| `--rhine-line` | `#C5CCC1` | 装饰分隔线，不独立承担控件识别 |
+| `--rhine-control` | `#78857B` | 必须可识别的控件边界 |
+| `--rhine-selected` | `#E5ECE3` | 选中背景 |
+| `--rhine-green` | `#425C4B` | 选中标记、成功文字、焦点环 |
+| `--rhine-signal` | `#C65C34` | 少量品牌定位色，不用于小字 |
+| `--rhine-warning` | `#8A472C` | 待处理、冲突、覆盖不完整 |
+| `--rhine-error` | `#A13E35` | 操作失败、需要恢复 |
 
 本稿测算：正文 / 底色 12.77:1，次级文字 / 底色 5.44:1；品牌橙 / 底色仅 3.72:1，因此只用于非文字标记或符合大字要求的展示文字。重要状态同时有文字。数据未知显示「— / 暂不可用」，不显示 0%，未知进度不画百分比。
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linhey/rhine-design",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",

package/preview/MotionGallery.tsx

@@ -20,8 +20,8 @@ type Side = 'top' | 'right' | 'bottom' | 'left';
 
 // Restart only visual animations: never remount the modal or replay a business action.
 function replayModal(button: HTMLButtonElement) {
-  const dialog = button.closest('.tod-dialog');
-  const overlay = dialog?.parentElement?.querySelector('.tod-overlay');
+  const dialog = button.closest('.rhine-dialog');
+  const overlay = dialog?.parentElement?.querySelector('.rhine-overlay');
   for (const element of [dialog, overlay]) {
     if (!element) continue;
     for (const animation of element.getAnimations()) { animation.currentTime = 0; animation.play(); }
@@ -70,7 +70,7 @@ function MotionCard({ recipe, slow, reduced }: { recipe: typeof recipes[number];
   const [generation, setGeneration] = useState(0), [active, setActive] = useState(false), [still, setStill] = useState(false), [side, setSide] = useState<Side>('bottom');
   const [kind, title, duration, flow, status] = recipe;
   const run = () => { setGeneration(value=>value+1); setActive(true); };
-  return <article className="tod-theme ds-motion-card" aria-label={title} data-kind={kind} data-slow={slow} data-tod-motion={reduced || still ? 'reduced' : 'system'}>
+  return <article className="rhine-theme ds-motion-card" aria-label={title} data-kind={kind} data-slow={slow} data-rhine-motion={reduced || still ? 'reduced' : 'system'}>
     <header><Text variant="code">{duration}</Text><Badge>{status}</Badge></header>
     <div className="ds-motion-stage"><Scene key={generation} kind={kind} active={active} side={side}/></div>
     <div className="ds-motion-description"><h3>{title}</h3><Text variant="caption" tone="muted">{flow}</Text></div>

package/preview/StartupGallery.tsx

@@ -34,7 +34,7 @@ export function StartupGallery({ reduced }: { reduced: boolean }) {
   const play = () => { setLoginPreview(false); setGeneration(value => value + 1); setState('playing'); };
   const reset = () => { setLoginPreview(false); setGeneration(value => value + 1); setState('cover'); };
 
-  return <section id="startup" className="ds-startup" aria-labelledby="startup-title" data-tod-motion={reduce ? 'reduced' : 'system'} style={{ '--startup-speed': slow ? 4 : 1, '--ds-brand-speed': slow ? 4 : 1, '--ds-brand-offset': '180ms' } as CSSProperties}>
+  return <section id="startup" className="ds-startup" aria-labelledby="startup-title" data-rhine-motion={reduce ? 'reduced' : 'system'} style={{ '--startup-speed': slow ? 4 : 1, '--ds-brand-speed': slow ? 4 : 1, '--ds-brand-offset': '180ms' } as CSSProperties}>
     <div className="ds-section-title"><span>START / 01</span><h2 id="startup-title">构架归位，品牌留下。</h2></div>
     <p className="ds-caption">启动动画设计候选 · 品牌分镜 1.6 秒，560ms 连续收拢到登录页。就绪即刻可操作，减少动态时直接呈现。</p>
     <div className="ds-startup-layout">

package/preview/brand-assembly.css

@@ -1,18 +1,18 @@
 /* Brand-only preview recipe; the canonical SVG and generic Logo entry stay unchanged. */
-.tod-logo.ds-brand-assembly .tod-logo__symbol { overflow:visible; }
-.tod-logo.ds-brand-assembly[data-animate=true] .tod-logo__plate {
+.rhine-logo.ds-brand-assembly .rhine-logo__symbol { overflow:visible; }
+.rhine-logo.ds-brand-assembly[data-animate=true] .rhine-logo__plate {
   transform-box:fill-box;
   transform-origin:center;
-  animation:ds-brand-assemble calc(720ms * var(--ds-brand-speed,1)) var(--tod-ease-standard) both;
+  animation:ds-brand-assemble calc(720ms * var(--ds-brand-speed,1)) var(--rhine-ease-standard) both;
   animation-delay:calc((var(--ds-brand-offset,0ms) + var(--ds-brand-stagger)) * var(--ds-brand-speed,1));
 }
-.ds-brand-assembly .tod-logo__plate--left { --ds-brand-stagger:0ms; --ds-brand-turn:-120deg; }
-.ds-brand-assembly .tod-logo__plate--right { --ds-brand-stagger:80ms; --ds-brand-turn:120deg; }
-.ds-brand-assembly .tod-logo__plate--base { --ds-brand-stagger:160ms; --ds-brand-turn:60deg; }
+.ds-brand-assembly .rhine-logo__plate--left { --ds-brand-stagger:0ms; --ds-brand-turn:-120deg; }
+.ds-brand-assembly .rhine-logo__plate--right { --ds-brand-stagger:80ms; --ds-brand-turn:120deg; }
+.ds-brand-assembly .rhine-logo__plate--base { --ds-brand-stagger:160ms; --ds-brand-turn:60deg; }
 @keyframes ds-brand-assemble {
-  0% { opacity:0; transform:translate(calc(var(--tod-logo-x) * 6),calc(var(--tod-logo-y) * 6)) rotate(var(--ds-brand-turn)) scale(.22,1.08); }
+  0% { opacity:0; transform:translate(calc(var(--rhine-logo-x) * 6),calc(var(--rhine-logo-y) * 6)) rotate(var(--ds-brand-turn)) scale(.22,1.08); }
   24% { opacity:1; }
   70% { opacity:1; transform:translate(0,0) rotate(calc(var(--ds-brand-turn) * .06)) scale(.94,1); }
   100% { opacity:1; transform:translate(0,0) rotate(0deg) scale(1); }
 }
-@media(prefers-reduced-motion:reduce) { .tod-logo.ds-brand-assembly[data-animate=true] .tod-logo__plate { animation:none; } }
+@media(prefers-reduced-motion:reduce) { .rhine-logo.ds-brand-assembly[data-animate=true] .rhine-logo__plate { animation:none; } }

package/preview/main.tsx

@@ -22,7 +22,7 @@ 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="tod-theme ds-gallery" data-tod-motion={motion}>
+  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>

package/preview/motion.css

@@ -1,25 +1,25 @@
 .ds-motion-toolbar { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding:20px 0 28px; }
 .ds-motion-toolbar>div:first-child { flex:1 1 320px; }
 .ds-motion-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:24px; align-items:start; }
-.ds-motion-card { min-width:0; padding:24px; border:1px solid var(--tod-line); border-radius:var(--tod-radius-card); background:var(--tod-surface); }
+.ds-motion-card { min-width:0; padding:24px; border:1px solid var(--rhine-line); border-radius:var(--rhine-radius-card); background:var(--rhine-surface); }
 .ds-motion-card>header { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:center; }
-.ds-motion-stage { display:flex; align-items:center; justify-content:center; min-height:240px; margin:20px 0; padding:24px; border:1px solid var(--tod-line); background:var(--tod-bg); }
+.ds-motion-stage { display:flex; align-items:center; justify-content:center; min-height:240px; margin:20px 0; padding:24px; border:1px solid var(--rhine-line); background:var(--rhine-bg); }
 .ds-motion-description { min-height:88px; }.ds-motion-description h3 { font-size:16px; margin:0 0 8px; }
-.ds-motion-buttons { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }.ds-motion-card>.tod-check { margin-top:12px; }
+.ds-motion-buttons { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }.ds-motion-card>.rhine-check { margin-top:12px; }
 .ds-motion-fill,.ds-motion-content { width:100%; min-width:0; }.ds-motion-content { min-height:112px; }
-.ds-content-reveal { display:grid; gap:10px; justify-items:start; animation:tod-overlay-fade var(--tod-duration-panel) var(--tod-ease-standard) both; }
+.ds-content-reveal { display:grid; gap:10px; justify-items:start; animation:rhine-overlay-fade var(--rhine-duration-panel) var(--rhine-ease-standard) both; }
 .ds-result-demo { display:grid; justify-items:center; gap:20px; }.ds-result-slot { min-height:44px; display:flex; align-items:center; }
-.ds-result-reveal { display:inline-flex; gap:8px; align-items:center; color:var(--tod-green); animation:tod-overlay-fade var(--tod-duration-hover) var(--tod-ease-standard) both; }
+.ds-result-reveal { display:inline-flex; gap:8px; align-items:center; color:var(--rhine-green); animation:rhine-overlay-fade var(--rhine-duration-hover) var(--rhine-ease-standard) both; }
 .ds-still * { animation:none!important; }
-.ds-motion-card :is(.tod-dialog,.tod-overlay)[data-state=open] { animation-fill-mode:both; }
-.ds-motion-card :is(.tod-popover,.tod-menu,.tod-combobox__list)[data-state=open] { animation:ds-origin-enter var(--tod-duration-overlay) var(--tod-ease-standard) both; --ds-from-x:0px; --ds-from-y:0px; }
-.ds-motion-card [data-side=bottom] { --ds-from-y:calc(-1 * var(--tod-motion-distance))!important; }
-.ds-motion-card [data-side=top] { --ds-from-y:var(--tod-motion-distance)!important; }
-.ds-motion-card [data-side=right] { --ds-from-x:calc(-1 * var(--tod-motion-distance))!important; }
-.ds-motion-card [data-side=left] { --ds-from-x:var(--tod-motion-distance)!important; }
+.ds-motion-card :is(.rhine-dialog,.rhine-overlay)[data-state=open] { animation-fill-mode:both; }
+.ds-motion-card :is(.rhine-popover,.rhine-menu,.rhine-combobox__list)[data-state=open] { animation:ds-origin-enter var(--rhine-duration-overlay) var(--rhine-ease-standard) both; --ds-from-x:0px; --ds-from-y:0px; }
+.ds-motion-card [data-side=bottom] { --ds-from-y:calc(-1 * var(--rhine-motion-distance))!important; }
+.ds-motion-card [data-side=top] { --ds-from-y:var(--rhine-motion-distance)!important; }
+.ds-motion-card [data-side=right] { --ds-from-x:calc(-1 * var(--rhine-motion-distance))!important; }
+.ds-motion-card [data-side=left] { --ds-from-x:var(--rhine-motion-distance)!important; }
 @keyframes ds-origin-enter { from { opacity:0; transform:translate(var(--ds-from-x),var(--ds-from-y)); } to { opacity:1; transform:translate(0,0); } }
-.ds-motion-card[data-slow=true] { --tod-duration-hover:480ms; --tod-duration-panel:720ms; --tod-duration-notice:800ms; --tod-duration-overlay:640ms; --tod-duration-brand:960ms; }
+.ds-motion-card[data-slow=true] { --rhine-duration-hover:480ms; --rhine-duration-panel:720ms; --rhine-duration-notice:800ms; --rhine-duration-overlay:640ms; --rhine-duration-brand:960ms; }
 .ds-motion-card[data-slow=true] { --ds-brand-speed:4; }
-.tod-theme[data-tod-motion=reduced] .ds-motion-card,.ds-motion-card[data-tod-motion=reduced] { --tod-duration-notice:0ms; }
-@media(prefers-reduced-motion:reduce) { .ds-motion-card { --tod-duration-notice:0ms!important; } }
+.rhine-theme[data-rhine-motion=reduced] .ds-motion-card,.ds-motion-card[data-rhine-motion=reduced] { --rhine-duration-notice:0ms; }
+@media(prefers-reduced-motion:reduce) { .ds-motion-card { --rhine-duration-notice:0ms!important; } }
 @media(max-width:520px) { .ds-motion-card { padding:16px; }.ds-motion-stage { padding:16px; }.ds-motion-description { min-height:0; } }

package/preview/preview.css

@@ -1,27 +1,27 @@
 body { margin:0; }
-.ds-type-row { display:grid; grid-template-columns:180px minmax(0,1fr); align-items:baseline; gap:12px 24px; padding:16px 0; border-bottom:1px solid var(--tod-line); }
+.ds-type-row { display:grid; grid-template-columns:180px minmax(0,1fr); align-items:baseline; gap:12px 24px; padding:16px 0; border-bottom:1px solid var(--rhine-line); }
 .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(--tod-line); padding:20px max(24px,calc((100vw - 1080px)/2)); }
-.ds-brand { display:inline-flex; align-items:center; color:var(--tod-ink); text-decoration:none; }
-.ds-brand>span:not(.tod-logo) { font:12px var(--tod-mono); letter-spacing:1px; margin-left:16px; }
+.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(--tod-surface); border:1px solid var(--tod-line); }
-.ds-logo-stage>span:last-child { font:12px var(--tod-mono); letter-spacing:2px; }
-.ds-logo-stage--dark { background:var(--tod-ink); color:var(--tod-bg); border-color:var(--tod-ink); }
+.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-kicker { font:12px var(--tod-mono); letter-spacing:1px; color:var(--tod-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(--tod-green); }
-.ds-hero p { color:var(--tod-muted); }
-.ds-motion-control { border-left:2px solid var(--tod-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(--tod-ink); }.ds-nav a { color:var(--tod-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(--tod-mono); color:var(--tod-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(--tod-line); }.ds-palette strong,.ds-palette code { display:block; font:12px/1.8 var(--tod-mono); }.ds-palette strong { margin-top:10px; }.ds-palette code { color:var(--tod-muted); }
-.ds-notes { display:flex; flex-wrap:wrap; gap:12px 32px; margin-top:24px; padding-top:16px; border-top:1px solid var(--tod-line); font-size:12px; color:var(--tod-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(--tod-mono); margin:0; }.ds-component-title>span { color:var(--tod-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(--tod-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(--tod-ink); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:24px 0; color:var(--tod-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(.tod-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; } }
+.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; } }

package/preview/startup.css

@@ -1,33 +1,33 @@
 .ds-startup-layout { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(240px,1fr); gap:40px; margin:24px 0; align-items:center; }
-.ds-startup-window { border:1px solid var(--tod-line); background:var(--tod-bg); min-width:0; }
-.ds-startup-chrome { display:flex; justify-content:space-between; gap:12px; padding:12px 20px; border-bottom:1px solid var(--tod-line); font:12px/18px var(--tod-font); color:var(--tod-muted); }
+.ds-startup-window { border:1px solid var(--rhine-line); background:var(--rhine-bg); min-width:0; }
+.ds-startup-chrome { display:flex; justify-content:space-between; gap:12px; padding:12px 20px; border-bottom:1px solid var(--rhine-line); font:12px/18px var(--rhine-font); color:var(--rhine-muted); }
 .ds-startup-stage { min-height:540px; padding:40px 24px 24px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; position:relative; isolation:isolate; }
 .ds-startup-emblem { width:240px; height:220px; position:relative; box-sizing:border-box; flex:none; }
 .ds-startup-logo-anchor { position:absolute; left:32px; top:32px; width:176px; height:176px; transform-origin:center; transition:transform calc(560ms * var(--startup-speed)) cubic-bezier(.22,1,.36,1); }
 .ds-startup-construction { position:absolute; inset:0; width:240px; height:240px; pointer-events:none; transition:opacity calc(180ms * var(--startup-speed)) ease-out; }
-.ds-startup-guide { stroke:var(--tod-control); stroke-width:.75; opacity:0; }
-.ds-startup-ticks { stroke:var(--tod-line); stroke-width:1; }
-.ds-startup-signal { fill:var(--tod-signal); opacity:0; }
-.ds-startup-wordmark { position:absolute; top:246px; width:100%; text-align:center; color:var(--tod-ink); font:600 30px/38px var(--tod-font); letter-spacing:.04em; transition:transform calc(560ms * var(--startup-speed)) cubic-bezier(.22,1,.36,1); }
-.ds-startup-status { font:12px/18px var(--tod-font); color:var(--tod-muted); margin:100px 0 24px; }
-.ds-startup-footnote { display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; width:100%; margin-top:auto; padding-top:32px; font:12px/18px var(--tod-mono); letter-spacing:.06em; color:var(--tod-muted); }
-.ds-startup-score h3 { font:600 26px/1.4 var(--tod-font); margin:20px 0 12px; }.ds-startup-score>p { color:var(--tod-muted); }
-.ds-startup-score ol { list-style:none; padding:0; margin:28px 0; }.ds-startup-score li { padding:16px 0; border-top:1px solid var(--tod-line); }.ds-startup-score li>span { display:block; color:var(--tod-muted); font:12px/18px var(--tod-mono); margin-bottom:8px; }.ds-startup-score li strong { font-size:16px; font-weight:600; }.ds-startup-score li p { margin:4px 0 0; font-size:12px; color:var(--tod-muted); }
-.ds-startup-controls { display:flex; align-items:center; gap:24px; flex-wrap:wrap; margin-bottom:20px; }.ds-startup-controls>.tod-field { flex:1; min-width:180px; }
+.ds-startup-guide { stroke:var(--rhine-control); stroke-width:.75; opacity:0; }
+.ds-startup-ticks { stroke:var(--rhine-line); stroke-width:1; }
+.ds-startup-signal { fill:var(--rhine-signal); opacity:0; }
+.ds-startup-wordmark { position:absolute; top:246px; width:100%; text-align:center; color:var(--rhine-ink); font:600 30px/38px var(--rhine-font); letter-spacing:.04em; transition:transform calc(560ms * var(--startup-speed)) cubic-bezier(.22,1,.36,1); }
+.ds-startup-status { font:12px/18px var(--rhine-font); color:var(--rhine-muted); margin:100px 0 24px; }
+.ds-startup-footnote { display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; width:100%; margin-top:auto; padding-top:32px; font:12px/18px var(--rhine-mono); letter-spacing:.06em; color:var(--rhine-muted); }
+.ds-startup-score h3 { font:600 26px/1.4 var(--rhine-font); margin:20px 0 12px; }.ds-startup-score>p { color:var(--rhine-muted); }
+.ds-startup-score ol { list-style:none; padding:0; margin:28px 0; }.ds-startup-score li { padding:16px 0; border-top:1px solid var(--rhine-line); }.ds-startup-score li>span { display:block; color:var(--rhine-muted); font:12px/18px var(--rhine-mono); margin-bottom:8px; }.ds-startup-score li strong { font-size:16px; font-weight:600; }.ds-startup-score li p { margin:4px 0 0; font-size:12px; color:var(--rhine-muted); }
+.ds-startup-controls { display:flex; align-items:center; gap:24px; flex-wrap:wrap; margin-bottom:20px; }.ds-startup-controls>.rhine-field { flex:1; min-width:180px; }
 .ds-startup-destination { display:flex; flex-direction:column; gap:16px; align-items:center; text-align:center; width:100%; max-width:320px; animation:startup-arrival calc(420ms * var(--startup-speed)) ease-out both; }
-.ds-startup-destination>.tod-button { margin-top:8px; width:100%; max-width:260px; }
+.ds-startup-destination>.rhine-button { margin-top:8px; width:100%; max-width:260px; }
 .ds-startup-destination:focus-within { animation:none; }
 .ds-startup-stage[data-state=ready] .ds-startup-logo-anchor { transform:translateY(-16px) scale(.5); }
 .ds-startup-stage[data-state=ready] .ds-startup-wordmark { transform:translateY(-84px); }
 .ds-startup-stage[data-state=ready] .ds-startup-construction { opacity:0; }
 @keyframes startup-arrival { from { opacity:.12; transform:translateY(3px); } to { opacity:1; transform:translateY(0); } }
-.ds-startup-stage[data-state=playing] .ds-startup-guide { animation:startup-guide calc(1340ms * var(--startup-speed)) var(--tod-ease-standard) both; }
+.ds-startup-stage[data-state=playing] .ds-startup-guide { animation:startup-guide calc(1340ms * var(--startup-speed)) var(--rhine-ease-standard) both; }
 .ds-startup-stage[data-state=playing] .ds-startup-signal { animation:startup-signal calc(280ms * var(--startup-speed)) linear calc(1060ms * var(--startup-speed)) both; }
-.ds-startup-stage[data-state=playing] .ds-startup-wordmark { animation:startup-destination calc(240ms * var(--startup-speed)) var(--tod-ease-standard) calc(1080ms * var(--startup-speed)) both; }
+.ds-startup-stage[data-state=playing] .ds-startup-wordmark { animation:startup-destination calc(240ms * var(--startup-speed)) var(--rhine-ease-standard) calc(1080ms * var(--startup-speed)) both; }
 @keyframes startup-guide { 0% { stroke-dasharray:1; stroke-dashoffset:1; opacity:0; } 24%,79% { stroke-dasharray:1; stroke-dashoffset:0; opacity:.65; } 100% { stroke-dasharray:1; stroke-dashoffset:0; opacity:0; } }
 @keyframes startup-signal { 0%,100% { opacity:0; } 20%,65% { opacity:1; } }
 @keyframes startup-destination { from { opacity:0; } to { opacity:1; } }
-.ds-startup[data-tod-motion=reduced] * { animation:none!important; transition:none!important; }
+.ds-startup[data-rhine-motion=reduced] * { animation:none!important; transition:none!important; }
 @media(prefers-reduced-motion:reduce) { .ds-startup * { animation:none!important; transition:none!important; } }
 @media(max-width:760px) { .ds-startup-layout { grid-template-columns:minmax(0,1fr); gap:24px; }.ds-startup-stage { padding-inline:16px; }.ds-startup-score ol { margin:20px 0; } }
 @media(max-width:360px) { .ds-startup-chrome { padding-inline:12px; }.ds-startup-footnote { flex-wrap:wrap; } }

package/scripts/check-build.mjs

@@ -4,7 +4,7 @@ import { join } from 'node:path';
 const assets = new URL('../dist/assets/', import.meta.url);
 const files = await readdir(assets);
 const css = (await Promise.all(files.filter(file => file.endsWith('.css')).map(file => readFile(new URL(file, assets), 'utf8')))).join('\n');
-for (const required of ['--tod-bg:', '.tod-theme', '.tod-button', '.ds-startup']) {
+for (const required of ['--rhine-bg:', '.rhine-theme', '.rhine-button', '.ds-startup']) {
   if (!css.includes(required)) throw new Error(`Design kit build lost required stylesheet content: ${required}`);
 }
 if (!files.some(file => /^logo-.*\.svg$/.test(file))) throw new Error('Design kit build lost the SVG master asset');

package/skills/rhine-design/SKILL.md

@@ -2,7 +2,7 @@
 name: rhine-design
 description: Use Rhine Design components and specifications to design, implement, or review React UI, typography, themes, and motion. Apply when a project uses Rhine Design or the user requests its visual language or component system.
 metadata:
-  version: "0.2.0"
+  version: "0.3.0"
 ---
 
 # Rhine Design · 莱茵设计
@@ -11,7 +11,7 @@ Use the installed version's components and contracts to build consistent interfa
 
 ## Locate the matching source
 
-Package: `@linhey/rhine-design`. GitHub: `linhay/rhine-design` (different account spelling). This skill targets 0.2.0.
+Package: `@linhey/rhine-design`. GitHub: `linhay/rhine-design` (different account spelling). This skill targets 0.3.0.
 
 Find the package in the host's dependencies, normally `node_modules/@linhey/rhine-design/`, or its registered source checkout. Verify `package.json` name/version before using the paths below. Paths in references are relative to that package root, not the copied skill directory. Read installed types and source when versions differ; do not infer a new API from this skill. If the package is unavailable, use the task's supplied design sources and identify the missing implementation evidence.
 
@@ -30,7 +30,7 @@ Find the package in the host's dependencies, normally `node_modules/@linhey/rhin
 
 ## Preserve these contracts
 
-- Use public exports, the `.tod-theme` root and existing tokens. `tod-` is a retained CSS API, not a required product name.
+- Use public exports, the `.rhine-theme` root and existing tokens. Use the `rhine-` namespace for CSS variables, classes, animation names and motion data attributes; do not introduce host-product prefixes.
 - Read the actual component signature before using it. Keep semantic headings separate from visual text variants.
 - Host state determines data, selection and operation outcomes. Search and pagination remain host/server responsibilities; busy indicators never imply success.
 - Motion explains a change. Respect reduced motion, cancellation and replay; startup decoration never blocks real readiness. Preview-only experiments are not exported components.

package/skills/rhine-design/references/integration.md

@@ -2,14 +2,14 @@
 
 ## Supported baseline
 
-Rhine Design 0.2.0 ships TypeScript/TSX, CSS and SVG source for React 19 + Vite. Install `@linhey/rhine-design`; GitHub remains `linhay/rhine-design`. Check the installed package's engine and peer dependencies. Node 24 is the development baseline. Do not assume precompiled JavaScript, arbitrary SSR support or a complete dark theme.
+Rhine Design 0.3.0 ships TypeScript/TSX, CSS and SVG source for React 19 + Vite. Install `@linhey/rhine-design`; GitHub remains `linhay/rhine-design`. Check the installed package's engine and peer dependencies. Node 24 is the development baseline. Do not assume precompiled JavaScript, arbitrary SSR support or a complete dark theme.
 
 ```tsx
 import { Button, Surface, Text } from '@linhey/rhine-design';
 
 export function Example() {
   return (
-    <div className="tod-theme">
+    <div className="rhine-theme">
       <Surface>
         <Text as="h2" variant="section">工作空间</Text>
         <Button onClick={() => { /* host action */ }}>继续</Button>
@@ -22,10 +22,10 @@ export function Example() {
 ## Integration invariants
 
 - The entry imports CSS automatically. Keep the package's entry and CSS `sideEffects` declarations so production tree shaking retains styles.
-- Put `.tod-theme` at the page root. Do not transform, clip or apply containment to it: overlays portal to the nearest theme root and need its variables and reduced-motion settings.
+- Put `.rhine-theme` at the page root. Do not transform, clip or apply containment to it: overlays portal to the nearest theme root and need its variables and reduced-motion settings.
 - For a locally linked checkout, use Vite `resolve.dedupe: ['react', 'react-dom']`. Duplicate React can break hooks; do not patch component state to mask this.
 - Preserve SVG `?no-inline` handling. Logo uses a shared geometric master; missing symbols in production warrant checking the emitted SVG asset before replacing the logo.
-- Reuse tokens for layout and state styling. Full dark theme is not exported in 0.2.0; the logo's dark variant alone does not establish dark-mode support.
+- Reuse tokens for layout and state styling. Full dark theme is not exported in 0.3.0; the logo's dark variant alone does not establish dark-mode support.
 
 ## Host responsibilities
 

package/tests/CommonComponents.test.tsx

@@ -65,7 +65,7 @@ describe('common design components', () => {
   });
   it('keeps a failed confirmation open and closes only after successful retry', async () => {
     const confirm=vi.fn().mockRejectedValueOnce(new Error('demo')).mockResolvedValue(undefined);
-    render(<div className="tod-theme"><ConfirmDialog trigger={<button>打开</button>} title="确认任务" description="演示" onConfirm={confirm}/></div>);
+    render(<div className="rhine-theme"><ConfirmDialog trigger={<button>打开</button>} title="确认任务" description="演示" onConfirm={confirm}/></div>);
     fireEvent.click(screen.getByRole('button',{name:'打开'}));expect(await screen.findByRole('alertdialog')).toBeVisible();expect(screen.getByRole('button',{name:'取消'})).toHaveFocus();fireEvent.click(screen.getByRole('button',{name:'确认操作'}));expect(await screen.findByRole('alert')).toHaveTextContent('操作未完成');fireEvent.click(screen.getByRole('button',{name:'确认操作'}));await waitFor(()=>expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument());
   });
 });

package/tests/StartupGallery.test.tsx

@@ -44,11 +44,11 @@ it('keeps the same brand node when readiness arrives and makes the login preview
   vi.useFakeTimers();
   const { container } = render(<StartupGallery reduced={false} />);
   fireEvent.click(screen.getByRole('button', { name: '播放启动动画' }));
-  const logo = container.querySelector('.ds-startup-logo-anchor .tod-logo');
+  const logo = container.querySelector('.ds-startup-logo-anchor .rhine-logo');
   act(() => vi.advanceTimersByTime(300));
   fireEvent.click(screen.getByRole('button', { name: '模拟就绪 · 立即进入' }));
-  expect(container.querySelector('.ds-startup-logo-anchor .tod-logo')).toBe(logo);
-  expect(container.querySelectorAll('.ds-startup-stage .tod-logo')).toHaveLength(1);
+  expect(container.querySelector('.ds-startup-logo-anchor .rhine-logo')).toBe(logo);
+  expect(container.querySelectorAll('.ds-startup-stage .rhine-logo')).toHaveLength(1);
   fireEvent.click(screen.getByRole('button', { name: '在浏览器中登录' }));
   expect(screen.getByText('仅演示登录入口，不会打开授权页面。')).toBeInTheDocument();
   expect(vi.getTimerCount()).toBe(0);