edges-svelte 3.0.3 → 3.1.0

package/README.md

@@ -13,6 +13,15 @@ No context boilerplate. No hydration headaches.
 
 EdgeS is built to prevent state leaks. Its primary goal is to keep server-side state safely isolated per request while providing a clean developer experience with presenters, stores, and automatic client updates when fresh state arrives from the server. It is intentionally one-way sync from server to client and does not aim to provide full two-way state synchronization between client and server.
 
+### Sync Scope & Limitations
+
+EdgeS does **not** aim to provide full server-to-client synchronization for all SvelteKit flows.
+
+- The main goal of this package is **server-side state isolation per request**.
+- Server-to-client sync is a convenience layer for common cases, not a strict consistency protocol.
+- `svelte actions` with redirects are **not fully synchronized** by design.
+- Redirect-driven flows (and similar edge cases) should be handled with explicit app-level patterns (for example cookies/session/flash state) when you need guaranteed transfer of action results across navigation.
+
 > Designed for **SvelteKit**.
 
 ---

package/dist/client/NavigationSync.svelte.js

@@ -1,4 +1,4 @@
-import { browser } from '../utils/environment.js';
+import { BROWSER } from '@azure-net/tools/environment';
 import { batch } from '../utils/batch.js';
 const stateUpdateCallbacks = new Map();
 const UNDEFINED_MARKER = '__EDGES_UNDEFINED__';
@@ -43,7 +43,7 @@ const tryDecodeLegacyString = (value) => {
     }
 };
 export function registerStateUpdate(key, callback) {
-    if (browser) {
+    if (BROWSER) {
         stateUpdateCallbacks.set(key, callback);
     }
 }
@@ -85,7 +85,7 @@ export function applyEdgesFromPayload(payload) {
     }
     processEdgesState(rawState);
 }
