@goodandready/dsh-image-gen 0.11.42 → 0.12.0

package/lib/client.js

@@ -60,10 +60,11 @@ window.__ModuleLoader__.load({
       return (k, def) => def || k
     }
 
-    async function fetchJson(path, options = {}) {
+    async function fetchWithTimeout(path, options = {}) {
       const { timeoutMs = 15000, signal, ...rest } = options
       let timer = null
       let sig = signal
+      let removeCallerAbort = null
 
       if (!sig) {
         if (typeof AbortSignal !== 'undefined' && typeof AbortSignal.timeout === 'function') {
@@ -76,10 +77,38 @@ window.__ModuleLoader__.load({
           sig = ctrl.signal
         }
       } else if (typeof AbortSignal !== 'undefined' && typeof AbortSignal.any === 'function') {
-        const timeoutSig = typeof AbortSignal.timeout === 'function' ? AbortSignal.timeout(timeoutMs) : null
+        const timeoutSig = typeof AbortSignal.timeout === 'function'
+          ? AbortSignal.timeout(timeoutMs)
+          : (() => {
+              const ctrl = new AbortController()
+              timer = setTimeout(() => {
+                try { ctrl.abort(new Error('Request timeout')) } catch (_) {}
+              }, timeoutMs)
+              return ctrl.signal
+            })()
         if (timeoutSig) {
           sig = AbortSignal.any([signal, timeoutSig])
         }
+      } else if (typeof AbortController !== 'undefined') {
+        // Fallback for environments lacking AbortSignal.any when caller provides signal
+        const ctrl = new AbortController()
+        if (signal.aborted) {
+          try { ctrl.abort(signal.reason) } catch (_) { ctrl.abort() }
+        } else {
+          const onCallerAbort = () => {
+            try { ctrl.abort(signal.reason) } catch (_) { ctrl.abort() }
+          }
+          if (typeof signal.addEventListener === 'function') {
+            signal.addEventListener('abort', onCallerAbort, { once: true })
+            removeCallerAbort = () => {
+              try { signal.removeEventListener('abort', onCallerAbort) } catch (_) {}
+            }
+          }
+        }
+        timer = setTimeout(() => {
+          try { ctrl.abort(new Error('Request timeout')) } catch (_) {}
+        }, timeoutMs)
+        sig = ctrl.signal
       }
 
       try {
@@ -87,8 +116,10 @@ window.__ModuleLoader__.load({
         return res
       } finally {
         if (timer) clearTimeout(timer)
+        if (removeCallerAbort) removeCallerAbort()
       }
     }
+    const fetchJson = fetchWithTimeout
     // -------------------------------------------------------------- CSS & Design System
     function ensureCss() {
       if (typeof document === 'undefined') return
@@ -2877,6 +2908,9 @@ window.__ModuleLoader__.load({
       'vault.search': 'Search prompt or tags...',
       'vault.seed': 'Seed',
       'vault.title': 'Asset Browser & Vault',
+      'vault.exportDesign': '🎨 OpenDesign',
+      'vault.exportDesignCopied': 'Figma/Penpot snippet & Data-URL copied to clipboard!',
+      'vault.exportDesignFailed': 'Failed to export design snippet',
       'f.comfyTemplate': 'ComfyUI Workflow Template',
       'f.comfyTemplateHint': 'Pre-vetted workflow template (e.g. SDXL txt2img, img2img, InstantID face transfer, RealESRGAN upscaler).',
       'f.activeProjectProfile': 'Active Project Profile',
@@ -3188,6 +3222,9 @@ window.__ModuleLoader__.load({
       'vault.search': '搜索提示词或标签...',
       'vault.seed': '种子',
       'vault.title': '图像素材库与浏览器',
+      'vault.exportDesign': '🎨 OpenDesign',
+      'vault.exportDesignCopied': 'Figma/Penpot 片段与 Data-URL 已复制到剪贴板！',
+      'vault.exportDesignFailed': '导出设计片段失败',
       'f.comfyTemplate': 'ComfyUI 工作流模板',
       'f.comfyTemplateHint': '经过验证的预设工作流模板（例如 SDXL 文生图、图生图、InstantID 人脸迁移、RealESRGAN 放大器）。',
       'f.activeProjectProfile': '活动项目视觉配置',
@@ -3650,6 +3687,24 @@ window.__ModuleLoader__.load({
         }
       }
 
+      const handleExportDesign = (item) => {
+        const assetId = item.id || item.attachmentId
+        fetchJson('/dsh-image-gen/design/export?image=' + encodeURIComponent(assetId) + '&name=' + encodeURIComponent(item.prompt || 'asset'))
+          .then((r) => r.json())
+          .then((data) => {
+            if (data && data.ok && data.export) {
+              const snippet = data.export.figmaHtml || data.export.dataUrl
+              if (typeof navigator !== 'undefined' && navigator.clipboard) {
+                navigator.clipboard.writeText(snippet)
+                showFeedback(t('vault.exportDesignCopied') || 'Figma/Penpot snippet & Data-URL copied to clipboard!')
+              }
+            } else {
+              showFeedback(t('vault.exportDesignFailed') || 'Failed to export design snippet')
+            }
+          })
+          .catch(() => showFeedback(t('vault.exportDesignFailed') || 'Failed to export design snippet'))
+      }
+
       return react.createElement(
         'div',
         { className: 'ig-vault-container', style: { display: 'flex', flexDirection: 'column', gap: '14px', width: '100%' } },
@@ -3793,6 +3848,7 @@ window.__ModuleLoader__.load({
                 { style: { display: 'flex', gap: '8px', justifyContent: 'flex-end', marginTop: '6px' } },
                 react.createElement('button', { type: 'button', className: 'ig-tab-btn', onClick: () => handleReroll(selected) }, '🎲 ' + (t('vault.reroll') || 'Re-roll')),
                 react.createElement('button', { type: 'button', className: 'ig-tab-btn', onClick: () => handleInsert(selected) }, '💬 ' + (t('vault.insert') || 'Insert in Chat')),
+                react.createElement('button', { type: 'button', className: 'ig-tab-btn', onClick: () => handleExportDesign(selected), title: 'Export for Figma / Penpot / OpenDesign' }, t('vault.exportDesign') || '🎨 OpenDesign'),
                 react.createElement(
                   'a',
                   { href: selected.url || selected.thumbnailUrl, download: 'vault-asset-' + (selected.id || 'image') + '.png', className: 'ig-tab-btn', style: { textDecoration: 'none', display: 'inline-flex', alignItems: 'center' } },

package/lib/design-export.js

@@ -0,0 +1,205 @@
+// @ts-check
+import path from 'node:path'
+import fs from 'node:fs/promises'
+import { isTrustedLocalRequest, resolveInside } from './security.js'
+
+/**
+ * Format image buffer or SVG string into targeted design clipboard payloads.
+ *
+ * @param {object} params
+ * @param {Buffer} params.buffer Image bytes
+ * @param {string} [params.mimeType] MIME type (image/png, image/jpeg, image/svg+xml, etc.)
+ * @param {string} [params.name] Asset name or filename
+ * @param {number} [params.width] Width in px
+ * @param {number} [params.height] Height in px
+ * @param {string} [params.target] 'all' | 'opendesign' | 'clipboard_svg' | 'clipboard_dataurl' | 'penpot_snippet' | 'figma_html'
+ * @returns {object} Formatted design payloads
+ */
+export function formatDesignExportPayload({
+  buffer,
+  mimeType = 'image/png',
+  name = 'design-asset',
+  width = 1024,
+  height = 1024,
+  target = 'all',
+}) {
+  const isSvg = mimeType.includes('svg') || (buffer && buffer.subarray(0, 100).toString('utf8').includes('<svg'))
+  const base64Data = buffer ? buffer.toString('base64') : ''
+  const effectiveMime = isSvg ? 'image/svg+xml' : (mimeType || 'image/png')
+  const dataUrl = `data:${effectiveMime};base64,${base64Data}`
+  const svgMarkup = isSvg && buffer ? buffer.toString('utf8') : ''
+
+  const safeName = String(name || 'asset').replace(/[^a-zA-Z0-9_-]/g, '_')
+
+  // HTML clipboard snippet compatible with Figma / Penpot / browser paste
+  const figmaHtml = isSvg && svgMarkup
+    ? svgMarkup
+    : `<img src="${dataUrl}" alt="${safeName}" width="${width}" height="${height}" style="max-width:100%;height:auto;" />`
+
+  // Penpot-friendly snippet (SVG wrapper or embedded image object)
+  const penpotSnippet = isSvg && svgMarkup
+    ? svgMarkup
+    : `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}"><image href="${dataUrl}" width="${width}" height="${height}"/></svg>`
+
+  // CSS snippet
+  const cssBackground = `background-image: url("${dataUrl}");\nbackground-size: contain;\nbackground-repeat: no-repeat;`
+
+  return {
+    name: safeName,
+    mimeType: effectiveMime,
+    isSvg,
+    width,
+    height,
+    dataUrl,
+    svgMarkup: svgMarkup || null,
+    figmaHtml,
+    penpotSnippet,
+    cssBackground,
+  }
+}
+
+/**
+ * Push an asset directly into an OpenDesign project folder if the daemon / project directory exists.
+ *
+ * @param {object} params
+ * @param {Buffer} params.buffer Asset bytes
+ * @param {string} params.filename Target filename (e.g. hero-illustration.png)
+ * @param {string} params.projectId OpenDesign project id or name
+ * @param {string} [params.openDesignRoot] Path to .od/projects directory
+ * @returns {Promise<{ ok: boolean, savedPath?: string, error?: string }>}
+ */
+export async function pushAssetToOpenDesignProject({
+  buffer,
+  filename,
+  projectId,
+  openDesignRoot = path.join(process.env.HOME || '/home/vadim', 'open-design', '.od', 'projects'),
+}) {
+  if (!buffer || !buffer.length) {
+    return { ok: false, error: 'Empty buffer provided for design asset export' }
+  }
+  if (!projectId) {
+    return { ok: false, error: 'Missing projectId for OpenDesign export' }
+  }
+
+  const safeProjectId = path.basename(projectId)
+  const safeFilename = path.basename(filename || `asset-${Date.now()}.png`)
+  const projectDir = path.join(openDesignRoot, safeProjectId)
+
+  try {
+    const stats = await fs.stat(projectDir)
+    if (!stats.isDirectory()) {
+      return { ok: false, error: `OpenDesign project path is not a directory: ${projectDir}` }
+    }
+  } catch (err) {
+    return { ok: false, error: `OpenDesign project not found on disk: ${safeProjectId} (${err?.message || err})` }
+  }
+
+  const targetPath = resolveInside(projectDir, safeFilename)
+  try {
+    await fs.writeFile(targetPath, buffer)
+    return {
+      ok: true,
+      savedPath: targetPath,
+      filename: safeFilename,
+      bytes: buffer.length,
+      projectId: safeProjectId,
+    }
+  } catch (err) {
+    return { ok: false, error: `Failed to write file to OpenDesign project: ${err?.message || err}` }
+  }
+}
+
+/**
+ * Register design export routes on DSH web server.
+ *
+ * @param {object} ctx Cordis context
+ * @param {object} deps Dependencies ({ resolveSource })
+ */
+export function registerDesignExportRoutes(ctx, deps) {
+  const { resolveSource } = deps
+
+  ctx.effect(() => {
+    ctx.webServer.register({
+      kind: 'exact',
+      path: '/dsh-image-gen/design/export',
+      handler: async (req, res) => {
+        if (!isTrustedLocalRequest(req)) {
+          res.writeHead(403, { 'Content-Type': 'application/json' })
+          res.end(JSON.stringify({ ok: false, error: 'forbidden: local trusted requests only' }))
+          return
+        }
+
+        if (req.method === 'GET' || req.method === 'POST') {
+          try {
+            const url = new URL(req.url, 'http://localhost')
+            let image = url.searchParams.get('image') || url.searchParams.get('id')
+            let target = url.searchParams.get('target') || 'all'
+            let projectId = url.searchParams.get('projectId') || url.searchParams.get('project') || ''
+            let name = url.searchParams.get('name') || 'exported-asset'
+
+            if (req.method === 'POST') {
+              let bodyStr = ''
+              for await (const chunk of req) bodyStr += chunk
+              if (bodyStr) {
+                try {
+                  const parsed = JSON.parse(bodyStr)
+                  if (parsed.image) image = parsed.image
+                  if (parsed.target) target = parsed.target
+                  if (parsed.projectId) projectId = parsed.projectId
+                  if (parsed.name) name = parsed.name
+                } catch (_) { /* ignore JSON parse error */ }
+              }
+            }
+
+            if (!image) {
+              res.writeHead(400, { 'Content-Type': 'application/json' })
+              res.end(JSON.stringify({ ok: false, error: 'Missing image or id parameter' }))
+              return
+            }
+
+            const source = await resolveSource(ctx, null, image)
+            if (!source || !source.bytes) {
+              res.writeHead(404, { 'Content-Type': 'application/json' })
+              res.end(JSON.stringify({ ok: false, error: `Image source not found: ${image}` }))
+              return
+            }
+
+            const formatted = formatDesignExportPayload({
+              buffer: source.bytes,
+              mimeType: source.mediaType || 'image/png',
+              name,
+              width: source.width || 1024,
+              height: source.height || 1024,
+              target,
+            })
+
+            let openDesignResult = null
+            if (projectId) {
+              const ext = formatted.isSvg ? '.svg' : '.png'
+              const fn = name.endsWith(ext) ? name : `${name}${ext}`
+              openDesignResult = await pushAssetToOpenDesignProject({
+                buffer: source.bytes,
+                filename: fn,
+                projectId,
+              })
+            }
+
+            res.writeHead(200, { 'Content-Type': 'application/json' })
+            res.end(JSON.stringify({
+              ok: true,
+              export: formatted,
+              openDesign: openDesignResult,
+            }))
+          } catch (err) {
+            res.writeHead(500, { 'Content-Type': 'application/json' })
+            res.end(JSON.stringify({ ok: false, error: err?.message || String(err) }))
+          }
+          return
+        }
+
+        res.writeHead(405, { 'Content-Type': 'application/json' })
+        res.end(JSON.stringify({ ok: false, error: 'Method Not Allowed' }))
+      },
+    })
+  }, 'dsh-image-gen: route /dsh-image-gen/design/export')
+}

package/lib/index.js

@@ -56,6 +56,7 @@ import { getStagingSession, reviewStagedEdit, createStagingSession } from './inp
 import { enqueueBatch, getBatchQueue, getBatchProgress, cancelBatch, retryFailedBatchItems, reconcileQueueOnStartup } from './batch-queue.js'
 import { createVariantSession, selectVariantWinner, getVariantSession } from './variant-selection.js'
 import { getImageLineage, getReplayPayload } from './lineage.js'
+import { registerDesignExportRoutes } from './design-export.js'
 import { resetLoopGuard, getLoopGuardState } from './loop-guard.js'
 import { Config, plainConfig, volatileConfig, publicConfig, ensureConfig } from './config-schema.js'
 import { resolveSource } from './resolve-source.js'
@@ -650,6 +651,9 @@ export function apply(ctx, rawConfig) {
     },
   }), 'dsh-image-gen: lineage route')
 
+  // Design export route (#446)
+  registerDesignExportRoutes(ctx, { resolveSource })
+
   registerLiveProgressRoutes(ctx)
 
   // Reset loop guard when user sends a new message (#370)

package/lib/register-tools.js

@@ -26,6 +26,7 @@ import { registerInpaintStagingTools } from './tools/inpaint-staging.js'
 import { registerBatchQueueTools } from './tools/batch-queue.js'
 import { registerVariantTools } from './tools/variant-selection.js'
 import { registerLineageTools } from './tools/lineage.js'
+import { registerDesignExportTools } from './tools/design-export.js'
 import {
   createLiveProgressSession,
   publishLiveProgress,
@@ -173,6 +174,9 @@ export function registerAllTools(ctx, deps) {
     if (Boolean(sets.lineage)) {
       registerLineageTools(targetCtx, deps)
     }
+    if (Boolean(sets.designExport || sets.design_export)) {
+      registerDesignExportTools(targetCtx, deps)
+    }
   }
 
   function dispose() {

package/lib/tools/design-export.js

@@ -0,0 +1,93 @@
+import { renderToolOutput } from "../attachment-helper.js"
+// design-export tool (#446) — export_design_asset for Figma / Penpot / OpenDesign
+
+import { defineTool } from '@deepseek-ai/dsh-tools'
+import { toLosslessJson } from '../providers.js'
+import { formatDesignExportPayload, pushAssetToOpenDesignProject } from '../design-export.js'
+
+export function registerDesignExportTools(ctx, deps) {
+  const { resolveSource } = deps
+
+  ctx.effect(() => {
+    ctx.tools.register(
+      defineTool({
+        name: 'export_design_asset',
+        description:
+          'Export a generated image, SVG stencil, or asset into design-friendly clipboard snippets '
+          + '(Figma HTML img/SVG markup, Penpot SVG snippet, CSS background Data-URL) '
+          + 'or push it directly into a local OpenDesign project folder (#446).',
+        parameters: {
+          image: {
+            type: 'string',
+            required: true,
+            description: 'Path or attachment ID of the image to export.',
+          },
+          target: {
+            type: 'string',
+            enum: ['all', 'opendesign', 'clipboard_svg', 'clipboard_dataurl', 'penpot_snippet', 'figma_html'],
+            description: 'Target export format or destination (default: all).',
+          },
+          project_id: {
+            type: 'string',
+            description: 'Optional OpenDesign project ID to directly save the file into the project artifacts directory.',
+          },
+          name: {
+            type: 'string',
+            description: 'Optional stem or filename for the exported design asset.',
+          },
+        },
+        output: {
+          render: (_args, value) => renderToolOutput(value),
+          schema: {
+            type: 'object',
+            additionalProperties: true,
+            properties: {
+              name: { type: 'string' },
+              mimeType: { type: 'string' },
+              isSvg: { type: 'boolean' },
+              width: { type: 'number' },
+              height: { type: 'number' },
+              dataUrl: { type: 'string' },
+              svgMarkup: { type: 'string' },
+              figmaHtml: { type: 'string' },
+              penpotSnippet: { type: 'string' },
+              cssBackground: { type: 'string' },
+              openDesign: { type: 'object', additionalProperties: true },
+            },
+          },
+        },
+        async execute(args, exec) {
+          const source = await resolveSource(ctx, exec, args.image)
+          if (!source || !source.bytes) {
+            throw new Error(`Image not found or unreadable: ${args.image}`)
+          }
+
+          const payload = formatDesignExportPayload({
+            buffer: source.bytes,
+            mimeType: source.mediaType || 'image/png',
+            name: args.name || 'exported-asset',
+            width: source.width || 1024,
+            height: source.height || 1024,
+            target: args.target || 'all',
+          })
+
+          let openDesign = null
+          if (args.project_id) {
+            const ext = payload.isSvg ? '.svg' : '.png'
+            const filename = (args.name || 'asset').endsWith(ext) ? args.name : `${args.name || 'asset'}${ext}`
+            openDesign = await pushAssetToOpenDesignProject({
+              buffer: source.bytes,
+              filename,
+              projectId: args.project_id,
+            })
+          }
+
+          return toLosslessJson({
+            ...payload,
+            ...(openDesign ? { openDesign } : {}),
+          })
+        },
+      }),
+    )
+  })
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@goodandready/dsh-image-gen",
-  "version": "0.11.42",
+  "version": "0.12.0",
   "description": "Image generation for DeepSeek Harness: a generate_image tool with pluggable providers — the FAL queue, any OpenAI-compatible images API, or a ChatGPT/Grok subscription with no API key at all. The picture is shown inline in the conversation; the model receives either a link (works with any chat model) or the image itself (needs dsh-vision-bridge or a vision-capable model).",
   "keywords": [
     "deepseek-harness",