@cloudgrid-io/ui 0.35.0 → 0.37.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,MAwLvB,CAAA;AAEN,eAAO,MAAM,eAAe,EAAE,MAAuC,CAAA"}

package/dist/badge/css-owner.js

@@ -2,16 +2,25 @@
  * 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
 // phone (414.1); a step longer than that scrolls inside the panel, and the
 // panel never grows. The visitor's panels keep their own heights.
-`.cgb-panel[data-step]{height:min(506px,calc(100% - 32px))}
+//
+// Every row is its content's height (grid-auto-rows:max-content). Without
+// it, a step that ran long did not scroll: the panel's grid shrank the
+// access buttons' row instead, and the Selected spaces checklist or the
+// switch's error line cut Private, Grid and Public to half height and
+// overlapped the row under them (ui issue 354).
+`.cgb-panel[data-step]{height:min(506px,calc(100% - 32px));grid-auto-rows:max-content}
 .cgb-tab{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:8px;height:56px;max-width:46px;padding:0 10px 0 12px;` +
     `overflow:hidden;white-space:nowrap;background:var(--cg-surface-card);color:var(--cg-text-primary);border:1px solid var(--cg-border-hairline);border-right:0;` +
     `border-radius:var(--cg-radius-lg) 0 0 var(--cg-radius-lg);box-shadow:var(--cg-shadow-card),var(--cg-shadow-hover);cursor:grab;touch-action:none;user-select:none;` +
@@ -56,6 +65,8 @@ export const BADGE_OWNER_CSS = /* @__PURE__ */ (() =>
 .cgb-ask{position:relative;justify-content:flex-start;gap:2px;line-height:1.46}
 .cgb-ask label{cursor:pointer}
 .cgb-ask .cgb-switch{margin-left:auto}
+.cgb-ask[data-error]{flex-wrap:wrap;row-gap:2px}
+.cgb-ask-err{flex-basis:100%;font-size:var(--cg-caption);font-weight:var(--cg-weight-regular);line-height:1.3;color:var(--cg-expired-strong)}
 ` +
     // The explanation's min-height reaches the middle of the gap under the name
     // row: from the switch row's top, the hairline (1) + the Feedback row (57.1:
@@ -70,16 +81,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)}
@@ -136,8 +145,15 @@ export const BADGE_OWNER_CSS = /* @__PURE__ */ (() =>
 .cgb-wt{font-size:var(--cg-body-14);font-weight:var(--cg-weight-bold);line-height:1.4}
 .cgb-wt b{color:var(--cg-text-accent);font-weight:inherit}
 .cgb-wd{margin-top:2px;font-size:var(--cg-caption);color:var(--cg-text-secondary)}
-.cgb-prompt{position:relative;padding:12px 48px 12px 14px;border:1px solid var(--cg-border-control);border-radius:var(--cg-radius-sm);background:var(--cg-hover)}
-.cgb-prompt pre{margin:0;font-family:var(--cg-font-mono);font-size:var(--cg-caption);line-height:1.5;color:var(--cg-text-secondary);white-space:pre-wrap;overflow-wrap:anywhere}
+` +
+    // The Edit step's prompt (ui issue 357, founder 2026-10-22): six lines tall, never
+    // the whole text, and it never scrolls (overflow:clip, not a scroll
+    // container), so neither it nor the panel scrolls for it. The last lines fade
+    // out through a mask: currentColor is opaque, so only the gradient's alpha
+    // counts. The copy control copies the whole prompt (`promptCopyText`).
+    `.cgb-prompt{position:relative;padding:12px 48px 12px 14px;border:1px solid var(--cg-border-control);border-radius:var(--cg-radius-sm);background:var(--cg-hover)}
+.cgb-prompt pre{height:9em;margin:0;overflow:hidden;overflow:clip;font-family:var(--cg-font-mono);font-size:var(--cg-caption);line-height:1.5;color:var(--cg-text-secondary);white-space:pre-wrap;overflow-wrap:anywhere;` +
+    `-webkit-mask-image:linear-gradient(currentColor calc(100% - 2em),transparent);mask-image:linear-gradient(currentColor calc(100% - 2em),transparent)}
 .cgb-prompt pre b{font-weight:var(--cg-weight-medium);color:var(--cg-text-accent)}
 .cgb-prompt pre i{font-style:normal;color:var(--cg-text-muted)}
 .cgb-prompt-copy{position:absolute;top:10px;right:10px;width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--cg-border-control);border-radius:var(--cg-radius-sm);` +
@@ -164,6 +180,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 +190,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,EAAE;AACF,0EAA0E;AAC1E,uEAAuE;AACvE,wEAAwE;AACxE,sEAAsE;AACtE,gDAAgD;AAChD;gKAC8J;IAC9J,8JAA8J;IAC9J,mKAAmK;IACnK;;;;;;;;;;;;;qKAamK;IACnK,oOAAoO;IACpO;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BD;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;;;;;;;;;;;;;;;CAeD;IACC,mFAAmF;IACnF,oEAAoE;IACpE,8EAA8E;IAC9E,2EAA2E;IAC3E,uEAAuE;IACvE;0NACwN;IACxN;;;2LAGyL;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"}