@things-factory/figure-ui 10.1.10 → 10.1.14

package/client/pages/figure-modeller-page.ts

@@ -4,6 +4,7 @@ import '../modeller/figure-ask.js'
 import '../modeller/figure-canvas.js'
 import { captureThumbnail } from '../modeller/figure-thumbnail.js'
 import '../modeller/figure-preview.js'
+import { shouldStartNewFigure } from '../modeller/new-figure-entry.js'
 import '../modeller/figure-parts.js'
 import '../modeller/figure-inspector.js'
 
@@ -12,6 +13,8 @@ import { customElement, state } from 'lit/decorators.js'
 
 import { i18next, localize } from '@operato/i18n'
 import { navigate, PageView } from '@operato/shell'
+import { openOverlay } from '@operato/layout'
+import { requestFigureAI } from '../modeller/figure-ai-target.js'
 import { validate } from '@hatiolab/figure-model'
 import type { DetailLevel, FigureSource, PrimitiveKind } from '@hatiolab/figure-model'
 
@@ -185,84 +188,9 @@ export class FigureModellerPage extends FigureModellerPageBase {
       display: none;
     }
 
-    /*
-      머리줄 — 이름 · 타입 · 미저장 표시 · 말로 시키는 줄 · 저장을 **한 줄에** 담는다.
-
-      이름은 페이지 제목에도 나온다(셸이 context.title 로 그린다). 그래도 여기 입력칸을 두는
-      이유는 **고치는 자리**가 필요해서다 — 제목은 읽는 것이고 이 칸은 바꾸는 것이다. 두 줄로
-      벌리는 대신 한 줄에 모아 캔버스에 높이를 넘긴다.
-    */
-    div[header] {
-      display: flex;
-      align-items: center;
-      gap: var(--spacing-medium, 8px);
-      padding: var(--spacing-medium, 8px) var(--spacing-large, 12px);
-      border-bottom: 1px solid var(--md-sys-color-outline-variant);
-    }
-    div[header] figure-ask {
-      flex: 1;
-      min-width: 0;
-    }
-    input[name] {
-      flex: none;
-      width: 180px;
-      padding: 5px 9px;
-      font: var(--input-field-font, inherit);
-      font-size: 0.82rem;
-      color: var(--md-sys-color-on-surface);
-      background-color: var(--md-sys-color-surface-container-lowest);
-      border: 1px solid var(--md-sys-color-outline-variant);
-      border-radius: 6px;
-    }
-    /* 타입 이름은 만든 뒤 고칠 수 없다 — 그 사실이 화면에서 보여야 한다 */
-    code[type] {
-      padding: 4px 8px;
-      font-family: var(--mono-font, monospace);
-      font-size: 0.76rem;
-      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
-      background-color: var(--md-sys-color-surface-container);
-      border-radius: 6px;
-    }
-    span[dirty] {
-      font: var(--label-font, inherit);
-      font-size: 0.74rem;
-      color: var(--md-sys-color-tertiary);
-    }
     div[spacer] {
       flex: 1;
     }
