@linhey/rhine-design 0.4.0 → 0.6.0

package/components/common.css

@@ -21,7 +21,7 @@
 .rhine-table caption { text-align:left; font-size:var(--rhine-text-heading); line-height:var(--rhine-leading-heading); font-weight:var(--rhine-weight-heading); margin-bottom:var(--rhine-space-4); }
 .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 [data-align=right] { text-align:right; }.rhine-table tbody tr:hover { background:var(--rhine-table-hover-bg); }
 .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; }
@@ -43,13 +43,13 @@
 .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 { 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-overlay-bg); color:var(--rhine-overlay-text); 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-overlay { position:fixed; inset:0; background:var(--rhine-backdrop-bg); 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-overlay-bg); color:var(--rhine-overlay-text); box-shadow:0 16px 48px #242b2826; }
 .rhine-dialog>p,.rhine-dialog__main>p { margin-top:12px; }.rhine-dialog>.rhine-notice { margin-top:16px; }
 .rhine-dialog__main { min-width:0; }
 .rhine-dialog--split { width:min(960px,calc(100vw - 32px)); display:grid; grid-template-columns:minmax(240px,0.8fr) minmax(0,1.2fr); gap:24px; }
@@ -63,7 +63,7 @@
 .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,.rhine-menu { z-index:50; background:var(--rhine-overlay-bg); color:var(--rhine-overlay-text); 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; }

package/components/data.css

@@ -0,0 +1,6 @@
+.rhine-data .rhine-table tbody th[scope=row] { position:static; top:auto; z-index:auto; color:var(--rhine-ink); background:var(--rhine-surface); font-weight:var(--rhine-weight-label); }
+.rhine-data .rhine-table tbody th[scope=row][data-sticky] { position:sticky; z-index:1; }
+.rhine-data .rhine-table tr[data-selected=true] th[scope=row] { background:var(--rhine-table-selected-bg); }
+.rhine-table__radio { display:flex; align-items:center; gap:8px; min-height:44px; cursor:pointer; }
+.rhine-table__radio input { flex:none; width:18px; height:18px; accent-color:var(--rhine-green); }
+.rhine-table__radio:has(input:disabled) { color:var(--rhine-muted); cursor:default; }

package/components/drawer-placement.css

@@ -0,0 +1,4 @@
+.rhine-dialog.rhine-drawer[data-side=left] { left:0; right:auto; animation-name:rhine-drawer-enter-left; }
+.rhine-dialog.rhine-drawer[data-side=right] { left:auto; right:0; }
+.rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-drawer[data-side=left] { border-radius:0 24px 24px 0; box-shadow:5px 0 0 var(--rhine-ink); }
+@keyframes rhine-drawer-enter-left { from { opacity:0; transform:translateX(-3px); } to { opacity:1; transform:translateX(0); } }

package/components/extensions.css

