nuxt-ui-tools 1.24.0 → 1.25.1

package/dist/runtime/display/types/blocks/table.d.ts

@@ -0,0 +1,28 @@
+import type { DisplayBlockBase, DisplayContent, DisplayRevealable, DisplaySurface } from '../shared.js';
+export type DisplayTableSlot = 'root' | 'scroller' | 'table' | 'head' | 'headCell' | 'row' | 'cell' | 'foot' | 'footCell' | 'meta' | 'empty' | 'more';
+export interface DisplayTableColumn {
+    key: string;
+    label: DisplayContent;
+    /** Tabular figures aligned to the end. */
+    numeric?: boolean;
+    /** Defaults to `end` for numeric columns, `start` otherwise. */
+    align?: 'start' | 'center' | 'end';
+    /** CSS width, such as `8rem` or `30%`. */
+    width?: string;
+    mono?: boolean;
+}
+export type DisplayTableRow = Readonly<Record<string, DisplayContent>>;
+export interface DisplayTableProps extends DisplayBlockBase<DisplayTableSlot>, DisplayRevealable {
+    columns: readonly DisplayTableColumn[];
+    rows: readonly DisplayTableRow[];
+    /** Totals or averages pinned under the rows. */
+    footer?: DisplayTableRow;
+    /** Line under the table, at the start. */
+    caption?: DisplayContent;
+    /** Line under the table, at the end. */
+    note?: DisplayContent;
+    /** Scrolls the rows past this height, with the header and footer pinned (px or CSS length). */
+    maxHeight?: number | string;
+    /** Defaults to `bordered`. */
+    surface?: DisplaySurface;
+}

package/dist/runtime/display/types/blocks/text.d.ts

@@ -0,0 +1,22 @@
+import type { DisplayBlockBase, DisplayContent, DisplayTone } from '../shared.js';
+export type DisplayTextAppearance = 'body' | 'lead' | 'muted' | 'caption' | 'quote' | 'legal' | 'prose';
+export type DisplayTextSlot = 'root' | 'header' | 'icon' | 'title' | 'paragraph' | 'footer' | 'toggle';
+export interface DisplayTextProps extends DisplayBlockBase<DisplayTextSlot> {
+    /** Defaults to `body`. `prose` styles rich content: links, lists, bold, inline code. */
+    appearance?: DisplayTextAppearance;
+    text?: DisplayContent;
+    /** Several paragraphs, drawn after `text`. */
+    paragraphs?: readonly DisplayContent[];
+    /** Heading of a `legal` block. */
+    title?: DisplayContent;
+    /** Icon before the `legal` title or the `caption` text. */
+    icon?: string;
+    /** `quote` attribution, such as the author's name. */
+    author?: DisplayContent;
+    /** Second part of the attribution line, such as a date. */
+    meta?: DisplayContent;
+    /** Accent of the `quote` bar and the `legal` rule. Defaults to `primary` and `neutral`. */
+    tone?: DisplayTone;
+    /** Clamps the text to this many lines with a "Read more" toggle when it overflows. */
+    maxLines?: number;
+}

package/dist/runtime/display/types/blocks/timeline.d.ts

@@ -0,0 +1,37 @@
+import type { DisplayAvatar, DisplayBlockBase, DisplayContent, DisplayDate, DisplayRevealable, DisplayText, DisplayTone } from '../shared.js';
+export type DisplayTimelineState = 'done' | 'current' | 'upcoming';
+export type DisplayTimelineSlot = 'root' | 'item' | 'marker' | 'connector' | 'body' | 'title' | 'time' | 'description' | 'actor' | 'now' | 'more' | 'empty';
+export interface DisplayTimelineItem {
+    title: DisplayContent;
+    description?: DisplayContent;
+    /** Orders `schedule` items against `now` and fills `time` when it is not set. */
+    date?: DisplayDate;
+    /** Text of the time, such as `12 oct.`. Defaults to the formatted `date`. */
+    time?: DisplayText;
+    icon?: string;
+    /** Defaults to `neutral`. */
+    tone?: DisplayTone;
+    actor?: {
+        name: DisplayText;
+        avatar?: DisplayAvatar;
+    };
+    /** Defaults from `date` against `now` when there is a date, `done` otherwise. */
+    state?: DisplayTimelineState;
+}
+export interface DisplayTimelineProps extends DisplayBlockBase<DisplayTimelineSlot>, DisplayRevealable {
+    /**
+     * `vertical` lists events with dots, `log` is a dense list with times and actors, `pipeline`
+     * draws stages in a row, and `schedule` lists planned events with a "today" marker.
+     * Defaults to `vertical`.
+     */
+    variant?: 'vertical' | 'log' | 'pipeline' | 'schedule';
+    items: readonly DisplayTimelineItem[];
+    /** `pipeline`: index of the current stage, for items without a `state`. */
+    current?: number;
+    /** Defaults to the current time. */
+    now?: DisplayDate;
+    /** `schedule` marker text. Defaults to "Today" and the date. */
+    nowLabel?: DisplayText;
+    /** Format of the times built from dates. Defaults to day and short month, plus the time in `log`. */
+    dateFormat?: Intl.DateTimeFormatOptions;
+}

