@jxsuite/studio 0.6.2 → 0.8.0

package/src/panels/git-panel.js

@@ -0,0 +1,280 @@
+/**
+ * Git panel — Source control sidebar with status, staging, commit, push/pull, and branch
+ * management.
+ */
+
+import { html, nothing } from "lit-html";
+import { live } from "lit-html/directives/live.js";
+import { getPlatform } from "../platform.js";
+import { updateUi, renderOnly } from "../store.js";
+
+async function refreshGitStatus() {
+  const plat = getPlatform();
+  updateUi("gitLoading", true);
+  updateUi("gitError", null);
+  try {
+    const [status, branches] = await Promise.all([plat.gitStatus(), plat.gitBranches()]);
+    updateUi("gitStatus", status);
+    updateUi("gitBranches", branches);
+  } catch (/** @type {any} */ e) {
+    updateUi("gitError", e.message);
+  } finally {
+    updateUi("gitLoading", false);
+    renderOnly("leftPanel");
+  }
+}
+
+/**
+ * @param {string} action
+ * @param {any} [body]
+ */
+async function gitAction(action, body) {
+  const plat = getPlatform();
+  updateUi("gitLoading", true);
+  updateUi("gitError", null);
+  try {
+    await plat[action](body);
+    await refreshGitStatus();
+  } catch (/** @type {any} */ e) {
+    updateUi("gitError", e.message);
+    updateUi("gitLoading", false);
+    renderOnly("leftPanel");
+  }
+}
+
+let _pollTimer = /** @type {any} */ (null);
+
+/** @param {any} S */
+export function renderGitPanel(S) {
+  const status = S.ui.gitStatus;
+  const branches = S.ui.gitBranches;
+  const loading = S.ui.gitLoading;
+
+  if (!status && !loading) {
+    refreshGitStatus();
+    return html`<div class="git-panel"><div class="git-loading">Loading...</div></div>`;
+  }
+
+  if (!_pollTimer) {
+    _pollTimer = setInterval(() => {
+      if (S.ui.leftTab === "git" && !S.ui.gitLoading) refreshGitStatus();
+    }, 30000);
+  }
+
+  const stagedFiles = status?.files?.filter((/** @type {any} */ f) => f.staged) || [];
+  const unstagedFiles = status?.files?.filter((/** @type {any} */ f) => !f.staged) || [];
+  const totalChanges = status?.files?.length || 0;
+
+  const doCommit = async () => {
+    const msg = S.ui.gitCommitMessage?.trim();
+    if (!msg) return;
+    updateUi("gitCommitMessage", "");
+    await gitAction("gitCommit", msg);
+  };
+
+  const branchPickerT = html`
+    <sp-picker
+      size="s"
+      quiet
+      class="git-branch-picker"
+      .value=${live(branches?.current || "")}
+      @change=${async (/** @type {any} */ e) => {
+        const val = e.target.value;
+        if (val === "__new__") {
+          e.target.value = branches?.current || "";
+          const name = prompt("New branch name:");
+          if (name?.trim()) await gitAction("gitCreateBranch", name.trim());
+          return;
+        }
+        if (val !== branches?.current) await gitAction("gitCheckout", val);
+      }}
+    >
+      ${(branches?.branches || []).map(
+        (/** @type {string} */ b) => html`<sp-menu-item value=${b}>${b}</sp-menu-item>`,
+      )}
+      <sp-menu-divider></sp-menu-divider>
+      <sp-menu-item value="__new__">+ New branch...</sp-menu-item>
+    </sp-picker>
+  `;
+
+  const toolbarT = html`
+    <div class="git-toolbar">
+      ${branchPickerT}
+      <sp-action-group size="xs" quiet>
+        <sp-action-button title="Fetch" @click=${() => gitAction("gitFetch")} ?disabled=${loading}>
+          <sp-icon-download slot="icon" size="xs"></sp-icon-download>
+        </sp-action-button>
+        <sp-action-button
+          title="Pull${status?.behind ? ` (${status.behind} behind)` : ""}"
+          @click=${() => gitAction("gitPull")}
+          ?disabled=${loading}
+        >
+          <sp-icon-arrow-down slot="icon" size="xs"></sp-icon-arrow-down>
+        </sp-action-button>
+        <sp-action-button
+          title="Push${status?.ahead ? ` (${status.ahead} ahead)` : ""}"
+          @click=${() => gitAction("gitPush")}
+          ?disabled=${loading}
+        >
+          <sp-icon-arrow-up slot="icon" size="xs"></sp-icon-arrow-up>
+        </sp-action-button>
+        <sp-action-button title="Refresh" @click=${() => refreshGitStatus()} ?disabled=${loading}>
+          <sp-icon-refresh slot="icon" size="xs"></sp-icon-refresh>
+        </sp-action-button>
+      </sp-action-group>
+    </div>
+  `;
+
+  const commitT = html`
+    <div class="git-commit-area">
+      <sp-textfield
+        size="s"
+        multiline
+        class="git-commit-input"
+        placeholder='Message (Ctrl+Enter to commit on "${status?.branch || ""}")'
+        .value=${live(S.ui.gitCommitMessage || "")}
+        @input=${(/** @type {any} */ e) => updateUi("gitCommitMessage", e.target.value)}
+        @keydown=${(/** @type {any} */ e) => {
+          if (e.ctrlKey && e.key === "Enter") {
+            e.preventDefault();
+            doCommit();
+          }
+        }}
+      ></sp-textfield>
+      <sp-action-button
+        class="git-commit-btn"
+        @click=${doCommit}
+        ?disabled=${!S.ui.gitCommitMessage?.trim() || loading}
+      >
+        <sp-icon-checkmark slot="icon" size="xs"></sp-icon-checkmark>
+        Commit
+      </sp-action-button>
+    </div>
+  `;
+
+  const fileRowT = (/** @type {any} */ file) => {
+    const parts = file.path.split("/");
+    const name = parts.pop();
+    const dir = parts.join("/");
+    return html`
+      <div class="git-file-row">
+        <span class="git-file-info">
+          <span class="git-file-name" title=${file.path}>${name}</span>
+          ${dir ? html`<span class="git-file-dir">${dir}</span>` : nothing}
+        </span>
+        <span class="git-file-actions">
+          ${file.staged
+            ? html`
+                <sp-action-button
+                  size="xs"
+                  quiet
+                  title="Unstage"
+                  @click=${() => gitAction("gitUnstage", [file.path])}
+                >
+                  <sp-icon-remove slot="icon" size="xs"></sp-icon-remove>
+                </sp-action-button>
+              `
+            : html`
+                <sp-action-button
+                  size="xs"
+                  quiet
+                  title="Discard changes"
+                  @click=${async () => {
+                    if (file.status === "U") return;
+                    if (!confirm(`Discard changes to ${file.path}?`)) return;
+                    await gitAction("gitDiscard", [file.path]);
+                  }}
+                  ?disabled=${file.status === "U"}
+                >
+                  <sp-icon-undo slot="icon" size="xs"></sp-icon-undo>
+                </sp-action-button>
+                <sp-action-button
+                  size="xs"
+                  quiet
+                  title="Stage"
+                  @click=${() => gitAction("gitStage", [file.path])}
+                >
+                  <sp-icon-add slot="icon" size="xs"></sp-icon-add>
+                </sp-action-button>
+              `}
+        </span>
+        <span class="git-file-badge git-status-${file.status}">${file.status}</span>
+      </div>
+    `;
+  };
+
+  const changesT = html`
+    ${stagedFiles.length > 0
+      ? html`
+          <div class="git-section">
+            <div class="git-section-header">
+              <span>Staged Changes</span>
+              <span class="git-count">${stagedFiles.length}</span>
+              <sp-action-button
+                size="xs"
+                quiet
+                title="Unstage all"
+                @click=${() =>
+                  gitAction(
+                    "gitUnstage",
+                    stagedFiles.map((/** @type {any} */ f) => f.path),
+                  )}
+              >
+                <sp-icon-remove slot="icon" size="xs"></sp-icon-remove>
+              </sp-action-button>
+            </div>
+            ${stagedFiles.map(fileRowT)}
+          </div>
+        `
+      : nothing}
+    ${unstagedFiles.length > 0
+      ? html`
+          <div class="git-section">
+            <div class="git-section-header">
+              <span>Changes</span>
+              <span class="git-count">${unstagedFiles.length}</span>
+              <sp-action-button
+                size="xs"
+                quiet
+                title="Stage all"
+                @click=${() =>
+                  gitAction(
+                    "gitStage",
+                    unstagedFiles.map((/** @type {any} */ f) => f.path),
+                  )}
+              >
+                <sp-icon-add slot="icon" size="xs"></sp-icon-add>
+              </sp-action-button>
+            </div>
+            ${unstagedFiles.map(fileRowT)}
+          </div>
+        `
+      : nothing}
+    ${totalChanges === 0 && !loading ? html`<div class="git-empty">No changes</div>` : nothing}
+  `;
+
+  const syncInfoT =
+    status?.ahead || status?.behind
+      ? html`
+          <div class="git-sync-info">
+            ${status.ahead ? html`<span title="Commits ahead">↑${status.ahead}</span>` : nothing}
+            ${status.behind ? html`<span title="Commits behind">↓${status.behind}</span>` : nothing}
+          </div>
+        `
+      : nothing;
+
+  return html`
+    <div class="git-panel">
+      ${toolbarT} ${syncInfoT} ${commitT}
+      ${loading ? html`<div class="git-loading">Loading...</div>` : nothing}
+      ${S.ui.gitError ? html`<div class="git-error">${S.ui.gitError}</div>` : nothing} ${changesT}
+    </div>
+  `;
+}
+
+export function cleanupGitPanel() {
+  if (_pollTimer) {
+    clearInterval(_pollTimer);
+    _pollTimer = null;
+  }
+}

