evomeme 0.1.9 → 0.1.10-beta.13

package/dist/canvas-public/elements/map.js

@@ -0,0 +1,64 @@
+import { api } from '../core/api.js'
+import { state } from '../core/state.js'
+import {
+  TILE_MAP_FOOTER_HEIGHT,
+  TILE_MAP_NODE_MIN_HEIGHT,
+  TILE_MAP_NODE_MIN_WIDTH,
+  tileMapContentAspectRatio,
+} from '../map/model.js'
+import { mountTileMapNode } from '../map/tile-map-editor.js'
+
+export function mountMapElement(element, item, context) {
+  const {
+    appendResizeHandle,
+    imageUrl,
+    isSelected,
+    renderChrome,
+    saveLayout,
+    setSelection,
+    syncSelectionClass,
+  } = context
+
+  mountTileMapNode(element, item, {
+    resolveImageUrl: imageUrl,
+    processTileset: (payload) =>
+      api('/api/tile-maps/process-tileset', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload),
+      }),
+    deleteTileset: (payload) =>
+      api('/api/tile-maps/delete-tileset', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload),
+      }),
+    onActivate: (id) => {
+      if (isSelected(id)) return
+      setSelection([id])
+      syncSelectionClass()
+      renderChrome()
+    },
+    onChange: (id, tileMap) => {
+      const current = state.layoutItems.find((candidate) => candidate.id === id)
+      if (!current) return
+      current.tileMap = tileMap
+      saveLayout(state.layoutItems).catch((error) => {
+        state.error = String(error.message || error)
+        renderChrome()
+      })
+    },
+    onError: (message) => {
+      state.error = message
+      renderChrome()
+    },
+  })
+
+  appendResizeHandle(element, {
+    itemId: item.id,
+    minWidth: TILE_MAP_NODE_MIN_WIDTH,
+    minHeight: TILE_MAP_NODE_MIN_HEIGHT,
+    contentAspectRatio: tileMapContentAspectRatio,
+    fixedHeight: TILE_MAP_FOOTER_HEIGHT,
+  })
+}

package/dist/canvas-public/elements/registry.js

@@ -0,0 +1,58 @@
+import { getFeature } from '../core/feature-registry.js'
+import { isTileMapItem } from '../map/model.js'
+
+// Unknown UI types remain visible and losslessly saved until their feature is available.
+const unsupportedUi = Object.freeze({
+  width: 360, minWidth: 240, minHeight: 160, inspector: false,
+  classNames: ['is-interactive-ui', 'is-gen-dialog'],
+})
+
+export function uiDefinitionFor(itemOrType) {
+  const type = typeof itemOrType === 'string' ? itemOrType : itemOrType?.type
+  const definition = getFeature(itemOrType)?.node
+  if (definition) return definition
+  if (!type || ['image', 'video', 'pending'].includes(type) || isTileMapItem({ type })) return null
+  return unsupportedUi
+}
+
+export function isUiElement(item) {
+  return Boolean(uiDefinitionFor(item))
+}
+
+export function isCanvasPanelElement(item) {
+  return isUiElement(item) || isTileMapItem(item)
+}
+
+export function isGenerationInputUiElement(item) {
+  return uiDefinitionFor(item)?.generationInput === true
+}
+
+export function supportsCanvasInspector(item) {
+  return uiDefinitionFor(item)?.inspector !== false
+}
+
+export function isVideoElement(item) {
+  return Boolean(
+    item && (
+      item.type === 'video' ||
+      String(item.id || '').startsWith('videos/') ||
+      String(item.kind || '') === 'video'
+    ),
+  )
+}
+
+export function canvasElementKind(item) {
+  if (isTileMapItem(item)) return 'map'
+  if (item?.type === 'pending') return 'loading'
+  if (isUiElement(item)) return 'ui'
+  if (isVideoElement(item)) return 'video'
+  return 'image'
+}
+
+export const ELEMENT_DEFINITIONS = Object.freeze([
+  Object.freeze({ kind: 'map', matches: (item) => canvasElementKind(item) === 'map' }),
+  Object.freeze({ kind: 'loading', matches: (item) => canvasElementKind(item) === 'loading' }),
+  Object.freeze({ kind: 'ui', matches: (item) => canvasElementKind(item) === 'ui' }),
+  Object.freeze({ kind: 'video', matches: (item) => canvasElementKind(item) === 'video' }),
+  Object.freeze({ kind: 'image', matches: (item) => canvasElementKind(item) === 'image' }),
+])

