@nadicodeai/ui 12.1.67 → 12.1.68

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

@@ -0,0 +1,63 @@
+import * as React from "react";
+/**
+ * Alveare's entry scene, the hive, which Alveare's desktop and Alveare Server
+ * both stand their entry screens on (apps/alveare/docs/design-doctrine.md,
+ * "Screens"): the app's picture on black, Alveare's logo at the upper left,
+ * six Agent orbs on the corners of a hexagon around the words, and the work
+ * flowing between them and the people in the picture as particles in the
+ * sending orb's colour. The orbs are artwork, so they take ambient motion and
+ * claim no activity (DESIGN.md, "Agent orbs"). Only the orbs and the particles
+ * move; reduced motion stops both, an ambient orb holding still.
+ *
+ * - `join`: the words stand in the middle of the hexagon.
+ * - `loading`: the orbs draw in and there are no words.
+ * - `still`: no Agent and no work, for a failure (no orb turns on one) or a
+ *   screen read at length.
+ *
+ * The scene is black in every theme, so it scopes `dark`. The app owns its
+ * picture and where it stands, through its own stylesheet.
+ */
+export type HivePoint = {
+    x: number;
+    y: number;
+};
+/** Where the work comes from and goes to in the picture, in the scene's pixels. */
+export type HiveWork = {
+    senders: readonly HivePoint[];
+    receivers: readonly HivePoint[];
+};
+export type HiveSceneMode = "join" | "loading" | "still";
+export type HiveSceneProps = Omit<React.ComponentProps<"div">, "children"> & {
+    mode: HiveSceneMode;
+    /** Alveare's logo, its app icon without the construction guides, and its name. */
+    logo: {
+        src: string;
+        label: string;
+    };
+    /** The app's picture, placed by the app's own stylesheet. */
+    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;
+    /** Window chrome the scene must carry, such as a drag region. */
+    chrome?: React.ReactNode;
+    /** What `loading` is waiting for, read by assistive technology. */
+    label?: string;
+    children?: React.ReactNode;
+};
+declare function HiveScene({ mode, logo, picture, work, chrome, label, className, children, ...props }: HiveSceneProps): React.JSX.Element;
+/** The screen's one heading, in the middle of the hive. */
+declare function HiveTitle({ children, id }: {
+    children: React.ReactNode;
+    id?: string;
+}): React.JSX.Element;
+/** A line under the title saying what happened or what to do. */
+declare function HiveLine({ children, id, tone, }: {
+    children: React.ReactNode;
+    id?: string;
+    tone?: "body" | "error";
+}): React.JSX.Element;
+export { HiveLine, HiveScene, HiveTitle };
+//# sourceMappingURL=hive-scene.d.ts.map

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

@@ -0,0 +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;;;;;;;;;;;;;;;;;GAiBG;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,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IAC3E,IAAI,EAAE,aAAa,CAAC;IACpB,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,iBAAS,SAAS,CAAC,EACjB,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,MAAM,EACN,KAAK,EACL,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,qBAiNhB;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