@@ -0,0 +1,70 @@
+.rhine-shell { height:100%; min-height:0; min-width:0; display:flex; flex-direction:column; border:1px solid var(--rhine-line); background:var(--rhine-canvas-bg); }
+.rhine-shell__header { flex:none; display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:12px; border-bottom:1px solid var(--rhine-line); background:var(--rhine-surface); }
+.rhine-shell__body { display:flex; flex:1; min-height:0; min-width:0; }
+.rhine-shell__nav, .rhine-shell__secondary { flex:0 0 224px; min-width:0; overflow:auto; padding:16px; background:var(--rhine-sidebar-bg); border-right:1px solid var(--rhine-line); overflow-wrap:anywhere; }
+.rhine-shell__secondary { flex-basis:256px; }
+.rhine-shell[data-layout=left-right] .rhine-shell__secondary { order:2; border-right:0; border-left:1px solid var(--rhine-line); }
+.rhine-shell__content { flex:1; min-width:0; min-height:0; overflow:auto; padding:24px; overflow-wrap:anywhere; }
+.rhine-date-range { margin:0; min-width:0; padding:16px; border:1px solid var(--rhine-line); background:var(--rhine-field-group-bg); }
+.rhine-date-range legend { padding:0 4px; font-weight:600; }
+.rhine-date-range__fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:16px; margin-bottom:16px; }
+.rhine-date-range input { max-width:100%; min-width:0; }
+.rhine-number-field { display:grid; gap:8px; min-width:0; }
+.rhine-multi-select { min-width:0; }
+.rhine-multi-select__tags { display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:8px 0; }
+.rhine-multi-select__tags li { display:flex; align-items:center; max-width:100%; padding-left:12px; border:1px solid var(--rhine-line); background:var(--rhine-selected); border-radius:var(--rhine-radius-control); }
+.rhine-multi-select__tags li>span { min-width:0; overflow-wrap:anywhere; }
+.rhine-multi-select__tags .rhine-button { flex:none; }
+.rhine-tree { min-width:0; padding:8px; border:1px solid var(--rhine-line); background:var(--rhine-field-group-bg); }
+.rhine-tree [role=group] { padding-left:var(--rhine-tree-indent); }
+.rhine-tree__row { display:flex; align-items:center; gap:8px; min-height:44px; padding:4px; overflow-wrap:anywhere; cursor:pointer; }
+.rhine-tree__row>span:last-of-type { min-width:0; flex:1; }
+.rhine-tree__row[data-selected=true] { background:var(--rhine-selected); }
+.rhine-tree [aria-disabled=true]>.rhine-tree__row { color:var(--rhine-muted); cursor:default; }
+.rhine-tree__row button { min-height:44px; min-width:44px; border:1px solid var(--rhine-line); background:var(--rhine-surface); color:var(--rhine-ink); font:inherit; cursor:pointer; }
+.rhine-tree__spacer { flex:0 0 12px; }
+.rhine-data[data-density=compact] { --rhine-table-cell-padding:6px 12px; }
+.rhine-data .rhine-table-scroll { max-width:100%; overflow:auto; scroll-padding:48px; }
+.rhine-data .rhine-table :is(th,td) { padding:var(--rhine-table-cell-padding); overflow-wrap:anywhere; font-size:14px; }
+.rhine-table th { background:var(--rhine-table-header-bg); }
+.rhine-table td { background:var(--rhine-surface); }
+.rhine-table tbody tr:hover:not([data-selected=true]) > :is(td,th[scope=row]) { background:var(--rhine-table-hover-bg); }
+.rhine-table tr[data-selected=true] td { background:var(--rhine-table-selected-bg); }
+.rhine-table[data-sticky-header=true] th { position:sticky; top:0; z-index:2; }
+.rhine-table :is(th,td)[data-sticky] { position:sticky; z-index:1; box-shadow:0 0 0 1px var(--rhine-line); }
+.rhine-table[data-sticky-header=true] th[data-sticky] { z-index:3; }
+.rhine-table__depth { display:block; white-space:nowrap; color:var(--rhine-muted); font-size:12px; }
+.rhine-table .rhine-check label { min-height:44px; }
+.rhine-pagination .rhine-select { width:auto; }
+.rhine-media-card { min-width:0; border:1px solid var(--rhine-line); border-radius:var(--rhine-radius-card); background:var(--rhine-surface); }
+.rhine-media-card[data-selected=true] { border:2px solid var(--rhine-green); }
+.rhine-media-card__open { display:block; width:100%; min-width:0; padding:0; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
+.rhine-media-card__open:disabled { cursor:default; opacity:.6; }
+.rhine-media-card__preview { position:relative; display:flex; align-items:center; justify-content:center; width:100%; overflow:hidden; background:var(--rhine-media-canvas); color:var(--rhine-media-text); border-radius:var(--rhine-radius-card) var(--rhine-radius-card) 0 0; }
+.rhine-media-card__preview :is(img,video) { width:100%; height:100%; object-fit:contain; }
+.rhine-media-card__kind { position:absolute; top:8px; left:8px; padding:4px 8px; background:var(--rhine-media-overlay); color:var(--rhine-media-text); border:1px solid var(--rhine-media-border); font-size:12px; }
+.rhine-media-card__caption { display:grid; gap:4px; padding:16px; overflow-wrap:anywhere; }
+.rhine-media-card__caption>span { font-size:12px; color:var(--rhine-muted); }
+.rhine-media-card>.rhine-check { padding:0 16px 12px; overflow-wrap:anywhere; }
+.rhine-media-card>.rhine-check label { min-height:44px; }
+.rhine-media-viewer { position:fixed; inset:0; z-index:41; width:100%; height:100dvh; display:flex; flex-direction:column; background:var(--rhine-media-canvas); color:var(--rhine-media-text); color-scheme:dark; overflow:auto; }
+.rhine-media-viewer__header { flex:none; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; padding:16px; background:var(--rhine-media-overlay); border-bottom:1px solid var(--rhine-media-border); }
+.rhine-media-viewer__header>div { min-width:0; }
+.rhine-media-viewer__header h2 { font-size:18px; line-height:26px; overflow-wrap:anywhere; margin:0; }
+.rhine-media-viewer__header p { color:var(--rhine-media-muted); font-size:12px; margin:4px 0 0; }
+.rhine-media-viewer__actions { display:flex; flex-wrap:wrap; gap:8px; }
+.rhine-media-viewer :is(button,select,a) { min-height:44px; min-width:44px; max-width:100%; padding:8px 12px; border:1px solid var(--rhine-media-border); border-radius:4px; background:var(--rhine-media-overlay); color:var(--rhine-media-text); font:inherit; overflow-wrap:anywhere; }
+.rhine-media-viewer button { cursor:pointer; }
+.rhine-media-viewer button:disabled { color:var(--rhine-media-muted); opacity:.5; cursor:default; }
+.rhine-theme .rhine-media-viewer.rhine-media-viewer :is(button,input,select,textarea,summary,a,[tabindex]):focus-visible { outline:3px solid var(--rhine-media-focus); outline-offset:-3px; }
+.rhine-media-viewer__body { display:grid; grid-template-columns:var(--rhine-media-columns); flex:1; min-height:0; min-width:0; }
+.rhine-media-viewer__canvas { display:flex; align-items:center; justify-content:center; min-height:0; min-width:0; overflow:auto; padding:16px; }
+.rhine-media-viewer__canvas :is(img,video) { display:block; max-width:100%; max-height:100%; object-fit:contain; }
+.rhine-media-viewer__metadata { min-width:0; overflow:auto; padding:24px; border-left:1px solid var(--rhine-media-border); background:var(--rhine-media-overlay); overflow-wrap:anywhere; }
+@media(max-width:760px) {
+  .rhine-media-viewer__body { display:flex; flex-direction:column; overflow:auto; }
+  .rhine-media-viewer__canvas { flex:1 0 220px; }
+  .rhine-media-viewer__canvas :is(img,video) { max-height:50dvh; }
+  .rhine-media-viewer__metadata { flex:none; overflow:visible; border-left:0; border-top:1px solid var(--rhine-media-border); }
+  .rhine-shell__content { padding:16px; }
+}

package/components/index.ts

@@ -1,6 +1,18 @@
 import './styles.css';
+export { OrbitBackdrop } from './OrbitBackdrop';
+export type { OrbitBackdropProps } from './OrbitBackdrop';
+export { Background } from './Background';
+export type { BackgroundProps, BackgroundRole, BackgroundDecoration, BackgroundAppearance } from './Background';
+export { AppShell } from './AppShell';
+export type { AppShellProps, ShellPanel } from './AppShell';
+export { MediaCard, MediaViewer } from './Media';
+export type { MediaCardProps, MediaViewerProps } from './Media';
+export { DateField, DateRangePicker, NumberField, RemoteMultiSelect, TreeSelect } from './AdvancedForms';
+export type { DateFieldProps, DateRange, DateRangePickerProps, NumberFieldProps, RemoteMultiSelectProps, TreeNode, TreeSelectProps } from './AdvancedForms';
 export { StatusTimeline, TimelineLegend } from './StatusTimeline';
-export type { TimelineSegment, TimelineStatus } from './StatusTimeline';
+export type { TimelineSegment, TimelineStatus, TimelineDetail, StatusTimelineProps } from './StatusTimeline';
+export { TrendChart, StackedBar } from './Charts';
+export type { ChartPoint, ChartPart, TrendChartProps, StackedBarProps } from './Charts';
 
 export { Logo } from './Logo';
 export type { LogoProps } from './Logo';
@@ -15,7 +27,7 @@ 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 type { DataColumn, DataTableProps, TableSort, PaginationProps } from './Data';
 export { Checkbox, RadioGroup, Switch, Textarea, SearchField, Combobox } from './Forms';
 export type { ComboboxProps } from './Forms';
 export { Dialog, Drawer, ConfirmDialog, Popover, Menu, Tooltip } from './Overlays';

package/components/media-parity.css

@@ -0,0 +1,3 @@
+.rhine-media-card__actions { display:flex; flex-wrap:wrap; gap:8px; padding:0 16px 12px; }
+.rhine-media-card__asset { position:absolute; inset:0; }
+.rhine-media-card__asset:not([hidden]) { display:flex; align-items:center; justify-content:center; }

package/components/orbit.css

@@ -0,0 +1,42 @@
+.rhine-orbit {
+  position:relative; isolation:isolate; display:flex; flex-direction:column;
+  min-width:0; min-height:280px; overflow:hidden;
+  border:1px solid var(--rhine-line); border-radius:var(--rhine-radius-card);
+  background:
+    radial-gradient(ellipse at 90% 78%, #15508066 0, transparent 43%),
+    radial-gradient(ellipse at 8% 54%, #84603626 0, transparent 35%),
+    radial-gradient(ellipse at 62% 18%, #213b653b 0, transparent 48%),
+    linear-gradient(155deg, #03070f 12%, #081426 58%, #030a13);
+}
+.rhine-orbit::before, .rhine-orbit::after { content:''; position:absolute; inset:0; pointer-events:none; }
+.rhine-orbit::before {
+  background-image:
+    radial-gradient(circle at 17px 37px, #d7eaffb3 .7px, transparent 1.4px),
+    radial-gradient(circle at 73px 19px, #8bb8e780 .6px, transparent 1.2px),
+    radial-gradient(circle at 41px 89px, #d7ba8f80 .7px, transparent 1.3px),
+    radial-gradient(circle at 113px 157px, #c4dcff66 .5px, transparent 1.2px);
+  background-size:173px 211px, 127px 181px, 251px 239px, 97px 139px;
+  opacity:.55;
+}
+.rhine-orbit::after {
+  background:
+    radial-gradient(ellipse at 77% 66%, #52a4f21a 0, transparent 28%),
+    radial-gradient(ellipse at 24% 84%, #b8874220 0, transparent 30%),
+    linear-gradient(125deg, transparent 40%, #6295d109 49%, transparent 58%);
+}
+.rhine-orbit-canvas { position:absolute; inset:0; display:block; width:100%; height:100%; pointer-events:none; }
+/* Keep host control tokens intact; only unpainted content inherits the artwork foreground. */
+.rhine-orbit-content {
+  position:relative; z-index:1; flex:1; min-width:0;
+  display:flex; flex-direction:column; justify-content:space-between; gap:var(--rhine-space-6);
+  padding:var(--rhine-space-6); padding-bottom:calc(44px + var(--rhine-space-6) * 2);
+  color:#f2f7ff;
+}
+.rhine-orbit-content :is(.rhine-text--muted, .rhine-field__hint) { color:inherit; opacity:.8; }
+.rhine-orbit-content .rhine-logo:not(.rhine-logo--icon) { color:inherit; }
+/* Transparent actions follow their backdrop; painted hover/disabled states retain the host palette. */
+.rhine-orbit-content .rhine-button--quiet:not(:disabled):not(:hover),
+.rhine-orbit-content .rhine-button--quiet[aria-disabled=true]:not(:disabled) { color:inherit; }
+.rhine-orbit .rhine-orbit-content .rhine-button--quiet:focus-visible { outline:none; box-shadow:inset 0 0 0 2px currentColor; }
+.rhine-orbit-controls { position:absolute; right:var(--rhine-space-4); bottom:var(--rhine-space-4); z-index:2; max-width:calc(100% - var(--rhine-space-4) * 2); }
+.rhine-orbit-controls .rhine-button { max-width:100%; }

package/components/orbitRenderer.ts

@@ -0,0 +1,230 @@
+type Point = { x: number; y: number; depth: number; perspective: number };
+type Edge = { a: number; sweep: number; phase: number; waist: number; lift: number; color: number; speed: number };
+type Layer =
+  | { kind: 'void'; points: Point[] }
+  | { kind: 'line'; p: Point; q: Point; color: number }
+  | { kind: 'particle'; p: Point; color: number }
+  | { kind: 'spike'; p: Point; q: Point; i: number; pulse: number };
+type CanvasScene = { el: HTMLCanvasElement; ctx: CanvasRenderingContext2D; w: number; h: number };
+export type OrbitState = 'playing' | 'paused' | 'reduced' | 'compact' | 'hidden' | 'offscreen' | 'empty' | 'unavailable';
+export interface OrbitRenderer { setPaused(value: boolean): void; setReducedMotion(value: boolean): void; dispose(): void }
+
+/** The seeded artwork is stable across mounts; only elapsed visible time advances it. */
+export function mountOrbit(canvas: HTMLCanvasElement, onState: (state: OrbitState) => void): OrbitRenderer {
+  let ctx: CanvasRenderingContext2D | null = null;
+  try { ctx = canvas.getContext('2d'); } catch { /* Canvas may be disabled by the host. */ }
+  if (!ctx) {
+    onState('unavailable');
+    return { setPaused() {}, setReducedMotion() {}, dispose() {} };
+  }
+  const TAU = Math.PI * 2, colors = ["#51b7f6", "#e5b94d", "#2ec7a1", "#bdcbe1"];
+  let seed = 1823;
+  function rand() {
+    seed = seed * 1664525 + 1013904223 >>> 0;
+    return seed / 4294967296;
+  }
+  const nodes = Array.from({ length: 420 }, (_, i) => ({ a: i / 420 * TAU, r: 1.025 + rand() * 0.07, z: (rand() - 0.5) * 0.34, length: 0.035 + rand() * 0.19, color: i % 7 === 0 ? 1 : i % 11 === 0 ? 2 : 3 }));
+  const emissions = nodes.map(() => ({ phase: rand(), rate: 0.28 + rand() * 0.3 }));
+  const edges = Array.from({ length: 185 }, () => ({ a: rand() * TAU, sweep: 2.1 + rand() * 3.8, phase: rand() * TAU, waist: 0.5 + rand() * 0.32, lift: (rand() - 0.3) * 0.6, color: rand() < 0.32 ? 1 : rand() < 0.1 ? 2 : 0, speed: 0.026 + rand() * 0.024 }));
+  function edgePoint(e: Edge, t: number) {
+    const a = e.a + t * e.sweep, envelope = Math.sin(Math.PI * t);
+    return { a, r: 1.035 - (1.035 - e.waist) * Math.pow(envelope, 0.72), z: e.lift * envelope + 0.06 * Math.sin(e.phase + t * TAU) * envelope };
+  }
+  const paths = edges.map((e) => Array.from({ length: 81 }, (_, i) => edgePoint(e, i / 80)));
+  const canvases = { network: { el: canvas, ctx, w: 0, h: 0 } };
+  let time = 0, orbit = 0, projected: Point[] = [], last: number | null = null, frame = 0;
+  const yaw = -0.72, tilt = 0.22;
+  let paused = false, manualReduced = false, disposed = false, visible = true;
+  let previousState: OrbitState | undefined;
+  function resize() {
+    const dpr = Math.min(window.devicePixelRatio || 1, 2);
+    // Layout CSS pixels exclude CSS zoom; visual scaling must not change stroke proportions.
+    const c = canvases.network;
+    c.w = c.el.clientWidth;
+    c.h = c.el.clientHeight;
+    c.el.width = Math.round(c.w * dpr);
+    c.el.height = Math.round(c.h * dpr);
+    c.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    draw();
+  }
+  function line(ctx2: CanvasRenderingContext2D, x1: number, y1: number, x2: number, y2: number, color: string | CanvasGradient, width = 1) {
+    ctx2.strokeStyle = color;
+    ctx2.lineWidth = width;
+    ctx2.beginPath();
+    ctx2.moveTo(x1, y1);
+    ctx2.lineTo(x2, y2);
+    ctx2.stroke();
+  }
+  function dot(ctx2: CanvasRenderingContext2D, x: number, y: number, r: number, color: string | CanvasGradient) {
+    ctx2.fillStyle = color;
+    ctx2.beginPath();
+    ctx2.arc(x, y, r, 0, TAU);
+    ctx2.fill();
+  }
+  function clear(c: CanvasScene) {
+    c.ctx.clearRect(0, 0, c.w, c.h);
+  }
+  function project(a: number, r = 1, z = 0) {
+    const c = canvases.network, scale = Math.min(c.w * 0.66, c.h * 0.39), x = Math.cos(a) * r, y = Math.sin(a) * r;
+    const yy = y * Math.cos(tilt) - z * Math.sin(tilt), zz = y * Math.sin(tilt) + z * Math.cos(tilt);
+    const xx = x * Math.cos(yaw) + zz * Math.sin(yaw), depth = -x * Math.sin(yaw) + zz * Math.cos(yaw);
+    const spin = 0.34, px = xx * Math.cos(spin) - yy * Math.sin(spin), py = xx * Math.sin(spin) + yy * Math.cos(spin), perspective = 3.6 / (3.6 - depth);
+    return { x: c.w * 0.62 + px * scale * perspective, y: c.h * 0.57 + py * scale * perspective * 1.08, depth, perspective };
+  }
+  function network() {
+    const c = canvases.network, { ctx: ctx2 } = c;
+    clear(c);
+    const buckets: Layer[][] = Array.from({ length: 80 }, () => []), offset = orbit;
+    function add(item: Layer, depth: number) {
+      buckets[Math.max(0, Math.min(79, Math.floor((depth + 1.5) / 3 * 80)))].push(item);
+    }
+    const horizon = Array.from({ length: 101 }, (_, i) => project(i / 100 * TAU, 0.46, -0.06));
+    add({ kind: "void", points: horizon }, -0.04);
+    edges.forEach((e, index) => {
+      const pts = paths[index].map((p) => project(p.a + offset, p.r, p.z));
+      for (let i = 1; i < pts.length; i++) add({ kind: "line", p: pts[i - 1], q: pts[i], color: e.color }, (pts[i - 1].depth + pts[i].depth) / 2 + 7e-3);
+      if (index % 3 === 0) {
+        const t = (time * e.speed + e.phase / TAU) % 1, p3 = edgePoint(e, t), p = project(p3.a + offset, p3.r, p3.z);
+        add({ kind: "particle", p, color: e.color }, p.depth + 0.012);
+      }
+    });
+    projected = nodes.map((n) => project(n.a + offset, n.r, n.z));
+    nodes.forEach((n, i) => {
+      const emission = emissions[i], pulse = (time * emission.rate + emission.phase) % 1, breath = 1 + 0.18 * Math.sin(time * 1.7 + n.a * 5), p = projected[i], q = project(n.a + offset, n.r + n.length * breath, n.z * 1.1);
+      add({ kind: "spike", p, q, i, pulse }, (p.depth + q.depth) / 2);
+    });
+    const palette = ["104,178,244", "223,187,92", "72,182,179"];
+    for (const bucket of buckets) for (const item of bucket) {
+      if (item.kind === "void") {
+        ctx2.beginPath();
+        item.points.forEach((p2, i) => i ? ctx2.lineTo(p2.x, p2.y) : ctx2.moveTo(p2.x, p2.y));
+        ctx2.closePath();
+        ctx2.fillStyle = "#010205";
+        ctx2.fill();
+        continue;
+      }
+      const p = item.p, near = Math.max(0, Math.min(1, (p.depth + 1) / 2));
+      if (item.kind === "line") {
+        ctx2.strokeStyle = "rgba(" + palette[item.color] + "," + (0.07 + near * near * 0.57) + ")";
+        ctx2.lineWidth = 0.35 + near * 0.65;
+        ctx2.beginPath();
+        ctx2.moveTo(p.x, p.y);
+        ctx2.lineTo(item.q.x, item.q.y);
+        ctx2.stroke();
+      } else if (item.kind === "spike") {
+        const q = item.q, bright = near > 0.48, rgb = bright ? "173,218,255" : "225,161,71", dx = q.x - p.x, dy = q.y - p.y, len = Math.hypot(dx, dy) || 1, ux = dx / len, uy = dy / len;
+        line(ctx2, p.x, p.y, q.x, q.y, bright ? "rgba(213,224,241," + (0.16 + near * 0.35) + ")" : "rgba(181,118,53," + (0.12 + near * 0.3) + ")", 0.4 + near * 0.4);
+        const t = item.pulse, fade = Math.sin(Math.PI * t), alpha = fade * (0.25 + near * 0.75), x = p.x + dx * t, y = p.y + dy * t, tail = Math.max(0, t - 0.38), tx = p.x + dx * tail, ty = p.y + dy * tail;
+        const trail = ctx2.createLinearGradient(tx, ty, x + 1e-3, y + 1e-3);
+        trail.addColorStop(0, "rgba(" + rgb + ",0)");
+        trail.addColorStop(1, "rgba(" + rgb + "," + alpha + ")");
+        line(ctx2, tx, ty, x, y, trail, 0.7 + near * 0.9);
+        const size = (1.6 + near * 1.5) * q.perspective;
+        ctx2.strokeStyle = "rgba(" + rgb + "," + alpha + ")";
+        ctx2.lineWidth = 0.65 + near * 0.5;
+        ctx2.beginPath();
+        ctx2.moveTo(x - ux * size - uy * size * 0.55, y - uy * size + ux * size * 0.55);
+        ctx2.lineTo(x, y);
+        ctx2.lineTo(x - ux * size + uy * size * 0.55, y - uy * size - ux * size * 0.55);
+        ctx2.stroke();
+        if (item.i % 3 === 0) {
+          const radius = (4 + near * 4) * q.perspective, glow = ctx2.createRadialGradient(x, y, 0, x, y, radius);
+          glow.addColorStop(0, "rgba(" + rgb + "," + alpha * 0.45 + ")");
+          glow.addColorStop(1, "rgba(" + rgb + ",0)");
+          dot(ctx2, x, y, radius, glow);
+          dot(ctx2, x, y, 0.65 + near * 0.45, "rgba(242,247,255," + alpha + ")");
+        }
+        const flash = Math.pow(Math.max(0, 1 - Math.abs(t - 0.88) / 0.12), 2);
+        dot(ctx2, q.x, q.y, (0.55 + flash * 1.1) * q.perspective, "rgba(" + rgb + "," + (0.18 + near * 0.25 + flash * 0.35) + ")");
+      } else {
+        ctx2.shadowBlur = 5;
+        ctx2.shadowColor = colors[item.color];
+        dot(ctx2, p.x, p.y, 1.1 * p.perspective, colors[item.color]);
+        ctx2.shadowBlur = 0;
+      }
+    }
+    for (let i = 0; i < 8; i++) {
+      const e = edges[i * 19], v = edgePoint(e, 0.4), p = project(v.a + offset, v.r, v.z);
+      if (p.depth < -0.1) continue;
+      ctx2.shadowColor = "#f25380";
+      ctx2.shadowBlur = 10;
+      dot(ctx2, p.x, p.y, 2.2 * p.perspective, "#ff658c");
+      ctx2.shadowBlur = 0;
+    }
+  }
+  const reduced = window.matchMedia?.('(prefers-reduced-motion: reduce)');
+  const compact = window.matchMedia?.('(max-width: 760px)');
+  function draw() {
+    if (canvases.network.w && canvases.network.h) network();
+  }
+  function state(): OrbitState {
+    if (manualReduced || reduced?.matches || canvas.closest('[data-rhine-motion="reduced"]')) return 'reduced';
+    if (compact?.matches) return 'compact';
+    if (document.hidden) return 'hidden';
+    if (!visible) return 'offscreen';
+    if (canvases.network.w <= 0 || canvases.network.h <= 0) return 'empty';
+    return paused ? 'paused' : 'playing';
+  }
+  function animate(now: number) {
+    frame = 0;
+    if (disposed) return;
+    // A frame can observe a media change before its change event is delivered.
+    if (state() !== 'playing') { sync(); return; }
+    const dt = last === null ? 0 : Math.min((now - last) / 1e3, 0.1);
+    last = now;
+    time += dt;
+    orbit += dt * 0.028;
+    draw();
+    frame = requestAnimationFrame(animate);
+  }
+  function sync() {
+    if (disposed) return;
+    cancelAnimationFrame(frame);
+    frame = 0;
+    last = null;
+    resize();
+    const next = state();
+    if (next !== previousState) { previousState = next; onState(next); }
+    if (next === 'playing') frame = requestAnimationFrame(animate);
+  }
+  const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(sync);
+  observer?.observe(canvas);
+  const intersection = typeof IntersectionObserver === 'undefined' ? null : new IntersectionObserver(entries => {
+    visible = entries.some(entry => entry.target === canvas && entry.isIntersecting);
+    sync();
+  });
+  intersection?.observe(canvas);
+  const motion = new MutationObserver(sync);
+  // Observe ancestors only: canvas sizing and React state writes must not retrigger drawing.
+  for (let ancestor = canvas.parentElement; ancestor; ancestor = ancestor.parentElement) {
+    motion.observe(ancestor, { attributes: true, attributeFilter: ['data-rhine-motion'] });
+  }
+  reduced?.addEventListener?.('change', sync);
+  compact?.addEventListener?.('change', sync);
+  window.addEventListener('resize', sync);
+  document.addEventListener("visibilitychange", sync);
+  sync();
+  return {
+    setPaused(value) {
+      if (paused === value) return;
+      paused = value;
+      sync();
+    },
+    setReducedMotion(value) {
+      if (manualReduced === value) return;
+      manualReduced = value;
+      sync();
+    },
+    dispose() {
+      disposed = true;
+      cancelAnimationFrame(frame);
+      observer?.disconnect();
+      intersection?.disconnect();
+      motion.disconnect();
+      reduced?.removeEventListener?.('change', sync);
+      compact?.removeEventListener?.('change', sync);
+      window.removeEventListener('resize', sync);
+      document.removeEventListener("visibilitychange", sync);
+    }
+  };
+}

package/components/patterns.css

@@ -26,7 +26,7 @@
 .rhine-steps li[data-state=current]>div { background:var(--rhine-selected); color:var(--rhine-green); animation:rhine-pattern-enter var(--rhine-duration-panel) var(--rhine-ease-standard); }
 .rhine-steps li[data-state=error] { border-color:var(--rhine-error); }
 .rhine-steps li[data-state=error]>div { color:var(--rhine-error); background:var(--rhine-error-bg); }
-.rhine-fieldset { min-width:0; margin:0; padding:20px; border:1px solid var(--rhine-line); border-radius:var(--rhine-radius-card); }
+.rhine-fieldset { background:var(--rhine-surface-bg); color:var(--rhine-surface-text); min-width:0; margin:0; padding:20px; border:1px solid var(--rhine-line); border-radius:var(--rhine-radius-card); }
 .rhine-fieldset legend { padding:0 8px; font-weight:600; }
 .rhine-fieldset>p { margin:0 0 20px; color:var(--rhine-muted); font-size:12px; }
 .rhine-fieldset__body { display:grid; gap:16px; }

package/components/styles.css

@@ -3,6 +3,10 @@
 @import './common.css';
 @import './patterns.css';
 @import './timeline.css';
+@import './extensions.css';
+@import './background.css';
+@import './orbit.css';
+@import './charts.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[data-rhine-theme="rhine"] { color-scheme:light; }
@@ -28,7 +32,7 @@
 .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:var(--rhine-space-6); border:1px solid var(--rhine-line); border-radius:var(--rhine-radius-card); background:var(--rhine-surface); min-width:0; }
+.rhine-surface { padding:var(--rhine-space-6); border:1px solid var(--rhine-line); border-radius:var(--rhine-radius-card); background:var(--rhine-surface-bg); color:var(--rhine-surface-text); min-width:0; }
 .rhine-selection { display:block; border:1px solid var(--rhine-control); background:var(--rhine-surface); border-radius:var(--rhine-radius-card); padding:var(--rhine-space-6); 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); }

package/components/theme-arknights.css

@@ -2,12 +2,18 @@
 .rhine-theme[data-rhine-theme="arknights"] {
   /* ---- 色彩：暗舱底 + 信号黄 + 警戒橙 ---- */
   --rhine-bg: #0b0d10;
+  --rhine-overlay-bg: #1a1d23;
+  --rhine-backdrop-bg: rgba(4, 5, 7, .72);
+  --rhine-background-mark: #20242a;
+  --rhine-background-texture: linear-gradient(var(--rhine-background-mark) 1px, transparent 1px), linear-gradient(90deg, var(--rhine-background-mark) 1px, transparent 1px);
+  --rhine-background-scale: 32px 32px;
   --rhine-surface: #14161b;
   --rhine-ink: #eef0ec;
   --rhine-muted: #878f96;
   --rhine-line: #272b31;
   --rhine-control: #454c54;
   --rhine-selected: #1c2026;
+  --rhine-table-hover-bg: color-mix(in srgb, #ffd400 6%, var(--rhine-surface));
   --rhine-green: #ffd400;
   --rhine-signal: #ff6a1a;
   --rhine-warning: #ffb020;
@@ -77,7 +83,7 @@
 .rhine-theme[data-rhine-theme="arknights"] .rhine-surface,
 .rhine-theme[data-rhine-theme="arknights"] .rhine-empty,
 .rhine-theme[data-rhine-theme="arknights"] .rhine-fieldset {
-  background: var(--ak-panel);
+  background: var(--rhine-surface-bg);
   clip-path: polygon(0 0, calc(100% - var(--ak-cut)) 0, 100% var(--ak-cut), 100% 100%, 0 100%);
 }
 /* 左下角小角标点缀 */
@@ -173,7 +179,7 @@
 .rhine-theme[data-rhine-theme="arknights"] .rhine-combobox__list,
 .rhine-theme[data-rhine-theme="arknights"] .rhine-popover,
 .rhine-theme[data-rhine-theme="arknights"] .rhine-menu {
-  background: var(--ak-panel-hi);
+  background: var(--rhine-overlay-bg);
   border-color: var(--rhine-control);
   border-radius: 0;
   box-shadow: 0 12px 32px rgba(0, 0, 0, .55);
@@ -223,7 +229,6 @@
   letter-spacing: .08em;
   border-bottom: 2px solid var(--ak-accent);
 }
-.rhine-theme[data-rhine-theme="arknights"] .rhine-table tbody tr:hover { background: rgba(255, 212, 0, .06); }
 .rhine-theme[data-rhine-theme="arknights"] .rhine-metric { font-variant-numeric: tabular-nums; }
 
 /* ================= 反馈 ================= */
@@ -240,9 +245,9 @@
 .rhine-theme[data-rhine-theme="arknights"] .rhine-disclosure summary>span { color: var(--ak-accent); }
 
 /* ================= 浮层 / 对话框 ================= */
-.rhine-theme[data-rhine-theme="arknights"] .rhine-overlay { background: rgba(4, 5, 7, .72); }
+.rhine-theme[data-rhine-theme="arknights"] .rhine-overlay { background: var(--rhine-backdrop-bg); }
 .rhine-theme[data-rhine-theme="arknights"] .rhine-dialog {
-  background: var(--ak-panel);
+  background: var(--rhine-overlay-bg);
   border-color: var(--rhine-control);
   border-radius: 0;
   box-shadow: 0 24px 64px rgba(0, 0, 0, .6);

package/components/theme-neo-brutalism.css

@@ -2,12 +2,18 @@
 .rhine-theme[data-rhine-theme="neo-brutalism"] {
   color-scheme: light;
   --rhine-bg: #eaf0f4;
+  --rhine-backdrop-bg: #20232360;
+  --rhine-background-mark: #b7c2cc;
+  --rhine-background-texture: radial-gradient(circle, var(--rhine-background-mark) .8px, transparent .9px);
+  --rhine-background-scale: 14px 14px;
   --rhine-surface: #fffdf5;
   --rhine-ink: #202323;
   --rhine-muted: #59616a;
   --rhine-line: #b9c1c7;
   --rhine-control: #202323;
   --rhine-selected: #fce4cc;
+  --rhine-table-header-bg: #edf0e9;
+  --rhine-table-cell-padding: 16px 12px;
   --rhine-green: #286043;
   --rhine-signal: #ff8b3d;
   --rhine-warning: #854216;
@@ -24,7 +30,7 @@
   --rhine-tag-green: #dcebd7;
   --rhine-tag-orange: #fce0c4;
   --rhine-tag-violet: #e3e0f7;
-  background: radial-gradient(circle, #b7c2cc .8px, transparent .9px) 0 0 / 14px 14px, var(--rhine-bg);
+  background: var(--rhine-background-texture) 0 0 / var(--rhine-background-scale), var(--rhine-bg);
 }
 
 .rhine-theme[data-rhine-theme="neo-brutalism"] :is(.rhine-surface, .rhine-selection, .rhine-empty, .rhine-fieldset) {
@@ -67,13 +73,13 @@
 .rhine-theme[data-rhine-theme="neo-brutalism"] :is(.rhine-dialog, .rhine-popover, .rhine-menu, .rhine-combobox__list) { border: 2px solid var(--rhine-ink); border-radius: 18px; box-shadow: var(--rhine-hard-shadow); }
 .rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-dialog { border-radius: 24px; box-shadow: 8px 8px 0 var(--rhine-ink); }
 .rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-drawer { border-radius: 24px 0 0 24px; box-shadow: -5px 0 0 var(--rhine-ink); }
-.rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-overlay { background: #20232360; backdrop-filter: none; }
+.rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-overlay { background: var(--rhine-backdrop-bg); backdrop-filter: none; }
 .rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-menu__item { border-radius: 10px; }
 .rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-menu__item[data-highlighted] { box-shadow: inset 0 0 0 2px var(--rhine-ink); }
 .rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-tooltip { border-radius: 8px; }
 .rhine-theme[data-rhine-theme="neo-brutalism"] :is(.rhine-notice, .rhine-toast, .rhine-error-summary) { border: 2px solid var(--rhine-tone, var(--rhine-error)); border-radius: 14px; }
-.rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-table th { color: var(--rhine-ink); background: #edf0e9; font-weight: 700; border-bottom: 2px solid var(--rhine-ink); }
-.rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-table :is(th, td) { padding: 16px 12px; }
+.rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-table th { color: var(--rhine-ink); background: var(--rhine-table-header-bg); font-weight: 700; border-bottom: 2px solid var(--rhine-ink); }
+.rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-table :is(th, td) { padding: var(--rhine-table-cell-padding); }
 .rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-table td { font-size: 14px; }
 .rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-progress__track { height: 10px; border: 1.5px solid var(--rhine-ink); border-radius: 6px; background: #e7ebee; }
 .rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-progress__track>span { background: var(--rhine-signal); }

package/components/timeline.css

@@ -18,6 +18,6 @@
 .rhine-timeline--compact { position:relative; gap:0; }
 .rhine-timeline--compact .rhine-timeline__track { height:20px; }
 .rhine-timeline--compact .rhine-timeline__track input { top:-12px; bottom:auto; }
-.rhine-timeline--compact .rhine-timeline__detail { position:absolute; z-index:2; top:100%; inset-inline:0; padding:4px 8px; border:1px solid var(--rhine-line); background:var(--rhine-surface); box-shadow:0 4px 12px #242b2814; pointer-events:none; visibility:hidden; }
-.rhine-timeline--compact:hover .rhine-timeline__detail,.rhine-timeline--compact:focus-within .rhine-timeline__detail { visibility:visible; }
+.rhine-timeline-popover { z-index:50; width:min(360px,calc(100vw - 24px)); max-height:var(--radix-popover-content-available-height); overflow:auto; padding:16px; border:1px solid var(--rhine-control); border-radius:var(--rhine-radius-card); background:var(--rhine-overlay-bg); color:var(--rhine-overlay-text); box-shadow:0 4px 12px #242b2814; overflow-wrap:anywhere; }
+.rhine-timeline-popover .rhine-key-value { margin-block:16px; }
 .rhine-timeline--compact:not(:hover):not(:focus-within) .rhine-timeline__bars [data-selected=true] { height:20px; outline:none; }

package/components/tokens.css

@@ -1,6 +1,25 @@
 /* Canonical tokens for the component library and design previews. */
 :root, :where(.rhine-theme[data-rhine-theme]) {
   --rhine-bg: #f2f1e9;
+  --rhine-backdrop-bg: #242b2870;
+  --rhine-content-texture: none;
+  --rhine-sidebar-texture: none;
+  --rhine-surface-texture: none;
+  --rhine-overlay-texture: none;
+  --rhine-media-texture: none;
+  --rhine-background-texture: none;
+  --rhine-background-scale: 24px 24px;
+  --rhine-background-mark: #c5ccc1;
+  --rhine-table-cell-padding: 12px 16px;
+  --rhine-tree-indent: 20px;
+  --rhine-chart-series-3: #477aa8;
+  --rhine-chart-series-4: #8763a7;
+  --rhine-media-canvas: #101214;
+  --rhine-media-overlay: #202428;
+  --rhine-media-text: #f6f7f8;
+  --rhine-media-muted: #bcc3ca;
+  --rhine-media-border: #68727c;
+  --rhine-media-focus: #9bceff;
   --rhine-surface: #fcfcf8;
   --rhine-ink: #242b28;
   --rhine-muted: #59645d;
@@ -61,3 +80,27 @@
   --rhine-ease-exit: cubic-bezier(.4, 0, 1, 1);
   --rhine-motion-distance: 3px;
 }
+
+/* Resolve palette aliases at CSS-only roots as well as ThemeProvider roots. */
+:root, :where(.rhine-theme) {
+  --rhine-canvas-bg: var(--rhine-bg);
+  --rhine-content-bg: var(--rhine-bg);
+  --rhine-sidebar-bg: var(--rhine-surface);
+  --rhine-surface-bg: var(--rhine-surface);
+  --rhine-overlay-bg: var(--rhine-surface);
+  --rhine-media-bg: var(--rhine-media-canvas);
+  --rhine-canvas-text: var(--rhine-ink);
+  --rhine-content-text: var(--rhine-ink);
+  --rhine-sidebar-text: var(--rhine-ink);
+  --rhine-surface-text: var(--rhine-ink);
+  --rhine-overlay-text: var(--rhine-ink);
+  --rhine-canvas-texture: var(--rhine-background-texture);
+  --rhine-table-header-bg: var(--rhine-surface);
+  --rhine-table-hover-bg: var(--rhine-selected);
+  --rhine-table-selected-bg: var(--rhine-selected);
+  --rhine-field-group-bg: var(--rhine-surface);
+  --rhine-chart-series-1: var(--rhine-green);
+  --rhine-chart-series-2: var(--rhine-signal);
+  --rhine-chart-grid: var(--rhine-line);
+  --rhine-chart-missing: var(--rhine-muted);
+}