@dickpy/dsh-imagegen 1.0.9 → 1.0.19

package/src/client/api.ts

@@ -3,7 +3,7 @@
  * data access path the panel uses — plain fetch, same origin.
  */
 
-import { GENERATE_API, HISTORY_API, TEMPLATES_API, UPDATE_API, type GenerateRequest, type GenerateResult, type HistoryEntry, type TemplateListResult, type TemplateRefreshResult, type UpdateInfo } from '../protocol.ts'
+import { GALLERY_API, GENERATE_API, HISTORY_API, TEMPLATES_API, UPDATE_API, type GenerateRequest, type GenerateResult, type HistoryEntry, type HistoryEntryInput, type TemplateListResult, type TemplateRefreshResult, type UpdateInfo } from '../protocol.ts'
 
 /** Error carrying the route's JSON error message. */
 export class ImageGenApiError extends Error {
@@ -98,6 +98,43 @@ export class ImageGenApi {
     return body.entries
   }
 
+  /** List the host-persisted gallery (newest first). */
+  async galleryList(): Promise<HistoryEntry[]> {
+    const response = await fetch(GALLERY_API.list, { method: 'POST' })
+    const body = await readEnvelope<{ ok: true; entries: HistoryEntry[] }>(response)
+    return body.entries
+  }
+
+  /** Append one image to the gallery. The host assigns the id and skips the
+   *  append when a content-identical image is already in the gallery. */
+  async galleryAppend(entry: HistoryEntryInput): Promise<{ entries: HistoryEntry[]; added: boolean }> {
+    const response = await fetch(GALLERY_API.append, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ entry }),
+    })
+    const body = await readEnvelope<{ ok: true; entries: HistoryEntry[]; added: boolean }>(response)
+    return { entries: body.entries, added: body.added }
+  }
+
+  /** Remove one gallery entry by id. */
+  async galleryRemove(id: string): Promise<HistoryEntry[]> {
+    const response = await fetch(GALLERY_API.remove, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ id }),
+    })
+    const body = await readEnvelope<{ ok: true; entries: HistoryEntry[] }>(response)
+    return body.entries
+  }
+
+  /** Clear the entire gallery. */
+  async galleryClear(): Promise<HistoryEntry[]> {
+    const response = await fetch(GALLERY_API.clear, { method: 'POST' })
+    const body = await readEnvelope<{ ok: true; entries: HistoryEntry[] }>(response)
+    return body.entries
+  }
+
   /** Fetch the prompt-template library (bundled snapshot or refreshed copy). */
   async templatesList(): Promise<TemplateListResult> {
     const response = await fetch(TEMPLATES_API.list, { method: 'POST' })

package/src/client/locales.ts

@@ -4,9 +4,9 @@
 
 export const zh = {
   'entry.label': 'AI 生图',
-  'entry.tooltip': 'AI 生图面板（gpt-image-2）',
+  'entry.tooltip': 'AI 生图面板（gpt-image-2 / grok-imagine-image）',
   'panel.title': 'AI 生图',
-  'panel.subtitle': 'gpt-image-2 图像生成',
+  'panel.githubTip': '觉得好用或有建议？欢迎来 GitHub 提 issues、点个 star 支持一下！',
   // mode
   'mode.text': '文生图',
   'mode.edit': '图生图',
@@ -20,16 +20,18 @@ export const zh = {
   'params.count': '生成数量',
   'params.detail': '细节',
   'size.auto': '自动',
-  'size.square': '1024×1024',
-  'size.landscape': '1536×1024',
-  'size.portrait': '1024×1536',
-  'size.small': '512×512',
-  'size.wide': '1792×1024',
-  'size.tall': '1024×1792',
+  'size.square': '1:1 方图',
+  'size.portrait34': '3:4 标准竖图',
+  'size.landscape43': '4:3 标准横图',
+  'size.portrait916': '9:16 竖屏',
+  'size.portrait23': '2:3 竖图',
+  'size.landscape32': '3:2 横图',
+  'size.wide169': '16:9 宽屏',
+  'size.ultrawide21': '21:9 超宽屏',
   'quality.auto': '自动',
-  'quality.low': '低',
-  'quality.medium': '中',
-  'quality.high': '高',
+  'quality.1k': '1K',
+  'quality.2k': '2K',
+  'quality.4k': '4K',
   'count.one': '1 张',
   'count.two': '2 张',
   'count.three': '3 张',
@@ -65,6 +67,29 @@ export const zh = {
   'history.delete': '删除',
   'history.images': '张',
   'history.viewing': '历史 · {time}',
+  // gallery
+  'gallery.title': '画廊',
+  'gallery.categories': '分类',
+  'gallery.all': '全部作品',
+  'gallery.gpt': 'gpt-image-2',
+  'gallery.grok': 'grok-imagine-image',
+  'gallery.ratio': '画面比例',
+  'gallery.filterHint': '按生成模式、模型和比例筛选画廊',
+  'gallery.count': '· 共 {count} 幅',
+  'gallery.viewMode': '视图模式',
+  'gallery.masonry': '瀑布流',
+  'gallery.grid': '整齐网格',
+  'gallery.sort': '排序',
+  'gallery.newest': '最新发布',
+  'gallery.oldest': '最早发布',
+  'gallery.untitled': '未命名作品',
+  'gallery.add': '加入画廊',
+  'gallery.added': '已加入画廊',
+  'gallery.already': '已在画廊中',
+  'gallery.delete': '移出画廊',
+  'gallery.clear': '清空画廊',
+  'gallery.empty': '画廊还是空的，把喜欢的图片加入进来吧',
+  'gallery.viewing': '画廊 · {time}',
   // preview
   'preview.title': '图片预览',
   'preview.open': '点击预览',
@@ -154,9 +179,9 @@ export const zh = {
 
 export const en: Record<keyof typeof zh, string> = {
   'entry.label': 'AI Image',
-  'entry.tooltip': 'AI image generation studio (gpt-image-2)',
+  'entry.tooltip': 'AI image generation studio (gpt-image-2 / grok-imagine-image)',
   'panel.title': 'AI Image',
-  'panel.subtitle': 'gpt-image-2 image generation',
+  'panel.githubTip': 'Like it or have suggestions? Head to GitHub to open issues and star us!',
   'mode.text': 'Text to Image',
   'mode.edit': 'Image to Image',
   'prompt.placeholder': 'Describe the picture you want, e.g. an orange cat in an astronaut helmet raising a telescope on the moon, watercolor style, soft light…',
@@ -167,16 +192,18 @@ export const en: Record<keyof typeof zh, string> = {
   'params.count': 'Count',
   'params.detail': 'Detail',
   'size.auto': 'Auto',
-  'size.square': '1024×1024',
-  'size.landscape': '1536×1024',
-  'size.portrait': '1024×1536',
-  'size.small': '512×512',
-  'size.wide': '1792×1024',
-  'size.tall': '1024×1792',
+  'size.square': '1:1 Square',
+  'size.portrait34': '3:4 Portrait',
+  'size.landscape43': '4:3 Landscape',
+  'size.portrait916': '9:16 Vertical',
+  'size.portrait23': '2:3 Portrait',
+  'size.landscape32': '3:2 Landscape',
+  'size.wide169': '16:9 Widescreen',
+  'size.ultrawide21': '21:9 Ultrawide',
   'quality.auto': 'Auto',
-  'quality.low': 'Low',
-  'quality.medium': 'Medium',
-  'quality.high': 'High',
+  'quality.1k': '1K',
+  'quality.2k': '2K',
+  'quality.4k': '4K',
   'count.one': '1',
   'count.two': '2',
   'count.three': '3',
@@ -208,6 +235,28 @@ export const en: Record<keyof typeof zh, string> = {
   'history.delete': 'Delete',
   'history.images': 'images',
   'history.viewing': 'History · {time}',
+  'gallery.title': 'Gallery',
+  'gallery.categories': 'Categories',
+  'gallery.all': 'All works',
+  'gallery.gpt': 'gpt-image-2',
+  'gallery.grok': 'grok-imagine-image',
+  'gallery.ratio': 'Aspect ratio',
+  'gallery.filterHint': 'Filter by mode, model, and aspect ratio',
+  'gallery.count': '· {count} works',
+  'gallery.viewMode': 'View mode',
+  'gallery.masonry': 'Masonry',
+  'gallery.grid': 'Grid',
+  'gallery.sort': 'Sort',
+  'gallery.newest': 'Newest',
+  'gallery.oldest': 'Oldest',
+  'gallery.untitled': 'Untitled work',
+  'gallery.add': 'Add to gallery',
+  'gallery.added': 'Added to gallery',
+  'gallery.already': 'Already in gallery',
+  'gallery.delete': 'Remove',
+  'gallery.clear': 'Clear gallery',
+  'gallery.empty': 'The gallery is empty — add images you like here',
+  'gallery.viewing': 'Gallery · {time}',
   'preview.title': 'Image preview',
   'preview.open': 'Click to preview',
   'preview.close': 'Close',

package/src/client/mount.tsx

@@ -3,11 +3,16 @@
  *
  * The `conversation` slot is single-occupant (ui-conversation) and external
  * plugins cannot declare slots, so the panel takes over the center column at
- * the DOM level: a container is appended inside the `[data-pane="conversation"]`
- * grid item (an extra trailing child React never manages), and a stylesheet
- * rule hides the conversation content while the panel is active. Toggling is
- * a data attribute on <html> — no React involvement, so the conversation
- * subtree underneath stays mounted and stateful.
+ * the DOM level: a container is appended inside the conversation grid item
+ * (an extra trailing child React never manages), and a stylesheet rule hides
+ * the conversation content while the panel is active. Toggling is a data
+ * attribute on <html> — no React involvement, so the conversation subtree
+ * underneath stays mounted and stateful.
+ *
+ * Shell compatibility: the center column is `[data-pane="conversation"]` on
+ * legacy shells and `[class*="centerCol"]` on the rc.6+ AppFrame layout (the
+ * same dual selector the dsh-ssh / task-board panels use); both are queried
+ * and both get the `position: relative` base in panel.module.css.
  */
 
 import { createRoot, type Root } from 'react-dom/client'
@@ -20,7 +25,7 @@ import css from './panel.module.css'
 /** The injected panel container (kept in the DOM, hidden when inactive). */
 export const PANEL_VIEW_SELECTOR = '[data-dsh-imagegen-view]'
 
-const CONVERSATION_COLUMN_SELECTOR = '[data-pane="conversation"]'
+const CONVERSATION_COLUMN_SELECTOR = '[data-pane="conversation"], [class*="centerCol"]'
 const ACTIVE_ATTR = 'data-dsh-imagegen-active'
 /** Sibling panels' activation attributes, removed when this panel opens. */
 const OTHER_ACTIVE_ATTRS = ['data-dsh-taskboard-active', 'data-dsh-ssh-active']

package/src/client/panel.module.css

@@ -10,7 +10,13 @@
 
 /* --- center-column takeover (global rules, attribute-scoped) ----------------- */
 
-[data-pane='conversation'] {
+/* The panel container rides inside the conversation grid item as an extra
+   trailing child; hidden unless the panel is active. The position rule covers
+   both shells: the legacy `[data-pane="conversation"]` and the rc.6+
+   AppFrame class-based column ([class*="centerCol"]) — without a positioned
+   ancestor the absolutely-positioned view resolves against the frame. */
+[data-pane='conversation'],
+[class*='centerCol'] {
   position: relative;
 }
 
@@ -107,6 +113,7 @@ html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ss
 }
 
 .panel {
+  position: relative;
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -143,12 +150,23 @@ html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ss
   white-space: nowrap;
 }
 
-.panelSubtitle {
-  font-size: 12px;
-  color: var(--dsw-alias-label-tertiary);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+/* GitHub icon button next to the title (opens the repo). */
+.githubLink {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 22px;
+  height: 22px;
+  border-radius: 6px;
+  color: var(--dsw-alias-label-secondary);
+  text-decoration: none;
+  transition: color 0.12s, background 0.12s;
+}
+
+.githubLink:hover {
+  color: var(--dsw-alias-label-primary);
+  background: var(--dsw-alias-bg-layer-2);
 }
 
 /* --- connection status and update notice -------------------------------------- */
@@ -715,6 +733,10 @@ html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ss
 .modelSelect {
   width: 100%;
   height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
   padding: 0 12px;
   font-size: 13px;
   color: var(--dsw-alias-label-primary);
@@ -724,6 +746,7 @@ html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ss
   outline: none;
   font-family: inherit;
   cursor: pointer;
+  text-align: left;
 }
 
 .modelSelect:focus-visible {
@@ -732,6 +755,59 @@ html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ss
 
 .modelSelect:disabled {
   opacity: 0.55;
+  cursor: default;
+}
+
+/* Model dropdown trigger + upward-opening menu. */
+.modelMenu {
+  position: relative;
+  display: block;
+  min-width: 0;
+}
+
+/* The list opens UPWARD (absolute above the trigger) so it never hides
+   behind the footer edge below. */
+.modelMenuList {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: calc(100% + 6px);
+  z-index: 40;
+  display: flex;
+  flex-direction: column;
+  padding: 4px;
+  background: var(--dsw-alias-bg-layer-2);
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 12px;
+  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
+  overflow: hidden;
+}
+
+.modelMenuItem {
+  display: block;
+  width: 100%;
+  padding: 7px 10px;
+  font: inherit;
+  font-size: 13px;
+  color: var(--dsw-alias-label-primary);
+  background: transparent;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.modelMenuItem:hover {
+  background: var(--dsw-alias-bg-hover);
+}
+
+.modelMenuItem[data-selected] {
+  color: var(--dsw-alias-brand-primary);
+  font-weight: 600;
+  background: var(--dsw-alias-bg-layer-1);
 }
 
 .generateButton {
@@ -908,6 +984,42 @@ html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ss
   background: var(--dsw-alias-bg-base);
 }
 
+/* Add-to-gallery pill (top-left, mirrors .download; shows on card hover). */
+.galleryAdd {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 2px 10px;
+  font: inherit;
+  font-size: 12px;
+  line-height: 20px;
+  font-weight: 500;
+  color: var(--dsw-alias-label-primary);
+  background: var(--dsw-alias-bg-mask-1);
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 999px;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.12s;
+  backdrop-filter: blur(4px);
+}
+
+.imageCard:hover .galleryAdd {
+  opacity: 1;
+}
+
+.galleryAdd:hover {
+  background: var(--dsw-alias-bg-base);
+}
+
+.galleryAdd:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
 /* Hover hint for the click-to-zoom behavior. */
 .zoomHint {
   position: absolute;
@@ -1211,9 +1323,99 @@ html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ss
   to { transform: rotate(360deg); }
 }
 
+/* Transient "added to gallery" toast, centered above the canvas bottom. */
+.galleryToast {
+  position: absolute;
+  left: 50%;
+  bottom: 24px;
+  transform: translateX(-50%);
+  z-index: 30;
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 6px 16px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--dsw-alias-label-primary);
+  background: var(--dsw-alias-bg-mask-1);
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 999px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
+  backdrop-filter: blur(6px);
+  pointer-events: none;
+  animation: dshImageGenToastIn 160ms ease-out;
+}
+
+@keyframes dshImageGenToastIn {
+  from { opacity: 0; transform: translate(-50%, 6px); }
+  to { opacity: 1; transform: translate(-50%, 0); }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .download, .spinner, .bigSpinner {
     transition: none;
     animation-duration: 1.5s;
   }
 }
+
+/* --- gallery workspace -------------------------------------------------------- */
+.config[data-gallery='true'] .configScroll > *:not(:first-child),
+.config[data-gallery='true'] .footer,
+.canvas[data-gallery='true'] > .canvasState,
+.canvas[data-gallery='true'] > .canvasError,
+.canvas[data-gallery='true'] > .canvasBody,
+.studio:has(.config[data-gallery='true']) > .history { display: none; }
+.config[data-gallery='true'] .configScroll { display: flex; flex: none; overflow: visible; order: 1; }
+.config[data-gallery='true'] .galleryFilters { order: 2; flex: 1; min-height: 0; }
+.galleryFilters { padding: 18px 14px; overflow-y: auto; overflow-x: hidden; }
+.galleryFilterHeading { margin: 0 4px 10px; color: var(--dsw-alias-label-tertiary); font-size: 12px; font-weight: 600; }
+.galleryFilter { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 34px; padding: 0 10px; border: 0; border-radius: 9px; color: var(--dsw-alias-label-secondary); background: transparent; cursor: pointer; text-align: left; }
+.galleryFilter:hover, .galleryFilter[data-active] { color: var(--dsw-alias-brand-primary); background: color-mix(in srgb, var(--dsw-alias-brand-primary) 10%, transparent); }
+.galleryFilterCount { min-width: 20px; padding: 1px 6px; border-radius: 999px; color: var(--dsw-alias-label-tertiary); background: var(--dsw-alias-bg-layer-2); font-size: 11px; text-align: center; }
+.galleryFilterDivider { height: 1px; margin: 18px 4px; background: var(--dsw-alias-border-l1); }
+.galleryRatioList { display: flex; flex-wrap: wrap; gap: 6px; }
+.galleryRatio { padding: 6px 10px; border: 0; border-radius: 999px; color: var(--dsw-alias-label-secondary); background: var(--dsw-alias-bg-layer-2); cursor: pointer; font-size: 12px; }
+.galleryRatio[data-active] { color: var(--dsw-alias-brand-primary); background: color-mix(in srgb, var(--dsw-alias-brand-primary) 13%, transparent); }
+.galleryFilterNote { margin: 20px 4px 0; color: var(--dsw-alias-label-quaternary); font-size: 11px; line-height: 1.5; }
+.galleryWorkspace { position: absolute; inset: 0; display: flex; width: 100%; height: 100%; min-width: 0; min-height: 0; flex-direction: column; overflow: hidden; padding: 22px 24px 26px; box-sizing: border-box; }
+.galleryToolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex: none; min-width: 0; margin-bottom: 18px; }
+.galleryHeading { display: inline; margin: 0; color: var(--dsw-alias-label-primary); font-size: 20px; font-weight: 700; }
+.galleryCount { margin-left: 8px; color: var(--dsw-alias-label-tertiary); font-size: 13px; }
+.galleryToolbarActions { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
+.galleryViewToggle { display: flex; padding: 3px; border: 1px solid var(--dsw-alias-border-l1); border-radius: 9px; background: var(--dsw-alias-bg-layer-1); }
+.galleryViewToggle button, .gallerySort, .galleryClear { min-height: 30px; padding: 0 10px; border: 0; border-radius: 7px; color: var(--dsw-alias-label-secondary); background: transparent; cursor: pointer; font: inherit; font-size: 12px; }
+.galleryViewToggle button[data-active], .galleryViewToggle button:hover, .gallerySort:hover, .galleryClear:hover { color: var(--dsw-alias-brand-primary); background: color-mix(in srgb, var(--dsw-alias-brand-primary) 11%, transparent); }
+.gallerySort { border: 1px solid var(--dsw-alias-border-l1); background: var(--dsw-alias-bg-layer-1); }
+.galleryClear { border: 1px solid var(--dsw-alias-border-l1); }
+.galleryMasonry { display: grid; flex: 1 1 auto; width: 100%; height: 0; max-width: 100%; min-width: 0; min-height: 0; box-sizing: border-box; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: max-content; align-content: start; gap: 16px; overflow-y: scroll; overflow-x: hidden; overscroll-behavior: contain; padding: 2px 8px 16px 2px; scrollbar-width: thin; scrollbar-color: var(--dsw-alias-border-l2) transparent; }
+.galleryMasonry::-webkit-scrollbar { width: 8px; }
+.galleryMasonry::-webkit-scrollbar-thumb { background: var(--dsw-alias-border-l2); border-radius: 999px; }
+.galleryCard { display: block; width: 100%; margin: 0; overflow: hidden; border: 1px solid var(--dsw-alias-border-l1); border-radius: 14px; background: var(--dsw-alias-bg-layer-1); box-shadow: 0 5px 18px rgb(24 32 54 / 7%); }
+.galleryImageButton { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--dsw-alias-bg-base); cursor: zoom-in; }
+.galleryImage { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
+.galleryMasonry[data-view='masonry'] .galleryCard:nth-child(3n + 1) .galleryImage { aspect-ratio: 4 / 5; }
+.galleryMasonry[data-view='masonry'] .galleryCard:nth-child(3n + 2) .galleryImage { aspect-ratio: 4 / 3; }
+.galleryMasonry[data-view='masonry'] .galleryCard:nth-child(3n) .galleryImage { aspect-ratio: 3 / 4; }
+.galleryBadge { position: absolute; top: 10px; left: 10px; padding: 4px 9px; border-radius: 999px; color: #fff; background: rgb(18 23 36 / 76%); font-size: 11px; backdrop-filter: blur(4px); }
+.galleryCardFooter { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 10px 12px; }
+.galleryAvatar { display: grid; flex: none; width: 27px; height: 27px; place-items: center; border-radius: 50%; color: #fff; background: var(--dsw-alias-brand-primary); font-size: 12px; font-weight: 700; }
+.galleryCardInfo { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 2px; }
+.galleryCardInfo strong, .galleryCardInfo small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.galleryCardInfo strong { color: var(--dsw-alias-label-primary); font-size: 12px; }
+.galleryCardInfo small { color: var(--dsw-alias-label-tertiary); font-size: 10px; }
+.galleryRemove { flex: none; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; color: var(--dsw-alias-label-tertiary); background: transparent; cursor: pointer; font-size: 18px; }
+.galleryRemove:hover { color: var(--dsw-alias-state-error); background: var(--dsw-alias-bg-layer-2); }
+
+@media (max-width: 1100px) {
+  .galleryMasonry { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+
+@media (max-width: 760px) {
+  .studio { flex-direction: column; overflow: auto; }
+  .config { width: auto; max-width: none; height: auto; min-height: 0; }
+  .config[data-gallery='true'] { flex: none; }
+  .canvas { min-height: 560px; }
+  .galleryToolbar { align-items: flex-start; flex-direction: column; }
+  .galleryToolbarActions { width: 100%; flex-wrap: wrap; }
+  .galleryMasonry { grid-template-columns: 1fr; }
+}

package/src/engine.ts

@@ -42,6 +42,33 @@ const MAX_EDIT_IMAGE_BYTES = 10 * 1024 * 1024
 /** Sizes dall-e-3 accepts; anything else falls back to its square default. */
 const DALLE3_SIZES = new Set(['1024x1024', '1792x1024', '1024x1792'])
 
+/** Whether the model is an xAI Grok Imagine model (grok-imagine-image,
+ *  grok-imagine-image-2.0, …). Grok Imagine speaks JSON on both endpoints
+ *  and exposes its own aspect-ratio / response-format knobs instead of the
+ *  OpenAI size/quality/detail passthrough. */
+function isGrokImagine(model: string): boolean {
+  return /^grok-imagine(?:-|$)/.test(model)
+}
+
+/** The panel's aspect ratios mapped to the closest OpenAI pixel size
+ *  (gpt-image-2 / generic OpenAI-compatible endpoints). */
+const OPENAI_SIZE_BY_RATIO: Readonly<Record<string, string>> = {
+  '1:1': '1024x1024',
+  '3:4': '1024x1536',
+  '4:3': '1536x1024',
+  '9:16': '1024x1792',
+  '2:3': '1024x1536',
+  '3:2': '1536x1024',
+  '16:9': '1792x1024',
+  '21:9': '1792x1024',
+}
+
+/** Panel ratios that need renaming for a model's vocabulary. Grok documents
+ *  20:9 as its ultra-wide ratio, so the panel's 21:9 label is sent as 20:9. */
+const GROK_ASPECT_ALIASES: Readonly<Record<string, string>> = {
+  '21:9': '20:9',
+}
+
 /** Content-type extension hints for URL-fetched images. */
 function mimeOfExtension(path: string): string | undefined {
   const match = /\.([a-z0-9]+)$/i.exec(path)
@@ -87,17 +114,44 @@ function effectiveParams(request: GenerateRequest): {
   size?: string
   quality?: string
   detail?: string
+  aspect_ratio?: string
+  resolution?: string
+  response_format?: string
 } {
   const model = request.model.trim() === '' ? 'gpt-image-2' : request.model.trim()
   // dall-e-3 has no quality/detail knobs and only produces one image.
   if (model === 'dall-e-3') {
-    const size = DALLE3_SIZES.has(request.size) ? request.size : '1024x1024'
+    const pixel = OPENAI_SIZE_BY_RATIO[request.size]
+    const size = (pixel !== undefined && DALLE3_SIZES.has(pixel)) ? pixel : '1024x1024'
     return { model, size }
   }
+  // Grok Imagine: the panel's aspect ratios are sent as-is (21:9 aliased to
+  // the documented 20:9), the clarity tiers become the resolution parameter
+  // (the API documents 1k / 2k only, so 4k falls back to 2k), and base64
+  // output keeps the temporary signed result URLs from expiring before the
+  // host downloads them.
+  if (isGrokImagine(model)) {
+    return {
+      model,
+      ...request.size !== '' && request.size !== 'auto'
+        ? { aspect_ratio: GROK_ASPECT_ALIASES[request.size] ?? request.size }
+        : {},
+      ...request.quality !== '' && request.quality !== 'auto'
+        ? { resolution: request.quality === '4k' ? '2k' : request.quality }
+        : {},
+      response_format: 'b64_json',
+    }
+  }
+  // OpenAI-compatible endpoints: nearest pixel size, clarity tiers mapped to
+  // the quality levels (1k→low / 2k→medium / 4k→high), detail passthrough.
   return {
     model,
-    ...request.size !== '' && request.size !== 'auto' ? { size: request.size } : {},
-    ...request.quality !== '' && request.quality !== 'auto' ? { quality: request.quality } : {},
+    ...request.size !== '' && request.size !== 'auto' && OPENAI_SIZE_BY_RATIO[request.size] !== undefined
+      ? { size: OPENAI_SIZE_BY_RATIO[request.size] }
+      : {},
+    ...request.quality === '1k' ? { quality: 'low' } : {},
+    ...request.quality === '2k' ? { quality: 'medium' } : {},
+    ...request.quality === '4k' ? { quality: 'high' } : {},
     ...request.detail !== '' ? { detail: request.detail } : {},
   }
 }
@@ -178,14 +232,27 @@ async function requestOneImage(
     if (bytes.byteLength > MAX_EDIT_IMAGE_BYTES) {
       throw new ImageGenError('参考图片超过 10MB 上限', 'edit-image-too-large')
     }
-    const form = new FormData()
-    form.append('image', new Blob([bytes], { type: parsed.mime }), `reference.${extensionOf(parsed.mime)}`)
-    form.append('prompt', request.prompt)
-    form.append('model', params.model)
-    if (params.size !== undefined) form.append('size', params.size)
-    if (params.quality !== undefined) form.append('quality', params.quality)
-    if (params.detail !== undefined) form.append('detail', params.detail)
-    body = form
+    // Grok Imagine /images/edits takes a JSON image_url object (a base64 data
+    // URI is accepted) instead of OpenAI's multipart form-data upload.
+    if (isGrokImagine(params.model)) {
+      headers['content-type'] = 'application/json'
+      body = JSON.stringify({
+        model: params.model,
+        prompt: request.prompt,
+        image: { url: request.image, type: 'image_url' },
+        ...params.aspect_ratio !== undefined ? { aspect_ratio: params.aspect_ratio } : {},
+        response_format: 'b64_json',
+      })
+    } else {
+      const form = new FormData()
+      form.append('image', new Blob([bytes], { type: parsed.mime }), `reference.${extensionOf(parsed.mime)}`)
+      form.append('prompt', request.prompt)
+      form.append('model', params.model)
+      if (params.size !== undefined) form.append('size', params.size)
+      if (params.quality !== undefined) form.append('quality', params.quality)
+      if (params.detail !== undefined) form.append('detail', params.detail)
+      body = form
+    }
   } else {
     headers['content-type'] = 'application/json'
     body = JSON.stringify({ prompt: request.prompt, ...params } as Record<string, unknown>)