@jxsuite/studio 0.33.0 → 0.35.0

package/src/types.ts

@@ -123,9 +123,57 @@ export interface RenameResult {
   error?: string;
 }
 
+/** A starter template surfaced in the New Project picker (mirrors @jxsuite/starters StarterMeta). */
+export interface StarterInfo {
+  id: string;
+  name: string;
+  industry: string;
+  tagline: string;
+  description: string;
+  features: string[];
+  accent: string;
+  /** Preview image as a self-contained `data:` URI. */
+  thumbnail: string;
+}
+
+/** A progress line from the AI-guided site import (mirrors @jxsuite/import ImportProgressEvent). */
+export interface ImportProgressEvent {
+  phase: string;
+  message: string;
+  current?: number;
+  total?: number;
+}
+
+/** Options for {@link StudioPlatform.importSite}. */
+export interface ImportSiteOptions {
+  /** The live site to clone; must be http(s). */
+  url: string;
+  /** Display name for the new project. */
+  name: string;
+  /** Destination directory (platform-interpreted: project-relative on the dev server). */
+  directory: string;
+  /** Max crawl depth; 0 = single page. */
+  depth: number;
+  /** Max pages to capture. */
+  maxPages: number;
+  /** Refine component/prop names with the LLM (requires a key). */
+  aiComponents: boolean;
+  /** OpenAI-compatible credentials, from the user's AI settings. */
+  apiKey?: string;
+  baseUrl?: string;
+  model?: string;
+}
+
 export interface StudioPlatform {
   id: string;
   projectRoot: string;
+  /**
+   * URL of the canvas iframe document. Optional: when set (chromium serves it from the project
+   * server under the studio namespace), the iframe host uses it; otherwise the host falls back to
+   * the default dev-server path. Not keyed on `id` — chromium and electrobun both report `id:
+   * "desktop"`, but only chromium sets this.
+   */
+  canvasUrl?: string;
   activate: (root?: string) => Promise<void>;
   openProject: () => Promise<{
     config: ProjectConfig;
@@ -190,6 +238,13 @@ export interface StudioPlatform {
   /** Invoke a format capability (parse/serialize) — { format, action, source?, doc?, options? }. */
   formatAction?: (payload: Record<string, unknown>) => Promise<unknown>;
   fetchPluginSchema: (src: string, prototype?: string, base?: string) => Promise<unknown>;
+  /**
+   * Resolve a class-prototype config through the backend's `/__jx_resolve__` pipeline (with the
+   * project's content types loaded) and return the parsed result. Used by the tab-bar's dynamic
+   * route-param picker to enumerate ContentCollection entries. Optional: platforms without a
+   * resolve backend omit it and the picker falls back to a plain fetch.
+   */
+  resolveClass?: (body: Record<string, unknown>) => Promise<unknown>;
   gitStatus: () => Promise<GitStatusResult>;
   gitBranches: () => Promise<GitBranchesResult>;
   gitLog: (limit?: number) => Promise<GitLogEntry[]>;
@@ -213,7 +268,41 @@ export interface StudioPlatform {
     url?: string;
     adapter?: string;
     directory: string;
+    /** Id of a starter template to clone, or "blank"/undefined for the minimal template. */
+    starter?: string;
+    /** Id of a built-in template variant (from `@jxsuite/create/templates`); undefined = blank. */
+    template?: string;
+    /** Design quickstart (colors, fonts, logo, breakpoints) applied on top of the scaffold. */
+    design?: {
+      accent?: string;
+      background?: string;
+      text?: string;
+      bodyFont?: string;
+      headingFont?: string;
+      media?: Record<string, string>;
+      logo?: { name: string; base64: string };
+    };
   }) => Promise<{ root: string; config: ProjectConfig }>;
+  /**
+   * List the starter templates available in the New Project picker. Absent on platforms that don't
+   * ship starters (the picker then offers only a blank project).
+   */
+  listStarters?: () => Promise<StarterInfo[]>;
+  /**
+   * AI-guided import of an existing site into a new project. Runs in the backend (headless Chrome +
+   * fs), streaming progress until the project is written. Absent on platforms without a backend
+   * import pipeline — the New Project modal hides its Import tab then.
+   */
+  importSite?: (
+    opts: ImportSiteOptions,
+    onProgress: (evt: ImportProgressEvent) => void,
+    signal?: AbortSignal,
+  ) => Promise<{ root: string; config: ProjectConfig }>;
+  /**
+   * Open a native directory picker and return the chosen absolute path (null when cancelled).
+   * Desktop only; the dev server interprets directories relative to its root instead.
+   */
+  pickDirectory?: () => Promise<string | null>;
   /** Stack B AI assistant: URL of the OpenAI-compatible SSE chat proxy (`/__studio/ai/chat`). */
   aiChatUrl: () => string | Promise<string>;
   // ─── Multi-window (desktop only; undefined on dev-server) ───────────────────
@@ -237,6 +326,15 @@ export interface StudioPlatform {
   getRecentProjects?: () => Promise<RecentProjectEntry[]>;
   /** Persist the full recent-projects list to the backend store. */
   saveRecentProjects?: (projects: RecentProjectEntry[]) => Promise<void>;
+  // ─── User settings (backend-persisted; undefined on dev-server) ─────────────
+  /**
+   * Read the user-level settings map (e.g. the AI connection parameters) from a backend store
+   * shared across all projects/windows. Platforms without a native backend (dev server) omit it and
+   * settings live in localStorage only.
+   */
+  getSettings?: () => Promise<Record<string, string>>;
+  /** Persist the full user-level settings map to the backend store. */
+  saveSettings?: (settings: Record<string, string>) => Promise<void>;
 }
 
 /** A recently-opened project, keyed by its re-openable `root` (platform-specific). */
@@ -252,18 +350,11 @@ export interface CanvasPanel {
   mediaName: string;
   element: HTMLElement;
   canvas: HTMLElement;
-  overlay: HTMLElement;
-  overlayClk: HTMLElement;
   viewport: HTMLElement;
   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.
@@ -271,17 +362,6 @@ export interface CanvasPanel {
   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 {
   document: JxMutableNode;
   documentPath: string | null;

package/src/ui/ai-credentials-form.ts

@@ -0,0 +1,205 @@
+/// <reference lib="dom" />
+/**
+ * Ai-credentials-form.ts — reusable AI provider credentials form (key / model / endpoint).
+ *
+ * Extracted from the ai-panel key gate so other hosts (e.g. the New Project modal) can embed the
+ * same form. All draft/model-list state lives inside the closure, so multiple instances never
+ * share state. Persists via src/services/ai-settings.ts on Save.
+ *
+ * @license MIT
+ */
+
+import { html, nothing } from "lit-html";
+import type { TemplateResult } from "lit-html";
+import { fetchAvailableModels, invalidateModelCache } from "../services/ai-models";
+import {
+  getBaseUrl,
+  getModel,
+  getOpenAiKey,
+  hasOpenAiKey,
+  setBaseUrl,
+  setModel,
+  setOpenAiKey,
+} from "../services/ai-settings";
+
+export interface AiCredentialsFormOptions {
+  /** Host re-render scheduler — called whenever the form's internal state changes. */
+  requestRender: () => void;
+  /** Called after Save persists the credentials. */
+  onSaved?: () => void;
+  /** Called when Cancel dismisses the form (Cancel is only offered when a key already exists). */
+  onCancel?: () => void;
+  /** Optional context line (TemplateResult | string) replacing the default blurb. */
+  intro?: unknown;
+}
+
+export interface AiCredentialsForm {
+  render: () => TemplateResult;
+  /** Preload drafts from the stored ai-settings and auto-fetch the model list. */
+  startEdit: () => void;
+}
+
+/**
+ * Create an AI credentials form instance bound to a host's render scheduler.
+ *
+ * @param {AiCredentialsFormOptions} opts
+ * @returns {AiCredentialsForm}
+ */
+export function createAiCredentialsForm(opts: AiCredentialsFormOptions): AiCredentialsForm {
+  let keyDraft = "";
+  let baseUrlDraft = "";
+  let modelDraft = "";
+
+  /** Fetched from the proxy's /models endpoint (sibling of the chat endpoint). */
+  let availableModels: { id: string; name: string }[] = [];
+  let modelsLoading = false;
+  let modelsError = "";
+
+  /** Open the form pre-filled with the current settings, and load the model list. */
+  function startEdit() {
+    keyDraft = getOpenAiKey();
+    baseUrlDraft = getBaseUrl();
+    modelDraft = getModel();
+    opts.requestRender();
+    // Auto-fetch available models if not already loaded.
+    if (availableModels.length === 0 && !modelsLoading) {
+      void fetchModels();
+    }
+  }
+
+  /** Persist the drafted key + endpoint + model and notify the host. */
+  function save() {
+    setOpenAiKey(keyDraft);
+    setBaseUrl(baseUrlDraft);
+    setModel(modelDraft);
+    keyDraft = "";
+    baseUrlDraft = "";
+    modelDraft = "";
+    // Clear fetched models so they're re-fetched with the new credentials next time.
+    availableModels = [];
+    invalidateModelCache();
+    opts.onSaved?.();
+    opts.requestRender();
+  }
+
+  /** Dismiss the form without saving (only offered when a key already exists). */
+  function cancel() {
+    keyDraft = "";
+    baseUrlDraft = "";
+    modelDraft = "";
+    opts.onCancel?.();
+    opts.requestRender();
+  }
+
+  /**
+   * Fetch available models via src/services/ai-models.ts, preferring the in-form drafts over the
+   * stored settings so the list reflects the credentials being edited. Always forces past the
+   * module cache — this runs on explicit user action (or first open) with possibly-new drafts.
+   */
+  async function fetchModels() {
+    modelsLoading = true;
+    modelsError = "";
+    opts.requestRender();
+    try {
+      availableModels = await fetchAvailableModels({
+        apiKey: getOpenAiKey() || keyDraft,
+        baseUrl: baseUrlDraft || getBaseUrl(),
+        force: true,
+      });
+    } catch (error: unknown) {
+      modelsError = (error as Error).message || "Failed to fetch models";
+    } finally {
+      modelsLoading = false;
+      opts.requestRender();
+    }
+  }
+
+  /** The key + model + endpoint form column. */
+  function render(): TemplateResult {
+    const haveKey = hasOpenAiKey();
+    return html`
+      <div
+        class="ai-creds-form"
+        style="display:flex;flex-direction:column;gap:10px;max-width:320px;text-align:left"
+      >
+        <div style="font-weight:600;align-self:center">AI provider key</div>
+        ${opts.intro === undefined
+          ? html`
+              <div style="font-size:11px;color:var(--fg-dim)">
+                Any OpenAI-compatible key works. Stored locally in this browser; sent only to the
+                Studio proxy (never to a third party except your chosen endpoint).
+              </div>
+            `
+          : html`<div style="font-size:11px;color:var(--fg-dim)">${opts.intro}</div>`}
+        <input
+          type="password"
+          style="width:100%;box-sizing:border-box;padding:6px 8px;border-radius:4px;border:1px solid var(--border);background:var(--bg-input);color:var(--fg);font-size:12px"
+          placeholder="sk-… or any compatible key"
+          .value=${keyDraft}
+          @input=${(e: Event) => {
+            keyDraft = (e.target as HTMLInputElement).value;
+          }}
+        />
+        <div style="font-weight:500;font-size:11px;margin-top:4px">Model</div>
+        ${availableModels.length > 0
+          ? html`
+              <sp-combobox
+                size="s"
+                allows-custom-value
+                .value=${modelDraft}
+                @change=${(e: Event) => {
+                  modelDraft = (e.target as HTMLInputElement).value;
+                }}
+                @input=${(e: Event) => {
+                  modelDraft = (e.target as HTMLInputElement).value;
+                }}
+              >
+                ${availableModels.map(
+                  (m) => html`<sp-menu-item value=${m.id}>${m.name}</sp-menu-item>`,
+                )}
+              </sp-combobox>
+            `
+          : html`
+              <input
+                type="text"
+                style="width:100%;box-sizing:border-box;padding:6px 8px;border-radius:4px;border:1px solid var(--border);background:var(--bg-input);color:var(--fg);font-size:12px"
+                placeholder="Model ID (e.g. gpt-4o, claude-sonnet-4-20250514, etc.)"
+                .value=${modelDraft}
+                @input=${(e: Event) => {
+                  modelDraft = (e.target as HTMLInputElement).value;
+                }}
+              />
+            `}
+        <div style="display:flex;gap:8px;align-items:center">
+          <sp-button size="s" variant="secondary" ?disabled=${modelsLoading} @click=${fetchModels}>
+            ${modelsLoading
+              ? "Fetching…"
+              : availableModels.length > 0
+                ? "Refresh models"
+                : "Fetch models"}
+          </sp-button>
+          ${modelsError
+            ? html`<span style="font-size:10px;color:var(--danger)">${modelsError}</span>`
+            : nothing}
+        </div>
+        <input
+          type="text"
+          style="width:100%;box-sizing:border-box;padding:6px 8px;border-radius:4px;border:1px solid var(--border);background:var(--bg-input);color:var(--fg);font-size:12px"
+          placeholder="Endpoint (optional, e.g. http://localhost:11434/v1)"
+          .value=${baseUrlDraft}
+          @input=${(e: Event) => {
+            baseUrlDraft = (e.target as HTMLInputElement).value;
+          }}
+        />
+        <div style="display:flex;gap:8px;align-self:flex-end">
+          ${haveKey
+            ? html`<sp-button size="s" variant="secondary" @click=${cancel}>Cancel</sp-button>`
+            : nothing}
+          <sp-button size="s" variant="primary" @click=${save}>Save</sp-button>
+        </div>
+      </div>
+    `;
+  }
+
+  return { render, startEdit };
+}

package/src/ui/jx-theme.ts

@@ -0,0 +1,63 @@
+/**
+ * Jx brand theme fragment.
+ *
+ * Registered as the Spectrum 'app' fragment (see spectrum.ts), so it is adopted into every
+ * <sp-theme> shadow root _after_ the system/color/scale fragments and wins the :host cascade. It
+ * rebrands the stock Spectrum dark theme by overriding only the palette `-rgb` triplets: every
+ * derived token in the published theme CSS (accent, focus ring, background layers, alpha-composed
+ * tints) resolves through `rgba(var(--spectrum-*-rgb))`, so the whole theme follows coherently.
+ *
+ * Canonical brand values: sites/jxsuite.com/project.json (accent #3b82f6, accent-hover #60a5fa,
+ * neutral surfaces #0a0a0a / #111111 / #1a1a1a / #222222). Intermediate stops interpolate along the
+ * Tailwind blue/zinc ramps the brand palette derives from.
+ *
+ * Dark-theme stop order: gray 50 (darkest) -> 900 (lightest); blue 100 (darkest) -> 1400
+ * (lightest). Semantic anchors under this ramp:
+ *
+ * - Accent button fill = accent-500 (white text ~5.2:1)
+ * - Focus ring = blue-800 (brand accent-hover)
+ * - Studio --accent = accent-700 (exact brand blue)
+ * - Accent content/visual = accent-900 (soft on-dark tint)
+ */
+
+import { css } from "@spectrum-web-components/base";
+
+export const jxTheme = css`
+  :host {
+    /* Neutral (gray) ramp — Jx near-black surfaces and zinc text tones */
+    --spectrum-gray-50-rgb: 10, 10, 10; /* #0a0a0a bg-primary / base */
+    --spectrum-gray-75-rgb: 17, 17, 17; /* #111111 bg-secondary / layer-1 */
+    --spectrum-gray-100-rgb: 26, 26, 26; /* #1a1a1a surface / layer-2 */
+    --spectrum-gray-200-rgb: 34, 34, 34; /* #222222 border / surface-hover */
+    --spectrum-gray-300-rgb: 63, 63, 70; /* #3f3f46 strong border */
+    --spectrum-gray-400-rgb: 82, 82, 91; /* #52525b component border */
+    --spectrum-gray-500-rgb: 113, 113, 122; /* #71717a text-muted */
+    --spectrum-gray-600-rgb: 161, 161, 170; /* #a1a1aa text-secondary */
+    --spectrum-gray-700-rgb: 212, 212, 216; /* #d4d4d8 subtle text */
+    --spectrum-gray-800-rgb: 228, 228, 231; /* #e4e4e7 primary text */
+    --spectrum-gray-900-rgb: 250, 250, 250; /* #fafafa ink / headings */
+
+    /* Blue ramp — drives accent, informative, and the focus indicator */
+    --spectrum-blue-100-rgb: 23, 37, 84; /* #172554 */
+    --spectrum-blue-200-rgb: 30, 58, 138; /* #1e3a8a */
+    --spectrum-blue-300-rgb: 30, 64, 175; /* #1e40af */
+    --spectrum-blue-400-rgb: 29, 78, 216; /* #1d4ed8 */
+    --spectrum-blue-500-rgb: 37, 99, 235; /* #2563eb accent button fill */
+    --spectrum-blue-600-rgb: 48, 112, 241; /* #3070f1 */
+    --spectrum-blue-700-rgb: 59, 130, 246; /* #3b82f6 brand accent */
+    --spectrum-blue-800-rgb: 96, 165, 250; /* #60a5fa accent-hover / focus */
+    --spectrum-blue-900-rgb: 147, 197, 253; /* #93c5fd soft on-dark accent */
+    --spectrum-blue-1000-rgb: 191, 219, 254; /* #bfdbfe */
+    --spectrum-blue-1100-rgb: 219, 234, 254; /* #dbeafe */
+    --spectrum-blue-1200-rgb: 239, 246, 255; /* #eff6ff */
+    --spectrum-blue-1300-rgb: 248, 250, 252; /* #f8fafc */
+    --spectrum-blue-1400-rgb: 255, 255, 255; /* #ffffff */
+
+    /* Brand font stacks. Sans drops adobe-clean so Adobe Clean never renders
+       on machines that have it installed; mono leads with the vendored
+       JetBrains Mono (see index.html @font-face). */
+    --spectrum-sans-font-family-stack: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+    --spectrum-code-font-family-stack:
+      "JetBrains Mono", "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
+  }
+`;

package/src/ui/media-picker.ts

@@ -12,6 +12,8 @@ import { ref } from "lit-html/directives/ref.js";
 import { getPlatform } from "../platform";
 import { debouncedStyleCommit, renderOnly } from "../store";
 import { getLayerSlot } from "./layers";
+import { rectOf } from "../utils/geometry";
+import { loopbackAssetSrc } from "../canvas/canvas-origin";
 
 // ─── Media file cache ────────────────────────────────────────────────────────
 
@@ -142,7 +144,7 @@ function onPopoverOutsideClick(e: MouseEvent) {
 
 function renderMediaPickerPopover() {
   const host = getLayerSlot("popover", "media-picker");
-  const rect = _popoverAnchorEl?.getBoundingClientRect();
+  const rect = _popoverAnchorEl ? rectOf(_popoverAnchorEl) : undefined;
   if (!rect) {
     return;
   }
@@ -210,7 +212,7 @@ function renderMediaPickerPopover() {
                     ${m.isImage
                       ? html`<img
                           slot="icon"
-                          src=${m.path}
+                          src=${loopbackAssetSrc(m.path)}
                           alt=""
                           style="width:24px;height:24px;object-fit:cover;border-radius:var(--spectrum-corner-radius-75, 2px)"
                         />`
@@ -232,7 +234,7 @@ function renderMediaPickerPopover() {
   // Fine-tune position after render using actual measured dimensions
   requestAnimationFrame(() => {
     if (_popoverEl) {
-      const popoverRect = _popoverEl.getBoundingClientRect();
+      const popoverRect = rectOf(_popoverEl);
       let adjLeft = popoverRect.left;
       let adjTop = popoverRect.top;
       let needsAdjust = false;
@@ -304,7 +306,7 @@ export function renderMediaPicker(prop: string, value: string, onCommit: (val: s
   return html`
     <div class="media-picker">
       ${isImage && currentValue
-        ? html`<img class="media-picker-thumb" src=${currentValue} alt="" />`
+        ? html`<img class="media-picker-thumb" src=${loopbackAssetSrc(currentValue)} alt="" />`
         : nothing}
       <sp-textfield
         size="s"

package/src/ui/spectrum.ts

@@ -11,6 +11,7 @@ import { Theme } from "@spectrum-web-components/theme/src/Theme.js";
 import themeSpectrumCSS from "@spectrum-web-components/theme/src/theme.css.js";
 import themeDarkCSS from "@spectrum-web-components/theme/src/theme-dark.css.js";
 import scaleMediumCSS from "@spectrum-web-components/theme/src/scale-medium.css.js";
+import { jxTheme } from "./jx-theme";
 import { Tabs } from "@spectrum-web-components/tabs/src/Tabs.js";
 import { Tab } from "@spectrum-web-components/tabs/src/Tab.js";
 import { TabPanel } from "@spectrum-web-components/tabs/src/TabPanel.js";
@@ -126,6 +127,10 @@ import { IconVisibility } from "@spectrum-web-components/icons-workflow/src/elem
 import { IconVisibilityOff } from "@spectrum-web-components/icons-workflow/src/elements/IconVisibilityOff.js";
 import { IconArtboard } from "@spectrum-web-components/icons-workflow/src/elements/IconArtboard.js";
 import { IconChat } from "@spectrum-web-components/icons-workflow/src/elements/IconChat.js";
+import { IconSend } from "@spectrum-web-components/icons-workflow/src/elements/IconSend.js";
+import { IconStop } from "@spectrum-web-components/icons-workflow/src/elements/IconStop.js";
+import { IconHistory } from "@spectrum-web-components/icons-workflow/src/elements/IconHistory.js";
+import { IconAttach } from "@spectrum-web-components/icons-workflow/src/elements/IconAttach.js";
 import { IconViewList } from "@spectrum-web-components/icons-workflow/src/elements/IconViewList.js";
 import { IconRailRightClose } from "@spectrum-web-components/icons-workflow/src/elements/IconRailRightClose.js";
 import { IconRailRightOpen } from "@spectrum-web-components/icons-workflow/src/elements/IconRailRightOpen.js";
@@ -271,6 +276,10 @@ const components = [
   ["sp-icon-visibility-off", IconVisibilityOff],
   ["sp-icon-artboard", IconArtboard],
   ["sp-icon-chat", IconChat],
+  ["sp-icon-send", IconSend],
+  ["sp-icon-stop", IconStop],
+  ["sp-icon-history", IconHistory],
+  ["sp-icon-attach", IconAttach],
   ["sp-icon-view-list", IconViewList],
   ["sp-icon-text-bold", IconTextBold],
   ["sp-icon-text-italic", IconTextItalic],
@@ -296,5 +305,9 @@ for (const [tag, ctor] of components as [string, CustomElementConstructor][]) {
 Theme.registerThemeFragment("spectrum", "system", themeSpectrumCSS);
 Theme.registerThemeFragment("dark", "color", themeDarkCSS);
 Theme.registerThemeFragment("medium", "scale", scaleMediumCSS);
+/* Jx brand overrides. The 'app' kind must be registered under the literal
+   name "app" and, registered last, is adopted after the fragments above so
+   its :host declarations win the cascade (see src/ui/jx-theme.ts). */
+Theme.registerThemeFragment("app", "app", jxTheme);
 
 export { components };

package/src/utils/canvas-media.ts

@@ -2,8 +2,6 @@
 /// <reference lib="dom.iterable" />
 /** Canvas media/breakpoint utilities — pure functions extracted for testability. */
 
-import type { JxStyle } from "@jxsuite/schema/types";
-
 /**
  * Classify $media entries into size breakpoints (get a canvas each) and feature queries (rendered
  * as toolbar toggles).
@@ -63,138 +61,3 @@ export function activeBreakpointsForWidth(
   }
   return active;
 }
-
-/**
- * Apply styles to a canvas element, including active media overrides. Base (flat) styles applied
- * first, then matching media overrides in source order.
- *
- * @param {HTMLElement} el
- * @param {JxStyle | null | undefined} styleDef
- * @param {Set<string>} activeBreakpoints
- * @param {Record<string, boolean>} featureToggles
- */
-export function applyCanvasStyle(
-  el: HTMLElement,
-  styleDef: JxStyle | null | undefined,
-  activeBreakpoints: Set<string>,
-  featureToggles: Record<string, boolean>,
-) {
-  if (!styleDef || typeof styleDef !== "object") {
-    return;
-  }
-  for (const [prop, val] of Object.entries(styleDef)) {
-    if (typeof val === "string" || typeof val === "number") {
-      try {
-        if (prop.startsWith("--")) {
-          el.style.setProperty(prop, String(val));
-        } else {
-          (el.style as unknown as Record<string, unknown>)[prop] = val;
-        }
-      } catch {}
-    }
-  }
-  for (const [key, val] of Object.entries(styleDef)) {
-    if (!key.startsWith("@") || typeof val !== "object" || val === null) {
-      continue;
-    }
-    const mediaName = key.slice(1);
-    if (mediaName === "--") {
-      continue;
-    }
-    if (activeBreakpoints.has(mediaName) || featureToggles[mediaName]) {
-      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 {
-              (el.style as unknown as Record<string, unknown>)[prop] = v;
-            }
-          } catch {}
-        }
-      }
-    }
-  }
-}
-
-/**
- * Scan stylesheets for @media rules matching active breakpoints, collecting the CSS declarations
- * that should be applied as inline overrides per data-jx element.
- *
- * Returns a Map of data-jx uid → Map of CSS property → value.
- *
- * @param {Iterable<CSSStyleSheet>} styleSheets
- * @param {Set<string>} activeBreakpoints
- * @returns {Map<string, Map<string, string>>}
- */
-export function collectMediaOverrides(
-  styleSheets: Iterable<CSSStyleSheet>,
-  activeBreakpoints: Set<string>,
-) {
-  const overrides = new Map<string, Map<string, string>>();
-  if (activeBreakpoints.size === 0) {
-    return overrides;
-  }
-
-  for (const sheet of styleSheets) {
-    /** @type {CSSRuleList | null} */
-    let rules;
-    try {
-      rules = sheet.cssRules;
-    } catch {
-      continue;
-    }
-    if (!rules) {
-      continue;
-    }
-    for (const rule of rules) {
-      if (!(rule instanceof CSSMediaRule)) {
-        continue;
-      }
-      if (!activeBreakpoints.has(rule.conditionText)) {
-        continue;
-      }
-      for (const mediaRule of rule.cssRules) {
-        if (!(mediaRule instanceof CSSStyleRule)) {
-          continue;
-        }
-        const selector = mediaRule.selectorText;
-        const jxMatch = selector.match(/\[data-jx="([^"]+)"\]/);
-        if (!jxMatch) {
-          continue;
-        }
-        const [, uid] = jxMatch;
-        if (!overrides.has(uid!)) {
-          overrides.set(uid!, new Map());
-        }
-        const props = overrides.get(uid!) as Map<string, string>;
-        for (const prop of mediaRule.style) {
-          props.set(prop, mediaRule.style.getPropertyValue(prop));
-        }
-      }
-    }
-  }
-  return overrides;
-}
-
-/**
- * Apply collected media overrides to elements within a canvas.
- *
- * @param {Element} canvasEl
- * @param {Map<string, Map<string, string>>} overrides
- */
-export function applyOverridesToCanvas(
-  canvasEl: Element,
-  overrides: Map<string, Map<string, string>>,
-) {
-  for (const [uid, props] of overrides) {
-    const els = canvasEl.querySelectorAll(`[data-jx="${uid}"]`);
-    for (const el of els) {
-      for (const [prop, val] of props) {
-        try {
-          (el as HTMLElement).style.setProperty(prop, val);
-        } catch {}
-      }
-    }
-  }
-}