@jxsuite/studio 0.33.0 → 0.35.0

package/src/services/import-client.ts

@@ -0,0 +1,134 @@
+/**
+ * Shared client for the /__studio/import-site NDJSON stream. Every platform's importSite is "a
+ * streaming fetch to some URL" — the dev server posts to its own origin, the desktop platforms post
+ * to their token-gated loopback servers — so the request/parse/settle logic lives here once.
+ *
+ * The endpoint emits one JSON object per line: `progress` lines (forwarded to onProgress),
+ * `heartbeat` keep-alives (ignored), and a terminal `done` ({root, config}) or `error` line.
+ */
+
+import type { ImportProgressEvent, ImportSiteOptions } from "../types";
+import type { ProjectConfig } from "@jxsuite/schema/types";
+
+interface StreamLine {
+  type: string;
+  phase?: string;
+  message?: string;
+  current?: number;
+  total?: number;
+  root?: string;
+  config?: ProjectConfig;
+  error?: string;
+}
+
+/**
+ * POST an import request and consume its NDJSON progress stream.
+ *
+ * @param {string} endpoint — the platform's import-site URL (may carry an auth token)
+ * @param {ImportSiteOptions} opts — the import request; `apiKey`/`baseUrl` travel as headers
+ * @param {(evt: ImportProgressEvent) => void} onProgress
+ * @param {AbortSignal} [signal]
+ */
+export async function streamImport(
+  endpoint: string,
+  opts: ImportSiteOptions,
+  onProgress: (evt: ImportProgressEvent) => void,
+  signal?: AbortSignal,
+): Promise<{ root: string; config: ProjectConfig }> {
+  const headers: Record<string, string> = { "Content-Type": "application/json" };
+  if (opts.apiKey) {
+    headers["X-Api-Key"] = opts.apiKey;
+  }
+  if (opts.baseUrl) {
+    headers["X-Api-Base-URL"] = opts.baseUrl;
+  }
+
+  const res = await fetch(endpoint, {
+    body: JSON.stringify({
+      url: opts.url,
+      directory: opts.directory,
+      depth: opts.depth,
+      maxPages: opts.maxPages,
+      aiComponents: opts.aiComponents,
+      ...(opts.model === undefined ? {} : { aiModel: opts.model }),
+    }),
+    headers,
+    method: "POST",
+    ...(signal === undefined ? {} : { signal }),
+  });
+
+  if (!res.ok) {
+    let message = `Import failed (${res.status})`;
+    try {
+      const body = (await res.json()) as { error?: string };
+      if (body.error) {
+        message = body.error;
+      }
+    } catch {
+      /* Non-JSON error body — keep the status message. */
+    }
+    throw new Error(message);
+  }
+  if (!res.body) {
+    throw new Error("Import stream had no response body");
+  }
+
+  const reader = res.body.getReader();
+  const decoder = new TextDecoder();
+  let buffer = "";
+  let result: { root: string; config: ProjectConfig } | null = null;
+
+  const handleLine = (line: string) => {
+    const trimmed = line.trim();
+    if (!trimmed) {
+      return;
+    }
+    let parsed: StreamLine;
+    try {
+      parsed = JSON.parse(trimmed) as StreamLine;
+    } catch {
+      return; // Tolerate a mangled line rather than killing the whole import.
+    }
+    if (parsed.type === "progress") {
+      onProgress({
+        phase: parsed.phase ?? "",
+        message: parsed.message ?? "",
+        ...(parsed.current === undefined ? {} : { current: parsed.current }),
+        ...(parsed.total === undefined ? {} : { total: parsed.total }),
+      });
+    } else if (parsed.type === "done" && parsed.root !== undefined && parsed.config) {
+      result = { root: parsed.root, config: parsed.config };
+    } else if (parsed.type === "error") {
+      throw new Error(parsed.error || "Import failed");
+    }
+    // Heartbeats and unknown line types are ignored.
+  };
+
+  try {
+    for (;;) {
+      const { done, value } = await reader.read();
+      if (done) {
+        break;
+      }
+      buffer += decoder.decode(value, { stream: true });
+      // Lines can split across chunks: keep the trailing partial in the buffer.
+      const lines = buffer.split("\n");
+      buffer = lines.pop() ?? "";
+      for (const line of lines) {
+        handleLine(line);
+      }
+    }
+    handleLine(buffer);
+  } finally {
+    try {
+      await reader.cancel();
+    } catch {
+      /* The stream is already closed (e.g. after an abort). */
+    }
+  }
+
+  if (!result) {
+    throw new Error("Import stream ended without a result");
+  }
+  return result;
+}

package/src/services/monaco-setup.ts

@@ -23,6 +23,18 @@ self.MonacoEnvironment = {
   },
 };
 
