@joycostudio/studio 0.1.2 → 0.1.3

package/dist/react.js

@@ -11,10 +11,10 @@ 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.2";
+var version = "0.1.3";
 
 // src/client/studio.ts
 import {
@@ -507,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 {
@@ -612,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";
@@ -1072,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;
@@ -1089,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);
@@ -1099,10 +1125,10 @@ 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();
@@ -1120,7 +1146,7 @@ function Studio({ studio, previewComponent, getConfigFileHref }) {
       removeEventListener("blur", release);
     };
   }, []);
-  useEffect4(() => {
+  useEffect5(() => {
     const onKey = (event) => {
       const action = event.defaultPrevented ? null : historyAction(event);
       if (!action) return;
@@ -1130,10 +1156,10 @@ function Studio({ studio, previewComponent, getConfigFileHref }) {
     addEventListener("keydown", onKey);
     return () => removeEventListener("keydown", onKey);
   }, []);
-  useEffect4(() => {
+  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();
@@ -1146,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",
             {
@@ -1175,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" })
@@ -1188,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)]"
@@ -1208,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: [
@@ -1223,20 +1253,21 @@ function Studio({ studio, previewComponent, getConfigFileHref }) {
                   version
                 ] })
               ] }) }),
-              /* @__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);
+              /* @__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" }),
+                          /* @__PURE__ */ jsx13(ToolIcon, { icon: tool.icon, className: "size-4" }),
                           dirty && /* @__PURE__ */ jsx13(
                             "span",
                             {
@@ -1259,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"
@@ -1267,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 })
             ]
@@ -1277,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,
@@ -1303,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";
@@ -1371,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;
@@ -1425,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,