@joycostudio/studio 0.1.1 → 0.1.2

package/dist/client.js

@@ -4,7 +4,23 @@ import {
 } from "./chunk-X4YLM5HA.js";
 
 // src/client/studio.ts
-import { button } from "@joycostudio/xyz/debug";
+import {
+  button,
+  schemaValues
+} from "@joycostudio/xyz/debug";
+
+// src/core/diff.ts
+function diff(before, after, path = []) {
+  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], [...path, key]));
+  }
+  return JSON.stringify(before) === JSON.stringify(after) ? [] : [{ path, before, after }];
+}
+function changedPaths(before, after) {
+  return diff(before, after).map(({ path }) => path.join("."));
+}
 
 // src/client/bridge.ts
 function connectBridge(url, handlers) {
@@ -99,6 +115,64 @@ function connectBrowserSync(definition, runtime, handlers) {
   };
 }
 
+// src/client/history.ts
+var LIMIT = 100;
+var MERGE_MS = 500;
+function createHistory() {
+  const past = [];
+  let future = [];
+  let open = null;
+  const step = (from, to, side) => {
+    const entry = from.pop();
+    if (!entry) return null;
+    to.push(entry);
+    open = null;
+    return entry.changes.map((change) => ({ path: change.path, value: change[side] }));
+  };
+  return {
+    get canUndo() {
+      return past.length > 0;
+    },
+    get canRedo() {
+      return future.length > 0;
+    },
+    /** Record the edit between two snapshots. `merge: false` keeps it a step of its own (e.g. Discard). */
+    record(before, after, { merge = true } = {}) {
+      const changes = structuredClone(diff(before, after));
+      if (!changes.length) return;
+      future = [];
+      const key = JSON.stringify(changes.map(({ path }) => path));
+      const now = Date.now();
+      if (merge && open && open.key === key && now - open.at < MERGE_MS) {
+        open.changes = open.changes.map((change, i) => ({ ...change, after: changes[i].after }));
+        open.at = now;
+        if (open.changes.every((change) => JSON.stringify(change.before) === JSON.stringify(change.after))) {
+          past.pop();
+          open = null;
+        }
+        return;
+      }
+      const entry = { changes, key, at: now };
+      past.push(entry);
+      if (past.length > LIMIT) past.shift();
+      open = merge ? entry : null;
+    },
+    /** The leaves to write back, or null when there is nothing to undo. */
+    undo: () => step(past, future, "before"),
+    redo: () => step(future, past, "after")
+  };
+}
+function writePath(target, path, value) {
+  const key = path.at(-1);
+  let parent = target;
+  for (const segment of path.slice(0, -1)) {
+    const next = parent[segment];
+    parent = typeof next === "object" && next !== null ? next : parent[segment] = {};
+  }
+  if (value === void 0) delete parent[key];
+  else parent[key] = structuredClone(value);
+}
+
 // src/client/live.ts
 function live(target, onWrite) {
   const proxies = /* @__PURE__ */ new WeakMap();
@@ -152,6 +226,23 @@ function liveSchema(schema) {
     })
   );
 }
