nuxt-ui-tools 1.23.0 → 1.25.0

package/dist/runtime/display/components/parts/display-empty-line.vue.d.ts

@@ -0,0 +1,7 @@
+import type { DisplayContent } from '../../types/index.js';
+type __VLS_Props = {
+    content?: DisplayContent;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/display/components/parts/display-fact-value.d.vue.ts

@@ -0,0 +1,7 @@
+import type { DisplayFact } from '../../types/index.js';
+type __VLS_Props = {
+    fact: DisplayFact;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/display/components/parts/display-fact-value.vue

@@ -0,0 +1,35 @@
+<script setup>
+import ULink from "@nuxt/ui/components/Link.vue";
+import { computed } from "vue";
+import { isString } from "../../../shared/utils/predicate";
+import { displayContentText, isDisplayContentEmpty } from "../../utils/content";
+import DisplayChip from "./display-chip.vue";
+import DisplayCopy from "./display-copy.vue";
+import DisplayRender from "./display-render";
+const { fact } = defineProps({
+  fact: { type: Object, required: true }
+});
+const copyValue = computed(
+  () => isString(fact.copy) ? fact.copy : fact.copy ? displayContentText(fact.value) : void 0
+);
+</script>
+
+<template>
+  <span
+    v-if="fact.loading"
+    class="nut-dash-shimmer nut-dash-ghost inline-block h-3.5 w-20 max-w-full rounded"
+    aria-busy="true"
+    data-display-fact-loading
+  />
+  <DisplayChip v-else-if="fact.chip" :chip="fact.chip" />
+  <span v-else-if="isDisplayContentEmpty(fact.value)" class="font-medium text-dimmed">—</span>
+  <ULink
+    v-else-if="fact.to"
+    :to="fact.to"
+    class="underline decoration-[var(--ui-border-accented)] underline-offset-2 hover:decoration-current"
+  >
+    <DisplayRender :content="fact.value" />
+  </ULink>
+  <DisplayRender v-else :content="fact.value" />
+  <DisplayCopy v-if="copyValue && !fact.loading" :value="copyValue" class="-my-1" />
+</template>

package/dist/runtime/display/components/parts/display-fact-value.vue.d.ts

@@ -0,0 +1,7 @@
+import type { DisplayFact } from '../../types/index.js';
+type __VLS_Props = {
+    fact: DisplayFact;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/display/components/parts/display-load-error.d.vue.ts

@@ -0,0 +1,7 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    retry: () => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onRetry?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/display/components/parts/display-load-error.vue

@@ -0,0 +1,29 @@
+<script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { useDisplayIcons } from "../../composables/use-display-icons";
+import { useDisplayLocale } from "../../composables/use-display-locale";
+const emit = defineEmits(["retry"]);
+const { t } = useDisplayLocale();
+const icons = useDisplayIcons();
+</script>
+
+<template>
+  <div
+    class="nut-display-tone-error flex flex-wrap items-center gap-x-2 gap-y-1 text-sm text-[var(--nut-tone-ink)]"
+    role="alert"
+    data-display-error
+  >
+    <UIcon :name="icons.warning" class="size-4 shrink-0" />
+    <span>{{ t("display.loadError") }}</span>
+    <UButton
+      :label="t('display.retry')"
+      color="error"
+      variant="link"
+      size="sm"
+      class="p-0"
+      data-display-retry
+      @click="emit('retry')"
+    />
+  </div>
+</template>

package/dist/runtime/display/components/parts/display-load-error.vue.d.ts

@@ -0,0 +1,7 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    retry: () => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onRetry?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/display/components/parts/display-more.d.vue.ts

@@ -0,0 +1,10 @@
+type __VLS_Props = {
+    count: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    reveal: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onReveal?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/display/components/parts/display-more.vue

@@ -0,0 +1,23 @@
+<script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+import { useDisplayIcons } from "../../composables/use-display-icons";
+import { useDisplayLocale } from "../../composables/use-display-locale";
+const { count } = defineProps({
+  count: { type: Number, required: true }
+});
+const emit = defineEmits(["reveal"]);
+const { t } = useDisplayLocale();
+const icons = useDisplayIcons();
+</script>
+
+<template>
+  <UButton
+    :label="t('display.showMore', { count })"
+    :trailing-icon="icons.chevronDown"
+    color="neutral"
+    variant="ghost"
+    size="sm"
+    data-display-more
+    @click="emit('reveal')"
+  />
+</template>

package/dist/runtime/display/components/parts/display-more.vue.d.ts

@@ -0,0 +1,10 @@
+type __VLS_Props = {
+    count: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    reveal: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onReveal?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/display/components/parts/display-record-media.d.vue.ts

@@ -0,0 +1,9 @@
+import type { DisplayRecordItem } from '../../types/index.js';
+type __VLS_Props = {
+    item: DisplayRecordItem;
+    size?: 'sm' | 'md' | 'lg';
+    banner?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/display/components/parts/display-record-media.vue

@@ -0,0 +1,59 @@
+<script setup>
+import UAvatar from "@nuxt/ui/components/Avatar.vue";
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { ref, watch } from "vue";
+import { displayToneClass } from "../../utils/tone";
+const {
+  item,
+  size = "md",
+  banner = false
+} = defineProps({
+  item: { type: Object, required: true },
+  size: { type: String, required: false },
+  banner: { type: Boolean, required: false }
+});
+const BOX = { lg: "size-13", md: "size-10", sm: "size-8" };
+const ICON = { lg: "size-6", md: "size-5", sm: "size-4" };
+const AVATAR = { lg: "xl", md: "lg", sm: "md" };
+const failed = ref(false);
+watch(
+  () => item.image?.src,
+  () => {
+    failed.value = false;
+  }
+);
+</script>
+
+<template>
+  <img
+    v-if="item.image?.src && !failed"
+    :src="item.image.src"
+    :alt="item.image.alt ?? ''"
+    :class="[
+  'shrink-0 bg-elevated object-cover',
+  banner ? 'h-28 w-full' : `${BOX[size]} rounded-[var(--nut-display-radius)]`
+]"
+    loading="lazy"
+    @error="failed = true"
+  />
+  <UAvatar
+    v-else-if="item.avatar && !banner"
+    v-bind="item.avatar"
+    :size="item.avatar.size ?? AVATAR[size]"
+    class="shrink-0"
+  />
+  <span
+    v-else-if="item.icon || item.image || banner"
+    :class="[
+  'grid shrink-0 place-items-center bg-[var(--nut-tone-soft)] text-[var(--nut-tone-ink)]',
+  displayToneClass(item.tone ?? 'primary'),
+  banner ? 'h-28 w-full' : `${BOX[size]} rounded-[var(--nut-display-radius)]`
+]"
+    aria-hidden="true"
+  >
+    <UIcon
+      :name="item.icon ?? 'i-lucide-image'"
+      :class="banner ? 'size-8 opacity-70' : ICON[size]"
+    />
+  </span>
+</template>

package/dist/runtime/display/components/parts/display-record-media.vue.d.ts

@@ -0,0 +1,9 @@
+import type { DisplayRecordItem } from '../../types/index.js';
+type __VLS_Props = {
+    item: DisplayRecordItem;
+    size?: 'sm' | 'md' | 'lg';
+    banner?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/display/components/parts/display-render.d.ts

@@ -0,0 +1,10 @@
+import type { FunctionalComponent } from 'vue';
+import type { DisplayContent } from '../../types/index.js';
+/**
+ * Renders text, a lazy translation, a VNode, or a render function. A function runs while this
+ * component renders, so its reactive reads belong to this component only.
+ */
+declare const DisplayRender: FunctionalComponent<{
+    content?: DisplayContent;
+}>;
+export default DisplayRender;

package/dist/runtime/display/components/parts/display-render.js

@@ -0,0 +1,5 @@
+import { renderVNode } from "../../../shared/utils/render.js";
+const DisplayRender = (props) => renderVNode(props.content);
+DisplayRender.props = ["content"];
+DisplayRender.displayName = "DisplayRender";
+export default DisplayRender;

package/dist/runtime/display/components/parts/display-skeleton.d.vue.ts

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    layout?: 'lines' | 'rows' | 'tiles' | 'card' | 'media' | 'ring' | 'block';
+    count?: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/display/components/parts/display-skeleton.vue

@@ -0,0 +1,67 @@
+<script setup>
+const { layout = "lines", count = 3 } = defineProps({
+  layout: { type: String, required: false },
+  count: { type: Number, required: false }
+});
+</script>
+
+<template>
+  <div class="nut-dash-shimmer" aria-busy="true" data-display-skeleton>
+    <div v-if="layout === 'rows'" class="flex flex-col">
+      <div
+        v-for="index in count"
+        :key="index"
+        class="flex items-center justify-between gap-6 border-t border-muted py-3 first:border-t-0"
+      >
+        <span
+          class="nut-dash-ghost h-3 rounded"
+          :style="{ width: `${28 + index * 13 % 18}%` }"
+        />
+        <span
+          class="nut-dash-ghost h-3 rounded"
+          :style="{ width: `${16 + index * 7 % 12}%` }"
+        />
+      </div>
+    </div>
+    <div
+      v-else-if="layout === 'tiles'"
+      class="grid grid-cols-[repeat(auto-fill,minmax(8rem,1fr))] gap-2"
+    >
+      <div
+        v-for="index in count"
+        :key="index"
+        class="nut-dash-ghost h-16 rounded-[var(--nut-display-radius)]"
+      />
+    </div>
+    <div v-else-if="layout === 'card'" class="flex items-center gap-3">
+      <span class="nut-dash-ghost size-12 shrink-0 rounded-[var(--nut-display-radius)]" />
+      <div class="flex flex-1 flex-col gap-2">
+        <span class="nut-dash-ghost h-3 w-2/5 rounded" />
+        <span class="nut-dash-ghost h-3 w-3/5 rounded" />
+      </div>
+    </div>
+    <div
+      v-else-if="layout === 'media'"
+      class="nut-dash-ghost aspect-video rounded-[var(--nut-display-radius)]"
+    />
+    <div v-else-if="layout === 'ring'" class="flex items-center gap-4">
+      <span class="nut-dash-ghost size-20 shrink-0 rounded-full" />
+      <div class="flex flex-1 flex-col gap-2">
+        <span class="nut-dash-ghost h-3 w-3/5 rounded" />
+        <span class="nut-dash-ghost h-3 w-2/5 rounded" />
+      </div>
+    </div>
+    <div
+      v-else-if="layout === 'block'"
+      class="nut-dash-ghost h-24 rounded-[var(--nut-display-radius)]"
+    />
+    <div v-else class="flex flex-col gap-2">
+      <span
+        v-for="index in count"
+        :key="index"
+        class="nut-dash-ghost h-3 rounded"
+        :style="{ width: index === count && count > 1 ? '55%' : `${92 - index * 9 % 20}%` }"
+      />
+    </div>
+  </div>
+</template>

package/dist/runtime/display/components/parts/display-skeleton.vue.d.ts

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    layout?: 'lines' | 'rows' | 'tiles' | 'card' | 'media' | 'ring' | 'block';
+    count?: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/display/composables/use-display-config.d.ts

@@ -0,0 +1,6 @@
+import type { ComputedRef } from 'vue';
+import type { DisplayKind, DisplayUiConfig, DisplayUiMap } from '../types/index.js';
+/** `appConfig.nuxtUiTools.display`: presets and slot classes. */
+export declare function useDisplayConfig(): ComputedRef<DisplayUiConfig>;
+/** The app slot classes of one kind. */
+export declare function useDisplayAppUi<TKind extends DisplayKind>(kind: TKind): ComputedRef<DisplayUiMap[TKind] | undefined>;

package/dist/runtime/display/composables/use-display-config.js

@@ -0,0 +1,11 @@
+import { useAppConfig } from "nuxt/app";
+import { computed } from "vue";
+import { resolveAppDisplayConfig } from "../utils/config.js";
+export function useDisplayConfig() {
+  const appConfig = useAppConfig();
+  return computed(() => resolveAppDisplayConfig(appConfig));
+}
+export function useDisplayAppUi(kind) {
+  const config = useDisplayConfig();
+  return computed(() => config.value.ui?.[kind]);
+}

package/dist/runtime/display/composables/use-display-file-preview.d.ts

@@ -0,0 +1,9 @@
+import type { FilePreviewFile } from '../../file-preview/types/index.js';
+/**
+ * Opens files in the app's file preview when one is provided; returns `false` otherwise so the
+ * caller can fall back to a plain link.
+ */
+export declare function useDisplayFilePreview(): {
+    available: boolean;
+    open: (files: readonly FilePreviewFile[], index?: number) => boolean;
+};

package/dist/runtime/display/composables/use-display-file-preview.js

@@ -0,0 +1,11 @@
+import { getCurrentInstance, inject } from "vue";
+import { filePreviewApiKey } from "../../file-preview/composables/use-file-preview-api.js";
+export function useDisplayFilePreview() {
+  const api = getCurrentInstance() ? inject(filePreviewApiKey, null) : null;
+  function open(files, index = 0) {
+    if (!api || !files.length) return false;
+    api.open(files, { index });
+    return true;
+  }
+  return { available: Boolean(api), open };
+}

package/dist/runtime/display/composables/use-display-icons.d.ts

@@ -0,0 +1,8 @@
+import type { DisplayTone } from '../types/index.js';
+declare const ICON_NAMES: readonly ["arrowDown", "arrowRight", "arrowUp", "check", "chevronDown", "chevronRight", "copy", "copyCheck", "empty", "error", "external", "eye", "eyeOff", "file", "info", "minus", "success", "warning"];
+type DisplayIconName = (typeof ICON_NAMES)[number];
+/** Icons of the blocks: `appConfig.ui.icons` when the app sets them, Lucide otherwise. */
+export declare function useDisplayIcons(): import("vue").ComputedRef<Record<"empty" | "error" | "external" | "success" | "warning" | "info" | "check" | "copy" | "file" | "arrowDown" | "arrowRight" | "arrowUp" | "chevronDown" | "chevronRight" | "copyCheck" | "eye" | "eyeOff" | "minus", string>>;
+/** Icon of a tone in alerts and statuses. */
+export declare function toneIcon(icons: Record<DisplayIconName, string>, tone: DisplayTone): string;
+export {};

package/dist/runtime/display/composables/use-display-icons.js

@@ -0,0 +1,62 @@
+import { useAppConfig } from "nuxt/app";
+import { computed } from "vue";
+import { isPlainObject, isString } from "../../shared/utils/predicate.js";
+const ICON_NAMES = [
+  "arrowDown",
+  "arrowRight",
+  "arrowUp",
+  "check",
+  "chevronDown",
+  "chevronRight",
+  "copy",
+  "copyCheck",
+  "empty",
+  "error",
+  "external",
+  "eye",
+  "eyeOff",
+  "file",
+  "info",
+  "minus",
+  "success",
+  "warning"
+];
+const DEFAULT_ICONS = {
+  arrowDown: "i-lucide-arrow-down",
+  arrowRight: "i-lucide-arrow-right",
+  arrowUp: "i-lucide-arrow-up",
+  check: "i-lucide-check",
+  chevronDown: "i-lucide-chevron-down",
+  chevronRight: "i-lucide-chevron-right",
+  copy: "i-lucide-copy",
+  copyCheck: "i-lucide-copy-check",
+  empty: "i-lucide-inbox",
+  error: "i-lucide-circle-x",
+  external: "i-lucide-arrow-up-right",
+  eye: "i-lucide-eye",
+  eyeOff: "i-lucide-eye-off",
+  file: "i-lucide-file",
+  info: "i-lucide-info",
+  minus: "i-lucide-minus",
+  success: "i-lucide-circle-check",
+  warning: "i-lucide-triangle-alert"
+};
+export function useDisplayIcons() {
+  const appConfig = useAppConfig();
+  return computed(() => {
+    const ui = Object.getOwnPropertyDescriptor(appConfig, "ui")?.value;
+    const icons = isPlainObject(ui) && isPlainObject(ui.icons) ? ui.icons : void 0;
+    const resolved = { ...DEFAULT_ICONS };
+    for (const key of ICON_NAMES) {
+      const icon = icons?.[key];
+      if (isString(icon)) resolved[key] = icon;
+    }
+    return resolved;
+  });
+}
+export function toneIcon(icons, tone) {
+  if (tone === "success") return icons.success;
+  if (tone === "warning") return icons.warning;
+  if (tone === "error") return icons.error;
+  return icons.info;
+}

package/dist/runtime/display/composables/use-display-locale.d.ts

@@ -0,0 +1,5 @@
+/** The ui-tools translator plus the locale code used by the `Intl` formatters. */
+export declare function useDisplayLocale(): {
+    code: import("vue").Ref<string, string>;
+    t: import("../../i18n/index.js").UiToolsTranslator;
+};

package/dist/runtime/display/composables/use-display-locale.js

@@ -0,0 +1,5 @@
+import { useUiToolsLocale } from "../../i18n/use-locale.js";
+export function useDisplayLocale() {
+  const locale = useUiToolsLocale();
+  return { code: locale.code, t: locale.t };
+}

package/dist/runtime/display/composables/use-display-number.d.ts

@@ -0,0 +1,2 @@
+/** Formats numbers with the locale's grouping and decimals. */
+export declare function useDisplayNumber(): (value: number) => string;

package/dist/runtime/display/composables/use-display-number.js

@@ -0,0 +1,7 @@
+import { computed } from "vue";
+import { useDisplayLocale } from "./use-display-locale.js";
+export function useDisplayNumber() {
+  const { code } = useDisplayLocale();
+  const formatter = computed(() => new Intl.NumberFormat(code.value, { maximumFractionDigits: 2 }));
+  return (value) => formatter.value.format(value);
+}

package/dist/runtime/display/composables/use-display-reveal.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Folds a list after `max` items. Each `reveal()` shows `step` more, or everything left when
+ * there is no step.
+ */
+export declare function useDisplayReveal<TItem>(params: {
+    items: () => readonly TItem[];
+    max: () => number | undefined;
+    step: () => number | undefined;
+}): {
+    hidden: import("vue").ComputedRef<number>;
+    next: import("vue").ComputedRef<number>;
+    reveal: () => void;
+    visible: import("vue").ComputedRef<TItem[]>;
+};

package/dist/runtime/display/composables/use-display-reveal.js

@@ -0,0 +1,15 @@
+import { computed, ref } from "vue";
+export function useDisplayReveal(params) {
+  const extra = ref(0);
+  const limit = computed(() => {
+    const max = params.max();
+    return max === void 0 ? Number.POSITIVE_INFINITY : max + extra.value;
+  });
+  const visible = computed(() => params.items().slice(0, limit.value));
+  const hidden = computed(() => Math.max(0, params.items().length - visible.value.length));
+  const next = computed(() => Math.min(hidden.value, params.step() ?? hidden.value));
+  function reveal() {
+    extra.value += next.value;
+  }
+  return { hidden, next, reveal, visible };
+}

package/dist/runtime/display/composables/use-display-url.d.ts

@@ -0,0 +1,26 @@
+import type { DisplayUrl } from '../types/index.js';
+/**
+ * Runs link actions (open, download) one at a time per key: `pending` names the running one for
+ * its button's loading state, and `failed` keeps the last failure with a way to try it again.
+ */
+export declare function useDisplayUrlActions(): {
+    failed: import("vue").ShallowRef<{
+        key: string;
+        retry: () => void;
+    } | null, {
+        key: string;
+        retry: () => void;
+    } | null>;
+    pending: import("vue").Ref<string | null, string | null>;
+    run: (key: string, action: () => Promise<void>) => Promise<void>;
+};
+/**
+ * The address of a media file to show right away: a string as is, a function resolved when the
+ * block mounts and again when it changes. An older call never overwrites a newer one.
+ */
+export declare function useResolvedDisplayUrl(source: () => DisplayUrl | undefined): {
+    failed: import("vue").Ref<boolean, boolean>;
+    pending: import("vue").Ref<boolean, boolean>;
+    retry: () => undefined;
+    url: import("vue").Ref<string | undefined, string | undefined>;
+};

package/dist/runtime/display/composables/use-display-url.js

@@ -0,0 +1,46 @@
+import { ref, shallowRef, watch } from "vue";
+import { isString } from "../../shared/utils/predicate.js";
+export function useDisplayUrlActions() {
+  const pending = ref(null);
+  const failed = shallowRef(null);
+  async function run(key, action) {
+    if (pending.value === key) return;
+    pending.value = key;
+    failed.value = null;
+    try {
+      await action();
+    } catch {
+      failed.value = { key, retry: () => void run(key, action) };
+    } finally {
+      if (pending.value === key) pending.value = null;
+    }
+  }
+  return { failed, pending, run };
+}
+export function useResolvedDisplayUrl(source) {
+  const url = ref(void 0);
+  const pending = ref(false);
+  const failed = ref(false);
+  let run = 0;
+  async function resolve(current) {
+    run += 1;
+    const own = run;
+    failed.value = false;
+    if (current === void 0 || isString(current)) {
+      url.value = current;
+      pending.value = false;
+      return;
+    }
+    pending.value = true;
+    try {
+      const resolved = await current();
+      if (own === run) url.value = resolved;
+    } catch {
+      if (own === run) failed.value = true;
+    } finally {
+      if (own === run) pending.value = false;
+    }
+  }
+  watch(source, (current) => void resolve(current), { immediate: true });
+  return { failed, pending, retry: () => void resolve(source()), url };
+}

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

@@ -0,0 +1,4 @@
+export { useDisplayConfig } from './composables/use-display-config.js';
+export { applyDisplayPreset } from './utils/config.js';
+export { DISPLAY_KINDS } from './utils/registry.js';
+export type * from './types';

package/dist/runtime/display/index.js

@@ -0,0 +1,3 @@
+export { useDisplayConfig } from "./composables/use-display-config.js";
+export { applyDisplayPreset } from "./utils/config.js";
+export { DISPLAY_KINDS } from "./utils/registry.js";

package/dist/runtime/display/plugins/display-tones.d.ts

@@ -0,0 +1,3 @@
+/** Injects the colors of the tones registered in `appConfig.nuxtUiTools.display.tones`. */
+declare const _default: import("#app/nuxt").Plugin<Record<string, unknown>> & import("#app/nuxt").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/runtime/display/plugins/display-tones.js

@@ -0,0 +1,17 @@
+import { defineNuxtPlugin, useAppConfig, useHead } from "#app";
+import { resolveAppDisplayConfig } from "../utils/config.js";
+import { buildDisplayToneCss } from "../utils/tone-css.js";
+export default defineNuxtPlugin({
+  name: "nuxt-ui-tools:display-tones",
+  setup() {
+    const appConfig = useAppConfig();
+    useHead({
+      style: [
+        {
+          key: "nut-display-tones",
+          textContent: () => buildDisplayToneCss(resolveAppDisplayConfig(appConfig).tones)
+        }
+      ]
+    });
+  }
+});