@selvajs/ui 6.6.0-beta.8 → 7.0.0

package/dist/public.d.ts

@@ -14,6 +14,7 @@ export { writeExternalValue, readExternalValue, clearExternalValue, getExternalI
 export * from './schema/defaults';
 export * from './schema/traversal';
 export * from './schema/dynamic-value-list';
+export { visibleInputItems } from './schema/visibility-rules';
 export type { ActionButton } from './types/actionButton';
 export type { SolveFn, SolveResult, SolveDiagnostic } from '@selvajs/solve/shared';
 export { DEFAULT_PRESET_LABELS, type PresetLabels } from './types/presetLabels';

package/dist/public.js

@@ -28,4 +28,5 @@ export { writeExternalValue, readExternalValue, clearExternalValue, getExternalI
 export * from './schema/defaults';
 export * from './schema/traversal';
 export * from './schema/dynamic-value-list';
+export { visibleInputItems } from './schema/visibility-rules';
 export { DEFAULT_PRESET_LABELS } from './types/presetLabels';

package/dist/schema/host-support.d.ts

@@ -0,0 +1,29 @@
+import type { InputLayoutItem, LayoutItem, SchemaInput, UISchema } from '@selvajs/schemas';
+/**
+ * Where a UI runs: `rhino` is the plugin's page inside Rhino, solving in the user's own
+ * Grasshopper; `selva` is the Selva app, solving headless on Rhino.Compute.
+ */
+export type UIHost = 'rhino' | 'selva';
+/**
+ * - `value`: an input or output every host renders.
+ * - `geometry`: a Rhino Get Geometry/Point/Line/Plane input, filled by picking in the viewport.
+ * - `trigger`: a boolean input shown as a button; a press solves once with `true`.
+ * - `unknown`: a layout item from a newer schema than this build knows.
+ */
+export type ElementKind = 'value' | 'geometry' | 'trigger' | 'unknown';
+export declare const HOST_LABELS: Record<UIHost, string>;
+/** The control comes from this, whatever the saved widgetType says: saved ones hold `text`. */
+export declare function isGeometryParamType(paramType: string | undefined): boolean;
+export declare function isTriggerItem(item: LayoutItem): boolean;
+export declare function layoutItemKind(item: LayoutItem, inputs: readonly SchemaInput[]): ElementKind;
+export declare function hostsFor(kind: ElementKind): readonly UIHost[];
+export declare function isSupportedOn(host: UIHost, kind: ElementKind): boolean;
+/**
+ * Inputs the form keeps no value for: geometry lives on the Grasshopper param after a pick, and a
+ * button only sends a press. Value updates and presets skip them; holding a button's `true` would
+ * fire its action again on every solve.
+ */
+export declare function isValuelessInput(item: InputLayoutItem, input: SchemaInput | undefined): boolean;
+export declare function valuelessInputIds(schema: UISchema): Set<string>;
+/** The placed items a host won't render, for the builder's summary of where the UI runs. */
+export declare function unsupportedItems(schema: UISchema, host: UIHost): LayoutItem[];

package/dist/schema/host-support.js

@@ -0,0 +1,97 @@
+// Which elements of a schema each host renders. Worked out from the schema on every read and
+// never stored in it: a stored copy goes stale the way a saved paramType does. Making an element
+// work on Selva later is a change to SUPPORT, with no schema change and no migration.
+import { getGroups } from '@selvajs/schemas';
+const SUPPORT = {
+    value: ['rhino', 'selva'],
+    geometry: ['rhino'],
+    trigger: ['rhino'],
+    unknown: []
+};
+export const HOST_LABELS = { rhino: 'Rhino', selva: 'Selva' };
+const GEOMETRY_PARAM_TYPES = new Set(['geometry', 'point', 'line', 'plane']);
+// Keyed by the schema's own widget unions, so a widget added to the schema fails to compile here
+// until someone decides which hosts render it.
+const INPUT_WIDGETS = {
+    number: true,
+    text: true,
+    dropdown: true,
+    dynamicValueList: true,
+    checkbox: true,
+    file: true,
+    color: true
+};
+const OUTPUT_WIDGETS = {
+    text: true,
+    number: true,
+    file: true,
+    chart: true,
+    image: true,
+    dynamicValueList: true
+};
+const KNOWN_WIDGETS = {
+    input: new Set(Object.keys(INPUT_WIDGETS)),
+    output: new Set(Object.keys(OUTPUT_WIDGETS))
+};
+/** The control comes from this, whatever the saved widgetType says: saved ones hold `text`. */
+export function isGeometryParamType(paramType) {
+    return paramType !== undefined && GEOMETRY_PARAM_TYPES.has(paramType);
+}
+export function isTriggerItem(item) {
+    return (item.type === 'input' &&
+        item.widgetType === 'checkbox' &&
+        item.config?.displayAs === 'button');
+}
+export function layoutItemKind(item, inputs) {
+    if (item.type === 'linebreak')
+        return 'value';
+    if (item.type !== 'input' && item.type !== 'output')
+        return 'unknown';
+    if (item.type === 'input') {
+        const paramType = inputs.find((i) => i.id === item.paramId)?.paramType;
+        if (isGeometryParamType(paramType))
+            return 'geometry';
+    }
+    if (!KNOWN_WIDGETS[item.type].has(item.widgetType))
+        return 'unknown';
+    return isTriggerItem(item) ? 'trigger' : 'value';
+}
+export function hostsFor(kind) {
+    return SUPPORT[kind];
+}
+export function isSupportedOn(host, kind) {
+    return SUPPORT[kind].includes(host);
+}
+/**
+ * Inputs the form keeps no value for: geometry lives on the Grasshopper param after a pick, and a
+ * button only sends a press. Value updates and presets skip them; holding a button's `true` would
+ * fire its action again on every solve.
+ */
+export function isValuelessInput(item, input) {
+    return isGeometryParamType(input?.paramType) || isTriggerItem(item);
+}
+export function valuelessInputIds(schema) {
+    const ids = new Set();
+    for (const input of schema.inputs) {
+        if (isGeometryParamType(input.paramType))
+            ids.add(input.id);
+    }
+    for (const group of getGroups(schema)) {
+        for (const item of group.items ?? []) {
+            if (isTriggerItem(item))
+                ids.add(item.paramId);
+        }
+    }
+    return ids;
+}
+/** The placed items a host won't render, for the builder's summary of where the UI runs. */
+export function unsupportedItems(schema, host) {
+    const items = [];
+    for (const group of getGroups(schema)) {
+        for (const item of group.items ?? []) {
+            if (!isSupportedOn(host, layoutItemKind(item, schema.inputs)))
+                items.push(item);
+        }
+    }
+    return items;
+}

package/dist/schema/option-display.d.ts

@@ -0,0 +1,12 @@
+import type { DropdownWidgetConfig, OptionMedia, UISchema } from '@selvajs/schemas';
+export type OptionDisplay = NonNullable<DropdownWidgetConfig['displayAs']>;
+export declare function resolveOptionDisplay(displayAs: string | undefined, optionCount: number): OptionDisplay;
+export type GlyphSource = {
+    kind: 'icon';
+    d: string;
+} | {
+    kind: 'image';
+    src: string;
+};
+/** What to draw beside an option: its thumbnail, else its icon. */
+export declare function optionGlyph(media: OptionMedia | undefined, assets: UISchema['assets'] | undefined): GlyphSource | undefined;

package/dist/schema/option-display.js

@@ -0,0 +1,29 @@
+// Past this a button row no longer fits a panel column. A computed list can grow past it at
+// runtime, so the row turns back into a dropdown instead of wrapping.
+const MAX_SEGMENTED_OPTIONS = 6;
+export function resolveOptionDisplay(displayAs, optionCount) {
+    switch (displayAs) {
+        case 'checklist':
+        case 'tiles':
+            return displayAs;
+        case 'segmented':
+            return optionCount <= MAX_SEGMENTED_OPTIONS ? 'segmented' : 'dropdown';
+        default:
+            return 'dropdown';
+    }
+}
+// The schema can come from any .gh, so an image reaches <img> only as an inline raster data URI.
+// Anything else could be a URL that makes every viewer's browser call wherever the file points.
+const RASTER_DATA_URI = /^data:image\/(webp|jpeg|png);base64,[A-Za-z0-9+/=]+$/;
+/** What to draw beside an option: its thumbnail, else its icon. */
+export function optionGlyph(media, assets) {
+    if (!media || !assets)
+        return undefined;
+    if (media.image) {
+        const src = assets[media.image]?.img;
+        if (src && RASTER_DATA_URI.test(src))
+            return { kind: 'image', src };
+    }
+    const d = media.icon ? assets[media.icon]?.d : undefined;
+    return d ? { kind: 'icon', d } : undefined;
+}

package/dist/schema/param-exporter.d.ts

@@ -14,6 +14,8 @@ export declare function validateSavedState(savedState: ParameterPreset, currentS
  * Params the current schema no longer has are dropped. That's the same condition
  * `validateSavedState` flags as an error, but the rule is re-derived from the schema here
  * rather than read back off the issue list — nothing couples to how sentinel ids are encoded.
+ * Valueless inputs are dropped too: a preset saved before an input became a button or a
+ * geometry input still holds a value for it.
  */
 export declare function extractLoadableValues(savedState: ParameterPreset, currentSchema: UISchema): Record<string, unknown>;
 export interface PresetLoadResult {
@@ -28,5 +30,6 @@ export interface PresetLoadResult {
 }
 /** Validates and computes the loadable values in one pass, so callers thread one object. */
 export declare function loadPreset(savedState: ParameterPreset, currentSchema: UISchema): PresetLoadResult;
-export declare function exportStateAsJson(savedState: ParameterPreset): void;
+/** Resolves false when the user cancelled the save. */
+export declare function exportStateAsJson(savedState: ParameterPreset): Promise<boolean>;
 export declare function importStateFromJson(file: File): Promise<ParameterPreset>;

package/dist/schema/param-exporter.js

@@ -1,5 +1,7 @@
 import { randomId } from '../utils/randomId';
+import { saveBlob } from '../utils/host-files';
 import { getGroups } from '@selvajs/schemas';
+import { isValuelessInput, valuelessInputIds } from './host-support';
 export function createSavedState(schema, currentValues, metadata) {
     const parameters = [];
     for (const group of getGroups(schema)) {
@@ -8,6 +10,8 @@ export function createSavedState(schema, currentValues, metadata) {
                 continue;
             const value = currentValues[item.paramId];
             const inputDef = schema.inputs.find((i) => i.id === item.paramId);
+            if (isValuelessInput(item, inputDef))
+                continue;
             if (value !== undefined && inputDef) {
                 parameters.push({
                     paramId: item.paramId,
@@ -78,12 +82,15 @@ export function validateSavedState(savedState, currentSchema) {
  * Params the current schema no longer has are dropped. That's the same condition
  * `validateSavedState` flags as an error, but the rule is re-derived from the schema here
  * rather than read back off the issue list — nothing couples to how sentinel ids are encoded.
+ * Valueless inputs are dropped too: a preset saved before an input became a button or a
+ * geometry input still holds a value for it.
  */
 export function extractLoadableValues(savedState, currentSchema) {
     const values = {};
+    const valueless = valuelessInputIds(currentSchema);
     for (const paramState of savedState.parameters) {
         const exists = currentSchema.inputs.some((i) => i.id === paramState.paramId);
-        if (exists) {
+        if (exists && !valueless.has(paramState.paramId)) {
             values[paramState.paramId] = paramState.value;
         }
     }
@@ -99,17 +106,14 @@ export function loadPreset(savedState, currentSchema) {
         canLoad: validation.canLoad
     };
 }
+/** Resolves false when the user cancelled the save. */
 export function exportStateAsJson(savedState) {
     const blob = new Blob([JSON.stringify(savedState, null, 2)], { type: 'application/json' });
     const safeName = savedState.name.replace(/[^a-z0-9]/gi, '_');
     const date = savedState.timestamp.split('T')[0].replace(/-/g, '_');
-    const link = document.createElement('a');
-    link.href = URL.createObjectURL(blob);
     // .slvp = Selva parameter preset. Import still accepts the pre-rename .sps — same JSON,
     // only the writer's extension changed.
-    link.download = `${safeName}_${date}.slvp`;
-    link.click();
-    URL.revokeObjectURL(link.href);
+    return saveBlob(blob, `${safeName}_${date}.slvp`);
 }
 export async function importStateFromJson(file) {
     const state = JSON.parse(await file.text());

package/dist/schema/visibility-rules.d.ts

@@ -1,4 +1,4 @@
-import type { LayoutItem, VisibilityRule, VisibilityCondition, GroupVisibilityCondition, TabConfig } from '@selvajs/schemas';
+import type { InputLayoutItem, LayoutItem, VisibilityRule, VisibilityCondition, GroupVisibilityCondition, TabConfig, UISchema } from '@selvajs/schemas';
 export interface VisibilityResult {
     visible: boolean;
     disabled: boolean;
@@ -20,6 +20,12 @@ export declare function evaluateGroupVisibility(group: {
     items?: LayoutItem[];
 }, values: Record<string, unknown>): boolean;
 export declare function isTabVisible(tab: TabConfig, values: Record<string, unknown>): boolean;
+/**
+ * The input items the form shows for these values: each passes its own condition, inside a
+ * shown group and, when tabbed, a shown tab. For a host that repeats the form back, such as a
+ * summary before a commit, without re-deriving the renderer's rules.
+ */
+export declare function visibleInputItems(schema: UISchema, values: Record<string, unknown>): InputLayoutItem[];
 /**
  * A linebreak is always "visible" but renders as a divider only, so a group left with
  * nothing but separators counts as empty.

package/dist/schema/visibility-rules.js

@@ -106,6 +106,23 @@ export function evaluateGroupVisibility(group, values) {
 export function isTabVisible(tab, values) {
     return (tab.visible !== false && tab.groups.some((group) => evaluateGroupVisibility(group, values)));
 }
+/**
+ * The input items the form shows for these values: each passes its own condition, inside a
+ * shown group and, when tabbed, a shown tab. For a host that repeats the form back, such as a
+ * summary before a commit, without re-deriving the renderer's rules.
+ */
+export function visibleInputItems(schema, values) {
+    const layout = schema?.layout;
+    const groups = layout?.type === 'tabbed'
+        ? (layout.tabs ?? []).filter((t) => isTabVisible(t, values)).flatMap((t) => t.groups ?? [])
+        : layout?.type === 'flat'
+            ? (layout.groups ?? [])
+            : [];
+    return groups
+        .filter((g) => evaluateGroupVisibility(g, values))
+        .flatMap((g) => g.items ?? [])
+        .filter((i) => i.type === 'input' && evaluateVisibility(i, values).visible);
+}
 /**
  * A linebreak is always "visible" but renders as a divider only, so a group left with
  * nothing but separators counts as empty.

package/dist/styles/base.css

@@ -1,77 +1,95 @@
+@import '@fontsource-variable/hanken-grotesk';
+
 @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);
-	--card: oklch(0.985 0 0);
-	--card-foreground: oklch(0.22 0 0);
-	--popover: oklch(0.99 0 0);
-	--popover-foreground: oklch(0.22 0 0);
-	--primary: oklch(0.57 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);
+	/* 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.
+	   Values follow stock shadcn neutral. */
+	--background: oklch(0.985 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.97 0 0);
+	/* Fill of anything you type into, on a card: recessed, the same step as muted, in both modes.
+	   The edge (`--input`) carries the boundary. */
+	--field: var(--muted);
+	--foreground: oklch(0.145 0 0);
+	--card-foreground: oklch(0.145 0 0);
+	--popover-foreground: oklch(0.145 0 0);
+	/* 4.5:1 on every surface. */
 	--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);
-	--ring: oklch(0.55 0 0);
-	--success: oklch(0.66 0.14 145);
+	/* 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 / 4%);
+	--selected: oklch(0 0 0 / 8%);
+	/* Rest fill of a neutral filled control; its hover is `selected`. */
+	--secondary: oklch(0.97 0 0);
+	--secondary-foreground: oklch(0.205 0 0);
+	/* Outlines and separators. */
+	--border: oklch(0 0 0 / 8%);
+	/* Popovers, outline buttons, dashed drop zones. */
+	--border-strong: oklch(0 0 0 / 14%);
+	/* Edge of anything you type into or toggle, slider tracks included. Softer than the 3:1 WCAG
+	   boundary minimum in both modes: the recessed field fill carries the rest of the boundary. */
+	--input: oklch(0 0 0 / 10%);
+	--ring: oklch(0.708 0 0);
+	--elevation-raised: 0 1px 2px oklch(0 0 0 / 5%);
+	--elevation-popover: 0 8px 24px oklch(0 0 0 / 10%);
+	/* 4.5:1 as text on a card and under its foreground; 3:1 as a fill on every surface. */
+	--primary: oklch(0.205 0 0);
+	--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.57 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);
-	--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);
+	--background: oklch(0.145 0 0);
+	--card: oklch(0.205 0 0);
+	--raised: oklch(0.24 0 0);
+	--muted: oklch(0.269 0 0);
+	--foreground: oklch(0.985 0 0);
+	--card-foreground: oklch(0.985 0 0);
+	--popover-foreground: oklch(0.985 0 0);
+	--muted-foreground: oklch(0.708 0 0);
+	--faint-foreground: oklch(0.556 0 0);
+	--hover: oklch(1 0 0 / 6%);
+	--selected: oklch(1 0 0 / 10%);
+	--secondary: oklch(0.269 0 0);
+	--secondary-foreground: oklch(0.985 0 0);
+	--border: oklch(1 0 0 / 10%);
+	--border-strong: oklch(1 0 0 / 18%);
+	--input: oklch(1 0 0 / 15%);
+	--ring: oklch(0.556 0 0);
+	/* Shadows barely show on a dark canvas, so raised things lean on the border instead. */
+	--elevation-raised: none;
+	--elevation-popover: 0 8px 24px oklch(0 0 0 / 50%);
+	--primary: oklch(0.922 0 0);
+	--primary-foreground: oklch(0.205 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.985 0 0);
-	--border: oklch(1 0 0 / 14%);
-	--input: oklch(1 0 0 / 36%);
-	--ring: oklch(0.74 0 0);
+	--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);
@@ -83,41 +101,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);
@@ -131,21 +147,15 @@
 	--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
    design-system lint rejects `text-[10px]`, `max-h-[85dvh]` and the like. */
 @theme {
+	/* Hanken Grotesk (OFL), self-hosted via Fontsource: the plugin UI runs offline from the .gha. */
+	--font-sans: 'Hanken Grotesk Variable', ui-sans-serif, system-ui, sans-serif;
 	/* Type tags, counters and other dense labels. */
 	--text-2xs: 0.625rem;
 	--text-2xs--line-height: calc(0.875 / 0.625);

package/dist/utils/color-space.d.ts

@@ -0,0 +1,21 @@
+export interface Rgb {
+    r: number;
+    g: number;
+    b: number;
+}
+/** h in [0, 360), s and v in [0, 1]. */
+export interface Hsv {
+    h: number;
+    s: number;
+    v: number;
+}
+/** Accepts `#rgb`, `#rrggbb` and the same without `#`. Returns lowercase `#rrggbb`, or null. */
+export declare function normalizeHex(input: string): string | null;
+export declare function hexToRgb(hex: string): Rgb | null;
+export declare function rgbToHex({ r, g, b }: Rgb): string;
+export declare function rgbToHsv({ r, g, b }: Rgb): Hsv;
+export declare function hsvToRgb({ h, s, v }: Hsv): Rgb;
+export declare const hexToHsv: (hex: string) => Hsv | null;
+export declare const hsvToHex: (hsv: Hsv) => string;
+/** WCAG contrast ratio between two hex colors, 1 to 21. Null if either isn't a hex color. */
+export declare function contrastRatio(a: string, b: string): number | null;

package/dist/utils/color-space.js

@@ -0,0 +1,90 @@
+const clamp = (n, min, max) => Math.min(max, Math.max(min, n));
+/** Accepts `#rgb`, `#rrggbb` and the same without `#`. Returns lowercase `#rrggbb`, or null. */
+export function normalizeHex(input) {
+    const raw = input.trim().replace(/^#/, '');
+    if (/^[0-9a-f]{3}$/i.test(raw)) {
+        return `#${raw
+            .split('')
+            .map((c) => c + c)
+            .join('')
+            .toLowerCase()}`;
+    }
+    if (/^[0-9a-f]{6}$/i.test(raw))
+        return `#${raw.toLowerCase()}`;
+    return null;
+}
+export function hexToRgb(hex) {
+    const normalized = normalizeHex(hex);
+    if (!normalized)
+        return null;
+    return {
+        r: parseInt(normalized.slice(1, 3), 16),
+        g: parseInt(normalized.slice(3, 5), 16),
+        b: parseInt(normalized.slice(5, 7), 16)
+    };
+}
+export function rgbToHex({ r, g, b }) {
+    const channel = (n) => clamp(Math.round(n), 0, 255).toString(16).padStart(2, '0');
+    return `#${channel(r)}${channel(g)}${channel(b)}`;
+}
+export function rgbToHsv({ r, g, b }) {
+    const rn = r / 255;
+    const gn = g / 255;
+    const bn = b / 255;
+    const max = Math.max(rn, gn, bn);
+    const delta = max - Math.min(rn, gn, bn);
+    let h = 0;
+    if (delta !== 0) {
+        if (max === rn)
+            h = ((gn - bn) / delta) % 6;
+        else if (max === gn)
+            h = (bn - rn) / delta + 2;
+        else
+            h = (rn - gn) / delta + 4;
+        h *= 60;
+        if (h < 0)
+            h += 360;
+    }
+    return { h, s: max === 0 ? 0 : delta / max, v: max };
+}
+export function hsvToRgb({ h, s, v }) {
+    const c = v * s;
+    const hp = (((h % 360) + 360) % 360) / 60;
+    const x = c * (1 - Math.abs((hp % 2) - 1));
+    const [r1, g1, b1] = hp < 1
+        ? [c, x, 0]
+        : hp < 2
+            ? [x, c, 0]
+            : hp < 3
+                ? [0, c, x]
+                : hp < 4
+                    ? [0, x, c]
+                    : hp < 5
+                        ? [x, 0, c]
+                        : [c, 0, x];
+    const m = v - c;
+    return { r: (r1 + m) * 255, g: (g1 + m) * 255, b: (b1 + m) * 255 };
+}
+export const hexToHsv = (hex) => {
+    const rgb = hexToRgb(hex);
+    return rgb ? rgbToHsv(rgb) : null;
+};
+export const hsvToHex = (hsv) => rgbToHex(hsvToRgb(hsv));
+/** WCAG relative luminance of an sRGB color. */
+function luminance({ r, g, b }) {
+    const lin = (c) => {
+        const n = c / 255;
+        return n <= 0.04045 ? n / 12.92 : Math.pow((n + 0.055) / 1.055, 2.4);
+    };
+    return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+}
+/** WCAG contrast ratio between two hex colors, 1 to 21. Null if either isn't a hex color. */
+export function contrastRatio(a, b) {
+    const ra = hexToRgb(a);
+    const rb = hexToRgb(b);
+    if (!ra || !rb)
+        return null;
+    const la = luminance(ra);
+    const lb = luminance(rb);
+    return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05);
+}