@mapomodule/form 2.0.0-beta.4 → 2.0.0-beta.5

package/README.md

@@ -5,7 +5,7 @@ Form engine for Mapo v2 — descriptor-driven, typesafe, headless-ready admin fo
 ## Features
 
 - **Descriptor-driven**: define fields as `FieldDescriptor[]` — layout, validation, i18n in one object
-- **All field types built-in**: text, select, date/time, FK/M2M autocomplete, WYSIWYG editor, SEO preview, map, repeater
+- **All field types built-in**: text, select, date/time, FK/M2M autocomplete, WYSIWYG editor, SEO preview, map, repeater, media pickers
 - **Headless composable**: `useMapoForm()` for fully custom layouts; `<MapoForm>` for the default shell
 - **Registry auto-injection**: `<MapoForm>` and `<MapoDetail>` resolve `$mapoFormRegistry` automatically — no boilerplate
 - **Typed extension API**: `defineFormField(type, entry, opts)` to register custom fields with collision detection
@@ -16,6 +16,7 @@ Form engine for Mapo v2 — descriptor-driven, typesafe, headless-ready admin fo
 - **Consistent repeater items**: `MapoRepeater` drives each item through `useMapoForm`, so nested-path keys, `translatable`, accessors, `descriptor.is` overrides and **client validation** behave identically inside a repeater
 - **Draft persistence**: `draftKey` option on `useMapoForm()` auto-saves to localStorage every 2 s; `checkDraft()` / `draftBanner` offer restore/discard; clears on successful `submit()`
 - **Fail-soft**: unknown field types render a non-destructive placeholder, never crash the form
+- **Media pickers**: `media`, `media-m2m` and `enhanced-media` field types are built in; they drive the Media Manager from [`@mapomodule/uikit`](../uikit/README.md), resolved at runtime — install it to enable them
 
 ## Install
 

package/dist/index.d.mts

@@ -5,5 +5,5 @@ export { FocusTarget, useFocusMode } from '../dist/runtime/composables/useFocusM
 export { UnsavedChangesGuardOptions, useUnsavedChangesGuard } from '../dist/runtime/composables/useUnsavedChangesGuard.js';
 export { greaterThan, isEmpty, isNoneOf, isNotEmpty, isOneOf, lessThan, matches, matchesField, when, whenAny, whenNot } from '../dist/runtime/composables/useProgressiveDisclosure.js';
 export { FieldGroupDescriptor, flattenFieldGroups } from '../dist/runtime/utils/flattenFieldGroups.js';
-export { AnyFieldDescriptor, BooleanDescriptor, ColorDescriptor, CustomDescriptor, DateDescriptor, EditorDescriptor, FieldAccessor, FieldComponentEntry, FieldDescriptor, FieldRegistry, FieldType, FileDescriptor, FksDescriptor, KnownFieldType, MapDescriptor, MediaDescriptor, NumberDescriptor, PartialFieldRegistry, RepeaterDescriptor, SelectDescriptor, SeoDescriptor, TextDescriptor } from '../dist/runtime/types/index.js';
+export { AnyFieldDescriptor, BooleanDescriptor, ColorDescriptor, CustomDescriptor, DateDescriptor, EditorDescriptor, EnhancedMediaDescriptor, EnhancedMediaValue, FieldAccessor, FieldComponentEntry, FieldDescriptor, FieldRegistry, FieldType, FileDescriptor, FksDescriptor, KnownFieldType, MapDescriptor, MediaDescriptor, MediaItem, MediaLink, MediaM2mDescriptor, NumberDescriptor, PartialFieldRegistry, RepeaterDescriptor, SelectDescriptor, SeoDescriptor, TextDescriptor } from '../dist/runtime/types/index.js';
 import '@nuxt/schema';

package/dist/index.d.ts

