@r2digisolutions/components 0.3.4 → 0.3.6

package/dist/components/molecules/BulkActionBar/BulkActionBar.svelte

@@ -180,13 +180,11 @@
 
 	/** Dock sticks to the viewport bottom; portal avoids parent transform/overflow traps. */
 	function portalDock(node: HTMLElement) {
-		if (!(placement === 'dock' && sticky)) return {};
-		document.body.appendChild(node);
-		return {
-			destroy() {
-				node.remove();
-			}
-		};
+		$effect(() => {
+			if (!(placement === 'dock' && sticky)) return;
+			document.body.appendChild(node);
+			return () => node.remove();
+		});
 	}
 
 	const dockFixed = $derived(placement === 'dock' && sticky);
@@ -196,7 +194,7 @@
 
 {#if count > 0}
 	<div
-		use:portalDock
+		{@attach portalDock}
 		class={[
 			placement === 'dock' && 'pointer-events-none z-30 flex justify-center',
 			dockFixed && 'fixed inset-x-0 bottom-3 z-50 px-3',

package/dist/components/organisms/DataGrid/DataGrid.svelte

@@ -102,21 +102,24 @@
 	import { MARK_COLORS, markTint, markSwatch } from './marks.js';
 	import { isColumnVisibleAtWidth } from './breakpoints.js';
 	import { filterRows, cellText, uniqueColumnValues } from './filterRows.js';
+	import { resolveAccessor, accessorPatchKey, resolveRowKey } from '../../../utils/columnAccessor.js';
+	import type { RowKey } from '../../../utils/columnAccessor.js';
 
+	/**
+	 * Portal via attachment + $effect so the node moves after mount/hydration
+	 * (same pattern as Checkbox `{@attach setIndeterminate}`).
+	 */
 	function portalToBody(node: HTMLElement) {
-		if (typeof document === 'undefined') return {};
-		document.body.appendChild(node);
-		return {
-			destroy() {
-				node.remove();
-			}
-		};
+		$effect(() => {
+			document.body.appendChild(node);
+			return () => node.remove();
+		});
 	}
 
 	interface DataGridProps {
 		columns?: DataGridColumn<T>[];
 		rows?: T[];
-		rowKey?: keyof T | ((row: T, index: number) => string);
+		rowKey?: RowKey<T>;
 		selection?: GridSelection;
 		notes?: CellNote[];
 		marks?: GridMark[];
@@ -257,14 +260,19 @@
 	let contextTarget = $state<CellRef | null>(null);
 	let contextOpen = $state(false);
 	let contextAnchor = $state<ContextMenuAnchor | null>(null);
-	/** Same on SSR + first client paint to avoid hydration mismatch; real width set in $effect. */
-	let viewportWidth = $state(1280);
+	/**
+	 * SSR + first client paint: do not apply `hideBelow` yet (show full table).
+	 * After mount, measure window and refine columns — no hydration mismatch.
+	 */
+	let viewportMeasured = $state(false);
+	let viewportWidth = $state(Number.POSITIVE_INFINITY);
 	let filterColumnDraft = $state('');
 	let filterValueDraft = $state('');
 
 	$effect(() => {
 		const onResize = () => {
 			viewportWidth = window.innerWidth;
+			viewportMeasured = true;
 		};
 		window.addEventListener('resize', onResize);
 		onResize();
@@ -272,12 +280,14 @@
 	});
 
 	const autoHiddenColumns = $derived(
-		columns.filter(
-			(c) =>
-				!c.hidden &&
-				c.hideBelow &&
-				!isColumnVisibleAtWidth(c.hideBelow, viewportWidth)
-		)
+		viewportMeasured
+			? columns.filter(
+					(c) =>
+						!c.hidden &&
+						c.hideBelow &&
+						!isColumnVisibleAtWidth(c.hideBelow, viewportWidth)
+				)
+			: []
 	);
 
 	/** Expand controls only when there is content to reveal. */
@@ -294,7 +304,13 @@
 	const visibleColumns = $derived(
 		columns.filter((c) => {
 			if (c.hidden) return false;
-			if (c.hideBelow && !isColumnVisibleAtWidth(c.hideBelow, viewportWidth)) return false;
+			if (
+				viewportMeasured &&
+				c.hideBelow &&
+				!isColumnVisibleAtWidth(c.hideBelow, viewportWidth)
+			) {
+				return false;
+			}
 			return true;
 		})
 	);
@@ -389,20 +405,20 @@
 	);
 
 	function getKey(row: T, index: number): string {
-		if (typeof rowKey === 'function') return rowKey(row, index);
-		if (rowKey && row[rowKey] != null) return String(row[rowKey]);
-		if ('id' in row && row.id != null) return String(row.id);
-		return String(index);
+		try {
+			return resolveRowKey(row, rowKey, index);
+		} catch {
+			// Bad accessor/rowKey must not take down SSR (e.g. null profile).
+			return String(index);
+		}
 	}
 
 	function getValue(row: T, column: DataGridColumn<T>): unknown {
-		const key = (column.accessor ?? column.id) as string;
-		return key.split('.').reduce<unknown>((acc, part) => {
-			if (acc && typeof acc === 'object' && part in (acc as object)) {
-				return (acc as Record<string, unknown>)[part];
-			}
+		try {
+			return resolveAccessor(row, column.accessor, column.id);
+		} catch {
 			return undefined;
-		}, row);
+		}
 	}
 
 	function formatCell(value: unknown): string {
@@ -749,7 +765,7 @@
 		if (!editing || !activeEditor) return;
 		const { rowId, columnId } = editing;
 		const col = columns.find((c) => c.id === columnId);
-		const accessor = (col?.accessor ?? columnId) as string;
+		const accessor = accessorPatchKey(col?.accessor, columnId);
 		const draft = activeEditor.type === 'boolean' ? editBool : editValue;
 		const nextValue = coerceEditValue(activeEditor, draft);
 		editing = null;
@@ -2081,7 +2097,7 @@
 		{#if noteTargets || markPickerOpen || (showDock && dockCount > 0)}
 			<!-- Fixed to the viewport (portaled) so parent relative/overflow don't shift the dock. -->
 			<div
-				use:portalToBody
+				{@attach portalToBody}
 				class="pointer-events-none fixed inset-x-0 bottom-3 z-[60] flex justify-center px-3"
 			>
 				<div class="relative w-full max-w-2xl">
@@ -2218,7 +2234,7 @@
 		{@const ay = contextAnchor.y}
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div
-			use:portalToBody
+			{@attach portalToBody}
 			role="menu"
 			tabindex={-1}
 			aria-label="Context menu"

package/dist/components/organisms/DataGrid/DataGrid.svelte.d.ts

@@ -8,11 +8,12 @@ export { filterRows, cellText, uniqueColumnValues } from './filterRows.js';
 import type { Snippet } from 'svelte';
 import type { BulkAction } from '../../molecules/BulkActionBar/BulkActionBar.svelte';
 import { type DataGridColumn, type DataGridViewMode, type DataGridFilter, type GridSelection, type CellNote, type GridMark, type ConditionalFormatRule, type SortDir } from './types.js';
+import type { RowKey } from '../../../utils/columnAccessor.js';
 declare function $$render<T extends Record<string, unknown> = Record<string, unknown>>(): {
     props: {
         columns?: DataGridColumn<T>[];
         rows?: T[];
-        rowKey?: keyof T | ((row: T, index: number) => string);
+        rowKey?: RowKey<T>;
         selection?: GridSelection;
         notes?: CellNote[];
         marks?: GridMark[];

package/dist/components/organisms/DataGrid/filterRows.js

@@ -1,19 +1,16 @@
-function getByPath(row, path) {
-    return path.split('.').reduce((acc, part) => {
-        if (acc && typeof acc === 'object' && part in acc) {
-            return acc[part];
-        }
-        return undefined;
-    }, row);
-}
+import { resolveAccessor } from '../../../utils/columnAccessor.js';
 export function cellText(row, column) {
-    const key = String(column.accessor ?? column.id);
-    const value = getByPath(row, key);
-    if (value == null)
+    try {
+        const value = resolveAccessor(row, column.accessor, column.id);
+        if (value == null)
+            return '';
+        if (typeof value === 'boolean')
+            return value ? 'Yes' : 'No';
+        return String(value);
+    }
+    catch {
         return '';
-    if (typeof value === 'boolean')
-        return value ? 'Yes' : 'No';
-    return String(value);
+    }
 }
 /** Client-side search + equality/contains filters. */
 export function filterRows(rows, columns, query, filters) {

package/dist/components/organisms/DataGrid/types.d.ts

@@ -1,8 +1,12 @@
 export interface DataGridColumn<Row = Record<string, unknown>> {
     id: string;
     header: string;
-    /** Dot-path key on the row, or custom render via `cell` snippet. */
-    accessor?: keyof Row | string;
+    /**
+     * How to read the cell value:
+     * - `keyof Row` / string (supports dot-path: `'profile.displayName'`)
+     * - function: `(row) => row.profile.displayName` (preferred for nested/typed access)
+     */
+    accessor?: keyof Row | string | ((row: Row) => unknown);
     align?: 'left' | 'center' | 'right';
     sortable?: boolean;
     width?: string;

package/dist/components/organisms/DataTable/DataTable.svelte

@@ -2,8 +2,13 @@
 	export interface DataTableColumn<Row = Record<string, unknown>> {
 		id: string;
 		header: string;
-		/** Dot-path key on the row, or custom render via `cell` snippet map in parent. */
-		accessor?: keyof Row | string;
+		/**
+		 * How to read the cell value:
+		 * - `keyof Row` / string (supports dot-path: `'profile.displayName'`)
+		 * - function: `(row) => row.profile.displayName` (preferred for nested/typed access)
+		 * Custom render via `cell` snippet still overrides display.
+		 */
+		accessor?: keyof Row | string | ((row: Row) => unknown);
 		align?: 'left' | 'center' | 'right';
 		sortable?: boolean;
 		width?: string;
@@ -13,13 +18,15 @@
 
 <script lang="ts" generics="T extends Record<string, unknown> = Record<string, unknown>">
 	import type { Snippet } from 'svelte';
+	import { resolveAccessor, resolveRowKey } from '../../../utils/columnAccessor.js';
+	import type { RowKey } from '../../../utils/columnAccessor.js';
 
 	type SortDir = 'asc' | 'desc' | null;
 
 	interface DataTableProps {
 		columns?: DataTableColumn<T>[];
 		rows?: T[];
-		rowKey?: keyof T | ((row: T, index: number) => string);
+		rowKey?: RowKey<T>;
 		sortable?: boolean;
 		striped?: boolean;
 		hoverable?: boolean;
@@ -53,20 +60,19 @@
 	let sortDir = $state<SortDir>(null);
 
 	function getKey(row: T, index: number): string {
-		if (typeof rowKey === 'function') return rowKey(row, index);
-		if (rowKey && row[rowKey] != null) return String(row[rowKey]);
-		if ('id' in row && row.id != null) return String(row.id);
-		return String(index);
+		try {
+			return resolveRowKey(row, rowKey, index);
+		} catch {
+			return String(index);
+		}
 	}
 
 	function getValue(row: T, column: DataTableColumn<T>): unknown {
-		const key = (column.accessor ?? column.id) as string;
-		return key.split('.').reduce<unknown>((acc, part) => {
-			if (acc && typeof acc === 'object' && part in (acc as object)) {
-				return (acc as Record<string, unknown>)[part];
-			}
+		try {
+			return resolveAccessor(row, column.accessor, column.id);
+		} catch {
 			return undefined;
-		}, row);
+		}
 	}
 
 	function formatCell(value: unknown): string {

package/dist/components/organisms/DataTable/DataTable.svelte.d.ts

@@ -1,19 +1,25 @@
 export interface DataTableColumn<Row = Record<string, unknown>> {
     id: string;
     header: string;
-    /** Dot-path key on the row, or custom render via `cell` snippet map in parent. */
-    accessor?: keyof Row | string;
+    /**
+     * How to read the cell value:
+     * - `keyof Row` / string (supports dot-path: `'profile.displayName'`)
+     * - function: `(row) => row.profile.displayName` (preferred for nested/typed access)
+     * Custom render via `cell` snippet still overrides display.
+     */
+    accessor?: keyof Row | string | ((row: Row) => unknown);
     align?: 'left' | 'center' | 'right';
     sortable?: boolean;
     width?: string;
     class?: string;
 }
 import type { Snippet } from 'svelte';
+import type { RowKey } from '../../../utils/columnAccessor.js';
 declare function $$render<T extends Record<string, unknown> = Record<string, unknown>>(): {
     props: {
         columns?: DataTableColumn<T>[];
         rows?: T[];
-        rowKey?: keyof T | ((row: T, index: number) => string);
+        rowKey?: RowKey<T>;
         sortable?: boolean;
         striped?: boolean;
         hoverable?: boolean;

package/dist/index.d.ts

@@ -813,6 +813,8 @@ export { default as AudioEditorTemplate } from './components/templates/AudioEdit
 export { themeStore } from './utils/theme.svelte.js';
 export type { Theme } from './utils/theme.svelte.js';
 export { createId } from './utils/id.js';
+export { resolveAccessor, accessorPatchKey, resolveRowKey } from './utils/columnAccessor.js';
+export type { ColumnAccessor, RowKey } from './utils/columnAccessor.js';
 export { pageVisibility } from './utils/pageVisibility.svelte.js';
 export type { VisibilityState } from './utils/pageVisibility.svelte.js';
 export { network } from './utils/network.svelte.js';

package/dist/index.js

@@ -554,6 +554,7 @@ export { default as AudioEditorTemplate } from './components/templates/AudioEdit
 // ── Utils ────────────────────────────────────────────────────────────────────
 export { themeStore } from './utils/theme.svelte.js';
 export { createId } from './utils/id.js';
+export { resolveAccessor, accessorPatchKey, resolveRowKey } from './utils/columnAccessor.js';
 export { pageVisibility } from './utils/pageVisibility.svelte.js';
 export { network } from './utils/network.svelte.js';
 export { DEFAULT_COLS, DEFAULT_ROW_HEIGHT, DEFAULT_GAP, GRID_DENSITY, clampItem, rectsOverlap, findCollisions, resolveCollisions, compactLayout, updateItem, addItem, removeItem, serializeLayout, parseLayout, layoutBounds, rescaleLayout, resizeItemByEdge } from './utils/layoutGrid.js';

package/dist/utils/columnAccessor.d.ts

@@ -0,0 +1,8 @@
+export type ColumnAccessor<Row> = keyof Row | string | ((row: Row) => unknown);
+export type RowKey<Row> = keyof Row | string | ((row: Row, index: number) => string);
+/** Resolve a column value from a function, keyof, or dot-path accessor. */
+export declare function resolveAccessor<Row>(row: Row, accessor: ColumnAccessor<Row> | undefined, fallbackId: string): unknown;
+/** Resolve a stable row id (supports function, keyof, and dotted paths like `profile.id`). */
+export declare function resolveRowKey<Row>(row: Row, rowKey: RowKey<Row> | undefined, index: number): string;
+/** Field key for patches — functions can't be keys, so fall back to column id. */
+export declare function accessorPatchKey(accessor: unknown, fallbackId: string): string;

package/dist/utils/columnAccessor.js

@@ -0,0 +1,35 @@
+function getByPath(row, path) {
+    return path.split('.').reduce((acc, part) => {
+        if (acc && typeof acc === 'object' && part in acc) {
+            return acc[part];
+        }
+        return undefined;
+    }, row);
+}
+/** Resolve a column value from a function, keyof, or dot-path accessor. */
+export function resolveAccessor(row, accessor, fallbackId) {
+    if (typeof accessor === 'function')
+        return accessor(row);
+    const key = String(accessor ?? fallbackId);
+    return getByPath(row, key);
+}
+/** Resolve a stable row id (supports function, keyof, and dotted paths like `profile.id`). */
+export function resolveRowKey(row, rowKey, index) {
+    if (typeof rowKey === 'function')
+        return rowKey(row, index);
+    if (rowKey != null && rowKey !== '') {
+        const val = getByPath(row, String(rowKey));
+        if (val != null)
+            return String(val);
+    }
+    if (row && typeof row === 'object' && 'id' in row && row.id != null) {
+        return String(row.id);
+    }
+    return String(index);
+}
+/** Field key for patches — functions can't be keys, so fall back to column id. */
+export function accessorPatchKey(accessor, fallbackId) {
+    if (typeof accessor === 'function' || accessor == null)
+        return fallbackId;
+    return String(accessor);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@r2digisolutions/components",
-	"version": "0.3.4",
+	"version": "0.3.6",
 	"private": false,
 	"description": "R2DigiSolutions Svelte 5 component library — Atomic Design, Tailwind 4, Light/Dark mode",
 	"license": "MIT",