@almadar/patterns 2.3.0 → 2.6.0

package/dist/index.js

@@ -1,7 +1,7 @@
 // src/patterns-registry.json
 var patterns_registry_default = {
   version: "1.0.0",
-  exportedAt: "2026-03-09T08:08:00.655Z",
+  exportedAt: "2026-03-11T04:10:55.563Z",
   patterns: {
     "entity-table": {
       type: "entity-table",
@@ -2159,9 +2159,10 @@ var patterns_registry_default = {
         },
         icon: {
           types: [
-            "icon"
+            "icon",
+            "string"
           ],
-          description: "Icon to display"
+          description: "Icon to display (Lucide component or icon name string)"
         },
         iconBg: {
           types: [
@@ -2198,6 +2199,12 @@ var patterns_registry_default = {
             "boolean"
           ],
           description: "Compact display mode"
+        },
+        sparklineData: {
+          types: [
+            "unknown"
+          ],
+          description: "Sparkline data points for an inline trend chart"
         }
       }
     },
@@ -2387,6 +2394,12 @@ var patterns_registry_default = {
             "string"
           ],
           description: "Declarative close event \u2014 emits UI:{closeEvent} via eventBus when modal should close"
+        },
+        swipeDownToClose: {
+          types: [
+            "boolean"
+          ],
+          description: "Enable swipe-down-to-close on mobile bottom sheet (default: true)"
         }
       }
     },
@@ -3521,6 +3534,12 @@ var patterns_registry_default = {
             "string"
           ],
           description: "Badge label text (alternative to children for schema-driven rendering)"
+        },
+        icon: {
+          types: [
+            "node"
+          ],
+          description: "Icon name (Lucide icon string) or React node"
         }
       }
     },
@@ -3753,6 +3772,18 @@ var patterns_registry_default = {
             "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"
         }
       }
     },
@@ -4855,6 +4886,12 @@ var patterns_registry_default = {
             "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)"
         }
       }
     },
@@ -8487,7 +8524,7 @@ var patterns_registry_default = {
     },
     "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",
@@ -8823,18 +8860,6 @@ var patterns_registry_default = {
       ],
       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"
