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

package/README.md

@@ -1,44 +1,28 @@
 # @mapomodule/form
 
-Form engine for Mapo v2 — descriptor-driven, typesafe, headless-ready admin forms for Nuxt 4 + Django/DRF.
-
-## 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, 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
-- **JSON Schema bridge**: `useFormFromSchema()` generates descriptors from Pydantic v2 / DRF-spectacular schemas
-- **Multilingual fields**: `translatable: true` writes to `model.translations[lang].field` automatically
-- **Client validation**: `validate(value, ctx)` per descriptor + `required` shorthand
-- **Tab/group layout**: declare `tab` and `group` per field — tabs render automatically (incl. nested tabs), groups are collapsible. Tab panels expose `tab.<name>.before/after`, full override, `.label` and `tab-bar-end` slots
-- **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
-
-`@mapomodule/form` is included automatically when you install `mapomodule` (recommended). No additional module entry is needed.
-
-```ts
-// nuxt.config.ts
-export default defineNuxtConfig({
-  modules: ["@nuxt/ui", "mapomodule"],
-  mapo: {
-    form: {
-      // optional — global field registry defaults
-    },
-  },
-});
+The form engine of Mapo. A form is an array of `FieldDescriptor` objects; the engine resolves each descriptor's `type` through a field registry to a lazily loaded component, and renders the result in `MapoDetail` (from `@mapomodule/uikit`), in `MapoForm`, or headless through `useMapoForm()`.
+
+## Installation
+
+Installed by the meta-package [`mapomodule`](https://www.npmjs.com/package/mapomodule), which configures it under `mapo.form`. On its own it reads the `mapoForm` key:
+
+```bash
+pnpm add @mapomodule/form@next
 ```
 
+| Option            | Default | Description                                                                              |
+| ----------------- | ------- | ---------------------------------------------------------------------------------------- |
+| `fields.attrs`    | `{}`    | Default `attrs` per field type, merged into the registry defaults                        |
+| `groups.expanded` | `true`  | Whether collapsible field groups start open                                              |
+| `debounce`        | `300`   | Milliseconds before a field change reaches the model; `descriptor.debounce` overrides it |
+
+Mapo v2 is published on the `next` dist-tag while it is in beta.
+
 ## Quick start
 
 ```vue
 <script setup lang="ts">
