@urbicon-ui/table 6.1.4

package/dist/stores/concerns/useSelection.svelte.js

@@ -0,0 +1,110 @@
+function resolveRowId(item) {
+    const id = item.id ?? item.__index;
+    return typeof id === 'string' || typeof id === 'number' ? id : undefined;
+}
+/**
+ * Selection concern: manages row selection state.
+ * Supports single-select and multi-select modes.
+ * @param state - Shared table state.
+ * @param getFilteredItems - Getter for filtered items (used for selectAll scope).
+ */
+export function useSelection(state, getFilteredItems) {
+    /** Derived list of currently selected items (resolved from selectedIds). */
+    const selectedItems = $derived.by(() => {
+        if (state.selectionMode === 'none' || state.selectedIds.size === 0)
+            return [];
+        return state.items.filter((item) => {
+            const id = resolveRowId(item);
+            return id !== undefined && state.selectedIds.has(id);
+        });
+    });
+    /** Whether all visible (filtered) items are selected. */
+    const allSelected = $derived.by(() => {
+        const items = getFilteredItems();
+        if (items.length === 0 || state.selectedIds.size === 0)
+            return false;
+        return items.every((item) => {
+            const id = resolveRowId(item);
+            return id !== undefined && state.selectedIds.has(id);
+        });
+    });
+    /** Whether some but not all visible items are selected (indeterminate state). */
+    const someSelected = $derived.by(() => {
+        if (allSelected)
+            return false;
+        const items = getFilteredItems();
+        return items.some((item) => {
+            const id = resolveRowId(item);
+            return id !== undefined && state.selectedIds.has(id);
+        });
+    });
+    function selectItem(id) {
+        if (state.selectionMode === 'none')
+            return;
+        if (state.selectionMode === 'single') {
+            state.selectedIds.clear();
+            state.selectedIds.add(id);
+        }
+        else {
+            state.selectedIds.add(id);
+        }
+    }
+    function deselectItem(id) {
+        state.selectedIds.delete(id);
+    }
+    function toggleItem(id) {
+        if (state.selectedIds.has(id)) {
+            deselectItem(id);
+        }
+        else {
+            selectItem(id);
+        }
+    }
+    function selectAll() {
+        if (state.selectionMode !== 'multi')
+            return;
+        for (const item of getFilteredItems()) {
+            const id = resolveRowId(item);
+            if (id !== undefined)
+                state.selectedIds.add(id);
+        }
+    }
+    function deselectAll() {
+        state.selectedIds.clear();
+    }
+    function toggleAll() {
+        if (allSelected) {
+            deselectAll();
+        }
+        else {
+            selectAll();
+        }
+    }
+    function isSelected(id) {
+        return state.selectedIds.has(id);
+    }
+    function setSelectedIds(ids) {
+        state.selectedIds.clear();
+        for (const id of ids)
+            state.selectedIds.add(id);
+    }
+    return {
+        get selectedItems() {
+            return selectedItems;
+        },
+        get allSelected() {
+            return allSelected;
+        },
+        get someSelected() {
+            return someSelected;
+        },
+        selectItem,
+        deselectItem,
+        toggleItem,
+        selectAll,
+        deselectAll,
+        toggleAll,
+        isSelected,
+        setSelectedIds
+    };
+}

package/dist/stores/concerns/useSorting.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { TableItem } from '../../types/tableTypes';
+import type { TableState } from './types';
+/**
+ * Sorting concern: manages sort column/direction and computes sorted items.
+ * @param state - Shared table state.
+ * @param getFilteredItems - Getter for upstream filtered items.
+ */
+export declare function useSorting(state: TableState, getFilteredItems: () => TableItem[]): {
+    readonly sortedItems: TableItem[];
+    handleSort: (column: string) => void;
+};

package/dist/stores/concerns/useSorting.svelte.js