package/dist/runtime/display/types/config.d.ts

@@ -0,0 +1,60 @@
+import type { DisplayKind, DisplayPropsMap, DisplayUiMap } from './registry.js';
+import type { DisplayBuiltinTone, DisplayChipUi, DisplayToneRegistry } from './shared.js';
+/**
+ * Colors of a tone, as CSS colors. Only `color` is needed for a new tone: the ink defaults to it,
+ * the soft background and the line mix it into the page background.
+ */
+export interface DisplayToneColors {
+    /** Solid fill: bars, dots, current steps. */
+    color?: string;
+    /** Text and icons drawn on the page. */
+    ink?: string;
+    /** Tinted background. */
+    soft?: string;
+    /** Border. */
+    line?: string;
+    /** Text on the solid fill. */
+    contrast?: string;
+}
+/** A tone registered or restyled in `appConfig.nuxtUiTools.display.tones`. */
+export interface DisplayToneDefinition extends DisplayToneColors {
+    /** Colors used in dark mode, over the light ones. */
+    dark?: DisplayToneColors;
+}
+/** Tones by name: new ones need `color`; a built-in tone takes only the colors it changes. */
+export type DisplayToneDefinitions = Record<Extract<keyof DisplayToneRegistry, string>, DisplayToneDefinition & {
+    color: string;
+}> & Partial<Record<DisplayBuiltinTone, DisplayToneDefinition>>;
+/** Named default props per kind, picked with `preset`. */
+export type DisplayPresets = {
+    [K in DisplayKind]?: Readonly<Record<string, Partial<DisplayPropsMap[K]>>>;
+};
+/**
+ * App-wide display defaults, from `appConfig.nuxtUiTools.display`.
+ *
+ * @example
+ * ```ts
+ * export default defineAppConfig({
+ *   nuxtUiTools: {
+ *     display: {
+ *       presets: { text: { legal: { appearance: 'legal', icon: 'i-lucide-shield' } } },
+ *       tones: { violet: { color: 'var(--color-violet-500)' }, primary: { ink: '#b85e00' } },
+ *       ui: { facts: { label: 'text-muted', value: 'font-semibold' } },
+ *     },
+ *   },
+ * })
+ * ```
+ */
+export interface DisplayUiConfig {
+    presets?: DisplayPresets;
+    /** Extra tones, and color changes to the built-in ones. Register new names in `DisplayToneRegistry`. */
+    tones?: Partial<DisplayToneDefinitions>;
+    /**
+     * Slot classes per kind, plus `chip`: the `UBadge` slots of every chip the blocks draw (facts
+     * chips, record badges, list chips…), so chips match the app's badge style. Tones still color
+     * them: leave colors out of these classes.
+     */
+    ui?: Partial<DisplayUiMap> & {
+        chip?: DisplayChipUi;
+    };
+}

package/dist/runtime/display/types/index.d.ts

@@ -0,0 +1,22 @@
+export type * from './blocks/accordion';
+export type * from './blocks/alert';
+export type * from './blocks/breakdown';
+export type * from './blocks/chart';
+export type * from './blocks/code';
+export type * from './blocks/date';
+export type * from './blocks/diff';
+export type * from './blocks/empty';
+export type * from './blocks/facts';
+export type * from './blocks/heading';
+export type * from './blocks/list';
+export type * from './blocks/media';
+export type * from './blocks/meter';
+export type * from './blocks/person';
+export type * from './blocks/record';
+export type * from './blocks/stat';
+export type * from './blocks/table';
+export type * from './blocks/text';
+export type * from './blocks/timeline';
+export type * from './config';
+export type * from './registry';
+export type * from './shared';

