nuxt-ui-tools 1.24.0 → 1.25.1

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,38 @@
+const BUILTIN_TONES = [
+  "primary",
+  "secondary",
+  "success",
+  "info",
+  "warning",
+  "error",
+  "neutral"
+];
+export function displayToneClass(tone) {
+  return `nut-display-tone-${tone}`;
+}
+export function isBuiltinTone(tone) {
+  return BUILTIN_TONES.some((builtin) => builtin === tone);
+}
+export const DISPLAY_SURFACE_CLASSES = {
+  bordered: "rounded-[var(--nut-display-radius)] border border-default",
+  elevated: "rounded-[var(--nut-display-radius)] bg-default shadow-[0_10px_28px_-14px_rgb(0_0_0/0.3)] ring ring-default",
+  muted: "rounded-[var(--nut-display-radius)] bg-elevated",
+  plain: ""
+};
+export const DISPLAY_SURFACE_PADDING = {
+  bordered: "p-4",
+  elevated: "p-4",
+  muted: "p-4",
+  plain: ""
+};
+const NAME_TONES = ["primary", "info", "success", "warning", "secondary", "error"];
+export function toneFromName(name) {
+  let hash = 0;
+  for (const char of name) hash = (hash * 31 + char.charCodeAt(0)) % 2147483647;
+  return NAME_TONES[hash % NAME_TONES.length] ?? "primary";
+}
+export function initialsOf(name) {
+  const words = name.trim().split(/\s+/u).filter(Boolean);
+  const letters = words.length > 1 ? [words[0], words.at(-1)] : [words[0]];
+  return letters.map((word) => word?.[0] ?? "").join("").toUpperCase();
+}

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

@@ -0,0 +1,10 @@
+import type { DisplayUrl } from '../types/index.js';
+/** The address of a link, calling it when it is a function. */
+export declare function resolveDisplayUrl(source: DisplayUrl): Promise<DisplayUrl & string>;
+/**
+ * Opens a link in a new tab. A function's tab opens during the click, so popup blockers let it
+ * through, and follows the address once it resolves; it closes again if the address fails.
+ */
+export declare function openDisplayUrl(source: DisplayUrl): Promise<void>;
+/** Downloads a link under `name`, resolving it first when it is a function. */
+export declare function downloadDisplayUrl(source: DisplayUrl, name?: string): Promise<void>;

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

@@ -0,0 +1,33 @@
+import { isString } from "../../shared/utils/predicate.js";
+export async function resolveDisplayUrl(source) {
+  return isString(source) ? source : await source();
+}
+export async function openDisplayUrl(source) {
+  if (isString(source)) {
+    window.open(source, "_blank", "noopener");
+    return;
+  }
+  const tab = window.open("about:blank", "_blank");
+  try {
+    const url = await source();
+    if (!tab) {
+      window.open(url, "_blank", "noopener");
+      return;
+    }
+    tab.opener = null;
+    tab.location.href = url;
+  } catch (error) {
+    tab?.close();
+    throw error;
+  }
+}
+export async function downloadDisplayUrl(source, name) {
+  const anchor = document.createElement("a");
+  anchor.href = await resolveDisplayUrl(source);
+  anchor.rel = "noopener";
+  anchor.target = "_blank";
+  if (name) anchor.download = name;
+  document.body.append(anchor);
+  anchor.click();
+  anchor.remove();
+}

package/dist/runtime/file-preview/components/shell/file-preview-stage.vue

