nuxt-ui-tools 1.23.0 → 1.25.0

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,53 @@
+import type { DisplayKind, DisplayPropsMap, DisplayUiMap } from './registry.js';
+import type { DisplayBuiltinTone, 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>;
+    ui?: Partial<DisplayUiMap>;
+}

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,71 @@
+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>);
+/** 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;
+}
+/** 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,6 @@
+import type { AppConfig } from 'nuxt/schema';
+import type { DisplayKind, DisplayPropsMap, DisplayUiConfig } 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. */
+export declare function applyDisplayPreset<TKind extends DisplayKind>(kind: TKind, props: DisplayPropsMap[TKind], preset: string | undefined, config: DisplayUiConfig): DisplayPropsMap[TKind];

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

@@ -0,0 +1,7 @@
+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];
+  return defaults ? { ...defaults, ...props } : props;
+}

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/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";
+};

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

@@ -0,0 +1,64 @@
+import DisplayAccordion from "../components/blocks/display-accordion.vue";
+import DisplayAlert from "../components/blocks/display-alert.vue";
+import DisplayBreakdown from "../components/blocks/display-breakdown.vue";
+import DisplayChart from "../components/blocks/display-chart.vue";
+import DisplayCode from "../components/blocks/display-code.vue";
+import DisplayDate from "../components/blocks/display-date.vue";
+import DisplayDiff from "../components/blocks/display-diff.vue";
+import DisplayEmpty from "../components/blocks/display-empty.vue";
+import DisplayFacts from "../components/blocks/display-facts.vue";
+import DisplayHeading from "../components/blocks/display-heading.vue";
+import DisplayList from "../components/blocks/display-list.vue";
+import DisplayMedia from "../components/blocks/display-media.vue";
+import DisplayMeter from "../components/blocks/display-meter.vue";
+import DisplayPerson from "../components/blocks/display-person.vue";
+import DisplayRecord from "../components/blocks/display-record.vue";
+import DisplayStat from "../components/blocks/display-stat.vue";
+import DisplayTable from "../components/blocks/display-table.vue";
+import DisplayText from "../components/blocks/display-text.vue";
+import DisplayTimeline from "../components/blocks/display-timeline.vue";
+export const DISPLAY_BLOCKS = {
+  accordion: DisplayAccordion,
+  alert: DisplayAlert,
+  breakdown: DisplayBreakdown,
+  chart: DisplayChart,
+  code: DisplayCode,
+  date: DisplayDate,
+  diff: DisplayDiff,
+  empty: DisplayEmpty,
+  facts: DisplayFacts,
+  heading: DisplayHeading,
+  list: DisplayList,
+  media: DisplayMedia,
+  meter: DisplayMeter,
+  person: DisplayPerson,
+  record: DisplayRecord,
+  stat: DisplayStat,
+  table: DisplayTable,
+  text: DisplayText,
+  timeline: DisplayTimeline
+};
+export const DISPLAY_KINDS = Object.freeze(
+  Object.keys(DISPLAY_BLOCKS).filter((kind) => kind in DISPLAY_BLOCKS)
+);
+export const DISPLAY_SKELETON_LAYOUTS = {
+  accordion: "rows",
+  alert: "block",
+  breakdown: "rows",
+  chart: "block",
+  code: "block",
+  date: "card",
+  diff: "rows",
+  empty: "block",
+  facts: "rows",
+  heading: "lines",
+  list: "lines",
+  media: "media",
+  meter: "lines",
+  person: "card",
+  record: "card",
+  stat: "lines",
+  table: "rows",
+  text: "lines",
+  timeline: "lines"
+};

package/dist/runtime/display/utils/tone-css.d.ts

@@ -0,0 +1,7 @@
+import type { DisplayUiConfig } from '../types/index.js';
+/**
+ * The stylesheet of the tones an app registers or restyles: their `--nut-display-<tone>*`
+ * variables (light, then `.dark`) and, for new tones, the class that points `--nut-tone*` at them.
+ * Names other than lowercase words and values that could leave the declaration are skipped.
+ */
+export declare function buildDisplayToneCss(tones: DisplayUiConfig['tones']): string;

