@urbicon-ui/table 6.1.4

package/README.md

@@ -0,0 +1,153 @@
+# @urbicon-ui/table
+
+Feature-complete data table for Svelte 5 — zero runtime dependencies, part of the Urbicon UI monorepo.
+
+> **Maturity:** stable since `v1.0.0` (2026-05-12). `v2.0.0` (2026-05-15) refactored the Column API to separate `accessor` (value extraction) from `id` (state-targeting), eliminating the `"[object Object]"`-search trap; see `CHANGELOG.md`. All nine implementation phases are closed; 185 unit tests cover every concern.
+
+## Installation
+
+This package ships inside the Urbicon UI monorepo. Install from repo root:
+
+```bash
+bun install
+```
+
+Peer dependencies: `svelte` (^5), `@urbicon-ui/blocks`, `@urbicon-ui/i18n`.
+
+## Capability Overview
+
+| Area                | Highlights                                                                                                                  |
+| ------------------- | --------------------------------------------------------------------------------------------------------------------------- |
+| Data pipeline       | `$derived`-chain `items → filteredItems → sortedItems → grouped → paginatedItems`; all stages reactive                      |
+| Sorting & Filtering | Column sort (asc/desc/none tri-state), smart filter bar, column-level filters, search highlighting                          |
+| Selection           | Single / multi, `onSelectionChange`, indeterminate header, keyboard toggle (`Space`)                                        |
+| Keyboard            | Roving tabindex, ARIA-Grid role, arrow keys, `Home`/`End`/`PageUp`/`PageDown`, Skip-Link                                    |
+| Grouping            | `groupByKey`, collapsible group headers, grouped summary rows                                                               |
+| Pagination          | Built-in paginator, auto-disable on grouping, mobile-friendly controls                                                      |
+| Virtualization      | `computeVirtualItems` for 10k+ rows (custom, zero deps); `virtualHeight` prop; falls back to normal rendering when inactive |
+| Column ordering     | Pointer-event drag-and-drop + `Shift+ArrowLeft/Right` keyboard reorder via shared `createDraggable` action                  |
+| Column visibility   | Header menu + persistence API                                                                                               |
+| Remote mode         | `mode: 'server'` + `queryFn` (managed fetch with `AbortSignal`) or `onQueryChange` (manual), debounced, cancellation-safe   |
+| Live updates        | `pushInsert/Update/Delete` pending-buffer, `LiveUpdateBanner`, auto-apply on navigation                                     |
+| Styling             | `unstyled`, `slotClasses`, `TableStyleContext` — every subcomponent respects the 17-slot map                                |
+| Cells               | `LinkCell`, `NumberCell`, `DateCell`, `UserAvatar`, `StatusBadge`, `CustomCell`, Fill-Cell                                  |
+| i18n                | Package-scoped namespace `table.*`, EN + DE                                                                                 |
+
+## Quick Start
+
+```svelte
+<script lang="ts">
+  import { Table, TableColumns } from '@urbicon-ui/table';
+
+  let items = $state([
+    { id: 1, name: 'Alice', role: 'Admin' },
+    { id: 2, name: 'Bob', role: 'User' }
+  ]);
+
+  const columns = [
+    TableColumns.text('name', 'Name', { sortable: true }),
+    TableColumns.text('role', 'Role')
+  ];
+</script>
+
+<Table {items} {columns} selectionMode="multi" onSelectionChange={(rows) => console.log(rows)} />
+```
+
+### Server-mode with managed fetch
+
+```svelte
+<Table
+  mode="server"
+  serverTotalItems={total}
+  queryFn={async (query, { signal }) => {
+    const res = await fetch(`/api/users?${new URLSearchParams(query)}`, { signal });
+    return res.json(); // { items, totalItems }
+  }}
+  {columns}
+/>
+```
+
+### Live updates
+
+```svelte
+<Table {items} {columns} enableLiveUpdates>
+  {#snippet aboveTable({ ctx })}
+    <button onclick={() => ctx.pushInsert({ id: crypto.randomUUID(), name: 'New' })}>
+      + row
+    </button>
+  {/snippet}
+</Table>
+```
+
+## State Persistence
+
+`persistenceConfig={{ tableId: 'foo' }}` is enough to make filters, search, group-by, summaries, sort, column visibility and column order survive a page reload. Every axis is on by default and stored under a `tableId`-scoped key in `localStorage`. Pagination is intentionally **not** persisted — page 1 on navigation is standard UX.
+
+```svelte
+<Table {items} {columns} persistenceConfig={{ tableId: 'expenses' }} />
+```
+
+Disable individual axes (e.g. always start filter-free, but keep the column layout the user picked):
+
+```svelte
+<Table
+  {items}
+  {columns}
+  persistenceConfig={{
+    tableId: 'expenses',
+    persistFilters: false,
+    persistSearch: false
+  }}
+/>
+```
+
+Storage keys are namespaced by `tableId` (`urbicon_table_filters_expenses_v1`, …); pick a stable, unique `tableId` per table — two tables sharing one id will overwrite each other.
+
+`storage: 'sessionStorage'` limits persistence to the current tab (lost on tab close). The `clearAllPersistentData` and `forceSavePersistentData` methods on the table context let you reset or flush state imperatively.
+
+## Subcomponent Styling
+
+Every structural subcomponent (`EmptyState`, `ErrorState`, `LoadingState`, `GroupedRow`, `SummaryRow`, `MobileCard`, `SmartFilterBar`) consumes `TableStyleContext` — pass `slotClasses` at the `<Table>` root and it reaches the leaves.
+
+```svelte
+<Table
+  {items}
+  {columns}
+  unstyled
+  slotClasses={{
+    container: 'rounded-2xl bg-surface-elevated',
+    headerCell: 'text-text-tertiary uppercase tracking-wider text-xs',
+    row: 'hover:bg-surface-hover'
+  }}
+/>
+```
+
+## i18n
+
+Namespace: `table.*`. Resolve typed keys via the context hook `useTableI18n` — call it during component init and alias the result `tt`:
+
+```svelte
+<script>
+  import { useTableI18n } from '@urbicon-ui/table';
+  const tt = useTableI18n();
+</script>
+
+<span>{tt('data.loading')}</span>
+<!-- "Loading data…" -->
+<span>{tt('pagination.showing', { start: 1, end: 10, total: 100 })}</span>
+```
+
+Resolves against the request-scoped locale from `<I18nProvider>` (or the base locale `en` without one). Add a locale: register a new package via `@urbicon-ui/i18n`'s `createPackageI18n`, or extend the existing bundles in `src/lib/translations/`.
+
+## Development
+
+```bash
+bun --filter='@urbicon-ui/table' run dev     # svelte-package watch
+bun --filter='@urbicon-ui/table' run build   # svelte-package
+bun --filter='@urbicon-ui/table' run check   # svelte-check
+bunx --bun vitest run                        # unit tests (from package root)
+```
+
+## Related
+
+- [docs/ARCHITECTURE.md](../../docs/ARCHITECTURE.md) — remote-data architecture

