@hanzo/ui 8.29.21 → 8.29.23

package/dist/marketing/index.cjs

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LogoRow = exports.Quote = exports.Steps = exports.FeatureGrid = exports.Feature = exports.Section = exports.PageHeader = exports.Run = exports.Document = exports.Pager = exports.Pair = exports.Lattice = exports.Reveal = exports.Lift = exports.Cell = exports.Leaf = exports.More = exports.Chip = exports.Action = exports.Claim = exports.Lede = exports.Eyebrow = exports.Title = exports.Display = exports.Line = exports.TextLink = exports.Cta = exports.ClosingCta = exports.Faq = exports.Footer = exports.way = exports.termOf = exports.seats = exports.saving = exports.money = exports.merged = exports.charge = exports.audience = exports.Plans = exports.Media = exports.Hero = exports.PageLoading = void 0;
+exports.FeatureGrid = exports.Feature = exports.Section = exports.PageHeader = exports.initials = exports.Repo = exports.Languages = exports.Faces = exports.Counts = exports.weeks = exports.span = exports.shade = exports.cuts = exports.Sparkline = exports.Heatmap = exports.Run = exports.Document = exports.Pager = exports.Pair = exports.Lattice = exports.Reveal = exports.Lift = exports.Cell = exports.Leaf = exports.More = exports.Chip = exports.Action = exports.Claim = exports.Lede = exports.Eyebrow = exports.Title = exports.Display = exports.Line = exports.TextLink = exports.Cta = exports.ClosingCta = exports.Faq = exports.Footer = exports.way = exports.termOf = exports.seats = exports.saving = exports.money = exports.merged = exports.charge = exports.audience = exports.Plans = exports.Media = exports.Hero = exports.PageLoading = void 0;
+exports.LogoRow = exports.Quote = exports.Steps = 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
@@ -57,6 +58,19 @@ var document_1 = require("./document.cjs");
 Object.defineProperty(exports, "Document", { enumerable: true, get: function () { return document_1.Document; } });
 var run_1 = require("./run.cjs");
 Object.defineProperty(exports, "Run", { enumerable: true, get: function () { return run_1.Run; } });
+var heat_1 = require("./heat.cjs");
+Object.defineProperty(exports, "Heatmap", { enumerable: true, get: function () { return heat_1.Heatmap; } });
+Object.defineProperty(exports, "Sparkline", { enumerable: true, get: function () { return heat_1.Sparkline; } });
+Object.defineProperty(exports, "cuts", { enumerable: true, get: function () { return heat_1.cuts; } });
+Object.defineProperty(exports, "shade", { enumerable: true, get: function () { return heat_1.shade; } });
+Object.defineProperty(exports, "span", { enumerable: true, get: function () { return heat_1.span; } });
+Object.defineProperty(exports, "weeks", { enumerable: true, get: function () { return heat_1.weeks; } });
+var repo_1 = require("./repo.cjs");
+Object.defineProperty(exports, "Counts", { enumerable: true, get: function () { return repo_1.Counts; } });
+Object.defineProperty(exports, "Faces", { enumerable: true, get: function () { return repo_1.Faces; } });
+Object.defineProperty(exports, "Languages", { enumerable: true, get: function () { return repo_1.Languages; } });
+Object.defineProperty(exports, "Repo", { enumerable: true, get: function () { return repo_1.Repo; } });
+Object.defineProperty(exports, "initials", { enumerable: true, get: function () { return repo_1.initials; } });
 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; } });

package/dist/marketing/index.d.ts

@@ -19,5 +19,7 @@ export { Pair, type PairProps } from './pair.js';
 export { Pager, type PagerProps } from './pager.js';
 export { Document, type DocumentProps } from './document.js';
 export { Run, type RunProps } from './run.js';
+export { Heatmap, Sparkline, cuts, shade, span, weeks, type HeatmapProps, type SparklineProps } from './heat.js';
+export { Counts, Faces, Languages, Repo, initials, type CountsProps, type FacesProps, type LanguagesProps, type RepoProps } from './repo.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

