@k2b/ui 0.31.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/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";

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

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

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

@@ -58,4 +58,6 @@ export type MapViewProps = Omit<MapViewFrameProps, "attribution"> & {
     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/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

@@ -6,6 +6,8 @@ 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. */
@@ -107,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:
@@ -124,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

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";
 /**

package/dist/types/layout/navigation-model.d.ts

@@ -22,6 +22,8 @@ type NavigationEntry = {
      */
     status?: NavigationStatus | null;
     active?: boolean;
+    /** Current container, independently of its active destination. `false` quiets this row; omitted keeps the default ink. */
+    context?: boolean;
     disabled?: boolean;
     color?: string;
     children?: readonly NavigationItem[];

package/dist/types/layout/resize-separator.d.ts

@@ -10,6 +10,7 @@ export type ResizeSeparatorOptions = {
     collapseBelow?: number;
     onResize: (value: number) => void;
     onResizeEnd?: (value: number) => void;
+    onReset?: () => void;
     onCollapseIntent?: (armed: boolean) => void;
     onCollapse?: () => void;
     onDragChange?: (dragging: boolean) => void;

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

@@ -0,0 +1,6 @@
+import type { JSX } from "solid-js";
+export type SkeletonProps = {
+    class?: string;
+};
+/** Decorative loading geometry. The consumer owns dimensions and one accessible loading status. */
+export declare function Skeleton(props: SkeletonProps): JSX.Element;

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

@@ -20,6 +20,7 @@ export type { ProgressRingProps, ProgressRingTone } from "./ProgressRing";
 export { ProgressRing } from "./ProgressRing";
 export type { ResourceCardProps, ResourceCardState } from "./ResourceCard";
 export { ResourceCard } from "./ResourceCard";
+export { Skeleton, type SkeletonProps } from "./Skeleton";
 export type { StatCellAccent, StatCellProps, StatCellTone } from "./StatCell";
 export { StatCell } from "./StatCell";
 export type { StatGridAction, StatGridColumns, StatGridProps, StatGridSize, StatGridSurface, } from "./StatGrid";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k2b/ui",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "description": "Production-ready components for SolidJS applications.",
   "repository": {
     "type": "git",
@@ -59,13 +59,13 @@
     "qr-scanner": "1.4.2"
   },
   "peerDependencies": {
-    "@k2b/ssr": "^0.12.0 || ^0.13.0 || ^0.14.0 || ^0.15.0 || ^0.16.0 || ^0.17.0 || ^0.18.0 || ^0.19.0",
+    "@k2b/ssr": "^0.12.0 || ^0.13.0 || ^0.14.0 || ^0.15.0 || ^0.16.0 || ^0.17.0 || ^0.18.0 || ^0.19.0 || ^0.20.0",
     "solid-js": "^1.9.10"
   },
   "devDependencies": {
     "@babel/core": "8.0.6",
     "@babel/preset-typescript": "8.0.1",
-    "@k2b/ssr": "0.19.0",
+    "@k2b/ssr": "0.20.0",
     "@types/babel__core": "7.20.5",
     "@types/bun": "1.4.2",
     "axe-core": "4.11.0",
@@ -76,7 +76,7 @@
     "hono": "4.13.9",
     "playwright": "1.64.1",
     "seroval": "1.6.7",
-    "solid-js": "1.9.15",
+    "solid-js": "1.9.17",
     "tailwindcss": "4.3.3",
     "typescript": "7.0.2",
     "@typescript/typescript6": "6.0.2",