nuxt-ui-tools 1.24.0 → 1.25.1

package/dist/runtime/display/components/blocks/display-text.vue

@@ -0,0 +1,141 @@
+<script setup>
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { useResizeObserver } from "@vueuse/core";
+import { computed, ref, useTemplateRef } from "vue";
+import { useDisplayAppUi } from "../../composables/use-display-config";
+import { useDisplayLocale } from "../../composables/use-display-locale";
+import { vRevealTruncated } from "../../directives/reveal-truncated";
+import { resolveDisplayClasses } from "../../utils/classes";
+import { isDisplayContentEmpty } from "../../utils/content";
+import { displayToneClass } from "../../utils/tone";
+import DisplayRender from "../parts/display-render";
+import DisplaySkeleton from "../parts/display-skeleton.vue";
+const {
+  appearance = "body",
+  text = void 0,
+  paragraphs = void 0,
+  title = void 0,
+  icon = void 0,
+  author = void 0,
+  meta = void 0,
+  tone = void 0,
+  maxLines = void 0,
+  loading = false,
+  ui = void 0
+} = defineProps({
+  appearance: { type: String, required: false },
+  text: { type: [String, Number, Function, Object, Boolean, null, Array], required: false, skipCheck: true },
+  paragraphs: { type: Array, required: false },
+  title: { type: [String, Number, Function, Object, Boolean, null, Array], required: false, skipCheck: true },
+  icon: { type: String, required: false },
+  author: { type: [String, Number, Function, Object, Boolean, null, Array], required: false, skipCheck: true },
+  meta: { type: [String, Number, Function, Object, Boolean, null, Array], required: false, skipCheck: true },
+  tone: { type: String, required: false },
+  maxLines: { type: Number, required: false },
+  loading: { type: Boolean, required: false },
+  ui: { type: Object, required: false }
+});
+const ROOT_CLASSES = {
+  body: "text-sm leading-relaxed text-default",
+  caption: "flex items-start gap-1.5 text-xs leading-snug text-dimmed",
+  lead: "text-base leading-snug text-highlighted",
+  legal: "rounded-e-[var(--nut-display-radius)] border border-s-[3px] border-muted border-s-[var(--nut-tone-line)] bg-elevated px-3.5 py-3",
+  muted: "text-sm leading-relaxed text-muted",
+  prose: "text-sm leading-relaxed text-default [&_a]:text-primary [&_a]:underline [&_a]:underline-offset-2 [&_b]:font-semibold [&_b]:text-highlighted [&_code]:rounded [&_code]:border [&_code]:border-muted [&_code]:bg-elevated [&_code]:px-1 [&_code]:text-[0.88em] [&_li]:my-0.5 [&_ol]:list-decimal [&_ol]:ps-5 [&_strong]:font-semibold [&_strong]:text-highlighted [&_ul]:list-disc [&_ul]:ps-5",
+  quote: "border-s-[3px] border-[var(--nut-tone)] ps-4"
+};
+const PARAGRAPH_CLASSES = {
+  body: "mt-2 first:mt-0",
+  caption: "",
+  lead: "mt-2 first:mt-0",
+  legal: "mt-1.5 text-xs leading-relaxed text-muted",
+  muted: "mt-2 first:mt-0",
+  prose: "mt-2 first:mt-0",
+  quote: "mt-2 text-[15px] leading-relaxed font-light text-highlighted first:mt-0"
+};
+const { t } = useDisplayLocale();
+const appUi = useDisplayAppUi("text");
+const body = useTemplateRef("body");
+const expanded = ref(false);
+const overflowing = ref(false);
+const resolvedTone = computed(() => tone ?? (appearance === "quote" ? "primary" : "neutral"));
+const blocks = computed(
+  () => [text, ...paragraphs ?? []].filter((content) => !isDisplayContentEmpty(content))
+);
+const clampStyle = computed(
+  () => maxLines && !expanded.value ? {
+    WebkitBoxOrient: "vertical",
+    WebkitLineClamp: maxLines,
+    display: "-webkit-box",
+    overflow: "hidden"
+  } : void 0
+);
+const classes = computed(
+  () => resolveDisplayClasses(
+    {
+      footer: "mt-2 text-xs text-muted",
+      header: "flex items-center gap-1.5 text-xs font-bold text-toned",
+      icon: appearance === "caption" ? "mt-px size-3.5 shrink-0" : "size-3.5 shrink-0",
+      paragraph: PARAGRAPH_CLASSES[appearance],
+      root: ROOT_CLASSES[appearance],
+      title: "min-w-0",
+      toggle: "mt-1 cursor-pointer text-xs font-semibold text-primary underline underline-offset-2"
+    },
+    appUi.value,
+    ui
+  )
+);
+useResizeObserver(body, () => {
+  const element = body.value;
+  if (element && !expanded.value)
+    overflowing.value = element.scrollHeight > element.clientHeight + 1;
+});
+</script>
+
+<template>
+  <DisplaySkeleton v-if="loading" :count="Math.max(blocks.length, 2)" />
+  <div
+    v-else
+    :class="[classes.root, displayToneClass(resolvedTone)]"
+    :data-appearance="appearance"
+    data-display="text"
+  >
+    <div
+      v-if="appearance === 'legal' && (!isDisplayContentEmpty(title) || icon)"
+      :class="classes.header"
+    >
+      <UIcon v-if="icon" :name="icon" :class="classes.icon" />
+      <span v-reveal-truncated :class="classes.title"><DisplayRender :content="title" /></span>
+    </div>
+    <UIcon v-if="appearance === 'caption' && icon" :name="icon" :class="classes.icon" />
+    <div ref="body" :style="clampStyle">
+      <div
+        v-for="(content, index) in blocks"
+        :key="index"
+        v-reveal-truncated
+        :class="classes.paragraph"
+      >
+        <DisplayRender :content="content" />
+      </div>
+    </div>
+    <button
+      v-if="maxLines && (overflowing || expanded)"
+      type="button"
+      :class="classes.toggle"
+      :aria-expanded="expanded"
+      @click="expanded = !expanded"
+    >
+      {{ expanded ? t("display.readLess") : t("display.readMore") }}
+    </button>
+    <div
+      v-if="
+  appearance === 'quote' && (!isDisplayContentEmpty(author) || !isDisplayContentEmpty(meta))
+"
+      :class="classes.footer"
+    >
+      <DisplayRender :content="author" />
+      <template v-if="!isDisplayContentEmpty(author) && !isDisplayContentEmpty(meta)"> · </template>
+      <DisplayRender :content="meta" />
+    </div>
+  </div>
+</template>

