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

package/dist/runtime/components/MapoFormFlatSection.vue

@@ -0,0 +1,149 @@
+<script setup>
+import { ref, computed, provide, onMounted, onUnmounted } from "vue";
+import { injectMapoForm } from "../composables/useMapoForm.js";
+import MapoFormField from "./MapoFormField.vue";
+const props = defineProps({
+  fields: { type: Array, required: true }
+});
+defineSlots();
+const form = injectMapoForm();
+const model = computed(() => form?.model.value);
+const currentLang = computed(() => form?.currentLang.value ?? "");
+const expandedFieldKey = ref(null);
+const expandedFieldLabel = computed(() => {
+  if (!expandedFieldKey.value) return "";
+  const field = props.fields.find(
+    (f) => f.key === expandedFieldKey.value
+  );
+  return field?.label ?? expandedFieldKey.value;
+});
+function expandField(key) {
+  expandedFieldKey.value = key;
+  document.body.style.overflow = "hidden";
+}
+function collapseField() {
+  expandedFieldKey.value = null;
+  document.body.style.overflow = "";
+}
+function onKeydown(e) {
+  if (e.key === "Escape" && expandedFieldKey.value) collapseField();
+}
+onMounted(() => document.addEventListener("keydown", onKeydown));
+onUnmounted(() => {
+  document.removeEventListener("keydown", onKeydown);
+  document.body.style.overflow = "";
+});
+provide("mapoGroupExpand", { expandField, collapseField, expandedFieldKey });
+const COL_SPAN = {
+  1: "col-span-1",
+  2: "col-span-2",
+  3: "col-span-3",
+  4: "col-span-4",
+  5: "col-span-5",
+  6: "col-span-6",
+  7: "col-span-7",
+  8: "col-span-8",
+  9: "col-span-9",
+  10: "col-span-10",
+  11: "col-span-11",
+  12: "col-span-12"
+};
+function colClass(cols) {
+  if (!cols || typeof cols !== "number") return "col-span-12";
+  return COL_SPAN[cols] ?? "col-span-12";
+}
+</script>
+
+<template>
+  <!-- Expanded panel: teleported to body -->
+  <Teleport to="body">
+    <Transition name="mapo-expand">
+      <div
+        v-if="expandedFieldKey"
+        class="fixed inset-0 z-50 flex flex-col"
+        style="padding: 1rem"
+      >
+        <div
+          class="absolute inset-0 bg-black/50 backdrop-blur-sm"
+          @click="collapseField"
+        />
+        <div
+          class="relative z-10 flex h-full flex-col overflow-hidden rounded-xl border border-gray-200 bg-white shadow-2xl"
+        >
+          <div
+            class="flex shrink-0 items-center justify-between border-b border-gray-100 px-5 py-3.5"
+          >
+            <span class="text-sm font-semibold tracking-wide text-gray-700">{{
+              expandedFieldLabel
+            }}</span>
+            <button
+              type="button"
+              class="rounded p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600"
+              @click="collapseField"
+            >
+              <UIcon name="i-lucide-minimize-2" class="h-4 w-4" />
+            </button>
+          </div>
+          <div
+            class="mapo-group-expand-body flex min-h-0 flex-1 flex-col p-5"
+            style="overflow: hidden"
+          >
+            <template v-for="field in fields" :key="field.key">
+              <div
+                v-if="expandedFieldKey === field.key"
+                style="
+                  display: flex;
+                  flex-direction: column;
+                  flex: 1;
+                  min-height: 0;
+                  height: 100%;
+                "
+              >
+                <slot
+                  :name="`field.${field.key}`"
+                  :field="field"
+                  :model="model"
+                  :current-lang="currentLang"
+                >
+                  <MapoFormField
+                    :descriptor="field"
+                    style="flex: 1; min-height: 0; height: 100%"
+                  >
+                    <template
+                      v-for="(_, slotName) in $slots"
+                      #[slotName]="slotProps"
+                    >
+                      <slot :name="slotName" v-bind="slotProps ?? {}" />
+                    </template>
+                  </MapoFormField>
+                </slot>
+              </div>
+            </template>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+
+  <!-- Flat grid -->
+  <div class="grid grid-cols-12 gap-5">
+    <div
+      v-for="field in fields"
+      :key="field.key"
+      :class="colClass(field.cols)"
+    >
+      <slot
+        :name="`field.${field.key}`"
+        :field="field"
+        :model="model"
+        :current-lang="currentLang"
+      >
+        <MapoFormField :descriptor="field">
+          <template v-for="(_, slotName) in $slots" #[slotName]="slotProps">
+            <slot :name="slotName" v-bind="slotProps ?? {}" />
+          </template>
+        </MapoFormField>
+      </slot>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/MapoFormFlatSection.vue.d.ts

