@hanzo/ui 8.27.25 → 8.27.31

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":"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"}

package/dist/marketing/blocks.cjs

@@ -0,0 +1,42 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LogoRow = exports.Quote = exports.Steps = exports.FeatureGrid = exports.Feature = exports.Section = exports.PageHeader = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * The blocks a feature page is made of, in the order a page uses them:
+ *
+ *   PageHeader   the page's <h1> and one line under it
+ *   Section      a band with its own <h2>, one measure wide
+ *   FeatureGrid  a row of Features, as many as fit
+ *   Feature      a title and a sentence, optionally a link and an icon
+ *   Steps        the order things happen in
+ *   Quote        what a customer said, and who
+ *   LogoRow      who else is here
+ *
+ * Every one takes CONTENT and draws it from tokens. None takes a class name or
+ * reads one, so a page made of them is themed by @hanzo/appearance alone.
+ */
+const gui_1 = require("@hanzo/gui");
+const slot_1 = require("../backends/gui/slot.cjs");
+const grid_1 = require("../grid.cjs");
+const type_1 = require("./type.cjs");
+const GUTTER = '$6';
+const TIGHT = { letterSpacing: '-0.012em', textWrap: 'balance' };
+const PageHeader = ({ title, lede, eyebrow, actions }) => ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('page-header'), render: "header", width: "100%", maxW: 860, mx: "auto", items: "center", gap: "$4", px: GUTTER, pt: 120, pb: 48, $md: { pt: 88, pb: 32 }, children: [eyebrow ? ((0, jsx_runtime_1.jsx)(type_1.Line, { size: "sm", tone: "soft", weight: "600", style: { textTransform: 'uppercase', letterSpacing: '0.05em' }, children: eyebrow })) : null, (0, jsx_runtime_1.jsx)(type_1.Line, { render: "h1", m: 0, align: "center", fontFamily: "$heading", fontSize: "$12", lineHeight: "$12", fontWeight: 500, $md: { fontSize: '$10', lineHeight: '$10' }, style: TIGHT, children: title }), lede ? ((0, jsx_runtime_1.jsx)(type_1.Line, { render: "p", m: 0, align: "center", tone: "muted", fontSize: "$7", lineHeight: "$7", maxW: 640, $md: { fontSize: '$6', lineHeight: '$6' }, children: lede })) : null, actions ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { flexWrap: "wrap", justify: "center", gap: "$4", pt: "$2", children: actions })) : null] }));
+exports.PageHeader = PageHeader;
+const Section = ({ title, lede, children, measure = 1080 }) => ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('section'), render: "section", width: "100%", maxW: measure, mx: "auto", gap: "$6", px: GUTTER, py: 64, $md: { py: 32 }, children: [title ? ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$3", items: "center", children: [(0, jsx_runtime_1.jsx)(type_1.Line, { render: "h2", m: 0, align: "center", fontFamily: "$heading", fontSize: "$10", lineHeight: "$10", fontWeight: 500, $md: { fontSize: '$8', lineHeight: '$8' }, style: TIGHT, children: title }), lede ? ((0, jsx_runtime_1.jsx)(type_1.Line, { render: "p", m: 0, align: "center", tone: "muted", size: "lg", maxW: 620, children: lede })) : null] })) : null, children] }));
+exports.Section = Section;
+const Feature = ({ title, children, icon, href, linkLabel = 'Learn more' }) => ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('feature'), render: "article", height: "100%", gap: "$3", p: "$5", rounded: "var(--radius-xl)", borderWidth: 1, borderColor: "$edge", bg: "$panel", children: [icon ? ((0, jsx_runtime_1.jsx)(gui_1.YStack, { "aria-hidden": true, width: 32, height: 32, items: "center", justify: "center", children: icon })) : null, (0, jsx_runtime_1.jsx)(type_1.Line, { render: "h3", m: 0, size: "xl", weight: "600", children: title }), (0, jsx_runtime_1.jsx)(type_1.Line, { render: "p", m: 0, tone: "muted", lineHeight: "$5", children: children }), href ? ((0, jsx_runtime_1.jsx)(gui_1.Anchor, { href: href, color: "$ink", fontSize: "$3", fontWeight: "500", textDecorationLine: "underline", mt: "auto", pt: "$2", children: linkLabel })) : null] }));
+exports.Feature = Feature;
+const FeatureGrid = ({ children, min = 260 }) => ((0, jsx_runtime_1.jsx)(grid_1.Grid, { columns: { min, max: 3 }, gap: 20, children: children }));
+exports.FeatureGrid = FeatureGrid;
+const Steps = ({ steps }) => ((0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('steps'), render: "ol", m: 0, p: 0, gap: "$5", style: { listStyle: 'none' }, children: steps.map((s, i) => ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { render: "li", gap: "$4", items: "flex-start", children: [(0, jsx_runtime_1.jsx)(gui_1.XStack, { shrink: 0, width: 32, height: 32, rounded: 9999, borderWidth: 1, borderColor: "$bound", items: "center", justify: "center", "aria-hidden": true, children: (0, jsx_runtime_1.jsx)(type_1.Line, { size: "sm", weight: "600", children: i + 1 }) }), (0, jsx_runtime_1.jsxs)(gui_1.YStack, { flex: 1, minW: 0, gap: "$1", children: [(0, jsx_runtime_1.jsx)(type_1.Line, { render: "h3", m: 0, size: "lg", weight: "600", children: s.title }), (0, jsx_runtime_1.jsx)(type_1.Line, { render: "div", tone: "muted", lineHeight: "$5", children: s.body })] })] }, s.title))) }));
+exports.Steps = Steps;
+const Quote = ({ quote, name, role }) => ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('quote'), render: "figure", m: 0, maxW: 720, mx: "auto", gap: "$4", items: "center", px: GUTTER, children: [(0, jsx_runtime_1.jsx)(type_1.Line, { render: "blockquote", m: 0, align: "center", fontSize: "$8", lineHeight: "$8", fontWeight: 500, $md: { fontSize: '$7', lineHeight: '$7' }, children: quote }), (0, jsx_runtime_1.jsxs)(gui_1.YStack, { render: "figcaption", items: "center", children: [(0, jsx_runtime_1.jsx)(type_1.Line, { render: "cite", size: "base", weight: "600", fontStyle: "normal", children: name }), role ? ((0, jsx_runtime_1.jsx)(type_1.Line, { size: "sm", tone: "soft", children: role })) : null] })] }));
+exports.Quote = Quote;
+const LogoRow = ({ logos, label }) => ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('logo-row'), width: "100%", items: "center", gap: "$4", px: GUTTER, py: "$6", children: [label ? ((0, jsx_runtime_1.jsx)(type_1.Line, { size: "sm", tone: "soft", align: "center", children: label })) : null, (0, jsx_runtime_1.jsx)(gui_1.XStack, { flexWrap: "wrap", items: "center", justify: "center", gap: "$8", children: logos.map((l) => {
+                const mark = l.src ? ((0, jsx_runtime_1.jsx)(gui_1.Image, { src: l.src, alt: l.name, height: 28, width: "auto", style: { opacity: 0.8 } })) : ((0, jsx_runtime_1.jsx)(type_1.Line, { size: "lg", weight: "600", tone: "muted", children: l.name }));
+                return l.href ? ((0, jsx_runtime_1.jsx)(gui_1.Anchor, { href: l.href, "aria-label": l.name, textDecorationLine: "none", children: mark }, l.name)) : ((0, jsx_runtime_1.jsx)(gui_1.XStack, { children: mark }, l.name));
+            }) })] }));
+exports.LogoRow = LogoRow;

