@caqophony/ui 0.4.0 → 0.5.1

package/dist/material.js

@@ -1,15 +1,24 @@
 'use client';
 import {
   IntentBadge
-} from "./chunk-Y6LCXEXZ.js";
+} from "./chunk-44GEHNZP.js";
 import {
+  CONTENT_GUTTER,
   Icon,
   ScrollHintXMark
-} from "./chunk-BAW3RIMF.js";
+} from "./chunk-ID7VBGJA.js";
 import {
   cn
 } from "./chunk-DP5WQAPO.js";
 
+// src/material/sky.tsx
+import {
+  Children,
+  createContext,
+  isValidElement,
+  useContext
+} from "react";
+
 // src/material/tones.ts
 var FILL = {
   "night-0": "fill-night-0",
@@ -72,69 +81,255 @@ var BG = {
   page: "bg-background"
 };
 
+// src/material/art.tsx
+import { Fragment, jsx } from "react/jsx-runtime";
+var ANCHOR = {
+  top: "xMidYMin",
+  center: "xMidYMid",
+  bottom: "xMidYMax",
+  right: "xMaxYMid"
+};
+var preserveOf = (anchor, fit = "cover") => `${ANCHOR[anchor]} ${fit === "contain" ? "meet" : "slice"}`;
+var SHOWN = {
+  phone: "size-full md:hidden",
+  desktop: "hidden size-full md:block",
+  stack: "size-full lg:hidden",
+  side: "hidden size-full lg:block"
+};
+var frameClass = (only) => only ? SHOWN[only] : "size-full";
+
+// src/material/scene-measures.ts
+var FIELD_UNITS = "field units";
+var WIDTH = { of: "width", times: 1 };
+var HEIGHT = { of: "height", times: 1 };
+var ACROSS = {
+  unit: FIELD_UNITS,
+  whole: false,
+  min: 0,
+  minOpen: false,
+  max: WIDTH
+};
+var DOWN = {
+  unit: FIELD_UNITS,
+  whole: false,
+  min: 0,
+  minOpen: false,
+  max: HEIGHT
+};
+var SEED = {
+  unit: "a seed: the same one draws the same shape",
+  whole: true,
+  min: 0,
+  minOpen: false,
+  max: 2147483646
+};
+var SCENE_MEASURES = {
+  SkyField: {
+    width: {
+      unit: "field units, the frame's own coordinates",
+      whole: false,
+      min: 0,
+      minOpen: true,
+      max: null
+    },
+    height: {
+      unit: "field units, the frame's own coordinates",
+      whole: false,
+      min: 0,
+      minOpen: true,
+      max: null
+    }
+  },
+  Halo: {
+    cx: ACROSS,
+    cy: DOWN,
+    "rings.r": {
+      unit: FIELD_UNITS,
+      whole: false,
+      min: 0,
+      minOpen: true,
+      max: WIDTH
+    }
+  },
+  CloudBank: {
+    y: DOWN,
+    /** Below 0.1 a radius rounds to 0.0 in the path's one decimal. */
+    min: {
+      unit: FIELD_UNITS,
+      whole: false,
+      min: 0.1,
+      minOpen: false,
+      max: HEIGHT
+    },
+    max: {
+      unit: FIELD_UNITS,
+      whole: false,
+      min: 0.1,
+      minOpen: false,
+      max: HEIGHT
+    },
+    climb: {
+      unit: FIELD_UNITS,
+      whole: false,
+      min: { of: "height", times: -1 },
+      minOpen: false,
+      max: HEIGHT
+    },
+    seed: SEED
+  },
+  Ridge: {
+    y: DOWN,
+    rise: DOWN,
+    swells: {
+      unit: "swells across the field",
+      whole: true,
+      min: 1,
+      minOpen: false,
+      max: 512
+    },
+    seed: SEED
+  },
+  Stars: {
+    depth: {
+      unit: "a fraction of the field's height",
+      whole: false,
+      min: 0,
+      minOpen: true,
+      max: 1
+    },
+    count: {
+      unit: "stars",
+      whole: true,
+      min: 0,
+      minOpen: false,
+      max: 5e3
+    },
+    seed: SEED
+  },
+  RouteLine: {
+    "points.x": ACROSS,
+    "points.y": DOWN,
+    labelSize: {
+      unit: FIELD_UNITS,
+      whole: false,
+      min: 0,
+      minOpen: true,
+      max: HEIGHT
+    }
+  }
+};
+var boundText = (b) => typeof b === "number" ? String(b) : b.times === 1 ? `the field's ${b.of}` : b.times === -1 ? `minus the field's ${b.of}` : `${b.times} x the field's ${b.of}`;
+function measureText(m) {
+  const low = boundText(m.min);
+  const range = m.max === null ? `${m.minOpen ? "above" : "at least"} ${low}` : m.minOpen ? `above ${low}, at most ${boundText(m.max)}` : `from ${low} to ${boundText(m.max)}`;
+  return `${m.unit}: ${m.whole ? `a whole number ${range}` : range}`;
+}
+var boundIn = (b, field) => {
+  if (typeof b === "number") return b;
+  if (field === null)
+    throw new Error(
+      `a range bound of the field's ${b.of} needs a field to read it in`
+    );
+  return field[b.of] * b.times;
+};
+function measured(piece, key, name, value, field) {
+  const table = SCENE_MEASURES[piece];
+  const m = table[key];
+  if (m === void 0)
+    throw new Error(`${piece}: \`${key}\` has no measure in SCENE_MEASURES`);
+  const low = boundIn(m.min, field);
+  const high = m.max === null ? Number.POSITIVE_INFINITY : boundIn(m.max, field);
+  const inside = Number.isFinite(value) && (m.minOpen ? value > low : value >= low) && value <= high && (!m.whole || Number.isInteger(value));
+  if (!inside)
+    throw new Error(
+      `${piece}: \`${name}\` is ${measureText(m)} (got ${value})`
+    );
+}
+
 // src/material/sky.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-function finite(piece, facts) {
+import { Fragment as Fragment2, jsx as jsx2, jsxs } from "react/jsx-runtime";
+function measuredAll(piece, field, facts) {
   for (const [name, value] of Object.entries(facts))
-    if (!Number.isFinite(value))
-      throw new Error(
-        `${piece}: \`${name}\` must be a finite number (got ${value})`
-      );
+    if (value !== void 0) measured(piece, name, name, value, field);
 }
-function aboveZero(piece, facts) {
-  for (const [name, value] of Object.entries(facts))
+function sized(piece, field) {
+  for (const [name, value] of Object.entries({
+    width: field.width,
+    height: field.height
+  }))
     if (!Number.isFinite(value) || value <= 0)
       throw new Error(
         `${piece}: \`${name}\` must be a finite number above 0 (got ${value})`
       );
 }
-function wholeWithin(piece, name, value, [low, high]) {
-  if (!Number.isInteger(value) || value < low || value > high)
+var MAX_BUMPS = 2e3;
+var BLEED_BOTH_SIDES = { down: false };
+var IN_SCENE = { down: true };
+var SceneCopyContext = createContext(null);
+var GroundContext = createContext(null);
+var FieldContext = createContext(null);
+var LayerContext = createContext("pieces");
+function useField(piece) {
+  const field = useContext(FieldContext);
+  if (field === null)
     throw new Error(
-      `${piece}: \`${name}\` must be a whole number from ${low} to ${high} (got ${value})`
+      `${piece}: a scene piece draws inside a SkyField, which gives it the field's size; this one has no SkyField around it`
     );
+  return field;
+}
+function reachOf(copy) {
+  return copy === null ? BLEED_BOTH_SIDES : IN_SCENE;
 }
-var MIN_BUMP_RADIUS = 0.1;
-var MAX_BUMPS = 2e3;
-var MAX_SWELLS = 512;
-var MAX_STARS = 5e3;
-var ANCHOR = {
-  top: "xMidYMin slice",
-  center: "xMidYMid slice",
-  bottom: "xMidYMax slice",
-  right: "xMaxYMid slice"
-};
 function SkyField({
   width,
   height,
   anchor,
+  fit,
   only,
   ground,
   children
 }) {
-  aboveZero("SkyField", { width, height });
+  measuredAll("SkyField", null, { width, height });
+  const copy = useContext(SceneCopyContext);
+  const under = useContext(GroundContext);
+  const routes = Children.toArray(children).filter(
+    (c) => isValidElement(c) && c.type === RouteLine
+  );
+  const field = {
+    width,
+    height,
+    reach: reachOf(copy),
+    ground: ground === "none" ? under : ground,
+    routes: new Set(
+      routes.map(
+        (r) => isValidElement(r) ? r.props.points : r
+      )
+    )
+  };
   return /* @__PURE__ */ jsxs(
     "svg",
     {
       viewBox: `0 0 ${width} ${height}`,
-      preserveAspectRatio: ANCHOR[anchor],
+      preserveAspectRatio: preserveOf(anchor, fit),
       "aria-hidden": "true",
-      className: cn(
-        "absolute inset-0 size-full",
-        only === "phone" && "md:hidden",
-        only === "desktop" && "hidden md:block"
-      ),
+      className: cn("absolute inset-0", frameClass(only)),
       children: [
-        /* @__PURE__ */ jsx("rect", { width, height, className: FILL[ground] }),
-        children
+        ground !== "none" && /* @__PURE__ */ jsx2("rect", { width, height, className: FILL[ground] }),
+        /* @__PURE__ */ jsx2(GroundContext.Provider, { value: field.ground, children: /* @__PURE__ */ jsxs(FieldContext.Provider, { value: field, children: [
+          children,
+          routes.length > 0 && /* @__PURE__ */ jsx2("g", { "data-route-labels": "", children: /* @__PURE__ */ jsx2(LayerContext.Provider, { value: "labels", children: routes }) })
+        ] }) })
       ]
     }
   );
 }
 function Halo({ cx, cy, rings }) {
-  finite("Halo", { cx, cy });
-  rings.forEach((ring, i) => aboveZero("Halo", { [`rings[${i}].r`]: ring.r }));
-  return /* @__PURE__ */ jsx(Fragment, { children: rings.map((ring, i) => /* @__PURE__ */ jsx(
+  const field = useField("Halo");
+  measuredAll("Halo", field, { cx, cy });
+  rings.forEach(
+    (ring, i) => measured("Halo", "rings.r", `rings[${i}].r`, ring.r, field)
+  );
+  return /* @__PURE__ */ jsx2(Fragment2, { children: rings.map((ring, i) => /* @__PURE__ */ jsx2(
     "circle",
     {
       cx,
@@ -154,81 +349,189 @@ function rng(seed) {
     return (s - 1) / (RNG_MODULUS - 1);
   };
 }
-function CloudBank({
-  width,
-  height,
-  y,
-  min,
-  max,
-  climb = 0,
-  level = false,
-  seed,
-  tone
-}) {
-  aboveZero("CloudBank", { width, height });
-  finite("CloudBank", { y, min, max, climb, seed });
-  if (min <= 0 || max < min)
-    throw new Error(
-      `CloudBank: the bump radius range must have min > 0 and max >= min (got min ${min}, max ${max}); a zero radius never reaches the field's edge`
-    );
-  if (min < MIN_BUMP_RADIUS)
+var BLEED_STREAM = 7919;
+var BLEED_WIDTHS = 2;
+var DOWN_SHARE = 0.5;
+function cloudBankPaths(field, bank, reach) {
+  const { y, min, max, climb = 0, level = false, seed } = bank;
+  const { width, height } = field;
+  sized("CloudBank", field);
+  measuredAll("CloudBank", field, { y, min, max, climb, seed });
+  if (max < min)
     throw new Error(
-      `CloudBank: \`min\` must be at least ${MIN_BUMP_RADIUS} (got ${min}); a smaller radius rounds to nothing in the path`
+      `CloudBank: the bump radius range must have max >= min (got min ${min}, max ${max})`
     );
-  const bumps = Math.ceil((width + 2 * max) / (2 * min));
+  const bumps = Math.ceil(
+    ((1 + 2 * BLEED_WIDTHS) * width + 2 * max) / (2 * min)
+  );
   if (bumps > MAX_BUMPS)
     throw new Error(
-      `CloudBank: ${width} wide at min ${min} and max ${max} can take ${bumps} bumps; a bank draws at most ${MAX_BUMPS} bumps`
+      `CloudBank: a ${width}-wide field at min ${min} and max ${max} takes ${bumps} bumps with its bleed; a bank draws at most ${MAX_BUMPS}`
     );
+  const bottom = reach.down ? height * (1 + DOWN_SHARE) : height;
+  const under = max / 2;
+  const arc = (r, lift) => `a${r.toFixed(1)} ${r.toFixed(1)} 0 0 1 ${(r * 2).toFixed(1)} ${lift.toFixed(1)}`;
+  const rounded = (n) => Number(n.toFixed(1));
+  const step = (r, draw) => (draw() - 0.5) * r * 0.5 - climb * r * 2 / width;
   const next = rng(seed);
+  let frame = `M${-max} ${bottom}L${-max} ${y}`;
   let x = -max;
+  let endX = x;
+  let endY = y;
   let drift = 0;
-  let d = `M${x} ${height}L${x} ${y}`;
   while (x < width + max) {
     const r = min + next() * (max - min);
-    const step = (next() - 0.5) * r * 0.5 - climb * r * 2 / width;
-    const lift = level ? step - drift : step;
+    const s = step(r, next);
+    const lift = level ? s - drift : s;
     drift += lift;
-    d += `a${r.toFixed(1)} ${r.toFixed(1)} 0 0 1 ${(r * 2).toFixed(1)} ${lift.toFixed(1)}`;
     x += r * 2;
+    endX += rounded(r * 2);
+    endY += rounded(lift);
+    frame += arc(r, lift);
   }
-  return /* @__PURE__ */ jsx("path", { d: `${d}L${x} ${height}Z`, className: FILL[tone] });
+  frame += `L${x} ${bottom}Z`;
+  const back = rng(seed + BLEED_STREAM);
+  const arcs = [];
+  let lx = -max;
+  let offset = 0;
+  while (lx > -BLEED_WIDTHS * width - max) {
+    const r = min + back() * (max - min);
+    const s = step(r, back);
+    const lift = level ? offset - s : s;
+    offset -= rounded(lift);
+    arcs.unshift(arc(r, lift));
+    lx -= rounded(r * 2);
+  }
+  const paths = [
+    `M${lx.toFixed(1)} ${bottom}L${lx.toFixed(1)} ${(y + offset).toFixed(1)}${arcs.join("")}L${-max} ${y}L${-max + under} ${y + under}L${-max + under} ${bottom}Z`
+  ];
+  let right = `M${(endX - under).toFixed(1)} ${bottom}L${(endX - under).toFixed(1)} ${(endY + under).toFixed(1)}L${endX.toFixed(1)} ${endY.toFixed(1)}`;
+  let rx = x;
+  while (rx < (1 + BLEED_WIDTHS) * width + max) {
+    const r = min + next() * (max - min);
+    const s = step(r, next);
+    const lift = level ? s - drift : s;
+    drift += lift;
+    right += arc(r, lift);
+    rx += r * 2;
+  }
+  paths.push(`${right}L${rx} ${bottom}Z`);
+  paths.push(frame);
+  return paths;
 }
-function Ridge({
-  width,
-  height,
-  y,
-  rise,
-  swells,
-  seed,
-  tone
-}) {
-  aboveZero("Ridge", { width, height });
-  finite("Ridge", { y, rise, seed });
-  wholeWithin("Ridge", "swells", swells, [1, MAX_SWELLS]);
-  const next = rng(seed);
+function CloudBank({ tone, ...bank }) {
+  const field = useField("CloudBank");
+  const paths = cloudBankPaths(field, bank, field.reach);
+  return /* @__PURE__ */ jsx2("g", { "data-scene-piece": "cloud-bank", className: FILL[tone], children: paths.map((d, i) => /* @__PURE__ */ jsx2("path", { d }, i)) });
+}
+function ridgePath(field, ridge, reach) {
+  const { y, rise, swells, seed } = ridge;
+  const { width, height } = field;
+  sized("Ridge", field);
+  measuredAll("Ridge", field, { y, rise, swells, seed });
+  const bottom = reach.down ? height * (1 + DOWN_SHARE) : height;
   const step = width / swells;
-  let d = `M0 ${height}L0 ${y}`;
-  for (let i = 0; i < swells; i++) {
+  const back = rng(seed + BLEED_STREAM);
+  const from = -BLEED_WIDTHS * width;
+  let d = `M${from} ${bottom}L${from} ${(y - back() * rise * 0.3).toFixed(1)}`;
+  for (let i = -BLEED_WIDTHS * swells; i < 0; i++) {
+    const cy = y - back() * rise;
+    const end = i === -1 ? y : y - back() * rise * 0.3;
+    d += `Q${(i + 0.5) * step} ${cy.toFixed(1)} ${(i + 1) * step} ${end.toFixed(1)}`;
+  }
+  const next = rng(seed);
+  for (let i = 0; i < (1 + BLEED_WIDTHS) * swells; i++) {
     const cy = y - next() * rise;
-    d += `Q${(i + 0.5) * step} ${cy.toFixed(1)} ${(i + 1) * step} ${(y - next() * rise * 0.3).toFixed(1)}`;
+    const tail = (y - next() * rise * 0.3).toFixed(1);
+    d += `Q${(i + 0.5) * step} ${cy.toFixed(1)} ${(i + 1) * step} ${tail}`;
   }
-  return /* @__PURE__ */ jsx("path", { d: `${d}L${width} ${height}Z`, className: FILL[tone] });
+  return `${d}L${(1 + BLEED_WIDTHS) * width} ${bottom}Z`;
 }
-function Stars({ width, height, count, seed, tone }) {
-  aboveZero("Stars", { width, height });
-  finite("Stars", { seed });
-  wholeWithin("Stars", "count", count, [0, MAX_STARS]);
+function Ridge({ tone, ...ridge }) {
+  const field = useField("Ridge");
+  const d = ridgePath(field, ridge, field.reach);
+  return /* @__PURE__ */ jsx2("path", { "data-scene-piece": "ridge", d, className: FILL[tone] });
+}
+function starDots(field, { depth, count, seed }) {
+  sized("Stars", field);
+  measuredAll("Stars", field, { depth, count, seed });
   const next = rng(seed);
-  return /* @__PURE__ */ jsx("g", { className: FILL[tone], children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx(
-    "circle",
-    {
-      cx: (next() * width).toFixed(1),
-      cy: (next() * height).toFixed(1),
-      r: (0.8 + next() * 1.4).toFixed(2)
-    },
-    i
-  )) });
+  const reach = depth * field.height;
+  return Array.from({ length: count }, () => ({
+    cx: (next() * field.width).toFixed(1),
+    cy: (next() * reach).toFixed(1),
+    r: (0.8 + next() * 1.4).toFixed(2)
+  }));
+}
+function Stars({ tone, ...stars }) {
+  const field = useField("Stars");
+  const dots = starDots(field, stars);
+  return /* @__PURE__ */ jsx2("g", { className: FILL[tone], children: dots.map((dot, i) => /* @__PURE__ */ jsx2("circle", { cx: dot.cx, cy: dot.cy, r: dot.r }, i)) });
+}
+var LABEL_HALO = 0.12;
+var LABEL_ADVANCE_EM = 0.62;
+function routeLabelPlaces(points, labelSize, field) {
+  const gap = labelSize * 1.1;
+  const pad = labelSize * LABEL_HALO / 2;
+  const marks = points.map((p) => {
+    const r = labelSize * (p.state === "here" ? 0.85 : 0.34);
+    return {
+      what: `the mark at ${p.x},${p.y}`,
+      box: { left: p.x - r, top: p.y - r, right: p.x + r, bottom: p.y + r }
+    };
+  });
+  const placed = [];
+  return points.map((p, i) => {
+    if (!p.label) return null;
+    const words = p.label;
+    const width = words.length * LABEL_ADVANCE_EM * labelSize;
+    const before = points[Math.max(0, i - 1)];
+    const after = points[Math.min(points.length - 1, i + 1)];
+    const across = Math.abs(after.x - before.x) >= Math.abs(after.y - before.y);
+    const order = across ? ["above", "below", "right", "left"] : ["right", "left", "above", "below"];
+    const sides = p.side === void 0 ? order : [p.side, ...order.filter((side) => side !== p.side)];
+    const candidates = sides.map((side) => {
+      const x = side === "left" ? p.x - gap : side === "right" ? p.x + gap : p.x;
+      const y = side === "above" ? p.y - gap : side === "below" ? p.y + gap * 1.5 : p.y + labelSize * 0.35;
+      const anchor = side === "left" ? "end" : side === "right" ? "start" : "middle";
+      const left = anchor === "start" ? x : anchor === "end" ? x - width : x - width / 2;
+      return {
+        x,
+        y,
+        anchor,
+        side,
+        box: {
+          left: left - pad,
+          right: left + width + pad,
+          top: y - labelSize * 0.8 - pad,
+          bottom: y + labelSize * 0.25 + pad
+        }
+      };
+    });
+    const others = [...placed, ...marks.filter((_, k) => k !== i)];
+    const blocks = (c) => [
+      ...others.map((o) => ({
+        what: o.what,
+        across: Math.min(c.box.right, o.box.right) - Math.max(c.box.left, o.box.left),
+        down: Math.min(c.box.bottom, o.box.bottom) - Math.max(c.box.top, o.box.top)
+      })).filter((h) => h.across > 0 && h.down > 0).map(
+        (h) => `crosses ${h.what} by ${h.across.toFixed(1)} by ${h.down.toFixed(1)}`
+      ),
+      ...[
+        { edge: "left", by: -c.box.left },
+        { edge: "top", by: -c.box.top },
+        { edge: "right", by: c.box.right - field.width },
+        { edge: "bottom", by: c.box.bottom - field.height }
+      ].filter((e) => e.by > 0).map((e) => `runs ${e.by.toFixed(1)} past the field's ${e.edge}`)
+    ];
+    const clear = candidates.find((c) => blocks(c).length === 0);
+    if (clear === void 0)
+      throw new Error(
+        `RouteLine: the label "${words}" has no clear side, in field units: ${candidates.map((c) => `${c.side} ${blocks(c).join(" and ")}`).join("; ")}. Move its point, or what it meets, apart`
+      );
+    placed.push({ what: `the label "${words}"`, box: clear.box });
+    return clear;
+  });
 }
 function RouteLine({
   points,
@@ -236,19 +539,55 @@ function RouteLine({
   markTone,
   labelSize
 }) {
-  aboveZero("RouteLine", { labelSize });
-  points.forEach(
-    (p, i) => finite("RouteLine", { [`points[${i}].x`]: p.x, [`points[${i}].y`]: p.y })
-  );
+  const field = useField("RouteLine");
+  const layer = useContext(LayerContext);
+  measuredAll("RouteLine", field, { labelSize });
+  points.forEach((p, i) => {
+    measured("RouteLine", "points.x", `points[${i}].x`, p.x, field);
+    measured("RouteLine", "points.y", `points[${i}].y`, p.y, field);
+  });
+  if (!field.routes.has(points))
+    throw new Error(
+      "RouteLine: its labels paint in its SkyField's top layer, so it is a direct child of the SkyField; this one is inside another element"
+    );
+  const labelled = points.some((p) => p.label);
+  if (labelled && field.ground === null)
+    throw new Error(
+      `RouteLine: a label carries a halo in its field's ground tone; this SkyField has ground="none" and no Band around it gives one`
+    );
+  if (layer === "labels") {
+    if (!labelled || field.ground === null) return null;
+    const halo = STROKE[field.ground];
+    const places = routeLabelPlaces(points, labelSize, field);
+    return /* @__PURE__ */ jsx2(Fragment2, { children: points.map((p, i) => {
+      const place = places[i];
+      if (!p.label || !place) return null;
+      return /* @__PURE__ */ jsx2(
+        "text",
+        {
+          x: place.x,
+          y: place.y,
+          textAnchor: place.anchor,
+          fontSize: labelSize,
+          fontWeight: 600,
+          strokeWidth: labelSize * LABEL_HALO,
+          strokeLinejoin: "round",
+          paintOrder: "stroke",
+          className: cn(FILL[tone], halo),
+          children: p.label
+        },
+        i
+      );
+    }) });
+  }
   const at = (i) => points[Math.max(0, Math.min(points.length - 1, i))];
   let d = `M${points[0].x} ${points[0].y}`;
   for (let i = 0; i < points.length - 1; i++) {
     const [p0, p1, p2, p3] = [at(i - 1), at(i), at(i + 1), at(i + 2)];
     d += `C${(p1.x + (p2.x - p0.x) / 6).toFixed(1)} ${(p1.y + (p2.y - p0.y) / 6).toFixed(1)} ${(p2.x - (p3.x - p1.x) / 6).toFixed(1)} ${(p2.y - (p3.y - p1.y) / 6).toFixed(1)} ${p2.x} ${p2.y}`;
   }
-  const gap = labelSize * 1.1;
   return /* @__PURE__ */ jsxs("g", { children: [
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx2(
       "path",
       {
         d,
@@ -259,60 +598,54 @@ function RouteLine({
         className: STROKE[tone]
       }
     ),
-    points.map((p, i) => {
-      const side = p.side ?? "above";
-      const lx = side === "left" ? p.x - gap : side === "right" ? p.x + gap : p.x;
-      const ly = side === "above" ? p.y - gap : side === "below" ? p.y + gap * 1.5 : p.y + labelSize * 0.35;
-      const anchor = side === "left" ? "end" : side === "right" ? "start" : "middle";
-      return /* @__PURE__ */ jsxs("g", { children: [
-        p.state === "here" && /* @__PURE__ */ jsx(
-          "circle",
-          {
-            cx: p.x,
-            cy: p.y,
-            r: labelSize * 0.85,
-            className: cn(FILL[markTone], "opacity-30")
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "circle",
-          {
-            cx: p.x,
-            cy: p.y,
-            r: labelSize * 0.34,
-            strokeWidth: labelSize * 0.14,
-            className: cn(
-              STROKE[tone],
-              p.state === "ahead" ? FILL[markTone] : FILL[tone]
-            )
-          }
-        ),
-        p.label && /* @__PURE__ */ jsx(
-          "text",
-          {
-            x: lx,
-            y: ly,
-            textAnchor: anchor,
-            fontSize: labelSize,
-            fontWeight: 600,
-            className: FILL[tone],
-            children: p.label
-          }
-        )
-      ] }, i);
-    })
+    points.map((p, i) => /* @__PURE__ */ jsxs("g", { children: [
+      p.state === "here" && /* @__PURE__ */ jsx2(
+        "circle",
+        {
+          cx: p.x,
+          cy: p.y,
+          r: labelSize * 0.85,
+          className: cn(FILL[markTone], "opacity-30")
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        "circle",
+        {
+          cx: p.x,
+          cy: p.y,
+          r: labelSize * 0.34,
+          strokeWidth: labelSize * 0.14,
+          className: cn(
+            STROKE[tone],
+            p.state === "ahead" ? FILL[markTone] : FILL[tone]
+          )
+        }
+      )
+    ] }, i))
   ] });
 }
 
 // src/material/band.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var PAD = {
-  none: "",
-  tight: "pb-16 md:pb-24",
+  none: "[&:has(+[data-band-edge])]:pb-16 md:[&:has(+[data-band-edge])]:pb-[120px]",
+  tight: "pb-16 md:pb-24 md:[&:has(+[data-band-edge])]:pb-[120px]",
   section: "py-20 md:py-28",
   open: "py-24 md:py-40"
 };
+var UNDER_NIGHT_HEADER = [
+  "[[data-marketing-header='night']+&]:before:block [[data-marketing-header='night']+&]:before:h-16 [[data-marketing-header='night']+&]:before:content-['']",
+  "[[data-marketing-header='night']+*>&:first-child]:before:block [[data-marketing-header='night']+*>&:first-child]:before:h-16 [[data-marketing-header='night']+*>&:first-child]:before:content-['']",
+  "[[data-marketing-header='night']+*>:first-child>&:first-child]:before:block [[data-marketing-header='night']+*>:first-child>&:first-child]:before:h-16 [[data-marketing-header='night']+*>:first-child>&:first-child]:before:content-['']"
+].join(" ");
 var EDGE_FIELD = { width: 3840, height: 240, seam: 120 };
+function Bank({
+  field,
+  bank,
+  tone
+}) {
+  return /* @__PURE__ */ jsx3("g", { className: FILL[tone], children: cloudBankPaths(field, bank, BLEED_BOTH_SIDES).map((d, i) => /* @__PURE__ */ jsx3("path", { d }, i)) });
+}
 function BandEdge({ via, tone, seed }) {
   const { width, height, seam } = EDGE_FIELD;
   const overlap = 8;
@@ -320,46 +653,32 @@ function BandEdge({ via, tone, seed }) {
     "svg",
     {
       "aria-hidden": "true",
+      "data-band-edge-art": "",
       viewBox: `0 0 ${width} ${height}`,
       preserveAspectRatio: "xMidYMid slice",
       className: "pointer-events-none absolute inset-x-0 -top-16 h-32 w-full md:-top-[120px] md:h-[240px]",
       children: [
-        via && /* @__PURE__ */ jsx2(
-          CloudBank,
+        via && /* @__PURE__ */ jsx3(
+          Bank,
           {
-            width,
-            height: seam,
-            y: 82,
-            min: 24,
-            max: 56,
-            level: true,
-            seed: seed + 3,
+            field: { width, height: seam },
+            bank: { y: 82, min: 24, max: 56, level: true, seed: seed + 3 },
             tone: via
           }
         ),
-        /* @__PURE__ */ jsx2(
-          CloudBank,
+        /* @__PURE__ */ jsx3(
+          Bank,
           {
-            width,
-            height: seam + overlap,
-            y: 100,
-            min: 22,
-            max: 58,
-            level: true,
-            seed,
+            field: { width, height: seam + overlap },
+            bank: { y: 100, min: 22, max: 58, level: true, seed },
             tone
           }
         ),
-        /* @__PURE__ */ jsx2("g", { transform: `matrix(1 0 0 -1 0 ${height})`, children: /* @__PURE__ */ jsx2(
-          CloudBank,
+        /* @__PURE__ */ jsx3("g", { transform: `matrix(1 0 0 -1 0 ${height})`, children: /* @__PURE__ */ jsx3(
+          Bank,
           {
-            width,
-            height: seam + overlap,
-            y: 72,
-            min: 22,
-            max: 58,
-            level: true,
-            seed: seed + 7,
+            field: { width, height: seam + overlap },
+            bank: { y: 72, min: 22, max: 58, level: true, seed: seed + 7 },
             tone
           }
         ) })
@@ -383,16 +702,18 @@ function Band({
     {
       id,
       "data-surface": surface,
+      "data-band-edge": edge ? "" : void 0,
       className: cn(
         "relative isolate scroll-mt-4",
         BG[tone],
         PAD[pad],
         under === "overhang" && "pt-44 md:pt-[23rem]",
         edge && "pt-28 md:pt-48",
-        raised && "z-10"
+        raised && "z-10",
+        surface === "night" && UNDER_NIGHT_HEADER
       ),
       children: [
-        backdrop && /* @__PURE__ */ jsx2(
+        backdrop && /* @__PURE__ */ jsx3(
           "div",
           {
             "aria-hidden": "true",
@@ -400,15 +721,15 @@ function Band({
             children: backdrop
           }
         ),
-        edge && /* @__PURE__ */ jsx2(BandEdge, { ...edge, tone }),
-        children
+        edge && /* @__PURE__ */ jsx3(BandEdge, { ...edge, tone }),
+        /* @__PURE__ */ jsx3(GroundContext.Provider, { value: tone, children })
       ]
     }
   );
 }
 
 // src/material/figure.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var ASPECT = {
   "16:9": "aspect-video",
   "8:5": "aspect-[8/5]",
@@ -431,7 +752,7 @@ function recordable(spec) {
 }
 function Figure({ spec, alt, children, fit = "aspect" }) {
   recordable(spec);
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "figure",
     {
       role: alt ? "img" : void 0,
@@ -450,8 +771,56 @@ function Figure({ spec, alt, children, fit = "aspect" }) {
   );
 }
 
+// src/material/hero-scene.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var STACK_ZONE_RATIO = 1.25;
+var STACK_ZONE_MIN_WIDTH = 390;
+var HEIGHT2 = {
+  fold: "lg:min-h-[min(calc(100svh-4rem),56rem)]",
+  tall: "lg:min-h-[46rem]"
+};
+var CLIP_ABOVE = "[clip-path:inset(0_0_-100vh_0)]";
+function HeroScene({
+  height,
+  subject,
+  copySide = "start",
+  children
+}) {
+  return /* @__PURE__ */ jsx5("div", { "data-hero-scene": "", className: cn("overflow-x-clip", CLIP_ABOVE), children: /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: cn(
+        "mx-auto flex w-full max-w-content-xl flex-col lg:grid lg:grid-cols-2",
+        HEIGHT2[height]
+      ),
+      children: [
+        /* @__PURE__ */ jsx5(
+          "div",
+          {
+            "data-hero-copy": "",
+            className: cn(
+              "relative z-10 flex min-w-0 flex-col items-start justify-center gap-6 py-10 md:py-14",
+              CONTENT_GUTTER,
+              copySide === "end" && "lg:order-2"
+            ),
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          "div",
+          {
+            "data-hero-subject": "",
+            className: "relative mx-auto aspect-[5/4] w-full max-w-2xl lg:aspect-auto lg:h-full lg:max-w-none [&_figure]:overflow-visible [&_svg]:overflow-visible",
+            children: /* @__PURE__ */ jsx5(SceneCopyContext.Provider, { value: copySide, children: subject })
+          }
+        )
+      ]
+    }
+  ) });
+}
+
 // src/material/layout.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var GAP = {
   1: "gap-1",
   2: "gap-2",
@@ -464,7 +833,7 @@ var GAP = {
   16: "gap-16"
 };
 function Stack({ gap, align = "stretch", children }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       className: cn(
@@ -484,7 +853,7 @@ function Inline({
   fillOnPhone,
   children
 }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       className: cn(
@@ -512,7 +881,7 @@ function Columns({
   connect,
   children
 }) {
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       className: cn(
@@ -526,13 +895,13 @@ function Columns({
       ),
       children: [
         children,
-        phone === "scroll" && /* @__PURE__ */ jsx4(ScrollHintXMark, {})
+        phone === "scroll" && /* @__PURE__ */ jsx6(ScrollHintXMark, {})
       ]
     }
   );
 }
 function Split({ ratio, reverse, gap, children }) {
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       className: cn(
@@ -542,27 +911,26 @@ function Split({ ratio, reverse, gap, children }) {
         reverse && (ratio === "even" ? "md:[&>:first-child]:order-2" : "md:grid-cols-[7fr_5fr] md:[&>:first-child]:order-2")
       ),
       children: [
-        /* @__PURE__ */ jsx4("div", { className: "min-w-0", children: children[0] }),
-        /* @__PURE__ */ jsx4("div", { className: "min-w-0", children: children[1] })
+        /* @__PURE__ */ jsx6("div", { className: "min-w-0", children: children[0] }),
+        /* @__PURE__ */ jsx6("div", { className: "min-w-0", children: children[1] })
       ]
     }
   );
 }
 var SPACER = {
   hero: "h-10 md:h-14",
-  section: "h-16 md:h-24",
-  "phone-sky": "h-40 md:hidden"
+  section: "h-16 md:h-24"
 };
 function Spacer({ size }) {
-  return /* @__PURE__ */ jsx4("div", { "aria-hidden": "true", className: SPACER[size] });
+  return /* @__PURE__ */ jsx6("div", { "aria-hidden": "true", className: SPACER[size] });
 }
 var INSET = { 3: "p-3", 4: "p-4", 6: "p-6" };
 function Inset({ pad, children }) {
-  return /* @__PURE__ */ jsx4("div", { className: INSET[pad], children });
+  return /* @__PURE__ */ jsx6("div", { className: INSET[pad], children });
 }
 
 // src/material/type.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var LEVEL = {
   poster: "text-display-poster",
   headline: "text-display-headline",
@@ -580,7 +948,7 @@ function Display({
   measure = "none",
   children
 }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx7(
     Tag,
     {
       className: cn(
@@ -618,7 +986,7 @@ function Text({
   as: Tag = "p",
   children
 }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx7(
     Tag,
     {
       className: cn(
@@ -634,7 +1002,7 @@ function Text({
 }
 
 // src/material/vignette.tsx
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 function Vignette({
   title,
   icon,
@@ -644,7 +1012,7 @@ function Vignette({
   crop = "none",
   children
 }) {
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
       "data-surface": surface,
@@ -653,12 +1021,12 @@ function Vignette({
         placement === "hang" && "z-10 -mb-32 md:-mb-52"
       ),
       children: [
-        /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2 border-b border-border bg-card px-4 py-2.5", children: [
-          /* @__PURE__ */ jsx6("span", { className: "text-muted-foreground", children: /* @__PURE__ */ jsx6(Icon, { name: icon, size: "sm" }) }),
-          /* @__PURE__ */ jsx6("span", { className: "min-w-0 flex-1 truncate text-sm font-semibold text-foreground", children: title }),
-          /* @__PURE__ */ jsx6(IntentBadge, { intent: "neutral", children: sampleLabel })
+        /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2 border-b border-border bg-card px-4 py-2.5", children: [
+          /* @__PURE__ */ jsx8("span", { className: "text-muted-foreground", children: /* @__PURE__ */ jsx8(Icon, { name: icon, size: "sm" }) }),
+          /* @__PURE__ */ jsx8("span", { className: "min-w-0 flex-1 truncate text-sm font-semibold text-foreground", children: title }),
+          /* @__PURE__ */ jsx8(IntentBadge, { intent: "neutral", children: sampleLabel })
         ] }),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx8(
           "div",
           {
             className: cn(
@@ -675,31 +1043,36 @@ function Vignette({
 }
 
 // src/material/wordmark.tsx
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 function Wordmark({ name, mark, href }) {
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "a",
     {
       href,
       className: "flex items-center gap-2 text-lg font-bold tracking-tight text-foreground [font-family:var(--font-heading,inherit)]",
       children: [
-        /* @__PURE__ */ jsx7("span", { className: "text-primary-text size-6 shrink-0", children: mark }),
+        /* @__PURE__ */ jsx9("span", { className: "text-primary-text size-6 shrink-0", children: mark }),
         name
       ]
     }
   );
 }
 export {
+  BLEED_BOTH_SIDES,
   Band,
   CloudBank,
   Columns,
   Display,
   Figure,
   Halo,
+  HeroScene,
   Inline,
   Inset,
   Ridge,
   RouteLine,
+  SCENE_MEASURES,
+  STACK_ZONE_MIN_WIDTH,
+  STACK_ZONE_RATIO,
   SkyField,
   Spacer,
   Split,
@@ -707,5 +1080,8 @@ export {
   Stars,
   Text,
   Vignette,
-  Wordmark
+  Wordmark,
+  cloudBankPaths,
+  ridgePath,
+  starDots
 };