Add open-props and test presets

Author: TrySound

package.json

@@ -46,6 +46,7 @@
     "json-stringify-pretty-compact": "^4.0.0",
     "keyux": "^0.11.3",
     "nano-staged": "^0.9.0",
+    "open-props": "^1.7.23",
     "prettier": "^3.8.0",
     "prettier-plugin-svelte": "^3.4.1",
     "prismjs": "^1.30.0",

pnpm-lock.yaml

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { Menu, X } from "@lucide/svelte";
-  import NewProject from "./new-project.svelte";
   import ExportDialog from "./export-dialog.svelte";
 
   const shareUrl = () => {
@@ -64,8 +63,6 @@
   </button>
 </div>
 
-<NewProject />
-
 <ExportDialog />
 
 <dialog id="app-menu-about" class="about-dialog" closedby="any">

src/app-menu.svelte

@@ -55,6 +55,7 @@
   } from "./state.svelte";
   import { serializeColor } from "./color";
   import type { Value } from "./schema";
+  import NewProject from "./new-project.svelte";
 
   let appElement: undefined | HTMLDivElement;
   const zeroIndex = generateKeyBetween(null, null);
@@ -84,7 +85,8 @@
   };
 
   const treeData = $derived(rootNodes.map(buildTreeItem));
-  const defaultExpandedItems = $derived(
+  const expandedItems = new SvelteSet(
+    // svelte-ignore state_referenced_locally
     rootNodes.length ? [rootNodes[0].nodeId] : [],
   );
 
@@ -308,6 +310,16 @@
   };
 </script>
 
+<NewProject
+  onCreate={() => {
+    const [firstRoot] = treeState.getChildren(undefined);
+    expandedItems.clear();
+    expandedItems.add(firstRoot.nodeId);
+    selectedItems.clear();
+    selectedItems.add(firstRoot.nodeId);
+  }}
+/>
+
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
   class="app"
@@ -462,7 +474,7 @@
           label="Design Tokens"
           data={treeData}
           {selectedItems}
-          {defaultExpandedItems}
+          {expandedItems}
           renderItem={renderTreeItem}
           onRenameItem={(itemId, newName) => {
             const node = treeState.getNode(itemId);

src/app.svelte

@@ -5,14 +5,13 @@ import App from "./app.svelte";
 import "./app.css";
 import { parseDesignTokens } from "./tokens";
 import { treeState, type SetMeta } from "./state.svelte";
-import designTokens from "./design-tokens-example.tokens.json";
 import { getDataFromUrl } from "./url-data";
 import type { TreeNode } from "./store";
 import { isResolverFormat, parseTokenResolver } from "./resolver";
 
 // Get design tokens from URL or use example
 const urlData = await getDataFromUrl();
-const tokensData = urlData ?? designTokens;
+const tokensData = urlData;
 
 // Parse design tokens and populate state
 let parsedResult: undefined | ReturnType<typeof parseTokenResolver>;