nuxt-ui-tools 1.24.0 → 1.25.0

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

@@ -0,0 +1,237 @@
+<script setup>
+import { computed } from "vue";
+import { useDisplayAppUi } from "../../composables/use-display-config";
+import { useDisplayNumber } from "../../composables/use-display-number";
+import { resolveDisplayClasses } from "../../utils/classes";
+import { isDisplayContentEmpty, resolveDisplayText } from "../../utils/content";
+import DisplayEmptyLine from "../parts/display-empty-line.vue";
+import DisplayRender from "../parts/display-render";
+import DisplaySkeleton from "../parts/display-skeleton.vue";
+const {
+  variant = "bars",
+  title = void 0,
+  aside = void 0,
+  data,
+  format = void 0,
+  height = 96,
+  highlight = "last",
+  empty = void 0,
+  loading = false,
+  ui = void 0
+} = defineProps({
+  variant: { type: String, required: false },
+  title: { type: [String, Number, Function, Object, Boolean, null, Array], required: false, skipCheck: true },
+  aside: { type: [String, Number, Function, Object, Boolean, null, Array], required: false, skipCheck: true },
+  data: { type: Array, required: true },
+  format: { type: Function, required: false },
+  height: { type: Number, required: false },
+  highlight: { type: [String, Number, Boolean], required: false },
+  empty: { type: [String, Number, Function, Object, Boolean, null, Array], required: false, skipCheck: true },
+  loading: { type: Boolean, required: false },
+  ui: { type: Object, required: false }
+});
+const SERIES = [
+  "var(--nut-dash-s1)",
+  "var(--nut-dash-s2)",
+  "var(--nut-dash-s3)",
+  "var(--nut-dash-s4)",
+  "var(--nut-dash-s5)",
+  "var(--nut-dash-s6)"
+];
+const formatNumber = useDisplayNumber();
+const appUi = useDisplayAppUi("chart");
+const formatValue = (value) => format ? format(value) : formatNumber(value);
+const maxValue = computed(() => Math.max(0, ...data.map((datum) => datum.value)));
+const total = computed(() => data.reduce((sum, datum) => sum + Math.max(0, datum.value), 0));
+const highlighted = computed(() => {
+  if (highlight === false) return -1;
+  if (highlight === "last") return data.length - 1;
+  if (highlight === "max") return data.findIndex((datum) => datum.value === maxValue.value);
+  return highlight;
+});
+const line = computed(() => {
+  if (data.length < 2) return void 0;
+  const min = Math.min(...data.map((datum) => datum.value));
+  const span = maxValue.value - min || 1;
+  const points = data.map((datum, index) => {
+    const x = index / (data.length - 1) * 300;
+    const y = 92 - (datum.value - min) / span * 80;
+    return `${x.toFixed(1)} ${y.toFixed(1)}`;
+  });
+  return { area: `M${points.join(" L")} L300 100 L0 100 Z`, path: `M${points.join(" L")}` };
+});
+const slices = computed(() => {
+  let offset = 25;
+  return data.map((datum, index) => {
+    const share = total.value ? Math.max(0, datum.value) / total.value * 100 : 0;
+    const slice = { color: colorOf(datum, index), dash: `${share} ${100 - share}`, offset, share };
+    offset = (offset - share + 100) % 100;
+    return slice;
+  });
+});
+const steps = computed(() => {
+  const first = data[0]?.value ?? 0;
+  return data.map((datum, index) => {
+    const previous = data[index - 1]?.value;
+    return {
+      ...datum,
+      rate: previous ? Math.round(datum.value / previous * 100) : void 0,
+      width: first ? datum.value / first * 100 : 0
+    };
+  });
+});
+const classes = computed(
+  () => resolveDisplayClasses(
+    {
+      aside: "text-xs text-dimmed",
+      axis: "mt-1.5 flex gap-2 text-[10.5px] text-dimmed",
+      bar: "relative min-h-px flex-1 rounded-t-[3px] bg-[var(--nut-dash-muted)] transition-[height] duration-300",
+      header: "flex items-baseline justify-between gap-3 text-sm",
+      legend: "flex flex-col gap-1.5 text-xs text-muted",
+      legendItem: "inline-flex items-center gap-1.5",
+      plot: "mt-3",
+      root: "min-w-0",
+      step: "grid grid-cols-[minmax(4rem,7rem)_minmax(0,1fr)_auto_2.75rem] items-center gap-2 text-xs",
+      stepLabel: "truncate text-muted",
+      stepRate: "text-end text-[11px] text-dimmed tabular-nums",
+      stepValue: "text-end font-semibold text-highlighted tabular-nums",
+      title: "font-semibold text-toned"
+    },
+    appUi.value,
+    ui
+  )
+);
+function colorOf(datum, index) {
+  return datum.tone ? `var(--nut-display-${datum.tone})` : SERIES[index % SERIES.length] ?? SERIES[0];
+}
+</script>
+
+<template>
+  <DisplaySkeleton v-if="loading" layout="block" />
+  <div v-else :class="classes.root" data-display="chart" :data-variant="variant">
+    <div
+      v-if="!isDisplayContentEmpty(title) || !isDisplayContentEmpty(aside)"
+      :class="classes.header"
+    >
+      <span :class="classes.title"><DisplayRender :content="title" /></span>
+      <span :class="classes.aside"><DisplayRender :content="aside" /></span>
+    </div>
+    <DisplayEmptyLine v-if="!data.length" :content="empty" :class="classes.plot" />
+    <div v-else-if="variant === 'bars'" :class="classes.plot">
+      <div
+        class="flex items-end gap-2 border-b border-default pt-5"
+        :style="{ height: `${height + 20}px` }"
+      >
+        <div
+          v-for="(datum, index) in data"
+          :key="index"
+          :class="classes.bar"
+          :style="{
+  height: `${maxValue ? datum.value / maxValue * height : 0}px`,
+  background: index === highlighted ? 'var(--nut-dash-s1)' : datum.tone ? `var(--nut-display-${datum.tone})` : void 0
+}"
+          :title="`${resolveDisplayText(datum.label)} : ${formatValue(datum.value)}`"
+          :data-highlighted="index === highlighted || void 0"
+        >
+          <span
+            v-if="index === highlighted"
+            class="absolute -top-4.5 left-1/2 -translate-x-1/2 text-[11px] font-bold whitespace-nowrap text-highlighted tabular-nums"
+          >
+            {{ formatValue(datum.value) }}
+          </span>
+        </div>
+      </div>
+      <div :class="classes.axis">
+        <span
+          v-for="(datum, index) in data"
+          :key="index"
+          class="min-w-0 flex-1 truncate text-center"
+        >
+          {{ resolveDisplayText(datum.label) }}
+        </span>
+      </div>
+    </div>
+    <div v-else-if="variant === 'line' && line" :class="classes.plot">
+      <svg
+        viewBox="0 0 300 100"
+        preserveAspectRatio="none"
+        class="w-full"
+        :style="{ height: `${height}px` }"
+        role="img"
+      >
+        <path
+          d="M0 25H300M0 50H300M0 75H300"
+          stroke="var(--nut-dash-grid)"
+          stroke-width="1"
+          vector-effect="non-scaling-stroke"
+        />
+        <path :d="line.area" fill="var(--nut-dash-s1)" fill-opacity="0.14" />
+        <path
+          :d="line.path"
+          fill="none"
+          stroke="var(--nut-dash-s1)"
+          stroke-width="2"
+          stroke-linejoin="round"
+          vector-effect="non-scaling-stroke"
+        />
+      </svg>
+      <div :class="[classes.axis, 'justify-between']">
+        <span
+          >{{ resolveDisplayText(data[0]?.label) }} · {{ formatValue(data[0]?.value ?? 0) }}</span
+        >
+        <span class="font-semibold text-toned"
+          >{{ resolveDisplayText(data.at(-1)?.label) }} ·
+          {{ formatValue(data.at(-1)?.value ?? 0) }}</span
+        >
+      </div>
+    </div>
+    <div v-else-if="variant === 'donut'" :class="[classes.plot, 'flex items-center gap-4']">
+      <svg width="96" height="96" viewBox="0 0 42 42" class="shrink-0" role="img">
+        <circle
+          cx="21"
+          cy="21"
+          r="15.915"
+          fill="none"
+          stroke="var(--nut-display-track)"
+          stroke-width="5.5"
+        />
+        <circle
+          v-for="(slice, index) in slices"
+          :key="index"
+          cx="21"
+          cy="21"
+          r="15.915"
+          fill="none"
+          :stroke="slice.color"
+          stroke-width="5.5"
+          :stroke-dasharray="slice.dash"
+          :stroke-dashoffset="slice.offset"
+        />
+      </svg>
+      <div :class="classes.legend">
+        <span v-for="(datum, index) in data" :key="index" :class="classes.legendItem">
+          <i class="size-2 shrink-0 rounded-[2px]" :style="{ background: slices[index]?.color }" />
+          {{ resolveDisplayText(datum.label) }}
+          <b class="font-semibold text-default tabular-nums"
+            >{{ Math.round(slices[index]?.share ?? 0) }} %</b
+          >
+        </span>
+      </div>
+    </div>
+    <div v-else-if="variant === 'funnel'" :class="[classes.plot, 'flex flex-col gap-1.5']">
+      <div v-for="(step, index) in steps" :key="index" :class="classes.step">
+        <span :class="classes.stepLabel">{{ resolveDisplayText(step.label) }}</span>
+        <span
+          class="h-4 rounded-[3px]"
+          :style="{
+  width: `${step.width}%`,
+  background: step.tone ? `var(--nut-display-${step.tone})` : 'var(--nut-dash-s1)',
+  opacity: step.tone ? 1 : 1 - index * 0.14
+}"
+        />
+        <span :class="classes.stepValue">{{ formatValue(step.value) }}</span>
+        <span :class="classes.stepRate">{{ step.rate === void 0 ? "" : `${step.rate} %` }}</span>
+      </div>
+    </div>
+  </div>
+</template>

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

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

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

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

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

