@fusion.dev/helix 0.9.0 → 0.10.1

package/custom-elements.json

@@ -54613,6 +54613,40 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/orb/root/orb-color.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "readColor",
+          "return": {
+            "type": {
+              "text": "[number, number, number]"
+            }
+          },
+          "parameters": [
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              }
+            }
+          ],
+          "description": "A computed color as three sRGB bytes, whatever space it was written in.\n\n**Painting it is the only way to read it.** A color-typed property is\nresolved before it is reported, but resolved is not the same as converted:\nChrome hands back `lab(100 0 0)` for a token built through `oklab`, and this\nused to scrape the first three numbers out of that and call them red, green\nand blue. White arrived as `rgb(100, 0, 0)`. In light mode the near dots were\n`lab(0 0 0)`, which scrapes to black and looks right, so only dark mode showed\nit: dark red mixed toward black, on a near-black ground.\n\nA 1x1 fill and `getImageData` is a readback, so the answer is cached against\nthe string it came from. There are two per orb and they change when the theme\ndoes."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "readColor",
+          "declaration": {
+            "name": "readColor",
+            "module": "src/orb/root/orb-color.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/orb/root/orb-root.css.ts",
@@ -54639,7 +54673,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A cloud of dots on a sphere, drawn to a canvas, with one shape per state:\n`thinking` is a narrow sash with a wave running through it, `fetching` spreads\ninto a globe with a highlight sweeping pole to pole, `working` flattens and\ntilts with its bands shearing past each other, and `done` settles into an even\nball.\n\n**None of them is a separate drawing.** Each is the same banded sphere given\ndifferent numbers, so changing state interpolates the numbers and every frame\nin between is a whole shape. A loader that cuts between pictures says the\nwork restarted; one that carries a shape into the next says it moved on.\n\n**Nothing spins.** All the movement is inside the shape, which is what makes\nit read as thought rather than as a thing being rotated.\n\n**The palette is read from the tokens**, not given as colors: a dot's ink is\nmixed toward the ground by how far away it is, and both ends come from\n`--orb-color` and `--orb-ground`. That is what makes depth survive a theme\nchange without the consumer restating anything.\n\n**It stops when nobody is looking**, off screen and in a background tab, and\n`prefers-reduced-motion` gets one still frame rather than an empty box.",
+          "description": "A cloud of dots, drawn to a canvas, with one shape per state. `connecting`\nand `thinking` are the same leaning sash and differ in how agitated it is;\n`waiting` and `done` are the same settled ball at different tempos, which is\nthe difference between not having started and having finished. `fetching` is\na globe with a light going round it, `listening` a closed sphere with a\nripple crossing it, and `working` a ring.\n\n**None of them is a separate drawing.** Each is the same banded grid given\ndifferent numbers, so changing state interpolates the numbers and every frame\nin between is a whole shape. A loader that cuts between pictures says the\nwork restarted; one that carries a shape into the next says it moved on.\n\n**A change is measured before it is played.** Two states differing in one\nsmall number are given less time than a sash becoming a ring, and the\nsilhouette leads what the shape is doing, so a light is never seen orbiting\nsomething that has not finished becoming round.\n\n**Nothing spins.** The whole cloud holds still and everything that moves is\nmoving inside it, which is what makes it read as thought rather than as a\nthing being rotated. The one exception is the light, which travels because a\nring of evenly spaced dots is unchanged by rotation: without something fixed\nin space passing over them, a state that turns has nothing a reader can see\nturning.\n\n**The palette is read from the tokens**, not given as colors: a dot's ink is\nmixed toward the ground by how far away it is, and both ends come from\n`--orb-color` and `--orb-ground`. That is what makes depth survive a theme\nchange without the consumer restating anything.\n\n**It stops when nobody is looking**, off screen and in a background tab, and\n`prefers-reduced-motion` gets one still frame rather than an empty box.",
           "name": "HelixOrb",
           "cssProperties": [
             {
@@ -54788,6 +54822,16 @@
               "privacy": "private",
               "default": "0"
             },
+            {
+              "kind": "field",
+              "name": "reach",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0",
+              "description": "How far the current change travels, `0` to `1`."
+            },
             {
               "kind": "field",
               "name": "phase",
@@ -54839,6 +54883,16 @@
               },
               "description": "Begins a transition from whatever is on the screen right now."
             },
+            {
+              "kind": "field",
+              "name": "span",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "description": "How long this particular change is given.\n\n**Near states cross quickly and far ones are not hurried.** One length for\nevery pair read as rushed going from `waiting` to `done`, which differ in\ntwo small numbers, and slack going from `thinking` to `working`, which is a\nsash becoming a ring.",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "progress",
@@ -55151,7 +55205,7 @@
                 "slug": "sizes"
               },
               {
-                "description": "The four shapes, side by side.",
+                "description": "The seven shapes, side by side.",
                 "slug": "states"
               }
             ],