package/dist/runtime/display/components/blocks/display-text.vue.d.ts

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

package/dist/runtime/display/components/blocks/display-timeline.d.vue.ts

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

package/dist/runtime/display/components/blocks/display-timeline.vue

@@ -0,0 +1,238 @@
+<script setup>
+import UAvatar from "@nuxt/ui/components/Avatar.vue";
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { computed } from "vue";
+import { useDisplayAppUi } from "../../composables/use-display-config";
+import { useDisplayIcons } from "../../composables/use-display-icons";
+import { useDisplayLocale } from "../../composables/use-display-locale";
+import { useDisplayReveal } from "../../composables/use-display-reveal";
+import { vRevealTruncated } from "../../directives/reveal-truncated";
+import { resolveDisplayClasses } from "../../utils/classes";
+import { isDisplayContentEmpty, resolveDisplayText } from "../../utils/content";
+import { formatDisplayDate, toDisplayDate } from "../../utils/dates";
+import { displayToneClass, initialsOf, toneFromName } from "../../utils/tone";
+import DisplayEmptyLine from "../parts/display-empty-line.vue";
+import DisplayMore from "../parts/display-more.vue";
+import DisplayRender from "../parts/display-render";
+import DisplaySkeleton from "../parts/display-skeleton.vue";
+const {
+  variant = "vertical",
+  items,
+  current = void 0,
+  now = void 0,
+  nowLabel = void 0,
+  dateFormat = void 0,
+  max = void 0,
+  step = void 0,
+  empty = void 0,
+  loading = false,
+  ui = void 0
+} = defineProps({
+  variant: { type: String, required: false },
+  items: { type: Array, required: true },
+  current: { type: Number, required: false },
+  now: { type: [Date, String, Number], required: false },
+  nowLabel: { type: [String, Number, Function], required: false },
+  dateFormat: { type: null, required: false },
+  loading: { type: Boolean, required: false },
+  ui: { type: Object, required: false },
+  max: { type: Number, required: false },
+  step: { type: Number, required: false },
+  empty: { type: [String, Number, Function, Object, Boolean, null, Array], required: false, skipCheck: true }
+});
+const { t, code } = useDisplayLocale();
+const icons = useDisplayIcons();
+const appUi = useDisplayAppUi("timeline");
+const reference = computed(() => toDisplayDate(now) ?? /* @__PURE__ */ new Date());
+const entries = computed(
+  () => items.map((item, index) => {
+    const date = toDisplayDate(item.date);
+    return { ...item, resolvedState: stateOf(item, index, date), timeLabel: timeOf(item, date) };
+  })
+);
+const reveal = useDisplayReveal({ items: () => entries.value, max: () => max, step: () => step });
+const nowIndex = computed(
+  () => variant === "schedule" ? reveal.visible.value.findIndex((entry) => entry.resolvedState === "upcoming") : -1
+);
+const nowText = computed(
+  () => resolveDisplayText(nowLabel) ?? `${t("display.today")} \xB7 ${formatDisplayDate(reference.value, code.value, { day: "numeric", month: "short" })}`
+);
+const classes = computed(
+  () => resolveDisplayClasses(
+    {
+      actor: "flex items-center gap-1.5",
+      body: "min-w-0",
+      connector: "absolute start-[7.5px] top-4 -bottom-px w-px bg-[var(--ui-border)]",
+      description: "mt-0.5 flex flex-wrap items-center gap-1.5 text-xs text-muted",
+      empty: "",
+      item: variant === "pipeline" ? "relative flex min-w-0 flex-1 flex-col items-center gap-1.5 text-center" : variant === "log" ? "flex items-center gap-2.5 px-3 py-1.5 text-sm" : "relative grid grid-cols-[1rem_minmax(0,1fr)] gap-x-3 pb-3.5 last:pb-0",
+      marker: variant === "pipeline" ? "relative z-[1] grid size-6 place-items-center rounded-full border-2 text-[10px] font-bold" : "relative z-[1] mt-1 ms-[3px] size-2.5 rounded-full",
+      more: "self-start",
+      now: "mb-3.5 flex items-center gap-2 text-[11px] font-bold tracking-[0.06em] text-[var(--nut-display-primary-ink)] uppercase before:h-0.5 before:w-4 before:rounded-full before:bg-[var(--nut-display-primary)] after:h-px after:flex-1 after:bg-[var(--nut-display-primary-line)]",
+      root: variant === "log" ? "flex min-w-0 flex-col divide-y divide-muted rounded-[var(--nut-display-radius)] border border-default" : "flex min-w-0 flex-col gap-2",
+      time: variant === "log" ? "w-11 shrink-0 font-mono text-[11px] text-dimmed" : "shrink-0 text-xs font-normal text-dimmed",
+      title: variant === "pipeline" ? "text-xs font-semibold text-highlighted" : "flex items-baseline justify-between gap-2 text-sm font-semibold text-highlighted"
+    },
+    appUi.value,
+    ui
+  )
+);
+function stateOf(item, index, date) {
+  if (item.state) return item.state;
+  if (variant === "pipeline" && current !== void 0)
+    return index < current ? "done" : index === current ? "current" : "upcoming";
+  if (date) return date.getTime() > reference.value.getTime() ? "upcoming" : "done";
+  return "done";
+}
+function timeOf(item, date) {
+  const text = resolveDisplayText(item.time);
+  if (text !== void 0 || !date) return text;
+  const options = dateFormat ?? (variant === "log" ? { hour: "2-digit", minute: "2-digit" } : { day: "numeric", month: "short" });
+  return formatDisplayDate(date, code.value, options);
+}
+function dotClass(state) {
+  if (state === "upcoming")
+    return "border-[1.5px] border-dashed border-[var(--ui-border-accented)] bg-default";
+  if (state === "current") return "bg-[var(--nut-tone)] ring-4 ring-[var(--nut-tone-soft)]";
+  return "bg-[var(--nut-tone)] ring-3 ring-[var(--nut-tone-soft)]";
+}
+function stageClass(state) {
+  if (state === "done") return "border-[var(--ui-bg-inverted)] bg-inverted text-inverted";
+  if (state === "current")
+    return "border-[var(--nut-tone)] bg-[var(--nut-tone)] text-[var(--nut-tone-contrast)] ring-4 ring-[var(--nut-tone-soft)]";
+  return "border-[var(--ui-border-accented)] bg-default text-dimmed";
+}
+function actorAvatar(name) {
+  return {
+    alt: name,
+    class: displayToneClass(toneFromName(name)),
+    size: "3xs",
+    text: initialsOf(name),
+    ui: {
+      fallback: "text-[8px] font-bold text-[var(--nut-tone-ink)]",
+      root: "bg-[var(--nut-tone-soft)]"
+    }
+  };
+}
+</script>
+
+<template>
+  <DisplaySkeleton v-if="loading" :count="Math.min(Math.max(items.length, 2), 5)" />
+  <DisplayEmptyLine v-else-if="!items.length" :content="empty" :class="classes.empty" />
+  <div
+    v-else-if="variant === 'log'"
+    :class="classes.root"
+    data-display="timeline"
+    data-variant="log"
+  >
+    <div v-for="(entry, index) in reveal.visible.value" :key="index" :class="classes.item">
+      <time :class="classes.time">{{ entry.timeLabel }}</time>
+      <UAvatar
+        v-if="entry.actor"
+        v-bind="actorAvatar(resolveDisplayText(entry.actor.name) ?? '')"
+        :src="entry.actor.avatar?.src"
+        class="shrink-0"
+      />
+      <span class="min-w-0 flex-1 text-toned">
+        <b v-if="entry.actor" class="font-semibold text-highlighted">{{
+          resolveDisplayText(entry.actor.name)
+        }}</b>
+        {{ " " }}<DisplayRender :content="entry.title" />
+      </span>
+    </div>
+  </div>
+  <ol
+    v-else-if="variant === 'pipeline'"
+    class="m-0 flex list-none p-0"
+    data-display="timeline"
+    data-variant="pipeline"
+  >
+    <li
+      v-for="(entry, index) in entries"
+      :key="index"
+      :class="[classes.item, displayToneClass(entry.tone ?? 'primary')]"
+      :data-state="entry.resolvedState"
+      :aria-current="entry.resolvedState === 'current' ? 'step' : void 0"
+    >
+      <span
+        v-if="index > 0"
+        :class="[
+  'absolute top-[11px] -start-1/2 h-0.5 w-full',
+  entry.resolvedState === 'upcoming' ? 'bg-[var(--ui-border)]' : 'bg-inverted'
+]"
+        aria-hidden="true"
+      />
+      <span :class="[classes.marker, stageClass(entry.resolvedState)]">
+        <UIcon
+          v-if="entry.resolvedState === 'done'"
+          :name="entry.icon ?? icons.check"
+          class="size-3"
+        />
+        <UIcon v-else-if="entry.icon" :name="entry.icon" class="size-3" />
+        <template v-else>{{ index + 1 }}</template>
+      </span>
+      <span
+        v-reveal-truncated
+        :class="[classes.title, entry.resolvedState === 'upcoming' ? 'font-medium text-muted' : '']"
+      >
+        <DisplayRender :content="entry.title" />
+      </span>
+      <span v-if="entry.timeLabel" :class="['-mt-1 text-[11px]', classes.time]">{{
+        entry.timeLabel
+      }}</span>
+    </li>
+  </ol>
+  <div v-else :class="classes.root" data-display="timeline" :data-variant="variant">
+    <ol class="m-0 list-none p-0">
+      <template v-for="(entry, index) in reveal.visible.value" :key="index">
+        <li v-if="index === nowIndex" :class="classes.now" data-display-now>{{ nowText }}</li>
+        <li
+          :class="[classes.item, displayToneClass(entry.tone ?? 'neutral')]"
+          :data-state="entry.resolvedState"
+        >
+          <span
+            v-if="index < reveal.visible.value.length - 1"
+            :class="[
+  classes.connector,
+  reveal.visible.value[index + 1]?.resolvedState === 'upcoming' ? 'bg-[repeating-linear-gradient(var(--ui-border-accented)_0_3px,transparent_3px_6px)]' : ''
+]"
+            aria-hidden="true"
+          />
+          <span :class="[classes.marker, dotClass(entry.resolvedState)]" aria-hidden="true" />
+          <div :class="classes.body">
+            <div
+              v-reveal-truncated
+              :class="[classes.title, entry.resolvedState === 'upcoming' ? 'text-muted' : '']"
+            >
+              <span class="min-w-0"><DisplayRender :content="entry.title" /></span>
+              <time v-if="entry.timeLabel" :class="classes.time">{{ entry.timeLabel }}</time>
+            </div>
+            <div
+              v-if="entry.actor || !isDisplayContentEmpty(entry.description)"
+              v-reveal-truncated
+              :class="classes.description"
+            >
+              <span v-if="entry.actor" :class="classes.actor">
+                <UAvatar
+                  v-bind="actorAvatar(resolveDisplayText(entry.actor.name) ?? '')"
+                  :src="entry.actor.avatar?.src"
+                />
+                {{ resolveDisplayText(entry.actor.name) }}
+              </span>
+              <template v-if="entry.actor && !isDisplayContentEmpty(entry.description)">
+                ·
+              </template>
+              <DisplayRender :content="entry.description" />
+            </div>
+          </div>
+        </li>
+      </template>
+    </ol>
+    <DisplayMore
+      v-if="reveal.hidden.value"
+      :count="reveal.next.value"
+      :class="classes.more"
+      @reveal="reveal.reveal"
+    />
+  </div>
+</template>

