@k2b/ui 0.50.0 → 0.51.0

package/dist/types/content/pdf-engine.d.ts

@@ -0,0 +1,9 @@
+import { type PdfDocumentHandle } from "./pdf-limits";
+/**
+ * The PDF engine: pdf.js and the glue `PdfViewer` needs. The @k2b/ui build bundles this module on its own into
+ * `pdf-viewer-engine.js`; `openPdfDocument` loads it by address, so a host's bundle never contains pdf.js. The legacy
+ * build also runs on older Safari on iPad. Parsing never runs code from the document: there is no scripting, XFA stays
+ * off, and pdf.js loads nothing beyond the given bytes. `workerUrl` is resolved against this module, next to which the
+ * host's bundler put the worker file.
+ */
+export declare function openPdf(data: ArrayBuffer, signal: AbortSignal, workerUrl: string): Promise<PdfDocumentHandle | null>;

package/dist/types/content/pdf-limits.d.ts

@@ -0,0 +1,43 @@
+/** Shapes and bounds shared by `PdfViewer`, its loader, and the pdf.js engine. */
+/** A page's size in PDF points at scale 1. */
+export type PdfPageSize = {
+    width: number;
+    height: number;
+};
+/** One drawn page: an object URL the caller revokes, and its size in pixels. */
+export type PdfPageImage = {
+    url: string;
+    width: number;
+    height: number;
+};
+export type PdfDocumentHandle = {
+    pages: readonly PdfPageSize[];
+    /** Draws one page `widthPx` wide; `null` after an abort. The caller revokes the returned URL. */
+    draw: (index: number, widthPx: number, signal: AbortSignal) => Promise<PdfPageImage | null>;
+    /**
+     * Lays the selectable, searchable text of one page into `container`. Positions are relative to the page; the font
+     * follows `--total-scale-factor` (CSS pixels per point) on the container or above, so zoom changes only that value.
+     */
+    textLayer: (index: number, container: HTMLElement, signal: AbortSignal) => Promise<void>;
+    close: () => Promise<void>;
+};
+/**
+ * Bounds for one document. Bytes and pages bound parsing work and memory; a larger document falls back to the
+ * browser's own viewer. Canvas pixels stay below the size Safari still draws (larger canvases come out blank).
+ */
+export declare const PDF_LIMITS: {
+    readonly maxBytes: number;
+    readonly maxPages: 2000;
+    readonly maxCanvasPixels: 16000000;
+    readonly maxImageWidth: 4096;
+};
+/** The name of the error a document past `PDF_LIMITS` raises; the host shows the browser's viewer instead. */
+export declare const PDF_TOO_LARGE = "PdfTooLargeError";
+export declare const pdfTooLarge: (message: string) => Error;
+/**
+ * Pixel width for a page image shown `displayWidth` CSS pixels wide: display width times the device pixel ratio
+ * (at most 2), at least 400 px where the page allows it, at most `PDF_LIMITS.maxImageWidth`, and always small enough
+ * that the canvas stays under `PDF_LIMITS.maxCanvasPixels` for the page's height-to-width `ratio`, also for a very
+ * tall page. Very deep zoom turns slightly soft, never blank.
+ */
+export declare const pageImageWidth: (displayWidth: number, pixelRatio: number, ratio: number) => number;

package/dist/types/content/pdf-messages.d.ts

@@ -10,6 +10,22 @@ declare const pdfMessages: import("@k2b/stdlib").Catalog<{
     pdfPreviewRendering: string;
     previewPdf: string;
     renderPdfPreview: string;
+    pdfPage: ({ number, total }: {
+        number: number;
+        total: number;
+    }) => string;
+    pdfPageShort: ({ number, total }: {
+        number: number;
+        total: number;
+    }) => string;
+    pdfZoom: string;
+    pdfZoomOut: string;
+    pdfZoomIn: string;
+    pdfZoomPercent: ({ value }: {
+        value: number;
+    }) => string;
+    pdfFitWidth: string;
+    pdfFitWidthLabel: string;
 }>;
 export type PdfMessages = ReturnType<(typeof pdfMessages)["resolve"]>["t"];
 /** Resolved from the inherited render locale. */

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

