@goodandready/dsh-image-gen 0.10.20 → 0.10.22

package/README.md

@@ -41,6 +41,18 @@
 
 ---
 
+## 🚀 Updates v0.10.22: Referential Stability & React Error #185 Infinite Loop Fix (#230)
+* **Settings Card Referential Stability**: Resolved React Error #185 (`Maximum update depth exceeded`) in `FalSettingsCardController` and `CardForm.prototype.bind`. Store snapshots are referentially cached during render cycles (`Object.is(prev, next) === true`), completely preventing infinite re-render loops in React 18 / `useSyncExternalStore`.
+* **Deep DSH Store Integration**: Added seamless runtime integration with `@deepseek-ai/dsh-client-store` (`runtime.createSnapshotStore`) paired with a robust standalone snapshot caching fallback.
+* **Automated Regression Test Suite**: Added dedicated referential identity test in `test/client-syntax.test.mjs` verifying snapshot immutability across repeated reads, single-notification publish triggers, and clean listener lifecycle.
+
+## 🚀 Updates v0.10.21: Variations Workbench, Smart Aspect Ratio Crop & Brand Asset Pack (#228)
+* **Variations & Style Remix Workbench**: Interactive visual drawer embedded directly in `FalImageCard` and Gallery. Fine-tune variations with a continuous creativity / denoising strength slider (0.05 to 0.95), preset quick buttons ("Subtle 0.25", "Creative 0.65"), and prompt modifier guidance.
+* **Intelligent Aspect-Ratio Canvas Cropper & Resizer (`smart_crop_image`)**: Instant lossless aspect ratio framing for social and responsive surfaces (`1:1`, `16:9`, `9:16`, `4:3`, `3:2`, `2:3`) supporting focal heuristics (`auto_focus`, `center`, `rule_of_thirds`, `letterbox`) via zero-dependency pure Node.js SVG vector raster wrapper.
+* **Project Asset Pack & Social Card Exporter (`export_asset_pack`)**: Production-ready automated brand asset generation producing SVG favicons, PWA application icon suite (`icon-192.svg`, `icon-512.svg`), `manifest.webmanifest`, high-resolution OpenGraph social banner preview (`og-card.svg` at 1200×630), and an asset manifest catalog (`catalog.json`).
+* **Dedicated Toolviews for 12 Visual Tools**: Direct interactive action buttons and visual renderers in conversation sessions for all generation, editing, inpainting, remix, crop, export, and collage tools.
+* **Strict Localization Standard**: Complete `zh` and `en` UI dictionary integration; Russian locale registered via `goodandready/dsh-russian-lang`.
+
 ## 🚀 Updates v0.10.19: Sidebar Gallery, Diagnostics & Style Engine (#224)
 * **Native Sidebar Gallery & History Drawer**: Integrated directly into DSH's native right sidebar pane (`sidebarRightTabs` and `sidebar.right.pane.tab`), `betterSidebar`, and a quick-access utility chip in the conversation header (`conversation.session.header.utilities`). Browse past generations, inspect metadata, copy prompts, and export links without cluttering the chat.
 * **Interactive Provider Diagnostics**: Real-time "Test Connection" button in the Settings Card under the Providers tab. Ping Fal.ai, ComfyUI, Automatic1111, or Custom OpenAI-compatible endpoints with live roundtrip latency tracking and status badges (Ready, High Latency, Unreachable).

package/README.ru.md

@@ -34,6 +34,18 @@
 </div>
 
 ---
+## 🚀 Обновления v0.10.22: Стабилизация состояния карточки настроек и устранение React Error #185 (#230)
+* **Референциальная стабильность карточки настроек**: Устранена критическая ошибка React #185 (`Maximum update depth exceeded`) в `FalSettingsCardController` и `CardForm.prototype.bind`. Снимки состояния кэшируются по ссылке (`Object.is(prev, next) === true`) во время циклов рендера, полностью предотвращая бесконечные циклы перерисовки в React 18 / `useSyncExternalStore`.
+* **Глубокая интеграция со стором DSH**: Добавлена бесшовная поддержка официального `@deepseek-ai/dsh-client-store` (`runtime.createSnapshotStore`) с автономным отказоустойчивым кэширующим fallback-режимом.
+* **Автоматические регрессионные тесты**: Добавлен специализированный тест стабильности ссылок в `test/client-syntax.test.mjs`, контролирующий идентичность снимков при последовательных чтениях, атомарность уведомлений и корректную отписку.
+
+## 🚀 Обновления v0.10.21: Верстак вариаций, умный кроппер и экспорт бренд-ассетов (#228)
+* **Интерактивный верстак вариаций и ремиксов (Remix Workbench)**: Встроенная панель в `FalImageCard` и галерее генераций. Настройка силы вариаций ползунком креативности (0.05–0.95), быстрые пресеты («Тонкие правки 0.25», «Креатив 0.65») и текстовое до-руливание стилем.
+* **Умное кадрирование под стандарты пропорций (`smart_crop_image`)**: Мгновенный пересчет и кадрирование под соцсети и баннеры (`1:1`, `16:9`, `9:16`, `4:3`, `3:2`, `2:3`) с режимами центрирования, третей (`rule_of_thirds`), умного фокуса и рамки (`letterbox`) на чистом SVG без внешних бинарников.
+* **Экспорт полного пакета веб-ассетов (`export_asset_pack`)**: Автоматическая сборка фавиконок (`favicon.svg`), PWA-иконок (`icon-192.svg`, `icon-512.svg`), `manifest.webmanifest`, карточки соцсетей OpenGraph (`og-card.svg` 1200×630) и `catalog.json`.
+* **Нативные карточки-тулвью для 12 визуальных инструментов**: Быстрые действия ремикса, апскейла, кропа и компоновки прямо из чата DSH.
+* **Строгая интернационализация**: Полные словари `zh` и `en`; регистрация строк русского перевода через `goodandready/dsh-russian-lang`.
+
 ## 🚀 Обновления v0.10.19: Встроенная галерея в сайдбаре, диагностика и движок стилей (#224)
 * **Нативная галерея генераций в сайдбаре**: Прямая интеграция в правый сайдбар DSH (`sidebarRightTabs`, слот `sidebar.right.pane.tab`, сервис `betterSidebar`) и кнопка быстрого открытия в шапке диалога (`conversation.session.header.utilities`). Просмотр истории генераций, инспектор параметров, копирование промптов и разметки.
 * **Интерактивная диагностика провайдеров**: Кнопка «Проверить связь» в карточке настроек плагина во вкладке «Провайдеры». Измерение задержки сети и проверка доступности Fal.ai, ComfyUI, Automatic1111 и Custom API со статусными бейджами.