package/dist/marketing/blocks.d.ts

@@ -0,0 +1,53 @@
+import type { ReactNode } from 'react';
+export type PageHeaderProps = {
+    title: ReactNode;
+    lede?: ReactNode;
+    /** A line above the title: the product's name, the section it belongs to. */
+    eyebrow?: string;
+    /** Buttons under the lede. */
+    actions?: ReactNode;
+};
+declare const PageHeader: ({ title, lede, eyebrow, actions }: PageHeaderProps) => import("react").JSX.Element;
+export type SectionProps = {
+    title?: string;
+    lede?: ReactNode;
+    children: ReactNode;
+    measure?: number;
+};
+declare const Section: ({ title, lede, children, measure }: SectionProps) => import("react").JSX.Element;
+export type FeatureProps = {
+    title: string;
+    children: ReactNode;
+    icon?: ReactNode;
+    href?: string;
+    linkLabel?: string;
+};
+declare const Feature: ({ title, children, icon, href, linkLabel }: FeatureProps) => import("react").JSX.Element;
+declare const FeatureGrid: ({ children, min }: {
+    children: ReactNode;
+    min?: number;
+}) => import("react").JSX.Element;
+export type Step = {
+    title: string;
+    body: ReactNode;
+};
+declare const Steps: ({ steps }: {
+    steps: readonly Step[];
+}) => import("react").JSX.Element;
+export type QuoteProps = {
+    quote: ReactNode;
+    name: string;
+    role?: string;
+};
+declare const Quote: ({ quote, name, role }: QuoteProps) => import("react").JSX.Element;
+export type Logo = {
+    name: string;
+    src?: string;
+    href?: string;
+};
+declare const LogoRow: ({ logos, label }: {
+    logos: readonly Logo[];
+    label?: string;
+}) => import("react").JSX.Element;
+export { PageHeader, Section, Feature, FeatureGrid, Steps, Quote, LogoRow };
+//# sourceMappingURL=blocks.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"blocks.d.ts","sourceRoot":"","sources":["../../src/marketing/blocks.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAStC,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,SAAS,CAAA;IAChB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,6EAA6E;IAC7E,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,SAAS,CAAA;CACpB,CAAA;AAED,QAAA,MAAM,UAAU,sCAAuC,eAAe,gCAiCrE,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,SAAS,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAEtG,QAAA,MAAM,OAAO,uCAA+C,YAAY,gCA0BvE,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAC;IAAC,IAAI,CAAC,EAAE,SAAS,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAEtH,QAAA,MAAM,OAAO,+CAA+D,YAAY,gCA6BvF,CAAA;AAED,QAAA,MAAM,WAAW,sBAA6B;IAAE,QAAQ,EAAE,SAAS,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAA;CAAE,gCAIlF,CAAA;AAED,MAAM,MAAM,IAAI,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,SAAS,CAAA;CAAE,CAAA;AAErD,QAAA,MAAM,KAAK,cAAe;IAAE,KAAK,EAAE,SAAS,IAAI,EAAE,CAAA;CAAE,gCA8BnD,CAAA;AAED,MAAM,MAAM,UAAU,GAAG;IAAE,KAAK,EAAE,SAAS,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAE1E,QAAA,MAAM,KAAK,0BAA2B,UAAU,gCAgB/C,CAAA;AAED,MAAM,MAAM,IAAI,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAEhE,QAAA,MAAM,OAAO,qBAAsB;IAAE,KAAK,EAAE,SAAS,IAAI,EAAE,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,gCA0B5E,CAAA;AAED,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,CAAA"}

