@mapomodule/form 2.0.0-beta.0 → 2.0.0-beta.10

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/__tests__/__mocks__/nuxt-imports.d.ts

@@ -0,0 +1,4 @@
+export declare const useSnackStore: import("vitest").Mock<() => {
+    show: import("vitest").Mock<(...args: any[]) => any>;
+}>;
+//# sourceMappingURL=nuxt-imports.d.ts.map

package/dist/__tests__/__mocks__/nuxt-imports.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nuxt-imports.d.ts","sourceRoot":"","sources":["../../../src/__tests__/__mocks__/nuxt-imports.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa;;EAEvB,CAAC"}

package/dist/__tests__/camomillaRoundTrip.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=camomillaRoundTrip.test.d.ts.map

package/dist/__tests__/camomillaRoundTrip.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"camomillaRoundTrip.test.d.ts","sourceRoot":"","sources":["../../src/__tests__/camomillaRoundTrip.test.ts"],"names":[],"mappings":""}

package/dist/__tests__/registry.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=registry.test.d.ts.map

package/dist/__tests__/registry.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"registry.test.d.ts","sourceRoot":"","sources":["../../src/__tests__/registry.test.ts"],"names":[],"mappings":""}

package/dist/__tests__/useFormFromSchema.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=useFormFromSchema.test.d.ts.map

package/dist/__tests__/useFormFromSchema.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFormFromSchema.test.d.ts","sourceRoot":"","sources":["../../src/__tests__/useFormFromSchema.test.ts"],"names":[],"mappings":""}

package/dist/__tests__/useMapoForm.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=useMapoForm.test.d.ts.map

package/dist/__tests__/useMapoForm.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMapoForm.test.d.ts","sourceRoot":"","sources":["../../src/__tests__/useMapoForm.test.ts"],"names":[],"mappings":""}

package/dist/index.d.mts

@@ -1 +1,9 @@
-export * from "/Volumes/Development/Lotrek/Projects/mapo-new/packages/@mapomodule/form/src/index.js";
+export { MapoFormOptions } from './module.mjs';
+export { UseFormFromSchemaOptions, useFormFromSchema } from '../dist/runtime/composables/useFormFromSchema.js';
+export { UseFormDraftOptions, useFormDraft } from '../dist/runtime/composables/useFormDraft.js';
+export { FocusTarget, useFocusMode } from '../dist/runtime/composables/useFocusMode.js';
+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, 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

@@ -1 +1,15 @@
-export * from "/Volumes/Development/Lotrek/Projects/mapo-new/packages/@mapomodule/form/src/index.js";
+export type { MapoFormOptions } from "./module.js";
+export { useFormFromSchema } from "./runtime/composables/useFormFromSchema.js";
+export type { UseFormFromSchemaOptions } from "./runtime/composables/useFormFromSchema.js";
+export { useFormDraft } from "./runtime/composables/useFormDraft.js";
+export type { UseFormDraftOptions } from "./runtime/composables/useFormDraft.js";
+export { useFocusMode } from "./runtime/composables/useFocusMode.js";
+export type { FocusTarget } from "./runtime/composables/useFocusMode.js";
+export { useUnsavedChangesGuard } from "./runtime/composables/useUnsavedChangesGuard.js";
+export type { UnsavedChangesGuardOptions } from "./runtime/composables/useUnsavedChangesGuard.js";
+export { when, whenAny, whenNot, matchesField, isOneOf, isNoneOf, isNotEmpty, isEmpty, greaterThan, lessThan, matches, } from "./runtime/composables/useProgressiveDisclosure.js";
+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, 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

@@ -0,0 +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,kBAAkB,EAClB,uBAAuB,EACvB,gBAAgB,EAChB,SAAS,EACT,SAAS,EACT,kBAAkB,EAClB,mBAAmB,EACnB,aAAa,EACb,oBAAoB,GACrB,MAAM,0BAA0B,CAAC"}

package/dist/index.mjs

