@almadar/patterns 2.3.0 → 2.6.0

package/dist/registry.json

@@ -1,6 +1,6 @@
 {
   "version": "1.0.0",
-  "exportedAt": "2026-03-09T08:08:00.655Z",
+  "exportedAt": "2026-03-11T04:10:55.563Z",
   "patterns": {
     "entity-table": {
       "type": "entity-table",
@@ -2158,9 +2158,10 @@
         },
         "icon": {
           "types": [
-            "icon"
+            "icon",
+            "string"
           ],
-          "description": "Icon to display"
+          "description": "Icon to display (Lucide component or icon name string)"
         },
         "iconBg": {
           "types": [
@@ -2197,6 +2198,12 @@
             "boolean"
           ],
           "description": "Compact display mode"
+        },
+        "sparklineData": {
+          "types": [
+            "unknown"
+          ],
+          "description": "Sparkline data points for an inline trend chart"
         }
       }
     },
@@ -2386,6 +2393,12 @@
             "string"
           ],
           "description": "Declarative close event — emits UI:{closeEvent} via eventBus when modal should close"
+        },
+        "swipeDownToClose": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Enable swipe-down-to-close on mobile bottom sheet (default: true)"
         }
       }
     },
@@ -3520,6 +3533,12 @@
             "string"
           ],
           "description": "Badge label text (alternative to children for schema-driven rendering)"
+        },
+        "icon": {
+          "types": [
+            "node"
+          ],
+          "description": "Icon name (Lucide icon string) or React node"
         }
       }
     },
@@ -3752,6 +3771,18 @@
             "number"
           ],
           "description": "Maximum level"
+        },
+        "longPressEvent": {
+          "types": [
+            "string"
+          ],
+          "description": "Event emitted on long press: UI:{longPressEvent}"
+        },
+        "longPressPayload": {
+          "types": [
+            "object"
+          ],
+          "description": "Additional payload for long-press events"
         }
       }
     },
@@ -4854,6 +4885,12 @@
             "object"
           ],
           "description": "Payload to include with the action event"
+        },
+        "responsive": {
+          "types": [
+            "boolean"
+          ],
+          "description": "When true, horizontal stacks flip to vertical below the md breakpoint (768px)"
         }
       }
     },
@@ -8486,7 +8523,7 @@
     },
     "graph-canvas": {
       "type": "graph-canvas",
-      "category": "visualization",
+      "category": "game",
       "description": "Force-directed graph visualization for node-link data with interactive zoom, pan, and layout",
       "suggestedFor": [
         "knowledge graphs",
@@ -8822,18 +8859,6 @@
       ],
       "typicalSize": "large",
       "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"
@@ -8848,63 +8873,15 @@
         },
         "error": {
           "types": [
-            "object"
+            "error"
           ],
           "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"
-        },
         "tiles": {
           "types": [
             "array"
           ],
-          "description": "EntityDisplayProps provides: className, isLoading, error, entity,"
+          "description": "--- Grid data ---"
         },
         "units": {
           "types": [
@@ -8952,19 +8929,19 @@
           "types": [
             "function"
           ],
-          "description": "eslint-disable-next-line almadar/organism-no-callback-props"
+          "description": "onUnitClick prop"
         },
         "onTileHover": {
           "types": [
             "function"
           ],
-          "description": "eslint-disable-next-line almadar/organism-no-callback-props"
+          "description": "onTileHover prop"
         },
         "onTileLeave": {
           "types": [
             "function"
           ],
-          "description": "eslint-disable-next-line almadar/organism-no-callback-props"
+          "description": "onTileLeave prop"
         },
         "tileClickEvent": {
           "types": [
@@ -12611,6 +12588,7 @@
       "propsSchema": {
         "preset": {
           "types": [
+            "string",
             "physicspreset"
           ],
           "description": "preset prop",
@@ -13715,6 +13693,30 @@
             "string"
           ],
           "description": "Additional CSS classes"
+        },
+        "longPressEvent": {
+          "types": [
+            "string"
+          ],
+          "description": "Event emitted on long-press of a time slot: UI:{longPressEvent} with { date, time }"
+        },
+        "longPressPayload": {
+          "types": [
+            "object"
+          ],
+          "description": "Additional payload for long-press events"
+        },
+        "swipeLeftEvent": {
+          "types": [
+            "string"
+          ],
+          "description": "Event emitted on swipe left (next week): UI:{swipeLeftEvent}"
+        },
+        "swipeRightEvent": {
+          "types": [
+            "string"
+          ],
+          "description": "Event emitted on swipe right (prev week): UI:{swipeRightEvent}"
         }
       }
     },
@@ -14103,6 +14105,48 @@
             "string"
           ],
           "description": "Entity field name containing an image URL for card thumbnails"
+        },
+        "selectable": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Enable multi-select with checkboxes"
+        },
+        "selectionEvent": {
+          "types": [
+            "string"
+          ],
+          "description": "Selection change event name (emits UI:{selectionEvent} with { selectedIds: string[] })"
+        },
+        "infiniteScroll": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Enable infinite scroll loading"
+        },
+        "loadMoreEvent": {
+          "types": [
+            "string"
+          ],
+          "description": "Event emitted when more items needed: UI:{loadMoreEvent}"
+        },
+        "hasMore": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Whether more items are available for infinite scroll"
+        },
+        "children": {
+          "types": [
+            "function"
+          ],
+          "description": "Render prop for custom per-item content. When provided, `fields` and `itemActions` are ignored."
+        },
+        "pageSize": {
+          "types": [
+            "number"
+          ],
+          "description": "Max items to show before \"Show More\" button. Defaults to 0 (disabled)."
         }
       }
     },
@@ -14153,6 +14197,24 @@
           ],
           "description": "Visual variant"
         },
