@jxsuite/studio 0.0.1

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@jxsuite/studio",
+  "version": "0.0.1",
+  "description": "Jx Studio — visual builder for Jx documents",
+  "license": "MIT",
+  "files": [
+    "*.js",
+    "src",
+    "dist"
+  ],
+  "type": "module",
+  "exports": {
+    ".": "./studio.js",
+    "./platform.js": "./platform.js"
+  },
+  "scripts": {
+    "build": "bun build ./src/studio.js --outdir dist --target browser --sourcemap=linked",
+    "gen:webdata": "bun run scripts/gen-webdata.js",
+    "upgrade": "bunx npm-check-updates -u && bun install",
+    "test": "bun test"
+  },
+  "dependencies": {
+    "@atlaskit/pragmatic-drag-and-drop": "^1.8.1",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
+    "@jxsuite/runtime": "workspace:*",
+    "@spectrum-web-components/accordion": "^1.11.2",
+    "@spectrum-web-components/action-bar": "1.11.2",
+    "@spectrum-web-components/action-button": "^1.11.2",
+    "@spectrum-web-components/action-group": "^1.11.2",
+    "@spectrum-web-components/checkbox": "^1.11.2",
+    "@spectrum-web-components/color-area": "^1.11.2",
+    "@spectrum-web-components/color-handle": "^1.11.2",
+    "@spectrum-web-components/color-slider": "^1.11.2",
+    "@spectrum-web-components/combobox": "^1.11.2",
+    "@spectrum-web-components/divider": "^1.11.2",
+    "@spectrum-web-components/icon": "^1.11.2",
+    "@spectrum-web-components/icons-workflow": "^1.11.2",
+    "@spectrum-web-components/menu": "^1.11.2",
+    "@spectrum-web-components/number-field": "^1.11.2",
+    "@spectrum-web-components/overlay": "^1.11.2",
+    "@spectrum-web-components/picker": "^1.11.2",
+    "@spectrum-web-components/picker-button": "^1.11.2",
+    "@spectrum-web-components/popover": "^1.11.2",
+    "@spectrum-web-components/search": "^1.11.2",
+    "@spectrum-web-components/swatch": "^1.11.2",
+    "@spectrum-web-components/switch": "^1.11.2",
+    "@spectrum-web-components/tabs": "^1.11.2",
+    "@spectrum-web-components/textfield": "^1.11.2",
+    "@spectrum-web-components/theme": "^1.11.2",
+    "@spectrum-web-components/tooltip": "^1.11.2",
+    "lit-html": "^3.3.2",
+    "monaco-editor": "^0.55.1",
+    "remark-directive": "^4.0.0",
+    "remark-frontmatter": "^5.0.0",
+    "remark-gfm": "^4.0.1",
+    "remark-parse": "^11.0.0",
+    "remark-stringify": "^11.0.0",
+    "unified": "^11.0.5",
+    "yaml": "^2.8.3"
+  },
+  "devDependencies": {
+    "@happy-dom/global-registrator": "^20.9.0",
+    "@webref/css": "^8.5.3",
+    "@webref/elements": "^2.7.1",
+    "@webref/idl": "^3.75.3"
+  }
+}

package/src/editor/context-menu.js