@@ -1 +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,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;AAC1I,OAAO,EAAE,MAAM,EAAE,KAAK,YAAY,EAAE,KAAK,UAAU,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAA;AACvF,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,KAAK,aAAa,EAAE,MAAM,OAAO,CAAA;AACxE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,SAAS,EAAE,KAAK,QAAQ,EAAE,KAAK,QAAQ,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAA;AACjI,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAA;AAClE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAA;AACnG,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAA;AAChD,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAA;AACzD,OAAO,EAAE,GAAG,EAAE,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC1C,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"}
+{"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,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;AAC1I,OAAO,EAAE,MAAM,EAAE,KAAK,YAAY,EAAE,KAAK,UAAU,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAA;AACvF,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,KAAK,aAAa,EAAE,MAAM,OAAO,CAAA;AACxE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,SAAS,EAAE,KAAK,QAAQ,EAAE,KAAK,QAAQ,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAA;AACjI,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAA;AAClE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAA;AACnG,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAA;AAChD,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAA;AACzD,OAAO,EAAE,GAAG,EAAE,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC1C,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,YAAY,EAAE,KAAK,cAAc,EAAE,MAAM,QAAQ,CAAA;AAC7G,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,WAAW,EAAE,KAAK,UAAU,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAA;AACzI,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

@@ -19,5 +19,7 @@ export { Pair } from './pair.js';
 export { Pager } from './pager.js';
 export { Document } from './document.js';
 export { Run } from './run.js';
+export { Heatmap, Sparkline, cuts, shade, span, weeks } from './heat.js';
+export { Counts, Faces, Languages, Repo, initials } from './repo.js';
 export { PageHeader, Section, Feature, FeatureGrid, Steps, Quote, LogoRow, } from './blocks.js';
 //# sourceMappingURL=index.js.map

package/dist/marketing/index.js.map

@@ -1 +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,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAwD,MAAM,QAAQ,CAAA;AAC1I,OAAO,EAAE,MAAM,EAAwD,MAAM,UAAU,CAAA;AACvF,OAAO,EAAE,GAAG,EAA+B,MAAM,OAAO,CAAA;AACxD,OAAO,EAAE,UAAU,EAAwB,MAAM,cAAc,CAAA;AAC/D,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAqC,MAAM,OAAO,CAAA;AACxE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAgE,MAAM,QAAQ,CAAA;AACjI,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAqB,MAAM,YAAY,CAAA;AAClE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAwC,MAAM,WAAW,CAAA;AACnG,OAAO,EAAE,IAAI,EAAkB,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,KAAK,EAAmB,MAAM,SAAS,CAAA;AAChD,OAAO,EAAE,QAAQ,EAAsB,MAAM,YAAY,CAAA;AACzD,OAAO,EAAE,GAAG,EAAiB,MAAM,OAAO,CAAA;AAC1C,OAAO,EACL,UAAU,EACV,OAAO,EACP,OAAO,EACP,WAAW,EACX,KAAK,EACL,KAAK,EACL,OAAO,GAOR,MAAM,UAAU,CAAA"}
+{"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,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAwD,MAAM,QAAQ,CAAA;AAC1I,OAAO,EAAE,MAAM,EAAwD,MAAM,UAAU,CAAA;AACvF,OAAO,EAAE,GAAG,EAA+B,MAAM,OAAO,CAAA;AACxD,OAAO,EAAE,UAAU,EAAwB,MAAM,cAAc,CAAA;AAC/D,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAqC,MAAM,OAAO,CAAA;AACxE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAgE,MAAM,QAAQ,CAAA;AACjI,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAqB,MAAM,YAAY,CAAA;AAClE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAwC,MAAM,WAAW,CAAA;AACnG,OAAO,EAAE,IAAI,EAAkB,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,KAAK,EAAmB,MAAM,SAAS,CAAA;AAChD,OAAO,EAAE,QAAQ,EAAsB,MAAM,YAAY,CAAA;AACzD,OAAO,EAAE,GAAG,EAAiB,MAAM,OAAO,CAAA;AAC1C,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAA0C,MAAM,QAAQ,CAAA;AAC7G,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAA0E,MAAM,QAAQ,CAAA;AACzI,OAAO,EACL,UAAU,EACV,OAAO,EACP,OAAO,EACP,WAAW,EACX,KAAK,EACL,KAAK,EACL,OAAO,GAOR,MAAM,UAAU,CAAA"}

package/dist/marketing/repo.cjs

@@ -0,0 +1,72 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.initials = void 0;
+exports.Counts = Counts;
+exports.Repo = Repo;
+exports.Languages = Languages;
+exports.Faces = Faces;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const gui_1 = require("@hanzo/gui");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const slot_1 = require("../backends/gui/slot.cjs");
+/** A fill the colour table does not name: a page's own CSS value, which gui emits as written. */
+const fill = (c) => ({ backgroundColor: c });
+const group = (n) => n.toLocaleString('en-US');
+const real = (n) => typeof n === 'number' && Number.isFinite(n) && n >= 0;
+function Counts({ stars, forks, size = 'md' }) {
+    const icon = size === 'sm' ? 12 : 14;
+    const one = (n, mark, name) => ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: 4, ...(0, slot_1.slot)(`count-${name}`), children: [mark, (0, jsx_runtime_1.jsx)(gui_1.Text, { fontFamily: "$mono", fontSize: size === 'sm' ? '$1' : '$2', color: "var(--muted-foreground)", fontVariant: ['tabular-nums'], "aria-label": `${group(n)} ${name}`, children: group(n) })] }, name));
+    const shown = [
+        real(stars)
+            ? one(stars, (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Star, { size: icon, color: "var(--muted-foreground)", "aria-hidden": true }), 'stars')
+            : null,
+        real(forks)
+            ? one(forks, (0, jsx_runtime_1.jsx)(lucide_icons_2_1.GitFork, { size: icon, color: "var(--muted-foreground)", "aria-hidden": true }), 'forks')
+            : null,
+    ].filter(Boolean);
+    if (!shown.length)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(gui_1.XStack, { items: "center", gap: 12, ...(0, slot_1.slot)('counts'), children: shown }));
+}
+function Repo({ name, description, href, target, rel, language, tag, stars, forks, actions, }) {
+    const linked = href != null;
+    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('repo'), gap: 10, p: 16, rounded: "var(--radius-xl)", borderWidth: 1, borderColor: "var(--border)", ...fill('var(--surface-card)'), ...(linked
+            ? { hoverStyle: { borderColor: 'var(--border-strong)' } }
+            : null), minW: 0, children: [(0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: 6, grow: 1, shrink: 0, ...(linked
+                    ? {
+                        render: (0, jsx_runtime_1.jsx)("a", { href: href, target: target, rel: rel }),
+                        textDecorationLine: 'none',
+                    }
+                    : null), children: [(0, jsx_runtime_1.jsx)(gui_1.Text, { fontFamily: "$mono", fontSize: "$2", fontWeight: "600", color: "var(--foreground)", numberOfLines: 1, "data-i18n-ltr": "", children: name }), description ? ((0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", lineHeight: "$3", color: "var(--muted-foreground)", numberOfLines: 2, minH: 38, children: description })) : null] }), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", justify: "space-between", gap: 8, flexWrap: "wrap", children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: 12, children: [language ? ((0, jsx_runtime_1.jsx)(gui_1.Text, { fontFamily: "$mono", fontSize: "$1", color: "var(--muted-foreground)", children: language })) : null, tag ? ((0, jsx_runtime_1.jsx)(gui_1.Text, { fontFamily: "$mono", fontSize: "$1", color: "var(--muted-foreground)", px: 6, py: 1, rounded: 4, borderWidth: 1, borderColor: "var(--border)", children: tag })) : null, (0, jsx_runtime_1.jsx)(Counts, { stars: stars, forks: forks, size: "sm" })] }), actions] })] }));
+}
+/** Four inks cycle down the shares, so neighbours differ in the page's own monochrome. */
+const SHARE = [
+    'var(--foreground)',
+    'color-mix(in srgb, var(--foreground) 62%, transparent)',
+    'color-mix(in srgb, var(--foreground) 36%, transparent)',
+    'color-mix(in srgb, var(--foreground) 18%, transparent)',
+];
+function Languages({ share, label }) {
+    const rows = share.filter((s) => s.share > 0);
+    const total = rows.reduce((n, s) => n + s.share, 0);
+    if (!total)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: 8, ...(0, slot_1.slot)('languages'), children: [(0, jsx_runtime_1.jsx)(gui_1.XStack, { role: "img", "aria-label": label, height: 8, rounded: 9999, overflow: "hidden", gap: 2, children: rows.map((s, i) => ((0, jsx_runtime_1.jsx)(gui_1.View, { height: "100%", width: `${((100 * s.share) / total).toFixed(2)}%`, ...fill(SHARE[i % SHARE.length]) }, s.name))) }), (0, jsx_runtime_1.jsx)(gui_1.XStack, { gap: 14, flexWrap: "wrap", children: rows.map((s, i) => ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: 6, children: [(0, jsx_runtime_1.jsx)(gui_1.View, { width: 8, height: 8, rounded: 9999, ...fill(SHARE[i % SHARE.length]) }), (0, jsx_runtime_1.jsxs)(gui_1.Text, { fontFamily: "$mono", fontSize: "$1", color: "var(--muted-foreground)", children: [s.name, " ", ((100 * s.share) / total).toFixed(1), "%"] })] }, s.name))) })] }));
+}
+/** Up to two initials of a name. */
+const initials = (name) => name
+    .trim()
+    .split(/\s+/)
+    .slice(0, 2)
+    .map((w) => Array.from(w)[0] ?? '')
+    .join('')
+    .toUpperCase();
+exports.initials = initials;
+function Faces({ people, max = 5 }) {
+    if (!people.length)
+        return null;
+    const shown = people.slice(0, max);
+    const more = people.length - shown.length;
+    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", ...(0, slot_1.slot)('faces'), children: [shown.map((p, i) => ((0, jsx_runtime_1.jsx)(gui_1.View, { width: 28, height: 28, rounded: 9999, items: "center", justify: "center", borderWidth: 2, borderColor: "var(--background)", ...fill('var(--secondary)'), marginInlineStart: i ? -8 : 0, title: p.name, children: (0, jsx_runtime_1.jsx)(gui_1.Text, { fontFamily: "$mono", fontSize: "$1", fontWeight: "600", color: "var(--foreground)", children: (0, exports.initials)(p.name) }) }, `${p.name}-${i}`))), more > 0 ? ((0, jsx_runtime_1.jsxs)(gui_1.Text, { fontFamily: "$mono", fontSize: "$1", color: "var(--muted-foreground)", marginInlineStart: 8, children: ["+", group(more)] })) : null] }));
+}

package/dist/marketing/repo.d.ts