-    button[save] {
-      padding: 6px 16px;
-      font: var(--label-font, inherit);
-      font-size: 0.76rem;
-      font-weight: 600;
-      color: var(--md-sys-color-on-primary, #fff);
-      background-color: var(--md-sys-color-primary);
-      border: none;
-      border-radius: 6px;
-      cursor: pointer;
-    }
-    button[save][disabled] {
-      opacity: 0.4;
-      cursor: default;
-    }
-
-    /*
-      저장이 거절된 사유. 단추 **바로 왼쪽**에 둔다 — 누른 자리에서 답을 봐야 한다. 길면 줄이지만
-      전문은 title 로 남긴다(서버 문장이 길 수 있다).
-    */
-    span[save-failed] {
-      max-width: 280px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      padding: 4px 8px;
-      font: var(--label-font, inherit);
-      font-size: 0.72rem;
-      color: var(--md-sys-color-on-error-container, var(--md-sys-color-on-surface));
-      background-color: var(--md-sys-color-error-container);
-      border-radius: 6px;
-    }
 
     /*
       칸을 벡터 저작도구의 관례대로 놓는다 — 왼쪽에 무엇이 있나(레이어), 오른쪽에
@@ -285,16 +213,17 @@ export class FigureModellerPage extends FigureModellerPageBase {
     }
 
     /*
-      편집 · 미리보기 전환.
+      편집 · 미리보기 전환 및 조작 띠.
 
       가운데 칸 위에 얇게 둔다. 무엇을 보고 있는지가 늘 보여야 하고, 두 화면이 같은
       자리를 쓰므로 어느 쪽인지 모르면 편집이 안 먹는 것처럼 읽힌다.
     */
     div[modes] {
       display: flex;
+      align-items: center;
       flex: none;
       gap: 2px;
-      padding: 5px var(--spacing-medium, 8px);
+      padding: 4px var(--spacing-medium, 8px);
       border-bottom: 1px solid var(--md-sys-color-outline-variant);
     }
     div[modes] button[mode] {
@@ -315,13 +244,36 @@ export class FigureModellerPage extends FigureModellerPageBase {
       color: var(--md-sys-color-on-primary-container);
       background-color: var(--md-sys-color-primary-container);
     }
-
-    /*
-      양쪽 칸을 접는 손잡이. 띠의 양 끝, 접히는 칸 바로 옆이다.
-
-      접었을 때 남는 것이 이것 하나뿐이므로 **접는 자리와 펴는 자리가 같아야 한다.**
-      다른 데 두면 접고 나서 되돌릴 곳을 찾아야 한다.
-    */
+    div[modes] div[separator] {
+      width: 1px;
+      height: 16px;
+      margin: 0 4px;
+      background-color: var(--md-sys-color-outline-variant);
+    }
+    div[modes] button[history] {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 26px;
+      height: 26px;
+      padding: 0;
+      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+      background: none;
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+    }
+    div[modes] button[history]:hover:not([disabled]) {
+      background-color: var(--md-sys-color-surface-container);
+      color: var(--md-sys-color-on-surface);
+    }
+    div[modes] button[history][disabled] {
+      opacity: 0.3;
+      cursor: default;
+    }
+    div[modes] button[history] md-icon {
+      --md-icon-size: 18px;
+    }
     div[modes] button[collapse] {
       display: flex;
       align-items: center;
@@ -339,6 +291,46 @@ export class FigureModellerPage extends FigureModellerPageBase {
     div[modes] button[collapse] md-icon {
       --md-icon-size: 18px;
     }
+    div[modes] span[dirty] {
+      align-self: center;
+      margin-right: 6px;
+      font: var(--label-font, inherit);
+      font-size: 0.72rem;
+      color: var(--md-sys-color-tertiary);
+    }
+    div[modes] span[save-failed] {
+      align-self: center;
+      max-width: 240px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      margin-right: 6px;
+      padding: 3px 7px;
+      font: var(--label-font, inherit);
+      font-size: 0.7rem;
+      color: var(--md-sys-color-on-error-container, var(--md-sys-color-on-surface));
+      background-color: var(--md-sys-color-error-container);
+      border-radius: 4px;
+    }
+    div[modes] button[save] {
+      padding: 4px 14px;
+      margin-right: 4px;
+      font: var(--label-font, inherit);
+      font-size: 0.74rem;
+      font-weight: 600;
+      color: var(--md-sys-color-on-primary, #fff);
+      background-color: var(--md-sys-color-primary);
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+    }
+    div[modes] button[save]:hover:not([disabled]) {
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+    }
+    div[modes] button[save][disabled] {
+      opacity: 0.35;
+      cursor: default;
+    }
 
     /*
       후보가 오면 가운데를 둘로 나눈다.
@@ -571,6 +563,11 @@ export class FigureModellerPage extends FigureModellerPageBase {
   /** 인라인 요청창과 AI 도크가 함께 쓰는 현재 Figure의 제한된 세션 피드백. */
   @state() private proposalFeedback: ProposalFeedback[] = []
 
+  @state() private undoStack: { board?: BoardModel; parts: PartModel[]; selected: number }[] = []
+  @state() private redoStack: { board?: BoardModel; parts: PartModel[]; selected: number }[] = []
+  private lastCoalesceKey?: string
+  private lastHistoryTime = 0
+
   /**
    * 저장 형식으로 변환한 것. 씬 모델이 바뀔 때만 다시 만든다.
    *
@@ -609,11 +606,56 @@ export class FigureModellerPage extends FigureModellerPageBase {
     }
   }
 
+  private announceAiContext = () => {
+    if (!this.active) return
+    window.dispatchEvent(new CustomEvent('figure-ai-context', {
+      detail: { figureId: this.figure?.id, source: this.folded }
+    }))
+  }
+
+  private acceptDockProposal = (event: Event) => {
+    const detail = (event as CustomEvent).detail
+    if (!this.active || (detail?.figureId ?? '') !== (this.figure?.id ?? '')) return
+    if (detail?.draftType && detail.draftType !== this.folded?.type) return
+    if (detail?.baseSource && detail.baseSource !== JSON.stringify(this.folded)) return
+    this.receive(detail.proposal)
+    detail.accepted = true
+  }
+
+  private proposalBaseSource?: string
+
+  connectedCallback() {
+    super.connectedCallback()
+    window.addEventListener('figure-ai-context-request', this.announceAiContext)
+    window.addEventListener('figure-ai-review', this.acceptDockProposal)
+    window.addEventListener('keydown', this.handleKeyDown)
+  }
+
   disconnectedCallback() {
+    window.removeEventListener('keydown', this.handleKeyDown)
+    window.removeEventListener('figure-ai-context-request', this.announceAiContext)
+    window.removeEventListener('figure-ai-review', this.acceptDockProposal)
     window.dispatchEvent(new CustomEvent('figure-ai-context', { detail: undefined }))
     super.disconnectedCallback()
   }
 
+  private handleKeyDown = (e: KeyboardEvent) => {
+    if (!this.active || this.mode !== 'edit' || this.proposalSession) return
+    const target = e.composedPath()[0] as HTMLElement | undefined
+    const tag = target?.tagName?.toLowerCase()
+    if (tag === 'input' || tag === 'textarea' || target?.isContentEditable) return
+
+    if ((e.metaKey || e.ctrlKey) && !e.altKey) {
+      if (e.key === 'z' && !e.shiftKey) {
+        e.preventDefault()
+        this.undo()
+      } else if ((e.key === 'z' && e.shiftKey) || e.key === 'y') {
+        e.preventDefault()
+        this.redo()
+      }
+    }
+  }
+
   get context() {
     return {
       title: this.figure?.name ?? i18next.t('figure.title.new-figure'),
@@ -635,29 +677,6 @@ export class FigureModellerPage extends FigureModellerPageBase {
     const source = this.folded
 
     return html`
-      <div header>
-        <!--
-          이름과 타입은 **속성 패널**에 있다(figure-inspector 의 도형 절). 여기 있던 이름 칸은
-          하네스 시절의 자리였다 — 앱에서는 셸이 페이지 제목으로 같은 이름을 그리므로 글자가 두 번
-          나오고, 캔버스가 주인공인 화면에서 그만큼 높이를 잃었다.
-        -->
-        ${this.dirty ? html`<span dirty>${i18next.t('figure.text.unsaved-changes')}</span>` : ''}
-        <!--
-          말로 시키는 줄이 머리줄의 남는 폭을 쓴다. 따로 두면 화면 위가 두 줄이 되고, 그 위 줄은
-          이름을 페이지 제목과 겹쳐 적는다.
-        -->
-        <figure-ask
-          .source=${source}
-          .type=${source?.type ?? ''}
-          .feedback=${this.proposalFeedback}
-          @proposed=${(e: CustomEvent) => this.receive(e.detail.proposal)}
-        ></figure-ask>
-        ${this.saveFailure ? html`<span save-failed title=${this.saveFailure}>${this.saveFailure}</span>` : ''}
-        <button save ?disabled=${!this.canSave} @click=${() => this.save()}>
-          ${this.saving ? i18next.t('figure.text.saving-figure') : i18next.t('figure.button.save')}
-        </button>
-      </div>
-
       <div
         edits
         ?collapse-left=${this.collapsed.left}
@@ -698,6 +717,7 @@ export class FigureModellerPage extends FigureModellerPageBase {
                   <div lane>
                     <h4>${i18next.t('figure.label.now')}</h4>
                     <figure-canvas
+                      .figureId=${this.figure?.id || this.figure?.type}
                       .board=${this.board}
                       .parts=${this.parts}
                       .picked=${this.pickedName}
@@ -722,9 +742,11 @@ export class FigureModellerPage extends FigureModellerPageBase {
             : this.mode === 'preview'
               ? html`<figure-preview .source=${source}></figure-preview>`
               : html`<figure-canvas
+                  .figureId=${this.figure?.id || this.figure?.type}
                   .board=${this.board}
                   .parts=${this.parts}
                   .picked=${this.pickedName}
+                  .view=${this.view}
                 ></figure-canvas>`}
         </div>
 
@@ -778,7 +800,33 @@ export class FigureModellerPage extends FigureModellerPageBase {
 
     return html`<div modes>
       ${this.renderCollapse('left')}${this.proposalSession ? '' : html`${one('edit')}${one('preview')}`}
+      ${this.mode === 'edit' && !this.proposalSession
+        ? html`
+            <div separator></div>
+            <button
+              history
+              ?disabled=${this.undoStack.length === 0}
+              title="${i18next.t('figure.button.undo')} (Ctrl+Z)"
+              @click=${() => this.undo()}
+            >
+              <md-icon>undo</md-icon>
+            </button>
+            <button
+              history
+              ?disabled=${this.redoStack.length === 0}
+              title="${i18next.t('figure.button.redo')} (Ctrl+Y)"
+              @click=${() => this.redo()}
+            >
+              <md-icon>redo</md-icon>
+            </button>
+          `
+        : ''}
       <div spacer></div>
+      ${this.saveFailure ? html`<span save-failed title=${this.saveFailure}>${this.saveFailure}</span>` : ''}
+      ${this.dirty ? html`<span dirty>${i18next.t('figure.text.unsaved-changes')}</span>` : ''}
+      <button save ?disabled=${!this.canSave} @click=${() => this.save()}>
+        ${this.saving ? i18next.t('figure.text.saving-figure') : i18next.t('figure.button.save')}
+      </button>
       ${this.renderCollapse('right')}
     </div>`
   }
@@ -842,6 +890,8 @@ export class FigureModellerPage extends FigureModellerPageBase {
   private renderDecision() {
     if (!this.proposalSession) return ''
 
+    const stale = this.proposalBaseSource !== undefined && this.proposalBaseSource !== JSON.stringify(this.folded)
+
     const changes = proposals.diffProposal(this.folded, this.proposalSession.source)
     const picked = proposals.applyProposal(this.folded, this.proposalSession.source, this.proposalSession.picked)
     const { errors, violations } = validate(picked)
@@ -851,7 +901,8 @@ export class FigureModellerPage extends FigureModellerPageBase {
         <span>${this.proposalSession.title || i18next.t('figure.text.assistant-proposed-a-figure')}</span>
         <div spacer></div>
         <button drop @click=${() => this.discard()}>${i18next.t('figure.button.discard')}</button>
-        <button take ?disabled=${errors.length > 0 || this.proposalSession.picked.size === 0} @click=${() => this.take()}>
+        ${stale ? html`<span role="alert">원본이 변경되었습니다. 후보를 취소하고 AI 지원에서 다시 요청하세요.</span>` : ''}
+        <button take ?disabled=${stale || errors.length > 0 || this.proposalSession.picked.size === 0} @click=${() => this.take()}>
           ${i18next.t('figure.button.take-n-changes', { n: this.proposalSession.picked.size })}
         </button>
       </div>
@@ -941,6 +992,7 @@ export class FigureModellerPage extends FigureModellerPageBase {
    * 무엇이 자기 것이고 무엇이 기계 것인지 모르게 된다.
    */
   private receive(proposal: FigureProposal) {
+    this.proposalBaseSource = JSON.stringify(this.folded)
     this.proposalSession = proposalSessions.openAiProposal(this.folded, proposal)
   }
 
@@ -951,6 +1003,7 @@ export class FigureModellerPage extends FigureModellerPageBase {
    */
   private previewSizingFix(fix: FigureGateFix) {
     if (!this.folded) return
+    this.proposalBaseSource = JSON.stringify(this.folded)
     this.proposalSession = proposalSessions.openSizingFix(this.folded, fix)
   }
 
@@ -973,7 +1026,9 @@ export class FigureModellerPage extends FigureModellerPageBase {
    */
   private take() {
     if (!this.proposalSession) return
+    if (this.proposalBaseSource !== undefined && this.proposalBaseSource !== JSON.stringify(this.folded)) return
 
+    this.recordHistory()
     const taken = proposals.applyProposal(this.folded, this.proposalSession.source, this.proposalSession.picked)
     const { board, parts } = fromFigureSource(taken)
 
@@ -1011,6 +1066,7 @@ export class FigureModellerPage extends FigureModellerPageBase {
   private discard(reportFeedback = true) {
     if (reportFeedback) this.reportProposalFeedback('discarded')
     this.proposalSession = undefined
+    this.proposalBaseSource = undefined
   }
 
   /**
@@ -1037,13 +1093,14 @@ export class FigureModellerPage extends FigureModellerPageBase {
 
   async pageUpdated(changes: Record<string, unknown>, lifecycle: { resourceId?: string }) {
     if (!this.active) {
+      ++this.loadGeneration
       return
     }
 
     const id = lifecycle?.resourceId
 
     if (id) {
-      if (id !== this.figure?.id) {
+      if (changes.active || id !== this.figure?.id) {
         await this.load(id)
       }
       return
@@ -1067,22 +1124,24 @@ export class FigureModellerPage extends FigureModellerPageBase {
     }
 
     if (this.figure.id) {
-      /*
-        고치던 것이 있으면 묻는다. 저작한 것을 말없이 버리지 않는다 — 되돌릴 수 없다.
-        그만두면 보고 있던 도형의 주소로 되돌려 화면과 주소가 어긋나지 않게 한다.
-      */
-      if (this.dirty && !confirm(i18next.t('figure.text.discard-changes-and-start-new'))) {
-        navigate(`figure-modeller/${this.figure.id}`, true)
-        return
-      }
+      this.startNew()
+      return
+    }
 
+    if (shouldStartNewFigure(changes, !!this.figure, this.figure?.id)) {
       this.startNew()
+      return
     }
   }
 
+  private loadGeneration = 0
   private async load(id: string) {
+    const generation = ++this.loadGeneration
     const figure = await fetchFigure(id)
+    if (generation !== this.loadGeneration || !this.active) return
 
+    this.proposalSession = undefined
+    this.proposalBaseSource = undefined
     this.figure = figure
 
     /*
@@ -1116,9 +1175,17 @@ export class FigureModellerPage extends FigureModellerPageBase {
     this.selected = -1
     this.dirty = false
     this.violations = []
+    this.undoStack = []
+    this.redoStack = []
+    this.lastCoalesceKey = undefined
   }
 
   private startNew() {
+    ++this.loadGeneration
+    this.proposalSession = undefined
+    this.proposalBaseSource = undefined
+    this.proposalFeedback = []
+    this.mode = 'edit'
     // 타입 이름을 사람이 정하기 전까지는 임시 이름을 쓴다. 저장할 때 확정한다.
     const draftType = `FIGURE_${Date.now().toString(36).toUpperCase()}`
     const { board, parts } = startingModel(draftType)
@@ -1130,6 +1197,9 @@ export class FigureModellerPage extends FigureModellerPageBase {
     this.selected = -1
     this.dirty = true
     this.violations = []
+    this.undoStack = []
+    this.redoStack = []
+    this.lastCoalesceKey = undefined
   }
 
   private rename(name: string) {
@@ -1152,13 +1222,62 @@ export class FigureModellerPage extends FigureModellerPageBase {
     this.dirty = true
   }
 
+  private snapshotState(): { board?: BoardModel; parts: PartModel[]; selected: number } {
+    return {
+      board: this.board ? structuredClone(this.board) : undefined,
+      parts: structuredClone(this.parts),
+      selected: this.selected
+    }
+  }
+
+  private recordHistory(coalesceKey?: string) {
+    const now = Date.now()
+    if (coalesceKey && this.lastCoalesceKey === coalesceKey && now - this.lastHistoryTime < 600) {
+      this.lastHistoryTime = now
+      return
+    }
+
+    this.lastCoalesceKey = coalesceKey
+    this.lastHistoryTime = now
+
+    this.undoStack = [...this.undoStack.slice(-49), this.snapshotState()]
+    this.redoStack = []
+  }
+
+  private undo() {
+    if (this.undoStack.length === 0) return
+    const prev = this.undoStack[this.undoStack.length - 1]
+    this.undoStack = this.undoStack.slice(0, -1)
+    this.redoStack = [this.snapshotState(), ...this.redoStack.slice(0, 49)]
+
+    this.board = prev.board ? structuredClone(prev.board) : undefined
+    this.parts = structuredClone(prev.parts)
+    this.selected = this.parts.length ? Math.max(-1, Math.min(prev.selected, this.parts.length - 1)) : -1
+    this.dirty = true
+    this.lastCoalesceKey = undefined
+  }
+
+  private redo() {
+    if (this.redoStack.length === 0) return
+    const next = this.redoStack[0]
+    this.redoStack = this.redoStack.slice(1)
+    this.undoStack = [...this.undoStack.slice(-49), this.snapshotState()]
+
+    this.board = next.board ? structuredClone(next.board) : undefined
+    this.parts = structuredClone(next.parts)
+    this.selected = this.parts.length ? Math.max(-1, Math.min(next.selected, this.parts.length - 1)) : -1
+    this.dirty = true
+    this.lastCoalesceKey = undefined
+  }
+
   /**
    * 부품 목록을 갈아 끼운다.
    *
    * 편집 규칙은 `part-edits` 가 갖는다 — 화면과 테스트가 같은 것을 쓰게 하려고 떼어
    * 놓았다. 여기서는 결과를 담고 선택 인덱스를 정리한다.
    */
-  private put(parts: PartModel[], selected = this.selected) {
+  private put(parts: PartModel[], selected = this.selected, coalesceKey?: string) {
+    this.recordHistory(coalesceKey)
     this.parts = parts
     this.selected = Math.min(selected, parts.length - 1)
     this.dirty = true
@@ -1183,7 +1302,7 @@ export class FigureModellerPage extends FigureModellerPageBase {
   }
 
   private updatePart(index: number, part: PartModel) {
-    this.put(edits.updatePart(this.parts, index, part))
+    this.put(edits.updatePart(this.parts, index, part), this.selected, `part:${part.name || index}`)
   }
 
   /**
@@ -1193,6 +1312,7 @@ export class FigureModellerPage extends FigureModellerPageBase {
    * 고칠 때마다 부품 목록이 새 배열이 되고, 그리는 쪽이 전부 다시 그린다.
    */
   private updateBoard(board: BoardModel) {
+    this.recordHistory('board')
     this.board = board
     this.dirty = true
   }
@@ -1210,6 +1330,7 @@ export class FigureModellerPage extends FigureModellerPageBase {
   private changeDetailLevel(level: DetailLevel) {
     if (!this.board) return
 
+    this.recordHistory('detailLevel')
     this.board = { ...this.board, detailLevel: level }
     this.dirty = true
   }
@@ -1248,7 +1369,7 @@ export class FigureModellerPage extends FigureModellerPageBase {
    */
   private partChanged(name: string, part: PartModel) {
     const at = this.parts.findIndex(item => item.name === name)
-    if (at >= 0) this.put(edits.updatePart(this.parts, at, part))
+    if (at >= 0) this.put(edits.updatePart(this.parts, at, part), this.selected, `drag:${name}`)
   }
 
   /**

package/dist-client/modeller/figure-ai-target.d.ts

@@ -0,0 +1,8 @@
+export declare function requestFigureAI(target: {
+    figureId?: string;
+    source?: unknown;
+}): void;
+export declare function takeFigureAITarget(): {
+    figureId?: string;
+    source?: unknown;
+} | undefined;

package/dist-client/modeller/figure-ai-target.js

@@ -0,0 +1,12 @@
+/** Explicit AI entry survives lazy creation of the app-level dock. */
+let pending;
+export function requestFigureAI(target) {
+    pending = structuredClone(target);
+    window.dispatchEvent(new CustomEvent('figure-ai-target'));
+}
+export function takeFigureAITarget() {
+    const target = pending;
+    pending = undefined;
+    return target;
+}
+//# sourceMappingURL=figure-ai-target.js.map

package/dist-client/modeller/figure-ai-target.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"figure-ai-target.js","sourceRoot":"","sources":["../../client/modeller/figure-ai-target.ts"],"names":[],"mappings":"AAAA,sEAAsE;AACtE,IAAI,OAA4D,CAAA;AAChE,MAAM,UAAU,eAAe,CAAC,MAA+C;IAC7E,OAAO,GAAG,eAAe,CAAC,MAAM,CAAC,CAAA;IACjC,MAAM,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,kBAAkB,CAAC,CAAC,CAAA;AAC3D,CAAC;AACD,MAAM,UAAU,kBAAkB;IAChC,MAAM,MAAM,GAAG,OAAO,CAAA;IACtB,OAAO,GAAG,SAAS,CAAA;IACnB,OAAO,MAAM,CAAA;AACf,CAAC","sourcesContent":["/** Explicit AI entry survives lazy creation of the app-level dock. */\nlet pending: { figureId?: string; source?: unknown } | undefined\nexport function requestFigureAI(target: { figureId?: string; source?: unknown }) {\n  pending = structuredClone(target)\n  window.dispatchEvent(new CustomEvent('figure-ai-target'))\n}\nexport function takeFigureAITarget() {\n  const target = pending\n  pending = undefined\n  return target\n}\n"]}

package/dist-client/modeller/figure-ask.d.ts

@@ -29,6 +29,7 @@ export declare class FigureAsk extends FigureAsk_base {
     type: string;
     /** 이 모델러 세션에서 사람이 명시적으로 남긴 이전 후보 반응. */
     feedback: ProposalFeedback[];
+    imageOnly: boolean;
     private asking;
     private failure;
     private picture?;

package/dist-client/modeller/figure-ask.js

@@ -30,6 +30,7 @@ let FigureAsk = class FigureAsk extends localize(i18next)(LitElement) {
         this.type = '';
         /** 이 모델러 세션에서 사람이 명시적으로 남긴 이전 후보 반응. */
         this.feedback = [];
+        this.imageOnly = false;
         this.asking = false;
         this.failure = '';
     }
@@ -61,6 +62,7 @@ let FigureAsk = class FigureAsk extends localize(i18next)(LitElement) {
 
     form {
       display: flex;
+      flex-wrap: wrap;
       flex: 1;
       min-width: 0;
       align-items: center;
@@ -176,7 +178,7 @@ let FigureAsk = class FigureAsk extends localize(i18next)(LitElement) {
     render() {
         const revising = !!this.source;
         return html `
-      <form @submit=${(e) => this.submit(e)}>
+      <form title="이미지의 형태와 비율을 참고한 후보를 만듭니다. 저장은 하지 않습니다." @submit=${(e) => this.submit(e)}>
         <md-icon lead>auto_awesome</md-icon>
         <span mode>${i18next.t(revising ? 'figure.text.ask-to-revise' : 'figure.text.ask-to-create')}</span>
         <input
@@ -191,7 +193,7 @@ let FigureAsk = class FigureAsk extends localize(i18next)(LitElement) {
             : i18next.t('figure.button.attach-a-picture')}
           <input type="file" accept="image/*" @change=${(e) => this.pick(e)} />
         </label>
-        <button go ?disabled=${this.asking}>
+        <button go ?disabled=${this.asking || (this.imageOnly && !this.picture)}>
           ${this.asking ? i18next.t('figure.text.asking') : i18next.t('figure.button.ask')}
         </button>
       </form>
@@ -214,15 +216,16 @@ let FigureAsk = class FigureAsk extends localize(i18next)(LitElement) {
         e.preventDefault();
         const input = this.renderRoot.querySelector('input[ask]');
         const prompt = input?.value?.trim();
-        if (!prompt || this.asking) {
+        if (!prompt || this.asking || (this.imageOnly && !this.picture)) {
             return;
         }
         this.asking = true;
         this.failure = '';
+        const baseSource = this.source ? JSON.stringify(this.source) : undefined;
         try {
             const proposal = await proposeFigure({
                 prompt,
-                base: this.source ? JSON.stringify(this.source) : undefined,
+                base: baseSource,
                 type: this.source ? undefined : this.type,
                 // 그리는 쪽이 풀 수 있는 토큰만 보낸다. 서버는 이 목록 밖의 색을 거절한다.
                 palette: Object.keys(activePalette()),
@@ -231,7 +234,7 @@ let FigureAsk = class FigureAsk extends localize(i18next)(LitElement) {
                 feedback: this.feedback,
                 image: this.picture
             });
-            this.dispatchEvent(new CustomEvent('proposed', { detail: { proposal }, bubbles: true, composed: true }));
+            this.dispatchEvent(new CustomEvent('proposed', { detail: { proposal, baseSource }, bubbles: true, composed: true }));
             input.value = '';
             this.picture = undefined;
         }
@@ -256,6 +259,10 @@ __decorate([
     property({ type: Array }),
     __metadata("design:type", Array)
 ], FigureAsk.prototype, "feedback", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], FigureAsk.prototype, "imageOnly", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)