@joycostudio/studio 0.1.6 → 0.2.1

package/dist/cli.js

@@ -14,6 +14,29 @@ var DEFAULT_PORT = 5179;
 import { watch } from "fs";
 import path2 from "path";
 
+// src/core/diff.ts
+function diff(before, after, path9 = []) {
+  const nested = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+  if (nested(before) && nested(after)) {
+    const keys = /* @__PURE__ */ new Set([...Object.keys(before), ...Object.keys(after)]);
+    return [...keys].flatMap((key) => diff(before[key], after[key], [...path9, key]));
+  }
+  return JSON.stringify(before) === JSON.stringify(after) ? [] : [{ path: path9, before, after }];
+}
+var define = (target, key, value) => Object.defineProperty(target, key, { value, writable: true, enumerable: true, configurable: true });
+function writePath(target, path9, value) {
+  const key = path9.at(-1);
+  let parent = target;
+  for (const segment of path9.slice(0, -1)) {
+    const next = Object.hasOwn(parent, segment) ? parent[segment] : void 0;
+    if (typeof next !== "object" || next === null) define(parent, segment, {});
+    parent = parent[segment];
+  }
+  if (value === void 0) {
+    if (Object.hasOwn(parent, key)) delete parent[key];
+  } else define(parent, key, structuredClone(value));
+}
+
 // src/core/result.ts
 var success = (data) => ({ ok: true, data });
 var error = (code, message) => ({
@@ -50,9 +73,9 @@ function shapeMismatch(reference, value, path9) {
   if (expected === "object") {
     const ref = reference;
     const obj = value;
-    for (const key of Object.keys(obj)) if (!(key in ref)) return `${path9}.${key}: unknown key`;
+    for (const key of Object.keys(obj)) if (!Object.hasOwn(ref, key)) return `${path9}.${key}: unknown key`;
     for (const key of Object.keys(ref)) {
-      if (!(key in obj)) return `${path9}.${key}: missing`;
+      if (!Object.hasOwn(obj, key)) return `${path9}.${key}: missing`;
       const nested = shapeMismatch(ref[key], obj[key], `${path9}.${key}`);
       if (nested) return nested;
     }
@@ -143,6 +166,28 @@ var equal = (a, b) => {
   const keys = Object.keys(a);
   return keys.length === Object.keys(b).length && keys.every((key) => equal(a[key], b[key]));
 };
+function rebase(tool2, old, saved) {
+  const changes = diff(old.saved.value, old.draft.value);
+  const apply = (base, edits) => {
+    const candidate = structuredClone(base);
+    try {
+      for (const { path: path9, after } of edits) writePath(candidate, path9, after);
+    } catch (cause) {
+      return error("invalid_config", cause instanceof Error ? cause.message : String(cause));
+    }
+    return validateConfig(tool2, candidate);
+  };
+  const all = apply(saved, changes);
+  if (all.ok) return { value: all.data, dropped: [] };
+  let value = saved;
+  const dropped = [];
+  for (const change of changes) {
+    const parsed = apply(value, [change]);
+    if (parsed.ok) value = parsed.data;
+    else dropped.push(change.path.join("."));
+  }
+  return { value, dropped };
+}
 async function load(tool2, file) {
   const disk = await readDisk(file);
   if (!disk) return { value: structuredClone(tool2.initial), hash: null };
@@ -302,24 +347,22 @@ async function createRuntime({ root, tools }) {
       const prepared = await prepare(root, nextTools);
       for (const [id, old] of entries) {
         const next = prepared.entries.get(id);
-        if ((!next || next.file !== old.file) && old.state.dirty)
-          throw new Error(`Save or discard "${id}" before removing it or moving its config.`);
-        if (!next || next.file !== old.file) continue;
-        const parsed = validateConfig(next.tool, old.state.draft.value);
-        if (!parsed.ok && old.state.dirty)
-          throw new Error(
-            `Draft for "${id}" is incompatible with the new controls; save/discard it first: ${parsed.message}`
-          );
-        if (parsed.ok && old.state.dirty) {
-          next.state = {
-            ...old.state,
-            saved: next.state.saved,
-            conflict: old.state.conflict || next.state.saved.hash !== old.state.saved.hash,
-            draft: { value: parsed.data, revision: old.state.draft.revision + 1 }
-          };
-        } else {
-          next.state.draft.revision = old.state.draft.revision + 1;
+        if (!next || next.file !== old.file) {
+          if (old.state.dirty)
+            console.warn(`[studio] dropped unsaved "${id}" edits: the tool was removed or its config moved`);
+          continue;
         }
+        next.state.draft.revision = old.state.draft.revision + 1;
+        if (!old.state.dirty) continue;
+        const { value, dropped } = rebase(next.tool, old.state, next.state.saved.value);
+        if (dropped.length)
+          console.warn(`[studio] dropped unsaved "${id}" edits that no longer fit its controls: ${dropped.join(", ")}`);
+        next.state = {
+          ...old.state,
+          saved: next.state.saved,
+          conflict: old.state.conflict || next.state.saved.hash !== old.state.saved.hash,
+          draft: { value, revision: next.state.draft.revision }
+        };
       }
       entries = prepared.entries;
       ids = prepared.ids;
@@ -970,7 +1013,7 @@ import { parseArgs } from "util";
 // package.json
 var package_default = {
   name: "@joycostudio/studio",
-  version: "0.1.6",
+  version: "0.2.1",
   description: "Plug project-specific tools into a /studio route, a floating debug pane, and MCP agents.",
   type: "module",
   license: "ISC",
@@ -1017,6 +1060,10 @@ var package_default = {
       types: "./dist/controls.d.ts",
       default: "./dist/controls.js"
     },
+    "./ui": {
+      types: "./dist/ui.d.ts",
+      default: "./dist/ui.js"
+    },
     "./next/config": {
       types: "./dist/next-config.d.ts",
       default: "./dist/next-config.js"
@@ -1026,7 +1073,7 @@ var package_default = {
     build: "pnpm build:shadow-css && tsup && tailwindcss -i src/react/styles.css -o dist/styles.css --minify && cp src/react/command-menu-export.css dist/command-menu.css",
     dev: 'pnpm build:shadow-css && pnpm run --parallel "/^dev:/"',
     test: "vitest run",
-    "test:browser": "STUDIO_TEST_BROWSER=1 vitest run test/browser-sync.test.ts",
+    "test:browser": "STUDIO_TEST_BROWSER=1 vitest run test/browser-sync.test.ts test/ui.test.ts",
     "test:capture": "STUDIO_TEST_CAPTURE=1 vitest run test/capture.test.ts",
     typecheck: "tsc --noEmit",
     "dev:js": "tsup --watch",
@@ -1053,7 +1100,8 @@ var package_default = {
     typescript: "^5.9.3"
   },
   peerDependencies: {
-    "@joycostudio/xyz": "^1.4.0",
+    "@joycostudio/xyz": "^1.5.0",
+    dialkit: "^2.2.0",
     react: ">=18",
     "react-dom": ">=18",
     tweakpane: "^4.0.5"
@@ -1067,10 +1115,13 @@ var package_default = {
     },
     "react-dom": {
       optional: true
+    },
+    dialkit: {
+      optional: true
     }
   },
   devDependencies: {
-    "@joycostudio/xyz": "^1.4.0",
+    "@joycostudio/xyz": "^1.5.0",
     "@modelcontextprotocol/client": "^2.3.1",
     "@tailwindcss/cli": "^4.3.3",
     "@tweakpane/core": "^2.0.5",
@@ -1078,6 +1129,7 @@ var package_default = {
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
     "@types/ws": "^8.18.2",
+    dialkit: "^2.2.0",
     react: "^19.3.0",
     "react-dom": "^19.3.0",
     tailwindcss: "^4.3.3",
@@ -1138,9 +1190,11 @@ async function init(argv) {
   const { positionals, values } = parseArgs({
     args: argv,
     allowPositionals: true,
-    options: { "no-install": { type: "boolean" } }
+    options: { "no-install": { type: "boolean" }, ui: { type: "string", default: "tweakpane" } }
   });
-  if (positionals.length > 1) throw new Error("Usage: studio init [directory] [--no-install]");
+  if (positionals.length > 1) throw new Error("Usage: studio init [directory] [--ui tweakpane|dialkit] [--no-install]");
+  const ui = values.ui;
+  if (ui !== "tweakpane" && ui !== "dialkit") throw new Error(`[studio] --ui must be tweakpane or dialkit, got ${ui}.`);
   const root = path6.resolve(positionals[0] ?? ".");
   const manifest = path6.join(root, "package.json");
   const pkg = JSON.parse(readFileSync3(manifest, "utf8"));
@@ -1161,10 +1215,17 @@ async function init(argv) {
   const page = `${app}/studio/page.tsx`;
   const preview = `${app}/studio-preview/page.tsx`;
   const files = {
-    [client]: `import { createStudio } from '@joycostudio/studio/next'
+    [client]: ui === "dialkit" ? `import 'dialkit/vanilla/styles.css'
+import { createStudio } from '@joycostudio/studio/next'
+import { dialkit } from '@joycostudio/studio/ui'
+import { tools } from '${relative(client, ".studio/registry.generated")}'
+
+export const studio = createStudio({ tools, ui: dialkit(() => import('dialkit/vanilla')) })
+` : `import { createStudio } from '@joycostudio/studio/next'
+import { tweakpane } from '@joycostudio/studio/ui'
 import { tools } from '${relative(client, ".studio/registry.generated")}'
 
-export const studio = createStudio({ tools })
+export const studio = createStudio({ tools, ui: tweakpane(() => import('tweakpane')) })
 `,
     [data]: '{ "scale": 1 }\n',
     [tool2]: `import { defineTool } from '@joycostudio/studio'
@@ -1251,7 +1312,8 @@ export default function StudioPreview() {
   if (pkg.dependencies?.["@joycostudio/studio"] || pkg.devDependencies?.["@joycostudio/studio"]) {
     try {
       const require2 = createRequire(manifest);
-      for (const entry of ["next", "next/config", "controls", "react"]) require2.resolve(`@joycostudio/studio/${entry}`);
+      for (const entry of ["next", "next/config", "controls", "react", "ui"])
+        require2.resolve(`@joycostudio/studio/${entry}`);
     } catch {
       throw new Error(
         "[studio] The declared Studio dependency is missing or lacks the required exports. Install the same version (or preview) as this initializer, then rerun init. No files were changed."
@@ -1261,7 +1323,7 @@ export default function StudioPreview() {
   const dependencies = {
     "@joycostudio/studio": `^${package_default.version}`,
     "@joycostudio/xyz": package_default.peerDependencies["@joycostudio/xyz"],
-    tweakpane: package_default.peerDependencies.tweakpane
+    [ui]: package_default.peerDependencies[ui]
   };
   pkg.dependencies ??= {};
   for (const [name, version] of Object.entries(dependencies)) {
@@ -1436,7 +1498,7 @@ function watchDiscovery(initial, refresh) {
 var HELP = `Usage: studio dev [--config studio.config.ts] [--port ${DEFAULT_PORT}] [--app-url http://localhost:3000] [-- <command...>]
        studio generate [--config studio.config.ts]
        studio install-browser
-       studio init [directory] [--no-install]
+       studio init [directory] [--ui tweakpane|dialkit] [--no-install]
 
 Starts the Studio runtime with a WebSocket bridge and an HTTP MCP endpoint at /mcp,
 moving to the next free port when another project's Studio already uses it.
@@ -1499,27 +1561,20 @@ async function main(argv) {
     `[studio] runtime ready on ws://127.0.0.1:${bridge.port} \u2014 ${config.tools.length} tool(s) in ${path8.relative(process.cwd(), root) || "."}`
   );
   console.log(`[studio] MCP ready on http://127.0.0.1:${bridge.port}/mcp`);
-  let rejected = false;
   let accepted = discovery;
   const watcher = discovery && watchDiscovery(discovery, async () => {
+    const next = await loadConfig(process.cwd(), values.config, false, accepted);
     try {
-      const next = await loadConfig(process.cwd(), values.config, false, accepted);
       await runtime.replaceTools(next.config.tools);
-      await next.discovery?.write();
-      accepted = next.discovery;
-      rejected = false;
-      return next.discovery;
     } catch (cause) {
-      rejected = true;
-      throw cause;
+      throw new DiscoveryInputError(cause, next.discovery?.dependencies ?? /* @__PURE__ */ new Set());
     }
-  });
-  const unsubscribe = runtime.subscribe((state) => {
-    if (rejected && !state.dirty) watcher?.retry();
+    await next.discovery?.write();
+    accepted = next.discovery;
+    return next.discovery;
   });
   const shutdown = async (code = 0) => {
     watcher?.close();
-    unsubscribe();
     runtime.close();
     await bridge.close();
     process.exit(code);