@zivye/dsh-img-save 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,57 @@
+# DSH Image Download Plugin
+
+Adds a download button when the pointer is over an image in a DeepSeek Harness conversation.
+
+<img src="./doc/example.png" alt="example" width="250" style="display: block; margin: auto;">
+
+## Design
+
+- **Client-only behavior:** the plugin uses the exact image URL that DSH is already rendering. It does not read local files, upload image bytes, run shell commands, or call a remote service.
+- **No polling or DOM observers:** pointer, scroll, and resize events drive positioning. This avoids observer feedback loops and UI freezes.
+- **Preview-safe interaction:** pointer/click events on the download button are stopped so clicking it does not trigger the image's built-in preview/lightbox action.
+- **Local URLs:** uses the browser download mechanism for `file:`, `blob:`, `data:`, and browser-accessible HTTP(S) image URLs. Browser security policy ultimately decides whether a particular local URL may be downloaded.
+
+## Project layout
+
+```text
+src/
+  host/index.js       # empty Host plugin; package is client-only
+  client/index.js     # Cordis Client plugin source
+lib/
+  client.js           # esbuild ESM bundle of src/client/index.js
+cordis.patch.yml      # DSH profile bundle registration snippet
+esbuild.config.mjs    # bundles src/client -> lib/client (ESM, React external)
+package.json
+README.md
+LICENSE
+```
+
+## Development
+
+The client entry is an ESM source file. The published package ships an esbuild
+bundle at `lib/client.js`, which the 1024 Store loads through
+`exports["./client"]`. Build the bundle locally:
+
+```bash
+npm install
+npm run build
+```
+
+`npm run check` runs a syntax-only check on the source files.
+
+## Intended DSH integration
+
+The client bundle is a Cordis plugin which registers with the queried
+`shell.overlay` slot. It requires the DSH client runtime to provide:
+
+- `slots.inject()` and `slots.register()`;
+- the `shell.overlay` slot;
+- React (provided as an npm dependency) and the dynamic client builtins
+  (`document`, `window`, `requestAnimationFrame`).
+
+`cordis.patch.yml` mounts the plugin into the Web roster of any DSH profile
+that installs this package.
+
+## License
+
+MIT. See [LICENSE](./LICENSE).

package/cordis.patch.yml

@@ -0,0 +1,5 @@
+# Image-save bundle patch: mounts the plugin row into the Web roster
+# of any profile that installs this package.
+- insert:
+    - id: dsh-img-save
+      name: '@zivye/dsh-img-save'

package/lib/.gitignore

@@ -0,0 +1,3 @@
+*
+!.gitignore
+!client.js

package/lib/client.js