@@ -0,0 +1,15 @@
+import type { AnyFieldDescriptor } from "../types/index.js";
+type __VLS_Props = {
+    fields: AnyFieldDescriptor[];
+};
+type __VLS_Slots = Record<string, unknown>;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=MapoFormFlatSection.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MapoFormFlatSection.vue.d.ts","sourceRoot":"","sources":["../../../src/runtime/components/MapoFormFlatSection.vue"],"names":[],"mappings":"AAuKA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAI5D,KAAK,WAAW,GAAG;IAAE,MAAM,EAAE,kBAAkB,EAAE,CAAA;CAAE,CAAC;AAGpD,KAAK,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAmS3C,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/MapoFormGroup.vue

@@ -0,0 +1,247 @@
+<script setup>
+import {
+  ref,
+  computed,
+  provide,
+  watchEffect,
+  onMounted,
+  onUnmounted
+} from "vue";
+import { useRuntimeConfig } from "#app";
+import { injectMapoForm } from "../composables/useMapoForm.js";
+import MapoFormField from "./MapoFormField.vue";
+const props = defineProps({
+  name: { type: String, required: true },
+  label: { type: String, required: false },
+  fields: { type: Array, required: true },
+  subtabs: { type: Map, required: false },
+  initialExpanded: { type: Boolean, required: false }
+});
+const globalExpanded = useRuntimeConfig().public.mapoForm?.groups?.expanded ?? true;
+const expanded = ref(props.initialExpanded ?? globalExpanded);
+const activeSubtab = ref("");
+watchEffect(() => {
+  if (props.subtabs && props.subtabs.size > 0 && !activeSubtab.value) {
+    activeSubtab.value = [...props.subtabs.keys()][0] ?? "";
+  }
+});
+const expandedFieldKey = ref(null);
+function expandField(key) {
+  expandedFieldKey.value = key;
+  document.body.style.overflow = "hidden";
+}
+function collapseField() {
+  expandedFieldKey.value = null;
+  document.body.style.overflow = "";
+}
+function onKeydown(e) {
+  if (e.key === "Escape" && expandedFieldKey.value) collapseField();
+}
+onMounted(() => document.addEventListener("keydown", onKeydown));
+onUnmounted(() => {
+  document.removeEventListener("keydown", onKeydown);
+  document.body.style.overflow = "";
+});
+provide("mapoGroupExpand", { expandField, collapseField, expandedFieldKey });
+const form = injectMapoForm();
+const model = computed(() => form?.model.value);
+const currentLang = computed(() => form?.currentLang.value ?? "");
+const COL_SPAN = {
+  1: "col-span-1",
+  2: "col-span-2",
+  3: "col-span-3",
+  4: "col-span-4",
+  5: "col-span-5",
+  6: "col-span-6",
+  7: "col-span-7",
+  8: "col-span-8",
+  9: "col-span-9",
+  10: "col-span-10",
+  11: "col-span-11",
+  12: "col-span-12"
+};
+function colClass(cols) {
+  if (!cols || typeof cols !== "number") return "col-span-12";
+  return COL_SPAN[cols] ?? "col-span-12";
+}
+</script>
+
+<template>
+  <!-- Expanded panel: teleported to body to avoid parent overflow/transform interference. -->
+  <Teleport to="body">
+    <Transition name="mapo-expand">
+      <div
+        v-if="expandedFieldKey"
+        class="fixed inset-0 z-50 flex flex-col"
+        style="padding: 1rem"
+      >
+        <!-- Clickable backdrop -->
+        <div
+          class="absolute inset-0 bg-black/50 backdrop-blur-sm"
+          @click="collapseField"
+        />
+
+        <!-- Panel -->
+        <div
+          class="relative z-10 flex h-full flex-col overflow-hidden rounded-xl border border-gray-200 bg-white shadow-2xl"
+        >
+          <!-- Header -->
+          <div
+            class="flex shrink-0 items-center justify-between border-b border-gray-100 px-5 py-3.5"
+          >
+            <span class="text-sm font-semibold tracking-wide text-gray-700">{{
+              label ?? name
+            }}</span>
+            <button
+              type="button"
+              class="rounded p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600"
+              @click="collapseField"
+            >
+              <UIcon name="i-lucide-minimize-2" class="h-4 w-4" />
+            </button>
+          </div>
+
+          <!-- Expanded field -->
+          <div
+            class="mapo-group-expand-body flex min-h-0 flex-1 flex-col p-5"
+            style="overflow: hidden"
+          >
+            <template v-for="field in fields" :key="field.key">
+              <div
+                v-if="expandedFieldKey === field.key"
+                style="
+                  display: flex;
+                  flex-direction: column;
+                  flex: 1;
+                  min-height: 0;
+                  height: 100%;
+                "
+              >
+                <slot
+                  :name="`field.${field.key}`"
+                  :field="field"
+                  :model="model"
+                  :current-lang="currentLang"
+                >
+                  <MapoFormField
+                    :descriptor="field"
+                    style="flex: 1; min-height: 0; height: 100%"
+                  >
+                    <template
+                      v-for="(_, slotName) in $slots"
+                      #[slotName]="slotProps"
+                    >
+                      <slot :name="slotName" v-bind="slotProps ?? {}" />
+                    </template>
+                  </MapoFormField>
+                </slot>
+              </div>
+            </template>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+
+  <!-- Regular group (kept in the DOM so the provide stays active) -->
+  <div
+    class="mapo-form-group relative overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm"
+  >
+    <!-- Collapsible heading -->
+    <button
+      type="button"
+      class="flex w-full items-center justify-between px-5 py-3.5 text-left transition-colors hover:bg-gray-50"
+      @click="expanded = !expanded"
+    >
+      <span class="text-sm font-semibold tracking-wide text-gray-700">{{
+        label ?? name
+      }}</span>
+      <UIcon
+        :name="expanded ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'"
+        class="h-4 w-4 shrink-0 text-gray-400"
+      />
+    </button>
+
+    <!-- Body -->
+    <div v-if="expanded">
+      <!-- Flat fields (no subtab) -->
+      <div
+        v-if="fields.length"
+        class="grid grid-cols-12 gap-5 px-5 pb-5 pt-4"
+        :class="{ 'pb-0': subtabs && subtabs.size > 0 }"
+      >
+        <div
+          v-for="field in fields"
+          :key="field.key"
+          :class="colClass(field.cols)"
+        >
+          <slot
+            :name="`field.${field.key}`"
+            :field="field"
+            :model="model"
+            :current-lang="currentLang"
+          >
+            <MapoFormField :descriptor="field">
+              <template v-for="(_, slotName) in $slots" #[slotName]="slotProps">
+                <slot :name="slotName" v-bind="slotProps ?? {}" />
+              </template>
+            </MapoFormField>
+          </slot>
+        </div>
+      </div>
+
+      <!-- Sub-tab bar + content (when subtabs are present) -->
+      <div v-if="subtabs && subtabs.size > 0" class="px-5 pb-5 pt-4">
+        <!-- Sub-tab bar -->
+        <div class="flex gap-1 border-b border-gray-200 mb-4">
+          <button
+            v-for="[subtabName] of subtabs"
+            :key="subtabName"
+            type="button"
+            class="relative px-3 py-1.5 text-sm font-medium transition-colors focus:outline-none"
+            :class="[
+  activeSubtab === subtabName ? 'text-primary-600 border-b-2 border-primary-600 -mb-px' : 'text-gray-500 hover:text-gray-700'
+]"
+            @click="activeSubtab = subtabName"
+          >
+            {{ subtabName }}
+          </button>
+        </div>
+
+        <!-- Sub-tab fields -->
+        <div
+          v-for="[subtabName, subtabFields] of subtabs"
+          v-show="activeSubtab === subtabName"
+          :key="subtabName"
+          class="grid grid-cols-12 gap-5"
+        >
+          <div
+            v-for="field in subtabFields"
+            :key="field.key"
+            :class="colClass(field.cols)"
+          >
+            <slot
+              :name="`field.${field.key}`"
+              :field="field"
+              :model="model"
+              :current-lang="currentLang"
+            >
+              <MapoFormField :descriptor="field">
+                <template
+                  v-for="(_, slotName) in $slots"
+                  #[slotName]="slotProps"
+                >
+                  <slot :name="slotName" v-bind="slotProps ?? {}" />
+                </template>
+              </MapoFormField>
+            </slot>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.mapo-expand-enter-active,.mapo-expand-leave-active{transition:opacity .2s ease,transform .2s ease}.mapo-expand-enter-from,.mapo-expand-leave-to{opacity:0;transform:scale(.97)}
+</style>

