@ai-matrx/design-system 0.22.0 → 0.26.0

package/dist/{types-Sn249eoy.d.cts → types-DrJXAAoD.d.cts}

@@ -1,7 +1,11 @@
 import { ContentTransferReference } from './content-transfer.cjs';
 import { ReactNode } from 'react';
 import { AiVariant, AiCustomSource, CopyExportConfig } from './data-table/copy-types.cjs';
-import { b as FieldFormatConfig } from './types-BdbvlF9-.cjs';
+import { F as FieldFormatConfig } from './types-CJWU1Gae.cjs';
+import { GroupAggregateSpec, GroupOrder } from './data-table/grouping.cjs';
+import { CellPatch } from './data-table/fill.cjs';
+import { ColumnFacets } from './data-table/facets.cjs';
+import { SpreadsheetIntent } from './data-table/spreadsheet.cjs';
 
 type TableSearchRole = "id" | "name" | "description" | "other";
 interface TableSearchScope {
@@ -900,9 +904,49 @@ interface MatrxDataTableExpandedDetailConfig<T> {
     render: (row: T, controls: MatrxDataTableRecordControls) => ReactNode;
     className?: string;
 }
-/** Opaque host-owned row menu descriptor. The package never interprets it. */
+/**
+ * THE FOUR LEVELS of a right-click, as opaque host-owned descriptors.
+ *
+ * A spreadsheet's right-click menu is four menus, chosen by where the pointer
+ * was: the CELL, the ROW it sits in, the COLUMN it sits under, and — when the
+ * click lands inside an extended range — the SELECTION. The canonical table
+ * used to expose exactly one of them, which is why every surface that wanted
+ * the other three forked the table.
+ *
+ * Each resolver is optional and each returns something the package never
+ * interprets; the host builds its menu from it. A level with no resolver here
+ * falls back to the host's own `createDefaultMenuContext`, so a table that
+ * declares nothing still gets all four through the platform's universal menu.
+ */
 interface MatrxDataTableContextMenuConfig<T> {
-    resolveRowContext: (row: T, controls: MatrxDataTableRecordControls) => unknown;
+    resolveRowContext?: (row: T, controls: MatrxDataTableRecordControls) => unknown;
+    resolveCellContext?: (args: {
+        row: T;
+        rowId: string;
+        columnId: string;
+        columnLabel: string;
+        value: unknown;
+        /** The cell's value as text, for the menu's own Copy. */
+        text: string;
+        controls: MatrxDataTableRecordControls;
+    }) => unknown;
+    resolveColumnContext?: (args: {
+        columnId: string;
+        columnLabel: string;
+        /** Every rendered row's value for this column, in visual order. */
+        values: unknown[];
+    }) => unknown;
+    resolveSelectionContext?: (args: {
+        rowIds: string[];
+        columnIds: string[];
+        /** The selected rectangle as an Excel/Sheets-compatible TSV block. */
+        tsv: string;
+        cellCount: number;
+    }) => unknown;
+    resolveTableContext?: (args: {
+        rowCount: number;
+        columnIds: string[];
+    }) => unknown;
 }
 interface MatrxDataTableWindowConfig<T> {
     /** Window title. */
@@ -959,6 +1003,24 @@ interface MatrxDataTableEditConfig<T> {
     autoSave?: boolean;
     /** Optional cancel hook (draft already discarded). */
     onCancel?: () => void;
+    /**
+     * Judge a value the person MEANT to write, before it enters the draft.
+     *
+     * Return a sentence to REFUSE it: the editor stays open, the value is not
+     * taken, and the sentence is shown IN THE CELL, where the person is standing.
+     * Return undefined to accept. Excel's posture, and the reason is the product —
+     * "Amount must be at least 0" is a thing a person can act on; a silent revert
+     * is not.
+     *
+     * It never judges what is already stored: a value that predates the rule is
+     * legal, is never rewritten, and is the point of declaring a rule at all.
+     */
+    validate?: ((args: {
+        row: T;
+        rowId: string;
+        columnId: string;
+        value: unknown;
+    }) => string | undefined) | undefined;
 }
 interface MatrxDataTableHierarchyConfig<T> {
     /** Complete hierarchy when `data` is only the current controlled page. */
@@ -1064,6 +1126,186 @@ interface MatrxDataTableStyleConfig<T> {
      */
     choiceColorFor?: ChoiceColorLookup;
 }
+/**
+ * GROUPING — "group these rows by Status" with collapsible sections, a count
+ * and a subtotal on each.
+ *
+ * This is the primitive's answer to the biggest gap against Airtable, Google
+ * Sheets and Notion. It is opt-in, and it is CONTROLLED for the two pieces of
+ * state a person expects to survive: which column groups, and which sections
+ * are shut. Both are ordinary values, so a saved view carries them like any
+ * other reading of the table.
+ *
+ * Grouping runs AFTER local processing and over the rows the table is about to
+ * render. It never re-sorts inside a group: the sort the person chose is the
+ * order they see.
+ */
+interface MatrxDataTableGroupingConfig<T> {
+    /** Column id to group by. `null` means grouping is available but off. */
+    columnId: string | null;
+    /** Emitted when the person picks a different column (or clears it). */
+    onColumnIdChange?: ((columnId: string | null) => void) | undefined;
+    /**
+     * Columns offered in the group-by control. Defaults to every visible column
+     * that is not an actions column. A column with thousands of distinct values
+     * is a bad grouping and the consumer is the only one who knows that.
+     */
+    groupableColumnIds?: string[] | undefined;
+    /** Per-column subtotal shown on every group header, keyed by column id. */
+    aggregates?: Record<string, GroupAggregateSpec> | undefined;
+    /** Controlled collapsed group keys (`TableGroup.key`). */
+    collapsed?: string[] | undefined;
+    onCollapsedChange?: ((collapsed: string[]) => void) | undefined;
+    /** Section order. Default `"value-asc"`; blanks always sort last. */
+    order?: GroupOrder | undefined;
+    /** Label for the section of rows whose grouping value is blank. */
+    emptyLabel?: string | undefined;
+    /** Singular noun for a group's summary ("job" → "12 jobs"). */
+    rowNoun?: string | undefined;
+    /**
+     * Reads the grouping value for a column. Defaults to the column's own
+     * accessor.
+     *
+     * NOT named `valueOf`: every object in JavaScript already has one, so an
+     * optional config field by that name is always "present" and a `config.valueOf
+     * ? … : …` check silently calls `Object.prototype.valueOf` and groups every
+     * row under the config object itself. It did exactly that here once.
+     */
+    readCell?: ((row: T, columnId: string) => unknown) | undefined;
+}
+/**
+ * VIRTUALIZATION — render the rows a person can actually see.
+ *
+ * Off by default, because most tables in the product are short and a windowed
+ * body costs a scroll container contract that a short table does not need.
+ * On, it engages only past `threshold` rows, so a 40-row table behaves exactly
+ * as it always did and a 100,000-row table scrolls.
+ */
+interface MatrxDataTableVirtualizeConfig {
+    enabled?: boolean | undefined;
+    /** Row height in px used for the window math. Default follows density. */
+    rowHeight?: number | undefined;
+    /** Rows rendered beyond each edge of the viewport. Default 8. */
+    overscan?: number | undefined;
+    /** Row count below which the body renders whole. Default 150. */
+    threshold?: number | undefined;
+    /**
+     * Window the COLUMNS too, for tables hundreds of columns wide. Frozen
+     * columns are always rendered, never windowed out.
+     */
+    columns?: boolean | undefined;
+    /** Column width in px used for the horizontal window. Default 160. */
+    columnWidth?: number | undefined;
+}
+/**
+ * THE HONEST COUNT.
+ *
+ * A table that filters over part of its rows and says nothing is a screen that
+ * lies. Declare what the answer actually covers and the table states it, in
+ * plain English, above the rows — and never presents a partial count as exact.
+ *
+ * Omit this entirely and the table says nothing, which is correct for a table
+ * whose rows are all in hand.
+ */
+interface MatrxDataTableCoverageConfig {
+    /** Rows the source says match the current query, when it can say. */
+    matched?: number | undefined;
+    /** Rows in the table irrespective of the query, when known. */
+    total?: number | undefined;
+    /** A ceiling the source imposed on this answer (a fetch cap). */
+    cap?: number | undefined;
+    /** Who answered the filters and sort. Default `"client"`. */
+    answeredBy?: "source" | "client" | undefined;
+    /** Singular noun for the sentence. Default "row". */
+    noun?: string | undefined;
+}
+/**
+ * SPREADSHEET GESTURES — range selection, Excel paste, fill, undo.
+ *
+ * The `/data` grid had all of this and nothing else in the product could reach
+ * it. Opt-in, because a reference table with one editable column does not want
+ * a cell cursor; a table a person works IN does.
+ *
+ * The table owns the gestures and the selection rectangle; the CONSUMER owns
+ * the writes. Every mutation arrives as a list of `CellPatch`, so the caller
+ * applies it through the door it already has and the table never invents a
+ * persistence path of its own. That is also what makes undo honest: the stack
+ * holds before-values, and an undo is just another patch list.
+ */
+interface MatrxDataTableSpreadsheetConfig<T> {
+    enabled?: boolean | undefined;
+    /**
+     * Apply cell writes. Called for a paste, a fill-down, a fill-handle drag, a
+     * clear, an undo and a redo. The table re-reads from `data`, so a write the
+     * caller refuses simply never appears.
+     */
+    onPatch: (patches: CellPatch[], intent: SpreadsheetIntent) => void | Promise<void>;
+    /** Column ids a patch may target. Defaults to every column marked `editable`. */
+    writableColumnIds?: string[] | undefined;
+    /** Why a column refuses a write, as a sentence a person can act on. */
+    columnRefusal?: ((columnId: string) => string | undefined) | undefined;
+    /** Reads a cell for copy and fill. Defaults to the column's own accessor. */
+    readCell?: ((row: T, columnId: string) => unknown) | undefined;
+    /** The little square at the corner of a selection. Default true. */
+    fillHandle?: boolean | undefined;
+    /** Paste real Excel/Sheets TSV into the selection. Default true. */
+    paste?: boolean | undefined;
+    /** Undo depth. 0 turns undo off. Default 100. */
+    undoDepth?: number | undefined;
+    /** Says what just happened, and why something did not. */
+    notify?: ((message: string) => void) | undefined;
+    /**
+     * Judge ONE value before it is written, for a paste, a fill or a clear.
+     *
+     * Return a sentence to REFUSE it — the cell is left alone and the sentence is
+     * what the person is told. Return undefined to accept. This is the same rule
+     * the inline editor enforces (`edit.validate`), asked in the one other place
+     * a value can enter a cell, because a rule a paste can walk around is not a
+     * rule.
+     */
+    validateCell?: ((args: {
+        rowId: string;
+        columnId: string;
+        value: unknown;
+    }) => string | undefined) | undefined;
+}
+/**
+ * THE VALUES A COLUMN HOLDS, with a count beside each one.
+ *
+ * A filter that only offers "Contains…" asks the reader to already know what is
+ * in the column. The checklist tells them, and the counts are what make it
+ * usable: "Blocked 12" is a decision, "Blocked" is a guess.
+ *
+ * THE HONESTY RULE: counts are computed in the browser ONLY when the browser
+ * holds every row they describe. Otherwise `source` is asked — the database
+ * counts over the whole column — and if there is no source, the popover SAYS
+ * the counts cover only the loaded rows. A partial count is never printed as if
+ * it were the whole truth.
+ */
+interface MatrxDataTableFacetsConfig<T> {
+    enabled?: boolean | undefined;
+    /**
+     * Database-computed values and counts for one column. Called only when the
+     * rows in the browser do not cover `totalRows` — local-data-first is the same
+     * rule for every source. Return null (or throw) and the popover says so and
+     * falls back to matching text.
+     */
+    source?: ((args: {
+        columnId: string;
+        search: string;
+        limit: number;
+    }) => Promise<ColumnFacets | null>) | undefined;
+    /**
+     * Rows the whole table holds after the active search. This is how the table
+     * knows whether the rows it has are all of them. Omit it and the table treats
+     * its own rows as a partial answer and says so.
+     */
+    totalRows?: number | undefined;
+    /** Most values to list. Default 200, hard ceiling 500. */
+    limit?: number | undefined;
+    /** Reads a cell for counting. Defaults to the column's own filter accessor. */
+    readCell?: ((row: T, columnId: string) => unknown) | undefined;
+}
 interface MatrxDataTableProps<T> {
     data: T[];
     columns: MatrxColumnDef<T>[];
@@ -1193,6 +1435,28 @@ interface MatrxDataTableProps<T> {
      * person edits it.
      */
     tableStyle?: MatrxDataTableStyleConfig<T>;
+    /**
+     * GROUPS — collapsible sections by a column, with a count and per-column
+     * subtotals on each header. Opt-in and controlled; see the config's own doc.
+     */
+    grouping?: MatrxDataTableGroupingConfig<T>;
+    /** Render only the rows in view. Opt-in; engages past its own threshold. */
+    virtualize?: boolean | MatrxDataTableVirtualizeConfig;
+    /**
+     * What the current answer actually covers. Declare it and the table says so
+     * on screen when a filter is answering over part of the table, instead of
+     * presenting a partial count as the whole truth.
+     */
+    coverage?: MatrxDataTableCoverageConfig;
+    /** Range selection, Excel paste, fill handle, fill-down, undo. Opt-in. */
+    spreadsheet?: MatrxDataTableSpreadsheetConfig<T>;
+    /** Real values with their counts in every column filter popover. */
+    facets?: MatrxDataTableFacetsConfig<T>;
+    /**
+     * Explicit body row height in px. Overrides the density default. Use it when
+     * a saved view remembers a row height the person chose.
+     */
+    rowHeight?: number;
     /** Highlight an index in the currently rendered page without selecting it. */
     highlightedIndex?: number | undefined;
     /** Receives the complete visible local view after local processing, before paging. Attaching after absence receives one snapshot; callback identity changes alone do not notify. */
@@ -1258,4 +1522,4 @@ interface MatrxDataTableProps<T> {
     onRowOpen?: (row: T) => void;
 }
 
-export { TABLE_STYLE_METADATA_KEY as $, type AnyOfColumnSearch as A, BOOLEAN_TRUE_COLOR as B, type ColumnFiltersState as C, type MatrxDataTableHierarchyMove as D, EMPTY_TABLE_STYLE as E, type MatrxDataTableMobileCardControls as F, type MatrxDataTableQueryControl as G, type MatrxDataTableSelectionConfig as H, type MatrxDataTableSourceProcessing as I, type MatrxDataTableStyleConfig as J, type MatrxDataTableToolbar as K, type LayeredFilterRule as L, type MatrxColumnDef as M, type MatrxDataTableUrlStateConfig as N, type MatrxDataTableWindowConfig as O, type MatrxTablePagination as P, OPS_WITH_VALUE as Q, ROW_TINT_CLASS as R, type SortState as S, type TableSearchMatchMode as T, STYLE_COLORS as U, STYLE_COLOR_LABELS as V, SWATCH_CLASS as W, type SortDirection as X, type StyleColor as Y, type StylePath as Z, type StyleTarget as _, type ColumnFilterValue as a, TABLE_STYLE_VERSION as a0, type TableRankedSearchOptions as a1, type TableSearchRole as a2, type TableSearchScope as a3, type TableStyle as a4, type TableViewQuery as a5, type TextFilterMode as a6, type ToolbarFacet as a7, applyStylePath as a8, colorForChoice as a9, evaluateRule as aa, inferTableSearchRole as ab, isStyleColor as ac, parseTableStyle as ad, rankTableSearchRows as ae, resolveCellColor as af, resolveRowColor as ag, resolveTableSearchScopes as ah, stylePath as ai, tableStyleFromMetadata as aj, tableStyleIsEmpty as ak, LAYERED_FILTER_OPERATORS as al, LAYERED_FILTER_OPERATOR_LABELS as am, type LayeredFilterField as an, type LayeredFilterOperator as ao, columnFiltersToLayeredRules as ap, completeLayeredFilterRules as aq, decodeLayeredFilterRules as ar, encodeLayeredFilterRules as as, isCompleteLayeredFilterRule as at, isLayeredFilterOperator as au, layeredFilterMatchesValue as av, layeredFilterNeedsValue as aw, layeredFilterRuleSummary as ax, operatorsForLayeredField as ay, type TableSavedViewsProps as b, type MatrxDataTableRecordControls as c, type MatrxDataTableDensity as d, type MatrxDataTableQueryState as e, type ColumnFilterKind as f, type MatrxDataTableCopyConfig as g, type MatrxDataTableProps as h, type TableViewSnapshot as i, type ColumnMarker as j, CELL_TINT_CLASS as k, COLOR_RULE_OPS as l, COLOR_RULE_OP_LABELS as m, type CellEditType as n, type CellEditsMap as o, type ChoiceColorLookup as p, type ColorBy as q, type ColorRule as r, type ColorRuleOp as s, type MatrxDataTableContextMenuConfig as t, type MatrxDataTableDetailConfig as u, type MatrxDataTableEditConfig as v, type MatrxDataTableEmptyState as w, type MatrxDataTableExpandedDetailConfig as x, type MatrxDataTableFilterUi as y, type MatrxDataTableHierarchyConfig as z };
+export { SWATCH_CLASS as $, type AnyOfColumnSearch as A, BOOLEAN_TRUE_COLOR as B, type ColumnFiltersState as C, type MatrxDataTableFilterUi as D, EMPTY_TABLE_STYLE as E, type MatrxDataTableGroupingConfig as F, type MatrxDataTableHierarchyConfig as G, type MatrxDataTableHierarchyMove as H, type MatrxDataTableMobileCardControls as I, type MatrxDataTableQueryControl as J, type MatrxDataTableSelectionConfig as K, type LayeredFilterRule as L, type MatrxColumnDef as M, type MatrxDataTableSourceProcessing as N, type MatrxDataTableSpreadsheetConfig as O, type MatrxDataTableStyleConfig as P, type MatrxDataTableToolbar as Q, type MatrxDataTableUrlStateConfig as R, type SortState as S, type TableSearchMatchMode as T, type MatrxDataTableVirtualizeConfig as U, type MatrxDataTableWindowConfig as V, type MatrxTablePagination as W, OPS_WITH_VALUE as X, ROW_TINT_CLASS as Y, STYLE_COLORS as Z, STYLE_COLOR_LABELS as _, type ColumnFilterValue as a, type SortDirection as a0, type StyleColor as a1, type StylePath as a2, type StyleTarget as a3, TABLE_STYLE_METADATA_KEY as a4, TABLE_STYLE_VERSION as a5, type TableRankedSearchOptions as a6, type TableSearchRole as a7, type TableSearchScope as a8, type TableStyle as a9, layeredFilterMatchesValue as aA, layeredFilterNeedsValue as aB, layeredFilterRuleSummary as aC, operatorsForLayeredField as aD, type TableViewQuery as aa, type TextFilterMode as ab, type ToolbarFacet as ac, applyStylePath as ad, colorForChoice as ae, evaluateRule as af, inferTableSearchRole as ag, isStyleColor as ah, parseTableStyle as ai, rankTableSearchRows as aj, resolveCellColor as ak, resolveRowColor as al, resolveTableSearchScopes as am, stylePath as an, tableStyleFromMetadata as ao, tableStyleIsEmpty as ap, LAYERED_FILTER_OPERATORS as aq, LAYERED_FILTER_OPERATOR_LABELS as ar, type LayeredFilterField as as, type LayeredFilterOperator as at, columnFiltersToLayeredRules as au, completeLayeredFilterRules as av, decodeLayeredFilterRules as aw, encodeLayeredFilterRules as ax, isCompleteLayeredFilterRule as ay, isLayeredFilterOperator as az, type TableSavedViewsProps as b, type MatrxDataTableDensity as c, type MatrxDataTableRecordControls as d, type MatrxDataTableQueryState as e, type ColumnFilterKind as f, type MatrxDataTableCopyConfig as g, type MatrxDataTableProps as h, type TableViewSnapshot as i, type ColumnMarker as j, CELL_TINT_CLASS as k, COLOR_RULE_OPS as l, COLOR_RULE_OP_LABELS as m, type CellEditType as n, type CellEditsMap as o, type ChoiceColorLookup as p, type ColorBy as q, type ColorRule as r, type ColorRuleOp as s, type MatrxDataTableContextMenuConfig as t, type MatrxDataTableCoverageConfig as u, type MatrxDataTableDetailConfig as v, type MatrxDataTableEditConfig as w, type MatrxDataTableEmptyState as x, type MatrxDataTableExpandedDetailConfig as y, type MatrxDataTableFacetsConfig as z };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-matrx/design-system",
-  "version": "0.22.0",
+  "version": "0.26.0",
   "description": "AI Matrx semantic React primitives shared across Vite, Next.js, desktop, and customer-built applications.",
   "type": "module",
   "license": "MIT",
@@ -88,6 +88,16 @@
         "default": "./dist/field-formats/index.cjs"
       }
     },
+    "./formulas": {
+      "import": {
+        "types": "./dist/formulas/index.d.ts",
+        "default": "./dist/formulas/index.js"
+      },
+      "require": {
+        "types": "./dist/formulas/index.d.cts",
+        "default": "./dist/formulas/index.cjs"
+      }
+    },
     "./data-table/host": {
       "import": {
         "types": "./dist/data-table/host.d.ts",
@@ -238,6 +248,116 @@
         "default": "./dist/data-table/copy-types.cjs"
       }
     },
+    "./data-table/validation": {
+      "import": {
+        "types": "./dist/data-table/validation.d.ts",
+        "default": "./dist/data-table/validation.js"
+      },
+      "require": {
+        "types": "./dist/data-table/validation.d.cts",
+        "default": "./dist/data-table/validation.cjs"
+      }
+    },
+    "./data-table/grid-clipboard": {
+      "import": {
+        "types": "./dist/data-table/grid-clipboard.d.ts",
+        "default": "./dist/data-table/grid-clipboard.js"
+      },
+      "require": {
+        "types": "./dist/data-table/grid-clipboard.d.cts",
+        "default": "./dist/data-table/grid-clipboard.cjs"
+      }
+    },
+    "./data-table/grid-selection": {
+      "import": {
+        "types": "./dist/data-table/grid-selection.d.ts",
+        "default": "./dist/data-table/grid-selection.js"
+      },
+      "require": {
+        "types": "./dist/data-table/grid-selection.d.cts",
+        "default": "./dist/data-table/grid-selection.cjs"
+      }
+    },
+    "./data-table/cell-undo": {
+      "import": {
+        "types": "./dist/data-table/cell-undo.d.ts",
+        "default": "./dist/data-table/cell-undo.js"
+      },
+      "require": {
+        "types": "./dist/data-table/cell-undo.d.cts",
+        "default": "./dist/data-table/cell-undo.cjs"
+      }
+    },
+    "./data-table/fill": {
+      "import": {
+        "types": "./dist/data-table/fill.d.ts",
+        "default": "./dist/data-table/fill.js"
+      },
+      "require": {
+        "types": "./dist/data-table/fill.d.cts",
+        "default": "./dist/data-table/fill.cjs"
+      }
+    },
+    "./data-table/coverage": {
+      "import": {
+        "types": "./dist/data-table/coverage.d.ts",
+        "default": "./dist/data-table/coverage.js"
+      },
+      "require": {
+        "types": "./dist/data-table/coverage.d.cts",
+        "default": "./dist/data-table/coverage.cjs"
+      }
+    },
+    "./data-table/virtual-window": {
+      "import": {
+        "types": "./dist/data-table/virtual-window.d.ts",
+        "default": "./dist/data-table/virtual-window.js"
+      },
+      "require": {
+        "types": "./dist/data-table/virtual-window.d.cts",
+        "default": "./dist/data-table/virtual-window.cjs"
+      }
+    },
+    "./data-table/grouping": {
+      "import": {
+        "types": "./dist/data-table/grouping.d.ts",
+        "default": "./dist/data-table/grouping.js"
+      },
+      "require": {
+        "types": "./dist/data-table/grouping.d.cts",
+        "default": "./dist/data-table/grouping.cjs"
+      }
+    },
+    "./data-table/spreadsheet": {
+      "import": {
+        "types": "./dist/data-table/spreadsheet.d.ts",
+        "default": "./dist/data-table/spreadsheet.js"
+      },
+      "require": {
+        "types": "./dist/data-table/spreadsheet.d.cts",
+        "default": "./dist/data-table/spreadsheet.cjs"
+      }
+    },
+    "./data-table/facets": {
+      "import": {
+        "types": "./dist/data-table/facets.d.ts",
+        "default": "./dist/data-table/facets.js"
+      },
+      "require": {
+        "types": "./dist/data-table/facets.d.cts",
+        "default": "./dist/data-table/facets.cjs"
+      }
+    },
+    "./data-table/menu-targets": {
+      "import": {
+        "types": "./dist/data-table/menu-targets.d.ts",
+        "default": "./dist/data-table/menu-targets.js"
+      },
+      "require": {
+        "types": "./dist/data-table/menu-targets.d.cts",
+        "default": "./dist/data-table/menu-targets.cjs"
+      }
+    },
     "./package.json": "./package.json"
   },
   "dependencies": {
@@ -282,16 +402,20 @@
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.5",
+    "@tailwindcss/vite": "^4.3.3",
     "@testing-library/react": "^16.3.3",
     "@types/node": "^26.6.1",
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
+    "@vitejs/plugin-react": "^5.1.1",
     "jsdom": "^30.0.1",
     "publint": "^0.3.24",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
+    "tailwindcss": "^4.3.3",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3",
+    "vite": "^7.3.1",
     "vitest": "^5.0.1"
   },
   "publishConfig": {
@@ -315,6 +439,9 @@
     "typecheck": "tsc --noEmit",
     "test": "vitest run",
     "verify:tarball": "node ./scripts/verify-tarball.mjs",
-    "verify:workspace-tarballs": "MATRX_VERIFY_LOCAL_KIT=1 node ./scripts/verify-tarball.mjs"
+    "verify:workspace-tarballs": "MATRX_VERIFY_LOCAL_KIT=1 node ./scripts/verify-tarball.mjs",
+    "demo": "vite --config demo/vite.config.ts",
+    "demo:build": "vite build --config demo/vite.config.ts",
+    "demo:preview": "vite preview --config demo/vite.config.ts"
   }
 }