@goodandready/dsh-image-gen 0.10.24 → 0.10.25

package/README.md

@@ -41,6 +41,13 @@
 
 ---
 
+## 🚀 Updates v0.10.25: Theme Color Parity, Responsive Mockups, Patterns & Spritesheets (#173, #177, #178, #238)
+* **100% Theme Color Parity (#238)**: Completely replaced all hardcoded `rgba(...)` and hex color literals in the Web UI (`src/client/10-css.js`, `src/client/80-gallery.js`) with native DSH theme variables (`--dsw-alias-*`) and dynamic `color-mix(...)`. Badges, alerts, and modal overlays automatically adapt to light and dark themes with zero hardcoded values.
+* **Responsive Multi-Device Mockup Generator (`generate_responsive_mockups`, #173)**: Single product prompt generates coherent Mobile (9:16), Tablet (3:4), and Desktop (16:9) viewports in parallel via `asyncPool` concurrency limit (3). Interactive toolview with tabbed preview navigation.
+* **Seamless Pattern Generator (`generate_seamless_pattern`, #178)**: Automated tileable background texture generation with periodic boundary condition checks and CSS tiling preview.
+* **2D Spritesheet Generator (`generate_spritesheet`, #177)**: Produces horizontal animation strips with CSS keyframe generator and multi-frame SVG previews for 2D game dev and web UI animations.
+* **Client Modular Source Build (#244)**: Decomposed monolithic `lib/client.js` into 15 structured fragments under `src/client/*` with automated build runner `scripts/build-client.mjs`. Preflight check `FAIL=0`, 179/179 automated tests passing.
+
 ## 🚀 Updates v0.10.24: Quality Block — Publication Boundary, Settings Status, Theme Colors & Module Split (#235–#242)
 * **Publication Boundary**: Added `.gitattributes` with `export-ignore` for `AGENTS.md`, `index.md`, `docs/`, and `.gitea/` so GitHub source archives and `git archive` no longer ship internal workflow files.
 * **Settings Status Fallback**: Corrected provider/config status handling in the Settings Card so partial/unknown states no longer show a false “unavailable”.
@@ -117,6 +124,7 @@
 * **`vectorize_image`**: Convert raster graphics to clean scalable SVG vectors with palette quantization.
 * **`blend_images`**: Multi-reference composition mixing.
 * **`generate_image_pack`**: Simultaneous multi-aspect ratio rendering with graceful partial recovery.
+* **`generate_responsive_mockups` (#173)**: One shared product prompt rendered as Mobile (9:16), Tablet (3:4) and Desktop (16:9) UI mockups in parallel. Keeps style/palette coherent across viewports, saves `mockup-mobile.png` / `mockup-tablet.png` / `mockup-desktop.png`, and shows a tabbed viewport preview in chat.
 * **`compare_images`**: Pixel-level visual difference ratio comparison.
 * **`inspect_image_quality`**: Automated visual audit, Laplacian sharpness scoring, and defect detection.
 * **`extract_design_tokens`**: Extract CSS Variables, Tailwind color palettes, and W3C Design Tokens from concept art (#172).

package/README.ru.md

@@ -34,6 +34,13 @@
 </div>
 
 ---
+## 🚀 Обновления v0.10.25: Чистота темы DSH, адаптивные мокапы, бесшовные паттерны и спрайтшиты (#173, #177, #178, #238)
+* **100% адаптация под переменные темы DSH (#238)**: Полностью устранены все захардкоженные литералы `rgba(...)` и hex-цветов в клиентской части (`src/client/10-css.js`, `src/client/80-gallery.js`). Полупрозрачные статусные фоны бейджей, алертов и модальных оверлеев переведены на динамическое смешивание токенов темы через `color-mix(...)`.
+* **Генератор адаптивных интерфейсных мокапов (`generate_responsive_mockups`, #173)**: Генерация согласованного набора экранов Mobile (9:16), Tablet (3:4) и Desktop (16:9) по единому промпту с параллельным выполнением через `asyncPool` (concurrency 3) и интерактивным таб-интерфейсом в карточке чата.
+* **Генератор бесшовных текстур и паттернов (`generate_seamless_pattern`, #178)**: Создание тайлящихся фоновых текстур со встроенным контролем швов и готовым CSS-предпросмотром.
+* **Генератор 2D-спрайтшитов (`generate_spritesheet`, #177)**: Формирование горизонтальных раскадровок анимации персонажей и UI с автогенерацией CSS `@keyframes` и SVG-превью полосы кадров.
+* **Модульная сборка клиента (#244)**: Клиентская часть разнесена на 15 структурированных модулей в `src/client/*` со скриптом сборки `scripts/build-client.mjs`. Preflight-проверка `FAIL=0`, 179 из 179 тестов успешно пройдены.
+
 ## 🚀 Обновления v0.10.24: Блок качества — публикационная граница, статусы настроек, цвета темы и разбиение модулей (#235–#242)
 * **Публикационная граница**: добавлен `.gitattributes` c `export-ignore` для `AGENTS.md`, `index.md`, `docs/` и `.gitea/` — архивы GitHub source и `git archive` больше не содержат внутренние файлы workflow.
 * **Статусы настроек**: исправлен fallback статуса провайдера/конфигурации в карточке настроек — промежуточные/неизвестные состояния больше не показываются ложным «unavailable».
@@ -157,6 +164,7 @@ graph LR
 | **`vectorize_image`** | Векторизация растра в чистый SVG с квантованием палитры | `image`, `color_mode`, `paletteSize` |
 | **`blend_images`** | Смешивание нескольких изображений в единую композицию | `images`, `weights`, `prompt` |
 | **`generate_image_pack`** | Пакетный рендеринг форматов 1:1, 16:9, 9:16 с сохранением частичных результатов | `prompt`, `aspect_ratios` |
+| **`generate_responsive_mockups`** | Пакетная адаптивная генерация UI-mockup под Mobile 9:16, Tablet 3:4 и Desktop 16:9 с единой палитрой/стилем; табы в toolview (#173) | `prompt`, `devices`, `style_preset`, `palette_colors`, `seed` |
 | **`compare_images`** | Сравнение двух картинок (доля различий пикселей) | `image_a`, `image_b` |
 | **`inspect_image_quality`** | Аудит качества, расчет резкости и проверка дефектов | `image`, `expected_elements` |
 

package/README.zh.md

@@ -47,6 +47,13 @@
 
 ---
 
+## 🚀 更新 v0.10.25: DSH 主题颜色适配、响应式多端原型、无缝纹理与精灵图导出 (#173, #177, #178, #238)
+* **100% 主题变量原生适配 (#238)**: 彻底移除客户端代码中的所有写死 `rgba(...)` 和 Hex 颜色（`src/client/10-css.js`、`src/client/80-gallery.js`），徽章、提示栏和画廊遮罩全部通过 `color-mix(...)` 配合 `--dsw-alias-*` 主题变量动态生成，完美兼容深色与浅色主题。
+* **多端响应式原型生成器 (`generate_responsive_mockups`, #173)**: 输入单个产品提示词，并发生成风格统一的移动端 (9:16)、平板端 (3:4) 与桌面端 (16:9) UI 原型，支持聊天卡片中的分栏切换预览。
+* **无缝平铺纹理生成器 (`generate_seamless_pattern`, #178)**: 自动生成四方连续平铺背景图，内置接缝平滑度校验与 CSS 平铺预览参数。
+* **2D 逐帧精灵图生成器 (`generate_spritesheet`, #177)**: 自动化横向动画序列帧渲染，内置 CSS `@keyframes` 动画代码与 SVG 多帧预览条。
+* **客户端源码模块化重构 (#244)**: 将原本庞大的单文件拆分为 `src/client/*` 目录下 15 个独立职责模块，配套 `scripts/build-client.mjs` 构建机制。Preflight 检查 `FAIL=0`，179/179 项自动化测试全绿。
+
 ## 🚀 更新 v0.10.24: 质量加固 — 发布边界、设置状态、主题颜色与模块拆分 (#235–#242)
 * **发布边界**: 新增 `.gitattributes`，对 `AGENTS.md`、`index.md`、`docs/`、`.gitea/` 设置 `export-ignore`，GitHub source 归档与 `git archive` 不再包含内部工作流文件。
 * **设置状态回退**: 修正设置卡片中的提供方/配置状态处理，部分或未知状态不再误显示为 “unavailable”。
@@ -71,6 +78,7 @@
 * **智能比例无损画布裁切器 (`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**: 在对话中直接提供重混、放大、裁切与栅格拼图的可视化操作。
+* **响应式多端 Mockup 套件 (`generate_responsive_mockups`, #173)**: 同一产品提示词并行生成 Mobile 9:16、Tablet 3:4、Desktop 16:9 三端 UI mockup，统一风格与品牌色，保存为 `mockup-mobile.png` / `mockup-tablet.png` / `mockup-desktop.png`，对话内以三标签页预览。
 * **严谨的中英双语界面**: 完整的 `zh` 和 `en` 词典覆盖。
 
 ## 🚀 更新 v0.10.19: 侧边栏内置图库、连接诊断与风格引擎 (#224)

package/lib/client.js

@@ -1,3 +1,4 @@
+// GENERATED by scripts/build-client.mjs — do not edit. Sources: src/client/*
 // Plugin Settings Card (settings.plugin.item) and Toolviews for @goodandready/dsh-image-gen
 window.__ModuleLoader__.load({
   id: '@goodandready/dsh-image-gen',
@@ -75,9 +76,9 @@ window.__ModuleLoader__.load({
 .ig-stat-lbl{font-size:12px;color:var(--dsw-alias-label-secondary)}
 
 .ig-badge{font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid var(--dsw-alias-border-l2);display:inline-flex;align-items:center;gap:5px;font-weight:500}
-.ig-badge-ok{border-color:var(--dsw-alias-state-success-primary);color:var(--dsw-alias-state-success-primary);background:rgba(16,185,129,0.08)}
-.ig-badge-warn{border-color:var(--dsw-alias-state-warning-primary);color:var(--dsw-alias-state-warning-primary);background:rgba(245,158,11,0.08)}
-.ig-badge-bad{border-color:var(--dsw-alias-state-error-primary);color:var(--dsw-alias-state-error-primary);background:rgba(239,68,68,0.08)}
+.ig-badge-ok{border-color:var(--dsw-alias-state-success-primary);color:var(--dsw-alias-state-success-primary);background:color-mix(in srgb, var(--dsw-alias-state-success-primary) 8%, transparent)}
+.ig-badge-warn{border-color:var(--dsw-alias-state-warning-primary);color:var(--dsw-alias-state-warning-primary);background:color-mix(in srgb, var(--dsw-alias-state-warning-primary) 8%, transparent)}
+.ig-badge-bad{border-color:var(--dsw-alias-state-error-primary);color:var(--dsw-alias-state-error-primary);background:color-mix(in srgb, var(--dsw-alias-state-error-primary) 8%, transparent)}
 
 .ig-tabs{display:flex;gap:6px;border-bottom:1px solid var(--dsw-alias-border-l2);padding-bottom:8px;margin-bottom:6px;overflow-x:auto}
 .ig-tab-btn{appearance:none;font:inherit;cursor:pointer;border:1px solid transparent;border-radius:6px;padding:6px 12px;font-size:13px;background:transparent;color:var(--dsw-alias-label-secondary);font-weight:500;display:inline-flex;align-items:center;gap:6px;transition:all .15s ease}
@@ -100,22 +101,22 @@ window.__ModuleLoader__.load({
 .ig-btn-primary{background:var(--dsw-alias-label-primary);color:var(--dsw-alias-bg-layer-3);border-color:transparent}
 .ig-btn-primary:hover:not(:disabled){opacity:0.9}
 .ig-btn-danger{color:var(--dsw-alias-state-error-primary);border-color:var(--dsw-alias-state-error-primary)}
-.ig-btn-danger:hover:not(:disabled){background:var(--dsw-alias-state-error-bg,rgba(239,68,68,0.12));border-color:var(--dsw-alias-state-error-primary)}
+.ig-btn-danger:hover:not(:disabled){background:var(--dsw-alias-state-error-bg, color-mix(in srgb, var(--dsw-alias-state-error-primary) 12%, transparent));border-color:var(--dsw-alias-state-error-primary)}
 .ig-btn-disabled{opacity:0.5;cursor:not-allowed}
 
 .ig-reset{font-size:11px;color:var(--dsw-alias-state-brand-primary);background:none;border:none;cursor:pointer;padding:0;text-decoration:underline}
 .ig-reset:hover{opacity:0.8}
 
-.ig-alert-ok{padding:10px 14px;border-radius:8px;background:var(--dsw-alias-state-success-bg,rgba(16,185,129,0.1));color:var(--dsw-alias-state-success-primary);font-size:13px}
-.ig-alert-bad{padding:10px 14px;border-radius:8px;background:var(--dsw-alias-state-error-bg,rgba(239,68,68,0.1));color:var(--dsw-alias-state-error-primary);font-size:13px}
-.ig-alert-err{padding:10px 14px;border-radius:8px;background:rgba(239,68,68,0.1);color:var(--dsw-alias-state-error-primary);font-size:13px}
-.ig-banner-warning{padding:12px 16px;border-radius:8px;background:rgba(245,158,11,0.12);border:1px solid var(--dsw-alias-state-warning-primary);color:var(--dsw-alias-state-warning-primary);font-size:13px;display:flex;align-items:center;gap:10px;font-weight:500}
+.ig-alert-ok{padding:10px 14px;border-radius:8px;background:var(--dsw-alias-state-success-bg, color-mix(in srgb, var(--dsw-alias-state-success-primary) 10%, transparent));color:var(--dsw-alias-state-success-primary);font-size:13px}
+.ig-alert-bad{padding:10px 14px;border-radius:8px;background:var(--dsw-alias-state-error-bg, color-mix(in srgb, var(--dsw-alias-state-error-primary) 10%, transparent));color:var(--dsw-alias-state-error-primary);font-size:13px}
+.ig-alert-err{padding:10px 14px;border-radius:8px;background:var(--dsw-alias-state-error-bg, color-mix(in srgb, var(--dsw-alias-state-error-primary) 10%, transparent));color:var(--dsw-alias-state-error-primary);font-size:13px}
+.ig-banner-warning{padding:12px 16px;border-radius:8px;background:var(--dsw-alias-state-warning-bg, color-mix(in srgb, var(--dsw-alias-state-warning-primary) 12%, transparent));border:1px solid var(--dsw-alias-state-warning-primary);color:var(--dsw-alias-state-warning-primary);font-size:13px;display:flex;align-items:center;gap:10px;font-weight:500}
 
 /* Backward-compatibility alias styles for toolview */
 .fal_head{font-size:13px;font-weight:600;margin-bottom:8px;color:var(--dsw-alias-label-primary)}
 .ig-prompt{font-size:13px;padding:8px 12px;background:var(--dsw-alias-bg-layer-2);border-radius:6px;border:1px solid var(--dsw-alias-border-l2);margin-bottom:8px;word-break:break-word}
 .ig-meta{font-size:11px;color:var(--dsw-alias-label-secondary);margin-top:6px}
-.ig-err{padding:10px;border-radius:6px;background:var(--dsw-alias-state-error-bg,rgba(239,68,68,0.1));color:var(--dsw-alias-state-error-primary);font-size:12px}
+.ig-err{padding:10px;border-radius:6px;background:var(--dsw-alias-state-error-bg, color-mix(in srgb, var(--dsw-alias-state-error-primary) 10%, transparent));color:var(--dsw-alias-state-error-primary);font-size:12px}
 `
       document.head.appendChild(style)
     }
@@ -826,9 +827,9 @@ window.__ModuleLoader__.load({
                     left: 0,
                     right: 0,
                     padding: '4px 6px',
-                    background: 'linear-gradient(transparent, var(--dsw-alias-overlay-scrim,rgba(0,0,0,0.8)))',
+                    background: 'linear-gradient(transparent, var(--dsw-alias-overlay-scrim, color-mix(in srgb, var(--dsw-alias-bg-layer-0, black) 80%, transparent)))',
                     fontSize: '10px',
-                    color: 'var(--dsw-alias-label-on-overlay,#fff)',
+                    color: 'var(--dsw-alias-label-on-overlay, var(--dsw-alias-label-primary, white))',
                     whiteSpace: 'nowrap',
                     overflow: 'hidden',
                     textOverflow: 'ellipsis',
@@ -846,7 +847,7 @@ window.__ModuleLoader__.load({
               style: {
                 position: 'fixed',
                 inset: 0,
-                background: 'var(--dsw-alias-overlay-backdrop,rgba(0,0,0,0.7))',
+                background: 'var(--dsw-alias-overlay-backdrop, color-mix(in srgb, var(--dsw-alias-bg-layer-0, black) 70%, transparent))',
                 zIndex: 10000,
                 display: 'flex',
                 alignItems: 'center',
@@ -889,7 +890,7 @@ window.__ModuleLoader__.load({
               ),
               react.createElement('img', {
                 src: selected.thumbnailUrl || (selected.attachmentId ? '/dsh-image-gen/image?id=' + encodeURIComponent(selected.attachmentId) : ''),
-                style: { width: '100%', borderRadius: '8px', maxHeight: '340px', objectFit: 'contain', background: 'var(--dsw-alias-bg-layer-1,#0a0a0c)' },
+                style: { width: '100%', borderRadius: '8px', maxHeight: '340px', objectFit: 'contain', background: 'var(--dsw-alias-bg-layer-1, var(--dsw-alias-bg-layer-2, transparent))' },
               }),
               react.createElement(
                 'div',
@@ -1002,7 +1003,7 @@ window.__ModuleLoader__.load({
                 background: 'var(--dsw-alias-bg-layer-3)',
                 border: '1px solid var(--dsw-alias-border-l2)',
                 borderRadius: '12px',
-                boxShadow: 'var(--dsw-alias-shadow-overlay,0 8px 32px rgba(0,0,0,0.4))',
+                boxShadow: 'var(--dsw-alias-shadow-overlay, 0 8px 32px color-mix(in srgb, var(--dsw-alias-bg-layer-0, black) 40%, transparent))',
                 zIndex: 9999,
                 padding: '16px',
                 overflowY: 'auto',
@@ -1276,16 +1277,87 @@ window.__ModuleLoader__.load({
       }
     }
 
+    function tryParseJsonObject(text) {
+      if (typeof text !== 'string') return null
+      const start = text.indexOf('{')
+      const end = text.lastIndexOf('}')
+      if (start < 0 || end <= start) return null
+      try {
+        return JSON.parse(text.slice(start, end + 1))
+      } catch (_) {
+        return null
+      }
+    }
+
+    function attachmentImageUrl(a) {
+      if (!a) return ''
+      if (a.url && typeof a.url === 'string') return a.url
+      const query = 'id=' + encodeURIComponent(a.attachmentId ?? a.id ?? '')
+        + '&mt=' + encodeURIComponent(a.mediaType || 'image/png')
+        + '&b=' + encodeURIComponent(String(a.bytes ?? 0))
+        + '&w=' + encodeURIComponent(String(a.width ?? 0))
+        + '&h=' + encodeURIComponent(String(a.height ?? 0))
+      return '/dsh-image-gen/image?' + query
+    }
+
+    function readResponsiveImages(block) {
+      if (!block) return []
+      const text = String(block.output || block.text || '')
+      const tagMatch = text.match(/<dsh-image-gen-responsive>([\s\S]*?)<\/dsh-image-gen-responsive>/)
+      const bag = [
+        block.images,
+        block.result && block.result.images,
+        block.data && block.data.images,
+        tagMatch && tryParseJsonObject(tagMatch[1])?.images,
+        tryParseJsonObject(text)?.images,
+        tryParseJsonObject(block.result)?.images,
+      ]
+      for (const list of bag) {
+        if (!Array.isArray(list)) continue
+        const images = list
+          .map((item, index) => {
+            if (!item || typeof item !== 'object') return null
+            const attachment = item.attachment || null
+            const url = attachmentImageUrl(attachment) || item.url || ''
+            const rawDevice = String(item.device || '').toLowerCase()
+            const device = ['mobile', 'tablet', 'desktop'].includes(rawDevice)
+              ? rawDevice
+              : `device-${index + 1}`
+            const label = item.label
+              || (device === 'mobile' ? 'Mobile'
+                : device === 'tablet' ? 'Tablet'
+                  : device === 'desktop' ? 'Desktop'
+                    : `#${index + 1}`)
+            return {
+              device,
+              label,
+              aspect: item.aspect || '',
+              width: item.width || (attachment && attachment.width) || 0,
+              height: item.height || (attachment && attachment.height) || 0,
+              url,
+              attachment,
+              path: item.path || '',
+              seed: item.seed,
+            }
+          })
+          .filter(Boolean)
+        if (images.length >= 2) return images
+      }
+      return []
+    }
+
     function FalImageCard(props) {
       const block = props.block
       const running = !('kind' in (block || {}))
       const failed = block && (block.isError || block.error !== undefined)
       const parsed = readResult(block)
+      const responsiveImages = !failed && !running ? readResponsiveImages(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)
+      const [responsiveTab, setResponsiveTab] = react.useState(0)
 
       react.useEffect(() => {
         ensureCss()
@@ -1348,6 +1420,64 @@ window.__ModuleLoader__.load({
       }
       if (failed) {
         body.push(react.createElement('div', { className: 'ig-err', key: 'e' }, parsed.text || t('card.unknownError')))
+      } else if (responsiveImages.length) {
+        const activeIdx = Math.min(responsiveTab, responsiveImages.length - 1)
+        const active = responsiveImages[activeIdx]
+        body.push(
+          react.createElement(
+            'div',
+            {
+              className: 'ig-tabs',
+              role: 'tablist',
+              'aria-label': t('card.responsiveTabs') || 'Responsive viewports',
+              key: 'rtabs',
+            },
+            responsiveImages.map((img, idx) =>
+              react.createElement(
+                'button',
+                {
+                  key: img.device,
+                  type: 'button',
+                  role: 'tab',
+                  'aria-selected': idx === activeIdx,
+                  className: idx === activeIdx ? 'ig-tab-btn ig-tab-btn-active' : 'ig-tab-btn',
+                  onClick: () => setResponsiveTab(idx),
+                },
+                (img.label || img.device) + (img.aspect ? ' · ' + img.aspect : '')
+              )
+            )
+          ),
+          active && active.url
+            ? react.createElement('img', {
+              key: 'ri',
+              src: active.url,
+              alt: prompt || (active.label + ' responsive mockup'),
+              loading: 'lazy',
+              style: {
+                maxWidth: '100%',
+                borderRadius: '8px',
+                border: '1px solid var(--dsw-alias-border-l2)',
+              },
+            })
+            : null,
+          active
+            ? react.createElement(
+              'div',
+              {
+                key: 'rmeta',
+                style: {
+                  marginTop: '6px',
+                  fontSize: '11px',
+                  color: 'var(--dsw-alias-label-secondary)',
+                },
+              },
+              [
+                active.width && active.height ? `${active.width}×${active.height}` : null,
+                active.path ? String(active.path) : null,
+              ].filter(Boolean).join(' · ')
+            )
+            : null
+        )
       } else if (!parsed.attachment && parsed.url) {
         body.push(react.createElement('img', {
           key: 'i',
@@ -1358,14 +1488,9 @@ window.__ModuleLoader__.load({
         }))
       } else if (parsed.attachment) {
         const a = parsed.attachment
-        const query = 'id=' + encodeURIComponent(a.attachmentId ?? a.id ?? '')
-          + '&mt=' + encodeURIComponent(a.mediaType || 'image/png')
-          + '&b=' + encodeURIComponent(String(a.bytes ?? 0))
-          + '&w=' + encodeURIComponent(String(a.width ?? 0))
-          + '&h=' + encodeURIComponent(String(a.height ?? 0))
         body.push(react.createElement('img', {
           key: 'i',
-          src: '/dsh-image-gen/image?' + query,
+          src: attachmentImageUrl(a),
           alt: prompt || 'generated image',
           loading: 'lazy',
           style: { maxWidth: '100%', borderRadius: '8px', border: '1px solid var(--dsw-alias-border-l2)' },
@@ -1373,7 +1498,7 @@ window.__ModuleLoader__.load({
       }
 
       const actions = []
-      if (!running && !failed && (parsed.url || parsed.attachment)) {
+      if (!running && !failed && (parsed.url || parsed.attachment || responsiveImages.length)) {
         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')),
@@ -1519,6 +1644,7 @@ window.__ModuleLoader__.load({
       'card.copyPrompt': 'Copy Prompt',
       'card.origPrompt': 'Original Prompt',
       'card.remix': 'Remix',
+      'card.responsiveTabs': 'Responsive viewports',
       'remix.drawer_title': 'Variations & Style Remix Workbench',
       'remix.creativity_label': 'Creativity / Denoising Strength',
       'remix.prompt_placeholder': 'Describe stylistic adjustments, new background, or variations...',
@@ -1722,6 +1848,7 @@ window.__ModuleLoader__.load({
       'card.copyPrompt': '复制提示词',
       'card.origPrompt': '原始提示词',
       'card.remix': '重混变体',
+      'card.responsiveTabs': '响应式视口',
       'remix.drawer_title': '变体与风格重混工作台',
       'remix.creativity_label': '创意度 / 去噪强度',
       'remix.prompt_placeholder': '描述风格调整、新背景或变体细节...',
@@ -1932,6 +2059,7 @@ window.__ModuleLoader__.load({
         'remix_image',
         'blend_images',
         'generate_image_pack',
+        'generate_responsive_mockups',
         'remove_background',
         'upscale_image',
         'vectorize_image',

package/lib/index.js

@@ -123,7 +123,7 @@ export async function saveAndAttachResult(ctx, exec, cfg, {
   })
 }
 
-export const name = 'dsh-image-gen'
+export const name = '@goodandready/dsh-image-gen'
 
 /** Settings namespace the Web card edits. */
 const NS = 'dsh-image-gen'

package/lib/pattern-helpers.js

@@ -0,0 +1,87 @@
+// Pure helpers for generate_seamless_pattern (#178)
+
+export function buildSeamlessPrompt(motif, style, density) {
+  const d = String(density || 'medium').toLowerCase()
+  const densityHint = d === 'low'
+    ? 'sparse motif spacing with generous empty background'
+    : d === 'high'
+      ? 'dense repeating motif coverage with minimal empty background'
+      : 'balanced motif spacing'
+  const styleBit = style ? ` Style: ${style}.` : ''
+  return `Seamless tileable repeating pattern of ${motif}.${styleBit} `
+    + 'Motifs must wrap continuously across left/right and top/bottom edges so the image tiles without visible seams. '
+    + `Flat even lighting, orthographic top-down view, ${densityHint}. `
+    + 'No vignette, no border frame, no watermark, no text.'
+}
+
+export function buildPatternCss({ className, sizePx, imagePath }) {
+  const name = className || 'dsh-pattern'
+  const size = sizePx || 512
+  const url = imagePath || `./${name}.png`
+  return `/* dsh-image-gen seamless pattern */
+.${name} {
+  background-image: url('${url}');
+  background-repeat: repeat;
+  background-size: ${size}px ${size}px;
+}
+`
+}
+
+export function normalizeDensity(value) {
+  const v = String(value || 'medium').toLowerCase()
+  if (v === 'low' || v === 'high') return v
+  return 'medium'
+}
+
+
+/**
+ * Score edge wrap continuity on raw RGBA (or RGB) pixel rows.
+ * Returns 0..1 (1 = identical opposite edges). Used as a seam QA helper (#178).
+ * @param {Uint8Array} pixels
+ * @param {number} width
+ * @param {number} height
+ * @param {number} [channels=4]
+ */
+export function scoreEdgeWrap(pixels, width, height, channels = 4) {
+  if (!pixels || width < 1 || height < 1) return 0
+  const stride = width * channels
+  let sum = 0
+  let n = 0
+  // left vs right columns
+  for (let y = 0; y < height; y++) {
+    const row = y * stride
+    for (let c = 0; c < channels; c++) {
+      const l = pixels[row + c]
+      const r = pixels[row + (width - 1) * channels + c]
+      sum += 1 - Math.abs(l - r) / 255
+      n++
+    }
+  }
+  // top vs bottom rows
+  for (let x = 0; x < width; x++) {
+    for (let c = 0; c < channels; c++) {
+      const top = pixels[x * channels + c]
+      const bot = pixels[(height - 1) * stride + x * channels + c]
+      sum += 1 - Math.abs(top - bot) / 255
+      n++
+    }
+  }
+  return n ? sum / n : 0
+}
+
+/** Tile RGBA image into cols x rows buffer (for 2x2 / 3x3 seam visual QA). */
+export function tilePixels(pixels, width, height, channels, cols, rows) {
+  const outW = width * cols
+  const outH = height * rows
+  const out = new Uint8Array(outW * outH * channels)
+  for (let ry = 0; ry < rows; ry++) {
+    for (let cx = 0; cx < cols; cx++) {
+      for (let y = 0; y < height; y++) {
+        const srcOff = y * width * channels
+        const dstOff = ((ry * height + y) * outW + cx * width) * channels
+        out.set(pixels.subarray(srcOff, srcOff + width * channels), dstOff)
+      }
+    }
+  }
+  return { pixels: out, width: outW, height: outH }
+}

package/lib/providers/backends/custom.js

@@ -0,0 +1,93 @@
+import {
+  normalizeMediaType,
+  buildEditForm,
+  SIZE_PIXELS,
+  formatErrorMessage,
+  buildEndpointUrl,
+} from '../shared-helpers.js'
+
+/**
+ * @param {fetchImpl: Function, resolveKey: Function, cfg: object} deps
+ * @param {prompt?: string, size?: string, format?: string, seed?: number, signal?: AbortSignal,
+ *   negativePrompt?: string, guidanceScale?: number, source?: object, mask?: object, strength?: number,
+ *   quality?: string, style?: string, aspectPixels?: number[], aspectRatio?: string} job
+ */
+export function createCustomGenerator(deps, job) {
+  const { fetchImpl, resolveKey, cfg } = deps
+  const { prompt, size, format, seed, signal, negativePrompt, guidanceScale, source, mask, strength, quality, style, aspectPixels, aspectRatio } = job
+
+  async function custom(seedArg = seed, promptArg = prompt) {
+    const base = String(cfg.customBaseURL || '').replace(/\/+$/, '')
+    if (!base) throw new Error('Custom image provider: base URL is not configured (Settings → Image generation)')
+    if (!cfg.customModel) throw new Error('Custom image provider: model is not configured')
+
+    // Empty key reference indicates unauthenticated gateway.
+    const key = cfg.customKeyEnv ? await resolveKey(cfg.customKeyEnv) : ''
+    const headers = { 'Content-Type': 'application/json' }
+    if (key) headers.Authorization = `Bearer ${key}`
+
+    // Omit response_format; modern models return either base64 or URL.
+    const endpoint = buildEndpointUrl(base, source ? 'images/edits' : 'images/generations')
+    const res = await fetchImpl(endpoint, {
+      method: 'POST',
+      headers,
+      body: source
+        ? buildEditForm({ source, mask, prompt: promptArg, size: cfg.customSize || (aspectPixels ? aspectPixels.join('x') : SIZE_PIXELS[size]) || size, strength })
+        : JSON.stringify({
+            model: cfg.customModel,
+            prompt: promptArg,
+            n: 1,
+            size: cfg.customSize || (aspectPixels ? aspectPixels.join('x') : SIZE_PIXELS[size]) || size,
+            ...(negativePrompt !== undefined ? { negative_prompt: negativePrompt } : {}),
+            ...(guidanceScale !== undefined ? { guidance_scale: guidanceScale } : {}),
+            ...(quality && quality !== 'auto' ? { quality } : {}),
+          }),
+      signal,
+    })
+    const data = await res.json().catch(() => ({}))
+    if (!res.ok) {
+      if (res.status === 503) {
+        const msg = (data?.error?.message || JSON.stringify(data)).toLowerCase()
+        if (msg.includes('no available channel') || msg.includes('model_not_found')) {
+          throw new Error(`Custom image API has no provisioned channel for "${cfg.customModel}" (HTTP 503); check gateway channel and routing configuration`)
+        }
+      }
+      const detail = formatErrorMessage(data?.error || data)
+      throw new Error(`Image API failed (HTTP ${res.status}): ${detail}`)
+    }
+    const item = data?.data?.[0]
+    if (!item) {
+      throw new Error(`Image API returned no images: ${JSON.stringify(data).slice(0, 600)}`)
+    }
+
+    if (item.b64_json) {
+      return {
+        bytes: Buffer.from(item.b64_json, 'base64'),
+        mediaType: normalizeMediaType(data.output_format || '', format),
+        width: 0,
+        height: 0,
+        seed: seedArg ?? 0,
+        sourceUrl: '',
+      }
+    }
+    if (!item.url) {
+      throw new Error(`Image API returned neither b64_json nor url: ${JSON.stringify(item).slice(0, 300)}`)
+    }
+    const download = await fetchImpl(item.url, { signal })
+    if (!download.ok) {
+      throw new Error(`Failed to download generated image (HTTP ${download.status})`)
+    }
+    const contentType = download.headers && typeof download.headers.get === 'function'
+      ? download.headers.get('content-type')
+      : ''
+    return {
+      bytes: Buffer.from(await download.arrayBuffer()),
+      mediaType: normalizeMediaType(contentType, format),
+      width: 0,
+      height: 0,
+      seed: seedArg ?? 0,
+      sourceUrl: item.url,
+    }
+  }
+  return custom
+}

package/lib/providers/backends/fal.js

@@ -0,0 +1,67 @@
+import {
+  falAuthHeader,
+  normalizeMediaType,
+  submitJob,
+  pollStatus,
+} from '../shared-helpers.js'
+
+/**
+ * @param {fetchImpl: Function, resolveKey: Function, cfg: object} deps
+ * @param {prompt?: string, size?: string, format?: string, seed?: number, signal?: AbortSignal,
+ *   negativePrompt?: string, guidanceScale?: number, source?: object, mask?: object, strength?: number,
+ *   quality?: string, style?: string, aspectPixels?: number[], aspectRatio?: string} job
+ */
+export function createFalGenerator(deps, job) {
+  const { fetchImpl, resolveKey, cfg } = deps
+  const { prompt, size, format, seed, signal, negativePrompt, guidanceScale, source, mask, strength, quality, style, aspectPixels, aspectRatio } = job
+
+  async function fal(seedArg = seed, promptArg = prompt) {
+    const key = await resolveKey(cfg.apiKeyEnv)
+    const isEdit = Boolean(source && source.bytes)
+    const targetModel = isEdit
+      ? (mask && mask.bytes ? 'fal-ai/flux-pro/v1/inpaint' : 'fal-ai/flux/dev/image-to-image')
+      : cfg.model
+    const body = { prompt: promptArg, image_size: size, num_images: 1 }
+    if (seedArg !== undefined) body.seed = seedArg
+    if (negativePrompt !== undefined) body.negative_prompt = negativePrompt
+    if (guidanceScale !== undefined) body.guidance_scale = guidanceScale
+    if (format !== 'png') body.output_format = format
+    if (isEdit) {
+      body.image_url = `data:${source.mediaType || 'image/png'};base64,${Buffer.from(source.bytes).toString('base64')}`
+      if (mask && mask.bytes) {
+        body.mask_url = `data:${mask.mediaType || 'image/png'};base64,${Buffer.from(mask.bytes).toString('base64')}`
+      }
+      if (strength !== undefined) {
+        body.strength = strength
+      }
+    }
+
+    const submit = await submitJob(fetchImpl, cfg.baseURL, targetModel, key, body, signal)
+    const statusUrl = submit.status_url || `${cfg.baseURL}/${cfg.model}/requests/${submit.request_id}/status`
+    const statusBody = await pollStatus(fetchImpl, statusUrl, key, signal, cfg.pollIntervalMs, cfg.timeoutMs)
+
+    const resultRes = await fetchImpl(statusBody.response_url, {
+      headers: { Authorization: falAuthHeader(key) },
+      signal,
+    })
+    const result = await resultRes.json().catch(() => ({}))
+    const image = result.images && result.images[0]
+    if (!image || !image.url) {
+      throw new Error(`FAL returned no images: ${JSON.stringify(result).slice(0, 600)}`)
+    }
+    const download = await fetchImpl(image.url, { signal })
+    if (!download.ok) {
+      throw new Error(`Failed to download generated image (HTTP ${download.status})`)
+    }
+    return {
+      bytes: Buffer.from(await download.arrayBuffer()),
+      mediaType: normalizeMediaType(image.content_type, format),
+      width: image.width ?? 0,
+      height: image.height ?? 0,
+      seed: result.seed ?? seedArg ?? 0,
+      sourceUrl: image.url,
+      cost: result.cost,
+    }
+  }
+  return fal
+}

package/lib/providers/backends/gemini.js

@@ -0,0 +1,37 @@
+import {
+  normalizeMediaType,
+} from '../shared-helpers.js'
+
+/**
+ * @param {fetchImpl: Function, resolveKey: Function, cfg: object} deps
+ * @param {prompt?: string, size?: string, format?: string, seed?: number, signal?: AbortSignal,
+ *   negativePrompt?: string, guidanceScale?: number, source?: object, mask?: object, strength?: number,
+ *   quality?: string, style?: string, aspectPixels?: number[], aspectRatio?: string} job
+ */
+export function createGeminiGenerator(deps, job) {
+  const { fetchImpl, resolveKey, cfg } = deps
+  const { prompt, size, format, seed, signal, negativePrompt, guidanceScale, source, mask, strength, quality, style, aspectPixels, aspectRatio } = job
+
+  async function gemini(seedArg = seed, promptArg = prompt) {
+    const key = await resolveKey(cfg.geminiKeyEnv)
+    const model = cfg.geminiModel || 'gemini-2.0-flash-exp-image-generation'
+    const res = await fetchImpl(`https://generativelanguage.googleapis.com/v1beta/models/${model}:generateContent?key=${encodeURIComponent(key)}`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        contents: [{ parts: [{ text: promptArg }] }],
+        generationConfig: { responseModalities: ['IMAGE'], ...(quality !== undefined ? { imageConfig: { imageQuality: quality } } : {}), ...(style !== undefined ? { imageConfig: { imageStyle: style } } : {}) },
+      }),
+      signal,
+    })
+    const data = await res.json().catch(() => ({}))
+    if (!res.ok) {
+      const detail = data?.error?.message || JSON.stringify(data).slice(0, 600)
+      throw new Error(`Gemini failed (HTTP ${res.status}): ${detail}`)
+    }
+    const part = data?.candidates?.[0]?.content?.parts?.find((p) => p.inlineData?.data)
+    if (!part) throw new Error('Gemini returned no image')
+    return { bytes: Buffer.from(part.inlineData.data, 'base64'), mediaType: normalizeMediaType(part.inlineData.mimeType || 'image/png', format), width: 0, height: 0, seed: seedArg ?? 0, sourceUrl: '' }
+  }
+  return gemini
+}