@jxsuite/studio 0.28.4 → 0.29.0

package/src/types.ts

@@ -35,11 +35,18 @@ export interface GitLogEntry {
   date: string;
 }
 
+export interface ComponentSlotMeta {
+  name: string;
+  description?: string;
+  fallback?: (JxMutableNode | string)[];
+}
+
 export interface ComponentMeta {
   tagName: string;
   $id?: string | null;
   path: string;
   props?: { name: string; type?: string; default?: JsonValue; [k: string]: unknown }[];
+  slots?: ComponentSlotMeta[];
   hasElements?: boolean;
 }
 
@@ -132,6 +139,18 @@ export interface StudioPlatform {
   aiStreamUrl: (id: string) => string | Promise<string>;
   aiStopSession: (id: string) => Promise<void>;
   aiDeleteSession: (id: string) => Promise<void>;
+  // ─── Multi-window (desktop only; undefined on dev-server) ───────────────────
+  /** Open a project in a new window, focusing an existing window if it is already open. */
+  openProjectInNewWindow?: (root: string) => Promise<void>;
+  /** Open a fresh welcome window. */
+  newWindow?: () => Promise<void>;
+  /**
+   * Point THIS window's backend at a project and return its config. If the project is already open
+   * in another window, that window is focused and `deduped` is true (no project is loaded here).
+   */
+  setWindowProject?: (root: string) => Promise<{ deduped: boolean; config: ProjectConfig | null }>;
+  /** The project root this window's backend is currently bound to. */
+  getProjectRoot?: () => Promise<{ root: string | null }>;
 }
 
 // ─── Studio Types ───────────────────────────────────────────────────────────
