@linhey/rhine-design 0.6.0 → 0.8.0

package/components/assets/orbit-donut.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 320" fill="none">
+  <ellipse cx="210" cy="282" rx="133" ry="16" fill="#E5C8B9"/>
+  <g transform="rotate(-60 200 153)">
+  <g stroke="#202323" stroke-width="4" stroke-linejoin="round">
+    <path fill="#DF9451" fill-rule="evenodd" d="M350 153c0 69-67 112-150 112S50 222 50 153 117 41 200 41s150 43 150 112Zm-98 0c0-20-23-34-52-34s-52 14-52 34 23 34 52 34 52-14 52-34Z"/>
+    <path fill="#F58EB3" fill-rule="evenodd" d="M349 137c6 28-11 58-28 67-9 16-18 4-29 17-13 18-22 1-39 11-14 11-24 1-39 8-15 9-29-7-44-1-17 4-25-12-40-10-18 3-22-19-36-17-14-1-20-21-31-24-15-15-21-32-13-55C60 73 123 37 200 37s137 36 149 100Zm-98 5c0-11-12-18-21-19-8-14-19-3-31-9-12-4-21 9-32 7-9 0-19 14-18 24-7 24 22 40 51 40 33 0 59-18 51-43Z"/>
+  </g>
+  <g stroke-linecap="round" stroke-width="6">
+    <path stroke="#FFF8E8" d="m91 120 10-8m57-34 7-9m69 1 13 3m65 45 9 7m-53 77 10-9m-116 18 9 5m-51-37 7 11"/>
+    <path stroke="#36735C" d="m119 103 11 3m61-34 2-10m83 31 8-5m37 72-12-2m-69 64-10-5m-103-24-8-3"/>
+    <path stroke="#FFD44B" d="m77 151 7 9m69-59 8 7m52-12 10 2m65 31 3 10m-20 50-9-2m-75 27 3 11"/>
+    <path stroke="#E54C77" d="m115 141 5 9m66-53 10 1m60-16 10 6m54 47-6 10m-72 52-8 2m-78-8-8-9"/>
+  </g>
+  <path d="M90 105c15-21 35-33 53-40m129 128c14-4 24-11 33-18" stroke="#FFE0EB" stroke-width="5" stroke-linecap="round"/>
+  </g>
+</svg>

package/components/assets/theme-previews/manifest.json

@@ -0,0 +1,24 @@
+{
+  "revision": 1,
+  "sourceBaseline": "95578008442d06bdda681f2722f46b0d3cb01794",
+  "width": 960,
+  "height": 600,
+  "sourceSHA256": {
+    "preview/ThemeSample.tsx": "1922382b1bd075726838323d4cd0b64ad1e0c90118c24fee50b49d77dfb78fcd",
+    "components/theme.tsx": "68b739a38e6dc2faf01fa3a17af95ce47411cb592857df981d8c3d10ec05824c",
+    "components/tokens.css": "d6ae0c876d40e17ba80fd4eed5a5e1ff0a58a8fba7d0b3210906f5738ef57d44",
+    "components/theme-arknights.css": "114f2d877e41a1dd0fe7ccc801166bbf2a67031cb110f05ccdcf779e67f9f5d7",
+    "components/theme-neo-brutalism.css": "0205d7f3bf4167724f2be0ae8dbabbdc5f0adb81dd0f2386c3be02c73cb7ee32",
+    "components/components.tsx": "4926d35115b4b11f7277789d9df9917c5c355cdabd3287fc9c4c55e996611a66",
+    "components/common.css": "246f2e07d84b2d0cd81e94b615850bb4b112aae97c34a9548b190447f84d4c16",
+    "components/Navigation.tsx": "4d77b0a51897c0758529285b7a6672920685ce39c8ee0372b2d282eac1d769c7",
+    "components/Layout.tsx": "d802937b725d7c1783242ecb21d51dcf0aa0497f6e48502ebbc1d98fd63aa8f1",
+    "components/Typography.tsx": "b82a590ec61b9f901c75ebfb5421931240dbb34e710c2eaf2bfa678e4f15f454",
+    "components/themeMetadata.ts": "c795fa74ed742ab9746db058919aac4de2978bbde3dfe7352075e1b9d2628b73"
+  },
+  "images": {
+    "arknights.png": "6787af3f88612fcd6f3550114056d6281ce51a2a3b03c9e38eb5235ab14fdb46",
+    "neo-brutalism.png": "02faec22e585718e7121411cc71dc0efea86376089c94c1ba7195548bdb73255",
+    "rhine.png": "2bbb22a1c6da3afd5f0af079d3977ca4399d1502bba1d908fadb78cd89918049"
+  }
+}

