@linhey/rhine-design 0.2.0 → 0.4.0

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/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

@@ -1,27 +1,21 @@
 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-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-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-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-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/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/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); }
+}

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.4.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.4.0, including theme, navigation, form and timeline APIs. Never assume those APIs exist in an installed 0.3.0 package.
 
 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.
 
@@ -23,15 +23,17 @@ Find the package in the host's dependencies, normally `node_modules/@linhey/rhin
 
 ## Design before implementation
 
-1. Inventory existing components and tokens for the requested behavior. Compose them before creating a new component or duplicating styles.
+1. Identify the task, interruption cost, information lifetime and recovery path using `docs/INTERACTION_PATTERNS.md` when present. Choose navigation, form, notification or overlay patterns before styling. Inventory existing components and tokens for the requested behavior. Compose them before creating a new component or duplicating styles.
 2. Update the host's page mockup or the library's real `preview/` showcase first. A new shared capability includes its contract and a usable example.
 3. Verify the changed states and interaction in the preview; then integrate into the app when implementation is in scope. Continue both stages when already authorized; a design-only request does not authorize an app migration.
 4. For library changes run `npm run check`; for visual changes inspect relevant widths (400/520/880), 200% zoom, keyboard/focus and reduced motion. For consumer changes run that project's checks. Documentation-only edits need link, example and version consistency checks, not an unrelated UI test campaign.
 
 ## 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.
+- For multi-field failures, preserve input and focus a summary only after failed submission; links return to fields without changing routing. Use SideNav/Breadcrumbs/Steps only when exported by the installed source.
+- Monitoring shows units, freshness and stale/unknown states; errors must not rely on color, flashing or transient toasts.
 - Motion explains a change. Respect reduced motion, cancellation and replay; startup decoration never blocks real readiness. Preview-only experiments are not exported components.
 - Keep independent release boundaries: do not change unrelated products or publish packages merely because this skill was invoked.

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

@@ -1,9 +1,10 @@
 # API map
 
-All paths are relative to the matching package root. `components/index.ts` is the public export authority. This index locates APIs; exact props come from the installed source, not from remembered examples.
+All paths are relative to the matching package root. `package.json` exports, `components/index.ts` and the separate `components/theme.tsx` entry are the public export authority. This index locates APIs; exact props come from the installed source, not from remembered examples.
 
 | Exports | Source |
 | --- | --- |
+| ThemeProvider, useTheme, themes, ThemeName, ThemeProviderProps (0.4.0；`@linhey/rhine-design/theme`) | `components/theme.tsx`；契约 `docs/THEMING.md` |
 | Logo | `components/Logo.tsx` |
 | Text | `components/Typography.tsx` |
 | Select | `components/Select.tsx` |
@@ -12,7 +13,10 @@ All paths are relative to the matching package root. `components/index.ts` is th
 | Divider, Stack, Inline, Grid | `components/Layout.tsx` |
 | Metric, KeyValue, DataTable, Pagination | `components/Data.tsx` |
 | Checkbox, RadioGroup, Switch, Textarea, SearchField, Combobox | `components/Forms.tsx` |
-| Dialog, ConfirmDialog, Popover, Menu, Tooltip | `components/Overlays.tsx` |
+| Dialog, Drawer (0.4.0), ConfirmDialog, Popover, Menu, Tooltip | `components/Overlays.tsx` |
+| StatusTimeline, TimelineLegend (0.4.0) | `components/StatusTimeline.tsx`；历史证据，不计算健康评分 |
+| SideNav, Breadcrumbs, Steps (0.4.0) | `components/Navigation.tsx` |
+| Fieldset, ErrorSummary (0.4.0) | `components/FormWorkflow.tsx` |
 | Toast | `components/Toast.tsx` |
 | Button, Badge, Surface, SelectionCard, TextField, Tabs, SegmentedControl, Notice, Progress, Skeleton, Disclosure, EmptyState | `components/components.tsx` |
 
@@ -31,4 +35,4 @@ API decisions that commonly matter:
 - `Text`'s `as` chooses semantics; `variant` chooses visual hierarchy.
 - `Logo` accepts `wordmark` and `label`; its `theme` affects the logo, not the full component library.
 - `Toast` presents one notification, not a global queue. `DataTable` is not a query or table-state engine.
-- Components in `preview/` are demonstrations unless re-exported through `components/index.ts`.
+- Components in `preview/` are demonstrations. Public API must resolve through a `package.json` export; theme APIs use the separate `/theme` entry.

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

@@ -4,8 +4,11 @@ Resolve the matching package root as described in SKILL.md. Open the first relev
 
 | Task | First reference (relative to package root) | Implementation / example |
 | --- | --- | --- |
+| Theme integration, switching, controlled preferences | `docs/THEMING.md` (0.4.0) | `components/theme.tsx`, `preview/GalleryShell.tsx` |
+| Scenario selection, navigation, form recovery, monitoring | `docs/INTERACTION_PATTERNS.md` (0.4.0; check installed version) | `preview/PatternGallery.tsx`; research in `docs/REFERENCE_RESEARCH.md` |
 | Visual direction, colors, spacing, layout | `docs/DESIGN_SYSTEM.md` | `components/tokens.css`, `components/Layout.tsx` |
-| Text hierarchy, Chinese/Latin text, metrics | `components/TYPOGRAPHY.md` | `components/Typography.tsx` |
+| Spacing, grouping, card composition | `components/SPACING.md` (0.4.0 docs; existing gap API works in 0.3.0) | `components/Layout.tsx`, `preview/SpacingGallery.tsx`; `/#spacing` |
+| Text hierarchy, line height, paragraphs, Chinese/Latin text, metrics | `components/TYPOGRAPHY.md` | `components/Typography.tsx`, `preview/LineHeightGallery.tsx`; `/#typography` |
 | Logo, light/dark variants, wordmark | `components/README.md` → 品牌标志 | `components/Logo.tsx`, `components/assets/logo.svg` |
 | Buttons, navigation, basic states | `components/README.md` → 组件契约 | `components/components.tsx` |
 | Forms, selection, combobox, data tables | `components/COMMON_COMPONENTS.md` | Use API_MAP for the source file |

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.4.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>
@@ -21,11 +21,13 @@ export function Example() {
 
 ## Integration invariants
 
+Version 0.4.0 also exports `ThemeProvider`, `useTheme`, `themes`, `ThemeName` and `ThemeProviderProps` from `@linhey/rhine-design/theme` (not in npm 0.3.0). See [the theme contract](../../../docs/THEMING.md). This entry loads base and built-in theme CSS and renders the `.rhine-theme` root. Use `defaultTheme` for local state, or `theme` with `onThemeChange` for host state; storage and URL preferences remain with the host. Sibling providers are supported; nested providers throw. Do not wrap it in another themed root or key the subtree by theme. Gallery decoration is excluded from the public theme CSS.
+
 - 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. The arknights preset uses a dark palette; a general light/dark/system color-mode API is not provided. Logo color remains independent of the component theme.
 
 ## Host responsibilities