@almadar/std 3.2.0 → 3.2.2

package/dist/behaviors/functions/index.js

@@ -46,10 +46,10 @@ function buildTrait(c) {
           align: "center",
           children: [
             { type: "icon", name: headerIcon, size: "sm" },
-            { type: "typography", variant: "h4", content: `@entity.${listFields[0] ?? "id"}` }
+            { type: "typography", variant: "h4", content: `@item.${listFields[0] ?? "id"}` }
           ]
         },
-        ...listFields.length > 1 ? [{ type: "badge", label: `@entity.${listFields[1]}` }] : []
+        ...listFields.length > 1 ? [{ type: "badge", label: `@item.${listFields[1]}` }] : []
       ]
     }
   ];
@@ -58,7 +58,7 @@ function buildTrait(c) {
       type: "typography",
       variant: "caption",
       color: "muted",
-      content: `@entity.${listFields[2]}`
+      content: `@item.${listFields[2]}`
     });
   }
   const headerChildren = [
@@ -134,7 +134,7 @@ function buildTrait(c) {
                   ...c.itemActions.length > 0 ? { itemActions: c.itemActions } : {},
                   // hover lift: cards rise on hover for interactive feel
                   className: "transition-shadow hover:shadow-md cursor-pointer",
-                  children: [{ type: "stack", direction: "vertical", gap: "sm", children: listItemChildren }]
+                  renderItem: ["fn", "item", { type: "stack", direction: "vertical", gap: "sm", children: listItemChildren }]
                 }
               ]
             }]
@@ -173,37 +173,33 @@ function resolve2(params) {
   const nonIdFields = fields.filter((f) => f.name !== "id");
   const p = plural(entityName);
   const defaultContent = {
-    type: "stack",
-    direction: "vertical",
-    gap: "md",
+    type: "modal",
+    title: params.modalTitle ?? "Details",
+    isOpen: true,
     children: [
       {
         type: "stack",
-        direction: "horizontal",
-        gap: "sm",
-        align: "center",
-        children: [
-          { type: "icon", name: params.headerIcon ?? "maximize-2", size: "md" },
-          { type: "typography", content: params.modalTitle ?? "Details", variant: "h3" }
-        ]
-      },
-      { type: "divider" },
-      ...nonIdFields.map((f) => ({
-        type: "stack",
-        direction: "horizontal",
+        direction: "vertical",
         gap: "md",
         children: [
-          { type: "typography", variant: "caption", content: f.name.charAt(0).toUpperCase() + f.name.slice(1) },
-          { type: "typography", variant: "body", content: `@entity.${f.name}` }
+          ...nonIdFields.map((f) => ({
+            type: "stack",
+            direction: "horizontal",
+            gap: "md",
+            children: [
+              { type: "typography", variant: "caption", content: f.name.charAt(0).toUpperCase() + f.name.slice(1) },
+              { type: "typography", variant: "body", content: ["object/get", ["array/first", "@entity"], f.name] }
+            ]
+          })),
+          { type: "divider" },
+          {
+            type: "stack",
+            direction: "horizontal",
+            gap: "sm",
+            justify: "end",
+            children: [{ type: "button", label: "Close", event: params.closeEvent ?? "CLOSE", variant: "ghost" }]
+          }
         ]
-      })),
-      { type: "divider" },
-      {
-        type: "stack",
-        direction: "horizontal",
-        gap: "sm",
-        justify: "end",
-        children: [{ type: "button", label: "Close", event: params.closeEvent ?? "CLOSE", variant: "ghost" }]
       }
     ]
   };
@@ -214,7 +210,7 @@ function resolve2(params) {
     persistence: params.persistence ?? "runtime",
     traitName: params.traitName ?? `${entityName}Modal`,
     modalTitle: params.modalTitle ?? "Details",
-    headerIcon: params.headerIcon ?? "maximize-2",
+    headerIcon: params.headerIcon ?? "layout-panel-top",
     openContent: params.openContent ?? defaultContent,
     openEvent: params.openEvent ?? "OPEN",
     openPayload: params.openPayload ?? [],
@@ -258,7 +254,9 @@ function buildTrait2(c) {
               { type: "typography", content: c.modalTitle, variant: "h2" }
             ] },
             { type: "button", label: "Open", event: c.openEvent, variant: "primary", icon: c.headerIcon }
-          ] }
+          ] },
+          { type: "divider" },
+          { type: "empty-state", icon: c.headerIcon, title: "Nothing open", description: "Click Open to view details in a modal overlay." }
         ]
       }]] : [["fetch", c.entityName]]
     },
@@ -269,8 +267,26 @@ function buildTrait2(c) {
       event: c.openEvent,
       effects: [...c.openEffects, ["render-ui", "modal", c.openContent]]
     },
