@jxsuite/studio 0.19.0 → 0.20.0

package/src/ui/widgets.js

@@ -23,19 +23,19 @@ import { renderMediaPicker } from "./media-picker.js";
  * Render a plain text input widget.
  *
  * @param {string} prop
- * @param {any} value
+ * @param {string | number | undefined} value
  * @param {(val: string) => void} onChange
  * @param {string} [placeholder]
- * @returns {any}
+ * @returns {import("lit-html").TemplateResult}
  */
 export function renderTextInput(prop, value, onChange, placeholder = "") {
   return html`
     <sp-textfield
       size="s"
       placeholder=${placeholder}
-      .value=${live(value || "")}
-      @input=${debouncedStyleCommit(`text:${prop}`, 400, (/** @type {any} */ e) =>
-        onChange(e.target.value),
+      .value=${live(String(value ?? ""))}
+      @input=${debouncedStyleCommit(`text:${prop}`, 400, (/** @type {Event} */ e) =>
+        onChange(/** @type {HTMLInputElement} */ (e.target).value),
       )}
     ></sp-textfield>
   `;
@@ -44,24 +44,27 @@ export function renderTextInput(prop, value, onChange, placeholder = "") {
 /**
  * Render a number input widget (sp-number-field).
  *
- * @param {any} entry
+ * @param {Record<string, unknown>} entry
  * @param {string} prop
- * @param {any} value
- * @param {(val: any) => void} onChange
- * @returns {any}
+ * @param {string | number | undefined} value
+ * @param {(val: string | number) => void} onChange
+ * @param {string} [placeholder]
+ * @returns {import("lit-html").TemplateResult}
  */
 export function renderNumberInput(entry, prop, value, onChange, placeholder = "") {
+  const minimum = /** @type {number | undefined} */ (entry.minimum);
+  const maximum = /** @type {number | undefined} */ (entry.maximum);
   return html`
     <sp-number-field
       size="s"
       hide-stepper
       .value=${live(value !== undefined && value !== "" ? Number(value) : undefined)}
       placeholder=${placeholder}
-      min=${ifDefined(entry.minimum)}
-      max=${ifDefined(entry.maximum)}
-      step=${ifDefined(entry.maximum !== undefined && entry.maximum <= 1 ? 0.1 : undefined)}
-      @change=${debouncedStyleCommit(`num:${prop}`, 400, (/** @type {any} */ e) => {
-        const v = e.target.value;
+      min=${ifDefined(minimum)}
+      max=${ifDefined(maximum)}
+      step=${ifDefined(maximum !== undefined && maximum <= 1 ? 0.1 : undefined)}
+      @change=${debouncedStyleCommit(`num:${prop}`, 400, (/** @type {Event} */ e) => {
+        const v = /** @type {HTMLInputElement & { value: number | undefined }} */ (e.target).value;
         if (v === undefined || isNaN(v)) onChange("");
         else onChange(Number(v));
       })}
@@ -73,12 +76,12 @@ export function renderNumberInput(entry, prop, value, onChange, placeholder = ""
  * Dispatch to the appropriate widget based on inferred type.
  *
  * @param {string} type — one of: button-group, color, number-unit, number, select, combobox, text
- * @param {any} entry — css-meta or schema entry
+ * @param {Record<string, unknown>} entry — css-meta or schema entry
  * @param {string} prop — property key
- * @param {any} value — current value
- * @param {(val: any) => void} onCommit — commit callback
+ * @param {string | number | undefined} value — current value
+ * @param {(val: string | number) => void} onCommit — commit callback
  * @param {{ placeholder?: string; renderSelect?: Function; renderCombobox?: Function }} [opts]
- * @returns {any}
+ * @returns {import("lit-html").TemplateResult}
  */
 export function widgetForType(type, entry, prop, value, onCommit, opts = {}) {
   switch (type) {
@@ -91,7 +94,7 @@ export function widgetForType(type, entry, prop, value, onCommit, opts = {}) {
     case "number":
       return renderNumberInput(entry, prop, value, onCommit, opts.placeholder);
     case "media":
-      return renderMediaPicker(prop, value, onCommit);
+      return renderMediaPicker(prop, String(value ?? ""), onCommit);
     case "select":
       // Allow caller to override select rendering (e.g. for typography preview)
       if (opts.renderSelect) return opts.renderSelect(entry, prop, value, onCommit);

package/src/utils/canvas-media.js

@@ -53,7 +53,7 @@ export function activeBreakpointsForWidth(sizeBreakpoints, canvasWidth) {
  * first, then matching media overrides in source order.
  *
  * @param {HTMLElement} el
- * @param {Record<string, any>} styleDef
+ * @param {JxStyle | null | undefined} styleDef
  * @param {Set<string>} activeBreakpoints
  * @param {Record<string, boolean>} featureToggles
  */
@@ -63,7 +63,7 @@ export function applyCanvasStyle(el, styleDef, activeBreakpoints, featureToggles
     if (typeof val === "string" || typeof val === "number") {
       try {
         if (prop.startsWith("--")) el.style.setProperty(prop, String(val));
-        else /** @type {any} */ (el.style)[prop] = val;
+        else /** @type {Record<string, unknown>} */ (/** @type {unknown} */ (el.style))[prop] = val;
       } catch {}
     }
   }
@@ -72,11 +72,12 @@ export function applyCanvasStyle(el, styleDef, activeBreakpoints, featureToggles
     const mediaName = key.slice(1);
     if (mediaName === "--") continue;
     if (activeBreakpoints.has(mediaName) || featureToggles[mediaName]) {
-      for (const [prop, v] of Object.entries(/** @type {any} */ (val))) {
+      for (const [prop, v] of Object.entries(/** @type {Record<string, unknown>} */ (val))) {
         if (typeof v === "string" || typeof v === "number") {
           try {
             if (prop.startsWith("--")) el.style.setProperty(prop, String(v));
-            else /** @type {any} */ (el.style)[prop] = v;
+            else
+              /** @type {Record<string, unknown>} */ (/** @type {unknown} */ (el.style))[prop] = v;
           } catch {}
         }
       }

package/src/utils/edit-display.js

@@ -8,7 +8,7 @@
  * Convert a template string to a displayable expression for edit mode. Replaces ${expr} with ❮ expr
  * ❯ so the runtime renders it as literal text.
  *
- * @param {any} str
+ * @param {string} str
  */
 export function templateToEditDisplay(str) {
   return str.replace(/\$\{([^}]+)\}/g, "\u276A $1 \u276B");
@@ -18,14 +18,14 @@ export function templateToEditDisplay(str) {
  * Reverse templateToEditDisplay: walk all text nodes in `el` and replace ❪ expr ❫ back to ${expr}
  * so the user edits raw template syntax.
  *
- * @param {any} el
+ * @param {HTMLElement} el
  */
 export function restoreTemplateExpressions(el) {
   const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
   while (walker.nextNode()) {
-    const node = /** @type {any} */ (walker.currentNode);
-    if (node.textContent.includes("\u276A")) {
-      node.textContent = node.textContent.replace(/\u276A\s*(.*?)\s*\u276B/g, "${$1}");
+    const node = /** @type {Text} */ (walker.currentNode);
+    if (node.data.includes("\u276A")) {
+      node.data = node.data.replace(/\u276A\s*(.*?)\s*\u276B/g, "${$1}");
     }
   }
 }
@@ -35,24 +35,31 @@ export function restoreTemplateExpressions(el) {
  * $prototype:Array with placeholders, and $ref bindings with display labels. Preserves state so the
  * runtime can still initialise scope.
  *
- * @param {any} node
- * @returns {any}
+ * @param {JxMutableNode} node
+ * @returns {JxMutableNode}
  */
 export function prepareForEditMode(node) {
   if (!node || typeof node !== "object") return node;
   if (Array.isArray(node)) return node.map(prepareForEditMode);
 
-  /** @type {Record<string, any>} */
+  const /** @type {Record<string, unknown>} */ obj = /** @type {Record<string, unknown>} */ (node);
+
+  /** @type {Record<string, unknown>} */
   const out = {};
-  for (const [k, v] of Object.entries(node)) {
+  for (const [k, v] of Object.entries(obj)) {
     if (k === "state" || k === "$media" || k === "$props" || k === "$elements") {
       out[k] = v; // preserve as-is for runtime resolution
     } else if (k === "children") {
       if (Array.isArray(v)) {
         out.children = v.map(prepareForEditMode);
-      } else if (v && typeof v === "object" && v.$prototype === "Array") {
+      } else if (
+        v &&
+        typeof v === "object" &&
+        /** @type {Record<string, unknown>} */ (v).$prototype === "Array"
+      ) {
         // Wrap the map template in a visual repeater perimeter
-        const template = v.map;
+        const vObj = /** @type {Record<string, unknown>} */ (v);
+        const template = vObj.map;
         if (template && typeof template === "object") {
           out.children = [
             {
@@ -70,14 +77,18 @@ export function prepareForEditMode(node) {
           out.children = [];
         }
       } else {
-        out.children = prepareForEditMode(v);
+        out.children = prepareForEditMode(/** @type {JxMutableNode} */ (v));
       }
-    } else if (k === "cases" && node.$switch && v && typeof v === "object") {
+    } else if (k === "cases" && obj.$switch && v && typeof v === "object") {
       // 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[caseKeys[0]];
-        if (firstCase && typeof firstCase === "object" && !firstCase.$ref) {
+        const firstCase = /** @type {Record<string, unknown>} */ (v)[caseKeys[0]];
+        if (
+          firstCase &&
+          typeof firstCase === "object" &&
+          !(/** @type {Record<string, unknown>} */ (firstCase).$ref)
+        ) {
           out.children = [prepareForEditMode(firstCase)];
         } else {
           out.children = [
@@ -101,7 +112,7 @@ export function prepareForEditMode(node) {
     } else if (k === "style") {
       // Replace template strings in style values with empty strings
       if (v && typeof v === "object") {
-        /** @type {Record<string, any>} */
+        /** @type {Record<string, unknown>} */
         const s = {};
         for (const [sk, sv] of Object.entries(v)) {
           s[sk] = typeof sv === "string" && sv.includes("${") ? "" : sv;
@@ -113,13 +124,13 @@ export function prepareForEditMode(node) {
     } else if (typeof v === "string" && v.includes("${")) {
       // Template string in a display property → show raw expression
       out[k] = templateToEditDisplay(v);
-    } else if (v && typeof v === "object" && v.$ref) {
+    } else if (v && typeof v === "object" && /** @type {Record<string, unknown>} */ (v).$ref) {
       // $ref binding → show ref path as literal text
-      const ref = v.$ref;
+      const ref = /** @type {string} */ (/** @type {Record<string, unknown>} */ (v).$ref);
       const label = ref.startsWith("#/state/") ? ref.slice(8) : ref;
       out[k] = `{${label}}`;
     } else {
-      out[k] = prepareForEditMode(v);
+      out[k] = prepareForEditMode(/** @type {JxMutableNode} */ (v));
     }
   }
 
@@ -127,7 +138,7 @@ export function prepareForEditMode(node) {
   if (out.tagName && !out.textContent && !out.innerHTML) {
     const hasChildren = Array.isArray(out.children) && out.children.length > 0;
     if (!hasChildren) {
-      const tag = out.tagName;
+      const tag = /** @type {string} */ (out.tagName);
       const textTags = new Set([
         "p",
         "h1",

package/src/utils/google-fonts.js

@@ -9,7 +9,7 @@ export const GFONTS_PRECONNECT_ORIGINS = [
 /**
  * Check if a `$head` entry is a Google Fonts stylesheet link.
  *
- * @param {any} entry
+ * @param {JxHeadEntry} entry
  * @returns {boolean}
  */
 export function isGoogleFontEntry(entry) {
@@ -17,21 +17,21 @@ export function isGoogleFontEntry(entry) {
     entry?.tagName === "link" &&
     entry?.attributes?.rel === "stylesheet" &&
     typeof entry?.attributes?.href === "string" &&
-    entry.attributes.href.startsWith(GFONTS_CSS_PREFIX)
+    /** @type {string} */ (entry.attributes.href).startsWith(GFONTS_CSS_PREFIX)
   );
 }
 
 /**
  * Check if a `$head` entry is a Google Fonts preconnect link.
  *
- * @param {any} entry
+ * @param {JxHeadEntry} entry
  * @returns {boolean}
  */
 export function isGoogleFontPreconnect(entry) {
   return (
     entry?.tagName === "link" &&
     entry?.attributes?.rel === "preconnect" &&
-    GFONTS_PRECONNECT_ORIGINS.includes(entry?.attributes?.href)
+    GFONTS_PRECONNECT_ORIGINS.includes(/** @type {string} */ (entry?.attributes?.href))
   );
 }
 
@@ -60,18 +60,18 @@ export function buildGoogleFontUrl(family) {
 /**
  * Ensure preconnect links exist in a `$head` array for Google Fonts.
  *
- * @param {any[]} head
+ * @param {JxHeadEntry[]} head
  */
 export function ensureGoogleFontPreconnects(head) {
   for (const origin of GFONTS_PRECONNECT_ORIGINS) {
     const exists = head.some(
-      (/** @type {any} */ e) =>
+      (/** @type {JxHeadEntry} */ e) =>
         e?.tagName === "link" &&
         e?.attributes?.rel === "preconnect" &&
         e?.attributes?.href === origin,
     );
     if (!exists) {
-      /** @type {Record<string, any>} */
+      /** @type {Record<string, string | boolean>} */
       const attrs = { rel: "preconnect", href: origin };
       if (origin === "https://fonts.gstatic.com") attrs.crossorigin = "";
       head.push({ tagName: "link", attributes: attrs });
@@ -82,13 +82,13 @@ export function ensureGoogleFontPreconnects(head) {
 /**
  * Remove preconnect links if no Google Font stylesheets remain.
  *
- * @param {any[]} head
- * @returns {any[]}
+ * @param {JxHeadEntry[]} head
+ * @returns {JxHeadEntry[]}
  */
 export function cleanupGoogleFontPreconnects(head) {
-  const hasFont = head.some((/** @type {any} */ e) => isGoogleFontEntry(e));
+  const hasFont = head.some((/** @type {JxHeadEntry} */ e) => isGoogleFontEntry(e));
   if (!hasFont) {
-    return head.filter((/** @type {any} */ e) => !isGoogleFontPreconnect(e));
+    return head.filter((/** @type {JxHeadEntry} */ e) => !isGoogleFontPreconnect(e));
   }
   return head;
 }

package/src/utils/inherited-style.js

@@ -9,43 +9,44 @@
 /**
  * Compute the inherited style object for a given breakpoint tab.
  *
- * @param {Record<string, any>} style — full style object (flat props + @media blocks + selectors)
+ * @param {JxStyle} style — full style object (flat props + @media blocks + selectors)
  * @param {string[]} mediaNames — ordered breakpoint names (from parseMediaEntries, respects cascade
  *   direction)
  * @param {string | null} activeTab — current breakpoint tab name, or null for base
  * @param {string | null} activeSelector — current nested selector, or null
- * @returns {Record<string, any>} Inherited style map (prop → value)
+ * @returns {Record<string, string | number>} Inherited style map (prop → value)
  */
 export function computeInheritedStyle(style, mediaNames, activeTab, activeSelector = null) {
   if (activeTab === null || mediaNames.length === 0) return {};
 
-  /** @type {Record<string, any>} */
+  /** @type {Record<string, string | number>} */
   let inherited = {};
 
   if (!activeSelector) {
     // Start with base flat props
     for (const [p, v] of Object.entries(style)) {
-      if (typeof v !== "object") inherited[p] = v;
+      if (typeof v !== "object") inherited[p] = v ?? "";
     }
     // Layer each media block in order until current tab
     for (const name of mediaNames) {
       if (name === activeTab) break;
       const block = style[`@${name}`] || {};
       for (const [p, v] of Object.entries(block)) {
-        if (typeof v !== "object") inherited[p] = v;
+        if (typeof v !== "object") inherited[p] = v ?? "";
       }
     }
   } else {
     // Selector inheritance: base selector → each media's selector block in order
     const baseSel = style[activeSelector] || {};
     for (const [p, v] of Object.entries(baseSel)) {
-      if (typeof v !== "object") inherited[p] = v;
+      if (typeof v !== "object") inherited[p] = v ?? "";
     }
     for (const name of mediaNames) {
       if (name === activeTab) break;
-      const selBlock = (style[`@${name}`] || {})[activeSelector] || {};
+      const selBlock =
+        /** @type {Record<string, unknown>} */ (style[`@${name}`] || {})[activeSelector] || {};
       for (const [p, v] of Object.entries(selBlock)) {
-        if (typeof v !== "object") inherited[p] = v;
+        if (typeof v !== "object") inherited[p] = v ?? "";
       }
     }
   }

package/src/utils/studio-utils.js

@@ -45,7 +45,7 @@ export function kebabToLabel(val) {
 /**
  * Get display label from metadata entry or prop name
  *
- * @param {any} entry
+ * @param {{ $label?: string; [key: string]: unknown } | null | undefined} entry
  * @param {string} prop
  * @returns {string}
  */
@@ -56,7 +56,7 @@ export function propLabel(entry, prop) {
 /**
  * Label for HTML attributes — handles kebab-case (aria-label → "Aria Label")
  *
- * @param {any} entry
+ * @param {{ $label?: string; [key: string]: unknown } | null | undefined} entry
  * @param {string} attr
  * @returns {string}
  */
@@ -106,7 +106,7 @@ export function abbreviateValue(val) {
 /**
  * Determine input widget type from a css-meta entry
  *
- * @param {any} entry
+ * @param {Record<string, unknown>} entry
  * @returns {string}
  */
 export function inferInputType(entry) {
@@ -127,13 +127,13 @@ export function inferInputType(entry) {
  * extension matching against the content type's `source` glob.
  *
  * @param {string | null} documentPath — project-relative path (e.g. "blog/hello.md")
- * @param {any} projectConfig — parsed project.json
- * @returns {{ name: string; schema: any } | null}
+ * @param {ProjectConfig | null | undefined} projectConfig — parsed project.json
+ * @returns {{ name: string; schema: ContentTypeSchema } | null}
  */
 export function findContentTypeSchema(documentPath, projectConfig) {
   if (!documentPath || !projectConfig?.contentTypes) return null;
   for (const [name, def] of Object.entries(
-    /** @type {Record<string, any>} */ (projectConfig.contentTypes),
+    /** @type {Record<string, ContentTypeDef>} */ (projectConfig.contentTypes),
   )) {
     if (!def.source || !def.schema) continue;
     const src = def.source.replace(/^\.\//, "");
@@ -186,7 +186,7 @@ export function varDisplayName(varName, prefix) {
       .replace(new RegExp(`^${prefix.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}`), "")
       .replace(/^--/, "")
       .replace(/-/g, " ")
-      .replace(/\b\w/g, (/** @type {any} */ c) => c.toUpperCase()) || varName
+      .replace(/\b\w/g, (/** @type {string} */ c) => c.toUpperCase()) || varName
   );
 }
 

package/src/view.js

@@ -6,7 +6,61 @@
  * store.js) makes renderer dependencies explicit.
  */
 
-/** @type {any} */
+/**
+ * @typedef {{
+ *   panzoomWrap: HTMLElement | null;
+ *   renderGeneration: number;
+ *   centerObserver: ResizeObserver | null;
+ *   needsCenter: boolean;
+ *   panX: number;
+ *   panY: number;
+ *   prevCanvasMode: string | null;
+ *   monacoEditor:
+ *     | (import("monaco-editor").editor.IStandaloneCodeEditor & { _ignoreNextChange?: boolean })
+ *     | null;
+ *   functionEditor:
+ *     | (import("monaco-editor").editor.IStandaloneCodeEditor & {
+ *         _ignoreNextChange?: boolean;
+ *         _editingTarget?: string | null;
+ *       })
+ *     | null;
+ *   componentInlineEdit: {
+ *     el: HTMLElement;
+ *     path: (string | number)[];
+ *     originalText: string;
+ *     mediaName: string | null;
+ *     _outsideHandler?: ((e: MouseEvent) => void) | null;
+ *     [k: string]: unknown;
+ *   } | null;
+ *   inlineEditCleanup: (() => void) | null;
+ *   blockActionBarEl: HTMLElement | null;
+ *   selDragCleanup: (() => void) | null;
+ *   dndCleanups: (() => void)[];
+ *   canvasDndCleanups: (() => void)[];
+ *   canvasEventCleanups: (() => void)[];
+ *   forcedStyleTag: HTMLStyleElement | null;
+ *   forcedAttrEl: HTMLElement | null;
+ *   elementsCollapsed: Set<string>;
+ *   elementsFilter: string;
+ *   lastDragInput: { clientX: number; clientY: number; [k: string]: unknown } | null;
+ *   _currentDropTargetRow: HTMLElement | null;
+ *   layerDragSourceHeight: number;
+ *   savedRange: Range | null;
+ *   _completionRegistered: boolean;
+ *   stylebookElToTag: WeakMap<Element, string>;
+ *   showAddBreakpointForm: boolean;
+ *   addBreakpointPreview: string;
+ *   layoutSelection: unknown;
+ *   leftTab: string;
+ *   leftPanelCollapsed: boolean;
+ *   rightPanelCollapsed: boolean;
+ *   autosaveTimer: ReturnType<typeof setTimeout> | null;
+ *   _layersCollapsed: Set<string> | null;
+ *   [key: string]: unknown;
+ * }} ViewState
+ */
+
+/** @type {ViewState} */
 export const view = {
   // Canvas infrastructure
   panzoomWrap: null,
@@ -70,6 +124,9 @@ export const view = {
 
   // Autosave
   autosaveTimer: null,
+
+  // Layers panel collapsed state
+  _layersCollapsed: null,
 };
 
 const COLLAPSE_STORAGE_KEY = "jx-studio-panel-widths";

package/src/workspace/workspace.js

@@ -16,9 +16,9 @@ export const workspace = reactive({
   projectConfig: null,
   /** @type {ComponentEntry[]} */
   componentRegistry: [],
-  /** @type {import("../state.js").JxNode | null} */
+  /** @type {JxMutableNode | null} */
   clipboard: null,
-  /** @type {Record<string, any> | null} */
+  /** @type {JxStyle | null} */
   styleClipboard: null,
   fileTree: {
     /** @type {Map<string, FileEntry[]>} */
@@ -41,9 +41,11 @@ export const workspace = reactive({
 });
 
 /** @type {import("@vue/reactivity").ComputedRef<Tab>} */
-export const activeTab = /** @type {any} */ (
-  computed(() =>
-    workspace.activeTabId ? (workspace.tabs.get(workspace.activeTabId) ?? null) : null,
+export const activeTab = /** @type {import("@vue/reactivity").ComputedRef<Tab>} */ (
+  /** @type {unknown} */ (
+    computed(() =>
+      workspace.activeTabId ? (workspace.tabs.get(workspace.activeTabId) ?? null) : null,
+    )
   )
 );
 
@@ -54,9 +56,10 @@ export const activeTab = /** @type {any} */ (
  *   id: string;
  *   documentPath?: string | null;
  *   fileHandle?: FileSystemFileHandle | null;
- *   document: Record<string, any>;
+ *   document: Record<string, unknown>;
  *   frontmatter?: Record<string, unknown>;
  *   sourceFormat?: string | null;
+ *   capabilities?: { modes?: string[] };
  * }} opts
  * @returns {Tab}
  */
@@ -102,7 +105,7 @@ export function closeAllTabs() {
  * @param {{
  *   id: string;
  *   documentPath?: string | null;
- *   document: Record<string, any>;
+ *   document: Record<string, unknown>;
  *   frontmatter?: Record<string, unknown>;
  *   sourceFormat?: string | null;
  * }} newTabOpts