@nadicodeai/ui 12.1.150 → 12.1.151

package/dist/components/hive-scene.d.ts

@@ -25,6 +25,13 @@ export type HivePoint = {
     x: number;
     y: number;
 };
+/** A box in the scene's pixels, from its top left corner. */
+export type HiveBox = {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+};
 /** Where the work comes from and goes to in the picture, in the scene's pixels. */
 export type HiveWork = {
     senders: readonly HivePoint[];
@@ -41,13 +48,16 @@ export type HiveSceneProps = Omit<React.ComponentProps<"div">, "children"> & {
         src: string;
         label: string;
     };
-    /** The app's picture, placed by the app's own stylesheet. */
+    /**
+     * The app's picture, placed by the app's own stylesheet, which keeps it clear of the words by
+     * the width the scene sets on itself as `--hive-words-width`.
+     */
     picture?: React.ReactNode;
-    /** The picture's people for the scene's current size, so the work reaches them. */
-    work?: (size: {
-        width: number;
-        height: number;
-    }) => HiveWork;
+    /**
+     * The picture's people, so the work reaches them: `pictures` are the boxes the picture's
+     * elements are drawn in now, in their order, an element not drawn as an empty box.
+     */
+    work?: (pictures: readonly HiveBox[]) => HiveWork;
     /** Window chrome the scene must carry, such as a drag region. */
     chrome?: React.ReactNode;
     /** What `loading` is waiting for, read by assistive technology. */
@@ -62,7 +72,8 @@ export type HiveSceneProps = Omit<React.ComponentProps<"div">, "children"> & {
  * @instead Nadia's entry screens are `EntryScene`. A product page never stands on a scene.
  * @behaviour `join` puts the words in the hexagon's middle, `loading` draws the orbs in with no
  * words, `still` shows no Agent and no work. Only the orbs and the particles move; reduced motion
- * stops both. Black in every theme.
+ * stops both. Black in every theme. The scene sets the width its words are drawn at on itself as
+ * `--hive-words-width`, so the app's picture keeps clear of them, and draws no honeycomb near them.
  * @words The words are the screen's own: a title, a line, one action. The logo's label names
  * Alveare.
  * @access The canvases are hidden; the logo's image is named by its label. In `loading` the scene

package/dist/components/hive-scene.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hive-scene.d.ts","sourceRoot":"","sources":["../../src/components/hive-scene.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,MAAM,MAAM,SAAS,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEjD,mFAAmF;AACnF,MAAM,MAAM,QAAQ,GAAG;IACrB,OAAO,EAAE,SAAS,SAAS,EAAE,CAAC;IAC9B,SAAS,EAAE,SAAS,SAAS,EAAE,CAAC;CACjC,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;AAEzD,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,OAAO,CAAC;AAElD,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IAC3E,IAAI,EAAE,aAAa,CAAC;IACpB,qFAAqF;IACrF,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,kFAAkF;IAClF,IAAI,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IACrC,6DAA6D;IAC7D,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,mFAAmF;IACnF,IAAI,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,QAAQ,CAAC;IAC7D,iEAAiE;IACjE,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAmLF;;;;;;;;;;;;;GAaG;AACH,iBAAS,SAAS,CAAC,EACjB,IAAI,EACJ,MAAkB,EAClB,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,MAAM,EACN,KAAK,EACL,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,qBA8PhB;AAED,2DAA2D;AAC3D,iBAAS,SAAS,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,qBAM9E;AAED,iEAAiE;AACjE,iBAAS,QAAQ,CAAC,EAChB,QAAQ,EACR,EAAE,EACF,IAAa,GACd,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CACzB,qBAMA;AAED,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"hive-scene.d.ts","sourceRoot":"","sources":["../../src/components/hive-scene.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,MAAM,MAAM,SAAS,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEjD,6DAA6D;AAC7D,MAAM,MAAM,OAAO,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC;AAEnF,mFAAmF;AACnF,MAAM,MAAM,QAAQ,GAAG;IACrB,OAAO,EAAE,SAAS,SAAS,EAAE,CAAC;IAC9B,SAAS,EAAE,SAAS,SAAS,EAAE,CAAC;CACjC,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;AAEzD,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,OAAO,CAAC;AAElD,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IAC3E,IAAI,EAAE,aAAa,CAAC;IACpB,qFAAqF;IACrF,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,kFAAkF;IAClF,IAAI,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IACrC;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,IAAI,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,OAAO,EAAE,KAAK,QAAQ,CAAC;IAClD,iEAAiE;IACjE,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AA4LF;;;;;;;;;;;;;;GAcG;AACH,iBAAS,SAAS,CAAC,EACjB,IAAI,EACJ,MAAkB,EAClB,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,MAAM,EACN,KAAK,EACL,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,qBA4QhB;AAED,2DAA2D;AAC3D,iBAAS,SAAS,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,qBAM9E;AAED,iEAAiE;AACjE,iBAAS,QAAQ,CAAC,EAChB,QAAQ,EACR,EAAE,EACF,IAAa,GACd,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CACzB,qBAMA;AAED,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/hive-scene.js

@@ -111,7 +111,7 @@ const COMB_CLUSTERS = [
         ],
     },
 ];
-function drawComb(canvas, width, height) {
+function drawComb(canvas, width, height, words) {
     const context = sizeCanvas(canvas, width, height);
     if (!context)
         return;
@@ -120,14 +120,22 @@ function drawComb(canvas, width, height) {
     // Pointy-top cells in axial coordinates: q along the row, r down the rows.
     // One path per cluster, stroked once, so an edge two cells share is one line.
     const across = Math.sqrt(3) * COMB_RADIUS;
+    const reach = COMB_RADIUS + WORDS_GAP;
     for (const cluster of COMB_CLUSTERS) {
+        const centres = cluster.cells.map(([q, r]) => ({
+            x: cluster.x * width + across * (q + r / 2),
+            y: cluster.y * height + 1.5 * COMB_RADIUS * r,
+        }));
+        const nearWords = words &&
+            centres.some(({ x, y }) => x + reach > words.left &&
+                x - reach < words.right &&
+                y + reach > words.top &&
+                y - reach < words.bottom);
+        if (nearWords)
+            continue;
         context.globalAlpha = cluster.alpha;
         context.beginPath();
-        for (const [q, r] of cluster.cells) {
-            const centre = {
-                x: cluster.x * width + across * (q + r / 2),
-                y: cluster.y * height + 1.5 * COMB_RADIUS * r,
-            };
+        for (const centre of centres) {
             for (let k = 0; k <= 6; k += 1) {
                 const { x, y } = corner(k % 6, centre, COMB_RADIUS);
                 if (k === 0)
@@ -158,7 +166,8 @@ function pick(items) {
  * @instead Nadia's entry screens are `EntryScene`. A product page never stands on a scene.
  * @behaviour `join` puts the words in the hexagon's middle, `loading` draws the orbs in with no
  * words, `still` shows no Agent and no work. Only the orbs and the particles move; reduced motion
- * stops both. Black in every theme.
+ * stops both. Black in every theme. The scene sets the width its words are drawn at on itself as
+ * `--hive-words-width`, so the app's picture keeps clear of them, and draws no honeycomb near them.
  * @words The words are the screen's own: a title, a line, one action. The logo's label names
  * Alveare.
  * @access The canvases are hidden; the logo's image is named by its label. In `loading` the scene
@@ -168,6 +177,7 @@ function HiveScene({ mode, column = "default", logo, picture, work, chrome, labe
     const sceneRef = React.useRef(null);
     const combRef = React.useRef(null);
     const flowRef = React.useRef(null);
+    const picturesRef = React.useRef(null);
     const orbRefs = React.useRef([]);
     const holderRefs = React.useRef([]);
     // The words' box, kept as state so the scene places the orbs again when it appears.
@@ -208,12 +218,13 @@ function HiveScene({ mode, column = "default", logo, picture, work, chrome, labe
         let height = 0;
         let context = null;
         let seats = [];
+        let bounds = scene.getBoundingClientRect();
         const place = () => {
             width = scene.clientWidth;
             height = scene.clientHeight;
             const centre = { x: width / 2, y: height / 2 };
             const radius = cellRadius(width, height) * (mode === "loading" ? 0.62 : 1);
-            const bounds = scene.getBoundingClientRect();
+            bounds = scene.getBoundingClientRect();
             const box = wordsColumn?.getBoundingClientRect();
             const words = box?.width
                 ? {
@@ -223,6 +234,7 @@ function HiveScene({ mode, column = "default", logo, picture, work, chrome, labe
                     bottom: box.bottom - bounds.top,
                 }
                 : null;
+            scene.style.setProperty("--hive-words-width", `${words ? words.right - words.left : 0}px`);
             seats = still
                 ? []
                 : AGENTS.map((agent, index) => clearOfWords(corner(index, centre, radius), agent.size, words, { width, height }));
@@ -236,7 +248,7 @@ function HiveScene({ mode, column = "default", logo, picture, work, chrome, labe
                 holder.style.left = `${seat.x}px`;
                 holder.style.top = `${seat.y}px`;
             });
-            drawComb(comb, width, height);
+            drawComb(comb, width, height, words);
             context = sizeCanvas(flow, width, height);
         };
         const observeLayout = (onLayout) => {
@@ -266,7 +278,16 @@ function HiveScene({ mode, column = "default", logo, picture, work, chrome, labe
             const others = seats.filter((other) => other !== null && other !== seat);
             const neighbour = (source + 1 + (Math.random() < 0.5 ? 0 : 4)) % AGENTS.length;
             const next = seats[neighbour] ?? pick(others);
-            const people = workRef.current?.({ width, height });
+            const pictures = Array.from(picturesRef.current?.children ?? [], (element) => {
+                const drawn = element.getBoundingClientRect();
+                return {
+                    left: drawn.left - bounds.left,
+                    top: drawn.top - bounds.top,
+                    right: drawn.right - bounds.left,
+                    bottom: drawn.bottom - bounds.top,
+                };
+            });
+            const people = workRef.current?.(pictures);
             const sender = people ? pick(people.senders) : undefined;
             const receiver = people ? pick(people.receivers) : undefined;
             const roll = Math.random();
@@ -368,7 +389,7 @@ function HiveScene({ mode, column = "default", logo, picture, work, chrome, labe
             reduced.removeEventListener("change", play);
         };
     }, [mode, still, wordsColumn]);
-    return (_jsxs("div", { ...props, className: cn("nc-hive dark", className), "data-mode": mode, "data-slot": "hive-scene", ref: sceneRef, ...(mode === "loading" ? { "aria-label": label, role: "status" } : {}), children: [chrome, _jsx("img", { alt: logo.label, className: "nc-hive-logo", "data-slot": "hive-logo", src: logo.src }), picture, _jsx("canvas", { "aria-hidden": "true", className: "nc-hive-comb", ref: combRef }), _jsx("canvas", { "aria-hidden": "true", className: "nc-hive-flow", ref: flowRef }), still
+    return (_jsxs("div", { ...props, className: cn("nc-hive dark", className), "data-mode": mode, "data-slot": "hive-scene", ref: sceneRef, ...(mode === "loading" ? { "aria-label": label, role: "status" } : {}), children: [chrome, _jsx("img", { alt: logo.label, className: "nc-hive-logo", "data-slot": "hive-logo", src: logo.src }), _jsx("div", { className: "nc-hive-pictures", ref: picturesRef, children: picture }), _jsx("canvas", { "aria-hidden": "true", className: "nc-hive-comb", ref: combRef }), _jsx("canvas", { "aria-hidden": "true", className: "nc-hive-flow", ref: flowRef }), still
                 ? null
                 : AGENTS.map((agent, index) => (_jsx("div", { "aria-hidden": "true", className: "nc-hive-agent", "data-slot": "hive-agent", "data-size": agent.size, ref: (holder) => {
                         holderRefs.current[index] = holder;

package/dist/showcase/usage.generated.js

@@ -1759,7 +1759,7 @@ export const USAGE = [
         summary: "Alveare's entry scene: its picture, its logo and six Agent orbs around the words.",
         when: "Alveare's entry screens, on its desktop and on Alveare Server: joining, loading, a failure.",
         instead: "Nadia's entry screens are `EntryScene`. A product page never stands on a scene.",
-        behaviour: "`join` puts the words in the hexagon's middle, `loading` draws the orbs in with no words, `still` shows no Agent and no work. Only the orbs and the particles move; reduced motion stops both. Black in every theme.",
+        behaviour: "`join` puts the words in the hexagon's middle, `loading` draws the orbs in with no words, `still` shows no Agent and no work. Only the orbs and the particles move; reduced motion stops both. Black in every theme. The scene sets the width its words are drawn at on itself as `--hive-words-width`, so the app's picture keeps clear of them, and draws no honeycomb near them.",
         words: "The words are the screen's own: a title, a line, one action. The logo's label names Alveare.",
         access: 'The canvases are hidden; the logo\'s image is named by its label. In `loading` the scene is `role="status"` named by `label`; otherwise the words and their action are the reading.',
     },

package/dist/styles/components.css

@@ -636,6 +636,12 @@
   background: var(--nc-identity-ink);
   color: var(--nc-ink);
   color-scheme: dark;
+  --hive-column-width: min(20rem, 80vw);
+  --hive-words-width: var(--hive-column-width);
+}
+
+.nc-hive-pictures {
+  display: contents;
 }
 
 /*
@@ -718,7 +724,7 @@
   display: grid;
   justify-items: stretch;
   gap: var(--nc-md);
-  width: min(20rem, 80vw);
+  width: var(--hive-column-width);
   text-align: center;
   text-wrap-style: balance;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nadicodeai/ui",
-  "version": "12.1.150",
+  "version": "12.1.151",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -84,7 +84,7 @@
     "@base-ui/react": "^1.9.0",
     "@iconify-icons/logos": "^2.0.3",
     "@iconify/react": "^6.0.2",
-    "@nadicodeai/design-system": "12.1.150",
+    "@nadicodeai/design-system": "12.1.151",
     "@tanstack/react-table": "^9.3.1",
     "@vgpu/wgsl": "0.6.0",
     "class-variance-authority": "^0.7.1",