package/dist/runtime/components/MapoFormGroup.vue.d.ts

@@ -0,0 +1,44 @@
+import type { AnyFieldDescriptor } from "../types/index.js";
+type __VLS_Props = {
+    name: string;
+    label?: string;
+    fields: AnyFieldDescriptor[];
+    subtabs?: Map<string, AnyFieldDescriptor[]>;
+    initialExpanded?: boolean;
+};
+declare var __VLS_19: `field.${string}`, __VLS_20: {
+    field: AnyFieldDescriptor;
+    model: object | undefined;
+    currentLang: string;
+}, __VLS_30: string, __VLS_31: any, __VLS_39: `field.${string}`, __VLS_40: {
+    field: AnyFieldDescriptor;
+    model: object | undefined;
+    currentLang: string;
+}, __VLS_50: string, __VLS_51: any, __VLS_54: `field.${string}`, __VLS_55: {
+    field: AnyFieldDescriptor;
+    model: object | undefined;
+    currentLang: string;
+}, __VLS_65: string, __VLS_66: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_19>]?: (props: typeof __VLS_20) => any;
+} & {
+    [K in NonNullable<typeof __VLS_30>]?: (props: typeof __VLS_31) => any;
+} & {
+    [K in NonNullable<typeof __VLS_39>]?: (props: typeof __VLS_40) => any;
+} & {
+    [K in NonNullable<typeof __VLS_50>]?: (props: typeof __VLS_51) => any;
+} & {
+    [K in NonNullable<typeof __VLS_54>]?: (props: typeof __VLS_55) => any;
+} & {
+    [K in NonNullable<typeof __VLS_65>]?: (props: typeof __VLS_66) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=MapoFormGroup.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MapoFormGroup.vue.d.ts","sourceRoot":"","sources":["../../../src/runtime/components/MapoFormGroup.vue"],"names":[],"mappings":"AAuSA,OAAO,KAAK,EACV,kBAAkB,EAEnB,MAAM,mBAAmB,CAAC;AAI3B,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,kBAAkB,EAAE,CAAC;IAC7B,OAAO,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,kBAAkB,EAAE,CAAC,CAAC;IAC5C,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAidF,QAAA,IAAI,QAAQ,mBAAW,EAAE,QAAQ;;;;CAAW,EAAE,QAAQ,QAAW,EAAE,QAAQ,KAAW,EAAE,QAAQ,mBAAW,EAAE,QAAQ;;;;CAAW,EAAE,QAAQ,QAAW,EAAE,QAAQ,KAAW,EAAE,QAAQ,mBAAW,EAAE,QAAQ;;;;CAAW,EAAE,QAAQ,QAAW,EAAE,QAAQ,KAAY,CAAE;AACjQ,KAAK,WAAW,GAAG,EAAE,GACnB;KAAG,CAAC,IAAI,WAAW,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG;CAAE,GACzE;KAAG,CAAC,IAAI,WAAW,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG;CAAE,GACzE;KAAG,CAAC,IAAI,WAAW,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG;CAAE,GACzE;KAAG,CAAC,IAAI,WAAW,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG;CAAE,GACzE;KAAG,CAAC,IAAI,WAAW,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG;CAAE,GACzE;KAAG,CAAC,IAAI,WAAW,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG;CAAE,CAAC;AAG5E,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/MapoFormTabs.vue

@@ -0,0 +1,122 @@
+<script setup>
+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 }
+});
+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))
+  );
+  if (directError) return true;
+  return [...tab.children.values()].some(
+    (child) => tabHasErrors(child, errorKeys)
+  );
+}
+const tabsWithErrors = computed(() => {
+  const errorKeys = new Set(Object.keys(form.errors.value));
+  return new Set(
+    props.tabs.filter((tab) => tabHasErrors(tab, errorKeys)).map((t2) => t2.name)
+  );
+});
+</script>
+
+<template>
+  <div class="mapo-form-tabs">
+    <!-- Tab bar -->
+    <div class="flex gap-1 border-b border-gray-200 pb-px">
+      <button
+        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="pickedTab = tab.name"
+      >
+        <slot :name="`tab.${tab.name}.label`" :tab="tab">
+          {{ tab.label ?? tab.name }}
+        </slot>
+        <span
+          v-if="tabsWithErrors.has(tab.name)"
+          class="inline-block h-1.5 w-1.5 rounded-full bg-red-500"
+          :aria-label="t('mapo.form.tabErrors')"
+        />
+      </button>
+      <!-- Extra content appended to the tab bar (actions, badges, …). -->
+      <slot name="tab-bar-end" />
+    </div>
+
+    <!-- Tab content -->
+    <div
+      v-for="tab in tabs"
+      v-show="activeTab === tab.name"
+      :key="tab.name"
+      class="space-y-5 pt-5"
+    >
+      <!-- Full panel override: `tab.{name}` replaces this tab's content entirely. -->
+      <slot
+        v-if="$slots[`tab.${tab.name}`]"
+        :name="`tab.${tab.name}`"
+        :tab="tab"
+      />
+      <template v-else>
+        <slot :name="`tab.${tab.name}.before`" :tab="tab" />
+        <!-- Direct groups at this level -->
+        <template v-for="[groupName, group] of tab.groups" :key="groupName">
+          <template v-if="groupName !== '__flat__'">
+            <slot :name="`group.${groupName}.before`" />
+            <MapoFormGroup
+              :name="groupName"
+              :label="group.label"
+              :fields="group.fields"
+              :subtabs="group.subtabs"
+            >
+              <template v-for="(_, slotName) in $slots" #[slotName]="slotProps">
+                <slot :name="slotName" v-bind="slotProps ?? {}" />
+              </template>
+            </MapoFormGroup>
+            <slot :name="`group.${groupName}.after`" />
+          </template>
+
+          <MapoFormFlatSection v-else :fields="group.fields">
+            <template v-for="(_, slotName) in $slots" #[slotName]="slotProps">
+              <slot :name="slotName" v-bind="slotProps ?? {}" />
+            </template>
+          </MapoFormFlatSection>
+        </template>
+
+        <!-- Nested sub-tabs (recursive) -->
+        <MapoFormTabs
+          v-if="tab.children.size > 0"
+          :tabs="[...tab.children.values()]"
+        >
+          <template v-for="(_, slotName) in $slots" #[slotName]="slotProps">
+            <slot :name="slotName" v-bind="slotProps ?? {}" />
+          </template>
+        </MapoFormTabs>
+        <slot :name="`tab.${tab.name}.after`" :tab="tab" />
+      </template>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,15 @@
+import type { TabEntry } from "../types/layout.js";
+type __VLS_Props = {
+    tabs: TabEntry[];
+};
+type __VLS_Slots = Record<string, unknown>;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=MapoFormTabs.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"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/MapoUnknownField.vue

