@k2b/ui 0.17.0 → 0.19.0

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

@@ -0,0 +1,109 @@
+/**
+ * The emoji dataset behind `EmojiPicker` and the composer's `:shortcode` completion. The data (about 80 kB compressed)
+ * loads on first use, so a page that never opens either does not download it.
+ */
+/** `0` is the default yellow; `1` (light) to `5` (dark) are the Fitzpatrick modifiers. */
+export type EmojiSkinTone = 0 | 1 | 2 | 3 | 4 | 5;
+export declare const EMOJI_SKIN_TONES: readonly EmojiSkinTone[];
+/** The groups in their order. Emojibase numbers them 0 to 9; 2 holds skin-tone parts and never appears. */
+export declare const EMOJI_GROUPS: readonly [{
+    readonly id: 0;
+    readonly key: "smileys";
+    readonly icon: "ti ti-mood-smile";
+}, {
+    readonly id: 1;
+    readonly key: "people";
+    readonly icon: "ti ti-hand-stop";
+}, {
+    readonly id: 3;
+    readonly key: "animals";
+    readonly icon: "ti ti-paw";
+}, {
+    readonly id: 4;
+    readonly key: "food";
+    readonly icon: "ti ti-tools-kitchen-2";
+}, {
+    readonly id: 5;
+    readonly key: "travel";
+    readonly icon: "ti ti-plane";
+}, {
+    readonly id: 6;
+    readonly key: "activities";
+    readonly icon: "ti ti-ball-football";
+}, {
+    readonly id: 7;
+    readonly key: "objects";
+    readonly icon: "ti ti-bulb";
+}, {
+    readonly id: 8;
+    readonly key: "symbols";
+    readonly icon: "ti ti-heart";
+}, {
+    readonly id: 9;
+    readonly key: "flags";
+    readonly icon: "ti ti-flag";
+}];
+export type EmojiGroupKey = (typeof EMOJI_GROUPS)[number]["key"];
+export type EmojiEntry = {
+    emoji: string;
+    group: number;
+    /** The light variant; the other tones swap its modifier. Absent for emoji without skin tones. */
+    light?: string;
+    name: {
+        en: string;
+        de: string;
+    };
+    shortcodes: readonly string[];
+    /** Normalized names, keywords and shortcodes for search. */
+    search: {
+        names: readonly string[];
+        keywords: readonly string[];
+        shortcodes: readonly string[];
+        words: readonly string[];
+    };
+};
+export type EmojiIndex = {
+    entries: readonly EmojiEntry[];
+    /** Every emoji and skin-tone variant, without presentation selectors, to its entry. Look up with `findEmoji`. */
+    byEmoji: ReadonlyMap<string, EmojiEntry>;
+    byShortcode: ReadonlyMap<string, EmojiEntry>;
+};
+/** Lower case without accents, so "lacheln", "laecheln" and "Lächeln" meet; `_` and `-` separate words. */
+export declare const normalizeEmojiQuery: (value: string) => string;
+export declare const parseEmojiData: (data: string) => EmojiIndex;
+/** Loads and indexes the dataset once. A failed load is retried on the next call. */
+export declare const loadEmojiIndex: () => Promise<EmojiIndex>;
+/** The entry of an emoji in any skin tone, with or without presentation selectors. */
+export declare const findEmoji: (index: EmojiIndex, emoji: string) => EmojiEntry | undefined;
+/** The emoji in `tone`; emoji without skin tones stay as they are. */
+export declare const emojiInTone: (entry: EmojiEntry, tone: EmojiSkinTone) => string;
+/** The name in the render language: German for `de` locales, English otherwise. */
+export declare const emojiName: (entry: EmojiEntry, locale: string) => string;
+/** Matches in English and German names, keywords and shortcodes, best first and otherwise in Unicode order. */
+export declare const searchEmoji: (index: EmojiIndex, query: string, limit?: number) => EmojiEntry[];
+/**
+ * The suggestions for a `:shortcode` being typed. Only the start of a shortcode, name, word or keyword counts, and a
+ * leading sign must start a shortcode, as in `:+1` and `:-1`: emoticons such as `:DD`, `:-D` or `:-P` find nothing,
+ * so Enter still sends them.
+ */
+export declare const suggestEmoji: (index: EmojiIndex, query: string, limit: number) => EmojiEntry[];
+/** As many recent emoji as the picker shows: three rows. */
+export declare const RECENT_EMOJI_LIMIT = 24;
+/** The recent list after `emoji` was used: it moves to the front, once, and the oldest drop off. */
+export declare const rememberEmoji: (recent: readonly string[], emoji: string) => string[];
+export type EmojiShortcodeQuery = {
+    start: number;
+    end: number;
+    query: string;
+};
+/**
+ * The `:shortcode` being typed at the caret: a colon at the start or after a space or "(", then at least two letters,
+ * digits, "_", "+" or "-". Code, URLs ("https://") and times ("10:30") are no queries.
+ */
+export declare const emojiShortcodeQuery: (text: string, caret: number, selectionEnd?: number) => EmojiShortcodeQuery | null;
+/** A complete `:shortcode:` just typed at the caret, such as `:thumbsup:`, with its range. */
+export declare const completedEmojiShortcode: (text: string, caret: number) => {
+    start: number;
+    end: number;
+    shortcode: string;
+} | null;

