@joycostudio/studio 0.1.0 → 0.1.2

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.0";
+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"
                               )
                             }
                           )