laif-ds 1.0.1 → 1.0.2-app-data-grid.76

package/dist/agent-docs/adoption-report.json

@@ -1,23 +1,78 @@
 {
   "schemaVersion": "1.0.0",
-  "generatedAt": "2026-09-17T14:06:59.977Z",
+  "generatedAt": "2026-09-22T08:46:36.530Z",
   "package": {
     "name": "laif-ds",
-    "version": "1.0.1"
+    "version": "1.0.2-app-data-grid.76"
   },
   "summary": {
-    "scannedFiles": 404,
-    "deprecatedComponentsCount": 2,
-    "deprecatedComponentsUsedCount": 0,
+    "scannedFiles": 487,
+    "deprecatedComponentsCount": 4,
+    "deprecatedComponentsUsedCount": 2,
     "componentsWithoutExamplesCount": 5,
     "componentsWithoutPropsTableCount": 30,
     "repeatedClassPatternsCount": 25,
-    "lowAiReadinessComponentsCount": 41,
+    "lowAiReadinessComponentsCount": 42,
     "componentsWithoutAccessibilityCoverageCount": 45,
-    "componentsWithWeakStateCoverageCount": 71,
-    "averageAiReadinessScore": 56.17
+    "componentsWithWeakStateCoverageCount": 73,
+    "averageAiReadinessScore": 56.55
   },
-  "deprecatedUsage": [],
+  "deprecatedUsage": [
+    {
+      "component": "DataTable",
+      "replacement": "AppDataGrid",
+      "totalOccurrences": 12,
+      "usages": [
+        {
+          "file": "src/components/design-tokens.ts",
+          "occurrences": 2
+        },
+        {
+          "file": "src/components/ui/app-data-grid/parts/grid-scroll-area.tsx",
+          "occurrences": 2
+        },
+        {
+          "file": "src/components/ui/tables/data-table/data-table.tsx",
+          "occurrences": 2
+        },
+        {
+          "file": "src/components/ui/app-data-grid/app-data-grid.tsx",
+          "occurrences": 1
+        },
+        {
+          "file": "src/components/ui/app-data-grid/app-data-grid.types.ts",
+          "occurrences": 1
+        },
+        {
+          "file": "src/components/ui/app-data-grid/grid-filter-operators.ts",
+          "occurrences": 1
+        },
+        {
+          "file": "src/components/ui/app-data-grid/grid-i18n.ts",
+          "occurrences": 1
+        },
+        {
+          "file": "src/components/ui/app-select.tsx",
+          "occurrences": 1
+        },
+        {
+          "file": "src/components/ui/tables/data-table/data-table.utils.ts",
+          "occurrences": 1
+        }
+      ]
+    },
+    {
+      "component": "SidebarMenuBadge",
+      "replacement": "NavItem.badge",
+      "totalOccurrences": 4,
+      "usages": [
+        {
+          "file": "src/components/ui/sidebar.tsx",
+          "occurrences": 4
+        }
+      ]
+    }
+  ],
   "documentationGaps": {
     "componentsWithoutExamples": [
       "AppMultipleSelectDropdown",
@@ -136,6 +191,7 @@
       "FilePreviewer",
       "Form",
       "GanttChart",
+      "GridFilterPanel",
       "HoverCard",
       "Icon",
       "Input",
@@ -161,6 +217,7 @@
       "Sheet",
       "ShikiHighlighter",
       "Sidebar",
+      "SidebarMenuBadge",
       "Skeleton",
       "Slider",
       "Sonner",
@@ -317,6 +374,10 @@
         "name": "SecurePdfViewer",
         "score": 40
       },
+      {
+        "name": "SidebarMenuBadge",
+        "score": 40
+      },
       {
         "name": "Toggle",
         "score": 40
@@ -351,13 +412,16 @@
     "repeatedClassNames": [
       {
         "className": "flex items-center gap-2",
-        "occurrences": 36,
+        "occurrences": 41,
         "files": [
           "src/components/stories/app-checkbox.stories.tsx",
+          "src/components/stories/app-data-grid-completa.stories.tsx",
+          "src/components/stories/app-data-grid-confronto.stories.tsx",
           "src/components/stories/app-dialog.stories.tsx",
           "src/components/stories/app-radio-group.stories.tsx",
           "src/components/stories/app-select.stories.tsx",
           "src/components/stories/app-tooltip.stories.tsx",
+          "src/components/stories/AppDataGrid.mockup.stories.tsx",
           "src/components/stories/badge.stories.tsx",
           "src/components/stories/button.stories.tsx",
           "src/components/stories/data-table-docs.stories.tsx",
@@ -446,6 +510,36 @@
           "src/components/stories/switch.stories.tsx"
         ]
       },
+      {
+        "className": "text-sm font-semibold",
+        "occurrences": 14,
+        "files": [
+          "src/components/stories/app-bottom-nav.stories.tsx",
+          "src/components/stories/app-data-grid-confronto.stories.tsx",
+          "src/components/stories/AppDataGrid.mockup.stories.tsx",
+          "src/components/stories/collapsible.stories.tsx",
+          "src/components/stories/data-table-utils-example.stories.tsx",
+          "src/components/stories/truncated-cell.stories.tsx",
+          "src/components/ui/weekly-calendar/appointment-card.tsx"
+        ]
+      },
+      {
+        "className": "text-d-muted-foreground",
+        "occurrences": 14,
+        "files": [
+          "src/components/stories/app-data-grid-completa.stories.tsx",
+          "src/components/stories/app-data-grid-preset.stories.tsx",
+          "src/components/stories/app-dialog.stories.tsx",
+          "src/components/stories/app-time-picker.stories.tsx",
+          "src/components/stories/AppDataGrid.mockup.stories.tsx",
+          "src/components/ui/app-data-grid/parts/grid-toolbar-slots.tsx",
+          "src/components/ui/app-form.tsx",
+          "src/components/ui/app-multiple-select-dropdown.tsx",
+          "src/components/ui/app-select.tsx",
+          "src/components/ui/date-picker.tsx",
+          "src/components/ui/weekly-calendar/calendar-header.tsx"
+        ]
+      },
       {
         "className": "border-d-border bg-d-muted rounded-lg border p-4",
         "occurrences": 14,
@@ -468,6 +562,21 @@
           "src/components/stories/sidebar.stories.tsx"
         ]
       },
+      {
+        "className": "text-d-muted-foreground text-xs",
+        "occurrences": 11,
+        "files": [
+          "src/components/editor/plugins/mention-plugin.tsx",
+          "src/components/stories/app-card.stories.tsx",
+          "src/components/stories/AppDataGrid.mockup.stories.tsx",
+          "src/components/stories/button.stories.tsx",
+          "src/components/stories/input.stories.tsx",
+          "src/components/ui/app-data-grid/parts/grid-filter-editor.tsx",
+          "src/components/ui/tables/data-cross-table/cell-editor-dialog.tsx",
+          "src/components/ui/tables/data-cross-table/data-cross-table.tsx",
+          "src/components/ui/tables/data-cross-table/editable-input.tsx"
+        ]
+      },
       {
         "className": "flex w-[550px] flex-col gap-6",
         "occurrences": 10,
@@ -476,6 +585,14 @@
           "src/components/stories/app-radio-group.stories.tsx"
         ]
       },
+      {
+        "className": "text-d-foreground text-xs",
+        "occurrences": 9,
+        "files": [
+          "src/components/stories/AppDataGrid.mockup.stories.tsx",
+          "src/components/ui/app-select.tsx"
+        ]
+      },
       {
         "className": "text-d-muted-foreground max-w-prose text-sm",
         "occurrences": 9,
@@ -492,16 +609,14 @@
         ]
       },
       {
-        "className": "text-d-muted-foreground text-xs",
+        "className": "text-lg font-semibold",
         "occurrences": 8,
         "files": [
-          "src/components/editor/plugins/mention-plugin.tsx",
-          "src/components/stories/app-card.stories.tsx",
-          "src/components/stories/button.stories.tsx",
-          "src/components/stories/input.stories.tsx",
-          "src/components/ui/tables/data-cross-table/cell-editor-dialog.tsx",
-          "src/components/ui/tables/data-cross-table/data-cross-table.tsx",
-          "src/components/ui/tables/data-cross-table/editable-input.tsx"
+          "src/components/stories/app-data-grid-confronto.stories.tsx",
+          "src/components/stories/app-kanban.stories.tsx",
+          "src/components/stories/AppDataGrid.mockup.stories.tsx",
+          "src/components/stories/changelog.stories.tsx",
+          "src/components/stories/playground.stories.tsx"
         ]
       },
       {
@@ -538,78 +653,42 @@
         ]
       },
       {
-        "className": "text-d-muted-foreground",
+        "className": "flex items-center gap-1",
         "occurrences": 7,
         "files": [
-          "src/components/stories/app-dialog.stories.tsx",
-          "src/components/stories/app-time-picker.stories.tsx",
-          "src/components/ui/app-form.tsx",
-          "src/components/ui/app-multiple-select-dropdown.tsx",
-          "src/components/ui/app-select.tsx",
-          "src/components/ui/date-picker.tsx",
-          "src/components/ui/weekly-calendar/calendar-header.tsx"
-        ]
-      },
-      {
-        "className": "bg-muted/50 rounded p-4 text-sm",
-        "occurrences": 7,
-        "files": [
-          "src/components/stories/app-select.stories.tsx"
+          "src/components/editor/plugins/toolbar/history-toolbar-plugin.tsx",
+          "src/components/stories/app-select.stories.tsx",
+          "src/components/stories/AppDataGrid.mockup.stories.tsx",
+          "src/components/ui/app-data-grid/parts/grid-group-row.tsx",
+          "src/components/ui/app-kanban.tsx",
+          "src/components/ui/calendar.tsx"
         ]
       },
       {
-        "className": "flex-1 space-y-3 overflow-auto p-4",
+        "className": "min-w-0 flex-1 truncate",
         "occurrences": 7,
         "files": [
-          "src/components/stories/app-sidebar.stories.tsx"
+          "src/components/stories/AppDataGrid.mockup.stories.tsx",
+          "src/components/ui/app-select.tsx",
+          "src/components/ui/app-sidebar.tsx"
         ]
       },
       {
-        "className": "border-d-border border px-3 py-1 text-center text-sm font-light",
+        "className": "flex flex-wrap gap-2",
         "occurrences": 7,
         "files": [
-          "src/components/stories/badge.stories.tsx",
-          "src/components/stories/button.stories.tsx"
+          "src/components/stories/app-card.stories.tsx",
+          "src/components/stories/app-data-grid-filtri-custom.stories.tsx",
+          "src/components/stories/AppDataGrid.mockup.stories.tsx",
+          "src/components/stories/file-preview.stories.tsx",
+          "src/components/stories/toaster.stories.tsx"
         ]
       },
       {
-        "className": "flex flex-col items-center gap-2",
+        "className": "bg-muted/50 rounded p-4 text-sm",
         "occurrences": 7,
         "files": [
-          "src/components/stories/icon.stories.tsx",
-          "src/components/stories/spinner.stories.tsx"
-        ]
-      },
-      {
-        "className": "flex items-center gap-1 font-normal",
-        "occurrences": 6,
-        "files": [
-          "src/components/editor/plugins/toolbar/block-format/format-bulleted-list.tsx",
-          "src/components/editor/plugins/toolbar/block-format/format-check-list.tsx",
-          "src/components/editor/plugins/toolbar/block-format/format-heading.tsx",
-          "src/components/editor/plugins/toolbar/block-format/format-numbered-list.tsx",
-          "src/components/editor/plugins/toolbar/block-format/format-paragraph.tsx",
-          "src/components/editor/plugins/toolbar/block-format/format-quote.tsx"
-        ]
-      },
-      {
-        "className": "text-sm font-semibold",
-        "occurrences": 6,
-        "files": [
-          "src/components/stories/app-bottom-nav.stories.tsx",
-          "src/components/stories/collapsible.stories.tsx",
-          "src/components/stories/data-table-utils-example.stories.tsx",
-          "src/components/stories/truncated-cell.stories.tsx",
-          "src/components/ui/weekly-calendar/appointment-card.tsx"
-        ]
-      },
-      {
-        "className": "text-lg font-semibold",
-        "occurrences": 6,
-        "files": [
-          "src/components/stories/app-kanban.stories.tsx",
-          "src/components/stories/changelog.stories.tsx",
-          "src/components/stories/playground.stories.tsx"
+          "src/components/stories/app-select.stories.tsx"
         ]
       }
     ]

