Move url sync out of app

Author: TrySound

src/main.ts

@@ -1,14 +1,19 @@
 import { generateKeyBetween } from "fractional-indexing";
 import { mount } from "svelte";
 import "prismjs/themes/prism-tomorrow.min.css";
-import App from "./app.svelte";
 import "./app.css";
+import App from "./app.svelte";
 import { parseDesignTokens } from "./tokens";
+import {
+  isResolverFormat,
+  parseTokenResolver,
+  serializeTokenResolver,
+} from "./resolver";
+import { setDataInUrl, getDataFromUrl } from "./url-data";
 import { treeState, type SetMeta } from "./state.svelte";
-import { getDataFromUrl } from "./url-data";
 import type { TreeNode } from "./store";
-import { isResolverFormat, parseTokenResolver } from "./resolver";
 import type { Preset } from "./new-project.svelte";
+import type { TreeNodeMeta } from "./state.svelte";
 
 const presets: Preset[] = [
   {
@@ -96,7 +101,21 @@ if (parsedResult.errors.length > 0) {
 
 console.info(`Loaded design tokens: ${parsedResult.nodes.length} nodes`);
 
-// Enable URL sync after initial load
-treeState.enableUrlSync();
+// Set up debounced URL sync after initial load
+const URL_SYNC_DEBOUNCE_MS = 300;
+let urlUpdateTimeout: ReturnType<typeof setTimeout> | undefined;
+
+treeState.subscribe(() => {
+  if (urlUpdateTimeout) {
+    clearTimeout(urlUpdateTimeout);
+  }
+  urlUpdateTimeout = setTimeout(() => {
+    const allNodes = treeState.nodes() as Map<string, TreeNode<TreeNodeMeta>>;
+    const serialized = serializeTokenResolver(allNodes);
+    setDataInUrl(serialized).catch((error: unknown) => {
+      console.error("Failed to sync design tokens to URL:", error);
+    });
+  }, URL_SYNC_DEBOUNCE_MS);
+});
 
 mount(App, { target: document.body, props: { presets } });

src/state.svelte.ts

@@ -9,8 +9,6 @@ import {
   RawValueSchema,
   isNodeRef,
 } from "./schema";
-import { setDataInUrl } from "./url-data";
-import { serializeTokenResolver } from "./resolver";
 
 export type SetMeta = {
   nodeType: "token-set";
@@ -334,30 +332,17 @@ export type TreeNodeMeta = GroupMeta | TokenMeta | SetMeta;
 export class TreeState<Meta> {
   #store = new TreeStore<Meta>();
   #subscribe = createSubscriber((update) => this.#store.subscribe(update));
-  #syncToUrl: boolean = false;
 
   get store() {
     return this.#store;
   }
 
   transact(callback: (tx: Transaction<Meta>) => void): void {
     this.#store.transact(callback);
-    // Sync to URL after transaction completes
-    if (this.#syncToUrl) {
-      this.#updateUrl();
-    }
-  }
-
-  enableUrlSync(): void {
-    this.#syncToUrl = true;
   }
 
-  #updateUrl(): void {
-    const allNodes = this.#store.nodes() as Map<string, TreeNode<TreeNodeMeta>>;
-    const serialized = serializeTokenResolver(allNodes);
-    setDataInUrl(serialized).catch((error) => {
-      console.error("Failed to sync design tokens to URL:", error);
-    });
+  subscribe(callback: () => void): () => void {
+    return this.#store.subscribe(callback);
   }
 
   values(): TreeNode<Meta>[] {