@jxsuite/studio 0.15.0 → 0.16.1

package/src/panels/signals-panel.js

@@ -14,6 +14,7 @@ import {
   mutateRenameDef,
 } from "../tabs/transact.js";
 import { renderFieldRow } from "../ui/field-row.js";
+import { renderMediaPicker } from "../ui/media-picker.js";
 import { fetchPluginSchema, pluginSchemaCache } from "../services/code-services.js";
 
 // ─── Module-local state ─────────────────────────────────────────────────────
@@ -343,6 +344,9 @@ function renderSignalEditorTemplate(
   /** @type {any} */ def,
   /** @type {any} */ ctx,
 ) {
+  if (typeof def !== "object" || def === null) {
+    def = { default: def };
+  }
   const cat = defCategory(def);
 
   // Helper for picker rows
@@ -470,20 +474,31 @@ function renderSignalEditorTemplate(
               ),
           )
         : nothing}
-      ${signalFieldRow("Default", defaultVal, (/** @type {any} */ v) => {
-        let parsed = v;
-        if (def.type === "integer") parsed = parseInt(v, 10) || 0;
-        else if (def.type === "number") parsed = parseFloat(v) || 0;
-        else if (def.type === "boolean") parsed = v === "true";
-        else if (def.type === "array" || def.type === "object") {
-          try {
-            parsed = JSON.parse(v);
-          } catch {
-            parsed = v;
-          }
-        }
-        transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { default: parsed }));
-      })}
+      ${def.format === "image"
+        ? renderFieldRow({
+            prop: "Default",
+            label: "Default",
+            hasValue: false,
+            widget: renderMediaPicker("default", defaultVal, (/** @type {any} */ v) => {
+              transactDoc(activeTab.value, (t) =>
+                mutateUpdateDef(t, name, { default: v || undefined }),
+              );
+            }),
+          })
+        : signalFieldRow("Default", defaultVal, (/** @type {any} */ v) => {
+            let parsed = v;
+            if (def.type === "integer") parsed = parseInt(v, 10) || 0;
+            else if (def.type === "number") parsed = parseFloat(v) || 0;
+            else if (def.type === "boolean") parsed = v === "true";
+            else if (def.type === "array" || def.type === "object") {
+              try {
+                parsed = JSON.parse(v);
+              } catch {
+                parsed = v;
+              }
+            }
+            transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { default: parsed }));
+          })}
       ${signalFieldRow("Description", def.description || "", (/** @type {any} */ v) =>
         transactDoc(activeTab.value, (t) =>
           mutateUpdateDef(t, name, { description: v || undefined }),
@@ -644,7 +659,16 @@ function renderFunctionFields(
   /** @type {any} */ textareaRow,
   /** @type {any} */ ctx,
 ) {
-  const srcFields = def.$src
+  const descriptionField = signalFieldRow(
+    "Description",
+    def.description || "",
+    (/** @type {any} */ v) =>
+      transactDoc(activeTab.value, (t) =>
+        mutateUpdateDef(t, name, { description: v || undefined }),
+      ),
+  );
+
+  const bodyField = def.$src
     ? html`
         ${signalFieldRow("Source", def.$src || "", (/** @type {any} */ v) =>
           transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { $src: v || undefined })),
@@ -655,36 +679,35 @@ function renderFunctionFields(
           ),
         )}
       `
-    : textareaRow(
-        "Body",
-        def.body || "",
-        (/** @type {any} */ v) =>
-          transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { body: v })),
-        { minHeight: "60px", mono: true },
-      );
-
-  return html`
-    ${srcFields} ${renderParameterEditorTemplate(S, name, def, ctx)}
-    ${isCustomElementDoc(S) ? renderEmitsEditorTemplate(S, name, def) : nothing}
-    ${!def.$src
-      ? html`
-          <button
-            class="kv-add"
-            style="margin-top:4px"
+    : html`
+        <div style="display:flex;align-items:center;gap:4px">
+          <span class="field-label" style="flex:1">Body</span>
+          <sp-action-button
+            size="xs"
+            quiet
+            title="Open in code editor"
             @click=${() => {
               ctx.updateSession({ ui: { editingFunction: { type: "def", defName: name } } });
               ctx.renderCanvas();
             }}
           >
-            Open in editor
-          </button>
-        `
-      : nothing}
-    ${signalFieldRow("Description", def.description || "", (/** @type {any} */ v) =>
-      transactDoc(activeTab.value, (t) =>
-        mutateUpdateDef(t, name, { description: v || undefined }),
-      ),
-    )}
+            <sp-icon-code slot="icon"></sp-icon-code>
+          </sp-action-button>
+        </div>
+        <textarea
+          class="field-input"
+          style="min-height:60px;font-family:monospace;font-size:11px"
+          .value=${def.body || ""}
+          @input=${(/** @type {any} */ e) => {
+            const v = e.target.value;
+            transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { body: v }));
+          }}
+        ></textarea>
+      `;
+
+  return html`
+    ${descriptionField} ${renderParameterEditorTemplate(S, name, def, ctx)}
+    ${isCustomElementDoc(S) ? renderEmitsEditorTemplate(S, name, def) : nothing} ${bodyField}
   `;
 }
 

package/src/platforms/devserver.js

@@ -434,6 +434,16 @@ export function createDevServerPlatform() {
       return await res.json();
     },
 
+    /** @param {{ path: string; ref?: string }} opts */
+    async gitShow(opts) {
+      const params = new URLSearchParams({ path: opts.path });
+      if (opts.ref) params.set("ref", opts.ref);
+      const res = await fetch(`/__studio/git/show?${params}`);
+      if (!res.ok) throw new Error(await res.text());
+      const data = await res.json();
+      return data.content;
+    },
+
     /** @param {string[]} files */
     async gitDiscard(files) {
       const res = await fetch("/__studio/git/discard", {

package/src/services/code-services.js

@@ -85,13 +85,13 @@ export function setLintMarkers(editor, diagnostics) {
 
 /**
  * @param {any} editing
- * @param {any} state
+ * @param {any} document
  */
-export function getFunctionArgs(editing, state) {
+export function getFunctionArgs(editing, document) {
   if (editing.type === "def") {
-    return state.document.state?.[editing.defName]?.parameters || ["state", "event"];
+    return document?.state?.[editing.defName]?.parameters || ["state", "event"];
   } else if (editing.type === "event") {
-    const node = getNodeAtPath(state.document, editing.path);
+    const node = getNodeAtPath(document, editing.path);
     return node?.[editing.eventKey]?.parameters || ["state", "event"];
   }
   return ["state", "event"];

package/src/studio.js

@@ -35,7 +35,13 @@ import {
   setStatusbarRenderer,
   mountStatusbar,
 } from "./panels/statusbar.js";
-import { openFile, loadMarkdown, saveFile, exportFile } from "./files/file-ops.js";
+import {
+  openFile,
+  loadMarkdown,
+  saveFile,
+  exportFile,
+  serializeDocument,
+} from "./files/file-ops.js";
 import {
   loadProject as _loadProject,
   openProject as _openProject,
@@ -128,6 +134,7 @@ async function navigateToComponent(componentPath) {
       documentPath: tab.documentPath,
       dirty: tab.doc.dirty,
       mode: tab.doc.mode,
+      sourceFormat: tab.doc.sourceFormat,
     };
     if (!tab.session.documentStack) tab.session.documentStack = [];
     tab.session.documentStack.push(frame);
@@ -136,6 +143,7 @@ async function navigateToComponent(componentPath) {
     tab.doc.document = parsed;
     tab.doc.dirty = false;
     tab.doc.mode = /** @type {any} */ (null);
+    tab.doc.sourceFormat = null;
     tab.documentPath = componentPath;
     tab.session.selection = null;
     view.leftTab = "layers";
@@ -156,7 +164,7 @@ async function navigateBack() {
   if (tab.doc.dirty && tab.documentPath) {
     try {
       const platform = getPlatform();
-      await platform.writeFile(tab.documentPath, JSON.stringify(tab.doc.document, null, 2));
+      await platform.writeFile(tab.documentPath, serializeDocument(tab));
     } catch (/** @type {any} */ e) {
       const err = /** @type {any} */ (e);
       statusMessage(`Save error: ${err.message}`);
@@ -169,6 +177,7 @@ async function navigateBack() {
   tab.doc.document = frame.document;
   tab.doc.dirty = frame.dirty;
   tab.doc.mode = frame.mode;
+  tab.doc.sourceFormat = frame.sourceFormat;
   tab.documentPath = frame.documentPath;
   tab.session.selection = frame.selection;
   view.leftTab = "layers";
@@ -300,7 +309,9 @@ initCanvasRender({
   setCanvasMode,
   openFileFromTree,
   exportFile,
-  gitDiffState,
+  get gitDiffState() {
+    return gitDiffState;
+  },
   setGitDiffState: (/** @type {any} */ state) => {
     gitDiffState = state;
   },
@@ -359,6 +370,9 @@ leftPanelMod.mount({
   registerElementsDnD,
   registerComponentsDnD,
   setupTreeKeyboard,
+  setGitDiffState: (/** @type {any} */ state) => {
+    gitDiffState = state;
+  },
 });
 
 // Register all renderers with the store so render()/renderOnly() work
@@ -578,7 +592,7 @@ function scheduleAutosave() {
     if (t?.fileHandle && t.doc.dirty && "createWritable" in t.fileHandle) {
       try {
         const writable = await t.fileHandle.createWritable();
-        await writable.write(JSON.stringify(t.doc.document, null, 2));
+        await writable.write(serializeDocument(t));
         await writable.close();
         t.doc.dirty = false;
         statusMessage("Auto-saved");

package/src/tabs/transact.js

@@ -33,7 +33,7 @@ export function transactDoc(tab, mutationFn, { skipHistory = false } = {}) {
 
   if (!skipHistory) {
     const snapshot = {
-      document: structuredClone(raw),
+      document: JSON.parse(JSON.stringify(raw)),
       selection: tab.session.selection ? [...tab.session.selection] : null,
     };
     const truncated = tab.history.snapshots.slice(0, tab.history.index + 1);
@@ -319,7 +319,11 @@ export function mutateRemoveDef(tab, name) {
 export function mutateUpdateDef(tab, name, updates) {
   const doc = tab.doc.document;
   if (!doc.state) doc.state = {};
-  if (!doc.state[name]) doc.state[name] = {};
+  if (doc.state[name] == null) {
+    doc.state[name] = {};
+  } else if (typeof doc.state[name] !== "object") {
+    doc.state[name] = { default: doc.state[name] };
+  }
   Object.assign(doc.state[name], updates);
   for (const k of Object.keys(doc.state[name])) {
     if (doc.state[name][k] === undefined || doc.state[name][k] === null) {

package/src/workspace/workspace.js

@@ -84,6 +84,50 @@ export function closeTab(tabId) {
   }
 }
 
+/** Close all open tabs, disposing each. Defers reactivity until fully cleared. */
+export function closeAllTabs() {
+  const tabs = [...workspace.tabs.values()];
+  workspace.tabs.clear();
+  workspace.tabOrder = [];
+  workspace.activeTabId = null;
+  for (const tab of tabs) {
+    disposeTab(tab);
+  }
+}
+
+/**
+ * Replace all existing tabs with a new one atomically. Ensures activeTab is never null during the
+ * transition.
+ *
+ * @param {{
+ *   id: string;
+ *   documentPath?: string | null;
+ *   document: Record<string, any>;
+ *   frontmatter?: Record<string, unknown>;
+ *   sourceFormat?: string | null;
+ * }} newTabOpts
+ * @returns {import("../tabs/tab.js").Tab}
+ */
+export function replaceAllTabs(newTabOpts) {
+  const oldIds = [...workspace.tabs.keys()];
+  const oldTabs = [...workspace.tabs.values()];
+
+  const newTab = createTab(newTabOpts);
+  workspace.tabs.set(newTab.id, newTab);
+  workspace.activeTabId = newTab.id;
+  workspace.tabOrder = [newTab.id];
+
+  for (const id of oldIds) {
+    if (id === newTab.id) continue;
+    workspace.tabs.delete(id);
+  }
+  for (const tab of oldTabs) {
+    disposeTab(tab);
+  }
+
+  return newTab;
+}
+
 /**
  * Switch to an existing tab.
  *