@@ -11,5 +11,5 @@ export { when, whenAny, whenNot, matchesField, isOneOf, isNoneOf, isNotEmpty, is
 export { flattenFieldGroups } from "./runtime/utils/flattenFieldGroups.js";
 export type { FieldGroupDescriptor } from "./runtime/utils/flattenFieldGroups.js";
 export { KnownFieldType } from "./runtime/types/index.js";
-export type { FieldType, FieldAccessor, FieldDescriptor, AnyFieldDescriptor, TextDescriptor, NumberDescriptor, BooleanDescriptor, SelectDescriptor, FksDescriptor, DateDescriptor, ColorDescriptor, FileDescriptor, EditorDescriptor, SeoDescriptor, MapDescriptor, RepeaterDescriptor, MediaDescriptor, CustomDescriptor, FieldComponentEntry, FieldRegistry, PartialFieldRegistry, } from "./runtime/types/index.js";
+export type { FieldType, FieldAccessor, FieldDescriptor, AnyFieldDescriptor, TextDescriptor, NumberDescriptor, BooleanDescriptor, SelectDescriptor, FksDescriptor, DateDescriptor, ColorDescriptor, FileDescriptor, EditorDescriptor, SeoDescriptor, MapDescriptor, RepeaterDescriptor, MediaDescriptor, MediaM2mDescriptor, EnhancedMediaDescriptor, CustomDescriptor, MediaLink, MediaItem, EnhancedMediaValue, FieldComponentEntry, FieldRegistry, PartialFieldRegistry, } from "./runtime/types/index.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,4CAA4C,CAAC;AAC/E,YAAY,EAAE,wBAAwB,EAAE,MAAM,4CAA4C,CAAC;AAC3F,OAAO,EAAE,YAAY,EAAE,MAAM,uCAAuC,CAAC;AACrE,YAAY,EAAE,mBAAmB,EAAE,MAAM,uCAAuC,CAAC;AACjF,OAAO,EAAE,YAAY,EAAE,MAAM,uCAAuC,CAAC;AACrE,YAAY,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AACzE,OAAO,EAAE,sBAAsB,EAAE,MAAM,iDAAiD,CAAC;AACzF,YAAY,EAAE,0BAA0B,EAAE,MAAM,iDAAiD,CAAC;AAElG,OAAO,EACL,IAAI,EACJ,OAAO,EACP,OAAO,EACP,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,UAAU,EACV,OAAO,EACP,WAAW,EACX,QAAQ,EACR,OAAO,GACR,MAAM,mDAAmD,CAAC;AAC3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAC3E,YAAY,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAClF,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,YAAY,EACV,SAAS,EACT,aAAa,EACb,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,EAChB,aAAa,EACb,cAAc,EACd,eAAe,EACf,cAAc,EACd,gBAAgB,EAChB,aAAa,EACb,aAAa,EACb,kBAAkB,EAClB,eAAe,EACf,gBAAgB,EAChB,mBAAmB,EACnB,aAAa,EACb,oBAAoB,GACrB,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,4CAA4C,CAAC;AAC/E,YAAY,EAAE,wBAAwB,EAAE,MAAM,4CAA4C,CAAC;AAC3F,OAAO,EAAE,YAAY,EAAE,MAAM,uCAAuC,CAAC;AACrE,YAAY,EAAE,mBAAmB,EAAE,MAAM,uCAAuC,CAAC;AACjF,OAAO,EAAE,YAAY,EAAE,MAAM,uCAAuC,CAAC;AACrE,YAAY,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AACzE,OAAO,EAAE,sBAAsB,EAAE,MAAM,iDAAiD,CAAC;AACzF,YAAY,EAAE,0BAA0B,EAAE,MAAM,iDAAiD,CAAC;AAElG,OAAO,EACL,IAAI,EACJ,OAAO,EACP,OAAO,EACP,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,UAAU,EACV,OAAO,EACP,WAAW,EACX,QAAQ,EACR,OAAO,GACR,MAAM,mDAAmD,CAAC;AAC3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAC3E,YAAY,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAClF,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,YAAY,EACV,SAAS,EACT,aAAa,EACb,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,EAChB,aAAa,EACb,cAAc,EACd,eAAe,EACf,cAAc,EACd,gBAAgB,EAChB,aAAa,EACb,aAAa,EACb,kBAAkB,EAClB,eAAe,EACf,kBAAkB,EAClB,uBAAuB,EACvB,gBAAgB,EAChB,SAAS,EACT,SAAS,EACT,kBAAkB,EAClB,mBAAmB,EACnB,aAAa,EACb,oBAAoB,GACrB,MAAM,0BAA0B,CAAC"}

