@cloudgrid-io/ui 0.43.1 → 0.45.0

package/dist/badge/onboard-widget.js

@@ -0,0 +1,105 @@
+/**
+ * THE ONBOARD WIDGET, FRAMEWORK-FREE (ui#422): the twin of #419's React
+ * `OnboardWidget` (Vlad's "Copy Fetch Widget", Figma 11984:30251), for the
+ * watermark overlay the badge draws in a closed shadow root on a customer's app.
+ *
+ * Same markup shape, same words, same slots, same timings: every one of them is
+ * read from `blocks/onboard-widget-content.ts`, the module the React block reads,
+ * so the two cannot drift. The marks are `tool-marks.tsx`'s own paths, generated
+ * into `onboard-marks.ts`; the colour Gemini star is the content module's art.
+ *
+ * ## The faces
+ *
+ *   idle      three 20px logo slots, the label, a 20px copy icon; hover (real
+ *             hover only) washes violet, turns the icon solid Primary, and shows
+ *             the tip after 300ms; keyboard focus shows the tip and the ring
+ *   copied    a green check and "Copied. Paste into your AI coding tool." laid
+ *             over the content, so the width does not move
+ *   blocked   "Couldn't copy", and the tip open with the prompt in it, selectable
+ *
+ * The badge sets the face: it copies on `data-action="onboard_copy"` (the value
+ * is `data-value`), sets `data-face` to `copied` or `blocked`, back to `idle`
+ * after `ONBOARD_WIDGET_TIMING.copiedMs`, and says the matching line in the
+ * overlay's live region. A blocked face needs the prompt in the tip, so the badge
+ * re-renders the widget with `face: "blocked"` rather than flipping the attribute.
+ *
+ * ## The motion
+ *
+ * Each slot holds both marks; `data-set` on the slot says which one shows, and
+ * the stylesheet crossfades them over `fadeMs`. `wireOnboardWidget` runs the
+ * content module's `createLogoCycle` through `bindLogoCycle`: still on set A
+ * under reduced motion, paused while the tab is hidden. Its cleanup stops it;
+ * the badge calls it when the overlay closes.
+ */
+import { GEMINI_COLOR_ART, ONBOARD_WIDGET_COPY, ONBOARD_WIDGET_SLOTS, bindLogoCycle, createLogoCycle, } from "../blocks/onboard-widget-content.js";
+import { CHECK_BOLD, COPY, COPY_FILL } from "./marks.js";
+import { ONBOARD_MARKS } from "./onboard-marks.js";
+import { esc, glyph } from "./html.js";
+/** The Gemini star in colour: the content module's base and three gradient layers. */
+function geminiColour(id) {
+    const { viewBox, path, base, layers } = GEMINI_COLOR_ART;
+    return (`<svg viewBox="${viewBox}" aria-hidden="true"><path d="${path}" fill="#${base}"/>` +
+        layers.map((_, i) => `<path d="${path}" fill="url(#${id}${i})"/>`).join("") +
+        "<defs>" +
+        layers
+            .map((l, i) => `<linearGradient id="${id}${i}" gradientUnits="userSpaceOnUse" x1="${l.x1}" y1="${l.y1}" x2="${l.x2}" y2="${l.y2}">` +
+            `<stop stop-color="#${l.hex}"/><stop offset="${l.fadeAt}" stop-color="#${l.hex}" stop-opacity="0"/></linearGradient>`)
+            .join("") +
+        "</defs></svg>");
+}
+/** One vendor mark, as ToolLogo draws it: its brand hex where it survives, else currentColor. */
+function vendorMark(name) {
+    const m = ONBOARD_MARKS[name];
+    if (!m)
+        return "";
+    const rule = m.evenodd ? ' fill-rule="evenodd" clip-rule="evenodd"' : "";
+    return `<svg viewBox="${m.viewBox}" fill="currentColor" aria-hidden="true"${m.hex ? ` style="color:#${m.hex}"` : ""}><path d="${m.path}"${rule}/></svg>`;
+}
+/** One 20px slot: set A over set B, the shown one at full opacity. */
+function slot(index, set, tipId) {
+    const s = ONBOARD_WIDGET_SLOTS[index];
+    const face = (which) => {
+        const name = which === "a" ? s.a : s.b;
+        const art = which === "a" && s.aColour ? geminiColour(`${tipId}-g`) : vendorMark(name);
+        return `<span class="cgb-ow-mark" data-face-set="${which}" data-logo="${esc(name)}">${art}</span>`;
+    };
+    return `<span class="cgb-ow-slot" data-set="${set}">${face("a")}${face("b")}</span>`;
+}
+/**
+ * The onboard widget: one button that copies `value`, named by its label, with
+ * the tip as its description. Action `onboard_copy`, `data-value` = `value`.
+ */
+export function onboardWidget({ value, block = false, face = "idle", set = "a", hover = false, tipId = "cgb-ow-tip" }) {
+    const tip = face === "blocked"
+        ? `<span class="cgb-ow-tip-line">${esc(ONBOARD_WIDGET_COPY.tip)}</span><code class="cgb-ow-prompt">${esc(value)}</code>`
+        : `<span class="cgb-ow-tip-line">${esc(ONBOARD_WIDGET_COPY.tip)}</span>`;
+    const result = face === "blocked"
+        ? `<span>${esc(ONBOARD_WIDGET_COPY.blocked)}</span>`
+        : `<span class="cgb-ow-check">${glyph(CHECK_BOLD)}</span><span>${esc(ONBOARD_WIDGET_COPY.copied)}</span>`;
+    return (`<span class="cgb-ow-wrap">` +
+        `<button class="cgb-ow"${block ? " data-block" : ""}${hover ? " data-hover" : ""} type="button" data-action="onboard_copy" data-value="${esc(value)}" data-face="${face}" aria-describedby="${esc(tipId)}">` +
+        `<span class="cgb-ow-default">` +
+        `<span class="cgb-ow-logos" aria-hidden="true">${ONBOARD_WIDGET_SLOTS.map((_, i) => slot(i, set, tipId)).join("")}</span>` +
+        `<span class="cgb-ow-label">${esc(ONBOARD_WIDGET_COPY.label)}</span>` +
+        `<span class="cgb-ow-icon" aria-hidden="true">${glyph(COPY, "cgb-ow-copy")}${glyph(COPY_FILL, "cgb-ow-copy-fill")}</span>` +
+        `</span>` +
+        `<span class="cgb-ow-result" aria-hidden="true">${result}</span>` +
+        `</button>` +
+        `<span class="cgb-ow-tip" id="${esc(tipId)}" role="tooltip">${tip}</span>` +
+        `</span>`);
+}
+/**
+ * Runs the logo cycle on a rendered widget: `root` is the button (or anything
+ * holding its `.cgb-ow-slot`s). Returns the cleanup, which stops the timer and
+ * removes both listeners; call it when the overlay closes.
+ */
+export function wireOnboardWidget(root, { document, reducedMotion, timers }) {
+    const slots = Array.from(root.querySelectorAll(".cgb-ow-slot"));
+    const cycle = createLogoCycle({
+        slots: slots.length,
+        onChange: (sets) => sets.forEach((s, i) => slots[i]?.setAttribute("data-set", s)),
+        ...(timers ? { timers } : {}),
+    });
+    return bindLogoCycle(cycle, { document, reducedMotion });
+}
+//# sourceMappingURL=onboard-widget.js.map