package/dist/types/inputs/emoji/emoji-messages.d.ts

@@ -0,0 +1,30 @@
+/** The picker's own strings. They live with the picker, so pages without it do not carry them. */
+declare const emojiMessages: import("@k2b/stdlib").Catalog<{
+    emojiPicker: string;
+    emojiSearch: string;
+    emojiGroups: string;
+    emojiRecent: string;
+    emojiSmileys: string;
+    emojiPeople: string;
+    emojiAnimals: string;
+    emojiFood: string;
+    emojiTravel: string;
+    emojiActivities: string;
+    emojiObjects: string;
+    emojiSymbols: string;
+    emojiFlags: string;
+    emojiSkinTone: string;
+    emojiToneDefault: string;
+    emojiToneLight: string;
+    emojiToneMediumLight: string;
+    emojiToneMedium: string;
+    emojiToneMediumDark: string;
+    emojiToneDark: string;
+    emojiNoResults: string;
+    emojiLoadFailed: string;
+}>;
+export type EmojiMessages = ReturnType<(typeof emojiMessages)["resolve"]>["t"];
+/** Resolved from the inherited render locale, like the rest of @k2b/ui. */
+export declare const useEmojiMessages: () => (() => EmojiMessages);
+export declare const checkEmojiMessages: () => import("@k2b/stdlib").CatalogIssue[];
+export {};

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

@@ -6,6 +6,8 @@ export type { CheckboxProps } from "./Checkbox";
 export { Checkbox } from "./Checkbox";
 export type { CheckboxCardProps } from "./CheckboxCard";
 export { CheckboxCard } from "./CheckboxCard";
+export type { ChoiceChipOption, ChoiceChipsProps } from "./ChoiceChips";
+export { ChoiceChips } from "./ChoiceChips";
 export type { ColorInputProps, PinInputProps, SliderProps, } from "./ChoiceInputs";
 export { ColorInput, PinInput, Slider } from "./ChoiceInputs";
 export type { ComboboxOption, ComboboxProps } from "./Combobox";
