@almadar/patterns 2.2.0 → 2.5.0

package/dist/index.js

@@ -1,7 +1,7 @@
 // src/patterns-registry.json
 var patterns_registry_default = {
   version: "1.0.0",
-  exportedAt: "2026-03-08T11:32:49.899Z",
+  exportedAt: "2026-03-10T17:18:23.379Z",
   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)"
         }
       }
     },
@@ -3455,15 +3468,17 @@ var patterns_registry_default = {
         },
         icon: {
           types: [
-            "icon"
+            "icon",
+            "string"
           ],
-          description: "Left icon as Lucide icon component (convenience prop, renders with default size)"
+          description: 'Left icon as Lucide icon component or string name (e.g. "plus", "trash")'
         },
         iconRight: {
           types: [
-            "icon"
+            "icon",
+            "string"
           ],
-          description: "Right icon as Lucide icon component (convenience prop)"
+          description: "Right icon as Lucide icon component or string name"
         },
         action: {
           types: [
@@ -3513,6 +3528,18 @@ var patterns_registry_default = {
             "number"
           ],
           description: "Numeric count or amount to display in badge"
+        },
+        label: {
+          types: [
+            "string"
+          ],
+          description: "Badge label text (alternative to children for schema-driven rendering)"
+        },
+        icon: {
+          types: [
+            "node"
+          ],
+          description: "Icon name (Lucide icon string) or React node"
         }
       }
     },
@@ -3745,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"
         }
       }
     },
@@ -4847,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)"
         }
       }
     },
@@ -8479,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",
@@ -12604,6 +12649,7 @@ var patterns_registry_default = {
       propsSchema: {
         preset: {
           types: [
+            "string",
             "physicspreset"
           ],
           description: "preset prop",
@@ -13708,6 +13754,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}"
         }
       }
     },
@@ -14020,206 +14090,1649 @@ var patterns_registry_default = {
         }
       }
     },
