@k2b/ui 0.30.0 → 0.32.0

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

@@ -92,14 +92,16 @@ export type ChartProps = {
         /** Target when zooming in from the world view. Defaults to Europe (50, 10). */
         zoomFocus?: Pick<MapViewport, "latitude" | "longitude">;
     } : {}) & (K extends "line" ? {
-        maxGap?: number;
+        /** 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">);
 }[ChartKind];
 /** Pure renderer options: component layout, events and inspection are configured elsewhere. */
 export type ChartRenderOptions = {
     [K in ChartKind]: Omit<Extract<ChartProps, {
         kind: K;
-    }>, "class" | "style" | "labels" | "interactive" | "onSelect" | "selected" | "tooltip" | "cursor">;
+    }>, "class" | "style" | "labels" | "interactive" | "onSelect" | "selected" | "tooltip" | "cursor" | "legendPlacement">;
 }[ChartKind];
 /** Keep the fixed 28-unit bar-gauge rows inside the shared SSR/browser coordinate space. */
 export declare const chartRenderHeight: (props: ChartRenderOptions) => number;

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

@@ -10,7 +10,6 @@ export type ChartExplorerColumn<T> = {
     render?: (row: T) => JSX.Element;
     /**
      * Explicit comparable value. Omit to leave the column unsortable.
-     * Returning a number also exempts the cell from spreadsheet formula guarding on copy.
      */
     sortValue?: (row: T) => string | number | null;
     align?: "left" | "center" | "right";

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

@@ -0,0 +1,6 @@
+import { type JSX } from "solid-js";
+/**
+ * The required credits for maps built with `mapStyle()`, each one a link, for MapView's `attribution` slot.
+ * @example <MapView style={style} attribution={<MapAttribution />} height={320} />
+ */
+export declare function MapAttribution(): JSX.Element;

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

@@ -0,0 +1,5 @@
+import { type JSX } from "solid-js";
+import type { MapViewProps } from "./map-view-types";
+export type { MapViewProps } from "./map-view-types";
+/** A static server frame enhanced with a same-origin MapLibre worker only after it enters the viewport. */
+export declare function MapView(props: MapViewProps): JSX.Element;

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

@@ -0,0 +1,31 @@
+import { type JSX } from "solid-js";
+import { type MapFrame } from "./map-view-geometry";
+import type { MapViewFrameProps, MapViewMarker } from "./map-view-types";
+export type { MapViewFrameProps } from "./map-view-types";
+export declare const mapNumber: (value: number) => string;
+export declare const selectedMarker: (markers: MapViewMarker[], selectedId?: string) => MapViewMarker | undefined;
+export declare function frameStyle(frame: MapFrame, padding: number): JSX.CSSProperties;
+export declare function MapGeometry(props: MapViewFrameProps & {
+    frame: MapFrame;
+    boxStyle?: JSX.CSSProperties;
+    onSelect?: (id: string) => void;
+    /** Pins are buttons in MapView; the standalone frame draws them as labelled images, never focusable. */
+    interactive?: boolean;
+    /** 2^(live zoom - fitted zoom), so pin separation follows the person's zoom; 1 until then. */
+    zoomFactor?: number;
+}): JSX.Element;
+export type MapScale = {
+    label: string;
+    width: string;
+};
+export declare function referenceScale(frame: MapFrame, padding: number): MapScale;
+export declare function MapScaleBar(props: {
+    scale: MapScale;
+}): JSX.Element;
+/** The scale bar and the attribution share the bottom row, so a long attribution wraps before it covers the scale. */
+export declare function MapFootRow(props: {
+    scale?: MapScale;
+    children?: JSX.Element;
+}): JSX.Element;
+/** Geometry without a browser, a canvas, or a network dependency; suitable for server rendering and PDF output. */
+export declare function MapViewFrame(props: MapViewFrameProps): JSX.Element;

package/dist/types/content/code-highlight.d.ts

@@ -6,9 +6,11 @@
  * in token spans, so the returned strings are safe to inject with
  * `innerHTML`.
  */
-export type CodeDisplayLanguage = "ts" | "tsx" | "js" | "jsx" | "script" | "markdown" | "md" | "text";
+export type CodeDisplayLanguage = "ts" | "tsx" | "js" | "jsx" | "script" | "markdown" | "md" | "text" | "sql";
 export declare const escapeCodeHtml: (s: string) => string;
 export declare const highlightCode: (code: string) => string;
 export declare const highlightMarkdownDisplay: (code: string) => string;
 export declare const highlightCodeDisplayLines: (code: string, language?: CodeDisplayLanguage) => string[];
 export declare const highlightCodeDisplay: (code: string, language?: CodeDisplayLanguage) => string;
+/** Display-only, tolerant of incomplete SQL while typing. Source is always escaped. */
+export declare const highlightSql: (code: string) => string;

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

@@ -17,6 +17,7 @@ export type { ChartDatumRef, ChartSelection, ChartTooltip, ChartTooltipFormatter
 export type { ChartSnapshot } from "./chart-snapshot";
 export { prepareChartSnapshot } from "./chart-snapshot";
 export type { StateTimelineChartOptions, StateTimelineDomain, StateTimelineInterval, StateTimelineRow, StateTimelineState, } from "./chart-state-timeline";
+export { highlightSql } from "./code-highlight";
 export { type CollectionSelection, createCollectionSelection, type SelectionModifiers } from "./collection-selection";
 export type { DataTableColumn, DataTableControlsProps, DataTableFooter, DataTableHeaderProps, DataTablePanelFooterProps, DataTablePanelProps, DataTableProps, DataTableRenderCell, DataTableRenderHeader, DataTableSort, } from "./DataTable";
 export { default as DataTable } from "./DataTable";
@@ -35,9 +36,15 @@ export type { LightboxAction, LightboxImage } from "./Lightbox";
 export { default as Lightbox } from "./Lightbox";
 export type { LogTableEntry } from "./LogEntriesTable";
 export { default as LogEntriesTable } from "./LogEntriesTable";
+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 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";
 export { MARKDOWN_CALLOUT_CLASSES, MARKDOWN_CALLOUT_ICON_ATTRIBUTES, type MarkdownInfoBlock, type MarkdownInfoBlockRenderInput, type MarkdownInfoBlockType, markdownInfoBlocks, renderMarkdownInfoBlock, scanMarkdownInfoBlock, } from "./markdown-info-blocks";
 export { type MarkdownLinkInput, type MarkdownReference, type MarkdownReferenceKind, type MarkdownReferenceType, markdownLinkReference, markdownReferenceIcon, markdownReferenceType, markdownReferenceTypeLabel, markStandaloneLinks, renderMarkdownLink, } from "./markdown-links";
 export { Pagination, type PaginationProps } from "./Pagination";

package/dist/types/content/map-palette.d.ts

@@ -0,0 +1,58 @@
+/** The map image colours. Each key is also the CSS token `--k2b-map-<kebab-key>` on `.k2b-map-view`. */
+export type MapPaletteColors = {
+    /** Background land, also behind the server frame before the map image arrives. */
+    land: string;
+    /** Woods, grass, and city green; large protected areas stay plain land. */
+    green: string;
+    water: string;
+    building: string;
+    road: string;
+    roadCasing: string;
+    motorway: string;
+    motorwayCasing: string;
+    /** Rail lines and footpaths. */
+    rail: string;
+    boundary: string;
+    /** Streets, suburbs, villages, and states. */
+    label: string;
+    /** Cities, towns, and countries. */
+    labelStrong: string;
+    waterLabel: string;
+};
+export type MapTheme = "light" | "dark";
+/**
+ * Plain data so a server can build the style JSON without CSS. The accent stays with the host's
+ * pins and lines; the map image only uses calm land, water, green, and road tones.
+ */
+export declare const mapPalette: {
+    readonly light: {
+        readonly land: "#f1efe9";
+        readonly green: "#e3ecd9";
+        readonly water: "#cfe3f3";
+        readonly building: "#e8e5dd";
+        readonly road: "#ffffff";
+        readonly roadCasing: "#dcd8ce";
+        readonly motorway: "#f6c76b";
+        readonly motorwayCasing: "#d9a443";
+        readonly rail: "#c4bfb4";
+        readonly boundary: "#aea89c";
+        readonly label: "#52525b";
+        readonly labelStrong: "#27272a";
+        readonly waterLabel: "#3a6383";
+    };
+    readonly dark: {
+        readonly land: "#1a1f26";
+        readonly green: "#1c2a22";
+        readonly water: "#14283a";
+        readonly building: "#20262e";
+        readonly road: "#2c333d";
+        readonly roadCasing: "#222830";
+        readonly motorway: "#5d6470";
+        readonly motorwayCasing: "#444a54";
+        readonly rail: "#39404a";
+        readonly boundary: "#4f5763";
+        readonly label: "#a1a1aa";
+        readonly labelStrong: "#e4e4e7";
+        readonly waterLabel: "#8fb5d3";
+    };
+};

package/dist/types/content/map-style.d.ts

@@ -0,0 +1,29 @@
+import type { StyleSpecification } from "maplibre-gl";
+import { type MapTheme } from "./map-palette";
+export type MapStyleOptions = {
+    theme: MapTheme;
+    /** Request locale such as `de` or `de-DE`; labels prefer `name:<language>`. */
+    locale: string;
+    /** Vector tile template with `{z}`, `{x}`, and `{y}`, for example `/_geo/tiles/{z}/{x}/{y}.pbf`. */
+    tiles: string;
+    /** Glyph template with `{fontstack}` and `{range}`, served from `@k2b/ui/map-glyphs/*`. */
+    glyphs: string;
+    /** Highest zoom the tiles carry; the map scales the last level up beyond it. Defaults to 14. */
+    maxzoom?: number;
+};
+/** Attribution for OpenMapTiles-schema maps with OpenStreetMap data from Geoapify, in display order. */
+export declare const mapAttribution: readonly [{
+    readonly label: "© OpenStreetMap";
+    readonly href: "https://www.openstreetmap.org/copyright";
+}, {
+    readonly label: "© OpenMapTiles";
+    readonly href: "https://openmaptiles.org/";
+}, {
+    readonly label: "Geoapify";
+    readonly href: "https://www.geoapify.com/";
+}];
+/**
+ * A flat Cloud map style for OpenMapTiles-schema vector tiles. The host passes the tile and glyph
+ * templates; there are no network defaults, sprites, extrusions, or relief.
+ */
+export declare function mapStyle(options: MapStyleOptions): StyleSpecification;

package/dist/types/content/map-view-geometry.d.ts

@@ -0,0 +1,55 @@
+import type { MapViewFrameProps, MapViewLine, MapViewMarker, MapViewPoint } from "./map-view-types";
+export declare const MIN_SPAN: number;
+export declare const EARTH_CIRCUMFERENCE = 40075016.686;
+/** Room around the fitted geometry: clears the floating controls, the notice, the scale bar and the attribution. */
+export declare const DEFAULT_PADDING = 64;
+/**
+ * `referenceWidth` is the fitted width when the container is wide enough; `minWidth` keeps the whole world at least as
+ * tall as the map, the smallest zoom MapLibre allows, so a world-scale fit lands where MapLibre puts it.
+ */
+export type MapFrame = {
+    minX: number;
+    minY: number;
+    spanX: number;
+    spanY: number;
+    aspect: number;
+    referenceWidth: number;
+    minWidth: number;
+    /** The fitted width on a 320 px phone: pins are kept apart from this scale up, so they never cover each other there. */
+    overlapWidth: number;
+};
+export declare function decodePolyline6(encoded: string): MapViewPoint[];
+export declare const linePoints: (line: MapViewLine) => MapViewPoint[];
+export declare function projectPoint(point: MapViewPoint): {
+    x: number;
+    y: number;
+};
+export declare function unprojectPoint(x: number, y: number): MapViewPoint;
+export declare function mapFrame(geometry: Pick<MapViewFrameProps, "markers" | "lines" | "areas" | "ownLocation" | "fit">, height: number, padding?: number): MapFrame | null;
+export declare function fitCamera(frame: MapFrame, width: number, padding?: number): {
+    center: [number, number];
+    zoom: number;
+};
+export declare const isStop: (marker: MapViewMarker) => boolean;
+export declare function sortMarkers(markers: MapViewMarker[]): MapViewMarker[];
+type PinOffset = {
+    dx: number;
+    dy: number;
+};
+/**
+ * Pin offsets in px, decided from the data alone: at the phone fit and checked for every wider fit up to the widest
+ * one, so they hold at any width. `zoomFactor` is 2^(live zoom - fitted zoom): 1 for the server frame, the first client
+ * frame and the untouched live map, so all three agree; when the person zooms, separation is decided for the new scale.
+ */
+export declare function pinOffsets(sortedMarkers: MapViewMarker[], frame: MapFrame, zoomFactor?: number, ownLocation?: MapViewPoint): Map<string, PinOffset>;
+/**
+ * The touch hit radius of each pin in px: up to 22 px (a 44 px target), but never into a neighbour's visible mark
+ * (radius up to 14 px) at any width, so a tap on a visible pin always reaches it.
+ */
+export declare function pinHitRadii(sortedMarkers: MapViewMarker[], frame: MapFrame, offsets: Map<string, PinOffset>, zoomFactor?: number): Map<string, number>;
+export declare const metersPerPixel: (lat: number, zoom: number) => number;
+export declare function scaleBar(mpp: number, maxPx?: number): {
+    meters: number;
+    label: string;
+};
+export {};

package/dist/types/content/map-view-live.d.ts

@@ -0,0 +1,2 @@
+import { Map, type MapOptions } from "maplibre-gl";
+export declare function createMap(options: MapOptions, onResourceError: () => void): Map;

package/dist/types/content/map-view-messages.d.ts

@@ -0,0 +1,21 @@
+export declare const useMapViewMessages: () => () => {
+    mapLabel: string;
+    summary: ({ count }: {
+        count: number;
+    }) => string;
+    pins: string;
+    zoomIn: string;
+    zoomOut: string;
+    locate: string;
+    loading: string;
+    error: string;
+    retry: string;
+    reload: string;
+    noWebgl: string;
+    ownLocation: string;
+    canvasTitle: string;
+    gestureWindows: string;
+    gestureMac: string;
+    gestureMobile: string;
+};
+export declare const checkMapViewMessages: () => import("@k2b/stdlib").CatalogIssue[];

package/dist/types/content/map-view-types.d.ts

@@ -0,0 +1,63 @@
+import type { StyleSpecification } from "maplibre-gl";
+import type { JSX } from "solid-js";
+export type MapViewPoint = {
+    lat: number;
+    lon: number;
+};
+export type MapViewTone = "accent" | "second" | "neutral" | "warning";
+export type MapViewMarker = {
+    id: string;
+    point: MapViewPoint;
+    /** A number, a single letter, or "+". Omit for a drop pin. */
+    mark?: number | string;
+    label: string;
+    tone?: MapViewTone;
+    selected?: boolean;
+};
+export type MapViewLineTone = "accent" | "muted" | "preview" | "previous";
+export type MapViewLine = {
+    id: string;
+    tone?: MapViewLineTone;
+} & ({
+    polyline6: string;
+} | {
+    points: MapViewPoint[];
+});
+export type MapViewArea = {
+    id: string;
+    polygon: MapViewPoint[];
+    tone?: MapViewTone;
+};
+export type MapViewOwnLocation = {
+    point: MapViewPoint;
+    accuracyMeters?: number;
+};
+export type MapViewStyle = string | StyleSpecification;
+export type MapViewStyleSource = MapViewStyle | {
+    light: MapViewStyle;
+    dark: MapViewStyle;
+};
+export type MapViewFit = "all" | "markers";
+export type MapViewFrameProps = {
+    markers?: MapViewMarker[];
+    lines?: MapViewLine[];
+    areas?: MapViewArea[];
+    ownLocation?: MapViewOwnLocation;
+    height: number;
+    padding?: number;
+    fit?: MapViewFit;
+    selectedId?: string;
+    attribution?: JSX.Element;
+    class?: string;
+};
+export type MapViewProps = Omit<MapViewFrameProps, "attribution"> & {
+    style: MapViewStyleSource;
+    attribution: JSX.Element;
+    onSelect?: (id: string) => void;
+    infoTile?: (marker: MapViewMarker) => JSX.Element;
+    notice?: JSX.Element;
+    empty?: JSX.Element;
+    onLocate?: () => void;
+    /** Observe rendering and resource failures without receiving provider responses or URLs. */
+    onStateChange?: (state: "static" | "loading" | "ready" | "error" | "no-webgl" | "empty") => void;
+};

package/dist/types/feedback/dialog-core.d.ts

@@ -15,6 +15,7 @@ export type OpenDialogOptions = {
      * Without it, only the synthetic Back on close is suppressed.
      * Island disposal closes every open dialog immediately and forgets its marker without traversing history.
      * The same-URL entry remains for the router to replace and counts as a page entry for later dialogs.
+     * A traversal that `@k2b/ssr/nav` hides from popstate listeners reaches this core through `ssr:nav-popstate`.
      */
     history?: boolean;
 };

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

@@ -14,7 +14,12 @@ export type AutocompleteEditorProps = ValueFieldProps<string> & {
     name?: string;
     maxLength?: number;
     textareaRef?: (element: HTMLTextAreaElement) => void;
-    variant?: "default" | "paper";
+    variant?: "default" | "paper" | "embedded";
+    readOnly?: boolean;
+    /** Number logical lines; disables soft wrapping to keep the gutter aligned. */
+    lineNumbers?: boolean;
+    /** One-based line to mark in the gutter, for example a parser error. */
+    markedLine?: number;
 };
 export declare function AutocompleteEditor(props: AutocompleteEditorProps): JSX.Element;
 export type { Completion, SuggestContext, Suggestion } from "./completion";

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

@@ -0,0 +1,93 @@
+import { type JSX } from "solid-js";
+import type { ValueFieldProps } from "./field-contract";
+import type { ChoiceAppearance } from "./Select";
+/** One option: a name plus at most one short line. */
+export type RichSelectItem = {
+    value: string;
+    /** Wraps; never truncated. */
+    label: string;
+    /** At most one short line that says what the choice changes. */
+    description?: string;
+    /** Icon class shown before the name. */
+    icon?: string;
+    /** Color dot shown before the name, such as a space color. Replaces `icon`. */
+    color?: string;
+    /** Creates a fresh visual for each render location. Replaces `icon` and `color`. */
+    visual?: () => JSX.Element;
+    /** Makes the row unavailable. The reason replaces `description`; the arrow keys still reach the row. */
+    disabledReason?: string;
+    /** Section id. Headings show only from eight options; keep each section's items together. */
+    section?: string;
+    /** Extra search terms that are not shown. */
+    keywords?: readonly string[];
+};
+export type RichSelectSection = {
+    id: string;
+    label: string;
+};
+export type RichSelectStatus = "ready" | "loading" | "error";
+export type RichSelectFooter = {
+    label: string;
+    icon?: string;
+    onActivate: () => void;
+} | {
+    label: string;
+    icon?: string;
+    create: {
+        placeholder: string;
+        onCreate: (name: string) => void;
+    };
+};
+export type RichSelectFact = {
+    icon: string;
+    text: JSX.Element;
+    tone?: "default" | "warning";
+};
+export type RichSelectProps = ValueFieldProps<string | null> & {
+    items: readonly RichSelectItem[];
+    /** Labels for the `section` ids of the items. */
+    sections?: readonly RichSelectSection[];
+    /** Names the list: the heading of a list without preview, the phone sheet title, and the listbox label. */
+    title?: string;
+    placeholder?: string;
+    /** Replaces the selected item's name in the trigger, such as "Name · address". */
+    triggerLabel?: string;
+    /** Icon class for the trigger while no item with its own visual is selected. */
+    icon?: string;
+    tone?: "default" | "warning";
+    /** Custom content inside the shared trigger button, which keeps the combobox semantics. */
+    renderTrigger?: (selected: RichSelectItem | undefined) => JSX.Element;
+    /**
+     * The body of the preview beside the list, for options whose consequences differ.
+     * Without it the picker shows only the list. Keep it to at most three facts.
+     */
+    renderPreview?: (item: RichSelectItem) => JSX.Element;
+    searchPlaceholder?: string;
+    status?: RichSelectStatus;
+    onRetry?: () => void;
+    /** Shown when the list is ready and has no items. */
+    empty?: JSX.Element;
+    footer?: RichSelectFooter;
+    appearance?: ChoiceAppearance;
+    placement?: "bottom-start" | "top-start";
+    /** CSS lengths for the desktop popover. */
+    size?: {
+        width?: string;
+        height?: string;
+    };
+    name?: string;
+};
+/** Search and section headings appear from this many options. */
+export declare const RICH_SELECT_SEARCH_FROM = 8;
+/** Up to three short facts for a preview, each with an icon; warnings in the warning tone. */
+export declare function RichSelectFacts(props: {
+    facts: readonly RichSelectFact[];
+}): JSX.Element;
+/**
+ * A dropdown whose rows explain each choice: a name plus one short line, an
+ * unavailable row with its reason, and an optional preview of what a choice
+ * changes. Desktop opens a popover beside the trigger; a phone opens a bottom
+ * sheet whose info buttons show the preview as a second level.
+ */
+export declare function RichSelect(props: RichSelectProps): JSX.Element;
+export default RichSelect;

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

@@ -5,9 +5,12 @@ export type TextInputProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "on
     minLength?: number;
     maxLength?: number;
     type?: "text" | "search" | "email" | "url" | "tel";
-    variant?: "default" | "ai";
-    icon?: string;
+    variant?: "default" | "ai" | "compact";
+    /** Set false for a plain field without a leading icon. */
+    icon?: string | false;
     activeIcon?: string;
+    /** ID of a consumer-owned visible error; caller owns its announcement. Native controls only. */
+    externalErrorId?: string;
     prefix?: JSX.Element;
     suffix?: JSX.Element;
     clearable?: boolean;

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

@@ -10,8 +10,19 @@ export type ChoiceOption<T extends string = string> = {
     groups?: readonly string[];
 };
 export type ChoiceOptionsLoader<T extends string = string> = (query: string, signal: AbortSignal) => Promise<readonly ChoiceOption<T>[]>;
-export declare const filterChoiceOptions: <T extends string>(options: readonly ChoiceOption<T>[], query: string) => readonly ChoiceOption<T>[];
-export declare const nextEnabledChoiceIndex: <T extends string>(options: readonly ChoiceOption<T>[], current: number, direction: 1 | -1) => number;
+/** Matches label, description, value, and optional extra keywords. */
+export declare const filterChoiceOptions: <O extends Pick<ChoiceOption<string>, "label" | "description" | "value"> & {
+    keywords?: readonly string[];
+}>(options: readonly O[], query: string) => readonly O[];
+/**
+ * Moves through the options and wraps at the ends, skipping `disabled` ones. A
+ * RichSelect row that cannot be chosen carries a `disabledReason` instead, so
+ * the arrow keys still reach it and its reason can be read.
+ */
+export declare const nextEnabledChoiceIndex: <O extends {
+    label: string;
+    disabled?: boolean;
+}>(options: readonly O[], current: number, direction: 1 | -1) => number;
 /**
  * Counts the leading pills that fit into `available` pixels and measures the
  * whole row. When not all of them fit, the rest collapse into a summary pill
@@ -32,8 +43,17 @@ export declare function createChoiceLoader<T extends string>(loader: () => Choic
     retry: () => void;
     cancel: () => void;
 };
-export declare const placeChoicePopover: (trigger: HTMLElement, popover: HTMLElement) => void;
-export declare function createChoicePopover(disabled: () => boolean): {
+export type ChoicePopoverPlacement = {
+    /**
+     * `trigger` (default) gives the popover the trigger's width; `own` keeps the
+     * width its stylesheet sets, such as a RichSelect with a preview.
+     */
+    width?: "trigger" | "own";
+    /** The side tried first. The popover flips when the other side has more room. */
+    side?: "below" | "above";
+};
+export declare const placeChoicePopover: (trigger: HTMLElement, popover: HTMLElement, placement?: ChoicePopoverPlacement) => void;
+export declare function createChoicePopover(disabled: () => boolean, placement?: () => ChoicePopoverPlacement): {
     open: () => boolean;
     setTrigger: Setter<HTMLElement | undefined>;
     setPopover: Setter<HTMLElement | undefined>;

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

@@ -37,6 +37,8 @@ export type { NumberInputProps } from "./NumberInput";
 export { NumberInput } from "./NumberInput";
 export type { QrScannerError, QrScannerProps } from "./QrScanner";
 export { QrScanner } from "./QrScanner";
+export type { RichSelectFact, RichSelectFooter, RichSelectItem, RichSelectProps, RichSelectSection, RichSelectStatus, } from "./RichSelect";
+export { RichSelect, RichSelectFacts } from "./RichSelect";
 export type { ChoiceAppearance, SelectGridSize, SelectGroup, SelectOption, SelectProps, SelectSourceOption, SelectView } from "./Select";
 export { Select } from "./Select";
 export type { SelectChipOption, SelectChipProps } from "./SelectChip";

package/dist/types/inputs/rich-select-messages.d.ts

@@ -0,0 +1,21 @@
+declare const richSelectMessages: import("@k2b/stdlib").Catalog<{
+    back: string;
+    choose: string;
+    chooseOption: string;
+    close: string;
+    couldNotLoad: string;
+    create: string;
+    detailsFor: ({ name }: {
+        name: string;
+    }) => string;
+    loading: string;
+    noOptions: string;
+    noResults: string;
+    retry: string;
+    search: string;
+}>;
+export type RichSelectMessages = ReturnType<(typeof richSelectMessages)["resolve"]>["t"];
+/** Resolved from the inherited render locale. */
+export declare const useRichSelectMessages: () => (() => RichSelectMessages);
+export declare const checkRichSelectMessages: () => import("@k2b/stdlib").CatalogIssue[];
+export {};

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

@@ -1,9 +1,13 @@
 import { type LinkNavigateEvent, type NavigationScrollMode } from "@k2b/ssr/nav";
 import { type JSX } from "solid-js";
 import { type AppWorkspaceLayoutState } from "./app-workspace-state";
+import { type AppWorkspaceWidthShare } from "./app-workspace-width";
 import type { ScrollAreaProps } from "./ScrollArea";
 import { type AppWorkspaceSidebarSwitcherProps } from "./SidebarSwitcher";
+export type { AppWorkspaceWidthShare } from "./app-workspace-width";
 export type AppWorkspaceHeadProps = {
+    /** Below 48rem, show this head only with this active Main region. Unsplit Mains keep their head. */
+    mobilePane?: string;
     /** View tabs, usually a ViewTabs. */
     views?: JSX.Element;
     /** Filter chips, usually FilterChip elements. */
@@ -63,13 +67,13 @@ export type AppWorkspaceMainProps = {
     /** `"content"` centers the children as one reading column with the shared page width on large screens. */
     width?: "full" | "content";
     /**
-     * The width in px that Main keeps beside the sidebar and an open Detail,
+     * The width in px or a workspace width share that Main keeps beside the sidebar and an open Detail,
      * from 48rem (768 px); at least the default 320. A Detail that does not fit
      * beside it waits behind the head's Details button, and from 64rem of host
      * width a sidebar that does not fit becomes the overlay. CSS decides, so
      * the server renders the first frame.
      */
-    minWidth?: number;
+    minWidth?: number | AppWorkspaceWidthShare;
     mobilePane?: string;
     /** Levels in DOM order, shallowest first. The URL selects the deepest level by id. */
     level?: string;
@@ -93,7 +97,7 @@ export type AppWorkspaceMainPaneProps = {
     open?: boolean;
     resizable?: boolean;
     resizeShadow?: boolean;
-    defaultSize?: number;
+    defaultSize?: number | AppWorkspaceWidthShare;
     minSize?: number;
     maxSize?: number;
     class?: string;
@@ -105,6 +109,10 @@ export type AppWorkspaceDetailWidth = "sm" | "md" | "lg" | "xl";
 export type AppWorkspaceDetailProps = {
     children: JSX.Element;
     open: boolean;
+    /** Keeps the shared head control reachable while closed; set the app's existing open state synchronously. */
+    onOpen?: () => void;
+    /** Whether the current object may show details. False disables reopening and hides the panel. */
+    available?: boolean;
     /**
      * Whether choosing an item in Main opens this Detail as the drawer while it waits.
      * Set false when Main itself shows the chosen item, such as a reader beside a list:
@@ -122,6 +130,7 @@ export type AppWorkspaceDetailProps = {
     maxWidth?: number;
     /**
      * Closes the column with Escape, or the phone sheet with a downward drag.
+     * With onOpen, the shared head control also closes the column or phone sheet.
      * Server-rendered panels mark their close control with
      * `data-workspace-detail-close` instead; those gestures click it.
      * Escape and a rightward touch swipe park an open waiting drawer without
@@ -395,6 +404,8 @@ export type AppWorkspaceNavTreeItemProps = {
 type AppWorkspaceNavTreeComponent = ((props: AppWorkspaceNavTreeProps) => JSX.Element) & {
     Item: (props: AppWorkspaceNavTreeItemProps) => JSX.Element;
 };
+/** The Detail region's DOM id, for application controls that target it with aria-controls. */
+export declare const appWorkspaceDetailElementId: (id: string) => string;
 type AppWorkspaceComponent = ((props: AppWorkspaceProps) => JSX.Element) & {
     LayoutStateProvider: (props: AppWorkspaceLayoutStateProviderProps) => JSX.Element;
     Head: (props: AppWorkspaceHeadProps) => JSX.Element;

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

@@ -2,6 +2,8 @@ import { type JSX } from "solid-js";
 import { type ButtonLinkProps, type ButtonProps } from "../actions/Button";
 import { type DropdownItem } from "../actions/Dropdown";
 export type DetailPanelProps = {
+    /** Plain sections share their host surface, as in AppWorkspace.Detail. */
+    surface?: "default" | "plain";
     children: JSX.Element;
     class?: string;
 };

package/dist/types/layout/app-workspace-controller.d.ts

@@ -11,6 +11,8 @@ export declare const parkWorkspaceDetailDrawers: (root?: ParentNode) => void;
  * stays application state, so the controller only requests the change.
  */
 export declare const APP_WORKSPACE_SIDEBAR_HIDE_EVENT = "k2b-app-workspace-sidebar-hide";
+/** Asks the owning Detail to reopen its current available object. */
+export declare const APP_WORKSPACE_DETAIL_OPEN_EVENT = "k2b-app-workspace-detail-open";
 /** Asks the owning `AppWorkspace.Detail` to close; its `onClose` decides. */
 export declare const APP_WORKSPACE_DETAIL_CLOSE_EVENT = "k2b-app-workspace-detail-close";
 /**