@k2b/ui 0.18.0 → 0.19.0

package/dist/types/actions/Dropdown.d.ts

@@ -18,7 +18,8 @@ export type DropdownAction = (DropdownActionBase & {
 }) | (DropdownActionBase & {
     href: string;
     external?: boolean;
-    action?: never;
+    /** Runs on a plain click instead of following the link; modified clicks, middle-click, and the link's menu keep it. */
+    action?: () => void;
 }) | (DropdownActionBase & {
     disabled: true;
     action?: never;
@@ -35,6 +36,11 @@ export type DropdownChoice = DropdownActionBase & {
 };
 export type DropdownSection = {
     sectionLabel?: string;
+    /**
+     * `row` sets a few short radio choices, such as a sort direction, side by side as one segmented row. Give it a
+     * `sectionLabel`: the label names the choice above the row and for screen readers.
+     */
+    layout?: "row";
     items: readonly (DropdownAction | DropdownChoice)[];
 };
 export type DropdownItem = DropdownAction | DropdownChoice | DropdownSection;
@@ -82,9 +88,15 @@ export type DropdownItemProps = {
     variant?: "danger";
     href?: string;
     external?: boolean;
+    /** Runs when the item is chosen. With `href`, a plain click runs it instead of following the link. */
     onSelect?: () => void;
     class?: string;
 };
+/**
+ * Left and Right cycle through the segments of a row section; Up and Down leave it like any item. Returns whether
+ * the key moved focus.
+ */
+export declare const focusRowSegment: (items: HTMLElement[], key: string) => boolean;
 export declare const dropdownPosition: (trigger: DOMRect, menu: Pick<DOMRect, "width" | "height">, position: DropdownPosition, viewport: {
     width: number;
     height: number;

package/dist/types/actions/FilterChip.d.ts

@@ -10,6 +10,11 @@ export type FilterChipSection = {
     label?: string;
     options: readonly FilterChipOption[];
     multiple?: boolean;
+    /**
+     * `row` sets a few short single-select options side by side as one segmented row under its `label`. Selecting the
+     * chosen option again keeps it; give the row a value in `defaultValue` so Reset keeps a choice too.
+     */
+    layout?: "row";
 };
 export type FilterChipProps = {
     label: string;

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

@@ -1,5 +1,5 @@
 import { type JSX } from "solid-js";
-import type { ChatAction, ChatAttachment, ChatComposerState, ChatContextUsageData, ChatMention, ChatModelOption, ChatSubmitInput } from "./types";
+import type { ChatAction, ChatAttachment, ChatComposerEmoji, ChatComposerMicrophone, ChatComposerState, ChatContextUsageData, ChatMention, ChatModelOption, ChatSubmitInput } from "./types";
 export type ChatCommandContext = {
     setValue: (value: string) => void;
     submit: () => void;
@@ -17,6 +17,12 @@ export type ChatCommand = {
 };
 export type ChatFileSelection = {
     onSelect: (files: readonly File[]) => void | Promise<void>;
+    /**
+     * Chooses files for "Attach files" instead of the device's file dialog, for example to offer other sources as well.
+     * Called within the menu activation, so it may still open the device's dialog; resolve `[]` when the user cancels.
+     * `multiple: false` keeps the first chosen file, and a rejection reaches `onError`.
+     */
+    choose?: () => Promise<readonly File[]>;
     onError?: (error: unknown) => void;
     accept?: string;
     multiple?: boolean;
@@ -71,5 +77,22 @@ export type ChatComposerProps = {
     focusToken?: unknown;
     draftKey?: unknown;
     class?: string;
+    /**
+     * `"conversation"` is the composer for messages between people: one row with attach, a pill-shaped field and Send,
+     * without the assistant prompt's footer. The field starts with one line and grows to a third of its nearest size
+     * container, a hint line of fixed height sits above it, its buttons keep it focused, and Enter breaks the line
+     * inside an open code block and on touch-only devices. The default is the assistant prompt.
+     */
+    variant?: "default" | "conversation";
+    /** `"enter"` (default): Enter sends and Shift+Enter breaks the line. `"mod-enter"`: Enter breaks the line. Ctrl/⌘+Enter always sends. */
+    sendKey?: "enter" | "mod-enter";
+    /** Adds "Aa", which opens one row of Markdown formatting buttons above the field; the field and its controls stay put. */
+    formatting?: boolean;
+    /** An emoji button at a fixed place. Touch-only devices hide it; their keyboard has emoji. */
+    emoji?: ChatComposerEmoji;
+    /** A microphone at a fixed place: a tap dictates, holding it or its menu asks for a voice message. */
+    microphone?: ChatComposerMicrophone;
+    /** One line above the field. The conversation variant always keeps its height; the default shows it only with content. */
+    hint?: JSX.Element;
 };
 export declare function ChatComposer(props: ChatComposerProps): JSX.Element;

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

@@ -24,3 +24,18 @@ export declare const runChatSubmission: (run: ChatSubmissionRun) => Promise<bool
 export declare const reportChatFailure: (perform: () => unknown, onError?: (error: unknown) => void) => void;
 /** Executes the one behavior guaranteed by the ChatAction contract. */
 export declare const executeChatAction: (action: ChatAction) => Promise<void>;
+export type ChatEnterKey = {
+    shiftKey: boolean;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    altKey: boolean;
+};
+/**
+ * What Enter does in a conversation composer: Ctrl/⌘+Enter always sends; Shift+Enter, Enter inside an open code
+ * block, and Enter on a touch-only device break the line; otherwise `sendKey` decides. IME input is the caller's check.
+ */
+export declare const conversationEnterAction: (key: ChatEnterKey, context: {
+    sendKey: "enter" | "mod-enter";
+    touchOnly: boolean;
+    inCodeBlock: boolean;
+}) => "send" | "newline";

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

@@ -11,7 +11,7 @@ export type { ChatActivityProps, ChatContextUsageProps, ChatMessageProps } from
 export { formatChatTokens } from "./ChatPrimitives";
 export type { ChatRootProps } from "./ChatRoot";
 export type { ChatActivityItem, ChatMessageItem, ChatTimelineItem, ChatTimelineProps } from "./ChatTimeline";
-export type { ChatAction, ChatActivityTone, ChatAttachment, ChatComposerState, ChatContextUsageData, ChatMention, ChatMessageStatus, ChatModelOption, ChatRole, ChatSubmitInput, ChatSubmitIntent, ChatUsage, } from "./types";
+export type { ChatAction, ChatActivityTone, ChatAttachment, ChatComposerEmoji, ChatComposerMicrophone, ChatComposerState, ChatContextUsageData, ChatDictationState, ChatMention, ChatMessageStatus, ChatModelOption, ChatRole, ChatSubmitInput, ChatSubmitIntent, ChatUsage, } from "./types";
 /**
  * Portable, controlled chat surface. Applications own storage, streaming,
  * authorization, rich message rendering, and domain actions.

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

@@ -1,3 +1,4 @@
+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";
@@ -68,4 +69,37 @@ export type ChatMention = {
     end: number;
     attachment: ChatAttachment;
 };
+/**
+ * Live dictation as the caller runs it: `listening` while speech arrives, `refining` after the stop until the refined
+ * text replaced it, `refined` afterwards, `unrefined` when the raw text stays, and `interrupted` when the connection
+ * ended early and the text so far stays.
+ */
+export type ChatDictationState = "listening" | "refining" | "refined" | "unrefined" | "interrupted";
+/** The composer's microphone. Dictation comes first; a voice message is the deliberate second action. */
+export type ChatComposerMicrophone = {
+    /** A tap starts or stops live dictation. Without it, a tap opens the microphone menu. */
+    onDictate?: () => void;
+    /** Holding the microphone, or "Record voice message" in its menu. Omit it where recording is not available. */
+    onVoiceMessage?: () => void;
+    /** The dictation state, shown on the microphone and in the hint line. */
+    dictation?: ChatDictationState | null;
+    /** Offered as "Restore original" while `dictation` is `refined`. */
+    onRestoreOriginal?: () => void;
+    disabled?: boolean;
+};
+/**
+ * The composer's emoji button and `:shortcode` completion. Typing a colon and two letters suggests emoji by their
+ * English or German name or GitHub shortcode; a complete `:thumbsup:` becomes 👍 when its closing colon is typed.
+ */
+export type ChatComposerEmoji = {
+    /** Opens the emoji choice next to `anchor`, usually `EmojiPicker.Popover`; `insert` puts the chosen text at the caret. */
+    onOpen: (context: {
+        anchor: HTMLElement;
+        insert: (text: string) => void;
+    }) => void;
+    /** The skin tone of completed emoji that have one, as in the picker. */
+    skinTone?: EmojiSkinTone;
+    /** Called with each emoji the completion inserted, for example to remember it with `rememberEmoji`. */
+    onPick?: (emoji: string) => void;
+};
 export {};

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

@@ -15,7 +15,16 @@ export type CalendarEvent = {
     dataSpaceItemId?: string;
     meta?: string;
     description?: string;
-    display?: "event" | "background";
+    /**
+     * `marker` draws a point in time, such as a deadline, as a colored marker
+     * beside its title instead of a filled band.
+     */
+    display?: "event" | "background" | "marker";
+    /**
+     * Short text the accessible name adds after the title and time, for state the event shows only visually, such as
+     * a priority flag in custom `renderEvent` content.
+     */
+    accessibleDetail?: string;
     location?: string;
     calendarName?: string;
     attendees?: CalendarAttendee[];
@@ -55,11 +64,20 @@ export type CalendarEventRenderContext = {
     durationHours: number;
     timeLabel: string;
 };
-export type CalendarProps = {
+/** A view the application adds to the switcher; the calendar shows its header and toolbar, the application the body. */
+export type CalendarCustomView<V extends string = string> = {
+    value: V;
+    label: string;
+};
+export type CalendarProps<V extends string = never> = {
     date: Date | string;
     events: CalendarEvent[];
-    view?: CalendarView;
+    view?: CalendarView | V;
     views?: CalendarView[];
+    /** Views after the built-in ones. While one is active, `children` is the body and the header pages by day. */
+    customViews?: CalendarCustomView<V>[];
+    /** The body of the active custom view. */
+    children?: JSX.Element;
     labels?: CalendarLabels;
     /** stdlib date context used for timezone-aware rendering and calendar math. */
     dateConfig?: DateContext;
@@ -76,8 +94,8 @@ export type CalendarProps = {
     selectedDate?: Date | string;
     selectedEventId?: string;
     dayBadges?: Record<string, CalendarDayBadge>;
-    getViewHref?: (view: CalendarView) => string;
-    getDateHref?: (date: Date, view: CalendarView) => string;
+    getViewHref?(view: CalendarView | V): string;
+    getDateHref?(date: Date, view: CalendarView | V): string;
     getEventHref?: (event: CalendarEvent) => string | undefined;
     renderEvent?: (event: CalendarEvent, context: CalendarEventRenderContext) => JSX.Element;
     /** Progressively enhance canonical calendar links after the app has loaded their target state. */
@@ -87,8 +105,8 @@ export type CalendarProps = {
     /** Optionally preload the target behind a canonical calendar link. */
     onPrefetch?: (href: string) => void;
     navigationPending?: boolean;
-    onViewChange?: (view: CalendarView) => void;
-    onDateChange?: (date: Date, view: CalendarView) => void;
+    onViewChange?(view: CalendarView | V): void;
+    onDateChange?(date: Date, view: CalendarView | V): void;
     /** One activation contract for pointer and keyboard input. */
     onEventActivate?: (event: CalendarEvent) => void;
     /** Pointer gesture used for activation. Keyboard activation is always immediate. */
@@ -111,5 +129,7 @@ export type CalendarDayBadge = {
     icon?: string;
     label: string;
 };
-declare const Calendar: (props: CalendarProps) => JSX.Element;
+/** JSX infers the values of `customViews`; inference from the last signature, as in `createComponent`, sees plain props. */
+declare function Calendar<V extends string = never>(props: CalendarProps<V>): JSX.Element;
+declare function Calendar(props: CalendarProps): JSX.Element;
 export default Calendar;

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

@@ -1,7 +1,15 @@
+/** One more thing to do with the shown image, beside Download: a short label, its icon class, and what it does. */
+export type LightboxAction = {
+    label: string;
+    icon: string;
+    onClick: () => void;
+};
 export type LightboxImage = {
     src: string;
     alt?: string;
     downloadUrl?: string;
+    /** Actions for this image, shown before Download in the same style. */
+    actions?: readonly LightboxAction[];
 };
 type LightboxProps = {
     images: LightboxImage[];

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

@@ -0,0 +1,49 @@
+import type { DateContext } from "@k2b/stdlib";
+import { type JSX } from "solid-js";
+import { type TimelineItem } from "./timeline-model";
+export type { TimelineColor, TimelineItem } from "./timeline-model";
+export type TimelineController = {
+    /** Scrolls a time into view; `start` (default) puts it near the start edge, `center` in the middle. */
+    scrollToTime: (time: Date | string, options?: {
+        align?: "start" | "center";
+    }) => void;
+    /** Scrolls the current time to the middle of the view. */
+    scrollToNow: () => void;
+};
+export type TimelineProps = {
+    items: readonly TimelineItem[];
+    /** Start of the loaded range. The view starts here, so pass the first time the reader should see. */
+    from: Date | string;
+    /** End of the loaded range (exclusive). */
+    to: Date | string;
+    /** The current time. Without it the timeline uses the clock and moves the now line every 30 seconds. */
+    now?: Date | string;
+    /** Accessible name of the region. Defaults to "Timeline". */
+    label?: string;
+    /** stdlib date context: time zone and locale of days, hours, and folds. */
+    dateConfig?: DateContext;
+    /** Convenience override for `dateConfig.timeZone`. */
+    timeZone?: string;
+    /** Level of the per-day headings. Defaults to 3. */
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+    /** Opens an item, on click, Enter, or Space. */
+    onActivate?: (item: TimelineItem) => void;
+    /** Changes the checkbox of an item, on a click on the box or Space. Leave it out when the reader may not change it. */
+    onToggle?: (item: TimelineItem, checked: boolean) => void;
+    /**
+     * Called once when the reader nears the start, again once `from` moved and changed the strip's length. Extend `from`
+     * to load earlier days.
+     */
+    onLoadEarlier?: () => unknown;
+    /** Called once when the reader nears the end, again once `to` moved and changed the strip's length. Extend `to` to load later days. */
+    onLoadLater?: () => unknown;
+    /** Marks the region busy, for example while a range loads. */
+    busy?: boolean;
+    controller?: (controller: TimelineController) => void;
+    class?: string;
+};
+/**
+ * A continuous filmstrip of time: waking hours are proportional, nights and empty days fold, overlapping bands share
+ * lanes. Wide containers show it horizontally, narrow ones vertically; both use the same model.
+ */
+export default function Timeline(props: TimelineProps): JSX.Element;

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

@@ -1,4 +1,4 @@
-export type { CalendarAttendee, CalendarDayBadge, CalendarEvent, CalendarEventColor, CalendarEventRenderContext, CalendarEventTimeChange, CalendarLabels, CalendarProps, CalendarRecurrence, CalendarResource, CalendarView, } from "./Calendar";
+export type { CalendarAttendee, CalendarCustomView, CalendarDayBadge, CalendarEvent, CalendarEventColor, CalendarEventRenderContext, CalendarEventTimeChange, CalendarLabels, CalendarProps, CalendarRecurrence, CalendarResource, CalendarView, } from "./Calendar";
 export { default as Calendar } from "./Calendar";
 export type { ChartKind, ChartLabels, ChartProps, ChartRenderOptions } from "./Chart";
 export { default as Chart } from "./Chart";
@@ -26,7 +26,7 @@ export { FileBrowserPanel, type FileBrowserPanelProps, type FileSource, openFile
 export { FileGrid, type FileGridProps } from "./FileGrid";
 export { default as FileTree, type FileTreeActions, type FileTreeEntry, type FileTreeProps } from "./FileTree";
 export { canPreviewFile, default as FileView, type FileViewContent, type FileViewFile, type FileViewPreviewKind, type FileViewProps, type FileViewRenderer, type FileViewRendererProps, formatFileViewSize, getFileViewPreviewKind, } from "./FileView";
-export type { LightboxImage } from "./Lightbox";
+export type { LightboxAction, LightboxImage } from "./Lightbox";
 export { default as Lightbox } from "./Lightbox";
 export type { LogTableEntry } from "./LogEntriesTable";
 export { default as LogEntriesTable } from "./LogEntriesTable";
@@ -42,6 +42,8 @@ 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 type { TimelineColor, TimelineController, TimelineItem, TimelineProps } from "./Timeline";
+export { default as Timeline } from "./Timeline";
 export { VideoPlayer, type VideoPlayerProps } from "./VideoPlayer";
 export type { VirtualFeedController, VirtualFeedProps, VirtualFeedScrollOptions } from "./VirtualFeed";
 export { VirtualFeed } from "./VirtualFeed";

package/dist/types/content/timeline-model.d.ts

@@ -0,0 +1,148 @@
+import { type DateContext } from "@k2b/stdlib";
+/** A color token of the shared calendar palette, or a hex color such as a label color. */
+export type TimelineColor = "blue" | "emerald" | "amber" | "red" | "violet" | "cyan" | "zinc" | `#${string}`;
+export type TimelineItem = {
+    /** Unique among the items. */
+    id: string;
+    label: string;
+    /** A date-only string (`2026-10-08`) is a day in the time zone; anything else is an instant. */
+    start: Date | string;
+    /** End of a band. Without it, the item is a point in time. For all-day items, a midnight end is exclusive. */
+    end?: Date | string;
+    allDay?: boolean;
+    /** `band` (default) shows the duration; `marker` shows a point in time at `start`, such as a deadline. */
+    kind?: "band" | "marker";
+    color?: TimelineColor;
+    /** Extra text such as a place or a category: read with the item and shown where there is room. */
+    detail?: string;
+    /** Checkbox state. Leave it out for items without a checkbox. */
+    checked?: boolean;
+    /** Link target; without it the item is a button. */
+    href?: string;
+};
+/**
+ * A place on the main axis as the count of each unit before it: hours of waking time, nights, folds of empty days,
+ * day headings, and all-day rows. The axis gives every unit its size, so one model serves both axes.
+ */
+export type TimelineSpan = readonly [hours: number, nights: number, folds: number, heads: number, rows: number];
+export type TimelineUnits = TimelineSpan;
+export declare const TIMELINE_UNIT_NAMES: readonly ["hour", "night", "fold", "head", "row"];
+/** Waking hours; the night between them is folded. */
+export declare const TIMELINE_WAKE_HOURS: readonly [6, 22];
+/** Visible lanes of overlapping bands and of all-day items; more overlaps collapse into a "+n" entry in the last lane. */
+export declare const TIMELINE_BAND_LANES = 3;
+export declare const TIMELINE_ALL_DAY_LANES = 2;
+/** Visible items stacked in one night or fold; more collapse into a "+n" entry in the last place. */
+export declare const TIMELINE_FOLD_LANES = 3;
+export declare const addSpan: (a: TimelineSpan, b: TimelineSpan) => TimelineSpan;
+export declare const subtractSpan: (a: TimelineSpan, b: TimelineSpan) => TimelineSpan;
+export declare const spanPx: (span: TimelineSpan, units: TimelineUnits) => number;
+/** The span as a CSS length over the `--k2b-timeline-<unit>` sizes the axis sets. */
+export declare const spanCss: (span: TimelineSpan) => string;
+export type TimelineSegment = {
+    kind: "head" | "row" | "wake" | "night" | "fold";
+    t0: number;
+    t1: number;
+    at: TimelineSpan;
+    size: TimelineSpan;
+    group: number;
+};
+type EntryBase = {
+    /** Entry id: the item id, or for a "+n" entry `more:<first hidden id>`, made unique among the item ids. */
+    id: string;
+    group: number;
+    /** The item's own times, also beyond the loaded range; for all-day entries, group indexes. */
+    start: number;
+    end: number;
+    /** Main-axis place relative to the group, and length. */
+    at: TimelineSpan;
+    size: TimelineSpan;
+    lane: number;
+    lanes: number;
+};
+export type TimelineItemEntry = EntryBase & {
+    kind: "band" | "marker" | "folded" | "all-day";
+    item: TimelineItem;
+    /** For all-day items: the first and last day of the item inside the range. */
+    firstKey: string;
+    lastKey: string;
+};
+export type TimelineMoreEntry = EntryBase & {
+    kind: "more";
+    area: "band" | "fold" | "all-day";
+    hidden: TimelineItemEntry[];
+};
+export type TimelineEntry = TimelineItemEntry | TimelineMoreEntry;
+export type TimelineGroup = {
+    index: number;
+    /** `day:<date>` or `fold:<first>:<last>`; stable while the group keeps its days. */
+    key: string;
+    kind: "day" | "fold";
+    firstKey: string;
+    lastKey: string;
+    t0: number;
+    t1: number;
+    /** Times the group's entries reach, beyond its own span for items in a neighbouring fold or over several days. */
+    reach: [number, number];
+    at: TimelineSpan;
+    size: TimelineSpan;
+    /** The group reserves a row for all-day items (vertical axis only). */
+    row: boolean;
+    today: boolean;
+    past: boolean;
+    /** List order: all-day items, then timed entries by start. */
+    entries: TimelineEntry[];
+    /** All-day entries of earlier groups that cover this group too. */
+    echoes: TimelineEntry[];
+    hours: Array<{
+        time: number;
+        at: TimelineSpan;
+    }>;
+    folds: Array<{
+        kind: "night" | "fold";
+        at: TimelineSpan;
+        size: TimelineSpan;
+    }>;
+    gaps: Array<{
+        at: TimelineSpan;
+        end: number;
+        hours: number;
+        long: boolean;
+    }>;
+};
+export type TimelineModel = {
+    from: number;
+    to: number;
+    segments: TimelineSegment[];
+    groups: TimelineGroup[];
+    total: TimelineSpan;
+    entries: Map<string, TimelineEntry>;
+    /** Keyboard order of every entry id. */
+    order: string[];
+    posOf: (time: number) => TimelineSpan;
+    /** The time at a pixel offset along the main axis. */
+    timeAt: (px: number, units: TimelineUnits) => number;
+};
+export declare const parseTimelineTime: (value: Date | string | undefined, context?: DateContext) => number;
+/** The day (`YYYY-MM-DD`) of an instant in the context's time zone. */
+export declare const timelineDayKey: (time: number, context?: DateContext) => string;
+export declare const shiftDayKey: (key: string, days: number) => string;
+/**
+ * The instant of a whole hour (0–24) on a day in the context's time zone. As stdlib's `compatible` disambiguation, a
+ * repeated hour resolves to its first occurrence and a skipped one to the time after the gap.
+ */
+export declare const timelineHourOf: (key: string, hour: number, context?: DateContext) => number;
+export type TimelineModelInput = {
+    from: number;
+    to: number;
+    /** The current day (`YYYY-MM-DD`), which always stays open. */
+    today: string;
+    items: readonly TimelineItem[];
+    context?: DateContext;
+};
+/**
+ * Builds the filmstrip: waking hours (6–22) are proportional, every night is one fold, and a run of days without
+ * timed items is one fold. Positions depend only on the times and the items, never on measurement.
+ */
+export declare const buildTimelineModel: ({ from, to, today, items, context }: TimelineModelInput) => TimelineModel;
+export {};

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

@@ -1,4 +1,4 @@
-import type { JSX } from "solid-js";
+import { type JSX } from "solid-js";
 export type DialogClose<T> = (result?: T) => void;
 export type OpenDialogOptions = {
     /** Close only this dialog when its owning operation is cancelled. */

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

@@ -0,0 +1,20 @@
+import type { JSX } from "solid-js";
+import type { ValueFieldProps } from "./field-contract";
+export type ChoiceChipOption<T extends string = string> = {
+    value: T;
+    label: string;
+    icon?: string;
+};
+export type ChoiceChipsProps<T extends string = string> = Omit<ValueFieldProps<T | null>, "onValueChange" | "onValueCommit"> & {
+    options: readonly ChoiceChipOption<T>[];
+    /** Receives the chosen value; choosing never reports `null`. */
+    onValueChange?: (value: T) => void;
+    onValueCommit?: (value: T) => void;
+};
+/**
+ * A labeled single choice shown as one row of chips, for a handful of quick picks such as a preset or a proposed date.
+ * The row scrolls sideways instead of wrapping, so its height stays the same on every screen and for every selection.
+ * `null` selects no chip; the first chip then holds the tab stop. Use `Select` for long or searchable lists and
+ * `SegmentedControl` for switching between views or modes.
+ */
+export declare function ChoiceChips<T extends string = string>(props: ChoiceChipsProps<T>): JSX.Element;

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

@@ -2,12 +2,21 @@ import { type JSX } from "solid-js";
 type ChoiceGroup = {
     value: string | null;
     label: string;
+    icon?: string;
 };
+/**
+ * A single-choice row of chips that scrolls sideways instead of wrapping, so its height never changes. Select and
+ * MultiSelect use it for their filters; `ChoiceChips` is the public field around it.
+ */
 export declare function ChoiceGroups(props: {
     choices: readonly ChoiceGroup[];
     value: string | null;
     onValueChange: (value: string | null) => void;
-    ariaLabel: string;
-    controls: string;
+    ariaLabel?: string;
+    /** The field label that names the group; replaces `ariaLabel`. */
+    labelledBy?: string;
+    describedBy?: string;
+    controls?: string;
+    disabled?: boolean;
 }): JSX.Element;
 export {};

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

@@ -12,6 +12,12 @@ export type FileDropzoneProps = FieldProps & {
     hint?: JSX.Element;
     /** One sentence that says what dropping does, shown while files are over the zone. Defaults to "Drop to upload". */
     dropLabel?: string;
+    /**
+     * Chooses files when the zone is clicked, instead of the device's file dialog, for example to offer other sources as
+     * well. Called within the click, so it may still open the device's dialog; resolve `[]` when the user cancels. A
+     * rejection shows its message as the field's error.
+     */
+    choose?: () => Promise<readonly File[]>;
     onDrop: (files: File[]) => void | Promise<void>;
 };
 export declare function FileDropzone(props: FileDropzoneProps): JSX.Element;

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

@@ -0,0 +1,22 @@
+import { type JSX } from "solid-js";
+import type { ValueFieldProps } from "./field-contract";
+import { type SignatureValue } from "./signature";
+export type SignatureInputProps = ValueFieldProps<SignatureValue | null> & {
+    /** Submits the value as JSON in a hidden input of this name. */
+    name?: string;
+    /** Shows the signature without allowing changes. */
+    readOnly?: boolean;
+    /**
+     * Offers typing the name instead of drawing. Defaults to `true`: typing is the
+     * keyboard and screen-reader path and helps people who cannot draw. Without
+     * it, a typed value is still shown and can be cleared, but not edited.
+     */
+    allowTyped?: boolean;
+};
+/**
+ * A signature field: draw with a finger, pen, or mouse, or type the name. The
+ * value is an SVG document plus how it was given; `signatureToPng` turns it
+ * into a bitmap. Legal evidence such as timestamps or hashes stays with the app.
+ */
+export declare function SignatureInput(props: SignatureInputProps): JSX.Element;
+export default SignatureInput;

package/dist/types/inputs/emoji/EmojiPicker.d.ts

@@ -0,0 +1,42 @@
+import { type JSX } from "solid-js";
+import { type EmojiSkinTone } from "./emoji-index";
+export type EmojiPickerProps = {
+    /** Called with the chosen emoji, in the chosen skin tone where it has one. */
+    onPick: (emoji: string) => void;
+    /** Recently used emoji, most recent first, shown as the first group. The application stores them; see `rememberEmoji`. */
+    recent?: readonly string[];
+    /** The skin tone for emoji that have one. Defaults to `0`, the default yellow. */
+    skinTone?: EmojiSkinTone;
+    /** Shows the skin-tone choice. The application stores the tone and passes it back as `skinTone`. */
+    onSkinToneChange?: (tone: EmojiSkinTone) => void;
+    /** Escape in an empty search field asks to close the surface the picker sits in. */
+    onClose?: () => void;
+    /** Moves focus into the search field once the picker is shown. */
+    autofocus?: boolean;
+    /** The picker's accessible name. Defaults to "Emoji". */
+    label?: string;
+    class?: string;
+};
+/** Where `index` moves for an arrow key in rows of `COLUMNS`, where every section starts a new row. */
+export declare const nextEmojiIndex: (sizes: readonly number[], index: number, key: "ArrowLeft" | "ArrowRight" | "ArrowUp" | "ArrowDown") => number;
+/**
+ * A search field, the groups, and a grid of emoji. Search finds English and German names, keywords and GitHub
+ * shortcodes. The focus stays in the search field: arrow keys move through the grid, Enter picks.
+ */
+declare function EmojiPickerPanel(props: EmojiPickerProps): JSX.Element;
+export type EmojiPickerPopoverProps = Omit<EmojiPickerProps, "onClose" | "autofocus"> & {
+    /** The control the picker opens next to. The picker is open while this is set. */
+    anchor: HTMLElement | null | undefined;
+    /** Called after a pick, on Escape, on a click outside, and on another press of the anchor. */
+    onClose: () => void;
+};
+/**
+ * The picker next to a control, such as the composer's emoji button or a message's "Add reaction". It opens above the
+ * control where there is room and below it otherwise, closes after a pick, and returns the focus to where it was.
+ */
+declare function EmojiPickerPopover(props: EmojiPickerPopoverProps): JSX.Element;
+/** The emoji picker. `EmojiPicker.Popover` opens it next to a control. */
+export declare const EmojiPicker: typeof EmojiPickerPanel & {
+    Popover: typeof EmojiPickerPopover;
+};
+export {};