@@ -0,0 +1,143 @@
+<script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { computed, ref } from "vue";
+import { isNumber } from "../../../shared/utils/predicate";
+import { useDisplayAppUi } from "../../composables/use-display-config";
+import { useDisplayIcons } from "../../composables/use-display-icons";
+import { useDisplayLocale } from "../../composables/use-display-locale";
+import { resolveDisplayClasses } from "../../utils/classes";
+import { resolveDisplayText } from "../../utils/content";
+import { tokenizeJson } from "../../utils/json";
+import DisplayCopy from "../parts/display-copy.vue";
+import DisplaySkeleton from "../parts/display-skeleton.vue";
+const {
+  variant = "block",
+  value,
+  language = void 0,
+  label = void 0,
+  icon = void 0,
+  href = void 0,
+  copy = true,
+  visible = 4,
+  maxHeight = void 0,
+  loading = false,
+  ui = void 0
+} = defineProps({
+  variant: { type: String, required: false },
+  value: { type: String, required: true },
+  language: { type: String, required: false },
+  label: { type: [String, Number, Function], required: false },
+  icon: { type: String, required: false },
+  href: { type: String, required: false },
+  copy: { type: Boolean, required: false },
+  visible: { type: Number, required: false },
+  maxHeight: { type: [Number, String], required: false },
+  loading: { type: Boolean, required: false },
+  ui: { type: Object, required: false }
+});
+const TOKEN_CLASSES = {
+  key: "text-[var(--nut-display-code-key)]",
+  literal: "text-[var(--nut-display-code-literal)]",
+  number: "text-[var(--nut-display-code-number)]",
+  punctuation: "text-[var(--nut-display-code-muted)]",
+  space: "",
+  string: "text-[var(--nut-display-code-string)]"
+};
+const { t } = useDisplayLocale();
+const icons = useDisplayIcons();
+const appUi = useDisplayAppUi("code");
+const revealed = ref(false);
+const tokens = computed(
+  () => language?.toLowerCase() === "json" ? tokenizeJson(value) : void 0
+);
+const masked = computed(() => {
+  const kept = Math.max(0, Math.min(visible, value.length));
+  return `${"\u2022".repeat(Math.max(8, value.length - kept))}${kept ? value.slice(-kept) : ""}`;
+});
+const heading = computed(() => resolveDisplayText(label) ?? language);
+const bodyStyle = computed(
+  () => maxHeight === void 0 ? void 0 : { maxHeight: isNumber(maxHeight) ? `${maxHeight}px` : maxHeight }
+);
+const classes = computed(
+  () => resolveDisplayClasses(
+    {
+      actions: "flex shrink-0 items-center",
+      body: "m-0 overflow-auto px-3 py-2.5 font-mono text-xs leading-relaxed whitespace-pre",
+      header: "flex items-center justify-between gap-2 border-b border-[var(--nut-display-code-line)] py-1 ps-3 pe-1 text-[11px] text-[var(--nut-display-code-muted)]",
+      icon: "me-1 size-3.5 shrink-0 text-muted",
+      language: "font-medium",
+      root: variant === "block" ? "min-w-0 overflow-hidden rounded-[var(--nut-display-radius)] bg-[var(--nut-display-code-bg)] text-[var(--nut-display-code-ink)]" : "flex h-9 min-w-0 items-center gap-1 rounded-[calc(var(--nut-display-radius)*0.75)] border border-accented bg-elevated ps-2.5 pe-1 font-mono text-[13px] text-default",
+      value: "min-w-0 flex-1 truncate"
+    },
+    appUi.value,
+    ui
+  )
+);
+</script>
+
+<template>
+  <DisplaySkeleton v-if="loading" :layout="variant === 'block' ? 'block' : 'lines'" :count="1" />
+  <div
+    v-else-if="variant === 'block'"
+    :class="classes.root"
+    data-display="code"
+    data-variant="block"
+  >
+    <div v-if="heading || copy || href" :class="classes.header">
+      <span :class="classes.language">{{ heading }}</span>
+      <div :class="classes.actions">
+        <UButton
+          v-if="href"
+          :to="href"
+          target="_blank"
+          :icon="icons.external"
+          :aria-label="t('display.open')"
+          color="neutral"
+          variant="ghost"
+          size="xs"
+          square
+          class="text-[var(--nut-display-code-muted)]"
+        />
+        <DisplayCopy v-if="copy" :value="value" class="text-[var(--nut-display-code-muted)]" />
+      </div>
+    </div>
+    <pre
+      :class="classes.body"
+      :style="bodyStyle"
+    ><template v-if="tokens"><span v-for="(token, index) in tokens" :key="index" :class="TOKEN_CLASSES[token.kind]">{{ token.text }}</span></template><template v-else>{{ value }}</template></pre>
+  </div>
+  <div v-else :class="classes.root" data-display="code" :data-variant="variant">
+    <UIcon v-if="icon" :name="icon" :class="classes.icon" />
+    <span :class="classes.value" data-display-value>{{
+      variant === "secret" && !revealed ? masked : value
+    }}</span>
+    <div :class="classes.actions">
+      <UButton
+        v-if="variant === 'secret'"
+        :icon="revealed ? icons.eyeOff : icons.eye"
+        :aria-label="revealed ? t('display.conceal') : t('display.reveal')"
+        :aria-pressed="revealed"
+        color="neutral"
+        variant="ghost"
+        size="xs"
+        square
+        class="text-dimmed"
+        @click="revealed = !revealed"
+      />
+      <UButton
+        v-if="href"
+        :to="href"
+        target="_blank"
+        :icon="icons.external"
+        :aria-label="t('display.open')"
+        color="neutral"
+        variant="ghost"
+        size="xs"
+        square
+        class="text-dimmed"
+      />
+      <DisplayCopy v-if="copy" :value="value" />
+    </div>
+  </div>
+</template>

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

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

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

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

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

