@caqophony/ui 0.5.0 → 0.6.0

package/dist/{chunk-I5DQCG6D.js → chunk-WGWKCFG2.js}

@@ -346,7 +346,7 @@ function NavbarMenu({
   defaultOpen = false,
   triggerClassName,
   folded = false,
-  surface
+  night = false
 }) {
   return /* @__PURE__ */ jsx5("div", { className: folded ? "ml-auto" : "ml-auto md:hidden", children: /* @__PURE__ */ jsxs4(
     NavDrawer,
@@ -356,7 +356,7 @@ function NavbarMenu({
       closedFrom: folded ? null : "md",
       defaultOpen,
       triggerClassName,
-      surface,
+      surface: night ? "night" : void 0,
       children: [
         search && /* @__PURE__ */ jsx5("div", { className: "px-4 pb-3", children: search }),
         links && /* @__PURE__ */ jsx5("nav", { className: "flex flex-col px-4 pb-3 [&>a]:whitespace-normal [&>a]:py-2.5 [&>a]:text-base", children: links }),

package/dist/index.js

@@ -11,7 +11,7 @@ import {
   buttonVariants,
   useModalSurface,
   usePanelRef
-} from "./chunk-I5DQCG6D.js";
+} from "./chunk-WGWKCFG2.js";
 import {
   Alert,
   EMPTY_VALUE_GLYPH,

package/dist/marketing.d.mts

@@ -41,8 +41,10 @@ interface MarketingHeaderProps {
  *     through the bar; its drawer stands on the same scope.
  *
  * #5948: below `md` the links and actions fold into the library's one phone
- * drawer (`NavbarMenu`), in both variants. The drawer stands on the card
- * surface whichever the variant, so its links are drawn for that surface.
+ * drawer (`NavbarMenu`), in both variants. A `light` bar's drawer stands on
+ * the card surface. #5997: a `dark` bar's stands on the night scope, as a
+ * `night` bar's does (#5980): its actions are `MarketingCta ground="dark"`,
+ * which read near-white on a day card.
  *
  * #5952: the row has a limit, and past it the bar folds into the same drawer at
  * any width (`useFold`), so a brand is never squeezed to make room for links.

package/dist/marketing.js

@@ -3,7 +3,7 @@ import {
   Button,
   Container,
   NavbarMenu
-} from "./chunk-I5DQCG6D.js";
+} from "./chunk-WGWKCFG2.js";
 import {
   ScrollHintXMark
 } from "./chunk-ID7VBGJA.js";
@@ -196,7 +196,7 @@ function MarketingHeader({
           {
             folded,
             triggerClassName: isDark ? DARK_MENU_BUTTON : isNight ? NIGHT_MENU_BUTTON : void 0,
-            surface: isNight ? variant : void 0,
+            night: isNight || isDark,
             links: hasLinks ? navItems.map((item) => /* @__PURE__ */ jsx(
               "a",
               {

package/dist/material-art.d.mts

@@ -92,6 +92,20 @@ interface ArtPoly extends ArtFilled {
     el: 'polygon' | 'polyline';
     points: ReadonlyArray<readonly [number, number]>;
 }
+/**
+ * #5998 — a ground: the author states where it sits in its frame (`y`) and its
+ * tone, and the code runs it the scene's full width and down past its foot
+ * (`GROUND_BLEED`), as the approved ports drew theirs by hand (x -4000 to
+ * 8000). It stands in a frame's own `nodes` only (the format's check names one
+ * in a group or a motif), so no transform moves its bleed. A `HeroScene` clips
+ * the sides, and the next band paints over the foot.
+ */
+interface ArtGround {
+    el: 'ground';
+    y: number;
+    fill?: ArtPaint;
+    opacity?: number;
+}
 interface ArtText extends ArtFilled {
     el: 'text';
     x: number;
@@ -102,7 +116,7 @@ interface ArtText extends ArtFilled {
     /** Words on the page, apart from the drawing: step 5 holds them to the Brief. */
     copy: string;
 }
-type ArtNode = ArtGroup | ArtPath | ArtRect | ArtCircle | ArtEllipse | ArtLine | ArtPoly | ArtText;
+type ArtNode = ArtGroup | ArtPath | ArtRect | ArtCircle | ArtEllipse | ArtLine | ArtPoly | ArtText | ArtGround;
 /** Where a frame stays when its box has another shape. */
 type ArtAnchor = 'top' | 'center' | 'bottom' | 'right';
 /** `cover` fills the box and may cut the frame; `contain` keeps all of it. */
@@ -127,11 +141,30 @@ interface ArtTree {
 }
 /** The one writer of how a frame sits in its box, for `Art` and `SkyField`. */
 declare const preserveOf: (anchor: ArtAnchor, fit?: ArtFit) => string;
+/**
+ * #6002 — how an `Art` frame sits in its box. A frame whose own `nodes` hold a
+ * `ground` stands on its box's foot (`YMax`) whatever its `anchor`, whose
+ * horizontal part it keeps: a hero's side frame is `contain`ed in a column
+ * taller than it, and a centred one put its ground at the copy's height
+ * (blind check 9, jobpilot-a: `y` 840 of 1000 under the CTAs from 1024 up).
+ * The objects standing on the ground are in the same frame units, so the whole
+ * frame moves, never the ground alone. Every other frame, and `SkyField`, keep
+ * `preserveOf`.
+ */
+declare const framePreserveOf: (frame: Pick<ArtFrame, "anchor" | "fit" | "nodes">) => string;
 /** The one writer of where frames are cut, for `Art` and `SkyField`. */
 declare const frameClass: (only: ArtOnly | undefined) => string;
+/**
+ * #5998 — how far a ground runs past its frame, each way and down, in the
+ * frame's larger side. Measured on the gencheck-8 answers and the three ports
+ * at every gate width: the scene runs past a frame's drawn content by at most
+ * 1.09 of that side (1600px wide), and from `lg` up the side draws at 750px
+ * or more, so 8 covers a scene about 6,600px wide.
+ */
+declare const GROUND_BLEED = 8;
 /** Draws a piece of art, for a `Figure`'s slot or a mark. */
 declare function Art({ tree }: {
     tree: ArtTree;
 }): ReactElement;
 
-export { Art, type ArtAnchor, type ArtCircle, type ArtDrawing, type ArtEllipse, type ArtFilled, type ArtFit, type ArtFrame, type ArtGroup, type ArtLine, type ArtNode, type ArtOnly, type ArtPaint, type ArtPath, type ArtPoly, type ArtRect, type ArtText, type ArtTransform, type ArtTree, frameClass, preserveOf };
+export { Art, type ArtAnchor, type ArtCircle, type ArtDrawing, type ArtEllipse, type ArtFilled, type ArtFit, type ArtFrame, type ArtGround, type ArtGroup, type ArtLine, type ArtNode, type ArtOnly, type ArtPaint, type ArtPath, type ArtPoly, type ArtRect, type ArtText, type ArtTransform, type ArtTree, GROUND_BLEED, frameClass, framePreserveOf, preserveOf };

package/dist/material-art.js

@@ -48,7 +48,15 @@ var ANCHOR = {
   bottom: "xMidYMax",
   right: "xMaxYMid"
 };
-var preserveOf = (anchor, fit = "cover") => `${ANCHOR[anchor]} ${fit === "contain" ? "meet" : "slice"}`;
+var FIT = { contain: "meet", cover: "slice" };
+var preserveOf = (anchor, fit = "cover") => `${ANCHOR[anchor]} ${FIT[fit]}`;
+var ANCHOR_X = {
+  top: "xMid",
+  center: "xMid",
+  bottom: "xMid",
+  right: "xMax"
+};
+var framePreserveOf = (frame) => frame.nodes.some((node) => node.el === "ground") ? `${ANCHOR_X[frame.anchor]}YMax ${FIT[frame.fit ?? "cover"]}` : preserveOf(frame.anchor, frame.fit);
 var SHOWN = {
   phone: "size-full md:hidden",
   desktop: "hidden size-full md:block",
@@ -96,10 +104,14 @@ function drawn(node) {
     transform: node.transform?.map(transformOf).join(" ")
   };
 }
-function render(node, key) {
+var GROUND_BLEED = 8;
+function render(frame) {
+  return (node, key) => drawNode(node, key, frame);
+}
+function drawNode(node, key, frame) {
   switch (node.el) {
     case "g":
-      return /* @__PURE__ */ jsx("g", { ...drawn(node), children: node.children.map(render) }, key);
+      return /* @__PURE__ */ jsx("g", { ...drawn(node), children: node.children.map(render(frame)) }, key);
     case "path":
       return /* @__PURE__ */ jsx("path", { d: node.d, ...drawn(node) }, key);
     case "rect":
@@ -169,6 +181,22 @@ function render(node, key) {
         },
         key
       );
+    case "ground": {
+      const bleed = GROUND_BLEED * Math.max(frame.width, frame.height);
+      return /* @__PURE__ */ jsx(
+        "rect",
+        {
+          "data-art-ground": "",
+          x: -bleed,
+          y: node.y,
+          width: frame.width + 2 * bleed,
+          height: Math.max(frame.height - node.y, 0) + bleed,
+          opacity: node.opacity,
+          ...painted(node)
+        },
+        key
+      );
+    }
     case "text":
       return /* @__PURE__ */ jsx(
         "text",
@@ -195,16 +223,19 @@ function Art({ tree }) {
     "svg",
     {
       viewBox: `0 0 ${frame.width} ${frame.height}`,
-      preserveAspectRatio: preserveOf(frame.anchor, frame.fit),
+      preserveAspectRatio: framePreserveOf(frame),
+      "data-art-only": frame.only,
       "aria-hidden": "true",
       className: frameClass(frame.only),
-      children: frame.nodes.map(render)
+      children: frame.nodes.map(render(frame))
     },
     i
   )) });
 }
 export {
   Art,
+  GROUND_BLEED,
   frameClass,
+  framePreserveOf,
   preserveOf
 };

package/dist/material.d.mts

@@ -198,14 +198,13 @@ interface FieldSize {
     height: number;
 }
 /**
- * #5985 round 2 — which way a field's horizon pieces run on past it. On a
- * `close` side a piece ends at the frame's edge with a natural end (a bank's
- * last bump, a ridge's slope, down to the field's bottom); `down` runs every
- * fill on below the field's bottom.
+ * #5985 round 2 — how far a field's horizon pieces run on past it: every piece
+ * bleeds both ways (`BLEED_WIDTHS`), and `down` runs every fill on below the
+ * field's bottom. #5997 retired the copy-side end (`close`): the approved port
+ * runs its ground the hero's full width, under the copy, and an end inside the
+ * scene showed as a tongue on every generated hero (generation check 7, 4 of 4).
  */
 interface FieldReach {
-    left: 'bleed' | 'close';
-    right: 'bleed' | 'close';
     down: boolean;
 }
 /** A field outside a `HeroScene`, `Band`'s edge and the stored art: the bleed both ways, filled to the field's bottom. */
@@ -253,10 +252,7 @@ interface CloudBankProps {
  * `contain`, and no start edge lands in a zone.
  *
  * #5985 round 2 — `reach` (a `HeroScene`'s field): `down` fills every path on
- * `DOWN_SHARE` of a field-height below the field's bottom, and a `close` side
- * has no bleed: the run ends with a last bump, a quarter ellipse from the run's
- * top down to the frame's edge at the foot of that fill, at least a `max` wide,
- * so it never stands as a straight edge.
+ * `DOWN_SHARE` of a field-height below the field's bottom.
  */
 declare function cloudBankPaths(field: FieldSize, bank: Omit<CloudBankProps, 'tone'>, reach: FieldReach): readonly string[];
 /**
@@ -283,9 +279,7 @@ interface RidgeProps {
  * pixels from before to keep.
  *
  * #5985 round 2 — `down` fills on `DOWN_SHARE` of a field-height below the
- * field's bottom; on a `close` side (a `HeroScene`'s field, toward its copy)
- * there is no bleed: the swell at the edge slopes down to the frame's edge at
- * the foot of that fill.
+ * field's bottom.
  */
 declare function ridgePath(field: FieldSize, ridge: Omit<RidgeProps, 'tone'>, reach: FieldReach): string;
 /** A smooth ridge line across its field, filled to the field's bottom. */
@@ -309,7 +303,11 @@ interface RoutePoint {
     x: number;
     y: number;
     label?: string;
-    /** Which side of the point its label sits. */
+    /**
+     * Which side of the point its label sits, first: the route keeps it unless
+     * the label would cross another or a mark, or leave the field, and then
+     * places it on the first side clear of them (#5997).
+     */
     side?: 'above' | 'below' | 'left' | 'right';
     /** `passed`: filled; `here`: ringed; `ahead`: hollow. */
     state: 'passed' | 'here' | 'ahead';

package/dist/material.js

@@ -89,7 +89,8 @@ var ANCHOR = {
   bottom: "xMidYMax",
   right: "xMaxYMid"
 };
-var preserveOf = (anchor, fit = "cover") => `${ANCHOR[anchor]} ${fit === "contain" ? "meet" : "slice"}`;
+var FIT = { contain: "meet", cover: "slice" };
+var preserveOf = (anchor, fit = "cover") => `${ANCHOR[anchor]} ${FIT[fit]}`;
 var SHOWN = {
   phone: "size-full md:hidden",
   desktop: "hidden size-full md:block",
@@ -263,11 +264,8 @@ function sized(piece, field) {
       );
 }
 var MAX_BUMPS = 2e3;
-var BLEED_BOTH_SIDES = {
-  left: "bleed",
-  right: "bleed",
-  down: false
-};
+var BLEED_BOTH_SIDES = { down: false };
+var IN_SCENE = { down: true };
 var SceneCopyContext = createContext(null);
 var GroundContext = createContext(null);
 var FieldContext = createContext(null);
@@ -280,11 +278,8 @@ function useField(piece) {
     );
   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 reachOf(copy) {
+  return copy === null ? BLEED_BOTH_SIDES : IN_SCENE;
 }
 function SkyField({
   width,
@@ -304,7 +299,7 @@ function SkyField({
   const field = {
     width,
     height,
-    reach: reachOf(copy, only),
+    reach: reachOf(copy),
     ground: ground === "none" ? under : ground,
     routes: new Set(
       routes.map(
@@ -380,7 +375,7 @@ function cloudBankPaths(field, bank, reach) {
   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 frame = `M${-max} ${bottom}L${-max} ${y}`;
   let x = -max;
   let endX = x;
   let endY = y;
@@ -393,63 +388,35 @@ function cloudBankPaths(field, bank, reach) {
     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;
-    });
+    frame += arc(r, lift);
   }
-  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`
-    );
+  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);
   }
-  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`);
+  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;
 }
@@ -465,27 +432,20 @@ function ridgePath(field, ridge, reach) {
   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 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);
-  const count = reach.right === "close" ? swells : (1 + BLEED_WIDTHS) * swells;
-  for (let i = 0; i < count; i++) {
+  for (let i = 0; i < (1 + BLEED_WIDTHS) * swells; 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}`;
+    d += `Q${(i + 0.5) * step} ${cy.toFixed(1)} ${(i + 1) * step} ${tail}`;
   }
-  if (reach.right === "close") return `${d}Z`;
   return `${d}L${(1 + BLEED_WIDTHS) * width} ${bottom}Z`;
 }
 function Ridge({ tone, ...ridge }) {
@@ -509,7 +469,71 @@ function Stars({ tone, ...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;
+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,
   tone,
@@ -535,19 +559,16 @@ function RouteLine({
   if (layer === "labels") {
     if (!labelled || field.ground === null) return null;
     const halo = STROKE[field.ground];
-    const gap = labelSize * 1.1;
+    const places = routeLabelPlaces(points, labelSize, field);
     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";
+      const place = places[i];
+      if (!p.label || !place) return null;
       return /* @__PURE__ */ jsx2(
         "text",
         {
-          x: lx,
-          y: ly,
-          textAnchor: anchor,
+          x: place.x,
+          y: place.y,
+          textAnchor: place.anchor,
           fontSize: labelSize,
           fontWeight: 600,
           strokeWidth: labelSize * LABEL_HALO,
@@ -759,13 +780,15 @@ 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)]";
+var COPY_CONTAINER = "lg:[container-type:inline-size] lg:[container-name:hero-copy]";
 function HeroScene({
   height,
   subject,
   copySide = "start",
   children
 }) {
-  return /* @__PURE__ */ jsx5("div", { "data-hero-scene": "", className: "overflow-x-clip", children: /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsx5("div", { "data-hero-scene": "", className: cn("overflow-x-clip", CLIP_ABOVE), children: /* @__PURE__ */ jsxs3(
     "div",
     {
       className: cn(
@@ -779,6 +802,7 @@ function HeroScene({
             "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",
+              COPY_CONTAINER,
               CONTENT_GUTTER,
               copySide === "end" && "lg:order-2"
             ),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@caqophony/ui",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Generic, optional React UI reuse library (Gossamer tokens). Centrally maintained by Caqophony.",
   "license": "MIT",
   "author": "Caqophony",

package/styles.css

@@ -289,6 +289,12 @@
   line-height: 1.5;
 }
 
+@container hero-copy (width > 0px) {
+  .text-display-poster {
+    font-size: min(clamp(3rem, 1.05rem + 8vw, 7rem), calc(100cqi * 7 / 33.5));
+  }
+}
+
 [data-page-surface='marketing'] {
   --page-bg: var(--background);
   --section-band: color-mix(in srgb, hsl(var(--foreground)) 8%, hsl(var(--background)));