@tradalab/lyra 3.9.0 → 3.12.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/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`, `TableSearch`, `TableReload`, `filterRows`, `pageWindow` | client |
-| `@tradalab/lyra/shell` | `AppShell`, `PageShell`, `PageHeader`, `NavItem`, `NavGroup`, `Breadcrumbs`, `useActiveRoute` | client |
+| `@tradalab/lyra/shell` | `AppShell`, `PageShell`, `PageHeader`, `NavItem`, `NavGroup`, `Breadcrumbs`, `BottomNav`, `useActiveRoute` | 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
@@ -128,6 +128,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/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';
+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-S5O4AGES.js';
 export { PreferenceScript } from '../chunk-S5O4AGES.js';
 import { NativeSelect, NativeSelectOption } from '../chunk-AM6UJ666.js';
 export { useCompact, usePlate } from '../chunk-AIULLZYM.js';
-import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Switch } from '../chunk-CLNMWZPV.js';
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, RadioGroup, RadioGroupItem, Switch } from '../chunk-CLNMWZPV.js';
 export { PlatePicker } from '../chunk-CLNMWZPV.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