@@ -1,34 +1,7 @@
-import { createJiti } from "file:///Volumes/Development/Lotrek/Projects/mapo-new/node_modules/.pnpm/jiti@2.6.1/node_modules/jiti/lib/jiti.mjs";
-
-const jiti = createJiti(import.meta.url, {
-  "interopDefault": true,
-  "alias": {
-    "@mapomodule/form": "/Volumes/Development/Lotrek/Projects/mapo-new/packages/@mapomodule/form"
-  },
-  "transformOptions": {
-    "babel": {
-      "plugins": []
-    }
-  }
-})
-
-/** @type {import("/Volumes/Development/Lotrek/Projects/mapo-new/packages/@mapomodule/form/src/index.js")} */
-const _module = await jiti.import("/Volumes/Development/Lotrek/Projects/mapo-new/packages/@mapomodule/form/src/index.ts");
-
-export const useFormFromSchema = _module.useFormFromSchema;
-export const useFormDraft = _module.useFormDraft;
-export const useFocusMode = _module.useFocusMode;
-export const useUnsavedChangesGuard = _module.useUnsavedChangesGuard;
-export const when = _module.when;
-export const whenAny = _module.whenAny;
-export const whenNot = _module.whenNot;
-export const matchesField = _module.matchesField;
-export const isOneOf = _module.isOneOf;
-export const isNoneOf = _module.isNoneOf;
-export const isNotEmpty = _module.isNotEmpty;
-export const isEmpty = _module.isEmpty;
-export const greaterThan = _module.greaterThan;
-export const lessThan = _module.lessThan;
-export const matches = _module.matches;
-export const flattenFieldGroups = _module.flattenFieldGroups;
-export const KnownFieldType = _module.KnownFieldType;
+export { useFormFromSchema } from '../dist/runtime/composables/useFormFromSchema.js';
+export { useFormDraft } from '../dist/runtime/composables/useFormDraft.js';
+export { useFocusMode } from '../dist/runtime/composables/useFocusMode.js';
+export { 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 { flattenFieldGroups } from '../dist/runtime/utils/flattenFieldGroups.js';
+export { KnownFieldType } from '../dist/runtime/types/index.js';

package/dist/module.d.mts

@@ -1,2 +1,20 @@
-export * from "/Volumes/Development/Lotrek/Projects/mapo-new/packages/@mapomodule/form/src/module.js";
-export { default } from "/Volumes/Development/Lotrek/Projects/mapo-new/packages/@mapomodule/form/src/module.js";
+import { NuxtModule } from '@nuxt/schema';
+import { PartialFieldRegistry } from '../dist/runtime/types/index.js';
+import '../dist/runtime/composables/useFormFromSchema.js';
+import '../dist/runtime/composables/useFormDraft.js';
+import '../dist/runtime/composables/useFocusMode.js';
+import '../dist/runtime/composables/useUnsavedChangesGuard.js';
+import '../dist/runtime/composables/useProgressiveDisclosure.js';
+import '../dist/runtime/utils/flattenFieldGroups.js';
+
+interface MapoFormOptions {
+    fields?: PartialFieldRegistry;
+    groups?: {
+        expanded?: boolean;
+    };
+    debounce?: number;
+}
+declare const _default: NuxtModule<MapoFormOptions, MapoFormOptions, false>;
+
+export { _default as default };
+export type { MapoFormOptions };

package/dist/module.d.ts

@@ -1,2 +1,12 @@
-export * from "/Volumes/Development/Lotrek/Projects/mapo-new/packages/@mapomodule/form/src/module.js";
-export { default } from "/Volumes/Development/Lotrek/Projects/mapo-new/packages/@mapomodule/form/src/module.js";
+import type { NuxtModule } from "@nuxt/schema";
+import type { PartialFieldRegistry } from "./runtime/types/index.js";
+export interface MapoFormOptions {
+    fields?: PartialFieldRegistry;
+    groups?: {
+        expanded?: boolean;
+    };
+    debounce?: number;
+}
+declare const _default: NuxtModule<MapoFormOptions, MapoFormOptions, false>;
+export default _default;
+//# sourceMappingURL=module.d.ts.map

package/dist/module.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"module.d.ts","sourceRoot":"","sources":["../src/module.ts"],"names":[],"mappings":"AAWA,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,wBAkOyC"}

package/dist/module.json

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

package/dist/module.mjs

@@ -1,18 +1,192 @@
-import { createJiti } from "file:///Volumes/Development/Lotrek/Projects/mapo-new/node_modules/.pnpm/jiti@2.6.1/node_modules/jiti/lib/jiti.mjs";
+import { defineNuxtModule, createResolver, hasNuxtModule, installModule, addPlugin, addTypeTemplate, extendPages, addComponent, addImports } from '@nuxt/kit';
 
