@k2b/ui 0.28.0 → 0.30.0

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

@@ -1,7 +1,60 @@
+import type { JSX } from "solid-js";
 import type { EmojiSkinTone } from "../inputs/emoji/emoji-index";
 export type ChatRole = "user" | "assistant" | "system" | "tool";
 export type ChatMessageStatus = "pending" | "streaming" | "complete" | "error";
-export type ChatActivityTone = "neutral" | "ai" | "success" | "danger";
+/** `warning` marks a partial result or an outcome that is not yet known. */
+export type ChatActivityTone = "neutral" | "ai" | "success" | "warning" | "danger";
+/** `open` asks; `sending` while the answer is on its way; `decided` once answered; `expired` when it ran out. */
+export type ChatDecisionState = "open" | "sending" | "decided" | "expired";
+/** One answer of a question. Set the question's state in `onSelect` before awaiting anything, so it collapses at once. */
+export type ChatDecisionAnswer = {
+    label: string;
+    /** Icon class, for example `ti ti-send`. */
+    icon?: string;
+    onSelect: () => void | Promise<void>;
+};
+/** Why a question is asked, or why its main answer is off. */
+export type ChatDecisionReason = {
+    text: JSX.Element;
+    /** Icon class; the text after it starts 1.5rem from the edge. */
+    icon?: string;
+    /** `danger` for deletions, `warning` for outside content and limits. */
+    tone?: "neutral" | "danger" | "warning";
+};
+export type ChatOutcomeTone = "running" | "done" | "off" | "waiting" | "warning" | "error";
+/** One text of an outcome flow. */
+export type ChatOutcomeLine = {
+    tone: ChatOutcomeTone;
+    /** What happened, as one sentence, usually with `ReferenceChip`s. */
+    text: JSX.Element;
+    /** A quiet second sentence, such as "You declined." */
+    detail?: JSX.Element;
+    /** A formatted time after the text. */
+    time?: string;
+    /** Replaces the tone's icon, for example `ti ti-clock-x` for an expired question. */
+    icon?: string;
+    /** One text link after the line, such as "Ask again". */
+    action?: {
+        label: string;
+        onSelect: () => void | Promise<void>;
+    };
+    /** Small buttons under the line. Shown while this line is current; otherwise hidden but still reserving their row. */
+    actions?: JSX.Element;
+};
+/** A person in a preview header: the name in the text colour, then the address the message really uses. */
+export type ChatPreviewPerson = {
+    name?: string;
+    address?: string;
+};
+/** One header row, such as "To Lea Berg lea.berg@example.com". */
+export type ChatPreviewHeaderRow = {
+    label: string;
+    people?: readonly ChatPreviewPerson[];
+    /** Further content after the people, such as "and 2 more". */
+    value?: JSX.Element;
+    /** Draws the label stronger, for recipients others cannot see. */
+    emphasis?: boolean;
+};
 type ChatActionBase = {
     id: string;
     label: string;

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

@@ -25,9 +25,9 @@ import { type StateTimelineChartOptions, type StateTimelineDomain } from "./char
  * **Why so thin.** The props are a discriminated union over each
  * stdlib chart function — `kind: "line"` brings in exactly the params
  * `charts.line` expects, `kind: "bar"` brings in `charts.bar`'s, etc.
- * Options stay aligned with stdlib without renaming. Shared interactive
- * layers add bounded pan / zoom controls to maps and state timelines, plus
- * renderer-owned inspection, tooltips and optional selection for all chart kinds.
+ * Options stay aligned with stdlib without renaming. Every chart provides
+ * renderer-owned inspection, tooltips and optional selection by default.
+ * `interactive` adds bounded pan / zoom and reset controls to maps and state timelines.
  * If stdlib gains a new option, it's automatically available at every
  * callsite.
  *
@@ -75,10 +75,16 @@ export type ChartProps = {
         class?: string;
         style?: JSX.CSSProperties | string;
         labels?: ChartLabels;
+        /**
+         * Navigation for maps and state timelines: pan, zoom and reset controls.
+         * Arrows pan; Alt+arrows inspect. Every chart shows tooltips and keyboard
+         * inspection without this prop.
+         */
         interactive?: boolean;
         onSelect?: (selection: ChartSelection) => void;
         /** Controlled highlight; indices belong to this exact input snapshot. */
         selected?: ChartDatumRef | null;
+        /** Customize the always-on tooltip with a title and labeled text rows. */
         tooltip?: ChartTooltipFormatter;
         /** Optional shared X cursor for line charts. */
         cursor?: ChartCursor;

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

@@ -85,6 +85,9 @@ export type DataTableProps<T> = {
     footer?: DataTableFooter<T>;
     hasMore?: boolean;
     loadingMore?: boolean;
+    loading?: boolean;
+    /** Initial placeholder count, clamped to an integer from 1 to 50. Defaults to 5. */
+    loadingRows?: number;
     onLoadMore?: () => void;
     empty?: JSX.Element;
     density?: "compact" | "normal";

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

@@ -0,0 +1,27 @@
+import type { JSX } from "solid-js";
+/** The colour family a file's icon tile uses. `other` covers code, text, and unknown files. */
+export type FileType = "folder" | "pdf" | "image" | "sheet" | "document" | "slides" | "video" | "audio" | "archive" | "other";
+export type FileTypeIconProps = {
+    /** The file or folder name; its extension picks the glyph and the type colour. */
+    name: string;
+    mediaType?: string;
+    folder?: boolean;
+    /** Shows an open folder, for example the folder a list is showing. */
+    open?: boolean;
+    /** A Tabler icon class that replaces the glyph the name picks; the type colour still follows the name. */
+    icon?: string;
+    /** `sm` for tree rows, `md` for list rows, `lg` for grid previews. Defaults to `md`. */
+    size?: "sm" | "md" | "lg";
+    class?: string;
+};
+/** Resolve the colour family for a file or folder from its name and media type. */
+export declare const fileTypeOf: (file: {
+    name: string;
+    mediaType?: string;
+    folder?: boolean;
+}) => FileType;
+/**
+ * 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`.
+ */
+export declare function FileTypeIcon(props: FileTypeIconProps): JSX.Element;

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

@@ -0,0 +1,49 @@
+import { type JSX } from "solid-js";
+/** The visible length of a chip; longer titles are cut in the middle. */
+export declare const REFERENCE_CHIP_MAX_CHARACTERS = 40;
+/**
+ * Shortens `text` to at most `max` visible characters by cutting its middle, so the start and an ending such as
+ * ".pdf" stay readable. Counts user-perceived characters, so an emoji is never split.
+ * @example truncateMiddle("Quarterly report for the operations team 2026.pdf", 24) // "Quarterly re…m 2026.pdf"
+ */
+export declare const truncateMiddle: (text: string, max?: number) => string;
+type ReferenceChipCommon = {
+    class?: string;
+};
+/** A thing or a place: an icon in its application colour and its title, a link while it exists. */
+export type ReferenceChipObjectProps = ReferenceChipCommon & {
+    kind: "object" | "place";
+    title: string;
+    /** Destination of the chip. Omit it, or set `gone`, when there is nothing to open. */
+    href?: string;
+    /** Icon class, for example `ti ti-mail`. */
+    icon?: string;
+    /** Icon colour, usually the owning application's accent. Sets `--k2b-reference-icon`. */
+    accent?: string;
+    /** The thing no longer exists: struck through and never a link. */
+    gone?: boolean;
+};
+/** A person: avatar and display name. The address belongs in the preview, never in the chip. */
+export type ReferenceChipPersonProps = ReferenceChipCommon & {
+    kind: "person";
+    name: string;
+    /** Avatar image; initials on a tint from the name otherwise. */
+    src?: string | null;
+    href?: string;
+};
+/** A date or time the host already formatted for the reader. */
+export type ReferenceChipTimeProps = ReferenceChipCommon & {
+    kind: "time";
+    label: string;
+    /** Machine-readable value for `<time datetime>`. */
+    dateTime?: string;
+};
+export type ReferenceChipProps = ReferenceChipObjectProps | ReferenceChipPersonProps | ReferenceChipTimeProps;
+/**
+ * A typed reference inside a sentence: a thing, a place, a person, or a time, in the calm `.k2b-reference` pill.
+ * A chip shows at most 40 characters and cuts longer titles in the middle; the full title stays its accessible name
+ * and tooltip.
+ * @example <ReferenceChip kind="object" title="Maintenance window" icon="ti ti-mail" accent="var(--app-mail)" href="/mail/…" />
+ */
+export declare function ReferenceChip(props: ReferenceChipProps): JSX.Element;
+export default ReferenceChip;

package/dist/types/content/calendar-pointer.d.ts

@@ -22,6 +22,12 @@ type CalendarPointerSessionOptions<T> = {
     /** Called on every move once the gesture is active, such as to move a token with the pointer. */
     onMove?: (clientX: number, clientY: number) => void;
 };
+/**
+ * Runs `open` once the browser has handled the pointer release that ends a drag. The browser light-dismisses an
+ * `auto` popover that opens while it dispatches that `pointerup`, as the HTML popover rules ask and Chromium 156
+ * does, so a popover that a drag opens must open after the release.
+ */
+export declare const afterPointerRelease: (open: () => void) => void;
 /**
  * Owns one pointer gesture from threshold crossing through commit or cancel.
  * Views provide geometry through `resolve`; this helper owns global cleanup,

package/dist/types/content/data-table-messages.d.ts

@@ -2,6 +2,7 @@ declare const dataTableMessages: import("@k2b/stdlib").Catalog<{
     dataTable: string;
     noColumns: string;
     noRecords: string;
+    loadingRows: string;
 }>;
 export type DataTableMessages = ReturnType<(typeof dataTableMessages)["resolve"]>["t"];
 /** Resolved from the inherited render locale. */

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

@@ -25,6 +25,7 @@ export { DocCode, DocConceptGrid, DocInlineCode, DocLead, DocNote, DocPage, DocR
 export { FileBrowserPanel, type FileBrowserPanelProps, type FileSource, openFileBrowser } from "./FileBrowser";
 export { FileGrid, type FileGridProps } from "./FileGrid";
 export { default as FileTree, type FileTreeActions, type FileTreeEntry, type FileTreeProps } from "./FileTree";
+export { type FileType, FileTypeIcon, type FileTypeIconProps, 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";
@@ -45,6 +46,8 @@ export { default as PdfPreview } from "./PdfPreview";
 export type { RangeOption, RangePickerProps } from "./RangePicker";
 export { default as RangePicker } from "./RangePicker";
 export { ReactionBar, type ReactionBarItem, type ReactionBarProps } from "./ReactionBar";
+export type { ReferenceChipObjectProps, ReferenceChipPersonProps, ReferenceChipProps, ReferenceChipTimeProps, } from "./ReferenceChip";
+export { REFERENCE_CHIP_MAX_CHARACTERS, ReferenceChip, truncateMiddle } from "./ReferenceChip";
 export type { StepsProps } from "./Steps";
 export { Steps } from "./Steps";
 export type { StructuredDataPreviewMode, StructuredDataPreviewProps, StructuredDataValue } from "./StructuredDataPreview";

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

@@ -0,0 +1,25 @@
+import { type JSX } from "solid-js";
+import { type TooltipPlacement } from "./tooltip-position";
+export type MovedHintAction = {
+    label: string;
+    href: string;
+    onClick?: never;
+} | {
+    label: string;
+    onClick: () => void;
+    href?: never;
+};
+export type MovedHintProps = {
+    /** The owner decides this on the server, so a dismissed hint never renders again. */
+    open: boolean;
+    /** Called once per open period when the person closes the hint or uses its action. */
+    onDismiss: () => void;
+    /** Render the hint directly after this element to preserve keyboard order. */
+    target: () => HTMLElement | undefined;
+    /** Short text naming the new place. */
+    children: JSX.Element;
+    action: MovedHintAction;
+    placement?: TooltipPlacement;
+    class?: string;
+};
+export declare function MovedHint(props: MovedHintProps): JSX.Element;

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

@@ -10,9 +10,11 @@ export type OpenDialogOptions = {
     ariaLabel?: string;
     /**
      * 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. Closing the dialog removes the entry again; the returned promise settles after that.
+     * instead of leaving the page. Normally closing the dialog removes the entry again; the returned promise settles after that.
      * With the Navigation API, same-URL traversals between this core's entries and the page do not reach application popstate listeners.
      * 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.
      */
     history?: boolean;
 };
@@ -46,7 +48,8 @@ export declare const dialogCore: DialogCore;
 /**
  * Internal: transient UI shares dialogs' Back handling without exposing another public dialog capability.
  * Same-URL traversals are suppressed with the Navigation API; without it, only the synthetic Back on release is suppressed.
+ * Release during island disposal forgets the marker without traversing; the router may replace the remaining entry.
  */
 export declare const holdDialogHistory: (onBack: () => void) => (() => void);
-/** Internal: waits until entries released through `holdDialogHistory` have left the history. */
+/** Internal: waits until released holders have left history or were forgotten during island disposal. */
 export declare const dialogHistorySettled: () => Promise<void>;

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

@@ -10,6 +10,8 @@ export type { InstallGuideProps } from "./InstallGuide";
 export { default as InstallGuide } from "./InstallGuide";
 export type { InstallationPlatform, InstallPrompt } from "./install";
 export { createInstallPrompt, installationPlatform } from "./install";
+export type { MovedHintAction, MovedHintProps } from "./MovedHint";
+export { MovedHint } from "./MovedHint";
 export type { ConfirmOptions, DialogOptions, FieldSchema, PromptFieldBase, PromptSearchInput, PromptSearchItem, PromptSearchOptions, } from "./prompts";
 export { createFormState, DialogHeader, prompts } from "./prompts";
 export type { TooltipAnchorProps, TooltipPlacement, TooltipProps, TooltipTriggerProps } from "./Tooltip";

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

@@ -94,6 +94,8 @@ export type FieldSchema = (PromptFieldBase<string> & {
 }) | (PromptFieldBase<string> & {
     type: "datetime";
     dateOnly?: boolean;
+    /** A date whose time is optional, as `DateTimePicker`'s `optionalTime`. */
+    optionalTime?: boolean;
 }) | {
     type: "info";
     content: string | JSX.Element | (() => JSX.Element);

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

@@ -28,6 +28,13 @@ export type DatePickerProps = DatePickerBaseProps<string | null> & {
 export type DateTimePickerProps = DatePickerBaseProps<string | null> & {
     /** Trigger content for a set value, for example the date and time with a relative hint. */
     renderValue?: (value: string) => JSX.Element;
+    /**
+     * The time is optional: the value is a date key such as `2026-10-24` until **Add time** adds one, then a date-time
+     * like without this option. Removing the time returns to the date key.
+     */
+    optionalTime?: boolean;
+    /** The time a new value starts with, `09:00` by default. */
+    defaultTime?: string;
 };
 export type DateRangePickerProps = DatePickerBaseProps<DateRangeValue> & {
     withTime?: boolean;

package/dist/types/inputs/date-picker.d.ts

@@ -30,7 +30,10 @@ export declare const monthDate: (year: number, month: number, context?: DateCont
  * or repeats midnight, the day starts at its first existing instant.
  */
 export declare const msUntilNextDay: (now: Date, context?: DateContext) => number;
+/** Whether `value` is a date key such as `2026-10-24`, a date without a time. */
+export declare const isDateKey: (value: string) => boolean;
 export declare const parseDateValue: (value: string | null | undefined, context?: DateContext) => Date;
+/** A date key names a calendar day, so it is formatted at noon UTC in UTC: no runtime or picker zone can move it. */
 export declare const displayDate: (value: string | null | undefined, context?: DateContext) => string;
 export declare const dateTimeInput: (value: string | null | undefined, context?: DateContext) => string;
 export declare const splitDateTime: (value: string | null | undefined, context?: DateContext) => {
@@ -43,7 +46,28 @@ export declare const formatDateTimeValue: (value: string | null | undefined, con
 export declare const normalizeTimeInput: (value: string) => string;
 export declare const filterTimeInput: (value: string) => string;
 export declare const orderedRange: (start: string, end: string) => DateRangeValue;
-export declare const previewRange: (range: DateRangeValue, preview: string | null) => DateRangeValue;
+/**
+ * The range a click picks. A click starts a complete one-day range on its day, and it becomes the anchor; the next
+ * click on another day extends the range from the anchor, whichever side it lies on. A click on the anchor keeps the
+ * one-day range. After an extension, the next click starts a new one-day range.
+ */
+export declare const pickRangeDay: (range: DateRangeValue, anchor: string | null, day: string) => {
+    range: DateRangeValue;
+    anchor: string | null;
+};
+/** The anchor that the next click extends from: only while the range is still the one-day range of its click. */
+export declare const rangeAnchor: (range: DateRangeValue, anchor: string | null) => string | null;
+/** The range shown while the pointer or focus rests on `preview`: the extension that a click there would pick. */
+export declare const previewRange: (range: DateRangeValue, anchor: string | null, preview: string | null) => DateRangeValue;
 export declare const inRange: (day: string, range: DateRangeValue) => boolean;
 export declare const isRangeEdge: (day: string, range: DateRangeValue) => boolean;
 export declare const formatDateOnlyRangeDuration: (range: DateRangeValue, context?: DateContext) => string;
+/**
+ * The weekend bands of a week row: one band per run of adjacent weekend columns, as a zero-based start column and a
+ * number of columns. Saturday and Sunday in a week from Monday are one band of two; in a week from Sunday they are
+ * two bands at both ends.
+ */
+export declare const weekendBands: (weekend: readonly boolean[]) => {
+    start: number;
+    span: number;
+}[];

package/dist/types/intl/messages.d.ts

@@ -25,12 +25,16 @@ declare const uiMessages: import("@k2b/stdlib").Catalog<{
     nothingToShow: string;
     no: string;
     options: string;
+    more: string;
+    moreViews: string;
     pickDate: string;
     previousMonth: string;
     previousYear: string;
     nextMonth: string;
     nextYear: string;
     retry: string;
+    tryAgain: string;
+    movedHintDismiss: string;
     reset: string;
     required: string;
     delete: string;
@@ -56,6 +60,8 @@ declare const uiMessages: import("@k2b/stdlib").Catalog<{
     month: string;
     year: string;
     allDay: string;
+    addTime: string;
+    removeTime: string;
     previous: string;
     next: string;
     cancel: string;

package/dist/types/intl/weekend.d.ts

@@ -0,0 +1,12 @@
+/**
+ * The weekend days of `locale` as JavaScript day numbers (0 for Sunday): Saturday and Sunday in Germany, Friday and
+ * Saturday in Israel. The days come from the engine's Intl week data where it has them, otherwise Saturday and Sunday.
+ * Without a locale the answer is Saturday and Sunday too, so a server render and the browser agree.
+ */
+export declare const weekendDays: (locale: string | undefined) => ReadonlySet<number>;
+/** The day of the week of a date key such as `2026-10-24`, as a JavaScript day number (0 for Sunday). */
+export declare const dayOfWeekOfKey: (key: string) => number;
+/** Whether the day of `key` is a weekend day of `locale`. */
+export declare const isWeekendKey: (key: string, locale: string | undefined) => boolean;
+/** Whether column `index` of a week that starts on `firstDayOfWeek` (0 for Sunday, 1 for Monday) is a weekend day. */
+export declare const isWeekendColumn: (index: number, firstDayOfWeek: number, locale: string | undefined) => boolean;

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

@@ -3,6 +3,28 @@ import { type JSX } from "solid-js";
 import { type AppWorkspaceLayoutState } from "./app-workspace-state";
 import type { ScrollAreaProps } from "./ScrollArea";
 import { type AppWorkspaceSidebarSwitcherProps } from "./SidebarSwitcher";
+export type AppWorkspaceHeadProps = {
+    /** View tabs, usually a ViewTabs. */
+    views?: JSX.Element;
+    /** Filter chips, usually FilterChip elements. */
+    filters?: JSX.Element;
+    /** Any filter is active: shows Reset and the quiet result count. */
+    filtered?: boolean;
+    /** Reset target while filtered: a URL (works without JavaScript) and/or a callback. */
+    resetHref?: string;
+    onReset?: () => void;
+    /** Quiet result count shown only while filtered; CSS drops it first when space is short. */
+    count?: JSX.Element;
+    /** Secondary actions at the end of the row. Never a filled button. */
+    actions?: JSX.Element;
+    /** The one filled primary action. Below 48rem it becomes a round icon button beside the host's bottom bar. */
+    primary?: {
+        label: string;
+        icon: string;
+        href?: string;
+        onClick?: (event: MouseEvent) => void;
+    };
+};
 export type AppWorkspaceProps = {
     children: JSX.Element;
     class?: string;
@@ -40,6 +62,14 @@ export type AppWorkspaceMainProps = {
     class?: string;
     /** `"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,
+     * 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;
     mobilePane?: string;
     /** Levels in DOM order, shallowest first. The URL selects the deepest level by id. */
     level?: string;
@@ -75,6 +105,12 @@ export type AppWorkspaceDetailWidth = "sm" | "md" | "lg" | "xl";
 export type AppWorkspaceDetailProps = {
     children: JSX.Element;
     open: 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:
+     * the drawer then opens only from Details or from a toggle in Main.
+     */
+    openOnChoice?: boolean;
     id: string;
     class?: string;
     width?: AppWorkspaceDetailWidth;
@@ -85,12 +121,11 @@ export type AppWorkspaceDetailProps = {
     minWidth?: number;
     maxWidth?: number;
     /**
-     * Closes the panel: Escape, a swipe on a touch screen, and dragging the
-     * phone sheet down call it. A panel rendered on the server only marks its
-     * own close button or link with `data-workspace-detail-close` instead, and
-     * those gestures click it. Without either, they leave the panel open, and on
-     * a touch tablet in portrait the panel makes room beside `Main` instead of
-     * overlaying it as a drawer.
+     * Closes the column with Escape, or the phone sheet with a downward drag.
+     * 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
+     * calling onClose, so its Details button can open it again.
      */
     onClose?: () => void;
     /**
@@ -123,9 +158,11 @@ export type AppWorkspaceSidebarProps = {
     /**
      * Below 48rem (768 px) the sidebar is hidden and the host's mobile
      * navigation takes over; from 48 to 64rem it is an overlay that a button in
-     * the workspace's head opens. `"stacked"` keeps it as a block above the
-     * content below 64rem instead, for overviews whose sidebar is the primary
-     * object list.
+     * the workspace's head opens. `"stacked"` is for overviews whose sidebar is
+     * the primary object list: below 64rem its items become one row of chips
+     * above the content, and "All" at the end of the row opens the complete
+     * sidebar in a sheet (a centered dialog from 48rem). From 64rem it is the
+     * regular sidebar column; the element is a `nav` landmark either way.
      */
     mobile?: "hidden" | "stacked";
     resizable?: boolean;
@@ -247,7 +284,7 @@ export type AppWorkspaceSidebarItemIconProps = {
 };
 export type AppWorkspaceSidebarItemLabelProps = {
     children: JSX.Element;
-    /** False keeps one line with an ellipsis; rows wrap long labels onto a second line by default. */
+    /** False keeps one line that fades out; rows wrap long labels onto a second line by default. */
     marquee?: boolean;
 };
 export type AppWorkspaceSidebarItemMetaProps = {
@@ -360,6 +397,7 @@ type AppWorkspaceNavTreeComponent = ((props: AppWorkspaceNavTreeProps) => JSX.El
 };
 type AppWorkspaceComponent = ((props: AppWorkspaceProps) => JSX.Element) & {
     LayoutStateProvider: (props: AppWorkspaceLayoutStateProviderProps) => JSX.Element;
+    Head: (props: AppWorkspaceHeadProps) => JSX.Element;
     Content: (props: AppWorkspaceContentProps) => JSX.Element;
     Main: (props: AppWorkspaceMainProps) => JSX.Element;
     MainPane: (props: AppWorkspaceMainPaneProps) => JSX.Element;

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

@@ -0,0 +1,9 @@
+import { type ResizeSeparatorOptions } from "./resize-separator";
+export type ResizeSeparatorProps = Omit<ResizeSeparatorOptions, "value"> & {
+    label: string;
+    orientation: "vertical" | "horizontal";
+    value: number;
+    controls?: string;
+    class?: string;
+};
+export default function ResizeSeparator(props: ResizeSeparatorProps): import("solid-js").JSX.Element;

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

@@ -15,6 +15,13 @@ export type TabBarProps = {
     label: string;
     /** Up to five destinations; further items are not rendered. Put the rest behind a "More" destination. */
     items: readonly TabBarItem[];
+    /**
+     * `bar` (the default) is flat on the page canvas and pads the bottom safe area. `floating` is a rounded bar that the
+     * host places above the content, away from the safe areas; its open item is a raised chip. The host may paint it
+     * with `--k2b-tab-bar-background`, color its items with `--k2b-tab-bar-color`, and color the open item with
+     * `--k2b-tab-bar-selected-background` and `--k2b-tab-bar-selected-color`.
+     */
+    variant?: "bar" | "floating";
     class?: string;
 };
 /**

package/dist/types/layout/app-host-width.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Watches whether workspace chrome has at least `minRem` of app host width.
+ * CSS for the same chrome uses `@container k2b-app-area (min-width: …)`.
+ * Call with a mounted element; the returned function stops all observation.
+ */
+export declare function watchAppHostWidth(element: Element, minRem: number, update: (matches: boolean) => void): () => void;

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

@@ -4,6 +4,8 @@ export type AppWorkspaceControllerOptions = {
     readState?: () => AppWorkspaceLayoutState | null | undefined;
     writeState?: (state: AppWorkspaceLayoutState) => void;
 };
+/** Parks open waiting-detail drawers; focus follows only when it was inside one. */
+export declare const parkWorkspaceDetailDrawers: (root?: ParentNode) => void;
 /**
  * Asks the owning `AppWorkspace.Sidebar` to hide. The sidebar's `hidden` prop
  * stays application state, so the controller only requests the change.

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

@@ -1,9 +1,10 @@
 export type { AppOverviewCardsProps, AppOverviewEmptyStateProps, AppOverviewPanelProps, AppOverviewProps, } from "./AppOverview";
 export { default as AppOverview } from "./AppOverview";
-export type { AppWorkspaceBottomDrawerHeight, AppWorkspaceBottomDrawerProps, AppWorkspaceContentProps, AppWorkspaceDetailProps, AppWorkspaceDetailWidth, AppWorkspaceMainPaneProps, AppWorkspaceMainProps, AppWorkspaceNavTreeItemProps, AppWorkspaceNavTreeMove, AppWorkspaceNavTreeProps, AppWorkspaceProps, AppWorkspaceSidebarAccessoryVisibility, AppWorkspaceSidebarBodyProps, AppWorkspaceSidebarIconActionProps, AppWorkspaceSidebarIconActionTone, AppWorkspaceSidebarIconGridProps, AppWorkspaceSidebarItemActionProps, AppWorkspaceSidebarItemActionsProps, AppWorkspaceSidebarItemIconProps, AppWorkspaceSidebarItemLabelProps, AppWorkspaceSidebarItemMetaProps, AppWorkspaceSidebarItemProps, AppWorkspaceSidebarItemStatusProps, AppWorkspaceSidebarItemTone, AppWorkspaceSidebarProps, AppWorkspaceSidebarSectionProps, AppWorkspaceSidebarVisibility, } from "./AppWorkspace";
+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, } from "./AppWorkspace";
 export { default as AppWorkspace } from "./AppWorkspace";
+export { watchAppHostWidth } from "./app-host-width";
 export type { AppWorkspaceControllerOptions } from "./app-workspace-controller";
-export { installAppWorkspaceController } from "./app-workspace-controller";
+export { installAppWorkspaceController, parkWorkspaceDetailDrawers } from "./app-workspace-controller";
 export type { AppWorkspaceLayoutState, AppWorkspaceResizeKind, } from "./app-workspace-state";
 export { APP_WORKSPACE_DETAIL_DEFAULT, APP_WORKSPACE_DETAIL_MAX, APP_WORKSPACE_DETAIL_MIN, APP_WORKSPACE_DRAWER_DEFAULT, APP_WORKSPACE_DRAWER_MAX, APP_WORKSPACE_DRAWER_MIN, APP_WORKSPACE_MAIN_MIN, APP_WORKSPACE_MAIN_MIN_HEIGHT, APP_WORKSPACE_PANE_DEFAULT, APP_WORKSPACE_PANE_MAX, APP_WORKSPACE_PANE_MIN, APP_WORKSPACE_SIDEBAR_COLLAPSE_THRESHOLD, APP_WORKSPACE_SIDEBAR_COLLAPSED, APP_WORKSPACE_SIDEBAR_DEFAULT, APP_WORKSPACE_SIDEBAR_MAX, APP_WORKSPACE_SIDEBAR_MIN, appWorkspaceLayoutStyle, appWorkspacePanelVariable, appWorkspaceResizeLimits, normalizeAppWorkspaceLayoutState, parseAppWorkspaceLayoutState, resolveAppWorkspaceSidebarWidth, safeAppWorkspacePanelId, serializeAppWorkspaceLayoutState, shouldCollapseAppWorkspaceSidebar, } from "./app-workspace-state";
 export { type BottomSheetProps, bottomSheetAdaptiveOptions, bottomSheetOptions, default as BottomSheet } from "./BottomSheet";
@@ -32,6 +33,8 @@ export { default as PullToRefresh } from "./PullToRefresh";
 export { installPageTitleController } from "./page-title-controller";
 export type { AddPanesItemOptions, PanesDirection, PanesGroup, PanesIntent, PanesLayout, PanesNode, PanesPath, PanesPathSegment, PanesSide, PanesSplit, } from "./panes-layout";
 export { activatePanesItem, addPanesItem, applyPanesIntent, createPanesLayout, isPanesItemVisible, PANES_LAYOUT_VERSION, parsePanesLayout, reconcilePanesLayout, removePanesItem, resizePanesSplit, } from "./panes-layout";
+export { default as ResizeSeparator, type ResizeSeparatorProps } from "./ResizeSeparator";
+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";

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

@@ -0,0 +1,18 @@
+export type ResizeSeparatorOptions = {
+    min: number;
+    max: number;
+    value: () => number;
+    /** Pixels per value unit. Defaults to 1. */
+    unit?: number;
+    step?: number;
+    largeStep?: number;
+    grow: "start" | "end";
+    collapseBelow?: number;
+    onResize: (value: number) => void;
+    onResizeEnd?: (value: number) => void;
+    onCollapseIntent?: (armed: boolean) => void;
+    onCollapse?: () => void;
+    onDragChange?: (dragging: boolean) => void;
+};
+/** Adds resizing to a server-rendered separator; orientation comes from aria-orientation. */
+export declare function attachResizeSeparator(element: HTMLElement, options: ResizeSeparatorOptions): () => void;

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

@@ -10,6 +10,7 @@ declare const workspaceMessages: import("@k2b/stdlib").Catalog<{
     resizeNavigation: string;
     resizeWorkspacePane: string;
     resizeDetailPanel: string;
+    details: string;
     detailFullHeight: string;
     resizeBottomDrawer: string;
     showNavigation: string;
@@ -18,6 +19,10 @@ declare const workspaceMessages: import("@k2b/stdlib").Catalog<{
     }) => string;
     path: string;
     moreLevels: string;
+    sidebarAll: string;
+    sidebarAllLabel: ({ label }: {
+        label: string;
+    }) => string;
 }>;
 export type WorkspaceMessages = ReturnType<(typeof workspaceMessages)["resolve"]>["t"];
 /** Resolved from the inherited render locale. */

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

@@ -1,7 +1,7 @@
 import { type JSX } from "solid-js";
 export type PlaceholderAlign = "center" | "left";
 export type PlaceholderSurface = "none" | "paper";
-export type PlaceholderState = "empty" | "loading" | "error";
+export type PlaceholderState = "empty" | "no-results" | "no-access" | "loading" | "error";
 /** `compact` stacks inside a section, `inline` is one row in a list or sidebar, `panel` fills a work area. */
 export type PlaceholderVariant = "compact" | "inline" | "panel";
 export type PlaceholderProps = {
@@ -9,6 +9,7 @@ export type PlaceholderProps = {
     description?: JSX.Element;
     icon?: string;
     action?: JSX.Element;
+    onRetry?: () => void;
     align?: PlaceholderAlign;
     surface?: PlaceholderSurface;
     state?: PlaceholderState;