@hanzo/ui 8.29.15 → 8.29.19

package/dist/consent/Consent.cjs

@@ -6,27 +6,33 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 /**
  * Consent — the one cookie banner every Hanzo, Lux and Zoo site mounts.
  *
- * It draws the choice; @hanzo/event stores it (`hz_consent`) and acts on it: no
- * Google Analytics, no Meta pixel and no ad personalization before Accept, and
- * Google Consent Mode v2 starts denied. The brand's own first-party analytics is
- * strictly necessary and runs for every visitor; the choice does not govern it.
+ * It draws the choice; @hanzo/event stores it (`hz_consent`) and acts on it. The
+ * brand's own first-party analytics is strictly necessary and runs for every
+ * visitor. What the third parties (Google Analytics, the Meta pixel, their ad
+ * personalization) may do is regional: cloud places the visitor by GeoIP and
+ * serves a `mode` with the site's tag config (`consentPolicy()`).
  *
- *  - every visitor, wherever they are, is asked: a bar with Manage preferences,
- *    Accept all and a ×, until they have chosen. Nothing optional loads first.
- *  - the bar's × is a choice, not a dismissal: it stores essential cookies only
- *    and closes, so refusing is one press, exactly as accepting is.
- *  - Manage preferences opens the Cookie Preferences sheet: a modal with one
- *    section per category, Strictly Necessary always on, the rest switches that
- *    start off until chosen, and the policy links.
- *  - Global Privacy Control or Do Not Track is the visitor's answer already: they
- *    are not asked, nothing optional runs, and the switches are locked off.
- *  - cloud serves the policy with the site's tag config; the bar redraws when it
- *    arrives, and asks again when the policy version changes.
+ *  - `eu`: opt-in. A bar with Manage preferences, Accept all and a ×, until the
+ *    visitor has chosen; what a third party may do meanwhile is @hanzo/event's
+ *    rule (consent.ts, tags.ts). The × is a choice, not a dismissal: essential
+ *    cookies only, so refusing is one press, exactly as accepting is.
+ *  - `us_privacy`: opt-out. No bar; Google Analytics and Meta run by default, and
+ *    "Your Privacy Choices" opens the sheet, where turning a switch off saves at
+ *    once. The advertising switch is the sale and sharing opt-out.
+ *  - `global`: a notice. One line and a × that records it as seen; the same
+ *    opt-out sheet stays one press away.
+ *  - Global Privacy Control or Do Not Track is an answer already: in `eu` every
+ *    switch is held off and the visitor is not asked; elsewhere the sale and
+ *    sharing for targeted advertising is held off.
+ *  - Until cloud answers, nothing is drawn: the answer this tab was last served
+ *    (@hanzo/event keeps it) is used at once, and with none by 1.5s the strict
+ *    `eu` rule applies.
  *
  * `Consent` mounts once near the root. `openConsent()`, `ConsentLink` and any
- * link to `#choices` (the footer's Privacy choices) open the sheet from anywhere.
- * `brand` names who is asking; `cookies`, `privacy` and `terms` are the brand's
- * own policies.
+ * link to `#choices` (the footer's Your Privacy Choices) open the sheet from
+ * anywhere. A page with no such link in it gets a small one, fixed to the foot of
+ * the window, so the choices are always one press away. `brand` names who is
+ * asking; `cookies`, `privacy` and `terms` are the brand's own policies.
  */
 const gui_1 = require("@hanzo/gui");
 const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
@@ -36,6 +42,7 @@ const button_1 = require("../backends/gui/button.cjs");
 const dir_1 = require("../backends/gui/dir.cjs");
 const switch_1 = require("../backends/gui/switch.cjs");
 const slot_1 = require("../backends/gui/slot.cjs");
+const icon_1 = require("./icon.cjs");
 const OPEN = 'hzconsent-open';
 /** The address that opens the sheet, from any link on any page. */
 const HASH = '#choices';
@@ -45,7 +52,51 @@ const openConsent = () => {
         window.dispatchEvent(new Event(OPEN));
 };
 exports.openConsent = openConsent;
