@joycostudio/studio 0.1.1 → 0.1.3

package/dist/react.d.ts

@@ -20,18 +20,24 @@ type Result<T> = Success<T> | Failure;
  * Lucide's core package (`import { Palette } from 'lucide'`) exports exactly this shape.
  */
 type ToolIcon = readonly (readonly [tag: string, attrs: Record<string, string | number | undefined>])[];
+type ToolBase = {
+    /** Unique, URL-safe identifier. */
+    id: string;
+    title?: string;
+    /** Shown next to the tool in /studio. Data, not a component, so contracts stay loadable in Node. */
+    icon?: ToolIcon;
+    /** App route that renders this tool's result, shown next to the controls in /studio. */
+    preview?: string;
+    /** Use a bare iframe for tools that already own their canvas layout and headers. */
+    previewLayout?: 'canvas' | 'custom';
+};
 /**
  * A tool's contract. Isomorphic on purpose: the runtime loads it in Node to
  * validate and persist, the app loads it in the browser to apply and debug.
  *
  * `TConfig` is the one type that is read, edited, applied, and persisted.
  */
-type ToolDefinition<TConfig extends object = object> = {
-    /** Unique, URL-safe identifier. */
-    id: string;
-    title?: string;
-    /** Shown next to the tool in /studio. Data, not a component, so contracts stay loadable in Node. */
-    icon?: ToolIcon;
+type ToolDefinition<TConfig extends object = object> = ToolBase & {
     /** Repo-relative JSON file the config persists to. Import that same file as `initial`. */
     file: string;
     /** Config used before the runtime answers (and in production). */
@@ -41,11 +47,18 @@ type ToolDefinition<TConfig extends object = object> = {
      * Doubles as the runtime validator: every control's bounds are enforced on write.
      */
     controls: (config: TConfig) => DebugSchema;
-    /** App route that renders this tool's result, shown next to the controls in /studio. */
-    preview?: string;
-    /** Use a bare iframe for tools that already own their canvas layout and headers. */
-    previewLayout?: 'canvas' | 'custom';
 };
+/** A tool with nothing to tune: a sidebar entry for its preview, without an inspector or config file. */
+type PreviewToolDefinition = ToolBase & {
+    preview: string;
+    file?: never;
+    initial?: never;
+    controls?: never;
+};
+/** A tool with a config. */
+type AnyTool = ToolDefinition<any>;
+/** Anything `defineTool` returns: the kind follows from whether it declares a config. */
+type StudioTool = AnyTool | PreviewToolDefinition;
 
 /** A tool's live state as owned by the runtime. */
 type ToolState<TConfig = unknown> = {
@@ -89,19 +102,37 @@ 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>>>;
     discard(): Promise<Result<ToolState<TConfig>>>;
 };
 type Studio$1 = {
+    /** Every registered tool in order, including preview-only ones. */
+    readonly definitions: readonly StudioTool[];
+    /** A handle per tool with a config. Preview-only tools have none. */
     readonly tools: readonly ToolHandle[];
     tool<TConfig extends object>(definition: ToolDefinition<TConfig>): ToolHandle<TConfig>;
     readonly connection: Connection;

package/dist/react.js

@@ -11,18 +11,38 @@ import {
   PlugZap,
   Unplug
 } from "lucide-react";
-import { useEffect as useEffect4, useRef as useRef3, useState as useState7 } from "react";
+import { useEffect as useEffect5, useRef as useRef3, useState as useState8 } from "react";
 
 // package.json
-var version = "0.1.1";
+var version = "0.1.3";
 
 // 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);
@@ -494,9 +507,7 @@ function usePinnedTools(studio) {
     };
   }, []);
   const pinned = new Set(pins);
-  const tools = [...studio.tools].sort(
-    (a, b) => Number(pinned.has(b.definition.id)) - Number(pinned.has(a.definition.id))
-  );
+  const tools = [...studio.definitions].sort((a, b) => Number(pinned.has(b.id)) - Number(pinned.has(a.id)));
   const togglePin = (id) => {
     const next = pinned.has(id) ? pins.filter((pin) => pin !== id) : [...pins, id];
     try {
@@ -599,6 +610,25 @@ var PreviewCanvas = forwardRef3(function PreviewCanvas2({ title = "Preview", exp
   );
 });
 
+// src/react/session-flag.ts
+import { useEffect as useEffect3, useState as useState5 } from "react";
+function useSessionFlag(key) {
+  const [value, setValue] = useState5(() => {
+    try {
+      return sessionStorage.getItem(key) === "true";
+    } catch {
+      return false;
+    }
+  });
+  useEffect3(() => {
+    try {
+      sessionStorage.setItem(key, String(value));
+    } catch {
+    }
+  }, [key, value]);
+  return [value, setValue];
+}
+
 // src/react/ui/sidebar.tsx
 import * as React2 from "react";
 import { cva as cva2 } from "class-variance-authority";
@@ -1037,8 +1067,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;
@@ -1054,13 +1089,20 @@ function forwardShortcuts(frame) {
 function Studio({ studio, previewComponent, getConfigFileHref }) {
   useStudio(studio);
   const { tools, pinned, togglePin } = usePinnedTools(studio);
-  const [mounted, setMounted] = useState7(false);
-  const [panelsHidden, setPanelsHidden] = useState7(false);
-  const [selected, setSelected] = useState7(studio.tools[0]?.definition.id);
+  const [mounted, setMounted] = useState8(false);
+  const [sidebarHidden, setSidebarHidden] = useSessionFlag("joyco-studio:sidebar-hidden");
+  const [inspectorHidden, setInspectorHidden] = useSessionFlag("joyco-studio:inspector-hidden");
+  const [canvasExpanded, setCanvasExpanded] = useSessionFlag("joyco-studio:canvas-expanded");
+  const [selected, setSelected] = useState8(studio.definitions[0]?.id);
   const preview = useRef3(null);
+  const definition = studio.definitions.find((tool) => tool.id === selected);
   const handle = studio.tools.find((tool) => tool.definition.id === selected);
-  const Preview = previewComponent ?? (handle?.definition.previewLayout === "custom" ? "iframe" : PreviewCanvas);
-  useEffect4(() => {
+  const Preview = previewComponent ?? (definition?.previewLayout === "custom" ? "iframe" : PreviewCanvas);
+  const hidden = { left: sidebarHidden, right: inspectorHidden || !handle };
+  const show = { left: () => setSidebarHidden(false), right: () => setInspectorHidden(false) };
+  const layout = useRef3(hidden);
+  layout.current = hidden;
+  useEffect5(() => {
     const onKey = (event) => {
       if (event.defaultPrevented || event.isComposing || event.altKey || !(event.metaKey || event.ctrlKey)) return;
       if (event.key.toLowerCase() !== "b") return;
@@ -1071,7 +1113,9 @@ function Studio({ studio, previewComponent, getConfigFileHref }) {
         active.blur();
         preview.current?.focus();
       }
-      setPanelsHidden((hidden) => !hidden);
+      const hide = !layout.current.left || !layout.current.right;
+      setSidebarHidden(hide);
+      setInspectorHidden(hide);
     };
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
@@ -1081,15 +1125,15 @@ function Studio({ studio, previewComponent, getConfigFileHref }) {
     handle.compare(showSaved);
     postCompare(preview.current?.contentWindow, handle.definition.id, showSaved);
   };
-  useEffect4(() => () => handle?.compare(false), [handle]);
+  useEffect5(() => () => handle?.compare(false), [handle]);
   const current = useRef3({ handle, compare });
   current.current = { handle, compare };
-  useEffect4(() => {
+  useEffect5(() => {
     const onKey = (event) => {
       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,10 +1146,20 @@ function Studio({ studio, previewComponent, getConfigFileHref }) {
       removeEventListener("blur", release);
     };
   }, []);
-  useEffect4(() => {
+  useEffect5(() => {
+    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);
+  }, []);
+  useEffect5(() => {
     const fromHash = () => {
       const id = decodeURIComponent(location.hash.slice(1));
-      if (studio.tools.some((handle2) => handle2.definition.id === id)) setSelected(id);
+      if (studio.definitions.some((tool) => tool.id === id)) setSelected(id);
     };
     setMounted(true);
     fromHash();
@@ -1118,22 +1172,25 @@ function Studio({ studio, previewComponent, getConfigFileHref }) {
     SidebarProvider,
     {
       defaultOpen: sidebarOpen,
-      "data-preview-layout": previewComponent ? "canvas" : handle?.definition.previewLayout ?? "canvas",
+      "data-preview-layout": previewComponent ? "canvas" : definition?.previewLayout ?? "canvas",
+      "data-sidebar-panel": hidden.left ? "hidden" : "shown",
       className: "studio-workspace relative h-svh min-h-0 overflow-hidden text-xs",
       children: [
-        handle?.definition.preview ? /* @__PURE__ */ jsx13(
+        definition?.preview ? /* @__PURE__ */ jsx13(
           Preview,
           {
             "data-slot": "studio-preview",
             ref: preview,
-            src: handle.definition.preview,
-            title: handle.definition.title ?? handle.definition.id,
-            onLoad: (event) => forwardShortcuts(event.currentTarget)
+            src: definition.preview,
+            title: definition.title ?? definition.id,
+            onLoad: (event) => forwardShortcuts(event.currentTarget),
+            ...Preview === PreviewCanvas && { expanded: canvasExpanded, onExpandedChange: setCanvasExpanded }
           },
-          handle.definition.id
-        ) : /* @__PURE__ */ jsx13("div", { className: "absolute inset-0 grid place-items-center text-faint", children: handle ? "This tool has no preview" : "No tools registered" }),
-        panelsHidden && ["left", "right"].map((side) => {
+          definition.id
+        ) : /* @__PURE__ */ jsx13("div", { className: "absolute inset-0 grid place-items-center text-faint", children: definition ? "This tool has no preview" : "No tools registered" }),
+        ["left", "right"].filter((side) => hidden[side] && (side === "left" || handle)).map((side) => {
           const Chevron = side === "left" ? ChevronRight : ChevronLeft;
+          const label = side === "left" ? "Show tools" : "Show inspector";
           return /* @__PURE__ */ jsx13(
             "div",
             {
@@ -1147,8 +1204,9 @@ function Studio({ studio, previewComponent, getConfigFileHref }) {
                   sideOffset: 8,
                   className: "flex items-center gap-2",
                   content: /* @__PURE__ */ jsxs7(Fragment2, { children: [
-                    "Show Studio panels",
+                    label,
                     " ",
+                    /* @__PURE__ */ jsx13("span", { className: "text-faint", children: "\xB7 both" }),
                     /* @__PURE__ */ jsxs7(KbdGroup, { children: [
                       /* @__PURE__ */ jsx13(Kbd, { children: "\u2318/Ctrl" }),
                       /* @__PURE__ */ jsx13(Kbd, { children: "B" })
@@ -1160,8 +1218,8 @@ function Studio({ studio, previewComponent, getConfigFileHref }) {
                       "data-slot": "studio-panel-reveal",
                       variant: "ghost",
                       size: "icon",
-                      "aria-label": "Show Studio panels",
-                      onClick: () => setPanelsHidden(false),
+                      "aria-label": label,
+                      onClick: show[side],
                       className: cn(
                         "absolute top-1/2 h-16 w-6 -translate-y-1/2 cursor-pointer px-0 text-sidebar-foreground opacity-0 transition-[translate,opacity] duration-200 ease-out hover:bg-sidebar/95 hover:text-foreground focus:translate-x-0 focus:opacity-100 group-hover/edge:translate-x-0 group-hover/edge:opacity-100 motion-reduce:transition-none [@media(hover:none)]:translate-x-0 [@media(hover:none)]:opacity-100",
                         side === "left" ? "left-1 -translate-x-[calc(100%+0.25rem)]" : "right-1 translate-x-[calc(100%+0.25rem)]"
@@ -1180,11 +1238,11 @@ function Studio({ studio, previewComponent, getConfigFileHref }) {
           {
             collapsible: "icon",
             variant: "floating",
-            inert: panelsHidden,
-            "aria-hidden": panelsHidden,
+            inert: hidden.left,
+            "aria-hidden": hidden.left,
             className: cn(
               "transition-[left,right,width,translate] duration-200 ease-out motion-reduce:transition-none",
-              panelsHidden && "-translate-x-[calc(100%+1rem)]"
+              hidden.left && "-translate-x-[calc(100%+1rem)]"
             ),
             children: [
               /* @__PURE__ */ jsx13(SidebarHeader, { className: "h-10 flex-row items-center overflow-hidden py-0 pr-0 pl-4 transition-[padding] duration-200 ease-out group-data-[collapsible=icon]:pl-[calc(1.5rem-0.875rem*352/144/2)] motion-reduce:transition-none", children: /* @__PURE__ */ jsxs7("span", { className: "flex items-center gap-2.5 text-foreground", children: [
@@ -1195,27 +1253,28 @@ function Studio({ studio, previewComponent, getConfigFileHref }) {
                   version
                 ] })
               ] }) }),
-              /* @__PURE__ */ jsx13(SidebarContent, { children: /* @__PURE__ */ jsx13(SidebarGroup, { children: /* @__PURE__ */ jsx13(SidebarMenu, { children: tools.map(({ definition, state }) => {
-                const title = definition.title ?? definition.id;
-                const isPinned = pinned.has(definition.id);
+              /* @__PURE__ */ jsx13(SidebarContent, { children: /* @__PURE__ */ jsx13(SidebarGroup, { children: /* @__PURE__ */ jsx13(SidebarMenu, { children: tools.map((tool) => {
+                const title = tool.title ?? tool.id;
+                const isPinned = pinned.has(tool.id);
+                const { state, dirty } = studio.tools.find((handle2) => handle2.definition.id === tool.id) ?? {};
                 const pinLabel = `${isPinned ? "Unpin" : "Pin"} ${title}`;
                 return /* @__PURE__ */ jsxs7(SidebarMenuItem, { children: [
                   /* @__PURE__ */ jsxs7(
                     SidebarMenuButton,
                     {
-                      isActive: definition.id === selected,
+                      isActive: tool.id === selected,
                       tooltip: title,
-                      onClick: () => location.hash = definition.id,
+                      onClick: () => location.hash = tool.id,
                       children: [
                         /* @__PURE__ */ jsxs7("span", { className: "relative", children: [
-                          /* @__PURE__ */ jsx13(ToolIcon, { icon: definition.icon, className: "size-4" }),
-                          state?.dirty && /* @__PURE__ */ jsx13(
+                          /* @__PURE__ */ jsx13(ToolIcon, { icon: tool.icon, className: "size-4" }),
+                          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"
                               )
                             }
                           )
@@ -1231,7 +1290,7 @@ function Studio({ studio, previewComponent, getConfigFileHref }) {
                       "aria-label": pinLabel,
                       "aria-pressed": isPinned,
                       showOnHover: !isPinned,
-                      onClick: () => togglePin(definition.id),
+                      onClick: () => togglePin(tool.id),
                       className: cn(
                         "cursor-pointer [&>svg]:size-3 [@media(hover:none)]:opacity-100",
                         isPinned && "text-sidebar-primary"
@@ -1239,7 +1298,7 @@ function Studio({ studio, previewComponent, getConfigFileHref }) {
                       children: /* @__PURE__ */ jsx13(Pin2, { "aria-hidden": true, fill: isPinned ? "currentColor" : "none" })
                     }
                   ) })
-                ] }, definition.id);
+                ] }, tool.id);
               }) }) }) }),
               /* @__PURE__ */ jsx13(StudioFooter, { connection: studio.connection })
             ]
@@ -1249,11 +1308,11 @@ function Studio({ studio, previewComponent, getConfigFileHref }) {
           "aside",
           {
             "data-slot": "studio-inspector",
-            inert: panelsHidden,
-            "aria-hidden": panelsHidden,
+            inert: hidden.right,
+            "aria-hidden": hidden.right,
             className: cn(
               "absolute inset-y-2 right-2 z-10 flex w-(--studio-inspector-width) flex-col gap-1 p-1 transition-transform duration-200 ease-out motion-reduce:transition-none",
-              panelsHidden && "translate-x-[calc(100%+1rem)]"
+              hidden.right && "translate-x-[calc(100%+1rem)]"
             ),
             children: /* @__PURE__ */ jsx13(
               Inspector,
@@ -1275,7 +1334,7 @@ function Studio({ studio, previewComponent, getConfigFileHref }) {
 // src/react/command-menu.tsx
 import { Pin as Pin3 } from "lucide-react";
 import { Dialog } from "radix-ui";
-import { useEffect as useEffect5, useRef as useRef4, useState as useState8 } from "react";
+import { useEffect as useEffect6, useRef as useRef4, useState as useState9 } from "react";
 
 // src/react/ui/command.tsx
 import * as React3 from "react";
@@ -1343,10 +1402,10 @@ function CommandItem({ className, ...props }) {
 import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
 function StudioCommandMenu({ studio, studioPath = "/studio", navigate }) {
   const { tools, pinned } = usePinnedTools(studio);
-  const [open, setOpen] = useState8(false);
+  const [open, setOpen] = useState9(false);
   const opener = useRef4(null);
   const input = useRef4(null);
-  useEffect5(() => {
+  useEffect6(() => {
     if (window.frameElement?.getAttribute("data-slot") === "studio-preview") return;
     const onKey = (event) => {
       if (event.defaultPrevented || event.isComposing || event.altKey || !(event.metaKey || event.ctrlKey)) return;
@@ -1397,8 +1456,8 @@ function StudioCommandMenu({ studio, studioPath = "/studio", navigate }) {
           /* @__PURE__ */ jsxs9(Command, { label: "Studio tools", loop: true, vimBindings: false, children: [
             /* @__PURE__ */ jsx15(CommandInput, { ref: input, placeholder: "Search tools\u2026" }),
             /* @__PURE__ */ jsxs9(CommandList, { children: [
-              /* @__PURE__ */ jsx15(CommandEmpty, { children: studio.tools.length ? "No tools found." : "No tools registered yet." }),
-              tools.map(({ definition: tool }) => /* @__PURE__ */ jsxs9(
+              /* @__PURE__ */ jsx15(CommandEmpty, { children: studio.definitions.length ? "No tools found." : "No tools registered yet." }),
+              tools.map((tool) => /* @__PURE__ */ jsxs9(
                 CommandItem,
                 {
                   value: tool.id,