@jxsuite/studio 0.19.0 → 0.20.0

package/src/panels/welcome-screen.js

@@ -0,0 +1,121 @@
+/**
+ * Welcome screen — shown when no project is loaded and no document tabs are open. Mimics VS Code's
+ * welcome tab with start actions and recent projects.
+ */
+
+import { html, render as litRender, nothing } from "lit-html";
+import { getRecentProjects } from "../recent-projects.js";
+import { platformSupportsClone } from "./git-panel.js";
+
+/**
+ * @typedef {{
+ *   openProject: () => void;
+ *   openRecentProject: (root: string) => void;
+ *   openNewProject: () => void;
+ *   cloneRepository: () => void;
+ * }} WelcomeCtx
+ */
+
+/** @type {WelcomeCtx | null} */
+let _ctx = null;
+
+/** @param {WelcomeCtx} ctx */
+export function initWelcome(ctx) {
+  _ctx = ctx;
+}
+
+/** @param {HTMLElement} host */
+export function renderWelcome(host) {
+  const ctx = /** @type {WelcomeCtx} */ (_ctx);
+  const recent = getRecentProjects();
+  const showClone = platformSupportsClone();
+
+  litRender(
+    html`
+      <div class="welcome-screen">
+        <div class="welcome-content">
+          <h1 class="welcome-title">Jx Studio</h1>
+          <p class="welcome-subtitle">Visual component builder</p>
+
+          <div class="welcome-section">
+            <h2 class="welcome-section-title">Start</h2>
+            <button class="welcome-action" @click=${() => ctx.openNewProject()}>
+              <svg
+                class="welcome-action-icon"
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                fill="currentColor"
+              >
+                <path
+                  d="M9.5 1.1l3.4 3.5.1.4v2h-1V6H8.5L8 5.5V2H3.5l-.5.5v11l.5.5H6v1H3.5l-1.5-1.5v-11l1.5-1.5h5.7l.3.1zM9 2v3h2.9L9 2zm4 14h-1v-3H9v-1h3V9h1v3h3v1h-3v3z"
+                />
+              </svg>
+              New Project...
+            </button>
+            <button class="welcome-action" @click=${() => ctx.openProject()}>
+              <svg
+                class="welcome-action-icon"
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                fill="currentColor"
+              >
+                <path
+                  d="M14.5 3H7.71l-.85-.85L6.51 2h-5l-.5.5v11l.5.5h13l.5-.5v-10L14.5 3zm-.51 8.49V13h-12V7h4.49l.35-.15.86-.86H14v5.5zM6.51 6l-.35.15-.86.86H2v-3h4.29l.85.85.36.15H14V6H6.51z"
+                />
+              </svg>
+              Open Project...
+            </button>
+            ${showClone
+              ? html`<button class="welcome-action" @click=${() => ctx.cloneRepository()}>
+                  <svg
+                    class="welcome-action-icon"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    fill="currentColor"
+                  >
+                    <path
+                      d="M4.7 12.3a4.2 4.2 0 0 1-1.2-1.7A4.4 4.4 0 0 1 3 8.9a4 4 0 0 1 .3-1.5 3.8 3.8 0 0 1 .8-1.3c.4-.4.8-.7 1.3-.9.5-.2 1-.4 1.6-.4V3l3.5 2.5L7 8V6.2c-.9.1-1.6.5-2.1 1.1a3 3 0 0 0-.8 2.1c0 .4.1.8.2 1.2.1.3.3.7.5 1l-.1.7zM11 6.9c.9-.1 1.6-.5 2.1-1.1a3 3 0 0 0 .8-2.1 3 3 0 0 0-.2-1.2 3.5 3.5 0 0 0-.5-1l.1-.7a4.2 4.2 0 0 1 1.2 1.7c.3.5.4 1.1.4 1.7a4 4 0 0 1-.3 1.5 3.8 3.8 0 0 1-.8 1.3c-.4.4-.8.7-1.3.9-.5.2-1 .4-1.6.4V11L7.5 8.5 11 6v.9z"
+                    />
+                  </svg>
+                  Clone Git Repository...
+                </button>`
+              : nothing}
+          </div>
+
+          ${recent.length > 0
+            ? html`
+                <div class="welcome-section">
+                  <h2 class="welcome-section-title">Recent</h2>
+                  ${recent.map(
+                    (p) => html`
+                      <button
+                        class="welcome-recent"
+                        @click=${() => ctx.openRecentProject(p.root)}
+                        title=${p.root}
+                      >
+                        <span class="welcome-recent-name">${p.name}</span>
+                        <span class="welcome-recent-path">${shortenPath(p.root)}</span>
+                      </button>
+                    `,
+                  )}
+                </div>
+              `
+            : nothing}
+        </div>
+      </div>
+    `,
+    host,
+  );
+}
+
+/** @param {string} path */
+function shortenPath(path) {
+  if (path.startsWith("/home/")) {
+    const parts = path.split("/");
+    return "~/" + parts.slice(3).join("/");
+  }
+  return path;
+}