package/dist/marketing/blocks.js

@@ -0,0 +1,34 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The blocks a feature page is made of, in the order a page uses them:
+ *
+ *   PageHeader   the page's <h1> and one line under it
+ *   Section      a band with its own <h2>, one measure wide
+ *   FeatureGrid  a row of Features, as many as fit
+ *   Feature      a title and a sentence, optionally a link and an icon
+ *   Steps        the order things happen in
+ *   Quote        what a customer said, and who
+ *   LogoRow      who else is here
+ *
+ * Every one takes CONTENT and draws it from tokens. None takes a class name or
+ * reads one, so a page made of them is themed by @hanzo/appearance alone.
+ */
+import { Anchor, Image, XStack, YStack } from '@hanzo/gui';
+import { slot } from '../backends/gui/slot.js';
+import { Grid } from '../grid.js';
+import { Line } from './type.js';
+const GUTTER = '$6';
+const TIGHT = { letterSpacing: '-0.012em', textWrap: 'balance' };
+const PageHeader = ({ title, lede, eyebrow, actions }) => (_jsxs(YStack, { ...slot('page-header'), render: "header", width: "100%", maxW: 860, mx: "auto", items: "center", gap: "$4", px: GUTTER, pt: 120, pb: 48, $md: { pt: 88, pb: 32 }, children: [eyebrow ? (_jsx(Line, { size: "sm", tone: "soft", weight: "600", style: { textTransform: 'uppercase', letterSpacing: '0.05em' }, children: eyebrow })) : null, _jsx(Line, { render: "h1", m: 0, align: "center", fontFamily: "$heading", fontSize: "$12", lineHeight: "$12", fontWeight: 500, $md: { fontSize: '$10', lineHeight: '$10' }, style: TIGHT, children: title }), lede ? (_jsx(Line, { render: "p", m: 0, align: "center", tone: "muted", fontSize: "$7", lineHeight: "$7", maxW: 640, $md: { fontSize: '$6', lineHeight: '$6' }, children: lede })) : null, actions ? (_jsx(XStack, { flexWrap: "wrap", justify: "center", gap: "$4", pt: "$2", children: actions })) : null] }));
+const Section = ({ title, lede, children, measure = 1080 }) => (_jsxs(YStack, { ...slot('section'), render: "section", width: "100%", maxW: measure, mx: "auto", gap: "$6", px: GUTTER, py: 64, $md: { py: 32 }, children: [title ? (_jsxs(YStack, { gap: "$3", items: "center", children: [_jsx(Line, { render: "h2", m: 0, align: "center", fontFamily: "$heading", fontSize: "$10", lineHeight: "$10", fontWeight: 500, $md: { fontSize: '$8', lineHeight: '$8' }, style: TIGHT, children: title }), lede ? (_jsx(Line, { render: "p", m: 0, align: "center", tone: "muted", size: "lg", maxW: 620, children: lede })) : null] })) : null, children] }));
+const Feature = ({ title, children, icon, href, linkLabel = 'Learn more' }) => (_jsxs(YStack, { ...slot('feature'), render: "article", height: "100%", gap: "$3", p: "$5", rounded: "var(--radius-xl)", borderWidth: 1, borderColor: "$edge", bg: "$panel", children: [icon ? (_jsx(YStack, { "aria-hidden": true, width: 32, height: 32, items: "center", justify: "center", children: icon })) : null, _jsx(Line, { render: "h3", m: 0, size: "xl", weight: "600", children: title }), _jsx(Line, { render: "p", m: 0, tone: "muted", lineHeight: "$5", children: children }), href ? (_jsx(Anchor, { href: href, color: "$ink", fontSize: "$3", fontWeight: "500", textDecorationLine: "underline", mt: "auto", pt: "$2", children: linkLabel })) : null] }));
+const FeatureGrid = ({ children, min = 260 }) => (_jsx(Grid, { columns: { min, max: 3 }, gap: 20, children: children }));
+const Steps = ({ steps }) => (_jsx(YStack, { ...slot('steps'), render: "ol", m: 0, p: 0, gap: "$5", style: { listStyle: 'none' }, children: steps.map((s, i) => (_jsxs(XStack, { render: "li", gap: "$4", items: "flex-start", children: [_jsx(XStack, { shrink: 0, width: 32, height: 32, rounded: 9999, borderWidth: 1, borderColor: "$bound", items: "center", justify: "center", "aria-hidden": true, children: _jsx(Line, { size: "sm", weight: "600", children: i + 1 }) }), _jsxs(YStack, { flex: 1, minW: 0, gap: "$1", children: [_jsx(Line, { render: "h3", m: 0, size: "lg", weight: "600", children: s.title }), _jsx(Line, { render: "div", tone: "muted", lineHeight: "$5", children: s.body })] })] }, s.title))) }));
+const Quote = ({ quote, name, role }) => (_jsxs(YStack, { ...slot('quote'), render: "figure", m: 0, maxW: 720, mx: "auto", gap: "$4", items: "center", px: GUTTER, children: [_jsx(Line, { render: "blockquote", m: 0, align: "center", fontSize: "$8", lineHeight: "$8", fontWeight: 500, $md: { fontSize: '$7', lineHeight: '$7' }, children: quote }), _jsxs(YStack, { render: "figcaption", items: "center", children: [_jsx(Line, { render: "cite", size: "base", weight: "600", fontStyle: "normal", children: name }), role ? (_jsx(Line, { size: "sm", tone: "soft", children: role })) : null] })] }));
+const LogoRow = ({ logos, label }) => (_jsxs(YStack, { ...slot('logo-row'), width: "100%", items: "center", gap: "$4", px: GUTTER, py: "$6", children: [label ? (_jsx(Line, { size: "sm", tone: "soft", align: "center", children: label })) : null, _jsx(XStack, { flexWrap: "wrap", items: "center", justify: "center", gap: "$8", children: logos.map((l) => {
+                const mark = l.src ? (_jsx(Image, { src: l.src, alt: l.name, height: 28, width: "auto", style: { opacity: 0.8 } })) : (_jsx(Line, { size: "lg", weight: "600", tone: "muted", children: l.name }));
+                return l.href ? (_jsx(Anchor, { href: l.href, "aria-label": l.name, textDecorationLine: "none", children: mark }, l.name)) : (_jsx(XStack, { children: mark }, l.name));
+            }) })] }));
+export { PageHeader, Section, Feature, FeatureGrid, Steps, Quote, LogoRow };
+//# sourceMappingURL=blocks.js.map

