@classic-homes/theme-mcp 0.1.15 → 0.1.17

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>
 
-  const table = $derived(tableApi.instance);
-</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>
+
+<!-- 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",
@@ -6699,48 +6598,554 @@ var component_catalog_default = {
           description: "Label text"
         },
         {
-          name: "hint",
-          type: "string",
-          required: false,
-          description: "Hint text below the input"
+          name: "hint",
+          type: "string",
+          required: false,
+          description: "Hint text below the input"
+        },
+        {
+          name: "error",
+          type: "string",
+          required: false,
+          description: "Error message"
+        },
+        {
+          name: "max",
+          type: "number",
+          required: false,
+          description: "Maximum selections allowed"
+        },
+        {
+          name: "loading",
+          type: "boolean",
+          default: "false",
+          required: false,
+          description: "Shows loading state"
+        },
+        {
+          name: "debounceMs",
+          type: "number",
+          default: "300",
+          required: false,
+          description: "Debounce time for search"
+        },
+        {
+          name: "onValueChange",
+          type: "(value: string[]) => void",
+          required: false,
+          description: "Callback when value changes"
+        },
+        {
+          name: "onSearch",
+          type: "(query: string) => void",
+          required: false,
+          description: "Callback for search queries"
+        },
+        {
+          name: "class",
+          type: "string",
+          required: false,
+          description: "Additional CSS classes"
+        }
+      ],
+      variants: [],
+      slots: [
+        {
+          name: "children",
+          description: "Main content",
+          required: false
+        }
+      ],
+      events: [],
+      examples: [
+        {
+          title: "Basic Usage",
+          code: `<script>
+  let selected = $state([]);
+
+  const options = [
+    { value: 'react', label: 'React' },
+    { value: 'svelte', label: 'Svelte' },
+    { value: 'vue', label: 'Vue' },
+    { value: 'angular', label: 'Angular' },
+  ];
+</script>
+
+<MultiSelect {options} bind:value={selected} placeholder="Select frameworks..." />`
+        },
+        {
+          title: "Tag Selector",
+          code: `<script>
+  let tags = $state([]);
+  const tagOptions = [
+    { value: 'urgent', label: 'Urgent' },
+    { value: 'bug', label: 'Bug' },
+    { value: 'feature', label: 'Feature' },
+    { value: 'docs', label: 'Documentation' },
+  ];
+</script>
+
+<MultiSelect
+  label="Tags"
+  hint="Add relevant tags"
+  options={tagOptions}
+  bind:value={tags}
+  placeholder="Add tags..."
+/>`
+        },
+        {
+          title: "Team Members",
+          code: '<MultiSelect\n  label="Assign to"\n  hint="Select team members to assign this task"\n  options={teamMembers}\n  bind:value={assignees}\n  max={5}\n  placeholder="Select team members..."\n/>'
+        }
+      ],
+      relatedComponents: [
+        "Select",
+        "Combobox",
+        "Checkbox"
+      ]
+    },
+    {
+      name: "NoticeBanner",
+      description: "Banner component for displaying scheduled, dismissible announcements",
+      category: "feedback",
+      importPath: "@classic-homes/theme-svelte",
+      props: [
+        {
+          name: "class",
+          type: "string",
+          required: false,
+          description: "Additional CSS classes"
+        }
+      ],
+      variants: [],
+      slots: [
+        {
+          name: "children",
+          description: "Main content",
+          required: false
+        }
+      ],
+      events: [],
+      examples: [
+        {
+          title: "Maintenance Notice",
+          code: "<script>\n  const notices = [\n    {\n      id: 'maintenance',\n      title: 'Scheduled Maintenance',\n      message: 'The system will be unavailable on Sunday 2-4 AM EST.',\n      variant: 'warning',\n      location: 'banner',\n      dismissible: true,\n      startDate: '2025-01-15',\n      endDate: '2025-01-20',\n    },\n  ];\n\n  initializeNotices(notices);\n</script>\n\n<NoticeBanner />"
+        },
+        {
+          title: "With Link",
+          code: "<script>\n  const notices = [\n    {\n      id: 'new-feature',\n      message: 'Check out our new dashboard features!',\n      variant: 'info',\n      location: 'banner',\n      link: {\n        text: 'Learn more',\n        href: '/whats-new',\n      },\n    },\n  ];\n</script>\n\n<NoticeBanner />"
+        },
+        {
+          title: "Page-Specific Notice",
+          code: "<script>\n  const notices = [\n    {\n      id: 'billing-update',\n      message: 'Your payment method will expire soon.',\n      variant: 'warning',\n      location: 'banner',\n      pages: ['/settings', '/billing'],\n    },\n  ];\n\n  initializeNotices(notices);\n  setCurrentPath('/billing'); // Notice will show\n</script>\n\n<NoticeBanner />"
+        },
+        {
+          title: "In Layout",
+          code: "<!-- +layout.svelte -->\n<NoticeBanner />\n\n<main>\n  <slot />\n</main>"
+        }
+      ],
+      relatedComponents: [
+        "NoticeCard",
+        "Alert"
+      ]
+    },
+    {
+      name: "NoticeCard",
+      description: "Card-style component for displaying inline scheduled announcements",
+      category: "feedback",
+      importPath: "@classic-homes/theme-svelte",
+      props: [
+        {
+          name: "class",
+          type: "string",
+          required: false,
+          description: "Additional CSS classes"
+        }
+      ],
+      variants: [],
+      slots: [
+        {
+          name: "children",
+          description: "Main content",
+          required: false
+        }
+      ],
+      events: [],
+      examples: [
+        {
+          title: "Basic Usage",
+          code: "<script>\n  import { NoticeCard, initializeNotices, setCurrentPath } from '@classic-homes/theme-svelte';\n\n  const notices = [\n    {\n      id: 'welcome',\n      title: 'Welcome!',\n      message: 'Thanks for signing up. Complete your profile to get started.',\n      variant: 'info',\n      location: 'card',\n      dismissible: true,\n    },\n  ];\n\n  initializeNotices(notices);\n  setCurrentPath('/dashboard');\n</script>\n\n<NoticeCard />"
+        },
+        {
+          title: "Welcome Message",
+          code: "<script>\n  const notices = [\n    {\n      id: 'onboarding',\n      title: 'Complete Your Profile',\n      message: 'Add a photo and bio to help others recognize you.',\n      variant: 'info',\n      location: 'card',\n      link: {\n        text: 'Edit profile',\n        href: '/settings/profile',\n      },\n    },\n  ];\n</script>\n\n<NoticeCard />"
+        },
+        {
+          title: "Feature Announcement",
+          code: `<script>
+  const notices = [
+    {
+      id: 'new-charts',
+      title: 'New Charts Available',
+      message: "We've added 5 new chart types to your dashboard.",
+      variant: 'success',
+      location: 'card',
+      startDate: '2025-01-01',
+      endDate: '2025-01-31',
+    },
+  ];
+</script>
+
+<NoticeCard />`
+        },
+        {
+          title: "Warning Notice",
+          code: `<script>
+  const notices = [
+    {
+      id: 'storage-limit',
+      message: "You're approaching your storage limit. Upgrade to continue uploading.",
+      variant: 'warning',
+      location: 'card',
+      pages: ['/dashboard', '/files'],
+      link: {
+        text: 'Upgrade plan',
+        href: '/billing/upgrade',
+      },
+    },
+  ];
+</script>
+
+<NoticeCard />`
+        },
+        {
+          title: "In Page Content",
+          code: '<div class="space-y-4">\n  <NoticeCard />\n\n  <Card>\n    <CardHeader>\n      <CardTitle>Dashboard</CardTitle>\n    </CardHeader>\n    <CardContent>\n      <!-- Main content -->\n    </CardContent>\n  </Card>\n</div>'
+        },
+        {
+          title: "Custom Styling",
+          code: '<NoticeCard class="mb-6" />'
+        }
+      ],
+      relatedComponents: [
+        "NoticeBanner",
+        "Alert"
+      ]
+    },
+    {
+      name: "NotificationBadge",
+      description: "Unread notification count indicator for bell icons and buttons",
+      category: "feedback",
+      importPath: "@classic-homes/theme-svelte",
+      props: [
+        {
+          name: "count",
+          type: "number",
+          required: false,
+          description: "Number of unread notifications"
+        },
+        {
+          name: "max",
+          type: "number",
+          default: "99",
+          required: false,
+          description: 'Maximum number to display (shows "N+" for more)'
+        },
+        {
+          name: "showZero",
+          type: "boolean",
+          default: "false",
+          required: false,
+          description: "Whether to show the badge when count is 0"
+        },
+        {
+          name: "size",
+          type: "'sm' | 'md' | 'lg'",
+          default: "'md'",
+          required: false,
+          description: "Size variant"
+        },
+        {
+          name: "children",
+          type: "Snippet",
+          required: false,
+          description: "Optional children (e.g., button or icon to wrap)"
+        },
+        {
+          name: "class",
+          type: "string",
+          required: false,
+          description: "Additional CSS classes"
+        }
+      ],
+      variants: [
+        {
+          name: "size",
+          values: [
+            "sm",
+            "md",
+            "lg"
+          ],
+          default: "md"
+        }
+      ],
+      slots: [
+        {
+          name: "children",
+          description: "Main content",
+          required: false
+        }
+      ],
+      events: [],
+      examples: [
+        {
+          title: "Basic Usage",
+          code: "<NotificationBadge count={5} />"
+        },
+        {
+          title: "In a Header",
+          code: '<header class="flex items-center gap-4">\n  <NotificationBadge count={unreadCount}>\n    {#snippet children()}\n      <button\n        class="p-2 rounded-full hover:bg-muted"\n        onclick={openNotifications}\n        aria-label="View notifications"\n      >\n        <Icon name="bell" size={24} />\n      </button>\n    {/snippet}\n  </NotificationBadge>\n</header>'
+        },
+        {
+          title: "Dynamic Updates",
+          code: "<script>\n  import { notificationStore } from '@classic-homes/notifications/svelte';\n\n  const unreadCount = $derived(notificationStore.notifications.filter((n) => !n.read).length);\n</script>\n\n<NotificationBadge count={unreadCount} />"
+        }
+      ],
+      relatedComponents: [
+        "NotificationList",
+        "NotificationDialog",
+        "Badge"
+      ]
+    },
+    {
+      name: "NotificationBulkActions",
+      description: "Toolbar for selecting and performing bulk actions on notifications",
+      category: "feedback",
+      importPath: "@classic-homes/theme-svelte",
+      props: [
+        {
+          name: "selectedCount",
+          type: "number",
+          required: false,
+          description: "Number of currently selected notifications"
+        },
+        {
+          name: "totalCount",
+          type: "number",
+          required: false,
+          description: "Total number of notifications available"
+        },
+        {
+          name: "allSelected",
+          type: "boolean",
+          default: "false",
+          required: false,
+          description: "Whether all notifications are selected"
+        },
+        {
+          name: "onSelectAll",
+          type: "(selected: boolean) => void",
+          required: false,
+          description: "Callback to select/deselect all"
+        },
+        {
+          name: "onMarkRead",
+          type: "() => void",
+          required: false,
+          description: "Callback to mark selected as read"
+        },
+        {
+          name: "onMarkUnread",
+          type: "() => void",
+          required: false,
+          description: "Callback to mark selected as unread"
+        },
+        {
+          name: "onDelete",
+          type: "() => void",
+          required: false,
+          description: "Callback to delete selected"
+        },
+        {
+          name: "onClearSelection",
+          type: "() => void",
+          required: false,
+          description: "Callback to clear selection"
+        },
+        {
+          name: "class",
+          type: "string",
+          required: false,
+          description: "Additional CSS classes"
+        }
+      ],
+      variants: [],
+      slots: [
+        {
+          name: "children",
+          description: "Main content",
+          required: false
+        }
+      ],
+      events: [],
+      examples: [
+        {
+          title: "Basic Usage",
+          code: "<script>\n  let selectedIds = $state(new Set<string>());\n  const notifications = [...];\n</script>\n\n<NotificationBulkActions\n  selectedCount={selectedIds.size}\n  totalCount={notifications.length}\n  allSelected={selectedIds.size === notifications.length}\n  onSelectAll={(selected) => {\n    /* ... */\n  }}\n  onMarkRead={() => {\n    /* ... */\n  }}\n  onMarkUnread={() => {\n    /* ... */\n  }}\n  onDelete={() => {\n    /* ... */\n  }}\n/>"
+        },
+        {
+          title: "No Selection",
+          description: 'When no items are selected, only the "Select all" checkbox is shown:',
+          code: "<NotificationBulkActions selectedCount={0} totalCount={10} allSelected={false} />"
+        },
+        {
+          title: "Partial Selection",
+          description: "When some items are selected, action buttons appear:",
+          code: '<NotificationBulkActions selectedCount={3} totalCount={10} allSelected={false} />\n<!-- Shows: "3 of 10 selected" with Clear button and action buttons -->'
+        },
+        {
+          title: "All Selected",
+          description: "When all items are selected:",
+          code: "<NotificationBulkActions selectedCount={10} totalCount={10} allSelected={true} />"
+        },
+        {
+          title: "Select All",
+          description: "Toggle selection of all visible notifications:",
+          code: "<script>\n  function handleSelectAll(selected: boolean) {\n    if (selected) {\n      selectedIds = new Set(filteredNotifications().map(n => n.id));\n    } else {\n      selectedIds = new Set();\n    }\n  }\n</script>\n\n<NotificationBulkActions\n  onSelectAll={handleSelectAll}\n  {...}\n/>"
+        },
+        {
+          title: "Mark as Read",
+          description: "Mark all selected notifications as read:",
+          code: "<script>\n  function handleBulkMarkRead() {\n    const count = selectedIds.size;\n    notifications = notifications.map(n =>\n      selectedIds.has(n.id)\n        ? { ...n, read: true, readAt: new Date().toISOString() }\n        : n\n    );\n    selectedIds = new Set();\n    toastStore.success(`Marked ${count} notifications as read`);\n  }\n</script>\n\n<NotificationBulkActions\n  onMarkRead={handleBulkMarkRead}\n  {...}\n/>"
+        },
+        {
+          title: "Mark as Unread",
+          description: "Mark all selected notifications as unread:",
+          code: "<script>\n  function handleBulkMarkUnread() {\n    const count = selectedIds.size;\n    notifications = notifications.map(n =>\n      selectedIds.has(n.id)\n        ? { ...n, read: false, readAt: undefined }\n        : n\n    );\n    selectedIds = new Set();\n    toastStore.info(`Marked ${count} notifications as unread`);\n  }\n</script>\n\n<NotificationBulkActions\n  onMarkUnread={handleBulkMarkUnread}\n  {...}\n/>"
+        },
+        {
+          title: "Delete",
+          description: "Delete all selected notifications:",
+          code: "<script>\n  function handleBulkDelete() {\n    const count = selectedIds.size;\n    notifications = notifications.filter(n => !selectedIds.has(n.id));\n    selectedIds = new Set();\n    toastStore.info(`Deleted ${count} notifications`);\n  }\n</script>\n\n<NotificationBulkActions\n  onDelete={handleBulkDelete}\n  {...}\n/>"
+        },
+        {
+          title: "Complete Implementation",
+          code: "<script>\n  import {\n    NotificationList,\n    NotificationFilters,\n    NotificationBulkActions,\n    toastStore,\n  } from '@classic-homes/theme-svelte';\n  import type { Notification, NotificationFilter, NotificationCounts } from '@classic-homes/notifications/core';\n\n  let notifications = $state<Notification[]>([...]);\n  let filter = $state<NotificationFilter>('all');\n  let selectedIds = $state(new Set<string>());\n\n  const filteredNotifications = $derived(() => {\n    switch (filter) {\n      case 'unread': return notifications.filter(n => !n.read);\n      case 'read': return notifications.filter(n => n.read);\n      default: return notifications;\n    }\n  });\n\n  const counts = $derived<NotificationCounts>({\n    all: notifications.length,\n    unread: notifications.filter(n => !n.read).length,\n    read: notifications.filter(n => n.read).length,\n  });\n\n  const allSelected = $derived(\n    filteredNotifications().length > 0 &&\n    filteredNotifications().every(n => selectedIds.has(n.id))\n  );\n\n  function handleToggleSelect(id: string, selected: boolean) {\n    const newSet = new Set(selectedIds);\n    if (selected) newSet.add(id);\n    else newSet.delete(id);\n    selectedIds = newSet;\n  }\n\n  function handleSelectAll(selected: boolean) {\n    if (selected) {\n      selectedIds = new Set(filteredNotifications().map(n => n.id));\n    } else {\n      selectedIds = new Set();\n    }\n  }\n\n  function handleClearSelection() {\n    selectedIds = new Set();\n  }\n\n  function handleBulkMarkRead() {\n    notifications = notifications.map(n =>\n      selectedIds.has(n.id)\n        ? { ...n, read: true, readAt: new Date().toISOString() }\n        : n\n    );\n    selectedIds = new Set();\n    toastStore.success('Marked as read');\n  }\n\n  function handleBulkMarkUnread() {\n    notifications = notifications.map(n =>\n      selectedIds.has(n.id)\n        ? { ...n, read: false, readAt: undefined }\n        : n\n    );\n    selectedIds = new Set();\n    toastStore.info('Marked as unread');\n  }\n\n  function handleBulkDelete() {\n    notifications = notifications.filter(n => !selectedIds.has(n.id));\n    selectedIds = new Set();\n    toastStore.info('Deleted');\n  }\n</script>\n\n<NotificationFilters bind:filter {counts} onFilterChange={() => (selectedIds = new Set())} />\n\n{#if filteredNotifications().length > 0}\n  <NotificationBulkActions\n    selectedCount={selectedIds.size}\n    totalCount={filteredNotifications().length}\n    {allSelected}\n    onSelectAll={handleSelectAll}\n    onMarkRead={handleBulkMarkRead}\n    onMarkUnread={handleBulkMarkUnread}\n    onDelete={handleBulkDelete}\n    onClearSelection={handleClearSelection}\n  />\n{/if}\n\n<NotificationList\n  notifications={filteredNotifications()}\n  {selectedIds}\n  selectable={true}\n  onToggleSelect={handleToggleSelect}\n/>"
+        }
+      ],
+      relatedComponents: [
+        "NotificationList",
+        "NotificationFilters",
+        "NotificationItem"
+      ]
+    },
+    {
+      name: "NotificationDialog",
+      description: "Modal dialog for viewing full notification details with actions",
+      category: "feedback",
+      importPath: "@classic-homes/theme-svelte",
+      props: [
+        {
+          name: "notification",
+          type: "Notification | null",
+          required: false,
+          description: "The notification to display"
+        },
+        {
+          name: "open",
+          type: "boolean",
+          default: "false",
+          required: false,
+          description: "Whether the dialog is open (bindable)"
+        },
+        {
+          name: "onClose",
+          type: "() => void",
+          required: false,
+          description: "Callback when the dialog should close"
+        },
+        {
+          name: "onMarkRead",
+          type: "(id: string) => void",
+          required: false,
+          description: "Callback to mark notification as read"
+        },
+        {
+          name: "onMarkUnread",
+          type: "(id: string) => void",
+          required: false,
+          description: "Callback to mark as unread"
+        },
+        {
+          name: "onDelete",
+          type: "(id: string) => void",
+          required: false,
+          description: "Callback to delete notification"
+        }
+      ],
+      variants: [],
+      slots: [
+        {
+          name: "children",
+          description: "Main content",
+          required: false
+        }
+      ],
+      events: [],
+      examples: [
+        {
+          title: "Basic Usage",
+          code: "<script>\n  import type { Notification } from '@classic-homes/notifications/core';\n\n  let notification = $state<Notification | null>(null);\n  let open = $state(false);\n</script>\n\n<NotificationDialog {notification} bind:open />"
         },
         {
-          name: "error",
-          type: "string",
-          required: false,
-          description: "Error message"
+          title: "Mark as Read/Unread",
+          description: "The dialog shows contextual buttons based on read status:",
+          code: "<NotificationDialog\n  {notification}\n  bind:open\n  onMarkRead={(id) => {\n    notifications = notifications.map((n) =>\n      n.id === id ? { ...n, read: true, readAt: new Date().toISOString() } : n\n    );\n  }}\n  onMarkUnread={(id) => {\n    notifications = notifications.map((n) =>\n      n.id === id ? { ...n, read: false, readAt: undefined } : n\n    );\n  }}\n/>"
         },
         {
-          name: "max",
-          type: "number",
-          required: false,
-          description: "Maximum selections allowed"
+          title: "Delete",
+          code: "<NotificationDialog\n  {notification}\n  bind:open\n  onDelete={(id) => {\n    notifications = notifications.filter((n) => n.id !== id);\n    open = false;\n  }}\n/>"
         },
         {
-          name: "loading",
-          type: "boolean",
-          default: "false",
-          required: false,
-          description: "Shows loading state"
+          title: "Complete Implementation",
+          code: "<script>\n  import { NotificationList, NotificationDialog, toastStore } from '@classic-homes/theme-svelte';\n  import type { Notification } from '@classic-homes/notifications/core';\n\n  let notifications = $state<Notification[]>([...]);\n  let selectedNotification = $state<Notification | null>(null);\n  let dialogOpen = $state(false);\n\n  function handleNotificationClick(notification: Notification) {\n    selectedNotification = notification;\n    dialogOpen = true;\n  }\n\n  function handleDialogClose() {\n    dialogOpen = false;\n    selectedNotification = null;\n  }\n\n  function markAsRead(id: string) {\n    notifications = notifications.map(n =>\n      n.id === id ? { ...n, read: true, readAt: new Date().toISOString() } : n\n    );\n    toastStore.success('Notification marked as read');\n  }\n\n  function markAsUnread(id: string) {\n    notifications = notifications.map(n =>\n      n.id === id ? { ...n, read: false, readAt: undefined } : n\n    );\n    toastStore.info('Notification marked as unread');\n  }\n\n  function deleteNotification(id: string) {\n    notifications = notifications.filter(n => n.id !== id);\n    handleDialogClose();\n    toastStore.info('Notification deleted');\n  }\n</script>\n\n<NotificationList {notifications} onNotificationClick={handleNotificationClick} />\n\n<NotificationDialog\n  notification={selectedNotification}\n  bind:open={dialogOpen}\n  onClose={handleDialogClose}\n  onMarkRead={markAsRead}\n  onMarkUnread={markAsUnread}\n  onDelete={deleteNotification}\n/>"
         },
         {
-          name: "debounceMs",
-          type: "number",
-          default: "300",
+          title: "With Action Links",
+          description: "Notifications with action URLs display a primary action button:",
+          code: "<!-- Notification with actionUrl and actionLabel -->\n<NotificationDialog\n  notification={{\n    ...notification,\n    actionUrl: '/settings/security',\n    actionLabel: 'Review Activity',\n  }}\n  bind:open\n/>"
+        }
+      ],
+      relatedComponents: [
+        "NotificationList",
+        "NotificationItem",
+        "Dialog"
+      ]
+    },
+    {
+      name: "NotificationFilters",
+      description: "Filter tabs for notification lists with counts",
+      category: "feedback",
+      importPath: "@classic-homes/theme-svelte",
+      props: [
+        {
+          name: "filter",
+          type: "NotificationFilter",
+          default: "'all'",
           required: false,
-          description: "Debounce time for search"
+          description: "Current active filter (bindable)"
         },
         {
-          name: "onValueChange",
-          type: "(value: string[]) => void",
+          name: "counts",
+          type: "NotificationCounts",
           required: false,
-          description: "Callback when value changes"
+          description: "Counts for each filter tab"
         },
         {
-          name: "onSearch",
-          type: "(query: string) => void",
+          name: "onFilterChange",
+          type: "(filter: NotificationFilter) => void",
           required: false,
-          description: "Callback for search queries"
+          description: "Callback when filter changes"
         },
         {
           name: "class",
@@ -6761,56 +7166,61 @@ var component_catalog_default = {
       examples: [
         {
           title: "Basic Usage",
-          code: `<script>
-  let selected = $state([]);
-
-  const options = [
-    { value: 'react', label: 'React' },
-    { value: 'svelte', label: 'Svelte' },
-    { value: 'vue', label: 'Vue' },
-    { value: 'angular', label: 'Angular' },
-  ];
-</script>
-
-<MultiSelect {options} bind:value={selected} placeholder="Select frameworks..." />`
+          code: "<script>\n  import type { NotificationFilter, NotificationCounts } from '@classic-homes/notifications/core';\n\n  let filter = $state<NotificationFilter>('all');\n  const counts: NotificationCounts = {\n    all: 10,\n    unread: 3,\n    read: 7,\n  };\n</script>\n\n<NotificationFilters bind:filter {counts} />"
         },
         {
-          title: "Tag Selector",
-          code: `<script>
-  let tags = $state([]);
-  const tagOptions = [
-    { value: 'urgent', label: 'Urgent' },
-    { value: 'bug', label: 'Bug' },
-    { value: 'feature', label: 'Feature' },
-    { value: 'docs', label: 'Documentation' },
-  ];
-</script>
-
-<MultiSelect
-  label="Tags"
-  hint="Add relevant tags"
-  options={tagOptions}
-  bind:value={tags}
-  placeholder="Add tags..."
-/>`
+          title: "With Notification List",
+          code: "<script>\n  import {\n    NotificationFilters,\n    NotificationList,\n  } from '@classic-homes/theme-svelte';\n  import type { Notification, NotificationFilter, NotificationCounts } from '@classic-homes/notifications/core';\n\n  let notifications = $state<Notification[]>([...]);\n  let filter = $state<NotificationFilter>('all');\n\n  const counts = $derived<NotificationCounts>({\n    all: notifications.length,\n    unread: notifications.filter(n => !n.read).length,\n    read: notifications.filter(n => n.read).length,\n  });\n\n  const filteredNotifications = $derived(() => {\n    switch (filter) {\n      case 'unread': return notifications.filter(n => !n.read);\n      case 'read': return notifications.filter(n => n.read);\n      default: return notifications;\n    }\n  });\n</script>\n\n<NotificationFilters bind:filter {counts} />\n\n<NotificationList\n  notifications={filteredNotifications()}\n  emptyTitle={filter === 'unread'\n    ? 'No unread notifications'\n    : filter === 'read'\n      ? 'No read notifications'\n      : 'No notifications'}\n/>"
         },
         {
-          title: "Team Members",
-          code: '<MultiSelect\n  label="Assign to"\n  hint="Select team members to assign this task"\n  options={teamMembers}\n  bind:value={assignees}\n  max={5}\n  placeholder="Select team members..."\n/>'
+          title: "Reset Selection on Filter Change",
+          code: "<script>\n  let selectedIds = $state(new Set<string>());\n\n  function handleFilterChange(newFilter: NotificationFilter) {\n    filter = newFilter;\n    selectedIds = new Set(); // Clear selection\n  }\n</script>\n\n<NotificationFilters\n  bind:filter\n  {counts}\n  onFilterChange={handleFilterChange}\n/>\n\n<NotificationBulkActions\n  selectedCount={selectedIds.size}\n  totalCount={filteredNotifications().length}\n  {...}\n/>"
         }
       ],
       relatedComponents: [
-        "Select",
-        "Combobox",
-        "Checkbox"
+        "NotificationList",
+        "NotificationBulkActions",
+        "Tabs"
       ]
     },
     {
-      name: "NoticeBanner",
-      description: "Banner component for displaying scheduled, dismissible announcements",
+      name: "NotificationItem",
+      description: "Single notification card with icon, title, message, and actions",
       category: "feedback",
       importPath: "@classic-homes/theme-svelte",
       props: [
+        {
+          name: "notification",
+          type: "Notification",
+          required: false,
+          description: "The notification object to display"
+        },
+        {
+          name: "isSelected",
+          type: "boolean",
+          default: "false",
+          required: false,
+          description: "Whether this notification is selected"
+        },
+        {
+          name: "selectable",
+          type: "boolean",
+          default: "false",
+          required: false,
+          description: "Whether selection mode is enabled"
+        },
+        {
+          name: "onToggleSelect",
+          type: "(id: string, selected: boolean) => void",
+          required: false,
+          description: "Callback when selection state changes"
+        },
+        {
+          name: "onClick",
+          type: "(notification: Notification) => void",
+          required: false,
+          description: "Callback when notification is clicked"
+        },
         {
           name: "class",
           type: "string",
@@ -6829,33 +7239,104 @@ var component_catalog_default = {
       events: [],
       examples: [
         {
-          title: "Maintenance Notice",
-          code: "<script>\n  const notices = [\n    {\n      id: 'maintenance',\n      title: 'Scheduled Maintenance',\n      message: 'The system will be unavailable on Sunday 2-4 AM EST.',\n      variant: 'warning',\n      location: 'banner',\n      dismissible: true,\n      startDate: '2025-01-15',\n      endDate: '2025-01-20',\n    },\n  ];\n\n  initializeNotices(notices);\n</script>\n\n<NoticeBanner />"
+          title: "Basic Usage",
+          code: "<script>\n  import type { Notification } from '@classic-homes/notifications/core';\n\n  const notification: Notification = {\n    id: '1',\n    userId: 'user-1',\n    type: 'info',\n    category: 'general',\n    title: 'Welcome!',\n    message: 'Thanks for signing up.',\n    priority: 'normal',\n    read: false,\n    dismissed: false,\n    createdAt: new Date().toISOString(),\n  };\n</script>\n\n<NotificationItem {notification} />"
         },
         {
-          title: "With Link",
-          code: "<script>\n  const notices = [\n    {\n      id: 'new-feature',\n      message: 'Check out our new dashboard features!',\n      variant: 'info',\n      location: 'banner',\n      link: {\n        text: 'Learn more',\n        href: '/whats-new',\n      },\n    },\n  ];\n</script>\n\n<NoticeBanner />"
+          title: "Unread",
+          description: "Unread notifications have a light blue background and blue border:",
+          code: "<NotificationItem notification={{ ...notification, read: false }} />"
         },
         {
-          title: "Page-Specific Notice",
-          code: "<script>\n  const notices = [\n    {\n      id: 'billing-update',\n      message: 'Your payment method will expire soon.',\n      variant: 'warning',\n      location: 'banner',\n      pages: ['/settings', '/billing'],\n    },\n  ];\n\n  initializeNotices(notices);\n  setCurrentPath('/billing'); // Notice will show\n</script>\n\n<NoticeBanner />"
+          title: "Read",
+          description: "Read notifications have a neutral card background:",
+          code: "<NotificationItem notification={{ ...notification, read: true }} />"
         },
         {
-          title: "In Layout",
-          code: "<!-- +layout.svelte -->\n<NoticeBanner />\n\n<main>\n  <slot />\n</main>"
+          title: "Priority Badges",
+          description: "Non-normal priorities display a badge:",
+          code: `<!-- Shows "urgent" badge -->
+<NotificationItem notification={{ ...notification, priority: 'urgent' }} />
+
+<!-- Shows "high" badge -->
+<NotificationItem notification={{ ...notification, priority: 'high' }} />`
+        },
+        {
+          title: "In a List",
+          code: "{#each notifications as notification (notification.id)}\n  <NotificationItem\n    {notification}\n    selectable={true}\n    isSelected={selectedIds.has(notification.id)}\n    onToggleSelect={handleToggleSelect}\n    onClick={handleNotificationClick}\n  />\n{/each}"
         }
       ],
       relatedComponents: [
-        "NoticeCard",
-        "Alert"
+        "NotificationList",
+        "NotificationDialog",
+        "NotificationBadge"
       ]
     },
     {
-      name: "NoticeCard",
-      description: "Card-style component for displaying inline scheduled announcements",
+      name: "NotificationList",
+      description: "Container for displaying a list of notifications with empty states and loading skeletons",
       category: "feedback",
       importPath: "@classic-homes/theme-svelte",
       props: [
+        {
+          name: "notifications",
+          type: "Notification[]",
+          required: false,
+          description: "List of notifications to display"
+        },
+        {
+          name: "selectedIds",
+          type: "Set<string>",
+          default: "new Set()",
+          required: false,
+          description: "Set of selected notification IDs"
+        },
+        {
+          name: "selectable",
+          type: "boolean",
+          default: "false",
+          required: false,
+          description: "Whether selection mode is enabled"
+        },
+        {
+          name: "onToggleSelect",
+          type: "(id: string, selected: boolean) => void",
+          required: false,
+          description: "Callback when a notification's selection changes"
+        },
+        {
+          name: "onNotificationClick",
+          type: "(notification: Notification) => void",
+          required: false,
+          description: "Callback when a notification is clicked"
+        },
+        {
+          name: "emptyState",
+          type: "Snippet",
+          required: false,
+          description: "Custom empty state snippet"
+        },
+        {
+          name: "emptyTitle",
+          type: "string",
+          default: "'No notifications'",
+          required: false,
+          description: "Empty state title"
+        },
+        {
+          name: "emptyDescription",
+          type: "string",
+          default: `"You're all caught up!"`,
+          required: false,
+          description: "Empty state description"
+        },
+        {
+          name: "loading",
+          type: "boolean",
+          default: "false",
+          required: false,
+          description: "Whether the list is loading"
+        },
         {
           name: "class",
           type: "string",
@@ -6875,62 +7356,39 @@ var component_catalog_default = {
       examples: [
         {
           title: "Basic Usage",
-          code: "<script>\n  import { NoticeCard, initializeNotices, setCurrentPath } from '@classic-homes/theme-svelte';\n\n  const notices = [\n    {\n      id: 'welcome',\n      title: 'Welcome!',\n      message: 'Thanks for signing up. Complete your profile to get started.',\n      variant: 'info',\n      location: 'card',\n      dismissible: true,\n    },\n  ];\n\n  initializeNotices(notices);\n  setCurrentPath('/dashboard');\n</script>\n\n<NoticeCard />"
-        },
-        {
-          title: "Welcome Message",
-          code: "<script>\n  const notices = [\n    {\n      id: 'onboarding',\n      title: 'Complete Your Profile',\n      message: 'Add a photo and bio to help others recognize you.',\n      variant: 'info',\n      location: 'card',\n      link: {\n        text: 'Edit profile',\n        href: '/settings/profile',\n      },\n    },\n  ];\n</script>\n\n<NoticeCard />"
-        },
-        {
-          title: "Feature Announcement",
-          code: `<script>
-  const notices = [
-    {
-      id: 'new-charts',
-      title: 'New Charts Available',
-      message: "We've added 5 new chart types to your dashboard.",
-      variant: 'success',
-      location: 'card',
-      startDate: '2025-01-01',
-      endDate: '2025-01-31',
-    },
-  ];
-</script>
-
-<NoticeCard />`
-        },
-        {
-          title: "Warning Notice",
-          code: `<script>
-  const notices = [
-    {
-      id: 'storage-limit',
-      message: "You're approaching your storage limit. Upgrade to continue uploading.",
-      variant: 'warning',
-      location: 'card',
-      pages: ['/dashboard', '/files'],
-      link: {
-        text: 'Upgrade plan',
-        href: '/billing/upgrade',
-      },
-    },
-  ];
-</script>
-
-<NoticeCard />`
+          code: "<script>\n  import type { Notification } from '@classic-homes/notifications/core';\n\n  let notifications = $state<Notification[]>([\n    // ... notification objects\n  ]);\n</script>\n\n<NotificationList {notifications} />"
         },
         {
-          title: "In Page Content",
-          code: '<div class="space-y-4">\n  <NoticeCard />\n\n  <Card>\n    <CardHeader>\n      <CardTitle>Dashboard</CardTitle>\n    </CardHeader>\n    <CardContent>\n      <!-- Main content -->\n    </CardContent>\n  </Card>\n</div>'
-        },
-        {
-          title: "Custom Styling",
-          code: '<NoticeCard class="mb-6" />'
+          title: "Custom Empty State",
+          description: "Provide a completely custom empty state:",
+          code: '<NotificationList notifications={[]}>\n  {#snippet emptyState()}\n    <div class="text-center py-12">\n      <img src="/empty-inbox.svg" alt="" class="mx-auto mb-4" />\n      <h3 class="text-lg font-medium">Inbox Zero!</h3>\n      <p class="text-muted-foreground">You have no notifications</p>\n    </div>\n  {/snippet}\n</NotificationList>'
+        },
+        {
+          title: "Complete Notification Center",
+          code: "<script>\n  import {\n    NotificationList,\n    NotificationFilters,\n    NotificationBulkActions,\n    NotificationDialog,\n  } from '@classic-homes/theme-svelte';\n  import type { Notification, NotificationFilter, NotificationCounts } from '@classic-homes/notifications/core';\n\n  let notifications = $state<Notification[]>([...]);\n  let filter = $state<NotificationFilter>('all');\n  let selectedIds = $state(new Set<string>());\n  let dialogOpen = $state(false);\n  let selectedNotification = $state<Notification | null>(null);\n\n  const filteredNotifications = $derived(() => {\n    switch (filter) {\n      case 'unread': return notifications.filter(n => !n.read);\n      case 'read': return notifications.filter(n => n.read);\n      default: return notifications;\n    }\n  });\n\n  const counts: NotificationCounts = $derived({\n    all: notifications.length,\n    unread: notifications.filter(n => !n.read).length,\n    read: notifications.filter(n => n.read).length,\n  });\n</script>\n\n<NotificationFilters bind:filter {counts} />\n\n<NotificationBulkActions\n  selectedCount={selectedIds.size}\n  totalCount={filteredNotifications().length}\n  onSelectAll={(selected) => {\n    /* ... */\n  }}\n  onMarkRead={() => {\n    /* ... */\n  }}\n  onDelete={() => {\n    /* ... */\n  }}\n/>\n\n<NotificationList\n  notifications={filteredNotifications()}\n  {selectedIds}\n  selectable={true}\n  onToggleSelect={handleToggleSelect}\n  onNotificationClick={handleNotificationClick}\n/>\n\n<NotificationDialog notification={selectedNotification} bind:open={dialogOpen} />"
+        },
+        {
+          title: "With Filter-Specific Empty States",
+          code: `<NotificationList
+  notifications={filteredNotifications()}
+  emptyTitle={filter === 'unread'
+    ? 'No unread notifications'
+    : filter === 'read'
+      ? 'No read notifications'
+      : 'No notifications'}
+  emptyDescription={filter === 'unread'
+    ? 'All caught up!'
+    : filter === 'read'
+      ? 'No notifications have been read yet'
+      : "You're all caught up!"}
+/>`
         }
       ],
       relatedComponents: [
-        "NoticeBanner",
-        "Alert"
+        "NotificationItem",
+        "NotificationFilters",
+        "NotificationBulkActions",
+        "NotificationDialog"
       ]
     },
     {
@@ -10584,7 +11042,7 @@ var token_definitions_default = {
         name: "charcoal",
         description: "Collection - Charcoal gray",
         shades: {
-          "50": "#f5f5f5",
+          "50": "#fafafa",
           "100": "#e6e6e6",
           "200": "#cccccc",
           "300": "#b3b3b3",
@@ -11450,6 +11908,197 @@ var pattern_library_default = {
       components: [],
       example: "// +page.ts\nimport { requireAuth, requireRole, protectedLoad } from '@classic-homes/auth/svelte';\n\n// Simple auth requirement\nexport const load = requireAuth();\n\n// Role-based protection\nexport const load = requireRole('admin');\n\n// Custom protected load\nexport const load = protectedLoad(async (event, auth) => {\n  const data = await fetchData(event.fetch, auth.user.id);\n  return { user: auth.user, data };\n});"
     }
+  ],
+  notifications: [
+    {
+      id: "notification-center",
+      name: "Notification Center",
+      description: "Complete notification center with list, filters, bulk actions, and detail dialog",
+      components: [
+        "NotificationList",
+        "NotificationItem",
+        "NotificationFilters",
+        "NotificationBulkActions",
+        "NotificationDialog",
+        "NotificationBadge"
+      ],
+      example: `<script lang="ts">
+  import {
+    NotificationList,
+    NotificationFilters,
+    NotificationBulkActions,
+    NotificationDialog,
+    NotificationBadge,
+  } from '@classic-homes/theme-svelte';
+  import { notificationService } from '@classic-homes/notifications/core';
+  import type { Notification, NotificationFilter } from '@classic-homes/notifications/core';
+
+  let notifications = $state<Notification[]>([]);
+  let filter = $state<NotificationFilter>('all');
+  let selectedIds = $state(new Set<string>());
+  let selectedNotification = $state<Notification | null>(null);
+  let dialogOpen = $state(false);
+
+  // Computed values
+  let filteredNotifications = $derived(
+    notifications.filter((n) => {
+      if (filter === 'unread') return !n.read;
+      if (filter === 'read') return n.read;
+      return true;
+    })
+  );
+
+  let counts = $derived({
+    all: notifications.length,
+    unread: notifications.filter((n) => !n.read).length,
+    read: notifications.filter((n) => n.read).length,
+  });
+
+  // Load notifications
+  $effect(() => {
+    notificationService.list().then((result) => {
+      notifications = result.notifications;
+    });
+  });
+
+  // Handlers
+  function handleNotificationClick(notification: Notification) {
+    selectedNotification = notification;
+    dialogOpen = true;
+  }
+
+  function handleToggleSelect(id: string, selected: boolean) {
+    const newSet = new Set(selectedIds);
+    if (selected) newSet.add(id);
+    else newSet.delete(id);
+    selectedIds = newSet;
+  }
+
+  async function handleMarkRead() {
+    await notificationService.markManyRead([...selectedIds]);
+    notifications = notifications.map((n) =>
+      selectedIds.has(n.id) ? { ...n, read: true } : n
+    );
+    selectedIds = new Set();
+  }
+
+  async function handleBulkDelete() {
+    await notificationService.bulkDelete([...selectedIds]);
+    notifications = notifications.filter((n) => !selectedIds.has(n.id));
+    selectedIds = new Set();
+  }
+</script>
+
+<div class="space-y-4">
+  <NotificationFilters bind:filter {counts} />
+
+  {#if filteredNotifications.length > 0}
+    <NotificationBulkActions
+      selectedCount={selectedIds.size}
+      totalCount={filteredNotifications.length}
+      allSelected={selectedIds.size === filteredNotifications.length}
+      onSelectAll={(selected) => {
+        selectedIds = selected
+          ? new Set(filteredNotifications.map((n) => n.id))
+          : new Set();
+      }}
+      onMarkRead={handleMarkRead}
+      onDelete={handleBulkDelete}
+      onClearSelection={() => (selectedIds = new Set())}
+    />
+  {/if}
+
+  <NotificationList
+    notifications={filteredNotifications}
+    {selectedIds}
+    selectable={true}
+    onToggleSelect={handleToggleSelect}
+    onNotificationClick={handleNotificationClick}
+  />
+
+  <NotificationDialog
+    notification={selectedNotification}
+    bind:open={dialogOpen}
+    onClose={() => (dialogOpen = false)}
+    onMarkRead={(id) => {
+      notifications = notifications.map((n) =>
+        n.id === id ? { ...n, read: true } : n
+      );
+    }}
+    onDelete={(id) => {
+      notifications = notifications.filter((n) => n.id !== id);
+      dialogOpen = false;
+    }}
+  />
+</div>`
+    },
+    {
+      id: "notification-dropdown",
+      name: "Notification Dropdown",
+      description: "Notification bell icon with dropdown panel for header integration",
+      components: [
+        "NotificationBadge",
+        "NotificationList",
+        "NotificationItem",
+        "DropdownMenu",
+        "Button"
+      ],
+      example: `<script lang="ts">
+  import { NotificationBadge, NotificationList, Button, DropdownMenu } from '@classic-homes/theme-svelte';
+  import { notificationService } from '@classic-homes/notifications/core';
+  import type { Notification } from '@classic-homes/notifications/core';
+  import { goto } from '$app/navigation';
+
+  let notifications = $state<Notification[]>([]);
+  let unreadCount = $derived(notifications.filter((n) => !n.read).length);
+
+  $effect(() => {
+    notificationService.list({ limit: 5 }).then((result) => {
+      notifications = result.notifications;
+    });
+  });
+
+  function handleNotificationClick(notification: Notification) {
+    if (notification.actionUrl) {
+      goto(notification.actionUrl);
+    }
+  }
+</script>
+
+<DropdownMenu.Root>
+  <DropdownMenu.Trigger asChild let:builder>
+    <Button builders={[builder]} variant="ghost" size="icon" class="relative">
+      <NotificationBadge count={unreadCount} />
+    </Button>
+  </DropdownMenu.Trigger>
+
+  <DropdownMenu.Content class="w-80" align="end">
+    <div class="flex items-center justify-between p-4 border-b">
+      <h3 class="font-semibold">Notifications</h3>
+      {#if unreadCount > 0}
+        <Button variant="ghost" size="sm" onclick={() => notificationService.markAllRead()}>
+          Mark all read
+        </Button>
+      {/if}
+    </div>
+
+    <div class="max-h-96 overflow-y-auto">
+      <NotificationList
+        {notifications}
+        onNotificationClick={handleNotificationClick}
+        emptyTitle="No notifications"
+        emptyDescription="You're all caught up!"
+      />
+    </div>
+
+    <div class="p-2 border-t">
+      <Button variant="ghost" class="w-full" onclick={() => goto('/notifications')}>
+        View all notifications
+      </Button>
+    </div>
+  </DropdownMenu.Content>
+</DropdownMenu.Root>`
+    }
   ]
 };
 
@@ -13177,7 +13826,10 @@ var SuggestPatternSchema = z3.object({
     "login-with-mfa",
     "sso-login",
     "session-management",
-    "protected-route"
+    "protected-route",
+    // Notification patterns
+    "notification-center",
+    "notification-dropdown"
   ]).describe("The use case you need a pattern for"),
   requirements: z3.array(z3.string()).optional().describe("Additional requirements or constraints")
 });
@@ -13191,12 +13843,18 @@ function registerSuggestPatternTool(server) {
       const layout = patterns2.layouts.find((l) => l.id === useCase || l.useCase === useCase);
       const form = patterns2.forms.find((f) => f.id === useCase);
       const auth = patterns2.auth?.find((a) => a.id === useCase);
-      const pattern = layout || form || auth;
+      const notification = patterns2.notifications?.find((n) => n.id === useCase);
+      const pattern = layout || form || auth || notification;
       if (!pattern) {
         const availablePatterns = [
           ...patterns2.layouts.map((l) => ({ id: l.id, type: "layout", name: l.name })),
           ...patterns2.forms.map((f) => ({ id: f.id, type: "form", name: f.name })),
-          ...patterns2.auth?.map((a) => ({ id: a.id, type: "auth", name: a.name })) || []
+          ...patterns2.auth?.map((a) => ({ id: a.id, type: "auth", name: a.name })) || [],
+          ...patterns2.notifications?.map((n) => ({
+            id: n.id,
+            type: "notification",
+            name: n.name
+          })) || []
         ];
         return {
           content: [