@almadar/patterns 2.0.0 → 2.0.1

package/dist/patterns-registry.json

@@ -1,6 +1,6 @@
 {
   "version": "1.0.0",
-  "exportedAt": "2026-02-23T07:59:54.575Z",
+  "exportedAt": "2026-03-03T11:14:06.592Z",
   "patterns": {
     "entity-table": {
       "type": "entity-table",
@@ -445,7 +445,7 @@
           "types": [
             "node"
           ],
-          "description": "Children elements (cards) - optional when using entity/data props"
+          "description": "Children elements (cards) - optional when using entity prop"
         },
         "fields": {
           "types": [
@@ -490,6 +490,84 @@
       ],
       "typicalSize": "medium",
       "propsSchema": {
+        "entity": {
+          "types": [
+            "string"
+          ],
+          "description": "Entity name for schema-driven integration"
+        },
+        "data": {
+          "types": [
+            "array"
+          ],
+          "description": "Data array provided by the trait via render-ui"
+        },
+        "className": {
+          "types": [
+            "string"
+          ],
+          "description": "Additional CSS classes"
+        },
+        "isLoading": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Loading state indicator"
+        },
+        "error": {
+          "types": [
+            "object"
+          ],
+          "description": "Error state"
+        },
+        "sortBy": {
+          "types": [
+            "string"
+          ],
+          "description": "Current sort field"
+        },
+        "sortDirection": {
+          "types": [
+            "string"
+          ],
+          "description": "Current sort direction"
+        },
+        "searchValue": {
+          "types": [
+            "string"
+          ],
+          "description": "Current search query value"
+        },
+        "page": {
+          "types": [
+            "number"
+          ],
+          "description": "Current page number"
+        },
+        "pageSize": {
+          "types": [
+            "number"
+          ],
+          "description": "Number of items per page"
+        },
+        "totalCount": {
+          "types": [
+            "number"
+          ],
+          "description": "Total number of items"
+        },
+        "activeFilters": {
+          "types": [
+            "object"
+          ],
+          "description": "Active filters"
+        },
+        "selectedIds": {
+          "types": [
+            "array"
+          ],
+          "description": "Currently selected item IDs"
+        },
         "title": {
           "types": [
             "string"
@@ -550,13 +628,6 @@
           ],
           "description": "Alias for fields - backwards compatibility"
         },
-        "data": {
-          "types": [
-            "object",
-            "unknown"
-          ],
-          "description": "Data object provided by the trait via render-ui"
-        },
         "initialData": {
           "types": [
             "object",
@@ -581,6 +652,24 @@
             "string"
           ],
           "description": "Panel width (CSS value, e.g., '400px', '50%')"
+        },
+        "entityId": {
+          "types": [
+            "string"
+          ],
+          "description": "Entity ID for fetching specific entity"
+        },
+        "displayFields": {
+          "types": [
+            "unknown"
+          ],
+          "description": "Display fields (alias for fields)"
+        },
+        "showActions": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Show actions flag"
         }
       }
     },
@@ -740,7 +829,8 @@
         },
         "entity": {
           "types": [
-            "string"
+            "string",
+            "orbitalentity"
           ],
           "description": "Schema-based props"
         },
@@ -926,7 +1016,8 @@
         },
         "entity": {
           "types": [
-            "string"
+            "string",
+            "orbitalentity"
           ],
           "description": "Schema-based props"
         },
@@ -1898,6 +1989,84 @@
       ],
       "typicalSize": "small",
       "propsSchema": {
+        "entity": {
+          "types": [
+            "string"
+          ],
+          "description": "Entity name for schema-driven integration"
+        },
+        "data": {
+          "types": [
+            "array"
+          ],
+          "description": "Data array provided by the trait via render-ui"
+        },
+        "className": {
+          "types": [
+            "string"
+          ],
+          "description": "Additional CSS classes"
+        },
+        "isLoading": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Loading state indicator"
+        },
+        "error": {
+          "types": [
+            "object"
+          ],
+          "description": "Error state"
+        },
+        "sortBy": {
+          "types": [
+            "string"
+          ],
+          "description": "Current sort field"
+        },
+        "sortDirection": {
+          "types": [
+            "string"
+          ],
+          "description": "Current sort direction"
+        },
+        "searchValue": {
+          "types": [
+            "string"
+          ],
+          "description": "Current search query value"
+        },
+        "page": {
+          "types": [
+            "number"
+          ],
+          "description": "Current page number"
+        },
+        "pageSize": {
+          "types": [
+            "number"
+          ],
+          "description": "Number of items per page"
+        },
+        "totalCount": {
+          "types": [
+            "number"
+          ],
+          "description": "Total number of items"
+        },
+        "activeFilters": {
+          "types": [
+            "object"
+          ],
+          "description": "Active filters"
+        },
+        "selectedIds": {
+          "types": [
+            "array"
+          ],
+          "description": "Currently selected item IDs"
+        },
         "label": {
           "types": [
             "string"
@@ -1979,41 +2148,11 @@
           ],
           "description": "Action button"
         },
