shadow-claw 1.23.3 → 1.24.0

package/src/components/shadow-claw-file-viewer/shadow-claw-file-viewer.test.ts

@@ -1385,6 +1385,111 @@ describe("shadow-claw-file-viewer", () => {
       expect(navigate).toHaveBeenCalledWith("/#Pages?path=docs/linked.md");
     });
 
+    it("navigates relative image link in root via route URL", async () => {
+      const component = new ShadowClawFileViewer();
+      component.db = {} as any;
+
+      const navigate = jest.fn();
+      Object.defineProperty(window as any, "navigation", {
+        configurable: true,
+        value: { navigate },
+      });
+
+      (fileViewerStore as any).file = {
+        path: "index.md",
+        name: "index.md",
+        kind: "text",
+        content: "# index",
+      };
+
+      const body = document.createElement("div");
+      const link = document.createElement("a");
+      link.setAttribute("href", "01M1A1R4Y708YJNPGV2NHQKYF7-IMG_0233.jpeg");
+      body.appendChild(link);
+
+      const event = new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true,
+        button: 0,
+      });
+      Object.defineProperty(event, "target", {
+        configurable: true,
+        value: link,
+      });
+
+      await component.handlePreviewLinkClick(event);
+
+      expect(event.defaultPrevented).toBe(true);
+      expect(navigate).toHaveBeenCalledWith(
+        "/files/test-group/01M1A1R4Y708YJNPGV2NHQKYF7-IMG_0233.jpeg",
+      );
+    });
+
+    it("rewrites relative asset hrefs in markdown preview HTML", () => {
+      const component = new ShadowClawFileViewer();
+      const inputHtml =
+        '<p><a href="01M1A1R4Y708YJNPGV2NHQKYF7-IMG_0233.jpeg">image</a></p>';
+      const rewritten = component.rewriteWorkspacePreviewHtml(
+        inputHtml,
+        "index.md",
+      );
+      expect(rewritten).toContain(
+        'href="/files/test-group/01M1A1R4Y708YJNPGV2NHQKYF7-IMG_0233.jpeg"',
+      );
+    });
+
+    it("rewrites relative asset hrefs when subpath base path is active", () => {
+      document.querySelectorAll("base").forEach((el) => el.remove());
+      const baseEl = document.createElement("base");
+      baseEl.setAttribute("href", "/shadow-claw/");
+      document.head.appendChild(baseEl);
+      (globalThis as any).__applyBasePathCacheReset?.();
+
+      try {
+        const component = new ShadowClawFileViewer();
+        const inputHtml =
+          '<p><a href="01M1A1R4Y708YJNPGV2NHQKYF7-IMG_0233.jpeg">image</a></p>';
+        const rewritten = component.rewriteWorkspacePreviewHtml(
+          inputHtml,
+          "index.md",
+        );
+        expect(rewritten).toContain(
+          'href="/shadow-claw/files/test-group/01M1A1R4Y708YJNPGV2NHQKYF7-IMG_0233.jpeg"',
+        );
+      } finally {
+        baseEl.remove();
+        (globalThis as any).__applyBasePathCacheReset?.();
+      }
+    });
+
+    it("bindEventListeners delegates clicks within .file-content to handlePreviewLinkClick", () => {
+      const component = new ShadowClawFileViewer();
+      const root = document.createElement("div");
+      const content = document.createElement("div");
+      content.className = "file-content";
+      const link = document.createElement("a");
+      link.setAttribute("href", "01M1A1R4Y708YJNPGV2NHQKYF7-IMG_0233.jpeg");
+      content.appendChild(link);
+      root.appendChild(content);
+      Object.defineProperty(component, "shadowRoot", {
+        configurable: true,
+        value: root,
+      });
+
+      const spy = jest
+        .spyOn(component, "handlePreviewLinkClick")
+        .mockImplementation(async () => {});
+
+      component.bindEventListeners();
+
+      link.dispatchEvent(
+        new MouseEvent("click", { bubbles: true, cancelable: true }),
+      );
+
+      expect(spy).toHaveBeenCalledTimes(1);
+      spy.mockRestore();
+    });
+
     it("resolves relative links against the opened file directory", () => {
       const component = new ShadowClawFileViewer();
 
@@ -1757,4 +1862,277 @@ describe("shadow-claw-file-viewer", () => {
       expect(resolved).toContain("data:image/png;base64,iVBORw==");
     });
   });
