@jxsuite/studio 0.10.2 → 0.13.0

package/src/panels/tab-strip.js

@@ -0,0 +1,124 @@
+/**
+ * Tab strip — renders open tabs above the canvas area.
+ *
+ * Uses the reactive workspace model: reads from workspace.tabOrder, workspace.tabs,
+ * workspace.activeTabId. Clicks call activateTab/closeTab from workspace.js.
+ */
+
+import { html, render as litRender, nothing } from "lit-html";
+import { effect, effectScope } from "../reactivity.js";
+import { workspace, activateTab, closeTab } from "../workspace/workspace.js";
+
+/** @typedef {import("../tabs/tab.js").Tab} Tab */
+
+/** @type {HTMLElement | null} */
+let _host = null;
+
+/** @type {import("@vue/reactivity").EffectScope | null} */
+let _scope = null;
+
+/**
+ * Mount the tab strip into the given host element.
+ *
+ * @param {HTMLElement} host
+ */
+export function mount(host) {
+  _host = host;
+  _scope = effectScope();
+  _scope.run(() => {
+    effect(() => {
+      void workspace.tabOrder;
+      void workspace.activeTabId;
+      for (const tab of workspace.tabs.values()) {
+        void tab.doc.dirty;
+        void tab.documentPath;
+      }
+      render();
+    });
+  });
+}
+
+export function unmount() {
+  _scope?.stop();
+  _scope = null;
+  _host = null;
+}
+
+function render() {
+  if (!_host) return;
+
+  if (workspace.tabOrder.length <= 1) {
+    litRender(nothing, _host);
+    return;
+  }
+
+  litRender(
+    html`
+      <div class="tab-strip">
+        ${workspace.tabOrder.map((id) => {
+          const tab = workspace.tabs.get(id);
+          if (!tab) return nothing;
+          const isActive = id === workspace.activeTabId;
+          const isDirty = tab.doc.dirty;
+          const label = tabLabel(tab);
+          return html`
+            <div
+              class="tab-strip-tab ${isActive ? "active" : ""}"
+              @click=${() => activateTab(id)}
+              @auxclick=${(/** @type {MouseEvent} */ e) => {
+                if (e.button === 1) {
+                  e.preventDefault();
+                  requestClose(id);
+                }
+              }}
+              title=${tab.documentPath || "Untitled"}
+            >
+              <span class="tab-strip-label">${label}</span>
+              ${isDirty ? html`<span class="tab-strip-dirty">●</span>` : nothing}
+              <button
+                class="tab-strip-close"
+                @click=${(/** @type {Event} */ e) => {
+                  e.stopPropagation();
+                  requestClose(id);
+                }}
+              >
+                ×
+              </button>
+            </div>
+          `;
+        })}
+      </div>
+    `,
+    _host,
+  );
+}
+
+/**
+ * Derive a short label from the tab's documentPath.
+ *
+ * @param {Tab} tab
+ * @returns {string}
+ */
+function tabLabel(tab) {
+  const path = tab.documentPath;
+  if (!path) return "Untitled";
+  const parts = path.split("/");
+  return parts[parts.length - 1];
+}
+
+/**
+ * Close a tab, prompting if dirty.
+ *
+ * @param {string} id
+ */
+function requestClose(id) {
+  const tab = workspace.tabs.get(id);
+  if (!tab) return;
+  if (tab.doc.dirty) {
+    const confirmed = window.confirm(
+      `"${tabLabel(tab)}" has unsaved changes. Close without saving?`,
+    );
+    if (!confirmed) return;
+  }
+  closeTab(id);
+}

package/src/panels/toolbar.js

@@ -4,7 +4,10 @@
  */
 
 import { html, render as litRender, nothing } from "lit-html";
-import { getState, update, updateSession, updateUi, undo, redo, subscribe } from "../store.js";
+import { updateSession, updateUi } from "../store.js";
+import { undo as tabUndo, redo as tabRedo } from "../tabs/transact.js";
+import { effect, effectScope } from "../reactivity.js";
+import { activeTab } from "../workspace/workspace.js";
 import { getEffectiveMedia } from "../site-context.js";
 import { mediaDisplayName } from "./shared.js";
 import { view } from "../view.js";
@@ -15,8 +18,8 @@ let _rootEl = null;
 /** @type {any} */
 let _ctx = null;
 
