@cloudgrid-io/ui 0.35.0 → 0.36.0

package/dist/badge/css-base.d.ts

@@ -19,6 +19,10 @@
  *
  * `data-cgb-layout="desktop"` pins the desktop answer on a narrow screen.
  *
+ * Stacking (ui issue 351): a panel and the phone's scrim sit at z-index 2, over
+ * the close x (z-index 1) and the fan's icon, so nothing on the page shows
+ * through an open panel. The prototype did the same.
+ *
  * Motion (ui issue 322): `cgb-rise` is the arrival the live badge and the bubble
  * share, and where the browser draws `linear()` easing the root swaps
  * `--cg-ease-spring` for the real damped spring. Reduced motion stops every

package/dist/badge/css-base.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"css-base.d.ts","sourceRoot":"","sources":["../../src/badge/css-base.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAQH,0EAA0E;AAC1E,wBAAgB,UAAU,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAE/D;AAED,iGAAiG;AACjG,wBAAgB,UAAU,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAE/D;AAyCD,eAAO,MAAM,cAAc,EAAE,MA8EyC,CAAA"}
+{"version":3,"file":"css-base.d.ts","sourceRoot":"","sources":["../../src/badge/css-base.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAQH,0EAA0E;AAC1E,wBAAgB,UAAU,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAE/D;AAED,iGAAiG;AACjG,wBAAgB,UAAU,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAE/D;AAyCD,eAAO,MAAM,cAAc,EAAE,MA8EyC,CAAA"}

package/dist/badge/css-base.js

@@ -19,6 +19,10 @@
  *
  * `data-cgb-layout="desktop"` pins the desktop answer on a narrow screen.
  *
+ * Stacking (ui issue 351): a panel and the phone's scrim sit at z-index 2, over
+ * the close x (z-index 1) and the fan's icon, so nothing on the page shows
+ * through an open panel. The prototype did the same.
+ *
  * Motion (ui issue 322): `cgb-rise` is the arrival the live badge and the bubble
  * share, and where the browser draws `linear()` easing the root swaps
  * `--cg-ease-spring` for the real damped spring. Reduced motion stops every
@@ -90,7 +94,7 @@ export const BADGE_BASE_CSS = /* @__PURE__ */ (() => `.cgb{all:initial;${BADGE_T
 .cgb-wordmark{display:block;height:22px;width:auto;color:var(--cg-text-accent)}
 .cgb-panel{position:absolute;width:340px;max-height:calc(100% - 32px);overflow:auto;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-content:start;` +
     `padding:18px 18px 16px;background:var(--cg-surface-card);color:var(--cg-text-primary);border:1px solid var(--cg-border-hairline);` +
-    `border-radius:var(--cg-radius-container);box-shadow:var(--cg-shadow-panel),var(--cg-shadow-hover);animation:cgb-in var(--cg-duration-slow) var(--cg-ease-out)}
+    `border-radius:var(--cg-radius-container);box-shadow:var(--cg-shadow-panel),var(--cg-shadow-hover);animation:cgb-in var(--cg-duration-slow) var(--cg-ease-out);z-index:2}
 .cgb-panel[data-side=right]{right:16px;top:50%;transform:translateY(-50%)}
 .cgb-panel[data-side=left]{left:16px;top:50%;transform:translateY(-50%)}
 .cgb-panel[data-side=corner]{right:16px;bottom:16px}
@@ -136,7 +140,7 @@ export const BADGE_BASE_CSS = /* @__PURE__ */ (() => `.cgb{all:initial;${BADGE_T
     touchRules((r) => `${r} .cgb-x{opacity:1;scale:1}`) +
     "\n" +
     phoneRules((r) => `${r} .cgb-panel{left:0;right:0;top:auto;bottom:0;width:auto;max-height:88%;transform:none;border-radius:var(--cg-radius-container) var(--cg-radius-container) 0 0;border-bottom:0;animation-name:cgb-up}` +
-        `${r} .cgb-scrim{display:block;position:absolute;inset:0;background:var(--cg-scrim)}` +
+        `${r} .cgb-scrim{display:block;position:absolute;inset:0;z-index:2;background:var(--cg-scrim)}` +
         `${r} .cgb-panel textarea{font-size:var(--cg-body-md)}` +
         // Phone only, and tighter (founder: no step may scroll). The sheet is
         // capped at 88% of the viewport, 587px on a 375x667 phone, so every step

package/dist/badge/css-base.js.map

@@ -1 +1 @@
-{"version":3,"file":"css-base.js","sourceRoot":"","sources":["../../src/badge/css-base.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EAAE,wBAAwB,EAAE,MAAM,cAAc,CAAA;AAEvD,4FAA4F;AAC5F,MAAM,WAAW,GAAG,qCAAqC,CAAA;AACzD,MAAM,YAAY,GAAG,6BAA6B,CAAA;AAElD,0EAA0E;AAC1E,MAAM,UAAU,UAAU,CAAC,KAA4B;IACrD,OAAO,4BAA4B,KAAK,CAAC,WAAW,CAAC,IAAI,KAAK,CAAC,YAAY,CAAC,EAAE,CAAA;AAChF,CAAC;AAED,iGAAiG;AACjG,MAAM,UAAU,UAAU,CAAC,KAA4B;IACrD,OAAO,uBAAuB,KAAK,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC,sBAAsB,CAAC,EAAE,CAAA;AAChF,CAAC;AAED,MAAM,KAAK,GAAG,2DAA2D,CAAA;AAEzE;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,OAAO,GACX;;2HAEyH;IACzH,wFAAwF;IACxF;;;;;;;;;;;;;CAaD,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAW,eAAe,CAAC,CAAC,GAAG,EAAE,CAC1D,oBAAoB,wBAAwB,8EAA8E;IAC1H,mIAAmI;IACnI;;;;;;;;;;sBAUoB,KAAK;;;;mKAIwI;IACjK,mIAAmI;IACnI;;;;;;;;;;6IAU2I;IAC3I,4LAA4L;IAC5L;;;;;;;;;4IAS0I;IAC1I;;;+IAG6I;IAC7I;;;;;;;;;;;;;;;CAeD;IACC,OAAO;IACP,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,4BAA4B,CAAC;IACnD,IAAI;IACJ,UAAU,CACR,CAAC,CAAC,EAAE,EAAE,CACJ,GAAG,CAAC,sMAAsM;QAC1M,GAAG,CAAC,iFAAiF;QACrF,GAAG,CAAC,mDAAmD;QACvD,sEAAsE;QACtE,yEAAyE;QACzE,yDAAyD;QACzD,GAAG,CAAC,6CAA6C;QACjD,GAAG,CAAC,6BAA6B;QACjC,GAAG,CAAC,wCAAwC;QAC5C,GAAG,CAAC,0CAA0C;QAC9C,GAAG,CAAC,wBAAwB,CAC/B;IACD,iEAAiE,CAAC,EAAE,CAAA"}
+{"version":3,"file":"css-base.js","sourceRoot":"","sources":["../../src/badge/css-base.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEH,OAAO,EAAE,wBAAwB,EAAE,MAAM,cAAc,CAAA;AAEvD,4FAA4F;AAC5F,MAAM,WAAW,GAAG,qCAAqC,CAAA;AACzD,MAAM,YAAY,GAAG,6BAA6B,CAAA;AAElD,0EAA0E;AAC1E,MAAM,UAAU,UAAU,CAAC,KAA4B;IACrD,OAAO,4BAA4B,KAAK,CAAC,WAAW,CAAC,IAAI,KAAK,CAAC,YAAY,CAAC,EAAE,CAAA;AAChF,CAAC;AAED,iGAAiG;AACjG,MAAM,UAAU,UAAU,CAAC,KAA4B;IACrD,OAAO,uBAAuB,KAAK,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC,sBAAsB,CAAC,EAAE,CAAA;AAChF,CAAC;AAED,MAAM,KAAK,GAAG,2DAA2D,CAAA;AAEzE;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,OAAO,GACX;;2HAEyH;IACzH,wFAAwF;IACxF;;;;;;;;;;;;;CAaD,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAW,eAAe,CAAC,CAAC,GAAG,EAAE,CAC1D,oBAAoB,wBAAwB,8EAA8E;IAC1H,mIAAmI;IACnI;;;;;;;;;;sBAUoB,KAAK;;;;mKAIwI;IACjK,mIAAmI;IACnI;;;;;;;;;;6IAU2I;IAC3I,4LAA4L;IAC5L;;;;;;;;;4IAS0I;IAC1I;;;+IAG6I;IAC7I;;;;;;;;;;;;;;;CAeD;IACC,OAAO;IACP,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,4BAA4B,CAAC;IACnD,IAAI;IACJ,UAAU,CACR,CAAC,CAAC,EAAE,EAAE,CACJ,GAAG,CAAC,sMAAsM;QAC1M,GAAG,CAAC,2FAA2F;QAC/F,GAAG,CAAC,mDAAmD;QACvD,sEAAsE;QACtE,yEAAyE;QACzE,yDAAyD;QACzD,GAAG,CAAC,6CAA6C;QACjD,GAAG,CAAC,6BAA6B;QACjC,GAAG,CAAC,wCAAwC;QAC5C,GAAG,CAAC,0CAA0C;QAC9C,GAAG,CAAC,wBAAwB,CAC/B;IACD,iEAAiE,CAAC,EAAE,CAAA"}

package/dist/badge/css-fan.d.ts

@@ -0,0 +1,30 @@
+/**
+ * The reaction fan's stylesheet (ui issue 351), after `BADGE_BASE_CSS`. It is
+ * part of both `BADGE_VISITOR_CSS` (the fan itself) and `BADGE_OWNER_CSS` (the
+ * owner's small working copy in the "Ask visitors for feedback" explanation),
+ * so each of the badge's two files carries it once.
+ *
+ * The icon: a drop, round with one sharp corner at the bottom left, holding
+ * the plug. Light system: purple with a white plug. Dark system: white with a
+ * purple plug and a purple hairline. `data-theme` on `.cgf` pins either one.
+ * It rises in like the bubble did, 600ms after insertion (`--cgb-start`).
+ *
+ * The options: white discs on a quarter circle, up and to the left. Opening
+ * springs each out from under the icon, 30ms apart; the one under a finger
+ * grows to 1.28. A press pops the disc and fills it purple with a check; taking
+ * it back shrinks it. A chosen reaction leaves a small mark on the icon, which
+ * pops in only when it is new (`data-new`).
+ *
+ * Sizes: a 40px icon, 40px options on a 98px radius; on a touch screen a 44px
+ * icon and 48px options on 114px, so every target is 44px or more. Touch is
+ * `hover: none`, the root's `data-cgb-touch`, or `data-touch` on the fan, which
+ * `wireFan()` sets on the first touch.
+ *
+ * The hover zone: while the fan is open on a mouse, a transparent quarter disc
+ * behind the options keeps the pointer "on" the fan as it crosses the gaps.
+ *
+ * Reduced motion: the base stylesheet stops every animation and transition in
+ * the root, so the fan opens without the spread and a press has no pop.
+ */
+export declare const BADGE_FAN_CSS: string;
+//# sourceMappingURL=css-fan.d.ts.map

package/dist/badge/css-fan.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css-fan.d.ts","sourceRoot":"","sources":["../../src/badge/css-fan.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAcH,eAAO,MAAM,aAAa,EAAE,MAqDxB,CAAA"}

package/dist/badge/css-fan.js

@@ -0,0 +1,90 @@
+/**
+ * The reaction fan's stylesheet (ui issue 351), after `BADGE_BASE_CSS`. It is
+ * part of both `BADGE_VISITOR_CSS` (the fan itself) and `BADGE_OWNER_CSS` (the
+ * owner's small working copy in the "Ask visitors for feedback" explanation),
+ * so each of the badge's two files carries it once.
+ *
+ * The icon: a drop, round with one sharp corner at the bottom left, holding
+ * the plug. Light system: purple with a white plug. Dark system: white with a
+ * purple plug and a purple hairline. `data-theme` on `.cgf` pins either one.
+ * It rises in like the bubble did, 600ms after insertion (`--cgb-start`).
+ *
+ * The options: white discs on a quarter circle, up and to the left. Opening
+ * springs each out from under the icon, 30ms apart; the one under a finger
+ * grows to 1.28. A press pops the disc and fills it purple with a check; taking
+ * it back shrinks it. A chosen reaction leaves a small mark on the icon, which
+ * pops in only when it is new (`data-new`).
+ *
+ * Sizes: a 40px icon, 40px options on a 98px radius; on a touch screen a 44px
+ * icon and 48px options on 114px, so every target is 44px or more. Touch is
+ * `hover: none`, the root's `data-cgb-touch`, or `data-touch` on the fan, which
+ * `wireFan()` sets on the first touch.
+ *
+ * The hover zone: while the fan is open on a mouse, a transparent quarter disc
+ * behind the options keeps the pointer "on" the fan as it crosses the gaps.
+ *
+ * Reduced motion: the base stylesheet stops every animation and transition in
+ * the root, so the fan opens without the spread and a press has no pop.
+ */
+import { touchRules } from "./css-base.js";
+import { FAN_DIRECTIONS, FAN_HOT_SCALE, FAN_SIZE } from "./fan-geometry.js";
+const P = FAN_SIZE.pointer;
+const T = FAN_SIZE.touch;
+/** The white icon: on a dark system, or pinned with `data-theme="dark"`. */
+const WHITE_ICON = "background:var(--cg-surface-card);color:var(--cg-text-accent);border:1px solid var(--cg-border-accent)";
+/** The touch sizes, never for the owner's preview, which is drawn small on purpose. */
+const TOUCH_SIZES = `{--cgb-fan-i:${T.icon}px;--cgb-fan-o:${T.option}px;--cgb-fan-r:${T.radius}px}`;
+export const BADGE_FAN_CSS = /* @__PURE__ */ (() => `.cgf{--cgb-fan-i:${P.icon}px;--cgb-fan-o:${P.option}px;--cgb-fan-r:${P.radius}px;--cgb-t0:var(--cgb-start,600ms);position:absolute;` +
+    `right:calc(12px + env(safe-area-inset-right,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));width:var(--cgb-fan-i);height:var(--cgb-fan-i)}
+` +
+    touchRules((r) => `${r} .cgf:not([data-mini])${TOUCH_SIZES}`) +
+    `.cgf[data-touch]:not([data-mini])${TOUCH_SIZES}
+.cgf-icon{position:absolute;inset:0;z-index:2;display:grid;place-items:center;border-radius:50% 50% 50% 0;background:var(--cg-primary);color:var(--cg-text-on-primary);` +
+    `box-shadow:var(--cg-shadow-card);cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;` +
+    `animation:cgb-rise 640ms var(--cg-ease-out-expo) var(--cgb-t0) both;transition:box-shadow 240ms ease,scale 320ms var(--cg-ease-spring)}
+.cgf[data-theme=dark] .cgf-icon{${WHITE_ICON}}
+@media (prefers-color-scheme:dark){.cgf:not([data-theme]) .cgf-icon{${WHITE_ICON}}}
+.cgf-plug{width:calc(var(--cgb-fan-i) / 2);height:calc(var(--cgb-fan-i) / 2)}
+@media (hover:hover){.cgf-icon:hover{box-shadow:var(--cg-shadow-card-hover)}}
+.cgf-icon:active{scale:.94;transition:scale var(--cg-duration-fast) ease}
+.cgf-icon:focus-visible{outline:2px solid var(--cg-primary);outline-offset:2px}
+.cgf-opts{position:absolute;left:50%;top:50%;width:0;height:0;z-index:1}
+.cgf-opt{--cgb-c:1;--cgb-s:0;--cgb-i:0;position:absolute;left:calc(var(--cgb-fan-o) / -2);top:calc(var(--cgb-fan-o) / -2);width:var(--cgb-fan-o);height:var(--cgb-fan-o);padding:0;border-radius:50%;` +
+    `translate:0 0;opacity:0;visibility:hidden;pointer-events:none;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;` +
+    `transition:translate 200ms var(--cg-ease-in),opacity 160ms var(--cg-ease-out),visibility 0s linear 200ms}
+` +
+    FAN_DIRECTIONS.map(([c, s], i) => `.cgf-opt[data-i="${i}"]{--cgb-c:${c};--cgb-s:${s};--cgb-i:${i}}`).join("\n") +
+    `
+.cgf[data-open] .cgf-opt{translate:calc(var(--cgb-fan-r) * var(--cgb-c) * -1) calc(var(--cgb-fan-r) * var(--cgb-s) * -1);opacity:1;visibility:visible;pointer-events:auto;` +
+    `transition:translate 460ms var(--cg-ease-spring) calc(var(--cgb-i) * 30ms),opacity 160ms var(--cg-ease-out) calc(var(--cgb-i) * 30ms),visibility 0s}
+.cgf-face{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:var(--cg-surface-card);color:var(--cg-text-primary);border:1px solid var(--cg-border-hairline);` +
+    `box-shadow:var(--cg-shadow-card),var(--cg-shadow-hover);scale:.5;` +
+    `transition:scale 300ms var(--cg-ease-spring),background-color var(--cg-duration) var(--cg-ease-out),color var(--cg-duration) var(--cg-ease-out),border-color var(--cg-duration) var(--cg-ease-out)}
+.cgf[data-open] .cgf-face{scale:1;transition:scale 460ms var(--cg-ease-spring) calc(var(--cgb-i) * 30ms),background-color var(--cg-duration) var(--cg-ease-out),color var(--cg-duration) var(--cg-ease-out),border-color var(--cg-duration) var(--cg-ease-out)}
+@media (hover:hover){.cgf[data-open] .cgf-opt:hover .cgf-face{scale:1.08;transition-delay:0s}}
+.cgf[data-open] .cgf-opt[data-hot] .cgf-face{scale:${FAN_HOT_SCALE};transition-delay:0s}
+.cgf-opt:focus-visible{outline:none}
+.cgf-opt:focus-visible .cgf-face{outline:2px solid var(--cg-primary);outline-offset:2px}
+.cgf-opt[aria-pressed=true] .cgf-face{background:var(--cg-primary);color:var(--cg-text-on-primary);border-color:var(--cg-primary)}
+.cgf[data-open] .cgf-opt[data-pop] .cgf-face{animation:cgf-pop 440ms var(--cg-ease-out)}
+.cgf[data-open] .cgf-opt[data-unpop] .cgf-face{animation:cgf-unpop 300ms var(--cg-ease-out)}
+@keyframes cgf-pop{0%{scale:1}35%{scale:1.24}70%{scale:.96}100%{scale:1}}
+@keyframes cgf-unpop{40%{scale:.86}}
+.cgf-g,.cgf-ck{grid-area:1/1;display:grid;place-items:center;transition:opacity 140ms var(--cg-ease-out),scale 300ms var(--cg-ease-spring)}
+.cgf-g svg,.cgf-ck svg{width:calc(var(--cgb-fan-o) / 2);height:calc(var(--cgb-fan-o) / 2)}
+.cgf-ck{opacity:0;scale:.4}
+.cgf-opt[data-flash] .cgf-ck{opacity:1;scale:1}
+.cgf-opt[data-flash] .cgf-g{opacity:0;scale:.6}
+.cgf-zone{position:absolute;right:0;bottom:0;z-index:0;display:none;width:calc(var(--cgb-fan-r) + var(--cgb-fan-o) / 2 + var(--cgb-fan-i) / 2 + 16px);` +
+    `height:calc(var(--cgb-fan-r) + var(--cgb-fan-o) / 2 + var(--cgb-fan-i) / 2 + 16px);border-top-left-radius:100%}
+@media (hover:hover) and (pointer:fine){.cgb:not([data-cgb-touch]) .cgf:not([data-touch]):is([data-open],[data-lock]) .cgf-zone{display:block}}
+.cgf-marks{position:absolute;right:calc(100% - 13px);top:-8px;display:flex;flex-direction:row-reverse;pointer-events:none}
+.cgf-mark{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--cg-surface-card);color:var(--cg-text-accent);border:1px solid var(--cg-border-accent);box-shadow:var(--cg-shadow-card)}
+.cgf-mark[data-new]{animation:cgb-pop 420ms var(--cg-ease-spring) both}
+.cgf-mark+.cgf-mark{margin-right:-7px}
+.cgf-mark svg{width:12px;height:12px}
+.cgf[data-mini]{right:22px;bottom:22px}
+.cgf[data-mini] .cgf-icon{animation:none}
+@starting-style{.cgf[data-mini][data-open] .cgf-opt{translate:0 0;opacity:0}.cgf[data-mini][data-open] .cgf-face{scale:.5}}
+`)();
+//# sourceMappingURL=css-fan.js.map

package/dist/badge/css-fan.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"css-fan.js","sourceRoot":"","sources":["../../src/badge/css-fan.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3E,MAAM,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAA;AAC1B,MAAM,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAA;AAExB,4EAA4E;AAC5E,MAAM,UAAU,GAAG,wGAAwG,CAAA;AAE3H,uFAAuF;AACvF,MAAM,WAAW,GAAG,gBAAgB,CAAC,CAAC,IAAI,kBAAkB,CAAC,CAAC,MAAM,kBAAkB,CAAC,CAAC,MAAM,KAAK,CAAA;AAEnG,MAAM,CAAC,MAAM,aAAa,GAAW,eAAe,CAAC,CAAC,GAAG,EAAE,CACzD,oBAAoB,CAAC,CAAC,IAAI,kBAAkB,CAAC,CAAC,MAAM,kBAAkB,CAAC,CAAC,MAAM,uDAAuD;IACrI;CACD;IACC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,yBAAyB,WAAW,EAAE,CAAC;IAC7D,oCAAoC,WAAW;wKACuH;IACtK,yIAAyI;IACzI;kCACgC,UAAU;sEAC0B,UAAU;;;;;;sMAMsH;IACpM,uJAAuJ;IACvJ;CACD;IACC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,oBAAoB,CAAC,cAAc,CAAC,YAAY,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;IAC/G;2KACyK;IACzK;8LAC4L;IAC5L,mEAAmE;IACnE;;;qDAGmD,aAAa;;;;;;;;;;;;;uJAaqF;IACrJ;;;;;;;;;;CAUD,CAAC,EAAE,CAAA"}

package/dist/badge/css-live.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"css-live.d.ts","sourceRoot":"","sources":["../../src/badge/css-live.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAoBH,eAAO,MAAM,cAAc,EAAE,MAwBpB,CAAA"}
+{"version":3,"file":"css-live.d.ts","sourceRoot":"","sources":["../../src/badge/css-live.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAoBH,eAAO,MAAM,cAAc,EAAE,MAgCpB,CAAA"}

package/dist/badge/css-live.js

@@ -61,7 +61,15 @@ export const BADGE_LIVE_CSS = /* @__PURE__ */ (() => `.cgb-live-wrap{--cgb-t0:va
 @keyframes cgb-grow{from{grid-template-columns:0fr}}
 @keyframes cgb-label{from{opacity:0;translate:-8px 0}}
 @media (prefers-reduced-motion:reduce){.cgb-live:hover .cgb-live-icon,.cgb-live:focus-visible .cgb-live-icon,.cgb-live:active .cgb-live-icon{transform:none}}
+` +
+    // The pill's close x (founder, 2026-10-21, ui issue 351): 18px with an 11px
+    // x, overlapping the pill's top-right edge by 6px down and 5px out. It
+    // keeps the base x's look and its hover and focus rules; on touch its hit
+    // area is 44px square.
+    `.cgb-live-x{width:18px;height:18px;top:10px;right:-5px}
+.cgb-live-x svg{width:11px;height:11px}
 ` +
     touchRules((r) => `${r} .cgb-live-x{animation:cgb-pop 520ms var(--cg-ease-spring) calc(var(--cgb-t0) + 1020ms) both}`) +
+    touchRules((r) => `${r} .cgb-live-x::before{inset:-13px}`) +
     "\n")();
 //# sourceMappingURL=css-live.js.map

package/dist/badge/css-live.js.map

@@ -1 +1 @@
-{"version":3,"file":"css-live.js","sourceRoot":"","sources":["../../src/badge/css-live.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEH,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE1C;;;;GAIG;AACH,MAAM,UAAU,GACd,0BAA0B;IAC1B,kBAAkB,CAChB,qGAAqG,eAAe,WAAW,CAChI;IACD,IAAI,CAAA;AAEN,6EAA6E;AAC7E,MAAM,IAAI,GAAG,GAAG,UAAU,yJAAyJ,CAAA;AAEnL,MAAM,CAAC,MAAM,cAAc,GAAW,eAAe,CAAC,CAAC,GAAG,EAAE,CAC1D;wMACsM;IACtM;;sFAEoF;IACpF,sBAAsB,IAAI,eAAe,IAAI,+IAA+I;IAC5L,gKAAgK;IAChK,+JAA+J;IAC/J;;;;;;qLAMmL;IACnL;;;;;;CAMD;IACC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,+FAA+F,CAAC;IACtH,IAAI,CAAC,EAAE,CAAA"}
+{"version":3,"file":"css-live.js","sourceRoot":"","sources":["../../src/badge/css-live.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEH,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE1C;;;;GAIG;AACH,MAAM,UAAU,GACd,0BAA0B;IAC1B,kBAAkB,CAChB,qGAAqG,eAAe,WAAW,CAChI;IACD,IAAI,CAAA;AAEN,6EAA6E;AAC7E,MAAM,IAAI,GAAG,GAAG,UAAU,yJAAyJ,CAAA;AAEnL,MAAM,CAAC,MAAM,cAAc,GAAW,eAAe,CAAC,CAAC,GAAG,EAAE,CAC1D;wMACsM;IACtM;;sFAEoF;IACpF,sBAAsB,IAAI,eAAe,IAAI,+IAA+I;IAC5L,gKAAgK;IAChK,+JAA+J;IAC/J;;;;;;qLAMmL;IACnL;;;;;;CAMD;IACC,4EAA4E;IAC5E,uEAAuE;IACvE,0EAA0E;IAC1E,uBAAuB;IACvB;;CAED;IACC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,+FAA+F,CAAC;IACtH,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,mCAAmC,CAAC;IAC1D,IAAI,CAAC,EAAE,CAAA"}

package/dist/badge/css-owner.d.ts

@@ -2,6 +2,10 @@
  * The owner half of the badge stylesheet: the tab on the edge and the owner
  * panel's three steps. Ships in the owner file the badge lazy-loads for the
  * app's owner only, and assumes `BADGE_BASE_CSS` is already in the shadow root.
+ * It carries the reaction fan's stylesheet (`BADGE_FAN_CSS`, ui issue 351) for
+ * the working copy the "Ask visitors for feedback" explanation shows.
  */
+/** The owner's own rules, without the fan. `BADGE_CSS` joins it to the visitor's and adds the fan once. */
+export declare const OWNER_ONLY_CSS: string;
 export declare const BADGE_OWNER_CSS: string;
 //# sourceMappingURL=css-owner.d.ts.map

package/dist/badge/css-owner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"css-owner.d.ts","sourceRoot":"","sources":["../../src/badge/css-owner.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAKH,eAAO,MAAM,eAAe,EAAE,MAyKxB,CAAA"}
+{"version":3,"file":"css-owner.d.ts","sourceRoot":"","sources":["../../src/badge/css-owner.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAKH,2GAA2G;AAC3G,eAAO,MAAM,cAAc,EAAE,MAyKvB,CAAA;AAEN,eAAO,MAAM,eAAe,EAAE,MAAuC,CAAA"}

package/dist/badge/css-owner.js

@@ -2,10 +2,13 @@
  * The owner half of the badge stylesheet: the tab on the edge and the owner
  * panel's three steps. Ships in the owner file the badge lazy-loads for the
  * app's owner only, and assumes `BADGE_BASE_CSS` is already in the shadow root.
+ * It carries the reaction fan's stylesheet (`BADGE_FAN_CSS`, ui issue 351) for
+ * the working copy the "Ask visitors for feedback" explanation shows.
  */
 import { phoneRules } from "./css-base.js";
-import { bubbleLook } from "./css-bubble.js";
-export const BADGE_OWNER_CSS = /* @__PURE__ */ (() => 
+import { BADGE_FAN_CSS } from "./css-fan.js";
+/** The owner's own rules, without the fan. `BADGE_CSS` joins it to the visitor's and adds the fan once. */
+export const OWNER_ONLY_CSS = /* @__PURE__ */ (() => 
 // One length for every step (cloudgrid-console 868): the owner panel is the
 // main step's height on main, Edit and Share alike, so switching steps never
 // resizes it. 506px is the main step measured on desktop (505.1), 415px on a
@@ -70,16 +73,14 @@ export const BADGE_OWNER_CSS = /* @__PURE__ */ (() =>
     `background:var(--cg-surface-card);border:1px solid var(--cg-border-control);border-bottom-color:var(--cg-border-hairline);border-radius:var(--cg-radius-md) var(--cg-radius-md) 0 0;` +
     `box-shadow:var(--cg-shadow-card);font-family:var(--cg-font-body);font-weight:var(--cg-weight-regular);animation:cgb-in var(--cg-duration) var(--cg-ease-out)}
 ` +
-    // The preview sits in the middle of its tile, both ways (ui issue 329). The
-    // wrap is the 22px strip for the x over the 40px pill, so the pill's centre
-    // is 42px down the wrap: scaling about that point and pulling the wrap back
-    // by it puts the pill's centre on the tile's. `width:max-content` keeps the
-    // pill its own 74px, which `left:50%` alone would halve. At .8 the pill is
-    // 59.2 by 32 and the x 16px, its top 17.6px above the pill's; hovered it
-    // grows to 17.92 (scale 1.12), so the tile needs 2 x (17.6 + 0.96) + 32 =
-    // 69.12px to hold it: 70. Gaps: 14.4px left and right, 19px top and bottom.
-    `.cgb-info-art{position:relative;flex:none;width:88px;height:70px;overflow:hidden;border-radius:var(--cg-radius-sm);background:var(--cg-surface-raised)}
-` + bubbleLook(".cgb-info-bubble") + `.cgb-info-wrap{position:absolute;left:50%;top:50%;width:max-content;padding-top:22px;transform:translate(-50%,-42px) scale(.8);transform-origin:50% 42px}
+    // The preview is a working small copy of the visitor's fan (ui issue 351),
+    // drawn open at half size: a 224px stage, the fan in its bottom-right
+    // corner as in an app's, scaled into a 112px tile. The explanation's 139px
+    // holds the tile and its 10px padding. On a phone the explanation is 112px
+    // (see above), so the tile is 92px: the prototype's 96 made it 116 and
+    // covered the bottom of the name row, which the explanation must never do.
+    `.cgb-info-art{position:relative;flex:none;width:112px;height:112px;overflow:hidden;border-radius:var(--cg-radius-sm);background:var(--cg-surface-raised)}
+.cgb-info-art .cgf-stage{position:absolute;left:0;top:0;display:block;width:224px;height:224px;transform:scale(.5);transform-origin:0 0}
 .cgb-info-copy{min-width:0;font-size:var(--cg-caption);line-height:1.4;color:var(--cg-text-secondary);text-wrap:pretty}
 .cgb-info-copy::before{content:"";float:right;width:22px;height:18px}
 .cgb-info-copy span{color:var(--cg-text-primary)}
@@ -164,6 +165,8 @@ export const BADGE_OWNER_CSS = /* @__PURE__ */ (() =>
         `${r} .cgb-spark{height:18px}` +
         `${r} .cgb-box .cgb-toggle{padding:9px 12px}` +
         `${r} .cgb-info{min-height:112px}` +
+        `${r} .cgb-info-art{width:92px;height:92px}` +
+        `${r} .cgb-info-art .cgf-stage{transform:scale(.4107)}` +
         `${r} .cgb-seg button{padding:6px 4px;gap:2px}` +
         `${r} .cgb-seg button svg{width:16px;height:16px}` +
         `${r} .cgb-aslot{min-height:40px;margin-top:-2px}` +
@@ -172,4 +175,5 @@ export const BADGE_OWNER_CSS = /* @__PURE__ */ (() =>
         `${r} .cgb-prompt{padding:10px 44px 10px 12px}` +
         `${r} .cgb-prompt-copy{top:8px;right:8px}` +
         `${r} .cgb-link-box{height:40px}`))();
+export const BADGE_OWNER_CSS = OWNER_ONLY_CSS + BADGE_FAN_CSS;
 //# sourceMappingURL=css-owner.js.map

package/dist/badge/css-owner.js.map

@@ -1 +1 @@
-{"version":3,"file":"css-owner.js","sourceRoot":"","sources":["../../src/badge/css-owner.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAE5C,MAAM,CAAC,MAAM,eAAe,GAAW,eAAe,CAAC,CAAC,GAAG,EAAE;AAC3D,4EAA4E;AAC5E,6EAA6E;AAC7E,6EAA6E;AAC7E,2EAA2E;AAC3E,kEAAkE;AAClE;gKAC8J;IAC9J,8JAA8J;IAC9J,mKAAmK;IACnK;;;;;;;;;;;;;qKAamK;IACnK,oOAAoO;IACpO;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BD;IACC,4EAA4E;IAC5E,6EAA6E;IAC7E,oEAAoE;IACpE,2EAA2E;IAC3E,iDAAiD;IACjD;;;;8JAI4J;IAC5J,sLAAsL;IACtL;CACD;IACC,4EAA4E;IAC5E,4EAA4E;IAC5E,4EAA4E;IAC5E,4EAA4E;IAC5E,2EAA2E;IAC3E,yEAAyE;IACzE,0EAA0E;IAC1E,4EAA4E;IAC5E;CACD,GAAG,UAAU,CAAC,kBAAkB,CAAC,GAAG;;;;;;;;;6JASwH;IAC3J;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uJA+BqJ;IACrJ;;;;;;;;;;;;;;;;;;;2LAmByL;IACzL;;;;;;;;;CASD;IACC,UAAU,CACR,CAAC,CAAC,EAAE,EAAE,CACJ,GAAG,CAAC,+CAA+C;QACnD,GAAG,CAAC,wBAAwB;QAC5B,GAAG,CAAC,2CAA2C;QAC/C,GAAG,CAAC,kCAAkC;QACtC,GAAG,CAAC,gEAAgE;QACpE,sEAAsE;QACtE,4CAA4C;QAC5C,GAAG,CAAC,gDAAgD;QACpD,GAAG,CAAC,gCAAgC;QACpC,GAAG,CAAC,6BAA6B;QACjC,GAAG,CAAC,0BAA0B;QAC9B,GAAG,CAAC,yCAAyC;QAC7C,GAAG,CAAC,8BAA8B;QAClC,GAAG,CAAC,2CAA2C;QAC/C,GAAG,CAAC,8CAA8C;QAClD,GAAG,CAAC,8CAA8C;QAClD,GAAG,CAAC,gDAAgD;QACpD,GAAG,CAAC,qBAAqB;QACzB,GAAG,CAAC,2CAA2C;QAC/C,GAAG,CAAC,sCAAsC;QAC1C,GAAG,CAAC,6BAA6B,CACpC,CAAC,EAAE,CAAA"}
+{"version":3,"file":"css-owner.js","sourceRoot":"","sources":["../../src/badge/css-owner.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAE5C,2GAA2G;AAC3G,MAAM,CAAC,MAAM,cAAc,GAAW,eAAe,CAAC,CAAC,GAAG,EAAE;AAC1D,4EAA4E;AAC5E,6EAA6E;AAC7E,6EAA6E;AAC7E,2EAA2E;AAC3E,kEAAkE;AAClE;gKAC8J;IAC9J,8JAA8J;IAC9J,mKAAmK;IACnK;;;;;;;;;;;;;qKAamK;IACnK,oOAAoO;IACpO;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BD;IACC,4EAA4E;IAC5E,6EAA6E;IAC7E,oEAAoE;IACpE,2EAA2E;IAC3E,iDAAiD;IACjD;;;;8JAI4J;IAC5J,sLAAsL;IACtL;CACD;IACC,2EAA2E;IAC3E,sEAAsE;IACtE,2EAA2E;IAC3E,2EAA2E;IAC3E,uEAAuE;IACvE,2EAA2E;IAC3E;;;;;;;;;;6JAU2J;IAC3J;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uJA+BqJ;IACrJ;;;;;;;;;;;;;;;;;;;2LAmByL;IACzL;;;;;;;;;CASD;IACC,UAAU,CACR,CAAC,CAAC,EAAE,EAAE,CACJ,GAAG,CAAC,+CAA+C;QACnD,GAAG,CAAC,wBAAwB;QAC5B,GAAG,CAAC,2CAA2C;QAC/C,GAAG,CAAC,kCAAkC;QACtC,GAAG,CAAC,gEAAgE;QACpE,sEAAsE;QACtE,4CAA4C;QAC5C,GAAG,CAAC,gDAAgD;QACpD,GAAG,CAAC,gCAAgC;QACpC,GAAG,CAAC,6BAA6B;QACjC,GAAG,CAAC,0BAA0B;QAC9B,GAAG,CAAC,yCAAyC;QAC7C,GAAG,CAAC,8BAA8B;QAClC,GAAG,CAAC,wCAAwC;QAC5C,GAAG,CAAC,mDAAmD;QACvD,GAAG,CAAC,2CAA2C;QAC/C,GAAG,CAAC,8CAA8C;QAClD,GAAG,CAAC,8CAA8C;QAClD,GAAG,CAAC,gDAAgD;QACpD,GAAG,CAAC,qBAAqB;QACzB,GAAG,CAAC,2CAA2C;QAC/C,GAAG,CAAC,sCAAsC;QAC1C,GAAG,CAAC,6BAA6B,CACpC,CAAC,EAAE,CAAA;AAEN,MAAM,CAAC,MAAM,eAAe,GAAW,cAAc,GAAG,aAAa,CAAA"}

package/dist/badge/css-visitor.d.ts

@@ -1,7 +1,11 @@
 /**
  * The visitor half of the badge stylesheet: the feedback bubble, its close x,
  * the feedback panel and its sign-in step. Ships in the badge's main file,
- * after `BADGE_BASE_CSS`.
+ * after `BADGE_BASE_CSS`. Since ui issue 351 it carries the reaction fan's
+ * stylesheet too (`BADGE_FAN_CSS`); the bubble's rules stay until the platform
+ * has moved to the fan.
  */
+/** The visitor's own rules, without the fan. `BADGE_CSS` joins it to the owner's and adds the fan once. */
+export declare const VISITOR_ONLY_CSS: string;
 export declare const BADGE_VISITOR_CSS: string;
 //# sourceMappingURL=css-visitor.d.ts.map

package/dist/badge/css-visitor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"css-visitor.d.ts","sourceRoot":"","sources":["../../src/badge/css-visitor.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAKH,eAAO,MAAM,iBAAiB,EAAE,MAkE1B,CAAA"}
+{"version":3,"file":"css-visitor.d.ts","sourceRoot":"","sources":["../../src/badge/css-visitor.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAMH,2GAA2G;AAC3G,eAAO,MAAM,gBAAgB,EAAE,MAkEzB,CAAA;AAEN,eAAO,MAAM,iBAAiB,EAAE,MAAyC,CAAA"}

package/dist/badge/css-visitor.js

@@ -1,11 +1,15 @@
 /**
  * The visitor half of the badge stylesheet: the feedback bubble, its close x,
  * the feedback panel and its sign-in step. Ships in the badge's main file,
- * after `BADGE_BASE_CSS`.
+ * after `BADGE_BASE_CSS`. Since ui issue 351 it carries the reaction fan's
+ * stylesheet too (`BADGE_FAN_CSS`); the bubble's rules stay until the platform
+ * has moved to the fan.
  */
 import { phoneRules, touchRules } from "./css-base.js";
 import { bubbleLook } from "./css-bubble.js";
-export const BADGE_VISITOR_CSS = /* @__PURE__ */ (() => 
+import { BADGE_FAN_CSS } from "./css-fan.js";
+/** The visitor's own rules, without the fan. `BADGE_CSS` joins it to the owner's and adds the fan once. */
+export const VISITOR_ONLY_CSS = /* @__PURE__ */ (() => 
 // The bubble (ui issue 322, the designer's overlay). It rises in 600ms after it is
 // inserted (`--cgb-start`, which `bubble({ delay })` sets), the three discs
 // follow 80ms apart from the left. Hover spreads the discs from an 8px
@@ -69,4 +73,5 @@ export const BADGE_VISITOR_CSS = /* @__PURE__ */ (() =>
         `${r} .cgb-signin{gap:8px}` +
         `${r} .cgb-method{height:40px}` +
         `${r} .cgb-input{height:38px}`))();
+export const BADGE_VISITOR_CSS = VISITOR_ONLY_CSS + BADGE_FAN_CSS;
 //# sourceMappingURL=css-visitor.js.map

package/dist/badge/css-visitor.js.map

@@ -1 +1 @@
-{"version":3,"file":"css-visitor.js","sourceRoot":"","sources":["../../src/badge/css-visitor.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAE5C,MAAM,CAAC,MAAM,iBAAiB,GAAW,eAAe,CAAC,CAAC,GAAG,EAAE;AAC7D,mFAAmF;AACnF,4EAA4E;AAC5E,uEAAuE;AACvE,0EAA0E;AAC1E,wEAAwE;AACxE,4EAA4E;AAC5E,iCAAiC;AACjC;CACD;IACC,UAAU,CAAC,aAAa,CAAC;IACzB;;;;;;;;;;;2KAWyK;IACzK,+MAA+M;IAC/M;;;;;;;;;sJASoJ;IACpJ;;;;;;;;;;;;;yLAauL;IACvL;;;;;;;CAOD;IACC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,gGAAgG,CAAC;IACvH,IAAI;IACJ,UAAU,CACR,CAAC,CAAC,EAAE,EAAE,CACJ,GAAG,CAAC,8CAA8C;QAClD,GAAG,CAAC,sCAAsC;QAC1C,GAAG,CAAC,iCAAiC;QACrC,GAAG,CAAC,uBAAuB;QAC3B,GAAG,CAAC,2BAA2B;QAC/B,GAAG,CAAC,0BAA0B,CACjC,CAAC,EAAE,CAAA"}
+{"version":3,"file":"css-visitor.js","sourceRoot":"","sources":["../../src/badge/css-visitor.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAE5C,2GAA2G;AAC3G,MAAM,CAAC,MAAM,gBAAgB,GAAW,eAAe,CAAC,CAAC,GAAG,EAAE;AAC5D,mFAAmF;AACnF,4EAA4E;AAC5E,uEAAuE;AACvE,0EAA0E;AAC1E,wEAAwE;AACxE,4EAA4E;AAC5E,iCAAiC;AACjC;CACD;IACC,UAAU,CAAC,aAAa,CAAC;IACzB;;;;;;;;;;;2KAWyK;IACzK,+MAA+M;IAC/M;;;;;;;;;sJASoJ;IACpJ;;;;;;;;;;;;;yLAauL;IACvL;;;;;;;CAOD;IACC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,gGAAgG,CAAC;IACvH,IAAI;IACJ,UAAU,CACR,CAAC,CAAC,EAAE,EAAE,CACJ,GAAG,CAAC,8CAA8C;QAClD,GAAG,CAAC,sCAAsC;QAC1C,GAAG,CAAC,iCAAiC;QACrC,GAAG,CAAC,uBAAuB;QAC3B,GAAG,CAAC,2BAA2B;QAC/B,GAAG,CAAC,0BAA0B,CACjC,CAAC,EAAE,CAAA;AAEN,MAAM,CAAC,MAAM,iBAAiB,GAAW,gBAAgB,GAAG,aAAa,CAAA"}

package/dist/badge/fan-geometry.d.ts

@@ -0,0 +1,27 @@
+/**
+ * The reaction fan's geometry (ui#351), in CSS pixels: one source for the
+ * stylesheet that draws the fan and the hit test that reads a finger on it.
+ */
+/**
+ * The options sit on a quarter circle centred on the icon. A touch screen gets
+ * the larger set: a 44px icon and 48px options, so every target is 44px or more.
+ */
+export declare const FAN_SIZE: {
+    readonly pointer: {
+        readonly icon: 40;
+        readonly option: 40;
+        readonly radius: 98;
+    };
+    readonly touch: {
+        readonly icon: 44;
+        readonly option: 48;
+        readonly radius: 114;
+    };
+};
+/** Each option's direction from the icon, as (cos, sin) of 0, 30, 60 and 90 degrees from the left: up and to the left. */
+export declare const FAN_DIRECTIONS: ReadonlyArray<readonly [number, number]>;
+/** The option under a finger grows to this, and its hit area with it. */
+export declare const FAN_HOT_SCALE = 1.28;
+/** How far past an option's edge a finger still counts as on it. */
+export declare const FAN_HIT_SLOP = 8;
+//# sourceMappingURL=fan-geometry.d.ts.map

package/dist/badge/fan-geometry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fan-geometry.d.ts","sourceRoot":"","sources":["../../src/badge/fan-geometry.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;;GAGG;AACH,eAAO,MAAM,QAAQ;;;;;;;;;;;CAGX,CAAA;AAEV,0HAA0H;AAC1H,eAAO,MAAM,cAAc,EAAE,aAAa,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAKnE,CAAA;AAED,yEAAyE;AACzE,eAAO,MAAM,aAAa,OAAO,CAAA;AAEjC,oEAAoE;AACpE,eAAO,MAAM,YAAY,IAAI,CAAA"}

package/dist/badge/fan-geometry.js

@@ -0,0 +1,24 @@
+/**
+ * The reaction fan's geometry (ui#351), in CSS pixels: one source for the
+ * stylesheet that draws the fan and the hit test that reads a finger on it.
+ */
+/**
+ * The options sit on a quarter circle centred on the icon. A touch screen gets
+ * the larger set: a 44px icon and 48px options, so every target is 44px or more.
+ */
+export const FAN_SIZE = {
+    pointer: { icon: 40, option: 40, radius: 98 },
+    touch: { icon: 44, option: 48, radius: 114 },
+};
+/** Each option's direction from the icon, as (cos, sin) of 0, 30, 60 and 90 degrees from the left: up and to the left. */
+export const FAN_DIRECTIONS = [
+    [1, 0],
+    [0.866, 0.5],
+    [0.5, 0.866],
+    [0, 1],
+];
+/** The option under a finger grows to this, and its hit area with it. */
+export const FAN_HOT_SCALE = 1.28;
+/** How far past an option's edge a finger still counts as on it. */
+export const FAN_HIT_SLOP = 8;
+//# sourceMappingURL=fan-geometry.js.map

package/dist/badge/fan-geometry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fan-geometry.js","sourceRoot":"","sources":["../../src/badge/fan-geometry.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,OAAO,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;IAC7C,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE;CACpC,CAAA;AAEV,0HAA0H;AAC1H,MAAM,CAAC,MAAM,cAAc,GAA6C;IACtE,CAAC,CAAC,EAAE,CAAC,CAAC;IACN,CAAC,KAAK,EAAE,GAAG,CAAC;IACZ,CAAC,GAAG,EAAE,KAAK,CAAC;IACZ,CAAC,CAAC,EAAE,CAAC,CAAC;CACP,CAAA;AAED,yEAAyE;AACzE,MAAM,CAAC,MAAM,aAAa,GAAG,IAAI,CAAA;AAEjC,oEAAoE;AACpE,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,CAAA"}

package/dist/badge/fan.d.ts

@@ -0,0 +1,211 @@
+/**
+ * THE REACTION FAN (ui#351): the visitor's way in, replacing the feedback
+ * bubble. Vlad's design, as Tamir approved it on 2026-10-21 after trying the
+ * prototype on a desktop and an iPhone.
+ *
+ * At rest it is a small drop in the bottom-right corner, round with one sharp
+ * corner at the bottom left, holding the CloudGrid plug. It follows the system
+ * theme: purple with a white plug on a light system, white with a purple plug on
+ * a dark one. Opened, four options fan out up and to the left: Like, Dislike,
+ * Clever idea and Comment. The first three save in one tap; Comment opens the
+ * visitor panel, which is unchanged.
+ *
+ * This module has three parts, in the badge's usual style:
+ *
+ *   markup     `fan()`, an HTML string like `bubble()`; the stylesheet is
+ *              `BADGE_FAN_CSS`, already inside `BADGE_VISITOR_CSS` and
+ *              `BADGE_OWNER_CSS`
+ *   helpers    pure functions and the approved timings, tested in node
+ *   behaviour  `wireFan()`, which attaches the approved hover, touch and
+ *              keyboard behaviour to a rendered fan and reports each choice;
+ *              `wireFanPreview()` does the same for the owner's small copy
+ *
+ * Unlike the panels, the fan's state is not all in its markup: whether it is
+ * open, which option is under a finger and the cue that plays on a press are
+ * moment-to-moment, and live on the element. Render `fan()` once, wire it, and
+ * from then on update it with the handle (`sync`, `chosen`, `setHidden`), never
+ * by re-rendering or morphing it. The pressed state the markup takes is only the
+ * first paint.
+ *
+ * Importing this module does nothing: every DOM call is inside `wireFan()`.
+ */
+import { type ReactionKind } from "./reactions.js";
+export { BADGE_FAN_CSS } from "./css-fan.js";
+/** Desktop: how long the pointer rests on the icon before the fan opens. */
+export declare const FAN_HOVER_OPEN_MS = 120;
+/** Desktop: how long after the pointer leaves the fan before it closes. */
+export declare const FAN_HOVER_CLOSE_MS = 300;
+/**
+ * Touch: after every lift the fan stays open this long, then closes by itself.
+ * A tap inside the window chooses (founder, 2026-10-21; it was 0.5s).
+ */
+export declare const FAN_RELEASE_MS = 1200;
+/** After Like, Dislike or Clever idea is pressed, the fan closes this long after the cue starts. */
+export declare const FAN_CHOICE_CLOSE_MS = 1000;
+/** How long the check shows in a pressed option before its glyph comes back. */
+export declare const FAN_CHECK_MS = 650;
+/** A click this soon after hover opened the fan is the same intent: it keeps the fan open. */
+export declare const FAN_CLICK_AFTER_HOVER_MS = 700;
+/** A click this soon after a touch is the touch's own echo, and is ignored. */
+export declare const FAN_TOUCH_ECHO_MS = 800;
+/** The haptic tick when a finger slides onto an option, where the browser has one. */
+export declare const FAN_VIBRATE_MS = 10;
+export { FAN_DIRECTIONS, FAN_HIT_SLOP, FAN_HOT_SCALE, FAN_SIZE } from "./fan-geometry.js";
+/** What a fan option does: one of the three one-tap reactions, or Comment. */
+export type FanKind = "like" | "dislike" | "idea" | "comment";
+/**
+ * The four options, in order around the fan. The three reactions take the
+ * panel's own names, so the fan and the panel never call one thing two names.
+ */
+export declare const FAN_OPTIONS: ReadonlyArray<{
+    kind: FanKind;
+    label: string;
+    paths: readonly string[];
+}>;
+/** The icon's accessible name, the bubble's: the word "React" is never used. */
+export declare const FAN_LABEL = "Leave feedback on this app";
+/**
+ * The small marks the icon keeps for what this visitor has chosen, in this
+ * order. Rocket and Bug are chosen in the panel only, and still show here.
+ */
+export declare function fanMarkKinds(pressed: readonly ReactionKind[]): ReactionKind[];
+/** The line a screen reader hears after a press: "Like saved", "Like removed". */
+export declare function fanAnnouncement(kind: ReactionKind, on: boolean): string;
+/**
+ * What a press on `kind` does to the pressed set, and which cues play: the
+ * pressed option pops (or shrinks, when it is taken back), and an option the
+ * press cleared (Like and Dislike exclude each other) shrinks too. Comment is
+ * not a reaction and changes nothing here.
+ */
+export declare function fanPress(pressed: readonly ReactionKind[], kind: ReactionKind): {
+    next: ReactionKind[];
+    on: boolean;
+    cleared: ReactionKind[];
+};
+export interface FanHitGeometry {
+    /** The icon's centre, in client pixels. */
+    cx: number;
+    cy: number;
+    /** Half the icon's drawn width. A point on the icon is never an option. */
+    iconHalf: number;
+    /** The radius and option size, unscaled (`FAN_SIZE`). */
+    radius: number;
+    option: number;
+    /** The drawn scale: 1 in the corner, 0.5 in the owner's preview. */
+    scale?: number;
+    /** The option currently under the finger, whose hit area has grown with it. */
+    hot?: number;
+}
+/**
+ * The option under a point, or -1. It tests where each option LANDS, not where
+ * it is mid-spread, so a quick tap on the icon never picks an option that is
+ * still passing under it. A point on the icon is never an option. Of the
+ * options whose square (half the option, grown when hot, plus the slop) holds
+ * the point, the nearest wins.
+ */
+export declare function fanOptionAt(x: number, y: number, g: FanHitGeometry): number;
+/** `auto` follows the system setting; `light` and `dark` pin the icon, for a frozen frame. */
+export type FanTheme = "auto" | "light" | "dark";
+export interface FanOptions {
+    /** The kinds this visitor has already chosen: options drawn pressed, and the marks on the icon. First paint only. */
+    pressed?: readonly ReactionKind[];
+    /** Render it open, for a frozen frame and for the owner's preview. The badge opens it through the handle. */
+    open?: boolean;
+    /** Default `auto`. */
+    theme?: FanTheme;
+    /** The icon's accessible name. Default `FAN_LABEL`. */
+    label?: string;
+    /**
+     * When the arrival starts, in ms after insertion. Default 600, after the
+     * live badge's, as the bubble's was. `0` for a re-show.
+     */
+    delay?: number;
+    /**
+     * The owner's small working copy in the "Ask visitors for feedback"
+     * explanation: no tab stops, no arrival, no status line, never the touch
+     * sizes. It sits inside a decorative (`aria-hidden`) tile.
+     */
+    preview?: boolean;
+}
+/** One mark on the icon. `fresh` pops in; the first paint's marks are at rest. */
+export declare function fanMark(kind: ReactionKind, fresh?: boolean): string;
+/**
+ * The fan: the drop icon, its marks, and the four options. Closed and at rest
+ * unless `open`. Every option is a button with its name and tooltip; the three
+ * reactions carry `aria-pressed`, Comment `aria-haspopup="dialog"`. The options
+ * are `inert` while the fan is closed.
+ *
+ * No `data-action` anywhere: `wireFan()` handles every press itself and reports
+ * the choice, so a delegated `[data-action]` listener never sees the fan.
+ */
+export declare function fan({ pressed, open, theme, label: name, delay, preview }?: FanOptions): string;
+export interface WireFanOptions {
+    /**
+     * A press on an option. Like, Dislike and Clever idea: save the reaction, then
+     * call `handle.chosen(before, after, kind)` for the cue. Comment: close the
+     * fan and open the visitor panel. On an app that needs sign-in, close the fan
+     * and open the sign-in step instead.
+     */
+    onChoose: (kind: FanKind, handle: FanHandle) => void;
+    /**
+     * Use the touch sizes from the start. Default: on where the primary pointer
+     * is coarse or there is no hover. The first touch turns them on regardless.
+     */
+    touch?: boolean;
+    /** Close on a press anywhere outside the fan, and on Escape. Default true; the owner's preview turns it off. */
+    dismissable?: boolean;
+}
+export interface FanHandle {
+    /** The `.cgf` element. */
+    readonly el: HTMLElement;
+    readonly isOpen: boolean;
+    open(): void;
+    close(): void;
+    toggle(): void;
+    /** The pressed state, without a cue: `aria-pressed` on the options and the marks on the icon. Marks already shown are kept, never popped again. */
+    sync(pressed: readonly ReactionKind[]): void;
+    /**
+     * After a press on a reaction: sync to `after`, pop the pressed option (or
+     * shrink it, when it was taken back) with a check, shrink any option the
+     * press cleared, announce it, and close `FAN_CHOICE_CLOSE_MS` later.
+     */
+    chosen(before: readonly ReactionKind[], after: readonly ReactionKind[], kind: ReactionKind): void;
+    /** Play one option's cue: `on` pops it (with the check unless `check` is false), otherwise it shrinks. */
+    cue(kind: FanKind | ReactionKind, on: boolean, check?: boolean): void;
+    /** Close `FAN_CHOICE_CLOSE_MS` from now, as after a choice. The pointer leaving does not cut it short. */
+    closeAfterCue(): void;
+    /** Hide it while a panel is open; showing it again replays the arrival at once. */
+    setHidden(hidden: boolean): void;
+    /** Focus the icon without opening the fan, as after a panel closes. */
+    focusIcon(): void;
+    /** Remove every listener and timer. */
+    destroy(): void;
+}
+/**
+ * Attach the approved behaviour to a fan rendered by `fan()`.
+ *
+ *   desktop    hover opens it after `FAN_HOVER_OPEN_MS`, leaving closes it
+ *              after `FAN_HOVER_CLOSE_MS`; a quick pass never opens it. A click
+ *              on the icon toggles (but not one right after hover opened it).
+ *              Closed while the pointer is still over it (after a choice, a
+ *              click, Escape), it reopens only once the pointer has left.
+ *   keyboard   focus on the icon opens it, Tab walks the options, Escape closes
+ *              it, and focus leaving the fan closes it.
+ *   touch      a press opens it; slide onto an option (it grows, and the phone
+ *              ticks) and lift to choose. After every lift it stays open for
+ *              `FAN_RELEASE_MS`, then closes; a tap inside that window chooses.
+ *              A tap on the icon while it is open closes it.
+ *
+ * The page never scrolls under a finger on the fan: the icon and the options
+ * take no touch gestures.
+ */
+export declare function wireFan(el: HTMLElement, { onChoose, touch, dismissable }: WireFanOptions): FanHandle;
+/**
+ * Wire the owner's small copy of the fan, in the "Ask visitors for feedback"
+ * explanation, so the owner can try exactly what visitors get. Choices are kept
+ * in the preview only and saved nowhere; Comment plays its pop and nothing
+ * opens. Call it after each render that shows the explanation, on
+ * `.cgb-info .cgf`, and `destroy()` the handle when the explanation closes.
+ */
+export declare function wireFanPreview(el: HTMLElement): FanHandle;
+//# sourceMappingURL=fan.d.ts.map