@@ -14,6 +14,10 @@ export type SliderProps = FieldProps & Omit<JSX.InputHTMLAttributes<HTMLInputEle
     formatValue?: (value: number) => string;
     showValue?: boolean;
     center?: boolean;
+    /**
+     * The value the setting starts from. With it, a changed value shows in the accent color and a reset button
+     * appears in a slot the slider always keeps, so nothing moves. Double-click resets too.
+     */
     defaultValue?: number;
 };
 export declare function Slider(props: SliderProps): JSX.Element;

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

@@ -34,3 +34,15 @@ export type ChoiceSliderProps = {
  * never changes. Unavailable stops stay visible and are skipped.
  */
 export declare function ChoiceSlider(props: ChoiceSliderProps): JSX.Element;
+export type ChoiceSliderIndicatorProps = {
+    /** How many stops the slider it stands for has. */
+    count: number;
+    /** The chosen stop's index, or `null` (or a negative index) for a choice that is none of the stops. */
+    index: number | null;
+    class?: string;
+};
+/**
+ * The slider in small and without interaction, 24 px wide: rail, fill and thumb in the same look, for a trigger that
+ * opens the real slider. It is decoration; the trigger's own label says the value.
+ */
+export declare function ChoiceSliderIndicator(props: ChoiceSliderIndicatorProps): JSX.Element;

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

@@ -52,6 +52,28 @@ export type DateRangePickerProps = DatePickerBaseProps<DateRangeValue> & {
 };
 /** `below` is a line under the trigger that the panel must not cover, such as a typed field's status line. */
 export declare const placeDatePopover: (trigger: HTMLElement, popover: HTMLElement, wide: boolean, below?: HTMLElement) => void;
+/** One month of days. Exported for composite pickers in this package (the period picker shows two side by side). */
+export declare function DatePickerPanel(props: {
+    visibleMonth: () => Date;
+    setVisibleMonth: (date: Date) => void;
+    selected?: () => string | null | undefined;
+    range?: () => DateRangeValue;
+    focusDate?: () => string | null | undefined;
+    onSelect: (date: string) => void;
+    onDayPreview?: (date: string | null) => void;
+    dateConfig?: DateContext;
+    /** Earliest and latest selectable day as date keys. */
+    min?: string;
+    max?: string;
+    /** Which month steps this panel offers; a second month beside it offers the other one. */
+    nav?: "both" | "previous" | "next";
+    /** Leaves the days of neighbouring months empty (`visibility: hidden`), so two months side by side never show a day twice. */
+    hideOutside?: boolean;
+    /** Whether a day is already on screen, also in a neighbouring panel; arrow keys then move there without paging. */
+    isShown?: (date: Date) => boolean;
+    /** Where keyboard navigation looks for the day to focus; the panel itself by default. */
+    focusRoot?: () => HTMLElement | undefined;
+}): JSX.Element;
 export declare function DatePicker(props: DatePickerProps): JSX.Element;
 export declare function DateTimePicker(props: DateTimePickerProps): JSX.Element;
 export declare function DateRangePicker(props: DateRangePickerProps): JSX.Element;

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

@@ -0,0 +1,24 @@
+import { type JSX } from "solid-js";
+import type { DateContext, MaybeAccessor, ValueFieldProps } from "./field-contract";
+import { type PeriodPreset, type PeriodValue } from "./period";
+export type PeriodPickerProps = Omit<ValueFieldProps<PeriodValue | null>, "value"> & {
+    /** A preset key or two explicit days; `null` or an unknown preset key shows the placeholder. */
+    value: MaybeAccessor<PeriodValue | null>;
+    /** The presets in list order, for example `periodPresets.thisMonth` or an app's own `{ key, label, resolve }`. */
+    presets: readonly PeriodPreset[];
+    /** Offers "Custom range" with a calendar in the same popover. On by default. */
+    custom?: boolean;
+    /** Time zone, week start and locale. Presets resolve "today" in `timeZone`; pass the zone the data uses. */
+    dateConfig?: DateContext;
+    /** The instant "today" is read from. Pass the server's instant so the first render and the browser agree. */
+    now?: Date;
+    /** Shows that a change is saving: the trigger keeps its size, cannot be opened, and shows a spinner. */
+    loading?: boolean;
+};
+/**
+ * PeriodPicker — one control for the period an evaluation or dashboard shows: presets such as "This month" plus a
+ * custom range, edited in the same popover (a bottom sheet on phones). The trigger shows the preset with its days or
+ * the custom days with their count, and keeps the width of its longest text so nothing beside it moves.
+ */
+export declare function PeriodPicker(props: PeriodPickerProps): JSX.Element;
+export default PeriodPicker;

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

@@ -12,8 +12,8 @@ export type { ColorInputProps, PinInputProps, SliderProps, } from "./ChoiceInput
 export { ColorInput, PinInput, Slider } from "./ChoiceInputs";
 export type { ChoiceListOption, ChoiceListProps } from "./ChoiceList";
 export { ChoiceList } from "./ChoiceList";
-export type { ChoiceSliderOption, ChoiceSliderProps } from "./ChoiceSlider";
-export { ChoiceSlider } from "./ChoiceSlider";
+export type { ChoiceSliderIndicatorProps, ChoiceSliderOption, ChoiceSliderProps } from "./ChoiceSlider";
+export { ChoiceSlider, ChoiceSliderIndicator } from "./ChoiceSlider";
 export type { ChoiceTileOption, ChoiceTilesProps } from "./ChoiceTiles";
 export { ChoiceTiles } from "./ChoiceTiles";
 export type { ColorChoiceOption, ColorChoicesProps } from "./ColorChoices";
@@ -48,8 +48,14 @@ export type { MultiSelectFetchDataFn, MultiSelectInputProps, MultiSelectOption,
 export { MultiSelectInput } from "./MultiSelectInput";
 export type { MarkdownEditorProps } from "./markdown/MarkdownEditor";
 export { MarkdownEditor } from "./markdown/MarkdownEditor";
+export type { SlashCommandsProps } from "./markdown/SlashCommands";
+export { SlashCommands } from "./markdown/SlashCommands";
 export type { NumberInputProps } from "./NumberInput";
 export { NumberInput } from "./NumberInput";
+export type { PeriodPickerProps } from "./PeriodPicker";
+export { PeriodPicker } from "./PeriodPicker";
+export type { PeriodClock, PeriodContext, PeriodPreset, PeriodRange, PeriodValue } from "./period";
+export { formatPeriodDays, formatPeriodRange, isPeriodDay, parsePeriodValue, periodContext, periodDayCount, periodInstants, periodPresets, resolvePeriod, } from "./period";
 export type { QrScannerError, QrScannerProps } from "./QrScanner";
 export { QrScanner } from "./QrScanner";
 export type { RichSelectFact, RichSelectFooter, RichSelectItem, RichSelectProps, RichSelectSection, RichSelectStatus, } from "./RichSelect";

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

@@ -9,6 +9,9 @@ declare const inputMessages: import("@k2b/stdlib").Catalog<{
         index: number;
         total: number;
     }) => string;
+    resetTo: ({ value }: {
+        value: string;
+    }) => string;
 }>;
 export type InputMessages = ReturnType<(typeof inputMessages)["resolve"]>["t"];
 /** Resolved from the inherited render locale. */

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

