@jxsuite/studio 0.23.1 → 0.24.0

package/src/panels/{git-panel.js → git-panel.ts}

@@ -1,3 +1,4 @@
+/// <reference lib="dom" />
 /**
  * Git panel — Source control sidebar with sync status, branch selector, Local Changes / History
  * tabs, commit form, and changed-components view.
@@ -6,13 +7,44 @@
 import { html, nothing } from "lit-html";
 import { live } from "lit-html/directives/live.js";
 import { repeat } from "lit-html/directives/repeat.js";
-import { getPlatform } from "../platform.js";
-import { updateUi, renderOnly, projectState } from "../store.js";
-import { activeTab } from "../workspace/workspace.js";
-import { view } from "../view.js";
-import { showDialog, showConfirmDialog } from "../ui/layers.js";
-import { statusMessage } from "./statusbar.js";
-import { publishToGithub } from "../github/github-publish.js";
+import { getPlatform } from "../platform";
+import { updateUi, renderOnly, projectState } from "../store";
+import { activeTab } from "../workspace/workspace";
+import { view } from "../view";
+import { showDialog, showConfirmDialog } from "../ui/layers";
+import { statusMessage } from "./statusbar";
+import { publishToGithub } from "../github/github-publish";
+import type { StudioPlatform } from "../types";
+
+interface GitFileEntry {
+  path: string;
+  status: string;
+  staged: boolean;
+}
+
+interface GitLogEntry {
+  hash: string;
+  message: string;
+  author: string;
+  date: string;
+}
+
+interface GitUiState {
+  gitStatus?: {
+    files?: GitFileEntry[];
+    branch?: string;
+    ahead?: number;
+    behind?: number;
+    isRepo?: boolean;
+    remotes?: string[];
+  } | null;
+  gitBranches?: { current?: string; branches?: string[] } | null;
+  gitLoading?: boolean;
+  gitError?: string | null;
+  gitCommitMessage?: string;
+  gitLogEntries?: GitLogEntry[] | null;
+  [key: string]: unknown;
+}
 
 export async function refreshGitStatus() {
   if (!projectState) return;
@@ -24,8 +56,8 @@ export async function refreshGitStatus() {
     updateUi("gitStatus", status);
     updateUi("gitBranches", branches);
     _lastUpdated = new Date();
-  } catch (/** @type {unknown} */ e) {
-    updateUi("gitError", /** @type {Error} */ (e).message);
+  } catch (e) {
+    updateUi("gitError", (e as Error).message);
   } finally {
     updateUi("gitLoading", false);
     renderOnly("leftPanel");
@@ -37,14 +69,14 @@ export async function refreshGitStatus() {
  *
  * @param {{ openRecentProject: (root: string) => Promise<void> }} ctx
  */
-export async function cloneRepository(ctx) {
+export async function cloneRepository(ctx: { openRecentProject: (root: string) => Promise<void> }) {
   const platform = getPlatform();
   if (!platform.gitClone) {
     statusMessage("Clone not supported on this platform");
     return;
   }
 
-  const url = await showDialog(
+  const url = await showDialog<string | null>(
     (done) => html`
       <sp-underlay open @close=${() => done(null)}></sp-underlay>
       <sp-dialog-wrapper
@@ -52,12 +84,10 @@ export async function cloneRepository(ctx) {
         confirmLabel="Clone"
         cancelLabel="Cancel"
         open
-        @confirm=${(/** @type {Event} */ e) => {
-          const input = /** @type {HTMLInputElement | null} */ (
-            /** @type {HTMLElement} */ (
-              /** @type {HTMLElement} */ (e.target).parentElement
-            ).querySelector("sp-textfield")
-          );
+        @confirm=${(e: Event) => {
+          const input = ((e.target as HTMLElement).parentElement as HTMLElement).querySelector(
+            "sp-textfield",
+          ) as HTMLInputElement | null;
           done(input?.value?.trim() || null);
         }}
         @cancel=${() => done(null)}
@@ -82,8 +112,8 @@ export async function cloneRepository(ctx) {
       statusMessage("Clone complete");
       await ctx.openRecentProject(result.root);
     }
-  } catch (/** @type {unknown} */ e) {
-    statusMessage(`Clone failed: ${/** @type {Error} */ (e).message}`);
+  } catch (e) {
+    statusMessage(`Clone failed: ${(e as Error).message}`);
   }
 }
 
@@ -96,54 +126,32 @@ export function platformSupportsClone() {
  * @param {string} action
  * @param {unknown} [body]
  */
-async function gitAction(action, body) {
-  const plat = /** @type {Record<string, Function> & StudioPlatform} */ (getPlatform());
+async function gitAction(action: string, body?: unknown) {
+  const plat = getPlatform() as Record<string, Function> & StudioPlatform;
   updateUi("gitLoading", true);
   updateUi("gitError", null);
   try {
     await plat[action](body);
     await refreshGitStatus();
-  } catch (/** @type {unknown} */ e) {
-    updateUi("gitError", /** @type {Error} */ (e).message);
+  } catch (e) {
+    updateUi("gitError", (e as Error).message);
     updateUi("gitLoading", false);
     renderOnly("leftPanel");
   }
 }
 
-let _pollTimer = /** @type {ReturnType<typeof setInterval> | null} */ (null);
-let _lastUpdated = /** @type {Date | null} */ (null);
+let _pollTimer = null as ReturnType<typeof setInterval> | null;
+let _lastUpdated = null as Date | null;
 let _gitSubTab = "changes";
 
-/** @typedef {{ path: string; status: string; staged: boolean }} GitFileEntry */
-/** @typedef {{ hash: string; message: string; author: string; date: string }} GitLogEntry */
-
-/**
- * @typedef {{
- *   gitStatus?: {
- *     files?: GitFileEntry[];
- *     branch?: string;
- *     ahead?: number;
- *     behind?: number;
- *     isRepo?: boolean;
- *     remotes?: string[];
- *   } | null;
- *   gitBranches?: { current?: string; branches?: string[] } | null;
- *   gitLoading?: boolean;
- *   gitError?: string | null;
- *   gitCommitMessage?: string;
- *   gitLogEntries?: GitLogEntry[] | null;
- *   [key: string]: unknown;
- * }} GitUiState
- */
-
 async function fetchGitLog() {
   const plat = getPlatform();
   try {
     const entries = await plat.gitLog(30);
     updateUi("gitLogEntries", entries);
     renderOnly("leftPanel");
-  } catch (/** @type {unknown} */ e) {
-    updateUi("gitError", /** @type {Error} */ (e).message);
+  } catch (e) {
+    updateUi("gitError", (e as Error).message);
     renderOnly("leftPanel");
   }
 }
@@ -156,7 +164,14 @@ async function fetchGitLog() {
  *   cloneRepository?: () => void;
  * }} ctx
  */
-export function renderGitPanel(S, ctx) {
+export function renderGitPanel(
+  S: { ui: GitUiState },
+  ctx: {
+    setCanvasMode?: (mode: string) => void;
+    setGitDiffState?: (state: unknown) => void;
+    cloneRepository?: () => void;
+  },
+) {
   if (!projectState) {
     return html`<div class="git-panel git-panel-empty">
       <div class="git-empty-state">
@@ -214,8 +229,8 @@ export function renderGitPanel(S, ctx) {
     }, 30000);
   }
 
-  const stagedFiles = status?.files?.filter((/** @type {GitFileEntry} */ f) => f.staged) || [];
-  const unstagedFiles = status?.files?.filter((/** @type {GitFileEntry} */ f) => !f.staged) || [];
+  const stagedFiles = status?.files?.filter((f: GitFileEntry) => f.staged) || [];
+  const unstagedFiles = status?.files?.filter((f: GitFileEntry) => !f.staged) || [];
   const totalChanges = status?.files?.length || 0;
 
   const doCommit = async () => {
@@ -238,8 +253,8 @@ export function renderGitPanel(S, ctx) {
       await plat.gitCommit(msg);
       await plat.gitPush();
       await refreshGitStatus();
-    } catch (/** @type {unknown} */ e) {
-      updateUi("gitError", /** @type {Error} */ (e).message);
+    } catch (e) {
+      updateUi("gitError", (e as Error).message);
       updateUi("gitLoading", false);
       renderOnly("leftPanel");
     }
@@ -355,10 +370,10 @@ export function renderGitPanel(S, ctx) {
         quiet
         class="git-branch-picker"
         .value=${live(branches?.current || "")}
-        @change=${async (/** @type {Event} */ e) => {
-          const val = /** @type {HTMLInputElement} */ (e.target).value;
+        @change=${async (e: Event) => {
+          const val = (e.target as HTMLInputElement).value;
           if (val === "__new__") {
-            /** @type {HTMLInputElement} */ (e.target).value = branches?.current || "";
+            (e.target as HTMLInputElement).value = branches?.current || "";
             const name = prompt("New branch name:");
             if (name?.trim()) await gitAction("gitCreateBranch", name.trim());
             return;
@@ -367,7 +382,7 @@ export function renderGitPanel(S, ctx) {
         }}
       >
         ${(branches?.branches || []).map(
-          (/** @type {string} */ b) => html`<sp-menu-item value=${b}>${b}</sp-menu-item>`,
+          (b: string) => html`<sp-menu-item value=${b}>${b}</sp-menu-item>`,
         )}
         <sp-menu-divider></sp-menu-divider>
         <sp-menu-item value="__new__">+ New branch...</sp-menu-item>
@@ -376,7 +391,7 @@ export function renderGitPanel(S, ctx) {
   `;
 
   // ─── 3. Tabs: Local Changes / History ────────────────────────────────────
-  const switchTab = (/** @type {string} */ tab) => {
+  const switchTab = (tab: string) => {
     _gitSubTab = tab;
     if (tab === "history" && !S.ui.gitLogEntries) fetchGitLog();
     renderOnly("leftPanel");
@@ -409,9 +424,8 @@ export function renderGitPanel(S, ctx) {
         class="git-commit-input"
         placeholder="Describe your changes"
         .value=${live(S.ui.gitCommitMessage || "")}
-        @input=${(/** @type {Event} */ e) =>
-          updateUi("gitCommitMessage", /** @type {HTMLInputElement} */ (e.target).value)}
-        @keydown=${(/** @type {KeyboardEvent} */ e) => {
+        @input=${(e: Event) => updateUi("gitCommitMessage", (e.target as HTMLInputElement).value)}
+        @keydown=${(e: KeyboardEvent) => {
           if (e.ctrlKey && e.key === "Enter") {
             e.preventDefault();
             doCommit();
@@ -431,9 +445,9 @@ export function renderGitPanel(S, ctx) {
           <sp-action-button
             class="git-split-trigger"
             size="s"
-            @click=${(/** @type {Event} */ e) => {
-              const menu = /** @type {HTMLElement} */ (
-                /** @type {HTMLElement} */ (e.currentTarget).parentElement
+            @click=${(e: Event) => {
+              const menu = (
+                (e.currentTarget as HTMLElement).parentElement as HTMLElement
               ).querySelector(".git-split-menu");
               if (menu) menu.toggleAttribute("hidden");
             }}
@@ -443,10 +457,11 @@ export function renderGitPanel(S, ctx) {
           <div class="git-split-menu" hidden>
             <button
               class="git-split-menu-item"
-              @click=${(/** @type {Event} */ e) => {
-                /** @type {HTMLElement} */ (
-                  /** @type {HTMLElement} */ (e.currentTarget).parentElement
-                ).setAttribute("hidden", "");
+              @click=${(e: Event) => {
+                ((e.currentTarget as HTMLElement).parentElement as HTMLElement).setAttribute(
+                  "hidden",
+                  "",
+                );
                 doCommit();
               }}
             >
@@ -459,7 +474,7 @@ export function renderGitPanel(S, ctx) {
   `;
 
   // ─── 5. Changed Components ───────────────────────────────────────────────
-  const fileRowT = (/** @type {GitFileEntry} */ file) => {
+  const fileRowT = (file: GitFileEntry) => {
     const parts = file.path.split("/");
     const name = parts.pop();
     const dir = parts.join("/");
@@ -494,8 +509,8 @@ export function renderGitPanel(S, ctx) {
           if (ctx.setGitDiffState) ctx.setGitDiffState(diffState);
           ctx.setCanvasMode("git-diff");
         }
-      } catch (/** @type {unknown} */ e) {
-        updateUi("gitError", `Failed to load diff: ${/** @type {Error} */ (e).message}`);
+      } catch (e) {
+        updateUi("gitError", `Failed to load diff: ${(e as Error).message}`);
       } finally {
         updateUi("gitLoading", false);
       }
@@ -559,9 +574,8 @@ export function renderGitPanel(S, ctx) {
   };
 
   /** Group files by component (parent directory for .json/.class.json, or "Other") */
-  const groupFilesByComponent = (/** @type {GitFileEntry[]} */ files) => {
-    /** @type {Map<string, GitFileEntry[]>} */
-    const groups = new Map();
+  const groupFilesByComponent = (files: GitFileEntry[]) => {
+    const groups: Map<string, GitFileEntry[]> = new Map();
     for (const f of files) {
       const parts = f.path.split("/");
       let component;
@@ -571,7 +585,7 @@ export function renderGitPanel(S, ctx) {
         component = "Other";
       }
       if (!groups.has(component)) groups.set(component, []);
-      /** @type {GitFileEntry[]} */ (groups.get(component)).push(f);
+      (groups.get(component) as GitFileEntry[]).push(f);
     }
     return groups;
   };
@@ -593,13 +607,13 @@ export function renderGitPanel(S, ctx) {
                 @click=${() =>
                   gitAction(
                     "gitUnstage",
-                    stagedFiles.map((/** @type {GitFileEntry} */ f) => f.path),
+                    stagedFiles.map((f: GitFileEntry) => f.path),
                   )}
               >
                 <sp-icon-remove slot="icon" size="xs"></sp-icon-remove>
               </sp-action-button>
             </div>
-            ${repeat(stagedFiles, (/** @type {GitFileEntry} */ f) => f.path, fileRowT)}
+            ${repeat(stagedFiles, (f: GitFileEntry) => f.path, fileRowT)}
           </div>
         `
       : nothing}
@@ -616,7 +630,7 @@ export function renderGitPanel(S, ctx) {
                 @click=${() =>
                   gitAction(
                     "gitStage",
-                    unstagedFiles.map((/** @type {GitFileEntry} */ f) => f.path),
+                    unstagedFiles.map((f: GitFileEntry) => f.path),
                   )}
               >
                 <sp-icon-add slot="icon" size="xs"></sp-icon-add>
@@ -640,7 +654,7 @@ export function renderGitPanel(S, ctx) {
                     </sp-action-button>
                     <span class="git-component-name">${comp}</span>
                   </div>
-                  ${repeat(files, (/** @type {GitFileEntry} */ f) => f.path, fileRowT)}
+                  ${repeat(files, (f: GitFileEntry) => f.path, fileRowT)}
                 </div>
               `,
             )}
@@ -657,8 +671,8 @@ export function renderGitPanel(S, ctx) {
         ? html`<div class="git-empty">No history</div>`
         : repeat(
             logEntries,
-            (/** @type {GitLogEntry} */ e) => e.hash,
-            (/** @type {GitLogEntry} */ entry) => html`
+            (e: GitLogEntry) => e.hash,
+            (entry: GitLogEntry) => html`
               <div class="git-history-entry">
                 <span class="git-history-hash">${entry.hash.slice(0, 7)}</span>
                 <span class="git-history-message">${entry.message}</span>
@@ -680,7 +694,7 @@ export function renderGitPanel(S, ctx) {
 }
 
 /** @param {string} iso */
-function _relativeDate(iso) {
+function _relativeDate(iso: string) {
   const d = new Date(iso);
   const now = Date.now();
   const diff = now - d.getTime();