@urbicon-ui/table 6.1.4

package/dist/factories/index.js

@@ -0,0 +1,13 @@
+// === TABLE FACTORIES ===
+// === CELL COMPONENTS ===
+export { default as ActionButtons } from '../cells/ActionButtons.svelte';
+export { default as CopyButton } from '../cells/CopyButton.svelte';
+export { default as CustomCell } from '../cells/CustomCell.svelte';
+export { default as DateCell } from '../cells/DateCell.svelte';
+export { default as LinkCell } from '../cells/LinkCell.svelte';
+export { default as NumberCell } from '../cells/NumberCell.svelte';
+export { default as StatusBadge } from '../cells/StatusBadge.svelte';
+export { default as UserAvatar } from '../cells/UserAvatar.svelte';
+export { ColumnValidation, ValidationHelpers } from './ColumnValidation';
+export { TableColumns } from './TableColumns';
+export { TypedColumnBuilder } from './TypedColumnBuilder';

package/dist/features/HeaderMenu.svelte

@@ -0,0 +1,236 @@
+<script lang="ts">
+  import { getTableContext } from '../stores/TableStore.svelte';
+  import { headerMenuItemVariants, headerMenuVariants } from '../variants';
+  import {
+    Button,
+    Popover,
+    resolveIcon,
+    ArrowDownIcon as ArrowDownIconDefault,
+    ArrowUpIcon as ArrowUpIconDefault,
+    CalculatorIcon as CalculatorIconDefault,
+    EyeIcon as EyeIconDefault,
+    EyeOffIcon as EyeOffIconDefault,
+    FilterXIcon as FilterXIconDefault,
+    MoreVerticalIcon as MoreVerticalIconDefault,
+    UsersIcon as UsersIconDefault
+  } from '@urbicon-ui/blocks';
+  import { useTableI18n } from '../i18n';
+  import { resolveColumnId, resolveColumnLabel } from '../utils';
+  import type { Column } from '../types/tableTypes';
+
+  const tt = useTableI18n();
+
+  type HeaderMenuProps = {
+    column: Column;
+    isActive?: boolean;
+  };
+
+  const ArrowDownIcon = resolveIcon('arrowDown', ArrowDownIconDefault);
+  const ArrowUpIcon = resolveIcon('arrowUp', ArrowUpIconDefault);
+  const CalculatorIcon = resolveIcon('calculator', CalculatorIconDefault);
+  const EyeIcon = resolveIcon('eye', EyeIconDefault);
+  const EyeOffIcon = resolveIcon('eyeOff', EyeOffIconDefault);
+  const FilterXIcon = resolveIcon('filterX', FilterXIconDefault);
+  const MoreVerticalIcon = resolveIcon('moreVertical', MoreVerticalIconDefault);
+  const UsersIcon = resolveIcon('users', UsersIconDefault);
+
+  let { column, isActive = false }: HeaderMenuProps = $props();
+
+  const tableContext = getTableContext();
+  const {
+    state: tableState,
+    setGroupByKey,
+    addSummaryConfig,
+    removeSummaryConfig,
+    removeFiltersByColumn,
+    hideColumn,
+    showColumn
+  } = tableContext;
+
+  let menuOpen = $state(false);
+
+  const columnId = $derived(resolveColumnId(column));
+  // Synthetic columns (no accessor) cannot participate in derived ops.
+  const canSort = $derived(column.accessor !== undefined && column.sortable !== false);
+  const canGroup = $derived(column.accessor !== undefined && column.groupable !== false);
+
+  const styles = $derived(headerMenuVariants({ active: isActive }));
+
+  function handleSortAsc() {
+    tableState.sortColumn = columnId;
+    tableState.sortDirection = 'asc';
+    menuOpen = false;
+  }
+
+  function handleSortDesc() {
+    tableState.sortColumn = columnId;
+    tableState.sortDirection = 'desc';
+    menuOpen = false;
+  }
+
+  function handleGroupBy() {
+    if (tableState.groupByKey === columnId) {
+      setGroupByKey(null);
+    } else {
+      setGroupByKey(columnId);
+    }
+    menuOpen = false;
+  }
+
+  function handleToggleSummary() {
+    const hasSummary = tableState.summaryConfigs.some((c) => c.column === columnId);
+
+    if (hasSummary) {
+      removeSummaryConfig(columnId);
+    } else {
+      // Synthetic columns can't reach this handler (gated by isColumnSummable),
+      // so `dataType` is reachable on the narrowed data-column shape.
+      const dataType = 'dataType' in column ? column.dataType : undefined;
+      const summaryType = dataType === 'number' ? 'sum' : 'count';
+      addSummaryConfig({
+        column: columnId,
+        type: summaryType
+      });
+    }
+    menuOpen = false;
+  }
+
+  function handleRemoveFilters() {
+    removeFiltersByColumn(columnId);
+    menuOpen = false;
+  }
+
+  function handleHideColumn() {
+    hideColumn(columnId);
+    menuOpen = false;
+  }
+
+  function itemClass(
+    intent: 'default' | 'filter' | 'group' | 'summary' | 'danger',
+    active = false
+  ) {
+    return headerMenuItemVariants({ intent, active });
+  }
+
+  function isColumnSummable(col: Column): boolean {
+    // Synthetic columns have no source value — they cannot be summed regardless of name.
+    if (col.accessor === undefined) return false;
+    // After the accessor check, TS narrows `col` to the derivable shapes.
+    const dataCol = col as Exclude<Column, { accessor?: never }>;
+    if (dataCol.summable !== undefined) return dataCol.summable === true;
+    return (
+      dataCol.dataType === 'number' ||
+      /^(age|salary|price|amount|count|number|projectsCompleted|rating|score)$/i.test(
+        resolveColumnId(col)
+      )
+    );
+  }
+
+  let isSorted = $derived(tableState.sortColumn === columnId);
+  let isGrouped = $derived(tableState.groupByKey === columnId);
+  let hasSummary = $derived(tableState.summaryConfigs.some((c) => c.column === columnId));
+  let hasFilter = $derived(tableState.activeFilters.some((f) => f.column === columnId));
+
+  const hiddenColumns = $derived.by(() =>
+    tableContext.allColumns.filter((col) => tableContext.hiddenColumnKeys.has(resolveColumnId(col)))
+  );
+
+  function handleShowColumn(key: string) {
+    showColumn(key);
+    menuOpen = false;
+  }
+</script>
+
+<div class={styles.container()} data-testid={`header-menu-${columnId}`}>
+  <Popover bind:open={menuOpen} placement="bottom-start">
+    {#snippet trigger()}
+      <Button
+        variant="ghost"
+        size="sm"
+        class={styles.trigger()}
+        aria-label="{tt('headerMenu.columnOptions')} {resolveColumnLabel(column)}"
+        data-testid={`header-menu-trigger-${columnId}`}
+      >
+        <MoreVerticalIcon class="h-4 w-4" />
+      </Button>
+    {/snippet}
+
+    <div class={styles.menu()}>
+      {#if canSort}
+        <Button
+          variant="ghost"
+          size="sm"
+          class={itemClass('default', isSorted && tableState.sortDirection === 'asc')}
+          onclick={handleSortAsc}
+        >
+          <ArrowUpIcon class="h-4 w-4" />
+          {tt('headerMenu.sortAscending')}
+        </Button>
+
+        <Button
+          variant="ghost"
+          size="sm"
+          class={itemClass('default', isSorted && tableState.sortDirection === 'desc')}
+          onclick={handleSortDesc}
+        >
+          <ArrowDownIcon class="h-4 w-4" />
+          {tt('headerMenu.sortDescending')}
+        </Button>
+
+        <div class={styles.separator()}></div>
+      {/if}
+
+      {#if hasFilter}
+        <Button variant="ghost" size="sm" class={itemClass('filter')} onclick={handleRemoveFilters}>
+          <FilterXIcon class="h-4 w-4" />
+          {tt('headerMenu.removeFilter')}
+        </Button>
+      {/if}
+
+      {#if canGroup}
+        <Button
+          variant="ghost"
+          size="sm"
+          class={itemClass(isGrouped ? 'group' : 'default', isGrouped)}
+          onclick={handleGroupBy}
+        >
+          <UsersIcon class="h-4 w-4" />
+          {isGrouped ? tt('headerMenu.removeGrouping') : tt('headerMenu.groupByColumn')}
+        </Button>
+      {/if}
+
+      {#if isColumnSummable(column)}
+        <Button
+          variant="ghost"
+          size="sm"
+          class={itemClass(hasSummary ? 'summary' : 'default', hasSummary)}
+          onclick={handleToggleSummary}
+        >
+          <CalculatorIcon class="h-4 w-4" />
+          {hasSummary ? tt('headerMenu.removeSummary') : tt('headerMenu.addSummary')}
+        </Button>
+      {/if}
+
+      <div class={styles.separator()}></div>
+      <Button variant="ghost" size="sm" class={itemClass('danger')} onclick={handleHideColumn}>
+        <EyeOffIcon class="h-4 w-4" />
+        {tt('headerMenu.hideColumn')}
+      </Button>
+
+      {#if hiddenColumns.length > 0}
+        <div class={styles.separator()}></div>
+        {#each hiddenColumns as col (resolveColumnId(col))}
+          <Button
+            variant="ghost"
+            size="sm"
+            class={itemClass('default')}
+            onclick={() => handleShowColumn(resolveColumnId(col))}
+          >
+            <EyeIcon class="h-4 w-4" />
+            {tt('headerMenu.showColumn')} "{resolveColumnLabel(col)}"
+          </Button>
+        {/each}
+      {/if}
+    </div>
+  </Popover>
+</div>

package/dist/features/HeaderMenu.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Column } from '../types/tableTypes';
+type HeaderMenuProps = {
+    column: Column;
+    isActive?: boolean;
+};
+declare const HeaderMenu: import("svelte").Component<HeaderMenuProps, {}, "">;
+type HeaderMenu = ReturnType<typeof HeaderMenu>;
+export default HeaderMenu;

package/dist/features/LiveUpdateBanner.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+  import { Button } from '@urbicon-ui/blocks';
+  import { getTableContext } from '../stores/TableStore.svelte';
+  import { useTableI18n } from '../i18n';
+
+  const tt = useTableI18n();
+
+  let { class: className = '' }: { class?: string } = $props();
+
+  const tableContext = getTableContext();
+  const counts = $derived(tableContext.liveUpdateCounts);
+  const hasPending = $derived(tableContext.hasPendingUpdates);
+</script>
+
+{#if hasPending}
+  <div
+    class="border-primary/20 bg-primary-subtle text-text-primary rounded-contain flex items-center justify-between gap-3 border px-4 py-2.5 text-sm {className}"
+    role="status"
+    aria-live="polite"
+    data-testid="live-update-banner"
+  >
+    <div class="flex items-center gap-2">
+      <span class="relative flex h-2.5 w-2.5">
+        <span
+          class="bg-primary absolute inline-flex h-full w-full animate-ping rounded-full opacity-75"
+        ></span>
+        <span class="bg-primary relative inline-flex h-2.5 w-2.5 rounded-full"></span>
+      </span>
+
+      <span>
+        {#if counts.inserts > 0}
+          <strong>{counts.inserts}</strong> {tt('liveUpdates.newItems')}
+        {/if}
+        {#if counts.inserts > 0 && (counts.updates > 0 || counts.deletes > 0)},
+        {/if}
+        {#if counts.updates > 0}
+          <strong>{counts.updates}</strong> {tt('liveUpdates.updatedItems')}
+        {/if}
+        {#if counts.updates > 0 && counts.deletes > 0},
+        {/if}
+        {#if counts.deletes > 0}
+          <strong>{counts.deletes}</strong> {tt('liveUpdates.deletedItems')}
+        {/if}
+      </span>
+    </div>
+
+    <div class="flex items-center gap-2">
+      <Button
+        size="sm"
+        variant="ghost"
+        onclick={() => tableContext.dismissAllUpdates()}
+        data-testid="live-update-dismiss"
+      >
+        {tt('liveUpdates.dismiss')}
+      </Button>
+      <Button
+        size="sm"
+        intent="primary"
+        onclick={() => tableContext.applyAllUpdates()}
+        data-testid="live-update-apply"
+      >
+        {tt('liveUpdates.apply')}
+      </Button>
+    </div>
+  </div>
+{/if}

package/dist/features/LiveUpdateBanner.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    class?: string;
+};
+declare const LiveUpdateBanner: import("svelte").Component<$$ComponentProps, {}, "">;
+type LiveUpdateBanner = ReturnType<typeof LiveUpdateBanner>;
+export default LiveUpdateBanner;

package/dist/features/SearchHighlight.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { splitSearchSegments } from '../utils';
+
+  let {
+    text = '',
+    searchTerm = '',
+    highlightClass = 'table-search-highlight'
+  }: {
+    text: string;
+    searchTerm?: string;
+    highlightClass?: string;
+  } = $props();
+
+  let segments = $derived(splitSearchSegments(text, searchTerm));
+</script>
+
+<span class="inline"
+  >{#each segments as segment, i (i)}{#if segment.highlighted}<mark class={highlightClass}
+        >{segment.text}</mark
+      >{:else}{segment.text}{/if}{/each}</span
+>

package/dist/features/SearchHighlight.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    text: string;
+    searchTerm?: string;
+    highlightClass?: string;
+};
+declare const SearchHighlight: import("svelte").Component<$$ComponentProps, {}, "">;
+type SearchHighlight = ReturnType<typeof SearchHighlight>;
+export default SearchHighlight;

package/dist/features/SmartFilterBar/ChipsField.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+  import { getTableContext, type TableAction, useTableI18n } from '../..';
+  import type { SummaryConfig } from '../../stores/TableStore.svelte';
+  import { findColumnById, resolveColumnLabel } from '../../utils';
+  import { Badge } from '@urbicon-ui/blocks';
+
+  const tt = useTableI18n();
+
+  interface ChipItem {
+    type: TableAction;
+    id: string;
+    content: string;
+    onRemove: () => void;
+  }
+
+  let { class: className = '' } = $props();
+
+  const tableContext = getTableContext();
+  const { state: tableState, removeFilter, setGroupByKey, removeSummaryConfig } = tableContext;
+
+  function getColumnTitle(id: string): string {
+    // Raw-id fallback for persisted state that references a removed column.
+    const column = findColumnById(tableState.columns, id);
+    return column ? resolveColumnLabel(column) : id;
+  }
+
+  // Aggregation codes (avg/min/max) differ from their translation keys
+  // (average/minimum/maximum). Map explicitly — interpolating the raw code into
+  // `summary.types.${type}` produced missing keys ("summary.types.avg") for
+  // avg/min/max. The map is type-checked against the translation keys and the
+  // SummaryConfig union, so a drift on either side is now a compile error.
+  const SUMMARY_TYPE_KEY = {
+    sum: 'summary.types.sum',
+    avg: 'summary.types.average',
+    count: 'summary.types.count',
+    min: 'summary.types.minimum',
+    max: 'summary.types.maximum'
+  } as const satisfies Record<SummaryConfig['type'], string>;
+
+  function getSummaryLabel(config: SummaryConfig): string {
+    const columnTitle = getColumnTitle(config.column);
+    const typeLabel = tt(SUMMARY_TYPE_KEY[config.type]);
+    return `${typeLabel}: ${columnTitle}`;
+  }
+
+  const allChips = $derived.by((): ChipItem[] => {
+    const chips: ChipItem[] = [];
+
+    // Filter Chips
+    tableState.activeFilters.forEach((filter, index) => {
+      chips.push({
+        type: 'filter',
+        id: `filter-${index}`,
+        content: `${getColumnTitle(filter.column)}: ${filter.value}`,
+        onRemove: () => removeFilter(index)
+      });
+    });
+
+    if (tableState.groupByKey) {
+      chips.push({
+        type: 'group',
+        id: 'group',
+        content: getColumnTitle(tableState.groupByKey),
+        onRemove: () => setGroupByKey(null)
+      });
+    }
+
+    tableState.summaryConfigs.forEach((config, index) => {
+      chips.push({
+        type: 'summary',
+        id: `summary-${index}`,
+        content: getSummaryLabel(config),
+        onRemove: () => removeSummaryConfig(config.column)
+      });
+    });
+
+    return chips;
+  });
+
+  const hasChips = $derived(allChips.length > 0);
+
+  const CHIP_COLORS: Record<string, string> = {
+    filter: 'bg-filter-subtle text-filter border-filter/30',
+    group: 'bg-group-subtle text-group border-group/30',
+    summary: 'bg-summary-subtle text-summary border-summary/30'
+  };
+</script>
+
+{#if hasChips}
+  <div class="flex flex-wrap gap-1.5 {className}">
+    {#each allChips as chip (chip.id)}
+      <Badge
+        removable={true}
+        onRemove={chip.onRemove}
+        variant="outlined"
+        size="sm"
+        class={CHIP_COLORS[chip.type] ?? ''}
+        aria-label={tt('aria.removeItem', { content: chip.content })}
+      >
+        {chip.content}
+      </Badge>
+    {/each}
+  </div>
+{/if}

package/dist/features/SmartFilterBar/ChipsField.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const ChipsField: import("svelte").Component<{
+    class?: string;
+}, {}, "">;
+type ChipsField = ReturnType<typeof ChipsField>;
+export default ChipsField;

package/dist/features/SmartFilterBar/ColumnVisibilityMenu.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+  import { getTableContext, useTableI18n } from '../..';
+  import { resolveColumnId, resolveColumnLabel } from '../../utils';
+  import {
+    Badge,
+    Button,
+    Select,
+    Tooltip,
+    resolveIcon,
+    EyeIcon as EyeIconDefault
+  } from '@urbicon-ui/blocks';
+
+  const tt = useTableI18n();
+
+  const EyeIcon = resolveIcon('eye', EyeIconDefault);
+
+  const tableContext = getTableContext();
+  const { toggleColumnVisibility } = tableContext;
+
+  let menuOpen = $state(false);
+
+  const hiddenCount = $derived(tableContext.hiddenColumnKeys.size);
+
+  const columnItems = $derived.by(() =>
+    tableContext.allColumns.map((col) => ({
+      label: resolveColumnLabel(col),
+      value: resolveColumnId(col)
+    }))
+  );
+
+  const visibleValues = $derived.by(() =>
+    tableContext.allColumns
+      .filter((col) => !tableContext.hiddenColumnKeys.has(resolveColumnId(col)))
+      .map((col) => resolveColumnId(col))
+  );
+
+  function handleValueChange(values: string | string[] | null) {
+    if (!Array.isArray(values)) return;
+    const newVisible = new Set(values);
+    for (const col of tableContext.allColumns) {
+      const id = resolveColumnId(col);
+      const isCurrentlyHidden = tableContext.hiddenColumnKeys.has(id);
+      const shouldBeVisible = newVisible.has(id);
+      if (isCurrentlyHidden && shouldBeVisible) {
+        toggleColumnVisibility(id);
+      } else if (!isCurrentlyHidden && !shouldBeVisible) {
+        toggleColumnVisibility(id);
+      }
+    }
+  }
+</script>
+
+{#snippet customTrigger(_selected: unknown[], _open: boolean, _clear: () => void)}
+  <Tooltip label={tt('columns.visibility')}>
+    <Button
+      variant="ghost"
+      intent="neutral"
+      size="sm"
+      active={hiddenCount > 0}
+      aria-expanded={menuOpen}
+      aria-haspopup="listbox"
+      onclick={() => (menuOpen = !menuOpen)}
+    >
+      <EyeIcon class="h-4 w-4" />
+      {#if hiddenCount > 0}
+        <Badge variant="filled" intent="primary" size="xs" counter class="ml-1">
+          {hiddenCount}
+        </Badge>
+      {/if}
+    </Button>
+  </Tooltip>
+{/snippet}
+
+<Select
+  options={columnItems}
+  multiple
+  value={visibleValues}
+  bind:open={menuOpen}
+  onValueChange={handleValueChange}
+  size="sm"
+  syncWidth={false}
+  selectionIndicator="checkmark"
+  {customTrigger}
+/>

package/dist/features/SmartFilterBar/ColumnVisibilityMenu.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const ColumnVisibilityMenu: import("svelte").Component<Record<string, never>, {}, "">;
+type ColumnVisibilityMenu = ReturnType<typeof ColumnVisibilityMenu>;
+export default ColumnVisibilityMenu;