@cloudgrid-io/ui 0.44.0 → 0.46.0

package/dist/blocks/onboard-widget-content.d.ts

@@ -0,0 +1,227 @@
+/**
+ * THE ONBOARD WIDGET'S CONTENT (ui#419). The words, the logo pairs, the timings,
+ * the colour Gemini's artwork and the logo cycle, as plain data and plain
+ * functions.
+ *
+ * Vlad's design: CloudGrid 2026 Figma 5ouhISIL0mwYGHurvCGoEO, "Copy Fetch
+ * Widget" 11984:30251, and his working build (the reference for motion).
+ *
+ * ## No React, deliberately
+ *
+ * Two things draw this widget: the React block `OnboardWidget` (the Console's
+ * Home, any "get started" place) and, later, the badge's framework-free
+ * watermark overlay (Figma 11918:113662), which renders without React on a
+ * customer's app. Both import this module, so a word, a pair or a timing changes
+ * in one place and the two cannot drift. That is the `install-content` shape:
+ * marks are NAMES (`TOOL_MARKS` keys), and the renderer turns them into nodes.
+ *
+ * ## The motion
+ *
+ * After a 2s hold, slot 1 crossfades (600ms ease-in-out), then slot 2, then
+ * slot 3, each starting 2600ms after the one before (the fade plus a 2s pause).
+ * The last fade ends, the widget holds 2s, and the slots cross back the same
+ * way. It loops. `createLogoCycle` schedules exactly that, one timer at a time;
+ * the renderer owns the 600ms fade as a CSS transition on opacity.
+ *
+ * `bindLogoCycle` wires it to the page: nothing moves under
+ * `prefers-reduced-motion` (set A stays and no timer is started), and the loop
+ * stops while the tab is hidden and picks up where it was when it is shown.
+ */
+import type { ToolMarkName } from "./tool-marks";
+export declare const ONBOARD_WIDGET_COPY: Readonly<{
+    /** The button's text, and so its accessible name. */
+    label: "Onboard your agent to CloudGrid";
+    /**
+     * The tip above it on hover and keyboard focus. The Figma frame reads "into
+     * you AI coding tool"; the issue fixes the typo.
+     */
+    tip: "Copy a setup prompt into your AI coding tool";
+    /** Shown for 2s after a copy, centred in the same box, and announced. */
+    copied: "Copied. Paste into your AI coding tool.";
+    /** `CopyButton`'s refusal words. */
+    blocked: "Couldn't copy";
+    /** What the live region says on a refusal; the tip then shows the prompt. */
+    announceBlocked: "Couldn't copy. The browser blocked the clipboard. The prompt is in the tip, to select by hand.";
+}>;
+export type OnboardWidgetSlot = {
+    /** The mark shown first, and the only one under reduced motion. */
+    a: ToolMarkName;
+    /** The mark it crossfades to. */
+    b: ToolMarkName;
+    /** Set A is drawn in colour from `GEMINI_COLOR_ART` rather than flat. */
+    aColour?: true;
+};
+/** The three slots, left to right. */
+export declare const ONBOARD_WIDGET_SLOTS: readonly OnboardWidgetSlot[];
+export declare const ONBOARD_WIDGET_TIMING: Readonly<{
+    /** The pause before each wave, and after its last fade. */
+    holdMs: 2000;
+    /** One slot's crossfade, ease-in-out. */
+    fadeMs: 600;
+    /** Start to start, slot to slot: the fade plus a 2s pause. */
+    staggerMs: 2600;
+    /** Hover waits this long before the tip shows. */
+    tipDelayMs: 300;
+    /** How long the copied line stays. */
+    copiedMs: 2000;
+}>;
+/**
+ * The frame's measurements, and the narrow rule (ui#423).
+ *
+ * Wide, the frame is one row, `heightPx` tall: three `slotPx` logo slots
+ * `logoGapPx` apart, the label and the copy icon, `groupGapPx` between the three
+ * groups. Its natural width is about 413px (413.34 in Chromium with Manrope).
+ *
+ * Narrower than that, it never overflows. There is no breakpoint to keep in step
+ * with the words: the content wraps, so the rule holds whatever the label's
+ * width is.
+ *
+ * - The widget takes `max-width: 100%`.
+ * - The logos are one item and the label with the icon is another, in a
+ *   centred row that wraps. So when both no longer fit, the logos take their
+ *   own centred row above the label and the icon, `rowGapPx` apart.
+ * - The label and the icon are one run of centred text, the icon inline
+ *   `groupGapPx` after the label's last word and glued to it. A wrapped box
+ *   keeps the full width, so a flex icon beside it would sit at the far edge;
+ *   inline, it rides with the centred lines and never drops alone.
+ * - The height is `heightPx` with `min-height: fit-content` and `paddingBlockPx`
+ *   above and below. Wide, the content plus that padding is under `heightPx`,
+ *   so nothing changes; once it wraps, the height grows and keeps the padding.
+ *   The radius and the side padding stay.
+ * - The label may wrap, balanced and centred, before the icon drops: the icon
+ *   stays beside it down to a 288px column (a 320px phone).
+ * - The copied and refused lines wrap the same way inside their overlay, which
+ *   is still the idle face's box, so nothing jumps. The check is inline too,
+ *   8px before "Copied.".
+ *
+ * `onboardWidgetNarrowCss` is the same rule as CSS, for a renderer without
+ * Tailwind (the badge's watermark twin).
+ */
+export declare const ONBOARD_WIDGET_LAYOUT: Readonly<{
+    heightPx: 48;
+    radiusPx: 16;
+    paddingInlinePx: 16;
+    slotPx: 20;
+    logoGapPx: 16;
+    groupGapPx: 20;
+    /** Between the copied check and "Copied.". */
+    checkGapPx: 8;
+    /** Narrow: between the logo row and the label row. */
+    rowGapPx: 12;
+    /**
+     * Above and below the content, which shows once the height grows. Wide, the
+     * 48px row centres its 22px line with 13px each side, so 12 keeps the look
+     * and stays under 48.
+     */
+    paddingBlockPx: 12;
+    /** The narrowest column it is built and tested for: a 320px phone's 288. */
+    minColumnPx: 288;
+}>;
+/**
+ * The parts the narrow rule styles, as selectors in the renderer's own markup.
+ * The shape it expects:
+ *
+ *     root
+ *       content
+ *         logos   (the three slots)
+ *         text    "Onboard your agent to " <tail>"CloudGrid"<icon/></tail>
+ *       (overlay) result  <check/>"Copied. Paste into your AI coding tool."
+ */
+export type OnboardWidgetNarrowSelectors = {
+    /** The widget itself (the button). */
+    root: string;
+    /** The idle face's content: the logos, then the text. */
+    content: string;
+    /** The three logo slots, together. */
+    logos: string;
+    /** The label and the copy icon: one run of text. */
+    text: string;
+    /** The label's last word with the icon, kept on one line. */
+    tail: string;
+    /** The 20px copy icon, inline after the last word. */
+    icon: string;
+    /** The copied or refused line, in the overlay: one run of text. */
+    result: string;
+    /** The 20px check disc, inline before "Copied.". */
+    check: string;
+};
+/**
+ * The narrow rule as CSS, for the selectors given: the declarations that make
+ * the frame wrap rather than overflow. Add it after the frame's own styles; it
+ * restates the gaps and sizes it depends on, from `ONBOARD_WIDGET_LAYOUT`.
+ */
+export declare function onboardWidgetNarrowCss(s: OnboardWidgetNarrowSelectors): string;
+/**
+ * The Gemini star in colour: a blue star with green, red and yellow linear
+ * gradients laid over it. The library's flat `GeminiMark` (simple-icons, one
+ * colour) stays for every other use; the design draws this one.
+ *
+ * Source: @lobehub/icons-static-svg 1.94.0, `icons/gemini-color.svg` (MIT),
+ * read programmatically: the path, the base fill and each gradient's line and
+ * stops are that file's, unmodified. Hex without the `#`, like `TOOL_MARKS`:
+ * a vendor's own colours, not the system's. The Figma frame draws the same star
+ * as a raster image; this is its vector.
+ */
+export declare const GEMINI_COLOR_ART: Readonly<{
+    viewBox: "0 0 24 24";
+    path: "M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z";
+    base: "3186FF";
+    layers: readonly {
+        hex: string;
+        x1: number;
+        y1: number;
+        x2: number;
+        y2: number;
+        fadeAt: number;
+    }[];
+}>;
+export type LogoSet = "a" | "b";
+type Timers = {
+    setTimeout: (fn: () => void, ms: number) => unknown;
+    clearTimeout: (handle: never) => void;
+};
+export type LogoCycle = {
+    /** Each slot's current set, left to right. */
+    readonly sets: readonly LogoSet[];
+    /** Runs the loop from where it is, after one hold. A second call does nothing. */
+    start(): void;
+    /** Stops it where it is. Clears its timer. */
+    stop(): void;
+    /** Puts every slot back on set A. Does not start or stop. */
+    reset(): void;
+};
+/**
+ * The loop, one timer at a time. `onChange` gets every slot's set after each
+ * flip; the renderer crossfades the slot whose set changed.
+ *
+ * A restart after a stop holds first, then finishes an unfinished wave from
+ * the first slot that has not crossed, so a tab that comes back mid-wave does
+ * not jump.
+ */
+export declare function createLogoCycle({ slots, timing, onChange, timers, }?: {
+    slots?: number;
+    timing?: Pick<typeof ONBOARD_WIDGET_TIMING, "holdMs" | "fadeMs" | "staggerMs">;
+    onChange?: (sets: readonly LogoSet[]) => void;
+    timers?: Timers;
+}): LogoCycle;
+type Listenable = {
+    addEventListener: (type: string, fn: () => void) => void;
+    removeEventListener: (type: string, fn: () => void) => void;
+};
+/**
+ * Runs `cycle` while it should run: never under reduced motion (switched on
+ * mid-loop, it stops and puts set A back), and not while the tab is hidden.
+ * Returns the cleanup, which stops the cycle and removes both listeners.
+ *
+ * Pass `document` and `window.matchMedia("(prefers-reduced-motion: reduce)")`.
+ */
+export declare function bindLogoCycle(cycle: LogoCycle, { document, reducedMotion }: {
+    document: Listenable & {
+        hidden: boolean;
+    };
+    reducedMotion: Listenable & {
+        matches: boolean;
+    };
+}): () => void;
+export {};
+//# sourceMappingURL=onboard-widget-content.d.ts.map