package/src/platform.js

@@ -11,10 +11,8 @@
  * See spec/desktop.md §3 for the full StudioPlatform interface.
  */
 
-/** @typedef {Record<string, any>} StudioPlatform */
-
-/** @type {any} */
-const g = globalThis;
+/** @type {{ __jxPlatform?: StudioPlatform }} */
+const g = /** @type {{ __jxPlatform?: StudioPlatform }} */ (/** @type {unknown} */ (globalThis));
 
 /** @param {StudioPlatform} platform */
 export function registerPlatform(platform) {

package/src/platforms/devserver.js

@@ -79,10 +79,13 @@ export function createDevServerPlatform() {
 
       let dirHandle;
       try {
-        dirHandle = await /** @type {any} */ (window).showDirectoryPicker({ mode: "readwrite" });
-      } catch (/** @type {any} */ e) {
+        dirHandle =
+          await /** @type {{ showDirectoryPicker(opts: { mode: string }): Promise<FileSystemDirectoryHandle> }} */ (
+            window
+          ).showDirectoryPicker({ mode: "readwrite" });
+      } catch (/** @type {unknown} */ e) {
         // User cancelled the picker
-        if (e.name === "AbortError") return null;
+        if (/** @type {Error} */ (e).name === "AbortError") return null;
         throw e;
       }
 
@@ -102,7 +105,8 @@ export function createDevServerPlatform() {
       if (!sitesRes.ok) throw new Error("Failed to fetch site list from server");
       const sites = await sitesRes.json();
       const match = sites.find(
-        /** @param {any} s */ (s) => JSON.stringify(s.config) === JSON.stringify(config),
+        /** @param {{ config: unknown; path: string }} s */ (s) =>
+          JSON.stringify(s.config) === JSON.stringify(config),
       );
 
       if (!match) {
@@ -149,6 +153,30 @@ export function createDevServerPlatform() {
       }
     },
 
+    // ─── Project creation ─────────────────────────────────────────────────
+
+    /**
+     * @param {{
+     *   name: string;
+     *   description?: string;
+     *   url?: string;
+     *   adapter?: string;
+     *   directory: string;
+     * }} opts
+     */
+    async createProject(opts) {
+      const res = await fetch("/__studio/create-project", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(opts),
+      });
+      if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.error || "Failed to create project");
+      }
+      return await res.json();
+    },
+
     // ─── File operations ──────────────────────────────────────────────────
 
     /** @param {string} dir */
