@jxsuite/studio 0.19.0 → 0.20.0

package/src/files/files.js

@@ -13,7 +13,7 @@ import { renderPopover } from "../ui/layers.js";
 import remarkDirective from "remark-directive";
 import { stringify as stringifyYaml } from "yaml";
 import { jxToMd } from "../markdown/md-convert.js";
-import { createState, projectState, setProjectState } from "../store.js";
+import { createState, projectState, setProjectState, requireProjectState } from "../store.js";
 import { getPlatform } from "../platform.js";
 import { statusMessage } from "../panels/statusbar.js";
 import { loadComponentRegistry } from "./components.js";
@@ -65,7 +65,7 @@ export async function loadProject() {
       name: info.isSiteProject ? info.projectConfig?.name || meta.name : meta.name,
       projectRoot: ".",
       isSiteProject: info.isSiteProject,
-      projectConfig: info.isSiteProject ? info.projectConfig : null,
+      projectConfig: (info.isSiteProject ? info.projectConfig : null) || null,
       projectDirs: info.directories || [],
       dirs: new Map(),
       expanded: new Set(),
@@ -105,7 +105,7 @@ export async function openProject({ renderActivityBar, renderLeftPanel }) {
     replaceAllTabs({ id: "initial", document: { tagName: "div", children: [] } });
 
     setProjectState({
-      ...projectState,
+      .../** @type {ProjectState} */ (projectState),
       projectRoot: handle.root,
       isSiteProject: true,
       projectConfig: config,
@@ -129,26 +129,26 @@ export async function openProject({ renderActivityBar, renderLeftPanel }) {
       "public",
       "styles",
     ];
-    const entries = projectState.dirs.get(".") || [];
+    const entries = requireProjectState().dirs.get(".") || [];
     const foundDirs = [];
     for (const e of entries) {
       if (e.type === "directory" && conventionalDirs.includes(e.name)) {
         foundDirs.push(e.name);
-        projectState.expanded.add(e.path || e.name);
+        requireProjectState().expanded.add(e.path || e.name);
         await loadDirectory(e.path || e.name);
       }
     }
-    projectState.projectDirs = foundDirs;
+    requireProjectState().projectDirs = foundDirs;
 
     view.leftTab = "files";
-    addRecentProject(projectState.name, projectState.projectRoot);
+    addRecentProject(requireProjectState().name, requireProjectState().projectRoot);
     renderActivityBar();
     renderLeftPanel();
-    statusMessage(`Opened project: ${projectState.name}`);
+    statusMessage(`Opened project: ${requireProjectState().name}`);
 
     await openHomePage();
-  } catch (/** @type {any} */ e) {
-    statusMessage(`Error: ${e.message}`);
+  } catch (/** @type {unknown} */ e) {
+    statusMessage(`Error: ${/** @type {Error} */ (e).message}`);
   }
 }
 
@@ -251,9 +251,9 @@ export function renderFilesTemplate({
           size="xs"
           label="Refresh"
           @click=${async () => {
-            projectState.dirs.clear();
+            requireProjectState().dirs.clear();
             await loadDirectory(".");
-            for (const dir of projectState.expanded) await loadDirectory(dir);
+            for (const dir of requireProjectState().expanded) await loadDirectory(dir);
             renderLeftPanel();
           }}
         >
@@ -264,9 +264,9 @@ export function renderFilesTemplate({
         size="s"
         quiet
         placeholder="Filter files…"
-        value=${projectState.searchQuery}
+        value=${requireProjectState().searchQuery}
         @input=${(/** @type {Event} */ e) => {
-          projectState.searchQuery = /** @type {HTMLInputElement} */ (e.target).value;
+          requireProjectState().searchQuery = /** @type {HTMLInputElement} */ (e.target).value;
           renderLeftPanel();
         }}
         @submit=${(/** @type {Event} */ e) => e.preventDefault()}
@@ -284,7 +284,7 @@ function renderTreeLevelTemplate(
   /** @type {number} */ depth,
   /** @type {{ openFileFn: (path: string) => void; renderLeftPanel: () => void }} */ ctx,
 ) {
-  const entries = projectState.dirs.get(dirPath);
+  const entries = requireProjectState().dirs.get(dirPath);
   if (!entries) {
     loadDirectory(dirPath).then(() => ctx.renderLeftPanel());
     return html`<div
@@ -301,15 +301,15 @@ function renderTreeLevelTemplate(
     return a.name.localeCompare(b.name);
   });
 
-  const query = projectState.searchQuery.toLowerCase();
+  const query = requireProjectState().searchQuery.toLowerCase();
   const filtered = query
     ? sorted.filter((e) => e.type === "directory" || e.name.toLowerCase().includes(query))
     : sorted;
 
   return filtered.map((entry) => {
     const isDir = entry.type === "directory";
-    const isExpanded = projectState.expanded.has(entry.path);
-    const isSelected = projectState.selectedPath === entry.path;
+    const isExpanded = requireProjectState().expanded.has(entry.path);
+    const isSelected = requireProjectState().selectedPath === entry.path;
 
     return html`
       <div
@@ -324,10 +324,10 @@ function renderTreeLevelTemplate(
         @click=${async (/** @type {MouseEvent} */ e) => {
           e.stopPropagation();
           if (isDir) {
-            if (isExpanded) projectState.expanded.delete(entry.path);
+            if (isExpanded) requireProjectState().expanded.delete(entry.path);
             else {
-              projectState.expanded.add(entry.path);
-              if (!projectState.dirs.has(entry.path)) await loadDirectory(entry.path);
+              requireProjectState().expanded.add(entry.path);
+              if (!requireProjectState().dirs.has(entry.path)) await loadDirectory(entry.path);
             }
             ctx.renderLeftPanel();
           } else {
@@ -372,8 +372,8 @@ export function setupTreeKeyboard(/** @type {HTMLElement} */ tree) {
       case "ArrowRight":
         if (focused.dataset.type === "directory") {
           const path = /** @type {string} */ (focused.dataset.path);
-          if (!projectState.expanded.has(path)) {
-            projectState.expanded.add(path);
+          if (!requireProjectState().expanded.has(path)) {
+            requireProjectState().expanded.add(path);
             loadDirectory(path).then(() => {
               const panel = tree.closest(".panel-body");
               if (panel)
@@ -386,9 +386,9 @@ export function setupTreeKeyboard(/** @type {HTMLElement} */ tree) {
         break;
       case "ArrowLeft":
         if (focused.dataset.type === "directory") {
-          const path = focused.dataset.path;
-          if (projectState.expanded.has(path)) {
-            projectState.expanded.delete(path);
+          const path = /** @type {string} */ (focused.dataset.path);
+          if (requireProjectState().expanded.has(path)) {
+            requireProjectState().expanded.delete(path);
             // renderLeftPanel will be called by the caller who sets up keyboard
           }
         }
@@ -497,15 +497,15 @@ async function createNewFile(dirPath = ".", /** @type {() => void} */ renderLeft
   const path = dirPath === "." ? name : `${dirPath}/${name}`;
   const content = name.endsWith(".md")
     ? "---\ntitle: Untitled\n---\n\n"
-    : JSON.stringify({ tagName: "div", children: [] }, null, 2);
+    : JSON.stringify({ tagName: "div", children: [{ tagName: "p", children: [] }] }, null, 2);
   try {
     const platform = getPlatform();
     await platform.writeFile(path, content);
     await loadDirectory(dirPath);
     renderLeftPanel();
     statusMessage(`Created ${path}`);
-  } catch (/** @type {any} */ e) {
-    statusMessage(`Error: ${e.message}`);
+  } catch (/** @type {unknown} */ e) {
+    statusMessage(`Error: ${/** @type {Error} */ (e).message}`);
   }
 }
 
@@ -524,13 +524,13 @@ async function renameFile(
     const platform = getPlatform();
     await platform.renameFile(entry.path, newPath);
     await loadDirectory(parentDir);
-    if (projectState.selectedPath === entry.path) {
-      projectState.selectedPath = newPath;
+    if (requireProjectState().selectedPath === entry.path) {
+      requireProjectState().selectedPath = newPath;
     }
     renderLeftPanel();
     statusMessage(`Renamed to ${newName}`);
-  } catch (/** @type {any} */ e) {
-    statusMessage(`Error: ${e.message}`);
+  } catch (/** @type {unknown} */ e) {
+    statusMessage(`Error: ${/** @type {Error} */ (e).message}`);
   }
 }
 
@@ -545,13 +545,13 @@ async function deleteFile(
     const delPath = entry.path.replaceAll("\\", "/");
     const parentDir = delPath.includes("/") ? delPath.substring(0, delPath.lastIndexOf("/")) : ".";
     await loadDirectory(parentDir);
-    if (projectState.selectedPath === entry.path) {
-      projectState.selectedPath = null;
+    if (requireProjectState().selectedPath === entry.path) {
+      requireProjectState().selectedPath = null;
     }
     renderLeftPanel();
     statusMessage(`Deleted ${entry.name}`);
-  } catch (/** @type {any} */ e) {
-    statusMessage(`Error: ${e.message}`);
+  } catch (/** @type {unknown} */ e) {
+    statusMessage(`Error: ${/** @type {Error} */ (e).message}`);
   }
 }
 
@@ -561,10 +561,10 @@ async function deleteFile(
  * Open a file from the file tree — auto-saves current dirty doc, then loads the new one.
  *
  * @param {{
- *   S: any;
- *   commit: (s: any) => void;
+ *   S: import("../state.js").StudioState;
+ *   commit: (s: import("../state.js").StudioState) => void;
  *   render: () => void;
- *   loadMarkdown: (source: string, handle: any) => void;
+ *   loadMarkdown: (source: string, handle: unknown) => void;
  * }} ctx
  * @param {string} path
  */
@@ -576,11 +576,11 @@ export async function openFileFromTree(ctx, path) {
       const isContent = ctx.S.mode === "content";
       let output;
       if (isContent) {
-        const mdast = jxToMd(ctx.S.document);
+        const mdast = jxToMd(/** @type {JxElement} */ (ctx.S.document));
         const md = unified()
           .use(remarkDirective)
           .use(remarkStringify, { bullet: "-", emphasis: "*", strong: "*" })
-          .stringify(mdast);
+          .stringify(/** @type {import("mdast").Root} */ (/** @type {unknown} */ (mdast)));
         const fm = ctx.S.content?.frontmatter;
         const hasFrontmatter = fm && Object.keys(fm).length > 0;
         output = hasFrontmatter ? `---\n${stringifyYaml(fm).trim()}\n---\n\n${md}` : md;
@@ -588,8 +588,8 @@ export async function openFileFromTree(ctx, path) {
         output = JSON.stringify(ctx.S.document, null, 2);
       }
       await platform.writeFile(ctx.S.documentPath, output);
-    } catch (/** @type {any} */ e) {
-      statusMessage(`Save error: ${e.message}`);
+    } catch (/** @type {unknown} */ e) {
+      statusMessage(`Save error: ${/** @type {Error} */ (e).message}`);
     }
   }
 
@@ -612,12 +612,12 @@ export async function openFileFromTree(ctx, path) {
     }
 
     // Update tree selection
-    projectState.selectedPath = path;
+    requireProjectState().selectedPath = path;
 
     ctx.render();
     statusMessage(`Opened ${path}`);
-  } catch (/** @type {any} */ e) {
-    statusMessage(`Error: ${e.message}`);
+  } catch (/** @type {unknown} */ e) {
+    statusMessage(`Error: ${/** @type {Error} */ (e).message}`);
   }
 }
 
@@ -630,7 +630,7 @@ export async function openFileInTab(path) {
   for (const [id, tab] of workspace.tabs.entries()) {
     if (tab.documentPath === path) {
       activateTab(id);
-      projectState.selectedPath = path;
+      requireProjectState().selectedPath = path;
       return;
     }
   }
@@ -657,9 +657,8 @@ export async function openFileInTab(path) {
       frontmatter,
       sourceFormat: path.endsWith(".md") ? "md" : null,
     });
-    projectState.selectedPath = path;
+    requireProjectState().selectedPath = path;
     trackRecentFile({ path, name: path.split("/").pop() || path });
-    view.leftTab = "layers";
 
     if (path === "project.json") {
       const tab = activeTab.value;
@@ -667,7 +666,34 @@ export async function openFileInTab(path) {
     }
 
     statusMessage(`Opened ${path.split("/").pop()}`);
-  } catch (/** @type {any} */ e) {
-    statusMessage(`Error: ${e.message}`);
+  } catch (/** @type {unknown} */ e) {
+    statusMessage(`Error: ${/** @type {Error} */ (e).message}`);
+  }
+}
+
+/**
+ * Reload an already-open tab from disk without changing the active tab. Used to refresh after AI
+ * assistant writes to a file.
+ *
+ * @param {string} path
+ */
+export async function reloadFileInTab(path) {
+  for (const [, tab] of workspace.tabs.entries()) {
+    if (tab.documentPath === path) {
+      const platform = getPlatform();
+      try {
+        const content = await platform.readFile(path);
+        if (!content) return;
+        if (path.endsWith(".md")) {
+          const { document, frontmatter } = await loadMarkdown(content);
+          tab.doc.document = document;
+          tab.doc.content.frontmatter = frontmatter;
+        } else {
+          tab.doc.document = JSON.parse(content);
+        }
+        tab.doc.dirty = false;
+      } catch {}
+      return;
+    }
   }
 }

package/src/github/github-auth.js

@@ -0,0 +1,122 @@
+/**
+ * GitHub OAuth Device Flow authentication for Jx Studio.
+ *
+ * Uses the Device Flow so the user authenticates in their browser without needing a server-side
+ * redirect endpoint.
+ */
+
+import { html } from "lit-html";
+import { showDialog } from "../ui/layers.js";
+
+const CLIENT_ID = "Ov23liYVlMFpgjOEPXJH";
+const STORAGE_KEY = "jx_github_token";
+
+export function getGithubToken() {
+  return localStorage.getItem(STORAGE_KEY);
+}
+
+export function clearGithubToken() {
+  localStorage.removeItem(STORAGE_KEY);
+}
+
+/**
+ * Authenticate with GitHub via the Device Flow. Shows a dialog with the user code and polls until
+ * the user completes authorization or cancels.
+ *
+ * @returns {Promise<string | null>} The access token, or null if cancelled.
+ */
+export async function authenticateGithub() {
+  const existing = getGithubToken();
+  if (existing) return existing;
+
+  const codeRes = await fetch("https://github.com/login/device/code", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json",
+    },
+    body: JSON.stringify({ client_id: CLIENT_ID, scope: "repo" }),
+  });
+
+  if (!codeRes.ok) throw new Error("Failed to initiate GitHub device flow");
+  const codeData = await codeRes.json();
+
+  const { device_code, user_code, verification_uri, interval = 5 } = codeData;
+
+  return showDialog((done) => {
+    let cancelled = false;
+    /** @type {ReturnType<typeof setTimeout> | null} */
+    let pollTimer = null;
+
+    const poll = async () => {
+      if (cancelled) return;
+      try {
+        const tokenRes = await fetch("https://github.com/login/oauth/access_token", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Accept: "application/json",
+          },
+          body: JSON.stringify({
+            client_id: CLIENT_ID,
+            device_code,
+            grant_type: "urn:ietf:params:oauth:grant-type:device_code",
+          }),
+        });
+        const tokenData = await tokenRes.json();
+
+        if (tokenData.access_token) {
+          localStorage.setItem(STORAGE_KEY, tokenData.access_token);
+          done(tokenData.access_token);
+          return;
+        }
+
+        if (tokenData.error === "authorization_pending") {
+          pollTimer = setTimeout(poll, interval * 1000);
+          return;
+        }
+
+        if (tokenData.error === "slow_down") {
+          pollTimer = setTimeout(poll, (interval + 5) * 1000);
+          return;
+        }
+
+        // expired_token or access_denied
+        done(null);
+      } catch {
+        pollTimer = setTimeout(poll, interval * 1000);
+      }
+    };
+
+    pollTimer = setTimeout(poll, interval * 1000);
+
+    return html`
+      <sp-dialog-wrapper
+        open
+        headline="Sign in to GitHub"
+        cancel-label="Cancel"
+        @cancel=${() => {
+          cancelled = true;
+          if (pollTimer) clearTimeout(pollTimer);
+          done(null);
+        }}
+        @close=${() => {
+          cancelled = true;
+          if (pollTimer) clearTimeout(pollTimer);
+          done(null);
+        }}
+      >
+        <div class="github-auth-dialog">
+          <p>Enter this code on GitHub to authorize Jx Studio:</p>
+          <div class="github-auth-code">${user_code}</div>
+          <p>
+            <a href="${verification_uri}" target="_blank" rel="noopener"
+              >Open ${verification_uri}</a
+            >
+          </p>
+          <p class="github-auth-waiting">Waiting for authorization…</p>
+        </div>
+      </sp-dialog-wrapper>
+    `;
+  });
+}

package/src/github/github-publish.js

@@ -0,0 +1,115 @@
+/** Publish a local project to GitHub — creates a new repo and pushes. */
+
+import { html } from "lit-html";
+import { showDialog } from "../ui/layers.js";
+import { authenticateGithub } from "./github-auth.js";
+import { getPlatform } from "../platform.js";
+import { refreshGitStatus } from "../panels/git-panel.js";
+import { statusMessage } from "../panels/statusbar.js";
+
+/**
+ * Full "Publish to GitHub" flow: 1. Authenticate (or reuse stored token) 2. Prompt for repo name /
+ * visibility 3. Create the repo via GitHub API 4. Add remote + push
+ *
+ * @param {{ projectName: string }} opts
+ * @returns {Promise<boolean>} True if published successfully
+ */
+export async function publishToGithub({ projectName }) {
+  const token = await authenticateGithub();
+  if (!token) return false;
+
+  const repoOpts = await showDialog((done) => {
+    return html`
+      <sp-dialog-wrapper
+        open
+        headline="Publish to GitHub"
+        confirm-label="Create Repository"
+        cancel-label="Cancel"
+        @confirm=${(/** @type {Event} */ e) => {
+          const dialog = /** @type {HTMLElement} */ (e.target);
+          const nameInput = /** @type {HTMLInputElement | null} */ (
+            dialog.querySelector('[name="repo-name"]')
+          );
+          const descInput = /** @type {HTMLInputElement | null} */ (
+            dialog.querySelector('[name="repo-desc"]')
+          );
+          const privateToggle = /** @type {HTMLInputElement | null} */ (
+            dialog.querySelector('[name="repo-private"]')
+          );
+          done({
+            name: nameInput?.value || projectName,
+            description: descInput?.value || "",
+            isPrivate: privateToggle?.checked ?? true,
+          });
+        }}
+        @cancel=${() => done(null)}
+        @close=${() => done(null)}
+      >
+        <div class="github-publish-dialog">
+          <sp-field-label for="repo-name">Repository name</sp-field-label>
+          <sp-textfield
+            id="repo-name"
+            name="repo-name"
+            value="${projectName}"
+            placeholder="my-project"
+          ></sp-textfield>
+
+          <sp-field-label for="repo-desc">Description (optional)</sp-field-label>
+          <sp-textfield
+            id="repo-desc"
+            name="repo-desc"
+            placeholder="A brief description"
+          ></sp-textfield>
+
+          <sp-field-label>Visibility</sp-field-label>
+          <sp-switch name="repo-private" checked>Private repository</sp-switch>
+        </div>
+      </sp-dialog-wrapper>
+    `;
+  });
+
+  if (!repoOpts) return false;
+
+  statusMessage("Creating GitHub repository…");
+
+  const createRes = await fetch("https://api.github.com/user/repos", {
+    method: "POST",
+    headers: {
+      Authorization: `Bearer ${token}`,
+      Accept: "application/vnd.github+json",
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      name: repoOpts.name,
+      description: repoOpts.description,
+      private: repoOpts.isPrivate,
+      auto_init: false,
+    }),
+  });
+
+  if (!createRes.ok) {
+    const err = await createRes.json();
+    const msg = err.errors?.[0]?.message || err.message || "Failed to create repository";
+    statusMessage(`Error: ${msg}`);
+    return false;
+  }
+
+  const repo = await createRes.json();
+  const platform = getPlatform();
+
+  statusMessage("Setting remote and pushing…");
+
+  await platform.gitAddRemote("origin", repo.clone_url);
+
+  statusMessage("Pushing to GitHub…");
+  try {
+    await platform.gitPush({ setUpstream: true });
+  } catch (/** @type {unknown} */ e) {
+    statusMessage(`Push failed: ${/** @type {Error} */ (e).message}`);
+    return false;
+  }
+
+  await refreshGitStatus();
+  statusMessage(`Published to GitHub: ${repo.html_url}`);
+  return true;
+}