@tradalab/lyra 3.10.0 → 3.13.0

package/README.md

@@ -27,9 +27,9 @@ The stylesheet pulls in Tailwind v4, so your app needs `@tailwindcss/postcss`.
 | `@tradalab/lyra/utils` | `cn` | server-safe |
 | `@tradalab/lyra/hooks` | `useMobile` | client |
 | `@tradalab/lyra/ui` | 61 shadcn primitives + `AccountMenu`, `ActionButton`, `Container`, `EmptyState`, `StatusBadge` | client |
-| `@tradalab/lyra/blocks` | `Form`/`FormField` + RHF glue, `Panel`, `Confirm`/`useConfirm`, `Tree`, `TzPicker`, `OptionPicker`, `McpSettings`, `LlmSettings`, `PlatePicker`, `usePlate`, `useCompact`, `PreferenceScript` | client |
-| `@tradalab/lyra/data-table` | `DataTable` + `usePager`, `TableFilterBar`, `TableSearch`, `TableReload`, `filterRows`, `pageWindow` | client |
-| `@tradalab/lyra/shell` | `AppShell`, `PageShell`, `PageHeader`, `NavItem`, `NavGroup`, `Breadcrumbs`, `useActiveRoute` | client |
+| `@tradalab/lyra/blocks` | `Form`/`FormField` + RHF glue, `Panel`, `Confirm`/`useConfirm`, `Tree`, `TzPicker`, `OptionPicker`, `MobileSheet`, `ChoiceDrawer`, `McpSettings`, `LlmSettings`, `PlatePicker`, `usePlate`, `useCompact`, `PreferenceScript` | client |
+| `@tradalab/lyra/data-table` | `DataTable` + `usePager`, `TableFilterBar`, `TableFilterChips`, `TableSearch`, `TableReload`, `filterRows`, `pageWindow` | client |
+| `@tradalab/lyra/shell` | `AppShell`, `PageShell`, `PageHeader`, `NavItem`, `NavGroup`, `Breadcrumbs`, `BottomNav`, `useActiveRoute`, `useSearchParam`, `useTabParam`, `usePageParam`, `UrlTabs` | client |
 | `@tradalab/lyra/styles.css` | Tailwind v4 base + `radix-lyra` tokens (light/dark) | CSS |
 
 Client subpaths carry a build-injected `"use client"`; import them inside a
@@ -71,6 +71,17 @@ Two rules the components enforce rather than document:
   browser, so it answers "no results" about a row on page three. Send the query instead;
   `filterRows` is for the unpaged case, where local filtering is the truth.
 
+To keep the page, the query and the open tab in the URL, `shell` holds the Next side and
+`data-table` only takes state: `usePager({ ...usePageParam(), labels })`, and
+`<TableSearch value={q} onChange={pager.onFilter(setQ)} />` with
+`const [q, setQ] = useSearchParam("q")`. Rows per page stay out of the URL. Show what is in force
+with `TableFilterChips`: a link can open a table already narrowed. Clear a chip through
+`pager.onFilter` too, so the page goes back to 1 with the filter.
+
+`DataTable` also takes `onRowClick` (the whole row, and Enter or Space) and selection
+(`getRowId` + `selected` + `onSelectedChange`). The header box covers the rows on screen only;
+acting on every row that matches a filter is a separate request that sends the filter.
+
 lyra ships **no copy and no number formatting**: `usePager` takes `labels`, including
 `range: ({from, to, total}) => string`. That keeps `next-intl` out of the library, which matters
 because `data-table` must stay loadable by a consumer that is not a Next app.
@@ -128,6 +139,26 @@ neutral default and every reader who chose a colour watches it flip. It has to b
 a raw inline script to beat that paint, which is why lyra renders it instead of
 leaving it to each app.
 
