@gxp-dev/mod-ui 2.0.0

package/dist/definitions/elements/BooleanElement.js

@@ -0,0 +1,112 @@
+const e = {
+  type: "boolean.checkbox",
+  label: "Boolean Label",
+  defaultValue: !1,
+  columns: 12,
+  columnsSm: 12,
+  columnsMd: 12,
+  columnsLg: 12,
+  columnsXl: 12
+}, o = {
+  icon: "square-check",
+  displayLabel: "True or False",
+  elementCategory: "boolean",
+  description: "Create a boolean field to store true/false values and display as a checkbox, switch, radio button, or icon toggle."
+}, l = {
+  label: {
+    type: "input.text",
+    defaultValue: "",
+    label: "Label",
+    columns: 12,
+    section: "configuration"
+  },
+  name: {
+    type: "picker.data-model",
+    defaultValue: "",
+    label: "Name",
+    columns: 12,
+    section: "advanced"
+  },
+  style: {
+    type: "option-select.select",
+    defaultValue: "checkbox",
+    label: "Boolean Style",
+    columns: 6,
+    selectOptions: [
+      { label: "Checkbox", value: "checkbox" },
+      { label: "Switch", value: "switch" },
+      { label: "Radio", value: "radio" },
+      { label: "Icon Toggle", value: "icon-toggle" }
+    ],
+    section: "layout"
+  },
+  defaultValue: {
+    type: "boolean.checkbox",
+    label: "Default Value",
+    columns: 12,
+    section: "configuration"
+  },
+  required: {
+    type: "boolean.switch",
+    label: "Make item required",
+    columns: 6,
+    section: "configuration"
+  },
+  readonly: {
+    type: "boolean.switch",
+    label: "Make item read-only",
+    columns: 6,
+    section: "configuration"
+  },
+  inline: {
+    type: "boolean.switch",
+    label: "Inline Options",
+    columns: 6,
+    section: "layout",
+    conditionParams: [{ name: "style", logic: "==", value: "radio" }]
+  },
+  trueLabel: {
+    type: "input.text",
+    label: "True Label",
+    columns: 6,
+    section: "configuration",
+    conditionParams: [
+      { name: "style", logic: "in-array", value: ["radio", "switch"] }
+    ]
+  },
+  falseLabel: {
+    type: "input.text",
+    label: "False Label",
+    columns: 6,
+    section: "configuration",
+    conditionParams: [
+      { name: "style", logic: "in-array", value: ["radio", "switch"] }
+    ]
+  },
+  trueIcon: {
+    type: "picker.icon",
+    label: "True Icon",
+    columns: 6,
+    section: "configuration",
+    conditionParams: [{ name: "style", logic: "==", value: "icon-toggle" }]
+  },
+  falseIcon: {
+    type: "picker.icon",
+    label: "False Icon",
+    columns: 6,
+    section: "configuration",
+    conditionParams: [{ name: "style", logic: "==", value: "icon-toggle" }]
+  }
+}, a = {
+  checkbox: { displayLabel: "Checkbox", description: "A standard checkbox for toggling a true/false value." },
+  switch: { displayLabel: "Switch", description: "A toggle switch for enabling or disabling a setting." },
+  radio: { displayLabel: "Radio", description: "Radio buttons showing true/false as two labelled choices." },
+  "icon-toggle": { displayLabel: "Icon Toggle", description: "An icon that toggles between two states with custom icons." }
+};
+export {
+  e as BooleanElementDefaults,
+  l as BooleanElementEditConfig,
+  o as BooleanElementMetadata,
+  a as BooleanStyleMetadataMap
+};
+//# sourceMappingURL=BooleanElement.js.map