@@ -0,0 +1,61 @@
+/**
+ * A repository, and the small counts that describe it.
+ *
+ *   Repo       a card: its name, a line on it, its counts and language, and the
+ *              actions the caller puts at its foot; the whole card is a link when
+ *              it is given an `href`
+ *   Counts     stars and forks, each with its mark; a count the caller does not
+ *              hold is not drawn
+ *   Languages  the share of each language as one bar and a legend
+ *   Faces      people as overlapping initials, with the rest counted
+ *
+ * Each takes its data as props and fetches nothing, draws from tokens, and is a
+ * gui element, so one import serves web, native and desktop.
+ */
+import type { ReactNode } from 'react';
+export type CountsProps = {
+    stars?: number;
+    forks?: number;
+    /** The size of the marks and figures. */
+    size?: 'sm' | 'md';
+};
+export declare function Counts({ stars, forks, size }: CountsProps): import("react").JSX.Element | null;
+export type RepoProps = {
+    /** `owner/name`. */
+    name: string;
+    description?: ReactNode;
+    /** Where the card goes; with none the card is not a link. */
+    href?: string;
+    target?: string;
+    rel?: string;
+    language?: ReactNode;
+    /** A word that files the repository, in an outline beside the counts. */
+    tag?: ReactNode;
+    stars?: number;
+    forks?: number;
+    /** What sits at the card's foot: a star button, a link. */
+    actions?: ReactNode;
+};
+export declare function Repo({ name, description, href, target, rel, language, tag, stars, forks, actions, }: RepoProps): import("react").JSX.Element;
+export type LanguagesProps = {
+    /** Each language and its share, any scale: the bar is each over the sum. */
+    share: readonly {
+        name: string;
+        share: number;
+    }[];
+    /** What the bar says to a reader who cannot see it. */
+    label: string;
+};
+export declare function Languages({ share, label }: LanguagesProps): import("react").JSX.Element | null;
+export type FacesProps = {
+    /** Each person by the name their initials are read from. */
+    people: readonly {
+        name: string;
+    }[];
+    /** How many are drawn; the rest are counted. */
+    max?: number;
+};
+/** Up to two initials of a name. */
+export declare const initials: (name: string) => string;
+export declare function Faces({ people, max }: FacesProps): import("react").JSX.Element | null;
+//# sourceMappingURL=repo.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"repo.d.ts","sourceRoot":"","sources":["../../src/marketing/repo.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;GAaG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAatC,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,yCAAyC;IACzC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;CACnB,CAAA;AAED,wBAAgB,MAAM,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,IAAW,EAAE,EAAE,WAAW,sCAsChE;AAED,MAAM,MAAM,SAAS,GAAG;IACtB,oBAAoB;IACpB,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,6DAA6D;IAC7D,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,yEAAyE;IACzE,GAAG,CAAC,EAAE,SAAS,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,2DAA2D;IAC3D,OAAO,CAAC,EAAE,SAAS,CAAA;CACpB,CAAA;AAED,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,WAAW,EACX,IAAI,EACJ,MAAM,EACN,GAAG,EACH,QAAQ,EACR,GAAG,EACH,KAAK,EACL,KAAK,EACL,OAAO,GACR,EAAE,SAAS,+BAgFX;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B,4EAA4E;IAC5E,KAAK,EAAE,SAAS;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IACjD,uDAAuD;IACvD,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAUD,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,cAAc,sCA4CzD;AAED,MAAM,MAAM,UAAU,GAAG;IACvB,4DAA4D;IAC5D,MAAM,EAAE,SAAS;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IACnC,gDAAgD;IAChD,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,CAAA;AAED,oCAAoC;AACpC,eAAO,MAAM,QAAQ,SAAU,MAAM,WAOnB,CAAA;AAElB,wBAAgB,KAAK,CAAC,EAAE,MAAM,EAAE,GAAO,EAAE,EAAE,UAAU,sCA0CpD"}

package/dist/marketing/repo.js

@@ -0,0 +1,65 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text, View, XStack, YStack } from '@hanzo/gui';
+import { GitFork, Star } from '@hanzogui/lucide-icons-2';
+import { slot } from '../backends/gui/slot.js';
+/** A fill the colour table does not name: a page's own CSS value, which gui emits as written. */
+const fill = (c) => ({ backgroundColor: c });
+const group = (n) => n.toLocaleString('en-US');
+const real = (n) => typeof n === 'number' && Number.isFinite(n) && n >= 0;
+export function Counts({ stars, forks, size = 'md' }) {
+    const icon = size === 'sm' ? 12 : 14;
+    const one = (n, mark, name) => (_jsxs(XStack, { items: "center", gap: 4, ...slot(`count-${name}`), children: [mark, _jsx(Text, { fontFamily: "$mono", fontSize: size === 'sm' ? '$1' : '$2', color: "var(--muted-foreground)", fontVariant: ['tabular-nums'], "aria-label": `${group(n)} ${name}`, children: group(n) })] }, name));
+    const shown = [
+        real(stars)
+            ? one(stars, _jsx(Star, { size: icon, color: "var(--muted-foreground)", "aria-hidden": true }), 'stars')
+            : null,
+        real(forks)
+            ? one(forks, _jsx(GitFork, { size: icon, color: "var(--muted-foreground)", "aria-hidden": true }), 'forks')
+            : null,
+    ].filter(Boolean);
+    if (!shown.length)
+        return null;
+    return (_jsx(XStack, { items: "center", gap: 12, ...slot('counts'), children: shown }));
+}
+export function Repo({ name, description, href, target, rel, language, tag, stars, forks, actions, }) {
+    const linked = href != null;
+    return (_jsxs(YStack, { ...slot('repo'), gap: 10, p: 16, rounded: "var(--radius-xl)", borderWidth: 1, borderColor: "var(--border)", ...fill('var(--surface-card)'), ...(linked
+            ? { hoverStyle: { borderColor: 'var(--border-strong)' } }
+            : null), minW: 0, children: [_jsxs(YStack, { gap: 6, grow: 1, shrink: 0, ...(linked
+                    ? {
+                        render: _jsx("a", { href: href, target: target, rel: rel }),
+                        textDecorationLine: 'none',
+                    }
+                    : null), children: [_jsx(Text, { fontFamily: "$mono", fontSize: "$2", fontWeight: "600", color: "var(--foreground)", numberOfLines: 1, "data-i18n-ltr": "", children: name }), description ? (_jsx(Text, { fontSize: "$2", lineHeight: "$3", color: "var(--muted-foreground)", numberOfLines: 2, minH: 38, children: description })) : null] }), _jsxs(XStack, { items: "center", justify: "space-between", gap: 8, flexWrap: "wrap", children: [_jsxs(XStack, { items: "center", gap: 12, children: [language ? (_jsx(Text, { fontFamily: "$mono", fontSize: "$1", color: "var(--muted-foreground)", children: language })) : null, tag ? (_jsx(Text, { fontFamily: "$mono", fontSize: "$1", color: "var(--muted-foreground)", px: 6, py: 1, rounded: 4, borderWidth: 1, borderColor: "var(--border)", children: tag })) : null, _jsx(Counts, { stars: stars, forks: forks, size: "sm" })] }), actions] })] }));
+}
+/** Four inks cycle down the shares, so neighbours differ in the page's own monochrome. */
+const SHARE = [
+    'var(--foreground)',
+    'color-mix(in srgb, var(--foreground) 62%, transparent)',
+    'color-mix(in srgb, var(--foreground) 36%, transparent)',
+    'color-mix(in srgb, var(--foreground) 18%, transparent)',
+];
+export function Languages({ share, label }) {
+    const rows = share.filter((s) => s.share > 0);
+    const total = rows.reduce((n, s) => n + s.share, 0);
+    if (!total)
+        return null;
+    return (_jsxs(YStack, { gap: 8, ...slot('languages'), children: [_jsx(XStack, { role: "img", "aria-label": label, height: 8, rounded: 9999, overflow: "hidden", gap: 2, children: rows.map((s, i) => (_jsx(View, { height: "100%", width: `${((100 * s.share) / total).toFixed(2)}%`, ...fill(SHARE[i % SHARE.length]) }, s.name))) }), _jsx(XStack, { gap: 14, flexWrap: "wrap", children: rows.map((s, i) => (_jsxs(XStack, { items: "center", gap: 6, children: [_jsx(View, { width: 8, height: 8, rounded: 9999, ...fill(SHARE[i % SHARE.length]) }), _jsxs(Text, { fontFamily: "$mono", fontSize: "$1", color: "var(--muted-foreground)", children: [s.name, " ", ((100 * s.share) / total).toFixed(1), "%"] })] }, s.name))) })] }));
+}
+/** Up to two initials of a name. */
+export const initials = (name) => name
+    .trim()
+    .split(/\s+/)
+    .slice(0, 2)
+    .map((w) => Array.from(w)[0] ?? '')
+    .join('')
+    .toUpperCase();
+export function Faces({ people, max = 5 }) {
+    if (!people.length)
+        return null;
+    const shown = people.slice(0, max);
+    const more = people.length - shown.length;
+    return (_jsxs(XStack, { items: "center", ...slot('faces'), children: [shown.map((p, i) => (_jsx(View, { width: 28, height: 28, rounded: 9999, items: "center", justify: "center", borderWidth: 2, borderColor: "var(--background)", ...fill('var(--secondary)'), marginInlineStart: i ? -8 : 0, title: p.name, children: _jsx(Text, { fontFamily: "$mono", fontSize: "$1", fontWeight: "600", color: "var(--foreground)", children: initials(p.name) }) }, `${p.name}-${i}`))), more > 0 ? (_jsxs(Text, { fontFamily: "$mono", fontSize: "$1", color: "var(--muted-foreground)", marginInlineStart: 8, children: ["+", group(more)] })) : null] }));
+}
+//# sourceMappingURL=repo.js.map

