@goodandready/dsh-image-gen 0.10.30 → 0.10.32

package/lib/client.js

@@ -112,6 +112,12 @@ window.__ModuleLoader__.load({
 .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}
 
+.ig-inpaint-box{position:relative;margin-top:10px;padding:12px;border-radius:8px;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-2);display:flex;flex-direction:column;gap:8px}
+.ig-matrix-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));gap:10px;margin-top:8px}
+.ig-matrix-cell{border:1px solid var(--dsw-alias-border-l2);border-radius:8px;overflow:hidden;background:var(--dsw-alias-bg-layer-2);display:flex;flex-direction:column}
+.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}
+
 /* 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}
@@ -120,7 +126,6 @@ window.__ModuleLoader__.load({
 `
       document.head.appendChild(style)
     }
-
     function createErrorBoundary() {
       if (!React || typeof React.Component !== 'function') {
         return function NoopBoundary(props) { return props?.children || null }
@@ -273,6 +278,7 @@ window.__ModuleLoader__.load({
 
       // Provider: Codex / Grok
       { field: 'subscriptionQuality', spec: selectField('subscriptionQuality', ['', 'low', 'medium', 'high']), kind: 'select', options: ['', 'low', 'medium', 'high'], labelKey: 'f.subscriptionQuality', hintKey: 'f.subscriptionQualityHint', when: ['codex', 'grok'], tab: 'provider' },
+      { field: 'fallbackProviders', spec: textField('fallbackProviders'), kind: 'text', labelKey: 'f.fallbackProviders', hintKey: 'f.fallbackProvidersHint', placeholderKey: 'p.fallbackProviders', tab: 'provider' },
 
       // Enhancer & Style
       { field: 'autoEnhancePrompt', spec: booleanField('autoEnhancePrompt'), kind: 'select', options: ['true', 'false'], labelKey: 'f.autoEnhancePrompt', hintKey: 'f.autoEnhancePromptHint', tab: 'enhancer' },
@@ -1332,14 +1338,8 @@ window.__ModuleLoader__.load({
             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}`)
+            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,
@@ -1366,10 +1366,12 @@ window.__ModuleLoader__.load({
       const responsiveImages = !failed && !running ? readResponsiveImages(block) : []
       const t = props.t || ((k) => k)
       const [remixOpen, setRemixOpen] = react.useState(false)
+      const [inpaintOpen, setInpaintOpen] = 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)
+      const [copied, setCopied] = react.useState(false)
 
       react.useEffect(() => {
         ensureCss()
@@ -1383,9 +1385,7 @@ window.__ModuleLoader__.load({
           args = JSON.parse(raw)
           prompt = args.prompt || ''
         }
-      } catch (_) { /* malformed tool args; use empty prompt */ }
-
-      const [copied, setCopied] = react.useState(false)
+      } catch (_) { /* malformed tool args */ }
 
       const sendActionPrompt = async (text) => {
         try {
@@ -1394,7 +1394,7 @@ window.__ModuleLoader__.load({
           const binding = current && sessions.binding(current)
           const session = binding && binding.session
           if (session && session.prompt) await session.prompt([{ type: 'text', text }], 'queue')
-        } catch (_) { /* session prompt delivery failed; non-fatal */ }
+        } catch (_) { /* session prompt delivery failed */ }
       }
 
       const onCopyPrompt = () => {
@@ -1438,12 +1438,7 @@ window.__ModuleLoader__.load({
         body.push(
           react.createElement(
             'div',
-            {
-              className: 'ig-tabs',
-              role: 'tablist',
-              'aria-label': t('card.responsiveTabs') || 'Responsive viewports',
-              key: 'rtabs',
-            },
+            { className: 'ig-tabs', role: 'tablist', 'aria-label': t('card.responsiveTabs') || 'Responsive viewports', key: 'rtabs' },
             responsiveImages.map((img, idx) =>
               react.createElement(
                 'button',
@@ -1459,36 +1454,18 @@ window.__ModuleLoader__.load({
               )
             )
           ),
-          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
+          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', {
@@ -1499,10 +1476,9 @@ window.__ModuleLoader__.load({
           style: { maxWidth: '100%', borderRadius: '8px', border: '1px solid var(--dsw-alias-border-l2)' },
         }))
       } else if (parsed.attachment) {
-        const a = parsed.attachment
         body.push(react.createElement('img', {
           key: 'i',
-          src: attachmentImageUrl(a),
+          src: attachmentImageUrl(parsed.attachment),
           alt: prompt || 'generated image',
           loading: 'lazy',
           style: { maxWidth: '100%', borderRadius: '8px', border: '1px solid var(--dsw-alias-border-l2)' },
@@ -1512,6 +1488,7 @@ window.__ModuleLoader__.load({
       const actions = []
       if (!running && !failed && (parsed.url || parsed.attachment || responsiveImages.length)) {
         actions.push(
+          react.createElement('button', { key: 'inpaint', type: 'button', className: 'ig-btn', onClick: () => setInpaintOpen(!inpaintOpen) }, '🖌️ ' + (t('card.inpaint') || 'Inpaint')),
           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')),
@@ -1601,17 +1578,403 @@ window.__ModuleLoader__.load({
         )
       ) : null
 
+      const inpaintDrawer = inpaintOpen ? react.createElement(InpaintCanvasOverlay, {
+        react,
+        t,
+        parsed,
+        onClose: () => setInpaintOpen(false),
+      }) : 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,
-        remixDrawer
+        remixDrawer,
+        inpaintDrawer
       )
     }
 
     // -------------------------------------------------------------- Dictionaries
+// 105-inpaint-canvas.js — Interactive in-chat canvas drawing overlay for inpainting (#285).
+
+    function InpaintCanvasOverlay({ react, t, parsed, onClose }) {
+      const canvasRef = react.useRef(null)
+      const isDrawingRef = react.useRef(false)
+      const [brushSize, setBrushSize] = react.useState(24)
+      const [inpaintPrompt, setInpaintPrompt] = react.useState('')
+      const [copied, setCopied] = react.useState(false)
+      const [hasStrokes, setHasStrokes] = react.useState(false)
+      const undoStackRef = react.useRef([])
+
+      const imgUrl = (parsed && (parsed.url || (parsed.attachment && attachmentImageUrl(parsed.attachment)))) || ''
+      const targetRef = (parsed && (parsed.attachment?.attachmentId || parsed.path || parsed.url)) || 'current image'
+
+      const initCanvas = react.useCallback(() => {
+        const canvas = canvasRef.current
+        if (!canvas) return
+        const ctx = canvas.getContext('2d')
+        if (!ctx) return
+        ctx.fillStyle = '#000000'
+        ctx.fillRect(0, 0, canvas.width, canvas.height)
+        undoStackRef.current = [ctx.getImageData(0, 0, canvas.width, canvas.height)]
+      }, [])
+
+      react.useEffect(() => {
+        initCanvas()
+      }, [initCanvas])
+
+      function getPos(e) {
+        const canvas = canvasRef.current
+        if (!canvas) return { x: 0, y: 0 }
+        const rect = canvas.getBoundingClientRect()
+        const clientX = e.touches ? e.touches[0].clientX : e.clientX
+        const clientY = e.touches ? e.touches[0].clientY : e.clientY
+        const scaleX = canvas.width / rect.width
+        const scaleY = canvas.height / rect.height
+        return {
+          x: (clientX - rect.left) * scaleX,
+          y: (clientY - rect.top) * scaleY,
+        }
+      }
+
+      function startDraw(e) {
+        if (e.touches && e.touches.length > 1) return
+        e.preventDefault()
+        const canvas = canvasRef.current
+        if (!canvas) return
+        const ctx = canvas.getContext('2d')
+        if (!ctx) return
+
+        isDrawingRef.current = true
+        const pos = getPos(e)
+        ctx.lineWidth = brushSize
+        ctx.lineCap = 'round'
+        ctx.lineJoin = 'round'
+        ctx.strokeStyle = '#ffffff'
+        ctx.fillStyle = '#ffffff'
+
+        ctx.beginPath()
+        ctx.arc(pos.x, pos.y, brushSize / 2, 0, Math.PI * 2)
+        ctx.fill()
+        ctx.beginPath()
+        ctx.moveTo(pos.x, pos.y)
+      }
+
+      function draw(e) {
+        if (!isDrawingRef.current) return
+        if (e.touches && e.touches.length > 1) return
+        e.preventDefault()
+        const canvas = canvasRef.current
+        if (!canvas) return
+        const ctx = canvas.getContext('2d')
+        if (!ctx) return
+
+        const pos = getPos(e)
+        ctx.lineWidth = brushSize
+        ctx.lineCap = 'round'
+        ctx.lineJoin = 'round'
+        ctx.strokeStyle = '#ffffff'
+        ctx.lineTo(pos.x, pos.y)
+        ctx.stroke()
+        setHasStrokes(true)
+      }
+
+      function stopDraw(e) {
+        if (!isDrawingRef.current) return
+        isDrawingRef.current = false
+        const canvas = canvasRef.current
+        if (!canvas) return
+        const ctx = canvas.getContext('2d')
+        if (!ctx) return
+        ctx.closePath()
+
+        if (undoStackRef.current.length >= 15) {
+          undoStackRef.current.shift()
+        }
+        undoStackRef.current.push(ctx.getImageData(0, 0, canvas.width, canvas.height))
+      }
+
+      function handleUndo() {
+        const canvas = canvasRef.current
+        if (!canvas) return
+        const ctx = canvas.getContext('2d')
+        if (!ctx || undoStackRef.current.length <= 1) return
+        undoStackRef.current.pop()
+        const prev = undoStackRef.current[undoStackRef.current.length - 1]
+        if (prev) {
+          ctx.putImageData(prev, 0, 0)
+        }
+        if (undoStackRef.current.length <= 1) {
+          setHasStrokes(false)
+        }
+      }
+
+      function handleClear() {
+        initCanvas()
+        setHasStrokes(false)
+      }
+
+      function handleApply() {
+        const canvas = canvasRef.current
+        if (!canvas) return
+        const maskDataUrl = canvas.toDataURL('image/png')
+        const promptText = inpaintPrompt.trim() || 'inpaint masked region'
+        const instruction = 'Use edit_image with prompt: "' + promptText + '", source_image: "' + targetRef + '", mask: "' + maskDataUrl + '"'
+
+        if (typeof navigator !== 'undefined' && navigator.clipboard) {
+          navigator.clipboard.writeText(instruction)
+          setCopied(true)
+          setTimeout(() => setCopied(false), 2500)
+        }
+      }
+
+      return react.createElement(
+        'div',
+        { className: 'ig-inpaint-box' },
+        react.createElement(
+          'div',
+          { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
+          react.createElement(
+            'span',
+            { style: { fontSize: '13px', fontWeight: '700', color: 'var(--dsw-alias-label-primary)' } },
+            '🖌️ ' + (t('inpaint.title') || 'Inpainting Canvas (Paint white mask over region to edit)')
+          ),
+          react.createElement(
+            'button',
+            {
+              type: 'button',
+              className: 'ig-btn',
+              style: { padding: '2px 8px', fontSize: '11px' },
+              onClick: onClose,
+            },
+            '✕'
+          )
+        ),
+        react.createElement(
+          'div',
+          { style: { display: 'flex', gap: '8px', alignItems: 'center', flexWrap: 'wrap' } },
+          react.createElement('span', { style: { fontSize: '12px', color: 'var(--dsw-alias-label-secondary)' } }, (t('inpaint.brush_size') || 'Brush') + ': ' + brushSize + 'px'),
+          react.createElement('input', {
+            type: 'range',
+            min: '6',
+            max: '64',
+            value: brushSize,
+            onChange: (e) => setBrushSize(parseInt(e.target.value, 10)),
+            style: { width: '120px', cursor: 'pointer' },
+          }),
+          react.createElement(
+            'button',
+            {
+              type: 'button',
+              className: 'ig-btn',
+              style: { padding: '3px 8px', fontSize: '11px' },
+              onClick: handleUndo,
+              disabled: !hasStrokes,
+            },
+            '↩ ' + (t('inpaint.undo') || 'Undo')
+          ),
+          react.createElement(
+            'button',
+            {
+              type: 'button',
+              className: 'ig-btn',
+              style: { padding: '3px 8px', fontSize: '11px' },
+              onClick: handleClear,
+            },
+            '🗑️ ' + (t('inpaint.clear') || 'Clear Mask')
+          )
+        ),
+        react.createElement(
+          'div',
+          {
+            style: {
+              position: 'relative',
+              width: '100%',
+              maxWidth: '512px',
+              aspectRatio: '1/1',
+              borderRadius: '8px',
+              overflow: 'hidden',
+              border: '1px solid var(--dsw-alias-border-l2)',
+              background: '#000000',
+              margin: '4px 0',
+              userSelect: 'none',
+              touchAction: 'none',
+            },
+          },
+          imgUrl ? react.createElement('img', {
+            src: imgUrl,
+            alt: 'Source for Inpaint',
+            style: {
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: '100%',
+              height: '100%',
+              objectFit: 'contain',
+              opacity: 0.45,
+              pointerEvents: 'none',
+            },
+          }) : null,
+          react.createElement('canvas', {
+            ref: canvasRef,
+            width: 512,
+            height: 512,
+            style: {
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: '100%',
+              height: '100%',
+              cursor: 'crosshair',
+              mixBlendMode: 'screen',
+            },
+            onMouseDown: startDraw,
+            onMouseMove: draw,
+            onMouseUp: stopDraw,
+            onMouseLeave: stopDraw,
+            onTouchStart: startDraw,
+            onTouchMove: draw,
+            onTouchEnd: stopDraw,
+          })
+        ),
+        react.createElement('input', {
+          type: 'text',
+          placeholder: t('inpaint.prompt_placeholder') || 'Describe what to generate in the masked area...',
+          value: inpaintPrompt,
+          onChange: (e) => setInpaintPrompt(e.target.value),
+          className: 'ig-field-input',
+          style: { fontSize: '12px', padding: '6px 10px', width: '100%' },
+        }),
+        react.createElement(
+          'div',
+          { style: { display: 'flex', justifyContent: 'flex-end', marginTop: '2px' } },
+          react.createElement(
+            'button',
+            {
+              type: 'button',
+              className: 'ig-btn ig-btn-primary',
+              style: { padding: '5px 12px', fontSize: '12px' },
+              onClick: handleApply,
+            },
+            copied ? (t('inpaint.copied') || '✓ Instruction Copied!') : ('🖌️ ' + (t('inpaint.apply') || 'Apply Inpainting'))
+          )
+        )
+      )
+    }
+// 106-style-matrix-view.js — 2×2 Style Matrix toolview with Blind A/B Compare (#286).
+
+    function StyleMatrixCard(props) {
+      const block = props.block || {}
+      const parsed = react.useMemo(() => {
+        const raw = block.output || block.text || ''
+        const obj = tryParseJsonObject(raw)
+        return obj || { base_prompt: '', blind_mode: false, cells: [] }
+      }, [block])
+
+      const [blind, setBlind] = react.useState(Boolean(parsed.blind_mode))
+      const [copiedId, setCopiedId] = react.useState(null)
+      const [previewImg, setPreviewImg] = react.useState(null)
+
+      const cells = parsed.cells || []
+
+      function handleSelectStyle(c) {
+        const styleName = c.style || 'chosen_style'
+        const instruction = 'Set style preset to "' + styleName + '" for subsequent image generations.'
+        if (typeof navigator !== 'undefined' && navigator.clipboard) {
+          navigator.clipboard.writeText(instruction)
+          setCopiedId(c.id)
+          setTimeout(() => setCopiedId(null), 2500)
+        }
+      }
+
+      const cellNodes = cells.map((c) => {
+        const imgUrl = c.url || (c.attachment && attachmentImageUrl(c.attachment)) || ''
+        const styleLabel = blind ? ('Option ' + c.id) : c.style
+        const isCopied = copiedId === c.id
+
+        return react.createElement(
+          'div',
+          { key: c.id, className: 'ig-matrix-cell' },
+          imgUrl ? react.createElement('img', {
+            src: imgUrl,
+            alt: styleLabel,
+            className: 'ig-matrix-img',
+            onClick: () => setPreviewImg(imgUrl),
+          }) : react.createElement('div', { style: { height: '140px', background: 'var(--dsw-alias-bg-layer-2)' } }),
+          react.createElement(
+            'div',
+            { className: 'ig-matrix-bar' },
+            react.createElement(
+              'span',
+              { style: { fontWeight: '600', color: 'var(--dsw-alias-label-primary)' } },
+              '[' + c.id + '] ' + styleLabel
+            ),
+            react.createElement(
+              'button',
+              {
+                type: 'button',
+                className: 'ig-btn',
+                style: { padding: '2px 8px', fontSize: '11px' },
+                onClick: () => handleSelectStyle(c),
+              },
+              isCopied ? (t('matrix.copied') || '✓ Selected!') : ('⭐ ' + (t('matrix.use_style') || 'Use Style'))
+            )
+          )
+        )
+      })
+
+      return react.createElement(
+        'div',
+        { className: 'ig-section-card', style: { margin: '8px 0' } },
+        react.createElement(
+          'div',
+          { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
+          react.createElement(
+            'span',
+            { className: 'ig-section-title' },
+            '⚡ ' + (t('matrix.title') || 'Style Matrix Benchmark (2×2)')
+          ),
+          react.createElement(
+            'button',
+            {
+              type: 'button',
+              className: 'ig-tab-btn',
+              style: { padding: '4px 10px', fontSize: '12px' },
+              onClick: () => setBlind(!blind),
+            },
+            blind ? ('🙈 ' + (t('matrix.blind_toggle') || 'Reveal Styles')) : '👁️ Mask Styles (Blind)'
+          )
+        ),
+        parsed.base_prompt ? react.createElement('div', { className: 'ig-prompt' }, parsed.base_prompt) : null,
+        react.createElement('div', { className: 'ig-matrix-grid' }, cellNodes),
+        previewImg ? react.createElement(
+          'div',
+          {
+            style: {
+              position: 'fixed',
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              background: 'rgba(0,0,0,0.85)',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              zIndex: 99999,
+              cursor: 'zoom-out',
+            },
+            onClick: () => setPreviewImg(null),
+          },
+          react.createElement('img', {
+            src: previewImg,
+            alt: 'Enlarged Preview',
+            style: { maxWidth: '90vw', maxHeight: '90vh', borderRadius: '8px' },
+          })
+        ) : null
+      )
+    }
     const en = {
       'settings.navLabel': 'Image Studio',
       'settings.title': 'Image Studio',
@@ -1650,6 +2013,23 @@ window.__ModuleLoader__.load({
       'card.actionReroll': 'Reroll image',
       'card.actionUpscale': 'Upscale image',
       'card.actionRemoveBg': 'Remove background',
+      'card.inpaint': 'Inpaint',
+      'inpaint.title': 'Inpainting Canvas (Paint white mask over region to edit)',
+      'inpaint.brush_size': 'Brush',
+      'inpaint.clear': 'Clear Mask',
+      'inpaint.undo': 'Undo',
+      'inpaint.apply': 'Apply Inpaint',
+      'inpaint.prompt_placeholder': 'Describe what to generate in the masked area...',
+      'inpaint.copied': '✓ Instruction Copied!',
+      'matrix.title': 'Style Matrix Benchmark (2×2)',
+      'matrix.blind_on': 'Blind Mode Active',
+      'matrix.blind_toggle': 'Reveal Styles',
+      'matrix.use_style': 'Use Style',
+      'matrix.copied': '✓ Selected!',
+      'f.fallbackProviders': 'Fallback Providers Chain',
+      'f.fallbackProvidersHint': 'Comma-separated list of fallback providers to cascade to on 429, 5xx, or quota limits (e.g. replicate, custom, gemini).',
+      'p.fallbackProviders': 'replicate, custom, gemini',
+
       'card.reroll': 'Reroll',
       'card.upscale': 'Upscale 2x/4x',
       'card.removeBg': 'Remove BG',
@@ -1854,6 +2234,23 @@ window.__ModuleLoader__.load({
       'card.actionReroll': '重新生成图像',
       'card.actionUpscale': '放大图像',
       'card.actionRemoveBg': '移除背景',
+      'card.inpaint': '局部重绘',
+      'inpaint.title': '画布局部重绘（涂抹白色蒙版标记区域）',
+      'inpaint.brush_size': '画笔大小',
+      'inpaint.clear': '清空蒙版',
+      'inpaint.undo': '撤销',
+      'inpaint.apply': '生成局部重绘',
+      'inpaint.prompt_placeholder': '描述在涂抹区域生成的内容...',
+      'inpaint.copied': '✓ 已复制重绘指令!',
+      'matrix.title': '2×2 风格探索矩阵',
+      'matrix.blind_on': '盲测模式进行中',
+      'matrix.blind_toggle': '显示风格标签',
+      'matrix.use_style': '使用此风格',
+      'matrix.copied': '✓ 风格已选定!',
+      'f.fallbackProviders': '备用提供商级联',
+      'f.fallbackProvidersHint': '当主提供商遇到 429 限流、5xx 故障或余额不足时依次自动切换的备用服务商列表（如 replicate, custom, gemini）。',
+      'p.fallbackProviders': 'replicate, custom, gemini',
+
       'card.reroll': '重绘',
       'card.upscale': '放大 2x/4x',
       'card.removeBg': '抠图背景',
@@ -2078,6 +2475,7 @@ window.__ModuleLoader__.load({
         'assemble_image_grid',
         'smart_crop_image',
         'export_asset_pack',
+        'generate_ui_asset',
       ]
 
       for (const toolName of toolviewTools) {
@@ -2094,6 +2492,18 @@ window.__ModuleLoader__.load({
         )
       }
 
+      registerSlotWhenReady('tool.call.toolview', () =>
+        ctx.slots.register(
+          {
+            name: 'tool.call.toolview',
+            key: 'generate_style_matrix',
+            locale: NS,
+            inject: () => ({ sessions: ctx.sessions }),
+          },
+          (props) => react.createElement(ErrorBoundary, null, react.createElement(StyleMatrixCard, props))
+        )
+      )
+
 
       // Native Sidebar Right Pane Tab & BetterSidebar
       if (typeof ctx.inject === 'function') {