package/dist/definitions/elements/BooleanElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BooleanElement.js","sources":["../../../src/definitions/elements/BooleanElement.ts"],"sourcesContent":["import type {\n  BaseElement,\n  EditConfig,\n  ElementMetadata,\n} from \"@/definitions/shared/base\"\nimport type { ValidationConfig } from \"@/definitions/shared/validation\"\n\n/**\n * Variants of the `boolean` element type. Each value here maps 1:1 to a\n * Vue file under `src/elements/boolean/` via the engine's registry.\n */\nexport type BooleanStyle = \"checkbox\" | \"switch\" | \"radio\" | \"icon-toggle\"\n\nexport interface BooleanElement extends BaseElement<`boolean.${BooleanStyle}`> {\n  name: string\n  label: string\n  defaultValue?: boolean\n  required?: boolean\n  readonly?: boolean\n  /** For `radio`: render the two choices on the same row. */\n  inline?: boolean\n  /** Override the label shown next to / on top of the control's \"true\" state. */\n  trueLabel?: string\n  /** Override the label shown next to / on top of the control's \"false\" state. */\n  falseLabel?: string\n  /** For `icon-toggle`: lucide icon name when value is true. */\n  trueIcon?: string\n  /** For `icon-toggle`: lucide icon name when value is false. */\n  falseIcon?: string\n  /** Validation rules (Laravel-style strings). */\n  validation?: ValidationConfig\n}\n\nexport const BooleanElementDefaults = {\n  type: \"boolean.checkbox\",\n  label: \"Boolean Label\",\n  defaultValue: false,\n  columns: 12,\n  columnsSm: 12,\n  columnsMd: 12,\n  columnsLg: 12,\n  columnsXl: 12,\n} as const satisfies Partial<BooleanElement>\n\nexport const BooleanElementMetadata = {\n  icon: \"square-check\",\n  displayLabel: \"True or False\",\n  elementCategory: \"boolean\",\n  description:\n    \"Create a boolean field to store true/false values and display as a checkbox, switch, radio button, or icon toggle.\",\n} as const satisfies ElementMetadata\n\n/**\n * EditConfig describes how the FormBuilder inspector renders each\n * configurable property. Each key matches a property on `BooleanElement`;\n * the value is a (loosely-typed) element spec.\n */\nexport const BooleanElementEditConfig = {\n  label: {\n    type: \"input.text\",\n    defaultValue: \"\",\n    label: \"Label\",\n    columns: 12,\n    section: \"configuration\",\n  },\n  name: {\n    type: \"picker.data-model\",\n    defaultValue: \"\",\n    label: \"Name\",\n    columns: 12,\n    section: \"advanced\",\n  },\n  style: {\n    type: \"option-select.select\",\n    defaultValue: \"checkbox\",\n    label: \"Boolean Style\",\n    columns: 6,\n    selectOptions: [\n      { label: \"Checkbox\", value: \"checkbox\" },\n      { label: \"Switch\", value: \"switch\" },\n      { label: \"Radio\", value: \"radio\" },\n      { label: \"Icon Toggle\", value: \"icon-toggle\" },\n    ],\n    section: \"layout\",\n  },\n  defaultValue: {\n    type: \"boolean.checkbox\",\n    label: \"Default Value\",\n    columns: 12,\n    section: \"configuration\",\n  },\n  required: {\n    type: \"boolean.switch\",\n    label: \"Make item required\",\n    columns: 6,\n    section: \"configuration\",\n  },\n  readonly: {\n    type: \"boolean.switch\",\n    label: \"Make item read-only\",\n    columns: 6,\n    section: \"configuration\",\n  },\n  inline: {\n    type: \"boolean.switch\",\n    label: \"Inline Options\",\n    columns: 6,\n    section: \"layout\",\n    conditionParams: [{ name: \"style\", logic: \"==\", value: \"radio\" }],\n  },\n  trueLabel: {\n    type: \"input.text\",\n    label: \"True Label\",\n    columns: 6,\n    section: \"configuration\",\n    conditionParams: [\n      { name: \"style\", logic: \"in-array\", value: [\"radio\", \"switch\"] },\n    ],\n  },\n  falseLabel: {\n    type: \"input.text\",\n    label: \"False Label\",\n    columns: 6,\n    section: \"configuration\",\n    conditionParams: [\n      { name: \"style\", logic: \"in-array\", value: [\"radio\", \"switch\"] },\n    ],\n  },\n  trueIcon: {\n    type: \"picker.icon\",\n    label: \"True Icon\",\n    columns: 6,\n    section: \"configuration\",\n    conditionParams: [{ name: \"style\", logic: \"==\", value: \"icon-toggle\" }],\n  },\n  falseIcon: {\n    type: \"picker.icon\",\n    label: \"False Icon\",\n    columns: 6,\n    section: \"configuration\",\n    conditionParams: [{ name: \"style\", logic: \"==\", value: \"icon-toggle\" }],\n  },\n} as const satisfies EditConfig\n\nexport const BooleanStyleMetadataMap: Partial<Record<BooleanStyle, { displayLabel: string; description: string }>> = {\n  checkbox: { displayLabel: \"Checkbox\", description: \"A standard checkbox for toggling a true/false value.\" },\n  switch: { displayLabel: \"Switch\", description: \"A toggle switch for enabling or disabling a setting.\" },\n  radio: { displayLabel: \"Radio\", description: \"Radio buttons showing true/false as two labelled choices.\" },\n  \"icon-toggle\": { displayLabel: \"Icon Toggle\", description: \"An icon that toggles between two states with custom icons.\" },\n}\n"],"names":["BooleanElementDefaults","BooleanElementMetadata","BooleanElementEditConfig","BooleanStyleMetadataMap"],"mappings":"AAiCO,MAAMA,IAAyB;AAAA,EACpC,MAAM;AAAA,EACN,OAAO;AAAA,EACP,cAAc;AAAA,EACd,SAAS;AAAA,EACT,WAAW;AAAA,EACX,WAAW;AAAA,EACX,WAAW;AAAA,EACX,WAAW;AACb,GAEaC,IAAyB;AAAA,EACpC,MAAM;AAAA,EACN,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,aACE;AACJ,GAOaC,IAA2B;AAAA,EACtC,OAAO;AAAA,IACL,MAAM;AAAA,IACN,cAAc;AAAA,IACd,OAAO;AAAA,IACP,SAAS;AAAA,IACT,SAAS;AAAA,EAAA;AAAA,EAEX,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,cAAc;AAAA,IACd,OAAO;AAAA,IACP,SAAS;AAAA,IACT,SAAS;AAAA,EAAA;AAAA,EAEX,OAAO;AAAA,IACL,MAAM;AAAA,IACN,cAAc;AAAA,IACd,OAAO;AAAA,IACP,SAAS;AAAA,IACT,eAAe;AAAA,MACb,EAAE,OAAO,YAAY,OAAO,WAAA;AAAA,MAC5B,EAAE,OAAO,UAAU,OAAO,SAAA;AAAA,MAC1B,EAAE,OAAO,SAAS,OAAO,QAAA;AAAA,MACzB,EAAE,OAAO,eAAe,OAAO,cAAA;AAAA,IAAc;AAAA,IAE/C,SAAS;AAAA,EAAA;AAAA,EAEX,cAAc;AAAA,IACZ,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,IACT,SAAS;AAAA,EAAA;AAAA,EAEX,UAAU;AAAA,IACR,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,IACT,SAAS;AAAA,EAAA;AAAA,EAEX,UAAU;AAAA,IACR,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,IACT,SAAS;AAAA,EAAA;AAAA,EAEX,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,IACT,SAAS;AAAA,IACT,iBAAiB,CAAC,EAAE,MAAM,SAAS,OAAO,MAAM,OAAO,QAAA,CAAS;AAAA,EAAA;AAAA,EAElE,WAAW;AAAA,IACT,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,IACT,SAAS;AAAA,IACT,iBAAiB;AAAA,MACf,EAAE,MAAM,SAAS,OAAO,YAAY,OAAO,CAAC,SAAS,QAAQ,EAAA;AAAA,IAAE;AAAA,EACjE;AAAA,EAEF,YAAY;AAAA,IACV,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,IACT,SAAS;AAAA,IACT,iBAAiB;AAAA,MACf,EAAE,MAAM,SAAS,OAAO,YAAY,OAAO,CAAC,SAAS,QAAQ,EAAA;AAAA,IAAE;AAAA,EACjE;AAAA,EAEF,UAAU;AAAA,IACR,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,IACT,SAAS;AAAA,IACT,iBAAiB,CAAC,EAAE,MAAM,SAAS,OAAO,MAAM,OAAO,cAAA,CAAe;AAAA,EAAA;AAAA,EAExE,WAAW;AAAA,IACT,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,IACT,SAAS;AAAA,IACT,iBAAiB,CAAC,EAAE,MAAM,SAAS,OAAO,MAAM,OAAO,cAAA,CAAe;AAAA,EAAA;AAE1E,GAEaC,IAAwG;AAAA,EACnH,UAAU,EAAE,cAAc,YAAY,aAAa,uDAAA;AAAA,EACnD,QAAQ,EAAE,cAAc,UAAU,aAAa,uDAAA;AAAA,EAC/C,OAAO,EAAE,cAAc,SAAS,aAAa,4DAAA;AAAA,EAC7C,eAAe,EAAE,cAAc,eAAe,aAAa,6DAAA;AAC7D;"}