package/dist/marketing/repo.js.map

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

package/dist/models/ModelPicker.cjs

@@ -70,7 +70,7 @@ const load = () => (pending ??= Promise.resolve().then(() => __importStar(requir
 /** Row height, px: a line of 13px type on a pointer, a thumb's reach on a phone. */
 const ROW = 32;
 const ROW_TOUCH = 44;
-function ModelPicker({ models, value, onChange, scope, limits, loading = false, error = null, disabled = false, quiet = false, size = 'md', placeholder = 'Choose a model', name = 'Model', open: openProp, onOpenChange, }) {
+function ModelPicker({ models, value, onChange, scope, limits, loading = false, error = null, disabled = false, quiet = false, size = 'md', placeholder = 'Choose a model', name = 'Model', describe, granted, onUpgrade, open: openProp, onOpenChange, }) {
     const [own, setOwn] = (0, react_1.useState)(false);
     const open = openProp ?? own;
     const setOpen = (0, react_1.useCallback)((next) => {
@@ -110,7 +110,7 @@ function ModelPicker({ models, value, onChange, scope, limits, loading = false,
             trigger.current?.focus?.();
     }, [Live]);
     const small = size === 'sm';
-    const button = ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ref: trigger, ...(0, slot_1.slot)('model-picker'), role: "button", tabIndex: disabled ? -1 : 0, "aria-label": `${name}: ${label}`, "aria-haspopup": "listbox", "aria-expanded": open, "aria-disabled": disabled || undefined, height: small ? 28 : 36, px: small ? '$2' : '$3', gap: "$2", items: "center", maxW: "100%", rounded: "$3", borderWidth: quiet ? 0 : 1, borderColor: "$borderColor", bg: quiet ? 'transparent' : '$background', cursor: disabled ? 'default' : 'pointer', opacity: disabled ? 0.5 : 1, hoverStyle: disabled ? undefined : quiet ? { bg: '$hover' } : { borderColor: '$rim' }, pressStyle: disabled ? undefined : { bg: '$hover' }, focusVisibleStyle: press_1.RING, onLayout: (e) => setTriggerW(e.nativeEvent?.layout?.width ?? 0), 
+    const button = ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ref: trigger, ...(0, slot_1.slot)('model-picker'), role: "button", tabIndex: disabled ? -1 : 0, "aria-label": describe ?? `${name}: ${label}`, "aria-haspopup": "listbox", "aria-expanded": open, "aria-disabled": disabled || undefined, height: small ? 28 : 36, px: small ? '$2' : '$3', gap: "$2", items: "center", maxW: "100%", rounded: "$3", borderWidth: quiet ? 0 : 1, borderColor: "$borderColor", bg: quiet ? 'transparent' : '$background', cursor: disabled ? 'default' : 'pointer', opacity: disabled ? 0.5 : 1, hoverStyle: disabled ? undefined : quiet ? { bg: '$hover' } : { borderColor: '$rim' }, pressStyle: disabled ? undefined : { bg: '$hover' }, focusVisibleStyle: press_1.RING, onLayout: (e) => setTriggerW(e.nativeEvent?.layout?.width ?? 0), 
         // The popover opens on press once it is here; before that, and on a phone, the press opens it.
         onPress: disabled || (Live && !sheet) ? undefined : () => setOpen(true), onMouseEnter: disabled ? undefined : want, onFocus: disabled
             ? undefined
@@ -130,6 +130,6 @@ function ModelPicker({ models, value, onChange, scope, limits, loading = false,
         }, children: [(0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: small ? '$1' : '$2', color: quiet ? '$quiet' : '$ink', numberOfLines: 1, shrink: 1, minW: 0, children: label }), selected && !quiet ? ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: small ? '$1' : '$2', color: "$soft", numberOfLines: 1, shrink: 2, minW: 0, children: (0, catalog_1.groupLabel)(selected) })) : null, (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronsUpDown, { size: small ? 12 : 14, color: "$soft", shrink: 0, "aria-hidden": true })] }));
     if (!Live)
         return button;
-    return ((0, jsx_runtime_1.jsx)(Live, { trigger: button, open: open, onOpen: () => setOpen(true), onClose: close, disabled: disabled, width: triggerW, focusTrigger: () => trigger.current?.focus?.(), models: models, value: value, onChange: onChange, scope: scope, limits: limits, loading: loading, error: error, name: name, sheet: sheet, row: row }));
+    return ((0, jsx_runtime_1.jsx)(Live, { trigger: button, open: open, onOpen: () => setOpen(true), onClose: close, disabled: disabled, width: triggerW, focusTrigger: () => trigger.current?.focus?.(), models: models, value: value, onChange: onChange, scope: scope, limits: limits, loading: loading, error: error, name: name, sheet: sheet, row: row, granted: granted, onUpgrade: onUpgrade }));
 }
 exports.default = ModelPicker;

package/dist/models/ModelPicker.d.ts

@@ -19,9 +19,14 @@ export interface ModelPickerProps {
     placeholder?: string;
     /** What it chooses, for its accessible name. */
     name?: string;
+    /** The accessible name whole, in the reader's language, where `name: model` is not how they say it. */
+    describe?: string;
+    /** Whether the payer's plan may send a model: one it may not says Upgrade, and choosing it calls `onUpgrade`. */
+    granted?: (id: string) => boolean;
+    onUpgrade?: (id: string) => void;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
 }
-export declare function ModelPicker({ models, value, onChange, scope, limits, loading, error, disabled, quiet, size, placeholder, name, open: openProp, onOpenChange, }: ModelPickerProps): import("react").JSX.Element;
+export declare function ModelPicker({ models, value, onChange, scope, limits, loading, error, disabled, quiet, size, placeholder, name, describe, granted, onUpgrade, open: openProp, onOpenChange, }: ModelPickerProps): import("react").JSX.Element;
 export default ModelPicker;
 //# sourceMappingURL=ModelPicker.d.ts.map

