@caqophony/ui 0.5.0 → 0.5.1

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.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

@@ -263,11 +263,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 +277,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 +298,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 +374,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 +387,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 +431,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 +468,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 +558,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 +779,14 @@ 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: "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(

package/package.json

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