package/dist/canvas-public/elements/replacement.js

@@ -0,0 +1,78 @@
+function finiteNumber(value, fallback = 0) {
+  const number = Number(value)
+  return Number.isFinite(number) ? number : fallback
+}
+
+function positiveNumber(value, fallback) {
+  const number = Number(value)
+  return Number.isFinite(number) && number > 0 ? number : fallback
+}
+
+function insertionIndex(items, slot) {
+  return Math.max(0, Math.min(Number(slot?.index) || 0, items.length))
+}
+
+/**
+ * Remove one canvas element while retaining the exact layout slot needed to
+ * restore it or put its results in the same place.
+ */
+export function detachCanvasElement(items, elementId) {
+  const index = items.findIndex((item) => item.id === elementId)
+  if (index < 0) return null
+  const [item] = items.splice(index, 1)
+  return {
+    index,
+    item,
+    x: finiteNumber(item.x),
+    y: finiteNumber(item.y),
+  }
+}
+
+export function insertCanvasElementsAtSlot(items, slot, elements) {
+  if (!slot || !Array.isArray(elements) || !elements.length) return false
+  items.splice(insertionIndex(items, slot), 0, ...elements)
+  return true
+}
+
+export function restoreCanvasElement(items, slot) {
+  if (!slot?.item) return false
+  const currentIndex = items.findIndex((item) => item.id === slot.item.id)
+  if (currentIndex >= 0) items.splice(currentIndex, 1)
+  return insertCanvasElementsAtSlot(items, slot, [slot.item])
+}
+
+export function replaceCanvasElement(items, elementId, replacements) {
+  const slot = detachCanvasElement(items, elementId)
+  if (!slot) return null
+  insertCanvasElementsAtSlot(items, slot, replacements)
+  return slot
+}
+
+/**
+ * Lay out one or more result elements from the source element's original
+ * position. The first result always occupies that exact position.
+ */
+export function layoutCanvasElementsAtSlot(slot, elements, {
+  nodeWidth,
+  nodeHeight = nodeWidth,
+  columnGap = 30,
+  rowGap = 50,
+  maxColumns = 5,
+} = {}) {
+  if (!slot || !Array.isArray(elements)) return []
+  // Some callers retain the source UI until import succeeds instead of detaching it.
+  const x = finiteNumber(slot.x ?? slot.item?.x)
+  const y = finiteNumber(slot.y ?? slot.item?.y)
+  const width = positiveNumber(nodeWidth, positiveNumber(slot.item?.width, 1))
+  const height = positiveNumber(nodeHeight, width)
+  const columns = Math.min(
+    Math.max(1, Math.floor(positiveNumber(maxColumns, 5))),
+    Math.max(1, Math.ceil(Math.sqrt(elements.length))),
+  )
+  return elements.map((element, index) => ({
+    ...element,
+    x: x + (index % columns) * (width + finiteNumber(columnGap, 30)),
+    y: y + Math.floor(index / columns) * (height + finiteNumber(rowGap, 50)),
+    width: positiveNumber(element.width, width),
+  }))
+}

package/dist/canvas-public/elements/resize.js