-/** @type {(() => void) | null} */
-let _unsub = null;
+/** @type {import("@vue/reactivity").EffectScope | null} */
+let _scope = null;
 
 const toolbarIconMap = /** @type {Record<string, any>} */ ({
   "sp-icon-folder-open": html`<sp-icon-folder-open slot="icon"></sp-icon-folder-open>`,
@@ -59,12 +62,28 @@ function tbBtnTpl(label, onClick, iconTag) {
 export function mount(rootEl, ctx) {
   _rootEl = rootEl;
   _ctx = ctx;
-  _unsub = subscribe(() => render());
+  _scope = effectScope();
+  _scope.run(() => {
+    effect(() => {
+      const tab = activeTab.value;
+      if (!tab) return;
+      // Read reactive properties to establish tracking
+      void tab.doc.document;
+      void tab.doc.dirty;
+      void tab.doc.mode;
+      void tab.session.selection;
+      void tab.session.ui.editingFunction;
+      void tab.session.ui.featureToggles;
+      void tab.session.ui.leftTab;
+      void tab.session.ui.rightTab;
+      render();
+    });
+  });
 }
 
 export function unmount() {
-  _unsub?.();
-  _unsub = null;
+  _scope?.stop();
+  _scope = null;
   _rootEl = null;
   _ctx = null;
 }
@@ -79,7 +98,18 @@ export function render() {
 }
 
 function toolbarTemplate() {
-  const S = getState();
+  const tab = activeTab.value;
+  if (!tab) return html``;
+  const S = /** @type {any} */ ({
+    document: tab.doc.document,
+    ui: tab.session.ui,
+    mode: tab.doc.mode,
+    selection: tab.session.selection,
+    dirty: tab.doc.dirty,
+    documentPath: tab.documentPath,
+    fileHandle: tab.fileHandle,
+    documentStack: tab.session.documentStack,
+  });
   const canvasMode = _ctx.getCanvasMode();
   const hasStack = S.documentStack && S.documentStack.length > 0;
   const hasFunc = !!S.ui.editingFunction;
@@ -203,8 +233,8 @@ function toolbarTemplate() {
       ${tbBtnTpl("Save", _ctx.saveFile, "sp-icon-save-floppy")}
     </sp-action-group>
     <sp-action-group compact size="s">
-      ${tbBtnTpl("Undo", () => update(undo(getState())), "sp-icon-undo")}
-      ${tbBtnTpl("Redo", () => update(redo(getState())), "sp-icon-redo")}
+      ${tbBtnTpl("Undo", () => tabUndo(activeTab.value), "sp-icon-undo")}
+      ${tbBtnTpl("Redo", () => tabRedo(activeTab.value), "sp-icon-redo")}
     </sp-action-group>
     <div class="tb-spacer"></div>
     ${S.documentPath

package/src/reactivity.js

@@ -0,0 +1,28 @@
+/**
+ * Re-exports from @vue/reactivity. All studio code imports reactivity primitives from here (not
+ * directly from the package) for grep-ability and potential future wrapping.
+ *
+ * Version is pinned to match @jxsuite/runtime — reactive proxies from one version don't track in
+ * effects from another. See migrate-reactivity-workspace.md for rationale.
+ *
+ * Batching note: Vue's reactivity batches synchronous effect re-runs within a microtask. Use
+ * queueMicrotask() or Promise.resolve().then() to wait for the flush if needed (@vue/reactivity
+ * standalone doesn't ship nextTick).
+ */
+export {
+  reactive,
+  ref,
+  computed,
+  readonly,
+  shallowReactive,
+  shallowRef,
+  effect,
+  effectScope,
+  getCurrentScope,
+  onScopeDispose,
+  pauseTracking,
+  resetTracking,
+  toRaw,
+  isReactive,
+  isRef,
+} from "@vue/reactivity";

package/src/settings/content-types-editor.js

@@ -8,14 +8,19 @@
 import { html, render as litRender } from "lit-html";
 import { getPlatform } from "../platform.js";
 import { projectState } from "../store.js";
-import { fieldCardTpl, addFieldFormTpl, schemaForType } from "./schema-field-ui.js";
+import {
+  fieldCardTpl,
+  addFieldFormTpl,
+  schemaForType,
+  detectFieldFormat,
+} from "./schema-field-ui.js";
 
 // ─── Module state ─────────────────────────────────────────────────────────────
 
 /** @type {string | null} */
 let selectedContentType = null;
 let showAddField = false;
-let newFieldState = { name: "", type: "string", required: false };
+let newFieldState = { name: "", type: "string", format: "", required: false };
 let showNewContentType = false;
 let newContentTypeName = "";
 
@@ -76,7 +81,7 @@ function handleAddField(rerender) {
   if (!schema) return;
 
   if (!schema.properties) schema.properties = {};
-  schema.properties[name] = schemaForType(newFieldState.type);
+  schema.properties[name] = schemaForType(newFieldState.type, newFieldState.format || undefined);
 
   if (newFieldState.required) {
     if (!schema.required) schema.required = [];
@@ -84,7 +89,7 @@ function handleAddField(rerender) {
   }
 
   showAddField = false;
-  newFieldState = { name: "", type: "string", required: false };
+  newFieldState = { name: "", type: "string", format: "", required: false };
   rerender();
   saveProjectConfig();
 }
@@ -158,7 +163,41 @@ function handleChangeType(fieldName, newType, rerender) {
   const schema = getSelectedSchema();
   if (!schema?.properties?.[fieldName]) return;
 
-  schema.properties[fieldName] = schemaForType(newType);
+  const oldFormat =
+    newType === "string" || newType === "array"
+      ? detectFieldFormat(schema.properties[fieldName])
+      : undefined;
+  schema.properties[fieldName] = schemaForType(newType, oldFormat || undefined);
+  rerender();
+  saveProjectConfig();
+}
+
+/**
+ * @param {string} fieldName
+ * @param {string} format
+ * @param {() => void} rerender
+ */
+function handleChangeFormat(fieldName, format, rerender) {
+  const schema = getSelectedSchema();
+  if (!schema?.properties?.[fieldName]) return;
+
+  const prop = schema.properties[fieldName];
+  const type = prop.type || "string";
+  schema.properties[fieldName] = schemaForType(type, format || undefined);
+  rerender();
+  saveProjectConfig();
+}
+
+/**
+ * @param {string} fieldName
+ * @param {string} target
+ * @param {() => void} rerender
+ */
+function handleChangeRefTarget(fieldName, target, rerender) {
+  const schema = getSelectedSchema();
+  if (!schema?.properties) return;
+
+  schema.properties[fieldName] = { $ref: `#/contentTypes/${target}` };
   rerender();
   saveProjectConfig();
 }
@@ -264,7 +303,29 @@ function handleChangeNestedType(parentName, childName, newType, rerender) {
   const parent = schema?.properties?.[parentName];
   if (!parent?.properties?.[childName]) return;
 
-  parent.properties[childName] = schemaForType(newType);
+  const oldFormat =
+    newType === "string" || newType === "array"
+      ? detectFieldFormat(parent.properties[childName])
+      : undefined;
+  parent.properties[childName] = schemaForType(newType, oldFormat || undefined);
+  rerender();
+  saveProjectConfig();
+}
+
+/**
+ * @param {string} parentName
+ * @param {string} childName
+ * @param {string} format
+ * @param {() => void} rerender
+ */
+function handleChangeNestedFormat(parentName, childName, format, rerender) {
+  const schema = getSelectedSchema();
+  const parent = schema?.properties?.[parentName];
+  if (!parent?.properties?.[childName]) return;
+
+  const prop = parent.properties[childName];
+  const type = prop.type || "string";
+  parent.properties[childName] = schemaForType(type, format || undefined);
   rerender();
   saveProjectConfig();
 }
@@ -367,15 +428,24 @@ export function renderContentTypesEditor(container) {
       onToggleRequired: (n) => handleToggleRequired(n, rerender),
       onRename: (oldN, newN) => handleRenameField(oldN, newN, rerender),
       onChangeType: (n, t) => handleChangeType(n, t, rerender),
+      onChangeFormat: (n, f) => handleChangeFormat(n, f, rerender),
+      onChangeRefTarget: (n, target) => handleChangeRefTarget(n, target, rerender),
       onAddNestedField: (p, s) => handleAddNestedField(p, s, rerender),
       onDeleteNested: (p, c) => handleDeleteNested(p, c, rerender),
       onToggleNestedRequired: (p, c) => handleToggleNestedRequired(p, c, rerender),
       onRenameNested: (p, o, n) => handleRenameNested(p, o, n, rerender),
       onChangeNestedType: (p, c, t) => handleChangeNestedType(p, c, t, rerender),
+      onChangeNestedFormat: (p, c, f) => handleChangeNestedFormat(p, c, f, rerender),
     };
 
     const fieldCards = Object.entries(properties).map(([name, def]) =>
-      fieldCardTpl(name, /** @type {any} */ (def), required.includes(name), handlers),
+      fieldCardTpl(
+        name,
+        /** @type {any} */ (def),
+        required.includes(name),
+        handlers,
+        contentTypeNames,
+      ),
     );
 
     editorTpl = html`
@@ -402,7 +472,7 @@ export function renderContentTypesEditor(container) {
               onConfirm: () => handleAddField(rerender),
               onCancel: () => {
                 showAddField = false;
-                newFieldState = { name: "", type: "string", required: false };
+                newFieldState = { name: "", type: "string", format: "", required: false };
                 rerender();
               },
             })

package/src/settings/defs-editor.js

@@ -9,14 +9,19 @@
 import { html, render as litRender } from "lit-html";
 import { getPlatform } from "../platform.js";
 import { projectState } from "../store.js";
-import { fieldCardTpl, addFieldFormTpl, schemaForType } from "./schema-field-ui.js";
+import {
+  fieldCardTpl,
+  addFieldFormTpl,
+  schemaForType,
+  detectFieldFormat,
+} from "./schema-field-ui.js";
 
 // ─── Module state ─────────────────────────────────────────────────────────────
 
 /** @type {string | null} */
 let selectedDef = null;
 let showAddField = false;
-let newFieldState = { name: "", type: "string", required: false };
+let newFieldState = { name: "", type: "string", format: "", required: false };
 let showNewDef = false;
 let newDefName = "";
 
@@ -70,7 +75,7 @@ function handleAddField(rerender) {
   if (!def) return;
 
   if (!def.properties) def.properties = {};
-  def.properties[name] = schemaForType(newFieldState.type);
+  def.properties[name] = schemaForType(newFieldState.type, newFieldState.format || undefined);
 
   if (newFieldState.required) {
     if (!def.required) def.required = [];
@@ -78,7 +83,7 @@ function handleAddField(rerender) {
   }
 
   showAddField = false;
-  newFieldState = { name: "", type: "string", required: false };
+  newFieldState = { name: "", type: "string", format: "", required: false };
   rerender();
   saveProjectConfig();
 }
@@ -150,7 +155,27 @@ function handleChangeType(fieldName, newType, rerender) {
   const def = getSelectedDef();
   if (!def?.properties?.[fieldName]) return;
 
-  def.properties[fieldName] = schemaForType(newType);
+  const oldFormat =
+    newType === "string" || newType === "array"
+      ? detectFieldFormat(def.properties[fieldName])
+      : undefined;
+  def.properties[fieldName] = schemaForType(newType, oldFormat || undefined);
+  rerender();
+  saveProjectConfig();
+}
+
+/**
+ * @param {string} fieldName
+ * @param {string} format
+ * @param {() => void} rerender
+ */
+function handleChangeFormat(fieldName, format, rerender) {
+  const def = getSelectedDef();
+  if (!def?.properties?.[fieldName]) return;
+
+  const prop = def.properties[fieldName];
+  const type = prop.type || "string";
+  def.properties[fieldName] = schemaForType(type, format || undefined);
   rerender();
   saveProjectConfig();
 }
@@ -256,7 +281,29 @@ function handleChangeNestedType(parentName, childName, newType, rerender) {
   const parent = def?.properties?.[parentName];
   if (!parent?.properties?.[childName]) return;
 
-  parent.properties[childName] = schemaForType(newType);
+  const oldFormat =
+    newType === "string" || newType === "array"
+      ? detectFieldFormat(parent.properties[childName])
+      : undefined;
+  parent.properties[childName] = schemaForType(newType, oldFormat || undefined);
+  rerender();
+  saveProjectConfig();
+}
+
+/**
+ * @param {string} parentName
+ * @param {string} childName
+ * @param {string} format
+ * @param {() => void} rerender
+ */
+function handleChangeNestedFormat(parentName, childName, format, rerender) {
+  const def = getSelectedDef();
+  const parent = def?.properties?.[parentName];
+  if (!parent?.properties?.[childName]) return;
+
+  const prop = parent.properties[childName];
+  const type = prop.type || "string";
+  parent.properties[childName] = schemaForType(type, format || undefined);
   rerender();
   saveProjectConfig();
 }
@@ -358,11 +405,13 @@ export function renderDefsEditor(container) {
       onToggleRequired: (n) => handleToggleRequired(n, rerender),
       onRename: (oldN, newN) => handleRenameField(oldN, newN, rerender),
       onChangeType: (n, t) => handleChangeType(n, t, rerender),
+      onChangeFormat: (n, f) => handleChangeFormat(n, f, rerender),
       onAddNestedField: (p, s) => handleAddNestedField(p, s, rerender),
       onDeleteNested: (p, c) => handleDeleteNested(p, c, rerender),
       onToggleNestedRequired: (p, c) => handleToggleNestedRequired(p, c, rerender),
       onRenameNested: (p, o, n) => handleRenameNested(p, o, n, rerender),
       onChangeNestedType: (p, c, t) => handleChangeNestedType(p, c, t, rerender),
+      onChangeNestedFormat: (p, c, f) => handleChangeNestedFormat(p, c, f, rerender),
     };
 
     const fieldCards = Object.entries(properties).map(([name, fieldDef]) =>
@@ -392,7 +441,7 @@ export function renderDefsEditor(container) {
               onConfirm: () => handleAddField(rerender),
               onCancel: () => {
                 showAddField = false;
-                newFieldState = { name: "", type: "string", required: false };
+                newFieldState = { name: "", type: "string", format: "", required: false };
                 rerender();
               },
             })