+
+  describe("syncIframeTheme & storage proxy bridge", () => {
+    it("syncs theme and custom properties to previewFrameWindow", () => {
+      const component = new ShadowClawFileViewer() as any;
+      const mockPostMessage = jest.fn();
+      component.previewFrameWindow = { postMessage: mockPostMessage };
+
+      component.syncIframeTheme();
+
+      expect(mockPostMessage).toHaveBeenCalledWith(
+        expect.objectContaining({
+          type: "shadow-claw-theme-update",
+          theme: expect.any(String),
+          customProperties: expect.any(Object),
+        }),
+        "*",
+      );
+    });
+
+    it("handles storage proxy requests (setItem, removeItem, getAllItems, idb-put, idb-get)", async () => {
+      const component = new ShadowClawFileViewer() as any;
+      const mockSource = { postMessage: jest.fn() };
+
+      (fileViewerStore as any).file = { path: "demo.html", name: "demo.html" };
+
+      // 1. setItem
+      await component.handleStorageProxyRequest(
+        mockSource,
+        "req-1",
+        "setItem",
+        {
+          key: "pref",
+          value: "dark",
+        },
+      );
+      expect(mockSource.postMessage).toHaveBeenCalledWith(
+        expect.objectContaining({
+          type: "shadow-claw-storage-proxy-result",
+          requestId: "req-1",
+          result: null,
+        }),
+        "*",
+      );
+
+      // 2. idb-put
+      await component.handleStorageProxyRequest(
+        mockSource,
+        "req-2",
+        "idb-put",
+        {
+          dbName: "test-db",
+          storeName: "items",
+          key: "k1",
+          value: { foo: "bar" },
+        },
+      );
+      expect(mockSource.postMessage).toHaveBeenCalledWith(
+        expect.objectContaining({
+          type: "shadow-claw-storage-proxy-result",
+          requestId: "req-2",
+          result: "k1",
+        }),
+        "*",
+      );
+
+      // 3. Unknown method sends error
+      await component.handleStorageProxyRequest(
+        mockSource,
+        "req-3",
+        "unknownMethod",
+        {},
+      );
+      expect(mockSource.postMessage).toHaveBeenCalledWith(
+        expect.objectContaining({
+          type: "shadow-claw-storage-proxy-result",
+          requestId: "req-3",
+          error: expect.stringContaining("Unknown storage proxy method"),
+        }),
+        "*",
+      );
+    });
+
+    it("builds web share File instances from native files and binary buffers", () => {
+      const component = new ShadowClawFileViewer() as any;
+
+      const native = new File(["content"], "test.txt", {
+        type: "text/plain",
+      });
+      expect(component.buildWebShareFile({ nativeFile: native })).toBe(native);
+
+      const binaryFile = component.buildWebShareFile({
+        name: "data.bin",
+        binaryContent: new Uint8Array([1, 2, 3]),
+        mimeType: "application/octet-stream",
+      });
+      expect(binaryFile).toBeInstanceOf(File);
+      expect(binaryFile.name).toBe("data.bin");
+
+      expect(component.buildWebShareFile(null)).toBeNull();
+      expect(component.buildWebShareFile({ binaryContent: null })).toBeNull();
+      expect(
+        component.buildWebShareFile({ binaryContent: new Uint8Array([]) }),
+      ).toBeNull();
+    });
+
+    it("cleans up resources and disconnects observers on disconnectedCallback", () => {
+      const component = new ShadowClawFileViewer() as any;
+      const disposeMock = jest.fn();
+      component.broadcastProxy = { dispose: disposeMock };
+      const disconnectMock = jest.fn();
+      component.themeObserver = { disconnect: disconnectMock };
+      const revokeMock = jest.spyOn(component, "revokeObjectUrl");
+
+      component.disconnectedCallback();
+
+      expect(disposeMock).toHaveBeenCalledTimes(1);
+      expect(component.broadcastProxy).toBeNull();
+      expect(disconnectMock).toHaveBeenCalledTimes(1);
+      expect(component.themeObserver).toBeNull();
+      expect(revokeMock).toHaveBeenCalledTimes(1);
+    });
+
+    it("synchronizes iframe theme with document dark/light mode class", () => {
+      const component = new ShadowClawFileViewer() as any;
+      const mockPostMessage = jest.fn();
+      component.previewFrameWindow = { postMessage: mockPostMessage };
+
+      document.documentElement.className = "dark-theme";
+      component.syncIframeTheme();
+
+      expect(mockPostMessage).toHaveBeenCalledWith(
+        expect.objectContaining({
+          type: "shadow-claw-theme-update",
+        }),
+        "*",
+      );
+    });
+
+    it("handles openFolderInFilesView, openWorkspaceLink, and viewer dismissal", async () => {
+      const component = new ShadowClawFileViewer() as any;
+      component.db = {} as any;
+
+      // 1. openFolderInFilesView
+      await component.openFolderInFilesView("docs/subfolder/");
+      expect(orchestratorStore.setCurrentPath).toHaveBeenCalledWith(
+        component.db,
+        "docs/subfolder",
+      );
+      expect(fileViewerStore.closeFile).toHaveBeenCalled();
+
+      // 2. openWorkspaceLink with extension
+      await component.openWorkspaceLink("notes.txt", "docs");
+      expect(fileViewerStore.openFile).toHaveBeenCalledWith(
+        component.db,
+        expect.any(String),
+        expect.any(String),
+      );
+
+      // 3. canDismissViewer when not dirty
+      component.isDirty = false;
+      const canDismiss = await component.canDismissViewer();
+      expect(canDismiss).toBe(true);
+
+      // 4. canDismissViewer when dirty
+      component.isDirty = true;
+      component.requestConfirmation = jest.fn<any>().mockResolvedValue(true);
+      const canDismissDirty = await component.canDismissViewer();
+      expect(canDismissDirty).toBe(true);
+
+      // 5. requestCloseViewer
+      component.isDirty = false;
+      const closed = await component.requestCloseViewer();
+      expect(closed).toBe(true);
+      expect(fileViewerStore.closeFile).toHaveBeenCalled();
+    });
+
+    it("handles handleSave, handleShareFile, and toggleFullscreenMode", async () => {
+      const { ShadowClawFileViewer } =
+        await import("./shadow-claw-file-viewer.js");
+      const { writeGroupFile } =
+        await import("../../storage/writeGroupFile.js");
+
+      const component = new ShadowClawFileViewer() as any;
+      document.body.appendChild(component);
+      component.db = {} as any;
+
+      // 1. handleSave
+      (fileViewerStore as any).file = {
+        name: "test.txt",
+        path: "docs/test.txt",
+        kind: "text",
+        content: "old content",
+        groupId: "g1",
+      };
+      let editor = component.shadowRoot?.querySelector(".file-editor");
+      if (!editor) {
+        editor = document.createElement("textarea");
+        editor.className = "file-editor";
+        component.shadowRoot?.appendChild(editor);
+      }
+      editor.value = "new content";
+
+      await component.handleSave();
+      expect(writeGroupFile).toHaveBeenCalledWith(
+        component.db,
+        "g1",
+        "docs/test.txt",
+        "new content",
+      );
+
+      // 2. handleShareFile
+      const mockShare = jest.fn<any>().mockResolvedValue(undefined);
+      Object.defineProperty(navigator, "share", {
+        value: mockShare,
+        configurable: true,
+        writable: true,
+      });
+      await component.handleShareFile();
+      expect(mockShare).toHaveBeenCalledWith(
+        expect.objectContaining({ title: "test.txt" }),
+      );
+
+      // 3. renderBinaryPreview - empty
+      const contentEl = document.createElement("div");
+      component.renderBinaryPreview(contentEl, {
+        name: "empty.bin",
+        mimeType: "application/octet-stream",
+        binaryContent: new Uint8Array(0),
+      });
+      expect(contentEl.textContent).toBe("Binary content unavailable.");
+
+      // 4. renderBinaryPreview - image
+      (global.URL.createObjectURL as any) = jest
+        .fn<any>()
+        .mockReturnValue("blob:image-url");
+      component.renderBinaryPreview(contentEl, {
+        name: "img.jpg",
+        mimeType: "image/jpeg",
+        binaryContent: new Uint8Array([1, 2, 3]),
+      });
+      expect(contentEl.querySelector("img")).not.toBeNull();
+
+      // 5. renderBinaryPreview - video
+      component.renderBinaryPreview(contentEl, {
+        name: "clip.mp4",
+        mimeType: "video/mp4",
+        binaryContent: new Uint8Array([1, 2, 3]),
+      });
+      expect(contentEl.querySelector("video")).not.toBeNull();
+
+      // 6. renderBinaryPreview - audio
+      component.renderBinaryPreview(contentEl, {
+        name: "song.mp3",
+        mimeType: "audio/mp3",
+        binaryContent: new Uint8Array([1, 2, 3]),
+      });
+      expect(contentEl.querySelector("audio")).not.toBeNull();
+
+      // 7. renderBinaryPreview - iframe/pdf
+      component.renderBinaryPreview(contentEl, {
+        name: "doc.pdf",
+        mimeType: "application/pdf",
+        binaryContent: new Uint8Array([1, 2, 3]),
+      });
+      expect(contentEl.querySelector("iframe")).not.toBeNull();
+
+      // 8. resetContent
+      component.resetContent();
+      expect(component.isFullscreenMode).toBe(false);
+
+      document.body.removeChild(component);
+    });
+  });
 });

