@hanzo/ui 8.0.27 → 8.0.31

package/dist/index.cjs

@@ -1,375 +1,41 @@
-'use client';
-'use strict';
-
-var chunkRBS5AYO4_cjs = require('./chunk-RBS5AYO4.cjs');
-var chunk6KZWRBK2_cjs = require('./chunk-6KZWRBK2.cjs');
-var chunkDC52DQ27_cjs = require('./chunk-DC52DQ27.cjs');
-
-
-
-Object.defineProperty(exports, "cn", {
-  enumerable: true,
-  get: function () { return chunkRBS5AYO4_cjs.cn; }
-});
-Object.defineProperty(exports, "AspectRatio", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.AspectRatio; }
-});
-Object.defineProperty(exports, "Avatar", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.Avatar; }
-});
-Object.defineProperty(exports, "AvatarFallback", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.AvatarFallback; }
-});
-Object.defineProperty(exports, "AvatarImage", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.AvatarImage; }
-});
-Object.defineProperty(exports, "Badge", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.Badge; }
-});
-Object.defineProperty(exports, "Button", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.Button; }
-});
-Object.defineProperty(exports, "Card", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.Card; }
-});
-Object.defineProperty(exports, "CardAction", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.CardAction; }
-});
-Object.defineProperty(exports, "CardContent", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.CardContent; }
-});
-Object.defineProperty(exports, "CardDescription", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.CardDescription; }
-});
-Object.defineProperty(exports, "CardFooter", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.CardFooter; }
-});
-Object.defineProperty(exports, "CardHeader", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.CardHeader; }
-});
-Object.defineProperty(exports, "CardTitle", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.CardTitle; }
-});
-Object.defineProperty(exports, "Checkbox", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.Checkbox; }
-});
-Object.defineProperty(exports, "Collapsible", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.Collapsible; }
-});
-Object.defineProperty(exports, "CollapsibleContent", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.CollapsibleContent; }
-});
-Object.defineProperty(exports, "CollapsibleTrigger", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.CollapsibleTrigger; }
-});
-Object.defineProperty(exports, "Command", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.Command; }
-});
-Object.defineProperty(exports, "CommandDialog", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.CommandDialog; }
-});
-Object.defineProperty(exports, "CommandEmpty", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.CommandEmpty; }
-});
-Object.defineProperty(exports, "CommandGroup", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.CommandGroup; }
-});
-Object.defineProperty(exports, "CommandInput", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.CommandInput; }
-});
-Object.defineProperty(exports, "CommandItem", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.CommandItem; }
-});
-Object.defineProperty(exports, "CommandList", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.CommandList; }
-});
-Object.defineProperty(exports, "CommandSeparator", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.CommandSeparator; }
-});
-Object.defineProperty(exports, "CommandShortcut", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.CommandShortcut; }
-});
-Object.defineProperty(exports, "Dialog", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.Dialog; }
-});
-Object.defineProperty(exports, "DialogClose", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.DialogClose; }
-});
-Object.defineProperty(exports, "DialogContent", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.DialogContent; }
-});
-Object.defineProperty(exports, "DialogDescription", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.DialogDescription; }
-});
-Object.defineProperty(exports, "DialogFooter", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.DialogFooter; }
-});
-Object.defineProperty(exports, "DialogHeader", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.DialogHeader; }
-});
-Object.defineProperty(exports, "DialogOverlay", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.DialogOverlay; }
-});
-Object.defineProperty(exports, "DialogPortal", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.DialogPortal; }
-});
-Object.defineProperty(exports, "DialogTitle", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.DialogTitle; }
-});
-Object.defineProperty(exports, "DialogTrigger", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.DialogTrigger; }
-});
-Object.defineProperty(exports, "Input", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.Input; }
-});
-Object.defineProperty(exports, "Label", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.Label; }
-});
-Object.defineProperty(exports, "Popover", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.Popover; }
-});
-Object.defineProperty(exports, "PopoverAnchor", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.PopoverAnchor; }
-});
-Object.defineProperty(exports, "PopoverClose", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.PopoverClose; }
-});
-Object.defineProperty(exports, "PopoverContent", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.PopoverContent; }
-});
-Object.defineProperty(exports, "PopoverTrigger", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.PopoverTrigger; }
-});
-Object.defineProperty(exports, "Progress", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.Progress; }
-});
-Object.defineProperty(exports, "ResizableHandle", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.ResizableHandle; }
-});
-Object.defineProperty(exports, "ResizablePanel", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.ResizablePanel; }
-});
-Object.defineProperty(exports, "ResizablePanelGroup", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.ResizablePanelGroup; }
-});
-Object.defineProperty(exports, "ScrollArea", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.ScrollArea; }
-});
-Object.defineProperty(exports, "ScrollBar", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.ScrollBar; }
-});
-Object.defineProperty(exports, "Select", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.Select; }
-});
-Object.defineProperty(exports, "SelectContent", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.SelectContent; }
-});
-Object.defineProperty(exports, "SelectGroup", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.SelectGroup; }
-});
-Object.defineProperty(exports, "SelectItem", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.SelectItem; }
-});
-Object.defineProperty(exports, "SelectLabel", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.SelectLabel; }
-});
-Object.defineProperty(exports, "SelectScrollDownButton", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.SelectScrollDownButton; }
-});
-Object.defineProperty(exports, "SelectScrollUpButton", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.SelectScrollUpButton; }
-});
-Object.defineProperty(exports, "SelectSeparator", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.SelectSeparator; }
-});
-Object.defineProperty(exports, "SelectTrigger", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.SelectTrigger; }
-});
-Object.defineProperty(exports, "SelectValue", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.SelectValue; }
-});
-Object.defineProperty(exports, "Separator", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.Separator; }
-});
-Object.defineProperty(exports, "Slider", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.Slider; }
-});
-Object.defineProperty(exports, "Switch", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.Switch; }
-});
-Object.defineProperty(exports, "Tabs", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.Tabs; }
-});
-Object.defineProperty(exports, "TabsContent", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.TabsContent; }
-});
-Object.defineProperty(exports, "TabsList", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.TabsList; }
-});
-Object.defineProperty(exports, "TabsTrigger", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.TabsTrigger; }
-});
-Object.defineProperty(exports, "Textarea", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.Textarea; }
-});
-Object.defineProperty(exports, "Toaster", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.Toaster; }
-});
-Object.defineProperty(exports, "Tooltip", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.Tooltip; }
-});
-Object.defineProperty(exports, "TooltipContent", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.TooltipContent; }
-});
-Object.defineProperty(exports, "TooltipProvider", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.TooltipProvider; }
-});
-Object.defineProperty(exports, "TooltipTrigger", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.TooltipTrigger; }
-});
-Object.defineProperty(exports, "badgeVariants", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.badgeVariants; }
-});
-Object.defineProperty(exports, "buttonVariants", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.buttonVariants; }
-});
-Object.defineProperty(exports, "toast", {
-  enumerable: true,
-  get: function () { return chunk6KZWRBK2_cjs.toast; }
-});
-Object.defineProperty(exports, "DropdownMenu", {
-  enumerable: true,
-  get: function () { return chunkDC52DQ27_cjs.DropdownMenu; }
-});
-Object.defineProperty(exports, "DropdownMenuCheckboxItem", {
-  enumerable: true,
-  get: function () { return chunkDC52DQ27_cjs.DropdownMenuCheckboxItem; }
-});
-Object.defineProperty(exports, "DropdownMenuContent", {
-  enumerable: true,
-  get: function () { return chunkDC52DQ27_cjs.DropdownMenuContent; }
-});
-Object.defineProperty(exports, "DropdownMenuGroup", {
-  enumerable: true,
-  get: function () { return chunkDC52DQ27_cjs.DropdownMenuGroup; }
-});
-Object.defineProperty(exports, "DropdownMenuItem", {
-  enumerable: true,
-  get: function () { return chunkDC52DQ27_cjs.DropdownMenuItem; }
-});
-Object.defineProperty(exports, "DropdownMenuLabel", {
-  enumerable: true,
-  get: function () { return chunkDC52DQ27_cjs.DropdownMenuLabel; }
-});
-Object.defineProperty(exports, "DropdownMenuPortal", {
-  enumerable: true,
-  get: function () { return chunkDC52DQ27_cjs.DropdownMenuPortal; }
-});
-Object.defineProperty(exports, "DropdownMenuRadioGroup", {
-  enumerable: true,
-  get: function () { return chunkDC52DQ27_cjs.DropdownMenuRadioGroup; }
-});
-Object.defineProperty(exports, "DropdownMenuRadioItem", {
-  enumerable: true,
-  get: function () { return chunkDC52DQ27_cjs.DropdownMenuRadioItem; }
-});
-Object.defineProperty(exports, "DropdownMenuSeparator", {
-  enumerable: true,
-  get: function () { return chunkDC52DQ27_cjs.DropdownMenuSeparator; }
-});
-Object.defineProperty(exports, "DropdownMenuShortcut", {
-  enumerable: true,
-  get: function () { return chunkDC52DQ27_cjs.DropdownMenuShortcut; }
-});
-Object.defineProperty(exports, "DropdownMenuSub", {
-  enumerable: true,
-  get: function () { return chunkDC52DQ27_cjs.DropdownMenuSub; }
-});
-Object.defineProperty(exports, "DropdownMenuSubContent", {
-  enumerable: true,
-  get: function () { return chunkDC52DQ27_cjs.DropdownMenuSubContent; }
-});
-Object.defineProperty(exports, "DropdownMenuSubTrigger", {
-  enumerable: true,
-  get: function () { return chunkDC52DQ27_cjs.DropdownMenuSubTrigger; }
-});
-Object.defineProperty(exports, "DropdownMenuTrigger", {
-  enumerable: true,
-  get: function () { return chunkDC52DQ27_cjs.DropdownMenuTrigger; }
-});
-//# sourceMappingURL=index.cjs.map
-//# sourceMappingURL=index.cjs.map
+'use client';"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cn = void 0;
+// @hanzo/ui — the one Hanzo component library, on @hanzo/gui + @hanzo/tokens.
+//
+// ONE substrate: every component renders through @hanzo/gui primitives, so the
+// same import works on web, native (expo) and desktop (Tauri). The ROOT barrel is
+// the canonical component API apps import; the product layer and the design
+// tokens are their own subpaths, so importing a Button never drags in a chart.
+//
+//   import { Button, Card, Dialog, DropdownMenu, Input, Toaster } from '@hanzo/ui'  // component API
+//   import { PageHeader, Sparkline, EmptyState } from '@hanzo/ui/product'           // product/app layer
+//   import { RecordsView, registerField } from '@hanzo/ui/data'                     // metadata record layer
+//   import { ModelSelector } from '@hanzo/ui/models'                                // unified model picker
+//   import { cn, themes, colors } from '@hanzo/ui/core'                             // design core + tokens
+//   import '@hanzo/ui/theme.css'                                                    // the self-contained identity
+//
+// Styling is theme tokens, never utility classes: `$background`, `$color12`,
+// `$borderColor` resolve through the gui token config on every host. Touch
+// targets meet the 44px floor via `hitSlop`, never via padding.
+__exportStar(require("./backends/gui/index.cjs"), exports);
+// `cn` — the class-name composer, surfaced for convenience.
+var cn_1 = require("./core/cn.cjs");
+Object.defineProperty(exports, "cn", { enumerable: true, get: function () { return cn_1.cn; } });
+// The design-token scale (colors, dark/light themes, radii, spacing, typography)
+// lives on the `@hanzo/ui/core` / `@hanzo/ui/tokens` subpath — pure data, no
+// runtime.

