@r2digisolutions/components 0.3.3 → 0.3.5

package/dist/components/atoms/Checkbox/Checkbox.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { createId } from '../../../utils/id.js';
+
 	interface CheckboxProps {
 		checked?: boolean;
 		indeterminate?: boolean;
@@ -32,7 +34,12 @@
 		onclick
 	}: CheckboxProps = $props();
 
-	const inputId = $derived(id ?? `checkbox-${Math.random().toString(36).slice(2, 9)}`);
+	/** Assigned after mount so SSR HTML matches the first client paint. */
+	let autoId = $state<string | undefined>(undefined);
+	$effect(() => {
+		if (id == null) autoId ??= createId('checkbox');
+	});
+	const inputId = $derived(id ?? autoId);
 
 	const sizeClasses = {
 		sm: 'h-3.5 w-3.5 rounded',

package/dist/components/atoms/Grid/Grid.stories.d.ts

@@ -2,13 +2,13 @@ import type { StoryObj } from '@storybook/svelte';
 declare const meta: {
     title: string;
     component: import("svelte").Component<{
-        cols?: (1 | 2 | 9 | 3 | 4 | 8 | 5 | 6 | 7 | 10 | 11 | 12) | {
-            base?: 1 | 2 | 9 | 3 | 4 | 8 | 5 | 6 | 7 | 10 | 11 | 12;
-            sm?: 1 | 2 | 9 | 3 | 4 | 8 | 5 | 6 | 7 | 10 | 11 | 12;
-            md?: 1 | 2 | 9 | 3 | 4 | 8 | 5 | 6 | 7 | 10 | 11 | 12;
-            lg?: 1 | 2 | 9 | 3 | 4 | 8 | 5 | 6 | 7 | 10 | 11 | 12;
-            xl?: 1 | 2 | 9 | 3 | 4 | 8 | 5 | 6 | 7 | 10 | 11 | 12;
-            '2xl'?: 1 | 2 | 9 | 3 | 4 | 8 | 5 | 6 | 7 | 10 | 11 | 12;
+        cols?: (1 | 2 | 3 | 9 | 4 | 8 | 5 | 6 | 7 | 10 | 11 | 12) | {
+            base?: 1 | 2 | 3 | 9 | 4 | 8 | 5 | 6 | 7 | 10 | 11 | 12;
+            sm?: 1 | 2 | 3 | 9 | 4 | 8 | 5 | 6 | 7 | 10 | 11 | 12;
+            md?: 1 | 2 | 3 | 9 | 4 | 8 | 5 | 6 | 7 | 10 | 11 | 12;
+            lg?: 1 | 2 | 3 | 9 | 4 | 8 | 5 | 6 | 7 | 10 | 11 | 12;
+            xl?: 1 | 2 | 3 | 9 | 4 | 8 | 5 | 6 | 7 | 10 | 11 | 12;
+            '2xl'?: 1 | 2 | 3 | 9 | 4 | 8 | 5 | 6 | 7 | 10 | 11 | 12;
         };
     }, {}, "">;
     tags: string[];

package/dist/components/atoms/Input/Input.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import { createId } from '../../../utils/id.js';
 
 	type InputStatus = 'default' | 'error' | 'success' | 'warning';
 	type InputSize = 'sm' | 'md' | 'lg';
@@ -60,8 +61,12 @@
 		onkeydown
 	}: InputProps = $props();
 
-	const inputId = $derived(id ?? `input-${Math.random().toString(36).slice(2, 9)}`);
-	const helperId = $derived(`${inputId}-helper`);
+	let autoId = $state<string | undefined>(undefined);
+	$effect(() => {
+		if (id == null) autoId ??= createId('input');
+	});
+	const inputId = $derived(id ?? autoId);
+	const helperId = $derived(inputId ? `${inputId}-helper` : undefined);
 	const hasClear = $derived(clearable && value.length > 0 && !disabled && !readonly);
 
 	const wrapperSizeClasses: Record<InputSize, string> = {

package/dist/components/atoms/Textarea/Textarea.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { createId } from '../../../utils/id.js';
+
 	interface TextareaProps {
 		id?: string;
 		name?: string;
@@ -45,8 +47,12 @@
 		onkeydown
 	}: TextareaProps = $props();
 
-	const textareaId = $derived(id ?? `textarea-${Math.random().toString(36).slice(2, 9)}`);
-	const helperId = $derived(`${textareaId}-helper`);
+	let autoId = $state<string | undefined>(undefined);
+	$effect(() => {
+		if (id == null) autoId ??= createId('textarea');
+	});
+	const textareaId = $derived(id ?? autoId);
+	const helperId = $derived(textareaId ? `${textareaId}-helper` : undefined);
 	const characterCount = $derived(value.length);
 
 	const statusRingClasses: Record<string, string> = {

package/dist/components/atoms/Toggle/Toggle.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { createId } from '../../../utils/id.js';
+
 	interface ToggleProps {
 		checked?: boolean;
 		disabled?: boolean;
@@ -21,7 +23,11 @@
 		onchange
 	}: ToggleProps = $props();
 
-	const inputId = $derived(id ?? `toggle-${Math.random().toString(36).slice(2, 9)}`);
+	let autoId = $state<string | undefined>(undefined);
+	$effect(() => {
+		if (id == null) autoId ??= createId('toggle');
+	});
+	const inputId = $derived(id ?? autoId);
 
 	const trackClasses = {
 		sm: 'h-4 w-7',

package/dist/components/atoms/Tooltip/Tooltip.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import { createId } from '../../../utils/id.js';
 
 	type TooltipSide = 'top' | 'bottom' | 'left' | 'right';
 
@@ -27,7 +28,10 @@
 	let tipStyle = $state('');
 	let timer: ReturnType<typeof setTimeout> | undefined;
 
-	const tipId = `tooltip-${Math.random().toString(36).slice(2, 9)}`;
+	let tipId = $state<string | undefined>(undefined);
+	$effect(() => {
+		tipId ??= createId('tooltip');
+	});
 
 	function position() {
 		if (!triggerEl || !tipEl) return;

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/molecules/ColorPicker/ColorPicker.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { createId } from '../../../utils/id.js';
+
 	export type ColorFormat = 'hex' | 'rgb' | 'hsl';
 	type ColorPickerSize = 'sm' | 'md' | 'lg';
 
@@ -83,7 +85,10 @@
 	let dragging: 'sv' | 'hue' | 'alpha' | null = null;
 	let syncing = false;
 
-	const panelId = `color-picker-${Math.random().toString(36).slice(2, 9)}`;
+	let panelId = $state<string | undefined>(undefined);
+	$effect(() => {
+		panelId ??= createId('color-picker');
+	});
 
 	const rgba = $derived(hsvToRgb(hue, sat, val));
 

package/dist/components/molecules/DropdownMenu/DropdownMenu.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Component, Snippet } from 'svelte';
 	import { on } from 'svelte/events';
+	import { createId } from '../../../utils/id.js';
 
 	export interface DropdownItem {
 		id: string;
@@ -52,7 +53,7 @@
 	}
 
 	let {
-		id = `menu-${Math.random().toString(36).slice(2, 9)}`,
+		id: idProp,
 		items = [],
 		label = 'Options',
 		align = 'start',
@@ -73,6 +74,13 @@
 		onopenchange
 	}: DropdownMenuProps = $props();
 
+	let autoId = $state<string | undefined>(undefined);
+	$effect(() => {
+		if (idProp == null) autoId ??= createId('menu');
+	});
+	const id = $derived(idProp ?? autoId);
+	const menuId = $derived(id ? `${id}-list` : undefined);
+
 	let triggerEl = $state<HTMLButtonElement | null>(null);
 	let menuEl = $state<HTMLDivElement | null>(null);
 	let listEl = $state<HTMLDivElement | null>(null);
@@ -82,8 +90,6 @@
 	let path = $state<string[]>([]);
 	let lastSelectedId = $state<string | null>(null);
 
-	const menuId = $derived(`${id}-list`);
-
 	function findPathToItem(list: DropdownItem[], targetId: string, parents: string[] = []): string[] | null {
 		for (const item of list) {
 			if (item.id === targetId) return parents;

package/dist/components/molecules/Select/Select.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { on } from 'svelte/events';
+	import { createId } from '../../../utils/id.js';
 
 	export interface SelectOption {
 		value: string;
@@ -60,9 +61,13 @@
 	/** After keyboard nav, ignore hover until the mouse actually moves */
 	let ignoreHover = $state(false);
 
-	const selectId = $derived(id ?? `select-${Math.random().toString(36).slice(2, 9)}`);
-	const listboxId = $derived(`${selectId}-listbox`);
-	const helperId = $derived(`${selectId}-helper`);
+	let autoId = $state<string | undefined>(undefined);
+	$effect(() => {
+		if (id == null) autoId ??= createId('select');
+	});
+	const selectId = $derived(id ?? autoId);
+	const listboxId = $derived(selectId ? `${selectId}-listbox` : undefined);
+	const helperId = $derived(selectId ? `${selectId}-helper` : undefined);
 
 	function findPathToValue(
 		list: SelectOption[],
@@ -148,7 +153,7 @@
 	);
 
 	const activeOptionId = $derived(
-		highlightedIndex >= 0 ? `${listboxId}-option-${highlightedIndex}` : undefined
+		listboxId && highlightedIndex >= 0 ? `${listboxId}-option-${highlightedIndex}` : undefined
 	);
 
 	const sizeClasses = {
@@ -586,7 +591,7 @@
 						<!-- svelte-ignore a11y_click_events_have_key_events -->
 						<!-- svelte-ignore a11y_no_static_element_interactions -->
 						<div
-							id={`${listboxId}-option-${index}`}
+							id={listboxId ? `${listboxId}-option-${index}` : undefined}
 							role="option"
 							aria-selected={isSelected}
 							aria-disabled={option.disabled || undefined}

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

@@ -102,20 +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) {
-		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[];
@@ -388,20 +392,11 @@
 	);
 
 	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);
+		return resolveRowKey(row, rowKey, 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];
-			}
-			return undefined;
-		}, row);
+		return resolveAccessor(row, column.accessor, column.id);
 	}
 
 	function formatCell(value: unknown): string {
@@ -748,7 +743,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;
@@ -2080,7 +2075,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">
@@ -2217,7 +2212,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,14 +1,6 @@
-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);
+    const value = resolveAccessor(row, column.accessor, column.id);
     if (value == null)
         return '';
     if (typeof value === 'boolean')

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,11 @@
 	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);
+		return resolveRowKey(row, rowKey, 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];
-			}
-			return undefined;
-		}, row);
+		return resolveAccessor(row, column.accessor, column.id);
 	}
 
 	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

@@ -812,6 +812,9 @@ export { default as VideoEditorTemplate } from './components/templates/VideoEdit
 export { default as AudioEditorTemplate } from './components/templates/AudioEditorTemplate/AudioEditorTemplate.svelte';
 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

@@ -553,6 +553,8 @@ export { default as VideoEditorTemplate } from './components/templates/VideoEdit
 export { default as AudioEditorTemplate } from './components/templates/AudioEditorTemplate/AudioEditorTemplate.svelte';
 // ── 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/dist/utils/id.d.ts

@@ -0,0 +1,2 @@
+/** Create a unique DOM id. Prefer calling from `$effect` so SSR/hydration stay in sync. */
+export declare function createId(prefix: string): string;

package/dist/utils/id.js

@@ -0,0 +1,7 @@
+/** Monotonic counter for client-assigned DOM ids (not used during SSR). */
+let count = 0;
+/** Create a unique DOM id. Prefer calling from `$effect` so SSR/hydration stay in sync. */
+export function createId(prefix) {
+    count += 1;
+    return `${prefix}-${count}`;
+}

package/package.json

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