@hanzo/ui 8.27.26 → 8.27.32

package/dist/marketing/Cta.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Cta — the one call to action: an address, drawn as the page's primary control.
+ *
+ * A link, not a button, because where it goes is an address: it opens in a new
+ * tab, copies, and reads as what it is. Its ink and fill are the site's accent
+ * (`--primary`), which @hanzo/appearance sets, so Hanzo, Lux and Zoo each draw
+ * their own without a prop. `quiet` is the secondary: the same shape on the
+ * surface ladder.
+ *
+ * The 44px floor is `minH`, not padding, so a two-line label stays balanced.
+ */
+import { Anchor } from '@hanzo/gui';
+import type { ComponentProps, ReactNode } from 'react';
+export type CtaProps = Omit<ComponentProps<typeof Anchor>, 'children' | 'href'> & {
+    href: string;
+    children: ReactNode;
+    /** The secondary treatment. */
+    quiet?: boolean;
+    onPress?: () => void;
+};
+declare const Cta: ({ href, children, quiet, ...p }: CtaProps) => import("react").JSX.Element;
+export { Cta };
+/**
+ * TextLink — a link inside a sentence: the surrounding ink, underlined.
+ * `Cta` is the control; this is the word.
+ */
+declare const TextLink: ({ href, children, ...p }: Omit<CtaProps, 'quiet'>) => import("react").JSX.Element;
+export { TextLink };
+//# sourceMappingURL=Cta.d.ts.map

package/dist/marketing/Cta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Cta.d.ts","sourceRoot":"","sources":["../../src/marketing/Cta.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AACnC,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItD,MAAM,MAAM,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC,GAAG;IAChF,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,SAAS,CAAA;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB,CAAA;AAED,QAAA,MAAM,GAAG,oCAA6C,QAAQ,gCAuB7D,CAAA;AAED,OAAO,EAAE,GAAG,EAAE,CAAA;AAEd;;;GAGG;AACH,QAAA,MAAM,QAAQ,6BAA8B,IAAI,CAAC,QAAQ,EAAE,OAAO,CAAC,gCAWlE,CAAA;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/marketing/Cta.js

@@ -0,0 +1,24 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Cta — the one call to action: an address, drawn as the page's primary control.
+ *
+ * A link, not a button, because where it goes is an address: it opens in a new
+ * tab, copies, and reads as what it is. Its ink and fill are the site's accent
+ * (`--primary`), which @hanzo/appearance sets, so Hanzo, Lux and Zoo each draw
+ * their own without a prop. `quiet` is the secondary: the same shape on the
+ * surface ladder.
+ *
+ * The 44px floor is `minH`, not padding, so a two-line label stays balanced.
+ */
+import { Anchor } from '@hanzo/gui';
+import { slot } from '../backends/gui/slot.js';
+const Cta = ({ href, children, quiet = false, ...p }) => (_jsx(Anchor, { ...slot(quiet ? 'cta-quiet' : 'cta'), href: href, display: "inline-flex", items: "center", justify: "center", minH: 44, px: "$5", rounded: "$4", borderWidth: 1, borderColor: quiet ? '$borderColor' : 'transparent', bg: quiet ? 'transparent' : 'var(--primary)', color: quiet ? '$ink' : 'var(--primary-foreground)', fontSize: "$4", fontWeight: "500", text: "center", textDecorationLine: "none", hoverStyle: quiet ? { bg: '$hover' } : { bg: 'var(--primary-hover)' }, ...p, children: children }));
+export { Cta };
+/**
+ * TextLink — a link inside a sentence: the surrounding ink, underlined.
+ * `Cta` is the control; this is the word.
+ */
+const TextLink = ({ href, children, ...p }) => (_jsx(Anchor, { ...slot('text-link'), href: href, color: "$ink", textDecorationLine: "underline", style: { textUnderlineOffset: 3 }, ...p, children: children }));
+export { TextLink };
+//# sourceMappingURL=Cta.js.map

package/dist/marketing/Cta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Cta.js","sourceRoot":"","sources":["../../src/marketing/Cta.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;GAUG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAGnC,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAU3C,MAAM,GAAG,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,GAAG,KAAK,EAAE,GAAG,CAAC,EAAY,EAAE,EAAE,CAAC,CACjE,KAAC,MAAM,OACD,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,EACrC,IAAI,EAAE,IAAI,EACV,OAAO,EAAC,aAAa,EACrB,KAAK,EAAC,QAAQ,EACd,OAAO,EAAC,QAAQ,EAChB,IAAI,EAAE,EAAE,EACR,EAAE,EAAC,IAAI,EACP,OAAO,EAAC,IAAI,EACZ,WAAW,EAAE,CAAC,EACd,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,aAAa,EACnD,EAAE,EAAE,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,gBAAgB,EAC5C,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,2BAA2B,EACnD,QAAQ,EAAC,IAAI,EACb,UAAU,EAAC,KAAK,EAChB,IAAI,EAAC,QAAQ,EACb,kBAAkB,EAAC,MAAM,EACzB,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,sBAAsB,EAAE,KAChE,CAAY,YAEhB,QAAQ,GACF,CACV,CAAA;AAED,OAAO,EAAE,GAAG,EAAE,CAAA;AAEd;;;GAGG;AACH,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,CAAC,EAA2B,EAAE,EAAE,CAAC,CACtE,KAAC,MAAM,OACD,IAAI,CAAC,WAAW,CAAC,EACrB,IAAI,EAAE,IAAI,EACV,KAAK,EAAC,MAAM,EACZ,kBAAkB,EAAC,WAAW,EAC9B,KAAK,EAAE,EAAE,mBAAmB,EAAE,CAAC,EAAE,KAC5B,CAAY,YAEhB,QAAQ,GACF,CACV,CAAA;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/marketing/Faq.cjs

@@ -0,0 +1,20 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Faq = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Faq — the questions, each a <Disclosure>: closed to the eye, open to the
+ * document. A crawler, a reader with scripts off and a print stylesheet all get
+ * every answer; the row opens with no script at all.
+ *
+ * The heading is the section's own <h2>; `onOpen` hears each question as it is
+ * opened, never as it is closed.
+ */
+const gui_1 = require("@hanzo/gui");
+const disclosure_1 = require("../backends/gui/disclosure.cjs");
+const slot_1 = require("../backends/gui/slot.cjs");
+const type_1 = require("./type.cjs");
+const TIGHT = { letterSpacing: '-0.012em', textWrap: 'balance' };
+const Faq = ({ items, heading = 'Questions', onOpen }) => ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('faq'), render: "section", width: "100%", maxW: 680, mx: "auto", gap: "$6", px: "$6", children: [(0, jsx_runtime_1.jsx)(type_1.Line, { render: "h2", align: "center", fontSize: "$11", lineHeight: "$11", fontWeight: 500, $md: { fontSize: '$9', lineHeight: '$9' }, style: TIGHT, children: heading }), (0, jsx_runtime_1.jsx)(gui_1.YStack, { borderTopWidth: 1, borderColor: "$edge", children: items.map((item) => ((0, jsx_runtime_1.jsx)(disclosure_1.Disclosure, { summary: item.q, onOpenChange: (open) => open && onOpen?.(item.q), children: (0, jsx_runtime_1.jsx)(type_1.Line, { render: "div", tone: "muted", lineHeight: "$5", children: item.a }) }, item.q))) })] }));
+exports.Faq = Faq;

