@cloudgrid-io/ui 0.43.1 → 0.45.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/badge/css-live.d.ts +9 -5
- package/dist/badge/css-live.d.ts.map +1 -1
- package/dist/badge/css-live.js +12 -8
- package/dist/badge/css-live.js.map +1 -1
- package/dist/badge/css-watermark.d.ts +39 -0
- package/dist/badge/css-watermark.d.ts.map +1 -0
- package/dist/badge/css-watermark.js +153 -0
- package/dist/badge/css-watermark.js.map +1 -0
- package/dist/badge/live.d.ts +9 -1
- package/dist/badge/live.d.ts.map +1 -1
- package/dist/badge/live.js +4 -3
- package/dist/badge/live.js.map +1 -1
- package/dist/badge/marks.d.ts +8 -0
- package/dist/badge/marks.d.ts.map +1 -1
- package/dist/badge/marks.js +20 -0
- package/dist/badge/marks.js.map +1 -1
- package/dist/badge/onboard-marks.d.ts +8 -0
- package/dist/badge/onboard-marks.d.ts.map +1 -0
- package/dist/badge/onboard-marks.js +15 -0
- package/dist/badge/onboard-marks.js.map +1 -0
- package/dist/badge/onboard-widget.d.ts +86 -0
- package/dist/badge/onboard-widget.d.ts.map +1 -0
- package/dist/badge/onboard-widget.js +105 -0
- package/dist/badge/onboard-widget.js.map +1 -0
- package/dist/badge/palette.d.ts +8 -1
- package/dist/badge/palette.d.ts.map +1 -1
- package/dist/badge/palette.js +17 -1
- package/dist/badge/palette.js.map +1 -1
- package/dist/badge/watermark.d.ts +152 -0
- package/dist/badge/watermark.d.ts.map +1 -0
- package/dist/badge/watermark.js +215 -0
- package/dist/badge/watermark.js.map +1 -0
- package/dist/blocks/icons.d.ts +19 -1
- package/dist/blocks/icons.d.ts.map +1 -1
- package/dist/blocks/icons.js +19 -1
- package/dist/blocks/icons.js.map +1 -1
- package/dist/blocks/onboard-widget-content.d.ts +227 -0
- package/dist/blocks/onboard-widget-content.d.ts.map +1 -0
- package/dist/blocks/onboard-widget-content.js +237 -0
- package/dist/blocks/onboard-widget-content.js.map +1 -0
- package/dist/blocks/onboard-widget.d.ts +92 -0
- package/dist/blocks/onboard-widget.d.ts.map +1 -0
- package/dist/blocks/onboard-widget.js +92 -0
- package/dist/blocks/onboard-widget.js.map +1 -0
- package/dist/blocks/phosphor-marks.d.ts +12 -0
- package/dist/blocks/phosphor-marks.d.ts.map +1 -1
- package/dist/blocks/phosphor-marks.js +18 -0
- package/dist/blocks/phosphor-marks.js.map +1 -1
- package/dist/blocks/request-card.d.ts +117 -0
- package/dist/blocks/request-card.d.ts.map +1 -0
- package/dist/blocks/request-card.js +99 -0
- package/dist/blocks/request-card.js.map +1 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +3 -0
- package/dist/index.js.map +1 -1
- package/dist/lib/cloudgrid-cn.d.ts +1 -1
- package/dist/lib/cloudgrid-cn.d.ts.map +1 -1
- package/dist/lib/cloudgrid-cn.js +2 -0
- package/dist/lib/cloudgrid-cn.js.map +1 -1
- package/dist/theme.css +5 -0
- package/dist/tokens/base.json +20 -0
- package/dist/tokens.css +17 -0
- package/dist/tokens.json +2 -0
- package/package.json +9 -1
package/dist/badge/css-live.d.ts
CHANGED
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* The live badge's stylesheet (ui issue 322), after `BADGE_BASE_CSS`.
|
|
3
3
|
*
|
|
4
|
-
* The design's sizes: a 28px pill,
|
|
5
|
-
* after the sign with 8px after it (12px to the pill's
|
|
6
|
-
*
|
|
4
|
+
* The design's sizes: a 28px pill, a 20px sign 4px from the start, top and
|
|
5
|
+
* bottom, the label 4px after the sign with 8px after it (12px to the pill's
|
|
6
|
+
* end). Figma 11918:113735 (ui issue 409) adds a 1px N1 border and Elevation 1
|
|
7
|
+
* and sets the label at 15px regular in the UI face. The border sits inside the
|
|
8
|
+
* 28px (the root is border-box), so the pill's padding is 3px: 1px of border and
|
|
9
|
+
* 3px of padding keep the sign 4px from every edge.
|
|
7
10
|
*
|
|
8
11
|
* The sign is ONE white box under three mask layers: the plug glyph, a cover
|
|
9
12
|
* and a disc. The mask is glyph + (cover x disc). The cover is twice the box's
|
|
@@ -21,8 +24,9 @@
|
|
|
21
24
|
* after. Hover swells the sign to 108%; the pill itself stays still.
|
|
22
25
|
*
|
|
23
26
|
* The label's line is the sign's 20px, not 1: the clip that lets the pill open
|
|
24
|
-
* cuts at the line box, and a
|
|
25
|
-
* At 20px the face's whole height, ascent to descent, sits
|
|
27
|
+
* cuts at the line box, and a line as tall as the type cut the bottom of the g
|
|
28
|
+
* (ui issue 324). At 20px the 15px face's whole height, ascent to descent, sits
|
|
29
|
+
* inside it.
|
|
26
30
|
*
|
|
27
31
|
* The wrap places the badge and holds the close x, the base stylesheet's
|
|
28
32
|
* `.cgb-x`, 2px above the pill's right end (ui issue 324). On a touch screen,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"css-live.d.ts","sourceRoot":"","sources":["../../src/badge/css-live.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"css-live.d.ts","sourceRoot":"","sources":["../../src/badge/css-live.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAoBH,eAAO,MAAM,cAAc,EAAE,MAgCpB,CAAA"}
|
package/dist/badge/css-live.js
CHANGED
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* The live badge's stylesheet (ui issue 322), after `BADGE_BASE_CSS`.
|
|
3
3
|
*
|
|
4
|
-
* The design's sizes: a 28px pill,
|
|
5
|
-
* after the sign with 8px after it (12px to the pill's
|
|
6
|
-
*
|
|
4
|
+
* The design's sizes: a 28px pill, a 20px sign 4px from the start, top and
|
|
5
|
+
* bottom, the label 4px after the sign with 8px after it (12px to the pill's
|
|
6
|
+
* end). Figma 11918:113735 (ui issue 409) adds a 1px N1 border and Elevation 1
|
|
7
|
+
* and sets the label at 15px regular in the UI face. The border sits inside the
|
|
8
|
+
* 28px (the root is border-box), so the pill's padding is 3px: 1px of border and
|
|
9
|
+
* 3px of padding keep the sign 4px from every edge.
|
|
7
10
|
*
|
|
8
11
|
* The sign is ONE white box under three mask layers: the plug glyph, a cover
|
|
9
12
|
* and a disc. The mask is glyph + (cover x disc). The cover is twice the box's
|
|
@@ -21,8 +24,9 @@
|
|
|
21
24
|
* after. Hover swells the sign to 108%; the pill itself stays still.
|
|
22
25
|
*
|
|
23
26
|
* The label's line is the sign's 20px, not 1: the clip that lets the pill open
|
|
24
|
-
* cuts at the line box, and a
|
|
25
|
-
* At 20px the face's whole height, ascent to descent, sits
|
|
27
|
+
* cuts at the line box, and a line as tall as the type cut the bottom of the g
|
|
28
|
+
* (ui issue 324). At 20px the 15px face's whole height, ascent to descent, sits
|
|
29
|
+
* inside it.
|
|
26
30
|
*
|
|
27
31
|
* The wrap places the badge and holds the close x, the base stylesheet's
|
|
28
32
|
* `.cgb-x`, 2px above the pill's right end (ui issue 324). On a touch screen,
|
|
@@ -41,8 +45,8 @@ const GLYPH_MASK = 'url("data:image/svg+xml,' +
|
|
|
41
45
|
// A mask reads only alpha, so any opaque token draws "keep"; the ink is one.
|
|
42
46
|
const MASK = `${GLYPH_MASK},linear-gradient(var(--cg-text-primary) 50%,transparent 50%),radial-gradient(circle at 10.04px 10.1px,var(--cg-text-primary) 9.25px,transparent 9.75px)`;
|
|
43
47
|
export const BADGE_LIVE_CSS = /* @__PURE__ */ (() => `.cgb-live-wrap{--cgb-t0:var(--cgb-start,300ms);position:absolute;left:calc(12px + env(safe-area-inset-left,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));padding-top:22px}
|
|
44
|
-
.cgb-live{position:relative;display:flex;align-items:center;width:max-content;height:28px;padding:
|
|
45
|
-
`text-decoration:none;box-shadow:var(--cg-shadow-
|
|
48
|
+
.cgb-live{position:relative;display:flex;align-items:center;width:max-content;height:28px;padding:3px;border:1px solid var(--cg-neutral-25);border-radius:var(--cg-radius-pill);background:var(--cg-primary);color:var(--cg-text-on-primary);` +
|
|
49
|
+
`text-decoration:none;box-shadow:var(--cg-shadow-float);cursor:pointer;animation:cgb-rise 500ms var(--cg-ease-out-expo) var(--cgb-t0) both}
|
|
46
50
|
.cgb-live:focus-visible{outline:2px solid var(--cg-primary);outline-offset:2px}
|
|
47
51
|
.cgb-live-icon{flex:none;width:20px;height:20px;background:var(--cg-text-on-primary);` +
|
|
48
52
|
`-webkit-mask-image:${MASK};mask-image:${MASK};-webkit-mask-size:20px 20px,20px 40px,20px 20px;mask-size:20px 20px,20px 40px,20px 20px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;` +
|
|
@@ -54,7 +58,7 @@ export const BADGE_LIVE_CSS = /* @__PURE__ */ (() => `.cgb-live-wrap{--cgb-t0:va
|
|
|
54
58
|
.cgb-live:active .cgb-live-icon{transform:scale(.94);transition-duration:var(--cg-duration-fast)}
|
|
55
59
|
.cgb-live-label{display:grid;grid-template-columns:1fr;animation:cgb-grow 560ms var(--cg-ease-out-quint) calc(var(--cgb-t0) + 500ms) both}
|
|
56
60
|
.cgb-live-clip{min-width:0;overflow:hidden}
|
|
57
|
-
.cgb-live-text{display:block;padding:0 8px 0 4px;white-space:nowrap;font-family:var(--cg-font-ui);font-size:var(--cg-
|
|
61
|
+
.cgb-live-text{display:block;padding:0 8px 0 4px;white-space:nowrap;font-family:var(--cg-font-ui);font-size:var(--cg-body-sm);font-weight:var(--cg-weight-regular);line-height:20px;` +
|
|
58
62
|
`letter-spacing:0;animation:cgb-label 440ms var(--cg-ease-out-expo) calc(var(--cgb-t0) + 580ms) both}
|
|
59
63
|
@keyframes cgb-plug{from{-webkit-mask-position:0 0,0 0,0 0;mask-position:0 0,0 0,0 0}}
|
|
60
64
|
@keyframes cgb-swell{from{scale:.7}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"css-live.js","sourceRoot":"","sources":["../../src/badge/css-live.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"css-live.js","sourceRoot":"","sources":["../../src/badge/css-live.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;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;8OAC4O;IAC5O;;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"}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The watermark overlay's stylesheet (ui#422), after `BADGE_BASE_CSS`.
|
|
3
|
+
*
|
|
4
|
+
* Figma 11918:113662, 11983:5627, 11983:16368 (CloudGrid 2026, "UI - Overlay
|
|
5
|
+
* Watermark"):
|
|
6
|
+
*
|
|
7
|
+
* scrim the whole viewport, `--cg-scrim` (Figma's #2E1EAC at 46%) under a
|
|
8
|
+
* 13.6px background blur, which is `blur(6.8px)` in CSS
|
|
9
|
+
* card 630 wide (never wider than the frame less 16 a side), padding 40,
|
|
10
|
+
* 32 between blocks, white, a 1px N1 border, radius 16, the panel
|
|
11
|
+
* shadow; scrolls inside past the frame less 32
|
|
12
|
+
* header "You are viewing" Manrope 15/1.46; the name Tanker 46/1.2 in
|
|
13
|
+
* Primary, centred (two lines, then an ellipsis); the grid line 15
|
|
14
|
+
* with the grid name semibold, 16 above the body line
|
|
15
|
+
* panel N1 New ground, radius 16, padding 20/32, 8 between: the Tertiary
|
|
16
|
+
* button (462 wide, 48 tall, radius 16, Manrope bold 15 ink), "OR"
|
|
17
|
+
* 13 in N3, the widget, and "Learn how"
|
|
18
|
+
* examples "Example Apps" Tanker 22 in Primary; tiles 211 wide, 20 apart, a
|
|
19
|
+
* 159/92 picture at radius 11, the name Manrope medium 15 on one
|
|
20
|
+
* line, the 20px kind chip; the row scrolls sideways and bleeds to
|
|
21
|
+
* the card's edge, as the frame clips its third tile
|
|
22
|
+
*
|
|
23
|
+
* Not in Figma, chosen to fit the frames (each listed for Vlad on the PR):
|
|
24
|
+
*
|
|
25
|
+
* "Learn how" is `--cg-link`, the library's link (4.70:1 on the panel), not
|
|
26
|
+
* Tertiary Dark (#45CDD4, 1.70:1 there).
|
|
27
|
+
* The sign-in line is 13px secondary text, 12 under the panel.
|
|
28
|
+
* Loading is the frame with shimmer bars at the final layout's heights.
|
|
29
|
+
* Phone (480px and below, the badge's rule) is the badge's bottom sheet:
|
|
30
|
+
* full width, top corners 16, 88% tall at most, padding 32/16/24 plus the
|
|
31
|
+
* safe area, 24 between blocks, the name at 36, tiles 168 wide, and the
|
|
32
|
+
* widget's logos on their own centred row above the label (ui#423's rule,
|
|
33
|
+
* mirrored), so nothing scrolls sideways.
|
|
34
|
+
*
|
|
35
|
+
* The overlay's own tokens (the display face, the link, N3 and the kind grounds)
|
|
36
|
+
* are declared on `.cgb-wm`, so no other badge bundle carries them.
|
|
37
|
+
*/
|
|
38
|
+
export declare const BADGE_WATERMARK_CSS: string;
|
|
39
|
+
//# sourceMappingURL=css-watermark.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"css-watermark.d.ts","sourceRoot":"","sources":["../../src/badge/css-watermark.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AA+CH,eAAO,MAAM,mBAAmB,EAAE,MA6EzB,CAAA"}
|
|
@@ -0,0 +1,153 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The watermark overlay's stylesheet (ui#422), after `BADGE_BASE_CSS`.
|
|
3
|
+
*
|
|
4
|
+
* Figma 11918:113662, 11983:5627, 11983:16368 (CloudGrid 2026, "UI - Overlay
|
|
5
|
+
* Watermark"):
|
|
6
|
+
*
|
|
7
|
+
* scrim the whole viewport, `--cg-scrim` (Figma's #2E1EAC at 46%) under a
|
|
8
|
+
* 13.6px background blur, which is `blur(6.8px)` in CSS
|
|
9
|
+
* card 630 wide (never wider than the frame less 16 a side), padding 40,
|
|
10
|
+
* 32 between blocks, white, a 1px N1 border, radius 16, the panel
|
|
11
|
+
* shadow; scrolls inside past the frame less 32
|
|
12
|
+
* header "You are viewing" Manrope 15/1.46; the name Tanker 46/1.2 in
|
|
13
|
+
* Primary, centred (two lines, then an ellipsis); the grid line 15
|
|
14
|
+
* with the grid name semibold, 16 above the body line
|
|
15
|
+
* panel N1 New ground, radius 16, padding 20/32, 8 between: the Tertiary
|
|
16
|
+
* button (462 wide, 48 tall, radius 16, Manrope bold 15 ink), "OR"
|
|
17
|
+
* 13 in N3, the widget, and "Learn how"
|
|
18
|
+
* examples "Example Apps" Tanker 22 in Primary; tiles 211 wide, 20 apart, a
|
|
19
|
+
* 159/92 picture at radius 11, the name Manrope medium 15 on one
|
|
20
|
+
* line, the 20px kind chip; the row scrolls sideways and bleeds to
|
|
21
|
+
* the card's edge, as the frame clips its third tile
|
|
22
|
+
*
|
|
23
|
+
* Not in Figma, chosen to fit the frames (each listed for Vlad on the PR):
|
|
24
|
+
*
|
|
25
|
+
* "Learn how" is `--cg-link`, the library's link (4.70:1 on the panel), not
|
|
26
|
+
* Tertiary Dark (#45CDD4, 1.70:1 there).
|
|
27
|
+
* The sign-in line is 13px secondary text, 12 under the panel.
|
|
28
|
+
* Loading is the frame with shimmer bars at the final layout's heights.
|
|
29
|
+
* Phone (480px and below, the badge's rule) is the badge's bottom sheet:
|
|
30
|
+
* full width, top corners 16, 88% tall at most, padding 32/16/24 plus the
|
|
31
|
+
* safe area, 24 between blocks, the name at 36, tiles 168 wide, and the
|
|
32
|
+
* widget's logos on their own centred row above the label (ui#423's rule,
|
|
33
|
+
* mirrored), so nothing scrolls sideways.
|
|
34
|
+
*
|
|
35
|
+
* The overlay's own tokens (the display face, the link, N3 and the kind grounds)
|
|
36
|
+
* are declared on `.cgb-wm`, so no other badge bundle carries them.
|
|
37
|
+
*/
|
|
38
|
+
import { ONBOARD_WIDGET_TIMING } from "../blocks/onboard-widget-content.js";
|
|
39
|
+
import { phoneRules } from "./css-base.js";
|
|
40
|
+
import { BADGE_WATERMARK_TOKEN_DECLARATIONS } from "./palette.js";
|
|
41
|
+
const T = ONBOARD_WIDGET_TIMING;
|
|
42
|
+
/** The onboard widget twin (#419's look), inside the overlay. */
|
|
43
|
+
const WIDGET = `.cgb-ow-wrap{position:relative;display:inline-flex;max-width:100%}
|
|
44
|
+
.cgb-ow{--cgb-ow-wash:color-mix(in srgb,var(--cg-primary) 20%,var(--cg-surface-card));position:relative;display:inline-flex;align-items:center;justify-content:center;max-width:100%;height:48px;padding:0 16px;` +
|
|
45
|
+
`border:1px solid var(--cg-border-hairline);border-radius:var(--cg-radius-xl);background:var(--cg-surface-card);color:var(--cg-text-primary);` +
|
|
46
|
+
`font-family:var(--cg-font-ui);font-size:var(--cg-body-sm);font-weight:var(--cg-weight-regular);line-height:var(--cg-body-line);white-space:nowrap;text-align:center;` +
|
|
47
|
+
`transition:background-color 150ms,border-color 150ms}
|
|
48
|
+
.cgb-ow[data-block]{display:flex;width:100%}
|
|
49
|
+
.cgb-ow-default{display:inline-flex;align-items:center;gap:20px;min-width:0;transition:opacity var(--cg-duration) var(--cg-ease-out)}
|
|
50
|
+
.cgb-ow:not([data-face=idle]) .cgb-ow-default{opacity:0}
|
|
51
|
+
.cgb-ow-logos{display:inline-flex;gap:16px;flex:none}
|
|
52
|
+
.cgb-ow-slot{position:relative;width:20px;height:20px;flex:none}
|
|
53
|
+
.cgb-ow-mark{position:absolute;inset:0;display:flex;transition:opacity ${T.fadeMs}ms ease-in-out}
|
|
54
|
+
.cgb-ow-mark svg,.cgb-ow-icon svg{width:20px;height:20px}
|
|
55
|
+
.cgb-ow-slot[data-set=a] [data-face-set=b]{opacity:0}
|
|
56
|
+
.cgb-ow-slot[data-set=b] [data-face-set=a]{opacity:0}
|
|
57
|
+
.cgb-ow-icon{position:relative;width:20px;height:20px;flex:none}
|
|
58
|
+
.cgb-ow-icon svg{position:absolute;inset:0;transition:opacity 150ms}
|
|
59
|
+
.cgb-ow-copy{color:var(--cg-slate-500)}
|
|
60
|
+
.cgb-ow-copy-fill{color:var(--cg-primary);opacity:0}
|
|
61
|
+
.cgb-ow[data-hover][data-face=idle]{background:var(--cgb-ow-wash);border-color:var(--cgb-ow-wash)}
|
|
62
|
+
.cgb-ow[data-hover][data-face=idle] .cgb-ow-copy{opacity:0}
|
|
63
|
+
.cgb-ow[data-hover][data-face=idle] .cgb-ow-copy-fill{opacity:1}
|
|
64
|
+
@media (hover:hover){.cgb-ow[data-face=idle]:hover{background:var(--cgb-ow-wash);border-color:var(--cgb-ow-wash)}` +
|
|
65
|
+
`.cgb-ow[data-face=idle]:hover .cgb-ow-copy{opacity:0}.cgb-ow[data-face=idle]:hover .cgb-ow-copy-fill{opacity:1}` +
|
|
66
|
+
`.cgb-ow-wrap:hover .cgb-ow-tip{opacity:1;visibility:visible;transition-delay:${T.tipDelayMs}ms}}
|
|
67
|
+
.cgb-ow-result{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 16px;overflow:hidden;opacity:0;pointer-events:none;transition:opacity var(--cg-duration) var(--cg-ease-out)}
|
|
68
|
+
.cgb-ow:not([data-face=idle]) .cgb-ow-result{opacity:1}
|
|
69
|
+
.cgb-ow-check{display:grid;place-items:center;width:20px;height:20px;flex:none;border-radius:50%;background:var(--cg-online);color:var(--cg-text-on-primary)}
|
|
70
|
+
.cgb-ow-check svg{width:12px;height:12px}
|
|
71
|
+
.cgb-ow-tip{position:absolute;bottom:calc(100% + 8px);left:50%;z-index:3;width:max-content;max-width:min(384px,calc(100vw - 32px));padding:8px 16px;border-radius:var(--cg-radius-xs);` +
|
|
72
|
+
`background:var(--cg-text-primary);color:var(--cg-text-on-primary);font-family:var(--cg-font-ui);font-size:var(--cg-caption);line-height:var(--cg-body-line);white-space:normal;text-align:center;` +
|
|
73
|
+
`translate:-50% 0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 150ms,visibility 150ms}
|
|
74
|
+
.cgb-ow:focus-visible+.cgb-ow-tip,.cgb-ow[data-hover]+.cgb-ow-tip,.cgb-ow[data-face=blocked]+.cgb-ow-tip{opacity:1;visibility:visible}
|
|
75
|
+
.cgb-ow[data-face=blocked]+.cgb-ow-tip{pointer-events:auto}
|
|
76
|
+
.cgb-ow-tip-line{display:block}
|
|
77
|
+
.cgb-ow-prompt{display:block;margin-top:4px;font-family:var(--cg-font-mono);font-size:var(--cg-caption);overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}
|
|
78
|
+
`;
|
|
79
|
+
export const BADGE_WATERMARK_CSS = /* @__PURE__ */ (() => `.cgb-wm{${BADGE_WATERMARK_TOKEN_DECLARATIONS}position:absolute;inset:0;display:grid;place-items:center;font-family:var(--cg-font-ui);font-size:var(--cg-body-sm);line-height:var(--cg-body-line)}
|
|
80
|
+
.cgb-wm-scrim{position:absolute;inset:0;background:var(--cg-scrim);-webkit-backdrop-filter:blur(6.8px);backdrop-filter:blur(6.8px);animation:cgb-in var(--cg-duration-slow) var(--cg-ease-out)}
|
|
81
|
+
.cgb-wm-card{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:32px;width:min(630px,calc(100% - 32px));max-height:calc(100% - 32px);overflow:auto;padding:40px;` +
|
|
82
|
+
`background:var(--cg-surface-card);color:var(--cg-text-primary);border:1px solid var(--cg-border-control);border-radius:var(--cg-radius-xl);box-shadow:var(--cg-shadow-panel);` +
|
|
83
|
+
`text-align:center;overscroll-behavior:contain;animation:cgb-wm-rise var(--cg-duration-slow) var(--cg-ease-out-expo)}
|
|
84
|
+
@keyframes cgb-wm-rise{from{opacity:0;translate:0 16px}}
|
|
85
|
+
.cgb-wm-x{position:absolute;top:12px;right:20px;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--cg-radius-pill);color:var(--cg-text-muted-strong);transition:color var(--cg-duration) var(--cg-ease-out)}
|
|
86
|
+
.cgb-wm-x:hover{color:var(--cg-text-primary)}
|
|
87
|
+
.cgb-wm-x svg{width:20px;height:20px}
|
|
88
|
+
.cgb-wm-head{display:flex;flex-direction:column;align-items:center}
|
|
89
|
+
.cgb-wm-eyebrow{font-size:var(--cg-body-sm)}
|
|
90
|
+
.cgb-wm-name{display:-webkit-box;max-width:100%;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-wrap:anywhere;` +
|
|
91
|
+
`font-family:var(--cg-font-display);font-size:46px;font-weight:var(--cg-weight-regular);line-height:1.2;color:var(--cg-primary)}
|
|
92
|
+
.cgb-wm-grid b{font-weight:var(--cg-weight-bold)}
|
|
93
|
+
.cgb-wm-grid+.cgb-wm-body,.cgb-wm-head+[data-shape=line]{margin-top:-16px}
|
|
94
|
+
.cgb-wm-panel{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 32px;border-radius:var(--cg-radius-xl);background:var(--cg-neutral-25)}
|
|
95
|
+
.cgb-wm-actions{display:flex;flex-direction:column;align-items:center;gap:8px}
|
|
96
|
+
.cgb .cgb-wm-btn{display:flex;align-items:center;justify-content:center;width:100%;max-width:462px;min-height:48px;padding:14px 32px;border:1px solid transparent;border-radius:var(--cg-radius-xl);` +
|
|
97
|
+
`background:var(--cg-tertiary);color:var(--cg-text-on-accent);font-family:var(--cg-font-ui);font-size:var(--cg-body-sm);font-weight:var(--cg-weight-bold);line-height:1;text-align:center;text-decoration:none;cursor:pointer;` +
|
|
98
|
+
`transition:background-color var(--cg-duration) var(--cg-ease-out),border-color var(--cg-duration) var(--cg-ease-out)}
|
|
99
|
+
.cgb .cgb-wm-btn:hover{background:var(--cg-tertiary-press)}
|
|
100
|
+
.cgb .cgb-wm-btn[data-variant=secondary]{background:var(--cg-cyan-200);border:1px solid var(--cg-tertiary)}
|
|
101
|
+
.cgb .cgb-wm-btn[data-variant=secondary]:hover{border-color:var(--cg-tertiary-press)}
|
|
102
|
+
.cgb-wm-field{width:100%;max-width:462px;height:40px;margin:-24px auto 0;padding:0 12px;border:1px solid var(--cg-border-control);border-radius:var(--cg-radius-md);` +
|
|
103
|
+
`background:var(--cg-surface-card);color:var(--cg-text-primary);font-family:var(--cg-font-mono);font-size:var(--cg-caption);-webkit-user-select:all;user-select:all}
|
|
104
|
+
.cgb-wm-or{font-size:var(--cg-caption);color:var(--cg-slate-500)}
|
|
105
|
+
.cgb .cgb-wm-learn{font-weight:var(--cg-weight-bold);color:var(--cg-link);text-decoration:none}
|
|
106
|
+
.cgb .cgb-wm-learn:hover,.cgb .cgb-wm-signin a:hover{text-decoration:underline}
|
|
107
|
+
.cgb-wm-panel .cgb-ow-wrap{width:100%;max-width:462px}
|
|
108
|
+
.cgb-wm-signin{margin-top:-20px;font-size:var(--cg-caption);color:var(--cg-text-secondary)}
|
|
109
|
+
.cgb .cgb-wm-signin a{font-weight:var(--cg-weight-bold);color:var(--cg-link);text-decoration:none}
|
|
110
|
+
.cgb-wm-ex{display:flex;flex-direction:column;gap:16px;min-width:0}
|
|
111
|
+
.cgb-wm-ex-title{font-family:var(--cg-font-display);font-size:22px;font-weight:var(--cg-weight-regular);line-height:1.2;color:var(--cg-primary)}
|
|
112
|
+
.cgb-wm-tiles{display:flex;gap:20px;margin:0 -40px;padding:0 40px 4px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 40px;scrollbar-width:thin}
|
|
113
|
+
.cgb-wm-tile-item{flex:none;display:flex}
|
|
114
|
+
.cgb .cgb-wm-tile{position:relative;display:flex;flex-direction:column;width:211px;padding:1px;border:1px solid var(--cg-border-hairline);border-radius:var(--cg-radius-md);background:var(--cg-surface-card);` +
|
|
115
|
+
`color:var(--cg-text-primary);text-decoration:none;text-align:left;scroll-snap-align:start;transition:box-shadow var(--cg-duration) var(--cg-ease-out)}
|
|
116
|
+
.cgb .cgb-wm-tile:hover{box-shadow:var(--cg-shadow-card-hover)}
|
|
117
|
+
.cgb-wm-tile-pic{display:block;aspect-ratio:159/92;overflow:hidden;border-radius:11px;background:var(--cg-surface-raised)}
|
|
118
|
+
.cgb-wm-tile-img{display:block;width:100%;height:100%;object-fit:cover}
|
|
119
|
+
.cgb-wm-tile-title{display:flex;align-items:center;gap:8px;padding:8px 12px}
|
|
120
|
+
.cgb-wm-tile-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--cg-body-sm);font-weight:var(--cg-weight-medium);line-height:1.2}
|
|
121
|
+
.cgb-wm-kind{display:grid;place-items:center;width:20px;height:20px;flex:none;border-radius:6px;background:var(--cg-kind-app);color:var(--cg-text-on-accent)}
|
|
122
|
+
.cgb-wm-kind[data-kind=inspiration]{background:var(--cg-kind-inspiration)}
|
|
123
|
+
.cgb-wm-kind[data-kind=agent]{background:var(--cg-kind-agent)}
|
|
124
|
+
.cgb-wm-kind svg{width:16px;height:16px}
|
|
125
|
+
.cgb-wm-skeleton{display:flex;flex-direction:column;gap:12px}
|
|
126
|
+
.cgb-wm-shimmer{display:block;border-radius:var(--cg-radius-xs);background:linear-gradient(90deg,var(--cg-neutral-25) 30%,var(--cg-surface-raised) 50%,var(--cg-neutral-25) 70%);background-size:300% 100%;animation:cgb-wm-shimmer 1400ms linear infinite}
|
|
127
|
+
.cgb-wm-shimmer[data-shape=name]{display:inline-block;width:240px;max-width:100%;height:44px;margin:4px 0;vertical-align:top}
|
|
128
|
+
.cgb-wm-shimmer[data-shape=line]{width:220px;max-width:100%;height:18px;margin-left:auto;margin-right:auto}
|
|
129
|
+
.cgb-wm-shimmer[data-shape=body]{height:16px}
|
|
130
|
+
.cgb-wm-shimmer[data-shape=panel]{height:236px;margin-top:20px;border-radius:var(--cg-radius-xl)}
|
|
131
|
+
@keyframes cgb-wm-shimmer{from{background-position:100% 0}to{background-position:0 0}}
|
|
132
|
+
` +
|
|
133
|
+
WIDGET +
|
|
134
|
+
phoneRules((r) => `${r} .cgb-wm-card{position:absolute;left:0;right:0;bottom:0;top:auto;width:auto;max-height:88%;gap:24px;padding:32px 16px calc(24px + env(safe-area-inset-bottom,0px));` +
|
|
135
|
+
`border-bottom:0;border-radius:var(--cg-radius-xl) var(--cg-radius-xl) 0 0;animation-name:cgb-up}` +
|
|
136
|
+
`${r} .cgb-wm-x{top:4px;right:4px}` +
|
|
137
|
+
`${r} .cgb-wm-name{font-size:36px}` +
|
|
138
|
+
`${r} .cgb-wm-grid+.cgb-wm-body,${r} .cgb-wm-head+[data-shape=line]{margin-top:-8px}` +
|
|
139
|
+
`${r} .cgb-wm-panel{padding:16px}` +
|
|
140
|
+
`${r} .cgb-wm-signin{margin-top:-12px}` +
|
|
141
|
+
`${r} .cgb-wm-field{margin-top:-16px}` +
|
|
142
|
+
`${r} .cgb-wm-tiles{gap:16px;margin:0 -16px;padding:0 16px 4px;scroll-padding:0 16px}` +
|
|
143
|
+
`${r} .cgb-wm-tile{width:168px}` +
|
|
144
|
+
// The widget's one line (about 413px) is wider than a phone's panel. As
|
|
145
|
+
// ui#423 does for the React block: the logos take their own centred row
|
|
146
|
+
// above the label and the icon, which fit down to a 288px column.
|
|
147
|
+
`${r} .cgb-ow{height:auto;min-height:48px;padding:10px 12px}` +
|
|
148
|
+
`${r} .cgb-ow-default{flex-wrap:wrap;justify-content:center;row-gap:6px;column-gap:12px}` +
|
|
149
|
+
`${r} .cgb-ow-logos{flex-basis:100%;justify-content:center}` +
|
|
150
|
+
// The tip (and a refusal's prompt in it) never wider than the widget.
|
|
151
|
+
`${r} .cgb-ow-tip{max-width:100%}`) +
|
|
152
|
+
"\n")();
|
|
153
|
+
//# sourceMappingURL=css-watermark.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"css-watermark.js","sourceRoot":"","sources":["../../src/badge/css-watermark.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AAEH,OAAO,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAA;AAC3E,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,kCAAkC,EAAE,MAAM,cAAc,CAAA;AAEjE,MAAM,CAAC,GAAG,qBAAqB,CAAA;AAE/B,iEAAiE;AACjE,MAAM,MAAM,GACV;iNAC+M;IAC/M,8IAA8I;IAC9I,sKAAsK;IACtK;;;;;;yEAMuE,CAAC,CAAC,MAAM;;;;;;;;;;;kHAWiC;IAChH,iHAAiH;IACjH,gFAAgF,CAAC,CAAC,UAAU;;;;;uLAKyF;IACrL,mMAAmM;IACnM;;;;;CAKD,CAAA;AAED,MAAM,CAAC,MAAM,mBAAmB,GAAW,eAAe,CAAC,CAAC,GAAG,EAAE,CAC/D,WAAW,kCAAkC;;2LAE4I;IACzL,+KAA+K;IAC/K;;;;;;;yIAOuI;IACvI;;;;;qMAKmM;IACnM,+NAA+N;IAC/N;;;;qKAImK;IACnK;;;;;;;;;;;+MAW6M;IAC7M;;;;;;;;;;;;;;;;;CAiBD;IACC,MAAM;IACN,UAAU,CACR,CAAC,CAAC,EAAE,EAAE,CACJ,GAAG,CAAC,qKAAqK;QACzK,kGAAkG;QAClG,GAAG,CAAC,+BAA+B;QACnC,GAAG,CAAC,+BAA+B;QACnC,GAAG,CAAC,8BAA8B,CAAC,kDAAkD;QACrF,GAAG,CAAC,8BAA8B;QAClC,GAAG,CAAC,mCAAmC;QACvC,GAAG,CAAC,kCAAkC;QACtC,GAAG,CAAC,kFAAkF;QACtF,GAAG,CAAC,4BAA4B;QAChC,wEAAwE;QACxE,wEAAwE;QACxE,kEAAkE;QAClE,GAAG,CAAC,yDAAyD;QAC7D,GAAG,CAAC,qFAAqF;QACzF,GAAG,CAAC,wDAAwD;QAC5D,sEAAsE;QACtE,GAAG,CAAC,8BAA8B,CACrC;IACD,IAAI,CAAC,EAAE,CAAA"}
|
package/dist/badge/live.d.ts
CHANGED
|
@@ -34,6 +34,14 @@ export interface LiveBadgeOptions {
|
|
|
34
34
|
* default is 300ms later, so the two arrive in turn). `0` for a re-show.
|
|
35
35
|
*/
|
|
36
36
|
delay?: number;
|
|
37
|
+
/**
|
|
38
|
+
* What a plain click does (ui#422). `tab` (the default) follows the link in a
|
|
39
|
+
* new tab, as before. `dialog` means the badge opens the watermark overlay on
|
|
40
|
+
* a plain click: the anchor says so (`aria-haspopup="dialog"`, "opens a
|
|
41
|
+
* dialog") and carries `data-action="open-overlay"`. The href and target stay,
|
|
42
|
+
* so a modified click or "open in new tab" still reaches the link.
|
|
43
|
+
*/
|
|
44
|
+
opens?: "tab" | "dialog";
|
|
37
45
|
}
|
|
38
46
|
/** A non-negative whole number of milliseconds, as a `--cgb-start` declaration. */
|
|
39
47
|
export declare function startStyle(delay: number | undefined): string;
|
|
@@ -53,5 +61,5 @@ export declare function startStyle(delay: number | undefined): string;
|
|
|
53
61
|
* `.cgb-live-wrap`, then remove it on `animationend` or after
|
|
54
62
|
* `BUBBLE_LEAVE_MS`, whichever comes first.
|
|
55
63
|
*/
|
|
56
|
-
export declare function liveBadge({ href: url, label, closeLabel, delay }: LiveBadgeOptions): string;
|
|
64
|
+
export declare function liveBadge({ href: url, label, closeLabel, delay, opens }: LiveBadgeOptions): string;
|
|
57
65
|
//# sourceMappingURL=live.d.ts.map
|
package/dist/badge/live.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"live.d.ts","sourceRoot":"","sources":["../../src/badge/live.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAKH,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAE9C;;;;;GAKG;AACH,eAAO,MAAM,UAAU,qBAAqB,CAAA;AAE5C,oFAAoF;AACpF,eAAO,MAAM,gBAAgB,oBAAoB,CAAA;AAEjD,MAAM,WAAW,gBAAgB;IAC/B,gFAAgF;IAChF,IAAI,EAAE,MAAM,CAAA;IACZ,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,iEAAiE;IACjE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;
|
|
1
|
+
{"version":3,"file":"live.d.ts","sourceRoot":"","sources":["../../src/badge/live.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAKH,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAE9C;;;;;GAKG;AACH,eAAO,MAAM,UAAU,qBAAqB,CAAA;AAE5C,oFAAoF;AACpF,eAAO,MAAM,gBAAgB,oBAAoB,CAAA;AAEjD,MAAM,WAAW,gBAAgB;IAC/B,gFAAgF;IAChF,IAAI,EAAE,MAAM,CAAA;IACZ,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,iEAAiE;IACjE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;CACzB;AAED,mFAAmF;AACnF,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAG5D;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,KAAkB,EAAE,UAA6B,EAAE,KAAK,EAAE,KAAa,EAAE,EAAE,gBAAgB,GAAG,MAAM,CAY1I"}
|
package/dist/badge/live.js
CHANGED
|
@@ -46,12 +46,13 @@ export function startStyle(delay) {
|
|
|
46
46
|
* `.cgb-live-wrap`, then remove it on `animationend` or after
|
|
47
47
|
* `BUBBLE_LEAVE_MS`, whichever comes first.
|
|
48
48
|
*/
|
|
49
|
-
export function liveBadge({ href: url, label = LIVE_LABEL, closeLabel = LIVE_CLOSE_LABEL, delay }) {
|
|
49
|
+
export function liveBadge({ href: url, label = LIVE_LABEL, closeLabel = LIVE_CLOSE_LABEL, delay, opens = "tab" }) {
|
|
50
|
+
const dialog = opens === "dialog";
|
|
50
51
|
return (`<div class="cgb-live-wrap cgb-x-host"${startStyle(delay)}>` +
|
|
51
|
-
`<a class="cgb-live" href="${href(url)}" target="_blank" rel="noopener noreferrer">` +
|
|
52
|
+
`<a class="cgb-live" href="${href(url)}" target="_blank" rel="noopener noreferrer"${dialog ? ' aria-haspopup="dialog" data-action="open-overlay"' : ""}>` +
|
|
52
53
|
`<span class="cgb-live-icon" aria-hidden="true"></span>` +
|
|
53
54
|
`<span class="cgb-live-label"><span class="cgb-live-clip"><span class="cgb-live-text">${esc(label)}</span></span></span>` +
|
|
54
|
-
`<span class="cgb-sr"> (opens in a new tab)</span>` +
|
|
55
|
+
`<span class="cgb-sr"> (${dialog ? "opens a dialog" : "opens in a new tab"})</span>` +
|
|
55
56
|
`</a>` +
|
|
56
57
|
`<button class="cgb-x cgb-live-x" type="button" data-action="hide-live" aria-label="${esc(closeLabel)}">${glyph(X_BOLD)}</button>` +
|
|
57
58
|
`</div>`);
|
package/dist/badge/live.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"live.js","sourceRoot":"","sources":["../../src/badge/live.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,WAAW,CAAA;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAEnC,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAE9C;;;;;GAKG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,kBAAkB,CAAA;AAE5C,oFAAoF;AACpF,MAAM,CAAC,MAAM,gBAAgB,GAAG,iBAAiB,CAAA;
|
|
1
|
+
{"version":3,"file":"live.js","sourceRoot":"","sources":["../../src/badge/live.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,WAAW,CAAA;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAEnC,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAE9C;;;;;GAKG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,kBAAkB,CAAA;AAE5C,oFAAoF;AACpF,MAAM,CAAC,MAAM,gBAAgB,GAAG,iBAAiB,CAAA;AAwBjD,mFAAmF;AACnF,MAAM,UAAU,UAAU,CAAC,KAAyB;IAClD,IAAI,KAAK,KAAK,SAAS,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC;QAAE,OAAO,EAAE,CAAA;IAC7D,OAAO,uBAAuB,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,KAAK,CAAA;AACnE,CAAC;AAED;;;;;;;;;;;;;;;GAeG;AACH,MAAM,UAAU,SAAS,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,UAAU,EAAE,UAAU,GAAG,gBAAgB,EAAE,KAAK,EAAE,KAAK,GAAG,KAAK,EAAoB;IAChI,MAAM,MAAM,GAAG,KAAK,KAAK,QAAQ,CAAA;IACjC,OAAO,CACL,wCAAwC,UAAU,CAAC,KAAK,CAAC,GAAG;QAC5D,6BAA6B,IAAI,CAAC,GAAG,CAAC,8CAA8C,MAAM,CAAC,CAAC,CAAC,oDAAoD,CAAC,CAAC,CAAC,EAAE,GAAG;QACzJ,wDAAwD;QACxD,wFAAwF,GAAG,CAAC,KAAK,CAAC,uBAAuB;QACzH,0BAA0B,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,oBAAoB,UAAU;QACpF,MAAM;QACN,sFAAsF,GAAG,CAAC,UAAU,CAAC,KAAK,KAAK,CAAC,MAAM,CAAC,WAAW;QAClI,QAAQ,CACT,CAAA;AACH,CAAC"}
|
package/dist/badge/marks.d.ts
CHANGED
|
@@ -48,6 +48,14 @@ export declare const CHAT_TEARDROP_TEXT: readonly string[];
|
|
|
48
48
|
export declare const X_BOLD: readonly string[];
|
|
49
49
|
/** Phosphor `chat-centered-text`, regular. */
|
|
50
50
|
export declare const CHAT_CENTERED_TEXT: readonly string[];
|
|
51
|
+
/** Phosphor `layout`, regular. */
|
|
52
|
+
export declare const LAYOUT: readonly string[];
|
|
53
|
+
/** Phosphor `cube`, regular. */
|
|
54
|
+
export declare const CUBE: readonly string[];
|
|
55
|
+
/** Phosphor `copy`, fill. */
|
|
56
|
+
export declare const COPY_FILL: readonly string[];
|
|
57
|
+
/** Phosphor `check`, bold. */
|
|
58
|
+
export declare const CHECK_BOLD: readonly string[];
|
|
51
59
|
/** Where each glyph above came from: the Phosphor file stem (`x-bold` is `x` at bold). Read by the tests and the gallery, not by the badge. */
|
|
52
60
|
export declare const BADGE_MARK_SOURCES: Record<string, string>;
|
|
53
61
|
//# sourceMappingURL=marks.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"marks.d.ts","sourceRoot":"","sources":["../../src/badge/marks.ts"],"names":[],"mappings":"AAkBA,qCAAqC;AACrC,eAAO,MAAM,SAAS,EAAE,SAAS,MAAM,EAEtC,CAAA;AAED,uCAAuC;AACvC,eAAO,MAAM,WAAW,EAAE,SAAS,MAAM,EAExC,CAAA;AAED,kCAAkC;AAClC,eAAO,MAAM,MAAM,EAAE,SAAS,MAAM,EAEnC,CAAA;AAED,uCAAuC;AACvC,eAAO,MAAM,WAAW,EAAE,SAAS,MAAM,EAExC,CAAA;AAED,8CAA8C;AAC9C,eAAO,MAAM,kBAAkB,EAAE,SAAS,MAAM,EAE/C,CAAA;AAED,yCAAyC;AACzC,eAAO,MAAM,aAAa,EAAE,SAAS,MAAM,EAE1C,CAAA;AAED,+BAA+B;AAC/B,eAAO,MAAM,GAAG,EAAE,SAAS,MAAM,EAEhC,CAAA;AAED,0CAA0C;AAC1C,eAAO,MAAM,cAAc,EAAE,SAAS,MAAM,EAE3C,CAAA;AAED,sCAAsC;AACtC,eAAO,MAAM,UAAU,EAAE,SAAS,MAAM,EAEvC,CAAA;AAED,sCAAsC;AACtC,eAAO,MAAM,UAAU,EAAE,SAAS,MAAM,EAEvC,CAAA;AAED,yCAAyC;AACzC,eAAO,MAAM,aAAa,EAAE,SAAS,MAAM,EAE1C,CAAA;AAED,iCAAiC;AACjC,eAAO,MAAM,KAAK,EAAE,SAAS,MAAM,EAElC,CAAA;AAED,wCAAwC;AACxC,eAAO,MAAM,YAAY,EAAE,SAAS,MAAM,EAEzC,CAAA;AAED,gCAAgC;AAChC,eAAO,MAAM,IAAI,EAAE,SAAS,MAAM,EAEjC,CAAA;AAED,iCAAiC;AACjC,eAAO,MAAM,KAAK,EAAE,SAAS,MAAM,EAElC,CAAA;AAED,uCAAuC;AACvC,eAAO,MAAM,WAAW,EAAE,SAAS,MAAM,EAExC,CAAA;AAED,yCAAyC;AACzC,eAAO,MAAM,aAAa,EAAE,SAAS,MAAM,EAE1C,CAAA;AAED,iCAAiC;AACjC,eAAO,MAAM,KAAK,EAAE,SAAS,MAAM,EAElC,CAAA;AAED,6BAA6B;AAC7B,eAAO,MAAM,CAAC,EAAE,SAAS,MAAM,EAE9B,CAAA;AAED,yCAAyC;AACzC,eAAO,MAAM,aAAa,EAAE,SAAS,MAAM,EAE1C,CAAA;AAED,uCAAuC;AACvC,eAAO,MAAM,WAAW,EAAE,SAAS,MAAM,EAExC,CAAA;AAED,gCAAgC;AAChC,eAAO,MAAM,IAAI,EAAE,SAAS,MAAM,EAEjC,CAAA;AAED,8CAA8C;AAC9C,eAAO,MAAM,kBAAkB,EAAE,SAAS,MAAM,EAE/C,CAAA;AAED,0BAA0B;AAC1B,eAAO,MAAM,MAAM,EAAE,SAAS,MAAM,EAEnC,CAAA;AAED,8CAA8C;AAC9C,eAAO,MAAM,kBAAkB,EAAE,SAAS,MAAM,EAE/C,CAAA;AAED,+IAA+I;AAC/I,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"marks.d.ts","sourceRoot":"","sources":["../../src/badge/marks.ts"],"names":[],"mappings":"AAkBA,qCAAqC;AACrC,eAAO,MAAM,SAAS,EAAE,SAAS,MAAM,EAEtC,CAAA;AAED,uCAAuC;AACvC,eAAO,MAAM,WAAW,EAAE,SAAS,MAAM,EAExC,CAAA;AAED,kCAAkC;AAClC,eAAO,MAAM,MAAM,EAAE,SAAS,MAAM,EAEnC,CAAA;AAED,uCAAuC;AACvC,eAAO,MAAM,WAAW,EAAE,SAAS,MAAM,EAExC,CAAA;AAED,8CAA8C;AAC9C,eAAO,MAAM,kBAAkB,EAAE,SAAS,MAAM,EAE/C,CAAA;AAED,yCAAyC;AACzC,eAAO,MAAM,aAAa,EAAE,SAAS,MAAM,EAE1C,CAAA;AAED,+BAA+B;AAC/B,eAAO,MAAM,GAAG,EAAE,SAAS,MAAM,EAEhC,CAAA;AAED,0CAA0C;AAC1C,eAAO,MAAM,cAAc,EAAE,SAAS,MAAM,EAE3C,CAAA;AAED,sCAAsC;AACtC,eAAO,MAAM,UAAU,EAAE,SAAS,MAAM,EAEvC,CAAA;AAED,sCAAsC;AACtC,eAAO,MAAM,UAAU,EAAE,SAAS,MAAM,EAEvC,CAAA;AAED,yCAAyC;AACzC,eAAO,MAAM,aAAa,EAAE,SAAS,MAAM,EAE1C,CAAA;AAED,iCAAiC;AACjC,eAAO,MAAM,KAAK,EAAE,SAAS,MAAM,EAElC,CAAA;AAED,wCAAwC;AACxC,eAAO,MAAM,YAAY,EAAE,SAAS,MAAM,EAEzC,CAAA;AAED,gCAAgC;AAChC,eAAO,MAAM,IAAI,EAAE,SAAS,MAAM,EAEjC,CAAA;AAED,iCAAiC;AACjC,eAAO,MAAM,KAAK,EAAE,SAAS,MAAM,EAElC,CAAA;AAED,uCAAuC;AACvC,eAAO,MAAM,WAAW,EAAE,SAAS,MAAM,EAExC,CAAA;AAED,yCAAyC;AACzC,eAAO,MAAM,aAAa,EAAE,SAAS,MAAM,EAE1C,CAAA;AAED,iCAAiC;AACjC,eAAO,MAAM,KAAK,EAAE,SAAS,MAAM,EAElC,CAAA;AAED,6BAA6B;AAC7B,eAAO,MAAM,CAAC,EAAE,SAAS,MAAM,EAE9B,CAAA;AAED,yCAAyC;AACzC,eAAO,MAAM,aAAa,EAAE,SAAS,MAAM,EAE1C,CAAA;AAED,uCAAuC;AACvC,eAAO,MAAM,WAAW,EAAE,SAAS,MAAM,EAExC,CAAA;AAED,gCAAgC;AAChC,eAAO,MAAM,IAAI,EAAE,SAAS,MAAM,EAEjC,CAAA;AAED,8CAA8C;AAC9C,eAAO,MAAM,kBAAkB,EAAE,SAAS,MAAM,EAE/C,CAAA;AAED,0BAA0B;AAC1B,eAAO,MAAM,MAAM,EAAE,SAAS,MAAM,EAEnC,CAAA;AAED,8CAA8C;AAC9C,eAAO,MAAM,kBAAkB,EAAE,SAAS,MAAM,EAE/C,CAAA;AAED,kCAAkC;AAClC,eAAO,MAAM,MAAM,EAAE,SAAS,MAAM,EAEnC,CAAA;AAED,gCAAgC;AAChC,eAAO,MAAM,IAAI,EAAE,SAAS,MAAM,EAEjC,CAAA;AAED,6BAA6B;AAC7B,eAAO,MAAM,SAAS,EAAE,SAAS,MAAM,EAEtC,CAAA;AAED,8BAA8B;AAC9B,eAAO,MAAM,UAAU,EAAE,SAAS,MAAM,EAEvC,CAAA;AAED,+IAA+I;AAC/I,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CA8BrD,CAAA"}
|
package/dist/badge/marks.js
CHANGED
|
@@ -115,6 +115,22 @@ export const X_BOLD = [
|
|
|
115
115
|
export const CHAT_CENTERED_TEXT = [
|
|
116
116
|
"M88,104a8,8,0,0,1,8-8h64a8,8,0,0,1,0,16H96A8,8,0,0,1,88,104Zm8,40h64a8,8,0,0,0,0-16H96a8,8,0,0,0,0,16ZM232,56V184a16,16,0,0,1-16,16H155.57l-13.68,23.94a16,16,0,0,1-27.78,0L100.43,200H40a16,16,0,0,1-16-16V56A16,16,0,0,1,40,40H216A16,16,0,0,1,232,56Zm-16,0H40V184h65.07a8,8,0,0,1,7,4l16,28,16-28a8,8,0,0,1,7-4H216Z"
|
|
117
117
|
];
|
|
118
|
+
/** Phosphor `layout`, regular. */
|
|
119
|
+
export const LAYOUT = [
|
|
120
|
+
"M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm0,16V96H40V56ZM40,112H96v88H40Zm176,88H112V112H216v88Z"
|
|
121
|
+
];
|
|
122
|
+
/** Phosphor `cube`, regular. */
|
|
123
|
+
export const CUBE = [
|
|
124
|
+
"M223.68,66.15,135.68,18h0a15.88,15.88,0,0,0-15.36,0l-88,48.17a16,16,0,0,0-8.32,14v95.64a16,16,0,0,0,8.32,14l88,48.17a15.88,15.88,0,0,0,15.36,0l88-48.17a16,16,0,0,0,8.32-14V80.18A16,16,0,0,0,223.68,66.15ZM128,32h0l80.34,44L128,120,47.66,76ZM40,90l80,43.78v85.79L40,175.82Zm96,129.57V133.82L216,90v85.78Z"
|
|
125
|
+
];
|
|
126
|
+
/** Phosphor `copy`, fill. */
|
|
127
|
+
export const COPY_FILL = [
|
|
128
|
+
"M216,32H88a8,8,0,0,0-8,8V80H40a8,8,0,0,0-8,8V216a8,8,0,0,0,8,8H168a8,8,0,0,0,8-8V176h40a8,8,0,0,0,8-8V40A8,8,0,0,0,216,32Zm-8,128H176V88a8,8,0,0,0-8-8H96V48H208Z"
|
|
129
|
+
];
|
|
130
|
+
/** Phosphor `check`, bold. */
|
|
131
|
+
export const CHECK_BOLD = [
|
|
132
|
+
"M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"
|
|
133
|
+
];
|
|
118
134
|
/** Where each glyph above came from: the Phosphor file stem (`x-bold` is `x` at bold). Read by the tests and the gallery, not by the badge. */
|
|
119
135
|
export const BADGE_MARK_SOURCES = {
|
|
120
136
|
THUMBS_UP: "thumbs-up",
|
|
@@ -142,5 +158,9 @@ export const BADGE_MARK_SOURCES = {
|
|
|
142
158
|
CHAT_TEARDROP_TEXT: "chat-teardrop-text",
|
|
143
159
|
X_BOLD: "x-bold",
|
|
144
160
|
CHAT_CENTERED_TEXT: "chat-centered-text",
|
|
161
|
+
LAYOUT: "layout",
|
|
162
|
+
CUBE: "cube",
|
|
163
|
+
COPY_FILL: "copy-fill",
|
|
164
|
+
CHECK_BOLD: "check-bold",
|
|
145
165
|
};
|
|
146
166
|
//# sourceMappingURL=marks.js.map
|
package/dist/badge/marks.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"marks.js","sourceRoot":"","sources":["../../src/badge/marks.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"marks.js","sourceRoot":"","sources":["../../src/badge/marks.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"onboard-marks.d.ts","sourceRoot":"","sources":["../../src/badge/onboard-marks.ts"],"names":[],"mappings":"AAOA,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,EAAE,MAAM,CAAA;IACf,OAAO,EAAE,OAAO,CAAA;IAChB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAA;CACnB;AAED,eAAO,MAAM,aAAa,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAO/D,CAAA"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
// GENERATED by scripts/build-badge.mjs from src/blocks/tool-marks.tsx and
|
|
2
|
+
// src/blocks/onboard-widget-content.ts. Do not edit.
|
|
3
|
+
//
|
|
4
|
+
// The onboard widget twin's logos (ui#422) as plain path data: exactly the marks
|
|
5
|
+
// #419's slots name. `hex` is the vendor's own colour (no #) where ToolLogo
|
|
6
|
+
// draws it, and null where ToolLogo follows currentColor (a near-black mark).
|
|
7
|
+
export const ONBOARD_MARKS = {
|
|
8
|
+
"Claude Code": { "path": "M21 10.5h3v3h-3v3h-1.5v3H18v-3h-1.5v3H15v-3H9v3H7.5v-3H6v3H4.5v-3H3v-3H0v-3h3v-6h18Zm-15 0h1.5v-3H6Zm10.5 0H18v-3h-1.5z", "viewBox": "0 0 24 24", "evenodd": false, "hex": "D97757" },
|
|
9
|
+
"Codex": { "path": "M8.086.457a6.105 6.105 0 013.046-.415c1.333.153 2.521.72 3.564 1.7a.117.117 0 00.107.029c1.408-.346 2.762-.224 4.061.366l.063.03.154.076c1.357.703 2.33 1.77 2.918 3.198.278.679.418 1.388.421 2.126a5.655 5.655 0 01-.18 1.631.167.167 0 00.04.155 5.982 5.982 0 011.578 2.891c.385 1.901-.01 3.615-1.183 5.14l-.182.22a6.063 6.063 0 01-2.934 1.851.162.162 0 00-.108.102c-.255.736-.511 1.364-.987 1.992-1.199 1.582-2.962 2.462-4.948 2.451-1.583-.008-2.986-.587-4.21-1.736a.145.145 0 00-.14-.032c-.518.167-1.04.191-1.604.185a5.924 5.924 0 01-2.595-.622 6.058 6.058 0 01-2.146-1.781c-.203-.269-.404-.522-.551-.821a7.74 7.74 0 01-.495-1.283 6.11 6.11 0 01-.017-3.064.166.166 0 00.008-.074.115.115 0 00-.037-.064 5.958 5.958 0 01-1.38-2.202 5.196 5.196 0 01-.333-1.589 6.915 6.915 0 01.188-2.132c.45-1.484 1.309-2.648 2.577-3.493.282-.188.55-.334.802-.438.286-.12.573-.22.861-.304a.129.129 0 00.087-.087A6.016 6.016 0 015.635 2.31C6.315 1.464 7.132.846 8.086.457zm-.804 7.85a.848.848 0 00-1.473.842l1.694 2.965-1.688 2.848a.849.849 0 001.46.864l1.94-3.272a.849.849 0 00.007-.854l-1.94-3.393zm5.446 6.24a.849.849 0 000 1.695h4.848a.849.849 0 000-1.696h-4.848z", "viewBox": "0 0 24 24", "evenodd": true, "hex": null },
|
|
10
|
+
"Cursor": { "path": "M11.503.131 1.891 5.678a.84.84 0 0 0-.42.726v11.188c0 .3.162.575.42.724l9.609 5.55a1 1 0 0 0 .998 0l9.61-5.55a.84.84 0 0 0 .42-.724V6.404a.84.84 0 0 0-.42-.726L12.497.131a1.01 1.01 0 0 0-.996 0M2.657 6.338h18.55c.263 0 .43.287.297.515L12.23 22.918c-.062.107-.229.064-.229-.06V12.335a.59.59 0 0 0-.295-.51l-9.11-5.257c-.109-.063-.064-.23.061-.23", "viewBox": "0 0 24 24", "evenodd": false, "hex": null },
|
|
11
|
+
"Claude": { "path": "m4.7144 15.9555 4.7174-2.6471.079-.2307-.079-.1275h-.2307l-.7893-.0486-2.6956-.0729-2.3375-.0971-2.2646-.1214-.5707-.1215-.5343-.7042.0546-.3522.4797-.3218.686.0608 1.5179.1032 2.2767.1578 1.6514.0972 2.4468.255h.3886l.0546-.1579-.1336-.0971-.1032-.0972L6.973 9.8356l-2.55-1.6879-1.3356-.9714-.7225-.4918-.3643-.4614-.1578-1.0078.6557-.7225.8803.0607.2246.0607.8925.686 1.9064 1.4754 2.4893 1.8336.3643.3035.1457-.1032.0182-.0728-.164-.2733-1.3539-2.4467-1.445-2.4893-.6435-1.032-.17-.6194c-.0607-.255-.1032-.4674-.1032-.7285L6.287.1335 6.6997 0l.9957.1336.419.3642.6192 1.4147 1.0018 2.2282 1.5543 3.0296.4553.8985.2429.8318.091.255h.1579v-.1457l.1275-1.706.2368-2.0947.2307-2.6957.0789-.7589.3764-.9107.7468-.4918.5828.2793.4797.686-.0668.4433-.2853 1.8517-.5586 2.9021-.3643 1.9429h.2125l.2429-.2429.9835-1.3053 1.6514-2.0643.7286-.8196.85-.9046.5464-.4311h1.0321l.759 1.1293-.34 1.1657-1.0625 1.3478-.8804 1.1414-1.2628 1.7-.7893 1.36.0729.1093.1882-.0183 2.8535-.607 1.5421-.2794 1.8396-.3157.8318.3886.091.3946-.3278.8075-1.967.4857-2.3072.4614-3.4364.8136-.0425.0304.0486.0607 1.5482.1457.6618.0364h1.621l3.0175.2247.7892.522.4736.6376-.079.4857-1.2142.6193-1.6393-.3886-3.825-.9107-1.3113-.3279h-.1822v.1093l1.0929 1.0686 2.0035 1.8092 2.5075 2.3314.1275.5768-.3218.4554-.34-.0486-2.2039-1.6575-.85-.7468-1.9246-1.621h-.1275v.17l.4432.6496 2.3436 3.5214.1214 1.0807-.17.3521-.6071.2125-.6679-.1214-1.3721-1.9246L14.38 17.959l-1.1414-1.9428-.1397.079-.674 7.2552-.3156.3703-.7286.2793-.6071-.4614-.3218-.7468.3218-1.4753.3886-1.9246.3157-1.53.2853-1.9004.17-.6314-.0121-.0425-.1397.0182-1.4328 1.9672-2.1796 2.9446-1.7243 1.8456-.4128.164-.7164-.3704.0667-.6618.4008-.5889 2.386-3.0357 1.4389-1.882.929-1.0868-.0062-.1579h-.0546l-6.3385 4.1164-1.1293.1457-.4857-.4554.0608-.7467.2307-.2429 1.9064-1.3114Z", "viewBox": "0 0 24 24", "evenodd": false, "hex": "D97757" },
|
|
12
|
+
"Google Gemini": { "path": "M11.04 19.32Q12 21.51 12 24q0-2.49.93-4.68.96-2.19 2.58-3.81t3.81-2.55Q21.51 12 24 12q-2.49 0-4.68-.93a12.3 12.3 0 0 1-3.81-2.58 12.3 12.3 0 0 1-2.58-3.81Q12 2.49 12 0q0 2.49-.96 4.68-.93 2.19-2.55 3.81a12.3 12.3 0 0 1-3.81 2.58Q2.49 12 0 12q2.49 0 4.68.96 2.19.93 3.81 2.55t2.55 3.81", "viewBox": "0 0 24 24", "evenodd": false, "hex": "8E75B2" },
|
|
13
|
+
"Antigravity": { "path": "M89.6992 93.695C94.3659 97.195 101.366 94.8617 94.9492 88.445C75.6992 69.7783 79.7825 18.445 55.8659 18.445C31.9492 18.445 36.0325 69.7783 16.7825 88.445C9.78251 95.445 17.3658 97.195 22.0325 93.695C40.1159 81.445 38.9492 59.8617 55.8659 59.8617C72.7825 59.8617 71.6159 81.445 89.6992 93.695Z", "viewBox": "0 0 24 24", "evenodd": false, "hex": "3186FF" },
|
|
14
|
+
};
|
|
15
|
+
//# sourceMappingURL=onboard-marks.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"onboard-marks.js","sourceRoot":"","sources":["../../src/badge/onboard-marks.ts"],"names":[],"mappings":"AAAA,0EAA0E;AAC1E,qDAAqD;AACrD,EAAE;AACF,iFAAiF;AACjF,4EAA4E;AAC5E,8EAA8E;AAS9E,MAAM,CAAC,MAAM,aAAa,GAA0C;IAClE,aAAa,EAAE,EAAC,MAAM,EAAC,yHAAyH,EAAC,SAAS,EAAC,WAAW,EAAC,SAAS,EAAC,KAAK,EAAC,KAAK,EAAC,QAAQ,EAAC;IACtM,OAAO,EAAE,EAAC,MAAM,EAAC,6nCAA6nC,EAAC,SAAS,EAAC,WAAW,EAAC,SAAS,EAAC,IAAI,EAAC,KAAK,EAAC,IAAI,EAAC;IAC/rC,QAAQ,EAAE,EAAC,MAAM,EAAC,0VAA0V,EAAC,SAAS,EAAC,WAAW,EAAC,SAAS,EAAC,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC;IAC9Z,QAAQ,EAAE,EAAC,MAAM,EAAC,qxDAAqxD,EAAC,SAAS,EAAC,WAAW,EAAC,SAAS,EAAC,KAAK,EAAC,KAAK,EAAC,QAAQ,EAAC;IAC71D,eAAe,EAAE,EAAC,MAAM,EAAC,8RAA8R,EAAC,SAAS,EAAC,WAAW,EAAC,SAAS,EAAC,KAAK,EAAC,KAAK,EAAC,QAAQ,EAAC;IAC7W,aAAa,EAAE,EAAC,MAAM,EAAC,sSAAsS,EAAC,SAAS,EAAC,WAAW,EAAC,SAAS,EAAC,KAAK,EAAC,KAAK,EAAC,QAAQ,EAAC;CACpX,CAAA"}
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* THE ONBOARD WIDGET, FRAMEWORK-FREE (ui#422): the twin of #419's React
|
|
3
|
+
* `OnboardWidget` (Vlad's "Copy Fetch Widget", Figma 11984:30251), for the
|
|
4
|
+
* watermark overlay the badge draws in a closed shadow root on a customer's app.
|
|
5
|
+
*
|
|
6
|
+
* Same markup shape, same words, same slots, same timings: every one of them is
|
|
7
|
+
* read from `blocks/onboard-widget-content.ts`, the module the React block reads,
|
|
8
|
+
* so the two cannot drift. The marks are `tool-marks.tsx`'s own paths, generated
|
|
9
|
+
* into `onboard-marks.ts`; the colour Gemini star is the content module's art.
|
|
10
|
+
*
|
|
11
|
+
* ## The faces
|
|
12
|
+
*
|
|
13
|
+
* idle three 20px logo slots, the label, a 20px copy icon; hover (real
|
|
14
|
+
* hover only) washes violet, turns the icon solid Primary, and shows
|
|
15
|
+
* the tip after 300ms; keyboard focus shows the tip and the ring
|
|
16
|
+
* copied a green check and "Copied. Paste into your AI coding tool." laid
|
|
17
|
+
* over the content, so the width does not move
|
|
18
|
+
* blocked "Couldn't copy", and the tip open with the prompt in it, selectable
|
|
19
|
+
*
|
|
20
|
+
* The badge sets the face: it copies on `data-action="onboard_copy"` (the value
|
|
21
|
+
* is `data-value`), sets `data-face` to `copied` or `blocked`, back to `idle`
|
|
22
|
+
* after `ONBOARD_WIDGET_TIMING.copiedMs`, and says the matching line in the
|
|
23
|
+
* overlay's live region. A blocked face needs the prompt in the tip, so the badge
|
|
24
|
+
* re-renders the widget with `face: "blocked"` rather than flipping the attribute.
|
|
25
|
+
*
|
|
26
|
+
* ## The motion
|
|
27
|
+
*
|
|
28
|
+
* Each slot holds both marks; `data-set` on the slot says which one shows, and
|
|
29
|
+
* the stylesheet crossfades them over `fadeMs`. `wireOnboardWidget` runs the
|
|
30
|
+
* content module's `createLogoCycle` through `bindLogoCycle`: still on set A
|
|
31
|
+
* under reduced motion, paused while the tab is hidden. Its cleanup stops it;
|
|
32
|
+
* the badge calls it when the overlay closes.
|
|
33
|
+
*/
|
|
34
|
+
import { type LogoSet } from "../blocks/onboard-widget-content.js";
|
|
35
|
+
export type OnboardWidgetFace = "idle" | "copied" | "blocked";
|
|
36
|
+
export interface OnboardWidgetOptions {
|
|
37
|
+
/** What is copied, exactly: the overlay passes the server's `onboard_prompt`. */
|
|
38
|
+
value: string;
|
|
39
|
+
/** Fill the width and centre the content, as in the overlay's panel. */
|
|
40
|
+
block?: boolean;
|
|
41
|
+
/** The face to draw. Default `idle`. */
|
|
42
|
+
face?: OnboardWidgetFace;
|
|
43
|
+
/** Pin every slot to one set, for the gallery and screenshots. Default `a`. */
|
|
44
|
+
set?: LogoSet;
|
|
45
|
+
/** Pin the hover look, for the gallery and screenshots. */
|
|
46
|
+
hover?: boolean;
|
|
47
|
+
/** The tip's id, which the button points at. Default `cgb-ow-tip`. */
|
|
48
|
+
tipId?: string;
|
|
49
|
+
}
|
|
50
|
+
/**
|
|
51
|
+
* The onboard widget: one button that copies `value`, named by its label, with
|
|
52
|
+
* the tip as its description. Action `onboard_copy`, `data-value` = `value`.
|
|
53
|
+
*/
|
|
54
|
+
export declare function onboardWidget({ value, block, face, set, hover, tipId }: OnboardWidgetOptions): string;
|
|
55
|
+
type Listenable = {
|
|
56
|
+
addEventListener: (type: string, fn: () => void) => void;
|
|
57
|
+
removeEventListener: (type: string, fn: () => void) => void;
|
|
58
|
+
};
|
|
59
|
+
type Timers = {
|
|
60
|
+
setTimeout: (fn: () => void, ms: number) => unknown;
|
|
61
|
+
clearTimeout: (handle: never) => void;
|
|
62
|
+
};
|
|
63
|
+
export interface WireOnboardWidgetOptions {
|
|
64
|
+
/** The page's `document`, for `visibilitychange`. */
|
|
65
|
+
document: Listenable & {
|
|
66
|
+
hidden: boolean;
|
|
67
|
+
};
|
|
68
|
+
/** `window.matchMedia("(prefers-reduced-motion: reduce)")`. */
|
|
69
|
+
reducedMotion: Listenable & {
|
|
70
|
+
matches: boolean;
|
|
71
|
+
};
|
|
72
|
+
/** For tests. Default the global timers. */
|
|
73
|
+
timers?: Timers;
|
|
74
|
+
}
|
|
75
|
+
/**
|
|
76
|
+
* Runs the logo cycle on a rendered widget: `root` is the button (or anything
|
|
77
|
+
* holding its `.cgb-ow-slot`s). Returns the cleanup, which stops the timer and
|
|
78
|
+
* removes both listeners; call it when the overlay closes.
|
|
79
|
+
*/
|
|
80
|
+
export declare function wireOnboardWidget(root: {
|
|
81
|
+
querySelectorAll: (selector: string) => ArrayLike<{
|
|
82
|
+
setAttribute: (name: string, value: string) => void;
|
|
83
|
+
}>;
|
|
84
|
+
}, { document, reducedMotion, timers }: WireOnboardWidgetOptions): () => void;
|
|
85
|
+
export {};
|
|
86
|
+
//# sourceMappingURL=onboard-widget.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"onboard-widget.d.ts","sourceRoot":"","sources":["../../src/badge/onboard-widget.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAEH,OAAO,EAML,KAAK,OAAO,EACb,MAAM,qCAAqC,CAAA;AAK5C,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAA;AAE7D,MAAM,WAAW,oBAAoB;IACnC,iFAAiF;IACjF,KAAK,EAAE,MAAM,CAAA;IACb,wEAAwE;IACxE,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,wCAAwC;IACxC,IAAI,CAAC,EAAE,iBAAiB,CAAA;IACxB,+EAA+E;IAC/E,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,2DAA2D;IAC3D,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,sEAAsE;IACtE,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAuCD;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,KAAa,EAAE,IAAa,EAAE,GAAS,EAAE,KAAa,EAAE,KAAoB,EAAE,EAAE,oBAAoB,GAAG,MAAM,CAsBnJ;AAED,KAAK,UAAU,GAAG;IAChB,gBAAgB,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,IAAI,KAAK,IAAI,CAAA;IACxD,mBAAmB,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,IAAI,KAAK,IAAI,CAAA;CAC5D,CAAA;AAED,KAAK,MAAM,GAAG;IACZ,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,IAAI,EAAE,EAAE,EAAE,MAAM,KAAK,OAAO,CAAA;IACnD,YAAY,EAAE,CAAC,MAAM,EAAE,KAAK,KAAK,IAAI,CAAA;CACtC,CAAA;AAED,MAAM,WAAW,wBAAwB;IACvC,qDAAqD;IACrD,QAAQ,EAAE,UAAU,GAAG;QAAE,MAAM,EAAE,OAAO,CAAA;KAAE,CAAA;IAC1C,+DAA+D;IAC/D,aAAa,EAAE,UAAU,GAAG;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,CAAA;IAChD,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAC/B,IAAI,EAAE;IAAE,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,SAAS,CAAC;QAAE,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;KAAE,CAAC,CAAA;CAAE,EACpH,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,EAAE,EAAE,wBAAwB,GAC5D,MAAM,IAAI,CAQZ"}
|