@@ -0,0 +1,337 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { mountAgentOrb } from "../internal/agent-orb.js";
+import { cn } from "../lib/utils.js";
+const COBALTO = "var(--nc-identity-cobalto)";
+const VERDE = "var(--nc-identity-verde)";
+const ARANCIO = "var(--nc-identity-arancio)";
+const AGENTS = [
+    { form: "orbit", colour: COBALTO, size: 96 },
+    { form: "network", colour: VERDE, size: 64 },
+    { form: "globe", colour: ARANCIO, size: 96 },
+    { form: "lattice", colour: null, size: 64 },
+    { form: "braid", colour: COBALTO, size: 96 },
+    { form: "morph", colour: VERDE, size: 64 },
+];
+function cellRadius(width, height) {
+    return Math.min(width, height) * 0.3;
+}
+function corner(index, centre, radius) {
+    const angle = -Math.PI / 2 + (index * Math.PI) / 3;
+    return {
+        x: centre.x + Math.cos(angle) * radius,
+        y: centre.y + Math.sin(angle) * radius,
+    };
+}
+/** The room an orb keeps from the words, so text never sits on an Agent. */
+const WORDS_GAP = 16;
+/**
+ * An orb's seat moved clear of the words: a seat at the side steps out
+ * sideways, the top and bottom ones up and down. An orb with no room left
+ * inside the scene is not drawn.
+ */
+function clearOfWords(seat, size, words, scene) {
+    const half = size / 2 + WORDS_GAP;
+    let { x, y } = seat;
+    const covers = words &&
+        x + half > words.left &&
+        x - half < words.right &&
+        y + half > words.top &&
+        y - half < words.bottom;
+    if (words && covers) {
+        const centre = (words.left + words.right) / 2;
+        if (Math.abs(x - centre) > 1)
+            x = x > centre ? words.right + half : words.left - half;
+        else
+            y = y > (words.top + words.bottom) / 2 ? words.bottom + half : words.top - half;
+    }
+    const inside = x - size / 2 >= 0 &&
+        x + size / 2 <= scene.width &&
+        y - size / 2 >= 0 &&
+        y + size / 2 <= scene.height;
+    return inside ? { x, y } : null;
+}
+function sizeCanvas(canvas, width, height) {
+    const ratio = Math.min(window.devicePixelRatio || 1, 2);
+    canvas.width = width * ratio;
+    canvas.height = height * ratio;
+    const context = canvas.getContext("2d");
+    context?.setTransform(ratio, 0, 0, ratio, 0, 0);
+    return context;
+}
+/**
+ * Small groups of touching honeycomb cells in faint white lines, three
+ * clusters at the edges, clear of the people and the centre: the hive seen in
+ * passing, never a pattern. Each cluster is its centre (a share of the window)
+ * and its cells in axial hex coordinates, so the comb never moves.
+ */
+const COMB_RADIUS = 15;
+const COMB_CLUSTERS = [
+    {
+        x: 0.1,
+        y: 0.13,
+        alpha: 0.2,
+        cells: [
+            [0, 0],
+            [1, 0],
+            [0, 1],
+            [-1, 1],
+            [1, -1],
+            [2, -1],
+        ],
+    },
+    {
+        x: 0.83,
+        y: 0.16,
+        alpha: 0.2,
+        cells: [
+            [0, 0],
+            [1, 0],
+            [0, 1],
+            [1, 1],
+            [-1, 1],
+            [2, -1],
+            [1, -1],
+        ],
+    },
+    {
+        x: 0.22,
+        y: 0.3,
+        alpha: 0.13,
+        cells: [
+            [0, 0],
+            [1, 0],
+            [0, 1],
+            [1, -1],
+            [-1, 1],
+            [0, 2],
+            [-1, 2],
+            [1, 1],
+        ],
+    },
+];
+function drawComb(canvas, width, height) {
+    const context = sizeCanvas(canvas, width, height);
+    if (!context)
+        return;
+    context.strokeStyle = getComputedStyle(canvas).color;
+    context.lineWidth = 1;
+    // 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;
+    for (const cluster of COMB_CLUSTERS) {
+        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 (let k = 0; k <= 6; k += 1) {
+                const { x, y } = corner(k % 6, centre, COMB_RADIUS);
+                if (k === 0)
+                    context.moveTo(x, y);
+                else
+                    context.lineTo(x, y);
+            }
+        }
+        context.stroke();
+    }
+    context.globalAlpha = 1;
+}
+function along(particle, t) {
+    const u = 1 - t;
+    return {
+        x: u * u * particle.from.x + 2 * u * t * particle.bend.x + t * t * particle.to.x,
+        y: u * u * particle.from.y + 2 * u * t * particle.bend.y + t * t * particle.to.y,
+    };
+}
+function pick(items) {
+    return items[Math.floor(Math.random() * items.length)];
+}
+function HiveScene({ mode, logo, picture, work, chrome, label, className, children, ...props }) {
+    const sceneRef = React.useRef(null);
+    const combRef = React.useRef(null);
+    const flowRef = 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.
+    const [column, setColumn] = React.useState(null);
+    const workRef = React.useRef(work);
+    workRef.current = work;
+    const still = mode === "still";
+    React.useEffect(() => {
+        if (still)
+            return;
+        const mounted = orbRefs.current.flatMap((canvas, index) => {
+            const agent = AGENTS[index];
+            return canvas && agent
+                ? [
+                    mountAgentOrb(canvas, {
+                        form: agent.form,
+                        size: agent.size,
+                        // Artwork, not Agents at work: each form moves at its own pace and claims no activity.
+                        motion: "ambient",
+                        presence: "over-picture",
+                    }),
+                ]
+                : [];
+        });
+        return () => {
+            for (const orb of mounted)
+                orb.destroy();
+        };
+    }, [still]);
+    React.useEffect(() => {
+        const scene = sceneRef.current;
+        const comb = combRef.current;
+        const flow = flowRef.current;
+        if (!scene || !comb || !flow)
+            return;
+        const reduced = window.matchMedia("(prefers-reduced-motion: reduce)");
+        let width = 0;
+        let height = 0;
+        let context = null;
+        let seats = [];
+        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();
+            const box = column?.getBoundingClientRect();
+            const words = box?.width
+                ? {
+                    left: box.left - bounds.left,
+                    top: box.top - bounds.top,
+                    right: box.right - bounds.left,
+                    bottom: box.bottom - bounds.top,
+                }
+                : null;
+            seats = still
+                ? []
+                : AGENTS.map((agent, index) => clearOfWords(corner(index, centre, radius), agent.size, words, { width, height }));
+            holderRefs.current.forEach((holder, index) => {
+                if (!holder)
+                    return;
+                const seat = seats[index];
+                holder.hidden = !seat;
+                if (!seat)
+                    return;
+                holder.style.left = `${seat.x}px`;
+                holder.style.top = `${seat.y}px`;
+            });
+            drawComb(comb, width, height);
+            context = sizeCanvas(flow, width, height);
+        };
+        place();
+        const resize = new ResizeObserver(place);
+        resize.observe(scene);
+        if (column)
+            resize.observe(column);
+        if (still)
+            return () => resize.disconnect();
+        const colours = orbRefs.current.map((canvas) => canvas ? getComputedStyle(canvas).color : "white");
+        const particles = [];
+        let frame = 0;
+        let last = performance.now();
+        let nextSpawn = 0;
+        const spawn = () => {
+            const source = Math.floor(Math.random() * AGENTS.length);
+            const seat = seats[source];
+            if (!seat)
+                return;
+            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 sender = people ? pick(people.senders) : undefined;
+            const receiver = people ? pick(people.receivers) : undefined;
+            const roll = Math.random();
+            const [from, to] = roll < 0.3 && sender
+                ? [sender, seat]
+                : roll < 0.6 && receiver
+                    ? [seat, receiver]
+                    : next
+                        ? [seat, next]
+                        : [];
+            if (!from || !to)
+                return;
+            const bend = (Math.random() - 0.5) * 120;
+            particles.push({
+                from,
+                to,
+                bend: {
+                    x: (from.x + to.x) / 2 + bend,
+                    y: (from.y + to.y) / 2 - Math.abs(bend),
+                },
+                t: 0,
+                speed: 0.07 + Math.random() * 0.06,
+                colour: colours[source] ?? "white",
+                size: 1.2 + Math.random() * 1.8,
+                trail: [],
+            });
+        };
+        const tick = (now) => {
+            const dt = Math.min(0.05, (now - last) / 1000);
+            last = now;
+            nextSpawn -= dt;
+            const paint = context;
+            if (paint) {
+                paint.clearRect(0, 0, width, height);
+                if (!reduced.matches && nextSpawn <= 0 && seats.length === AGENTS.length) {
+                    nextSpawn = 0.3;
+                    spawn();
+                }
+                for (let k = particles.length - 1; k >= 0; k -= 1) {
+                    const particle = particles[k];
+                    if (!particle)
+                        continue;
+                    particle.t += particle.speed * dt;
+                    if (particle.t >= 1 || reduced.matches) {
+                        particles.splice(k, 1);
+                        continue;
+                    }
+                    const fade = Math.sin(particle.t * Math.PI);
+                    particle.trail.push(along(particle, particle.t));
+                    if (particle.trail.length > 10)
+                        particle.trail.shift();
+                    paint.fillStyle = particle.colour;
+                    particle.trail.forEach((point, j) => {
+                        const share = (j + 1) / particle.trail.length;
+                        paint.globalAlpha = 0.9 * fade * share ** 2;
+                        paint.beginPath();
+                        paint.arc(point.x, point.y, particle.size * (0.4 + 0.6 * share), 0, Math.PI * 2);
+                        paint.fill();
+                    });
+                }
+                paint.globalAlpha = 1;
+            }
+            frame = requestAnimationFrame(tick);
+        };
+        frame = requestAnimationFrame(tick);
+        return () => {
+            cancelAnimationFrame(frame);
+            resize.disconnect();
+        };
+    }, [mode, still, column]);
+    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
+                ? 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;
+                    }, children: _jsx("canvas", { ref: (canvas) => {
+                            orbRefs.current[index] = canvas;
+                            if (canvas && agent.colour)
+                                canvas.style.color = agent.colour;
+                        } }) }, agent.form))), children ? (_jsx("div", { className: "nc-hive-column", "data-slot": "hive-column", ref: setColumn, children: children })) : null] }));
+}
+/** The screen's one heading, in the middle of the hive. */
+function HiveTitle({ children, id }) {
+    return (_jsx("h1", { className: "nc-hive-title", id: id, children: children }));
+}
+/** A line under the title saying what happened or what to do. */
+function HiveLine({ children, id, tone = "body", }) {
+    return (_jsx("p", { className: "nc-hive-line", "data-tone": tone, id: id, children: children }));
+}
+export { HiveLine, HiveScene, HiveTitle };