package/dist/definitions/elements/BuilderElement.d.ts

@@ -0,0 +1,110 @@
+import { BaseElement } from '../shared/base';
+/**
+ * Variants of the `builder` element type. Each value here maps 1:1 to a
+ * Vue file (or folder) under `src/elements/builder/` via the engine's registry.
+ *
+ * Builders are inherently recursive — they author other elements/cards —
+ * so the typed shape stays intentionally loose. Specific payloads are
+ * narrowed inside each renderer.
+ */
+export type BuilderStyle = "form-builder" | "object-builder" | "preset-builder" | "reactive-canvas-builder" | "element-list-builder" | "quiz-builder" | "dependency-list-builder" | "grid-builder";
+export interface BuilderElement extends BaseElement<`builder.${BuilderStyle}`> {
+    name?: string | null;
+    label?: string;
+    /**
+     * Default payload for the builder. Builders accept arbitrary nested
+     * shapes (form schemas, object trees, canvas docs) so this stays
+     * intentionally loose. Concrete typing happens in each renderer.
+     */
+    defaultValue?: unknown;
+    /**
+     * Element/card types to hide in the builder's palette. Mirrors the v2
+     * platform's filter prop on FormBuilder.
+     */
+    hideElementTypes?: ReadonlyArray<string>;
+    hideCardTypes?: ReadonlyArray<string>;
+    /** Models the builder is allowed to author against (DependencyList, Quiz). */
+    allowedModels?: ReadonlyArray<string>;
+    /** Hide the surrounding chrome when the builder is embedded in a card. */
+    displayHeader?: boolean;
+    /** Route descriptor for asset lookups inside the builder. */
+    assetSearchRoute?: Record<string, unknown>;
+    /** Route descriptor for asset uploads inside the builder. */
+    assetUploadRoute?: Record<string, unknown>;
+    /** Arbitrary builder-specific config (canvas docs, grid templates, etc.). */
+    builderConfig?: Record<string, unknown>;
+}
+export declare const BuilderElementDefaults: {
+    readonly type: "builder.object-builder";
+    readonly columns: 12;
+    readonly columnsSm: 12;
+    readonly columnsMd: 12;
+    readonly columnsLg: 12;
+    readonly columnsXl: 12;
+};
+export declare const BuilderElementMetadata: {
+    readonly icon: "puzzle";
+    readonly displayLabel: "Builder";
+    readonly elementCategory: "builder";
+    readonly description: "Add a builder to allow creating of forms, objects, reactive canvases, and more.";
+};
+export declare const BuilderElementEditConfig: {
+    readonly label: {
+        readonly type: "input.text";
+        readonly defaultValue: "";
+        readonly label: "Label";
+        readonly columnsMd: 6;
+        readonly columns: 12;
+        readonly section: "configuration";
+    };
+    readonly name: {
+        readonly type: "picker.data-model";
+        readonly defaultValue: "";
+        readonly label: "Name";
+        readonly columns: 12;
+        readonly section: "advanced";
+    };
+    readonly style: {
+        readonly type: "option-select.select";
+        readonly defaultValue: "object-builder";
+        readonly label: "Builder Style";
+        readonly columns: 12;
+        readonly section: "layout";
+        readonly selectOptions: readonly [{
+            readonly label: "Form Builder";
+            readonly value: "form-builder";
+        }, {
+            readonly label: "Object Builder";
+            readonly value: "object-builder";
+        }, {
+            readonly label: "Preset Builder";
+            readonly value: "preset-builder";
+        }, {
+            readonly label: "Reactive Canvas Builder";
+            readonly value: "reactive-canvas-builder";
+        }, {
+            readonly label: "Element List Builder";
+            readonly value: "element-list-builder";
+        }, {
+            readonly label: "Quiz Builder";
+            readonly value: "quiz-builder";
+        }, {
+            readonly label: "Dependency List Builder";
+            readonly value: "dependency-list-builder";
+        }, {
+            readonly label: "Grid Builder";
+            readonly value: "grid-builder";
+        }];
+    };
+    readonly displayHeader: {
+        readonly type: "boolean.switch";
+        readonly label: "Show builder header";
+        readonly columns: 6;
+        readonly section: "layout";
+    };
+};
+export declare const BuilderStyleMetadataMap: Partial<Record<BuilderStyle, {
+    displayLabel: string;
+    description: string;
+}>>;
+//# sourceMappingURL=BuilderElement.d.ts.map

