@selvajs/ui 6.6.0-beta.15 → 6.6.0-beta.16

package/src/lib/components/viewer/ViewerDock.svelte

@@ -0,0 +1,404 @@
+<script lang="ts">
+	import { MediaQuery } from 'svelte/reactivity';
+	import {
+		Camera,
+		Grid3x3,
+		Layers,
+		LocateFixed,
+		Maximize,
+		Minimize,
+		Moon,
+		Ellipsis,
+		Palette,
+		Ruler,
+		Settings2,
+		Spline,
+		Cuboid
+	} from '@lucide/svelte';
+	import type { CameraProjection, Look, ViewPreset } from '@selvajs/visualization/render';
+	import * as DropdownMenu from '$lib/components/primitives/dropdown-menu/index.js';
+	import type { ViewerMessages } from '$lib/i18n/messages';
+
+	interface Props {
+		t: ViewerMessages;
+		/** Fades the dock out while a host drawer covers the viewer. */
+		hidden?: boolean;
+		showDisplay: boolean;
+		showGrid: boolean;
+		showSceneManager: boolean;
+		showScreenshot: boolean;
+		showFullscreen: boolean;
+		styleOptions: { look: Look; label: string }[];
+		viewPresets: { preset: ViewPreset; label: string }[];
+		renderStyle: Look;
+		nightOn: boolean;
+		edgesVisible: boolean;
+		measureActive: boolean;
+		gridVisible: boolean;
+		sceneManagerOpen: boolean;
+		projection: CameraProjection;
+		isFullscreen: boolean;
+		onSetLook: (look: Look) => void;
+		onToggleNight: () => void;
+		onToggleEdges: () => void;
+		onToggleMeasure: () => void;
+		onToggleGrid: () => void;
+		onToggleSceneManager: () => void;
+		onToggleProjection: () => void;
+		onSetView: (preset: ViewPreset) => void;
+		onFit: () => void;
+		onScreenshot: () => void;
+		onToggleFullscreen: () => void;
+	}
+
+	let {
+		t,
+		hidden = false,
+		showDisplay,
+		showGrid,
+		showSceneManager,
+		showScreenshot,
+		showFullscreen,
+		styleOptions,
+		viewPresets,
+		renderStyle,
+		nightOn,
+		edgesVisible,
+		measureActive,
+		gridVisible,
+		sceneManagerOpen,
+		projection,
+		isFullscreen,
+		onSetLook,
+		onToggleNight,
+		onToggleEdges,
+		onToggleMeasure,
+		onToggleGrid,
+		onToggleSceneManager,
+		onToggleProjection,
+		onSetView,
+		onFit,
+		onScreenshot,
+		onToggleFullscreen
+	}: Props = $props();
+
+	// A hairline pill at the bottom edge is the iOS home indicator on a phone, and swiping it leaves
+	// the app. Touch gets a visible round button instead.
+	const touch = new MediaQuery('(pointer: coarse)');
+	const reducedMotion = new MediaQuery('(prefers-reduced-motion: reduce)');
+
+	const COLLAPSED = $derived(touch.current ? { w: 44, h: 44 } : { w: 72, h: 8 });
+	const EXPANDED_H = $derived(touch.current ? 54 : 46);
+	const PAD = 4;
+
+	let dockEl: HTMLDivElement | undefined = $state();
+	let rowWidth = $state(0);
+	let engaged = $state(false);
+	// Set by an outside press: the dock was dismissed, so it shrinks faster.
+	let dismissed = $state(false);
+	let menusOpen = $state(0);
+	let focusWithin = $state(false);
+	let idleTimer: ReturnType<typeof setTimeout> | undefined;
+
+	const wantOpen = $derived(engaged || menusOpen > 0 || focusWithin);
+
+	// Opening leads: the pill grows first and the buttons pop in behind it. Closing mirrors it: the
+	// buttons fade first, then the pill shrinks. Without the delay on close the row is clipped mid-fade.
+	const EASE = 'cubic-bezier(0.32, 0.72, 0, 1)';
+	const containerStyle = $derived.by(() => {
+		const bottom = touch.current ? 'max(1rem,env(safe-area-inset-bottom))' : '0.75rem';
+		const geometry = wantOpen
+			? `width:${rowWidth + PAD * 2 + 2}px;height:${EXPANDED_H}px;border-radius:14px;padding:${PAD}px`
+			: `width:${COLLAPSED.w}px;height:${COLLAPSED.h}px;border-radius:${touch.current ? 22 : 99}px;padding:0px`;
+		const size = `bottom:${bottom};${geometry}`;
+		if (reducedMotion.current) return size;
+		const ms = wantOpen ? 420 : dismissed ? 130 : 170;
+		const delay = wantOpen || dismissed ? 0 : 20;
+		const props = ['width', 'height', 'border-radius', 'padding'];
+		return `${size};transition:${props.map((p) => `${p} ${ms}ms ${EASE} ${delay}ms`).join(',')},opacity 200ms ease`;
+	});
+	const itemStyle = (index: number) => {
+		if (reducedMotion.current) return `opacity:${wantOpen ? 1 : 0}`;
+		const delay = 110 + index * 35;
+		return wantOpen
+			? `opacity:1;transform:none;transition:opacity 240ms ease ${delay}ms,transform 420ms cubic-bezier(0.34,1.45,0.5,1) ${delay}ms`
+			: 'opacity:0;transform:translateY(6px) scale(0.85);transition:opacity 100ms ease,transform 100ms ease';
+	};
+	// The touch button's settings glyph hands over to the row.
+	const glyphStyle = $derived(
+		`opacity:${touch.current && !wantOpen ? 1 : 0};${reducedMotion.current ? '' : `transition:opacity ${wantOpen ? 100 : 100}ms ease ${wantOpen || dismissed ? 0 : 60}ms`}`
+	);
+
+	function scheduleCollapse(delay = touch.current ? 3500 : 150) {
+		clearTimeout(idleTimer);
+		idleTimer = setTimeout(() => (engaged = false), delay);
+	}
+
+	function engage() {
+		engaged = true;
+		dismissed = false;
+		clearTimeout(idleTimer);
+	}
+
+	function handlePointerMove(event: PointerEvent) {
+		if (!dockEl || touch.current || event.pointerType === 'touch') return;
+		// Orbiting or box-dragging with the button down should never pop the dock open.
+		if (event.buttons) return;
+		const host = dockEl.offsetParent;
+		if (!host || !(event.target instanceof Node) || !host.contains(event.target)) {
+			if (engaged) scheduleCollapse();
+			return;
+		}
+		const r = dockEl.getBoundingClientRect();
+		const near =
+			event.clientY > r.top - 36 && Math.abs(event.clientX - (r.left + r.width / 2)) < 110;
+		if (near) engage();
+		else if (engaged) scheduleCollapse();
+	}
+
+	function handleWindowPointerDown(event: PointerEvent) {
+		if (!engaged || !dockEl || !(event.target instanceof Node)) return;
+		if (!dockEl.contains(event.target)) {
+			clearTimeout(idleTimer);
+			dismissed = true;
+			engaged = false;
+		}
+	}
+
+	function openFromCollapsed() {
+		if (wantOpen) return;
+		engage();
+		if (touch.current) scheduleCollapse();
+	}
+
+	// Any use of the open dock on touch pushes the idle collapse back.
+	function keepAlive() {
+		if (touch.current && engaged) scheduleCollapse();
+	}
+
+	function trackMenu(open: boolean) {
+		menusOpen += open ? 1 : -1;
+		if (!open && !touch.current) scheduleCollapse(250);
+	}
+
+	// Buttons in the row, in order, so the stagger index stays right when some are hidden.
+	const buttons = $derived(
+		[
+			showDisplay && 'look',
+			showSceneManager && 'scene',
+			'measure',
+			'fit',
+			showFullscreen && 'full',
+			'more'
+		].filter(Boolean) as string[]
+	);
+	const idx = (id: string) => buttons.indexOf(id);
+
+	const BTN =
+		'relative grid size-9.5 shrink-0 place-items-center rounded-lg text-muted-foreground outline-none transition-colors hover:bg-hover hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring aria-pressed:text-foreground data-[state=open]:bg-selected data-[state=open]:text-foreground pointer-coarse:size-11';
+	const DOT =
+		'aria-pressed:after:absolute aria-pressed:after:bottom-0.5 aria-pressed:after:size-1 aria-pressed:after:rounded-full aria-pressed:after:bg-primary';
+</script>
+
+<!-- eslint-disable shadcn/no-inline-styles -- the pill animates between measured pixel sizes and staggered per-item delays; no class can express those -->
+
+<svelte:window onpointermove={handlePointerMove} onpointerdown={handleWindowPointerDown} />
+
+<!-- Resting state is a pill; it grows into the row. Only the container is clickable while collapsed. -->
+<div
+	bind:this={dockEl}
+	role="toolbar"
+	aria-label={t.toolsMenu}
+	tabindex="-1"
+	class="shadow-lg backdrop-blur-md absolute left-1/2 z-50 -translate-x-1/2 overflow-hidden border {hidden
+		? 'pointer-events-none opacity-0'
+		: ''} {wantOpen
+		? 'bg-background/70'
+		: touch.current
+			? 'cursor-pointer border-border bg-background/90'
+			: nightOn
+				? 'border-white/50 bg-white/40 hover:bg-white/65 cursor-pointer'
+				: 'cursor-pointer border-border-strong bg-faint-foreground hover:bg-muted-foreground'}"
+	style={containerStyle}
+	onclick={openFromCollapsed}
+	onkeydown={(e) => (e.key === 'Escape' ? (engaged = false) : undefined)}
+	onfocusin={() => (focusWithin = true)}
+	onfocusout={(e) => {
+		if (!dockEl?.contains(e.relatedTarget as Node | null)) focusWithin = false;
+	}}
+	onpointerdown={keepAlive}
+>
+	{#if touch.current}
+		<span
+			class="inset-0 pointer-events-none absolute grid place-items-center text-foreground"
+			style={glyphStyle}
+			aria-hidden="true"
+		>
+			<Settings2 class="size-5" />
+		</span>
+	{/if}
+
+	<div
+		bind:offsetWidth={rowWidth}
+		class="gap-0.5 mx-auto flex w-max items-center"
+		inert={!wantOpen}
+	>
+		{#if showDisplay}
+			<div style={itemStyle(idx('look'))}>
+				<DropdownMenu.Root onOpenChange={trackMenu}>
+					<DropdownMenu.Trigger>
+						{#snippet child({ props })}
+							<button {...props} class={BTN} title={t.display} aria-label={t.display}>
+								<Palette class="size-4.5" />
+							</button>
+						{/snippet}
+					</DropdownMenu.Trigger>
+					<DropdownMenu.Content
+						side="top"
+						align="center"
+						sideOffset={12}
+						variant="glass"
+						class="min-w-52 z-10001 w-auto whitespace-nowrap"
+					>
+						<DropdownMenu.RadioGroup
+							value={renderStyle}
+							onValueChange={(look) => onSetLook(look as Look)}
+						>
+							{#each styleOptions as { look, label } (look)}
+								<DropdownMenu.RadioItem value={look} closeOnSelect={false}>
+									{label}
+								</DropdownMenu.RadioItem>
+							{/each}
+						</DropdownMenu.RadioGroup>
+						<DropdownMenu.Separator />
+						<DropdownMenu.CheckboxItem
+							switch
+							checked={edgesVisible}
+							onCheckedChange={onToggleEdges}
+						>
+							<Spline />
+							{t.edges}
+							<DropdownMenu.Shortcut class="pointer-coarse:hidden">E</DropdownMenu.Shortcut>
+						</DropdownMenu.CheckboxItem>
+					</DropdownMenu.Content>
+				</DropdownMenu.Root>
+			</div>
+		{/if}
+
+		{#if showSceneManager}
+			<div style={itemStyle(idx('scene'))}>
+				<button
+					class="{BTN} {DOT}"
+					title="{t.sceneManager} (S)"
+					aria-label={t.sceneManager}
+					aria-pressed={sceneManagerOpen}
+					onclick={onToggleSceneManager}
+				>
+					<Layers class="size-4.5" />
+				</button>
+			</div>
+		{/if}
+
+		<div style={itemStyle(idx('measure'))}>
+			<button
+				class="{BTN} {DOT}"
+				title="{t.measure} (M)"
+				aria-label={t.measure}
+				aria-pressed={measureActive}
+				onclick={onToggleMeasure}
+			>
+				<Ruler class="size-4.5" />
+			</button>
+		</div>
+
+		<div style={itemStyle(idx('fit'))}>
+			<button class={BTN} title="{t.fitToView} (F)" aria-label="{t.fitToView} (F)" onclick={onFit}>
+				<LocateFixed class="size-4.5" />
+			</button>
+		</div>
+
+		{#if showFullscreen}
+			<div style={itemStyle(idx('full'))}>
+				<button
+					class={BTN}
+					title={isFullscreen ? t.exitFullscreen : t.fullscreen}
+					aria-label={isFullscreen ? t.exitFullscreen : t.fullscreen}
+					onclick={onToggleFullscreen}
+				>
+					{#if isFullscreen}<Minimize class="size-4.5" />{:else}<Maximize class="size-4.5" />{/if}
+				</button>
+			</div>
+		{/if}
+
+		<div style={itemStyle(idx('more'))}>
+			<DropdownMenu.Root onOpenChange={trackMenu}>
+				<DropdownMenu.Trigger>
+					{#snippet child({ props })}
+						<button {...props} class={BTN} title={t.toolsMenu} aria-label={t.toolsMenu}>
+							<Ellipsis class="size-4.5" />
+						</button>
+					{/snippet}
+				</DropdownMenu.Trigger>
+				<DropdownMenu.Content
+					side="top"
+					align="end"
+					sideOffset={12}
+					variant="glass"
+					class="min-w-60 z-10001 w-auto whitespace-nowrap"
+				>
+					<DropdownMenu.Label>{t.views}</DropdownMenu.Label>
+					<div class="gap-1 px-1 pb-1 grid grid-cols-4">
+						{#each viewPresets as { preset, label } (preset)}
+							<DropdownMenu.Item
+								closeOnSelect={false}
+								onSelect={() => onSetView(preset)}
+								variant="chip"
+							>
+								{label}
+							</DropdownMenu.Item>
+						{/each}
+					</div>
+
+					<DropdownMenu.Separator />
+
+					<DropdownMenu.CheckboxItem
+						switch
+						checked={projection === 'orthographic'}
+						onCheckedChange={onToggleProjection}
+					>
+						<Cuboid />
+						{t.switchToOrthographic}
+						<DropdownMenu.Shortcut class="pointer-coarse:hidden">O</DropdownMenu.Shortcut>
+					</DropdownMenu.CheckboxItem>
+
+					{#if showGrid}
+						<DropdownMenu.CheckboxItem switch checked={gridVisible} onCheckedChange={onToggleGrid}>
+							<Grid3x3 />
+							{t.grid}
+							<DropdownMenu.Shortcut class="pointer-coarse:hidden">G</DropdownMenu.Shortcut>
+						</DropdownMenu.CheckboxItem>
+					{/if}
+
+					{#if showDisplay}
+						<DropdownMenu.CheckboxItem switch checked={nightOn} onCheckedChange={onToggleNight}>
+							<Moon />
+							{t.nightMode}
+							<DropdownMenu.Shortcut class="pointer-coarse:hidden">N</DropdownMenu.Shortcut>
+						</DropdownMenu.CheckboxItem>
+					{/if}
+
+					{#if showScreenshot}
+						<DropdownMenu.Separator />
+					{/if}
+
+					{#if showScreenshot}
+						<DropdownMenu.Item onSelect={onScreenshot}>
+							<Camera />
+							{t.screenshot}
+						</DropdownMenu.Item>
+					{/if}
+				</DropdownMenu.Content>
+			</DropdownMenu.Root>
+		</div>
+	</div>
+</div>

package/src/lib/i18n/messages.ts

@@ -41,6 +41,7 @@ export interface ViewerMessages {
 	lookStudio: string;
 	lookShowcase: string;
 	lookNight: string;
+	nightMode: string;
 	lookArctic: string;
 	lookXray: string;
 	lookLineart: string;
@@ -132,6 +133,16 @@ export interface ViewerMessages {
 	/** `{max}` is replaced with the field's character limit. */
 	maxLength: string;
 	invalidFormat: string;
+	/** Trigger label; `{color}` is the current hex value. */
+	colorPick: string;
+	colorArea: string;
+	/** `{s}` and `{v}` are percentages. */
+	colorAreaValue: string;
+	colorHue: string;
+	colorHex: string;
+	colorHexInvalid: string;
+	colorPresets: string;
+	colorEyedropper: string;
 	invalidPattern: string;
 
 	// Geometry input (Rhino only)
@@ -270,6 +281,7 @@ const en: ViewerMessages = {
 	lookStudio: 'Studio',
 	lookShowcase: 'Showcase',
 	lookNight: 'Night',
+	nightMode: 'Night mode',
 	lookArctic: 'Arctic',
 	lookXray: 'X-Ray',
 	lookLineart: 'Line Art',
@@ -342,6 +354,14 @@ const en: ViewerMessages = {
 	fineDragHint: 'Hold Shift to drag finely',
 	maxLength: 'Maximum {max} characters allowed',
 	invalidFormat: 'Invalid format',
+	colorPick: 'Choose color, currently {color}',
+	colorArea: 'Saturation and brightness',
+	colorAreaValue: 'Saturation {s}%, brightness {v}%',
+	colorHue: 'Hue',
+	colorHex: 'Hex color',
+	colorHexInvalid: 'Enter a hex color such as #2f6fd6',
+	colorPresets: 'Presets',
+	colorEyedropper: 'Pick a color from the screen',
 	invalidPattern: 'Invalid validation pattern configured',
 
 	geometryPickAnyOne: 'Pick an object',
@@ -464,6 +484,7 @@ const de: ViewerMessages = {
 	lookStudio: 'Studio',
 	lookShowcase: 'Präsentation',
 	lookNight: 'Nacht',
+	nightMode: 'Nachtmodus',
 	lookArctic: 'Arktis',
 	lookXray: 'Röntgen',
 	lookLineart: 'Strichzeichnung',
@@ -537,6 +558,14 @@ const de: ViewerMessages = {
 	fineDragHint: 'Umschalttaste halten für feine Schritte',
 	maxLength: 'Höchstens {max} Zeichen erlaubt',
 	invalidFormat: 'Ungültiges Format',
+	colorPick: 'Farbe wählen, aktuell {color}',
+	colorArea: 'Sättigung und Helligkeit',
+	colorAreaValue: 'Sättigung {s} %, Helligkeit {v} %',
+	colorHue: 'Farbton',
+	colorHex: 'Hex-Farbe',
+	colorHexInvalid: 'Hex-Farbe eingeben, z. B. #2f6fd6',
+	colorPresets: 'Vorgaben',
+	colorEyedropper: 'Farbe vom Bildschirm aufnehmen',
 	invalidPattern: 'Ungültiges Prüfmuster hinterlegt',
 
 	geometryPickAnyOne: 'Objekt wählen',

package/src/lib/styles/base.css

@@ -1,81 +1,92 @@
 @custom-variant dark (&:where(.dark, .dark *));
 
+/* Surfaces, edges and states share one set of names in both modes; each mode only changes the
+   values. Ratios are WCAG 2.x. The roles and when to use each: docs/contributing/design-system.md. */
 :root {
-	--radius: 0.625rem;
 	--header-h: 3.5rem;
 	--below-header-h: calc(100svh - var(--header-h));
 	--page-px: 1rem;
 	--page-py: 1.75rem;
-	--background: oklch(0.99 0 0);
-	--foreground: oklch(0.22 0 0);
-	/* White, so a card stands apart from background and muted; Group adds a border, since
-	   white on background alone is too close to see. */
+	/* Canvas, then surface (cards, panels), then raised (rows, menus, popovers). Light can't go
+	   lighter than white, so raised is white too and lifts with a border and a shadow instead. */
+	--background: oklch(0.91 0 0);
 	--card: oklch(1 0 0);
+	--raised: oklch(1 0 0);
+	/* Recessed fill for trays, table heads, code and skeletons: darker than the surface around it. */
+	--muted: oklch(0.94 0 0);
+	/* Fill of anything you type into, on a card: the same step as raised, in both modes. The edge
+	   (`--input`) carries the boundary. A recessed fill reads as a disabled control. */
+	--field: var(--raised);
+	--foreground: oklch(0.22 0 0);
 	--card-foreground: oklch(0.22 0 0);
-	--popover: oklch(0.99 0 0);
 	--popover-foreground: oklch(0.22 0 0);
-	/* 4.5:1 as text on background, card and muted, and under white text. */
-	--primary: oklch(0.52 0.07 135);
-	--primary-foreground: oklch(0.985 0 0);
-	--secondary: oklch(0.94 0 0);
-	--secondary-foreground: oklch(0.28 0 0);
-	--muted: oklch(0.95 0 0);
-	--muted-foreground: oklch(0.5 0 0);
-	--accent: oklch(0.93 0 0);
-	--accent-foreground: oklch(0.3 0 0);
-	/* 4.5:1 as small text on background, card and muted, and under white text. */
-	--destructive: oklch(0.55 0.19 27);
-	--destructive-foreground: oklch(0.985 0 0);
-	--border: oklch(0.86 0 0);
-	/* Field borders and unchecked boxes: at least 3:1 against background, card and muted, the
-	   WCAG minimum for a control's boundary. Same for the focus ring, which is drawn opaque. */
-	--input: oklch(0.62 0 0);
+	/* 4.5:1 on every surface. */
+	--muted-foreground: oklch(0.48 0 0);
+	/* Icons, placeholders, disabled text: 3:1 on every surface. */
+	--faint-foreground: oklch(0.6 0 0);
+	/* State overlays, laid over whatever surface is underneath. */
+	--hover: oklch(0 0 0 / 6%);
+	--selected: oklch(0 0 0 / 12%);
+	/* Rest fill of a neutral filled control; its hover is `selected`. */
+	--secondary: oklch(0 0 0 / 7%);
+	--secondary-foreground: oklch(0.22 0 0);
+	/* Outlines and separators. */
+	--border: oklch(0 0 0 / 11%);
+	/* Popovers, outline buttons, dashed drop zones. */
+	--border-strong: oklch(0 0 0 / 24%);
+	/* Edge of anything you type into or toggle, slider tracks included: at least 3:1 against the
+	   surfaces around it, the WCAG minimum for a control's boundary. */
+	--input: oklch(0 0 0 / 44%);
 	--ring: oklch(0.55 0 0);
-	--success: oklch(0.66 0.14 145);
+	--elevation-raised: 0 1px 2px oklch(0 0 0 / 6%);
+	--elevation-popover: 0 8px 24px oklch(0 0 0 / 12%);
+	/* 4.5:1 as text on a card and under its foreground; 3:1 as a fill on every surface. */
+	--primary: #4a7c52;
+	--primary-foreground: oklch(0.985 0 0);
+	--destructive: #c9302d;
+	--destructive-foreground: #fbfbfb;
+	/* 3:1 on every surface, as icons and dots. */
+	--success: #51a556;
 	--success-foreground: oklch(0.99 0 0);
-	--warning: oklch(0.78 0.12 75);
+	--warning: #bd8630;
 	--warning-foreground: oklch(0.25 0.04 75);
-	--info: oklch(0.68 0.11 245);
+	--info: #5399d1;
 	--info-foreground: oklch(0.99 0 0);
 	--chart-1: oklch(0.65 0.14 135);
 	--chart-2: oklch(0.7 0.11 200);
 	--chart-3: oklch(0.6 0.13 260);
 	--chart-4: oklch(0.78 0.13 80);
 	--chart-5: oklch(0.68 0.15 30);
-	--sidebar: oklch(0.96 0 0);
-	--sidebar-foreground: oklch(0.25 0 0);
-	--sidebar-primary: oklch(0.52 0.07 135);
-	--sidebar-primary-foreground: oklch(0.985 0 0);
-	--sidebar-accent: oklch(0.93 0 0);
-	--sidebar-accent-foreground: oklch(0.3 0 0);
-	--sidebar-border: oklch(0.88 0 0);
-	--sidebar-ring: oklch(0.55 0 0);
-	--inputparam: oklch(1 0 0);
-	--outputparam: oklch(1 0 0);
 	/* Scrim behind modal dialogs and drawers. */
 	--overlay: oklch(0 0 0 / 50%);
 }
 
 .dark {
-	--background: oklch(0.17 0 0);
+	--background: oklch(0.155 0 0);
+	--card: oklch(0.235 0 0);
+	--raised: oklch(0.275 0 0);
+	--muted: oklch(0.18 0 0);
 	--foreground: oklch(0.96 0 0);
-	--card: oklch(0.23 0 0);
 	--card-foreground: oklch(0.96 0 0);
-	--popover: oklch(0.23 0 0);
 	--popover-foreground: oklch(0.96 0 0);
-	--primary: oklch(0.74 0.07 135);
-	--primary-foreground: oklch(0.18 0 0);
-	--secondary: oklch(0.3 0 0);
-	--secondary-foreground: oklch(0.96 0 0);
-	--muted: oklch(0.27 0 0);
 	--muted-foreground: oklch(0.72 0 0);
-	--accent: oklch(0.36 0 0);
-	--accent-foreground: oklch(0.92 0 0);
-	--destructive: oklch(0.7 0.17 22);
-	--destructive-foreground: oklch(0.985 0 0);
-	--border: oklch(1 0 0 / 14%);
-	--input: oklch(1 0 0 / 36%);
+	--faint-foreground: oklch(0.56 0 0);
+	--hover: oklch(1 0 0 / 6%);
+	--selected: oklch(1 0 0 / 12%);
+	--secondary: oklch(1 0 0 / 8%);
+	--secondary-foreground: oklch(0.96 0 0);
+	--border: oklch(1 0 0 / 11%);
+	--border-strong: oklch(1 0 0 / 24%);
+	--input: oklch(1 0 0 / 41%);
 	--ring: oklch(0.74 0 0);
+	/* Shadows barely show on a dark canvas, so raised things catch a top highlight instead. */
+	--elevation-raised: inset 0 1px 0 oklch(1 0 0 / 5%);
+	--elevation-popover: 0 8px 24px oklch(0 0 0 / 50%), inset 0 1px 0 oklch(1 0 0 / 6%);
+	--primary: #86ab78;
+	--primary-foreground: oklch(0.18 0 0);
+	/* White text can't reach 4.5:1 on a red light enough to also be text on the dark card. */
+	--destructive: oklch(0.7 0.17 22);
+	--destructive-foreground: oklch(0.18 0 0);
 	--success: oklch(0.74 0.15 145);
 	--success-foreground: oklch(0.18 0.03 145);
 	--warning: oklch(0.8 0.14 75);
@@ -87,41 +98,39 @@
 	--chart-3: oklch(0.68 0.14 260);
 	--chart-4: oklch(0.78 0.14 80);
 	--chart-5: oklch(0.7 0.16 30);
-	--sidebar: oklch(0.21 0 0);
-	--sidebar-foreground: oklch(0.96 0 0);
-	--sidebar-primary: oklch(0.74 0.07 135);
-	--sidebar-primary-foreground: oklch(0.18 0 0);
-	--sidebar-accent: oklch(0.32 0 0);
-	--sidebar-accent-foreground: oklch(0.92 0 0);
-	--sidebar-border: oklch(1 0 0 / 10%);
-	--sidebar-ring: oklch(0.74 0 0);
-	--inputparam: oklch(0.15 0 0);
-	--outputparam: oklch(0.25 0 0);
 }
 
 @theme inline {
-	--radius-sm: calc(var(--radius) - 4px);
-	--radius-md: calc(var(--radius) - 2px);
-	--radius-lg: var(--radius);
-	--radius-xl: calc(var(--radius) + 4px);
+	/* Concentric: an item inside a padded container takes the container's radius minus the
+	   padding. A 12px menu with 4px padding holds 8px items; a 10px control with 2px padding
+	   holds 8px segments. */
+	--radius-sm: 6px;
+	--radius-inner: 8px;
+	--radius-md: 10px;
+	--radius-lg: 12px;
+	--radius-xl: 16px;
 	--color-background: var(--background);
 	--color-foreground: var(--foreground);
 	--color-card: var(--card);
 	--color-card-foreground: var(--card-foreground);
-	--color-popover: var(--popover);
+	--color-raised: var(--raised);
+	--color-popover: var(--raised);
 	--color-popover-foreground: var(--popover-foreground);
-	--color-primary: var(--primary);
-	--color-primary-foreground: var(--primary-foreground);
-	--color-secondary: var(--secondary);
-	--color-secondary-foreground: var(--secondary-foreground);
+	--color-field: var(--field);
 	--color-muted: var(--muted);
 	--color-muted-foreground: var(--muted-foreground);
-	--color-accent: var(--accent);
-	--color-accent-foreground: var(--accent-foreground);
+	--color-faint-foreground: var(--faint-foreground);
+	--color-hover: var(--hover);
+	--color-selected: var(--selected);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
 	--color-destructive: var(--destructive);
 	--color-destructive-foreground: var(--destructive-foreground);
 	--color-overlay: var(--overlay);
 	--color-border: var(--border);
+	--color-border-strong: var(--border-strong);
 	--color-input: var(--input);
 	--color-ring: var(--ring);
 	--color-success: var(--success);
@@ -135,16 +144,8 @@
 	--color-chart-3: var(--chart-3);
 	--color-chart-4: var(--chart-4);
 	--color-chart-5: var(--chart-5);
-	--color-sidebar: var(--sidebar);
-	--color-sidebar-foreground: var(--sidebar-foreground);
-	--color-sidebar-primary: var(--sidebar-primary);
-	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-	--color-sidebar-accent: var(--sidebar-accent);
-	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-	--color-sidebar-border: var(--sidebar-border);
-	--color-sidebar-ring: var(--sidebar-ring);
-	--color-inputparam: var(--inputparam);
-	--color-outputparam: var(--outputparam);
+	--shadow-raised: var(--elevation-raised);
+	--shadow-popover: var(--elevation-popover);
 }
 
 /* Design tokens beyond Tailwind's defaults. Reach for these before an arbitrary value: the