@k2b/ui 0.32.0 → 0.34.0

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";
@@ -40,8 +40,8 @@ export { MapAttribution } from "./MapAttribution";
 export { MapView } from "./MapView";
 export { MapViewFrame } from "./MapViewFrame";
 export { default as MarkdownView, type MarkdownRenderOptions, type MarkdownViewProps, renderSafeMarkdown } from "./MarkdownView";
-export type { MessageGroupEntry, MessageRowAction, MessageRowAttachment, MessageRowAuthor, MessageRowFile, MessageRowMedia, MessageRowProgress, MessageRowProps, MessageRowQuote, MessageRowReaction, MessageRowStatus, MessageRowThread, MessageSystemRowProps, } from "./MessageRow";
-export { MessageRow, MessageSystemRow, startsMessageGroup } from "./MessageRow";
+export type { MessageEventGroupProps, MessageEventRowProps, MessageGroupEntry, MessageRowAction, MessageRowAttachment, MessageRowAuthor, MessageRowFile, MessageRowMedia, MessageRowOrigin, MessageRowProgress, MessageRowProps, MessageRowQuote, MessageRowReaction, MessageRowStatus, MessageRowThread, MessageSystemRowProps, } from "./MessageRow";
+export { MessageEventGroup, MessageEventRow, MessageRow, MessageSystemRow, startsMessageGroup } from "./MessageRow";
 export { type MapPaletteColors, type MapTheme, mapPalette } from "./map-palette";
 export { type MapStyleOptions, mapAttribution, mapStyle } from "./map-style";
 export type { MapViewArea, MapViewFit, MapViewFrameProps, MapViewLine, MapViewLineTone, MapViewMarker, MapViewOwnLocation, MapViewPoint, MapViewProps, MapViewStyle, MapViewStyleSource, MapViewTone, } from "./map-view-types";

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/feedback/dialog-core.d.ts