package/dist/agent-docs/components/AppBottomNav.md

@@ -231,14 +231,13 @@ claymorphism theme, while the dock around it is a fixed `rounded-t-lg`.
 - **Parent whose child is current** (any `subItems[].isActive`) → the cell is a
   `<button>`, marked, **without** `aria-current`: a button is not a page, it is a
   disclosure. So the app only has to mark the leaf.
-- **Nothing in the bar owns the route** → the **Menu** cell takes the pill, with
-  no `aria-current` and no `aria-expanded="true"`. Five neutral cells read as
-  "the component failed to work out where I am"; the truthful statement is "the
-  page you are on is reachable through here", and it is redundant for a screen
-  reader, so nothing is added to the accessibility tree. With
-  `showMenu={false}` there is nothing to hand the pill to and the bar does
-  render entirely neutral — the honest state when every cell is a destination
-  and none of them is the current one.
+- **Nothing in the bar owns the route** → **no cell is marked**, Menu included.
+  The bar renders entirely neutral, exactly as it always has with
+  `showMenu={false}`. The Menu cell is a disclosure, not a destination: the pill
+  means "this is the page you are on", and handing it to a button that opens a
+  panel says that about something which is not a page. A route outside the bar's
+  five destinations is a real state, and the honest way to render it is no pill
+  at all.
 - Two active items is an app bug: the first in order wins and one warning is
   logged.
 