-const kinds = (brand) => [
+/** How long a page waits for cloud's rule before the strict one applies. */
+const WAIT = 1500;
+/**
+ * The rule, once one has been served: on this page, or to this tab before (then
+ * it carries the region cloud placed the visitor in). `consentPolicy()` answers
+ * `eu` before either, which is the rule to wait out rather than draw.
+ */
+const served = () => {
+    const p = (0, event_1.consentPolicy)();
+    return p.region ? p.mode : undefined;
+};
+/*
+ * The links a page draws to the sheet, counted on the page (not in module scope,
+ * since a bundle may carry two copies of this module), so the component draws its
+ * own only where the page has none.
+ */
+const LINKS = Symbol.for('hanzo.ui.consent.links');
+const LINKS_EVENT = 'hzconsent-links';
+function hold() {
+    const g = globalThis;
+    g[LINKS] = (g[LINKS] ?? 0) + 1;
+    window.dispatchEvent(new Event(LINKS_EVENT));
+    return () => {
+        g[LINKS] = Math.max(0, (g[LINKS] ?? 1) - 1);
+        window.dispatchEvent(new Event(LINKS_EVENT));
+    };
+}
+/** Whether the page draws a way to the sheet: a ConsentLink, or a link on this site to #choices (a footer's). */
+function linked() {
+    const g = globalThis;
+    if ((g[LINKS] ?? 0) > 0)
+        return true;
+    for (const a of document.querySelectorAll(`a[href*="${HASH}"]`)) {
+        try {
+            const to = new URL(a.getAttribute('href') ?? '', document.baseURI);
+            if (to.hash === HASH && to.origin === window.location.origin)
+                return true;
+        }
+        catch {
+            /* an address that does not parse leads nowhere */
+        }
+    }
+    return false;
+}
+const kinds = (brand, strict) => [
     {
         id: 'necessary',
         title: 'Strictly Necessary Cookies',
@@ -67,9 +118,17 @@ const kinds = (brand) => [
         id: 'ads',
         key: 'ads',
         title: 'Sell, Share, or Use Your Data for Targeted Advertising',
-        body: 'Lets Google and Meta use your visit to choose the ads they show you on other sites and apps. Some US state privacy laws call this a “sale” or “sharing” of your personal information, or “targeted advertising”, and give you the right to opt out: it stays off unless you turn it on.',
+        body: `Lets Google and Meta use your visits to choose the ads they show you on other sites and apps. Some US state privacy laws call this a “sale” or “sharing” of your personal information, or “targeted advertising”, and give you the right to opt out: ${strict ? 'it stays off unless you turn it on.' : 'turn this off to opt out.'}`,
     },
 ];
+/** The sheet's opening line, by rule: what runs before the visitor does anything, and how to change it. */
+const intro = (strict) => strict
+    ? 'We use cookies and similar technologies to provide our services, measure performance, and support advertising. Essential cookies are required for the site to work and cannot be turned off. You can allow or reject optional cookies below. Learn more in our '
+    : 'We use cookies and similar technologies to provide our services, measure performance, and support advertising. Google Analytics and the Meta pixel run on this site by default. Turn either off below, or turn off the last switch to opt out of the sale or sharing of your personal information for targeted advertising; each switch is saved as soon as you change it. Essential cookies are required for the site to work and cannot be turned off. Learn more in our ';
+/** What a browser that sends Global Privacy Control or Do Not Track holds off, by rule. */
+const refusal = (strict) => strict
+    ? 'Your browser asks sites not to track you, so all of these stay off.'
+    : 'Your browser asks sites not to track you, so your data is not sold or shared for targeted advertising.';
 /** The bar's and the sheet's inset from the window's edges: 16px, or the device's inset and 8px where that is wider. */
 const EDGE = {
     top: 'max(16px, calc(var(--safe-top, env(safe-area-inset-top, 0px)) + 8px))',
@@ -77,12 +136,18 @@ const EDGE = {
     left: 'max(16px, calc(var(--safe-left, env(safe-area-inset-left, 0px)) + 8px))',
     right: 'max(16px, calc(var(--safe-right, env(safe-area-inset-right, 0px)) + 8px))',
 };
-/** The panel both wear: the card's ground, edge, corner (`$6`, the sign-in card's) and floating shadow. */
+/**
+ * Corners from design's ladder (radius.css), one step apart so the buttons sit
+ * concentric in their card: a button on `--radius-lg` (12px), the bar and the
+ * sheet on `--radius-xl` (16px). Both follow `--radius-scale`; neither is a pill.
+ */
+const ROUND = { button: 'var(--radius-lg, 12px)', card: 'var(--radius-xl, 16px)' };
+/** The panel both wear: the card's ground, edge, corner and floating shadow. */
 const PANEL = {
     bg: '$background',
     borderWidth: 1,
     borderColor: '$borderColor',
-    rounded: '$6',
+    rounded: ROUND.card,
     shadowColor: 'rgba(0,0,0,0.25)',
     shadowRadius: 24,
     shadowOffset: { width: 0, height: 8 },
@@ -96,8 +161,6 @@ const PANEL = {
 const frame = {
     ...(0, slot_1.slot)('consent'),
     ...PANEL,
-    role: 'dialog',
-    'aria-label': 'Cookie preferences',
     position: 'fixed',
     b: EDGE.bottom,
     l: EDGE.left,
@@ -106,13 +169,59 @@ const frame = {
     z: 'var(--z-banner, 50)',
     py: '$3',
     paddingInlineStart: '$4',
-    // Clear of the × in the corner: its 32px, and 12px either side.
+    // Clear of the × in the corner: its 36px, 12px outside it and 8px before it.
     paddingInlineEnd: 56,
 };
 /** The bar is as wide as its line and buttons, up to the window less its inset. */
 const FIT = { width: 'fit-content' };
-/** The one filled control in the bar and in the sheet: the ink, as the sign-in card's Continue. */
-const ACT = { bg: '$ink', color: '$background', borderColor: '$ink', hoverStyle: { opacity: 0.92 } };
+/** The keyboard's mark on any control here: design's focus ring, outside the control. */
+const RING = { outlineColor: 'var(--ring)', outlineStyle: 'solid', outlineWidth: 2, outlineOffset: 2 };
+/**
+ * A button's every state from design's button tokens (colors.css), so it follows
+ * the theme and an org's accent: at rest the fill, under the pointer and pressed
+ * its `-hover` step, focused by keyboard the ring. Each state names its fill and
+ * a clear edge outright, because a state that leaves one out takes the Button's
+ * own (the frame's hover is a near-black fill and a grey edge, which put dark
+ * text on dark under the cursor). 13px type on the 36px floor.
+ */
+const button = (fill, hover, ink) => ({
+    size: 'sm',
+    minH: 36,
+    rounded: ROUND.button,
+    bg: fill,
+    color: ink,
+    borderColor: 'transparent',
+    hoverStyle: { bg: hover, borderColor: 'transparent', opacity: 1 },
+    pressStyle: { bg: hover, borderColor: 'transparent', opacity: 1 },
+    focusStyle: { borderColor: 'transparent' },
+    focusVisibleStyle: RING,
+});
+/** The one filled control: Accept all in the bar, Save preferences (or Done) in the sheet. */
+const PRIMARY = button('var(--primary)', 'var(--primary-hover)', 'var(--primary-foreground)');
+/** Beside it: Manage preferences in the bar, Accept all in the sheet. */
+const SECONDARY = button('var(--secondary)', 'var(--secondary-hover)', 'var(--secondary-foreground)');
+/** A ×: no fill at rest, the secondary surface under the pointer. */
+const CLOSE = {
+    rounded: ROUND.button,
+    bg: 'transparent',
+    borderColor: 'transparent',
+    hoverStyle: { bg: 'var(--secondary)', borderColor: 'transparent', opacity: 1 },
+    pressStyle: { bg: 'var(--secondary-hover)', borderColor: 'transparent', opacity: 1 },
+    focusStyle: { borderColor: 'transparent' },
+    focusVisibleStyle: RING,
+};
+/** "Your Privacy Choices" as a footer draws a link: the icon, then the words, quiet until pointed at. */
+const CHOICES = {
+    type: 'button',
+    variant: 'link',
+    size: 'sm',
+    px: 0,
+    minH: 0,
+    color: '$aside',
+    hoverStyle: { color: '$ink' },
+    focusVisibleStyle: RING,
+    startIcon: (0, jsx_runtime_1.jsx)(icon_1.PrivacyChoicesIcon, {}),
+};
 /** A link in the sheet's intro: the line's own ink, underlined, never broken across lines. */
 const INLINE = { color: 'inherit', textDecoration: 'underline', whiteSpace: 'nowrap' };
 /** The sheet covers the window, on design's modal rung, over a scrim of its own. */
@@ -122,10 +231,20 @@ const FOCUSABLE = 'a[href], button:not([disabled]), [tabindex]:not([tabindex="-1
 /** A section's button never submits a form the sheet sits in. gui's stack props do not name `type`. */
 const BUTTON = { type: 'button' };
 const Consent = ({ cookies = 'https://hanzo.ai/cookies', privacy = 'https://hanzo.ai/privacy', terms = 'https://hanzo.ai/terms', brand = 'Hanzo', }) => {
+    // The rule in force: undefined until cloud (or this tab) has said, and nothing is drawn meanwhile.
+    const [mode, setMode] = (0, react_1.useState)();
+    // The bar (eu) or the notice (global) at the foot of the window.
     const [shown, setShown] = (0, react_1.useState)(false);
     const [choosing, setChoosing] = (0, react_1.useState)(false);
     const [draft, setDraft] = (0, react_1.useState)({ analytics: false, marketing: false, ads: false });
+    // The switches as they stand, for a handler registered once.
+    const latest = (0, react_1.useRef)(draft);
+    latest.current = draft;
     const [expanded, setExpanded] = (0, react_1.useState)({});
+    // Whether the page draws its own way to the sheet; if not, the component draws one.
+    const [hosted, setHosted] = (0, react_1.useState)(true);
+    // The rule, read by handlers registered once.
+    const rule = (0, react_1.useRef)(undefined);
     // The choices are open because the visitor asked for them. A policy that
     // arrives after (cloud answers ~150ms into a page opened at #choices) redraws
     // the bar's question, and must not close what was asked for.
@@ -135,12 +254,16 @@ const Consent = ({ cookies = 'https://hanzo.ai/cookies', privacy = 'https://hanz
     const sheet = (0, react_1.useRef)(null);
     const manage = (0, react_1.useRef)(null);
     const opened = (0, react_1.useRef)(false);
-    // The switches were filled from a stored choice, not left off.
+    // The switches were filled from a stored choice, not left at the rule's defaults.
     const seeded = (0, react_1.useRef)(false);
+    // The visitor has moved a switch since the sheet opened.
+    const touched = (0, react_1.useRef)(false);
     const id = (0, react_1.useId)();
     // The browser refused, as the page sees it or as cloud saw the request. State,
     // so cloud's answer redraws an open sheet.
     const [locked, setLocked] = (0, react_1.useState)(false);
+    /** What stands at the foot of the window under a rule: the eu bar until a choice, the global notice until seen. */
+    const front = (m = rule.current) => (m === 'eu' ? (0, event_1.asks)() : m === 'global' ? !(0, event_1.noticed)() : false);
     const choose = () => {
         // Already open: the visitor's unsaved switches and the focus to return stay as they are.
         if (asked.current)
@@ -148,33 +271,67 @@ const Consent = ({ cookies = 'https://hanzo.ai/cookies', privacy = 'https://hanz
         const at = document.activeElement;
         back.current = at instanceof HTMLElement && at !== document.body ? at : null;
         asked.current = true;
+        touched.current = false;
         setLocked((0, event_1.declined)());
         seeded.current = (0, event_1.storedConsent)();
         setDraft((0, event_1.readConsent)());
         setChoosing(true);
-        setShown(true);
     };
-    // Closing without a choice: a visitor who has not chosen is asked again by the bar.
+    // Closing without a choice: under eu a visitor who has not chosen is asked again by the bar.
     const close = () => {
         asked.current = false;
         setChoosing(false);
-        setShown((0, event_1.asks)());
+        setShown(front());
     };
     (0, react_1.useEffect)(() => {
         const sync = () => {
-            setShown((0, event_1.asks)() || asked.current);
+            setShown(front());
             setLocked((0, event_1.declined)());
             // A policy version the stored choice was not made under: the switches the
-            // sheet opened with were an old grant, and are off until chosen again.
+            // sheet opened with were an old grant, and fall back to the rule's own.
             if (asked.current && seeded.current && !(0, event_1.storedConsent)()) {
                 seeded.current = false;
                 setDraft((0, event_1.readConsent)());
             }
         };
-        sync();
+        const decide = (m) => {
+            const changed = rule.current !== m;
+            rule.current = m;
+            setMode(m);
+            sync();
+            // A rule that changes under an open sheet changes what its switches mean.
+            // Untouched, they show the new rule's defaults; moved, they are the
+            // visitor's answer, which an opt-out rule takes as said.
+            if (!changed || !asked.current)
+                return;
+            if (!touched.current)
+                setDraft((0, event_1.readConsent)());
+            else if (m !== 'eu')
+                (0, event_1.saveConsent)(latest.current);
+        };
+        // Cloud answered on this page: its rule, whether or not it placed the visitor.
+        const policy = () => decide((0, event_1.consentPolicy)().mode);
+        const known = served();
+        if (known)
+            decide(known);
+        // No answer in time is the strict answer.
+        const wait = known ? undefined : window.setTimeout(() => rule.current ?? decide('eu'), WAIT);
+        // The page's own links to the sheet, looked for again as it changes, once a frame.
+        let frameId = 0;
+        const look = () => {
+            if (frameId)
+                return;
+            frameId = window.requestAnimationFrame(() => {
+                frameId = 0;
+                setHosted(linked());
+            });
+        };
+        look();
+        const watch = new MutationObserver(look);
+        watch.observe(document.body, { childList: true, subtree: true });
         // `#choices` opens the sheet: on arrival, on a hash change, and on a press of
-        // any link on this site to it, so the footer's Privacy choices and a link in
-        // a page are the same control.
+        // any link on this site to it, so the footer's Your Privacy Choices and a link
+        // in a page are the same control.
         const hash = () => {
             if (window.location.hash !== HASH)
                 return;
@@ -209,12 +366,17 @@ const Consent = ({ cookies = 'https://hanzo.ai/cookies', privacy = 'https://hanz
         };
         hash();
         window.addEventListener(OPEN, choose);
-        window.addEventListener(event_1.POLICY_EVENT, sync);
+        window.addEventListener(event_1.POLICY_EVENT, policy);
+        window.addEventListener(LINKS_EVENT, look);
         window.addEventListener('hashchange', hash);
         document.addEventListener('click', press, { capture: true });
         return () => {
+            window.clearTimeout(wait);
+            window.cancelAnimationFrame(frameId);
+            watch.disconnect();
             window.removeEventListener(OPEN, choose);
-            window.removeEventListener(event_1.POLICY_EVENT, sync);
+            window.removeEventListener(event_1.POLICY_EVENT, policy);
+            window.removeEventListener(LINKS_EVENT, look);
             window.removeEventListener('hashchange', hash);
             document.removeEventListener('click', press, { capture: true });
         };
@@ -264,28 +426,57 @@ const Consent = ({ cookies = 'https://hanzo.ai/cookies', privacy = 'https://hanz
         document.addEventListener('keydown', keys);
         return () => document.removeEventListener('keydown', keys);
     }, [choosing]);
-    if (!shown)
-        return null;
     const done = (fn) => () => {
         fn();
         asked.current = false;
-        setShown(false);
+        setShown(front());
         setChoosing(false);
     };
-    if (choosing)
-        return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('consent-sheet'), ...COVER, z: "var(--z-modal, 600)", items: "center", justify: "center", 
+    // The sheet, drawn over whatever opened it, which stays mounted so focus can go back to it.
+    let panel = null;
+    if (choosing) {
+        // A sheet opened before cloud answered speaks the strict rule.
+        const strict = (mode ?? 'eu') === 'eu';
+        // eu holds every switch off for a browser that refused; elsewhere only the sale and sharing.
+        const held = (key) => locked && (strict || key === 'ads');
+        // Under eu the switches wait for Save preferences; elsewhere each one is an opt-out, saved as it moves.
+        const flip = (key, on) => {
+            touched.current = true;
+            const next = { ...draft, [key]: on };
+            setDraft(next);
+            if (!strict)
+                (0, event_1.saveConsent)(next);
+        };
+        panel = ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('consent-sheet'), ...COVER, z: "var(--z-modal, 600)", items: "center", justify: "center", 
             // The device's insets are physical sides, so the shorthand names them in order.
-            style: { padding: `${EDGE.top} ${EDGE.right} ${EDGE.bottom} ${EDGE.left}` }, children: [(0, jsx_runtime_1.jsx)(gui_1.YStack, { ...COVER, position: "absolute", z: 0, bg: "rgba(0,0,0,0.6)", "aria-hidden": true, onPress: close }), (0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('consent'), ...PANEL, ref: sheet, role: "dialog", "aria-modal": true, "aria-labelledby": `${id}-title`, position: "relative", width: "100%", maxW: 560, maxH: "100%", overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", justify: "space-between", gap: "$3", pt: "$5", pb: "$3", paddingInlineStart: "$5", paddingInlineEnd: "$4", children: [(0, jsx_runtime_1.jsx)(gui_1.Text, { render: "h2", id: `${id}-title`, m: 0, fontSize: "$6", lineHeight: "$6", fontWeight: "600", color: "$ink", children: "Cookie Preferences" }), (0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", size: "icon-sm", variant: "ghost", "aria-label": "Close", onClick: close, children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.X, { size: 16 }) })] }), (0, jsx_runtime_1.jsxs)(gui_1.YStack, { shrink: 1, minH: 0, overflowY: "auto", px: "$5", pb: "$2", style: { overscrollBehavior: 'contain' }, children: [(0, jsx_runtime_1.jsxs)(gui_1.Paragraph, { size: "$2", color: "$aside", m: 0, pb: "$3", children: ['We use cookies and similar technologies to provide our services, measure performance, and support advertising. Essential cookies are required for the site to work and cannot be turned off. You can allow or reject optional cookies below. Learn more in our ', (0, jsx_runtime_1.jsx)("a", { href: cookies, style: INLINE, children: "Cookie Policy" }), ', ', (0, jsx_runtime_1.jsx)("a", { href: privacy, style: INLINE, children: "Privacy Policy" }), ', and ', (0, jsx_runtime_1.jsx)("a", { href: terms, style: INLINE, children: "Terms of Service" }), "."] }), locked ? ((0, jsx_runtime_1.jsx)(gui_1.Paragraph, { size: "$2", color: "$ink", m: 0, pb: "$3", children: "Your browser asks sites not to track you, so all of these stay off." })) : null, kinds(brand).map((k) => {
+            style: { padding: `${EDGE.top} ${EDGE.right} ${EDGE.bottom} ${EDGE.left}` }, children: [(0, jsx_runtime_1.jsx)(gui_1.YStack, { ...COVER, position: "absolute", z: 0, bg: "rgba(0,0,0,0.6)", "aria-hidden": true, onPress: close }), (0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('consent'), ...PANEL, ref: sheet, role: "dialog", "aria-modal": true, "aria-labelledby": `${id}-title`, position: "relative", width: "100%", maxW: 560, maxH: "100%", overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", justify: "space-between", gap: "$3", pt: "$5", pb: "$3", paddingInlineStart: "$5", paddingInlineEnd: "$4", children: [(0, jsx_runtime_1.jsx)(gui_1.Text, { render: "h2", id: `${id}-title`, m: 0, fontSize: "$6", lineHeight: "$6", fontWeight: "600", color: "$ink", children: "Cookie Preferences" }), (0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", size: "icon", ...CLOSE, "aria-label": "Close", onClick: close, children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.X, { size: 16 }) })] }), (0, jsx_runtime_1.jsxs)(gui_1.YStack, { shrink: 1, minH: 0, overflowY: "auto", px: "$5", pb: "$2", style: { overscrollBehavior: 'contain' }, children: [(0, jsx_runtime_1.jsxs)(gui_1.Paragraph, { size: "$2", color: "$aside", m: 0, pb: "$3", children: [intro(strict), (0, jsx_runtime_1.jsx)("a", { href: cookies, style: INLINE, children: "Cookie Policy" }), ', ', (0, jsx_runtime_1.jsx)("a", { href: privacy, style: INLINE, children: "Privacy Policy" }), ', and ', (0, jsx_runtime_1.jsx)("a", { href: terms, style: INLINE, children: "Terms of Service" }), "."] }), locked ? ((0, jsx_runtime_1.jsx)(gui_1.Paragraph, { size: "$2", color: "$ink", m: 0, pb: "$3", children: refusal(strict) })) : null, kinds(brand, strict).map((k) => {
                                     const open = expanded[k.id] === true;
                                     const body = `${id}-${k.id}`;
-                                    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('consent-section'), borderTopWidth: 1, borderColor: "$borderColor", children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$3", minH: 52, py: "$2", children: [(0, jsx_runtime_1.jsx)(gui_1.XStack, { render: "h3", flex: 1, minW: 0, m: 0, children: (0, jsx_runtime_1.jsxs)(gui_1.XStack, { render: "button", ...BUTTON, "aria-expanded": open, "aria-controls": body, onPress: () => setExpanded({ ...expanded, [k.id]: !open }), flex: 1, minW: 0, items: "center", gap: "$2", p: 0, bg: "transparent", borderWidth: 0, cursor: "pointer", children: [(0, jsx_runtime_1.jsx)(gui_1.XStack, { shrink: 0, rotate: open ? '180deg' : '0deg', opacity: 0.7, children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronDown, { size: 16 }) }), (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$3", lineHeight: "$3", fontWeight: "600", color: "$ink", ...(0, dir_1.align)('start'), children: k.title })] }) }), k.key ? ((0, jsx_runtime_1.jsx)(switch_1.Switch, { "aria-label": k.title, "aria-describedby": body, disabled: locked, checked: locked ? false : draft[k.key], onCheckedChange: (v) => setDraft({ ...draft, [k.key]: v === true }) })) : ((0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", fontWeight: "600", color: "$ink", whiteSpace: "nowrap", children: "Always Active" }))] }), (0, jsx_runtime_1.jsx)(gui_1.YStack, { id: body, display: open ? 'flex' : 'none', pb: "$3", paddingInlineStart: 24, children: (0, jsx_runtime_1.jsx)(gui_1.Paragraph, { size: "$2", color: "$aside", m: 0, children: k.body }) })] }, k.id));
-                                })] }), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { flexWrap: "wrap", gap: "$2", px: "$5", py: "$4", borderTopWidth: 1, borderColor: "$borderColor", children: [locked ? null : ((0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", variant: "secondary", grow: 1, onClick: done(event_1.acceptAll), children: "Accept all" })), (0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", ...ACT, grow: 1, onClick: done(() => (0, event_1.saveConsent)(draft)), children: "Save preferences" })] })] })] }));
-    // One bar: the line, then the buttons. They share a row where the line fits
+                                    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('consent-section'), borderTopWidth: 1, borderColor: "$borderColor", children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$3", minH: 52, py: "$2", children: [(0, jsx_runtime_1.jsx)(gui_1.XStack, { render: "h3", flex: 1, minW: 0, m: 0, children: (0, jsx_runtime_1.jsxs)(gui_1.XStack, { render: "button", ...BUTTON, "aria-expanded": open, "aria-controls": body, onPress: () => setExpanded({ ...expanded, [k.id]: !open }), flex: 1, minW: 0, items: "center", gap: "$2", p: 0, bg: "transparent", borderWidth: 0, cursor: "pointer", children: [(0, jsx_runtime_1.jsx)(gui_1.XStack, { shrink: 0, rotate: open ? '180deg' : '0deg', opacity: 0.7, children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronDown, { size: 16 }) }), (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$3", lineHeight: "$3", fontWeight: "600", color: "$ink", ...(0, dir_1.align)('start'), children: k.title })] }) }), k.key ? ((0, jsx_runtime_1.jsx)(switch_1.Switch, { "aria-label": k.title, "aria-describedby": body, disabled: held(k.key), checked: held(k.key) ? false : draft[k.key], onCheckedChange: (v) => flip(k.key, v === true) })) : ((0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", fontWeight: "600", color: "$ink", whiteSpace: "nowrap", children: "Always Active" }))] }), (0, jsx_runtime_1.jsx)(gui_1.YStack, { id: body, display: open ? 'flex' : 'none', pb: "$3", paddingInlineStart: 24, children: (0, jsx_runtime_1.jsx)(gui_1.Paragraph, { size: "$2", color: "$aside", m: 0, children: k.body }) })] }, k.id));
+                                })] }), (0, jsx_runtime_1.jsx)(gui_1.XStack, { flexWrap: "wrap", gap: "$2", px: "$5", py: "$4", borderTopWidth: 1, borderColor: "$borderColor", children: strict ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [locked ? null : ((0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", ...SECONDARY, grow: 1, onClick: done(event_1.acceptAll), children: "Accept all" })), (0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", ...PRIMARY, grow: 1, onClick: done(() => (0, event_1.saveConsent)(draft)), children: "Save preferences" })] })) : ((0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", ...PRIMARY, grow: 1, onClick: close, children: "Done" })) })] })] }));
+    }
+    if (!mode)
+        return panel;
+    // The way to the sheet on a page that draws none: small, quiet, at the foot of the window.
+    const own = !hosted && !shown ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('consent-choices'), position: "fixed", b: EDGE.bottom, l: EDGE.left, z: "var(--z-banner, 50)", px: "$2.5", py: "$1", bg: "$background", borderWidth: 1, borderColor: "$borderColor", rounded: ROUND.button, children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...CHOICES, onClick: choose, children: "Your Privacy Choices" }) })) : null;
+    let surface = own;
+    // The global notice: one line, the way to the choices, and a × that records it as seen.
+    if (shown && mode === 'global')
+        surface = ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...frame, role: "region", "aria-label": "Cookie notice", style: FIT, maxW: 1200, flexWrap: "wrap", items: "center", columnGap: "$4", rowGap: "$2", children: [(0, jsx_runtime_1.jsx)(gui_1.YStack, { shrink: 1, minW: 0, children: (0, jsx_runtime_1.jsx)(gui_1.Paragraph, { size: "$2", color: "$ink", m: 0, children: "We use cookies to improve your experience. By continuing to browse, you agree." }) }), (0, jsx_runtime_1.jsx)(button_1.Button, { ...CHOICES, onClick: choose, children: "Your Privacy Choices" }), (0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", size: "icon", ...CLOSE, "aria-label": "Close", position: "absolute", t: "$3", insetInlineEnd: "$3", onClick: done(event_1.notice), children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.X, { size: 16 }) })] }));
+    // The eu bar: the line, then the buttons. They share a row where the line fits
     // beside them and the buttons drop under it where it does not, so a phone shows
     // the line over one row of buttons and nothing breaks mid-control.
-    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...frame, style: FIT, maxW: 1200, flexWrap: "wrap", items: "center", columnGap: "$4", rowGap: "$3", children: [(0, jsx_runtime_1.jsx)(gui_1.YStack, { shrink: 1, minW: 0, children: (0, jsx_runtime_1.jsx)(gui_1.Paragraph, { size: "$2", color: "$ink", m: 0, children: `Essential cookies keep ${brand} running. With your OK, optional cookies help us measure performance and ads.` }) }), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { gap: "$2", marginInlineStart: "auto", items: "center", flexWrap: "wrap", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { ref: manage, type: "button", size: "sm", variant: "secondary", onClick: choose, children: "Manage preferences" }), (0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", size: "sm", ...ACT, onClick: done(event_1.acceptAll), children: "Accept all" })] }), (0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", size: "icon-sm", variant: "ghost", "aria-label": "Close and use essential cookies only", position: "absolute", t: "$3", insetInlineEnd: "$3", onClick: done(event_1.rejectAll), children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.X, { size: 16 }) })] }));
+    else if (shown && mode === 'eu')
+        surface = ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...frame, role: "dialog", "aria-label": "Cookie preferences", style: FIT, maxW: 1200, flexWrap: "wrap", items: "center", columnGap: "$4", rowGap: "$3", children: [(0, jsx_runtime_1.jsx)(gui_1.YStack, { shrink: 1, minW: 0, children: (0, jsx_runtime_1.jsx)(gui_1.Paragraph, { size: "$2", color: "$ink", m: 0, children: `Essential cookies keep ${brand} running. With your OK, optional cookies help us measure performance and ads.` }) }), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { gap: "$2", marginInlineStart: "auto", items: "center", flexWrap: "wrap", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { ref: manage, type: "button", ...SECONDARY, onClick: choose, children: "Manage preferences" }), (0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", ...PRIMARY, onClick: done(event_1.acceptAll), children: "Accept all" })] }), (0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", size: "icon", ...CLOSE, "aria-label": "Close and use essential cookies only", position: "absolute", t: "$3", insetInlineEnd: "$3", onClick: done(event_1.rejectAll), children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.X, { size: 16 }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [surface, panel] }));
 };
 exports.Consent = Consent;