+function resetSlidersOnDoubleClick(handle) {
+  return (folder, { fields }) => {
+    const sliders = fields().filter(({ field }) => field.kind === "slider");
+    const onDoubleClick = (event) => {
+      if (handle.comparing || event.target.closest("input")) return;
+      const slider = sliders.find(({ blade }) => blade.element.contains(event.target));
+      if (slider?.field.kind !== "slider") return;
+      const saved = slider.path.reduce(
+        (values, key) => values?.[key],
+        schemaValues(handle.definition.controls(structuredClone(handle.saved)))
+      );
+      if (typeof saved === "number") slider.field.write(saved);
+    };
+    folder.element.addEventListener("dblclick", onDoubleClick);
+    return () => folder.element.removeEventListener("dblclick", onDoubleClick);
+  };
+}
 function everyFrame(refresh) {
   let frame = requestAnimationFrame(function tick() {
     refresh();
@@ -176,9 +267,13 @@ function createStudio({ tools, runtime }) {
     let pushing = Promise.resolve();
     let scheduled = false;
     let stashed = null;
+    const history = createHistory();
+    let snapshot = structuredClone(raw);
     const changed = () => {
+      snapshot = structuredClone(raw);
       handle.version++;
       for (const listener of listeners) listener(handle.config);
+      touch();
     };
     const adopt = (state) => {
       handle.state = state;
@@ -209,28 +304,54 @@ function createStudio({ tools, runtime }) {
         }
       });
     };
+    const edited = () => {
+      changed();
+      if (!stashed) {
+        browserSync?.publish(raw);
+        push();
+      }
+    };
+    const restore = (patch) => {
+      if (!patch) return false;
+      for (const { path, value } of patch) writePath(raw, path, value);
+      edited();
+      return true;
+    };
     const handle = {
       definition,
       config: live(raw, () => {
-        changed();
-        if (!stashed) {
-          browserSync?.publish(raw);
-          push();
-        }
+        if (!stashed) history.record(snapshot, raw);
+        edited();
       }),
       state: null,
       version: 0,
+      get saved() {
+        return handle.state?.saved.value ?? definition.initial;
+      },
+      get changes() {
+        return changedPaths(handle.saved, stashed ?? raw);
+      },
+      get dirty() {
+        return handle.changes.length > 0;
+      },
       comparing: false,
       compare(showSaved) {
-        if (showSaved === handle.comparing || showSaved && !handle.state) return;
+        if (showSaved === handle.comparing) return;
         if (showSaved) stashed = structuredClone(raw);
-        const next = showSaved ? handle.state.saved.value : stashed;
+        const next = showSaved ? handle.saved : stashed;
         assignDeep(raw, next);
         if (!showSaved) stashed = null;
         handle.comparing = showSaved;
         changed();
-        touch();
       },
+      get canUndo() {
+        return history.canUndo;
+      },
+      get canRedo() {
+        return history.canRedo;
+      },
+      undo: () => !stashed && restore(history.undo()),
+      redo: () => !stashed && restore(history.redo()),
       subscribe(listener) {
         listeners.add(listener);
         return () => void listeners.delete(listener);
@@ -243,7 +364,8 @@ function createStudio({ tools, runtime }) {
         } : {};
         return {
           title: definition.title ?? definition.id,
-          schema: () => ({ ...liveSchema(handle.controls()), ...actions })
+          schema: () => ({ ...liveSchema(handle.controls()), ...actions }),
+          extend: resetSlidersOnDoubleClick(handle)
         };
       },
       async save({ force = false } = {}) {
@@ -258,8 +380,12 @@ function createStudio({ tools, runtime }) {
       async discard() {
         if (!bridge) return error("runtime_unavailable");
         await pushing;
+        const before = snapshot;
         const result = await bridge.request("tool.discard", { tool: definition.id });
-        if (result.ok) receive(result.data);
+        if (result.ok) {
+          receive(result.data);
+          if (!stashed) history.record(before, raw, { merge: false });
+        }
         return result;
       },
       receive,
@@ -269,8 +395,10 @@ function createStudio({ tools, runtime }) {
     const browserSync = connectBrowserSync(definition, runtime, {
       enabled: () => connection.phase !== "connected",
       receive(value) {
-        if (stashed) stashed = value;
-        else {
+        if (stashed) {
+          stashed = value;
+          touch();
+        } else {
           assignDeep(raw, value);
           changed();
         }

package/dist/client.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/client/studio.ts","../src/client/bridge.ts","../src/client/browser-sync.ts","../src/client/live.ts"],"sourcesContent":["import { button, type DebugField, type DebugFolder, type DebugSchema } from '@joycostudio/xyz/debug'\nimport type { ToolState } from '../core/protocol'\nimport { error, type Result } from '../core/result'\nimport type { AnyTool, ToolDefinition } from '../core/tool'\nimport { connectBridge, type BridgeClient, type Connection } from './bridge'\nimport { connectBrowserSync } from './browser-sync'\nimport { assignDeep, live } from './live'\n\nexport type ToolHandle<TConfig extends object = any> = {\n  readonly definition: ToolDefinition<TConfig>\n  /** The live config. Writes sync to same-origin pages and, when connected, the runtime. */\n  readonly config: TConfig\n  /** Runtime-owned state; null until the runtime answers (always null without one). */\n  readonly state: ToolState<TConfig> | null\n  /** Bumps on every config change. Handy as a React snapshot. */\n  readonly version: number\n  /** Called after every config change, local or remote. */\n  subscribe(listener: (config: TConfig) => void): () => void\n  /** The tool's Xyz schema bound to the live config. */\n  controls(): DebugSchema\n  /** Xyz `Debuggable`: `debugManager.register(handle)` mounts this tool in the app's floating pane. */\n  debug(): DebugFolder\n  /** True while `compare(true)` shows the saved config in place of the draft. */\n  readonly comparing: boolean\n  /**\n   * Temporarily show the saved config (true) or go back to the draft (false). Local only: nothing\n   * reaches the runtime, and edits made while comparing are dropped when it ends.\n   */\n  compare(showSaved: boolean): void\n  save(options?: { force?: boolean }): Promise<Result<ToolState<TConfig>>>\n  discard(): Promise<Result<ToolState<TConfig>>>\n}\n\nexport type Studio = {\n  readonly tools: readonly ToolHandle[]\n  tool<TConfig extends object>(definition: ToolDefinition<TConfig>): ToolHandle<TConfig>\n  readonly connection: Connection\n  /** Bumps on connection or any tool state change. */\n  readonly version: number\n  subscribe(listener: () => void): () => void\n  close(): void\n}\n\nexport type StudioOptions = {\n  tools: readonly AnyTool[]\n  /**\n   * Runtime bridge URL (e.g. `ws://127.0.0.1:5179`). Omit or pass false for browser-only syncing, as in production.\n   * Only browsers connect, so a module-scope `createStudio` is safe to evaluate during SSR.\n   */\n  runtime?: string | false\n}\n\nconst COMPARE_MESSAGE = 'joyco-studio:compare'\ntype CompareMessage = { type: typeof COMPARE_MESSAGE; tool: string; showSaved: boolean }\n\n/** Make the studio running in `target` (e.g. a preview iframe) compare `tool` as well. */\nexport function postCompare(target: Window | null | undefined, tool: string, showSaved: boolean) {\n  const message: CompareMessage = { type: COMPARE_MESSAGE, tool, showSaved }\n  target?.postMessage(message, location.origin)\n}\n\n/** Mark every value control live so a pane registered with `registerFrame` reflects remote edits. */\nfunction liveSchema(schema: DebugSchema): DebugSchema {\n  return Object.fromEntries(\n    Object.entries(schema).map(([key, field]): [string, DebugField] => {\n      if (field.kind === 'button') return [key, field]\n      if (field.kind === 'folder')\n        return [\n          key,\n          { ...field, definition: { ...field.definition, schema: () => liveSchema(field.definition.schema()) } },\n        ]\n      return [key, { ...field, live: true }]\n    }),\n  )\n}\n\n/** A `registerFrame` for Xyz's `DebugManager` / `bindDebugSchema`: refreshes live controls every animation frame. */\nexport function everyFrame(refresh: () => void) {\n  let frame = requestAnimationFrame(function tick() {\n    refresh()\n    frame = requestAnimationFrame(tick)\n  })\n  return () => cancelAnimationFrame(frame)\n}\n\n/** One studio per runtime URL (or local tool set) per page; replace HMR instances without leaking transports. */\nconst instances: Map<string, Studio> = ((globalThis as { __joycoStudio?: Map<string, Studio> }).__joycoStudio ??=\n  new Map())\n\nexport function createStudio({ tools, runtime }: StudioOptions): Studio {\n  const instanceKey = runtime || JSON.stringify(tools.map(({ id, file }) => [id, file]).sort())\n  let bridge: BridgeClient | null = null\n  let connection: Connection = { phase: runtime ? 'connecting' : 'local' }\n  let version = 0\n  const studioListeners = new Set<() => void>()\n  const touch = () => {\n    version++\n    for (const listener of studioListeners) listener()\n  }\n\n  const createHandle = <TConfig extends object>(definition: ToolDefinition<TConfig>) => {\n    const raw = structuredClone(definition.initial)\n    const listeners = new Set<(config: TConfig) => void>()\n    let pushing: Promise<unknown> = Promise.resolve()\n    let scheduled = false\n    /** The draft to restore while comparing; null when showing the draft. */\n    let stashed: TConfig | null = null\n\n    const changed = () => {\n      handle.version++\n      for (const listener of listeners) listener(handle.config)\n    }\n    const adopt = (state: ToolState) => {\n      handle.state = state as ToolState<TConfig>\n      touch()\n    }\n    const receive = (state: ToolState) => {\n      if (stashed) stashed = structuredClone(state.draft.value) as TConfig\n      else assignDeep(raw as Record<string, unknown>, state.draft.value as Record<string, unknown>)\n      adopt(state)\n      if (!stashed) changed()\n      browserSync?.publish(state.draft.value as TConfig)\n    }\n    const resync = async () => {\n      const result = await bridge?.request('tool.get', { tool: definition.id })\n      if (result?.ok) receive(result.data)\n    }\n    const push = () => {\n      if (scheduled || !bridge) return\n      scheduled = true\n      pushing = Promise.resolve().then(async () => {\n        scheduled = false\n        const result = await bridge?.request('tool.update', { tool: definition.id, value: raw })\n        if (!result) return\n        if (result.ok) adopt(result.data)\n        else if (result.error !== 'runtime_unavailable') {\n          console.warn(`[studio] ${definition.id}: ${result.message ?? result.error}`)\n          await resync()\n        }\n      })\n    }\n\n    const handle = {\n      definition,\n      config: live(raw, () => {\n        changed()\n        if (!stashed) {\n          browserSync?.publish(raw)\n          push()\n        }\n      }),\n      state: null as ToolState<TConfig> | null,\n      version: 0,\n      comparing: false,\n      compare(showSaved: boolean) {\n        if (showSaved === handle.comparing || (showSaved && !handle.state)) return\n        if (showSaved) stashed = structuredClone(raw)\n        const next = showSaved ? handle.state!.saved.value : stashed!\n        assignDeep(raw as Record<string, unknown>, next as Record<string, unknown>)\n        if (!showSaved) stashed = null\n        handle.comparing = showSaved\n        changed()\n        touch()\n      },\n      subscribe(listener: (config: TConfig) => void) {\n        listeners.add(listener)\n        return () => void listeners.delete(listener)\n      },\n      controls: () => definition.controls(handle.config),\n      debug(): DebugFolder {\n        const actions: DebugSchema = runtime\n          ? {\n              save: button('Save', () => handle.save().then(fail), 'Saved ✓'),\n              discard: button('Discard', () => handle.discard().then(fail), 'Discarded'),\n            }\n          : {}\n        return {\n          title: definition.title ?? definition.id,\n          schema: () => ({ ...liveSchema(handle.controls()), ...actions }),\n        }\n      },\n      async save({ force = false } = {}) {\n        if (!bridge) return error('runtime_unavailable')\n        await pushing\n        const revision = handle.state?.draft.revision\n        if (revision === undefined) return error('runtime_unavailable')\n        const result = await bridge.request('tool.save', { tool: definition.id, revision, force })\n        if (result.ok) adopt(result.data)\n        return result as Result<ToolState<TConfig>>\n      },\n      async discard() {\n        if (!bridge) return error('runtime_unavailable')\n        await pushing\n        const result = await bridge.request('tool.discard', { tool: definition.id })\n        if (result.ok) receive(result.data)\n        return result as Result<ToolState<TConfig>>\n      },\n      receive,\n      resync,\n      close: () => browserSync?.close(),\n    }\n    const browserSync = connectBrowserSync(definition, runtime, {\n      enabled: () => connection.phase !== 'connected',\n      receive(value) {\n        if (stashed) stashed = value\n        else {\n          assignDeep(raw as Record<string, unknown>, value as Record<string, unknown>)\n          changed()\n        }\n      },\n    })\n    return handle\n  }\n\n  const handles = new Map(tools.map((definition) => [definition.id, createHandle(definition)]))\n\n  // /studio asks its same-origin preview iframe to compare too (see `postCompare`).\n  const onMessage = (event: MessageEvent) => {\n    const message = event.data as CompareMessage | undefined\n    if (event.origin !== location.origin || message?.type !== COMPARE_MESSAGE) return\n    handles.get(message.tool)?.compare(message.showSaved)\n  }\n  if (typeof window !== 'undefined') window.addEventListener?.('message', onMessage)\n\n  if (runtime && typeof window !== 'undefined') {\n    bridge = connectBridge(runtime, {\n      state: (state) => handles.get(state.tool)?.receive(state),\n      connection(next) {\n        connection = next\n        touch()\n        if (next.phase === 'connected') for (const handle of handles.values()) void handle.resync()\n      },\n    })\n  }\n\n  const studio: Studio = {\n    tools: [...handles.values()],\n    tool<TConfig extends object>(definition: ToolDefinition<TConfig>) {\n      const handle = handles.get(definition.id)\n      if (!handle) throw new Error(`[studio] tool \"${definition.id}\" was not passed to createStudio`)\n      return handle as unknown as ToolHandle<TConfig>\n    },\n    get connection() {\n      return connection\n    },\n    get version() {\n      return version\n    },\n    subscribe(listener) {\n      studioListeners.add(listener)\n      return () => void studioListeners.delete(listener)\n    },\n    close() {\n      bridge?.close()\n      for (const handle of handles.values()) handle.close()\n      studioListeners.clear()\n      if (typeof window !== 'undefined') window.removeEventListener?.('message', onMessage)\n      if (instances.get(instanceKey) === studio) instances.delete(instanceKey)\n    },\n  }\n  if (typeof window !== 'undefined') {\n    instances.get(instanceKey)?.close()\n    instances.set(instanceKey, studio)\n  }\n  return studio\n}\n\nfunction fail(result: Result<unknown>) {\n  if (!result.ok) throw new Error(result.message ?? result.error)\n}\n","import type { Op, Operations, ServerMessage, ToolState } from '../core/protocol'\nimport { error, type Result } from '../core/result'\n\nexport type Connection = { phase: 'local' } | { phase: 'connecting' } | { phase: 'connected' } | { phase: 'offline' }\n\ntype Pending = (result: Result<unknown>) => void\n\n/** A reconnecting WebSocket to the Studio runtime with request/response correlation. */\nexport function connectBridge(\n  url: string,\n  handlers: { state: (state: ToolState) => void; connection: (connection: Connection) => void },\n) {\n  let socket: WebSocket | null = null\n  let nextId = 0\n  let retry = 0\n  let timer: ReturnType<typeof setTimeout> | undefined\n  let closed = false\n  const pending = new Map<number, Pending>()\n\n  const open = () => {\n    handlers.connection({ phase: 'connecting' })\n    const ws = new WebSocket(url)\n    socket = ws\n    ws.onopen = () => {\n      retry = 0\n      handlers.connection({ phase: 'connected' })\n    }\n    ws.onmessage = (event) => {\n      const message = JSON.parse(String(event.data)) as ServerMessage\n      if (message.type === 'state') return handlers.state(message.state)\n      pending.get(message.id)?.(message.result)\n      pending.delete(message.id)\n    }\n    ws.onclose = () => {\n      socket = null\n      for (const resolve of pending.values()) resolve(error('runtime_unavailable'))\n      pending.clear()\n      if (closed) return\n      handlers.connection({ phase: 'offline' })\n      timer = setTimeout(open, Math.min(500 * 2 ** retry++, 5000))\n    }\n  }\n  open()\n\n  return {\n    request<TOp extends Op>(op: TOp, params: Operations[TOp]['params']): Promise<Result<Operations[TOp]['result']>> {\n      if (socket?.readyState !== WebSocket.OPEN) return Promise.resolve(error('runtime_unavailable'))\n      const id = nextId++\n      socket.send(JSON.stringify({ id, op, params }))\n      return new Promise((resolve) => pending.set(id, resolve as Pending))\n    },\n    close() {\n      closed = true\n      clearTimeout(timer)\n      socket?.close()\n    },\n  }\n}\n\nexport type BridgeClient = ReturnType<typeof connectBridge>\n","import type { ToolDefinition } from '../core/tool'\nimport { validateConfig } from '../core/validate'\n\ntype Snapshot = { type: 'config'; clock: number; sender: string; value: unknown }\n\n/** Ephemeral config sharing between same-origin pages, including Studio's preview iframe. */\nexport function connectBrowserSync<T extends object>(\n  definition: ToolDefinition<T>,\n  runtime: string | false | undefined,\n  handlers: { enabled(): boolean; receive(value: T): void },\n) {\n  // Also exclude SSR and Node environments that expose their own BroadcastChannel implementation.\n  if (typeof window === 'undefined' || !window.location?.origin || !window.BroadcastChannel) return null\n\n  let channel: BroadcastChannel\n  try {\n    channel = new window.BroadcastChannel(\n      JSON.stringify(['joyco-studio:config', runtime || null, definition.id, definition.file]),\n    )\n  } catch {\n    return null\n  }\n  const sender = crypto.getRandomValues(new Uint32Array(4)).join('-')\n  let clock = 0\n  let latest: Snapshot | undefined\n  let closed = false\n\n  channel.onmessage = ({ data }) => {\n    if (closed || !data || typeof data !== 'object') return\n    if (data.type === 'request') {\n      if (latest) channel.postMessage(latest)\n      return\n    }\n    if (\n      data.type !== 'config' ||\n      !Number.isSafeInteger(data.clock) ||\n      data.clock < 1 ||\n      typeof data.sender !== 'string'\n    )\n      return\n    clock = Math.max(clock, data.clock)\n    if (!handlers.enabled()) return\n    // A stable tie-break keeps simultaneous edits and multiple snapshot replies from diverging.\n    if (latest && (data.clock < latest.clock || (data.clock === latest.clock && data.sender <= latest.sender))) return\n    const result = validateConfig(definition, data.value)\n    if (!result.ok) return\n    latest = { type: 'config', clock: data.clock, sender: data.sender, value: result.data }\n    handlers.receive(result.data)\n  }\n  // A newly mounted/reloaded preview asks existing peers for their current draft.\n  channel.postMessage({ type: 'request' })\n\n  return {\n    publish(value: T) {\n      if (closed) return\n      latest = { type: 'config', clock: ++clock, sender, value: structuredClone(value) }\n      channel.postMessage(latest)\n    },\n    close() {\n      closed = true\n      channel.onmessage = null\n      channel.close()\n    },\n  }\n}\n","/**\n * A deep proxy that reports every write, so plain `property(config, 'key')`\n * bindings from Xyz feed Studio without the tool author wiring callbacks.\n */\nexport function live<T extends object>(target: T, onWrite: () => void): T {\n  const proxies = new WeakMap<object, object>()\n  const wrap = <O extends object>(object: O): O => {\n    let proxy = proxies.get(object)\n    if (!proxy) {\n      proxy = new Proxy(object, {\n        get(target, key, receiver) {\n          const value = Reflect.get(target, key, receiver)\n          return typeof value === 'object' && value !== null ? wrap(value) : value\n        },\n        set(target, key, value, receiver) {\n          const changed = Reflect.get(target, key, receiver) !== value\n          const ok = Reflect.set(target, key, value, receiver)\n          if (changed) onWrite()\n          return ok\n        },\n      })\n      proxies.set(object, proxy)\n    }\n    return proxy as O\n  }\n  return wrap(target)\n}\n\n/** Copy `source` into `target` in place, keeping nested object identities (and every binding to them) intact. */\nexport function assignDeep(target: Record<string, unknown>, source: Record<string, unknown>) {\n  for (const [key, value] of Object.entries(source)) {\n    const current = target[key]\n    const nested = (v: unknown) => typeof v === 'object' && v !== null && !Array.isArray(v)\n    if (nested(current) && nested(value))\n      assignDeep(current as Record<string, unknown>, value as Record<string, unknown>)\n    else target[key] = structuredClone(value)\n  }\n}\n"],"mappings":"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","names":["target"]}
+{"version":3,"sources":["../src/client/studio.ts","../src/core/diff.ts","../src/client/bridge.ts","../src/client/browser-sync.ts","../src/client/history.ts","../src/client/live.ts"],"sourcesContent":["import {\n  button,\n  type DebugDefinition,\n  type DebugField,\n  type DebugFolder,\n  type DebugSchema,\n  schemaValues,\n} from '@joycostudio/xyz/debug'\nimport { changedPaths } from '../core/diff'\nimport type { ToolState } from '../core/protocol'\nimport { error, type Result } from '../core/result'\nimport type { AnyTool, ToolDefinition } from '../core/tool'\nimport { connectBridge, type BridgeClient, type Connection } from './bridge'\nimport { connectBrowserSync } from './browser-sync'\nimport { createHistory, writePath } from './history'\nimport { assignDeep, live } from './live'\n\nexport type ToolHandle<TConfig extends object = any> = {\n  readonly definition: ToolDefinition<TConfig>\n  /** The live config. Writes sync to same-origin pages and, when connected, the runtime. */\n  readonly config: TConfig\n  /** Runtime-owned state; null until the runtime answers (always null without one). */\n  readonly state: ToolState<TConfig> | null\n  /** Bumps on every config change. Handy as a React snapshot. */\n  readonly version: number\n  /** Called after every config change, local or remote. */\n  subscribe(listener: (config: TConfig) => void): () => void\n  /** The tool's Xyz schema bound to the live config. */\n  controls(): DebugSchema\n  /** Xyz `Debuggable`: `debugManager.register(handle)` mounts this tool in the app's floating pane. */\n  debug(): DebugFolder\n  /** The config on disk: the runtime's saved value or, until one answers, the bundled `initial`. */\n  readonly saved: TConfig\n  /** Dotted paths where the draft differs from `saved`. Tracked locally, so it works without a runtime too. */\n  readonly changes: string[]\n  /** The draft differs from `saved`. */\n  readonly dirty: boolean\n  /** True while `compare(true)` shows the saved config in place of the draft. */\n  readonly comparing: boolean\n  /**\n   * Temporarily show `saved` (true) or go back to the draft (false). Local only: nothing\n   * reaches the runtime, and edits made while comparing are dropped when it ends.\n   */\n  compare(showSaved: boolean): void\n  /** True when `undo()` has an edit made on this page to step back through. */\n  readonly canUndo: boolean\n  readonly canRedo: boolean\n  /**\n   * Step back through edits made on this page (a slider drag counts as one), then sync the result like any\n   * other edit. Only the leaves each edit changed are restored. Returns false with nothing to undo or while comparing.\n   */\n  undo(): boolean\n  redo(): boolean\n  save(options?: { force?: boolean }): Promise<Result<ToolState<TConfig>>>\n  discard(): Promise<Result<ToolState<TConfig>>>\n}\n\nexport type Studio = {\n  readonly tools: readonly ToolHandle[]\n  tool<TConfig extends object>(definition: ToolDefinition<TConfig>): ToolHandle<TConfig>\n  readonly connection: Connection\n  /** Bumps on connection or any tool state change. */\n  readonly version: number\n  subscribe(listener: () => void): () => void\n  close(): void\n}\n\nexport type StudioOptions = {\n  tools: readonly AnyTool[]\n  /**\n   * Runtime bridge URL (e.g. `ws://127.0.0.1:5179`). Omit or pass false for browser-only syncing, as in production.\n   * Only browsers connect, so a module-scope `createStudio` is safe to evaluate during SSR.\n   */\n  runtime?: string | false\n}\n\nconst COMPARE_MESSAGE = 'joyco-studio:compare'\ntype CompareMessage = { type: typeof COMPARE_MESSAGE; tool: string; showSaved: boolean }\n\n/** Make the studio running in `target` (e.g. a preview iframe) compare `tool` as well. */\nexport function postCompare(target: Window | null | undefined, tool: string, showSaved: boolean) {\n  const message: CompareMessage = { type: COMPARE_MESSAGE, tool, showSaved }\n  target?.postMessage(message, location.origin)\n}\n\n/** Mark every value control live so a pane registered with `registerFrame` reflects remote edits. */\nfunction liveSchema(schema: DebugSchema): DebugSchema {\n  return Object.fromEntries(\n    Object.entries(schema).map(([key, field]): [string, DebugField] => {\n      if (field.kind === 'button') return [key, field]\n      if (field.kind === 'folder')\n        return [\n          key,\n          { ...field, definition: { ...field.definition, schema: () => liveSchema(field.definition.schema()) } },\n        ]\n      return [key, { ...field, live: true }]\n    }),\n  )\n}\n\n/**\n * Xyz `extend` for a folder bound to `handle.controls()` (optionally followed by more fields, as in `debug()`):\n * double-clicking a slider resets it to its saved value.\n */\nexport function resetSlidersOnDoubleClick(handle: ToolHandle): NonNullable<DebugDefinition['extend']> {\n  return (folder, { fields }) => {\n    const sliders = fields().filter(({ field }) => field.kind === 'slider')\n    const onDoubleClick = (event: MouseEvent) => {\n      // Double-clicking the number input selects its text instead.\n      if (handle.comparing || (event.target as Element).closest('input')) return\n      const slider = sliders.find(({ blade }) => blade.element.contains(event.target as Node))\n      if (slider?.field.kind !== 'slider') return\n      const saved = slider.path.reduce<unknown>(\n        (values, key) => (values as Record<string, unknown> | undefined)?.[key],\n        schemaValues(handle.definition.controls(structuredClone(handle.saved))),\n      )\n      if (typeof saved === 'number') slider.field.write(saved)\n    }\n    folder.element.addEventListener('dblclick', onDoubleClick)\n    return () => folder.element.removeEventListener('dblclick', onDoubleClick)\n  }\n}\n\n/** A `registerFrame` for Xyz's `DebugManager` / `bindDebugSchema`: refreshes live controls every animation frame. */\nexport function everyFrame(refresh: () => void) {\n  let frame = requestAnimationFrame(function tick() {\n    refresh()\n    frame = requestAnimationFrame(tick)\n  })\n  return () => cancelAnimationFrame(frame)\n}\n\n/** One studio per runtime URL (or local tool set) per page; replace HMR instances without leaking transports. */\nconst instances: Map<string, Studio> = ((globalThis as { __joycoStudio?: Map<string, Studio> }).__joycoStudio ??=\n  new Map())\n\nexport function createStudio({ tools, runtime }: StudioOptions): Studio {\n  const instanceKey = runtime || JSON.stringify(tools.map(({ id, file }) => [id, file]).sort())\n  let bridge: BridgeClient | null = null\n  let connection: Connection = { phase: runtime ? 'connecting' : 'local' }\n  let version = 0\n  const studioListeners = new Set<() => void>()\n  const touch = () => {\n    version++\n    for (const listener of studioListeners) listener()\n  }\n\n  const createHandle = <TConfig extends object>(definition: ToolDefinition<TConfig>) => {\n    const raw = structuredClone(definition.initial)\n    const listeners = new Set<(config: TConfig) => void>()\n    let pushing: Promise<unknown> = Promise.resolve()\n    let scheduled = false\n    /** The draft to restore while comparing; null when showing the draft. */\n    let stashed: TConfig | null = null\n    const history = createHistory()\n    /** A copy of `raw` as of the last change, so the next local edit can be diffed against it. */\n    let snapshot = structuredClone(raw)\n\n    const changed = () => {\n      snapshot = structuredClone(raw)\n      handle.version++\n      for (const listener of listeners) listener(handle.config)\n      touch()\n    }\n    const adopt = (state: ToolState) => {\n      handle.state = state as ToolState<TConfig>\n      touch()\n    }\n    const receive = (state: ToolState) => {\n      if (stashed) stashed = structuredClone(state.draft.value) as TConfig\n      else assignDeep(raw as Record<string, unknown>, state.draft.value as Record<string, unknown>)\n      adopt(state)\n      if (!stashed) changed()\n      browserSync?.publish(state.draft.value as TConfig)\n    }\n    const resync = async () => {\n      const result = await bridge?.request('tool.get', { tool: definition.id })\n      if (result?.ok) receive(result.data)\n    }\n    const push = () => {\n      if (scheduled || !bridge) return\n      scheduled = true\n      pushing = Promise.resolve().then(async () => {\n        scheduled = false\n        const result = await bridge?.request('tool.update', { tool: definition.id, value: raw })\n        if (!result) return\n        if (result.ok) adopt(result.data)\n        else if (result.error !== 'runtime_unavailable') {\n          console.warn(`[studio] ${definition.id}: ${result.message ?? result.error}`)\n          await resync()\n        }\n      })\n    }\n\n    const edited = () => {\n      changed()\n      if (!stashed) {\n        browserSync?.publish(raw)\n        push()\n      }\n    }\n    const restore = (patch: ReturnType<typeof history.undo>) => {\n      if (!patch) return false\n      for (const { path, value } of patch) writePath(raw as Record<string, unknown>, path, value)\n      edited()\n      return true\n    }\n\n    const handle = {\n      definition,\n      config: live(raw, () => {\n        if (!stashed) history.record(snapshot, raw)\n        edited()\n      }),\n      state: null as ToolState<TConfig> | null,\n      version: 0,\n      get saved(): TConfig {\n        return handle.state?.saved.value ?? definition.initial\n      },\n      get changes() {\n        return changedPaths(handle.saved, stashed ?? raw)\n      },\n      get dirty() {\n        return handle.changes.length > 0\n      },\n      comparing: false,\n      compare(showSaved: boolean) {\n        if (showSaved === handle.comparing) return\n        if (showSaved) stashed = structuredClone(raw)\n        const next = showSaved ? handle.saved : stashed!\n        assignDeep(raw as Record<string, unknown>, next as Record<string, unknown>)\n        if (!showSaved) stashed = null\n        handle.comparing = showSaved\n        changed()\n      },\n      get canUndo() {\n        return history.canUndo\n      },\n      get canRedo() {\n        return history.canRedo\n      },\n      undo: () => !stashed && restore(history.undo()),\n      redo: () => !stashed && restore(history.redo()),\n      subscribe(listener: (config: TConfig) => void) {\n        listeners.add(listener)\n        return () => void listeners.delete(listener)\n      },\n      controls: () => definition.controls(handle.config),\n      debug(): DebugFolder {\n        const actions: DebugSchema = runtime\n          ? {\n              save: button('Save', () => handle.save().then(fail), 'Saved ✓'),\n              discard: button('Discard', () => handle.discard().then(fail), 'Discarded'),\n            }\n          : {}\n        return {\n          title: definition.title ?? definition.id,\n          schema: () => ({ ...liveSchema(handle.controls()), ...actions }),\n          extend: resetSlidersOnDoubleClick(handle),\n        }\n      },\n      async save({ force = false } = {}) {\n        if (!bridge) return error('runtime_unavailable')\n        await pushing\n        const revision = handle.state?.draft.revision\n        if (revision === undefined) return error('runtime_unavailable')\n        const result = await bridge.request('tool.save', { tool: definition.id, revision, force })\n        if (result.ok) adopt(result.data)\n        return result as Result<ToolState<TConfig>>\n      },\n      async discard() {\n        if (!bridge) return error('runtime_unavailable')\n        await pushing\n        const before = snapshot\n        const result = await bridge.request('tool.discard', { tool: definition.id })\n        if (result.ok) {\n          receive(result.data)\n          // Discarding is undoable, as its own step.\n          if (!stashed) history.record(before, raw, { merge: false })\n        }\n        return result as Result<ToolState<TConfig>>\n      },\n      receive,\n      resync,\n      close: () => browserSync?.close(),\n    }\n    const browserSync = connectBrowserSync(definition, runtime, {\n      enabled: () => connection.phase !== 'connected',\n      receive(value) {\n        if (stashed) {\n          // The shown saved config stays put, but `changes` and `dirty` read the new draft.\n          stashed = value\n          touch()\n        } else {\n          assignDeep(raw as Record<string, unknown>, value as Record<string, unknown>)\n          changed()\n        }\n      },\n    })\n    return handle\n  }\n\n  const handles = new Map(tools.map((definition) => [definition.id, createHandle(definition)]))\n\n  // /studio asks its same-origin preview iframe to compare too (see `postCompare`).\n  const onMessage = (event: MessageEvent) => {\n    const message = event.data as CompareMessage | undefined\n    if (event.origin !== location.origin || message?.type !== COMPARE_MESSAGE) return\n    handles.get(message.tool)?.compare(message.showSaved)\n  }\n  if (typeof window !== 'undefined') window.addEventListener?.('message', onMessage)\n\n  if (runtime && typeof window !== 'undefined') {\n    bridge = connectBridge(runtime, {\n      state: (state) => handles.get(state.tool)?.receive(state),\n      connection(next) {\n        connection = next\n        touch()\n        if (next.phase === 'connected') for (const handle of handles.values()) void handle.resync()\n      },\n    })\n  }\n\n  const studio: Studio = {\n    tools: [...handles.values()],\n    tool<TConfig extends object>(definition: ToolDefinition<TConfig>) {\n      const handle = handles.get(definition.id)\n      if (!handle) throw new Error(`[studio] tool \"${definition.id}\" was not passed to createStudio`)\n      return handle as unknown as ToolHandle<TConfig>\n    },\n    get connection() {\n      return connection\n    },\n    get version() {\n      return version\n    },\n    subscribe(listener) {\n      studioListeners.add(listener)\n      return () => void studioListeners.delete(listener)\n    },\n    close() {\n      bridge?.close()\n      for (const handle of handles.values()) handle.close()\n      studioListeners.clear()\n      if (typeof window !== 'undefined') window.removeEventListener?.('message', onMessage)\n      if (instances.get(instanceKey) === studio) instances.delete(instanceKey)\n    },\n  }\n  if (typeof window !== 'undefined') {\n    instances.get(instanceKey)?.close()\n    instances.set(instanceKey, studio)\n  }\n  return studio\n}\n\nfunction fail(result: Result<unknown>) {\n  if (!result.ok) throw new Error(result.message ?? result.error)\n}\n","export type Change = { path: string[]; before: unknown; after: unknown }\n\n/** Every leaf that differs between two configs of the same shape. Arrays count as leaves. */\nexport function diff(before: unknown, after: unknown, path: string[] = []): Change[] {\n  const nested = (value: unknown): value is Record<string, unknown> =>\n    typeof value === 'object' && value !== null && !Array.isArray(value)\n  if (nested(before) && nested(after)) {\n    const keys = new Set([...Object.keys(before), ...Object.keys(after)])\n    return [...keys].flatMap((key) => diff(before[key], after[key], [...path, key]))\n  }\n  return JSON.stringify(before) === JSON.stringify(after) ? [] : [{ path, before, after }]\n}\n\n/** Dotted paths of every leaf that differs between two configs of the same shape. */\nexport function changedPaths(before: unknown, after: unknown): string[] {\n  return diff(before, after).map(({ path }) => path.join('.'))\n}\n","import type { Op, Operations, ServerMessage, ToolState } from '../core/protocol'\nimport { error, type Result } from '../core/result'\n\nexport type Connection = { phase: 'local' } | { phase: 'connecting' } | { phase: 'connected' } | { phase: 'offline' }\n\ntype Pending = (result: Result<unknown>) => void\n\n/** A reconnecting WebSocket to the Studio runtime with request/response correlation. */\nexport function connectBridge(\n  url: string,\n  handlers: { state: (state: ToolState) => void; connection: (connection: Connection) => void },\n) {\n  let socket: WebSocket | null = null\n  let nextId = 0\n  let retry = 0\n  let timer: ReturnType<typeof setTimeout> | undefined\n  let closed = false\n  const pending = new Map<number, Pending>()\n\n  const open = () => {\n    handlers.connection({ phase: 'connecting' })\n    const ws = new WebSocket(url)\n    socket = ws\n    ws.onopen = () => {\n      retry = 0\n      handlers.connection({ phase: 'connected' })\n    }\n    ws.onmessage = (event) => {\n      const message = JSON.parse(String(event.data)) as ServerMessage\n      if (message.type === 'state') return handlers.state(message.state)\n      pending.get(message.id)?.(message.result)\n      pending.delete(message.id)\n    }\n    ws.onclose = () => {\n      socket = null\n      for (const resolve of pending.values()) resolve(error('runtime_unavailable'))\n      pending.clear()\n      if (closed) return\n      handlers.connection({ phase: 'offline' })\n      timer = setTimeout(open, Math.min(500 * 2 ** retry++, 5000))\n    }\n  }\n  open()\n\n  return {\n    request<TOp extends Op>(op: TOp, params: Operations[TOp]['params']): Promise<Result<Operations[TOp]['result']>> {\n      if (socket?.readyState !== WebSocket.OPEN) return Promise.resolve(error('runtime_unavailable'))\n      const id = nextId++\n      socket.send(JSON.stringify({ id, op, params }))\n      return new Promise((resolve) => pending.set(id, resolve as Pending))\n    },\n    close() {\n      closed = true\n      clearTimeout(timer)\n      socket?.close()\n    },\n  }\n}\n\nexport type BridgeClient = ReturnType<typeof connectBridge>\n","import type { ToolDefinition } from '../core/tool'\nimport { validateConfig } from '../core/validate'\n\ntype Snapshot = { type: 'config'; clock: number; sender: string; value: unknown }\n\n/** Ephemeral config sharing between same-origin pages, including Studio's preview iframe. */\nexport function connectBrowserSync<T extends object>(\n  definition: ToolDefinition<T>,\n  runtime: string | false | undefined,\n  handlers: { enabled(): boolean; receive(value: T): void },\n) {\n  // Also exclude SSR and Node environments that expose their own BroadcastChannel implementation.\n  if (typeof window === 'undefined' || !window.location?.origin || !window.BroadcastChannel) return null\n\n  let channel: BroadcastChannel\n  try {\n    channel = new window.BroadcastChannel(\n      JSON.stringify(['joyco-studio:config', runtime || null, definition.id, definition.file]),\n    )\n  } catch {\n    return null\n  }\n  const sender = crypto.getRandomValues(new Uint32Array(4)).join('-')\n  let clock = 0\n  let latest: Snapshot | undefined\n  let closed = false\n\n  channel.onmessage = ({ data }) => {\n    if (closed || !data || typeof data !== 'object') return\n    if (data.type === 'request') {\n      if (latest) channel.postMessage(latest)\n      return\n    }\n    if (\n      data.type !== 'config' ||\n      !Number.isSafeInteger(data.clock) ||\n      data.clock < 1 ||\n      typeof data.sender !== 'string'\n    )\n      return\n    clock = Math.max(clock, data.clock)\n    if (!handlers.enabled()) return\n    // A stable tie-break keeps simultaneous edits and multiple snapshot replies from diverging.\n    if (latest && (data.clock < latest.clock || (data.clock === latest.clock && data.sender <= latest.sender))) return\n    const result = validateConfig(definition, data.value)\n    if (!result.ok) return\n    latest = { type: 'config', clock: data.clock, sender: data.sender, value: result.data }\n    handlers.receive(result.data)\n  }\n  // A newly mounted/reloaded preview asks existing peers for their current draft.\n  channel.postMessage({ type: 'request' })\n\n  return {\n    publish(value: T) {\n      if (closed) return\n      latest = { type: 'config', clock: ++clock, sender, value: structuredClone(value) }\n      channel.postMessage(latest)\n    },\n    close() {\n      closed = true\n      channel.onmessage = null\n      channel.close()\n    },\n  }\n}\n","import { diff, type Change } from '../core/diff'\n\ntype Entry = { changes: Change[]; key: string; at: number }\n\nconst LIMIT = 100\n/** Edits to the same leaves this close together (a slider drag) undo as one step. */\nconst MERGE_MS = 500\n\n/**\n * Undo/redo for one page's edits. Entries hold only the leaves an edit changed, so stepping back\n * never reverts what another page, the runtime, or an agent changed in between.\n */\nexport function createHistory() {\n  const past: Entry[] = []\n  let future: Entry[] = []\n  /** The newest entry while later edits to the same leaves may still extend it. */\n  let open: Entry | null = null\n\n  const step = (from: Entry[], to: Entry[], side: 'before' | 'after') => {\n    const entry = from.pop()\n    if (!entry) return null\n    to.push(entry)\n    open = null\n    return entry.changes.map((change) => ({ path: change.path, value: change[side] }))\n  }\n\n  return {\n    get canUndo() {\n      return past.length > 0\n    },\n    get canRedo() {\n      return future.length > 0\n    },\n    /** Record the edit between two snapshots. `merge: false` keeps it a step of its own (e.g. Discard). */\n    record(before: unknown, after: unknown, { merge = true } = {}) {\n      // Cloned so later in-place edits (e.g. to an array leaf) cannot rewrite history.\n      const changes = structuredClone(diff(before, after))\n      if (!changes.length) return\n      future = []\n      const key = JSON.stringify(changes.map(({ path }) => path))\n      const now = Date.now()\n      if (merge && open && open.key === key && now - open.at < MERGE_MS) {\n        open.changes = open.changes.map((change, i) => ({ ...change, after: changes[i]!.after }))\n        open.at = now\n        // Dragged back to where it started: nothing left to undo.\n        if (open.changes.every((change) => JSON.stringify(change.before) === JSON.stringify(change.after))) {\n          past.pop()\n          open = null\n        }\n        return\n      }\n      const entry = { changes, key, at: now }\n      past.push(entry)\n      if (past.length > LIMIT) past.shift()\n      open = merge ? entry : null\n    },\n    /** The leaves to write back, or null when there is nothing to undo. */\n    undo: () => step(past, future, 'before'),\n    redo: () => step(future, past, 'after'),\n  }\n}\n\n/** Write `value` at `path` in place; undefined removes the key (it did not exist before the edit). */\nexport function writePath(target: Record<string, unknown>, path: string[], value: unknown) {\n  const key = path.at(-1)!\n  let parent = target\n  for (const segment of path.slice(0, -1)) {\n    const next = parent[segment]\n    parent = (typeof next === 'object' && next !== null ? next : (parent[segment] = {})) as Record<string, unknown>\n  }\n  if (value === undefined) delete parent[key]\n  else parent[key] = structuredClone(value)\n}\n","/**\n * A deep proxy that reports every write, so plain `property(config, 'key')`\n * bindings from Xyz feed Studio without the tool author wiring callbacks.\n */\nexport function live<T extends object>(target: T, onWrite: () => void): T {\n  const proxies = new WeakMap<object, object>()\n  const wrap = <O extends object>(object: O): O => {\n    let proxy = proxies.get(object)\n    if (!proxy) {\n      proxy = new Proxy(object, {\n        get(target, key, receiver) {\n          const value = Reflect.get(target, key, receiver)\n          return typeof value === 'object' && value !== null ? wrap(value) : value\n        },\n        set(target, key, value, receiver) {\n          const changed = Reflect.get(target, key, receiver) !== value\n          const ok = Reflect.set(target, key, value, receiver)\n          if (changed) onWrite()\n          return ok\n        },\n      })\n      proxies.set(object, proxy)\n    }\n    return proxy as O\n  }\n  return wrap(target)\n}\n\n/** Copy `source` into `target` in place, keeping nested object identities (and every binding to them) intact. */\nexport function assignDeep(target: Record<string, unknown>, source: Record<string, unknown>) {\n  for (const [key, value] of Object.entries(source)) {\n    const current = target[key]\n    const nested = (v: unknown) => typeof v === 'object' && v !== null && !Array.isArray(v)\n    if (nested(current) && nested(value))\n      assignDeep(current as Record<string, unknown>, value as Record<string, unknown>)\n    else target[key] = structuredClone(value)\n  }\n}\n"],"mappings":"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","names":["target"]}

package/dist/react.d.ts

@@ -89,13 +89,28 @@ type ToolHandle<TConfig extends object = any> = {
     controls(): DebugSchema;
     /** Xyz `Debuggable`: `debugManager.register(handle)` mounts this tool in the app's floating pane. */
     debug(): DebugFolder;
+    /** The config on disk: the runtime's saved value or, until one answers, the bundled `initial`. */
+    readonly saved: TConfig;
+    /** Dotted paths where the draft differs from `saved`. Tracked locally, so it works without a runtime too. */
+    readonly changes: string[];
+    /** The draft differs from `saved`. */
+    readonly dirty: boolean;
     /** True while `compare(true)` shows the saved config in place of the draft. */
     readonly comparing: boolean;
     /**
-     * Temporarily show the saved config (true) or go back to the draft (false). Local only: nothing
+     * Temporarily show `saved` (true) or go back to the draft (false). Local only: nothing
      * reaches the runtime, and edits made while comparing are dropped when it ends.
      */
     compare(showSaved: boolean): void;
+    /** True when `undo()` has an edit made on this page to step back through. */
+    readonly canUndo: boolean;
+    readonly canRedo: boolean;
+    /**
+     * Step back through edits made on this page (a slider drag counts as one), then sync the result like any
+     * other edit. Only the leaves each edit changed are restored. Returns false with nothing to undo or while comparing.
+     */
+    undo(): boolean;
+    redo(): boolean;
     save(options?: {
         force?: boolean;
     }): Promise<Result<ToolState<TConfig>>>;

package/dist/react.js

@@ -14,15 +14,35 @@ import {
 import { useEffect as useEffect4, useRef as useRef3, useState as useState7 } from "react";
 
 // package.json
-var version = "0.1.1";
+var version = "0.1.2";
 
 // src/client/studio.ts
-import { button } from "@joycostudio/xyz/debug";
+import {
+  button,
+  schemaValues
+} from "@joycostudio/xyz/debug";
 var COMPARE_MESSAGE = "joyco-studio:compare";
 function postCompare(target, tool, showSaved) {
   const message = { type: COMPARE_MESSAGE, tool, showSaved };
   target?.postMessage(message, location.origin);
 }
+function resetSlidersOnDoubleClick(handle) {
+  return (folder, { fields }) => {
+    const sliders = fields().filter(({ field }) => field.kind === "slider");
+    const onDoubleClick = (event) => {
+      if (handle.comparing || event.target.closest("input")) return;
+      const slider = sliders.find(({ blade }) => blade.element.contains(event.target));
+      if (slider?.field.kind !== "slider") return;
+      const saved = slider.path.reduce(
+        (values, key) => values?.[key],
+        schemaValues(handle.definition.controls(structuredClone(handle.saved)))
+      );
+      if (typeof saved === "number") slider.field.write(saved);
+    };
+    folder.element.addEventListener("dblclick", onDoubleClick);
+    return () => folder.element.removeEventListener("dblclick", onDoubleClick);
+  };
+}
 var instances = globalThis.__joycoStudio ??= /* @__PURE__ */ new Map();
 
 // src/react/hooks.ts
@@ -49,16 +69,6 @@ import { bindDebugSchema } from "@joycostudio/xyz/debug";
 import { SquareSplitHorizontal } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 
-// src/core/diff.ts
-function changedPaths(before, after, path = "") {
-  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) => changedPaths(before[key], after[key], path ? `${path}.${key}` : key));
-  }
-  return JSON.stringify(before) === JSON.stringify(after) ? [] : [path];
-}
-
 // src/react/theme.ts
 var tweakpaneTheme = {
   "--tp-base-background-color": "transparent",
@@ -111,9 +121,9 @@ function ToolIcon({ icon = SlidersHorizontal, ...props }) {
       "aria-hidden": true,
       ...props,
       children: icon.map(([Tag, attrs], index) => {
-        const Element2 = Tag;
+        const Element = Tag;
         return /* @__PURE__ */ jsx(
-          Element2,
+          Element,
           {
             ...Object.fromEntries(Object.entries(attrs).map(([name, value]) => [camel(name), value]))
           },
@@ -310,9 +320,9 @@ function PanelFooter({ className, ...props }) {
 import { Fragment, jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
 function describe(studio, handle) {
   const { state } = handle;
+  if (handle.comparing) return { tone: "text-sky-400", text: "Showing saved" };
   if (studio.connection.phase !== "connected") return { tone: "text-faint", text: "Not persisting" };
   if (!state) return { tone: "text-destructive", text: "Restart studio dev" };
-  if (handle.comparing) return { tone: "text-sky-400", text: "Showing saved" };
   if (state.conflict) return { tone: "text-destructive", text: "Changed on disk" };
   if (state.dirty) return { tone: "text-warning", text: "Unsaved" };
   return { tone: "text-success", text: state.saved.hash ? "Saved" : "Not on disk yet" };
@@ -337,7 +347,10 @@ function Inspector({
       if (disposed || !container.current) return;
       const instance = new Pane({ container: container.current });
       pane.current = instance;
-      const bound = bindDebugSchema(instance, { schema: () => handle.controls() });
+      const bound = bindDebugSchema(instance, {
+        schema: () => handle.controls(),
+        extend: resetSlidersOnDoubleClick(handle)
+      });
       const unsubscribe = handle.subscribe(() => bound.refresh());
       teardown = () => {
         unsubscribe();
@@ -367,7 +380,7 @@ function Inspector({
   const ConfigFile = fileHref ? "a" : "span";
   const status = describe(studio, handle);
   const editable2 = studio.connection.phase === "connected" && !!state?.dirty && !handle.comparing;
-  const changes = (state?.dirty ? changedPaths(state.saved.value, state.draft.value) : []).map(
+  const changes = handle.changes.map(
     (path) => path.split(".").map((key) => key.charAt(0).toUpperCase() + key.slice(1)).join(" \u203A ")
   );
   return /* @__PURE__ */ jsxs2(Fragment, { children: [
@@ -424,7 +437,7 @@ function Inspector({
                 size: "icon-sm",
                 "aria-label": "Hold to compare with saved",
                 "aria-pressed": handle.comparing,
-                disabled: !state?.dirty,
+                disabled: !handle.dirty && !handle.comparing,
                 className: "shrink-0 aria-pressed:bg-primary aria-pressed:text-primary-foreground",
                 onPointerDown: (event) => {
                   event.currentTarget.setPointerCapture(event.pointerId);
@@ -1037,8 +1050,13 @@ function StudioFooter({ connection }) {
 }
 var SHORTCUTS = /* @__PURE__ */ new Set(["b", "s", "k"]);
 var COMPARE_KEY = "\\";
-var editable = (target) => target instanceof Element && target.matches("input, textarea, select, [contenteditable]");
-var isShortcut = (event) => (event.metaKey || event.ctrlKey) && SHORTCUTS.has(event.key.toLowerCase()) || event.key === COMPARE_KEY && !editable(event.target);
+var editable = (target) => !!target?.matches?.("input, textarea, select, [contenteditable]");
+var historyAction = (event) => {
+  if (!(event.metaKey || event.ctrlKey) || event.altKey || editable(event.target)) return null;
+  const key = event.key.toLowerCase();
+  return key === "z" ? event.shiftKey ? "redo" : "undo" : key === "y" ? "redo" : null;
+};
+var isShortcut = (event) => (event.metaKey || event.ctrlKey) && SHORTCUTS.has(event.key.toLowerCase()) || event.key === COMPARE_KEY && !editable(event.target) || !!historyAction(event);
 function forwardShortcuts(frame) {
   const forward = (event) => {
     if (event.defaultPrevented || !isShortcut(event)) return;
@@ -1089,7 +1107,7 @@ function Studio({ studio, previewComponent, getConfigFileHref }) {
       if (event.key !== COMPARE_KEY || editable(event.target) || event.repeat) return;
       event.preventDefault();
       const { handle: handle2, compare: compare2 } = current.current;
-      compare2(event.type === "keydown" && !!handle2?.state?.dirty);
+      compare2(event.type === "keydown" && !!handle2?.dirty);
     };
     const release = () => current.current.compare(false);
     addEventListener("keydown", onKey);
@@ -1102,6 +1120,16 @@ function Studio({ studio, previewComponent, getConfigFileHref }) {
       removeEventListener("blur", release);
     };
   }, []);
+  useEffect4(() => {
+    const onKey = (event) => {
+      const action = event.defaultPrevented ? null : historyAction(event);
+      if (!action) return;
+      event.preventDefault();
+      current.current.handle?.[action]();
+    };
+    addEventListener("keydown", onKey);
+    return () => removeEventListener("keydown", onKey);
+  }, []);
   useEffect4(() => {
     const fromHash = () => {
       const id = decodeURIComponent(location.hash.slice(1));
@@ -1195,7 +1223,7 @@ function Studio({ studio, previewComponent, getConfigFileHref }) {
                   version
                 ] })
               ] }) }),
-              /* @__PURE__ */ jsx13(SidebarContent, { children: /* @__PURE__ */ jsx13(SidebarGroup, { children: /* @__PURE__ */ jsx13(SidebarMenu, { children: tools.map(({ definition, state }) => {
+              /* @__PURE__ */ jsx13(SidebarContent, { children: /* @__PURE__ */ jsx13(SidebarGroup, { children: /* @__PURE__ */ jsx13(SidebarMenu, { children: tools.map(({ definition, state, dirty }) => {
                 const title = definition.title ?? definition.id;
                 const isPinned = pinned.has(definition.id);
                 const pinLabel = `${isPinned ? "Unpin" : "Pin"} ${title}`;
@@ -1209,13 +1237,13 @@ function Studio({ studio, previewComponent, getConfigFileHref }) {
                       children: [
                         /* @__PURE__ */ jsxs7("span", { className: "relative", children: [
                           /* @__PURE__ */ jsx13(ToolIcon, { icon: definition.icon, className: "size-4" }),
-                          state?.dirty && /* @__PURE__ */ jsx13(
+                          dirty && /* @__PURE__ */ jsx13(
                             "span",
                             {
-                              "aria-label": state.conflict ? "Changed on disk" : "Unsaved",
+                              "aria-label": state?.conflict ? "Changed on disk" : "Unsaved",
                               className: cn(
                                 "absolute -top-0.5 -right-0.5 size-1.5 rounded-full",
-                                state.conflict ? "bg-destructive" : "bg-warning"
+                                state?.conflict ? "bg-destructive" : "bg-warning"
                               )
                             }
                           )