package/dist/marketing/Faq.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+export type FaqItem = {
+    q: string;
+    a: ReactNode;
+};
+export type FaqProps = {
+    items: readonly FaqItem[];
+    heading?: string;
+    onOpen?: (question: string) => void;
+};
+declare const Faq: ({ items, heading, onOpen }: FaqProps) => import("react").JSX.Element;
+export { Faq };
+//# sourceMappingURL=Faq.d.ts.map

package/dist/marketing/Faq.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Faq.d.ts","sourceRoot":"","sources":["../../src/marketing/Faq.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAQtC,MAAM,MAAM,OAAO,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,SAAS,CAAA;CAAE,CAAA;AAEjD,MAAM,MAAM,QAAQ,GAAG;IACrB,KAAK,EAAE,SAAS,OAAO,EAAE,CAAA;IACzB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;CACpC,CAAA;AAED,QAAA,MAAM,GAAG,+BAA8C,QAAQ,gCAe9D,CAAA;AAED,OAAO,EAAE,GAAG,EAAE,CAAA"}

package/dist/marketing/Faq.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Faq — the questions, each a <Disclosure>: closed to the eye, open to the
+ * document. A crawler, a reader with scripts off and a print stylesheet all get
+ * every answer; the row opens with no script at all.
+ *
+ * The heading is the section's own <h2>; `onOpen` hears each question as it is
+ * opened, never as it is closed.
+ */
+import { YStack } from '@hanzo/gui';
+import { Disclosure } from '../backends/gui/disclosure.js';
+import { slot } from '../backends/gui/slot.js';
+import { Line } from './type.js';
+const TIGHT = { letterSpacing: '-0.012em', textWrap: 'balance' };
+const Faq = ({ items, heading = 'Questions', onOpen }) => (_jsxs(YStack, { ...slot('faq'), render: "section", width: "100%", maxW: 680, mx: "auto", gap: "$6", px: "$6", children: [_jsx(Line, { render: "h2", align: "center", fontSize: "$11", lineHeight: "$11", fontWeight: 500, $md: { fontSize: '$9', lineHeight: '$9' }, style: TIGHT, children: heading }), _jsx(YStack, { borderTopWidth: 1, borderColor: "$edge", children: items.map((item) => (_jsx(Disclosure, { summary: item.q, onOpenChange: (open) => open && onOpen?.(item.q), children: _jsx(Line, { render: "div", tone: "muted", lineHeight: "$5", children: item.a }) }, item.q))) })] }));
+export { Faq };
+//# sourceMappingURL=Faq.js.map

package/dist/marketing/Faq.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Faq.js","sourceRoot":"","sources":["../../src/marketing/Faq.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;GAOG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAGnC,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,MAAM,KAAK,GAAG,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAW,CAAA;AAUzE,MAAM,GAAG,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,GAAG,WAAW,EAAE,MAAM,EAAY,EAAE,EAAE,CAAC,CAClE,MAAC,MAAM,OAAK,IAAI,CAAC,KAAK,CAAC,EAAE,MAAM,EAAC,SAAS,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAE,GAAG,EAAE,EAAE,EAAC,MAAM,EAAC,GAAG,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,aAC1F,KAAC,IAAI,IAAC,MAAM,EAAC,IAAI,EAAC,KAAK,EAAC,QAAQ,EAAC,QAAQ,EAAC,KAAK,EAAC,UAAU,EAAC,KAAK,EAAC,UAAU,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,KAAK,YACtI,OAAO,GACH,EACP,KAAC,MAAM,IAAC,cAAc,EAAE,CAAC,EAAE,WAAW,EAAC,OAAO,YAC3C,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,KAAC,UAAU,IAAc,OAAO,EAAE,IAAI,CAAC,CAAC,EAAE,YAAY,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,IAAI,MAAM,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,YACxF,KAAC,IAAI,IAAC,MAAM,EAAC,KAAK,EAAC,IAAI,EAAC,OAAO,EAAC,UAAU,EAAC,IAAI,YAC5C,IAAI,CAAC,CAAC,GACF,IAHQ,IAAI,CAAC,CAAC,CAIV,CACd,CAAC,GACK,IACF,CACV,CAAA;AAED,OAAO,EAAE,GAAG,EAAE,CAAA"}

package/dist/marketing/Hero.cjs

