@fusion.dev/helix 0.181.2 → 0.182.0

package/custom-elements.json

@@ -10173,6 +10173,62 @@
                 "module": "src/bar-chart/root/bar-chart-root.ts"
               }
             },
+            {
+              "description": "The color of a bar whose cell says `data-tone=\"accent\"`.",
+              "name": "--bar-chart-tone-accent",
+              "inheritedFrom": {
+                "name": "HelixHeadlessBarChart",
+                "module": "src/bar-chart/root/bar-chart-root.ts"
+              }
+            },
+            {
+              "description": "The color of a bar whose cell says `data-tone=\"danger\"`.",
+              "name": "--bar-chart-tone-danger",
+              "inheritedFrom": {
+                "name": "HelixHeadlessBarChart",
+                "module": "src/bar-chart/root/bar-chart-root.ts"
+              }
+            },
+            {
+              "description": "The color of a bar whose cell says `data-tone=\"info\"`.",
+              "name": "--bar-chart-tone-info",
+              "inheritedFrom": {
+                "name": "HelixHeadlessBarChart",
+                "module": "src/bar-chart/root/bar-chart-root.ts"
+              }
+            },
+            {
+              "description": "The color of a bar whose cell says `data-tone=\"muted\"`.",
+              "name": "--bar-chart-tone-muted",
+              "inheritedFrom": {
+                "name": "HelixHeadlessBarChart",
+                "module": "src/bar-chart/root/bar-chart-root.ts"
+              }
+            },
+            {
+              "description": "The color of a bar whose cell says `data-tone=\"primary\"`. A tone with no property of its own falls back to the bar's series color, and the same holds for a name you define.",
+              "name": "--bar-chart-tone-primary",
+              "inheritedFrom": {
+                "name": "HelixHeadlessBarChart",
+                "module": "src/bar-chart/root/bar-chart-root.ts"
+              }
+            },
+            {
+              "description": "The color of a bar whose cell says `data-tone=\"success\"`.",
+              "name": "--bar-chart-tone-success",
+              "inheritedFrom": {
+                "name": "HelixHeadlessBarChart",
+                "module": "src/bar-chart/root/bar-chart-root.ts"
+              }
+            },
+            {
+              "description": "The color of a bar whose cell says `data-tone=\"warning\"`.",
+              "name": "--bar-chart-tone-warning",
+              "inheritedFrom": {
+                "name": "HelixHeadlessBarChart",
+                "module": "src/bar-chart/root/bar-chart-root.ts"
+              }
+            },
             {
               "description": "The gradient for a bar, named per bar so the styled tier can use it as the `fill`. It is always drawn, and used only when `wash=\"gradient\"` is set.",
               "name": "--chart-bar-wash",
@@ -10880,7 +10936,7 @@
                 {
                   "name": "bar",
                   "type": {
-                    "text": "(\n      value: number,\n      index: number,\n      depth: number,\n      tone: number,\n      scale: (value: number) => number,\n      from?: number,\n      end?: StackEnd,\n    ) => TemplateResult"
+                    "text": "(\n      value: number,\n      index: number,\n      depth: number,\n      tone: number,\n      scale: (value: number) => number,\n      from?: number,\n      end?: StackEnd,\n      named?: string,\n    ) => TemplateResult"
                   }
                 }
               ],
@@ -197448,6 +197504,24 @@
           "default": "0.5",
           "description": "The tightest any form turns, as a share of the box's height: the radius of\nits sharpest curve.\n\nHalf the height. A bend's apex a few dozen pixels round kinked the strands\nthat ran along its inside, and read as a fold in the light where every form\nis meant to be one sweep. `path.pure.spec.ts` measures it on every form."
         },
+        {
+          "kind": "variable",
+          "name": "SPREAD",
+          "type": {
+            "text": "number"
+          },
+          "default": "1.35",
+          "description": "The ribbon's width over each form's own at a `spread` of `1`, which the\nrenderer multiplies in. Here so the path can know how far its strands reach."
+        },
+        {
+          "kind": "variable",
+          "name": "SHAPE",
+          "type": {
+            "text": "PathShape"
+          },
+          "default": "{ lean: 0.1, period: 1.4, sweep: 0.4, swing: 0.6 }",
+          "description": "The shape a page draws unless it asks for another: calm, the ribbon\nswinging six tenths of the most its turns allow over S curves 2.4 screens\nlong, resting a tenth of the width right of the middle. Compared down the\nwhole landing page against wider, quicker, and leaning shapes, this one\nread as one long current rather than a ribbon zigzagging between cards."
+        },
         {
           "kind": "function",
           "name": "boxPath",
@@ -197531,6 +197605,14 @@
                 "text": "number"
               },
               "description": "The page's height, in CSS pixels."