@@ -55190,9 +55244,9 @@
           "kind": "variable",
           "name": "ORB_STATES",
           "type": {
-            "text": "['thinking', 'fetching', 'working', 'done']"
+            "text": "[\n  'waiting',\n  'connecting',\n  'thinking',\n  'fetching',\n  'listening',\n  'working',\n  'done',\n]"
           },
-          "default": "['thinking', 'fetching', 'working', 'done']",
+          "default": "[ 'waiting', 'connecting', 'thinking', 'fetching', 'listening', 'working', 'done', ]",
           "description": "The states an orb can be in, in the order a task tends to pass through them.\n\nExported so the component can validate an attribute against the same list the\ngenerator reads, rather than keeping a second copy that drifts."
         },
         {
@@ -55201,7 +55255,7 @@
           "type": {
             "text": "Record<OrbState, OrbParams>"
           },
-          "default": "{ /* Settled: an even ball, breathing, with nothing traveling through it. */ done: { belt: 1, edge: 0, jitter: 1, rate: 1.1, rot: 0, scan: 0, shear: 0, squash: 1, waveA: 0, waveB: 0, }, /* The sash opened out into a globe, with a highlight sweeping pole to pole: the shape of looking through something. */ fetching: { belt: 1, edge: 0, jitter: 0, rate: 2.4, rot: 0, scan: 1, shear: 0, squash: 1, waveA: 0, waveB: 0, }, /* A narrow sash with a wave running through it, tipped so the band crosses the face rather than sitting level. */ thinking: { belt: 0.47, edge: 1, jitter: 0, rate: 2.1, rot: 1.52, scan: 0, shear: 0, squash: 1, waveA: 0.16, waveB: 0.07, }, /* Flattened and tilted, bands shearing past each other. **The squash is what makes this state legible at 20px**: `fetching` and `working` are both full spheres, and at that size a difference in motion alone is not a difference a reader can see. A silhouette is. */ working: { belt: 1, edge: 0, jitter: 0, rate: 2.4, rot: 0.5, scan: 0, shear: 1.3, squash: 0.72, waveA: 0, waveB: 0, }, }",
+          "default": "{ /* The same sash as `thinking` on the same lean, thinner and calmer: the route between them is a narrowing rather than a change of shape. */ connecting: { belt: 0.32, breathe: 0.07, edge: 1, jitter: 0, orbit: 0, pulse: 0, rate: 1.05, ring: 0, rot: 1.52, shear: 0, squash: 1, waveA: 0.035, waveB: 0, }, /* Settled: an even ball, breathing, with nothing traveling through it. */ done: { belt: 1, breathe: 0.035, edge: 0, jitter: 1, orbit: 0, pulse: 0, rate: 1.1, ring: 0, rot: 0, shear: 0, squash: 1, waveA: 0, waveB: 0, }, /* A globe with a light going round it, which is the shape of looking through something. */ fetching: { belt: 1, breathe: 0, edge: 0, jitter: 0.62, orbit: 1, pulse: 0, rate: 2, ring: 0, rot: 0, shear: 0, squash: 1, waveA: 0, waveB: 0, }, /* Receptive: a closed sphere with a ripple crossing it, slower than `connecting` and symmetric where that one is a band. */ listening: { belt: 1, breathe: 0.03, edge: 0, jitter: 1, orbit: 0, pulse: 0.055, rate: 1.15, ring: 0, rot: 0, shear: 0, squash: 1, waveA: 0, waveB: 0, }, /* A narrow sash with a wave running through it, tipped so the band crosses the face rather than sitting level. */ thinking: { belt: 0.47, breathe: 0, edge: 1, jitter: 0, orbit: 0, pulse: 0, rate: 2.1, ring: 0, rot: 1.52, shear: 0, squash: 1, waveA: 0.16, waveB: 0.07, }, /* The same settled ball as `done` at a slower tempo, which is the difference between not having started and having finished. */ waiting: { belt: 1, breathe: 0.075, edge: 0, jitter: 1, orbit: 0, pulse: 0, rate: 0.55, ring: 0, rot: 0, shear: 0, squash: 1, waveA: 0, waveB: 0, }, /* **A ring, which is a different object rather than an adjusted ball.** This was a squashed sphere with its bands shearing, and a sphere adjusted is still a sphere: at 20px it read as the same mark as every other state. A torus has a hole. The bands run around the tube, so the shear twists it like rope instead of sliding flat layers past each other, and the light is what makes that turning visible at all. */ working: { belt: 1, breathe: 0.035, edge: 0, jitter: 0, orbit: 0.7, pulse: 0, rate: 1.9, ring: 1, rot: 0.3, shear: 0.62, squash: 1, waveA: 0, waveB: 0, }, }",
           "description": "Each state, as numbers.\n\nThey are deliberately close together. Two states that differ in every number\ntake a long, busy route between them; these differ in the two or three that\ncarry the meaning, so a transition reads as one thing becoming another rather\nthan as a shuffle."
         },
         {
@@ -55234,6 +55288,75 @@
           ],
           "description": "Halfway between two states, key by key."
         },
