@jxsuite/studio 0.19.0 → 0.21.0

package/src/panels/toolbar.js

@@ -16,17 +16,39 @@ import { openQuickSearch } from "./quick-search.js";
 import { getPlatform } from "../platform.js";
 import { refreshGitStatus } from "./git-panel.js";
 import { openBrowseModal } from "../browse/browse-modal.js";
+import { openNewProjectModal } from "../new-project/new-project-modal.js";
 
 /** @type {HTMLElement | null} */
 let _rootEl = null;
 
-/** @type {any} */
+/**
+ * @typedef {{
+ *   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;
+ *   safeRenderRightPanel: () => void;
+ *   openRecentProject: (root: string) => Promise<void>;
+ *   closeFunctionEditor: () => void;
+ * }} ToolbarCtx
+ */
+
+/** @type {ToolbarCtx | null} */
 let _ctx = null;
 
 /** @type {import("@vue/reactivity").EffectScope | null} */
 let _scope = null;
 
-const toolbarIconMap = /** @type {Record<string, any>} */ ({
+const toolbarIconMap = /** @type {Record<string, import("lit-html").TemplateResult>} */ ({
   "sp-icon-folder-open": html`<sp-icon-folder-open slot="icon"></sp-icon-folder-open>`,
   "sp-icon-save-floppy": html`<sp-icon-save-floppy slot="icon"></sp-icon-save-floppy>`,
   "sp-icon-back": html`<sp-icon-back slot="icon"></sp-icon-back>`,
@@ -45,9 +67,9 @@ const toolbarIconMap = /** @type {Record<string, any>} */ ({
 });
 
 /**
- * @param {any} label
- * @param {any} onClick
- * @param {any} iconTag
+ * @param {string} label
+ * @param {Function} onClick
+ * @param {string} [iconTag]
  */
 function tbBtnTpl(label, onClick, iconTag) {
   return html`
@@ -61,30 +83,37 @@ function tbBtnTpl(label, onClick, iconTag) {
  * Mount the toolbar panel.
  *
  * @param {HTMLElement} rootEl
- * @param {any} ctx — { navigateBack, closeFunctionEditor, openProject, openFile, saveFile,
+ * @param {ToolbarCtx} ctx — { navigateBack, closeFunctionEditor, openProject, openFile, saveFile,
  *   parseMediaEntries, getCanvasMode, setCanvasMode, renderCanvas, safeRenderRightPanel }
  */
 export function mount(rootEl, ctx) {
   _rootEl = rootEl;
   _ctx = ctx;
-  if (/** @type {any} */ (globalThis).__jxPlatform?.windowControls) {
+  if (
+    /** @type {{ __jxPlatform?: { windowControls?: unknown } }} */ (
+      /** @type {unknown} */ (globalThis)
+    ).__jxPlatform?.windowControls
+  ) {
     rootEl.classList.add("electrobun-webkit-app-region-drag");
   }
   _scope = effectScope();
   _scope.run(() => {
     effect(() => {
       const tab = activeTab.value;
-      if (!tab) return;
-      // Read reactive properties to establish tracking
-      void tab.doc.document;
-      void tab.doc.dirty;
-      void tab.doc.mode;
-      void tab.session.selection;
-      void tab.session.ui.canvasMode;
-      void tab.session.ui.editingFunction;
-      void tab.session.ui.featureToggles;
-      void tab.session.ui.rightTab;
-      void tab.session.ui.gitStatus;
+      if (tab) {
+        // Read reactive properties to establish tracking
+        void tab.doc.document;
+        void tab.doc.dirty;
+        void tab.doc.mode;
+        void tab.session.selection;
+        void tab.session.ui.canvasMode;
+        void tab.session.ui.editingFunction;
+        void tab.session.ui.featureToggles;
+        void tab.session.ui.rightTab;
+        void tab.session.ui.gitStatus;
+        void tab.history.index;
+        void tab.history.snapshots.length;
+      }
       render();
     });
   });
@@ -106,10 +135,155 @@ export function render() {
   }
 }
 
+async function handleNewProject() {
+  const result = await openNewProjectModal();
+  if (result && _ctx) {
+    await _ctx.openRecentProject(result.root);
+  }
+}
+
+/** @param {ToolbarCtx} ctx */
+function minimalToolbarTemplate(ctx) {
+  const recentProjects = getRecentProjects();
+  const recentProjectsTpl = html`
+    <overlay-trigger placement="bottom-start" triggered-by="click">
+      <sp-action-button size="s" slot="trigger" title="Recent projects" class="tb-split-trigger">
+        <sp-icon-chevron-down slot="icon"></sp-icon-chevron-down>
+      </sp-action-button>
+      <sp-popover slot="click-content" tip>
+        <sp-menu
+          @change=${(/** @type {Event} */ e) => {
+            const val = /** @type {HTMLInputElement} */ (/** @type {unknown} */ (e.target)).value;
+            if (val === "__new__") {
+              handleNewProject();
+            } else {
+              ctx.openRecentProject(val);
+            }
+          }}
+        >
+          <sp-menu-item value="__new__">New Project…</sp-menu-item>
+          ${recentProjects.length
+            ? html`<sp-menu-divider></sp-menu-divider> ${recentProjects.map(
+                  (p) => html`<sp-menu-item value=${p.root}>${p.name}</sp-menu-item>`,
+                )}`
+            : nothing}
+        </sp-menu>
+      </sp-popover>
+    </overlay-trigger>
+  `;
+
+  const windowControls = /**
+   * @type {{
+   *   __jxPlatform?: {
+   *     windowControls?: { minimize: () => void; maximize: () => void; close: () => void };
+   *   };
+   * }}
+   */ (/** @type {unknown} */ (globalThis)).__jxPlatform?.windowControls;
+  const csdTpl = windowControls
+    ? html`
+        <sp-action-group class="window-controls" size="s">
+          <sp-action-button
+            quiet
+            size="s"
+            title="Minimize"
+            @click=${() => windowControls.minimize()}
+          >
+            <sp-icon-remove slot="icon"></sp-icon-remove>
+          </sp-action-button>
+          <sp-action-button
+            quiet
+            size="s"
+            title="Maximize"
+            @click=${() => windowControls.maximize()}
+          >
+            <sp-icon-rectangle slot="icon"></sp-icon-rectangle>
+          </sp-action-button>
+          <sp-action-button
+            quiet
+            size="s"
+            title="Close"
+            class="csd-close"
+            @click=${() => windowControls.close()}
+          >
+            <sp-icon-close slot="icon"></sp-icon-close>
+          </sp-action-button>
+        </sp-action-group>
+      `
+    : nothing;
+
+  return html`
+    <div class="tb-split-btn">
+      <sp-action-button size="s" class="tb-split-main" @click=${ctx.openProject}>
+        ${toolbarIconMap["sp-icon-folder-open"]} Open Project
+      </sp-action-button>
+      ${recentProjectsTpl}
+    </div>
+    ${tbBtnTpl("Manage", openBrowseModal, "sp-icon-view-list")}
+    <sp-action-button size="s" disabled>
+      ${toolbarIconMap["sp-icon-save-floppy"]} Save
+    </sp-action-button>
+    <sp-action-group compact size="s">
+      <sp-action-button size="s" disabled>
+        ${toolbarIconMap["sp-icon-undo"]} Undo
+      </sp-action-button>
+      <sp-action-button size="s" disabled>
+        ${toolbarIconMap["sp-icon-redo"]} Redo
+      </sp-action-button>
+    </sp-action-group>
+    <div class="tb-spacer"></div>
+    <sp-action-button class="tb-search-trigger" size="s" quiet @click=${openQuickSearch}>
+      <sp-icon-search slot="icon"></sp-icon-search>
+      <span class="tb-search-label">Search files… <kbd>⌘P</kbd></span>
+    </sp-action-button>
+    <div class="tb-spacer"></div>
+    <sp-action-group selects="single" size="s" compact>
+      ${modes.map(
+        (m) => html`
+          <sp-action-button size="s" disabled ?selected=${m.key === "design"}>
+            ${toolbarIconMap[m.iconTag]}${m.label}
+          </sp-action-button>
+        `,
+      )}
+    </sp-action-group>
+    <sp-action-button
+      quiet
+      size="s"
+      title="Toggle Right Panel"
+      @click=${() => {
+        view.rightPanelCollapsed = !view.rightPanelCollapsed;
+        applyPanelCollapse();
+        render();
+      }}
+    >
+      ${view.rightPanelCollapsed
+        ? html`<sp-icon-rail-right-open slot="icon"></sp-icon-rail-right-open>`
+        : html`<sp-icon-rail-right-close slot="icon"></sp-icon-rail-right-close>`}
+    </sp-action-button>
+    ${csdTpl}
+  `;
+}
+
+const modes = [
+  { key: "edit", label: "Edit", iconTag: "sp-icon-edit" },
+  { key: "design", label: "Design", iconTag: "sp-icon-artboard" },
+  { key: "preview", label: "Preview", iconTag: "sp-icon-preview" },
+  { key: "source", label: "Code", iconTag: "sp-icon-code" },
+  { key: "stylebook", label: "Stylebook", iconTag: "sp-icon-brush" },
+];
+
 function toolbarTemplate() {
   const tab = activeTab.value;
-  if (!tab) return html``;
-  const S = /** @type {any} */ ({
+  if (!_ctx) return html``;
+  const ctx = _ctx;
+
+  if (!tab) return minimalToolbarTemplate(ctx);
+
+  const allowedModes = new Set(tab.capabilities.modes);
+  const canUndo = tab.history.index > 0;
+  const canRedo = tab.history.index < tab.history.snapshots.length - 1;
+  const canSave = tab.doc.dirty;
+
+  const S = {
     document: tab.doc.document,
     ui: tab.session.ui,
     mode: tab.doc.mode,
@@ -118,19 +292,19 @@ function toolbarTemplate() {
     documentPath: tab.documentPath,
     fileHandle: tab.fileHandle,
     documentStack: tab.session.documentStack,
-  });
-  const canvasMode = _ctx.getCanvasMode();
+  };
+  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}>
+          <sp-action-button size="s" title="Return to parent document" @click=${ctx.navigateBack}>
             ${toolbarIconMap["sp-icon-back"]}Back
           </sp-action-button>
           ${S.documentStack.map(
-            (/** @type {any} */ frame, /** @type {number} */ i) => html`
-              <span class="breadcrumb-item clickable" @click=${() => _ctx.navigateToLevel(i)}
+            (/** @type {DocumentStackEntry} */ frame, /** @type {number} */ i) => html`
+              <span class="breadcrumb-item clickable" @click=${() => ctx.navigateToLevel(i)}
                 >${frame.documentPath?.split("/").pop() || "untitled"}</span
               >
               <span class="breadcrumb-sep"> › </span>
@@ -143,13 +317,13 @@ function toolbarTemplate() {
       `
     : nothing;
 
-  const { featureQueries } = _ctx.parseMediaEntries(getEffectiveMedia(S.document.$media));
+  const { featureQueries } = ctx.parseMediaEntries(getEffectiveMedia(S.document.$media));
   const togglesTpl =
     featureQueries.length > 0
       ? html`
           <sp-action-group compact size="s">
             ${featureQueries.map(
-              (/** @type {any} */ { name, query }) => html`
+              (/** @type {{ name: string; query: string }} */ { name, query }) => html`
                 <sp-action-button
                   toggles
                   size="s"
@@ -171,17 +345,6 @@ function toolbarTemplate() {
         `
       : nothing;
 
-  const modes = [
-    { key: "edit", label: "Edit", iconTag: "sp-icon-edit" },
-    { key: "design", label: "Design", iconTag: "sp-icon-artboard" },
-    { key: "preview", label: "Preview", iconTag: "sp-icon-preview" },
-    { key: "source", label: "Code", iconTag: "sp-icon-code" },
-    { key: "stylebook", label: "Stylebook", iconTag: "sp-icon-brush" },
-  ];
-
-  const isProjectFile = S.documentPath === "project.json";
-  const allowedModes = isProjectFile ? new Set(["stylebook", "source"]) : null;
-
   const modeSwitcherTpl = html`
     <sp-action-group selects="single" size="s" compact>
       ${modes.map(
@@ -189,25 +352,25 @@ function toolbarTemplate() {
           <sp-action-button
             size="s"
             ?selected=${canvasMode === m.key}
-            ?disabled=${allowedModes && !allowedModes.has(m.key)}
+            ?disabled=${!allowedModes.has(m.key)}
             @click=${() => {
               if (canvasMode === m.key) return;
-              if (allowedModes && !allowedModes.has(m.key)) return;
+              if (!allowedModes.has(m.key)) return;
               if (S.ui.editingFunction) {
                 if (view.functionEditor) {
                   view.functionEditor.dispose();
                   view.functionEditor = null;
                 }
               }
-              _ctx.setCanvasMode(m.key);
+              ctx.setCanvasMode(m.key);
               view.panX = 0;
               view.panY = 0;
-              /** @type {Record<string, any>} */
+              /** @type {{ editingFunction: null; rightTab?: string }} */
               const uiPatch = { editingFunction: null };
               if (m.key === "stylebook") uiPatch.rightTab = "style";
               updateSession({ ui: uiPatch });
-              _ctx.renderCanvas();
-              _ctx.safeRenderRightPanel();
+              ctx.renderCanvas();
+              ctx.safeRenderRightPanel();
             }}
           >
             ${toolbarIconMap[m.iconTag]}${m.label}
@@ -217,84 +380,145 @@ function toolbarTemplate() {
     </sp-action-group>
   `;
 
-  const windowControls = /** @type {any} */ (globalThis).__jxPlatform?.windowControls;
+  const windowControls = /**
+   * @type {{
+   *   __jxPlatform?: {
+   *     windowControls?: { minimize: () => void; maximize: () => void; close: () => void };
+   *   };
+   * }}
+   */ (/** @type {unknown} */ (globalThis)).__jxPlatform?.windowControls;
+  const isMac = navigator.platform.startsWith("Mac");
   const csdTpl = windowControls
-    ? html`
-        <sp-action-group class="window-controls" size="s">
-          <sp-action-button
-            quiet
-            size="s"
-            title="Minimize"
-            @click=${() => windowControls.minimize()}
-          >
-            <sp-icon-remove slot="icon"></sp-icon-remove>
-          </sp-action-button>
-          <sp-action-button
-            quiet
-            size="s"
-            title="Maximize"
-            @click=${() => windowControls.maximize()}
-          >
-            <sp-icon-rectangle slot="icon"></sp-icon-rectangle>
-          </sp-action-button>
-          <sp-action-button
-            quiet
-            size="s"
-            title="Close"
-            class="csd-close"
-            @click=${() => windowControls.close()}
-          >
-            <sp-icon-close slot="icon"></sp-icon-close>
-          </sp-action-button>
-        </sp-action-group>
-      `
+    ? isMac
+      ? html`
+          <sp-action-group class="window-controls mac" size="s">
+            <sp-action-button
+              quiet
+              size="s"
+              title="Close"
+              class="csd-close"
+              @click=${() => windowControls.close()}
+            >
+              <sp-icon-close slot="icon"></sp-icon-close>
+            </sp-action-button>
+            <sp-action-button
+              quiet
+              size="s"
+              title="Minimize"
+              class="csd-minimize"
+              @click=${() => windowControls.minimize()}
+            >
+              <sp-icon-remove slot="icon"></sp-icon-remove>
+            </sp-action-button>
+            <sp-action-button
+              quiet
+              size="s"
+              title="Maximize"
+              class="csd-maximize"
+              @click=${() => windowControls.maximize()}
+            >
+              <sp-icon-rectangle slot="icon"></sp-icon-rectangle>
+            </sp-action-button>
+          </sp-action-group>
+        `
+      : html`
+          <sp-action-group class="window-controls" size="s">
+            <sp-action-button
+              quiet
+              size="s"
+              title="Minimize"
+              class="csd-minimize"
+              @click=${() => windowControls.minimize()}
+            >
+              <sp-icon-remove slot="icon"></sp-icon-remove>
+            </sp-action-button>
+            <sp-action-button
+              quiet
+              size="s"
+              title="Maximize"
+              class="csd-maximize"
+              @click=${() => windowControls.maximize()}
+            >
+              <sp-icon-rectangle slot="icon"></sp-icon-rectangle>
+            </sp-action-button>
+            <sp-action-button
+              quiet
+              size="s"
+              title="Close"
+              class="csd-close"
+              @click=${() => windowControls.close()}
+            >
+              <sp-icon-close slot="icon"></sp-icon-close>
+            </sp-action-button>
+          </sp-action-group>
+        `
     : nothing;
 
   const recentProjects = getRecentProjects();
-  const recentProjectsTpl = recentProjects.length
-    ? html`
-        <overlay-trigger placement="bottom-start" triggered-by="click">
-          <sp-action-button size="s" slot="trigger" title="Recent projects">
-            <sp-icon-chevron-down slot="icon"></sp-icon-chevron-down>
-          </sp-action-button>
-          <sp-popover slot="click-content" tip>
-            <sp-menu @change=${(/** @type {any} */ e) => _ctx.openRecentProject(e.target.value)}>
-              ${recentProjects.map(
-                (p) => html`<sp-menu-item value=${p.root}>${p.name}</sp-menu-item>`,
-              )}
-            </sp-menu>
-          </sp-popover>
-        </overlay-trigger>
-      `
-    : nothing;
+  const recentProjectsTpl = html`
+    <overlay-trigger placement="bottom-start" triggered-by="click">
+      <sp-action-button size="s" slot="trigger" title="Recent projects" class="tb-split-trigger">
+        <sp-icon-chevron-down slot="icon"></sp-icon-chevron-down>
+      </sp-action-button>
+      <sp-popover slot="click-content" tip>
+        <sp-menu
+          @change=${(/** @type {Event} */ e) => {
+            const val = /** @type {HTMLInputElement} */ (/** @type {unknown} */ (e.target)).value;
+            if (val === "__new__") {
+              handleNewProject();
+            } else {
+              ctx.openRecentProject(val);
+            }
+          }}
+        >
+          <sp-menu-item value="__new__">New Project…</sp-menu-item>
+          ${recentProjects.length
+            ? html`<sp-menu-divider></sp-menu-divider> ${recentProjects.map(
+                  (p) => html`<sp-menu-item value=${p.root}>${p.name}</sp-menu-item>`,
+                )}`
+            : nothing}
+        </sp-menu>
+      </sp-popover>
+    </overlay-trigger>
+  `;
 
   return html`
-    ${tbBtnTpl("Open Project", _ctx.openProject, "sp-icon-folder-open")} ${recentProjectsTpl}
+    ${isMac ? csdTpl : nothing}
+    <div class="tb-split-btn">
+      <sp-action-button size="s" class="tb-split-main" @click=${ctx.openProject}>
+        ${toolbarIconMap["sp-icon-folder-open"]} Open Project
+      </sp-action-button>
+      ${recentProjectsTpl}
+    </div>
     ${tbBtnTpl("Manage", openBrowseModal, "sp-icon-view-list")}
-    ${tbBtnTpl("Save", _ctx.saveFile, "sp-icon-save-floppy")}
+    <sp-action-button size="s" ?disabled=${!canSave} @click=${ctx.saveFile}>
+      ${toolbarIconMap["sp-icon-save-floppy"]} Save
+    </sp-action-button>
     <sp-action-group compact size="s">
-      ${tbBtnTpl("Undo", () => tabUndo(activeTab.value), "sp-icon-undo")}
-      ${tbBtnTpl("Redo", () => tabRedo(activeTab.value), "sp-icon-redo")}
+      <sp-action-button size="s" ?disabled=${!canUndo} @click=${() => tabUndo(activeTab.value)}>
+        ${toolbarIconMap["sp-icon-undo"]} Undo
+      </sp-action-button>
+      <sp-action-button size="s" ?disabled=${!canRedo} @click=${() => tabRedo(activeTab.value)}>
+        ${toolbarIconMap["sp-icon-redo"]} Redo
+      </sp-action-button>
     </sp-action-group>
     <div class="tb-spacer"></div>
     <sp-action-button class="tb-search-trigger" size="s" quiet @click=${openQuickSearch}>
       <sp-icon-search slot="icon"></sp-icon-search>
       <span class="tb-search-label">Search files… <kbd>⌘P</kbd></span>
     </sp-action-button>
-    ${
-      /** @type {any} */ (activeTab.value?.session.ui.gitStatus)?.behind > 0
-        ? html`<sp-action-button
-            size="s"
-            @click=${async () => {
-              await getPlatform().gitPull();
-              await refreshGitStatus();
-            }}
-          >
-            <sp-icon-download slot="icon"></sp-icon-download>
-            Sync Project
-          </sp-action-button>`
-        : nothing
-    }
+    ${(activeTab.value?.session.ui.gitStatus?.behind ?? 0) > 0
+      ? html`<sp-action-button
+          size="s"
+          @click=${async () => {
+            await getPlatform().gitPull();
+            await refreshGitStatus();
+          }}
+        >
+          <sp-icon-download slot="icon"></sp-icon-download>
+          Sync Project
+        </sp-action-button>`
+      : nothing}
     <div class="tb-spacer"></div>
     ${breadcrumbTpl} ${togglesTpl} ${modeSwitcherTpl}
     <sp-action-button
@@ -311,6 +535,6 @@ function toolbarTemplate() {
         ? html`<sp-icon-rail-right-open slot="icon"></sp-icon-rail-right-open>`
         : html`<sp-icon-rail-right-close slot="icon"></sp-icon-rail-right-close>`}
     </sp-action-button>
-    ${csdTpl}
+    ${isMac ? nothing : csdTpl}
   `;
 }