package/dist/cells/ActionButtons.svelte

@@ -0,0 +1,224 @@
+<script lang="ts" generics="Item">
+  import type { Component } from 'svelte';
+  import {
+    Button,
+    resolveIcon,
+    EditIcon as EditIconDefault,
+    TrashIcon as TrashIconDefault,
+    EyeIcon as EyeIconDefault
+  } from '@urbicon-ui/blocks';
+
+  const EditIcon = resolveIcon('edit', EditIconDefault);
+  const TrashIcon = resolveIcon('trash', TrashIconDefault);
+  const EyeIcon = resolveIcon('eye', EyeIconDefault);
+  import { useTableI18n } from '../i18n';
+  import { actionCellVariants, type ActionCellVariantProps } from '../variants';
+
+  const tt = useTableI18n();
+
+  /**
+   * Extra action descriptor for `ActionButtons`. Renders an additional ghost
+   * Button next to the built-in view/edit/delete trio so callers don't have to
+   * fall back to a custom cell snippet for one extra action.
+   */
+  export type ExtraAction<Item> = {
+    /** Icon component (e.g. the imported `ActivityIcon`). */
+    icon: Component<{ class?: string; [key: string]: unknown }>;
+    /** Accessible label and tooltip — used for `aria-label`. */
+    label: string;
+    /** Click handler. Receives the row item. */
+    onClick: (item: Item) => void;
+    /** Button intent. @default 'secondary' */
+    intent?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'neutral';
+    /** Predicate that disables this action for a given item. @default () => false */
+    disabled?: (item: Item) => boolean;
+    /** Predicate that hides this action for a given item entirely. @default () => true */
+    show?: (item: Item) => boolean;
+    /** Optional `data-testid` suffix; defaults to a slugified label. */
+    testIdSuffix?: string;
+  };
+
+  export type ActionButtonsProps<Item> = {
+    onEdit?: (item: Item) => void;
+    onDelete?: (item: Item) => void;
+    onView?: (item: Item) => void;
+    canEdit?: (item: Item) => boolean;
+    canDelete?: (item: Item) => boolean;
+    showEdit?: boolean;
+    showDelete?: boolean;
+    showView?: boolean;
+    /**
+     * Extra actions rendered before the built-in view/edit/delete buttons.
+     * Use this for app-specific actions (e.g. "Show readings", "Duplicate")
+     * instead of writing a custom cell snippet.
+     */
+    extraActions?: ExtraAction<Item>[];
+    item: Item;
+    idProperty?: keyof Item;
+    size?: ActionCellVariantProps['size'];
+    variant?: ActionCellVariantProps['variant'];
+    className?: string;
+    testId?: string;
+    align?: 'left' | 'center' | 'right';
+    maxWidth?: string;
+  };
+
+  let {
+    item,
+    showEdit = true,
+    showDelete = true,
+    showView = false,
+    extraActions = [],
+    onEdit = () => {},
+    onDelete = () => {},
+    onView = () => {},
+    canEdit = () => true,
+    canDelete = () => true,
+    idProperty = 'id' as keyof Item,
+    size = 'sm',
+    variant = 'ghost',
+    className = '',
+    testId = undefined,
+    align = 'right',
+    maxWidth = '7rem'
+  }: ActionButtonsProps<Item> = $props();
+
+  function slugify(label: string): string {
+    return label
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, '-')
+      .replace(/^-+|-+$/g, '');
+  }
+
+  function makeExtraHandler(action: ExtraAction<Item>) {
+    return (event: MouseEvent) => {
+      event.stopPropagation();
+      if (action.disabled?.(item)) return;
+      action.onClick(item);
+    };
+  }
+
+  const id = $derived((item[idProperty] ?? '').toString());
+
+  const computedTestId = $derived(() => {
+    if (testId) return testId;
+    return `action-buttons-${id}`;
+  });
+
+  // Container styling for consistent layout
+  const containerStyles = $derived(
+    actionCellVariants({
+      size,
+      variant
+    })
+  );
+
+  // Count visible buttons
+  const visibleButtonsCount = $derived(() => {
+    let count = 0;
+    if (showView) count++;
+    if (showEdit) count++;
+    if (showDelete) count++;
+    return count;
+  });
+
+  function handleEdit(event: MouseEvent) {
+    event.stopPropagation();
+    if (canEdit(item)) {
+      onEdit(item);
+    }
+  }
+
+  function handleDelete(event: MouseEvent) {
+    event.stopPropagation();
+    if (canDelete(item)) {
+      onDelete(item);
+    }
+  }
+
+  function handleView(event: MouseEvent) {
+    event.stopPropagation();
+    onView(item);
+  }
+</script>
+
+<!-- Container with fixed width and alignment -->
+<div
+  class="flex min-h-10 items-center px-2 py-1 {align === 'center'
+    ? 'justify-center'
+    : align === 'right'
+      ? 'justify-end'
+      : 'justify-start'} {className}"
+  style="max-width: {maxWidth}; width: {maxWidth};"
+  data-testid={computedTestId()}
+>
+  <!-- Button container -->
+  <div class="{containerStyles.container()} w-full">
+    {#if showView}
+      <Button
+        variant="ghost"
+        size="xs"
+        intent="secondary"
+        onclick={handleView}
+        aria-label={tt('actions.showDetails')}
+        data-testid={`view-${id}`}
+        class="{containerStyles.button()} flex-shrink-0"
+      >
+        <EyeIcon class={containerStyles.icon()} />
+      </Button>
+    {/if}
+
+    {#each extraActions as action (action.testIdSuffix ?? action.label)}
+      {#if action.show?.(item) ?? true}
+        {@const ExtraIcon = action.icon}
+        {@const isDisabled = action.disabled?.(item) ?? false}
+        <Button
+          variant="ghost"
+          size="xs"
+          intent={action.intent ?? 'secondary'}
+          onclick={makeExtraHandler(action)}
+          disabled={isDisabled}
+          aria-disabled={isDisabled}
+          aria-label={action.label}
+          title={action.label}
+          data-testid={`${action.testIdSuffix ?? slugify(action.label)}-${id}`}
+          class="{containerStyles.button()} flex-shrink-0"
+        >
+          <ExtraIcon class={containerStyles.icon()} />
+        </Button>
+      {/if}
+    {/each}
+
+    {#if showEdit}
+      <Button
+        variant="ghost"
+        size="xs"
+        intent="primary"
+        onclick={handleEdit}
+        disabled={!canEdit(item)}
+        aria-disabled={!canEdit(item)}
+        aria-label={tt('actions.edit')}
+        data-testid={`edit-${id}`}
+        class="{containerStyles.button()} flex-shrink-0"
+      >
+        <EditIcon class={containerStyles.icon()} />
+      </Button>
+    {/if}
+
+    {#if showDelete}
+      <Button
+        variant="ghost"
+        size="xs"
+        intent="danger"
+        onclick={handleDelete}
+        disabled={!canDelete(item)}
+        aria-disabled={!canDelete(item)}
+        aria-label={tt('actions.delete')}
+        data-testid={`delete-${id}`}
+        class="{containerStyles.button()} flex-shrink-0"
+      >
+        <TrashIcon class={containerStyles.icon()} />
+      </Button>
+    {/if}
+  </div>
+</div>

package/dist/cells/ActionButtons.svelte.d.ts

@@ -0,0 +1,74 @@
+import type { Component } from 'svelte';
+import { type ActionCellVariantProps } from '../variants';
+/**
+ * Extra action descriptor for `ActionButtons`. Renders an additional ghost
+ * Button next to the built-in view/edit/delete trio so callers don't have to
+ * fall back to a custom cell snippet for one extra action.
+ */
+export type ExtraAction<Item> = {
+    /** Icon component (e.g. the imported `ActivityIcon`). */
+    icon: Component<{
+        class?: string;
+        [key: string]: unknown;
+    }>;
+    /** Accessible label and tooltip — used for `aria-label`. */
+    label: string;
+    /** Click handler. Receives the row item. */
+    onClick: (item: Item) => void;
+    /** Button intent. @default 'secondary' */
+    intent?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'neutral';
+    /** Predicate that disables this action for a given item. @default () => false */
+    disabled?: (item: Item) => boolean;
+    /** Predicate that hides this action for a given item entirely. @default () => true */
+    show?: (item: Item) => boolean;
+    /** Optional `data-testid` suffix; defaults to a slugified label. */
+    testIdSuffix?: string;
+};
+export type ActionButtonsProps<Item> = {
+    onEdit?: (item: Item) => void;
+    onDelete?: (item: Item) => void;
+    onView?: (item: Item) => void;
+    canEdit?: (item: Item) => boolean;
+    canDelete?: (item: Item) => boolean;
+    showEdit?: boolean;
+    showDelete?: boolean;
+    showView?: boolean;
+    /**
+     * Extra actions rendered before the built-in view/edit/delete buttons.
+     * Use this for app-specific actions (e.g. "Show readings", "Duplicate")
+     * instead of writing a custom cell snippet.
+     */
+    extraActions?: ExtraAction<Item>[];
+    item: Item;
+    idProperty?: keyof Item;
+    size?: ActionCellVariantProps['size'];
+    variant?: ActionCellVariantProps['variant'];
+    className?: string;
+    testId?: string;
+    align?: 'left' | 'center' | 'right';
+    maxWidth?: string;
+};
+declare function $$render<Item>(): {
+    props: ActionButtonsProps<Item>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Item> {
+    props(): ReturnType<typeof $$render<Item>>['props'];
+    events(): ReturnType<typeof $$render<Item>>['events'];
+    slots(): ReturnType<typeof $$render<Item>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Item>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Item>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Item>['props']>, ReturnType<__sveltets_Render<Item>['events']>, ReturnType<__sveltets_Render<Item>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Item>['bindings']>;
+    } & ReturnType<__sveltets_Render<Item>['exports']>;
+    <Item>(internal: unknown, props: ReturnType<__sveltets_Render<Item>['props']> & {}): ReturnType<__sveltets_Render<Item>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const ActionButtons: $$IsomorphicComponent;
+type ActionButtons<Item> = InstanceType<typeof ActionButtons<Item>>;
+export default ActionButtons;

package/dist/cells/CopyButton.svelte

@@ -0,0 +1,89 @@
+<script lang="ts" generics="Item">
+  import {
+    Button,
+    resolveIcon,
+    CheckCircleIcon as CheckCircleIconDefault,
+    CopyIcon as CopyIconDefault
+  } from '@urbicon-ui/blocks';
+
+  const CheckCircleIcon = resolveIcon('checkCircle', CheckCircleIconDefault);
+  const CopyIcon = resolveIcon('copy', CopyIconDefault);
+  import { useTableI18n } from '../i18n';
+  import { type CopyButtonVariantProps, copyButtonVariants } from '../variants';
+
+  const tt = useTableI18n();
+
+  export type CopyButtonProps<Item> = {
+    item: Item;
+    valueKey?: keyof Item;
+    label?: string;
+    size?: CopyButtonVariantProps['size'];
+    responsive?: CopyButtonVariantProps['responsive'];
+    className?: string;
+  };
+
+  let {
+    item,
+    valueKey = 'email' as keyof Item,
+    label: labelProp = undefined as string | undefined,
+    size = 'xs',
+    responsive = true,
+    className = ''
+  }: CopyButtonProps<Item> = $props();
+
+  const label = $derived(labelProp ?? tt('copy.button'));
+
+  let copied = $state(false);
+  let failed = $state(false);
+
+  // Reactive value extraction
+  const value = $derived(item[valueKey] || '');
+
+  // Tailwind-Variants styling
+  const styles = $derived(copyButtonVariants({ size, responsive }));
+
+  async function copyToClipboard(event: MouseEvent) {
+    event.stopPropagation();
+    try {
+      await navigator.clipboard.writeText(String(value));
+      copied = true;
+      failed = false;
+      setTimeout(() => (copied = false), 2000);
+    } catch (err) {
+      console.error('Copy failed:', err);
+      failed = true;
+      setTimeout(() => (failed = false), 2000);
+    }
+  }
+
+  function handleKeyDown(event: KeyboardEvent) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      copyToClipboard(event as unknown as MouseEvent);
+    }
+  }
+</script>
+
+<div class="{styles.container()} {className}">
+  <Button
+    variant="ghost"
+    size="xs"
+    intent={copied ? 'success' : failed ? 'danger' : 'secondary'}
+    onclick={copyToClipboard}
+    onkeydown={handleKeyDown}
+    title={copied ? tt('copy.copied') : failed ? tt('copy.failed') : `${label}: ${value}`}
+    class={styles.button()}
+    aria-label={copied ? tt('copy.copied') : failed ? tt('copy.failed') : label}
+  >
+    {#if copied}
+      <CheckCircleIcon class={styles.icon()} />
+      <span class={styles.textSuccess()}>{tt('copy.copied')}</span>
+    {:else if failed}
+      <CopyIcon class={styles.icon()} />
+      <span class={styles.text()}>{tt('copy.failed')}</span>
+    {:else}
+      <CopyIcon class={styles.icon()} />
+      <span class={styles.text()}>{label}</span>
+    {/if}
+  </Button>
+</div>

package/dist/cells/CopyButton.svelte.d.ts

@@ -0,0 +1,33 @@
+import { type CopyButtonVariantProps } from '../variants';
+export type CopyButtonProps<Item> = {
+    item: Item;
+    valueKey?: keyof Item;
+    label?: string;
+    size?: CopyButtonVariantProps['size'];
+    responsive?: CopyButtonVariantProps['responsive'];
+    className?: string;
+};
+declare function $$render<Item>(): {
+    props: CopyButtonProps<Item>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Item> {
+    props(): ReturnType<typeof $$render<Item>>['props'];
+    events(): ReturnType<typeof $$render<Item>>['events'];
+    slots(): ReturnType<typeof $$render<Item>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Item>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Item>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Item>['props']>, ReturnType<__sveltets_Render<Item>['events']>, ReturnType<__sveltets_Render<Item>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Item>['bindings']>;
+    } & ReturnType<__sveltets_Render<Item>['exports']>;
+    <Item>(internal: unknown, props: ReturnType<__sveltets_Render<Item>['props']> & {}): ReturnType<__sveltets_Render<Item>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const CopyButton: $$IsomorphicComponent;
+type CopyButton<Item> = InstanceType<typeof CopyButton<Item>>;
+export default CopyButton;