@jxsuite/studio 0.10.2 → 0.13.0

package/src/state.js

@@ -33,8 +33,6 @@
  * }} StudioState
  */
 
-const HISTORY_LIMIT = 100;
-
 // ─── Path utilities ───────────────────────────────────────────────────────────
 
 /**
@@ -335,31 +333,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 +353,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) ──────────────────────────────────
 
 /**
@@ -785,72 +398,3 @@ export function popDocument(state) {
     ui: { ...state.ui, leftTab: "layers" },
   };
 }
-
-// ─── $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];
-  });
-}