package/dist/marketing/blocks.js.map

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

package/dist/marketing/index.cjs

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LogoRow = exports.Quote = exports.Steps = exports.FeatureGrid = exports.Feature = exports.Section = exports.PageHeader = exports.Line = exports.TextLink = exports.Cta = exports.ClosingCta = exports.Faq = exports.way = exports.termOf = exports.seats = exports.saving = exports.money = exports.charge = exports.audience = exports.Plans = exports.Media = exports.Hero = exports.PageLoading = void 0;
+/**
+ * The marketing surface every Hanzo, Lux and Zoo site shares: the first screen,
+ * the plans, the questions, the closing call and the blocks a feature page is
+ * made of. Tokens and appearance style them; there is no stylesheet.
+ */
+var PageLoading_1 = require("./PageLoading.cjs");
+Object.defineProperty(exports, "PageLoading", { enumerable: true, get: function () { return PageLoading_1.PageLoading; } });
+var Hero_1 = require("./Hero.cjs");
+Object.defineProperty(exports, "Hero", { enumerable: true, get: function () { return Hero_1.Hero; } });
+var Media_1 = require("./Media.cjs");
+Object.defineProperty(exports, "Media", { enumerable: true, get: function () { return Media_1.Media; } });
+var Plans_1 = require("./Plans.cjs");
+Object.defineProperty(exports, "Plans", { enumerable: true, get: function () { return Plans_1.Plans; } });
+var rows_1 = require("./rows.cjs");
+Object.defineProperty(exports, "audience", { enumerable: true, get: function () { return rows_1.audience; } });
+Object.defineProperty(exports, "charge", { enumerable: true, get: function () { return rows_1.charge; } });
+Object.defineProperty(exports, "money", { enumerable: true, get: function () { return rows_1.money; } });
+Object.defineProperty(exports, "saving", { enumerable: true, get: function () { return rows_1.saving; } });
+Object.defineProperty(exports, "seats", { enumerable: true, get: function () { return rows_1.seats; } });
+Object.defineProperty(exports, "termOf", { enumerable: true, get: function () { return rows_1.termOf; } });
+Object.defineProperty(exports, "way", { enumerable: true, get: function () { return rows_1.way; } });
+var Faq_1 = require("./Faq.cjs");
+Object.defineProperty(exports, "Faq", { enumerable: true, get: function () { return Faq_1.Faq; } });
+var ClosingCta_1 = require("./ClosingCta.cjs");
+Object.defineProperty(exports, "ClosingCta", { enumerable: true, get: function () { return ClosingCta_1.ClosingCta; } });
+var Cta_1 = require("./Cta.cjs");
+Object.defineProperty(exports, "Cta", { enumerable: true, get: function () { return Cta_1.Cta; } });
+Object.defineProperty(exports, "TextLink", { enumerable: true, get: function () { return Cta_1.TextLink; } });
+var type_1 = require("./type.cjs");
+Object.defineProperty(exports, "Line", { enumerable: true, get: function () { return type_1.Line; } });
+var blocks_1 = require("./blocks.cjs");
+Object.defineProperty(exports, "PageHeader", { enumerable: true, get: function () { return blocks_1.PageHeader; } });
+Object.defineProperty(exports, "Section", { enumerable: true, get: function () { return blocks_1.Section; } });
+Object.defineProperty(exports, "Feature", { enumerable: true, get: function () { return blocks_1.Feature; } });
+Object.defineProperty(exports, "FeatureGrid", { enumerable: true, get: function () { return blocks_1.FeatureGrid; } });
+Object.defineProperty(exports, "Steps", { enumerable: true, get: function () { return blocks_1.Steps; } });
+Object.defineProperty(exports, "Quote", { enumerable: true, get: function () { return blocks_1.Quote; } });
+Object.defineProperty(exports, "LogoRow", { enumerable: true, get: function () { return blocks_1.LogoRow; } });

