@hanzo/ui 8.27.88 → 8.27.90
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/backends/gui/input.cjs +5 -1
- package/dist/backends/gui/input.d.ts.map +1 -1
- package/dist/backends/gui/input.js +5 -1
- package/dist/backends/gui/input.js.map +1 -1
- package/dist/backends/gui/textarea.cjs +5 -1
- package/dist/backends/gui/textarea.d.ts.map +1 -1
- package/dist/backends/gui/textarea.js +5 -1
- package/dist/backends/gui/textarea.js.map +1 -1
- package/dist/consent/Consent.cjs +33 -27
- package/dist/consent/Consent.d.ts +3 -1
- package/dist/consent/Consent.d.ts.map +1 -1
- package/dist/consent/Consent.js +34 -28
- package/dist/consent/Consent.js.map +1 -1
- package/dist/gallery.html +47 -5
- package/dist/gui-config.cjs +10 -4
- package/dist/gui-config.d.ts.map +1 -1
- package/dist/gui-config.js +10 -4
- package/dist/gui-config.js.map +1 -1
- package/dist/models/ModelPickerMenu.cjs +1 -1
- package/dist/models/ModelPickerMenu.js +1 -1
- package/dist/models/ModelPickerMenu.js.map +1 -1
- package/dist/onboarding/Checkout.cjs +4 -2
- package/dist/onboarding/Checkout.d.ts.map +1 -1
- package/dist/onboarding/Checkout.js +4 -2
- package/dist/onboarding/Checkout.js.map +1 -1
- package/dist/product/ChipSelect.cjs +1 -1
- package/dist/product/ChipSelect.js +1 -1
- package/dist/product/ChipSelect.js.map +1 -1
- package/dist/product/Palette.cjs +1 -1
- package/dist/product/Palette.js +1 -1
- package/dist/product/Palette.js.map +1 -1
- package/dist/styles.css +43 -1
- package/dist/theme.css +42 -0
- package/package.json +3 -6
|
@@ -35,7 +35,11 @@ const Input = /* @__PURE__ */ (0, react_1.forwardRef)(function Input({ startAdor
|
|
|
35
35
|
const toggle = isPassword && reveal;
|
|
36
36
|
const box = control_1.BOX[size];
|
|
37
37
|
const inset = box.gutter + MARK;
|
|
38
|
-
const field = ((0, jsx_runtime_1.jsx)(gui_1.Input, { ref: ref, ...(0, slot_1.slot)('input'), ...(isPassword ? (0, mask_1.masked)(!revealed) : { type, secureTextEntry }), ...control_1.FIELD, ...(fill ? control_1.FILL : null), height: box.h, ...('height' in props ? null : { $touchable: { height: Math.max(box.h, TOUCH) } }), width: "100%", minW: 0,
|
|
38
|
+
const field = ((0, jsx_runtime_1.jsx)(gui_1.Input, { ref: ref, ...(0, slot_1.slot)('input'), ...(isPassword ? (0, mask_1.masked)(!revealed) : { type, secureTextEntry }), ...control_1.FIELD, ...(fill ? control_1.FILL : null), height: box.h, ...('height' in props ? null : { $touchable: { height: Math.max(box.h, TOUCH) } }), width: "100%", minW: 0,
|
|
39
|
+
// The value at the full ink, the hint at the placeholder token. gui's
|
|
40
|
+
// Input sub-theme draws its value at 80% grey, which left a typed value
|
|
41
|
+
// and a sample placeholder one rung apart.
|
|
42
|
+
color: "$ink", placeholderTextColor: "$placeholderColor", fontSize: "$3", pl: startAdornment ? inset : box.gutter, pr: endAdornment || toggle ? inset : box.gutter, ...props }));
|
|
39
43
|
if (!startAdornment && !endAdornment && !toggle)
|
|
40
44
|
return field;
|
|
41
45
|
return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { position: "relative", width: "100%", items: "center", children: [startAdornment ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...well('l', box.gutter), pointerEvents: "none", opacity: 0.6, children: startAdornment })) : null, field, toggle ? ((0, jsx_runtime_1.jsx)(gui_1.XStack
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/input.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,OAAO,EAAE,KAAK,IAAI,QAAQ,EAAU,MAAM,YAAY,CAAA;AAEtD,OAAO,EAAwB,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAIjF,OAAO,EAAoB,KAAK,SAAS,EAAE,MAAM,WAAW,CAAA;AAQ5D,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC,GAAG;IACpF,yEAAyE;IACzE,cAAc,CAAC,EAAE,SAAS,CAAA;IAC1B,8DAA8D;IAC9D,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,oFAAoF;IACpF,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,uEAAuE;IACvE,IAAI,CAAC,EAAE,OAAO,CAAA;CACf,CAAA;AAYD,QAAA,MAAM,KAAK,
|
|
1
|
+
{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/input.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,OAAO,EAAE,KAAK,IAAI,QAAQ,EAAU,MAAM,YAAY,CAAA;AAEtD,OAAO,EAAwB,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAIjF,OAAO,EAAoB,KAAK,SAAS,EAAE,MAAM,WAAW,CAAA;AAQ5D,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC,GAAG;IACpF,yEAAyE;IACzE,cAAc,CAAC,EAAE,SAAS,CAAA;IAC1B,8DAA8D;IAC9D,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,oFAAoF;IACpF,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,uEAAuE;IACvE,IAAI,CAAC,EAAE,OAAO,CAAA;CACf,CAAA;AAYD,QAAA,MAAM,KAAK,sHAgFT,CAAA;AAEF,OAAO,EAAE,KAAK,EAAE,CAAA"}
|
|
@@ -32,7 +32,11 @@ const Input = /* @__PURE__ */ forwardRef(function Input({ startAdornment, endAdo
|
|
|
32
32
|
const toggle = isPassword && reveal;
|
|
33
33
|
const box = BOX[size];
|
|
34
34
|
const inset = box.gutter + MARK;
|
|
35
|
-
const field = (_jsx(GuiInput, { ref: ref, ...slot('input'), ...(isPassword ? masked(!revealed) : { type, secureTextEntry }), ...FIELD, ...(fill ? FILL : null), height: box.h, ...('height' in props ? null : { $touchable: { height: Math.max(box.h, TOUCH) } }), width: "100%", minW: 0,
|
|
35
|
+
const field = (_jsx(GuiInput, { ref: ref, ...slot('input'), ...(isPassword ? masked(!revealed) : { type, secureTextEntry }), ...FIELD, ...(fill ? FILL : null), height: box.h, ...('height' in props ? null : { $touchable: { height: Math.max(box.h, TOUCH) } }), width: "100%", minW: 0,
|
|
36
|
+
// The value at the full ink, the hint at the placeholder token. gui's
|
|
37
|
+
// Input sub-theme draws its value at 80% grey, which left a typed value
|
|
38
|
+
// and a sample placeholder one rung apart.
|
|
39
|
+
color: "$ink", placeholderTextColor: "$placeholderColor", fontSize: "$3", pl: startAdornment ? inset : box.gutter, pr: endAdornment || toggle ? inset : box.gutter, ...props }));
|
|
36
40
|
if (!startAdornment && !endAdornment && !toggle)
|
|
37
41
|
return field;
|
|
38
42
|
return (_jsxs(XStack, { position: "relative", width: "100%", items: "center", children: [startAdornment ? (_jsx(XStack, { ...well('l', box.gutter), pointerEvents: "none", opacity: 0.6, children: startAdornment })) : null, field, toggle ? (_jsx(XStack
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../src/backends/gui/input.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;GAMG;AACH,OAAO,EAAE,KAAK,IAAI,QAAQ,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AACtD,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAuC,MAAM,OAAO,CAAA;AACjF,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AAC/B,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,EAAkB,MAAM,WAAW,CAAA;AAE5D,8EAA8E;AAC9E,MAAM,IAAI,GAAG,EAAE,CAAA;AAEf,+FAA+F;AAC/F,MAAM,KAAK,GAAG,EAAE,CAAA;AAuBhB,MAAM,IAAI,GAAG,CAAC,IAAe,EAAE,MAAc,EAAE,EAAE,CAC/C,CAAC;IACC,QAAQ,EAAE,UAAmB;IAC7B,CAAC,IAAI,CAAC,EAAE,MAAM;IACd,CAAC,EAAE,CAAC;IACJ,CAAC,EAAE,CAAC;IACJ,KAAK,EAAE,QAAiB;IACxB,OAAO,EAAE,QAAiB;CAC3B,CAAC,CAAA;AAEJ,MAAM,KAAK,GAAG,eAAe,CAAC,UAAU,CAA+B,SAAS,KAAK,CACnF,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,GAAG,IAAI,EAAE,IAAI,EAAE,eAAe,EAAE,IAAI,GAAG,SAAS,EAAE,IAAI,GAAG,KAAK,EAAE,GAAG,KAAK,EAAE,EAChH,GAAG;IAEH,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC/C,MAAM,UAAU,GAAG,IAAI,KAAK,UAAU,IAAI,eAAe,KAAK,IAAI,CAAA;IAClE,MAAM,MAAM,GAAG,UAAU,IAAI,MAAM,CAAA;IACnC,MAAM,GAAG,GAAG,GAAG,CAAC,IAAiB,CAAC,CAAA;IAClC,MAAM,KAAK,GAAG,GAAG,CAAC,MAAM,GAAG,IAAI,CAAA;IAE/B,MAAM,KAAK,GAAG,CACZ,KAAC,QAAQ,IACP,GAAG,EAAE,GAAY,KACb,IAAI,CAAC,OAAO,CAAC,KAYb,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC,KAM5D,KAAK,KACL,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,EACxB,MAAM,EAAE,GAAG,CAAC,CAAC,KAET,CAAC,QAAQ,IAAI,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,EACnF,KAAK,EAAC,MAAM,EACZ,IAAI,EAAE,CAAC,
|
|
1
|
+
{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../src/backends/gui/input.tsx"],"names":[],"mappings":"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"}
|
|
@@ -84,7 +84,11 @@ const Textarea = /* @__PURE__ */ React.forwardRef(function Textarea({ rows, valu
|
|
|
84
84
|
// first line sat 1px under the edge where its neighbours' sat at 8. In a
|
|
85
85
|
// form the two are read together, and the text looked like it was falling
|
|
86
86
|
// out of the top of the box. The riser is that arithmetic, per size.
|
|
87
|
-
px: box.gutter, pt: box.riser, pb: box.riser, borderColor: invalid && invalid !== "false" ? "$red7" : "$borderColor",
|
|
87
|
+
px: box.gutter, pt: box.riser, pb: box.riser, borderColor: invalid && invalid !== "false" ? "$red7" : "$borderColor",
|
|
88
|
+
// The value at the full ink, the hint at the placeholder token. gui's
|
|
89
|
+
// Input sub-theme draws its value at 80% grey, which left a typed value
|
|
90
|
+
// and a sample placeholder one rung apart.
|
|
91
|
+
color: "$ink", placeholderTextColor: "$placeholderColor", fontSize: "$3", opacity: props.disabled ? 0.5 : 1, ...props,
|
|
88
92
|
// After the caller's props, so a passed `style` cannot silently disable
|
|
89
93
|
// growth. A fixed height is asked for with `height`.
|
|
90
94
|
style: { ...style, ...(grown ? { height: grown } : null) } }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/textarea.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAoB,KAAK,SAAS,EAAE,MAAM,WAAW,CAAA;AAS5D;;;;;;;;;;;;;;;GAeG;AACH;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC,GAC1F,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC,GAAG;IAC7D,4EAA4E;IAC5E,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,uEAAuE;IACvE,IAAI,CAAC,EAAE,OAAO,CAAA;CACf,CAAA;AAEH,QAAA,MAAM,QAAQ,
|
|
1
|
+
{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/textarea.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAoB,KAAK,SAAS,EAAE,MAAM,WAAW,CAAA;AAS5D;;;;;;;;;;;;;;;GAeG;AACH;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC,GAC1F,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC,GAAG;IAC7D,4EAA4E;IAC5E,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,uEAAuE;IACvE,IAAI,CAAC,EAAE,OAAO,CAAA;CACf,CAAA;AAEH,QAAA,MAAM,QAAQ,wGA4Eb,CAAA;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}
|
|
@@ -48,7 +48,11 @@ const Textarea = /* @__PURE__ */ React.forwardRef(function Textarea({ rows, valu
|
|
|
48
48
|
// first line sat 1px under the edge where its neighbours' sat at 8. In a
|
|
49
49
|
// form the two are read together, and the text looked like it was falling
|
|
50
50
|
// out of the top of the box. The riser is that arithmetic, per size.
|
|
51
|
-
px: box.gutter, pt: box.riser, pb: box.riser, borderColor: invalid && invalid !== "false" ? "$red7" : "$borderColor",
|
|
51
|
+
px: box.gutter, pt: box.riser, pb: box.riser, borderColor: invalid && invalid !== "false" ? "$red7" : "$borderColor",
|
|
52
|
+
// The value at the full ink, the hint at the placeholder token. gui's
|
|
53
|
+
// Input sub-theme draws its value at 80% grey, which left a typed value
|
|
54
|
+
// and a sample placeholder one rung apart.
|
|
55
|
+
color: "$ink", placeholderTextColor: "$placeholderColor", fontSize: "$3", opacity: props.disabled ? 0.5 : 1, ...props,
|
|
52
56
|
// After the caller's props, so a passed `style` cannot silently disable
|
|
53
57
|
// growth. A fixed height is asked for with `height`.
|
|
54
58
|
style: { ...style, ...(grown ? { height: grown } : null) } }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../src/backends/gui/textarea.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../src/backends/gui/textarea.tsx"],"names":[],"mappings":"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"}
|
package/dist/consent/Consent.cjs
CHANGED
|
@@ -6,25 +6,19 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
6
6
|
/**
|
|
7
7
|
* Consent — the one cookie banner every Hanzo, Lux and Zoo site mounts.
|
|
8
8
|
*
|
|
9
|
-
* It draws the choice; @hanzo/event stores it (`hz_consent`) and
|
|
10
|
-
*
|
|
11
|
-
* Consent Mode v2 starts denied.
|
|
9
|
+
* It draws the choice; @hanzo/event stores it (`hz_consent`) and acts on it:
|
|
10
|
+
* nothing from an ad platform, no Google, and no event on our own stream before
|
|
11
|
+
* Accept, and Google Consent Mode v2 starts denied.
|
|
12
12
|
*
|
|
13
|
-
* -
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
* them. A notice there is no law asking for is a popup.
|
|
20
|
-
* - cloud resolves the region from where the request came from and serves it
|
|
21
|
-
* with the site's tag config. The banner redraws when the answer arrives, and
|
|
22
|
-
* asks again when the policy version changes.
|
|
23
|
-
* - Global Privacy Control: marketing and ads are off and their switches are
|
|
24
|
-
* locked, in every zone.
|
|
13
|
+
* - every visitor, wherever they are, is asked: a banner with Accept all,
|
|
14
|
+
* Reject all and Choose, until they have chosen. Nothing optional loads first.
|
|
15
|
+
* - Global Privacy Control or Do Not Track is the visitor's answer already: they
|
|
16
|
+
* are not asked, nothing optional runs, and the switches are locked off.
|
|
17
|
+
* - cloud serves the policy with the site's tag config; the banner redraws when
|
|
18
|
+
* it arrives, and asks again when the policy version changes.
|
|
25
19
|
*
|
|
26
20
|
* `Consent` mounts once near the root; `ConsentLink` goes wherever a footer
|
|
27
|
-
* link goes and opens the panel from anywhere.
|
|
21
|
+
* link goes and opens the panel from anywhere. `brand` names who is asking.
|
|
28
22
|
*/
|
|
29
23
|
const gui_1 = require("@hanzo/gui");
|
|
30
24
|
const event_1 = require("@hanzo/event");
|
|
@@ -39,22 +33,33 @@ const openConsent = () => {
|
|
|
39
33
|
window.dispatchEvent(new Event(OPEN));
|
|
40
34
|
};
|
|
41
35
|
exports.openConsent = openConsent;
|
|
42
|
-
const
|
|
43
|
-
{ key: 'analytics', title: 'Analytics', body:
|
|
36
|
+
const kinds = (brand) => [
|
|
37
|
+
{ key: 'analytics', title: 'Analytics', body: `Counts visits and finds what is broken, so ${brand} can get better.` },
|
|
44
38
|
{ key: 'marketing', title: 'Marketing', body: 'Lets ad platforms measure the sign-ups and orders their ads led to.' },
|
|
45
39
|
{ key: 'ads', title: 'Personalized ads', body: 'Lets those platforms use your visit to show you ads elsewhere.' },
|
|
46
40
|
];
|
|
47
|
-
/**
|
|
41
|
+
/** The banner's inset from the window's foot and sides: 16px, or the device's inset and 8px where that is wider. */
|
|
42
|
+
const EDGE = {
|
|
43
|
+
bottom: 'max(16px, calc(var(--safe-bottom, env(safe-area-inset-bottom, 0px)) + 8px))',
|
|
44
|
+
left: 'max(16px, calc(var(--safe-left, env(safe-area-inset-left, 0px)) + 8px))',
|
|
45
|
+
right: 'max(16px, calc(var(--safe-right, env(safe-area-inset-right, 0px)) + 8px))',
|
|
46
|
+
};
|
|
47
|
+
/**
|
|
48
|
+
* Where the banner sits: fixed to the foot of the window, clear of the home
|
|
49
|
+
* indicator and the notch, centred. It stands on design's banner rung
|
|
50
|
+
* (`--z-banner`): over the page and its dock, under every overlay — a dialog, a
|
|
51
|
+
* menu, a phone drawer — and is answered once they close.
|
|
52
|
+
*/
|
|
48
53
|
const frame = {
|
|
49
54
|
...(0, slot_1.slot)('consent'),
|
|
50
55
|
role: 'dialog',
|
|
51
56
|
'aria-label': 'Cookie preferences',
|
|
52
57
|
position: 'fixed',
|
|
53
|
-
b:
|
|
54
|
-
l:
|
|
55
|
-
r:
|
|
58
|
+
b: EDGE.bottom,
|
|
59
|
+
l: EDGE.left,
|
|
60
|
+
r: EDGE.right,
|
|
56
61
|
mx: 'auto',
|
|
57
|
-
z:
|
|
62
|
+
z: 'var(--z-banner, 50)',
|
|
58
63
|
py: '$2.5',
|
|
59
64
|
px: '$3.5',
|
|
60
65
|
rounded: '$5',
|
|
@@ -69,7 +74,7 @@ const frame = {
|
|
|
69
74
|
const FIT = { width: 'fit-content' };
|
|
70
75
|
/** A link in the banner's line: the line's own ink, underlined, never broken across lines. */
|
|
71
76
|
const INLINE = { color: 'inherit', textDecoration: 'underline', whiteSpace: 'nowrap' };
|
|
72
|
-
const Consent = ({ privacy = 'https://hanzo.ai/privacy' }) => {
|
|
77
|
+
const Consent = ({ privacy = 'https://hanzo.ai/privacy', brand = 'Hanzo' }) => {
|
|
73
78
|
const [shown, setShown] = (0, react_1.useState)(false);
|
|
74
79
|
const [choosing, setChoosing] = (0, react_1.useState)(false);
|
|
75
80
|
const [draft, setDraft] = (0, react_1.useState)({ analytics: false, marketing: false, ads: false });
|
|
@@ -77,7 +82,8 @@ const Consent = ({ privacy = 'https://hanzo.ai/privacy' }) => {
|
|
|
77
82
|
// arrives after (cloud answers ~150ms into a page opened at #choices) redraws
|
|
78
83
|
// the banner's question, and must not close what was asked for.
|
|
79
84
|
const asked = (0, react_1.useRef)(false);
|
|
80
|
-
|
|
85
|
+
// The browser refused, as the page sees it or as cloud saw the request.
|
|
86
|
+
const locked = typeof window !== 'undefined' && (0, event_1.declined)();
|
|
81
87
|
(0, react_1.useEffect)(() => {
|
|
82
88
|
const sync = () => setShown((0, event_1.asks)() || asked.current);
|
|
83
89
|
sync();
|
|
@@ -109,8 +115,8 @@ const Consent = ({ privacy = 'https://hanzo.ai/privacy' }) => {
|
|
|
109
115
|
setShown(true);
|
|
110
116
|
};
|
|
111
117
|
if (choosing)
|
|
112
|
-
return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...frame, maxW: 440, gap: "$3", children: [(0, jsx_runtime_1.jsxs)(gui_1.Paragraph, { size: "$2", color: "$ink", m: 0, children: [
|
|
113
|
-
const off = locked
|
|
118
|
+
return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...frame, maxW: 440, gap: "$3", maxH: `calc(100dvh - var(--safe-top, env(safe-area-inset-top, 0px)) - var(--header, 0px) - ${EDGE.bottom} - 16px)`, overflowY: "auto", children: [(0, jsx_runtime_1.jsxs)(gui_1.Paragraph, { size: "$2", color: "$ink", m: 0, children: [`Choose what ${brand} may measure and share. You can change this at any time. `, (0, jsx_runtime_1.jsx)("a", { href: privacy, style: INLINE, children: "Privacy policy" })] }), locked ? ((0, jsx_runtime_1.jsx)(gui_1.Paragraph, { size: "$2", color: "$soft", m: 0, children: "Your browser asks sites not to track you, so all of these stay off." })) : null, kinds(brand).map((k) => {
|
|
119
|
+
const off = locked;
|
|
114
120
|
return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { gap: "$3", items: "center", justify: "space-between", children: [(0, jsx_runtime_1.jsxs)(gui_1.YStack, { flex: 1, children: [(0, jsx_runtime_1.jsx)(gui_1.Paragraph, { size: "$2", color: "$ink", fontWeight: "500", m: 0, children: k.title }), (0, jsx_runtime_1.jsx)(gui_1.Paragraph, { size: "$1", color: "$soft", m: 0, children: k.body })] }), (0, jsx_runtime_1.jsx)(switch_1.Switch, { "aria-label": k.title, disabled: off, checked: off ? false : draft[k.key], onCheckedChange: (v) => setDraft({ ...draft, [k.key]: v === true }) })] }, k.key));
|
|
115
121
|
}), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { gap: "$2", justify: "flex-end", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", size: "sm", variant: "secondary", onClick: done(event_1.rejectAll), children: "Reject all" }), (0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", size: "sm", onClick: done(() => (0, event_1.saveConsent)(draft)), children: "Save choices" })] })] }));
|
|
116
122
|
// One bar: the line and its link, then the buttons. They share a row where
|
|
@@ -3,8 +3,10 @@ export declare const openConsent: () => void;
|
|
|
3
3
|
export type ConsentProps = {
|
|
4
4
|
/** Where the privacy policy lives. */
|
|
5
5
|
privacy?: string;
|
|
6
|
+
/** Who is asking: the brand the visitor is on. */
|
|
7
|
+
brand?: string;
|
|
6
8
|
};
|
|
7
|
-
declare const Consent: ({ privacy }: ConsentProps) => import("react").JSX.Element | null;
|
|
9
|
+
declare const Consent: ({ privacy, brand }: ConsentProps) => import("react").JSX.Element | null;
|
|
8
10
|
/** The footer link that reopens the choices, in every footer and every region. */
|
|
9
11
|
declare const ConsentLink: ({ label }: {
|
|
10
12
|
label?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Consent.d.ts","sourceRoot":"","sources":["../../src/consent/Consent.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Consent.d.ts","sourceRoot":"","sources":["../../src/consent/Consent.tsx"],"names":[],"mappings":"AA6BA,uCAAuC;AACvC,eAAO,MAAM,WAAW,QAAO,IAE9B,CAAA;AAiDD,MAAM,MAAM,YAAY,GAAG;IACzB,sCAAsC;IACtC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,QAAA,MAAM,OAAO,uBAA+D,YAAY,uCA0HvF,CAAA;AAED,kFAAkF;AAClF,QAAA,MAAM,WAAW,cAAmC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,gCAIrE,CAAA;AAED,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,CAAA"}
|
package/dist/consent/Consent.js
CHANGED
|
@@ -3,28 +3,22 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
/**
|
|
4
4
|
* Consent — the one cookie banner every Hanzo, Lux and Zoo site mounts.
|
|
5
5
|
*
|
|
6
|
-
* It draws the choice; @hanzo/event stores it (`hz_consent`) and
|
|
7
|
-
*
|
|
8
|
-
* Consent Mode v2 starts denied.
|
|
6
|
+
* It draws the choice; @hanzo/event stores it (`hz_consent`) and acts on it:
|
|
7
|
+
* nothing from an ad platform, no Google, and no event on our own stream before
|
|
8
|
+
* Accept, and Google Consent Mode v2 starts denied.
|
|
9
9
|
*
|
|
10
|
-
* -
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
* them. A notice there is no law asking for is a popup.
|
|
17
|
-
* - cloud resolves the region from where the request came from and serves it
|
|
18
|
-
* with the site's tag config. The banner redraws when the answer arrives, and
|
|
19
|
-
* asks again when the policy version changes.
|
|
20
|
-
* - Global Privacy Control: marketing and ads are off and their switches are
|
|
21
|
-
* locked, in every zone.
|
|
10
|
+
* - every visitor, wherever they are, is asked: a banner with Accept all,
|
|
11
|
+
* Reject all and Choose, until they have chosen. Nothing optional loads first.
|
|
12
|
+
* - Global Privacy Control or Do Not Track is the visitor's answer already: they
|
|
13
|
+
* are not asked, nothing optional runs, and the switches are locked off.
|
|
14
|
+
* - cloud serves the policy with the site's tag config; the banner redraws when
|
|
15
|
+
* it arrives, and asks again when the policy version changes.
|
|
22
16
|
*
|
|
23
17
|
* `Consent` mounts once near the root; `ConsentLink` goes wherever a footer
|
|
24
|
-
* link goes and opens the panel from anywhere.
|
|
18
|
+
* link goes and opens the panel from anywhere. `brand` names who is asking.
|
|
25
19
|
*/
|
|
26
20
|
import { Paragraph, XStack, YStack } from '@hanzo/gui';
|
|
27
|
-
import { acceptAll, asks,
|
|
21
|
+
import { acceptAll, asks, declined, POLICY_EVENT, readConsent, rejectAll, saveConsent } from '@hanzo/event';
|
|
28
22
|
import { useEffect, useRef, useState } from 'react';
|
|
29
23
|
import { Button } from '../backends/gui/button.js';
|
|
30
24
|
import { Switch } from '../backends/gui/switch.js';
|
|
@@ -35,22 +29,33 @@ export const openConsent = () => {
|
|
|
35
29
|
if (typeof window !== 'undefined')
|
|
36
30
|
window.dispatchEvent(new Event(OPEN));
|
|
37
31
|
};
|
|
38
|
-
const
|
|
39
|
-
{ key: 'analytics', title: 'Analytics', body:
|
|
32
|
+
const kinds = (brand) => [
|
|
33
|
+
{ key: 'analytics', title: 'Analytics', body: `Counts visits and finds what is broken, so ${brand} can get better.` },
|
|
40
34
|
{ key: 'marketing', title: 'Marketing', body: 'Lets ad platforms measure the sign-ups and orders their ads led to.' },
|
|
41
35
|
{ key: 'ads', title: 'Personalized ads', body: 'Lets those platforms use your visit to show you ads elsewhere.' },
|
|
42
36
|
];
|
|
43
|
-
/**
|
|
37
|
+
/** The banner's inset from the window's foot and sides: 16px, or the device's inset and 8px where that is wider. */
|
|
38
|
+
const EDGE = {
|
|
39
|
+
bottom: 'max(16px, calc(var(--safe-bottom, env(safe-area-inset-bottom, 0px)) + 8px))',
|
|
40
|
+
left: 'max(16px, calc(var(--safe-left, env(safe-area-inset-left, 0px)) + 8px))',
|
|
41
|
+
right: 'max(16px, calc(var(--safe-right, env(safe-area-inset-right, 0px)) + 8px))',
|
|
42
|
+
};
|
|
43
|
+
/**
|
|
44
|
+
* Where the banner sits: fixed to the foot of the window, clear of the home
|
|
45
|
+
* indicator and the notch, centred. It stands on design's banner rung
|
|
46
|
+
* (`--z-banner`): over the page and its dock, under every overlay — a dialog, a
|
|
47
|
+
* menu, a phone drawer — and is answered once they close.
|
|
48
|
+
*/
|
|
44
49
|
const frame = {
|
|
45
50
|
...slot('consent'),
|
|
46
51
|
role: 'dialog',
|
|
47
52
|
'aria-label': 'Cookie preferences',
|
|
48
53
|
position: 'fixed',
|
|
49
|
-
b:
|
|
50
|
-
l:
|
|
51
|
-
r:
|
|
54
|
+
b: EDGE.bottom,
|
|
55
|
+
l: EDGE.left,
|
|
56
|
+
r: EDGE.right,
|
|
52
57
|
mx: 'auto',
|
|
53
|
-
z:
|
|
58
|
+
z: 'var(--z-banner, 50)',
|
|
54
59
|
py: '$2.5',
|
|
55
60
|
px: '$3.5',
|
|
56
61
|
rounded: '$5',
|
|
@@ -65,7 +70,7 @@ const frame = {
|
|
|
65
70
|
const FIT = { width: 'fit-content' };
|
|
66
71
|
/** A link in the banner's line: the line's own ink, underlined, never broken across lines. */
|
|
67
72
|
const INLINE = { color: 'inherit', textDecoration: 'underline', whiteSpace: 'nowrap' };
|
|
68
|
-
const Consent = ({ privacy = 'https://hanzo.ai/privacy' }) => {
|
|
73
|
+
const Consent = ({ privacy = 'https://hanzo.ai/privacy', brand = 'Hanzo' }) => {
|
|
69
74
|
const [shown, setShown] = useState(false);
|
|
70
75
|
const [choosing, setChoosing] = useState(false);
|
|
71
76
|
const [draft, setDraft] = useState({ analytics: false, marketing: false, ads: false });
|
|
@@ -73,7 +78,8 @@ const Consent = ({ privacy = 'https://hanzo.ai/privacy' }) => {
|
|
|
73
78
|
// arrives after (cloud answers ~150ms into a page opened at #choices) redraws
|
|
74
79
|
// the banner's question, and must not close what was asked for.
|
|
75
80
|
const asked = useRef(false);
|
|
76
|
-
|
|
81
|
+
// The browser refused, as the page sees it or as cloud saw the request.
|
|
82
|
+
const locked = typeof window !== 'undefined' && declined();
|
|
77
83
|
useEffect(() => {
|
|
78
84
|
const sync = () => setShown(asks() || asked.current);
|
|
79
85
|
sync();
|
|
@@ -105,8 +111,8 @@ const Consent = ({ privacy = 'https://hanzo.ai/privacy' }) => {
|
|
|
105
111
|
setShown(true);
|
|
106
112
|
};
|
|
107
113
|
if (choosing)
|
|
108
|
-
return (_jsxs(YStack, { ...frame, maxW: 440, gap: "$3", children: [_jsxs(Paragraph, { size: "$2", color: "$ink", m: 0, children: [
|
|
109
|
-
const off = locked
|
|
114
|
+
return (_jsxs(YStack, { ...frame, maxW: 440, gap: "$3", maxH: `calc(100dvh - var(--safe-top, env(safe-area-inset-top, 0px)) - var(--header, 0px) - ${EDGE.bottom} - 16px)`, overflowY: "auto", children: [_jsxs(Paragraph, { size: "$2", color: "$ink", m: 0, children: [`Choose what ${brand} may measure and share. You can change this at any time. `, _jsx("a", { href: privacy, style: INLINE, children: "Privacy policy" })] }), locked ? (_jsx(Paragraph, { size: "$2", color: "$soft", m: 0, children: "Your browser asks sites not to track you, so all of these stay off." })) : null, kinds(brand).map((k) => {
|
|
115
|
+
const off = locked;
|
|
110
116
|
return (_jsxs(XStack, { gap: "$3", items: "center", justify: "space-between", children: [_jsxs(YStack, { flex: 1, children: [_jsx(Paragraph, { size: "$2", color: "$ink", fontWeight: "500", m: 0, children: k.title }), _jsx(Paragraph, { size: "$1", color: "$soft", m: 0, children: k.body })] }), _jsx(Switch, { "aria-label": k.title, disabled: off, checked: off ? false : draft[k.key], onCheckedChange: (v) => setDraft({ ...draft, [k.key]: v === true }) })] }, k.key));
|
|
111
117
|
}), _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { type: "button", size: "sm", variant: "secondary", onClick: done(rejectAll), children: "Reject all" }), _jsx(Button, { type: "button", size: "sm", onClick: done(() => saveConsent(draft)), children: "Save choices" })] })] }));
|
|
112
118
|
// One bar: the line and its link, then the buttons. They share a row where
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Consent.js","sourceRoot":"","sources":["../../src/consent/Consent.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ
|
|
1
|
+
{"version":3,"file":"Consent.js","sourceRoot":"","sources":["../../src/consent/Consent.tsx"],"names":[],"mappings":"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"}
|