@jxsuite/studio 0.11.0 → 0.14.0

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" };
   }
 }
 

package/src/state.js

@@ -33,8 +33,6 @@
  * }} StudioState
  */
 
-const HISTORY_LIMIT = 100;
-
 // ─── Path utilities ───────────────────────────────────────────────────────────
 
 /**
@@ -213,7 +211,6 @@ export function createState(doc) {
     mode: "component", // 'component' | 'content'
     content: { frontmatter: {} }, // frontmatter metadata for .md files
     ui: {
-      leftTab: "layers", // 'files' | 'layers' | 'blocks' | 'state' | 'data'
       rightTab: "properties", // 'properties' | 'events' | 'style'
       zoom: 1,
       activeMedia: null, // '--md' | null (base) — focused canvas/breakpoint
@@ -335,31 +332,6 @@ export function updateFrontmatter(state, field, value) {
   };
 }
 
-// ─── Core mutation ────────────────────────────────────────────────────────────
-
-/**
- * Apply a mutation to the document. Clones the document immutably, applies the mutation function to
- * the clone, and pushes to history.
- *
- * @param {StudioState} state
- * @param {(doc: any) => void} mutationFn
- * @returns {StudioState}
- */
-export function applyMutation(state, mutationFn) {
-  const newDoc = structuredClone(state.document);
-  mutationFn(newDoc);
-  const truncated = state.history.slice(0, state.historyIndex + 1);
-  truncated.push({ document: newDoc, selection: state.selection });
-  if (truncated.length > HISTORY_LIMIT) truncated.shift();
-  return {
-    ...state,
-    document: newDoc,
-    history: truncated,
-    historyIndex: truncated.length - 1,
-    dirty: true,
-  };
-}
-
 // ─── Selection / hover ────────────────────────────────────────────────────────
 
 /**
@@ -380,366 +352,6 @@ export function hoverNode(state, path) {
   return { ...state, hover: path };
 }
 
-// ─── Undo / redo ──────────────────────────────────────────────────────────────
-
-/**
- * @param {StudioState} state
- * @returns {StudioState}
- */
-export function undo(state) {
-  if (state.historyIndex <= 0) return state;
-  const idx = state.historyIndex - 1;
-  const snap = state.history[idx];
-  return {
-    ...state,
-    document: snap.document,
-    selection: snap.selection,
-    historyIndex: idx,
-    dirty: true,
-  };
-}
-
-/**
- * @param {StudioState} state
- * @returns {StudioState}
- */
-export function redo(state) {
-  if (state.historyIndex >= state.history.length - 1) return state;
-  const idx = state.historyIndex + 1;
-  const snap = state.history[idx];
-  return {
-    ...state,
-    document: snap.document,
-    selection: snap.selection,
-    historyIndex: idx,
-    dirty: true,
-  };
-}
-
-// ─── Document mutations ───────────────────────────────────────────────────────
-
-/**
- * @param {StudioState} state
- * @param {JxPath} parentPath
- * @param {number} index
- * @param {any} nodeDef
- * @returns {StudioState}
- */
-export function insertNode(state, parentPath, index, nodeDef) {
-  return applyMutation(state, (doc) => {
-    const parent = getNodeAtPath(doc, parentPath);
-    if (!parent.children) parent.children = [];
-    parent.children.splice(index, 0, nodeDef);
-  });
-}
-
-/**
- * @param {StudioState} state
- * @param {JxPath} path
- * @returns {StudioState}
- */
-export function removeNode(state, path) {
-  if (!path || path.length < 2) return state; // can't remove root
-  const elemPath = parentElementPath(path);
-  const idx = childIndex(path);
-  const newState = applyMutation(state, (doc) => {
-    getNodeAtPath(doc, /** @type {JxPath} */ (elemPath)).children.splice(idx, 1);
-  });
-  // Clear selection if we removed the selected node
-  if (state.selection && isAncestor(path, state.selection)) {
-    return { ...newState, selection: null };
-  }
-  return newState;
-}
-
-/**
- * @param {StudioState} state
- * @param {JxPath} path
- * @returns {StudioState}
- */
-export function duplicateNode(state, path) {
-  if (!path || path.length < 2) return state;
-  const node = getNodeAtPath(state.document, path);
-  if (!node) return state;
-  const elemPath = /** @type {JxPath} */ (parentElementPath(path));
-  const idx = /** @type {number} */ (childIndex(path));
-  const newState = insertNode(state, elemPath, idx + 1, structuredClone(node));
-  return selectNode(newState, [...elemPath, "children", idx + 1]);
-}
-
-/**
- * Wrap the node at `path` in a new wrapper element (e.g. a div).
- *
- * @param {StudioState} state
- * @param {JxPath} path
- * @param {string} wrapperTag
- * @returns {StudioState}
- */
-export function wrapNode(state, path, wrapperTag = "div") {
-  if (!path || path.length < 2) return state;
-  const node = getNodeAtPath(state.document, path);
-  if (!node) return state;
-  const elemPath = /** @type {JxPath} */ (parentElementPath(path));
-  const idx = /** @type {number} */ (childIndex(path));
-  const wrapper = { tagName: wrapperTag, children: [structuredClone(node)] };
-  const newState = applyMutation(state, (doc) => {
-    const parent = getNodeAtPath(doc, elemPath);
-    parent.children.splice(idx, 1, wrapper);
-  });
-  return selectNode(newState, [...elemPath, "children", idx]);
-}
-
-/**
- * @param {StudioState} state
- * @param {JxPath} fromPath
- * @param {JxPath} toParentPath
- * @param {number} toIndex
- * @returns {StudioState}
- */
-export function moveNode(state, fromPath, toParentPath, toIndex) {
-  const newState = applyMutation(state, (doc) => {
-    const fromParentPath = /** @type {JxPath} */ (parentElementPath(fromPath));
-    const fromParent = getNodeAtPath(doc, fromParentPath);
-    const fromIdx = childIndex(fromPath);
-    const [node] = fromParent.children.splice(fromIdx, 1);
-    const toParent = getNodeAtPath(doc, toParentPath);
-    if (!toParent.children) toParent.children = [];
-    // Adjust target index if moving within the same parent and source was before target
-    let adjustedIndex = toIndex;
-    if (fromParent === toParent && /** @type {number} */ (fromIdx) < toIndex) {
-      adjustedIndex--;
-    }
-    toParent.children.splice(adjustedIndex, 0, node);
-  });
-  // Update selection to follow the moved node
-  if (pathsEqual(newState.selection, fromPath)) {
-    let adjustedIdx = toIndex;
-    // Adjust if same parent and source was before target
-    const fromParentPath = /** @type {JxPath} */ (parentElementPath(fromPath));
-    const fromIdx = childIndex(fromPath);
-    if (
-      fromParentPath.length === toParentPath.length &&
-      fromParentPath.every((v, i) => v === toParentPath[i]) &&
-      /** @type {number} */ (fromIdx) < toIndex
-    ) {
-      adjustedIdx = toIndex - 1;
-    }
-    newState.selection = [...toParentPath, "children", adjustedIdx];
-  }
-  return newState;
-}
-
-/**
- * @param {StudioState} state
- * @param {JxPath} path
- * @param {string} key
- * @param {any} value
- * @returns {StudioState}
- */
-export function updateProperty(state, path, key, value) {
-  return applyMutation(state, (doc) => {
-    const node = getNodeAtPath(doc, path);
-    if (value === undefined || value === null || value === "") delete node[key];
-    else node[key] = value;
-  });
-}
-
-/**
- * @param {StudioState} state
- * @param {JxPath} path
- * @param {string} prop
- * @param {any} value
- * @returns {StudioState}
- */
-export function updateStyle(state, path, prop, value) {
-  return applyMutation(state, (doc) => {
-    const node = getNodeAtPath(doc, path);
-    if (!node.style) node.style = {};
-    if (value === undefined || value === "") delete node.style[prop];
-    else node.style[prop] = value;
-    if (Object.keys(node.style).length === 0) delete node.style;
-  });
-}
-
-/**
- * @param {StudioState} state
- * @param {JxPath} path
- * @param {string} attr
- * @param {any} value
- * @returns {StudioState}
- */
-export function updateAttribute(state, path, attr, value) {
-  return applyMutation(state, (doc) => {
-    const node = getNodeAtPath(doc, path);
-    if (!node.attributes) node.attributes = {};
-    if (value === undefined || value === "") delete node.attributes[attr];
-    else node.attributes[attr] = value;
-    if (Object.keys(node.attributes).length === 0) delete node.attributes;
-  });
-}
-
-/**
- * @param {StudioState} state
- * @param {string} name
- * @param {any} def
- * @returns {StudioState}
- */
-export function addDef(state, name, def) {
-  return applyMutation(state, (doc) => {
-    if (!doc.state) doc.state = {};
-    doc.state[name] = def;
-  });
-}
-
-/**
- * @param {StudioState} state
- * @param {string} name
- * @returns {StudioState}
- */
-export function removeDef(state, name) {
-  return applyMutation(state, (doc) => {
-    if (doc.state) {
-      delete doc.state[name];
-      if (Object.keys(doc.state).length === 0) delete doc.state;
-    }
-  });
-}
-
-/**
- * @param {StudioState} state
- * @param {string} name
- * @param {Record<string, any>} updates
- * @returns {StudioState}
- */
-export function updateDef(state, name, updates) {
-  return applyMutation(state, (doc) => {
-    if (!doc.state) doc.state = {};
-    if (!doc.state[name]) 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) {
-        delete doc.state[name][k];
-      }
-    }
-  });
-}
-
-/**
- * @param {StudioState} state
- * @param {string} oldName
- * @param {string} newName
- * @returns {StudioState}
- */
-export function renameDef(state, oldName, newName) {
-  return applyMutation(state, (doc) => {
-    if (!doc.state || !doc.state[oldName]) return;
-    doc.state[newName] = doc.state[oldName];
-    delete doc.state[oldName];
-  });
-}
-
-// ─── Media mutations ─────────────────────────────────────────────────────────
-
-/**
- * Update a style property inside a media override block (e.g., `@--md`).
- *
- * @param {StudioState} state
- * @param {JxPath} path
- * @param {string} mediaName
- * @param {string} prop
- * @param {any} value
- * @returns {StudioState}
- */
-export function updateMediaStyle(state, path, mediaName, prop, value) {
-  return applyMutation(state, (doc) => {
-    const node = getNodeAtPath(doc, path);
-    if (!node.style) node.style = {};
-    const key = `@${mediaName}`;
-    if (!node.style[key]) node.style[key] = {};
-    if (value === undefined || value === "") {
-      delete node.style[key][prop];
-      if (Object.keys(node.style[key]).length === 0) delete node.style[key];
-    } else {
-      node.style[key][prop] = value;
-    }
-    if (Object.keys(node.style).length === 0) delete node.style;
-  });
-}
-
-/**
- * Update a style property inside a nested selector block (e.g., :hover).
- *
- * @param {StudioState} state
- * @param {JxPath} path
- * @param {string} selector
- * @param {string} prop
- * @param {any} value
- * @returns {StudioState}
- */
-export function updateNestedStyle(state, path, selector, prop, value) {
-  return applyMutation(state, (doc) => {
-    const node = getNodeAtPath(doc, path);
-    if (!node.style) node.style = {};
-    if (!node.style[selector]) node.style[selector] = {};
-    if (value === undefined || value === "") {
-      delete node.style[selector][prop];
-      if (Object.keys(node.style[selector]).length === 0) delete node.style[selector];
-    } else {
-      node.style[selector][prop] = value;
-    }
-    if (Object.keys(node.style).length === 0) delete node.style;
-  });
-}
-
-/**
- * Update a style property inside a nested selector within a media block (e.g., `@--md` > `:hover`).
- *
- * @param {StudioState} state
- * @param {JxPath} path
- * @param {string} mediaName
- * @param {string} selector
- * @param {string} prop
- * @param {any} value
- * @returns {StudioState}
- */
-export function updateMediaNestedStyle(state, path, mediaName, selector, prop, value) {
-  return applyMutation(state, (doc) => {
-    const node = getNodeAtPath(doc, path);
-    if (!node.style) node.style = {};
-    const key = `@${mediaName}`;
-    if (!node.style[key]) node.style[key] = {};
-    if (!node.style[key][selector]) node.style[key][selector] = {};
-    if (value === undefined || value === "") {
-      delete node.style[key][selector][prop];
-      if (Object.keys(node.style[key][selector]).length === 0) delete node.style[key][selector];
-      if (Object.keys(node.style[key]).length === 0) delete node.style[key];
-    } else {
-      node.style[key][selector][prop] = value;
-    }
-    if (Object.keys(node.style).length === 0) delete node.style;
-  });
-}
-
-/**
- * Add or update a named media entry at the document root.
- *
- * @param {StudioState} state
- * @param {string} name
- * @param {any} query
- * @returns {StudioState}
- */
-export function updateMedia(state, name, query) {
-  return applyMutation(state, (doc) => {
-    if (!doc.$media) doc.$media = {};
-    if (query === undefined || query === "") {
-      delete doc.$media[name];
-      if (Object.keys(doc.$media).length === 0) delete doc.$media;
-    } else {
-      doc.$media[name] = query;
-    }
-  });
-}
-
 // ─── Document stack (component navigation) ──────────────────────────────────
 
 /**
@@ -764,7 +376,7 @@ export function pushDocument(state, doc, documentPath) {
   const newState = createState(doc);
   newState.documentStack = [...(state.documentStack || []), frame];
   newState.documentPath = documentPath;
-  newState.ui = { ...state.ui, leftTab: "layers", activeMedia: null, activeSelector: null };
+  newState.ui = { ...state.ui, activeMedia: null, activeSelector: null };
   return newState;
 }
 
@@ -782,75 +394,6 @@ export function popDocument(state) {
     ...state,
     ...frame,
     documentStack: stack,
-    ui: { ...state.ui, leftTab: "layers" },
+    ui: { ...state.ui },
   };
 }
-
-// ─── $props mutations ────────────────────────────────────────────────────────
-
-/**
- * Update a $prop on a component instance.
- *
- * @param {StudioState} state
- * @param {JxPath} path
- * @param {string} propName
- * @param {any} value
- * @returns {StudioState}
- */
-export function updateProp(state, path, propName, value) {
-  return applyMutation(state, (doc) => {
-    const node = getNodeAtPath(doc, path);
-    if (!node.$props) node.$props = {};
-    if (value === undefined || value === null || value === "") delete node.$props[propName];
-    else node.$props[propName] = value;
-    if (Object.keys(node.$props).length === 0) delete node.$props;
-  });
-}
-
-// ─── $switch case mutations ──────────────────────────────────────────────────
-
-/**
- * @param {StudioState} state
- * @param {JxPath} path
- * @param {string} caseName
- * @param {any} [caseDef]
- * @returns {StudioState}
- */
-export function addSwitchCase(state, path, caseName, caseDef) {
-  return applyMutation(state, (doc) => {
-    const node = getNodeAtPath(doc, path);
-    if (!node.cases) node.cases = {};
-    node.cases[caseName] = caseDef || { tagName: "div", textContent: caseName };
-  });
-}
-
-/**
- * @param {StudioState} state
- * @param {JxPath} path
- * @param {string} caseName
- * @returns {StudioState}
- */
-export function removeSwitchCase(state, path, caseName) {
-  return applyMutation(state, (doc) => {
-    const node = getNodeAtPath(doc, path);
-    if (node.cases) {
-      delete node.cases[caseName];
-    }
-  });
-}
-
-/**
- * @param {StudioState} state
- * @param {JxPath} path
- * @param {string} oldName
- * @param {string} newName
- * @returns {StudioState}
- */
-export function renameSwitchCase(state, path, oldName, newName) {
-  return applyMutation(state, (doc) => {
-    const node = getNodeAtPath(doc, path);
-    if (!node.cases || !node.cases[oldName]) return;
-    node.cases[newName] = node.cases[oldName];
-    delete node.cases[oldName];
-  });
-}