@jxsuite/studio 0.13.0 → 0.15.0

package/dist/studio.js

@@ -1435,8 +1435,8 @@ var init_reactivity = __esm(() => {
 // src/tabs/tab.js
 function createDefaultUi() {
   return {
-    leftTab: "layers",
     rightTab: "properties",
+    canvasMode: "design",
     zoom: 1,
     activeMedia: null,
     activeSelector: null,
@@ -1460,7 +1460,14 @@ function createDefaultUi() {
     pendingInlineEdit: null
   };
 }
-function createTab({ id, documentPath = null, fileHandle = null, document: document2, frontmatter }) {
+function createTab({
+  id,
+  documentPath = null,
+  fileHandle = null,
+  document: document2,
+  frontmatter,
+  sourceFormat = null
+}) {
   const scope = effectScope();
   const tab = scope.run(() => ({
     id,
@@ -1469,8 +1476,9 @@ function createTab({ id, documentPath = null, fileHandle = null, document: docum
     scope,
     doc: reactive({
       document: document2,
+      sourceFormat,
       content: { frontmatter: frontmatter || {} },
-      mode: documentPath?.endsWith(".md") ? "content" : "component",
+      mode: sourceFormat === "md" ? "content" : documentPath?.endsWith(".md") ? "content" : "component",
       handlersSource: null,
       dirty: false
     }),
@@ -1497,6 +1505,14 @@ var init_tab = __esm(() => {
 });
 
 // src/workspace/workspace.js
+var exports_workspace = {};
+__export(exports_workspace, {
+  workspace: () => workspace,
+  openTab: () => openTab,
+  closeTab: () => closeTab,
+  activeTab: () => activeTab,
+  activateTab: () => activateTab
+});
 function openTab(opts) {
   const tab = createTab(opts);
   workspace.tabs.set(tab.id, tab);
@@ -1527,6 +1543,8 @@ var init_workspace = __esm(() => {
     projectRoot: null,
     projectConfig: null,
     componentRegistry: [],
+    clipboard: null,
+    styleClipboard: null,
     fileTree: {
       dirs: new Map,
       expanded: new Set,
@@ -1625,124 +1643,9 @@ function nodeLabel(node) {
   }
   return tag + suffix;
 }
-function createState(doc) {
-  const initial = { document: doc, selection: null };
-  return {
-    document: doc,
-    selection: null,
-    hover: null,
-    history: [initial],
-    historyIndex: 0,
-    dirty: false,
-    fileHandle: null,
-    documentPath: null,
-    documentStack: [],
-    handlersSource: null,
-    mode: "component",
-    content: { frontmatter: {} },
-    ui: {
-      leftTab: "layers",
-      rightTab: "properties",
-      zoom: 1,
-      activeMedia: null,
-      activeSelector: null,
-      featureToggles: {},
-      styleSections: {},
-      inspectorSections: {},
-      styleShorthands: {},
-      styleFilter: "",
-      styleFilterActive: false,
-      editingFunction: null,
-      stylebookSelection: null,
-      stylebookTab: "elements",
-      stylebookFilter: "",
-      stylebookCustomizedOnly: false,
-      settingsTab: "stylebook",
-      gitStatus: null,
-      gitBranches: null,
-      gitCommitMessage: "",
-      gitLoading: false,
-      gitError: null,
-      pendingInlineEdit: null
-    },
-    canvas: {
-      status: "idle",
-      scope: null,
-      error: null
-    }
-  };
-}
-function toFlat(doc, session) {
-  return { ...doc, ...session };
-}
-function fromFlat(S) {
-  const {
-    document: document2,
-    dirty,
-    fileHandle,
-    documentPath,
-    documentStack,
-    handlersSource,
-    mode,
-    content,
-    history,
-    historyIndex,
-    selection,
-    hover,
-    ui,
-    canvas
-  } = S;
-  return {
-    doc: {
-      document: document2,
-      dirty,
-      fileHandle,
-      documentPath,
-      documentStack,
-      handlersSource,
-      mode,
-      content,
-      history,
-      historyIndex
-    },
-    session: { selection, hover, ui, canvas }
-  };
-}
 function setProjectState(ps) {
   projectState = ps;
 }
-function hoverNode(state, path) {
-  return { ...state, hover: path };
-}
-function pushDocument(state, doc, documentPath) {
-  const frame = {
-    document: state.document,
-    selection: state.selection,
-    fileHandle: state.fileHandle,
-    documentPath: state.documentPath,
-    dirty: state.dirty,
-    history: state.history,
-    historyIndex: state.historyIndex,
-    mode: state.mode
-  };
-  const newState = createState(doc);
-  newState.documentStack = [...state.documentStack || [], frame];
-  newState.documentPath = documentPath;
-  newState.ui = { ...state.ui, leftTab: "layers", activeMedia: null, activeSelector: null };
-  return newState;
-}
-function popDocument(state) {
-  if (!state.documentStack || state.documentStack.length === 0)
-    return state;
-  const stack = [...state.documentStack];
-  const frame = stack.pop();
-  return {
-    ...state,
-    ...frame,
-    documentStack: stack,
-    ui: { ...state.ui, leftTab: "layers" }
-  };
-}
 var projectState = null;
 
 // src/store.js
@@ -1814,36 +1717,6 @@ function renderOnly(...names) {
     }
   }
 }
-function setUpdateFn(fn) {
-  _updateFn = fn;
-}
-function setGetStateFn(fn) {
-  _getStateFn = fn;
-}
-function getState() {
-  const tab = activeTab.value;
-  if (tab) {
-    return {
-      document: tab.doc.document,
-      mode: tab.doc.mode,
-      dirty: tab.doc.dirty,
-      handlersSource: tab.doc.handlersSource,
-      content: tab.doc.content,
-      documentPath: tab.documentPath,
-      fileHandle: tab.fileHandle,
-      selection: tab.session.selection,
-      hover: tab.session.hover,
-      clipboard: tab.session.clipboard,
-      ui: tab.session.ui,
-      canvas: tab.session.canvas,
-      documentStack: tab.session.documentStack
-    };
-  }
-  return _getStateFn();
-}
-function setUpdateSessionFn(fn) {
-  _updateSessionFn = fn;
-}
 function updateSession(patch) {
   const tab = activeTab.value;
   if (tab) {
@@ -1865,14 +1738,12 @@ function updateSession(patch) {
       }
     }
   }
-  _updateSessionFn(patch);
 }
 function updateUi(field, value) {
   const tab = activeTab.value;
   if (tab) {
     tab.session.ui[field] = value;
   }
-  _updateSessionFn({ ui: { [field]: value } });
 }
 function updateCanvas(patch) {
   const tab = activeTab.value;
@@ -1881,27 +1752,8 @@ function updateCanvas(patch) {
       tab.session.canvas[k] = v;
     }
   }
-  _updateSessionFn({ canvas: patch });
-}
-function addUpdateMiddleware(fn) {
-  _updateMiddleware.push(fn);
 }
-function runUpdateMiddleware(state) {
-  for (const mw of _updateMiddleware)
-    mw(state);
-}
-function addPostRenderHook(fn) {
-  _postRenderHooks.push(fn);
-}
-function runPostRenderHooks(prevDoc, prevSel) {
-  for (const hook of _postRenderHooks)
-    hook(prevDoc, prevSel);
-}
-var canvasWrap, activityBar, leftPanel, rightPanel, toolbarEl, statusbarEl, elToPath, canvasPanels, VOID_ELEMENTS, COMMON_SELECTORS, _styleDebounceTimers, _renderers, _updateFn = () => {
-  throw new Error("update() called before setUpdateFn() — bootstrap not complete");
-}, _getStateFn = () => null, _updateSessionFn = () => {
-  throw new Error("updateSession() called before setUpdateSessionFn() — bootstrap not complete");
-}, _updateMiddleware, _postRenderHooks;
+var canvasWrap, activityBar, leftPanel, rightPanel, toolbarEl, statusbarEl, elToPath, canvasPanels, VOID_ELEMENTS, COMMON_SELECTORS, _styleDebounceTimers, _renderers;
 var init_store = __esm(() => {
   init_workspace();
   canvasWrap = document.querySelector("#canvas-wrap");
@@ -1943,8 +1795,6 @@ var init_store = __esm(() => {
   ];
   _styleDebounceTimers = new Map;
   _renderers = new Map;
-  _updateMiddleware = [];
-  _postRenderHooks = [];
 });
 
 // ../../node_modules/bind-event-listener/dist/bind.js
@@ -42471,8 +42321,9 @@ init_reactivity();
 var HISTORY_LIMIT = 100;
 function transactDoc(tab, mutationFn, { skipHistory = false } = {}) {
   mutationFn(tab);
+  const raw = toRaw(tab.doc.document);
+  tab.doc.document = { ...raw };
   if (!skipHistory) {
-    const raw = toRaw(tab.doc.document);
     const snapshot = {
       document: structuredClone(raw),
       selection: tab.session.selection ? [...tab.session.selection] : null
@@ -42651,6 +42502,14 @@ function mutateUpdateMediaNestedStyle(tab, path, mediaName, selector, prop, valu
   if (Object.keys(node.style).length === 0)
     delete node.style;
 }
+function mutateReplaceStyle(tab, path, style) {
+  const node = getNodeAtPath(tab.doc.document, path);
+  if (style && Object.keys(style).length > 0) {
+    node.style = style;
+  } else {
+    delete node.style;
+  }
+}
 function mutateAddDef(tab, name, def2) {
   const doc = tab.doc.document;
   if (!doc.state)
@@ -42770,6 +42629,7 @@ var view = {
   showAddBreakpointForm: false,
   addBreakpointPreview: "",
   layoutSelection: null,
+  leftTab: "layers",
   autosaveTimer: null
 };
 // data/elements-meta.json
@@ -46364,22 +46224,19 @@ function mountStatusbar() {
       tab.doc.document;
       tab.doc.mode;
       tab.session.selection;
-      renderStatusbar({
-        mode: tab.doc.mode,
-        document: tab.doc.document,
-        selection: tab.session.selection
-      });
+      renderStatusbar();
     });
   });
 }
-function renderStatusbar(S) {
+function renderStatusbar() {
+  const tab = activeTab.value;
   const parts = [];
-  if (S.mode === "content")
+  if (tab?.doc.mode === "content")
     parts.push("Content Mode");
-  if (S.selection) {
-    const node = getNodeAtPath(S.document, S.selection);
+  if (tab?.session.selection) {
+    const node = getNodeAtPath(tab.doc.document, tab.session.selection);
     parts.push(`Selected: ${nodeLabel(node)}`);
-    parts.push(`Path: ${S.selection.join(" > ") || "root"}`);
+    parts.push(`Path: ${tab.session.selection.join(" > ") || "root"}`);
   }
   if (statusMsg)
     parts.push(statusMsg);
@@ -47041,8 +46898,7 @@ function enterComponentInlineEdit(el, path) {
   if (view.componentInlineEdit && view.componentInlineEdit.el === el) {
     return;
   }
-  const S = getState();
-  const node = getNodeAtPath(S.document, path);
+  const node = getNodeAtPath(activeTab.value?.doc.document, path);
   if (!node)
     return;
   const tc = node.textContent;
@@ -47443,8 +47299,7 @@ function enterInlineEdit(el, path) {
   }
   startEditing(el, path, {
     onCommit(commitPath, children, textContent) {
-      const S = getState();
-      const node = getNodeAtPath(S.document, commitPath);
+      const node = getNodeAtPath(activeTab.value?.doc.document, commitPath);
       if (children) {
         if (node && JSON.stringify(node.children) === JSON.stringify(children))
           return;
@@ -47968,9 +47823,7 @@ function applyTransform() {
     return;
   const zoom = _ctx4.getZoom();
   view.panzoomWrap.style.transform = `translate(${view.panX}px, ${view.panY}px) scale(${zoom})`;
-  const label = document.querySelector(".zoom-indicator-label");
-  if (label)
-    label.textContent = `${Math.round(zoom * 100)}%`;
+  renderZoomIndicator();
   renderOnly("overlays");
   if (_ctx4.getCanvasMode() === "settings")
     _ctx4.renderStylebookOverlays();
@@ -175185,6 +175038,23 @@ async function renderCanvasLive(gen, doc, canvasEl) {
     } else {
       canvasEl.removeAttribute("data-content-mode");
     }
+    const platform3 = globalThis.__jxPlatform;
+    if (platform3?.resolveAssetUrl && docBase) {
+      const mediaEls = el.querySelectorAll("img[src], video[src], source[src], video[poster]");
+      for (const node of mediaEls) {
+        for (const attr of ["src", "poster"]) {
+          const val = node.getAttribute(attr);
+          if (val && !val.startsWith("data:") && !val.startsWith("blob:") && !val.startsWith("http")) {
+            try {
+              const resolved = new URL(val, docBase).pathname.replace(/^\//, "");
+              const dataUrl = await platform3.resolveAssetUrl(resolved);
+              if (dataUrl)
+                node.setAttribute(attr, dataUrl);
+            } catch {}
+          }
+        }
+      }
+    }
     canvasEl.appendChild(el);
     if (canvasMode === "design" || canvasMode === "edit") {
       requestAnimationFrame(() => {
@@ -175207,6 +175077,7 @@ async function renderCanvasLive(gen, doc, canvasEl) {
 
 // src/panels/preview-render.js
 init_store();
+init_workspace();
 
 // src/panels/signals-panel.js
 init_workspace();
@@ -176126,7 +175997,7 @@ function renderCanvasNode(node, path, parent, activeBreakpoints, featureToggles)
   if (typeof node.textContent === "string") {
     el.textContent = node.textContent;
   } else if (typeof node.textContent === "object" && node.textContent?.$ref) {
-    const resolved = resolveDefaultForCanvas(node.textContent, getState().document.state);
+    const resolved = resolveDefaultForCanvas(node.textContent, activeTab.value?.doc.document?.state);
     el.textContent = resolved;
     el.style.opacity = "0.7";
     el.style.fontStyle = "italic";
@@ -176141,7 +176012,7 @@ function renderCanvasNode(node, path, parent, activeBreakpoints, featureToggles)
     for (const [attr, val] of Object.entries(node.attributes)) {
       try {
         if (typeof val === "object" && val?.$ref) {
-          const resolved = resolveDefaultForCanvas(val, getState().document.state);
+          const resolved = resolveDefaultForCanvas(val, activeTab.value?.doc.document?.state);
           el.setAttribute(attr, resolved);
         } else {
           el.setAttribute(attr, val);
@@ -176177,6 +176048,7 @@ function renderCanvasNode(node, path, parent, activeBreakpoints, featureToggles)
 
 // src/panels/canvas-dnd.js
 init_store();
+init_workspace();
 // ../../node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js
 function _objectWithoutPropertiesLoose(r, e) {
   if (r == null)
@@ -177647,8 +177519,7 @@ registerBlockType( name, settings );`
 var _ctx6 = null;
 function renderStylebookMode(ctx) {
   _ctx6 = ctx;
-  const S = getState();
-  const settingsTab = S.ui.settingsTab || "stylebook";
+  const settingsTab = activeTab.value?.session.ui.settingsTab || "stylebook";
   const settingsChromeBarTpl = html`
     <div
       class="sb-chrome settings-top-chrome"
@@ -177682,10 +177553,11 @@ function renderStylebookMode(ctx) {
     return;
   }
   view.stylebookElToTag = new WeakMap;
-  const rootStyle = getEffectiveStyle(S.document.style);
-  const filter = (S.ui.stylebookFilter || "").toLowerCase();
-  const customizedOnly = S.ui.stylebookCustomizedOnly;
-  const { sizeBreakpoints, baseWidth } = parseMediaEntries(getEffectiveMedia(S.document.$media));
+  const tab = activeTab.value;
+  const rootStyle = getEffectiveStyle(tab?.doc.document?.style);
+  const filter = (tab?.session.ui.stylebookFilter || "").toLowerCase();
+  const customizedOnly = tab?.session.ui.stylebookCustomizedOnly;
+  const { sizeBreakpoints, baseWidth } = parseMediaEntries(getEffectiveMedia(tab?.doc.document?.$media));
   const hasMedia = sizeBreakpoints.length > 0;
   const onTabClick = (t) => {
     updateUi("stylebookTab", t);
@@ -177694,7 +177566,7 @@ function renderStylebookMode(ctx) {
     updateUi("stylebookFilter", e.target.value);
   };
   const onCustomizedToggle = () => {
-    updateUi("stylebookCustomizedOnly", !S.ui.stylebookCustomizedOnly);
+    updateUi("stylebookCustomizedOnly", !tab?.session.ui.stylebookCustomizedOnly);
   };
   const chromeBarTpl = html`
     ${settingsChromeBarTpl}
@@ -177704,7 +177576,7 @@ function renderStylebookMode(ctx) {
     >
       <sp-tabs
         size="s"
-        selected=${S.ui.stylebookTab || "elements"}
+        selected=${tab?.session.ui.stylebookTab || "elements"}
         @change=${(e) => {
     onTabClick(e.target.selected);
   }}
@@ -177713,16 +177585,16 @@ function renderStylebookMode(ctx) {
             <sp-tab label=${t.charAt(0).toUpperCase() + t.slice(1)} value=${t}></sp-tab>
           `)}
       </sp-tabs>
-      ${S.ui.stylebookTab === "elements" ? html`
+      ${tab?.session.ui.stylebookTab === "elements" ? html`
             <input
               class="field-input"
               style="flex:1;max-width:200px;margin-left:8px"
               placeholder="Filter…"
-              .value=${S.ui.stylebookFilter}
+              .value=${tab?.session.ui.stylebookFilter}
               @input=${onFilterInput2}
             />
             <button
-              class="tb-toggle${S.ui.stylebookCustomizedOnly ? " active" : ""}"
+              class="tb-toggle${tab?.session.ui.stylebookCustomizedOnly ? " active" : ""}"
               style="margin-left:4px"
               @click=${onCustomizedToggle}
             >
@@ -177751,7 +177623,7 @@ function renderStylebookMode(ctx) {
   }
   const renderIntoPanel = (panel, activeBreakpoints) => {
     panel.canvas.classList.add("sb-canvas");
-    if (S.ui.stylebookTab === "elements") {
+    if (tab?.session.ui.stylebookTab === "elements") {
       renderStylebookElementsIntoCanvas(panel.canvas, rootStyle, filter, customizedOnly, activeBreakpoints);
       for (const child of panel.canvas.querySelectorAll("*")) {
         child.style.pointerEvents = "none";
@@ -177764,7 +177636,7 @@ function renderStylebookMode(ctx) {
   };
   let panelEntries;
   if (!hasMedia) {
-    const effectiveMedia = getEffectiveMedia(S.document.$media);
+    const effectiveMedia = getEffectiveMedia(tab?.doc.document?.$media);
     const hasBaseWidth = effectiveMedia && effectiveMedia["--"];
     const label = hasBaseWidth ? `${mediaDisplayName("--")} (${baseWidth}px)` : null;
     const entry = ctx.canvasPanelTemplate(hasBaseWidth ? "base" : null, label, !hasBaseWidth, hasBaseWidth ? baseWidth : undefined);
@@ -177817,8 +177689,7 @@ function renderStylebookOverlays() {
     return;
   if (canvasPanels.length === 0)
     return;
-  const S = getState();
-  const selectedTag = S.ui.stylebookSelection;
+  const selectedTag = activeTab.value?.session.ui.stylebookSelection;
   for (const panel of canvasPanels) {
     const hoverTag = panel._lastHoverTag;
     const boxes = [];
@@ -178507,6 +178378,7 @@ function registerLayersDnD() {
       const rowPath = row.dataset.path.split("/").map((s) => /^\d+$/.test(s) ? parseInt(s) : s);
       const rowDepth = parseInt(row.dataset.dndDepth) || 0;
       const isVoid = row.hasAttribute("data-dnd-void");
+      const isExpanded = row.hasAttribute("data-dnd-expanded");
       const cleanup = combine(draggable({
         element: row,
         canDrag({ element: _el, input }) {
@@ -178521,9 +178393,15 @@ function registerLayersDnD() {
         onDragStart() {
           row.classList.add("dragging");
           view.layerDragSourceHeight = row.offsetHeight;
+          if (isExpanded) {
+            hideDescendantRows(row, container);
+          }
         },
         onDrop() {
           row.classList.remove("dragging");
+          if (isExpanded) {
+            renderOnly("leftPanel");
+          }
         }
       }), dropTargetForElements({
         element: row,
@@ -178539,6 +178417,7 @@ function registerLayersDnD() {
             element,
             currentLevel: rowDepth,
             indentPerLevel: 16,
+            mode: isExpanded ? "expanded" : "standard",
             block: isVoid ? ["make-child"] : []
           });
         },
@@ -178568,7 +178447,17 @@ function registerLayersDnD() {
           return;
         const srcData = source.data;
         const targetPath = target.data.path;
+        const srcRow = srcData.type === "tree-node" && source.element;
+        const wasExpanded = srcRow && srcRow.hasAttribute("data-dnd-expanded");
         applyDropInstruction(instruction, srcData, targetPath);
+        if (wasExpanded) {
+          const tab = activeTab.value;
+          const newPath = tab?.session.selection;
+          if (newPath) {
+            const collapsed = view._layersCollapsed || (view._layersCollapsed = new Set);
+            collapsed.add(newPath.join("/"));
+          }
+        }
       }
     });
     view.dndCleanups.push(monitorCleanup);
@@ -178634,6 +178523,15 @@ function registerElementsDnD() {
     });
   });
 }
+function hideDescendantRows(parentRow, container) {
+  const prefix = parentRow.dataset.path + "/";
+  const rows = container.querySelectorAll(".layers-tree .layer-row");
+  for (const r of rows) {
+    if (r.dataset.path?.startsWith(prefix)) {
+      r.style.display = "none";
+    }
+  }
+}
 function showLayerDropGap(rowEl, data, container) {
   const instruction = extractInstruction(data);
   if (view._currentDropTargetRow && view._currentDropTargetRow !== rowEl) {
@@ -178674,7 +178572,7 @@ function clearLayerDropGap(container) {
     r.style.transform = "";
 }
 function applyDropInstruction(instruction, srcData, targetPath) {
-  const S = getState();
+  const document2 = activeTab.value?.doc.document;
   if (srcData.type === "tree-node") {
     const fromPath = srcData.path;
     const targetParent = parentElementPath(targetPath);
@@ -178687,7 +178585,7 @@ function applyDropInstruction(instruction, srcData, targetPath) {
         transactDoc(activeTab.value, (t) => mutateMoveNode(t, fromPath, targetParent, targetIdx + 1));
         break;
       case "make-child": {
-        const target = getNodeAtPath(S.document, targetPath);
+        const target = getNodeAtPath(document2, targetPath);
         const len = target?.children?.length || 0;
         transactDoc(activeTab.value, (t) => mutateMoveNode(t, fromPath, targetPath, len));
         break;
@@ -178704,7 +178602,7 @@ function applyDropInstruction(instruction, srcData, targetPath) {
         transactDoc(activeTab.value, (t) => mutateInsertNode(t, targetParent, targetIdx + 1, structuredClone(srcData.fragment)));
         break;
       case "make-child": {
-        const target = getNodeAtPath(S.document, targetPath);
+        const target = getNodeAtPath(document2, targetPath);
         const len = target?.children?.length || 0;
         transactDoc(activeTab.value, (t) => mutateInsertNode(t, targetPath, len, structuredClone(srcData.fragment)));
         break;
@@ -178714,8 +178612,8 @@ function applyDropInstruction(instruction, srcData, targetPath) {
     if (tag3 && tag3.includes("-")) {
       const comp = componentRegistry.find((c) => c.tagName === tag3);
       if (comp) {
-        const currentS = getState();
-        const elements = currentS.document.$elements || [];
+        const tab = activeTab.value;
+        const elements = tab?.doc.document?.$elements || [];
         if (comp.source === "npm") {
           const specifier = comp.modulePath ? `${comp.package}/${comp.modulePath}` : comp.package;
           const alreadyImported = elements.some((e) => e === specifier || e === comp.package);
@@ -178729,7 +178627,7 @@ function applyDropInstruction(instruction, srcData, targetPath) {
         } else {
           const alreadyImported = elements.some((e) => e.$ref && (e.$ref === `./${comp.path}` || e.$ref.endsWith(comp.path.split("/").pop())));
           if (!alreadyImported) {
-            const relPath = computeRelativePath(currentS.documentPath, comp.path);
+            const relPath = computeRelativePath(tab?.documentPath, comp.path);
             transact(activeTab.value, (doc) => {
               if (!doc.$elements)
                 doc.$elements = [];
@@ -178773,12 +178671,12 @@ function registerPanelDnD(panel) {
     }
   });
   view.canvasDndCleanups.push(monitorCleanup);
-  const S = getState();
+  const document2 = activeTab.value?.doc.document;
   for (const el of allEls) {
     const elPath = elToPath.get(el);
     if (!elPath)
       continue;
-    const node = getNodeAtPath(S.document, elPath);
+    const node = getNodeAtPath(document2, elPath);
     const tag3 = (node?.tagName || "div").toLowerCase();
     const hasElementChildren = node?.children?.some((c) => c != null && typeof c === "object");
     const isLeaf2 = VOID_ELEMENTS.has(tag3) || !hasElementChildren;
@@ -178897,42 +178795,46 @@ init_workspace();
 init_store();
 init_workspace();
 init_components();
-var clipboard = null;
-function copyNode(S) {
-  if (!S.selection)
+function copyNode() {
+  const tab = activeTab.value;
+  if (!tab?.session.selection)
     return;
-  const node = getNodeAtPath(S.document, S.selection);
+  const node = getNodeAtPath(tab.doc.document, tab.session.selection);
   if (!node)
     return;
-  clipboard = structuredClone(node);
+  workspace.clipboard = structuredClone(node);
   statusMessage("Copied");
 }
-function cutNode(S) {
-  if (!S.selection || S.selection.length < 2)
+function cutNode() {
+  const tab = activeTab.value;
+  if (!tab?.session.selection || tab.session.selection.length < 2)
     return;
-  const sel = S.selection;
-  const node = getNodeAtPath(S.document, sel);
+  const sel = tab.session.selection;
+  const node = getNodeAtPath(tab.doc.document, sel);
   if (!node)
     return;
-  clipboard = structuredClone(node);
-  transactDoc(activeTab.value, (t) => mutateRemoveNode(t, sel));
+  workspace.clipboard = structuredClone(node);
+  transactDoc(tab, (t) => mutateRemoveNode(t, sel));
   statusMessage("Cut");
 }
-function pasteNode(S) {
-  if (!clipboard)
+function pasteNode() {
+  if (!workspace.clipboard)
+    return;
+  const tab = activeTab.value;
+  if (!tab)
     return;
-  const clip = clipboard;
-  const pPath = S.selection || [];
-  const parent = getNodeAtPath(S.document, pPath);
+  const clip = workspace.clipboard;
+  const pPath = tab.session.selection || [];
+  const parent = getNodeAtPath(tab.doc.document, pPath);
   if (!parent)
     return;
-  if (S.selection && S.selection.length >= 2) {
-    const pp = parentElementPath(S.selection);
-    const idx = childIndex(S.selection);
-    transactDoc(activeTab.value, (t) => mutateInsertNode(t, pp, idx + 1, structuredClone(clip)));
+  if (tab.session.selection && tab.session.selection.length >= 2) {
+    const pp = parentElementPath(tab.session.selection);
+    const idx = childIndex(tab.session.selection);
+    transactDoc(tab, (t) => mutateInsertNode(t, pp, idx + 1, structuredClone(clip)));
   } else {
     const idx = parent.children ? parent.children.length : 0;
-    transactDoc(activeTab.value, (t) => mutateInsertNode(t, pPath, idx, structuredClone(clip)));
+    transactDoc(tab, (t) => mutateInsertNode(t, pPath, idx, structuredClone(clip)));
   }
   statusMessage("Pasted");
 }
@@ -178946,21 +178848,43 @@ document.addEventListener("click", () => {
 function dismissContextMenu() {
   ctxMenu.removeAttribute("open");
 }
-function showContextMenu(e, path, S, opts = {}) {
+function showContextMenu(e, path, opts = {}) {
   e.preventDefault();
   ctxMenu.removeAttribute("open");
-  const node = getNodeAtPath(S.document, path);
+  const tab = activeTab.value;
+  const node = getNodeAtPath(tab?.doc.document, path);
   if (!node)
     return;
-  activeTab.value.session.selection = path;
+  tab.session.selection = path;
   const items = [];
-  items.push({ label: "Copy", action: () => copyNode(S) });
+  items.push({ label: "Copy", action: () => copyNode() });
   if (path.length >= 2) {
-    items.push({ label: "Cut", action: () => cutNode(S) });
+    items.push({ label: "Cut", action: () => cutNode() });
     items.push({
       label: "Duplicate",
       action: () => transactDoc(activeTab.value, (t) => mutateDuplicateNode(t, path))
     });
+    if (node.style) {
+      items.push({
+        label: "Copy styles",
+        action: () => {
+          workspace.styleClipboard = JSON.parse(JSON.stringify(node.style));
+          statusMessage("Styles copied");
+        }
+      });
+    }
+    if (workspace.styleClipboard) {
+      items.push({
+        label: "Paste styles",
+        action: () => {
+          if (!workspace.styleClipboard)
+            return;
+          const style = JSON.parse(JSON.stringify(workspace.styleClipboard));
+          transactDoc(activeTab.value, (t) => mutateReplaceStyle(t, path, style));
+          statusMessage("Styles pasted");
+        }
+      });
+    }
     items.push({ label: "—" });
     items.push({
       label: "Insert before",
@@ -179004,8 +178928,8 @@ function showContextMenu(e, path, S, opts = {}) {
       danger: true
     });
   }
-  if (clipboard) {
-    const clip = clipboard;
+  if (workspace.clipboard) {
+    const clip = workspace.clipboard;
     items.push({ label: "—" });
     items.push({
       label: "Paste inside",
@@ -179253,7 +179177,7 @@ function registerPanelEvents(panel) {
     if (isEditing()) {
       stopEditing();
     }
-    const S = _ctx8.getState();
+    const tab = activeTab.value;
     const canvasMode = _ctx8.getCanvasMode();
     const elements = withPanelPointerEvents(() => document.elementsFromPoint(e.clientX, e.clientY));
     for (const el of elements) {
@@ -179267,16 +179191,15 @@ function registerPanelEvents(panel) {
         view.layoutSelection = null;
         const originalPath = elToPath.get(el);
         if (originalPath) {
-          let path = bubbleInlinePath(S.document, originalPath);
+          let path = bubbleInlinePath(tab?.doc.document, originalPath);
           const newMedia = mediaName === "base" ? null : mediaName ?? null;
-          const withMedia = { ...S, ui: { ...S.ui, activeMedia: newMedia } };
           const resolvedEl = path === originalPath ? el : findCanvasElement(path, canvas) || el;
-          if (pathsEqual(path, S.selection) && isEditableBlock(resolvedEl) && (canvasMode === "edit" || S.mode === "content")) {
-            _ctx8.setState(withMedia);
+          if (pathsEqual(path, tab?.session.selection) && isEditableBlock(resolvedEl) && (canvasMode === "edit" || tab?.doc.mode === "content")) {
+            activeTab.value.session.ui.activeMedia = newMedia;
             _ctx8.enterInlineEdit(resolvedEl, path);
             return;
           }
-          if (canvasMode === "design" && S.mode !== "content") {
+          if (canvasMode === "design" && tab?.doc.mode !== "content") {
             updateUi("pendingInlineEdit", { path, mediaName });
             activeTab.value.session.ui.activeMedia = newMedia;
             activeTab.value.session.selection = path;
@@ -179300,13 +179223,13 @@ function registerPanelEvents(panel) {
     const canvasMode = _ctx8.getCanvasMode();
     if (canvasMode !== "edit" && canvasMode !== "design")
       return;
-    const S = _ctx8.getState();
+    const tab = activeTab.value;
     const elements = withPanelPointerEvents(() => document.elementsFromPoint(e.clientX, e.clientY));
     for (const el of elements) {
       if (canvas.contains(el) && el !== canvas) {
         const originalPath = elToPath.get(el);
         if (originalPath) {
-          const path = bubbleInlinePath(S.document, originalPath);
+          const path = bubbleInlinePath(tab?.doc.document, originalPath);
           const resolvedEl = path === originalPath ? el : findCanvasElement(path, canvas) || el;
           if (isEditableBlock(resolvedEl)) {
             const newMedia = mediaName === "base" ? null : mediaName ?? null;
@@ -179326,14 +179249,14 @@ function registerPanelEvents(panel) {
       if (e.clientX >= r.left && e.clientX <= r.right && e.clientY >= r.top && e.clientY <= r.bottom)
         return;
     }
-    const S = _ctx8.getState();
+    const tab = activeTab.value;
     const elements = withPanelPointerEvents(() => document.elementsFromPoint(e.clientX, e.clientY));
     for (const el of elements) {
       if (canvas.contains(el) && el !== canvas) {
         let path = elToPath.get(el);
         if (path) {
-          path = bubbleInlinePath(S.document, path);
-          showContextMenu(e, path, S, { onEditComponent: _ctx8.navigateToComponent });
+          path = bubbleInlinePath(tab?.doc.document, path);
+          showContextMenu(e, path, { onEditComponent: _ctx8.navigateToComponent });
           return;
         }
       }
@@ -179347,31 +179270,29 @@ function registerPanelEvents(panel) {
       if (e.clientX >= r.left && e.clientX <= r.right && e.clientY >= r.top && e.clientY <= r.bottom)
         return;
     }
-    let S = _ctx8.getState();
+    const tab = activeTab.value;
     const el = withPanelPointerEvents(() => document.elementFromPoint(e.clientX, e.clientY));
     if (el && canvas.contains(el) && el !== canvas) {
       let path = elToPath.get(el);
       if (path) {
-        path = bubbleInlinePath(S.document, path);
-        if (!pathsEqual(path, S.hover)) {
-          _ctx8.setState(hoverNode(S, path));
+        path = bubbleInlinePath(tab?.doc.document, path);
+        if (!pathsEqual(path, tab?.session.hover)) {
+          activeTab.value.session.hover = path;
           renderOnly("overlays");
         }
       }
-    } else if (S.hover) {
-      _ctx8.setState(hoverNode(S, null));
+    } else if (tab?.session.hover) {
+      activeTab.value.session.hover = null;
       renderOnly("overlays");
     }
   }, opts);
   overlayClk.addEventListener("mouseleave", () => {
-    const S = _ctx8.getState();
-    if (S.hover) {
-      _ctx8.setState(hoverNode(S, null));
+    if (activeTab.value?.session.hover) {
+      activeTab.value.session.hover = null;
       renderOnly("overlays");
     }
   }, opts);
   mount2({
-    getState: _ctx8.getState,
     getCanvasMode: _ctx8.getCanvasMode,
     withPanelPointerEvents,
     effectiveZoom,
@@ -179482,6 +179403,7 @@ function computeDocumentDiff(originalDoc, currentDoc) {
 
 // src/panels/pseudo-preview.js
 init_store();
+init_workspace();
 var pseudoStyleHost = document.createElement("div");
 pseudoStyleHost.style.display = "contents";
 (document.querySelector("sp-theme") || document.body).appendChild(pseudoStyleHost);
@@ -179494,21 +179416,21 @@ function updateForcedPseudoPreview() {
     view.forcedAttrEl.removeAttribute("data-studio-forced");
     view.forcedAttrEl = null;
   }
-  const S = getState();
-  const sel = S.ui?.activeSelector;
-  if (!sel || !sel.startsWith(":") || !S.selection)
+  const tab = activeTab.value;
+  const sel = tab?.session.ui?.activeSelector;
+  if (!sel || !sel.startsWith(":") || !tab?.session.selection)
     return;
   const panel = getActivePanel();
   if (!panel)
     return;
-  const el = findCanvasElement(S.selection, panel.canvas);
+  const el = findCanvasElement(tab.session.selection, panel.canvas);
   if (!el)
     return;
-  const node = getNodeAtPath(S.document, S.selection);
+  const node = getNodeAtPath(tab.doc.document, tab.session.selection);
   if (!node?.style)
     return;
-  const activeTab2 = S.ui.activeMedia;
-  const ctx = activeTab2 ? node.style[`@${activeTab2}`] || {} : node.style;
+  const activeMedia = tab.session.ui.activeMedia;
+  const ctx = activeMedia ? node.style[`@${activeMedia}`] || {} : node.style;
   const rules = ctx[sel];
   if (!rules || typeof rules !== "object")
     return;
@@ -180013,18 +179935,17 @@ function invalidateBrowseCache() {
 init_store();
 init_workspace();
 function getFunctionBody(editing) {
-  const S = getState();
+  const document2 = activeTab.value?.doc.document;
   if (editing.type === "def") {
-    return S.document.state?.[editing.defName]?.body || "";
+    return document2?.state?.[editing.defName]?.body || "";
   } else if (editing.type === "event") {
-    const node = getNodeAtPath(S.document, editing.path);
+    const node = getNodeAtPath(document2, editing.path);
     return node?.[editing.eventKey]?.body || "";
   }
   return "";
 }
 function renderFunctionEditor() {
-  const S = getState();
-  const editing = S.ui.editingFunction;
+  const editing = activeTab.value?.session.ui.editingFunction;
   if (view.functionEditor && view.functionEditor._editingTarget === JSON.stringify(editing)) {
     const body2 = getFunctionBody(editing);
     const currentVal = view.functionEditor.getValue();
@@ -180061,7 +179982,7 @@ function renderFunctionEditor() {
   })}
     ></div>`, canvasWrap);
   const body = getFunctionBody(editing);
-  const args = getFunctionArgs(editing, S);
+  const args = getFunctionArgs(editing, activeTab.value?.doc.document);
   view.functionEditor = editor.create(editorContainer, {
     value: body,
     language: "javascript",
@@ -180097,13 +180018,13 @@ function renderFunctionEditor() {
     clearTimeout(syncDebounce);
     syncDebounce = setTimeout(() => {
       const newBody = view.functionEditor.getValue();
-      if (editing.type === "def") {
-        transactDoc(activeTab.value, (t) => mutateUpdateDef(t, editing.defName, { body: newBody }));
-      } else if (editing.type === "event") {
-        const S2 = getState();
-        const node = getNodeAtPath(S2.document, editing.path);
-        const current = node?.[editing.eventKey] || {};
-        transactDoc(activeTab.value, (t) => mutateUpdateProperty(t, editing.path, editing.eventKey, {
+      const ed = editing;
+      if (ed.type === "def") {
+        transactDoc(activeTab.value, (t) => mutateUpdateDef(t, ed.defName, { body: newBody }));
+      } else if (ed.type === "event") {
+        const node = getNodeAtPath(activeTab.value?.doc.document, ed.path);
+        const current = node?.[ed.eventKey] || {};
+        transactDoc(activeTab.value, (t) => mutateUpdateProperty(t, ed.path, ed.eventKey, {
           ...current,
           $prototype: "Function",
           body: newBody
@@ -180131,8 +180052,7 @@ function registerFunctionCompletions() {
   languages.registerCompletionItemProvider("javascript", {
     triggerCharacters: ["."],
     provideCompletionItems(model, position) {
-      const S = getState();
-      const defs = S?.document?.state || {};
+      const defs = activeTab.value?.doc.document?.state || {};
       const word = model.getWordUntilPosition(position);
       const range2 = {
         startLineNumber: position.lineNumber,
@@ -180573,8 +180493,9 @@ function renderCanvasIntoPanel(panel, activeBreakpoints, featureToggles, docOver
       statusMessage("Runtime render OK", 1500);
       if (gitDiffState && docOverride) {
         const isOriginal = docOverride === (gitDiffState.originalDoc || gitDiffState.original);
-        const origDoc = isOriginal ? docOverride : gitDiffState.currentDoc || tab?.doc.document;
-        const currDoc = isOriginal ? gitDiffState.currentDoc || tab?.doc.document : docOverride;
+        const _tab = activeTab.value;
+        const origDoc = isOriginal ? docOverride : gitDiffState.currentDoc || _tab?.doc.document;
+        const currDoc = isOriginal ? gitDiffState.currentDoc || _tab?.doc.document : docOverride;
         const { byPath: diffMap } = computeDocumentDiff(origDoc, currDoc);
         const { elToPath: elToPath2 } = scope;
         if (elToPath2 instanceof WeakMap) {
@@ -180589,6 +180510,17 @@ function renderCanvasIntoPanel(panel, activeBreakpoints, featureToggles, docOver
     registerPanelEvents(panel);
     renderOverlays();
     updateForcedPseudoPreview();
+    const currentTab = activeTab.value;
+    if (currentTab?.session.ui?.pendingInlineEdit) {
+      const { path, mediaName: mn } = currentTab.session.ui.pendingInlineEdit;
+      currentTab.session.ui.pendingInlineEdit = null;
+      const targetPanel = canvasPanels.find((p) => p.mediaName === mn) || canvasPanels[0];
+      if (targetPanel) {
+        const el = findCanvasElement(path, targetPanel.canvas);
+        if (el)
+          enterComponentInlineEdit(el, path);
+      }
+    }
   });
 }
 function applyDiffHighlightToCanvas(canvas, diffMap) {
@@ -184209,9 +184141,9 @@ function collapsePropsToAttrMap(propsObj) {
 }
 
 // src/files/file-ops.js
-init_store();
 init_platform();
-async function openFile({ S: _S, commit, renderToolbar: _renderToolbar }) {
+init_workspace();
+async function openFile() {
   try {
     if ("showOpenFilePicker" in window) {
       const [handle2] = await window.showOpenFilePicker({
@@ -184222,17 +184154,20 @@ async function openFile({ S: _S, commit, renderToolbar: _renderToolbar }) {
       });
       const file = await handle2.getFile();
       const text6 = await file.text();
+      const documentPath = await locateDocument(handle2.name);
       if (handle2.name.endsWith(".md")) {
-        const newState = await loadMarkdown(text6, handle2);
-        commit(newState);
+        const { document: document4, frontmatter: frontmatter2 } = await loadMarkdown(text6);
+        openTab({
+          id: handle2.name,
+          documentPath,
+          fileHandle: handle2,
+          document: document4,
+          frontmatter: frontmatter2,
+          sourceFormat: "md"
+        });
       } else {
-        const doc = JSON.parse(text6);
-        const newState = createState(doc);
-        newState.fileHandle = handle2;
-        newState.dirty = false;
-        newState.documentPath = await locateDocument(handle2.name);
-        await loadCompanionJS(handle2, newState);
-        commit(newState);
+        const document4 = JSON.parse(text6);
+        openTab({ id: handle2.name, documentPath, fileHandle: handle2, document: document4 });
       }
       statusMessage(`Opened ${handle2.name}`);
     } else {
@@ -184245,13 +184180,11 @@ async function openFile({ S: _S, commit, renderToolbar: _renderToolbar }) {
           return;
         const text6 = await file.text();
         if (file.name.endsWith(".md")) {
-          const newState = await loadMarkdown(text6, null);
-          commit(newState);
+          const { document: document4, frontmatter: frontmatter2 } = await loadMarkdown(text6);
+          openTab({ id: file.name, document: document4, frontmatter: frontmatter2, sourceFormat: "md" });
         } else {
-          const doc = JSON.parse(text6);
-          const newState = createState(doc);
-          newState.dirty = false;
-          commit(newState);
+          const document4 = JSON.parse(text6);
+          openTab({ id: file.name, document: document4 });
         }
         statusMessage(`Opened ${file.name}`);
       };
@@ -184262,59 +184195,37 @@ async function openFile({ S: _S, commit, renderToolbar: _renderToolbar }) {
       statusMessage(`Error: ${e.message}`);
   }
 }
-async function loadMarkdown(source, fileHandle) {
+async function loadMarkdown(source) {
   const { transpileJxMarkdown: transpileJxMarkdown2 } = await Promise.resolve().then(() => (init_transpile(), exports_transpile));
   const doc = transpileJxMarkdown2(source);
   const isComponent = doc.tagName && String(doc.tagName).includes("-");
   if (isComponent) {
-    const newState2 = createState(doc);
-    newState2.sourceFormat = "md";
-    newState2.rawMarkdown = source;
-    newState2.fileHandle = fileHandle;
-    newState2.dirty = false;
-    return newState2;
+    return { document: doc, frontmatter: {} };
   }
-  const contentDoc = {
-    children: doc.children ?? []
-  };
+  const contentDoc = { children: doc.children ?? [] };
   const frontmatter2 = {};
   for (const [key, value2] of Object.entries(doc)) {
     if (key !== "children")
       frontmatter2[key] = value2;
   }
-  const newState = createState(contentDoc);
-  newState.sourceFormat = "md";
-  newState.mode = "content";
-  newState.content = { frontmatter: frontmatter2 };
-  newState.rawMarkdown = source;
-  newState.fileHandle = fileHandle;
-  newState.dirty = false;
-  return newState;
+  return { document: contentDoc, frontmatter: frontmatter2 };
 }
-async function loadCompanionJS(handle2, state) {
-  try {
-    if (handle2.getParent) {}
-    if (state.document.$handlers) {
-      state.handlersSource = `// Companion file: ${state.document.$handlers}
-// (Read-only in builder — edit the JS file directly)`;
-    }
-  } catch {}
-}
-async function saveFile({ S, commit, renderToolbar }) {
+async function saveFile() {
+  const tab = activeTab.value;
+  if (!tab)
+    return;
   try {
-    const output = serializeDocument(S);
-    if (S.documentPath) {
+    const output = serializeDocument(tab);
+    if (tab.documentPath) {
       const platform3 = getPlatform();
-      await platform3.writeFile(S.documentPath, output);
-      commit({ ...S, dirty: false });
-      renderToolbar();
+      await platform3.writeFile(tab.documentPath, output);
+      tab.doc.dirty = false;
       statusMessage("Saved");
-    } else if (S.fileHandle && "createWritable" in S.fileHandle) {
-      const writable = await S.fileHandle.createWritable();
+    } else if (tab.fileHandle && "createWritable" in tab.fileHandle) {
+      const writable = await tab.fileHandle.createWritable();
       await writable.write(output);
       await writable.close();
-      commit({ ...S, dirty: false });
-      renderToolbar();
+      tab.doc.dirty = false;
       statusMessage("Saved");
     } else {
       statusMessage("No save target — use Export");
@@ -184324,15 +184235,18 @@ async function saveFile({ S, commit, renderToolbar }) {
       statusMessage(`Save error: ${e.message}`);
   }
 }
-async function exportFile({ S, commit, renderToolbar }) {
+async function exportFile() {
+  const tab = activeTab.value;
+  if (!tab)
+    return;
   try {
-    const isContent = S.mode === "content";
-    const output = serializeDocument(S);
+    const isContent = tab.doc.mode === "content";
+    const output = serializeDocument(tab);
     const mimeType = isContent ? "text/markdown" : "application/json";
     const ext = isContent ? ".md" : ".json";
     const description = isContent ? "Markdown Content" : "Jx Component";
     if ("showSaveFilePicker" in window) {
-      const suggestedName = S.documentPath ? S.documentPath.split("/").pop() : isContent ? "content.md" : "component.json";
+      const suggestedName = tab.documentPath ? tab.documentPath.split("/").pop() : isContent ? "content.md" : "component.json";
       const handle2 = await window.showSaveFilePicker({
         suggestedName,
         types: [{ description, accept: { [mimeType]: [ext] } }]
@@ -184340,8 +184254,7 @@ async function exportFile({ S, commit, renderToolbar }) {
       const writable = await handle2.createWritable();
       await writable.write(output);
       await writable.close();
-      commit({ ...S, dirty: false });
-      renderToolbar();
+      tab.doc.dirty = false;
       statusMessage(`Exported as ${handle2.name}`);
     } else {
       const blob = new Blob([output], { type: mimeType });
@@ -184351,8 +184264,7 @@ async function exportFile({ S, commit, renderToolbar }) {
       a.download = isContent ? "content.md" : "component.json";
       a.click();
       URL.revokeObjectURL(url);
-      commit({ ...S, dirty: false });
-      renderToolbar();
+      tab.doc.dirty = false;
       statusMessage("Downloaded");
     }
   } catch (e) {
@@ -184360,14 +184272,14 @@ async function exportFile({ S, commit, renderToolbar }) {
       statusMessage(`Export error: ${e.message}`);
   }
 }
-function serializeDocument(S) {
-  if (S.sourceFormat === "md") {
-    return jxDocToMd(S.document);
+function serializeDocument(tab) {
+  if (tab.doc.sourceFormat === "md") {
+    return jxDocToMd(tab.doc.document);
   }
-  if (S.mode === "content") {
-    const mdast = jxToMd(S.document);
+  if (tab.doc.mode === "content") {
+    const mdast = jxToMd(tab.doc.document);
     const md = unified().use(remarkDirective).use(remarkStringify, { bullet: "-", emphasis: "*", strong: "*" }).stringify(mdast);
-    const fm = S.content?.frontmatter;
+    const fm = tab.doc.content?.frontmatter;
     const hasFrontmatter = fm && Object.keys(fm).length > 0;
     return hasFrontmatter ? `---
 ${stringify4(fm).trim()}
@@ -184375,7 +184287,7 @@ ${stringify4(fm).trim()}
 
 ${md}` : md;
   }
-  return JSON.stringify(S.document, null, 2);
+  return JSON.stringify(tab.doc.document, null, 2);
 }
 
 // src/files/files.js
@@ -184427,7 +184339,7 @@ async function loadProject() {
     }
   } catch {}
 }
-async function openProject({ S, commit, renderActivityBar, renderLeftPanel }) {
+async function openProject({ renderActivityBar, renderLeftPanel }) {
   try {
     const platform3 = getPlatform();
     const result = await platform3.openProject();
@@ -184466,7 +184378,7 @@ async function openProject({ S, commit, renderActivityBar, renderLeftPanel }) {
       }
     }
     projectState.projectDirs = foundDirs;
-    commit({ ...S, ui: { ...S.ui, leftTab: "files" } });
+    view.leftTab = "files";
     renderActivityBar();
     renderLeftPanel();
     statusMessage(`Opened project: ${projectState.name}`);
@@ -184822,14 +184734,20 @@ async function openFileInTab(path2) {
       return;
     let document4, frontmatter2;
     if (path2.endsWith(".md")) {
-      const state = await loadMarkdown(content3, null);
-      document4 = state.document;
-      frontmatter2 = state.content?.frontmatter;
+      const result = await loadMarkdown(content3);
+      document4 = result.document;
+      frontmatter2 = result.frontmatter;
     } else {
       document4 = JSON.parse(content3);
     }
     const id = path2;
-    openTab({ id, documentPath: path2, document: document4, frontmatter: frontmatter2 });
+    openTab({
+      id,
+      documentPath: path2,
+      document: document4,
+      frontmatter: frontmatter2,
+      sourceFormat: path2.endsWith(".md") ? "md" : null
+    });
     projectState.selectedPath = path2;
     statusMessage(`Opened ${path2.split("/").pop()}`);
   } catch (e) {
@@ -187706,7 +187624,7 @@ function renderGitPanel(S, ctx) {
   }
   if (!_pollTimer) {
     _pollTimer = setInterval(() => {
-      if (S.ui.leftTab === "git" && !S.ui.gitLoading)
+      if (view.leftTab === "git" && !S.ui.gitLoading)
         refreshGitStatus();
     }, 30000);
   }
@@ -210839,9 +210757,9 @@ class JxValueSelector extends LitElement {
 // src/ui/color-selector.js
 init_lit();
 init_store();
+init_workspace();
 function getColorVars() {
-  const S = getState();
-  const style2 = getEffectiveStyle(S?.document?.style);
+  const style2 = getEffectiveStyle(activeTab.value?.doc.document?.style);
   if (!style2)
     return [];
   const vars = [];
@@ -210860,8 +210778,7 @@ function resolveColorForDisplay(val) {
     return "transparent";
   const m3 = val.match(/^var\((--[^)]+)\)$/);
   if (m3) {
-    const S = getState();
-    const style2 = getEffectiveStyle(S?.document?.style);
+    const style2 = getEffectiveStyle(activeTab.value?.doc.document?.style);
     const resolved = style2?.[m3[1]];
     if (typeof resolved === "string")
       return resolved;
@@ -211262,7 +211179,7 @@ init_store();
 init_workspace();
 function initShortcuts(getContext) {
   canvasWrap.addEventListener("wheel", (e20) => {
-    const { S, setS, canvasMode, panX, panY, setPan, applyTransform: applyTransform2 } = getContext();
+    const { canvasMode, panX, panY, setPan, applyTransform: applyTransform2 } = getContext();
     if (canvasMode === "edit")
       return;
     e20.preventDefault();
@@ -211270,12 +211187,12 @@ function initShortcuts(getContext) {
       const rect = canvasWrap.getBoundingClientRect();
       const cursorX = e20.clientX - rect.left;
       const cursorY = e20.clientY - rect.top;
-      const oldZoom = S.ui.zoom;
+      const oldZoom = activeTab.value?.session.ui.zoom ?? 1;
       const delta = -e20.deltaY * 0.005;
       const newZoom = Math.min(5, Math.max(0.05, oldZoom * (1 + delta)));
       const ratio = newZoom / oldZoom;
       setPan(cursorX - (cursorX - panX) * ratio, cursorY - (cursorY - panY) * ratio);
-      setS({ ...S, ui: { ...S.ui, zoom: newZoom } });
+      activeTab.value.session.ui.zoom = newZoom;
     } else if (e20.shiftKey) {
       setPan(panX - e20.deltaY, panY);
     } else {
@@ -211310,8 +211227,6 @@ function initShortcuts(getContext) {
   window.addEventListener("resize", () => getContext().positionZoomIndicator());
   document.addEventListener("keydown", (e20) => {
     const {
-      S,
-      setS,
       canvasMode,
       setPan,
       applyTransform: applyTransform2,
@@ -211320,6 +211235,7 @@ function initShortcuts(getContext) {
       openProject: openProject2,
       enterEditOnPath
     } = getContext();
+    const tab = activeTab.value;
     const mod = e20.ctrlKey || e20.metaKey;
     if (e20.target instanceof HTMLElement && e20.target.matches("input, textarea, select, sp-textfield, sp-search, sp-number-field, sp-picker")) {
       if (mod && e20.key === "s") {
@@ -211356,9 +211272,9 @@ function initShortcuts(getContext) {
         case "w":
           e20.preventDefault();
           if (workspace.activeTabId && workspace.tabOrder.length > 1) {
-            const tab = workspace.tabs.get(workspace.activeTabId);
-            if (tab?.doc.dirty) {
-              const name = tab.documentPath?.split("/").pop() || "Untitled";
+            const tab2 = workspace.tabs.get(workspace.activeTabId);
+            if (tab2?.doc.dirty) {
+              const name = tab2.documentPath?.split("/").pop() || "Untitled";
               if (!window.confirm(`"${name}" has unsaved changes. Close without saving?`))
                 break;
             }
@@ -211382,28 +211298,28 @@ function initShortcuts(getContext) {
           break;
         case "d":
           e20.preventDefault();
-          if (S.selection) {
-            const sel = S.selection;
-            transactDoc(activeTab.value, (t15) => mutateDuplicateNode(t15, sel));
+          if (tab?.session.selection) {
+            const sel = tab.session.selection;
+            transactDoc(tab, (t15) => mutateDuplicateNode(t15, sel));
           }
           break;
         case "c":
           e20.preventDefault();
-          copyNode(S);
+          copyNode();
           break;
         case "x":
           e20.preventDefault();
-          cutNode(S);
+          cutNode();
           break;
         case "v":
           e20.preventDefault();
-          pasteNode(S);
+          pasteNode();
           break;
         case "0":
           if (canvasMode === "edit")
             break;
           e20.preventDefault();
-          setS({ ...S, ui: { ...S.ui, zoom: 1 } });
+          activeTab.value.session.ui.zoom = 1;
           setPan(16, 16);
           applyTransform2();
           break;
@@ -211412,14 +211328,14 @@ function initShortcuts(getContext) {
           if (canvasMode === "edit")
             break;
           e20.preventDefault();
-          setS({ ...S, ui: { ...S.ui, zoom: Math.min(5, S.ui.zoom * 1.2) } });
+          activeTab.value.session.ui.zoom = Math.min(5, (tab?.session.ui.zoom ?? 1) * 1.2);
           applyTransform2();
           break;
         case "-":
           if (canvasMode === "edit")
             break;
           e20.preventDefault();
-          setS({ ...S, ui: { ...S.ui, zoom: Math.max(0.05, S.ui.zoom / 1.2) } });
+          activeTab.value.session.ui.zoom = Math.max(0.05, (tab?.session.ui.zoom ?? 1) / 1.2);
           applyTransform2();
           break;
       }
@@ -211428,22 +211344,22 @@ function initShortcuts(getContext) {
     switch (e20.key) {
       case "Delete":
       case "Backspace":
-        if (S.selection && S.selection.length >= 2) {
+        if (tab?.session.selection && tab.session.selection.length >= 2) {
           e20.preventDefault();
-          const sel = S.selection;
-          transactDoc(activeTab.value, (t15) => mutateRemoveNode(t15, sel));
+          const sel = tab.session.selection;
+          transactDoc(tab, (t15) => mutateRemoveNode(t15, sel));
         }
         break;
       case "Escape":
         activeTab.value.session.selection = null;
         break;
       case "Enter":
-        if (S.selection && S.selection.length >= 2) {
+        if (tab?.session.selection && tab.session.selection.length >= 2) {
           e20.preventDefault();
-          const pp = parentElementPath(S.selection);
-          const idx = childIndex(S.selection);
+          const pp = parentElementPath(tab.session.selection);
+          const idx = childIndex(tab.session.selection);
           const newPath = [...pp, "children", idx + 1];
-          transactDoc(activeTab.value, (t15) => {
+          transactDoc(tab, (t15) => {
             mutateInsertNode(t15, pp, idx + 1, { tagName: "p", textContent: "" });
             t15.session.selection = newPath;
           });
@@ -211452,24 +211368,24 @@ function initShortcuts(getContext) {
         break;
       case "ArrowUp":
         e20.preventDefault();
-        navigateSelection(S);
+        navigateSelection(-1);
         break;
       case "ArrowDown":
         e20.preventDefault();
-        navigateSelection(S, 1);
+        navigateSelection(1);
         break;
       case "ArrowLeft":
         e20.preventDefault();
-        if (S.selection && S.selection.length >= 2) {
-          activeTab.value.session.selection = parentElementPath(S.selection);
+        if (tab?.session.selection && tab.session.selection.length >= 2) {
+          activeTab.value.session.selection = parentElementPath(tab.session.selection);
         }
         break;
       case "ArrowRight":
         e20.preventDefault();
-        if (S.selection) {
-          const node2 = getNodeAtPath(S.document, S.selection);
+        if (tab?.session.selection) {
+          const node2 = getNodeAtPath(tab.doc.document, tab.session.selection);
           if (node2?.children?.length > 0) {
-            activeTab.value.session.selection = [...S.selection, "children", 0];
+            activeTab.value.session.selection = [...tab.session.selection, "children", 0];
           }
         }
         break;
@@ -211481,19 +211397,20 @@ function initShortcuts(getContext) {
     }
   }, { passive: false });
 }
-function navigateSelection(S, direction = -1) {
-  if (!S.selection) {
+function navigateSelection(direction = -1) {
+  const tab = activeTab.value;
+  if (!tab?.session.selection) {
     activeTab.value.session.selection = [];
     return;
   }
-  if (S.selection.length < 2)
+  if (tab.session.selection.length < 2)
     return;
-  const parent = getNodeAtPath(S.document, parentElementPath(S.selection));
-  const idx = childIndex(S.selection);
+  const parent = getNodeAtPath(tab.doc.document, parentElementPath(tab.session.selection));
+  const idx = childIndex(tab.session.selection);
   const newIdx = idx + direction;
   if (parent?.children && newIdx >= 0 && newIdx < parent.children.length) {
     activeTab.value.session.selection = [
-      ...parentElementPath(S.selection),
+      ...parentElementPath(tab.session.selection),
       "children",
       newIdx
     ];
@@ -211512,7 +211429,6 @@ function mount4() {
       const tab = activeTab.value;
       if (!tab)
         return;
-      tab.session.ui.leftTab;
       renderActivityBar();
     });
   });
@@ -211558,7 +211474,7 @@ function renderActivityBar() {
   const tab = activeTab.value;
   if (!tab)
     return;
-  const leftTab = tab.session.ui.leftTab;
+  const leftTab = view.leftTab;
   const tabs = [
     { value: "files", icon: "sp-icon-folder", label: "Files" },
     { value: "layers", icon: "sp-icon-layers", label: "Layers" },
@@ -211575,7 +211491,9 @@ function renderActivityBar() {
       direction="vertical"
       quiet
       @change=${(e20) => {
-    activeTab.value.session.ui.leftTab = e20.target.selected;
+    view.leftTab = e20.target.selected;
+    renderOnly("leftPanel");
+    renderActivityBar();
   }}
     >
       ${tabs.map((t15) => html`
@@ -211632,9 +211550,9 @@ function mount5(rootEl, ctx) {
       tab.doc.dirty;
       tab.doc.mode;
       tab.session.selection;
+      tab.session.ui.canvasMode;
       tab.session.ui.editingFunction;
       tab.session.ui.featureToggles;
-      tab.session.ui.leftTab;
       tab.session.ui.rightTab;
       render7();
     });
@@ -211747,7 +211665,7 @@ function toolbarTemplate() {
     if (m3.key === "settings")
       uiPatch.rightTab = "style";
     if (m3.key === "manage")
-      uiPatch.leftTab = "files";
+      view.leftTab = "files";
     updateSession({ ui: uiPatch });
     _ctx11.renderCanvas();
     _ctx11.safeRenderRightPanel();
@@ -212028,6 +211946,7 @@ function computeInheritedStyle(style2, mediaNames, activeTab2, activeSelector =
 
 // src/panels/style-utils.js
 init_store();
+init_workspace();
 // data/css-meta.json
 var css_meta_default = {
   $schema: "../../packages/schema/schema.json",
@@ -213638,8 +213557,7 @@ function compressBorderSide(vals) {
   return vals.filter((v) => v && v.trim()).join(" ");
 }
 function getFontVars() {
-  const S = getState();
-  const style2 = S.document?.style;
+  const style2 = activeTab.value?.doc.document?.style;
   if (!style2)
     return [];
   const vars = [];
@@ -213657,14 +213575,14 @@ var TYPO_PREVIEW_PROPS = new Set([
   "textDecoration"
 ]);
 function currentFontFamily() {
-  const S = getState();
-  const node2 = S.selection ? getNodeAtPath(S.document, S.selection) : null;
+  const tab = activeTab.value;
+  const node2 = tab?.session.selection ? getNodeAtPath(tab.doc.document, tab.session.selection) : null;
   const raw = node2?.style?.fontFamily;
   if (!raw)
     return "";
   const m3 = typeof raw === "string" && raw.match(/^var\((--[^)]+)\)$/);
   if (m3)
-    return S.document?.style?.[m3[1]] || "";
+    return tab?.doc.document?.style?.[m3[1]] || "";
   return raw;
 }
 
@@ -213969,9 +213887,8 @@ function renderSelectInput(entry, prop, value2, onChange) {
   return renderKeywordInput(entry.enum || [], prop, value2, onChange);
 }
 function handleFontPresetSelection(preset, onChange) {
-  const S = getState();
   const varName = friendlyNameToVar(preset.title, "--font-");
-  if (!S.document?.style?.[varName]) {
+  if (!activeTab.value?.doc.document?.style?.[varName]) {
     transactDoc(activeTab.value, (t15) => mutateUpdateStyle(t15, [], varName, preset.value));
   }
   onChange(`var(${varName})`);
@@ -216298,13 +216215,12 @@ init_workspace();
 init_store();
 init_workspace();
 function renderLayersTemplate(ctx) {
-  const S = getState();
+  const tab = activeTab.value;
   for (const fn of view.dndCleanups)
     fn();
   view.dndCleanups = [];
-  const rows = flattenTree(S.document);
-  const _S = S;
-  const collapsed = _S._collapsed || (_S._collapsed = new Set);
+  const rows = flattenTree(tab?.doc.document);
+  const collapsed = view._layersCollapsed || (view._layersCollapsed = new Set);
   const layerRows = [];
   for (const { node: node2, path: path2, depth, nodeType } of rows) {
     let hidden = false;
@@ -216317,7 +216233,7 @@ function renderLayersTemplate(ctx) {
     }
     if (hidden)
       continue;
-    if (S.mode === "content" && path2.length === 0)
+    if (tab?.doc.mode === "content" && path2.length === 0)
       continue;
     if (nodeType === "text") {
       const textPreview = String(node2).length > 40 ? String(node2).slice(0, 40) + "…" : String(node2);
@@ -216334,12 +216250,12 @@ function renderLayersTemplate(ctx) {
     }
     if (path2.length >= 2 && nodeType === "element") {
       const pPath = parentElementPath(path2);
-      const parentNode2 = pPath ? getNodeAtPath(S.document, pPath) : null;
+      const parentNode2 = pPath ? getNodeAtPath(tab?.doc.document, pPath) : null;
       if (parentNode2 && isInlineElement(node2, parentNode2))
         continue;
     }
     const key = pathKey(path2);
-    const isSelected = pathsEqual(path2, S.selection);
+    const isSelected = pathsEqual(path2, tab?.session.selection);
     const hasChildren = Array.isArray(node2.children) && node2.children.length > 0;
     const hasMapChildren = node2.children && typeof node2.children === "object" && node2.children.$prototype === "Array";
     const hasCases = node2.$switch && node2.cases && typeof node2.cases === "object" && Object.keys(node2.cases).length > 0;
@@ -216372,10 +216288,10 @@ function renderLayersTemplate(ctx) {
       labelItalic = false;
     }
     const isElement2 = nodeType === "element";
-    const isRoot = S.mode === "content" ? path2.length === 0 : path2.length < 2;
+    const isRoot = tab?.doc.mode === "content" ? path2.length === 0 : path2.length < 2;
     const idx = isElement2 ? childIndex(path2) : 0;
     const parentPath = isElement2 && !isRoot ? parentElementPath(path2) : null;
-    const parentNode = parentPath ? getNodeAtPath(S.document, parentPath) : null;
+    const parentNode = parentPath ? getNodeAtPath(tab?.doc.document, parentPath) : null;
     const siblingCount = parentNode?.children?.length || 0;
     const canMoveUp = isElement2 && !isRoot && idx > 0;
     const canMoveDown = isElement2 && !isRoot && idx < siblingCount - 1;
@@ -216390,8 +216306,9 @@ function renderLayersTemplate(ctx) {
         data-dnd-row=${isElement2 ? key : nothing}
         data-dnd-depth=${isElement2 ? depth : nothing}
         data-dnd-void=${isElement2 && isVoidEl ? "" : nothing}
+        data-dnd-expanded=${isElement2 && isExpandable && !collapsed.has(key) ? "" : nothing}
         @click=${() => activeTab.value.session.selection = path2}
-        @contextmenu=${isElement2 ? (e20) => showContextMenu(e20, path2, getState(), {
+        @contextmenu=${isElement2 ? (e20) => showContextMenu(e20, path2, {
       onEditComponent: ctx.navigateToComponent
     }) : nothing}
       >
@@ -216439,7 +216356,7 @@ function renderLayersTemplate(ctx) {
       e20.stopPropagation();
       e20.currentTarget.blur();
       const prevPath = [...parentPath, idx - 1];
-      const prev = getNodeAtPath(getState().document, prevPath);
+      const prev = getNodeAtPath(activeTab.value?.doc.document, prevPath);
       const len = prev?.children?.length || 0;
       transactDoc(activeTab.value, (t15) => mutateMoveNode(t15, path2, prevPath, len));
     }}
@@ -216505,17 +216422,17 @@ function renderLayersTemplate(ctx) {
 }
 
 // src/panels/stylebook-layers-panel.js
-init_store();
+init_workspace();
 init_components();
 function hasTagStyle2(rootStyle, tag7) {
   const s2 = rootStyle[`& ${tag7}`];
   return s2 && typeof s2 === "object" && Object.keys(s2).length > 0;
 }
 function renderStylebookLayersTemplate(ctx) {
-  const S = getState();
-  const rootStyle = S.document?.style || {};
-  const selectedTag = S.ui.stylebookSelection;
-  if (S.ui.stylebookTab === "elements") {
+  const tab = activeTab.value;
+  const rootStyle = tab?.doc.document?.style || {};
+  const selectedTag = tab?.session.ui.stylebookSelection;
+  if (tab?.session.ui.stylebookTab === "elements") {
     const renderEntryRow = (entry, depth = 0) => {
       const tag7 = entry.tag;
       const uniqueChildren = entry.children ? [...new Map(entry.children.map((c6) => [c6.tag, c6])).values()] : [];
@@ -216585,7 +216502,7 @@ init_store();
 init_workspace();
 init_components();
 function renderElementsTemplate(ctx) {
-  const S = getState();
+  const tab = activeTab.value;
   const categories = Object.entries(ctx.webdata.elements).map(([category, elements]) => {
     const filtered = view.elementsFilter ? elements.filter((e20) => e20.tag.includes(view.elementsFilter)) : elements;
     if (filtered.length === 0)
@@ -216608,11 +216525,11 @@ function renderElementsTemplate(ctx) {
                 class="element-card"
                 data-block-tag=${tag7}
                 @click=${() => {
-        const s2 = getState();
-        const parentPath = s2.selection || [];
-        const parent = getNodeAtPath(s2.document, parentPath);
+        const t15 = activeTab.value;
+        const parentPath = t15?.session.selection || [];
+        const parent = getNodeAtPath(t15?.doc.document, parentPath);
         const idx = parent?.children ? parent.children.length : 0;
-        transactDoc(activeTab.value, (t15) => mutateInsertNode(t15, parentPath, idx, structuredClone(def3)));
+        transactDoc(t15, (tr) => mutateInsertNode(tr, parentPath, idx, structuredClone(def3)));
       }}
               >
                 <div class="element-card-preview"></div>
@@ -216623,7 +216540,7 @@ function renderElementsTemplate(ctx) {
         </sp-accordion-item>
       `;
   });
-  const effectiveEls = getEffectiveElements(S.document?.$elements);
+  const effectiveEls = getEffectiveElements(tab?.doc.document?.$elements);
   const enabledTags = new Set;
   for (const entry of effectiveEls) {
     if (typeof entry !== "string")
@@ -216657,9 +216574,9 @@ function renderElementsTemplate(ctx) {
                     data-component-tag=${comp.tagName}
                     title=${comp.source === "npm" ? `${comp.package}: <${comp.tagName}>` : comp.path}
                     @click=${() => {
-    const s2 = getState();
-    const parentPath = s2.selection || [];
-    const parent = getNodeAtPath(s2.document, parentPath);
+    const t15 = activeTab.value;
+    const parentPath = t15?.session.selection || [];
+    const parent = getNodeAtPath(t15?.doc.document, parentPath);
     const idx = parent?.children ? parent.children.length : 0;
     const instanceDef = {
       tagName: comp.tagName,
@@ -216668,7 +216585,7 @@ function renderElementsTemplate(ctx) {
         p2.default !== undefined ? p2.default : ""
       ]))
     };
-    transactDoc(activeTab.value, (t15) => mutateInsertNode(t15, parentPath, idx, structuredClone(instanceDef)));
+    transactDoc(t15, (tr) => mutateInsertNode(tr, parentPath, idx, structuredClone(instanceDef)));
   }}
                   >
                     <div class="element-card-preview">
@@ -216714,7 +216631,6 @@ function mount7(ctx) {
       tab.doc.document;
       tab.doc.mode;
       tab.session.selection;
-      tab.session.ui.leftTab;
       tab.session.ui.settingsTab;
       render9();
     });
@@ -216763,7 +216679,7 @@ function _render() {
     mode: aTab.doc.mode,
     selection: aTab.session.selection
   };
-  const tab = S.ui.leftTab;
+  const tab = view.leftTab;
   let content3;
   if (tab === "layers")
     content3 = ctx.getCanvasMode() === "settings" ? renderStylebookLayersTemplate({
@@ -216925,16 +216841,23 @@ function requestClose(id) {
 }
 
 // src/studio.js
-var S;
-var doc = null;
-var session = null;
 function createFloatingContainer() {
   const el = document.createElement("div");
   el.style.display = "contents";
   (document.querySelector("sp-theme") || document.body).appendChild(el);
   return el;
 }
-var canvasMode = "design";
+function getCanvasMode() {
+  return activeTab.value?.session.ui.canvasMode ?? "design";
+}
+function setCanvasMode(mode) {
+  if (getCanvasMode() === "git-diff" && mode !== "git-diff") {
+    gitDiffState = null;
+  }
+  const tab = activeTab.value;
+  if (tab)
+    tab.session.ui.canvasMode = mode;
+}
 var gitDiffState = null;
 async function navigateToComponent(componentPath) {
   try {
@@ -216943,9 +216866,27 @@ async function navigateToComponent(componentPath) {
     if (!content3)
       return;
     const parsed = JSON.parse(content3);
-    S = pushDocument(S, parsed, componentPath);
-    S.dirty = false;
-    ({ doc, session } = fromFlat(S));
+    const tab = activeTab.value;
+    if (!tab)
+      return;
+    const frame = {
+      document: tab.doc.document,
+      selection: tab.session.selection,
+      documentPath: tab.documentPath,
+      dirty: tab.doc.dirty,
+      mode: tab.doc.mode
+    };
+    if (!tab.session.documentStack)
+      tab.session.documentStack = [];
+    tab.session.documentStack.push(frame);
+    tab.doc.document = parsed;
+    tab.doc.dirty = false;
+    tab.doc.mode = null;
+    tab.documentPath = componentPath;
+    tab.session.selection = null;
+    view.leftTab = "layers";
+    tab.session.ui.activeMedia = null;
+    tab.session.ui.activeSelector = null;
     render();
     statusMessage(`Editing component: ${parsed.tagName || componentPath}`);
   } catch (e20) {
@@ -216954,24 +216895,33 @@ async function navigateToComponent(componentPath) {
   }
 }
 async function navigateBack() {
-  if (!S.documentStack || S.documentStack.length === 0)
+  const tab = activeTab.value;
+  if (!tab?.session.documentStack || tab.session.documentStack.length === 0)
     return;
-  if (S.dirty && S.documentPath) {
+  if (tab.doc.dirty && tab.documentPath) {
     try {
       const platform4 = getPlatform();
-      await platform4.writeFile(S.documentPath, JSON.stringify(S.document, null, 2));
+      await platform4.writeFile(tab.documentPath, JSON.stringify(tab.doc.document, null, 2));
     } catch (e20) {
       const err = e20;
       statusMessage(`Save error: ${err.message}`);
     }
   }
-  S = popDocument(S);
-  ({ doc, session } = fromFlat(S));
+  const frame = tab.session.documentStack.pop();
+  if (!frame)
+    return;
+  tab.doc.document = frame.document;
+  tab.doc.dirty = frame.dirty;
+  tab.doc.mode = frame.mode;
+  tab.documentPath = frame.documentPath;
+  tab.session.selection = frame.selection;
+  view.leftTab = "layers";
   render();
   statusMessage("Returned to parent document");
 }
 async function closeFunctionEditor() {
-  const editing = S.ui.editingFunction;
+  const tab = activeTab.value;
+  const editing = tab?.session.ui.editingFunction;
   if (!editing)
     return;
   if (view.functionEditor) {
@@ -216979,11 +216929,11 @@ async function closeFunctionEditor() {
     const minResult = await codeService("minify", { code: currentCode });
     const bodyToStore = minResult?.code ?? currentCode;
     if (editing.type === "def") {
-      transactDoc(activeTab.value, (t15) => mutateUpdateDef(t15, editing.defName, { body: bodyToStore }));
+      transactDoc(tab, (t15) => mutateUpdateDef(t15, editing.defName, { body: bodyToStore }));
     } else if (editing.type === "event") {
-      const node2 = getNodeAtPath(S.document, editing.path);
+      const node2 = getNodeAtPath(tab.doc.document, editing.path);
       const current = node2?.[editing.eventKey] || {};
-      transactDoc(activeTab.value, (t15) => mutateUpdateProperty(t15, editing.path, editing.eventKey, {
+      transactDoc(tab, (t15) => mutateUpdateProperty(t15, editing.path, editing.eventKey, {
         ...current,
         $prototype: "Function",
         body: bodyToStore
@@ -217017,74 +216967,57 @@ var EMPTY_DOC = {
     { tagName: "p", textContent: "Open a Jx file or start editing." }
   ]
 };
-S = createState(structuredClone(EMPTY_DOC));
-({ doc, session } = fromFlat(S));
-setGetStateFn(() => S);
 openTab({ id: "initial", document: structuredClone(EMPTY_DOC) });
 mount5(toolbarEl, {
   navigateBack: () => navigateBack(),
   closeFunctionEditor: () => closeFunctionEditor(),
   openProject: () => openProject2(),
-  openFile: () => openFile2(),
-  saveFile: () => saveFile2(),
+  openFile: () => openFile(),
+  saveFile: () => saveFile(),
   parseMediaEntries,
-  getCanvasMode: () => canvasMode,
-  setCanvasMode: (m3) => {
-    if (canvasMode === "git-diff" && m3 !== "git-diff") {
-      gitDiffState = null;
-    }
-    canvasMode = m3;
-  },
+  getCanvasMode,
+  setCanvasMode,
   renderCanvas: () => renderCanvas(),
   safeRenderRightPanel: () => safeRenderRightPanel()
 });
 mount8(document.querySelector("#tab-strip"));
 mount3({
-  getCanvasMode: () => canvasMode,
+  getCanvasMode,
   isEditing,
   renderBlockActionBar
 });
 initBlockActionBar({
-  getCanvasMode: () => canvasMode,
+  getCanvasMode,
   navigateToComponent,
   createFloatingContainer
 });
 initComponentInlineEdit({ findCanvasElement });
-initCanvasHelpers({ getCanvasMode: () => canvasMode, getZoom: () => S.ui.zoom });
+initCanvasHelpers({
+  getCanvasMode,
+  getZoom: () => activeTab.value?.session.ui.zoom ?? 1
+});
 initCanvasUtils({
-  getCanvasMode: () => canvasMode,
-  getZoom: () => S.ui.zoom,
+  getCanvasMode,
+  getZoom: () => activeTab.value?.session.ui.zoom ?? 1,
   setZoomDirect: (zoom) => {
-    session = { ...session, ui: { ...session.ui, zoom } };
-    S = toFlat(doc, session);
     if (activeTab.value)
       activeTab.value.session.ui.zoom = zoom;
   },
   renderStylebookOverlays
 });
 initPanelEvents({
-  getState: () => S,
-  setState: (s2) => {
-    S = s2;
-    ({ doc, session } = fromFlat(S));
-  },
-  getCanvasMode: () => canvasMode,
+  getCanvasMode,
   enterInlineEdit,
   navigateToComponent
 });
 initCanvasLiveRender({
-  getCanvasMode: () => canvasMode
+  getCanvasMode
 });
 initCanvasRender({
-  getCanvasMode: () => canvasMode,
-  setCanvasMode: (mode) => {
-    if (canvasMode === "git-diff" && mode !== "git-diff") {
-      gitDiffState = null;
-    }
-    canvasMode = mode;
-  },
-  openFileFromTree: openFileFromTree2,
-  exportFile: exportFile2,
+  getCanvasMode,
+  setCanvasMode,
+  openFileFromTree,
+  exportFile,
   gitDiffState,
   setGitDiffState: (state3) => {
     gitDiffState = state3;
@@ -217097,6 +217030,7 @@ effect(() => {
     return;
   tab.doc.document;
   tab.doc.mode;
+  tab.session.ui.canvasMode;
   tab.session.ui.editingFunction;
   tab.session.ui.featureToggles;
   tab.session.ui.settingsTab;
@@ -217117,15 +217051,13 @@ effect(() => {
 });
 mount6({
   navigateToComponent,
-  getCanvasMode: () => canvasMode,
+  getCanvasMode,
   renderCanvas: () => renderCanvas(),
   updateForcedPseudoPreview
 });
 mount7({
-  getCanvasMode: () => canvasMode,
-  setCanvasMode: (mode) => {
-    canvasMode = mode;
-  },
+  getCanvasMode,
+  setCanvasMode,
   renderImportsTemplate,
   renderFilesTemplate: renderFilesTemplate2,
   renderSignalsTemplate,
@@ -217147,76 +217079,19 @@ registerRenderer("leftPanel", () => render9());
 registerRenderer("canvas", () => renderCanvas());
 registerRenderer("rightPanel", () => render8());
 registerRenderer("overlays", () => render4());
-setStatusbarRenderer(() => renderStatusbar(S));
+setStatusbarRenderer(() => renderStatusbar());
 mountStatusbar();
 mount4();
 canvasWrap.addEventListener("click", (e20) => {
   if (e20.target !== canvasWrap && e20.target !== view.panzoomWrap)
     return;
-  if (!S.selection)
+  if (!activeTab.value?.session.selection)
     return;
   activeTab.value.session.selection = null;
 });
 function safeRenderRightPanel() {
   render8();
 }
-setGetStateFn(() => S);
-setUpdateFn(function _update(newState) {
-  const prevDoc = S.document;
-  const prevSel = S.selection;
-  const prevUi = S.ui;
-  S = newState;
-  ({ doc, session } = fromFlat(S));
-  const tab = activeTab.value;
-  if (tab) {
-    tab.doc.document = S.document;
-    tab.doc.dirty = S.dirty;
-    tab.doc.mode = S.mode;
-    tab.doc.handlersSource = S.handlersSource;
-    tab.doc.content.frontmatter = S.content?.frontmatter ?? {};
-    tab.session.selection = S.selection;
-    tab.session.hover = S.hover;
-    tab.session.clipboard = S.clipboard ?? null;
-    for (const [k, v] of Object.entries(S.ui || {})) {
-      tab.session.ui[k] = v;
-    }
-    tab.session.canvas.status = S.canvas?.status ?? "idle";
-    tab.session.canvas.scope = S.canvas?.scope ?? null;
-    tab.session.canvas.error = S.canvas?.error ?? null;
-  }
-  if (prevUi?.activeMedia !== S.ui?.activeMedia) {
-    updateActivePanelHeaders();
-  }
-  runPostRenderHooks(prevDoc, prevSel);
-  runUpdateMiddleware(S);
-});
-setUpdateSessionFn(function _updateSession(patch2) {
-  const prev = session;
-  session = { ...session, ...patch2 };
-  if (patch2.ui) {
-    session.ui = { ...prev.ui, ...patch2.ui };
-  }
-  if (patch2.canvas) {
-    session.canvas = { ...prev.canvas, ...patch2.canvas };
-  }
-  S = toFlat(doc, session);
-  if (prev.ui?.activeMedia !== session.ui?.activeMedia) {
-    updateActivePanelHeaders();
-  }
-  const canvasChanged = prev.canvas !== session.canvas;
-  if (canvasChanged && session.canvas.status === "ready" && session.ui?.pendingInlineEdit) {
-    const { path: path2, mediaName: mn } = session.ui.pendingInlineEdit;
-    updateUi("pendingInlineEdit", null);
-    const targetPanel = canvasPanels.find((p2) => p2.mediaName === mn) || canvasPanels[0];
-    if (targetPanel) {
-      const el = findCanvasElement(path2, targetPanel.canvas);
-      if (el)
-        enterComponentInlineEdit(el, path2);
-    }
-  }
-  runPostRenderHooks(doc.document, prev.selection);
-});
-addPostRenderHook(() => updateForcedPseudoPreview());
 registerFunctionCompletions();
 var _openParam = new URLSearchParams(location.search).get("open");
 if (_openParam) {
@@ -217275,29 +217150,27 @@ if (_openParam) {
         const fileRelPath = _fileParam || siteCtx.fileRelPath || _openParam;
         const content3 = await platform4.readFile(fileRelPath);
         if (content3) {
-          let parsedDoc;
-          if (fileRelPath.endsWith(".md")) {
-            const ns = await loadMarkdown(content3, null);
-            S = ns;
-            S.documentPath = fileRelPath;
-            parsedDoc = S.document;
+          let parsedDoc, frontmatter2;
+          const isMd = fileRelPath.endsWith(".md");
+          if (isMd) {
+            const result = await loadMarkdown(content3);
+            parsedDoc = result.document;
+            frontmatter2 = result.frontmatter;
           } else {
             parsedDoc = JSON.parse(content3);
-            S = createState(parsedDoc);
-            S.documentPath = fileRelPath;
-          }
-          S.dirty = false;
-          S.ui = { ...S.ui, leftTab: "files" };
-          ({ doc, session } = fromFlat(S));
-          const tab = activeTab.value;
-          if (tab) {
-            tab.doc.document = S.document;
-            tab.doc.mode = S.mode;
-            tab.doc.dirty = false;
-            tab.doc.content = S.content || { frontmatter: {} };
-            tab.documentPath = fileRelPath;
-            tab.session.ui.leftTab = "files";
           }
+          const { closeTab: closeTab2 } = await Promise.resolve().then(() => (init_workspace(), exports_workspace));
+          closeTab2("initial");
+          openTab({
+            id: fileRelPath,
+            documentPath: fileRelPath,
+            document: parsedDoc,
+            frontmatter: frontmatter2,
+            sourceFormat: isMd ? "md" : null
+          });
+          if (isMd && activeTab.value)
+            activeTab.value.doc.mode = "content";
+          view.leftTab = "files";
           render();
           statusMessage(`Opened ${_openParam}`);
         }
@@ -217313,56 +217186,23 @@ if (_openParam) {
 function renderLeftPanel() {
   render9();
 }
-function renderToolbar() {
-  render7();
-}
-function fileOpsCtx() {
-  return {
-    S,
-    commit: (ns) => {
-      S = ns;
-      ({ doc, session } = fromFlat(S));
-      render();
-    },
-    renderToolbar
-  };
-}
-function openFile2() {
-  return openFile(fileOpsCtx());
-}
-function saveFile2() {
-  return saveFile(fileOpsCtx());
-}
-function exportFile2() {
-  return exportFile(fileOpsCtx());
-}
 function loadProject2() {
   return loadProject();
 }
 function openProject2() {
   return openProject({
-    S,
-    commit: (ns) => {
-      S = ns;
-      ({ doc, session } = fromFlat(S));
-    },
     renderActivityBar: () => renderActivityBar(),
     renderLeftPanel
   });
 }
 function renderFilesTemplate2() {
-  return renderFilesTemplate({ openProject: openProject2, openFileFromTree: openFileFromTree2, renderLeftPanel });
+  return renderFilesTemplate({ openProject: openProject2, openFileFromTree, renderLeftPanel });
 }
-function openFileFromTree2(path2) {
+function openFileFromTree(path2) {
   return openFileInTab(path2);
 }
 initShortcuts(() => ({
-  S,
-  setS: (ns) => {
-    S = ns;
-    ({ doc, session } = fromFlat(S));
-  },
-  canvasMode,
+  canvasMode: getCanvasMode(),
   panX: view.panX,
   panY: view.panY,
   setPan: (x, y) => {
@@ -217373,7 +217213,7 @@ initShortcuts(() => ({
   applyTransform,
   positionZoomIndicator,
   componentInlineEdit: view.componentInlineEdit,
-  saveFile: saveFile2,
+  saveFile,
   openProject: openProject2,
   enterEditOnPath(path2) {
     requestAnimationFrame(() => {
@@ -217389,25 +217229,27 @@ initShortcuts(() => ({
 }));
 var AUTO_SAVE_DELAY = 2000;
 function scheduleAutosave() {
-  if (!S.fileHandle || !S.dirty)
+  const tab = activeTab.value;
+  if (!tab?.fileHandle || !tab.doc.dirty)
     return;
   clearTimeout(view.autosaveTimer);
   view.autosaveTimer = setTimeout(async () => {
-    if (S.fileHandle && S.dirty && "createWritable" in S.fileHandle) {
+    const t15 = activeTab.value;
+    if (t15?.fileHandle && t15.doc.dirty && "createWritable" in t15.fileHandle) {
       try {
-        const writable = await S.fileHandle.createWritable();
-        await writable.write(JSON.stringify(S.document, null, 2));
+        const writable = await t15.fileHandle.createWritable();
+        await writable.write(JSON.stringify(t15.doc.document, null, 2));
         await writable.close();
-        activeTab.value.doc.dirty = false;
+        t15.doc.dirty = false;
         statusMessage("Auto-saved");
       } catch {}
     }
   }, AUTO_SAVE_DELAY);
 }
-addUpdateMiddleware((state3) => {
-  if (state3.dirty)
+effect(() => {
+  if (activeTab.value?.doc.dirty)
     scheduleAutosave();
 });
 
-//# debugId=B17DF22CF984123464756E2164756E21
+//# debugId=CE5832A90C0FE77064756E2164756E21
 //# sourceMappingURL=studio.js.map