@@ -88,9 +88,11 @@ function retry() {
         v-else-if="source.status.value === 'error'"
         icon="i-lucide-triangle-alert"
         tone="error"
-        :title="t('filePreview.errors.sourceTitle')"
-        :description="t('filePreview.errors.sourceDescription')"
-        :detail="source.error.value?.message"
+        :title="source.failure.value?.title ?? t('filePreview.errors.sourceTitle')"
+        :description="
+  source.failure.value?.description ?? t('filePreview.errors.sourceDescription')
+"
+        :detail="source.failure.value?.description ? null : source.error.value?.message"
       >
         <UButton
           v-if="source.retryable.value"

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

@@ -8,6 +8,13 @@ type FilePreviewSourceStatus = 'loading' | 'ready' | 'error';
 export declare function useFilePreviewSource(item: () => FilePreviewItem | null): {
     blob: import("vue").ComputedRef<Blob | null>;
     error: import("vue").ShallowRef<Error | null, Error | null>;
+    failure: import("vue").ShallowRef<{
+        description: string | undefined;
+        title: string | undefined;
+    } | null, {
+        description: string | undefined;
+        title: string | undefined;
+    } | null>;
     /** Whether `retry()` can fetch the source again, which only a source function can. */
     retryable: import("vue").ComputedRef<boolean>;
     retry: () => Promise<void>;

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

@@ -1,11 +1,13 @@
 import { useObjectUrl } from "@vueuse/core";
 import { computed, ref, shallowRef, watch } from "vue";
-import { isFunction, isString } from "../../shared/utils/predicate.js";
+import { isFunction, isObject, isString } from "../../shared/utils/predicate.js";
+import { explainFilePreviewFailure } from "../utils/errors.js";
 const resolved = /* @__PURE__ */ new WeakMap();
 export function useFilePreviewSource(item) {
   const value = shallowRef(null);
   const status = ref("loading");
   const error = shallowRef(null);
+  const failure = shallowRef(null);
   const blob = computed(() => value.value instanceof Blob ? value.value : null);
   const objectUrl = useObjectUrl(blob);
   const url = computed(() => isString(value.value) ? value.value : objectUrl.value ?? null);
@@ -13,6 +15,7 @@ export function useFilePreviewSource(item) {
   function settle(next) {
     value.value = next;
     error.value = null;
+    failure.value = null;
     status.value = "ready";
   }
   async function resolve(options) {
@@ -26,6 +29,7 @@ export function useFilePreviewSource(item) {
     if (known !== void 0) return settle(known);
     value.value = null;
     error.value = null;
+    failure.value = null;
     status.value = "loading";
     try {
       const next = await src();
@@ -35,6 +39,7 @@ export function useFilePreviewSource(item) {
     } catch (cause) {
       if (current !== attempt) return;
       error.value = cause instanceof Error ? cause : new Error(String(cause));
+      failure.value = cause instanceof Error || isObject(cause) ? explainFilePreviewFailure(cause) : null;
       status.value = "error";
     }
   }
@@ -42,6 +47,7 @@ export function useFilePreviewSource(item) {
   return {
     blob,
     error,
+    failure,
     /** Whether `retry()` can fetch the source again, which only a source function can. */
     retryable: computed(() => isFunction(item()?.file.src)),
     retry: () => resolve({ force: true }),

package/dist/runtime/file-preview/index.d.ts

@@ -1,5 +1,6 @@
 export { createFilePreviewApi, filePreviewApiKey, provideFilePreview, useFilePreview, } from './composables/use-file-preview-api.js';
 export { onFilePreviewKey, useFilePreviewShell } from './composables/use-file-preview-shell.js';
 export { FILE_PREVIEW_TEXT_LIMIT, useFilePreviewText } from './composables/use-file-preview-text.js';
+export { FilePreviewSourceError } from './utils/errors.js';
 export { builtInFilePreviewRenderers, defineFilePreviewRenderer, detectFilePreviewKind, matchFilePreview, } from './utils/renderers.js';
 export type * from './types';

package/dist/runtime/file-preview/index.js

@@ -6,6 +6,7 @@ export {
 } from "./composables/use-file-preview-api.js";
 export { onFilePreviewKey, useFilePreviewShell } from "./composables/use-file-preview-shell.js";
 export { FILE_PREVIEW_TEXT_LIMIT, useFilePreviewText } from "./composables/use-file-preview-text.js";
+export { FilePreviewSourceError } from "./utils/errors.js";
 export {
   builtInFilePreviewRenderers,
   defineFilePreviewRenderer,

package/dist/runtime/file-preview/types/file.d.ts

@@ -11,6 +11,15 @@ export type FilePreviewSourceValue = string | Blob;
  * URLs are requested on demand; it runs again when the user presses Retry after an error.
  */
 export type FilePreviewSource = FilePreviewSourceValue | (() => MaybePromise<FilePreviewSourceValue>);
+/**
+ * Why a source function failed, carried by the error it throws (for example a
+ * `FilePreviewSourceError`, or any error with these properties). The preview shows them in place
+ * of its generic copy and leaves out the raw error message.
+ */
+export interface FilePreviewSourceFailure {
+    title?: FilePreviewText;
+    description?: FilePreviewText;
+}
 export interface FilePreviewDetail {
     label: FilePreviewText;
     value: FilePreviewText;

package/dist/runtime/file-preview/utils/errors.d.ts

@@ -0,0 +1,30 @@
+import type { GenericObject } from '../../shared/types/utils.js';
+import type { FilePreviewSourceFailure, FilePreviewText } from '../types/index.js';
+/**
+ * Error a source function throws when the app knows why the file is unavailable. The preview shows
+ * its `title` and `description` in place of the generic ones, without the raw error message.
+ *
+ * @example
+ * ```ts
+ * src: async () => {
+ *   const response = await fetch(`/api/invoices/${id}/file`)
+ *   if (response.status === 404)
+ *     throw new FilePreviewSourceError({ description: 'The invoice file cannot be found.' })
+ *   return (await response.json()).url
+ * }
+ * ```
+ */
+export declare class FilePreviewSourceError extends Error implements FilePreviewSourceFailure {
+    readonly title?: FilePreviewText;
+    readonly description?: FilePreviewText;
+    constructor(options: {
+        title?: FilePreviewText;
+        description?: FilePreviewText;
+        message?: string;
+    });
+}
+/** The title and description a thrown source error carries, if any, resolved to text. */
+export declare function explainFilePreviewFailure(cause: Error | GenericObject): {
+    description: string | undefined;
+    title: string | undefined;
+} | null;

package/dist/runtime/file-preview/utils/errors.js

@@ -0,0 +1,26 @@
+import { isFunction, isString } from "../../shared/utils/predicate.js";
+export class FilePreviewSourceError extends Error {
+  title;
+  description;
+  constructor(options) {
+    super(
+      options.message ?? textOf(options.description) ?? textOf(options.title) ?? "File source failed"
+    );
+    this.name = "FilePreviewSourceError";
+    this.title = options.title;
+    this.description = options.description;
+  }
+}
+export function explainFilePreviewFailure(cause) {
+  const title = "title" in cause ? textOf(cause.title) : void 0;
+  const description = "description" in cause ? textOf(cause.description) : void 0;
+  return title === void 0 && description === void 0 ? null : { description, title };
+}
+function textOf(value) {
+  if (isString(value)) return value;
+  if (isFunction(value)) {
+    const text = value();
+    return isString(text) ? text : void 0;
+  }
+  return void 0;
+}

package/dist/runtime/form/components/utils/form-file-preview.vue

@@ -1,7 +1,7 @@
 <script setup>
 import UButton from "@nuxt/ui/components/Button.vue";
 import UIcon from "@nuxt/ui/components/Icon.vue";
-import { computed, onScopeDispose, watch } from "vue";
+import { computed, onScopeDispose, ref, watch } from "vue";
 import { useUiToolsLocale } from "../../../i18n/use-locale";
 import { fileExtensionLabel, fileIconName, formatFileSize } from "../../../shared/utils/file";
 const props = defineProps({
@@ -25,6 +25,10 @@ const preview = computed(() => {
   return previewUrl;
 });
 const icon = computed(() => fileIconName(props.file.type));
+const previewFailed = ref(false);
+watch(preview, () => {
+  previewFailed.value = false;
+});
 const meta = computed(
   () => `${fileExtensionLabel(props.file)} \xB7 ${formatFileSize(props.file.size, code.value)}`
 );
@@ -50,8 +54,9 @@ onScopeDispose(() => {
     data-form-file=""
   >
     <img
-      v-if="preview"
+      v-if="preview && !previewFailed"
       :src="preview"
+      @error="previewFailed = true"
       :alt="file.name"
       class="size-10 shrink-0 rounded-md border border-default object-cover"
     />

package/dist/runtime/form/composables/use-form-root.js

@@ -1,5 +1,5 @@
 import { useAppConfig } from "nuxt/app";
-import { computed, nextTick, onBeforeUnmount, onMounted, watch } from "vue";
+import { computed, getCurrentInstance, nextTick, onBeforeUnmount, onMounted, watch } from "vue";
 import { useRouter } from "vue-router";
 import { useUiToolsLocale } from "../../i18n/use-locale.js";
 import {
@@ -19,6 +19,7 @@ import { provideFormRuntime, useFormRuntime } from "./use-form-runtime.js";
 import { provideFormUi } from "./use-form-ui.js";
 export function useFormRoot(params) {
   const router = useRouter();
+  const appContext = getCurrentInstance()?.appContext;
   const { t } = useUiToolsLocale();
   const appConfig = useAppConfig();
   const schema = computed(() => params.form()?.schema.value ?? params.schema() ?? {});
@@ -37,6 +38,8 @@ export function useFormRoot(params) {
   const ownedRuntime = params.runtime?.();
   const runtime = ownedRuntime ?? useFormRuntime({ input, schema, syncInput, validationMode });
   provideFormRuntime(runtime);
+  runtime.bindCancel(() => cancel());
+  onBeforeUnmount(() => runtime.bindCancel(null));
   const confirm = useFormConfirm();
   let leaveConfirmed = false;
   watch(
@@ -120,11 +123,21 @@ export function useFormRoot(params) {
   }
   async function submit() {
     const controller = params.form();
-    const result = controller ? await controller.submitHandler() : await runtime.submitHandler();
-    if (result.success) {
-      params.onSubmitted(runtime.output.value, result);
+    try {
+      const result = controller ? await controller.submitHandler() : await runtime.submitHandler();
+      if (result.success) params.onSubmitted(runtime.output.value, result);
+    } catch (error) {
+      reportSubmitError(error);
     }
   }
+  function reportSubmitError(error) {
+    const handler = appContext?.config.errorHandler;
+    if (handler) handler(error, null, "nuxt-ui-tools form submit");
+    else
+      queueMicrotask(() => {
+        throw error;
+      });
+  }
   async function cancel() {
     if (!leaveConfirmed && shouldConfirmDirtyNavigation() && !await confirmLeave()) {
       return;

package/dist/runtime/form/composables/use-form-runtime.js

@@ -1,4 +1,4 @@
-import { computed, inject, nextTick, provide, ref, watch } from "vue";
+import { computed, inject, nextTick, provide, ref, shallowRef, watch } from "vue";
 import { useUiToolsLocale } from "../../i18n/use-locale.js";
 import { createPublicFormApi } from "../utils/api.js";
 import { resolveFieldDependencies } from "../utils/dependencies.js";
@@ -44,6 +44,7 @@ export function useFormRuntime(params) {
   const currentStepIndex = ref(0);
   const navigationActionPending = ref(null);
   const effects = createEffectLifecycle();
+  const cancelHandler = shallowRef(null);
   const { t } = useUiToolsLocale();
   setContext(getSchemaContext(params.schema.value));
   function createFormNamespace(path, read) {
@@ -64,7 +65,8 @@ export function useFormRuntime(params) {
       setError: (target, message, options) => runtime.setError(resolve(target), message, options),
       state: () => read.state(),
       submit: () => runtime.submit(),
-      validate: () => runtime.validate()
+      validate: () => runtime.validate(),
+      close: () => cancelHandler.value?.() ?? Promise.resolve()
     };
   }
   function createApiFactory(read) {
@@ -449,6 +451,9 @@ export function useFormRuntime(params) {
       return result.success;
     },
     submitHandler,
+    bindCancel: (cancel) => {
+      cancelHandler.value = cancel;
+    },
     trackEffect: effects.track,
     validate,
     validateCurrentStep

package/dist/runtime/form/fields/index.d.ts

@@ -134,6 +134,11 @@ export declare const formFieldKinds: readonly [{
     };
     readonly state: "stateless";
     readonly type: "info";
+    readonly ui: {
+        readonly description: true;
+        readonly hint: true;
+        readonly label: true;
+    };
 }, {
     readonly layout: {
         readonly item: true;

package/dist/runtime/form/fields/info/component.vue

@@ -1,30 +1,62 @@
 <script setup>
-import UAlert from "@nuxt/ui/components/Alert.vue";
 import { computed } from "vue";
-import { useFieldControl } from "../../composables/use-field-control";
-import { invokeFormFunction, isNumber, isString } from "../../utils/predicate";
+import DisplayAlert from "../../../display/components/blocks/display-alert.vue";
+import DisplayBlock from "../../../display/components/display.vue";
+import DisplayLoadError from "../../../display/components/parts/display-load-error.vue";
+import DisplaySkeleton from "../../../display/components/parts/display-skeleton.vue";
+import { DISPLAY_SKELETON_LAYOUTS } from "../../../display/utils/registry";
+import FormFieldShell from "../../components/renderer/form-field-shell.vue";
+import { useFormRuntimeContext } from "../../composables/use-form-runtime";
+import { resolveFormDynamic } from "../../utils/dynamic";
 import { resolveFormText } from "../../utils/text";
+import { useInfoDisplay } from "./use-info-display";
 const props = defineProps({
-  field: { type: Object, required: true },
+  field: { type: null, required: true },
   path: { type: Array, required: true }
 });
-const { fieldProps, params } = useFieldControl(
-  () => props.field,
-  () => props.path
-);
-const description = computed(() => {
-  const { content } = props.field;
-  const resolved = invokeFormFunction(content, [params.value]) ?? content;
-  return isString(resolved) || isNumber(resolved) ? String(resolved) : void 0;
+const form = useFormRuntimeContext();
+const params = computed(() => form.getFieldCallbackParams(props.path, props.field));
+const displayField = computed(() => props.field.display === void 0 ? void 0 : props.field);
+const display = useInfoDisplay({
+  callbackParams: params,
+  field: () => displayField.value,
+  path: () => props.path
+});
+const shelled = computed(() => {
+  const { description, help, hint, label } = props.field;
+  return [description, help, hint, label].some((value) => value !== void 0);
+});
+const Bare = (_, { slots }) => slots.default?.();
+const notice = computed(() => {
+  const field = props.field;
+  if (field.display !== void 0) return void 0;
+  const options = field.props === void 0 ? void 0 : resolveFormDynamic(field.props, params.value);
+  return {
+    appearance: options?.variant ?? "soft",
+    icon: options?.icon === false ? false : options?.icon ?? "i-lucide-info",
+    message: resolveFormDynamic(field.content, params.value),
+    title: resolveFormText(options?.title),
+    tone: options?.color ?? "neutral"
+  };
 });
 </script>
 
 <template>
-  <UAlert
-    :color="fieldProps.color ?? 'neutral'"
-    :variant="fieldProps.variant ?? 'soft'"
-    :icon="fieldProps.icon === false ? void 0 : fieldProps.icon ?? 'i-lucide-info'"
-    :title="resolveFormText(fieldProps.title)"
-    :description="description"
-  />
+  <component :is="shelled ? FormFieldShell : Bare" v-bind="shelled ? { field, path } : {}">
+    <template v-if="displayField">
+      <DisplaySkeleton
+        v-if="display.pending.value"
+        :layout="DISPLAY_SKELETON_LAYOUTS[displayField.display]"
+        :count="3"
+      />
+      <DisplayLoadError v-else-if="display.error.value !== null" @retry="display.retry" />
+      <DisplayBlock
+        v-else-if="display.props.value"
+        :display="displayField.display"
+        :props="display.props.value"
+        :preset="displayField.preset"
+      />
+    </template>
+    <DisplayAlert v-else-if="notice" v-bind="notice" />
+  </component>
 </template>

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

@@ -4,4 +4,9 @@ export declare const infoFieldKind: {
     };
     readonly state: "stateless";
     readonly type: "info";
+    readonly ui: {
+        readonly description: true;
+        readonly hint: true;
+        readonly label: true;
+    };
 };

package/dist/runtime/form/fields/info/config.js

@@ -2,5 +2,6 @@ import { defineFormFieldKind } from "../../utils/field-kind.js";
 export const infoFieldKind = defineFormFieldKind({
   layout: { item: true },
   state: "stateless",
-  type: "info"
+  type: "info",
+  ui: { description: true, hint: true, label: true }
 });