@@ -0,0 +1,165 @@
+// src/client/index.js
+import React from "react";
+var OVERLAY_SLOT = "shell.overlay";
+var OVERLAY_ID = "image-download-overlay";
+var BUTTON_SIZE = 34;
+var INSET = 6;
+function imageFromTarget(target) {
+  let node = target;
+  while (node && node !== document.body) {
+    if (node instanceof HTMLImageElement) return node;
+    node = node.parentNode;
+  }
+  return null;
+}
+function isDownloadableImage(image) {
+  if (!(image instanceof HTMLImageElement)) return false;
+  if (image.closest(".dsh-image-download-overlay")) return false;
+  const src = image.currentSrc || image.src;
+  if (!src) return false;
+  const rect = image.getBoundingClientRect();
+  return rect.width >= 24 && rect.height >= 24;
+}
+function positionFor(image) {
+  const rect = image.getBoundingClientRect();
+  return {
+    left: Math.max(INSET, rect.right - BUTTON_SIZE - INSET),
+    top: Math.max(INSET, rect.bottom - BUTTON_SIZE - INSET)
+  };
+}
+function nameFor(src) {
+  try {
+    const file = new URL(src, window.location.href).pathname.split("/").pop();
+    if (file && /\.(png|jpe?g|webp|gif|svg|avif)$/i.test(file)) return file;
+  } catch {
+  }
+  return `image-${Date.now()}.png`;
+}
+function download(src) {
+  const link = document.createElement("a");
+  link.href = src;
+  link.download = nameFor(src);
+  link.rel = "noopener";
+  link.style.display = "none";
+  document.body.appendChild(link);
+  link.click();
+  link.remove();
+}
+function DownloadIcon() {
+  return React.createElement(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true"
+    },
+    React.createElement("path", { d: "M12 3v12" }),
+    React.createElement("path", { d: "m7 10 5 5 5-5" }),
+    React.createElement("path", { d: "M5 21h14" })
+  );
+}
+function ImageDownloadOverlay() {
+  const [active, setActive] = React.useState(null);
+  React.useEffect(() => {
+    let current = null;
+    let frame = 0;
+    const clear = () => {
+      current = null;
+      setActive(null);
+    };
+    const reposition = () => {
+      frame = 0;
+      if (!current || !isDownloadableImage(current)) {
+        clear();
+        return;
+      }
+      setActive({ image: current, src: current.currentSrc || current.src, ...positionFor(current) });
+    };
+    const schedule = () => {
+      if (frame) return;
+      frame = window.requestAnimationFrame(reposition);
+    };
+    const onPointerMove = (event) => {
+      const image = imageFromTarget(event.target);
+      if (!isDownloadableImage(image)) {
+        if (current) {
+          const rect = current.getBoundingClientRect();
+          const stillOverImage = event.clientX >= rect.left && event.clientX <= rect.right && event.clientY >= rect.top && event.clientY <= rect.bottom;
+          if (!stillOverImage) clear();
+        }
+        return;
+      }
+      current = image;
+      schedule();
+    };
+    window.addEventListener("pointermove", onPointerMove, true);
+    window.addEventListener("scroll", schedule, true);
+    window.addEventListener("resize", schedule);
+    return () => {
+      window.removeEventListener("pointermove", onPointerMove, true);
+      window.removeEventListener("scroll", schedule, true);
+      window.removeEventListener("resize", schedule);
+      if (frame) window.cancelAnimationFrame(frame);
+    };
+  }, []);
+  if (!active) return null;
+  const stop = (event) => event.stopPropagation();
+  const onClick = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    const src = active.image.currentSrc || active.image.src || active.src;
+    if (src) download(src);
+  };
+  return React.createElement(
+    "button",
+    {
+      type: "button",
+      className: "dsh-image-download-button",
+      style: { left: `${active.left}px`, top: `${active.top}px` },
+      title: "\u4E0B\u8F7D\u56FE\u7247",
+      "aria-label": "\u4E0B\u8F7D\u56FE\u7247",
+      onPointerDown: stop,
+      onMouseDown: stop,
+      onClick
+    },
+    React.createElement(DownloadIcon)
+  );
+}
+var index_default = {
+  inject: ["slots"],
+  apply(ctx) {
+    const slots = ctx.slots;
+    const disposeStyles = ctx.styles?.insert?.(`
+      .dsh-image-download-overlay { position: fixed; inset: 0; z-index: 9999; pointer-events: none; }
+      .dsh-image-download-button {
+        position: fixed; width: ${BUTTON_SIZE}px; height: ${BUTTON_SIZE}px; padding: 0; border: 0; border-radius: 9px;
+        display: flex; align-items: center; justify-content: center; pointer-events: auto; cursor: pointer;
+        color: #fff; background: rgba(23, 23, 27, .88); box-shadow: 0 3px 12px rgba(0, 0, 0, .30);
+        backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
+        transition: background .12s ease, transform .12s ease;
+      }
+      .dsh-image-download-button:hover { background: rgba(53, 53, 61, .96); transform: scale(1.06); }
+      .dsh-image-download-button:active { transform: scale(.94); }
+      .dsh-image-download-button svg { width: 18px; height: 18px; display: block; }
+    `);
+    const unregister = slots.inject(OVERLAY_SLOT, () => slots.register(
+      { name: OVERLAY_SLOT, id: OVERLAY_ID, order: 1e3 },
+      () => React.createElement(
+        "div",
+        { className: "dsh-image-download-overlay" },
+        React.createElement(ImageDownloadOverlay)
+      )
+    ));
+    ctx.effect(() => () => {
+      unregister?.();
+      disposeStyles?.();
+    });
+  }
+};
+export {
+  index_default as default
+};

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@zivye/dsh-img-save",
+  "version": "0.1.0",
+  "description": "Hover-to-download buttons for images in DeepSeek Harness conversations.",
+  "type": "module",
+  "license": "MIT",
+  "main": "./src/host/index.js",
+  "exports": {
+    ".": "./src/host/index.js",
+    "./client": {
+      "default": "./lib/client.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "cordis.patch.yml",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "node esbuild.config.mjs",
+    "check": "node --check src/client/index.js && node --check src/host/index.js"
+  },
+  "devDependencies": {
+    "esbuild": "^0.24.0"
+  },
+  "dependencies": {
+    "react": "^18.2.0"
+  },
+  "dsh": {
+    "bundle": {
+      "patch": "./cordis.patch.yml"
+    },
+    "client": {
+      "inject": [
+        "@deepseek-ai/dsh-client-ui-slots"
+      ],
+      "platform": "web"
+    }
+  },
+  "keywords": [
+    "deepseek-harness",
+    "dsh",
+    "cordis",
+    "image",
+    "download"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/client/index.js

@@ -0,0 +1,186 @@
+/**
+ * Image Download Client Plugin
+ *
+ * This source uses ordinary ESM for a publishable package. The final DSH client
+ * bundle must provide React and Cordis's `slots` client Service.
+ */
+import React from 'react'
+
+const OVERLAY_SLOT = 'shell.overlay'
+const OVERLAY_ID = 'image-download-overlay'
+const BUTTON_SIZE = 34
+const INSET = 6
+
+function imageFromTarget(target) {
+  let node = target
+  while (node && node !== document.body) {
+    if (node instanceof HTMLImageElement) return node
+    node = node.parentNode
+  }
+  return null
+}
+
+function isDownloadableImage(image) {
+  if (!(image instanceof HTMLImageElement)) return false
+  if (image.closest('.dsh-image-download-overlay')) return false
+  const src = image.currentSrc || image.src
+  if (!src) return false
+  const rect = image.getBoundingClientRect()
+  return rect.width >= 24 && rect.height >= 24
+}
+
+function positionFor(image) {
+  const rect = image.getBoundingClientRect()
+  return {
+    left: Math.max(INSET, rect.right - BUTTON_SIZE - INSET),
+    top: Math.max(INSET, rect.bottom - BUTTON_SIZE - INSET),
+  }
+}
+
+function nameFor(src) {
+  try {
+    const file = new URL(src, window.location.href).pathname.split('/').pop()
+    if (file && /\.(png|jpe?g|webp|gif|svg|avif)$/i.test(file)) return file
+  } catch {}
+  return `image-${Date.now()}.png`
+}
+
+function download(src) {
+  const link = document.createElement('a')
+  link.href = src
+  link.download = nameFor(src)
+  link.rel = 'noopener'
+  link.style.display = 'none'
+  document.body.appendChild(link)
+  link.click()
+  link.remove()
+}
+
+function DownloadIcon() {
+  return React.createElement(
+    'svg',
+    {
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      stroke: 'currentColor',
+      strokeWidth: '2',
+      strokeLinecap: 'round',
+      strokeLinejoin: 'round',
+      'aria-hidden': 'true',
+    },
+    React.createElement('path', { d: 'M12 3v12' }),
+    React.createElement('path', { d: 'm7 10 5 5 5-5' }),
+    React.createElement('path', { d: 'M5 21h14' }),
+  )
+}
+
+function ImageDownloadOverlay() {
+  const [active, setActive] = React.useState(null)
+
+  React.useEffect(() => {
+    let current = null
+    let frame = 0
+
+    const clear = () => {
+      current = null
+      setActive(null)
+    }
+
+    const reposition = () => {
+      frame = 0
+      if (!current || !isDownloadableImage(current)) {
+        clear()
+        return
+      }
+      setActive({ image: current, src: current.currentSrc || current.src, ...positionFor(current) })
+    }
+
+    const schedule = () => {
+      if (frame) return
+      frame = window.requestAnimationFrame(reposition)
+    }
+
+    const onPointerMove = (event) => {
+      const image = imageFromTarget(event.target)
+      if (!isDownloadableImage(image)) {
+        if (current) {
+          const rect = current.getBoundingClientRect()
+          const stillOverImage = event.clientX >= rect.left && event.clientX <= rect.right && event.clientY >= rect.top && event.clientY <= rect.bottom
+          if (!stillOverImage) clear()
+        }
+        return
+      }
+      current = image
+      schedule()
+    }
+
+    window.addEventListener('pointermove', onPointerMove, true)
+    window.addEventListener('scroll', schedule, true)
+    window.addEventListener('resize', schedule)
+    return () => {
+      window.removeEventListener('pointermove', onPointerMove, true)
+      window.removeEventListener('scroll', schedule, true)
+      window.removeEventListener('resize', schedule)
+      if (frame) window.cancelAnimationFrame(frame)
+    }
+  }, [])
+
+  if (!active) return null
+
+  const stop = (event) => event.stopPropagation()
+  const onClick = (event) => {
+    event.preventDefault()
+    event.stopPropagation()
+    const src = active.image.currentSrc || active.image.src || active.src
+    if (src) download(src)
+  }
+
+  return React.createElement(
+    'button',
+    {
+      type: 'button',
+      className: 'dsh-image-download-button',
+      style: { left: `${active.left}px`, top: `${active.top}px` },
+      title: '下载图片',
+      'aria-label': '下载图片',
+      onPointerDown: stop,
+      onMouseDown: stop,
+      onClick,
+    },
+    React.createElement(DownloadIcon),
+  )
+}
+
+export default {
+  inject: ['slots'],
+  apply(ctx) {
+    const slots = ctx.slots
+    const disposeStyles = ctx.styles?.insert?.(`
+      .dsh-image-download-overlay { position: fixed; inset: 0; z-index: 9999; pointer-events: none; }
+      .dsh-image-download-button {
+        position: fixed; width: ${BUTTON_SIZE}px; height: ${BUTTON_SIZE}px; padding: 0; border: 0; border-radius: 9px;
+        display: flex; align-items: center; justify-content: center; pointer-events: auto; cursor: pointer;
+        color: #fff; background: rgba(23, 23, 27, .88); box-shadow: 0 3px 12px rgba(0, 0, 0, .30);
+        backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
+        transition: background .12s ease, transform .12s ease;
+      }
+      .dsh-image-download-button:hover { background: rgba(53, 53, 61, .96); transform: scale(1.06); }
+      .dsh-image-download-button:active { transform: scale(.94); }
+      .dsh-image-download-button svg { width: 18px; height: 18px; display: block; }
+    `)
+
+    const unregister = slots.inject(OVERLAY_SLOT, () => slots.register(
+      { name: OVERLAY_SLOT, id: OVERLAY_ID, order: 1000 },
+      () => React.createElement(
+        'div',
+        { className: 'dsh-image-download-overlay' },
+        React.createElement(ImageDownloadOverlay),
+      ),
+    ))
+
+    ctx.effect(() => () => {
+      unregister?.()
+      disposeStyles?.()
+    })
+  },
+}

package/src/host/index.js

@@ -0,0 +1,8 @@
+/**
+ * Host half intentionally has no side effects.
+ *
+ * Downloads are started in the browser from the image URL already authorized
+ * and rendered by DSH. Keeping the implementation client-only means the
+ * plugin never reads local files or sends image bytes to a server.
+ */
+export function apply() {}