@@ -0,0 +1,70 @@
+import { findColumnById, resolveValueById } from '../../utils';
+function compareSortable(a, b) {
+    if (typeof a === 'number' && typeof b === 'number') {
+        return a - b;
+    }
+    if (a instanceof Date && b instanceof Date) {
+        return a.getTime() - b.getTime();
+    }
+    const aStr = String(a);
+    const bStr = String(b);
+    if (aStr < bStr)
+        return -1;
+    if (aStr > bStr)
+        return 1;
+    return 0;
+}
+/**
+ * Sorting concern: manages sort column/direction and computes sorted items.
+ * @param state - Shared table state.
+ * @param getFilteredItems - Getter for upstream filtered items.
+ */
+export function useSorting(state, getFilteredItems) {
+    const sortedItems = $derived.by(() => {
+        const items = getFilteredItems();
+        // In server mode, items are already sorted by the server
+        if (state.mode === 'server')
+            return items;
+        if (!items.length || !state.sortColumn)
+            return [...items];
+        // Synthetic columns have no accessor — sorting by them is structurally
+        // undefined and the resolver would return undefined for every row. Skip
+        // the sort entirely in that case rather than scramble row order.
+        const sortColumn = findColumnById(state.columns, state.sortColumn);
+        if (sortColumn && sortColumn.accessor === undefined)
+            return [...items];
+        return [...items].sort((a, b) => {
+            const aValue = resolveValueById(state.columns, a, state.sortColumn);
+            const bValue = resolveValueById(state.columns, b, state.sortColumn);
+            if (aValue === undefined && bValue === undefined)
+                return 0;
+            if (aValue === undefined)
+                return 1;
+            if (bValue === undefined)
+                return -1;
+            const cmp = compareSortable(aValue, bValue);
+            return state.sortDirection === 'asc' ? cmp : -cmp;
+        });
+    });
+    function handleSort(column) {
+        if (state.sortColumn === column) {
+            if (state.sortDirection === 'asc') {
+                state.sortDirection = 'desc';
+            }
+            else {
+                state.sortColumn = '';
+                state.sortDirection = 'asc';
+            }
+        }
+        else {
+            state.sortColumn = column;
+            state.sortDirection = 'asc';
+        }
+    }
+    return {
+        get sortedItems() {
+            return sortedItems;
+        },
+        handleSort
+    };
+}

package/dist/stores/concerns/useSummary.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { TableItem } from '../../types/tableTypes';
+import type { SummaryConfig } from '../TableStore.svelte';
+import type { TableState } from './types';
+/**
+ * Summary concern: manages summary configurations and computes aggregate values.
+ * @param state - Shared table state.
+ * @param getSortedItems - Getter for sorted items (used for global summary).
+ * @param getGrouped - Getter for grouped items (used for per-group summary).
+ */
+export declare function useSummary(state: TableState, getSortedItems: () => TableItem[], getGrouped: () => Record<string, TableItem[]>): {
+    readonly summaryData: Record<string, number>;
+    readonly groupedSummaryData: Record<string, Record<string, number>>;
+    addSummaryConfig: (config: SummaryConfig) => void;
+    removeSummaryConfig: (column: string) => void;
+    toggleSummary: () => void;
+    setSummaryConfigs: (configs: SummaryConfig[]) => void;
+    getFormattedSummaryValue: (column: string, value: number) => string;
+};

package/dist/stores/concerns/useSummary.svelte.js

@@ -0,0 +1,96 @@
+import { calculateSummary, findColumnById, resolveValueById } from '../../utils';
+/**
+ * Summary concern: manages summary configurations and computes aggregate values.
+ * @param state - Shared table state.
+ * @param getSortedItems - Getter for sorted items (used for global summary).
+ * @param getGrouped - Getter for grouped items (used for per-group summary).
+ */
+export function useSummary(state, getSortedItems, getGrouped) {
+    // Column-aware value resolver: looks up the accessor by column id so that
+    // summaries on function-accessor columns aggregate the computed value
+    // rather than the raw property name (which usually does not exist on the row).
+    const getValue = (item, columnId) => resolveValueById(state.columns, item, columnId);
+    const summaryData = $derived.by(() => {
+        if (!state.showSummary || state.summaryConfigs.length === 0)
+            return {};
+        return calculateSummary(getSortedItems(), state.summaryConfigs, getValue);
+    });
+    const groupedSummaryData = $derived.by(() => {
+        if (!state.showSummary || state.summaryConfigs.length === 0 || !state.groupByKey)
+            return {};
+        const result = {};
+        Object.entries(getGrouped()).forEach(([groupKey, groupItems]) => {
+            result[groupKey] = calculateSummary(groupItems, state.summaryConfigs, getValue);
+        });
+        return result;
+    });
+    function addSummaryConfig(config) {
+        const existing = state.summaryConfigs.findIndex((c) => c.column === config.column);
+        if (existing >= 0) {
+            state.summaryConfigs[existing] = config;
+        }
+        else {
+            state.summaryConfigs = [...state.summaryConfigs, config];
+        }
+        if (state.summaryConfigs.length > 0) {
+            state.showSummary = true;
+        }
+    }
+    function removeSummaryConfig(column) {
+        state.summaryConfigs = state.summaryConfigs.filter((c) => c.column !== column);
+        if (state.summaryConfigs.length === 0) {
+            state.showSummary = false;
+        }
+    }
+    function toggleSummary() {
+        state.showSummary = !state.showSummary;
+    }
+    function setSummaryConfigs(configs) {
+        state.summaryConfigs = configs;
+        state.showSummary = configs.length > 0;
+    }
+    function getFormattedSummaryValue(column, value) {
+        if (Number.isNaN(value))
+            return '–';
+        const config = state.summaryConfigs.find((c) => c.column === column);
+        if (config?.formatter) {
+            return config.formatter(value);
+        }
+        const col = findColumnById(state.columns, column);
+        if (col?.formatter) {
+            try {
+                const formatted = col.formatter(value, {});
+                if (formatted !== null)
+                    return formatted;
+            }
+            catch (err) {
+                if (import.meta.env?.DEV)
+                    console.warn(`[Table] Column "${column}" formatter threw on summary value:`, err);
+            }
+        }
+        switch (config?.type) {
+            case 'avg':
+                return Number(value).toFixed(2);
+            case 'sum':
+            case 'count':
+            case 'min':
+            case 'max':
+                return String(Math.round(Number(value)));
+            default:
+                return String(value);
+        }
+    }
+    return {
+        get summaryData() {
+            return summaryData;
+        },
+        get groupedSummaryData() {
+            return groupedSummaryData;
+        },
+        addSummaryConfig,
+        removeSummaryConfig,
+        toggleSummary,
+        setSummaryConfigs,
+        getFormattedSummaryValue
+    };
+}