package/dist/module.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"module.d.ts","sourceRoot":"","sources":["../src/module.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAErE,MAAM,WAAW,eAAe;IAC9B,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,MAAM,CAAC,EAAE;QAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;;AAED,wBA4MyC"}
+{"version":3,"file":"module.d.ts","sourceRoot":"","sources":["../src/module.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAErE,MAAM,WAAW,eAAe;IAC9B,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,MAAM,CAAC,EAAE;QAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;;AAED,wBA2NyC"}

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@mapomodule/form",
   "configKey": "mapoForm",
-  "version": "2.0.0-beta.4",
+  "version": "2.0.0-beta.5",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -74,6 +74,18 @@ export {};
         filePath: resolver.resolve(`./runtime/components/${name}.vue`)
       });
     }
+    const mediaFieldComponents = [
+      "MapoMediaField",
+      "MapoMediaM2mField",
+      "MapoEnhancedMediaField",
+      "MapoMediaUnavailable"
+    ];
+    for (const name of mediaFieldComponents) {
+      addComponent({
+        name,
+        filePath: resolver.resolve(`./runtime/components/fields/${name}.vue`)
+      });
+    }
     addImports([
       {
         name: "useMapoForm",

package/dist/runtime/components/fields/MapoEnhancedMediaField.vue

@@ -0,0 +1,128 @@
+<script setup>
+import { ref, computed } from "vue";
+import { useMediaManager } from "../../composables/useMediaManager.js";
+const props = defineProps({
+  modelValue: { type: null, required: true },
+  descriptor: { type: Object, required: true },
+  errors: { type: Array, required: false },
+  readonly: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+const dialogOpen = ref(false);
+const { MediaDialog, available } = useMediaManager();
+const current = computed(
+  () => props.modelValue?.media ?? null
+);
+const altValue = computed({
+  get: () => props.modelValue?.alt ?? "",
+  set: (v) => emit("update:modelValue", {
+    ...props.modelValue ?? { media: null },
+    alt: v
+  })
+});
+const captionValue = computed({
+  get: () => props.modelValue?.caption ?? "",
+  set: (v) => emit("update:modelValue", {
+    ...props.modelValue ?? { media: null },
+    caption: v
+  })
+});
+const mime = computed(() => props.descriptor.attrs?.mime);
+function onConfirm(selection) {
+  const media = Array.isArray(selection) ? selection[0] ?? null : selection;
+  emit("update:modelValue", {
+    ...props.modelValue ?? {},
+    media,
+    alt: props.modelValue?.alt ?? media?.alt_text ?? "",
+    caption: props.modelValue?.caption ?? ""
+  });
+}
+function clear() {
+  emit("update:modelValue", null);
+}
+</script>
+
+<template>
+  <div class="mapo-enhanced-media-field space-y-3">
+    <MapoMediaUnavailable v-if="!available" />
+
+    <template v-else>
+      <div class="flex gap-3">
+        <!-- Preview -->
+        <div class="shrink-0">
+          <div
+            class="flex size-24 cursor-pointer items-center justify-center overflow-hidden rounded-lg border-2 border-dashed transition-colors"
+            :class="
+  current ? 'border-default' : 'border-accented hover:border-primary'
+"
+            @click="!readonly && !disabled && (dialogOpen = true)"
+          >
+            <MapoMediaPreview v-if="current" :media="current" size="md" />
+            <div v-else class="flex flex-col items-center gap-1 text-dimmed">
+              <UIcon name="i-lucide-image-plus" class="size-7" />
+              <span class="text-[10px]">Select</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Metadata fields -->
+        <div class="flex-1 space-y-2">
+          <div v-if="current" class="flex items-start justify-between gap-2">
+            <p class="truncate text-xs text-muted">
+              {{ current.title || current.file?.split("/").pop() }}
+            </p>
+            <div class="flex gap-1">
+              <UButton
+                v-if="!readonly && !disabled"
+                icon="i-lucide-refresh-cw"
+                size="xs"
+                variant="ghost"
+                color="neutral"
+                title="Change"
+                @click="dialogOpen = true"
+              />
+              <UButton
+                v-if="!readonly && !disabled"
+                icon="i-lucide-x"
+                size="xs"
+                variant="ghost"
+                color="neutral"
+                title="Remove"
+                @click="clear"
+              />
+            </div>
+          </div>
+
+          <UInput
+            v-model="altValue"
+            size="sm"
+            placeholder="Alt text"
+            :disabled="readonly || disabled || !current"
+          />
+          <UInput
+            v-model="captionValue"
+            size="sm"
+            placeholder="Caption"
+            :disabled="readonly || disabled || !current"
+          />
+        </div>
+      </div>
+
+      <!-- Dialog -->
+      <component
+        :is="MediaDialog"
+        v-model="dialogOpen"
+        selection-mode="single"
+        :mime="mime"
+        :selected="current"
+        @confirm="onConfirm"
+      />
+    </template>
+
+    <!-- Errors -->
+    <p v-for="err in errors" :key="err" class="text-xs text-error" role="alert">
+      {{ err }}
+    </p>
+  </div>
+</template>

package/dist/runtime/components/fields/MapoEnhancedMediaField.vue.d.ts

@@ -0,0 +1,16 @@
+import type { EnhancedMediaDescriptor, EnhancedMediaValue } from "../../types/index.js";
+type __VLS_Props = {
+    modelValue: EnhancedMediaValue | null | undefined;
+    descriptor: EnhancedMediaDescriptor;
+    errors?: string[];
+    readonly?: boolean;
+    disabled?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: EnhancedMediaValue | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: EnhancedMediaValue | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=MapoEnhancedMediaField.vue.d.ts.map

package/dist/runtime/components/fields/MapoEnhancedMediaField.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MapoEnhancedMediaField.vue.d.ts","sourceRoot":"","sources":["../../../../src/runtime/components/fields/MapoEnhancedMediaField.vue"],"names":[],"mappings":"AA0JA,OAAO,KAAK,EACV,uBAAuB,EACvB,kBAAkB,EAEnB,MAAM,sBAAsB,CAAC;AAG9B,KAAK,WAAW,GAAG;IACjB,UAAU,EAAE,kBAAkB,GAAG,IAAI,GAAG,SAAS,CAAC;IAClD,UAAU,EAAE,uBAAuB,CAAC;IACpC,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA2UF,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/runtime/components/fields/MapoMediaField.vue

@@ -0,0 +1,89 @@
+<script setup>
+import { ref, computed } from "vue";
+import { useMediaManager } from "../../composables/useMediaManager.js";
+const props = defineProps({
+  modelValue: { type: null, required: true },
+  descriptor: { type: Object, required: true },
+  errors: { type: Array, required: false },
+  readonly: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+const dialogOpen = ref(false);
+const { MediaDialog, available } = useMediaManager();
+const current = computed(() => {
+  if (!props.modelValue) return null;
+  if (typeof props.modelValue === "object") return props.modelValue;
+  return null;
+});
+const mime = computed(() => props.descriptor.attrs?.mime);
+function onConfirm(selection) {
+  emit(
+    "update:modelValue",
+    Array.isArray(selection) ? selection[0] ?? null : selection
+  );
+}
+function clear() {
+  emit("update:modelValue", null);
+}
+</script>
+
+<template>
+  <div class="mapo-media-field space-y-2">
+    <MapoMediaUnavailable v-if="!available" />
+
+    <template v-else>
+      <!-- Selected media preview -->
+      <div
+        v-if="current"
+        class="flex items-center gap-3 rounded-lg border border-default p-2"
+      >
+        <MapoMediaPreview :media="current" size="sm" />
+        <div class="flex-1 min-w-0">
+          <p class="truncate text-xs font-medium">
+            {{ current.title || current.file?.split("/").pop() }}
+          </p>
+          <p class="text-xs text-dimmed">
+            {{ current.mime_type }}
+          </p>
+        </div>
+        <UButton
+          v-if="!readonly && !disabled"
+          icon="i-lucide-x"
+          size="xs"
+          variant="ghost"
+          color="neutral"
+          @click="clear"
+        />
+      </div>
+
+      <!-- Trigger button -->
+      <UButton
+        v-if="!readonly && !disabled"
+        :icon="current ? 'i-lucide-refresh-cw' : 'i-lucide-image-plus'"
+        size="sm"
+        variant="soft"
+        color="neutral"
+        :block="!current"
+        @click="dialogOpen = true"
+      >
+        {{ current ? "Change" : "Select media" }}
+      </UButton>
+
+      <!-- Dialog -->
+      <component
+        :is="MediaDialog"
+        v-model="dialogOpen"
+        selection-mode="single"
+        :mime="mime"
+        :selected="current"
+        @confirm="onConfirm"
+      />
+    </template>
+
+    <!-- Errors -->
+    <p v-for="err in errors" :key="err" class="text-xs text-error" role="alert">
+      {{ err }}
+    </p>
+  </div>
+</template>

package/dist/runtime/components/fields/MapoMediaField.vue.d.ts

@@ -0,0 +1,16 @@
+import type { MediaDescriptor, MediaItem } from "../../types/index.js";
+type __VLS_Props = {
+    modelValue: MediaItem | number | null | undefined;
+    descriptor: MediaDescriptor;
+    errors?: string[];
+    readonly?: boolean;
+    disabled?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: MediaItem | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: MediaItem | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=MapoMediaField.vue.d.ts.map

package/dist/runtime/components/fields/MapoMediaField.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MapoMediaField.vue.d.ts","sourceRoot":"","sources":["../../../../src/runtime/components/fields/MapoMediaField.vue"],"names":[],"mappings":"AAyGA,OAAO,KAAK,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAGvE,KAAK,WAAW,GAAG;IACjB,UAAU,EAAE,SAAS,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAClD,UAAU,EAAE,eAAe,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA6NF,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/runtime/components/fields/MapoMediaM2mField.vue

@@ -0,0 +1,106 @@
+<script setup>
+import { ref, computed } from "vue";
+import { useMediaManager } from "../../composables/useMediaManager.js";
+const props = defineProps({
+  modelValue: { type: null, required: true },
+  descriptor: { type: Object, required: true },
+  errors: { type: Array, required: false },
+  readonly: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+const dialogOpen = ref(false);
+const { MediaDialog, available } = useMediaManager();
+const current = computed(() => {
+  if (!props.modelValue) return [];
+  return props.modelValue.filter((v) => typeof v === "object");
+});
+const mime = computed(() => props.descriptor.attrs?.mime);
+function onConfirm(selection) {
+  emit("update:modelValue", Array.isArray(selection) ? selection : [selection]);
+}
+function removeItem(id) {
+  emit(
+    "update:modelValue",
+    current.value.filter((m) => m.id !== id)
+  );
+}
+const dragIndex = ref(null);
+function onDragStart(index) {
+  dragIndex.value = index;
+}
+function onDragOverItem(index) {
+  if (dragIndex.value === null || dragIndex.value === index) return;
+  const items = [...current.value];
+  const [moved] = items.splice(dragIndex.value, 1);
+  if (!moved) return;
+  items.splice(index, 0, moved);
+  dragIndex.value = index;
+  emit("update:modelValue", items);
+}
+function onDragEnd() {
+  dragIndex.value = null;
+}
+</script>
+
+<template>
+  <div class="mapo-media-m2m-field space-y-2">
+    <MapoMediaUnavailable v-if="!available" />
+
+    <template v-else>
+      <!-- Selected items grid -->
+      <div v-if="current.length > 0" class="flex flex-wrap gap-2">
+        <div
+          v-for="(media, i) in current"
+          :key="media.id"
+          class="group relative"
+          :class="{
+  'opacity-50': dragIndex === i,
+  'cursor-grab': !readonly && !disabled
+}"
+          :draggable="!readonly && !disabled"
+          @dragstart="onDragStart(i)"
+          @dragover.prevent="onDragOverItem(i)"
+          @dragend="onDragEnd"
+        >
+          <MapoMediaPreview :media="media" size="sm" />
+          <button
+            v-if="!readonly && !disabled"
+            class="absolute -right-1.5 -top-1.5 hidden size-4 items-center justify-center rounded-full bg-error text-inverted group-hover:flex"
+            type="button"
+            @click="removeItem(media.id)"
+          >
+            <UIcon name="i-lucide-x" class="size-2.5" />
+          </button>
+        </div>
+      </div>
+
+      <!-- Add button -->
+      <UButton
+        v-if="!readonly && !disabled"
+        icon="i-lucide-plus"
+        size="sm"
+        variant="soft"
+        color="neutral"
+        @click="dialogOpen = true"
+      >
+        {{ current.length > 0 ? "Add media" : "Select media" }}
+      </UButton>
+
+      <!-- Dialog -->
+      <component
+        :is="MediaDialog"
+        v-model="dialogOpen"
+        selection-mode="multi"
+        :mime="mime"
+        :selected="current"
+        @confirm="onConfirm"
+      />
+    </template>
+
+    <!-- Errors -->
+    <p v-for="err in errors" :key="err" class="text-xs text-error" role="alert">
+      {{ err }}
+    </p>
+  </div>
+</template>

package/dist/runtime/components/fields/MapoMediaM2mField.vue.d.ts

@@ -0,0 +1,16 @@
+import type { MediaM2mDescriptor, MediaItem } from "../../types/index.js";
+type __VLS_Props = {
+    modelValue: MediaItem[] | number[] | null | undefined;
+    descriptor: MediaM2mDescriptor;
+    errors?: string[];
+    readonly?: boolean;
+    disabled?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: MediaItem[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: MediaItem[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=MapoMediaM2mField.vue.d.ts.map

package/dist/runtime/components/fields/MapoMediaM2mField.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MapoMediaM2mField.vue.d.ts","sourceRoot":"","sources":["../../../../src/runtime/components/fields/MapoMediaM2mField.vue"],"names":[],"mappings":"AA+HA,OAAO,KAAK,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAG1E,KAAK,WAAW,GAAG;IACjB,UAAU,EAAE,SAAS,EAAE,GAAG,MAAM,EAAE,GAAG,IAAI,GAAG,SAAS,CAAC;IACtD,UAAU,EAAE,kBAAkB,CAAC;IAC/B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAwQF,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/runtime/components/fields/MapoMediaUnavailable.vue

@@ -0,0 +1,15 @@
+<script setup>
+
+</script>
+
+<template>
+  <div
+    class="flex items-center gap-2 rounded-lg border border-dashed border-default px-3 py-2 text-xs text-muted"
+  >
+    <UIcon
+      name="i-lucide-triangle-alert"
+      class="size-4 shrink-0 text-warning"
+    />
+    <span>Media fields require <code>@mapomodule/uikit</code>.</span>
+  </div>
+</template>

package/dist/runtime/components/fields/MapoMediaUnavailable.vue.d.ts

@@ -0,0 +1,4 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=MapoMediaUnavailable.vue.d.ts.map

package/dist/runtime/components/fields/MapoMediaUnavailable.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MapoMediaUnavailable.vue.d.ts","sourceRoot":"","sources":["../../../../src/runtime/components/fields/MapoMediaUnavailable.vue"],"names":[],"mappings":"AAuEA,QAAA,MAAM,YAAY,+QAChB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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

@@ -1,9 +1,10 @@
 <script setup>
-import { watch, onBeforeUnmount } from "vue";
+import { ref, watch, onBeforeUnmount, resolveComponent } from "vue";
 import { useEditor, EditorContent } 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";
 const props = defineProps({
   modelValue: { type: null, required: true },
   descriptor: { type: Object, required: true },
@@ -61,6 +62,7 @@ const editor = useEditor({
       validate: (href) => isSafeUrl(href)
     }),
     Underline,
+    Image.configure({ inline: false, allowBase64: false }),
     ...extraExtensions
   ],
   onUpdate: ({ editor: e }) => {
@@ -83,6 +85,14 @@ watch(
   }
 );
 onBeforeUnmount(() => editor.value?.destroy());
+const imagePickerOpen = ref(false);
+const MediaManagerDialog = resolveComponent("MapoMediaManagerDialog");
+const hasMediaManager = typeof MediaManagerDialog !== "string";
+function onImageConfirm(selection) {
+  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>
@@ -194,9 +204,9 @@ 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 ? 'Insert image' : 'Requires @mapomodule/uikit'"
         :delay-open="300"
       >
         <UButton
@@ -204,12 +214,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"
@@ -224,4 +235,14 @@ onBeforeUnmount(() => editor.value?.destroy());
       {{ err }}
     </p>
   </div>
+
+  <!-- Image picker dialog — only rendered when MapoMediaManagerDialog is globally available -->
+  <component
+    :is="MediaManagerDialog"
+    v-if="hasMediaManager"
+    v-model="imagePickerOpen"
+    selection-mode="single"
+    mime="image/*"
+    @confirm="onImageConfirm"
+  />
 </template>

package/dist/runtime/components/fields/MapoWygEditor.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MapoWygEditor.vue.d.ts","sourceRoot":"","sources":["../../../../src/runtime/components/fields/MapoWygEditor.vue"],"names":[],"mappings":"AAyQA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAE7D,KAAK,WAAW,GAAG;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,gBAAgB,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAilBF,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"MapoWygEditor.vue.d.ts","sourceRoot":"","sources":["../../../../src/runtime/components/fields/MapoWygEditor.vue"],"names":[],"mappings":"AA6SA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAE7D,KAAK,WAAW,GAAG;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,gBAAgB,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA+oBF,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/runtime/composables/useMediaManager.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 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 declare function useMediaManager(): {
+    MediaDialog: string | import("vue").ConcreteComponent<{}, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, {}, any>;
+    available: boolean;
+};
+//# sourceMappingURL=useMediaManager.d.ts.map

package/dist/runtime/composables/useMediaManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMediaManager.d.ts","sourceRoot":"","sources":["../../../src/runtime/composables/useMediaManager.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AACH,wBAAgB,eAAe;;;EAM9B"}

package/dist/runtime/composables/useMediaManager.js

@@ -0,0 +1,6 @@
+import { resolveComponent } from "vue";
+export function useMediaManager() {
+  const MediaDialog = resolveComponent("MapoMediaManagerDialog");
+  const available = typeof MediaDialog !== "string";
+  return { MediaDialog, available };
+}

package/dist/runtime/registry/defaults.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["../../../src/runtime/registry/defaults.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAMvD,eAAO,MAAM,eAAe,EAAE,aA0F7B,CAAC"}
+{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["../../../src/runtime/registry/defaults.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAMvD,eAAO,MAAM,eAAe,EAAE,aAkG7B,CAAC"}

package/dist/runtime/registry/defaults.js

@@ -22,8 +22,14 @@ export const defaultRegistry = {
     seo: () => import("../components/fields/MapoSeoPreview.vue"),
     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
+    repeater: () => import("../components/fields/MapoRepeater.vue"),
+    // ─── 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: {
     // Applied to all fields