@@ -0,0 +1,144 @@
+// ─── Clipboard & Context Menu ─────────────────────────────────────────────────
+import { html, render as litRender } from "lit-html";
+import {
+  update,
+  selectNode,
+  insertNode,
+  removeNode,
+  duplicateNode,
+  getNodeAtPath,
+  parentElementPath,
+  childIndex,
+} from "../store.js";
+import { statusMessage } from "../panels/statusbar.js";
+
+/** @type {any} */
+let clipboard = null;
+
+// ─── Clipboard ────────────────────────────────────────────────────────────────
+
+/** @param {any} S */
+export function copyNode(S) {
+  if (!S.selection) return;
+  const node = getNodeAtPath(S.document, S.selection);
+  if (!node) return;
+  clipboard = structuredClone(node);
+  statusMessage("Copied");
+}
+
+/** @param {any} S */
+export function cutNode(S) {
+  if (!S.selection || S.selection.length < 2) return;
+  const node = getNodeAtPath(S.document, S.selection);
+  if (!node) return;
+  clipboard = structuredClone(node);
+  update(removeNode(S, S.selection));
+  statusMessage("Cut");
+}
+
+/** @param {any} S */
+export function pasteNode(S) {
+  if (!clipboard) return;
+  const pPath = S.selection || [];
+  const parent = getNodeAtPath(S.document, pPath);
+  if (!parent) return;
+
+  if (S.selection && S.selection.length >= 2) {
+    // Paste as sibling after selection
+    const pp = /** @type {any} */ (parentElementPath(S.selection));
+    const idx = /** @type {number} */ (childIndex(S.selection));
+    update(insertNode(S, pp, idx + 1, structuredClone(clipboard)));
+  } else {
+    // Paste as last child of root/selected
+    const idx = parent.children ? parent.children.length : 0;
+    update(insertNode(S, pPath, idx, structuredClone(clipboard)));
+  }
+  statusMessage("Pasted");
+}
+
+// ─── Context menu ─────────────────────────────────────────────────────────────
+
+const ctxMenu = document.createElement("sp-popover");
+ctxMenu.style.position = "fixed";
+ctxMenu.style.zIndex = "10000";
+/** Append inside sp-theme so the popover inherits Spectrum styles */
+(document.querySelector("sp-theme") || document.body).appendChild(ctxMenu);
+
+document.addEventListener("click", () => {
+  ctxMenu.removeAttribute("open");
+});
+
+/**
+ * @param {any} e
+ * @param {any} path
+ * @param {any} S
+ */
+export function showContextMenu(e, path, S) {
+  e.preventDefault();
+  ctxMenu.removeAttribute("open");
+
+  const node = getNodeAtPath(S.document, path);
+  if (!node) return;
+
+  // Select the node
+  update(selectNode(S, path));
+
+  /** @type {{ label: string; action?: () => void; danger?: boolean }[]} */
+  const items = [];
+
+  items.push({ label: "Copy", action: () => copyNode(S) });
+  if (path.length >= 2) {
+    items.push({ label: "Cut", action: () => cutNode(S) });
+    items.push({ label: "Duplicate", action: () => update(duplicateNode(S, S.selection)) });
+    items.push({ label: "—" }); // separator
+    items.push({ label: "Delete", action: () => update(removeNode(S, S.selection)), danger: true });
+  }
+  if (clipboard) {
+    items.push({ label: "—" });
+    items.push({
+      label: "Paste inside",
+      action: () => {
+        const idx = node.children ? node.children.length : 0;
+        update(insertNode(S, path, idx, structuredClone(clipboard)));
+      },
+    });
+    if (path.length >= 2) {
+      items.push({
+        label: "Paste after",
+        action: () => {
+          const pp = /** @type {any} */ (parentElementPath(path));
+          const idx = /** @type {number} */ (childIndex(path));
+          update(insertNode(S, pp, idx + 1, structuredClone(clipboard)));
+        },
+      });
+    }
+  }
+
+  litRender(
+    html`<sp-menu>
+      ${items.map((item) =>
+        item.label === "—"
+          ? html`<sp-menu-divider></sp-menu-divider>`
+          : html`<sp-menu-item
+              style=${item.danger ? "color: var(--danger)" : ""}
+              @click=${() => {
+                ctxMenu.removeAttribute("open");
+                item.action?.();
+              }}
+              >${item.label}</sp-menu-item
+            >`,
+      )}
+    </sp-menu>`,
+    ctxMenu,
+  );
+
+  // Position the menu
+  ctxMenu.setAttribute("open", "");
+  const menuRect = ctxMenu.getBoundingClientRect();
+  let x = e.clientX,
+    y = e.clientY;
+  if (x + menuRect.width > window.innerWidth) x = window.innerWidth - menuRect.width - 4;
+  if (y + menuRect.height > window.innerHeight) y = window.innerHeight - menuRect.height - 4;
+  ctxMenu.style.left = `${x}px`;
+  ctxMenu.style.top = `${y}px`;
+}