+/* Monaco caches glyph widths when an editor is created. JetBrains Mono is a
+   vendored webfont (index.html @font-face) and may finish loading after the
+   first editor mounts, so remeasure once all document fonts are ready to keep
+   cursor and selection alignment correct. */
+if (typeof document !== "undefined" && document.fonts?.ready) {
+  // oxlint-disable-next-line unicorn/prefer-top-level-await -- fire-and-forget: awaiting fonts.ready at top level would block module evaluation (and studio startup) until webfonts load
+  void document.fonts.ready.then(async () => {
+    const monaco = await import("monaco-editor/esm/vs/editor/editor.api.js");
+    monaco.editor.remeasureFonts();
+  });
+}
+
 // oxlint-disable-next-line typescript/no-unsafe-call, typescript/no-unsafe-member-access -- jsonDefaults is imported from Monaco's untyped ESM contribution (see @ts-expect-error above); no type declarations exist for this named export
 jsonDefaults.setDiagnosticsOptions({
   allowComments: false,

package/src/services/render-critic.ts

@@ -13,9 +13,8 @@
  * @license MIT
  */
 
-import { buildScope, renderNode, setSkipServerFunctions } from "@jxsuite/runtime";
+import { buildScope, renderNode, runScoped, setSkipServerFunctions } from "@jxsuite/runtime";
 import type { JxDocument } from "@jxsuite/schema/types";
-import { effectScope } from "../reactivity";
 
 /**
  * Translate a render-time error into an actionable message the model can fix.
@@ -51,25 +50,26 @@ function translateRenderError(err: Error): string {
 export async function renderCheck(
   doc: JxDocument,
 ): Promise<{ ok: true } | { ok: false; error: string }> {
-  const scope = effectScope();
+  let stopRender: (() => void) | null = null;
   try {
     setSkipServerFunctions(true);
 
     const state = await buildScope(doc, {});
 
     const container = document.createElement("div");
-    scope.run(() => {
+    const { stop } = runScoped(() => {
       container.append(renderNode(doc, state));
     });
+    stopRender = stop;
 
     return { ok: true };
   } catch (error) {
     return { ok: false, error: translateRenderError(error as Error) };
   } finally {
-    // Dispose all effects created synchronously by renderNode. Effects from the async
-    // BuildScope (prototype/computed setup) escape the scope because Vue tracks the active
-    // Scope synchronously — they're GC-eligible once the throwaway state/container are
-    // Unreferenced. This bounded leak is acceptable for v1.
-    scope.stop();
+    // Dispose all effects created synchronously by renderNode via the RUNTIME's runScoped — scope
+    // Collection is per @vue/reactivity module instance, so a studio effectScope here would collect
+    // Nothing. Effects from the async buildScope (prototype/computed setup) still escape the scope;
+    // They're GC-eligible once the throwaway state/container are unreferenced. Bounded, acceptable.
+    stopRender?.();
   }
 }

package/src/services/settings-store.ts

@@ -0,0 +1,93 @@
+/// <reference lib="dom" />
+/**
+ * Settings-store.js — sync of user settings between localStorage and the platform backend.
+ *
+ * LocalStorage stays the synchronous source of truth for every consumer (ai-settings getters read
+ * it directly). On platforms with a backend user-settings store (desktop/chromium — where
+ * localStorage does not roam across browser profiles), the persisted keys are hydrated from the
+ * backend at boot and written through on every change. The dev server omits the platform methods
+ * and settings remain localStorage-only.
+ *
+ * @license MIT
+ */
+
+import { getPlatform, hasPlatform } from "../platform";
+
+/** The localStorage keys mirrored into the platform's user-settings store. */
+export const PERSISTED_SETTINGS_KEYS = ["jx.ai.openaiKey", "jx.ai.baseUrl", "jx.ai.model"] as const;
+
+/** Read a localStorage value defensively, treating unavailable/throwing storage as empty. */
+function readLocal(key: string): string {
+  try {
+    return globalThis.localStorage?.getItem(key) ?? "";
+  } catch {
+    return "";
+  }
+}
+
+/**
+ * Pull the persisted settings from the backend store into localStorage. Call once after the
+ * platform is registered; a no-op on platforms without a settings store (dev server).
+ *
+ * Migration: keys the backend does not know yet but localStorage does (an existing user upgrading
+ * from localStorage-only builds) are pushed back to the backend once, fire-and-forget.
+ */
+export async function hydrateSettings(): Promise<void> {
+  if (!hasPlatform()) {
+    return;
+  }
+  const platform = getPlatform();
+  if (!platform.getSettings) {
+    return;
+  }
+  let stored: Record<string, string>;
+  try {
+    stored = await platform.getSettings();
+  } catch {
+    return;
+  }
+  const merged: Record<string, string> = { ...stored };
+  let needsMigration = false;
+  for (const key of PERSISTED_SETTINGS_KEYS) {
+    const backendValue = stored[key];
+    if (backendValue) {
+      try {
+        globalThis.localStorage?.setItem(key, backendValue);
+      } catch {
+        /* Storage unavailable — consumers fall back to defaults. */
+      }
+    } else {
+      const localValue = readLocal(key);
+      if (localValue) {
+        merged[key] = localValue;
+        needsMigration = true;
+      }
+    }
+  }
+  if (needsMigration && platform.saveSettings) {
+    void platform.saveSettings(merged).catch(() => {});
+  }
+}
+
+/**
+ * Write the current values of the persisted keys through to the backend store, fire-and-forget.
+ * Call after mutating any of {@link PERSISTED_SETTINGS_KEYS} in localStorage; a no-op on platforms
+ * without a settings store (dev server).
+ */
+export function persistSettings(): void {
+  if (!hasPlatform()) {
+    return;
+  }
+  const platform = getPlatform();
+  if (!platform.saveSettings) {
+    return;
+  }
+  const settings: Record<string, string> = {};
+  for (const key of PERSISTED_SETTINGS_KEYS) {
+    const value = readLocal(key);
+    if (value) {
+      settings[key] = value;
+    }
+  }
+  void platform.saveSettings(settings).catch(() => {});
+}

package/src/settings/css-vars-editor.ts

@@ -114,7 +114,7 @@ function renderColorSection(
             <div class="css-var-swatch" style="background:${val}">
               <input
                 type="color"
-                .value=${val && String(val).startsWith("#") ? val : "#007acc"}
+                .value=${val && String(val).startsWith("#") ? val : "#3b82f6"}
                 @input=${(e: Event) => updateVar(name, (e.target as HTMLInputElement).value)}
               />
             </div>
@@ -131,7 +131,7 @@ function renderColorSection(
           </div>
         `,
       )}
-      ${renderAddRow("--color-", "Primary Blue", "#007acc", addVar)}
+      ${renderAddRow("--color-", "Primary Blue", "#3b82f6", addVar)}
     </div>
   `;
 }

package/src/store.ts

@@ -10,10 +10,9 @@
 // ─── Re-exports from state.js ────────────────────────────────────────────────
 
 import { activeTab } from "./workspace/workspace";
-import { isEventBinding } from "@jxsuite/schema/guards";
 import type { JxPath } from "./state";
 import type { JxMutableNode } from "@jxsuite/schema/types";
-import type { CanvasPanel } from "./panels/canvas-dnd.js";
+import type { CanvasPanel } from "./types";
 
 export {
   createState,
@@ -52,20 +51,6 @@ export function initShellRefs() {
 
 // ─── Shared containers (mutated in place by owner modules) ───────────────────
 
-export const elToPath = new WeakMap<Element, JxPath>();
-
-/**
- * Canvas element → the runtime scope its children render with. Captured during live renders so the
- * canvas patcher can re-render a subtree in isolation with the same prototype-chained scope.
- */
-export const elToScope = new WeakMap<Element, Record<string, unknown>>();
-
-/**
- * Subtree root element → the effect scope created for its surgical render. Stopped when the subtree
- * is replaced or removed so render-time reactive effects don't accumulate.
- */
-export const elToRenderScope = new WeakMap<Element, { stop: () => void }>();
-
 export const canvasPanels: CanvasPanel[] = [];
 
 // ─── Shared constants ────────────────────────────────────────────────────────
@@ -139,52 +124,9 @@ export function cancelStyleDebounce(prop: string) {
   _styleDebounceTimers.delete(prop);
 }
 
-/**
- * Strip all on* event handler properties from a Jx document tree (deep clone).
- *
- * @param {JxMutableNode} node
- * @returns {JxMutableNode}
- */
-export function stripEventHandlers(node: JxMutableNode): JxMutableNode {
-  if (!node || typeof node !== "object") {
-    return node;
-  }
-  if (Array.isArray(node)) {
-    // Arrays of nodes round-trip element-wise; the array itself is not a node.
-    return node.map((n: JxMutableNode) => stripEventHandlers(n)) as unknown as JxMutableNode;
-  }
-  const out: Record<string, unknown> = {};
-  for (const [k, v] of Object.entries(node)) {
-    if (k.startsWith("on") && isEventBinding(v)) {
-      continue;
-    }
-    if (k === "children") {
-      out.children = Array.isArray(v)
-        ? v.map((c: JxMutableNode) => stripEventHandlers(c))
-        : stripEventHandlers(v as JxMutableNode);
-    } else if (k === "cases" && typeof v === "object") {
-      const cases: Record<string, unknown> = {};
-      for (const [ck, cv] of Object.entries(v as Record<string, unknown>)) {
-        cases[ck] = stripEventHandlers(cv as JxMutableNode);
-      }
-      out.cases = cases;
-    } else if (k === "state" && typeof v === "object" && v !== null) {
-      const state: Record<string, unknown> = {};
-      for (const [sk, sv] of Object.entries(v as Record<string, unknown>)) {
-        if (sv && typeof sv === "object" && (sv as Record<string, unknown>).timing === "server") {
-          continue;
-        }
-        state[sk] = sv;
-      }
-      out.state = state;
-    } else if (k === "style" || k === "attributes" || k === "$media") {
-      out[k] = v;
-    } else {
-      out[k] = v;
-    }
-  }
-  return out;
-}
+// `stripEventHandlers` moved to ./utils/strip-events (dependency-light, shared with the iframe
+// Subtree renderer); re-exported here so existing `from "../store"` imports keep working.
+export { stripEventHandlers } from "./utils/strip-events";
 
 // ─── Render orchestration ────────────────────────────────────────────────────