@misoto22/design 0.8.0 → 0.9.0

package/dist/index.js

@@ -28,8 +28,10 @@ export * from "./components/EmptyState/EmptyState.js";
 export * from "./components/ErrorState/ErrorState.js";
 export * from "./components/Toast/Toast.js";
 export * from "./components/Field/Field.js";
+export * from "./components/ColorPicker/ColorPicker.js";
 export * from "./components/Combobox/Combobox.js";
 export * from "./components/DatePicker/DatePicker.js";
+export * from "./components/NumberField/NumberField.js";
 export * from "./components/Slider/Slider.js";
 export * from "./components/ToggleGroup/ToggleGroup.js";
 export * from "./components/Input/Input.js";
@@ -53,6 +55,7 @@ export * from "./components/Collapsible/Collapsible.js";
 export * from "./components/Breadcrumb/Breadcrumb.js";
 export * from "./components/Pagination/Pagination.js";
 export * from "./components/NavItem/NavItem.js";
+export * from "./components/Sidebar/Sidebar.js";
 export * from "./components/Card/Card.js";
 export * from "./components/Table/Table.js";
 export * from "./components/DescriptionList/DescriptionList.js";

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["/**\n * @misoto22/design — public entry.\n *\n * Components export from here; the look ships separately as CSS:\n *\n *   import '@misoto22/design/styles.css'    // compiled Tailwind + tokens + fonts\n *\n * or, for an app that already compiles Tailwind itself, the portable layers on\n * their own:\n *\n *   import '@misoto22/design/tokens.css'    // primitives, plus data-mode and data-density\n *   import '@misoto22/design/semantic.css'  // roles\n *   import '@misoto22/design/themes.css'    // the other six theming axes\n *   import '@misoto22/design/keyframes.css' // motion\n *\n * All four, or the theming attributes are attributes that do nothing: every\n * axis but `data-mode` and `data-density` is declared only in `themes.css`, and\n * an app that skips it writes `data-radius=\"sharp\"` and gets no error, no\n * warning and no corner.\n *\n * Everything below is a consumer contract. Adding an export is cheap; changing\n * or removing one is a breaking change (DESIGN-API-001).\n */\n\n// ─── Utilities ───\nexport * from './lib/overlay-container'\n\n// ─── Tokens ───\nexport { BRAND } from './tokens/brand'\nexport type { BrandColor } from './tokens/brand'\n\n// ─── Utilities ───\nexport { cn } from './lib/cn'\nexport { CONTROL_BASE, CONTROL_BORDER, isInvalid } from './lib/control'\nexport { useSelectionIndicator } from './lib/useSelectionIndicator'\nexport type { IndicatorStyle } from './lib/useSelectionIndicator'\n\n// ─── Actions ───\nexport * from './components/Button/Button'\nexport * from './components/FloatingIconButton/FloatingIconButton'\n\n// ─── Display ───\nexport * from './components/Text/Text'\nexport * from './components/Heading/Heading'\nexport * from './components/Code/Code'\nexport * from './components/CodeBlock/CodeBlock'\nexport * from './components/Markdown/Markdown'\nexport * from './components/Badge/Badge'\nexport * from './components/Tag/Tag'\nexport * from './components/Kbd/Kbd'\nexport * from './components/Avatar/Avatar'\nexport * from './components/StatusDot/StatusDot'\nexport * from './components/StatusPill/StatusPill'\nexport * from './components/LinkArrow/LinkArrow'\nexport * from './components/Separator/Separator'\nexport * from './components/Timestamp/Timestamp'\nexport * from './components/FigureBand/FigureBand'\n\n// ─── Feedback ───\nexport * from './components/Spinner/Spinner'\nexport * from './components/Skeleton/Skeleton'\nexport * from './components/Progress/Progress'\nexport * from './components/Alert/Alert'\nexport * from './components/EmptyState/EmptyState'\nexport * from './components/ErrorState/ErrorState'\nexport * from './components/Toast/Toast'\n\n// ─── Forms ───\nexport * from './components/Field/Field'\nexport * from './components/Combobox/Combobox'\nexport * from './components/DatePicker/DatePicker'\nexport * from './components/Slider/Slider'\nexport * from './components/ToggleGroup/ToggleGroup'\nexport * from './components/Input/Input'\nexport * from './components/Textarea/Textarea'\nexport * from './components/Select/Select'\nexport * from './components/NativeSelect/NativeSelect'\nexport * from './components/Checkbox/Checkbox'\nexport * from './components/RadioGroup/RadioGroup'\nexport * from './components/Switch/Switch'\n\n// ─── Overlays ───\nexport * from './components/Dialog/Dialog'\nexport * from './components/DropdownMenu/DropdownMenu'\nexport * from './components/Tooltip/Tooltip'\nexport * from './components/Popover/Popover'\nexport * from './components/Sheet/Sheet'\nexport * from './components/ContextMenu/ContextMenu'\nexport * from './components/Command/Command'\nexport * from './components/SearchableMenu/SearchableMenu'\n\n// ─── Navigation ───\nexport * from './components/Tabs/Tabs'\nexport * from './components/Accordion/Accordion'\nexport * from './components/Collapsible/Collapsible'\nexport * from './components/Breadcrumb/Breadcrumb'\nexport * from './components/Pagination/Pagination'\nexport * from './components/NavItem/NavItem'\n\n// ─── Surfaces / layout ───\nexport * from './components/Card/Card'\nexport * from './components/Table/Table'\nexport * from './components/DescriptionList/DescriptionList'\nexport * from './components/Toolbar/Toolbar'\nexport * from './components/AspectRatio/AspectRatio'\nexport * from './components/Calendar/Calendar'\nexport * from './components/ScrollArea/ScrollArea'\nexport * from './components/AppShell/AppShell'\nexport * from './components/Article/Article'\nexport * from './components/Diagram/Diagram'\nexport * from './components/Steps/Steps'\n"],"mappings":"AAyBA,cAAc;AAGd,SAAS,aAAa;AAItB,SAAS,UAAU;AACnB,SAAS,cAAc,gBAAgB,iBAAiB;AACxD,SAAS,6BAA6B;AAItC,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["/**\n * @misoto22/design — public entry.\n *\n * Components export from here; the look ships separately as CSS:\n *\n *   import '@misoto22/design/styles.css'    // compiled Tailwind + tokens + fonts\n *\n * or, for an app that already compiles Tailwind itself, the portable layers on\n * their own:\n *\n *   import '@misoto22/design/tokens.css'    // primitives, plus data-mode and data-density\n *   import '@misoto22/design/semantic.css'  // roles\n *   import '@misoto22/design/themes.css'    // the other six theming axes\n *   import '@misoto22/design/keyframes.css' // motion\n *\n * All four, or the theming attributes are attributes that do nothing: every\n * axis but `data-mode` and `data-density` is declared only in `themes.css`, and\n * an app that skips it writes `data-radius=\"sharp\"` and gets no error, no\n * warning and no corner.\n *\n * Everything below is a consumer contract. Adding an export is cheap; changing\n * or removing one is a breaking change (DESIGN-API-001).\n */\n\n// ─── Utilities ───\nexport * from './lib/overlay-container'\n\n// ─── Tokens ───\nexport { BRAND } from './tokens/brand'\nexport type { BrandColor } from './tokens/brand'\n\n// ─── Utilities ───\nexport { cn } from './lib/cn'\nexport { CONTROL_BASE, CONTROL_BORDER, isInvalid } from './lib/control'\nexport { useSelectionIndicator } from './lib/useSelectionIndicator'\nexport type { IndicatorStyle } from './lib/useSelectionIndicator'\n\n// ─── Actions ───\nexport * from './components/Button/Button'\nexport * from './components/FloatingIconButton/FloatingIconButton'\n\n// ─── Display ───\nexport * from './components/Text/Text'\nexport * from './components/Heading/Heading'\nexport * from './components/Code/Code'\nexport * from './components/CodeBlock/CodeBlock'\nexport * from './components/Markdown/Markdown'\nexport * from './components/Badge/Badge'\nexport * from './components/Tag/Tag'\nexport * from './components/Kbd/Kbd'\nexport * from './components/Avatar/Avatar'\nexport * from './components/StatusDot/StatusDot'\nexport * from './components/StatusPill/StatusPill'\nexport * from './components/LinkArrow/LinkArrow'\nexport * from './components/Separator/Separator'\nexport * from './components/Timestamp/Timestamp'\nexport * from './components/FigureBand/FigureBand'\n\n// ─── Feedback ───\nexport * from './components/Spinner/Spinner'\nexport * from './components/Skeleton/Skeleton'\nexport * from './components/Progress/Progress'\nexport * from './components/Alert/Alert'\nexport * from './components/EmptyState/EmptyState'\nexport * from './components/ErrorState/ErrorState'\nexport * from './components/Toast/Toast'\n\n// ─── Forms ───\nexport * from './components/Field/Field'\nexport * from './components/ColorPicker/ColorPicker'\nexport * from './components/Combobox/Combobox'\nexport * from './components/DatePicker/DatePicker'\nexport * from './components/NumberField/NumberField'\nexport * from './components/Slider/Slider'\nexport * from './components/ToggleGroup/ToggleGroup'\nexport * from './components/Input/Input'\nexport * from './components/Textarea/Textarea'\nexport * from './components/Select/Select'\nexport * from './components/NativeSelect/NativeSelect'\nexport * from './components/Checkbox/Checkbox'\nexport * from './components/RadioGroup/RadioGroup'\nexport * from './components/Switch/Switch'\n\n// ─── Overlays ───\nexport * from './components/Dialog/Dialog'\nexport * from './components/DropdownMenu/DropdownMenu'\nexport * from './components/Tooltip/Tooltip'\nexport * from './components/Popover/Popover'\nexport * from './components/Sheet/Sheet'\nexport * from './components/ContextMenu/ContextMenu'\nexport * from './components/Command/Command'\nexport * from './components/SearchableMenu/SearchableMenu'\n\n// ─── Navigation ───\nexport * from './components/Tabs/Tabs'\nexport * from './components/Accordion/Accordion'\nexport * from './components/Collapsible/Collapsible'\nexport * from './components/Breadcrumb/Breadcrumb'\nexport * from './components/Pagination/Pagination'\nexport * from './components/NavItem/NavItem'\nexport * from './components/Sidebar/Sidebar'\n\n// ─── Surfaces / layout ───\nexport * from './components/Card/Card'\nexport * from './components/Table/Table'\nexport * from './components/DescriptionList/DescriptionList'\nexport * from './components/Toolbar/Toolbar'\nexport * from './components/AspectRatio/AspectRatio'\nexport * from './components/Calendar/Calendar'\nexport * from './components/ScrollArea/ScrollArea'\nexport * from './components/AppShell/AppShell'\nexport * from './components/Article/Article'\nexport * from './components/Diagram/Diagram'\nexport * from './components/Steps/Steps'\n"],"mappings":"AAyBA,cAAc;AAGd,SAAS,aAAa;AAItB,SAAS,UAAU;AACnB,SAAS,cAAc,gBAAgB,iBAAiB;AACxD,SAAS,6BAA6B;AAItC,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}