package/dist/badge/onboard-widget.js.map

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

package/dist/badge/palette.d.ts

@@ -1,7 +1,14 @@
 /** Every badge token as one declaration list, for the badge root's rule. */
-export declare const BADGE_TOKEN_DECLARATIONS = "--cg-primary:#5a47f0;--cg-primary-press:#4b39db;--cg-primary-tint:#eeecfe;--cg-secondary:#b6de68;--cg-secondary-press:#a6cf57;--cg-tertiary:#60e9f0;--cg-tertiary-press:#4dd8e0;--cg-accent:#0061f0;--cg-cyan-200:#dffbfc;--cg-lime-200:#eef7dc;--cg-surface-card:#ffffff;--cg-surface-raised:#f4f6f8;--cg-surface-control:#e3e3e3;--cg-surface-subtle:#f2f1f7;--cg-hover:rgba(34, 34, 34, 0.045);--cg-scrim:rgba(46, 30, 172, 0.46);--cg-text-primary:#222222;--cg-text-secondary:#595959;--cg-text-muted:#858585;--cg-text-muted-strong:#6a6a6a;--cg-text-placeholder:#acacac;--cg-text-accent:#5a47f0;--cg-text-on-primary:#ffffff;--cg-text-on-accent:#222222;--cg-border-hairline:#e6e8ea;--cg-border-control:#e3e3e3;--cg-border-accent:#5a47f0;--cg-focus-ring:rgba(90, 71, 240, 0.28);--cg-online:#00a05c;--cg-online-fill:#e6f7ef;--cg-online-strong:#085d3a;--cg-expired-fill:#fdf3e0;--cg-expired-border:#fedf89;--cg-expired-strong:#7a3d0a;--cg-font-ui:'Manrope Variable', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;--cg-font-body:'Space Grotesk Variable', 'Space Grotesk', 'Manrope Variable', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;--cg-font-mono:'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;--cg-weight-regular:400;--cg-weight-medium:500;--cg-weight-bold:600;--cg-body-18:18px;--cg-body-md:16px;--cg-body-sm:15px;--cg-body-14:14px;--cg-caption:13px;--cg-body-line:1.46;--cg-mono-size:14px;--cg-mono-line:1.7;--cg-radius-xs:8px;--cg-radius-sm:10px;--cg-radius-md:12px;--cg-radius-lg:14px;--cg-radius-xl:16px;--cg-radius-container:20px;--cg-radius-pill:999px;--cg-shadow-card:0 4px 16px rgba(34, 34, 34, 0.04), 0 4px 4px rgba(34, 34, 34, 0.04);--cg-shadow-hover:0 8px 24px rgba(34, 34, 34, 0.08);--cg-shadow-card-hover:0 8px 24px rgba(34, 34, 34, 0.08), 0 4px 6px rgba(34, 34, 34, 0.06);--cg-shadow-panel:0 10px 40px rgba(90, 71, 240, 0.18);--cg-duration-fast:120ms;--cg-duration:180ms;--cg-duration-slow:280ms;--cg-ease-out:cubic-bezier(0, 0, 0.2, 1);--cg-ease-out-expo:cubic-bezier(0.16, 1, 0.3, 1);--cg-ease-out-quint:cubic-bezier(0.22, 1, 0.36, 1);--cg-ease-out-quart:cubic-bezier(0.25, 1, 0.5, 1);--cg-ease-in-out-cubic:cubic-bezier(0.65, 0, 0.35, 1);--cg-ease-in:cubic-bezier(0.5, 0, 0.75, 0);--cg-ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);--cg-ease-spring-damped:linear(0, 0.034, 0.122, 0.244, 0.383, 0.526, 0.662, 0.785, 0.889, 0.974, 1.038, 1.083, 1.111, 1.124, 1.126, 1.119, 1.106, 1.09, 1.072, 1.054, 1.038, 1.023, 1.01, 1, 0.993, 0.988, 0.985, 0.984, 0.984, 0.985, 0.987, 0.989, 0.992, 0.994, 0.996, 0.998, 0.999, 1, 1.001, 1.002, 1);";
+export declare const BADGE_TOKEN_DECLARATIONS = "--cg-primary:#5a47f0;--cg-primary-press:#4b39db;--cg-primary-tint:#eeecfe;--cg-secondary:#b6de68;--cg-secondary-press:#a6cf57;--cg-tertiary:#60e9f0;--cg-tertiary-press:#4dd8e0;--cg-accent:#0061f0;--cg-cyan-200:#dffbfc;--cg-lime-200:#eef7dc;--cg-neutral-25:#f1f1f6;--cg-surface-card:#ffffff;--cg-surface-raised:#f4f6f8;--cg-surface-control:#e3e3e3;--cg-surface-subtle:#f2f1f7;--cg-hover:rgba(34, 34, 34, 0.045);--cg-scrim:rgba(46, 30, 172, 0.46);--cg-text-primary:#222222;--cg-text-secondary:#595959;--cg-text-muted:#858585;--cg-text-muted-strong:#6a6a6a;--cg-text-placeholder:#acacac;--cg-text-accent:#5a47f0;--cg-text-on-primary:#ffffff;--cg-text-on-accent:#222222;--cg-border-hairline:#e6e8ea;--cg-border-control:#e3e3e3;--cg-border-accent:#5a47f0;--cg-focus-ring:rgba(90, 71, 240, 0.28);--cg-online:#00a05c;--cg-online-fill:#e6f7ef;--cg-online-strong:#085d3a;--cg-expired-fill:#fdf3e0;--cg-expired-border:#fedf89;--cg-expired-strong:#7a3d0a;--cg-font-ui:'Manrope Variable', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;--cg-font-body:'Space Grotesk Variable', 'Space Grotesk', 'Manrope Variable', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;--cg-font-mono:'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;--cg-weight-regular:400;--cg-weight-medium:500;--cg-weight-bold:600;--cg-body-18:18px;--cg-body-md:16px;--cg-body-sm:15px;--cg-body-14:14px;--cg-caption:13px;--cg-body-line:1.46;--cg-mono-size:14px;--cg-mono-line:1.7;--cg-radius-xs:8px;--cg-radius-sm:10px;--cg-radius-md:12px;--cg-radius-lg:14px;--cg-radius-xl:16px;--cg-radius-container:20px;--cg-radius-pill:999px;--cg-shadow-card:0 4px 16px rgba(34, 34, 34, 0.04), 0 4px 4px rgba(34, 34, 34, 0.04);--cg-shadow-hover:0 8px 24px rgba(34, 34, 34, 0.08);--cg-shadow-card-hover:0 8px 24px rgba(34, 34, 34, 0.08), 0 4px 6px rgba(34, 34, 34, 0.06);--cg-shadow-panel:0 10px 40px rgba(90, 71, 240, 0.18);--cg-shadow-float:0 4px 12px rgba(34, 34, 34, 0.12), 0 12px 80px rgba(34, 34, 34, 0.12);--cg-duration-fast:120ms;--cg-duration:180ms;--cg-duration-slow:280ms;--cg-ease-out:cubic-bezier(0, 0, 0.2, 1);--cg-ease-out-expo:cubic-bezier(0.16, 1, 0.3, 1);--cg-ease-out-quint:cubic-bezier(0.22, 1, 0.36, 1);--cg-ease-out-quart:cubic-bezier(0.25, 1, 0.5, 1);--cg-ease-in-out-cubic:cubic-bezier(0.65, 0, 0.35, 1);--cg-ease-in:cubic-bezier(0.5, 0, 0.75, 0);--cg-ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);--cg-ease-spring-damped:linear(0, 0.034, 0.122, 0.244, 0.383, 0.526, 0.662, 0.785, 0.889, 0.974, 1.038, 1.083, 1.111, 1.124, 1.126, 1.119, 1.106, 1.09, 1.072, 1.054, 1.038, 1.023, 1.01, 1, 0.993, 0.988, 0.985, 0.984, 0.984, 0.985, 0.987, 0.989, 0.992, 0.994, 0.996, 0.998, 0.999, 1, 1.001, 1.002, 1);";
 /** The same values as a map, for tests and the gallery. Not needed at runtime. */
 export declare const BADGE_TOKENS: Readonly<Record<string, string>>;