package/dist/marketing/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * The marketing surface every Hanzo, Lux and Zoo site shares: the first screen,
+ * the plans, the questions, the closing call and the blocks a feature page is
+ * made of. Tokens and appearance style them; there is no stylesheet.
+ */
+export { PageLoading, type PageLoadingProps } from './PageLoading.js';
+export { Hero, type HeroProps } from './Hero.js';
+export { Media, type MediaProps } from './Media.js';
+export { Plans, type PlansProps, type PlanChoice } from './Plans.js';
+export { audience, charge, money, saving, seats, termOf, way, type Audience, type Interval, type PlanRow, type Way } from './rows.js';
+export { Faq, type FaqItem, type FaqProps } from './Faq.js';
+export { ClosingCta, type ClosingCtaProps } from './ClosingCta.js';
+export { Cta, TextLink, type CtaProps } from './Cta.js';
+export { Line, type LineProps, type LineSize, type LineTone } from './type.js';
+export { PageHeader, Section, Feature, FeatureGrid, Steps, Quote, LogoRow, type Step, type Logo, type PageHeaderProps, type SectionProps, type FeatureProps, type QuoteProps, } from './blocks.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/marketing/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAClE,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAA;AAChD,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAA;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,QAAQ,EAAE,KAAK,QAAQ,EAAE,KAAK,OAAO,EAAE,KAAK,GAAG,EAAE,MAAM,QAAQ,CAAA;AAClI,OAAO,EAAE,GAAG,EAAE,KAAK,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAA;AACxD,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAA;AAC/D,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,QAAQ,EAAE,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAC3E,OAAO,EACL,UAAU,EACV,OAAO,EACP,OAAO,EACP,WAAW,EACX,KAAK,EACL,KAAK,EACL,OAAO,EACP,KAAK,IAAI,EACT,KAAK,IAAI,EACT,KAAK,eAAe,EACpB,KAAK,YAAY,EACjB,KAAK,YAAY,EACjB,KAAK,UAAU,GAChB,MAAM,UAAU,CAAA"}

package/dist/marketing/index.js

@@ -0,0 +1,16 @@
+/**
+ * The marketing surface every Hanzo, Lux and Zoo site shares: the first screen,
+ * the plans, the questions, the closing call and the blocks a feature page is
+ * made of. Tokens and appearance style them; there is no stylesheet.
+ */
+export { PageLoading } from './PageLoading.js';
+export { Hero } from './Hero.js';
+export { Media } from './Media.js';
+export { Plans } from './Plans.js';
+export { audience, charge, money, saving, seats, termOf, way } from './rows.js';
+export { Faq } from './Faq.js';
+export { ClosingCta } from './ClosingCta.js';
+export { Cta, TextLink } from './Cta.js';
+export { Line } from './type.js';
+export { PageHeader, Section, Feature, FeatureGrid, Steps, Quote, LogoRow, } from './blocks.js';
+//# sourceMappingURL=index.js.map