package/dist/lib/color.d.ts

@@ -0,0 +1,80 @@
+/**
+ * CSS colour maths, with no dependency and no DOM.
+ *
+ * Adapted from DialKit (https://github.com/joshpuckett/dialkit), MIT licensed:
+ *
+ *   Copyright (c) 2026 Josh Puckett
+ *
+ *   Permission is hereby granted, free of charge, to any person obtaining a
+ *   copy of this software and associated documentation files (the "Software"),
+ *   to deal in the Software without restriction, including without limitation
+ *   the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ *   and/or sell copies of the Software, and to permit persons to whom the
+ *   Software is furnished to do so, subject to the following conditions:
+ *
+ *   The above copyright notice and this permission notice shall be included in
+ *   all copies or substantial portions of the Software.
+ *
+ * The working space is OKLCH, and that is the substantive choice here rather
+ * than an implementation detail. A picker built on HSV hands a reader two
+ * colours at the same "lightness" where one of them is visibly darker, because
+ * HSV's lightness is a property of the numbers rather than of the eye. Every
+ * decision in `ColorPicker` — where the handle sits, what the hue strip looks
+ * like at this lightness, which colours are reachable at all — depends on a
+ * space that is perceptually uniform, and OKLCH is the one CSS ships.
+ *
+ * The matrices are the CSS Color 4 reference implementation's, D65.
+ * https://www.w3.org/TR/css-color-4/#color-conversion-code
+ */
+/** A colour in OKLCH: lightness 0–1, chroma, hue in degrees, alpha 0–1. */
+interface Color {
+    l: number;
+    c: number;
+    h: number;
+    a: number;
+}
+/** The notations this module reads and writes. */
+type ColorFormat = 'hex' | 'oklch' | 'p3';
+/** The two RGB gamuts a colour can be fitted to. */
+type ColorSpace = 'srgb' | 'p3';
+type Triple = [number, number, number];
+declare const clamp: (n: number, min?: number, max?: number) => number;
+declare const wrapHue: (h: number) => number;
+/** Gamma-encoded RGB in 0–1 to OKLCH. */
+declare function rgbToColor(rgb: Triple, a?: number, space?: ColorSpace): Color;
+/** OKLCH to gamma-encoded RGB in 0–1. May fall outside it — see `fitGamut`. */
+declare function colorToRgb(color: Color, space?: ColorSpace): Triple;
+declare function inGamut(color: Color, space?: ColorSpace): boolean;
+/**
+ * Brings a colour inside a gamut by giving up CHROMA, and nothing else.
+ *
+ * The naive fix is to clip each channel at 0 and 1, which changes the hue and
+ * the lightness together — a vivid blue clipped that way comes back purple and
+ * darker. Bisecting on chroma keeps both, so what a reader loses is only the
+ * saturation the display could never have shown them.
+ */
+declare function fitGamut(color: Color, space?: ColorSpace): Color;
+/** The most chroma a gamut holds at this lightness and hue — the plane's edge. */
+declare function maxChroma(l: number, h: number, space?: ColorSpace): number;
+/** Which notation a string is written in. Anything unrecognised reads as hex. */
+declare function colorFormat(value: string): ColorFormat;
+/**
+ * A colour as a CSS string.
+ *
+ * Hex and Display P3 are bounded output spaces, so the colour is fitted on the
+ * way out; OKLCH is not, and writing an out-of-gamut OKLCH is legitimate — the
+ * browser fits it to whatever the display actually has.
+ */
+declare function formatColor(color: Color, format: ColorFormat): string;
+/**
+ * An absolute CSS colour as OKLCH, or `null` when the string is not one.
+ *
+ * Hex, `rgb()`, `hsl()`, `oklch()` and `color(display-p3 …)`, in both the
+ * comma and the space syntax. Named colours are deliberately absent: resolving
+ * them needs a table of a hundred and forty-eight entries or a DOM, and a
+ * picker that accepts "rebeccapurple" but not "papayawhip" is worse than one
+ * that accepts neither.
+ */
+declare function parseColor(value: string): Color | null;
+
+export { type Color, type ColorFormat, type ColorSpace, clamp, colorFormat, colorToRgb, fitGamut, formatColor, inGamut, maxChroma, parseColor, rgbToColor, wrapHue };

