@nadicodeai/ui 4.0.5 → 5.1.0

package/dist/components/threshold/threshold.css

@@ -0,0 +1,228 @@
+/*
+ * @nadicodeai/ui/threshold.css
+ *
+ * The threshold primitives' stylesheet. It is a separate import rather than a
+ * part of globals.css because the surface that needs it most, the Nadia
+ * desktop app, runs inside a shell that does not load Tailwind: it takes this
+ * file and the design-system token layer, and nothing else from this package.
+ *
+ * A threshold is a fixed dark surface. It is true black in every theme, so the
+ * ladders below read the dark-mode tokens directly instead of branching on the
+ * app's mode; that is the fixed-presentation escape the package contract
+ * names, taken once, coherently, for the whole surface.
+ *
+ * The room's two colours are shader uniforms, not CSS, and live in room.tsx.
+ * The only colour written here is the still field the room falls back to.
+ */
+
+/* The room ---------------------------------------------------------------- */
+
+/*
+ * Absolute inside its own relative, isolated parent, never fixed against the
+ * viewport: a Portal panel holds a room without covering the page. Its still
+ * field is a token-built radial that needs no GPU, and the canvas covers it
+ * once the shader is painting.
+ */
+.nc-threshold-room {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  overflow: hidden;
+  pointer-events: none;
+  background: radial-gradient(
+    ellipse 55% 46% at 50% 36%,
+    color-mix(in oklab, var(--nc-identity-verde) 30%, var(--nc-identity-ink)),
+    transparent 90%
+  );
+  mask-image: radial-gradient(ellipse 65% 58% at 50% 35%, black 10%, transparent 95%);
+  transition: opacity var(--nc-duration-open) var(--nc-ease-emphasized);
+}
+
+.nc-threshold-room canvas {
+  opacity: 0.65;
+}
+
+/* Repair and error states quiet the room; they never remove it. */
+.nc-threshold-room[data-dimmed] {
+  opacity: 0.22;
+}
+
+/* The presence ------------------------------------------------------------ */
+
+.nc-threshold-presence {
+  position: relative;
+  flex: none;
+  width: clamp(180px, 38vh, 320px);
+  aspect-ratio: 462 / 520;
+  transition: opacity var(--nc-duration-confirm) var(--nc-ease-emphasized);
+}
+
+/* Her lower edge dissolves into the room rather than ending on a rectangle. */
+.nc-threshold-presence-figure {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  mask-image: linear-gradient(black 55%, transparent 98%);
+  transition: opacity var(--nc-duration-confirm) var(--nc-ease-emphasized);
+}
+
+.nc-threshold-presence-portrait {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+/* While the water is painting her, the plain portrait beneath it is redundant. */
+.nc-threshold-presence-figure[data-surface="water"] .nc-threshold-presence-portrait {
+  visibility: hidden;
+}
+
+/*
+ * The water canvas is cut to her own silhouette. Water's highlight term is
+ * added to the whole frame, not only to the sampled image, so an unmasked
+ * canvas paints a faintly lit rectangle over the room: the visible tile the
+ * rendered comparisons rejected. The mask matches the shader's own `contain`
+ * fit and centred origin, so the two agree pixel for pixel.
+ */
+.nc-threshold-presence-figure canvas {
+  position: absolute;
+  inset: 0;
+  mask-image: var(--threshold-portrait);
+  mask-position: center;
+  mask-repeat: no-repeat;
+  mask-size: contain;
+}
+
+.nc-threshold-presence[data-state="error"] {
+  opacity: 0.62;
+}
+
+/*
+ * Success: one short verde vivo beat over her own silhouette, then nothing.
+ * Verde vivo is Nadia's presence accent and this is the only place a threshold
+ * spends it, which is why the buttons beside it stay neutral.
+ */
+.nc-threshold-presence::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--nc-dark-verde-vivo);
+  mask-image: var(--threshold-portrait);
+  mask-position: center;
+  mask-repeat: no-repeat;
+  mask-size: contain;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.nc-threshold-presence[data-state="ready"]::after {
+  animation: nc-threshold-arrival 360ms var(--nc-ease-out-strong) 1;
+}
+
+@keyframes nc-threshold-arrival {
+  0% {
+    opacity: 0;
+  }
+  35% {
+    opacity: 0.22;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+/* The orb ----------------------------------------------------------------- */
+
+.nc-threshold-orb {
+  display: block;
+  flex: none;
+}
+
+/* The line ---------------------------------------------------------------- */
+
+/*
+ * A hidden copy of the whole sentence holds the width while the visible one
+ * fills in, so the orb beside it does not travel with each character.
+ */
+.nc-threshold-line {
+  display: grid;
+  position: relative;
+  margin: 0;
+  font-family: var(--nc-type-display-md-font-family);
+  font-size: var(--nc-type-display-md-font-size);
+  font-weight: var(--nc-type-display-md-font-weight);
+  line-height: var(--nc-type-display-md-line-height);
+  letter-spacing: -0.01em;
+  text-align: center;
+  text-wrap: balance;
+  color: var(--nc-dark-ink);
+}
+
+.nc-threshold-line-measure {
+  grid-area: 1 / 1;
+  visibility: hidden;
+}
+
+.nc-threshold-line-spoken {
+  grid-area: 1 / 1;
+}
+
+.nc-threshold-caret {
+  display: inline-block;
+  width: 2px;
+  height: 1em;
+  margin-left: 2px;
+  vertical-align: -0.15em;
+  background: currentcolor;
+  visibility: hidden;
+}
+
+.nc-threshold-line[data-typing] .nc-threshold-caret {
+  visibility: visible;
+}
+
+/* Shared ------------------------------------------------------------------ */
+
+/*
+ * The threshold ships its own visually-hidden helper: the desktop shell does
+ * not load this package's Tailwind layer, and a progress value nobody can read
+ * is not an accessible progress value.
+ */
+.nc-threshold-sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .nc-threshold-room,
+  .nc-threshold-presence,
+  .nc-threshold-presence-figure {
+    transition: none;
+  }
+
+  .nc-threshold-presence[data-state="ready"]::after {
+    animation: none;
+  }
+
+  .nc-threshold-caret {
+    visibility: hidden;
+  }
+}
+
+/*
+ * The components also carry the preference as `data-still`, which is what a
+ * shell that toggles reduced motion without the media query (an in-app
+ * setting) sets. Same result, one rule.
+ */
+.nc-threshold-presence[data-still] {
+  transition: none;
+}
+
+.nc-threshold-presence[data-still][data-state="ready"]::after {
+  animation: none;
+}

package/dist/components/threshold/typed-line.d.ts

@@ -0,0 +1,8 @@
+export type TypedLineProps = {
+    /** Milliseconds per character. The threshold's cadence is 44. */
+    cadenceMs?: number;
+    className?: string;
+    text: string;
+};
+export declare function TypedLine({ cadenceMs, className, text }: TypedLineProps): import("react").JSX.Element;
+//# sourceMappingURL=typed-line.d.ts.map

package/dist/components/threshold/typed-line.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typed-line.d.ts","sourceRoot":"","sources":["../../../src/components/threshold/typed-line.tsx"],"names":[],"mappings":"AAwBA,MAAM,MAAM,cAAc,GAAG;IAC3B,iEAAiE;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,wBAAgB,SAAS,CAAC,EAAE,SAAsB,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,cAAc,+BAwCpF"}

package/dist/components/threshold/typed-line.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { cn } from "../../lib/utils.js";
+import { useReducedMotion } from "./use-reduced-motion.js";
+/*
+ * The line Nadia says while a threshold is open. It types itself, because a
+ * first run is the one moment in the product where waiting is the content.
+ *
+ * Three decisions the captures settled:
+ *
+ * - the count comes from elapsed time, not from how many callbacks arrived, so
+ *   a software renderer or a busy main thread cannot stretch a one second
+ *   sentence into five;
+ * - a hidden copy of the whole sentence reserves its width, so nothing beside
+ *   the line travels sideways with each character;
+ * - the live region receives the complete sentence at once, so a screen reader
+ *   is never read one letter at a time.
+ */
+const CADENCE_MS = 44;
+export function TypedLine({ cadenceMs = CADENCE_MS, className, text }) {
+    const still = useReducedMotion();
+    const [shown, setShown] = useState("");
+    useEffect(() => {
+        if (still) {
+            setShown(text);
+            return;
+        }
+        setShown("");
+        const startedAt = performance.now();
+        let timer = 0;
+        const tick = () => {
+            const count = Math.min(text.length, Math.floor((performance.now() - startedAt) / cadenceMs));
+            setShown(text.slice(0, count));
+            if (count < text.length)
+                timer = window.setTimeout(tick, cadenceMs);
+        };
+        timer = window.setTimeout(tick, cadenceMs);
+        return () => window.clearTimeout(timer);
+    }, [cadenceMs, still, text]);
+    const typing = shown.length < text.length;
+    return (_jsxs("p", { className: cn("nc-threshold-line", className), "data-typing": typing || undefined, children: [_jsx("span", { "aria-hidden": "true", className: "nc-threshold-line-measure", children: text }), _jsxs("span", { "aria-hidden": "true", className: "nc-threshold-line-spoken", children: [_jsx("span", { children: shown }), _jsx("span", { className: "nc-threshold-caret" })] }), _jsx("span", { "aria-live": "polite", className: "nc-threshold-sr", children: text })] }));
+}

package/dist/components/threshold/use-reduced-motion.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Live `prefers-reduced-motion`, the one reader the threshold primitives share.
+ *
+ * The value is read from the media query on every render rather than cached in
+ * state, so a preference changed while a threshold is open reaches the room,
+ * the presence, the orb and the typed line in the same commit. Server renders
+ * report false and the first client render corrects it.
+ */
+export declare function useReducedMotion(): boolean;
+//# sourceMappingURL=use-reduced-motion.d.ts.map

package/dist/components/threshold/use-reduced-motion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-reduced-motion.d.ts","sourceRoot":"","sources":["../../../src/components/threshold/use-reduced-motion.ts"],"names":[],"mappings":"AA2BA;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,IAAI,OAAO,CAE1C"}

package/dist/components/threshold/use-reduced-motion.js

@@ -0,0 +1,32 @@
+"use client";
+import { useSyncExternalStore } from "react";
+const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+function query() {
+    return typeof window === "undefined" || typeof window.matchMedia !== "function"
+        ? undefined
+        : window.matchMedia(REDUCED_MOTION_QUERY);
+}
+function subscribe(onChange) {
+    const list = query();
+    if (!list)
+        return () => { };
+    list.addEventListener("change", onChange);
+    return () => list.removeEventListener("change", onChange);
+}
+function getSnapshot() {
+    return query()?.matches ?? false;
+}
+function getServerSnapshot() {
+    return false;
+}
+/**
+ * Live `prefers-reduced-motion`, the one reader the threshold primitives share.
+ *
+ * The value is read from the media query on every render rather than cached in
+ * state, so a preference changed while a threshold is open reaches the room,
+ * the presence, the orb and the typed line in the same commit. Server renders
+ * report false and the first client render corrects it.
+ */
+export function useReducedMotion() {
+    return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export * from "./components/accordion.js";
 export * from "./components/action-band.js";
 export * from "./components/action-status.js";
+export * from "./components/activity-orb.js";
 export * from "./components/alert.js";
 export * from "./components/alert-dialog.js";
 export * from "./components/agent-card.js";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -1,6 +1,7 @@
 export * from "./components/accordion.js";
 export * from "./components/action-band.js";
 export * from "./components/action-status.js";
+export * from "./components/activity-orb.js";
 export * from "./components/alert.js";
 export * from "./components/alert-dialog.js";
 export * from "./components/agent-card.js";

package/dist/internal/activity-orb.d.ts

@@ -0,0 +1,27 @@
+/** Product activities, not the vendor's agent vocabulary. */
+declare const ACTIVITY_RECIPES: {
+    readonly loading: {
+        readonly state: "composing";
+        readonly speed: 0.92;
+        readonly still: 0.6;
+    };
+    readonly connecting: {
+        readonly state: "connecting";
+        readonly speed: 0.86;
+        readonly still: 0.6;
+    };
+    readonly processing: {
+        readonly state: "working";
+        readonly speed: 0.92;
+        readonly still: 0.6;
+    };
+};
+export type ActivityKind = keyof typeof ACTIVITY_RECIPES;
+export type ActivityOrbSize = 20 | 64 | 88;
+/** Own canvas lifetime; callers supply activity and accessible meaning only. */
+export declare function mountActivityOrb(canvas: HTMLCanvasElement, activity: ActivityKind, size: ActivityOrbSize, initiallyPaused?: boolean): {
+    destroy: () => void;
+    setPaused: (_paused: boolean) => void;
+};
+export {};
+//# sourceMappingURL=activity-orb.d.ts.map

package/dist/internal/activity-orb.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"activity-orb.d.ts","sourceRoot":"","sources":["../../src/internal/activity-orb.ts"],"names":[],"mappings":"AAEA,6DAA6D;AAC7D,QAAA,MAAM,gBAAgB;;;;;;;;;;;;;;;;CAIZ,CAAC;AAEX,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,gBAAgB,CAAC;AACzD,MAAM,MAAM,eAAe,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAoE3C,gFAAgF;AAChF,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,iBAAiB,EACzB,QAAQ,EAAE,YAAY,EACtB,IAAI,EAAE,eAAe,EACrB,eAAe,UAAQ;;yBAEuC,OAAO;EA0FtE"}

package/dist/internal/activity-orb.js

@@ -0,0 +1,150 @@
+import { MODE_FRAMES, resolvePreset } from "thinking-orbs/engine";
+/** Product activities, not the vendor's agent vocabulary. */
+const ACTIVITY_RECIPES = {
+    loading: { state: "composing", speed: 0.92, still: 0.6 },
+    connecting: { state: "connecting", speed: 0.86, still: 0.6 },
+    processing: { state: "working", speed: 0.92, still: 0.6 },
+};
+/** Preserve the library's geometry, depth ordering and optical size profiles. */
+function activityFrame(activity, size, seconds) {
+    const recipe = ACTIVITY_RECIPES[activity];
+    const preset = resolvePreset(recipe.state, size === 20 ? 20 : 64);
+    return MODE_FRAMES[preset.mode](size, seconds * preset.speed * recipe.speed, preset.opts);
+}
+function colourAt(palette, white, opacity = 1) {
+    const depth = Math.min(1, Math.max(0, white));
+    // The foreground particles carry cobalto; the supporting structure keeps
+    // inherited ink. Opacity lets the same material work on inverted controls.
+    const accent = Math.min(1, Math.max(0, (0.4 - depth) / 0.32)) * 0.75;
+    const channels = palette.ink.map((ink, i) => Math.round(ink + ((palette.accent[i] ?? ink) - ink) * accent));
+    // eslint-disable-next-line no-restricted-syntax -- Canvas serializes channels resolved from currentColor and --nc-info; this adapter defines no palette literals.
+    return `rgba(${channels.join(",")},${opacity * (1 - depth)})`;
+}
+function paintActivityFrame(context, activity, size, seconds, palette) {
+    const frame = activityFrame(activity, size, seconds);
+    context.clearRect(0, 0, size, size);
+    for (const line of frame.lines) {
+        context.strokeStyle = colourAt(palette, line.white, line.a);
+        context.lineWidth = line.w;
+        context.beginPath();
+        context.moveTo(line.x1, line.y1);
+        context.lineTo(line.x2, line.y2);
+        context.stroke();
+    }
+    for (const dot of frame.dots) {
+        context.fillStyle = colourAt(palette, dot.white, dot.a);
+        context.beginPath();
+        context.arc(dot.x, dot.y, dot.r, 0, Math.PI * 2);
+        context.fill();
+    }
+}
+function readPalette(canvas) {
+    const probe = document.createElement("canvas");
+    probe.width = 1;
+    probe.height = 1;
+    const context = probe.getContext("2d", { willReadFrequently: true });
+    if (!context)
+        return null;
+    const style = getComputedStyle(canvas);
+    const read = (value) => {
+        context.clearRect(0, 0, 1, 1);
+        context.fillStyle = value;
+        context.fillRect(0, 0, 1, 1);
+        const { data } = context.getImageData(0, 0, 1, 1);
+        return [data[0] ?? 0, data[1] ?? 0, data[2] ?? 0];
+    };
+    const ink = read(style.color);
+    const accent = read(style.getPropertyValue("--nc-info").trim() || style.color);
+    return { ink, accent };
+}
+/** Own canvas lifetime; callers supply activity and accessible meaning only. */
+export function mountActivityOrb(canvas, activity, size, initiallyPaused = false) {
+    const unavailable = { destroy: () => { }, setPaused: (_paused) => { } };
+    const context = canvas.getContext("2d");
+    if (!context)
+        return unavailable;
+    let palette = readPalette(canvas);
+    if (!palette)
+        return unavailable;
+    const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+    let reduced = query.matches;
+    let paused = initiallyPaused;
+    let visible = true;
+    let disposed = false;
+    let request = 0;
+    // Each recipe retains a representative pose under reduced motion.
+    const still = ACTIVITY_RECIPES[activity].still;
+    let seconds = still;
+    let previous = null;
+    let ratio = 1;
+    function paint() {
+        if (!palette || !context)
+            return;
+        context.setTransform(ratio, 0, 0, ratio, 0, 0);
+        paintActivityFrame(context, activity, size, reduced ? still : seconds, palette);
+    }
+    function tick(now) {
+        request = 0;
+        if (disposed || !visible || document.hidden || reduced || paused)
+            return;
+        if (previous !== null)
+            seconds += Math.min((now - previous) / 1000, 0.1);
+        previous = now;
+        paint();
+        request = requestAnimationFrame(tick);
+    }
+    function play() {
+        cancelAnimationFrame(request);
+        previous = null;
+        paint();
+        if (!disposed && visible && !document.hidden && !reduced && !paused) {
+            request = requestAnimationFrame(tick);
+        }
+    }
+    function refresh() {
+        ratio = Math.min(window.devicePixelRatio || 1, 2);
+        canvas.width = Math.round(size * ratio);
+        canvas.height = Math.round(size * ratio);
+        palette = readPalette(canvas);
+        play();
+    }
+    function motionChanged(event) {
+        reduced = event.matches;
+        play();
+    }
+    const visibility = typeof IntersectionObserver === "undefined"
+        ? null
+        : new IntersectionObserver(([entry]) => {
+            visible = entry?.isIntersecting ?? false;
+            play();
+        });
+    visibility?.observe(canvas);
+    // Observe ancestors only: changing unrelated content must not repaint this
+    // canvas or install a document-wide subtree observer per inline indicator.
+    const theme = new MutationObserver(refresh);
+    for (let ancestor = canvas; ancestor; ancestor = ancestor.parentElement) {
+        theme.observe(ancestor, {
+            attributes: true,
+            attributeFilter: ["class", "style", "data-theme"],
+        });
+    }
+    query.addEventListener("change", motionChanged);
+    document.addEventListener("visibilitychange", play);
+    window.addEventListener("resize", refresh);
+    refresh();
+    return {
+        setPaused(value) {
+            paused = value;
+            play();
+        },
+        destroy() {
+            disposed = true;
+            cancelAnimationFrame(request);
+            visibility?.disconnect();
+            theme.disconnect();
+            query.removeEventListener("change", motionChanged);
+            document.removeEventListener("visibilitychange", play);
+            window.removeEventListener("resize", refresh);
+        },
+    };
+}

package/dist/internal/agent-visual/color.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../src/internal/agent-visual/color.ts"],"names":[],"mappings":"AAAA,KAAK,WAAW,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AA4EpD,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,CAG3F"}
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../src/internal/agent-visual/color.ts"],"names":[],"mappings":"AAAA,KAAK,WAAW,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AAmFpD,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,CAG3F"}

package/dist/internal/agent-visual/color.js

@@ -1,4 +1,10 @@
 const clamp = (value) => Math.min(Math.max(value, 0), 1);
+// CSS compilers may serialize numeric channels as percentages. CSS Color 4
+// gives each channel its own 100% value (OKLCH L: 1, C: 0.4; Lab a/b: 125).
+function numberOrPercentage(value, percentRange) {
+    const number = Number.parseFloat(value ?? "");
+    return value?.endsWith("%") ? (number / 100) * percentRange : number;
+}
 function linearToSrgb(value) {
     const channel = clamp(value);
     return channel <= 0.0031308 ? channel * 12.92 : 1.055 * channel ** (1 / 2.4) - 0.055;
@@ -12,10 +18,10 @@ function parseOklch(value) {
         return null;
     const [channels, alphaValue] = value.slice(start + 1, end).split("/");
     const [lightnessValue, chromaValue, hueValue] = channels?.trim().split(/\s+/) ?? [];
-    const lightness = Number.parseFloat(lightnessValue ?? "");
-    const chroma = Number.parseFloat(chromaValue ?? "");
+    const lightness = numberOrPercentage(lightnessValue, 1);
+    const chroma = numberOrPercentage(chromaValue, 0.4);
     const hue = Number.parseFloat(hueValue ?? "");
-    const alpha = alphaValue ? Number.parseFloat(alphaValue.trim()) : 1;
+    const alpha = alphaValue ? numberOrPercentage(alphaValue.trim(), 1) : 1;
     if (![lightness, chroma, hue, alpha].every(Number.isFinite))
         return null;
     const radians = (hue * Math.PI) / 180;
@@ -43,10 +49,10 @@ function parseLab(value) {
         return null;
     const [channels, alphaValue] = value.slice(start + 1, end).split("/");
     const [lightnessValue, aValue, bValue] = channels?.trim().split(/\s+/) ?? [];
-    const lightness = Number.parseFloat(lightnessValue ?? "");
-    const a = Number.parseFloat(aValue ?? "");
-    const b = Number.parseFloat(bValue ?? "");
-    const alpha = alphaValue ? Number.parseFloat(alphaValue.trim()) : 1;
+    const lightness = numberOrPercentage(lightnessValue, 100);
+    const a = numberOrPercentage(aValue, 125);
+    const b = numberOrPercentage(bValue, 125);
+    const alpha = alphaValue ? numberOrPercentage(alphaValue.trim(), 1) : 1;
     if (![lightness, a, b, alpha].every(Number.isFinite))
         return null;
     const delta = 6 / 29;

package/dist/threshold.d.ts

@@ -0,0 +1,2 @@
+export * from "./components/threshold/index.js";
+//# sourceMappingURL=threshold.d.ts.map

package/dist/threshold.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"threshold.d.ts","sourceRoot":"","sources":["../src/threshold.ts"],"names":[],"mappings":"AAYA,cAAc,8BAA8B,CAAC"}

package/dist/threshold.js

@@ -0,0 +1,13 @@
+/*
+ * `@nadicodeai/ui/threshold`: the primitives every threshold is drawn from.
+ *
+ * A threshold is the moment before the product is usable: a first run, a
+ * sign-in, a repair. The Nadia desktop app draws its room, presence, status
+ * orb and typed line from here, so the brand logic lives in one place.
+ *
+ * The screens themselves, and the state machines behind them, stay in the
+ * consuming app. This entry ships no screen.
+ *
+ * The stylesheet is a separate import: `@nadicodeai/ui/threshold.css`.
+ */
+export * from "./components/threshold/index.js";