@r2digisolutions/components 0.3.2 → 0.3.4

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/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

@@ -104,6 +104,7 @@
 	import { filterRows, cellText, uniqueColumnValues } from './filterRows.js';
 
 	function portalToBody(node: HTMLElement) {
+		if (typeof document === 'undefined') return {};
 		document.body.appendChild(node);
 		return {
 			destroy() {
@@ -256,9 +257,8 @@
 	let contextTarget = $state<CellRef | null>(null);
 	let contextOpen = $state(false);
 	let contextAnchor = $state<ContextMenuAnchor | null>(null);
-	let viewportWidth = $state(
-		typeof window !== 'undefined' ? window.innerWidth : 1280
-	);
+	/** Same on SSR + first client paint to avoid hydration mismatch; real width set in $effect. */
+	let viewportWidth = $state(1280);
 	let filterColumnDraft = $state('');
 	let filterValueDraft = $state('');
 

package/dist/index.d.ts

@@ -812,6 +812,7 @@ 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 { 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,7 @@ 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 { 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/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.2",
+	"version": "0.3.4",
 	"private": false,
 	"description": "R2DigiSolutions Svelte 5 component library — Atomic Design, Tailwind 4, Light/Dark mode",
 	"license": "MIT",