package/dist/runtime/display/types/registry.d.ts

@@ -0,0 +1,57 @@
+import type { DisplayAccordionProps } from './blocks/accordion.js';
+import type { DisplayAlertProps } from './blocks/alert.js';
+import type { DisplayBreakdownProps } from './blocks/breakdown.js';
+import type { DisplayChartProps } from './blocks/chart.js';
+import type { DisplayCodeProps } from './blocks/code.js';
+import type { DisplayDateProps } from './blocks/date.js';
+import type { DisplayDiffProps } from './blocks/diff.js';
+import type { DisplayEmptyProps } from './blocks/empty.js';
+import type { DisplayFactsProps } from './blocks/facts.js';
+import type { DisplayHeadingProps } from './blocks/heading.js';
+import type { DisplayListProps } from './blocks/list.js';
+import type { DisplayMediaProps } from './blocks/media.js';
+import type { DisplayMeterProps } from './blocks/meter.js';
+import type { DisplayPersonProps } from './blocks/person.js';
+import type { DisplayRecordProps } from './blocks/record.js';
+import type { DisplayStatProps } from './blocks/stat.js';
+import type { DisplayTableProps } from './blocks/table.js';
+import type { DisplayTextProps } from './blocks/text.js';
+import type { DisplayTimelineProps } from './blocks/timeline.js';
+/** Props of every display block, by kind. */
+export interface DisplayPropsMap {
+    heading: DisplayHeadingProps;
+    text: DisplayTextProps;
+    alert: DisplayAlertProps;
+    facts: DisplayFactsProps;
+    stat: DisplayStatProps;
+    breakdown: DisplayBreakdownProps;
+    meter: DisplayMeterProps;
+    chart: DisplayChartProps;
+    table: DisplayTableProps;
+    diff: DisplayDiffProps;
+    record: DisplayRecordProps;
+    person: DisplayPersonProps;
+    list: DisplayListProps;
+    timeline: DisplayTimelineProps;
+    date: DisplayDateProps;
+    media: DisplayMediaProps;
+    code: DisplayCodeProps;
+    empty: DisplayEmptyProps;
+    accordion: DisplayAccordionProps;
+}
+export type DisplayKind = keyof DisplayPropsMap;
+/** Slot classes of every display block, by kind. */
+export type DisplayUiMap = {
+    [K in DisplayKind]: NonNullable<DisplayPropsMap[K]['ui']>;
+};
+/**
+ * One display block: its kind, its props, and optionally a preset from
+ * `appConfig.nuxtUiTools.display.presets` whose props the given ones override.
+ */
+export type DisplaySpec = {
+    [K in DisplayKind]: {
+        display: K;
+        props: DisplayPropsMap[K];
+        preset?: string;
+    };
+}[DisplayKind];

package/dist/runtime/display/types/shared.d.ts

