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

package/dist/runtime/utils/flattenFieldGroups.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flattenFieldGroups.d.ts","sourceRoot":"","sources":["../../../src/runtime/utils/flattenFieldGroups.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAE5D;;;;;;GAMG;AACH,MAAM,WAAW,oBAAoB,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC/D,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd,qFAAqF;IACrF,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACxB,yFAAyF;IACzF,MAAM,EAAE,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,GAAG,oBAAoB,CAAC,CAAC,CAAC,CAAC,CAAC;CAChE;AAWD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC5D,KAAK,EAAE,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,GAAG,oBAAoB,CAAC,CAAC,CAAC,CAAC,EAC7D,eAAe,CAAC,EAAE,MAAM,EACxB,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAChC,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAsBzB"}

package/dist/runtime/utils/flattenFieldGroups.js

@@ -0,0 +1,24 @@
+function isGroupDescriptor(item) {
+  return "fields" in item && Array.isArray(item.fields);
+}
+export function flattenFieldGroups(items, _inheritedGroup, _inheritedTab) {
+  const result = [];
+  for (const item of items) {
+    if (isGroupDescriptor(item)) {
+      const group = item.group ?? _inheritedGroup;
+      const tab = item.tab ?? _inheritedTab;
+      result.push(...flattenFieldGroups(item.fields, group, tab));
+    } else {
+      const field = item;
+      const merged = { ...field };
+      if (_inheritedGroup && !merged.group) {
+        Object.assign(merged, { group: _inheritedGroup });
+      }
+      if (_inheritedTab && !merged.tab) {
+        Object.assign(merged, { tab: _inheritedTab });
+      }
+      result.push(merged);
+    }
+  }
+  return result;
+}

package/dist/runtime/utils/tabVisibility.d.ts

@@ -0,0 +1,18 @@
+import type { AnyFieldDescriptor } from "../types/index.js";
+import type { TabEntry } from "../types/layout.js";
+/**
+ * Whether a field shows for this model: neither its `visible` predicate, which
+ * removes it, nor its `show` predicate, which hides it, keeps it out.
+ */
+export declare function isFieldShown(field: AnyFieldDescriptor, model: Record<string, unknown>): boolean;
+/**
+ * Whether a tab has a field to show for this model, in one of its groups (sub-tabs
+ * included) or in one of its child tabs.
+ */
+export declare function tabHasShownFields(tab: TabEntry, model: Record<string, unknown>): boolean;
+/**
+ * The tab to open among the ones shown: the tab the user picked, while it is
+ * shown; otherwise the first one. Empty when no tab is shown.
+ */
+export declare function pickActiveTab(shownTabs: TabEntry[], picked: string | null): string;
+//# sourceMappingURL=tabVisibility.d.ts.map

package/dist/runtime/utils/tabVisibility.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabVisibility.d.ts","sourceRoot":"","sources":["../../../src/runtime/utils/tabVisibility.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAEnD;;;GAGG;AACH,wBAAgB,YAAY,CAC1B,KAAK,EAAE,kBAAkB,EACzB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAC7B,OAAO,CAIT;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAC/B,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAC7B,OAAO,CAQT;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAC3B,SAAS,EAAE,QAAQ,EAAE,EACrB,MAAM,EAAE,MAAM,GAAG,IAAI,GACpB,MAAM,CAGR"}

package/dist/runtime/utils/tabVisibility.js

@@ -0,0 +1,18 @@
+export function isFieldShown(field, model) {
+  const removed = field.visible ? !field.visible({ model }) : false;
+  const hidden = field.show ? !field.show({ model }) : false;
+  return !removed && !hidden;
+}
+export function tabHasShownFields(tab, model) {
+  for (const group of tab.groups.values()) {
+    const fields = [...group.fields, ...[...group.subtabs.values()].flat()];
+    if (fields.some((field) => isFieldShown(field, model))) return true;
+  }
+  return [...tab.children.values()].some(
+    (child) => tabHasShownFields(child, model)
+  );
+}
+export function pickActiveTab(shownTabs, picked) {
+  const pickedTab = shownTabs.find((tab) => tab.name === picked);
+  return (pickedTab ?? shownTabs[0])?.name ?? "";
+}