@@ -8849,63 +8874,15 @@ var patterns_registry_default = {
         },
         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: [
@@ -8953,19 +8930,19 @@ var patterns_registry_default = {
           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: [
@@ -12612,6 +12589,7 @@ var patterns_registry_default = {
       propsSchema: {
         preset: {
           types: [
+            "string",
             "physicspreset"
           ],
           description: "preset prop",
@@ -13716,6 +13694,30 @@ var patterns_registry_default = {
             "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}"
         }
       }
     },
@@ -14104,6 +14106,48 @@ var patterns_registry_default = {
             "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).'
         }
       }
     },
@@ -14154,6 +14198,24 @@ var patterns_registry_default = {
           ],
           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"
@@ -14171,162 +14233,2589 @@ var patterns_registry_default = {
             "error"
           ],
           description: "Error state"
-        }
-      }
-    },
-    heading: {
-      type: "heading",
-      category: "component",
-      description: "Alias for typography \u2014 Typography Atom Component  Text elements following the KFlow design system with theme-aware styling.",
-      suggestedFor: [
-        "typography"
-      ],
-      typicalSize: "small",
-      propsSchema: {
-        variant: {
-          types: [
-            "typographyvariant"
-          ],
-          description: "Typography variant"
         },
-        level: {
+        reorderable: {
           types: [
-            "number"
+            "boolean"
           ],
-          description: "Heading level (1-6) - alternative to variant for headings"
+          description: "Enable drag-to-reorder with grip handles"
         },
-        color: {
+        reorderEvent: {
           types: [
             "string"
           ],
-          description: "Text color"
+          description: "Event emitted on reorder: UI:{reorderEvent} with { fromIndex, toIndex }"
         },
-        align: {
+        swipeLeftEvent: {
           types: [
             "string"
           ],
-          description: "Text alignment"
+          description: "Event emitted on left swipe: UI:{swipeLeftEvent} with { row }"
         },
-        weight: {
+        swipeLeftActions: {
           types: [
-            "string"
+            "unknown"
           ],
-          description: "Font weight override"
+          description: "Actions revealed on left swipe"
         },
-        size: {
+        swipeRightEvent: {
           types: [
-            "typographysize"
+            "string"
           ],
-          description: "Font size override"
+          description: "Event emitted on right swipe: UI:{swipeRightEvent} with { row }"
         },
-        truncate: {
+        swipeRightActions: {
           types: [
-            "boolean"
+            "unknown"
           ],
-          description: "Truncate with ellipsis (single line)"
+          description: "Actions revealed on right swipe"
         },
-        overflow: {
+        longPressEvent: {
           types: [
             "string"
           ],
-          description: "Overflow handling mode"
-        },
-        as: {
-          types: [
-            "unknown"
-          ],
-          description: "Custom HTML element"
+          description: "Event emitted on long press: UI:{longPressEvent} with { row }"
         },
-        id: {
+        infiniteScroll: {
           types: [
-            "string"
+            "boolean"
           ],
-          description: "HTML id attribute"
+          description: "Enable infinite scroll loading"
         },
-        className: {
+        loadMoreEvent: {
           types: [
             "string"
           ],
-          description: "Additional class names"
+          description: "Event emitted when more items needed: UI:{loadMoreEvent}"
         },
-        style: {
+        hasMore: {
           types: [
-            "object"
+            "boolean"
           ],
-          description: "Inline style"
+          description: "Whether more items are available for infinite scroll"
         },
-        content: {
+        children: {
           types: [
-            "node"
+            "function"
           ],
-          description: "Text content (alternative to children)"
+          description: "Render prop for custom per-item content. When provided, `fields` and `itemActions` are ignored."
         },
-        children: {
+        pageSize: {
           types: [
-            "node"
+            "number"
           ],
-          description: "Children elements"
+          description: 'Max items to show before "Show More" button. Defaults to 5. Set to 0 to disable.'
         }
       }
     },
-    text: {
-      type: "text",
-      category: "component",
-      description: "Alias for typography \u2014 Typography Atom Component  Text elements following the KFlow design system with theme-aware styling.",
+    "platformer-canvas": {
+      type: "platformer-canvas",
+      category: "game",
+      description: "PlatformerCanvas component",
       suggestedFor: [
-        "typography"
+        "platformer",
+        "canvas",
+        "platformer canvas"
       ],
-      typicalSize: "small",
+      typicalSize: "large",
       propsSchema: {
-        variant: {
+        player: {
           types: [
-            "typographyvariant"
+            "platformerplayer"
           ],
-          description: "Typography variant"
+          description: "Player state data"
         },
-        level: {
+        platforms: {
           types: [
-            "number"
+            "unknown"
           ],
-          description: "Heading level (1-6) - alternative to variant for headings"
+          description: "Static platforms / level geometry"
         },
-        color: {
+        worldWidth: {
           types: [
-            "string"
+            "number"
           ],
-          description: "Text color"
+          description: "World dimensions"
         },
-        align: {
+        worldHeight: {
           types: [
-            "string"
+            "number"
           ],
-          description: "Text alignment"
+          description: "worldHeight prop"
         },
-        weight: {
+        canvasWidth: {
           types: [
-            "string"
+            "number"
           ],
-          description: "Font weight override"
+          description: "Canvas display size"
         },
-        size: {
+        canvasHeight: {
           types: [
-            "typographysize"
+            "number"
           ],
-          description: "Font size override"
+          description: "canvasHeight prop"
         },
-        truncate: {
+        followCamera: {
           types: [
             "boolean"
           ],
-          description: "Truncate with ellipsis (single line)"
+          description: "Camera follows player"
         },
-        overflow: {
+        bgColor: {
           types: [
             "string"
           ],
-          description: "Overflow handling mode"
+          description: "Background color"
         },
-        as: {
+        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"
+        }
+      }
+    },
+    heading: {
+      type: "heading",
+      category: "component",
+      description: "Alias for typography \u2014 Typography Atom Component  Text elements following the KFlow design system with theme-aware styling.",
+      suggestedFor: [
+        "typography"
+      ],
+      typicalSize: "small",
+      propsSchema: {
+        variant: {
+          types: [
+            "typographyvariant"
+          ],
+          description: "Typography variant"
+        },
+        level: {
+          types: [
+            "number"
+          ],
+          description: "Heading level (1-6) - alternative to variant for headings"
+        },
+        color: {
+          types: [
+            "string"
+          ],
+          description: "Text color"
+        },
+        align: {
+          types: [
+            "string"
+          ],
+          description: "Text alignment"
+        },
+        weight: {
+          types: [
+            "string"
+          ],
+          description: "Font weight override"
+        },
+        size: {
+          types: [
+            "typographysize"
+          ],
+          description: "Font size override"
+        },
+        truncate: {
+          types: [
+            "boolean"
+          ],
+          description: "Truncate with ellipsis (single line)"
+        },
+        overflow: {
+          types: [
+            "string"
+          ],
+          description: "Overflow handling mode"
+        },
+        as: {
+          types: [
+            "unknown"
+          ],
+          description: "Custom HTML element"
+        },
+        id: {
+          types: [
+            "string"
+          ],
+          description: "HTML id attribute"
+        },
+        className: {
+          types: [
+            "string"
+          ],
+          description: "Additional class names"
+        },
+        style: {
+          types: [
+            "object"
+          ],
+          description: "Inline style"
+        },
+        content: {
+          types: [
+            "node"
+          ],
+          description: "Text content (alternative to children)"
+        },
+        children: {
+          types: [
+            "node"
+          ],
+          description: "Children elements"
+        }
+      }
+    },
+    text: {
+      type: "text",
+      category: "component",
+      description: "Alias for typography \u2014 Typography Atom Component  Text elements following the KFlow design system with theme-aware styling.",
+      suggestedFor: [
+        "typography"
+      ],
+      typicalSize: "small",
+      propsSchema: {
+        variant: {
+          types: [
+            "typographyvariant"
+          ],
+          description: "Typography variant"
+        },
+        level: {
+          types: [
+            "number"
+          ],
+          description: "Heading level (1-6) - alternative to variant for headings"
+        },
+        color: {
+          types: [
+            "string"
+          ],
+          description: "Text color"
+        },
+        align: {
+          types: [
+            "string"
+          ],
+          description: "Text alignment"
+        },
+        weight: {
+          types: [
+            "string"
+          ],
+          description: "Font weight override"
+        },
+        size: {
+          types: [
+            "typographysize"
+          ],
+          description: "Font size override"
+        },
+        truncate: {
+          types: [
+            "boolean"
+          ],
+          description: "Truncate with ellipsis (single line)"
+        },
+        overflow: {
+          types: [
+            "string"
+          ],
+          description: "Overflow handling mode"
+        },
+        as: {
           types: [
             "unknown"
           ],
@@ -14990,7 +17479,7 @@ var integrators_registry_default = {
 // src/component-mapping.json
 var component_mapping_default = {
   version: "1.0.0",
-  exportedAt: "2026-03-09T08:08:00.655Z",
+  exportedAt: "2026-03-11T04:10:55.563Z",
   mappings: {
     "page-header": {
       component: "PageHeader",
@@ -15447,7 +17936,12 @@ var component_mapping_default = {
     },
     "stat-badge": {
       component: "StatBadge",
-      importPath: "@/components/molecules/StatBadge",
+      importPath: "@/components/molecules/game/StatBadge",
+      category: "game"
+    },
+    "stat-display": {
+      component: "StatDisplay",
+      importPath: "@/components/molecules/StatDisplay",
       category: "display"
     },
     "button-pattern": {
@@ -15567,7 +18061,7 @@ var component_mapping_default = {
     },
     meter: {
       component: "Meter",
-      importPath: "@almadar/ui",
+      importPath: "@/components/molecules/Meter",
       category: "visualization"
     },
     timeline: {
@@ -15990,6 +18484,211 @@ var component_mapping_default = {
       importPath: "@/components/molecules/ProgressDots",
       category: "component"
     },
+    "platformer-canvas": {
+      component: "PlatformerCanvas",
+      importPath: "@/components/organisms/PlatformerCanvas",
+      category: "form"
+    },
+    "map-view": {
+      component: "MapView",
+      importPath: "@/components/molecules/MapView",
+      category: "component"
+    },
+    "range-slider": {
+      component: "RangeSlider",
+      importPath: "@/components/atoms/RangeSlider",
+      category: "component"
+    },
+    "status-dot": {
+      component: "StatusDot",
+      importPath: "@/components/atoms/StatusDot",
+      category: "display"
+    },
+    "trend-indicator": {
+      component: "TrendIndicator",
+      importPath: "@/components/atoms/TrendIndicator",
+      category: "component"
+    },
+    lightbox: {
+      component: "Lightbox",
+      importPath: "@/components/molecules/Lightbox",
+      category: "component"
+    },
+    "number-stepper": {
+      component: "NumberStepper",
+      importPath: "@/components/molecules/NumberStepper",
+      category: "component"
+    },
+    "star-rating": {
+      component: "StarRating",
+      importPath: "@/components/molecules/StarRating",
+      category: "component"
+    },
+    "upload-drop-zone": {
+      component: "UploadDropZone",
+      importPath: "@/components/molecules/UploadDropZone",
+      category: "component"
+    },
+    "animated-counter": {
+      component: "AnimatedCounter",
+      importPath: "@/components/atoms/AnimatedCounter",
+      category: "component"
+    },
+    "confetti-effect": {
+      component: "ConfettiEffect",
+      importPath: "@/components/atoms/ConfettiEffect",
+      category: "component"
+    },
+    "infinite-scroll-sentinel": {
+      component: "InfiniteScrollSentinel",
+      importPath: "@/components/atoms/InfiniteScrollSentinel",
+      category: "component"
+    },
+    "typewriter-text": {
+      component: "TypewriterText",
+      importPath: "@/components/atoms/TypewriterText",
+      category: "component"
+    },
+    carousel: {
+      component: "Carousel",
+      importPath: "@/components/molecules/Carousel",
+      category: "component"
+    },
+    "pull-to-refresh": {
+      component: "PullToRefresh",
+      importPath: "@/components/molecules/PullToRefresh",
+      category: "component"
+    },
+    "sortable-list": {
+      component: "SortableList",
+      importPath: "@/components/molecules/SortableList",
+      category: "display"
+    },
+    "swipeable-row": {
+      component: "SwipeableRow",
+      importPath: "@/components/molecules/SwipeableRow",
+      category: "component"
+    },
+    "action-button": {
+      component: "ActionButton",
+      importPath: "@/components/atoms/ActionButton",
+      category: "component"
+    },
+    "choice-button": {
+      component: "ChoiceButton",
+      importPath: "@/components/atoms/ChoiceButton",
+      category: "component"
+    },
+    "combo-counter": {
+      component: "ComboCounter",
+      importPath: "@/components/atoms/ComboCounter",
+      category: "component"
+    },
+    "damage-number": {
+      component: "DamageNumber",
+      importPath: "@/components/atoms/DamageNumber",
+      category: "component"
+    },
+    "dialogue-bubble": {
+      component: "DialogueBubble",
+      importPath: "@/components/atoms/DialogueBubble",
+      category: "game"
+    },
+    "item-slot": {
+      component: "ItemSlot",
+      importPath: "@/components/atoms/ItemSlot",
+      category: "layout"
+    },
+    "mini-map": {
+      component: "MiniMap",
+      importPath: "@/components/atoms/MiniMap",
+      category: "component"
+    },
+    "resource-counter": {
+      component: "ResourceCounter",
+      importPath: "@/components/atoms/ResourceCounter",
+      category: "component"
+    },
+    "status-effect": {
+      component: "StatusEffect",
+      importPath: "@/components/atoms/StatusEffect",
+      category: "display"
+    },
+    "timer-display": {
+      component: "TimerDisplay",
+      importPath: "@/components/atoms/TimerDisplay",
+      category: "component"
+    },
+    "turn-indicator": {
+      component: "TurnIndicator",
+      importPath: "@/components/atoms/TurnIndicator",
+      category: "component"
+    },
+    "waypoint-marker": {
+      component: "WaypointMarker",
+      importPath: "@/components/atoms/WaypointMarker",
+      category: "component"
+    },
+    "x-p-bar": {
+      component: "XPBar",
+      importPath: "@/components/atoms/XPBar",
+      category: "component"
+    },
+    "crafting-recipe": {
+      component: "CraftingRecipe",
+      importPath: "@/components/molecules/CraftingRecipe",
+      category: "component"
+    },
+    "enemy-plate": {
+      component: "EnemyPlate",
+      importPath: "@/components/molecules/EnemyPlate",
+      category: "component"
+    },
+    "game-canvas2-d": {
+      component: "GameCanvas2D",
+      importPath: "@/components/molecules/GameCanvas2D",
+      category: "game"
+    },
+    "health-panel": {
+      component: "HealthPanel",
+      importPath: "@/components/molecules/HealthPanel",
+      category: "component"
+    },
+    "inventory-grid": {
+      component: "InventoryGrid",
+      importPath: "@/components/molecules/InventoryGrid",
+      category: "game"
+    },
+    "powerup-slots": {
+      component: "PowerupSlots",
+      importPath: "@/components/molecules/PowerupSlots",
+      category: "layout"
+    },
+    "quest-tracker": {
+      component: "QuestTracker",
+      importPath: "@/components/molecules/QuestTracker",
+      category: "component"
+    },
+    "resource-bar": {
+      component: "ResourceBar",
+      importPath: "@/components/molecules/ResourceBar",
+      category: "component"
+    },
+    "score-board": {
+      component: "ScoreBoard",
+      importPath: "@/components/molecules/ScoreBoard",
+      category: "game"
+    },
+    "turn-panel": {
+      component: "TurnPanel",
+      importPath: "@/components/molecules/TurnPanel",
+      category: "component"
+    },
+    "unit-command-bar": {
+      component: "UnitCommandBar",
+      importPath: "@/components/molecules/UnitCommandBar",
+      category: "component"
+    },
     heading: {
       component: "Typography",
       importPath: "@/components/atoms/Typography",
@@ -16006,7 +18705,7 @@ var component_mapping_default = {
 // src/event-contracts.json
 var event_contracts_default = {
   version: "1.0.0",
-  exportedAt: "2026-03-09T08:08:00.655Z",
+  exportedAt: "2026-03-11T04:10:55.563Z",
   contracts: {
     form: {
       emits: [
@@ -17138,7 +19837,7 @@ var event_contracts_default = {
         }
       ],
       requires: [],
-      entityAware: true
+      entityAware: false
     },
     "trait-slot": {
       emits: [