@@ -0,0 +1,80 @@
+import type { AvatarProps } from '@nuxt/ui/components/Avatar.vue';
+import type { BadgeProps } from '@nuxt/ui/components/Badge.vue';
+import type { ButtonProps } from '@nuxt/ui/components/Button.vue';
+import type { LazyRenderableValue, LazyTextValue, MaybePromise } from '../../shared/types/utils.js';
+/** Tones every app has: the Nuxt UI colors. */
+export type DisplayBuiltinTone = 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral';
+/**
+ * Extra tones an app registers in `appConfig.nuxtUiTools.display.tones`. Augment it so those
+ * names type-check wherever a tone is accepted:
+ *
+ * @example
+ * ```ts
+ * declare module '#ui-tools/display' {
+ *   interface DisplayToneRegistry {
+ *     violet: true
+ *     teal: true
+ *   }
+ * }
+ * ```
+ */
+export interface DisplayToneRegistry {
+}
+/**
+ * Color role of a block or one of its parts: a built-in tone or a registered one. Each tone reads
+ * the `--nut-display-<tone>`, `-ink`, `-soft`, `-line` and `-contrast` variables, so an app
+ * restyles a tone in CSS.
+ */
+export type DisplayTone = DisplayBuiltinTone | Extract<keyof DisplayToneRegistry, string>;
+/** Box drawn around a block: none, a tinted background, a border, or a raised card. */
+export type DisplaySurface = 'plain' | 'muted' | 'bordered' | 'elevated';
+export type DisplaySize = 'sm' | 'md' | 'lg';
+/** Text, or a lazy translation such as `() => t('key')`. */
+export type DisplayText = LazyTextValue;
+/** Text, a lazy translation, a VNode, or a render function. */
+export type DisplayContent = LazyRenderableValue;
+/**
+ * A link, or a function returning it, such as a signed URL fetched on demand. A function runs only
+ * when the link is used (opened, previewed or downloaded), with the button showing its progress.
+ */
+export type DisplayUrl = string | (() => MaybePromise<string>);
+/**
+ * Where a block link opens. Absolute http(s) links default to `_blank`, others to the same tab;
+ * `null` keeps an absolute link in the same tab.
+ */
+export type DisplayLinkTarget = '_blank' | '_self' | '_parent' | '_top' | (string & {});
+/** Date accepted by date-aware blocks: a `Date`, an ISO string, or epoch milliseconds. */
+export type DisplayDate = Date | string | number;
+/** Button rendered by a block, with every `UButton` prop. */
+export interface DisplayAction extends Omit<ButtonProps, 'label'> {
+    label?: DisplayText;
+}
+/** Badge rendered by a block, with every `UBadge` prop. `tone` is a shorthand for `color`. */
+export interface DisplayChip extends Omit<BadgeProps, 'label'> {
+    label: DisplayText;
+    tone?: DisplayTone;
+}
+/** The `UBadge` slots of a chip. */
+export type DisplayChipSlot = 'base' | 'label' | 'leadingIcon' | 'leadingAvatar' | 'leadingAvatarSize' | 'trailingIcon';
+/** Classes per `UBadge` slot of every chip, from `appConfig.nuxtUiTools.display.ui.chip`. */
+export type DisplayChipUi = DisplayUiSlots<DisplayChipSlot>;
+/** Avatar with every `UAvatar` prop. Without `src`, the initials of `alt` show. */
+export type DisplayAvatar = AvatarProps;
+/** Slot classes of a block: every key is optional and merged over the defaults. */
+export type DisplayUiSlots<TSlot extends string> = Partial<Record<TSlot, string>>;
+/** Props every block accepts. */
+export interface DisplayBlockBase<TSlot extends string> {
+    /** Draws the block's skeleton instead of its content. */
+    loading?: boolean;
+    /** Class overrides per slot, merged over `appConfig.nuxtUiTools.display.ui.<kind>`. */
+    ui?: DisplayUiSlots<TSlot>;
+}
+/** Props of blocks listing items, which fold after `max` and reveal `step` more at a time. */
+export interface DisplayRevealable {
+    /** Items shown before the "show more" button. */
+    max?: number;
+    /** Items each "show more" reveals. Defaults to everything left. */
+    step?: number;
+    /** Shown when there is nothing to list. Defaults to a localized "Nothing to show". */
+    empty?: DisplayContent;
+}

package/dist/runtime/display/utils/classes.d.ts

@@ -0,0 +1,3 @@
+import type { DisplayUiSlots } from '../types/index.js';
+/** Merges each slot's defaults with the app config and the block `ui`, later layers winning. */
+export declare function resolveDisplayClasses<TSlot extends string>(defaults: Record<TSlot, string>, ...layers: (DisplayUiSlots<TSlot> | undefined)[]): Record<TSlot, string>;

package/dist/runtime/display/utils/classes.js

@@ -0,0 +1,7 @@
+import { twMerge } from "tailwind-merge";
+export function resolveDisplayClasses(defaults, ...layers) {
+  const resolved = { ...defaults };
+  for (const key in defaults)
+    resolved[key] = twMerge(defaults[key], ...layers.map((layer) => layer?.[key]));
+  return resolved;
+}

package/dist/runtime/display/utils/config.d.ts

@@ -0,0 +1,11 @@
+import type { AppConfig } from 'nuxt/schema';
+import type { DisplayKind, DisplayPropsMap, DisplayUiConfig, DisplayUiSlots } from '../types/index.js';
+/** `appConfig.nuxtUiTools.display`, or an empty config. */
+export declare function resolveAppDisplayConfig(config: Pick<AppConfig, 'nuxtUiTools'>): DisplayUiConfig;
+/**
+ * The props of a block over the defaults of its preset; an unknown preset changes nothing. Slot
+ * classes merge per slot, the block's over the preset's, like the other props.
+ */
+export declare function applyDisplayPreset<TKind extends DisplayKind>(kind: TKind, props: DisplayPropsMap[TKind], preset: string | undefined, config: DisplayUiConfig): DisplayPropsMap[TKind];
+/** Two slot class maps merged per slot with tailwind-merge, `over` winning conflicts. */
+export declare function mergeDisplaySlots(base: DisplayUiSlots<string> | undefined, over: DisplayUiSlots<string> | undefined): DisplayUiSlots<string> | undefined;