@@ -270,7 +298,7 @@ export function createDevServerPlatform() {
 
     /**
      * @param {string} action
-     * @param {any} payload
+     * @param {unknown} payload
      */
     async codeService(action, payload) {
       try {
@@ -399,8 +427,13 @@ export function createDevServerPlatform() {
       return await res.json();
     },
 
-    async gitPush() {
-      const res = await fetch("/__studio/git/push", { method: "POST" });
+    /** @param {{ setUpstream?: boolean }} [opts] */
+    async gitPush(opts) {
+      const res = await fetch("/__studio/git/push", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(opts || {}),
+      });
       if (!res.ok) throw new Error((await res.json()).error);
       return await res.json();
     },
@@ -466,5 +499,78 @@ export function createDevServerPlatform() {
       if (!res.ok) throw new Error((await res.json()).error);
       return await res.json();
     },
+
+    /** @param {string} url */
+    async gitClone(url) {
+      const res = await fetch("/__studio/git/clone", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ url }),
+      });
+      if (!res.ok) throw new Error((await res.json()).error);
+      return await res.json();
+    },
+
+    async gitInit() {
+      const res = await fetch("/__studio/git/init", { method: "POST" });
+      if (!res.ok) throw new Error((await res.json()).error);
+    },
+
+    /**
+     * @param {string} name
+     * @param {string} url
+     */
+    async gitAddRemote(name, url) {
+      const res = await fetch("/__studio/git/add-remote", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ name, url }),
+      });
+      if (!res.ok) throw new Error((await res.json()).error);
+    },
+
+    // ─── AI Assistant ───────────────────────────────────
+
+    async aiAuthStatus() {
+      const res = await fetch("/__studio/ai/auth-status");
+      return await res.json();
+    },
+
+    /** @param {{ message: string; systemPrompt?: string }} opts */
+    async aiCreateSession(opts) {
+      const res = await fetch("/__studio/ai/session", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(opts),
+      });
+      if (!res.ok) throw new Error((await res.json()).error);
+      return await res.json();
+    },
+
+    /** @param {string} id @param {string} message */
+    async aiSendMessage(id, message) {
+      const res = await fetch(`/__studio/ai/session/${id}/message`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ message }),
+      });
+      if (!res.ok) throw new Error((await res.json()).error);
+      return await res.json();
+    },
+
+    /** @param {string} id */
+    aiStreamUrl(id) {
+      return `/__studio/ai/session/${id}/stream`;
+    },
+
+    /** @param {string} id */
+    async aiStopSession(id) {
+      await fetch(`/__studio/ai/session/${id}/stop`, { method: "POST" });
+    },
+
+    /** @param {string} id */
+    async aiDeleteSession(id) {
+      await fetch(`/__studio/ai/session/${id}`, { method: "DELETE" });
+    },
   };
 }

package/src/resize-edges.js

@@ -0,0 +1,98 @@
+/**
+ * @type {{
+ *   __jxPlatform?: {
+ *     windowControls?: {
+ *       getFrame: () => Promise<{ x: number; y: number; width: number; height: number }>;
+ *       setFrame: (x: number, y: number, w: number, h: number) => void;
+ *     };
+ *   };
+ * }}
+ */
+const g = /** @type {any} */ (globalThis);
+
+const EDGES = [
+  "top",
+  "bottom",
+  "left",
+  "right",
+  "top-left",
+  "top-right",
+  "bottom-left",
+  "bottom-right",
+];
+
+const MIN_WIDTH = 400;
+const MIN_HEIGHT = 300;
+
+let mounted = false;
+
+export function mountResizeEdges() {
+  const wc = g.__jxPlatform?.windowControls;
+  if (!wc || !wc.getFrame || mounted) return;
+  mounted = true;
+
+  const container = document.createElement("div");
+  container.id = "resize-edges";
+
+  for (const edge of EDGES) {
+    const el = document.createElement("div");
+    el.className = `resize-edge ${edge}`;
+    el.addEventListener("mousedown", (e) => startResize(e, edge, wc));
+    container.appendChild(el);
+  }
+
+  document.body.appendChild(container);
+}
+
+/**
+ * @param {MouseEvent} e
+ * @param {string} edge
+ * @param {{
+ *   getFrame: () => Promise<{ x: number; y: number; width: number; height: number }>;
+ *   setFrame: (x: number, y: number, w: number, h: number) => void;
+ * }} wc
+ */
+async function startResize(e, edge, wc) {
+  e.preventDefault();
+  e.stopPropagation();
+
+  const startX = e.screenX;
+  const startY = e.screenY;
+  const frame = await wc.getFrame();
+  const startFrame = { ...frame };
+
+  /** @param {MouseEvent} me */
+  function onMove(me) {
+    const dx = me.screenX - startX;
+    const dy = me.screenY - startY;
+
+    let { x, y, width, height } = startFrame;
+
+    if (edge.includes("right")) {
+      width = Math.max(MIN_WIDTH, width + dx);
+    }
+    if (edge.includes("left")) {
+      const newW = Math.max(MIN_WIDTH, width - dx);
+      x = x + (width - newW);
+      width = newW;
+    }
+    if (edge.includes("bottom")) {
+      height = Math.max(MIN_HEIGHT, height + dy);
+    }
+    if (edge.includes("top")) {
+      const newH = Math.max(MIN_HEIGHT, height - dy);
+      y = y + (height - newH);
+      height = newH;
+    }
+
+    wc.setFrame(x, y, width, height);
+  }
+
+  function onUp() {
+    document.removeEventListener("mousemove", onMove);
+    document.removeEventListener("mouseup", onUp);
+  }
+
+  document.addEventListener("mousemove", onMove);
+  document.addEventListener("mouseup", onUp);
+}