package/dist/definitions/elements/BuilderElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BuilderElement.d.ts","sourceRoot":"","sources":["../../../src/definitions/elements/BuilderElement.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,WAAW,EAGZ,MAAM,2BAA2B,CAAA;AAElC;;;;;;;GAOG;AACH,MAAM,MAAM,YAAY,GACpB,cAAc,GACd,gBAAgB,GAChB,gBAAgB,GAChB,yBAAyB,GACzB,sBAAsB,GACtB,cAAc,GACd,yBAAyB,GACzB,cAAc,CAAA;AAElB,MAAM,WAAW,cAAe,SAAQ,WAAW,CAAC,WAAW,YAAY,EAAE,CAAC;IAC5E,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;IACxC,aAAa,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;IACrC,8EAA8E;IAC9E,aAAa,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;IACrC,0EAA0E;IAC1E,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,6DAA6D;IAC7D,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC1C,6DAA6D;IAC7D,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC1C,6EAA6E;IAC7E,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CACxC;AAED,eAAO,MAAM,sBAAsB;;;;;;;CAOS,CAAA;AAE5C,eAAO,MAAM,sBAAsB;;;;;CAMC,CAAA;AAEpC,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCN,CAAA;AAE/B,eAAO,MAAM,uBAAuB,EAAE,OAAO,CAAC,MAAM,CAAC,YAAY,EAAE;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,CAAC,CAShH,CAAA"}

package/dist/definitions/elements/BuilderElement.js

@@ -0,0 +1,68 @@
+const e = {
+  type: "builder.object-builder",
+  columns: 12,
+  columnsSm: 12,
+  columnsMd: 12,
+  columnsLg: 12,
+  columnsXl: 12
+}, l = {
+  icon: "puzzle",
+  displayLabel: "Builder",
+  elementCategory: "builder",
+  description: "Add a builder to allow creating of forms, objects, reactive canvases, and more."
+}, i = {
+  label: {
+    type: "input.text",
+    defaultValue: "",
+    label: "Label",
+    columnsMd: 6,
+    columns: 12,
+    section: "configuration"
+  },
+  name: {
+    type: "picker.data-model",
+    defaultValue: "",
+    label: "Name",
+    columns: 12,
+    section: "advanced"
+  },
+  style: {
+    type: "option-select.select",
+    defaultValue: "object-builder",
+    label: "Builder Style",
+    columns: 12,
+    section: "layout",
+    selectOptions: [
+      { label: "Form Builder", value: "form-builder" },
+      { label: "Object Builder", value: "object-builder" },
+      { label: "Preset Builder", value: "preset-builder" },
+      { label: "Reactive Canvas Builder", value: "reactive-canvas-builder" },
+      { label: "Element List Builder", value: "element-list-builder" },
+      { label: "Quiz Builder", value: "quiz-builder" },
+      { label: "Dependency List Builder", value: "dependency-list-builder" },
+      { label: "Grid Builder", value: "grid-builder" }
+    ]
+  },
+  displayHeader: {
+    type: "boolean.switch",
+    label: "Show builder header",
+    columns: 6,
+    section: "layout"
+  }
+}, a = {
+  "form-builder": { displayLabel: "Form Builder", description: "A visual builder for creating form element schemas." },
+  "object-builder": { displayLabel: "Object Builder", description: "A builder for authoring typed key-value object schemas." },
+  "preset-builder": { displayLabel: "Preset Builder", description: "A named preset wrapper around a form builder schema." },
+  "reactive-canvas-builder": { displayLabel: "Reactive Canvas", description: "A builder for positioning elements on an absolute canvas." },
+  "element-list-builder": { displayLabel: "Element List", description: "A builder for authoring a flat list of elements." },
+  "quiz-builder": { displayLabel: "Quiz Builder", description: "A builder for creating quiz questions and answer options." },
+  "dependency-list-builder": { displayLabel: "Dependency Rules", description: "A builder for conditional dependency rules between fields." },
+  "grid-builder": { displayLabel: "Grid Builder", description: "A builder for arranging elements in a CSS grid layout." }
+};
+export {
+  e as BuilderElementDefaults,
+  i as BuilderElementEditConfig,
+  l as BuilderElementMetadata,
+  a as BuilderStyleMetadataMap
+};
+//# sourceMappingURL=BuilderElement.js.map

