@k2b/ui 0.33.0 → 0.34.0

package/dist/types/actions/ContextMenu.d.ts

@@ -11,6 +11,11 @@ export type ContextMenuProps = {
     onOpen?: () => void;
     id?: string;
     label?: string;
+    /**
+     * Links, form fields, editable text, and selected text inside the host keep the browser's own menu, with its Copy,
+     * Paste, and Open link. Use it where the host wraps readable content rather than one row.
+     */
+    keepNativeMenu?: boolean;
 };
 /** Right-click menu with keyboard invocation, one-open-at-a-time behavior, and viewport clamping. */
 export declare function ContextMenu(props: ContextMenuProps): JSX.Element;

package/dist/types/actions/Dropdown.d.ts

@@ -102,6 +102,11 @@ export type DropdownProps = {
      * Defaults to `menu`. A controlled menu (`open`) always stays a menu.
      */
     phone?: "menu" | "sheet";
+    /**
+     * Renders the entries only once the menu first opens, for a menu repeated on every row of a long list: the page
+     * then carries each row's trigger, not each row's entries. Fixed for the menu's lifetime.
+     */
+    lazy?: boolean;
 };
 export type DropdownTriggerProps = Omit<ButtonProps, "aria-controls" | "aria-expanded" | "aria-haspopup" | "children" | "disabled" | "onClick" | "onKeyDown"> & {
     children: JSX.Element;

package/dist/types/actions/SelectionToolbar.d.ts

@@ -0,0 +1,38 @@
+import { type JSX } from "solid-js";
+export type SelectionToolbarProps = {
+    /**
+     * The selection's box in viewport coordinates, or nothing while the toolbar is closed. It is read again on every
+     * scroll and resize while the toolbar is open, so a function that measures the selection keeps it attached.
+     */
+    anchor: () => DOMRect | null | undefined;
+    label: string;
+    /**
+     * `above` (default) places the toolbar over the selection and below it when the space above is too small. `below`
+     * always places it below, for touch, where the system's own selection menu sits above.
+     */
+    placement?: "above" | "below";
+    /** The area the toolbar stays in, such as the editor's scroll area under its toolbar: it goes below the selection when the space above inside this area is too small. */
+    boundary?: () => HTMLElement | null | undefined;
+    /** Escape inside the toolbar; the application closes it and returns focus to the text. */
+    onEscape?: () => void;
+    children: JSX.Element;
+    class?: string;
+};
+/** Where the toolbar goes for a selection box: centered on its first line, inside the viewport. */
+export declare const selectionToolbarPosition: (anchor: Pick<DOMRect, "top" | "bottom" | "left" | "width">, toolbar: {
+    width: number;
+    height: number;
+}, viewport: {
+    width: number;
+    height: number;
+    top?: number;
+}, placement?: "above" | "below") => {
+    left: number;
+    top: number;
+    side: "above" | "below";
+};
+/**
+ * A toolbar that floats at a text selection, such as formatting and comment actions over selected text. It lies in
+ * the top layer, so no scroll container clips it, and pressing its buttons keeps the selection.
+ */
+export declare function SelectionToolbar(props: SelectionToolbarProps): JSX.Element;

package/dist/types/actions/index.d.ts

@@ -18,6 +18,8 @@ export type { RemoveButtonProps } from "./RemoveButton";
 export { RemoveButton } from "./RemoveButton";
 export type { SegmentedControlProps, SegmentOption } from "./SegmentedControl";
 export { SegmentedControl } from "./SegmentedControl";
+export type { SelectionToolbarProps } from "./SelectionToolbar";
+export { SelectionToolbar } from "./SelectionToolbar";
 export type { SplitButtonProps } from "./SplitButton";
 export { SplitButton } from "./SplitButton";
 export type { SpotlightButtonProps, SpotlightButtonVariant, SpotlightSearchOptions, SpotlightSearchResolver, } from "./SpotlightSearch";

package/dist/types/charts.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Pure chart renderers that share the `Chart` component's drawing without its Solid wrapper, for hosts that draw
+ * SVG themselves, such as server previews and app frames.
+ */
+export { type BarChartLayout, type BarChartOptions, barChartLayout, renderBarChartSvg } from "./content/chart-bar";

package/dist/types/chat/ChatComposer.d.ts

@@ -129,6 +129,17 @@ export type ChatFileSelection = {
     disabled?: boolean;
     label?: string;
 };
+/** A person `@` can mention: a member of the conversation, a person or an agent. */
+export type ChatPersonSuggestion = {
+    id: string;
+    name: string;
+    agent?: boolean;
+};
+/** Suggests people for `@`; the composer inserts the chosen one as a mention named "@Name". */
+export type ChatComposerPeople = {
+    /** At most 8 matches are shown; a rejection only means no suggestions. */
+    search: (query: string, signal: AbortSignal) => Promise<readonly ChatPersonSuggestion[]>;
+};
 export type ChatPasteHandler = (event: ClipboardEvent & {
     currentTarget: HTMLTextAreaElement;
     target: Element;
@@ -184,6 +195,8 @@ export type ChatComposerProps = {
     }) => ChatCommand | undefined;
     mentions?: readonly ChatMention[];
     onMentionsChange?: (mentions: readonly ChatMention[]) => void;
+    /** Suggests people after `@`; needs `mentions` and `onMentionsChange`. */
+    people?: ChatComposerPeople;
     /** Shared surface above the editor; suggestions temporarily replace this content. */
     accessory?: JSX.Element;
     contextUsage?: ChatContextUsageData;
@@ -200,6 +213,8 @@ export type ChatComposerProps = {
     label?: string;
     inputLabel?: string;
     disabled?: boolean;
+    /** Keeps the draft editable but holds it back, such as while the chosen model cannot answer. */
+    submitDisabled?: boolean;
     error?: string;
     focusToken?: unknown;
     draftKey?: unknown;

package/dist/types/chat/chat-messages.d.ts

@@ -118,6 +118,8 @@ export declare const chatMessages: import("@k2b/stdlib").Catalog<{
     composerFormatting: string;
     insertEmoji: string;
     emojiSuggestions: string;
+    peopleSuggestions: string;
+    agentLabel: string;
     dictate: string;
     dictateOrHold: string;
     stopDictation: string;

package/dist/types/chat/composer-document.d.ts

@@ -6,6 +6,11 @@ export type ChatCommandQuery = {
 };
 /** Only the token at the caret; URLs, paths and inline/fenced code are ordinary text. */
 export declare function chatCommandQuery(text: string, caret: number, selectionEnd?: number): ChatCommandQuery | null;
+/**
+ * The `@name` being typed at the caret, for person suggestions: after the start, a space or an opening parenthesis,
+ * outside code and outside an existing mention. The query stops at whitespace, so "@Mar" suggests "Mara Schulz".
+ */
+export declare function chatPeopleQuery(text: string, caret: number, selectionEnd?: number, mentions?: readonly ChatMention[]): ChatCommandQuery | null;
 /** An edit inside a mention removes its identity; edits around it shift the range. */
 export declare function reconcileChatMentions(before: string, after: string, mentions: readonly ChatMention[]): ChatMention[];
 export declare function chatMentionSegments(text: string, mentions: readonly ChatMention[]): {

package/dist/types/chat/index.d.ts

@@ -7,7 +7,7 @@ import { ChatDecision, ChatMark, ChatOutcome } from "./ChatDecision";
 import { ChatActivity, ChatActivityToggle, ChatContextUsage, ChatMessage } from "./ChatPrimitives";
 import { ChatRoot } from "./ChatRoot";
 import { ChatTimeline } from "./ChatTimeline";
-export type { ChatCommand, ChatCommandContext, ChatCommandDraft, ChatCommandOpenResult, ChatCommandResult, ChatCommandScope, ChatCommandSearch, ChatCommandSection, ChatComposerProps, ChatComposerReply, ChatFileSelection, ChatPasteHandler, } from "./ChatComposer";
+export type { ChatCommand, ChatCommandContext, ChatCommandDraft, ChatCommandOpenResult, ChatCommandResult, ChatCommandScope, ChatCommandSearch, ChatCommandSection, ChatComposerPeople, ChatComposerProps, ChatComposerReply, ChatFileSelection, ChatPasteHandler, ChatPersonSuggestion, } from "./ChatComposer";
 export type { ChatDecisionProps, ChatMarkProps, ChatOutcomeProps, ChatPreviewExcerptProps, ChatPreviewHeaderProps, ChatPreviewLineProps, ChatPreviewPeopleProps, ChatPreviewProps, ChatPreviewReadMoreProps, ChatPreviewShowAllProps, ChatPreviewTitleProps, } from "./ChatDecision";
 export type { ChatActivityProps, ChatActivityToggleProps, ChatContextUsageProps, ChatMessageProps } from "./ChatPrimitives";
 export { formatChatTokens } from "./ChatPrimitives";

package/dist/types/content/Chart.d.ts

@@ -1,6 +1,7 @@
 import type { MapViewport } from "@k2b/stdlib";
 import { charts } from "@k2b/stdlib";
 import type { JSX } from "solid-js";
+import { type BarChartOptions } from "./chart-bar";
 import type { ChartCursor } from "./chart-cursor";
 import { type ChartDatumRef, type ChartKind, type ChartSelection, type ChartTooltipFormatter } from "./chart-inspection-core";
 import { type StateTimelineChartOptions, type StateTimelineDomain } from "./chart-state-timeline";
@@ -95,7 +96,7 @@ export type ChartProps = {
         /** Largest connected X distance; positive, finite, without area/errorBand fills. */ maxGap?: number;
         /** Wrap the legend above the plot inside the caller's total chart height. Requires legend=true. */
         legendPlacement?: "top-start";
-    } : {}) & (K extends "stateTimeline" ? StateTimelineChartOptions : Omit<Parameters<(typeof charts)[K]>[0], "width" | "height" | "inspect">);
+    } : {}) & (K extends "stateTimeline" ? StateTimelineChartOptions : K extends "bar" ? BarChartOptions : Omit<Parameters<(typeof charts)[K]>[0], "width" | "height" | "inspect">);
 }[ChartKind];
 /** Pure renderer options: component layout, events and inspection are configured elsewhere. */
 export type ChartRenderOptions = {

package/dist/types/content/FileGrid.d.ts

@@ -1,9 +1,16 @@
 import { type JSX } from "solid-js";
 import type { CollectionSelection } from "./collection-selection";
-export type FileGridProps<T> = {
+/** One part of an open file list, such as its files as rows and its images as tiles. */
+export type FileGridGroup<T> = {
+    id: string;
+    label: JSX.Element;
+    rows: readonly T[];
+    /** `tiles` fills each item with its preview and lays the name over it. Defaults to `list`. */
+    layout?: "list" | "tiles";
+};
+type FileGridBaseProps<T> = {
     rows: readonly T[];
     getRowId: (row: T) => string;
-    selection: CollectionSelection;
     label: string;
     size?: "sm" | "md" | "lg";
     /** `list` shows one compact row per item: preview, name, and meta beside each other. Defaults to `grid`. */
@@ -12,15 +19,48 @@ export type FileGridProps<T> = {
     renderLabel: (row: T) => JSX.Element;
     renderMeta?: (row: T) => JSX.Element;
     renderActions?: (row: T) => JSX.Element;
-    onRowClick?: (row: T) => void;
+    /**
+     * `progressive` shows the actions on hover, keyboard focus, or an open menu with a mouse or trackpad, and always
+     * on touch. Their slot is reserved in both states, so nothing moves. Defaults to `always`.
+     */
+    actionVisibility?: "always" | "progressive";
     onOpen: (row: T) => void;
     onContextMenu?: (row: T) => void;
     /** Extra attributes for one tile, for example drag-and-drop handlers or data attributes the host styles. */
     itemProps?: (row: T) => JSX.HTMLAttributes<HTMLDivElement>;
     class?: string;
 };
+/** A browser or picker: items are selected, and Enter or a double click opens them. */
+export type FileGridSelectableProps<T> = FileGridBaseProps<T> & {
+    selection: CollectionSelection;
+    onRowClick?: (row: T) => void;
+    limit?: never;
+    expanded?: never;
+    onExpandedChange?: never;
+    moreMeta?: never;
+    toolbar?: never;
+    groups?: never;
+};
+/** A list without selection, as in a details panel: one click on an item opens it. */
+export type FileGridOpenProps<T> = FileGridBaseProps<T> & {
+    selection?: never;
+    onRowClick?: never;
+    /** Shows the first `limit` items, then "Show all N", which opens the full list in place. Without it, the list is always full. */
+    limit?: number;
+    /** Controls whether the full list is open. Without it, the list keeps its own state. */
+    expanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
+    /** A quiet note at the end of "Show all N", such as how many duplicates were merged. */
+    moreMeta?: JSX.Element;
+    /** Shown above the full list, such as a count, an arrangement switch, or "Download all"; not in the short list. */
+    toolbar?: JSX.Element;
+    /** How the full list arranges its items, such as files as rows, then images as tiles; the short list stays one list. */
+    groups?: (rows: readonly T[]) => readonly FileGridGroup<T>[];
+};
+export type FileGridProps<T> = FileGridSelectableProps<T> | FileGridOpenProps<T>;
 /**
  * File presentation only; the host owns data, menus, leases and permissions. Items the selection marks with
  * `isDisabled` stay reachable by keyboard but cannot be selected or opened; say why in `renderMeta`.
  */
 export declare function FileGrid<T>(props: FileGridProps<T>): JSX.Element;
+export {};

package/dist/types/content/FileTypeIcon.d.ts

@@ -20,6 +20,16 @@ export declare const fileTypeOf: (file: {
     mediaType?: string;
     folder?: boolean;
 }) => FileType;
+/**
+ * The readable kind of a file in `locale`, such as "PDF", "Image", or "Spreadsheet", for a meta line like
+ * "PDF · 4.2 MB" instead of a media type. An unknown kind names the file's extension ("ICC"), and a file without
+ * one reads "File".
+ */
+export declare const fileKindLabel: (file: {
+    name: string;
+    mediaType?: string;
+    folder?: boolean;
+}, locale: string) => string;
 /**
  * A file or folder glyph in a soft chip of its type colour. Folders take the app accent hook
  * `--k2b-app-workspace-active`; code, text, and unknown files a neutral ink. The box size is fixed per `size`.

package/dist/types/content/FileView.d.ts

@@ -76,5 +76,9 @@ export type FileViewRenderer = {
     /** Text renderers that support the edit affordance when `save` is present. */
     editable?: boolean;
 };
-export declare const formatFileViewSize: (bytes: number) => string;
+/**
+ * A file size such as "4.2 MB". With `locale`, the number follows that language ("4,2 MB") and drops a trailing
+ * zero ("64 KB"); without it, the output stays as before.
+ */
+export declare const formatFileViewSize: (bytes: number, locale?: string) => string;
 export default function FileView(props: FileViewProps): JSX.Element;

package/dist/types/content/MessageRow.d.ts

@@ -177,6 +177,8 @@ export type MessageEventRowProps = {
     icon?: string;
     /** Where the change belongs, such as its thread, where several threads mix. */
     origin?: MessageRowOrigin;
+    /** Opens what the change is about, such as the commented passage; the sentence becomes the link. */
+    href?: string;
     /** Visible time, formatted by the caller. */
     time?: string;
     dateTime?: string | Date;

package/dist/types/content/calendar-day-scroll.d.ts

@@ -42,6 +42,7 @@ export declare const wheelDelta: (axis: WheelAxis, deltaX: number, deltaY: numbe
 /**
  * The day start nearest to `position` in a strip of equal columns, or with `room` the nearer day edge at either end of
  * the visible room; ties keep the start. A `heading` of 1 or -1 only looks ahead or back, for a scroll that brought
- * something into view and must not slide back over it.
+ * something into view and must not slide back over it. The result is a whole pixel: a drawer can leave a fractional
+ * room, and WebKit drops the fraction of a scroll position, which would leave the strip short of the edge (#1713).
  */
 export declare const snapToColumn: (position: number, width: number, room?: number, heading?: number) => number;

package/dist/types/content/chart-bar.d.ts

@@ -0,0 +1,60 @@
+import { type AxisOptions, type BarItem, type ReferenceLine } from "@k2b/stdlib";
+/**
+ * Bar chart options: stdlib's `charts.bar` options plus a title for the category axis and a separate value format.
+ * The wrapper owns size and inspection.
+ */
+export type BarChartOptions = {
+    data: BarItem[];
+    /** Value axis. `label` titles it, `format` writes its ticks and, without `valueFormat`, the printed values. */
+    yAxis?: AxisOptions;
+    /**
+     * Category axis. `label` titles it. `ordered` marks categories that follow each other, such as days or steps: they
+     * stay columns, and only every n-th label shows when they would not fit, as on a time axis. Unordered categories each
+     * keep their label and turn into rows instead.
+     */
+    xAxis?: {
+        label?: string;
+        ordered?: boolean;
+    };
+    /** Writes printed values and tooltip values. Defaults to `yAxis.format`. */
+    valueFormat?: (value: number) => string;
+    colorByBar?: boolean;
+    references?: ReferenceLine[];
+    /** Print every value at its bar. Default: whenever the values stay readable; rows always print them. */
+    showValues?: boolean;
+    /** A legend of the bar colors; used only with `colorByBar` in columns, where labels sit below the plot. */
+    legend?: boolean;
+    className?: string;
+    title?: string;
+    subtitle?: string;
+    /**
+     * The narrowest width in CSS pixels at which the drawing is shown; labels are laid out to fit it. Defaults to a
+     * 320px phone column. A host that draws at its measured width passes that width.
+     */
+    displayWidth?: number;
+    /** Logical insets of the column layout. Rows place their labels and values themselves. */
+    padding?: number | {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
+};
+export type BarChartLayout = "columns" | "rows";
+/** Estimated width of `text` at `size` pixels in the UI sans font with tabular figures; a little wide on purpose. */
+export declare const chartTextWidth: (text: string, size?: number) => number;
+/** The layout a bar chart takes and its logical height, so server and browser reserve the same box. */
+export declare const barChartLayout: (opts: BarChartOptions, width?: number) => {
+    layout: BarChartLayout;
+    height: number;
+};
+/**
+ * Render a bar chart in which every category has its label. Few short labels stand below vertical columns; otherwise
+ * each category becomes a horizontal row with its label left of the bar and its value at the bar's end. Rows grow the
+ * drawing instead of dropping labels: use {@link barChartLayout} for its logical height.
+ */
+export declare const renderBarChartSvg: (opts: BarChartOptions & {
+    width: number;
+    height: number;
+    inspect?: boolean;
+}) => string;

package/dist/types/content/file-list-messages.d.ts

@@ -0,0 +1,24 @@
+/** File kinds and list folding shared by `FileGrid` and `fileKindLabel`. */
+declare const fileListMessages: import("@k2b/stdlib").Catalog<{
+    folder: string;
+    pdf: string;
+    image: string;
+    sheet: string;
+    document: string;
+    slides: string;
+    video: string;
+    audio: string;
+    archive: string;
+    file: string;
+    files: string;
+    images: string;
+    showAll: ({ count }: {
+        count: number;
+    }) => string;
+    showLess: string;
+}>;
+export type FileListMessages = ReturnType<(typeof fileListMessages)["resolve"]>["t"];
+export declare const resolveFileListMessages: (locale: string) => FileListMessages;
+export declare const useFileListMessages: () => (() => FileListMessages);
+export declare const checkFileListMessages: () => import("@k2b/stdlib").CatalogIssue[];
+export {};

package/dist/types/content/index.d.ts

@@ -24,9 +24,9 @@ export { default as DataTable } from "./DataTable";
 export type { DocCodeHighlighter, DocCodeProps, DocConcept, DocNoteVariant, DocRow } from "./Docs";
 export { DocCode, DocConceptGrid, DocInlineCode, DocLead, DocNote, DocPage, DocRows, DocSection } from "./Docs";
 export { FileBrowserPanel, type FileBrowserPanelProps, type FileSource, openFileBrowser } from "./FileBrowser";
-export { FileGrid, type FileGridProps } from "./FileGrid";
+export { FileGrid, type FileGridGroup, type FileGridOpenProps, type FileGridProps, type FileGridSelectableProps } from "./FileGrid";
 export { default as FileTree, type FileTreeActions, type FileTreeEntry, type FileTreeProps } from "./FileTree";
-export { type FileType, FileTypeIcon, type FileTypeIconProps, fileTypeOf } from "./FileTypeIcon";
+export { type FileType, FileTypeIcon, type FileTypeIconProps, fileKindLabel, fileTypeOf } from "./FileTypeIcon";
 export { canPreviewFile, default as FileView, type FileViewContent, type FileViewFile, type FileViewPreviewKind, type FileViewProps, type FileViewRenderer, type FileViewRendererProps, formatFileViewSize, getFileViewPreviewKind, } from "./FileView";
 export type { KbdProps } from "./Kbd";
 export { Kbd } from "./Kbd";

package/dist/types/feedback/Tooltip.d.ts

@@ -6,9 +6,15 @@ export type TooltipProps = {
     placement?: TooltipPlacement;
     delay?: number;
     disabled?: boolean;
+    /**
+     * The element whose keyboard focus opens the hint, when a container holds
+     * the focus instead of `target` (a tree item around its row). Defaults to
+     * `target`.
+     */
+    focusTarget?: () => HTMLElement | undefined;
 };
-export type TooltipAnchorProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "content"> & Omit<TooltipProps, "target">;
-export type TooltipTriggerProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "content"> & Omit<TooltipProps, "target">;
+export type TooltipAnchorProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "content"> & Omit<TooltipProps, "target" | "focusTarget">;
+export type TooltipTriggerProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "content"> & Omit<TooltipProps, "target" | "focusTarget">;
 /**
  * The hint an icon-only control shows by default: its label, unless the caller
  * passes its own `tooltip` (or `false`) or an enclosing Tooltip.Anchor already

package/dist/types/inputs/ChoiceList.d.ts

@@ -0,0 +1,28 @@
+import { type JSX } from "solid-js";
+import type { ValueFieldProps } from "./field-contract";
+export type ChoiceListOption<T extends string = string> = {
+    value: T;
+    label: string;
+    /** One sentence on what the choice means. */
+    description?: string;
+    /** A quiet tag after the label, such as "Default" for the choice that applies without one. */
+    marker?: string;
+};
+export type ChoiceListProps<T extends string = string> = Omit<ValueFieldProps<T | null>, "onValueChange" | "onValueCommit"> & {
+    options: readonly ChoiceListOption<T>[];
+    /** The chosen value is being saved: a spinner beside its label, and the group is busy. Choosing again is still possible. */
+    busy?: boolean;
+    /** Busy spinner's name for screen readers, such as "Saving". */
+    busyLabel?: string;
+    /** Follow-up controls for the chosen option, shown under it and indented to its text, such as a duration. */
+    details?: JSX.Element;
+    onValueChange?: (value: T) => void;
+    onValueCommit?: (value: T) => void;
+};
+/**
+ * A labeled single choice shown as a short list of rows, each with a radio, a label and one sentence on what it
+ * means, for a few choices whose consequences need words. Choosing changes only paint, so no row moves; `details`
+ * opens under the chosen row. Use `ChoiceChips` for quick picks without explanation, `RichSelect` for longer lists
+ * in a dropdown, and `ChoiceTiles` when a preview decides.
+ */
+export declare function ChoiceList<T extends string = string>(props: ChoiceListProps<T>): JSX.Element;

package/dist/types/inputs/ChoiceSlider.d.ts

@@ -0,0 +1,36 @@
+import { type JSX } from "solid-js";
+import { type MaybeAccessor } from "./field-contract";
+export type ChoiceSliderOption = {
+    value: string;
+    label: string;
+    /** One short line shown below the label line while this stop is active. */
+    description?: string;
+    /** Makes the stop unavailable. The text replaces the description when someone reaches the stop. */
+    disabledReason?: string;
+    /** Spoken value; defaults to the label and the description or reason. */
+    valueText?: string;
+};
+export type ChoiceSliderProps = {
+    options: readonly ChoiceSliderOption[];
+    /** The chosen stop. `null` shows no thumb, for a choice that is none of the stops. */
+    value: MaybeAccessor<string | null>;
+    /** A person released the thumb on a stop or moved to one with the keyboard. */
+    onValueChange?: (value: string) => void;
+    /** The stop the slider shows while someone drags or arrows through it; `null` when it shows `value` again. */
+    onActiveChange?: (value: string | null) => void;
+    /** Line text while no stop is chosen. */
+    description?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    id?: string;
+    class?: string;
+    disabled?: boolean;
+    /** `lg` gives a 44 px track and a 28 px thumb for touch sheets. */
+    size?: "md" | "lg";
+};
+/**
+ * A slider over a few named stops. The fixed line above the track always shows
+ * the active stop's description, or why a stop cannot be chosen; its height
+ * never changes. Unavailable stops stay visible and are skipped.
+ */
+export declare function ChoiceSlider(props: ChoiceSliderProps): JSX.Element;

package/dist/types/inputs/ChoiceTiles.d.ts

@@ -0,0 +1,25 @@
+import { type JSX } from "solid-js";
+import type { ValueFieldProps } from "./field-contract";
+export type ChoiceTileOption<T extends string = string> = {
+    value: T;
+    label: string;
+    /** What the choice looks like, such as a preview image; decorative, the label names the choice. */
+    visual: JSX.Element;
+    /** A short state under the label, such as "Active"; keeps its line, so tiles never change height. */
+    status?: string;
+};
+export type ChoiceTilesProps<T extends string = string> = Omit<ValueFieldProps<T | null>, "onValueChange" | "onValueCommit"> & {
+    options: readonly ChoiceTileOption<T>[];
+    /** `grid`: preview over label in as many columns as fit. `row`: preview beside label in one row, stacked on phones. */
+    layout?: "grid" | "row";
+    /** The choice is kept but has no visible effect right now; previews are dimmed, choosing still works. */
+    dimmed?: boolean;
+    onValueChange?: (value: T) => void;
+    onValueCommit?: (value: T) => void;
+};
+/**
+ * A labeled single choice shown as tiles with a preview, for picking how something looks: a face shape, a frame, a
+ * kind of picture. Every tile keeps its size when chosen, so nothing moves. Use `ChoiceChips` for text choices and
+ * `ColorChoices` for named colours.
+ */
+export declare function ChoiceTiles<T extends string = string>(props: ChoiceTilesProps<T>): JSX.Element;

package/dist/types/inputs/ColorChoices.d.ts

@@ -0,0 +1,19 @@
+import { type JSX } from "solid-js";
+import type { ValueFieldProps } from "./field-contract";
+export type ColorChoiceOption<T extends string = string> = {
+    value: T;
+    /** The colour's name; screen readers and the tooltip use it, so colour is never the only signal. */
+    label: string;
+    /** Any CSS colour. */
+    color: string;
+};
+export type ColorChoicesProps<T extends string = string> = Omit<ValueFieldProps<T | null>, "onValueChange" | "onValueCommit"> & {
+    options: readonly ColorChoiceOption<T>[];
+    onValueChange?: (value: T) => void;
+    onValueCommit?: (value: T) => void;
+};
+/**
+ * A labeled single choice from a fixed palette of named colours, shown as round swatches. Use `ColorInput` when any
+ * colour is allowed.
+ */
+export declare function ColorChoices<T extends string = string>(props: ColorChoicesProps<T>): JSX.Element;

package/dist/types/inputs/index.d.ts

@@ -10,6 +10,14 @@ export type { ChoiceChipOption, ChoiceChipsProps } from "./ChoiceChips";
 export { ChoiceChips } from "./ChoiceChips";
 export type { ColorInputProps, PinInputProps, SliderProps, } from "./ChoiceInputs";
 export { ColorInput, PinInput, Slider } from "./ChoiceInputs";
+export type { ChoiceListOption, ChoiceListProps } from "./ChoiceList";
+export { ChoiceList } from "./ChoiceList";
+export type { ChoiceSliderOption, ChoiceSliderProps } from "./ChoiceSlider";
+export { ChoiceSlider } from "./ChoiceSlider";
+export type { ChoiceTileOption, ChoiceTilesProps } from "./ChoiceTiles";
+export { ChoiceTiles } from "./ChoiceTiles";
+export type { ColorChoiceOption, ColorChoicesProps } from "./ColorChoices";
+export { ColorChoices } from "./ColorChoices";
 export type { ComboboxOption, ComboboxProps } from "./Combobox";
 export { Combobox } from "./Combobox";
 export type { ChoiceOption, ChoiceOptionsLoader } from "./choice";

package/dist/types/inputs/qr-messages.d.ts

@@ -2,6 +2,7 @@ declare const qrMessages: import("@k2b/stdlib").Catalog<{
     qrCameraPreview: string;
     qrCameraStarting: string;
     qrCameraInstructions: string;
+    qrCameraStalled: string;
     qrCameraPrivacy: string;
 }>;
 export type QrMessages = ReturnType<(typeof qrMessages)["resolve"]>["t"];

package/dist/types/internal/radio-keys.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Roving focus for a single-choice radio group: arrows move and select with wrapping, Home and End select the first
+ * and last option. Returns the index to select, or `undefined` for keys the group does not handle.
+ */
+export declare const radioKeyTarget: (key: string, index: number, count: number) => number | undefined;

package/dist/types/layout/AnchoredPopover.d.ts

@@ -0,0 +1,31 @@
+import { type JSX } from "solid-js";
+export type AnchoredPopoverProps = {
+    /** The control the panel belongs to. The panel is open while this is set. */
+    anchor: HTMLElement | null | undefined;
+    /** Called on Escape, a click outside, another press of the anchor, and when the anchor leaves the page. */
+    onClose: () => void;
+    /** The panel's accessible name; it is a non-modal dialog. */
+    label: string;
+    children: JSX.Element;
+    /** Which edge lines up with the anchor. Defaults to `end`, like a menu at the end of a toolbar. */
+    align?: "start" | "end";
+    /** The side tried first; the panel flips only when the other side has more room. Defaults to `below`. */
+    side?: "below" | "above";
+    /**
+     * The tallest the panel gets while open, in px, such as a list it can switch to. The side is chosen for this height
+     * and kept, so a panel that grows never flips. Defaults to its height when it opens.
+     */
+    plannedHeight?: number;
+    /** Width of the panel on wide screens, such as `21rem`. On a phone it is a bottom sheet across the screen. */
+    width?: string;
+    /** Moves the focus into the panel when it opens; defaults to the panel itself. */
+    initialFocus?: () => HTMLElement | null | undefined;
+    class?: string;
+};
+/**
+ * A panel anchored to a control, for content that is more than a menu, such as a card with a slider. It opens on the
+ * side with room and keeps that side while open, so a panel that changes its content never jumps to the other side.
+ * Escape, a click outside and another press of the anchor close it; the focus returns to where it was. On a phone it
+ * is a bottom sheet.
+ */
+export declare function AnchoredPopover(props: AnchoredPopoverProps): JSX.Element;

package/dist/types/layout/AppWorkspace.d.ts

@@ -100,6 +100,11 @@ export type AppWorkspaceMainPaneProps = {
     resizable?: boolean;
     resizeShadow?: boolean;
     defaultSize?: number | AppWorkspaceWidthShare;
+    /**
+     * The narrowest width in px, also for a person resizing it. Levels mode: the level needs it to be shown; when the
+     * deepest levels do not fit side by side at their minimum widths, the shallowest of them gives way, so a wide list
+     * pushes earlier columns aside.
+     */
     minSize?: number;
     maxSize?: number;
     class?: string;
@@ -398,6 +403,11 @@ export type AppWorkspaceNavTreeItemProps = {
     class?: string;
     /** With the tree's `onMove`, the item can change its place among its siblings. Other items keep theirs, and no item moves past them. */
     movable?: boolean;
+    /**
+     * Shows the item as a branch before its children are rendered, for a tree that loads a branch when it opens. The
+     * application renders the children, or a row that says they load, once the item is expanded.
+     */
+    hasChildren?: boolean;
     onDragEnter?: JSX.EventHandlerUnion<HTMLDivElement, DragEvent>;
     onDragOver?: JSX.EventHandlerUnion<HTMLDivElement, DragEvent>;
     onDragLeave?: JSX.EventHandlerUnion<HTMLDivElement, DragEvent>;