-/** The footer link that reopens the choices, in every footer and every region. */
-const ConsentLink = ({ label = 'Cookie settings' }) => ((0, jsx_runtime_1.jsx)(button_1.Button, { ...(0, slot_1.slot)('consent-link'), type: "button", variant: "link", size: "sm", px: 0, minH: 0, onClick: exports.openConsent, children: label }));
+/**
+ * "Your Privacy Choices" with California's privacy options icon: the link to the
+ * sheet, for a footer. A page that mounts one gets no second link from `Consent`.
+ */
+const ConsentLink = ({ label = 'Your Privacy Choices' }) => {
+    (0, react_1.useEffect)(() => hold(), []);
+    return ((0, jsx_runtime_1.jsx)(button_1.Button, { ...(0, slot_1.slot)('consent-link'), ...CHOICES, onClick: exports.openConsent, children: label }));
+};
 exports.ConsentLink = ConsentLink;

package/dist/consent/Consent.d.ts

@@ -11,7 +11,10 @@ export type ConsentProps = {
     brand?: string;
 };
 declare const Consent: ({ cookies, privacy, terms, brand, }: ConsentProps) => import("react").JSX.Element | null;
-/** The footer link that reopens the choices, in every footer and every region. */
+/**
+ * "Your Privacy Choices" with California's privacy options icon: the link to the
+ * sheet, for a footer. A page that mounts one gets no second link from `Consent`.
+ */
 declare const ConsentLink: ({ label }: {
     label?: string;
 }) => import("react").JSX.Element;

package/dist/consent/Consent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Consent.d.ts","sourceRoot":"","sources":["../../src/consent/Consent.tsx"],"names":[],"mappings":"AA0CA,uCAAuC;AACvC,eAAO,MAAM,WAAW,QAAO,IAE9B,CAAA;AA0FD,MAAM,MAAM,YAAY,GAAG;IACzB,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,sCAAsC;IACtC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,QAAA,MAAM,OAAO,wCAKV,YAAY,uCA4Sd,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"}
+{"version":3,"file":"Consent.d.ts","sourceRoot":"","sources":["../../src/consent/Consent.tsx"],"names":[],"mappings":"AA+DA,uCAAuC;AACvC,eAAO,MAAM,WAAW,QAAO,IAE9B,CAAA;AA+MD,MAAM,MAAM,YAAY,GAAG;IACzB,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,sCAAsC;IACtC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,QAAA,MAAM,OAAO,wCAKV,YAAY,uCAkbd,CAAA;AAED;;;GAGG;AACH,QAAA,MAAM,WAAW,cAAwC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,gCAO1E,CAAA;AAED,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,CAAA"}