package/dist/definitions/elements/BuilderElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BuilderElement.js","sources":["../../../src/definitions/elements/BuilderElement.ts"],"sourcesContent":["import type {\n  BaseElement,\n  EditConfig,\n  ElementMetadata,\n} from \"@/definitions/shared/base\"\n\n/**\n * Variants of the `builder` element type. Each value here maps 1:1 to a\n * Vue file (or folder) under `src/elements/builder/` via the engine's registry.\n *\n * Builders are inherently recursive — they author other elements/cards —\n * so the typed shape stays intentionally loose. Specific payloads are\n * narrowed inside each renderer.\n */\nexport type BuilderStyle =\n  | \"form-builder\"\n  | \"object-builder\"\n  | \"preset-builder\"\n  | \"reactive-canvas-builder\"\n  | \"element-list-builder\"\n  | \"quiz-builder\"\n  | \"dependency-list-builder\"\n  | \"grid-builder\"\n\nexport interface BuilderElement extends BaseElement<`builder.${BuilderStyle}`> {\n  name?: string | null\n  label?: string\n  /**\n   * Default payload for the builder. Builders accept arbitrary nested\n   * shapes (form schemas, object trees, canvas docs) so this stays\n   * intentionally loose. Concrete typing happens in each renderer.\n   */\n  defaultValue?: unknown\n  /**\n   * Element/card types to hide in the builder's palette. Mirrors the v2\n   * platform's filter prop on FormBuilder.\n   */\n  hideElementTypes?: ReadonlyArray<string>\n  hideCardTypes?: ReadonlyArray<string>\n  /** Models the builder is allowed to author against (DependencyList, Quiz). */\n  allowedModels?: ReadonlyArray<string>\n  /** Hide the surrounding chrome when the builder is embedded in a card. */\n  displayHeader?: boolean\n  /** Route descriptor for asset lookups inside the builder. */\n  assetSearchRoute?: Record<string, unknown>\n  /** Route descriptor for asset uploads inside the builder. */\n  assetUploadRoute?: Record<string, unknown>\n  /** Arbitrary builder-specific config (canvas docs, grid templates, etc.). */\n  builderConfig?: Record<string, unknown>\n}\n\nexport const BuilderElementDefaults = {\n  type: \"builder.object-builder\",\n  columns: 12,\n  columnsSm: 12,\n  columnsMd: 12,\n  columnsLg: 12,\n  columnsXl: 12,\n} as const satisfies Partial<BuilderElement>\n\nexport const BuilderElementMetadata = {\n  icon: \"puzzle\",\n  displayLabel: \"Builder\",\n  elementCategory: \"builder\",\n  description:\n    \"Add a builder to allow creating of forms, objects, reactive canvases, and more.\",\n} as const satisfies ElementMetadata\n\nexport const BuilderElementEditConfig = {\n  label: {\n    type: \"input.text\",\n    defaultValue: \"\",\n    label: \"Label\",\n    columnsMd: 6,\n    columns: 12,\n    section: \"configuration\",\n  },\n  name: {\n    type: \"picker.data-model\",\n    defaultValue: \"\",\n    label: \"Name\",\n    columns: 12,\n    section: \"advanced\",\n  },\n  style: {\n    type: \"option-select.select\",\n    defaultValue: \"object-builder\",\n    label: \"Builder Style\",\n    columns: 12,\n    section: \"layout\",\n    selectOptions: [\n      { label: \"Form Builder\", value: \"form-builder\" },\n      { label: \"Object Builder\", value: \"object-builder\" },\n      { label: \"Preset Builder\", value: \"preset-builder\" },\n      { label: \"Reactive Canvas Builder\", value: \"reactive-canvas-builder\" },\n      { label: \"Element List Builder\", value: \"element-list-builder\" },\n      { label: \"Quiz Builder\", value: \"quiz-builder\" },\n      { label: \"Dependency List Builder\", value: \"dependency-list-builder\" },\n      { label: \"Grid Builder\", value: \"grid-builder\" },\n    ],\n  },\n  displayHeader: {\n    type: \"boolean.switch\",\n    label: \"Show builder header\",\n    columns: 6,\n    section: \"layout\",\n  },\n} as const satisfies EditConfig\n\nexport const BuilderStyleMetadataMap: Partial<Record<BuilderStyle, { displayLabel: string; description: string }>> = {\n  \"form-builder\": { displayLabel: \"Form Builder\", description: \"A visual builder for creating form element schemas.\" },\n  \"object-builder\": { displayLabel: \"Object Builder\", description: \"A builder for authoring typed key-value object schemas.\" },\n  \"preset-builder\": { displayLabel: \"Preset Builder\", description: \"A named preset wrapper around a form builder schema.\" },\n  \"reactive-canvas-builder\": { displayLabel: \"Reactive Canvas\", description: \"A builder for positioning elements on an absolute canvas.\" },\n  \"element-list-builder\": { displayLabel: \"Element List\", description: \"A builder for authoring a flat list of elements.\" },\n  \"quiz-builder\": { displayLabel: \"Quiz Builder\", description: \"A builder for creating quiz questions and answer options.\" },\n  \"dependency-list-builder\": { displayLabel: \"Dependency Rules\", description: \"A builder for conditional dependency rules between fields.\" },\n  \"grid-builder\": { displayLabel: \"Grid Builder\", description: \"A builder for arranging elements in a CSS grid layout.\" },\n}\n"],"names":["BuilderElementDefaults","BuilderElementMetadata","BuilderElementEditConfig","BuilderStyleMetadataMap"],"mappings":"AAmDO,MAAMA,IAAyB;AAAA,EACpC,MAAM;AAAA,EACN,SAAS;AAAA,EACT,WAAW;AAAA,EACX,WAAW;AAAA,EACX,WAAW;AAAA,EACX,WAAW;AACb,GAEaC,IAAyB;AAAA,EACpC,MAAM;AAAA,EACN,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,aACE;AACJ,GAEaC,IAA2B;AAAA,EACtC,OAAO;AAAA,IACL,MAAM;AAAA,IACN,cAAc;AAAA,IACd,OAAO;AAAA,IACP,WAAW;AAAA,IACX,SAAS;AAAA,IACT,SAAS;AAAA,EAAA;AAAA,EAEX,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,cAAc;AAAA,IACd,OAAO;AAAA,IACP,SAAS;AAAA,IACT,SAAS;AAAA,EAAA;AAAA,EAEX,OAAO;AAAA,IACL,MAAM;AAAA,IACN,cAAc;AAAA,IACd,OAAO;AAAA,IACP,SAAS;AAAA,IACT,SAAS;AAAA,IACT,eAAe;AAAA,MACb,EAAE,OAAO,gBAAgB,OAAO,eAAA;AAAA,MAChC,EAAE,OAAO,kBAAkB,OAAO,iBAAA;AAAA,MAClC,EAAE,OAAO,kBAAkB,OAAO,iBAAA;AAAA,MAClC,EAAE,OAAO,2BAA2B,OAAO,0BAAA;AAAA,MAC3C,EAAE,OAAO,wBAAwB,OAAO,uBAAA;AAAA,MACxC,EAAE,OAAO,gBAAgB,OAAO,eAAA;AAAA,MAChC,EAAE,OAAO,2BAA2B,OAAO,0BAAA;AAAA,MAC3C,EAAE,OAAO,gBAAgB,OAAO,eAAA;AAAA,IAAe;AAAA,EACjD;AAAA,EAEF,eAAe;AAAA,IACb,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,IACT,SAAS;AAAA,EAAA;AAEb,GAEaC,IAAwG;AAAA,EACnH,gBAAgB,EAAE,cAAc,gBAAgB,aAAa,sDAAA;AAAA,EAC7D,kBAAkB,EAAE,cAAc,kBAAkB,aAAa,0DAAA;AAAA,EACjE,kBAAkB,EAAE,cAAc,kBAAkB,aAAa,uDAAA;AAAA,EACjE,2BAA2B,EAAE,cAAc,mBAAmB,aAAa,4DAAA;AAAA,EAC3E,wBAAwB,EAAE,cAAc,gBAAgB,aAAa,mDAAA;AAAA,EACrE,gBAAgB,EAAE,cAAc,gBAAgB,aAAa,4DAAA;AAAA,EAC7D,2BAA2B,EAAE,cAAc,oBAAoB,aAAa,6DAAA;AAAA,EAC5E,gBAAgB,EAAE,cAAc,gBAAgB,aAAa,yDAAA;AAC/D;"}

