@nadicodeai/ui 6.6.2 → 7.1.0

package/dist/components/threshold/room.js

@@ -1,168 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { defaultObjectSizing, meshGradientFragmentShader, ShaderFitOptions, ShaderMount, } from "@paper-design/shaders";
-import { useEffect, useRef, useState } from "react";
-import { resolveIdentityColor } from "../../internal/agent-visual/color.js";
-import { cn } from "../../lib/utils.js";
-import { useCanvasHeld } from "./canvas-budget.js";
-import { useReducedMotion } from "./use-reduced-motion.js";
-/*
- * The room is the place a threshold happens in: one field of verde ink on true
- * black, behind Nadia and behind the words. It is Paper Shaders' published
- * Mesh Gradient "Ink" preset, adapted to two colours and slowed, mounted
- * through the core `ShaderMount` the package already depends on. There is no
- * React wrapper and no second shader engine.
- *
- * Every number below was selected from rendered captures (the study is
- * `apps/nadia/build/design/threshold/`), so this module is the one place they
- * are written.
- */
-const ROOM_SPEED = 0.22;
-const ROOM_FRAME = 12_000;
-const ROOM_MIN_PIXEL_RATIO = 1;
-const ROOM_MAX_PIXEL_COUNT = 1_024_000;
-const ROOM_DISTORTION = 1;
-const ROOM_SWIRL = 0.2;
-const ROOM_ROTATION = 90;
-/** The field's ink, and the two colours it carries. Uniforms, never CSS. */
-const ROOM_INK_TOKEN = "--nc-identity-ink";
-const ROOM_FIELD_TOKEN = "--nc-identity-verde";
-const ROOM_READY_TOKEN = "--nc-dark-verde-vivo";
-const clampUnit = (value) => Math.min(Math.max(value, 0), 1);
-/**
- * The threshold's background field.
- *
- * It paints absolutely inside its own relative, isolated parent and never
- * against the viewport, so a Portal panel can hold one without covering the
- * page. It takes no pointer events and carries no words.
- *
- * When WebGL is unavailable, when the design-system tokens are not in the
- * cascade above it, or when the context is lost after mounting, the element
- * keeps its still field: a token-built radial gradient that needs no GPU. The
- * room is never blank.
- *
- * The window carries one shader canvas. While Nadia's water is painting her
- * arrival, the room holds this same still field and mounts nothing; the
- * moment she stands clear the water leaves and the room's canvas is the one
- * that paints (`canvas-budget.ts`).
- */
-export function ThresholdRoom({ className, dimmed = false, energy = 0, ready = false, }) {
-    const still = useReducedMotion();
-    const hostRef = useRef(null);
-    const mountRef = useRef(null);
-    const [surface, setSurface] = useState("still");
-    const held = useCanvasHeld();
-    const speed = still ? 0 : ROOM_SPEED * clampUnit(energy);
-    // The deferred mount reads the values current when it runs, not the ones of
-    // the render that scheduled it.
-    const speedRef = useRef(speed);
-    const readyRef = useRef(ready);
-    useEffect(() => {
-        speedRef.current = speed;
-        readyRef.current = ready;
-    });
-    // The window's one canvas. While Nadia's water holds it the room keeps its
-    // still field; when the hold is released the room mounts. Every other prop
-    // change is carried into the live mount by the two effects below, so a prop
-    // change never rebuilds a WebGL context.
-    //
-    // The mount is deferred by one microtask. Effects run in tree order, so a
-    // presence mounted after the room takes its hold after this effect has run;
-    // deferring lets that hold cancel a mount that has not happened yet, and
-    // the window never carries two live contexts, not even for one tick.
-    useEffect(() => {
-        const host = hostRef.current;
-        if (!host || held)
-            return;
-        let cancelled = false;
-        let canvas = null;
-        const clearCanvases = () => {
-            for (const element of host.querySelectorAll("canvas"))
-                element.remove();
-            host.removeAttribute("data-paper-shader");
-        };
-        const handleContextLost = (event) => {
-            event.preventDefault();
-            canvas?.removeEventListener("webglcontextlost", handleContextLost);
-            canvas = null;
-            try {
-                mountRef.current?.dispose();
-            }
-            catch {
-                // The still field is already behind the canvas; vendor cleanup failing
-                // must not take the room down with it.
-            }
-            mountRef.current = null;
-            clearCanvases();
-            setSurface("still");
-        };
-        const mount = () => {
-            if (cancelled)
-                return;
-            const ink = resolveIdentityColor(host, ROOM_INK_TOKEN);
-            const field = resolveIdentityColor(host, readyRef.current ? ROOM_READY_TOKEN : ROOM_FIELD_TOKEN);
-            // Without the design-system cascade there is no palette to paint with, and
-            // a guessed colour would be a second source for a token value.
-            if (!ink || !field)
-                return;
-            try {
-                mountRef.current = new ShaderMount(host, meshGradientFragmentShader, {
-                    u_colors: [field, ink],
-                    u_colorsCount: 2,
-                    u_distortion: ROOM_DISTORTION,
-                    u_fit: ShaderFitOptions.contain,
-                    u_grainMixer: 0,
-                    u_grainOverlay: 0,
-                    u_offsetX: defaultObjectSizing.offsetX,
-                    u_offsetY: defaultObjectSizing.offsetY,
-                    u_originX: defaultObjectSizing.originX,
-                    u_originY: defaultObjectSizing.originY,
-                    u_rotation: ROOM_ROTATION,
-                    u_scale: defaultObjectSizing.scale,
-                    u_swirl: ROOM_SWIRL,
-                    u_worldHeight: defaultObjectSizing.worldHeight,
-                    u_worldWidth: defaultObjectSizing.worldWidth,
-                }, undefined, speedRef.current, ROOM_FRAME, ROOM_MIN_PIXEL_RATIO, ROOM_MAX_PIXEL_COUNT);
-                canvas = mountRef.current.canvasElement;
-                canvas.addEventListener("webglcontextlost", handleContextLost);
-                setSurface("shader");
-            }
-            catch {
-                // The constructor prepends its canvas before it reaches the context, so
-                // a failed mount leaves one behind that would cover the still field.
-                mountRef.current = null;
-                clearCanvases();
-                setSurface("still");
-            }
-        };
-        queueMicrotask(mount);
-        return () => {
-            cancelled = true;
-            canvas?.removeEventListener("webglcontextlost", handleContextLost);
-            try {
-                mountRef.current?.dispose();
-            }
-            catch {
-                // Same reason as above: disposal is best effort.
-            }
-            mountRef.current = null;
-            clearCanvases();
-            setSurface("still");
-        };
-    }, [held]);
-    useEffect(() => {
-        mountRef.current?.setSpeed(speed);
-    }, [speed]);
-    useEffect(() => {
-        const host = hostRef.current;
-        const mount = mountRef.current;
-        if (!host || !mount)
-            return;
-        const ink = resolveIdentityColor(host, ROOM_INK_TOKEN);
-        const field = resolveIdentityColor(host, ready ? ROOM_READY_TOKEN : ROOM_FIELD_TOKEN);
-        if (!ink || !field)
-            return;
-        mount.setUniforms({ u_colors: [field, ink] });
-    }, [ready]);
-    return (_jsx("div", { "aria-hidden": "true", className: cn("nc-threshold-room", className), "data-dimmed": dimmed || undefined, "data-ready": ready || undefined, "data-surface": surface, ref: hostRef }));
-}

package/dist/components/threshold/threshold.css

@@ -1,228 +0,0 @@
-/*
- * @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

@@ -1,8 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,43 +0,0 @@
-"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

@@ -1,10 +0,0 @@
-/**
- * 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

@@ -1 +0,0 @@
-{"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

@@ -1,32 +0,0 @@
-"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/threshold.d.ts

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

package/dist/threshold.d.ts.map

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

package/dist/threshold.js

@@ -1,13 +0,0 @@
-/*
- * `@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";