package/dist/marketing/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/marketing/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,EAAE,WAAW,EAAyB,MAAM,eAAe,CAAA;AAClE,OAAO,EAAE,IAAI,EAAkB,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,KAAK,EAAmB,MAAM,SAAS,CAAA;AAChD,OAAO,EAAE,KAAK,EAAoC,MAAM,SAAS,CAAA;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAwD,MAAM,QAAQ,CAAA;AAClI,OAAO,EAAE,GAAG,EAA+B,MAAM,OAAO,CAAA;AACxD,OAAO,EAAE,UAAU,EAAwB,MAAM,cAAc,CAAA;AAC/D,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAiB,MAAM,OAAO,CAAA;AACpD,OAAO,EAAE,IAAI,EAAgD,MAAM,QAAQ,CAAA;AAC3E,OAAO,EACL,UAAU,EACV,OAAO,EACP,OAAO,EACP,WAAW,EACX,KAAK,EACL,KAAK,EACL,OAAO,GAOR,MAAM,UAAU,CAAA"}

package/dist/marketing/rows.cjs

@@ -0,0 +1,47 @@
+"use strict";
+/**
+ * What a plan row says, as sentences a card can print. Pure: no fetch, no
+ * storage. The rows are @hanzo/plans' and commerce's; nothing here types a price.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.termOf = exports.audience = exports.money = void 0;
+exports.charge = charge;
+exports.saving = saving;
+exports.way = way;
+exports.seats = seats;
+/** Whole dollars bare, anything else to the cent: $20, $16.67. */
+const money = (n) => Number.isInteger(n)
+    ? `$${n.toLocaleString('en-US')}`
+    : `$${n.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+exports.money = money;
+/** What one term charges, in dollars, or null where none is sold. */
+function charge(plan, interval) {
+    const n = interval === 'month'
+        ? plan.priceMonthly
+        : (plan.annualTotal ?? (plan.priceAnnual ? Math.round(plan.priceAnnual * 1200) / 100 : null));
+    return n && n > 0 ? n : null;
+}
+/** What a year saves against twelve months, as a whole percent. Null where it saves nothing. */
+function saving(plan) {
+    const month = charge(plan, 'month');
+    const year = charge(plan, 'year');
+    if (!month || !year || year >= 12 * month)
+        return null;
+    return Math.round((1 - year / (12 * month)) * 100);
+}
+/** Who a plan is for: a quoted plan is Enterprise, a per-seat plan is Team, the rest are for one person. */
+const audience = (p) => (p.contactSales || p.pricePerUser ? 'team' : 'individual');
+exports.audience = audience;
+function way(p) {
+    if (p.contactSales)
+        return 'sales';
+    return (p.priceMonthly ?? 0) > 0 ? 'card' : 'free';
+}
+/** The seats a per-seat plan is sold from. */
+function seats(p) {
+    const n = Number(p.limits?.minSeats ?? 1);
+    return Number.isFinite(n) && n > 1 ? Math.floor(n) : 1;
+}
+/** The term a card quotes: a year where one is sold and asked for, else a month. */
+const termOf = (p, yearly) => (yearly && charge(p, 'year') !== null ? 'year' : 'month');
+exports.termOf = termOf;

package/dist/marketing/rows.d.ts

@@ -0,0 +1,41 @@
+/**
+ * What a plan row says, as sentences a card can print. Pure: no fetch, no
+ * storage. The rows are @hanzo/plans' and commerce's; nothing here types a price.
+ */
+/** A plan as a card renders it: dollars, and `features` always present. */
+export interface PlanRow {
+    id: string;
+    name: string;
+    description?: string;
+    priceMonthly: number | null;
+    /** A year shown per month. */
+    priceAnnual?: number | null;
+    /** What a year charges, once, where the catalog sells one. */
+    annualTotal?: number | null;
+    category: string;
+    popular?: boolean;
+    contactSales?: boolean;
+    pricePerUser?: boolean;
+    features: string[];
+    limits?: Record<string, number | null>;
+    checkoutUrl?: string;
+    checkoutId?: string;
+}
+export type Interval = 'month' | 'year';
+export type Audience = 'individual' | 'team';
+/** Whole dollars bare, anything else to the cent: $20, $16.67. */
+export declare const money: (n: number) => string;
+/** What one term charges, in dollars, or null where none is sold. */
+export declare function charge(plan: PlanRow, interval: Interval): number | null;
+/** What a year saves against twelve months, as a whole percent. Null where it saves nothing. */
+export declare function saving(plan: PlanRow): number | null;
+/** Who a plan is for: a quoted plan is Enterprise, a per-seat plan is Team, the rest are for one person. */
+export declare const audience: (p: PlanRow) => Audience;
+/** How a plan is taken: by card, for nothing, or by a conversation. */
+export type Way = 'card' | 'free' | 'sales';
+export declare function way(p: PlanRow): Way;
+/** The seats a per-seat plan is sold from. */
+export declare function seats(p: PlanRow): number;
+/** The term a card quotes: a year where one is sold and asked for, else a month. */
+export declare const termOf: (p: PlanRow, yearly: boolean) => Interval;
+//# sourceMappingURL=rows.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rows.d.ts","sourceRoot":"","sources":["../../src/marketing/rows.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,2EAA2E;AAC3E,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,8BAA8B;IAC9B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,8DAA8D;IAC9D,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,QAAQ,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,QAAQ,EAAE,MAAM,EAAE,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC,CAAA;IACtC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAA;AACvC,MAAM,MAAM,QAAQ,GAAG,YAAY,GAAG,MAAM,CAAA;AAE5C,kEAAkE;AAClE,eAAO,MAAM,KAAK,MAAO,MAAM,KAAG,MAG2D,CAAA;AAE7F,qEAAqE;AACrE,wBAAgB,MAAM,CAAC,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,GAAG,MAAM,GAAG,IAAI,CAMvE;AAED,gGAAgG;AAChG,wBAAgB,MAAM,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAKnD;AAED,4GAA4G;AAC5G,eAAO,MAAM,QAAQ,MAAO,OAAO,KAAG,QAAsE,CAAA;AAE5G,uEAAuE;AACvE,MAAM,MAAM,GAAG,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAA;AAE3C,wBAAgB,GAAG,CAAC,CAAC,EAAE,OAAO,GAAG,GAAG,CAGnC;AAED,8CAA8C;AAC9C,wBAAgB,KAAK,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,CAGxC;AAED,oFAAoF;AACpF,eAAO,MAAM,MAAM,MAAO,OAAO,UAAU,OAAO,KAAG,QAAqE,CAAA"}

package/dist/marketing/rows.js

@@ -0,0 +1,38 @@
+/**
+ * What a plan row says, as sentences a card can print. Pure: no fetch, no
+ * storage. The rows are @hanzo/plans' and commerce's; nothing here types a price.
+ */
+/** Whole dollars bare, anything else to the cent: $20, $16.67. */
+export const money = (n) => Number.isInteger(n)
+    ? `$${n.toLocaleString('en-US')}`
+    : `$${n.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+/** What one term charges, in dollars, or null where none is sold. */
+export function charge(plan, interval) {
+    const n = interval === 'month'
+        ? plan.priceMonthly
+        : (plan.annualTotal ?? (plan.priceAnnual ? Math.round(plan.priceAnnual * 1200) / 100 : null));
+    return n && n > 0 ? n : null;
+}
+/** What a year saves against twelve months, as a whole percent. Null where it saves nothing. */
+export function saving(plan) {
+    const month = charge(plan, 'month');
+    const year = charge(plan, 'year');
+    if (!month || !year || year >= 12 * month)
+        return null;
+    return Math.round((1 - year / (12 * month)) * 100);
+}
+/** Who a plan is for: a quoted plan is Enterprise, a per-seat plan is Team, the rest are for one person. */
+export const audience = (p) => (p.contactSales || p.pricePerUser ? 'team' : 'individual');
+export function way(p) {
+    if (p.contactSales)
+        return 'sales';
+    return (p.priceMonthly ?? 0) > 0 ? 'card' : 'free';
+}
+/** The seats a per-seat plan is sold from. */
+export function seats(p) {
+    const n = Number(p.limits?.minSeats ?? 1);
+    return Number.isFinite(n) && n > 1 ? Math.floor(n) : 1;
+}
+/** The term a card quotes: a year where one is sold and asked for, else a month. */
+export const termOf = (p, yearly) => (yearly && charge(p, 'year') !== null ? 'year' : 'month');
+//# sourceMappingURL=rows.js.map

package/dist/marketing/rows.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rows.js","sourceRoot":"","sources":["../../src/marketing/rows.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAyBH,kEAAkE;AAClE,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,CAAS,EAAU,EAAE,CACzC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC;IACjB,CAAC,CAAC,IAAI,CAAC,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE;IACjC,CAAC,CAAC,IAAI,CAAC,CAAC,cAAc,CAAC,OAAO,EAAE,EAAE,qBAAqB,EAAE,CAAC,EAAE,qBAAqB,EAAE,CAAC,EAAE,CAAC,EAAE,CAAA;AAE7F,qEAAqE;AACrE,MAAM,UAAU,MAAM,CAAC,IAAa,EAAE,QAAkB;IACtD,MAAM,CAAC,GACL,QAAQ,KAAK,OAAO;QAClB,CAAC,CAAC,IAAI,CAAC,YAAY;QACnB,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAA;IACjG,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;AAC9B,CAAC;AAED,gGAAgG;AAChG,MAAM,UAAU,MAAM,CAAC,IAAa;IAClC,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,CAAA;IACnC,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,CAAA;IACjC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,IAAI,IAAI,IAAI,EAAE,GAAG,KAAK;QAAE,OAAO,IAAI,CAAA;IACtD,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,CAAC,EAAE,GAAG,KAAK,CAAC,CAAC,GAAG,GAAG,CAAC,CAAA;AACpD,CAAC;AAED,4GAA4G;AAC5G,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,CAAU,EAAY,EAAE,CAAC,CAAC,CAAC,CAAC,YAAY,IAAI,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAA;AAK5G,MAAM,UAAU,GAAG,CAAC,CAAU;IAC5B,IAAI,CAAC,CAAC,YAAY;QAAE,OAAO,OAAO,CAAA;IAClC,OAAO,CAAC,CAAC,CAAC,YAAY,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAA;AACpD,CAAC;AAED,8CAA8C;AAC9C,MAAM,UAAU,KAAK,CAAC,CAAU;IAC9B,MAAM,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,EAAE,QAAQ,IAAI,CAAC,CAAC,CAAA;IACzC,OAAO,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;AACxD,CAAC;AAED,oFAAoF;AACpF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,CAAU,EAAE,MAAe,EAAY,EAAE,CAAC,CAAC,MAAM,IAAI,MAAM,CAAC,CAAC,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAA"}

package/dist/marketing/seen.cjs

@@ -0,0 +1,26 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSeen = useSeen;
+const react_1 = require("react");
+/**
+ * Calls `onSeen` once, the first time half of the element is on screen. The
+ * callback is the host's and may be a new function every render; the view is
+ * counted once, so the effect does not depend on it.
+ */
+function useSeen(ref, onSeen) {
+    (0, react_1.useEffect)(() => {
+        const el = ref.current;
+        if (!el || !onSeen || typeof IntersectionObserver === 'undefined')
+            return;
+        const seen = new IntersectionObserver(([e]) => {
+            if (!e?.isIntersecting)
+                return;
+            onSeen();
+            seen.disconnect();
+        }, { threshold: 0.5 });
+        seen.observe(el);
+        return () => seen.disconnect();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+}

package/dist/marketing/seen.d.ts

@@ -0,0 +1,8 @@
+import { type RefObject } from 'react';
+/**
+ * Calls `onSeen` once, the first time half of the element is on screen. The
+ * callback is the host's and may be a new function every render; the view is
+ * counted once, so the effect does not depend on it.
+ */
+export declare function useSeen(ref: RefObject<Element | null>, onSeen?: () => void): void;
+//# sourceMappingURL=seen.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"seen.d.ts","sourceRoot":"","sources":["../../src/marketing/seen.ts"],"names":[],"mappings":"AAEA,OAAO,EAAa,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjD;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,GAAG,EAAE,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,MAAM,CAAC,EAAE,MAAM,IAAI,GAAG,IAAI,CAgBjF"}

package/dist/marketing/seen.js

@@ -0,0 +1,24 @@
+'use client';
+import { useEffect } from 'react';
+/**
+ * Calls `onSeen` once, the first time half of the element is on screen. The
+ * callback is the host's and may be a new function every render; the view is
+ * counted once, so the effect does not depend on it.
+ */
+export function useSeen(ref, onSeen) {
+    useEffect(() => {
+        const el = ref.current;
+        if (!el || !onSeen || typeof IntersectionObserver === 'undefined')
+            return;
+        const seen = new IntersectionObserver(([e]) => {
+            if (!e?.isIntersecting)
+                return;
+            onSeen();
+            seen.disconnect();
+        }, { threshold: 0.5 });
+        seen.observe(el);
+        return () => seen.disconnect();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+}
+//# sourceMappingURL=seen.js.map

package/dist/marketing/seen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"seen.js","sourceRoot":"","sources":["../../src/marketing/seen.ts"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,EAAE,SAAS,EAAkB,MAAM,OAAO,CAAA;AAEjD;;;;GAIG;AACH,MAAM,UAAU,OAAO,CAAC,GAA8B,EAAE,MAAmB;IACzE,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,EAAE,GAAG,GAAG,CAAC,OAAO,CAAA;QACtB,IAAI,CAAC,EAAE,IAAI,CAAC,MAAM,IAAI,OAAO,oBAAoB,KAAK,WAAW;YAAE,OAAM;QACzE,MAAM,IAAI,GAAG,IAAI,oBAAoB,CACnC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE;YACN,IAAI,CAAC,CAAC,EAAE,cAAc;gBAAE,OAAM;YAC9B,MAAM,EAAE,CAAA;YACR,IAAI,CAAC,UAAU,EAAE,CAAA;QACnB,CAAC,EACD,EAAE,SAAS,EAAE,GAAG,EAAE,CACnB,CAAA;QACD,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAA;QAChB,OAAO,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,CAAA;QAC9B,uDAAuD;IACzD,CAAC,EAAE,EAAE,CAAC,CAAA;AACR,CAAC"}