@caqophony/ui 0.5.1 → 0.6.1

package/dist/marketing.js

@@ -13,7 +13,7 @@ import {
 
 // src/marketing/marketing-header.tsx
 import * as React from "react";
-import { createPortal } from "react-dom";
+import { createPortal, flushSync } from "react-dom";
 import { jsx, jsxs } from "react/jsx-runtime";
 var NIGHT_GROUND = "-mb-16 justify-between border-b border-border bg-night-0/80 backdrop-blur-md";
 var ON_DARK_GROUND = "text-background dark:text-foreground";
@@ -50,7 +50,7 @@ function useFold(refs, actionsHost, hasLinks) {
       );
     };
     measure();
-    const observer = new ResizeObserver(measure);
+    const observer = new ResizeObserver(() => flushSync(measure));
     for (const el of [
       bar.current,
       brandText.current,

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.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",
@@ -780,6 +781,7 @@ var HEIGHT2 = {
   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,
@@ -800,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.1",
+  "version": "0.6.1",
   "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)));