-    heading: {
-      type: "heading",
-      category: "component",
-      description: "Alias for typography \u2014 Typography Atom Component  Text elements following the KFlow design system with theme-aware styling.",
+    "data-grid": {
+      type: "data-grid",
+      category: "display",
+      description: "DataGrid component",
       suggestedFor: [
-        "typography"
+        "data",
+        "grid",
+        "data grid"
       ],
-      typicalSize: "small",
+      typicalSize: "medium",
       propsSchema: {
-        variant: {
+        entity: {
           types: [
-            "typographyvariant"
+            "unknown"
           ],
-          description: "Typography variant"
+          description: "Entity data array"
         },
-        level: {
+        fields: {
+          types: [
+            "unknown"
+          ],
+          description: "Field definitions for rendering each card"
+        },
+        columns: {
+          types: [
+            "unknown"
+          ],
+          description: "Alias for fields (compiler generates `columns` for field definitions)"
+        },
+        itemActions: {
+          types: [
+            "unknown"
+          ],
+          description: "Per-item action buttons"
+        },
+        cols: {
           types: [
             "number"
           ],
-          description: "Heading level (1-6) - alternative to variant for headings"
+          description: "Number of columns (uses auto-fit if omitted)"
         },
-        color: {
+        gap: {
           types: [
             "string"
           ],
-          description: "Text color"
+          description: "Gap between cards"
         },
-        align: {
+        minCardWidth: {
           types: [
-            "string"
+            "number"
           ],
-          description: "Text alignment"
+          description: "Minimum card width in pixels (used when cols is not set, default 280)"
         },
-        weight: {
+        className: {
           types: [
             "string"
           ],
-          description: "Font weight override"
+          description: "Additional CSS classes"
         },
-        size: {
+        isLoading: {
           types: [
-            "typographysize"
+            "boolean"
           ],
-          description: "Font size override"
+          description: "Loading state"
         },
-        truncate: {
+        error: {
           types: [
-            "boolean"
+            "error"
           ],
-          description: "Truncate with ellipsis (single line)"
+          description: "Error state"
         },
-        overflow: {
+        imageField: {
           types: [
             "string"
           ],
-          description: "Overflow handling mode"
+          description: "Entity field name containing an image URL for card thumbnails"
         },
-        as: {
+        selectable: {
           types: [
-            "unknown"
+            "boolean"
           ],
-          description: "Custom HTML element"
+          description: "Enable multi-select with checkboxes"
         },
-        id: {
+        selectionEvent: {
           types: [
             "string"
           ],
-          description: "HTML id attribute"
+          description: "Selection change event name (emits UI:{selectionEvent} with { selectedIds: string[] })"
         },
-        className: {
+        infiniteScroll: {
           types: [
-            "string"
+            "boolean"
           ],
-          description: "Additional class names"
+          description: "Enable infinite scroll loading"
         },
-        style: {
+        loadMoreEvent: {
           types: [
-            "object"
+            "string"
           ],
-          description: "Inline style"
+          description: "Event emitted when more items needed: UI:{loadMoreEvent}"
         },
-        content: {
+        hasMore: {
           types: [
-            "node"
+            "boolean"
           ],
-          description: "Text content (alternative to children)"
+          description: "Whether more items are available for infinite scroll"
         },
         children: {
           types: [
-            "node"
+            "function"
           ],
-          description: "Children elements"
+          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).'
         }
       }
     },
-    text: {
-      type: "text",
-      category: "component",
-      description: "Alias for typography \u2014 Typography Atom Component  Text elements following the KFlow design system with theme-aware styling.",
+    "data-list": {
+      type: "data-list",
+      category: "display",
+      description: "DataList component",
       suggestedFor: [
-        "typography"
+        "data",
+        "list",
+        "data list"
       ],
-      typicalSize: "small",
+      typicalSize: "medium",
       propsSchema: {
+        entity: {
+          types: [
+            "unknown"
+          ],
+          description: "Entity data array"
+        },
+        fields: {
+          types: [
+            "unknown"
+          ],
+          description: "Field definitions for rendering each row"
+        },
+        columns: {
+          types: [
+            "unknown"
+          ],
+          description: "Alias for fields (compiler may generate `columns` for field definitions)"
+        },
+        itemActions: {
+          types: [
+            "unknown"
+          ],
+          description: "Per-item action buttons"
+        },
+        gap: {
+          types: [
+            "string"
+          ],
+          description: "Gap between rows"
+        },
         variant: {
           types: [
-            "typographyvariant"
+            "string"
           ],
-          description: "Typography variant"
+          description: "Visual variant"
         },
-        level: {
+        groupBy: {
           types: [
-            "number"
+            "string"
           ],
-          description: "Heading level (1-6) - alternative to variant for headings"
+          description: "Group items by a field value (renders section headers between groups)"
         },
-        color: {
+        senderField: {
           types: [
             "string"
           ],
-          description: "Text color"
+          description: 'Field name identifying the sender (used with variant: "message")'
         },
-        align: {
+        currentUser: {
           types: [
             "string"
           ],
-          description: "Text alignment"
+          description: 'Current user identifier; messages matching this value align right (used with variant: "message")'
         },
-        weight: {
+        className: {
           types: [
             "string"
           ],
-          description: "Font weight override"
+          description: "Additional CSS classes"
         },
-        size: {
+        isLoading: {
           types: [
-            "typographysize"
+            "boolean"
           ],
-          description: "Font size override"
+          description: "Loading state"
         },
-        truncate: {
+        error: {
+          types: [
+            "error"
+          ],
+          description: "Error state"
+        },
+        reorderable: {
           types: [
             "boolean"
           ],
-          description: "Truncate with ellipsis (single line)"
+          description: "Enable drag-to-reorder with grip handles"
         },
-        overflow: {
+        reorderEvent: {
           types: [
             "string"
           ],
-          description: "Overflow handling mode"
+          description: "Event emitted on reorder: UI:{reorderEvent} with { fromIndex, toIndex }"
         },
-        as: {
+        swipeLeftEvent: {
+          types: [
+            "string"
+          ],
+          description: "Event emitted on left swipe: UI:{swipeLeftEvent} with { row }"
+        },
+        swipeLeftActions: {
           types: [
             "unknown"
           ],
-          description: "Custom HTML element"
+          description: "Actions revealed on left swipe"
         },
-        id: {
+        swipeRightEvent: {
           types: [
             "string"
           ],
-          description: "HTML id attribute"
+          description: "Event emitted on right swipe: UI:{swipeRightEvent} with { row }"
         },
-        className: {
+        swipeRightActions: {
+          types: [
+            "unknown"
+          ],
+          description: "Actions revealed on right swipe"
+        },
+        longPressEvent: {
           types: [
             "string"
           ],
-          description: "Additional class names"
+          description: "Event emitted on long press: UI:{longPressEvent} with { row }"
         },
-        style: {
+        infiniteScroll: {
           types: [
-            "object"
+            "boolean"
           ],
-          description: "Inline style"
+          description: "Enable infinite scroll loading"
         },
-        content: {
+        loadMoreEvent: {
           types: [
-            "node"
+            "string"
           ],
-          description: "Text content (alternative to children)"
+          description: "Event emitted when more items needed: UI:{loadMoreEvent}"
+        },
+        hasMore: {
+          types: [
+            "boolean"
+          ],
+          description: "Whether more items are available for infinite scroll"
         },
         children: {
           types: [
-            "node"
+            "function"
           ],
-          description: "Children elements"
+          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.'
         }
       }
-    }
-  },
-  categories: [
-    "display",
-    "header",
-    "form",
-    "filter",
-    "navigation",
-    "state",
-    "dashboard",
-    "container",
+    },
+    "platformer-canvas": {
+      type: "platformer-canvas",
+      category: "game",
+      description: "PlatformerCanvas component",
+      suggestedFor: [
+        "platformer",
+        "canvas",
+        "platformer canvas"
+      ],
+      typicalSize: "large",
+      propsSchema: {
+        player: {
+          types: [
+            "platformerplayer"
+          ],
+          description: "Player entity 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"
+        },
+        entity: {
+          types: [
+            "object"
+          ],
+          description: "Entity data (schema binding)"
+        }
+      }
+    },
+    "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"
+        }
+      }
+    },
+    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"
+          ],
+          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"
+        }
+      }
+    }
+  },
+  categories: [
+    "display",
+    "header",
+    "form",
+    "filter",
+    "navigation",
+    "state",
+    "dashboard",
+    "container",
     "layout",
     "game",
     "debug",
@@ -14836,7 +16349,7 @@ var integrators_registry_default = {
 // src/component-mapping.json
 var component_mapping_default = {
   version: "1.0.0",
-  exportedAt: "2026-03-08T11:32:49.899Z",
+  exportedAt: "2026-03-10T17:18:23.379Z",
   mappings: {
     "page-header": {
       component: "PageHeader",
@@ -15293,7 +16806,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": {
@@ -15413,7 +16931,7 @@ var component_mapping_default = {
     },
     meter: {
       component: "Meter",
-      importPath: "@almadar/ui",
+      importPath: "@/components/molecules/Meter",
       category: "visualization"
     },
     timeline: {
@@ -15816,6 +17334,16 @@ var component_mapping_default = {
       importPath: "@/components/molecules/GraphView",
       category: "component"
     },
+    "data-grid": {
+      component: "DataGrid",
+      importPath: "@/components/molecules/DataGrid",
+      category: "display"
+    },
+    "data-list": {
+      component: "DataList",
+      importPath: "@/components/molecules/DataList",
+      category: "display"
+    },
     "line-chart": {
       component: "LineChart",
       importPath: "@/components/molecules/LineChart",
@@ -15826,6 +17354,91 @@ 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"
+    },
     heading: {
       component: "Typography",
       importPath: "@/components/atoms/Typography",
@@ -15842,7 +17455,7 @@ var component_mapping_default = {
 // src/event-contracts.json
 var event_contracts_default = {
   version: "1.0.0",
-  exportedAt: "2026-03-08T11:32:49.899Z",
+  exportedAt: "2026-03-10T17:18:23.379Z",
   contracts: {
     form: {
       emits: [