@classic-homes/theme-mcp 0.1.14 → 0.1.16

package/dist/cli.js

@@ -2733,7 +2733,7 @@ var component_catalog_default = {
     },
     {
       name: "DataTable",
-      description: "Powerful data table with TanStack Table - sorting, filtering, pagination, virtualization, and inline editing",
+      description: "Powerful data table with native Svelte 5 runes - sorting, filtering, pagination, virtualization, and inline editing",
       category: "data",
       importPath: "@classic-homes/theme-svelte",
       props: [
@@ -2787,7 +2787,7 @@ var component_catalog_default = {
           name: "onSort",
           type: "(column: string, direction: 'asc' | 'desc') => void",
           required: false,
-          description: "Sort callback"
+          description: "Sort callback (enables server-side sorting)"
         },
         {
           name: "onRowClick",
@@ -2812,6 +2812,26 @@ var component_catalog_default = {
           type: "string",
           required: false,
           description: "Additional classes"
+        },
+        {
+          name: "enablePagination",
+          type: "boolean",
+          default: "false",
+          required: false,
+          description: "Enable built-in pagination"
+        },
+        {
+          name: "pageSize",
+          type: "number",
+          default: "10",
+          required: false,
+          description: "Rows per page"
+        },
+        {
+          name: "getRowId",
+          type: "(row: T, index: number) => string",
+          required: false,
+          description: "Function to get unique row ID"
         }
       ],
       variants: [
@@ -2841,92 +2861,104 @@ var component_catalog_default = {
       events: [],
       examples: [
         {
-          title: "Creating a TanStack Table",
+          title: "Creating a Table Instance",
           code: `<script lang="ts">
   import {
     createDataTable,
-    type ColumnDef,
-    type SortingState,
-    type RowSelectionState,
+    DataTableToolbar,
+    DataTablePagination,
+    type DataTableColumn,
   } from '@classic-homes/theme-svelte';
 
   interface User {
     id: number;
     name: string;
     email: string;
+    role: string;
   }
 
-  // State
-  let sorting = $state<SortingState>([]);
-  let rowSelection = $state<RowSelectionState>({});
-
-  // Column definitions (TanStack Table format)
-  const columns: ColumnDef<User>[] = [
-    { accessorKey: 'id', header: 'ID' },
-    { accessorKey: 'name', header: 'Name' },
-    { accessorKey: 'email', header: 'Email' },
+  // Column definitions
+  const columns: DataTableColumn<User>[] = [
+    { id: 'id', header: 'ID', accessor: 'id', sortable: true },
+    { id: 'name', header: 'Name', accessor: 'name', sortable: true },
+    { id: 'email', header: 'Email', accessor: 'email', sortable: true },
+    {
+      id: 'role',
+      header: 'Role',
+      accessor: 'role',
+      filterOptions: [
+        { value: 'Admin', label: 'Admin' },
+        { value: 'Editor', label: 'Editor' },
+        { value: 'Viewer', label: 'Viewer' },
+      ],
+    },
   ];
 
   // Create table instance
-  const tableApi = createDataTable<User>(() => ({
+  const table = createDataTable<User>(() => ({
     data: users,
     columns,
-    state: { sorting, rowSelection },
-    onSortingChange: (updater) => {
-      sorting = typeof updater === 'function' ? updater(sorting) : updater;
-    },
-    onRowSelectionChange: (updater) => {
-      rowSelection = typeof updater === 'function' ? updater(rowSelection) : updater;
-    },
-    enableRowSelection: true,
-    enableSorting: true,
+    getRowId: (row) => String(row.id),
   }));
+</script>
+
+<!-- Toolbar with search and filters -->
+<DataTableToolbar {table} />
+
+<!-- Table rendering -->
+<table>
+  <thead>
+    <tr>
+      {#each table.columns as column}
+        <th onclick={() => column.sortable && table.toggleSort(column.id)}>
+          {column.header}
+        </th>
+      {/each}
+    </tr>
+  </thead>
+  <tbody>
+    {#each table.rows as row}
+      <tr>
+        {#each table.columns as column}
+          <td>{table.getFormattedCellValue(row.original, column)}</td>
+        {/each}
+      </tr>
+    {/each}
+  </tbody>
+</table>
 
-  const table = $derived(tableApi.instance);
-</script>`
+<!-- Pagination -->
+<DataTablePagination {table} />`
         },
         {
           title: "Row Selection",
           description: "Enable checkbox selection for rows:",
-          code: "<script>\n  let rowSelection = $state<RowSelectionState>({});\n\n  const tableApi = createDataTable<User>(() => ({\n    data: users,\n    columns,\n    state: { rowSelection },\n    onRowSelectionChange: (updater) => {\n      rowSelection = typeof updater === 'function' ? updater(rowSelection) : updater;\n    },\n    enableRowSelection: true,\n    enableMultiRowSelection: true, // Allow multiple selections\n  }));\n</script>\n\n<!-- Render checkbox in header -->\n<th>\n  <Checkbox\n    checked={table.getIsAllRowsSelected()}\n    indeterminate={table.getIsSomeRowsSelected()}\n    onCheckedChange={(checked) => table.toggleAllRowsSelected(!!checked)}\n  />\n</th>\n\n<!-- Render checkbox in each row -->\n{#each table.getRowModel().rows as row}\n  <td>\n    <Checkbox\n      checked={row.getIsSelected()}\n      onCheckedChange={(checked) => row.toggleSelected(!!checked)}\n    />\n  </td>\n{/each}"
+          code: "<script>\n  let rowSelection = $state<Set<string>>(new Set());\n\n  const table = createDataTable<User>(() => ({\n    data: users,\n    columns,\n    getRowId: (row) => String(row.id),\n    onRowSelectionChange: (selection) => {\n      rowSelection = selection;\n    },\n  }));\n</script>\n\n<!-- Render checkbox in header -->\n<th>\n  <Checkbox\n    checked={table.isAllSelected}\n    indeterminate={table.isSomeSelected}\n    onCheckedChange={() => table.toggleAllRows()}\n  />\n</th>\n\n<!-- Render checkbox in each row -->\n{#each table.rows as row}\n  <td>\n    <Checkbox checked={row.isSelected} onCheckedChange={() => table.toggleRowSelection(row.id)} />\n  </td>\n{/each}"
         },
         {
           title: "Column Visibility",
           description: "Allow users to toggle column visibility:",
-          code: "<script>\n  let columnVisibility = $state<VisibilityState>({});\n\n  const tableApi = createDataTable<User>(() => ({\n    data: users,\n    columns,\n    state: { columnVisibility },\n    onColumnVisibilityChange: (updater) => {\n      columnVisibility = typeof updater === 'function' ? updater(columnVisibility) : updater;\n    },\n    enableHiding: true,\n  }));\n</script>\n\n<!-- Use DataTableToolbar for built-in column visibility dropdown -->\n<DataTableToolbar {table} visibilityState={columnVisibility} />"
+          code: "<script>\n  let columnVisibility = $state<Set<string>>(new Set());\n\n  const table = createDataTable<User>(() => ({\n    data: users,\n    columns,\n    getRowId: (row) => String(row.id),\n    onColumnVisibilityChange: (hidden) => {\n      columnVisibility = hidden;\n    },\n  }));\n</script>\n\n<!-- DataTableToolbar includes column visibility dropdown -->\n<DataTableToolbar {table} />"
         },
         {
           title: "Global Search",
           description: "Filter across all columns:",
-          code: "<script>\n  let globalFilter = $state('');\n\n  const tableApi = createDataTable<User>(() => ({\n    data: users,\n    columns,\n    state: { globalFilter },\n    onGlobalFilterChange: (updater) => {\n      globalFilter = typeof updater === 'function' ? updater(globalFilter) : updater;\n    },\n    enableGlobalFilter: true,\n  }));\n</script>\n\n<!-- DataTableToolbar includes a search input -->\n<DataTableToolbar {table} />"
+          code: "<script>\n  let globalFilter = $state('');\n\n  const table = createDataTable<User>(() => ({\n    data: users,\n    columns,\n    getRowId: (row) => String(row.id),\n    onGlobalFilterChange: (filter) => {\n      globalFilter = filter;\n    },\n  }));\n</script>\n\n<!-- DataTableToolbar includes a search input -->\n<DataTableToolbar {table} />"
         },
         {
           title: "Column Filters",
           description: "Filter individual columns with faceted filtering:",
-          code: "<script>\n  let columnFilters = $state<ColumnFiltersState>([]);\n\n  const columns: ColumnDef<User>[] = [\n    {\n      accessorKey: 'role',\n      header: 'Role',\n      meta: {\n        filterOptions: [\n          { value: 'Admin', label: 'Admin' },\n          { value: 'Editor', label: 'Editor' },\n          { value: 'Viewer', label: 'Viewer' },\n        ],\n      },\n    },\n  ];\n\n  const tableApi = createDataTable<User>(() => ({\n    data: users,\n    columns,\n    state: { columnFilters },\n    onColumnFiltersChange: (updater) => {\n      columnFilters = typeof updater === 'function' ? updater(columnFilters) : updater;\n    },\n    enableColumnFilters: true,\n  }));\n</script>\n\n<!-- DataTableToolbar renders filter badges for columns with filterOptions -->\n<DataTableToolbar {table} />"
-        },
-        {
-          title: "Pagination",
-          description: "Add pagination controls:",
-          code: "<script>\n  const tableApi = createDataTable<User>(() => ({\n    data: users,\n    columns,\n    // Pagination is enabled by default\n  }));\n</script>\n\n<!-- Table content -->\n<table>...</table>\n\n<!-- Pagination controls -->\n<DataTablePagination {table} />"
+          code: "<script>\n  const columns: DataTableColumn<User>[] = [\n    {\n      id: 'role',\n      header: 'Role',\n      accessor: 'role',\n      filterOptions: [\n        { value: 'Admin', label: 'Admin' },\n        { value: 'Editor', label: 'Editor' },\n        { value: 'Viewer', label: 'Viewer' },\n      ],\n    },\n    {\n      id: 'status',\n      header: 'Status',\n      accessor: 'status',\n      filterOptions: [\n        { value: 'active', label: 'Active' },\n        { value: 'inactive', label: 'Inactive' },\n      ],\n    },\n  ];\n\n  const table = createDataTable<User>(() => ({\n    data: users,\n    columns,\n    getRowId: (row) => String(row.id),\n  }));\n</script>\n\n<!-- DataTableToolbar renders filter dropdowns for columns with filterOptions -->\n<DataTableToolbar {table} />"
         },
         {
           title: "Virtualization",
           description: "Render thousands of rows efficiently:",
-          code: '<script>\n  const tableApi = createDataTable<User>(() => ({\n    data: largeDataset, // 10,000+ rows\n    columns,\n    manualPagination: true, // Disable pagination for virtualization\n  }));\n</script>\n\n<DataTableVirtual\n  table={tableApi.instance}\n  rowHeight={48}\n  overscan={10}\n  height="500px"\n  onRowClick={(row) => console.log(row)}\n/>'
+          code: '<script>\n  const table = createDataTable<User>(() => ({\n    data: largeDataset, // 10,000+ rows\n    columns,\n    getRowId: (row) => String(row.id),\n    manualPagination: true, // Disable pagination for virtualization\n  }));\n</script>\n\n<DataTableVirtual\n  {table}\n  rowHeight={48}\n  overscan={10}\n  height="500px"\n  onRowClick={(row) => console.log(row)}\n/>'
         },
         {
           title: "Inline Editing",
           description: "Enable double-click cell editing:",
-          code: "<script>\n  function handleCellEdit(rowId: string, columnId: string, value: unknown, row: User) {\n    // Update your data source\n    const index = users.findIndex((u) => u.id === row.id);\n    if (index !== -1) {\n      users[index] = { ...users[index], [columnId]: value };\n    }\n  }\n</script>\n\n{#each table.getRowModel().rows as row}\n  <tr>\n    {#each row.getVisibleCells() as cell}\n      <td>\n        <DataTableEditableCell {cell} row={row.original} onSave={handleCellEdit} />\n      </td>\n    {/each}\n  </tr>\n{/each}"
-        },
-        {
-          title: "User Management Table",
-          code: "<script>\n  const columns = [\n    { id: 'name', header: 'Name', accessor: 'name', sortable: true },\n    { id: 'email', header: 'Email', accessor: 'email', sortable: true },\n    { id: 'role', header: 'Role', accessor: 'role' },\n    {\n      id: 'joined',\n      header: 'Joined',\n      accessor: 'createdAt',\n      sortable: true,\n      format: (v) => new Date(v).toLocaleDateString(),\n    },\n  ];\n</script>\n\n<DataTable\n  data={users}\n  {columns}\n  caption=\"User management table\"\n  onRowClick={(user) => goto(`/users/${user.id}`)}\n/>"
-        },
-        {
-          title: "Product Inventory",
-          code: "<script>\n  const columns = [\n    { id: 'sku', header: 'SKU', accessor: 'sku', width: '120px' },\n    { id: 'name', header: 'Product', accessor: 'name', sortable: true },\n    {\n      id: 'stock',\n      header: 'Stock',\n      accessor: 'quantity',\n      align: 'right',\n      sortable: true,\n    },\n    {\n      id: 'price',\n      header: 'Price',\n      accessor: 'price',\n      align: 'right',\n      format: (v) => `$${v.toFixed(2)}`,\n    },\n  ];\n</script>\n\n<DataTable data={products} {columns} emptyMessage=\"No products found\" />"
+          code: "<script>\n  function handleCellEdit(rowId: string, columnId: string, value: unknown, row: User) {\n    // Update your data source\n    const index = users.findIndex((u) => String(u.id) === rowId);\n    if (index !== -1) {\n      users[index] = { ...users[index], [columnId]: value };\n    }\n  }\n\n  const columns: DataTableColumn<User>[] = [\n    { id: 'name', header: 'Name', accessor: 'name', enableEditing: true },\n    { id: 'email', header: 'Email', accessor: 'email', enableEditing: true },\n  ];\n</script>\n\n{#each table.rows as row}\n  <tr>\n    {#each table.columns as column}\n      <td>\n        <DataTableEditableCell {row} {column} onSave={handleCellEdit} />\n      </td>\n    {/each}\n  </tr>\n{/each}"
         }
       ],
       relatedComponents: [
@@ -2942,12 +2974,19 @@ var component_catalog_default = {
       category: "data",
       importPath: "@classic-homes/theme-svelte",
       props: [
+        {
+          name: "table",
+          type: "DataTableInstance<T>",
+          default: "**required**",
+          required: false,
+          description: "The table instance from createDataTable"
+        },
         {
           name: "column",
-          type: "Column<T, unknown>",
+          type: "DataTableColumn<T>",
           default: "**required**",
           required: false,
-          description: "The TanStack Table column to filter"
+          description: "The column to filter"
         },
         {
           name: "placeholder",
@@ -2982,23 +3021,23 @@ var component_catalog_default = {
       examples: [
         {
           title: "Basic Usage",
-          code: "<script>\n  import { createDataTable, DataTableColumnFilter } from '@classic-homes/theme-svelte';\n\n  let columnFilters = $state([]);\n\n  const tableApi = createDataTable(() => ({\n    data: users,\n    columns,\n    state: { columnFilters },\n    onColumnFiltersChange: (updater) => {\n      columnFilters = typeof updater === 'function' ? updater(columnFilters) : updater;\n    },\n    enableColumnFilters: true,\n  }));\n\n  const table = $derived(tableApi.instance);\n</script>\n\n<!-- Filter for the name column -->\n{#each table.getAllColumns() as column}\n  {#if column.getCanFilter()}\n    <DataTableColumnFilter {column} />\n  {/if}\n{/each}"
+          code: "<script>\n  import { createDataTable, DataTableColumnFilter } from '@classic-homes/theme-svelte';\n\n  const table = createDataTable(() => ({\n    data: users,\n    columns,\n    getRowId: (row) => String(row.id),\n  }));\n\n  // Get a specific column for filtering\n  const nameColumn = $derived(table.columns.find((c) => c.id === 'name'));\n</script>\n\n<!-- Filter for the name column -->\n{#if nameColumn}\n  <DataTableColumnFilter {table} column={nameColumn} />\n{/if}"
         },
         {
           title: "Custom Placeholder",
-          code: '<DataTableColumnFilter {column} placeholder="Search names..." />'
+          code: '<DataTableColumnFilter {table} {column} placeholder="Search names..." />'
         },
         {
           title: "Faster Debounce",
-          code: "<DataTableColumnFilter {column} debounceMs={150} />"
+          code: "<DataTableColumnFilter {table} {column} debounceMs={150} />"
         },
         {
           title: "In Table Header",
-          code: '<thead>\n  <tr>\n    {#each table.getHeaderGroups()[0].headers as header}\n      <th>\n        {header.column.columnDef.header}\n        {#if header.column.getCanFilter()}\n          <DataTableColumnFilter column={header.column} class="mt-1" />\n        {/if}\n      </th>\n    {/each}\n  </tr>\n</thead>'
+          code: '<thead>\n  <tr>\n    {#each table.columns as column}\n      <th>\n        {column.header}\n        <DataTableColumnFilter {table} {column} class="mt-1" />\n      </th>\n    {/each}\n  </tr>\n</thead>'
         },
         {
           title: "Multiple Column Filters",
-          code: '<div class="flex gap-2">\n  {#each table.getAllColumns().filter((c) => c.getCanFilter()) as column}\n    <DataTableColumnFilter {column} class="w-40" />\n  {/each}\n</div>'
+          code: '<div class="flex gap-2">\n  {#each table.columns as column}\n    <DataTableColumnFilter {table} {column} class="w-40" />\n  {/each}\n</div>'
         }
       ],
       relatedComponents: [
@@ -3015,16 +3054,10 @@ var component_catalog_default = {
       props: [
         {
           name: "table",
-          type: "Table<T>",
+          type: "DataTableInstance<T>",
           default: "**required**",
           required: false,
-          description: "The TanStack Table instance"
-        },
-        {
-          name: "visibilityState",
-          type: "VisibilityState",
-          required: false,
-          description: "Optional visibility state for reactivity"
+          description: "The table instance from createDataTable"
         },
         {
           name: "class",
@@ -3045,20 +3078,15 @@ var component_catalog_default = {
       examples: [
         {
           title: "Basic Usage",
-          code: "<script>\n  import { createDataTable, DataTableColumnVisibility } from '@classic-homes/theme-svelte';\n\n  let columnVisibility = $state({});\n\n  const tableApi = createDataTable(() => ({\n    data: users,\n    columns,\n    state: { columnVisibility },\n    onColumnVisibilityChange: (updater) => {\n      columnVisibility = typeof updater === 'function' ? updater(columnVisibility) : updater;\n    },\n    enableHiding: true,\n  }));\n\n  const table = $derived(tableApi.instance);\n</script>\n\n<DataTableColumnVisibility {table} />"
+          code: "<script>\n  import { createDataTable, DataTableColumnVisibility } from '@classic-homes/theme-svelte';\n\n  let columnVisibility = $state<Set<string>>(new Set());\n\n  const table = createDataTable(() => ({\n    data: users,\n    columns,\n    getRowId: (row) => String(row.id),\n    onColumnVisibilityChange: (hidden) => {\n      columnVisibility = hidden;\n    },\n  }));\n</script>\n\n<DataTableColumnVisibility {table} />"
         },
         {
-          title: "With Controlled State",
-          description: "Pass the visibility state for full reactivity:",
-          code: "<script>\n  let columnVisibility = $state({\n    email: false, // Hide email column by default\n    phone: false, // Hide phone column by default\n  });\n</script>\n\n<DataTableColumnVisibility {table} visibilityState={columnVisibility} />"
+          title: "With Initial Hidden Columns",
+          code: "<script>\n  const table = createDataTable(() => ({\n    data: users,\n    columns,\n    getRowId: (row) => String(row.id),\n    initialHiddenColumns: ['email', 'phone'], // Hide these by default\n  }));\n</script>\n\n<DataTableColumnVisibility {table} />"
         },
         {
           title: "In Toolbar",
           code: '<div class="flex items-center gap-2">\n  <DataTableSearch {table} />\n  <DataTableColumnVisibility {table} />\n</div>'
-        },
-        {
-          title: "Hide Specific Columns Initially",
-          code: "<script>\n  // Some columns hidden by default\n  let columnVisibility = $state({\n    createdAt: false,\n    updatedAt: false,\n    internalId: false,\n  });\n\n  const tableApi = createDataTable(() => ({\n    data,\n    columns,\n    state: { columnVisibility },\n    onColumnVisibilityChange: (updater) => {\n      columnVisibility = typeof updater === 'function' ? updater(columnVisibility) : updater;\n    },\n    enableHiding: true,\n  }));\n</script>\n\n<DataTableColumnVisibility {table} visibilityState={columnVisibility} />"
         }
       ],
       relatedComponents: [
@@ -3074,18 +3102,18 @@ var component_catalog_default = {
       importPath: "@classic-homes/theme-svelte",
       props: [
         {
-          name: "cell",
-          type: "Cell<T, unknown>",
+          name: "row",
+          type: "DataTableRow<T>",
           default: "**required**",
           required: false,
-          description: "The TanStack Table cell to render"
+          description: "The row object from table.rows"
         },
         {
-          name: "row",
-          type: "T",
+          name: "column",
+          type: "DataTableColumn<T>",
           default: "**required**",
           required: false,
-          description: "The row data object"
+          description: "The column definition"
         },
         {
           name: "onSave",
@@ -3113,21 +3141,25 @@ var component_catalog_default = {
       examples: [
         {
           title: "Basic Usage",
-          code: "<script>\n  import { createDataTable, DataTableEditableCell } from '@classic-homes/theme-svelte';\n\n  function handleCellEdit(rowId, columnId, value, row) {\n    // Update your data source\n    const index = users.findIndex((u) => u.id === row.id);\n    if (index !== -1) {\n      users[index] = { ...users[index], [columnId]: value };\n    }\n  }\n\n  const columns = [\n    {\n      accessorKey: 'name',\n      header: 'Name',\n      meta: { enableEditing: true },\n    },\n    {\n      accessorKey: 'email',\n      header: 'Email',\n      meta: { enableEditing: true },\n    },\n  ];\n\n  const tableApi = createDataTable(() => ({ data: users, columns }));\n  const table = $derived(tableApi.instance);\n</script>\n\n{#each table.getRowModel().rows as row}\n  <tr>\n    {#each row.getVisibleCells() as cell}\n      <td>\n        <DataTableEditableCell {cell} row={row.original} onSave={handleCellEdit} />\n      </td>\n    {/each}\n  </tr>\n{/each}"
+          code: "<script>\n  import { createDataTable, DataTableEditableCell } from '@classic-homes/theme-svelte';\n\n  function handleCellEdit(rowId, columnId, value, row) {\n    // Update your data source\n    const index = users.findIndex((u) => String(u.id) === rowId);\n    if (index !== -1) {\n      users[index] = { ...users[index], [columnId]: value };\n    }\n  }\n\n  const columns = [\n    { id: 'name', header: 'Name', accessor: 'name', enableEditing: true },\n    { id: 'email', header: 'Email', accessor: 'email', enableEditing: true },\n    { id: 'role', header: 'Role', accessor: 'role' }, // Not editable\n  ];\n\n  const table = createDataTable(() => ({\n    data: users,\n    columns,\n    getRowId: (row) => String(row.id),\n  }));\n</script>\n\n{#each table.rows as row}\n  <tr>\n    {#each table.columns as column}\n      <td>\n        <DataTableEditableCell {row} {column} onSave={handleCellEdit} />\n      </td>\n    {/each}\n  </tr>\n{/each}"
         },
         {
           title: "With Custom Formatting",
           description: "Cells can have custom display formatting while editing the raw value:",
-          code: "<script>\n  const columns = [\n    {\n      accessorKey: 'price',\n      header: 'Price',\n      meta: {\n        enableEditing: true,\n        format: (value) => `$${Number(value).toFixed(2)}`,\n      },\n    },\n  ];\n</script>"
+          code: "<script>\n  const columns = [\n    {\n      id: 'price',\n      header: 'Price',\n      accessor: 'price',\n      enableEditing: true,\n      format: (value) => `$${Number(value).toFixed(2)}`,\n    },\n  ];\n</script>"
         },
         {
           title: "Async Save Handler",
-          code: "<script>\n  async function handleCellEdit(rowId, columnId, value, row) {\n    try {\n      await api.updateUser(row.id, { [columnId]: value });\n      // Update local state after successful save\n      users = users.map((u) => (u.id === row.id ? { ...u, [columnId]: value } : u));\n    } catch (error) {\n      console.error('Failed to save:', error);\n      // Optionally show error toast\n    }\n  }\n</script>"
+          code: "<script>\n  async function handleCellEdit(rowId, columnId, value, row) {\n    try {\n      await api.updateUser(row.id, { [columnId]: value });\n      // Update local state after successful save\n      users = users.map((u) => (String(u.id) === rowId ? { ...u, [columnId]: value } : u));\n    } catch (error) {\n      console.error('Failed to save:', error);\n      // Optionally show error toast\n    }\n  }\n</script>"
+        },
+        {
+          title: "With Type Conversion",
+          code: "<script>\n  function handleCellEdit(rowId, columnId, value, row) {\n    let parsedValue = value;\n\n    // Convert to number for numeric columns\n    if (columnId === 'salary' || columnId === 'quantity') {\n      parsedValue = parseInt(String(value), 10) || 0;\n    }\n\n    const index = data.findIndex((item) => String(item.id) === rowId);\n    if (index !== -1) {\n      data[index] = { ...data[index], [columnId]: parsedValue };\n    }\n  }\n</script>"
         }
       ],
       relatedComponents: [
         "DataTable",
-        "FlexRender"
+        "DataTableVirtual"
       ]
     },
     {
@@ -3137,11 +3169,18 @@ var component_catalog_default = {
       importPath: "@classic-homes/theme-svelte",
       props: [
         {
-          name: "column",
-          type: "Column<T, unknown>",
+          name: "table",
+          type: "DataTableInstance<T>",
+          default: "**required**",
+          required: false,
+          description: "The table instance from createDataTable"
+        },
+        {
+          name: "columnId",
+          type: "string",
           default: "**required**",
           required: false,
-          description: "The TanStack Table column to filter"
+          description: "The column ID to filter"
         },
         {
           name: "title",
@@ -3179,24 +3218,16 @@ var component_catalog_default = {
           code: `<script>
   import { createDataTable, DataTableFacetedFilter } from '@classic-homes/theme-svelte';
 
-  let columnFilters = $state([]);
-
-  const tableApi = createDataTable(() => ({
+  const table = createDataTable(() => ({
     data: users,
     columns,
-    state: { columnFilters },
-    onColumnFiltersChange: (updater) => {
-      columnFilters = typeof updater === 'function' ? updater(columnFilters) : updater;
-    },
-    enableColumnFilters: true,
+    getRowId: (row) => String(row.id),
   }));
-
-  const table = $derived(tableApi.instance);
-  const statusColumn = $derived(table.getColumn('status'));
 </script>
 
 <DataTableFacetedFilter
-  column={statusColumn}
+  {table}
+  columnId="status"
   title="Status"
   options={[
     { value: 'active', label: 'Active' },
@@ -3223,59 +3254,19 @@ var component_catalog_default = {
   ]);
 </script>
 
-<DataTableFacetedFilter column={statusColumn} title="Status" options={statusOptions} />`
+<DataTableFacetedFilter {table} columnId="status" title="Status" options={statusOptions} />`
         },
         {
           title: "Multiple Filters",
-          code: `<div class="flex gap-2">
-  <DataTableFacetedFilter
-    column={table.getColumn('status')}
-    title="Status"
-    options={statusOptions}
-  />
-  <DataTableFacetedFilter column={table.getColumn('role')} title="Role" options={roleOptions} />
-  <DataTableFacetedFilter
-    column={table.getColumn('department')}
-    title="Department"
-    options={departmentOptions}
-  />
-</div>`
+          code: '<div class="flex gap-2">\n  <DataTableFacetedFilter {table} columnId="status" title="Status" options={statusOptions} />\n  <DataTableFacetedFilter {table} columnId="role" title="Role" options={roleOptions} />\n  <DataTableFacetedFilter\n    {table}\n    columnId="department"\n    title="Department"\n    options={departmentOptions}\n  />\n</div>'
         },
         {
           title: "In DataTableToolbar",
-          code: `<DataTableToolbar {table}>
-  {#snippet filters()}
-    <DataTableFacetedFilter
-      column={table.getColumn('status')}
-      title="Status"
-      options={statusOptions}
-    />
-    <DataTableFacetedFilter
-      column={table.getColumn('priority')}
-      title="Priority"
-      options={priorityOptions}
-    />
-  {/snippet}
-</DataTableToolbar>`
+          code: '<DataTableToolbar {table}>\n  {#snippet filters()}\n    <DataTableFacetedFilter {table} columnId="status" title="Status" options={statusOptions} />\n    <DataTableFacetedFilter\n      {table}\n      columnId="priority"\n      title="Priority"\n      options={priorityOptions}\n    />\n  {/snippet}\n</DataTableToolbar>'
         },
         {
           title: "Dynamic Options from Data",
-          code: `<script>
-  // Extract unique values from data
-  const uniqueStatuses = $derived(
-    [...new Set(users.map((u) => u.status))].map((status) => ({
-      value: status,
-      label: status.charAt(0).toUpperCase() + status.slice(1),
-      count: users.filter((u) => u.status === status).length,
-    }))
-  );
-</script>
-
-<DataTableFacetedFilter
-  column={table.getColumn('status')}
-  title="Status"
-  options={uniqueStatuses}
-/>`
+          code: '<script>\n  // Extract unique values from data\n  const uniqueStatuses = $derived(\n    [...new Set(users.map((u) => u.status))].map((status) => ({\n      value: status,\n      label: status.charAt(0).toUpperCase() + status.slice(1),\n      count: users.filter((u) => u.status === status).length,\n    }))\n  );\n</script>\n\n<DataTableFacetedFilter {table} columnId="status" title="Status" options={uniqueStatuses} />'
         }
       ],
       relatedComponents: [
@@ -3286,16 +3277,16 @@ var component_catalog_default = {
     },
     {
       name: "DataTablePagination",
-      description: "Pagination controls for TanStack Table with page navigation and rows per page selector",
+      description: "Pagination controls for DataTable with page navigation and rows per page selector",
       category: "data",
       importPath: "@classic-homes/theme-svelte",
       props: [
         {
           name: "table",
-          type: "Table<T>",
+          type: "DataTableInstance<T>",
           default: "**required**",
           required: false,
-          description: "The TanStack Table instance"
+          description: "The table instance from createDataTable"
         },
         {
           name: "pageSizeOptions",
@@ -3330,7 +3321,7 @@ var component_catalog_default = {
       examples: [
         {
           title: "Basic Usage",
-          code: "<script>\n  import { createDataTable, DataTablePagination } from '@classic-homes/theme-svelte';\n\n  const tableApi = createDataTable(() => ({\n    data: users,\n    columns,\n  }));\n\n  const table = $derived(tableApi.instance);\n</script>\n\n<table>...</table>\n<DataTablePagination {table} />"
+          code: "<script>\n  import { createDataTable, DataTablePagination } from '@classic-homes/theme-svelte';\n\n  const table = createDataTable(() => ({\n    data: users,\n    columns,\n    getRowId: (row) => String(row.id),\n  }));\n</script>\n\n<table>...</table>\n<DataTablePagination {table} />"
         },
         {
           title: "Custom Page Sizes",
@@ -3358,10 +3349,10 @@ var component_catalog_default = {
       props: [
         {
           name: "table",
-          type: "Table<T>",
+          type: "DataTableInstance<T>",
           default: "**required**",
           required: false,
-          description: "The TanStack Table instance"
+          description: "The table instance from createDataTable"
         },
         {
           name: "placeholder",
@@ -3396,7 +3387,7 @@ var component_catalog_default = {
       examples: [
         {
           title: "Basic Usage",
-          code: "<script>\n  import { createDataTable, DataTableSearch } from '@classic-homes/theme-svelte';\n\n  let globalFilter = $state('');\n\n  const tableApi = createDataTable(() => ({\n    data: users,\n    columns,\n    state: { globalFilter },\n    onGlobalFilterChange: (updater) => {\n      globalFilter = typeof updater === 'function' ? updater(globalFilter) : updater;\n    },\n    enableGlobalFilter: true,\n  }));\n\n  const table = $derived(tableApi.instance);\n</script>\n\n<DataTableSearch {table} /><table>...</table>"
+          code: "<script>\n  import { createDataTable, DataTableSearch } from '@classic-homes/theme-svelte';\n\n  let globalFilter = $state('');\n\n  const table = createDataTable(() => ({\n    data: users,\n    columns,\n    getRowId: (row) => String(row.id),\n    onGlobalFilterChange: (filter) => {\n      globalFilter = filter;\n    },\n  }));\n</script>\n\n<DataTableSearch {table} /><table>...</table>"
         },
         {
           title: "Custom Placeholder",
@@ -3435,10 +3426,10 @@ var component_catalog_default = {
       props: [
         {
           name: "table",
-          type: "Table<T>",
+          type: "DataTableInstance<T>",
           default: "**required**",
           required: false,
-          description: "The TanStack Table instance"
+          description: "The table instance from createDataTable"
         },
         {
           name: "showSearch",
@@ -3461,12 +3452,6 @@ var component_catalog_default = {
           required: false,
           description: "Placeholder text for search input"
         },
-        {
-          name: "visibilityState",
-          type: "VisibilityState",
-          required: false,
-          description: "Optional visibility state for reactivity"
-        },
         {
           name: "filters",
           type: "Snippet",
@@ -3498,7 +3483,7 @@ var component_catalog_default = {
       examples: [
         {
           title: "Basic Usage",
-          code: "<script>\n  import { createDataTable, DataTableToolbar } from '@classic-homes/theme-svelte';\n\n  const tableApi = createDataTable(() => ({\n    data: users,\n    columns,\n    enableGlobalFilter: true,\n  }));\n\n  const table = $derived(tableApi.instance);\n</script>\n\n<DataTableToolbar {table} /><table>...</table>"
+          code: "<script>\n  import { createDataTable, DataTableToolbar } from '@classic-homes/theme-svelte';\n\n  const table = createDataTable(() => ({\n    data: users,\n    columns,\n    getRowId: (row) => String(row.id),\n  }));\n</script>\n\n<DataTableToolbar {table} /><table>...</table>"
         },
         {
           title: "Search Only",
@@ -3548,10 +3533,10 @@ var component_catalog_default = {
       props: [
         {
           name: "table",
-          type: "Table<T>",
+          type: "DataTableInstance<T>",
           default: "**required**",
           required: false,
-          description: "The TanStack Table instance"
+          description: "The table instance from createDataTable"
         },
         {
           name: "rowHeight",
@@ -3563,7 +3548,7 @@ var component_catalog_default = {
         {
           name: "overscan",
           type: "number",
-          default: "5",
+          default: "10",
           required: false,
           description: "Number of rows to render outside visible area"
         },
@@ -3580,13 +3565,6 @@ var component_catalog_default = {
           required: false,
           description: "Callback when row is clicked"
         },
-        {
-          name: "enableRowSelection",
-          type: "boolean",
-          default: "false",
-          required: false,
-          description: "Enable row selection checkboxes"
-        },
         {
           name: "class",
           type: "string",
@@ -3609,13 +3587,12 @@ var component_catalog_default = {
           code: `<script>
   import { createDataTable, DataTableVirtual } from '@classic-homes/theme-svelte';
 
-  const tableApi = createDataTable(() => ({
+  const table = createDataTable(() => ({
     data: largeDataset, // 10,000+ rows
     columns,
+    getRowId: (row) => String(row.id),
     manualPagination: true, // Disable pagination for virtualization
   }));
-
-  const table = $derived(tableApi.instance);
 </script>
 
 <DataTableVirtual {table} height="600px" />`
@@ -3627,7 +3604,7 @@ var component_catalog_default = {
         {
           title: "With More Overscan",
           description: "For smoother scrolling, increase the overscan:",
-          code: '<DataTableVirtual {table} overscan={10} height="600px" />'
+          code: '<DataTableVirtual {table} overscan={15} height="600px" />'
         },
         {
           title: "With Row Click Handler",
@@ -3635,22 +3612,7 @@ var component_catalog_default = {
         },
         {
           title: "With Row Selection",
-          code: `<script>
-  let rowSelection = $state({});
-
-  const tableApi = createDataTable(() => ({
-    data: largeDataset,
-    columns,
-    state: { rowSelection },
-    onRowSelectionChange: (updater) => {
-      rowSelection = typeof updater === 'function' ? updater(rowSelection) : updater;
-    },
-    enableRowSelection: true,
-    manualPagination: true,
-  }));
-</script>
-
-<DataTableVirtual {table} enableRowSelection height="600px" />`
+          code: '<script>\n  let rowSelection = $state<Set<string>>(new Set());\n\n  const table = createDataTable(() => ({\n    data: largeDataset,\n    columns,\n    getRowId: (row) => String(row.id),\n    manualPagination: true,\n    onRowSelectionChange: (selection) => {\n      rowSelection = selection;\n    },\n  }));\n</script>\n\n<DataTableVirtual {table} height="600px" />'
         },
         {
           title: "Full Height Container",
@@ -4419,69 +4381,6 @@ var component_catalog_default = {
         "Button"
       ]
     },
-    {
-      name: "FlexRender",
-      description: "Dynamic content renderer for TanStack Table cells and headers",
-      category: "data",
-      importPath: "@classic-homes/theme-svelte",
-      props: [
-        {
-          name: "content",
-          type: "unknown",
-          default: "**required**",
-          required: false,
-          description: "Content to render (string, component, or function)"
-        },
-        {
-          name: "props",
-          type: "TProps",
-          default: "**required**",
-          required: false,
-          description: "Props to pass to component or function"
-        },
-        {
-          name: "asComponent",
-          type: "boolean",
-          default: "false",
-          required: false,
-          description: "Explicitly mark content as a Svelte component"
-        }
-      ],
-      variants: [],
-      slots: [
-        {
-          name: "children",
-          description: "Main content",
-          required: false
-        }
-      ],
-      events: [],
-      examples: [
-        {
-          title: "Basic Usage",
-          code: "<script>\n  import { createDataTable, FlexRender } from '@classic-homes/theme-svelte';\n\n  const tableApi = createDataTable(() => ({ data: users, columns }));\n  const table = $derived(tableApi.instance);\n</script>\n\n<table>\n  <thead>\n    {#each table.getHeaderGroups() as headerGroup}\n      <tr>\n        {#each headerGroup.headers as header}\n          <th>\n            <FlexRender content={header.column.columnDef.header} props={header.getContext()} />\n          </th>\n        {/each}\n      </tr>\n    {/each}\n  </thead>\n  <tbody>\n    {#each table.getRowModel().rows as row}\n      <tr>\n        {#each row.getVisibleCells() as cell}\n          <td>\n            <FlexRender content={cell.column.columnDef.cell} props={cell.getContext()} />\n          </td>\n        {/each}\n      </tr>\n    {/each}\n  </tbody>\n</table>"
-        },
-        {
-          title: "With Custom Cell Component",
-          code: `<!-- StatusBadge.svelte -->
-<script lang="ts">
-  import type { CellContext } from '@classic-homes/theme-svelte';
-  import Badge from './Badge.svelte';
-
-  let { getValue }: CellContext<User, string> = $props();
-  const status = $derived(getValue());
-</script>
-
-<Badge variant={status === 'active' ? 'success' : 'secondary'}>
-  {status}
-</Badge>`
-        }
-      ],
-      relatedComponents: [
-        "DataTable",
-        "DataTableEditableCell"
-      ]
-    },
     {
       name: "Footer",
       description: "Site footer with link sections and branding",
@@ -10584,7 +10483,7 @@ var token_definitions_default = {
         name: "charcoal",
         description: "Collection - Charcoal gray",
         shades: {
-          "50": "#f5f5f5",
+          "50": "#fafafa",
           "100": "#e6e6e6",
           "200": "#cccccc",
           "300": "#b3b3b3",