package/dist/definitions/elements/CardLayoutElement.d.ts

@@ -0,0 +1,265 @@
+import { BaseElement } from '../shared/base';
+/**
+ * Variants of the `card` element type. Each maps to a Vue file under
+ * `src/components/compositions/elements/card/` via the engine registry.
+ *
+ * `card.*` elements bridge the element/card divide: they act as layout
+ * containers that live inline inside any element list. In the FormBuilder,
+ * `card.list` is the primary nested canvas — its `elementList` IDs
+ * reference entries in the flat schema, enabling drag-and-drop in/out of
+ * the container. The other styles wrap their corresponding DisplayCard
+ * compositions as element-compatible renderers.
+ */
+export type CardStyle = "list" | "datatable" | "grid" | "info" | "tab";
+export interface CardLayoutElement extends BaseElement<`card.${CardStyle}`> {
+    title?: string;
+    subtitle?: string;
+    showCard?: boolean;
+    /**
+     * Builder-managed child element IDs. Resolved to `nestedElements` by
+     * the FormBuilder canvas before being passed to the composition as props.
+     */
+    elementList?: string[];
+    /**
+     * Resolved child elements passed by the FormBuilder / engine at render
+     * time. Compositions receive this, NOT `elementList`.
+     */
+    nestedElements?: Array<Record<string, unknown>>;
+    /** Vertical gap between nested elements. */
+    gutterY?: string;
+    /** Horizontal gap between nested elements. */
+    gutterX?: string;
+    /**
+     * For `card.tab`: one entry per tab. Each tab owns its own `elementList`
+     * which the FormBuilder manages as a sub-container.
+     */
+    tabs?: Array<{
+        id: string;
+        label: string;
+        elementList?: string[];
+    }>;
+    /** Active tab index shown on mount (default 0). */
+    activeTab?: number;
+    /** API endpoint for fetching table rows. */
+    dataRoute?: string;
+    /**
+     * Column definitions. Named `tableColumns` to avoid shadowing the
+     * responsive-grid `columns` field from `ResponsiveColumns`.
+     */
+    tableColumns?: Array<{
+        key: string;
+        label: string;
+        sortable?: boolean;
+    }>;
+    /** Number of CSS-grid columns (default 3). */
+    gridCols?: number;
+    /** Row height in pixels used by the grid layout (default 60). */
+    gridRowHeight?: number;
+    /** Icon shown in the card header. */
+    icon?: string;
+    /** Tailwind / CSS colour class for the header icon. */
+    iconColor?: string;
+    /** URL or asset path for a card header image. */
+    headerImage?: string;
+    /** Aspect ratio string for the header image (e.g. `"16/9"`). */
+    headerRatio?: string;
+    /** Reduce internal padding. */
+    lessPadding?: boolean;
+    /** Key/value pairs rendered as read-only rows in the card body. */
+    fields?: Array<{
+        label: string;
+        value: string;
+        icon?: string;
+        format?: string;
+        prepend?: string;
+        append?: string;
+    }>;
+}
+export declare const CardLayoutElementDefaults: {
+    readonly type: "card.list";
+    readonly showCard: true;
+    readonly gutterY: "1rem";
+    readonly gutterX: "0";
+    readonly gridCols: 3;
+    readonly gridRowHeight: 60;
+    readonly columns: 12;
+    readonly columnsSm: 12;
+    readonly columnsMd: 12;
+    readonly columnsLg: 12;
+    readonly columnsXl: 12;
+};
+export declare const CardLayoutElementMetadata: {
+    readonly icon: "layout-panel-left";
+    readonly displayLabel: "Card / Layout Block";
+    readonly elementCategory: "card";
+    readonly description: "A layout container. Use 'list' to group elements in a card, 'tab' for tabbed sections, 'info' for display tiles, or 'datatable'/'grid' for structured data.";
+};
+export declare const CardLayoutElementEditConfig: {
+    readonly style: {
+        readonly type: "option-select.select";
+        readonly defaultValue: "list";
+        readonly label: "Card Style";
+        readonly selectOptions: readonly [{
+            readonly label: "List";
+            readonly value: "list";
+        }, {
+            readonly label: "Tab Container";
+            readonly value: "tab";
+        }, {
+            readonly label: "Info Card";
+            readonly value: "info";
+        }, {
+            readonly label: "Data Table";
+            readonly value: "datatable";
+        }, {
+            readonly label: "Grid Layout";
+            readonly value: "grid";
+        }];
+        readonly columns: 12;
+        readonly section: "layout";
+    };
+    readonly title: {
+        readonly type: "input.text";
+        readonly label: "Title";
+        readonly columns: 12;
+        readonly section: "configuration";
+    };
+    readonly subtitle: {
+        readonly type: "input.text";
+        readonly label: "Subtitle";
+        readonly columns: 12;
+        readonly section: "configuration";
+        readonly conditionParams: [{
+            readonly name: "style";
+            readonly logic: "in-array";
+            readonly value: readonly ["list", "info"];
+        }];
+    };
+    readonly showCard: {
+        readonly type: "boolean.switch";
+        readonly defaultValue: true;
+        readonly label: "Show Card Chrome";
+        readonly columns: 12;
+        readonly section: "layout";
+        readonly conditionParams: [{
+            readonly name: "style";
+            readonly logic: "in-array";
+            readonly value: readonly ["list", "tab", "info"];
+        }];
+    };
+    readonly gutterY: {
+        readonly type: "input.text";
+        readonly label: "Vertical Gap";
+        readonly columns: 6;
+        readonly section: "layout";
+        readonly conditionParams: [{
+            readonly name: "style";
+            readonly logic: "in-array";
+            readonly value: readonly ["list", "tab"];
+        }];
+    };
+    readonly gutterX: {
+        readonly type: "input.text";
+        readonly label: "Horizontal Gap";
+        readonly columns: 6;
+        readonly section: "layout";
+        readonly conditionParams: [{
+            readonly name: "style";
+            readonly logic: "in-array";
+            readonly value: readonly ["list", "tab"];
+        }];
+    };
+    readonly gridCols: {
+        readonly type: "input.number";
+        readonly label: "Grid Columns";
+        readonly columns: 6;
+        readonly section: "layout";
+        readonly conditionParams: [{
+            readonly name: "style";
+            readonly logic: "==";
+            readonly value: "grid";
+        }];
+    };
+    readonly gridRowHeight: {
+        readonly type: "input.number";
+        readonly label: "Row Height (px)";
+        readonly columns: 6;
+        readonly section: "layout";
+        readonly conditionParams: [{
+            readonly name: "style";
+            readonly logic: "==";
+            readonly value: "grid";
+        }];
+    };
+    readonly dataRoute: {
+        readonly type: "input.text";
+        readonly label: "Data Route";
+        readonly columns: 12;
+        readonly section: "configuration";
+        readonly conditionParams: [{
+            readonly name: "style";
+            readonly logic: "==";
+            readonly value: "datatable";
+        }];
+    };
+    readonly icon: {
+        readonly type: "picker.icon";
+        readonly label: "Header Icon";
+        readonly columns: 6;
+        readonly section: "configuration";
+        readonly conditionParams: [{
+            readonly name: "style";
+            readonly logic: "==";
+            readonly value: "info";
+        }];
+    };
+    readonly iconColor: {
+        readonly type: "input.text";
+        readonly label: "Icon Color";
+        readonly columns: 6;
+        readonly section: "configuration";
+        readonly conditionParams: [{
+            readonly name: "style";
+            readonly logic: "==";
+            readonly value: "info";
+        }];
+    };
+    readonly headerImage: {
+        readonly type: "file.asset-picker";
+        readonly label: "Header Image";
+        readonly columns: 12;
+        readonly section: "configuration";
+        readonly conditionParams: [{
+            readonly name: "style";
+            readonly logic: "==";
+            readonly value: "info";
+        }];
+    };
+    readonly headerRatio: {
+        readonly type: "input.text";
+        readonly label: "Image Aspect Ratio";
+        readonly columns: 6;
+        readonly section: "layout";
+        readonly conditionParams: [{
+            readonly name: "style";
+            readonly logic: "==";
+            readonly value: "info";
+        }];
+    };
+    readonly lessPadding: {
+        readonly type: "boolean.switch";
+        readonly label: "Reduce Padding";
+        readonly columns: 6;
+        readonly section: "layout";
+        readonly conditionParams: [{
+            readonly name: "style";
+            readonly logic: "==";
+            readonly value: "info";
+        }];
+    };
+};
+export declare const CardStyleMetadataMap: Partial<Record<CardStyle, {
+    displayLabel: string;
+    description: string;
+}>>;
+//# sourceMappingURL=CardLayoutElement.d.ts.map

