@lavalogic/scoria 0.5.7 → 0.7.0

package/dist/Components/DragMenu/DragMenuHolder.svelte

@@ -1,19 +1,24 @@
 <svelte:options runes />
 
 <script lang="ts" module>
-	import type { Snippet } from 'svelte';
+	import { DraggableCard } from '../../index.js';
+	import { tick, type Snippet } from 'svelte';
 
 	export interface Draggable<T> {
 		id: string;
-		name: string;
+		title: string;
+		subtitle: string;
 		original: T;
+		selected?: boolean;
+		toggleSelected?: () => void;
 	}
 
 	export interface DragMenuHolderProps<T> {
-		items: Draggable<T>[];
-		consider: (items: Draggable<T>[]) => void;
-		finalise: (items: Draggable<T>[]) => void;
-		snippet: Snippet<[Draggable<T>, number]>;
+		items: T[];
+		transformToDraggable: (item: T) => Draggable<T>;
+		snippet?: Snippet<[Draggable<T>, number]>;
+
+		onUpdate: (items: T[]) => void;
 
 		label?: string;
 		flipDurationMS?: number;
@@ -25,15 +30,68 @@
 	import { flip } from 'svelte/animate';
 
 	const {
-		items,
-		consider,
-		finalise,
-		snippet,
+		items: originalItems,
+		onUpdate,
+		snippet: customSnippet,
+		transformToDraggable,
 		flipDurationMS = 60,
 		label
 	}: DragMenuHolderProps<T> = $props();
+
+	let items: Draggable<T>[] = $state([]);
+
+	function consider(newItems: Draggable<T>[]) {
+		items = newItems;
+	}
+	function finalise(newItems: Draggable<T>[]) {
+		items = newItems;
+		onUpdate(items.map((it) => it.original));
+	}
+
+	$effect.pre(() => {
+		void originalItems;
+		items = originalItems.map(transformToDraggable);
+	});
+
+	const snippet = $derived(customSnippet ?? draggableWithSelect);
+
+	function up(item: Draggable<T>, index: number) {
+		const before = items.slice(0, index);
+		const next = before.pop();
+		const [removed, ...after] = items.slice(index);
+
+		before.push(removed);
+		if (next) {
+			before.push(next);
+		}
+		before.push(...after);
+		items = before;
+	}
+
+	function down(item: Draggable<T>, index: number) {
+		const before = items.slice(0, index);
+
+		const [removed, previous, ...after] = items.slice(index);
+
+		if (previous) {
+			before.push(previous);
+		}
+		before.push(removed);
+		before.push(...after);
+		items = before;
+	}
 </script>
 
+{#snippet draggableWithSelect<T>(item: Draggable<T>, index: number)}
+	<DraggableCard
+		title={item.title}
+		subtitle={item.subtitle}
+		{index}
+		selectable
+		selected={item.selected}
+	/>
+{/snippet}
+
 <div class="wrapper">
 	{#if label}
 		<span class="top-label">{label}</span>
@@ -49,14 +107,49 @@
 			finalise(e.detail.items);
 		}}
 	>
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		{#each items as item, index (item.id)}
-			<div class="contents" animate:flip={{ duration: flipDurationMS }}>
+			<!-- svelte-ignore a11y_click_events_have_key_events -->
+			<div
+				class="contents"
+				onclick={(e) => {
+					if (item.toggleSelected) {
+						e.stopPropagation();
+						item.toggleSelected();
+					}
+				}}
+				animate:flip={{ duration: flipDurationMS }}
+			>
 				{@render snippet(item, index)}
 			</div>
 		{/each}
 	</div>
 </div>
 
+<!-- 
+tabindex="0"
+role="button"
+				onkeydown={(e) => {
+					const prevTarget = e.target;
+					console.log(e.key);
+					if (e.key == 'ArrowUp') {
+						e.stopPropagation();
+						up(item, index);
+					} else if (e.key == 'ArrowDown') {
+						e.stopPropagation();
+						down(item, index);
+					} else if (e.key == ' ') {
+						alert('SPACEBAR');
+					}
+					tick().then(() => {
+						if (prevTarget && 'focus' in prevTarget) {
+							(prevTarget as HTMLElement).focus();
+						} else {
+							console.warn(`prev target is undefined`);
+						}
+					});
+				}} -->
+
 <style>.top-label {
   position: absolute;
   left: 0.5rem;

package/dist/Components/DragMenu/DragMenuHolder.svelte.d.ts

@@ -1,14 +1,17 @@
-import type { Snippet } from 'svelte';
+import { type Snippet } from 'svelte';
 export interface Draggable<T> {
     id: string;
-    name: string;
+    title: string;
+    subtitle: string;
     original: T;
+    selected?: boolean;
+    toggleSelected?: () => void;
 }
 export interface DragMenuHolderProps<T> {
-    items: Draggable<T>[];
-    consider: (items: Draggable<T>[]) => void;
-    finalise: (items: Draggable<T>[]) => void;
-    snippet: Snippet<[Draggable<T>, number]>;
+    items: T[];
+    transformToDraggable: (item: T) => Draggable<T>;
+    snippet?: Snippet<[Draggable<T>, number]>;
+    onUpdate: (items: T[]) => void;
     label?: string;
     flipDurationMS?: number;
 }

package/dist/Components/DragMenu/DraggableCard.svelte

@@ -9,13 +9,11 @@
 
 		touch?: boolean;
 		selected?: boolean; // default false
-		disabled?: boolean; // default false
+		toggleSelected?: () => void;
 	}
 </script>
 
 <script lang="ts">
-	import { Size } from '../../Types/Internal/Size.js';
-
 	import Checkbox from '../Checkbox.svelte';
 
 	let {
@@ -25,14 +23,20 @@
 		index,
 		selected = $bindable(false),
 		touch = false,
-		disabled = false
+		toggleSelected
 	}: DraggableCardProps = $props();
 </script>
 
 <div class="card" class:touch>
 	{#if selectable}
 		<div class="limit-size" class:touch>
-			<Checkbox value={selected} onchange={() => (selected = !selected)} />
+			<Checkbox
+				value={selected}
+				onchange={(e) => {
+					e.stopPropagation();
+					toggleSelected?.();
+				}}
+			/>
 		</div>
 	{/if}
 	<div class="text" class:touch>

package/dist/Components/DragMenu/DraggableCard.svelte.d.ts

@@ -5,7 +5,7 @@ export interface DraggableCardProps {
     index: number;
     touch?: boolean;
     selected?: boolean;
-    disabled?: boolean;
+    toggleSelected?: () => void;
 }
 declare const DraggableCard: import("svelte").Component<DraggableCardProps, {}, "selected">;
 type DraggableCard = ReturnType<typeof DraggableCard>;

package/dist/Components/Table/Body/Rows/Columns/TableDatePicker.svelte

@@ -9,6 +9,7 @@
 	import { ToastContext } from '../../../../../Contexts/ToastContext.svelte.js';
 	import { Validity } from '../../../../../Types/Internal/Validity.js';
 	import type { DateTableCell } from '../../../Types/Columns/DateTableCell.js';
+	import { dev } from '$app/environment';
 
 	export interface TableDatePickerProps<T extends object> {
 		cell: DateTableCell<T>;
@@ -32,7 +33,35 @@
 		id: columnDef.id as string & keyof T
 	});
 
-	const editable = $derived(cell.column.columnDef.editable === true);
+	const editableAsync = $derived(
+		cell.column.columnDef.isEditable(cell.row.original, cell.row.originalIndex)
+	);
+	let editable = $state(false);
+
+	let asyncCounter = 0;
+	$effect(() => {
+		void editableAsync;
+		const localCounter = (asyncCounter = asyncCounter + 1);
+		(async () => {
+			try {
+				const isEditable = await editableAsync;
+				if (asyncCounter === localCounter) {
+					editable = isEditable;
+				} else if (dev) {
+					console.log('skipping async editable because it is stale');
+				}
+			} catch (e) {
+				if (dev) {
+					console.error(e);
+				}
+				if (asyncCounter === localCounter) {
+					editable = false;
+				} else if (dev) {
+					console.log('skipping async editable because it is stale');
+				}
+			}
+		})();
+	});
 	const focusDetails: TableFocusDetails<T> = $derived(
 		new TableFocusDetails(cell, tableContext, toast)
 	);

package/dist/Components/Table/Body/Rows/Columns/TableNumberInput.svelte

@@ -7,6 +7,8 @@
 </script>
 
 <script lang="ts" generics="T extends object">
+	import { dev } from '$app/environment';
+
 	import NumberInput from '../../../../NumberInput.svelte';
 	import { NumberInputDef } from '../../../Types/Columns/Definitions/Accessors/NumberInputDef.svelte.js';
 	import type { TableCell } from '../../../Types/Columns/TableCell.js';
@@ -49,7 +51,34 @@
 	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
 	const { toast } = getContext<ToastContext>(ToastContext.identifier);
 
-	const editable = $derived(cell.column.columnDef.editable === true);
+	const editableAsync = $derived(
+		cell.column.columnDef.isEditable(cell.row.original, cell.row.originalIndex)
+	);
+	let editable = $state(false);
+	let asyncCounter = 0;
+	$effect(() => {
+		void editableAsync;
+		const localCounter = (asyncCounter = asyncCounter + 1);
+		(async () => {
+			try {
+				const isEditable = await editableAsync;
+				if (asyncCounter === localCounter) {
+					editable = isEditable;
+				} else if (dev) {
+					console.log('skipping async editable because it is stale');
+				}
+			} catch (e) {
+				if (dev) {
+					console.error(e);
+				}
+				if (asyncCounter === localCounter) {
+					editable = false;
+				} else if (dev) {
+					console.log('skipping async editable because it is stale');
+				}
+			}
+		})();
+	});
 
 	const focusDetails: TableFocusDetails<T> = $derived(
 		new TableFocusDetails(cell, tableContext, toast)

package/dist/Components/Table/Body/Rows/Columns/TableQuerySelect.svelte

@@ -1,6 +1,7 @@
 <svelte:options runes />
 
 <script lang="ts" module>
+	import { dev } from '$app/environment';
 	import QuerySelect from '../../../../QuerySelect.svelte';
 	import type { Column } from '../../../Types/Columns/Column.js';
 	import type { QueryDef } from '../../../Types/Columns/Definitions/Accessors/QueryDef.svelte.js';
@@ -46,7 +47,35 @@
 	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
 	const { toast } = getContext<ToastContext>(ToastContext.identifier);
 
-	const editable = $derived(columnDef.editable === true);
+	const editableAsync = $derived(
+		cell.column.columnDef.isEditable(cell.row.original, cell.row.originalIndex)
+	);
+	let editable = $state(false);
+
+	let asyncCounter = 0;
+	$effect(() => {
+		void editableAsync;
+		const localCounter = (asyncCounter = asyncCounter + 1);
+		(async () => {
+			try {
+				const isEditable = await editableAsync;
+				if (asyncCounter === localCounter) {
+					editable = isEditable;
+				} else if (dev) {
+					console.log('skipping async editable because it is stale');
+				}
+			} catch (e) {
+				if (dev) {
+					console.error(e);
+				}
+				if (asyncCounter === localCounter) {
+					editable = false;
+				} else if (dev) {
+					console.log('skipping async editable because it is stale');
+				}
+			}
+		})();
+	});
 
 	const focusDetails: TableFocusDetails<T> = $derived(
 		new TableFocusDetails(cell, tableContext, toast)

package/dist/Components/Table/Body/Rows/Columns/TableSelect.svelte

@@ -1,6 +1,7 @@
 <svelte:options runes />
 
 <script lang="ts" module>
+	import { dev } from '$app/environment';
 	import SingleSelect from '../../../../SingleSelect.svelte';
 	import type { Column } from '../../../Types/Columns/Column.js';
 	import type { SelectDef } from '../../../Types/Columns/Definitions/Accessors/SelectDef.svelte.js';
@@ -28,7 +29,7 @@
 
 	let tdref = $state<HTMLTableCellElement | undefined>();
 
-	const selectValue = $derived(cell.getValue() as T |null|undefined);
+	const selectValue = $derived(cell.getValue() as T | null | undefined);
 
 	const visibleValue = $derived(
 		cell.column.columnDef.getDisplayValue!(cell.row.original, cell.row.originalIndex)
@@ -39,7 +40,34 @@
 	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
 	const { toast } = getContext<ToastContext>(ToastContext.identifier);
 
-	const editable = $derived(cell.column.columnDef.editable === true);
+	const editableAsync = $derived(
+		cell.column.columnDef.isEditable(cell.row.original, cell.row.originalIndex)
+	);
+	let editable = $state(false);
+	let asyncCounter = 0;
+	$effect(() => {
+		void editableAsync;
+		const localCounter = (asyncCounter = asyncCounter + 1);
+		(async () => {
+			try {
+				const isEditable = await editableAsync;
+				if (asyncCounter === localCounter) {
+					editable = isEditable;
+				} else if (dev) {
+					console.log('skipping async editable because it is stale');
+				}
+			} catch (e) {
+				if (dev) {
+					console.error(e);
+				}
+				if (asyncCounter === localCounter) {
+					editable = false;
+				} else if (dev) {
+					console.log('skipping async editable because it is stale');
+				}
+			}
+		})();
+	});
 
 	const focusDetails: TableFocusDetails<T> = $derived(
 		new TableFocusDetails(cell, tableContext, toast)

package/dist/Components/Table/Body/Rows/Columns/TableTextInput.svelte

@@ -7,6 +7,8 @@
 </script>
 
 <script lang="ts" generics="T extends object">
+	import { dev } from '$app/environment';
+
 	import type { TableCell } from '../../../Types/Columns/TableCell.js';
 	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
 	import { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
@@ -22,7 +24,35 @@
 	// 	getNumberColumnDefOrError(cell.column.columnDef)
 	// );
 
-	const editable = $derived(cell.column.columnDef.editable === true);
+	const editableAsync = $derived(
+		cell.column.columnDef.isEditable(cell.row.original, cell.row.originalIndex)
+	);
+	let editable = $state(false);
+
+	let asyncCounter = 0;
+	$effect(() => {
+		void editableAsync;
+		const localCounter = (asyncCounter = asyncCounter + 1);
+		(async () => {
+			try {
+				const isEditable = await editableAsync;
+				if (asyncCounter === localCounter) {
+					editable = isEditable;
+				} else if (dev) {
+					console.log('skipping async editable because it is stale');
+				}
+			} catch (e) {
+				if (dev) {
+					console.error(e);
+				}
+				if (asyncCounter === localCounter) {
+					editable = false;
+				} else if (dev) {
+					console.log('skipping async editable because it is stale');
+				}
+			}
+		})();
+	});
 
 	const value = $derived(cell.getValue());
 

package/dist/Components/Table/ColumnDefinitions/ExampleItemColumnDef.svelte.js

@@ -10,6 +10,7 @@ import { BubbleDef } from '../Types/Columns/Definitions/Display/BubbleDef.svelte
 import { DisplayDef } from '../Types/Columns/Definitions/Display/DisplayDef.svelte.js';
 import { ProgressBarDef } from '../Types/Columns/Definitions/Display/ProgressBarDef.svelte.js';
 import { ValidityDef } from '../Types/Columns/Definitions/Display/ValidityDef.svelte.js';
+import { asyncSleep } from '../../../Helpers/Helpers.svelte.js';
 export class ExampleItemColumnDef {
     static generateExampleItemColumnDefs(modal) {
         let defs = $state([
@@ -41,12 +42,12 @@ export class ExampleItemColumnDef {
             new TextInputDef({
                 header: 'Name',
                 id: 'name',
-                editable: true
+                isEditable: () => true
             }),
             new NumberInputDef({
                 header: 'Some Number',
                 id: 'someNumber',
-                editable: true,
+                isEditable: () => true,
                 min: 0,
                 max: 12345
             }),
@@ -67,25 +68,35 @@ export class ExampleItemColumnDef {
             new DateInputDef({
                 header: 'Some Date',
                 id: 'someDate',
-                editable: true,
-                defaultHidden: true
+                isEditable: async (item) => {
+                    if (item.someDate?.getFullYear() == 2030) {
+                        await asyncSleep(1000);
+                        return false;
+                    }
+                    else if (item.someDate?.getFullYear() == 2029) {
+                        await asyncSleep(5000);
+                        return false;
+                    }
+                    return true;
+                }
+                // defaultHidden: true
             }),
             new DateInputDef({
                 header: 'Some Date With Time',
                 id: 'someDateWithTime',
-                editable: true,
+                isEditable: () => true,
                 showTime: true
             }),
             new DateInputDef({
                 header: 'Flo Date',
                 id: 'floDate',
-                editable: true,
+                isEditable: () => true,
                 defaultHidden: true
             }),
             new DateInputDef({
                 header: 'Flo Date With Time',
                 id: 'floDateWithTime',
-                editable: true,
+                isEditable: () => true,
                 defaultHidden: true,
                 showTime: true
             }),
@@ -114,7 +125,7 @@ export class ExampleItemColumnDef {
                     ];
                 },
                 getDisplayValue: (item) => item.someSelect,
-                editable: true
+                isEditable: () => true
             }),
             new BubbleDef({
                 header: 'Generated Bubble',

package/dist/Components/Table/Types/Columns/Definitions/ColumnDef.svelte.d.ts

@@ -16,7 +16,7 @@ export interface ColumnDefProps<T extends object, FilterFnType = undefined> {
     defaultHidden?: boolean;
     minSize?: Pixels;
     width?: Pixels;
-    editable?: boolean;
+    isEditable?: (item: T, index: number) => boolean | Promise<boolean>;
     resizable?: boolean;
     isValid?: ValidationFn<T>;
     filterFn?: FilterFn<T, FilterFnType> | CustomFilterFn;
@@ -57,7 +57,7 @@ export declare abstract class ColumnDef<T extends object, FilterFnType = undefin
     get getDisplayValue(): ((item: T, index: number) => string | null | Promise<string | null>) | undefined;
     set getDisplayValue(v: ((item: T, index: number) => string | null | Promise<string | null>) | undefined);
     toJSON(): object;
-    readonly editable: boolean;
+    readonly isEditable: (item: T, index: number) => boolean | Promise<boolean>;
     readonly resizable: boolean;
     readonly header: string | Snippet;
 }

package/dist/Components/Table/Types/Columns/Definitions/ColumnDef.svelte.js

@@ -10,7 +10,7 @@ export class ColumnDef {
         this.accessorFn = $derived(props.accessorFn);
         this._minSize = $state(props.minSize ?? 48);
         this._width = $state(props.width ?? props.minSize ?? 48);
-        this.editable = $derived(props.editable ?? false);
+        this.isEditable = $derived(props.isEditable ?? (() => false));
         this.resizable = $derived(props.resizable ?? true);
         this.header = $derived(props.header);
         this._filterValueType = $derived(props.filterValueType);
@@ -84,7 +84,7 @@ export class ColumnDef {
     toJSON() {
         return { columnType: this.columnType, id: this.id, header: this.header };
     }
-    editable;
+    isEditable;
     resizable;
     header;
 }

package/dist/Components/Test/TestContextConsumer.svelte

@@ -0,0 +1,13 @@
+<svelte:options runes />
+
+<script lang="ts">
+	import { TestContext } from '../../Contexts/TestContext.svelte.js';
+	import { getContext } from 'svelte';
+
+	const testContext = getContext<TestContext>(TestContext.identifier);
+</script>
+
+<h1>counter 1: {testContext.value1.value}</h1>
+<p>Ref wrapper 1 is incremented every time you click the button</p>
+<h2>counter 2: {testContext.value2.value}</h2>
+<p>ref wrapper 2 adds ref wrapper 1's value every time ref wrapper 1's value is divisible by 3</p>

package/dist/Components/Test/TestContextConsumer.svelte.d.ts

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

package/dist/Contexts/TestContext.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { RefWrapper } from '../Types/Internal/RefWrapper.js';
+export declare class TestContext {
+    static readonly identifier: unique symbol;
+    private _value1;
+    get value1(): RefWrapper<number>;
+    set value1(v: RefWrapper<number>);
+    private _value2;
+    get value2(): RefWrapper<number>;
+    set value2(v: RefWrapper<number>);
+    useTestEffect(sourceValue: RefWrapper<number>): RefWrapper<number>;
+}

package/dist/Contexts/TestContext.svelte.js

@@ -0,0 +1,30 @@
+import { refWrapper } from '../Helpers/Helpers.svelte.js';
+import { untrack } from 'svelte';
+export class TestContext {
+    static identifier = Symbol();
+    _value1 = $state(refWrapper(0));
+    get value1() {
+        return this._value1;
+    }
+    set value1(v) {
+        this._value1 = v;
+    }
+    _value2 = $state(this.useTestEffect(this.value1));
+    get value2() {
+        return this._value2;
+    }
+    set value2(v) {
+        this._value2 = v;
+    }
+    useTestEffect(sourceValue) {
+        const internalState = refWrapper(0);
+        $effect(() => {
+            if (sourceValue.value % 3 == 0) {
+                untrack(() => {
+                    internalState.value += sourceValue.value;
+                });
+            }
+        });
+        return internalState;
+    }
+}

package/dist/Helpers/Helpers.svelte.d.ts

@@ -26,4 +26,6 @@ export declare function isErrorResponse(error: unknown): error is IErrorResponse
 export declare function getErrorMessage(error: unknown, includeUUID?: boolean): string;
 export declare function isValidEmailAddress(emailAddress: string): RegExpMatchArray | null;
 export declare function gridItem(element: HTMLElement): (() => void) | undefined;
+export type Milliseconds = number;
+export declare function asyncSleep(delay: Milliseconds): Promise<void>;
 export {};

package/dist/Helpers/Helpers.svelte.js

@@ -1,4 +1,5 @@
 import { Sizing } from '../scss/sizing.js';
+import { untrack } from 'svelte';
 export function autoPluralise(text, quantity = 2, { capitalise = false } = {}) {
     if (quantity === 1) {
         return text;
@@ -39,11 +40,11 @@ export function generateUUID() {
     return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
         let r = Math.random() * 16;
         if (d > 0) {
-            r = (d + r) % 16 | 0;
+            r = ((d + r) % 16) | 0;
             d = Math.floor(d / 16);
         }
         else {
-            r = (d2 + r) % 16 | 0;
+            r = ((d2 + r) % 16) | 0;
             d2 = Math.floor(d2 / 16);
         }
         return (c == 'x' ? r : (r & 0x7) | 0x8).toString(16);
@@ -165,3 +166,6 @@ export function gridItem(element) {
     observer.observe(firstChild);
     return () => observer.unobserve(firstChild);
 }
+export async function asyncSleep(delay) {
+    await new Promise((r) => setTimeout(r, delay));
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lavalogic/scoria",
   "description": "Svelte components used for the FloWMS Web Frontend",
-  "version": "0.5.7",
+  "version": "0.7.0",
   "publishConfig": {
     "access": "restricted"
   },
@@ -31,23 +31,23 @@
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.3",
     "@eslint/compat": "^2.0.0",
-    "@eslint/js": "^9.39.1",
+    "@eslint/js": "^9.39.2",
     "@playwright/test": "^1.57.0",
-    "@storybook/addon-a11y": "^10.1.7",
-    "@storybook/addon-docs": "^10.1.7",
+    "@storybook/addon-a11y": "^10.1.10",
+    "@storybook/addon-docs": "^10.1.10",
     "@storybook/addon-svelte-csf": "^5.0.10",
-    "@storybook/addon-vitest": "^10.1.7",
-    "@storybook/sveltekit": "^10.1.7",
+    "@storybook/addon-vitest": "^10.1.10",
+    "@storybook/sveltekit": "^10.1.10",
     "@sveltejs/adapter-node": "^5.4.0",
     "@sveltejs/kit": "^2.49.2",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "@types/eslint": "^9.6.1",
-    "@types/node": "^24.10.3",
-    "@typescript-eslint/eslint-plugin": "^8.49.0",
-    "@typescript-eslint/parser": "^8.49.0",
-    "@vitest/browser": "^4.0.15",
-    "eslint": "^9.39.1",
+    "@types/node": "^24.10.4",
+    "@typescript-eslint/eslint-plugin": "^8.50.0",
+    "@typescript-eslint/parser": "^8.50.0",
+    "@vitest/browser": "^4.0.16",
+    "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-storybook": "10.1.4",
     "eslint-plugin-svelte": "^3.13.1",
@@ -55,18 +55,18 @@
     "mdsvex": "^0.12.6",
     "playwright": "^1.57.0",
     "prettier": "^3.7.4",
-    "prettier-plugin-svelte": "^3.4.0",
+    "prettier-plugin-svelte": "^3.4.1",
     "publint": "^0.3.16",
-    "sass-embedded": "^1.96.0",
-    "storybook": "^10.1.7",
-    "svelte": "^5.45.10",
+    "sass-embedded": "^1.97.0",
+    "storybook": "^10.1.10",
+    "svelte": "^5.46.0",
     "svelte-check": "^4.3.4",
     "svelte-render-scan": "^1.1.0",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.49.0",
-    "vite": "^7.2.7",
+    "typescript-eslint": "^8.50.0",
+    "vite": "^7.3.0",
     "vite-plugin-devtools-json": "^1.0.0",
-    "vitest": "^4.0.15",
+    "vitest": "^4.0.16",
     "vitest-browser-svelte": "^2.0.1"
   },
   "keywords": [