package/dist/blocks/onboard-widget-content.d.ts.map

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

package/dist/blocks/onboard-widget-content.js

@@ -0,0 +1,237 @@
+/**
+ * THE ONBOARD WIDGET'S CONTENT (ui#419). The words, the logo pairs, the timings,
+ * the colour Gemini's artwork and the logo cycle, as plain data and plain
+ * functions.
+ *
+ * Vlad's design: CloudGrid 2026 Figma 5ouhISIL0mwYGHurvCGoEO, "Copy Fetch
+ * Widget" 11984:30251, and his working build (the reference for motion).
+ *
+ * ## No React, deliberately
+ *
+ * Two things draw this widget: the React block `OnboardWidget` (the Console's
+ * Home, any "get started" place) and, later, the badge's framework-free
+ * watermark overlay (Figma 11918:113662), which renders without React on a
+ * customer's app. Both import this module, so a word, a pair or a timing changes
+ * in one place and the two cannot drift. That is the `install-content` shape:
+ * marks are NAMES (`TOOL_MARKS` keys), and the renderer turns them into nodes.
+ *
+ * ## The motion
+ *
+ * After a 2s hold, slot 1 crossfades (600ms ease-in-out), then slot 2, then
+ * slot 3, each starting 2600ms after the one before (the fade plus a 2s pause).
+ * The last fade ends, the widget holds 2s, and the slots cross back the same
+ * way. It loops. `createLogoCycle` schedules exactly that, one timer at a time;
+ * the renderer owns the 600ms fade as a CSS transition on opacity.
+ *
+ * `bindLogoCycle` wires it to the page: nothing moves under
+ * `prefers-reduced-motion` (set A stays and no timer is started), and the loop
+ * stops while the tab is hidden and picks up where it was when it is shown.
+ */
+export const ONBOARD_WIDGET_COPY = Object.freeze({
+    /** The button's text, and so its accessible name. */
+    label: "Onboard your agent to CloudGrid",
+    /**
+     * The tip above it on hover and keyboard focus. The Figma frame reads "into
+     * you AI coding tool"; the issue fixes the typo.
+     */
+    tip: "Copy a setup prompt into your AI coding tool",
+    /** Shown for 2s after a copy, centred in the same box, and announced. */
+    copied: "Copied. Paste into your AI coding tool.",
+    /** `CopyButton`'s refusal words. */
+    blocked: "Couldn't copy",
+    /** What the live region says on a refusal; the tip then shows the prompt. */
+    announceBlocked: "Couldn't copy. The browser blocked the clipboard. The prompt is in the tip, to select by hand.",
+});
+/** The three slots, left to right. */
+export const ONBOARD_WIDGET_SLOTS = Object.freeze([
+    { a: "Claude Code", b: "Codex" },
+    { a: "Cursor", b: "Claude" },
+    { a: "Google Gemini", b: "Antigravity", aColour: true },
+]);
+export const ONBOARD_WIDGET_TIMING = Object.freeze({
+    /** The pause before each wave, and after its last fade. */
+    holdMs: 2000,
+    /** One slot's crossfade, ease-in-out. */
+    fadeMs: 600,
+    /** Start to start, slot to slot: the fade plus a 2s pause. */
+    staggerMs: 2600,
+    /** Hover waits this long before the tip shows. */
+    tipDelayMs: 300,
+    /** How long the copied line stays. */
+    copiedMs: 2000,
+});
+/**
+ * The frame's measurements, and the narrow rule (ui#423).
+ *
+ * Wide, the frame is one row, `heightPx` tall: three `slotPx` logo slots
+ * `logoGapPx` apart, the label and the copy icon, `groupGapPx` between the three
+ * groups. Its natural width is about 413px (413.34 in Chromium with Manrope).
+ *
+ * Narrower than that, it never overflows. There is no breakpoint to keep in step
+ * with the words: the content wraps, so the rule holds whatever the label's
+ * width is.
+ *
+ * - The widget takes `max-width: 100%`.
+ * - The logos are one item and the label with the icon is another, in a
+ *   centred row that wraps. So when both no longer fit, the logos take their
+ *   own centred row above the label and the icon, `rowGapPx` apart.
+ * - The label and the icon are one run of centred text, the icon inline
+ *   `groupGapPx` after the label's last word and glued to it. A wrapped box
+ *   keeps the full width, so a flex icon beside it would sit at the far edge;
+ *   inline, it rides with the centred lines and never drops alone.
+ * - The height is `heightPx` with `min-height: fit-content` and `paddingBlockPx`
+ *   above and below. Wide, the content plus that padding is under `heightPx`,
+ *   so nothing changes; once it wraps, the height grows and keeps the padding.
+ *   The radius and the side padding stay.
+ * - The label may wrap, balanced and centred, before the icon drops: the icon
+ *   stays beside it down to a 288px column (a 320px phone).
+ * - The copied and refused lines wrap the same way inside their overlay, which
+ *   is still the idle face's box, so nothing jumps. The check is inline too,
+ *   8px before "Copied.".
+ *
+ * `onboardWidgetNarrowCss` is the same rule as CSS, for a renderer without
+ * Tailwind (the badge's watermark twin).
+ */
+export const ONBOARD_WIDGET_LAYOUT = Object.freeze({
+    heightPx: 48,
+    radiusPx: 16,
+    paddingInlinePx: 16,
+    slotPx: 20,
+    logoGapPx: 16,
+    groupGapPx: 20,
+    /** Between the copied check and "Copied.". */
+    checkGapPx: 8,
+    /** Narrow: between the logo row and the label row. */
+    rowGapPx: 12,
+    /**
+     * Above and below the content, which shows once the height grows. Wide, the
+     * 48px row centres its 22px line with 13px each side, so 12 keeps the look
+     * and stays under 48.
+     */
+    paddingBlockPx: 12,
+    /** The narrowest column it is built and tested for: a 320px phone's 288. */
+    minColumnPx: 288,
+});
+/**
+ * The narrow rule as CSS, for the selectors given: the declarations that make
+ * the frame wrap rather than overflow. Add it after the frame's own styles; it
+ * restates the gaps and sizes it depends on, from `ONBOARD_WIDGET_LAYOUT`.
+ */
+export function onboardWidgetNarrowCss(s) {
+    const L = ONBOARD_WIDGET_LAYOUT;
+    return [
+        `${s.root}{box-sizing:border-box;max-width:100%;height:${L.heightPx}px;min-height:fit-content;padding:${L.paddingBlockPx}px ${L.paddingInlinePx}px}`,
+        `${s.content}{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:${L.rowGapPx}px ${L.groupGapPx}px}`,
+        `${s.logos}{display:inline-flex;flex-shrink:0;gap:${L.logoGapPx}px}`,
+        `${s.text},${s.result}{white-space:normal;text-wrap:balance;text-align:center}`,
+        `${s.tail}{white-space:nowrap}`,
+        `${s.icon},${s.check}{display:inline-flex;width:${L.slotPx}px;height:${L.slotPx}px;vertical-align:top;position:relative;top:calc((1lh - ${L.slotPx}px) / 2)}`,
+        `${s.icon}{margin-inline-start:${L.groupGapPx}px}`,
+        `${s.check}{margin-inline-end:${L.checkGapPx}px}`,
+    ].join("\n");
+}
+/**
+ * The Gemini star in colour: a blue star with green, red and yellow linear
+ * gradients laid over it. The library's flat `GeminiMark` (simple-icons, one
+ * colour) stays for every other use; the design draws this one.
+ *
+ * Source: @lobehub/icons-static-svg 1.94.0, `icons/gemini-color.svg` (MIT),
+ * read programmatically: the path, the base fill and each gradient's line and
+ * stops are that file's, unmodified. Hex without the `#`, like `TOOL_MARKS`:
+ * a vendor's own colours, not the system's. The Figma frame draws the same star
+ * as a raster image; this is its vector.
+ */
+export const GEMINI_COLOR_ART = Object.freeze({
+    viewBox: "0 0 24 24",
+    path: "M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z",
+    base: "3186FF",
+    layers: Object.freeze([
+        { hex: "08B962", x1: 7, y1: 15.5, x2: 11, y2: 12, fadeAt: 1 },
+        { hex: "F94543", x1: 8, y1: 5.5, x2: 11.5, y2: 11, fadeAt: 1 },
+        { hex: "FABC12", x1: 3.5, y1: 13.5, x2: 17.5, y2: 12, fadeAt: 0.46 },
+    ]),
+});
+/**
+ * The loop, one timer at a time. `onChange` gets every slot's set after each
+ * flip; the renderer crossfades the slot whose set changed.
+ *
+ * A restart after a stop holds first, then finishes an unfinished wave from
+ * the first slot that has not crossed, so a tab that comes back mid-wave does
+ * not jump.
+ */
+export function createLogoCycle({ slots = ONBOARD_WIDGET_SLOTS.length, timing = ONBOARD_WIDGET_TIMING, onChange, timers = globalThis, } = {}) {
+    let sets = Array.from({ length: slots }, () => "a");
+    let handle;
+    let running = false;
+    const schedule = (fn, ms) => {
+        handle = timers.setTimeout(fn, ms);
+    };
+    /** Crosses slot `i` to `target`, then schedules the next slot, or the next wave. */
+    const cross = (i, target) => {
+        sets = sets.map((s, j) => (j === i ? target : s));
+        onChange?.(sets);
+        if (i < slots - 1)
+            schedule(() => cross(i + 1, target), timing.staggerMs);
+        else
+            schedule(wave, timing.fadeMs + timing.holdMs);
+    };
+    /** A wave: every slot to the other set, or, mid-wave, the rest to where slot 1 went. */
+    const wave = () => {
+        const first = sets.findIndex((s) => s !== sets[0]);
+        if (first === -1)
+            cross(0, sets[0] === "a" ? "b" : "a");
+        else
+            cross(first, sets[0]);
+    };
+    return {
+        get sets() {
+            return sets;
+        },
+        start() {
+            if (running)
+                return;
+            running = true;
+            schedule(wave, timing.holdMs);
+        },
+        stop() {
+            running = false;
+            timers.clearTimeout(handle);
+            handle = undefined;
+        },
+        reset() {
+            sets = sets.map(() => "a");
+            onChange?.(sets);
+        },
+    };
+}
+/**
+ * Runs `cycle` while it should run: never under reduced motion (switched on
+ * mid-loop, it stops and puts set A back), and not while the tab is hidden.
+ * Returns the cleanup, which stops the cycle and removes both listeners.
+ *
+ * Pass `document` and `window.matchMedia("(prefers-reduced-motion: reduce)")`.
+ */
+export function bindLogoCycle(cycle, { document, reducedMotion }) {
+    const sync = () => {
+        if (reducedMotion.matches) {
+            cycle.stop();
+            if (cycle.sets.some((s) => s !== "a"))
+                cycle.reset();
+        }
+        else if (document.hidden) {
+            cycle.stop();
+        }
+        else {
+            cycle.start();
+        }
+    };
+    document.addEventListener("visibilitychange", sync);
+    reducedMotion.addEventListener("change", sync);
+    sync();
+    return () => {
+        document.removeEventListener("visibilitychange", sync);
+        reducedMotion.removeEventListener("change", sync);
+        cycle.stop();
+    };
+}
+//# sourceMappingURL=onboard-widget-content.js.map