package/dist/types.d.mts

@@ -1,13 +1,9 @@
-import type { ModuleHooks, ModuleRuntimeHooks, ModuleRuntimeConfig, ModulePublicRuntimeConfig } from './module.mjs'
+import type { NuxtModule } from '@nuxt/schema'
 
-declare module '#app' {
-  interface RuntimeNuxtHooks extends ModuleRuntimeHooks {}
-}
+import type { default as Module } from './module.mjs'
 
-declare module '@nuxt/schema' {
-  interface NuxtHooks extends ModuleHooks {}
-  interface RuntimeConfig extends ModuleRuntimeConfig {}
-  interface PublicRuntimeConfig extends ModulePublicRuntimeConfig {}
-}
+export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
 
-export * from "./module.mjs"
+export { default } from './module.mjs'
+
+export { type MapoFormOptions } from './module.mjs'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mapomodule/form",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-beta.11",
   "description": "Mapo declarative typed form engine and field components",
   "type": "module",
   "license": "MIT",
@@ -40,7 +40,6 @@
   "scripts": {
     "build": "nuxt-module-build build && vue-tsc -p tsconfig.build-types.json && node ../../../scripts/clean-empty-vue-dts.mjs dist",
     "dev": "nuxt-module-build build --stub --watch",
-    "prepare": "nuxt-module-build build --stub",
     "dev:prepare": "nuxt-module-build build --stub",
     "typecheck": "vue-tsc --noEmit",
     "lint": "eslint src",
@@ -48,14 +47,17 @@
   },
   "dependencies": {
     "@internationalized/date": "^3.7.0",
-    "@mapomodule/store": "2.0.0-beta.1",
-    "@mapomodule/utils": "2.0.0-beta.1",
+    "@mapomodule/i18n": "2.0.0-beta.3",
+    "@mapomodule/store": "2.0.0-beta.6",
+    "@mapomodule/utils": "2.0.0-beta.6",
+    "@tiptap/extension-image": "^2.11.5",
     "@tiptap/extension-link": "^2.11.5",
     "@tiptap/extension-underline": "^2.11.5",
     "@tiptap/starter-kit": "^2.11.5",
     "@tiptap/vue-3": "^2.11.5",
     "leaflet": "^1.9.4",
-    "vue-draggable-plus": "^0.6.0"
+    "vue-draggable-plus": "^0.6.0",
+    "vue-i18n": "^11.4.8"
   },
   "optionalDependencies": {
     "@types/leaflet": "^1.9.18"
@@ -68,10 +70,10 @@
     "@nuxt/kit": "4.4.2",
     "@nuxt/module-builder": "^1.0.2",
     "@nuxt/schema": "4.4.2",
-    "nuxt": "^4.4.2",
+    "nuxt": "^4.5.1",
     "vitest": "^3.2.0",
-    "vue": "^3.5.32",
-    "vue-router": "^5.0.4",
+    "vue": "^3.5.40",
+    "vue-router": "^5.2.0",
     "vue-tsc": "^3.3.4",
     "zod": "^3.23.8"
   }

package/src/__tests__/article.schema.json