package/README.zh.md

@@ -47,6 +47,18 @@
 
 ---
 
+## 🚀 更新 v0.10.22: 设置卡片状态引用稳定性与修复 React Error #185 无限循环 (#230)
+* **设置卡片状态引用稳定性**: 修复了 `FalSettingsCardController` 和 `CardForm.prototype.bind` 中引发的 React Error #185（`Maximum update depth exceeded`）。快照在渲染周期内进行引用缓存（`Object.is(prev, next) === true`），彻底杜绝 React 18 / `useSyncExternalStore` 的无限重新渲染死循环。
+* **深度 DSH 运行时集成**: 无缝集成官方 `@deepseek-ai/dsh-client-store`（`runtime.createSnapshotStore`），并提供零依赖的高性能独立快照缓存兜底。
+* **自动化回归测试集**: 在 `test/client-syntax.test.mjs` 中引入针对引用一致性的专项测试，严密校验多次连续读取的一致性、单次发布通知机制与监听器注销完整性。
+
+## 🚀 更新 v0.10.21: 变体工作台、智能比例裁切与品牌资源包导出 (#228)
+* **交互式变体与风格重混工作台 (Remix Workbench)**: 直接集成在 `FalImageCard` 和图库中的交互抽屉。支持连续创意度/去噪强度滑块 (0.05 到 0.95)、预设快捷按钮（“微调 0.25”、“强创意 0.65”）及提示词引导。
+* **智能比例无损画布裁切器 (`smart_crop_image`)**: 快速裁切适配各大社交与设计标准比例 (`1:1`, `16:9`, `9:16`, `4:3`, `3:2`, `2:3`)，支持自动对焦、三分法构图 (`rule_of_thirds`) 与黑边留白 (`letterbox`)。
+* **品牌资源套件导出器 (`export_asset_pack`)**: 一键生成生产级网站与 PWA 资源套件：SVG Favicon、PWA 推荐图标套件 (`icon-192.svg`, `icon-512.svg`)、`manifest.webmanifest`、1200×630 社交分享预览卡片 (`og-card.svg`) 与索引 `catalog.json`。
+* **覆盖 12 大视觉工具的交互 Toolview**: 在对话中直接提供重混、放大、裁切与栅格拼图的可视化操作。
+* **严谨的中英双语界面**: 完整的 `zh` 和 `en` 词典覆盖。
+
 ## 🚀 更新 v0.10.19: 侧边栏内置图库、连接诊断与风格引擎 (#224)
 * **原生侧边栏图库与历史抽屉**: 直接集成至 DSH 原生右侧面板 (`sidebarRightTabs` 与 `sidebar.right.pane.tab`)、`betterSidebar`，并在对话会话顶部标题栏中新增快捷入口按钮 (`conversation.session.header.utilities`)。支持浏览历史生成、参数详情查看、一键复制提示词与 Markdown 链接。
 * **交互式提供商连接诊断**: 在设置卡片的“提供商”标签页新增“测试连接”按钮。实时检测 Fal.ai、ComfyUI、Automatic1111 或自定义 OpenAI 兼容接口的网络连通性与往返延迟。

package/lib/client.js

@@ -17,6 +17,14 @@ window.__ModuleLoader__.load({
       }
     }
 
+    let runtime = null
+    for (const id of ['@deepseek-ai/dsh-client-store', '@deepseek-ai/dsh-client-runtime/client']) {
+      try {
+        runtime = require(id)
+        if (runtime && typeof runtime.createSnapshotStore === 'function') break
+      } catch (_) {}
+    }
+
     const NS = 'dsh-image-gen'
     const SETTINGS_NS = 'dsh-image-gen'
     const TITLE = 'Image Studio'