@@ -8,6 +8,9 @@ export type OpenDialogOptions = {
     initialFocus?: "first-input" | "none" | ((dialog: HTMLDialogElement) => HTMLElement | null);
     cancelBehavior?: "resolve-undefined" | "ignore";
     ariaLabel?: string;
+    ariaDescribedBy?: string;
+    /** Use for a consequential confirmation that requires a response. Defaults to dialog. */
+    role?: "dialog" | "alertdialog";
     /**
      * Add a same-URL history entry while the dialog is open, so the browser's or the phone's Back closes the dialog
      * instead of leaving the page. Normally closing the dialog removes the entry again; the returned promise settles after that.

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/intl/shortcut-messages.d.ts

@@ -26,6 +26,8 @@ export declare const resolveShortcutMessages: (locale?: string) => {
     pageup: string;
     pagedown: string;
     spaceLabel: string;
+    click: string;
+    clickLabel: string;
     deleteLabel: string;
     homeLabel: string;
     endLabel: string;

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

@@ -91,6 +91,8 @@ export type AppWorkspaceMainPaneProps = {
     href?: string;
     /** Quiet one-line text below the level title. */
     description?: JSX.Element;
+    /** Levels mode: a small mark before the level title, such as the colour dot of the object's container. */
+    lead?: JSX.Element;
     /** Controls at the end of the level head. */
     actions?: JSX.Element;
     surface?: "default" | "navigation";
@@ -98,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;
@@ -396,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>;

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

@@ -8,9 +8,18 @@ export type DetailPanelProps = {
     class?: string;
 };
 type DetailPanelHeaderBaseProps = {
+    /** A short line above the title that names what is shown, such as "Conversation", followed by its state. */
+    kind?: JSX.Element;
     title: JSX.Element;
     subtitle?: JSX.Element;
     meta?: JSX.Element;
+    /**
+     * The resource's "…" menu, shown before `actions`. Pass every less frequent command on the shown resource here,
+     * so each panel opens its menu from the same place; an empty list shows no button.
+     */
+    menu?: readonly DropdownItem[];
+    /** Accessible name of the "…" button. Defaults to "More actions". */
+    menuLabel?: string;
     actions?: JSX.Element;
     primaryActions?: JSX.Element;
     class?: string;
@@ -37,6 +46,11 @@ export type DetailPanelSummaryProps = {
 export type DetailPanelGroupProps = {
     children: JSX.Element;
     label?: string;
+    /**
+     * A visible quiet title, such as "More about this conversation". Its sections then stand flush as rows below
+     * it, which suits collapsed secondary sections with a `summary`.
+     */
+    title?: JSX.Element;
     class?: string;
 };
 export type DetailPanelTone = "accent" | "neutral" | "success" | "warning" | "danger";
@@ -90,6 +104,7 @@ export type DetailPanelSectionProps = DetailPanelSectionBaseProps & ({
     children?: JSX.Element;
     actions?: JSX.Element;
     collapsible?: false;
+    summary?: never;
     defaultOpen?: never;
     open?: never;
     onOpenChange?: never;
@@ -98,6 +113,8 @@ export type DetailPanelSectionProps = DetailPanelSectionBaseProps & ({
     children: JSX.Element;
     actions?: never;
     collapsible: true;
+    /** One line that says what the closed section holds, such as its newest entry; hidden while open. */
+    summary?: JSX.Element;
     defaultOpen?: boolean;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;

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

@@ -1,20 +1,38 @@
 import { type JSX } from "solid-js";
+import type { TabBarItem } from "./TabBar";
 export type MobileShellProps = {
     /** Usually `MobileShell.Header`; it sits above the scroll area and pads the top safe area. */
-    header: JSX.Element;
+    header?: JSX.Element;
     /** Usually a `TabBar`; it sits below the scroll area and pads the bottom safe area itself. */
     footer?: JSX.Element;
+    /**
+     * Usually `MobileShell.Sidebar` with the footer's destinations and more. From 48rem of window width it stands at
+     * the start edge and the footer goes; below, it is not shown. The server renders both, so CSS alone decides.
+     */
+    sidebar?: JSX.Element;
     /** The page content, inside the shell's only scroll area. */
     children: JSX.Element;
+    /**
+     * `false` for content that brings its own heads and scroll areas, such as `AppWorkspace.Main` levels: it fills the
+     * main area without the shell's scroll area, and the header shows only as the frame of the next page while a tapped
+     * tab's page loads.
+     */
+    scroll?: boolean;
     class?: string;
 };
 export type MobileShellHeaderProps = {
     title: string;
-    /** A Back control before the title: a link with `href`, otherwise a button. */
+    /** The title while the shell shows its sidebar, which already names the app; `title` by default. */
+    sidebarTitle?: string;
+    /**
+     * A Back control before the title: a link with `href`, otherwise a button. `withSidebar: false` hides it while the
+     * shell shows its sidebar, for a way back to a destination the sidebar lists.
+     */
     back?: {
         href?: string;
         onClick?: () => void;
         label: string;
+        withSidebar?: boolean;
     };
     /** Controls after the title, such as a menu. */
     actions?: JSX.Element;
@@ -29,12 +47,44 @@ export type MobileShellHeaderProps = {
 export declare function observeMobileShell(root: HTMLElement): () => void;
 declare function MobileShellRoot(props: MobileShellProps): JSX.Element;
 declare function MobileShellHeader(props: MobileShellHeaderProps): JSX.Element;
+export type MobileShellSidebarItem = TabBarItem & {
+    /**
+     * A quiet count after the label, such as open tasks: a number (0 shows nothing) or an element that renders one. The
+     * item's `badge`, which calls for attention, takes its place.
+     */
+    count?: number | JSX.Element;
+};
+export type MobileShellSidebarProps = {
+    /** Accessible name of the navigation landmark; usually the tab bar's. */
+    label: string;
+    /** The app's name in the sidebar's head. */
+    title: string;
+    /** Address of the app's logo before the name; decorative, the name says it. */
+    logo?: string;
+    /** Destinations at the top, such as Start. */
+    items: readonly MobileShellSidebarItem[];
+    /** Named groups below them, such as the apps; a group without items is left out. */
+    sections?: readonly {
+        title: string;
+        items: readonly MobileShellSidebarItem[];
+    }[];
+    /** Destinations at the bottom edge, such as Settings. */
+    footer?: readonly MobileShellSidebarItem[];
+};
+/**
+ * The navigation of a touch app on a wide screen, in `MobileShell`'s `sidebar`: the app's name, then its destinations
+ * as 44 px rows with icon and label, the open one in the action colour. A press shows the item's page frame at once,
+ * as on a tab, and the row of a loading page pulses.
+ */
+declare function MobileShellSidebar(props: MobileShellSidebarProps): JSX.Element;
 /**
- * The full-screen frame of a phone app: a header, one scroll area, and an optional footer such as a `TabBar`. While
- * it is mounted, the document itself never scrolls, pinch zoom and rubber-banding are off, and the toast rail sits
- * above the footer. Mount one per page, as the page's layout.
+ * The full-screen frame of a phone app: a header, one scroll area, and an optional footer such as a `TabBar`. With a
+ * `sidebar`, a window of 48rem and wider shows the sidebar at the start edge instead of the footer, and the toast rail
+ * stays in the area beside it. While it is mounted, the document itself never scrolls, pinch zoom and rubber-banding
+ * are off, and the toast rail sits above the footer. Mount one per page, as the page's layout.
  */
 export declare const MobileShell: typeof MobileShellRoot & {
     Header: typeof MobileShellHeader;
+    Sidebar: typeof MobileShellSidebar;
 };
 export default MobileShell;

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

@@ -3,6 +3,8 @@ import { type ButtonVariant } from "../actions/Button";
 import type { MaybeAccessor } from "../inputs/field-contract";
 export type SettingsPageProps = {
     title: JSX.Element;
+    /** False when a surrounding head already shows the title, such as a workspace level; the actions move to the footer. */
+    header?: boolean;
     subtitle?: JSX.Element;
     icon?: string;
     actions?: JSX.Element;
@@ -69,4 +71,24 @@ export type SettingsSaveBarProps = {
 export declare function SettingsSaveBar(props: SettingsSaveBarProps): JSX.Element;
 export type SettingsPanelFooterProps = SettingsSaveBarProps;
 export declare function SettingsPanelFooter(props: SettingsPanelFooterProps): JSX.Element;
+export type SaveStatusState = "saved" | "draft" | "saving" | "failed" | "invalid" | "unknown" | "readonly";
+export type SaveStatusProps = {
+    /** What the person's values are now: saved, a draft with changes, being saved, or a problem that kept them unsaved. */
+    state: MaybeAccessor<SaveStatusState>;
+    /** Formatted time of the last save, shown with `saved`. */
+    savedAt?: MaybeAccessor<string | undefined>;
+    /** Fields to check, shown with `invalid`. Default 1. */
+    invalidCount?: MaybeAccessor<number>;
+    /** With both handlers, Discard and Save follow the status while there is something to save. */
+    onDiscard?: () => void;
+    onSave?: () => void;
+    saveLabel?: string;
+    saveDisabled?: MaybeAccessor<boolean>;
+    class?: string;
+};
+/**
+ * The save status of a settings form at one fixed place, usually the head of its column. It reserves its width, so
+ * a change of state never moves the title or the buttons beside it. Problems with one field stay at that field.
+ */
+export declare function SaveStatus(props: SaveStatusProps): JSX.Element;
 export {};

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

@@ -0,0 +1,26 @@
+import { type JSX } from "solid-js";
+/**
+ * True while `element` sits in the collapsed sidebar rail, which shows icons
+ * without labels. The stylesheet sets `--k2b-sidebar-rail` exactly where it
+ * collapses the sidebar, so this follows the same container width and state.
+ */
+export declare const inSidebarRail: (element: Element | undefined) => boolean;
+/**
+ * A sidebar entry's name, or its `title`, in the hint the Cloud app rail uses.
+ * In the collapsed rail it names the icon beside it at once. Elsewhere it
+ * shows above the entry with the usual delay, and only when it says more than
+ * the visible label: a label cut off, or a title with details. A native
+ * `title` on `target` gives way to it, so no hint shows twice.
+ */
+export declare function SidebarRailHint(props: {
+    target: () => HTMLElement | undefined;
+    label: string | undefined;
+    /** The element that holds keyboard focus for the entry, when that is not `target`. */
+    focusTarget?: () => HTMLElement | undefined;
+    /** The visible label text inside `target`. */
+    labelSelector: string;
+    /** The entry renders a native `title`, which the hint replaces from the first hover or focus. */
+    titled?: boolean;
+    /** Called once the hint takes over; the entry stops rendering its native `title`. */
+    onArm?: () => void;
+}): JSX.Element;

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

@@ -9,6 +9,11 @@ export type TabBarItem = {
     title?: string;
     /** The page this item leads to is open. */
     current?: boolean;
+    /**
+     * A mark at the icon's corner that calls for attention, such as an unread count. Its element names the count for
+     * screen readers; an empty one takes no space.
+     */
+    badge?: JSX.Element;
 };
 export type TabBarProps = {
     /** Accessible name of the navigation landmark. */

package/dist/types/layout/detail-panel-messages.d.ts

@@ -8,6 +8,7 @@ declare const detailPanelMessages: import("@k2b/stdlib").Catalog<{
         count: number;
     }) => string;
     showLess: string;
+    moreActions: string;
 }>;
 export type DetailPanelMessages = ReturnType<(typeof detailPanelMessages)["resolve"]>["t"];
 export declare const useDetailPanelMessages: () => (() => DetailPanelMessages);

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

@@ -1,3 +1,4 @@
+export { AnchoredPopover, type AnchoredPopoverProps } from "./AnchoredPopover";
 export type { AppOverviewCardsProps, AppOverviewEmptyStateProps, AppOverviewPanelProps, AppOverviewProps, } from "./AppOverview";
 export { default as AppOverview } from "./AppOverview";
 export type { AppWorkspaceBottomDrawerHeight, AppWorkspaceBottomDrawerProps, AppWorkspaceContentProps, AppWorkspaceDetailProps, AppWorkspaceDetailWidth, AppWorkspaceHeadProps, AppWorkspaceMainPaneProps, AppWorkspaceMainProps, AppWorkspaceNavTreeItemProps, AppWorkspaceNavTreeMove, AppWorkspaceNavTreeProps, AppWorkspaceProps, AppWorkspaceSidebarAccessoryVisibility, AppWorkspaceSidebarBodyProps, AppWorkspaceSidebarIconActionProps, AppWorkspaceSidebarIconActionTone, AppWorkspaceSidebarIconGridProps, AppWorkspaceSidebarItemActionProps, AppWorkspaceSidebarItemActionsProps, AppWorkspaceSidebarItemIconProps, AppWorkspaceSidebarItemLabelProps, AppWorkspaceSidebarItemMetaProps, AppWorkspaceSidebarItemProps, AppWorkspaceSidebarItemStatusProps, AppWorkspaceSidebarItemTone, AppWorkspaceSidebarProps, AppWorkspaceSidebarSectionProps, AppWorkspaceSidebarVisibility, AppWorkspaceWidthShare, } from "./AppWorkspace";
@@ -16,7 +17,7 @@ export type { DiscussionComposerProps, DiscussionItemProps, DiscussionListProps,
 export { default as Discussion } from "./Discussion";
 export type { FloatingWindowClose, FloatingWindowProps, OpenFloatingWindowOptions, } from "./FloatingWindow";
 export { default as FloatingWindow, type FloatingWindowRect, fitFloatingWindowRect, openFloatingWindow, } from "./FloatingWindow";
-export type { MobileShellHeaderProps, MobileShellProps } from "./MobileShell";
+export type { MobileShellHeaderProps, MobileShellProps, MobileShellSidebarItem, MobileShellSidebarProps } from "./MobileShell";
 export { default as MobileShell, observeMobileShell } from "./MobileShell";
 export { default as Navigation, type NavigationProps } from "./Navigation";
 export { createNavigation, findNavigationItem, type NavigationController, type NavigationItem, type NavigationOptions, type NavigationStatus, } from "./navigation-model";
@@ -37,13 +38,14 @@ export { default as ResizeSeparator, type ResizeSeparatorProps } from "./ResizeS
 export { attachResizeSeparator, type ResizeSeparatorOptions } from "./resize-separator";
 export type { ScrollAreaProps } from "./ScrollArea";
 export { default as ScrollArea } from "./ScrollArea";
-export type { SettingsFieldControlProps, SettingsFieldProps, SettingsGroupActionProps, SettingsGroupProps, SettingsPageProps, SettingsPanelFooterProps, SettingsSaveBarProps, SettingsSectionProps, } from "./Settings";
-export { readSettingsError, SettingsField, SettingsGroup, SettingsPage, SettingsPanelFooter, SettingsSaveBar, SettingsSection, sameSettingValue, } from "./Settings";
+export type { SaveStatusProps, SaveStatusState, SettingsFieldControlProps, SettingsFieldProps, SettingsGroupActionProps, SettingsGroupProps, SettingsPageProps, SettingsPanelFooterProps, SettingsSaveBarProps, SettingsSectionProps, } from "./Settings";
+export { readSettingsError, SaveStatus, SettingsField, SettingsGroup, SettingsPage, SettingsPanelFooter, SettingsSaveBar, SettingsSection, sameSettingValue, } from "./Settings";
 export type { SettingsCollectionActionProps, SettingsCollectionItemActionsProps, SettingsCollectionItemProps, SettingsCollectionItemReorderProps, SettingsCollectionItemStatusProps, SettingsCollectionProps, } from "./SettingsCollection";
 export { default as SettingsCollection } from "./SettingsCollection";
 export type { SettingsModalFooterProps, SettingsModalGroupProps, SettingsModalProps, SettingsModalTabProps, SettingsModalTabTone, } from "./SettingsModal";
 export { default as SettingsModal } from "./SettingsModal";
 export { APP_WORKSPACE_SWITCHER_SEARCH_FROM, type AppWorkspaceSidebarSwitcherProps, type AppWorkspaceSwitcherAction, type AppWorkspaceSwitcherOption, } from "./SidebarSwitcher";
+export { measureScrollFade } from "./scroll-fade";
 export type { TabBarItem, TabBarProps } from "./TabBar";
 export { default as TabBar } from "./TabBar";
 export type { TableOfContentsItem, TableOfContentsProps } from "./TableOfContents";

package/dist/types/layout/scroll-fade.d.ts

@@ -1,5 +1,10 @@
 /** Self-contained because the sidebar inline script embeds its source. */
 export declare function scrollFadeEdges(body: HTMLElement): "top" | "bottom" | "both" | undefined;
+/**
+ * Measures an observed scrollport's fades now instead of at the end of the frame. Call it before reading the fades in
+ * the same frame as a change of the scrollport's content, as an editor does when it keeps its cursor clear of them.
+ */
+export declare function measureScrollFade(element: HTMLElement): void;
 export declare function createScrollFade(element: () => HTMLElement | undefined, enabled: () => boolean): void;
 /** Enrich only explicitly marked UI scrollports, including SSR and later navigation. */
 export declare function installScrollFades(root: Document | HTMLElement): () => void;

package/dist/types/layout/settings-messages.d.ts

@@ -11,12 +11,24 @@ declare const settingsMessages: import("@k2b/stdlib").Catalog<{
         label: string;
     }) => string;
     saveChanges: string;
+    save: string;
     saving: string;
     unsaved: string;
     unsavedChangeLabel: ({ count }: {
         count: number;
     }) => string;
     noUnsavedChanges: string;
+    statusSaved: string;
+    statusSavedAt: ({ time }: {
+        time: string;
+    }) => string;
+    statusDraft: string;
+    statusFailed: string;
+    statusInvalid: ({ count }: {
+        count: number;
+    }) => string;
+    statusUnknown: string;
+    statusReadOnly: string;
 }>;
 export type SettingsMessages = ReturnType<(typeof settingsMessages)["resolve"]>["t"];
 /** Resolved from the inherited render locale. */

package/dist/types/surfaces/DotStrip.d.ts

@@ -0,0 +1,22 @@
+import { type JSX } from "solid-js";
+/** `accent` = the app colour (it worked), `ai` = came from AI, `muted` = nothing happened. */
+export type DotStripTone = "accent" | "warning" | "danger" | "ai" | "muted";
+export type DotStripProps = {
+    /** Outcomes in order, left to right. */
+    dots: readonly DotStripTone[];
+    /** Total slots. Slots after `dots` show as empty rings, so a growing strip keeps its size. Defaults to `dots.length`. */
+    length?: number;
+    /** Shows every slot as a quiet placeholder, for "nothing checked yet". */
+    waiting?: boolean;
+    /** Index of the dot that belongs to the item shown next to the strip. */
+    selected?: number | null;
+    size?: "md" | "lg";
+    /** Dots per row; more wrap into further rows of the same width. Defaults to one row. */
+    columns?: number;
+    /** Names the strip and its counts, for example "Last 50 mails: 17 matched, 6 skipped, 27 not". */
+    label: string;
+    class?: string;
+};
+/** A fixed-size row of outcome dots: the last runs, checks or mails at a glance. */
+export declare function DotStrip(props: DotStripProps): JSX.Element;
+export default DotStrip;

package/dist/types/surfaces/NoticeCard.d.ts

@@ -14,11 +14,14 @@ type NoticeCardContentProps = {
 };
 export type NoticeCardProps = Omit<JSX.HTMLAttributes<HTMLElement>, "children" | "class" | "title"> & NoticeCardContentProps & {
     tone?: NoticeTone;
+    /** A Tabler icon class. Turns the notice into a compact status line whose icon and text take the tone colour. */
+    icon?: string;
     class?: string;
     bodyClass?: string;
 };
 export declare const NOTICE_CARD_CLASSES: {
     readonly root: "k2b-notice-card";
+    readonly icon: "k2b-notice-card__icon";
     readonly content: "k2b-notice-card__content";
     readonly head: "k2b-notice-card__head";
     readonly title: "k2b-notice-card__title";

package/dist/types/surfaces/ProgressRing.d.ts

@@ -1,6 +1,7 @@
 import { type JSX } from "solid-js";
 import type { IntentTone } from "../semantics";
-export type ProgressRingTone = Extract<IntentTone, "info" | "warning" | "danger">;
+/** `accent` draws the ring in the app's own colour, for progress that belongs to the app rather than to a state. */
+export type ProgressRingTone = Extract<IntentTone, "info" | "warning" | "danger"> | "accent";
 export type ProgressRingProps = {
     value: number;
     tone?: ProgressRingTone;