@@ -0,0 +1,174 @@
+<script setup>
+import UBadge from "@nuxt/ui/components/Badge.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 { resolveDisplayClasses } from "../../utils/classes";
+import { isDisplayContentEmpty, resolveDisplayText } from "../../utils/content";
+import {
+  calendarDaysBetween,
+  calendarLeaf,
+  formatDayCount,
+  formatDisplayDate,
+  formatRelativeDays,
+  toDisplayDate
+} from "../../utils/dates";
+import { displayToneClass } from "../../utils/tone";
+import DisplayRender from "../parts/display-render";
+import DisplaySkeleton from "../parts/display-skeleton.vue";
+const {
+  variant = "tile",
+  value,
+  end = void 0,
+  title = void 0,
+  description = void 0,
+  icon = void 0,
+  tone = void 0,
+  time = false,
+  deadline = true,
+  warnWithin = 3,
+  now = void 0,
+  label = void 0,
+  loading = false,
+  ui = void 0
+} = defineProps({
+  variant: { type: String, required: false },
+  value: { type: [Date, String, Number], required: true },
+  end: { type: [Date, String, Number], required: false },
+  title: { type: [String, Number, Function, Object, Boolean, null, Array], required: false, skipCheck: true },
+  description: { type: [String, Number, Function, Object, Boolean, null, Array], required: false, skipCheck: true },
+  icon: { type: String, required: false },
+  tone: { type: String, required: false },
+  time: { type: Boolean, required: false },
+  deadline: { type: Boolean, required: false },
+  warnWithin: { type: Number, required: false },
+  now: { type: [Date, String, Number], required: false },
+  label: { type: [String, Number, Function], required: false },
+  loading: { type: Boolean, required: false },
+  ui: { type: Object, required: false }
+});
+const TIME_FORMAT = { hour: "2-digit", minute: "2-digit" };
+const LONG_DATE_FORMAT = {
+  day: "numeric",
+  month: "short",
+  weekday: "short"
+};
+const LONG_DATE_TIME_FORMAT = { ...LONG_DATE_FORMAT, ...TIME_FORMAT };
+const { t, code } = useDisplayLocale();
+const icons = useDisplayIcons();
+const appUi = useDisplayAppUi("date");
+const start = computed(() => toDisplayDate(value));
+const finish = computed(() => toDisplayDate(end));
+const reference = computed(() => toDisplayDate(now) ?? /* @__PURE__ */ new Date());
+const days = computed(() => start.value ? calendarDaysBetween(reference.value, start.value) : 0);
+const overdue = computed(() => deadline && days.value < 0);
+const resolvedTone = computed(() => {
+  if (tone) return tone;
+  if (variant !== "countdown") return "primary";
+  if (overdue.value) return "error";
+  return days.value <= warnWithin ? "warning" : "neutral";
+});
+const leaf = computed(() => start.value ? calendarLeaf(start.value, code.value) : void 0);
+const timeRange = computed(() => {
+  if (!time || !start.value) return void 0;
+  const from = formatDisplayDate(start.value, code.value, TIME_FORMAT);
+  return finish.value ? `${from} \u2013 ${formatDisplayDate(finish.value, code.value, TIME_FORMAT)}` : from;
+});
+const countdownText = computed(() => {
+  const text = resolveDisplayText(label);
+  if (text !== void 0) return text;
+  if (overdue.value)
+    return t("display.overdue", { duration: formatDayCount(-days.value, code.value) });
+  return formatRelativeDays(days.value, code.value);
+});
+const longDate = (date) => date ? formatDisplayDate(date, code.value, time ? LONG_DATE_TIME_FORMAT : LONG_DATE_FORMAT) : "";
+const duration = computed(
+  () => start.value && finish.value ? formatDayCount(calendarDaysBetween(start.value, finish.value) + 1, code.value) : void 0
+);
+const classes = computed(
+  () => resolveDisplayClasses(
+    {
+      body: "min-w-0",
+      bound: "flex flex-col",
+      boundLabel: "text-[11px] text-muted",
+      boundValue: "text-[15px] font-bold text-highlighted",
+      caption: "text-xs text-toned",
+      day: "pt-1 text-xl leading-none font-extrabold text-highlighted",
+      description: "mt-0.5 flex items-center gap-1 text-xs text-muted",
+      duration: "",
+      icon: "size-5 shrink-0 text-[var(--nut-tone-ink)]",
+      line: "flex flex-1 items-center gap-2 before:h-px before:flex-1 before:bg-[var(--ui-border-accented)] after:h-px after:flex-1 after:bg-[var(--ui-border-accented)]",
+      month: "bg-[var(--nut-tone)] py-0.5 text-[9.5px] font-extrabold tracking-[0.1em] text-[var(--nut-tone-contrast)]",
+      root: variant === "countdown" ? "flex items-center gap-3 rounded-[var(--nut-display-radius)] bg-[var(--nut-tone-soft)] px-3.5 py-3" : "flex min-w-0 items-center gap-3",
+      tile: "w-13 shrink-0 overflow-hidden rounded-[var(--nut-display-radius)] border border-default bg-default text-center",
+      title: "font-semibold text-highlighted",
+      value: "text-lg leading-tight font-extrabold text-[var(--nut-tone-ink)]",
+      weekday: "pb-1 text-[10.5px] text-muted"
+    },
+    appUi.value,
+    ui
+  )
+);
+</script>
+
+<template>
+  <DisplaySkeleton v-if="loading" layout="card" />
+  <div
+    v-else
+    :class="[classes.root, displayToneClass(resolvedTone)]"
+    data-display="date"
+    :data-variant="variant"
+  >
+    <template v-if="variant === 'countdown'">
+      <UIcon :name="icon ?? (overdue ? icons.warning : 'i-lucide-clock')" :class="classes.icon" />
+      <div :class="classes.body">
+        <div :class="classes.value" data-display-countdown>{{ countdownText }}</div>
+        <div :class="classes.caption">
+          <DisplayRender
+            :content="
+  description ?? (deadline ? t('display.dueOn', { date: longDate(start) }) : longDate(start))
+"
+          />
+        </div>
+      </div>
+    </template>
+    <template v-else-if="variant === 'range'">
+      <div :class="classes.bound">
+        <span :class="classes.boundLabel">{{ t("display.from") }}</span>
+        <span :class="classes.boundValue">{{ longDate(start) }}</span>
+      </div>
+      <div :class="classes.line">
+        <UBadge
+          v-if="duration"
+          color="neutral"
+          variant="soft"
+          size="sm"
+          :label="duration"
+          :class="classes.duration"
+        />
+      </div>
+      <div :class="[classes.bound, 'text-end']">
+        <span :class="classes.boundLabel">{{ t("display.to") }}</span>
+        <span :class="classes.boundValue">{{ longDate(finish) }}</span>
+      </div>
+    </template>
+    <template v-else>
+      <div :class="classes.tile" aria-hidden="true">
+        <div :class="classes.month">{{ leaf?.month }}</div>
+        <div :class="classes.day">{{ leaf?.day }}</div>
+        <div :class="classes.weekday">{{ leaf?.weekday }}</div>
+      </div>
+      <div :class="classes.body">
+        <div :class="classes.title"><DisplayRender :content="title ?? longDate(start)" /></div>
+        <div v-if="!isDisplayContentEmpty(description) || timeRange" :class="classes.description">
+          <UIcon v-if="timeRange" :name="icon ?? 'i-lucide-clock'" class="size-3 shrink-0" />
+          <span v-if="timeRange">{{ timeRange }}</span>
+          <template v-if="timeRange && !isDisplayContentEmpty(description)"> · </template>
+          <DisplayRender :content="description" />
+        </div>
+      </div>
+    </template>
+  </div>
+</template>

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

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

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

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