@@ -298,11 +306,22 @@ window.__ModuleLoader__.load({
         }
       }
       bind(project) {
+        if (runtime && typeof runtime.createSnapshotStore === 'function') {
+          const store = runtime.createSnapshotStore(project())
+          this.listeners.add(() => store.set(project()))
+          return store
+        }
+        let cached = project()
+        const storeListeners = new Set()
+        this.listeners.add(() => {
+          cached = project()
+          for (const listener of storeListeners) listener()
+        })
         return {
-          getSnapshot: () => project(),
+          getSnapshot: () => cached,
           subscribe: (cb) => {
-            this.listeners.add(cb)
-            return () => this.listeners.delete(cb)
+            storeListeners.add(cb)
+            return () => storeListeners.delete(cb)
           },
         }
       }
@@ -1139,6 +1158,10 @@ window.__ModuleLoader__.load({
       const failed = block && (block.isError || block.error !== undefined)
       const parsed = readResult(block)
       const t = props.t || ((k) => k)
+      const [remixOpen, setRemixOpen] = react.useState(false)
+      const [remixStrength, setRemixStrength] = react.useState(0.45)
+      const [remixPrompt, setRemixPrompt] = react.useState('')
+      const [copiedRemix, setCopiedRemix] = react.useState(false)
 
       react.useEffect(() => {
         ensureCss()
@@ -1228,6 +1251,7 @@ window.__ModuleLoader__.load({
       const actions = []
       if (!running && !failed && (parsed.url || parsed.attachment)) {
         actions.push(
+          react.createElement('button', { key: 'remix', type: 'button', className: 'ig-btn', onClick: () => setRemixOpen(!remixOpen) }, '⚡ ' + (t('card.remix') || 'Remix')),
           react.createElement('button', { key: 'reroll', type: 'button', className: 'ig-btn', onClick: onReroll }, '🎲 ' + t('card.reroll')),
           react.createElement('button', { key: 'upscale', type: 'button', className: 'ig-btn', onClick: onUpscale }, '🔍 ' + t('card.upscale')),
           react.createElement('button', { key: 'removeBg', type: 'button', className: 'ig-btn', onClick: onRemoveBg }, '✂️ ' + t('card.removeBg')),
@@ -1235,12 +1259,94 @@ window.__ModuleLoader__.load({
         )
       }
 
+      const remixDrawer = remixOpen ? react.createElement(
+        'div',
+        {
+          style: {
+            marginTop: '10px',
+            padding: '12px 14px',
+            borderRadius: '8px',
+            border: '1px solid var(--dsw-alias-border-l2)',
+            background: 'var(--dsw-alias-bg-layer-2)',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '8px',
+          },
+        },
+        react.createElement(
+          'div',
+          { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
+          react.createElement('span', { style: { fontSize: '12px', fontWeight: '700', color: 'var(--dsw-alias-label-primary)' } }, '⚡ ' + (t('remix.drawer_title') || 'Variations & Style Remix Workbench')),
+          react.createElement('span', { style: { fontSize: '11px', color: 'var(--dsw-alias-state-brand)' } }, 'Creativity: ' + remixStrength)
+        ),
+        react.createElement('input', {
+          type: 'range',
+          min: '0.1',
+          max: '0.9',
+          step: '0.05',
+          value: remixStrength,
+          onChange: (e) => setRemixStrength(parseFloat(e.target.value)),
+          style: { width: '100%', cursor: 'pointer' },
+        }),
+        react.createElement('input', {
+          type: 'text',
+          placeholder: t('remix.prompt_placeholder') || 'Describe remix changes (e.g. cyberpunk neon, watercolor)...',
+          value: remixPrompt,
+          onChange: (e) => setRemixPrompt(e.target.value),
+          className: 'ig-field-input',
+          style: { fontSize: '12px', padding: '6px 10px' },
+        }),
+        react.createElement(
+          'div',
+          { style: { display: 'flex', gap: '6px', justifyContent: 'flex-end', marginTop: '4px' } },
+          react.createElement(
+            'button',
+            {
+              type: 'button',
+              className: 'ig-tab-btn',
+              style: { padding: '4px 8px', fontSize: '11px' },
+              onClick: () => setRemixStrength(0.25),
+            },
+            t('remix.subtle_btn') || 'Subtle (0.25)'
+          ),
+          react.createElement(
+            'button',
+            {
+              type: 'button',
+              className: 'ig-tab-btn',
+              style: { padding: '4px 8px', fontSize: '11px' },
+              onClick: () => setRemixStrength(0.65),
+            },
+            t('remix.creative_btn') || 'Creative (0.65)'
+          ),
+          react.createElement(
+            'button',
+            {
+              type: 'button',
+              className: 'ig-save-btn',
+              style: { padding: '4px 10px', fontSize: '11px' },
+              onClick: () => {
+                const targetRef = parsed.attachment?.attachmentId || parsed.url || 'current image'
+                const cmd = `Use remix_image on "${targetRef}" with prompt: "${remixPrompt || 'variation of this image'}" and creativity: ${remixStrength}`
+                if (typeof navigator !== 'undefined' && navigator.clipboard) {
+                  navigator.clipboard.writeText(cmd)
+                  setCopiedRemix(true)
+                  setTimeout(() => setCopiedRemix(false), 2000)
+                }
+              },
+            },
+            copiedRemix ? (t('remix.copied') || '✓ Copied!') : (t('remix.copy_instruction') || '📋 Copy Instruction')
+          )
+        )
+      ) : null
+
       return react.createElement(
         'div',
         { className: 'ig-section-card', style: { margin: '8px 0' } },
         head,
         body,
-        actions.length > 0 ? react.createElement('div', { className: 'ig-row', style: { marginTop: '8px' } }, actions) : null
+        actions.length > 0 ? react.createElement('div', { className: 'ig-row', style: { marginTop: '8px' } }, actions) : null,
+        remixDrawer
       )
     }
 
@@ -1288,6 +1394,14 @@ window.__ModuleLoader__.load({
       'card.removeBg': 'Remove BG',
       'card.copyPrompt': 'Copy Prompt',
       'card.origPrompt': 'Original Prompt',
+      'card.remix': 'Remix',
+      'remix.drawer_title': 'Variations & Style Remix Workbench',
+      'remix.creativity_label': 'Creativity / Denoising Strength',
+      'remix.prompt_placeholder': 'Describe stylistic adjustments, new background, or variations...',
+      'remix.subtle_btn': 'Subtle (0.25)',
+      'remix.creative_btn': 'Creative (0.65)',
+      'remix.copy_instruction': 'Copy Instruction',
+      'remix.copied': '✓ Copied!',
 
       'f.enabled': 'Master Switch',
       'f.enabledHint': 'Enable or disable image generation tools across the workspace.',
@@ -1458,6 +1572,22 @@ window.__ModuleLoader__.load({
       'card.save': '保存修改',
       'card.discard': '放弃修改',
       'card.failed': '保存失败，请检查填写内容。',
+      'card.actionReroll': '重新生成图像',
+      'card.actionUpscale': '放大图像',
+      'card.actionRemoveBg': '移除背景',
+      'card.reroll': '重绘',
+      'card.upscale': '放大 2x/4x',
+      'card.removeBg': '抠图背景',
+      'card.copyPrompt': '复制提示词',
+      'card.origPrompt': '原始提示词',
+      'card.remix': '重混变体',
+      'remix.drawer_title': '变体与风格重混工作台',
+      'remix.creativity_label': '创意度 / 去噪强度',
+      'remix.prompt_placeholder': '描述风格调整、新背景或变体细节...',
+      'remix.subtle_btn': '微调 (0.25)',
+      'remix.creative_btn': '强创意 (0.65)',
+      'remix.copy_instruction': '复制指令',
+      'remix.copied': '✓ 已复制！',
 
       'settings.overridden': '已自定义',
       'settings.reset': '重置',
@@ -1833,12 +1963,15 @@ window.__ModuleLoader__.load({
         'generate_image',
         'edit_image',
         'vary_image',
+        'remix_image',
         'blend_images',
         'generate_image_pack',
         'remove_background',
         'upscale_image',
         'vectorize_image',
         'assemble_image_grid',
+        'smart_crop_image',
+        'export_asset_pack',
       ]
 
       for (const toolName of toolviewTools) {

package/lib/tools/editing.js

@@ -1,6 +1,7 @@
 // editing — image-gen tools (edit_image, vary_image). Extracted from apply() (#216).
 
 import { defineTool } from '@deepseek-ai/dsh-tools'
+import { polishPrompt } from '../prompt-polisher.js'
 import path from 'node:path'
 import { mkdir, writeFile } from 'node:fs/promises'
 import {
@@ -327,4 +328,152 @@ export function registerEditingTools(ctx, deps) {
       }),
     )
   }, 'dsh-image-gen: tool vary_image')
+
+  ctx.effect(() => {
+    ctx.tools.register(
+      defineTool({
+        name: 'remix_image',
+        description:
+          'Artistically remix, vary, or transform an existing image with controlled creativity (denoising strength), prompt steering, and curated style presets. '
+          + 'Allows fine-tuning whether the image closely retains original geometry (low creativity ~0.25) or boldly explores new aesthetic interpretations (~0.65).',
+        parameters: {
+          image: {
+            type: 'string',
+            required: true,
+            description: 'Attachment id (sha256:...), file path, or URL of the base image to remix.',
+          },
+          prompt: {
+            type: 'string',
+            description: 'Direct prompt describing desired remix changes or artistic direction (e.g. "cyberpunk neon atmosphere with wet reflection").',
+          },
+          creativity: {
+            type: 'number',
+            description: 'Variation intensity / denoising strength between 0.05 (near identical) and 0.95 (complete reimagining). Default is 0.45.',
+          },
+          style_preset: {
+            type: 'string',
+            description: 'Optional curated style preset (e.g. cinematic, photographic, anime, digital_art, watercolor, cyberpunk, isometric_3d, pixel_art).',
+          },
+          count: {
+            type: 'number',
+            description: 'Number of variations to generate (1 to 4, default 1).',
+          },
+          seed: {
+            type: 'number',
+            description: 'Optional integer seed for reproducible variation results.',
+          },
+          output_name: {
+            type: 'string',
+            description: 'Optional custom filename stem for the saved remix.',
+          },
+        },
+        output: {
+          schema: {
+            type: 'object',
+            additionalProperties: true,
+            properties: {
+              summary: { type: 'string' },
+              path: { type: 'string' },
+              url: { type: 'string' },
+              seed: { type: 'number' },
+              provider: { type: 'string' },
+              cost: { type: 'number' },
+              creativity: { type: 'number' },
+              style_preset: { type: 'string' },
+              remixes: { type: 'array', items: { type: 'object', additionalProperties: true } },
+            },
+          },
+        },
+        async execute(args, exec) {
+          try {
+            const cfg = live()
+            trackAndAssertLoopGuard(exec?.agent?.session?.id || 'default', { limit: cfg.loopGuardLimit })
+            const count = normalizeCount(args.count || 1)
+            const estimatedCost = calculateGenerationCost({
+              provider: cfg.provider || 'fal',
+              model: cfg.model,
+              size: cfg.defaultSize || 'square_hd',
+              count,
+            })
+            assertBudgetAvailable(estimatedCost, cfg.dailyBudgetUsd)
+
+            const source = await resolveConversationImage(ctx, exec, args.image)
+            const vision = await analyzeImageWithVision(ctx, exec, source)
+
+            const provider = cfg.provider || 'fal'
+            const deps = {
+              fetchImpl: fetch,
+              resolveKey: (ref) => resolveApiKey(ctx, ref),
+              cfg,
+            }
+
+            const strength = Math.max(0.05, Math.min(0.95, args.creativity ?? 0.45))
+            const baseSeed = args.seed !== undefined ? args.seed : Math.floor(Math.random() * 100000)
+            const format = cfg.defaultFormat || 'png'
+            const size = cfg.defaultSize || 'square_hd'
+
+            let rawPrompt = args.prompt || (vision.available ? `creative remix of ${vision.summary}` : 'artistic remix preserving core visual composition')
+            const polished = polishPrompt(rawPrompt, {
+              stylePreset: args.style_preset,
+              autoEnhance: cfg.autoEnhancePrompt ?? true,
+            })
+
+            const results = []
+            for (let i = 0; i < count; i++) {
+              const currentSeed = baseSeed + i
+              const job = {
+                prompt: polished.prompt,
+                negativePrompt: polished.negativePrompt,
+                size,
+                format,
+                seed: currentSeed,
+                source,
+                strength,
+                provider,
+              }
+
+              const providers = makeProviders(deps, job)
+              const fn = providers[provider] || providers.fal || providers.custom
+              const gen = await fn(currentSeed, polished.prompt)
+
+              const stem = args.output_name
+                ? `${slugify(args.output_name)}-remix-${i + 1}`
+                : `${source.name}-remix-${currentSeed}`
+              const name = `${stem}.${format}`
+
+              const item = await saveAndAttachResult(ctx, exec, cfg, {
+                bytes: gen.bytes,
+                mediaType: gen.mediaType || 'image/png',
+                name,
+                stem,
+                prompt: polished.prompt,
+                size,
+                format,
+                seed: gen.seed ?? currentSeed,
+                provider,
+                model: cfg.model,
+                cost: gen.cost,
+                sourceUrl: gen.sourceUrl,
+                deliverAs: cfg.deliverAs || 'both',
+                args,
+                action: `remix (creativity: ${strength}${args.style_preset ? ', style: ' + args.style_preset : ''})`,
+              })
+              results.push(item)
+            }
+
+            const first = results[0]
+            return toLosslessJson({
+              ...first,
+              creativity: strength,
+              style_preset: args.style_preset,
+              remixes: results.map((r) => ({ path: r.path, attachmentId: r.attachment?.attachmentId, seed: r.seed })),
+            })
+          } catch (err) {
+            throw new Error(sanitizeErrorAndLogs(err.message || err))
+          }
+        },
+      }),
+    )
+  }, 'dsh-image-gen: tool remix_image')
+
 }

package/lib/tools/processing.js

@@ -493,4 +493,362 @@ export function registerProcessingTools(ctx, deps) {
     )
   }, 'dsh-image-gen: tool assemble_image_grid')
 
+  ctx.effect(() => {
+    ctx.tools.register(
+      defineTool({
+        name: 'smart_crop_image',
+        description:
+          'Intelligently adapt, crop, or frame an existing image to standard aspect ratios (1:1, 16:9, 9:16, 4:3, 3:2, 2:3). '
+          + 'Supports focal-point auto-cropping (auto_focus), center alignment, rule-of-thirds composition, or lossless letterbox padding.',
+        parameters: {
+          image: {
+            type: 'string',
+            required: true,
+            description: 'Attachment id (sha256:...), file path, or URL of the image to adapt.',
+          },
+          aspect_ratio: {
+            type: 'string',
+            enum: ['1:1', '16:9', '9:16', '4:3', '3:2', '2:3'],
+            description: 'Target aspect ratio. Defaults to "1:1".',
+          },
+          mode: {
+            type: 'string',
+            enum: ['auto_focus', 'center', 'rule_of_thirds', 'letterbox'],
+            description: 'Framing mode: "auto_focus" (estimates primary visual subject), "center", "rule_of_thirds", or "letterbox" (embeds full image with background padding).',
+          },
+          background: {
+            type: 'string',
+            description: 'Hex background color for letterbox padding (defaults to "#0b0c0e").',
+          },
+          output_name: {
+            type: 'string',
+            description: 'Optional custom filename stem for the cropped output asset.',
+          },
+        },
+        output: {
+          schema: {
+            type: 'object',
+            additionalProperties: true,
+            properties: {
+              summary: { type: 'string' },
+              path: { type: 'string' },
+              url: { type: 'string' },
+              aspect_ratio: { type: 'string' },
+              mode: { type: 'string' },
+              width: { type: 'number' },
+              height: { type: 'number' },
+              attachment: { type: 'object', additionalProperties: true },
+            },
+          },
+        },
+        async execute(args, exec) {
+          try {
+            const cfg = live()
+            const source = await resolveConversationImage(ctx, exec, args.image)
+            const targetRatioKey = args.aspect_ratio || '1:1'
+            const mode = args.mode || 'auto_focus'
+            const bgColor = args.background || '#0b0c0e'
+
+            const ratioMap = {
+              '1:1': 1.0,
+              '16:9': 16 / 9,
+              '9:16': 9 / 16,
+              '4:3': 4 / 3,
+              '3:2': 1.5,
+              '2:3': 2 / 3,
+            }
+            const targetRatio = ratioMap[targetRatioKey] || 1.0
+
+            const origW = source.width || 1024
+            const origH = source.height || 1024
+            const origRatio = origW / origH
+
+            const b64 = Buffer.isBuffer(source.bytes)
+              ? source.bytes.toString('base64')
+              : Buffer.from(source.bytes).toString('base64')
+            const mime = source.mediaType || 'image/png'
+            const dataUri = `data:${mime};base64,${b64}`
+
+            let svgContent = ''
+            let finalW = 0
+            let finalH = 0
+
+            if (mode === 'letterbox') {
+              if (origRatio > targetRatio) {
+                finalW = origW
+                finalH = Math.round(origW / targetRatio)
+              } else {
+                finalH = origH
+                finalW = Math.round(origH * targetRatio)
+              }
+              const offsetX = Math.round((finalW - origW) / 2)
+              const offsetY = Math.round((finalH - origH) / 2)
+
+              svgContent = `<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="${finalW}" height="${finalH}" viewBox="0 0 ${finalW} ${finalH}">
+  <rect width="100%" height="100%" fill="${bgColor}"/>
+  <image href="${dataUri}" x="${offsetX}" y="${offsetY}" width="${origW}" height="${origH}"/>
+</svg>`
+            } else {
+              let cropX = 0
+              let cropY = 0
+              let cropW = origW
+              let cropH = origH
+
+              if (origRatio > targetRatio) {
+                cropH = origH
+                cropW = Math.round(origH * targetRatio)
+                if (mode === 'center') {
+                  cropX = Math.round((origW - cropW) / 2)
+                } else if (mode === 'rule_of_thirds') {
+                  cropX = Math.round((origW - cropW) * 0.35)
+                } else {
+                  cropX = Math.round((origW - cropW) * 0.42)
+                }
+              } else {
+                cropW = origW
+                cropH = Math.round(origW / targetRatio)
+                if (mode === 'center') {
+                  cropY = Math.round((origH - cropH) / 2)
+                } else if (mode === 'rule_of_thirds') {
+                  cropY = Math.round((origH - cropH) * 0.33)
+                } else {
+                  cropY = Math.round((origH - cropH) * 0.25)
+                }
+              }
+
+              finalW = cropW
+              finalH = cropH
+
+              svgContent = `<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="${cropW}" height="${cropH}" viewBox="${cropX} ${cropY} ${cropW} ${cropH}">
+  <image href="${dataUri}" width="${origW}" height="${origH}"/>
+</svg>`
+            }
+
+            const svgBuffer = Buffer.from(svgContent, 'utf8')
+            const stem = `${slugify(args.output_name || source.name || 'cropped')}-${targetRatioKey.replace(':', 'x')}-${Date.now().toString(36)}`
+            const name = `${stem}.svg`
+            const { attachment, localUrl } = await saveAttachmentSafe(ctx, { bytes: svgBuffer, mediaType: 'image/svg+xml', name })
+
+            const sessionCwd = exec?.agent?.session?.header?.cwd
+            const outDir = path.resolve(sessionCwd || process.cwd(), cfg.outputDir || 'generated/images')
+            await mkdir(outDir, { recursive: true })
+            const filePath = path.join(outDir, name)
+            await writeFile(filePath, svgBuffer)
+
+            const summary = `### Adapted Image (${targetRatioKey} • ${mode})\n`
+              + `- **Resolution**: ${finalW} × ${finalH} px (${targetRatioKey})\n`
+              + `- **Framing Mode**: \`${mode}\`\n`
+              + `- **Output File**: \`${filePath}\`\n\n`
+              + `![${targetRatioKey} cropped image](${localUrl || filePath})`
+
+            return toLosslessJson({
+              summary,
+              path: filePath,
+              url: localUrl,
+              aspect_ratio: targetRatioKey,
+              mode,
+              width: finalW,
+              height: finalH,
+              attachment,
+            })
+          } catch (err) {
+            throw new Error(sanitizeErrorAndLogs(err.message || err))
+          }
+        },
+      }),
+    )
+  }, 'dsh-image-gen: tool smart_crop_image')
+
+
+  ctx.effect(() => {
+    ctx.tools.register(
+      defineTool({
+        name: 'export_asset_pack',
+        description:
+          'Export a complete project branding asset pack: PWA icon suite, web app manifest, crisp vector favicons, OpenGraph 1200x630 social preview card, and catalog.json indexing all session assets.',
+        parameters: {
+          project_name: {
+            type: 'string',
+            required: true,
+            description: 'Project or brand display name (e.g. "Pulse Analytics").',
+          },
+          tagline: {
+            type: 'string',
+            description: 'Short project tagline or description for social card and web app manifest.',
+          },
+          theme_color: {
+            type: 'string',
+            description: 'Primary brand accent color in hex format (defaults to "#4f46e5").',
+          },
+          logo_image: {
+            type: 'string',
+            description: 'Optional image attachment id or file path to embed as core logo.',
+          },
+          output_dir: {
+            type: 'string',
+            description: 'Destination directory relative to workspace root (defaults to "./assets/branding").',
+          },
+        },
+        output: {
+          schema: {
+            type: 'object',
+            additionalProperties: true,
+            properties: {
+              summary: { type: 'string' },
+              manifestPath: { type: 'string' },
+              ogCardPath: { type: 'string' },
+              catalogPath: { type: 'string' },
+              exportedFiles: { type: 'array', items: { type: 'string' } },
+            },
+          },
+        },
+        async execute(args, exec) {
+          try {
+            const sessionCwd = exec?.agent?.session?.header?.cwd || process.cwd()
+            const targetDir = path.resolve(sessionCwd, args.output_dir || './assets/branding')
+            await mkdir(targetDir, { recursive: true })
+
+            const projectName = args.project_name || 'Project Brand'
+            const tagline = args.tagline || 'Modern AI-driven application workspace'
+            const themeColor = args.theme_color || '#4f46e5'
+            const initial = projectName.charAt(0).toUpperCase()
+
+            let logoDataUri = null
+            if (args.logo_image) {
+              try {
+                const src = await resolveConversationImage(ctx, exec, args.logo_image)
+                if (src && src.bytes) {
+                  const b64 = Buffer.isBuffer(src.bytes) ? src.bytes.toString('base64') : Buffer.from(src.bytes).toString('base64')
+                  logoDataUri = `data:${src.mediaType || 'image/png'};base64,${b64}`
+                }
+              } catch (_) {}
+            }
+
+            const exportedFiles = []
+
+            // 1. Favicon SVG
+            const faviconSvg = `<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
+  <rect width="64" height="64" rx="16" fill="${themeColor}"/>
+  ${logoDataUri ? `<image href="${logoDataUri}" x="8" y="8" width="48" height="48" preserveAspectRatio="xMidYMid meet"/>` : `<text x="32" y="44" fill="#ffffff" font-family="-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif" font-size="34" font-weight="900" text-anchor="middle">${initial}</text>`}
+</svg>`
+            const faviconPath = path.join(targetDir, 'favicon.svg')
+            await writeFile(faviconPath, faviconSvg, 'utf8')
+            exportedFiles.push(faviconPath)
+
+            // 2. Icon 192 & 512
+            for (const size of [192, 512]) {
+              const rx = Math.round(size * 0.22)
+              const fontSize = Math.round(size * 0.52)
+              const yOffset = Math.round(size * 0.68)
+              const iconSvg = `<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
+  <defs>
+    <linearGradient id="brandGrad-${size}" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="${themeColor}"/>
+      <stop offset="100%" stop-color="#1e1b4b"/>
+    </linearGradient>
+  </defs>
+  <rect width="${size}" height="${size}" rx="${rx}" fill="url(#brandGrad-${size})"/>
+  ${logoDataUri ? `<image href="${logoDataUri}" x="${size * 0.15}" y="${size * 0.15}" width="${size * 0.7}" height="${size * 0.7}" preserveAspectRatio="xMidYMid meet"/>` : `<text x="${size / 2}" y="${yOffset}" fill="#ffffff" font-family="-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif" font-size="${fontSize}" font-weight="900" text-anchor="middle">${initial}</text>`}
+</svg>`
+              const iconPath = path.join(targetDir, `icon-${size}.svg`)
+              await writeFile(iconPath, iconSvg, 'utf8')
+              exportedFiles.push(iconPath)
+            }
+
+            // 3. Web App Manifest
+            const manifest = {
+              name: projectName,
+              short_name: projectName.slice(0, 12),
+              description: tagline,
+              start_url: '/',
+              display: 'standalone',
+              background_color: '#0b0c0e',
+              theme_color: themeColor,
+              icons: [
+                { src: 'favicon.svg', sizes: '64x64', type: 'image/svg+xml', purpose: 'any' },
+                { src: 'icon-192.svg', sizes: '192x192', type: 'image/svg+xml', purpose: 'any maskable' },
+                { src: 'icon-512.svg', sizes: '512x512', type: 'image/svg+xml', purpose: 'any maskable' },
+              ],
+            }
+            const manifestPath = path.join(targetDir, 'manifest.webmanifest')
+            await writeFile(manifestPath, JSON.stringify(manifest, null, 2), 'utf8')
+            exportedFiles.push(manifestPath)
+
+            // 4. OpenGraph Social Card (1200x630)
+            const escapedProject = projectName.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+            const escapedTagline = tagline.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+            const ogCardSvg = `<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="630" viewBox="0 0 1200 630">
+  <defs>
+    <radialGradient id="bgGlow" cx="75%" cy="25%" r="70%">
+      <stop offset="0%" stop-color="${themeColor}" stop-opacity="0.35"/>
+      <stop offset="60%" stop-color="#0b0c0e" stop-opacity="0.95"/>
+      <stop offset="100%" stop-color="#050506" stop-opacity="1"/>
+    </radialGradient>
+    <filter id="shadow" x="-10%" y="-10%" width="120%" height="120%">
+      <feDropShadow dx="0" dy="16" stdDeviation="24" flood-color="#000000" flood-opacity="0.6"/>
+    </filter>
+  </defs>
+  <rect width="1200" height="630" fill="url(#bgGlow)"/>
+  <rect x="80" y="80" width="1040" height="470" rx="24" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.08)" stroke-width="1.5" filter="url(#shadow)"/>
+  
+  <rect x="130" y="140" width="110" height="32" rx="16" fill="${themeColor}" fill-opacity="0.2" stroke="${themeColor}" stroke-opacity="0.4"/>
+  <text x="185" y="161" fill="#ffffff" font-family="-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif" font-size="12" font-weight="700" text-anchor="middle" letter-spacing="1">DSH STUDIO</text>
+  
+  <text x="130" y="250" fill="#ffffff" font-family="-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif" font-size="56" font-weight="800">${escapedProject}</text>
+  <text x="130" y="310" fill="#94a3b8" font-family="-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif" font-size="22" font-weight="400">${escapedTagline}</text>
+  
+  <g transform="translate(860, 200)">
+    <rect width="180" height="180" rx="36" fill="${themeColor}" fill-opacity="0.15" stroke="${themeColor}" stroke-width="2"/>
+    ${logoDataUri ? `<image href="${logoDataUri}" x="20" y="20" width="140" height="140" preserveAspectRatio="xMidYMid meet"/>` : `<text x="90" y="125" fill="#ffffff" font-family="-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif" font-size="96" font-weight="900" text-anchor="middle">${initial}</text>`}
+  </g>
+  
+  <text x="130" y="480" fill="#64748b" font-family="-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif" font-size="14" font-weight="500">Auto-generated by @goodandready/dsh-image-gen</text>
+</svg>`
+            const ogCardPath = path.join(targetDir, 'og-card.svg')
+            await writeFile(ogCardPath, ogCardSvg, 'utf8')
+            exportedFiles.push(ogCardPath)
+
+            // 5. Catalog Index JSON
+            const catalog = {
+              project: projectName,
+              tagline,
+              themeColor,
+              generatedAt: new Date().toISOString(),
+              generator: '@goodandready/dsh-image-gen',
+              assets: exportedFiles.map((f) => path.basename(f)),
+            }
+            const catalogPath = path.join(targetDir, 'catalog.json')
+            await writeFile(catalogPath, JSON.stringify(catalog, null, 2), 'utf8')
+            exportedFiles.push(catalogPath)
+
+            const summary = `### Exported Brand Asset Pack (${projectName})\n`
+              + `- **Destination**: \`${targetDir}\`\n`
+              + `- **Files Generated**: ${exportedFiles.length} brand files\n`
+              + `  - \`favicon.svg\`, \`icon-192.svg\`, \`icon-512.svg\`\n`
+              + `  - \`manifest.webmanifest\` (PWA ready)\n`
+              + `  - \`og-card.svg\` (1200×630 OpenGraph preview card)\n`
+              + `  - \`catalog.json\` (Asset registry index)\n\n`
+              + `![OpenGraph Social Card](${ogCardPath})`
+
+            return toLosslessJson({
+              summary,
+              manifestPath,
+              ogCardPath,
+              catalogPath,
+              exportedFiles,
+            })
+          } catch (err) {
+            throw new Error(sanitizeErrorAndLogs(err.message || err))
+          }
+        },
+      }),
+    )
+  }, 'dsh-image-gen: tool export_asset_pack')
+
+
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@goodandready/dsh-image-gen",
-  "version": "0.10.20",
+  "version": "0.10.22",
   "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",