@linhey/rhine-design 0.0.0-stage → 0.3.0

package/components/common.css

@@ -0,0 +1,69 @@
+.rhine-icon { display:inline-block; vertical-align:middle; flex:none; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
+.rhine-icon-button { padding:10px; width:44px; height:44px; flex:none; }
+.rhine-link { color:var(--rhine-green); text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere; }
+.rhine-link:hover { text-decoration-thickness:2px; }
+.rhine-link>.rhine-icon { margin-left:4px; }
+.rhine-copy { display:inline-flex; align-items:center; gap:12px; flex-wrap:wrap; }
+.rhine-copy>[role] { font-size:var(--rhine-text-caption); }
+.rhine-stack { display:flex; flex-direction:column; min-width:0; }
+.rhine-inline { display:flex; align-items:center; flex-wrap:wrap; gap:var(--rhine-space-3); min-width:0; }
+.rhine-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--rhine-grid-min)),1fr)); min-width:0; }
+.rhine-grid>*,.rhine-stack>* { min-width:0; }
+.rhine-divider { border:0; border-top:1px solid var(--rhine-line); margin:0; width:100%; }
+.rhine-metric { min-width:0; display:grid; gap:8px; align-content:start; }
+.rhine-metric__unit { font-size:var(--rhine-text-caption); font-weight:400; color:var(--rhine-muted); }
+.rhine-key-value { margin:0; display:grid; gap:12px; }
+.rhine-key-value>div { display:grid; grid-template-columns:minmax(80px,1fr) minmax(0,2fr); gap:16px; }
+.rhine-key-value dt { color:var(--rhine-muted); font-size:12px; }.rhine-key-value dd { margin:0; overflow-wrap:anywhere; }
+.rhine-data { display:grid; gap:12px; min-width:0; }
+.rhine-table-scroll { overflow:auto; max-width:100%; }
+.rhine-table { width:100%; min-width:500px; border-collapse:collapse; text-align:left; font-size:12px; }
+.rhine-table caption { text-align:left; font-size:16px; font-weight:600; margin-bottom:16px; }
+.rhine-table th,.rhine-table td { padding:12px; border-bottom:1px solid var(--rhine-line); max-width:240px; overflow-wrap:anywhere; }
+.rhine-table th { color:var(--rhine-muted); font-weight:500; }.rhine-table td { font-variant-numeric:tabular-nums; }
+.rhine-table [data-align=right] { text-align:right; }.rhine-table tbody tr:hover { background:var(--rhine-selected); }
+.rhine-table th button { font:inherit; color:inherit; background:none; border:0; min-height:44px; cursor:pointer; padding:0; }
+.rhine-table th button:disabled { cursor:default; }
+.rhine-pagination { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:12px; }
+.rhine-check>label,.rhine-radio-group>label { display:flex; align-items:center; gap:10px; min-height:44px; cursor:pointer; overflow-wrap:anywhere; }
+.rhine-check input,.rhine-radio-group input { width:18px; height:18px; accent-color:var(--rhine-green); flex:none; margin:0; }
+.rhine-check input:disabled+span,.rhine-radio-group input:disabled+span,.rhine-radio-group:disabled span { color:var(--rhine-muted); cursor:default; }
+.rhine-radio-group { border:0; padding:0; margin:0; min-width:0; }.rhine-radio-group legend { font-weight:500; padding:0; }
+.rhine-switch label { display:flex; position:relative; align-items:center; gap:12px; min-height:44px; cursor:pointer; }
+.rhine-switch input { position:absolute; opacity:0; width:1px; height:1px; }
+.rhine-switch__track { display:inline-flex; width:36px; height:22px; border:1px solid var(--rhine-control); border-radius:12px; padding:3px; flex:none; background:var(--rhine-surface); transition:background-color var(--rhine-duration-hover) var(--rhine-ease-standard); }
+.rhine-switch__track>span { width:14px; height:14px; border-radius:50%; background:var(--rhine-muted); transition:transform var(--rhine-duration-hover) var(--rhine-ease-standard); }
+.rhine-switch input:checked+.rhine-switch__track { background:var(--rhine-green); border-color:var(--rhine-green); }
+.rhine-switch input:checked+.rhine-switch__track>span { transform:translateX(14px); background:var(--rhine-surface); }
+.rhine-switch input:focus-visible+.rhine-switch__track { outline:2px solid var(--rhine-green); outline-offset:3px; }
+.rhine-switch input:disabled~span { opacity:.6; cursor:default; }
+.rhine-field textarea { font:var(--rhine-text-body)/var(--rhine-leading-body) var(--rhine-font); color:var(--rhine-ink); background:var(--rhine-surface); border:1px solid var(--rhine-control); border-radius:var(--rhine-radius-control); padding:10px 12px; min-height:88px; resize:vertical; width:100%; transition:border-color var(--rhine-duration-hover) var(--rhine-ease-standard); }
+.rhine-field textarea[aria-invalid=true] { border-color:var(--rhine-error); }.rhine-field textarea:disabled { color:var(--rhine-muted); background:var(--rhine-selected); }
+.rhine-search>.rhine-inline>input { flex:1 1 140px; width:auto; }.rhine-search input::-webkit-search-cancel-button { appearance:none; }
+.rhine-combobox { position:relative; }
+.rhine-combobox__input { position:relative; }.rhine-combobox__input input { padding-right:40px; }
+.rhine-combobox__arrow { position:absolute; right:12px; top:50%; transform:translateY(-50%); pointer-events:none; }
+.rhine-combobox__list { z-index:50; width:var(--radix-popover-trigger-width); max-width:calc(100vw - 24px); max-height:min(240px,var(--radix-popover-content-available-height)); overflow:auto; background:var(--rhine-surface); color:var(--rhine-ink); border:1px solid var(--rhine-control); border-radius:4px; box-shadow:0 8px 24px #242b2818; }
+.rhine-combobox__list [role=option],.rhine-combobox__empty { padding:12px; min-height:44px; cursor:pointer; overflow-wrap:anywhere; }
+.rhine-combobox__list [role=option][data-active=true],.rhine-combobox__list [role=option][aria-selected=true] { background:var(--rhine-selected); }
+.rhine-combobox__list [role=option][aria-disabled=true],.rhine-combobox__empty { color:var(--rhine-muted); cursor:default; }
+.rhine-overlay-anchor { display:inline-block; vertical-align:middle; max-width:100%; }
+.rhine-overlay { position:fixed; inset:0; background:#242b2870; z-index:40; }
+.rhine-dialog { position:fixed; z-index:41; top:50%; left:50%; transform:translate(-50%,-50%); width:min(480px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; padding:24px; border:1px solid var(--rhine-line); border-radius:4px; background:var(--rhine-surface); color:var(--rhine-ink); box-shadow:0 16px 48px #242b2826; }
+.rhine-dialog>p { margin-top:12px; }.rhine-dialog>.rhine-notice { margin-top:16px; }
+.rhine-dialog__head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
+.rhine-dialog__head>:first-child { min-width:0; overflow-wrap:anywhere; }
+.rhine-dialog__body { margin-top:24px; }.rhine-dialog__actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:12px; margin-top:24px; }
+.rhine-popover,.rhine-menu { z-index:50; background:var(--rhine-surface); color:var(--rhine-ink); border:1px solid var(--rhine-control); border-radius:4px; box-shadow:0 8px 24px #242b2820; max-width:calc(100vw - 24px); overflow:auto; }
+.rhine-popover { width:300px; padding:16px; max-height:var(--radix-popover-content-available-height); }
+.rhine-menu { min-width:180px; max-height:var(--radix-dropdown-menu-content-available-height); padding:4px; }
+.rhine-menu__item { min-height:44px; padding:10px 12px; cursor:pointer; outline:none; overflow-wrap:anywhere; }
+.rhine-menu__item[data-highlighted] { background:var(--rhine-selected); box-shadow:inset 0 0 0 2px var(--rhine-green); }
+.rhine-menu__item[data-disabled] { color:var(--rhine-muted); cursor:default; }.rhine-menu__item[data-danger=true] { color:var(--rhine-error); }
+.rhine-tooltip { z-index:60; background:var(--rhine-ink); color:var(--rhine-surface); padding:8px 12px; border-radius:3px; max-width:min(280px,calc(100vw - 24px)); font-size:12px; line-height:18px; overflow-wrap:anywhere; }
+.rhine-toast-region { position:relative; }.rhine-toast { display:flex; align-items:start; gap:12px; justify-content:space-between; padding:16px; background:var(--rhine-tone-bg); border-left:3px solid var(--rhine-tone); color:var(--rhine-ink); animation:rhine-enter var(--rhine-duration-panel) var(--rhine-ease-standard); }
+.rhine-toast p { margin:4px 0 0; overflow-wrap:anywhere; }.rhine-toast strong { overflow-wrap:anywhere; }.rhine-toast>div { min-width:0; }
+.rhine-dialog[data-state=open],.rhine-overlay[data-state=open] { animation:rhine-overlay-fade var(--rhine-duration-overlay) var(--rhine-ease-standard); }
+.rhine-popover[data-state=open],.rhine-menu[data-state=open],.rhine-combobox__list[data-state=open],.rhine-tooltip[data-state=delayed-open],.rhine-tooltip[data-state=instant-open] { animation:rhine-enter var(--rhine-duration-overlay) var(--rhine-ease-standard); }
+@keyframes rhine-overlay-fade { from { opacity:0; } to { opacity:1; } }
+@media(forced-colors:active) { .rhine-switch__track { border-color:ButtonText; }.rhine-switch input:checked+.rhine-switch__track { background:Highlight; }.rhine-switch__track>span { background:ButtonText; }.rhine-switch input:checked+.rhine-switch__track>span { background:HighlightText; }.rhine-dialog,.rhine-tooltip,.rhine-menu,.rhine-popover { border:1px solid CanvasText; } }

package/components/components.tsx

@@ -0,0 +1,151 @@
+import { useEffect, useId, useRef, useState, type ButtonHTMLAttributes, type HTMLAttributes, type InputHTMLAttributes, type ReactNode } from 'react';
+
+export type Tone = 'neutral' | 'success' | 'warning' | 'error';
+const classes = (...parts: (string | false | undefined)[]) => parts.filter(Boolean).join(' ');
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'secondary' | 'quiet' | 'danger';
+  busy?: boolean;
+  busyLabel?: string;
+}
+export function Button({ variant = 'primary', busy = false, busyLabel = '处理中', disabled, className, children, onClick, type = 'button', ...props }: ButtonProps) {
+  return <button {...props} type={type} disabled={disabled} aria-disabled={busy || disabled || undefined}
+    aria-busy={busy || undefined} className={classes('rhine-button', `rhine-button--${variant}`, className)}
+    onClick={event => { if (busy) { event.preventDefault(); return; } onClick?.(event); }}>
+    <span className={busy ? 'rhine-button__ghost' : undefined}>{children}</span>
+    {busy && <span className="rhine-button__busy"><span className="rhine-spinner" aria-hidden="true" /><span className="rhine-sr-only">{busyLabel}</span></span>}
+  </button>;
+}
+export function Badge({ tone = 'neutral', children }: { tone?: Tone; children: ReactNode }) {
+  return <span className={`rhine-badge rhine-tone-${tone}`}>{children}</span>;
+}
+export function Surface({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div {...props} className={classes('rhine-surface', className)} />;
+}
+export function SelectionCard({ label, selected, onSelectedChange, disabled = false, children }: {
+  label: string; selected: boolean; onSelectedChange: (value: boolean) => void; disabled?: boolean; children: ReactNode;
+}) {
+  return <label className="rhine-selection" data-selected={selected} data-disabled={disabled}>
+    <span className="rhine-selection__heading"><strong>{label}</strong><input type="checkbox" aria-label={label} checked={selected} disabled={disabled} onChange={event => onSelectedChange(event.target.checked)} /></span>
+    <span className="rhine-selection__content">{children}</span>
+  </label>;
+}
+export function TextField({ label, hint, error, id: providedId, className, ...props }: InputHTMLAttributes<HTMLInputElement> & { label: string; hint?: string; error?: string }) {
+  const generatedId = useId();
+  const id = providedId || generatedId;
+  const describedBy = [props['aria-describedby'], hint && `${id}-hint`, error && `${id}-error`].filter(Boolean).join(' ');
+  return <div className={classes('rhine-field', className)}>
+    <label htmlFor={id}>{label}</label>
+    <input {...props} id={id} aria-invalid={error ? true : props['aria-invalid']} aria-describedby={describedBy || undefined} />
+    {hint && <span id={`${id}-hint`} className="rhine-field__hint">{hint}</span>}
+    {error && <span id={`${id}-error`} className="rhine-field__error" role="alert">{error}</span>}
+  </div>;
+}
+export interface Choice { value: string; label: string; disabled?: boolean }
+export interface TabItem extends Choice { content: ReactNode }
+export function Tabs({ label, items, value, onValueChange }: { label: string; items: TabItem[]; value: string; onValueChange: (value: string) => void }) {
+  const id = useId();
+  const buttons = useRef<(HTMLButtonElement | null)[]>([]);
+  return <div className="rhine-tabs">
+    <div role="tablist" aria-label={label} className="rhine-tabs__list" onKeyDown={event => {
+      if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) return;
+      const available = items.map((item, index) => ({ ...item, index })).filter(item => !item.disabled);
+      if (!available.length) return;
+      event.preventDefault();
+      const current = available.findIndex(item => buttons.current[item.index] === event.target);
+      const next = event.key === 'Home' ? 0 : event.key === 'End' ? available.length - 1 : (current + (event.key === 'ArrowRight' ? 1 : -1) + available.length) % available.length;
+      onValueChange(available[next].value); buttons.current[available[next].index]?.focus();
+    }}>
+      {items.map((item, index) => <button key={item.value} ref={node => { buttons.current[index] = node; }}
+        type="button" role="tab" disabled={item.disabled} id={`${id}-tab-${index}`} aria-controls={`${id}-panel-${index}`}
+        aria-selected={value === item.value} tabIndex={value === item.value ? 0 : -1} onClick={() => onValueChange(item.value)}>{item.label}</button>)}
+    </div>
+    {items.map((item, index) => <div key={item.value} role="tabpanel" id={`${id}-panel-${index}`} aria-labelledby={`${id}-tab-${index}`}
+      hidden={value !== item.value} tabIndex={0} className="rhine-tabs__panel">{item.content}</div>)}
+  </div>;
+}
+export function SegmentedControl({ label, items, value, onValueChange }: { label: string; items: Choice[]; value: string; onValueChange: (value: string) => void }) {
+  const name = useId();
+  return <fieldset className="rhine-segmented"><legend className="rhine-sr-only">{label}</legend>
+    {items.map(item => <label key={item.value} className="rhine-segmented__option">
+      <input type="radio" name={name} value={item.value} checked={value === item.value} disabled={item.disabled} onChange={() => onValueChange(item.value)} />
+      <span>{item.label}</span>
+    </label>)}
+  </fieldset>;
+}
+export function Notice({ tone = 'neutral', title, children, action }: { tone?: Tone; title: string; children?: ReactNode; action?: ReactNode }) {
+  return <div className={`rhine-notice rhine-tone-${tone}`} role={tone === 'error' ? 'alert' : 'status'}>
+    <div><strong>{title}</strong>{children && <div className="rhine-notice__body">{children}</div>}</div>{action}
+  </div>;
+}
+export function Progress({ label, value, valueText }: { label: string; value: number | null; valueText?: string }) {
+  const determinate = value !== null && Number.isFinite(value);
+  const amount = determinate ? Math.max(0, Math.min(100, value)) : null;
+  return <div className="rhine-progress">
+    <div className="rhine-progress__label"><span>{label}</span><strong>{valueText ?? (amount === null ? '处理中' : `${amount}%`)}</strong></div>
+    <div className="rhine-progress__track" role="progressbar" aria-label={label} aria-valuemin={0} aria-valuemax={100}
+      aria-valuenow={amount ?? undefined} aria-valuetext={valueText ?? (amount === null ? '进度未知' : `${amount}%`)} data-indeterminate={amount === null}>
+      <span style={amount === null ? undefined : { transform: `scaleX(${amount / 100})` }} />
+    </div>
+  </div>;
+}
+export function Skeleton({ label = '正在加载', lines = 3 }: { label?: string; lines?: number }) {
+  return <div className="rhine-skeleton" role="status"><span className="rhine-sr-only">{label}</span>
+    {Array.from({ length: Math.max(1, Math.min(8, Math.floor(lines) || 1)) }, (_, index) => <span aria-hidden="true" key={index} />)}
+  </div>;
+}
+export function Disclosure({ title, children, defaultOpen = false }: { title: string; children: ReactNode; defaultOpen?: boolean }) {
+  const node = useRef<HTMLDetailsElement>(null);
+  const animation = useRef<Animation | null>(null);
+  const intent = useRef(defaultOpen);
+  const [open, setOpen] = useState(defaultOpen);
+  useEffect(() => {
+    const media = window.matchMedia?.('(prefers-reduced-motion: reduce)');
+    const settle = () => {
+      if (!media?.matches || !animation.current || !node.current) return;
+      animation.current.cancel(); animation.current = null;
+      node.current.open = intent.current; setOpen(intent.current);
+    };
+    media?.addEventListener('change', settle);
+    return () => { animation.current?.cancel(); media?.removeEventListener('change', settle); };
+  }, []);
+  useEffect(() => {
+    if (!animation.current || !node.current) return;
+    if (parseFloat(getComputedStyle(node.current).getPropertyValue('--rhine-duration-notice')) !== 0) return;
+    animation.current.cancel(); animation.current = null;
+    node.current.open = intent.current; setOpen(intent.current);
+  });
+  function toggle() {
+    const el = node.current;
+    if (!el) return;
+    const from = el.getBoundingClientRect().height;
+    animation.current?.cancel();
+    intent.current = !intent.current;
+    const expanded = intent.current;
+    el.dataset.expanded = String(expanded);
+    const summary = el.querySelector('summary')!;
+    // Native details removes closed content from keyboard and accessibility navigation.
+    el.open = true;
+    if (!expanded && el.contains(document.activeElement)) summary.focus();
+    const reduced = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+    if (reduced || !el.animate) { el.open = expanded; setOpen(expanded); return; }
+    const style = getComputedStyle(el);
+    const parsedDuration = parseFloat(style.getPropertyValue('--rhine-duration-notice'));
+    const duration = Number.isFinite(parsedDuration) ? parsedDuration : 200;
+    if (duration === 0) { el.open = expanded; setOpen(expanded); return; }
+    const to = expanded ? el.getBoundingClientRect().height : summary.getBoundingClientRect().height + parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
+    const next = el.animate([{ height: `${from}px` }, { height: `${to}px` }], { duration, easing: style.getPropertyValue(expanded ? '--rhine-ease-standard' : '--rhine-ease-exit').trim() || 'ease' });
+    animation.current = next;
+    next.onfinish = () => {
+      if (animation.current !== next) return;
+      el.open = expanded; setOpen(expanded); animation.current = null;
+    };
+  }
+  return <details ref={node} open={open} data-expanded={open} className="rhine-disclosure">
+    <summary onClick={event => { event.preventDefault(); toggle(); }}>{title}<span aria-hidden="true">+</span></summary>
+    <div className="rhine-disclosure__content">{children}</div>
+  </details>;
+}
+export function EmptyState({ title, description, action }: { title: string; description: string; action?: ReactNode }) {
+  return <div className="rhine-empty"><strong>{title}</strong><p>{description}</p>{action}</div>;
+}

package/components/index.ts

@@ -0,0 +1,24 @@
+import './styles.css';
+
+export { Logo } from './Logo';
+export type { LogoProps } from './Logo';
+export { Text } from './Typography';
+export type { TextProps, TextVariant } from './Typography';
+export { Select } from './Select';
+export type { SelectProps } from './Select';
+export { Toolbar } from './Toolbar';
+export type { ToolbarProps } from './Toolbar';
+export { Icon, IconButton, Link, CopyButton } from './Actions';
+export type { IconName } from './Actions';
+export { Divider, Stack, Inline, Grid } from './Layout';
+export type { Spacing } from './Layout';
+export { Metric, KeyValue, DataTable, Pagination } from './Data';
+export type { DataColumn, DataTableProps, TableSort } from './Data';
+export { Checkbox, RadioGroup, Switch, Textarea, SearchField, Combobox } from './Forms';
+export type { ComboboxProps } from './Forms';
+export { Dialog, ConfirmDialog, Popover, Menu, Tooltip } from './Overlays';
+export type { DialogProps, MenuItem } from './Overlays';
+export { Toast } from './Toast';
+
+export { Button, Badge, Surface, SelectionCard, TextField, Tabs, SegmentedControl, Notice, Progress, Skeleton, Disclosure, EmptyState } from './components';
+export type { ButtonProps, Tone, Choice, TabItem } from './components';

package/components/styles.css

@@ -0,0 +1,109 @@
+@import './tokens.css';
+@import './typography.css';
+@import './common.css';
+
+.rhine-theme { color:var(--rhine-ink); background:var(--rhine-bg); font:var(--rhine-text-body)/var(--rhine-leading-body) var(--rhine-font); font-synthesis:none; }
+.rhine-theme *, .rhine-theme *::before, .rhine-theme *::after { box-sizing:border-box; }
+.rhine-theme [hidden] { display:none!important; }
+.rhine-theme :is(button,input,select,textarea,summary,a,[tabindex]):focus-visible { outline:2px solid var(--rhine-green); outline-offset:3px; }
+.rhine-sr-only { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
+.rhine-button { position:relative; display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; padding:10px 16px; border:1px solid var(--rhine-ink); border-radius:var(--rhine-radius-control); font:500 14px/22px var(--rhine-font); background:var(--rhine-ink); color:var(--rhine-surface); cursor:pointer; overflow-wrap:anywhere; transition:background-color var(--rhine-duration-hover) var(--rhine-ease-standard),border-color var(--rhine-duration-hover) var(--rhine-ease-standard),transform var(--rhine-duration-press) var(--rhine-ease-standard); }
+.rhine-button:hover:not(:disabled):not([aria-disabled=true]) { background:var(--rhine-green); border-color:var(--rhine-green); }
+.rhine-button:active:not(:disabled):not([aria-disabled=true]) { transform:translateY(1px); }
+.rhine-button--secondary { background:var(--rhine-surface); color:var(--rhine-ink); border-color:var(--rhine-control); }
+.rhine-button--quiet { background:transparent; color:var(--rhine-green); border-color:transparent; }
+.rhine-button--secondary:hover:not(:disabled):not([aria-disabled=true]),.rhine-button--quiet:hover:not(:disabled):not([aria-disabled=true]) { background:var(--rhine-selected); }
+.rhine-button--danger { background:var(--rhine-error); border-color:var(--rhine-error); }
+.rhine-button--danger:hover:not(:disabled):not([aria-disabled=true]) { background:#81342e; border-color:#81342e; }
+.rhine-button:disabled { background:var(--rhine-selected); border-color:var(--rhine-line); color:var(--rhine-muted); cursor:default; }
+.rhine-button[aria-busy=true] { cursor:wait; }
+.rhine-button__ghost { visibility:hidden; }
+.rhine-button__busy { position:absolute; inset:0; display:grid; place-items:center; }
+.rhine-spinner { width:18px; height:18px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:rhine-spin var(--rhine-duration-loading) linear infinite; }
+.rhine-tone-neutral { --rhine-tone:var(--rhine-muted); --rhine-tone-bg:var(--rhine-selected); }
+.rhine-tone-success { --rhine-tone:var(--rhine-green); --rhine-tone-bg:var(--rhine-selected); }
+.rhine-tone-warning { --rhine-tone:var(--rhine-warning); --rhine-tone-bg:var(--rhine-warning-bg); }
+.rhine-tone-error { --rhine-tone:var(--rhine-error); --rhine-tone-bg:var(--rhine-error-bg); }
+.rhine-badge { display:inline-block; padding:2px 8px; border-radius:2px; background:var(--rhine-tone-bg); color:var(--rhine-tone); font:500 12px/20px var(--rhine-font); }
+.rhine-surface { padding:24px; border:1px solid var(--rhine-line); border-radius:var(--rhine-radius-card); background:var(--rhine-surface); min-width:0; }
+.rhine-selection { display:block; border:1px solid var(--rhine-control); background:var(--rhine-surface); border-radius:var(--rhine-radius-card); padding:20px; cursor:pointer; min-width:0; transition:background-color var(--rhine-duration-hover) var(--rhine-ease-standard),border-color var(--rhine-duration-hover) var(--rhine-ease-standard),box-shadow var(--rhine-duration-hover) var(--rhine-ease-standard); }
+.rhine-selection:hover:not([data-disabled=true]) { border-color:var(--rhine-green); background:#f4f7ef; }
+.rhine-selection[data-selected=true] { border-color:var(--rhine-green); background:var(--rhine-selected); box-shadow:inset 0 0 0 1px var(--rhine-green); }
+.rhine-selection[data-disabled=true] { cursor:default; color:var(--rhine-muted); background:var(--rhine-bg); }
+.rhine-selection:focus-within { outline:2px solid var(--rhine-green); outline-offset:3px; }
+.rhine-selection__heading { display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:16px; overflow-wrap:anywhere; }
+.rhine-selection input { width:18px; height:18px; accent-color:var(--rhine-green); flex-shrink:0; }
+.rhine-selection__content { display:block; margin-top:16px; overflow-wrap:anywhere; }
+.rhine-field { display:flex; flex-direction:column; gap:8px; min-width:0; }
+.rhine-field>label { font-weight:500; }
+.rhine-field input { width:100%; min-width:0; min-height:44px; padding:10px 12px; color:var(--rhine-ink); background:var(--rhine-surface); border:1px solid var(--rhine-control); border-radius:var(--rhine-radius-control); font:14px/22px var(--rhine-font); transition:border-color var(--rhine-duration-hover) var(--rhine-ease-standard),background-color var(--rhine-duration-hover) var(--rhine-ease-standard); }
+.rhine-field input::placeholder { color:var(--rhine-muted); }
+.rhine-field input[aria-invalid=true] { border-color:var(--rhine-error); }
+.rhine-field input:disabled { background:var(--rhine-selected); color:var(--rhine-muted); }
+.rhine-field__hint,.rhine-field__error { font-size:12px; line-height:18px; }
+.rhine-field__hint { color:var(--rhine-muted); }
+.rhine-field__error { color:var(--rhine-error); }
+.rhine-tabs__list { display:flex; flex-wrap:wrap; gap:24px; border-bottom:1px solid var(--rhine-line); }
+.rhine-tabs__list button { position:relative; background:none; border:0; padding:12px 0; min-height:44px; color:var(--rhine-muted); font:500 14px/22px var(--rhine-font); cursor:pointer; transition:color var(--rhine-duration-hover) var(--rhine-ease-standard); }
+.rhine-tabs__list button::after { content:''; position:absolute; bottom:-1px; inset-inline:0; height:2px; background:var(--rhine-green); transform:scaleX(0); transform-origin:left; transition:transform var(--rhine-duration-panel) var(--rhine-ease-standard); }
+.rhine-tabs__list button[aria-selected=true] { color:var(--rhine-ink); }
+.rhine-tabs__list button[aria-selected=true]::after { transform:scaleX(1); }
+.rhine-tabs__list button:disabled { color:var(--rhine-muted); opacity:.6; cursor:default; }
+.rhine-tabs__panel { padding-top:20px; animation:rhine-enter var(--rhine-duration-panel) var(--rhine-ease-standard); }
+.rhine-segmented { display:inline-flex; flex-wrap:wrap; gap:3px; padding:3px; border:1px solid var(--rhine-control); border-radius:var(--rhine-radius-control); margin:0; min-width:0; }
+.rhine-segmented__option { position:relative; display:flex; flex:1 0 auto; cursor:pointer; }
+.rhine-segmented input { position:absolute; opacity:0; width:1px; height:1px; }
+.rhine-segmented__option span { display:flex; justify-content:center; align-items:center; min-height:40px; padding:8px 12px; color:var(--rhine-muted); font-size:14px; transition:background-color var(--rhine-duration-hover) var(--rhine-ease-standard),color var(--rhine-duration-hover) var(--rhine-ease-standard); }
+.rhine-segmented input:checked+span { background:var(--rhine-ink); color:var(--rhine-surface); }
+.rhine-segmented input:focus-visible+span { outline:2px solid var(--rhine-green); outline-offset:3px; }
+.rhine-segmented input:disabled+span { opacity:.6; cursor:default; }
+.rhine-notice { padding:16px; border-left:3px solid var(--rhine-tone); background:var(--rhine-tone-bg); color:var(--rhine-tone); display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; animation:rhine-enter var(--rhine-duration-notice) var(--rhine-ease-standard); }
+.rhine-notice>div { flex:1 1 200px; min-width:0; overflow-wrap:anywhere; }
+.rhine-notice strong { font-size:14px; font-weight:600; }
+.rhine-notice__body { margin-top:4px; font-size:12px; line-height:20px; }
+.rhine-progress__label { display:flex; justify-content:space-between; gap:12px; font-size:12px; margin-bottom:8px; }
+.rhine-progress__label strong { font-variant-numeric:tabular-nums; }
+.rhine-progress__track { height:6px; background:var(--rhine-line); overflow:hidden; }
+.rhine-progress__track>span { display:block; height:100%; background:var(--rhine-green); transform-origin:left; transition:transform var(--rhine-duration-progress) var(--rhine-ease-standard); }
+.rhine-progress__track[data-indeterminate=true]>span { width:30%; animation:rhine-progress var(--rhine-duration-loading) var(--rhine-ease-standard) infinite; }
+.rhine-skeleton { position:relative; display:flex; flex-direction:column; gap:12px; }
+.rhine-skeleton>span[aria-hidden] { display:block; height:16px; background:var(--rhine-line); animation:rhine-pulse var(--rhine-duration-skeleton) ease-in-out infinite; }
+.rhine-skeleton>span[aria-hidden]:last-child { width:65%; }
+.rhine-disclosure { border-top:1px solid var(--rhine-line); border-bottom:1px solid var(--rhine-line); overflow:hidden; }
+.rhine-disclosure summary { min-height:48px; padding:12px 0; list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; font-weight:500; }
+.rhine-disclosure summary::-webkit-details-marker { display:none; }
+.rhine-theme .rhine-disclosure summary:focus-visible { outline-offset:-3px; }
+.rhine-disclosure summary>span { font:20px var(--rhine-mono); transition:transform var(--rhine-duration-notice) var(--rhine-ease-standard); }
+.rhine-disclosure[data-expanded=true] summary>span { transform:rotate(45deg); }
+.rhine-disclosure__content { padding:4px 0 20px; }
+.rhine-empty { padding:32px 24px; text-align:center; border:1px solid var(--rhine-line); background:var(--rhine-surface); }
+.rhine-empty strong { font-size:16px; }.rhine-empty p { max-width:400px; margin:8px auto 20px; color:var(--rhine-muted); }
+@keyframes rhine-spin { to { transform:rotate(360deg); } }
+.rhine-logo { display:inline-flex; flex:none; align-items:center; vertical-align:middle; color:var(--rhine-green); line-height:1; }
+.rhine-logo__symbol { display:block; width:var(--rhine-logo-size); height:var(--rhine-logo-size); flex:none; fill:currentColor; }
+.rhine-logo--icon { width:var(--rhine-logo-size); height:var(--rhine-logo-size); border-radius:22%; background:var(--rhine-bg); }
+.rhine-logo[data-theme=dark] { color:var(--rhine-bg); }
+.rhine-logo--icon[data-theme=dark] { background:var(--rhine-green); }
+.rhine-logo--lockup { gap:12px; }
+.rhine-logo__wordmark { font:600 20px/1 var(--rhine-font); letter-spacing:.08em; white-space:nowrap; }
+.rhine-logo__plate--left { --rhine-logo-x:calc(var(--rhine-logo-travel) * -.5); --rhine-logo-y:calc(var(--rhine-logo-travel) * -.866); }
+.rhine-logo__plate--right { --rhine-logo-x:calc(var(--rhine-logo-travel) * .5); --rhine-logo-y:calc(var(--rhine-logo-travel) * -.866); }
+.rhine-logo__plate--base { --rhine-logo-x:0px; --rhine-logo-y:var(--rhine-logo-travel); }
+.rhine-logo[data-animate=true] .rhine-logo__plate { animation:rhine-logo-enter var(--rhine-duration-brand) var(--rhine-ease-standard) both; }
+@keyframes rhine-logo-enter { from { opacity:0; transform:translate(var(--rhine-logo-x),var(--rhine-logo-y)); } to { opacity:1; transform:translate(0,0); } }
+@media(prefers-color-scheme:dark) {
+  .rhine-logo[data-theme=auto] { color:var(--rhine-bg); }
+  .rhine-logo--icon[data-theme=auto] { background:var(--rhine-green); }
+}
+@media(prefers-reduced-motion:reduce) { .rhine-logo[data-animate=true] .rhine-logo__plate { animation:none; } }
+@keyframes rhine-enter { from { opacity:0; transform:translateY(var(--rhine-motion-distance)); } to { opacity:1; transform:translateY(0); } }
+@keyframes rhine-progress { from { transform:translateX(-100%); } to { transform:translateX(340%); } }
+@keyframes rhine-pulse { 50% { opacity:.55; } }
+.rhine-theme[data-rhine-motion=reduced] { --rhine-duration-hover:0ms; --rhine-duration-press:0ms; --rhine-duration-panel:0ms; --rhine-duration-notice:0ms; --rhine-duration-progress:0ms; }
+.rhine-theme[data-rhine-motion=reduced] *, .rhine-theme[data-rhine-motion=reduced] *::before, .rhine-theme[data-rhine-motion=reduced] *::after { animation:none!important; transition:none!important; }
+.rhine-theme[data-rhine-motion=reduced] .rhine-button:active { transform:none; }
+@media(prefers-reduced-motion:reduce) {
+  .rhine-theme { --rhine-duration-hover:0ms; --rhine-duration-press:0ms; --rhine-duration-panel:0ms; --rhine-duration-notice:0ms; --rhine-duration-progress:0ms; }
+  .rhine-theme *, .rhine-theme *::before, .rhine-theme *::after { animation:none!important; transition:none!important; }
+  .rhine-theme .rhine-button:active { transform:none; }
+}

package/components/tokens.css

@@ -0,0 +1,58 @@
+/* Canonical tokens for the component library and design previews. */
+:root {
+  --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

@@ -0,0 +1,31 @@
+.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/design/README.md

@@ -0,0 +1,14 @@
+# 莱茵设计 · 设计模式索引
+
+本库维护跨产品视觉规范、组件状态和动效组合，具体产品页面稿由消费项目维护。
+
+| 模式 | 规范与真实演示 |
+| --- | --- |
+| 视觉与文字 | [通用规范](../docs/DESIGN_SYSTEM.md)、[文字规范](../components/TYPOGRAPHY.md)，/#foundation、/#typography |
+| 选择与表单 | [组件契约](../components/COMMON_COMPONENTS.md)，/#selection、/#forms |
+| 数据与分页 | 同一组件契约，/#data |
+| 反馈与浮层 | 同一组件契约，/#feedback、/#overlays |
+| 动效过渡 | [动效规范](../components/MOTION.md)，/#motion |
+| 三角构架与启动衔接 | [启动编排](../components/STARTUP.md)、[SVG母版](../components/assets/logo.svg)，/#brand、/#startup |
+
+在仓库根运行npm run dev，上述路径相对服务根（默认18309）。播放、重播、慢放与减少动态由真实展台提供，不执行授权或业务写入。新模式先组合已有组件，缺少通用能力时再扩展组件和契约。

package/docs/DESIGN_SYSTEM.md

@@ -0,0 +1,84 @@
+# 莱茵设计 · 通用设计规范
+
+本规范是 Rhine Design 的设计基线，覆盖色彩、文字、组件状态、布局和动画，供不同产品复用。配套 React 实现为 @linhey/rhine-design；版本演进见[CHANGELOG](../CHANGELOG.md)，组件契约见[组件入口](../components/README.md)。
+
+## 1. 设计语言
+
+暖白背景、苔绿结构、墨色文字、细线分隔和少量橙色定位形成安静、精密的秩序。三角几何用于品牌结构，装饰不穿过正文、不遮挡操作，不制造虚假仪表状态。参考作品仅提供风格方向；标志、参数和实现是独立设计，不构成官方VI。
+
+## 2. 通用原则
+
+- 状态真实：未知不显示为零，操作完成前不宣称成功，刷新失败可保留旧数据并标明时效。
+- 可读优先：系统字体、清晰层级、自然换行；200%缩放不丢失文字或操作。
+- 交互连续：忙碌保留焦点，浮层有明确退出与焦点归还；快速重播和打断不留下透明遮挡。
+- 组件优先：先更新规范、组件与真实展台，再由消费项目选择版本；业务流程不进入通用组件。
+- 动效克制：反馈服务于状态理解，就绪不等待装饰，减少动态不削弱功能。
+
+## 3. 视觉变量
+
+公开样式接口统一使用 `rhine-`：主题根 `.rhine-theme`、变量 `--rhine-*`、组件类与关键帧 `rhine-*`、减少动态属性 `data-rhine-motion="reduced"`。消费项目的品牌名称只通过内容与组件参数传入，不进入共享命名空间。
+
+### 3.1 色彩
+
+| Token | 值 | 用途 |
+| --- | --- | --- |
+| `--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%，未知进度不画百分比。
+
+### 3.2 字体与密度
+
+完整规则见 [字体与文字规范](../components/TYPOGRAPHY.md)；涵盖9档文字样式、中文混排、数字单位、换行截断、内容语义和动效边界。主流系统对照与待补能力见 [补齐顺序](./DESIGN_SYSTEM_AUDIT.md)。
+
+正文使用系统栈 `-apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Microsoft YaHei, sans-serif`；数字使用 `font-variant-numeric: tabular-nums`；路径与编号使用系统等宽栈。首期不下载 Web Font。
+
+| 用途 | 字号 / 行高 | 字重 |
+| --- | --- | --- |
+| 登录标题 | 30 / 38px | 600 |
+| 工作区分组标题 | 18 / 26px | 600 |
+| 卡片身份 | 16 / 24px | 600 |
+| 正文、主要操作 | 14 / 22px | 400–600 |
+| 标签、时间、辅助说明 | 12 / 18px | 400–500 |
+| 用量关键数字 | 26 / 32px；窄窗 20 / 26px | 600 |
+
+正常视图不出现小于 12px 的业务信息。英文短标签可使用 0.08em 字距；中文不刻意拉大字距。大写英文只作为少量层级辅助。
+
+### 3.3 几何与布局
+
+- 间距序列 4/8/12/16/24/32/48px。窗口内容边距 24px；宽度低于 480 时 20px。
+- 展台内容按容器重排；卡片最小宽度按信息密度设定，不能由某个产品窗口宽度推导所有宿主布局。状态区预留文字换行空间。
+- 卡片圆角 4px，按钮 3px；保留原生窗口圆角，不在 WebView 内再画一层假窗口。
+- 控件最小高度 40px，主要操作 44px；移动预览/触屏按至少 44px 目标校验。
+- 1px 分隔线；选中卡以 2px 深绿边界与「已选择」文字共同表达。焦点环 2px，偏移 3px。
+- 400/520/880px作为展台验收宽度；消费项目按其最小容器尺寸追加验证。
+- 指标与表格按容器重排；数字和说明可换行，必要时表格局部滚动，不以超小字号塞入全部列。
+- 100% 与 200% 字体缩放下允许纵向增长、重排；不固定卡片高度、不裁掉报错和主要操作。
+
+
+## 4. 组件与内容契约
+
+使用[40项组件契约](../components/README.md)及[常用组合](../components/COMMON_COMPONENTS.md)。表单标签持续可见，提示与错误关联；交互元素使用原生语义或可访问基础。选择、筛选、排序和分页向宿主回传意图，宿主决定数据来源及操作结果。
+
+错误说明发生了什么及可执行的下一步，避免内部堆栈和秘密；成功、警告、未知与空态有文字区分。通知不得依赖颜色或短暂动画才能理解。品牌、实体名、时区和业务单位由宿主定义，具体文案规则见[字体与文字](../components/TYPOGRAPHY.md)。
+
+## 5. 动效与品牌
+
+三角构架以同一SVG母版呈现；默认字标Rhine Design，可配置。几何、颜色和安全间距见[Logo契约](../components/README.md#品牌标志)。完整深色主题仍待补齐，Logo变色不代表全套主题完成。
+
+通用状态过渡以120–240ms为基线，按下80ms；循环只表示实际等待。具体配方、减少动态及候选边界见[动效规范](../components/MOTION.md)。[启动编排](../components/STARTUP.md)展示三块旋转压缩、展开归位以及同一标志收拢的连续性，不是业务初始化门槛。
+
+## 6. 独立迭代与验收
+
+在本仓运行npm run check，新增组件同步契约和默认/禁用/加载/错误/长文本/键盘/动效示例。展台浏览器验收400/520/880宽度、200%缩放、焦点、快速中断、重播和减少动态；独立消费构建验证CSS及SVG资源。
+
+变化记录在CHANGELOG并按语义版本提供迁移说明。消费项目显式选择版本，不随主线自动升级。库验收不依赖某个App迁移完成；真实业务、原生平台与辅助技术由宿主按适用范围补验。剩余能力见[系统对照](DESIGN_SYSTEM_AUDIT.md)。