package/src/components/shadow-claw-file-viewer/shadow-claw-file-viewer.ts

@@ -251,6 +251,11 @@ export class ShadowClawFileViewer extends ShadowClawElement {
       return;
     }
 
+    const content = root.querySelector(".file-content");
+    content?.addEventListener("click", (event: Event) => {
+      void this.handlePreviewLinkClick(event as MouseEvent);
+    });
+
     const modal = root.querySelector(".file-modal");
     modal?.addEventListener("cancel", (event: Event) => {
       event.preventDefault();
@@ -706,9 +711,8 @@ export class ShadowClawFileViewer extends ShadowClawElement {
 
     const current = fileViewerStore.file;
     const filePath = current?.path || current?.name || "";
-    const routeDir = getFileRouteDirPath(
-      orchestratorStore.activeGroupId,
-      filePath,
+    const routeDir = applyBasePath(
+      getFileRouteDirPath(orchestratorStore.activeGroupId, filePath),
     );
     const resolved = resolveHrefAgainstRoute(
       payload.href,
@@ -1110,9 +1114,8 @@ export class ShadowClawFileViewer extends ShadowClawElement {
       return html;
     }
 
-    const routeDir = getFileRouteDirPath(
-      orchestratorStore.activeGroupId,
-      filePath,
+    const routeDir = applyBasePath(
+      getFileRouteDirPath(orchestratorStore.activeGroupId, filePath),
     );
     const parsed = new DOMParser().parseFromString(html, "text/html");
 
@@ -1509,9 +1512,8 @@ export class ShadowClawFileViewer extends ShadowClawElement {
     const current = fileViewerStore.file;
     const basePath = current?.path || current?.name || "";
     const href = link.getAttribute("href") || "";
-    const routeDir = getFileRouteDirPath(
-      orchestratorStore.activeGroupId,
-      basePath,
+    const routeDir = applyBasePath(
+      getFileRouteDirPath(orchestratorStore.activeGroupId, basePath),
     );
     const resolved = resolveHrefAgainstRoute(
       href,

package/src/components/shadow-claw-files/shadow-claw-files.css

@@ -361,7 +361,8 @@
 
 .files__new-label,
 .files__rename-label,
-.files__paste-rename-label {
+.files__paste-rename-label,
+.files__upload-conflict-rename-label {
   color: var(--shadow-claw-text-secondary);
   font-size: var(--shadow-claw-font-size-sm);
   font-weight: 600;
@@ -369,7 +370,8 @@
 
 .files__new-input,
 .files__rename-input,
-.files__paste-rename-input {
+.files__paste-rename-input,
+.files__upload-conflict-rename-input {
   background-color: var(--shadow-claw-bg-primary);
   border: 0.0625rem solid var(--shadow-claw-border-color);
   border-radius: var(--shadow-claw-radius-s);
@@ -379,7 +381,8 @@
   padding: 0.375rem 0.5rem;
 }
 
-.files__paste-rename-container {
+.files__paste-rename-container,
+.files__upload-conflict-rename-container {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
@@ -401,7 +404,8 @@
 
 .files__new-input:focus,
 .files__rename-input:focus,
-.files__paste-rename-input:focus {
+.files__paste-rename-input:focus,
+.files__upload-conflict-rename-input:focus {
   border-color: var(--shadow-claw-accent-primary);
   box-shadow: 0 0 0 0.125rem var(--shadow-claw-bg-tertiary);
   outline: none;
@@ -469,7 +473,8 @@
   opacity: 0.5;
 }
 
-.files__paste-dialog {
+.files__paste-dialog,
+.files__upload-conflict-dialog {
   background-color: var(--shadow-claw-bg-primary);
   border: 0.0625rem solid var(--shadow-claw-border-color);
   border-radius: var(--shadow-claw-radius-l, 1.5rem);
@@ -479,31 +484,36 @@
   width: calc(100vw - 2rem);
 }
 
-.files__paste-dialog::backdrop {
+.files__paste-dialog::backdrop,
+.files__upload-conflict-dialog::backdrop {
   background-color: rgba(0, 0, 0, 0.35);
 }
 
-.files__paste-form {
+.files__paste-form,
+.files__upload-conflict-form {
   display: flex;
   flex-direction: column;
   gap: 1rem;
   padding: 1.5rem;
 }
 
-.files__paste-title {
+.files__paste-title,
+.files__upload-conflict-title {
   font-size: 1.1rem;
   font-weight: 700;
   margin: 0;
 }
 
-.files__paste-message {
+.files__paste-message,
+.files__upload-conflict-message {
   color: var(--shadow-claw-text-secondary);
   font-size: var(--shadow-claw-font-size-sm);
   line-height: 1.4;
   margin: 0;
 }
 
-.files__paste-actions {
+.files__paste-actions,
+.files__upload-conflict-actions {
   display: flex;
   gap: 0.5rem;
   justify-content: flex-end;
@@ -514,7 +524,10 @@
 .files__paste-continue,
 .files__paste-apply,
 .files__paste-ok,
-.files__paste-overwrite {
+.files__paste-overwrite,
+.files__upload-conflict-cancel,
+.files__upload-conflict-ok,
+.files__upload-conflict-overwrite {
   background-color: transparent;
   border: 0.0625rem solid var(--shadow-claw-border-color);
   border-radius: var(--shadow-claw-radius-pill);
@@ -528,13 +541,16 @@
   transition: all 0.15s ease;
 }
 
-.files__paste-overwrite {
+.files__paste-overwrite,
+.files__upload-conflict-overwrite {
   border-color: var(--shadow-claw-error-color);
   color: var(--shadow-claw-error-color);
 }
 
 .files__paste-overwrite:hover,
-.files__paste-overwrite:focus-visible {
+.files__paste-overwrite:focus-visible,
+.files__upload-conflict-overwrite:hover,
+.files__upload-conflict-overwrite:focus-visible {
   background-color: var(--shadow-claw-error-color);
   color: var(--shadow-claw-on-error, white);
   outline: none;
@@ -542,7 +558,8 @@
 
 .files__paste-continue,
 .files__paste-apply,
-.files__paste-ok {
+.files__paste-ok,
+.files__upload-conflict-ok {
   background-color: var(--shadow-claw-text-primary);
   border-color: var(--shadow-claw-text-primary);
   color: var(--shadow-claw-bg-primary);
@@ -553,7 +570,9 @@
 .files__paste-apply:hover,
 .files__paste-apply:focus-visible,
 .files__paste-ok:hover,
-.files__paste-ok:focus-visible {
+.files__paste-ok:focus-visible,
+.files__upload-conflict-ok:hover,
+.files__upload-conflict-ok:focus-visible {
   background-color: var(--shadow-claw-accent-primary);
   border-color: var(--shadow-claw-accent-primary);
   color: var(--shadow-claw-on-primary);
@@ -561,7 +580,9 @@
 }
 
 .files__paste-cancel:hover,
-.files__paste-cancel:focus-visible {
+.files__paste-cancel:focus-visible,
+.files__upload-conflict-cancel:hover,
+.files__upload-conflict-cancel:focus-visible {
   border-color: var(--shadow-claw-text-primary);
   box-shadow: var(--shadow-claw-shadow-md);
   outline: none;
@@ -570,7 +591,10 @@
 .files__paste-cancel:disabled,
 .files__paste-continue:disabled,
 .files__paste-apply:disabled,
-.files__paste-ok:disabled {
+.files__paste-ok:disabled,
+.files__upload-conflict-cancel:disabled,
+.files__upload-conflict-ok:disabled,
+.files__upload-conflict-overwrite:disabled {
   cursor: not-allowed;
   opacity: 0.6;
 }

package/src/components/shadow-claw-files/shadow-claw-files.html

@@ -172,6 +172,41 @@
         </div>
       </form>
     </shadow-claw-dialog>
+    <shadow-claw-dialog
+      dialog-class="files__upload-conflict-dialog"
+      dialog-aria-label="File upload conflict"
+    >
+      <form class="files__upload-conflict-form" method="dialog">
+        <h3 class="files__upload-conflict-title">File Already Exists</h3>
+        <p class="files__upload-conflict-message"></p>
+        <div class="files__upload-conflict-rename-container">
+          <label
+            class="files__upload-conflict-rename-label"
+            for="files-upload-conflict-name"
+            >New Name</label
+          >
+          <input
+            class="files__upload-conflict-rename-input"
+            id="files-upload-conflict-name"
+            name="files-upload-conflict-name"
+            type="text"
+            autocomplete="off"
+            required
+          />
+        </div>
+        <div class="files__upload-conflict-actions">
+          <button class="files__upload-conflict-cancel" type="button">
+            Cancel
+          </button>
+          <button class="files__upload-conflict-overwrite" type="button">
+            Overwrite
+          </button>
+          <button class="files__upload-conflict-ok" type="submit">
+            Rename
+          </button>
+        </div>
+      </form>
+    </shadow-claw-dialog>
     <div class="files__content">
       <div class="files__terminal-slot" data-terminal-slot hidden></div>
       <p class="files__drop-hint">Drop files here to upload</p>