@k2b/ui 0.51.0 → 0.52.0

package/dist/types/charts/core/treemap.d.ts

@@ -0,0 +1,45 @@
+import { type ChartOptions } from "./svg";
+export type TreemapOptions = ChartOptions & {
+    groups: string[];
+    legend?: boolean;
+    data: {
+        label: string;
+        group: string;
+        value: number;
+    }[];
+    locale?: string;
+    format?: (value: number) => string;
+    displayWidth?: number;
+};
+export declare function treemapLayout(spec: TreemapOptions, size?: {
+    width: number;
+    height: number;
+}): {
+    width: number;
+    height: number;
+    total: number;
+    cells: ({
+        label: string;
+        group: string;
+        value: number;
+        index: number;
+    } & {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    })[];
+    header: {
+        svg: string;
+        height: number;
+    };
+    legend: {
+        label: string;
+        x: number;
+        row: number;
+        index: number;
+    }[];
+    legendTop: number;
+    plotHeight: number;
+};
+export declare function renderTreemapSvg(spec: TreemapOptions): string;

package/dist/types/charts/description.d.ts

@@ -87,6 +87,10 @@ type Variants<N> = {
     }[];
     layout?: "columns" | "rows" | "grouped" | "stacked";
     normalize?: boolean;
+    share?: boolean;
+    limit?: number;
+    tone?: "in" | "out";
+    format?: ChartNumberFormat;
     compare?: {
         label: string;
         data: (number | null)[];
@@ -99,6 +103,13 @@ type Variants<N> = {
     showValues?: boolean;
     legend?: boolean;
     references?: Reference[];
+} | {
+    kind: "funnel";
+    data: {
+        label: string;
+        value: number | null;
+    }[];
+    format?: ChartNumberFormat;
 } | {
     kind: "hbar";
     series: string[];
@@ -203,6 +214,58 @@ type Variants<N> = {
     delta?: N;
     better?: "up" | "down";
     sparkline?: N[];
+} | {
+    kind: "treemap";
+    groups: string[];
+    data: {
+        label: string;
+        group: string;
+        value: number;
+    }[];
+    legend?: boolean;
+    format?: ChartNumberFormat;
+    locale?: string;
+} | {
+    kind: "pareto";
+    labels: [string, string];
+    data: {
+        label: string;
+        value: number;
+        prev: number;
+    }[];
+    format?: ChartNumberFormat;
+    locale?: string;
+} | {
+    kind: "bubble";
+    groups: string[];
+    data: {
+        label: string;
+        group: string;
+        x: number;
+        y: number;
+        size?: number;
+    }[];
+    xLabel: string;
+    yLabel: string;
+    sizeLabel?: string;
+    averages?: boolean;
+    legend?: boolean;
+    xFormat?: ChartNumberFormat;
+    yFormat?: ChartNumberFormat;
+    format?: ChartNumberFormat;
+    locale?: string;
+} | {
+    kind: "radar";
+    axes: string[];
+    max: number;
+    unit?: string;
+    series: {
+        label: string;
+        data: number[];
+    }[];
+    format?: ChartNumberFormat;
+    legend?: boolean;
+    locale?: string;
 };
 /** Portable chart node. Dates are ISO text and missing observations are null, never zero. */
 export type ChartDescription = Common & (Exclude<Variants<number | null>, {

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

@@ -73,7 +73,7 @@ export type ChartProps = {
     }> & {
         class?: string;
         style?: JSX.CSSProperties | string;
-        labels?: ChartLabels;
+        labels?: K extends "pareto" ? [string, string] : ChartLabels;
         /**
          * Navigation for maps and state timelines: pan, zoom and reset controls.
          * Arrows pan; Alt+arrows inspect. Every chart shows tooltips and keyboard

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

@@ -10,6 +10,8 @@ export type LightboxImage = {
     downloadUrl?: string;
     /** Actions for this image, shown before Download in the same style. */
     actions?: readonly LightboxAction[];
+    /** A small version for the thumbnail strip, shown from four images on; without it the strip loads `src`. */
+    thumbnail?: string;
 };
 type LightboxProps = {
     images: LightboxImage[];

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

@@ -13,6 +13,10 @@ export type BarChartOptions = {
     }[];
     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;
@@ -66,13 +70,13 @@ type Scale = {
     ticks: number[];
     log: boolean;
 };
-export declare const headerHeight: (opts: BarChartOptions) => number;
+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: BarChartOptions, width: number) => string;
+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
@@ -150,4 +154,36 @@ export declare function seriesBarLayout(opts: BarChartOptions, size?: {
     };
     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

@@ -71,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/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,6 +13,8 @@ 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

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

@@ -48,6 +48,8 @@ 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";

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/internal/field.d.ts

@@ -13,6 +13,8 @@ type FieldLayoutProps = {
     fill?: boolean;
     /** Composite controls use aria-labelledby instead of an HTML label target. */
     labelFor?: string | false;
+    /** Optional controls beside the label, outside its clickable target. */
+    labelEnd?: JSX.Element;
 } & Pick<FieldProps, "class" | "description" | "error" | "label" | "required" | "disabled">;
 export declare function Field(props: FieldLayoutProps): JSX.Element;
 type FieldAriaOwner = Pick<FieldProps, "aria-describedby" | "aria-label" | "description" | "error" | "label" | "required">;

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

@@ -6,6 +6,11 @@ export type PanelDialogProps = {
     surface?: PanelDialogSurface;
     /** A 2 px edge in the tone's colour inside the dialog frame; the header shows the tone's icon instead of its own. */
     tone?: DialogTone;
+    /**
+     * The body shows a picture or a video edge to edge, and the header floats over it as glass chips: the title and
+     * subtitle in one chip, the actions in a group, and the close button. For documents, text, and tables leave it off.
+     */
+    media?: boolean;
 };
 export type PanelDialogHeaderProps = {
     title: JSX.Element;

package/dist/types/surfaces/stat-cell-messages.d.ts

@@ -9,6 +9,7 @@ declare const statCellMessages: import("@k2b/stdlib").Catalog<{
     retry: string;
     reload: string;
     loading: string;
+    noValue: string;
 }>;
 export type StatCellMessages = ReturnType<(typeof statCellMessages)["resolve"]>["t"];
 /** Resolved from the inherited render locale. */

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

@@ -34,7 +34,10 @@ export type DashboardFrameProps = {
      * 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 of the body, a CSS length. Every state keeps it. With `reserve`, the content fills it and scrolls inside, so
+     * a table keeps its header in view; without it, the hidden copy sets the height.
+     */
     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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k2b/ui",
-  "version": "0.51.0",
+  "version": "0.52.0",
   "description": "Production-ready components for SolidJS applications.",
   "repository": {
     "type": "git",
@@ -104,7 +104,7 @@
   "devDependencies": {
     "@babel/core": "8.0.6",
     "@babel/preset-typescript": "8.0.1",
-    "@k2b/ssr": "0.21.0",
+    "@k2b/ssr": "0.21.1",
     "@types/babel__core": "7.20.5",
     "@types/bun": "1.4.2",
     "axe-core": "4.11.0",