package/dist/runtime/display/utils/tone-css.js

@@ -0,0 +1,38 @@
+import { isBuiltinTone } from "./tone.js";
+const TONE_NAME = /^[a-z][a-z0-9-]*$/u;
+const UNSAFE_VALUE = /[{}<>;]/u;
+export function buildDisplayToneCss(tones) {
+  const light = [];
+  const dark = [];
+  const classes = [];
+  for (const [name, definition] of Object.entries(tones ?? {})) {
+    if (!definition || !TONE_NAME.test(name)) continue;
+    const builtin = isBuiltinTone(name);
+    if (!builtin && !definition.color) continue;
+    light.push(...declarations(name, definition, !builtin));
+    if (definition.dark) dark.push(...declarations(name, definition.dark, false));
+    if (!builtin) classes.push(toneClassRule(name));
+  }
+  return [
+    light.length ? `:root{${light.join(";")}}` : "",
+    dark.length ? `.dark{${dark.join(";")}}` : "",
+    ...classes
+  ].filter(Boolean).join("\n");
+}
+function declarations(name, colors, fill) {
+  const mix = (share) => fill && colors.color ? `color-mix(in oklab, ${colors.color} ${share}%, var(--ui-bg))` : void 0;
+  const entries = [
+    ["", colors.color],
+    ["-ink", colors.ink ?? (fill ? colors.color : void 0)],
+    ["-soft", colors.soft ?? mix(12)],
+    ["-line", colors.line ?? mix(40)],
+    ["-contrast", colors.contrast ?? (fill ? "var(--ui-text-inverted)" : void 0)]
+  ];
+  return entries.flatMap(
+    ([part, value]) => value && !UNSAFE_VALUE.test(value) ? [`--nut-display-${name}${part}:${value}`] : []
+  );
+}
+function toneClassRule(name) {
+  const variable = (part) => `var(--nut-display-${name}${part ? `-${part}` : ""})`;
+  return `:where(.nut-display-tone-${name}){--nut-tone:${variable("")};--nut-tone-ink:${variable("ink")};--nut-tone-soft:${variable("soft")};--nut-tone-line:${variable("line")};--nut-tone-contrast:${variable("contrast")}}`;
+}

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

@@ -0,0 +1,26 @@
+import type { DisplayBuiltinTone, DisplayTone } from '../types/index.js';
+/**
+ * Class that points the `--nut-tone*` variables of an element at a tone. Built-in tones are
+ * defined in the token stylesheet; registered ones by the rules the display plugin injects.
+ */
+export declare function displayToneClass(tone: DisplayTone): string;
+/** Whether a tone is one of the Nuxt UI colors, which Nuxt UI components take as `color`. */
+export declare function isBuiltinTone(tone: string): tone is DisplayBuiltinTone;
+/** Box classes of each surface. `plain` adds nothing so a block sits on the page. */
+export declare const DISPLAY_SURFACE_CLASSES: {
+    readonly bordered: "rounded-[var(--nut-display-radius)] border border-default";
+    readonly elevated: "rounded-[var(--nut-display-radius)] bg-default shadow-[0_10px_28px_-14px_rgb(0_0_0/0.3)] ring ring-default";
+    readonly muted: "rounded-[var(--nut-display-radius)] bg-elevated";
+    readonly plain: "";
+};
+/** Padding applied inside a boxed surface. */
+export declare const DISPLAY_SURFACE_PADDING: {
+    readonly bordered: "p-4";
+    readonly elevated: "p-4";
+    readonly muted: "p-4";
+    readonly plain: "";
+};
+/** A stable tone for a name, so a person keeps the same tint everywhere. */
+export declare function toneFromName(name: string): DisplayTone;
+/** Up to two initials of a name. */
+export declare function initialsOf(name: string): string;