package/dist/components/qr-code.d.ts

@@ -0,0 +1,14 @@
+/**
+ * A link drawn as a QR code another device can scan: square dark modules on a
+ * white tile in every theme, because readers expect dark on light. `label`
+ * names what the code opens; the code itself is the image.
+ */
+declare function QrCode({ value, label, size, className, }: {
+    value: string;
+    label: string;
+    /** The drawn width and height, in CSS pixels. */
+    size: number;
+    className?: string;
+}): import("react").JSX.Element;
+export { QrCode };
+//# sourceMappingURL=qr-code.d.ts.map

package/dist/components/qr-code.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"qr-code.d.ts","sourceRoot":"","sources":["../../src/components/qr-code.tsx"],"names":[],"mappings":"AAQA;;;;GAIG;AACH,iBAAS,MAAM,CAAC,EACd,KAAK,EACL,KAAK,EACL,IAAI,EACJ,SAAS,GACV,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BA0BA;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/qr-code.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { create } from "qrcode";
+import { cn } from "../lib/utils.js";
+/** The blank border a reader needs around the code, in modules. */
+const QUIET_ZONE = 4;
+/**
+ * A link drawn as a QR code another device can scan: square dark modules on a
+ * white tile in every theme, because readers expect dark on light. `label`
+ * names what the code opens; the code itself is the image.
+ */
+function QrCode({ value, label, size, className, }) {
+    const { box, path } = useMemo(() => {
+        const { modules } = create(value, { errorCorrectionLevel: "M" });
+        let d = "";
+        for (let row = 0; row < modules.size; row += 1) {
+            for (let column = 0; column < modules.size; column += 1) {
+                if (modules.get(row, column))
+                    d += `M${column + QUIET_ZONE} ${row + QUIET_ZONE}h1v1h-1z`;
+            }
+        }
+        return { box: modules.size + QUIET_ZONE * 2, path: d };
+    }, [value]);
+    return (_jsx("svg", { "aria-label": label, className: cn("block rounded-md bg-nc-identity-white text-nc-identity-ink", className), "data-slot": "qr-code", height: size, role: "img", shapeRendering: "crispEdges", viewBox: `0 0 ${box} ${box}`, width: size, children: _jsx("path", { d: path, fill: "currentColor" }) }));
+}
+export { QrCode };