@@ -15,6 +17,12 @@ 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 { EmojiPickerPopoverProps, EmojiPickerProps } from "./emoji/EmojiPicker";
+export { EmojiPicker } from "./emoji/EmojiPicker";
+export type { EmojiSkinTone } from "./emoji/emoji-index";
+export { rememberEmoji } from "./emoji/emoji-index";
+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";
@@ -33,10 +41,14 @@ export type { ChoiceAppearance, SelectGridSize, SelectGroup, SelectOption, Selec
 export { Select } from "./Select";
 export type { SelectChipOption, SelectChipProps } from "./SelectChip";
 export { SelectChip } from "./SelectChip";
+export type { SignatureInputProps } from "./SignatureInput";
+export { SignatureInput } from "./SignatureInput";
 export type { IconInputProps, IconOption } from "./SpecialInputs";
 export { IconInput } from "./SpecialInputs";
 export type { SwitchProps } from "./Switch";
 export { Switch } from "./Switch";
+export type { SignaturePngOptions, SignatureValue } from "./signature";
+export { parseSignature, signatureToPng } from "./signature";
 export type { TagEditorItem, TagEditorLabels, TagEditorProps, TagEditorValue } from "./TagEditor";
 export { TagEditor } from "./TagEditor";
 export type { TagsInputProps } from "./TagsInput";

package/dist/types/inputs/markdown/actions.d.ts

@@ -1,8 +1,12 @@
 export declare const toggleBold: (textarea: HTMLTextAreaElement) => void;
 export declare const toggleItalic: (textarea: HTMLTextAreaElement) => void;
 export declare const toggleCode: (textarea: HTMLTextAreaElement) => void;
+/** Wraps the selection in `marker`, or unwraps it; without a selection the caret lands between two markers. */
+export declare const toggleInlineMarker: (textarea: HTMLTextAreaElement, marker: string) => void;
 export declare const insertLink: (textarea: HTMLTextAreaElement, url?: string) => void;
 export declare const toggleHeading: (textarea: HTMLTextAreaElement, level: 1 | 2 | 3) => void;
 export declare const toggleBulletList: (textarea: HTMLTextAreaElement) => void;
+/** Puts the selected lines between ``` fences. Inside a fenced block, from its opening line on, it removes that block's fences. */
+export declare const toggleCodeBlock: (textarea: HTMLTextAreaElement) => void;
 export declare const toggleQuote: (textarea: HTMLTextAreaElement) => void;
 export declare const toggleNumberedList: (textarea: HTMLTextAreaElement) => void;

package/dist/types/inputs/markdown/code-zone.d.ts

@@ -1 +1,8 @@
+/** Whether `line` closes a block that `marker` opened: the same character, at least as many, nothing after it. */
+export declare const closesCodeFence: (line: string, marker: string) => boolean;
+/** The fenced code block that is still open at `position`, judged by the text before it: its opening line's start and marker. */
+export declare const openCodeFence: (text: string, position: number) => {
+    start: number;
+    marker: string;
+} | null;
 export declare const isInCodeZone: (text: string, position: number) => boolean;

package/dist/types/inputs/signature-messages.d.ts

@@ -0,0 +1,11 @@
+export declare const useSignatureMessages: () => () => {
+    method: string;
+    draw: string;
+    type: string;
+    signHere: string;
+    drawArea: string;
+    drawn: string;
+    typeName: string;
+    undo: string;
+};
+export declare const checkSignatureMessages: () => import("@k2b/stdlib").CatalogIssue[];

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

@@ -0,0 +1,72 @@
+/**
+ * A signature as the field reports it. `kind` records how it was given, so the
+ * application can keep that fact next to the image. `svg` is a standalone SVG
+ * document whose ink uses `currentColor`, so it renders black as an image. A
+ * value that arrives from a browser is untrusted input: read it with
+ * `parseSignature` before storing or embedding it.
+ */
+export type SignatureValue = {
+    kind: "drawn";
+    svg: string;
+} | {
+    kind: "typed";
+    name: string;
+    svg: string;
+};
+/** One sampled pointer position in drawing units, with a pressure from 0 to 1. */
+export type SignaturePoint = {
+    x: number;
+    y: number;
+    pressure: number;
+};
+/** The drawing space as an SVG viewBox and one closed outline path per stroke. */
+export type SignatureDrawing = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    strokes: readonly string[];
+};
+/** Escapes text for XML content or attributes and drops characters XML cannot hold, so the document stays well-formed. */
+export declare const escapeXml: (text: string) => string;
+/** The name as a typed signature stores it: without characters an SVG cannot hold and without surrounding space. */
+export declare const signatureName: (name: string) => string;
+/** Stroke width in drawing units at a pressure: light pressure still leaves a readable line. */
+export declare const strokeWidth: (size: number, pressure: number) => number;
+/**
+ * Turns sampled points into one filled outline: both edges follow the points at
+ * half the local stroke width and are smoothed through their midpoints, and
+ * round caps close the ends. A filled outline, unlike a stroked path, can change
+ * width along the line, so pen pressure and drawing speed show in the ink.
+ */
+export declare const strokeOutline: (points: readonly SignaturePoint[], size: number) => string;
+/** Serializes a drawing as a standalone SVG document; an empty drawing has no value. */
+export declare const drawingToSvg: (drawing: SignatureDrawing) => string | null;
+/** Reads the drawing space and strokes back from an SVG drawingToSvg wrote, so a stored signature can be extended or undone. */
+export declare const svgToDrawing: (svg: string) => SignatureDrawing | null;
+/**
+ * Lays out a typed name as an SVG document in the given font family. `measure`
+ * returns the text width at `TYPED_FONT_SIZE`; without one, the width is estimated.
+ */
+export declare const typedToSvg: (name: string, fontFamily: string, measure?: (text: string, font: string) => number | undefined) => string;
+/**
+ * Reads a submitted signature on the server: the JSON string of the field's
+ * hidden input, or a value the browser sent as JSON. It accepts only markup
+ * the field writes and returns it rebuilt, so the result is safe to store and
+ * to embed. An empty or invalid value returns `null`.
+ */
+export declare const parseSignature: (input: unknown) => SignatureValue | null;
+export type SignaturePngOptions = {
+    /** Device pixels per SVG unit. Defaults to `2`. */
+    scale?: number;
+    /** Ink colour. Defaults to `"#000000"`. */
+    color?: string;
+    /** Background fill. Defaults to transparent. */
+    background?: string;
+};
+/**
+ * Rasterizes a signature into a PNG data URL in the browser, for a document or
+ * service that needs a bitmap. A typed signature renders with the fonts
+ * installed on this device: an SVG image cannot use the page's web fonts.
+ */
+export declare const signatureToPng: (value: SignatureValue, options?: SignaturePngOptions) => Promise<string>;