@@ -0,0 +1,40 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Hero = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Hero — the first screen: the promise and the way in on the left, the product
+ * at work on the right.
+ *
+ * Two columns from 1021px up; below that they stack, the pitch first. The pitch
+ * is centred in its column, so the headline, the sign-in and the download read
+ * as one stack.
+ *
+ *   signIn    a slot. The sign-in belongs to the site's identity provider; this
+ *             draws where it goes and never what is in it.
+ *   media     a slot for the right column: a <Media> loop, or anything with a
+ *             shape. It sits in a rounded card whose ratio is fixed from the
+ *             first paint (`ratio`, and `ratioCompact` once stacked), so it
+ *             never moves the page when it loads.
+ *   download  a secondary link under the sign-in.
+ *
+ * The headline is the page's one <h1>.
+ */
+const gui_1 = require("@hanzo/gui");
+const react_1 = require("react");
+const slot_1 = require("../backends/gui/slot.cjs");
+const Cta_1 = require("./Cta.cjs");
+const seen_1 = require("./seen.cjs");
+const type_1 = require("./type.cjs");
+const Hero = ({ title, subtitle, signIn, terms, download, media, ratio = 4 / 3, ratioCompact = 4 / 5, onView, onMediaView, }) => {
+    const card = (0, react_1.useRef)(null);
+    (0, seen_1.useSeen)(card, onMediaView);
+    (0, react_1.useEffect)(() => {
+        onView?.();
+        // The view is counted once, whatever the host's callback identity does.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('hero'), render: "section", "aria-labelledby": "hero-title", width: "100%", maxW: 1320, mx: "auto", flexDirection: "row", items: "center", gap: 64, px: "$6", pt: 120, pb: 72, $md: { flexDirection: 'column', gap: 32, px: '$4', pt: 88, pb: 48 }, children: [(0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('hero-copy'), flex: 5, flexBasis: 0, minW: 0, width: "100%", items: "center", gap: "$5", $md: { flex: 0, flexBasis: 'auto' }, children: [(0, jsx_runtime_1.jsx)(type_1.Line, { render: "h1", id: "hero-title", m: 0, maxW: 520, align: "center", fontFamily: "$heading", fontSize: "$13", lineHeight: "$13", fontWeight: 500, $md: { fontSize: '$11', lineHeight: '$11' }, style: { letterSpacing: '-0.012em', textWrap: 'balance' }, children: title }), subtitle ? ((0, jsx_runtime_1.jsx)(type_1.Line, { render: "p", m: 0, mt: -4, align: "center", tone: "muted", fontSize: "$7", lineHeight: "$7", $md: { fontSize: '$6', lineHeight: '$6' }, children: subtitle })) : null, signIn ? ((0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('hero-signin'), width: "100%", maxW: 420, children: signIn })) : null, terms ? ((0, jsx_runtime_1.jsx)(type_1.Line, { render: "p", m: 0, mt: -4, maxW: 420, align: "center", tone: "muted", size: "xs", children: terms })) : null, download ? ((0, jsx_runtime_1.jsx)(Cta_1.Cta, { quiet: true, href: download.href, children: download.label })) : null] }), media ? ((0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('hero-media'), ref: card, flex: 7, flexBasis: 0, minW: 0, width: "100%", aspectRatio: ratio, overflow: "hidden", rounded: 28, borderWidth: 1, borderColor: "$edge", bg: "$panel", $md: { flex: 0, flexBasis: 'auto', aspectRatio: ratioCompact }, children: media })) : null] }));
+};
+exports.Hero = Hero;

package/dist/marketing/Hero.d.ts

@@ -0,0 +1,24 @@
+import { type ReactNode } from 'react';
+export type HeroProps = {
+    title: ReactNode;
+    subtitle?: ReactNode;
+    signIn?: ReactNode;
+    /** The line under the sign-in: terms, privacy. */
+    terms?: ReactNode;
+    download?: {
+        href: string;
+        label: string;
+    };
+    media?: ReactNode;
+    /** Width over height of the media card at full width. */
+    ratio?: number;
+    /** …and once the columns stack. */
+    ratioCompact?: number;
+    /** Called once, when the hero mounts. */
+    onView?: () => void;
+    /** Called once, the first time half of the media card is on screen. */
+    onMediaView?: () => void;
+};
+declare const Hero: ({ title, subtitle, signIn, terms, download, media, ratio, ratioCompact, onView, onMediaView, }: HeroProps) => import("react").JSX.Element;
+export { Hero };
+//# sourceMappingURL=Hero.d.ts.map

package/dist/marketing/Hero.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Hero.d.ts","sourceRoot":"","sources":["../../src/marketing/Hero.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAqB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAOzD,MAAM,MAAM,SAAS,GAAG;IACtB,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,kDAAkD;IAClD,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,QAAQ,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAA;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mCAAmC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,uEAAuE;IACvE,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;CACzB,CAAA;AAED,QAAA,MAAM,IAAI,mGAWP,SAAS,gCA6FX,CAAA;AAED,OAAO,EAAE,IAAI,EAAE,CAAA"}

package/dist/marketing/Hero.js

@@ -0,0 +1,38 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Hero — the first screen: the promise and the way in on the left, the product
+ * at work on the right.
+ *
+ * Two columns from 1021px up; below that they stack, the pitch first. The pitch
+ * is centred in its column, so the headline, the sign-in and the download read
+ * as one stack.
+ *
+ *   signIn    a slot. The sign-in belongs to the site's identity provider; this
+ *             draws where it goes and never what is in it.
+ *   media     a slot for the right column: a <Media> loop, or anything with a
+ *             shape. It sits in a rounded card whose ratio is fixed from the
+ *             first paint (`ratio`, and `ratioCompact` once stacked), so it
+ *             never moves the page when it loads.
+ *   download  a secondary link under the sign-in.
+ *
+ * The headline is the page's one <h1>.
+ */
+import { YStack } from '@hanzo/gui';
+import { useEffect, useRef } from 'react';
+import { slot } from '../backends/gui/slot.js';
+import { Cta } from './Cta.js';
+import { useSeen } from './seen.js';
+import { Line } from './type.js';
+const Hero = ({ title, subtitle, signIn, terms, download, media, ratio = 4 / 3, ratioCompact = 4 / 5, onView, onMediaView, }) => {
+    const card = useRef(null);
+    useSeen(card, onMediaView);
+    useEffect(() => {
+        onView?.();
+        // The view is counted once, whatever the host's callback identity does.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return (_jsxs(YStack, { ...slot('hero'), render: "section", "aria-labelledby": "hero-title", width: "100%", maxW: 1320, mx: "auto", flexDirection: "row", items: "center", gap: 64, px: "$6", pt: 120, pb: 72, $md: { flexDirection: 'column', gap: 32, px: '$4', pt: 88, pb: 48 }, children: [_jsxs(YStack, { ...slot('hero-copy'), flex: 5, flexBasis: 0, minW: 0, width: "100%", items: "center", gap: "$5", $md: { flex: 0, flexBasis: 'auto' }, children: [_jsx(Line, { render: "h1", id: "hero-title", m: 0, maxW: 520, align: "center", fontFamily: "$heading", fontSize: "$13", lineHeight: "$13", fontWeight: 500, $md: { fontSize: '$11', lineHeight: '$11' }, style: { letterSpacing: '-0.012em', textWrap: 'balance' }, children: title }), subtitle ? (_jsx(Line, { render: "p", m: 0, mt: -4, align: "center", tone: "muted", fontSize: "$7", lineHeight: "$7", $md: { fontSize: '$6', lineHeight: '$6' }, children: subtitle })) : null, signIn ? (_jsx(YStack, { ...slot('hero-signin'), width: "100%", maxW: 420, children: signIn })) : null, terms ? (_jsx(Line, { render: "p", m: 0, mt: -4, maxW: 420, align: "center", tone: "muted", size: "xs", children: terms })) : null, download ? (_jsx(Cta, { quiet: true, href: download.href, children: download.label })) : null] }), media ? (_jsx(YStack, { ...slot('hero-media'), ref: card, flex: 7, flexBasis: 0, minW: 0, width: "100%", aspectRatio: ratio, overflow: "hidden", rounded: 28, borderWidth: 1, borderColor: "$edge", bg: "$panel", $md: { flex: 0, flexBasis: 'auto', aspectRatio: ratioCompact }, children: media })) : null] }));
+};
+export { Hero };
+//# sourceMappingURL=Hero.js.map

package/dist/marketing/Hero.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Hero.js","sourceRoot":"","sources":["../../src/marketing/Hero.tsx"],"names":[],"mappings":"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"}

package/dist/marketing/Media.cjs

@@ -0,0 +1,31 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Media = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Media — a looping, muted video that can be left running.
+ *
+ * It holds its aspect ratio from the first byte, so nothing moves when the video
+ * arrives, and it paints `poster` until it plays. A reader who asks the system
+ * for reduced motion gets the poster and no video at all: the file is not
+ * fetched, nothing loops. Without script the `<video>` autoplays as authored.
+ *
+ * `onPlay` fires once, the first time half of it is on screen.
+ */
+const gui_1 = require("@hanzo/gui");
+const react_1 = require("react");
+const slot_1 = require("../backends/gui/slot.cjs");
+const seen_1 = require("./seen.cjs");
+const Media = ({ sources, poster, label, ratio = 4 / 3, onPlay }) => {
+    const box = (0, react_1.useRef)(null);
+    const [still, setStill] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if (typeof matchMedia === 'function')
+            setStill(matchMedia('(prefers-reduced-motion: reduce)').matches);
+    }, []);
+    (0, seen_1.useSeen)(box, onPlay);
+    return ((0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('media'), ref: box, width: "100%", aspectRatio: ratio, overflow: "hidden", bg: "$panel", children: still ? ((0, jsx_runtime_1.jsx)("img", { src: poster, alt: label, style: FILL })) : ((0, jsx_runtime_1.jsx)("video", { autoPlay: true, muted: true, loop: true, playsInline: true, preload: "metadata", poster: poster, "aria-label": label, style: FILL, children: sources.map((s) => ((0, jsx_runtime_1.jsx)("source", { src: s.src, type: s.type }, s.src))) })) }));
+};
+exports.Media = Media;
+const FILL = { display: 'block', width: '100%', height: '100%', objectFit: 'cover' };

package/dist/marketing/Media.d.ts

@@ -0,0 +1,16 @@
+export type MediaProps = {
+    /** Each format the video is encoded in, best first: `{ src: '/demo.webm', type: 'video/webm' }`. */
+    sources: readonly {
+        src: string;
+        type: string;
+    }[];
+    poster: string;
+    /** What the video shows, for a reader who cannot see it. */
+    label: string;
+    /** Width over height. The box is this shape before anything loads. */
+    ratio?: number;
+    onPlay?: () => void;
+};
+declare const Media: ({ sources, poster, label, ratio, onPlay }: MediaProps) => import("react").JSX.Element;
+export { Media };
+//# sourceMappingURL=Media.d.ts.map

package/dist/marketing/Media.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Media.d.ts","sourceRoot":"","sources":["../../src/marketing/Media.tsx"],"names":[],"mappings":"AAkBA,MAAM,MAAM,UAAU,GAAG;IACvB,oGAAoG;IACpG,OAAO,EAAE,SAAS;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IACjD,MAAM,EAAE,MAAM,CAAA;IACd,4DAA4D;IAC5D,KAAK,EAAE,MAAM,CAAA;IACb,sEAAsE;IACtE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;CACpB,CAAA;AAED,QAAA,MAAM,KAAK,8CAAuD,UAAU,gCAuB3E,CAAA;AAID,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/marketing/Media.js

@@ -0,0 +1,29 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Media — a looping, muted video that can be left running.
+ *
+ * It holds its aspect ratio from the first byte, so nothing moves when the video
+ * arrives, and it paints `poster` until it plays. A reader who asks the system
+ * for reduced motion gets the poster and no video at all: the file is not
+ * fetched, nothing loops. Without script the `<video>` autoplays as authored.
+ *
+ * `onPlay` fires once, the first time half of it is on screen.
+ */
+import { YStack } from '@hanzo/gui';
+import { useEffect, useRef, useState } from 'react';
+import { slot } from '../backends/gui/slot.js';
+import { useSeen } from './seen.js';
+const Media = ({ sources, poster, label, ratio = 4 / 3, onPlay }) => {
+    const box = useRef(null);
+    const [still, setStill] = useState(false);
+    useEffect(() => {
+        if (typeof matchMedia === 'function')
+            setStill(matchMedia('(prefers-reduced-motion: reduce)').matches);
+    }, []);
+    useSeen(box, onPlay);
+    return (_jsx(YStack, { ...slot('media'), ref: box, width: "100%", aspectRatio: ratio, overflow: "hidden", bg: "$panel", children: still ? (_jsx("img", { src: poster, alt: label, style: FILL })) : (_jsx("video", { autoPlay: true, muted: true, loop: true, playsInline: true, preload: "metadata", poster: poster, "aria-label": label, style: FILL, children: sources.map((s) => (_jsx("source", { src: s.src, type: s.type }, s.src))) })) }));
+};
+const FILL = { display: 'block', width: '100%', height: '100%', objectFit: 'cover' };
+export { Media };
+//# sourceMappingURL=Media.js.map

package/dist/marketing/Media.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Media.js","sourceRoot":"","sources":["../../src/marketing/Media.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;GASG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AACnC,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEnD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAahC,MAAM,KAAK,GAAG,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,GAAG,CAAC,GAAG,CAAC,EAAE,MAAM,EAAc,EAAE,EAAE;IAC9E,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IACxC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAEzC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,UAAU,KAAK,UAAU;YAAE,QAAQ,CAAC,UAAU,CAAC,kCAAkC,CAAC,CAAC,OAAO,CAAC,CAAA;IACxG,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,CAAC,GAAG,EAAE,MAAM,CAAC,CAAA;IAEpB,OAAO,CACL,KAAC,MAAM,OAAK,IAAI,CAAC,OAAO,CAAC,EAAE,GAAG,EAAE,GAAY,EAAE,KAAK,EAAC,MAAM,EAAC,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAC,QAAQ,EAAC,EAAE,EAAC,QAAQ,YACzG,KAAK,CAAC,CAAC,CAAC,CACP,cAAK,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,GAAI,CAC9C,CAAC,CAAC,CAAC,CACF,gBAAO,QAAQ,QAAC,KAAK,QAAC,IAAI,QAAC,WAAW,QAAC,OAAO,EAAC,UAAU,EAAC,MAAM,EAAE,MAAM,gBAAc,KAAK,EAAE,KAAK,EAAE,IAAI,YACrG,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAClB,iBAAoB,GAAG,EAAE,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,IAA/B,CAAC,CAAC,GAAG,CAA8B,CACjD,CAAC,GACI,CACT,GACM,CACV,CAAA;AACH,CAAC,CAAA;AAED,MAAM,IAAI,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAW,CAAA;AAE7F,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/marketing/Plans.cjs

@@ -0,0 +1,74 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Plans = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Plans — one card per plan on the chosen tab, each with its own way in.
+ *
+ * Individual and Team & Enterprise are two tabs (a tab exists only while a plan
+ * is on it); monthly and annual is one switch (present only while some plan here
+ * sells a year). Every row, price, seat floor and feature is the catalog's,
+ * passed as `plans`: this draws them and states no number of its own.
+ *
+ *   Free        its own button, to `freeHref`
+ *   paid        the on-site checkout for that plan and term (`checkout`)
+ *   quoted      Enterprise: contact sales
+ *
+ * The host supplies the three addresses and hears the two events, so the same
+ * cards serve every site: `onView` when a tab's plans are shown, `onChoose` when
+ * a card's button is pressed.
+ */
+const gui_1 = require("@hanzo/gui");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const react_1 = require("react");
+const slot_1 = require("../backends/gui/slot.cjs");
+const switch_1 = require("../backends/gui/switch.cjs");
+const toggle_group_1 = require("../backends/gui/toggle-group.cjs");
+const grid_1 = require("../grid.cjs");
+const Cta_1 = require("./Cta.cjs");
+const rows_1 = require("./rows.cjs");
+const type_1 = require("./type.cjs");
+const TIGHT = { letterSpacing: '-0.012em', textWrap: 'balance' };
+const TABS = [
+    ['individual', 'Individual'],
+    ['team', 'Team & Enterprise'],
+];
+/** The plan families the ladder sells. */
+const FAMILIES = new Set(['personal', 'team', 'enterprise']);
+const Plans = ({ plans, heading = 'h1', title = 'Plans that grow with you', checkout, freeHref = '/chat', freeLabel = 'Use Hanzo for free', contactHref = '/contact-sales', onView, onChoose, footnote, }) => {
+    const all = (0, react_1.useMemo)(() => plans.filter((p) => FAMILIES.has(p.category)), [plans]);
+    const tabs = TABS.filter(([a]) => all.some((p) => (0, rows_1.audience)(p) === a));
+    const [picked, setPicked] = (0, react_1.useState)('individual');
+    const [yearly, setYearly] = (0, react_1.useState)(false);
+    const tab = tabs.some(([a]) => a === picked) ? picked : (tabs[0]?.[0] ?? picked);
+    const here = (0, react_1.useMemo)(() => all.filter((p) => (0, rows_1.audience)(p) === tab), [all, tab]);
+    const savings = here.map(rows_1.saving).filter((n) => n !== null);
+    const most = savings.length ? Math.max(...savings) : 0;
+    const label = savings.every((n) => n === most) ? `Save ${most}% with annual` : `Save up to ${most}% with annual`;
+    // One view per tab a reader looks at; a repaint of the same rows is not a new view.
+    const shown = here.map((p) => p.id).join();
+    (0, react_1.useEffect)(() => {
+        if (!here.length)
+            return;
+        onView?.(tab, here.map((plan) => ({ plan, interval: (0, rows_1.termOf)(plan, yearly) })));
+        // `shown` stands for the rows.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [shown, tab]);
+    const card = (p) => ((0, jsx_runtime_1.jsx)(Card, { plan: p, every: (0, rows_1.termOf)(p, yearly), href: (0, rows_1.way)(p) === 'card' ? checkout(p, (0, rows_1.termOf)(p, yearly)) : (0, rows_1.way)(p) === 'free' ? freeHref : contactHref, freeLabel: freeLabel, onPress: (cta) => onChoose?.({ plan: p, interval: (0, rows_1.termOf)(p, yearly), tab, cta, way: (0, rows_1.way)(p) }) }, p.id));
+    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('plans'), render: "section", width: "100%", maxW: 1280, mx: "auto", gap: "$8", items: "center", px: "$6", children: [(0, jsx_runtime_1.jsxs)(gui_1.YStack, { items: "center", gap: "$3", maxW: 768, children: [(0, jsx_runtime_1.jsx)(type_1.Line, { render: heading, m: 0, align: "center", fontFamily: "$heading", fontSize: "$11", lineHeight: "$11", fontWeight: 500, $md: { fontSize: '$9', lineHeight: '$9' }, style: TIGHT, children: title }), (0, jsx_runtime_1.jsx)(type_1.Line, { render: "p", m: 0, size: "lg", tone: "muted", align: "center", children: "You are charged exactly the price shown. Past a plan\u2019s included usage, agents are metered at the rates below." })] }), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { flexWrap: "wrap", items: "center", justify: "center", gap: "$4", children: [tabs.length > 1 ? ((0, jsx_runtime_1.jsx)(toggle_group_1.ToggleGroup, { type: "single", value: tab, onValueChange: (v) => {
+                            if (v)
+                                setPicked(v);
+                        }, disableDeactivation: true, "aria-label": "Who this is for", style: { padding: 4, borderRadius: 9999, background: 'var(--surface-2)' }, children: tabs.map(([a, name]) => ((0, jsx_runtime_1.jsx)(toggle_group_1.ToggleGroupItem, { value: a, variant: "outline", rounded: "$10", borderColor: "transparent", px: "$4", children: name }, a))) })) : null, most > 0 ? ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { render: "label", items: "center", gap: "$3", pl: "$5", pr: "$3", py: "$2", rounded: 9999, borderWidth: 1, borderColor: "$edge", bg: "$panel", cursor: "pointer", children: [(0, jsx_runtime_1.jsx)(type_1.Line, { size: "sm", tone: "muted", children: label }), (0, jsx_runtime_1.jsx)(switch_1.Switch, { checked: yearly, onCheckedChange: setYearly, "aria-label": "Bill yearly" })] })) : null] }), here.length > 1 ? ((0, jsx_runtime_1.jsx)(gui_1.YStack, { width: "100%", children: (0, jsx_runtime_1.jsx)(grid_1.Grid, { columns: { min: 250, max: 4 }, gap: 24, children: here.map(card) }) })) : here[0] ? ((0, jsx_runtime_1.jsx)(gui_1.YStack, { width: "100%", maxW: 440, children: card(here[0]) })) : null, footnote ? ((0, jsx_runtime_1.jsx)(type_1.Line, { render: "p", m: 0, size: "xs", tone: "muted", align: "center", maxW: 620, children: footnote })) : null] }));
+};
+exports.Plans = Plans;
+/** One plan: its name, its price for the term, the way in, and what it includes. */
+function Card({ plan, every, href, freeLabel, onPress, }) {
+    const how = (0, rows_1.way)(plan);
+    const year = (0, rows_1.charge)(plan, 'year');
+    // A year is headlined as the month it works out to, with the whole year under it.
+    const headline = every === 'year' && year ? Math.round((year / 12) * 100) / 100 : (plan.priceMonthly ?? 0);
+    const floor = (0, rows_1.seats)(plan);
+    const cta = how === 'card' ? `Get ${plan.name}` : how === 'free' ? freeLabel : 'Contact sales';
+    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('plan'), render: "section", "aria-label": plan.name, height: "100%", gap: "$5", p: "$5", $sm: { p: '$6' }, rounded: "var(--radius-xl)", borderWidth: 1, borderColor: plan.popular ? '$bound' : '$edge', bg: plan.popular ? '$hover' : '$panel', children: [(0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$2", children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", justify: "space-between", gap: "$3", children: [(0, jsx_runtime_1.jsx)(type_1.Line, { render: "h3", m: 0, size: "xl", weight: "600", children: plan.name }), plan.popular ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('plan-badge'), display: "inline-flex", self: "flex-start", items: "center", px: "$2", py: 2, rounded: 9999, borderWidth: 1, borderColor: "$edge", bg: "$raised", children: (0, jsx_runtime_1.jsx)(type_1.Line, { fontSize: 10, px: 10, tone: "soft", weight: "700", style: { textTransform: 'uppercase', letterSpacing: '0.05em' }, children: "Most popular" }) })) : null] }), plan.description ? ((0, jsx_runtime_1.jsx)(type_1.Line, { render: "p", m: 0, size: "sm", tone: "muted", children: plan.description })) : null] }), (0, jsx_runtime_1.jsx)(gui_1.YStack, { gap: "$1", children: how === 'card' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(gui_1.YStack, { display: "block", children: [(0, jsx_runtime_1.jsx)(type_1.Line, { size: "x4", weight: "600", children: (0, rows_1.money)(headline) }), ' ', (0, jsx_runtime_1.jsx)(type_1.Line, { size: "sm", tone: "muted", children: plan.pricePerUser ? 'USD/seat/month' : 'USD/month' })] }), (0, jsx_runtime_1.jsxs)(type_1.Line, { render: "p", m: 0, size: "sm", tone: "muted", children: [every === 'year' && year ? `Billed ${(0, rows_1.money)(year)}${plan.pricePerUser ? ' per seat' : ''} yearly` : 'Billed monthly', floor > 1 ? ` · from ${floor} seats` : ''] })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(type_1.Line, { size: "x4", weight: "600", children: how === 'free' ? 'Free' : 'Custom' }), (0, jsx_runtime_1.jsx)(type_1.Line, { render: "p", m: 0, size: "sm", tone: "muted", children: how === 'free' ? 'No card needed' : 'Priced with our team' })] })) }), (0, jsx_runtime_1.jsx)(Cta_1.Cta, { href: href, "data-ga": true, onPress: () => onPress(cta), children: cta }), how === 'card' ? ((0, jsx_runtime_1.jsx)(type_1.Line, { render: "p", m: 0, size: "xs", tone: "muted", align: "center", mt: -12, children: "No commitment \u00B7 Cancel anytime" })) : null, plan.features.length ? ((0, jsx_runtime_1.jsx)(gui_1.YStack, { render: "ul", gap: "$3", m: 0, p: 0, style: { listStyle: 'none' }, children: plan.features.map((f) => ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { render: "li", items: "flex-start", gap: "$3", children: [(0, jsx_runtime_1.jsx)(gui_1.YStack, { shrink: 0, mt: 3, "aria-hidden": true, children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Check, { size: 16, color: "var(--primary)" }) }), (0, jsx_runtime_1.jsx)(type_1.Line, { size: "sm", tone: "muted", children: f })] }, f))) })) : null] }));
+}