package/dist/stores/index.d.ts

@@ -0,0 +1 @@
+export * from './TableStore.svelte.js';

package/dist/stores/index.js

@@ -0,0 +1 @@
+export * from './TableStore.svelte.js';

package/dist/style/index.css

@@ -0,0 +1,137 @@
+/* === FLOWTABLE DESIGN SYSTEM === */
+/* Master CSS file that imports all design tokens */
+/*
+ * NOTE: this file does NOT `@import 'tailwindcss'` — that is the consumer
+ * app's responsibility. See `@urbicon-ui/blocks/src/lib/style/index.css`
+ * and `docs/TailwindCaveats.md` → "Library CSS must not import Tailwind"
+ * for the rationale. Re-importing Tailwind here previously caused every
+ * consumer that mounted a Table to silently lose its `@theme` overrides
+ * to the library defaults.
+ */
+
+/* Foundation Layer - Base design tokens */
+@import '@urbicon-ui/blocks/style/index.css';
+
+/* === TABLE PACKAGE DESIGN SYSTEM === */
+
+/* === TABLE-SPECIFIC THEME === */
+/* Import table-specific theme tokens */
+@import './table-theme.css';
+
+/* === COMPONENT VARIANTS === */
+/* Import tailwind-variants source files for JIT compilation */
+@source '../variants';
+
+/* === MINIMAL COMPONENT STYLES === */
+/* Only complex, non-utility styles that can't be expressed in Tailwind classes */
+
+/* Table Expand Button - Complex interactive component */
+.table-expand-button {
+  color: var(--color-text-secondary);
+  background: transparent;
+  border: none;
+  border-radius: var(--blocks-radius-base);
+  cursor: pointer;
+  transition: var(--blocks-transition-colors);
+  padding: var(--blocks-space-1);
+}
+
+.table-expand-button:hover {
+  color: var(--color-text-primary);
+  background-color: var(--color-surface-hover);
+}
+
+.table-expand-button:focus-visible {
+  outline: none;
+  box-shadow: var(--blocks-focus-ring);
+  outline-offset: var(--blocks-focus-ring-offset);
+}
+
+/* Table Container - Complex layout component */
+.table-container {
+  /* Use blocks foundation tokens */
+  font-family: var(--blocks-font-family);
+  font-size: var(--text-sm);
+  line-height: var(--blocks-leading-normal);
+  color: var(--color-text-primary);
+
+  /* Container styling */
+  background: var(--color-surface-base);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--blocks-radius-lg);
+  overflow: hidden;
+
+  /* Modern scrolling */
+  container-type: inline-size;
+}
+
+/* === SEARCH HIGHLIGHT === */
+/* Applied via @html injection — must be global */
+.table-search-highlight {
+  background-color: var(--color-warning-subtle, oklch(0.95 0.07 85));
+  color: var(--color-text-primary);
+  padding: 0.1em 0.2em;
+  border-radius: var(--radius-sm, 0.25rem);
+  font-weight: 500;
+}
+
+/* === ACCESSIBILITY HELPERS === */
+
+/* Focus management for interactive elements */
+.table-focusable:focus-visible {
+  outline: none;
+  box-shadow: var(--blocks-focus-ring);
+  outline-offset: var(--blocks-focus-ring-offset);
+  border-radius: var(--blocks-radius-md);
+}
+
+/* Skip to content link */
+.table-skip-link {
+  position: absolute;
+  top: -40px;
+  left: 6px;
+  background: var(--color-surface-elevated);
+  color: var(--color-text-primary);
+  padding: 8px;
+  text-decoration: none;
+  border-radius: var(--blocks-radius-md);
+  z-index: var(--z-modal);
+}
+
+.table-skip-link:focus {
+  top: 6px;
+}
+
+/* === RESPONSIVE HELPERS === */
+/* Complex responsive patterns */
+
+@container (max-width: 768px) {
+  .table-hide-mobile {
+    display: none;
+  }
+
+  .table-mobile-stack {
+    flex-direction: column;
+    gap: var(--spacing-2);
+  }
+}
+
+@container (min-width: 769px) {
+  .table-hide-desktop {
+    display: none;
+  }
+}
+
+/* === PRINT OPTIMIZATIONS === */
+@media print {
+  .table-container {
+    background: white !important;
+    border: 1px solid #000 !important;
+    box-shadow: none !important;
+  }
+
+  .table-expand-button,
+  .table-skip-link {
+    display: none !important;
+  }
+}