+        {
+          "kind": "function",
+          "name": "stateDistance",
+          "return": {
+            "type": {
+              "text": "number"
+            }
+          },
+          "parameters": [
+            {
+              "name": "a",
+              "type": {
+                "text": "OrbParams"
+              }
+            },
+            {
+              "name": "b",
+              "type": {
+                "text": "OrbParams"
+              }
+            }
+          ],
+          "description": "How far apart two states are, `0` to `1`, each key against its own range.\n\nTwo states differing in one small number should not be given the time\n`thinking` to `done` needs. One length for every pair reads as rushed at one\nend of the set and slack at the other."
+        },
+        {
+          "kind": "function",
+          "name": "blendStaged",
+          "return": {
+            "type": {
+              "text": "OrbParams"
+            }
+          },
+          "parameters": [
+            {
+              "name": "a",
+              "type": {
+                "text": "OrbParams"
+              }
+            },
+            {
+              "name": "b",
+              "type": {
+                "text": "OrbParams"
+              }
+            },
+            {
+              "name": "shape",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "name": "character",
+              "type": {
+                "text": "number"
+              }
+            }
+          ],
+          "description": "Two states blended on two clocks: the silhouette, and then what it is doing.\n\n**The other order shows a light orbiting a sash.** Every number moving on one\ncurve makes a change of state read as a cross-fade between two pictures; the\nshape arriving first makes it read as one thing becoming another."
+        },
+        {
+          "kind": "variable",
+          "name": "TRAIL",
+          "type": {
+            "text": "number"
+          },
+          "default": "0.2",
+          "description": "How far the character trails the silhouette, as a share of the run."
+        },
         {
           "kind": "function",
           "name": "paramsFor",
@@ -55446,6 +55569,30 @@
             "module": "src/orb/root/orb-shapes.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "stateDistance",
+          "declaration": {
+            "name": "stateDistance",
+            "module": "src/orb/root/orb-shapes.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "blendStaged",
+          "declaration": {
+            "name": "blendStaged",
+            "module": "src/orb/root/orb-shapes.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "TRAIL",
+          "declaration": {
+            "name": "TRAIL",
+            "module": "src/orb/root/orb-shapes.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "paramsFor",

package/dist/chat/message/chat-message.css.js

@@ -138,6 +138,8 @@ justify-content: flex-end;
 [part="content"] {
 inline-size: fit-content;
 max-inline-size: 100%;
+min-inline-size: 0;
+overflow-x: auto;
 }
 
 :host([state="streaming"]) [part="content"][data-empty]::after {

package/dist/orb/root/orb-color.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Reading a computed color the engine has resolved but not converted.
+ */
+/**
+ * A computed color as three sRGB bytes, whatever space it was written in.
+ *
+ * **Painting it is the only way to read it.** A color-typed property is
+ * resolved before it is reported, but resolved is not the same as converted:
+ * Chrome hands back `lab(100 0 0)` for a token built through `oklab`, and this
+ * used to scrape the first three numbers out of that and call them red, green
+ * and blue. White arrived as `rgb(100, 0, 0)`. In light mode the near dots were
+ * `lab(0 0 0)`, which scrapes to black and looks right, so only dark mode showed
+ * it: dark red mixed toward black, on a near-black ground.
+ *
+ * A 1x1 fill and `getImageData` is a readback, so the answer is cached against
+ * the string it came from. There are two per orb and they change when the theme
+ * does.
+ */
+export declare const readColor: (value: string) => [number, number, number];

package/dist/orb/root/orb-color.js

@@ -0,0 +1,25 @@
+let swatch;
+const known = new Map();
+export const readColor = (value) => {
+    const seen = known.get(value);
+    if (seen) {
+        return seen;
+    }
+    if (swatch === undefined) {
+        swatch = document.createElement('canvas').getContext('2d', { willReadFrequently: true });
+    }
+    if (!swatch) {
+        return [128, 128, 128];
+    }
+    swatch.clearRect(0, 0, 1, 1);
+    swatch.fillStyle = '#808080';
+    swatch.fillStyle = value;
+    swatch.fillRect(0, 0, 1, 1);
+    const [red, green, blue] = swatch.getImageData(0, 0, 1, 1).data;
+    const rgb = [red ?? 128, green ?? 128, blue ?? 128];
+    if (known.size > 64) {
+        known.clear();
+    }
+    known.set(value, rgb);
+    return rgb;
+};

package/dist/orb/root/orb-root.d.ts

@@ -5,19 +5,29 @@ import { type OrbState } from './orb-shapes.js';
  * @summary Says what an agent is doing, as a shape rather than a word.
  *
  * @description
- * A cloud of dots on a sphere, drawn to a canvas, with one shape per state:
- * `thinking` is a narrow sash with a wave running through it, `fetching` spreads
- * into a globe with a highlight sweeping pole to pole, `working` flattens and
- * tilts with its bands shearing past each other, and `done` settles into an even
- * ball.
+ * A cloud of dots, drawn to a canvas, with one shape per state. `connecting`
+ * and `thinking` are the same leaning sash and differ in how agitated it is;
+ * `waiting` and `done` are the same settled ball at different tempos, which is
+ * the difference between not having started and having finished. `fetching` is
+ * a globe with a light going round it, `listening` a closed sphere with a
+ * ripple crossing it, and `working` a ring.
  *
- * **None of them is a separate drawing.** Each is the same banded sphere given
+ * **None of them is a separate drawing.** Each is the same banded grid given
  * different numbers, so changing state interpolates the numbers and every frame
  * in between is a whole shape. A loader that cuts between pictures says the
  * work restarted; one that carries a shape into the next says it moved on.
  *
- * **Nothing spins.** All the movement is inside the shape, which is what makes
- * it read as thought rather than as a thing being rotated.
+ * **A change is measured before it is played.** Two states differing in one
+ * small number are given less time than a sash becoming a ring, and the
+ * silhouette leads what the shape is doing, so a light is never seen orbiting
+ * something that has not finished becoming round.
+ *
+ * **Nothing spins.** The whole cloud holds still and everything that moves is
+ * moving inside it, which is what makes it read as thought rather than as a
+ * thing being rotated. The one exception is the light, which travels because a
+ * ring of evenly spaced dots is unchanged by rotation: without something fixed
+ * in space passing over them, a state that turns has nothing a reader can see
+ * turning.
  *
  * **The palette is read from the tokens**, not given as colors: a dot's ink is
  * mixed toward the ground by how far away it is, and both ends come from
@@ -91,6 +101,8 @@ export declare class HelixOrb extends HelixElement {
      */
     private from;
     private morphAt;
+    /** How far the current change travels, `0` to `1`. */
+    private reach;
     /**
      * The state's clock, accumulated rather than derived.
      *
@@ -118,6 +130,15 @@ export declare class HelixOrb extends HelixElement {
     private measure;
     /** Begins a transition from whatever is on the screen right now. */
     private turn;
+    /**
+     * How long this particular change is given.
+     *
+     * **Near states cross quickly and far ones are not hurried.** One length for
+     * every pair read as rushed going from `waiting` to `done`, which differ in
+     * two small numbers, and slack going from `thinking` to `working`, which is a
+     * sash becoming a ring.
+     */
+    private get span();
     /** How far through a transition, `1` when there is not one. */
     private get progress();
     private paramsNow;
@@ -135,6 +156,14 @@ export declare class HelixOrb extends HelixElement {
      */
     private paint;
 }
+/**
+ * The numbers out of a resolved color.
+ *
+ * The engine reports color-typed properties as `rgb()` or `color()`, so the
+ * digits are already there to be read. Deliberately forgiving all the same: a
+ * value this cannot parse costs the orb its depth rather than its existence,
+ * and a test environment with no layout engine is exactly such a value.
+ */
 declare global {
     interface HTMLElementTagNameMap {
         'helix-orb': HelixOrb;

package/dist/orb/root/orb-root.js

@@ -7,14 +7,20 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement, HelixElement, hostAria } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
+import { readColor } from './orb-color.js';
 import { styles } from './orb-root.css.js';
-import { blendParams, evenSphere, fibonacci, meshFor, ORB_STATES, orbPoint, paramsFor, project, smoother, } from './orb-shapes.js';
-const MORPH = 700;
+import { blendStaged, evenSphere, fibonacci, meshFor, ORB_STATES, orbPoint, paramsFor, project, smoother, stateDistance, TRAIL, } from './orb-shapes.js';
+const MORPH_NEAR = 380;
+const MORPH_REACH = 580;
+const LIGHT_Y = 0.36;
 const STILL_PHASE = 1.4;
 const LABELS = {
+    connecting: 'Connecting',
     done: 'Done',
     fetching: 'Fetching',
+    listening: 'Listening',
     thinking: 'Thinking',
+    waiting: 'Waiting',
     working: 'Working',
 };
 let HelixOrb = class HelixOrb extends HelixElement {
@@ -29,6 +35,7 @@ let HelixOrb = class HelixOrb extends HelixElement {
         this.box = 0;
         this.from = paramsFor('thinking');
         this.morphAt = 0;
+        this.reach = 0;
         this.phase = STILL_PHASE;
         this.last = 0;
         this.tick = () => {
@@ -148,19 +155,26 @@ let HelixOrb = class HelixOrb extends HelixElement {
     }
     turn() {
         this.from = this.paramsNow();
+        this.reach = stateDistance(this.from, paramsFor(this.state));
         this.morphAt = performance.now();
         if (!this.running) {
             this.paint(0);
             this.play();
         }
     }
+    get span() {
+        return MORPH_NEAR + MORPH_REACH * this.reach;
+    }
     get progress() {
-        return this.morphAt === 0 ? 1 : Math.min(1, (performance.now() - this.morphAt) / MORPH);
+        return this.morphAt === 0 ? 1 : Math.min(1, (performance.now() - this.morphAt) / this.span);
     }
     paramsNow() {
         const to = paramsFor(this.state);
         const k = this.progress;
-        return k >= 1 ? to : blendParams(this.from, to, smoother(k));
+        if (k >= 1) {
+            return to;
+        }
+        return blendStaged(this.from, to, smoother(k), smoother(Math.max(0, k - TRAIL) / (1 - TRAIL)));
     }
     play() {
         if (this.running || this.motion?.matches || !this.onScreen) {
@@ -188,8 +202,14 @@ let HelixOrb = class HelixOrb extends HelixElement {
         const ground = readColor(painted.textDecorationColor);
         const mesh = meshFor(size);
         const even = evenSphere(mesh.lanes, mesh.segs);
-        const scan = Math.sin(this.phase * 0.85) * 0.93;
-        const shell = still ? 1 : 1 + 0.1 * Math.sin(Math.PI * this.progress);
+        const spin = this.phase * 0.9;
+        const lx = Math.cos(spin) * 0.9;
+        const lz = Math.sin(spin) * 0.9;
+        const llen = Math.hypot(lx, LIGHT_Y, lz) || 1;
+        const swell = still || this.progress >= 1
+            ? 1
+            : 1 + (0.035 + 0.1 * this.reach) * Math.sin(Math.PI * this.progress ** 0.82);
+        const shell = swell * (1 + params.breathe * Math.sin(this.phase * 0.62));
         const dots = [];
         for (let i = 0; i < mesh.ghostCount; i++) {
             const [x, y, z] = fibonacci(i, mesh.ghostCount);
@@ -211,7 +231,8 @@ let HelixOrb = class HelixOrb extends HelixElement {
                 const [x, y, z] = orbPoint(u, s / mesh.segs, this.phase, params, index, even);
                 const [px, py, pz] = project(size, x * shell, y * shell, z * shell);
                 const depth = (pz + 1) / 2;
-                const boost = params.scan * Math.exp(-((y - scan) ** 2) / 0.012) +
+                const facing = (x * lx + y * LIGHT_Y + z * lz) / llen;
+                const boost = params.orbit * (facing > 0 ? facing ** 11 : 0) +
                     params.jitter * (0.1 + 0.1 * Math.sin(this.phase * 0.6));
                 dots.push({
                     alpha: mesh.aMin + (1 - mesh.aMin) * depth,
@@ -253,10 +274,3 @@ HelixOrb = __decorate([
     customElement('helix-orb')
 ], HelixOrb);
 export { HelixOrb };
-const readColor = (value) => {
-    const parts = value.match(/-?[\d.]+/g);
-    if (!parts || parts.length < 3) {
-        return [128, 128, 128];
-    }
-    return [Number(parts[0]) || 0, Number(parts[1]) || 0, Number(parts[2]) || 0];
-};

package/dist/orb/root/orb-shapes.d.ts

@@ -4,7 +4,7 @@
  * Exported so the component can validate an attribute against the same list the
  * generator reads, rather than keeping a second copy that drifts.
  */
-export declare const ORB_STATES: readonly ['thinking', 'fetching', 'working', 'done'];
+export declare const ORB_STATES: readonly ['waiting', 'connecting', 'thinking', 'fetching', 'listening', 'working', 'done'];
 /** What the agent is doing. */
 export type OrbState = (typeof ORB_STATES)[number];
 /**
@@ -28,12 +28,18 @@ export interface OrbParams {
     edge: number;
     /** How far toward an even sphere, `0` the banded grid and `1` fully relaxed. */
     jitter: number;
+    /** How far the whole cloud swells and settles, `0` still. */
+    breathe: number;
+    /** Strength of a highlight traveling around the ball, `0` absent. */
+    orbit: number;
+    /** A ripple over the surface, applied after the sphere is closed. */
+    pulse: number;
     /** How fast this state's own clock runs. */
     rate: number;
+    /** How far the ball has opened into a ring, `0` a sphere and `1` a torus. */
+    ring: number;
     /** Which way the axis leans, in radians. */
     rot: number;
-    /** Where the sweeping highlight is, `0` absent and `1` full strength. */
-    scan: number;
     /** How hard the bands slide past each other. */
     shear: number;
     /** How flattened the ball is along its axis, `1` round. */
@@ -54,6 +60,24 @@ export interface OrbParams {
 export declare const ORB_PARAMS: Record<OrbState, OrbParams>;
 /** Halfway between two states, key by key. */
 export declare const blendParams: (a: OrbParams, b: OrbParams, k: number) => OrbParams;
+/**
+ * How far apart two states are, `0` to `1`, each key against its own range.
+ *
+ * Two states differing in one small number should not be given the time
+ * `thinking` to `done` needs. One length for every pair reads as rushed at one
+ * end of the set and slack at the other.
+ */
+export declare const stateDistance: (a: OrbParams, b: OrbParams) => number;
+/**
+ * Two states blended on two clocks: the silhouette, and then what it is doing.
+ *
+ * **The other order shows a light orbiting a sash.** Every number moving on one
+ * curve makes a change of state read as a cross-fade between two pictures; the
+ * shape arriving first makes it read as one thing becoming another.
+ */
+export declare const blendStaged: (a: OrbParams, b: OrbParams, shape: number, character: number) => OrbParams;
+/** How far the character trails the silhouette, as a share of the run. */
+export declare const TRAIL = 0.2;
 /** The state's numbers, or `thinking`'s where the name is not one we draw. */
 export declare const paramsFor: (state: string | undefined) => OrbParams;
 /** Smootherstep: zero slope and zero acceleration at both ends. */

package/dist/orb/root/orb-shapes.js

@@ -1,12 +1,38 @@
-export const ORB_STATES = ['thinking', 'fetching', 'working', 'done'];
+export const ORB_STATES = [
+    'waiting',
+    'connecting',
+    'thinking',
+    'fetching',
+    'listening',
+    'working',
+    'done',
+];
 export const ORB_PARAMS = {
+    connecting: {
+        belt: 0.32,
+        breathe: 0.07,
+        edge: 1,
+        jitter: 0,
+        orbit: 0,
+        pulse: 0,
+        rate: 1.05,
+        ring: 0,
+        rot: 1.52,
+        shear: 0,
+        squash: 1,
+        waveA: 0.035,
+        waveB: 0,
+    },
     done: {
         belt: 1,
+        breathe: 0.035,
         edge: 0,
         jitter: 1,
+        orbit: 0,
+        pulse: 0,
         rate: 1.1,
+        ring: 0,
         rot: 0,
-        scan: 0,
         shear: 0,
         squash: 1,
         waveA: 0,
@@ -14,11 +40,29 @@ export const ORB_PARAMS = {
     },
     fetching: {
         belt: 1,
+        breathe: 0,
         edge: 0,
-        jitter: 0,
-        rate: 2.4,
+        jitter: 0.62,
+        orbit: 1,
+        pulse: 0,
+        rate: 2,
+        ring: 0,
+        rot: 0,
+        shear: 0,
+        squash: 1,
+        waveA: 0,
+        waveB: 0,
+    },
+    listening: {
+        belt: 1,
+        breathe: 0.03,
+        edge: 0,
+        jitter: 1,
+        orbit: 0,
+        pulse: 0.055,
+        rate: 1.15,
+        ring: 0,
         rot: 0,
-        scan: 1,
         shear: 0,
         squash: 1,
         waveA: 0,
@@ -26,25 +70,46 @@ export const ORB_PARAMS = {
     },
     thinking: {
         belt: 0.47,
+        breathe: 0,
         edge: 1,
         jitter: 0,
+        orbit: 0,
+        pulse: 0,
         rate: 2.1,
+        ring: 0,
         rot: 1.52,
-        scan: 0,
         shear: 0,
         squash: 1,
         waveA: 0.16,
         waveB: 0.07,
     },
+    waiting: {
+        belt: 1,
+        breathe: 0.075,
+        edge: 0,
+        jitter: 1,
+        orbit: 0,
+        pulse: 0,
+        rate: 0.55,
+        ring: 0,
+        rot: 0,
+        shear: 0,
+        squash: 1,
+        waveA: 0,
+        waveB: 0,
+    },
     working: {
         belt: 1,
+        breathe: 0.035,
         edge: 0,
         jitter: 0,
-        rate: 2.4,
-        rot: 0.5,
-        scan: 0,
-        shear: 1.3,
-        squash: 0.72,
+        orbit: 0.7,
+        pulse: 0,
+        rate: 1.9,
+        ring: 1,
+        rot: 0.3,
+        shear: 0.62,
+        squash: 1,
         waveA: 0,
         waveB: 0,
     },
@@ -57,6 +122,51 @@ export const blendParams = (a, b, k) => {
     }
     return out;
 };
+const SPANS = {
+    belt: 1,
+    breathe: 0.08,
+    edge: 1,
+    jitter: 1,
+    orbit: 1,
+    pulse: 0.09,
+    rate: 2.5,
+    ring: 1,
+    rot: 1.6,
+    shear: 1.3,
+    squash: 1,
+    waveA: 0.2,
+    waveB: 0.1,
+};
+const STRUCTURE = [
+    'belt',
+    'edge',
+    'jitter',
+    'ring',
+    'rot',
+    'shear',
+    'squash',
+    'waveA',
+    'waveB',
+];
+const CHARACTER = ['breathe', 'orbit', 'pulse', 'rate'];
+export const stateDistance = (a, b) => {
+    let sum = 0;
+    for (const key of KEYS) {
+        sum += Math.abs(b[key] - a[key]) / SPANS[key];
+    }
+    return Math.min(1, sum / 3.2);
+};
+export const blendStaged = (a, b, shape, character) => {
+    const out = {};
+    for (const key of STRUCTURE) {
+        out[key] = a[key] + (b[key] - a[key]) * shape;
+    }
+    for (const key of CHARACTER) {
+        out[key] = a[key] + (b[key] - a[key]) * character;
+    }
+    return out;
+};
+export const TRAIL = 0.2;
 export const paramsFor = (state) => ORB_PARAMS[state] ?? ORB_PARAMS.thinking;
 const TAU = Math.PI * 2;
 export const smoother = (t) => t * t * t * (t * (t * 6 - 15) + 10);
@@ -92,12 +202,28 @@ export const evenSphere = (lanes, segs) => {
     return out;
 };
 const SPAN = 1.86;
+const RING_HOLE = 0.64;
+const RING_TUBE = 0.36;
 export const orbPoint = (u, v, phase, p, index, even) => {
     const th = v * TAU + p.shear * phase * 0.55 * (u - 0.5) * 2;
     const wave = p.waveA * Math.sin(th * 3 - phase * 1.7 + u * 3.1) + p.waveB * Math.sin(th * 5 + phase * 1.1);
     const y = Math.max(-0.995, Math.min(0.995, (u - 0.5) * SPAN * p.belt + wave));
     const r = Math.sqrt(Math.max(0, 1 - y * y));
     let point = [r * Math.cos(th), y * p.squash, r * Math.sin(th)];
+    if (p.ring > 0.001) {
+        const ph = u * TAU;
+        const rr = RING_HOLE + RING_TUBE * Math.cos(ph);
+        const torus = [
+            rr * Math.cos(th),
+            RING_TUBE * Math.sin(ph),
+            rr * Math.sin(th),
+        ];
+        point = [
+            point[0] + (torus[0] - point[0]) * p.ring,
+            point[1] + (torus[1] - point[1]) * p.ring,
+            point[2] + (torus[2] - point[2]) * p.ring,
+        ];
+    }
     if (p.rot) {
         const c = Math.cos(p.rot);
         const s = Math.sin(p.rot);
@@ -111,7 +237,12 @@ export const orbPoint = (u, v, phase, p, index, even) => {
             point[2] + (e[2] - point[2]) * p.jitter,
         ];
         const len = Math.hypot(point[0], point[1], point[2]) || 1;
-        point = [point[0] / len, point[1] / len, point[2] / len];
+        const k = 1 + (1 / len - 1) * (1 - p.ring);
+        point = [point[0] * k, point[1] * k, point[2] * k];
+    }
+    if (p.pulse > 0.001) {
+        const ripple = 1 + p.pulse * Math.sin(phase * 1.5 - point[1] * 3.2);
+        point = [point[0] * ripple, point[1] * ripple, point[2] * ripple];
     }
     return point;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix",
   "description": "Styled component tier. Extends the headless tier with token-driven presentation.",
-  "version": "0.9.0",
+  "version": "0.10.1",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -46,14 +46,14 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.9.0",
-    "@fusion.dev/helix-headless": "0.9.0",
-    "@fusion.dev/helix-styles": "0.9.0"
+    "@fusion.dev/helix-core": "0.10.1",
+    "@fusion.dev/helix-headless": "0.10.1",
+    "@fusion.dev/helix-styles": "0.10.1"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@fusion.dev/helix-cem": "0.9.0",
-    "@fusion.dev/helix-testing": "0.9.0",
+    "@fusion.dev/helix-cem": "0.10.1",
+    "@fusion.dev/helix-testing": "0.10.1",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^3.3.0",

package/types/jsx.d.ts

@@ -26765,19 +26765,29 @@ export type CustomElements = {
   >;
 
   /**
-   * A cloud of dots on a sphere, drawn to a canvas, with one shape per state:
-   * `thinking` is a narrow sash with a wave running through it, `fetching` spreads
-   * into a globe with a highlight sweeping pole to pole, `working` flattens and
-   * tilts with its bands shearing past each other, and `done` settles into an even
-   * ball.
-   *
-   * **None of them is a separate drawing.** Each is the same banded sphere given
+   * A cloud of dots, drawn to a canvas, with one shape per state. `connecting`
+   * and `thinking` are the same leaning sash and differ in how agitated it is;
+   * `waiting` and `done` are the same settled ball at different tempos, which is
+   * the difference between not having started and having finished. `fetching` is
+   * a globe with a light going round it, `listening` a closed sphere with a
+   * ripple crossing it, and `working` a ring.
+   *
+   * **None of them is a separate drawing.** Each is the same banded grid given
    * different numbers, so changing state interpolates the numbers and every frame
    * in between is a whole shape. A loader that cuts between pictures says the
    * work restarted; one that carries a shape into the next says it moved on.
    *
-   * **Nothing spins.** All the movement is inside the shape, which is what makes
-   * it read as thought rather than as a thing being rotated.
+   * **A change is measured before it is played.** Two states differing in one
+   * small number are given less time than a sash becoming a ring, and the
+   * silhouette leads what the shape is doing, so a light is never seen orbiting
+   * something that has not finished becoming round.
+   *
+   * **Nothing spins.** The whole cloud holds still and everything that moves is
+   * moving inside it, which is what makes it read as thought rather than as a
+   * thing being rotated. The one exception is the light, which travels because a
+   * ring of evenly spaced dots is unchanged by rotation: without something fixed
+   * in space passing over them, a state that turns has nothing a reader can see
+   * turning.
    *
    * **The palette is read from the tokens**, not given as colors: a dot's ink is
    * mixed toward the ground by how far away it is, and both ends come from
@@ -42654,19 +42664,29 @@ export type CustomElementsSolidJs = {
   >;
 
   /**
-   * A cloud of dots on a sphere, drawn to a canvas, with one shape per state:
-   * `thinking` is a narrow sash with a wave running through it, `fetching` spreads
-   * into a globe with a highlight sweeping pole to pole, `working` flattens and
-   * tilts with its bands shearing past each other, and `done` settles into an even
-   * ball.
-   *
-   * **None of them is a separate drawing.** Each is the same banded sphere given
+   * A cloud of dots, drawn to a canvas, with one shape per state. `connecting`
+   * and `thinking` are the same leaning sash and differ in how agitated it is;
+   * `waiting` and `done` are the same settled ball at different tempos, which is
+   * the difference between not having started and having finished. `fetching` is
+   * a globe with a light going round it, `listening` a closed sphere with a
+   * ripple crossing it, and `working` a ring.
+   *
+   * **None of them is a separate drawing.** Each is the same banded grid given
    * different numbers, so changing state interpolates the numbers and every frame
    * in between is a whole shape. A loader that cuts between pictures says the
    * work restarted; one that carries a shape into the next says it moved on.
    *
-   * **Nothing spins.** All the movement is inside the shape, which is what makes
-   * it read as thought rather than as a thing being rotated.
+   * **A change is measured before it is played.** Two states differing in one
+   * small number are given less time than a sash becoming a ring, and the
+   * silhouette leads what the shape is doing, so a light is never seen orbiting
+   * something that has not finished becoming round.
+   *
+   * **Nothing spins.** The whole cloud holds still and everything that moves is
+   * moving inside it, which is what makes it read as thought rather than as a
+   * thing being rotated. The one exception is the light, which travels because a
+   * ring of evenly spaced dots is unchanged by rotation: without something fixed
+   * in space passing over them, a state that turns has nothing a reader can see
+   * turning.
    *
    * **The palette is read from the tokens**, not given as colors: a dot's ink is
    * mixed toward the ground by how far away it is, and both ends come from

package/types/vue.d.ts

@@ -10542,7 +10542,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixOptionVueProps,
     HelixOptionVueEvents
   >;
-  /** A cloud of dots on a sphere, drawn to a canvas, with one shape per state: 'thinking' is a narrow sash with a wave running through it, 'fetching' spreads into a globe with a highlight sweeping pole to pole, 'working' flattens and tilts with its bands shearing past each other, and 'done' settles into an even ball.  **None of them is a separate drawing.** Each is the same banded sphere given different numbers, so changing state interpolates the numbers and every frame in between is a whole shape. A loader that cuts between pictures says the work restarted; one that carries a shape into the next says it moved on.  **Nothing spins.** All the movement is inside the shape, which is what makes it read as thought rather than as a thing being rotated.  **The palette is read from the tokens**, not given as colors: a dot's ink is mixed toward the ground by how far away it is, and both ends come from '--orb-color' and '--orb-ground'. That is what makes depth survive a theme change without the consumer restating anything.  **It stops when nobody is looking**, off screen and in a background tab, and 'prefers-reduced-motion' gets one still frame rather than an empty box. */
+  /** A cloud of dots, drawn to a canvas, with one shape per state. 'connecting' and 'thinking' are the same leaning sash and differ in how agitated it is; 'waiting' and 'done' are the same settled ball at different tempos, which is the difference between not having started and having finished. 'fetching' is a globe with a light going round it, 'listening' a closed sphere with a ripple crossing it, and 'working' a ring.  **None of them is a separate drawing.** Each is the same banded grid given different numbers, so changing state interpolates the numbers and every frame in between is a whole shape. A loader that cuts between pictures says the work restarted; one that carries a shape into the next says it moved on.  **A change is measured before it is played.** Two states differing in one small number are given less time than a sash becoming a ring, and the silhouette leads what the shape is doing, so a light is never seen orbiting something that has not finished becoming round.  **Nothing spins.** The whole cloud holds still and everything that moves is moving inside it, which is what makes it read as thought rather than as a thing being rotated. The one exception is the light, which travels because a ring of evenly spaced dots is unchanged by rotation: without something fixed in space passing over them, a state that turns has nothing a reader can see turning.  **The palette is read from the tokens**, not given as colors: a dot's ink is mixed toward the ground by how far away it is, and both ends come from '--orb-color' and '--orb-ground'. That is what makes depth survive a theme change without the consumer restating anything.  **It stops when nobody is looking**, off screen and in a background tab, and 'prefers-reduced-motion' gets one still frame rather than an empty box. */
   "helix-orb": DefineCustomElement<
     HelixOrb,
     HelixOrbVueProps,