package/dist/index.d.ts

@@ -68,6 +68,7 @@ export * from "./components/footer.js";
 export * from "./components/form-drawer.js";
 export * from "./components/form.js";
 export * from "./components/glass-control.js";
+export * from "./components/hive-scene.js";
 export * from "./components/house-icons.js";
 export * from "./components/hover-card.js";
 export * from "./components/input.js";
@@ -100,6 +101,7 @@ export * from "./components/plugin-slot-boundary.js";
 export * from "./components/popover.js";
 export * from "./components/portal-sidebar-frame.js";
 export * from "./components/progress.js";
+export * from "./components/qr-code.js";
 export * from "./components/radio-group.js";
 export * from "./components/reading-column.js";
 export * from "./components/resizable.js";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -68,6 +68,7 @@ export * from "./components/footer.js";
 export * from "./components/form-drawer.js";
 export * from "./components/form.js";
 export * from "./components/glass-control.js";
+export * from "./components/hive-scene.js";
 export * from "./components/house-icons.js";
 export * from "./components/hover-card.js";
 export * from "./components/input.js";
@@ -100,6 +101,7 @@ export * from "./components/plugin-slot-boundary.js";
 export * from "./components/popover.js";
 export * from "./components/portal-sidebar-frame.js";
 export * from "./components/progress.js";
+export * from "./components/qr-code.js";
 export * from "./components/radio-group.js";
 export * from "./components/reading-column.js";
 export * from "./components/resizable.js";

package/dist/styles/components.css

@@ -516,6 +516,136 @@
   }
 }
 
