@nadicodeai/ui 12.1.136 → 12.1.137

package/dist/internal/agent-orb.js

@@ -1,5 +1,5 @@
 import { finalizeFrame, MODE_FRAMES, makeProj, radiusScale, resolvePreset, } from "thinking-orbs/engine";
-import { motionPose, nativeSpeed, paintOrbCue, reducedBreath, readOrbTiming, stateSpeed, } from "./agent-orb-motion.js";
+import { motionPose, nativeSpeed, ORB_FRAME_RATE, paintOrbCue, reducedBreath, readOrbTiming, stateSpeed, } from "./agent-orb-motion.js";
 const agentOrbForms = {
     orbit: "working",
     globe: "searching",
@@ -28,14 +28,11 @@ const presenceWeights = {
 const nadiaStripes = ["--nc-identity-azzurro", "--nc-identity-verde", null, "--nc-identity-rosso"];
 const celebrationTokens = ["--nc-acqua-700", "--nc-viola-700", "--nc-warning", "--nc-rosso-700"];
 const statusTokens = { waiting: "--nc-warning-deep", blocked: "--nc-error" };
-const appearanceTokens = [
-    ...celebrationTokens,
-    ...nadiaStripes.filter((token) => token !== null),
-    ...Object.values(statusTokens),
-    "--nc-duration-wait",
-    "--nc-duration-confirm",
-    "--nc-duration-transition",
-];
+/**
+ * WebKit's canvas rejects `color-mix()` in a gradient stop, so a mix is handed
+ * to the canvas as the colour it computes to.
+ */
+const computedColors = new Map();
 /**
  * Sofia's four stripes: cobalto, giallo, the orb's own pigment and arancio, the
  * identity hues Nadia does not wear, so side by side the two carry all six.
@@ -50,6 +47,14 @@ const figureStripes = {
     nadia: nadiaStripes,
     sofia: sofiaStripes,
 };
+const appearanceTokens = [
+    ...celebrationTokens,
+    ...[...nadiaStripes, ...sofiaStripes].filter((token) => token !== null),
+    ...Object.values(statusTokens),
+    "--nc-duration-wait",
+    "--nc-duration-confirm",
+    "--nc-duration-transition",
+];
 /** A stable direction on the unit sphere, the vendor's Fibonacci lattice. */
 function fibonacci(i, n) {
     const y = 1 - (2 * (i + 0.5)) / n;
@@ -120,10 +125,18 @@ function facing(frame, size) {
         dot.x = size - dot.x;
     return frame;
 }
+function detailProfile(drawn) {
+    if (drawn <= 32)
+        return 20;
+    return drawn <= 48 ? 32 : 64;
+}
+function shownState(state, age, motion, timing) {
+    return motion === "ambient" || (state === "done" && age >= timing.doneDuration) ? "idle" : state;
+}
 function paintAgentOrb(context, input) {
     const { form, size, seconds, color, state, age, reduced, breath, celebrationColors, stripeColors, } = input;
     const presence = presenceWeights[input.presence];
-    const preset = resolvePreset(agentOrbForms[form === "nadia" || form === "sofia" ? "ribbon" : form], size <= 32 ? 20 : 64);
+    const preset = resolvePreset(agentOrbForms[form === "nadia" || form === "sofia" ? "ribbon" : form], detailProfile(size));
     const frame = form === "nadia"
         ? stripedRibbonFrame(size, seconds, preset.opts)
         : form === "sofia"
@@ -131,7 +144,7 @@ function paintAgentOrb(context, input) {
             : MODE_FRAMES[preset.mode](size, seconds, preset.opts);
     context.clearRect(0, 0, size, size);
     const done = state === "done" && age >= input.timing.doneDuration;
-    const visualState = input.motion === "ambient" || done ? "idle" : state;
+    const visualState = shownState(state, age, input.motion, input.timing);
     const poseAge = input.motion === "ambient" ? 0 : done ? age - input.timing.doneDuration : age;
     const pose = motionPose(visualState, poseAge, input.timing, reduced);
     const cueAge = done ? age - input.timing.doneDuration : age;
@@ -173,16 +186,137 @@ function paintAgentOrb(context, input) {
         paintOrbCue(context, visualState, size, cueAge, reduced, celebrationColors, "front", breath, input.timing, statusColor);
     }
 }
+function createOrbWatchers(stopped) {
+    const orbs = new Map();
+    const motion = window.matchMedia("(prefers-reduced-motion: reduce)");
+    function changedWithin(roots) {
+        const inside = (canvas) => {
+            for (let node = canvas; node; node = node.parentElement)
+                if (roots.has(node))
+                    return true;
+            return false;
+        };
+        const writes = [...orbs].flatMap(([canvas, orb]) => (inside(canvas) ? [orb.readChange()] : []));
+        for (const write of writes)
+            write?.();
+    }
+    function playAll() {
+        for (const orb of orbs.values())
+            orb.play();
+    }
+    // A browser that cannot tell whether an orb is seen shows it as seen.
+    const visibility = typeof IntersectionObserver === "undefined"
+        ? undefined
+        : new IntersectionObserver((entries) => {
+            for (const entry of entries)
+                orbs.get(entry.target)?.setVisible(entry.isIntersecting);
+        });
+    const appearance = new MutationObserver((records) => {
+        changedWithin(new Set(records.map((record) => record.target)));
+    });
+    appearance.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ["class", "style", "data-theme"],
+        subtree: true,
+    });
+    const box = new ResizeObserver((entries) => {
+        const writes = entries.map((entry) => orbs.get(entry.target)?.readResize());
+        for (const write of writes)
+            write?.();
+    });
+    // A colour transition on the canvas or on an element it inherits from hands
+    // the observer the colour the transition starts from, so the orb reads its
+    // colour again when that transition ends. The event bubbles up from where it
+    // ran, never down to the canvas, so it is heard on the document.
+    function settle(event) {
+        if (event.propertyName === "color" && event.target instanceof Node)
+            changedWithin(new Set([event.target]));
+    }
+    function resized() {
+        changedWithin(new Set([document.documentElement]));
+    }
+    document.addEventListener("transitionend", settle, true);
+    motion.addEventListener("change", playAll);
+    document.addEventListener("visibilitychange", playAll);
+    window.addEventListener("resize", resized);
+    return {
+        motion,
+        watch(canvas, orb) {
+            orbs.set(canvas, orb);
+            visibility?.observe(canvas);
+            box.observe(canvas);
+        },
+        unwatch(canvas, orb) {
+            if (orbs.get(canvas) !== orb)
+                return;
+            orbs.delete(canvas);
+            if (orbs.size > 0) {
+                visibility?.unobserve(canvas);
+                box.unobserve(canvas);
+                return;
+            }
+            visibility?.disconnect();
+            appearance.disconnect();
+            box.disconnect();
+            document.removeEventListener("transitionend", settle, true);
+            motion.removeEventListener("change", playAll);
+            document.removeEventListener("visibilitychange", playAll);
+            window.removeEventListener("resize", resized);
+            stopped();
+        },
+    };
+}
+let pageOrbWatchers;
+function createOrbClock() {
+    const running = new Set();
+    let request = 0;
+    function frame(now) {
+        request = 0;
+        for (const orb of [...running])
+            if (!orb(now))
+                running.delete(orb);
+        if (running.size > 0 && request === 0)
+            request = requestAnimationFrame(frame);
+    }
+    return {
+        run(orb) {
+            running.add(orb);
+            if (request === 0)
+                request = requestAnimationFrame(frame);
+        },
+        stop(orb) {
+            running.delete(orb);
+            if (running.size > 0 || request === 0)
+                return;
+            cancelAnimationFrame(request);
+            request = 0;
+        },
+    };
+}
+const orbClock = createOrbClock();
+/**
+ * A display's frames arrive a little early or late, so a paint due within this
+ * many milliseconds is painted on the frame at hand: at 60 Hz a 30 fps orb then
+ * paints every second frame rather than every second or third.
+ */
+const PAINT_SLACK_MS = 4;
+function orbWatchers() {
+    pageOrbWatchers ??= createOrbWatchers(() => {
+        pageOrbWatchers = undefined;
+    });
+    return pageOrbWatchers;
+}
+export const LONGEST_FRAME_SECONDS = 0.1;
 export function mountAgentOrb(canvas, options) {
     const { form, presence = "plain" } = options;
     const context = canvas.getContext("2d");
     if (!context)
         return { destroy() { }, setPaused(_value) { }, setState(_value) { } };
-    const motion = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const page = orbWatchers();
+    const { motion } = page;
     let paused = options.paused ?? false;
     let visible = true;
     let disposed = false;
-    let request = 0;
     let seconds = 0.6;
     let age = 0;
     let breath = 0;
@@ -241,11 +375,10 @@ export function mountAgentOrb(canvas, options) {
         return !(state === "blocked" && age >= timing.blockedDuration);
     }
     function tick(now) {
-        request = 0;
         if (!running())
-            return;
+            return false;
         if (previous !== null) {
-            const elapsed = Math.min((now - previous) / 1000, 0.1);
+            const elapsed = Math.min((now - previous) / 1000, LONGEST_FRAME_SECONDS);
             if (motion.matches)
                 breath += elapsed;
             else {
@@ -257,98 +390,92 @@ export function mountAgentOrb(canvas, options) {
             }
         }
         previous = now;
-        if (now - lastPaint >= 1000 / 30 || !running()) {
+        const rate = shownState(state, age, orbMotion, timing) === "idle"
+            ? ORB_FRAME_RATE.resting
+            : ORB_FRAME_RATE.busy;
+        if (now - lastPaint >= 1000 / rate - PAINT_SLACK_MS || !running()) {
             paint();
             lastPaint = now;
         }
-        if (running())
-            request = requestAnimationFrame(tick);
+        return running();
     }
     function play() {
-        cancelAnimationFrame(request);
-        request = 0;
         previous = null;
         paint();
         if (running())
-            request = requestAnimationFrame(tick);
+            orbClock.run(tick);
+        else
+            orbClock.stop(tick);
     }
-    /** WebKit's canvas rejects `color-mix()` in a gradient stop, so a mix is
-     * handed to the canvas as the colour it computes to. */
     function computedColor(declaration) {
+        const known = computedColors.get(declaration);
+        if (known)
+            return known;
         const probe = document.createElement("span");
         probe.hidden = true;
         probe.style.color = declaration;
         (canvas.parentElement ?? document.body).append(probe);
         const resolved = getComputedStyle(probe).color;
         probe.remove();
-        return resolved || color;
-    }
-    function readAppearanceKey(appearance, side) {
-        return [
-            side,
-            window.devicePixelRatio || 1,
-            appearance.color,
-            ...appearanceTokens.map((token) => appearance.getPropertyValue(token)),
-        ].join("|");
+        if (!resolved)
+            return color;
+        computedColors.set(declaration, resolved);
+        return resolved;
     }
-    function refreshIfChanged() {
-        if (readAppearanceKey(getComputedStyle(canvas), measure()) !== appearanceKey)
-            refresh();
+    function readAppearance() {
+        const style = getComputedStyle(canvas);
+        const tokens = new Map(appearanceTokens.map((token) => [token, style.getPropertyValue(token).trim()]));
+        const key = [window.devicePixelRatio || 1, style.color, ...tokens.values()].join("|");
+        return { key, color: style.color, tokens, timing: readOrbTiming(style) };
     }
-    function refresh() {
+    function resize(side) {
         if (disposed || !canvas.isConnected)
             return;
-        painted = measure();
+        painted = side;
         const backing = Math.max(1, Math.round(painted * Math.min(window.devicePixelRatio || 1, 2)));
         canvas.width = backing;
         canvas.height = backing;
         ratio = backing / painted;
-        const appearance = getComputedStyle(canvas);
-        appearanceKey = readAppearanceKey(appearance, painted);
+        play();
+    }
+    function refresh(appearance, side) {
+        appearanceKey = appearance.key;
         color = appearance.color;
-        timing = readOrbTiming(appearance);
+        timing = appearance.timing;
         statusColors = {
-            waiting: computedColor(appearance.getPropertyValue(statusTokens.waiting).trim() || color),
-            blocked: computedColor(appearance.getPropertyValue(statusTokens.blocked).trim() || color),
+            waiting: computedColor(appearance.tokens.get(statusTokens.waiting) || color),
+            blocked: computedColor(appearance.tokens.get(statusTokens.blocked) || color),
         };
-        celebrationColors = celebrationTokens.map((token) => computedColor(`color-mix(in oklch, ${appearance.getPropertyValue(token).trim() || color} 75%, white)`));
-        stripeColors = (figureStripes[form] ?? []).map((token) => (token && appearance.getPropertyValue(token).trim()) || color);
-        play();
+        celebrationColors = celebrationTokens.map((token) => computedColor(`color-mix(in oklch, ${appearance.tokens.get(token) || color} 75%, white)`));
+        stripeColors = (figureStripes[form] ?? []).map((token) => (token && appearance.tokens.get(token)) || color);
+        resize(side);
     }
-    const visibility = new IntersectionObserver(([entry]) => {
-        visible = entry?.isIntersecting ?? false;
-        play();
-    });
-    visibility.observe(canvas);
-    const appearance = new MutationObserver(refreshIfChanged);
-    for (let ancestor = canvas; ancestor; ancestor = ancestor.parentElement) {
-        appearance.observe(ancestor, {
-            attributes: true,
-            attributeFilter: ["class", "style", "data-theme"],
-        });
+    function readResize() {
+        if (disposed || !canvas.isConnected)
+            return undefined;
+        const side = measure();
+        return Math.abs(side - painted) >= 0.5 ? () => resize(side) : undefined;
     }
-    // Layout, not the declared size, decides the pixels, so the box is observed
-    // rather than remounted on: an orb sized by its container stays sharp.
-    const box = new ResizeObserver(() => {
-        if (Math.abs(measure() - painted) >= 0.5)
-            refresh();
-    });
-    box.observe(canvas);
-    // A colour transition on the canvas or on an element it inherits from hands
-    // the observer the colour the transition starts from, so the orb reads its
-    // colour again when that transition ends. The event bubbles up from where it
-    // ran, never down to the canvas, so it is heard on the document.
-    function settle(event) {
-        if (event.propertyName === "color" &&
-            event.target instanceof Node &&
-            event.target.contains(canvas))
-            refreshIfChanged();
+    function readChange() {
+        if (disposed || !canvas.isConnected)
+            return undefined;
+        const appearance = readAppearance();
+        if (appearance.key === appearanceKey)
+            return readResize();
+        const side = measure();
+        return () => refresh(appearance, side);
     }
-    document.addEventListener("transitionend", settle, true);
-    motion.addEventListener("change", play);
-    document.addEventListener("visibilitychange", play);
-    window.addEventListener("resize", refreshIfChanged);
-    refresh();
+    const watched = {
+        readChange,
+        readResize,
+        setVisible(value) {
+            visible = value;
+            play();
+        },
+        play,
+    };
+    page.watch(canvas, watched);
+    readChange()?.();
     return {
         setState(value) {
             state = value;
@@ -362,14 +489,8 @@ export function mountAgentOrb(canvas, options) {
         },
         destroy() {
             disposed = true;
-            cancelAnimationFrame(request);
-            visibility.disconnect();
-            appearance.disconnect();
-            box.disconnect();
-            document.removeEventListener("transitionend", settle, true);
-            motion.removeEventListener("change", play);
-            document.removeEventListener("visibilitychange", play);
-            window.removeEventListener("resize", refreshIfChanged);
+            orbClock.stop(tick);
+            page.unwatch(canvas, watched);
         },
     };
 }

package/dist/showcase/usage.generated.js

@@ -624,9 +624,9 @@ export const USAGE = [
         module: "agent-orb",
         family: "Status",
         summary: "An Agent, anywhere: her orb, the only thing that moves on its own.",
-        when: 'An Agent, anywhere: 20 in the sidebar, 32 in a row, 64 on her Profile card, 96 in an Agent card, 160 on entry. There is no other Agent picture. The sizes are 20, 24, 32, 40, 64, 96 and 160 px, and no other. On a photograph the orb takes the stronger `presence="over-picture"` weight; everywhere else it is `plain`.',
+        when: "An Agent, anywhere: 20 in the sidebar, 32 in a row, 64 on her Profile card, 96 in an Agent card, 160 on entry. There is no other Agent picture. The sizes are 20, 24, 32, 40, 64, 96 and 160 px, and no other. Detail follows the size the orb is drawn at: up to 32 px it draws the engine's lightest dot profile, at 40 px the middle one and from 64 px the full one, since a small orb cannot show the full profile's dots apart. On a photograph the orb takes the stronger `presence=\"over-picture\"` weight; everywhere else it is `plain`.",
         instead: 'A person is an `Avatar`. The system\'s own wait is the waiting line, never an orb. An orb in artwork, such as a sign-in picture, takes `motion="ambient"` and claims no activity. An orb that stands for an Agent shows her real state.',
-        behaviour: "The only thing that moves on its own. Idle particles turn at 86.4% of the form's native pace, with a separate 6.4 s breath. Working sweeps a ribbon every 3.2 s; thinking passes three pulses over 2.4 s. Waiting leans softly as centered pause bars arrive; blocked recoils as a centered stop sign lands. Both entrances settle over 2 s, then waiting breathes and blocked holds still. Done celebrates once over 4.8 s, then rests at 72% of native particle speed with the Idle breath. A state change interrupts the previous gesture; `motionKey` replays it and `paused` freezes it. A surface that only knows a machine checked in draws idle. No state draws a circle around the orb. Ambient motion moves the form at its own pace with no state pose or cue. Reduced motion: movement stops, a thinking or working orb breathes between full ink and 0.45 opacity so busy still reads as busy, an ambient orb holds still, and waiting and blocked keep their centered signs without an entrance gesture. An orb is one of seven forms, `ribbon`, `lattice`, `orbit`, `globe`, `network`, `braid` and `morph`, in one colour a person chose: cobalto, verde or arancio, or none, which draws it in the text colour. Giallo is not offered because it fails 3:1 on white; rosso is not offered because it is the error red. nadicode's own two Agents are the only ones with a figure nobody chooses, the same at every size and in every state. Nadia is her striped ribbon, the form `nadia`: azzurro, verde, the text colour and rosso along its whole length. Sofia, the Agent that looks up a new company, is her sister, the form `sofia`: the same ribbon turned to face Nadia's, striped cobalto, giallo, the text colour and arancio, the identity hues Nadia does not wear. Neither figure is ever stored as an Agent's look. An Agent's form is stored as `orb:<form>` and its colour as the identity hex or nothing; a template declares its starting look the same way. The stored-appearance resolver reads it: the root Agent always draws as Nadia, an unknown form draws `orbit`, an unknown colour the text colour, and a stored rosso draws arancio. The retired `forma:*` shapes each draw one of the seven forms, so an Agent that chose one before the orbs keeps a distinct look. An Agent's look is a person's choice and is never derived from a name, id or role. A template that names no look is the one exception: `templateAgentOrb` gives it a form and colour fixed by its slug, so the templates in a gallery differ and the Portal and Nadia draw the same one; Nadia and Sofia keep their figures.",
+        behaviour: "The only thing that moves on its own. Idle particles turn at 86.4% of the form's native pace, with a separate 6.4 s breath. Working sweeps a ribbon every 3.2 s; thinking passes three pulses over 2.4 s. Waiting leans softly as centered pause bars arrive; blocked recoils as a centered stop sign lands. Both entrances settle over 2 s, then waiting breathes and blocked holds still. Done celebrates once over 4.8 s, then rests at 72% of native particle speed with the Idle breath. A state change interrupts the previous gesture; `motionKey` replays it and `paused` freezes it. A surface that only knows a machine checked in draws idle. No state draws a circle around the orb. Ambient motion moves the form at its own pace with no state pose or cue. An orb at rest (idle, ambient, or done after its celebration) paints 15 frames a second; every other state, gesture and the celebration paint 30. The pace is the same at either rate. Reduced motion: movement stops, a thinking or working orb breathes between full ink and 0.45 opacity so busy still reads as busy, an ambient orb holds still, and waiting and blocked keep their centered signs without an entrance gesture. An orb is one of seven forms, `ribbon`, `lattice`, `orbit`, `globe`, `network`, `braid` and `morph`, in one colour a person chose: cobalto, verde or arancio, or none, which draws it in the text colour. Giallo is not offered because it fails 3:1 on white; rosso is not offered because it is the error red. nadicode's own two Agents are the only ones with a figure nobody chooses, the same at every size and in every state. Nadia is her striped ribbon, the form `nadia`: azzurro, verde, the text colour and rosso along its whole length. Sofia, the Agent that looks up a new company, is her sister, the form `sofia`: the same ribbon turned to face Nadia's, striped cobalto, giallo, the text colour and arancio, the identity hues Nadia does not wear. Neither figure is ever stored as an Agent's look. An Agent's form is stored as `orb:<form>` and its colour as the identity hex or nothing; a template declares its starting look the same way. The stored-appearance resolver reads it: the root Agent always draws as Nadia, an unknown form draws `orbit`, an unknown colour the text colour, and a stored rosso draws arancio. The retired `forma:*` shapes each draw one of the seven forms, so an Agent that chose one before the orbs keeps a distinct look. An Agent's look is a person's choice and is never derived from a name, id or role. A template that names no look is the one exception: `templateAgentOrb` gives it a form and colour fixed by its slug, so the templates in a gallery differ and the Portal and Nadia draw the same one; Nadia and Sofia keep their figures.",
         words: "Text sits beside the orb, never on it. Where the exact state matters a word names it: *Working*, *Waiting for you*.",
         access: '`role="img"` labelled with the Agent\'s name, and her state where it matters; `decorative` when her name is already beside it.',
     },