package/dist/runtime/display/utils/config.js

@@ -0,0 +1,17 @@
+import { twMerge } from "tailwind-merge";
+export function resolveAppDisplayConfig(config) {
+  return config.nuxtUiTools?.display ?? {};
+}
+export function applyDisplayPreset(kind, props, preset, config) {
+  const defaults = preset === void 0 ? void 0 : config.presets?.[kind]?.[preset];
+  if (!defaults) return props;
+  const merged = { ...defaults, ...props };
+  const ui = mergeDisplaySlots(defaults.ui, props.ui);
+  return ui ? { ...merged, ui } : merged;
+}
+export function mergeDisplaySlots(base, over) {
+  if (!base || !over) return base ?? over;
+  const merged = { ...base };
+  for (const [slot, classes] of Object.entries(over)) merged[slot] = twMerge(base[slot], classes);
+  return merged;
+}

package/dist/runtime/display/utils/content.d.ts

@@ -0,0 +1,7 @@
+import type { DisplayContent, DisplayText } from '../types/index.js';
+/** `undefined`, `null`, `false` and `''` count as empty; a render function never does. */
+export declare function isDisplayContentEmpty(content: DisplayContent | undefined): content is false | void | "" | null | undefined;
+/** The string of a text or lazy text, or `undefined`. */
+export declare function resolveDisplayText(value: DisplayText | undefined): string | undefined;
+/** The string of content that is plain text, such as a `value` a copy button can copy. */
+export declare function displayContentText(content: DisplayContent | undefined): string | undefined;

package/dist/runtime/display/utils/content.js

@@ -0,0 +1,13 @@
+import { isFunction, isNumber, isString } from "../../shared/utils/predicate.js";
+export function isDisplayContentEmpty(content) {
+  return content === void 0 || content === null || content === "" || content === false;
+}
+export function resolveDisplayText(value) {
+  if (isFunction(value)) return String(value());
+  if (isString(value) || isNumber(value)) return String(value);
+  return void 0;
+}
+export function displayContentText(content) {
+  if (isString(content) || isNumber(content)) return String(content);
+  return void 0;
+}

package/dist/runtime/display/utils/dates.d.ts

@@ -0,0 +1,16 @@
+import type { DisplayDate } from '../types/index.js';
+/** A valid `Date`, or `null` for missing and unparsable input. */
+export declare function toDisplayDate(value: DisplayDate | undefined | null): Date | null;
+/** Calendar days from `from` to `to`, ignoring the time of day. */
+export declare function calendarDaysBetween(from: Date, to: Date): number;
+export declare function formatDisplayDate(date: Date, locale: string, options: Intl.DateTimeFormatOptions): string;
+/** "Tomorrow", "In 3 days", "2 days ago", capitalized like a sentence. */
+export declare function formatRelativeDays(days: number, locale: string): string;
+/** "3 days", "1 day". */
+export declare function formatDayCount(days: number, locale: string): string;
+/** Parts of a calendar leaf: "OCT.", "24", "thu.". */
+export declare function calendarLeaf(date: Date, locale: string): {
+    day: string;
+    month: string;
+    weekday: string;
+};

package/dist/runtime/display/utils/dates.js

