@nonoun/native-ai 1.0.13 → 1.0.14

package/dist/native-ai.js

@@ -1487,7 +1487,7 @@ const ke = [
 						children: [
 							"heading",
 							"text",
-							"btn"
+							"button"
 						]
 					},
 					{
@@ -1502,7 +1502,7 @@ const ke = [
 						text: "This UI was generated from a flat A2UI component list."
 					},
 					{
-						id: "btn",
+						id: "button",
 						component: "Button",
 						text: "Click Me",
 						variant: "primary",
@@ -1562,10 +1562,10 @@ const ke = [
 					{
 						id: "actions",
 						component: "Row",
-						children: ["submit-btn", "cancel-btn"]
+						children: ["button-submit", "button-cancel"]
 					},
 					{
-						id: "submit-btn",
+						id: "button-submit",
 						component: "Button",
 						text: "Send Message",
 						variant: "primary",
@@ -1575,7 +1575,7 @@ const ke = [
 						} }
 					},
 					{
-						id: "cancel-btn",
+						id: "button-cancel",
 						component: "Button",
 						text: "Cancel",
 						action: { event: { name: "cancel_form" } }
@@ -1599,13 +1599,13 @@ const ke = [
 						id: "root",
 						component: "Card",
 						children: [
-							"card-hdr",
+							"card-header",
 							"card-body",
-							"card-ftr"
+							"card-footer"
 						]
 					},
 					{
-						id: "card-hdr",
+						id: "card-header",
 						component: "Header",
 						children: ["product-name"]
 					},
@@ -1623,10 +1623,10 @@ const ke = [
 					{
 						id: "card-content",
 						component: "Column",
-						children: ["product-desc", "product-price"]
+						children: ["product-description", "product-price"]
 					},
 					{
-						id: "product-desc",
+						id: "product-description",
 						component: "Text",
 						text: "A high-quality widget built with native web components. Supports all modern browsers."
 					},
@@ -1637,24 +1637,24 @@ const ke = [
 						variant: "h4"
 					},
 					{
-						id: "card-ftr",
+						id: "card-footer",
 						component: "Footer",
 						children: ["product-actions"]
 					},
 					{
 						id: "product-actions",
 						component: "Row",
-						children: ["buy-btn", "wishlist-btn"]
+						children: ["button-buy", "button-wishlist"]
 					},
 					{
-						id: "buy-btn",
+						id: "button-buy",
 						component: "Button",
 						text: "Add to Cart",
 						variant: "primary",
 						action: { event: { name: "add_to_cart" } }
 					},
 					{
-						id: "wishlist-btn",
+						id: "button-wishlist",
 						component: "Button",
 						text: "Wishlist",
 						action: { event: { name: "add_to_wishlist" } }
@@ -1873,7 +1873,7 @@ const ke = [
 						{
 							id: "counter-row",
 							component: "Row",
-							children: ["counter-label", "inc-btn"]
+							children: ["counter-label", "button-increment"]
 						},
 						{
 							id: "counter-label",
@@ -1881,7 +1881,7 @@ const ke = [
 							text: { path: "/counter" }
 						},
 						{
-							id: "inc-btn",
+							id: "button-increment",
 							component: "Button",
 							text: "Increment",
 							variant: "primary",
@@ -1927,7 +1927,7 @@ const ke = [
 							children: [
 								"title",
 								"count",
-								"inc-btn"
+								"button-increment"
 							]
 						},
 						{
@@ -1942,7 +1942,7 @@ const ke = [
 							text: { path: "/count" }
 						},
 						{
-							id: "inc-btn",
+							id: "button-increment",
 							component: "Button",
 							text: "Increment",
 							variant: "primary",
@@ -2001,7 +2001,7 @@ const ke = [
 						{
 							id: "root",
 							component: "Column",
-							children: ["heading", "btn"]
+							children: ["heading", "button"]
 						},
 						{
 							id: "heading",
@@ -2010,7 +2010,7 @@ const ke = [
 							variant: "h2"
 						},
 						{
-							id: "btn",
+							id: "button",
 							component: "Button",
 							text: "Action",
 							variant: "primary",
@@ -2254,10 +2254,10 @@ const ke = [
 						{
 							id: "preview-card",
 							component: "Card",
-							children: ["preview-hdr", "preview-body"]
+							children: ["preview-header", "preview-body"]
 						},
 						{
-							id: "preview-hdr",
+							id: "preview-header",
 							component: "Header",
 							children: ["preview-heading"]
 						},
@@ -2270,10 +2270,10 @@ const ke = [
 						{
 							id: "preview-body",
 							component: "Body",
-							child: "preview-col"
+							child: "preview-column"
 						},
 						{
-							id: "preview-col",
+							id: "preview-column",
 							component: "Column",
 							children: [
 								"preview-name",
@@ -2401,45 +2401,45 @@ const ke = [
 						id: "step-content",
 						component: "Column",
 						children: [
-							"proj-name",
-							"proj-desc",
-							"proj-visibility"
+							"project-name",
+							"project-description",
+							"project-visibility"
 						]
 					},
 					{
-						id: "proj-name",
+						id: "project-name",
 						component: "TextField",
 						label: "Project Name",
 						placeholder: "My Awesome Project"
 					},
 					{
-						id: "proj-desc",
+						id: "project-description",
 						component: "TextArea",
 						label: "Description",
 						placeholder: "What is this project about?"
 					},
 					{
-						id: "proj-visibility",
+						id: "project-visibility",
 						component: "Column",
 						children: [
-							"vis-label",
-							"vis-public",
-							"vis-private"
+							"visibility-label",
+							"visibility-public",
+							"visibility-private"
 						]
 					},
 					{
-						id: "vis-label",
+						id: "visibility-label",
 						component: "Text",
 						text: "Visibility",
 						variant: "caption"
 					},
 					{
-						id: "vis-public",
+						id: "visibility-public",
 						component: "CheckBox",
 						label: "Public — anyone can view"
 					},
 					{
-						id: "vis-private",
+						id: "visibility-private",
 						component: "CheckBox",
 						label: "Private — invited members only"
 					},
@@ -2450,16 +2450,16 @@ const ke = [
 					{
 						id: "nav-row",
 						component: "Row",
-						children: ["cancel-btn", "next-btn"]
+						children: ["button-cancel", "button-next"]
 					},
 					{
-						id: "cancel-btn",
+						id: "button-cancel",
 						component: "Button",
 						text: "Cancel",
 						action: { event: { name: "wizard_cancel" } }
 					},
 					{
-						id: "next-btn",
+						id: "button-next",
 						component: "Button",
 						text: "Next: Team →",
 						variant: "primary",
@@ -2484,23 +2484,23 @@ const ke = [
 						id: "root",
 						component: "Card",
 						children: [
-							"card-hdr",
+							"card-header",
 							"card-body",
-							"card-ftr"
+							"card-footer"
 						]
 					},
 					{
-						id: "card-hdr",
+						id: "card-header",
 						component: "Header",
 						children: ["icon-row", "title"]
 					},
 					{
 						id: "icon-row",
 						component: "Row",
-						children: ["warn-badge"]
+						children: ["warning-badge"]
 					},
 					{
-						id: "warn-badge",
+						id: "warning-badge",
 						component: "Badge",
 						text: "Destructive Action"
 					},
@@ -2513,27 +2513,27 @@ const ke = [
 					{
 						id: "card-body",
 						component: "Body",
-						child: "card-col"
+						child: "card-column"
 					},
 					{
-						id: "card-col",
+						id: "card-column",
 						component: "Column",
 						children: [
-							"desc",
+							"description",
 							"item-name",
 							"warning",
 							"confirm-field"
 						]
 					},
 					{
-						id: "desc",
+						id: "description",
 						component: "Text",
 						text: "This will permanently delete the project, all its files, issues, and associated data. This action cannot be undone."
 					},
 					{
 						id: "item-name",
 						component: "Row",
-						children: ["item-label", "item-val"]
+						children: ["item-label", "item-value"]
 					},
 					{
 						id: "item-label",
@@ -2541,7 +2541,7 @@ const ke = [
 						text: "Project:"
 					},
 					{
-						id: "item-val",
+						id: "item-value",
 						component: "Text",
 						text: "acme-frontend",
 						variant: "h4"
@@ -2558,23 +2558,23 @@ const ke = [
 						placeholder: "acme-frontend"
 					},
 					{
-						id: "card-ftr",
+						id: "card-footer",
 						component: "Footer",
 						children: ["actions"]
 					},
 					{
 						id: "actions",
 						component: "Row",
-						children: ["cancel-btn", "delete-btn"]
+						children: ["button-cancel", "button-delete"]
 					},
 					{
-						id: "cancel-btn",
+						id: "button-cancel",
 						component: "Button",
 						text: "Cancel",
 						action: { event: { name: "cancel_delete" } }
 					},
 					{
-						id: "delete-btn",
+						id: "button-delete",
 						component: "Button",
 						text: "Delete Project",
 						variant: "primary",
@@ -2601,9 +2601,9 @@ const ke = [
 						component: "Column",
 						children: [
 							"header",
-							"desc",
+							"description",
 							"divider-1",
-							"notif-section",
+							"notification-section",
 							"divider-2",
 							"privacy-section",
 							"divider-3",
@@ -2619,7 +2619,7 @@ const ke = [
 						variant: "h2"
 					},
 					{
-						id: "desc",
+						id: "description",
 						component: "Text",
 						text: "Manage your notification, privacy, and display settings.",
 						variant: "caption"
@@ -2629,39 +2629,39 @@ const ke = [
 						component: "Divider"
 					},
 					{
-						id: "notif-section",
+						id: "notification-section",
 						component: "Column",
 						children: [
-							"notif-title",
-							"notif-email",
-							"notif-push",
-							"notif-sms",
-							"notif-marketing"
+							"notification-title",
+							"notification-email",
+							"notification-push",
+							"notification-sms",
+							"notification-marketing"
 						]
 					},
 					{
-						id: "notif-title",
+						id: "notification-title",
 						component: "Text",
 						text: "Notifications",
 						variant: "h3"
 					},
 					{
-						id: "notif-email",
+						id: "notification-email",
 						component: "Switch",
 						label: "Email notifications"
 					},
 					{
-						id: "notif-push",
+						id: "notification-push",
 						component: "Switch",
 						label: "Push notifications"
 					},
 					{
-						id: "notif-sms",
+						id: "notification-sms",
 						component: "Switch",
 						label: "SMS alerts"
 					},
 					{
-						id: "notif-marketing",
+						id: "notification-marketing",
 						component: "Switch",
 						label: "Marketing emails"
 					},
@@ -2674,9 +2674,9 @@ const ke = [
 						component: "Column",
 						children: [
 							"privacy-title",
-							"priv-profile",
-							"priv-activity",
-							"priv-search"
+							"privacy-profile",
+							"privacy-activity",
+							"privacy-search"
 						]
 					},
 					{
@@ -2686,17 +2686,17 @@ const ke = [
 						variant: "h3"
 					},
 					{
-						id: "priv-profile",
+						id: "privacy-profile",
 						component: "Switch",
 						label: "Public profile"
 					},
 					{
-						id: "priv-activity",
+						id: "privacy-activity",
 						component: "Switch",
 						label: "Show activity status"
 					},
 					{
-						id: "priv-search",
+						id: "privacy-search",
 						component: "Switch",
 						label: "Appear in search results"
 					},
@@ -2708,24 +2708,24 @@ const ke = [
 						id: "appearance-section",
 						component: "Column",
 						children: [
-							"appear-title",
-							"appear-compact",
-							"appear-animations"
+							"appearance-title",
+							"appearance-compact",
+							"appearance-animations"
 						]
 					},
 					{
-						id: "appear-title",
+						id: "appearance-title",
 						component: "Text",
 						text: "Appearance",
 						variant: "h3"
 					},
 					{
-						id: "appear-compact",
+						id: "appearance-compact",
 						component: "Switch",
 						label: "Compact mode"
 					},
 					{
-						id: "appear-animations",
+						id: "appearance-animations",
 						component: "Switch",
 						label: "Reduce animations"
 					},
@@ -2736,16 +2736,16 @@ const ke = [
 					{
 						id: "save-row",
 						component: "Row",
-						children: ["reset-btn", "save-btn"]
+						children: ["button-reset", "button-save"]
 					},
 					{
-						id: "reset-btn",
+						id: "button-reset",
 						component: "Button",
 						text: "Reset to Defaults",
 						action: { event: { name: "reset_settings" } }
 					},
 					{
-						id: "save-btn",
+						id: "button-save",
 						component: "Button",
 						text: "Save Preferences",
 						variant: "primary",
@@ -2823,10 +2823,10 @@ const ke = [
 					{
 						id: "cbc-card",
 						component: "Card",
-						children: ["cbc-hdr", "cbc-body"]
+						children: ["cbc-header", "cbc-body"]
 					},
 					{
-						id: "cbc-hdr",
+						id: "cbc-header",
 						component: "Header",
 						children: ["cbc-title"]
 					},
@@ -2839,10 +2839,10 @@ const ke = [
 					{
 						id: "cbc-body",
 						component: "Body",
-						child: "cbc-col"
+						child: "cbc-column"
 					},
 					{
-						id: "cbc-col",
+						id: "cbc-column",
 						component: "Column",
 						children: [
 							"cbc-wbc",
@@ -2857,8 +2857,8 @@ const ke = [
 						component: "Row",
 						children: [
 							"cbc-wbc-label",
-							"cbc-wbc-val",
-							"cbc-wbc-ref"
+							"cbc-wbc-value",
+							"cbc-wbc-reference"
 						]
 					},
 					{
@@ -2867,12 +2867,12 @@ const ke = [
 						text: "WBC"
 					},
 					{
-						id: "cbc-wbc-val",
+						id: "cbc-wbc-value",
 						component: "Badge",
 						text: "7.2 × 10³/µL"
 					},
 					{
-						id: "cbc-wbc-ref",
+						id: "cbc-wbc-reference",
 						component: "Text",
 						text: "(4.5–11.0)",
 						variant: "caption"
@@ -2882,8 +2882,8 @@ const ke = [
 						component: "Row",
 						children: [
 							"cbc-rbc-label",
-							"cbc-rbc-val",
-							"cbc-rbc-ref"
+							"cbc-rbc-value",
+							"cbc-rbc-reference"
 						]
 					},
 					{
@@ -2892,12 +2892,12 @@ const ke = [
 						text: "RBC"
 					},
 					{
-						id: "cbc-rbc-val",
+						id: "cbc-rbc-value",
 						component: "Badge",
 						text: "4.8 × 10⁶/µL"
 					},
 					{
-						id: "cbc-rbc-ref",
+						id: "cbc-rbc-reference",
 						component: "Text",
 						text: "(4.2–5.4)",
 						variant: "caption"
@@ -2907,8 +2907,8 @@ const ke = [
 						component: "Row",
 						children: [
 							"cbc-hgb-label",
-							"cbc-hgb-val",
-							"cbc-hgb-ref"
+							"cbc-hgb-value",
+							"cbc-hgb-reference"
 						]
 					},
 					{
@@ -2917,12 +2917,12 @@ const ke = [
 						text: "Hemoglobin"
 					},
 					{
-						id: "cbc-hgb-val",
+						id: "cbc-hgb-value",
 						component: "Badge",
 						text: "14.1 g/dL"
 					},
 					{
-						id: "cbc-hgb-ref",
+						id: "cbc-hgb-reference",
 						component: "Text",
 						text: "(12.0–16.0)",
 						variant: "caption"
@@ -2932,8 +2932,8 @@ const ke = [
 						component: "Row",
 						children: [
 							"cbc-hct-label",
-							"cbc-hct-val",
-							"cbc-hct-ref"
+							"cbc-hct-value",
+							"cbc-hct-reference"
 						]
 					},
 					{
@@ -2942,12 +2942,12 @@ const ke = [
 						text: "Hematocrit"
 					},
 					{
-						id: "cbc-hct-val",
+						id: "cbc-hct-value",
 						component: "Badge",
 						text: "42.3%"
 					},
 					{
-						id: "cbc-hct-ref",
+						id: "cbc-hct-reference",
 						component: "Text",
 						text: "(36.0–46.0)",
 						variant: "caption"
@@ -2957,8 +2957,8 @@ const ke = [
 						component: "Row",
 						children: [
 							"cbc-plt-label",
-							"cbc-plt-val",
-							"cbc-plt-ref"
+							"cbc-plt-value",
+							"cbc-plt-reference"
 						]
 					},
 					{
@@ -2967,12 +2967,12 @@ const ke = [
 						text: "Platelets"
 					},
 					{
-						id: "cbc-plt-val",
+						id: "cbc-plt-value",
 						component: "Badge",
 						text: "245 × 10³/µL"
 					},
 					{
-						id: "cbc-plt-ref",
+						id: "cbc-plt-reference",
 						component: "Text",
 						text: "(150–400)",
 						variant: "caption"
@@ -2980,10 +2980,10 @@ const ke = [
 					{
 						id: "metabolic-card",
 						component: "Card",
-						children: ["metabolic-hdr", "metabolic-body"]
+						children: ["metabolic-header", "metabolic-body"]
 					},
 					{
-						id: "metabolic-hdr",
+						id: "metabolic-header",
 						component: "Header",
 						children: ["metabolic-title"]
 					},
@@ -2996,166 +2996,166 @@ const ke = [
 					{
 						id: "metabolic-body",
 						component: "Body",
-						child: "metabolic-col"
+						child: "metabolic-column"
 					},
 					{
-						id: "metabolic-col",
+						id: "metabolic-column",
 						component: "Column",
 						children: [
-							"met-glucose",
-							"met-bun",
-							"met-creat",
-							"met-egfr",
-							"met-na",
-							"met-k"
+							"metabolic-glucose",
+							"metabolic-bun",
+							"metabolic-creat",
+							"metabolic-egfr",
+							"metabolic-na",
+							"metabolic-k"
 						]
 					},
 					{
-						id: "met-glucose",
+						id: "metabolic-glucose",
 						component: "Row",
 						children: [
-							"met-glucose-label",
-							"met-glucose-val",
-							"met-glucose-ref"
+							"metabolic-glucose-label",
+							"metabolic-glucose-value",
+							"metabolic-glucose-reference"
 						]
 					},
 					{
-						id: "met-glucose-label",
+						id: "metabolic-glucose-label",
 						component: "Text",
 						text: "Glucose (fasting)"
 					},
 					{
-						id: "met-glucose-val",
+						id: "metabolic-glucose-value",
 						component: "Badge",
 						text: "105 mg/dL ↑"
 					},
 					{
-						id: "met-glucose-ref",
+						id: "metabolic-glucose-reference",
 						component: "Text",
 						text: "(70–99) — elevated",
 						variant: "caption"
 					},
 					{
-						id: "met-bun",
+						id: "metabolic-bun",
 						component: "Row",
 						children: [
-							"met-bun-label",
-							"met-bun-val",
-							"met-bun-ref"
+							"metabolic-bun-label",
+							"metabolic-bun-value",
+							"metabolic-bun-reference"
 						]
 					},
 					{
-						id: "met-bun-label",
+						id: "metabolic-bun-label",
 						component: "Text",
 						text: "BUN"
 					},
 					{
-						id: "met-bun-val",
+						id: "metabolic-bun-value",
 						component: "Badge",
 						text: "16 mg/dL"
 					},
 					{
-						id: "met-bun-ref",
+						id: "metabolic-bun-reference",
 						component: "Text",
 						text: "(7–20)",
 						variant: "caption"
 					},
 					{
-						id: "met-creat",
+						id: "metabolic-creat",
 						component: "Row",
 						children: [
-							"met-creat-label",
-							"met-creat-val",
-							"met-creat-ref"
+							"metabolic-creat-label",
+							"metabolic-creat-value",
+							"metabolic-creat-reference"
 						]
 					},
 					{
-						id: "met-creat-label",
+						id: "metabolic-creat-label",
 						component: "Text",
 						text: "Creatinine"
 					},
 					{
-						id: "met-creat-val",
+						id: "metabolic-creat-value",
 						component: "Badge",
 						text: "0.9 mg/dL"
 					},
 					{
-						id: "met-creat-ref",
+						id: "metabolic-creat-reference",
 						component: "Text",
 						text: "(0.6–1.2)",
 						variant: "caption"
 					},
 					{
-						id: "met-egfr",
+						id: "metabolic-egfr",
 						component: "Row",
 						children: [
-							"met-egfr-label",
-							"met-egfr-val",
-							"met-egfr-ref"
+							"metabolic-egfr-label",
+							"metabolic-egfr-value",
+							"metabolic-egfr-reference"
 						]
 					},
 					{
-						id: "met-egfr-label",
+						id: "metabolic-egfr-label",
 						component: "Text",
 						text: "eGFR"
 					},
 					{
-						id: "met-egfr-val",
+						id: "metabolic-egfr-value",
 						component: "Badge",
 						text: "> 90 mL/min"
 					},
 					{
-						id: "met-egfr-ref",
+						id: "metabolic-egfr-reference",
 						component: "Text",
 						text: "(≥ 60 normal)",
 						variant: "caption"
 					},
 					{
-						id: "met-na",
+						id: "metabolic-na",
 						component: "Row",
 						children: [
-							"met-na-label",
-							"met-na-val",
-							"met-na-ref"
+							"metabolic-na-label",
+							"metabolic-na-value",
+							"metabolic-na-reference"
 						]
 					},
 					{
-						id: "met-na-label",
+						id: "metabolic-na-label",
 						component: "Text",
 						text: "Sodium"
 					},
 					{
-						id: "met-na-val",
+						id: "metabolic-na-value",
 						component: "Badge",
 						text: "140 mEq/L"
 					},
 					{
-						id: "met-na-ref",
+						id: "metabolic-na-reference",
 						component: "Text",
 						text: "(136–145)",
 						variant: "caption"
 					},
 					{
-						id: "met-k",
+						id: "metabolic-k",
 						component: "Row",
 						children: [
-							"met-k-label",
-							"met-k-val",
-							"met-k-ref"
+							"metabolic-k-label",
+							"metabolic-k-value",
+							"metabolic-k-reference"
 						]
 					},
 					{
-						id: "met-k-label",
+						id: "metabolic-k-label",
 						component: "Text",
 						text: "Potassium"
 					},
 					{
-						id: "met-k-val",
+						id: "metabolic-k-value",
 						component: "Badge",
 						text: "4.2 mEq/L"
 					},
 					{
-						id: "met-k-ref",
+						id: "metabolic-k-reference",
 						component: "Text",
 						text: "(3.5–5.0)",
 						variant: "caption"
@@ -3163,10 +3163,10 @@ const ke = [
 					{
 						id: "lipid-card",
 						component: "Card",
-						children: ["lipid-hdr", "lipid-body"]
+						children: ["lipid-header", "lipid-body"]
 					},
 					{
-						id: "lipid-hdr",
+						id: "lipid-header",
 						component: "Header",
 						children: ["lipid-title"]
 					},
@@ -3179,115 +3179,115 @@ const ke = [
 					{
 						id: "lipid-body",
 						component: "Body",
-						child: "lipid-col"
+						child: "lipid-column"
 					},
 					{
-						id: "lipid-col",
+						id: "lipid-column",
 						component: "Column",
 						children: [
-							"lip-tc",
-							"lip-ldl",
-							"lip-hdl",
-							"lip-trig",
+							"lipid-tc",
+							"lipid-ldl",
+							"lipid-hdl",
+							"lipid-trig",
 							"lipid-note"
 						]
 					},
 					{
-						id: "lip-tc",
+						id: "lipid-tc",
 						component: "Row",
 						children: [
-							"lip-tc-label",
-							"lip-tc-val",
-							"lip-tc-ref"
+							"lipid-tc-label",
+							"lipid-tc-value",
+							"lipid-tc-reference"
 						]
 					},
 					{
-						id: "lip-tc-label",
+						id: "lipid-tc-label",
 						component: "Text",
 						text: "Total Cholesterol"
 					},
 					{
-						id: "lip-tc-val",
+						id: "lipid-tc-value",
 						component: "Badge",
 						text: "218 mg/dL ↑"
 					},
 					{
-						id: "lip-tc-ref",
+						id: "lipid-tc-reference",
 						component: "Text",
 						text: "(< 200 desirable) — borderline",
 						variant: "caption"
 					},
 					{
-						id: "lip-ldl",
+						id: "lipid-ldl",
 						component: "Row",
 						children: [
-							"lip-ldl-label",
-							"lip-ldl-val",
-							"lip-ldl-ref"
+							"lipid-ldl-label",
+							"lipid-ldl-value",
+							"lipid-ldl-reference"
 						]
 					},
 					{
-						id: "lip-ldl-label",
+						id: "lipid-ldl-label",
 						component: "Text",
 						text: "LDL"
 					},
 					{
-						id: "lip-ldl-val",
+						id: "lipid-ldl-value",
 						component: "Badge",
 						text: "138 mg/dL ↑"
 					},
 					{
-						id: "lip-ldl-ref",
+						id: "lipid-ldl-reference",
 						component: "Text",
 						text: "(< 100 optimal) — above optimal",
 						variant: "caption"
 					},
 					{
-						id: "lip-hdl",
+						id: "lipid-hdl",
 						component: "Row",
 						children: [
-							"lip-hdl-label",
-							"lip-hdl-val",
-							"lip-hdl-ref"
+							"lipid-hdl-label",
+							"lipid-hdl-value",
+							"lipid-hdl-reference"
 						]
 					},
 					{
-						id: "lip-hdl-label",
+						id: "lipid-hdl-label",
 						component: "Text",
 						text: "HDL"
 					},
 					{
-						id: "lip-hdl-val",
+						id: "lipid-hdl-value",
 						component: "Badge",
 						text: "58 mg/dL"
 					},
 					{
-						id: "lip-hdl-ref",
+						id: "lipid-hdl-reference",
 						component: "Text",
 						text: "(≥ 40 normal)",
 						variant: "caption"
 					},
 					{
-						id: "lip-trig",
+						id: "lipid-trig",
 						component: "Row",
 						children: [
-							"lip-trig-label",
-							"lip-trig-val",
-							"lip-trig-ref"
+							"lipid-trig-label",
+							"lipid-trig-value",
+							"lipid-trig-reference"
 						]
 					},
 					{
-						id: "lip-trig-label",
+						id: "lipid-trig-label",
 						component: "Text",
 						text: "Triglycerides"
 					},
 					{
-						id: "lip-trig-val",
+						id: "lipid-trig-value",
 						component: "Badge",
 						text: "110 mg/dL"
 					},
 					{
-						id: "lip-trig-ref",
+						id: "lipid-trig-reference",
 						component: "Text",
 						text: "(< 150 normal)",
 						variant: "caption"
@@ -3306,26 +3306,26 @@ const ke = [
 						id: "actions",
 						component: "Row",
 						children: [
-							"download-btn",
-							"share-btn",
-							"history-btn"
+							"button-download",
+							"button-share",
+							"button-history"
 						]
 					},
 					{
-						id: "download-btn",
+						id: "button-download",
 						component: "Button",
 						text: "Download PDF",
 						variant: "primary",
 						action: { event: { name: "download_results" } }
 					},
 					{
-						id: "share-btn",
+						id: "button-share",
 						component: "Button",
 						text: "Share with Provider",
 						action: { event: { name: "share_results" } }
 					},
 					{
-						id: "history-btn",
+						id: "button-history",
 						component: "Button",
 						text: "View History",
 						action: { event: { name: "view_history" } }
@@ -3372,7 +3372,7 @@ const ke = [
 						children: [
 							"patient-name",
 							"patient-mrn",
-							"patient-loc"
+							"patient-location"
 						]
 					},
 					{
@@ -3386,7 +3386,7 @@ const ke = [
 						text: "MRN: 4820193"
 					},
 					{
-						id: "patient-loc",
+						id: "patient-location",
 						component: "Badge",
 						text: "ICU Bed 3"
 					},
@@ -3408,10 +3408,10 @@ const ke = [
 					{
 						id: "vital-hr",
 						component: "Card",
-						children: ["hr-hdr", "hr-body"]
+						children: ["hr-header", "hr-body"]
 					},
 					{
-						id: "hr-hdr",
+						id: "hr-header",
 						component: "Header",
 						children: ["hr-label"]
 					},
@@ -3424,15 +3424,15 @@ const ke = [
 					{
 						id: "hr-body",
 						component: "Body",
-						child: "hr-col"
+						child: "hr-column"
 					},
 					{
-						id: "hr-col",
+						id: "hr-column",
 						component: "Column",
-						children: ["hr-val", "hr-unit"]
+						children: ["hr-value", "hr-unit"]
 					},
 					{
-						id: "hr-val",
+						id: "hr-value",
 						component: "Text",
 						text: "82",
 						variant: "h2"
@@ -3446,10 +3446,10 @@ const ke = [
 					{
 						id: "vital-bp",
 						component: "Card",
-						children: ["bp-hdr", "bp-body"]
+						children: ["bp-header", "bp-body"]
 					},
 					{
-						id: "bp-hdr",
+						id: "bp-header",
 						component: "Header",
 						children: ["bp-label"]
 					},
@@ -3462,15 +3462,15 @@ const ke = [
 					{
 						id: "bp-body",
 						component: "Body",
-						child: "bp-col"
+						child: "bp-column"
 					},
 					{
-						id: "bp-col",
+						id: "bp-column",
 						component: "Column",
-						children: ["bp-val", "bp-unit"]
+						children: ["bp-value", "bp-unit"]
 					},
 					{
-						id: "bp-val",
+						id: "bp-value",
 						component: "Text",
 						text: "138/86",
 						variant: "h2"
@@ -3484,10 +3484,10 @@ const ke = [
 					{
 						id: "vital-spo2",
 						component: "Card",
-						children: ["spo2-hdr", "spo2-body"]
+						children: ["spo2-header", "spo2-body"]
 					},
 					{
-						id: "spo2-hdr",
+						id: "spo2-header",
 						component: "Header",
 						children: ["spo2-label"]
 					},
@@ -3500,15 +3500,15 @@ const ke = [
 					{
 						id: "spo2-body",
 						component: "Body",
-						child: "spo2-col"
+						child: "spo2-column"
 					},
 					{
-						id: "spo2-col",
+						id: "spo2-column",
 						component: "Column",
-						children: ["spo2-val", "spo2-unit"]
+						children: ["spo2-value", "spo2-unit"]
 					},
 					{
-						id: "spo2-val",
+						id: "spo2-value",
 						component: "Text",
 						text: "96",
 						variant: "h2"
@@ -3522,10 +3522,10 @@ const ke = [
 					{
 						id: "vital-temp",
 						component: "Card",
-						children: ["temp-hdr", "temp-body"]
+						children: ["temp-header", "temp-body"]
 					},
 					{
-						id: "temp-hdr",
+						id: "temp-header",
 						component: "Header",
 						children: ["temp-label"]
 					},
@@ -3538,15 +3538,15 @@ const ke = [
 					{
 						id: "temp-body",
 						component: "Body",
-						child: "temp-col"
+						child: "temp-column"
 					},
 					{
-						id: "temp-col",
+						id: "temp-column",
 						component: "Column",
-						children: ["temp-val", "temp-unit"]
+						children: ["temp-value", "temp-unit"]
 					},
 					{
-						id: "temp-val",
+						id: "temp-value",
 						component: "Text",
 						text: "37.2",
 						variant: "h2"
@@ -3560,10 +3560,10 @@ const ke = [
 					{
 						id: "vital-rr",
 						component: "Card",
-						children: ["rr-hdr", "rr-body"]
+						children: ["rr-header", "rr-body"]
 					},
 					{
-						id: "rr-hdr",
+						id: "rr-header",
 						component: "Header",
 						children: ["rr-label"]
 					},
@@ -3576,15 +3576,15 @@ const ke = [
 					{
 						id: "rr-body",
 						component: "Body",
-						child: "rr-col"
+						child: "rr-column"
 					},
 					{
-						id: "rr-col",
+						id: "rr-column",
 						component: "Column",
-						children: ["rr-val", "rr-unit"]
+						children: ["rr-value", "rr-unit"]
 					},
 					{
-						id: "rr-val",
+						id: "rr-value",
 						component: "Text",
 						text: "18",
 						variant: "h2"
@@ -3602,10 +3602,10 @@ const ke = [
 					{
 						id: "trend-card",
 						component: "Card",
-						children: ["trend-hdr", "trend-body"]
+						children: ["trend-header", "trend-body"]
 					},
 					{
-						id: "trend-hdr",
+						id: "trend-header",
 						component: "Header",
 						children: ["trend-title"]
 					},
@@ -3618,10 +3618,10 @@ const ke = [
 					{
 						id: "trend-body",
 						component: "Body",
-						child: "trend-col"
+						child: "trend-column"
 					},
 					{
-						id: "trend-col",
+						id: "trend-column",
 						component: "Column",
 						children: [
 							"trend-bp",
@@ -3651,10 +3651,10 @@ const ke = [
 					{
 						id: "alert-card",
 						component: "Card",
-						children: ["alert-hdr", "alert-body"]
+						children: ["alert-header", "alert-body"]
 					},
 					{
-						id: "alert-hdr",
+						id: "alert-header",
 						component: "Header",
 						children: ["alert-title"]
 					},
@@ -3667,10 +3667,10 @@ const ke = [
 					{
 						id: "alert-body",
 						component: "Body",
-						child: "alert-col"
+						child: "alert-column"
 					},
 					{
-						id: "alert-col",
+						id: "alert-column",
 						component: "Column",
 						children: ["alert-1", "alert-2"]
 					},
@@ -3708,26 +3708,26 @@ const ke = [
 						id: "actions",
 						component: "Row",
 						children: [
-							"chart-btn",
-							"order-btn",
-							"note-btn"
+							"button-chart",
+							"button-order",
+							"button-note"
 						]
 					},
 					{
-						id: "chart-btn",
+						id: "button-chart",
 						component: "Button",
 						text: "Full Chart",
 						action: { event: { name: "view_chart" } }
 					},
 					{
-						id: "order-btn",
+						id: "button-order",
 						component: "Button",
 						text: "New Order",
 						variant: "primary",
 						action: { event: { name: "new_order" } }
 					},
 					{
-						id: "note-btn",
+						id: "button-note",
 						component: "Button",
 						text: "Add Note",
 						action: { event: { name: "add_note" } }
@@ -3771,15 +3771,15 @@ const ke = [
 					{
 						id: "patient-row",
 						component: "Row",
-						children: ["pt-name", "pt-allergies"]
+						children: ["patient-name", "patient-allergies"]
 					},
 					{
-						id: "pt-name",
+						id: "patient-name",
 						component: "Text",
 						text: "Maria Garcia, 54F"
 					},
 					{
-						id: "pt-allergies",
+						id: "patient-allergies",
 						component: "Badge",
 						text: "Allergies: Penicillin, Sulfa"
 					},
@@ -3790,10 +3790,10 @@ const ke = [
 					{
 						id: "active-card",
 						component: "Card",
-						children: ["active-hdr", "active-body"]
+						children: ["active-header", "active-body"]
 					},
 					{
-						id: "active-hdr",
+						id: "active-header",
 						component: "Header",
 						children: ["active-title"]
 					},
@@ -3806,10 +3806,10 @@ const ke = [
 					{
 						id: "active-body",
 						component: "Body",
-						child: "active-col"
+						child: "active-column"
 					},
 					{
-						id: "active-col",
+						id: "active-column",
 						component: "Column",
 						children: [
 							"med-1",
@@ -3822,7 +3822,7 @@ const ke = [
 					{
 						id: "med-1",
 						component: "Row",
-						children: ["med-1-check", "med-1-col"]
+						children: ["med-1-check", "med-1-column"]
 					},
 					{
 						id: "med-1-check",
@@ -3830,7 +3830,7 @@ const ke = [
 						label: ""
 					},
 					{
-						id: "med-1-col",
+						id: "med-1-column",
 						component: "Column",
 						children: ["med-1-name", "med-1-detail"]
 					},
@@ -3848,7 +3848,7 @@ const ke = [
 					{
 						id: "med-2",
 						component: "Row",
-						children: ["med-2-check", "med-2-col"]
+						children: ["med-2-check", "med-2-column"]
 					},
 					{
 						id: "med-2-check",
@@ -3856,7 +3856,7 @@ const ke = [
 						label: ""
 					},
 					{
-						id: "med-2-col",
+						id: "med-2-column",
 						component: "Column",
 						children: ["med-2-name", "med-2-detail"]
 					},
@@ -3874,7 +3874,7 @@ const ke = [
 					{
 						id: "med-3",
 						component: "Row",
-						children: ["med-3-check", "med-3-col"]
+						children: ["med-3-check", "med-3-column"]
 					},
 					{
 						id: "med-3-check",
@@ -3882,7 +3882,7 @@ const ke = [
 						label: ""
 					},
 					{
-						id: "med-3-col",
+						id: "med-3-column",
 						component: "Column",
 						children: ["med-3-name", "med-3-detail"]
 					},
@@ -3900,7 +3900,7 @@ const ke = [
 					{
 						id: "med-4",
 						component: "Row",
-						children: ["med-4-check", "med-4-col"]
+						children: ["med-4-check", "med-4-column"]
 					},
 					{
 						id: "med-4-check",
@@ -3908,7 +3908,7 @@ const ke = [
 						label: ""
 					},
 					{
-						id: "med-4-col",
+						id: "med-4-column",
 						component: "Column",
 						children: ["med-4-name", "med-4-detail"]
 					},
@@ -3926,7 +3926,7 @@ const ke = [
 					{
 						id: "med-5",
 						component: "Row",
-						children: ["med-5-check", "med-5-col"]
+						children: ["med-5-check", "med-5-column"]
 					},
 					{
 						id: "med-5-check",
@@ -3934,7 +3934,7 @@ const ke = [
 						label: ""
 					},
 					{
-						id: "med-5-col",
+						id: "med-5-column",
 						component: "Column",
 						children: ["med-5-name", "med-5-detail"]
 					},
@@ -3956,57 +3956,57 @@ const ke = [
 					{
 						id: "discontinued-card",
 						component: "Card",
-						children: ["disc-hdr", "disc-body"]
+						children: ["discontinued-header", "discontinued-body"]
 					},
 					{
-						id: "disc-hdr",
+						id: "discontinued-header",
 						component: "Header",
-						children: ["disc-title"]
+						children: ["discontinued-title"]
 					},
 					{
-						id: "disc-title",
+						id: "discontinued-title",
 						component: "Text",
 						text: "Recently Discontinued",
 						variant: "h3"
 					},
 					{
-						id: "disc-body",
+						id: "discontinued-body",
 						component: "Body",
-						child: "disc-col"
+						child: "discontinued-column"
 					},
 					{
-						id: "disc-col",
+						id: "discontinued-column",
 						component: "Column",
-						children: ["disc-1", "disc-2"]
+						children: ["discontinued-1", "discontinued-2"]
 					},
 					{
-						id: "disc-1",
+						id: "discontinued-1",
 						component: "Row",
-						children: ["disc-1-name", "disc-1-reason"]
+						children: ["discontinued-1-name", "discontinued-1-reason"]
 					},
 					{
-						id: "disc-1-name",
+						id: "discontinued-1-name",
 						component: "Text",
 						text: "Glipizide 5mg"
 					},
 					{
-						id: "disc-1-reason",
+						id: "discontinued-1-reason",
 						component: "Text",
 						text: "Replaced by Metformin (Feb 1)",
 						variant: "caption"
 					},
 					{
-						id: "disc-2",
+						id: "discontinued-2",
 						component: "Row",
-						children: ["disc-2-name", "disc-2-reason"]
+						children: ["discontinued-2-name", "discontinued-2-reason"]
 					},
 					{
-						id: "disc-2-name",
+						id: "discontinued-2-name",
 						component: "Text",
 						text: "Ibuprofen 400mg PRN"
 					},
 					{
-						id: "disc-2-reason",
+						id: "discontinued-2-reason",
 						component: "Text",
 						text: "Renal concern — switch to acetaminophen (Jan 15)",
 						variant: "caption"
@@ -4018,15 +4018,15 @@ const ke = [
 					{
 						id: "interaction-card",
 						component: "Card",
-						children: ["interaction-hdr", "interaction-body"]
+						children: ["interaction-header", "interaction-body"]
 					},
 					{
-						id: "interaction-hdr",
+						id: "interaction-header",
 						component: "Header",
-						children: ["int-title"]
+						children: ["interaction-title"]
 					},
 					{
-						id: "int-title",
+						id: "interaction-title",
 						component: "Text",
 						text: "Drug Interactions",
 						variant: "h3"
@@ -4034,25 +4034,25 @@ const ke = [
 					{
 						id: "interaction-body",
 						component: "Body",
-						child: "int-col"
+						child: "interaction-column"
 					},
 					{
-						id: "int-col",
+						id: "interaction-column",
 						component: "Column",
-						children: ["int-1"]
+						children: ["interaction-1"]
 					},
 					{
-						id: "int-1",
+						id: "interaction-1",
 						component: "Row",
-						children: ["int-1-badge", "int-1-text"]
+						children: ["interaction-1-badge", "interaction-1-text"]
 					},
 					{
-						id: "int-1-badge",
+						id: "interaction-1-badge",
 						component: "Badge",
 						text: "Low Risk"
 					},
 					{
-						id: "int-1-text",
+						id: "interaction-1-text",
 						component: "Text",
 						text: "Aspirin + Lisinopril: may reduce antihypertensive effect. Monitor BP."
 					},
@@ -4060,26 +4060,26 @@ const ke = [
 						id: "actions",
 						component: "Row",
 						children: [
-							"reconcile-btn",
-							"add-med-btn",
-							"print-btn"
+							"button-reconcile",
+							"button-add-medication",
+							"button-print"
 						]
 					},
 					{
-						id: "reconcile-btn",
+						id: "button-reconcile",
 						component: "Button",
 						text: "Confirm Reconciliation",
 						variant: "primary",
 						action: { event: { name: "confirm_reconciliation" } }
 					},
 					{
-						id: "add-med-btn",
+						id: "button-add-medication",
 						component: "Button",
 						text: "Add Medication",
 						action: { event: { name: "add_medication" } }
 					},
 					{
-						id: "print-btn",
+						id: "button-print",
 						component: "Button",
 						text: "Print List",
 						action: { event: { name: "print_med_list" } }
@@ -4107,7 +4107,7 @@ const ke = [
 							"urgency-row",
 							"divider-1",
 							"patient-card",
-							"refer-card",
+							"referral-card",
 							"clinical-card",
 							"divider-2",
 							"actions"
@@ -4141,10 +4141,10 @@ const ke = [
 					{
 						id: "patient-card",
 						component: "Card",
-						children: ["patient-hdr", "patient-body"]
+						children: ["patient-header", "patient-body"]
 					},
 					{
-						id: "patient-hdr",
+						id: "patient-header",
 						component: "Header",
 						children: ["patient-title"]
 					},
@@ -4157,10 +4157,10 @@ const ke = [
 					{
 						id: "patient-body",
 						component: "Body",
-						child: "patient-col"
+						child: "patient-column"
 					},
 					{
-						id: "patient-col",
+						id: "patient-column",
 						component: "Column",
 						children: [
 							"patient-name-row",
@@ -4171,92 +4171,92 @@ const ke = [
 					{
 						id: "patient-name-row",
 						component: "Row",
-						children: ["pt-name-label", "pt-name-val"]
+						children: ["patient-name-label", "patient-name-value"]
 					},
 					{
-						id: "pt-name-label",
+						id: "patient-name-label",
 						component: "Text",
 						text: "Patient:"
 					},
 					{
-						id: "pt-name-val",
+						id: "patient-name-value",
 						component: "Text",
 						text: "James Wilson, 45M"
 					},
 					{
 						id: "patient-dob-row",
 						component: "Row",
-						children: ["pt-dob-label", "pt-dob-val"]
+						children: ["patient-dob-label", "patient-dob-value"]
 					},
 					{
-						id: "pt-dob-label",
+						id: "patient-dob-label",
 						component: "Text",
 						text: "DOB:"
 					},
 					{
-						id: "pt-dob-val",
+						id: "patient-dob-value",
 						component: "Text",
 						text: "1981-06-22"
 					},
 					{
 						id: "patient-insurance",
 						component: "Row",
-						children: ["pt-ins-label", "pt-ins-val"]
+						children: ["patient-insurance-label", "patient-insurance-value"]
 					},
 					{
-						id: "pt-ins-label",
+						id: "patient-insurance-label",
 						component: "Text",
 						text: "Insurance:"
 					},
 					{
-						id: "pt-ins-val",
+						id: "patient-insurance-value",
 						component: "Text",
 						text: "Blue Cross PPO — ID: BCX-4829173"
 					},
 					{
-						id: "refer-card",
+						id: "referral-card",
 						component: "Card",
-						children: ["refer-hdr", "refer-body"]
+						children: ["referral-header", "referral-body"]
 					},
 					{
-						id: "refer-hdr",
+						id: "referral-header",
 						component: "Header",
-						children: ["refer-title"]
+						children: ["referral-title"]
 					},
 					{
-						id: "refer-title",
+						id: "referral-title",
 						component: "Text",
 						text: "Referral Details",
 						variant: "h3"
 					},
 					{
-						id: "refer-body",
+						id: "referral-body",
 						component: "Body",
-						child: "refer-col"
+						child: "referral-column"
 					},
 					{
-						id: "refer-col",
+						id: "referral-column",
 						component: "Column",
 						children: [
-							"refer-specialty",
-							"refer-provider",
-							"refer-reason"
+							"referral-specialty",
+							"referral-provider",
+							"referral-reason"
 						]
 					},
 					{
-						id: "refer-specialty",
+						id: "referral-specialty",
 						component: "TextField",
 						label: "Specialty",
 						placeholder: "e.g. Cardiology, Endocrinology"
 					},
 					{
-						id: "refer-provider",
+						id: "referral-provider",
 						component: "TextField",
 						label: "Preferred Provider (optional)",
 						placeholder: "Provider name or practice"
 					},
 					{
-						id: "refer-reason",
+						id: "referral-reason",
 						component: "TextArea",
 						label: "Reason for Referral",
 						placeholder: "Clinical indication and relevant history..."
@@ -4264,10 +4264,10 @@ const ke = [
 					{
 						id: "clinical-card",
 						component: "Card",
-						children: ["clinical-hdr", "clinical-body"]
+						children: ["clinical-header", "clinical-body"]
 					},
 					{
-						id: "clinical-hdr",
+						id: "clinical-header",
 						component: "Header",
 						children: ["clinical-title"]
 					},
@@ -4280,19 +4280,19 @@ const ke = [
 					{
 						id: "clinical-body",
 						component: "Body",
-						child: "clinical-col"
+						child: "clinical-column"
 					},
 					{
-						id: "clinical-col",
+						id: "clinical-column",
 						component: "Column",
 						children: [
-							"clinical-dx",
+							"clinical-diagnosis",
 							"clinical-icd",
 							"clinical-notes"
 						]
 					},
 					{
-						id: "clinical-dx",
+						id: "clinical-diagnosis",
 						component: "TextField",
 						label: "Primary Diagnosis",
 						placeholder: "e.g. Persistent atrial fibrillation"
@@ -4317,26 +4317,26 @@ const ke = [
 						id: "actions",
 						component: "Row",
 						children: [
-							"submit-btn",
-							"save-draft-btn",
-							"cancel-btn"
+							"button-submit",
+							"button-save-draft",
+							"button-cancel"
 						]
 					},
 					{
-						id: "submit-btn",
+						id: "button-submit",
 						component: "Button",
 						text: "Submit Referral",
 						variant: "primary",
 						action: { event: { name: "submit_referral" } }
 					},
 					{
-						id: "save-draft-btn",
+						id: "button-save-draft",
 						component: "Button",
 						text: "Save Draft",
 						action: { event: { name: "save_draft" } }
 					},
 					{
-						id: "cancel-btn",
+						id: "button-cancel",
 						component: "Button",
 						text: "Cancel",
 						action: { event: { name: "cancel_referral" } }
@@ -4377,7 +4377,7 @@ const ke = [
 					{
 						id: "search-row",
 						component: "Row",
-						children: ["search-field", "search-btn"]
+						children: ["search-field", "button-search"]
 					},
 					{
 						id: "search-field",
@@ -4386,7 +4386,7 @@ const ke = [
 						placeholder: "e.g. E11.65 or \"type 2 diabetes\""
 					},
 					{
-						id: "search-btn",
+						id: "button-search",
 						component: "Button",
 						text: "Search",
 						variant: "primary",
@@ -4399,10 +4399,10 @@ const ke = [
 					{
 						id: "results-card",
 						component: "Card",
-						children: ["results-hdr", "results-body"]
+						children: ["results-header", "results-body"]
 					},
 					{
-						id: "results-hdr",
+						id: "results-header",
 						component: "Header",
 						children: ["results-title"]
 					},
@@ -4415,10 +4415,10 @@ const ke = [
 					{
 						id: "results-body",
 						component: "Body",
-						child: "results-col"
+						child: "results-column"
 					},
 					{
-						id: "results-col",
+						id: "results-column",
 						component: "Column",
 						children: ["results-count", "result-list"]
 					},
@@ -4431,39 +4431,39 @@ const ke = [
 						id: "result-list",
 						component: "List",
 						children: [
-							"r1",
-							"r2",
-							"r3",
-							"r4",
-							"r5"
+							"result-1",
+							"result-2",
+							"result-3",
+							"result-4",
+							"result-5"
 						]
 					},
 					{
-						id: "r1",
+						id: "result-1",
 						component: "ListItem",
 						text: "E11.9 — Type 2 diabetes mellitus without complications",
 						value: "E11.9"
 					},
 					{
-						id: "r2",
+						id: "result-2",
 						component: "ListItem",
 						text: "E11.65 — Type 2 DM with hyperglycemia",
 						value: "E11.65"
 					},
 					{
-						id: "r3",
+						id: "result-3",
 						component: "ListItem",
 						text: "E11.22 — Type 2 DM with diabetic chronic kidney disease",
 						value: "E11.22"
 					},
 					{
-						id: "r4",
+						id: "result-4",
 						component: "ListItem",
 						text: "E11.40 — Type 2 DM with diabetic neuropathy, unspecified",
 						value: "E11.40"
 					},
 					{
-						id: "r5",
+						id: "result-5",
 						component: "ListItem",
 						text: "E11.319 — Type 2 DM with unspecified diabetic retinopathy",
 						value: "E11.319"
@@ -4476,13 +4476,13 @@ const ke = [
 						id: "detail-card",
 						component: "Card",
 						children: [
-							"detail-hdr",
+							"detail-header",
 							"detail-body",
-							"detail-ftr"
+							"detail-footer"
 						]
 					},
 					{
-						id: "detail-hdr",
+						id: "detail-header",
 						component: "Header",
 						children: ["detail-title"]
 					},
@@ -4495,14 +4495,14 @@ const ke = [
 					{
 						id: "detail-body",
 						component: "Body",
-						child: "detail-col"
+						child: "detail-column"
 					},
 					{
-						id: "detail-col",
+						id: "detail-column",
 						component: "Column",
 						children: [
 							"detail-code",
-							"detail-desc",
+							"detail-description",
 							"detail-billable",
 							"detail-category",
 							"detail-parent"
@@ -4511,7 +4511,7 @@ const ke = [
 					{
 						id: "detail-code",
 						component: "Row",
-						children: ["code-label", "code-val"]
+						children: ["code-label", "code-value"]
 					},
 					{
 						id: "code-label",
@@ -4519,60 +4519,60 @@ const ke = [
 						text: "Code:"
 					},
 					{
-						id: "code-val",
+						id: "code-value",
 						component: "Text",
 						text: "E11.65",
 						variant: "h4"
 					},
 					{
-						id: "detail-desc",
+						id: "detail-description",
 						component: "Row",
-						children: ["desc-label", "desc-val"]
+						children: ["description-label", "description-value"]
 					},
 					{
-						id: "desc-label",
+						id: "description-label",
 						component: "Text",
 						text: "Description:"
 					},
 					{
-						id: "desc-val",
+						id: "description-value",
 						component: "Text",
 						text: "Type 2 diabetes mellitus with hyperglycemia"
 					},
 					{
 						id: "detail-billable",
 						component: "Row",
-						children: ["bill-label", "bill-badge"]
+						children: ["billable-label", "billable-badge"]
 					},
 					{
-						id: "bill-label",
+						id: "billable-label",
 						component: "Text",
 						text: "Status:"
 					},
 					{
-						id: "bill-badge",
+						id: "billable-badge",
 						component: "Badge",
 						text: "Billable"
 					},
 					{
 						id: "detail-category",
 						component: "Row",
-						children: ["cat-label", "cat-val"]
+						children: ["category-label", "category-value"]
 					},
 					{
-						id: "cat-label",
+						id: "category-label",
 						component: "Text",
 						text: "Category:"
 					},
 					{
-						id: "cat-val",
+						id: "category-value",
 						component: "Text",
 						text: "E11 — Type 2 diabetes mellitus"
 					},
 					{
 						id: "detail-parent",
 						component: "Row",
-						children: ["parent-label", "parent-val"]
+						children: ["parent-label", "parent-value"]
 					},
 					{
 						id: "parent-label",
@@ -4580,22 +4580,22 @@ const ke = [
 						text: "Chapter:"
 					},
 					{
-						id: "parent-val",
+						id: "parent-value",
 						component: "Text",
 						text: "IV — Endocrine, nutritional and metabolic diseases (E00-E89)"
 					},
 					{
-						id: "detail-ftr",
+						id: "detail-footer",
 						component: "Footer",
 						children: ["detail-actions"]
 					},
 					{
 						id: "detail-actions",
 						component: "Row",
-						children: ["use-code-btn", "related-btn"]
+						children: ["button-use-code", "button-related"]
 					},
 					{
-						id: "use-code-btn",
+						id: "button-use-code",
 						component: "Button",
 						text: "Use This Code",
 						variant: "primary",
@@ -4605,7 +4605,7 @@ const ke = [
 						} }
 					},
 					{
-						id: "related-btn",
+						id: "button-related",
 						component: "Button",
 						text: "Related Codes",
 						action: { event: { name: "related_codes" } }
@@ -4649,24 +4649,24 @@ const ke = [
 						id: "progress-row",
 						component: "Row",
 						children: [
-							"prog-1",
-							"prog-2",
-							"prog-3"
+							"progress-1",
+							"progress-2",
+							"progress-3"
 						]
 					},
 					{
-						id: "prog-1",
+						id: "progress-1",
 						component: "Badge",
 						text: "1. Demographics"
 					},
 					{
-						id: "prog-2",
+						id: "progress-2",
 						component: "Text",
 						text: "2. Insurance",
 						variant: "caption"
 					},
 					{
-						id: "prog-3",
+						id: "progress-3",
 						component: "Text",
 						text: "3. Medical History",
 						variant: "caption"
@@ -4678,90 +4678,90 @@ const ke = [
 					{
 						id: "demographics-card",
 						component: "Card",
-						children: ["demo-hdr", "demo-body"]
+						children: ["demographics-header", "demographics-body"]
 					},
 					{
-						id: "demo-hdr",
+						id: "demographics-header",
 						component: "Header",
-						children: ["demo-title"]
+						children: ["demographics-title"]
 					},
 					{
-						id: "demo-title",
+						id: "demographics-title",
 						component: "Text",
 						text: "Demographics",
 						variant: "h3"
 					},
 					{
-						id: "demo-body",
+						id: "demographics-body",
 						component: "Body",
-						child: "demo-col"
+						child: "demographics-column"
 					},
 					{
-						id: "demo-col",
+						id: "demographics-column",
 						component: "Column",
 						children: [
-							"demo-name-row",
-							"demo-dob-row",
-							"demo-address",
-							"demo-phone",
-							"demo-email",
-							"demo-emergency"
+							"demographics-name-row",
+							"demographics-dob-row",
+							"demographics-address",
+							"demographics-phone",
+							"demographics-email",
+							"demographics-emergency"
 						]
 					},
 					{
-						id: "demo-name-row",
+						id: "demographics-name-row",
 						component: "Row",
-						children: ["demo-first", "demo-last"]
+						children: ["demographics-first", "demographics-last"]
 					},
 					{
-						id: "demo-first",
+						id: "demographics-first",
 						component: "TextField",
 						label: "First Name",
 						placeholder: "First"
 					},
 					{
-						id: "demo-last",
+						id: "demographics-last",
 						component: "TextField",
 						label: "Last Name",
 						placeholder: "Last"
 					},
 					{
-						id: "demo-dob-row",
+						id: "demographics-dob-row",
 						component: "Row",
-						children: ["demo-dob", "demo-sex"]
+						children: ["demographics-dob", "demographics-sex"]
 					},
 					{
-						id: "demo-dob",
+						id: "demographics-dob",
 						component: "TextField",
 						label: "Date of Birth",
 						placeholder: "YYYY-MM-DD"
 					},
 					{
-						id: "demo-sex",
+						id: "demographics-sex",
 						component: "TextField",
 						label: "Sex at Birth",
 						placeholder: "M / F / Other"
 					},
 					{
-						id: "demo-address",
+						id: "demographics-address",
 						component: "TextField",
 						label: "Address",
 						placeholder: "123 Main St, City, State ZIP"
 					},
 					{
-						id: "demo-phone",
+						id: "demographics-phone",
 						component: "TextField",
 						label: "Phone",
 						placeholder: "(555) 000-0000"
 					},
 					{
-						id: "demo-email",
+						id: "demographics-email",
 						component: "TextField",
 						label: "Email",
 						placeholder: "patient@email.com"
 					},
 					{
-						id: "demo-emergency",
+						id: "demographics-emergency",
 						component: "TextField",
 						label: "Emergency Contact",
 						placeholder: "Name — Relationship — Phone"
@@ -4769,47 +4769,47 @@ const ke = [
 					{
 						id: "insurance-card",
 						component: "Card",
-						children: ["ins-hdr", "ins-body"]
+						children: ["insurance-header", "insurance-body"]
 					},
 					{
-						id: "ins-hdr",
+						id: "insurance-header",
 						component: "Header",
-						children: ["ins-title"]
+						children: ["insurance-title"]
 					},
 					{
-						id: "ins-title",
+						id: "insurance-title",
 						component: "Text",
 						text: "Insurance",
 						variant: "h3"
 					},
 					{
-						id: "ins-body",
+						id: "insurance-body",
 						component: "Body",
-						child: "ins-col"
+						child: "insurance-column"
 					},
 					{
-						id: "ins-col",
+						id: "insurance-column",
 						component: "Column",
 						children: [
-							"ins-carrier",
-							"ins-id",
-							"ins-group"
+							"insurance-carrier",
+							"insurance-id",
+							"insurance-group"
 						]
 					},
 					{
-						id: "ins-carrier",
+						id: "insurance-carrier",
 						component: "TextField",
 						label: "Insurance Carrier",
 						placeholder: "e.g. Blue Cross Blue Shield"
 					},
 					{
-						id: "ins-id",
+						id: "insurance-id",
 						component: "TextField",
 						label: "Member ID",
 						placeholder: "ID number on your card"
 					},
 					{
-						id: "ins-group",
+						id: "insurance-group",
 						component: "TextField",
 						label: "Group Number",
 						placeholder: "Group number on your card"
@@ -4817,54 +4817,54 @@ const ke = [
 					{
 						id: "history-card",
 						component: "Card",
-						children: ["hist-hdr", "hist-body"]
+						children: ["history-header", "history-body"]
 					},
 					{
-						id: "hist-hdr",
+						id: "history-header",
 						component: "Header",
-						children: ["hist-title"]
+						children: ["history-title"]
 					},
 					{
-						id: "hist-title",
+						id: "history-title",
 						component: "Text",
 						text: "Medical History",
 						variant: "h3"
 					},
 					{
-						id: "hist-body",
+						id: "history-body",
 						component: "Body",
-						child: "hist-col"
+						child: "history-column"
 					},
 					{
-						id: "hist-col",
+						id: "history-column",
 						component: "Column",
 						children: [
-							"hist-conditions",
-							"hist-surgeries",
-							"hist-allergies",
-							"hist-meds"
+							"history-conditions",
+							"history-surgeries",
+							"history-allergies",
+							"history-medications"
 						]
 					},
 					{
-						id: "hist-conditions",
+						id: "history-conditions",
 						component: "TextArea",
 						label: "Current Conditions",
 						placeholder: "List any chronic conditions or diagnoses..."
 					},
 					{
-						id: "hist-surgeries",
+						id: "history-surgeries",
 						component: "TextArea",
 						label: "Past Surgeries",
 						placeholder: "List any prior surgeries and approximate dates..."
 					},
 					{
-						id: "hist-allergies",
+						id: "history-allergies",
 						component: "TextField",
 						label: "Allergies",
 						placeholder: "Drug, food, or environmental allergies"
 					},
 					{
-						id: "hist-meds",
+						id: "history-medications",
 						component: "TextArea",
 						label: "Current Medications",
 						placeholder: "List all medications, doses, and frequency..."
@@ -4876,17 +4876,17 @@ const ke = [
 					{
 						id: "actions",
 						component: "Row",
-						children: ["submit-btn", "save-btn"]
+						children: ["button-submit", "button-save"]
 					},
 					{
-						id: "submit-btn",
+						id: "button-submit",
 						component: "Button",
 						text: "Submit Intake Form",
 						variant: "primary",
 						action: { event: { name: "submit_intake" } }
 					},
 					{
-						id: "save-btn",
+						id: "button-save",
 						component: "Button",
 						text: "Save Progress",
 						action: { event: { name: "save_intake" } }
@@ -4916,7 +4916,7 @@ const ke = [
 							"auth-2-card",
 							"auth-3-card",
 							"divider-2",
-							"new-auth-btn"
+							"button-new-authorization"
 						]
 					},
 					{
@@ -4932,10 +4932,10 @@ const ke = [
 					{
 						id: "auth-1-card",
 						component: "Card",
-						children: ["auth-1-hdr", "auth-1-body"]
+						children: ["auth-1-header", "auth-1-body"]
 					},
 					{
-						id: "auth-1-hdr",
+						id: "auth-1-header",
 						component: "Header",
 						children: ["auth-1-header"]
 					},
@@ -4958,10 +4958,10 @@ const ke = [
 					{
 						id: "auth-1-body",
 						component: "Body",
-						child: "auth-1-col"
+						child: "auth-1-column"
 					},
 					{
-						id: "auth-1-col",
+						id: "auth-1-column",
 						component: "Column",
 						children: ["auth-1-details", "auth-1-timeline"]
 					},
@@ -4971,67 +4971,67 @@ const ke = [
 						children: [
 							"auth-1-pt",
 							"auth-1-payer",
-							"auth-1-auth-num",
+							"auth-1-auth-number",
 							"auth-1-valid"
 						]
 					},
 					{
 						id: "auth-1-pt",
 						component: "Row",
-						children: ["auth-1-pt-l", "auth-1-pt-v"]
+						children: ["auth-1-patient-label", "auth-1-patient-value"]
 					},
 					{
-						id: "auth-1-pt-l",
+						id: "auth-1-patient-label",
 						component: "Text",
 						text: "Patient:"
 					},
 					{
-						id: "auth-1-pt-v",
+						id: "auth-1-patient-value",
 						component: "Text",
 						text: "Sandra Kim"
 					},
 					{
 						id: "auth-1-payer",
 						component: "Row",
-						children: ["auth-1-payer-l", "auth-1-payer-v"]
+						children: ["auth-1-payer-label", "auth-1-payer-value"]
 					},
 					{
-						id: "auth-1-payer-l",
+						id: "auth-1-payer-label",
 						component: "Text",
 						text: "Payer:"
 					},
 					{
-						id: "auth-1-payer-v",
+						id: "auth-1-payer-value",
 						component: "Text",
 						text: "Aetna PPO"
 					},
 					{
-						id: "auth-1-auth-num",
+						id: "auth-1-auth-number",
 						component: "Row",
-						children: ["auth-1-num-l", "auth-1-num-v"]
+						children: ["auth-1-number-label", "auth-1-number-value"]
 					},
 					{
-						id: "auth-1-num-l",
+						id: "auth-1-number-label",
 						component: "Text",
 						text: "Auth #:"
 					},
 					{
-						id: "auth-1-num-v",
+						id: "auth-1-number-value",
 						component: "Text",
 						text: "PA-2026-089412"
 					},
 					{
 						id: "auth-1-valid",
 						component: "Row",
-						children: ["auth-1-valid-l", "auth-1-valid-v"]
+						children: ["auth-1-valid-label", "auth-1-valid-value"]
 					},
 					{
-						id: "auth-1-valid-l",
+						id: "auth-1-valid-label",
 						component: "Text",
 						text: "Valid:"
 					},
 					{
-						id: "auth-1-valid-v",
+						id: "auth-1-valid-value",
 						component: "Text",
 						text: "Feb 15 – May 15, 2026"
 					},
@@ -5045,13 +5045,13 @@ const ke = [
 						id: "auth-2-card",
 						component: "Card",
 						children: [
-							"auth-2-hdr",
+							"auth-2-header",
 							"auth-2-body",
-							"auth-2-ftr"
+							"auth-2-footer"
 						]
 					},
 					{
-						id: "auth-2-hdr",
+						id: "auth-2-header",
 						component: "Header",
 						children: ["auth-2-header"]
 					},
@@ -5074,10 +5074,10 @@ const ke = [
 					{
 						id: "auth-2-body",
 						component: "Body",
-						child: "auth-2-col"
+						child: "auth-2-column"
 					},
 					{
-						id: "auth-2-col",
+						id: "auth-2-column",
 						component: "Column",
 						children: ["auth-2-details", "auth-2-timeline"]
 					},
@@ -5087,51 +5087,51 @@ const ke = [
 						children: [
 							"auth-2-pt",
 							"auth-2-payer",
-							"auth-2-dx"
+							"auth-2-diagnosis"
 						]
 					},
 					{
 						id: "auth-2-pt",
 						component: "Row",
-						children: ["auth-2-pt-l", "auth-2-pt-v"]
+						children: ["auth-2-patient-label", "auth-2-patient-value"]
 					},
 					{
-						id: "auth-2-pt-l",
+						id: "auth-2-patient-label",
 						component: "Text",
 						text: "Patient:"
 					},
 					{
-						id: "auth-2-pt-v",
+						id: "auth-2-patient-value",
 						component: "Text",
 						text: "David Park"
 					},
 					{
 						id: "auth-2-payer",
 						component: "Row",
-						children: ["auth-2-payer-l", "auth-2-payer-v"]
+						children: ["auth-2-payer-label", "auth-2-payer-value"]
 					},
 					{
-						id: "auth-2-payer-l",
+						id: "auth-2-payer-label",
 						component: "Text",
 						text: "Payer:"
 					},
 					{
-						id: "auth-2-payer-v",
+						id: "auth-2-payer-value",
 						component: "Text",
 						text: "UnitedHealthcare"
 					},
 					{
-						id: "auth-2-dx",
+						id: "auth-2-diagnosis",
 						component: "Row",
-						children: ["auth-2-dx-l", "auth-2-dx-v"]
+						children: ["auth-2-diagnosis-label", "auth-2-diagnosis-value"]
 					},
 					{
-						id: "auth-2-dx-l",
+						id: "auth-2-diagnosis-label",
 						component: "Text",
 						text: "Diagnosis:"
 					},
 					{
-						id: "auth-2-dx-v",
+						id: "auth-2-diagnosis-value",
 						component: "Text",
 						text: "M54.5 — Low back pain"
 					},
@@ -5142,24 +5142,24 @@ const ke = [
 						variant: "caption"
 					},
 					{
-						id: "auth-2-ftr",
+						id: "auth-2-footer",
 						component: "Footer",
 						children: ["auth-2-actions"]
 					},
 					{
 						id: "auth-2-actions",
 						component: "Row",
-						children: ["auth-2-check-btn", "auth-2-docs-btn"]
+						children: ["auth-2-button-check", "auth-2-button-documents"]
 					},
 					{
-						id: "auth-2-check-btn",
+						id: "auth-2-button-check",
 						component: "Button",
 						text: "Check Status",
 						variant: "primary",
 						action: { event: { name: "check_auth_status" } }
 					},
 					{
-						id: "auth-2-docs-btn",
+						id: "auth-2-button-documents",
 						component: "Button",
 						text: "Upload Docs",
 						action: { event: { name: "upload_auth_docs" } }
@@ -5168,13 +5168,13 @@ const ke = [
 						id: "auth-3-card",
 						component: "Card",
 						children: [
-							"auth-3-hdr",
+							"auth-3-header",
 							"auth-3-body",
-							"auth-3-ftr"
+							"auth-3-footer"
 						]
 					},
 					{
-						id: "auth-3-hdr",
+						id: "auth-3-header",
 						component: "Header",
 						children: ["auth-3-header"]
 					},
@@ -5197,10 +5197,10 @@ const ke = [
 					{
 						id: "auth-3-body",
 						component: "Body",
-						child: "auth-3-col"
+						child: "auth-3-column"
 					},
 					{
-						id: "auth-3-col",
+						id: "auth-3-column",
 						component: "Column",
 						children: ["auth-3-details", "auth-3-reason"]
 					},
@@ -5212,30 +5212,30 @@ const ke = [
 					{
 						id: "auth-3-pt",
 						component: "Row",
-						children: ["auth-3-pt-l", "auth-3-pt-v"]
+						children: ["auth-3-patient-label", "auth-3-patient-value"]
 					},
 					{
-						id: "auth-3-pt-l",
+						id: "auth-3-patient-label",
 						component: "Text",
 						text: "Patient:"
 					},
 					{
-						id: "auth-3-pt-v",
+						id: "auth-3-patient-value",
 						component: "Text",
 						text: "Lisa Nguyen"
 					},
 					{
 						id: "auth-3-payer",
 						component: "Row",
-						children: ["auth-3-payer-l", "auth-3-payer-v"]
+						children: ["auth-3-payer-label", "auth-3-payer-value"]
 					},
 					{
-						id: "auth-3-payer-l",
+						id: "auth-3-payer-label",
 						component: "Text",
 						text: "Payer:"
 					},
 					{
-						id: "auth-3-payer-v",
+						id: "auth-3-payer-value",
 						component: "Text",
 						text: "Cigna"
 					},
@@ -5245,24 +5245,24 @@ const ke = [
 						text: "Denial reason: Step therapy not met — must trial methotrexate first. Appeal deadline: Mar 5."
 					},
 					{
-						id: "auth-3-ftr",
+						id: "auth-3-footer",
 						component: "Footer",
 						children: ["auth-3-actions"]
 					},
 					{
 						id: "auth-3-actions",
 						component: "Row",
-						children: ["auth-3-appeal-btn", "auth-3-alt-btn"]
+						children: ["auth-3-button-appeal", "auth-3-button-alternative"]
 					},
 					{
-						id: "auth-3-appeal-btn",
+						id: "auth-3-button-appeal",
 						component: "Button",
 						text: "File Appeal",
 						variant: "primary",
 						action: { event: { name: "file_appeal" } }
 					},
 					{
-						id: "auth-3-alt-btn",
+						id: "auth-3-button-alternative",
 						component: "Button",
 						text: "Alternative Therapy",
 						action: { event: { name: "alt_therapy" } }
@@ -5272,7 +5272,7 @@ const ke = [
 						component: "Divider"
 					},
 					{
-						id: "new-auth-btn",
+						id: "button-new-authorization",
 						component: "Button",
 						text: "New Prior Authorization",
 						variant: "primary",
@@ -5318,23 +5318,23 @@ const ke = [
 						id: "patient-row",
 						component: "Row",
 						children: [
-							"cp-patient",
-							"cp-dx",
-							"cp-date"
+							"care-plan-patient",
+							"care-plan-dx",
+							"care-plan-date"
 						]
 					},
 					{
-						id: "cp-patient",
+						id: "care-plan-patient",
 						component: "Text",
 						text: "Thomas Brown, 58M"
 					},
 					{
-						id: "cp-dx",
+						id: "care-plan-dx",
 						component: "Badge",
 						text: "E11.65 — T2DM w/ hyperglycemia"
 					},
 					{
-						id: "cp-date",
+						id: "care-plan-date",
 						component: "Text",
 						text: "Initiated: Jan 8, 2026",
 						variant: "caption"
@@ -5346,10 +5346,10 @@ const ke = [
 					{
 						id: "goals-card",
 						component: "Card",
-						children: ["goals-hdr", "goals-body"]
+						children: ["goals-header", "goals-body"]
 					},
 					{
-						id: "goals-hdr",
+						id: "goals-header",
 						component: "Header",
 						children: ["goals-title"]
 					},
@@ -5362,10 +5362,10 @@ const ke = [
 					{
 						id: "goals-body",
 						component: "Body",
-						child: "goals-col"
+						child: "goals-column"
 					},
 					{
-						id: "goals-col",
+						id: "goals-column",
 						component: "Column",
 						children: [
 							"goal-1",
@@ -5376,7 +5376,7 @@ const ke = [
 					{
 						id: "goal-1",
 						component: "Row",
-						children: ["goal-1-check", "goal-1-col"]
+						children: ["goal-1-check", "goal-1-column"]
 					},
 					{
 						id: "goal-1-check",
@@ -5384,7 +5384,7 @@ const ke = [
 						label: ""
 					},
 					{
-						id: "goal-1-col",
+						id: "goal-1-column",
 						component: "Column",
 						children: ["goal-1-text", "goal-1-target"]
 					},
@@ -5402,7 +5402,7 @@ const ke = [
 					{
 						id: "goal-2",
 						component: "Row",
-						children: ["goal-2-check", "goal-2-col"]
+						children: ["goal-2-check", "goal-2-column"]
 					},
 					{
 						id: "goal-2-check",
@@ -5410,7 +5410,7 @@ const ke = [
 						label: ""
 					},
 					{
-						id: "goal-2-col",
+						id: "goal-2-column",
 						component: "Column",
 						children: ["goal-2-text", "goal-2-target"]
 					},
@@ -5428,7 +5428,7 @@ const ke = [
 					{
 						id: "goal-3",
 						component: "Row",
-						children: ["goal-3-check", "goal-3-col"]
+						children: ["goal-3-check", "goal-3-column"]
 					},
 					{
 						id: "goal-3-check",
@@ -5436,7 +5436,7 @@ const ke = [
 						label: ""
 					},
 					{
-						id: "goal-3-col",
+						id: "goal-3-column",
 						component: "Column",
 						children: ["goal-3-text", "goal-3-target"]
 					},
@@ -5454,15 +5454,15 @@ const ke = [
 					{
 						id: "interventions-card",
 						component: "Card",
-						children: ["interventions-hdr", "interventions-body"]
+						children: ["interventions-header", "interventions-body"]
 					},
 					{
-						id: "interventions-hdr",
+						id: "interventions-header",
 						component: "Header",
-						children: ["int-title"]
+						children: ["intervention-title"]
 					},
 					{
-						id: "int-title",
+						id: "intervention-title",
 						component: "Text",
 						text: "Interventions",
 						variant: "h3"
@@ -5470,163 +5470,163 @@ const ke = [
 					{
 						id: "interventions-body",
 						component: "Body",
-						child: "int-col"
+						child: "intervention-column"
 					},
 					{
-						id: "int-col",
+						id: "intervention-column",
 						component: "Column",
 						children: [
-							"int-med",
-							"int-diet",
-							"int-exercise",
-							"int-monitor"
+							"intervention-medication",
+							"intervention-diet",
+							"intervention-exercise",
+							"intervention-monitor"
 						]
 					},
 					{
-						id: "int-med",
+						id: "intervention-medication",
 						component: "Column",
 						children: [
-							"int-med-title",
-							"int-med-1",
-							"int-med-2"
+							"intervention-medication-title",
+							"intervention-medication-1",
+							"intervention-medication-2"
 						]
 					},
 					{
-						id: "int-med-title",
+						id: "intervention-medication-title",
 						component: "Text",
 						text: "Medications",
 						variant: "caption"
 					},
 					{
-						id: "int-med-1",
+						id: "intervention-medication-1",
 						component: "Text",
 						text: "Metformin 1000mg BID (titrated from 500mg)"
 					},
 					{
-						id: "int-med-2",
+						id: "intervention-medication-2",
 						component: "Text",
 						text: "Empagliflozin 10mg daily (added Feb 1)"
 					},
 					{
-						id: "int-diet",
+						id: "intervention-diet",
 						component: "Column",
-						children: ["int-diet-title", "int-diet-text"]
+						children: ["intervention-diet-title", "intervention-diet-text"]
 					},
 					{
-						id: "int-diet-title",
+						id: "intervention-diet-title",
 						component: "Text",
 						text: "Nutrition",
 						variant: "caption"
 					},
 					{
-						id: "int-diet-text",
+						id: "intervention-diet-text",
 						component: "Text",
 						text: "Referred to dietitian · Low-glycemic meal plan · Carb counting education"
 					},
 					{
-						id: "int-exercise",
+						id: "intervention-exercise",
 						component: "Column",
-						children: ["int-ex-title", "int-ex-text"]
+						children: ["intervention-exercise-title", "intervention-exercise-text"]
 					},
 					{
-						id: "int-ex-title",
+						id: "intervention-exercise-title",
 						component: "Text",
 						text: "Physical Activity",
 						variant: "caption"
 					},
 					{
-						id: "int-ex-text",
+						id: "intervention-exercise-text",
 						component: "Text",
 						text: "150 min/week moderate aerobic · Resistance training 2x/week"
 					},
 					{
-						id: "int-monitor",
+						id: "intervention-monitor",
 						component: "Column",
-						children: ["int-mon-title", "int-mon-text"]
+						children: ["intervention-monitor-title", "intervention-monitor-text"]
 					},
 					{
-						id: "int-mon-title",
+						id: "intervention-monitor-title",
 						component: "Text",
 						text: "Self-Monitoring",
 						variant: "caption"
 					},
 					{
-						id: "int-mon-text",
+						id: "intervention-monitor-text",
 						component: "Text",
 						text: "FBG daily · Post-prandial 2x/week · Log in patient portal"
 					},
 					{
 						id: "follow-up-card",
 						component: "Card",
-						children: ["fu-hdr", "fu-body"]
+						children: ["follow-up-header", "follow-up-body"]
 					},
 					{
-						id: "fu-hdr",
+						id: "follow-up-header",
 						component: "Header",
-						children: ["fu-title"]
+						children: ["follow-up-title"]
 					},
 					{
-						id: "fu-title",
+						id: "follow-up-title",
 						component: "Text",
 						text: "Follow-Up Schedule",
 						variant: "h3"
 					},
 					{
-						id: "fu-body",
+						id: "follow-up-body",
 						component: "Body",
-						child: "fu-col"
+						child: "follow-up-column"
 					},
 					{
-						id: "fu-col",
+						id: "follow-up-column",
 						component: "Column",
 						children: [
-							"fu-1",
-							"fu-2",
-							"fu-3"
+							"follow-up-1",
+							"follow-up-2",
+							"follow-up-3"
 						]
 					},
 					{
-						id: "fu-1",
+						id: "follow-up-1",
 						component: "Row",
-						children: ["fu-1-date", "fu-1-desc"]
+						children: ["follow-up-1-date", "follow-up-1-description"]
 					},
 					{
-						id: "fu-1-date",
+						id: "follow-up-1-date",
 						component: "Badge",
 						text: "Mar 8"
 					},
 					{
-						id: "fu-1-desc",
+						id: "follow-up-1-description",
 						component: "Text",
 						text: "Lab draw: HbA1c, BMP, lipid panel"
 					},
 					{
-						id: "fu-2",
+						id: "follow-up-2",
 						component: "Row",
-						children: ["fu-2-date", "fu-2-desc"]
+						children: ["follow-up-2-date", "follow-up-2-description"]
 					},
 					{
-						id: "fu-2-date",
+						id: "follow-up-2-date",
 						component: "Badge",
 						text: "Mar 15"
 					},
 					{
-						id: "fu-2-desc",
+						id: "follow-up-2-description",
 						component: "Text",
 						text: "Office visit: review labs, med adjustment"
 					},
 					{
-						id: "fu-3",
+						id: "follow-up-3",
 						component: "Row",
-						children: ["fu-3-date", "fu-3-desc"]
+						children: ["follow-up-3-date", "follow-up-3-description"]
 					},
 					{
-						id: "fu-3-date",
+						id: "follow-up-3-date",
 						component: "Badge",
 						text: "Apr 12"
 					},
 					{
-						id: "fu-3-desc",
+						id: "follow-up-3-description",
 						component: "Text",
 						text: "Dietitian follow-up"
 					},
@@ -5637,10 +5637,10 @@ const ke = [
 					{
 						id: "team-card",
 						component: "Card",
-						children: ["team-hdr", "team-body"]
+						children: ["team-header", "team-body"]
 					},
 					{
-						id: "team-hdr",
+						id: "team-header",
 						component: "Header",
 						children: ["team-title"]
 					},
@@ -5653,10 +5653,10 @@ const ke = [
 					{
 						id: "team-body",
 						component: "Body",
-						child: "team-col"
+						child: "team-column"
 					},
 					{
-						id: "team-col",
+						id: "team-column",
 						component: "Column",
 						children: [
 							"team-pcp",
@@ -5683,26 +5683,26 @@ const ke = [
 						id: "actions",
 						component: "Row",
 						children: [
-							"update-btn",
-							"share-btn",
-							"print-btn"
+							"button-update",
+							"button-share",
+							"button-print"
 						]
 					},
 					{
-						id: "update-btn",
+						id: "button-update",
 						component: "Button",
 						text: "Update Plan",
 						variant: "primary",
 						action: { event: { name: "update_care_plan" } }
 					},
 					{
-						id: "share-btn",
+						id: "button-share",
 						component: "Button",
 						text: "Share with Patient",
 						action: { event: { name: "share_care_plan" } }
 					},
 					{
-						id: "print-btn",
+						id: "button-print",
 						component: "Button",
 						text: "Print",
 						action: { event: { name: "print_care_plan" } }
@@ -5737,7 +5737,7 @@ const ke = [
 							"dessert-list",
 							"divider-2",
 							"dietary-row",
-							"reserve-btn"
+							"button-reserve"
 						]
 					},
 					{
@@ -5766,53 +5766,53 @@ const ke = [
 						id: "starter-list",
 						component: "Column",
 						children: [
-							"s1-row",
-							"s2-row",
-							"s3-row"
+							"starter-1-row",
+							"starter-2-row",
+							"starter-3-row"
 						]
 					},
 					{
-						id: "s1-row",
+						id: "starter-1-row",
 						component: "Row",
-						children: ["s1-name", "s1-price"]
+						children: ["starter-1-name", "starter-1-price"]
 					},
 					{
-						id: "s1-name",
+						id: "starter-1-name",
 						component: "Text",
 						text: "Burrata with heirloom tomatoes, basil oil & sourdough"
 					},
 					{
-						id: "s1-price",
+						id: "starter-1-price",
 						component: "Badge",
 						text: "€16"
 					},
 					{
-						id: "s2-row",
+						id: "starter-2-row",
 						component: "Row",
-						children: ["s2-name", "s2-price"]
+						children: ["starter-2-name", "starter-2-price"]
 					},
 					{
-						id: "s2-name",
+						id: "starter-2-name",
 						component: "Text",
 						text: "Grilled octopus, chickpea purée, smoked paprika"
 					},
 					{
-						id: "s2-price",
+						id: "starter-2-price",
 						component: "Badge",
 						text: "€19"
 					},
 					{
-						id: "s3-row",
+						id: "starter-3-row",
 						component: "Row",
-						children: ["s3-name", "s3-price"]
+						children: ["starter-3-name", "starter-3-price"]
 					},
 					{
-						id: "s3-name",
+						id: "starter-3-name",
 						component: "Text",
 						text: "Wild mushroom soup, truffle cream (V)"
 					},
 					{
-						id: "s3-price",
+						id: "starter-3-price",
 						component: "Badge",
 						text: "€14"
 					},
@@ -5826,69 +5826,69 @@ const ke = [
 						id: "mains-list",
 						component: "Column",
 						children: [
-							"m1-row",
-							"m2-row",
-							"m3-row",
-							"m4-row"
+							"main-1-row",
+							"main-2-row",
+							"main-3-row",
+							"main-4-row"
 						]
 					},
 					{
-						id: "m1-row",
+						id: "main-1-row",
 						component: "Row",
-						children: ["m1-name", "m1-price"]
+						children: ["main-1-name", "main-1-price"]
 					},
 					{
-						id: "m1-name",
+						id: "main-1-name",
 						component: "Text",
 						text: "Pan-seared sea bass, saffron risotto, fennel salad"
 					},
 					{
-						id: "m1-price",
+						id: "main-1-price",
 						component: "Badge",
 						text: "€34"
 					},
 					{
-						id: "m2-row",
+						id: "main-2-row",
 						component: "Row",
-						children: ["m2-name", "m2-price"]
+						children: ["main-2-name", "main-2-price"]
 					},
 					{
-						id: "m2-name",
+						id: "main-2-name",
 						component: "Text",
 						text: "Wagyu ribeye 250g, roasted bone marrow, triple-cooked chips"
 					},
 					{
-						id: "m2-price",
+						id: "main-2-price",
 						component: "Badge",
 						text: "€52"
 					},
 					{
-						id: "m3-row",
+						id: "main-3-row",
 						component: "Row",
-						children: ["m3-name", "m3-price"]
+						children: ["main-3-name", "main-3-price"]
 					},
 					{
-						id: "m3-name",
+						id: "main-3-name",
 						component: "Text",
 						text: "Lobster linguine, cherry tomato, chilli & garlic"
 					},
 					{
-						id: "m3-price",
+						id: "main-3-price",
 						component: "Badge",
 						text: "€38"
 					},
 					{
-						id: "m4-row",
+						id: "main-4-row",
 						component: "Row",
-						children: ["m4-name", "m4-price"]
+						children: ["main-4-name", "main-4-price"]
 					},
 					{
-						id: "m4-name",
+						id: "main-4-name",
 						component: "Text",
 						text: "Aubergine parmigiana, rocket salad (V)"
 					},
 					{
-						id: "m4-price",
+						id: "main-4-price",
 						component: "Badge",
 						text: "€24"
 					},
@@ -5901,35 +5901,35 @@ const ke = [
 					{
 						id: "dessert-list",
 						component: "Column",
-						children: ["d1-row", "d2-row"]
+						children: ["dessert-1-row", "dessert-2-row"]
 					},
 					{
-						id: "d1-row",
+						id: "dessert-1-row",
 						component: "Row",
-						children: ["d1-name", "d1-price"]
+						children: ["dessert-1-name", "dessert-1-price"]
 					},
 					{
-						id: "d1-name",
+						id: "dessert-1-name",
 						component: "Text",
 						text: "Tiramisu, espresso gelato"
 					},
 					{
-						id: "d1-price",
+						id: "dessert-1-price",
 						component: "Badge",
 						text: "€12"
 					},
 					{
-						id: "d2-row",
+						id: "dessert-2-row",
 						component: "Row",
-						children: ["d2-name", "d2-price"]
+						children: ["dessert-2-name", "dessert-2-price"]
 					},
 					{
-						id: "d2-name",
+						id: "dessert-2-name",
 						component: "Text",
 						text: "Dark chocolate fondant, passion fruit coulis"
 					},
 					{
-						id: "d2-price",
+						id: "dessert-2-price",
 						component: "Badge",
 						text: "€14"
 					},
@@ -5940,7 +5940,7 @@ const ke = [
 					{
 						id: "dietary-row",
 						component: "Row",
-						children: ["dietary-note", "allergen-btn"]
+						children: ["dietary-note", "button-allergen"]
 					},
 					{
 						id: "dietary-note",
@@ -5949,13 +5949,13 @@ const ke = [
 						variant: "caption"
 					},
 					{
-						id: "allergen-btn",
+						id: "button-allergen",
 						component: "Button",
 						text: "View Allergens",
 						action: { event: { name: "view_allergens" } }
 					},
 					{
-						id: "reserve-btn",
+						id: "button-reserve",
 						component: "Button",
 						text: "Reserve a Table",
 						variant: "primary",
@@ -5989,7 +5989,7 @@ const ke = [
 							"special-label",
 							"special-field",
 							"summary-card",
-							"place-order-btn"
+							"button-place-order"
 						]
 					},
 					{
@@ -6203,10 +6203,10 @@ const ke = [
 					{
 						id: "summary-body",
 						component: "Body",
-						child: "summary-col"
+						child: "summary-column"
 					},
 					{
-						id: "summary-col",
+						id: "summary-column",
 						component: "Row",
 						children: ["summary-text", "summary-total"]
 					},
@@ -6222,7 +6222,7 @@ const ke = [
 						variant: "h4"
 					},
 					{
-						id: "place-order-btn",
+						id: "button-place-order",
 						component: "Button",
 						text: "Place Order",
 						variant: "primary",
@@ -6277,13 +6277,13 @@ const ke = [
 						id: "spa-card",
 						component: "Card",
 						children: [
-							"spa-hdr",
+							"spa-header",
 							"spa-body",
-							"spa-ftr"
+							"spa-footer"
 						]
 					},
 					{
-						id: "spa-hdr",
+						id: "spa-header",
 						component: "Header",
 						children: ["spa-row"]
 					},
@@ -6315,15 +6315,15 @@ const ke = [
 					{
 						id: "spa-body",
 						component: "Body",
-						child: "spa-col"
+						child: "spa-column"
 					},
 					{
-						id: "spa-col",
+						id: "spa-column",
 						component: "Column",
-						children: ["spa-desc", "spa-slots"]
+						children: ["spa-description", "spa-slots"]
 					},
 					{
-						id: "spa-desc",
+						id: "spa-description",
 						component: "Text",
 						text: "Full-body massage, facial treatments, sauna & steam room. Open 09:00–21:00."
 					},
@@ -6366,12 +6366,12 @@ const ke = [
 						value: "spa-1630"
 					},
 					{
-						id: "spa-ftr",
+						id: "spa-footer",
 						component: "Footer",
-						children: ["spa-book-btn"]
+						children: ["spa-button-book"]
 					},
 					{
-						id: "spa-book-btn",
+						id: "spa-button-book",
 						component: "Button",
 						text: "Book Spa Session",
 						variant: "primary",
@@ -6381,13 +6381,13 @@ const ke = [
 						id: "pool-card",
 						component: "Card",
 						children: [
-							"pool-hdr",
+							"pool-header",
 							"pool-body",
-							"pool-ftr"
+							"pool-footer"
 						]
 					},
 					{
-						id: "pool-hdr",
+						id: "pool-header",
 						component: "Header",
 						children: ["pool-row"]
 					},
@@ -6419,22 +6419,22 @@ const ke = [
 					{
 						id: "pool-body",
 						component: "Body",
-						child: "pool-desc"
+						child: "pool-description"
 					},
 					{
-						id: "pool-desc",
+						id: "pool-description",
 						component: "Text",
 						text: "Infinity pool, heated jacuzzi, private beach access. Pool: 07:00–20:00, Beach: 08:00–sunset."
 					},
 					{
-						id: "pool-ftr",
+						id: "pool-footer",
 						component: "Footer",
-						children: ["pool-cabana"]
+						children: ["pool-cabana-row"]
 					},
 					{
-						id: "pool-cabana",
+						id: "pool-cabana-row",
 						component: "Row",
-						children: ["cabana-text", "cabana-btn"]
+						children: ["cabana-text", "button-cabana"]
 					},
 					{
 						id: "cabana-text",
@@ -6442,7 +6442,7 @@ const ke = [
 						text: "3 cabanas available"
 					},
 					{
-						id: "cabana-btn",
+						id: "button-cabana",
 						component: "Button",
 						text: "Reserve Cabana",
 						action: { event: { name: "reserve_cabana" } }
@@ -6451,13 +6451,13 @@ const ke = [
 						id: "gym-card",
 						component: "Card",
 						children: [
-							"gym-hdr",
+							"gym-header",
 							"gym-body",
-							"gym-ftr"
+							"gym-footer"
 						]
 					},
 					{
-						id: "gym-hdr",
+						id: "gym-header",
 						component: "Header",
 						children: ["gym-row"]
 					},
@@ -6489,30 +6489,30 @@ const ke = [
 					{
 						id: "gym-body",
 						component: "Body",
-						child: "gym-desc"
+						child: "gym-description"
 					},
 					{
-						id: "gym-desc",
+						id: "gym-description",
 						component: "Text",
 						text: "Cardio, free weights, yoga studio. Towels and water provided."
 					},
 					{
-						id: "gym-ftr",
+						id: "gym-footer",
 						component: "Footer",
-						children: ["gym-class"]
+						children: ["gym-class-row"]
 					},
 					{
-						id: "gym-class",
+						id: "gym-class-row",
 						component: "Row",
-						children: ["class-text", "class-btn"]
+						children: ["gym-class-text", "button-join-class"]
 					},
 					{
-						id: "class-text",
+						id: "gym-class-text",
 						component: "Text",
 						text: "Next class: Yoga at 07:00 (3 spots left)"
 					},
 					{
-						id: "class-btn",
+						id: "button-join-class",
 						component: "Button",
 						text: "Join Class",
 						action: { event: { name: "join_class" } }
@@ -6524,7 +6524,7 @@ const ke = [
 					{
 						id: "concierge-row",
 						component: "Row",
-						children: ["concierge-text", "concierge-btn"]
+						children: ["concierge-text", "button-concierge"]
 					},
 					{
 						id: "concierge-text",
@@ -6532,7 +6532,7 @@ const ke = [
 						text: "Need something else? Our concierge is available 24/7."
 					},
 					{
-						id: "concierge-btn",
+						id: "button-concierge",
 						component: "Button",
 						text: "Contact Concierge",
 						variant: "primary",
@@ -6577,7 +6577,7 @@ const ke = [
 						children: [
 							"dates-text",
 							"guests-text",
-							"modify-btn"
+							"button-modify-search"
 						]
 					},
 					{
@@ -6591,7 +6591,7 @@ const ke = [
 						text: "2 Adults"
 					},
 					{
-						id: "modify-btn",
+						id: "button-modify-search",
 						component: "Button",
 						text: "Modify Search",
 						action: { event: { name: "modify_search" } }
@@ -6604,13 +6604,13 @@ const ke = [
 						id: "room-1-card",
 						component: "Card",
 						children: [
-							"room-1-hdr",
+							"room-1-header",
 							"room-1-body",
-							"room-1-ftr"
+							"room-1-footer"
 						]
 					},
 					{
-						id: "room-1-hdr",
+						id: "room-1-header",
 						component: "Header",
 						children: ["room-1-img"]
 					},
@@ -6623,10 +6623,10 @@ const ke = [
 					{
 						id: "room-1-body",
 						component: "Body",
-						child: "room-1-col"
+						child: "room-1-column"
 					},
 					{
-						id: "room-1-col",
+						id: "room-1-column",
 						component: "Column",
 						children: ["room-1-info", "room-1-amenities"]
 					},
@@ -6673,34 +6673,34 @@ const ke = [
 						id: "room-1-amenities",
 						component: "Row",
 						children: [
-							"r1-a1",
-							"r1-a2",
-							"r1-a3",
-							"r1-a4"
+							"room-1-amenity-1",
+							"room-1-amenity-2",
+							"room-1-amenity-3",
+							"room-1-amenity-4"
 						]
 					},
 					{
-						id: "r1-a1",
+						id: "room-1-amenity-1",
 						component: "Badge",
 						text: "WiFi"
 					},
 					{
-						id: "r1-a2",
+						id: "room-1-amenity-2",
 						component: "Badge",
 						text: "Minibar"
 					},
 					{
-						id: "r1-a3",
+						id: "room-1-amenity-3",
 						component: "Badge",
 						text: "Rain Shower"
 					},
 					{
-						id: "r1-a4",
+						id: "room-1-amenity-4",
 						component: "Badge",
 						text: "Room Safe"
 					},
 					{
-						id: "room-1-ftr",
+						id: "room-1-footer",
 						component: "Footer",
 						children: ["room-1-actions"]
 					},
@@ -6726,13 +6726,13 @@ const ke = [
 						id: "room-2-card",
 						component: "Card",
 						children: [
-							"room-2-hdr",
+							"room-2-header",
 							"room-2-body",
-							"room-2-ftr"
+							"room-2-footer"
 						]
 					},
 					{
-						id: "room-2-hdr",
+						id: "room-2-header",
 						component: "Header",
 						children: ["room-2-img"]
 					},
@@ -6745,10 +6745,10 @@ const ke = [
 					{
 						id: "room-2-body",
 						component: "Body",
-						child: "room-2-col"
+						child: "room-2-column"
 					},
 					{
-						id: "room-2-col",
+						id: "room-2-column",
 						component: "Column",
 						children: ["room-2-info", "room-2-amenities"]
 					},
@@ -6795,40 +6795,40 @@ const ke = [
 						id: "room-2-amenities",
 						component: "Row",
 						children: [
-							"r2-a1",
-							"r2-a2",
-							"r2-a3",
-							"r2-a4",
-							"r2-a5"
+							"room-2-amenity-1",
+							"room-2-amenity-2",
+							"room-2-amenity-3",
+							"room-2-amenity-4",
+							"room-2-amenity-5"
 						]
 					},
 					{
-						id: "r2-a1",
+						id: "room-2-amenity-1",
 						component: "Badge",
 						text: "WiFi"
 					},
 					{
-						id: "r2-a2",
+						id: "room-2-amenity-2",
 						component: "Badge",
 						text: "Minibar"
 					},
 					{
-						id: "r2-a3",
+						id: "room-2-amenity-3",
 						component: "Badge",
 						text: "Bathtub"
 					},
 					{
-						id: "r2-a4",
+						id: "room-2-amenity-4",
 						component: "Badge",
 						text: "Balcony"
 					},
 					{
-						id: "r2-a5",
+						id: "room-2-amenity-5",
 						component: "Badge",
 						text: "Lounge Access"
 					},
 					{
-						id: "room-2-ftr",
+						id: "room-2-footer",
 						component: "Footer",
 						children: ["room-2-actions"]
 					},
@@ -6854,13 +6854,13 @@ const ke = [
 						id: "room-3-card",
 						component: "Card",
 						children: [
-							"room-3-hdr",
+							"room-3-header",
 							"room-3-body",
-							"room-3-ftr"
+							"room-3-footer"
 						]
 					},
 					{
-						id: "room-3-hdr",
+						id: "room-3-header",
 						component: "Header",
 						children: ["room-3-img"]
 					},
@@ -6873,10 +6873,10 @@ const ke = [
 					{
 						id: "room-3-body",
 						component: "Body",
-						child: "room-3-col"
+						child: "room-3-column"
 					},
 					{
-						id: "room-3-col",
+						id: "room-3-column",
 						component: "Column",
 						children: ["room-3-info", "room-3-amenities"]
 					},
@@ -6932,46 +6932,46 @@ const ke = [
 						id: "room-3-amenities",
 						component: "Row",
 						children: [
-							"r3-a1",
-							"r3-a2",
-							"r3-a3",
-							"r3-a4",
-							"r3-a5",
-							"r3-a6"
+							"room-3-amenity-1",
+							"room-3-amenity-2",
+							"room-3-amenity-3",
+							"room-3-amenity-4",
+							"room-3-amenity-5",
+							"room-3-amenity-6"
 						]
 					},
 					{
-						id: "r3-a1",
+						id: "room-3-amenity-1",
 						component: "Badge",
 						text: "WiFi"
 					},
 					{
-						id: "r3-a2",
+						id: "room-3-amenity-2",
 						component: "Badge",
 						text: "Butler Service"
 					},
 					{
-						id: "r3-a3",
+						id: "room-3-amenity-3",
 						component: "Badge",
 						text: "Private Terrace"
 					},
 					{
-						id: "r3-a4",
+						id: "room-3-amenity-4",
 						component: "Badge",
 						text: "Jacuzzi"
 					},
 					{
-						id: "r3-a5",
+						id: "room-3-amenity-5",
 						component: "Badge",
 						text: "Lounge Access"
 					},
 					{
-						id: "r3-a6",
+						id: "room-3-amenity-6",
 						component: "Badge",
 						text: "Airport Transfer"
 					},
 					{
-						id: "room-3-ftr",
+						id: "room-3-footer",
 						component: "Footer",
 						children: ["room-3-actions"]
 					},
@@ -7020,7 +7020,7 @@ const ke = [
 							"extras-card",
 							"divider-2",
 							"total-card",
-							"confirm-btn"
+							"button-confirm"
 						]
 					},
 					{
@@ -7061,10 +7061,10 @@ const ke = [
 					{
 						id: "booking-card",
 						component: "Card",
-						children: ["booking-hdr", "booking-body"]
+						children: ["booking-header", "booking-body"]
 					},
 					{
-						id: "booking-hdr",
+						id: "booking-header",
 						component: "Header",
 						children: ["booking-title"]
 					},
@@ -7077,10 +7077,10 @@ const ke = [
 					{
 						id: "booking-body",
 						component: "Body",
-						child: "booking-col"
+						child: "booking-column"
 					},
 					{
-						id: "booking-col",
+						id: "booking-column",
 						component: "Column",
 						children: [
 							"booking-room",
@@ -7092,7 +7092,7 @@ const ke = [
 					{
 						id: "booking-room",
 						component: "Row",
-						children: ["booking-room-label", "booking-room-val"]
+						children: ["booking-room-label", "booking-room-value"]
 					},
 					{
 						id: "booking-room-label",
@@ -7100,14 +7100,14 @@ const ke = [
 						text: "Room:"
 					},
 					{
-						id: "booking-room-val",
+						id: "booking-room-value",
 						component: "Text",
 						text: "Junior Suite — Sea View"
 					},
 					{
 						id: "booking-dates",
 						component: "Row",
-						children: ["booking-dates-label", "booking-dates-val"]
+						children: ["booking-dates-label", "booking-dates-value"]
 					},
 					{
 						id: "booking-dates-label",
@@ -7115,14 +7115,14 @@ const ke = [
 						text: "Dates:"
 					},
 					{
-						id: "booking-dates-val",
+						id: "booking-dates-value",
 						component: "Text",
 						text: "Mar 5–9, 2026 (4 nights)"
 					},
 					{
 						id: "booking-guests",
 						component: "Row",
-						children: ["booking-guests-label", "booking-guests-val"]
+						children: ["booking-guests-label", "booking-guests-value"]
 					},
 					{
 						id: "booking-guests-label",
@@ -7130,14 +7130,14 @@ const ke = [
 						text: "Guests:"
 					},
 					{
-						id: "booking-guests-val",
+						id: "booking-guests-value",
 						component: "Text",
 						text: "2 Adults"
 					},
 					{
 						id: "booking-rate",
 						component: "Row",
-						children: ["booking-rate-label", "booking-rate-val"]
+						children: ["booking-rate-label", "booking-rate-value"]
 					},
 					{
 						id: "booking-rate-label",
@@ -7145,17 +7145,17 @@ const ke = [
 						text: "Rate:"
 					},
 					{
-						id: "booking-rate-val",
+						id: "booking-rate-value",
 						component: "Text",
 						text: "€295 / night"
 					},
 					{
 						id: "guest-card",
 						component: "Card",
-						children: ["guest-hdr", "guest-body"]
+						children: ["guest-header", "guest-body"]
 					},
 					{
-						id: "guest-hdr",
+						id: "guest-header",
 						component: "Header",
 						children: ["guest-title"]
 					},
@@ -7168,10 +7168,10 @@ const ke = [
 					{
 						id: "guest-body",
 						component: "Body",
-						child: "guest-col"
+						child: "guest-column"
 					},
 					{
-						id: "guest-col",
+						id: "guest-column",
 						component: "Column",
 						children: [
 							"guest-name-row",
@@ -7220,10 +7220,10 @@ const ke = [
 					{
 						id: "extras-card",
 						component: "Card",
-						children: ["extras-hdr", "extras-body"]
+						children: ["extras-header", "extras-body"]
 					},
 					{
-						id: "extras-hdr",
+						id: "extras-header",
 						component: "Header",
 						children: ["extras-title"]
 					},
@@ -7236,10 +7236,10 @@ const ke = [
 					{
 						id: "extras-body",
 						component: "Body",
-						child: "extras-col"
+						child: "extras-column"
 					},
 					{
-						id: "extras-col",
+						id: "extras-column",
 						component: "Column",
 						children: [
 							"extra-breakfast",
@@ -7280,10 +7280,10 @@ const ke = [
 					{
 						id: "total-body",
 						component: "Body",
-						child: "total-col"
+						child: "total-column"
 					},
 					{
-						id: "total-col",
+						id: "total-column",
 						component: "Column",
 						children: [
 							"total-room-row",
@@ -7295,7 +7295,7 @@ const ke = [
 					{
 						id: "total-room-row",
 						component: "Row",
-						children: ["total-room-label", "total-room-val"]
+						children: ["total-room-label", "total-room-value"]
 					},
 					{
 						id: "total-room-label",
@@ -7303,14 +7303,14 @@ const ke = [
 						text: "Room (4 nights × €295)"
 					},
 					{
-						id: "total-room-val",
+						id: "total-room-value",
 						component: "Text",
 						text: "€1,180"
 					},
 					{
 						id: "total-tax-row",
 						component: "Row",
-						children: ["total-tax-label", "total-tax-val"]
+						children: ["total-tax-label", "total-tax-value"]
 					},
 					{
 						id: "total-tax-label",
@@ -7318,7 +7318,7 @@ const ke = [
 						text: "Taxes & fees"
 					},
 					{
-						id: "total-tax-val",
+						id: "total-tax-value",
 						component: "Text",
 						text: "€142"
 					},
@@ -7329,7 +7329,7 @@ const ke = [
 					{
 						id: "total-total-row",
 						component: "Row",
-						children: ["total-total-label", "total-total-val"]
+						children: ["total-total-label", "total-total-value"]
 					},
 					{
 						id: "total-total-label",
@@ -7338,13 +7338,13 @@ const ke = [
 						variant: "h3"
 					},
 					{
-						id: "total-total-val",
+						id: "total-total-value",
 						component: "Text",
 						text: "€1,322",
 						variant: "h3"
 					},
 					{
-						id: "confirm-btn",
+						id: "button-confirm",
 						component: "Button",
 						text: "Continue to Payment",
 						variant: "primary",
@@ -7397,92 +7397,92 @@ const ke = [
 						id: "messages",
 						component: "Column",
 						children: [
-							"msg-1",
-							"msg-2",
-							"msg-3",
-							"msg-4"
+							"message-1",
+							"message-2",
+							"message-3",
+							"message-4"
 						]
 					},
 					{
-						id: "msg-1",
+						id: "message-1",
 						component: "Card",
-						children: ["msg-1-hdr", "msg-1-body"]
+						children: ["message-1-header", "message-1-body"]
 					},
 					{
-						id: "msg-1-hdr",
+						id: "message-1-header",
 						component: "Header",
-						children: ["msg-1-sender"]
+						children: ["message-1-sender"]
 					},
 					{
-						id: "msg-1-sender",
+						id: "message-1-sender",
 						component: "Text",
 						text: "Concierge · 09:15",
 						variant: "caption"
 					},
 					{
-						id: "msg-1-body",
+						id: "message-1-body",
 						component: "Body",
-						child: "msg-1-text"
+						child: "message-1-text"
 					},
 					{
-						id: "msg-1-text",
+						id: "message-1-text",
 						component: "Text",
 						text: "Good morning! Welcome to Grand Marina Resort. How can I help you today?"
 					},
 					{
-						id: "msg-2",
+						id: "message-2",
 						component: "Card",
-						children: ["msg-2-hdr", "msg-2-body"]
+						children: ["message-2-header", "message-2-body"]
 					},
 					{
-						id: "msg-2-hdr",
+						id: "message-2-header",
 						component: "Header",
-						children: ["msg-2-sender"]
+						children: ["message-2-sender"]
 					},
 					{
-						id: "msg-2-sender",
+						id: "message-2-sender",
 						component: "Text",
 						text: "You · 09:20",
 						variant: "caption"
 					},
 					{
-						id: "msg-2-body",
+						id: "message-2-body",
 						component: "Body",
-						child: "msg-2-text"
+						child: "message-2-text"
 					},
 					{
-						id: "msg-2-text",
+						id: "message-2-text",
 						component: "Text",
 						text: "Hi! We'd like to arrange a sunset sailing tour for tomorrow. Is that possible?"
 					},
 					{
-						id: "msg-3",
+						id: "message-3",
 						component: "Card",
-						children: ["msg-3-hdr", "msg-3-body"]
+						children: ["message-3-header", "message-3-body"]
 					},
 					{
-						id: "msg-3-hdr",
+						id: "message-3-header",
 						component: "Header",
-						children: ["msg-3-sender"]
+						children: ["message-3-sender"]
 					},
 					{
-						id: "msg-3-sender",
+						id: "message-3-sender",
 						component: "Text",
 						text: "Concierge · 09:22",
 						variant: "caption"
 					},
 					{
-						id: "msg-3-body",
+						id: "message-3-body",
 						component: "Body",
-						child: "msg-3-text"
+						child: "message-3-text"
 					},
 					{
-						id: "msg-3-text",
+						id: "message-3-text",
 						component: "Text",
 						text: "Absolutely! We have two options available for tomorrow evening:"
 					},
 					{
-						id: "msg-4",
+						id: "message-4",
 						component: "Column",
 						children: ["option-1", "option-2"]
 					},
@@ -7490,40 +7490,40 @@ const ke = [
 						id: "option-1",
 						component: "Card",
 						children: [
-							"opt-1-hdr",
-							"opt-1-body",
-							"opt-1-ftr"
+							"option-1-header",
+							"option-1-body",
+							"option-1-footer"
 						]
 					},
 					{
-						id: "opt-1-hdr",
+						id: "option-1-header",
 						component: "Header",
-						children: ["opt-1-name"]
+						children: ["option-1-name"]
 					},
 					{
-						id: "opt-1-name",
+						id: "option-1-name",
 						component: "Text",
 						text: "Sunset Catamaran Cruise",
 						variant: "h4"
 					},
 					{
-						id: "opt-1-body",
+						id: "option-1-body",
 						component: "Body",
-						child: "opt-1-detail"
+						child: "option-1-detail"
 					},
 					{
-						id: "opt-1-detail",
+						id: "option-1-detail",
 						component: "Text",
 						text: "17:30–19:30 · Includes drinks & canapés · €85/person",
 						variant: "caption"
 					},
 					{
-						id: "opt-1-ftr",
+						id: "option-1-footer",
 						component: "Footer",
-						children: ["opt-1-btn"]
+						children: ["button-book-catamaran"]
 					},
 					{
-						id: "opt-1-btn",
+						id: "button-book-catamaran",
 						component: "Button",
 						text: "Book Catamaran",
 						variant: "primary",
@@ -7533,40 +7533,40 @@ const ke = [
 						id: "option-2",
 						component: "Card",
 						children: [
-							"opt-2-hdr",
-							"opt-2-body",
-							"opt-2-ftr"
+							"option-2-header",
+							"option-2-body",
+							"option-2-footer"
 						]
 					},
 					{
-						id: "opt-2-hdr",
+						id: "option-2-header",
 						component: "Header",
-						children: ["opt-2-name"]
+						children: ["option-2-name"]
 					},
 					{
-						id: "opt-2-name",
+						id: "option-2-name",
 						component: "Text",
 						text: "Private Yacht Charter",
 						variant: "h4"
 					},
 					{
-						id: "opt-2-body",
+						id: "option-2-body",
 						component: "Body",
-						child: "opt-2-detail"
+						child: "option-2-detail"
 					},
 					{
-						id: "opt-2-detail",
+						id: "option-2-detail",
 						component: "Text",
 						text: "17:00–20:00 · Private crew, dinner, champagne · €450 (up to 6 guests)",
 						variant: "caption"
 					},
 					{
-						id: "opt-2-ftr",
+						id: "option-2-footer",
 						component: "Footer",
-						children: ["opt-2-btn"]
+						children: ["button-book-yacht"]
 					},
 					{
-						id: "opt-2-btn",
+						id: "button-book-yacht",
 						component: "Button",
 						text: "Book Yacht",
 						variant: "primary",
@@ -7580,32 +7580,32 @@ const ke = [
 						id: "quick-actions",
 						component: "Row",
 						children: [
-							"qa-transport",
-							"qa-dining",
-							"qa-tours",
-							"qa-tickets"
+							"quick-action-transport",
+							"quick-action-dining",
+							"quick-action-tours",
+							"quick-action-tickets"
 						]
 					},
 					{
-						id: "qa-transport",
+						id: "quick-action-transport",
 						component: "Button",
 						text: "Transport",
 						action: { event: { name: "concierge_transport" } }
 					},
 					{
-						id: "qa-dining",
+						id: "quick-action-dining",
 						component: "Button",
 						text: "Dining",
 						action: { event: { name: "concierge_dining" } }
 					},
 					{
-						id: "qa-tours",
+						id: "quick-action-tours",
 						component: "Button",
 						text: "Tours",
 						action: { event: { name: "concierge_tours" } }
 					},
 					{
-						id: "qa-tickets",
+						id: "quick-action-tickets",
 						component: "Button",
 						text: "Tickets",
 						action: { event: { name: "concierge_tickets" } }
@@ -7613,15 +7613,15 @@ const ke = [
 					{
 						id: "input-row",
 						component: "Row",
-						children: ["msg-input", "send-msg-btn"]
+						children: ["message-input", "button-send-message"]
 					},
 					{
-						id: "msg-input",
+						id: "message-input",
 						component: "TextField",
 						placeholder: "Type a message..."
 					},
 					{
-						id: "send-msg-btn",
+						id: "button-send-message",
 						component: "Button",
 						text: "Send",
 						variant: "primary",
@@ -7654,7 +7654,7 @@ const ke = [
 							"payment-card",
 							"feedback-card",
 							"divider-3",
-							"checkout-btn"
+							"button-checkout"
 						]
 					},
 					{
@@ -7666,10 +7666,10 @@ const ke = [
 					{
 						id: "room-row",
 						component: "Row",
-						children: ["room-num", "stay-dates"]
+						children: ["room-number", "stay-dates"]
 					},
 					{
-						id: "room-num",
+						id: "room-number",
 						component: "Badge",
 						text: "Room 412 — Junior Suite"
 					},
@@ -7685,10 +7685,10 @@ const ke = [
 					{
 						id: "charges-card",
 						component: "Card",
-						children: ["charges-hdr", "charges-body"]
+						children: ["charges-header", "charges-body"]
 					},
 					{
-						id: "charges-hdr",
+						id: "charges-header",
 						component: "Header",
 						children: ["charges-title"]
 					},
@@ -7701,10 +7701,10 @@ const ke = [
 					{
 						id: "charges-body",
 						component: "Body",
-						child: "charges-col"
+						child: "charges-column"
 					},
 					{
-						id: "charges-col",
+						id: "charges-column",
 						component: "Column",
 						children: [
 							"charge-room",
@@ -7721,75 +7721,75 @@ const ke = [
 					{
 						id: "charge-room",
 						component: "Row",
-						children: ["charge-room-l", "charge-room-v"]
+						children: ["charge-room-label", "charge-room-value"]
 					},
 					{
-						id: "charge-room-l",
+						id: "charge-room-label",
 						component: "Text",
 						text: "Room (4 nights × €295)"
 					},
 					{
-						id: "charge-room-v",
+						id: "charge-room-value",
 						component: "Text",
 						text: "€1,180"
 					},
 					{
 						id: "charge-spa",
 						component: "Row",
-						children: ["charge-spa-l", "charge-spa-v"]
+						children: ["charge-spa-label", "charge-spa-value"]
 					},
 					{
-						id: "charge-spa-l",
+						id: "charge-spa-label",
 						component: "Text",
 						text: "Spa — Deep Tissue Massage"
 					},
 					{
-						id: "charge-spa-v",
+						id: "charge-spa-value",
 						component: "Text",
 						text: "€120"
 					},
 					{
 						id: "charge-dining",
 						component: "Row",
-						children: ["charge-dining-l", "charge-dining-v"]
+						children: ["charge-dining-label", "charge-dining-value"]
 					},
 					{
-						id: "charge-dining-l",
+						id: "charge-dining-label",
 						component: "Text",
 						text: "Restaurant — 3 meals"
 					},
 					{
-						id: "charge-dining-v",
+						id: "charge-dining-value",
 						component: "Text",
 						text: "€187"
 					},
 					{
 						id: "charge-minibar",
 						component: "Row",
-						children: ["charge-minibar-l", "charge-minibar-v"]
+						children: ["charge-minibar-label", "charge-minibar-value"]
 					},
 					{
-						id: "charge-minibar-l",
+						id: "charge-minibar-label",
 						component: "Text",
 						text: "Minibar"
 					},
 					{
-						id: "charge-minibar-v",
+						id: "charge-minibar-value",
 						component: "Text",
 						text: "€42"
 					},
 					{
 						id: "charge-parking",
 						component: "Row",
-						children: ["charge-parking-l", "charge-parking-v"]
+						children: ["charge-parking-label", "charge-parking-value"]
 					},
 					{
-						id: "charge-parking-l",
+						id: "charge-parking-label",
 						component: "Text",
 						text: "Valet parking (4 days)"
 					},
 					{
-						id: "charge-parking-v",
+						id: "charge-parking-value",
 						component: "Text",
 						text: "€140"
 					},
@@ -7800,15 +7800,15 @@ const ke = [
 					{
 						id: "charge-tax",
 						component: "Row",
-						children: ["charge-tax-l", "charge-tax-v"]
+						children: ["charge-tax-label", "charge-tax-value"]
 					},
 					{
-						id: "charge-tax-l",
+						id: "charge-tax-label",
 						component: "Text",
 						text: "Taxes & resort fee"
 					},
 					{
-						id: "charge-tax-v",
+						id: "charge-tax-value",
 						component: "Text",
 						text: "€201"
 					},
@@ -7819,16 +7819,16 @@ const ke = [
 					{
 						id: "charge-total",
 						component: "Row",
-						children: ["charge-total-l", "charge-total-v"]
+						children: ["charge-total-label", "charge-total-value"]
 					},
 					{
-						id: "charge-total-l",
+						id: "charge-total-label",
 						component: "Text",
 						text: "Total",
 						variant: "h3"
 					},
 					{
-						id: "charge-total-v",
+						id: "charge-total-value",
 						component: "Text",
 						text: "€1,870",
 						variant: "h3"
@@ -7840,10 +7840,10 @@ const ke = [
 					{
 						id: "payment-card",
 						component: "Card",
-						children: ["payment-hdr", "payment-body"]
+						children: ["payment-header", "payment-body"]
 					},
 					{
-						id: "payment-hdr",
+						id: "payment-header",
 						component: "Header",
 						children: ["payment-title"]
 					},
@@ -7856,25 +7856,25 @@ const ke = [
 					{
 						id: "payment-body",
 						component: "Body",
-						child: "payment-col"
+						child: "payment-column"
 					},
 					{
-						id: "payment-col",
+						id: "payment-column",
 						component: "Column",
 						children: ["payment-method", "payment-email"]
 					},
 					{
 						id: "payment-method",
 						component: "Row",
-						children: ["payment-card-l", "payment-card-v"]
+						children: ["payment-card-label", "payment-card-value"]
 					},
 					{
-						id: "payment-card-l",
+						id: "payment-card-label",
 						component: "Text",
 						text: "Card on file:"
 					},
 					{
-						id: "payment-card-v",
+						id: "payment-card-value",
 						component: "Text",
 						text: "Visa •••• 4821"
 					},
@@ -7887,10 +7887,10 @@ const ke = [
 					{
 						id: "feedback-card",
 						component: "Card",
-						children: ["feedback-hdr", "feedback-body"]
+						children: ["feedback-header", "feedback-body"]
 					},
 					{
-						id: "feedback-hdr",
+						id: "feedback-header",
 						component: "Header",
 						children: ["feedback-title"]
 					},
@@ -7903,10 +7903,10 @@ const ke = [
 					{
 						id: "feedback-body",
 						component: "Body",
-						child: "feedback-q"
+						child: "feedback-question"
 					},
 					{
-						id: "feedback-q",
+						id: "feedback-question",
 						component: "TextArea",
 						placeholder: "We'd love to hear your feedback..."
 					},
@@ -7915,7 +7915,7 @@ const ke = [
 						component: "Divider"
 					},
 					{
-						id: "checkout-btn",
+						id: "button-checkout",
 						component: "Button",
 						text: "Complete Checkout",
 						variant: "primary",
@@ -7947,7 +7947,7 @@ const ke = [
 							"culture-card",
 							"food-card",
 							"divider-2",
-							"custom-btn"
+							"button-custom-itinerary"
 						]
 					},
 					{
@@ -7969,10 +7969,10 @@ const ke = [
 					{
 						id: "beach-card",
 						component: "Card",
-						children: ["beach-hdr", "beach-body"]
+						children: ["beach-header", "beach-body"]
 					},
 					{
-						id: "beach-hdr",
+						id: "beach-header",
 						component: "Header",
 						children: ["beach-title"]
 					},
@@ -7999,26 +7999,26 @@ const ke = [
 					{
 						id: "beach-1",
 						component: "Row",
-						children: ["b1-col", "b1-btn"]
+						children: ["beach-1-column", "beach-1-button"]
 					},
 					{
-						id: "b1-col",
+						id: "beach-1-column",
 						component: "Column",
-						children: ["b1-name", "b1-desc"]
+						children: ["beach-1-name", "beach-1-description"]
 					},
 					{
-						id: "b1-name",
+						id: "beach-1-name",
 						component: "Text",
 						text: "Red Beach"
 					},
 					{
-						id: "b1-desc",
+						id: "beach-1-description",
 						component: "Text",
 						text: "15 min drive · Dramatic volcanic cliffs · Best before noon",
 						variant: "caption"
 					},
 					{
-						id: "b1-btn",
+						id: "beach-1-button",
 						component: "Button",
 						text: "Directions",
 						action: { event: { name: "directions_red_beach" } }
@@ -8026,26 +8026,26 @@ const ke = [
 					{
 						id: "beach-2",
 						component: "Row",
-						children: ["b2-col", "b2-btn"]
+						children: ["beach-2-column", "beach-2-button"]
 					},
 					{
-						id: "b2-col",
+						id: "beach-2-column",
 						component: "Column",
-						children: ["b2-name", "b2-desc"]
+						children: ["beach-2-name", "beach-2-description"]
 					},
 					{
-						id: "b2-name",
+						id: "beach-2-name",
 						component: "Text",
 						text: "Perissa Black Sand Beach"
 					},
 					{
-						id: "b2-desc",
+						id: "beach-2-description",
 						component: "Text",
 						text: "20 min drive · Beach bars, water sports · All-day destination",
 						variant: "caption"
 					},
 					{
-						id: "b2-btn",
+						id: "beach-2-button",
 						component: "Button",
 						text: "Directions",
 						action: { event: { name: "directions_perissa" } }
@@ -8053,26 +8053,26 @@ const ke = [
 					{
 						id: "beach-3",
 						component: "Row",
-						children: ["b3-col", "b3-btn"]
+						children: ["beach-3-column", "beach-3-button"]
 					},
 					{
-						id: "b3-col",
+						id: "beach-3-column",
 						component: "Column",
-						children: ["b3-name", "b3-desc"]
+						children: ["beach-3-name", "beach-3-description"]
 					},
 					{
-						id: "b3-name",
+						id: "beach-3-name",
 						component: "Text",
 						text: "Fira to Oia Hiking Trail"
 					},
 					{
-						id: "b3-desc",
+						id: "beach-3-description",
 						component: "Text",
 						text: "10 km, ~3 hours · Caldera views · Start early to avoid heat",
 						variant: "caption"
 					},
 					{
-						id: "b3-btn",
+						id: "beach-3-button",
 						component: "Button",
 						text: "Details",
 						action: { event: { name: "trail_details" } }
@@ -8080,10 +8080,10 @@ const ke = [
 					{
 						id: "culture-card",
 						component: "Card",
-						children: ["culture-hdr", "culture-body"]
+						children: ["culture-header", "culture-body"]
 					},
 					{
-						id: "culture-hdr",
+						id: "culture-header",
 						component: "Header",
 						children: ["culture-title"]
 					},
@@ -8101,58 +8101,58 @@ const ke = [
 					{
 						id: "culture-list",
 						component: "Column",
-						children: ["cult-1", "cult-2"]
+						children: ["culture-1", "culture-2"]
 					},
 					{
-						id: "cult-1",
+						id: "culture-1",
 						component: "Row",
-						children: ["c1-col", "c1-btn"]
+						children: ["culture-1-column", "culture-1-button"]
 					},
 					{
-						id: "c1-col",
+						id: "culture-1-column",
 						component: "Column",
-						children: ["c1-name", "c1-desc"]
+						children: ["culture-1-name", "culture-1-description"]
 					},
 					{
-						id: "c1-name",
+						id: "culture-1-name",
 						component: "Text",
 						text: "Akrotiri Archaeological Site"
 					},
 					{
-						id: "c1-desc",
+						id: "culture-1-description",
 						component: "Text",
 						text: "Minoan Bronze Age settlement · \"Pompeii of the Aegean\" · €12 entry",
 						variant: "caption"
 					},
 					{
-						id: "c1-btn",
+						id: "culture-1-button",
 						component: "Button",
 						text: "Book Tickets",
 						action: { event: { name: "book_akrotiri" } }
 					},
 					{
-						id: "cult-2",
+						id: "culture-2",
 						component: "Row",
-						children: ["c2-col", "c2-btn"]
+						children: ["culture-2-column", "culture-2-button"]
 					},
 					{
-						id: "c2-col",
+						id: "culture-2-column",
 						component: "Column",
-						children: ["c2-name", "c2-desc"]
+						children: ["culture-2-name", "culture-2-description"]
 					},
 					{
-						id: "c2-name",
+						id: "culture-2-name",
 						component: "Text",
 						text: "Wine Tasting Tour"
 					},
 					{
-						id: "c2-desc",
+						id: "culture-2-description",
 						component: "Text",
 						text: "3 vineyards · Assyrtiko & Vinsanto · Hotel pickup included · €75/person",
 						variant: "caption"
 					},
 					{
-						id: "c2-btn",
+						id: "culture-2-button",
 						component: "Button",
 						text: "Book Tour",
 						action: { event: { name: "book_wine_tour" } }
@@ -8160,10 +8160,10 @@ const ke = [
 					{
 						id: "food-card",
 						component: "Card",
-						children: ["food-hdr", "food-body"]
+						children: ["food-header", "food-body"]
 					},
 					{
-						id: "food-hdr",
+						id: "food-header",
 						component: "Header",
 						children: ["food-title"]
 					},
@@ -8186,26 +8186,26 @@ const ke = [
 					{
 						id: "food-1",
 						component: "Row",
-						children: ["f1-col", "f1-btn"]
+						children: ["food-1-column", "food-1-button"]
 					},
 					{
-						id: "f1-col",
+						id: "food-1-column",
 						component: "Column",
-						children: ["f1-name", "f1-desc"]
+						children: ["food-1-name", "food-1-description"]
 					},
 					{
-						id: "f1-name",
+						id: "food-1-name",
 						component: "Text",
 						text: "Ammoudi Fish Taverna"
 					},
 					{
-						id: "f1-desc",
+						id: "food-1-description",
 						component: "Text",
 						text: "Below Oia castle · Fresh catch · Book 2+ days ahead · €€€",
 						variant: "caption"
 					},
 					{
-						id: "f1-btn",
+						id: "food-1-button",
 						component: "Button",
 						text: "Reserve",
 						action: { event: { name: "reserve_ammoudi" } }
@@ -8213,26 +8213,26 @@ const ke = [
 					{
 						id: "food-2",
 						component: "Row",
-						children: ["f2-col", "f2-btn"]
+						children: ["food-2-column", "food-2-button"]
 					},
 					{
-						id: "f2-col",
+						id: "food-2-column",
 						component: "Column",
-						children: ["f2-name", "f2-desc"]
+						children: ["food-2-name", "food-2-description"]
 					},
 					{
-						id: "f2-name",
+						id: "food-2-name",
 						component: "Text",
 						text: "Metaxy Mas"
 					},
 					{
-						id: "f2-desc",
+						id: "food-2-description",
 						component: "Text",
 						text: "Exo Gonia village · Local Cretan cuisine · Reservation essential · €€",
 						variant: "caption"
 					},
 					{
-						id: "f2-btn",
+						id: "food-2-button",
 						component: "Button",
 						text: "Reserve",
 						action: { event: { name: "reserve_metaxy" } }
@@ -8242,7 +8242,7 @@ const ke = [
 						component: "Divider"
 					},
 					{
-						id: "custom-btn",
+						id: "button-custom-itinerary",
 						component: "Button",
 						text: "Ask Concierge for Custom Itinerary",
 						variant: "primary",