package/dist/marketing/Plans.d.ts

@@ -0,0 +1,30 @@
+import { type ReactNode } from 'react';
+import { type Audience, type Interval, type PlanRow } from './rows.js';
+export type PlanChoice = {
+    plan: PlanRow;
+    interval: Interval;
+    tab: Audience;
+    cta: string;
+    way: 'card' | 'free' | 'sales';
+};
+export type PlansProps = {
+    plans: readonly PlanRow[];
+    /** The level the title is drawn at: `h1` alone on a page, `h2` inside one. */
+    heading?: 'h1' | 'h2';
+    title?: string;
+    /** The address a paid plan's button opens, for the term on the card. */
+    checkout: (plan: PlanRow, interval: Interval) => string;
+    freeHref?: string;
+    freeLabel?: string;
+    contactHref?: string;
+    onView?: (tab: Audience, shown: readonly {
+        plan: PlanRow;
+        interval: Interval;
+    }[]) => void;
+    onChoose?: (choice: PlanChoice) => void;
+    /** The fine print under the cards. */
+    footnote?: ReactNode;
+};
+declare const Plans: ({ plans, heading, title, checkout, freeHref, freeLabel, contactHref, onView, onChoose, footnote, }: PlansProps) => import("react").JSX.Element;
+export { Plans };
+//# sourceMappingURL=Plans.d.ts.map