package/src/panels/layers-panel.js

@@ -0,0 +1,270 @@
+/**
+ * Layers panel — document tree view showing element hierarchy with collapse, selection, move
+ * actions, and drag-and-drop reordering.
+ */
+
+import { html, nothing } from "lit-html";
+import {
+  getState,
+  update,
+  flattenTree,
+  getNodeAtPath,
+  pathKey,
+  pathsEqual,
+  parentElementPath,
+  childIndex,
+  nodeLabel,
+  selectNode,
+  moveNode,
+  removeNode,
+  VOID_ELEMENTS,
+} from "../store.js";
+import { view } from "../view.js";
+import { isInlineElement } from "../editor/inline-edit.js";
+import { showContextMenu } from "../editor/context-menu.js";
+
+/**
+ * @param {{ navigateToComponent: any; rerender: () => void }} ctx
+ * @returns {import("lit-html").TemplateResult}
+ */
+export function renderLayersTemplate(ctx) {
+  const S = getState();
+
+  for (const fn of view.dndCleanups) fn();
+  view.dndCleanups = [];
+
+  const rows = flattenTree(S.document);
+  const collapsed = S._collapsed || (S._collapsed = new Set());
+
+  /** @type {any[]} */
+  const layerRows = [];
+  for (const { node, path, depth, nodeType } of rows) {
+    let hidden = false;
+    for (let d = 1; d <= path.length; d++) {
+      const sub = path.slice(0, d);
+      if (d < path.length && collapsed.has(pathKey(sub))) {
+        hidden = true;
+        break;
+      }
+    }
+    if (hidden) continue;
+
+    if (S.mode === "content" && path.length === 0) continue;
+
+    if (nodeType === "text") {
+      const textPreview = String(node).length > 40 ? String(node).slice(0, 40) + "…" : String(node);
+      layerRows.push(html`
+        <div
+          class="layer-row"
+          style="padding-left:${depth * 16 + 8}px; opacity: 0.6; font-style: italic;"
+        >
+          <span class="layer-tag" style="background: #64748b; font-size: 0.65rem;">text</span>
+          <span class="layer-label">${textPreview}</span>
+        </div>
+      `);
+      continue;
+    }
+
+    if (path.length >= 2 && nodeType === "element") {
+      const pPath = parentElementPath(path);
+      const parentNode = pPath ? getNodeAtPath(S.document, pPath) : null;
+      if (parentNode && isInlineElement(node, parentNode)) continue;
+    }
+
+    const key = pathKey(path);
+    const isSelected = pathsEqual(path, S.selection);
+    const hasChildren = Array.isArray(node.children) && node.children.length > 0;
+    const hasMapChildren =
+      node.children && typeof node.children === "object" && node.children.$prototype === "Array";
+    const hasCases =
+      node.$switch &&
+      node.cases &&
+      typeof node.cases === "object" &&
+      Object.keys(node.cases).length > 0;
+    const isExpandable =
+      hasChildren || hasMapChildren || hasCases || (nodeType === "map" && node.map);
+    const isVoidEl = VOID_ELEMENTS.has((node.tagName || "div").toLowerCase());
+
+    /** @type {any} */
+    let badgeClass, badgeText, badgeTitle;
+    if (nodeType === "map") {
+      badgeClass = "layer-tag map-tag";
+      badgeText = "↻";
+      badgeTitle = "Repeater (mapped array)";
+    } else if (nodeType === "case" || nodeType === "case-ref") {
+      badgeClass = "layer-tag case-tag";
+      badgeText = path[path.length - 1];
+      badgeTitle = `$switch case: ${path[path.length - 1]}`;
+    } else if (node.$switch) {
+      badgeClass = "layer-tag switch-tag";
+      badgeText = "⇄";
+      badgeTitle = "$switch";
+    } else {
+      badgeClass = "layer-tag";
+      badgeText = node.tagName || "div";
+      badgeTitle = undefined;
+    }
+
+    /** @type {any} */
+    let labelText, labelItalic;
+    if (nodeType === "case-ref") {
+      labelText = node.$ref || "external";
+      labelItalic = true;
+    } else {
+      labelText = nodeLabel(node);
+      labelItalic = false;
+    }
+
+    const isElement = nodeType === "element";
+    const isRoot = S.mode === "content" ? path.length === 0 : path.length < 2;
+    const idx = isElement ? /** @type {number} */ (childIndex(path)) : 0;
+    const parentPath = isElement && !isRoot ? /** @type {any} */ (parentElementPath(path)) : null;
+    const parentNode = parentPath ? getNodeAtPath(S.document, parentPath) : null;
+    const siblingCount = parentNode?.children?.length || 0;
+    const canMoveUp = isElement && !isRoot && idx > 0;
+    const canMoveDown = isElement && !isRoot && idx < siblingCount - 1;
+    const prevSibling = canMoveUp && parentNode ? parentNode.children[idx - 1] : null;
+    const canMoveIn =
+      isElement &&
+      !isRoot &&
+      prevSibling &&
+      !VOID_ELEMENTS.has((prevSibling.tagName || "div").toLowerCase());
+    const grandparentPath =
+      isElement && parentPath && parentPath.length >= 2
+        ? /** @type {any} */ (parentElementPath(parentPath))
+        : null;
+    const canMoveOut = isElement && !isRoot && !!grandparentPath;
+
+    layerRows.push(html`
+      <div
+        class="layer-row${isSelected ? " selected" : ""}"
+        data-path=${key}
+        data-dnd-row=${isElement ? key : nothing}
+        data-dnd-depth=${isElement ? depth : nothing}
+        data-dnd-void=${isElement && isVoidEl ? "" : nothing}
+        @click=${() => update(selectNode(getState(), path))}
+        @contextmenu=${isElement
+          ? (/** @type {any} */ e) =>
+              showContextMenu(e, path, getState(), {
+                onEditComponent: ctx.navigateToComponent,
+              })
+          : nothing}
+      >
+        <span class="layer-indent" style="width:${depth * 16}px"></span>
+        <span class="layer-toggle"
+          >${isExpandable
+            ? html`
+                ${collapsed.has(key)
+                  ? html`<sp-icon-chevron-right></sp-icon-chevron-right>`
+                  : html`<sp-icon-chevron-down></sp-icon-chevron-down>`}
+              `
+            : nothing}</span
+        >
+        <span class=${badgeClass} title=${badgeTitle ?? nothing}>${badgeText}</span>
+        <span class="layer-label" style=${labelItalic ? "font-style:italic" : nothing}
+          >${labelText}</span
+        >
+        ${isElement && !isRoot
+          ? html`
+              <span class="layer-actions">
+                ${canMoveUp
+                  ? html`<sp-action-button
+                      quiet
+                      size="xs"
+                      title="Move up"
+                      @click=${(/** @type {any} */ e) => {
+                        e.stopPropagation();
+                        /** @type {HTMLElement} */ (e.currentTarget).blur();
+                        update(moveNode(getState(), path, parentPath, idx - 1));
+                      }}
+                    >
+                      <sp-icon-arrow-up slot="icon"></sp-icon-arrow-up>
+                    </sp-action-button>`
+                  : nothing}
+                ${canMoveDown
+                  ? html`<sp-action-button
+                      quiet
+                      size="xs"
+                      title="Move down"
+                      @click=${(/** @type {any} */ e) => {
+                        e.stopPropagation();
+                        /** @type {HTMLElement} */ (e.currentTarget).blur();
+                        update(moveNode(getState(), path, parentPath, idx + 2));
+                      }}
+                    >
+                      <sp-icon-arrow-down slot="icon"></sp-icon-arrow-down>
+                    </sp-action-button>`
+                  : nothing}
+                ${canMoveIn
+                  ? html`<sp-action-button
+                      quiet
+                      size="xs"
+                      title="Move into previous sibling"
+                      @click=${(/** @type {any} */ e) => {
+                        e.stopPropagation();
+                        /** @type {HTMLElement} */ (e.currentTarget).blur();
+                        const prevPath = [...parentPath, idx - 1];
+                        const prev = getNodeAtPath(getState().document, prevPath);
+                        const len = prev?.children?.length || 0;
+                        update(moveNode(getState(), path, prevPath, len));
+                      }}
+                    >
+                      <sp-icon-arrow-right slot="icon"></sp-icon-arrow-right>
+                    </sp-action-button>`
+                  : nothing}
+                ${canMoveOut
+                  ? html`<sp-action-button
+                      quiet
+                      size="xs"
+                      title="Move out of parent"
+                      @click=${(/** @type {any} */ e) => {
+                        e.stopPropagation();
+                        /** @type {HTMLElement} */ (e.currentTarget).blur();
+                        const parentIdx = /** @type {number} */ (childIndex(parentPath));
+                        update(moveNode(getState(), path, grandparentPath, parentIdx + 1));
+                      }}
+                    >
+                      <sp-icon-arrow-left slot="icon"></sp-icon-arrow-left>
+                    </sp-action-button>`
+                  : nothing}
+                <sp-action-button
+                  quiet
+                  size="xs"
+                  class="layer-delete"
+                  title="Delete"
+                  @click=${(/** @type {any} */ e) => {
+                    e.stopPropagation();
+                    update(removeNode(getState(), path));
+                  }}
+                >
+                  <sp-icon-close slot="icon"></sp-icon-close>
+                </sp-action-button>
+              </span>
+            `
+          : nothing}
+      </div>
+    `);
+  }
+
+  return html`
+    <div class="layers-container" style="position:relative">
+      <div
+        class="layers-tree"
+        @click=${(/** @type {any} */ e) => {
+          const toggle = e.target.closest(".layer-toggle");
+          if (!toggle) return;
+          e.stopPropagation();
+          const row = toggle.closest(".layer-row");
+          if (!row) return;
+          const key = row.dataset.path;
+          if (!key) return;
+          if (collapsed.has(key)) collapsed.delete(key);
+          else collapsed.add(key);
+          ctx.rerender();
+        }}
+      >
+        ${layerRows}
+      </div>
+    </div>
+  `;
+}