+/*
+ * Alveare's entry scene, the hive (`components/hive-scene.tsx`), in the
+ * composition of Nadia's entry screen: the app's picture on a black ground and
+ * the words standing on its empty centre, with no panel, card or ground behind
+ * them. The scene scopes `dark`, so every token inside it takes its dark value
+ * whatever the app's mode. Each app places its own picture.
+ */
+
+.nc-hive {
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  isolation: isolate;
+  overflow: hidden auto;
+  display: grid;
+  place-items: safe center;
+  padding: var(--nc-xl) var(--nc-md);
+  background: var(--nc-identity-ink);
+  color: var(--nc-ink);
+  color-scheme: dark;
+}
+
+/*
+ * Alveare's own logo at the upper left, where Nadia's and the Portal's entry
+ * screens put the nadicode wordmark, at the wordmark's height and inset. The
+ * icon's tile is 824 of its 1024 units; the image box is sized so the tile,
+ * not the file's margin, takes the wordmark's height. An app with window
+ * controls over the scene sets `--hive-chrome-clearance` to their height, which
+ * the narrow inset clears.
+ */
+.nc-hive-logo {
+  --hive-logo-tile: 24px;
+  --hive-logo-inset: var(--nc-lg);
+  --hive-logo-box: calc(var(--hive-logo-tile) * 1024 / 824);
+  --hive-logo-margin: calc(var(--hive-logo-box) * 100 / 1024);
+  position: absolute;
+  z-index: 2;
+  top: calc(
+    max(var(--hive-logo-inset), var(--hive-chrome-clearance, 0px)) -
+    var(--hive-logo-margin)
+  );
+  left: calc(var(--hive-logo-inset) - var(--hive-logo-margin));
+  width: var(--hive-logo-box);
+  height: var(--hive-logo-box);
+  pointer-events: none;
+  user-select: none;
+}
+
+@media (min-width: 640px) {
+  .nc-hive-logo {
+    --hive-logo-tile: 32px;
+  }
+}
+
+@media (min-width: 768px) {
+  .nc-hive-logo {
+    --hive-logo-inset: var(--nc-2xl);
+    top: calc(var(--hive-logo-inset) - var(--hive-logo-margin));
+  }
+}
+
+.nc-hive-comb,
+.nc-hive-flow {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.nc-hive-comb {
+  color: var(--nc-identity-white);
+}
+
+.nc-hive-agent {
+  position: absolute;
+  translate: -50% -50%;
+  pointer-events: none;
+}
+
+.nc-hive-agent[data-size="64"] {
+  width: 64px;
+  height: 64px;
+}
+
+.nc-hive-agent[data-size="96"] {
+  width: 96px;
+  height: 96px;
+}
+
+.nc-hive-agent canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.nc-hive-column {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  justify-items: stretch;
+  gap: var(--nc-md);
+  width: min(20rem, 80vw);
+  text-align: center;
+}
+
+.nc-hive-title {
+  margin: 0;
+  font-family: var(--nc-type-heading-md-font-family);
+  font-size: var(--nc-type-heading-md-font-size);
+  font-weight: var(--nc-type-heading-md-font-weight);
+  line-height: var(--nc-type-heading-md-line-height);
+  letter-spacing: var(--nc-type-heading-md-letter-spacing);
+  text-wrap: balance;
+  overflow-wrap: break-word;
+}
+
+.nc-hive-line {
+  margin: 0;
+  font-family: var(--nc-type-body-sm-font-family);
+  font-size: var(--nc-type-body-sm-font-size);
+  line-height: var(--nc-type-body-sm-line-height);
+  overflow-wrap: break-word;
+  color: var(--nc-body);
+}
+
+.nc-hive-line[data-tone="error"] {
+  color: var(--nc-error);
+}
+
 /*
  * The company card, contained (`components/company-card.tsx`;
  * design-system DESIGN.md, "Company card").

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nadicodeai/ui",
-  "version": "12.1.67",
+  "version": "12.1.68",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -75,7 +75,7 @@
     "@base-ui/react": "^1.8.0",
     "@iconify-icons/logos": "^2.0.2",
     "@iconify/react": "^6.0.2",
-    "@nadicodeai/design-system": "12.1.67",
+    "@nadicodeai/design-system": "12.1.68",
     "@tanstack/react-table": "^9.2.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -86,6 +86,7 @@
     "lucide-react": "1.49.0",
     "motion": "^13.4.4",
     "next-themes": "^0.4.6",
+    "qrcode": "^1.5.4",
     "react-day-picker": "^10.0.1",
     "react-hook-form": "^7.89.0",
     "react-resizable-panels": "^4.13.3",