@jxsuite/studio 0.28.4 → 0.29.0

package/src/panels/layers-panel.ts

@@ -7,6 +7,7 @@
 import { html, nothing } from "lit-html";
 import { classMap } from "lit-html/directives/class-map.js";
 import { ifDefined } from "lit-html/directives/if-defined.js";
+import { repeat } from "lit-html/directives/repeat.js";
 import {
   VOID_ELEMENTS,
   childIndex,
@@ -123,7 +124,7 @@ export function renderLayersTemplate(ctx: {
   const rows = flattenTree(tab!.doc.document);
   const collapsed = (view._layersCollapsed ||= new Set());
 
-  const layerRows: TemplateResult[] = [];
+  const layerRows: { key: string; tpl: TemplateResult }[] = [];
   for (const { node, path, depth, nodeType } of rows) {
     let hidden = false;
     for (let d = 1; d <= path.length; d++) {
@@ -143,15 +144,18 @@ export function renderLayersTemplate(ctx: {
 
     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>
-      `);
+      layerRows.push({
+        key: pathKey(path),
+        tpl: 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;
     }
 
@@ -183,7 +187,10 @@ export function renderLayersTemplate(ctx: {
       Object.keys(jxNode.cases).length > 0;
     const isExpandable =
       hasChildren || hasMapChildren || hasCases || (nodeType === "map" && jxNode.map);
-    const isVoidEl = VOID_ELEMENTS.has((jxNode.tagName || "div").toLowerCase());
+    // Array nodes can't accept dropped children (their content is the single map template), so they
+    // Block the make-child drop instruction like void elements do.
+    const isVoidEl =
+      VOID_ELEMENTS.has((jxNode.tagName || "div").toLowerCase()) || nodeType === "map";
 
     /** @type {string} */
     let badgeClass;
@@ -203,6 +210,14 @@ export function renderLayersTemplate(ctx: {
       badgeClass = "layer-tag switch-tag";
       badgeText = "⇄";
       badgeTitle = "$switch";
+    } else if (jxNode.tagName === "slot") {
+      const slotName = jxNode.attributes?.name;
+      badgeClass = "layer-tag slot-tag";
+      badgeText = "▣";
+      badgeTitle =
+        typeof slotName === "string" && slotName.trim()
+          ? `Slot "${slotName.trim()}"`
+          : "Default slot";
     } else {
       badgeClass = "layer-tag";
       badgeText = jxNode.tagName || "div";
@@ -221,14 +236,18 @@ export function renderLayersTemplate(ctx: {
       labelItalic = false;
     }
 
-    const isElement = nodeType === "element";
+    // Array (repeater) nodes are first-class structural nodes — movable/draggable/deletable like
+    // Elements. Both sit at a numeric child index; templates (path tail "map") and case nodes do
+    // Not, so they stay selectable/editable but not structurally manipulable.
+    const isStructural =
+      (nodeType === "element" || nodeType === "map") && typeof childIndex(path) === "number";
     const isRoot = tab?.doc.mode === "content" ? path.length === 0 : path.length < 2;
-    const idx = isElement ? (childIndex(path) as number) : 0;
-    const parentPath = isElement && !isRoot ? (parentElementPath(path) as JxPath) : null;
+    const idx = isStructural ? (childIndex(path) as number) : 0;
+    const parentPath = isStructural && !isRoot ? (parentElementPath(path) as JxPath) : null;
     const parentNode = parentPath ? getNodeAtPath(tab!.doc.document, parentPath) : null;
     const siblingCount = childList(parentNode).length;
-    const canMoveUp = isElement && !isRoot && idx > 0;
-    const canMoveDown = isElement && !isRoot && idx < siblingCount - 1;
+    const canMoveUp = isStructural && !isRoot && idx > 0;
+    const canMoveDown = isStructural && !isRoot && idx < siblingCount - 1;
     const prevSibling = canMoveUp && parentNode ? childList(parentNode)[idx - 1] : null;
     const prevIsContainer = (() => {
       if (!prevSibling || typeof prevSibling !== "object") {
@@ -257,142 +276,149 @@ export function renderLayersTemplate(ctx: {
         (c) => typeof c === "object" && c !== null && !isInlineElement(c, prevSibling),
       );
     })();
-    const canMoveIn = isElement && !isRoot && prevIsContainer;
+    const canMoveIn = isStructural && !isRoot && prevIsContainer;
     const grandparentPath =
-      isElement && parentPath && parentPath.length >= 2
+      isStructural && parentPath && parentPath.length >= 2
         ? (parentElementPath(parentPath) as JxPath)
         : null;
-    const canMoveOut = isElement && !isRoot && Boolean(grandparentPath);
+    const canMoveOut = isStructural && !isRoot && Boolean(grandparentPath);
 
-    layerRows.push(html`
-      <div
-        class=${classMap({ "layer-row": true, selected: isSelected })}
-        data-path=${key}
-        data-dnd-row=${isElement ? key : nothing}
-        data-dnd-depth=${isElement ? depth : nothing}
-        data-dnd-void=${isElement && isVoidEl ? "" : nothing}
-        data-dnd-expanded=${isElement && isExpandable && !collapsed.has(key) ? "" : nothing}
-        @click=${() => {
-          activeTab.value!.session.selection = path;
-          panToElement(path);
-        }}
-        @dblclick=${isElement
-          ? (e: MouseEvent) => {
-              e.stopPropagation();
-              startLayerTitleEdit(path, ctx.rerender);
-            }
-          : nothing}
-        @contextmenu=${isElement
-          ? (e: MouseEvent) =>
-              showContextMenu(e, path, {
-                onEditComponent: ctx.navigateToComponent,
-                rerender: ctx.rerender,
-              })
-          : nothing}
-      >
-        <span class="layer-indent" style="width:${depth * 16}px"></span>
-        <span class="layer-toggle"
-          >${isExpandable
+    layerRows.push({
+      key,
+      tpl: html`
+        <div
+          class=${classMap({ "layer-row": true, selected: isSelected })}
+          data-path=${key}
+          data-dnd-row=${isStructural ? key : nothing}
+          data-dnd-depth=${isStructural ? depth : nothing}
+          data-dnd-void=${isStructural && isVoidEl ? "" : nothing}
+          data-dnd-expanded=${isStructural && isExpandable && !collapsed.has(key) ? "" : nothing}
+          @click=${() => {
+            activeTab.value!.session.selection = path;
+            panToElement(path);
+          }}
+          @dblclick=${isStructural
+            ? (e: MouseEvent) => {
+                e.stopPropagation();
+                startLayerTitleEdit(path, ctx.rerender);
+              }
+            : nothing}
+          @contextmenu=${isStructural
+            ? (e: MouseEvent) =>
+                showContextMenu(e, path, {
+                  onEditComponent: ctx.navigateToComponent,
+                  rerender: ctx.rerender,
+                })
+            : 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=${ifDefined(badgeTitle ?? undefined)}>${badgeText}</span>
+          <span class="layer-label" style=${labelItalic ? "font-style:italic" : nothing}
+            >${labelText}</span
+          >
+          ${isStructural && !isRoot
             ? html`
-                ${collapsed.has(key)
-                  ? html`<sp-icon-chevron-right></sp-icon-chevron-right>`
-                  : html`<sp-icon-chevron-down></sp-icon-chevron-down>`}
+                <span class="layer-actions">
+                  <span class="layer-drag-handle" title="Drag to reorder">⠿</span>
+                  ${canMoveUp
+                    ? html`<sp-action-button
+                        quiet
+                        size="xs"
+                        title="Move up"
+                        @click=${(e: MouseEvent) => {
+                          e.stopPropagation();
+                          (e.currentTarget as HTMLElement).blur();
+                          const pp = parentPath as JxPath;
+                          transactDoc(activeTab.value!, (t) =>
+                            mutateMoveNode(t, path, pp, 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=${(e: MouseEvent) => {
+                          e.stopPropagation();
+                          (e.currentTarget as HTMLElement).blur();
+                          const pp = parentPath as JxPath;
+                          transactDoc(activeTab.value!, (t) =>
+                            mutateMoveNode(t, path, pp, 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=${(e: MouseEvent) => {
+                          e.stopPropagation();
+                          (e.currentTarget as HTMLElement).blur();
+                          const pp = parentPath as JxPath;
+                          const prevPath = [...pp, "children", idx - 1];
+                          const prev = getNodeAtPath(activeTab.value!.doc.document, prevPath);
+                          const len = childList(prev).length;
+                          transactDoc(activeTab.value!, (t) =>
+                            mutateMoveNode(t, 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=${(e: MouseEvent) => {
+                          e.stopPropagation();
+                          (e.currentTarget as HTMLElement).blur();
+                          const gp = grandparentPath as JxPath;
+                          const parentIdx = childIndex(parentPath!) as number;
+                          transactDoc(activeTab.value!, (t) =>
+                            mutateMoveNode(t, path, gp, 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=${(e: MouseEvent) => {
+                      e.stopPropagation();
+                      transactDoc(activeTab.value!, (t) => mutateRemoveNode(t, path));
+                    }}
+                  >
+                    <sp-icon-close slot="icon"></sp-icon-close>
+                  </sp-action-button>
+                </span>
               `
-            : nothing}</span
-        >
-        <span class=${badgeClass} title=${ifDefined(badgeTitle ?? undefined)}>${badgeText}</span>
-        <span class="layer-label" style=${labelItalic ? "font-style:italic" : nothing}
-          >${labelText}</span
-        >
-        ${isElement && !isRoot
-          ? html`
-              <span class="layer-actions">
-                <span class="layer-drag-handle" title="Drag to reorder">⠿</span>
-                ${canMoveUp
-                  ? html`<sp-action-button
-                      quiet
-                      size="xs"
-                      title="Move up"
-                      @click=${(e: MouseEvent) => {
-                        e.stopPropagation();
-                        (e.currentTarget as HTMLElement).blur();
-                        const pp = parentPath as JxPath;
-                        transactDoc(activeTab.value!, (t) => mutateMoveNode(t, path, pp, 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=${(e: MouseEvent) => {
-                        e.stopPropagation();
-                        (e.currentTarget as HTMLElement).blur();
-                        const pp = parentPath as JxPath;
-                        transactDoc(activeTab.value!, (t) => mutateMoveNode(t, path, pp, 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=${(e: MouseEvent) => {
-                        e.stopPropagation();
-                        (e.currentTarget as HTMLElement).blur();
-                        const pp = parentPath as JxPath;
-                        const prevPath = [...pp, idx - 1];
-                        const prev = getNodeAtPath(activeTab.value!.doc.document, prevPath);
-                        const len = childList(prev).length;
-                        transactDoc(activeTab.value!, (t) =>
-                          mutateMoveNode(t, 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=${(e: MouseEvent) => {
-                        e.stopPropagation();
-                        (e.currentTarget as HTMLElement).blur();
-                        const gp = grandparentPath as JxPath;
-                        const parentIdx = childIndex(parentPath!) as number;
-                        transactDoc(activeTab.value!, (t) =>
-                          mutateMoveNode(t, path, gp, 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=${(e: MouseEvent) => {
-                    e.stopPropagation();
-                    transactDoc(activeTab.value!, (t) => mutateRemoveNode(t, path));
-                  }}
-                >
-                  <sp-icon-close slot="icon"></sp-icon-close>
-                </sp-action-button>
-              </span>
-            `
-          : nothing}
-      </div>
-    `);
+            : nothing}
+        </div>
+      `,
+    });
   }
 
   return html`
@@ -421,7 +447,11 @@ export function renderLayersTemplate(ctx: {
           ctx.rerender();
         }}
       >
-        ${layerRows}
+        ${repeat(
+          layerRows,
+          (r) => r.key,
+          (r) => r.tpl,
+        )}
       </div>
     </div>
   `;

package/src/panels/preview-render.ts

@@ -37,6 +37,21 @@ export function renderCanvasNode(
     return;
   }
 
+  // Array pseudo-element: render as a repeater perimeter at the array's own path, with a single
+  // Template instance inside (matches the edit-mode visual).
+  if (isMappedArray(node)) {
+    const wrapper = document.createElement("div");
+    wrapper.className = "repeater-perimeter";
+    elToPath.set(wrapper, path);
+    const template = node.map;
+    if (template && typeof template === "object") {
+      renderCanvasNode(template, [...path, "map"], wrapper, activeBreakpoints, featureToggles);
+    }
+    wrapper.style.pointerEvents = "none";
+    parent.append(wrapper);
+    return wrapper;
+  }
+
   const tag = node.tagName || "div";
   const el = document.createElement(tag);
 

package/src/panels/properties-panel.ts

@@ -55,6 +55,7 @@ interface SignalOption {
 interface HtmlMetaEntry {
   $section: string;
   $order: number;
+  $attr?: string;
   $elements?: string[];
   $label?: string;
   $input?: string;
@@ -77,12 +78,9 @@ function isInsideMapTemplate(path: JxPath | null) {
   if (!path) {
     return false;
   }
-  for (let i = 0; i < path.length - 1; i++) {
-    if (path[i] === "children" && path[i + 1] === "map") {
-      return true;
-    }
-  }
-  return false;
+  // A "map" segment addresses a repeater template (`[…, "children", i, "map", …]`, or the legacy
+  // `[…, "children", "map", …]`), so anything at or below it is inside a map template.
+  return path.includes("map");
 }
 
 /**
@@ -173,9 +171,9 @@ function bindableFieldRow(
       const staticDefault = defaultAsString(defs[defName]);
       onChange(staticDefault || undefined);
     } else if (signalDefs.length > 0) {
-      onChange({ $ref: `#/state/${signalDefs[0][0]}` });
+      onChange({ $ref: `#/state/${signalDefs[0]![0]}` });
     } else if (extraSignals && extraSignals.length > 0) {
-      onChange({ $ref: extraSignals[0].value });
+      onChange({ $ref: extraSignals[0]!.value });
     }
   };
 
@@ -446,9 +444,9 @@ function renderComponentPropsFieldsTemplate(
             const staticDefault = defaultAsString(defs[defName]);
             onChange(staticDefault || undefined);
           } else if (signalDefs.length > 0) {
-            onChange({ $ref: `#/state/${signalDefs[0][0]}` });
+            onChange({ $ref: `#/state/${signalDefs[0]![0]}` });
           } else if (extraSignals && extraSignals.length > 0) {
-            onChange({ $ref: extraSignals[0].value });
+            onChange({ $ref: extraSignals[0]!.value });
           }
         };
 
@@ -565,7 +563,7 @@ function renderComponentPropsFieldsTemplate(
 
 /** Custom attrs fields template */
 function renderCustomAttrsFieldsTemplate(
-  node: JxMutableNode,
+  _node: JxMutableNode,
   path: JxPath,
   attrs: Record<string, unknown>,
   knownAttrNames: Set<string>,
@@ -809,7 +807,7 @@ function renderPageSection(node: JxMutableNode) {
   }
 
   if (layoutEntries === null) {
-    loadLayoutEntries();
+    void loadLayoutEntries();
     return nothing;
   }
 
@@ -949,10 +947,6 @@ export function renderPropertiesPanelTemplate(ctx: {
 
   const path = tab.session.selection;
   const isMapNode = node.$prototype === "Array";
-  const isMapParent =
-    node.children &&
-    typeof node.children === "object" &&
-    (node.children as unknown as { $prototype?: string }).$prototype === "Array";
   const isSwitchNode = Boolean(node.$switch);
   const isCustomInstance = (node.tagName || "").includes("-");
   const isRoot = path.length === 0;
@@ -1010,7 +1004,9 @@ export function renderPropertiesPanelTemplate(ctx: {
   const applicableAttrs = {} as Record<string, HtmlMetaEntry>;
   for (const [attr, entry] of Object.entries(htmlMeta.$defs) as [string, HtmlMetaEntry][]) {
     if (!entry.$elements || entry.$elements.includes(tagName)) {
-      applicableAttrs[attr] = entry;
+      // The $attr field aliases a $defs key to a different attribute name.
+      // This lets the same attribute (e.g. "name") carry per-element metadata.
+      applicableAttrs[entry.$attr ?? attr] = entry;
     }
   }
 
@@ -1025,7 +1021,7 @@ export function renderPropertiesPanelTemplate(ctx: {
     }
   }
   for (const sec of htmlMeta.$sections) {
-    attrSections[sec.key].sort(
+    attrSections[sec.key]!.sort(
       (a: { name: string; entry: HtmlMetaEntry }, b: { name: string; entry: HtmlMetaEntry }) =>
         a.entry.$order - b.entry.$order,
     );
@@ -1196,13 +1192,6 @@ export function renderPropertiesPanelTemplate(ctx: {
           >
           </sp-checkbox>
         </div>
-        ${isMapParent
-          ? html`
-              <div style="font-size:10px;color:var(--fg-dim);padding:4px 0;font-style:italic">
-                Children: Repeater (select in layers to configure)
-              </div>
-            `
-          : nothing}
       </div>
     </sp-accordion-item>
   `;
@@ -1283,9 +1272,9 @@ export function renderPropertiesPanelTemplate(ctx: {
     : nothing;
 
   const attrSectionTemplates = htmlMeta.$sections
-    .filter((sec) => attrSections[sec.key].length > 0)
+    .filter((sec) => attrSections[sec.key]!.length > 0)
     .map((sec) => {
-      const sectionAttrs = attrSections[sec.key];
+      const sectionAttrs = attrSections[sec.key]!;
       const hasAnySet = sectionAttrs.some(
         (a: { name: string; entry: HtmlMetaEntry }) => attrs[a.name] !== undefined,
       );

package/src/panels/quick-search.ts

@@ -82,7 +82,7 @@ function onKeydown(e: KeyboardEvent) {
     case "Enter": {
       e.preventDefault();
       if (items[_selectedIndex]) {
-        selectItem(items[_selectedIndex]);
+        selectItem(items[_selectedIndex]!);
       }
       break;
     }
@@ -101,7 +101,7 @@ function selectItem(item: { path: string; name?: string }) {
   closeQuickSearch();
   const { path } = item;
   trackRecentFile({ name: path.split("/").pop() || "", path });
-  openFileInTab(path);
+  void openFileInTab(path);
 }
 
 function fileIcon(name: string) {

package/src/panels/right-panel.ts

@@ -89,7 +89,6 @@ export function unmount() {
   _eventsContainer = null;
   _styleContainer = null;
   _assistantContainer = null;
-  _lastTab = null;
 }
 
 /**
@@ -104,7 +103,6 @@ let _propsContainer: HTMLElement | null = null;
 let _eventsContainer: HTMLElement | null = null;
 let _styleContainer: HTMLElement | null = null;
 let _assistantContainer: HTMLElement | null = null;
-let _lastTab: string | null = null;
 
 function _ensureContainers() {
   if (_propsContainer) {
@@ -183,9 +181,9 @@ function _doRender() {
     // Show/hide containers
     for (let i = 0; i < containers.length; i++) {
       if (tabKeys[i] === tab) {
-        containers[i].style.display = tabKeys[i] === "assistant" ? "flex" : "";
+        containers[i]!.style.display = tabKeys[i] === "assistant" ? "flex" : "";
       } else {
-        containers[i].style.display = "none";
+        containers[i]!.style.display = "none";
       }
     }
 
@@ -221,8 +219,6 @@ function _doRender() {
     } else if (tab === "assistant") {
       litRender(renderAiPanelTemplate(), _assistantContainer!);
     }
-
-    _lastTab = tab;
   } catch (error) {
     console.error("right-panel render error:", error);
   }

package/src/panels/shared.ts

@@ -82,6 +82,9 @@ export function defaultDef(tag: string): JxMutableNode {
     def.attributes = { alt: "Image" };
   } else if (tag === "iframe") {
     def.attributes = { src: "" };
+  } else if (tag === "slot") {
+    // Slot children are the fallback content shown when no slotted content is provided.
+    def.children = [{ tagName: "p", textContent: "Slot content" }];
   } else if (tag === "select") {
     def.children = [{ tagName: "option", textContent: "Option 1" }];
   } else if (tag === "ul" || tag === "ol") {