@jxsuite/studio 0.14.0 → 0.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/studio",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "Jx Studio — visual builder for Jx documents",
   "license": "MIT",
   "repository": {

package/src/editor/context-menu.js

@@ -1,13 +1,14 @@
 // ─── Clipboard & Context Menu ─────────────────────────────────────────────────
 import { html, render as litRender } from "lit-html";
 import { getNodeAtPath, parentElementPath, childIndex } from "../store.js";
-import { activeTab } from "../workspace/workspace.js";
+import { activeTab, workspace } from "../workspace/workspace.js";
 import {
   transactDoc,
   mutateInsertNode,
   mutateRemoveNode,
   mutateDuplicateNode,
   mutateWrapNode,
+  mutateReplaceStyle,
 } from "../tabs/transact.js";
 import { statusMessage } from "../panels/statusbar.js";
 import { convertToComponent } from "./convert-to-component.js";
@@ -21,9 +22,6 @@ import { componentRegistry } from "../files/components.js";
  * @typedef {import("../state.js").JxNode} JxNode
  */
 
-/** @type {JxNode | null} */
-let clipboard = null;
-
 // ─── Clipboard ────────────────────────────────────────────────────────────────
 
 export function copyNode() {
@@ -31,7 +29,7 @@ export function copyNode() {
   if (!tab?.session.selection) return;
   const node = getNodeAtPath(tab.doc.document, tab.session.selection);
   if (!node) return;
-  clipboard = structuredClone(node);
+  workspace.clipboard = structuredClone(node);
   statusMessage("Copied");
 }
 
@@ -41,16 +39,16 @@ export function cutNode() {
   const sel = tab.session.selection;
   const node = getNodeAtPath(tab.doc.document, sel);
   if (!node) return;
-  clipboard = structuredClone(node);
+  workspace.clipboard = structuredClone(node);
   transactDoc(tab, (t) => mutateRemoveNode(t, sel));
   statusMessage("Cut");
 }
 
 export function pasteNode() {
-  if (!clipboard) return;
+  if (!workspace.clipboard) return;
   const tab = activeTab.value;
   if (!tab) return;
-  const clip = clipboard;
+  const clip = workspace.clipboard;
   const pPath = tab.session.selection || [];
   const parent = getNodeAtPath(tab.doc.document, pPath);
   if (!parent) return;
@@ -66,6 +64,25 @@ export function pasteNode() {
   statusMessage("Pasted");
 }
 
+export function copyStyles() {
+  const tab = activeTab.value;
+  if (!tab?.session.selection) return;
+  const node = getNodeAtPath(tab.doc.document, tab.session.selection);
+  if (!node?.style) return;
+  workspace.styleClipboard = JSON.parse(JSON.stringify(node.style));
+  statusMessage("Styles copied");
+}
+
+export function pasteStyles() {
+  if (!workspace.styleClipboard) return;
+  const tab = activeTab.value;
+  if (!tab?.session.selection) return;
+  const style = JSON.parse(JSON.stringify(workspace.styleClipboard));
+  const sel = /** @type {JxPath} */ (tab.session.selection);
+  transactDoc(tab, (t) => mutateReplaceStyle(t, sel, style));
+  statusMessage("Styles pasted");
+}
+
 // ─── Context menu ─────────────────────────────────────────────────────────────
 
 const ctxMenu = document.createElement("sp-popover");
@@ -109,6 +126,26 @@ export function showContextMenu(e, path, opts = {}) {
       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: "—" }); // separator
     items.push({
       label: "Insert before",
@@ -162,8 +199,8 @@ export function showContextMenu(e, path, opts = {}) {
       danger: true,
     });
   }
-  if (clipboard) {
-    const clip = clipboard;
+  if (workspace.clipboard) {
+    const clip = workspace.clipboard;
     items.push({ label: "—" });
     items.push({
       label: "Paste inside",

package/src/tabs/transact.js

@@ -26,8 +26,12 @@ const HISTORY_LIMIT = 100;
 export function transactDoc(tab, mutationFn, { skipHistory = false } = {}) {
   mutationFn(tab);
 
+  // Replace the document root reference so effects tracking tab.doc.document re-trigger.
+  // Nested objects are shared — the mutation already modified them in place.
+  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,
@@ -270,6 +274,20 @@ export function mutateUpdateMediaNestedStyle(tab, path, mediaName, selector, pro
   if (Object.keys(node.style).length === 0) delete node.style;
 }
 
+/**
+ * @param {Tab} tab
+ * @param {JxPath} path
+ * @param {Record<string, any> | undefined} style
+ */
+export 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;
+  }
+}
+
 /**
  * @param {Tab} tab
  * @param {string} name

package/src/workspace/workspace.js

@@ -16,6 +16,10 @@ export const workspace = reactive({
   projectConfig: null,
   /** @type {ComponentEntry[]} */
   componentRegistry: [],
+  /** @type {import("../state.js").JxNode | null} */
+  clipboard: null,
+  /** @type {Record<string, any> | null} */
+  styleClipboard: null,
   fileTree: {
     /** @type {Map<string, FileEntry[]>} */
     dirs: new Map(),