@@ -0,0 +1,210 @@
+import { t } from '../language/index.js'
+import { state } from '../core/state.js'
+import { isTileMapItem } from '../map/model.js'
+import { resizeTileMapView } from '../map/tile-map-editor.js'
+import { isVideoItem } from './types.js'
+
+export function createCanvasElementResize({
+  clientToWorld,
+  elements,
+  findNodeEl,
+  hideCtxMenu,
+  interaction,
+  isSelected,
+  minimumMediaResizeSide,
+  renderChrome,
+  requestDependencyEdgeGeometryUpdate,
+  requestDependencyEdgeUpdate,
+  saveLayout,
+  setSelection,
+  shouldDeferExternalSync,
+  syncExternalChanges,
+  syncSelectionClass,
+  defaultNodeWidth,
+}) {
+  let activePanelResize = null
+
+  function startPanelResize(event, options) {
+    if (event.button !== 0) return
+    const record = state.layoutItems.find((item) => item.id === options.itemId)
+    if (!record) return
+    event.preventDefault()
+    event.stopPropagation()
+    activePanelResize = {
+      ...options,
+      record,
+      element: options.element,
+      pointerId: event.pointerId,
+      startClientX: event.clientX,
+      startClientY: event.clientY,
+      startWidth: options.element.offsetWidth,
+      startHeight: options.element.offsetHeight,
+    }
+    interaction.mode = 'canvas-panel-resize'
+    options.element.classList.add('is-resizing-panel')
+    event.currentTarget.setPointerCapture?.(event.pointerId)
+  }
+
+  function updatePanelResize(event) {
+    const resize = activePanelResize
+    if (!resize || event.pointerId !== resize.pointerId) return
+    event.preventDefault()
+    event.stopPropagation()
+    const coordinateScale = state.camera.scale || 1
+    const deltaX = (event.clientX - resize.startClientX) / coordinateScale
+    const deltaY = (event.clientY - resize.startClientY) / coordinateScale
+    const aspectRatio = typeof resize.contentAspectRatio === 'function'
+      ? Number(resize.contentAspectRatio(resize.record))
+      : Number(resize.contentAspectRatio)
+    let width
+    let height
+    if (Number.isFinite(aspectRatio) && aspectRatio > 0) {
+      const fixedHeight = Math.max(0, Number(resize.fixedHeight) || 0)
+      const projectedWidth = resize.startWidth
+        + (deltaX + deltaY / aspectRatio) / (1 + 1 / (aspectRatio * aspectRatio))
+      const minWidth = Math.max(
+        resize.minWidth || 280,
+        ((resize.minHeight || 0) - fixedHeight) * aspectRatio,
+      )
+      const maxWidth = Math.min(1800, (1400 - fixedHeight) * aspectRatio)
+      width = Math.max(minWidth, Math.min(maxWidth, projectedWidth))
+      height = width / aspectRatio + fixedHeight
+    } else {
+      width = Math.max(resize.minWidth || 280, Math.min(1800, resize.startWidth + deltaX))
+      height = Math.max(resize.minHeight || 220, Math.min(1400, resize.startHeight + deltaY))
+    }
+    resize.record.width = Math.round(width)
+    resize.record.height = Math.round(height)
+    resize.element.style.width = `${resize.record.width}px`
+    resize.element.style.height = `${resize.record.height}px`
+    resize.element.classList.add('is-manual-size')
+    if (isTileMapItem(resize.record)) resizeTileMapView(resize.record.id)
+    requestDependencyEdgeGeometryUpdate()
+  }
+
+  function finishPanelResize(event) {
+    const resize = activePanelResize
+    if (!resize || event.pointerId !== resize.pointerId) return
+    resize.element.classList.remove('is-resizing-panel')
+    activePanelResize = null
+    interaction.mode = null
+    requestDependencyEdgeUpdate()
+    saveLayout(state.layoutItems).catch((error) => {
+      state.error = String(error.message || error)
+      renderChrome()
+    })
+    if (state.externalSyncPending && !shouldDeferExternalSync()) {
+      setTimeout(() => syncExternalChanges(), 0)
+    }
+  }
+
+  function appendCanvasPanelResizeHandle(element, options) {
+    if (element.querySelector(':scope > .canvas-panel-resize-handle')) return
+    const handle = document.createElement('button')
+    handle.type = 'button'
+    handle.className = 'canvas-panel-resize-handle'
+    handle.title = t("elements.resize.text001")
+    handle.setAttribute('aria-label', t("elements.resize.text002"))
+    handle.addEventListener('pointerdown', (event) => startPanelResize(event, { ...options, element }))
+    handle.addEventListener('click', (event) => {
+      event.preventDefault()
+      event.stopPropagation()
+    })
+    element.appendChild(handle)
+  }
+
+  function mediaWorldSize(id) {
+    const item = state.layoutItems.find((candidate) => candidate.id === id)
+    const nodeElement = findNodeEl(id)
+    const mediaElement = nodeElement?.querySelector(
+      "img[data-role='frame'], video[data-role='frame'], .frame-sheet-preview",
+    )
+    const scale = Number(state.camera.scale) || 1
+    const mediaRect = mediaElement?.getBoundingClientRect()
+    const width = Number(item?.width) ||
+      (mediaRect?.width ? mediaRect.width / scale : defaultNodeWidth)
+    let height = Number(item?.height) || (mediaRect?.height ? mediaRect.height / scale : 0)
+    if (!(height > 0)) {
+      const dims = state.imageDims[id]
+      if (dims?.w > 0 && dims?.h > 0) height = width * (dims.h / dims.w)
+    }
+    if (!(height > 0) && isVideoItem(item)) {
+      const match = String(item?.gen?.ratio || item?.ratio || '16:9').match(/^(\d+)\s*:\s*(\d+)$/)
+      if (match) height = width * (Number(match[2]) / Number(match[1]))
+    }
+    return { width, height: height > 0 ? height : width }
+  }
+
+  function startMediaResize(event, node, corner) {
+    if (event.button !== 0) return
+    event.preventDefault()
+    event.stopPropagation()
+    hideCtxMenu()
+    const current = state.layoutItems.find((item) => item.id === node.id)
+    if (!current) return
+    if (!isSelected(node.id) || state.selectedIds.size !== 1) {
+      setSelection([node.id])
+      syncSelectionClass()
+      renderChrome()
+    }
+    const clickedSize = mediaWorldSize(node.id)
+    const x = Number(current.x) || 0
+    const y = Number(current.y) || 0
+    const east = corner.includes('e')
+    const south = corner.includes('s')
+    interaction.mode = 'resize'
+    interaction.resize = {
+      pointerId: event.pointerId,
+      startWorld: clientToWorld(event.clientX, event.clientY),
+      anchor: {
+        x: east ? x : x + clickedSize.width,
+        y: south ? y : y + clickedSize.height,
+      },
+      diagonal: {
+        x: east ? clickedSize.width : -clickedSize.width,
+        y: south ? clickedSize.height : -clickedSize.height,
+      },
+      originals: new Map([[current.id, {
+        x,
+        y,
+        width: clickedSize.width,
+        height: clickedSize.height,
+      }]]),
+      minimumScale: Math.min(
+        1,
+        minimumMediaResizeSide / Math.max(1, Math.min(clickedSize.width, clickedSize.height)),
+      ),
+    }
+    elements.viewport.classList.add('is-resizing')
+    elements.viewport.dataset.resizeCorner = corner
+    elements.viewport.setPointerCapture?.(event.pointerId)
+  }
+
+  function appendMediaResizeHandles(container, node) {
+    for (const corner of ['nw', 'ne', 'sw', 'se']) {
+      const handle = document.createElement('button')
+      handle.type = 'button'
+      handle.className = 'canvas-resize-handle'
+      handle.dataset.corner = corner
+      handle.setAttribute('aria-label', t("elements.resize.text003"))
+      handle.addEventListener('pointerdown', (event) => startMediaResize(event, node, corner))
+      container.appendChild(handle)
+    }
+  }
+
+  function resetCanvasPanelResize() {
+    activePanelResize?.element?.classList.remove('is-resizing-panel')
+    activePanelResize = null
+    if (interaction.mode === 'canvas-panel-resize') interaction.mode = null
+  }
+
+  window.addEventListener('pointermove', updatePanelResize, true)
+  window.addEventListener('pointerup', finishPanelResize, true)
+  window.addEventListener('pointercancel', finishPanelResize, true)
+
+  return {
+    appendCanvasPanelResizeHandle,
+    appendMediaResizeHandles,
+    resetCanvasPanelResize,
+  }
+}