+        "groupBy": {
+          "types": [
+            "string"
+          ],
+          "description": "Group items by a field value (renders section headers between groups)"
+        },
+        "senderField": {
+          "types": [
+            "string"
+          ],
+          "description": "Field name identifying the sender (used with variant: \"message\")"
+        },
+        "currentUser": {
+          "types": [
+            "string"
+          ],
+          "description": "Current user identifier; messages matching this value align right (used with variant: \"message\")"
+        },
         "className": {
           "types": [
             "string"
@@ -14170,6 +14232,2433 @@
             "error"
           ],
           "description": "Error state"
+        },
+        "reorderable": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Enable drag-to-reorder with grip handles"
+        },
+        "reorderEvent": {
+          "types": [
+            "string"
+          ],
+          "description": "Event emitted on reorder: UI:{reorderEvent} with { fromIndex, toIndex }"
+        },
+        "swipeLeftEvent": {
+          "types": [
+            "string"
+          ],
+          "description": "Event emitted on left swipe: UI:{swipeLeftEvent} with { row }"
+        },
+        "swipeLeftActions": {
+          "types": [
+            "unknown"
+          ],
+          "description": "Actions revealed on left swipe"
+        },
+        "swipeRightEvent": {
+          "types": [
+            "string"
+          ],
+          "description": "Event emitted on right swipe: UI:{swipeRightEvent} with { row }"
+        },
+        "swipeRightActions": {
+          "types": [
+            "unknown"
+          ],
+          "description": "Actions revealed on right swipe"
+        },
+        "longPressEvent": {
+          "types": [
+            "string"
+          ],
+          "description": "Event emitted on long press: UI:{longPressEvent} with { row }"
+        },
+        "infiniteScroll": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Enable infinite scroll loading"
+        },
+        "loadMoreEvent": {
+          "types": [
+            "string"
+          ],
+          "description": "Event emitted when more items needed: UI:{loadMoreEvent}"
+        },
+        "hasMore": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Whether more items are available for infinite scroll"
+        },
+        "children": {
+          "types": [
+            "function"
+          ],
+          "description": "Render prop for custom per-item content. When provided, `fields` and `itemActions` are ignored."
+        },
+        "pageSize": {
+          "types": [
+            "number"
+          ],
+          "description": "Max items to show before \"Show More\" button. Defaults to 5. Set to 0 to disable."
+        }
+      }
+    },
+    "platformer-canvas": {
+      "type": "platformer-canvas",
+      "category": "game",
+      "description": "PlatformerCanvas component",
+      "suggestedFor": [
+        "platformer",
+        "canvas",
+        "platformer canvas"
+      ],
+      "typicalSize": "large",
+      "propsSchema": {
+        "player": {
+          "types": [
+            "platformerplayer"
+          ],
+          "description": "Player state data"
+        },
+        "platforms": {
+          "types": [
+            "unknown"
+          ],
+          "description": "Static platforms / level geometry"
+        },
+        "worldWidth": {
+          "types": [
+            "number"
+          ],
+          "description": "World dimensions"
+        },
+        "worldHeight": {
+          "types": [
+            "number"
+          ],
+          "description": "worldHeight prop"
+        },
+        "canvasWidth": {
+          "types": [
+            "number"
+          ],
+          "description": "Canvas display size"
+        },
+        "canvasHeight": {
+          "types": [
+            "number"
+          ],
+          "description": "canvasHeight prop"
+        },
+        "followCamera": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Camera follows player"
+        },
+        "bgColor": {
+          "types": [
+            "string"
+          ],
+          "description": "Background color"
+        },
+        "playerSprite": {
+          "types": [
+            "string"
+          ],
+          "description": "Player sprite image URL"
+        },
+        "tileSprites": {
+          "types": [
+            "object"
+          ],
+          "description": "Map of platform type to tile sprite URL"
+        },
+        "backgroundImage": {
+          "types": [
+            "string"
+          ],
+          "description": "Background image URL"
+        },
+        "assetBaseUrl": {
+          "types": [
+            "string"
+          ],
+          "description": "Base URL prefix for asset URLs"
+        },
+        "leftEvent": {
+          "types": [
+            "string"
+          ],
+          "description": "Event names for keyboard controls"
+        },
+        "rightEvent": {
+          "types": [
+            "string"
+          ],
+          "description": "rightEvent prop"
+        },
+        "jumpEvent": {
+          "types": [
+            "string"
+          ],
+          "description": "jumpEvent prop"
+        },
+        "stopEvent": {
+          "types": [
+            "string"
+          ],
+          "description": "stopEvent prop"
+        },
+        "className": {
+          "types": [
+            "string"
+          ],
+          "description": "Additional CSS classes"
+        }
+      }
+    },
+    "map-view": {
+      "type": "map-view",
+      "category": "component",
+      "description": "MapView component",
+      "suggestedFor": [
+        "map",
+        "view",
+        "map view"
+      ],
+      "typicalSize": "medium",
+      "propsSchema": {
+        "markers": {
+          "types": [
+            "array"
+          ],
+          "description": "Array of markers to display"
+        },
+        "centerLat": {
+          "types": [
+            "number"
+          ],
+          "description": "Map center latitude"
+        },
+        "centerLng": {
+          "types": [
+            "number"
+          ],
+          "description": "Map center longitude"
+        },
+        "zoom": {
+          "types": [
+            "number"
+          ],
+          "description": "Zoom level (1-18, default 13)"
+        },
+        "height": {
+          "types": [
+            "string"
+          ],
+          "description": "Height of the map container (default \"400px\")"
+        },
+        "onMarkerClick": {
+          "types": [
+            "function"
+          ],
+          "description": "Callback when a marker is clicked (programmatic use)"
+        },
+        "onMapClick": {
+          "types": [
+            "function"
+          ],
+          "description": "Callback when the map is clicked (programmatic use)"
+        },
+        "mapClickEvent": {
+          "types": [
+            "string"
+          ],
+          "description": "Event name dispatched via event bus when the map is clicked. Payload: { latitude, longitude }"
+        },
+        "markerClickEvent": {
+          "types": [
+            "string"
+          ],
+          "description": "Event name dispatched via event bus when a marker is clicked. Payload: marker data"
+        },
+        "showClickedPin": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Whether to show a pin at the clicked location"
+        },
+        "className": {
+          "types": [
+            "string"
+          ],
+          "description": "Additional CSS classes"
+        },
+        "showAttribution": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Show attribution (default true)"
+        }
+      }
+    },
+    "range-slider": {
+      "type": "range-slider",
+      "category": "component",
+      "description": "RangeSlider component",
+      "suggestedFor": [
+        "range",
+        "slider",
+        "range slider"
+      ],
+      "typicalSize": "small",
+      "propsSchema": {
+        "min": {
+          "types": [
+            "number"
+          ],
+          "description": "Minimum value"
+        },
+        "max": {
+          "types": [
+            "number"
+          ],
+          "description": "Maximum value"
+        },
+        "value": {
+          "types": [
+            "number"
+          ],
+          "description": "Current value"
+        },
+        "step": {
+          "types": [
+            "number"
+          ],
+          "description": "Step increment"
+        },
+        "showTooltip": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Show tooltip with current value on drag"
+        },
+        "showTicks": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Show tick marks at step intervals"
+        },
+        "buffered": {
+          "types": [
+            "number"
+          ],
+          "description": "Buffered range (0-100), for media seek bars"
+        },
+        "size": {
+          "types": [
+            "rangeslidersize"
+          ],
+          "description": "Slider size"
+        },
+        "disabled": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Disabled state"
+        },
+        "action": {
+          "types": [
+            "string"
+          ],
+          "description": "Declarative event name for value changes"
+        },
+        "actionPayload": {
+          "types": [
+            "object"
+          ],
+          "description": "Payload to include with the action event"
+        },
+        "onChange": {
+          "types": [
+            "function"
+          ],
+          "description": "Direct onChange callback"
+        },
+        "formatValue": {
+          "types": [
+            "function"
+          ],
+          "description": "Format function for tooltip display"
+        }
+      }
+    },
+    "status-dot": {
+      "type": "status-dot",
+      "category": "display",
+      "description": "StatusDot component",
+      "suggestedFor": [
+        "status",
+        "dot",
+        "status dot"
+      ],
+      "typicalSize": "small",
+      "propsSchema": {
+        "status": {
+          "types": [
+            "statusdotstatus"
+          ],
+          "description": "Status determines the dot color"
+        },
+        "pulse": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Enable pulse animation for active/critical states"
+        },
+        "size": {
+          "types": [
+            "statusdotsize"
+          ],
+          "description": "Dot size"
+        },
+        "label": {
+          "types": [
+            "string"
+          ],
+          "description": "Accessible label (rendered as sr-only text)"
+        }
+      }
+    },
+    "trend-indicator": {
+      "type": "trend-indicator",
+      "category": "component",
+      "description": "TrendIndicator component",
+      "suggestedFor": [
+        "trend",
+        "indicator",
+        "trend indicator"
+      ],
+      "typicalSize": "small",
+      "propsSchema": {
+        "value": {
+          "types": [
+            "number"
+          ],
+          "description": "Numeric value to display (e.g., 12.5 for +12.5%)"
+        },
+        "direction": {
+          "types": [
+            "trenddirection"
+          ],
+          "description": "Override automatic direction detection (positive=up, negative=down, zero=flat)"
+        },
+        "showValue": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Show the formatted value text next to the arrow"
+        },
+        "invert": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Invert color logic (for metrics where down is good, e.g., error rate, bounce rate)"
+        },
+        "label": {
+          "types": [
+            "string"
+          ],
+          "description": "Accessible label override"
+        },
+        "size": {
+          "types": [
+            "trendindicatorsize"
+          ],
+          "description": "Size of the indicator"
+        }
+      }
+    },
+    "lightbox": {
+      "type": "lightbox",
+      "category": "component",
+      "description": "Lightbox component",
+      "suggestedFor": [
+        "lightbox"
+      ],
+      "typicalSize": "medium",
+      "propsSchema": {
+        "images": {
+          "types": [
+            "array"
+          ],
+          "description": "Array of images to display",
+          "required": true
+        },
+        "currentIndex": {
+          "types": [
+            "number"
+          ],
+          "description": "Current image index"
+        },
+        "isOpen": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Whether the lightbox is open"
+        },
+        "showCounter": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Show image counter (e.g., \"3 of 12\")"
+        },
+        "closeAction": {
+          "types": [
+            "string"
+          ],
+          "description": "Declarative close event name"
+        },
+        "onClose": {
+          "types": [
+            "function"
+          ],
+          "description": "Direct onClose callback"
+        },
+        "onIndexChange": {
+          "types": [
+            "function"
+          ],
+          "description": "Direct onIndexChange callback"
+        },
+        "className": {
+          "types": [
+            "string"
+          ],
+          "description": "Additional CSS classes"
+        }
+      }
+    },
+    "number-stepper": {
+      "type": "number-stepper",
+      "category": "component",
+      "description": "NumberStepper component",
+      "suggestedFor": [
+        "number",
+        "stepper",
+        "number stepper"
+      ],
+      "typicalSize": "medium",
+      "propsSchema": {
+        "value": {
+          "types": [
+            "number"
+          ],
+          "description": "Current value"
+        },
+        "min": {
+          "types": [
+            "number"
+          ],
+          "description": "Minimum value"
+        },
+        "max": {
+          "types": [
+            "number"
+          ],
+          "description": "Maximum value"
+        },
+        "step": {
+          "types": [
+            "number"
+          ],
+          "description": "Step increment"
+        },
+        "size": {
+          "types": [
+            "numbersteppersize"
+          ],
+          "description": "Size variant"
+        },
+        "disabled": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Disabled state"
+        },
+        "onChange": {
+          "types": [
+            "function"
+          ],
+          "description": "Direct onChange callback"
+        },
+        "action": {
+          "types": [
+            "string"
+          ],
+          "description": "Declarative event name for value changes"
+        },
+        "actionPayload": {
+          "types": [
+            "object"
+          ],
+          "description": "Payload to include with the action event"
+        },
+        "className": {
+          "types": [
+            "string"
+          ],
+          "description": "Additional CSS classes"
+        },
+        "label": {
+          "types": [
+            "string"
+          ],
+          "description": "Accessible label"
+        }
+      }
+    },
+    "star-rating": {
+      "type": "star-rating",
+      "category": "component",
+      "description": "StarRating component",
+      "suggestedFor": [
+        "star",
+        "rating",
+        "star rating"
+      ],
+      "typicalSize": "medium",
+      "propsSchema": {
+        "value": {
+          "types": [
+            "number"
+          ],
+          "description": "Current rating value"
+        },
+        "max": {
+          "types": [
+            "number"
+          ],
+          "description": "Maximum number of stars"
+        },
+        "readOnly": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Read-only display mode"
+        },
+        "precision": {
+          "types": [
+            "starratingprecision"
+          ],
+          "description": "Full or half-star precision"
+        },
+        "size": {
+          "types": [
+            "starratingsize"
+          ],
+          "description": "Star size"
+        },
+        "action": {
+          "types": [
+            "string"
+          ],
+          "description": "Declarative event name for rating changes"
+        },
+        "actionPayload": {
+          "types": [
+            "object"
+          ],
+          "description": "Payload to include with the action event"
+        },
+        "onChange": {
+          "types": [
+            "function"
+          ],
+          "description": "Direct onChange callback"
+        },
+        "className": {
+          "types": [
+            "string"
+          ],
+          "description": "Additional CSS classes"
+        },
+        "label": {
+          "types": [
+            "string"
+          ],
+          "description": "Accessible label"
+        }
+      }
+    },
+    "upload-drop-zone": {
+      "type": "upload-drop-zone",
+      "category": "component",
+      "description": "UploadDropZone component",
+      "suggestedFor": [
+        "upload",
+        "drop",
+        "zone",
+        "upload drop zone"
+      ],
+      "typicalSize": "medium",
+      "propsSchema": {
+        "accept": {
+          "types": [
+            "string"
+          ],
+          "description": "Accepted MIME types (e.g., \"image/*\", \"application/pdf\")"
+        },
+        "maxSize": {
+          "types": [
+            "number"
+          ],
+          "description": "Max file size in bytes"
+        },
+        "maxFiles": {
+          "types": [
+            "number"
+          ],
+          "description": "Max number of files"
+        },
+        "label": {
+          "types": [
+            "string"
+          ],
+          "description": "Label text"
+        },
+        "description": {
+          "types": [
+            "string"
+          ],
+          "description": "Description text below label"
+        },
+        "icon": {
+          "types": [
+            "string"
+          ],
+          "description": "Icon name (Lucide string)"
+        },
+        "disabled": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Disabled state"
+        },
+        "action": {
+          "types": [
+            "string"
+          ],
+          "description": "Declarative event name for file selection"
+        },
+        "actionPayload": {
+          "types": [
+            "object"
+          ],
+          "description": "Payload to include with the action event"
+        },
+        "onFiles": {
+          "types": [
+            "function"
+          ],
+          "description": "Direct onFiles callback"
+        },
+        "className": {
+          "types": [
+            "string"
+          ],
+          "description": "Additional CSS classes"
+        }
+      }
+    },
+    "animated-counter": {
+      "type": "animated-counter",
+      "category": "component",
+      "description": "AnimatedCounter component",
+      "suggestedFor": [
+        "animated",
+        "counter",
+        "animated counter"
+      ],
+      "typicalSize": "small",
+      "propsSchema": {
+        "value": {
+          "types": [
+            "number"
+          ],
+          "description": "The target number to animate to",
+          "required": true
+        },
+        "duration": {
+          "types": [
+            "number"
+          ],
+          "description": "Animation duration in milliseconds"
+        },
+        "prefix": {
+          "types": [
+            "string"
+          ],
+          "description": "Text to display before the number"
+        },
+        "suffix": {
+          "types": [
+            "string"
+          ],
+          "description": "Text to display after the number"
+        },
+        "className": {
+          "types": [
+            "string"
+          ],
+          "description": "Additional class names"
+        }
+      }
+    },
+    "confetti-effect": {
+      "type": "confetti-effect",
+      "category": "component",
+      "description": "ConfettiEffect component",
+      "suggestedFor": [
+        "confetti",
+        "effect",
+        "confetti effect"
+      ],
+      "typicalSize": "small",
+      "propsSchema": {
+        "trigger": {
+          "types": [
+            "boolean"
+          ],
+          "description": "When this changes from false to true, a burst of particles is spawned",
+          "required": true
+        },
+        "duration": {
+          "types": [
+            "number"
+          ],
+          "description": "How long the animation lasts in milliseconds"
+        },
+        "particleCount": {
+          "types": [
+            "number"
+          ],
+          "description": "Number of particles to spawn"
+        },
+        "className": {
+          "types": [
+            "string"
+          ],
+          "description": "Additional class names"
+        }
+      }
+    },
+    "infinite-scroll-sentinel": {
+      "type": "infinite-scroll-sentinel",
+      "category": "component",
+      "description": "InfiniteScrollSentinel component",
+      "suggestedFor": [
+        "infinite",
+        "scroll",
+        "sentinel",
+        "infinite scroll sentinel"
+      ],
+      "typicalSize": "small",
+      "propsSchema": {
+        "loadMoreEvent": {
+          "types": [
+            "string"
+          ],
+          "description": "Event name to emit when load-more is triggered (emitted as UI:{loadMoreEvent})",
+          "required": true
+        },
+        "loadMorePayload": {
+          "types": [
+            "object"
+          ],
+          "description": "Optional payload to include with the load-more event"
+        },
+        "isLoading": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Whether a load operation is currently in progress"
+        },
+        "hasMore": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Whether there are more items to load"
+        },
+        "threshold": {
+          "types": [
+            "string"
+          ],
+          "description": "IntersectionObserver rootMargin for early trigger"
+        },
+        "className": {
+          "types": [
+            "string"
+          ],
+          "description": "Additional class names"
+        }
+      }
+    },
+    "typewriter-text": {
+      "type": "typewriter-text",
+      "category": "component",
+      "description": "TypewriterText component",
+      "suggestedFor": [
+        "typewriter",
+        "text",
+        "typewriter text"
+      ],
+      "typicalSize": "small",
+      "propsSchema": {
+        "text": {
+          "types": [
+            "string"
+          ],
+          "description": "The full text to reveal",
+          "required": true
+        },
+        "speed": {
+          "types": [
+            "number"
+          ],
+          "description": "Milliseconds per character"
+        },
+        "startDelay": {
+          "types": [
+            "number"
+          ],
+          "description": "Delay before typing starts (ms)"
+        },
+        "className": {
+          "types": [
+            "string"
+          ],
+          "description": "Additional class names"
+        },
+        "onComplete": {
+          "types": [
+            "function"
+          ],
+          "description": "Called when the entire text has been revealed"
+        }
+      }
+    },
+    "carousel": {
+      "type": "carousel",
+      "category": "component",
+      "description": "Carousel component",
+      "suggestedFor": [
+        "carousel"
+      ],
+      "typicalSize": "medium",
+      "propsSchema": {
+        "items": {
+          "types": [
+            "array"
+          ],
+          "description": "Array of items to display as slides",
+          "required": true
+        },
+        "renderItem": {
+          "types": [
+            "function"
+          ],
+          "description": "Render function for each slide",
+          "required": true
+        },
+        "autoPlay": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Enable auto-play rotation"
+        },
+        "autoPlayInterval": {
+          "types": [
+            "number"
+          ],
+          "description": "Auto-play interval in milliseconds (default: 5000)"
+        },
+        "showDots": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Show dot indicators"
+        },
+        "showArrows": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Show prev/next arrow buttons"
+        },
+        "loop": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Enable infinite loop"
+        },
+        "slideChangeEvent": {
+          "types": [
+            "string"
+          ],
+          "description": "Declarative event name for slide change"
+        },
+        "slideChangePayload": {
+          "types": [
+            "object"
+          ],
+          "description": "Payload to include with the slide change event"
+        },
+        "className": {
+          "types": [
+            "string"
+          ],
+          "description": "Additional CSS classes"
+        }
+      }
+    },
+    "pull-to-refresh": {
+      "type": "pull-to-refresh",
+      "category": "component",
+      "description": "PullToRefresh component",
+      "suggestedFor": [
+        "pull",
+        "refresh",
+        "pull to refresh"
+      ],
+      "typicalSize": "medium",
+      "propsSchema": {
+        "refreshEvent": {
+          "types": [
+            "string"
+          ],
+          "description": "Event name to emit on refresh (emitted as UI:{refreshEvent})",
+          "required": true
+        },
+        "refreshPayload": {
+          "types": [
+            "object"
+          ],
+          "description": "Payload to include with the refresh event"
+        },
+        "threshold": {
+          "types": [
+            "number"
+          ],
+          "description": "Pull distance threshold to trigger refresh in px (default: 60)"
+        },
+        "children": {
+          "types": [
+            "node"
+          ],
+          "description": "Content to wrap",
+          "required": true
+        },
+        "className": {
+          "types": [
+            "string"
+          ],
+          "description": "Additional CSS classes"
+        }
+      }
+    },
+    "sortable-list": {
+      "type": "sortable-list",
+      "category": "display",
+      "description": "SortableList component",
+      "suggestedFor": [
+        "sortable",
+        "list",
+        "sortable list"
+      ],
+      "typicalSize": "medium",
+      "propsSchema": {
+        "items": {
+          "types": [
+            "array"
+          ],
+          "description": "items prop",
+          "required": true
+        },
+        "renderItem": {
+          "types": [
+            "function"
+          ],
+          "description": "renderItem prop",
+          "required": true
+        },
+        "reorderEvent": {
+          "types": [
+            "string"
+          ],
+          "description": "reorderEvent prop",
+          "required": true
+        },
+        "reorderPayload": {
+          "types": [
+            "object"
+          ],
+          "description": "reorderPayload prop"
+        },
+        "dragHandlePosition": {
+          "types": [
+            "string"
+          ],
+          "description": "dragHandlePosition prop"
+        },
+        "className": {
+          "types": [
+            "string"
+          ],
+          "description": "className prop"
+        }
+      }
+    },
+    "swipeable-row": {
+      "type": "swipeable-row",
+      "category": "component",
+      "description": "SwipeableRow component",
+      "suggestedFor": [
+        "swipeable",
+        "row",
+        "swipeable row"
+      ],
+      "typicalSize": "medium",
+      "propsSchema": {
+        "leftActions": {
+          "types": [
+            "array"
+          ],
+          "description": "leftActions prop"
+        },
+        "rightActions": {
+          "types": [
+            "array"
+          ],
+          "description": "rightActions prop"
+        },
+        "threshold": {
+          "types": [
+            "number"
+          ],
+          "description": "threshold prop"
+        },
+        "children": {
+          "types": [
+            "node"
+          ],
+          "description": "children prop",
+          "required": true
+        },
+        "itemData": {
+          "types": [
+            "object"
+          ],
+          "description": "itemData prop"
+        },
+        "className": {
+          "types": [
+            "string"
+          ],
+          "description": "className prop"
+        }
+      }
+    },
+    "stat-display": {
+      "type": "stat-display",
+      "category": "display",
+      "description": "StatDisplay component",
+      "suggestedFor": [
+        "stat",
+        "display",
+        "stat display"
+      ],
+      "typicalSize": "medium",
+      "propsSchema": {
+        "label": {
+          "types": [
+            "string"
+          ],
+          "description": "Display label (e.g., \"Total\", \"Remaining\")",
+          "required": true
+        },
+        "value": {
+          "types": [
+            "number",
+            "string"
+          ],
+          "description": "Primary value (number or formatted string)"
+        },
+        "max": {
+          "types": [
+            "number"
+          ],
+          "description": "Maximum value (renders as \"value / max\")"
+        },
+        "icon": {
+          "types": [
+            "node"
+          ],
+          "description": "Lucide icon name or React node"
+        },
+        "iconBg": {
+          "types": [
+            "string"
+          ],
+          "description": "Icon background color class"
+        },
+        "iconColor": {
+          "types": [
+            "string"
+          ],
+          "description": "Icon color class"
+        },
+        "format": {
+          "types": [
+            "string"
+          ],
+          "description": "Display format: \"number\", \"currency\", \"percent\""
+        },
+        "size": {
+          "types": [
+            "string"
+          ],
+          "description": "Size variant"
+        },
+        "variant": {
+          "types": [
+            "string"
+          ],
+          "description": "Color variant"
+        },
+        "compact": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Compact mode (inline, no card wrapper)"
+        },
+        "className": {
+          "types": [
+            "string"
+          ],
+          "description": "Additional CSS classes"
+        },
+        "isLoading": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Loading state"
+        },
+        "error": {
+          "types": [
+            "error"
+          ],
+          "description": "Error state"
+        }
+      }
+    },
+    "action-button": {
+      "type": "action-button",
+      "category": "component",
+      "description": "ActionButton component",
+      "suggestedFor": [
+        "action",
+        "button",
+        "action button"
+      ],
+      "typicalSize": "small",
+      "propsSchema": {
+        "label": {
+          "types": [
+            "string"
+          ],
+          "description": "Button label text",
+          "required": true
+        },
+        "icon": {
+          "types": [
+            "node"
+          ],
+          "description": "Icon displayed before the label"
+        },
+        "cooldown": {
+          "types": [
+            "number"
+          ],
+          "description": "Cooldown progress from 0 (ready) to 1 (full cooldown)"
+        },
+        "disabled": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Whether the button is disabled"
+        },
+        "hotkey": {
+          "types": [
+            "string"
+          ],
+          "description": "Keyboard hotkey to display as a badge"
+        },
+        "size": {
+          "types": [
+            "string"
+          ],
+          "description": "Size variant"
+        },
+        "variant": {
+          "types": [
+            "string"
+          ],
+          "description": "Visual variant"
+        },
+        "onClick": {
+          "types": [
+            "function"
+          ],
+          "description": "Click handler"
+        },
+        "className": {
+          "types": [
+            "string"
+          ],
+          "description": "Additional CSS classes"
+        }
+      }
+    },
+    "choice-button": {
+      "type": "choice-button",
+      "category": "component",
+      "description": "ChoiceButton component",
+      "suggestedFor": [
+        "choice",
+        "button",
+        "choice button"
+      ],
+      "typicalSize": "small",
+      "propsSchema": {
+        "text": {
+          "types": [
+            "string"
+          ],
+          "description": "Choice text content",
+          "required": true
+        },
+        "index": {
+          "types": [
+            "number"
+          ],
+          "description": "Choice index number (displayed as prefix)"
+        },
+        "disabled": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Whether the choice is disabled"
+        },
+        "selected": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Whether the choice is currently selected"
+        },
+        "onClick": {
+          "types": [
+            "function"
+          ],
+          "description": "Click handler"
+        },
+        "className": {
+          "types": [
+            "string"
+          ],
+          "description": "Additional CSS classes"
+        }
+      }
+    },
+    "combo-counter": {
+      "type": "combo-counter",
+      "category": "component",
+      "description": "ComboCounter component",
+      "suggestedFor": [
+        "combo",
+        "counter",
+        "combo counter"
+      ],
+      "typicalSize": "small",
+      "propsSchema": {
+        "combo": {
+          "types": [
+            "number"
+          ],
+          "description": "Current combo count",
+          "required": true
+        },
+        "multiplier": {
+          "types": [
+            "number"
+          ],
+          "description": "Score multiplier"
+        },
+        "streak": {
+          "types": [
+            "number"
+          ],
+          "description": "Current streak"
+        },
+        "size": {
+          "types": [
+            "string"
+          ],
+          "description": "Size variant"
+        },
+        "className": {
+          "types": [
+            "string"
+          ],
+          "description": "Additional CSS classes"
+        }
+      }
+    },
+    "damage-number": {
+      "type": "damage-number",
+      "category": "component",
+      "description": "DamageNumber component",
+      "suggestedFor": [
+        "damage",
+        "number",
+        "damage number"
+      ],
+      "typicalSize": "small",
+      "propsSchema": {
+        "value": {
+          "types": [
+            "number"
+          ],
+          "description": "The damage/heal value to display",
+          "required": true
+        },
+        "type": {
+          "types": [
+            "string"
+          ],
+          "description": "Type of number display"
+        },
+        "size": {
+          "types": [
+            "string"
+          ],
+          "description": "Size variant"
+        },
+        "className": {
+          "types": [
+            "string"
+          ],
+          "description": "Additional CSS classes"
+        }
+      }
+    },
+    "dialogue-bubble": {
+      "type": "dialogue-bubble",
+      "category": "game",
+      "description": "DialogueBubble component",
+      "suggestedFor": [
+        "dialogue",
+        "bubble",
+        "dialogue bubble"
+      ],
+      "typicalSize": "small",
+      "propsSchema": {
+        "speaker": {
+          "types": [
+            "string"
+          ],
+          "description": "Speaker name displayed at the top"
+        },
+        "text": {
+          "types": [
+            "string"
+          ],
+          "description": "Dialogue text content",
+          "required": true
+        },
+        "portrait": {
+          "types": [
+            "string"
+          ],
+          "description": "URL for the speaker portrait image"
+        },
+        "position": {
+          "types": [
+            "string"
+          ],
+          "description": "Position of the bubble on screen"
+        },
+        "className": {
+          "types": [
+            "string"
+          ],
+          "description": "Additional CSS classes"
+        }
+      }
+    },
+    "item-slot": {
+      "type": "item-slot",
+      "category": "layout",
+      "description": "ItemSlot component",
+      "suggestedFor": [
+        "item",
+        "slot",
+        "item slot"
+      ],
+      "typicalSize": "small",
+      "propsSchema": {
+        "icon": {
+          "types": [
+            "node"
+          ],
+          "description": "Icon component or emoji"
+        },
+        "label": {
+          "types": [
+            "string"
+          ],
+          "description": "Item label"
+        },
+        "quantity": {
+          "types": [
+            "number"
+          ],
+          "description": "Stack quantity"
+        },
+        "rarity": {
+          "types": [
+            "string"
+          ],
+          "description": "Rarity tier affecting border color"
+        },
+        "empty": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Whether the slot is empty"
+        },
+        "size": {
+          "types": [
+            "string"
+          ],
+          "description": "Size variant"
+        },
+        "selected": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Whether the slot is selected"
+        },
+        "onClick": {
+          "types": [
+            "function"
+          ],
+          "description": "Click handler"
+        },
+        "className": {
+          "types": [
+            "string"
+          ],
+          "description": "Additional CSS classes"
+        }
+      }
+    },
+    "mini-map": {
+      "type": "mini-map",
+      "category": "component",
+      "description": "MiniMap component",
+      "suggestedFor": [
+        "mini",
+        "map",
+        "mini map"
+      ],
+      "typicalSize": "small",
+      "propsSchema": {
+        "tiles": {
+          "types": [
+            "array"
+          ],
+          "description": "Tile data: each tile renders as a 1px dot at (x,y) with the given color"
+        },
+        "units": {
+          "types": [
+            "array"
+          ],
+          "description": "Unit positions: each unit renders as a 2px dot"
+        },
+        "width": {
+          "types": [
+            "number"
+          ],
+          "description": "Canvas display width in pixels"
+        },
+        "height": {
+          "types": [
+            "number"
+          ],
+          "description": "Canvas display height in pixels"
+        },
+        "mapWidth": {
+          "types": [
+            "number"
+          ],
+          "description": "Logical map width (for coordinate scaling)"
+        },
+        "mapHeight": {
+          "types": [
+            "number"
+          ],
+          "description": "Logical map height (for coordinate scaling)"
+        },
+        "viewportRect": {
+          "types": [
+            "object"
+          ],
+          "description": "Viewport rectangle outline"
+        },
+        "className": {
+          "types": [
+            "string"
+          ],
+          "description": "Additional CSS classes"
+        }
+      }
+    },
+    "resource-counter": {
+      "type": "resource-counter",
+      "category": "component",
+      "description": "ResourceCounter component",
+      "suggestedFor": [
+        "resource",
+        "counter",
+        "resource counter"
+      ],
+      "typicalSize": "small",
+      "propsSchema": {
+        "icon": {
+          "types": [
+            "node"
+          ],
+          "description": "Icon component or emoji"
+        },
+        "label": {
+          "types": [
+            "string"
+          ],
+          "description": "Resource label",
+          "required": true
+        },
+        "value": {
+          "types": [
+            "number"
+          ],
+          "description": "Current value",
+          "required": true
+        },
+        "max": {
+          "types": [
+            "number"
+          ],
+          "description": "Maximum value"
+        },
+        "color": {
+          "types": [
+            "string"
+          ],
+          "description": "Accent color class (e.g. 'text-yellow-400')"
+        },
+        "size": {
+          "types": [
+            "string"
+          ],
+          "description": "Size variant"
+        },
+        "className": {
+          "types": [
+            "string"
+          ],
+          "description": "Additional CSS classes"
+        }
+      }
+    },
+    "status-effect": {
+      "type": "status-effect",
+      "category": "display",
+      "description": "StatusEffect component",
+      "suggestedFor": [
+        "status",
+        "effect",
+        "status effect"
+      ],
+      "typicalSize": "small",
+      "propsSchema": {
+        "icon": {
+          "types": [
+            "node"
+          ],
+          "description": "Icon to display for the effect",
+          "required": true
+        },
+        "label": {
+          "types": [
+            "string"
+          ],
+          "description": "Label describing the effect"
+        },
+        "duration": {
+          "types": [
+            "number"
+          ],
+          "description": "Remaining duration in seconds"
+        },
+        "stacks": {
+          "types": [
+            "number"
+          ],
+          "description": "Number of stacks"
+        },
+        "variant": {
+          "types": [
+            "string"
+          ],
+          "description": "Effect type"
+        },
+        "size": {
+          "types": [
+            "string"
+          ],
+          "description": "Size variant"
+        },
+        "className": {
+          "types": [
+            "string"
+          ],
+          "description": "Additional CSS classes"
+        }
+      }
+    },
+    "timer-display": {
+      "type": "timer-display",
+      "category": "component",
+      "description": "TimerDisplay component",
+      "suggestedFor": [
+        "timer",
+        "display",
+        "timer display"
+      ],
+      "typicalSize": "small",
+      "propsSchema": {
+        "seconds": {
+          "types": [
+            "number"
+          ],
+          "description": "Time in seconds",
+          "required": true
+        },
+        "running": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Whether the timer is running"
+        },
+        "format": {
+          "types": [
+            "string"
+          ],
+          "description": "Display format"
+        },
+        "size": {
+          "types": [
+            "string"
+          ],
+          "description": "Size variant"
+        },
+        "className": {
+          "types": [
+            "string"
+          ],
+          "description": "Additional CSS classes"
+        },
+        "lowThreshold": {
+          "types": [
+            "number"
+          ],
+          "description": "Seconds below which to pulse red"
+        }
+      }
+    },
+    "turn-indicator": {
+      "type": "turn-indicator",
+      "category": "component",
+      "description": "TurnIndicator component",
+      "suggestedFor": [
+        "turn",
+        "indicator",
+        "turn indicator"
+      ],
+      "typicalSize": "small",
+      "propsSchema": {
+        "currentTurn": {
+          "types": [
+            "number"
+          ],
+          "description": "Current turn number",
+          "required": true
+        },
+        "maxTurns": {
+          "types": [
+            "number"
+          ],
+          "description": "Maximum number of turns"
+        },
+        "activeTeam": {
+          "types": [
+            "string"
+          ],
+          "description": "Name of the active team"
+        },
+        "phase": {
+          "types": [
+            "string"
+          ],
+          "description": "Current phase label"
+        },
+        "size": {
+          "types": [
+            "string"
+          ],
+          "description": "Size variant"
+        },
+        "className": {
+          "types": [
+            "string"
+          ],
+          "description": "Additional CSS classes"
+        }
+      }
+    },
+    "waypoint-marker": {
+      "type": "waypoint-marker",
+      "category": "component",
+      "description": "WaypointMarker component",
+      "suggestedFor": [
+        "waypoint",
+        "marker",
+        "waypoint marker"
+      ],
+      "typicalSize": "small",
+      "propsSchema": {
+        "label": {
+          "types": [
+            "string"
+          ],
+          "description": "Label text below the marker"
+        },
+        "icon": {
+          "types": [
+            "node"
+          ],
+          "description": "Custom icon to render inside the marker"
+        },
+        "active": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Whether this waypoint is currently active"
+        },
+        "completed": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Whether this waypoint has been completed"
+        },
+        "size": {
+          "types": [
+            "string"
+          ],
+          "description": "Size variant"
+        },
+        "className": {
+          "types": [
+            "string"
+          ],
+          "description": "Additional CSS classes"
+        }
+      }
+    },
+    "x-p-bar": {
+      "type": "x-p-bar",
+      "category": "component",
+      "description": "XPBar component",
+      "suggestedFor": [
+        "bar",
+        "x p bar"
+      ],
+      "typicalSize": "small",
+      "propsSchema": {
+        "current": {
+          "types": [
+            "number"
+          ],
+          "description": "Current XP value",
+          "required": true
+        },
+        "max": {
+          "types": [
+            "number"
+          ],
+          "description": "XP needed for next level",
+          "required": true
+        },
+        "level": {
+          "types": [
+            "number"
+          ],
+          "description": "Current level"
+        },
+        "showLabel": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Whether to show the XP label"
+        },
+        "size": {
+          "types": [
+            "string"
+          ],
+          "description": "Size variant"
+        },
+        "animated": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Animate the fill bar"
+        },
+        "className": {
+          "types": [
+            "string"
+          ],
+          "description": "Additional CSS classes"
+        }
+      }
+    },
+    "crafting-recipe": {
+      "type": "crafting-recipe",
+      "category": "component",
+      "description": "CraftingRecipe component",
+      "suggestedFor": [
+        "crafting",
+        "recipe",
+        "crafting recipe"
+      ],
+      "typicalSize": "medium",
+      "propsSchema": {
+        "inputs": {
+          "types": [
+            "array"
+          ],
+          "description": "Input ingredients for the recipe",
+          "required": true
+        },
+        "output": {
+          "types": [
+            "object"
+          ],
+          "description": "Output item produced by the recipe",
+          "required": true
+        },
+        "canCraft": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Whether the player has enough ingredients to craft"
+        },
+        "onCraft": {
+          "types": [
+            "function"
+          ],
+          "description": "Callback when the craft button is clicked"
+        },
+        "craftEvent": {
+          "types": [
+            "string"
+          ],
+          "description": "Event bus event name for crafting"
+        },
+        "className": {
+          "types": [
+            "string"
+          ],
+          "description": "Additional CSS classes"
+        }
+      }
+    },
+    "enemy-plate": {
+      "type": "enemy-plate",
+      "category": "component",
+      "description": "EnemyPlate component",
+      "suggestedFor": [
+        "enemy",
+        "plate",
+        "enemy plate"
+      ],
+      "typicalSize": "medium",
+      "propsSchema": {
+        "name": {
+          "types": [
+            "string"
+          ],
+          "description": "Enemy name",
+          "required": true
+        },
+        "health": {
+          "types": [
+            "number"
+          ],
+          "description": "Current health",
+          "required": true
+        },
+        "maxHealth": {
+          "types": [
+            "number"
+          ],
+          "description": "Maximum health",
+          "required": true
+        },
+        "level": {
+          "types": [
+            "number"
+          ],
+          "description": "Enemy level"
+        },
+        "effects": {
+          "types": [
+            "array"
+          ],
+          "description": "Active status effects"
+        },
+        "className": {
+          "types": [
+            "string"
+          ],
+          "description": "Additional CSS classes"
+        }
+      }
+    },
+    "game-canvas2-d": {
+      "type": "game-canvas2-d",
+      "category": "game",
+      "description": "GameCanvas2D component",
+      "suggestedFor": [
+        "game",
+        "canvas2",
+        "game canvas2 d"
+      ],
+      "typicalSize": "medium",
+      "propsSchema": {
+        "width": {
+          "types": [
+            "number"
+          ],
+          "description": "Canvas width in pixels"
+        },
+        "height": {
+          "types": [
+            "number"
+          ],
+          "description": "Canvas height in pixels"
+        },
+        "onDraw": {
+          "types": [
+            "function"
+          ],
+          "description": "Called each frame with the 2D context and current frame count"
+        },
+        "onTick": {
+          "types": [
+            "function"
+          ],
+          "description": "Called each tick with delta time in seconds"
+        },
+        "fps": {
+          "types": [
+            "number"
+          ],
+          "description": "Target frames per second"
+        },
+        "className": {
+          "types": [
+            "string"
+          ],
+          "description": "Additional CSS classes"
+        }
+      }
+    },
+    "health-panel": {
+      "type": "health-panel",
+      "category": "component",
+      "description": "HealthPanel component",
+      "suggestedFor": [
+        "health",
+        "panel",
+        "health panel"
+      ],
+      "typicalSize": "medium",
+      "propsSchema": {
+        "current": {
+          "types": [
+            "number"
+          ],
+          "description": "Current health value",
+          "required": true
+        },
+        "max": {
+          "types": [
+            "number"
+          ],
+          "description": "Maximum health value",
+          "required": true
+        },
+        "shield": {
+          "types": [
+            "number"
+          ],
+          "description": "Shield/armor points"
+        },
+        "label": {
+          "types": [
+            "string"
+          ],
+          "description": "Label shown above the bar"
+        },
+        "effects": {
+          "types": [
+            "array"
+          ],
+          "description": "Active status effects displayed as small badges"
+        },
+        "showNumbers": {
+          "types": [
+            "boolean"
+          ],
+          "description": "Whether to display numeric HP values"
+        },
+        "size": {
+          "types": [
+            "string"
+          ],
+          "description": "Size variant"
+        },
+        "className": {
+          "types": [
+            "string"
+          ],
+          "description": "Additional CSS classes"
+        }
+      }
+    },
+    "inventory-grid": {
+      "type": "inventory-grid",
+      "category": "game",
+      "description": "InventoryGrid component",
+      "suggestedFor": [
+        "inventory",
+        "grid",
+        "inventory grid"
+      ],
+      "typicalSize": "medium",
+      "propsSchema": {
+        "items": {
+          "types": [
+            "array"
+          ],
+          "description": "Array of items to display in the grid",
+          "required": true
+        },
+        "columns": {
+          "types": [
+            "number"
+          ],
+          "description": "Number of columns in the grid"
+        },
+        "totalSlots": {
+          "types": [
+            "number"
+          ],
+          "description": "Total number of slots (empty slots fill remaining space)"
+        },
+        "selectedId": {
+          "types": [
+            "string"
+          ],
+          "description": "Currently selected item ID"
+        },
+        "onSelect": {
+          "types": [
+            "function"
+          ],
+          "description": "Callback when an item is selected"
+        },
+        "selectEvent": {
+          "types": [
+            "string"
+          ],
+          "description": "Event bus event name for selection"
+        },
+        "size": {
+          "types": [
+            "string"
+          ],
+          "description": "Size variant for all item slots"
+        },
+        "className": {
+          "types": [
+            "string"
+          ],
+          "description": "Additional CSS classes"
+        }
+      }
+    },
+    "powerup-slots": {
+      "type": "powerup-slots",
+      "category": "layout",
+      "description": "PowerupSlots component",
+      "suggestedFor": [
+        "powerup",
+        "slots",
+        "powerup slots"
+      ],
+      "typicalSize": "medium",
+      "propsSchema": {
+        "active": {
+          "types": [
+            "array"
+          ],
+          "description": "Array of active powerups",
+          "required": true
+        },
+        "maxSlots": {
+          "types": [
+            "number"
+          ],
+          "description": "Maximum number of powerup slots"
+        },
+        "className": {
+          "types": [
+            "string"
+          ],
+          "description": "Additional CSS classes"
+        }
+      }
+    },
+    "quest-tracker": {
+      "type": "quest-tracker",
+      "category": "component",
+      "description": "QuestTracker component",
+      "suggestedFor": [
+        "quest",
+        "tracker",
+        "quest tracker"
+      ],
+      "typicalSize": "medium",
+      "propsSchema": {
+        "quests": {
+          "types": [
+            "array"
+          ],
+          "description": "Array of quests to display",
+          "required": true
+        },
+        "activeQuestId": {
+          "types": [
+            "string"
+          ],
+          "description": "ID of the currently active quest"
+        },
+        "className": {
+          "types": [
+            "string"
+          ],
+          "description": "Additional CSS classes"
+        }
+      }
+    },
+    "resource-bar": {
+      "type": "resource-bar",
+      "category": "component",
+      "description": "ResourceBar component",
+      "suggestedFor": [
+        "resource",
+        "bar",
+        "resource bar"
+      ],
+      "typicalSize": "medium",
+      "propsSchema": {
+        "resources": {
+          "types": [
+            "array"
+          ],
+          "description": "Resources to display",
+          "required": true
+        },
+        "size": {
+          "types": [
+            "string"
+          ],
+          "description": "Size variant"
+        },
+        "className": {
+          "types": [
+            "string"
+          ],
+          "description": "Additional CSS classes"
+        }
+      }
+    },
+    "score-board": {
+      "type": "score-board",
+      "category": "game",
+      "description": "ScoreBoard component",
+      "suggestedFor": [
+        "score",
+        "board",
+        "score board"
+      ],
+      "typicalSize": "medium",
+      "propsSchema": {
+        "score": {
+          "types": [
+            "number"
+          ],
+          "description": "Current score",
+          "required": true
+        },
+        "highScore": {
+          "types": [
+            "number"
+          ],
+          "description": "All-time high score"
+        },
+        "combo": {
+          "types": [
+            "number"
+          ],
+          "description": "Current combo count"
+        },
+        "multiplier": {
+          "types": [
+            "number"
+          ],
+          "description": "Score multiplier"
+        },
+        "level": {
+          "types": [
+            "number"
+          ],
+          "description": "Current level"
+        },
+        "className": {
+          "types": [
+            "string"
+          ],
+          "description": "Additional CSS classes"
+        }
+      }
+    },
+    "turn-panel": {
+      "type": "turn-panel",
+      "category": "component",
+      "description": "TurnPanel component",
+      "suggestedFor": [
+        "turn",
+        "panel",
+        "turn panel"
+      ],
+      "typicalSize": "medium",
+      "propsSchema": {
+        "currentTurn": {
+          "types": [
+            "number"
+          ],
+          "description": "Current turn number",
+          "required": true
+        },
+        "maxTurns": {
+          "types": [
+            "number"
+          ],
+          "description": "Maximum number of turns"
+        },
+        "phase": {
+          "types": [
+            "string"
+          ],
+          "description": "Current phase label"
+        },
+        "activeTeam": {
+          "types": [
+            "string"
+          ],
+          "description": "Active team name"
+        },
+        "actions": {
+          "types": [
+            "array"
+          ],
+          "description": "Action buttons to display"
+        },
+        "className": {
+          "types": [
+            "string"
+          ],
+          "description": "Additional CSS classes"
+        }
+      }
+    },
+    "unit-command-bar": {
+      "type": "unit-command-bar",
+      "category": "component",
+      "description": "UnitCommandBar component",
+      "suggestedFor": [
+        "unit",
+        "command",
+        "bar",
+        "unit command bar"
+      ],
+      "typicalSize": "medium",
+      "propsSchema": {
+        "commands": {
+          "types": [
+            "array"
+          ],
+          "description": "Available commands",
+          "required": true
+        },
+        "selectedUnitId": {
+          "types": [
+            "string"
+          ],
+          "description": "ID of the currently selected unit"
+        },
+        "className": {
+          "types": [
+            "string"
+          ],
+          "description": "Additional CSS classes"
         }
       }
     },