package/dist/marketing/Plans.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Plans.d.ts","sourceRoot":"","sources":["../../src/marketing/Plans.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAAgC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAOpE,OAAO,EAAuD,KAAK,QAAQ,EAAE,KAAK,QAAQ,EAAE,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAA;AAaxH,MAAM,MAAM,UAAU,GAAG;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,QAAQ,EAAE,QAAQ,CAAC;IAAC,GAAG,EAAE,QAAQ,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAA;CAAE,CAAA;AAE1H,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,SAAS,OAAO,EAAE,CAAA;IACzB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,wEAAwE;IACxE,QAAQ,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,KAAK,MAAM,CAAA;IACvD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS;QAAE,IAAI,EAAE,OAAO,CAAC;QAAC,QAAQ,EAAE,QAAQ,CAAA;KAAE,EAAE,KAAK,IAAI,CAAA;IACzF,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAA;IACvC,sCAAsC;IACtC,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CAAA;AAED,QAAA,MAAM,KAAK,uGAWR,UAAU,gCAmHZ,CAAA;AA6HD,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/marketing/Plans.js

@@ -0,0 +1,72 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Plans — one card per plan on the chosen tab, each with its own way in.
+ *
+ * Individual and Team & Enterprise are two tabs (a tab exists only while a plan
+ * is on it); monthly and annual is one switch (present only while some plan here
+ * sells a year). Every row, price, seat floor and feature is the catalog's,
+ * passed as `plans`: this draws them and states no number of its own.
+ *
+ *   Free        its own button, to `freeHref`
+ *   paid        the on-site checkout for that plan and term (`checkout`)
+ *   quoted      Enterprise: contact sales
+ *
+ * The host supplies the three addresses and hears the two events, so the same
+ * cards serve every site: `onView` when a tab's plans are shown, `onChoose` when
+ * a card's button is pressed.
+ */
+import { XStack, YStack } from '@hanzo/gui';
+import { Check } from '@hanzogui/lucide-icons-2';
+import { useEffect, useMemo, useState } from 'react';
+import { slot } from '../backends/gui/slot.js';
+import { Switch } from '../backends/gui/switch.js';
+import { ToggleGroup, ToggleGroupItem } from '../backends/gui/toggle-group.js';
+import { Grid } from '../grid.js';
+import { Cta } from './Cta.js';
+import { audience, charge, money, saving, seats, termOf, way } from './rows.js';
+import { Line } from './type.js';
+const TIGHT = { letterSpacing: '-0.012em', textWrap: 'balance' };
+const TABS = [
+    ['individual', 'Individual'],
+    ['team', 'Team & Enterprise'],
+];
+/** The plan families the ladder sells. */
+const FAMILIES = new Set(['personal', 'team', 'enterprise']);
+const Plans = ({ plans, heading = 'h1', title = 'Plans that grow with you', checkout, freeHref = '/chat', freeLabel = 'Use Hanzo for free', contactHref = '/contact-sales', onView, onChoose, footnote, }) => {
+    const all = useMemo(() => plans.filter((p) => FAMILIES.has(p.category)), [plans]);
+    const tabs = TABS.filter(([a]) => all.some((p) => audience(p) === a));
+    const [picked, setPicked] = useState('individual');
+    const [yearly, setYearly] = useState(false);
+    const tab = tabs.some(([a]) => a === picked) ? picked : (tabs[0]?.[0] ?? picked);
+    const here = useMemo(() => all.filter((p) => audience(p) === tab), [all, tab]);
+    const savings = here.map(saving).filter((n) => n !== null);
+    const most = savings.length ? Math.max(...savings) : 0;
+    const label = savings.every((n) => n === most) ? `Save ${most}% with annual` : `Save up to ${most}% with annual`;
+    // One view per tab a reader looks at; a repaint of the same rows is not a new view.
+    const shown = here.map((p) => p.id).join();
+    useEffect(() => {
+        if (!here.length)
+            return;
+        onView?.(tab, here.map((plan) => ({ plan, interval: termOf(plan, yearly) })));
+        // `shown` stands for the rows.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [shown, tab]);
+    const card = (p) => (_jsx(Card, { plan: p, every: termOf(p, yearly), href: way(p) === 'card' ? checkout(p, termOf(p, yearly)) : way(p) === 'free' ? freeHref : contactHref, freeLabel: freeLabel, onPress: (cta) => onChoose?.({ plan: p, interval: termOf(p, yearly), tab, cta, way: way(p) }) }, p.id));
+    return (_jsxs(YStack, { ...slot('plans'), render: "section", width: "100%", maxW: 1280, mx: "auto", gap: "$8", items: "center", px: "$6", children: [_jsxs(YStack, { items: "center", gap: "$3", maxW: 768, children: [_jsx(Line, { render: heading, m: 0, align: "center", fontFamily: "$heading", fontSize: "$11", lineHeight: "$11", fontWeight: 500, $md: { fontSize: '$9', lineHeight: '$9' }, style: TIGHT, children: title }), _jsx(Line, { render: "p", m: 0, size: "lg", tone: "muted", align: "center", children: "You are charged exactly the price shown. Past a plan\u2019s included usage, agents are metered at the rates below." })] }), _jsxs(XStack, { flexWrap: "wrap", items: "center", justify: "center", gap: "$4", children: [tabs.length > 1 ? (_jsx(ToggleGroup, { type: "single", value: tab, onValueChange: (v) => {
+                            if (v)
+                                setPicked(v);
+                        }, disableDeactivation: true, "aria-label": "Who this is for", style: { padding: 4, borderRadius: 9999, background: 'var(--surface-2)' }, children: tabs.map(([a, name]) => (_jsx(ToggleGroupItem, { value: a, variant: "outline", rounded: "$10", borderColor: "transparent", px: "$4", children: name }, a))) })) : null, most > 0 ? (_jsxs(XStack, { render: "label", items: "center", gap: "$3", pl: "$5", pr: "$3", py: "$2", rounded: 9999, borderWidth: 1, borderColor: "$edge", bg: "$panel", cursor: "pointer", children: [_jsx(Line, { size: "sm", tone: "muted", children: label }), _jsx(Switch, { checked: yearly, onCheckedChange: setYearly, "aria-label": "Bill yearly" })] })) : null] }), here.length > 1 ? (_jsx(YStack, { width: "100%", children: _jsx(Grid, { columns: { min: 250, max: 4 }, gap: 24, children: here.map(card) }) })) : here[0] ? (_jsx(YStack, { width: "100%", maxW: 440, children: card(here[0]) })) : null, footnote ? (_jsx(Line, { render: "p", m: 0, size: "xs", tone: "muted", align: "center", maxW: 620, children: footnote })) : null] }));
+};
+/** One plan: its name, its price for the term, the way in, and what it includes. */
+function Card({ plan, every, href, freeLabel, onPress, }) {
+    const how = way(plan);
+    const year = charge(plan, 'year');
+    // A year is headlined as the month it works out to, with the whole year under it.
+    const headline = every === 'year' && year ? Math.round((year / 12) * 100) / 100 : (plan.priceMonthly ?? 0);
+    const floor = seats(plan);
+    const cta = how === 'card' ? `Get ${plan.name}` : how === 'free' ? freeLabel : 'Contact sales';
+    return (_jsxs(YStack, { ...slot('plan'), render: "section", "aria-label": plan.name, height: "100%", gap: "$5", p: "$5", $sm: { p: '$6' }, rounded: "var(--radius-xl)", borderWidth: 1, borderColor: plan.popular ? '$bound' : '$edge', bg: plan.popular ? '$hover' : '$panel', children: [_jsxs(YStack, { gap: "$2", children: [_jsxs(XStack, { items: "center", justify: "space-between", gap: "$3", children: [_jsx(Line, { render: "h3", m: 0, size: "xl", weight: "600", children: plan.name }), plan.popular ? (_jsx(XStack, { ...slot('plan-badge'), display: "inline-flex", self: "flex-start", items: "center", px: "$2", py: 2, rounded: 9999, borderWidth: 1, borderColor: "$edge", bg: "$raised", children: _jsx(Line, { fontSize: 10, px: 10, tone: "soft", weight: "700", style: { textTransform: 'uppercase', letterSpacing: '0.05em' }, children: "Most popular" }) })) : null] }), plan.description ? (_jsx(Line, { render: "p", m: 0, size: "sm", tone: "muted", children: plan.description })) : null] }), _jsx(YStack, { gap: "$1", children: how === 'card' ? (_jsxs(_Fragment, { children: [_jsxs(YStack, { display: "block", children: [_jsx(Line, { size: "x4", weight: "600", children: money(headline) }), ' ', _jsx(Line, { size: "sm", tone: "muted", children: plan.pricePerUser ? 'USD/seat/month' : 'USD/month' })] }), _jsxs(Line, { render: "p", m: 0, size: "sm", tone: "muted", children: [every === 'year' && year ? `Billed ${money(year)}${plan.pricePerUser ? ' per seat' : ''} yearly` : 'Billed monthly', floor > 1 ? ` · from ${floor} seats` : ''] })] })) : (_jsxs(_Fragment, { children: [_jsx(Line, { size: "x4", weight: "600", children: how === 'free' ? 'Free' : 'Custom' }), _jsx(Line, { render: "p", m: 0, size: "sm", tone: "muted", children: how === 'free' ? 'No card needed' : 'Priced with our team' })] })) }), _jsx(Cta, { href: href, "data-ga": true, onPress: () => onPress(cta), children: cta }), how === 'card' ? (_jsx(Line, { render: "p", m: 0, size: "xs", tone: "muted", align: "center", mt: -12, children: "No commitment \u00B7 Cancel anytime" })) : null, plan.features.length ? (_jsx(YStack, { render: "ul", gap: "$3", m: 0, p: 0, style: { listStyle: 'none' }, children: plan.features.map((f) => (_jsxs(XStack, { render: "li", items: "flex-start", gap: "$3", children: [_jsx(YStack, { shrink: 0, mt: 3, "aria-hidden": true, children: _jsx(Check, { size: 16, color: "var(--primary)" }) }), _jsx(Line, { size: "sm", tone: "muted", children: f })] }, f))) })) : null] }));
+}
+export { Plans };
+//# sourceMappingURL=Plans.js.map

package/dist/marketing/Plans.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Plans.js","sourceRoot":"","sources":["../../src/marketing/Plans.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;;;;GAeG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAA;AAEpE,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAC/C,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAA;AAC3E,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAA8C,MAAM,QAAQ,CAAA;AACxH,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,MAAM,KAAK,GAAG,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAW,CAAA;AAEzE,MAAM,IAAI,GAAkC;IAC1C,CAAC,YAAY,EAAE,YAAY,CAAC;IAC5B,CAAC,MAAM,EAAE,mBAAmB,CAAC;CAC9B,CAAA;AAED,0CAA0C;AAC1C,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAC,CAAC,UAAU,EAAE,MAAM,EAAE,YAAY,CAAC,CAAC,CAAA;AAoB5D,MAAM,KAAK,GAAG,CAAC,EACb,KAAK,EACL,OAAO,GAAG,IAAI,EACd,KAAK,GAAG,0BAA0B,EAClC,QAAQ,EACR,QAAQ,GAAG,OAAO,EAClB,SAAS,GAAG,oBAAoB,EAChC,WAAW,GAAG,gBAAgB,EAC9B,MAAM,EACN,QAAQ,EACR,QAAQ,GACG,EAAE,EAAE;IACf,MAAM,GAAG,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IACjF,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;IACrE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAW,YAAY,CAAC,CAAA;IAC5D,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC3C,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,CAAA;IAChF,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAA;IAE9E,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAe,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,CAAA;IACvE,MAAM,IAAI,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IACtD,MAAM,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,QAAQ,IAAI,eAAe,CAAC,CAAC,CAAC,cAAc,IAAI,eAAe,CAAA;IAEhH,oFAAoF;IACpF,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,CAAA;IAC1C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,IAAI,CAAC,MAAM;YAAE,OAAM;QACxB,MAAM,EAAE,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,CAAA;QAC7E,+BAA+B;QAC/B,uDAAuD;IACzD,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,CAAA;IAEhB,MAAM,IAAI,GAAG,CAAC,CAAU,EAAE,EAAE,CAAC,CAC3B,KAAC,IAAI,IAEH,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,MAAM,CAAC,CAAC,EAAE,MAAM,CAAC,EACxB,IAAI,EACF,GAAG,CAAC,CAAC,CAAC,KAAK,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,EAEjG,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC,EAAE,MAAM,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,IAPxF,CAAC,CAAC,EAAE,CAQT,CACH,CAAA;IAED,OAAO,CACL,MAAC,MAAM,OAAK,IAAI,CAAC,OAAO,CAAC,EAAE,MAAM,EAAC,SAAS,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,EAAE,EAAE,EAAC,MAAM,EAAC,GAAG,EAAC,IAAI,EAAC,KAAK,EAAC,QAAQ,EAAC,EAAE,EAAC,IAAI,aAC5G,MAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAE,GAAG,aACvC,KAAC,IAAI,IACH,MAAM,EAAE,OAAO,EACf,CAAC,EAAE,CAAC,EACJ,KAAK,EAAC,QAAQ,EACd,UAAU,EAAC,UAAU,EACrB,QAAQ,EAAC,KAAK,EACd,UAAU,EAAC,KAAK,EAChB,UAAU,EAAE,GAAG,EACf,GAAG,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,EACzC,KAAK,EAAE,KAAK,YAEX,KAAK,GACD,EACP,KAAC,IAAI,IAAC,MAAM,EAAC,GAAG,EAAC,CAAC,EAAE,CAAC,EAAE,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,QAAQ,mIAErD,IACA,EAET,MAAC,MAAM,IAAC,QAAQ,EAAC,MAAM,EAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,aAC7D,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CACjB,KAAC,WAAW,IACV,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,GAAG,EACV,aAAa,EAAE,CAAC,CAAS,EAAE,EAAE;4BAC3B,IAAI,CAAC;gCAAE,SAAS,CAAC,CAAa,CAAC,CAAA;wBACjC,CAAC,EACD,mBAAmB,sBACR,iBAAiB,EAC5B,KAAK,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,UAAU,EAAE,kBAAkB,EAAE,YAExE,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,CACvB,KAAC,eAAe,IAAS,KAAK,EAAE,CAAC,EAAE,OAAO,EAAC,SAAS,EAAC,OAAO,EAAC,KAAK,EAAC,WAAW,EAAC,aAAa,EAAC,EAAE,EAAC,IAAI,YACjG,IAAI,IADe,CAAC,CAEL,CACnB,CAAC,GACU,CACf,CAAC,CAAC,CAAC,IAAI,EACP,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,CACV,MAAC,MAAM,IACL,MAAM,EAAC,OAAO,EACd,KAAK,EAAC,QAAQ,EACd,GAAG,EAAC,IAAI,EACR,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,OAAO,EAAE,IAAI,EACb,WAAW,EAAE,CAAC,EACd,WAAW,EAAC,OAAO,EACnB,EAAE,EAAC,QAAQ,EACX,MAAM,EAAC,SAAS,aAEhB,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,YACzB,KAAK,GACD,EACP,KAAC,MAAM,IAAC,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,SAAS,gBAAa,aAAa,GAAG,IACzE,CACV,CAAC,CAAC,CAAC,IAAI,IACD,EAER,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CACjB,KAAC,MAAM,IAAC,KAAK,EAAC,MAAM,YAClB,KAAC,IAAI,IAAC,OAAO,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,GAAG,EAAE,EAAE,YACzC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GACV,GACA,CACV,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CACZ,KAAC,MAAM,IAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAE,GAAG,YAC3B,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GACP,CACV,CAAC,CAAC,CAAC,IAAI,EAEP,QAAQ,CAAC,CAAC,CAAC,CACV,KAAC,IAAI,IAAC,MAAM,EAAC,GAAG,EAAC,CAAC,EAAE,CAAC,EAAE,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAE,GAAG,YACnE,QAAQ,GACJ,CACR,CAAC,CAAC,CAAC,IAAI,IACD,CACV,CAAA;AACH,CAAC,CAAA;AAED,oFAAoF;AACpF,SAAS,IAAI,CAAC,EACZ,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,SAAS,EACT,OAAO,GAOR;IACC,MAAM,GAAG,GAAG,GAAG,CAAC,IAAI,CAAC,CAAA;IACrB,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,CAAA;IACjC,kFAAkF;IAClF,MAAM,QAAQ,GAAG,KAAK,KAAK,MAAM,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,GAAG,EAAE,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,CAAC,CAAA;IAC1G,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,CAAA;IACzB,MAAM,GAAG,GAAG,GAAG,KAAK,MAAM,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,CAAA;IAE9F,OAAO,CACL,MAAC,MAAM,OACD,IAAI,CAAC,MAAM,CAAC,EAChB,MAAM,EAAC,SAAS,gBACJ,IAAI,CAAC,IAAI,EACrB,MAAM,EAAC,MAAM,EACb,GAAG,EAAC,IAAI,EACR,CAAC,EAAC,IAAI,EACN,GAAG,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,EAChB,OAAO,EAAC,kBAAkB,EAC1B,WAAW,EAAE,CAAC,EACd,WAAW,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,EAC9C,EAAE,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,aAEtC,MAAC,MAAM,IAAC,GAAG,EAAC,IAAI,aACd,MAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,eAAe,EAAC,GAAG,EAAC,IAAI,aACrD,KAAC,IAAI,IAAC,MAAM,EAAC,IAAI,EAAC,CAAC,EAAE,CAAC,EAAE,IAAI,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,YAC3C,IAAI,CAAC,IAAI,GACL,EACN,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CACd,KAAC,MAAM,OACD,IAAI,CAAC,YAAY,CAAC,EACtB,OAAO,EAAC,aAAa,EACrB,IAAI,EAAC,YAAY,EACjB,KAAK,EAAC,QAAQ,EACd,EAAE,EAAC,IAAI,EACP,EAAE,EAAE,CAAC,EACL,OAAO,EAAE,IAAI,EACb,WAAW,EAAE,CAAC,EACd,WAAW,EAAC,OAAO,EACnB,EAAE,EAAC,SAAS,YAEZ,KAAC,IAAI,IAAC,QAAQ,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,KAAK,EAAE,EAAE,aAAa,EAAE,WAAW,EAAE,aAAa,EAAE,QAAQ,EAAE,6BAE5G,GACA,CACV,CAAC,CAAC,CAAC,IAAI,IACD,EACR,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAClB,KAAC,IAAI,IAAC,MAAM,EAAC,GAAG,EAAC,CAAC,EAAE,CAAC,EAAE,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,YAC1C,IAAI,CAAC,WAAW,GACZ,CACR,CAAC,CAAC,CAAC,IAAI,IACD,EAET,KAAC,MAAM,IAAC,GAAG,EAAC,IAAI,YACb,GAAG,KAAK,MAAM,CAAC,CAAC,CAAC,CAChB,8BACE,MAAC,MAAM,IAAC,OAAO,EAAC,OAAO,aACrB,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,YACzB,KAAK,CAAC,QAAQ,CAAC,GACX,EAAC,GAAG,EACX,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,YACzB,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,WAAW,GAC9C,IACA,EACT,MAAC,IAAI,IAAC,MAAM,EAAC,GAAG,EAAC,CAAC,EAAE,CAAC,EAAE,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,aAC1C,KAAK,KAAK,MAAM,IAAI,IAAI,CAAC,CAAC,CAAC,UAAU,KAAK,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,gBAAgB,EACnH,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,WAAW,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,IACrC,IACN,CACJ,CAAC,CAAC,CAAC,CACF,8BACE,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,YACzB,GAAG,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,GAC9B,EACP,KAAC,IAAI,IAAC,MAAM,EAAC,GAAG,EAAC,CAAC,EAAE,CAAC,EAAE,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,YAC1C,GAAG,KAAK,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,sBAAsB,GACtD,IACN,CACJ,GACM,EAIT,KAAC,GAAG,IAAC,IAAI,EAAE,IAAI,mBAAU,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,YACjD,GAAG,GACA,EACL,GAAG,KAAK,MAAM,CAAC,CAAC,CAAC,CAChB,KAAC,IAAI,IAAC,MAAM,EAAC,GAAG,EAAC,CAAC,EAAE,CAAC,EAAE,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,QAAQ,EAAC,EAAE,EAAE,CAAC,EAAE,oDAE7D,CACR,CAAC,CAAC,CAAC,IAAI,EAEP,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CACtB,KAAC,MAAM,IAAC,MAAM,EAAC,IAAI,EAAC,GAAG,EAAC,IAAI,EAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,YAClE,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CACxB,MAAC,MAAM,IAAC,MAAM,EAAC,IAAI,EAAS,KAAK,EAAC,YAAY,EAAC,GAAG,EAAC,IAAI,aACrD,KAAC,MAAM,IAAC,MAAM,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,iCACtB,KAAC,KAAK,IAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAC,gBAAgB,GAAG,GACnC,EACT,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,YACzB,CAAC,GACG,KANgB,CAAC,CAOjB,CACV,CAAC,GACK,CACV,CAAC,CAAC,CAAC,IAAI,IACD,CACV,CAAA;AACH,CAAC;AAED,OAAO,EAAE,KAAK,EAAE,CAAA"}