@k2b/ui 0.50.0 → 0.52.0

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

@@ -0,0 +1,29 @@
+import { type JSX } from "solid-js";
+/** One image in a `ThumbnailStrip`. */
+export type ThumbnailStripItem = {
+    id: string;
+    name: string;
+    /** Small image URL, or a component that renders the caller's own thumbnail; a neutral tile shows until it loads. */
+    thumbnail?: string | (() => JSX.Element);
+    /** Marks an image with unsaved edits. */
+    dirty?: boolean;
+};
+export type ThumbnailStripProps = {
+    items: readonly ThumbnailStripItem[];
+    /** The `id` of the shown image; it is ringed, scrolled into view, and the strip's one tab stop. */
+    currentItem?: string;
+    onSelectItem: (id: string) => void;
+    /** Adds a "+" tile at the end. */
+    onAddItems?: () => void;
+    /** Accessible name of the strip, such as "Images". */
+    label: string;
+    /** The host's layer class, such as `k2b-overlay-surface` where the strip floats over a picture. */
+    class?: string;
+};
+/**
+ * A row of image thumbnails, 44 px high, that scrolls sideways and fades softly only on the side where more images
+ * follow. The current image is ringed and is the strip's one tab stop; the arrow keys, Home, and End move focus between
+ * images, and Enter or a click shows one. A dot marks unsaved edits. The host decides where the strip sits, also on a
+ * phone, and whether it floats over a picture.
+ */
+export declare function ThumbnailStrip(props: ThumbnailStripProps): JSX.Element;

package/dist/types/content/chart-bar.d.ts

