@jxsuite/studio 0.6.1 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/studio",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "Jx Studio — visual builder for Jx documents",
   "license": "MIT",
   "repository": {
@@ -30,7 +30,7 @@
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.8.1",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
-    "@jxsuite/runtime": "^0.5.5",
+    "@jxsuite/runtime": "^0.6.2",
     "@spectrum-web-components/accordion": "^1.12.0",
     "@spectrum-web-components/action-bar": "1.12.0",
     "@spectrum-web-components/action-button": "^1.12.0",

package/src/markdown/md-convert.js

@@ -14,6 +14,7 @@ import { unified } from "unified";
 import remarkStringify from "remark-stringify";
 import remarkDirective from "remark-directive";
 import { MD_ALL } from "./md-allowlist.js";
+import { htmlToJx } from "@jxsuite/parser/transpile";
 
 // ─── mdast → Jx ──────────────────────────────────────────────────────────
 
@@ -40,7 +41,6 @@ const MDAST_TAG_MAP = {
   table: () => "table",
   tableRow: () => "tr",
   tableCell: (/** @type {any} */ n) => (n.isHeader ? "th" : "td"),
-  html: () => "div",
   break: () => "br",
 };
 
@@ -55,7 +55,7 @@ export function mdToJx(mdast) {
     return {
       children: (mdast.children ?? [])
         .filter((/** @type {any} */ n) => n.type !== "yaml" && n.type !== "toml")
-        .map(convertMdastNode)
+        .flatMap(convertMdastNode)
         .filter(Boolean),
     };
   }
@@ -78,6 +78,12 @@ function convertMdastNode(node) {
     return convertDirective(node);
   }
 
+  if (node.type === "html") {
+    if (!node.value) return null;
+    const nodes = htmlToJx(node.value);
+    return nodes.length === 1 ? nodes[0] : { tagName: "div", children: nodes };
+  }
+
   const tagFn = MDAST_TAG_MAP[node.type];
   if (!tagFn) return null;
 
@@ -92,7 +98,7 @@ function convertMdastNode(node) {
       if (node.children?.length === 1 && node.children[0].type === "text") {
         el.textContent = node.children[0].value;
       } else if (node.children?.length > 0) {
-        el.children = node.children.map(convertMdastNode).filter(Boolean);
+        el.children = node.children.flatMap(convertMdastNode).filter(Boolean);
       }
       break;
     }
@@ -107,7 +113,7 @@ function convertMdastNode(node) {
       if (node.children?.length === 1 && node.children[0].type === "text") {
         el.textContent = node.children[0].value;
       } else if (node.children?.length > 0) {
-        el.children = node.children.map(convertMdastNode).filter(Boolean);
+        el.children = node.children.flatMap(convertMdastNode).filter(Boolean);
       }
       break;
     }
@@ -122,7 +128,7 @@ function convertMdastNode(node) {
       if (node.children?.length === 1 && node.children[0].type === "text") {
         el.textContent = node.children[0].value;
       } else if (node.children?.length > 0) {
-        el.children = node.children.map(convertMdastNode).filter(Boolean);
+        el.children = node.children.flatMap(convertMdastNode).filter(Boolean);
       }
       break;
 
@@ -134,13 +140,13 @@ function convertMdastNode(node) {
     case "blockquote":
     case "listItem":
       if (node.children?.length > 0) {
-        el.children = node.children.map(convertMdastNode).filter(Boolean);
+        el.children = node.children.flatMap(convertMdastNode).filter(Boolean);
       }
       break;
 
     case "list":
       if (node.children?.length > 0) {
-        el.children = node.children.map(convertMdastNode).filter(Boolean);
+        el.children = node.children.flatMap(convertMdastNode).filter(Boolean);
       }
       if (node.start != null && node.start !== 1) {
         el.attributes = { start: String(node.start) };
@@ -165,7 +171,7 @@ function convertMdastNode(node) {
 
     case "table": {
       // Mdast tables have rows directly; split into thead/tbody
-      const rows = (node.children ?? []).map(convertMdastNode).filter(Boolean);
+      const rows = (node.children ?? []).flatMap(convertMdastNode).filter(Boolean);
       const thead = rows.length > 0 ? { tagName: "thead", children: [rows[0]] } : null;
       const tbody = rows.length > 1 ? { tagName: "tbody", children: rows.slice(1) } : null;
       el.children = [thead, tbody].filter(Boolean);
@@ -174,7 +180,7 @@ function convertMdastNode(node) {
 
     case "tableRow":
       if (node.children?.length > 0) {
-        el.children = node.children.map(convertMdastNode).filter(Boolean);
+        el.children = node.children.flatMap(convertMdastNode).filter(Boolean);
       }
       break;
 
@@ -182,13 +188,9 @@ function convertMdastNode(node) {
       if (node.children?.length === 1 && node.children[0].type === "text") {
         el.textContent = node.children[0].value;
       } else if (node.children?.length > 0) {
-        el.children = node.children.map(convertMdastNode).filter(Boolean);
+        el.children = node.children.flatMap(convertMdastNode).filter(Boolean);
       }
       break;
-
-    case "html":
-      el.innerHTML = node.value;
-      break;
   }
 
   return el;
@@ -209,10 +211,10 @@ function convertDirective(node) {
     if (node.children?.length === 1 && node.children[0].type === "text") {
       el.textContent = node.children[0].value;
     } else if (node.children?.length > 0) {
-      el.children = node.children.map(convertMdastNode).filter(Boolean);
+      el.children = node.children.flatMap(convertMdastNode).filter(Boolean);
     }
   } else if (node.type === "containerDirective" && node.children?.length > 0) {
-    el.children = node.children.map(convertMdastNode).filter(Boolean);
+    el.children = node.children.flatMap(convertMdastNode).filter(Boolean);
   }
   return el;
 }

package/src/panels/activity-bar.js

@@ -3,6 +3,26 @@
 import { html, render as litRender, nothing } from "lit-html";
 import { activityBar, update, getState, renderOnly } from "../store.js";
 
+const gitBranchIcon = (/** @type {any} */ s) => html`
+  <svg
+    slot="icon"
+    xmlns="http://www.w3.org/2000/svg"
+    width=${s === "m" ? 20 : 16}
+    height=${s === "m" ? 20 : 16}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <line x1="6" y1="3" x2="6" y2="15"></line>
+    <circle cx="18" cy="6" r="3"></circle>
+    <circle cx="6" cy="18" r="3"></circle>
+    <path d="M18 9a9 9 0 0 1-9 9"></path>
+  </svg>
+`;
+
 /**
  * @param {any} tag
  * @param {any} size
@@ -32,6 +52,7 @@ export function tabIcon(tag, size) {
       html`<sp-icon-artboard slot="icon" size=${s}></sp-icon-artboard>`,
     "sp-icon-box": (/** @type {any} */ s) =>
       html`<sp-icon-box slot="icon" size=${s}></sp-icon-box>`,
+    "sp-icon-git-branch": gitBranchIcon,
   };
   const fn = m[tag];
   return fn ? fn(size || "s") : nothing;
@@ -47,6 +68,7 @@ export function renderActivityBar(S) {
     { value: "state", icon: "sp-icon-brackets", label: "State" },
     { value: "data", icon: "sp-icon-data", label: "Data" },
     { value: "head", icon: "sp-icon-file-single-web-page", label: "Head" },
+    { value: "git", icon: "sp-icon-git-branch", label: "Source Control" },
   ];
   const tpl = html`
     <sp-tabs

package/src/panels/elements-panel.js

@@ -0,0 +1,148 @@
+/** Elements panel — block/component palette with categorized accordion and search filter. */
+
+import { html, nothing } from "lit-html";
+import { getState, update, getNodeAtPath, insertNode } from "../store.js";
+import { view } from "../view.js";
+import { getEffectiveElements } from "../site-context.js";
+import { componentRegistry } from "../files/components.js";
+
+/**
+ * @param {{ webdata: any; defaultDef: (tag: string) => any; rerender: () => void }} ctx
+ * @returns {import("lit-html").TemplateResult}
+ */
+export function renderElementsTemplate(ctx) {
+  const S = getState();
+
+  const categories = Object.entries(ctx.webdata.elements).map(
+    (/** @type {any} */ [category, elements]) => {
+      const filtered = view.elementsFilter
+        ? elements.filter((/** @type {any} */ e) => e.tag.includes(view.elementsFilter))
+        : elements;
+      if (filtered.length === 0) return nothing;
+
+      return html`
+        <sp-accordion-item
+          label=${category}
+          ?open=${!view.elementsCollapsed.has(category)}
+          @sp-accordion-item-toggle=${(/** @type {any} */ e) => {
+            if (e.target.open) view.elementsCollapsed.delete(category);
+            else view.elementsCollapsed.add(category);
+          }}
+        >
+          ${filtered.map((/** @type {any} */ { tag }) => {
+            const def = ctx.defaultDef(tag);
+            return html`
+              <div
+                class="element-card"
+                data-block-tag=${tag}
+                @click=${() => {
+                  const s = getState();
+                  const parentPath = s.selection || [];
+                  const parent = getNodeAtPath(s.document, parentPath);
+                  const idx = parent?.children ? parent.children.length : 0;
+                  update(insertNode(s, parentPath, idx, structuredClone(def)));
+                }}
+              >
+                <div class="element-card-preview"></div>
+                <div class="element-card-label">&lt;${tag}&gt;</div>
+              </div>
+            `;
+          })}
+        </sp-accordion-item>
+      `;
+    },
+  );
+
+  const effectiveEls = getEffectiveElements(S.document?.$elements);
+  /** @type {Set<string>} */
+  const enabledTags = new Set();
+  for (const entry of effectiveEls) {
+    if (typeof entry !== "string") continue;
+    const comp = componentRegistry.find(
+      (/** @type {any} */ c) =>
+        c.source === "npm" && c.modulePath && entry === `${c.package}/${c.modulePath}`,
+    );
+    if (comp) {
+      enabledTags.add(comp.tagName);
+    } else {
+      for (const c of componentRegistry) {
+        if (c.source === "npm" && c.package === entry) enabledTags.add(c.tagName);
+      }
+    }
+  }
+  const compsFiltered =
+    componentRegistry.length > 0
+      ? componentRegistry
+          .filter((/** @type {any} */ c) => c.source !== "npm" || enabledTags.has(c.tagName))
+          .filter(
+            (/** @type {any} */ c) =>
+              !view.elementsFilter || c.tagName.toLowerCase().includes(view.elementsFilter),
+          )
+      : [];
+
+  const componentsAccordion =
+    compsFiltered.length > 0
+      ? html`
+          <sp-accordion-item
+            label="Components"
+            ?open=${!view.elementsCollapsed.has("Components")}
+            @sp-accordion-item-toggle=${(/** @type {any} */ e) => {
+              if (e.target.open) view.elementsCollapsed.delete("Components");
+              else view.elementsCollapsed.add("Components");
+            }}
+          >
+            <div class="components-section">
+              ${compsFiltered.map(
+                (/** @type {any} */ comp) => html`
+                  <div
+                    class="element-card"
+                    data-component-tag=${comp.tagName}
+                    title=${comp.source === "npm"
+                      ? `${comp.package}: <${comp.tagName}>`
+                      : comp.path}
+                    @click=${() => {
+                      const s = getState();
+                      const parentPath = s.selection || [];
+                      const parent = getNodeAtPath(s.document, parentPath);
+                      const idx = parent?.children ? parent.children.length : 0;
+                      const instanceDef = {
+                        tagName: comp.tagName,
+                        $props: Object.fromEntries(
+                          (comp.props || []).map((/** @type {any} */ p) => [
+                            p.name,
+                            p.default !== undefined ? p.default : "",
+                          ]),
+                        ),
+                      };
+                      update(insertNode(s, parentPath, idx, structuredClone(instanceDef)));
+                    }}
+                  >
+                    <div class="element-card-preview">
+                      <span style="color:var(--fg-dim);font-size:11px;font-style:italic"
+                        >&lt;${comp.tagName}&gt;</span
+                      >
+                    </div>
+                    <div class="element-card-label">${comp.tagName}</div>
+                  </div>
+                `,
+              )}
+            </div>
+          </sp-accordion-item>
+        `
+      : nothing;
+
+  return html`
+    <sp-search
+      size="s"
+      placeholder="Filter elements…"
+      value=${view.elementsFilter}
+      @input=${(/** @type {any} */ e) => {
+        view.elementsFilter = e.target.value.toLowerCase();
+        ctx.rerender();
+      }}
+    ></sp-search>
+    <sp-accordion class="elements-list" allow-multiple
+      >${componentsAccordion}${categories}</sp-accordion
+    >
+  `;
+}

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;
+  }
+}