+/**
+ * The watermark overlay's own tokens (ui#422), declared on its root by
+ * `BADGE_WATERMARK_CSS` only, so no other badge bundle carries them.
+ */
+export declare const BADGE_WATERMARK_TOKEN_DECLARATIONS = "--cg-font-display:'Tanker', 'Manrope Variable', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;--cg-link:#0061f0;--cg-slate-500:#828c98;--cg-kind-inspiration:#f0f8e1;--cg-kind-app:#dffbfc;--cg-kind-agent:#d1c9ff;";
+/** The same values as a map, for tests and the gallery. Not needed at runtime. */
+export declare const BADGE_WATERMARK_TOKENS: Readonly<Record<string, string>>;
 /** `--cg-font-ui`: Manrope. The tab label and button labels. */
 export declare const BADGE_FONT_UI = "'Manrope Variable', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif";
 /** `--cg-font-body`: Space Grotesk. Every other line of text. */

package/dist/badge/palette.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../src/badge/palette.ts"],"names":[],"mappings":"AAMA,4EAA4E;AAC5E,eAAO,MAAM,wBAAwB,8kFACwiF,CAAA;AAE7kF,kFAAkF;AAClF,eAAO,MAAM,YAAY,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAuEzD,CAAA;AAED,gEAAgE;AAChE,eAAO,MAAM,aAAa,6FAA6F,CAAA;AAEvH,iEAAiE;AACjE,eAAO,MAAM,eAAe,wIAAwI,CAAA;AAEpK;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,EAAE,aAAa,CAAC;IAC3C,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,YAAY,EAAE,MAAM,CAAA;CACrB,CAGA,CAAA"}
+{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../src/badge/palette.ts"],"names":[],"mappings":"AAMA,4EAA4E;AAC5E,eAAO,MAAM,wBAAwB,8rFACwpF,CAAA;AAE7rF,kFAAkF;AAClF,eAAO,MAAM,YAAY,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAyEzD,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,kCAAkC,+OAC+L,CAAA;AAE9O,kFAAkF;AAClF,eAAO,MAAM,sBAAsB,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAOnE,CAAA;AAED,gEAAgE;AAChE,eAAO,MAAM,aAAa,6FAA6F,CAAA;AAEvH,iEAAiE;AACjE,eAAO,MAAM,eAAe,wIAAwI,CAAA;AAEpK;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,EAAE,aAAa,CAAC;IAC3C,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,YAAY,EAAE,MAAM,CAAA;CACrB,CAGA,CAAA"}

package/dist/badge/palette.js

@@ -4,7 +4,7 @@
 // carries its token values with it. Each is the resolved value of the token of
 // the same name at :root. Retune the token and rebuild; this file follows.
 /** Every badge token as one declaration list, for the badge root's rule. */
-export const BADGE_TOKEN_DECLARATIONS = "--cg-primary:#5a47f0;--cg-primary-press:#4b39db;--cg-primary-tint:#eeecfe;--cg-secondary:#b6de68;--cg-secondary-press:#a6cf57;--cg-tertiary:#60e9f0;--cg-tertiary-press:#4dd8e0;--cg-accent:#0061f0;--cg-cyan-200:#dffbfc;--cg-lime-200:#eef7dc;--cg-surface-card:#ffffff;--cg-surface-raised:#f4f6f8;--cg-surface-control:#e3e3e3;--cg-surface-subtle:#f2f1f7;--cg-hover:rgba(34, 34, 34, 0.045);--cg-scrim:rgba(46, 30, 172, 0.46);--cg-text-primary:#222222;--cg-text-secondary:#595959;--cg-text-muted:#858585;--cg-text-muted-strong:#6a6a6a;--cg-text-placeholder:#acacac;--cg-text-accent:#5a47f0;--cg-text-on-primary:#ffffff;--cg-text-on-accent:#222222;--cg-border-hairline:#e6e8ea;--cg-border-control:#e3e3e3;--cg-border-accent:#5a47f0;--cg-focus-ring:rgba(90, 71, 240, 0.28);--cg-online:#00a05c;--cg-online-fill:#e6f7ef;--cg-online-strong:#085d3a;--cg-expired-fill:#fdf3e0;--cg-expired-border:#fedf89;--cg-expired-strong:#7a3d0a;--cg-font-ui:'Manrope Variable', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;--cg-font-body:'Space Grotesk Variable', 'Space Grotesk', 'Manrope Variable', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;--cg-font-mono:'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;--cg-weight-regular:400;--cg-weight-medium:500;--cg-weight-bold:600;--cg-body-18:18px;--cg-body-md:16px;--cg-body-sm:15px;--cg-body-14:14px;--cg-caption:13px;--cg-body-line:1.46;--cg-mono-size:14px;--cg-mono-line:1.7;--cg-radius-xs:8px;--cg-radius-sm:10px;--cg-radius-md:12px;--cg-radius-lg:14px;--cg-radius-xl:16px;--cg-radius-container:20px;--cg-radius-pill:999px;--cg-shadow-card:0 4px 16px rgba(34, 34, 34, 0.04), 0 4px 4px rgba(34, 34, 34, 0.04);--cg-shadow-hover:0 8px 24px rgba(34, 34, 34, 0.08);--cg-shadow-card-hover:0 8px 24px rgba(34, 34, 34, 0.08), 0 4px 6px rgba(34, 34, 34, 0.06);--cg-shadow-panel:0 10px 40px rgba(90, 71, 240, 0.18);--cg-duration-fast:120ms;--cg-duration:180ms;--cg-duration-slow:280ms;--cg-ease-out:cubic-bezier(0, 0, 0.2, 1);--cg-ease-out-expo:cubic-bezier(0.16, 1, 0.3, 1);--cg-ease-out-quint:cubic-bezier(0.22, 1, 0.36, 1);--cg-ease-out-quart:cubic-bezier(0.25, 1, 0.5, 1);--cg-ease-in-out-cubic:cubic-bezier(0.65, 0, 0.35, 1);--cg-ease-in:cubic-bezier(0.5, 0, 0.75, 0);--cg-ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);--cg-ease-spring-damped:linear(0, 0.034, 0.122, 0.244, 0.383, 0.526, 0.662, 0.785, 0.889, 0.974, 1.038, 1.083, 1.111, 1.124, 1.126, 1.119, 1.106, 1.09, 1.072, 1.054, 1.038, 1.023, 1.01, 1, 0.993, 0.988, 0.985, 0.984, 0.984, 0.985, 0.987, 0.989, 0.992, 0.994, 0.996, 0.998, 0.999, 1, 1.001, 1.002, 1);";
+export const BADGE_TOKEN_DECLARATIONS = "--cg-primary:#5a47f0;--cg-primary-press:#4b39db;--cg-primary-tint:#eeecfe;--cg-secondary:#b6de68;--cg-secondary-press:#a6cf57;--cg-tertiary:#60e9f0;--cg-tertiary-press:#4dd8e0;--cg-accent:#0061f0;--cg-cyan-200:#dffbfc;--cg-lime-200:#eef7dc;--cg-neutral-25:#f1f1f6;--cg-surface-card:#ffffff;--cg-surface-raised:#f4f6f8;--cg-surface-control:#e3e3e3;--cg-surface-subtle:#f2f1f7;--cg-hover:rgba(34, 34, 34, 0.045);--cg-scrim:rgba(46, 30, 172, 0.46);--cg-text-primary:#222222;--cg-text-secondary:#595959;--cg-text-muted:#858585;--cg-text-muted-strong:#6a6a6a;--cg-text-placeholder:#acacac;--cg-text-accent:#5a47f0;--cg-text-on-primary:#ffffff;--cg-text-on-accent:#222222;--cg-border-hairline:#e6e8ea;--cg-border-control:#e3e3e3;--cg-border-accent:#5a47f0;--cg-focus-ring:rgba(90, 71, 240, 0.28);--cg-online:#00a05c;--cg-online-fill:#e6f7ef;--cg-online-strong:#085d3a;--cg-expired-fill:#fdf3e0;--cg-expired-border:#fedf89;--cg-expired-strong:#7a3d0a;--cg-font-ui:'Manrope Variable', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;--cg-font-body:'Space Grotesk Variable', 'Space Grotesk', 'Manrope Variable', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;--cg-font-mono:'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;--cg-weight-regular:400;--cg-weight-medium:500;--cg-weight-bold:600;--cg-body-18:18px;--cg-body-md:16px;--cg-body-sm:15px;--cg-body-14:14px;--cg-caption:13px;--cg-body-line:1.46;--cg-mono-size:14px;--cg-mono-line:1.7;--cg-radius-xs:8px;--cg-radius-sm:10px;--cg-radius-md:12px;--cg-radius-lg:14px;--cg-radius-xl:16px;--cg-radius-container:20px;--cg-radius-pill:999px;--cg-shadow-card:0 4px 16px rgba(34, 34, 34, 0.04), 0 4px 4px rgba(34, 34, 34, 0.04);--cg-shadow-hover:0 8px 24px rgba(34, 34, 34, 0.08);--cg-shadow-card-hover:0 8px 24px rgba(34, 34, 34, 0.08), 0 4px 6px rgba(34, 34, 34, 0.06);--cg-shadow-panel:0 10px 40px rgba(90, 71, 240, 0.18);--cg-shadow-float:0 4px 12px rgba(34, 34, 34, 0.12), 0 12px 80px rgba(34, 34, 34, 0.12);--cg-duration-fast:120ms;--cg-duration:180ms;--cg-duration-slow:280ms;--cg-ease-out:cubic-bezier(0, 0, 0.2, 1);--cg-ease-out-expo:cubic-bezier(0.16, 1, 0.3, 1);--cg-ease-out-quint:cubic-bezier(0.22, 1, 0.36, 1);--cg-ease-out-quart:cubic-bezier(0.25, 1, 0.5, 1);--cg-ease-in-out-cubic:cubic-bezier(0.65, 0, 0.35, 1);--cg-ease-in:cubic-bezier(0.5, 0, 0.75, 0);--cg-ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);--cg-ease-spring-damped:linear(0, 0.034, 0.122, 0.244, 0.383, 0.526, 0.662, 0.785, 0.889, 0.974, 1.038, 1.083, 1.111, 1.124, 1.126, 1.119, 1.106, 1.09, 1.072, 1.054, 1.038, 1.023, 1.01, 1, 0.993, 0.988, 0.985, 0.984, 0.984, 0.985, 0.987, 0.989, 0.992, 0.994, 0.996, 0.998, 0.999, 1, 1.001, 1.002, 1);";
 /** The same values as a map, for tests and the gallery. Not needed at runtime. */
 export const BADGE_TOKENS = {
     "--cg-primary": "#5a47f0",
@@ -17,6 +17,7 @@ export const BADGE_TOKENS = {
     "--cg-accent": "#0061f0",
     "--cg-cyan-200": "#dffbfc",
     "--cg-lime-200": "#eef7dc",
+    "--cg-neutral-25": "#f1f1f6",
     "--cg-surface-card": "#ffffff",
     "--cg-surface-raised": "#f4f6f8",
     "--cg-surface-control": "#e3e3e3",
@@ -66,6 +67,7 @@ export const BADGE_TOKENS = {
     "--cg-shadow-hover": "0 8px 24px rgba(34, 34, 34, 0.08)",
     "--cg-shadow-card-hover": "0 8px 24px rgba(34, 34, 34, 0.08), 0 4px 6px rgba(34, 34, 34, 0.06)",
     "--cg-shadow-panel": "0 10px 40px rgba(90, 71, 240, 0.18)",
+    "--cg-shadow-float": "0 4px 12px rgba(34, 34, 34, 0.12), 0 12px 80px rgba(34, 34, 34, 0.12)",
     "--cg-duration-fast": "120ms",
     "--cg-duration": "180ms",
     "--cg-duration-slow": "280ms",
@@ -78,6 +80,20 @@ export const BADGE_TOKENS = {
     "--cg-ease-spring": "cubic-bezier(0.34, 1.56, 0.64, 1)",
     "--cg-ease-spring-damped": "linear(0, 0.034, 0.122, 0.244, 0.383, 0.526, 0.662, 0.785, 0.889, 0.974, 1.038, 1.083, 1.111, 1.124, 1.126, 1.119, 1.106, 1.09, 1.072, 1.054, 1.038, 1.023, 1.01, 1, 0.993, 0.988, 0.985, 0.984, 0.984, 0.985, 0.987, 0.989, 0.992, 0.994, 0.996, 0.998, 0.999, 1, 1.001, 1.002, 1)",
 };
+/**
+ * The watermark overlay's own tokens (ui#422), declared on its root by
+ * `BADGE_WATERMARK_CSS` only, so no other badge bundle carries them.
+ */
+export const BADGE_WATERMARK_TOKEN_DECLARATIONS = "--cg-font-display:'Tanker', 'Manrope Variable', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;--cg-link:#0061f0;--cg-slate-500:#828c98;--cg-kind-inspiration:#f0f8e1;--cg-kind-app:#dffbfc;--cg-kind-agent:#d1c9ff;";
+/** The same values as a map, for tests and the gallery. Not needed at runtime. */
+export const BADGE_WATERMARK_TOKENS = {
+    "--cg-font-display": "'Tanker', 'Manrope Variable', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+    "--cg-link": "#0061f0",
+    "--cg-slate-500": "#828c98",
+    "--cg-kind-inspiration": "#f0f8e1",
+    "--cg-kind-app": "#dffbfc",
+    "--cg-kind-agent": "#d1c9ff",
+};
 /** `--cg-font-ui`: Manrope. The tab label and button labels. */
 export const BADGE_FONT_UI = "'Manrope Variable', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif";
 /** `--cg-font-body`: Space Grotesk. Every other line of text. */

package/dist/badge/palette.js.map

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

package/dist/badge/watermark.d.ts

@@ -0,0 +1,152 @@
+/**
+ * THE WATERMARK OVERLAY, FRAMEWORK-FREE (ui#422, cloudgrid#5973).
+ *
+ * A plain click on the "Live on the grid" pill opens this over the app: a card on
+ * a blurred purple scrim, whose content depends on who is viewing. Markup only;
+ * the badge draws it in its own closed shadow root (a host above the badge's),
+ * fetches the data, and wires the behaviour to the `data-action`s.
+ *
+ * Design: CloudGrid 2026 Figma 5ouhISIL0mwYGHurvCGoEO, page "UI - Overlay
+ * Watermark": 11918:113662 (not signed in), 11983:5627 (signed in, not the
+ * owner), 11983:16368 (the owner). Decisions: cloudgrid#5973, "Decided",
+ * 2026-11-04.
+ *
+ * ```ts
+ * import { BADGE_BASE_CSS, BADGE_WATERMARK_CSS, badgeRoot, watermarkOverlay } from "@cloudgrid-io/ui/badge/watermark"
+ * shadow.innerHTML = `<style>${BADGE_BASE_CSS}${BADGE_WATERMARK_CSS}</style>` + badgeRoot(watermarkOverlay({ state: "loading" }))
+ * // then, when GET /api/v2/entities/:id/watermark-overlay answers:
+ * root.innerHTML = watermarkOverlay(response)
+ * ```
+ *
+ * ## The options are the response
+ *
+ * `WatermarkOverlayOptions` is cloudgrid's `WatermarkOverlayResponse` (packages/
+ * shared/src/badge/watermark-overlay.ts) plus a few presentation fields, so the
+ * badge passes the response straight in: `watermarkOverlay({ ...response })`.
+ * The types are restated here, structurally, so the library never imports from
+ * the platform.
+ *
+ * ## Which screen
+ *
+ *   owner, insider     View in My Grid + Copy URL
+ *   outsider, no-grid  Pick Up to My Grid, when `can_pick_up` and `links.pick_up`
+ *   outsider           otherwise: Copy URL + Go to My Grid
+ *   no-grid            otherwise: the not-signed-in screen, no sign-in line
+ *   anonymous          the not-signed-in screen, with "Already have an account?
+ *                      Sign in" (decision 7: the viewer may be signed in and not
+ *                      recognised), and the Example Apps when there are any
+ *   loading            the frame, a shimmer for the name, a skeleton for actions
+ *
+ * ## Actions
+ *
+ * Every control carries a `data-action` that IS the event's `action` in
+ * `watermark.overlay.action` (spec section 10), so the badge emits it as read:
+ * `create_grid`, `sign_in`, `onboard_copy`, `onboard_learn`, `pick_up`,
+ * `view_in_grid`, `copy_url`, `my_grid`, `example_open` (`data-value` is the
+ * tile's 1-based position). Links open in a new tab on their own; the badge only
+ * emits. `copy_url` and `onboard_copy` are buttons whose `data-value` is what to
+ * copy. `close` (`data-value` = `x` or `scrim`) closes; Escape is the badge's.
+ * `select_url` is the read-only field a refused clipboard leaves.
+ */
+import { type OnboardWidgetFace } from "./onboard-widget.js";
+export { BADGE_WATERMARK_CSS } from "./css-watermark.js";
+export { BADGE_WATERMARK_TOKEN_DECLARATIONS, BADGE_WATERMARK_TOKENS } from "./palette.js";
+export { BADGE_BASE_CSS } from "./css-base.js";
+export { badgeRoot, type BadgeRootOptions } from "./root.js";
+export { esc, glyph, href } from "./html.js";
+export { onboardWidget, wireOnboardWidget, type OnboardWidgetFace, type OnboardWidgetOptions, type WireOnboardWidgetOptions } from "./onboard-widget.js";
+export type WatermarkEntityKind = "inspiration" | "app" | "agent" | "system";
+/** Who is viewing: cloudgrid's `WatermarkOverlayState`. */
+export type WatermarkViewerState = "anonymous" | "no-grid" | "outsider" | "insider" | "owner";
+/** The app, named. `grid_name` null is the Guest grid; absent (a fallback) draws no grid line. */
+export interface WatermarkNamedApp {
+    name: string;
+    grid_name?: string | null;
+    kind?: WatermarkEntityKind;
+}
+/** A gated app the viewer may not see named: the coarse kind only. */
+export interface WatermarkCoarseApp {
+    coarse_kind: WatermarkEntityKind;
+}
+export interface WatermarkExample {
+    entity_id: string;
+    name: string;
+    kind: WatermarkEntityKind;
+    url: string;
+    image: string;
+}
+export interface WatermarkLinks {
+    create: string;
+    sign_in: string;
+    learn: string;
+    pick_up?: string;
+    console_entity?: string;
+    console_home?: string;
+    share?: string;
+}
+/** The Copy URL button's face: Copied for 2s, or Copy failed with the URL in a field. */
+export type WatermarkCopyFace = "idle" | "copied" | "failed";
+/** The server's answer, as the badge passes it in, plus presentation. */
+export interface WatermarkOverlayData {
+    state: WatermarkViewerState;
+    app: WatermarkNamedApp | WatermarkCoarseApp;
+    guest_grid?: true;
+    can_pick_up: boolean;
+    links: WatermarkLinks;
+    onboard_prompt: string;
+    examples: readonly WatermarkExample[];
+    /**
+     * The badge could not tell who is viewing (the call failed or took over 3s,
+     * a custom domain, a sandboxed frame). Pass `state: "anonymous"`; with no
+     * name, the header reads "An app on CloudGrid".
+     */
+    fallback?: boolean;
+    /** The Copy URL button's face. Default `idle`. */
+    copyUrl?: WatermarkCopyFace;
+    /** The onboard widget's face. Default `idle`. */
+    widget?: OnboardWidgetFace;
+    /** What the polite live region says now: "Copied", "Loaded". */
+    announce?: string;
+}
+export interface WatermarkOverlayLoading {
+    state: "loading";
+    /** The app's name, when first paint has it. Absent: a shimmer where it goes. */
+    name?: string;
+    announce?: string;
+}
+export type WatermarkOverlayOptions = WatermarkOverlayData | WatermarkOverlayLoading;
+/** Every string the overlay says, verbatim from the spec and the frames. */
+export declare const WATERMARK_COPY: Readonly<{
+    eyebrow: "You are viewing";
+    close: "Close";
+    plugged: (grid: string) => string;
+    privateGrid: "This app is plugged to a private grid.";
+    guestGrid: "This app was dropped without a grid.";
+    unnamed: "An app on CloudGrid";
+    coarse: Readonly<Record<WatermarkEntityKind, string>>;
+    anonymous: "CloudGrid gives your AI creations a public or private link. If you want your own grid to plug all your AI creations, create an account or copy the command below to your AI agent.";
+    pickUp: "Feeling creative? Pick it up and create your own version.";
+    share: "Share it with others who may find it useful or interesting.";
+    owner: "Share it with others who may find it useful or interesting, or check how it is doing on the Grid.";
+    create: "Create Your Grid";
+    or: "OR";
+    learn: "Learn how to onboard your agent";
+    signInLead: "Already have an account?";
+    signIn: "Sign in";
+    pickUpButton: "Pick Up to My Grid";
+    copyUrl: "Copy URL";
+    copied: "Copied";
+    copyFailed: "Copy failed";
+    urlField: "App URL";
+    myGrid: "Go to My Grid";
+    viewInGrid: "View in My Grid";
+    examples: "Example Apps";
+    loading: "Loading";
+}>;
+/**
+ * The overlay: the scrim, then the card (`role="dialog"`, `aria-modal`,
+ * labelled by the name, described by the body line), the close x first in it,
+ * so focus lands there on open. Render it inside `badgeRoot()`.
+ */
+export declare function watermarkOverlay(opts: WatermarkOverlayOptions): string;
+//# sourceMappingURL=watermark.d.ts.map

package/dist/badge/watermark.d.ts.map

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

package/dist/badge/watermark.js

@@ -0,0 +1,215 @@
+/**
+ * THE WATERMARK OVERLAY, FRAMEWORK-FREE (ui#422, cloudgrid#5973).
+ *
+ * A plain click on the "Live on the grid" pill opens this over the app: a card on
+ * a blurred purple scrim, whose content depends on who is viewing. Markup only;
+ * the badge draws it in its own closed shadow root (a host above the badge's),
+ * fetches the data, and wires the behaviour to the `data-action`s.
+ *
+ * Design: CloudGrid 2026 Figma 5ouhISIL0mwYGHurvCGoEO, page "UI - Overlay
+ * Watermark": 11918:113662 (not signed in), 11983:5627 (signed in, not the
+ * owner), 11983:16368 (the owner). Decisions: cloudgrid#5973, "Decided",
+ * 2026-11-04.
+ *
+ * ```ts
+ * import { BADGE_BASE_CSS, BADGE_WATERMARK_CSS, badgeRoot, watermarkOverlay } from "@cloudgrid-io/ui/badge/watermark"
+ * shadow.innerHTML = `<style>${BADGE_BASE_CSS}${BADGE_WATERMARK_CSS}</style>` + badgeRoot(watermarkOverlay({ state: "loading" }))
+ * // then, when GET /api/v2/entities/:id/watermark-overlay answers:
+ * root.innerHTML = watermarkOverlay(response)
+ * ```
+ *
+ * ## The options are the response
+ *
+ * `WatermarkOverlayOptions` is cloudgrid's `WatermarkOverlayResponse` (packages/
+ * shared/src/badge/watermark-overlay.ts) plus a few presentation fields, so the
+ * badge passes the response straight in: `watermarkOverlay({ ...response })`.
+ * The types are restated here, structurally, so the library never imports from
+ * the platform.
+ *
+ * ## Which screen
+ *
+ *   owner, insider     View in My Grid + Copy URL
+ *   outsider, no-grid  Pick Up to My Grid, when `can_pick_up` and `links.pick_up`
+ *   outsider           otherwise: Copy URL + Go to My Grid
+ *   no-grid            otherwise: the not-signed-in screen, no sign-in line
+ *   anonymous          the not-signed-in screen, with "Already have an account?
+ *                      Sign in" (decision 7: the viewer may be signed in and not
+ *                      recognised), and the Example Apps when there are any
+ *   loading            the frame, a shimmer for the name, a skeleton for actions
+ *
+ * ## Actions
+ *
+ * Every control carries a `data-action` that IS the event's `action` in
+ * `watermark.overlay.action` (spec section 10), so the badge emits it as read:
+ * `create_grid`, `sign_in`, `onboard_copy`, `onboard_learn`, `pick_up`,
+ * `view_in_grid`, `copy_url`, `my_grid`, `example_open` (`data-value` is the
+ * tile's 1-based position). Links open in a new tab on their own; the badge only
+ * emits. `copy_url` and `onboard_copy` are buttons whose `data-value` is what to
+ * copy. `close` (`data-value` = `x` or `scrim`) closes; Escape is the badge's.
+ * `select_url` is the read-only field a refused clipboard leaves.
+ */
+import { CUBE, LAYOUT, LIGHTBULB_FILAMENT, X } from "./marks.js";
+import { esc, glyph, href } from "./html.js";
+import { onboardWidget } from "./onboard-widget.js";
+export { BADGE_WATERMARK_CSS } from "./css-watermark.js";
+export { BADGE_WATERMARK_TOKEN_DECLARATIONS, BADGE_WATERMARK_TOKENS } from "./palette.js";
+export { BADGE_BASE_CSS } from "./css-base.js";
+export { badgeRoot } from "./root.js";
+export { esc, glyph, href } from "./html.js";
+export { onboardWidget, wireOnboardWidget } from "./onboard-widget.js";
+/** Every string the overlay says, verbatim from the spec and the frames. */
+export const WATERMARK_COPY = Object.freeze({
+    eyebrow: "You are viewing",
+    close: "Close",
+    plugged: (grid) => `This app is plugged to <b>${esc(grid)}</b> grid.`,
+    privateGrid: "This app is plugged to a private grid.",
+    guestGrid: "This app was dropped without a grid.",
+    unnamed: "An app on CloudGrid",
+    coarse: { inspiration: "An inspiration", app: "An app", agent: "An agent", system: "An app" },
+    anonymous: "CloudGrid gives your AI creations a public or private link. If you want your own grid to plug all your AI creations, create an account or copy the command below to your AI agent.",
+    pickUp: "Feeling creative? Pick it up and create your own version.",
+    share: "Share it with others who may find it useful or interesting.",
+    owner: "Share it with others who may find it useful or interesting, or check how it is doing on the Grid.",
+    create: "Create Your Grid",
+    or: "OR",
+    learn: "Learn how to onboard your agent",
+    signInLead: "Already have an account?",
+    signIn: "Sign in",
+    pickUpButton: "Pick Up to My Grid",
+    copyUrl: "Copy URL",
+    copied: "Copied",
+    copyFailed: "Copy failed",
+    urlField: "App URL",
+    myGrid: "Go to My Grid",
+    viewInGrid: "View in My Grid",
+    examples: "Example Apps",
+    loading: "Loading",
+});
+const KIND_GLYPH = {
+    inspiration: LIGHTBULB_FILAMENT,
+    app: LAYOUT,
+    agent: CUBE,
+    system: LAYOUT,
+};
+const NEW_TAB = ' target="_blank" rel="noopener"';
+/** True when a URL is http(s): anything else would render as `#`, a dead control. */
+const linkable = (url) => !!url && href(url) !== "#";
+const link = (action, url, label, secondary = false) => `<a class="cgb-wm-btn"${secondary ? ' data-variant="secondary"' : ""} href="${href(url)}"${NEW_TAB} data-action="${action}">${esc(label)}</a>`;
+function copyButton(url, face, secondary) {
+    const label = face === "copied" ? WATERMARK_COPY.copied : face === "failed" ? WATERMARK_COPY.copyFailed : WATERMARK_COPY.copyUrl;
+    return (`<button class="cgb-wm-btn"${secondary ? ' data-variant="secondary"' : ""} type="button" data-action="copy_url" data-value="${esc(url)}"${face === "idle" ? "" : ` data-face="${face}"`}>` +
+        `<span>${esc(label)}</span></button>`);
+}
+/** The read-only field a refused clipboard leaves under the buttons, for copying by hand. */
+const urlField = (url) => `<input class="cgb-wm-field" type="text" readonly value="${esc(url)}" aria-label="${esc(WATERMARK_COPY.urlField)}" data-action="select_url">`;
+function header(name, gridLine) {
+    return (`<div class="cgb-wm-head">` +
+        `<p class="cgb-wm-eyebrow">${esc(WATERMARK_COPY.eyebrow)}</p>` +
+        `<h2 class="cgb-wm-name" id="cgb-wm-name">${name}</h2>` +
+        `</div>`) + gridLine;
+}
+function appHeader(d) {
+    const app = d.app;
+    if ("coarse_kind" in app) {
+        return header(esc(WATERMARK_COPY.coarse[app.coarse_kind] ?? WATERMARK_COPY.coarse.app), `<p class="cgb-wm-grid">${esc(WATERMARK_COPY.privateGrid)}</p>`);
+    }
+    const name = app.name?.trim() ? esc(app.name) : esc(WATERMARK_COPY.unnamed);
+    const grid = d.guest_grid
+        ? `<p class="cgb-wm-grid">${esc(WATERMARK_COPY.guestGrid)}</p>`
+        : typeof app.grid_name === "string" && app.grid_name.trim()
+            ? `<p class="cgb-wm-grid">${WATERMARK_COPY.plugged(app.grid_name)}</p>`
+            : "";
+    return header(name, grid);
+}
+const body = (line) => `<p class="cgb-wm-body" id="cgb-wm-body">${esc(line)}</p>`;
+/** The Example Apps row. Only http(s) URLs make a tile; none hides the section. */
+function examples(list) {
+    const tiles = list.filter((e) => linkable(e.url));
+    if (tiles.length === 0)
+        return "";
+    return (`<section class="cgb-wm-ex" aria-label="${esc(WATERMARK_COPY.examples)}">` +
+        `<h3 class="cgb-wm-ex-title">${esc(WATERMARK_COPY.examples)}</h3>` +
+        `<div class="cgb-wm-tiles" role="list">` +
+        tiles
+            .map((e, i) => {
+            const kind = KIND_GLYPH[e.kind] ? e.kind : "app";
+            return (`<div class="cgb-wm-tile-item" role="listitem">` +
+                `<a class="cgb-wm-tile" href="${href(e.url)}"${NEW_TAB} data-action="example_open" data-value="${i + 1}">` +
+                `<span class="cgb-wm-tile-pic">${linkable(e.image) ? `<img class="cgb-wm-tile-img" src="${href(e.image)}" alt="" loading="lazy">` : ""}</span>` +
+                `<span class="cgb-wm-tile-title"><span class="cgb-wm-tile-name">${esc(e.name)}</span>` +
+                `<span class="cgb-wm-kind" data-kind="${kind}" aria-hidden="true">${glyph(KIND_GLYPH[kind])}</span>` +
+                `<span class="cgb-sr">, ${kind === "system" ? "app" : kind}</span></span>` +
+                `</a></div>`);
+        })
+            .join("") +
+        `</div></section>`);
+}
+/** The not-signed-in screen's body, panel, optional sign-in line and examples. */
+function anonymousContent(d, signIn) {
+    return (body(WATERMARK_COPY.anonymous) +
+        `<div class="cgb-wm-panel">` +
+        link("create_grid", d.links.create, WATERMARK_COPY.create) +
+        `<p class="cgb-wm-or" aria-hidden="true">${esc(WATERMARK_COPY.or)}</p>` +
+        onboardWidget({ value: d.onboard_prompt, block: true, face: d.widget }) +
+        `<a class="cgb-wm-learn" href="${href(d.links.learn)}"${NEW_TAB} data-action="onboard_learn">${esc(WATERMARK_COPY.learn)}</a>` +
+        `</div>` +
+        (signIn
+            ? `<p class="cgb-wm-signin">${esc(WATERMARK_COPY.signInLead)} <a href="${href(d.links.sign_in)}"${NEW_TAB} data-action="sign_in">${esc(WATERMARK_COPY.signIn)}</a></p>`
+            : "") +
+        examples(d.examples));
+}
+const actionsRow = (inner) => `<div class="cgb-wm-actions">${inner}</div>`;
+function content(d) {
+    const { links, state } = d;
+    const face = d.copyUrl ?? "idle";
+    const field = face === "failed" && linkable(links.share) ? urlField(links.share) : "";
+    const pickUp = d.can_pick_up && linkable(links.pick_up);
+    if (state === "owner" || state === "insider") {
+        return (body(WATERMARK_COPY.owner) +
+            actionsRow((links.console_entity ? link("view_in_grid", links.console_entity, WATERMARK_COPY.viewInGrid) : "") +
+                (links.share ? copyButton(links.share, face, true) : "")) +
+            field);
+    }
+    if ((state === "outsider" || state === "no-grid") && pickUp) {
+        return body(WATERMARK_COPY.pickUp) + actionsRow(link("pick_up", links.pick_up, WATERMARK_COPY.pickUpButton));
+    }
+    if (state === "outsider") {
+        const copy = links.share ? copyButton(links.share, face, false) : "";
+        const home = links.console_home ? link("my_grid", links.console_home, WATERMARK_COPY.myGrid, !!copy) : "";
+        return body(WATERMARK_COPY.share) + actionsRow(copy + home) + field;
+    }
+    return anonymousContent(d, state === "anonymous");
+}
+const liveRegion = (announce = "") => `<p class="cgb-sr" role="status" aria-live="polite">${esc(announce)}</p>`;
+const closeX = () => `<button class="cgb-wm-x" type="button" data-action="close" data-value="x" aria-label="${esc(WATERMARK_COPY.close)}">${glyph(X)}</button>`;
+const scrimEl = () => `<div class="cgb-wm-scrim" data-action="close" data-value="scrim" aria-hidden="true"></div>`;
+/**
+ * The overlay: the scrim, then the card (`role="dialog"`, `aria-modal`,
+ * labelled by the name, described by the body line), the close x first in it,
+ * so focus lands there on open. Render it inside `badgeRoot()`.
+ */
+export function watermarkOverlay(opts) {
+    if (opts.state === "loading") {
+        const name = opts.name?.trim()
+            ? esc(opts.name)
+            : `<span class="cgb-wm-shimmer" data-shape="name"></span><span class="cgb-sr">${esc(WATERMARK_COPY.loading)}</span>`;
+        return (`<div class="cgb-wm" data-state="loading">` +
+            scrimEl() +
+            `<div class="cgb-wm-card" role="dialog" aria-modal="true" aria-labelledby="cgb-wm-name" aria-busy="true">` +
+            closeX() +
+            header(name, `<span class="cgb-wm-shimmer" data-shape="line"></span>`) +
+            `<div class="cgb-wm-skeleton" aria-hidden="true"><span class="cgb-wm-shimmer" data-shape="body"></span><span class="cgb-wm-shimmer" data-shape="body"></span>` +
+            `<span class="cgb-wm-shimmer" data-shape="panel"></span></div>` +
+            liveRegion(opts.announce) +
+            `</div></div>`);
+    }
+    return (`<div class="cgb-wm" data-state="${esc(opts.state)}"${opts.fallback ? " data-fallback" : ""}>` +
+        scrimEl() +
+        `<div class="cgb-wm-card" role="dialog" aria-modal="true" aria-labelledby="cgb-wm-name" aria-describedby="cgb-wm-body">` +
+        closeX() +
+        appHeader(opts) +
+        content(opts) +
+        liveRegion(opts.announce) +
+        `</div></div>`);
+}
+//# sourceMappingURL=watermark.js.map

package/dist/badge/watermark.js.map

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