@k2b/ui 0.16.0 → 0.18.0

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

@@ -44,7 +44,7 @@ export type ChatActivityProps = {
 export type ChatContextUsageProps = ChatContextUsageData & {
     action?: ChatAction;
     onActionError?: (error: unknown) => void;
-    /** Host-owned number formatting. The default is locale-independent and SSR-stable. */
+    /** Host-owned number formatting. The default groups whole numbers in the inherited render locale. */
     formatNumber?: (value: number) => string;
     class?: string;
 };

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

@@ -0,0 +1,41 @@
+/**
+ * VideoPlayer — one video with the browser's own controls inside a frame whose
+ * size never depends on the video. The frame fills the height its host gives
+ * it, or keeps a ratio where the host leaves the height open. The picture fits
+ * inside uncropped, so a portrait reel and a wide recording both show whole and
+ * nothing moves while the video loads.
+ */
+import { type JSX } from "solid-js";
+export type VideoPlayerProps = {
+    /**
+     * Inline address of the video. Seeking needs a server that answers `Range` requests; Safari plays nothing without.
+     * Null while the host still fetches it, for example a signed URL: the frame already shows at its final size.
+     */
+    src: string | null;
+    /** Names the video for assistive technology, for example its file name. */
+    label: string;
+    /** Picture shown before playback starts. Without one, the player shows the first frame. */
+    poster?: string;
+    /** Width divided by height of the frame where the host leaves its height open. Defaults to 16 / 9. */
+    ratio?: number;
+    /** CORS mode for a video on another origin. Omit to keep the browser default. */
+    crossOrigin?: "anonymous" | "use-credentials";
+    /**
+     * Resolves a fresh address of the same video, for example a renewed signed URL. When playback fails, the player asks
+     * for one and continues at the same time, playing if it was. A renewed address that fails before it shows that point,
+     * or within ten seconds after, shows the fallback, so a renewed address must stay valid for longer.
+     */
+    renew?: () => Promise<string>;
+    /** Offered with the fallback when the browser cannot play the video, typically a download. */
+    fallbackAction?: JSX.Element;
+    /**
+     * Shown in the frame instead of the video while set, for example the host's own error with a retry when it could not
+     * fetch the address. The frame keeps its size.
+     */
+    error?: JSX.Element;
+    /** Called when the player gives up on the video and shows its fallback. */
+    onFallback?: () => void;
+    class?: string;
+};
+export declare function VideoPlayer(props: VideoPlayerProps): JSX.Element;
+export default VideoPlayer;

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

@@ -34,6 +34,7 @@ export { default as MarkdownView, type MarkdownRenderOptions, type MarkdownViewP
 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 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";
 export type { PdfPreviewProps, PdfPreviewRequest } from "./PdfPreview";
 export { default as PdfPreview } from "./PdfPreview";
@@ -41,6 +42,7 @@ export type { RangeOption, RangePickerProps } from "./RangePicker";
 export { default as RangePicker } from "./RangePicker";
 export type { StructuredDataPreviewMode, StructuredDataPreviewProps, StructuredDataValue } from "./StructuredDataPreview";
 export { default as StructuredDataPreview, isStructuredDataValue } from "./StructuredDataPreview";
+export { VideoPlayer, type VideoPlayerProps } from "./VideoPlayer";
 export type { VirtualFeedController, VirtualFeedProps, VirtualFeedScrollOptions } from "./VirtualFeed";
 export { VirtualFeed } from "./VirtualFeed";
 export type { ZoomPanAction, ZoomPanFullscreen, ZoomPanViewportProps } from "./ZoomPanViewport";

package/dist/types/content/markdown-links.d.ts

@@ -0,0 +1,66 @@
+import type { Token, Tokens } from "marked";
+/** What a reference points to inside the host application. */
+export type MarkdownReferenceKind = "file" | "note" | "heading" | "task" | "page";
+/** The type a reference shows: a file's type from its extension, or the kind of the referenced content. */
+export type MarkdownReferenceType = "pdf" | "image" | "design" | "file" | "note" | "heading" | "task" | "page";
+/**
+ * A link to content inside the host application, as opposed to a web or mail link.
+ * References render as a calm pill whose icon names the type.
+ */
+export type MarkdownReference = {
+    kind: MarkdownReferenceKind;
+    /** The file's name, which decides its type and icon. Defaults to the link text. */
+    fileName?: string;
+    /** The file's formatted size. It shows only when the link stands alone on its line. */
+    size?: string;
+    /** Plain-text title of the document that holds a heading, for a heading in another document. */
+    document?: string;
+};
+export type MarkdownLinkInput = {
+    /** The final, already validated link destination. */
+    href: string;
+    /** The rendered link text. It crosses a trust boundary: the caller sanitizes it. */
+    html: string;
+    /** The link text as plain text, for the accessible name. Defaults to the text of `html`. */
+    text?: string;
+    title?: string;
+    target?: "_blank";
+    /** Link relations without a new tab, such as `noreferrer`. `target: "_blank"` always sets `noopener noreferrer`. */
+    rel?: string;
+    /** A reference inside the host. Without one, the link is a web link, or a mail link for `mailto:` and `tel:`. */
+    reference?: MarkdownReference | null;
+    /** The link is the only content of its line. Only then does a file show its size. */
+    standalone?: boolean;
+    /** Locale of the type name in the accessible name. Defaults to English on the server and the page language in the browser. */
+    locale?: string;
+};
+/** The type of a file reference, from the extension of its name. */
+export declare const markdownFileType: (fileName: string) => "pdf" | "image" | "design" | "file";
+/**
+ * The reference a link destination names on its own: `#anchor` is a heading in the same document, and any other
+ * relative URL is a page of the host, or a file when its last path segment has a file extension. Absolute URLs,
+ * every scheme, and relative URLs that a browser resolves to another host, such as `//host` or `/\host`, are web
+ * or mail links; the result is then `null`.
+ */
+export declare const markdownLinkReference: (href: string) => MarkdownReference | null;
+/** The type a reference shows. */
+export declare const markdownReferenceType: (reference: MarkdownReference, text: string) => MarkdownReferenceType;
+/** The Tabler glyph of a reference type; any other file keeps the glyph of its file family. */
+export declare const markdownReferenceIcon: (type: MarkdownReferenceType, fileName?: string) => string;
+/** The localized name of a reference type, such as "PDF" or "Überschrift". */
+export declare const markdownReferenceTypeLabel: (type: MarkdownReferenceType, locale?: string) => string;
+/**
+ * One link of rendered Markdown. A reference to content of the host renders as a calm pill: a neutral fill, the
+ * text in the prose colour, and an icon whose colour names the type. Its accessible name starts with the type, as
+ * in "PDF: Brand-2026.pdf". A heading in another document shows that document first ("Notes › Heading"). A web
+ * link stays prose text with a thin underline in the link accent and a small ↗; a mail link has no arrow. A link
+ * around an image is the image: a plain anchor that the image's own text names.
+ */
+export declare const renderMarkdownLink: (input: MarkdownLinkInput) => string;
+/**
+ * The links among `tokens` that stand alone on their line: the only content of a paragraph or list item line,
+ * between line breaks. Pass the result's check as `standalone` to `renderMarkdownLink`, so a file shows its size
+ * in a list of files but not inside a sentence. Call it from `walkTokens` of a renderer with GFM line breaks
+ * (`breaks: true`), where every source line is a visual line.
+ */
+export declare const markStandaloneLinks: (token: Token, standalone: WeakSet<Tokens.Link>) => void;

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

@@ -0,0 +1,23 @@
+import { type JSX } from "solid-js";
+import { type FileDropOptions } from "./file-drop";
+export type { FileDropDetails, FileDropOptions, FileDropRejection } from "./file-drop";
+export type FileDropTargetProps = FileDropOptions & {
+    /**
+     * The area that takes the files. Defaults to the nearest dialog, `AppWorkspace.Detail`, or `AppWorkspace.Main`
+     * around the component, and to the whole window outside of them.
+     */
+    for?: Element;
+};
+/**
+ * Turns an area into a drop target while files from outside the page are dragged over the window. A calm overlay
+ * covers the area without moving anything and says what dropping does; a more specific target inside it, such as a
+ * folder row or a `FileDropzone`, takes the drop and its sentence while the pointer is over it. Text, links, and
+ * elements dragged within the page never show it. Keep a visible upload button for keyboard and touch users.
+ */
+export declare function FileDropTarget(props: FileDropTargetProps): JSX.Element;
+/**
+ * Makes one element a specific drop target, such as a folder row inside a `FileDropTarget` area: pass the result as
+ * the element's `ref`. It wins over the area around it while the pointer is over it, and the area's overlay shows its
+ * sentence. Calling the ref again with new options replaces them.
+ */
+export declare function fileDropTarget(options: FileDropOptions): (element: Element) => void;

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

@@ -10,6 +10,8 @@ export type FileDropzoneProps = FieldProps & {
     title?: JSX.Element;
     subtitle?: JSX.Element;
     hint?: JSX.Element;
+    /** One sentence that says what dropping does, shown while files are over the zone. Defaults to "Drop to upload". */
+    dropLabel?: string;
     onDrop: (files: File[]) => void | Promise<void>;
 };
 export declare function FileDropzone(props: FileDropzoneProps): JSX.Element;

package/dist/types/inputs/file-drop.d.ts

@@ -0,0 +1,80 @@
+import { type Accessor } from "solid-js";
+import type { UiMessages } from "../intl/messages";
+export type FileDropRejection = {
+    file: File;
+    /** `type` misses `accept`, `size` exceeds `maxSize`, `count` is past `maxFiles` or the single file of `multiple={false}`. */
+    reason: "type" | "size" | "count";
+};
+export type FileDropDetails = {
+    /** The drop's data, readable only while `onDrop` runs synchronously; read folder entries before the first `await`. */
+    dataTransfer: DataTransfer;
+    /** Files left out by `accept`, `maxSize`, or the file count; the user has already been told. */
+    rejected: readonly FileDropRejection[];
+};
+export type FileDropOptions = {
+    /** One sentence that says what dropping does here, such as "Drop to attach to the message". */
+    label: string;
+    /** `<input accept>` syntax, such as `"image/*,.pdf"`. */
+    accept?: string;
+    /** Defaults to `true`; `false` takes the first fitting file. */
+    multiple?: boolean;
+    /** The most files one drop hands over. */
+    maxFiles?: number;
+    /** The largest file in bytes. */
+    maxSize?: number;
+    disabled?: boolean;
+    /**
+     * Called synchronously in the drop with the files that fit. `files` is empty only when the drop carried no file
+     * objects at all, as some engines hand over dropped folders; `details.dataTransfer.items` still has their entries.
+     */
+    onDrop: (files: File[], details: FileDropDetails) => void | Promise<void>;
+};
+export type FileDropTargetEntry = {
+    options: FileDropOptions;
+    messages: () => UiMessages;
+    locale: () => string;
+    /** Set for regions: the area the overlay covers. Specific targets are keyed by their element. */
+    region?: () => Element | undefined;
+    /** Set for regions: where the target itself is rendered; a region whose host is hidden takes no drops. */
+    host?: () => Element | undefined;
+};
+export type FileDropHover = {
+    entry: FileDropTargetEntry;
+    element: Element;
+    invalid: boolean;
+};
+export type FileDropSession = {
+    /** Regions that show their overlay during this drag: eligible, visible, and not inside another shown region. */
+    shown: readonly FileDropTargetEntry[];
+    hover: FileDropHover | null;
+};
+export type FileDropEngine = {
+    session: Accessor<FileDropSession | null>;
+    /** Changes on every drag movement, so overlays can follow a region that moved or resized. */
+    frame: Accessor<number>;
+    addRegion: (entry: FileDropTargetEntry) => () => void;
+    setTarget: (element: Element, entry: FileDropTargetEntry) => void;
+};
+/** The marker a hovered specific target carries for its ring; regions show their own overlay instead. */
+export declare const FILE_DROP_ATTRIBUTE = "data-file-drop";
+/** Where a region without `for` looks for its area: the nearest dialog, workspace detail, or workspace main area. */
+export declare const FILE_DROP_DEFAULT_REGION = "dialog, .k2b-app-workspace__detail, .k2b-app-workspace__main";
+/** Sorts dropped files into the ones a target takes and the ones it leaves out, in drop order. */
+export declare const partitionDroppedFiles: (files: readonly File[], options: Pick<FileDropOptions, "accept" | "multiple" | "maxFiles" | "maxSize">) => {
+    accepted: File[];
+    rejected: FileDropRejection[];
+};
+/**
+ * During a drag only the types are readable, and only in some engines. A drag is refused when none of them can fit.
+ * An extension in `accept` matches by file name, and systems report differing types for one extension (a `.csv` may be
+ * `application/vnd.ms-excel`), so with one the drop decides.
+ */
+export declare const refusesDraggedTypes: (types: readonly string[], accept: string | undefined) => boolean;
+export declare const fileDropRejectionMessage: (rejected: readonly FileDropRejection[], options: Pick<FileDropOptions, "multiple" | "maxFiles" | "maxSize">, messages: UiMessages, locale: string) => string;
+/**
+ * The document an element lives in. A freshly rendered element still belongs to the inert document of the template it
+ * was cloned from; until it is inserted, that is the page's document.
+ */
+export declare const liveDocument: (element: Element) => Document;
+/** The one drag tracker of a document, shared by every drop target in it. */
+export declare const fileDropEngine: (doc: Document) => FileDropEngine;

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

@@ -15,6 +15,8 @@ export type { Completion, QueryContext, SuggestContext, Suggestion, } from "./co
 export { abbreviations } from "./completion";
 export type { DatePickerBaseProps, DatePickerProps, DatePreset, DateRangePickerProps, DateRangeValue, DateTimePickerProps, DurationPreset, } from "./DatePicker";
 export { DatePicker, DateRangePicker, DateTimePicker } from "./DatePicker";
+export type { FileDropDetails, FileDropOptions, FileDropRejection, FileDropTargetProps } from "./FileDropTarget";
+export { FileDropTarget, fileDropTarget } from "./FileDropTarget";
 export type { FileDropzoneProps, ImageCropperProps, ImageInputProps } from "./FileInputs";
 export { FileDropzone, ImageCropper, ImageInput } from "./FileInputs";
 export type { DateContext, FieldProps, MaybeAccessor, ValueFieldProps } from "./field-contract";

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

@@ -38,6 +38,14 @@ declare const uiMessages: import("@k2b/stdlib").Catalog<{
     infoBlockSuccess: string;
     infoBlockWarning: string;
     infoBlockDanger: string;
+    referencePdf: string;
+    referenceImage: string;
+    referenceDesign: string;
+    referenceFile: string;
+    referenceNote: string;
+    referenceHeading: string;
+    referenceTask: string;
+    referencePage: string;
     copy: string;
     closeLightbox: string;
     couldNotLoadData: string;
@@ -54,6 +62,26 @@ declare const uiMessages: import("@k2b/stdlib").Catalog<{
     durationPresets: string;
     filterOptions: string;
     fileTypeNotAccepted: string;
+    fileDropDropped: ({ count }: {
+        count: number;
+    }) => string;
+    fileDropDroppedOne: ({ name }: {
+        name: string;
+    }) => string;
+    fileDropMore: ({ count }: {
+        count: number;
+    }) => string;
+    fileDropRejectedType: ({ names }: {
+        names: string;
+    }) => string;
+    fileDropRejectedSize: ({ names, limit }: {
+        names: string;
+        limit: string;
+    }) => string;
+    fileDropRejectedCount: ({ names, max }: {
+        names: string;
+        max: number;
+    }) => string;
     imageLightbox: string;
     imageNavigation: string;
     increaseValue: string;
@@ -322,6 +350,7 @@ declare const uiMessages: import("@k2b/stdlib").Catalog<{
     templatePreview: string;
     lastRequestContext: string;
     contextWindowUsed: string;
+    contextWindow: string;
     contextUsageUnavailable: string;
     contextUsageUnavailableWithWindow: ({ window }: {
         window: string;
@@ -413,6 +442,10 @@ declare const uiMessages: import("@k2b/stdlib").Catalog<{
     }) => string;
     range: string;
     resizePanes: string;
+    resizeNavigation: string;
+    resizeWorkspacePane: string;
+    resizeDetailPanel: string;
+    resizeBottomDrawer: string;
     resetMapView: string;
     resetTimelineView: string;
     retryOlderMessages: string;
@@ -448,6 +481,18 @@ declare const uiMessages: import("@k2b/stdlib").Catalog<{
     italicShortcut: string;
     linkShortcut: string;
     markdownFormatting: string;
+    editorLines: ({ count, value }: {
+        count: number;
+        value: string;
+    }) => string;
+    editorWords: ({ count, value }: {
+        count: number;
+        value: string;
+    }) => string;
+    editorCharacters: ({ count, value }: {
+        count: number;
+        value: string;
+    }) => string;
     numberedListShortcut: string;
     quote: string;
     csvSettings: string;
@@ -469,6 +514,8 @@ declare const uiMessages: import("@k2b/stdlib").Catalog<{
     textEditor: string;
     audioUnsupported: string;
     videoUnsupported: string;
+    videoCannotPlay: string;
+    videoCannotPlayDescription: string;
     yes: string;
     installApp: string;
     installNative: ({ appName }: {

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

@@ -237,8 +237,25 @@ export type AppWorkspaceNavTreeProps = {
     onSelectedIdChange?: (id: string) => void;
     onExpandedIdsChange?: (ids: readonly string[]) => void;
     indented?: boolean;
+    /**
+     * Lets people reorder `movable` items among their siblings: by dragging on
+     * fine pointers and with Alt+ArrowUp/ArrowDown on a focused item. The tree
+     * only reports the requested place; the application saves it and renders
+     * the new order, and the tree then keeps focus on the moved item.
+     */
+    onMove?: (move: AppWorkspaceNavTreeMove) => void;
     class?: string;
 };
+/** One requested place for an item among its unchanged siblings. */
+export type AppWorkspaceNavTreeMove = {
+    id: string;
+    /** The parent item, unchanged by the move; `null` on the top level. */
+    parentId: string | null;
+    /** The sibling the item now precedes; `null` when it becomes the last. */
+    beforeId: string | null;
+    /** The sibling the item now follows; `null` when it becomes the first. */
+    afterId: string | null;
+};
 export type AppWorkspaceNavTreeItemProps = {
     id: string;
     label: JSX.Element;
@@ -252,6 +269,8 @@ export type AppWorkspaceNavTreeItemProps = {
     onSelect?: (event: MouseEvent) => void;
     disabled?: boolean;
     icon?: string;
+    /** Names a meaningful icon for screen readers, such as "Homepage"; without it the icon is decorative. */
+    iconLabel?: string;
     /** Replaces `icon` while this branch is expanded and makes the icon the disclosure target. */
     expandedIcon?: string;
     meta?: JSX.Element;
@@ -261,6 +280,8 @@ export type AppWorkspaceNavTreeItemProps = {
     title?: string;
     viewTransitionName?: string;
     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;
     onDragEnter?: JSX.EventHandlerUnion<HTMLDivElement, DragEvent>;
     onDragOver?: JSX.EventHandlerUnion<HTMLDivElement, DragEvent>;
     onDragLeave?: JSX.EventHandlerUnion<HTMLDivElement, DragEvent>;

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

@@ -1,6 +1,6 @@
 export type { AppOverviewCardsProps, AppOverviewEmptyStateProps, AppOverviewPanelProps, AppOverviewProps, } from "./AppOverview";
 export { default as AppOverview } from "./AppOverview";
-export type { AppWorkspaceBottomDrawerHeight, AppWorkspaceBottomDrawerProps, AppWorkspaceContentProps, AppWorkspaceDetailProps, AppWorkspaceDetailWidth, AppWorkspaceMainPaneProps, AppWorkspaceMainProps, AppWorkspaceNavTreeItemProps, AppWorkspaceNavTreeProps, AppWorkspaceProps, AppWorkspaceSidebarAccessoryVisibility, AppWorkspaceSidebarBodyProps, AppWorkspaceSidebarIconActionProps, AppWorkspaceSidebarIconActionTone, AppWorkspaceSidebarIconGridProps, AppWorkspaceSidebarItemActionProps, AppWorkspaceSidebarItemActionsProps, AppWorkspaceSidebarItemIconProps, AppWorkspaceSidebarItemLabelProps, AppWorkspaceSidebarItemMetaProps, AppWorkspaceSidebarItemProps, AppWorkspaceSidebarItemTone, AppWorkspaceSidebarProps, AppWorkspaceSidebarSectionProps, AppWorkspaceSidebarVisibility, } from "./AppWorkspace";
+export type { AppWorkspaceBottomDrawerHeight, AppWorkspaceBottomDrawerProps, AppWorkspaceContentProps, AppWorkspaceDetailProps, AppWorkspaceDetailWidth, AppWorkspaceMainPaneProps, AppWorkspaceMainProps, AppWorkspaceNavTreeItemProps, AppWorkspaceNavTreeMove, AppWorkspaceNavTreeProps, AppWorkspaceProps, AppWorkspaceSidebarAccessoryVisibility, AppWorkspaceSidebarBodyProps, AppWorkspaceSidebarIconActionProps, AppWorkspaceSidebarIconActionTone, AppWorkspaceSidebarIconGridProps, AppWorkspaceSidebarItemActionProps, AppWorkspaceSidebarItemActionsProps, AppWorkspaceSidebarItemIconProps, AppWorkspaceSidebarItemLabelProps, AppWorkspaceSidebarItemMetaProps, AppWorkspaceSidebarItemProps, AppWorkspaceSidebarItemTone, AppWorkspaceSidebarProps, AppWorkspaceSidebarSectionProps, AppWorkspaceSidebarVisibility, } from "./AppWorkspace";
 export { default as AppWorkspace } from "./AppWorkspace";
 export type { AppWorkspaceControllerOptions } from "./app-workspace-controller";
 export { installAppWorkspaceController } from "./app-workspace-controller";
@@ -18,7 +18,7 @@ export { default as FloatingWindow, type FloatingWindowRect, fitFloatingWindowRe
 export type { MobileShellHeaderProps, MobileShellProps } 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, } from "./navigation-model";
+export { createNavigation, findNavigationItem, type NavigationController, type NavigationItem, type NavigationOptions, type NavigationStatus, } from "./navigation-model";
 export type { PanelDialogBodyProps, PanelDialogFooterProps, PanelDialogHeaderProps, PanelDialogProps, PanelDialogSectionProps, PanelDialogSurface, PanelDialogTabOption, PanelDialogTabsProps, } from "./PanelDialog";
 export { confirmDiscardIfDirty, default as PanelDialog, panelDialogFixedOptions, panelDialogFixedPanelClass, panelDialogOptions, panelDialogPanelClass, panelDialogWideOptions, panelDialogWidePanelClass, panelDialogWorkspaceOptions, panelDialogWorkspacePanelClass, } from "./PanelDialog";
 export type { PanelHeaderProps } from "./PanelHeader";

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

@@ -1,11 +1,25 @@
 import type { LinkNavigateEvent, NavigationScrollMode } from "@k2b/ssr/nav";
 import type { Accessor } from "solid-js";
+import type { IntentTone } from "../semantics";
+/** A status icon at a row's end, such as "running". `label` names it for screen readers and as its tooltip. */
+export type NavigationStatus = {
+    icon: string;
+    label: string;
+    tone?: IntentTone;
+};
 type NavigationEntry = {
     id: string;
     label: string;
     icon?: string;
+    /** Names a meaningful icon for screen readers, such as "Homepage"; without it the icon is decorative. */
+    iconLabel?: string;
     badge?: string | number;
     description?: string;
+    /**
+     * Status icon in a fixed-size slot at the row's end. Set `null` on a row whose status comes and goes: the empty slot
+     * keeps its place, so a status change never rewraps the label or moves the rows below.
+     */
+    status?: NavigationStatus | null;
     active?: boolean;
     disabled?: boolean;
     color?: string;
@@ -15,6 +29,17 @@ type NavigationEntry = {
     /** Owner-held disclosure state. The renderer shows it and reports toggles through `onExpandedChange`. */
     expanded?: boolean;
     actions?: readonly NavigationItem[];
+    /**
+     * Square icon buttons in the row, before the `actions` menu. They run an `action`; a destination belongs in a row,
+     * where its link keeps modified clicks and new tabs.
+     */
+    inlineActions?: readonly {
+        id: string;
+        label: string;
+        icon: string;
+        action: string;
+        disabled?: boolean;
+    }[];
 };
 /** Serializable presentation. Functions stay with the controller's owning island. */
 export type NavigationItem = NavigationEntry & ({
@@ -22,17 +47,21 @@ export type NavigationItem = NavigationEntry & ({
     action?: string;
     navigation?: "document" | "enhanced";
     scroll?: NavigationScrollMode;
+    section?: never;
 } | {
     action: string;
     href?: never;
     navigation?: never;
     scroll?: never;
+    section?: never;
 } | {
     href?: never;
     action?: never;
     navigation?: never;
     scroll?: never;
     children: readonly NavigationItem[];
+    /** Shows the group as a plain heading over its rows, always open and not indented, instead of a disclosure. */
+    section?: boolean;
 });
 export type NavigationOptions = {
     items: Accessor<readonly NavigationItem[]>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k2b/ui",
-  "version": "0.16.0",
+  "version": "0.18.0",
   "description": "Production-ready components for SolidJS applications.",
   "repository": {
     "type": "git",