package/dist/blocks/onboard-widget-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"onboard-widget-content.js","sourceRoot":"","sources":["../../src/blocks/onboard-widget-content.ts"],"names":[],"mappings":"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"}

package/dist/blocks/onboard-widget.d.ts

@@ -0,0 +1,92 @@
+import * as React from "react";
+/**
+ * THE ONBOARD-YOUR-AGENT COPY WIDGET (ui#419), Vlad's design: CloudGrid 2026
+ * Figma 5ouhISIL0mwYGHurvCGoEO, "Copy Fetch Widget" 11984:30251 (Default with
+ * both logo sets, Hover, Clicked), and his working build for the motion.
+ *
+ *     <OnboardWidget value={`fetch ${COMPANY_SITE_ORIGIN}/agents and plug this in`} />
+ *     <OnboardWidget value={prompt} block />        // fills the width, as in the overlay card
+ *
+ * One button that copies `value` (no host is baked in: the caller passes it).
+ * The words, the logo pairs and the timings are `onboard-widget-content`, which
+ * the badge's framework-free watermark twin reads too.
+ *
+ * ## The layout
+ *
+ * 48 tall, padding 0 16, radius 16, a 1px hairline, the card ground, Manrope 15
+ * regular ink, no wrapping. Three 20px logo slots 16px apart, the label, and a
+ * 20px copy icon, 20px between the three groups. It hugs its content; `block`
+ * fills the width and centres the content.
+ *
+ * Narrower than its natural width (about 413px) it never overflows (ui#423):
+ * it takes `max-width: 100%`, the logos take their own centred row above the
+ * label and the icon (12px apart), and the height grows from 48 with 12px above
+ * and below. Down to a 288px column the label wraps, balanced, before the icon
+ * drops; the copied and refused lines wrap the same way. No breakpoint: the
+ * content wraps. The numbers are `ONBOARD_WIDGET_LAYOUT`, and the same rule as
+ * CSS is `onboardWidgetNarrowCss`, for the badge's twin.
+ *
+ * ## The logos
+ *
+ * Each slot holds its two marks stacked; the visible one is opacity 1 and the
+ * other 0, with a 600ms ease-in-out transition, so a flip of the slot's set is
+ * the crossfade. `createLogoCycle` flips them (slot 1, 2, 3, 2600ms apart, after
+ * a 2s hold, and back), and `bindLogoCycle` keeps it still under reduced motion
+ * (set A, no timer at all) and paused while the tab is hidden. Slot 3's set A is
+ * the colour Gemini star (`GeminiColorMark`); the library's flat `GeminiMark`
+ * stays as it is. The marks are `aria-hidden`: the label names the button.
+ *
+ * ## Hover, focus, click
+ *
+ * - Hover, only where the device hovers (Tailwind's `hover:` is inside
+ *   `@media (hover: hover)`, so a tap does not leave it stuck): the ground and
+ *   border take the violet wash and the copy icon turns solid Primary. The tip,
+ *   "Copy a setup prompt into your AI coding tool", shows above after 300ms.
+ * - Keyboard focus: the same tip, plus the library focus ring.
+ * - Click: `CopyButton` copies `value` and holds the result for 2s. The content
+ *   gives way to a centred green check and "Copied. Paste into your AI coding
+ *   tool.", which is a layer over the content rather than a replacement, so the
+ *   width does not move; the live region says the same line. A refusal shows
+ *   "Couldn't copy" the same way and opens the tip with the prompt in it,
+ *   `select-all`, so it can be copied by hand.
+ *
+ * ## The tokens
+ *
+ * Ground `bg-card`, border `border-hairline`, text `text-ink`, the copy icon
+ * `text-steel` (Figma "N3 new", slate-500) and `text-brand` on hover (Primary),
+ * the check's disc `bg-online` (Figma "Positive" #3FA24E; the library's online
+ * green #00a05c is the nearest), the tip the Tooltip primitive's dark ground.
+ *
+ * The hover wash is Figma "Primary 20", #DEDAFC, and no library token holds it:
+ * violet-150 (#e3e0fd) and violet-200 (#d9d4fb) sit exactly as far from it on
+ * either side. It IS Primary composited on white at 20% to the byte, so it is
+ * written as that, `color-mix(in srgb, var(--cg-primary) 20%, var(--cg-surface-card))`,
+ * in `--cg-onboard-widget-wash` on the button: two tokens, no literal, and it
+ * follows the brand hue if that is retuned.
+ *
+ * A light card on every surface (`data-theme="default"`, as `Notice` is).
+ *
+ * ## Specimens
+ *
+ * `specimen` pins one face for the gallery and for screenshots: a logo set
+ * (no motion), hover, focus, copied or blocked. Product code leaves it out.
+ */
+type Specimen = "set-a" | "set-b" | "hover" | "focus" | "copied" | "blocked";
+/**
+ * The Gemini star in colour, from `GEMINI_COLOR_ART`. The gradient ids come from
+ * `useId`, so two widgets on one page never point at each other's gradients.
+ */
+declare function GeminiColorMark({ className }: {
+    className?: string;
+}): React.JSX.Element;
+declare function OnboardWidget({ value, block, specimen, className, }: {
+    /** What is copied, exactly. The Console passes `fetch ${COMPANY_SITE_ORIGIN}/agents and plug this in`. */
+    value: string;
+    /** Fill the width, as in the watermark overlay's card. Default: hug the content. */
+    block?: boolean;
+    /** Pins one face, for the gallery and screenshots. Leave it out in product code. */
+    specimen?: Specimen;
+    className?: string;
+}): React.JSX.Element;
+export { OnboardWidget, GeminiColorMark };
+//# sourceMappingURL=onboard-widget.d.ts.map

package/dist/blocks/onboard-widget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"onboard-widget.d.ts","sourceRoot":"","sources":["../../src/blocks/onboard-widget.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAkB9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuEG;AAEH,KAAK,QAAQ,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAA;AAkC5E;;;GAGG;AACH,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,qBAmB7D;AAiDD,iBAAS,aAAa,CAAC,EACrB,KAAK,EACL,KAAa,EACb,QAAQ,EACR,SAAS,GACV,EAAE;IACD,0GAA0G;IAC1G,KAAK,EAAE,MAAM,CAAA;IACb,oFAAoF;IACpF,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,oFAAoF;IACpF,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,qBAyHA;AAED,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,CAAA"}