@@ -0,0 +1,193 @@
+{
+  "type": "object",
+  "properties": {
+    "indexable": {
+      "type": "boolean",
+      "translatable": true,
+      "title": "Indexable"
+    },
+    "ordering": {
+      "type": "integer",
+      "maximum": 9223372036854775807,
+      "format": "int64",
+      "minimum": 0,
+      "title": "Ordering"
+    },
+    "is_public": { "type": "boolean", "readOnly": true, "title": "Is public" },
+    "meta": { "type": "object", "title": "Meta" },
+    "routerlink": { "type": "string", "readOnly": true, "title": "Routerlink" },
+    "og_url": {
+      "type": "string",
+      "nullable": true,
+      "maxLength": 200,
+      "translatable": true,
+      "title": "Og url"
+    },
+    "tags": {
+      "type": "relation",
+      "model": "camomilla.Tag",
+      "multiple": true,
+      "endpoint": "/api/camomilla/tags/",
+      "title": "Tags"
+    },
+    "published_at": {
+      "type": "string",
+      "format": "date-time",
+      "nullable": true,
+      "translatable": true,
+      "title": "Published at"
+    },
+    "keywords": {
+      "type": "string",
+      "nullable": true,
+      "maxLength": 200,
+      "translatable": true,
+      "title": "Keywords"
+    },
+    "breadcrumbs_title": {
+      "type": "string",
+      "nullable": true,
+      "maxLength": 128,
+      "translatable": true,
+      "title": "Breadcrumbs title"
+    },
+    "content": {
+      "type": "string",
+      "translatable": true,
+      "title": "Content",
+      "format": "textarea"
+    },
+    "identifier": {
+      "type": "string",
+      "nullable": true,
+      "maxLength": 200,
+      "title": "Identifier"
+    },
+    "template": {
+      "type": "string",
+      "nullable": true,
+      "maxLength": 500,
+      "title": "Template"
+    },
+    "description": {
+      "type": "string",
+      "nullable": true,
+      "translatable": true,
+      "title": "Description",
+      "format": "textarea"
+    },
+    "id": { "type": "integer", "readOnly": true, "title": "ID" },
+    "og_title": {
+      "type": "string",
+      "nullable": true,
+      "maxLength": 200,
+      "translatable": true,
+      "title": "Og title"
+    },
+    "canonical": {
+      "type": "string",
+      "nullable": true,
+      "maxLength": 200,
+      "translatable": true,
+      "title": "Canonical"
+    },
+    "author": {
+      "type": "relation",
+      "model": "auth.User",
+      "multiple": false,
+      "endpoint": "/api/camomilla/users/",
+      "nullable": true,
+      "title": "Author"
+    },
+    "og_image": {
+      "type": "relation",
+      "model": "camomilla.Media",
+      "multiple": false,
+      "endpoint": "/api/camomilla/media/",
+      "nullable": true,
+      "title": "Og image"
+    },
+    "parent_page": {
+      "type": "relation",
+      "model": "camomilla.Article",
+      "multiple": false,
+      "endpoint": "/api/camomilla/articles/",
+      "nullable": true,
+      "title": "Parent page"
+    },
+    "highlight_image": {
+      "type": "relation",
+      "model": "camomilla.Media",
+      "multiple": false,
+      "endpoint": "/api/camomilla/media/",
+      "nullable": true,
+      "title": "Highlight image"
+    },
+    "template_file": {
+      "type": "string",
+      "readOnly": true,
+      "title": "Template file"
+    },
+    "date_updated_at": {
+      "type": "string",
+      "format": "date-time",
+      "readOnly": true,
+      "title": "Date updated at"
+    },
+    "breadcrumbs": {
+      "type": "string",
+      "readOnly": true,
+      "title": "Breadcrumbs"
+    },
+    "og_description": {
+      "type": "string",
+      "nullable": true,
+      "translatable": true,
+      "title": "Og description",
+      "format": "textarea"
+    },
+    "template_data": {
+      "type": "object",
+      "translatable": true,
+      "title": "Template data"
+    },
+    "date_created": {
+      "type": "string",
+      "format": "date-time",
+      "readOnly": true,
+      "title": "Date created"
+    },
+    "autopermalink": {
+      "type": "boolean",
+      "translatable": true,
+      "title": "Autopermalink"
+    },
+    "title": {
+      "type": "string",
+      "nullable": true,
+      "maxLength": 200,
+      "translatable": true,
+      "title": "Title"
+    },
+    "permalink": {
+      "type": "string",
+      "translatable": true,
+      "title": "Permalink"
+    },
+    "og_type": {
+      "type": "string",
+      "nullable": true,
+      "maxLength": 200,
+      "translatable": true,
+      "title": "Og type"
+    },
+    "status": { "type": "string", "readOnly": true, "title": "Status" },
+    "deleted_at": {
+      "type": "string",
+      "format": "date-time",
+      "readOnly": true,
+      "nullable": true,
+      "title": "Deleted at"
+    }
+  }
+}

package/src/__tests__/camomillaRoundTrip.test.ts