package/dist/index.d.ts

@@ -1,2 +1,3 @@
-export * from './backends/gui';
-export { cn } from './core/cn';
+export * from './backends/gui/index.js';
+export { cn } from './core/cn.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAiBA,cAAc,gBAAgB,CAAA;AAG9B,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAA"}

package/dist/index.js

@@ -1,6 +1,24 @@
-'use client';
-export { cn } from './chunk-QHC2ZNAF.js';
-export { AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Input, Label, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Slider, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, toast } from './chunk-RCMDRI6V.js';
-export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from './chunk-PI3GSHLU.js';
-//# sourceMappingURL=index.js.map
+'use client';// @hanzo/ui — the one Hanzo component library, on @hanzo/gui + @hanzo/tokens.
+//
+// ONE substrate: every component renders through @hanzo/gui primitives, so the
+// same import works on web, native (expo) and desktop (Tauri). The ROOT barrel is
+// the canonical component API apps import; the product layer and the design
+// tokens are their own subpaths, so importing a Button never drags in a chart.
+//
+//   import { Button, Card, Dialog, DropdownMenu, Input, Toaster } from '@hanzo/ui'  // component API
+//   import { PageHeader, Sparkline, EmptyState } from '@hanzo/ui/product'           // product/app layer
+//   import { RecordsView, registerField } from '@hanzo/ui/data'                     // metadata record layer
+//   import { ModelSelector } from '@hanzo/ui/models'                                // unified model picker
+//   import { cn, themes, colors } from '@hanzo/ui/core'                             // design core + tokens
+//   import '@hanzo/ui/theme.css'                                                    // the self-contained identity
+//
+// Styling is theme tokens, never utility classes: `$background`, `$color12`,
+// `$borderColor` resolve through the gui token config on every host. Touch
+// targets meet the 44px floor via `hitSlop`, never via padding.
+export * from './backends/gui/index.js';
+// `cn` — the class-name composer, surfaced for convenience.
+export { cn } from './core/cn.js';
+// The design-token scale (colors, dark/light themes, radii, spacing, typography)
+// lives on the `@hanzo/ui/core` / `@hanzo/ui/tokens` subpath — pure data, no
+// runtime.
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,8EAA8E;AAC9E,EAAE;AACF,+EAA+E;AAC/E,kFAAkF;AAClF,4EAA4E;AAC5E,+EAA+E;AAC/E,EAAE;AACF,qGAAqG;AACrG,yGAAyG;AACzG,6GAA6G;AAC7G,4GAA4G;AAC5G,4GAA4G;AAC5G,mHAAmH;AACnH,EAAE;AACF,6EAA6E;AAC7E,2EAA2E;AAC3E,gEAAgE;AAChE,cAAc,gBAAgB,CAAA;AAE9B,4DAA4D;AAC5D,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAA;AAE9B,iFAAiF;AACjF,6EAA6E;AAC7E,WAAW"}