package/dist/canvas-public/elements/task-pipeline.js

@@ -0,0 +1,235 @@
+import { errorT } from '../language/index.js'
+import { t } from '../language/index.js'
+import { api } from '../core/api.js'
+import { state } from '../core/state.js'
+import {
+  isGenerationInputUi,
+  isPending,
+} from './types.js'
+import { replaceCanvasElement } from './replacement.js'
+
+function taskResultIds(result) {
+  if (!result || typeof result !== 'object') return []
+  const values = Array.isArray(result.images) && result.images.length
+    ? result.images
+    : Array.isArray(result.ids) && result.ids.length
+      ? result.ids
+      : result.id
+        ? [result.id]
+        : []
+  return [...new Set(values
+    .map((value) => typeof value === 'string' ? value : value?.id)
+    .filter(Boolean))]
+}
+
+function normalizeReferences(references) {
+  return (Array.isArray(references) ? references : [])
+    .map((reference) => typeof reference === 'string'
+      ? { id: reference, role: 'source' }
+      : reference?.id ? { ...reference } : null)
+    .filter(Boolean)
+}
+
+/**
+ * The only canvas task lifecycle used by generation and editing features.
+ * The browser submits one root task. The server may execute one or many
+ * atomic steps; every step reuses this lifecycle and remains visible as part
+ * of the task flow on the canvas.
+ */
+export function createCanvasTaskPipeline({
+  acceptLayoutRevision,
+  beginActiveOperation,
+  createCanvasClientId,
+  defaultNodeWidth,
+  endActiveOperation,
+  reload,
+  renderCanvasPreservingStableNodes,
+  renderChrome,
+  saveLayout,
+  serializeLayoutItem,
+  setSelection,
+  markGenerationInputIdle = () => undefined,
+}) {
+  function replaceGenerationInputWithPending(dialogId, pendingItem, options = {}) {
+    const index = state.layoutItems.findIndex((item) => item.id === dialogId)
+    const dialog = index >= 0 ? state.layoutItems[index] : null
+    if (!isGenerationInputUi(dialog) || !isPending(pendingItem)) return false
+
+    const snapshot = {
+      ...serializeLayoutItem(dialog),
+      references: normalizeReferences(pendingItem.references),
+    }
+    const nextPending = { ...pendingItem, inputUiSnapshot: snapshot }
+    state.pendingUiRecoveries.set(nextPending.id, {
+      index,
+      snapshot,
+      retainUntilSettled: options.retainUntilSettled === true,
+    })
+    replaceCanvasElement(state.layoutItems, dialogId, [nextPending])
+    setSelection([nextPending.id])
+    return true
+  }
+
+  function restoreGenerationInputForOperation(operationId, error = '') {
+    const pending = state.layoutItems.find(
+      (item) => isPending(item) && (item.id === operationId || item.operationId === operationId),
+    )
+    const recovery = state.pendingUiRecoveries.get(operationId)
+    const snapshot = recovery?.snapshot || pending?.inputUiSnapshot
+    if (!isGenerationInputUi(snapshot)) return false
+    if (error) snapshot.error = String(error)
+
+    const pendingIndex = state.layoutItems.findIndex(
+      (item) => isPending(item) && (item.id === operationId || item.operationId === operationId),
+    )
+    state.layoutItems = state.layoutItems.filter(
+      (item) => !(isPending(item) && (item.id === operationId || item.operationId === operationId)),
+    )
+    if (!state.layoutItems.some((item) => item.id === snapshot.id)) {
+      const insertionIndex = Math.max(
+        0,
+        Math.min(
+          pendingIndex >= 0 ? pendingIndex : Number(recovery?.index) || 0,
+          state.layoutItems.length,
+        ),
+      )
+      state.layoutItems.splice(insertionIndex, 0, snapshot)
+    }
+    markGenerationInputIdle(snapshot, error)
+    state.pendingUiRecoveries.delete(operationId)
+    setSelection([snapshot.id])
+    return true
+  }
+
+  function completeGenerationInputOperation(operationId) {
+    if (operationId) state.pendingUiRecoveries.delete(operationId)
+  }
+
+  function createPendingItem(source, operationId, wait = {}, placement = 'adjacent') {
+    const width = Number(wait.width) || Number(source?.width) ||
+      (wait.media === 'video' ? 280 : defaultNodeWidth)
+    const adjacent = placement !== 'replace'
+    return {
+      ...wait,
+      id: operationId,
+      operationId,
+      type: 'pending',
+      name: wait.name || t("elements.taskPipeline.text001"),
+      x: Number.isFinite(Number(wait.x))
+        ? Number(wait.x)
+        : (Number(source?.x) || 0) + (adjacent ? (Number(source?.width) || width) + 40 : 0),
+      y: Number.isFinite(Number(wait.y)) ? Number(wait.y) : Number(source?.y) || 0,
+      width,
+      height: wait.height ?? (placement === 'replace' ? source?.height ?? null : null),
+      media: wait.media || 'image',
+      error: null,
+      references: normalizeReferences(wait.references),
+    }
+  }
+
+  function insertPendingItem(source, pending, placement, options = {}) {
+    if (placement === 'replace') {
+      if (!replaceGenerationInputWithPending(source?.id, pending, options)) {
+        throw new Error(errorT("elements.taskPipeline.text002"))
+      }
+      return
+    }
+    state.layoutItems.push(pending)
+    setSelection([pending.id])
+  }
+
+  async function discardFailedPendingOperation(operationId) {
+    if (!operationId) return
+    state.failedOperationIds.add(operationId)
+    const pending = state.layoutItems.find(
+      (item) => isPending(item) && (item.id === operationId || item.operationId === operationId),
+    )
+    const recovery = state.pendingUiRecoveries.get(operationId)
+    const inputUiSnapshot = recovery?.snapshot || pending?.inputUiSnapshot
+    const restored = restoreGenerationInputForOperation(operationId, state.error)
+    if (!restored) {
+      state.layoutItems = state.layoutItems.filter(
+        (item) => !(isPending(item) && (item.id === operationId || item.operationId === operationId)),
+      )
+      state.selectedIds.delete(operationId)
+    }
+    renderCanvasPreservingStableNodes([operationId, restored ? inputUiSnapshot?.id : null])
+    renderChrome()
+
+    try {
+      const result = await api('/api/delete', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          layout_ids: [operationId],
+          image_ids: [],
+          ...(restored ? { restore_item: inputUiSnapshot } : {}),
+        }),
+      })
+      acceptLayoutRevision(result?.layout?.revision)
+    } catch (error) {
+      console.warn('后端清理失败的载入节点失败', error)
+      await saveLayout(state.layoutItems).catch((saveError) => {
+        console.warn('保存失败节点清理结果失败', saveError)
+      })
+    }
+  }
+
+  async function runTaskPipeline({
+    kind,
+    source,
+    placement = 'adjacent',
+    wait = {},
+    execute,
+    allowExternalSync = false,
+    retainUntilSettled = true,
+    resolveResultIds = taskResultIds,
+    onPending,
+    onSuccess,
+    onFailure,
+    onSettled,
+  }) {
+    if (!source?.id) throw new Error(errorT("elements.taskPipeline.text003"))
+    if (typeof execute !== 'function') throw new Error(errorT("elements.taskPipeline.text004"))
+
+    const operationId = wait.id || createCanvasClientId('pending')
+    const pending = createPendingItem(source, operationId, wait, placement)
+    const changedIds = [source.id, operationId]
+    const activeOperation = beginActiveOperation(kind || 'canvas-task', { allowExternalSync })
+    state.error = ''
+    try {
+      insertPendingItem(source, pending, placement, { retainUntilSettled })
+      await saveLayout(state.layoutItems)
+      renderCanvasPreservingStableNodes(changedIds)
+      renderChrome()
+      await onPending?.({ operationId, pending })
+
+      const result = await execute({ operationId })
+
+      completeGenerationInputOperation(operationId)
+      await onSuccess?.({ operationId, pending, result })
+      await reload()
+      const outputIds = resolveResultIds(result).filter(Boolean)
+      if (outputIds.length) setSelection(outputIds)
+      renderCanvasPreservingStableNodes([...changedIds, ...outputIds])
+      renderChrome()
+      return { ok: true, operationId, result, outputIds }
+    } catch (error) {
+      const detail = String(error?.message || error)
+      state.error = detail
+      await onFailure?.({ operationId, pending, error, detail })
+      await discardFailedPendingOperation(operationId)
+      return { ok: false, operationId, error, detail, outputIds: [] }
+    } finally {
+      endActiveOperation(activeOperation)
+      await onSettled?.({ operationId })
+      renderChrome()
+    }
+  }
+
+  return {
+    runTaskPipeline,
+  }
+}
+
+export { taskResultIds }

package/dist/canvas-public/elements/types.js

@@ -0,0 +1,21 @@
+import {
+  isCanvasPanelElement,
+  isGenerationInputUiElement,
+  isVideoElement,
+} from './registry.js'
+
+export function isVideoItem(item) {
+  return isVideoElement(item)
+}
+
+export function isPending(item) {
+  return item && item.type === 'pending'
+}
+
+export function isInteractiveCanvasUi(item) {
+  return isCanvasPanelElement(item)
+}
+
+export function isGenerationInputUi(item) {
+  return isGenerationInputUiElement(item)
+}

package/dist/canvas-public/elements/ui.js

@@ -0,0 +1,14 @@
+import { uiDefinitionFor } from './registry.js'
+
+export function mountUiElement(element, item, { mountFeature, appendResizeHandle }) {
+  const resize = uiDefinitionFor(item)
+  if (!mountFeature || !resize) return false
+
+  mountFeature(element, item)
+  appendResizeHandle(element, {
+    itemId: item.id,
+    minWidth: resize.minWidth,
+    minHeight: resize.minHeight,
+  })
+  return true
+}