-import type { FieldDescriptor } from "@mapomodule/form";
+import type { FieldDescriptor } from "mapomodule/types";
 
 interface Article {
   title: string;
@@ -61,96 +45,30 @@ const fields: FieldDescriptor<Article>[] = [
 </template>
 ```
 
-The `registry` prop is optional — `<MapoForm>` falls back to the global `$mapoFormRegistry` provided by this module's plugin. Pass it explicitly only when you want to swap the registry for a single form.
-
-## Field types
-
-| Type                         | Component             | Notes                                                       |
-| ---------------------------- | --------------------- | ----------------------------------------------------------- |
-| `text`                       | `UInput`              |                                                             |
-| `textarea`                   | `UTextarea`           |                                                             |
-| `number`                     | `UInput[type=number]` |                                                             |
-| `boolean`                    | `UCheckbox`           |                                                             |
-| `switch`                     | `USwitch`             |                                                             |
-| `color`                      | `UInput[type=color]`  |                                                             |
-| `slider`                     | `USlider`             |                                                             |
-| `file`                       | `MapoFileField`       | Current-file preview, image thumbnail, remove button        |
-| `select`                     | `USelectMenu`         | requires `attrs.options`                                    |
-| `date` / `datetime` / `time` | `MapoDateField` etc.  | ISO string in model; `tz: 'naive' \| 'utc'` for `datetime`  |
-| `fks`                        | `MapoFksField`        | FK autocomplete; `attrs.endpoint` required                  |
-| `m2m`                        | `MapoFksField`        | Multi-select autocomplete, removable chips                  |
-| `editor`                     | `MapoWygEditor`       | Tiptap v2; sanitized output, safe `Link` validator          |
-| `seo`                        | `MapoSeoPreview`      | Title / description with live SERP preview                  |
-| `map`                        | `MapoMapField`        | Leaflet, `{ lat, lng }` in model, SSR-safe via `ClientOnly` |
-| `repeater`                   | `MapoRepeater`        | Nested fields, drag-and-drop, undo stack, templates         |
-
-## JSON Schema → Form
-
-```ts
-const schema = await $fetch("/api/schema/");
-const fields = useFormFromSchema(schema, {
-  exclude: ["id", "created_at"],
-  overrides: {
-    body: { type: "editor", translatable: true },
-  },
-});
-```
+The built-in types cover text and numbers, choices, dates and times, files, relations (`fks`, `m2m`), rich text, SEO preview, maps, repeaters and media pickers. The media pickers drive the Media Manager of `@mapomodule/uikit` and show a notice when it is not installed. A `type` the registry does not know renders `MapoUnknownField` instead of breaking the form.
 
-## Headless
+## What you get
 
-```ts
-const form = useMapoForm({ model, fields, registry: $mapoFormRegistry });
+Components and composables are auto-imported.
 
-// form.isDirty, form.isLoading, form.getPatch(), form.submit(handler)
-```
-
-The headless composable still requires the registry explicitly — `useNuxtApp()` is not available in every context where you might want to drive a form (tests, storybook, server-side preview).
-
-## Draft persistence (headless)
+| API                                                        | Purpose                                                                                                                                                                                     |
+| ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `MapoForm`                                                 | Renders a `FieldDescriptor[]` on your model, with tabs, collapsible groups, a responsive grid and slots                                                                                     |
+| `useMapoForm(options)`                                     | The same engine headless: dirty state, client validation, `getPatch()`, `submit()`, drafts. Pass `registry` explicitly                                                                      |
+| `defineFormField(type, component, opts?)`                  | Registers a custom field type from a plugin: a component or a lazy `import()`, with optional default `attrs` and accessor. Re-registering a type warns unless you pass `{ override: true }` |
+| `useFormFromSchema(schema, opts?)`                         | Builds descriptors from a JSON Schema, such as a DRF-spectacular or Pydantic schema                                                                                                         |
+| `when`, `whenAny`, `whenNot`, `matchesField`, `isOneOf`, … | Build `visible` conditions declaratively                                                                                                                                                    |
+| `useFormDraft`, `useFocusMode`, `useCurrentLang`           | Draft autosave, focus mode, the language being edited                                                                                                                                       |
+| `$mapoFormRegistry`                                        | The global registry: type → component, default `attrs`, accessor                                                                                                                            |
 
-```ts
-const form = useMapoForm({
-  model,
-  fields,
-  registry: $mapoFormRegistry,
-  draftKey: `article:${route.params.id}`,
-});
-
-// After fetch:
-form.checkDraft(); // populates form.draftBanner if a draft is found
-```
-
-`form.draftBanner.value` exposes `{ savedAt, restore(), discard() }`. On `submit()` success the draft is cleared automatically. When using `<MapoDetail :draft="true">`, all of this is handled for you.
-
-## Custom fields
-
-The recommended way to register a custom field is the typed `defineFormField()` helper, called from a Nuxt plugin:
-
-```ts
-// app/plugins/my-fields.ts
-export default defineNuxtPlugin(() => {
-  defineFormField("rich-text", () => import("~/components/RichText.vue"), {
-    attrs: { rows: 6 },
-  });
-});
-```
-
-Plugins in `app/plugins/` run after module plugins, so `$mapoFormRegistry` is always available. Re-registering an existing type prints a development warning unless you pass `{ override: true }` explicitly.
-
-Any component with `modelValue` + `descriptor` + `errors` + `readonly` props works as a field.
+A custom field is any component that accepts the `modelValue`, `descriptor`, `errors`, `readonly` and `disabled` props and emits `update:modelValue`.
 
 ## Documentation
 
-Full docs: [Form Engine — Quickstart](../../../docs/uikit/form/index.md)
-
-- [All field types](../../../docs/uikit/form/add-fields.md)
-- [Validation](../../../docs/uikit/form/validation.md)
-- [i18n / multilingual fields](../../../docs/uikit/form/i18n.md)
-- [`useMapoForm()` headless](../../../docs/uikit/form/composable.md)
-- [Custom fields & registry](../../../docs/uikit/form/custom-fields.md)
-- [Slot system](../../../docs/uikit/form/slots.md)
-- [JSON Schema bridge](../../../docs/uikit/form/schema-to-form.md)
-
-## License
-
-MIT
+- [Form Engine](https://lotrekagency.github.io/mapo-new/uikit/form/): your first form, tabs and groups, how the engine works
+- [All field types](https://lotrekagency.github.io/mapo-new/uikit/form/add-fields)
+- [Field registry](https://lotrekagency.github.io/mapo-new/uikit/form/registry) and [Custom fields](https://lotrekagency.github.io/mapo-new/uikit/form/custom-fields)
+- [Validation](https://lotrekagency.github.io/mapo-new/uikit/form/validation), [Multilingual fields](https://lotrekagency.github.io/mapo-new/uikit/form/i18n), [Draft autosave](https://lotrekagency.github.io/mapo-new/uikit/form/draft), [Progressive Disclosure](https://lotrekagency.github.io/mapo-new/uikit/form/progressive-disclosure)
+- [`useMapoForm()` reference](https://lotrekagency.github.io/mapo-new/uikit/form/composable)
+- [From JSON Schema to form](https://lotrekagency.github.io/mapo-new/uikit/form/schema-to-form)
+- [Form Engine — Component API Reference](https://lotrekagency.github.io/mapo-new/uikit/form/api)

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

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

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

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

package/dist/module.json

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

package/dist/runtime/components/MapoForm.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed, useSlots, watchEffect, inject, onUnmounted } from "vue";
 import { useNuxtApp, useRuntimeConfig } from "#app";
+import { useI18n } from "vue-i18n";
 import { useMapoForm, injectMapoForm } from "../composables/useMapoForm.js";
 import { provideCurrentLang } from "../composables/useCurrentLang.js";
 import MapoFormGroup from "./MapoFormGroup.vue";
@@ -73,6 +74,8 @@ const fieldSlotNames = computed(
   )
 );
 provideCurrentLang(currentLangRef);
+const { t } = useI18n();
+const DEFAULT_TAB = "__default__";
 function getOrCreateTab(map, name) {
   if (!map.has(name)) {
     map.set(name, { name, groups: /* @__PURE__ */ new Map(), children: /* @__PURE__ */ new Map() });
@@ -83,7 +86,7 @@ const grouped = computed(() => {
   const tabs = /* @__PURE__ */ new Map();
   for (const field of props.fields) {
     const rawTab = field.tab;
-    const tabPath = !rawTab ? ["__default__"] : Array.isArray(rawTab) ? rawTab : rawTab.split("/");
+    const tabPath = !rawTab ? [DEFAULT_TAB] : Array.isArray(rawTab) ? rawTab : rawTab.split("/");
     const groupName = field.group ?? "__flat__";
     let currentMap = tabs;
     for (let i = 0; i < tabPath.length - 1; i++) {
@@ -104,14 +107,20 @@ const grouped = computed(() => {
       grp.fields.push(field);
     }
   }
+  const defaultTab = tabs.get(DEFAULT_TAB);
+  if (defaultTab) defaultTab.label = t("mapo.form.defaultTab");
   return tabs;
 });
 const hasTabs = computed(() => {
   const keys = [...grouped.value.keys()];
-  return keys.length > 1 || keys.length === 1 && keys[0] !== "__default__";
+  const hasFields = keys.length > 0;
+  if (!hasFields) return false;
+  const hasSeveralTabs = keys.length > 1;
+  const hasNamedTab = keys[0] !== DEFAULT_TAB;
+  return hasSeveralTabs || hasNamedTab;
 });
 const defaultGroups = computed(
-  () => grouped.value.get("__default__")?.groups ?? /* @__PURE__ */ new Map()
+  () => grouped.value.get(DEFAULT_TAB)?.groups ?? /* @__PURE__ */ new Map()
 );
 const tabList = computed(() => [...grouped.value.values()]);
 </script>

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

@@ -1 +1 @@
-{"version":3,"file":"MapoForm.vue.d.ts","sourceRoot":"","sources":["../../../src/runtime/components/MapoForm.vue"],"names":[],"mappings":"AA2PA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE/B,OAAO,KAAK,EACV,kBAAkB,EAClB,aAAa,EAEd,MAAM,mBAAmB,CAAC;AAQ3B,QAAA,MAAM,YAAY,GAAK,CAAC,SAAS,MAAM,EACtC,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WAmUO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;oBAjUxC,CAAC;gBACL,kBAAkB,CAAC,CAAC,CAAC,EAAE;iBACtB,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC;oBACrB,MAAM,EAAE;sBACN,MAAM;mBACT,OAAO;oBACN,OAAO;QACnB;;;;WAIG;mBACQ,aAAa;;;KAqT+D,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,OAAO,KAAK,EAAE,gBAAgB;;;;;;;;;;MAAsB,KAAK,IAAI;WACxE,GAAG;kCAnR+B,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,OAAO;;EAuRrE,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAI,CAAC;wBACvD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}
+{"version":3,"file":"MapoForm.vue.d.ts","sourceRoot":"","sources":["../../../src/runtime/components/MapoForm.vue"],"names":[],"mappings":"AAwQA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAG/B,OAAO,KAAK,EACV,kBAAkB,EAClB,aAAa,EAEd,MAAM,mBAAmB,CAAC;AAQ3B,QAAA,MAAM,YAAY,GAAK,CAAC,SAAS,MAAM,EACtC,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WA+UO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;oBA7UxC,CAAC;gBACL,kBAAkB,CAAC,CAAC,CAAC,EAAE;iBACtB,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC;oBACrB,MAAM,EAAE;sBACN,MAAM;mBACT,OAAO;oBACN,OAAO;QACnB;;;;WAIG;mBACQ,aAAa;;;KAiU+D,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,OAAO,KAAK,EAAE,gBAAgB;;;;;;;;;;MAAsB,KAAK,IAAI;WACxE,GAAG;kCA/R+B,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,OAAO;;EAmSrE,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAI,CAAC;wBACvD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}

package/dist/runtime/components/MapoFormTabs.vue

@@ -2,14 +2,27 @@
 import { ref, computed } from "vue";
 import { useI18n } from "vue-i18n";
 import { injectMapoForm } from "../composables/useMapoForm.js";
+import { pickActiveTab, tabHasShownFields } from "../utils/tabVisibility.js";
 import MapoFormGroup from "./MapoFormGroup.vue";
 import MapoFormFlatSection from "./MapoFormFlatSection.vue";
 const { t } = useI18n();
 const props = defineProps({
   tabs: { type: Array, required: true }
 });
-defineSlots();
-const activeTab = ref(props.tabs[0]?.name ?? "");
+const slots = defineSlots();
+const form = injectMapoForm();
+function tabHasContent(tab) {
+  const hasPanelSlot = Boolean(slots[`tab.${tab.name}`]);
+  const hasBeforeSlot = Boolean(slots[`tab.${tab.name}.before`]);
+  const hasAfterSlot = Boolean(slots[`tab.${tab.name}.after`]);
+  if (hasPanelSlot || hasBeforeSlot || hasAfterSlot) return true;
+  return tabHasShownFields(tab, form.model.value);
+}
+const shownTabs = computed(() => props.tabs.filter(tabHasContent));
+const pickedTab = ref(null);
+const activeTab = computed(
+  () => pickActiveTab(shownTabs.value, pickedTab.value)
+);
 function tabHasErrors(tab, errorKeys) {
   const directError = [...tab.groups.values()].some(
     (g) => g.fields.some((f) => errorKeys.has(f.key))
@@ -19,7 +32,6 @@ function tabHasErrors(tab, errorKeys) {
     (child) => tabHasErrors(child, errorKeys)
   );
 }
-const form = injectMapoForm();
 const tabsWithErrors = computed(() => {
   const errorKeys = new Set(Object.keys(form.errors.value));
   return new Set(
@@ -33,14 +45,14 @@ const tabsWithErrors = computed(() => {
     <!-- Tab bar -->
     <div class="flex gap-1 border-b border-gray-200 pb-px">
       <button
-        v-for="tab in tabs"
+        v-for="tab in shownTabs"
         :key="tab.name"
         type="button"
         class="relative flex items-center gap-1.5 rounded-t px-4 py-2 text-sm font-medium transition-colors"
         :class="[
   activeTab === tab.name ? 'border-b-2 border-primary-500 text-primary-600' : 'text-gray-500 hover:bg-gray-50 hover:text-gray-700'
 ]"
-        @click="activeTab = tab.name"
+        @click="pickedTab = tab.name"
       >
         <slot :name="`tab.${tab.name}.label`" :tab="tab">
           {{ tab.label ?? tab.name }}

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

@@ -1 +1 @@
-{"version":3,"file":"MapoFormTabs.vue.d.ts","sourceRoot":"","sources":["../../../src/runtime/components/MapoFormTabs.vue"],"names":[],"mappings":"AA4HA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAOnD,KAAK,WAAW,GAAG;IAAE,IAAI,EAAE,QAAQ,EAAE,CAAA;CAAE,CAAC;AAGxC,KAAK,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAsO3C,QAAA,MAAM,UAAU,kSAEd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"MapoFormTabs.vue.d.ts","sourceRoot":"","sources":["../../../src/runtime/components/MapoFormTabs.vue"],"names":[],"mappings":"AAgJA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAQnD,KAAK,WAAW,GAAG;IAAE,IAAI,EAAE,QAAQ,EAAE,CAAA;CAAE,CAAC;AAGxC,KAAK,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AA2P3C,QAAA,MAAM,UAAU,kSAEd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

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

@@ -35,10 +35,12 @@ function clear() {
     <MapoMediaUnavailable v-if="!available" />
 
     <template v-else>
-      <!-- Selected media preview -->
+      <!-- Selected media preview. It and the trigger below paint their own
+           surface, like an input: `soft` buttons and transparent cards take
+           the page background and vanish on a tinted page. -->
       <div
         v-if="current"
-        class="flex items-center gap-3 rounded-lg border border-default p-2"
+        class="flex items-center gap-3 rounded-lg border border-default bg-default p-2"
       >
         <MapoMediaPreview :media="current" size="sm" />
         <div class="flex-1 min-w-0">
@@ -64,7 +66,7 @@ function clear() {
         v-if="!readonly && !disabled"
         :icon="current ? 'i-lucide-refresh-cw' : 'i-lucide-image-plus'"
         size="sm"
-        variant="soft"
+        variant="outline"
         color="neutral"
         :block="!current"
         @click="dialogOpen = true"

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

@@ -1 +1 @@
-{"version":3,"file":"MapoMediaField.vue.d.ts","sourceRoot":"","sources":["../../../../src/runtime/components/fields/MapoMediaField.vue"],"names":[],"mappings":"AA6GA,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;AAgOF,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"MapoMediaField.vue.d.ts","sourceRoot":"","sources":["../../../../src/runtime/components/fields/MapoMediaField.vue"],"names":[],"mappings":"AA+GA,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;AAiOF,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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

@@ -77,12 +77,13 @@ function onDragEnd() {
         </div>
       </div>
 
-      <!-- Add button -->
+      <!-- Add button: outlined like MapoMediaField's trigger, so it keeps its
+           own surface on a tinted page. -->
       <UButton
         v-if="!readonly && !disabled"
         icon="i-lucide-plus"
         size="sm"
-        variant="soft"
+        variant="outline"
         color="neutral"
         @click="dialogOpen = true"
       >

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

@@ -1 +1 @@
-{"version":3,"file":"MapoMediaM2mField.vue.d.ts","sourceRoot":"","sources":["../../../../src/runtime/components/fields/MapoMediaM2mField.vue"],"names":[],"mappings":"AAuIA,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;AA+QF,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"MapoMediaM2mField.vue.d.ts","sourceRoot":"","sources":["../../../../src/runtime/components/fields/MapoMediaM2mField.vue"],"names":[],"mappings":"AAwIA,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;AA+QF,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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

@@ -98,10 +98,13 @@ function onImageConfirm(selection) {
 </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' : ''
 ]"
   >
@@ -238,15 +241,18 @@ function onImageConfirm(selection) {
     >
       {{ 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"
-  />
+    <!-- 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/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":"AAqTA,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;AA0pBF,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":"AA2TA,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;AA6pBF,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mapomodule/form",
-  "version": "2.0.0-beta.10",
+  "version": "2.0.0-beta.11",
   "description": "Mapo declarative typed form engine and field components",
   "type": "module",
   "license": "MIT",
@@ -47,9 +47,9 @@
   },
   "dependencies": {
     "@internationalized/date": "^3.7.0",
-    "@mapomodule/i18n": "2.0.0-beta.2",
+    "@mapomodule/i18n": "2.0.0-beta.3",
     "@mapomodule/store": "2.0.0-beta.6",
-    "@mapomodule/utils": "2.0.0-beta.5",
+    "@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",
@@ -57,7 +57,7 @@
     "@tiptap/vue-3": "^2.11.5",
     "leaflet": "^1.9.4",
     "vue-draggable-plus": "^0.6.0",
-    "vue-i18n": "^11.4.0"
+    "vue-i18n": "^11.4.8"
   },
   "optionalDependencies": {
     "@types/leaflet": "^1.9.18"

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/runtime/components/MapoForm.vue

@@ -2,6 +2,7 @@
 import { computed, useSlots, watchEffect, inject, onUnmounted } from "vue";
 import type { Ref } from "vue";
 import { useNuxtApp, useRuntimeConfig } from "#app";
+import { useI18n } from "vue-i18n";
 import type {
   AnyFieldDescriptor,
   FieldRegistry,
@@ -135,6 +136,12 @@ provideCurrentLang(currentLangRef);
 
 // ─── Group fields by tab/group ───────────────────────────────────────────────
 
+const { t } = useI18n();
+
+// Fields without a `tab` go here. It becomes a tab of its own only when other
+// fields have one, and then it shows as "General" (`mapo.form.defaultTab`).
+const DEFAULT_TAB = "__default__";
+
 function getOrCreateTab(map: Map<string, TabEntry>, name: string): TabEntry {
   if (!map.has(name)) {
     map.set(name, { name, groups: new Map(), children: new Map() });
@@ -151,7 +158,7 @@ const grouped = computed<Map<string, TabEntry>>(() => {
     // Normalise: 'a/b', ['a','b'], or 'a' all become a string[]
     const rawTab = field.tab;
     const tabPath: string[] = !rawTab
-      ? ["__default__"]
+      ? [DEFAULT_TAB]
       : Array.isArray(rawTab)
         ? rawTab
         : rawTab.split("/");
@@ -179,17 +186,23 @@ const grouped = computed<Map<string, TabEntry>>(() => {
     }
   }
 
+  const defaultTab = tabs.get(DEFAULT_TAB);
+  if (defaultTab) defaultTab.label = t("mapo.form.defaultTab");
+
   return tabs;
 });
 
 const hasTabs = computed(() => {
   const keys = [...grouped.value.keys()];
-  return keys.length > 1 || (keys.length === 1 && keys[0] !== "__default__");
+  const hasFields = keys.length > 0;
+  if (!hasFields) return false;
+  const hasSeveralTabs = keys.length > 1;
+  const hasNamedTab = keys[0] !== DEFAULT_TAB;
+  return hasSeveralTabs || hasNamedTab;
 });
 
 const defaultGroups = computed(
-  () =>
-    grouped.value.get("__default__")?.groups ?? new Map<string, GroupEntry>(),
+  () => grouped.value.get(DEFAULT_TAB)?.groups ?? new Map<string, GroupEntry>(),
 );
 
 const tabList = computed<TabEntry[]>(() => [...grouped.value.values()]);

package/src/runtime/components/MapoFormTabs.vue

@@ -3,6 +3,7 @@ import { ref, computed } from "vue";
 import { useI18n } from "vue-i18n";
 import type { TabEntry } from "../types/layout.js";
 import { injectMapoForm } from "../composables/useMapoForm.js";
+import { pickActiveTab, tabHasShownFields } from "../utils/tabVisibility.js";
 import MapoFormGroup from "./MapoFormGroup.vue";
 import MapoFormFlatSection from "./MapoFormFlatSection.vue";
 
@@ -10,9 +11,29 @@ const { t } = useI18n();
 
 const props = defineProps<{ tabs: TabEntry[] }>();
 
-defineSlots<Record<string, unknown>>();
+const slots = defineSlots<Record<string, unknown>>();
 
-const activeTab = ref(props.tabs[0]?.name ?? "");
+const form = injectMapoForm<Record<string, unknown>>()!;
+
+// A tab whose fields are all hidden by `visible` or `show` would open on an
+// empty panel, so it leaves the tab bar until one of them shows. Content passed
+// through the tab's own slots counts as something to show.
+function tabHasContent(tab: TabEntry): boolean {
+  const hasPanelSlot = Boolean(slots[`tab.${tab.name}`]);
+  const hasBeforeSlot = Boolean(slots[`tab.${tab.name}.before`]);
+  const hasAfterSlot = Boolean(slots[`tab.${tab.name}.after`]);
+  if (hasPanelSlot || hasBeforeSlot || hasAfterSlot) return true;
+  return tabHasShownFields(tab, form.model.value);
+}
+
+const shownTabs = computed(() => props.tabs.filter(tabHasContent));
+
+// The tab the user clicked; until then, or while it is hidden, the first shown
+// tab is open.
+const pickedTab = ref<string | null>(null);
+const activeTab = computed(() =>
+  pickActiveTab(shownTabs.value, pickedTab.value),
+);
 
 // Recursively check if a tab (or any of its descendants) contains errors.
 function tabHasErrors(tab: TabEntry, errorKeys: Set<string>): boolean {
@@ -26,7 +47,6 @@ function tabHasErrors(tab: TabEntry, errorKeys: Set<string>): boolean {
 }
 
 // Highlight tabs containing errors.
-const form = injectMapoForm()!;
 const tabsWithErrors = computed(() => {
   const errorKeys = new Set(Object.keys(form.errors.value));
   return new Set(
@@ -40,7 +60,7 @@ const tabsWithErrors = computed(() => {
     <!-- Tab bar -->
     <div class="flex gap-1 border-b border-gray-200 pb-px">
       <button
-        v-for="tab in tabs"
+        v-for="tab in shownTabs"
         :key="tab.name"
         type="button"
         class="relative flex items-center gap-1.5 rounded-t px-4 py-2 text-sm font-medium transition-colors"
@@ -49,7 +69,7 @@ const tabsWithErrors = computed(() => {
             ? 'border-b-2 border-primary-500 text-primary-600'
             : 'text-gray-500 hover:bg-gray-50 hover:text-gray-700',
         ]"
-        @click="activeTab = tab.name"
+        @click="pickedTab = tab.name"
       >
         <slot :name="`tab.${tab.name}.label`" :tab="tab">
           {{ tab.label ?? tab.name }}

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

@@ -48,10 +48,12 @@ function clear() {
     <MapoMediaUnavailable v-if="!available" />
 
     <template v-else>
-      <!-- Selected media preview -->
+      <!-- Selected media preview. It and the trigger below paint their own
+           surface, like an input: `soft` buttons and transparent cards take
+           the page background and vanish on a tinted page. -->
       <div
         v-if="current"
-        class="flex items-center gap-3 rounded-lg border border-default p-2"
+        class="flex items-center gap-3 rounded-lg border border-default bg-default p-2"
       >
         <MapoMediaPreview :media="current" size="sm" />
         <div class="flex-1 min-w-0">
@@ -77,7 +79,7 @@ function clear() {
         v-if="!readonly && !disabled"
         :icon="current ? 'i-lucide-refresh-cw' : 'i-lucide-image-plus'"
         size="sm"
-        variant="soft"
+        variant="outline"
         color="neutral"
         :block="!current"
         @click="dialogOpen = true"

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

@@ -95,12 +95,13 @@ function onDragEnd() {
         </div>
       </div>
 
-      <!-- Add button -->
+      <!-- Add button: outlined like MapoMediaField's trigger, so it keeps its
+           own surface on a tinted page. -->
       <UButton
         v-if="!readonly && !disabled"
         icon="i-lucide-plus"
         size="sm"
-        variant="soft"
+        variant="outline"
         color="neutral"
         @click="dialogOpen = true"
       >

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

@@ -142,10 +142,13 @@ function onImageConfirm(
 </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' : '',
     ]"
   >
@@ -284,15 +287,18 @@ function onImageConfirm(
     >
       {{ 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"
-  />
+    <!-- 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/utils/tabVisibility.ts

@@ -0,0 +1,44 @@
+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 function isFieldShown(
+  field: AnyFieldDescriptor,
+  model: Record<string, unknown>,
+): boolean {
+  const removed = field.visible ? !field.visible({ model }) : false;
+  const hidden = field.show ? !field.show({ model }) : false;
+  return !removed && !hidden;
+}
+
+/**
+ * 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 function tabHasShownFields(
+  tab: TabEntry,
+  model: Record<string, unknown>,
+): boolean {
+  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),
+  );
+}
+
+/**
+ * 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 function pickActiveTab(
+  shownTabs: TabEntry[],
+  picked: string | null,
+): string {
+  const pickedTab = shownTabs.find((tab) => tab.name === picked);
+  return (pickedTab ?? shownTabs[0])?.name ?? "";
+}