package/dist/lib/color.js

@@ -0,0 +1,189 @@
+const clamp = (n, min = 0, max = 1) => Math.max(min, Math.min(max, n));
+const wrapHue = (h) => (h % 360 + 360) % 360;
+const multiply = (m, v) => m.map((row) => row.reduce((n, x, i) => n + x * (v[i] ?? 0), 0));
+const linearize = (v) => Math.abs(v) <= 0.04045 ? v / 12.92 : Math.sign(v) * ((Math.abs(v) + 0.055) / 1.055) ** 2.4;
+const encode = (v) => Math.abs(v) <= 31308e-7 ? 12.92 * v : Math.sign(v) * (1.055 * Math.abs(v) ** (1 / 2.4) - 0.055);
+const RGB_XYZ = [
+  [0.4123907993, 0.3575843394, 0.1804807884],
+  [0.2126390059, 0.7151686788, 0.0721923154],
+  [0.0193308187, 0.1191947798, 0.9505321522]
+];
+const P3_XYZ = [
+  [0.4865709486, 0.2656676932, 0.1982172852],
+  [0.2289745641, 0.6917385218, 0.0792869141],
+  [0, 0.0451133819, 1.0439443689]
+];
+const XYZ_RGB = [
+  [3.2409699419, -1.5373831776, -0.4986107603],
+  [-0.9692436363, 1.8759675015, 0.0415550574],
+  [0.0556300797, -0.2039769589, 1.0569715142]
+];
+const XYZ_P3 = [
+  [2.4934969119, -0.9313836179, -0.4027107845],
+  [-0.8294889696, 1.7626640603, 0.0236246858],
+  [0.0358458302, -0.0761723893, 0.956884524]
+];
+const XYZ_LMS = [
+  [0.819022438, 0.3619062601, -0.1288737815],
+  [0.0329836539, 0.9292868616, 0.0361446664],
+  [0.0481771894, 0.2642395318, 0.6335478285]
+];
+const LMS_XYZ = [
+  [1.2268798734, -0.5578149966, 0.2813910502],
+  [-0.0405757626, 1.1122868294, -0.0717110667],
+  [-0.0763729497, -0.421493324, 1.5869240244]
+];
+function rgbToColor(rgb, a = 1, space = "srgb") {
+  const xyz = multiply(space === "p3" ? P3_XYZ : RGB_XYZ, rgb.map(linearize));
+  const [l, m, s] = multiply(XYZ_LMS, xyz).map(Math.cbrt);
+  const L = 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s;
+  const A = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s;
+  const B = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s;
+  const c = Math.hypot(A, B);
+  const grey = c < 1e-7;
+  return {
+    l: clamp(L),
+    c: grey ? 0 : c,
+    h: grey ? 0 : wrapHue(Math.atan2(B, A) * 180 / Math.PI),
+    a: clamp(a)
+  };
+}
+function colorToRgb(color, space = "srgb") {
+  const a = color.c * Math.cos(color.h * Math.PI / 180);
+  const b = color.c * Math.sin(color.h * Math.PI / 180);
+  const lms = [
+    (color.l + 0.3963377774 * a + 0.2158037573 * b) ** 3,
+    (color.l - 0.1055613458 * a - 0.0638541728 * b) ** 3,
+    (color.l - 0.0894841775 * a - 1.291485548 * b) ** 3
+  ];
+  return multiply(space === "p3" ? XYZ_P3 : XYZ_RGB, multiply(LMS_XYZ, lms)).map(encode);
+}
+function inGamut(color, space = "srgb") {
+  return colorToRgb(color, space).every((n) => n >= -1e-5 && n <= 1.00001);
+}
+function fitGamut(color, space = "srgb") {
+  if (inGamut(color, space)) return color;
+  let lo = 0;
+  let hi = color.c;
+  for (let i = 0; i < 20; i++) {
+    const mid = (lo + hi) / 2;
+    if (inGamut({ ...color, c: mid }, space)) lo = mid;
+    else hi = mid;
+  }
+  return { ...color, c: lo };
+}
+function maxChroma(l, h, space = "srgb") {
+  if (l <= 0 || l >= 1) return 0;
+  return fitGamut({ l, c: 0.5, h, a: 1 }, space).c;
+}
+function colorFormat(value) {
+  const text = value.trim();
+  if (/^oklch\(/i.test(text)) return "oklch";
+  if (/^color\(display-p3\s/i.test(text)) return "p3";
+  return "hex";
+}
+const round = (v, digits = 4) => Number(v.toFixed(digits));
+function formatColor(color, format) {
+  const alpha = color.a < 1 ? ` / ${round(color.a)}` : "";
+  if (format === "oklch") {
+    return `oklch(${round(color.l)} ${round(color.c)} ${round(color.h, 2)}${alpha})`;
+  }
+  const space = format === "p3" ? "p3" : "srgb";
+  const rgb = colorToRgb(fitGamut(color, space), space);
+  if (format === "p3") {
+    return `color(display-p3 ${rgb.map((n) => round(clamp(n), 5)).join(" ")}${alpha})`;
+  }
+  const bytes = rgb.map((n) => Math.round(clamp(n) * 255));
+  if (color.a < 1) bytes.push(Math.round(color.a * 255));
+  return `#${bytes.map((n) => n.toString(16).padStart(2, "0")).join("")}`;
+}
+const NUMBER = /^[+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?(%|deg|grad|rad|turn)?$/i;
+function number(value, percentScale = 1, hue = false) {
+  const match = NUMBER.exec(value);
+  if (!match) return null;
+  const n = parseFloat(value);
+  if (!Number.isFinite(n)) return null;
+  const unit = match[1]?.toLowerCase();
+  if (hue) {
+    if (unit === "rad") return n * 180 / Math.PI;
+    if (unit === "turn") return n * 360;
+    if (unit === "grad") return n * 0.9;
+    return !unit || unit === "deg" ? n : null;
+  }
+  if (unit === "%") return n * percentScale / 100;
+  return unit ? null : n;
+}
+function parseColor(value) {
+  const text = value.trim().toLowerCase();
+  if (text === "transparent") return { l: 0, c: 0, h: 0, a: 0 };
+  if (/^#(?:[\da-f]{3,4}|[\da-f]{6}|[\da-f]{8})$/.test(text)) {
+    const short = text.slice(1);
+    const hex = short.length <= 4 ? [...short].map((c) => c + c).join("") : short;
+    const bytes = (hex.match(/../g) ?? []).map((c) => parseInt(c, 16) / 255);
+    return rgbToColor(bytes.slice(0, 3), bytes[3] ?? 1);
+  }
+  const match = /^(oklch|rgb|rgba|hsl|hsla|color)\(([^()]*)\)$/.exec(text);
+  if (!match) return null;
+  const kind = match[1] ?? "";
+  let body = (match[2] ?? "").trim();
+  const p3 = kind === "color";
+  if (p3) {
+    if (!body.startsWith("display-p3 ")) return null;
+    body = body.slice(11).trim();
+  }
+  const legacy = body.includes(",");
+  if (legacy && (p3 || kind === "oklch" || body.includes("/"))) return null;
+  const parts = legacy ? body.split(",").map((x) => x.trim()) : body.split(/\s*\/\s*/);
+  if (!legacy && parts.length > 2) return null;
+  const channels = legacy ? parts.slice(0, 3) : (parts[0] ?? "").split(/\s+/);
+  if (channels.length !== 3) return null;
+  if (legacy && parts.length !== 3 && parts.length !== 4) return null;
+  if (legacy && kind.startsWith("rgb") && channels.some((c) => c.endsWith("%")) && !channels.every((c) => c.endsWith("%"))) {
+    return null;
+  }
+  const alphaText = legacy ? parts[3] : parts[1];
+  const alpha = alphaText === void 0 ? 1 : number(alphaText);
+  if (alpha === null) return null;
+  if (kind === "oklch") {
+    const l = number(channels[0] ?? "");
+    const c = number(channels[1] ?? "", 0.4);
+    const h = number(channels[2] ?? "", 1, true);
+    if (l === null || c === null || h === null) return null;
+    return { l: clamp(l), c: Math.max(0, c), h: wrapHue(h), a: clamp(alpha) };
+  }
+  if (kind.startsWith("hsl")) {
+    const h = number(channels[0] ?? "", 1, true);
+    const s = number(channels[1] ?? "");
+    const l = number(channels[2] ?? "");
+    if (h === null || s === null || l === null) return null;
+    if (!channels[1]?.endsWith("%") || !channels[2]?.endsWith("%")) return null;
+    const sat = clamp(s);
+    const light = clamp(l);
+    const amount = sat * Math.min(light, 1 - light);
+    const channel = (n) => {
+      const k = (n + wrapHue(h) / 30) % 12;
+      return light - amount * Math.max(-1, Math.min(k - 3, 9 - k, 1));
+    };
+    return rgbToColor([channel(0), channel(8), channel(4)], alpha);
+  }
+  const values = channels.map((c) => number(c, p3 ? 1 : 255));
+  if (values.some((n) => n === null)) return null;
+  return rgbToColor(
+    values.map((n) => p3 ? n ?? 0 : clamp((n ?? 0) / 255)),
+    alpha,
+    p3 ? "p3" : "srgb"
+  );
+}
+export {
+  clamp,
+  colorFormat,
+  colorToRgb,
+  fitGamut,
+  formatColor,
+  inGamut,
+  maxChroma,
+  parseColor,
+  rgbToColor,
+  wrapHue
+};
+//# sourceMappingURL=color.js.map

package/dist/lib/color.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/color.ts"],"sourcesContent":["/**\n * CSS colour maths, with no dependency and no DOM.\n *\n * Adapted from DialKit (https://github.com/joshpuckett/dialkit), MIT licensed:\n *\n *   Copyright (c) 2026 Josh Puckett\n *\n *   Permission is hereby granted, free of charge, to any person obtaining a\n *   copy of this software and associated documentation files (the \"Software\"),\n *   to deal in the Software without restriction, including without limitation\n *   the rights to use, copy, modify, merge, publish, distribute, sublicense,\n *   and/or sell copies of the Software, and to permit persons to whom the\n *   Software is furnished to do so, subject to the following conditions:\n *\n *   The above copyright notice and this permission notice shall be included in\n *   all copies or substantial portions of the Software.\n *\n * The working space is OKLCH, and that is the substantive choice here rather\n * than an implementation detail. A picker built on HSV hands a reader two\n * colours at the same \"lightness\" where one of them is visibly darker, because\n * HSV's lightness is a property of the numbers rather than of the eye. Every\n * decision in `ColorPicker` — where the handle sits, what the hue strip looks\n * like at this lightness, which colours are reachable at all — depends on a\n * space that is perceptually uniform, and OKLCH is the one CSS ships.\n *\n * The matrices are the CSS Color 4 reference implementation's, D65.\n * https://www.w3.org/TR/css-color-4/#color-conversion-code\n */\n\n/** A colour in OKLCH: lightness 0–1, chroma, hue in degrees, alpha 0–1. */\nexport interface Color {\n  l: number\n  c: number\n  h: number\n  a: number\n}\n\n/** The notations this module reads and writes. */\nexport type ColorFormat = 'hex' | 'oklch' | 'p3'\n\n/** The two RGB gamuts a colour can be fitted to. */\nexport type ColorSpace = 'srgb' | 'p3'\n\ntype Triple = [number, number, number]\n\nexport const clamp = (n: number, min = 0, max = 1) => Math.max(min, Math.min(max, n))\n\nexport const wrapHue = (h: number) => ((h % 360) + 360) % 360\n\nconst multiply = (m: number[][], v: Triple): Triple =>\n  m.map((row) => row.reduce((n, x, i) => n + x * (v[i] ?? 0), 0)) as Triple\n\n/** sRGB transfer function, undone. Signed, so an out-of-gamut channel survives. */\nconst linearize = (v: number) =>\n  Math.abs(v) <= 0.04045 ? v / 12.92 : Math.sign(v) * ((Math.abs(v) + 0.055) / 1.055) ** 2.4\n\nconst encode = (v: number) =>\n  Math.abs(v) <= 0.0031308 ? 12.92 * v : Math.sign(v) * (1.055 * Math.abs(v) ** (1 / 2.4) - 0.055)\n\nconst RGB_XYZ = [\n  [0.4123907993, 0.3575843394, 0.1804807884],\n  [0.2126390059, 0.7151686788, 0.0721923154],\n  [0.0193308187, 0.1191947798, 0.9505321522],\n]\nconst P3_XYZ = [\n  [0.4865709486, 0.2656676932, 0.1982172852],\n  [0.2289745641, 0.6917385218, 0.0792869141],\n  [0, 0.0451133819, 1.0439443689],\n]\nconst XYZ_RGB = [\n  [3.2409699419, -1.5373831776, -0.4986107603],\n  [-0.9692436363, 1.8759675015, 0.0415550574],\n  [0.0556300797, -0.2039769589, 1.0569715142],\n]\nconst XYZ_P3 = [\n  [2.4934969119, -0.9313836179, -0.4027107845],\n  [-0.8294889696, 1.7626640603, 0.0236246858],\n  [0.0358458302, -0.0761723893, 0.956884524],\n]\nconst XYZ_LMS = [\n  [0.819022438, 0.3619062601, -0.1288737815],\n  [0.0329836539, 0.9292868616, 0.0361446664],\n  [0.0481771894, 0.2642395318, 0.6335478285],\n]\nconst LMS_XYZ = [\n  [1.2268798734, -0.5578149966, 0.2813910502],\n  [-0.0405757626, 1.1122868294, -0.0717110667],\n  [-0.0763729497, -0.421493324, 1.5869240244],\n]\n\n/** Gamma-encoded RGB in 0–1 to OKLCH. */\nexport function rgbToColor(rgb: Triple, a = 1, space: ColorSpace = 'srgb'): Color {\n  const xyz = multiply(space === 'p3' ? P3_XYZ : RGB_XYZ, rgb.map(linearize) as Triple)\n  const [l, m, s] = multiply(XYZ_LMS, xyz).map(Math.cbrt) as Triple\n  const L = 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s\n  const A = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s\n  const B = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s\n  const c = Math.hypot(A, B)\n  // Below the threshold the hue is the angle of rounding error, not a hue. Left\n  // in, a slider dragged to pure white would spin the strip through 360°.\n  const grey = c < 1e-7\n  return {\n    l: clamp(L),\n    c: grey ? 0 : c,\n    h: grey ? 0 : wrapHue((Math.atan2(B, A) * 180) / Math.PI),\n    a: clamp(a),\n  }\n}\n\n/** OKLCH to gamma-encoded RGB in 0–1. May fall outside it — see `fitGamut`. */\nexport function colorToRgb(color: Color, space: ColorSpace = 'srgb'): Triple {\n  const a = color.c * Math.cos((color.h * Math.PI) / 180)\n  const b = color.c * Math.sin((color.h * Math.PI) / 180)\n  const lms: Triple = [\n    (color.l + 0.3963377774 * a + 0.2158037573 * b) ** 3,\n    (color.l - 0.1055613458 * a - 0.0638541728 * b) ** 3,\n    (color.l - 0.0894841775 * a - 1.291485548 * b) ** 3,\n  ]\n  return multiply(space === 'p3' ? XYZ_P3 : XYZ_RGB, multiply(LMS_XYZ, lms)).map(encode) as Triple\n}\n\nexport function inGamut(color: Color, space: ColorSpace = 'srgb'): boolean {\n  return colorToRgb(color, space).every((n) => n >= -0.00001 && n <= 1.00001)\n}\n\n/**\n * Brings a colour inside a gamut by giving up CHROMA, and nothing else.\n *\n * The naive fix is to clip each channel at 0 and 1, which changes the hue and\n * the lightness together — a vivid blue clipped that way comes back purple and\n * darker. Bisecting on chroma keeps both, so what a reader loses is only the\n * saturation the display could never have shown them.\n */\nexport function fitGamut(color: Color, space: ColorSpace = 'srgb'): Color {\n  if (inGamut(color, space)) return color\n  let lo = 0\n  let hi = color.c\n  // Twenty halvings of a chroma under 0.5 lands well inside a 24-bit step.\n  for (let i = 0; i < 20; i++) {\n    const mid = (lo + hi) / 2\n    if (inGamut({ ...color, c: mid }, space)) lo = mid\n    else hi = mid\n  }\n  return { ...color, c: lo }\n}\n\n/** The most chroma a gamut holds at this lightness and hue — the plane's edge. */\nexport function maxChroma(l: number, h: number, space: ColorSpace = 'srgb'): number {\n  if (l <= 0 || l >= 1) return 0\n  return fitGamut({ l, c: 0.5, h, a: 1 }, space).c\n}\n\n/** Which notation a string is written in. Anything unrecognised reads as hex. */\nexport function colorFormat(value: string): ColorFormat {\n  const text = value.trim()\n  if (/^oklch\\(/i.test(text)) return 'oklch'\n  if (/^color\\(display-p3\\s/i.test(text)) return 'p3'\n  return 'hex'\n}\n\nconst round = (v: number, digits = 4) => Number(v.toFixed(digits))\n\n/**\n * A colour as a CSS string.\n *\n * Hex and Display P3 are bounded output spaces, so the colour is fitted on the\n * way out; OKLCH is not, and writing an out-of-gamut OKLCH is legitimate — the\n * browser fits it to whatever the display actually has.\n */\nexport function formatColor(color: Color, format: ColorFormat): string {\n  const alpha = color.a < 1 ? ` / ${round(color.a)}` : ''\n  if (format === 'oklch') {\n    return `oklch(${round(color.l)} ${round(color.c)} ${round(color.h, 2)}${alpha})`\n  }\n  const space: ColorSpace = format === 'p3' ? 'p3' : 'srgb'\n  const rgb = colorToRgb(fitGamut(color, space), space)\n  if (format === 'p3') {\n    return `color(display-p3 ${rgb.map((n) => round(clamp(n), 5)).join(' ')}${alpha})`\n  }\n  const bytes = rgb.map((n) => Math.round(clamp(n) * 255))\n  if (color.a < 1) bytes.push(Math.round(color.a * 255))\n  return `#${bytes.map((n) => n.toString(16).padStart(2, '0')).join('')}`\n}\n\nconst NUMBER = /^[+-]?(?:\\d+\\.?\\d*|\\.\\d+)(?:e[+-]?\\d+)?(%|deg|grad|rad|turn)?$/i\n\n/** One CSS numeric token, in the unit its channel allows. */\nfunction number(value: string, percentScale = 1, hue = false): number | null {\n  const match = NUMBER.exec(value)\n  if (!match) return null\n  const n = parseFloat(value)\n  if (!Number.isFinite(n)) return null\n  const unit = match[1]?.toLowerCase()\n  if (hue) {\n    if (unit === 'rad') return (n * 180) / Math.PI\n    if (unit === 'turn') return n * 360\n    if (unit === 'grad') return n * 0.9\n    return !unit || unit === 'deg' ? n : null\n  }\n  if (unit === '%') return (n * percentScale) / 100\n  return unit ? null : n\n}\n\n/**\n * An absolute CSS colour as OKLCH, or `null` when the string is not one.\n *\n * Hex, `rgb()`, `hsl()`, `oklch()` and `color(display-p3 …)`, in both the\n * comma and the space syntax. Named colours are deliberately absent: resolving\n * them needs a table of a hundred and forty-eight entries or a DOM, and a\n * picker that accepts \"rebeccapurple\" but not \"papayawhip\" is worse than one\n * that accepts neither.\n */\nexport function parseColor(value: string): Color | null {\n  const text = value.trim().toLowerCase()\n  if (text === 'transparent') return { l: 0, c: 0, h: 0, a: 0 }\n\n  if (/^#(?:[\\da-f]{3,4}|[\\da-f]{6}|[\\da-f]{8})$/.test(text)) {\n    const short = text.slice(1)\n    const hex = short.length <= 4 ? [...short].map((c) => c + c).join('') : short\n    const bytes = (hex.match(/../g) ?? []).map((c) => parseInt(c, 16) / 255)\n    return rgbToColor(bytes.slice(0, 3) as Triple, bytes[3] ?? 1)\n  }\n\n  const match = /^(oklch|rgb|rgba|hsl|hsla|color)\\(([^()]*)\\)$/.exec(text)\n  if (!match) return null\n  const kind = match[1] ?? ''\n  let body = (match[2] ?? '').trim()\n\n  const p3 = kind === 'color'\n  if (p3) {\n    if (!body.startsWith('display-p3 ')) return null\n    body = body.slice(11).trim()\n  }\n\n  // The comma syntax is the legacy one, and it never applied to `oklch()` or\n  // `color()`; mixing it with the modern `/` alpha is not a colour either.\n  const legacy = body.includes(',')\n  if (legacy && (p3 || kind === 'oklch' || body.includes('/'))) return null\n\n  const parts = legacy ? body.split(',').map((x) => x.trim()) : body.split(/\\s*\\/\\s*/)\n  if (!legacy && parts.length > 2) return null\n  const channels = legacy ? parts.slice(0, 3) : (parts[0] ?? '').split(/\\s+/)\n  if (channels.length !== 3) return null\n  if (legacy && parts.length !== 3 && parts.length !== 4) return null\n  // Legacy rgb() is all percentages or all numbers, never a mixture.\n  if (\n    legacy &&\n    kind.startsWith('rgb') &&\n    channels.some((c) => c.endsWith('%')) &&\n    !channels.every((c) => c.endsWith('%'))\n  ) {\n    return null\n  }\n\n  const alphaText = legacy ? parts[3] : parts[1]\n  const alpha = alphaText === undefined ? 1 : number(alphaText)\n  if (alpha === null) return null\n\n  if (kind === 'oklch') {\n    const l = number(channels[0] ?? '')\n    // 100% chroma is 0.4 by the specification, not 1.\n    const c = number(channels[1] ?? '', 0.4)\n    const h = number(channels[2] ?? '', 1, true)\n    if (l === null || c === null || h === null) return null\n    return { l: clamp(l), c: Math.max(0, c), h: wrapHue(h), a: clamp(alpha) }\n  }\n\n  if (kind.startsWith('hsl')) {\n    const h = number(channels[0] ?? '', 1, true)\n    const s = number(channels[1] ?? '')\n    const l = number(channels[2] ?? '')\n    if (h === null || s === null || l === null) return null\n    if (!channels[1]?.endsWith('%') || !channels[2]?.endsWith('%')) return null\n    const sat = clamp(s)\n    const light = clamp(l)\n    const amount = sat * Math.min(light, 1 - light)\n    const channel = (n: number) => {\n      const k = (n + wrapHue(h) / 30) % 12\n      return light - amount * Math.max(-1, Math.min(k - 3, 9 - k, 1))\n    }\n    return rgbToColor([channel(0), channel(8), channel(4)], alpha)\n  }\n\n  const values = channels.map((c) => number(c, p3 ? 1 : 255))\n  if (values.some((n) => n === null)) return null\n  return rgbToColor(\n    values.map((n) => (p3 ? (n ?? 0) : clamp((n ?? 0) / 255))) as Triple,\n    alpha,\n    p3 ? 'p3' : 'srgb',\n  )\n}\n"],"mappings":"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","names":[]}

package/dist/lib/numeric.d.ts

@@ -0,0 +1,35 @@
+/**
+ * The three things a numeric control has to do to a typed number, in one place.
+ *
+ * `Slider` and `NumberField` both take a number from a keyboard and both have
+ * to reconcile it with `min`, `max` and `step`. Written twice they drift, and
+ * they drift in the direction nobody tests: a slider that snaps 0.1 + 0.2 to
+ * `0.30000000000000004` and a field beside it that prints `0.3`.
+ *
+ * The step base is `min`, not zero, because that is what the HTML step
+ * algorithm uses — a range from 5 to 100 stepping by 10 lands on 15, not on 10.
+ */
+/**
+ * Decimal places implied by a step.
+ *
+ * Snapping is arithmetic on binary floats, so a value that should be exactly
+ * one step from the last one usually is not. Rounding the result to the step's
+ * own precision is what stops that reaching a readout — and the step's own
+ * precision is the most a caller can have meant.
+ */
+declare function decimalsForStep(step: number): number;
+/** Rounds to the nearest step from `min`, at the step's own precision. */
+declare function snapToStep(value: number, step: number, min?: number): number;
+/** Holds a value inside a range. An inverted range yields its own lower bound. */
+declare function clampToRange(value: number, min: number, max: number): number;
+/**
+ * A typed string as a number, or `null` when it is not one yet.
+ *
+ * `null` rather than `NaN` because the caller has to tell "not a number" from
+ * "not finished being typed" and act the same way on both: leave the committed
+ * value alone. `Number('')` is `0`, which is the trap this exists for — an
+ * emptied box would otherwise commit zero on every keystroke that cleared it.
+ */
+declare function parseNumber(text: string): number | null;
+
+export { clampToRange, decimalsForStep, parseNumber, snapToStep };

package/dist/lib/numeric.js

@@ -0,0 +1,29 @@
+function decimalsForStep(step) {
+  if (!Number.isFinite(step) || step <= 0) return 0;
+  const text = String(step);
+  const exponential = /e-(\d+)$/i.exec(text);
+  if (exponential) return Number(exponential[1]);
+  return text.split(".")[1]?.length ?? 0;
+}
+function snapToStep(value, step, min = 0) {
+  if (!Number.isFinite(step) || step <= 0) return value;
+  const base = Number.isFinite(min) ? min : 0;
+  const snapped = base + Math.round((value - base) / step) * step;
+  return Number(snapped.toFixed(decimalsForStep(step)));
+}
+function clampToRange(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function parseNumber(text) {
+  const trimmed = text.trim();
+  if (trimmed === "") return null;
+  const value = Number(trimmed);
+  return Number.isFinite(value) ? value : null;
+}
+export {
+  clampToRange,
+  decimalsForStep,
+  parseNumber,
+  snapToStep
+};
+//# sourceMappingURL=numeric.js.map

package/dist/lib/numeric.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/numeric.ts"],"sourcesContent":["/**\n * The three things a numeric control has to do to a typed number, in one place.\n *\n * `Slider` and `NumberField` both take a number from a keyboard and both have\n * to reconcile it with `min`, `max` and `step`. Written twice they drift, and\n * they drift in the direction nobody tests: a slider that snaps 0.1 + 0.2 to\n * `0.30000000000000004` and a field beside it that prints `0.3`.\n *\n * The step base is `min`, not zero, because that is what the HTML step\n * algorithm uses — a range from 5 to 100 stepping by 10 lands on 15, not on 10.\n */\n\n/**\n * Decimal places implied by a step.\n *\n * Snapping is arithmetic on binary floats, so a value that should be exactly\n * one step from the last one usually is not. Rounding the result to the step's\n * own precision is what stops that reaching a readout — and the step's own\n * precision is the most a caller can have meant.\n */\nexport function decimalsForStep(step: number): number {\n  if (!Number.isFinite(step) || step <= 0) return 0\n  const text = String(step)\n  // Exponential notation carries its precision in the exponent, and `1e-7` has\n  // no '.' to split on — `String(0.0000001)` is exactly that.\n  const exponential = /e-(\\d+)$/i.exec(text)\n  if (exponential) return Number(exponential[1])\n  return text.split('.')[1]?.length ?? 0\n}\n\n/** Rounds to the nearest step from `min`, at the step's own precision. */\nexport function snapToStep(value: number, step: number, min = 0): number {\n  if (!Number.isFinite(step) || step <= 0) return value\n  const base = Number.isFinite(min) ? min : 0\n  const snapped = base + Math.round((value - base) / step) * step\n  return Number(snapped.toFixed(decimalsForStep(step)))\n}\n\n/** Holds a value inside a range. An inverted range yields its own lower bound. */\nexport function clampToRange(value: number, min: number, max: number): number {\n  return Math.min(Math.max(value, min), max)\n}\n\n/**\n * A typed string as a number, or `null` when it is not one yet.\n *\n * `null` rather than `NaN` because the caller has to tell \"not a number\" from\n * \"not finished being typed\" and act the same way on both: leave the committed\n * value alone. `Number('')` is `0`, which is the trap this exists for — an\n * emptied box would otherwise commit zero on every keystroke that cleared it.\n */\nexport function parseNumber(text: string): number | null {\n  const trimmed = text.trim()\n  if (trimmed === '') return null\n  const value = Number(trimmed)\n  return Number.isFinite(value) ? value : null\n}\n"],"mappings":"AAoBO,SAAS,gBAAgB,MAAsB;AACpD,MAAI,CAAC,OAAO,SAAS,IAAI,KAAK,QAAQ,EAAG,QAAO;AAChD,QAAM,OAAO,OAAO,IAAI;AAGxB,QAAM,cAAc,YAAY,KAAK,IAAI;AACzC,MAAI,YAAa,QAAO,OAAO,YAAY,CAAC,CAAC;AAC7C,SAAO,KAAK,MAAM,GAAG,EAAE,CAAC,GAAG,UAAU;AACvC;AAGO,SAAS,WAAW,OAAe,MAAc,MAAM,GAAW;AACvE,MAAI,CAAC,OAAO,SAAS,IAAI,KAAK,QAAQ,EAAG,QAAO;AAChD,QAAM,OAAO,OAAO,SAAS,GAAG,IAAI,MAAM;AAC1C,QAAM,UAAU,OAAO,KAAK,OAAO,QAAQ,QAAQ,IAAI,IAAI;AAC3D,SAAO,OAAO,QAAQ,QAAQ,gBAAgB,IAAI,CAAC,CAAC;AACtD;AAGO,SAAS,aAAa,OAAe,KAAa,KAAqB;AAC5E,SAAO,KAAK,IAAI,KAAK,IAAI,OAAO,GAAG,GAAG,GAAG;AAC3C;AAUO,SAAS,YAAY,MAA6B;AACvD,QAAM,UAAU,KAAK,KAAK;AAC1B,MAAI,YAAY,GAAI,QAAO;AAC3B,QAAM,QAAQ,OAAO,OAAO;AAC5B,SAAO,OAAO,SAAS,KAAK,IAAI,QAAQ;AAC1C;","names":[]}