@ng-forge/dynamic-form-mcp 1.2.0-next.8 → 1.2.0-next.9

package/src/index.js

@@ -22,7 +22,7 @@ var FIELD_TYPES = [
     },
     validationSupported: true,
     source: "adapter",
-    allowedIn: ["top-level", "page", "row", "group", "array"],
+    allowedIn: ["top-level", "page", "row", "group", "array", "container"],
     example: `{
   key: 'email',
   type: 'input',
@@ -57,7 +57,7 @@ var FIELD_TYPES = [
     },
     validationSupported: true,
     source: "adapter",
-    allowedIn: ["top-level", "page", "row", "group", "array"],
+    allowedIn: ["top-level", "page", "row", "group", "array", "container"],
     example: `{
   key: 'description',
   type: 'textarea',
@@ -91,7 +91,7 @@ var FIELD_TYPES = [
     },
     validationSupported: true,
     source: "adapter",
-    allowedIn: ["top-level", "page", "row", "group", "array"],
+    allowedIn: ["top-level", "page", "row", "group", "array", "container"],
     example: `{
   key: 'country',
   type: 'select',
@@ -113,7 +113,7 @@ var FIELD_TYPES = [
     props: {},
     validationSupported: true,
     source: "adapter",
-    allowedIn: ["top-level", "page", "row", "group", "array"],
+    allowedIn: ["top-level", "page", "row", "group", "array", "container"],
     example: `{
   key: 'acceptTerms',
   type: 'checkbox',
@@ -138,7 +138,7 @@ var FIELD_TYPES = [
     },
     validationSupported: true,
     source: "adapter",
-    allowedIn: ["top-level", "page", "row", "group", "array"],
+    allowedIn: ["top-level", "page", "row", "group", "array", "container"],
     example: `{
   key: 'interests',
   type: 'multi-checkbox',
@@ -168,7 +168,7 @@ var FIELD_TYPES = [
     },
     validationSupported: true,
     source: "adapter",
-    allowedIn: ["top-level", "page", "row", "group", "array"],
+    allowedIn: ["top-level", "page", "row", "group", "array", "container"],
     example: `{
   key: 'gender',
   type: 'radio',
@@ -203,7 +203,7 @@ var FIELD_TYPES = [
     },
     validationSupported: true,
     source: "adapter",
-    allowedIn: ["top-level", "page", "row", "group", "array"],
+    allowedIn: ["top-level", "page", "row", "group", "array", "container"],
     example: `{
   key: 'birthDate',
   type: 'datepicker',
@@ -222,7 +222,7 @@ var FIELD_TYPES = [
     props: {},
     validationSupported: true,
     source: "adapter",
-    allowedIn: ["top-level", "page", "row", "group", "array"],
+    allowedIn: ["top-level", "page", "row", "group", "array", "container"],
     example: `{
   key: 'notifications',
   type: 'toggle',
@@ -261,7 +261,7 @@ var FIELD_TYPES = [
     },
     validationSupported: true,
     source: "adapter",
-    allowedIn: ["top-level", "page", "row", "group", "array"],
+    allowedIn: ["top-level", "page", "row", "group", "array", "container"],
     example: `{
   key: 'volume',
   type: 'slider',
@@ -282,7 +282,7 @@ var FIELD_TYPES = [
     props: {},
     validationSupported: false,
     source: "core",
-    allowedIn: ["top-level (single-page forms only)", "page.fields", "group.fields", "array.fields"],
+    allowedIn: ["top-level (single-page forms only)", "page.fields", "group.fields", "array.fields", "container"],
     notAllowedIn: ["row", "top-level when using pages"],
     example: `// Hidden field - value is REQUIRED!
 {
@@ -319,7 +319,7 @@ var FIELD_TYPES = [
     },
     validationSupported: false,
     source: "core",
-    allowedIn: ["top-level", "page", "row", "group", "array"],
+    allowedIn: ["top-level", "page", "row", "group", "array", "container"],
     example: `{
   key: 'sectionTitle',
   type: 'text',
@@ -422,11 +422,12 @@ var FIELD_TYPES = [
     },
     validationSupported: true,
     source: "core",
-    allowedIn: ["top-level", "page", "row", "array"],
+    allowedIn: ["top-level", "page", "row", "array", "container"],
     notAllowedIn: ["group"],
     canContain: [
       "row",
       "array",
+      "container",
       "input",
       "textarea",
       "select",
@@ -520,11 +521,12 @@ var FIELD_TYPES = [
     },
     validationSupported: true,
     source: "core",
-    allowedIn: ["top-level", "page", "row", "group"],
+    allowedIn: ["top-level", "page", "row", "group", "container"],
     notAllowedIn: ["array"],
     canContain: [
       "row",
       "group",
+      "container",
       "input",
       "textarea",
       "select",
@@ -586,6 +588,74 @@ var FIELD_TYPES = [
 //     ? { kind: 'periodOrder' } : null`,
     minimalExample: `{ key: 'items', type: 'array', fields: [...] }`
   },
+  {
+    type: "container",
+    category: "container",
+    description: "Wraps its children in UI chrome via a chain of wrapper components. Containers do NOT have a label property and do NOT create a nesting level in form values \u2014 child values are flattened into the parent, exactly like rows. The 'wrappers' property is REQUIRED (use [] for no chrome). A container is NOT a group with chrome and the two are not substitutable: a container flattens child values into the parent (like a row), while a group nests them under its own key and owns a schema path, so swapping one for the other changes the submitted value shape and which validators can run. Wrappers are applied outermost-first, so the first entry in the array is the outermost element. Supports only 'hidden' logic type for conditional visibility. Like `row` and `page`, a container flattens into its parent and has no schema path of its own, so it does NOT support container-level `validators`, `required` or `validationMessages` \u2014 use `group` or `array` for cross-field rules.",
+    valueType: void 0,
+    baseInterface: "FieldDef",
+    props: {
+      fields: {
+        name: "fields",
+        type: "ContainerAllowedChildren[]",
+        description: "Child fields to render inside the wrapper chain. Allowed: rows, groups, arrays, nested containers, hidden fields, and value fields (input, select, etc). NOT ALLOWED: pages",
+        required: true
+      },
+      wrappers: {
+        name: "wrappers",
+        type: "WrapperConfig[]",
+        description: "REQUIRED. Wrapper components chained around the children, outermost first. Use [] for no chrome. Each entry needs a 'type'; the built-in wrapper is 'css', which takes 'cssClasses'. Custom wrapper types can be registered.",
+        required: true
+      }
+    },
+    validationSupported: false,
+    source: "core",
+    allowedIn: ["top-level", "page", "group", "array", "row", "container"],
+    notAllowedIn: [],
+    canContain: [
+      "row",
+      "group",
+      "array",
+      "container",
+      "hidden",
+      "input",
+      "textarea",
+      "select",
+      "checkbox",
+      "multi-checkbox",
+      "radio",
+      "datepicker",
+      "toggle",
+      "slider",
+      "text",
+      "button",
+      "submit",
+      "next",
+      "previous",
+      "add-array-item",
+      "prepend-array-item",
+      "insert-array-item",
+      "remove-array-item",
+      "pop-array-item",
+      "shift-array-item"
+    ],
+    cannotContain: ["page"],
+    example: `{
+  key: 'billingChrome',
+  type: 'container',
+  // NOTE: Containers do NOT have a label property
+  // wrappers is REQUIRED \u2014 use [] when no chrome is needed
+  wrappers: [{ type: 'css', cssClasses: 'card p-3' }],
+  fields: [
+    { key: 'street', type: 'input', label: 'Street' },
+    { key: 'city', type: 'input', label: 'City' }
+  ]
+}
+// Values flatten: { street: '', city: '' } \u2014 no 'billingChrome' key
+// NOT ALLOWED in containers:
+// - type: 'page' (pages are top-level only)`,
+    minimalExample: `{ key: 'chrome', type: 'container', wrappers: [], fields: [...] }`
+  },
   {
     type: "page",
     category: "container",
@@ -603,11 +673,12 @@ var FIELD_TYPES = [
     validationSupported: false,
     source: "core",
     allowedIn: ["top-level"],
-    notAllowedIn: ["page", "row", "group", "array"],
+    notAllowedIn: ["page", "row", "group", "array", "container"],
     canContain: [
       "row",
       "group",
       "array",
+      "container",
       "input",
       "textarea",
       "select",
@@ -647,7 +718,7 @@ var FIELD_TYPES = [
     props: {},
     validationSupported: false,
     source: "adapter",
-    allowedIn: ["top-level", "page", "row", "group", "array"],
+    allowedIn: ["top-level", "page", "row", "group", "array", "container"],
     example: `{
   key: 'next',
   type: 'next',
@@ -664,7 +735,7 @@ var FIELD_TYPES = [
     props: {},
     validationSupported: false,
     source: "adapter",
-    allowedIn: ["top-level", "page", "row", "group", "array"],
+    allowedIn: ["top-level", "page", "row", "group", "array", "container"],
     example: `{
   key: 'back',
   type: 'previous',
@@ -688,7 +759,7 @@ var FIELD_TYPES = [
     },
     validationSupported: false,
     source: "adapter",
-    allowedIn: ["top-level", "page", "row", "group", "array"],
+    allowedIn: ["top-level", "page", "row", "group", "array", "container"],
     example: `// RECOMMENDED: Use pre-defined button types for common actions
 { key: 'submit', type: 'submit', label: 'Submit Form' }
 { key: 'next', type: 'next', label: 'Next' }
@@ -715,7 +786,7 @@ var FIELD_TYPES = [
     props: {},
     validationSupported: false,
     source: "adapter",
-    allowedIn: ["top-level", "page", "row", "group", "array"],
+    allowedIn: ["top-level", "page", "row", "group", "array", "container"],
     example: `{
   key: 'submit',
   type: 'submit',
@@ -732,7 +803,7 @@ var FIELD_TYPES = [
     props: {},
     validationSupported: false,
     source: "adapter",
-    allowedIn: ["array", "row", "group"],
+    allowedIn: ["array", "row", "group", "container"],
     example: `{
   key: 'addContact',
   type: 'add-array-item',
@@ -749,7 +820,7 @@ var FIELD_TYPES = [
     props: {},
     validationSupported: false,
     source: "adapter",
-    allowedIn: ["array", "row", "group"],
+    allowedIn: ["array", "row", "group", "container"],
     example: `{
   key: 'prependContact',
   type: 'prepend-array-item',
@@ -766,7 +837,7 @@ var FIELD_TYPES = [
     props: {},
     validationSupported: false,
     source: "adapter",
-    allowedIn: ["array", "row", "group"],
+    allowedIn: ["array", "row", "group", "container"],
     example: `{
   key: 'insertContact',
   type: 'insert-array-item',
@@ -784,7 +855,7 @@ var FIELD_TYPES = [
     props: {},
     validationSupported: false,
     source: "adapter",
-    allowedIn: ["array", "row", "group"],
+    allowedIn: ["array", "row", "group", "container"],
     example: `{
   key: 'removeContact',
   type: 'remove-array-item',
@@ -801,7 +872,7 @@ var FIELD_TYPES = [
     props: {},
     validationSupported: false,
     source: "adapter",
-    allowedIn: ["array", "row", "group"],
+    allowedIn: ["array", "row", "group", "container"],
     example: `{
   key: 'popContact',
   type: 'pop-array-item',
@@ -819,7 +890,7 @@ var FIELD_TYPES = [
     props: {},
     validationSupported: false,
     source: "adapter",
-    allowedIn: ["array", "row", "group"],
+    allowedIn: ["array", "row", "group", "container"],
     example: `{
   key: 'shiftContact',
   type: 'shift-array-item',
@@ -4856,15 +4927,23 @@ var ContainerLogicSchema = z13.object({
   type: z13.literal("hidden"),
   condition: z13.union([ConditionalExpressionSchema, z13.boolean()])
 });
+var SIMPLIFIED_ONLY_PROPS = ["template", "value", "addButton", "removeButton"];
+var SIMPLIFIED_ONLY_HINTS = {
+  template: 'Use "fields" for the full API, or "template" for the simplified one.',
+  value: 'Set initial values on the field definitions inside "fields".',
+  addButton: 'Add an "add-array-item" or "insert-array-item" button as a field.',
+  removeButton: 'Add a "remove-array-item" button to the item definition.'
+};
 function createContainerSchemas(options) {
   const { leafFieldSchema } = options;
   const AnyFieldSchema = z13.lazy(
-    () => z13.union([
+    () => z13.discriminatedUnion("type", [
       leafFieldSchema,
       PageFieldSchema,
       RowFieldSchema,
       GroupFieldSchema,
-      ArrayFieldSchema
+      ArrayFieldSchema,
+      ContainerFieldSchema
     ])
   );
   const ContainerBaseSchema = BaseFieldDefSchema.omit({
@@ -4876,6 +4955,18 @@ function createContainerSchemas(options) {
     label: z13.never().optional(),
     meta: z13.never().optional()
   });
+  const ContainerValidationShape = {
+    required: z13.boolean().optional(),
+    validators: ValidatorsArraySchema.optional(),
+    validationMessages: ValidationMessagesSchema.optional()
+  };
+  const WrapperConfigSchema = z13.object({ type: z13.string() }).passthrough();
+  const ContainerFieldSchema = ContainerBaseSchema.extend({
+    type: z13.literal("container"),
+    fields: z13.array(AnyFieldSchema),
+    wrappers: z13.array(WrapperConfigSchema),
+    logic: z13.array(ContainerLogicSchema).optional()
+  });
   const PageFieldSchema = ContainerBaseSchema.extend({
     type: z13.literal("page"),
     fields: z13.array(AnyFieldSchema),
@@ -4892,33 +4983,27 @@ function createContainerSchemas(options) {
   const GroupFieldSchema = ContainerBaseSchema.extend({
     type: z13.literal("group"),
     fields: z13.array(AnyFieldSchema),
+    ...ContainerValidationShape,
     // Container logic - only 'hidden' type allowed (same as pages)
     logic: z13.array(ContainerLogicSchema).optional()
   });
   const ArrayButtonConfigSchema = z13.object({
     label: z13.string().optional(),
-    props: z13.record(z13.unknown()).optional()
-  });
-  const FullArrayFieldSchema = ContainerBaseSchema.extend({
-    type: z13.literal("array"),
-    fields: z13.array(AnyFieldSchema),
-    logic: z13.array(ContainerLogicSchema).optional(),
-    // Full API does not use template
-    template: z13.never().optional(),
-    // Array length validation
-    minLength: z13.number().int().min(0).optional(),
-    maxLength: z13.number().int().min(0).optional()
+    props: z13.record(z13.string(), z13.unknown()).optional()
   });
   const ArrayAllowedChildSchema = z13.lazy(
     () => AnyFieldSchema.refine((field) => field.type !== "page" && field.type !== "array", {
       message: "Array templates cannot contain page or array fields. Only leaf fields, rows, and groups are allowed."
     })
   );
-  const SimplifiedArrayFieldSchema = ContainerBaseSchema.extend({
+  const ArrayFieldSchema = ContainerBaseSchema.extend({
     type: z13.literal("array"),
-    // Template: single field (primitive array) or array of fields (object array)
+    ...ContainerValidationShape,
+    // Full API: explicit item definitions.
+    fields: z13.array(AnyFieldSchema).optional(),
+    // Simplified API: single field (primitive array) or array of fields (object array).
     // Only ArrayAllowedChildren (leaf fields, rows, groups) are valid — no pages or nested arrays.
-    template: z13.union([ArrayAllowedChildSchema, z13.array(ArrayAllowedChildSchema)]),
+    template: z13.union([ArrayAllowedChildSchema, z13.array(ArrayAllowedChildSchema)]).optional(),
     // Initial values for the array
     value: z13.array(z13.unknown()).optional(),
     // Button customization or opt-out (false to disable)
@@ -4928,18 +5013,64 @@ function createContainerSchemas(options) {
     // Array length validation
     minLength: z13.number().int().min(0).optional(),
     maxLength: z13.number().int().min(0).optional(),
-    // Simplified API does not use fields
-    fields: z13.never().optional(),
+    // The array size properties are minLength/maxLength. These are the common
+    // wrong spelling, and naming them keeps the mistake from being silently
+    // stripped. Previously only the simplified API rejected them.
     minItems: z13.never().optional(),
     maxItems: z13.never().optional()
+  }).superRefine((field, ctx) => {
+    const hasFields = field.fields !== void 0;
+    const hasTemplate = field.template !== void 0;
+    if (hasFields && hasTemplate) {
+      ctx.addIssue({
+        code: "custom",
+        message: 'Array has BOTH "fields" and "template". These are mutually exclusive: use "fields" for the full API, or "template" + "value" for the simplified API.'
+      });
+      return;
+    }
+    if (!hasFields && !hasTemplate) {
+      ctx.addIssue({
+        code: "custom",
+        message: 'Array is MISSING both "fields" and "template". Use "fields" (full API) or "template" + "value" (simplified API).'
+      });
+      return;
+    }
+    if (hasFields) {
+      for (const prop of SIMPLIFIED_ONLY_PROPS) {
+        if (prop === "template" || field[prop] === void 0) continue;
+        ctx.addIssue({
+          code: "custom",
+          path: [prop],
+          message: `Array uses the full API ("fields"), so "${prop}" is not allowed: it belongs to the simplified API. ${SIMPLIFIED_ONLY_HINTS[prop]}`
+        });
+      }
+    }
+  }).meta({
+    // The refinement above is invisible to JSON Schema generation, and the
+    // generated schema is authoring guidance for a model. Two optional
+    // properties with no stated relationship reads as "pass either, both or
+    // neither", which is exactly the mistake the refinement rejects at
+    // runtime. Restating the rule as `oneOf` keeps the published schema
+    // saying what the validator enforces — the union of two array schemas
+    // used to express this, and collapsing them to one schema lost it.
+    description: 'Array field. Use EXACTLY ONE of "fields" (full API: explicit item definitions) or "template" (simplified API: one field, or an array of fields, repeated per item). Never both, never neither. "value", "addButton" and "removeButton" belong to the simplified API only: with "fields", put initial values on the item definitions and add buttons as fields.',
+    oneOf: [
+      {
+        required: ["fields"],
+        // `not` wraps an `anyOf`, not one multi-name `required`: the latter
+        // would only forbid all of them being present at once.
+        not: { anyOf: SIMPLIFIED_ONLY_PROPS.map((prop) => ({ required: [prop] })) }
+      },
+      { required: ["template"], not: { required: ["fields"] } }
+    ]
   });
-  const ArrayFieldSchema = z13.union([FullArrayFieldSchema, SimplifiedArrayFieldSchema]);
   const AllFieldsSchema = AnyFieldSchema;
   return {
     PageFieldSchema,
     RowFieldSchema,
     GroupFieldSchema,
     ArrayFieldSchema,
+    ContainerFieldSchema,
     AllFieldsSchema
   };
 }
@@ -5149,7 +5280,7 @@ var BaseFormConfigSchema = z18.object({
 });
 
 // internal/dynamic-forms-validation/validate/src/json-schema/form-config-json-schema.ts
-import zodToJsonSchema from "zod-to-json-schema";
+import { z as z55 } from "zod";
 
 // internal/dynamic-forms-validation/material/src/props/mat-common-props.schema.ts
 import { z as z19 } from "zod";
@@ -6647,24 +6778,20 @@ var formConfigSchemas = {
   primeng: PrimeFormConfigSchema,
   ionic: IonicFormConfigSchema
 };
+function toJsonSchema(schema, name, basePath) {
+  const jsonSchema = z55.toJSONSchema(schema, { target: "draft-7", io: "input", unrepresentable: "any" });
+  jsonSchema["$id"] = basePath ? `${basePath.replace(/\/$/, "")}/${name}` : name;
+  return jsonSchema;
+}
 function getFormConfigJsonSchema(uiIntegration, options = {}) {
   const schema = formConfigSchemas[uiIntegration];
   if (!schema) {
     throw new Error(`Unknown UI integration: ${uiIntegration}. Valid options: material, bootstrap, primeng, ionic`);
   }
-  const { name, basePath } = options;
-  const jsonSchema = zodToJsonSchema(schema, {
-    name: name ?? `${uiIntegration}FormConfig`,
-    basePath: basePath ? basePath.split("/") : void 0,
-    $refStrategy: "none",
-    // Inline all definitions for MCP compatibility
-    errorMessages: true
-  });
-  return jsonSchema;
+  return toJsonSchema(schema, options.name ?? `${uiIntegration}FormConfig`, options.basePath);
 }
 
 // internal/dynamic-forms-validation/validate/src/json-schema/field-type-json-schemas.ts
-import zodToJsonSchema2 from "zod-to-json-schema";
 var leafFieldSchemas = {
   material: MatLeafFieldSchema,
   bootstrap: BsLeafFieldSchema,
@@ -6759,53 +6886,41 @@ function getFieldTypeJsonSchema(uiIntegration, fieldType) {
   if (!schema) {
     throw new Error(`Unknown field type: ${fieldType}. Valid: ${getSupportedFieldTypes().join(", ")}`);
   }
-  const jsonSchema = zodToJsonSchema2(schema, {
-    name: `${uiIntegration}${fieldType.charAt(0).toUpperCase() + fieldType.slice(1)}Field`,
-    $refStrategy: "none",
-    errorMessages: true
-  });
-  return jsonSchema;
+  return toJsonSchema(schema, `${uiIntegration}${fieldType.charAt(0).toUpperCase() + fieldType.slice(1)}Field`);
 }
 function getLeafFieldJsonSchema(uiIntegration) {
   const schema = leafFieldSchemas[uiIntegration];
   if (!schema) {
     throw new Error(`Unknown UI integration: ${uiIntegration}`);
   }
-  const jsonSchema = zodToJsonSchema2(schema, {
-    name: `${uiIntegration}LeafField`,
-    $refStrategy: "none",
-    errorMessages: true
-  });
-  return jsonSchema;
+  return toJsonSchema(schema, `${uiIntegration}LeafField`);
 }
 
 // internal/dynamic-forms-validation/src/lib/schemas/field-type-names.ts
-import { z as z55 } from "zod";
+import { z as z56 } from "zod";
 var MAX_DEPTH = 20;
 function collectDiscriminator(schema, into) {
-  if (schema instanceof z55.ZodLiteral) {
-    if (typeof schema.value === "string") into.add(schema.value);
+  if (schema instanceof z56.ZodLiteral) {
+    for (const value of schema.def.values) {
+      if (typeof value === "string") into.add(value);
+    }
     return;
   }
-  if (schema instanceof z55.ZodEnum) {
+  if (schema instanceof z56.ZodEnum) {
     for (const value of schema.options) into.add(value);
   }
 }
 function visit(schema, into, depth) {
   if (depth > MAX_DEPTH) return;
-  if (schema instanceof z55.ZodLazy) {
-    visit(schema.schema, into, depth + 1);
-    return;
-  }
-  if (schema instanceof z55.ZodEffects) {
-    visit(schema.innerType(), into, depth + 1);
+  if (schema instanceof z56.ZodLazy) {
+    visit(schema.unwrap(), into, depth + 1);
     return;
   }
-  if (schema instanceof z55.ZodDiscriminatedUnion || schema instanceof z55.ZodUnion) {
+  if (schema instanceof z56.ZodUnion) {
     for (const option of schema.options) visit(option, into, depth + 1);
     return;
   }
-  if (schema instanceof z55.ZodObject) {
+  if (schema instanceof z56.ZodObject) {
     collectDiscriminator(schema.shape["type"], into);
     return;
   }
@@ -6878,14 +6993,14 @@ var DID_YOU_MEAN = {
   validation: "Did you mean to use validator shorthand (`required`, `email`, `min`, etc.) or `validators: [...]` array?"
 };
 function formatZodError(error, uiIntegration, config) {
-  const errors = error.errors.map((err) => {
+  const errors = error.issues.map((err) => {
     const path = err.path.join(".") || "root";
     let message = err.message;
     let expected;
     let received;
     if ("expected" in err) expected = String(err.expected);
     if ("received" in err) received = String(err.received);
-    if (message === "Invalid input" || message === "Invalid union") {
+    if (err.code === "invalid_union") {
       const fieldMatch = path.match(/fields\.(\d+)/);
       if (fieldMatch && config && typeof config === "object" && "fields" in config) {
         const fields = config.fields;
@@ -7016,123 +7131,31 @@ var FORBIDDEN_HIDDEN_PROPS = [
   "pattern",
   "placeholder"
 ];
-var CONTAINER_FORBIDDEN_PROPS = ["validators", "required", "email", "min", "max", "minLength", "maxLength", "pattern", "value"];
+var CONTAINER_FORBIDDEN_PROPS = ["email", "min", "max", "pattern", "value"];
+var VALIDATING_CONTAINERS = ["group", "array"];
+var CONTAINER_VALIDATION_PROPS = ["validators", "required", "validationMessages"];
+var ARRAY_SIZE_PROPS = ["minLength", "maxLength"];
 var FIELDS_REQUIRING_OPTIONS = ["select", "radio", "multi-checkbox"];
 var NESTING_RULES = {
   page: {
-    allowed: [
-      "row",
-      "group",
-      "array",
-      "input",
-      "textarea",
-      "select",
-      "checkbox",
-      "multi-checkbox",
-      "radio",
-      "datepicker",
-      "toggle",
-      "slider",
-      "hidden",
-      "text",
-      "button",
-      "submit",
-      "next",
-      "previous",
-      "add-array-item",
-      "prepend-array-item",
-      "insert-array-item",
-      "remove-array-item",
-      "pop-array-item",
-      "shift-array-item"
-    ],
     forbidden: ["page"],
     message: "Pages cannot be nested inside other containers. ALL top-level fields must be pages if using multi-page mode."
   },
   row: {
-    allowed: [
-      "group",
-      "array",
-      "input",
-      "textarea",
-      "select",
-      "checkbox",
-      "multi-checkbox",
-      "radio",
-      "datepicker",
-      "toggle",
-      "slider",
-      "text",
-      "button",
-      "submit",
-      "next",
-      "previous",
-      "add-array-item",
-      "prepend-array-item",
-      "insert-array-item",
-      "remove-array-item",
-      "pop-array-item",
-      "shift-array-item"
-    ],
     forbidden: ["page", "row", "hidden"],
     message: "Rows cannot contain pages, other rows, or hidden fields. Hidden fields should be at page or form level."
   },
   group: {
-    allowed: [
-      "row",
-      "input",
-      "textarea",
-      "select",
-      "checkbox",
-      "multi-checkbox",
-      "radio",
-      "datepicker",
-      "toggle",
-      "slider",
-      "hidden",
-      "text",
-      "button",
-      "submit",
-      "next",
-      "previous",
-      "add-array-item",
-      "prepend-array-item",
-      "insert-array-item",
-      "remove-array-item",
-      "pop-array-item",
-      "shift-array-item"
-    ],
     forbidden: ["page", "group"],
     message: "Groups cannot contain pages or other groups (no nested groups)."
   },
   array: {
-    allowed: [
-      "row",
-      "group",
-      "input",
-      "textarea",
-      "select",
-      "checkbox",
-      "multi-checkbox",
-      "radio",
-      "datepicker",
-      "toggle",
-      "slider",
-      "hidden",
-      "text",
-      "button",
-      "submit",
-      "next",
-      "previous",
-      "add-array-item",
-      "prepend-array-item",
-      "insert-array-item",
-      "remove-array-item",
-      "pop-array-item",
-      "shift-array-item"
-    ],
     forbidden: ["page", "array"],
     message: "Arrays cannot contain pages or other arrays (no nested arrays)."
+  },
+  container: {
+    forbidden: ["page"],
+    message: "Containers cannot contain pages. Pages are top-level fields only."
   }
 };
 var EXPECTED_STRUCTURE = {
@@ -7144,7 +7167,8 @@ var EXPECTED_STRUCTURE = {
   row: `{ key: 'rowKey', type: 'row', fields: [...childFields] }`,
   group: `{ key: 'groupKey', type: 'group', fields: [...childFields] }`,
   array: `Full API: { key: 'arrayKey', type: 'array', fields: [...itemDefs] } OR Simplified API: { key: 'arrayKey', type: 'array', template: { type: 'input', label: 'Item' }, value: [] }`,
-  page: `{ key: 'pageKey', type: 'page', fields: [...childFields, { key: 'next', type: 'next', label: 'Next' }] }`
+  page: `{ key: 'pageKey', type: 'page', fields: [...childFields, { key: 'next', type: 'next', label: 'Next' }] }`,
+  container: `{ key: 'containerKey', type: 'container', wrappers: [{ type: 'css', cssClasses: 'card' }], fields: [...childFields] }`
 };
 function preValidateConfig(config) {
   const errors = [];
@@ -7189,7 +7213,7 @@ function preValidateConfig(config) {
         }
       });
     }
-    if (["row", "group", "array"].includes(fieldType || "")) {
+    if (["row", "group", "array", "container"].includes(fieldType || "")) {
       for (const prop of INVALID_CONTAINER_PROPS) {
         if (prop in f) {
           errors.push({
@@ -7206,10 +7230,30 @@ function preValidateConfig(config) {
           const expected = EXPECTED_STRUCTURE[fieldType || ""] || "";
           errors.push({
             path: `${path}.${prop}`,
-            message: `"${fieldType}" containers do NOT support "${prop}". Containers don't hold values or validate - they are purely for layout/grouping.${expected ? ` Expected structure: ${expected}` : ""}`
+            message: `"${fieldType}" containers do NOT support "${prop}". Containers don't hold values - they are purely for layout/grouping.${expected ? ` Expected structure: ${expected}` : ""}`
           });
         }
       }
+      if (!VALIDATING_CONTAINERS.includes(fieldType || "")) {
+        for (const prop of CONTAINER_VALIDATION_PROPS) {
+          if (prop in f) {
+            errors.push({
+              path: `${path}.${prop}`,
+              message: `"${fieldType}" containers do NOT support "${prop}". They flatten into their parent and have no schema path, so a container-level validator would have no value to run against. Use "group" or "array" for cross-field rules, or move the rule onto a child field.`
+            });
+          }
+        }
+      }
+      if (fieldType !== "array") {
+        for (const prop of ARRAY_SIZE_PROPS) {
+          if (prop in f) {
+            errors.push({
+              path: `${path}.${prop}`,
+              message: `"${fieldType}" containers do NOT support "${prop}". Array size constraints apply to "array" fields only.`
+            });
+          }
+        }
+      }
       if ("logic" in f && Array.isArray(f["logic"])) {
         const nonHiddenLogic = f["logic"].filter(
           (l) => l && typeof l === "object" && l["type"] !== "hidden"
@@ -7240,6 +7284,14 @@ function preValidateConfig(config) {
           });
         }
       }
+      for (const prop of [...CONTAINER_VALIDATION_PROPS, ...ARRAY_SIZE_PROPS]) {
+        if (prop in f) {
+          errors.push({
+            path: `${path}.${prop}`,
+            message: `"page" containers do NOT support "${prop}". Pages flatten into the form and have no schema path of their own.`
+          });
+        }
+      }
     }
     if (parentType && NESTING_RULES[parentType]) {
       const rules = NESTING_RULES[parentType];
@@ -7320,7 +7372,7 @@ function preValidateConfig(config) {
         });
       }
     }
-    if (["row", "group", "page"].includes(fieldType || "")) {
+    if (["row", "group", "page", "container"].includes(fieldType || "")) {
       if (!("fields" in f)) {
         errors.push({
           path: `${path}.fields`,
@@ -7333,6 +7385,19 @@ function preValidateConfig(config) {
         });
       }
     }
+    if (fieldType === "container") {
+      if (!("wrappers" in f)) {
+        errors.push({
+          path: `${path}.wrappers`,
+          message: `"container" container "${fieldKey || "unknown"}" is MISSING required "wrappers" property. Add a wrappers array naming the UI chrome to wrap the children in, or [] for no chrome. Do NOT switch to a "group" instead: a container flattens its children into the parent value, while a group nests them under its own key and owns a schema path, so the submitted value shape and validation behaviour both change. Expected structure: ${EXPECTED_STRUCTURE["container"]}`
+        });
+      } else if (!Array.isArray(f["wrappers"])) {
+        errors.push({
+          path: `${path}.wrappers`,
+          message: `"container" container "${fieldKey || "unknown"}" has invalid "wrappers" - must be an array of wrapper objects, not ${typeof f["wrappers"]}.`
+        });
+      }
+    }
     if (fieldType === "array") {
       const hasFields = "fields" in f;
       const hasTemplate = "template" in f;
@@ -8170,7 +8235,7 @@ function registerResources(server) {
 }
 
 // packages/dynamic-form-mcp/src/tools/lookup.tool.ts
-import { z as z56 } from "zod";
+import { z as z57 } from "zod";
 
 // packages/dynamic-form-mcp/src/tools/data/lookup-topics.ts
 var TOPICS = {
@@ -9905,25 +9970,42 @@ provideDynamicForm({
 | FieldContext | \`ctx.value()\` | \`ctx.valueOf('path' as never)\` | custom validators |`
   },
   containers: {
-    brief: `| Container | Label? | Logic? | Notes |
-|-----------|--------|--------|-------|
-| page | NO | hidden only | Nav buttons INSIDE |
-| group | NO | hidden only | Creates nested object |
-| array | NO | hidden only | Two APIs: \`template\`+\`value\` (simplified) or \`fields\` (full) |
-| row | NO | hidden only | Layout only |`,
+    brief: `| Container | Label? | Logic? | Value | Notes |
+|-----------|--------|--------|-------|-------|
+| page | NO | hidden only | flattened | Nav buttons INSIDE |
+| group | NO | hidden only | nested under its key | Creates nested object |
+| array | NO | hidden only | nested under its key | Two APIs: \`template\`+\`value\` (simplified) or \`fields\` (full) |
+| row | NO | hidden only | flattened | Layout only |
+| container | NO | hidden only | flattened | Layout + REQUIRED \`wrappers\` chain |`,
     full: `# Container Rules
 
-| Container | Label? | Logic? | Allowed Children | Notes |
-|-----------|--------|--------|------------------|-------|
-| page | NO | YES (hidden only) | rows, groups, arrays, leaf fields, buttons | Nav buttons go INSIDE |
-| group | NO | YES (hidden only) | rows, arrays, leaf fields (NOT pages, groups) | Creates nested object |
-| array | NO | YES (hidden only) | rows, groups, leaf fields (NOT pages, arrays) | Two APIs: \`template\`+\`value\` (simplified) or \`fields\` (full) |
-| row | NO | YES (hidden only) | groups, arrays, containers, nested rows, hidden fields, leaf fields (NOT pages) | Layout only |
+| Container | Label? | Logic? | Value Handling | Allowed Children | Notes |
+|-----------|--------|--------|----------------|------------------|-------|
+| page | NO | YES (hidden only) | flattened | rows, groups, arrays, containers, hidden, leaf fields, buttons (NOT pages) | Nav buttons go INSIDE |
+| group | NO | YES (hidden only) | nested under its key | rows, arrays, containers, hidden, leaf fields, buttons (NOT pages, groups) | Creates nested object |
+| array | NO | YES (hidden only) | nested under its key | rows, groups, containers, hidden, leaf fields, buttons (NOT pages, arrays) | Two APIs: \`template\`+\`value\` (simplified) or \`fields\` (full) |
+| row | NO | YES (hidden only) | flattened | groups, arrays, containers, leaf fields, buttons (NOT pages, nested rows, hidden) | Layout only |
+| container | NO | YES (hidden only) | flattened | rows, groups, arrays, nested containers, hidden, leaf fields, buttons (NOT pages) | \`wrappers\` is REQUIRED (use [] for none) |
+
+**Value handling decides which container you want.** \`page\`, \`row\` and \`container\` flatten: their children land directly in the parent value, and the container key never appears in the submitted data. \`group\` and \`array\` nest their children under their own key.
+
+That difference is not cosmetic, so these are not interchangeable:
+
+\`\`\`typescript
+// container \u2192 { street: '', city: '' }        (chrome only, key not in the value)
+{ key: 'billing', type: 'container', wrappers: [{ type: 'css', cssClasses: 'card' }], fields: [street, city] }
+
+// group     \u2192 { billing: { street: '', city: '' } }   (adds a level to the value)
+{ key: 'billing', type: 'group', fields: [street, city] }
+\`\`\`
+
+Only \`group\` and \`array\` own a schema path, so only they take container-level \`validators\`, \`required\` and \`validationMessages\`. Reach for \`container\` when you want chrome around fields without changing the data shape, and for \`group\` when you want the nesting or the cross-field validation.
 
 **CRITICAL:**
-- All containers (page, group, row, array) support only the \`hidden\` logic type for conditional visibility.
+- All containers (page, group, row, array, container) support only the \`hidden\` logic type for conditional visibility.
 - For other logic types (disabled, required, readonly, derivation), apply them to child fields instead.
-- Pages cannot be nested - ALL top-level fields must be pages if using multi-page mode.`
+- Pages cannot be nested - ALL top-level fields must be pages if using multi-page mode.
+- Rows reject nested rows and hidden fields; put hidden fields at page or form level.`
   },
   "field-placement": {
     brief: `**Multi-page:** ALL root fields must be pages. Hidden fields go INSIDE first page.
@@ -10717,7 +10799,8 @@ var TOPIC_DESCRIPTIONS = {
   "field-placement": "Which fields can go where \u2014 nesting and placement rules",
   "logic-matrix": "Which logic types are supported on which field types",
   "context-api": "FieldContext API \u2014 valueOf(), formValue, parent, arrayIndex",
-  containers: "Overview of all container types (group, row, array, page)",
+  containers: "Overview of all container types (group, row, array, container, page) and what each may hold",
+  container: "Wraps children in a wrapper chain; flattens their values into the parent like a row",
   "array-buttons": "Add/remove array item button configuration",
   "custom-validators": "Custom validator functions via validators array",
   conditions: "Condition operators and types for logic rules",
@@ -10977,7 +11060,7 @@ function formatTopicItem(key) {
 }
 function getTopicList() {
   const fieldTypes = ["input", "select", "slider", "radio", "checkbox", "textarea", "datepicker", "toggle", "text", "hidden"];
-  const containers = ["group", "row", "array", "simplified-array", "page"];
+  const containers = [...getFieldTypesByCategory("container").map((f) => f.type), "simplified-array"];
   const wrappers = ["wrappers", ...getWrappers().map((w) => w.type)];
   const addons = ["addons", ...getAddonTypes().map((k) => k.type)];
   const concepts = [
@@ -11033,7 +11116,7 @@ ${patterns.map(formatTopicItem).join("\n")}
 }
 function formatFieldInfoFull(field, uiFieldType) {
   const lines = [];
-  const isContainer = ["row", "group", "array", "page"].includes(field.type);
+  const isContainer = field.category === "container";
   const isHidden = field.type === "hidden";
   lines.push(`## ${field.type} field`);
   lines.push("");
@@ -11462,11 +11545,11 @@ Patterns: field-placement, logic-matrix, context-api, containers, multi-page-got
 Use topic="list" to see all available topics with descriptions.
 Use ngforge_search query="your question" to find topics by keyword.`,
     {
-      topic: z56.string().describe(
-        'Topic to look up: field types (input, select, hidden, group, row, array, page), wrappers (wrappers, css, section, arraySection), concepts (validation, conditional, derivation, property-derivation, options-format), patterns (golden-path, pitfalls, multi-page-gotchas), or "list" to see all topics'
+      topic: z57.string().describe(
+        'Topic to look up: field types (input, select, hidden, group, row, array, container, page), wrappers (wrappers, css, section, arraySection), concepts (validation, conditional, derivation, property-derivation, options-format), patterns (golden-path, pitfalls, multi-page-gotchas), or "list" to see all topics'
       ),
-      depth: z56.enum(["brief", "full", "schema"]).default("full").describe("brief=quick syntax (~20 lines), full=complete docs with examples, schema=include JSON schema"),
-      uiIntegration: z56.enum(UI_INTEGRATIONS2).optional().describe("Filter UI-specific info (only with depth=schema). material, bootstrap, primeng, ionic")
+      depth: z57.enum(["brief", "full", "schema"]).default("full").describe("brief=quick syntax (~20 lines), full=complete docs with examples, schema=include JSON schema"),
+      uiIntegration: z57.enum(UI_INTEGRATIONS2).optional().describe("Filter UI-specific info (only with depth=schema). material, bootstrap, primeng, ionic")
     },
     async ({ topic, depth, uiIntegration }) => {
       const normalizedTopic = topic.toLowerCase().trim();
@@ -11514,7 +11597,7 @@ ${nextSteps}`;
 }
 
 // packages/dynamic-form-mcp/src/tools/examples.tool.ts
-import { z as z57 } from "zod";
+import { z as z58 } from "zod";
 var PATTERNS = {
   // ========== MINIMAL PATTERNS (NEW) ==========
   "minimal-multipage": {
@@ -13779,10 +13862,10 @@ Standard patterns: derivation, property-derivation, multi-page, conditional, val
 Use pattern="list" to see all available patterns.
 Use depth="minimal" for code-only output (no markdown).`,
     {
-      pattern: z57.string().optional().describe(
+      pattern: z58.string().optional().describe(
         'Pattern to get: minimal-multipage, minimal-array, minimal-simplified-array, minimal-conditional, minimal-validation, minimal-hidden, derivation, property-derivation, multi-page, conditional, validation, complete, mega. Use "list" to see all.'
       ),
-      depth: z57.enum(["minimal", "brief", "full", "explained"]).default("full").describe(
+      depth: z58.enum(["minimal", "brief", "full", "explained"]).default("full").describe(
         "minimal=code only (~20-50 lines), brief=code+summary, full=code+comments (default), explained=code+detailed explanation"
       )
     },
@@ -13847,7 +13930,7 @@ function extractCode(markdown) {
 }
 
 // packages/dynamic-form-mcp/src/tools/validate.tool.ts
-import { z as z58 } from "zod";
+import { z as z59 } from "zod";
 var UI_INTEGRATIONS3 = ["material", "bootstrap", "primeng", "ionic"];
 var ERROR_TOPIC_HINTS = [
   { pattern: /options/i, hint: '`ngforge_lookup topic="options-format"` \u2014 correct options syntax' },
@@ -13900,10 +13983,10 @@ Example errors you'll see:
 - "options MUST be at FIELD level, NOT inside props"
 - "containers only support 'hidden' logic type"`,
     {
-      config: z58.union([z58.string(), z58.object({}).passthrough()]).describe(
+      config: z59.union([z59.string(), z59.object({}).passthrough()]).describe(
         "File path (.ts/.js) OR JSON string OR JSON object. Auto-detects: paths ending in .ts/.js or starting with / are treated as files."
       ),
-      uiIntegration: z58.enum(UI_INTEGRATIONS3).default("material").describe("UI library to validate against (material, bootstrap, primeng, ionic). Defaults to material.")
+      uiIntegration: z59.enum(UI_INTEGRATIONS3).default("material").describe("UI library to validate against (material, bootstrap, primeng, ionic). Defaults to material.")
     },
     async ({ config, uiIntegration }) => {
       try {
@@ -13995,7 +14078,7 @@ If validating JSON, ensure:
 }
 
 // packages/dynamic-form-mcp/src/tools/scaffold.tool.ts
-import { z as z59 } from "zod";
+import { z as z60 } from "zod";
 var UI_INTEGRATIONS4 = ["material", "bootstrap", "primeng", "ionic"];
 function parseFieldDefs(fields) {
   return fields.map((f) => {
@@ -14250,12 +14333,12 @@ Examples:
 - With groups: pages=0 groups=["address","billing"]
 - With hidden: hidden=["userId:abc123","source:web"]`,
     {
-      pages: z59.number().min(0).max(10).default(0).describe("Number of pages (0 = single-page form, 1-10 = multi-page wizard)"),
-      arrays: z59.array(z59.string()).optional().describe('Array field names for dynamic lists, e.g., ["contacts", "addresses"]'),
-      groups: z59.array(z59.string()).optional().describe('Group field names for nested objects, e.g., ["address", "billing"]'),
-      hidden: z59.array(z59.string()).optional().describe('Hidden fields as "name:value" pairs, e.g., ["userId:abc", "version:1"]'),
-      fields: z59.array(z59.string()).optional().describe('Basic fields as "name:type" pairs, e.g., ["email:input", "country:select", "age:slider"]'),
-      uiIntegration: z59.enum(UI_INTEGRATIONS4).default("material").describe("UI library (for future UI-specific props). Defaults to material.")
+      pages: z60.number().min(0).max(10).default(0).describe("Number of pages (0 = single-page form, 1-10 = multi-page wizard)"),
+      arrays: z60.array(z60.string()).optional().describe('Array field names for dynamic lists, e.g., ["contacts", "addresses"]'),
+      groups: z60.array(z60.string()).optional().describe('Group field names for nested objects, e.g., ["address", "billing"]'),
+      hidden: z60.array(z60.string()).optional().describe('Hidden fields as "name:value" pairs, e.g., ["userId:abc", "version:1"]'),
+      fields: z60.array(z60.string()).optional().describe('Basic fields as "name:type" pairs, e.g., ["email:input", "country:select", "age:slider"]'),
+      uiIntegration: z60.enum(UI_INTEGRATIONS4).default("material").describe("UI library (for future UI-specific props). Defaults to material.")
     },
     async ({ pages, arrays = [], groups = [], hidden = [], fields = [] }) => {
       const fieldDefs = parseFieldDefs(fields);
@@ -14297,11 +14380,11 @@ Examples:
 }
 
 // packages/dynamic-form-mcp/src/tools/search.tool.ts
-import { z as z60 } from "zod";
+import { z as z61 } from "zod";
 var searchIndex = null;
 function getTopicSubcategory(key) {
   const fieldTypes = ["input", "select", "slider", "radio", "checkbox", "textarea", "datepicker", "toggle", "text", "hidden"];
-  const containers = ["group", "row", "array", "simplified-array", "page"];
+  const containers = [...getFieldTypesByCategory("container").map((f) => f.type), "simplified-array"];
   const concepts = [
     "validation",
     "validation-messages",
@@ -14341,6 +14424,19 @@ function buildIndex() {
       toolCall: `ngforge_lookup topic="${key}"`
     });
   }
+  for (const field of getFieldTypes()) {
+    if (TOPICS[field.type]) continue;
+    const description = TOPIC_DESCRIPTIONS[field.type] || field.description;
+    entries.push({
+      id: field.type,
+      category: "topic",
+      subcategory: getTopicSubcategory(field.type),
+      description,
+      aliases: aliasMap[field.type] || [],
+      content: `${description} ${field.description}`.toLowerCase(),
+      toolCall: `ngforge_lookup topic="${field.type}"`
+    });
+  }
   for (const [key, pattern] of Object.entries(PATTERNS)) {
     entries.push({
       id: key,
@@ -14445,7 +14541,7 @@ Use this when you don't know the exact topic name.
 
 New to ng-forge? Start with: ngforge_lookup topic="workflow"`,
     {
-      query: z60.string().describe("Natural language or keywords to search for")
+      query: z61.string().describe("Natural language or keywords to search for")
     },
     async ({ query }) => {
       const index = buildIndex();