@jxsuite/studio 0.11.0 → 0.13.0

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,27 @@ 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();
 }
@@ -278,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();
 }
@@ -381,12 +428,14 @@ 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]) =>
@@ -423,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();
               },
             })

package/src/settings/schema-field-ui.js

@@ -5,17 +5,9 @@
 
 import { html, nothing } from "lit-html";
 
-export const FIELD_TYPES = [
-  "string",
-  "number",
-  "boolean",
-  "array",
-  "object",
-  "date",
-  "image",
-  "gallery",
-  "reference",
-];
+export const FIELD_TYPES = ["string", "number", "boolean", "array", "object", "reference"];
+
+export const FORMAT_OPTIONS = ["", "image", "date", "color"];
 
 /**
  * @typedef {{
@@ -34,6 +26,7 @@ export const FIELD_TYPES = [
  *   onToggleRequired: (name: string) => void;
  *   onRename: (oldName: string, newName: string) => void;
  *   onChangeType: (name: string, newType: string) => void;
+ *   onChangeFormat?: (name: string, format: string) => void;
  *   onChangeRefTarget?: (name: string, target: string) => void;
  *   onAddNestedField?: (
  *     parentName: string,
@@ -43,6 +36,7 @@ export const FIELD_TYPES = [
  *   onToggleNestedRequired?: (parentName: string, childName: string) => void;
  *   onRenameNested?: (parentName: string, oldChild: string, newChild: string) => void;
  *   onChangeNestedType?: (parentName: string, childName: string, newType: string) => void;
+ *   onChangeNestedFormat?: (parentName: string, childName: string, format: string) => void;
  * }} FieldHandlers
  */
 
@@ -54,12 +48,20 @@ export const FIELD_TYPES = [
  */
 export function detectFieldType(schema) {
   if (schema.$ref) return "reference";
-  if (schema.format === "image") return "image";
-  if (schema.format === "date") return "date";
-  if (schema.type === "array" && schema.items?.format === "image") return "gallery";
   return schema.type || "string";
 }
 
+/**
+ * Detect the format from a JSON Schema property definition.
+ *
+ * @param {SchemaProperty} schema
+ * @returns {string}
+ */
+export function detectFieldFormat(schema) {
+  if (schema.type === "array" && schema.items?.format) return schema.items.format;
+  return schema.format || "";
+}
+
 /**
  * Render a single schema field as an inline-editable form row.
  *
@@ -72,6 +74,7 @@ export function detectFieldType(schema) {
  */
 export function fieldCardTpl(fieldName, fieldSchema, isRequired, handlers, contentTypeNames = []) {
   const type = detectFieldType(fieldSchema);
+  const format = detectFieldFormat(fieldSchema);
   const isNested = type === "object";
   const isRef = type === "reference";
   const nestedProps = fieldSchema.properties || {};
@@ -100,6 +103,11 @@ export function fieldCardTpl(fieldName, fieldSchema, isRequired, handlers, conte
           }}
         ></sp-textfield>
         ${typePickerTpl(type, (newType) => handlers.onChangeType(fieldName, newType))}
+        ${type === "string" || type === "array"
+          ? formatPickerTpl(format, (f) => {
+              if (handlers.onChangeFormat) handlers.onChangeFormat(fieldName, f);
+            })
+          : nothing}
         <sp-switch
           size="s"
           ?checked=${isRequired}
@@ -166,6 +174,7 @@ export function fieldCardTpl(fieldName, fieldSchema, isRequired, handlers, conte
  */
 function nestedFieldCardTpl(parentName, childName, childSchema, isRequired, handlers) {
   const type = detectFieldType(childSchema);
+  const format = detectFieldFormat(childSchema);
 
   return html`
     <div class="schema-field-card schema-field-card--nested">
@@ -195,6 +204,12 @@ function nestedFieldCardTpl(parentName, childName, childSchema, isRequired, hand
           if (handlers.onChangeNestedType)
             handlers.onChangeNestedType(parentName, childName, newType);
         })}
+        ${type === "string" || type === "array"
+          ? formatPickerTpl(format, (f) => {
+              if (handlers.onChangeNestedFormat)
+                handlers.onChangeNestedFormat(parentName, childName, f);
+            })
+          : nothing}
         <sp-switch
           size="s"
           ?checked=${isRequired}
@@ -290,10 +305,30 @@ export function typePickerTpl(value, onChange) {
   `;
 }
 
+/**
+ * Render the format picker as an sp-picker dropdown.
+ *
+ * @param {string} value
+ * @param {(format: string) => void} onChange
+ * @returns {any}
+ */
+export function formatPickerTpl(value, onChange) {
+  return html`
+    <sp-picker
+      size="s"
+      label="Format"
+      value=${value}
+      @change=${(/** @type {any} */ e) => onChange(e.target.value)}
+    >
+      ${FORMAT_OPTIONS.map((f) => html`<sp-menu-item value=${f}>${f || "(none)"}</sp-menu-item>`)}
+    </sp-picker>
+  `;
+}
+
 /**
  * Render the add-field form (inline, not a dialog).
  *
- * @param {{ name: string; type: string; required: boolean }} state
+ * @param {{ name: string; type: string; format: string; required: boolean }} state
  * @param {{
  *   onInput: (field: string, value: any) => void;
  *   onConfirm: () => void;
@@ -315,6 +350,9 @@ export function addFieldFormTpl(state, handlers) {
         }}
       ></sp-textfield>
       ${typePickerTpl(state.type, (t) => handlers.onInput("type", t))}
+      ${state.type === "string" || state.type === "array"
+        ? formatPickerTpl(state.format || "", (f) => handlers.onInput("format", f))
+        : nothing}
       <sp-switch
         size="s"
         ?checked=${state.required}
@@ -329,31 +367,28 @@ export function addFieldFormTpl(state, handlers) {
 }
 
 /**
- * Build a JSON Schema property definition from a type string.
+ * Build a JSON Schema property definition from a type and optional format.
  *
  * @param {string} type
+ * @param {string} [format]
  * @returns {object}
  */
-export function schemaForType(type) {
+export function schemaForType(type, format) {
   switch (type) {
     case "number":
       return { type: "number" };
     case "boolean":
       return { type: "boolean" };
     case "array":
-      return { type: "array", items: { type: "string" } };
+      return format
+        ? { type: "array", items: { type: "string", format } }
+        : { type: "array", items: { type: "string" } };
     case "object":
       return { type: "object", properties: {}, required: [] };
-    case "date":
-      return { type: "string", format: "date" };
-    case "image":
-      return { type: "string", format: "image" };
-    case "gallery":
-      return { type: "array", items: { type: "string", format: "image" } };
     case "reference":
       return { $ref: "#/contentTypes/" };
     default:
-      return { type: "string" };
+      return format ? { type: "string", format } : { type: "string" };
   }
 }