package/dist/definitions/elements/CardLayoutElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardLayoutElement.d.ts","sourceRoot":"","sources":["../../../src/definitions/elements/CardLayoutElement.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,WAAW,EAGZ,MAAM,2BAA2B,CAAA;AAElC;;;;;;;;;;GAUG;AACH,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,CAAA;AAEtE,MAAM,WAAW,iBAAkB,SAAQ,WAAW,CAAC,QAAQ,SAAS,EAAE,CAAC;IAEzE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAGlB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,EAAE,CAAA;IACtB;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAA;IAC/C,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,CAAA;IAGhB;;;OAGG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,EAAE,CAAA;KAAE,CAAC,CAAA;IACnE,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAA;IAGlB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC,CAAA;IAGxE,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,iEAAiE;IACjE,aAAa,CAAC,EAAE,MAAM,CAAA;IAGtB,qCAAqC;IACrC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,iDAAiD;IACjD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,gEAAgE;IAChE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,+BAA+B;IAC/B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,mEAAmE;IACnE,MAAM,CAAC,EAAE,KAAK,CAAC;QACb,KAAK,EAAE,MAAM,CAAA;QACb,KAAK,EAAE,MAAM,CAAA;QACb,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,MAAM,CAAC,EAAE,MAAM,CAAA;KAChB,CAAC,CAAA;CACH;AAED,eAAO,MAAM,yBAAyB;;;;;;;;;;;;CAYS,CAAA;AAE/C,eAAO,MAAM,yBAAyB;;;;;CAMF,CAAA;AAEpC,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0GT,CAAA;AAE/B,eAAO,MAAM,oBAAoB,EAAE,OAAO,CACxC,MAAM,CAAC,SAAS,EAAE;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,CAAC,CAsBjE,CAAA"}