@@ -0,0 +1,73 @@
+import { describe, expect, it } from "vitest";
+
+import type { AnyFieldDescriptor } from "../runtime/types/index.js";
+import { useFormFromSchema } from "../runtime/composables/useFormFromSchema";
+import articleSchema from "./article.schema.json";
+
+// Captured from camomilla: FormAutoSchema().map_serializer(ArticleSerializer()).
+// This is the contract between the two repos — if camomilla changes the shape,
+// this fails here rather than as an empty form in someone's browser.
+describe("camomilla OPTIONS schema -> mapo descriptors", () => {
+  const fields = useFormFromSchema(articleSchema as never);
+  const byKey = Object.fromEntries(fields.map((f) => [f.key, f]));
+  // `attrs` is not on every member of the AnyFieldDescriptor union.
+  const attrsOf = (f: AnyFieldDescriptor | undefined) =>
+    (f as { attrs?: Record<string, unknown> } | undefined)?.attrs;
+
+  it("produces a descriptor per field, not an empty array", () => {
+    expect(fields.length).toBeGreaterThan(20);
+  });
+
+  it("maps m2m relations with a usable endpoint", () => {
+    expect(byKey.tags.type).toBe("m2m");
+    expect(attrsOf(byKey.tags)?.endpoint).toBe("/api/camomilla/tags/");
+    expect(attrsOf(byKey.tags)?.multiple).toBe(true);
+  });
+
+  it("maps fk relations with a usable endpoint", () => {
+    expect(byKey.author.type).toBe("fks");
+    expect(attrsOf(byKey.author)?.endpoint).toBe("/api/camomilla/users/");
+  });
+
+  it("does not leave any relation with an empty endpoint", () => {
+    // An empty endpoint is the silent failure: MapoFksField rewrites "" to "/",
+    // fetches the API root, and swallows the error as an empty picker.
+    const relations = fields.filter(
+      (f) => f.type === "fks" || f.type === "m2m",
+    );
+    expect(relations.length).toBeGreaterThan(0);
+    for (const rel of relations) expect(attrsOf(rel)?.endpoint).toBeTruthy();
+  });
+
+  it("marks server-computed fields readonly rather than dropping them", () => {
+    // Without this they rendered as ordinary inputs and the backend discarded
+    // whatever was typed, with nothing to notice.
+    expect(byKey.id.readonly).toBe(true);
+    expect(byKey.status.readonly).toBe(true);
+    expect(byKey.date_created.readonly).toBe(true);
+    // An editable field must NOT be flagged.
+    expect(byKey.title.readonly).toBeUndefined();
+  });
+
+  it("respects the multiline hint for unbounded text", () => {
+    // A Django TextField has no maxLength, so the >255 heuristic never fires.
+    expect(byKey.content.type).toBe("textarea");
+    expect(byKey.description.type).toBe("textarea");
+  });
+
+  it("carries labels", () => {
+    expect(byKey.title.label).toBe("Title");
+  });
+
+  it("types scalars correctly", () => {
+    expect(byKey.title.type).toBe("text");
+    expect(byKey.published_at.type).toBe("datetime");
+  });
+
+  it("has no translations envelope and no localized twins", () => {
+    expect(byKey.translations).toBeUndefined();
+    expect(fields.filter((f) => /_(it|en)$/.test(String(f.key)))).toHaveLength(
+      0,
+    );
+  });
+});

package/src/__tests__/tabVisibility.test.ts