@@ -0,0 +1,62 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+const props = defineProps({
+  modelValue: { type: null, required: true },
+  descriptor: { type: null, required: true },
+  errors: { type: Array, required: false },
+  readonly: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+const jsonValue = computed(() => {
+  try {
+    return JSON.stringify(props.modelValue, null, 2);
+  } catch {
+    return String(props.modelValue);
+  }
+});
+const draft = ref(jsonValue.value);
+const parseError = ref(null);
+watch(jsonValue, (val) => {
+  draft.value = val;
+  parseError.value = null;
+});
+function onInput(val) {
+  draft.value = String(val);
+  try {
+    const parsed = JSON.parse(draft.value);
+    parseError.value = null;
+    emit("update:modelValue", parsed);
+  } catch (e) {
+    parseError.value = e.message;
+  }
+}
+if (import.meta.dev) {
+  console.warn(
+    `[Mapo] Field type "${props.descriptor.type}" (key: "${props.descriptor.key}") is not in the registry. Rendered as MapoUnknownField.`
+  );
+}
+</script>
+
+<template>
+  <div class="rounded border border-yellow-400 bg-yellow-50 p-3 text-sm">
+    <p class="font-mono font-semibold text-yellow-700">
+      Unknown field: <code>{{ descriptor.key }}</code>
+      <span class="ml-2 text-yellow-500">(type: {{ descriptor.type }})</span>
+    </p>
+    <UTextarea
+      class="mt-2 font-mono text-xs"
+      :model-value="draft"
+      :rows="4"
+      :readonly="readonly || disabled"
+      :disabled="disabled"
+      @update:model-value="onInput"
+    />
+    <p v-if="parseError" class="mt-1 text-xs text-yellow-700">
+      Invalid JSON — changes are not applied until the value becomes parseable.
+    </p>
+    <p v-for="err in errors" :key="err" class="mt-1 text-red-500">
+      {{ err }}
+    </p>
+  </div>
+</template>