+## Phones
+
+`3.12.0` moved in what the scorix Android apps had each written by hand. The kit
+is sized for a pointer, so a phone app opts in to finger-sized controls on its
+root, and takes the phone's own chrome from the kit:
+
+```tsx
+<html data-touch="true">                      // 40px controls, 14px text
+
+import { BottomNav } from "@tradalab/lyra/shell"
+<BottomNav items={[{ id: "codes", label: t("codes"), icon: <KeyRound /> }]} activeId={tab} onSelect={setTab} />
+
+import { ChoiceDrawer, MobileSheet } from "@tradalab/lyra/blocks"
+<MobileSheet open title="Add account" onOpenChange={open => !open && close()}>…</MobileSheet>
+<ChoiceDrawer trigger={row} title="Theme" options={themes} value={theme} onValueChange={setTheme} />
+```
+
+`BottomNav` routes nothing and adds no safe-area padding: the id comes back to
+the app, and the app's root pads the edges.
+
 ## Develop
 
 ```bash

package/dist/{account-menu-D9M_kEzN.d.ts → account-menu-q2VMEk3b.d.ts}

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
-import { Separator as Separator$1, Tooltip as Tooltip$1 } from 'radix-ui';
+import { Separator as Separator$1, Tooltip as Tooltip$1, Tabs as Tabs$1 } from 'radix-ui';
 
 declare const buttonVariants: (props?: ({
     variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
@@ -93,6 +93,14 @@ declare function SidebarMenuSubButton({ asChild, size, isActive, className, ...p
     isActive?: boolean;
 }): React.JSX.Element;
 
+declare function Tabs({ className, orientation, ...props }: React.ComponentProps<typeof Tabs$1.Root>): React.JSX.Element;
+declare const tabsListVariants: (props?: ({
+    variant?: "line" | "default" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function TabsList({ className, variant, ...props }: React.ComponentProps<typeof Tabs$1.List> & VariantProps<typeof tabsListVariants>): React.JSX.Element;
+declare function TabsTrigger({ className, ...props }: React.ComponentProps<typeof Tabs$1.Trigger>): React.JSX.Element;
+declare function TabsContent({ className, ...props }: React.ComponentProps<typeof Tabs$1.Content>): React.JSX.Element;
+
 type AccountMenuUser = {
     name?: string | null;
     email?: string | null;
@@ -134,4 +142,4 @@ declare function AccountMenu({ user, labels, onSignOut, onSwitchAccount, onSignI
 /** Two-letter avatar fallback from a name or email. Shared with shell NavUser. */
 declare function initialsOf(value?: string | null): string;
 
-export { type AccountMenuUser as A, Breadcrumb as B, SidebarMenuSkeleton as C, SidebarMenuSub as D, SidebarMenuSubButton as E, SidebarMenuSubItem as F, SidebarRail as G, SidebarSeparator as H, Input as I, SidebarTrigger as J, TooltipContent as K, TooltipProvider as L, TooltipTrigger as M, buttonVariants as N, defaultAccountMenuLabels as O, initialsOf as P, useSidebar as Q, SidebarProvider as S, Tooltip as T, SidebarInset as a, Sidebar as b, type AccountMenuLabels as c, Button as d, Separator as e, AccountMenu as f, type AccountMenuProps as g, BreadcrumbEllipsis as h, BreadcrumbItem as i, BreadcrumbLink as j, BreadcrumbList as k, BreadcrumbPage as l, BreadcrumbSeparator as m, SidebarContent as n, SidebarFooter as o, SidebarGroup as p, SidebarGroupAction as q, SidebarGroupContent as r, SidebarGroupLabel as s, SidebarHeader as t, SidebarInput as u, SidebarMenu as v, SidebarMenuAction as w, SidebarMenuBadge as x, SidebarMenuButton as y, SidebarMenuItem as z };
+export { type AccountMenuUser as A, Breadcrumb as B, SidebarMenuSkeleton as C, SidebarMenuSub as D, SidebarMenuSubButton as E, SidebarMenuSubItem as F, SidebarRail as G, SidebarSeparator as H, Input as I, SidebarTrigger as J, TabsContent as K, TabsList as L, TabsTrigger as M, Tooltip as N, TooltipContent as O, TooltipProvider as P, TooltipTrigger as Q, buttonVariants as R, SidebarProvider as S, Tabs as T, defaultAccountMenuLabels as U, initialsOf as V, tabsListVariants as W, useSidebar as X, SidebarInset as a, Sidebar as b, type AccountMenuLabels as c, Button as d, Separator as e, AccountMenu as f, type AccountMenuProps as g, BreadcrumbEllipsis as h, BreadcrumbItem as i, BreadcrumbLink as j, BreadcrumbList as k, BreadcrumbPage as l, BreadcrumbSeparator as m, SidebarContent as n, SidebarFooter as o, SidebarGroup as p, SidebarGroupAction as q, SidebarGroupContent as r, SidebarGroupLabel as s, SidebarHeader as t, SidebarInput as u, SidebarMenu as v, SidebarMenuAction as w, SidebarMenuBadge as x, SidebarMenuButton as y, SidebarMenuItem as z };

package/dist/blocks/index.d.ts

@@ -1,7 +1,7 @@
 import * as react_hook_form from 'react-hook-form';
 import { FieldValues, FieldPath, ControllerProps } from 'react-hook-form';
-import * as React from 'react';
-import { ReactNode, HTMLAttributes } from 'react';
+import * as React$1 from 'react';
+import { ReactNode, HTMLAttributes, ReactElement } from 'react';
 import { Slot, Label } from 'radix-ui';
 import { LucideIcon } from 'lucide-react';
 export { B as BEARING_PLATES, a as BearingPlate, P as PLATES, b as Plate, d as derivePlate, i as isPlate } from '../plate-BJ19iaVV.js';
@@ -9,8 +9,8 @@ export { u as useCompact, a as usePlate } from '../use-compact-BvI4sJf9.js';
 export { P as PlatePicker, a as PlatePickerProps } from '../plate-picker-CXxUGyNz.js';
 export { P as PreferenceScript } from '../preference-script-Dm-LEoYX.js';
 
-declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>({ children, watch, getValues, getFieldState, setError, clearErrors, setValue, setValues, trigger, formState, resetField, reset, handleSubmit, unregister, control, register, setFocus, subscribe, }: react_hook_form.FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
-declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => React.JSX.Element;
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>({ children, watch, getValues, getFieldState, setError, clearErrors, setValue, setValues, trigger, formState, resetField, reset, handleSubmit, unregister, control, register, setFocus, subscribe, }: react_hook_form.FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React$1.JSX.Element;
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => React$1.JSX.Element;
 declare const useFormField: () => {
     invalid: boolean;
     isDirty: boolean;
@@ -23,11 +23,11 @@ declare const useFormField: () => {
     formDescriptionId: string;
     formMessageId: string;
 };
-declare function FormItem({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-declare function FormLabel({ className, ...props }: React.ComponentProps<typeof Label.Root>): React.JSX.Element;
-declare function FormControl({ ...props }: React.ComponentProps<typeof Slot.Root>): React.JSX.Element;
-declare function FormDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
-declare function FormMessage({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element | null;
+declare function FormItem({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function FormLabel({ className, ...props }: React$1.ComponentProps<typeof Label.Root>): React$1.JSX.Element;
+declare function FormControl({ ...props }: React$1.ComponentProps<typeof Slot.Root>): React$1.JSX.Element;
+declare function FormDescription({ className, ...props }: React$1.ComponentProps<"p">): React$1.JSX.Element;
+declare function FormMessage({ className, ...props }: React$1.ComponentProps<"p">): React$1.JSX.Element | null;
 
 type PanelItemType = {
     key: string;
@@ -48,7 +48,7 @@ type PanelItemType = {
  */
 declare function Panel({ items }: {
     items: PanelItemType[];
-}): React.JSX.Element | null;
+}): React$1.JSX.Element | null;
 interface PanelItemProps {
     children: ReactNode;
     active?: boolean;
@@ -64,7 +64,7 @@ interface PanelCardProps {
     action?: ReactNode;
     children?: ReactNode;
 }
-declare function PanelCard({ title, description, hint, action, children }: PanelCardProps): React.JSX.Element;
+declare function PanelCard({ title, description, hint, action, children }: PanelCardProps): React$1.JSX.Element;
 
 type ConfirmOptions = {
     title: string;
@@ -79,13 +79,13 @@ type Props = {
     onConfirm: () => void;
     onCancel: () => void;
 };
-declare function ConfirmDialog({ options, onConfirm, onCancel }: Props): React.JSX.Element;
+declare function ConfirmDialog({ options, onConfirm, onCancel }: Props): React$1.JSX.Element;
 
 type ConfirmFn = (options: ConfirmOptions) => Promise<boolean>;
-declare const ConfirmContext: React.Context<ConfirmFn | null>;
+declare const ConfirmContext: React$1.Context<ConfirmFn | null>;
 declare function ConfirmProvider({ children }: {
     children: ReactNode;
-}): React.JSX.Element;
+}): React$1.JSX.Element;
 
 declare const useConfirm: () => ConfirmFn;
 
@@ -104,9 +104,9 @@ type TreeProviderProps = {
     animateExpand?: boolean;
     className?: string;
 };
-declare const TreeProvider: ({ children, defaultExpandedIds, showLines, showIcons, selectable, multiSelect, selectedIds, onSelectionChange, indent, animateExpand, className, expandedIds, onExpandedChange, }: TreeProviderProps) => React.JSX.Element;
+declare const TreeProvider: ({ children, defaultExpandedIds, showLines, showIcons, selectable, multiSelect, selectedIds, onSelectionChange, indent, animateExpand, className, expandedIds, onExpandedChange, }: TreeProviderProps) => React$1.JSX.Element;
 type TreeViewProps = HTMLAttributes<HTMLDivElement>;
-declare const TreeView: ({ className, children, ...props }: TreeViewProps) => React.JSX.Element;
+declare const TreeView: ({ className, children, ...props }: TreeViewProps) => React$1.JSX.Element;
 type TreeNodeProps = HTMLAttributes<HTMLDivElement> & {
     nodeId?: string;
     level?: number;
@@ -114,27 +114,27 @@ type TreeNodeProps = HTMLAttributes<HTMLDivElement> & {
     parentPath?: boolean[];
     children?: ReactNode;
 };
-declare const TreeNode: ({ nodeId: providedNodeId, level, isLast, parentPath, children, className, onClick: _onClick, ...props }: TreeNodeProps) => React.JSX.Element;
+declare const TreeNode: ({ nodeId: providedNodeId, level, isLast, parentPath, children, className, onClick: _onClick, ...props }: TreeNodeProps) => React$1.JSX.Element;
 type TreeNodeTriggerProps = HTMLAttributes<HTMLDivElement> & {
     expandOnClick?: boolean;
 };
-declare const TreeNodeTrigger: ({ children, className, onClick, expandOnClick, ...props }: TreeNodeTriggerProps) => React.JSX.Element;
-declare const TreeLines: () => React.JSX.Element | null;
+declare const TreeNodeTrigger: ({ children, className, onClick, expandOnClick, ...props }: TreeNodeTriggerProps) => React$1.JSX.Element;
+declare const TreeLines: () => React$1.JSX.Element | null;
 type TreeNodeContentProps = HTMLAttributes<HTMLDivElement> & {
     hasChildren?: boolean;
 };
-declare const TreeNodeContent: ({ children, hasChildren, className, ...props }: TreeNodeContentProps) => React.JSX.Element | null;
+declare const TreeNodeContent: ({ children, hasChildren, className, ...props }: TreeNodeContentProps) => React$1.JSX.Element | null;
 type TreeExpanderProps = HTMLAttributes<HTMLDivElement> & {
     hasChildren?: boolean;
 };
-declare const TreeExpander: ({ hasChildren, className, onClick, ...props }: TreeExpanderProps) => React.JSX.Element;
+declare const TreeExpander: ({ hasChildren, className, onClick, ...props }: TreeExpanderProps) => React$1.JSX.Element;
 type TreeIconProps = HTMLAttributes<HTMLDivElement> & {
     icon?: ReactNode;
     hasChildren?: boolean;
 };
-declare const TreeIcon: ({ icon, hasChildren, className, ...props }: TreeIconProps) => React.JSX.Element | null;
+declare const TreeIcon: ({ icon, hasChildren, className, ...props }: TreeIconProps) => React$1.JSX.Element | null;
 type TreeLabelProps = HTMLAttributes<HTMLSpanElement>;
-declare const TreeLabel: ({ className, ...props }: TreeLabelProps) => React.JSX.Element;
+declare const TreeLabel: ({ className, ...props }: TreeLabelProps) => React$1.JSX.Element;
 
 interface TzPickerLabels {
     /** Shown when the value is empty and `allowInherit`. Default: "Inherit". */
@@ -158,7 +158,7 @@ interface TzPickerProps {
     id?: string;
     className?: string;
 }
-declare function TzPicker({ value, onChange, allowInherit, labels, disabled, id, className, }: TzPickerProps): React.JSX.Element;
+declare function TzPicker({ value, onChange, allowInherit, labels, disabled, id, className, }: TzPickerProps): React$1.JSX.Element;
 
 /**
  * Pick one id from a known set.
@@ -202,7 +202,62 @@ declare function OptionPicker({ value, onChange, options, labels, disabled, id,
     disabled?: boolean;
     id?: string;
     className?: string;
-}): React.JSX.Element;
+}): React$1.JSX.Element;
+
+interface AvatarTileProps {
+    src?: string;
+    alt?: string;
+    /** Shown while the image loads, or instead of it: initials, an icon. */
+    fallback: React.ReactNode;
+    className?: string;
+}
+/**
+ * The frame, its `after:` border, the image and the fallback each round on their own, so a
+ * `rounded-none` on the frame alone still shows a round photo inside a square.
+ */
+declare function AvatarTile({ src, alt, fallback, className }: AvatarTileProps): React$1.JSX.Element;
+
+interface MobileSheetProps {
+    title: ReactNode;
+    description?: ReactNode;
+    /** Opens the sheet when tapped. Omit it and drive `open` instead. */
+    trigger?: ReactElement;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Goes on the scrolling body, not the drawer. */
+    className?: string;
+    children: ReactNode;
+}
+/**
+ * A bottom drawer the finger swipes down, for a phone. The three scorix Android apps each wrapped
+ * `Drawer` the same way, because the primitive is sized for a pointer (12px body) and stops growing at
+ * 80% of the screen without letting what is below that point scroll into view.
+ *
+ * The body keeps 16px of side padding; content that should run edge to edge (a list of rows) takes
+ * it back with `-mx-4`, as `ChoiceDrawer` does.
+ */
+declare function MobileSheet({ title, description, trigger, open, onOpenChange, className, children }: MobileSheetProps): React$1.JSX.Element;
+
+interface ChoiceOption<T extends string = string> {
+    value: T;
+    label: ReactNode;
+}
+interface ChoiceDrawerProps<T extends string = string> extends Omit<MobileSheetProps, "children" | "className"> {
+    options: readonly ChoiceOption<T>[];
+    value: T | undefined;
+    onValueChange: (value: T) => void;
+}
+/**
+ * Pick one of a few options from a bottom sheet: theme, language, a sound. lunarcalendar and pomodoro
+ * had five copies of it.
+ *
+ * Each row is a `<label>` around its radio, so the whole row takes the tap. The copies made the row a
+ * `div` with its own click handler and stopped the radio's click from bubbling, which worked but left
+ * the row text unnamed for a screen reader.
+ *
+ * The sheet stays open after a pick: the choice applies at once and is visible behind it.
+ */
+declare function ChoiceDrawer<T extends string = string>({ options, value, onValueChange, ...sheet }: ChoiceDrawerProps<T>): React$1.JSX.Element;
 
 /**
  * The settings screen for a scorix app's MCP tools: the user's switch, one switch per tool,
@@ -290,7 +345,7 @@ declare function McpSettings({ api, serverName, copy, labels, locale, className,
     labels?: McpSettingsLabels;
     locale?: string;
     className?: string;
-}): React.JSX.Element;
+}): React$1.JSX.Element;
 
 /**
  * The settings screen for a scorix app's language models: which provider and model each of the
@@ -390,7 +445,7 @@ interface LlmSettingsApi {
      * this block means silently dropping such a warning, which is what kept loom on its own 687-line
      * copy of this screen.
      */
-    slotNote?(slot: string): React.ReactNode;
+    slotNote?(slot: string): React$1.ReactNode;
 }
 interface LlmSettingsLabels {
     slots?: string;
@@ -430,6 +485,6 @@ declare function LlmSettings({ api, labels, className, }: {
     api: LlmSettingsApi;
     labels?: LlmSettingsLabels;
     className?: string;
-}): React.JSX.Element;
+}): React$1.JSX.Element;
 
-export { ConfirmContext, ConfirmDialog, type ConfirmFn, type ConfirmOptions, ConfirmProvider, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, type LlmCapability, type LlmDriver, type LlmField, type LlmFound, type LlmModel, type LlmProvider, type LlmProviderInput, type LlmPullProgress, LlmSettings, type LlmSettingsApi, type LlmSettingsLabels, type LlmSlot, type LlmState, type McpCall, type McpClient, McpSettings, type McpSettingsApi, type McpSettingsLabels, type McpStatus, type McpTool, OptionPicker, type OptionPickerLabels, Panel, PanelCard, type PanelCardProps, type PanelItemProps, type PickOption, TreeExpander, type TreeExpanderProps, TreeIcon, type TreeIconProps, TreeLabel, type TreeLabelProps, TreeLines, TreeNode, TreeNodeContent, type TreeNodeContentProps, type TreeNodeProps, TreeNodeTrigger, type TreeNodeTriggerProps, TreeProvider, type TreeProviderProps, TreeView, type TreeViewProps, TzPicker, type TzPickerLabels, type TzPickerProps, useConfirm, useFormField };
+export { AvatarTile, type AvatarTileProps, ChoiceDrawer, type ChoiceDrawerProps, type ChoiceOption, ConfirmContext, ConfirmDialog, type ConfirmFn, type ConfirmOptions, ConfirmProvider, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, type LlmCapability, type LlmDriver, type LlmField, type LlmFound, type LlmModel, type LlmProvider, type LlmProviderInput, type LlmPullProgress, LlmSettings, type LlmSettingsApi, type LlmSettingsLabels, type LlmSlot, type LlmState, type McpCall, type McpClient, McpSettings, type McpSettingsApi, type McpSettingsLabels, type McpStatus, type McpTool, MobileSheet, type MobileSheetProps, OptionPicker, type OptionPickerLabels, Panel, PanelCard, type PanelCardProps, type PanelItemProps, type PickOption, TreeExpander, type TreeExpanderProps, TreeIcon, type TreeIconProps, TreeLabel, type TreeLabelProps, TreeLines, TreeNode, TreeNodeContent, type TreeNodeContentProps, type TreeNodeProps, TreeNodeTrigger, type TreeNodeTriggerProps, TreeProvider, type TreeProviderProps, TreeView, type TreeViewProps, TzPicker, type TzPickerLabels, type TzPickerProps, useConfirm, useFormField };

package/dist/blocks/index.js

@@ -1,14 +1,14 @@
 "use client";
-import { Label, Combobox, ComboboxInput, ComboboxContent, ComboboxEmpty, ComboboxList, ComboboxItem, Spinner, Alert, AlertDescription, FieldGroup, FieldSet, FieldLegend, FieldDescription, Field, FieldContent, FieldLabel, Badge, FieldSeparator, Progress } from '../chunk-S5O4AGES.js';
-export { PreferenceScript } from '../chunk-S5O4AGES.js';
-import { NativeSelect, NativeSelectOption } from '../chunk-AM6UJ666.js';
+import { Label, Combobox, ComboboxInput, ComboboxContent, ComboboxEmpty, ComboboxList, ComboboxItem, Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, Spinner, Alert, AlertDescription, FieldGroup, FieldSet, FieldLegend, FieldDescription, Field, FieldContent, FieldLabel, Badge, FieldSeparator, Progress } from '../chunk-4ILJ3M7K.js';
+export { PreferenceScript } from '../chunk-4ILJ3M7K.js';
+import { NativeSelect, NativeSelectOption } from '../chunk-U4HIZXI6.js';
 export { useCompact, usePlate } from '../chunk-AIULLZYM.js';
-import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Switch } from '../chunk-CLNMWZPV.js';
-export { PlatePicker } from '../chunk-CLNMWZPV.js';
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, RadioGroup, RadioGroupItem, Switch } from '../chunk-SQELPQZU.js';
+export { PlatePicker } from '../chunk-SQELPQZU.js';
 export { BEARING_PLATES, PLATES, derivePlate, isPlate } from '../chunk-D7DMRCDY.js';
 import '../chunk-VEWKPOMS.js';
 import { Dialog, DialogOverlay, DialogContent, DialogTitle, DialogDescription } from '../chunk-L4LQCVOF.js';
-import '../chunk-VXW3K5O5.js';
+import { Avatar, AvatarImage, AvatarFallback } from '../chunk-VXW3K5O5.js';
 import { Button, Input } from '../chunk-VGOGWZCF.js';
 import { cn } from '../chunk-XH55BHUU.js';
 import * as React5 from 'react';
@@ -574,6 +574,30 @@ function OptionPicker({
     }
   );
 }
+function AvatarTile({ src, alt, fallback, className }) {
+  return /* @__PURE__ */ jsxs(Avatar, { className: cn("rounded-none after:rounded-none", className), children: [
+    src ? /* @__PURE__ */ jsx(AvatarImage, { src, alt: alt ?? "", className: "rounded-none" }) : null,
+    /* @__PURE__ */ jsx(AvatarFallback, { className: "rounded-none text-xs", children: fallback })
+  ] });
+}
+function MobileSheet({ title, description, trigger, open, onOpenChange, className, children }) {
+  return /* @__PURE__ */ jsxs(Drawer, { open, onOpenChange, children: [
+    trigger && /* @__PURE__ */ jsx(DrawerTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsxs(DrawerContent, { children: [
+      /* @__PURE__ */ jsxs(DrawerHeader, { children: [
+        /* @__PURE__ */ jsx(DrawerTitle, { className: "text-base", children: title }),
+        description && /* @__PURE__ */ jsx(DrawerDescription, { className: "text-sm", children: description })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: cn("min-h-0 overflow-y-auto px-4 pb-[calc(1.5rem+env(safe-area-inset-bottom))] text-sm", className), children })
+    ] })
+  ] });
+}
+function ChoiceDrawer({ options, value, onValueChange, ...sheet }) {
+  return /* @__PURE__ */ jsx(MobileSheet, { ...sheet, children: /* @__PURE__ */ jsx(RadioGroup, { value: value ?? "", onValueChange: (v) => onValueChange(v), className: "-mx-4 gap-0 divide-y divide-border", children: options.map((option) => /* @__PURE__ */ jsxs("label", { className: "flex min-h-12 cursor-pointer items-center justify-between gap-4 px-4 py-3 active:bg-muted", children: [
+    /* @__PURE__ */ jsx("span", { children: option.label }),
+    /* @__PURE__ */ jsx(RadioGroupItem, { value: option.value })
+  ] }, option.value)) }) });
+}
 var FALLBACK2 = {
   enable: "Allow MCP clients",
   enableHint: "Let an AI agent such as Claude Desktop or Cursor use the tools this app offers.",
@@ -1289,6 +1313,6 @@ function LlmSettings({
   );
 }
 
-export { ConfirmContext, ConfirmDialog, ConfirmProvider, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, LlmSettings, McpSettings, OptionPicker, Panel, PanelCard, TreeExpander, TreeIcon, TreeLabel, TreeLines, TreeNode, TreeNodeContent, TreeNodeTrigger, TreeProvider, TreeView, TzPicker, useConfirm, useFormField };
+export { AvatarTile, ChoiceDrawer, ConfirmContext, ConfirmDialog, ConfirmProvider, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, LlmSettings, McpSettings, MobileSheet, OptionPicker, Panel, PanelCard, TreeExpander, TreeIcon, TreeLabel, TreeLines, TreeNode, TreeNodeContent, TreeNodeTrigger, TreeProvider, TreeView, TzPicker, useConfirm, useFormField };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map