@goodandready/dsh-image-gen 0.10.35 → 0.11.0

package/lib/client.js

@@ -100,7 +100,7 @@ window.__ModuleLoader__.load({
 .ig-btn:hover:not(:disabled){background:var(--dsw-alias-bg-layer-4, var(--dsw-alias-bg-layer-2));border-color:var(--dsw-alias-label-dimmed, var(--dsw-alias-border-l2))}
 .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-active{background:var(--dsw-alias-brand-primary, #3b82f6);color:#ffffff;border-color:transparent}
+.ig-btn-active{background:var(--dsw-alias-state-brand-primary);color:var(--dsw-alias-bg-layer-1);border-color:transparent}
 .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, 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}
@@ -119,6 +119,39 @@ window.__ModuleLoader__.load({
 .ig-matrix-img{width:100%;aspect-ratio:1/1;object-fit:cover;cursor:pointer}
 .ig-matrix-bar{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;font-size:11px}
 
+/* Revision History (#148) */
+.ig-rev-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;background:var(--dsw-alias-bg-layer-2);border-radius:8px;border:1px solid var(--dsw-alias-border-l2);margin-bottom:8px;font-size:12px}
+.ig-rev-controls{display:flex;align-items:center;gap:6px}
+.ig-rev-btn{appearance:none;border:1px solid var(--dsw-alias-border-l2);background:transparent;color:var(--dsw-alias-label-primary);border-radius:4px;padding:2px 8px;cursor:pointer;font-size:11px;font-weight:600;transition:all .15s ease}
+.ig-rev-btn:hover:not(:disabled){background:var(--dsw-alias-bg-layer-3);border-color:var(--dsw-alias-label-secondary)}
+.ig-rev-btn:disabled{opacity:0.4;cursor:not-allowed}
+.ig-rev-badge{font-size:11px;color:var(--dsw-alias-label-secondary)}
+
+/* Progressive Draft Preview (#147) */
+.ig-progressive-wrap{position:relative;width:100%;overflow:hidden;border-radius:8px;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-2);min-height:160px;display:flex;align-items:center;justify-content:center}
+.ig-draft-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:blur(6px);opacity:0.75;transform:scale(1.02);transition:opacity 0.4s ease}
+.ig-final-img{position:relative;width:100%;height:auto;display:block;opacity:1;transition:opacity 0.35s ease}
+.ig-draft-overlay{position:absolute;bottom:8px;left:8px;padding:3px 8px;border-radius:4px;background:color-mix(in srgb, var(--dsw-alias-bg-layer-1) 80%, transparent);font-size:11px;font-weight:600;color:var(--dsw-alias-label-primary);display:flex;align-items:center;gap:6px;backdrop-filter:blur(4px)}
+
+@media (prefers-reduced-motion: reduce){
+  .ig-draft-img,.ig-final-img{transition:none !important}
+}
+
+/* Asset Vault & Studio (#158, #159) */
+.ig-vault-header{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:12px}
+.ig-vault-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));gap:12px}
+.ig-vault-card{border:1px solid var(--dsw-alias-border-l2);border-radius:10px;overflow:hidden;background:var(--dsw-alias-bg-layer-2);display:flex;flex-direction:column;transition:transform .15s ease, border-color .15s ease}
+.ig-vault-card:hover{border-color:var(--dsw-alias-state-brand-primary);transform:translateY(-2px)}
+.ig-vault-thumb{width:100%;aspect-ratio:1/1;object-fit:cover;cursor:pointer;background:var(--dsw-alias-bg-layer-3)}
+.ig-vault-body{padding:8px 10px;display:flex;flex-direction:column;gap:4px;font-size:12px}
+.ig-vault-prompt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500;color:var(--dsw-alias-label-primary)}
+.ig-vault-meta{font-size:11px;color:var(--dsw-alias-label-secondary);display:flex;justify-content:space-between}
+
+.ig-studio-layout{display:grid;grid-template-columns:320px 1fr;gap:18px;min-height:550px}
+@media (max-width: 800px){.ig-studio-layout{grid-template-columns:1fr}}
+.ig-studio-sidebar{display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);border-radius:12px}
+.ig-studio-canvas{display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-2);border-radius:12px;align-items:center;justify-content:center;position:relative}
+
 /* 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}
@@ -126,8 +159,7 @@ window.__ModuleLoader__.load({
 .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)
-    }
-    function createErrorBoundary() {
+    }    function createErrorBoundary() {
       if (!React || typeof React.Component !== 'function') {
         return function NoopBoundary(props) { return props?.children || null }
       }
@@ -1374,10 +1406,6 @@ window.__ModuleLoader__.load({
       const [responsiveTab, setResponsiveTab] = react.useState(0)
       const [copied, setCopied] = react.useState(false)
 
-      react.useEffect(() => {
-        ensureCss()
-      }, [])
-
       let args = {}
       let prompt = ''
       try {
@@ -1388,6 +1416,24 @@ window.__ModuleLoader__.load({
         }
       } catch (_) { /* malformed tool args */ }
 