-        "className": {
-          "types": [
-            "string"
-          ],
-          "description": "className prop"
-        },
-        "entity": {
-          "types": [
-            "string"
-          ],
-          "description": "Schema-based props"
-        },
         "metrics": {
           "types": [
             "unknown"
           ],
           "description": "Metrics to display (schema format) - accepts readonly for compatibility with generated const arrays"
-        },
-        "data": {
-          "types": [
-            "unknown"
-          ],
-          "description": "Data to calculate stats from - accepts readonly for compatibility with generated const arrays"
-        },
-        "isLoading": {
-          "types": [
-            "boolean"
-          ],
-          "description": "Loading state indicator"
-        },
-        "error": {
-          "types": [
-            "error"
-          ],
-          "description": "Error state"
         }
       }
     },
@@ -6532,108 +6671,162 @@
       ],
       "typicalSize": "large",
       "propsSchema": {
-        "logo": {
+        "entity": {
           "types": [
-            "node"
+            "string"
           ],
-          "description": "Logo/Brand content - can be a ReactNode or logo config"
+          "description": "Entity name for schema-driven integration"
         },
-        "logoSrc": {
+        "data": {
           "types": [
-            "string"
+            "array"
           ],
-          "description": "Logo image source"
+          "description": "Data array provided by the trait via render-ui"
         },
-        "brandName": {
+        "className": {
           "types": [
             "string"
           ],
-          "description": "Brand/App name"
+          "description": "Additional CSS classes"
         },
-        "items": {
+        "isLoading": {
           "types": [
-            "array"
+            "boolean"
           ],
-          "description": "Navigation items",
-          "required": true
+          "description": "Loading state indicator"
         },
-        "userSection": {
+        "error": {
           "types": [
-            "node"
+            "object"
           ],
-          "description": "User section content"
+          "description": "Error state"
         },
-        "footerContent": {
+        "sortBy": {
           "types": [
-            "node"
+            "string"
           ],
-          "description": "Footer content (e.g., theme toggle)"
+          "description": "Current sort field"
         },
-        "collapsed": {
+        "sortDirection": {
           "types": [
-            "boolean"
+            "string"
           ],
-          "description": "Collapsed state (controlled)"
+          "description": "Current sort direction"
         },
-        "defaultCollapsed": {
+        "searchValue": {
           "types": [
-            "boolean"
+            "string"
           ],
-          "description": "Default collapsed state"
+          "description": "Current search query value"
         },
-        "onCollapseChange": {
+        "page": {
           "types": [
-            "function"
+            "number"
           ],
-          "description": "Callback when collapse state changes"
+          "description": "Current page number"
         },
-        "hideCollapseButton": {
+        "pageSize": {
           "types": [
-            "boolean"
+            "number"
           ],
-          "description": "Hide the collapse/expand button"
+          "description": "Number of items per page"
         },
-        "showCloseButton": {
+        "totalCount": {
           "types": [
-            "boolean"
+            "number"
           ],
-          "description": "Show a close button (for mobile)"
+          "description": "Total number of items"
         },
-        "onClose": {
+        "activeFilters": {
           "types": [
-            "function"
+            "object"
           ],
-          "description": "Callback when close button is clicked"
+          "description": "Active filters"
         },
-        "onLogoClick": {
+        "selectedIds": {
           "types": [
-            "function"
+            "array"
           ],
-          "description": "Callback when logo/brand is clicked"
+          "description": "Currently selected item IDs"
         },
-        "className": {
+        "logo": {
+          "types": [
+            "node"
+          ],
+          "description": "Logo/Brand content - can be a ReactNode or logo config"
+        },
+        "logoSrc": {
           "types": [
             "string"
           ],
-          "description": "Additional CSS classes"
+          "description": "Logo image source"
         },
-        "isLoading": {
+        "brandName": {
+          "types": [
+            "string"
+          ],
+          "description": "Brand/App name"
+        },
+        "items": {
+          "types": [
+            "array"
+          ],
+          "description": "Navigation items",
+          "required": true
+        },
+        "userSection": {
+          "types": [
+            "node"
+          ],
+          "description": "User section content"
+        },
+        "footerContent": {
+          "types": [
+            "node"
+          ],
+          "description": "Footer content (e.g., theme toggle)"
+        },
+        "collapsed": {
           "types": [
             "boolean"
           ],
-          "description": "Loading state indicator"
+          "description": "Collapsed state (controlled)"
         },
-        "error": {
+        "defaultCollapsed": {
           "types": [
-            "error"
+            "boolean"
           ],
-          "description": "Error state"
+          "description": "Default collapsed state"
         },
-        "entity": {
+        "collapseChangeEvent": {
           "types": [
             "string"
           ],
-          "description": "Entity name for schema-driven auto-fetch"
+          "description": "Event emitted when collapse state changes, payload: { collapsed: boolean }"
+        },
+        "hideCollapseButton": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Hide the collapse/expand button"
+        },
+        "showCloseButton": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Show a close button (for mobile)"
+        },
+        "closeEvent": {
+          "types": [
+            "string"
+          ],
+          "description": "Event emitted when close button is clicked"
+        },
+        "logoClickEvent": {
+          "types": [
+            "string"
+          ],
+          "description": "Event emitted when logo/brand is clicked"
         }
       }
     },
@@ -7638,59 +7831,107 @@
       ],
       "typicalSize": "medium",
       "propsSchema": {
-        "title": {
+        "entity": {
           "types": [
             "string"
           ],
-          "description": "Timeline title"
+          "description": "Entity name for schema-driven integration"
         },
-        "items": {
+        "data": {
           "types": [
-            "unknown"
+            "array"
           ],
-          "description": "Timeline items"
+          "description": "Data array provided by the trait via render-ui"
         },
-        "data": {
+        "className": {
           "types": [
-            "unknown"
+            "string"
           ],
-          "description": "Schema-driven data"
+          "description": "Additional CSS classes"
         },
-        "fields": {
+        "isLoading": {
           "types": [
-            "unknown"
+            "boolean"
           ],
-          "description": "Fields to display"
+          "description": "Loading state indicator"
         },
-        "itemActions": {
+        "error": {
           "types": [
-            "unknown"
+            "object"
           ],
-          "description": "Actions per item"
+          "description": "Error state"
         },
-        "entity": {
+        "sortBy": {
           "types": [
             "string"
           ],
-          "description": "Entity name for schema-driven auto-fetch"
+          "description": "Current sort field"
         },
-        "isLoading": {
+        "sortDirection": {
           "types": [
-            "boolean"
+            "string"
           ],
-          "description": "Loading state"
+          "description": "Current sort direction"
         },
-        "error": {
+        "searchValue": {
           "types": [
-            "error"
+            "string"
           ],
-          "description": "Error state"
+          "description": "Current search query value"
         },
-        "className": {
+        "page": {
+          "types": [
+            "number"
+          ],
+          "description": "Current page number"
+        },
+        "pageSize": {
+          "types": [
+            "number"
+          ],
+          "description": "Number of items per page"
+        },
+        "totalCount": {
+          "types": [
+            "number"
+          ],
+          "description": "Total number of items"
+        },
+        "activeFilters": {
+          "types": [
+            "object"
+          ],
+          "description": "Active filters"
+        },
+        "selectedIds": {
+          "types": [
+            "array"
+          ],
+          "description": "Currently selected item IDs"
+        },
+        "title": {
           "types": [
             "string"
           ],
-          "description": "Additional CSS classes"
+          "description": "Timeline title"
+        },
+        "items": {
+          "types": [
+            "unknown"
+          ],
+          "description": "Timeline items"
+        },
+        "fields": {
+          "types": [
+            "unknown"
+          ],
+          "description": "Fields to display"
+        },
+        "itemActions": {
+          "types": [
+            "unknown"
+          ],
+          "description": "Actions per item"
         }
       }
     },
@@ -7706,89 +7947,137 @@
       ],
       "typicalSize": "medium",
       "propsSchema": {
-        "title": {
+        "entity": {
           "types": [
             "string"
           ],
-          "description": "Gallery title"
-        },
-        "items": {
-          "types": [
-            "unknown"
-          ],
-          "description": "Media items"
+          "description": "Entity name for schema-driven integration"
         },
         "data": {
           "types": [
-            "unknown"
+            "array"
           ],
-          "description": "Schema-driven data"
+          "description": "Data array provided by the trait via render-ui"
         },
-        "columns": {
+        "className": {
           "types": [
-            "number"
+            "string"
           ],
-          "description": "Column count"
+          "description": "Additional CSS classes"
         },
-        "selectable": {
+        "isLoading": {
           "types": [
             "boolean"
           ],
-          "description": "Enable item selection"
+          "description": "Loading state indicator"
         },
-        "selectedItems": {
+        "error": {
           "types": [
-            "unknown"
+            "object"
           ],
-          "description": "Selected item IDs"
+          "description": "Error state"
         },
-        "onSelectionChange": {
+        "sortBy": {
           "types": [
-            "function"
+            "string"
           ],
-          "description": "Selection change callback"
+          "description": "Current sort field"
         },
-        "showUpload": {
+        "sortDirection": {
           "types": [
-            "boolean"
+            "string"
           ],
-          "description": "Show upload button"
+          "description": "Current sort direction"
         },
-        "actions": {
+        "searchValue": {
           "types": [
-            "unknown"
+            "string"
           ],
-          "description": "Actions"
+          "description": "Current search query value"
         },
-        "aspectRatio": {
+        "page": {
           "types": [
-            "string"
+            "number"
           ],
-          "description": "Aspect ratio for thumbnails"
+          "description": "Current page number"
         },
-        "entity": {
+        "pageSize": {
           "types": [
-            "string"
+            "number"
           ],
-          "description": "Entity name for schema-driven auto-fetch"
+          "description": "Number of items per page"
         },
-        "isLoading": {
+        "totalCount": {
           "types": [
-            "boolean"
+            "number"
           ],
-          "description": "Loading state"
+          "description": "Total number of items"
         },
-        "error": {
+        "activeFilters": {
           "types": [
-            "error"
+            "object"
           ],
-          "description": "Error state"
+          "description": "Active filters"
         },
-        "className": {
+        "selectedIds": {
+          "types": [
+            "array"
+          ],
+          "description": "Currently selected item IDs"
+        },
+        "title": {
           "types": [
             "string"
           ],
-          "description": "Additional CSS classes"
+          "description": "Gallery title"
+        },
+        "items": {
+          "types": [
+            "unknown"
+          ],
+          "description": "Media items"
+        },
+        "columns": {
+          "types": [
+            "number"
+          ],
+          "description": "Column count"
+        },
+        "selectable": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Enable item selection"
+        },
+        "selectedItems": {
+          "types": [
+            "unknown"
+          ],
+          "description": "Selected item IDs"
+        },
+        "selectionEvent": {
+          "types": [
+            "string"
+          ],
+          "description": "Event name emitted when selection changes (emitted as UI:{selectionEvent})"
+        },
+        "showUpload": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Show upload button"
+        },
+        "actions": {
+          "types": [
+            "unknown"
+          ],
+          "description": "Actions"
+        },
+        "aspectRatio": {
+          "types": [
+            "string"
+          ],
+          "description": "Aspect ratio for thumbnails"
         }
       }
     },
@@ -9173,18 +9462,6 @@
           "description": "World map entity data",
           "required": true
         },
-        "isLoading": {
-          "types": [
-            "boolean"
-          ],
-          "description": "Loading state indicator"
-        },
-        "error": {
-          "types": [
-            "error"
-          ],
-          "description": "Error state"
-        },
         "scale": {
           "types": [
             "number"
@@ -11835,9 +12112,10 @@
         },
         "fieldMap": {
           "types": [
-            "bookfieldmap"
+            "bookfieldmap",
+            "string"
           ],
-          "description": "Field name translation map for non-English entity schemas"
+          "description": "Field name translation map — a BookFieldMap object or locale key (\"ar\")"
         }
       }
     },
@@ -11867,6 +12145,999 @@
         }
       }
     },
+    "combat-log": {
+      "type": "combat-log",
+      "category": "game",
+      "description": "CombatLog Component  Scrollable log of combat events with icons and colors. Generalized from Trait Wars — removed asset manifest coupling.",
+      "suggestedFor": [
+        "combat",
+        "log",
+        "combat log"
+      ],
+      "typicalSize": "large",
+      "propsSchema": {
+        "events": {
+          "types": [
+            "array"
+          ],
+          "description": "events prop",
+          "required": true
+        },
+        "maxVisible": {
+          "types": [
+            "number"
+          ],
+          "description": "maxVisible prop"
+        },
+        "autoScroll": {
+          "types": [
+            "boolean"
+          ],
+          "description": "autoScroll prop"
+        },
+        "showTimestamps": {
+          "types": [
+            "boolean"
+          ],
+          "description": "showTimestamps prop"
+        },
+        "title": {
+          "types": [
+            "string"
+          ],
+          "description": "title prop"
+        },
+        "className": {
+          "types": [
+            "string"
+          ],
+          "description": "className prop"
+        }
+      }
+    },
+    "simulation-canvas": {
+      "type": "simulation-canvas",
+      "category": "game",
+      "description": "SimulationCanvas  Self-contained 2D physics canvas for educational presets. Runs its own Euler integration loop — no external physics hook needed.",
+      "suggestedFor": [
+        "simulation",
+        "canvas",
+        "simulation canvas"
+      ],
+      "typicalSize": "large",
+      "propsSchema": {
+        "preset": {
+          "types": [
+            "physicspreset"
+          ],
+          "description": "preset prop",
+          "required": true
+        },
+        "width": {
+          "types": [
+            "number"
+          ],
+          "description": "width prop"
+        },
+        "height": {
+          "types": [
+            "number"
+          ],
+          "description": "height prop"
+        },
+        "running": {
+          "types": [
+            "boolean"
+          ],
+          "description": "running prop",
+          "required": true
+        },
+        "speed": {
+          "types": [
+            "number"
+          ],
+          "description": "speed prop"
+        },
+        "className": {
+          "types": [
+            "string"
+          ],
+          "description": "className prop"
+        }
+      }
+    },
+    "simulation-controls": {
+      "type": "simulation-controls",
+      "category": "display",
+      "description": "SimulationControls  Play/pause/step/reset controls with speed and parameter sliders.",
+      "suggestedFor": [
+        "simulation",
+        "controls",
+        "simulation controls"
+      ],
+      "typicalSize": "large",
+      "propsSchema": {
+        "running": {
+          "types": [
+            "boolean"
+          ],
+          "description": "running prop",
+          "required": true
+        },
+        "speed": {
+          "types": [
+            "number"
+          ],
+          "description": "speed prop",
+          "required": true
+        },
+        "parameters": {
+          "types": [
+            "object"
+          ],
+          "description": "parameters prop",
+          "required": true
+        },
+        "onPlay": {
+          "types": [
+            "function"
+          ],
+          "description": "onPlay prop",
+          "required": true
+        },
+        "onPause": {
+          "types": [
+            "function"
+          ],
+          "description": "onPause prop",
+          "required": true
+        },
+        "onStep": {
+          "types": [
+            "function"
+          ],
+          "description": "onStep prop",
+          "required": true
+        },
+        "onReset": {
+          "types": [
+            "function"
+          ],
+          "description": "onReset prop",
+          "required": true
+        },
+        "onSpeedChange": {
+          "types": [
+            "function"
+          ],
+          "description": "onSpeedChange prop",
+          "required": true
+        },
+        "onParameterChange": {
+          "types": [
+            "function"
+          ],
+          "description": "onParameterChange prop",
+          "required": true
+        },
+        "className": {
+          "types": [
+            "string"
+          ],
+          "description": "className prop"
+        }
+      }
+    },
+    "simulation-graph": {
+      "type": "simulation-graph",
+      "category": "display",
+      "description": "SimulationGraph  Real-time measurement graph for physics simulations. Renders measurement data as a simple line chart on canvas.",
+      "suggestedFor": [
+        "simulation",
+        "graph",
+        "simulation graph"
+      ],
+      "typicalSize": "large",
+      "propsSchema": {
+        "label": {
+          "types": [
+            "string"
+          ],
+          "description": "label prop",
+          "required": true
+        },
+        "unit": {
+          "types": [
+            "string"
+          ],
+          "description": "unit prop",
+          "required": true
+        },
+        "data": {
+          "types": [
+            "array"
+          ],
+          "description": "data prop",
+          "required": true
+        },
+        "maxPoints": {
+          "types": [
+            "number"
+          ],
+          "description": "maxPoints prop"
+        },
+        "width": {
+          "types": [
+            "number"
+          ],
+          "description": "width prop"
+        },
+        "height": {
+          "types": [
+            "number"
+          ],
+          "description": "height prop"
+        },
+        "color": {
+          "types": [
+            "string"
+          ],
+          "description": "color prop"
+        },
+        "className": {
+          "types": [
+            "string"
+          ],
+          "description": "className prop"
+        }
+      }
+    },
+    "builder-board": {
+      "type": "builder-board",
+      "category": "game",
+      "description": "BuilderBoard  Component-snapping game board. The player places components onto slots in a blueprint. Correct placement completes the build.  Good for: architecture, circuits, molecules, system design stories.  Events emitted via completeEvent (default UI:PUZZLE_COMPLETE).",
+      "suggestedFor": [
+        "builder",
+        "board",
+        "builder board"
+      ],
+      "typicalSize": "large",
+      "propsSchema": {
+        "entity": {
+          "types": [
+            "builderpuzzleentity"
+          ],
+          "description": "entity prop",
+          "required": true
+        },
+        "completeEvent": {
+          "types": [
+            "string"
+          ],
+          "description": "completeEvent prop"
+        }
+      }
+    },
+    "classifier-board": {
+      "type": "classifier-board",
+      "category": "game",
+      "description": "ClassifierBoard  Drag-and-drop classification game. The player sorts items into the correct category buckets. All items must be correctly classified to win.  Good for: taxonomy, pattern recognition, sorting stories.  Events emitted via completeEvent (default UI:PUZZLE_COMPLETE).",
+      "suggestedFor": [
+        "classifier",
+        "board",
+        "classifier board"
+      ],
+      "typicalSize": "large",
+      "propsSchema": {
+        "entity": {
+          "types": [
+            "classifierpuzzleentity"
+          ],
+          "description": "entity prop",
+          "required": true
+        },
+        "completeEvent": {
+          "types": [
+            "string"
+          ],
+          "description": "completeEvent prop"
+        }
+      }
+    },
+    "debugger-board": {
+      "type": "debugger-board",
+      "category": "game",
+      "description": "DebuggerBoard  Error-finding game board. The player reviews a code/system listing and identifies lines or elements that contain bugs.  Good for: programming, logic, troubleshooting stories.  Events emitted via completeEvent (default UI:PUZZLE_COMPLETE).",
+      "suggestedFor": [
+        "debugger",
+        "board",
+        "debugger board"
+      ],
+      "typicalSize": "large",
+      "propsSchema": {
+        "entity": {
+          "types": [
+            "debuggerpuzzleentity"
+          ],
+          "description": "entity prop",
+          "required": true
+        },
+        "completeEvent": {
+          "types": [
+            "string"
+          ],
+          "description": "completeEvent prop"
+        }
+      }
+    },
+    "event-handler-board": {
+      "type": "event-handler-board",
+      "category": "game",
+      "description": "EventHandlerBoard Organism  Contains ALL game logic for the Event Handler tier (ages 9-12). Kids click on world objects, set WHEN/THEN rules, and watch event chains cascade during playback.  Encourages experimentation: on failure, resets to editing so the kid can try different rules. After 3 failures, shows a progressive hint.",
+      "suggestedFor": [
+        "event",
+        "handler",
+        "board",
+        "event handler board"
+      ],
+      "typicalSize": "large",
+      "propsSchema": {
+        "entity": {
+          "types": [
+            "eventhandlerpuzzleentity"
+          ],
+          "description": "Puzzle data",
+          "required": true
+        },
+        "stepDurationMs": {
+          "types": [
+            "number"
+          ],
+          "description": "Playback speed in ms per event"
+        },
+        "playEvent": {
+          "types": [
+            "string"
+          ],
+          "description": "Emits UI:{playEvent}"
+        },
+        "completeEvent": {
+          "types": [
+            "string"
+          ],
+          "description": "Emits UI:{completeEvent} with { success }"
+        }
+      }
+    },
+    "event-log": {
+      "type": "event-log",
+      "category": "display",
+      "description": "EventLog Component  Scrolling log of events during playback in the Event Handler tier. Shows the chain reaction as events cascade through objects.",
+      "suggestedFor": [
+        "event",
+        "log",
+        "event log"
+      ],
+      "typicalSize": "large",
+      "propsSchema": {
+        "entries": {
+          "types": [
+            "array"
+          ],
+          "description": "Log entries",
+          "required": true
+        },
+        "maxHeight": {
+          "types": [
+            "number"
+          ],
+          "description": "Max visible height before scroll"
+        },
+        "label": {
+          "types": [
+            "string"
+          ],
+          "description": "Title label"
+        },
+        "className": {
+          "types": [
+            "string"
+          ],
+          "description": "Additional CSS classes"
+        }
+      }
+    },
+    "object-rule-panel": {
+      "type": "object-rule-panel",
+      "category": "display",
+      "description": "ObjectRulePanel Component  Shows the rules panel for a selected world object in the Event Handler tier. Displays object info, its current state (via TraitStateViewer), and a list of WHEN/THEN rules the kid has set.",
+      "suggestedFor": [
+        "object",
+        "rule",
+        "panel",
+        "object rule panel"
+      ],
+      "typicalSize": "large",
+      "propsSchema": {
+        "object": {
+          "types": [
+            "puzzleobjectdef"
+          ],
+          "description": "The selected object",
+          "required": true
+        },
+        "onRulesChange": {
+          "types": [
+            "function"
+          ],
+          "description": "Called when rules change",
+          "required": true
+        },
+        "disabled": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Whether editing is disabled"
+        },
+        "className": {
+          "types": [
+            "string"
+          ],
+          "description": "Additional CSS classes"
+        }
+      }
+    },
+    "rule-editor": {
+      "type": "rule-editor",
+      "category": "display",
+      "description": "RuleEditor Component  A single WHEN/THEN rule row for the Event Handler tier (ages 9-12). Kid picks an event trigger and an action from dropdowns.",
+      "suggestedFor": [
+        "rule",
+        "editor",
+        "rule editor"
+      ],
+      "typicalSize": "large",
+      "propsSchema": {
+        "rule": {
+          "types": [
+            "ruledefinition"
+          ],
+          "description": "The current rule",
+          "required": true
+        },
+        "availableEvents": {
+          "types": [
+            "array"
+          ],
+          "description": "Available event triggers to listen for",
+          "required": true
+        },
+        "availableActions": {
+          "types": [
+            "array"
+          ],
+          "description": "Available actions to perform",
+          "required": true
+        },
+        "onChange": {
+          "types": [
+            "function"
+          ],
+          "description": "Called when rule changes",
+          "required": true
+        },
+        "onRemove": {
+          "types": [
+            "function"
+          ],
+          "description": "Called when rule is removed"
+        },
+        "disabled": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Whether editing is disabled (during playback)"
+        },
+        "className": {
+          "types": [
+            "string"
+          ],
+          "description": "Additional CSS classes"
+        }
+      }
+    },
+    "negotiator-board": {
+      "type": "negotiator-board",
+      "category": "game",
+      "description": "NegotiatorBoard  Turn-based decision matrix game. The player makes choices over multiple rounds against an AI opponent. Each round both sides pick an action, and payoffs are determined by the combination.  Good for: ethics, business, game theory, economics stories.  Events emitted via completeEvent (default UI:PUZZLE_COMPLETE).",
+      "suggestedFor": [
+        "negotiator",
+        "board",
+        "negotiator board"
+      ],
+      "typicalSize": "large",
+      "propsSchema": {
+        "entity": {
+          "types": [
+            "negotiatorpuzzleentity"
+          ],
+          "description": "entity prop",
+          "required": true
+        },
+        "completeEvent": {
+          "types": [
+            "string"
+          ],
+          "description": "completeEvent prop"
+        }
+      }
+    },
+    "action-palette": {
+      "type": "action-palette",
+      "category": "display",
+      "description": "ActionPalette Component  Grid of draggable ActionTile components for the Sequencer tier. Kids pick from these to build their sequence.",
+      "suggestedFor": [
+        "action",
+        "palette",
+        "action palette"
+      ],
+      "typicalSize": "large",
+      "propsSchema": {
+        "actions": {
+          "types": [
+            "array"
+          ],
+          "description": "Available actions",
+          "required": true
+        },
+        "usedActionIds": {
+          "types": [
+            "array"
+          ],
+          "description": "IDs of actions that are already used (shown as disabled)"
+        },
+        "allowDuplicates": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Whether each action can be used multiple times"
+        },
+        "categoryColors": {
+          "types": [
+            "object"
+          ],
+          "description": "Category → color mapping"
+        },
+        "size": {
+          "types": [
+            "string"
+          ],
+          "description": "Size variant"
+        },
+        "label": {
+          "types": [
+            "string"
+          ],
+          "description": "Label above the palette"
+        },
+        "className": {
+          "types": [
+            "string"
+          ],
+          "description": "Additional CSS classes"
+        }
+      }
+    },
+    "action-tile": {
+      "type": "action-tile",
+      "category": "game",
+      "description": "ActionTile Component  A draggable action tile for the Sequencer tier (ages 5-8). Kids drag these from the ActionPalette into SequenceBar slots. Sets SlotItemData on dataTransfer for TraitSlot compatibility.",
+      "suggestedFor": [
+        "action",
+        "tile",
+        "action tile"
+      ],
+      "typicalSize": "large",
+      "propsSchema": {
+        "action": {
+          "types": [
+            "slotitemdata"
+          ],
+          "description": "The action data",
+          "required": true
+        },
+        "size": {
+          "types": [
+            "string"
+          ],
+          "description": "Size variant"
+        },
+        "disabled": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Whether the tile is disabled / already used"
+        },
+        "categoryColors": {
+          "types": [
+            "object"
+          ],
+          "description": "Category → color mapping"
+        }
+      }
+    },
+    "sequence-bar": {
+      "type": "sequence-bar",
+      "category": "display",
+      "description": "SequenceBar Component  A row of TraitSlot components forming the action sequence for the Sequencer tier (ages 5-8). Kids drag ActionTiles from the palette into these slots to build their sequence.",
+      "suggestedFor": [
+        "sequence",
+        "bar",
+        "sequence bar"
+      ],
+      "typicalSize": "large",
+      "propsSchema": {
+        "slots": {
+          "types": [
+            "array"
+          ],
+          "description": "The current sequence (sparse — undefined means empty slot)",
+          "required": true
+        },
+        "maxSlots": {
+          "types": [
+            "number"
+          ],
+          "description": "Max number of slots",
+          "required": true
+        },
+        "onSlotDrop": {
+          "types": [
+            "function"
+          ],
+          "description": "Called when an item is dropped into slot at index",
+          "required": true
+        },
+        "onSlotRemove": {
+          "types": [
+            "function"
+          ],
+          "description": "Called when a slot is cleared",
+          "required": true
+        },
+        "playing": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Whether the sequence is currently playing (disable interaction)"
+        },
+        "currentStep": {
+          "types": [
+            "number"
+          ],
+          "description": "Current step index during playback (-1 = not playing)"
+        },
+        "categoryColors": {
+          "types": [
+            "object"
+          ],
+          "description": "Category → color mapping"
+        },
+        "slotFeedback": {
+          "types": [
+            "array"
+          ],
+          "description": "Per-slot correctness feedback shown after a failed attempt"
+        },
+        "size": {
+          "types": [
+            "string"
+          ],
+          "description": "Size variant"
+        },
+        "className": {
+          "types": [
+            "string"
+          ],
+          "description": "Additional CSS classes"
+        }
+      }
+    },
+    "sequencer-board": {
+      "type": "sequencer-board",
+      "category": "game",
+      "description": "SequencerBoard Organism  Contains ALL game logic for the Sequencer tier (ages 5-8). Manages the action sequence, validates it, and animates Kekec executing each step on the puzzle scene.  Feedback-first UX: - On failure: slots stay in place, each slot gets a green or red ring showing exactly which steps are correct and which need to change. - Modifying a slot clears its individual feedback so the kid can re-try. - After 3 failures a persistent hint appears above the sequence bar. - \"Reset\" clears everything including attempts / hint.  TraitStateViewer states use indexed labels (\"1. Walk\", \"2. Jump\") so that repeated actions are correctly highlighted during playback.",
+      "suggestedFor": [
+        "sequencer",
+        "board",
+        "sequencer board"
+      ],
+      "typicalSize": "large",
+      "propsSchema": {
+        "entity": {
+          "types": [
+            "sequencerpuzzleentity"
+          ],
+          "description": "Puzzle data",
+          "required": true
+        },
+        "categoryColors": {
+          "types": [
+            "object"
+          ],
+          "description": "Category → color mapping"
+        },
+        "stepDurationMs": {
+          "types": [
+            "number"
+          ],
+          "description": "Playback speed in ms per step"
+        },
+        "playEvent": {
+          "types": [
+            "string"
+          ],
+          "description": "Emits UI:{playEvent} with { sequence: string[] }"
+        },
+        "completeEvent": {
+          "types": [
+            "string"
+          ],
+          "description": "Emits UI:{completeEvent} with { success: boolean }"
+        }
+      }
+    },
+    "simulator-board": {
+      "type": "simulator-board",
+      "category": "game",
+      "description": "SimulatorBoard  Parameter-slider game board. The player adjusts parameters and observes real-time output. Correct parameter values must bring the output within a target range to win.  Good for: physics, economics, system design stories.  Events emitted via completeEvent (default UI:PUZZLE_COMPLETE).",
+      "suggestedFor": [
+        "simulator",
+        "board",
+        "simulator board"
+      ],
+      "typicalSize": "large",
+      "propsSchema": {
+        "entity": {
+          "types": [
+            "simulatorpuzzleentity"
+          ],
+          "description": "entity prop",
+          "required": true
+        },
+        "completeEvent": {
+          "types": [
+            "string"
+          ],
+          "description": "completeEvent prop"
+        }
+      }
+    },
+    "code-view": {
+      "type": "code-view",
+      "category": "display",
+      "description": "CodeView Component  Shows the JSON code representation of a state machine. Toggle between visual and code view in State Architect tier.",
+      "suggestedFor": [
+        "code",
+        "view",
+        "code view"
+      ],
+      "typicalSize": "large",
+      "propsSchema": {
+        "data": {
+          "types": [
+            "object"
+          ],
+          "description": "JSON data to display",
+          "required": true
+        },
+        "label": {
+          "types": [
+            "string"
+          ],
+          "description": "Label"
+        },
+        "defaultExpanded": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Whether the code is expanded by default"
+        },
+        "className": {
+          "types": [
+            "string"
+          ],
+          "description": "Additional CSS classes"
+        }
+      }
+    },
+    "state-architect-board": {
+      "type": "state-architect-board",
+      "category": "display",
+      "description": "StateArchitectBoard Organism  Contains ALL game logic for the State Architect tier (ages 13+). Kids design state machines via a visual graph editor, then run them to see if the behavior matches the puzzle goal.",
+      "suggestedFor": [
+        "state",
+        "architect",
+        "board",
+        "state architect board"
+      ],
+      "typicalSize": "large",
+      "propsSchema": {
+        "entity": {
+          "types": [
+            "statearchitectpuzzleentity"
+          ],
+          "description": "Puzzle data",
+          "required": true
+        },
+        "stepDurationMs": {
+          "types": [
+            "number"
+          ],
+          "description": "Playback speed"
+        },
+        "testEvent": {
+          "types": [
+            "string"
+          ],
+          "description": "Emits UI:{testEvent}"
+        },
+        "completeEvent": {
+          "types": [
+            "string"
+          ],
+          "description": "Emits UI:{completeEvent} with { success, passedTests }"
+        }
+      }
+    },
+    "state-node": {
+      "type": "state-node",
+      "category": "display",
+      "description": "StateNode Component  A draggable state circle for the graph editor in the State Architect tier (ages 13+). Shows state name, highlights when current, and supports click to select.",
+      "suggestedFor": [
+        "state",
+        "node",
+        "state node"
+      ],
+      "typicalSize": "large",
+      "propsSchema": {
+        "name": {
+          "types": [
+            "string"
+          ],
+          "description": "State name",
+          "required": true
+        },
+        "isCurrent": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Whether this is the current active state"
+        },
+        "isSelected": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Whether this node is selected for editing"
+        },
+        "isInitial": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Whether this is the initial state"
+        },
+        "position": {
+          "types": [
+            "object"
+          ],
+          "description": "Position on the graph canvas",
+          "required": true
+        },
+        "onClick": {
+          "types": [
+            "function"
+          ],
+          "description": "Click handler"
+        },
+        "className": {
+          "types": [
+            "string"
+          ],
+          "description": "Additional CSS classes"
+        }
+      }
+    },
+    "transition-arrow": {
+      "type": "transition-arrow",
+      "category": "display",
+      "description": "TransitionArrow Component  An SVG arrow connecting two state nodes in the graph editor. Shows the event name as a label on the arrow.",
+      "suggestedFor": [
+        "transition",
+        "arrow",
+        "transition arrow"
+      ],
+      "typicalSize": "large",
+      "propsSchema": {
+        "from": {
+          "types": [
+            "object"
+          ],
+          "description": "Start position (center of from-node)",
+          "required": true
+        },
+        "to": {
+          "types": [
+            "object"
+          ],
+          "description": "End position (center of to-node)",
+          "required": true
+        },
+        "eventLabel": {
+          "types": [
+            "string"
+          ],
+          "description": "Event label shown on the arrow",
+          "required": true
+        },
+        "guardHint": {
+          "types": [
+            "string"
+          ],
+          "description": "Guard hint shown below event"
+        },
+        "isActive": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Whether this transition is currently active"
+        },
+        "onClick": {
+          "types": [
+            "function"
+          ],
+          "description": "Click handler"
+        },
+        "className": {
+          "types": [
+            "string"
+          ],
+          "description": "Additional CSS classes for the SVG group"
+        }
+      }
+    },
+    "variable-panel": {
+      "type": "variable-panel",
+      "category": "display",
+      "description": "VariablePanel Component  Shows entity variables and their current values during State Architect playback.",
+      "suggestedFor": [
+        "variable",
+        "panel",
+        "variable panel"
+      ],
+      "typicalSize": "large",
+      "propsSchema": {
+        "entityName": {
+          "types": [
+            "string"
+          ],
+          "description": "Entity name",
+          "required": true
+        },
+        "variables": {
+          "types": [
+            "array"
+          ],
+          "description": "Variables to display",
+          "required": true
+        },
+        "className": {
+          "types": [
+            "string"
+          ],
+          "description": "Additional CSS classes"
+        }
+      }
+    },
     "heading": {
       "type": "heading",
       "category": "component",