@@ -0,0 +1,34 @@
+import { isDate, isNumber, isString } from "../../shared/utils/predicate.js";
+const DAY = 864e5;
+export function toDisplayDate(value) {
+  if (isDate(value)) return Number.isNaN(value.getTime()) ? null : value;
+  if (isString(value) || isNumber(value)) {
+    const date = new Date(value);
+    return Number.isNaN(date.getTime()) ? null : date;
+  }
+  return null;
+}
+export function calendarDaysBetween(from, to) {
+  const start = Date.UTC(from.getFullYear(), from.getMonth(), from.getDate());
+  const end = Date.UTC(to.getFullYear(), to.getMonth(), to.getDate());
+  return Math.round((end - start) / DAY);
+}
+export function formatDisplayDate(date, locale, options) {
+  return new Intl.DateTimeFormat(locale, options).format(date);
+}
+export function formatRelativeDays(days, locale) {
+  const text = new Intl.RelativeTimeFormat(locale, { numeric: "auto" }).format(days, "day");
+  return text.charAt(0).toLocaleUpperCase(locale) + text.slice(1);
+}
+export function formatDayCount(days, locale) {
+  return new Intl.NumberFormat(locale, { style: "unit", unit: "day", unitDisplay: "long" }).format(
+    days
+  );
+}
+export function calendarLeaf(date, locale) {
+  return {
+    day: formatDisplayDate(date, locale, { day: "numeric" }),
+    month: formatDisplayDate(date, locale, { month: "short" }).toLocaleUpperCase(locale),
+    weekday: formatDisplayDate(date, locale, { weekday: "short" })
+  };
+}

package/dist/runtime/display/utils/json.d.ts

@@ -0,0 +1,7 @@
+export type JsonTokenKind = 'key' | 'string' | 'number' | 'literal' | 'punctuation' | 'space';
+export interface JsonToken {
+    kind: JsonTokenKind;
+    text: string;
+}
+/** Splits JSON text into tokens for highlighting; unknown characters pass through as punctuation. */
+export declare function tokenizeJson(source: string): JsonToken[];

package/dist/runtime/display/utils/json.js

@@ -0,0 +1,15 @@
+const TOKEN = /("(?:\\.|[^"\\])*")(\s*:)?|(-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)|\b(true|false|null)\b|([{}[\],:])|(\s+)|(.)/gu;
+export function tokenizeJson(source) {
+  const tokens = [];
+  for (const match of source.matchAll(TOKEN)) {
+    const [, text, colon, number, literal, punctuation, space, other] = match;
+    if (text !== void 0) {
+      tokens.push({ kind: colon ? "key" : "string", text });
+      if (colon) tokens.push({ kind: "punctuation", text: colon });
+    } else if (number !== void 0) tokens.push({ kind: "number", text: number });
+    else if (literal !== void 0) tokens.push({ kind: "literal", text: literal });
+    else if (space !== void 0) tokens.push({ kind: "space", text: space });
+    else tokens.push({ kind: "punctuation", text: punctuation ?? other ?? "" });
+  }
+  return tokens;
+}

package/dist/runtime/display/utils/links.d.ts

@@ -0,0 +1,12 @@
+import type { DisplayLinkTarget } from '../types/index.js';
+/** Whether a link leaves the app: an absolute http(s) address (route objects never do). */
+export declare function isExternalLink<TTo>(to: TTo): to is TTo & string;
+/**
+ * Attributes of a block link: an absolute http(s) address opens in a new tab unless `target` says
+ * otherwise, and a new tab never gets access to the app (`noopener noreferrer`).
+ */
+export declare function displayLinkAttrs(to: string, target?: DisplayLinkTarget | null): {
+    rel: string | undefined;
+    target: DisplayLinkTarget | undefined;
+    to: string;
+};

package/dist/runtime/display/utils/links.js

@@ -0,0 +1,9 @@
+import { isString } from "../../shared/utils/predicate.js";
+const ABSOLUTE = /^https?:\/\//iu;
+export function isExternalLink(to) {
+  return isString(to) && ABSOLUTE.test(to);
+}
+export function displayLinkAttrs(to, target) {
+  const resolved = target === void 0 ? isExternalLink(to) ? "_blank" : void 0 : target ?? void 0;
+  return { rel: resolved === "_blank" ? "noopener noreferrer" : void 0, target: resolved, to };
+}

package/dist/runtime/display/utils/meter.d.ts

@@ -0,0 +1,7 @@
+import type { DisplayMeterProps, DisplayTone } from '../types/index.js';
+/** Share of `max` filled by `value`, between 0 and 1. */
+export declare function meterShare(value: number, max: number): number;
+/** The tone of a filled share: `error` and `warning` from their thresholds, else the given tone. */
+export declare function meterTone(share: number, tone: DisplayTone | undefined, thresholds: DisplayMeterProps['thresholds']): DisplayTone;
+/** Percent widths of parts sharing a track, summing to at most 100. */
+export declare function partWidths(values: readonly number[], max: number): number[];

package/dist/runtime/display/utils/meter.js