package/components/common.css

@@ -49,7 +49,7 @@
 .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: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 { position:fixed; z-index:41; top:50%; left:50%; transform:translate(-50%,-50%); width:min(480px,calc(100% - 32px)); max-height:calc(100% - 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; }
@@ -64,12 +64,12 @@
 .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-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-popover { overflow-wrap:anywhere; 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-tooltip { overflow:auto; 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); }

package/components/components.tsx

@@ -22,11 +22,11 @@ export function Badge({ tone = 'neutral', children }: { tone?: Tone; children: R
 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;
+export function SelectionCard({ label, selected, onSelectedChange, disabled = false, showIndicator = true, children }: {
+  label: string; selected: boolean; onSelectedChange: (value: boolean) => void; disabled?: boolean; showIndicator?: 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__heading"><strong>{label}</strong><input className={showIndicator ? undefined : 'rhine-sr-only'} type="checkbox" aria-label={label} checked={selected} disabled={disabled} onChange={event => onSelectedChange(event.target.checked)} /></span>
     <span className="rhine-selection__content">{children}</span>
   </label>;
 }

package/components/dialog-settings.css

@@ -0,0 +1,9 @@
+.rhine-dialog--settings { width:min(960px,calc(100% - 32px)); max-height:calc(100% - 32px); container-type:inline-size; }
+.rhine-dialog__settings-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:24px; }
+.rhine-dialog__navigation { min-width:0; padding-bottom:16px; border-bottom:1px solid var(--rhine-line); }
+.rhine-dialog__settings-content { min-width:0; overflow-wrap:anywhere; }
+.rhine-dialog__settings-content :is(input,textarea,select) { max-width:100%; }
+@container (min-width:560px) {
+  .rhine-dialog__settings-grid { grid-template-columns:minmax(160px,1fr) minmax(0,3fr); }
+  .rhine-dialog__navigation { padding:0 24px 0 0; border-bottom:0; border-right:1px solid var(--rhine-line); }
+}

package/components/extensions.css

@@ -4,7 +4,15 @@
 .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__main { flex:1; display:flex; flex-direction:column; min-width:0; min-height:0; }
+.rhine-shell__content-header { flex:none; min-width:0; padding:12px 24px; border-bottom:1px solid var(--rhine-line); background:var(--rhine-surface); color:var(--rhine-ink); }
+.rhine-shell__content-header h1 { flex:1; min-width:0; margin:0; font:var(--rhine-weight-heading) var(--rhine-text-heading)/var(--rhine-leading-heading) var(--rhine-font); overflow-wrap:anywhere; }
+.rhine-shell__content-header .rhine-inline { min-height:44px; }
+.rhine-shell__content-header .rhine-shell__navigation-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-inline-start:auto; }
+.rhine-theme[data-rhine-theme=neo-brutalism] .rhine-shell__content-header { border-bottom:2px solid var(--rhine-ink); }
+.rhine-theme[data-rhine-theme=arknights] .rhine-shell__content-header { border-bottom-color:var(--rhine-green); }
 .rhine-shell__content { flex:1; min-width:0; min-height:0; overflow:auto; padding:24px; overflow-wrap:anywhere; }
+@media(max-width:760px) { .rhine-shell__content-header { padding:8px 16px; } .rhine-shell__content { padding:16px; } }
 .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; }
@@ -36,35 +44,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,16 +1,20 @@
 import './styles.css';
+export { NeutronStarBackdrop } from './NeutronStarBackdrop';
+export type { NeutronStarBackdropProps } from './NeutronStarBackdrop';
 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 { AppShell, AppShellToggle } from './AppShell';
+export type { AppShellProps, AppShellToggleProps, 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, TimelineDetail, StatusTimelineProps } from './StatusTimeline';
+export type { TimelineSegment, TimelineStatus, TimelineDetail, StatusTimelineProps, TimelineLegendItem, TimelineLegendProps } from './StatusTimeline';
+export { StatusTimelineList } from './StatusTimelineList';
+export type { StatusTimelineItem, StatusTimelineListProps } from './StatusTimelineList';
 export { TrendChart, StackedBar } from './Charts';
 export type { ChartPoint, ChartPart, TrendChartProps, StackedBarProps } from './Charts';
 
@@ -22,8 +26,8 @@ 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 { Icon, IconButton, Link, ButtonLink, CopyButton } from './Actions';
+export type { IconName, ButtonLinkProps } from './Actions';
 export { Divider, Stack, Inline, Grid } from './Layout';
 export type { Spacing } from './Layout';
 export { Metric, KeyValue, DataTable, Pagination } from './Data';
@@ -40,3 +44,5 @@ export type { FieldsetProps, FieldError, ErrorSummaryProps } from './FormWorkflo
 
 export { Button, Badge, Surface, SelectionCard, TextField, Tabs, SegmentedControl, Notice, Progress, Skeleton, Disclosure, EmptyState } from './components';
 export type { ButtonProps, Tone, Choice, TabItem } from './components';
+
+export { ThemePicker, ThemePreview, type ThemePickerProps, type ThemePickerOption, type ThemePreviewProps } from './ThemePicker';

package/components/media-parity.css

@@ -1,3 +1,56 @@
-.rhine-media-card__actions { display:flex; flex-wrap:wrap; gap:8px; padding:0 16px 12px; }
-.rhine-media-card__asset { position:absolute; inset:0; }
+/* Media pixels stay neutral; the surrounding controls belong to the host theme. */
+.rhine-media-card { --media-card-border:var(--rhine-line); --media-card-shadow:0 0 transparent; min-width:0; display:flex; flex-direction:column; border:1px solid var(--media-card-border); border-radius:var(--rhine-radius-card); background:var(--rhine-surface); color:var(--rhine-ink); box-shadow:var(--media-card-shadow); }
+.rhine-media-card[data-selected=true] { --media-card-border:var(--rhine-green); box-shadow:0 0 0 2px var(--rhine-green),var(--media-card-shadow, 0 0 transparent); background:var(--rhine-selected); }
+.rhine-media-card__open { display:flex; flex-direction:column; flex:1; width:100%; min-width:0; padding:0; border:0; border-radius:inherit; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
+.rhine-media-card__open:hover:not(:disabled) .rhine-media-card__caption { background:var(--rhine-selected); }
+.rhine-media-card__open:disabled { cursor:default; opacity:.6; }
+.rhine-theme .rhine-media-card__open:focus-visible { outline:3px solid var(--rhine-green); outline-offset:-5px; }
+.rhine-media-card__preview { position:relative; display:flex; align-items:center; justify-content:center; width:100%; overflow:hidden; background:var(--rhine-selected); color:var(--rhine-muted); border-radius:calc(var(--rhine-radius-card) - 2px) calc(var(--rhine-radius-card) - 2px) 0 0; border-bottom:1px solid var(--media-card-border); }
+.rhine-media-card__asset { position:absolute; inset:0; background:var(--rhine-selected); }
 .rhine-media-card__asset:not([hidden]) { display:flex; align-items:center; justify-content:center; }
+.rhine-media-card__asset :is(img,video) { display:block; width:100%; height:100%; object-fit:contain; }
+.rhine-media-card__kind { position:absolute; top:12px; left:12px; padding:4px 8px; background:var(--rhine-surface); color:var(--rhine-ink); border:1px solid var(--rhine-control); border-radius:var(--rhine-radius-control); font:600 var(--rhine-text-caption)/var(--rhine-leading-caption) var(--rhine-mono); }
+.rhine-media-card__caption { display:grid; gap:8px; width:100%; padding:16px; overflow-wrap:anywhere; }
+.rhine-media-card__caption strong { font-size:var(--rhine-text-heading); line-height:var(--rhine-leading-heading); font-weight:var(--rhine-weight-heading); }
+.rhine-media-card__caption>span { font-size:var(--rhine-text-caption); line-height:var(--rhine-leading-caption); color:var(--rhine-muted); }
+.rhine-media-card__footer { display:flex; align-items:center; flex-wrap:wrap; gap:12px; border-top:1px solid var(--media-card-border); padding:8px 16px; }
+.rhine-media-card__footer .rhine-check { min-width:0; overflow-wrap:anywhere; }
+.rhine-media-card__footer .rhine-check label { min-height:44px; }
+.rhine-media-card__actions { display:flex; flex-wrap:wrap; gap:8px; }
+.rhine-media-card__status { display:grid; justify-items:center; gap:12px; padding:40px 16px; font-size:var(--rhine-text-body); }
+.rhine-media-card__status-mark { display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--rhine-control); border-radius:var(--rhine-radius-control); font:24px var(--rhine-mono); }
+.rhine-media-card[data-state=error] .rhine-media-card__status { color:var(--rhine-error); }
+.rhine-theme[data-rhine-theme=neo-brutalism] .rhine-media-card { --media-card-border:var(--rhine-ink); --media-card-shadow:var(--rhine-hard-shadow); border-width:2px; }
+.rhine-theme[data-rhine-theme=neo-brutalism] .rhine-media-card[data-selected=true] { --media-card-shadow:5px 5px 0 var(--rhine-green); }
+.rhine-theme[data-rhine-theme=neo-brutalism] .rhine-media-card__kind { border:2px solid var(--rhine-ink); box-shadow:2px 2px 0 var(--rhine-ink); }
+.rhine-theme[data-rhine-theme=arknights] .rhine-media-card__kind { border-left:3px solid var(--rhine-green); letter-spacing:.06em; }
+.rhine-theme[data-rhine-theme=arknights] .rhine-media-card__caption { border-inline-start:3px solid var(--rhine-control); }
+.rhine-media-viewer { position:fixed; inset:0; z-index:41; width:100%; height:100%; display:flex; flex-direction:column; background:var(--rhine-surface); color:var(--rhine-ink); overflow:auto; }
+.rhine-media-viewer__header { position:sticky; top:0; z-index:1; flex:none; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; padding:16px 24px; background:var(--rhine-surface); border-bottom:1px solid var(--rhine-control); }
+.rhine-media-viewer__header>div { min-width:0; }
+.rhine-media-viewer__header h2 { font-size:var(--rhine-text-section); line-height:var(--rhine-leading-section); overflow-wrap:anywhere; margin:0; }
+.rhine-media-viewer__header p { color:var(--rhine-muted); font-size:var(--rhine-text-caption); margin:4px 0 0; }
+.rhine-media-viewer__actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
+.rhine-media-viewer__actions label { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:var(--rhine-text-caption); }
+.rhine-media-viewer :is(button,select,a):not(.rhine-button) { min-height:44px; min-width:44px; max-width:100%; padding:8px 12px; border:1px solid var(--rhine-control); border-radius:var(--rhine-radius-control); background:var(--rhine-surface); color:var(--rhine-ink); font:inherit; overflow-wrap:anywhere; }
+.rhine-media-viewer button { cursor:pointer; }
+.rhine-media-viewer button:disabled { cursor:default; }
+.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:24px; background:var(--rhine-media-canvas); color:var(--rhine-media-text); color-scheme:dark; }
+.rhine-media-viewer__canvas :is(img,video) { display:block; max-width:100%; max-height:100%; object-fit:contain; }
+.rhine-theme .rhine-media-viewer__canvas :focus-visible { outline:3px solid var(--rhine-media-focus); outline-offset:-3px; }
+.rhine-media-viewer__metadata { min-width:0; overflow:auto; padding:24px; border-left:1px solid var(--rhine-control); background:var(--rhine-surface); overflow-wrap:anywhere; }
+.rhine-media-viewer__metadata h3 { margin:0 0 16px; }
+.rhine-theme[data-rhine-theme=neo-brutalism] .rhine-media-viewer__header { border-bottom:2px solid var(--rhine-ink); }
+.rhine-theme[data-rhine-theme=arknights] .rhine-media-viewer__header { border-bottom-color:var(--rhine-green); }
+@media(max-width:760px) {
+  .rhine-media-viewer__header { padding:12px 16px; }
+  .rhine-media-viewer__body { display:flex; flex-direction:column; overflow:auto; }
+  .rhine-media-viewer__canvas { flex:1 0 220px; padding:16px; }
+  .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-control); }
+}
+
+.rhine-theme[data-rhine-theme=neo-brutalism] .rhine-media-viewer :is(button,select,a):not(.rhine-button) { border:2px solid var(--rhine-ink); box-shadow:2px 2px 0 var(--rhine-ink); }
+.rhine-media-card__open { overflow:hidden; }
+.rhine-media-card:has(.rhine-media-card__footer) .rhine-media-card__open { border-bottom-left-radius:0; border-bottom-right-radius:0; }

