evomeme 0.1.9 → 0.1.10-beta.13

package/dist/canvas-public/features/editing/interactive-image-editing.js

@@ -0,0 +1,982 @@
+import { errorT, errorText } from '../../language/index.js'
+import { t } from '../../language/index.js'
+import { api } from '../../core/api.js'
+import { state } from '../../core/state.js'
+import {
+  ensureFeatureState,
+  notifyFeatureState,
+  subscribeFeatureState,
+} from '../../core/feature-state.js'
+import { el } from '../../ui/controls.js'
+
+// Painterro owns only drawing interactions. Parameters and remote submission use the feature controller.
+export default {
+  styles: `
+.interactive-editor-stage {
+  position: relative;
+  flex: 1 1 auto;
+  min-height: 440px;
+  min-width: 0;
+}
+
+.interactive-editor-host {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  background:
+    radial-gradient(circle at 50% 15%, rgba(61, 214, 198, 0.06), transparent 38%),
+    var(--bg-0);
+}
+
+.interactive-editor-host .ptro-wrapper {
+  bottom: 0 !important;
+  color: var(--text);
+  background:
+    radial-gradient(circle at 50% 12%, rgba(61, 214, 198, 0.06), transparent 40%),
+    var(--bg-0) !important;
+  font-family: 'DM Sans', sans-serif !important;
+}
+
+.interactive-editor-host .ptro-wrapper .ptro-substrate {
+  opacity: 1 !important;
+  background: var(--bg-1) !important;
+}
+
+.interactive-editor-host .ptro-scroller {
+  padding: 20px 20px 20px 72px;
+}
+
+.interactive-editor-host.is-panning .ptro-scroller,
+.interactive-editor-host.is-panning .ptro-crp-el {
+  cursor: grabbing !important;
+}
+
+.interactive-editor-host .ptro-bar {
+  top: 50% !important;
+  right: auto !important;
+  bottom: auto !important;
+  left: 14px !important;
+  width: auto !important;
+  height: auto !important;
+  display: flex;
+  justify-content: flex-start;
+  transform: translateY(-50%);
+  pointer-events: none;
+  background: transparent !important;
+  color: var(--text) !important;
+  font-family: 'DM Sans', sans-serif !important;
+  z-index: 30;
+}
+
+.interactive-editor-host .ptro-bar > div {
+  position: relative;
+  width: max-content;
+  max-width: none;
+  height: auto !important;
+  min-width: 46px;
+  min-height: 0;
+  margin: 0 auto;
+  padding: 6px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  overflow: visible !important;
+  pointer-events: auto;
+  border: 1px solid var(--line);
+  border-radius: 15px;
+  background: rgba(26, 31, 39, 0.92);
+  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42);
+  backdrop-filter: blur(18px);
+}
+
+.interactive-editor-host .ptro-bar .ptro-icon-btn {
+  width: 34px !important;
+  height: 34px !important;
+  margin: 0 !important;
+  padding: 0;
+  flex: 0 0 34px;
+  border: 1px solid transparent !important;
+  border-radius: 50%;
+  color: var(--muted) !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  transition:
+    color 120ms ease,
+    border-color 120ms ease,
+    background 120ms ease,
+    transform 120ms ease;
+}
+
+.interactive-editor-host .ptro-bar .ptro-icon-btn:hover:not(:disabled) {
+  color: var(--text) !important;
+  border-color: var(--line) !important;
+  background: var(--bg-2) !important;
+  transform: translateY(-1px);
+}
+
+.interactive-editor-host .ptro-bar .ptro-icon-btn.ptro-color-active-control {
+  color: #071311 !important;
+  border-color: rgba(61, 214, 198, 0.72) !important;
+  background: var(--accent) !important;
+  box-shadow: 0 6px 18px rgba(61, 214, 198, 0.2) !important;
+}
+
+.interactive-editor-host .ptro-bar .ptro-icon-btn:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.interactive-editor-host .ptro-bar .ptro-icon-btn svg {
+  width: 18px;
+  height: 18px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.8;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  pointer-events: none;
+}
+
+.interactive-editor-host .ptro-tool-controls {
+  position: absolute;
+  top: 0;
+  bottom: auto;
+  left: calc(100% + 10px);
+  width: max-content;
+  min-height: 42px;
+  max-width: none;
+  padding: 5px 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  flex-wrap: nowrap;
+  overflow: visible;
+  transform: translateY(-50%);
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  background: rgba(26, 31, 39, 0.94);
+  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.36);
+  backdrop-filter: blur(16px);
+}
+
+.interactive-editor-host .ptro-bar:not(.has-tool-options) .ptro-tool-controls,
+.interactive-editor-host .ptro-tool-controls:empty {
+  display: none;
+}
+
+.interactive-editor-host .ptro-tool-controls .ptro-tool-ctl-name {
+  margin: 0 0 0 4px !important;
+  padding: 0 !important;
+  flex: 0 0 auto;
+  border-radius: 0 !important;
+  color: var(--muted);
+  background: transparent !important;
+  font-family: 'DM Sans', sans-serif !important;
+  font-size: 12px;
+  line-height: 32px;
+}
+
+.interactive-editor-host .ptro-tool-controls .ptro-input,
+.interactive-editor-host .ptro-tool-controls select.ptro-input {
+  width: 64px !important;
+  height: 32px !important;
+  padding: 0 8px !important;
+  border: 1px solid var(--line) !important;
+  border-radius: 9px;
+  color: var(--text) !important;
+  background: var(--bg-0) !important;
+  box-shadow: none !important;
+  font-family: 'DM Sans', sans-serif !important;
+  font-size: 13px !important;
+}
+
+.interactive-editor-host .ptro-tool-controls .ptro-color-btn {
+  position: relative;
+  z-index: 2;
+  width: 28px !important;
+  height: 28px !important;
+  flex: 0 0 28px;
+  border: 2px solid rgba(255, 255, 255, 0.82) !important;
+  border-radius: 50%;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45) !important;
+}
+
+.interactive-editor-host .ptro-tool-controls .ptro-btn-color-checkers-bar {
+  display: none;
+}
+
+.interactive-editor-host .interactive-crop-hint {
+  color: var(--muted);
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.interactive-editor-host .interactive-crop-apply {
+  height: 30px;
+  padding: 0 11px;
+  border: 1px solid rgba(61, 214, 198, 0.42);
+  border-radius: 8px;
+  color: #071311;
+  background: var(--accent);
+  font-size: 12px;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.interactive-editor-host .interactive-crop-apply:hover {
+  filter: brightness(1.06);
+}
+
+.interactive-editor-host .ptro-tool-controls [data-id='shadowOn'],
+.interactive-editor-host .ptro-tool-controls [data-id='fontName'],
+.interactive-editor-host .ptro-tool-controls [data-id='fontIsBold'],
+.interactive-editor-host .ptro-tool-controls [data-id='fontIsItalic'],
+.interactive-editor-host .ptro-tool-controls [data-id='fontStrokeAndShadow'],
+.interactive-editor-host .ptro-tool-controls .ptro-tool-ctl-name:has(+ [data-id='shadowOn']),
+.interactive-editor-host .ptro-tool-controls .ptro-tool-ctl-name:has(+ [data-id='fontName']),
+.interactive-editor-host .ptro-tool-controls .ptro-tool-ctl-name:has(+ [data-id='fontIsBold']),
+.interactive-editor-host .ptro-tool-controls .ptro-tool-ctl-name:has(+ [data-id='fontIsItalic']),
+.interactive-editor-host .ptro-tool-controls .ptro-tool-ctl-name:has(+ [data-id='fontStrokeAndShadow']) {
+  display: none !important;
+}
+
+.interactive-editor-host .ptro-info,
+.interactive-editor-host .ptro-bar-right {
+  display: none !important;
+}
+
+.interactive-editor-host .ptro-common-widget-wrapper {
+  color: var(--text);
+  background: rgba(7, 10, 14, 0.62) !important;
+  backdrop-filter: blur(4px);
+}
+
+.interactive-editor-host .ptro-pallet,
+.interactive-editor-host .ptro-color-widget-wrapper .ptro-v-middle-in {
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  background: var(--bg-1);
+  box-shadow: var(--shadow);
+}
+
+.interactive-edit-compose {
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.interactive-edit-compose .layer-decomposition-prompt {
+  width: 100%;
+}
+
+.interactive-edit-model {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.interactive-edit-model select {
+  min-width: 112px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 6px 9px;
+  background: var(--bg-1);
+  color: var(--text);
+}
+
+.interactive-edit-zoom {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  z-index: 35;
+  display: grid;
+  grid-template-columns: auto 96px 36px;
+  align-items: center;
+  gap: 7px;
+  min-height: 32px;
+  padding: 5px 8px;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  color: var(--muted);
+  background: rgba(26, 31, 39, 0.86);
+  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.36);
+  backdrop-filter: blur(16px);
+  font-size: 11px;
+  line-height: 1;
+}
+
+.interactive-edit-zoom input {
+  width: 96px;
+  height: 16px;
+  margin: 0;
+}
+
+.interactive-edit-zoom output {
+  color: var(--text);
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10px;
+  text-align: right;
+}
+
+.interactive-edit-compose > .modal-actions {
+  padding-top: 0;
+}
+
+@media (max-width: 760px) {
+  .modal-dialog-interactive-edit {
+    width: calc(100vw - 16px);
+    height: calc(100vh - 16px);
+  }
+
+  .interactive-editor-stage {
+    min-height: 360px;
+  }
+
+}
+`,
+  render(ui) {
+    const view = ui.view()
+    if (view) view.classList.add('interactive-edit-view')
+    return ui.stack(view, ui.prompt('prompt'), ui.field('model'), ui.field('html.text075'))
+  },
+  id: 'interactive-edit',
+  title: 'html.text049',
+  storage: 'parameters',
+  menu: [{ accepts: ['image'] }],
+  node: {
+    type: 'feature_dialog',
+    width: 900,
+    minWidth: 520,
+    minHeight: 520,
+    generationInput: true,
+    classNames: ['is-interactive-ui', 'is-interactive-edit'],
+  },
+  fields: [
+    {
+      path: 'prompt',
+      type: 'textarea',
+      default: '',
+      required: true,
+      label: 'html.text105',
+      placeholder: 'html.text019',
+    },
+    {
+      path: 'model',
+      type: 'enum',
+      default: 'asset-pro',
+      label: 'html.text074',
+      options: [
+        { value: 'asset-pro', labelKey: 'models.assetPro' },
+        { value: 'asset-max', labelKey: 'models.assetMax' },
+      ],
+    },
+    { path: 'referenceImageData', type: 'hidden', default: '' },
+    { type: 'note', label: 'html.text075' },
+  ],
+  runtimeDefaults: () => ({ ready: false }),
+  ready: (p) => p.ready,
+  submitLabel: 'html.text077',
+  setup: createInteractiveImageEditing,
+}
+
+function createInteractiveImageEditing(services) {
+  const views = new Map()
+  return {
+    mountView(host, item) {
+      const view = mountDrawingView(host, item, services)
+      views.set(item.id, view)
+      return () => {
+        view.dispose()
+        if (views.get(item.id) === view) views.delete(item.id)
+      }
+    },
+    async task(item, params) {
+      const referenceImageData = await views.get(item.id)?.exportImage()
+      if (!referenceImageData?.startsWith('data:image/'))
+        throw new Error(errorT('features.editing.interactiveImageEditing.text036'))
+      params.referenceImageData = referenceImageData
+      return {
+        endpoint: '/api/generate',
+        body: {
+          prompt: params.prompt.trim(),
+          model: params.model,
+          reference_ids: [item.sourceId],
+          reference_image_data: referenceImageData,
+        },
+        wait: {
+          name: t('features.editing.interactiveImageEditing.text041'),
+          references: [item.sourceId],
+        },
+      }
+    },
+    dispose(id) {
+      views.get(id)?.dispose()
+      views.delete(id)
+    },
+  }
+}
+
+function mountDrawingView(host, item, services) {
+  const params = ensureFeatureState(item)
+  const { imageUrl } = services
+  let interactiveEditor = null,
+    interactiveEditorExportRequest = null,
+    interactiveEditorInteractionCleanup = null,
+    disposed = false
+  const stage = el('div', 'interactive-editor-stage')
+  stage.style.height = '500px'
+  stage.style.flexShrink = '0'
+  const drawingHost = el('div', 'interactive-editor-host')
+  drawingHost.id = 'drawing-' + item.id
+  const zoomLabel = el('label', 'interactive-edit-zoom', t('html.text073'))
+  const zoom = el('input'),
+    output = el('output')
+  zoom.type = 'range'
+  zoom.min = '1'
+  zoom.max = '400'
+  zoom.value = '100'
+  zoom.step = '1'
+  zoomLabel.append(zoom, output)
+  stage.append(drawingHost, zoomLabel)
+  const status = el('p', 'modal-hint', t('features.editing.interactiveImageEditing.text026'))
+  const save = el('button', 'ghost-btn', t('html.text076'))
+  save.type = 'button'
+  host.append(stage, status, save)
+  const elements = {
+    world: host.closest('.canvas-world') || document.getElementById('world'),
+    interactiveEditorHost: drawingHost,
+    interactiveEditZoom: zoom,
+    interactiveEditZoomValue: output,
+    interactiveEditStatus: status,
+  }
+  const reportError = (error) => {
+    if (!disposed) {
+      params.messages.push({ error: String(error?.message || error) })
+      notifyFeatureState(item.id)
+    }
+  }
+  const INTERACTIVE_EDITOR_TRANSLATION = {
+    name: 'zh-CN-canvas',
+    strings: {
+      lineColor: t('features.editing.interactiveImageEditing.text001'),
+      lineColorFull: t('features.editing.interactiveImageEditing.text002'),
+      fillColor: t('features.editing.interactiveImageEditing.text003'),
+      fillColorFull: t('features.editing.interactiveImageEditing.text004'),
+      alpha: t('features.editing.interactiveImageEditing.text005'),
+      alphaFull: t('features.editing.interactiveImageEditing.text005'),
+      lineWidth: t('features.editing.interactiveImageEditing.text006'),
+      lineWidthFull: t('features.editing.interactiveImageEditing.text007'),
+      arrowLength: t('features.editing.interactiveImageEditing.text008'),
+      arrowLengthFull: t('features.editing.interactiveImageEditing.text009'),
+      textColor: t('features.editing.interactiveImageEditing.text001'),
+      textColorFull: t('features.editing.interactiveImageEditing.text010'),
+      fontSize: t('features.editing.interactiveImageEditing.text011'),
+      fontSizeFull: t('features.editing.interactiveImageEditing.text012'),
+      apply: t('features.editing.interactiveImageEditing.text013'),
+      cancel: t('features.editing.interactiveImageEditing.text014'),
+      tools: {
+        select: t('features.editing.interactiveImageEditing.text015'),
+        rect: t('features.editing.interactiveImageEditing.text016'),
+        ellipse: t('features.editing.interactiveImageEditing.text017'),
+        arrow: t('features.editing.interactiveImageEditing.text018'),
+        brush: t('features.editing.interactiveImageEditing.text019'),
+        text: t('features.editing.interactiveImageEditing.text020'),
+        rotate: t('features.editing.interactiveImageEditing.text021'),
+        undo: t('features.editing.interactiveImageEditing.text022'),
+        redo: t('features.editing.interactiveImageEditing.text023'),
+      },
+    },
+  }
+
+  const INTERACTIVE_EDITOR_HIDDEN_TOOLS = [
+    'crop',
+    'pixelize',
+    'line',
+    'filters',
+    'eraser',
+    'resize',
+    'settings',
+    'zoomout',
+    'zoomin',
+    'bucket',
+    'clear',
+    'save',
+    'open',
+    'close',
+  ]
+
+  const INTERACTIVE_EDITOR_TOOL_ORDER = [
+    'arrow',
+    'brush',
+    'rect',
+    'ellipse',
+    'text',
+    'select',
+    'rotate',
+    'undo',
+    'redo',
+  ]
+
+  const INTERACTIVE_EDITOR_TOOL_ICONS = {
+    arrow: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 19 19 5M10 5h9v9"/></svg>',
+    brush:
+      '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3.5 16.5c3-9 6.4 8.2 9.4-.5 2.2-6.4 4.8-5.7 7.6-2.2"/></svg>',
+    rect: '<svg viewBox="0 0 24 24" aria-hidden="true"><rect x="4.5" y="5.5" width="15" height="13" rx="1.5"/></svg>',
+    ellipse:
+      '<svg viewBox="0 0 24 24" aria-hidden="true"><ellipse cx="12" cy="12" rx="8" ry="6.5"/></svg>',
+    text: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 6h14M12 6v13M8.5 19h7"/></svg>',
+    select:
+      '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 4H4v4M16 4h4v4M20 16v4h-4M8 20H4v-4"/></svg>',
+    rotate:
+      '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 7v5h-5M19 12a7 7 0 1 1-2-5"/></svg>',
+    undo: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="m9 7-4 4 4 4M5 11h8a6 6 0 0 1 6 6"/></svg>',
+    redo: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="m15 7 4 4-4 4M19 11h-8a6 6 0 0 0-6 6"/></svg>',
+  }
+
+  function syncInteractiveEditZoomControl(editor) {
+    const percentage = Math.max(1, Math.min(400, Math.round((editor?.zoomFactor || 1) * 100)))
+    elements.interactiveEditZoom.value = String(percentage)
+    elements.interactiveEditZoomValue.value = `${percentage}%`
+    elements.interactiveEditZoomValue.textContent = `${percentage}%`
+  }
+
+  function destroyInteractiveEditor() {
+    const editor = interactiveEditor
+    interactiveEditor = null
+    interactiveEditorInteractionCleanup?.()
+    interactiveEditorInteractionCleanup = null
+    const exportRequest = interactiveEditorExportRequest
+    interactiveEditorExportRequest = null
+    if (exportRequest) {
+      clearTimeout(exportRequest.timeout)
+      exportRequest.reject(new Error(errorT('features.editing.interactiveImageEditing.text024')))
+    }
+    if (editor) {
+      try {
+        editor.hide()
+      } catch {
+        /* editor may still be initializing */
+      }
+    }
+    elements.interactiveEditorHost.innerHTML = ''
+  }
+
+  async function initializeInteractiveEditor(imageId) {
+    try {
+      const PainterroEditor = window.Painterro
+      if (typeof PainterroEditor !== 'function')
+        throw new Error(errorT('features.editing.interactiveImageEditing.text027'))
+      if (disposed) return
+      let editor = null
+      let loadTimeout = null
+      await new Promise((resolve, reject) => {
+        const finish = (callback, value) => {
+          if (loadTimeout) clearTimeout(loadTimeout)
+          callback(value)
+        }
+        editor = PainterroEditor({
+          id: elements.interactiveEditorHost.id,
+          defaultTool: 'brush',
+          hiddenTools: INTERACTIVE_EDITOR_HIDDEN_TOOLS,
+          backgroundFillColorAlpha: 0,
+          defaultPrimitiveShadowOn: false,
+          defaultTextStrokeAndShadow: false,
+          disableWheelZoom: true,
+          fixMobilePageReloader: false,
+          toolbarHeightPx: 64,
+          buttonSizePx: 44,
+          colorScheme: {
+            main: '#1a1f27',
+            control: '#232a34',
+            controlShadow: '0 0 0 1px rgba(255,255,255,0.08)',
+            controlContent: '#e8edf4',
+            hoverControl: '#2d3744',
+            hoverControlContent: '#ffffff',
+            activeControl: '#3dd6c6',
+            activeControlContent: '#0b1214',
+            inputBorderColor: 'rgba(255,255,255,0.1)',
+            inputBackground: '#12151a',
+            inputText: '#e8edf4',
+            backgroundColor: '#12151a',
+            toolControlNameColor: 'transparent',
+            dragOverBarColor: 'rgba(61,214,198,0.18)',
+          },
+          translation: INTERACTIVE_EDITOR_TRANSLATION,
+          onChange: ({ image, operationsDone }) => {
+            if (disposed || !params.ready || !operationsDone) return
+            params.referenceImageData = image.asDataURL('image/png')
+            services.saveLayout().catch(reportError)
+          },
+          onImageLoaded: () => finish(resolve),
+          onImageFailedOpen: () =>
+            finish(reject, new Error(errorT('features.editing.interactiveImageEditing.text028'))),
+          saveHandler: (image, done) => {
+            const request = interactiveEditorExportRequest
+            if (!request || request.editor !== editor) {
+              done(false)
+              return
+            }
+            interactiveEditorExportRequest = null
+            clearTimeout(request.timeout)
+            try {
+              request.resolve(image.asDataURL('image/png'))
+            } catch (error) {
+              request.reject(error)
+            } finally {
+              done(false)
+            }
+          },
+        })
+        interactiveEditor = editor
+        interactiveEditorInteractionCleanup = installInteractiveEditorInteractions(editor)
+        editor.show(params.referenceImageData || imageUrl(imageId))
+        loadTimeout = setTimeout(
+          () => reject(new Error(errorT('features.editing.interactiveImageEditing.text029'))),
+          10_000,
+        )
+      })
+      if (disposed || interactiveEditor !== editor) return
+      decorateInteractiveEditorToolbar(editor)
+      syncInteractiveEditZoomControl(editor)
+      params.ready = true
+      notifyFeatureState(item.id)
+      elements.interactiveEditStatus.hidden = true
+    } catch (error) {
+      if (disposed) return
+      destroyInteractiveEditor()
+      params.ready = false
+      notifyFeatureState(item.id)
+      elements.interactiveEditStatus.hidden = false
+      elements.interactiveEditStatus.textContent = errorText(error)
+    }
+  }
+
+  function decorateInteractiveEditorToolbar(editor) {
+    const bar = elements.interactiveEditorHost.querySelector('.ptro-bar > div')
+    const controls = bar?.querySelector('.ptro-tool-controls')
+    if (!bar || !controls) return
+    for (const tool of INTERACTIVE_EDITOR_TOOL_ORDER) {
+      const button = bar.querySelector(`button[aria-label="${tool}"]`)
+      if (!button) continue
+      button.dataset.tool = tool === 'select' ? 'crop' : tool
+      button.innerHTML = INTERACTIVE_EDITOR_TOOL_ICONS[tool]
+      button.addEventListener('click', () => {
+        const toolbar = button.closest('.ptro-bar')
+        const isSelectedTool = editor.activeTool?.name === tool
+        if (tool === 'select' && isSelectedTool) {
+          mountInteractiveCropControls(editor, controls, toolbar)
+        }
+        const hasOptions = isSelectedTool && !['undo', 'redo', 'rotate'].includes(tool)
+        if (hasOptions) {
+          controls.style.top = `${button.offsetTop + button.offsetHeight / 2}px`
+        }
+        toolbar?.classList.toggle('has-tool-options', hasOptions)
+      })
+      bar.insertBefore(button, controls)
+    }
+  }
+
+  function mountInteractiveCropControls(editor, controls, toolbar) {
+    controls.innerHTML = ''
+    const hint = document.createElement('span')
+    hint.className = 'interactive-crop-hint'
+    hint.textContent = t('features.editing.interactiveImageEditing.text030')
+    const apply = document.createElement('button')
+    apply.type = 'button'
+    apply.className = 'interactive-crop-apply'
+    apply.textContent = t('features.editing.interactiveImageEditing.text031')
+    apply.addEventListener('click', (event) => {
+      event.preventDefault()
+      event.stopPropagation()
+      const area = editor.select?.area
+      const width = area?.bottoml?.[0] - area?.topl?.[0]
+      const height = area?.bottoml?.[1] - area?.topl?.[1]
+      if (!editor.select?.shown || !(width > 0 && height > 0)) {
+        hint.textContent = t('features.editing.interactiveImageEditing.text032')
+        return
+      }
+      editor.select.doCrop()
+      editor.closeActiveTool(true)
+      editor.setActiveTool(editor.defaultTool)
+      toolbar?.classList.remove('has-tool-options')
+    })
+    controls.append(hint, apply)
+  }
+
+  function installInteractiveEditorCoordinateFix(host) {
+    const nativeGetBoundingClientRect = Element.prototype.getBoundingClientRect
+    const patchedElements = new Map()
+    let mouseGestureActive = false
+
+    const coordinateSpace = () => {
+      const worldRect = nativeGetBoundingClientRect.call(elements.world)
+      return {
+        scale: Math.max(0.01, Number(state.camera.scale) || 1),
+        originX: worldRect.left,
+        originY: worldRect.top,
+      }
+    }
+
+    const normalizeX = (value, space) =>
+      space.originX + (Number(value) - space.originX) / space.scale
+    const normalizeY = (value, space) =>
+      space.originY + (Number(value) - space.originY) / space.scale
+
+    const normalizeRect = (rect) => {
+      const space = coordinateSpace()
+      const left = normalizeX(rect.left, space)
+      const top = normalizeY(rect.top, space)
+      const width = rect.width / space.scale
+      const height = rect.height / space.scale
+      return {
+        x: left,
+        y: top,
+        left,
+        top,
+        right: left + width,
+        bottom: top + height,
+        width,
+        height,
+        toJSON() {
+          return {
+            x: left,
+            y: top,
+            left,
+            top,
+            right: left + width,
+            bottom: top + height,
+            width,
+            height,
+          }
+        },
+      }
+    }
+
+    const patchElement = (element) => {
+      if (!(element instanceof Element) || patchedElements.has(element)) return
+      const ownDescriptor = Object.getOwnPropertyDescriptor(element, 'getBoundingClientRect')
+      const readNativeRect = element.getBoundingClientRect.bind(element)
+      try {
+        Object.defineProperty(element, 'getBoundingClientRect', {
+          configurable: true,
+          value: () => normalizeRect(readNativeRect()),
+        })
+        patchedElements.set(element, ownDescriptor || null)
+      } catch {
+        /* keep native geometry when a browser does not allow an instance override */
+      }
+    }
+
+    patchElement(host)
+    for (const element of host.querySelectorAll('*')) patchElement(element)
+    const observer = new MutationObserver((records) => {
+      for (const record of records) {
+        for (const node of record.addedNodes) {
+          if (!(node instanceof Element)) continue
+          patchElement(node)
+          for (const element of node.querySelectorAll('*')) patchElement(element)
+        }
+      }
+    })
+    observer.observe(host, { childList: true, subtree: true })
+
+    const eventBelongsToEditor = (event) =>
+      event.target instanceof Node && host.contains(event.target)
+    const normalizeMouseEvent = (event) => {
+      const space = coordinateSpace()
+      try {
+        Object.defineProperties(event, {
+          clientX: { configurable: true, value: normalizeX(event.clientX, space) },
+          clientY: { configurable: true, value: normalizeY(event.clientY, space) },
+        })
+      } catch {
+        /* Chromium permits shadowing these accessors; leave the event intact elsewhere */
+      }
+    }
+    const onMouseDown = (event) => {
+      if (!eventBelongsToEditor(event)) return
+      mouseGestureActive = true
+      normalizeMouseEvent(event)
+    }
+    const onMouseMove = (event) => {
+      if (!mouseGestureActive && !eventBelongsToEditor(event)) return
+      normalizeMouseEvent(event)
+    }
+    const onMouseUp = (event) => {
+      if (!mouseGestureActive) return
+      normalizeMouseEvent(event)
+      mouseGestureActive = false
+    }
+
+    document.addEventListener('mousedown', onMouseDown, true)
+    document.addEventListener('mousemove', onMouseMove, true)
+    document.addEventListener('mouseup', onMouseUp, true)
+
+    return () => {
+      document.removeEventListener('mousedown', onMouseDown, true)
+      document.removeEventListener('mousemove', onMouseMove, true)
+      document.removeEventListener('mouseup', onMouseUp, true)
+      observer.disconnect()
+      for (const [element, descriptor] of patchedElements) {
+        if (descriptor) Object.defineProperty(element, 'getBoundingClientRect', descriptor)
+        else delete element.getBoundingClientRect
+      }
+    }
+  }
+
+  function installInteractiveEditorInteractions(editor) {
+    const scroller = editor?.scroller
+    if (!scroller) return () => undefined
+    const removeCoordinateFix = installInteractiveEditorCoordinateFix(
+      elements.interactiveEditorHost,
+    )
+    let pan = null
+
+    const onMouseDown = (event) => {
+      if (event.button !== 1) return
+      event.preventDefault()
+      event.stopPropagation()
+      pan = {
+        x: event.clientX,
+        y: event.clientY,
+        left: scroller.scrollLeft,
+        top: scroller.scrollTop,
+      }
+      elements.interactiveEditorHost.classList.add('is-panning')
+    }
+
+    const onMouseMove = (event) => {
+      if (!pan) return
+      event.preventDefault()
+      event.stopPropagation()
+      scroller.scrollLeft = pan.left - (event.clientX - pan.x)
+      scroller.scrollTop = pan.top - (event.clientY - pan.y)
+    }
+
+    const stopPanning = (event) => {
+      if (!pan) return
+      if (event) {
+        event.preventDefault()
+        event.stopPropagation()
+      }
+      pan = null
+      elements.interactiveEditorHost.classList.remove('is-panning')
+    }
+
+    const onAuxClick = (event) => {
+      if (event.button === 1) event.preventDefault()
+    }
+
+    scroller.addEventListener('mousedown', onMouseDown, true)
+    scroller.addEventListener('auxclick', onAuxClick)
+    window.addEventListener('mousemove', onMouseMove, true)
+    window.addEventListener('mouseup', stopPanning, true)
+    window.addEventListener('blur', stopPanning)
+
+    return () => {
+      removeCoordinateFix()
+      scroller.removeEventListener('mousedown', onMouseDown, true)
+      scroller.removeEventListener('auxclick', onAuxClick)
+      window.removeEventListener('mousemove', onMouseMove, true)
+      window.removeEventListener('mouseup', stopPanning, true)
+      window.removeEventListener('blur', stopPanning)
+      elements.interactiveEditorHost.classList.remove('is-panning')
+    }
+  }
+
+  function exportInteractiveEditor(editor) {
+    if (interactiveEditorExportRequest) {
+      return Promise.reject(new Error(errorT('features.editing.interactiveImageEditing.text033')))
+    }
+    return new Promise((resolve, reject) => {
+      const timeout = setTimeout(() => {
+        if (interactiveEditorExportRequest?.editor !== editor) return
+        interactiveEditorExportRequest = null
+        reject(new Error(errorT('features.editing.interactiveImageEditing.text034')))
+      }, 10_000)
+      interactiveEditorExportRequest = { editor, resolve, reject, timeout }
+      try {
+        editor.save()
+      } catch (error) {
+        interactiveEditorExportRequest = null
+        clearTimeout(timeout)
+        reject(error)
+      }
+    })
+  }
+
+  zoom.addEventListener('input', () => {
+    interactiveEditor?.setZoom(Number(zoom.value))
+    syncInteractiveEditZoomControl(interactiveEditor)
+  })
+  const unsubscribe = subscribeFeatureState(item.id, () => {
+    save.disabled = params.busy || !params.ready
+    zoom.disabled = params.busy || !params.ready
+    drawingHost.style.pointerEvents = params.busy ? 'none' : ''
+  })
+  save.addEventListener('click', async () => {
+    if (params.busy || !params.ready) return
+    params.busy = true
+    notifyFeatureState(item.id)
+    const operation = services.beginActiveOperation('interactive-edit-save')
+    try {
+      const data = await exportInteractiveEditor(interactiveEditor)
+      const sourceName = String(services.imageName(item.sourceId) || 'image').replace(
+        /\.[^.]+$/,
+        '',
+      )
+      const saved = await api('/api/upload', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          name: sourceName + '_edited.png',
+          data,
+          place: false,
+          operation: 'interactive_edit',
+          source_id: item.sourceId,
+        }),
+      })
+      await services.replaceLocal(item, [
+        {
+          id: saved.id,
+          name: saved.name,
+          x: item.x,
+          y: item.y,
+          width: 220,
+          height: null,
+          references: [{ id: item.sourceId, role: 'source' }],
+        },
+      ])
+      await services.reload()
+      services.setSelection([saved.id])
+      services.renderChrome()
+    } catch (error) {
+      reportError(error)
+    } finally {
+      params.busy = false
+      services.endActiveOperation(operation)
+      notifyFeatureState(item.id)
+    }
+  })
+  requestAnimationFrame(() => {
+    if (!disposed) initializeInteractiveEditor(item.sourceId)
+  })
+  return {
+    exportImage: () => exportInteractiveEditor(interactiveEditor),
+    dispose() {
+      if (disposed) return
+      disposed = true
+      params.ready = false
+      unsubscribe()
+      destroyInteractiveEditor()
+    },
+  }
+}