nuxt-ui-tools 1.24.0 → 1.25.1

package/dist/runtime/form/fields/info/types.d.ts

@@ -1,12 +1,86 @@
-import type { FormFieldCallback } from '../../types/callbacks.js';
-import type { FormStatelessFieldBase } from '../../types/field-base.js';
-import type { FormRenderable, FormText } from '../../types/utils.js';
+import type { DisplayKind, DisplayPropsMap } from '../../../display/types/index.js';
+import type { FormFieldCallback, FormFieldCallbackParams } from '../../types/callbacks.js';
+import type { FormQueryOptions } from '../../types/context.js';
+import type { FormFieldDescription, FormFieldProps, FormStatelessFieldBase } from '../../types/field-base.js';
+import type { FormDynamic, FormRenderable, FormText } from '../../types/utils.js';
+/** Props of a notice field: its `content` drawn in an alert. */
 export interface FormInfoProps {
     title?: FormText;
     icon?: string | false;
     color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral';
     variant?: 'solid' | 'outline' | 'soft' | 'subtle';
 }
-export interface FormInfoField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>> extends FormStatelessFieldBase<'info', TContext, TDeps, FormInfoProps> {
+interface FormInfoFieldBase<TContext, TDeps> extends Omit<FormStatelessFieldBase<'info', TContext, TDeps>, 'props'> {
+    /** Raw dependency paths read before evaluating `props`, `content` and `condition`. */
+    dependencies?: readonly (string | readonly [string, string])[];
+    /**
+     * Draws the field inside the standard label wrapper, like an input, for a read-only value that
+     * belongs in the form grid. `description`, `hint` and `help` do the same.
+     */
+    label?: FormText;
+    description?: FormText | FormFieldDescription;
+    hint?: FormText;
+    help?: FormText;
+}
+/** A notice: `content` in an alert, styled by `props`. */
+export interface FormInfoNoticeField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>> extends FormInfoFieldBase<TContext, TDeps> {
+    display?: undefined;
+    preset?: undefined;
     content: FormRenderable | FormFieldCallback<FormRenderable, TContext, TDeps>;
+    props?: FormFieldProps<FormInfoProps, TContext, TDeps>;
 }
+/**
+ * Props of a display block, or a way to load them: a promise, or TanStack Query options whose
+ * data (after `select`) is the props, cached under their `queryKey`.
+ */
+export type FormInfoDisplaySource<TProps> = TProps | Promise<TProps> | FormQueryOptions<TProps>;
+/**
+ * A display block: `display` picks the kind and `props` configure it, statically or from the
+ * field's dependencies, so the block follows the form values. `props` may also load them: a
+ * callback returning a promise or query options runs again when a dependency changes, shows the
+ * block's skeleton until they arrive, drops a late answer to an older run, and shows a compact
+ * error with a retry button when loading fails.
+ *
+ * @example
+ * ```ts
+ * {
+ *   key: 'quote',
+ *   type: 'info',
+ *   display: 'breakdown',
+ *   dependencies: ['seats'],
+ *   props: ({ deps }) => ({
+ *     lines: [{ label: 'Licences', detail: `${deps.get<number>('seats')} × 96 €`, value: '…' }],
+ *     total: { label: 'Total', value: '…' },
+ *   }),
+ * }
+ *
+ * {
+ *   key: 'accountNote',
+ *   type: 'info',
+ *   display: 'text',
+ *   dependencies: ['accountId'],
+ *   props: ({ deps }) =>
+ *     queryOptions({
+ *       queryKey: ['accounts', deps.get('accountId'), 'note'],
+ *       queryFn: () => fetchAccountNote(deps.get('accountId')),
+ *       select: (note) => ({ appearance: 'quote', text: note.body, author: note.author }),
+ *     }),
+ * }
+ * ```
+ */
+export type FormInfoDisplayField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>> = {
+    [TKind in DisplayKind]: FormInfoFieldBase<TContext, TDeps> & {
+        display: TKind;
+        /** Name of a preset in `appConfig.nuxtUiTools.display.presets[display]`; `props` override it. */
+        preset?: string;
+        content?: undefined;
+        /**
+         * The block's props, or a callback receiving `{ ctx, deps, api }` that returns them, a promise
+         * of them, or query options. `api.form` sets values, submits, or closes the form, so a block
+         * action can act on it.
+         */
+        props: FormDynamic<FormInfoDisplaySource<DisplayPropsMap[TKind]>, FormFieldCallbackParams<TContext, TDeps>>;
+    };
+}[DisplayKind];
+export type FormInfoField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>> = FormInfoNoticeField<TContext, TDeps> | FormInfoDisplayField<TContext, TDeps>;
+export {};

package/dist/runtime/form/fields/info/use-info-display.d.ts

@@ -0,0 +1,20 @@
+import type { ComputedRef } from 'vue';
+import type { DisplayKind, DisplayPropsMap } from '../../../display/types/index.js';
+import type { FormFieldCallbackParams } from '../../types/index.js';
+import type { FormInfoDisplayField } from './types.js';
+type DisplayProps = DisplayPropsMap[DisplayKind];
+/**
+ * Resolves the props of a display field: static, derived from its dependencies, or loaded through
+ * a promise or TanStack Query options. A promise from an older run never overwrites a newer one.
+ */
+export declare function useInfoDisplay(params: {
+    field: () => FormInfoDisplayField | undefined;
+    callbackParams: ComputedRef<FormFieldCallbackParams>;
+    path: () => readonly string[];
+}): {
+    error: ComputedRef<unknown>;
+    pending: ComputedRef<boolean>;
+    props: ComputedRef<DisplayProps | undefined>;
+    retry: () => void;
+};
+export {};

package/dist/runtime/form/fields/info/use-info-display.js

@@ -0,0 +1,82 @@
+import { useQuery } from "@tanstack/vue-query";
+import { computed, ref, shallowRef, unref, watch } from "vue";
+import { isPlainObject, isPromise } from "../../../shared/utils/predicate.js";
+import { resolveFormDynamic } from "../../utils/dynamic.js";
+import { isRecord } from "../../utils/path.js";
+export function useInfoDisplay(params) {
+  const attempt = ref(0);
+  const promiseRun = ref(0);
+  const promiseProps = shallowRef(void 0);
+  const promisePending = ref(false);
+  const promiseError = shallowRef(null);
+  const source = computed(() => {
+    void attempt.value;
+    const field = params.field();
+    return field ? resolveFormDynamic(
+      field.props,
+      params.callbackParams.value
+    ) : void 0;
+  });
+  const querySource = computed(() => isQueryOptions(source.value) ? source.value : null);
+  const query = useQuery(
+    computed(
+      () => querySource.value ?? {
+        enabled: false,
+        queryFn: async () => null,
+        queryKey: ["form-info", params.path().join("."), "disabled"]
+      }
+    )
+  );
+  watch(
+    source,
+    async (current) => {
+      if (!isPromise(current)) {
+        promiseRun.value += 1;
+        promisePending.value = false;
+        promiseError.value = null;
+        return;
+      }
+      const run = promiseRun.value + 1;
+      promiseRun.value = run;
+      promisePending.value = true;
+      promiseError.value = null;
+      try {
+        const result = await current;
+        if (promiseRun.value !== run) return;
+        promiseProps.value = isDisplayProps(result) ? result : void 0;
+      } catch (caughtError) {
+        if (promiseRun.value === run) promiseError.value = caughtError;
+      } finally {
+        if (promiseRun.value === run) promisePending.value = false;
+      }
+    },
+    { immediate: true }
+  );
+  const props = computed(() => {
+    const current = source.value;
+    if (querySource.value) {
+      const data = unref(query.data);
+      return isDisplayProps(data) ? data : void 0;
+    }
+    if (isPromise(current)) return promisePending.value ? void 0 : promiseProps.value;
+    return isDisplayProps(current) ? current : void 0;
+  });
+  const pending = computed(() => {
+    if (querySource.value) return unref(query.isPending) && unref(query.fetchStatus) !== "idle";
+    return promisePending.value;
+  });
+  const error = computed(
+    () => querySource.value ? unref(query.error) ?? null : promiseError.value
+  );
+  function retry() {
+    if (querySource.value) void query.refetch();
+    else attempt.value += 1;
+  }
+  return { error, pending, props, retry };
+}
+function isQueryOptions(value) {
+  return isRecord(value) && Array.isArray(Object.getOwnPropertyDescriptor(value, "queryKey")?.value);
+}
+function isDisplayProps(value) {
+  return isPlainObject(value) && !isQueryOptions(value);
+}

package/dist/runtime/form/fields/upload/upload-item.vue

@@ -2,7 +2,7 @@
 import UButton from "@nuxt/ui/components/Button.vue";
 import UIcon from "@nuxt/ui/components/Icon.vue";
 import UProgress from "@nuxt/ui/components/Progress.vue";
-import { computed } from "vue";
+import { computed, ref, watch } from "vue";
 import { useUiToolsLocale } from "../../../i18n/use-locale";
 import { fileExtensionLabel, fileIconName, formatFileSize } from "../../../shared/utils/file";
 const props = defineProps({
@@ -14,6 +14,13 @@ const props = defineProps({
 const emit = defineEmits(["open", "start", "cancel", "retry", "remove", "replace"]);
 const { code, t } = useUiToolsLocale();
 const icon = computed(() => fileIconName(props.item.type));
+const thumbnailFailed = ref(false);
+watch(
+  () => props.item.thumbnail,
+  () => {
+    thumbnailFailed.value = false;
+  }
+);
 const meta = computed(() => {
   if (props.item.description) return props.item.description;
   const extension = fileExtensionLabel({ name: props.item.name, type: props.item.type });
@@ -37,9 +44,10 @@ const status = computed(() => {
     :data-form-upload-item="item.status"
   >
     <img
-      v-if="item.thumbnail"
+      v-if="item.thumbnail && !thumbnailFailed"
       :src="item.thumbnail"
       :alt="item.name"
+      @error="thumbnailFailed = true"
       class="shrink-0 rounded-md border border-default bg-white object-contain p-0.5"
       :class="compact ? 'size-7' : 'size-10'"
     />

package/dist/runtime/form/types/api.d.ts

@@ -59,6 +59,12 @@ export interface FormFieldFormApi {
     reset: () => Promise<void>;
     /** Submits the form through the configured submit lifecycle. */
     submit: () => Promise<boolean>;
+    /**
+     * Closes the form the way its Cancel action does: asks to discard unsaved changes when the
+     * schema asks for it, then cancels (an overlay closes). Does nothing for a form rendered without
+     * a cancel handler.
+     */
+    close: () => Promise<void>;
     /** Advances to the next step on stepped forms. */
     nextStep: () => Promise<boolean>;
     /** Returns to the previous step on stepped forms. */

package/dist/runtime/form/types/runtime.d.ts

@@ -92,4 +92,6 @@ export interface FormRuntime {
     nextStep: () => Promise<boolean>;
     previousStep: () => Promise<boolean>;
     goToStep: (index: number) => Promise<boolean>;
+    /** Cancels the rendered form, as its Cancel action does. Set by the form root that renders it. */
+    bindCancel: (cancel: (() => Promise<void>) | null) => void;
 }

package/dist/runtime/form/utils/dynamic.d.ts

@@ -0,0 +1,6 @@
+import type { FormDynamic } from '../types/index.js';
+/**
+ * Value of a static-or-callback option: the callback's result for `params`, else the value.
+ * Any function counts as the callback, the same convention as every field callback.
+ */
+export declare function resolveFormDynamic<TValue, TParams>(value: FormDynamic<TValue, TParams>, params: TParams): TValue;

package/dist/runtime/form/utils/dynamic.js

@@ -0,0 +1,7 @@
+import { isFunction } from "../../shared/utils/predicate.js";
+export function resolveFormDynamic(value, params) {
+  return isDynamicCallback(value) ? value(params) : value;
+}
+function isDynamicCallback(value) {
+  return isFunction(value);
+}

package/dist/runtime/i18n/locales/en.js

@@ -97,6 +97,33 @@ export default defineUiToolsLocale({
         retry: "Retry"
       }
     },
+    display: {
+      after: "After",
+      before: "Before",
+      conceal: "Hide",
+      copied: "Copied",
+      copy: "Copy",
+      details: "Details",
+      download: "Download",
+      dueOn: "Due {date}",
+      empty: "Nothing to show",
+      field: "Field",
+      from: "From",
+      hideDetails: "Hide details",
+      loadError: "This content could not be loaded.",
+      open: "Open",
+      overdue: "{duration} overdue",
+      pages: "{count} pages",
+      play: "Play the video",
+      readLess: "Show less",
+      readMore: "Read more",
+      retry: "Retry",
+      reveal: "Show",
+      showDetails: "Show details",
+      showMore: "Show more \xB7 {count}",
+      to: "To",
+      today: "Today"
+    },
     filePreview: {
       close: "Close",
       converted: {

package/dist/runtime/i18n/locales/fr.js

@@ -97,6 +97,33 @@ export default defineUiToolsLocale({
         retry: "R\xE9essayer"
       }
     },
+    display: {
+      after: "Apr\xE8s",
+      before: "Avant",
+      conceal: "Masquer",
+      copied: "Copi\xE9",
+      copy: "Copier",
+      details: "D\xE9tail",
+      download: "T\xE9l\xE9charger",
+      dueOn: "\xC9ch\xE9ance {date}",
+      empty: "Rien \xE0 afficher",
+      field: "Champ",
+      from: "Du",
+      hideDetails: "Masquer le d\xE9tail",
+      loadError: "Ce contenu n\u2019a pas pu \xEAtre charg\xE9.",
+      open: "Ouvrir",
+      overdue: "En retard de {duration}",
+      pages: "{count} pages",
+      play: "Lire la vid\xE9o",
+      readLess: "R\xE9duire",
+      readMore: "Lire la suite",
+      retry: "R\xE9essayer",
+      reveal: "Afficher",
+      showDetails: "Voir le d\xE9tail",
+      showMore: "Voir plus \xB7 {count}",
+      to: "Au",
+      today: "Aujourd'hui"
+    },
     filePreview: {
       close: "Fermer",
       converted: {

package/dist/runtime/i18n/types.d.ts

@@ -723,6 +723,40 @@ export interface UiToolsDashboardMessages {
         };
     };
 }
+export interface UiToolsDisplayMessages {
+    /** Shown by a block with nothing to list. */
+    empty: string;
+    /** "Show more · {count}" */
+    showMore: string;
+    readMore: string;
+    readLess: string;
+    showDetails: string;
+    hideDetails: string;
+    /** Toggle of a collapsible breakdown. */
+    details: string;
+    copy: string;
+    copied: string;
+    reveal: string;
+    conceal: string;
+    open: string;
+    download: string;
+    play: string;
+    today: string;
+    from: string;
+    to: string;
+    /** "{duration} overdue" */
+    overdue: string;
+    /** "Due {date}" */
+    dueOn: string;
+    /** "{count} pages" */
+    pages: string;
+    /** Shown when a block's props failed to load. */
+    loadError: string;
+    retry: string;
+    field: string;
+    before: string;
+    after: string;
+}
 export interface UiToolsFilePreviewMessages {
     /** Name shown for a file that has none, such as a pasted image. */
     untitled: string;
@@ -831,6 +865,7 @@ export interface UiToolsFilePreviewMessages {
 }
 export interface Messages {
     dashboard: UiToolsDashboardMessages;
+    display: UiToolsDisplayMessages;
     filePreview: UiToolsFilePreviewMessages;
     form: UiToolsFormMessages;
     table: UiToolsTableMessages;

package/dist/runtime/shared/styles/tokens.css

@@ -1 +1 @@
-@layer theme, base, components, utilities;@layer base{:root{--nut-form-veil:rgba(31,29,26,.18)}.dark{--nut-form-veil:rgba(0,0,0,.45)}:where(:root){--nut-dash-s1:var(--ui-primary);--nut-dash-s2:var(--ui-color-neutral-400);--nut-dash-s3:var(--ui-secondary);--nut-dash-s4:color-mix(in oklab,var(--ui-primary) 20%,var(--ui-bg));--nut-dash-s5:var(--ui-warning);--nut-dash-s6:color-mix(in oklab,var(--ui-secondary) 35%,var(--ui-bg));--nut-dash-up:var(--ui-success);--nut-dash-up-mark:var(--nut-dash-up);--nut-dash-down:var(--ui-error);--nut-dash-muted:var(--ui-border-accented);--nut-dash-track:var(--ui-bg-elevated);--nut-dash-grid:var(--ui-border-muted);--nut-dash-axis:var(--ui-text-dimmed);--nut-dash-ref:var(--ui-text-dimmed);--nut-dash-ref-label:var(--ui-text-muted);--nut-dash-ghost:var(--ui-bg-accented);--nut-dash-ghost-shine:color-mix(in oklab,var(--ui-bg) 70%,transparent);--nut-dash-filter-active:color-mix(in oklab,var(--ui-primary) 9%,var(--ui-bg));--nut-dash-filter-active-line:color-mix(in oklab,var(--ui-primary) 35%,var(--ui-border));--nut-dash-filter-ink:var(--nut-dl-accent-ink,var(--ui-primary));--nut-dash-row-hover:var(--ui-bg-elevated)}:where(.dark){--nut-dash-s2:var(--ui-color-neutral-500);--nut-dash-s4:color-mix(in oklab,var(--ui-primary) 30%,var(--ui-bg));--nut-dash-s6:color-mix(in oklab,var(--ui-secondary) 40%,var(--ui-bg))}@supports (color:oklch(from red l c h)){:where(:root){--nut-dash-s4:oklch(from var(--ui-primary) 0.88 calc(c * 0.45) h);--nut-dash-s6:oklch(from var(--ui-secondary) 0.8 calc(c * 0.55) h)}:where(.dark){--nut-dash-s4:oklch(from var(--ui-primary) 0.42 calc(c * 0.6) h);--nut-dash-s6:oklch(from var(--ui-secondary) 0.45 calc(c * 0.65) h)}}:where(:root){--nut-fp-veil:rgba(31,29,26,.4);--nut-fp-stage:var(--ui-bg-muted);--nut-fp-document:#525659;--nut-fp-checker-a:#fff;--nut-fp-checker-b:#ebe7e2;--nut-fp-token-key:var(--ui-primary);--nut-fp-token-string:var(--ui-success);--nut-fp-token-number:var(--ui-info);--nut-fp-token-literal:var(--ui-error)}:where(.dark){--nut-fp-veil:rgba(0,0,0,.62);--nut-fp-stage:var(--ui-bg);--nut-fp-checker-a:#e9e4dd;--nut-fp-checker-b:#d8d1c7}}@layer components{.nut-dash-chart{--vis-font-family:inherit;--vis-axis-tick-label-color:var(--nut-dash-axis);--vis-axis-tick-label-font-size:10px;--vis-axis-grid-color:var(--nut-dash-grid);--vis-axis-domain-color:var(--nut-dash-grid);--vis-crosshair-line-stroke-color:var(--ui-border-accented);--vis-crosshair-circle-stroke-color:var(--ui-bg);--vis-tooltip-background-color:var(--ui-bg);--vis-tooltip-border-color:var(--ui-border);--vis-tooltip-text-color:var(--ui-text);--vis-tooltip-padding:8px 10px;--vis-tooltip-border-radius:calc(var(--ui-radius)*1.5);--vis-tooltip-shadow-color:rgb(0 0 0/8%);--vis-plotline-label-font-size:10px}.nut-dash-chart--bars [data-vis-component] rect:hover{opacity:.8}.nut-dash-tip{display:flex;flex-direction:column;font-size:12px;gap:4px;min-width:9rem}.nut-dash-tip-title{color:var(--ui-text-muted);font-weight:500}.nut-dash-tip-row{align-items:center;display:flex;gap:6px}.nut-dash-tip-row i{border-radius:2px;height:8px;width:8px}.nut-dash-tip-row span{color:var(--ui-text-muted);flex:1}.nut-dash-tip-row b{font-variant-numeric:tabular-nums;font-weight:600}.nut-dash-ghost{background:var(--nut-dash-ghost)}.nut-dash-shimmer{overflow:hidden;position:relative}.nut-dash-shimmer:after{animation:nut-dash-shimmer 1.6s ease-in-out infinite;background:linear-gradient(100deg,transparent 25%,var(--nut-dash-ghost-shine) 50%,transparent 75%);content:"";inset:0;pointer-events:none;position:absolute;transform:translateX(-100%);will-change:transform}@keyframes nut-dash-shimmer{to{transform:translateX(100%)}}.nut-dash-enter{animation:nut-dash-enter .28s ease-out}@keyframes nut-dash-enter{0%{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}.nut-dash-progress{animation:nut-dash-progress 1.1s ease-in-out infinite}@keyframes nut-dash-progress{0%{transform:translateX(-100%)}to{transform:translateX(300%)}}@media (prefers-reduced-motion:reduce){.nut-dash-shimmer:after{display:none}.nut-dash-enter{animation:none}.nut-dash-progress{animation-duration:3s}}.nut-fp-checker{background-color:var(--nut-fp-checker-a);background-image:conic-gradient(var(--nut-fp-checker-b) 25%,transparent 0 50%,var(--nut-fp-checker-b) 0 75%,transparent 0);background-size:18px 18px}.nut-fp-code [data-token=key]{color:var(--nut-fp-token-key)}.nut-fp-code [data-token=string]{color:var(--nut-fp-token-string)}.nut-fp-code [data-token=number]{color:var(--nut-fp-token-number)}.nut-fp-code [data-token=literal]{color:var(--nut-fp-token-literal)}[data-file-preview-bottom][data-single]:has([data-file-preview-tools]:empty){display:none}@keyframes nut-fp-progress{0%{transform:translateX(-100%)}to{transform:translateX(300%)}}.nut-fp-progress{animation:nut-fp-progress 1s ease-in-out infinite}@keyframes nut-fp-equalizer{to{transform:scaleY(.45)}}.nut-fp-equalizer{animation:nut-fp-equalizer .9s ease-in-out infinite alternate}@media (prefers-reduced-motion:reduce){.nut-fp-progress{animation-duration:2.4s}.nut-fp-equalizer{animation:none}}.nut-fp-prose{color:var(--ui-text);font-size:.925rem;line-height:1.7}.nut-fp-prose>:first-child{margin-top:0}.nut-fp-prose :where(h1,h2,h3,h4){color:var(--ui-text-highlighted);font-weight:650;letter-spacing:-.01em;line-height:1.25;margin:1.75em 0 .6em}.nut-fp-prose h1{font-size:1.6em}.nut-fp-prose h2{font-size:1.25em}.nut-fp-prose h3{font-size:1.05em}.nut-fp-prose :where(p,ul,ol,pre,table,blockquote){margin:0 0 1em}.nut-fp-prose :where(ul,ol){padding-inline-start:1.4em}.nut-fp-prose ul{list-style:disc}.nut-fp-prose ol{list-style:decimal}.nut-fp-prose a{color:var(--ui-primary);text-decoration:underline;text-underline-offset:2px}.nut-fp-prose :not(pre)>code{background:var(--ui-bg-elevated);border:1px solid var(--ui-border-muted);border-radius:4px;font-size:.86em;padding:.1em .35em}.nut-fp-prose pre{background:var(--ui-bg-elevated);border:1px solid var(--ui-border);border-radius:8px;font-size:.85em;overflow-x:auto;padding:.9em 1.1em}.nut-fp-prose table{border-collapse:collapse;display:block;font-size:.9em;overflow-x:auto}.nut-fp-prose :where(th,td){border:1px solid var(--ui-border);padding:.4em .75em;text-align:start}.nut-fp-prose th{background:var(--ui-bg-elevated);font-weight:600}.nut-fp-prose blockquote{border-inline-start:3px solid var(--ui-primary);color:var(--ui-text-toned);padding-inline-start:1em}.nut-fp-prose img{border-radius:6px;max-width:100%}}
+@layer theme, base, components, utilities;@layer base{:root{--nut-form-veil:rgba(31,29,26,.18)}.dark{--nut-form-veil:rgba(0,0,0,.45)}:where(:root){--nut-dash-s1:var(--ui-primary);--nut-dash-s2:var(--ui-color-neutral-400);--nut-dash-s3:var(--ui-secondary);--nut-dash-s4:color-mix(in oklab,var(--ui-primary) 20%,var(--ui-bg));--nut-dash-s5:var(--ui-warning);--nut-dash-s6:color-mix(in oklab,var(--ui-secondary) 35%,var(--ui-bg));--nut-dash-up:var(--ui-success);--nut-dash-up-mark:var(--nut-dash-up);--nut-dash-down:var(--ui-error);--nut-dash-muted:var(--ui-border-accented);--nut-dash-track:var(--ui-bg-elevated);--nut-dash-grid:var(--ui-border-muted);--nut-dash-axis:var(--ui-text-dimmed);--nut-dash-ref:var(--ui-text-dimmed);--nut-dash-ref-label:var(--ui-text-muted);--nut-dash-ghost:var(--ui-bg-accented);--nut-dash-ghost-shine:color-mix(in oklab,var(--ui-bg) 70%,transparent);--nut-dash-filter-active:color-mix(in oklab,var(--ui-primary) 9%,var(--ui-bg));--nut-dash-filter-active-line:color-mix(in oklab,var(--ui-primary) 35%,var(--ui-border));--nut-dash-filter-ink:var(--nut-dl-accent-ink,var(--ui-primary));--nut-dash-row-hover:var(--ui-bg-elevated)}:where(.dark){--nut-dash-s2:var(--ui-color-neutral-500);--nut-dash-s4:color-mix(in oklab,var(--ui-primary) 30%,var(--ui-bg));--nut-dash-s6:color-mix(in oklab,var(--ui-secondary) 40%,var(--ui-bg))}@supports (color:oklch(from red l c h)){:where(:root){--nut-dash-s4:oklch(from var(--ui-primary) 0.88 calc(c * 0.45) h);--nut-dash-s6:oklch(from var(--ui-secondary) 0.8 calc(c * 0.55) h)}:where(.dark){--nut-dash-s4:oklch(from var(--ui-primary) 0.42 calc(c * 0.6) h);--nut-dash-s6:oklch(from var(--ui-secondary) 0.45 calc(c * 0.65) h)}}:where(:root){--nut-fp-veil:rgba(31,29,26,.4);--nut-fp-stage:var(--ui-bg-muted);--nut-fp-document:#525659;--nut-fp-checker-a:#fff;--nut-fp-checker-b:#ebe7e2;--nut-fp-token-key:var(--ui-primary);--nut-fp-token-string:var(--ui-success);--nut-fp-token-number:var(--ui-info);--nut-fp-token-literal:var(--ui-error)}:where(.dark){--nut-fp-veil:rgba(0,0,0,.62);--nut-fp-stage:var(--ui-bg);--nut-fp-checker-a:#e9e4dd;--nut-fp-checker-b:#d8d1c7}:where(:root){--nut-display-radius:calc(var(--ui-radius)*2);--nut-display-track:var(--ui-bg-accented);--nut-display-code-bg:var(--ui-color-neutral-900);--nut-display-code-ink:var(--ui-color-neutral-100);--nut-display-code-muted:var(--ui-color-neutral-400);--nut-display-code-line:var(--ui-color-neutral-800);--nut-display-code-key:var(--ui-color-primary-300);--nut-display-code-string:var(--ui-color-success-300);--nut-display-code-number:var(--ui-color-info-300);--nut-display-code-literal:var(--ui-color-error-300);--nut-display-primary:var(--ui-primary);--nut-display-primary-ink:var(--ui-primary);--nut-display-primary-soft:color-mix(in oklab,var(--ui-primary) 10%,var(--ui-bg));--nut-display-primary-line:color-mix(in oklab,var(--ui-primary) 40%,var(--ui-bg));--nut-display-primary-contrast:var(--ui-text-inverted);--nut-display-secondary:var(--ui-secondary);--nut-display-secondary-ink:var(--ui-secondary);--nut-display-secondary-soft:color-mix(in oklab,var(--ui-secondary) 10%,var(--ui-bg));--nut-display-secondary-line:color-mix(in oklab,var(--ui-secondary) 40%,var(--ui-bg));--nut-display-secondary-contrast:var(--ui-text-inverted);--nut-display-success:var(--ui-success);--nut-display-success-ink:var(--ui-success);--nut-display-success-soft:color-mix(in oklab,var(--ui-success) 10%,var(--ui-bg));--nut-display-success-line:color-mix(in oklab,var(--ui-success) 40%,var(--ui-bg));--nut-display-success-contrast:var(--ui-text-inverted);--nut-display-info:var(--ui-info);--nut-display-info-ink:var(--ui-info);--nut-display-info-soft:color-mix(in oklab,var(--ui-info) 10%,var(--ui-bg));--nut-display-info-line:color-mix(in oklab,var(--ui-info) 40%,var(--ui-bg));--nut-display-info-contrast:var(--ui-text-inverted);--nut-display-warning:var(--ui-warning);--nut-display-warning-ink:var(--ui-warning);--nut-display-warning-soft:color-mix(in oklab,var(--ui-warning) 10%,var(--ui-bg));--nut-display-warning-line:color-mix(in oklab,var(--ui-warning) 40%,var(--ui-bg));--nut-display-warning-contrast:var(--ui-text-inverted);--nut-display-error:var(--ui-error);--nut-display-error-ink:var(--ui-error);--nut-display-error-soft:color-mix(in oklab,var(--ui-error) 10%,var(--ui-bg));--nut-display-error-line:color-mix(in oklab,var(--ui-error) 40%,var(--ui-bg));--nut-display-error-contrast:var(--ui-text-inverted);--nut-display-neutral:var(--ui-bg-inverted);--nut-display-neutral-ink:var(--ui-text-toned);--nut-display-neutral-soft:var(--ui-bg-elevated);--nut-display-neutral-line:var(--ui-border-accented);--nut-display-neutral-contrast:var(--ui-text-inverted)}:where(.dark){--nut-display-code-bg:var(--ui-color-neutral-950);--nut-display-code-line:var(--ui-color-neutral-800)}:where(.nut-display-tone-primary){--nut-tone:var(--nut-display-primary);--nut-tone-ink:var(--nut-display-primary-ink);--nut-tone-soft:var(--nut-display-primary-soft);--nut-tone-line:var(--nut-display-primary-line);--nut-tone-contrast:var(--nut-display-primary-contrast)}:where(.nut-display-tone-secondary){--nut-tone:var(--nut-display-secondary);--nut-tone-ink:var(--nut-display-secondary-ink);--nut-tone-soft:var(--nut-display-secondary-soft);--nut-tone-line:var(--nut-display-secondary-line);--nut-tone-contrast:var(--nut-display-secondary-contrast)}:where(.nut-display-tone-success){--nut-tone:var(--nut-display-success);--nut-tone-ink:var(--nut-display-success-ink);--nut-tone-soft:var(--nut-display-success-soft);--nut-tone-line:var(--nut-display-success-line);--nut-tone-contrast:var(--nut-display-success-contrast)}:where(.nut-display-tone-info){--nut-tone:var(--nut-display-info);--nut-tone-ink:var(--nut-display-info-ink);--nut-tone-soft:var(--nut-display-info-soft);--nut-tone-line:var(--nut-display-info-line);--nut-tone-contrast:var(--nut-display-info-contrast)}:where(.nut-display-tone-warning){--nut-tone:var(--nut-display-warning);--nut-tone-ink:var(--nut-display-warning-ink);--nut-tone-soft:var(--nut-display-warning-soft);--nut-tone-line:var(--nut-display-warning-line);--nut-tone-contrast:var(--nut-display-warning-contrast)}:where(.nut-display-tone-error){--nut-tone:var(--nut-display-error);--nut-tone-ink:var(--nut-display-error-ink);--nut-tone-soft:var(--nut-display-error-soft);--nut-tone-line:var(--nut-display-error-line);--nut-tone-contrast:var(--nut-display-error-contrast)}:where(.nut-display-tone-neutral){--nut-tone:var(--nut-display-neutral);--nut-tone-ink:var(--nut-display-neutral-ink);--nut-tone-soft:var(--nut-display-neutral-soft);--nut-tone-line:var(--nut-display-neutral-line);--nut-tone-contrast:var(--nut-display-neutral-contrast)}}@layer components{.nut-dash-chart{--vis-font-family:inherit;--vis-axis-tick-label-color:var(--nut-dash-axis);--vis-axis-tick-label-font-size:10px;--vis-axis-grid-color:var(--nut-dash-grid);--vis-axis-domain-color:var(--nut-dash-grid);--vis-crosshair-line-stroke-color:var(--ui-border-accented);--vis-crosshair-circle-stroke-color:var(--ui-bg);--vis-tooltip-background-color:var(--ui-bg);--vis-tooltip-border-color:var(--ui-border);--vis-tooltip-text-color:var(--ui-text);--vis-tooltip-padding:8px 10px;--vis-tooltip-border-radius:calc(var(--ui-radius)*1.5);--vis-tooltip-shadow-color:rgb(0 0 0/8%);--vis-plotline-label-font-size:10px}.nut-dash-chart--bars [data-vis-component] rect:hover{opacity:.8}.nut-dash-tip{display:flex;flex-direction:column;font-size:12px;gap:4px;min-width:9rem}.nut-dash-tip-title{color:var(--ui-text-muted);font-weight:500}.nut-dash-tip-row{align-items:center;display:flex;gap:6px}.nut-dash-tip-row i{border-radius:2px;height:8px;width:8px}.nut-dash-tip-row span{color:var(--ui-text-muted);flex:1}.nut-dash-tip-row b{font-variant-numeric:tabular-nums;font-weight:600}.nut-dash-ghost{background:var(--nut-dash-ghost)}.nut-dash-shimmer{overflow:hidden;position:relative}.nut-dash-shimmer:after{animation:nut-dash-shimmer 1.6s ease-in-out infinite;background:linear-gradient(100deg,transparent 25%,var(--nut-dash-ghost-shine) 50%,transparent 75%);content:"";inset:0;pointer-events:none;position:absolute;transform:translateX(-100%);will-change:transform}@keyframes nut-dash-shimmer{to{transform:translateX(100%)}}.nut-dash-enter{animation:nut-dash-enter .28s ease-out}@keyframes nut-dash-enter{0%{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}.nut-dash-progress{animation:nut-dash-progress 1.1s ease-in-out infinite}@keyframes nut-dash-progress{0%{transform:translateX(-100%)}to{transform:translateX(300%)}}@media (prefers-reduced-motion:reduce){.nut-dash-shimmer:after{display:none}.nut-dash-enter{animation:none}.nut-dash-progress{animation-duration:3s}}.nut-fp-checker{background-color:var(--nut-fp-checker-a);background-image:conic-gradient(var(--nut-fp-checker-b) 25%,transparent 0 50%,var(--nut-fp-checker-b) 0 75%,transparent 0);background-size:18px 18px}.nut-fp-code [data-token=key]{color:var(--nut-fp-token-key)}.nut-fp-code [data-token=string]{color:var(--nut-fp-token-string)}.nut-fp-code [data-token=number]{color:var(--nut-fp-token-number)}.nut-fp-code [data-token=literal]{color:var(--nut-fp-token-literal)}[data-file-preview-bottom][data-single]:has([data-file-preview-tools]:empty){display:none}@keyframes nut-fp-progress{0%{transform:translateX(-100%)}to{transform:translateX(300%)}}.nut-fp-progress{animation:nut-fp-progress 1s ease-in-out infinite}@keyframes nut-fp-equalizer{to{transform:scaleY(.45)}}.nut-fp-equalizer{animation:nut-fp-equalizer .9s ease-in-out infinite alternate}@media (prefers-reduced-motion:reduce){.nut-fp-progress{animation-duration:2.4s}.nut-fp-equalizer{animation:none}}.nut-fp-prose{color:var(--ui-text);font-size:.925rem;line-height:1.7}.nut-fp-prose>:first-child{margin-top:0}.nut-fp-prose :where(h1,h2,h3,h4){color:var(--ui-text-highlighted);font-weight:650;letter-spacing:-.01em;line-height:1.25;margin:1.75em 0 .6em}.nut-fp-prose h1{font-size:1.6em}.nut-fp-prose h2{font-size:1.25em}.nut-fp-prose h3{font-size:1.05em}.nut-fp-prose :where(p,ul,ol,pre,table,blockquote){margin:0 0 1em}.nut-fp-prose :where(ul,ol){padding-inline-start:1.4em}.nut-fp-prose ul{list-style:disc}.nut-fp-prose ol{list-style:decimal}.nut-fp-prose a{color:var(--ui-primary);text-decoration:underline;text-underline-offset:2px}.nut-fp-prose :not(pre)>code{background:var(--ui-bg-elevated);border:1px solid var(--ui-border-muted);border-radius:4px;font-size:.86em;padding:.1em .35em}.nut-fp-prose pre{background:var(--ui-bg-elevated);border:1px solid var(--ui-border);border-radius:8px;font-size:.85em;overflow-x:auto;padding:.9em 1.1em}.nut-fp-prose table{border-collapse:collapse;display:block;font-size:.9em;overflow-x:auto}.nut-fp-prose :where(th,td){border:1px solid var(--ui-border);padding:.4em .75em;text-align:start}.nut-fp-prose th{background:var(--ui-bg-elevated);font-weight:600}.nut-fp-prose blockquote{border-inline-start:3px solid var(--ui-primary);color:var(--ui-text-toned);padding-inline-start:1em}.nut-fp-prose img{border-radius:6px;max-width:100%}}

package/dist/runtime/shared/utils/file.d.ts

@@ -1,4 +1,4 @@
-export declare function fileIconName(type: string | null | undefined): "i-lucide-file-text" | "i-lucide-file-image" | "i-lucide-file-video" | "i-lucide-file-audio" | "i-lucide-file-spreadsheet" | "i-lucide-file-type" | "i-lucide-file-archive" | "i-lucide-file";
+export declare function fileIconName(type: string | null | undefined): "i-lucide-file" | "i-lucide-file-text" | "i-lucide-file-image" | "i-lucide-file-video" | "i-lucide-file-audio" | "i-lucide-file-spreadsheet" | "i-lucide-file-type" | "i-lucide-file-archive";
 /** Lowercase extension of a file name without the dot, or `null` when it has none. */
 export declare function fileExtension(name: string): string | null;
 export declare function fileExtensionLabel(file: {

package/dist/runtime/table/utils/data-list-ui.d.ts

@@ -122,6 +122,6 @@ export declare function resolveDataListTableDensity(density: DataListDensity): {
 export declare function resolveDataListContentShellClass(options: {
     layout: 'table' | 'grid';
     surface: DataListContentSurface;
-}): "grid gap-5" | "overflow-hidden" | "grid gap-5 overflow-hidden rounded-md border border-default bg-default" | "overflow-hidden rounded-md border border-default bg-default";
+}): "overflow-hidden" | "grid gap-5" | "grid gap-5 overflow-hidden rounded-md border border-default bg-default" | "overflow-hidden rounded-md border border-default bg-default";
 /** Merges application and root DataList defaults without losing nested UI slots. */
 export declare function mergeDataListUiConfig(appUi: DataListUiConfig | undefined, componentUi: DataListUiConfig | undefined, density?: DataListDensity, size?: DataListControlSize): DataListUiConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-ui-tools",
-  "version": "1.24.0",
+  "version": "1.25.1",
   "description": "Nuxt module and runtime toolkit for UI-heavy Nuxt applications",
   "homepage": "https://github.com/ChronicStone/nuxt-ui-tools#readme",
   "bugs": "https://github.com/ChronicStone/nuxt-ui-tools/issues",
@@ -23,6 +23,9 @@
       "dashboard": [
         "./dist/runtime/dashboard/index.d.ts"
       ],
+      "display": [
+        "./dist/runtime/display/index.d.ts"
+      ],
       "file-preview": [
         "./dist/runtime/file-preview/index.d.ts"
       ],
@@ -58,6 +61,14 @@
       "types": "./dist/runtime/dashboard/*.d.ts",
       "default": "./dist/runtime/dashboard/*.js"
     },
+    "#ui-tools/display": {
+      "types": "./dist/runtime/display/index.d.ts",
+      "default": "./dist/runtime/display/index.js"
+    },
+    "#ui-tools/display/*": {
+      "types": "./dist/runtime/display/*.d.ts",
+      "default": "./dist/runtime/display/*.js"
+    },
     "#ui-tools/file-preview": {
       "types": "./dist/runtime/file-preview/index.d.ts",
       "default": "./dist/runtime/file-preview/index.js"
@@ -132,6 +143,10 @@
       "types": "./dist/runtime/dashboard/index.d.ts",
       "import": "./dist/runtime/dashboard/index.js"
     },
+    "./display": {
+      "types": "./dist/runtime/display/index.d.ts",
+      "import": "./dist/runtime/display/index.js"
+    },
     "./file-preview": {
       "types": "./dist/runtime/file-preview/index.d.ts",
       "import": "./dist/runtime/file-preview/index.js"