@gxp-dev/mod-ui 2.0.8 → 2.0.12

package/dist/definitions/elements/CardLayoutElement.js

@@ -1,152 +1,217 @@
-const t = {
-  type: "card.list",
-  showCard: !0,
-  gutterY: "1rem",
-  gutterX: "0",
-  gridCols: 3,
-  gridRowHeight: 60,
-  columns: 12,
-  columnsSm: 12,
-  columnsMd: 12,
-  columnsLg: 12,
-  columnsXl: 12
-}, a = {
-  icon: "layout-panel-left",
-  displayLabel: "Card / Layout Block",
-  elementCategory: "card",
-  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."
-}, e = {
-  style: {
-    type: "option-select.select",
-    defaultValue: "list",
-    label: "Card Style",
-    selectOptions: [
-      { label: "List", value: "list" },
-      { label: "Tab Container", value: "tab" },
-      { label: "Info Card", value: "info" },
-      { label: "Data Table", value: "datatable" },
-      { label: "Grid Layout", value: "grid" }
-    ],
-    columns: 12,
-    section: "layout"
-  },
-  title: {
-    type: "input.text",
-    label: "Title",
-    columns: 12,
-    section: "configuration"
-  },
-  subtitle: {
-    type: "input.text",
-    label: "Subtitle",
-    columns: 12,
-    section: "configuration",
-    conditionParams: [{ name: "style", logic: "in-array", value: ["list", "info"] }]
-  },
-  showCard: {
-    type: "boolean.switch",
-    defaultValue: !0,
-    label: "Show Card Chrome",
-    columns: 12,
-    section: "layout",
-    conditionParams: [{ name: "style", logic: "in-array", value: ["list", "tab", "info"] }]
-  },
-  gutterY: {
-    type: "input.text",
-    label: "Vertical Gap",
-    columns: 6,
-    section: "layout",
-    conditionParams: [{ name: "style", logic: "in-array", value: ["list", "tab"] }]
-  },
-  gutterX: {
-    type: "input.text",
-    label: "Horizontal Gap",
-    columns: 6,
-    section: "layout",
-    conditionParams: [{ name: "style", logic: "in-array", value: ["list", "tab"] }]
-  },
-  gridCols: {
-    type: "input.number",
-    label: "Grid Columns",
-    columns: 6,
-    section: "layout",
-    conditionParams: [{ name: "style", logic: "==", value: "grid" }]
-  },
-  gridRowHeight: {
-    type: "input.number",
-    label: "Row Height (px)",
-    columns: 6,
-    section: "layout",
-    conditionParams: [{ name: "style", logic: "==", value: "grid" }]
-  },
-  dataRoute: {
-    type: "input.text",
-    label: "Data Route",
-    columns: 12,
-    section: "configuration",
-    conditionParams: [{ name: "style", logic: "==", value: "datatable" }]
-  },
-  icon: {
-    type: "picker.icon",
-    label: "Header Icon",
-    columns: 6,
-    section: "configuration",
-    conditionParams: [{ name: "style", logic: "==", value: "info" }]
-  },
-  iconColor: {
-    type: "input.text",
-    label: "Icon Color",
-    columns: 6,
-    section: "configuration",
-    conditionParams: [{ name: "style", logic: "==", value: "info" }]
-  },
-  headerImage: {
-    type: "file.asset-picker",
-    label: "Header Image",
-    columns: 12,
-    section: "configuration",
-    conditionParams: [{ name: "style", logic: "==", value: "info" }]
-  },
-  headerRatio: {
-    type: "input.text",
-    label: "Image Aspect Ratio",
-    columns: 6,
-    section: "layout",
-    conditionParams: [{ name: "style", logic: "==", value: "info" }]
-  },
-  lessPadding: {
-    type: "boolean.switch",
-    label: "Reduce Padding",
-    columns: 6,
-    section: "layout",
-    conditionParams: [{ name: "style", logic: "==", value: "info" }]
-  }
-}, l = {
-  list: {
-    displayLabel: "List",
-    description: "A card containing a vertical list of elements — the primary layout block."
-  },
-  tab: {
-    displayLabel: "Tab Container",
-    description: "A tabbed card that groups elements into selectable tabs."
-  },
-  info: {
-    displayLabel: "Info Card",
-    description: "A display tile with an optional header image/icon and key-value fields."
-  },
-  datatable: {
-    displayLabel: "Data Table",
-    description: "A sortable, paginated data table fetched from an API route."
-  },
-  grid: {
-    displayLabel: "Grid Layout",
-    description: "A CSS-grid canvas for structured multi-column element placement."
-  }
+//#region src/definitions/elements/CardLayoutElement.ts
+var e = {
+	type: "card.list",
+	showCard: !0,
+	gutterY: "1rem",
+	gutterX: "0",
+	gridCols: 3,
+	gridRowHeight: 60,
+	columns: 12,
+	columnsSm: 12,
+	columnsMd: 12,
+	columnsLg: 12,
+	columnsXl: 12
+}, t = {
+	icon: "layout-panel-left",
+	displayLabel: "Card / Layout Block",
+	elementCategory: "card",
+	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."
+}, n = {
+	style: {
+		type: "option-select.select",
+		defaultValue: "list",
+		label: "Card Style",
+		selectOptions: [
+			{
+				label: "List",
+				value: "list"
+			},
+			{
+				label: "Tab Container",
+				value: "tab"
+			},
+			{
+				label: "Info Card",
+				value: "info"
+			},
+			{
+				label: "Data Table",
+				value: "datatable"
+			},
+			{
+				label: "Grid Layout",
+				value: "grid"
+			}
+		],
+		columns: 12,
+		section: "layout"
+	},
+	title: {
+		type: "input.text",
+		label: "Title",
+		columns: 12,
+		section: "configuration"
+	},
+	subtitle: {
+		type: "input.text",
+		label: "Subtitle",
+		columns: 12,
+		section: "configuration",
+		conditionParams: [{
+			name: "style",
+			logic: "in-array",
+			value: ["list", "info"]
+		}]
+	},
+	showCard: {
+		type: "boolean.switch",
+		defaultValue: !0,
+		label: "Show Card Chrome",
+		columns: 12,
+		section: "layout",
+		conditionParams: [{
+			name: "style",
+			logic: "in-array",
+			value: [
+				"list",
+				"tab",
+				"info"
+			]
+		}]
+	},
+	gutterY: {
+		type: "input.text",
+		label: "Vertical Gap",
+		columns: 6,
+		section: "layout",
+		conditionParams: [{
+			name: "style",
+			logic: "in-array",
+			value: ["list", "tab"]
+		}]
+	},
+	gutterX: {
+		type: "input.text",
+		label: "Horizontal Gap",
+		columns: 6,
+		section: "layout",
+		conditionParams: [{
+			name: "style",
+			logic: "in-array",
+			value: ["list", "tab"]
+		}]
+	},
+	gridCols: {
+		type: "input.number",
+		label: "Grid Columns",
+		columns: 6,
+		section: "layout",
+		conditionParams: [{
+			name: "style",
+			logic: "==",
+			value: "grid"
+		}]
+	},
+	gridRowHeight: {
+		type: "input.number",
+		label: "Row Height (px)",
+		columns: 6,
+		section: "layout",
+		conditionParams: [{
+			name: "style",
+			logic: "==",
+			value: "grid"
+		}]
+	},
+	dataRoute: {
+		type: "input.text",
+		label: "Data Route",
+		columns: 12,
+		section: "configuration",
+		conditionParams: [{
+			name: "style",
+			logic: "==",
+			value: "datatable"
+		}]
+	},
+	icon: {
+		type: "picker.icon",
+		label: "Header Icon",
+		columns: 6,
+		section: "configuration",
+		conditionParams: [{
+			name: "style",
+			logic: "==",
+			value: "info"
+		}]
+	},
+	iconColor: {
+		type: "input.text",
+		label: "Icon Color",
+		columns: 6,
+		section: "configuration",
+		conditionParams: [{
+			name: "style",
+			logic: "==",
+			value: "info"
+		}]
+	},
+	headerImage: {
+		type: "file.asset-picker",
+		label: "Header Image",
+		columns: 12,
+		section: "configuration",
+		conditionParams: [{
+			name: "style",
+			logic: "==",
+			value: "info"
+		}]
+	},
+	headerRatio: {
+		type: "input.text",
+		label: "Image Aspect Ratio",
+		columns: 6,
+		section: "layout",
+		conditionParams: [{
+			name: "style",
+			logic: "==",
+			value: "info"
+		}]
+	},
+	lessPadding: {
+		type: "boolean.switch",
+		label: "Reduce Padding",
+		columns: 6,
+		section: "layout",
+		conditionParams: [{
+			name: "style",
+			logic: "==",
+			value: "info"
+		}]
+	}
+}, r = {
+	list: {
+		displayLabel: "List",
+		description: "A card containing a vertical list of elements — the primary layout block."
+	},
+	tab: {
+		displayLabel: "Tab Container",
+		description: "A tabbed card that groups elements into selectable tabs."
+	},
+	info: {
+		displayLabel: "Info Card",
+		description: "A display tile with an optional header image/icon and key-value fields."
+	},
+	datatable: {
+		displayLabel: "Data Table",
+		description: "A sortable, paginated data table fetched from an API route."
+	},
+	grid: {
+		displayLabel: "Grid Layout",
+		description: "A CSS-grid canvas for structured multi-column element placement."
+	}
 };
-export {
-  t as CardLayoutElementDefaults,
-  e as CardLayoutElementEditConfig,
-  a as CardLayoutElementMetadata,
-  l as CardStyleMetadataMap
-};
-//# sourceMappingURL=CardLayoutElement.js.map
+//#endregion
+export { e as CardLayoutElementDefaults, n as CardLayoutElementEditConfig, t as CardLayoutElementMetadata, r as CardStyleMetadataMap };
+
+//# sourceMappingURL=CardLayoutElement.js.map

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

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