@mapomodule/form 2.0.0-beta.1 → 2.0.0-beta.11

package/src/runtime/components/fields/MapoRepeater.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, computed, watchEffect } from "vue";
+import { useI18n } from "vue-i18n";
 import { VueDraggable } from "vue-draggable-plus";
 import { useConfirmStore } from "@mapomodule/store/runtime/stores/confirm";
 import type { RepeaterDescriptor } from "../../types/index.js";
@@ -17,6 +18,7 @@ const props = defineProps<{
 const emit = defineEmits<{ "update:modelValue": [value: unknown[]] }>();
 
 const form = injectMapoForm()!;
+const { t } = useI18n();
 
 const attrs = computed(() => props.descriptor.attrs ?? {});
 
@@ -108,10 +110,8 @@ function minBound(): number {
   return attrs.value.minItems ?? 0;
 }
 
-async function askConfirm(
-  message: string,
-  title = "Confirm",
-): Promise<boolean> {
+async function askConfirm(message: string, title?: string): Promise<boolean> {
+  title ??= t("mapo.confirm");
   try {
     // Falls back to native confirm when the Pinia store is not registered.
     return await useConfirmStore().ask({ title, message });
@@ -135,8 +135,8 @@ async function deleteItem(index: number) {
   if (!canDelete.value) return;
   if (attrs.value.confirmDelete !== false) {
     const confirmed = await askConfirm(
-      "Are you sure you want to delete this item?",
-      "Delete item",
+      t("mapo.confirmDelete"),
+      t("mapo.repeater.deleteItem"),
     );
     if (!confirmed) return;
   }
@@ -275,14 +275,14 @@ async function bulkDelete() {
   // Enforce minItems: would deletion drop below the lower bound?
   if (items.value.length - count < minBound()) {
     await askConfirm(
-      `Cannot delete: at least ${minBound()} items must remain.`,
-      "Action blocked",
+      t("mapo.repeater.minItemsBlock", { min: minBound() }),
+      t("mapo.repeater.actionBlocked"),
     );
     return;
   }
   const confirmed = await askConfirm(
-    `Delete ${count} selected items?`,
-    "Delete items",
+    t("mapo.repeater.confirmBulkDelete", { count }),
+    t("mapo.repeater.deleteItems"),
   );
   if (!confirmed) return;
   pushUndo();
@@ -336,7 +336,7 @@ const errorPrefix = (index: number) =>
       class="flex flex-wrap items-center gap-2 rounded border border-gray-200 bg-gray-50 px-3 py-2"
     >
       <span class="text-sm font-medium text-gray-700">
-        {{ items.length }} {{ items.length === 1 ? "item" : "items" }}
+        {{ t("mapo.repeater.nItems", { n: items.length }, items.length) }}
         <span v-if="attrs.maxItems" class="text-gray-400"
           >/ {{ attrs.maxItems }}</span
         >
@@ -344,10 +344,10 @@ const errorPrefix = (index: number) =>
 
       <div class="flex flex-1 flex-wrap items-center justify-end gap-2">
         <UButton size="xs" variant="ghost" color="neutral" @click="collapseAll">
-          Collapse all
+          {{ t("mapo.repeater.collapseAll") }}
         </UButton>
         <UButton size="xs" variant="ghost" color="neutral" @click="expandAll">
-          Expand all
+          {{ t("mapo.repeater.expandAll") }}
         </UButton>
         <UButton
           v-if="undoStack.length"
@@ -355,7 +355,7 @@ const errorPrefix = (index: number) =>
           variant="ghost"
           color="neutral"
           icon="i-lucide-undo-2"
-          title="Undo last action"
+          :title="t('mapo.repeater.undoLastAction')"
           @click="undo"
         />
 
@@ -365,8 +365,10 @@ const errorPrefix = (index: number) =>
           :variant="selectionMode ? 'solid' : 'ghost'"
           color="neutral"
           icon="i-lucide-check-square"
-          title="Bulk selection"
-          :label="selectionMode ? 'Exit selection' : 'Select'"
+          :title="t('mapo.repeater.bulkSelection')"
+          :label="
+            selectionMode ? t('mapo.repeater.exitSelection') : t('mapo.select')
+          "
           @click="toggleSelectionMode"
         />
 
@@ -386,7 +388,7 @@ const errorPrefix = (index: number) =>
           :disabled="!canAdd"
           @click="addItem"
         >
-          Add
+          {{ t("mapo.add") }}
         </UButton>
       </div>
     </div>
@@ -398,11 +400,11 @@ const errorPrefix = (index: number) =>
         class="flex items-center gap-2 rounded border border-primary-200 bg-primary-50 px-3 py-2"
       >
         <span class="text-sm font-medium text-primary-700">
-          {{ selectionCount }} selected
+          {{ t("mapo.repeater.nSelected", { n: selectionCount }) }}
         </span>
         <div class="flex flex-1 flex-wrap items-center gap-2">
           <UButton size="xs" variant="ghost" color="neutral" @click="selectAll">
-            All
+            {{ t("mapo.repeater.all") }}
           </UButton>
           <UButton
             size="xs"
@@ -410,7 +412,7 @@ const errorPrefix = (index: number) =>
             color="neutral"
             @click="clearSelection"
           >
-            Clear
+            {{ t("mapo.clear") }}
           </UButton>
           <UButton
             size="xs"
@@ -420,12 +422,17 @@ const errorPrefix = (index: number) =>
             :disabled="remainingSlots() <= 0"
             :title="
               remainingSlots() < selectionCount
-                ? `Only ${remainingSlots()} of ${selectionCount} can be duplicated (maxItems reached)`
-                : 'Duplicate selected'
+                ? t('mapo.repeater.duplicateLimited', {
+                    slots: remainingSlots(),
+                    count: selectionCount,
+                  })
+                : t('mapo.repeater.duplicateSelected')
             "
             @click="bulkDuplicate"
           >
-            Duplicate ({{ Math.min(selectionCount, remainingSlots()) }})
+            {{ t("mapo.duplicate") }} ({{
+              Math.min(selectionCount, remainingSlots())
+            }})
           </UButton>
           <UButton
             size="xs"
@@ -434,7 +441,7 @@ const errorPrefix = (index: number) =>
             icon="i-lucide-arrow-up"
             @click="bulkMoveToTop"
           >
-            Move to top
+            {{ t("mapo.repeater.moveToTop") }}
           </UButton>
           <UButton
             size="xs"
@@ -444,7 +451,7 @@ const errorPrefix = (index: number) =>
             :disabled="!canDelete"
             @click="bulkDelete"
           >
-            Delete ({{ selectionCount }})
+            {{ t("mapo.delete") }} ({{ selectionCount }})
           </UButton>
         </div>
       </div>
@@ -527,7 +534,7 @@ const errorPrefix = (index: number) =>
       v-if="items.length === 0"
       class="rounded border border-dashed border-gray-300 py-8 text-center text-sm text-gray-400"
     >
-      No items. Click "Add" to start.
+      {{ t("mapo.repeater.empty") }}
     </div>
   </div>
 </template>

package/src/runtime/components/fields/MapoRepeaterItem.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, computed, watch, watchEffect } from "vue";
+import { useI18n } from "vue-i18n";
 import type {
   AnyFieldDescriptor,
   FieldRegistry,
@@ -9,6 +10,8 @@ import { useMapoForm, injectMapoForm } from "../../composables/useMapoForm.js";
 import { useFocusMode } from "../../composables/useFocusMode.js";
 import MapoFormField from "../MapoFormField.vue";
 
+const { t } = useI18n();
+
 const props = defineProps<{
   /** Stable identity-based UID assigned by the parent repeater. */
   uid?: string;
@@ -173,7 +176,10 @@ function enterFocusMode() {
     registry: props.registry,
     languages: props.languages,
     currentLang: props.currentLang,
-    breadcrumb: [props.repeaterDescriptor?.label ?? "Repeater", label.value],
+    breadcrumb: [
+      props.repeaterDescriptor?.label ?? t("mapo.repeater.repeater"),
+      label.value,
+    ],
   });
 }
 </script>
@@ -246,7 +252,7 @@ function enterFocusMode() {
           color="error"
           icon="i-lucide-trash-2"
           :disabled="readonly"
-          title="Delete"
+          :title="t('mapo.delete')"
           @click.stop="$emit('delete')"
         />
         <UIcon name="i-lucide-chevron-down" class="h-4 w-4 text-gray-400" />
@@ -307,7 +313,7 @@ function enterFocusMode() {
             :max="totalItems"
             size="xs"
             class="w-14 text-center"
-            title="Position"
+            :title="t('mapo.repeater.position')"
             @change="
               $emit(
                 'move-to',
@@ -329,7 +335,7 @@ function enterFocusMode() {
           variant="ghost"
           color="neutral"
           icon="i-lucide-maximize-2"
-          title="Edit full screen"
+          :title="t('mapo.repeater.editFullScreen')"
           @click="enterFocusMode"
         />
 
@@ -339,7 +345,7 @@ function enterFocusMode() {
           color="neutral"
           icon="i-lucide-chevron-up"
           :disabled="readonly"
-          title="Move up"
+          :title="t('mapo.repeater.moveUp')"
           @click="$emit('move-up')"
         />
         <UButton
@@ -348,7 +354,7 @@ function enterFocusMode() {
           color="neutral"
           icon="i-lucide-chevron-down"
           :disabled="readonly"
-          title="Move down"
+          :title="t('mapo.repeater.moveDown')"
           @click="$emit('move-down')"
         />
 
@@ -359,7 +365,7 @@ function enterFocusMode() {
           color="neutral"
           icon="i-lucide-copy"
           :disabled="readonly"
-          title="Duplicate"
+          :title="t('mapo.duplicate')"
           @click="$emit('duplicate')"
         />
 
@@ -369,7 +375,7 @@ function enterFocusMode() {
           color="error"
           icon="i-lucide-trash-2"
           :disabled="readonly"
-          title="Delete"
+          :title="t('mapo.delete')"
           @click="$emit('delete')"
         />
 

package/src/runtime/components/fields/MapoSeoPreview.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from "vue";
+import { useI18n } from "vue-i18n";
 import { useRequestURL } from "#app";
 import type { SeoDescriptor } from "../../types/index.js";
 
@@ -10,6 +11,8 @@ interface SeoValue {
   permalink?: string;
 }
 
+const { t } = useI18n();
+
 const props = defineProps<{
   modelValue: unknown;
   descriptor: SeoDescriptor;
@@ -58,7 +61,9 @@ const displayUrl = computed(() => value.value.permalink || requestUrl.host);
     <div class="space-y-3">
       <div>
         <div class="mb-1 flex items-center justify-between">
-          <label class="text-sm font-medium text-gray-700">URL</label>
+          <label class="text-sm font-medium text-gray-700">{{
+            t("mapo.url")
+          }}</label>
         </div>
         <UInput
           :model-value="value.permalink"
@@ -72,14 +77,16 @@ const displayUrl = computed(() => value.value.permalink || requestUrl.host);
 
       <div>
         <div class="mb-1 flex items-center justify-between">
-          <label class="text-sm font-medium text-gray-700">SEO title</label>
+          <label class="text-sm font-medium text-gray-700">{{
+            t("mapo.seoPreview.seoTitle")
+          }}</label>
           <span class="text-xs" :class="titleColor">{{ titleLen }} / 60</span>
         </div>
         <UInput
           :model-value="value.title"
           :readonly="readonly"
           :disabled="disabled"
-          placeholder="Page title..."
+          :placeholder="t('mapo.seoPreview.titlePlaceholder')"
           class="w-full"
           @update:model-value="update('title', $event as string)"
         />
@@ -87,9 +94,9 @@ const displayUrl = computed(() => value.value.permalink || requestUrl.host);
 
       <div>
         <div class="mb-1 flex items-center justify-between">
-          <label class="text-sm font-medium text-gray-700"
-            >Meta description</label
-          >
+          <label class="text-sm font-medium text-gray-700">{{
+            t("mapo.seoPreview.metaDescription")
+          }}</label>
           <span class="text-xs" :class="descColor">{{ descLen }} / 155</span>
         </div>
         <UTextarea
@@ -97,7 +104,7 @@ const displayUrl = computed(() => value.value.permalink || requestUrl.host);
           :rows="3"
           :readonly="readonly"
           :disabled="disabled"
-          placeholder="Page description..."
+          :placeholder="t('mapo.seoPreview.descriptionPlaceholder')"
           class="w-full"
           @update:model-value="update('description', $event as string)"
         />
@@ -107,20 +114,17 @@ const displayUrl = computed(() => value.value.permalink || requestUrl.host);
     <!-- SERP preview -->
     <div class="rounded border border-gray-200 bg-gray-50 p-4">
       <p class="mb-1 text-xs font-medium uppercase tracking-wide text-gray-400">
-        Google preview
+        {{ t("mapo.seoPreview.googlePreview") }}
       </p>
       <div class="max-w-lg">
         <p class="truncate text-sm text-green-700">
           {{ displayUrl }}
         </p>
         <p class="truncate text-lg text-blue-700 underline">
-          {{ value.title || "Page title" }}
+          {{ value.title || t("mapo.seoPreview.defaultTitle") }}
         </p>
         <p class="mt-1 line-clamp-2 text-sm text-gray-600">
-          {{
-            value.description ||
-            "Page description that will appear in Google search results."
-          }}
+          {{ value.description || t("mapo.seoPreview.defaultDescription") }}
         </p>
       </div>
     </div>

package/src/runtime/components/fields/MapoWygEditor.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
-import { watch, onBeforeUnmount } from "vue";
+import { ref, watch, onBeforeUnmount, resolveComponent } from "vue";
+import { useI18n } from "vue-i18n";
 import { useEditor, EditorContent } from "@tiptap/vue-3";
 import type { AnyExtension } from "@tiptap/vue-3";
 import StarterKit from "@tiptap/starter-kit";
 import Link from "@tiptap/extension-link";
 import Underline from "@tiptap/extension-underline";
+import Image from "@tiptap/extension-image";
 import type { EditorDescriptor } from "../../types/index.js";
 
 const props = defineProps<{
@@ -17,6 +19,8 @@ const props = defineProps<{
 
 const emit = defineEmits<{ "update:modelValue": [value: string] }>();
 
+const { t } = useI18n();
+
 const extraExtensions =
   (props.descriptor.attrs?.extensions as AnyExtension[] | undefined) ?? [];
 
@@ -85,6 +89,7 @@ const editor = useEditor({
       validate: (href: string) => isSafeUrl(href),
     }),
     Underline,
+    Image.configure({ inline: false, allowBase64: false }),
     ...extraExtensions,
   ] as AnyExtension[],
   onUpdate: ({ editor: e }) => {
@@ -112,13 +117,38 @@ watch(
 );
 
 onBeforeUnmount(() => editor.value?.destroy());
+
+// ─── Image insertion ──────────────────────────────────────────────────────
+// MapoMediaManagerDialog is globally registered by @mapomodule/uikit.
+// resolveComponent() works at runtime because it is registered before this
+// component renders. We avoid a direct import to break the form → uikit cycle.
+const imagePickerOpen = ref(false);
+const MediaManagerDialog = resolveComponent("MapoMediaManagerDialog");
+const hasMediaManager = typeof MediaManagerDialog !== "string";
+
+function onImageConfirm(
+  selection:
+    | { file: string; alt_text?: string }
+    | Array<{ file: string; alt_text?: string }>,
+) {
+  const media = Array.isArray(selection) ? selection[0] : selection;
+  if (!media || !editor.value) return;
+  editor.value
+    .chain()
+    .focus()
+    .setImage({ src: media.file, alt: media.alt_text ?? "" })
+    .run();
+}
 </script>
 
 <template>
+  <!-- An input surface of its own, like the Nuxt UI inputs next to it
+       (`bg-default`, `accented` border): without it the text area takes the
+       page background and disappears on a tinted page. -->
   <div
-    class="mapo-wyg-editor rounded border"
+    class="mapo-wyg-editor rounded-md border bg-default"
     :class="[
-      errors?.length ? 'border-red-300' : 'border-gray-200',
+      errors?.length ? 'border-red-300' : 'border-accented',
       readonly || disabled ? 'opacity-60' : '',
     ]"
   >
@@ -223,9 +253,13 @@ onBeforeUnmount(() => editor.value?.destroy());
 
       <USeparator orientation="vertical" class="mx-1 h-5" />
 
-      <!-- Insert Image — enabled in Phase 6 when Media Manager is available -->
+      <!-- Insert Image via Media Manager (available when @mapomodule/uikit is installed) -->
       <UTooltip
-        text="Insert image (requires Media Manager — Phase 6)"
+        :text="
+          hasMediaManager
+            ? t('mapo.wygEditor.insertImage')
+            : t('mapo.wygEditor.requiresUikit')
+        "
         :delay-open="300"
       >
         <UButton
@@ -233,12 +267,13 @@ onBeforeUnmount(() => editor.value?.destroy());
           variant="ghost"
           color="neutral"
           icon="i-lucide-image"
-          disabled
+          :disabled="readonly || disabled || !hasMediaManager"
+          @click="imagePickerOpen = true"
         />
       </UTooltip>
     </div>
 
-    <!-- Contenuto editor -->
+    <!-- Editor content -->
     <EditorContent
       :editor="editor"
       class="prose prose-sm max-w-none px-3 py-2 focus-within:outline-none"
@@ -252,5 +287,18 @@ onBeforeUnmount(() => editor.value?.destroy());
     >
       {{ err }}
     </p>
+
+    <!-- Image picker dialog — only rendered when MapoMediaManagerDialog is
+         globally available. Inside the root on purpose: a second root would
+         drop what MapoFormField passes down (`flex-1`, `id`, `style`), and the
+         editor would shrink to its toolbar. As a modal it renders in <body>. -->
+    <component
+      :is="MediaManagerDialog"
+      v-if="hasMediaManager"
+      v-model="imagePickerOpen"
+      selection-mode="single"
+      mime="image/*"
+      @confirm="onImageConfirm"
+    />
   </div>
 </template>

package/src/runtime/composables/useFormFromSchema.ts

@@ -11,9 +11,10 @@ function mapType(schema: JSONSchema, key: string): FieldType {
   const t = Array.isArray(schema.type)
     ? schema.type.find((v) => v !== "null")
     : schema.type;
-  const fmt = schema.format as string | undefined;
+  const fmt = schema.format;
 
   if (t === "string") {
+    if (fmt === "textarea") return "textarea";
     if (fmt === "date") return "date";
     if (fmt === "date-time") return "datetime";
     if (fmt === "time") return "time";
@@ -179,6 +180,8 @@ function propertyToDescriptor(
     type,
     label: schema.title ?? undefined,
     required: requiredKeys.has(key),
+    ...(schema.readOnly ? { readonly: true } : {}),
+    ...(schema.translatable ? { translatable: true } : {}),
     ...(visible ? { visible } : {}),
     ...(Object.keys(attrs).length ? { attrs } : {}),
   };

package/src/runtime/composables/useMapoForm.ts

@@ -19,6 +19,7 @@ import type { AnyFieldDescriptor, FieldRegistry } from "../types/index.js";
 import { resolveFieldAccessor } from "../types/index.js";
 import { useCurrentLang } from "./useCurrentLang.js";
 import { useSnackStore } from "@mapomodule/store/runtime/stores/snack";
+import { useMapoT } from "@mapomodule/i18n/runtime/composables/useMapoT";
 import { useAuthStore } from "@mapomodule/store/runtime/stores/auth";
 
 /** Options accepted by `useMapoForm()`. */
@@ -121,6 +122,7 @@ export function useMapoForm<T extends object>(options: UseMapoFormOptions<T>) {
 
   const currentLang = useCurrentLang(currentLangProp);
   const snack = useSnackStore();
+  const t = useMapoT();
   const authStore = useAuthStore();
   const backup = ref(safeClone(model.value)) as Ref<T>;
   const clientErrors = ref<Record<string, string>>({});
@@ -318,7 +320,7 @@ export function useMapoForm<T extends object>(options: UseMapoFormOptions<T>) {
   ): string | null {
     if (!descriptor.required) return null;
     if (val === null || val === undefined || val === "")
-      return "This field is required.";
+      return t("mapo.form.required");
     return null;
   }
 
@@ -379,7 +381,7 @@ export function useMapoForm<T extends object>(options: UseMapoFormOptions<T>) {
     submitted.value = true;
     const { valid } = validateClient();
     if (!valid) {
-      snack.show("Please fix the errors before saving.", "error");
+      snack.show(t("mapo.fixErrors"), "error");
       return;
     }
     isLoading.value = true;

package/src/runtime/composables/useMediaManager.ts

@@ -0,0 +1,21 @@
+import { resolveComponent } from "vue";
+
+/**
+ * Resolves the Media Manager picker dialog at runtime.
+ *
+ * The media field types ship with `@mapomodule/form`, but the Media Manager
+ * itself lives in `@mapomodule/uikit`. Resolving the dialog by name instead of
+ * importing it keeps `form` free of a static dependency on `uikit` (which
+ * depends on `form`, so a static import would be a cycle) and lets `form` stay
+ * usable standalone — the fields then render an explicit notice instead of a
+ * broken picker.
+ *
+ * Must be called from `setup()`.
+ */
+export function useMediaManager() {
+  const MediaDialog = resolveComponent("MapoMediaManagerDialog");
+  // resolveComponent() returns the name unchanged when nothing is registered.
+  const available = typeof MediaDialog !== "string";
+
+  return { MediaDialog, available };
+}

package/src/runtime/composables/useUnsavedChangesGuard.ts

@@ -1,5 +1,6 @@
 import { onBeforeUnmount, type Ref } from "vue";
-import { onBeforeRouteLeave } from "vue-router";
+import { onBeforeRouteLeave } from "#app";
+import { useMapoT } from "@mapomodule/i18n/runtime/composables/useMapoT";
 
 /** Optional configuration for the unsaved-changes navigation guard. */
 export interface UnsavedChangesGuardOptions {
@@ -27,8 +28,7 @@ export function useUnsavedChangesGuard(
   isDirty: Ref<boolean>,
   options: UnsavedChangesGuardOptions = {},
 ) {
-  const message =
-    options.message ?? "You have unsaved changes. Do you really want to leave?";
+  const message = options.message ?? useMapoT()("mapo.confirmLeaveChanges");
   const canUseWindow = typeof window !== "undefined";
 
   const isEnabled = (): boolean => {

package/src/runtime/registry/defaults.ts

@@ -31,7 +31,15 @@ export const defaultRegistry: FieldRegistry = {
     editor: () => import("../components/fields/MapoWygEditor.vue"),
     map: () => import("../components/fields/MapoMapField.vue"),
     repeater: () => import("../components/fields/MapoRepeater.vue"),
-    // media, media-m2m, enhanced-media: added in Phase 6
+
+    // ─── Media pickers ────────────────────────────────────────────────────────
+    // The fields live here with every other field type; the Media Manager they
+    // drive ships with @mapomodule/uikit and is resolved at runtime
+    // (see useMediaManager). Without uikit they render an explicit notice.
+    media: () => import("../components/fields/MapoMediaField.vue"),
+    "media-m2m": () => import("../components/fields/MapoMediaM2mField.vue"),
+    "enhanced-media": () =>
+      import("../components/fields/MapoEnhancedMediaField.vue"),
   },
 
   attrs: {

package/src/runtime/types/descriptor.ts

@@ -344,15 +344,28 @@ export interface RepeaterDescriptor<
   };
 }
 
-/** Descriptor for media/file manager fields. */
+/** Descriptor for a single-media picker field (`type: 'media'`). */
 export interface MediaDescriptor<
   T = Record<string, unknown>,
 > extends FieldBase<T> {
-  type:
-    | `${KnownFieldType.Media}`
-    | `${KnownFieldType.MediaM2m}`
-    | `${KnownFieldType.EnhancedMedia}`;
-  attrs?: { mime?: string; multiple?: boolean };
+  type: `${KnownFieldType.Media}`;
+  attrs?: { mime?: string };
+}
+
+/** Descriptor for a multi-media picker field (`type: 'media-m2m'`). */
+export interface MediaM2mDescriptor<
+  T = Record<string, unknown>,
+> extends FieldBase<T> {
+  type: `${KnownFieldType.MediaM2m}`;
+  attrs?: { mime?: string; maxItems?: number };
+}
+
+/** Descriptor for a media picker with inline alt/caption metadata (`type: 'enhanced-media'`). */
+export interface EnhancedMediaDescriptor<
+  T = Record<string, unknown>,
+> extends FieldBase<T> {
+  type: `${KnownFieldType.EnhancedMedia}`;
+  attrs?: { mime?: string };
 }
 
 /**
@@ -395,7 +408,9 @@ export type FieldDescriptor<T = Record<string, unknown>> =
   | SeoDescriptor<T>
   | MapDescriptor<T>
   | RepeaterDescriptor<T>
-  | MediaDescriptor<T>;
+  | MediaDescriptor<T>
+  | MediaM2mDescriptor<T>
+  | EnhancedMediaDescriptor<T>;
 
 /**
  * {@link FieldDescriptor} plus the {@link CustomDescriptor} escape hatch.

package/src/runtime/types/index.ts

@@ -22,9 +22,13 @@ export type {
   MapDescriptor,
   RepeaterDescriptor,
   MediaDescriptor,
+  MediaM2mDescriptor,
+  EnhancedMediaDescriptor,
   CustomDescriptor,
 } from "./descriptor.js";
 
+export type { MediaLink, MediaItem, EnhancedMediaValue } from "./media.js";
+
 export type {
   FieldComponentEntry,
   FieldRegistry,