package/dist/style/index.d.ts

@@ -0,0 +1,2 @@
+import './index.css';
+import './table-theme.css';

package/dist/style/index.js

@@ -0,0 +1,2 @@
+import './index.css';
+import './table-theme.css';

package/dist/style/table-theme.css

@@ -0,0 +1,131 @@
+@theme {
+  /* === TABLE-SPECIFIC INTENTS === */
+  /* Extend the blocks foundation with table-specific colors */
+  /* Filter Intent (Cyan-based) */
+  --color-filter-50: var(--color-cyan-50);
+  --color-filter-100: var(--color-cyan-100);
+  --color-filter-200: var(--color-cyan-200);
+  --color-filter-300: var(--color-cyan-300);
+  --color-filter-400: var(--color-cyan-400);
+  --color-filter-500: var(--color-cyan-500);
+  --color-filter-600: var(--color-cyan-600);
+  --color-filter-700: var(--color-cyan-700);
+  --color-filter-800: var(--color-cyan-800);
+  --color-filter-900: var(--color-cyan-900);
+
+  --color-filter: var(--color-filter-600);
+  --color-filter-hover: var(--color-filter-700);
+  --color-filter-active: var(--color-filter-800);
+  --color-filter-subtle: var(--color-filter-50);
+  --color-filter-emphasis: var(--color-filter-900);
+
+  /* Group Intent (Teal-based) */
+  --color-group-50: var(--color-teal-50);
+  --color-group-100: var(--color-teal-100);
+  --color-group-200: var(--color-teal-200);
+  --color-group-300: var(--color-teal-300);
+  --color-group-400: var(--color-teal-400);
+  --color-group-500: var(--color-teal-500);
+  --color-group-600: var(--color-teal-600);
+  --color-group-700: var(--color-teal-700);
+  --color-group-800: var(--color-teal-800);
+  --color-group-900: var(--color-teal-900);
+
+  --color-group: var(--color-group-600);
+  --color-group-hover: var(--color-group-700);
+  --color-group-active: var(--color-group-800);
+  --color-group-subtle: var(--color-group-50);
+  --color-group-emphasis: var(--color-group-900);
+
+  /* Summary Intent (Emerald-based) */
+  --color-summary-50: var(--color-emerald-50);
+  --color-summary-100: var(--color-emerald-100);
+  --color-summary-200: var(--color-emerald-200);
+  --color-summary-300: var(--color-emerald-300);
+  --color-summary-400: var(--color-emerald-400);
+  --color-summary-500: var(--color-emerald-500);
+  --color-summary-600: var(--color-emerald-600);
+  --color-summary-700: var(--color-emerald-700);
+  --color-summary-800: var(--color-emerald-800);
+  --color-summary-900: var(--color-emerald-900);
+
+  --color-summary: var(--color-summary-600);
+  --color-summary-hover: var(--color-summary-700);
+  --color-summary-active: var(--color-summary-800);
+  --color-summary-subtle: var(--color-summary-50);
+  --color-summary-emphasis: var(--color-summary-900);
+
+  /* === TABLE-SPECIFIC DESIGN TOKENS === */
+  --table-header-height: 3rem;
+  --table-row-height: 3.5rem;
+  --table-cell-padding-x: 1rem;
+  --table-cell-padding-y: 0.75rem;
+
+  --filter-bar-height: 3.5rem;
+  --filter-bar-padding: 0.75rem;
+  --filter-bar-gap: 0.75rem;
+}
+
+:root {
+  @media (prefers-color-scheme: dark) {
+    --color-filter: var(--color-filter-400);
+    --color-filter-hover: var(--color-filter-300);
+    --color-filter-active: var(--color-filter-200);
+    --color-filter-subtle: var(--color-filter-900);
+    --color-filter-emphasis: var(--color-filter-100);
+
+    --color-group: var(--color-group-400);
+    --color-group-hover: var(--color-group-300);
+    --color-group-active: var(--color-group-200);
+    --color-group-subtle: var(--color-group-900);
+    --color-group-emphasis: var(--color-group-100);
+
+    --color-summary: var(--color-summary-400);
+    --color-summary-hover: var(--color-summary-300);
+    --color-summary-active: var(--color-summary-200);
+    --color-summary-subtle: var(--color-summary-900);
+    --color-summary-emphasis: var(--color-summary-100);
+  }
+}
+
+/* Class-based dark mode (for manual theme toggle via .dark on <html>) */
+:root.dark {
+  --color-filter: var(--color-filter-400);
+  --color-filter-hover: var(--color-filter-300);
+  --color-filter-active: var(--color-filter-200);
+  --color-filter-subtle: var(--color-filter-900);
+  --color-filter-emphasis: var(--color-filter-100);
+
+  --color-group: var(--color-group-400);
+  --color-group-hover: var(--color-group-300);
+  --color-group-active: var(--color-group-200);
+  --color-group-subtle: var(--color-group-900);
+  --color-group-emphasis: var(--color-group-100);
+
+  --color-summary: var(--color-summary-400);
+  --color-summary-hover: var(--color-summary-300);
+  --color-summary-active: var(--color-summary-200);
+  --color-summary-subtle: var(--color-summary-900);
+  --color-summary-emphasis: var(--color-summary-100);
+}
+
+/* Class-based light mode override (forces light tokens when OS prefers dark) */
+:root.light {
+  --color-filter: var(--color-filter-600);
+  --color-filter-hover: var(--color-filter-700);
+  --color-filter-active: var(--color-filter-800);
+  --color-filter-subtle: var(--color-filter-50);
+  --color-filter-emphasis: var(--color-filter-900);
+
+  --color-group: var(--color-group-600);
+  --color-group-hover: var(--color-group-700);
+  --color-group-active: var(--color-group-800);
+  --color-group-subtle: var(--color-group-50);
+  --color-group-emphasis: var(--color-group-900);
+
+  --color-summary: var(--color-summary-600);
+  --color-summary-hover: var(--color-summary-700);
+  --color-summary-active: var(--color-summary-800);
+  --color-summary-subtle: var(--color-summary-50);
+  --color-summary-emphasis: var(--color-summary-900);
+}