@@ -0,0 +1,13 @@
+export function meterShare(value, max) {
+  if (!Number.isFinite(value) || !Number.isFinite(max) || max <= 0) return 0;
+  return Math.min(1, Math.max(0, value / max));
+}
+export function meterTone(share, tone, thresholds) {
+  const percent = share * 100;
+  if (thresholds?.error !== void 0 && percent >= thresholds.error) return "error";
+  if (thresholds?.warning !== void 0 && percent >= thresholds.warning) return "warning";
+  return tone ?? "primary";
+}
+export function partWidths(values, max) {
+  return values.map((value) => meterShare(value, max) * 100);
+}

package/dist/runtime/display/utils/registry.d.ts

@@ -0,0 +1,47 @@
+export type DisplaySkeletonLayout = 'lines' | 'rows' | 'tiles' | 'card' | 'media' | 'ring' | 'block';
+/** The component drawing each display kind. */
+export declare const DISPLAY_BLOCKS: {
+    readonly accordion: import("vue").DefineComponent<import("../types/index.js").DisplayAccordionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("../types/index.js").DisplayAccordionProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    readonly alert: import("vue").DefineComponent<import("../types/index.js").DisplayAlertProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("../types/index.js").DisplayAlertProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    readonly breakdown: import("vue").DefineComponent<import("../types/index.js").DisplayBreakdownProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("../types/index.js").DisplayBreakdownProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    readonly chart: import("vue").DefineComponent<import("../types/index.js").DisplayChartProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("../types/index.js").DisplayChartProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    readonly code: import("vue").DefineComponent<import("../types/index.js").DisplayCodeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("../types/index.js").DisplayCodeProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    readonly date: import("vue").DefineComponent<import("../types/index.js").DisplayDateProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("../types/index.js").DisplayDateProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    readonly diff: import("vue").DefineComponent<import("../types/index.js").DisplayDiffProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("../types/index.js").DisplayDiffProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    readonly empty: import("vue").DefineComponent<import("../types/index.js").DisplayEmptyProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("../types/index.js").DisplayEmptyProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    readonly facts: import("vue").DefineComponent<import("../types/index.js").DisplayFactsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("../types/index.js").DisplayFactsProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    readonly heading: import("vue").DefineComponent<import("../types/index.js").DisplayHeadingProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("../types/index.js").DisplayHeadingProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    readonly list: import("vue").DefineComponent<import("../types/index.js").DisplayListProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("../types/index.js").DisplayListProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    readonly media: import("vue").DefineComponent<import("../types/index.js").DisplayMediaProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("../types/index.js").DisplayMediaProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    readonly meter: import("vue").DefineComponent<import("../types/index.js").DisplayMeterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("../types/index.js").DisplayMeterProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    readonly person: import("vue").DefineComponent<import("../types/index.js").DisplayPersonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("../types/index.js").DisplayPersonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    readonly record: import("vue").DefineComponent<import("../types/index.js").DisplayRecordProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("../types/index.js").DisplayRecordProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    readonly stat: import("vue").DefineComponent<import("../types/index.js").DisplayStatProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("../types/index.js").DisplayStatProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    readonly table: import("vue").DefineComponent<import("../types/index.js").DisplayTableProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("../types/index.js").DisplayTableProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    readonly text: import("vue").DefineComponent<import("../types/index.js").DisplayTextProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("../types/index.js").DisplayTextProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    readonly timeline: import("vue").DefineComponent<import("../types/index.js").DisplayTimelineProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("../types/index.js").DisplayTimelineProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+};
+/** Kinds in a stable order, for docs and pickers. */
+export declare const DISPLAY_KINDS: readonly (keyof import("../types/index.js").DisplayPropsMap)[];
+/** Skeleton drawn for each kind while its props load. */
+export declare const DISPLAY_SKELETON_LAYOUTS: {
+    readonly accordion: "rows";
+    readonly alert: "block";
+    readonly breakdown: "rows";
+    readonly chart: "block";
+    readonly code: "block";
+    readonly date: "card";
+    readonly diff: "rows";
+    readonly empty: "block";
+    readonly facts: "rows";
+    readonly heading: "lines";
+    readonly list: "lines";
+    readonly media: "media";
+    readonly meter: "lines";
+    readonly person: "card";
+    readonly record: "card";
+    readonly stat: "lines";
+    readonly table: "rows";
+    readonly text: "lines";
+    readonly timeline: "lines";
+};