@selvajs/ui 6.6.0-beta.9 → 7.0.1-beta.0

package/dist/styles/base.css

@@ -1,80 +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);
-	/* 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.
+	   Values follow stock shadcn neutral. */
+	--background: oklch(0.985 0 0);
 	--card: oklch(1 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);
+	--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.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);
-	--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);
@@ -86,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);
@@ -134,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);
@@ -183,6 +190,13 @@
 	border-radius: inherit;
 }
 
+/* A phone, upright or on its side, gives the model the height a full desktop bar would take. */
+@media (max-width: 39.999rem), (pointer: coarse) and (max-height: 500px) {
+	:root {
+		--header-h: 3rem;
+	}
+}
+
 /* Phones keep a narrower gutter: at 390px every 8px of side padding is 2% of the width. */
 @media (min-width: 40rem) {
 	:root {

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);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@selvajs/ui",
-  "version": "6.6.0-beta.9",
+  "version": "7.0.1-beta.0",
   "description": "Shared UI components and utilities for Selva applications",
   "license": "MIT",
   "author": "VektorNode",
@@ -31,17 +31,20 @@
     ".": {
       "selva-source": {
         "types": "./dist/index.d.ts",
-        "svelte": "./dist/index.js"
+        "svelte": "./src/lib/index.ts"
       },
       "types": "./dist/public.d.ts",
       "svelte": "./dist/public.js"
     },
     "./external": {
+      "selva-source": {
+        "types": "./dist/external/storage.d.ts",
+        "svelte": "./src/lib/external/storage.ts"
+      },
       "types": "./dist/external/storage.d.ts",
       "svelte": "./dist/external/storage.js"
     },
-    "./styles/base.css": "./src/lib/styles/base.css",
-    "./styles/themes/*": "./src/lib/styles/themes/*"
+    "./styles/base.css": "./src/lib/styles/base.css"
   },
   "files": [
     "dist",
@@ -58,11 +61,11 @@
     "bits-ui": "^2.18.0",
     "svelte": "^5",
     "tailwind-variants": "^3.3.1",
-    "three": "^0.186.1",
-    "@selvajs/compute": "^5.0.0-beta.4",
-    "@selvajs/solve": "^2.0.0-beta.6",
-    "@selvajs/schemas": "^5.3.0-beta.1",
-    "@selvajs/visualization": "^1.6.0-beta.2"
+    "three": "^0.187.0",
+    "@selvajs/compute": "^5.0.0",
+    "@selvajs/solve": "^2.0.0",
+    "@selvajs/visualization": "^1.6.1-beta.0",
+    "@selvajs/schemas": "^5.3.0"
   },
   "peerDependenciesMeta": {
     "three": {
@@ -71,35 +74,40 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.8.0",
-    "@iconify/svelte": "^5.2.1",
-    "@lucide/svelte": "^1.48.0",
+    "@fontsource-variable/hanken-grotesk": "^5.3.0",
+    "@iconify/svelte": "^5.2.4",
+    "@lucide/svelte": "^1.66.0",
     "clsx": "^2.1.1",
     "mode-watcher": "^1.1.0",
     "paneforge": "^1.0.2",
-    "svelte-sonner": "^1.2.1",
+    "svelte-sonner": "^1.2.2",
     "tailwind-merge": "^3.7.0",
     "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
     "@internationalized/date": "^3.12.4",
-    "@sveltejs/kit": "2.70.3",
+    "@sveltejs/kit": "3.1.1",
     "@sveltejs/vite-plugin-svelte": "^7.3.1",
-    "@types/three": "^0.186.0",
-    "bits-ui": "^2.19.3",
+    "@types/three": "^0.187.0",
+    "bits-ui": "^2.20.2",
     "rimraf": "^6.1.3",
-    "svelte": "5.57.1",
+    "svelte": "5.57.3",
     "tailwind-variants": "^3.3.1",
-    "vitest": "^5.0.2",
-    "@selvajs/compute": "5.0.0-beta.4",
+    "vitest": "^5.0.5",
+    "@selvajs/compute": "5.0.0",
+    "@selvajs/schemas": "5.3.0",
+    "@selvajs/solve": "2.0.0",
     "@selvajs/config": "0.0.4",
-    "@selvajs/schemas": "5.3.0-beta.1",
-    "@selvajs/visualization": "1.6.0-beta.2",
-    "@selvajs/solve": "2.0.0-beta.6"
+    "@selvajs/visualization": "1.6.1-beta.0"
+  },
+  "imports": {
+    "#lib": "./src/lib/index.js",
+    "#lib/*": "./src/lib/*"
   },
   "scripts": {
-    "predev": "node ../../scripts/sync-shared-assets.js",
+    "predev": "node ../../scripts/develop/sync-shared-assets.js",
     "dev": "vite dev",
-    "prebuild": "node ../../scripts/sync-shared-assets.js",
+    "prebuild": "node ../../scripts/develop/sync-shared-assets.js",
     "build": "rimraf dist && pnpm prepack",
     "build:fast": "svelte-kit sync && svelte-package",
     "build:watch": "svelte-kit sync && svelte-package --watch",

package/src/lib/components/ErrorScreen.svelte

@@ -3,7 +3,7 @@
 	import * as Card from './primitives/card/index.js';
 	import { Button } from './primitives/button/index.js';
 	import Callout from './primitives/Callout.svelte';
-	import { getLocaleContext } from '$lib/i18n/localeContext.svelte';
+	import { getLocaleContext } from '#lib/i18n/localeContext.svelte.js';
 
 	interface Props {
 		status?: number;