@jxsuite/studio 0.6.2 → 0.7.0

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,141 @@
+/**
+ * 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";
+
+/** @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: _ctx.selectStylebookTag,
+            stylebookMeta: _ctx.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);
+  }
+}

package/src/panels/right-panel.js

@@ -11,6 +11,7 @@ import { eventsSidebarTemplate } from "./events-panel.js";
 import { isCustomElementDoc } from "./signals-panel.js";
 import { ensureLitState } from "./shared.js";
 import { isColorPopoverOpen } from "../ui/color-selector.js";
+import { renderStylePanelTemplate } from "./style-panel.js";
 
 /** @type {any} */
 let _ctx = null;
@@ -21,7 +22,7 @@ let _unsub = null;
 /**
  * Mount the right panel.
  *
- * @param {any} ctx — { propertiesSidebarTemplate, renderStylePanelTemplate, renderCanvas,
+ * @param {any} ctx — { propertiesSidebarTemplate, getCanvasMode, renderCanvas,
  *   updateForcedPseudoPreview }
  */
 export function mount(ctx) {
@@ -117,7 +118,7 @@ function rightPanelTemplate() {
     });
   } else if (tab === "style") {
     try {
-      bodyT = _ctx.renderStylePanelTemplate();
+      bodyT = renderStylePanelTemplate({ getCanvasMode: _ctx.getCanvasMode });
     } catch (/** @type {any} */ e) {
       console.error("[renderStylePanelTemplate]", e);
     }

package/src/panels/style-inputs.js

@@ -0,0 +1,176 @@
+/** Style input widgets — keyword, select, combobox, and font renderers for the style panel. */
+
+import { html } from "lit-html";
+import { live } from "lit-html/directives/live.js";
+import { getState, update, updateStyle, debouncedStyleCommit } from "../store.js";
+import { widgetForType as _widgetForType } from "../ui/widgets.js";
+import { kebabToLabel, friendlyNameToVar, varDisplayName } from "../utils/studio-utils.js";
+import {
+  TYPO_PREVIEW_PROPS,
+  currentFontFamily,
+  getFontVars,
+  getCssInitialMap,
+  camelToKebab,
+} from "./style-utils.js";
+
+/**
+ * Dual-mode keyword input — shared by select (enum) and combobox (examples) widgets.
+ *
+ * @param {any} options @param {any} prop @param {any} value @param {any} onChange
+ */
+export function renderKeywordInput(options, prop, value, onChange) {
+  const cssInitialMap = getCssInitialMap();
+  const isTypoPreview = TYPO_PREVIEW_PROPS.has(prop) || prop === "fontWeight";
+  const font = isTypoPreview ? currentFontFamily() : "";
+  const cssProp = isTypoPreview ? camelToKebab(prop) : "";
+
+  const comboOptions = options.map((/** @type {any} */ v) => {
+    const label = v.includes("-")
+      ? kebabToLabel(v)
+      : v.replace(/^./, (/** @type {any} */ c) => c.toUpperCase());
+    const style = isTypoPreview ? `${cssProp}: ${v};${font ? ` font-family: ${font}` : ""}` : "";
+    return { value: v, label, style };
+  });
+
+  return html`<jx-value-selector
+    size="s"
+    .value=${value || ""}
+    placeholder=${cssInitialMap.get(prop) || ""}
+    .options=${comboOptions}
+    @change=${(/** @type {any} */ e) => onChange(e.target.value)}
+    @input=${debouncedStyleCommit(`kw:${prop}`, 400, (/** @type {any} */ e) =>
+      onChange(e.target.value),
+    )}
+  ></jx-value-selector>`;
+}
+
+/** @param {any} entry @param {any} prop @param {any} value @param {any} onChange */
+export function renderSelectInput(entry, prop, value, onChange) {
+  return renderKeywordInput(entry.enum || [], prop, value, onChange);
+}
+
+/** @param {any} preset @param {any} onChange */
+function handleFontPresetSelection(preset, onChange) {
+  const S = getState();
+  const varName = friendlyNameToVar(preset.title, "--font-");
+  if (!S.document?.style?.[varName]) {
+    update(updateStyle(S, [], varName, preset.value));
+  }
+  onChange(`var(${varName})`);
+}
+
+/** @param {any} val @param {any} presets @param {any} onChange */
+function handleFontSelection(val, presets, onChange) {
+  if (!val) return;
+  if (val.startsWith("__preset__:")) {
+    const title = val.slice("__preset__:".length);
+    const preset = presets.find((/** @type {any} */ p) => p.title === title);
+    if (preset) handleFontPresetSelection(preset, onChange);
+    return;
+  }
+  if (val.startsWith("--")) {
+    onChange(`var(${val})`);
+    return;
+  }
+  const preset = presets.find((/** @type {any} */ p) => p.title === val);
+  if (preset) {
+    handleFontPresetSelection(preset, onChange);
+    return;
+  }
+  const fontVars = getFontVars();
+  const matchedVar = fontVars.find(
+    (/** @type {any} */ fv) => varDisplayName(fv.name, "--font-") === val,
+  );
+  if (matchedVar) {
+    onChange(`var(${matchedVar.name})`);
+    return;
+  }
+  onChange(val);
+}
+
+/**
+ * Build font options array for jx-value-selector.
+ *
+ * @param {any[]} fontVars @param {any[]} presets
+ * @returns {{ value: string; label: string; style: string }[] | { divider: true }[]}
+ */
+export function buildFontOptions(fontVars, presets) {
+  /** @type {any[]} */
+  const opts = fontVars.map((/** @type {any} */ fv) => ({
+    value: fv.name,
+    label: varDisplayName(fv.name, "--font-"),
+    style: `font-family: ${fv.value}`,
+  }));
+  const unadded = presets.filter(
+    (/** @type {any} */ p) =>
+      !fontVars.some((/** @type {any} */ fv) => fv.name === friendlyNameToVar(p.title, "--font-")),
+  );
+  if (unadded.length > 0 && opts.length > 0) opts.push({ divider: true });
+  for (const p of unadded) {
+    opts.push({
+      value: "__preset__:" + p.title,
+      label: p.title,
+      style: `font-family: ${p.value}`,
+    });
+  }
+  return opts;
+}
+
+/** @param {any} entry @param {any} prop @param {any} value @param {any} onChange */
+export function renderComboboxInput(entry, prop, value, onChange) {
+  const cssInitialMap = getCssInitialMap();
+  const fontVars = prop === "fontFamily" ? getFontVars() : [];
+  const presets = entry.presets || [];
+  const examples = entry.examples || [];
+
+  if (prop === "fontFamily") {
+    const varMatch = typeof value === "string" && value.match(/^var\((--[^)]+)\)$/);
+    const comboValue = varMatch ? varMatch[1] : value || "";
+    const fontOptions = buildFontOptions(fontVars, presets);
+    return html`<jx-value-selector
+      size="s"
+      .value=${comboValue}
+      placeholder=${cssInitialMap.get("fontFamily") || ""}
+      .options=${fontOptions}
+      @change=${(/** @type {any} */ e) => handleFontSelection(e.target.value, presets, onChange)}
+      @input=${debouncedStyleCommit("combo:fontFamily", 400, (/** @type {any} */ e) =>
+        onChange(e.target.value),
+      )}
+    ></jx-value-selector>`;
+  }
+
+  if (examples.length > 0) {
+    return renderKeywordInput(examples, prop, value, onChange);
+  }
+
+  return html`
+    <sp-textfield
+      size="s"
+      placeholder=${cssInitialMap.get(prop) || ""}
+      .value=${live(value || "")}
+      @input=${debouncedStyleCommit(`combo:${prop}`, 400, (/** @type {any} */ e) =>
+        onChange(e.target.value),
+      )}
+    ></sp-textfield>
+  `;
+}
+
+/**
+ * Style-aware widgetForType — wraps the generic widget renderer with style-specific select/combobox
+ * inputs and CSS initial-value placeholders.
+ */
+export function widgetForType(
+  /** @type {any} */ type,
+  /** @type {any} */ entry,
+  /** @type {any} */ prop,
+  /** @type {any} */ value,
+  /** @type {any} */ onCommit,
+  /** @type {any} */ opts = {},
+) {
+  const cssInitialMap = getCssInitialMap();
+  return _widgetForType(type, entry, prop, value, onCommit, {
+    placeholder: opts.placeholder || cssInitialMap.get(prop) || "",
+    renderSelect: renderSelectInput,
+    renderCombobox: renderComboboxInput,
+  });
+}