@@ -0,0 +1,102 @@
+import { describe, expect, it } from "vitest";
+import type { AnyFieldDescriptor } from "../runtime/types/index.js";
+import type { TabEntry } from "../runtime/types/layout.js";
+import {
+  isFieldShown,
+  pickActiveTab,
+  tabHasShownFields,
+} from "../runtime/utils/tabVisibility.js";
+
+type Predicates = Pick<AnyFieldDescriptor, "visible" | "show">;
+
+const field = (key: string, predicates: Predicates = {}) =>
+  ({ key, type: "text", ...predicates }) as AnyFieldDescriptor;
+
+/** A tab holding its fields in one flat group, as MapoForm builds it. */
+const tab = (
+  name: string,
+  fields: AnyFieldDescriptor[],
+  children: TabEntry[] = [],
+): TabEntry => ({
+  name,
+  groups: new Map([["__flat__", { fields, subtabs: new Map() }]]),
+  children: new Map(children.map((child) => [child.name, child])),
+});
+
+// Like a page whose content fields depend on the template picked in the sidebar.
+const hasTemplate = ({ model }: { model: Record<string, unknown> }) =>
+  Boolean(model.template);
+
+describe("isFieldShown", () => {
+  it("shows a field without predicates", () => {
+    expect(isFieldShown(field("title"), {})).toBe(true);
+  });
+
+  it("hides a field that `visible` removes", () => {
+    const body = field("body", { visible: hasTemplate });
+    expect(isFieldShown(body, { template: "" })).toBe(false);
+    expect(isFieldShown(body, { template: "Home" })).toBe(true);
+  });
+
+  it("hides a field that `show` hides", () => {
+    const body = field("body", { show: hasTemplate });
+    expect(isFieldShown(body, { template: "" })).toBe(false);
+  });
+});
+
+describe("tabHasShownFields", () => {
+  it("is false while every field is hidden and true once one shows", () => {
+    const general = tab("__default__", [
+      field("body", { visible: hasTemplate }),
+      field("intro", { visible: hasTemplate }),
+    ]);
+    expect(tabHasShownFields(general, { template: "" })).toBe(false);
+    expect(tabHasShownFields(general, { template: "Home" })).toBe(true);
+  });
+
+  it("counts the fields of a sub-tab", () => {
+    const seo: TabEntry = {
+      name: "SEO",
+      groups: new Map([
+        [
+          "meta",
+          { fields: [], subtabs: new Map([["basic", [field("meta_title")]]]) },
+        ],
+      ]),
+      children: new Map(),
+    };
+    expect(tabHasShownFields(seo, {})).toBe(true);
+  });
+
+  it("counts the fields of a child tab", () => {
+    const settings = tab(
+      "Settings",
+      [field("legacy", { visible: () => false })],
+      [tab("SEO", [field("meta_title")])],
+    );
+    expect(tabHasShownFields(settings, {})).toBe(true);
+  });
+});
+
+describe("pickActiveTab", () => {
+  const general = tab("__default__", []);
+  const seo = tab("SEO", []);
+
+  it("opens the first shown tab until the user picks one", () => {
+    expect(pickActiveTab([general, seo], null)).toBe("__default__");
+    // The first tab is hidden: the next one opens, not an empty panel.
+    expect(pickActiveTab([seo], null)).toBe("SEO");
+  });
+
+  it("keeps the picked tab while it is shown", () => {
+    expect(pickActiveTab([general, seo], "SEO")).toBe("SEO");
+  });
+
+  it("falls back to the first shown tab while the picked one is hidden", () => {
+    expect(pickActiveTab([seo], "__default__")).toBe("SEO");
+  });
+
+  it("is empty when no tab is shown", () => {
+    expect(pickActiveTab([], null)).toBe("");
+  });
+});

package/src/__tests__/useFormFromSchema.test.ts

@@ -10,6 +10,8 @@ type DescriptorWithAttrs = {
   };
   fields?: unknown[];
   visible?: (ctx: { model: Record<string, unknown> }) => boolean;
+  readonly?: boolean;
+  translatable?: boolean;
 };
 
 // Pydantic v2 / DRF Spectacular style schema.
@@ -413,3 +415,25 @@ describe("useFormFromSchema — number attrs", () => {
     expect(typed?.attrs?.max).toBe(5);
   });
 });
+
+describe("useFormFromSchema — schema flags", () => {
+  // Camomilla's OPTIONS schema marks per-language properties. Dropping the flag
+  // renders them as plain fields under language tabs that no longer bind them.
+  const flagged: JSONSchema = {
+    type: "object",
+    properties: {
+      title: { type: "string", title: "Titolo", translatable: true },
+      identifier: { type: "string", title: "Identifier" },
+      created_at: { type: "string", format: "date-time", readOnly: true },
+    },
+  };
+
+  it("carries translatable and readOnly onto the descriptor", () => {
+    const fields = useFormFromSchema(flagged);
+    const by = (k: string) =>
+      fields.find((f) => f.key === k) as DescriptorWithAttrs | undefined;
+    expect(by("title")?.translatable).toBe(true);
+    expect(by("identifier")?.translatable).toBeUndefined();
+    expect(by("created_at")?.readonly).toBe(true);
+  });
+});