package/dist/models/ModelSelector.cjs

@@ -0,0 +1,58 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModelSelector = ModelSelector;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const gui_1 = require("@hanzo/gui");
+const gui_2 = require("../backends/gui/index.cjs");
+const catalog_1 = require("./catalog.cjs");
+/** Show the search input once a catalog gets this large. */
+const SEARCH_THRESHOLD = 12;
+/** Panel floor when the trigger has not reported its width yet. */
+const MIN_W = 224;
+const MAX_H = 288;
+function fmtContext(ctx) {
+    if (!ctx)
+        return '';
+    if (ctx >= 1_000_000)
+        return `${(ctx / 1_000_000).toFixed(ctx % 1_000_000 === 0 ? 0 : 1)}M`;
+    if (ctx >= 1000)
+        return `${Math.round(ctx / 1000)}K`;
+    return `${ctx}`;
+}
+/**
+ * ModelSelector — the one unified model picker for every Hanzo app.
+ *
+ * Family-grouped picker in a Popover + Command combobox: grouped sections with
+ * family headers, premium markers, context suffixes, keyboard navigation, and
+ * type-to-filter search for large catalogs.
+ *
+ * Styling is gui style props and tokens throughout — no class strings. The panel
+ * matches the trigger's MEASURED width (`onLayout`, which gui implements on web
+ * too), never a Radix `--radix-popover-trigger-width` custom property: nothing
+ * defines that variable now that Radix is gone.
+ */
+function ModelSelector({ models, value, onChange, disabled = false, size = 'md', placeholder = 'Select model', chatOnly = true, className, }) {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const [triggerW, setTriggerW] = (0, react_1.useState)(0);
+    const visible = (0, react_1.useMemo)(() => (chatOnly ? (0, catalog_1.filterChatModels)(models) : models), [models, chatOnly]);
+    const groups = (0, react_1.useMemo)(() => (0, catalog_1.groupModelsByFamily)(visible), [visible]);
+    const showSearch = visible.length > SEARCH_THRESHOLD;
+    // Resolve the selected label from the FULL list so a current pick still shows
+    // even when chatOnly would otherwise hide it.
+    const selected = value ? models.find((m) => m.id === value) : undefined;
+    const selectedLabel = selected ? (selected.label ?? selected.id) : placeholder;
+    const selectedFamily = selected ? (0, catalog_1.familyOf)(selected) : undefined;
+    const isSm = size === 'sm';
+    return ((0, jsx_runtime_1.jsxs)(gui_2.Popover, { open: open, onOpenChange: setOpen, children: [(0, jsx_runtime_1.jsx)(gui_1.XStack, { width: "100%", onLayout: (e) => setTriggerW(e.nativeEvent.layout.width), children: (0, jsx_runtime_1.jsx)(gui_2.PopoverTrigger, { asChild: true, children: (0, jsx_runtime_1.jsxs)(gui_2.Button, { variant: "outline", size: isSm ? 'sm' : 'default', role: "combobox", "aria-expanded": open, disabled: disabled, justify: "flex-start", width: "100%", className: className, children: [(0, jsx_runtime_1.jsx)(gui_1.SizableText, { numberOfLines: 1, size: isSm ? '$1' : '$2', color: "$color12", children: selectedLabel }), selectedFamily && ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { numberOfLines: 1, size: isSm ? '$1' : '$2', color: "$color11", children: selectedFamily })), (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronsUpDown, { size: isSm ? 12 : 14, ml: "auto", shrink: 0, opacity: 0.5 })] }) }) }), (0, jsx_runtime_1.jsx)(gui_2.PopoverContent, { align: "start", p: 0, width: Math.max(triggerW, MIN_W), children: (0, jsx_runtime_1.jsxs)(gui_2.Command, { children: [showSearch && (0, jsx_runtime_1.jsx)(gui_2.CommandInput, { placeholder: "Search models\u2026" }), (0, jsx_runtime_1.jsxs)(gui_2.CommandList, { maxH: MAX_H, children: [(0, jsx_runtime_1.jsx)(gui_2.CommandEmpty, { children: "No models found." }), groups.map((group) => ((0, jsx_runtime_1.jsx)(gui_2.CommandGroup, { heading: group.family, children: group.models.map((m) => {
+                                        const label = m.label ?? m.id;
+                                        const ctx = fmtContext(m.context_window);
+                                        return ((0, jsx_runtime_1.jsxs)(gui_2.CommandItem, { value: `${group.family} ${label} ${m.id}`, onSelect: () => {
+                                                onChange(m.id);
+                                                setOpen(false);
+                                            }, children: [(0, jsx_runtime_1.jsx)(lucide_icons_2_1.Check, { size: 14, shrink: 0, opacity: m.id === value ? 1 : 0 }), (0, jsx_runtime_1.jsx)(gui_1.SizableText, { numberOfLines: 1, size: "$2", children: label }), m.premium && ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$2", color: "$color11", "aria-label": "Premium", children: "\u2726" })), ctx && ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ml: "auto", shrink: 0, pl: "$2", children: (0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$1", color: "$color11", fontVariant: ['tabular-nums'], children: ctx }) }))] }, m.id));
+                                    }) }, group.family)))] })] }) })] }));
+}
+exports.default = ModelSelector;

