@jxsuite/studio 0.28.5 → 0.30.1

package/src/panels/toolbar.ts

@@ -5,13 +5,10 @@
  */
 
 import { html, render as litRender, nothing } from "lit-html";
-import { updateSession, updateUi } from "../store";
+import { updateSession } from "../store";
 import { redo as tabRedo, undo as tabUndo } from "../tabs/transact";
 import { effect, effectScope } from "../reactivity";
 import { activeTab } from "../workspace/workspace";
-import type { DocumentStackEntry } from "../types";
-import { getEffectiveMedia } from "../site-context";
-import { mediaDisplayName } from "./shared";
 import { applyPanelCollapse, view } from "../view";
 import { getRecentProjects } from "../recent-projects";
 import { openQuickSearch } from "./quick-search";
@@ -23,21 +20,9 @@ import type { EffectScope } from "@vue/reactivity";
 import type { TemplateResult } from "lit-html";
 
 interface ToolbarCtx {
-  navigateBack: () => void;
-  navigateToLevel: (level: number) => void;
   openProject: () => void;
   openFile?: (path: string) => void;
   saveFile: () => void;
-  parseMediaEntries: (media: Record<string, string> | null | undefined) => {
-    sizeBreakpoints: {
-      name: string;
-      query: string;
-      width: number;
-      type: string;
-    }[];
-    featureQueries: { name: string; query: string }[];
-    baseWidth: number;
-  };
   getCanvasMode: () => string;
   setCanvasMode: (mode: string) => void;
   renderCanvas: () => void;
@@ -54,7 +39,6 @@ let _scope: EffectScope | null = null;
 
 const toolbarIconMap = {
   "sp-icon-artboard": html`<sp-icon-artboard slot="icon"></sp-icon-artboard>`,
-  "sp-icon-back": html`<sp-icon-back slot="icon"></sp-icon-back>`,
   "sp-icon-brush": html`<sp-icon-brush slot="icon"></sp-icon-brush>`,
   "sp-icon-code": html`<sp-icon-code slot="icon"></sp-icon-code>`,
   "sp-icon-delete": html`<sp-icon-delete slot="icon"></sp-icon-delete>`,
@@ -160,9 +144,9 @@ function minimalToolbarTemplate(ctx: ToolbarCtx) {
           @change=${(e: Event) => {
             const val = (e.target as unknown as HTMLInputElement).value;
             if (val === "__new__") {
-              handleNewProject();
+              void handleNewProject();
             } else {
-              ctx.openRecentProject(val);
+              void ctx.openRecentProject(val);
             }
           }}
         >
@@ -298,65 +282,12 @@ function toolbarTemplate() {
 
   const S = {
     dirty: tab.doc.dirty,
-    document: tab.doc.document,
-    documentPath: tab.documentPath,
-    documentStack: tab.session.documentStack,
     fileHandle: tab.fileHandle,
     mode: tab.doc.mode,
     selection: tab.session.selection,
     ui: tab.session.ui,
   };
   const canvasMode = ctx.getCanvasMode();
-  const hasStack = S.documentStack && S.documentStack.length > 0;
-
-  const breadcrumbTpl = hasStack
-    ? html`
-        <div class="breadcrumb">
-          <sp-action-button size="s" title="Return to parent document" @click=${ctx.navigateBack}>
-            ${toolbarIconMap["sp-icon-back"]}Back
-          </sp-action-button>
-          ${S.documentStack.map(
-            (frame: DocumentStackEntry, i: number) => html`
-              <span class="breadcrumb-item clickable" @click=${() => ctx.navigateToLevel(i)}
-                >${frame.documentPath?.split("/").pop() || "untitled"}</span
-              >
-              <span class="breadcrumb-sep"> › </span>
-            `,
-          )}
-          <span class="breadcrumb-item current">
-            ${S.documentPath?.split("/").pop() || S.document.tagName || "document"}
-          </span>
-        </div>
-      `
-    : nothing;
-
-  const { featureQueries } = ctx.parseMediaEntries(getEffectiveMedia(S.document.$media));
-  const togglesTpl =
-    featureQueries.length > 0
-      ? html`
-          <sp-action-group compact size="s">
-            ${featureQueries.map(
-              (/** @type {{ name: string; query: string }} */ { name, query }) => html`
-                <sp-action-button
-                  toggles
-                  size="s"
-                  title=${query}
-                  ?selected=${Boolean(S.ui.featureToggles[name])}
-                  @click=${() => {
-                    const newToggles = {
-                      ...S.ui.featureToggles,
-                      [name]: !S.ui.featureToggles[name],
-                    };
-                    updateUi("featureToggles", newToggles);
-                  }}
-                >
-                  ${mediaDisplayName(name)}
-                </sp-action-button>
-              `,
-            )}
-          </sp-action-group>
-        `
-      : nothing;
 
   const modeSwitcherTpl = html`
     <sp-action-group selects="single" size="s" compact>
@@ -488,9 +419,9 @@ function toolbarTemplate() {
           @change=${(e: Event) => {
             const val = (e.target as unknown as HTMLInputElement).value;
             if (val === "__new__") {
-              handleNewProject();
+              void handleNewProject();
             } else {
-              ctx.openRecentProject(val);
+              void ctx.openRecentProject(val);
             }
           }}
         >
@@ -543,7 +474,7 @@ function toolbarTemplate() {
         </sp-action-button>`
       : nothing}
     <div class="tb-spacer"></div>
-    ${breadcrumbTpl} ${togglesTpl} ${modeSwitcherTpl}
+    ${modeSwitcherTpl}
     <sp-action-button
       quiet
       size="s"

package/src/platforms/devserver.ts

@@ -8,6 +8,26 @@
  * See spec/desktop.md §8 for the full specification.
  */
 
+import type { ProjectConfig } from "@jxsuite/schema/types";
+import type { DirEntry, FsEvent, RenameResult } from "../types";
+
+/** A directory entry from the server, tolerating extra wire fields. */
+type WireDirEntry = DirEntry & Record<string, unknown>;
+
+/** Parse a fetch Response body as JSON, asserting the expected shape at the boundary. */
+async function readJson<T>(res: Response): Promise<T> {
+  return (await res.json()) as T;
+}
+
+interface ErrorBody {
+  error?: string;
+}
+
+interface SiteEntry {
+  config: unknown;
+  path: string;
+}
+
 /**
  * Create a DevServerPlatform instance.
  *
@@ -58,7 +78,7 @@ export function createDevServerPlatform() {
     set projectRoot(v) {
       _projectRoot = v || "";
       if (_projectRoot) {
-        this.activate(_projectRoot);
+        void this.activate(_projectRoot);
       }
     },
 
@@ -109,19 +129,16 @@ export function createDevServerPlatform() {
       }
 
       const file = await siteHandle.getFile();
-      const config = JSON.parse(await file.text());
+      const config = JSON.parse(await file.text()) as ProjectConfig;
 
       // Resolve server-relative path by matching against known sites
       const sitesRes = await fetch("/__studio/sites");
       if (!sitesRes.ok) {
         throw new Error("Failed to fetch site list from server");
       }
-      const sites = await sitesRes.json();
+      const sites = await readJson<SiteEntry[]>(sitesRes);
       const match = sites.find(
-        /** @param {{ config: unknown; path: string }} s */ (s: {
-          config: unknown;
-          path: string;
-        }) => JSON.stringify(s.config) === JSON.stringify(config),
+        (s: SiteEntry) => JSON.stringify(s.config) === JSON.stringify(config),
       );
 
       if (!match) {
@@ -132,7 +149,7 @@ export function createDevServerPlatform() {
         if (!findRes.ok) {
           throw new Error("Could not locate project on disk");
         }
-        const found = await findRes.json();
+        const found = await readJson<{ path?: string }>(findRes);
         if (!found.path) {
           throw new Error(`Could not find project directory "${dirHandle.name}"`);
         }
@@ -147,7 +164,7 @@ export function createDevServerPlatform() {
       return {
         config,
         handle: {
-          name: config.name || _projectRoot.split("/").pop(),
+          name: config.name || _projectRoot.split("/").pop()!,
           projectConfig: config,
           root: _projectRoot,
         },
@@ -164,8 +181,17 @@ export function createDevServerPlatform() {
           fetch("/__studio/project"),
           fetch("/__studio/project-info?dir=."),
         ]);
-        const meta = projectRes.ok ? await projectRes.json() : { name: "project", root: "." };
-        const info = infoRes.ok ? await infoRes.json() : { isSiteProject: false };
+        const meta = projectRes.ok
+          ? await readJson<{ name: string; root: string }>(projectRes)
+          : { name: "project", root: "." };
+        const info = infoRes.ok
+          ? await readJson<{
+              isSiteProject: boolean;
+              projectConfig?: ProjectConfig | null;
+              directories?: string[];
+              [key: string]: unknown;
+            }>(infoRes)
+          : { isSiteProject: false };
         return { info, meta };
       } catch {
         return null;
@@ -196,7 +222,7 @@ export function createDevServerPlatform() {
         method: "POST",
       });
       if (!res.ok) {
-        const data = await res.json();
+        const data = await readJson<ErrorBody>(res);
         throw new Error(data.error || "Failed to create project");
       }
       return await res.json();
@@ -210,7 +236,7 @@ export function createDevServerPlatform() {
       if (!res.ok) {
         throw new Error(`Failed to list directory: ${dir}`);
       }
-      const entries = await res.json();
+      const entries = await readJson<WireDirEntry[]>(res);
       for (const e of entries) {
         e.path = stripRoot(e.path);
       }
@@ -223,7 +249,7 @@ export function createDevServerPlatform() {
       if (!res.ok) {
         throw new Error(`Failed to read file: ${path}`);
       }
-      const data = await res.json();
+      const data = await readJson<{ content: string }>(res);
       return data.content;
     },
 
@@ -272,7 +298,7 @@ export function createDevServerPlatform() {
      * @param {string} from
      * @param {string} to
      */
-    async renameFile(from: string, to: string) {
+    async renameFile(from: string, to: string): Promise<RenameResult> {
       const res = await fetch("/__studio/file/rename", {
         body: JSON.stringify({ from: serverPath(from), to: serverPath(to) }),
         headers: { "Content-Type": "application/json" },
@@ -281,6 +307,58 @@ export function createDevServerPlatform() {
       if (!res.ok) {
         throw new Error(`Failed to rename: ${from} → ${to}`);
       }
+      const report = await readJson<RenameResult>(res);
+      // Map server-root-relative report paths back to project-relative for the studio.
+      if (typeof report.from === "string") {
+        report.from = stripRoot(report.from);
+      }
+      if (typeof report.to === "string") {
+        report.to = stripRoot(report.to);
+      }
+      for (const f of report.references?.files ?? []) {
+        f.path = stripRoot(f.path);
+      }
+      for (const e of report.errors ?? []) {
+        e.path = stripRoot(e.path);
+      }
+      return report;
+    },
+
+    /**
+     * Subscribe to filesystem change events over the dev server's SSE stream. Listens for the named
+     * "fs" event (the preview iframe's default `onmessage` ignores it), strips paths to
+     * project-relative, and drops events for sibling projects outside the active root.
+     */
+    subscribeFileEvents(handler: (events: FsEvent[]) => void) {
+      if (typeof EventSource === "undefined") {
+        return () => {};
+      }
+      const es = new EventSource("/__reload");
+      es.addEventListener("fs", (ev: MessageEvent) => {
+        let payload: { events?: FsEvent[] };
+        try {
+          payload = JSON.parse(ev.data as string) as { events?: FsEvent[] };
+        } catch {
+          return;
+        }
+        const events: FsEvent[] = [];
+        for (const e of payload.events ?? []) {
+          const raw = e.path.replaceAll("\\", "/");
+          if (_projectRoot && raw !== _projectRoot && !raw.startsWith(`${_projectRoot}/`)) {
+            continue;
+          }
+          const path = stripRoot(raw);
+          if (path && !path.startsWith("..")) {
+            events.push({ isDir: e.isDir, path, type: e.type });
+          }
+        }
+        if (events.length > 0) {
+          handler(events);
+        }
+      });
+      return () => {
+        es.close();
+      };
     },
 
     /** @param {string} _path */
@@ -392,7 +470,7 @@ export function createDevServerPlatform() {
           method: "POST",
         });
         if (res.ok) {
-          const body = await res.json();
+          const body = await readJson<{ path?: string }>(res);
           return body.path || null;
         }
       } catch {}
@@ -412,7 +490,7 @@ export function createDevServerPlatform() {
       if (!res.ok) {
         return [];
       }
-      const entries = await res.json();
+      const entries = await readJson<WireDirEntry[]>(res);
       for (const e of entries) {
         e.path = stripRoot(e.path);
       }
@@ -427,7 +505,7 @@ export function createDevServerPlatform() {
       if (!res.ok) {
         return [];
       }
-      const body = await res.json();
+      const body = await readJson<{ formats?: unknown[] }>(res);
       return body.formats ?? [];
     },
 
@@ -442,7 +520,7 @@ export function createDevServerPlatform() {
         headers: { "Content-Type": "application/json" },
         method: "POST",
       });
-      const data = await res.json();
+      const data = await readJson<{ error?: string; result?: unknown }>(res);
       if (!res.ok) {
         throw new Error(data.error || "Format action failed");
       }
@@ -468,7 +546,7 @@ export function createDevServerPlatform() {
       if (!res.ok) {
         return null;
       }
-      const { schema } = await res.json();
+      const { schema } = await readJson<{ schema: unknown }>(res);
       return schema;
     },
 
@@ -508,7 +586,7 @@ export function createDevServerPlatform() {
         method: "POST",
       });
       if (!res.ok) {
-        const body = await res.json();
+        const body = await readJson<ErrorBody>(res);
         throw new Error(body.error);
       }
       return await res.json();
@@ -522,7 +600,7 @@ export function createDevServerPlatform() {
         method: "POST",
       });
       if (!res.ok) {
-        const body = await res.json();
+        const body = await readJson<ErrorBody>(res);
         throw new Error(body.error);
       }
       return await res.json();
@@ -536,7 +614,7 @@ export function createDevServerPlatform() {
         method: "POST",
       });
       if (!res.ok) {
-        const body = await res.json();
+        const body = await readJson<ErrorBody>(res);
         throw new Error(body.error);
       }
       return await res.json();
@@ -550,7 +628,7 @@ export function createDevServerPlatform() {
         method: "POST",
       });
       if (!res.ok) {
-        const body = await res.json();
+        const body = await readJson<ErrorBody>(res);
         throw new Error(body.error);
       }
       return await res.json();
@@ -559,7 +637,7 @@ export function createDevServerPlatform() {
     async gitPull() {
       const res = await fetch("/__studio/git/pull", { method: "POST" });
       if (!res.ok) {
-        const body = await res.json();
+        const body = await readJson<ErrorBody>(res);
         throw new Error(body.error);
       }
       return await res.json();
@@ -568,7 +646,7 @@ export function createDevServerPlatform() {
     async gitFetch() {
       const res = await fetch("/__studio/git/fetch", { method: "POST" });
       if (!res.ok) {
-        const body = await res.json();
+        const body = await readJson<ErrorBody>(res);
         throw new Error(body.error);
       }
       return await res.json();
@@ -582,7 +660,7 @@ export function createDevServerPlatform() {
         method: "POST",
       });
       if (!res.ok) {
-        const body = await res.json();
+        const body = await readJson<ErrorBody>(res);
         throw new Error(body.error);
       }
       return await res.json();
@@ -596,7 +674,7 @@ export function createDevServerPlatform() {
         method: "POST",
       });
       if (!res.ok) {
-        const body = await res.json();
+        const body = await readJson<ErrorBody>(res);
         throw new Error(body.error);
       }
       return await res.json();
@@ -621,7 +699,7 @@ export function createDevServerPlatform() {
       if (!res.ok) {
         throw new Error(await res.text());
       }
-      const data = await res.json();
+      const data = await readJson<{ content: string }>(res);
       return data.content;
     },
 
@@ -633,7 +711,7 @@ export function createDevServerPlatform() {
         method: "POST",
       });
       if (!res.ok) {
-        const body = await res.json();
+        const body = await readJson<ErrorBody>(res);
         throw new Error(body.error);
       }
       return await res.json();
@@ -647,7 +725,7 @@ export function createDevServerPlatform() {
         method: "POST",
       });
       if (!res.ok) {
-        const body = await res.json();
+        const body = await readJson<ErrorBody>(res);
         throw new Error(body.error);
       }
       return await res.json();
@@ -656,7 +734,7 @@ export function createDevServerPlatform() {
     async gitInit() {
       const res = await fetch("/__studio/git/init", { method: "POST" });
       if (!res.ok) {
-        const body = await res.json();
+        const body = await readJson<ErrorBody>(res);
         throw new Error(body.error);
       }
     },
@@ -672,7 +750,7 @@ export function createDevServerPlatform() {
         method: "POST",
       });
       if (!res.ok) {
-        const body = await res.json();
+        const body = await readJson<ErrorBody>(res);
         throw new Error(body.error);
       }
     },
@@ -692,7 +770,7 @@ export function createDevServerPlatform() {
         method: "POST",
       });
       if (!res.ok) {
-        const body = await res.json();
+        const body = await readJson<ErrorBody>(res);
         throw new Error(body.error);
       }
       return await res.json();
@@ -706,7 +784,7 @@ export function createDevServerPlatform() {
         method: "POST",
       });
       if (!res.ok) {
-        const body = await res.json();
+        const body = await readJson<ErrorBody>(res);
         throw new Error(body.error);
       }
       return await res.json();

package/src/reactivity.ts

@@ -26,3 +26,5 @@ export {
   isReactive,
   isRef,
 } from "@vue/reactivity";
+
+export type { EffectScope } from "@vue/reactivity";

package/src/services/cem-export.ts

@@ -2,11 +2,11 @@
 import type { CemParameter, JxMutableNode, JxStateObject } from "@jxsuite/schema/types";
 import { isFunctionDef, isJsonObject } from "@jxsuite/schema/guards";
 
-/** Collect slot elements from the document tree. */
+/** Collect slot elements from the document tree. Whitespace-only names count as unnamed. */
 export function collectSlots(node?: JxMutableNode | null, slots: string[] = []) {
   if (node?.tagName === "slot") {
     const name = node.attributes?.name;
-    slots.push(typeof name === "string" ? name : "");
+    slots.push(typeof name === "string" ? name.trim() : "");
   }
   if (Array.isArray(node?.children)) {
     for (const c of node.children) {
@@ -16,6 +16,27 @@ export function collectSlots(node?: JxMutableNode | null, slots: string[] = [])
   return slots;
 }
 
+/**
+ * Validate slot usage in a component definition. Returns a warning message or null when valid. Only
+ * static children are walked — slots inside $switch cases are mutually exclusive branches and are
+ * not counted (v1 limitation).
+ */
+export function validateComponentSlots(doc: JxMutableNode): string | null {
+  const names = collectSlots(doc);
+  const unnamed = names.filter((n) => n === "").length;
+  if (unnamed > 1) {
+    return `Component has ${unnamed} unnamed <slot> elements — only one default slot is allowed. Give extra slots a name attribute.`;
+  }
+  const seen = new Set<string>();
+  for (const n of names) {
+    if (n && seen.has(n)) {
+      return `Duplicate slot name "${n}" — slot names must be unique within a component.`;
+    }
+    seen.add(n);
+  }
+  return null;
+}
+
 /**
  * Generate and download a CEM 2.1.0 manifest for the current document.
  *

package/src/services/code-services.ts

@@ -43,8 +43,18 @@ export async function locateDocument(name: string) {
   return platform.locateFile(name);
 }
 
+/** Schema returned by a plugin's `$prototype` module (loose superset used across panels). */
+export interface PluginSchema {
+  type?: string;
+  description?: string;
+  properties?: Record<string, unknown>;
+  required?: string[];
+  returns?: { type?: string };
+  [key: string]: unknown;
+}
+
 /** Cache of plugin schemas keyed by "$src::$prototype". */
-export const pluginSchemaCache = new Map();
+export const pluginSchemaCache = new Map<string, PluginSchema | null>();
 
 /**
  * Fetch and cache the schema for a $prototype module via the server. Works for both external
@@ -77,7 +87,11 @@ export async function fetchPluginSchema(
     }
     const base =
       !importedPath && state.documentPath ? `${location.origin}/${state.documentPath}` : undefined;
-    const schema = await platform.fetchPluginSchema(src, def.$prototype, base);
+    const schema = (await platform.fetchPluginSchema(
+      src,
+      def.$prototype,
+      base,
+    )) as PluginSchema | null;
     pluginSchemaCache.set(cacheKey, schema);
     return schema;
   } catch {

package/src/services/monaco-setup.ts

@@ -18,11 +18,12 @@ const WORKER_PATHS: Record<string, string> = {
 
 self.MonacoEnvironment = {
   getWorker(_, label: string) {
-    const path = WORKER_PATHS[label] || WORKER_PATHS.editorWorkerService;
+    const path = WORKER_PATHS[label] || WORKER_PATHS.editorWorkerService!;
     return new Worker(path, { type: "module" });
   },
 };
 
+// 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,
   schemas: [