package/src/services/cem-export.js

@@ -1,21 +1,26 @@
 /** Collect slot elements from the document tree. */
-export function collectSlots(/** @type {any} */ node, /** @type {any} */ slots = []) {
+export function collectSlots(
+  /** @type {JxMutableNode | null | undefined} */ node,
+  /** @type {string[]} */ slots = [],
+) {
   if (node?.tagName === "slot") {
     slots.push(node.attributes?.name || "");
   }
   if (Array.isArray(node?.children))
-    node.children.forEach((/** @type {any} */ c) => collectSlots(c, slots));
+    node.children.forEach((/** @type {JxMutableNode | string} */ c) =>
+      collectSlots(typeof c === "string" ? undefined : c, slots),
+    );
   return slots;
 }
 
 /**
  * Generate and download a CEM 2.1.0 manifest for the current document.
  *
- * @param {any} S - Studio state
+ * @param {{ document: JxMutableNode }} S - Studio state
  * @param {{
- *   defCategory: (d: any) => string;
- *   normParam: (p: any) => any;
- *   collectCssParts: (node: any) => any[];
+ *   defCategory: (d: unknown) => string;
+ *   normParam: (p: unknown) => unknown;
+ *   collectCssParts: (node: JxMutableNode) => { name: string }[];
  * }} helpers
  */
 export function exportCemManifest(S, helpers) {
@@ -83,7 +88,7 @@ export function exportCemManifest(S, helpers) {
 
   // Slots
   const slotNames = collectSlots(doc);
-  const slots = slotNames.map((/** @type {any} */ name) => ({
+  const slots = slotNames.map((/** @type {string} */ name) => ({
     name: name || "",
     ...(name ? {} : { description: "Default slot" }),
   }));

package/src/services/code-services.js

@@ -5,8 +5,8 @@ import { getNodeAtPath } from "../store.js";
 import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js";
 
 /**
- * @param {any} action
- * @param {any} payload
+ * @param {string} action
+ * @param {unknown} payload
  */
 export async function codeService(action, payload) {
   const platform = getPlatform();
@@ -17,7 +17,7 @@ export async function codeService(action, payload) {
 /**
  * Ask the server to locate a document by filename within the project root.
  *
- * @param {any} name
+ * @param {string} name
  */
 export async function locateDocument(name) {
   const platform = getPlatform();
@@ -31,8 +31,8 @@ export const pluginSchemaCache = new Map();
 /**
  * Fetch and cache the schema for an external $prototype + $src module via the server.
  *
- * @param {any} def
- * @param {any} state
+ * @param {{ $src?: string; $prototype?: string }} def
+ * @param {{ documentPath?: string }} state
  */
 export async function fetchPluginSchema(def, state) {
   if (!def.$src || !def.$prototype) return null;
@@ -56,8 +56,19 @@ export async function fetchPluginSchema(def, state) {
 }
 
 /**
- * @param {any} editor
- * @param {any[]} diagnostics
+ * @typedef {{
+ *   severity: string;
+ *   message: string;
+ *   help?: string;
+ *   code?: string;
+ *   url?: string;
+ *   labels?: { span: { line: number; column: number; length?: number } }[];
+ * }} OxLintDiagnostic
+ */
+
+/**
+ * @param {import("monaco-editor").editor.IStandaloneCodeEditor} editor
+ * @param {OxLintDiagnostic[]} diagnostics
  */
 export function setLintMarkers(editor, diagnostics) {
   const model = editor.getModel();
@@ -80,19 +91,26 @@ export function setLintMarkers(editor, diagnostics) {
       };
     })
     .filter(Boolean);
-  monaco.editor.setModelMarkers(model, "oxlint", /** @type {any} */ (markers));
+  monaco.editor.setModelMarkers(
+    model,
+    "oxlint",
+    /** @type {import("monaco-editor").editor.IMarkerData[]} */ (markers),
+  );
 }
 
 /**
- * @param {any} editing
- * @param {any} document
+ * @param {{ type: string; defName?: string; path?: JxPath; eventKey?: string }} editing
+ * @param {JxMutableNode | null | undefined} document
  */
 export function getFunctionArgs(editing, document) {
   if (editing.type === "def") {
-    return document?.state?.[editing.defName]?.parameters || ["state", "event"];
+    const defName = editing.defName;
+    return (defName && document?.state?.[defName]?.parameters) || ["state", "event"];
   } else if (editing.type === "event") {
+    if (!document || !editing.path) return ["state", "event"];
     const node = getNodeAtPath(document, editing.path);
-    return node?.[editing.eventKey]?.parameters || ["state", "event"];
+    const eventKey = editing.eventKey;
+    return (eventKey && node?.[eventKey]?.parameters) || ["state", "event"];
   }
   return ["state", "event"];
 }

package/src/settings/content-types-editor.js

@@ -29,7 +29,7 @@ let newContentTypeName = "";
 
 async function saveProjectConfig() {
   const platform = getPlatform();
-  const config = /** @type {any} */ (projectState).projectConfig;
+  const config = /** @type {{ projectConfig: ProjectConfig }} */ (projectState).projectConfig;
   await platform.writeFile("project.json", JSON.stringify(config, null, "\t"));
 }
 
@@ -138,7 +138,7 @@ function handleRenameField(oldName, newName, rerender) {
   const schema = getSelectedSchema();
   if (!schema?.properties || !newName || schema.properties[newName]) return;
 
-  /** @type {Record<string, any>} */
+  /** @type {Record<string, unknown>} */
   const newProps = {};
   for (const [key, val] of Object.entries(schema.properties)) {
     newProps[key === oldName ? newName : key] = val;
@@ -276,7 +276,7 @@ function handleRenameNested(parentName, oldChild, newChild, rerender) {
   const parent = schema?.properties?.[parentName];
   if (!parent?.properties || !newChild || parent.properties[newChild]) return;
 
-  /** @type {Record<string, any>} */
+  /** @type {Record<string, unknown>} */
   const newProps = {};
   for (const [key, val] of Object.entries(parent.properties)) {
     newProps[key === oldChild ? newChild : key] = val;
@@ -382,10 +382,10 @@ export function renderContentTypesEditor(container) {
                 size="s"
                 placeholder="content-type-name"
                 .value=${newContentTypeName}
-                @input=${(/** @type {any} */ e) => {
-                  newContentTypeName = e.target.value;
+                @input=${(/** @type {Event} */ e) => {
+                  newContentTypeName = /** @type {HTMLInputElement} */ (e.target).value;
                 }}
-                @keydown=${(/** @type {any} */ e) => {
+                @keydown=${(/** @type {KeyboardEvent} */ e) => {
                   if (e.key === "Enter") handleNewContentType(rerender);
                   if (e.key === "Escape") {
                     showNewContentType = false;
@@ -445,7 +445,7 @@ export function renderContentTypesEditor(container) {
       ([name, def]) =>
         fieldCardTpl(
           name,
-          /** @type {any} */ (def),
+          /** @type {import("./schema-field-ui.js").SchemaProperty} */ (def),
           required.includes(name),
           handlers,
           contentTypeNames,