@hienlh/ppm 0.17.34 → 0.17.37

package/src/web/lib/clipboard.ts

@@ -20,6 +20,47 @@ export async function copyToClipboard(text: string): Promise<boolean> {
   return legacyCopy(text);
 }
 
+/**
+ * Whether an image can be placed on the clipboard at all on this origin.
+ *
+ * Unlike text there is no `execCommand` fallback for binary data, so on the plain-HTTP
+ * origins PPM is often reached from there is nothing to try — callers should disable the
+ * action and say why rather than offer a button that always fails.
+ */
+export function canCopyImage(): boolean {
+  return typeof ClipboardItem !== "undefined" && !!navigator.clipboard?.write;
+}
+
+/**
+ * Copy an image to the clipboard, converting to PNG first.
+ *
+ * Browsers accept a very short list of image types on the clipboard — PNG is the only one
+ * supported everywhere — so a JPEG or WebP has to be repainted through a canvas.
+ */
+export async function copyImageToClipboard(src: string): Promise<boolean> {
+  if (!canCopyImage()) return false;
+  try {
+    const blob = await fetch(src).then((r) => r.blob());
+    const png = blob.type === "image/png" ? blob : await toPng(blob);
+    await navigator.clipboard.write([new ClipboardItem({ "image/png": png })]);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+async function toPng(blob: Blob): Promise<Blob> {
+  const bitmap = await createImageBitmap(blob);
+  const canvas = document.createElement("canvas");
+  canvas.width = bitmap.width;
+  canvas.height = bitmap.height;
+  canvas.getContext("2d")?.drawImage(bitmap, 0, 0);
+  bitmap.close();
+  return new Promise((resolve, reject) => {
+    canvas.toBlob((b) => (b ? resolve(b) : reject(new Error("canvas produced no blob"))), "image/png");
+  });
+}
+
 function legacyCopy(text: string): boolean {
   const textarea = document.createElement("textarea");
   textarea.value = text;

package/src/web/lib/file-download.ts

@@ -24,7 +24,7 @@ export async function downloadFolder(projectName: string, folderPath: string): P
 }
 
 /** Hidden <a> tag download trigger — avoids popup blockers */
-function triggerDownload(url: string, filename: string): void {
+export function triggerDownload(url: string, filename: string): void {
   const a = document.createElement("a");
   a.href = url;
   a.download = filename;

package/src/web/lib/image-gallery.ts

@@ -0,0 +1,25 @@
+import type { GalleryImage } from "@/stores/image-overlay-store";
+
+/** Marks a container whose tagged images form one navigable set. */
+export const GALLERY_ROOT_ATTR = "data-image-gallery";
+/** Marks an `<img>` that belongs to the enclosing gallery. */
+export const GALLERY_ITEM_ATTR = "data-gallery-item";
+
+/**
+ * Collect the images a viewer may move between, in the order they appear on screen.
+ *
+ * Read from the DOM rather than a registry because every image already owns a blob URL that
+ * is revoked when its component unmounts — so the mounted elements are exactly the set whose
+ * sources are still valid, and the DOM already holds them in the order the user sees.
+ *
+ * The reach is therefore whatever is mounted. The chat transcript is deliberately not
+ * virtualised (`message-list.tsx`), so that is the whole conversation today; if it ever gains
+ * data windowing, navigation narrows to the loaded window along with everything else.
+ */
+export function collectGallery(from: Element | null): GalleryImage[] {
+  const root = from?.closest(`[${GALLERY_ROOT_ATTR}]`);
+  if (!root) return [];
+  return [...root.querySelectorAll<HTMLImageElement>(`img[${GALLERY_ITEM_ATTR}]`)]
+    .filter((img) => !!img.src)
+    .map((img) => ({ src: img.src, alt: img.alt }));
+}

package/src/web/stores/image-overlay-store.ts

@@ -1,18 +1,46 @@
 import { create } from "zustand";
 
+export interface GalleryImage {
+  /** Blob URL or data URL of the image. */
+  src: string;
+  alt: string;
+}
+
 interface ImageOverlayState {
-  /** Blob URL or data URL of the image to display */
+  /** Images the overlay can move between; a single entry when opened without a gallery. */
+  images: GalleryImage[];
+  index: number;
+  /** Convenience mirrors of the current entry — every existing consumer reads these. */
   src: string | null;
   alt: string;
-  /** Open the overlay with a given image source */
-  open: (src: string, alt?: string) => void;
-  /** Close the overlay */
+  /**
+   * Open the overlay. Passing a gallery lets the arrows walk its siblings; the clicked
+   * source decides where in that list the viewer starts.
+   */
+  open: (src: string, alt?: string, gallery?: GalleryImage[]) => void;
   close: () => void;
+  /** Move by a signed offset, stopping at the ends rather than wrapping. */
+  go: (delta: number) => void;
 }
 
-export const useImageOverlay = create<ImageOverlayState>((set) => ({
+export const useImageOverlay = create<ImageOverlayState>((set, get) => ({
+  images: [],
+  index: 0,
   src: null,
   alt: "",
-  open: (src, alt = "") => set({ src, alt }),
-  close: () => set({ src: null, alt: "" }),
+  open: (src, alt = "", gallery) => {
+    const images = gallery?.length ? gallery : [{ src, alt }];
+    const found = images.findIndex((i) => i.src === src);
+    const index = found >= 0 ? found : 0;
+    const current = images[index]!;
+    set({ images, index, src: current.src, alt: current.alt || alt });
+  },
+  close: () => set({ images: [], index: 0, src: null, alt: "" }),
+  go: (delta) => {
+    const { images, index } = get();
+    const next = index + delta;
+    if (next < 0 || next >= images.length) return;
+    const current = images[next]!;
+    set({ index: next, src: current.src, alt: current.alt });
+  },
 }));

package/src/web/stores/panel-store.ts

@@ -15,6 +15,7 @@ import {
   savePanelLayout,
   loadPanelLayout,
   deriveTabId,
+  visibleTabs,
   DOCK_PANEL_ID,
 } from "./panel-utils";
 import {
@@ -248,10 +249,16 @@ export const usePanelStore = create<PanelStore>()((set, get) => {
       // Load from localStorage
       const loaded = loadPanelLayout(projectName);
       if (loaded && Object.keys(loaded.panels).length > 0) {
-        // Migrate: remove obsolete tab types from grid panels
+        // Migrate: drop obsolete tab types, and tabs belonging to another project.
+        // A foreign tab is filtered out of the tab bar, so it can never be closed —
+        // and closeTab is the only thing that removes an emptied panel, so leaving
+        // one behind wedges its panel permanently (it renders as a blank slot).
+        let healed = false;
         const migratedPanels: typeof loaded.panels = {};
         for (const [pid, panel] of Object.entries(loaded.panels)) {
-          const filteredTabs = panel.tabs.filter((t) => !OBSOLETE_TAB_TYPES.has(t.type));
+          const filteredTabs = visibleTabs(panel.tabs, projectName)
+            .filter((t) => !OBSOLETE_TAB_TYPES.has(t.type));
+          if (filteredTabs.length !== panel.tabs.length) healed = true;
           const filteredHistory = panel.tabHistory.filter(
             (id) => filteredTabs.some((t) => t.id === id),
           );
@@ -261,6 +268,22 @@ export const usePanelStore = create<PanelStore>()((set, get) => {
           migratedPanels[pid] = { ...panel, tabs: filteredTabs, tabHistory: filteredHistory, activeTabId };
         }
 
+        // Apply the "no empty panel" invariant on restore, not just in closeTab:
+        // the filtering above can empty a panel, and a grid id with no panel behind
+        // it renders nothing either. The last panel always stays — the grid needs
+        // something to render into.
+        let migratedGrid = loaded.grid;
+        for (const pid of migratedGrid.flat()) {
+          if ((migratedPanels[pid]?.tabs.length ?? 0) > 0) continue;
+          if (migratedGrid.flat().length <= 1) break;
+          migratedGrid = gridRemovePanel(migratedGrid, pid);
+          delete migratedPanels[pid];
+          healed = true;
+        }
+        const migratedFocused = migratedGrid.flat().includes(loaded.focusedPanelId)
+          ? loaded.focusedPanelId
+          : (migratedGrid.flat()[0] ?? loaded.focusedPanelId);
+
         // Merge into flat panels map (keep-alive: old panels stay).
         // The shared __dock__ panel holds live tabs from ALL projects — union the
         // loaded project's persisted dock tabs into it rather than replacing, so a
@@ -283,8 +306,8 @@ export const usePanelStore = create<PanelStore>()((set, get) => {
         // Focus the switched-to project's own dock tab (not another project's).
         mergedDockPanel.activeTabId = pickDockActiveTab(mergedDockPanel, projectName);
         const mergedPanels = { ...panels, ...migratedPanels, [DOCK_PANEL_ID]: mergedDockPanel };
-        newProjectGrids[projectName] = loaded.grid;
-        newProjectFocused[projectName] = loaded.focusedPanelId;
+        newProjectGrids[projectName] = migratedGrid;
+        newProjectFocused[projectName] = migratedFocused;
         const restoredDock = collapseRestoredDockOnMobile(
           loaded.dock ?? restoreDockForProject(projectName, newProjectDock),
           get().isMobile(),
@@ -292,13 +315,24 @@ export const usePanelStore = create<PanelStore>()((set, get) => {
         set({
           currentProject: projectName,
           panels: mergedPanels,
-          grid: loaded.grid,
-          focusedPanelId: loaded.focusedPanelId,
+          grid: migratedGrid,
+          focusedPanelId: migratedFocused,
           projectGrids: newProjectGrids,
           projectFocused: newProjectFocused,
           dock: restoredDock,
           projectDock: newProjectDock,
         });
+        // Write the healed layout back so the repair sticks (and reaches the server
+        // blob), instead of being redone on every load.
+        if (healed) {
+          savePanelLayout(projectName, {
+            panels: migratedPanels,
+            grid: migratedGrid,
+            focusedPanelId: migratedFocused,
+            dock: restoredDock,
+            dockPanel: mergedDockPanel,
+          });
+        }
       } else {
         // Create empty layout — EmptyPanel will show quick-open buttons
         const p = createPanel();

package/src/web/stores/panel-utils.ts

@@ -103,6 +103,25 @@ export function gridRemovePanel(grid: string[][], panelId: string): string[][] {
     .filter((col) => col.length > 0);
 }
 
+/**
+ * The subset of `tabs` that the given project is allowed to see.
+ *
+ * A grid panel can end up holding another project's tab (a race in openTab during
+ * a project switch, or a tab stamped with a project name that does not exist). The
+ * tab bar hides those, so every other "is this panel empty?" check must agree —
+ * otherwise the panel renders neither tabs nor the empty state, and since it has no
+ * closable tab, the auto-close in closeTab can never fire and the panel is stuck.
+ *
+ * Callers spell "no active project" two ways: TabBar passes null, while the
+ * per-project layout key is the "__global__" sentinel. Both mean unfiltered, so
+ * they are normalized here — a split between them would resurrect the exact
+ * disagreement this helper exists to prevent.
+ */
+export function visibleTabs(tabs: Tab[], projectName: string | null): Tab[] {
+  if (!projectName || projectName === "__global__") return tabs;
+  return tabs.filter((t) => !t.projectId || t.projectId === projectName);
+}
+
 export function findPanelPosition(grid: string[][], panelId: string): { row: number; col: number } | null {
   for (let r = 0; r < grid.length; r++) {
     const c = grid[r]!.indexOf(panelId);

package/dist/web/assets/api-client-DNTkryX1.js

@@ -1 +0,0 @@
-import"./vendor-markdown-CKTlmXbz.js";import"./vendor-ui-DMRGWRuc.js";import{r as e,t}from"./api-client-DhXpjLdi.js";export{t as api,e as projectUrl};

package/dist/web/assets/api-settings-Bp5HXQCW.js

@@ -1 +0,0 @@
-import"./vendor-markdown-CKTlmXbz.js";import"./vendor-ui-DMRGWRuc.js";import"./api-client-DhXpjLdi.js";import{v as e}from"./api-settings-BUYvGBdi.js";export{e as updateDeviceName};