package/dist/models/ModelPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModelPicker.d.ts","sourceRoot":"","sources":["../../src/models/ModelPicker.tsx"],"names":[],"mappings":"AA6BA,OAAO,EAAyB,KAAK,UAAU,EAAE,KAAK,iBAAiB,EAAE,KAAK,WAAW,EAAE,MAAM,WAAW,CAAA;AAa5G,MAAM,WAAW,gBAAgB;IAC/B,4DAA4D;IAC5D,MAAM,EAAE,SAAS,iBAAiB,EAAE,CAAA;IACpC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9B,+DAA+D;IAC/D,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,6EAA6E;IAC7E,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IAC3B,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,yFAAyF;IACzF,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;CACvC;AAED,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,KAAK,EACL,QAAQ,EACR,KAAK,EACL,MAAM,EACN,OAAe,EACf,KAAY,EACZ,QAAgB,EAChB,KAAa,EACb,IAAW,EACX,WAA8B,EAC9B,IAAc,EACd,IAAI,EAAE,QAAQ,EACd,YAAY,GACb,EAAE,gBAAgB,+BA6HlB;eAEc,WAAW"}
+{"version":3,"file":"ModelPicker.d.ts","sourceRoot":"","sources":["../../src/models/ModelPicker.tsx"],"names":[],"mappings":"AA6BA,OAAO,EAAyB,KAAK,UAAU,EAAE,KAAK,iBAAiB,EAAE,KAAK,WAAW,EAAE,MAAM,WAAW,CAAA;AAa5G,MAAM,WAAW,gBAAgB;IAC/B,4DAA4D;IAC5D,MAAM,EAAE,SAAS,iBAAiB,EAAE,CAAA;IACpC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9B,+DAA+D;IAC/D,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,6EAA6E;IAC7E,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IAC3B,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,yFAAyF;IACzF,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,uGAAuG;IACvG,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,iHAAiH;IACjH,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAA;IACjC,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;CACvC;AAED,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,KAAK,EACL,QAAQ,EACR,KAAK,EACL,MAAM,EACN,OAAe,EACf,KAAY,EACZ,QAAgB,EAChB,KAAa,EACb,IAAW,EACX,WAA8B,EAC9B,IAAc,EACd,QAAQ,EACR,OAAO,EACP,SAAS,EACT,IAAI,EAAE,QAAQ,EACd,YAAY,GACb,EAAE,gBAAgB,+BA+HlB;eAEc,WAAW"}

package/dist/models/ModelPicker.js