+      const initialUrl = parsed.attachment ? attachmentImageUrl(parsed.attachment) : parsed.url
+      const [revisions, setRevisions] = react.useState(() => initialUrl ? [{ url: initialUrl, attachment: parsed.attachment, seed: args.seed, timestamp: Date.now() }] : [])
+      const [activeRev, setActiveRev] = react.useState(0)
+
+      react.useEffect(() => {
+        ensureCss()
+      }, [])
+
+      react.useEffect(() => {
+        if (!initialUrl) return
+        setRevisions((prev) => {
+          if (prev.some((r) => r.url === initialUrl)) return prev
+          const next = [...prev, { url: initialUrl, attachment: parsed.attachment, seed: args.seed, timestamp: Date.now() }]
+          setActiveRev(next.length - 1)
+          return next
+        })
+      }, [initialUrl, args.seed])
+
       const sendActionPrompt = async (text) => {
         try {
           const sessions = props.sessions
@@ -1468,21 +1514,28 @@ window.__ModuleLoader__.load({
             [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',
-          src: parsed.url,
+      } else {
+        // Revision bar (#148)
+        if (revisions.length > 1) {
+          body.push(react.createElement(ImageRevisionBar, {
+            key: 'revs',
+            revisions,
+            activeIndex: activeRev,
+            onSelect: (idx) => setActiveRev(idx),
+            t,
+          }))
+        }
+        // Progressive preview (#147)
+        const currentRev = revisions[activeRev] || {}
+        const displaySrc = currentRev.url || initialUrl
+        const draftSrc = block && (block.draftUrl || block.previewUrl || '')
+        body.push(react.createElement(ProgressiveImagePreview, {
+          key: 'prog-img',
+          src: displaySrc,
+          draftSrc,
+          isRunning: running,
           alt: prompt || 'generated image',
-          loading: 'lazy',
-          style: { maxWidth: '100%', borderRadius: '8px', border: '1px solid var(--dsw-alias-border-l2)' },
-        }))
-      } else if (parsed.attachment) {
-        body.push(react.createElement('img', {
-          key: 'i',
-          src: attachmentImageUrl(parsed.attachment),
-          alt: prompt || 'generated image',
-          loading: 'lazy',
-          style: { maxWidth: '100%', borderRadius: '8px', border: '1px solid var(--dsw-alias-border-l2)' },
+          t,
         }))
       }
 
@@ -1595,10 +1648,110 @@ window.__ModuleLoader__.load({
         remixDrawer,
         inpaintDrawer
       )
-    }
+    }    // -------------------------------------------------------------- Image Revision History (#148)
+    function ImageRevisionBar(props) {
+      const revisions = props.revisions
+      const activeIndex = props.activeIndex
+      const onSelect = props.onSelect
+      const t = props.t || ((k) => k)
 
-    // -------------------------------------------------------------- Dictionaries
-// 105-inpaint-canvas.js — Interactive in-chat canvas drawing overlay for inpainting (#285).
+      if (!Array.isArray(revisions) || revisions.length <= 1) return null
+
+      const current = revisions[activeIndex] || {}
+      const hasPrev = activeIndex > 0
+      const hasNext = activeIndex < revisions.length - 1
+
+      return react.createElement(
+        'div',
+        { className: 'ig-rev-bar', role: 'navigation', 'aria-label': t('card.revisions') || 'Image revisions' },
+        react.createElement(
+          'div',
+          { className: 'ig-rev-controls' },
+          react.createElement(
+            'button',
+            {
+              type: 'button',
+              className: 'ig-rev-btn',
+              disabled: !hasPrev,
+              onClick: () => onSelect(activeIndex - 1),
+              title: t('card.prevRevision') || 'Previous revision',
+            },
+            '◀'
+          ),
+          react.createElement(
+            'span',
+            { style: { fontWeight: '600', color: 'var(--dsw-alias-label-primary)' } },
+            `v${activeIndex + 1} / ${revisions.length}`
+          ),
+          react.createElement(
+            'button',
+            {
+              type: 'button',
+              className: 'ig-rev-btn',
+              disabled: !hasNext,
+              onClick: () => onSelect(activeIndex + 1),
+              title: t('card.nextRevision') || 'Next revision',
+            },
+            '▶'
+          )
+        ),
+        react.createElement(
+          'div',
+          { className: 'ig-rev-badge' },
+          current.seed !== undefined ? `seed: ${current.seed}` : (current.timestamp ? new Date(current.timestamp).toLocaleTimeString() : '')
+        )
+      )
+    }    // -------------------------------------------------------------- Progressive Draft Preview (#147)
+    function ProgressiveImagePreview(props) {
+      const src = props.src
+      const draftSrc = props.draftSrc
+      const isRunning = props.isRunning
+      const alt = props.alt || 'Generated image'
+      const t = props.t || ((k) => k)
+
+      const [loaded, setLoaded] = react.useState(false)
+
+      react.useEffect(() => {
+        setLoaded(false)
+      }, [src])
+
+      if (isRunning && !src && draftSrc) {
+        return react.createElement(
+          'div',
+          { className: 'ig-progressive-wrap' },
+          react.createElement('img', {
+            src: draftSrc,
+            alt: alt + ' (preview)',
+            className: 'ig-draft-img',
+          }),
+          react.createElement(
+            'div',
+            { className: 'ig-draft-overlay' },
+            '⚡ ' + (t('card.draftPreview') || 'Rendering draft...')
+          )
+        )
+      }
+
+      if (!src && !draftSrc) return null
+
+      return react.createElement(
+        'div',
+        { className: 'ig-progressive-wrap', style: { minHeight: 'auto' } },
+        draftSrc && !loaded ? react.createElement('img', {
+          src: draftSrc,
+          alt: alt + ' (draft)',
+          className: 'ig-draft-img',
+        }) : null,
+        src ? react.createElement('img', {
+          src,
+          alt,
+          loading: 'lazy',
+          className: 'ig-final-img',
+          style: { opacity: loaded || !draftSrc ? 1 : 0.8 },
+          onLoad: () => setLoaded(true),
+        }) : null
+      )
+    }// 105-inpaint-canvas.js — Interactive in-chat canvas drawing overlay for inpainting (#285).
 
     function InpaintCanvasOverlay({ react, t, parsed, onClose }) {
       const canvasRef = react.useRef(null)
@@ -2030,7 +2183,109 @@ window.__ModuleLoader__.load({
         ) : null
       )
     }
-    const en = {
+    // -------------------------------------------------------------- Theme Pair Toolview (#189)
+    function ThemePairToolView(props) {
+      const block = props.block
+      const t = props.t || ((k) => k)
+      const [copiedHtml, setCopiedHtml] = react.useState(false)
+      const [copiedCss, setCopiedCss] = react.useState(false)
+      const [themeTab, setThemeTab] = react.useState('light')
+
+      const raw = (block && (block.call ? block.call.argsRaw : block.argsRaw)) || ''
+      let args = {}
+      try { if (raw) args = JSON.parse(raw) } catch (_) { /* invalid json */ }
+
+      let data = {}
+      try {
+        const out = block && (block.output || block.result || block.text || '')
+        if (typeof out === 'object') data = out
+        else if (typeof out === 'string') data = JSON.parse(out)
+      } catch (_) { /* invalid json */ }
+
+      const light = data.light || {}
+      const dark = data.dark || {}
+      const htmlSnippet = data.html_snippet || ''
+      const cssSnippet = data.css_snippet || ''
+
+      const copyCode = (text, isHtml) => {
+        if (typeof navigator !== 'undefined' && navigator.clipboard) {
+          navigator.clipboard.writeText(text)
+          if (isHtml) {
+            setCopiedHtml(true)
+            setTimeout(() => setCopiedHtml(false), 2000)
+          } else {
+            setCopiedCss(true)
+            setTimeout(() => setCopiedCss(false), 2000)
+          }
+        }
+      }
+
+      const activeImg = themeTab === 'light' ? light : dark
+
+      return react.createElement(
+        'div',
+        { className: 'ig-page', style: { padding: '4px 0', gap: '10px' } },
+        react.createElement('div', { className: 'fal_head' }, '🌓 ' + (t('themePair.title') || 'Theme Pair Graphic')),
+        args.prompt ? react.createElement('div', { className: 'ig-prompt' }, args.prompt) : null,
+        react.createElement(
+          'div',
+          { className: 'ig-tabs' },
+          react.createElement(
+            'button',
+            {
+              type: 'button',
+              className: themeTab === 'light' ? 'ig-tab-btn ig-tab-btn-active' : 'ig-tab-btn',
+              onClick: () => setThemeTab('light'),
+            },
+            '☀️ ' + (t('themePair.light') || 'Light Theme')
+          ),
+          react.createElement(
+            'button',
+            {
+              type: 'button',
+              className: themeTab === 'dark' ? 'ig-tab-btn ig-tab-btn-active' : 'ig-tab-btn',
+              onClick: () => setThemeTab('dark'),
+            },
+            '🌙 ' + (t('themePair.dark') || 'Dark Theme')
+          )
+        ),
+        activeImg.url || activeImg.path ? react.createElement('img', {
+          src: activeImg.url || activeImg.path,
+          alt: args.prompt || 'theme image',
+          loading: 'lazy',
+          style: {
+            width: '100%',
+            maxHeight: '400px',
+            objectFit: 'contain',
+            borderRadius: '8px',
+            border: '1px solid var(--dsw-alias-border-l2)',
+            background: themeTab === 'light' ? 'var(--dsw-alias-bg-layer-1)' : 'var(--dsw-alias-bg-layer-3)',
+          },
+        }) : null,
+        htmlSnippet ? react.createElement(
+          'div',
+          { style: { display: 'flex', gap: '8px', marginTop: '4px' } },
+          react.createElement(
+            'button',
+            {
+              type: 'button',
+              className: 'ig-btn',
+              onClick: () => copyCode(htmlSnippet, true),
+            },
+            copiedHtml ? '✓ ' + (t('themePair.copiedHtml') || 'Copied HTML') : '📋 ' + (t('themePair.copyHtml') || 'Copy <picture> HTML')
+          ),
+          cssSnippet ? react.createElement(
+            'button',
+            {
+              type: 'button',
+              className: 'ig-btn',
+              onClick: () => copyCode(cssSnippet, false),
+            },
+            copiedCss ? '✓ ' + (t('themePair.copiedCss') || 'Copied CSS') : '🎨 ' + (t('themePair.copyCss') || 'Copy Theme CSS')
+          ) : null
+        ) : null
+      )
+    }    const en = {
       'settings.navLabel': 'Image Studio',
       'settings.title': 'Image Studio',
       'settings.description': 'AI Image generation, inpainting, variations, upscale & vectorization.',
@@ -2258,6 +2513,22 @@ window.__ModuleLoader__.load({
       'f.cacheTtlDays': 'Cache Retention (Legacy)',
       'f.cacheTtlDaysHint': 'Legacy name for retention period in days.',
       'p.cacheTtlDays': '0',
+
+      'studio.title': 'Image Studio',
+      'studio.canvas': 'Studio Canvas',
+      'studio.vault': 'Asset Vault',
+      'studio.parameters': 'Generation Parameters',
+      'studio.generate': 'Generate in Chat',
+      'studio.recent': 'Recent Generations',
+      'vault.title': 'Asset Browser & Vault',
+      'vault.search': 'Search prompt or tags...',
+      'vault.loadMore': 'Load more assets',
+      'vault.empty': 'No assets found in vault.',
+      'vault.inspector': 'Asset Inspector',
+      'vault.reroll': 'Re-roll with seed',
+      'vault.insert': 'Insert in Chat',
+      'vault.download': 'Download',
+      'vault.delete': 'Delete',
     }
 
     const zh = {
@@ -2476,6 +2747,22 @@ window.__ModuleLoader__.load({
       'f.cacheTtlDays': '缓存生命周期 (Legacy)',
       'f.cacheTtlDaysHint': '已废弃的缓存保留时长参数。',
       'p.cacheTtlDays': '0',
+
+      'studio.title': '图像创作工作台',
+      'studio.canvas': '创作画布',
+      'studio.vault': '素材资产库',
+      'studio.parameters': '生成参数配置',
+      'studio.generate': '在对话中生成',
+      'studio.recent': '最近生成历史',
+      'vault.title': '图像素材库与浏览器',
+      'vault.search': '搜索提示词或标签...',
+      'vault.loadMore': '加载更多素材',
+      'vault.empty': '素材库中暂无图像。',
+      'vault.inspector': '素材检查器',
+      'vault.reroll': '使用此种子重新生成',
+      'vault.insert': '插入到当前对话',
+      'vault.download': '下载图像',
+      'vault.delete': '删除',
     }
 
     // -------------------------------------------------------------- Registration & Apply
@@ -2682,6 +2969,18 @@ window.__ModuleLoader__.load({
         )
       )
 
+      registerSlotWhenReady('tool.call.toolview', () =>
+        ctx.slots.register(
+          {
+            name: 'tool.call.toolview',
+            key: 'generate_theme_pair',
+            locale: NS,
+            inject: () => ({ sessions: ctx.sessions }),
+          },
+          (props) => react.createElement(ErrorBoundary, null, react.createElement(ThemePairView, props))
+        )
+      )
+
 
       // Native Sidebar Right Pane Tab & BetterSidebar
       if (typeof ctx.inject === 'function') {
@@ -2691,16 +2990,16 @@ window.__ModuleLoader__.load({
             if (!tabs || typeof tabs.register !== 'function') return
             try {
               const def = {
-                id: '@goodandready/dsh-image-gen:gallery',
-                kind: 'image-gallery',
+                id: '@goodandready/dsh-image-gen:studio',
+                kind: 'image-studio',
                 priority: 'extension',
-                title: () => 'Gallery',
+                title: () => 'Image Studio',
                 guide: [
                   {
                     order: 45,
-                    title: () => 'Image Studio Gallery',
-                    description: () => 'Browse and inspect recent image generations',
-                    icon: () => react.createElement('span', null, '🖼️'),
+                    title: () => 'Image Studio & Vault',
+                    description: () => 'Interactive visual studio & asset browser',
+                    icon: () => react.createElement('span', null, '🎨'),
                   },
                 ],
               }
@@ -2720,7 +3019,7 @@ window.__ModuleLoader__.load({
                         locale: NS,
                         inject: () => ({ ctx }),
                       },
-                      (props) => react.createElement(ErrorBoundary, null, react.createElement(GalleryView, { ...props, ctx }))
+                      (props) => react.createElement(ErrorBoundary, null, react.createElement(ImageStudioView, { ...props, ctx }))
                     )
                   } catch (e) {
                     console.warn('[dsh-image-gen] native sidebar pane tab register failed', e)
@@ -2748,7 +3047,7 @@ window.__ModuleLoader__.load({
                 title: () => 'Gallery',
                 icon: () => react.createElement('span', null, '🖼️'),
                 order: 45,
-                component: ({ scope }) => react.createElement(ErrorBoundary, null, react.createElement(GalleryView, { ctx, scope })),
+                component: ({ scope }) => react.createElement(ErrorBoundary, null, react.createElement(ImageStudioView, { ctx, scope })),
               })
             } catch (e) {
               console.warn('[dsh-image-gen] betterSidebar registerTab failed', e)
@@ -2771,10 +3070,7 @@ window.__ModuleLoader__.load({
         )
       )
 
-      // List seat (plugins.item): the seat the Plugins page renders as the plugin's own
-      // page with its configuration. The label is a static string on purpose — it is
-      // resolved while the page renders, and a locale lookup there would take the whole
-      // client batch down with it.
+      // List seat (plugins.item)
       registerSlotWhenReady('plugins.item', () =>
         ctx.slots.register(
           {
@@ -2803,6 +3099,574 @@ window.__ModuleLoader__.load({
       )
     }
 
+    // -------------------------------------------------------------- Asset Vault View (#159)
+    function AssetVaultView(props) {
+      const { ctx, onSelectAsset } = props
+      const [items, setItems] = react.useState([])
+      const [loading, setLoading] = react.useState(false)
+      const [q, setQ] = react.useState('')
+      const [provider, setProvider] = react.useState('all')
+      const [aspect, setAspect] = react.useState('all')
+      const [sort, setSort] = react.useState('newest')
+      const [offset, setOffset] = react.useState(0)
+      const [hasMore, setHasMore] = react.useState(false)
+      const [selected, setSelected] = react.useState(null)
+      const [feedback, setFeedback] = react.useState('')
+
+      const showFeedback = (msg) => {
+        setFeedback(msg)
+        setTimeout(() => setFeedback(''), 2500)
+      }
+
+      const loadItems = (newOffset = 0, append = false) => {
+        setLoading(true)
+        const params = new URLSearchParams({
+          q,
+          provider: provider === 'all' ? '' : provider,
+          aspect: aspect === 'all' ? '' : aspect,
+          sort,
+          offset: String(newOffset),
+          limit: '24',
+        })
+        fetch('/dsh-image-gen/vault?' + params.toString())
+          .then((r) => r.json())
+          .then((data) => {
+            setLoading(false)
+            if (data && data.ok) {
+              setItems(append ? (prev) => [...prev, ...data.items] : data.items)
+              setOffset(data.offset + data.items.length)
+              setHasMore(data.hasMore)
+            }
+          })
+          .catch(() => setLoading(false))
+      }
+
+      react.useEffect(() => {
+        loadItems(0, false)
+      }, [q, provider, aspect, sort])
+
+      const handleDelete = (id) => {
+        if (!confirm('Are you sure you want to delete this asset?')) return
+        fetch('/dsh-image-gen/vault?id=' + encodeURIComponent(id), { method: 'DELETE' })
+          .then((r) => r.json())
+          .then((res) => {
+            if (res.ok) {
+              setItems((prev) => prev.filter((it) => it.id !== id && it.attachmentId !== id))
+              if (selected && (selected.id === id || selected.attachmentId === id)) {
+                setSelected(null)
+              }
+              showFeedback('Asset deleted')
+            }
+          })
+          .catch(() => showFeedback('Failed to delete asset'))
+      }
+
+      const handleInsert = (item) => {
+        const link = '![' + (item.prompt || 'Generated Image') + '](' + (item.url || item.thumbnailUrl) + ')'
+        if (typeof navigator !== 'undefined' && navigator.clipboard) {
+          navigator.clipboard.writeText(link)
+          showFeedback('Markdown snippet copied to clipboard!')
+        }
+      }
+
+      const handleReroll = (item) => {
+        if (typeof onSelectAsset === 'function') {
+          onSelectAsset(item)
+          return
+        }
+        const cmd = '/image ' + (item.prompt || '') + (item.seed !== undefined ? ' --seed ' + item.seed : '')
+        if (typeof navigator !== 'undefined' && navigator.clipboard) {
+          navigator.clipboard.writeText(cmd)
+          showFeedback('Prompt & seed copied to clipboard!')
+        }
+      }
+
+      return react.createElement(
+        'div',
+        { className: 'ig-vault-container', style: { display: 'flex', flexDirection: 'column', gap: '14px', width: '100%' } },
+        react.createElement(
+          'div',
+          { className: 'ig-vault-header' },
+          react.createElement('input', {
+            type: 'text',
+            className: 'ig-input',
+            style: { flex: '1 1 200px', padding: '6px 12px', borderRadius: '6px', border: '1px solid var(--dsw-alias-border-l2)', background: 'var(--dsw-alias-bg-layer-2)', color: 'var(--dsw-alias-label-primary)' },
+            placeholder: 'Search prompt or tags...',
+            value: q,
+            onChange: (e) => setQ(e.target.value),
+          }),
+          react.createElement(
+            'select',
+            {
+              className: 'ig-select',
+              value: provider,
+              onChange: (e) => setProvider(e.target.value),
+              style: { padding: '6px 10px', borderRadius: '6px', border: '1px solid var(--dsw-alias-border-l2)', background: 'var(--dsw-alias-bg-layer-2)', color: 'var(--dsw-alias-label-primary)' },
+            },
+            react.createElement('option', { value: 'all' }, 'All Providers'),
+            react.createElement('option', { value: 'fal' }, 'FAL.ai'),
+            react.createElement('option', { value: 'openai' }, 'OpenAI'),
+            react.createElement('option', { value: 'local' }, 'Local (ComfyUI)')
+          ),
+          react.createElement(
+            'select',
+            {
+              className: 'ig-select',
+              value: aspect,
+              onChange: (e) => setAspect(e.target.value),
+              style: { padding: '6px 10px', borderRadius: '6px', border: '1px solid var(--dsw-alias-border-l2)', background: 'var(--dsw-alias-bg-layer-2)', color: 'var(--dsw-alias-label-primary)' },
+            },
+            react.createElement('option', { value: 'all' }, 'All Ratios'),
+            react.createElement('option', { value: '1:1' }, '1:1 Square'),
+            react.createElement('option', { value: '16:9' }, '16:9 Landscape'),
+            react.createElement('option', { value: '9:16' }, '9:16 Portrait'),
+            react.createElement('option', { value: '4:3' }, '4:3 Standard'),
+            react.createElement('option', { value: '21:9' }, '21:9 Ultrawide')
+          ),
+          react.createElement(
+            'button',
+            {
+              type: 'button',
+              className: 'ig-tab-btn',
+              onClick: () => setSort(sort === 'newest' ? 'oldest' : 'newest'),
+              style: { border: '1px solid var(--dsw-alias-border-l2)', padding: '6px 10px', borderRadius: '6px', background: 'var(--dsw-alias-bg-layer-2)', color: 'var(--dsw-alias-label-primary)', cursor: 'pointer' },
+            },
+            sort === 'newest' ? '↓ Newest' : '↑ Oldest'
+          )
+        ),
+        feedback && react.createElement('div', { style: { padding: '6px 12px', borderRadius: '6px', background: 'color-mix(in srgb, var(--dsw-alias-state-brand-primary) 15%, transparent)', color: 'var(--dsw-alias-state-brand-primary)', fontSize: '12px' } }, feedback),
+        items.length === 0 && !loading
+          ? react.createElement('div', { style: { padding: '32px', textAlign: 'center', color: 'var(--dsw-alias-label-secondary)', fontSize: '13px' } }, 'No assets found in vault.')
+          : react.createElement(
+              'div',
+              { className: 'ig-vault-grid' },
+              items.map((item) =>
+                react.createElement(
+                  'div',
+                  { key: item.id || item.attachmentId, className: 'ig-vault-card' },
+                  react.createElement('img', {
+                    src: item.thumbnailUrl || item.url,
+                    className: 'ig-vault-thumb',
+                    loading: 'lazy',
+                    onClick: () => setSelected(item),
+                  }),
+                  react.createElement(
+                    'div',
+                    { className: 'ig-vault-body' },
+                    react.createElement('div', { className: 'ig-vault-prompt', title: item.prompt }, item.prompt || 'Untitled'),
+                    react.createElement(
+                      'div',
+                      { className: 'ig-vault-meta' },
+                      react.createElement('span', null, item.provider || 'local'),
+                      item.seed !== undefined && react.createElement('span', null, 'Seed ' + item.seed)
+                    ),
+                    react.createElement(
+                      'div',
+                      { style: { display: 'flex', gap: '4px', marginTop: '6px' } },
+                      react.createElement('button', { type: 'button', className: 'ig-rev-btn', style: { flex: 1 }, onClick: () => handleReroll(item), title: 'Re-roll with seed' }, '🎲 Re-roll'),
+                      react.createElement('button', { type: 'button', className: 'ig-rev-btn', style: { flex: 1 }, onClick: () => handleInsert(item), title: 'Insert into chat' }, '💬 Insert'),
+                      react.createElement('button', { type: 'button', className: 'ig-rev-btn', onClick: () => handleDelete(item.id || item.attachmentId), title: 'Delete' }, '🗑️')
+                    )
+                  )
+                )
+              )
+            ),
+        hasMore &&
+          react.createElement(
+            'div',
+            { style: { textAlign: 'center', margin: '14px 0' } },
+            react.createElement(
+              'button',
+              {
+                type: 'button',
+                className: 'ig-tab-btn',
+                onClick: () => loadItems(offset, true),
+                disabled: loading,
+                style: { padding: '8px 20px', borderRadius: '6px', border: '1px solid var(--dsw-alias-border-l2)', background: 'var(--dsw-alias-bg-layer-2)', color: 'var(--dsw-alias-label-primary)', cursor: 'pointer' },
+              },
+              loading ? 'Loading...' : 'Load more assets'
+            )
+          ),
+        selected &&
+          react.createElement(
+            'div',
+            {
+              style: { position: 'fixed', inset: 0, 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', justifyContent: 'center', padding: '20px' },
+              onClick: () => setSelected(null),
+            },
+            react.createElement(
+              'div',
+              {
+                style: { background: 'var(--dsw-alias-bg-layer-3)', border: '1px solid var(--dsw-alias-border-l2)', borderRadius: '12px', maxWidth: '580px', width: '100%', maxHeight: '90vh', overflowY: 'auto', padding: '18px', display: 'flex', flexDirection: 'column', gap: '12px' },
+                onClick: (e) => e.stopPropagation(),
+              },
+              react.createElement(
+                'div',
+                { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
+                react.createElement('span', { style: { fontWeight: '700', fontSize: '14px', color: 'var(--dsw-alias-label-primary)' } }, 'Asset Inspector'),
+                react.createElement('button', { type: 'button', onClick: () => setSelected(null), style: { background: 'none', border: 'none', cursor: 'pointer', fontSize: '16px', color: 'var(--dsw-alias-label-secondary)' } }, '✕')
+              ),
+              react.createElement('img', {
+                src: selected.url || selected.thumbnailUrl,
+                style: { width: '100%', borderRadius: '8px', maxHeight: '360px', objectFit: 'contain', background: 'var(--dsw-alias-bg-layer-2)' },
+              }),
+              react.createElement(
+                'div',
+                { style: { display: 'flex', flexWrap: 'wrap', gap: '6px', fontSize: '11px' } },
+                selected.seed !== undefined && react.createElement('span', { className: 'ig-badge' }, 'Seed: ' + selected.seed),
+                selected.provider && react.createElement('span', { className: 'ig-badge' }, 'Provider: ' + selected.provider),
+                selected.width && react.createElement('span', { className: 'ig-badge' }, selected.width + '×' + selected.height),
+                selected.cost ? react.createElement('span', { className: 'ig-badge' }, '$' + Number(selected.cost).toFixed(4)) : null
+              ),
+              react.createElement('div', { style: { fontSize: '12px', color: 'var(--dsw-alias-label-primary)', background: 'var(--dsw-alias-bg-layer-2)', padding: '10px', borderRadius: '6px', lineHeight: '1.4' } }, selected.prompt || 'No prompt'),
+              react.createElement(
+                'div',
+                { style: { display: 'flex', gap: '8px', justifyContent: 'flex-end', marginTop: '6px' } },
+                react.createElement('button', { type: 'button', className: 'ig-tab-btn', onClick: () => handleReroll(selected) }, '🎲 Re-roll'),
+                react.createElement('button', { type: 'button', className: 'ig-tab-btn', onClick: () => handleInsert(selected) }, '💬 Insert in Chat'),
+                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' } },
+                  '⬇ Download'
+                ),
+                react.createElement('button', { type: 'button', className: 'ig-tab-btn', style: { color: 'var(--dsw-alias-state-error-primary)' }, onClick: () => handleDelete(selected.id || selected.attachmentId) }, '🗑️ Delete')
+              )
+            )
+          )
+      )
+    }
+    // -------------------------------------------------------------- Fullscreen Image Studio (#158)
+    function ImageStudioView(props) {
+      const { ctx } = props
+      const [viewMode, setViewMode] = react.useState('studio') // 'studio' | 'vault'
+      const [isFullscreen, setIsFullscreen] = react.useState(false)
+      const [layoutGrid, setLayoutGrid] = react.useState('1x1') // '1x1' | '2x2' | '1x4'
+      const [prompt, setPrompt] = react.useState(() => {
+        try { return localStorage.getItem('dsh_studio_prompt') || '' } catch (_) { return '' }
+      })
+      const [stylePreset, setStylePreset] = react.useState('none')
+      const [aspectRatio, setAspectRatio] = react.useState('1:1')
+      const [provider, setProvider] = react.useState('fal')
+      const [seed, setSeed] = react.useState('')
+      const [activeImages, setActiveImages] = react.useState([])
+      const [recentStrip, setRecentStrip] = react.useState([])
+      const [status, setStatus] = react.useState('')
+
+      const presets = [
+        { id: 'none', label: 'Default' },
+        { id: 'photorealistic', label: 'Photo' },
+        { id: 'anime', label: 'Anime' },
+        { id: 'cyberpunk', label: 'Cyberpunk' },
+        { id: 'flat_vector', label: 'Vector' },
+        { id: '3d_render', label: '3D Render' },
+      ]
+
+      const refreshRecent = () => {
+        fetch('/dsh-image-gen/vault?limit=12')
+          .then((r) => r.json())
+          .then((data) => {
+            if (data && data.ok && Array.isArray(data.items)) {
+              setRecentStrip(data.items)
+              if (activeImages.length === 0 && data.items.length > 0) {
+                setActiveImages([data.items[0]])
+              }
+            }
+          })
+          .catch(() => {})
+      }
+
+      react.useEffect(() => {
+        refreshRecent()
+      }, [])
+
+      const updatePrompt = (val) => {
+        setPrompt(val)
+        try { localStorage.setItem('dsh_studio_prompt', val) } catch (_) { /* storage unavailable */ }
+      }
+
+      const handleSelectFromVault = (asset) => {
+        if (!asset) return
+        setActiveImages([asset])
+        if (asset.prompt) updatePrompt(asset.prompt)
+        if (asset.seed !== undefined) setSeed(String(asset.seed))
+        if (asset.provider) setProvider(asset.provider)
+        setViewMode('studio')
+      }
+
+      const handleCopySnippet = (format) => {
+        const first = activeImages[0]
+        if (!first) return
+        const url = first.url || first.thumbnailUrl
+        let snippet = ''
+        if (format === 'markdown') snippet = '![' + (first.prompt || 'Artwork') + '](' + url + ')'
+        if (format === 'html') snippet = '<img src="' + url + '" alt="' + (first.prompt || 'Artwork') + '" />'
+        if (typeof navigator !== 'undefined' && navigator.clipboard) {
+          navigator.clipboard.writeText(snippet)
+          setStatus('Copied ' + format.toUpperCase() + ' snippet!')
+          setTimeout(() => setStatus(''), 2000)
+        }
+      }
+
+      const containerStyle = isFullscreen
+        ? { position: 'fixed', inset: 0, zIndex: 99999, background: 'var(--dsw-alias-bg-layer-1)', padding: '20px', overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: '14px' }
+        : { display: 'flex', flexDirection: 'column', gap: '14px', width: '100%' }
+
+      return react.createElement(
+        'div',
+        { className: 'ig-studio-container', style: containerStyle },
+        react.createElement(
+          'div',
+          { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '10px', borderBottom: '1px solid var(--dsw-alias-border-l2)', paddingBottom: '10px' } },
+          react.createElement(
+            'div',
+            { style: { display: 'flex', gap: '8px', alignItems: 'center' } },
+            react.createElement('span', { style: { fontWeight: '700', fontSize: '15px', color: 'var(--dsw-alias-label-primary)' } }, '🎨 Image Studio'),
+            react.createElement(
+              'button',
+              {
+                type: 'button',
+                className: 'ig-tab-btn ' + (viewMode === 'studio' ? 'active' : ''),
+                onClick: () => setViewMode('studio'),
+              },
+              'Studio Canvas'
+            ),
+            react.createElement(
+              'button',
+              {
+                type: 'button',
+                className: 'ig-tab-btn ' + (viewMode === 'vault' ? 'active' : ''),
+                onClick: () => setViewMode('vault'),
+              },
+              '🗃️ Asset Vault'
+            )
+          ),
+          react.createElement(
+            'div',
+            { style: { display: 'flex', gap: '8px', alignItems: 'center' } },
+            viewMode === 'studio' &&
+              react.createElement(
+                'div',
+                { style: { display: 'flex', gap: '4px' } },
+                ['1x1', '2x2', '1x4'].map((grid) =>
+                  react.createElement(
+                    'button',
+                    {
+                      key: grid,
+                      type: 'button',
+                      className: 'ig-tab-btn ' + (layoutGrid === grid ? 'active' : ''),
+                      onClick: () => setLayoutGrid(grid),
+                      title: 'Grid layout: ' + grid,
+                    },
+                    grid
+                  )
+                )
+              ),
+            react.createElement(
+              'button',
+              {
+                type: 'button',
+                className: 'ig-tab-btn',
+                onClick: () => setIsFullscreen(!isFullscreen),
+                style: { border: '1px solid var(--dsw-alias-border-l2)' },
+              },
+              isFullscreen ? '✕ Exit Fullscreen' : '⛶ Fullscreen'
+            )
+          )
+        ),
+        viewMode === 'vault'
+          ? react.createElement(AssetVaultView, { ctx, onSelectAsset: handleSelectFromVault })
+          : react.createElement(
+              react.Fragment,
+              null,
+              react.createElement(
+                'div',
+                { className: 'ig-studio-layout' },
+                react.createElement(
+                  'div',
+                  { className: 'ig-studio-sidebar' },
+                  react.createElement('span', { style: { fontWeight: '600', fontSize: '13px', color: 'var(--dsw-alias-label-primary)' } }, 'Generation Parameters'),
+                  react.createElement(
+                    'div',
+                    null,
+                    react.createElement('label', { style: { fontSize: '11px', color: 'var(--dsw-alias-label-secondary)', display: 'block', marginBottom: '4px' } }, 'Prompt:'),
+                    react.createElement('textarea', {
+                      className: 'ig-input',
+                      rows: 4,
+                      style: { width: '100%', resize: 'vertical', borderRadius: '6px', padding: '8px', fontSize: '12px' },
+                      placeholder: 'Describe your vision...',
+                      value: prompt,
+                      onChange: (e) => updatePrompt(e.target.value),
+                    })
+                  ),
+                  react.createElement(
+                    'div',
+                    null,
+                    react.createElement('label', { style: { fontSize: '11px', color: 'var(--dsw-alias-label-secondary)', display: 'block', marginBottom: '4px' } }, 'Style Preset:'),
+                    react.createElement(
+                      'div',
+                      { style: { display: 'flex', flexWrap: 'wrap', gap: '4px' } },
+                      presets.map((p) =>
+                        react.createElement(
+                          'button',
+                          {
+                            key: p.id,
+                            type: 'button',
+                            className: 'ig-tab-btn ' + (stylePreset === p.id ? 'active' : ''),
+                            style: { fontSize: '11px', padding: '3px 8px' },
+                            onClick: () => setStylePreset(p.id),
+                          },
+                          p.label
+                        )
+                      )
+                    )
+                  ),
+                  react.createElement(
+                    'div',
+                    { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '8px' } },
+                    react.createElement(
+                      'div',
+                      null,
+                      react.createElement('label', { style: { fontSize: '11px', color: 'var(--dsw-alias-label-secondary)', display: 'block', marginBottom: '4px' } }, 'Aspect Ratio:'),
+                      react.createElement(
+                        'select',
+                        {
+                          className: 'ig-select',
+                          style: { width: '100%', padding: '6px', fontSize: '12px' },
+                          value: aspectRatio,
+                          onChange: (e) => setAspectRatio(e.target.value),
+                        },
+                        react.createElement('option', { value: '1:1' }, '1:1 Square'),
+                        react.createElement('option', { value: '16:9' }, '16:9 Landscape'),
+                        react.createElement('option', { value: '9:16' }, '9:16 Portrait'),
+                        react.createElement('option', { value: '4:3' }, '4:3 Standard'),
+                        react.createElement('option', { value: '21:9' }, '21:9 Ultrawide')
+                      )
+                    ),
+                    react.createElement(
+                      'div',
+                      null,
+                      react.createElement('label', { style: { fontSize: '11px', color: 'var(--dsw-alias-label-secondary)', display: 'block', marginBottom: '4px' } }, 'Provider:'),
+                      react.createElement(
+                        'select',
+                        {
+                          className: 'ig-select',
+                          style: { width: '100%', padding: '6px', fontSize: '12px' },
+                          value: provider,
+                          onChange: (e) => setProvider(e.target.value),
+                        },
+                        react.createElement('option', { value: 'fal' }, 'FAL.ai'),
+                        react.createElement('option', { value: 'openai' }, 'OpenAI'),
+                        react.createElement('option', { value: 'local' }, 'Local (ComfyUI)')
+                      )
+                    )
+                  ),
+                  react.createElement(
+                    'div',
+                    null,
+                    react.createElement('label', { style: { fontSize: '11px', color: 'var(--dsw-alias-label-secondary)', display: 'block', marginBottom: '4px' } }, 'Seed (optional):'),
+                    react.createElement(
+                      'div',
+                      { style: { display: 'flex', gap: '6px' } },
+                      react.createElement('input', {
+                        type: 'number',
+                        className: 'ig-input',
+                        style: { flex: 1, padding: '6px', fontSize: '12px' },
+                        placeholder: 'Random',
+                        value: seed,
+                        onChange: (e) => setSeed(e.target.value),
+                      }),
+                      react.createElement(
+                        'button',
+                        {
+                          type: 'button',
+                          className: 'ig-tab-btn',
+                          onClick: () => setSeed(String(Math.floor(Math.random() * 2147483647))),
+                          title: 'Randomize seed',
+                        },
+                        '🎲'
+                      )
+                    )
+                  ),
+                  react.createElement(
+                    'button',
+                    {
+                      type: 'button',
+                      className: 'ig-save-btn',
+                      style: { marginTop: '8px', padding: '10px' },
+                      onClick: () => {
+                        const cmd = '/image ' + (prompt || 'Artwork') + (stylePreset !== 'none' ? ' --style ' + stylePreset : '') + ' --aspect ' + aspectRatio + ' --provider ' + provider + (seed ? ' --seed ' + seed : '')
+                        if (typeof navigator !== 'undefined' && navigator.clipboard) {
+                          navigator.clipboard.writeText(cmd)
+                          setStatus('Copied generation command to clipboard!')
+                          setTimeout(() => setStatus(''), 2500)
+                        }
+                      },
+                    },
+                    '🎨 Generate in Chat'
+                  ),
+                  status && react.createElement('div', { style: { fontSize: '11px', color: 'var(--dsw-alias-state-brand-primary)', textAlign: 'center' } }, status)
+                ),
+                react.createElement(
+                  'div',
+                  { className: 'ig-studio-canvas' },
+                  activeImages.length === 0
+                    ? react.createElement('div', { style: { color: 'var(--dsw-alias-label-secondary)', fontSize: '13px' } }, 'Select an image from the recent strip below or click Generate.')
+                    : react.createElement(
+                        'div',
+                        {
+                          style: {
+                            display: 'grid',
+                            gridTemplateColumns: layoutGrid === '2x2' ? 'repeat(2, 1fr)' : layoutGrid === '1x4' ? 'repeat(4, 1fr)' : '1fr',
+                            gap: '12px',
+                            width: '100%',
+                            maxHeight: '440px',
+                            overflowY: 'auto',
+                          },
+                        },
+                        (layoutGrid === '1x1' ? activeImages.slice(0, 1) : activeImages.slice(0, layoutGrid === '2x2' ? 4 : 4)).map((img, i) =>
+                          react.createElement('img', {
+                            key: img.id || i,
+                            src: img.url || img.thumbnailUrl,
+                            style: { width: '100%', height: 'auto', maxHeight: '400px', objectFit: 'contain', borderRadius: '8px', background: 'var(--dsw-alias-bg-layer-3)' },
+                          })
+                        )
+                      ),
+                  activeImages.length > 0 &&
+                    react.createElement(
+                      'div',
+                      { style: { display: 'flex', gap: '8px', marginTop: '10px' } },
+                      react.createElement('button', { type: 'button', className: 'ig-tab-btn', onClick: () => handleCopySnippet('markdown') }, 'Copy Markdown'),
+                      react.createElement('button', { type: 'button', className: 'ig-tab-btn', onClick: () => handleCopySnippet('html') }, 'Copy HTML'),
+                      react.createElement(
+                        'a',
+                        { href: activeImages[0].url || activeImages[0].thumbnailUrl, download: 'studio-image.png', className: 'ig-tab-btn', style: { textDecoration: 'none' } },
+                        '⬇ Download'
+                      )
+                    )
+                )
+              ),
+              react.createElement(
+                'div',
+                { style: { display: 'flex', flexDirection: 'column', gap: '6px', marginTop: '10px' } },
+                react.createElement('span', { style: { fontSize: '12px', fontWeight: '600', color: 'var(--dsw-alias-label-secondary)' } }, 'Recent Generations:'),
+                react.createElement(
+                  'div',
+                  { className: 'ig-studio-strip', style: { display: 'flex', gap: '8px', overflowX: 'auto', padding: '4px 0' } },
+                  recentStrip.map((item) =>
+                    react.createElement('img', {
+                      key: item.id || item.attachmentId,
+                      src: item.thumbnailUrl || item.url,
+                      className: 'ig-studio-strip-thumb',
+                      style: { width: '64px', height: '64px', borderRadius: '6px', objectFit: 'cover', cursor: 'pointer', border: '1px solid var(--dsw-alias-border-l2)', flexShrink: 0 },
+                      title: item.prompt || 'Artwork',
+                      onClick: () => handleSelectFromVault(item),
+                    })
+                  )
+                )
+              )
+            )
+      )
+    }
     exports.apply = apply
     exports.inject = inject
     return module.exports