@@ -1,10 +1,27 @@
-import { type AxisOptions, type BarItem, type ReferenceLine } from "../charts/core/svg";
+import { type AxisOptions, type BarItem, type ReferenceLine } from "../charts/core/svg-renderers";
 /**
  * Bar chart options: stdlib's `charts.bar` options plus a title for the category axis and a separate value format.
  * The wrapper owns size and inspection.
  */
 export type BarChartOptions = {
-    data: BarItem[];
+    data?: BarItem[];
+    /** Aligned categories and series. Null observations are gaps. */
+    x?: string[];
+    series?: {
+        label: string;
+        data: (number | null)[];
+    }[];
+    layout?: "columns" | "rows" | "grouped" | "stacked";
+    normalize?: boolean;
+    /** Explicit rows form a ranked list; shares include every source item, including the remainder. */
+    share?: boolean;
+    limit?: number;
+    tone?: "in" | "out";
+    locale?: string;
+    compare?: {
+        label: string;
+        data: (number | null)[];
+    };
     /** Value axis. `label` titles it, `format` writes its ticks and, without `valueFormat`, the printed values. */
     yAxis?: AxisOptions;
     /**
@@ -43,11 +60,23 @@ export type BarChartOptions = {
 export type BarChartLayout = "columns" | "rows";
 /** Estimated width of `text` at `size` pixels in the UI sans font with tabular figures; a little wide on purpose. */
 export declare const chartTextWidth: (text: string, size?: number) => number;
+/** Split a label into at most `lines` lines of `maxPx`; the last line ends with an ellipsis when the label is longer. */
+export declare const wrapLabel: (label: string, maxPx: number, lines: number) => {
+    lines: string[];
+    truncated: boolean;
+};
+type Scale = {
+    domain: [number, number];
+    ticks: number[];
+    log: boolean;
+};
+export declare const headerHeight: (opts: Pick<BarChartOptions, "title" | "subtitle">) => number;
 /** The layout a bar chart takes and its logical height, so server and browser reserve the same box. */
 export declare const barChartLayout: (opts: BarChartOptions, width?: number) => {
     layout: BarChartLayout;
     height: number;
 };
+export declare const renderHeader: (opts: Pick<BarChartOptions, "title" | "subtitle">, width: number) => string;
 /**
  * Render a bar chart in which every category has its label. Few short labels stand below vertical columns; otherwise
  * each category becomes a horizontal row with its label left of the bar and its value at the bar's end. Rows grow the
@@ -58,3 +87,103 @@ export declare const renderBarChartSvg: (opts: BarChartOptions & {
     height: number;
     inspect?: boolean;
 }) => string;
+/** Stable wrapping legend slots reserve the widest total or category value before interaction. */
+export declare function barSeriesLegend(entries: {
+    label: string;
+    data: (number | null)[];
+}[], format: (v: number) => string, width?: number, displayWidth?: number, maxHeight?: number): {
+    items: {
+        label: string;
+        data: (number | null)[];
+        total: number | null;
+        x: number;
+        y: number;
+        labelWidth: number;
+        valueX: number;
+    }[];
+    hidden: number;
+    height: number;
+};
+/** Category geometry shared by SVG, server snapshots and browser inspection. */
+export declare function seriesBarLayout(opts: BarChartOptions, size?: {
+    width: number;
+    height: number;
+}): {
+    width: number;
+    height: number;
+    columns: {
+        label: string;
+        index: number;
+        center: number;
+        current: {
+            seriesIndex: number;
+            raw: number | null | undefined;
+            value: number | null;
+            base: number;
+        }[];
+        total: number;
+        previous: number | null | undefined;
+    }[];
+    totals: (number | null)[];
+    scale: Scale;
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+    slot: number;
+    y: (value: number) => number;
+    format: (value: number) => string;
+    units: number;
+    entries: {
+        label: string;
+        data: (number | null)[];
+    }[];
+    legend: boolean;
+    legendLayout: {
+        items: {
+            label: string;
+            data: (number | null)[];
+            total: number | null;
+            x: number;
+            y: number;
+            labelWidth: number;
+            valueX: number;
+        }[];
+        hidden: number;
+        height: number;
+    };
+    barWidthPx: number;
+};
+/** Ranked rows retain original indices. A limit changes the drawing, never the denominator or source data. */
+export declare function rankedBarLayout(opts: BarChartOptions, size?: {
+    width: number;
+    height: number;
+}): {
+    width: number;
+    height: number;
+    rows: {
+        label: string;
+        value: number;
+        colorIndex?: number;
+        index: number;
+        rank: number;
+        y: number;
+        width: number;
+        share: number | null;
+    }[];
+    total: number;
+    rest: {
+        label: string;
+        value: number;
+        colorIndex?: number;
+        index: number;
+    }[];
+    restValue: number | null;
+    top: number;
+    unit: number;
+    format: (value: number) => string;
+    percent: Intl.NumberFormat;
+    shareWidth: number;
+    labelWidth: number;
+};
+export {};

package/dist/types/content/chart-inspection-core.d.ts

@@ -36,6 +36,11 @@ export declare function createChartInspector(options: {
     click: (event: MouseEvent) => void;
     focus: (event: FocusEvent) => void;
     key: (event: KeyboardEvent) => boolean;
+    /**
+     * The page scrolled: a keyboard tooltip, or one a linked chart keeps open, follows its mark; others close. A
+     * focused chart scrolled into view would otherwise close the tooltip its focus just opened.
+     */
+    scroll: () => void;
     close: () => void;
     invalidate: () => void;
     leave: () => void;
@@ -45,6 +50,8 @@ export declare function closeChartInspectionOnOutside(options: {
     container: () => HTMLElement | undefined;
     tooltip: () => HTMLElement | undefined;
     close: () => void;
+    /** What a page scroll does; defaults to close. An inspector passes its `scroll`, which keeps keyboard tooltips. */
+    scroll?: () => void;
     keepScroll?: () => boolean | undefined;
 }): () => void;
 export type InspectChartOptions = {

package/dist/types/content/chart-inspection.d.ts

@@ -22,6 +22,7 @@ export declare function createChartInspection(options: {
     click: (event: MouseEvent) => void;
     focus: (event: FocusEvent) => void;
     key: (event: KeyboardEvent) => boolean;
+    scroll: () => void;
     close: () => void;
     invalidate: () => void;
     leave: () => void;

package/dist/types/content/chart-message-catalog.d.ts

@@ -1,4 +1,8 @@
 export declare const chartMessages: import("@k2b/stdlib").Catalog<{
+    chartBarStart: string;
+    chartBarMore: ({ n }: {
+        n: number;
+    }) => string;
     chartView: string;
     chartDiagram: string;
     chartData: string;
@@ -41,6 +45,10 @@ export declare const chartMessages: import("@k2b/stdlib").Catalog<{
     resetTimelineView: string;
 }>;
 export declare const resolveChartMessages: (locale: string) => {
+    chartBarStart: string;
+    chartBarMore: ({ n }: {
+        n: number;
+    }) => string;
     chartView: string;
     chartDiagram: string;
     chartData: string;

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

@@ -60,6 +60,8 @@ export { type MarkdownLinkInput, type MarkdownReference, type MarkdownReferenceK
 export { Pagination, type PaginationProps } from "./Pagination";
 export type { PdfPreviewProps, PdfPreviewRequest } from "./PdfPreview";
 export { default as PdfPreview } from "./PdfPreview";
+export type { PdfViewerProps } from "./PdfViewer";
+export { default as PdfViewer } from "./PdfViewer";
 export type { RangeOption, RangePickerProps } from "./RangePicker";
 export { default as RangePicker } from "./RangePicker";
 export { ReactionBar, type ReactionBarItem, type ReactionBarProps } from "./ReactionBar";
@@ -69,6 +71,7 @@ export type { StepsProps } from "./Steps";
 export { Steps } from "./Steps";
 export type { StructuredDataPreviewMode, StructuredDataPreviewProps, StructuredDataValue } from "./StructuredDataPreview";
 export { default as StructuredDataPreview, isStructuredDataValue } from "./StructuredDataPreview";
+export { ThumbnailStrip, type ThumbnailStripItem, type ThumbnailStripProps } from "./ThumbnailStrip";
 export type { TimelineColor, TimelineController, TimelineItem, TimelineProps } from "./Timeline";
 export { default as Timeline } from "./Timeline";
 export { VideoPlayer, type VideoPlayerProps } from "./VideoPlayer";

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

@@ -0,0 +1,5 @@
+import { type PdfDocumentHandle } from "./pdf-limits";
+export type { PdfDocumentHandle, PdfPageImage, PdfPageSize } from "./pdf-limits";
+export { PDF_LIMITS, PDF_TOO_LARGE, pageImageWidth } from "./pdf-limits";
+/** Opens a PDF; `null` after an abort. Throws `PDF_TOO_LARGE` past `PDF_LIMITS`, or pdf.js's error for a broken file. */
+export declare const openPdfDocument: (data: Blob | ArrayBuffer, signal: AbortSignal) => Promise<PdfDocumentHandle | null>;

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/content/thumbnail-strip-messages.d.ts

@@ -0,0 +1,10 @@
+declare const thumbnailStripMessages: import("@k2b/stdlib").Catalog<{
+    thumbnailCurrent: string;
+    thumbnailUnsaved: string;
+    thumbnailAdd: string;
+}>;
+export type ThumbnailStripMessages = ReturnType<(typeof thumbnailStripMessages)["resolve"]>["t"];
+/** Resolved from the inherited render locale. */
+export declare const useThumbnailStripMessages: () => (() => ThumbnailStripMessages);
+export declare const checkThumbnailStripMessages: () => import("@k2b/stdlib").CatalogIssue[];
+export {};

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

@@ -13,7 +13,13 @@ export type SliderProps = FieldProps & Omit<JSX.InputHTMLAttributes<HTMLInputEle
     value: MaybeAccessor<number>;
     formatValue?: (value: number) => string;
     showValue?: boolean;
+    /** Place the value and reset beside the label. Without a label, they stay beside the track. */
+    valuePlacement?: "control" | "label";
     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,16 @@ export type { MultiSelectFetchDataFn, MultiSelectInputProps, MultiSelectOption,
 export { MultiSelectInput } from "./MultiSelectInput";
 export type { MarkdownEditorProps } from "./markdown/MarkdownEditor";
 export { MarkdownEditor } from "./markdown/MarkdownEditor";
+export type { MarkdownSelectionToolbarProps } from "./markdown/MarkdownSelectionToolbar";
+export { MarkdownSelectionToolbar } from "./markdown/MarkdownSelectionToolbar";
+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/MarkdownSelectionToolbar.d.ts

@@ -0,0 +1,19 @@
+import { type JSX } from "solid-js";
+export declare const checkSelectionMessages: () => import("@k2b/stdlib").CatalogIssue[];
+/**
+ * The box of a text range's first line in the editor's mirrored presentation layer, or nothing when that line is
+ * scrolled out of the surface. The layer holds the same text as the textarea, so its text nodes map offsets to places.
+ */
+export declare const textRangeBox: (layer: HTMLElement, surface: HTMLElement, start: number, end: number) => DOMRect | null;
+export type MarkdownSelectionToolbarProps = {
+    /** The editor's textarea, from `MarkdownEditor`'s `textareaRef`. The toolbar attaches once it is there. */
+    textarea: HTMLTextAreaElement | undefined;
+};
+/**
+ * A small formatting toolbar that floats above selected text in a `MarkdownEditor`: bold, italic, code, link, lists, and
+ * quote. Place it beside an editor with `noToolbar` and pass the editor's textarea. It appears once the pointer lets go
+ * of a selection and closes on Escape, a collapsed selection, or when the focus leaves both text and toolbar. Touch
+ * devices keep their own selection menu, so nothing of it renders there; the keyboard shortcuts work everywhere. It
+ * listens to the textarea itself, so editors without it carry none of its code.
+ */
+export declare function MarkdownSelectionToolbar(props: MarkdownSelectionToolbarProps): JSX.Element;

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 {};