package/dist/style/themes/comfortable.css

@@ -0,0 +1,20 @@
+/*
+ * @urbicon-ui/table – Comfortable Theme
+ *
+ * Overrides the default table tokens for spacious layouts.
+ * Import AFTER the base table styles:
+ *
+ *   @import '@urbicon-ui/table/style/index.css';
+ *   @import '@urbicon-ui/table/style/themes/comfortable.css';
+ */
+
+@theme {
+  --table-header-height: 3.5rem;
+  --table-row-height: 4rem;
+  --table-cell-padding-x: 1.5rem;
+  --table-cell-padding-y: 1rem;
+
+  --filter-bar-height: 4rem;
+  --filter-bar-padding: 1rem;
+  --filter-bar-gap: 1rem;
+}

package/dist/style/themes/compact.css

@@ -0,0 +1,20 @@
+/*
+ * @urbicon-ui/table – Compact Theme
+ *
+ * Overrides the default table tokens for denser layouts.
+ * Import AFTER the base table styles:
+ *
+ *   @import '@urbicon-ui/table/style/index.css';
+ *   @import '@urbicon-ui/table/style/themes/compact.css';
+ */
+
+@theme {
+  --table-header-height: 2.25rem;
+  --table-row-height: 2.5rem;
+  --table-cell-padding-x: 0.5rem;
+  --table-cell-padding-y: 0.375rem;
+
+  --filter-bar-height: 2.5rem;
+  --filter-bar-padding: 0.5rem;
+  --filter-bar-gap: 0.5rem;
+}