package/dist/types/internal/render-error.d.ts

@@ -0,0 +1,13 @@
+import { type JSX } from "solid-js";
+/**
+ * Guards a Solid root that @k2b/ui creates itself, such as a dialog or a floating window. These roots are mostly
+ * opened from a click handler, outside any owner and any island boundary. Without a boundary of their own, content
+ * that throws on an update throws into the code that wrote the signal and leaves other parts of the page stale.
+ * The content is created untracked, as `render()` and components create it, so a signal it reads directly does not
+ * rebuild it. `onClose` adds a Close button for a root whose content draws its own close control.
+ */
+export declare function RenderErrorBoundary(props: {
+    content: () => JSX.Element;
+    onClose?: () => void;
+    onError?: () => void;
+}): JSX.Element;

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

@@ -38,9 +38,18 @@ 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;
+    couldNotDisplayContent: string;
     datePicker: string;
     dataTable: string;
     datePresets: string;
@@ -54,6 +63,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;
@@ -167,6 +196,28 @@ declare const uiMessages: import("@k2b/stdlib").Catalog<{
         start: string;
         end: string;
     }) => string;
+    timeline: string;
+    timelineHint: string;
+    timelineTimeRange: ({ start, end }: {
+        start: string;
+        end: string;
+    }) => string;
+    timelineDone: string;
+    timelineOpen: string;
+    timelineNight: ({ start, end }: {
+        start: string;
+        end: string;
+    }) => string;
+    timelineNothingPlanned: string;
+    timelineFree: ({ duration }: {
+        duration: string;
+    }) => string;
+    timelineMore: ({ count }: {
+        count: number;
+    }) => string;
+    timelineNow: ({ time }: {
+        time: string;
+    }) => string;
     today: string;
     day: string;
     week: string;
@@ -230,6 +281,10 @@ declare const uiMessages: import("@k2b/stdlib").Catalog<{
         time: string;
     }) => string;
     messageStop: string;
+    resourceUntitled: string;
+    resourceNoAccess: string;
+    resourceDeleted: string;
+    resourceUnavailable: string;
     conversationMessages: ({ label }: {
         label: string;
     }) => string;