package/src/__tests__/useMapoForm.test.ts

@@ -10,6 +10,11 @@ vi.mock("@mapomodule/store/runtime/stores/auth", () => ({
 vi.mock("@mapomodule/store/runtime/stores/snack", () => ({
   useSnackStore: () => ({ show: vi.fn() }),
 }));
+// Pulls in `nuxt/app`, which cannot resolve outside a Nuxt build. Assertions
+// below match on message keys, so echoing the key back is the useful stub.
+vi.mock("@mapomodule/i18n/runtime/composables/useMapoT", () => ({
+  useMapoT: () => (key: string) => key,
+}));
 
 // provide/inject called outside setup() emits a warning; silence it in tests.
 beforeEach(() => {

package/src/index.ts

@@ -42,7 +42,12 @@ export type {
   MapDescriptor,
   RepeaterDescriptor,
   MediaDescriptor,
+  MediaM2mDescriptor,
+  EnhancedMediaDescriptor,
   CustomDescriptor,
+  MediaLink,
+  MediaItem,
+  EnhancedMediaValue,
   FieldComponentEntry,
   FieldRegistry,
   PartialFieldRegistry,

package/src/module.ts

@@ -6,6 +6,8 @@ import {
   createResolver,
   addImports,
   extendPages,
+  hasNuxtModule,
+  installModule,
 } from "@nuxt/kit";
 import type { NuxtModule } from "@nuxt/schema";
 import type { PartialFieldRegistry } from "./runtime/types/index.js";
@@ -30,6 +32,23 @@ export default defineNuxtModule<MapoFormOptions>({
   async setup(options, nuxt) {
     const resolver = createResolver(import.meta.url);
 
+    // In consuming apps this runtime lives inside node_modules, where Nuxt
+    // skips auto-import injection by default (workspace apps are unaffected:
+    // pnpm symlinks resolve outside node_modules). Opt back in and transpile
+    // the runtime for the SSR build.
+    nuxt.options.build.transpile.push(resolver.resolve("./runtime"));
+    nuxt.options.imports.transform ??= {};
+    (nuxt.options.imports.transform.include ??= []).push(
+      /@mapomodule[\\/]form[\\/]/,
+    );
+
+    // Form components render user-facing strings through vue-i18n
+    // (`useI18n().t("mapo...")`). @mapomodule/i18n provides the catalogs and
+    // installs @nuxtjs/i18n unless the app manages it itself.
+    if (!hasNuxtModule("@mapomodule/i18n")) {
+      await installModule(await resolver.resolvePath("@mapomodule/i18n"));
+    }
+
     // Only serializable values can go into runtimeConfig.public.
     // `mapping` and `accessor` contain functions → not SSR-serializable.
     // To extend mapping/accessor, use an app plugin that accesses $mapoFormRegistry:
@@ -111,6 +130,21 @@ export {};
       });
     }
 
+    // Media field components — registered so consumers can use them directly,
+    // and so MapoMediaUnavailable resolves inside them.
+    const mediaFieldComponents = [
+      "MapoMediaField",
+      "MapoMediaM2mField",
+      "MapoEnhancedMediaField",
+      "MapoMediaUnavailable",
+    ];
+    for (const name of mediaFieldComponents) {
+      addComponent({
+        name,
+        filePath: resolver.resolve(`./runtime/components/fields/${name}.vue`),
+      });
+    }
+
     // Public auto-imported composables
     addImports([
       {

package/src/runtime/components/MapoFocusPortal.vue

@@ -11,9 +11,11 @@
  */
 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);
@@ -88,7 +90,7 @@ function onUpdate(val: Record<string, unknown>) {
             variant="ghost"
             color="neutral"
             icon="i-lucide-x"
-            label="Close"
+            :label="t('mapo.close')"
             size="sm"
             @click="exit"
           />