package/src/panels/left-panel.js

@@ -0,0 +1,142 @@
+/**
+ * Left panel — orchestrator that delegates to per-tab render functions.
+ *
+ * Each sub-panel exports a render function that takes its dependencies as arguments and returns a
+ * TemplateResult — the same pattern as imports-panel, signals-panel, etc. Only this orchestrator
+ * uses mount/render/unmount because it owns the DOM root and error boundary.
+ */
+
+import { html, render as litRender, nothing } from "lit-html";
+import {
+  getState,
+  leftPanel,
+  updateSession,
+  update,
+  applyMutation,
+  updateFrontmatter,
+} from "../store.js";
+import { view } from "../view.js";
+import { ensureLitState } from "./shared.js";
+import { renderLayersTemplate } from "./layers-panel.js";
+import { renderStylebookLayersTemplate } from "./stylebook-layers-panel.js";
+import { renderElementsTemplate } from "./elements-panel.js";
+import { selectStylebookTag, stylebookMeta } from "./stylebook-panel.js";
+
+/** @type {any} */
+let _ctx = null;
+
+/**
+ * Mount the left panel orchestrator.
+ *
+ * @param {any} ctx — callbacks and references that avoid circular dependencies
+ */
+export function mount(ctx) {
+  _ctx = ctx;
+}
+
+export function unmount() {
+  _ctx = null;
+}
+
+export function render() {
+  if (!_ctx) return;
+  try {
+    ensureLitState(leftPanel);
+    _render();
+  } catch (e) {
+    console.error("left-panel render error:", e);
+    try {
+      leftPanel.textContent = "";
+      // @ts-ignore — clear Lit's internal state to recover from marker corruption
+      delete leftPanel["_$litPart$"];
+      _render();
+    } catch (e2) {
+      console.error("left-panel retry failed:", e2);
+    }
+  }
+}
+
+function _render() {
+  const S = getState();
+  const tab = S.ui.leftTab;
+
+  /** @type {any} */
+  let content;
+  if (tab === "layers")
+    content =
+      _ctx.getCanvasMode() === "settings"
+        ? renderStylebookLayersTemplate({
+            selectStylebookTag,
+            stylebookMeta,
+          })
+        : renderLayersTemplate({
+            navigateToComponent: _ctx.navigateToComponent,
+            rerender: render,
+          });
+  else if (tab === "imports")
+    content = _ctx.renderImportsTemplate({
+      renderLeftPanel: render,
+      documentPath: S.documentPath,
+      documentElements: S.document.$elements || [],
+      applyMutation: (/** @type {any} */ fn) => {
+        update(applyMutation(getState(), fn));
+      },
+    });
+  else if (tab === "files") content = _ctx.renderFilesTemplate();
+  else if (tab === "blocks")
+    content = renderElementsTemplate({
+      webdata: _ctx.webdata,
+      defaultDef: _ctx.defaultDef,
+      rerender: render,
+    });
+  else if (tab === "state")
+    content = _ctx.renderSignalsTemplate(S, {
+      renderLeftPanel: render,
+      renderCanvas: _ctx.renderCanvas,
+      updateSession,
+    });
+  else if (tab === "data")
+    content = _ctx.renderDataExplorerTemplate(S.document.state, view.liveScope, {
+      renderCanvas: _ctx.renderCanvas,
+      renderLeftPanel: render,
+      defCategory: _ctx.defCategory,
+      defBadgeLabel: _ctx.defBadgeLabel,
+    });
+  else if (tab === "head") {
+    const isContent = S.mode === "content";
+    const fm = S.content?.frontmatter ?? {};
+    const headDoc = isContent ? { ...S.document, title: fm.title, $head: fm.$head } : S.document;
+    content = _ctx.renderHeadTemplate({
+      document: headDoc,
+      applyMutation: isContent
+        ? (/** @type {any} */ fn) => {
+            const tmp = { title: fm.title, $head: fm.$head ? [...fm.$head] : undefined };
+            fn(tmp);
+            let s = getState();
+            if (tmp.title !== fm.title) s = updateFrontmatter(s, "title", tmp.title);
+            const newHead = tmp.$head && tmp.$head.length > 0 ? tmp.$head : undefined;
+            s = updateFrontmatter(s, "$head", newHead);
+            update(s);
+          }
+        : (/** @type {any} */ fn) => {
+            update(applyMutation(getState(), fn));
+          },
+      renderLeftPanel: render,
+    });
+  } else if (tab === "git") content = _ctx.renderGitPanel(S);
+  else content = nothing;
+
+  litRender(html`<div class="panel-body">${content}</div>`, /** @type {any} */ (leftPanel));
+
+  // Post-render side effects
+  if (tab === "layers" && _ctx.getCanvasMode() !== "settings") _ctx.registerLayersDnD();
+  else if (tab === "imports") {
+    /* no post-render DnD needed */
+  } else if (tab === "blocks") {
+    _ctx.registerElementsDnD();
+    _ctx.registerComponentsDnD();
+  } else if (tab === "files") {
+    const tree = /** @type {any} */ (leftPanel)?.querySelector(".file-tree");
+    if (tree) _ctx.setupTreeKeyboard(tree);
+  }
+}