@@ -322,6 +377,7 @@ declare const uiMessages: import("@k2b/stdlib").Catalog<{
     templatePreview: string;
     lastRequestContext: string;
     contextWindowUsed: string;
+    contextWindow: string;
     contextUsageUnavailable: string;
     contextUsageUnavailableWithWindow: ({ window }: {
         window: string;
@@ -342,6 +398,13 @@ declare const uiMessages: import("@k2b/stdlib").Catalog<{
         label: string;
     }) => string;
     rowAction: string;
+    sidebarUnread: ({ count }: {
+        count: number;
+    }) => string;
+    sidebarUnreadMany: string;
+    sidebarNewActivity: string;
+    sidebarMentioned: string;
+    sidebarMuted: string;
     addToNamed: ({ name }: {
         name: string;
     }) => string;
@@ -378,6 +441,8 @@ declare const uiMessages: import("@k2b/stdlib").Catalog<{
         status: number;
     }) => string;
     pdfPreviewTabBlocked: string;
+    pdfPreviewNoViewer: string;
+    pdfPreviewNoViewerDescription: string;
     pdfPreviewRendering: string;
     pickIcon: string;
     postMessage: string;
@@ -389,6 +454,24 @@ declare const uiMessages: import("@k2b/stdlib").Catalog<{
     sending: string;
     steering: string;
     writeMessage: string;
+    writeConversationMessage: string;
+    composerFormatting: string;
+    strikethroughShortcut: string;
+    codeBlock: string;
+    insertLink: string;
+    insertEmoji: string;
+    emojiSuggestions: string;
+    dictate: string;
+    dictateOrHold: string;
+    stopDictation: string;
+    microphoneOptions: string;
+    recordVoiceMessage: string;
+    dictationListening: string;
+    dictationRefining: string;
+    dictationRefined: string;
+    dictationUnrefined: string;
+    dictationInterrupted: string;
+    restoreOriginal: string;
     openInNewTab: ({ name }: {
         name: string;
     }) => string;
@@ -413,6 +496,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 +535,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 +568,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

@@ -228,6 +228,22 @@ export type AppWorkspaceSidebarItemActionsProps = {
     children: JSX.Element;
     visibility?: AppWorkspaceSidebarAccessoryVisibility;
 };
+/**
+ * Unread state for the trailing `meta` slot. Every mark keeps a fixed width,
+ * so the row keeps its height and the label its start in every state.
+ */
+export type AppWorkspaceSidebarItemStatusProps = {
+    /**
+     * A positive number shows a count (above 99 as "99+") and sets the label in
+     * a stronger weight; `true` shows a quiet dot for new activity that should
+     * not draw attention, such as in a muted conversation.
+     */
+    unread?: number | boolean;
+    /** Marks unread items that mention the person with "@". */
+    mention?: boolean;
+    /** Shows a muted bell. */
+    muted?: boolean;
+};
 export type AppWorkspaceNavTreeProps = {
     children: JSX.Element;
     ariaLabel: string;
@@ -237,8 +253,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 +285,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 +296,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>;
@@ -289,6 +326,7 @@ type AppWorkspaceComponent = ((props: AppWorkspaceProps) => JSX.Element) & {
     SidebarItemMeta: (props: AppWorkspaceSidebarItemMetaProps) => JSX.Element;
     SidebarItemAction: (props: AppWorkspaceSidebarItemActionProps) => JSX.Element;
     SidebarItemActions: (props: AppWorkspaceSidebarItemActionsProps) => JSX.Element;
+    SidebarItemStatus: (props: AppWorkspaceSidebarItemStatusProps) => JSX.Element;
     NavTree: AppWorkspaceNavTreeComponent;
     SidebarIconGrid: (props: AppWorkspaceSidebarIconGridProps) => JSX.Element;
     SidebarIconAction: (props: AppWorkspaceSidebarIconActionProps) => JSX.Element;

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

@@ -7,5 +7,7 @@ export declare function SidebarItemPreview(props: {
     trigger?: "action" | "row";
     align?: "center" | "end";
     viewportSize?: ScrollAreaProps["viewportSize"];
+    /** The row's metadata; a row trigger, named by `label`, keeps it as its description. */
+    describedBy?: string;
     onOpenChange?: (open: boolean) => void;
 }): JSX.Element;

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, AppWorkspaceSidebarItemStatusProps, 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";