@@ -146,6 +165,28 @@ export interface CanvasPanel {
   scrollContainer: HTMLElement;
   dropLine: HTMLElement;
   _width: number | null;
+  /** True when the panel's DOM reflects the current document via a successful live render. */
+  ready: boolean;
+  /** Breakpoints active for this panel's width (persisted for surgical patch re-application). */
+  activeBreakpoints: Set<string> | null;
+  /** Render context captured from the last successful live render (null until then). */
+  liveCtx: PanelLiveCtx | null;
+  /**
+   * Effect scope owning the reactive effects created while rendering this panel's content
+   * (including child scopes from surgical subtree renders). Stopped when panels are rebuilt.
+   */
+  renderScope: { stop: () => void; run: <T>(fn: () => T) => T | undefined } | null;
+}
+
+/** Per-panel context persisted by a successful live render so patches can re-render subtrees. */
+export interface PanelLiveCtx {
+  scope: Record<string, unknown>;
+  canvasMode: string;
+  layoutWrapped: boolean;
+  pageContentPrefix: (string | number)[] | null;
+  pageContentOffset: number;
+  arrayPaths: Set<string>;
+  pathMapper: (created: Node, path: (string | number)[], def: unknown) => void;
 }
 
 export interface DocumentStackEntry {

package/src/ui/color-selector.ts

@@ -58,7 +58,7 @@ function resolveColorForDisplay(val: string | number | undefined) {
   const m = s.match(/^var\((--[^)]+)\)$/);
   if (m) {
     const style = getEffectiveStyle(activeTab.value?.doc.document?.style);
-    const resolved = style?.[m[1]];
+    const resolved = style?.[m[1]!];
     if (typeof resolved === "string") {
       return resolved;
     }
@@ -108,7 +108,7 @@ function matchesColorVar(
 // ─── JxColorPopover LitElement ──────────────────────────────────────────────
 
 export class JxColorPopover extends LitElement {
-  static properties = {
+  static override properties = {
     color: { type: String },
     colorVars: { attribute: false },
     displayColor: { attribute: false, type: String },
@@ -126,12 +126,12 @@ export class JxColorPopover extends LitElement {
   }
 
   /** No shadow DOM — render directly into light DOM for Spectrum theming */
-  createRenderRoot() {
+  override createRenderRoot() {
     return this;
   }
 
   /** @param {Map<string, unknown>} changed */
-  willUpdate(changed: Map<string, unknown>) {
+  override willUpdate(changed: Map<string, unknown>) {
     if (changed.has("color")) {
       const raw = resolveColorForDisplay(this.color);
       if (!raw || raw === "transparent") {
@@ -175,7 +175,7 @@ export class JxColorPopover extends LitElement {
     this.dispatchEvent(new CustomEvent("color-change", { bubbles: true, detail: varRef }));
   }
 
-  render() {
+  override render() {
     return html`
       <div class="color-popover-inner">
         <sp-color-area
@@ -258,7 +258,7 @@ export function renderColorSelector(
             <jx-color-popover
               .color=${value || ""}
               .colorVars=${colorVars}
-              @color-change=${(e: CustomEvent) => onChange(e.detail)}
+              @color-change=${(e: CustomEvent) => onChange(e.detail as string)}
             ></jx-color-popover>
           </sp-popover>
         </sp-overlay>
@@ -314,7 +314,7 @@ export function renderColorSelector(
           <jx-color-popover
             .color=${value || ""}
             .colorVars=${colorVars}
-            @color-change=${(e: CustomEvent) => onChange(e.detail)}
+            @color-change=${(e: CustomEvent) => onChange(e.detail as string)}
           ></jx-color-popover>
         </sp-popover>
       </sp-overlay>

package/src/ui/icons.ts

@@ -3,36 +3,6 @@
 // Uses Spectrum workflow icons where available; custom SVGs for flex-specific concepts.
 
 import { html } from "lit";
-import type { TemplateResult } from "lit";
-
-// Helper for custom filled-rect icons (alignment/justify diagrams) where no Spectrum match exists
-const _R = (d: TemplateResult) =>
-  html`<svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="16"
-    height="16"
-    viewBox="0 0 24 24"
-    fill="currentColor"
-    stroke="none"
-  >
-    ${d}
-  </svg>`;
-
-// Helper for custom stroke icons
-const _S = (d: TemplateResult) =>
-  html`<svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="16"
-    height="16"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="2"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  >
-    ${d}
-  </svg>`;
 
 export const icons = {
   // ─── Arrows — flexDirection ───

package/src/ui/media-picker.ts

@@ -290,7 +290,7 @@ function showMediaPickerPopover(anchorEl: HTMLElement, onCommit: (val: string) =
  */
 export function renderMediaPicker(prop: string, value: string, onCommit: (val: string) => void) {
   // Kick off async load (won't block render)
-  loadMediaCache();
+  void loadMediaCache();
 
   const currentValue = value || "";
   const isImage = IMAGE_EXTENSIONS.has(
@@ -318,7 +318,7 @@ export function renderMediaPicker(prop: string, value: string, onCommit: (val: s
               quiet
               title="Browse media"
               @click=${(e: MouseEvent) => {
-                loadMediaCache();
+                void loadMediaCache();
                 showMediaPickerPopover(e.currentTarget as HTMLElement, onCommit);
               }}
             >

package/src/ui/panel-resize.ts

@@ -19,7 +19,12 @@ const root = document.documentElement;
 // ─── Restore saved widths & collapse state ──────────────────────────────────
 
 try {
-  const saved = JSON.parse(localStorage.getItem(STORAGE_KEY) || "{}");
+  const saved = JSON.parse(localStorage.getItem(STORAGE_KEY) || "{}") as {
+    left?: number;
+    right?: number;
+    leftCollapsed?: boolean;
+    rightCollapsed?: boolean;
+  };
   if (saved.left) {
     root.style.setProperty("--panel-w-left", `${saved.left}px`);
   }

package/src/ui/unit-selector.ts

@@ -42,7 +42,7 @@ export function renderUnitSelector(
   if (isKeyword) {
     displayValue = strVal;
   } else if (match) {
-    [, displayValue] = match;
+    displayValue = match[1]!;
   } else if (strVal !== "") {
     const num = Number.parseFloat(strVal);
     displayValue = Number.isNaN(num) ? strVal : String(num);
@@ -52,7 +52,7 @@ export function renderUnitSelector(
 
   // Parse placeholder so inherited values display as "500" not "500px"
   const placeholderMatch = placeholder.match(UNIT_RE);
-  const numericPlaceholder = placeholderMatch ? placeholderMatch[1] : placeholder || "0";
+  const numericPlaceholder = placeholderMatch ? placeholderMatch[1]! : placeholder || "0";
 
   const isExpression = isKeyword || (displayValue !== "" && !isNumericVal(displayValue));
   const hasUnits = units.length > 0 || keywords.length > 0;

package/src/ui/value-selector.ts

@@ -22,7 +22,7 @@ import { live } from "lit/directives/live.js";
 type ComboOption = { value: string; label: string; style?: string } | { divider: true };
 
 export class JxValueSelector extends LitElement {
-  static properties = {
+  static override properties = {
     options: { attribute: false },
     placeholder: { type: String },
     size: { type: String },
@@ -45,7 +45,7 @@ export class JxValueSelector extends LitElement {
   }
 
   /** No shadow DOM — render directly into light DOM */
-  createRenderRoot() {
+  override createRenderRoot() {
     return this;
   }
 
@@ -111,7 +111,7 @@ export class JxValueSelector extends LitElement {
     }
   }
 
-  render() {
+  override render() {
     if (this._isPicker) {
       return html`
         <sp-picker

package/src/utils/canvas-media.ts

@@ -25,15 +25,15 @@ export function parseMediaEntries(mediaDef?: Record<string, string> | null) {
   for (const [name, query] of Object.entries(mediaDef)) {
     if (name === "--") {
       const wm = String(query).match(/^(\d+)\s*px$/);
-      baseWidth = wm ? Number.parseFloat(wm[1]) : 320;
+      baseWidth = wm ? Number.parseFloat(wm[1]!) : 320;
       continue;
     }
     const minMatch = query.match(/min-width:\s*([\d.]+)px/);
     const maxMatch = query.match(/max-width:\s*([\d.]+)px/);
     if (minMatch) {
-      sizes.push({ name, query, type: "min", width: Number.parseFloat(minMatch[1]) });
+      sizes.push({ name, query, type: "min", width: Number.parseFloat(minMatch[1]!) });
     } else if (maxMatch) {
-      sizes.push({ name, query, type: "max", width: Number.parseFloat(maxMatch[1]) });
+      sizes.push({ name, query, type: "max", width: Number.parseFloat(maxMatch[1]!) });
     } else {
       features.push({ name, query });
     }
@@ -164,10 +164,10 @@ export function collectMediaOverrides(
           continue;
         }
         const [, uid] = jxMatch;
-        if (!overrides.has(uid)) {
-          overrides.set(uid, new Map());
+        if (!overrides.has(uid!)) {
+          overrides.set(uid!, new Map());
         }
-        const props = overrides.get(uid) as Map<string, string>;
+        const props = overrides.get(uid!) as Map<string, string>;
         for (const prop of mediaRule.style) {
           props.set(prop, mediaRule.style.getPropertyValue(prop));
         }

package/src/utils/edit-display.ts

@@ -11,6 +11,94 @@ const mediaTags = new Set(["img", "video", "source", "iframe", "audio"]);
 const TRANSPARENT_PX =
   "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
 
+const textTags = new Set([
+  "p",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "blockquote",
+  "li",
+  "dt",
+  "dd",
+  "th",
+  "td",
+  "span",
+  "strong",
+  "em",
+  "small",
+  "mark",
+  "code",
+  "abbr",
+  "q",
+  "sub",
+  "sup",
+  "time",
+  "a",
+  "button",
+  "label",
+  "legend",
+  "caption",
+  "summary",
+  "pre",
+  "option",
+]);
+
+const containerTags = new Set([
+  "div",
+  "section",
+  "article",
+  "aside",
+  "header",
+  "footer",
+  "main",
+  "nav",
+  "figure",
+  "figcaption",
+  "details",
+  "fieldset",
+  "form",
+  "ul",
+  "ol",
+  "dl",
+  "table",
+]);
+
+/** All placeholder classes prepareForEditMode may add to an empty element. */
+export const EMPTY_PLACEHOLDER_CLASSES = [
+  "empty-text-placeholder",
+  "empty-container-placeholder",
+] as const;
+
+/**
+ * The empty-placeholder class prepareForEditMode would add for this node, or null. Used by the
+ * canvas patcher to keep placeholder classes in sync when patching text without a full render.
+ *
+ * @param {JxMutableNode} node
+ */
+export function computeEmptyPlaceholderClass(node: JxMutableNode): string | null {
+  if (!node.tagName || node.textContent || node.innerHTML) {
+    return null;
+  }
+  // Layout-originated nodes ($__layout, set by markLayoutNodes) are read-only in page context;
+  // Edit affordances like "Click here to add text" don't apply to them.
+  if (node.$__layout) {
+    return null;
+  }
+  if (Array.isArray(node.children) && node.children.length > 0) {
+    return null;
+  }
+  if (textTags.has(node.tagName)) {
+    return "empty-text-placeholder";
+  }
+  if (containerTags.has(node.tagName)) {
+    return "empty-container-placeholder";
+  }
+  return null;
+}
+
 /**
  * Convert a template string to a displayable expression for edit mode. Replaces ${expr} with ❮ expr
  * ❯ so the runtime renders it as literal text.
@@ -37,6 +125,27 @@ export function restoreTemplateExpressions(el: HTMLElement) {
   }
 }
 
+/**
+ * Build the edit-mode visual for a mapped array: a `<div class="repeater-perimeter">` wrapping a
+ * single prepared instance of the map template. Always one element (an empty perimeter when the
+ * template is missing) so the array keeps a 1:1 DOM node at its sibling index. The perimeter is an
+ * edit-only device — it is never compiled or rendered in preview.
+ *
+ * @param {JxMutableNode} arrayObj
+ * @returns {Record<string, unknown>}
+ */
+function arrayToPerimeter(arrayObj: JxMutableNode): Record<string, unknown> {
+  const template = arrayObj.map;
+  return {
+    children:
+      template && typeof template === "object"
+        ? [prepareForEditMode(template as JxMutableNode)]
+        : [],
+    className: "repeater-perimeter",
+    tagName: "div",
+  };
+}
+
 /**
  * Prepare a document for edit-mode rendering. Replaces template strings with readable literal text,
  * $prototype:Array with placeholders, and $ref bindings with display labels. Preserves state so the
@@ -51,7 +160,13 @@ export function prepareForEditMode(node: JxMutableNode): JxMutableNode {
   }
   if (Array.isArray(node)) {
     // Arrays of nodes round-trip element-wise; the array itself is not a node.
-    return node.map((n) => prepareForEditMode(n)) as unknown as JxMutableNode;
+    return (node as JxMutableNode[]).map((n) => prepareForEditMode(n)) as unknown as JxMutableNode;
+  }
+
+  // A mapped-array node itself → its edit-mode perimeter (e.g. when the patcher re-renders an
+  // Array node directly). Members inside a children array funnel here via the children branch.
+  if ((node as Record<string, unknown>).$prototype === "Array") {
+    return arrayToPerimeter(node) as unknown as JxMutableNode;
   }
 
   const /** @type {Record<string, unknown>} */ obj = node as Record<string, unknown>;
@@ -95,25 +210,16 @@ export function prepareForEditMode(node: JxMutableNode): JxMutableNode {
       out[k] = propsOut;
     } else if (k === "children") {
       if (Array.isArray(v)) {
-        out.children = v.map((c) => prepareForEditMode(c));
+        // Each member recurses; array pseudo-elements become a single repeater-perimeter element
+        // (via the top-level array case) so they stay a 1:1 DOM node among their siblings.
+        out.children = v.map((c) => prepareForEditMode(c as JxMutableNode));
       } else if (
         v &&
         typeof v === "object" &&
         (v as Record<string, unknown>).$prototype === "Array"
       ) {
-        // Wrap the map template in a visual repeater perimeter
-        const vObj = v as Record<string, unknown>;
-        const template = vObj.map;
-        out.children =
-          template && typeof template === "object"
-            ? [
-                {
-                  children: [prepareForEditMode(template as JxMutableNode)],
-                  className: "repeater-perimeter",
-                  tagName: "div",
-                },
-              ]
-            : [];
+        // Legacy whole-children repeater → a single perimeter as the sole child.
+        out.children = [prepareForEditMode(v as JxMutableNode)];
       } else {
         out.children = prepareForEditMode(v as JxMutableNode);
       }
@@ -121,7 +227,7 @@ export function prepareForEditMode(node: JxMutableNode): JxMutableNode {
       // Replace $switch cases with a placeholder showing the first case or a label
       const caseKeys = Object.keys(v);
       if (caseKeys.length > 0) {
-        const firstCase = (v as Record<string, unknown>)[caseKeys[0]];
+        const firstCase = (v as Record<string, unknown>)[caseKeys[0]!];
         out.children =
           firstCase && typeof firstCase === "object" && !(firstCase as Record<string, unknown>).$ref
             ? [prepareForEditMode(firstCase as JxMutableNode)]
@@ -216,73 +322,9 @@ export function prepareForEditMode(node: JxMutableNode): JxMutableNode {
   }
 
   // Mark empty elements with placeholder classes for design-mode visibility
-  if (out.tagName && !out.textContent && !out.innerHTML) {
-    const hasChildren = Array.isArray(out.children) && out.children.length > 0;
-    if (!hasChildren) {
-      const tag = out.tagName as string;
-      const textTags = new Set([
-        "p",
-        "h1",
-        "h2",
-        "h3",
-        "h4",
-        "h5",
-        "h6",
-        "blockquote",
-        "li",
-        "dt",
-        "dd",
-        "th",
-        "td",
-        "span",
-        "strong",
-        "em",
-        "small",
-        "mark",
-        "code",
-        "abbr",
-        "q",
-        "sub",
-        "sup",
-        "time",
-        "a",
-        "button",
-        "label",
-        "legend",
-        "caption",
-        "summary",
-        "pre",
-        "option",
-      ]);
-      const containerTags = new Set([
-        "div",
-        "section",
-        "article",
-        "aside",
-        "header",
-        "footer",
-        "main",
-        "nav",
-        "figure",
-        "figcaption",
-        "details",
-        "fieldset",
-        "form",
-        "ul",
-        "ol",
-        "dl",
-        "table",
-      ]);
-      if (textTags.has(tag)) {
-        out.className = out.className
-          ? `${out.className} empty-text-placeholder`
-          : "empty-text-placeholder";
-      } else if (containerTags.has(tag)) {
-        out.className = out.className
-          ? `${out.className} empty-container-placeholder`
-          : "empty-container-placeholder";
-      }
-    }
+  const placeholderClass = computeEmptyPlaceholderClass(out as JxMutableNode);
+  if (placeholderClass) {
+    out.className = out.className ? `${out.className} ${placeholderClass}` : placeholderClass;
   }
 
   // Media elements with missing/dynamic src get a placeholder class

package/src/utils/google-fonts.ts

@@ -48,7 +48,7 @@ export function extractFontFamily(href: string) {
   if (!match) {
     return "";
   }
-  return decodeURIComponent(match[1].replaceAll("+", " "));
+  return decodeURIComponent(match[1]!.replaceAll("+", " "));
 }
 
 /**

package/src/utils/inherited-style.ts

@@ -61,10 +61,11 @@ export function computeInheritedStyle(
       if (name === activeTab) {
         break;
       }
-      const selBlock = ((style[`@${name}`] || {}) as Record<string, unknown>)[activeSelector] || {};
+      const selBlock = (((style[`@${name}`] || {}) as Record<string, unknown>)[activeSelector] ||
+        {}) as JxStyle;
       for (const [p, v] of Object.entries(selBlock)) {
         if (typeof v !== "object") {
-          inherited[p] = v ?? "";
+          inherited[p] = (v as string | number) ?? "";
         }
       }
     }

package/src/utils/studio-utils.ts

@@ -30,7 +30,7 @@ export function camelToLabel(prop: string) {
 
 export function toCamelCase(str: string): string {
   return str
-    .replaceAll(/[^a-zA-Z0-9]+(.)?/g, (_, c) => (c ? c.toUpperCase() : ""))
+    .replaceAll(/[^a-zA-Z0-9]+(.)?/g, (_, c: string | undefined) => (c ? c.toUpperCase() : ""))
     .replace(/^[A-Z]/, (c) => c.toLowerCase());
 }
 

package/src/view.ts

@@ -145,7 +145,10 @@ export function applyPanelCollapse() {
   app.classList.toggle("left-collapsed", view.leftPanelCollapsed);
   app.classList.toggle("right-collapsed", view.rightPanelCollapsed);
   try {
-    const saved = JSON.parse(localStorage.getItem(COLLAPSE_STORAGE_KEY) || "{}");
+    const saved = JSON.parse(localStorage.getItem(COLLAPSE_STORAGE_KEY) || "{}") as Record<
+      string,
+      unknown
+    >;
     saved.leftCollapsed = view.leftPanelCollapsed;
     saved.rightCollapsed = view.rightPanelCollapsed;
     localStorage.setItem(COLLAPSE_STORAGE_KEY, JSON.stringify(saved));