@@ -34,7 +34,7 @@ const load = () => (pending ??= import('./ModelPickerMenu.js').then((m) => (menu
 /** Row height, px: a line of 13px type on a pointer, a thumb's reach on a phone. */
 const ROW = 32;
 const ROW_TOUCH = 44;
-export function ModelPicker({ models, value, onChange, scope, limits, loading = false, error = null, disabled = false, quiet = false, size = 'md', placeholder = 'Choose a model', name = 'Model', open: openProp, onOpenChange, }) {
+export function ModelPicker({ models, value, onChange, scope, limits, loading = false, error = null, disabled = false, quiet = false, size = 'md', placeholder = 'Choose a model', name = 'Model', describe, granted, onUpgrade, open: openProp, onOpenChange, }) {
     const [own, setOwn] = useState(false);
     const open = openProp ?? own;
     const setOpen = useCallback((next) => {
@@ -74,7 +74,7 @@ export function ModelPicker({ models, value, onChange, scope, limits, loading =
             trigger.current?.focus?.();
     }, [Live]);
     const small = size === 'sm';
-    const button = (_jsxs(XStack, { ref: trigger, ...slot('model-picker'), role: "button", tabIndex: disabled ? -1 : 0, "aria-label": `${name}: ${label}`, "aria-haspopup": "listbox", "aria-expanded": open, "aria-disabled": disabled || undefined, height: small ? 28 : 36, px: small ? '$2' : '$3', gap: "$2", items: "center", maxW: "100%", rounded: "$3", borderWidth: quiet ? 0 : 1, borderColor: "$borderColor", bg: quiet ? 'transparent' : '$background', cursor: disabled ? 'default' : 'pointer', opacity: disabled ? 0.5 : 1, hoverStyle: disabled ? undefined : quiet ? { bg: '$hover' } : { borderColor: '$rim' }, pressStyle: disabled ? undefined : { bg: '$hover' }, focusVisibleStyle: RING, onLayout: (e) => setTriggerW(e.nativeEvent?.layout?.width ?? 0), 
+    const button = (_jsxs(XStack, { ref: trigger, ...slot('model-picker'), role: "button", tabIndex: disabled ? -1 : 0, "aria-label": describe ?? `${name}: ${label}`, "aria-haspopup": "listbox", "aria-expanded": open, "aria-disabled": disabled || undefined, height: small ? 28 : 36, px: small ? '$2' : '$3', gap: "$2", items: "center", maxW: "100%", rounded: "$3", borderWidth: quiet ? 0 : 1, borderColor: "$borderColor", bg: quiet ? 'transparent' : '$background', cursor: disabled ? 'default' : 'pointer', opacity: disabled ? 0.5 : 1, hoverStyle: disabled ? undefined : quiet ? { bg: '$hover' } : { borderColor: '$rim' }, pressStyle: disabled ? undefined : { bg: '$hover' }, focusVisibleStyle: RING, onLayout: (e) => setTriggerW(e.nativeEvent?.layout?.width ?? 0), 
         // The popover opens on press once it is here; before that, and on a phone, the press opens it.
         onPress: disabled || (Live && !sheet) ? undefined : () => setOpen(true), onMouseEnter: disabled ? undefined : want, onFocus: disabled
             ? undefined
@@ -94,7 +94,7 @@ export function ModelPicker({ models, value, onChange, scope, limits, loading =
         }, children: [_jsx(SizableText, { size: small ? '$1' : '$2', color: quiet ? '$quiet' : '$ink', numberOfLines: 1, shrink: 1, minW: 0, children: label }), selected && !quiet ? (_jsx(SizableText, { size: small ? '$1' : '$2', color: "$soft", numberOfLines: 1, shrink: 2, minW: 0, children: groupLabel(selected) })) : null, _jsx(ChevronsUpDown, { size: small ? 12 : 14, color: "$soft", shrink: 0, "aria-hidden": true })] }));
     if (!Live)
         return button;
-    return (_jsx(Live, { trigger: button, open: open, onOpen: () => setOpen(true), onClose: close, disabled: disabled, width: triggerW, focusTrigger: () => trigger.current?.focus?.(), models: models, value: value, onChange: onChange, scope: scope, limits: limits, loading: loading, error: error, name: name, sheet: sheet, row: row }));
+    return (_jsx(Live, { trigger: button, open: open, onOpen: () => setOpen(true), onClose: close, disabled: disabled, width: triggerW, focusTrigger: () => trigger.current?.focus?.(), models: models, value: value, onChange: onChange, scope: scope, limits: limits, loading: loading, error: error, name: name, sheet: sheet, row: row, granted: granted, onUpgrade: onUpgrade }));
 }
 export default ModelPicker;
 //# sourceMappingURL=ModelPicker.js.map

package/dist/models/ModelPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModelPicker.js","sourceRoot":"","sources":["../../src/models/ModelPicker.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ModelPicker.js","sourceRoot":"","sources":["../../src/models/ModelPicker.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAA;AACzD,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhE,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAA;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAC3C,OAAO,EAAE,UAAU,EAAE,SAAS,EAA6D,MAAM,WAAW,CAAA;AAG5G,sEAAsE;AACtE,IAAI,IAAI,GAAuB,IAAI,CAAA;AACnC,IAAI,OAAO,GAAgC,IAAI,CAAA;AAC/C,MAAM,IAAI,GAAG,GAAyB,EAAE,CACtC,CAAC,OAAO,KAAK,MAAM,CAAC,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAA;AAEnF,oFAAoF;AACpF,MAAM,GAAG,GAAG,EAAE,CAAA;AACd,MAAM,SAAS,GAAG,EAAE,CAAA;AA+BpB,MAAM,UAAU,WAAW,CAAC,EAC1B,MAAM,EACN,KAAK,EACL,QAAQ,EACR,KAAK,EACL,MAAM,EACN,OAAO,GAAG,KAAK,EACf,KAAK,GAAG,IAAI,EACZ,QAAQ,GAAG,KAAK,EAChB,KAAK,GAAG,KAAK,EACb,IAAI,GAAG,IAAI,EACX,WAAW,GAAG,gBAAgB,EAC9B,IAAI,GAAG,OAAO,EACd,QAAQ,EACR,OAAO,EACP,SAAS,EACT,IAAI,EAAE,QAAQ,EACd,YAAY,GACK;IACjB,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IACrC,MAAM,IAAI,GAAG,QAAQ,IAAI,GAAG,CAAA;IAC5B,MAAM,OAAO,GAAG,WAAW,CACzB,CAAC,IAAa,EAAE,EAAE;QAChB,IAAI,QAAQ,KAAK,SAAS;YAAE,MAAM,CAAC,IAAI,CAAC,CAAA;QACxC,YAAY,EAAE,CAAC,IAAI,CAAC,CAAA;IACtB,CAAC,EACD,CAAC,QAAQ,EAAE,YAAY,CAAC,CACzB,CAAA;IAED,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,KAAK,GAAG,CAAC,KAAK,CAAC,EAAE,CAAA;IACvB,MAAM,GAAG,GAAG,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,CAAA;IACnC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;IAC3C,MAAM,OAAO,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAA;IAEhD,MAAM,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;IACvE,MAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,WAAW,CAAA;IAEnE,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,EAAE;QAC7B,OAAO,CAAC,KAAK,CAAC,CAAA;QACd,cAAc,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC,CAAA;IAClD,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IAEb,yEAAyE;IACzE,wCAAwC;IACxC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAqB,GAAG,EAAE,CAAC,IAAI,CAAC,CAAA;IAChE,MAAM,IAAI,GAAG,WAAW,CAAC,GAAG,EAAE;QAC5B,IAAI,IAAI;YAAE,OAAM;QAChB,KAAK,IAAI,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;IAC3C,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IACV,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI;YAAE,IAAI,EAAE,CAAA;IAClB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAA;IAChB,0EAA0E;IAC1E,6EAA6E;IAC7E,0BAA0B;IAC1B,MAAM,OAAO,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;IAC7B,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,IAAI,OAAO,CAAC,OAAO;YAAE,OAAO,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAA;IACzD,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEV,MAAM,KAAK,GAAG,IAAI,KAAK,IAAI,CAAA;IAC3B,MAAM,MAAM,GAAG,CACb,MAAC,MAAM,IACL,GAAG,EAAE,OAAgB,KACjB,IAAI,CAAC,cAAc,CAAC,EACxB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,gBACf,QAAQ,IAAI,GAAG,IAAI,KAAK,KAAK,EAAE,mBAC7B,SAAS,mBACR,IAAI,mBACJ,QAAQ,IAAI,SAAS,EACpC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EACvB,EAAE,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EACvB,GAAG,EAAC,IAAI,EACR,KAAK,EAAC,QAAQ,EACd,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,IAAI,EACZ,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC1B,WAAW,EAAC,cAAc,EAC1B,EAAE,EAAE,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,EACzC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACxC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAC3B,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,MAAM,EAAE,EACrF,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,EACnD,iBAAiB,EAAE,IAAI,EACvB,QAAQ,EAAE,CAAC,CAAoD,EAAE,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC,CAAC;QAClH,+FAA+F;QAC/F,OAAO,EAAE,QAAQ,IAAI,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,EACvE,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,EACzC,OAAO,EACL,QAAQ;YACN,CAAC,CAAC,SAAS;YACX,CAAC,CAAC,GAAG,EAAE;gBACH,OAAO,CAAC,OAAO,GAAG,IAAI,CAAA;gBACtB,IAAI,EAAE,CAAA;YACR,CAAC,EAEP,MAAM,EAAE,CAAC,CAA8B,EAAE,EAAE;YACzC,IAAI,CAAC,CAAC,aAAa;gBAAE,OAAO,CAAC,OAAO,GAAG,KAAK,CAAA;QAC9C,CAAC,EACD,SAAS,EAAE,CAAC,CAAgD,EAAE,EAAE;YAC9D,IAAI,QAAQ;gBAAE,OAAM;YACpB,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,IAAI,CAAC,CAAC,GAAG,KAAK,SAAS,EAAE,CAAC;gBACvF,CAAC,CAAC,cAAc,EAAE,EAAE,CAAA;gBACpB,OAAO,CAAC,IAAI,CAAC,CAAA;YACf,CAAC;QACH,CAAC,aAED,KAAC,WAAW,IAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,EAAE,aAAa,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,YAC3G,KAAK,GACM,EACb,QAAQ,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CACpB,KAAC,WAAW,IAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,EAAC,OAAO,EAAC,aAAa,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,YACvF,UAAU,CAAC,QAAQ,CAAC,GACT,CACf,CAAC,CAAC,CAAC,IAAI,EACR,KAAC,cAAc,IAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,KAAK,EAAC,OAAO,EAAC,MAAM,EAAE,CAAC,wBAAgB,IACvE,CACV,CAAA;IAED,IAAI,CAAC,IAAI;QAAE,OAAO,MAAM,CAAA;IACxB,OAAO,CACL,KAAC,IAAI,IACH,OAAO,EAAE,MAAM,EACf,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,EAC3B,OAAO,EAAE,KAAK,EACd,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,QAAQ,EACf,YAAY,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,EAC9C,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,GACpB,CACH,CAAA;AACH,CAAC;AAED,eAAe,WAAW,CAAA"}

package/dist/models/ModelPickerMenu.cjs

@@ -32,7 +32,7 @@ const picker_logic_1 = require("./picker.logic.cjs");
 const LIST_H = 360;
 const PANEL_W = 360;
 const MOVES = new Set(['ArrowDown', 'ArrowUp', 'Home', 'End', 'PageDown', 'PageUp']);
-function List({ models, value, onChange, onClose, scope, limits, loading, error, name, sheet, row }) {
+function List({ models, value, onChange, onClose, scope, limits, loading, error, name, sheet, row, granted, onUpgrade }) {
     const [q, setQ] = (0, react_1.useState)('');
     const [at, setAt] = (0, react_1.useState)(-1);
     const [top, setTop] = (0, react_1.useState)(0);
@@ -92,9 +92,12 @@ function List({ models, value, onChange, onClose, scope, limits, loading, error,
     const choose = (0, react_1.useCallback)((r) => {
         if (r?.kind !== 'model' || !(0, picker_logic_1.pickable)(r.model))
             return;
-        onChange(r.model.id);
+        if (granted && !granted(r.model.id))
+            onUpgrade?.(r.model.id);
+        else
+            onChange(r.model.id);
         onClose();
-    }, [onChange, onClose]);
+    }, [onChange, onClose, granted, onUpgrade]);
     const onField = (e) => {
         const key = e.key;
         if (MOVES.has(key)) {
@@ -131,6 +134,7 @@ function List({ models, value, onChange, onClose, scope, limits, loading, error,
                                 const m = r.model;
                                 const locked = !(0, picker_logic_1.pickable)(m);
                                 const paused = !locked && (0, catalog_1.isPaused)(m, limits);
+                                const upgrade = !locked && granted ? !granted(m.id) : false;
                                 const picked = m.id === value;
                                 const ctx = (0, catalog_1.formatContext)(m.context_window);
                                 const title = (0, catalog_1.modelName)(m);
@@ -141,17 +145,19 @@ function List({ models, value, onChange, onClose, scope, limits, loading, error,
                                 // a router, the ceiling it bills up to.
                                 const saving = (0, catalog_1.savingOf)(m, models);
                                 const ceiling = (0, catalog_1.formatCeiling)(m);
-                                return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('model-picker-option'), id: optionId(i), role: "option", "aria-selected": picked, "aria-disabled": locked || undefined, "aria-setsize": total, "aria-posinset": position[i], "aria-label": `${title}, ${(0, catalog_1.groupLabel)(m)}${paused ? ', paused' : ''}${locked ? ', research preview' : ''}`, "data-model": m.id, "data-class": m.class, "data-paused": paused || undefined, height: row, px: "$2", gap: "$2", items: "center", rounded: "$2", cursor: locked ? 'default' : 'pointer', bg: i === at ? '$raised' : 'transparent', onHoverIn: () => setAt(i), onPress: () => choose(r), children: [(0, jsx_runtime_1.jsx)(lucide_icons_2_1.Check, { size: 14, color: "$ink", shrink: 0, opacity: picked ? 1 : 0, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: sheet ? '$3' : '$2', color: "$ink", opacity: locked ? 0.5 : 1, numberOfLines: 1, flex: 1, minW: 0, children: title }), m.class === 'premium' ? ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$1", color: "$soft", shrink: 0, "aria-hidden": true, children: "\u2726" })) : null, locked || paused || saving || ceiling || kind || ctx ? ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$1", color: "$soft", shrink: 0, maxW: "60%", numberOfLines: 1, fontVariant: ['tabular-nums'], children: locked
+                                return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('model-picker-option'), id: optionId(i), role: "option", "aria-selected": picked, "aria-disabled": locked || undefined, "aria-setsize": total, "aria-posinset": position[i], "aria-label": `${title}, ${(0, catalog_1.groupLabel)(m)}${paused ? ', paused' : ''}${locked ? ', research preview' : ''}`, "data-model": m.id, "data-class": m.class, "data-paused": paused || undefined, height: row, px: "$2", gap: "$2", items: "center", rounded: "$2", cursor: locked ? 'default' : 'pointer', bg: i === at ? '$raised' : 'transparent', onHoverIn: () => setAt(i), onPress: () => choose(r), children: [(0, jsx_runtime_1.jsx)(lucide_icons_2_1.Check, { size: 14, color: "$ink", shrink: 0, opacity: picked ? 1 : 0, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: sheet ? '$3' : '$2', color: "$ink", opacity: locked ? 0.5 : 1, numberOfLines: 1, flex: 1, minW: 0, children: title }), m.class === 'premium' ? ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$1", color: "$soft", shrink: 0, "aria-hidden": true, children: "\u2726" })) : null, locked || upgrade || paused || saving || ceiling || kind || ctx ? ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$1", color: "$soft", shrink: 0, maxW: "60%", numberOfLines: 1, fontVariant: ['tabular-nums'], children: locked
                                                 ? 'Research preview'
-                                                : paused
-                                                    ? 'Paused'
-                                                    : saving
-                                                        ? (0, catalog_1.formatSaving)(saving)
-                                                        : ceiling
-                                                            ? ceiling
-                                                            : kind
-                                                                ? catalog_1.CAPABILITY_NAMES[kind]
-                                                                : ctx })) : null] }, m.id));
+                                                : upgrade
+                                                    ? 'Upgrade'
+                                                    : paused
+                                                        ? 'Paused'
+                                                        : saving
+                                                            ? (0, catalog_1.formatSaving)(saving)
+                                                            : ceiling
+                                                                ? ceiling
+                                                                : kind
+                                                                    ? catalog_1.CAPABILITY_NAMES[kind]
+                                                                    : ctx })) : null] }, m.id));
                             })] }), rows.length === 0 && !error ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('model-picker-empty'), px: "$2", py: "$2", role: "status", children: (0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$2", color: "$soft", children: loading ? 'Loading models…' : q ? `No models match “${q}”.` : 'No models to choose from.' }) })) : null] }), research.length ? ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('model-picker-research'), px: "$2", py: "$1.5", gap: "$1.5", items: "center", flexWrap: "wrap", children: [(0, jsx_runtime_1.jsxs)(gui_1.SizableText, { size: "$1", color: "$soft", children: [research.map(catalog_1.modelName).join(', '), " ", research.length === 1 ? 'is' : 'are', " in research preview."] }), (0, jsx_runtime_1.jsx)(gui_1.Anchor, { href: research[0].request, target: "_blank", rel: "noopener noreferrer", size: "$1", color: "$ink", textDecorationLine: "underline", children: "Request access" })] })) : null] }));
 }
 /** The trigger in its popover, or beside its sheet on a phone, and the list in it while open. */

package/dist/models/ModelPickerMenu.d.ts

@@ -16,6 +16,10 @@ interface ListProps {
     sheet: boolean;
     /** Row height, px. */
     row: number;
+    /** Whether the payer's plan may send a model. Absent, every one. */
+    granted?: (id: string) => boolean;
+    /** A model the plan does not grant was chosen: the way to the plan that does. */
+    onUpgrade?: (id: string) => void;
 }
 export interface ModelPickerMenuProps extends ListProps {
     /** The picker's trigger, as ModelPicker draws it. */

package/dist/models/ModelPickerMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModelPickerMenu.d.ts","sourceRoot":"","sources":["../../src/models/ModelPickerMenu.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAA4D,KAAK,YAAY,EAAE,MAAM,OAAO,CAAA;AAMnG,OAAO,EAYL,KAAK,UAAU,EACf,KAAK,iBAAiB,EACtB,KAAK,WAAW,EACjB,MAAM,WAAW,CAAA;AASlB,UAAU,SAAS;IACjB,MAAM,EAAE,SAAS,iBAAiB,EAAE,CAAA;IACpC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9B,iEAAiE;IACjE,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IAC3B,OAAO,EAAE,OAAO,CAAA;IAChB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,2CAA2C;IAC3C,IAAI,EAAE,MAAM,CAAA;IACZ,yDAAyD;IACzD,KAAK,EAAE,OAAO,CAAA;IACd,sBAAsB;IACtB,GAAG,EAAE,MAAM,CAAA;CACZ;AAsRD,MAAM,WAAW,oBAAqB,SAAQ,SAAS;IACrD,qDAAqD;IACrD,OAAO,EAAE,YAAY,CAAA;IACrB,IAAI,EAAE,OAAO,CAAA;IACb,sCAAsC;IACtC,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,QAAQ,EAAE,OAAO,CAAA;IACjB,4DAA4D;IAC5D,KAAK,EAAE,MAAM,CAAA;IACb,mDAAmD;IACnD,YAAY,EAAE,MAAM,IAAI,CAAA;CACzB;AAED,iGAAiG;AACjG,wBAAgB,eAAe,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,IAAI,EAAE,EAAE,oBAAoB,+BA6CtH;eAEc,eAAe"}
+{"version":3,"file":"ModelPickerMenu.d.ts","sourceRoot":"","sources":["../../src/models/ModelPickerMenu.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAA4D,KAAK,YAAY,EAAE,MAAM,OAAO,CAAA;AAMnG,OAAO,EAYL,KAAK,UAAU,EACf,KAAK,iBAAiB,EACtB,KAAK,WAAW,EACjB,MAAM,WAAW,CAAA;AASlB,UAAU,SAAS;IACjB,MAAM,EAAE,SAAS,iBAAiB,EAAE,CAAA;IACpC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9B,iEAAiE;IACjE,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IAC3B,OAAO,EAAE,OAAO,CAAA;IAChB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,2CAA2C;IAC3C,IAAI,EAAE,MAAM,CAAA;IACZ,yDAAyD;IACzD,KAAK,EAAE,OAAO,CAAA;IACd,sBAAsB;IACtB,GAAG,EAAE,MAAM,CAAA;IACX,oEAAoE;IACpE,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAA;IACjC,iFAAiF;IACjF,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CACjC;AA0RD,MAAM,WAAW,oBAAqB,SAAQ,SAAS;IACrD,qDAAqD;IACrD,OAAO,EAAE,YAAY,CAAA;IACrB,IAAI,EAAE,OAAO,CAAA;IACb,sCAAsC;IACtC,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,QAAQ,EAAE,OAAO,CAAA;IACjB,4DAA4D;IAC5D,KAAK,EAAE,MAAM,CAAA;IACb,mDAAmD;IACnD,YAAY,EAAE,MAAM,IAAI,CAAA;CACzB;AAED,iGAAiG;AACjG,wBAAgB,eAAe,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,IAAI,EAAE,EAAE,oBAAoB,+BA6CtH;eAEc,eAAe"}

package/dist/models/ModelPickerMenu.js

@@ -29,7 +29,7 @@ import { modelCount, pickable, pickerRows, restable, revealTop, visibleRange } f
 const LIST_H = 360;
 const PANEL_W = 360;
 const MOVES = new Set(['ArrowDown', 'ArrowUp', 'Home', 'End', 'PageDown', 'PageUp']);
-function List({ models, value, onChange, onClose, scope, limits, loading, error, name, sheet, row }) {
+function List({ models, value, onChange, onClose, scope, limits, loading, error, name, sheet, row, granted, onUpgrade }) {
     const [q, setQ] = useState('');
     const [at, setAt] = useState(-1);
     const [top, setTop] = useState(0);
@@ -89,9 +89,12 @@ function List({ models, value, onChange, onClose, scope, limits, loading, error,
     const choose = useCallback((r) => {
         if (r?.kind !== 'model' || !pickable(r.model))
             return;
-        onChange(r.model.id);
+        if (granted && !granted(r.model.id))
+            onUpgrade?.(r.model.id);
+        else
+            onChange(r.model.id);
         onClose();
-    }, [onChange, onClose]);
+    }, [onChange, onClose, granted, onUpgrade]);
     const onField = (e) => {
         const key = e.key;
         if (MOVES.has(key)) {
@@ -128,6 +131,7 @@ function List({ models, value, onChange, onClose, scope, limits, loading, error,
                                 const m = r.model;
                                 const locked = !pickable(m);
                                 const paused = !locked && isPaused(m, limits);
+                                const upgrade = !locked && granted ? !granted(m.id) : false;
                                 const picked = m.id === value;
                                 const ctx = formatContext(m.context_window);
                                 const title = modelName(m);
@@ -138,17 +142,19 @@ function List({ models, value, onChange, onClose, scope, limits, loading, error,
                                 // a router, the ceiling it bills up to.
                                 const saving = savingOf(m, models);
                                 const ceiling = formatCeiling(m);
-                                return (_jsxs(XStack, { ...slot('model-picker-option'), id: optionId(i), role: "option", "aria-selected": picked, "aria-disabled": locked || undefined, "aria-setsize": total, "aria-posinset": position[i], "aria-label": `${title}, ${groupLabel(m)}${paused ? ', paused' : ''}${locked ? ', research preview' : ''}`, "data-model": m.id, "data-class": m.class, "data-paused": paused || undefined, height: row, px: "$2", gap: "$2", items: "center", rounded: "$2", cursor: locked ? 'default' : 'pointer', bg: i === at ? '$raised' : 'transparent', onHoverIn: () => setAt(i), onPress: () => choose(r), children: [_jsx(Check, { size: 14, color: "$ink", shrink: 0, opacity: picked ? 1 : 0, "aria-hidden": true }), _jsx(SizableText, { size: sheet ? '$3' : '$2', color: "$ink", opacity: locked ? 0.5 : 1, numberOfLines: 1, flex: 1, minW: 0, children: title }), m.class === 'premium' ? (_jsx(SizableText, { size: "$1", color: "$soft", shrink: 0, "aria-hidden": true, children: "\u2726" })) : null, locked || paused || saving || ceiling || kind || ctx ? (_jsx(SizableText, { size: "$1", color: "$soft", shrink: 0, maxW: "60%", numberOfLines: 1, fontVariant: ['tabular-nums'], children: locked
+                                return (_jsxs(XStack, { ...slot('model-picker-option'), id: optionId(i), role: "option", "aria-selected": picked, "aria-disabled": locked || undefined, "aria-setsize": total, "aria-posinset": position[i], "aria-label": `${title}, ${groupLabel(m)}${paused ? ', paused' : ''}${locked ? ', research preview' : ''}`, "data-model": m.id, "data-class": m.class, "data-paused": paused || undefined, height: row, px: "$2", gap: "$2", items: "center", rounded: "$2", cursor: locked ? 'default' : 'pointer', bg: i === at ? '$raised' : 'transparent', onHoverIn: () => setAt(i), onPress: () => choose(r), children: [_jsx(Check, { size: 14, color: "$ink", shrink: 0, opacity: picked ? 1 : 0, "aria-hidden": true }), _jsx(SizableText, { size: sheet ? '$3' : '$2', color: "$ink", opacity: locked ? 0.5 : 1, numberOfLines: 1, flex: 1, minW: 0, children: title }), m.class === 'premium' ? (_jsx(SizableText, { size: "$1", color: "$soft", shrink: 0, "aria-hidden": true, children: "\u2726" })) : null, locked || upgrade || paused || saving || ceiling || kind || ctx ? (_jsx(SizableText, { size: "$1", color: "$soft", shrink: 0, maxW: "60%", numberOfLines: 1, fontVariant: ['tabular-nums'], children: locked
                                                 ? 'Research preview'
-                                                : paused
-                                                    ? 'Paused'
-                                                    : saving
-                                                        ? formatSaving(saving)
-                                                        : ceiling
-                                                            ? ceiling
-                                                            : kind
-                                                                ? CAPABILITY_NAMES[kind]
-                                                                : ctx })) : null] }, m.id));
+                                                : upgrade
+                                                    ? 'Upgrade'
+                                                    : paused
+                                                        ? 'Paused'
+                                                        : saving
+                                                            ? formatSaving(saving)
+                                                            : ceiling
+                                                                ? ceiling
+                                                                : kind
+                                                                    ? CAPABILITY_NAMES[kind]
+                                                                    : ctx })) : null] }, m.id));
                             })] }), rows.length === 0 && !error ? (_jsx(XStack, { ...slot('model-picker-empty'), px: "$2", py: "$2", role: "status", children: _jsx(SizableText, { size: "$2", color: "$soft", children: loading ? 'Loading models…' : q ? `No models match “${q}”.` : 'No models to choose from.' }) })) : null] }), research.length ? (_jsxs(XStack, { ...slot('model-picker-research'), px: "$2", py: "$1.5", gap: "$1.5", items: "center", flexWrap: "wrap", children: [_jsxs(SizableText, { size: "$1", color: "$soft", children: [research.map(modelName).join(', '), " ", research.length === 1 ? 'is' : 'are', " in research preview."] }), _jsx(Anchor, { href: research[0].request, target: "_blank", rel: "noopener noreferrer", size: "$1", color: "$ink", textDecorationLine: "underline", children: "Request access" })] })) : null] }));
 }
 /** The trigger in its popover, or beside its sheet on a phone, and the list in it while open. */