-const jiti = createJiti(import.meta.url, {
-  "interopDefault": true,
-  "alias": {
-    "@mapomodule/form": "/Volumes/Development/Lotrek/Projects/mapo-new/packages/@mapomodule/form"
+const module$1 = defineNuxtModule({
+  meta: {
+    name: "@mapomodule/form",
+    configKey: "mapoForm"
   },
-  "transformOptions": {
-    "babel": {
-      "plugins": []
+  defaults: {
+    debounce: 300,
+    groups: { expanded: true }
+  },
+  async setup(options, nuxt) {
+    const resolver = createResolver(import.meta.url);
+    nuxt.options.build.transpile.push(resolver.resolve("./runtime"));
+    nuxt.options.imports.transform ??= {};
+    (nuxt.options.imports.transform.include ??= []).push(
+      /@mapomodule[\\/]form[\\/]/
+    );
+    if (!hasNuxtModule("@mapomodule/i18n")) {
+      await installModule(await resolver.resolvePath("@mapomodule/i18n"));
     }
+    nuxt.options.runtimeConfig.public.mapoForm = {
+      groups: { expanded: options.groups?.expanded ?? true },
+      debounce: options.debounce ?? 300,
+      // attrs is JSON-serialisable (plain objects) — merged in the plugin
+      fields: { attrs: options.fields?.attrs ?? {} }
+    };
+    addPlugin(resolver.resolve("./runtime/plugins/form-registry"));
+    addTypeTemplate({
+      filename: "types/mapo-form-registry.d.ts",
+      getContents: () => `
+import type { FieldRegistry } from '@mapomodule/form/types';
+declare module '#app' {
+  interface NuxtApp {
+    $mapoFormRegistry: FieldRegistry;
   }
-})
-
-/** @type {import("/Volumes/Development/Lotrek/Projects/mapo-new/packages/@mapomodule/form/src/module.js")} */
-const _module = await jiti.import("/Volumes/Development/Lotrek/Projects/mapo-new/packages/@mapomodule/form/src/module.ts");
+}
+declare module 'vue' {
+  interface ComponentCustomProperties {
+    $mapoFormRegistry: FieldRegistry;
+  }
+}
+export {};
+`
+    });
+    if (nuxt.options.dev) {
+      extendPages((pages) => {
+        pages.push({
+          name: "mapo-devtools-forms",
+          path: "/_mapo/devtools/forms",
+          file: resolver.resolve("./runtime/devtools/DevtoolsFormsPage.vue")
+        });
+      });
+      nuxt.hook(
+        "devtools:customTabs",
+        (tabs) => {
+          tabs.push({
+            name: "mapo-forms",
+            title: "Mapo Forms",
+            icon: "i-lucide-layout-list",
+            view: { type: "iframe", src: "/_mapo/devtools/forms" }
+          });
+        }
+      );
+    }
+    const shellComponents = [
+      "MapoForm",
+      "MapoFormField",
+      "MapoFormGroup",
+      "MapoFormTabs",
+      "MapoUnknownField",
+      "MapoFocusPortal"
+    ];
+    for (const name of shellComponents) {
+      addComponent({
+        name,
+        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",
+        from: resolver.resolve("./runtime/composables/useMapoForm")
+      },
+      {
+        name: "useCurrentLang",
+        from: resolver.resolve("./runtime/composables/useCurrentLang")
+      },
+      {
+        name: "provideCurrentLang",
+        from: resolver.resolve("./runtime/composables/useCurrentLang")
+      },
+      {
+        name: "useFormFromSchema",
+        from: resolver.resolve("./runtime/composables/useFormFromSchema")
+      },
+      {
+        name: "useFormDraft",
+        from: resolver.resolve("./runtime/composables/useFormDraft")
+      },
+      {
+        name: "useFocusMode",
+        from: resolver.resolve("./runtime/composables/useFocusMode")
+      },
+      {
+        name: "defineFormField",
+        from: resolver.resolve("./runtime/composables/defineFormField")
+      },
+      // Progressive disclosure DSL
+      {
+        name: "when",
+        from: resolver.resolve(
+          "./runtime/composables/useProgressiveDisclosure"
+        )
+      },
+      {
+        name: "whenAny",
+        from: resolver.resolve(
+          "./runtime/composables/useProgressiveDisclosure"
+        )
+      },
+      {
+        name: "whenNot",
+        from: resolver.resolve(
+          "./runtime/composables/useProgressiveDisclosure"
+        )
+      },
+      {
+        name: "matchesField",
+        from: resolver.resolve(
+          "./runtime/composables/useProgressiveDisclosure"
+        )
+      },
+      {
+        name: "isOneOf",
+        from: resolver.resolve(
+          "./runtime/composables/useProgressiveDisclosure"
+        )
+      },
+      {
+        name: "isNoneOf",
+        from: resolver.resolve(
+          "./runtime/composables/useProgressiveDisclosure"
+        )
+      },
+      {
+        name: "isNotEmpty",
+        from: resolver.resolve(
+          "./runtime/composables/useProgressiveDisclosure"
+        )
+      },
+      {
+        name: "isEmpty",
+        from: resolver.resolve(
+          "./runtime/composables/useProgressiveDisclosure"
+        )
+      },
+      {
+        name: "greaterThan",
+        from: resolver.resolve(
+          "./runtime/composables/useProgressiveDisclosure"
+        )
+      },
+      {
+        name: "lessThan",
+        from: resolver.resolve(
+          "./runtime/composables/useProgressiveDisclosure"
+        )
+      },
+      {
+        name: "matches",
+        from: resolver.resolve(
+          "./runtime/composables/useProgressiveDisclosure"
+        )
+      }
+    ]);
+  }
+});
 
-export default _module?.default ?? _module;
+export { module$1 as default };

package/dist/runtime/components/MapoFocusPortal.vue

@@ -0,0 +1,115 @@
+<script setup>
+import { computed, ref, onMounted, onUnmounted } from "vue";
+import { watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { useFocusMode } from "../composables/useFocusMode.js";
+import MapoForm from "./MapoForm.vue";
+const { t } = useI18n();
+const { focusTarget, exit } = useFocusMode();
+const isOpen = computed(() => focusTarget.value !== null);
+const canUseDocument = typeof document !== "undefined";
+function onKeyDown(e) {
+  if (e.key === "Escape" && isOpen.value) exit();
+}
+onMounted(() => window.addEventListener("keydown", onKeyDown));
+onUnmounted(() => window.removeEventListener("keydown", onKeyDown));
+watch(isOpen, (open) => {
+  if (!canUseDocument) return;
+  document.body.style.overflow = open ? "hidden" : "";
+});
+const localModel = ref({});
+watch(
+  () => focusTarget.value?.model,
+  (val) => {
+    if (val) localModel.value = { ...val };
+  },
+  { immediate: true }
+);
+function onUpdate(val) {
+  localModel.value = val;
+  focusTarget.value?.onUpdate(val);
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="mapo-focus-portal">
+      <div
+        v-if="isOpen && focusTarget"
+        class="mapo-focus-portal fixed inset-0 z-[9999] flex flex-col bg-white"
+        role="dialog"
+        aria-modal="true"
+      >
+        <!-- ── Header ────────────────────────────────────────────────────── -->
+        <div
+          class="flex shrink-0 items-center gap-3 border-b border-gray-200 px-6 py-3"
+        >
+          <!-- Breadcrumb -->
+          <nav class="flex min-w-0 flex-1 items-center gap-1 text-sm">
+            <template v-for="(crumb, i) in focusTarget.breadcrumb" :key="i">
+              <span
+                :class="
+  i < focusTarget.breadcrumb.length - 1 ? 'text-gray-400' : 'font-semibold text-gray-800'
+"
+                class="truncate"
+              >
+                {{ crumb }}
+              </span>
+              <UIcon
+                v-if="i < focusTarget.breadcrumb.length - 1"
+                name="i-lucide-chevron-right"
+                class="h-3.5 w-3.5 shrink-0 text-gray-300"
+              />
+            </template>
+          </nav>
+
+          <!-- Close button -->
+          <UButton
+            variant="ghost"
+            color="neutral"
+            icon="i-lucide-x"
+            :label="t('mapo.close')"
+            size="sm"
+            @click="exit"
+          />
+        </div>
+
+        <!-- ── Body: scrollable sub-form ────────────────────────────────── -->
+        <div class="min-h-0 flex-1 overflow-y-auto">
+          <div class="mx-auto max-w-3xl px-6 py-8">
+            <MapoForm
+              :model-value="localModel"
+              :fields="focusTarget.fields"
+              :errors="focusTarget.errors.value"
+              :languages="focusTarget.languages"
+              :current-lang="focusTarget.currentLang"
+              :registry="focusTarget.registry"
+              @update:model-value="onUpdate"
+            />
+          </div>
+        </div>
+
+        <!-- ── Footer ───────────────────────────────────────────────────── -->
+        <div
+          class="flex shrink-0 items-center justify-end gap-3 border-t border-gray-200 px-6 py-3"
+        >
+          <p class="mr-auto text-xs text-gray-400">
+            <UIcon name="i-lucide-keyboard" class="mr-1 inline h-3 w-3" />
+            Press
+            <kbd class="rounded bg-gray-100 px-1 py-0.5 font-mono text-xs"
+              >ESC</kbd
+            >
+            to return to the form
+          </p>
+          <UButton variant="ghost" color="neutral" @click="exit">
+            Close
+          </UButton>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.mapo-focus-portal-enter-active{transition:opacity .2s ease,transform .2s ease}.mapo-focus-portal-leave-active{transition:opacity .15s ease,transform .15s ease}.mapo-focus-portal-enter-from,.mapo-focus-portal-leave-to{opacity:0;transform:scale(.98)}.mapo-focus-portal-enter-to,.mapo-focus-portal-leave-from{opacity:1;transform:scale(1)}
+</style>

package/dist/runtime/components/MapoFocusPortal.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=MapoFocusPortal.vue.d.ts.map

package/dist/runtime/components/MapoFocusPortal.vue.d.ts.map

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