+            },
+            {
+              "name": "shape",
+              "default": "SHAPE",
+              "type": {
+                "text": "PathShape"
+              },
+              "description": "The ribbon's shape down the page."
             }
           ],
           "description": "The ribbon laid down a whole page, which is what an element with `travel`\nshows.\n\nEach stop places its form at its target, in page order. Between two stops\nthe ribbon fills the gap with soft S-curves in `fill`'s place, except\nbetween two waves less than a screen and a half apart, where it turns off\nscreen so each wave reads alone.\nWithout stops, `fill` runs the length of the page: a bend opens the page and\na ribbon follows it, waves cross every screen and a third, and a ribbon\nmeanders the whole way. After a last wave the ribbon does not come back, so\nthe page ends on the wave."
@@ -197577,6 +197659,32 @@
           ],
           "description": "One coordinate of a uniform Catmull-Rom segment, the same one the shader runs."
         },
+        {
+          "kind": "function",
+          "name": "arcLengths",
+          "return": {
+            "type": {
+              "text": "Float32Array"
+            }
+          },
+          "parameters": [
+            {
+              "name": "points",
+              "type": {
+                "text": "readonly PathPoint[]"
+              },
+              "description": "The path."
+            },
+            {
+              "name": "width",
+              "type": {
+                "text": "number"
+              },
+              "description": "The box's width, in CSS pixels, which `x` is a share of."
+            }
+          ],
+          "description": "How far along the drawn centerline each point is, in CSS pixels, for the\nshader to set every frequency by.\n\n**Arc length, which only grows.** The shader used the sum of a point's `y`\nand its `x` in pixels, which grows down a page and across a wave heading\nright, and runs backward wherever the path heads left faster than it heads\ndown: on a bend's upper arm, and across a wave sweeping left. There the\nstrands' twist and waves ran in reverse, and every strand turned a corner\nat the same place.\n\nSixteen samples a segment of the same spline the shader draws."
+        },
         {
           "kind": "function",
           "name": "lookup",
@@ -197643,6 +197751,22 @@
             "module": "src/strands/path.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "SPREAD",
+          "declaration": {
+            "name": "SPREAD",
+            "module": "src/strands/path.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "SHAPE",
+          "declaration": {
+            "name": "SHAPE",
+            "module": "src/strands/path.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "boxPath",
@@ -197667,6 +197791,14 @@
             "module": "src/strands/path.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "arcLengths",
+          "declaration": {
+            "name": "arcLengths",
+            "module": "src/strands/path.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "lookup",
@@ -198133,6 +198265,14 @@
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "MAX_QUIET",
+          "declaration": {
+            "name": "MAX_QUIET",
+            "module": "src/strands/renderer.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "MAX_STRANDS",
@@ -198201,7 +198341,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Hundreds of thin strands are drawn as one ribbon, and the light they add\ntogether is bloomed, so where they converge the ribbon burns hot. The ribbon\nmoves on its own all the time: it sways and breathes, its strands wave and\nroll over one another, and light runs along them.\n\nIts palette comes from the tokens. The strands are `--helix-color-primary`,\na few are `--helix-color-accent` for depth, and the page they light is\n`--helix-color-background`. On a light page the light becomes ink, because\nlight added to near-white cannot be seen.\n\n**Three forms, set with `variant`.** `bend` turns bright strands through one tight point, with its\narms opening to the right. `ribbon`, the default, is a broad, soft ribbon in\nlong curves. `waves` is sharp strands crossing the full width.\n\n**In its own box, by default.** The element fills the box it is given, the\nway an image does, and `at` places the bend's apex or the ribbon's axis across\nit. Content placed inside sits over the ribbon, in the `content` part.\n\n**Down the whole page, with `travel`.** The element fixes itself behind the\npage, on `--helix-layer-beneath`, and lays one ribbon from the top of the page to the\nbottom, so scrolling travels along it. Put `helix-strands-stop` elements\ninside to pin a form to a section: each names an element with `for` and says\nwhich form the ribbon takes there. Between stops the ribbon fills the gap in\nits own `variant`, and between two waves less than a screen and a half\napart it turns off screen so each wave reads alone. Set `z-index` on the\nelement to move it.\n\nThe ribbon stops moving in these cases:\n- `prefers-reduced-motion` is set. The element shows one still frame, and in\n  `travel` still follows the scroll, without easing.\n- The element is off screen or in a background tab.\n\nIt shows a gradient from the same tokens in these cases, and matches\n`:state(fallback)` and sends `helix-strands-fallback` with the reason:\n- The renderer draws on the CPU, such as a headless browser or a machine with\n  no usable GPU.\n- There is no WebGL, or the browser took the drawing context back.\n\nStrands is styled only and has behavior, as `Aura` does: its behavior is\ndrawing to a canvas, so there is no structure for a headless version to hold.",
+          "description": "Hundreds of thin strands are drawn as one ribbon, and the light they add\ntogether is bloomed, so where they converge the ribbon burns hot. The ribbon\nmoves on its own all the time: it sways and breathes, its strands wave and\nroll over one another, and light runs along them.\n\nIts palette comes from the tokens. The strands are `--helix-color-primary`,\na few are `--helix-color-accent` for depth, and the page they light is\n`--helix-color-background`. On a light page the light becomes ink, because\nlight added to near-white cannot be seen.\n\n**Four forms, set with `variant`.** `bend` turns bright strands through one\ntight point, with its arms opening to the right. `ribbon`, the default, is a\nbroad, soft ribbon in long curves. `sweep` enters at a top corner, the one\n`at` is nearer, and crosses in one diagonal to the far side. `waves` is sharp\nstrands crossing the full width.\n\n**Quiet behind words.** `quiet` names elements, such as a hero's words, that\nthe light dims behind to a faint glow, so a bright ribbon can cross the page\nunder them and they stay crisp.\n\n**In its own box, by default.** The element fills the box it is given, the\nway an image does, and `at` places the bend's apex or the ribbon's axis across\nit. Content placed inside sits over the ribbon, in the `content` part.\n\n**Down the whole page, with `travel`.** The element fixes itself behind the\npage, on `--helix-layer-beneath`, and lays one ribbon from the top of the page to the\nbottom, so scrolling travels along it. Put `helix-strands-stop` elements\ninside to pin a form to a section: each names an element with `for` and says\nwhich form the ribbon takes there. Between stops the ribbon fills the gap in\nits own `variant`, and between two waves less than a screen and a half\napart it turns off screen so each wave reads alone. Set `z-index` on the\nelement to move it.\n\nThe ribbon stops moving in these cases:\n- `prefers-reduced-motion` is set. The element shows one still frame, and in\n  `travel` still follows the scroll, without easing.\n- The element is off screen or in a background tab.\n\nIt shows a gradient from the same tokens in these cases, and matches\n`:state(fallback)` and sends `helix-strands-fallback` with the reason:\n- The renderer draws on the CPU, such as a headless browser or a machine with\n  no usable GPU.\n- There is no WebGL, or the browser took the drawing context back.\n\nStrands is styled only and has behavior, as `Aura` does: its behavior is\ndrawing to a canvas, so there is no structure for a headless version to hold.",
           "name": "HelixStrands",
           "cssProperties": [
             {
@@ -198294,7 +198434,7 @@
                 "text": "number"
               },
               "default": "1",
-              "description": "How differently each strand moves, from `0`, the whole ribbon rolling and\nwaving as one, to `1`, each strand at its own pace and angle, crossing\nover the others. Clamped to that range.",
+              "description": "How differently the strands move across the ribbon, from `0`, the whole\nribbon rolling and waving as one, to `1`, its edges flowing at their own\npace past its middle. Neighbors always move together, so no strand leaves\nits lane. Clamped to that range.",
               "attribute": "drift"
             },
             {
@@ -198317,6 +198457,15 @@
               "description": "Overall brightness, as a multiplier on the light.",
               "attribute": "gain"
             },
+            {
+              "kind": "field",
+              "name": "quiet",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The ids of elements the light dims behind, separated by spaces, such as\na hero's words. Inside each, the ribbon keeps a faint glow, so words over\nit stay crisp and nothing busy runs under them, and it eases back to full\na short way past each edge. Up to four; ids that name nothing are skipped.",
+              "attribute": "quiet"
+            },
             {
               "kind": "field",
               "name": "softness",
@@ -198362,7 +198511,7 @@
               "kind": "field",
               "name": "variant",
               "type": {
-                "text": "'bend' | 'ribbon' | 'waves' | undefined"
+                "text": "'bend' | 'ribbon' | 'sweep' | 'waves' | undefined"
               },
               "description": "The form the ribbon takes. When it is not set, the form is `ribbon`. In\n`travel`, the form of every stretch no stop claims.",
               "attribute": "variant"
@@ -198520,6 +198669,21 @@
               "privacy": "private",
               "default": "0"
             },
+            {
+              "kind": "field",
+              "name": "lengths",
+              "privacy": "private",
+              "default": "new Float32Array(MAX_POINTS)",
+              "description": "How far along the path each point is, in pixels, four to a slot as the shader reads them."
+            },
+            {
+              "kind": "field",
+              "name": "quietRects",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new Float32Array(MAX_QUIET * 4)",
+              "description": "The rects the light dims behind, in the path's pixels, from `quiet`."
+            },
             {
               "kind": "field",
               "name": "table",
@@ -198717,6 +198881,17 @@
               },
               "description": "Lays the path out again: inside the box, or down the page from the stops.\n\nCheap, a few dozen points and a table of a few hundred numbers, so it runs\non any change that could move the path rather than working out which did."
             },
+            {
+              "kind": "method",
+              "name": "measureQuiet",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "The rects of the elements `quiet` names: on the page in `travel`, where\nthe path is laid in page pixels, and inside the box otherwise."
+            },
             {
               "kind": "method",
               "name": "placedStops",
@@ -199241,7 +199416,7 @@
                 "text": "number"
               },
               "default": "1",
-              "description": "How differently each strand moves, from `0`, the whole ribbon rolling and\nwaving as one, to `1`, each strand at its own pace and angle, crossing\nover the others. Clamped to that range.",
+              "description": "How differently the strands move across the ribbon, from `0`, the whole\nribbon rolling and waving as one, to `1`, its edges flowing at their own\npace past its middle. Neighbors always move together, so no strand leaves\nits lane. Clamped to that range.",
               "fieldName": "drift"
             },
             {
@@ -199262,6 +199437,14 @@
               "description": "Overall brightness, as a multiplier on the light.",
               "fieldName": "gain"
             },
+            {
+              "name": "quiet",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The ids of elements the light dims behind, separated by spaces, such as\na hero's words. Inside each, the ribbon keeps a faint glow, so words over\nit stay crisp and nothing busy runs under them, and it eases back to full\na short way past each edge. Up to four; ids that name nothing are skipped.",
+              "fieldName": "quiet"
+            },
             {
               "name": "softness",
               "type": {
@@ -199301,7 +199484,7 @@
             {
               "name": "variant",
               "type": {
-                "text": "'bend' | 'ribbon' | 'waves' | undefined"
+                "text": "'bend' | 'ribbon' | 'sweep' | 'waves' | undefined"
               },
               "description": "The form the ribbon takes. When it is not set, the form is `ribbon`. In\n`travel`, the form of every stretch no stop claims.",
               "fieldName": "variant"
@@ -199401,22 +199584,31 @@
       "kind": "javascript-module",
       "path": "src/strands/shader.ts",
       "declarations": [
+        {
+          "kind": "variable",
+          "name": "MAX_QUIET",
+          "type": {
+            "text": "number"
+          },
+          "default": "4",
+          "description": "The most elements a ribbon dims behind, through the root's \\`quiet\\`."
+        },
         {
           "kind": "variable",
           "name": "LINE_VERTEX",
-          "default": "`#version 300 es layout(location = 0) in vec2 aVert; layout(location = 1) in float aId; uniform float uDpr; uniform float uSoftness; uniform float uContrast; uniform vec3 uGlow; uniform vec3 uTint; uniform vec3 uPeak; out float vSide; out vec3 vColor; ${PATH} void main() { float id = aId; float r5 = h1(id + 7.77); float r6 = h1(id + 9.19); float r7 = h1(id + 11.3); float t = mix(uT.x, uT.y, aVert.x); vec3 info; vec3 unused; vec3 a = strandAt(id, t, info); vec3 b = strandAt(id, t + (uT.y - uT.x) / 700.0, unused); vec2 tg = b.xy - a.xy; tg = length(tg) > 1e-4 ? normalize(tg) : vec2(0.0, 1.0); vec2 nrm = vec2(-tg.y, tg.x); float soft = smoothstep(0.06, 0.28, info.y) * step(1.0 - uSoftness, r6); /* Nearer is thicker, and the back of the ribbon falls out of focus: wider at the same energy, so it reads as haze behind the sharp strands. */ float base = mix(0.35, 1.3, r7 * r7) * uDpr * (1.0 + (0.3 + 0.5 * uDepth) * a.z); float focus = uDepth * smoothstep(-0.1, -0.9, a.z) * 10.0 * uDpr; float w = max(base + soft * mix(8.0, 36.0, r6) * uDpr + focus, 1.0); float drawW = w + 2.5 * uDpr; vec2 res = uView * uDpr; vec2 px = a.xy * uDpr + nrm * aVert.y * drawW * 0.5; gl_Position = vec4(px.x / res.x * 2.0 - 1.0, 1.0 - px.y / res.y * 2.0, 0.0, 1.0); vSide = aVert.y * drawW / w; float shimmer = 0.5 + 0.5 * sin(info.z * 0.044 - uTime * (2.0 + 2.0 * r5) + r6 * 6.283); shimmer *= shimmer; /* Contrast spreads the strands' brightness: a few burn and most fall back. The mean is held, so the ribbon as a whole keeps its strength. */ float spread = mix(1.4, 4.5, uContrast); float least = mix(0.25, 0.04, uContrast); float bright = mix(least, 1.0, pow(r5, spread)) * 0.5625 / (least + (1.0 - least) / (spread + 1.0)); float energy = min(base, w) / w; float fall = 0.3 + 0.5 * uDepth; float depth = (1.0 - fall * (1.0 - a.z) * 0.5) / (1.0 - fall * 0.5); float rest = mix(0.35, 0.15, uContrast); vec3 col = mix(uGlow, uTint, step(0.83, r6) * 0.9); col = mix(col, uPeak, step(0.93, r7) * 0.6); vColor = col * energy * info.x * (rest + (1.0 - rest) * shimmer) * bright * depth; } `",
+          "default": "`#version 300 es layout(location = 0) in vec2 aVert; layout(location = 1) in float aId; uniform float uDpr; uniform float uSoftness; uniform float uContrast; uniform vec3 uGlow; uniform vec3 uTint; uniform vec3 uPeak; out float vSide; out float vSigma; out vec3 vColor; ${PATH} void main() { float id = aId; float r5 = h1(id + 7.77); float r6 = h1(id + 9.19); float r7 = h1(id + 11.3); float t = mix(uT.x, uT.y, aVert.x); vec3 info; vec3 unused; vec3 a = strandAt(id, t, info); vec3 b = strandAt(id, t + (uT.y - uT.x) / 700.0, unused); vec2 tg = b.xy - a.xy; tg = length(tg) > 1e-4 ? normalize(tg) : vec2(0.0, 1.0); vec2 nrm = vec2(-tg.y, tg.x); float soft = smoothstep(0.06, 0.28, info.y) * step(1.0 - uSoftness, r6); /* Nearer is thicker, and the back of the ribbon falls out of focus: wider at the same energy, so it reads as haze behind the sharp strands. */ float base = mix(0.35, 1.3, r7 * r7) * uDpr * (1.0 + (0.3 + 0.5 * uDepth) * a.z); float focus = uDepth * smoothstep(-0.1, -0.9, a.z) * 4.0 * uDpr; float w = max(base + soft * mix(8.0, 36.0, r6) * uDpr + focus, 1.0); /* **A profile no narrower than a pixel can carry.** The strand's light falls off across it as a Gaussian a quarter of its width wide, which for a strand a pixel wide is a quarter of a pixel: narrower than the pixels sampling it, so a thin strand broke into a row of dots wherever it ran between pixel centers. Its spread is held to at least 0.7 of a device pixel, and its peak comes down by the same factor, so it carries the same light and reads as one continuous thread. The quad covers three spreads either side. */ float designed = w * 0.228; float sigma = max(designed, 0.7); float drawW = max(w, sigma * 6.0) + 2.5 * uDpr; vec2 res = uView * uDpr; vec2 px = a.xy * uDpr + nrm * aVert.y * drawW * 0.5; gl_Position = vec4(px.x / res.x * 2.0 - 1.0, 1.0 - px.y / res.y * 2.0, 0.0, 1.0); vSide = aVert.y * drawW * 0.5; vSigma = sigma; /* **Light travels along the strand slowly and long.** A pulse every 140 pixels broke each strand into dashes; one every 1,800 or so is light moving down a fiber. */ float shimmer = 0.5 + 0.5 * sin(info.z * 0.0035 - uTime * (0.6 + 0.4 * r5) + r6 * 6.283); /* Contrast spreads the strands' brightness: a few burn and most fall back. The mean is held, so the ribbon as a whole keeps its strength. */ float spread = mix(1.4, 4.5, uContrast); float least = mix(0.35, 0.14, uContrast); float bright = mix(least, 1.0, pow(r5, spread)) * 0.5625 / (least + (1.0 - least) / (spread + 1.0)); float energy = min(base, w) / w; float fall = 0.3 + 0.5 * uDepth; float depth = (1.0 - fall * (1.0 - a.z) * 0.5) / (1.0 - fall * 0.5); float rest = mix(0.35, 0.15, uContrast); vec3 col = mix(uGlow, uTint, step(0.83, r6) * 0.9); col = mix(col, uPeak, step(0.93, r7) * 0.6); vColor = col * energy * info.x * (rest + (1.0 - rest) * shimmer) * bright * depth * (designed / sigma) * quietAt(a.xy); } `",
           "description": "Each strand as a ribbon of quads, wide enough to anti-alias and to blur."
         },
         {
           "kind": "variable",
           "name": "LINE_FRAGMENT",
-          "default": "`#version 300 es precision highp float; in float vSide; in vec3 vColor; uniform float uScale; out vec4 outColor; void main() { outColor = vec4(vColor * exp(-vSide * vSide * 2.4) * uScale, 1.0); } `",
+          "default": "`#version 300 es precision highp float; in float vSide; in float vSigma; in vec3 vColor; uniform float uScale; out vec4 outColor; void main() { float d = vSide / vSigma; outColor = vec4(vColor * exp(-0.5 * d * d) * uScale, 1.0); } `",
           "description": "A soft profile across the ribbon, added into the buffer."
         },
         {
           "kind": "variable",
           "name": "DUST_VERTEX",
-          "default": "`#version 300 es uniform float uDpr; uniform float uStrands; uniform vec3 uGlow; uniform vec3 uPeak; out vec3 vColor; ${PATH} void main() { float id = float(gl_VertexID); float sid = floor(h1(id + 0.5) * uStrands); float r = h1(id + 2.3); float r2 = h1(id + 4.1); float t = mix(uT.x, uT.y, fract(r + uTime * 0.003 * (0.3 + r2))); vec3 info; vec3 a = strandAt(sid, t, info); vec2 off = (vec2(h1(id + 6.1), h1(id + 8.3)) - 0.5) * (24.0 + (150.0 + info.y * uView.x) * h1(id + 9.7)); vec2 res = uView * uDpr; vec2 px = (a.xy + off) * uDpr; gl_Position = vec4(px.x / res.x * 2.0 - 1.0, 1.0 - px.y / res.y * 2.0, 0.0, 1.0); gl_PointSize = mix(1.2, 3.4, r2 * r2) * uDpr; float tw = 0.35 + 0.65 * (0.5 + 0.5 * sin(uTime * (0.5 + 1.8 * r) + r2 * 40.0)); /* By the root of the ribbon's brightness, so specks show along a dim ribbon as well as round a bright bend. */ vColor = mix(uGlow, uPeak, 0.55) * tw * mix(0.2, 0.9, r) * sqrt(info.x) * 0.8; } `",
+          "default": "`#version 300 es uniform float uDpr; uniform float uStrands; uniform vec3 uGlow; uniform vec3 uPeak; out vec3 vColor; ${PATH} void main() { float id = float(gl_VertexID); float sid = floor(h1(id + 0.5) * uStrands); float r = h1(id + 2.3); float r2 = h1(id + 4.1); float t = mix(uT.x, uT.y, fract(r + uTime * 0.003 * (0.3 + r2))); vec3 info; vec3 a = strandAt(sid, t, info); vec2 off = (vec2(h1(id + 6.1), h1(id + 8.3)) - 0.5) * (24.0 + (150.0 + info.y * uView.x) * h1(id + 9.7)); vec2 res = uView * uDpr; vec2 px = (a.xy + off) * uDpr; gl_Position = vec4(px.x / res.x * 2.0 - 1.0, 1.0 - px.y / res.y * 2.0, 0.0, 1.0); gl_PointSize = mix(1.2, 3.4, r2 * r2) * uDpr; float tw = 0.35 + 0.65 * (0.5 + 0.5 * sin(uTime * (0.5 + 1.8 * r) + r2 * 40.0)); /* By the root of the ribbon's brightness, so specks show along a dim ribbon as well as round a bright bend. */ vColor = mix(uGlow, uPeak, 0.55) * tw * mix(0.2, 0.9, r) * sqrt(info.x) * 0.8 * quietAt(a.xy + off); } `",
           "description": "Specks drifting along the strands, thickest where the ribbon is bright."
         },
         {
@@ -199450,6 +199642,14 @@
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "MAX_QUIET",
+          "declaration": {
+            "name": "MAX_QUIET",
+            "module": "src/strands/shader.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "LINE_VERTEX",
@@ -199542,7 +199742,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Placed inside a `helix-strands` with `travel`, a stop names an element with\n`for` and says which form the ribbon takes when the page reaches it: a `bend`\nturning through it, a `ribbon` passing through `at`, or `waves` crossing at\nits top edge. The stops are read in page order, whatever order they are\nwritten in, and a stop naming no element is skipped.\n\nA stop draws nothing itself and is never shown.\n\n**Every property is reflected**, because the parent watches its stops'\nattributes to lay the ribbon out again: a change made from script reaches the\npage as a change made in markup does. None has a default, so a stop writes\nnothing it was not given.",
+          "description": "Placed inside a `helix-strands` with `travel`, a stop names an element with\n`for` and says which form the ribbon takes when the page reaches it: a `bend`\nturning through it, a `ribbon` passing through `at`, a `sweep` crossing in one\ndiagonal from the page's top corner on the side `at` is nearer to the\nelement's far top corner, or `waves` crossing at its top edge. The stops are\nread in page order, whatever order they are written in, and a stop naming no\nelement is skipped.\n\nA stop draws nothing itself and is never shown.\n\n**Every property is reflected**, because the parent watches its stops'\nattributes to lay the ribbon out again: a change made from script reaches the\npage as a change made in markup does. None has a default, so a stop writes\nnothing it was not given.",
           "name": "HelixStrandsStop",
           "members": [
             {
@@ -199569,7 +199769,7 @@
               "kind": "field",
               "name": "variant",
               "type": {
-                "text": "'bend' | 'ribbon' | 'waves' | undefined"
+                "text": "'bend' | 'ribbon' | 'sweep' | 'waves' | undefined"
               },
               "description": "The form the ribbon takes at the element. When it is not set, the form is `ribbon`.",
               "attribute": "variant",
@@ -199935,7 +200135,7 @@
             {
               "name": "variant",
               "type": {
-                "text": "'bend' | 'ribbon' | 'waves' | undefined"
+                "text": "'bend' | 'ribbon' | 'sweep' | 'waves' | undefined"
               },
               "description": "The form the ribbon takes at the element. When it is not set, the form is `ribbon`.",
               "fieldName": "variant"
@@ -251371,6 +251571,6 @@
   ],
   "helix": {
     "package": "@fusion.dev/helix",
-    "version": "0.181.2"
+    "version": "0.182.0"
   }
 }

package/dist/bar-chart/root/bar-chart-root.css.js

@@ -1,6 +1,6 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: grid;position: relative;gap: var(--bar-chart-gap, var(--helix-space-2xs));}[part="plot"] {position: relative;block-size: var(--bar-chart-block-size, 12em);}[part="plot"] svg {block-size: 100%;inline-size: 100%;overflow: visible;}[part="baseline"] {stroke: var(--helix-color-border);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke;}[part~="bar"] {--_bar-chart-corners: var(--bar-chart-bar-radius, 2px) var(--bar-chart-bar-radius, 2px) 0 0;--_bar-chart-base: 0 0 calc(var(--bar-chart-bar-stroke, var(--helix-border-thick)) / 2) 0;clip-path: inset(var(--_bar-chart-foot, 0) round var(--_bar-chart-corners));fill: var(--_bar-chart-series);}:host([orientation="horizontal"]) [part~="bar"] {--_bar-chart-corners: 0 var(--bar-chart-bar-radius, 2px) var(--bar-chart-bar-radius, 2px) 0;--_bar-chart-base: 0 0 0 calc(var(--bar-chart-bar-stroke, var(--helix-border-thick)) / 2);}:host([stacked]) [part~="bar"]:not([part~="bar-end"]) {--_bar-chart-corners: 0;}:host([stacked]) [part~="bar-end"][data-end="negative"] {--_bar-chart-corners: 0 0 var(--bar-chart-bar-radius, 2px) var(--bar-chart-bar-radius, 2px);}:host([stacked][orientation="horizontal"]) [part~="bar-end"][data-end="negative"] {--_bar-chart-corners: var(--bar-chart-bar-radius, 2px) 0 0 var(--bar-chart-bar-radius, 2px);}[part="labels"] {display: grid;grid-auto-columns: 1fr;grid-auto-flow: column;}[part="label"] {color: var(--helix-color-foreground-muted);font-size: var(--helix-text-xs);overflow: hidden;text-align: center;text-overflow: ellipsis;white-space: nowrap;}:host([orientation="horizontal"]) {grid-template-columns: auto 1fr;}:host([orientation="horizontal"]) [part="labels"] {grid-column: 1;grid-row: 1;}:host([orientation="horizontal"]) [part="plot"] {grid-column: 2;grid-row: 1;}:host([orientation="horizontal"]) [part="labels"] {grid-auto-columns: auto;grid-auto-flow: row;grid-auto-rows: 1fr;}:host([orientation="horizontal"]) [part="label"] {align-self: center;text-align: end;}[part~="bar"],
-[part="line"] {--_bar-chart-series: var(--chart-series);}[part="plot"]:has([data-active]) [part~="group"]:not([data-active]) {opacity: 0.45;}[part~="group"] {transition: opacity var(--helix-duration-fast) var(--helix-easing-decelerate);}[part~="bar"] {transition:
+export const styles = createSheet(`:host {display: grid;position: relative;gap: var(--bar-chart-gap, var(--helix-space-2xs));}[part="plot"] {position: relative;block-size: var(--bar-chart-block-size, 12em);}[part="plot"] svg {block-size: 100%;inline-size: 100%;overflow: visible;}[part="baseline"] {stroke: var(--helix-color-border);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke;}[part~="bar"] {--_bar-chart-corners: var(--bar-chart-bar-radius, 2px) var(--bar-chart-bar-radius, 2px) 0 0;--_bar-chart-base: 0 0 calc(var(--bar-chart-bar-stroke, var(--helix-border-thick)) / 2) 0;clip-path: inset(var(--_bar-chart-foot, 0) round var(--_bar-chart-corners));fill: var(--_bar-chart-series);}:host([orientation="horizontal"]) [part~="bar"] {--_bar-chart-corners: 0 var(--bar-chart-bar-radius, 2px) var(--bar-chart-bar-radius, 2px) 0;--_bar-chart-base: 0 0 0 calc(var(--bar-chart-bar-stroke, var(--helix-border-thick)) / 2);}:host([stacked]) [part~="bar"]:not([part~="bar-end"]) {--_bar-chart-corners: 0;}:host([stacked]) [part~="bar-end"][data-end="negative"] {--_bar-chart-corners: 0 0 var(--bar-chart-bar-radius, 2px) var(--bar-chart-bar-radius, 2px);}:host([stacked][orientation="horizontal"]) [part~="bar-end"][data-end="negative"] {--_bar-chart-corners: var(--bar-chart-bar-radius, 2px) 0 0 var(--bar-chart-bar-radius, 2px);}[part="labels"] {display: grid;grid-auto-columns: 1fr;grid-auto-flow: column;}[part="label"] {color: var(--helix-color-foreground-muted);font-size: var(--helix-text-xs);overflow: hidden;text-align: center;text-overflow: ellipsis;white-space: nowrap;}:host([orientation="horizontal"]) {grid-template-columns: auto 1fr;}:host([orientation="horizontal"]) [part="labels"] {grid-column: 1;grid-row: 1;}:host([orientation="horizontal"]) [part="plot"] {grid-column: 2;grid-row: 1;}:host([orientation="horizontal"]) [part="labels"] {grid-auto-columns: auto;grid-auto-flow: row;grid-auto-rows: 1fr;align-self: start;block-size: var(--bar-chart-block-size, 12em);}:host([orientation="horizontal"]) [part="label"] {align-self: center;text-align: end;}[part~="bar"],
+[part="line"] {--_bar-chart-series: var(--chart-series);}:host {--bar-chart-tone-accent: var(--helix-color-accent);--bar-chart-tone-danger: var(--helix-color-danger);--bar-chart-tone-info: var(--helix-color-info);--bar-chart-tone-muted: var(--helix-color-foreground-subtle);--bar-chart-tone-primary: var(--helix-color-primary);--bar-chart-tone-success: var(--helix-color-success);--bar-chart-tone-warning: var(--helix-color-warning);}[part="plot"]:has([data-active]) [part~="group"]:not([data-active]) {opacity: 0.45;}[part~="group"] {transition: opacity var(--helix-duration-fast) var(--helix-easing-decelerate);}[part~="bar"] {transition:
 height var(--helix-duration-normal) var(--helix-easing-decelerate),
 width var(--helix-duration-normal) var(--helix-easing-decelerate),
 x var(--helix-duration-normal) var(--helix-easing-decelerate),

package/dist/strands/path.d.ts

@@ -7,7 +7,7 @@
  * screen are all arithmetic.
  */
 /** The three forms the ribbon takes. */
-export type StrandsVariant = 'bend' | 'ribbon' | 'waves';
+export type StrandsVariant = 'bend' | 'ribbon' | 'sweep' | 'waves';
 /**
  * One point on the centerline: `x` as a share of the width, `y` in CSS pixels,
  * the ribbon's width as a share of the width, and its brightness from `0` to
@@ -27,6 +27,10 @@ export interface PlacedStop {
     height: number;
     /** The target's top, in page pixels. */
     top: number;
+    /** The target's left edge, as a share of the width, where it is known. */
+    left?: number | undefined;
+    /** The target's right edge, as a share of the width, where it is known. */
+    right?: number | undefined;
     variant: StrandsVariant;
 }
 /**
@@ -47,6 +51,33 @@ export declare const MAX_POINTS = 96;
  * is meant to be one sweep. `path.pure.spec.ts` measures it on every form.
  */
 export declare const TURN = 0.5;
+/**
+ * The ribbon's width over each form's own at a `spread` of `1`, which the
+ * renderer multiplies in. Here so the path can know how far its strands reach.
+ */
+export declare const SPREAD = 1.35;
+/**
+ * The shape of the ribbon down a page, each as a multiplier or a share of the
+ * width, so a page can try another without the path's arithmetic changing.
+ */
+export interface PathShape {
+    /** How far the ribbon swings side to side, over the most its turns allow. */
+    swing: number;
+    /** How long one S takes, over `PERIOD` screens. */
+    period: number;
+    /** How far the ribbon's axis sits from the middle, as a share of the width; positive is right. */
+    lean: number;
+    /** How far from the middle a wave's sweep lands, as a share of the width. */
+    sweep: number;
+}
+/**
+ * The shape a page draws unless it asks for another: calm, the ribbon
+ * swinging six tenths of the most its turns allow over S curves 2.4 screens
+ * long, resting a tenth of the width right of the middle. Compared down the
+ * whole landing page against wider, quicker, and leaning shapes, this one
+ * read as one long current rather than a ribbon zigzagging between cards.
+ */
+export declare const SHAPE: PathShape;
 /**
  * The ribbon drawn inside its own box, which is what an element without
  * `travel` shows.
@@ -77,10 +108,28 @@ export declare const boxPath: (variant: StrandsVariant, at: number | undefined,
  * @param width The viewport's width, in CSS pixels.
  * @param height The viewport's height, in CSS pixels.
  * @param page The page's height, in CSS pixels.
+ * @param shape The ribbon's shape down the page.
  */
-export declare const pagePath: (stops: readonly PlacedStop[], fill: StrandsVariant, width: number, height: number, page: number) => PathPoint[];
+export declare const pagePath: (stops: readonly PlacedStop[], fill: StrandsVariant, width: number, height: number, page: number, shape?: PathShape) => PathPoint[];
 /** One coordinate of a uniform Catmull-Rom segment, the same one the shader runs. */
 export declare const catmull: (p0: number, p1: number, p2: number, p3: number, f: number) => number;
+/**
+ * How far along the drawn centerline each point is, in CSS pixels, for the
+ * shader to set every frequency by.
+ *
+ * **Arc length, which only grows.** The shader used the sum of a point's `y`
+ * and its `x` in pixels, which grows down a page and across a wave heading
+ * right, and runs backward wherever the path heads left faster than it heads
+ * down: on a bend's upper arm, and across a wave sweeping left. There the
+ * strands' twist and waves ran in reverse, and every strand turned a corner
+ * at the same place.
+ *
+ * Sixteen samples a segment of the same spline the shader draws.
+ *
+ * @param points The path.
+ * @param width The box's width, in CSS pixels, which `x` is a share of.
+ */
+export declare const arcLengths: (points: readonly PathPoint[], width: number) => Float32Array;
 /**
  * The centerline's `y` at even steps of its parameter, for finding which
  * stretch is on screen.