-    // CLOSE: open → closed
-    { from: "open", to: "closed", event: c.closeEvent, effects: [["render-ui", "modal", null]] }
+    // CLOSE: open → closed (re-render main to avoid stale content)
+    { from: "open", to: "closed", event: c.closeEvent, effects: [
+      ["render-ui", "modal", null],
+      ...c.standalone ? [["fetch", c.entityName], ["render-ui", "main", {
+        type: "stack",
+        direction: "vertical",
+        gap: "lg",
+        children: [
+          { type: "stack", direction: "horizontal", gap: "md", justify: "space-between", children: [
+            { type: "stack", direction: "horizontal", gap: "md", children: [
+              { type: "icon", name: c.headerIcon, size: "lg" },
+              { type: "typography", content: c.modalTitle, variant: "h2" }
+            ] },
+            { type: "button", label: "Open", event: c.openEvent, variant: "primary", icon: c.headerIcon }
+          ] },
+          { type: "divider" },
+          { type: "empty-state", icon: c.headerIcon, title: "Nothing open", description: "Click Open to view details in a modal overlay." }
+        ]
+      }]] : []
+    ] }
   ];
   if (c.saveEvent) {
     transitions.push({
@@ -329,7 +345,7 @@ function resolve3(params) {
     confirmMessage: params.confirmMessage ?? "Are you sure?",
     confirmLabel: params.confirmLabel ?? "Confirm",
     cancelLabel: params.cancelLabel ?? "Cancel",
-    headerIcon: params.headerIcon ?? "alert-triangle",
+    headerIcon: params.headerIcon ?? "shield-check",
     requestEvent: params.requestEvent ?? "REQUEST",
     confirmEvent: params.confirmEvent ?? "CONFIRM",
     confirmEffects: params.confirmEffects ?? [],
@@ -349,6 +365,66 @@ function buildEntity3(c) {
 }
 function buildTrait3(c) {
   const { entityName, displayField, pluralName, confirmTitle, confirmMessage, confirmLabel, cancelLabel, headerIcon } = c;
+  const idleMainView = {
+    type: "stack",
+    direction: "vertical",
+    gap: "lg",
+    children: [
+      { type: "stack", direction: "horizontal", gap: "md", align: "center", children: [
+        { type: "icon", name: headerIcon, size: "lg" },
+        { type: "typography", content: pluralName, variant: "h2" }
+      ] },
+      { type: "divider" },
+      {
+        type: "data-grid",
+        entity: entityName,
+        emptyIcon: "inbox",
+        emptyTitle: `No ${pluralName.toLowerCase()} yet`,
+        emptyDescription: "Items will appear here.",
+        itemActions: [{ label: confirmTitle, event: c.requestEvent, variant: "danger" }],
+        renderItem: ["fn", "item", { type: "stack", direction: "vertical", gap: "sm", children: [
+          { type: "typography", variant: "h4", content: `@item.${displayField}` }
+        ] }]
+      }
+    ]
+  };
+  const confirmModalView = {
+    type: "stack",
+    direction: "vertical",
+    gap: "md",
+    children: [
+      {
+        type: "stack",
+        direction: "horizontal",
+        gap: "sm",
+        align: "center",
+        children: [
+          { type: "icon", name: "alert-triangle", size: "md" },
+          { type: "typography", content: confirmTitle, variant: "h3" }
+        ]
+      },
+      { type: "divider" },
+      {
+        type: "alert",
+        variant: "danger",
+        message: confirmMessage
+      },
+      {
+        type: "stack",
+        direction: "horizontal",
+        gap: "sm",
+        justify: "end",
+        children: [
+          { type: "button", label: cancelLabel, event: "CANCEL", variant: "ghost" },
+          { type: "button", label: confirmLabel, event: c.confirmEvent, variant: "danger", icon: "check" }
+        ]
+      }
+    ]
+  };
+  const dismissAndRefresh = [
+    ["render-ui", "modal", null],
+    ...c.standalone ? [["fetch", entityName], ["render-ui", "main", idleMainView]] : [["fetch", entityName]]
+  ];
   return {
     name: c.traitName,
     linkedEntity: entityName,
@@ -367,36 +443,12 @@ function buildTrait3(c) {
         { key: "CLOSE", name: "Close" }
       ],
       transitions: [
-        // INIT: idle -> idle
         {
           from: "idle",
           to: "idle",
           event: "INIT",
-          effects: c.standalone ? [["fetch", entityName], ["render-ui", "main", {
-            type: "stack",
-            direction: "vertical",
-            gap: "lg",
-            children: [
-              { type: "stack", direction: "horizontal", gap: "md", align: "center", children: [
-                { type: "icon", name: headerIcon, size: "lg" },
-                { type: "typography", content: pluralName, variant: "h2" }
-              ] },
-              { type: "divider" },
-              {
-                type: "data-grid",
-                entity: entityName,
-                emptyIcon: "inbox",
-                emptyTitle: `No ${pluralName.toLowerCase()} yet`,
-                emptyDescription: "Items will appear here.",
-                itemActions: [{ label: confirmTitle, event: c.requestEvent, variant: "danger" }],
-                children: [{ type: "stack", direction: "vertical", gap: "sm", children: [
-                  { type: "typography", variant: "h4", content: `@entity.${displayField}` }
-                ] }]
-              }
-            ]
-          }]] : [["fetch", entityName]]
+          effects: c.standalone ? [["fetch", entityName], ["render-ui", "main", idleMainView]] : [["fetch", entityName]]
         },
-        // REQUEST: idle -> confirming (fetch entity by ID so server has context)
         {
           from: "idle",
           to: "confirming",
@@ -404,65 +456,30 @@ function buildTrait3(c) {
           effects: [
             ["set", "@entity.pendingId", "@payload.id"],
             ["fetch", entityName, "@payload.id"],
-            ["render-ui", "modal", {
-              type: "stack",
-              direction: "vertical",
-              gap: "md",
-              children: [
-                {
-                  type: "stack",
-                  direction: "horizontal",
-                  gap: "sm",
-                  align: "center",
-                  children: [
-                    { type: "icon", name: headerIcon, size: "md" },
-                    { type: "typography", content: confirmTitle, variant: "h3" }
-                  ]
-                },
-                { type: "divider" },
-                { type: "typography", content: confirmMessage, variant: "body" },
-                {
-                  type: "stack",
-                  direction: "horizontal",
-                  gap: "sm",
-                  justify: "end",
-                  children: [
-                    { type: "button", label: cancelLabel, event: "CANCEL", variant: "ghost" },
-                    { type: "button", label: confirmLabel, event: c.confirmEvent, variant: "danger", icon: "check" }
-                  ]
-                }
-              ]
-            }]
+            ["render-ui", "modal", confirmModalView]
           ]
         },
-        // CONFIRM: confirming -> idle (run injected effects, dismiss modal)
         {
           from: "confirming",
           to: "idle",
           event: c.confirmEvent,
           effects: [
             ...c.confirmEffects,
-            ["render-ui", "modal", null],
+            ...dismissAndRefresh,
             ...c.emitOnConfirm ? [["emit", c.emitOnConfirm]] : []
           ]
         },
-        // CANCEL: confirming -> idle (dismiss modal)
         {
           from: "confirming",
           to: "idle",
           event: "CANCEL",
-          effects: [
-            ["render-ui", "modal", null]
-          ]
+          effects: dismissAndRefresh
         },
-        // CLOSE: confirming -> idle (dismiss modal)
         {
           from: "confirming",
           to: "idle",
           event: "CLOSE",
-          effects: [
-            ["render-ui", "modal", null]
-          ]
+          effects: dismissAndRefresh
         }
       ]
     }
@@ -492,8 +509,8 @@ function stdConfirmation(params) {
 function resolve4(params) {
   const { entityName } = params;
   const baseFields = ensureIdField(params.fields);
-  const fields = baseFields.some((f) => f.name === "query") ? baseFields : [...baseFields, { name: "query", type: "string", default: "" }];
-  const nonIdFields = baseFields.filter((f) => f.name !== "id" && f.name !== "query");
+  const fields = baseFields;
+  const nonIdFields = baseFields.filter((f) => f.name !== "id");
   const p = plural(entityName);
   return {
     entityName,
@@ -530,7 +547,8 @@ function buildTrait4(c) {
         ]
       },
       { type: "divider" },
-      { type: "search-input", placeholder, event: "SEARCH" }
+      { type: "search-input", placeholder, event: "SEARCH" },
+      { type: "empty-state", icon: searchIcon, title: "Search to find results", description: `Type a query to search across ${pluralName.toLowerCase()}.` }
     ]
   };
   const resultsView = {
@@ -552,7 +570,7 @@ function buildTrait4(c) {
             align: "center",
             children: [
               { type: "icon", name: searchIcon, size: "lg" },
-              { type: "typography", content: ["concat", 'Results for "', "@entity.query", '"'], variant: "h2" }
+              { type: "typography", content: ["concat", 'Results for "', "@payload.query", '"'], variant: "h2" }
             ]
           },
           { type: "button", label: "Clear", event: "CLEAR", variant: "ghost", icon: "x" }
@@ -565,12 +583,12 @@ function buildTrait4(c) {
         emptyIcon: searchIcon,
         emptyTitle: "No results found",
         emptyDescription: "Try a different search term.",
-        children: [{
+        renderItem: ["fn", "item", {
           type: "stack",
           direction: "vertical",
           gap: "sm",
           children: [
-            { type: "typography", variant: "h4", content: `@entity.${displayField}` }
+            { type: "typography", variant: "h4", content: `@item.${displayField}` }
           ]
         }]
       }
@@ -605,7 +623,6 @@ function buildTrait4(c) {
           to: "searching",
           event: "SEARCH",
           effects: [
-            ["set", "@entity.query", "@payload.query"],
             ["fetch", entityName],
             ["render-ui", "main", resultsView]
           ]
@@ -615,7 +632,6 @@ function buildTrait4(c) {
           to: "searching",
           event: "SEARCH",
           effects: [
-            ["set", "@entity.query", "@payload.query"],
             ["fetch", entityName],
             ["render-ui", "main", resultsView]
           ]
@@ -625,7 +641,6 @@ function buildTrait4(c) {
           to: "idle",
           event: "CLEAR",
           effects: [
-            ["set", "@entity.query", ""],
             ["fetch", entityName],
             ["render-ui", "main", searchInputView]
           ]
@@ -683,61 +698,28 @@ function buildEntity5(c) {
 }
 function buildTrait5(c) {
   const { entityName, displayField, pluralName, headerIcon, pageTitle, filterableFields } = c;
-  const filterButtons = filterableFields.map((f) => ({
-    type: "stack",
-    direction: "vertical",
-    gap: "xs",
-    children: [
-      // overline group label for visual hierarchy
-      {
-        type: "typography",
-        variant: "overline",
-        color: "muted",
-        content: f.name.charAt(0).toUpperCase() + f.name.slice(1)
-      },
-      {
-        type: "stack",
-        direction: "horizontal",
-        gap: "sm",
-        align: "center",
-        children: (f.values ?? []).map((v) => ({
-          type: "button",
-          label: v,
-          event: "FILTER",
-          variant: "secondary"
-        }))
-      }
-    ]
-  }));
-  const activeFilterButtons = filterableFields.map((f) => ({
+  const filterControls = filterableFields.length > 0 ? [{
+    type: "filter-group",
+    entity: entityName,
+    filters: filterableFields.map((f) => ({
+      field: f.name,
+      label: f.name.charAt(0).toUpperCase() + f.name.slice(1),
+      options: f.values ?? [],
+      filterType: f.type === "boolean" ? "toggle" : "select"
+    }))
+  }] : [{ type: "empty-state", icon: "filter-x", title: "No filter fields", description: "Add fields with predefined values to enable filtering." }];
+  const booleanFilters = filterableFields.filter((f) => f.type === "boolean");
+  const switchControls = booleanFilters.map((f) => ({
     type: "stack",
-    direction: "vertical",
-    gap: "xs",
+    direction: "horizontal",
+    gap: "sm",
+    align: "center",
+    justify: "space-between",
     children: [
-      {
-        type: "typography",
-        variant: "overline",
-        color: "muted",
-        content: f.name.charAt(0).toUpperCase() + f.name.slice(1)
-      },
-      {
-        type: "stack",
-        direction: "horizontal",
-        gap: "sm",
-        align: "center",
-        children: (f.values ?? []).map((v) => ({
-          // active filter chip uses 'primary' variant so runtime highlights it
-          type: "button",
-          label: v,
-          event: "FILTER",
-          variant: "primary"
-        }))
-      }
+      { type: "typography", variant: "body", content: f.name.charAt(0).toUpperCase() + f.name.slice(1) },
+      { type: "switch", checked: false }
     ]
   }));
-  if (filterButtons.length === 0) {
-    filterButtons.push({ type: "badge", label: "No filter fields defined" });
-  }
   const header = {
     type: "stack",
     direction: "horizontal",
@@ -759,17 +741,37 @@ function buildTrait5(c) {
     emptyTitle: `No ${pluralName.toLowerCase()} yet`,
     emptyDescription: `Add ${pluralName.toLowerCase()} to see them here.`,
     className: "transition-shadow hover:shadow-md cursor-pointer",
-    children: [{ type: "stack", direction: "vertical", gap: "sm", children: [
-      { type: "typography", variant: "h4", content: `@entity.${displayField}` },
+    renderItem: ["fn", "item", { type: "stack", direction: "vertical", gap: "sm", children: [
+      { type: "typography", variant: "h4", content: `@item.${displayField}` },
       // show the filterable field value to confirm what was filtered
-      ...filterableFields[0] ? [{ type: "typography", variant: "caption", color: "muted", content: `@entity.${filterableFields[0].name}` }] : []
+      ...filterableFields[0] ? [{ type: "typography", variant: "caption", color: "muted", content: `@item.${filterableFields[0].name}` }] : []
     ] }]
   };
   const browsingView = {
     type: "stack",
     direction: "vertical",
     gap: "lg",
-    children: [header, { type: "divider" }, ...filterButtons, { type: "divider" }, dataGrid]
+    children: [
+      header,
+      { type: "divider" },
+      ...filterControls,
+      ...switchControls.length > 0 ? [{ type: "divider" }, ...switchControls] : [],
+      { type: "divider" },
+      dataGrid
+    ]
+  };
+  const activeFilterIndicator = {
+    type: "stack",
+    direction: "horizontal",
+    gap: "sm",
+    align: "center",
+    children: [
+      { type: "icon", name: "filter", size: "sm" },
+      { type: "typography", variant: "caption", color: "muted", content: "Filtered by" },
+      { type: "badge", label: "@payload.field", variant: "secondary" },
+      { type: "typography", variant: "caption", content: "=" },
+      { type: "badge", label: "@payload.value", variant: "primary" }
+    ]
   };
   const filteredView = {
     type: "stack",
@@ -787,15 +789,16 @@ function buildTrait5(c) {
             { type: "icon", name: headerIcon, size: "lg" },
             { type: "typography", content: pageTitle, variant: "h2" }
           ] },
-          { type: "stack", direction: "horizontal", gap: "sm", children: [
+          { type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [
             { type: "badge", label: "Filtered", variant: "primary" },
-            { type: "button", label: "Clear", event: "CLEAR_FILTERS", variant: "ghost", icon: "x" }
+            { type: "button", label: "Clear All", event: "CLEAR_FILTERS", variant: "ghost", icon: "x" }
           ] }
         ]
       },
+      activeFilterIndicator,
       { type: "divider" },
-      // activeFilterButtons show primary variant for selected state
-      ...activeFilterButtons,
+      ...filterControls,
+      ...switchControls.length > 0 ? [{ type: "divider" }, ...switchControls] : [],
       { type: "divider" },
       dataGrid
     ]
@@ -811,14 +814,29 @@ function buildTrait5(c) {
       ],
       events: [
         { key: "INIT", name: "Initialize" },
-        { key: "FILTER", name: "Filter" },
+        { key: "FILTER", name: "Filter", payload: [
+          { name: "field", type: "string", required: true },
+          { name: "value", type: "string", required: true }
+        ] },
         { key: "CLEAR_FILTERS", name: "Clear Filters" }
       ],
       transitions: [
-        { from: "browsing", to: "browsing", event: "INIT", effects: [["fetch", entityName], ["render-ui", "main", browsingView]] },
-        { from: "browsing", to: "filtered", event: "FILTER", effects: [["fetch", entityName], ["render-ui", "main", filteredView]] },
-        { from: "filtered", to: "filtered", event: "FILTER", effects: [["fetch", entityName], ["render-ui", "main", filteredView]] },
-        { from: "filtered", to: "browsing", event: "CLEAR_FILTERS", effects: [["fetch", entityName], ["render-ui", "main", browsingView]] }
+        { from: "browsing", to: "browsing", event: "INIT", effects: [
+          ["fetch", entityName],
+          ["render-ui", "main", browsingView]
+        ] },
+        { from: "browsing", to: "filtered", event: "FILTER", effects: [
+          ["fetch", entityName, ["==", ["object/get", "@entity", "@payload.field"], "@payload.value"]],
+          ["render-ui", "main", filteredView]
+        ] },
+        { from: "filtered", to: "filtered", event: "FILTER", effects: [
+          ["fetch", entityName, ["==", ["object/get", "@entity", "@payload.field"], "@payload.value"]],
+          ["render-ui", "main", filteredView]
+        ] },
+        { from: "filtered", to: "browsing", event: "CLEAR_FILTERS", effects: [
+          ["fetch", entityName],
+          ["render-ui", "main", browsingView]
+        ] }
       ]
     }
   };
@@ -875,7 +893,7 @@ function buildTrait6(c) {
         type: "button",
         label: f.charAt(0).toUpperCase() + f.slice(1),
         event: "SORT",
-        // secondary in idle; molecules can override active to primary
+        actionPayload: { field: f, direction: "asc" },
         variant: "secondary",
         icon: "arrow-up-down"
       }))
@@ -892,6 +910,7 @@ function buildTrait6(c) {
         type: "button",
         label: f.charAt(0).toUpperCase() + f.slice(1),
         event: "SORT",
+        actionPayload: { field: f, direction: f === activeField ? "desc" : "asc" },
         // highlight the active sort field with primary + directional arrow
         variant: f === activeField ? "primary" : "secondary",
         icon: f === activeField ? "chevron-up" : "arrow-up-down"
@@ -905,10 +924,9 @@ function buildTrait6(c) {
     emptyTitle: `No ${pluralName.toLowerCase()} yet`,
     emptyDescription: `Add ${pluralName.toLowerCase()} to see them here.`,
     className: "transition-shadow hover:shadow-md cursor-pointer",
-    children: [{ type: "stack", direction: "vertical", gap: "sm", children: [
-      { type: "typography", variant: "h4", content: `@entity.${displayField}` },
-      // Show the first sortable field as a secondary datum so sorting is visually meaningful
-      ...sortableFields[1] ? [{ type: "typography", variant: "caption", color: "muted", content: `@entity.${sortableFields[1]}` }] : []
+    renderItem: ["fn", "item", { type: "stack", direction: "horizontal", gap: "md", align: "center", justify: "space-between", children: [
+      { type: "typography", variant: "h4", content: `@item.${displayField}` },
+      ...sortableFields[1] ? [{ type: "typography", variant: "caption", color: "muted", content: `@item.${sortableFields[1]}` }] : []
     ] }]
   };
   const mainView = {
@@ -923,7 +941,6 @@ function buildTrait6(c) {
         ] }
       ] },
       { type: "divider" },
-      // Sort toolbar lives just above the data list
       sortToolbar,
       dataGrid
     ]
@@ -954,12 +971,21 @@ function buildTrait6(c) {
       states: [{ name: "idle", isInitial: true }, { name: "sorted" }],
       events: [
         { key: "INIT", name: "Initialize" },
-        { key: "SORT", name: "Sort" }
+        { key: "SORT", name: "Sort", payload: [
+          { name: "field", type: "string", required: true },
+          { name: "direction", type: "string" }
+        ] }
       ],
       transitions: [
         { from: "idle", to: "idle", event: "INIT", effects: [["fetch", entityName], ["render-ui", "main", mainView]] },
-        { from: "idle", to: "sorted", event: "SORT", effects: [["fetch", entityName], ["render-ui", "main", mainSortedView]] },
-        { from: "sorted", to: "sorted", event: "SORT", effects: [["fetch", entityName], ["render-ui", "main", mainSortedView]] },
+        { from: "idle", to: "sorted", event: "SORT", effects: [
+          ["fetch", entityName, null, ["concat", "@payload.field", ":", "@payload.direction"]],
+          ["render-ui", "main", mainSortedView]
+        ] },
+        { from: "sorted", to: "sorted", event: "SORT", effects: [
+          ["fetch", entityName, null, ["concat", "@payload.field", ":", "@payload.direction"]],
+          ["render-ui", "main", mainSortedView]
+        ] },
         { from: "sorted", to: "idle", event: "INIT", effects: [["fetch", entityName], ["render-ui", "main", mainView]] }
       ]
     }
@@ -984,12 +1010,8 @@ function stdSort(params) {
 function resolve7(params) {
   const { entityName } = params;
   const baseFields = ensureIdField(params.fields);
-  const fields = [
-    ...baseFields,
-    ...baseFields.some((f) => f.name === "currentPage") ? [] : [{ name: "currentPage", type: "number", default: 1 }],
-    ...baseFields.some((f) => f.name === "pageSize") ? [] : [{ name: "pageSize", type: "number", default: 10 }]
-  ];
-  const nonIdFields = baseFields.filter((f) => f.name !== "id" && f.name !== "currentPage" && f.name !== "pageSize");
+  const fields = baseFields;
+  const nonIdFields = baseFields.filter((f) => f.name !== "id");
   const p = plural(entityName);
   return {
     entityName,
@@ -1043,34 +1065,22 @@ function buildTrait7(c) {
         emptyTitle: `No ${pluralName.toLowerCase()} yet`,
         emptyDescription: `Add ${pluralName.toLowerCase()} to see them here.`,
         className: "transition-shadow hover:shadow-md cursor-pointer",
-        children: [{
+        renderItem: ["fn", "item", {
           type: "stack",
           direction: "vertical",
           gap: "sm",
           children: [
-            { type: "typography", variant: "h4", content: `@entity.${displayField}` },
-            // secondary caption row to distinguish items
-            { type: "typography", variant: "caption", color: "muted", content: `@entity.id` }
+            { type: "typography", variant: "h4", content: "@item.name" },
+            { type: "typography", variant: "caption", color: "muted", content: "@item.id" }
           ]
         }]
       },
       {
-        // Pagination footer with context: "Page N" and Prev/Next nav
-        type: "stack",
-        direction: "horizontal",
-        gap: "sm",
-        justify: "center",
-        align: "center",
-        children: [
-          { type: "button", label: "Previous", event: "PAGE", variant: "ghost", icon: "chevron-left" },
-          {
-            type: "typography",
-            variant: "body",
-            color: "muted",
-            content: ["concat", "Page ", "@entity.currentPage"]
-          },
-          { type: "button", label: "Next", event: "PAGE", variant: "ghost", icon: "chevron-right" }
-        ]
+        type: "pagination",
+        currentPage: 1,
+        totalPages: 10,
+        onPageChange: "PAGE",
+        showPageSize: false
       }
     ]
   };
@@ -1104,10 +1114,58 @@ function buildTrait7(c) {
           to: "idle",
           event: "PAGE",
           effects: [
-            ["set", "@entity.currentPage", "@payload.page"],
-            ["set", "@entity.pageSize", "@payload.pageSize"],
             ["fetch", entityName],
-            ["render-ui", "main", mainView]
+            ["render-ui", "main", {
+              type: "stack",
+              direction: "vertical",
+              gap: "lg",
+              children: [
+                {
+                  type: "stack",
+                  direction: "horizontal",
+                  gap: "sm",
+                  justify: "space-between",
+                  align: "center",
+                  children: [
+                    {
+                      type: "stack",
+                      direction: "horizontal",
+                      gap: "sm",
+                      align: "center",
+                      children: [
+                        { type: "icon", name: headerIcon, size: "lg" },
+                        { type: "typography", content: pageTitle, variant: "h2" }
+                      ]
+                    }
+                  ]
+                },
+                { type: "divider" },
+                {
+                  type: "data-grid",
+                  entity: entityName,
+                  emptyIcon: "inbox",
+                  emptyTitle: `No ${pluralName.toLowerCase()} yet`,
+                  emptyDescription: `Add ${pluralName.toLowerCase()} to see them here.`,
+                  className: "transition-shadow hover:shadow-md cursor-pointer",
+                  renderItem: ["fn", "item", {
+                    type: "stack",
+                    direction: "vertical",
+                    gap: "sm",
+                    children: [
+                      { type: "typography", variant: "h4", content: "@item.name" },
+                      { type: "typography", variant: "caption", color: "muted", content: "@item.id" }
+                    ]
+                  }]
+                },
+                {
+                  type: "pagination",
+                  currentPage: "@payload.page",
+                  totalPages: 10,
+                  onPageChange: "PAGE",
+                  showPageSize: false
+                }
+              ]
+            }]
           ]
         }
       ]
@@ -1158,6 +1216,7 @@ function resolve8(params) {
 function buildEntity8(c) {
   return makeEntity({ name: c.entityName, fields: c.fields, persistence: c.persistence });
 }
+var ef = (field) => ["object/get", ["array/first", "@entity"], field];
 function buildTrait8(c) {
   const { entityName, nonIdFields, displayField, pluralName, drawerTitle, headerIcon } = c;
   const closedView = {
@@ -1192,60 +1251,63 @@ function buildTrait8(c) {
         emptyIcon: "inbox",
         emptyTitle: `No ${pluralName.toLowerCase()} yet`,
         emptyDescription: `Add ${pluralName.toLowerCase()} to see them here.`,
-        children: [{
+        renderItem: ["fn", "item", {
           type: "stack",
           direction: "vertical",
           gap: "sm",
           children: [
-            { type: "typography", variant: "h4", content: `@entity.${displayField}` }
+            { type: "typography", variant: "h4", content: `@item.${displayField}` }
           ]
         }]
       }
     ]
   };
   const openView = {
-    type: "stack",
-    direction: "vertical",
-    gap: "md",
+    type: "drawer",
+    title: drawerTitle,
+    isOpen: true,
     children: [
       {
         type: "stack",
-        direction: "horizontal",
-        gap: "sm",
-        justify: "space-between",
-        align: "center",
+        direction: "vertical",
+        gap: "md",
         children: [
+          {
+            type: "accordion",
+            items: [
+              {
+                id: "details",
+                title: "Details",
+                content: {
+                  type: "stack",
+                  direction: "vertical",
+                  gap: "sm",
+                  children: nonIdFields.map((field) => ({
+                    type: "stack",
+                    direction: "horizontal",
+                    gap: "md",
+                    justify: "space-between",
+                    children: [
+                      { type: "typography", variant: "caption", content: field.name.charAt(0).toUpperCase() + field.name.slice(1) },
+                      { type: "typography", variant: "body", content: ef(field.name) }
+                    ]
+                  }))
+                }
+              }
+            ],
+            defaultOpen: [0],
+            multiple: true
+          },
+          { type: "divider" },
           {
             type: "stack",
             direction: "horizontal",
             gap: "sm",
-            align: "center",
+            justify: "end",
             children: [
-              { type: "icon", name: headerIcon, size: "md" },
-              { type: "typography", content: drawerTitle, variant: "h3" }
+              { type: "button", label: "Close", event: "CLOSE", variant: "ghost" }
             ]
-          },
-          { type: "button", label: "Close", event: "CLOSE", variant: "ghost", icon: "x" }
-        ]
-      },
-      { type: "divider" },
-      ...nonIdFields.map((field) => ({
-        type: "stack",
-        direction: "horizontal",
-        gap: "md",
-        children: [
-          { type: "typography", variant: "caption", content: field.name.charAt(0).toUpperCase() + field.name.slice(1) },
-          { type: "typography", variant: "body", content: `@entity.${field.name}` }
-        ]
-      })),
-      { type: "divider" },
-      {
-        type: "stack",
-        direction: "horizontal",
-        gap: "sm",
-        justify: "end",
-        children: [
-          { type: "button", label: "Close", event: "CLOSE", variant: "ghost" }
+          }
         ]
       }
     ]
@@ -1288,7 +1350,9 @@ function buildTrait8(c) {
           to: "closed",
           event: "CLOSE",
           effects: [
-            ["render-ui", "drawer", null]
+            ["render-ui", "drawer", null],
+            ["fetch", entityName],
+            ["render-ui", "main", closedView]
           ]
         }
       ]
@@ -1341,6 +1405,7 @@ function resolve9(params) {
 function buildEntity9(c) {
   return makeEntity({ name: c.entityName, fields: c.fields, persistence: c.persistence });
 }
+var ef2 = (field) => ["object/get", ["array/first", "@entity"], field];
 function buildTrait9(c) {
   const { entityName, headerIcon, pageTitle } = c;
   const hiddenView = {
@@ -1359,17 +1424,7 @@ function buildTrait9(c) {
         ]
       },
       { type: "divider" },
-      {
-        type: "stack",
-        direction: "vertical",
-        gap: "md",
-        align: "center",
-        children: [
-          { type: "icon", name: "bell-off", size: "lg" },
-          { type: "typography", content: "No notifications", variant: "body" },
-          { type: "typography", content: "New notifications will appear here.", variant: "caption" }
-        ]
-      }
+      { type: "empty-state", icon: "bell-off", title: "No notifications", description: "New notifications will appear here." }
     ]
   };
   const visibleView = {
@@ -1399,22 +1454,9 @@ function buildTrait9(c) {
       },
       { type: "divider" },
       {
-        type: "stack",
-        direction: "horizontal",
-        gap: "md",
-        align: "center",
-        children: [
-          { type: "icon", name: headerIcon, size: "md" },
-          {
-            type: "stack",
-            direction: "vertical",
-            gap: "xs",
-            children: [
-              { type: "typography", content: "@entity.message", variant: "body" },
-              { type: "badge", label: "@entity.notificationType" }
-            ]
-          }
-        ]
+        type: "alert",
+        variant: ef2("notificationType"),
+        message: ef2("message")
       }
     ]
   };
@@ -1529,6 +1571,7 @@ function resolve10(params) {
 function buildEntity10(c) {
   return makeEntity({ name: c.entityName, fields: c.fields, persistence: c.persistence });
 }
+var ef3 = (field) => ["object/get", ["array/first", "@entity"], field];
 function buildTrait10(c) {
   const { entityName, timerTitle, headerIcon } = c;
   const timerDisplay = {
@@ -1548,13 +1591,11 @@ function buildTrait10(c) {
         ]
       },
       { type: "divider" },
-      // Large MM:SS time display — the entity.remaining field drives this
-      { type: "typography", content: "@entity.remaining", variant: "h1" },
-      // Unit/label subtitle: shows what is being timed
-      { type: "typography", content: "seconds remaining", variant: "caption", color: "muted" },
-      // Progress bar track — always visible, filled as timer decrements
-      { type: "progress-bar", value: "@entity.remaining", max: c.duration, color: "primary" },
-      { type: "badge", label: "@entity.status" }
+      { type: "animated-counter", value: ef3("remaining"), suffix: "s", duration: 500 },
+      { type: "stat-display", label: "Time Remaining", value: ef3("remaining"), max: c.duration },
+      { type: "meter", value: ef3("remaining"), min: 0, max: c.duration },
+      { type: "progress-bar", value: ef3("remaining"), max: c.duration, color: "primary", showPercentage: true },
+      { type: "badge", label: ef3("status") }
     ]
   };
   const idleButtons = {
@@ -1764,11 +1805,7 @@ function resolve11(params) {
   const { entityName } = params;
   const baseFields = ensureIdField(params.fields);
   const p = plural(entityName);
-  const domainFields = [
-    { name: "activeTab", type: "string", default: "" }
-  ];
-  const userFieldNames = new Set(baseFields.map((f) => f.name));
-  const fields = [...baseFields, ...domainFields.filter((f) => !userFieldNames.has(f.name))];
+  const fields = baseFields;
   const nonIdFields = fields.filter((f) => f.name !== "id");
   const tabItems = params.tabItems ?? nonIdFields.filter((f) => f.name !== "activeTab").map((f) => ({
     label: f.name.charAt(0).toUpperCase() + f.name.slice(1),
@@ -1795,7 +1832,21 @@ function buildEntity11(c) {
 }
 function buildTrait11(c) {
   const { entityName, displayField, pluralName, headerIcon, pageTitle, tabItems } = c;
-  const mainView = {
+  const tabContentChildren = [
+    {
+      type: "data-grid",
+      entity: entityName,
+      emptyIcon: "inbox",
+      emptyTitle: `No ${pluralName.toLowerCase()} yet`,
+      emptyDescription: `Add ${pluralName.toLowerCase()} to see them here.`,
+      className: "transition-shadow hover:shadow-md cursor-pointer",
+      renderItem: ["fn", "item", { type: "stack", direction: "vertical", gap: "sm", children: [
+        { type: "typography", variant: "h4", content: `@item.${displayField}` },
+        { type: "typography", variant: "caption", color: "muted", content: `@item.${tabItems[0]?.value ?? displayField}` }
+      ] }]
+    }
+  ];
+  const initView = {
     type: "stack",
     direction: "vertical",
     gap: "lg",
@@ -1809,24 +1860,31 @@ function buildTrait11(c) {
         type: "tabs",
         tabs: tabItems,
         defaultActiveTab: tabItems[0]?.value ?? "",
-        // active tab gets primary color underline and text
-        activeTab: "@entity.activeTab",
         onTabChange: "SELECT_TAB"
       },
-      // divider separates tab bar from content
+      { type: "divider" },
+      ...tabContentChildren
+    ]
+  };
+  const tabSelectedView = {
+    type: "stack",
+    direction: "vertical",
+    gap: "lg",
+    children: [
+      { type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [
+        { type: "icon", name: headerIcon, size: "lg" },
+        { type: "typography", content: pageTitle, variant: "h2" }
+      ] },
       { type: "divider" },
       {
-        type: "data-grid",
-        entity: entityName,
-        emptyIcon: "inbox",
-        emptyTitle: `No ${pluralName.toLowerCase()} yet`,
-        emptyDescription: `Add ${pluralName.toLowerCase()} to see them here.`,
-        className: "transition-shadow hover:shadow-md cursor-pointer",
-        children: [{ type: "stack", direction: "vertical", gap: "sm", children: [
-          { type: "typography", variant: "h4", content: `@entity.${displayField}` },
-          { type: "typography", variant: "caption", color: "muted", content: `@entity.${tabItems[0]?.value ?? displayField}` }
-        ] }]
-      }
+        type: "tabs",
+        tabs: tabItems,
+        defaultActiveTab: tabItems[0]?.value ?? "",
+        activeTab: "@payload.tab",
+        onTabChange: "SELECT_TAB"
+      },
+      { type: "divider" },
+      ...tabContentChildren
     ]
   };
   return {
@@ -1837,11 +1895,13 @@ function buildTrait11(c) {
       states: [{ name: "idle", isInitial: true }],
       events: [
         { key: "INIT", name: "Initialize" },
-        { key: "SELECT_TAB", name: "Select Tab" }
+        { key: "SELECT_TAB", name: "Select Tab", payload: [
+          { name: "tab", type: "string", required: true }
+        ] }
       ],
       transitions: [
-        { from: "idle", to: "idle", event: "INIT", effects: [["fetch", entityName], ["render-ui", "main", mainView]] },
-        { from: "idle", to: "idle", event: "SELECT_TAB", effects: [["fetch", entityName], ["render-ui", "main", mainView]] }
+        { from: "idle", to: "idle", event: "INIT", effects: [["fetch", entityName], ["render-ui", "main", initView]] },
+        { from: "idle", to: "idle", event: "SELECT_TAB", effects: [["fetch", entityName], ["render-ui", "main", tabSelectedView]] }
       ]
     }
   };
@@ -1897,7 +1957,6 @@ function buildTrait12(c) {
     align: "center",
     children: [
       {
-        // Neutral icon in idle (not the spinner — that lives only in the loading state)
         type: "stack",
         direction: "horizontal",
         gap: "sm",
@@ -1908,41 +1967,24 @@ function buildTrait12(c) {
         ]
       },
       { type: "divider" },
-      // Contextual description of what this loading operation does
       {
         type: "typography",
         variant: "body",
         color: "muted",
-        content: `Ready to load ${title.toLowerCase()}. Click Start to begin.`
-      },
-      { type: "button", label: "Start", event: "START", variant: "primary", icon: "play" }
-    ]
-  };
-  const loadingView = {
-    type: "stack",
-    direction: "vertical",
-    gap: "lg",
-    align: "center",
-    children: [
-      {
-        // Spinner icon appears only in the loading state — not permanently
-        type: "stack",
-        direction: "horizontal",
-        gap: "sm",
-        align: "center",
-        children: [
-          { type: "icon", name: "loader", size: "lg" },
-          { type: "typography", content: "Loading...", variant: "h2" }
-        ]
-      },
-      { type: "divider" },
-      { type: "progress-bar", value: 50 },
-      {
-        type: "typography",
-        variant: "caption",
-        color: "muted",
-        content: "Please wait while the operation completes."
-      }
+        content: `Ready to load ${title.toLowerCase()}. Click Start to begin.`
+      },
+      { type: "button", label: "Start", event: "START", variant: "primary", icon: "play" }
+    ]
+  };
+  const loadingView = {
+    type: "stack",
+    direction: "vertical",
+    gap: "lg",
+    align: "center",
+    children: [
+      { type: "loading-state", title: "Loading", message: `Loading ${title.toLowerCase()}...` },
+      { type: "progress-bar", value: 50, showPercentage: true },
+      { type: "skeleton", variant: "text" }
     ]
   };
   const successView = {
@@ -1962,7 +2004,7 @@ function buildTrait12(c) {
         ]
       },
       { type: "divider" },
-      { type: "typography", variant: "body", content: "Operation completed successfully." },
+      { type: "alert", variant: "success", message: "Operation completed successfully." },
       { type: "button", label: "Reset", event: "RESET", variant: "ghost", icon: "rotate-ccw" }
     ]
   };
@@ -1972,18 +2014,7 @@ function buildTrait12(c) {
     gap: "lg",
     align: "center",
     children: [
-      {
-        type: "stack",
-        direction: "horizontal",
-        gap: "md",
-        align: "center",
-        children: [
-          { type: "icon", name: "alert-circle", size: "lg" },
-          { type: "typography", content: "Error", variant: "h2" }
-        ]
-      },
-      { type: "divider" },
-      { type: "typography", variant: "body", content: "Something went wrong." },
+      { type: "error-state", title: "Error", message: "Something went wrong. Please try again.", onRetry: "START" },
       {
         type: "stack",
         direction: "horizontal",
@@ -2106,11 +2137,8 @@ function stdLoading(params) {
 function resolve13(params) {
   const { entityName } = params;
   const baseFields = ensureIdField(params.fields);
-  const fields = [
-    ...baseFields,
-    ...baseFields.some((f) => f.name === "selectedId") ? [] : [{ name: "selectedId", type: "string", default: "" }]
-  ];
-  const nonIdFields = baseFields.filter((f) => f.name !== "id" && f.name !== "selectedId");
+  const fields = baseFields;
+  const nonIdFields = baseFields.filter((f) => f.name !== "id");
   const p = plural(entityName);
   return {
     entityName,
@@ -2147,7 +2175,6 @@ function buildTrait13(c) {
         ]
       },
       { type: "divider" },
-      // Meaningful action prompt using entity name
       {
         type: "typography",
         variant: "caption",
@@ -2161,16 +2188,14 @@ function buildTrait13(c) {
         emptyTitle: `No ${pluralName.toLowerCase()} yet`,
         emptyDescription: `Add ${pluralName.toLowerCase()} to see them here.`,
         className: "transition-shadow hover:shadow-md cursor-pointer",
-        children: [{
-          // Checkbox-style affordance on LEFT of each row, then the entity name
+        itemActions: [{ label: "Select", event: "SELECT", icon: "check" }],
+        renderItem: ["fn", "item", {
           type: "stack",
           direction: "horizontal",
           gap: "sm",
           align: "center",
           children: [
-            { type: "icon", name: "circle", size: "sm", color: "muted" },
-            { type: "typography", variant: "h4", content: `@entity.${displayField}` },
-            { type: "button", label: "Select", event: "SELECT", variant: "ghost", icon: "check" }
+            { type: "checkbox", label: `@item.${displayField}` }
           ]
         }]
       }
@@ -2212,22 +2237,35 @@ function buildTrait13(c) {
       },
       { type: "divider" },
       {
-        type: "stack",
-        direction: "horizontal",
-        gap: "md",
-        align: "center",
-        children: [
-          { type: "typography", variant: "caption", content: "Selected ID:" },
-          { type: "typography", variant: "body", content: "@entity.selectedId" }
-        ]
+        type: "alert",
+        variant: "info",
+        message: ["concat", "Selected: ", "@payload.id"]
+      },
+      {
+        type: "data-grid",
+        entity: entityName,
+        emptyIcon: "inbox",
+        emptyTitle: `No ${pluralName.toLowerCase()} yet`,
+        emptyDescription: `Add ${pluralName.toLowerCase()} to see them here.`,
+        itemActions: [{ label: "Select", event: "SELECT", icon: "check" }],
+        renderItem: ["fn", "item", {
+          type: "stack",
+          direction: "horizontal",
+          gap: "sm",
+          align: "center",
+          children: [
+            { type: "checkbox", label: `@item.${displayField}`, checked: ["==", "@item.id", "@payload.id"] }
+          ]
+        }]
       },
+      { type: "divider" },
       {
         type: "stack",
         direction: "horizontal",
         gap: "sm",
         justify: "center",
         children: [
-          { type: "button", label: "Confirm", event: "CONFIRM_SELECTION", variant: "primary", icon: "check" },
+          { type: "button", label: "Confirm", event: "CONFIRM_SELECTION", actionPayload: { id: "@payload.id" }, variant: "primary", icon: "check" },
           { type: "button", label: "Deselect", event: "DESELECT", variant: "ghost", icon: "x" }
         ]
       }
@@ -2259,6 +2297,11 @@ function buildTrait13(c) {
         ]
       },
       { type: "divider" },
+      {
+        type: "alert",
+        variant: "success",
+        message: "Selection confirmed successfully."
+      },
       {
         type: "stack",
         direction: "horizontal",
@@ -2266,7 +2309,7 @@ function buildTrait13(c) {
         align: "center",
         children: [
           { type: "typography", variant: "caption", content: "Selected ID:" },
-          { type: "typography", variant: "body", content: "@entity.selectedId" }
+          { type: "typography", variant: "body", content: "@payload.id" }
         ]
       },
       { type: "button", label: "Clear Selection", event: "CLEAR", variant: "ghost", icon: "rotate-ccw" }
@@ -2289,7 +2332,9 @@ function buildTrait13(c) {
         ] },
         { key: "DESELECT", name: "Deselect" },
         { key: "CLEAR", name: "Clear" },
-        { key: "CONFIRM_SELECTION", name: "Confirm Selection" }
+        { key: "CONFIRM_SELECTION", name: "Confirm Selection", payload: [
+          { name: "id", type: "string", required: true }
+        ] }
       ],
       transitions: [
         {
@@ -2306,7 +2351,7 @@ function buildTrait13(c) {
           to: "selecting",
           event: "SELECT",
           effects: [
-            ["set", "@entity.selectedId", "@payload.id"],
+            ["fetch", entityName],
             ["render-ui", "main", selectingView]
           ]
         },
@@ -2315,7 +2360,7 @@ function buildTrait13(c) {
           to: "selecting",
           event: "SELECT",
           effects: [
-            ["set", "@entity.selectedId", "@payload.id"],
+            ["fetch", entityName],
             ["render-ui", "main", selectingView]
           ]
         },
@@ -2324,7 +2369,6 @@ function buildTrait13(c) {
           to: "idle",
           event: "DESELECT",
           effects: [
-            ["set", "@entity.selectedId", ""],
             ["fetch", entityName],
             ["render-ui", "main", idleView]
           ]
@@ -2334,7 +2378,6 @@ function buildTrait13(c) {
           to: "idle",
           event: "CLEAR",
           effects: [
-            ["set", "@entity.selectedId", ""],
             ["fetch", entityName],
             ["render-ui", "main", idleView]
           ]
@@ -2352,7 +2395,6 @@ function buildTrait13(c) {
           to: "idle",
           event: "CLEAR",
           effects: [
-            ["set", "@entity.selectedId", ""],
             ["fetch", entityName],
             ["render-ui", "main", idleView]
           ]
@@ -2408,6 +2450,7 @@ function resolve14(params) {
 function buildEntity14(c) {
   return makeEntity({ name: c.entityName, fields: c.fields, persistence: c.persistence });
 }
+var ef4 = (field) => ["object/get", ["array/first", "@entity"], field];
 function buildTrait14(c) {
   const { entityName, headerIcon, pageTitle } = c;
   const mainView = {
@@ -2421,17 +2464,22 @@ function buildTrait14(c) {
           { type: "typography", content: pageTitle, variant: "h2" }
         ] },
         { type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [
-          { type: "button", label: "Undo", event: "UNDO", variant: "ghost", icon: "undo" },
-          { type: "button", label: "Redo", event: "REDO", variant: "ghost", icon: "redo" },
-          // gap-6 spacer between Redo and Clear to prevent misclicking destructive action
+          { type: "tooltip", content: "Undo the last action", children: [
+            { type: "button", label: "Undo", event: "UNDO", variant: "ghost", icon: "undo" }
+          ] },
+          { type: "tooltip", content: "Redo the last undone action", children: [
+            { type: "button", label: "Redo", event: "REDO", variant: "ghost", icon: "redo" }
+          ] },
           { type: "divider", orientation: "vertical" },
-          { type: "button", label: "Clear", event: "CLEAR", variant: "ghost", icon: "trash-2" }
+          { type: "tooltip", content: "Clear all history", children: [
+            { type: "button", label: "Clear", event: "CLEAR", variant: "ghost", icon: "trash-2" }
+          ] }
         ] }
       ] },
       { type: "divider" },
       { type: "stack", direction: "horizontal", gap: "md", align: "center", children: [
         { type: "typography", variant: "caption", color: "muted", content: "Last action:" },
-        { type: "badge", label: "@entity.current" }
+        { type: "badge", label: ef4("current") }
       ] }
     ]
   };
@@ -2528,6 +2576,7 @@ function resolve15(params) {
 function buildEntity15(c) {
   return makeEntity({ name: c.entityName, fields: c.fields, persistence: c.persistence });
 }
+var ef5 = (field) => ["object/get", ["array/first", "@entity"], field];
 function buildTrait15(c) {
   const { entityName, inputLabel, placeholder, headerIcon } = c;
   const inputView = {
@@ -2547,22 +2596,14 @@ function buildTrait15(c) {
       },
       { type: "divider" },
       {
-        // Form field pattern: label above, input below, help text below input
-        type: "stack",
-        direction: "vertical",
-        gap: "sm",
+        type: "form-field",
+        label: inputLabel,
+        hint: "Type to enter a value.",
         children: [
-          { type: "typography", variant: "caption", content: inputLabel },
-          { type: "input", placeholder, event: "CHANGE" },
-          // show current entered value as status below the field (not a mystery bar)
-          {
-            type: "typography",
-            variant: "caption",
-            color: "muted",
-            content: "@entity.value"
-          }
+          { type: "input", placeholder, event: "CHANGE" }
         ]
-      }
+      },
+      { type: "typography", variant: "caption", color: "muted", content: ef5("value") }
     ]
   };
   const validatingView = {
@@ -2582,21 +2623,14 @@ function buildTrait15(c) {
       },
       { type: "divider" },
       {
-        type: "stack",
-        direction: "vertical",
-        gap: "sm",
+        type: "form-field",
+        label: inputLabel,
+        hint: "Validating...",
         children: [
-          { type: "typography", variant: "caption", content: inputLabel },
-          { type: "input", placeholder, event: "CHANGE" },
-          // semantic validation message — shown only in validating state
-          {
-            type: "typography",
-            variant: "caption",
-            color: "muted",
-            content: "Validating..."
-          }
+          { type: "input", placeholder, event: "CHANGE" }
         ]
-      }
+      },
+      { type: "alert", variant: "info", message: "Validating input..." }
     ]
   };
   return {
@@ -2749,7 +2783,6 @@ function buildEntity16(c) {
 }
 function buildStepUI(c, stepIndex) {
   const step = c.steps[stepIndex];
-  const stepNumber = stepIndex + 1;
   const isFirst = stepIndex === 0;
   const navButtons = [];
   if (!isFirst) {
@@ -2771,7 +2804,7 @@ function buildStepUI(c, stepIndex) {
           { type: "typography", content: c.wizardTitle, variant: "h2" }
         ]
       },
-      { type: "badge", label: `Step ${stepNumber} of ${c.totalSteps}` },
+      { type: "progress-dots", count: c.totalSteps, currentIndex: stepIndex },
       { type: "wizard-progress", steps: c.wizardProgressSteps, currentStep: stepIndex },
       { type: "divider" },
       { type: "typography", content: step.name, variant: "h3" },
@@ -2794,7 +2827,7 @@ function buildReviewUI(c) {
     justify: "space-between",
     children: [
       { type: "typography", variant: "caption", content: field.name.charAt(0).toUpperCase() + field.name.slice(1) },
-      { type: "typography", variant: "body", content: `@entity.${field.name}` }
+      { type: "typography", variant: "body", content: `@item.${field.name}` }
     ]
   }));
   return {
@@ -2818,24 +2851,20 @@ function buildReviewUI(c) {
       {
         type: "data-list",
         entity: c.entityName,
-        children: [
-          {
-            type: "stack",
-            direction: "vertical",
-            gap: "sm",
-            children: reviewDetailChildren
-          }
-        ]
+        renderItem: ["fn", "item", {
+          type: "stack",
+          direction: "vertical",
+          gap: "sm",
+          children: reviewDetailChildren
+        }]
       },
       {
-        type: "stack",
-        direction: "horizontal",
-        gap: "sm",
-        justify: "end",
-        children: [
-          { type: "button", label: "Back", event: "PREV", variant: "ghost", icon: "arrow-left" },
-          { type: "button", label: c.submitButtonLabel, event: "COMPLETE", variant: "primary", icon: "check" }
-        ]
+        type: "wizard-navigation",
+        currentStep: c.totalSteps,
+        totalSteps: c.totalSteps + 1,
+        showBack: true,
+        showComplete: true,
+        showNext: false
       }
     ]
   };
@@ -3001,20 +3030,28 @@ function resolve17(params) {
     isInitial: params.isInitial ?? false
   };
 }
+var ef6 = (field) => ["object/get", ["array/first", "@entity"], field];
 function buildTrait17(c) {
   const { entityName, displayFields, headerIcon, pageTitle, refreshButtonLabel, columns } = c;
-  const cardChildren = displayFields.map((f) => ({
-    type: "card",
-    children: [{
-      type: "stack",
-      direction: "vertical",
-      gap: "sm",
-      children: [
-        { type: "typography", variant: "caption", content: f.charAt(0).toUpperCase() + f.slice(1) },
-        { type: "typography", variant: "h3", content: `@entity.${f}` }
-      ]
-    }]
-  }));
+  const cardChildren = displayFields.map((f) => {
+    const field = c.nonIdFields.find((nf) => nf.name === f);
+    const isNumeric = field?.type === "number";
+    if (isNumeric) {
+      return { type: "stat-display", label: f.charAt(0).toUpperCase() + f.slice(1), value: ef6(f) };
+    }
+    return {
+      type: "card",
+      children: [{
+        type: "stack",
+        direction: "vertical",
+        gap: "sm",
+        children: [
+          { type: "typography", variant: "caption", content: f.charAt(0).toUpperCase() + f.slice(1) },
+          { type: "typography", variant: "h3", content: ef6(f) }
+        ]
+      }]
+    };
+  });
   const mainView = {
     type: "stack",
     direction: "vertical",
@@ -3119,6 +3156,7 @@ function buildTrait18(c) {
         ]
       },
       { type: "divider" },
+      { type: "typography", variant: "body", color: "muted", content: `Ready to start ${entityName.toLowerCase()} operation.` },
       { type: "button", label: "Start", event: "START", variant: "primary", icon: "play" }
     ]
   };
@@ -3128,8 +3166,8 @@ function buildTrait18(c) {
     gap: "lg",
     align: "center",
     children: [
-      { type: "icon", name: "loader", size: "lg" },
-      { type: "typography", content: loadingMessage, variant: "h3" }
+      { type: "loading-state", title: loadingMessage, message: `Processing ${entityName.toLowerCase()}...` },
+      { type: "skeleton", variant: "text" }
     ]
   };
   const successUI = {
@@ -3139,7 +3177,7 @@ function buildTrait18(c) {
     align: "center",
     children: [
       { type: "icon", name: "check-circle", size: "lg" },
-      { type: "typography", content: successMessage, variant: "h3" },
+      { type: "alert", variant: "success", message: successMessage },
       {
         type: "stack",
         direction: "horizontal",
@@ -3163,8 +3201,7 @@ function buildTrait18(c) {
     gap: "lg",
     align: "center",
     children: [
-      { type: "icon", name: "alert-circle", size: "lg" },
-      { type: "typography", content: errorMessage, variant: "h3" },
+      { type: "error-state", title: "Operation Failed", message: errorMessage, onRetry: retryable ? "RETRY" : void 0 },
       {
         type: "stack",
         direction: "horizontal",
@@ -3495,6 +3532,7 @@ function resolve20(params) {
 function buildEntity19(c) {
   return makeEntity({ name: c.entityName, fields: c.fields, persistence: c.persistence, collection: c.collection });
 }
+var ef7 = (field) => ["object/get", ["array/first", "@entity"], field];
 function buildTrait20(c) {
   const { entityName, gameTitle, menuTitle, pauseTitle, gameoverTitle } = c;
   const menuUI = {
@@ -3508,8 +3546,8 @@ function buildTrait20(c) {
   const playingUI = {
     type: "game-hud",
     stats: [
-      { label: "Score", value: "@entity.score" },
-      { label: "Level", value: "@entity.level" }
+      { label: "Score", value: ef7("score") },
+      { label: "Level", value: ef7("level") }
     ]
   };
   const pausedModalUI = {
@@ -3524,8 +3562,8 @@ function buildTrait20(c) {
     type: "game-over-screen",
     title: gameoverTitle,
     stats: [
-      { label: "Score", value: "@entity.score" },
-      { label: "Level", value: "@entity.level" }
+      { label: "Score", value: ef7("score") },
+      { label: "Level", value: ef7("level") }
     ],
     menuItems: [
       { label: "Play Again", event: "RESTART", variant: "primary" },
@@ -3591,19 +3629,19 @@ function buildTrait20(c) {
           event: "PAUSE",
           effects: [["render-ui", "modal", pausedModalUI]]
         },
-        // RESUME: paused -> playing
+        // RESUME: paused -> playing (dismiss modal, re-render main with HUD)
         {
           from: "paused",
           to: "playing",
           event: "RESUME",
-          effects: [["render-ui", "modal", null]]
+          effects: [["render-ui", "modal", null], ["render-ui", "main", playingUI]]
         },
         // CLOSE: paused -> playing (modal exit requirement)
         {
           from: "paused",
           to: "playing",
           event: "CLOSE",
-          effects: [["render-ui", "modal", null]]
+          effects: [["render-ui", "modal", null], ["render-ui", "main", playingUI]]
         },
         // GAME_OVER: playing -> gameover
         {
@@ -3675,19 +3713,35 @@ function resolve21(params) {
   };
 }
 function buildEntity20(c) {
-  return makeEntity({ name: c.entityName, fields: c.fields, persistence: c.persistence, collection: c.collection });
+  const fields = [
+    ...c.fields.filter((f) => !["x", "y"].includes(f.name)),
+    { name: "x", type: "number", default: 0 },
+    { name: "y", type: "number", default: 0 }
+  ];
+  return makeEntity({ name: c.entityName, fields, persistence: c.persistence, collection: c.collection });
 }
+var ef8 = (field) => ["object/get", ["array/first", "@entity"], field];
 function buildTrait21(c) {
   const { entityName, nonIdFields, headerIcon, pageTitle } = c;
-  const fieldSummaryChildren = nonIdFields.slice(0, 4).map((field) => ({
-    type: "stack",
-    direction: "horizontal",
-    gap: "md",
-    children: [
-      { type: "typography", variant: "caption", content: field.name.charAt(0).toUpperCase() + field.name.slice(1) },
-      { type: "typography", variant: "body", content: `@entity.${field.name}` }
-    ]
-  }));
+  const fieldSummaryChildren = [
+    {
+      type: "simple-grid",
+      columns: 2,
+      children: [
+        { type: "stat-display", label: "X", value: ef8(nonIdFields.find((f) => f.name === "x")?.name ?? "x") },
+        { type: "stat-display", label: "Y", value: ef8(nonIdFields.find((f) => f.name === "y")?.name ?? "y") }
+      ]
+    },
+    ...nonIdFields.slice(0, 4).filter((f) => f.name !== "x" && f.name !== "y").map((field) => ({
+      type: "stack",
+      direction: "horizontal",
+      gap: "md",
+      children: [
+        { type: "typography", variant: "caption", content: field.name.charAt(0).toUpperCase() + field.name.slice(1) },
+        { type: "typography", variant: "body", content: ef8(field.name) }
+      ]
+    }))
+  ];
   const idleMainUI = {
     type: "stack",
     direction: "vertical",
@@ -3708,7 +3762,7 @@ function buildTrait21(c) {
               { type: "typography", content: pageTitle, variant: "h2" }
             ]
           },
-          { type: "badge", label: "Idle" }
+          { type: "status-dot", status: "inactive", label: "Idle" }
         ]
       },
       { type: "divider" },
@@ -3745,7 +3799,7 @@ function buildTrait21(c) {
               { type: "typography", content: pageTitle, variant: "h2" }
             ]
           },
-          { type: "badge", label: "Moving" }
+          { type: "status-dot", status: "active", pulse: true, label: "Moving" }
         ]
       },
       { type: "divider" },
@@ -3951,15 +4005,15 @@ function buildTrait22(c) {
           align: "center",
           children: [
             { type: "icon", name: headerIcon, size: "sm" },
-            { type: "typography", variant: "h4", content: `@entity.${listFields[0] ?? "id"}` }
+            { type: "typography", variant: "h4", content: `@item.${listFields[0] ?? "id"}` }
           ]
         },
-        ...listFields.length > 1 ? [{ type: "badge", label: `@entity.${listFields[1]}` }] : []
+        ...listFields.length > 1 ? [{ type: "badge", label: `@item.${listFields[1]}` }] : []
       ]
     }
   ];
   if (listFields.length > 2) {
-    listItemChildren.push({ type: "typography", variant: "caption", content: `@entity.${listFields[2]}` });
+    listItemChildren.push({ type: "typography", variant: "caption", content: `@item.${listFields[2]}` });
   }
   const headerBar = {
     type: "stack",
@@ -3986,13 +4040,14 @@ function buildTrait22(c) {
       headerBar,
       { type: "divider" },
       {
-        type: "data-grid",
+        type: "data-list",
         entity: entityName,
+        groupBy: "status",
         emptyIcon: "inbox",
         emptyTitle,
         emptyDescription,
         itemActions: [{ label: "Accept", event: "ACCEPT" }],
-        children: [{ type: "stack", direction: "vertical", gap: "sm", children: listItemChildren }]
+        renderItem: ["fn", "item", { type: "stack", direction: "vertical", gap: "sm", children: listItemChildren }]
       }
     ]
   };
@@ -4020,6 +4075,7 @@ function buildTrait22(c) {
         ]
       },
       { type: "divider" },
+      { type: "progress-bar", value: 50, showPercentage: true },
       {
         type: "data-grid",
         entity: entityName,
@@ -4031,7 +4087,7 @@ function buildTrait22(c) {
           { label: "Complete", event: "COMPLETE" },
           { label: "Fail", event: "FAIL", variant: "danger" }
         ],
-        children: [{ type: "stack", direction: "vertical", gap: "sm", children: listItemChildren }]
+        renderItem: ["fn", "item", { type: "stack", direction: "vertical", gap: "sm", children: listItemChildren }]
       }
     ]
   };
@@ -4043,7 +4099,7 @@ function buildTrait22(c) {
     children: [
       { type: "icon", name: "check-circle", size: "lg" },
       { type: "typography", content: "Quest Complete", variant: "h2" },
-      { type: "typography", content: "Congratulations! The quest has been completed.", variant: "body" },
+      { type: "alert", variant: "success", message: "Congratulations! The quest has been completed." },
       { type: "button", label: "View Quests", event: "RESET", variant: "primary", icon: "arrow-left" }
     ]
   };
@@ -4055,7 +4111,7 @@ function buildTrait22(c) {
     children: [
       { type: "icon", name: "x-circle", size: "lg" },
       { type: "typography", content: "Quest Failed", variant: "h2" },
-      { type: "typography", content: "The quest was not completed. You can try again.", variant: "body" },
+      { type: "alert", variant: "danger", message: "The quest was not completed. You can try again." },
       { type: "button", label: "View Quests", event: "RESET", variant: "primary", icon: "arrow-left" }
     ]
   };
@@ -4152,19 +4208,27 @@ function buildTrait22(c) {
             ["render-ui", "main", activeMainUI]
           ]
         },
-        // CANCEL: progressing -> active
+        // CANCEL: progressing -> active (re-render main to avoid stale content)
         {
           from: "progressing",
           to: "active",
           event: "CANCEL",
-          effects: [["render-ui", "modal", null]]
+          effects: [
+            ["render-ui", "modal", null],
+            ["fetch", entityName],
+            ["render-ui", "main", activeMainUI]
+          ]
         },
-        // CLOSE: progressing -> active
+        // CLOSE: progressing -> active (re-render main to avoid stale content)
         {
           from: "progressing",
           to: "active",
           event: "CLOSE",
-          effects: [["render-ui", "modal", null]]
+          effects: [
+            ["render-ui", "modal", null],
+            ["fetch", entityName],
+            ["render-ui", "main", activeMainUI]
+          ]
         },
         // COMPLETE: active -> complete
         {
@@ -4272,15 +4336,15 @@ function buildTrait23(c) {
           align: "center",
           children: [
             { type: "icon", name: "map-pin", size: "sm" },
-            { type: "typography", variant: "h4", content: `@entity.${listFields[0] ?? "id"}` }
+            { type: "typography", variant: "h4", content: `@item.${listFields[0] ?? "id"}` }
           ]
         },
-        ...listFields.length > 1 ? [{ type: "badge", label: `@entity.${listFields[1]}` }] : []
+        ...listFields.length > 1 ? [{ type: "badge", label: `@item.${listFields[1]}` }] : []
       ]
     }
   ];
   if (listFields.length > 2) {
-    listItemChildren.push({ type: "typography", variant: "caption", content: `@entity.${listFields[2]}` });
+    listItemChildren.push({ type: "typography", variant: "caption", content: `@item.${listFields[2]}` });
   }
   const exploringMainUI = {
     type: "stack",
@@ -4302,10 +4366,11 @@ function buildTrait23(c) {
               { type: "typography", content: worldTitle, variant: "h2" }
             ]
           },
-          { type: "badge", label: "Exploring" }
+          { type: "status-dot", status: "active", pulse: false, label: "Exploring" }
         ]
       },
       { type: "divider" },
+      { type: "map-view", markers: [], height: "200px", zoom: 10 },
       {
         type: "data-grid",
         entity: entityName,
@@ -4313,7 +4378,7 @@ function buildTrait23(c) {
         emptyTitle,
         emptyDescription,
         itemActions: [{ label: "Travel", event: "TRAVEL" }],
-        children: [{ type: "stack", direction: "vertical", gap: "sm", children: listItemChildren }]
+        renderItem: ["fn", "item", { type: "stack", direction: "vertical", gap: "sm", children: listItemChildren }]
       }
     ]
   };
@@ -4356,7 +4421,7 @@ function buildTrait23(c) {
               { type: "typography", content: pageTitle, variant: "h2" }
             ]
           },
-          { type: "badge", label: "Entered" }
+          { type: "status-dot", status: "success", label: "Entered" }
         ]
       },
       { type: "divider" },
@@ -4366,7 +4431,7 @@ function buildTrait23(c) {
         emptyIcon: "inbox",
         emptyTitle: "Nothing here",
         emptyDescription: "This zone is empty.",
-        children: [{ type: "stack", direction: "vertical", gap: "sm", children: listItemChildren }]
+        renderItem: ["fn", "item", { type: "stack", direction: "vertical", gap: "sm", children: listItemChildren }]
       },
       { type: "divider" },
       {
@@ -4481,50 +4546,79 @@ function resolve24(params) {
   };
 }
 function buildEntity23(c) {
-  return makeEntity({ name: c.entityName, fields: c.fields, persistence: c.persistence, collection: c.collection });
+  const fields = [
+    ...c.fields.filter((f) => !["failureCount", "successCount", "threshold"].includes(f.name)),
+    { name: "failureCount", type: "number", default: 0 },
+    { name: "successCount", type: "number", default: 0 },
+    { name: "threshold", type: "number", default: 5 }
+  ];
+  return makeEntity({ name: c.entityName, fields, persistence: c.persistence, collection: c.collection });
 }
+var ef9 = (field) => ["object/get", ["array/first", "@entity"], field];
 function buildTrait24(c) {
   const { entityName, headerIcon, closedLabel, openLabel, halfOpenLabel } = c;
   const closedUI = {
     type: "stack",
     direction: "vertical",
     gap: "lg",
-    align: "center",
     children: [
       {
         type: "stack",
         direction: "horizontal",
         gap: "md",
         align: "center",
+        justify: "space-between",
         children: [
-          { type: "icon", name: headerIcon, size: "lg" },
-          { type: "typography", content: entityName, variant: "h2" }
+          { type: "stack", direction: "horizontal", gap: "md", align: "center", children: [
+            { type: "icon", name: headerIcon, size: "lg" },
+            { type: "typography", content: entityName, variant: "h2" }
+          ] },
+          { type: "status-dot", status: "success", pulse: false, label: closedLabel }
         ]
       },
       { type: "divider" },
-      { type: "badge", label: closedLabel },
-      { type: "typography", content: "Service is healthy. All requests are being processed.", variant: "body" }
+      { type: "alert", variant: "success", message: "Service is healthy. All requests are being processed." },
+      {
+        type: "simple-grid",
+        columns: 2,
+        children: [
+          { type: "stat-display", label: "Failures", value: ef9("failureCount") },
+          { type: "stat-display", label: "Successes", value: ef9("successCount") }
+        ]
+      },
+      { type: "meter", value: ef9("failureCount"), min: 0, max: ef9("threshold") }
     ]
   };
   const openUI = {
     type: "stack",
     direction: "vertical",
     gap: "lg",
-    align: "center",
     children: [
       {
         type: "stack",
         direction: "horizontal",
         gap: "md",
         align: "center",
+        justify: "space-between",
         children: [
-          { type: "icon", name: "alert-triangle", size: "lg" },
-          { type: "typography", content: entityName, variant: "h2" }
+          { type: "stack", direction: "horizontal", gap: "md", align: "center", children: [
+            { type: "icon", name: "alert-triangle", size: "lg" },
+            { type: "typography", content: entityName, variant: "h2" }
+          ] },
+          { type: "status-dot", status: "error", pulse: true, label: openLabel }
         ]
       },
       { type: "divider" },
-      { type: "badge", label: openLabel },
-      { type: "typography", content: "Circuit is open. Requests are being rejected to prevent cascading failures.", variant: "body" },
+      { type: "alert", variant: "danger", message: "Circuit is open. Requests are being rejected to prevent cascading failures." },
+      {
+        type: "simple-grid",
+        columns: 2,
+        children: [
+          { type: "stat-display", label: "Failures", value: ef9("failureCount") },
+          { type: "stat-display", label: "Successes", value: ef9("successCount") }
+        ]
+      },
+      { type: "meter", value: ef9("failureCount"), min: 0, max: ef9("threshold") },
       { type: "button", label: "Reset", event: "RESET", variant: "ghost", icon: "rotate-ccw" }
     ]
   };
@@ -4532,21 +4626,31 @@ function buildTrait24(c) {
     type: "stack",
     direction: "vertical",
     gap: "lg",
-    align: "center",
     children: [
       {
         type: "stack",
         direction: "horizontal",
         gap: "md",
         align: "center",
+        justify: "space-between",
         children: [
-          { type: "icon", name: "activity", size: "lg" },
-          { type: "typography", content: entityName, variant: "h2" }
+          { type: "stack", direction: "horizontal", gap: "md", align: "center", children: [
+            { type: "icon", name: "activity", size: "lg" },
+            { type: "typography", content: entityName, variant: "h2" }
+          ] },
+          { type: "status-dot", status: "warning", pulse: true, label: halfOpenLabel }
         ]
       },
       { type: "divider" },
-      { type: "badge", label: halfOpenLabel },
-      { type: "typography", content: "Testing recovery. Limited requests are being allowed through.", variant: "body" }
+      { type: "alert", variant: "warning", message: "Testing recovery. Limited requests are being allowed through." },
+      {
+        type: "simple-grid",
+        columns: 2,
+        children: [
+          { type: "stat-display", label: "Failures", value: ef9("failureCount") },
+          { type: "stat-display", label: "Successes", value: ef9("successCount") }
+        ]
+      }
     ]
   };
   return {
@@ -4675,8 +4779,14 @@ function resolve25(params) {
   };
 }
 function buildEntity24(c) {
-  return makeEntity({ name: c.entityName, fields: c.fields, persistence: c.persistence, collection: c.collection });
+  const fields = [
+    ...c.fields.filter((f) => !["hitCount", "cacheAge"].includes(f.name)),
+    { name: "hitCount", type: "number", default: 0 },
+    { name: "cacheAge", type: "number", default: 0 }
+  ];
+  return makeEntity({ name: c.entityName, fields, persistence: c.persistence, collection: c.collection });
 }
+var ef10 = (field) => ["object/get", ["array/first", "@entity"], field];
 function buildTrait25(c) {
   const { entityName, listFields, headerIcon } = c;
   const { pageTitle, emptyTitle, emptyDescription } = c;
@@ -4694,15 +4804,15 @@ function buildTrait25(c) {
           align: "center",
           children: [
             { type: "icon", name: headerIcon, size: "sm" },
-            { type: "typography", variant: "h4", content: `@entity.${listFields[0] ?? "id"}` }
+            { type: "typography", variant: "h4", content: `@item.${listFields[0] ?? "id"}` }
           ]
         },
-        ...listFields.length > 1 ? [{ type: "badge", label: `@entity.${listFields[1]}` }] : []
+        ...listFields.length > 1 ? [{ type: "badge", label: `@item.${listFields[1]}` }] : []
       ]
     }
   ];
   if (listFields.length > 2) {
-    listItemChildren.push({ type: "typography", variant: "caption", content: `@entity.${listFields[2]}` });
+    listItemChildren.push({ type: "typography", variant: "caption", content: `@item.${listFields[2]}` });
   }
   const headerBar = {
     type: "stack",
@@ -4727,7 +4837,16 @@ function buildTrait25(c) {
     direction: "vertical",
     gap: "lg",
     children: [
-      headerBar,
+      {
+        type: "stack",
+        direction: "horizontal",
+        gap: "md",
+        justify: "space-between",
+        children: [
+          headerBar,
+          { type: "status-dot", status: "inactive", pulse: false, label: "Empty" }
+        ]
+      },
       { type: "divider" },
       { type: "empty-state", icon: "inbox", title: emptyTitle, description: emptyDescription }
     ]
@@ -4756,21 +4875,30 @@ function buildTrait25(c) {
             type: "stack",
             direction: "horizontal",
             gap: "sm",
+            align: "center",
             children: [
-              { type: "badge", label: "Cached" },
+              { type: "status-dot", status: "success", pulse: false, label: "Cached" },
               { type: "button", label: "Invalidate", event: "INVALIDATE", variant: "ghost", icon: "trash" }
             ]
           }
         ]
       },
       { type: "divider" },
+      {
+        type: "simple-grid",
+        columns: 2,
+        children: [
+          { type: "stat-display", label: "Hit Count", value: ef10("hitCount") },
+          { type: "stat-display", label: "Cache Age", value: ef10("cacheAge") }
+        ]
+      },
       {
         type: "data-grid",
         entity: entityName,
         emptyIcon: "inbox",
         emptyTitle,
         emptyDescription,
-        children: [{ type: "stack", direction: "vertical", gap: "sm", children: listItemChildren }]
+        renderItem: ["fn", "item", { type: "stack", direction: "vertical", gap: "sm", children: listItemChildren }]
       }
     ]
   };
@@ -4798,21 +4926,23 @@ function buildTrait25(c) {
             type: "stack",
             direction: "horizontal",
             gap: "sm",
+            align: "center",
             children: [
-              { type: "badge", label: "Stale" },
+              { type: "status-dot", status: "warning", pulse: true, label: "Stale" },
               { type: "button", label: "Refresh", event: "REFRESH", variant: "primary", icon: "refresh-cw" }
             ]
           }
         ]
       },
       { type: "divider" },
+      { type: "alert", variant: "warning", message: "Cache data is stale. Refresh to get the latest data." },
       {
         type: "data-grid",
         entity: entityName,
         emptyIcon: "inbox",
         emptyTitle,
         emptyDescription,
-        children: [{ type: "stack", direction: "vertical", gap: "sm", children: listItemChildren }]
+        renderItem: ["fn", "item", { type: "stack", direction: "vertical", gap: "sm", children: listItemChildren }]
       }
     ]
   };
@@ -4956,6 +5086,7 @@ function resolve26(params) {
 function buildEntity25(c) {
   return makeEntity({ name: c.entityName, fields: c.fields, persistence: c.persistence });
 }
+var ef11 = (field) => ["object/get", ["array/first", "@entity"], field];
 function buildTrait26(c) {
   const { entityName } = c;
   const scoreView = {
@@ -4966,12 +5097,14 @@ function buildTrait26(c) {
     children: [
       {
         type: "score-board",
-        score: "@entity.total",
+        score: ef11("total"),
         highScore: 0,
-        combo: "@entity.combo",
+        combo: ef11("combo"),
         multiplier: 1,
         level: 1
       },
+      { type: "animated-counter", value: ef11("total"), prefix: "Score: ", duration: 300 },
+      { type: "trend-indicator", value: ef11("points"), showValue: true },
       {
         type: "stack",
         direction: "horizontal",
@@ -5104,46 +5237,35 @@ function resolve27(params) {
 function buildEntity26(c) {
   return makeEntity({ name: c.entityName, fields: c.fields, persistence: c.persistence });
 }
+var ef12 = (field) => ["object/get", ["array/first", "@entity"], field];
 function buildTrait27(c) {
   const { entityName, headerIcon, pageTitle } = c;
   const idleView = {
     type: "stack",
     direction: "vertical",
     gap: "lg",
-    align: "center",
     children: [
       {
         type: "stack",
         direction: "horizontal",
         gap: "md",
         align: "center",
+        justify: "space-between",
         children: [
-          { type: "icon", name: headerIcon, size: "lg" },
-          { type: "typography", content: pageTitle, variant: "h2" }
+          { type: "stack", direction: "horizontal", gap: "md", align: "center", children: [
+            { type: "icon", name: headerIcon, size: "lg" },
+            { type: "typography", content: pageTitle, variant: "h2" }
+          ] },
+          { type: "status-dot", status: "inactive", label: "Idle" }
         ]
       },
       { type: "divider" },
       {
-        type: "card",
+        type: "simple-grid",
+        columns: 2,
         children: [
-          {
-            type: "stack",
-            direction: "vertical",
-            gap: "sm",
-            children: [
-              { type: "typography", content: "Position", variant: "caption" },
-              {
-                type: "stack",
-                direction: "horizontal",
-                gap: "md",
-                children: [
-                  { type: "typography", content: "@entity.x", variant: "body" },
-                  { type: "typography", content: "@entity.y", variant: "body" }
-                ]
-              },
-              { type: "badge", label: "@entity.collisionStatus" }
-            ]
-          }
+          { type: "stat-display", label: "X", value: ef12("x") },
+          { type: "stat-display", label: "Y", value: ef12("y") }
         ]
       },
       {
@@ -5161,43 +5283,32 @@ function buildTrait27(c) {
     type: "stack",
     direction: "vertical",
     gap: "lg",
-    align: "center",
     children: [
       {
         type: "stack",
         direction: "horizontal",
         gap: "md",
         align: "center",
+        justify: "space-between",
         children: [
-          { type: "icon", name: headerIcon, size: "lg" },
-          { type: "typography", content: pageTitle, variant: "h2" }
+          { type: "stack", direction: "horizontal", gap: "md", align: "center", children: [
+            { type: "icon", name: headerIcon, size: "lg" },
+            { type: "typography", content: pageTitle, variant: "h2" }
+          ] },
+          { type: "status-dot", status: "warning", pulse: true, label: "Detecting" }
         ]
       },
       { type: "divider" },
+      { type: "alert", variant: "warning", message: "Collision detection in progress..." },
       {
-        type: "card",
+        type: "simple-grid",
+        columns: 2,
         children: [
-          {
-            type: "stack",
-            direction: "vertical",
-            gap: "sm",
-            children: [
-              { type: "typography", content: "Position", variant: "caption" },
-              {
-                type: "stack",
-                direction: "horizontal",
-                gap: "md",
-                children: [
-                  { type: "typography", content: "@entity.x", variant: "body" },
-                  { type: "typography", content: "@entity.y", variant: "body" }
-                ]
-              },
-              { type: "badge", label: "Detecting..." },
-              { type: "typography", content: "@entity.targetId", variant: "body" }
-            ]
-          }
+          { type: "stat-display", label: "X", value: ef12("x") },
+          { type: "stat-display", label: "Y", value: ef12("y") }
         ]
       },
+      { type: "typography", variant: "caption", color: "muted", content: ef12("targetId") },
       {
         type: "stack",
         direction: "horizontal",
@@ -5490,40 +5601,39 @@ function resolve29(params) {
 function buildEntity28(c) {
   return makeEntity({ name: c.entityName, fields: c.fields, persistence: c.persistence });
 }
+var ef13 = (field) => ["object/get", ["array/first", "@entity"], field];
 function buildTrait29(c) {
   const { entityName, headerIcon, pageTitle } = c;
   const openView = {
     type: "stack",
     direction: "vertical",
     gap: "lg",
-    align: "center",
     children: [
       {
         type: "stack",
         direction: "horizontal",
         gap: "md",
         align: "center",
+        justify: "space-between",
         children: [
-          { type: "icon", name: headerIcon, size: "lg" },
-          { type: "typography", content: pageTitle, variant: "h2" }
+          { type: "stack", direction: "horizontal", gap: "md", align: "center", children: [
+            { type: "icon", name: headerIcon, size: "lg" },
+            { type: "typography", content: pageTitle, variant: "h2" }
+          ] },
+          { type: "status-dot", status: "success", pulse: false, label: "Open" }
         ]
       },
       { type: "divider" },
       {
-        type: "card",
+        type: "simple-grid",
+        columns: 2,
         children: [
-          {
-            type: "stack",
-            direction: "vertical",
-            gap: "sm",
-            children: [
-              { type: "typography", content: "Requests", variant: "caption" },
-              { type: "typography", content: "@entity.count", variant: "h4" },
-              { type: "badge", label: "@entity.limiterStatus" }
-            ]
-          }
+          { type: "stat-display", label: "Requests", value: ef13("count") },
+          { type: "stat-display", label: "Window", value: ef13("window") }
         ]
       },
+      { type: "meter", value: ef13("count"), min: 0, max: 100 },
+      { type: "progress-bar", value: ef13("count"), max: 100, showPercentage: true },
       {
         type: "stack",
         direction: "horizontal",
@@ -5540,34 +5650,32 @@ function buildTrait29(c) {
     type: "stack",
     direction: "vertical",
     gap: "lg",
-    align: "center",
     children: [
       {
         type: "stack",
         direction: "horizontal",
         gap: "md",
         align: "center",
+        justify: "space-between",
         children: [
-          { type: "icon", name: headerIcon, size: "lg" },
-          { type: "typography", content: pageTitle, variant: "h2" }
+          { type: "stack", direction: "horizontal", gap: "md", align: "center", children: [
+            { type: "icon", name: headerIcon, size: "lg" },
+            { type: "typography", content: pageTitle, variant: "h2" }
+          ] },
+          { type: "status-dot", status: "error", pulse: true, label: "Throttled" }
         ]
       },
       { type: "divider" },
+      { type: "alert", variant: "danger", message: "Rate limit exceeded. Requests are being throttled." },
       {
-        type: "card",
+        type: "simple-grid",
+        columns: 2,
         children: [
-          {
-            type: "stack",
-            direction: "vertical",
-            gap: "sm",
-            children: [
-              { type: "typography", content: "Requests", variant: "caption" },
-              { type: "typography", content: "@entity.count", variant: "h4" },
-              { type: "badge", label: "Throttled" }
-            ]
-          }
+          { type: "stat-display", label: "Requests", value: ef13("count") },
+          { type: "stat-display", label: "Window", value: ef13("window") }
         ]
       },
+      { type: "meter", value: ef13("count"), min: 0, max: 100 },
       {
         type: "stack",
         direction: "horizontal",
@@ -7031,6 +7139,11 @@ function stdList(params) {
   if (!existingKeys.has("CONFIRM_DELETE")) sm.events.push({ key: "CONFIRM_DELETE", name: "Confirm Delete" });
   if (!existingKeys.has("CANCEL")) sm.events.push({ key: "CANCEL", name: "Cancel" });
   if (!existingKeys.has("CLOSE")) sm.events.push({ key: "CLOSE", name: "Close" });
+  const initTransition = sm.transitions[0];
+  const initRenderEffect = initTransition.effects.find(
+    (e) => Array.isArray(e) && e[0] === "render-ui" && e[1] === "main"
+  );
+  const browseMainView = initRenderEffect ? initRenderEffect[2] : null;
   sm.transitions.push(
     // DELETE: browsing → deleting (fetch entity by ID, show confirmation modal)
     { from: "browsing", to: "deleting", event: "DELETE", effects: [
@@ -7053,15 +7166,24 @@ function stdList(params) {
         ]
       }]
     ] },
-    // CONFIRM_DELETE: deleting → browsing (persist delete using selected entity's ID)
+    // CONFIRM_DELETE: deleting → browsing (persist delete, dismiss modal, re-render main)
     { from: "deleting", to: "browsing", event: "CONFIRM_DELETE", effects: [
       ["persist", "delete", entityName, "@entity.id"],
       ["render-ui", "modal", null],
-      ["fetch", entityName]
+      ["fetch", entityName],
+      ["render-ui", "main", browseMainView]
+    ] },
+    // CANCEL/CLOSE from deleting (dismiss modal, re-render main)
+    { from: "deleting", to: "browsing", event: "CANCEL", effects: [
+      ["render-ui", "modal", null],
+      ["fetch", entityName],
+      ["render-ui", "main", browseMainView]
     ] },
-    // CANCEL/CLOSE from deleting
-    { from: "deleting", to: "browsing", event: "CANCEL", effects: [["render-ui", "modal", null]] },
-    { from: "deleting", to: "browsing", event: "CLOSE", effects: [["render-ui", "modal", null]] }
+    { from: "deleting", to: "browsing", event: "CLOSE", effects: [
+      ["render-ui", "modal", null],
+      ["fetch", entityName],
+      ["render-ui", "main", browseMainView]
+    ] }
   );
   const entity = makeEntity({ name: entityName, fields, persistence: c.persistence, collection: c.collection });
   const page = {
@@ -8005,19 +8127,19 @@ function buildBattleFlowTrait(c) {
           event: "PAUSE",
           effects: [["render-ui", "modal", pausedModalUI]]
         },
-        // RESUME: paused -> playing
+        // RESUME: paused -> playing (dismiss modal, re-render main)
         {
           from: "paused",
           to: "playing",
           event: "RESUME",
-          effects: [["render-ui", "modal", null]]
+          effects: [["render-ui", "modal", null], ["render-ui", "main", playingUI]]
         },
         // CLOSE: paused -> playing (modal exit requirement)
         {
           from: "paused",
           to: "playing",
           event: "CLOSE",
-          effects: [["render-ui", "modal", null]]
+          effects: [["render-ui", "modal", null], ["render-ui", "main", playingUI]]
         },
         // GAME_OVER: playing -> gameover
         {
@@ -8272,19 +8394,19 @@ function buildPlatformerFlowTrait(c) {
           event: "PAUSE",
           effects: [["render-ui", "modal", pausedModalUI]]
         },
-        // RESUME: paused -> playing
+        // RESUME: paused -> playing (dismiss modal, re-render main)
         {
           from: "paused",
           to: "playing",
           event: "RESUME",
-          effects: [["render-ui", "modal", null]]
+          effects: [["render-ui", "modal", null], ["render-ui", "main", playingUI]]
         },
         // CLOSE: paused -> playing (modal exit requirement)
         {
           from: "paused",
           to: "playing",
           event: "CLOSE",
-          effects: [["render-ui", "modal", null]]
+          effects: [["render-ui", "modal", null], ["render-ui", "main", playingUI]]
         },
         // GAME_OVER: playing -> gameover
         {
@@ -8524,19 +8646,19 @@ function buildPuzzleFlowTrait(c) {
           event: "PAUSE",
           effects: [["render-ui", "modal", pausedModalUI]]
         },
-        // RESUME: paused -> playing
+        // RESUME: paused -> playing (dismiss modal, re-render main)
         {
           from: "paused",
           to: "playing",
           event: "RESUME",
-          effects: [["render-ui", "modal", null]]
+          effects: [["render-ui", "modal", null], ["render-ui", "main", playingUI]]
         },
         // CLOSE: paused -> playing (modal exit requirement)
         {
           from: "paused",
           to: "playing",
           event: "CLOSE",
-          effects: [["render-ui", "modal", null]]
+          effects: [["render-ui", "modal", null], ["render-ui", "main", playingUI]]
         },
         // GAME_OVER: playing -> gameover
         {