package/dist/agent-docs/components/AppCard.md

@@ -10,24 +10,24 @@ Enhanced card component built on top of the base Card component. Provides a simp
 
 ### AppCardProps
 
-| Prop               | Type                                                                                                   | Default     | Description                                                         |
-| ------------------ | ------------------------------------------------------------------------------------------------------ | ----------- | ------------------------------------------------------------------- |
-| `title`            | `string \| React.ReactNode`                                                                            | `undefined` | Card title displayed in the header.                                 |
-| `description`      | `string \| React.ReactNode`                                                                            | `undefined` | Card description displayed below the title.                         |
-| `header`           | `React.ReactNode`                                                                                      | `undefined` | Custom header content; overrides `title` and `description`.         |
-| `body`             | `React.ReactNode`                                                                                      | `undefined` | Main content rendered inside CardContent.                           |
-| `children`         | `React.ReactNode`                                                                                      | `undefined` | Fallback body content when `body` is not provided.                  |
-| `actions`          | `React.ReactNode`                                                                                      | `undefined` | Right-aligned action elements inside the header.                    |
-| `footer`           | `React.ReactNode`                                                                                      | `undefined` | Footer content (typically action buttons).                          |
-| `variant`          | `AppCardVariant`                                                                                       | `"default"` | Visual variant of the card (see table below).                       |
-| `size`             | `"sm" \| "default" \| "lg" \| "none"`                                                                 | `undefined` | Controls internal padding via the base Card component.              |
-| `isLoading`        | `boolean`                                                                                              | `false`     | When true, renders skeleton placeholders instead of content.        |
-| `showHeaderBorder` | `boolean`                                                                                              | `false`     | Displays a border between the header and body sections.             |
-| `showFooterBorder` | `boolean`                                                                                              | `false`     | Displays a border between the body and footer sections.             |
-| `className`        | `string`                                                                                               | `undefined` | Additional classes for the card container.                          |
-| `headerClassName`  | `string`                                                                                               | `undefined` | Additional classes for the header section.                          |
-| `bodyClassName`    | `string`                                                                                               | `undefined` | Additional classes for the body section.                            |
-| `footerClassName`  | `string`                                                                                               | `undefined` | Additional classes for the footer section.                          |
+| Prop               | Type                                  | Default     | Description                                                  |
+| ------------------ | ------------------------------------- | ----------- | ------------------------------------------------------------ |
+| `title`            | `string \| React.ReactNode`           | `undefined` | Card title displayed in the header.                          |
+| `description`      | `string \| React.ReactNode`           | `undefined` | Card description displayed below the title.                  |
+| `header`           | `React.ReactNode`                     | `undefined` | Custom header content; overrides `title` and `description`.  |
+| `body`             | `React.ReactNode`                     | `undefined` | Main content rendered inside CardContent.                    |
+| `children`         | `React.ReactNode`                     | `undefined` | Fallback body content when `body` is not provided.           |
+| `actions`          | `React.ReactNode`                     | `undefined` | Right-aligned action elements inside the header.             |
+| `footer`           | `React.ReactNode`                     | `undefined` | Footer content (typically action buttons).                   |
+| `variant`          | `AppCardVariant`                      | `"default"` | Visual variant of the card (see table below).                |
+| `size`             | `"sm" \| "default" \| "lg" \| "none"` | `undefined` | Controls internal padding via the base Card component.       |
+| `isLoading`        | `boolean`                             | `false`     | When true, renders skeleton placeholders instead of content. |
+| `showHeaderBorder` | `boolean`                             | `false`     | Displays a border between the header and body sections.      |
+| `showFooterBorder` | `boolean`                             | `false`     | Displays a border between the body and footer sections.      |
+| `className`        | `string`                              | `undefined` | Additional classes for the card container.                   |
+| `headerClassName`  | `string`                              | `undefined` | Additional classes for the header section.                   |
+| `bodyClassName`    | `string`                              | `undefined` | Additional classes for the body section.                     |
+| `footerClassName`  | `string`                              | `undefined` | Additional classes for the footer section.                   |
 
 ### Variant Reference
 
@@ -203,13 +203,17 @@ export function NestedCards() {
         <div className="flex flex-col gap-3">
           <AppCard
             title="Nested Item A"
-            body={<p className="text-sm">Flat cards have no border or shadow.</p>}
+            body={
+              <p className="text-sm">Flat cards have no border or shadow.</p>
+            }
             variant="flat"
             size="sm"
           />
           <AppCard
             title="Nested Item B"
-            body={<p className="text-sm">Good for secondary content regions.</p>}
+            body={
+              <p className="text-sm">Good for secondary content regions.</p>
+            }
             variant="flat"
             size="sm"
           />
@@ -228,7 +232,7 @@ import { AppCard } from "laif-ds";
 
 export function SizeVariants() {
   return (
-    <div className="flex flex-col gap-6 w-[400px]">
+    <div className="flex w-[400px] flex-col gap-6">
       <AppCard
         size="sm"
         title="Size: Small"