@@ -14,6 +14,11 @@ export type MarkdownEditorProps = ValueFieldProps<string> & {
     completions?: readonly Completion[];
     showStats?: boolean;
     variant?: "default" | "paper" | "embedded";
+    /**
+     * The font of the text, its highlighting, and the placeholder together: `mono` (default) for Markdown source,
+     * `sans` for a message composer whose text later shows in the interface font.
+     */
+    font?: "mono" | "sans";
     fill?: boolean;
     /** Groups save and close at the end of the toolbar. The caller owns navigation and unsaved-change confirmation. */
     onClose?: () => void;

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

@@ -0,0 +1,20 @@
+import { type JSX } from "solid-js";
+import { type CommandSource } from "../../actions/command-items";
+export type SlashCommandsProps = {
+    /** The editor's textarea, from `MarkdownEditor`'s `textareaRef`. The commands attach once it is there. */
+    textarea: HTMLTextAreaElement | undefined;
+    /** The same entries as `CommandMenu`'s `items`. */
+    items: CommandSource;
+    /**
+     * The composer box the list docks to, such as the frame around the editor and its "+" row. Defaults to the editor
+     * itself.
+     */
+    composer?: HTMLElement;
+};
+/**
+ * Slash commands for a `MarkdownEditor`: `/` at the start of a line or after a space opens the entries docked above the
+ * composer, as wide as it is. Place it beside the editor and pass the editor's textarea. It listens to the textarea itself, so editors without
+ * commands carry none of it: native listeners run before the editor's own, and a key it uses is marked handled with
+ * `preventDefault`, which the editor respects.
+ */
+export declare function SlashCommands(props: SlashCommandsProps): JSX.Element;

package/dist/types/inputs/period-picker-messages.d.ts

@@ -0,0 +1,34 @@
+/** Labels of the built-in period presets and the picker's own words. */
+declare const periodPickerMessages: import("@k2b/stdlib").Catalog<{
+    period: string;
+    choosePeriod: string;
+    custom: string;
+    from: string;
+    to: string;
+    backToPresets: string;
+    since: ({ date }: {
+        date: string;
+    }) => string;
+    days: ({ count }: {
+        count: number;
+    }) => string;
+    today: string;
+    yesterday: string;
+    "this-week": string;
+    "last-week": string;
+    "this-month": string;
+    "last-month": string;
+    "this-quarter": string;
+    "last-quarter": string;
+    "this-year": string;
+    "last-year": string;
+    all: string;
+}>;
+export type PeriodPickerMessages = ReturnType<(typeof periodPickerMessages)["resolve"]>["t"];
+/** The translated label of a built-in preset key, if it is one. */
+export declare const builtInPresetLabel: (t: PeriodPickerMessages, key: string) => string | undefined;
+/** Resolved from the inherited render locale. */
+export declare const usePeriodPickerMessages: () => (() => PeriodPickerMessages);
+export declare const resolvePeriodPickerMessages: (locale?: string) => PeriodPickerMessages;
+export declare const checkPeriodPickerMessages: () => import("@k2b/stdlib").CatalogIssue[];
+export {};

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

@@ -0,0 +1,134 @@
+/**
+ * A period as an app stores it: a preset key that stays relative ("this month" is next month's month too), or two
+ * explicit days. Days are date keys such as `2026-11-01`; `end` is inclusive.
+ */
+export type PeriodValue = {
+    preset: string;
+} | {
+    start: string;
+    end: string;
+};
+/** Inclusive days of a period. `null` is an open edge, for example "All time" without a known first day. */
+export type PeriodRange = {
+    start: string | null;
+    end: string | null;
+};
+/** What a preset resolves against: today in the period's time zone and the first day of the week. */
+export type PeriodContext = {
+    today: string;
+    weekStartsOn: 0 | 1;
+};
+export type PeriodPreset = {
+    key: string;
+    /** Shown in the list and the trigger. Built-in presets bring a translated label; app presets name their own. */
+    label?: string;
+    resolve: (context: PeriodContext) => PeriodRange;
+};
+/** The clock a period is resolved with. Server and browser pass the same values so the first render agrees. */
+export type PeriodClock = {
+    /** The instant "today" is read from; defaults to now. */
+    now?: Date;
+    /** IANA time zone the days belong to, for example a base's zone; defaults to the runtime zone. */
+    timeZone?: string;
+    /** First day of the week, as in the calendar's date config; Monday by default. */
+    weekStartsOn?: 0 | 1;
+    /** Alias of `weekStartsOn`, accepted from a shared date config. */
+    firstDayOfWeek?: 0 | 1;
+};
+/** Adds whole days to a date key; calendar days, so a DST change never moves it. */
+export declare const addPeriodDays: (key: string, count: number) => string;
+/** Number of days in an inclusive range of date keys. */
+export declare const periodDayCount: (range: {
+    start: string;
+    end: string;
+}) => number;
+/**
+ * Built-in presets. Each covers its whole calendar period ("This month" is the 1st to the last day, not up to
+ * today) in the period's time zone; weeks start on the context's first day of the week.
+ */
+export declare const periodPresets: {
+    today: {
+        key: string;
+        resolve: ({ today }: PeriodContext) => {
+            start: string;
+            end: string;
+        };
+    };
+    yesterday: {
+        key: string;
+        resolve: ({ today }: PeriodContext) => {
+            start: string;
+            end: string;
+        };
+    };
+    thisWeek: {
+        key: string;
+        resolve: (context: PeriodContext) => PeriodRange;
+    };
+    lastWeek: {
+        key: string;
+        resolve: (context: PeriodContext) => PeriodRange;
+    };
+    thisMonth: {
+        key: string;
+        resolve: ({ today }: PeriodContext) => PeriodRange;
+    };
+    lastMonth: {
+        key: string;
+        resolve: ({ today }: PeriodContext) => PeriodRange;
+    };
+    thisQuarter: {
+        key: string;
+        resolve: ({ today }: PeriodContext) => PeriodRange;
+    };
+    lastQuarter: {
+        key: string;
+        resolve: ({ today }: PeriodContext) => PeriodRange;
+    };
+    thisYear: {
+        key: string;
+        resolve: ({ today }: PeriodContext) => PeriodRange;
+    };
+    lastYear: {
+        key: string;
+        resolve: ({ today }: PeriodContext) => PeriodRange;
+    };
+    /** Everything up to today; `since` is the first day with data when the app knows it, else the start stays open. */
+    all: (options?: {
+        since?: string | null;
+    }) => PeriodPreset;
+};
+/** A real calendar day key, not only the shape (`2026-02-30` is refused). */
+export declare const isPeriodDay: (value: unknown) => value is string;
+/** Accepts a stored or URL value only when it is a known preset key or two real days in order. */
+export declare const parsePeriodValue: (value: unknown, presets: readonly PeriodPreset[]) => PeriodValue | undefined;
+/** The context presets resolve against: today in the clock's time zone. */
+export declare const periodContext: (clock?: PeriodClock) => PeriodContext;
+/**
+ * Resolves a value to inclusive days. Returns `undefined` for a preset key the list does not contain, so a stored
+ * period that no longer exists is never silently replaced.
+ */
+export declare const resolvePeriod: (value: PeriodValue, presets: readonly PeriodPreset[], clock?: PeriodClock) => PeriodRange | undefined;
+/**
+ * The instants a query uses for a resolved period: `from` is the start of the first day and `to` the start of the
+ * day after the last one (exclusive), both in the time zone. Days are never assumed to last 24 hours.
+ */
+export declare const periodInstants: (range: PeriodRange, timeZone: string) => {
+    from: string | null;
+    to: string | null;
+};
+/**
+ * Short days of a preset, for the list and the trigger: "Sat, Nov 7", "Nov 1 – 30", "2025", "since 3/14/2019".
+ * The year is added only when the period is not in today's year.
+ */
+export declare const formatPeriodDays: (range: PeriodRange, today: string, locale: string, since: (date: string) => string) => string;
+/** Explicit days as numbers with the year: "01.–07.11.2026" in German, "11/1/2026 – 11/7/2026" in English. */
+export declare const formatPeriodRange: (range: {
+    start: string;
+    end: string;
+}, locale: string) => string;
+/** The widest explicit range within today's year, all of it (two-digit days, a three-digit count), so a trigger can reserve its width. */
+export declare const widePeriodRangeSample: (today: string) => {
+    start: string;
+    end: string;
+};

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

@@ -74,12 +74,24 @@ export type DetailPanelActionSecondary = {
     onClick: () => void;
     variant?: "danger";
 };
+/**
+ * A checkbox before the row that toggles on its own, such as "done" for a task the row opens. It always shows its
+ * state, unlike a secondary action, which waits for hover.
+ */
+export type DetailPanelActionCheckbox = {
+    checked: boolean;
+    /** Accessible name, after the row, such as "Done: Call Mrs. Weber". */
+    label: string;
+    onChange: (checked: boolean) => void;
+    disabled?: boolean;
+};
 type DetailPanelActionBaseProps = {
     title: JSX.Element;
     description?: JSX.Element;
     leading?: JSX.Element;
     trailing?: JSX.Element;
     secondaryAction?: DetailPanelActionSecondary;
+    checkbox?: DetailPanelActionCheckbox;
     /** Marks the row of the current place, such as the section in view, in the panel's accent. */
     current?: boolean;
     /** Lets the title wrap to two lines instead of ending with an ellipsis. */

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

@@ -12,7 +12,7 @@ export { APP_WORKSPACE_DETAIL_DEFAULT, APP_WORKSPACE_DETAIL_MAX, APP_WORKSPACE_D
 export { type BottomSheetProps, bottomSheetAdaptiveOptions, bottomSheetOptions, default as BottomSheet } from "./BottomSheet";
 export type { DataPanelProps } from "./DataPanel";
 export { DataPanel } from "./DataPanel";
-export type { DetailPanelActionButtonProps, DetailPanelActionLinkProps, DetailPanelActionProps, DetailPanelActionSecondary, DetailPanelBodyProps, DetailPanelGroupProps, DetailPanelHeaderProps, DetailPanelProps, DetailPanelRowProps, DetailPanelSectionProps, DetailPanelSummaryProps, DetailPanelTone, } from "./DetailPanel";
+export type { DetailPanelActionButtonProps, DetailPanelActionCheckbox, DetailPanelActionLinkProps, DetailPanelActionProps, DetailPanelActionSecondary, DetailPanelBodyProps, DetailPanelGroupProps, DetailPanelHeaderProps, DetailPanelProps, DetailPanelRowProps, DetailPanelSectionProps, DetailPanelSummaryProps, DetailPanelTone, } from "./DetailPanel";
 export { default as DetailPanel } from "./DetailPanel";
 export type { DetailAccessEntry, DetailAccessProps, DetailLinkItem, DetailLinksProps, DetailPresencePerson, DetailPresenceProps, DetailPresenceState, DetailPropertiesProps, DetailProperty, DetailTag, DetailTagsProps, } from "./DetailSections";
 export { DetailAccess, DetailLinks, DetailPresence, DetailPresenceSlot, DetailProperties, DetailTags } from "./DetailSections";

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

@@ -10,6 +10,11 @@ export type DescriptionListProps = {
     layout?: "grid" | "rows" | "compact";
     size?: "sm" | "md";
     actionVisibility?: "always" | "progressive";
+    /**
+     * Joins each term to its right-aligned value with a dotted leader, for `rows` or `compact` lists that must span a
+     * very wide container. A fallback, never the default: first keep rows within the row measure.
+     */
+    leader?: "dotted";
     class?: string;
 };
 /** Semantic key-value content with predictable responsive density. */

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

@@ -1,4 +1,5 @@
 import { type JSX } from "solid-js";
+import type { ChartNumberFormat } from "../charts/description";
 import type { ChartTooltipFormatter } from "../content/chart-inspection-core";
 import type { AccentColor } from "../semantics";
 import { type StatGridSize } from "./StatGrid";
@@ -15,7 +16,9 @@ export type StatCellAccent = {
  */
 export type StatCellDelta = {
     value: number;
-    unit?: "ratio" | "points";
+    unit?: "ratio" | "points" | "absolute";
+    /** Existing measures can express a change in their own unit instead of a ratio. */
+    format?: ChartNumberFormat;
     better?: "up" | "down";
 };
 /** The value the change compares against, shown under the figure, such as "Last month 44,560". */
@@ -36,6 +39,8 @@ export type StatCellProps = {
     tone?: StatCellTone | "in" | "out";
     accent?: StatCellAccent;
     delta?: StatCellDelta;
+    /** Keep the figure and change on separate rows, including while loading. Defaults to beside the figure. */
+    deltaPlacement?: "below";
     compare?: StatCellCompare;
     href?: string;
     title?: string;

package/dist/types/widgets/DashboardFrame.d.ts

@@ -0,0 +1,58 @@
+import { type JSX } from "solid-js";
+import type { DashboardWidth } from "./Dashboard";
+/**
+ * What the host's read shows: its content (`ready`), the first read in flight (`loading`), nothing to show (`empty`),
+ * a failed first read (`error`), or content whose refresh failed (`stale`).
+ */
+export type DashboardFrameState = "ready" | "loading" | "empty" | "error" | "stale";
+export type DashboardFrameProps = {
+    /**
+     * Heading of the frame. Without it the frame is only the surface, for content that brings its own head and states,
+     * such as `ChartExplorer` with `inset="1rem"`.
+     */
+    title?: string;
+    /** One line under the title; loading and stale notes take its place, so nothing moves. */
+    subtitle?: JSX.Element;
+    /** Level of the title heading; defaults to 3. */
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+    /** Controls at the right of the head, such as a search field or a grouping chip. */
+    tools?: JSX.Element;
+    /** Defaults to `ready`. */
+    state?: DashboardFrameState;
+    /** When the shown content was read, formatted by the host ("09:12"); a stale note names it. */
+    asOf?: string;
+    /** Try again after a failure; without it a failure has no button. */
+    onRetry?: () => void;
+    /** The empty sentence, such as "No campaign in this period." */
+    empty?: JSX.Element;
+    /** Tabler icon of the empty state; defaults to `ti ti-chart-bar-off`. */
+    emptyIcon?: string;
+    /** An action under the empty sentence, such as "Clear search". */
+    emptyAction?: JSX.Element;
+    /**
+     * The content has nothing to show right now although the read succeeded, such as a search without matches: the body
+     * shows the empty sentence and action while the head keeps its state, so a stale note stays.
+     */
+    emptyContent?: boolean;
+    /** Height of the body, a CSS length. Every state keeps it. */
+    height?: string;
+    /**
+     * A hidden copy of the full content that holds the body's height in every state, such as every row of a table. The
+     * body then reaches the frame's left, right and bottom edges, like a table that brings its own rows.
+     */
+    reserve?: JSX.Element;
+    /** States as one quiet line instead of a centred message, for short content such as an amount or one bar. */
+    compact?: boolean;
+    /**
+     * Share of a `DashboardSection`'s six columns, like `DashboardPanel`: the frame is the grid cell itself, so it never
+     * sits in a second frame. Defaults to a third there; ignored elsewhere.
+     */
+    width?: DashboardWidth;
+    class?: string;
+    children?: JSX.Element;
+};
+/**
+ * One framed dashboard panel: title, subtitle, tools and the content the host passes, with loading, empty, failure and
+ * stale in the same place and at the same height.
+ */
+export declare function DashboardFrame(props: DashboardFrameProps): JSX.Element;

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

@@ -1,4 +1,5 @@
 export * from "./Dashboard";
+export * from "./DashboardFrame";
 export * from "./Widget";
 export * from "./WidgetHero";
 export * from "./WidgetList";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k2b/ui",
-  "version": "0.50.0",
+  "version": "0.51.0",
   "description": "Production-ready components for SolidJS applications.",
   "repository": {
     "type": "git",
@@ -94,6 +94,7 @@
     "maplibre-gl": "6.14.0",
     "marked": "18.0.14",
     "pbf": "5.1.2",
+    "pdfjs-dist": "6.3.289",
     "qr-scanner": "1.4.2"
   },
   "peerDependencies": {