package/components/neutron.css

@@ -0,0 +1,53 @@
+.rhine-neutron {
+  position:relative; isolation:isolate; display:flex; flex-direction:column;
+  min-width:0; overflow:hidden; background:var(--rhine-content-bg); color:var(--rhine-content-text);
+}
+.rhine-neutron-art {
+  position:absolute; inset:0; max-height:740px; overflow:hidden; pointer-events:none;
+  mask-image:linear-gradient(to bottom, transparent, #000 8%, #000 72%, transparent);
+  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 8%, #000 72%, transparent);
+  background:radial-gradient(ellipse at 78% 15%, color-mix(in srgb, var(--rhine-green) 14%, transparent), transparent 60%);
+}
+@media (max-width:600px) { .rhine-neutron-art { max-height:620px; } }
+.rhine-neutron[data-rhine-neutron-appearance="original"] { background:#070c18; }
+.rhine-neutron[data-rhine-neutron-appearance="original"] .rhine-neutron-art {
+  background:radial-gradient(ellipse at 78% 15%, #13223e, transparent 52%);
+}
+.rhine-neutron-canvas { position:absolute; inset:0; display:block; width:100%; height:100%; pointer-events:none; }
+.rhine-neutron-fallback {
+  position:absolute; inset:0; display:block;
+  background:radial-gradient(ellipse at 64% 38%, var(--rhine-surface) 0 3%, color-mix(in srgb, var(--rhine-green) 55%, transparent) 4%, transparent 24%);
+}
+.rhine-neutron-fallback i, .rhine-neutron-fallback b {
+  position:absolute; inset:17% 15% 27% 35%; border:1px solid var(--rhine-green); border-radius:50%; transform:rotate(-28deg); opacity:.65;
+}
+.rhine-neutron-fallback b { transform:rotate(48deg); }
+.rhine-neutron[data-rhine-neutron-appearance="original"] .rhine-neutron-fallback {
+  background:radial-gradient(ellipse at 64% 38%, #f0fcff 0 3%, #88c9fc 4%, #86baff55 8%, transparent 24%);
+}
+.rhine-neutron[data-rhine-neutron-appearance="original"] .rhine-neutron-fallback :is(i,b) { border-color:#8fc4ee; }
+.rhine-neutron-art[data-rhine-neutron-rendered="true"] .rhine-neutron-fallback { display:none; }
+.rhine-neutron-art:not([data-rhine-neutron-rendered="true"]) .rhine-neutron-canvas { visibility:hidden; }
+.rhine-neutron-content {
+  position:relative; z-index:1; flex:1; min-width:0;
+  padding-bottom:calc(44px + var(--rhine-space-4) * 2);
+}
+/* Only the artwork is screened; text and controls never pass through a blur filter. */
+.rhine-neutron-content:not(:empty)::before {
+  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
+  background:linear-gradient(90deg, color-mix(in srgb, var(--rhine-content-bg) 92%, transparent), color-mix(in srgb, var(--rhine-content-bg) 54%, transparent));
+}
+.rhine-neutron[data-rhine-neutron-appearance="original"] .rhine-neutron-content { color:#f2f7ff; }
+.rhine-neutron[data-rhine-neutron-appearance="original"] .rhine-neutron-content:not(:empty)::before {
+  background:linear-gradient(90deg, #070c18e6, #070c1870);
+}
+/* Painted controls and surfaces keep their host tokens, including hover and disabled states. */
+.rhine-neutron[data-rhine-neutron-appearance="original"] .rhine-neutron-content :is(.rhine-text--muted,.rhine-field__hint) { color:inherit; opacity:.8; }
+.rhine-neutron[data-rhine-neutron-appearance="original"] .rhine-neutron-content .rhine-logo:not(.rhine-logo--icon),
+.rhine-neutron[data-rhine-neutron-appearance="original"] .rhine-neutron-content .rhine-button--quiet:not(:disabled):not(:hover),
+.rhine-neutron[data-rhine-neutron-appearance="original"] .rhine-neutron-content .rhine-button--quiet[aria-disabled=true]:not(:disabled) { color:inherit; }
+.rhine-neutron[data-rhine-neutron-appearance="original"] .rhine-neutron-content .rhine-button--quiet:focus-visible { outline:none; box-shadow:inset 0 0 0 2px currentColor; }
+.rhine-neutron-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-neutron-controls .rhine-button { max-width:100%; }
+/* Keep the focus ring on the painted control, where its text color retains contrast. */
+.rhine-theme .rhine-neutron .rhine-neutron-controls .rhine-button:focus-visible { outline:2px solid currentColor; outline-offset:-5px; }