package/dist/models/ModelSelector.d.ts

@@ -1,4 +1,4 @@
-import { type ModelCatalogEntry } from './catalog';
+import { type ModelCatalogEntry } from './catalog.js';
 export interface ModelSelectorProps {
     models: ModelCatalogEntry[];
     value?: string;
@@ -13,11 +13,15 @@ export interface ModelSelectorProps {
 /**
  * ModelSelector — the one unified model picker for every Hanzo app.
  *
- * Family-grouped picker in a compact Radix Popover + cmdk Command combobox:
- * grouped sections with family headers, premium markers, context suffixes,
- * keyboard navigation, and type-to-filter search for large catalogs. Monochrome,
- * dark-first, data-agnostic. Every class is a standard token; the font is
- * inherited (Geist).
+ * Family-grouped picker in a Popover + Command combobox: grouped sections with
+ * family headers, premium markers, context suffixes, keyboard navigation, and
+ * type-to-filter search for large catalogs.
+ *
+ * Styling is gui style props and tokens throughout — no class strings. The panel
+ * matches the trigger's MEASURED width (`onLayout`, which gui implements on web
+ * too), never a Radix `--radix-popover-trigger-width` custom property: nothing
+ * defines that variable now that Radix is gone.
  */
 export declare function ModelSelector({ models, value, onChange, disabled, size, placeholder, chatOnly, className, }: ModelSelectorProps): import("react/jsx-runtime").JSX.Element;
 export default ModelSelector;
+//# sourceMappingURL=ModelSelector.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModelSelector.d.ts","sourceRoot":"","sources":["../../src/models/ModelSelector.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAmD,KAAK,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAenG,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,iBAAiB,EAAE,CAAA;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,kFAAkF;IAClF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,KAAK,EACL,QAAQ,EACR,QAAgB,EAChB,IAAW,EACX,WAA4B,EAC5B,QAAe,EACf,SAAS,GACV,EAAE,kBAAkB,2CAuFpB;AAED,eAAe,aAAa,CAAA"}

package/dist/models/ModelSelector.js

@@ -0,0 +1,56 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { Check, ChevronsUpDown } from '@hanzogui/lucide-icons-2';
+import { SizableText, XStack } from '@hanzo/gui';
+import { Button, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, Popover, PopoverContent, PopoverTrigger, } from '../backends/gui/index.js';
+import { familyOf, filterChatModels, groupModelsByFamily } from './catalog.js';
+/** Show the search input once a catalog gets this large. */
+const SEARCH_THRESHOLD = 12;
+/** Panel floor when the trigger has not reported its width yet. */
+const MIN_W = 224;
+const MAX_H = 288;
+function fmtContext(ctx) {
+    if (!ctx)
+        return '';
+    if (ctx >= 1_000_000)
+        return `${(ctx / 1_000_000).toFixed(ctx % 1_000_000 === 0 ? 0 : 1)}M`;
+    if (ctx >= 1000)
+        return `${Math.round(ctx / 1000)}K`;
+    return `${ctx}`;
+}
+/**
+ * ModelSelector — the one unified model picker for every Hanzo app.
+ *
+ * Family-grouped picker in a Popover + Command combobox: grouped sections with
+ * family headers, premium markers, context suffixes, keyboard navigation, and
+ * type-to-filter search for large catalogs.
+ *
+ * Styling is gui style props and tokens throughout — no class strings. The panel
+ * matches the trigger's MEASURED width (`onLayout`, which gui implements on web
+ * too), never a Radix `--radix-popover-trigger-width` custom property: nothing
+ * defines that variable now that Radix is gone.
+ */
+export function ModelSelector({ models, value, onChange, disabled = false, size = 'md', placeholder = 'Select model', chatOnly = true, className, }) {
+    const [open, setOpen] = useState(false);
+    const [triggerW, setTriggerW] = useState(0);
+    const visible = useMemo(() => (chatOnly ? filterChatModels(models) : models), [models, chatOnly]);
+    const groups = useMemo(() => groupModelsByFamily(visible), [visible]);
+    const showSearch = visible.length > SEARCH_THRESHOLD;
+    // Resolve the selected label from the FULL list so a current pick still shows
+    // even when chatOnly would otherwise hide it.
+    const selected = value ? models.find((m) => m.id === value) : undefined;
+    const selectedLabel = selected ? (selected.label ?? selected.id) : placeholder;
+    const selectedFamily = selected ? familyOf(selected) : undefined;
+    const isSm = size === 'sm';
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(XStack, { width: "100%", onLayout: (e) => setTriggerW(e.nativeEvent.layout.width), children: _jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: isSm ? 'sm' : 'default', role: "combobox", "aria-expanded": open, disabled: disabled, justify: "flex-start", width: "100%", className: className, children: [_jsx(SizableText, { numberOfLines: 1, size: isSm ? '$1' : '$2', color: "$color12", children: selectedLabel }), selectedFamily && (_jsx(SizableText, { numberOfLines: 1, size: isSm ? '$1' : '$2', color: "$color11", children: selectedFamily })), _jsx(ChevronsUpDown, { size: isSm ? 12 : 14, ml: "auto", shrink: 0, opacity: 0.5 })] }) }) }), _jsx(PopoverContent, { align: "start", p: 0, width: Math.max(triggerW, MIN_W), children: _jsxs(Command, { children: [showSearch && _jsx(CommandInput, { placeholder: "Search models\u2026" }), _jsxs(CommandList, { maxH: MAX_H, children: [_jsx(CommandEmpty, { children: "No models found." }), groups.map((group) => (_jsx(CommandGroup, { heading: group.family, children: group.models.map((m) => {
+                                        const label = m.label ?? m.id;
+                                        const ctx = fmtContext(m.context_window);
+                                        return (_jsxs(CommandItem, { value: `${group.family} ${label} ${m.id}`, onSelect: () => {
+                                                onChange(m.id);
+                                                setOpen(false);
+                                            }, children: [_jsx(Check, { size: 14, shrink: 0, opacity: m.id === value ? 1 : 0 }), _jsx(SizableText, { numberOfLines: 1, size: "$2", children: label }), m.premium && (_jsx(SizableText, { size: "$2", color: "$color11", "aria-label": "Premium", children: "\u2726" })), ctx && (_jsx(XStack, { ml: "auto", shrink: 0, pl: "$2", children: _jsx(SizableText, { size: "$1", color: "$color11", fontVariant: ['tabular-nums'], children: ctx }) }))] }, m.id));
+                                    }) }, group.family)))] })] }) })] }));
+}
+export default ModelSelector;
+//# sourceMappingURL=ModelSelector.js.map

package/dist/models/ModelSelector.js.map

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