@caqophony/ui 0.3.1 → 0.5.0

package/dist/material.js

@@ -0,0 +1,1066 @@
+'use client';
+import {
+  IntentBadge
+} from "./chunk-44GEHNZP.js";
+import {
+  CONTENT_GUTTER,
+  Icon,
+  ScrollHintXMark
+} 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",
+  "night-1": "fill-night-1",
+  "night-2": "fill-night-2",
+  "sky-0": "fill-sky-0",
+  "sky-1": "fill-sky-1",
+  "sky-2": "fill-sky-2",
+  "sky-3": "fill-sky-3",
+  "sky-4": "fill-sky-4",
+  glow: "fill-glow",
+  "glow-soft": "fill-glow-soft",
+  "glow-pale": "fill-glow-pale",
+  canvas: "fill-canvas",
+  "mist-1": "fill-mist-1",
+  "mist-2": "fill-mist-2",
+  "mist-3": "fill-mist-3",
+  paper: "fill-paper",
+  ink: "fill-ink",
+  page: "fill-background"
+};
+var STROKE = {
+  "night-0": "stroke-night-0",
+  "night-1": "stroke-night-1",
+  "night-2": "stroke-night-2",
+  "sky-0": "stroke-sky-0",
+  "sky-1": "stroke-sky-1",
+  "sky-2": "stroke-sky-2",
+  "sky-3": "stroke-sky-3",
+  "sky-4": "stroke-sky-4",
+  glow: "stroke-glow",
+  "glow-soft": "stroke-glow-soft",
+  "glow-pale": "stroke-glow-pale",
+  canvas: "stroke-canvas",
+  "mist-1": "stroke-mist-1",
+  "mist-2": "stroke-mist-2",
+  "mist-3": "stroke-mist-3",
+  paper: "stroke-paper",
+  ink: "stroke-ink",
+  page: "stroke-background"
+};
+var BG = {
+  "night-0": "bg-night-0",
+  "night-1": "bg-night-1",
+  "night-2": "bg-night-2",
+  "sky-0": "bg-sky-0",
+  "sky-1": "bg-sky-1",
+  "sky-2": "bg-sky-2",
+  "sky-3": "bg-sky-3",
+  "sky-4": "bg-sky-4",
+  glow: "bg-glow",
+  "glow-soft": "bg-glow-soft",
+  "glow-pale": "bg-glow-pale",
+  canvas: "bg-canvas",
+  "mist-1": "bg-mist-1",
+  "mist-2": "bg-mist-2",
+  "mist-3": "bg-mist-3",
+  paper: "bg-paper",
+  ink: "bg-ink",
+  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 as Fragment2, jsx as jsx2, jsxs } from "react/jsx-runtime";
+function measuredAll(piece, field, facts) {
+  for (const [name, value] of Object.entries(facts))
+    if (value !== void 0) measured(piece, name, name, value, field);
+}
+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})`
+      );
+}
+var MAX_BUMPS = 2e3;
+var BLEED_BOTH_SIDES = {
+  left: "bleed",
+  right: "bleed",
+  down: false
+};
+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}: 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, only) {
+  if (copy === null) return BLEED_BOTH_SIDES;
+  if (only === "stack" || only === "phone")
+    return { left: "bleed", right: "bleed", down: true };
+  return copy === "start" ? { left: "close", right: "bleed", down: true } : { left: "bleed", right: "close", down: true };
+}
+function SkyField({
+  width,
+  height,
+  anchor,
+  fit,
+  only,
+  ground,
+  children
+}) {
+  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, only),
+    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: preserveOf(anchor, fit),
+      "aria-hidden": "true",
+      className: cn("absolute inset-0", frameClass(only)),
+      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 }) {
+  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,
+      cy,
+      r: ring.r,
+      className: FILL[ring.tone]
+    },
+    i
+  )) });
+}
+var RNG_MODULUS = 2147483647;
+function rng(seed) {
+  let s = (Math.trunc(seed) % (RNG_MODULUS - 1) + RNG_MODULUS - 1) % (RNG_MODULUS - 1);
+  s += 1;
+  return () => {
+    s = s * 16807 % RNG_MODULUS;
+    return (s - 1) / (RNG_MODULUS - 1);
+  };
+}
+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: the bump radius range must have max >= min (got min ${min}, max ${max})`
+    );
+  const bumps = Math.ceil(
+    ((1 + 2 * BLEED_WIDTHS) * width + 2 * max) / (2 * min)
+  );
+  if (bumps > MAX_BUMPS)
+    throw new Error(
+      `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);
+  const run = [];
+  let x = -max;
+  let endX = x;
+  let endY = y;
+  let drift = 0;
+  while (x < width + max) {
+    const r = min + next() * (max - min);
+    const s = step(r, next);
+    const lift = level ? s - drift : s;
+    drift += lift;
+    x += r * 2;
+    endX += rounded(r * 2);
+    endY += rounded(lift);
+    run.push({ d: arc(r, lift), x, endX, endY });
+  }
+  const end = (from, edge, up) => {
+    const rx = Math.abs(edge - from.x).toFixed(1);
+    const ry = bottom - from.y;
+    if (ry <= 0)
+      throw new Error(
+        `CloudBank: its end at the frame's edge has no depth to fall (top ${from.y.toFixed(1)}, fill to ${bottom}); a closed side fills on below the field`
+      );
+    return up ? `A${rx} ${ry.toFixed(1)} 0 0 1 ${from.x.toFixed(1)} ${from.y.toFixed(1)}` : `A${rx} ${ry.toFixed(1)} 0 0 1 ${edge} ${bottom}`;
+  };
+  const first = reach.left === "close" ? run.findIndex((b) => b.endX >= max) : -1;
+  let last = run.length - 1;
+  if (reach.right === "close") {
+    last = -1;
+    run.forEach((b, i) => {
+      if (b.endX <= width - max && i > first) last = i;
+    });
+  }
+  const startPoint = first === -1 ? { x: -max, y } : { x: run[first].endX, y: run[first].endY };
+  let frame = reach.left === "close" ? `M0 ${bottom}${end(startPoint, 0, true)}` : `M${-max} ${bottom}L${-max} ${y}`;
+  for (let i = first + 1; i <= last; i++) frame += run[i].d;
+  if (reach.right === "close") {
+    const at = last === -1 ? startPoint : { x: run[last].endX, y: run[last].endY };
+    frame += `${end(at, width, false)}Z`;
+  } else frame += `L${x} ${bottom}Z`;
+  const paths = [];
+  if (reach.left === "bleed") {
+    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);
+    }
+    paths.push(
+      `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`
+    );
+  }
+  if (reach.right === "bleed") {
+    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 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;
+  if (reach.left === "close") d = `M0 ${bottom}`;
+  else {
+    const back = rng(seed + BLEED_STREAM);
+    const from = -BLEED_WIDTHS * width;
+    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);
+  const count = reach.right === "close" ? swells : (1 + BLEED_WIDTHS) * swells;
+  for (let i = 0; i < count; i++) {
+    const cy = y - next() * rise;
+    const tail = (y - next() * rise * 0.3).toFixed(1);
+    const end = reach.right === "close" && i === count - 1 ? `${bottom}` : tail;
+    d += `Q${(i + 0.5) * step} ${cy.toFixed(1)} ${(i + 1) * step} ${end}`;
+  }
+  if (reach.right === "close") return `${d}Z`;
+  return `${d}L${(1 + BLEED_WIDTHS) * width} ${bottom}Z`;
+}
+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);
+  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.4;
+function RouteLine({
+  points,
+  tone,
+  markTone,
+  labelSize
+}) {
+  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 gap = labelSize * 1.1;
+    return /* @__PURE__ */ jsx2(Fragment2, { children: points.map((p, i) => {
+      if (!p.label) return null;
+      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__ */ jsx2(
+        "text",
+        {
+          x: lx,
+          y: ly,
+          textAnchor: 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}`;
+  }
+  return /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx2(
+      "path",
+      {
+        d,
+        fill: "none",
+        strokeWidth: labelSize * 0.16,
+        strokeDasharray: `${labelSize * 0.1} ${labelSize * 0.55}`,
+        strokeLinecap: "round",
+        className: STROKE[tone]
+      }
+    ),
+    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 jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var PAD = {
+  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;
+  return /* @__PURE__ */ jsxs2(
+    "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__ */ jsx3(
+          Bank,
+          {
+            field: { width, height: seam },
+            bank: { y: 82, min: 24, max: 56, level: true, seed: seed + 3 },
+            tone: via
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          Bank,
+          {
+            field: { width, height: seam + overlap },
+            bank: { y: 100, min: 22, max: 58, level: true, seed },
+            tone
+          }
+        ),
+        /* @__PURE__ */ jsx3("g", { transform: `matrix(1 0 0 -1 0 ${height})`, children: /* @__PURE__ */ jsx3(
+          Bank,
+          {
+            field: { width, height: seam + overlap },
+            bank: { y: 72, min: 22, max: 58, level: true, seed: seed + 7 },
+            tone
+          }
+        ) })
+      ]
+    }
+  );
+}
+function Band({
+  tone,
+  surface = "day",
+  pad = "section",
+  under = "none",
+  edge,
+  backdrop,
+  raised,
+  id,
+  children
+}) {
+  return /* @__PURE__ */ jsxs2(
+    "section",
+    {
+      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",
+        surface === "night" && UNDER_NIGHT_HEADER
+      ),
+      children: [
+        backdrop && /* @__PURE__ */ jsx3(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "absolute inset-0 -z-10 overflow-hidden",
+            children: backdrop
+          }
+        ),
+        edge && /* @__PURE__ */ jsx3(BandEdge, { ...edge, tone }),
+        /* @__PURE__ */ jsx3(GroundContext.Provider, { value: tone, children })
+      ]
+    }
+  );
+}
+
+// src/material/figure.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var ASPECT = {
+  "16:9": "aspect-video",
+  "8:5": "aspect-[8/5]",
+  "4:3": "aspect-[4/3]",
+  "3:2": "aspect-[3/2]",
+  "1:1": "aspect-square",
+  "4:5": "aspect-[4/5]",
+  "full-bleed": "h-full"
+};
+function recordable(spec) {
+  const blank = [
+    !spec.role.trim() && "`role`",
+    !spec.prompt.trim() && "`prompt`",
+    spec.palette.length === 0 && "`palette`"
+  ].filter(Boolean);
+  if (blank.length > 0)
+    throw new Error(
+      `Figure: ${blank.join(", ")} of the spec for "${spec.role}" must not be empty; the image step reads them`
+    );
+}
+function Figure({ spec, alt, children, fit = "aspect" }) {
+  recordable(spec);
+  return /* @__PURE__ */ jsx4(
+    "figure",
+    {
+      role: alt ? "img" : void 0,
+      "aria-label": alt || void 0,
+      "aria-hidden": alt ? void 0 : "true",
+      "data-figure-role": spec.role,
+      "data-figure-aspect": spec.aspect,
+      "data-figure-palette": spec.palette.join(" "),
+      "data-figure-prompt": spec.prompt,
+      className: cn(
+        "relative m-0 overflow-hidden [&>svg]:absolute [&>svg]:inset-0 [&>svg]:size-full",
+        fit === "fill" ? "h-full w-full" : ASPECT[spec.aspect]
+      ),
+      children
+    }
+  );
+}
+
+// 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]"
+};
+function HeroScene({
+  height,
+  subject,
+  copySide = "start",
+  children
+}) {
+  return /* @__PURE__ */ jsx5("div", { "data-hero-scene": "", className: "overflow-x-clip", 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 jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var GAP = {
+  1: "gap-1",
+  2: "gap-2",
+  3: "gap-3",
+  4: "gap-4",
+  6: "gap-6",
+  8: "gap-8",
+  10: "gap-10",
+  12: "gap-12",
+  16: "gap-16"
+};
+function Stack({ gap, align = "stretch", children }) {
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      className: cn(
+        "flex min-w-0 flex-col",
+        GAP[gap],
+        align === "center" && "items-center",
+        align === "start" && "items-start"
+      ),
+      children
+    }
+  );
+}
+function Inline({
+  gap,
+  justify = "start",
+  align = "center",
+  fillOnPhone,
+  children
+}) {
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      className: cn(
+        "flex min-w-0 flex-wrap",
+        GAP[gap],
+        align === "center" ? "items-center" : "items-start",
+        justify === "between" && "justify-between",
+        justify === "center" && "justify-center",
+        fillOnPhone && "max-sm:w-full max-sm:flex-col max-sm:items-stretch max-sm:[&>*]:w-full"
+      ),
+      children
+    }
+  );
+}
+var COUNT = {
+  2: "md:grid-cols-2",
+  3: "md:grid-cols-3",
+  4: "md:grid-cols-4"
+};
+var CONNECT = "md:[&>*]:relative md:[&>*:not(:last-child,:has(+[data-scroll-hint]))]:after:absolute md:[&>*:not(:last-child,:has(+[data-scroll-hint]))]:after:left-[calc(50%+2.5rem)] md:[&>*:not(:last-child,:has(+[data-scroll-hint]))]:after:top-6 md:[&>*:not(:last-child,:has(+[data-scroll-hint]))]:after:h-0 md:[&>*:not(:last-child,:has(+[data-scroll-hint]))]:after:w-[calc(100%-3rem)] md:[&>*:not(:last-child,:has(+[data-scroll-hint]))]:after:border-t-2 md:[&>*:not(:last-child,:has(+[data-scroll-hint]))]:after:border-dashed md:[&>*:not(:last-child,:has(+[data-scroll-hint]))]:after:border-mist-3 md:[&>*:not(:last-child,:has(+[data-scroll-hint]))]:after:content-['']";
+function Columns({
+  count,
+  gap,
+  phone,
+  connect,
+  children
+}) {
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: cn(
+        GAP[gap],
+        connect && CONNECT,
+        phone === "stack" ? cn("grid grid-cols-1", COUNT[count]) : cn(
+          "flex overflow-x-auto md:grid md:overflow-visible md:[&>[data-scroll-hint]]:hidden",
+          "[&>:not([data-scroll-hint])]:w-64 [&>:not([data-scroll-hint])]:shrink-0 md:[&>:not([data-scroll-hint])]:w-auto",
+          COUNT[count]
+        )
+      ),
+      children: [
+        children,
+        phone === "scroll" && /* @__PURE__ */ jsx6(ScrollHintXMark, {})
+      ]
+    }
+  );
+}
+function Split({ ratio, reverse, gap, children }) {
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: cn(
+        "grid grid-cols-1 items-center",
+        GAP[gap],
+        ratio === "even" ? "md:grid-cols-2" : "md:grid-cols-[5fr_7fr]",
+        reverse && (ratio === "even" ? "md:[&>:first-child]:order-2" : "md:grid-cols-[7fr_5fr] md:[&>:first-child]:order-2")
+      ),
+      children: [
+        /* @__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"
+};
+function 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__ */ jsx6("div", { className: INSET[pad], children });
+}
+
+// src/material/type.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var LEVEL = {
+  poster: "text-display-poster",
+  headline: "text-display-headline",
+  title: "text-display-title"
+};
+var MEASURE = {
+  narrow: "max-w-[14ch]",
+  wide: "max-w-[22ch]",
+  none: ""
+};
+function Display({
+  level,
+  as: Tag,
+  align = "start",
+  measure = "none",
+  children
+}) {
+  return /* @__PURE__ */ jsx7(
+    Tag,
+    {
+      className: cn(
+        "text-foreground",
+        LEVEL[level],
+        MEASURE[measure],
+        align === "center" && "mx-auto text-center"
+      ),
+      children
+    }
+  );
+}
+var SIZE = {
+  lede: "text-lede",
+  body: "text-base leading-relaxed",
+  small: "text-sm leading-snug",
+  micro: "text-xs leading-snug"
+};
+var TONE = {
+  default: "text-foreground",
+  muted: "text-muted-foreground",
+  accent: "text-primary-text"
+};
+var WEIGHT = {
+  normal: "font-normal",
+  medium: "font-medium",
+  bold: "font-semibold"
+};
+function Text({
+  size = "body",
+  tone = "default",
+  weight = "normal",
+  align = "start",
+  measure,
+  as: Tag = "p",
+  children
+}) {
+  return /* @__PURE__ */ jsx7(
+    Tag,
+    {
+      className: cn(
+        SIZE[size],
+        TONE[tone],
+        WEIGHT[weight],
+        align === "center" && "mx-auto text-center",
+        measure && "max-w-[58ch]"
+      ),
+      children
+    }
+  );
+}
+
+// src/material/vignette.tsx
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+function Vignette({
+  title,
+  icon,
+  sampleLabel,
+  surface = "day",
+  placement = "inline",
+  crop = "none",
+  children
+}) {
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      "data-surface": surface,
+      className: cn(
+        "relative overflow-hidden rounded-2xl border border-border bg-background shadow-[0_2px_4px_-2px_hsl(var(--night-1)),0_30px_70px_-30px_hsl(var(--night-1))]",
+        placement === "hang" && "z-10 -mb-32 md:-mb-52"
+      ),
+      children: [
+        /* @__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__ */ jsx8(
+          "div",
+          {
+            className: cn(
+              "bg-muted/50 p-3 md:p-4",
+              // a mask reads alpha only, so any opaque token draws the same crop
+              crop === "bottom" && "relative max-h-[24rem] overflow-hidden [mask-image:linear-gradient(to_bottom,hsl(var(--foreground))_70%,transparent)]"
+            ),
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/material/wordmark.tsx
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+function Wordmark({ name, mark, href }) {
+  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__ */ 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,
+  Stack,
+  Stars,
+  Text,
+  Vignette,
+  Wordmark,
+  cloudBankPaths,
+  ridgePath,
+  starDots
+};