package/dist/runtime/display/components/blocks/display-timeline.vue.d.ts

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

package/dist/runtime/display/components/display.d.vue.ts

@@ -0,0 +1,24 @@
+import type { DisplayKind, DisplayPropsMap } from '../types/index.js';
+declare const __VLS_export: <TKind extends DisplayKind>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<{
+        display: TKind;
+        props: DisplayPropsMap[TKind];
+        /** Name of a preset in `appConfig.nuxtUiTools.display.presets[display]`; `props` override it. */
+        preset?: string;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/display/components/display.vue

@@ -0,0 +1,21 @@
+<script setup>
+import { computed } from "vue";
+import { useDisplayConfig } from "../composables/use-display-config";
+import { applyDisplayPreset } from "../utils/config";
+import { DISPLAY_BLOCKS } from "../utils/registry";
+const {
+  display,
+  props: blockProps,
+  preset = void 0
+} = defineProps({
+  display: { type: null, required: true },
+  props: { type: null, required: true },
+  preset: { type: String, required: false }
+});
+const config = useDisplayConfig();
+const resolved = computed(() => applyDisplayPreset(display, blockProps, preset, config.value));
+</script>
+
+<template>
+  <component :is="DISPLAY_BLOCKS[display]" v-bind="resolved" />
+</template>

package/dist/runtime/display/components/display.vue.d.ts

@@ -0,0 +1,24 @@
+import type { DisplayKind, DisplayPropsMap } from '../types/index.js';
+declare const __VLS_export: <TKind extends DisplayKind>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<{
+        display: TKind;
+        props: DisplayPropsMap[TKind];
+        /** Name of a preset in `appConfig.nuxtUiTools.display.presets[display]`; `props` override it. */
+        preset?: string;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

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

@@ -0,0 +1,9 @@
+import type { ButtonProps } from '@nuxt/ui/components/Button.vue';
+import type { DisplayAction } from '../../types/index.js';
+type __VLS_Props = {
+    actions: readonly DisplayAction[];
+    size?: ButtonProps['size'];
+};
+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-actions.vue

@@ -0,0 +1,27 @@
+<script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+import { computed } from "vue";
+import { resolveDisplayText } from "../../utils/content";
+import { isExternalLink } from "../../utils/links";
+const { actions, size = "sm" } = defineProps({
+  actions: { type: Array, required: true },
+  size: { type: null, required: false }
+});
+const buttons = computed(
+  () => actions.map(({ label, ...action }) => ({
+    color: "neutral",
+    size,
+    variant: "outline",
+    ...action,
+    label: resolveDisplayText(label),
+    // A link out of the app opens in a new tab unless the action sets its own target.
+    target: action.target === void 0 && isExternalLink(action.to) ? "_blank" : action.target
+  }))
+);
+</script>
+
+<template>
+  <div>
+    <UButton v-for="(button, index) in buttons" :key="index" v-bind="button" />
+  </div>
+</template>

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

@@ -0,0 +1,9 @@
+import type { ButtonProps } from '@nuxt/ui/components/Button.vue';
+import type { DisplayAction } from '../../types/index.js';
+type __VLS_Props = {
+    actions: readonly DisplayAction[];
+    size?: ButtonProps['size'];
+};
+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-chip.d.vue.ts

@@ -0,0 +1,11 @@
+import type { DisplayChip, DisplayContent, DisplayText } from '../../types/index.js';
+type __VLS_Props = {
+    chip: Omit<DisplayChip, 'label'> & {
+        label?: DisplayText;
+    };
+    /** Rich content drawn instead of the label. */
+    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-chip.vue

@@ -0,0 +1,71 @@
+<script setup>
+import UBadge from "@nuxt/ui/components/Badge.vue";
+import { twMerge } from "tailwind-merge";
+import { computed } from "vue";
+import { isString } from "../../../shared/utils/predicate";
+import { useDisplayConfig } from "../../composables/use-display-config";
+import { vRevealTruncated } from "../../directives/reveal-truncated";
+import { resolveDisplayText } from "../../utils/content";
+import { displayToneClass, isBuiltinTone } from "../../utils/tone";
+import DisplayRender from "./display-render";
+const { chip, content = void 0 } = defineProps({
+  chip: { type: Object, required: true },
+  content: { type: [String, Number, Function, Object, Boolean, null, Array], required: false, skipCheck: true }
+});
+const SOFT = "bg-[var(--nut-tone-soft)] text-[var(--nut-tone-ink)] ring-0";
+const VARIANT_CLASSES = [
+  [
+    "outline",
+    "bg-transparent text-[var(--nut-tone-ink)] ring ring-inset ring-[var(--nut-tone-line)]"
+  ],
+  ["solid", "bg-[var(--nut-tone)] text-[var(--nut-tone-contrast)] ring-0"],
+  [
+    "subtle",
+    "bg-[var(--nut-tone-soft)] text-[var(--nut-tone-ink)] ring ring-inset ring-[var(--nut-tone-line)]"
+  ]
+];
+const CHIP_SLOTS = [
+  "base",
+  "label",
+  "leadingIcon",
+  "leadingAvatar",
+  "leadingAvatarSize",
+  "trailingIcon"
+];
+const config = useDisplayConfig();
+const badge = computed(() => {
+  const { label, tone, ...rest } = chip;
+  const variant = rest.variant ?? "soft";
+  const custom = tone !== void 0 && !isBuiltinTone(tone);
+  return {
+    ...rest,
+    class: custom ? [displayToneClass(tone), variantClass(variant), rest.class] : rest.class,
+    color: custom ? "neutral" : rest.color ?? tone ?? "neutral",
+    label: content === void 0 ? resolveDisplayText(label) : void 0,
+    size: rest.size ?? "sm",
+    ui: chipUi(rest.ui),
+    variant
+  };
+});
+function chipUi(own) {
+  const app = config.value.ui?.chip;
+  if (!app) return own;
+  const merged = { ...own };
+  for (const slot of CHIP_SLOTS) {
+    const appClass = app[slot];
+    const ownClass = own?.[slot];
+    if (appClass !== void 0 && (ownClass === void 0 || isString(ownClass)))
+      merged[slot] = twMerge(appClass, ownClass);
+  }
+  return merged;
+}
+function variantClass(variant) {
+  return VARIANT_CLASSES.find(([name]) => name === variant)?.[1] ?? SOFT;
+}
+</script>
+
+<template>
+  <UBadge v-reveal-truncated v-bind="badge" :data-tone="chip.tone">
+    <DisplayRender v-if="content !== void 0" :content="content" />
+  </UBadge>
+</template>

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

@@ -0,0 +1,11 @@
+import type { DisplayChip, DisplayContent, DisplayText } from '../../types/index.js';
+type __VLS_Props = {
+    chip: Omit<DisplayChip, 'label'> & {
+        label?: DisplayText;
+    };
+    /** Rich content drawn instead of the label. */
+    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-copy.d.vue.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    value: string;
+};
+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-copy.vue

@@ -0,0 +1,27 @@
+<script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+import { useClipboard } from "@vueuse/core";
+import { useDisplayIcons } from "../../composables/use-display-icons";
+import { useDisplayLocale } from "../../composables/use-display-locale";
+const { value } = defineProps({
+  value: { type: String, required: true }
+});
+const { t } = useDisplayLocale();
+const icons = useDisplayIcons();
+const { copy, copied } = useClipboard({ copiedDuring: 1500, legacy: true });
+</script>
+
+<template>
+  <UButton
+    :icon="copied ? icons.copyCheck : icons.copy"
+    :aria-label="copied ? t('display.copied') : t('display.copy')"
+    :title="copied ? t('display.copied') : t('display.copy')"
+    :class="copied ? 'text-success' : 'text-dimmed'"
+    color="neutral"
+    variant="ghost"
+    size="xs"
+    square
+    data-display-copy
+    @click.stop="copy(value)"
+  />
+</template>

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

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    value: string;
+};
+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;