-if (browser) {
+if (BROWSER) {
     if (!window.__EDGES_NAVIGATION_SYNC_MOUNTED__) {
         window.__EDGES_NAVIGATION_SYNC_MOUNTED__ = true;
         void Promise.all([import('svelte'), import('./NavigationStateObserver.svelte')])

package/dist/context/Context.js

@@ -1,11 +1,11 @@
-import { browser } from '../utils/environment.js';
+import { BROWSER } from '@azure-net/tools/environment';
 class RequestContextManager {
     _currentGetter;
     init(getter) {
         this._currentGetter = getter;
     }
     current() {
-        if (browser) {
+        if (BROWSER) {
             return { data: { message: 'Do not use request context on client side' } };
         }
         if (!this._currentGetter) {

package/dist/provider/Provider.js

@@ -1,8 +1,7 @@
 import { createState as BaseCreateState, createDerivedState as BaseCreateDerivedState, createRawState as BaseCreateRawState } from '../store/index.js';
+import { BROWSER, DEV } from '@azure-net/tools/environment';
 import { RequestContext } from '../context/index.js';
-import { browser } from '../utils/environment.js';
-import { DevTools } from '../utils/dev.js';
-import { dev } from '../utils/environment.js';
+import { recordProviderAccess, registerProviderDefinition, trackFactoryUniqueness, validateNamedProviderUniqueness } from './Utils.js';
 const globalClientCache = new Map();
 const globalConstructionStack = [];
 const PROVIDER_FACTORY_MARK = Symbol.for('edges-svelte.provider.factory');
@@ -17,7 +16,7 @@ class AutoKeyGenerator {
             cache = this.cache;
             counters = this.counters;
         };
-        if (browser) {
+        if (BROWSER) {
             setGlobalCacheSystem();
         }
         else {
@@ -45,7 +44,7 @@ class AutoKeyGenerator {
             counters.set(baseKey, 0);
         }
         cache.set(factory, finalKey);
-        DevTools.validateFactoryUniqueness(factory, finalKey);
+        trackFactoryUniqueness(factory, finalKey);
         return finalKey;
     }
     static hash(str) {
@@ -58,7 +57,7 @@ class AutoKeyGenerator {
     }
 }
 export const clearCache = (pattern) => {
-    if (browser) {
+    if (BROWSER) {
         if (pattern) {
             for (const [key] of globalClientCache) {
                 if (key.includes(pattern)) {
@@ -73,7 +72,7 @@ export const clearCache = (pattern) => {
 };
 const createUiProvider = (cacheKey, factory, dependencies, inject) => {
     const readConstructionStack = () => {
-        if (browser)
+        if (BROWSER)
             return globalConstructionStack;
         try {
             const context = RequestContext.current();
@@ -89,7 +88,7 @@ const createUiProvider = (cacheKey, factory, dependencies, inject) => {
         return `[edges-svelte] Circular provider dependency detected while constructing "${key}". Chain: ${chain.join(' -> ')}.`;
     };
     const validateLazyInjection = (ownerKey, injections) => {
-        if (!dev || !injections)
+        if (!DEV || !injections)
             return;
         for (const [depKey, depValue] of Object.entries(injections)) {
             if (depValue && typeof depValue === 'object') {
@@ -119,7 +118,7 @@ const createUiProvider = (cacheKey, factory, dependencies, inject) => {
     };
     const provider = (() => {
         let contextMap;
-        if (browser) {
+        if (BROWSER) {
             contextMap = globalClientCache;
         }
         else {
@@ -137,6 +136,7 @@ const createUiProvider = (cacheKey, factory, dependencies, inject) => {
         if (contextMap.has(cacheKey)) {
             const cached = contextMap.get(cacheKey);
             if (cached !== undefined) {
+                recordProviderAccess(cacheKey, cached, BROWSER ? contextMap.size : undefined);
                 return cached;
             }
         }
@@ -161,6 +161,7 @@ const createUiProvider = (cacheKey, factory, dependencies, inject) => {
         }
         markProviderInstance(instance);
         contextMap.set(cacheKey, instance);
+        recordProviderAccess(cacheKey, instance, BROWSER ? contextMap.size : undefined);
         return instance;
     });
     try {
@@ -181,7 +182,11 @@ export function createStore(nameOrFactory, factoryOrInject, inject) {
     const name = isNameProvided ? nameOrFactory : undefined;
     const factory = isNameProvided ? factoryOrInject : nameOrFactory;
     const injections = isNameProvided ? inject : factoryOrInject;
+    if (isNameProvided) {
+        validateNamedProviderUniqueness(name, 'store', factory);
+    }
     const cacheKey = name || AutoKeyGenerator.generate(factory);
+    registerProviderDefinition(cacheKey, 'store', factory, Boolean(name));
     return createUiProvider(cacheKey, factory, (key) => {
         let stateCounter = 0;
         return {
@@ -215,7 +220,11 @@ export function createPresenter(nameOrFactory, factoryOrInject, inject) {
     const name = isNameProvided ? nameOrFactory : undefined;
     const factory = isNameProvided ? factoryOrInject : nameOrFactory;
     const injections = isNameProvided ? inject : factoryOrInject;
+    if (isNameProvided) {
+        validateNamedProviderUniqueness(name, 'presenter', factory);
+    }
     const cacheKey = name || AutoKeyGenerator.generate(factory);
+    registerProviderDefinition(cacheKey, 'presenter', factory, Boolean(name));
     return createUiProvider(cacheKey, factory, {}, injections);
 }
 export const createPresenterFactory = (inject) => {

package/dist/provider/Utils.d.ts

@@ -0,0 +1,34 @@
+import type { UnknownFunc } from '../types.js';
+export type ProviderKind = 'store' | 'presenter';
+export interface ProviderDevDefinitionSnapshot {
+    key: string;
+    kind: ProviderKind;
+    factoryName: string;
+    named: boolean;
+    registeredAt: number;
+}
+export interface ProviderDevRuntimeSnapshot {
+    key: string;
+    instantiated: boolean;
+    hits: number;
+    lastAccessedAt: number | null;
+    instanceSizeBytes: number;
+}
+export interface ProviderDevSnapshot {
+    definitions: ProviderDevDefinitionSnapshot[];
+    runtimes: ProviderDevRuntimeSnapshot[];
+    providerCacheEntries: number;
+    providerCacheSizeBytes: number;
+}
+export interface ProviderDuplicateAttempt {
+    key: string;
+    attemptedKind: ProviderKind;
+    existingKind: ProviderKind;
+    at: number;
+}
+export declare const trackFactoryUniqueness: (factory: UnknownFunc, key: string) => void;
+export declare const validateNamedProviderUniqueness: (key: string, kind: ProviderKind, factory: UnknownFunc) => void;
+export declare const registerProviderDefinition: (key: string, kind: ProviderKind, factory: UnknownFunc, named: boolean) => void;
+export declare const recordProviderAccess: (key: string, instance: unknown, cacheEntriesHint?: number) => void;
+export declare const getProviderDevSnapshot: () => ProviderDevSnapshot;
+export declare const getProviderDuplicateAttempts: () => ProviderDuplicateAttempt[];

package/dist/provider/Utils.js

@@ -0,0 +1,102 @@
+import { BROWSER, DEV } from '@azure-net/tools/environment';
+const seenFactories = new WeakSet();
+const namedProviderRegistry = new Map();
+const duplicateNamedProviderEvents = [];
+const providerDefinitions = new Map();
+const providerRuntime = new Map();
+let providerCacheEntries = 0;
+let providerCacheSizeBytes = 0;
+const safeJsonLength = (value) => {
+    try {
+        const serialized = JSON.stringify(value);
+        return serialized ? serialized.length : 0;
+    }
+    catch {
+        return 0;
+    }
+};
+const estimateSize = (value) => {
+    if (typeof value === 'bigint')
+        return value.toString().length;
+    if (typeof value === 'function' || typeof value === 'symbol')
+        return 0;
+    if (typeof value === 'string')
+        return value.length;
+    if (value === undefined || value === null)
+        return 0;
+    return safeJsonLength(value);
+};
+export const trackFactoryUniqueness = (factory, key) => {
+    if (!DEV)
+        return;
+    if (seenFactories.has(factory)) {
+        console.warn(`[edges-svelte] Factory collision detected for key "${key}". ` +
+            `This might cause unexpected behavior.` +
+            `Set a unique __storeKey__ property on your factory function.`);
+    }
+    seenFactories.add(factory);
+};
+export const validateNamedProviderUniqueness = (key, kind, factory) => {
+    if (!DEV)
+        return;
+    const existing = namedProviderRegistry.get(key);
+    if (!existing) {
+        namedProviderRegistry.set(key, { kind, factory });
+        return;
+    }
+    if (existing.factory === factory && existing.kind === kind) {
+        return;
+    }
+    duplicateNamedProviderEvents.push({
+        key,
+        attemptedKind: kind,
+        existingKind: existing.kind,
+        at: Date.now()
+    });
+    throw new Error(`[edges-svelte] Duplicate ${kind} key "${key}" detected. ` +
+        `This key is already used by a ${existing.kind}. Use unique names for createStore/createPresenter.`);
+};
+export const registerProviderDefinition = (key, kind, factory, named) => {
+    if (!DEV || !BROWSER)
+        return;
+    if (providerDefinitions.has(key))
+        return;
+    providerDefinitions.set(key, {
+        key,
+        kind,
+        factoryName: factory.displayName || factory.name || '(anonymous)',
+        named,
+        registeredAt: Date.now()
+    });
+};
+export const recordProviderAccess = (key, instance, cacheEntriesHint) => {
+    if (!DEV || !BROWSER)
+        return;
+    const runtime = providerRuntime.get(key) ?? {
+        key,
+        instantiated: false,
+        hits: 0,
+        lastAccessedAt: null,
+        instanceSizeBytes: 0
+    };
+    runtime.instantiated = true;
+    runtime.hits += 1;
+    runtime.lastAccessedAt = Date.now();
+    runtime.instanceSizeBytes = estimateSize(instance);
+    providerRuntime.set(key, runtime);
+    if (typeof cacheEntriesHint === 'number') {
+        providerCacheEntries = cacheEntriesHint;
+    }
+    providerCacheSizeBytes = 0;
+    for (const [providerKey, tracked] of providerRuntime) {
+        providerCacheSizeBytes += providerKey.length;
+        providerCacheSizeBytes += tracked.instanceSizeBytes;
+    }
+};
+export const getProviderDevSnapshot = () => ({
+    definitions: Array.from(providerDefinitions.values()),
+    runtimes: Array.from(providerRuntime.values()),
+    providerCacheEntries,
+    providerCacheSizeBytes
+});
+export const getProviderDuplicateAttempts = () => [...duplicateNamedProviderEvents];

package/dist/server/EdgesHandle.js

@@ -33,6 +33,8 @@ export const edgesHandle = async (event, callback, silentChromeDevtools = false)
             serialize: (html) => {
                 if (!html)
                     return html ?? '';
+                if (!html.includes('</body>'))
+                    return html;
                 const serialized = stateSerialize();
                 if (!serialized)
                     return html;

package/dist/server/ServerSync.js

@@ -1,6 +1,6 @@
 import { getStateMap } from '../store/State.svelte.js';
 import { RequestContext } from '../context/Context.js';
-import { build, dev } from '../utils/environment.js';
+import { DEV } from '@azure-net/tools/environment';
 const UNDEFINED_MARKER = '__EDGES_UNDEFINED__';
 const NULL_MARKER = '__EDGES_NULL__';
 const BIGINT_MARKER = '__EDGES_BIGINT__';
@@ -9,7 +9,6 @@ const EDGES_REV_FIELD = '__edges_rev__';
 const isObjectRecord = (value) => {
     return typeof value === 'object' && value !== null && !Array.isArray(value);
 };
-const PROFILE_EDGES_DELTA = dev && !build;
 const encodeEdgesValue = (value) => {
     if (value === undefined)
         return { [UNDEFINED_MARKER]: true };
@@ -30,7 +29,7 @@ const encodeEdgesValue = (value) => {
     return value;
 };
 const getEdgesDelta = () => {
-    const startedAt = PROFILE_EDGES_DELTA ? performance.now() : 0;
+    const startedAt = DEV ? performance.now() : 0;
     try {
         const context = RequestContext.current();
         const dirtyKeys = context.data.edgesDirtyKeys;
@@ -52,7 +51,7 @@ const getEdgesDelta = () => {
         return undefined;
     }
     finally {
-        if (PROFILE_EDGES_DELTA) {
+        if (DEV) {
             const duration = performance.now() - startedAt;
             if (duration > 4) {
                 console.debug(`[edges-svelte] edges delta encode took ${duration.toFixed(2)}ms`);

package/dist/store/State.svelte.d.ts

@@ -2,7 +2,7 @@ import { type Readable, type Writable } from 'svelte/store';
 declare global {
     interface Window {
         __SAFE_SSR_STATE__?: Map<string, unknown>;
-        __EDGES_DEVTOOLS__: Record<string, unknown>;
+        __EDGES_DEVTOOLS__?: Record<string, unknown>;
     }
 }
 export declare const stateSerialize: () => string;

package/dist/store/State.svelte.js

@@ -1,5 +1,5 @@
 import { RequestContext } from '../context/Context.js';
-import { browser } from '../utils/environment.js';
+import { BROWSER } from '@azure-net/tools/environment';
 import { derived, writable } from 'svelte/store';
 import { registerStateUpdate } from '../client/NavigationSync.svelte.js';
 import { queueUpdate, isBatching } from '../utils/batch.js';
@@ -56,7 +56,7 @@ const getRequestContext = () => {
     }
 };
 const markStateDirty = (key) => {
-    if (browser)
+    if (BROWSER)
         return;
     try {
         const context = RequestContext.current();
@@ -85,7 +85,7 @@ const getBrowserState = (key, initial) => {
     return initial;
 };
 export const createRawState = (key, initial) => {
-    if (browser) {
+    if (BROWSER) {
         let state = $state(getBrowserState(key, initial()));
         const updateWindowState = (val) => {
             if (!window.__SAFE_SSR_STATE__) {
@@ -138,7 +138,7 @@ export const createRawState = (key, initial) => {
     };
 };
 export const createState = (key, initial) => {
-    if (browser) {
+    if (BROWSER) {
         const initialValue = getBrowserState(key, initial());
         const state = writable(initialValue);
         let currentValue = initialValue;
@@ -222,7 +222,7 @@ export const createState = (key, initial) => {
     };
 };
 export const createDerivedState = (stores, deriveFn) => {
-    if (browser) {
+    if (BROWSER) {
         return derived(stores, deriveFn);
     }
     return {

package/dist/utils/DevTools.svelte

@@ -0,0 +1,388 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import type { DevToolsInspectorSnapshot, DevToolsKeyCheckResult, EdgesDevtoolsWindowApi } from './dev.js';
+
+	type Tab = 'presenters' | 'stores' | 'info';
+
+	const emptySnapshot = (): DevToolsInspectorSnapshot => ({
+		presenters: [],
+		stores: [],
+		info: {
+			totalPresenters: 0,
+			totalStores: 0,
+			totalProviders: 0,
+			instantiatedProviders: 0,
+			totalStateEntries: 0,
+			totalStateSizeBytes: 0,
+			providerCacheEntries: 0,
+			providerCacheSizeBytes: 0
+		}
+	});
+
+	let isOpen = false;
+	let activeTab: Tab = 'presenters';
+	let inspector: DevToolsInspectorSnapshot = emptySnapshot();
+	let keyCheckResult: DevToolsKeyCheckResult | null = null;
+	let presenterExpanded = new Set<string>();
+	let storeExpanded = new Set<string>();
+
+	const toKb = (value: number) => `${(value / 1024).toFixed(2)} KB`;
+	const toDateTime = (ts: number | null) => (ts ? new Date(ts).toLocaleTimeString() : 'never');
+
+	const refresh = () => {
+		const api = window.__EDGES_DEVTOOLS__ as EdgesDevtoolsWindowApi | undefined;
+		inspector = api?.getInspectorData?.() ?? emptySnapshot();
+	};
+
+	const toggleExpanded = (target: Set<string>, key: string) => {
+		const next = new Set(target);
+		if (next.has(key)) next.delete(key);
+		else next.add(key);
+		return next;
+	};
+
+	const runKeyCheck = () => {
+		const api = window.__EDGES_DEVTOOLS__ as EdgesDevtoolsWindowApi | undefined;
+		keyCheckResult = api?.checkKeyUniqueness?.() ?? null;
+	};
+
+	const clearStateCache = () => {
+		const api = window.__EDGES_DEVTOOLS__ as EdgesDevtoolsWindowApi | undefined;
+		api?.clearCache?.();
+		refresh();
+	};
+
+	onMount(() => {
+		refresh();
+		const interval = window.setInterval(() => {
+			if (isOpen) refresh();
+		}, 1500);
+		return () => window.clearInterval(interval);
+	});
+</script>
+
+<div class="edges-devtools">
+	<button class="launcher" on:click={() => (isOpen = !isOpen)} aria-label="Toggle edges devtools"> DEV </button>
+
+	{#if isOpen}
+		<div class="panel">
+			<div class="tabs">
+				<button class:active={activeTab === 'presenters'} on:click={() => (activeTab = 'presenters')}
+					>presenters ({inspector.presenters.length})</button
+				>
+				<button class:active={activeTab === 'stores'} on:click={() => (activeTab = 'stores')}>stores ({inspector.stores.length})</button>
+				<button class:active={activeTab === 'info'} on:click={() => (activeTab = 'info')}>info</button>
+			</div>
+
+			<div class="content">
+				{#if activeTab === 'presenters'}
+					{#if inspector.presenters.length === 0}
+						<div class="empty">No presenters registered yet.</div>
+					{:else}
+						{#each inspector.presenters as presenter (presenter)}
+							<div class="accordion-item">
+								<button class="accordion-head" on:click={() => (presenterExpanded = toggleExpanded(presenterExpanded, presenter.key))}>
+									<span>{presenter.key}</span>
+									<span>{presenterExpanded.has(presenter.key) ? '−' : '+'}</span>
+								</button>
+								{#if presenterExpanded.has(presenter.key)}
+									<div class="accordion-body">
+										<div><strong>Factory:</strong> {presenter.factoryName}</div>
+										<div><strong>Named key:</strong> {presenter.named ? 'yes' : 'no (auto-generated)'}</div>
+										<div><strong>Instantiated:</strong> {presenter.instantiated ? 'yes' : 'no'}</div>
+										<div><strong>Hits:</strong> {presenter.hits}</div>
+										<div><strong>Instance size:</strong> {toKb(presenter.instanceSizeBytes)}</div>
+										<div><strong>Last access:</strong> {toDateTime(presenter.lastAccessedAt)}</div>
+										<div><strong>Registered:</strong> {toDateTime(presenter.registeredAt)}</div>
+									</div>
+								{/if}
+							</div>
+						{/each}
+					{/if}
+				{/if}
+
+				{#if activeTab === 'stores'}
+					{#if inspector.stores.length === 0}
+						<div class="empty">No stores registered yet.</div>
+					{:else}
+						{#each inspector.stores as store (store)}
+							<div class="accordion-item">
+								<button class="accordion-head" on:click={() => (storeExpanded = toggleExpanded(storeExpanded, store.key))}>
+									<span>{store.key}</span>
+									<span>{storeExpanded.has(store.key) ? '−' : '+'}</span>
+								</button>
+								{#if storeExpanded.has(store.key)}
+									<div class="accordion-body">
+										<div><strong>Factory:</strong> {store.factoryName}</div>
+										<div><strong>Named key:</strong> {store.named ? 'yes' : 'no (auto-generated)'}</div>
+										<div><strong>States:</strong> {store.stateCount}</div>
+										<div><strong>Total state size:</strong> {toKb(store.stateSizeBytes)}</div>
+										<div><strong>Instance size:</strong> {toKb(store.instanceSizeBytes)}</div>
+										<div><strong>Last access:</strong> {toDateTime(store.lastAccessedAt)}</div>
+										<div class="state-tree-title">State tree</div>
+										{#if store.states.length === 0}
+											<div class="empty tiny">No state entries found for this store.</div>
+										{:else}
+											<div class="state-tree">
+												{#each store.states as stateEntry (stateEntry)}
+													<div class="state-entry">
+														<div><strong>{stateEntry.fullKey}</strong></div>
+														<div>slot: {stateEntry.slot}{stateEntry.index !== null ? ` #${stateEntry.index}` : ''}</div>
+														<div>size: {toKb(stateEntry.sizeBytes)}</div>
+														<div class="preview">value: {stateEntry.valuePreview}</div>
+													</div>
+												{/each}
+											</div>
+										{/if}
+									</div>
+								{/if}
+							</div>
+						{/each}
+					{/if}
+				{/if}
+
+				{#if activeTab === 'info'}
+					<div class="info-actions">
+						<button on:click={refresh}>Refresh snapshot</button>
+						<button on:click={runKeyCheck}>Check key uniqueness</button>
+						<button on:click={clearStateCache}>Clear state cache</button>
+					</div>
+					<div class="metrics">
+						<div><strong>Total providers:</strong> {inspector.info.totalProviders}</div>
+						<div><strong>Presenters:</strong> {inspector.info.totalPresenters}</div>
+						<div><strong>Stores:</strong> {inspector.info.totalStores}</div>
+						<div><strong>Instantiated providers:</strong> {inspector.info.instantiatedProviders}</div>
+						<div><strong>Total state entries:</strong> {inspector.info.totalStateEntries}</div>
+						<div><strong>Total state size:</strong> {toKb(inspector.info.totalStateSizeBytes)}</div>
+						<div><strong>Provider cache entries:</strong> {inspector.info.providerCacheEntries}</div>
+						<div><strong>Provider cache size:</strong> {toKb(inspector.info.providerCacheSizeBytes)}</div>
+					</div>
+
+					{#if keyCheckResult}
+						<div class="key-check {keyCheckResult.ok ? 'ok' : 'warn'}">
+							<div><strong>Key check:</strong> {keyCheckResult.ok ? 'OK' : 'Issues found'}</div>
+							<div><strong>Provider keys checked:</strong> {keyCheckResult.providerKeysChecked}</div>
+							{#if keyCheckResult.duplicateAttempts.length > 0}
+								<div class="duplicate-list">
+									{#each keyCheckResult.duplicateAttempts as duplicate (duplicate)}
+										<div>
+											{duplicate.key}: attempted {duplicate.attemptedKind}, existing {duplicate.existingKind} ({toDateTime(duplicate.at)})
+										</div>
+									{/each}
+								</div>
+							{/if}
+						</div>
+					{/if}
+				{/if}
+			</div>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.edges-devtools {
+		position: fixed;
+		right: 20px;
+		bottom: 20px;
+		z-index: 999999;
+		font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif;
+	}
+
+	.launcher {
+		width: 50px;
+		height: 50px;
+		border-radius: 999px;
+		border: none;
+		background: linear-gradient(140deg, #0f766e, #155e75);
+		color: #f8fafc;
+		font-weight: 700;
+		letter-spacing: 0.04em;
+		cursor: pointer;
+		box-shadow: 0 8px 18px rgba(15, 118, 110, 0.45);
+	}
+
+	.panel {
+		position: absolute;
+		right: 0;
+		bottom: 62px;
+		width: min(760px, calc(100vw - 32px));
+		height: min(520px, calc(100vh - 96px));
+		display: grid;
+		grid-template-columns: 180px 1fr;
+		background: #f8fafc;
+		border: 1px solid #cbd5e1;
+		border-radius: 14px;
+		overflow: hidden;
+		box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
+	}
+
+	.tabs {
+		display: flex;
+		flex-direction: column;
+		gap: 6px;
+		padding: 12px;
+		background: #e2e8f0;
+		border-right: 1px solid #cbd5e1;
+	}
+
+	.tabs button {
+		text-align: left;
+		border: 1px solid #94a3b8;
+		background: #f8fafc;
+		padding: 8px;
+		border-radius: 8px;
+		cursor: pointer;
+		font-size: 12px;
+		font-weight: 600;
+		text-transform: lowercase;
+	}
+
+	.tabs button.active {
+		background: #0f766e;
+		color: #f8fafc;
+		border-color: #0f766e;
+	}
+
+	.content {
+		padding: 12px;
+		overflow: auto;
+		font-size: 12px;
+		color: #0f172a;
+		display: flex;
+		flex-direction: column;
+		gap: 10px;
+		min-height: 0;
+	}
+
+	.accordion-item {
+		border: 1px solid #cbd5e1;
+		border-radius: 10px;
+		overflow: hidden;
+		display: flex;
+		flex-direction: column;
+		min-height: 0;
+	}
+
+	.accordion-head {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 9px 10px;
+		font-weight: 700;
+		background: #f1f5f9;
+		border: none;
+		cursor: pointer;
+	}
+
+	.accordion-body {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+		padding: 10px;
+		background: #ffffff;
+		max-height: 240px;
+		overflow: auto;
+		min-height: 0;
+	}
+
+	.state-tree-title {
+		margin-top: 6px;
+		font-weight: 700;
+	}
+
+	.state-tree {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+		max-height: 180px;
+		overflow: auto;
+		padding-right: 2px;
+	}
+
+	.state-entry {
+		border: 1px solid #dbeafe;
+		background: #f8fbff;
+		border-radius: 8px;
+		padding: 7px;
+	}
+
+	.preview {
+		font-family: 'IBM Plex Mono', 'SFMono-Regular', ui-monospace, monospace;
+		word-break: break-word;
+	}
+
+	.empty {
+		padding: 12px;
+		border: 1px dashed #94a3b8;
+		border-radius: 8px;
+		color: #475569;
+	}
+
+	.tiny {
+		padding: 6px;
+	}
+
+	.info-actions {
+		display: flex;
+		gap: 8px;
+		flex-wrap: wrap;
+	}
+
+	.info-actions button {
+		border: 1px solid #64748b;
+		background: #ffffff;
+		padding: 6px 8px;
+		border-radius: 8px;
+		cursor: pointer;
+		font-size: 12px;
+	}
+
+	.metrics {
+		display: grid;
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+		gap: 6px;
+		padding: 8px;
+		background: #f8fafc;
+		border: 1px solid #cbd5e1;
+		border-radius: 8px;
+	}
+
+	.key-check {
+		padding: 8px;
+		border-radius: 8px;
+		border: 1px solid;
+	}
+
+	.key-check.ok {
+		border-color: #16a34a;
+		background: #f0fdf4;
+	}
+
+	.key-check.warn {
+		border-color: #dc2626;
+		background: #fef2f2;
+	}
+
+	.duplicate-list {
+		margin-top: 6px;
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+	}
+
+	@media (max-width: 760px) {
+		.panel {
+			grid-template-columns: 1fr;
+			height: min(78vh, 560px);
+		}
+
+		.tabs {
+			flex-direction: row;
+			padding: 8px;
+			border-right: none;
+			border-bottom: 1px solid #cbd5e1;
+			overflow-x: auto;
+		}
+	}
+</style>

package/dist/utils/DevTools.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const DevTools: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DevTools = InstanceType<typeof DevTools>;
+export default DevTools;

package/dist/utils/batch.js

@@ -1,10 +1,10 @@
-import { browser } from './environment.js';
+import { BROWSER } from '@azure-net/tools/environment';
 class BatchManager {
     pendingUpdates = new Map();
     depth = 0;
     batchCallbacks = new Set();
     batch(fn) {
-        if (!browser) {
+        if (!BROWSER) {
             fn();
             return;
         }
@@ -20,12 +20,12 @@ class BatchManager {
         }
     }
     begin() {
-        if (!browser)
+        if (!BROWSER)
             return;
         this.depth += 1;
     }
     end() {
-        if (!browser)
+        if (!BROWSER)
             return;
         if (this.depth === 0)
             return;
@@ -35,10 +35,10 @@ class BatchManager {
         }
     }
     isBatching() {
-        return browser && this.depth > 0;
+        return BROWSER && this.depth > 0;
     }
     queueUpdate(key, value, callback) {
-        if (!browser || this.depth === 0) {
+        if (!BROWSER || this.depth === 0) {
             if (callback)
                 callback(value);
             return;
@@ -73,7 +73,7 @@ export const queueUpdate = (key, value, callback) => batchManager.queueUpdate(ke
 export const onBatchComplete = (callback) => batchManager.onBatchComplete(callback);
 export const isBatching = () => batchManager.isBatching();
 export const transaction = async (fn) => {
-    if (!browser) {
+    if (!BROWSER) {
         return fn();
     }
     batchManager.begin();

package/dist/utils/dev.d.ts

@@ -1,9 +1,75 @@
-import type { UnknownFunc } from '../types.js';
+import { type ProviderKind } from '../provider/Utils.js';
+export interface DevToolsStateEntrySnapshot {
+    fullKey: string;
+    slot: 'state' | 'rawstate' | 'unknown';
+    index: number | null;
+    sizeBytes: number;
+    valuePreview: string;
+}
+export interface DevToolsProviderSnapshot {
+    key: string;
+    kind: ProviderKind;
+    factoryName: string;
+    named: boolean;
+    registeredAt: number;
+    instantiated: boolean;
+    hits: number;
+    lastAccessedAt: number | null;
+    instanceSizeBytes: number;
+    stateCount: number;
+    stateSizeBytes: number;
+    states: DevToolsStateEntrySnapshot[];
+}
+export interface DevToolsInfoSnapshot {
+    totalPresenters: number;
+    totalStores: number;
+    totalProviders: number;
+    instantiatedProviders: number;
+    totalStateEntries: number;
+    totalStateSizeBytes: number;
+    providerCacheEntries: number;
+    providerCacheSizeBytes: number;
+}
+export interface DevToolsInspectorSnapshot {
+    presenters: DevToolsProviderSnapshot[];
+    stores: DevToolsProviderSnapshot[];
+    info: DevToolsInfoSnapshot;
+}
+export interface DevToolsKeyCheckResult {
+    ok: boolean;
+    providerKeysChecked: number;
+    duplicateAttempts: Array<{
+        key: string;
+        attemptedKind: ProviderKind;
+        existingKind: ProviderKind;
+        at: number;
+    }>;
+}
+export interface EdgesDevtoolsWindowApi {
+    version: string;
+    visualizeState: () => void;
+    clearCache: () => void;
+    getStats: () => {
+        totalStores: number;
+        totalSize: string;
+        storeSizes: Record<string, number>;
+    } | null;
+    getInspectorData: () => DevToolsInspectorSnapshot;
+    checkKeyUniqueness: () => DevToolsKeyCheckResult;
+}
 export declare const DevTools: {
-    validateFactoryUniqueness(factory: UnknownFunc, key: string): void;
     getSize(value: unknown): number;
     warnOnLargeState(key: string, value: unknown): void;
     checkStateMutation(key: string, oldValue: unknown, newValue: unknown): void;
     measurePerformance<T>(name: string, fn: () => T): T;
     visualizeStateTree(stateMap: Map<string, unknown>): void;
+    getInspectorData(): DevToolsInspectorSnapshot;
+    checkKeyUniqueness(): DevToolsKeyCheckResult;
 };
+declare global {
+    interface Window {
+        __SAFE_SSR_STATE__?: Map<string, unknown>;
+        __EDGES_DEVTOOLS__?: Record<string, unknown>;
+        __EDGES_DEVTOOLS_UI_MOUNTED__?: boolean;
+    }
+}

package/dist/utils/dev.js

@@ -1,31 +1,133 @@
-import { browser, dev } from './environment.js';
-const seenFactories = new WeakSet();
+import { BROWSER, DEV } from '@azure-net/tools/environment';
+import { getProviderDevSnapshot, getProviderDuplicateAttempts } from '../provider/Utils.js';
 const largeStateWarnings = new Set();
 const sizeCache = new WeakMap();
-export const DevTools = {
-    validateFactoryUniqueness(factory, key) {
-        if (!dev)
-            return;
-        if (seenFactories.has(factory)) {
-            console.warn(`[edges-svelte] Factory collision detected for key "${key}". ` +
-                `This might cause unexpected behavior.` +
-                `Set a unique __storeKey__ property on your factory function.`);
+const safeJsonLength = (value) => {
+    const serialized = JSON.stringify(value);
+    return serialized ? serialized.length : 0;
+};
+const parseStateKey = (fullKey) => {
+    const stateSeparator = '::state::';
+    const rawStateSeparator = '::rawstate::';
+    const stateIdx = fullKey.lastIndexOf(stateSeparator);
+    if (stateIdx !== -1) {
+        const providerKey = fullKey.slice(0, stateIdx);
+        const indexRaw = fullKey.slice(stateIdx + stateSeparator.length);
+        const index = Number(indexRaw);
+        return { providerKey, slot: 'state', index: Number.isFinite(index) ? index : null };
+    }
+    const rawStateIdx = fullKey.lastIndexOf(rawStateSeparator);
+    if (rawStateIdx !== -1) {
+        const providerKey = fullKey.slice(0, rawStateIdx);
+        const indexRaw = fullKey.slice(rawStateIdx + rawStateSeparator.length);
+        const index = Number(indexRaw);
+        return { providerKey, slot: 'rawstate', index: Number.isFinite(index) ? index : null };
+    }
+    return { providerKey: fullKey, slot: 'unknown', index: null };
+};
+const previewValue = (value) => {
+    if (typeof value === 'string') {
+        return value.length > 160 ? `${value.slice(0, 157)}...` : value;
+    }
+    if (typeof value === 'bigint') {
+        return `${value.toString()}n`;
+    }
+    if (typeof value === 'function') {
+        return '[Function]';
+    }
+    if (typeof value === 'symbol') {
+        return value.toString();
+    }
+    try {
+        const serialized = JSON.stringify(value);
+        if (!serialized)
+            return String(value);
+        return serialized.length > 160 ? `${serialized.slice(0, 157)}...` : serialized;
+    }
+    catch {
+        return Object.prototype.toString.call(value);
+    }
+};
+const getStoreStateEntries = (stateMap) => {
+    const grouped = new Map();
+    for (const [fullKey, value] of stateMap) {
+        const parsed = parseStateKey(fullKey);
+        const entry = {
+            fullKey,
+            slot: parsed.slot,
+            index: parsed.index,
+            sizeBytes: DevTools.getSize(value),
+            valuePreview: previewValue(value)
+        };
+        const existing = grouped.get(parsed.providerKey);
+        if (existing) {
+            existing.push(entry);
         }
-        seenFactories.add(factory);
-    },
+        else {
+            grouped.set(parsed.providerKey, [entry]);
+        }
+    }
+    for (const entries of grouped.values()) {
+        entries.sort((a, b) => {
+            if (a.slot !== b.slot)
+                return a.slot.localeCompare(b.slot);
+            if (a.index === null && b.index === null)
+                return a.fullKey.localeCompare(b.fullKey);
+            if (a.index === null)
+                return 1;
+            if (b.index === null)
+                return -1;
+            return a.index - b.index;
+        });
+    }
+    return grouped;
+};
+const buildProviderSnapshot = (def, runtime, stateEntries) => {
+    const states = stateEntries.get(def.key) ?? [];
+    const stateSizeBytes = states.reduce((sum, entry) => sum + entry.sizeBytes, 0);
+    return {
+        key: def.key,
+        kind: def.kind,
+        factoryName: def.factoryName,
+        named: def.named,
+        registeredAt: def.registeredAt,
+        instantiated: runtime?.instantiated ?? false,
+        hits: runtime?.hits ?? 0,
+        lastAccessedAt: runtime?.lastAccessedAt ?? null,
+        instanceSizeBytes: runtime?.instanceSizeBytes ?? 0,
+        stateCount: states.length,
+        stateSizeBytes,
+        states
+    };
+};
+const emptyInspectorSnapshot = () => ({
+    presenters: [],
+    stores: [],
+    info: {
+        totalPresenters: 0,
+        totalStores: 0,
+        totalProviders: 0,
+        instantiatedProviders: 0,
+        totalStateEntries: 0,
+        totalStateSizeBytes: 0,
+        providerCacheEntries: 0,
+        providerCacheSizeBytes: 0
+    }
+});
+export const DevTools = {
     getSize(value) {
         if (typeof value === 'object' && value !== null) {
             if (sizeCache.has(value)) {
                 return sizeCache.get(value);
             }
-            const size = JSON.stringify(value).length;
+            const size = safeJsonLength(value);
             sizeCache.set(value, size);
             return size;
         }
-        return JSON.stringify(value).length;
+        return safeJsonLength(value);
     },
     warnOnLargeState(key, value) {
-        if (!dev)
+        if (!DEV)
             return;
         if (largeStateWarnings.has(key))
             return;
@@ -41,7 +143,7 @@ export const DevTools = {
         }
     },
     checkStateMutation(key, oldValue, newValue) {
-        if (!dev || !browser)
+        if (!DEV || !BROWSER)
             return;
         if (typeof oldValue === 'object' && oldValue !== null && oldValue === newValue && !Array.isArray(oldValue)) {
             console.error(`[edges-svelte] Direct mutation detected for key "${key}". ` +
@@ -49,7 +151,7 @@ export const DevTools = {
         }
     },
     measurePerformance(name, fn) {
-        if (!dev)
+        if (!DEV)
             return fn();
         const start = performance.now();
         const result = fn();
@@ -60,7 +162,7 @@ export const DevTools = {
         return result;
     },
     visualizeStateTree(stateMap) {
-        if (!dev || !browser)
+        if (!DEV || !BROWSER)
             return;
         const tree = {};
         for (const [key, value] of stateMap) {
@@ -77,11 +179,70 @@ export const DevTools = {
         console.groupCollapsed('[edges-svelte] State Tree');
         console.dir(tree, { depth: null });
         console.groupEnd();
+    },
+    getInspectorData() {
+        if (!BROWSER)
+            return emptyInspectorSnapshot();
+        const stateMap = window.__SAFE_SSR_STATE__ ?? new Map();
+        const groupedStateEntries = getStoreStateEntries(stateMap);
+        const providerSnapshot = getProviderDevSnapshot();
+        const runtimeByKey = new Map(providerSnapshot.runtimes.map((runtime) => [runtime.key, runtime]));
+        const providerDefinitionKeys = new Set(providerSnapshot.definitions.map((def) => def.key));
+        const snapshots = [];
+        for (const def of providerSnapshot.definitions) {
+            snapshots.push(buildProviderSnapshot(def, runtimeByKey.get(def.key), groupedStateEntries));
+        }
+        for (const [providerKey, states] of groupedStateEntries) {
+            if (providerDefinitionKeys.has(providerKey))
+                continue;
+            snapshots.push({
+                key: providerKey,
+                kind: 'store',
+                factoryName: '(state-only)',
+                named: false,
+                registeredAt: 0,
+                instantiated: false,
+                hits: 0,
+                lastAccessedAt: null,
+                instanceSizeBytes: 0,
+                stateCount: states.length,
+                stateSizeBytes: states.reduce((sum, entry) => sum + entry.sizeBytes, 0),
+                states
+            });
+        }
+        snapshots.sort((a, b) => a.key.localeCompare(b.key));
+        const presenters = snapshots.filter((entry) => entry.kind === 'presenter');
+        const stores = snapshots.filter((entry) => entry.kind === 'store');
+        const totalStateSizeBytes = stores.reduce((sum, store) => sum + store.stateSizeBytes, 0);
+        const totalStateEntries = stores.reduce((sum, store) => sum + store.stateCount, 0);
+        const instantiatedProviders = snapshots.filter((entry) => entry.instantiated).length;
+        return {
+            presenters,
+            stores,
+            info: {
+                totalPresenters: presenters.length,
+                totalStores: stores.length,
+                totalProviders: snapshots.length,
+                instantiatedProviders,
+                totalStateEntries,
+                totalStateSizeBytes,
+                providerCacheEntries: providerSnapshot.providerCacheEntries,
+                providerCacheSizeBytes: providerSnapshot.providerCacheSizeBytes
+            }
+        };
+    },
+    checkKeyUniqueness() {
+        const duplicateAttempts = getProviderDuplicateAttempts();
+        return {
+            ok: duplicateAttempts.length === 0,
+            providerKeysChecked: getProviderDevSnapshot().definitions.length,
+            duplicateAttempts
+        };
     }
 };
-if (browser && dev) {
-    window.__EDGES_DEVTOOLS__ = {
-        version: '1.3.0',
+if (BROWSER && DEV) {
+    const api = {
+        version: '1.4.0',
         visualizeState: () => {
             const stateMap = window.__SAFE_SSR_STATE__;
             if (stateMap) {
@@ -113,7 +274,28 @@ if (browser && dev) {
                 totalSize: `${Math.round(totalSize / 1024)}KB`,
                 storeSizes: sizes
             };
-        }
+        },
+        getInspectorData: () => DevTools.getInspectorData(),
+        checkKeyUniqueness: () => DevTools.checkKeyUniqueness()
     };
+    window.__EDGES_DEVTOOLS__ = api;
+    if (!window.__EDGES_DEVTOOLS_UI_MOUNTED__) {
+        window.__EDGES_DEVTOOLS_UI_MOUNTED__ = true;
+        void Promise.all([import('svelte'), import('./DevTools.svelte')])
+            .then(([svelte, module]) => {
+            const target = document.body || document.documentElement;
+            const host = document.createElement('div');
+            host.setAttribute('data-edges-devtools-ui', '1');
+            target.appendChild(host);
+            svelte.mount(module.default, { target: host });
+            window.addEventListener('beforeunload', () => {
+                host.remove();
+                window.__EDGES_DEVTOOLS_UI_MOUNTED__ = false;
+            }, { once: true });
+        })
+            .catch(() => {
+            window.__EDGES_DEVTOOLS_UI_MOUNTED__ = false;
+        });
+    }
     console.log('%c[edges-svelte] DevTools enabled. Use window.__EDGES_DEVTOOLS__ for debugging.', 'color: #00bcd4; font-weight: bold');
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "edges-svelte",
-  "version": "3.0.3",
+  "version": "3.1.0",
   "license": "MIT",
   "author": "Pixel1917",
   "description": "A blazing-fast, extremely lightweight and SSR-friendly store for Svelte",
@@ -53,44 +53,46 @@
     "./dev": {
       "types": "./dist/utils/dev.d.ts",
       "default": "./dist/utils/dev.js"
+    },
+    "./dev-component": {
+      "types": "./dist/utils/DevTools.svelte.d.ts",
+      "default": "./dist/utils/DevTools.svelte"
     }
   },
   "peerDependencies": {
-    "svelte": "^5.0.0",
-    "@sveltejs/kit": "^2.16.0"
+    "@sveltejs/kit": "2.57.1",
+    "svelte": "5.53.5"
   },
   "devDependencies": {
-    "@eslint/compat": "^1.2.5",
-    "@eslint/js": "^9.18.0",
-    "@playwright/test": "^1.49.1",
-    "@sveltejs/adapter-auto": "^6.0.0",
-    "@sveltejs/kit": "^2.16.0",
-    "@sveltejs/package": "^2.0.0",
-    "@sveltejs/vite-plugin-svelte": "^5.0.0",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/svelte": "^5.2.4",
-    "@types/node": "^22.15.23",
-    "eslint": "^9.18.0",
-    "eslint-config-prettier": "^10.0.1",
-    "eslint-plugin-svelte": "^3.0.0",
-    "globals": "^16.0.0",
-    "jsdom": "^26.0.0",
-    "prettier": "^3.4.2",
-    "prettier-plugin-svelte": "^3.3.3",
-    "publint": "^0.3.2",
-    "svelte": "^5.0.0",
-    "svelte-check": "^4.0.0",
-    "typescript": "^5.0.0",
-    "typescript-eslint": "^8.20.0",
-    "vite": "^6.2.6",
-    "vitest": "^3.0.0",
-    "semantic-release": "^24.2.3",
-    "husky": "^9.1.7",
-    "git-cz": "^4.9.0",
+    "@commitlint/cli": "^20.5.0",
+    "@eslint/compat": "^2.0.5",
+    "@eslint/js": "^10.0.1",
+    "@playwright/test": "^1.59.1",
+    "@sveltejs/adapter-auto": "^7.0.1",
+    "@sveltejs/kit": "2.57.1",
+    "@sveltejs/package": "^2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^7.0.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/svelte": "^5.3.1",
+    "@types/node": "^25.6.0",
     "commitizen": "^4.3.1",
-    "env-cmd": "^10.1.0",
-    "@semantic-release/git": "^10.0.1",
-    "@commitlint/cli": "^19.7.1"
+    "env-cmd": "^11.0.0",
+    "eslint": "^10.2.1",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-svelte": "^3.17.0",
+    "git-cz": "^4.9.0",
+    "globals": "^17.5.0",
+    "husky": "^9.1.7",
+    "jsdom": "^29.0.2",
+    "prettier": "^3.8.3",
+    "prettier-plugin-svelte": "^3.5.1",
+    "publint": "^0.3.18",
+    "svelte": "^5.53.5",
+    "svelte-check": "^4.4.6",
+    "typescript": "^5.0.0",
+    "typescript-eslint": "^8.58.2",
+    "vite": "^8.0.5",
+    "vitest": "^4.1.4"
   },
   "config": {
     "commitizen": {
@@ -107,6 +109,9 @@
     "state management",
     "ssr store"
   ],
+  "dependencies": {
+    "@azure-net/tools": "^1.1.3"
+  },
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run prepack",

package/dist/utils/environment.d.ts

@@ -1,3 +0,0 @@
-export declare const browser: boolean;
-export declare const dev: boolean;
-export declare const build: boolean;

package/dist/utils/environment.js

@@ -1,3 +0,0 @@
-export const browser = !import.meta.env.SSR && typeof window !== 'undefined' && typeof document !== 'undefined';
-export const dev = import.meta.env.DEV;
-export const build = import.meta.env.PROD;