evomeme 0.1.7-beta.1 → 0.1.7-beta.5

package/dist/canvas-public/app.js

@@ -1,9 +1,10 @@
-import { suggestSheetGrid } from './sequence-sheet.js'
-
-const DEFAULT_W = 220
+const IMAGE_BASE_SIZE = 220
+const DEFAULT_W = IMAGE_BASE_SIZE
 const GEN_DIALOG_W = 268
 const VIDEO_DIALOG_W = 288
+const FRAME_EDITOR_W = 780
 const GENERATOR_DIALOG_DRAG_OFFSET_Y = 18
+const MIN_MEDIA_RESIZE_SIDE = 48
 
 const state = {
   project: null,
@@ -11,13 +12,13 @@ const state = {
   meta: null,
   images: [],
   layoutItems: [],
+  layoutRevision: 0,
   selectedIds: new Set(),
-  editingSeqId: null,
   genDialogs: {}, // id -> image dialog state
   videoDialogs: {}, // id -> video dialog state
   fileInputDialogId: null,
   mediaInputDialogId: null,
-  busy: false,
+  activeOperations: new Set(),
   deleting: false,
   refreshing: false,
   externalSyncPending: false,
@@ -33,15 +34,42 @@ const state = {
   smartSplitAnchor: 'center',
   manualSplitImageId: null,
   frameExtractVideoId: null,
-  seqSheetId: null,
-  videoTrimId: null,
+  framePreviewImageId: null,
+  frameEditorSourceImageId: null,
   videoCycleId: null,
   videoCycleAbort: null,
-  videoTrim: { duration: 0, start: 0, end: 0, drag: null, uiTime: null, scrubbing: false },
-  playback: {}, // seqId -> { index, acc }
+  frameSheetPlayback: {}, // canvas item id -> { index, acc }
   imageDims: {}, // id -> { w, h } | { loading: true }
 }
 
+function hasActiveOperations() {
+  return state.activeOperations.size > 0
+}
+
+function createCanvasClientId(prefix) {
+  return `${prefix}_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 10)}`
+}
+
+function beginActiveOperation(kind) {
+  const token = createCanvasClientId(kind || 'canvas')
+  state.activeOperations.add(token)
+  return token
+}
+
+function endActiveOperation(token) {
+  if (token) state.activeOperations.delete(token)
+  if (!hasActiveOperations() && state.externalSyncPending && !shouldDeferExternalSync()) {
+    setTimeout(() => syncExternalChanges(), 0)
+  }
+}
+
+let layoutSaveQueue = Promise.resolve()
+let layoutSaveSequence = 0
+let layoutSaveEpoch = 0
+let layoutPendingSaveCount = 0
+let layoutNextExpectedRevision = 0
+let imageSizeSaveTimer = null
+
 const els = {
   welcome: document.getElementById('welcome'),
   welcomeOpenBtn: document.getElementById('welcome-open-btn'),
@@ -102,6 +130,24 @@ const els = {
   frameExtractConfirm: document.getElementById('frame-extract-confirm'),
   frameExtractCount: document.getElementById('frame-extract-count'),
   frameExtractStatus: document.getElementById('frame-extract-status'),
+  framePreviewModal: document.getElementById('frame-preview-modal'),
+  framePreviewClose: document.getElementById('frame-preview-close'),
+  framePreviewCancel: document.getElementById('frame-preview-cancel'),
+  framePreviewConfirm: document.getElementById('frame-preview-confirm'),
+  framePreviewRows: document.getElementById('frame-preview-rows'),
+  framePreviewColumns: document.getElementById('frame-preview-columns'),
+  framePreviewFps: document.getElementById('frame-preview-fps'),
+  framePreviewInfo: document.getElementById('frame-preview-info'),
+  framePreviewGrid: document.getElementById('frame-preview-grid'),
+  framePreviewStatus: document.getElementById('frame-preview-status'),
+  frameEditorSplitModal: document.getElementById('frame-editor-split-modal'),
+  frameEditorSplitClose: document.getElementById('frame-editor-split-close'),
+  frameEditorSplitCancel: document.getElementById('frame-editor-split-cancel'),
+  frameEditorSplitConfirm: document.getElementById('frame-editor-split-confirm'),
+  frameEditorSplitRows: document.getElementById('frame-editor-split-rows'),
+  frameEditorSplitColumns: document.getElementById('frame-editor-split-columns'),
+  frameEditorSplitInfo: document.getElementById('frame-editor-split-info'),
+  frameEditorSplitStatus: document.getElementById('frame-editor-split-status'),
   videoCycleModal: document.getElementById('video-cycle-modal'),
   videoCycleClose: document.getElementById('video-cycle-close'),
   videoCycleCancel: document.getElementById('video-cycle-cancel'),
@@ -109,41 +155,6 @@ const els = {
   videoCycleThreshold: document.getElementById('video-cycle-threshold'),
   videoCycleMinGap: document.getElementById('video-cycle-min-gap'),
   videoCycleStatus: document.getElementById('video-cycle-status'),
-  seqSheetModal: document.getElementById('seq-sheet-modal'),
-  seqSheetClose: document.getElementById('seq-sheet-close'),
-  seqSheetCancel: document.getElementById('seq-sheet-cancel'),
-  seqSheetConfirm: document.getElementById('seq-sheet-confirm'),
-  seqSheetRows: document.getElementById('seq-sheet-rows'),
-  seqSheetCols: document.getElementById('seq-sheet-cols'),
-  seqSheetFrameInfo: document.getElementById('seq-sheet-frame-info'),
-  seqSheetPreview: document.getElementById('seq-sheet-preview'),
-  seqSheetStatus: document.getElementById('seq-sheet-status'),
-  videoTrimModal: document.getElementById('video-trim-modal'),
-  videoTrimClose: document.getElementById('video-trim-close'),
-  videoTrimCancel: document.getElementById('video-trim-cancel'),
-  videoTrimConfirm: document.getElementById('video-trim-confirm'),
-  videoTrimPreview: document.getElementById('video-trim-preview'),
-  videoTrimTimeline: document.getElementById('video-trim-timeline'),
-  videoTrimRange: document.getElementById('video-trim-range'),
-  videoTrimTrack: document.getElementById('video-trim-track'),
-  videoTrimScrub: document.getElementById('video-trim-scrub'),
-  videoTrimPlay: document.getElementById('video-trim-play'),
-  videoTrimNowLabel: document.getElementById('video-trim-now-label'),
-  videoTrimTotalLabel: document.getElementById('video-trim-total-label'),
-  videoTrimHandleStart: document.getElementById('video-trim-handle-start'),
-  videoTrimHandleEnd: document.getElementById('video-trim-handle-end'),
-  videoTrimStartLabel: document.getElementById('video-trim-start-label'),
-  videoTrimEndLabel: document.getElementById('video-trim-end-label'),
-  videoTrimDurLabel: document.getElementById('video-trim-dur-label'),
-  videoTrimStatus: document.getElementById('video-trim-status'),
-  seqModal: document.getElementById('seq-modal'),
-  seqPanelTitle: document.getElementById('seq-panel-title'),
-  seqPanelClose: document.getElementById('seq-panel-close'),
-  seqPanelDone: document.getElementById('seq-panel-done'),
-  seqFps: document.getElementById('seq-fps'),
-  seqFpsVal: document.getElementById('seq-fps-val'),
-  seqLoop: document.getElementById('seq-loop'),
-  seqFrames: document.getElementById('seq-frames'),
   marquee: document.getElementById('marquee'),
 }
 
@@ -209,10 +220,6 @@ function transparentBackgroundWarning(dialogState) {
     : TRANSPARENT_BACKGROUND_REFERENCE_ERROR
 }
 
-function isSequence(item) {
-  return item && item.type === 'sequence' && Array.isArray(item.frames)
-}
-
 function isGenDialog(item) {
   return item && item.type === 'gen_dialog'
 }
@@ -249,11 +256,22 @@ function parseSizeAspect(sizeStr) {
   return { w, h }
 }
 
+function imageDisplaySize(pixelWidth, pixelHeight) {
+  const width = Number(pixelWidth)
+  const height = Number(pixelHeight)
+  if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) {
+    return { width: IMAGE_BASE_SIZE, height: IMAGE_BASE_SIZE }
+  }
+  const scale = IMAGE_BASE_SIZE / Math.min(width, height)
+  return {
+    width: Math.max(1, Math.round(width * scale)),
+    height: Math.max(1, Math.round(height * scale)),
+  }
+}
+
 function pendingDisplaySize(sizeStr) {
   const { w, h } = parseSizeAspect(sizeStr)
-  const width = DEFAULT_W
-  const height = Math.max(120, Math.round((width * h) / w))
-  return { width, height }
+  return imageDisplaySize(w, h)
 }
 
 function videoDisplaySize(ratio) {
@@ -311,7 +329,7 @@ function ensureVideoDialogState(id) {
 
 function createGeneratorDialog(kind, position) {
   const isVideo = kind === 'video'
-  const id = `${isVideo ? 'videodialog' : 'gendialog'}_${Date.now().toString(36)}`
+  const id = createCanvasClientId(isVideo ? 'videodialog' : 'gendialog')
   const item = {
     id,
     type: isVideo ? 'video_dialog' : 'gen_dialog',
@@ -363,24 +381,50 @@ function ensureImageDims(id) {
   const img = new Image()
   img.onload = () => {
     state.imageDims[id] = { w: img.naturalWidth, h: img.naturalHeight }
-    if (state.selectedIds.has(id) || selectedSequenceContains(id)) {
+    if (state.selectedIds.has(id)) {
       renderInspector()
     }
   }
   img.onerror = () => {
     state.imageDims[id] = { w: 0, h: 0 }
-    if (state.selectedIds.has(id) || selectedSequenceContains(id)) {
+    if (state.selectedIds.has(id)) {
       renderInspector()
     }
   }
   img.src = imageUrl(id)
 }
 
-function selectedSequenceContains(frameId) {
-  if (state.selectedIds.size !== 1) return false
-  const id = [...state.selectedIds][0]
-  const item = state.layoutItems.find((it) => it.id === id)
-  return isSequence(item) && item.frames.includes(frameId)
+function scheduleImageSizeSave() {
+  clearTimeout(imageSizeSaveTimer)
+  imageSizeSaveTimer = setTimeout(() => {
+    imageSizeSaveTimer = null
+    saveLayout(state.layoutItems).catch((error) => {
+      console.warn('save image canvas size failed', error)
+    })
+  }, 120)
+}
+
+function applyImageDisplaySize(id, pixelWidth, pixelHeight) {
+  const item = state.layoutItems.find((candidate) => candidate.id === id)
+  if (
+    !item ||
+    item.manualSize === true ||
+    (item.layer && typeof item.layer === 'object') ||
+    isPending(item) ||
+    isGenDialog(item) ||
+    isVideoDialog(item) ||
+    isFrameEditor(item)
+  ) {
+    return
+  }
+  const display = imageDisplaySize(pixelWidth, pixelHeight)
+  if (Number(item.width) === display.width && Number(item.height) === display.height) return
+  item.width = display.width
+  item.height = display.height
+  const nodeElement = findNodeEl(id)
+  if (nodeElement) nodeElement.style.width = `${display.width}px`
+  requestDependencyEdgeUpdate()
+  scheduleImageSizeSave()
 }
 
 function getSelectedItem(id) {
@@ -412,7 +456,7 @@ function appendKv(parent, rows) {
 function isPlainImageItem(item) {
   if (
     !item ||
-    isSequence(item) ||
+    isFrameEditor(item) ||
     isGenDialog(item) ||
     isVideoDialog(item) ||
     isPending(item) ||
@@ -423,6 +467,153 @@ function isPlainImageItem(item) {
   return state.images.some((image) => image.id === item.id && image.kind === 'image')
 }
 
+function isFrameEditor(item) {
+  return item && item.type === 'frame_editor'
+}
+
+function normalizeFramePreviewConfig(value) {
+  if (!value || typeof value !== 'object') return null
+  const rows = Math.round(Number(value.rows))
+  const columns = Math.round(Number(value.columns))
+  const frameCount = Math.round(Number(value.frameCount))
+  const fps = Number(value.fps)
+  if (
+    !Number.isFinite(rows) ||
+    !Number.isFinite(columns) ||
+    !Number.isFinite(frameCount) ||
+    !Number.isFinite(fps) ||
+    rows < 1 ||
+    rows > 64 ||
+    columns < 1 ||
+    columns > 64 ||
+    (rows === 1 && columns === 1) ||
+    frameCount < 1 ||
+    frameCount > rows * columns ||
+    fps <= 0
+  ) {
+    return null
+  }
+  return { enabled: value.enabled === true, rows, columns, frameCount, fps }
+}
+
+function sourceFramePreviewConfig(item) {
+  const provenance = item?.provenance
+  const metadata = provenance?.metadata
+  if (metadata && typeof metadata === 'object') {
+    const generated = normalizeFramePreviewConfig({
+      enabled: false,
+      rows: metadata.rows,
+      columns: metadata.columns,
+      frameCount: metadata.frameCount,
+      fps: Number(metadata.fps) || Number(metadata.frameCount) || 8,
+    })
+    if (
+      generated &&
+      (metadata.kind === 'frame_sheet' || provenance.operation === 'video_frame_extract')
+    ) {
+      return generated
+    }
+  }
+
+  return null
+}
+
+function suggestedFramePreviewConfig(item) {
+  const saved = normalizeFramePreviewConfig(item?.framePreview)
+  if (saved) return saved
+  const generated = sourceFramePreviewConfig(item)
+  if (generated) return generated
+
+  return { enabled: false, rows: 2, columns: 2, frameCount: 4, fps: 8 }
+}
+
+function frameSheetPreviewMeta(item) {
+  const config = normalizeFramePreviewConfig(item?.framePreview)
+  if (!config?.enabled) return null
+
+  const metadata = item?.provenance?.metadata
+  const cellWidth = Math.round(Number(metadata?.cellWidth))
+  const cellHeight = Math.round(Number(metadata?.cellHeight))
+  return {
+    ...config,
+    cellWidth: cellWidth > 0 ? cellWidth : null,
+    cellHeight: cellHeight > 0 ? cellHeight : null,
+  }
+}
+
+function applyFrameSheetPreviewFrame(preview, meta, index) {
+  const image = preview?.querySelector('img[data-role="frame-sheet-image"]')
+  if (!image) return
+  const frameIndex = Math.max(0, Math.min(meta.frameCount - 1, index % meta.frameCount))
+  const row = Math.floor(frameIndex / meta.columns)
+  const column = frameIndex % meta.columns
+  image.style.transform = `translate(${-100 * column / meta.columns}%, ${-100 * row / meta.rows}%)`
+}
+
+function normalizeFrameEditorFrame(value, sourceRows, sourceColumns) {
+  if (!value || typeof value !== 'object') return null
+  if (value.kind === 'source_cell') {
+    const index = Math.round(Number(value.index))
+    if (!Number.isFinite(index) || index < 0 || index >= sourceRows * sourceColumns) return null
+    return { kind: 'source_cell', index }
+  }
+  if (value.kind === 'asset') {
+    const assetId = String(value.assetId || value.asset_id || '').trim()
+    return assetId ? { kind: 'asset', assetId } : null
+  }
+  return null
+}
+
+function normalizeFrameEditor(item) {
+  if (!isFrameEditor(item)) return null
+  const sourceId = String(item.sourceId || '').trim()
+  const sourceRows = Math.round(Number(item.sourceRows))
+  const sourceColumns = Math.round(Number(item.sourceColumns))
+  const rows = Math.round(Number(item.rows))
+  const columns = Math.round(Number(item.columns))
+  const fps = Number(item.fps)
+  if (
+    !sourceId ||
+    !Number.isFinite(sourceRows) ||
+    !Number.isFinite(sourceColumns) ||
+    !Number.isFinite(rows) ||
+    !Number.isFinite(columns) ||
+    !Number.isFinite(fps) ||
+    sourceRows < 1 ||
+    sourceRows > 64 ||
+    sourceColumns < 1 ||
+    sourceColumns > 64 ||
+    rows < 1 ||
+    rows > 64 ||
+    columns < 1 ||
+    columns > 64 ||
+    fps <= 0
+  ) {
+    return null
+  }
+  const frames = (Array.isArray(item.frames) ? item.frames : [])
+    .map((frame) => normalizeFrameEditorFrame(frame, sourceRows, sourceColumns))
+    .filter(Boolean)
+    .slice(0, rows * columns)
+  return { sourceId, sourceRows, sourceColumns, rows, columns, fps, frames }
+}
+
+function frameEditorWidth(value) {
+  const width = Number(value)
+  return Number.isFinite(width) ? Math.max(FRAME_EDITOR_W, width) : FRAME_EDITOR_W
+}
+
+function frameEditorParentIds(item) {
+  const editor = normalizeFrameEditor(item)
+  if (!editor) return []
+  return [
+    editor.sourceId,
+    ...editor.frames
+      .filter((frame) => frame.kind === 'asset')
+      .map((frame) => frame.assetId),
+  ].filter((id, index, ids) => id && ids.indexOf(id) === index)
+}
+
 function resolveTosUrl(item) {
   const value =
     item?.provenance?.assetUrl ||
@@ -553,7 +744,7 @@ function normalizeOrigin(origin) {
   const parentId = origin.parentId || origin.sourceId || null
   if (!parentId && kind !== 'ai_generate') return null
 
-  if (kind === 'video_trim' || kind === 'video_cycle') {
+  if (kind === 'video_cycle') {
     const start = Number(origin.start)
     const end = Number(origin.end)
     if (!Number.isFinite(start) || !Number.isFinite(end)) return null
@@ -570,14 +761,6 @@ function normalizeOrigin(origin) {
           : null,
     }
   }
-  if (kind === 'video_sequence') {
-    return {
-      kind,
-      parentId,
-      parentName: origin.parentName || null,
-      frameCount: Math.max(0, Math.round(Number(origin.frameCount) || 0)),
-    }
-  }
   if (kind === 'smart_split') {
     return {
       kind,
@@ -590,16 +773,6 @@ function normalizeOrigin(origin) {
       ),
     }
   }
-  if (kind === 'sequence_sheet') {
-    return {
-      kind,
-      parentId,
-      parentName: origin.parentName || null,
-      rows: Math.max(1, Math.round(Number(origin.rows) || 1)),
-      cols: Math.max(1, Math.round(Number(origin.cols) || 1)),
-      frameCount: Math.max(0, Math.round(Number(origin.frameCount) || 0)),
-    }
-  }
   return null
 }
 
@@ -607,21 +780,9 @@ function buildOrigin(kind, fields = {}) {
   return normalizeOrigin({ kind, ...fields })
 }
 
-/** 解析元素产生方式：优先 origin；旧序列仅有 sourceId 时做兼容。 */
 function resolveItemOrigin(item) {
   if (!item) return null
-  const origin = normalizeOrigin(item.origin)
-  if (origin) return origin
-  if (isSequence(item) && item.sourceId) {
-    const parentId = item.sourceId
-    const kind = String(parentId).startsWith('videos/') ? 'video_sequence' : 'smart_split'
-    return buildOrigin(kind, {
-      parentId,
-      parentName: imageName(parentId),
-      frameCount: Array.isArray(item.frames) ? item.frames.length : 0,
-    })
-  }
-  return null
+  return normalizeOrigin(item.origin)
 }
 
 function originParentLabel(origin) {
@@ -671,15 +832,6 @@ function appendOriginSection(section, item) {
   }
 
   const origin = resolveItemOrigin(item)
-  if (origin?.kind === 'video_trim') {
-    appendKv(section, [
-      ['方式', '视频裁剪'],
-      ['原素材', originParentLabel(origin)],
-      ['开始时间', formatOriginTime(origin.start)],
-      ['结束时间', formatOriginTime(origin.end)],
-    ])
-    return
-  }
   if (origin?.kind === 'video_cycle') {
     const rows = [
       ['方式', '智能周期提取'],
@@ -694,14 +846,6 @@ function appendOriginSection(section, item) {
     appendKv(section, rows)
     return
   }
-  if (origin?.kind === 'video_sequence') {
-    appendKv(section, [
-      ['方式', '视频序列帧'],
-      ['原视频', originParentLabel(origin)],
-      ['抽取帧数', String(origin.frameCount || item.frames?.length || 0)],
-    ])
-    return
-  }
   if (origin?.kind === 'smart_split') {
     appendKv(section, [
       ['方式', '智能切分'],
@@ -710,15 +854,6 @@ function appendOriginSection(section, item) {
     ])
     return
   }
-  if (origin?.kind === 'sequence_sheet') {
-    appendKv(section, [
-      ['方式', '序列拼成单图'],
-      ['原序列', originParentLabel(origin)],
-      ['排布', `${origin.rows} 行 × ${origin.cols} 列`],
-      ['帧数', String(origin.frameCount || 0)],
-    ])
-    return
-  }
 
   const gen = normalizeGenMeta(item.gen)
   if (gen && (gen.prompt || gen.model)) {
@@ -754,6 +889,7 @@ function appendOriginSection(section, item) {
 
 function attachSerializableMeta(out, item) {
   if (typeof item.name === 'string' && item.name) out.name = item.name
+  if (item.manualSize === true) out.manualSize = true
   const gen = normalizeGenMeta(item.gen)
   if (gen) out.gen = gen
   const origin = normalizeOrigin(item.origin)
@@ -761,30 +897,51 @@ function attachSerializableMeta(out, item) {
   if (item.provenance && typeof item.provenance === 'object') {
     out.provenance = item.provenance
   }
+  const framePreview = normalizeFramePreviewConfig(item.framePreview)
+  if (framePreview) out.framePreview = framePreview
   if (item.layer && typeof item.layer === 'object' && !Array.isArray(item.layer)) {
     out.layer = item.layer
   }
   return out
 }
 
+function attachCanvasIdentity(out, item) {
+  const assetId = item.assetId || (String(item.id || '').startsWith('assets/') ? item.id : '')
+  const operationId = item.operationId || (
+    isPending(item) || String(item.id || '').startsWith('job_') || String(item.id || '').startsWith('pending_')
+      ? item.id
+      : ''
+  )
+  out.nodeId = item.nodeId || (operationId
+    ? `node:${operationId}`
+    : assetId
+      ? `node:${assetId}`
+      : `node:${item.id}`)
+  if (assetId) out.assetId = assetId
+  if (operationId) out.operationId = operationId
+  return out
+}
+
 function serializeLayoutItem(item) {
-  if (isSequence(item)) {
-    const out = {
+  if (isFrameEditor(item)) {
+    const editor = normalizeFrameEditor(item)
+    return {
       id: item.id,
-      type: 'sequence',
-      name: item.name || '序列',
+      type: 'frame_editor',
+      name: item.name || '序列帧编辑',
       x: item.x,
       y: item.y,
-      width: item.width || DEFAULT_W,
+      width: frameEditorWidth(item.width),
       height: item.height ?? null,
-      frames: [...item.frames],
-      fps: Number(item.fps) > 0 ? Number(item.fps) : 8,
-      loop: item.loop !== false,
-      sourceId: item.sourceId || item.origin?.parentId || null,
+      sourceId: editor?.sourceId || item.sourceId,
+      sourceRows: editor?.sourceRows || item.sourceRows,
+      sourceColumns: editor?.sourceColumns || item.sourceColumns,
+      rows: editor?.rows || item.rows,
+      columns: editor?.columns || item.columns,
+      fps: editor?.fps || item.fps || 8,
+      frames: editor?.frames || [],
+      error: item.error || null,
     }
-    const origin = normalizeOrigin(item.origin)
-    if (origin) out.origin = origin
-    return out
   }
   if (isGenDialog(item)) {
     return {
@@ -995,21 +1152,23 @@ async function api(path, options) {
     const message = Array.isArray(detail)
       ? detail.map((d) => d.msg || JSON.stringify(d)).join('; ')
       : detail || data.message || res.statusText || '请求失败'
-    throw new Error(message)
+    const error = new Error(message)
+    error.status = res.status
+    error.data = data
+    throw error
   }
   return data
 }
 
 /** 画布只显示 layout 里的元素；磁盘上的孤儿文件不会自动冒出来 */
 function mergeLayout(_images, layoutItems) {
-  return (layoutItems || []).map((item) => {
-    if (isSequence(item)) {
+  return (layoutItems || []).filter((item) => item?.type !== 'sequence').map((item) => {
+    if (isFrameEditor(item)) {
       return {
         ...item,
-        type: 'sequence',
-        frames: [...(item.frames || [])],
-        fps: Number(item.fps) > 0 ? Number(item.fps) : 8,
-        loop: item.loop !== false,
+        type: 'frame_editor',
+        name: item.name || '序列帧编辑',
+        width: frameEditorWidth(item.width),
       }
     }
     if (isGenDialog(item)) {
@@ -1069,6 +1228,20 @@ function buildNodes() {
   const nodes = []
 
   state.layoutItems.forEach((item, index) => {
+    if (isFrameEditor(item)) {
+      const editor = normalizeFrameEditor(item)
+      if (!editor) return
+      nodes.push({
+        ...item,
+        ...editor,
+        type: 'frame_editor',
+        name: item.name || '序列帧编辑',
+        x: item.x ?? 60 + (index % 5) * 540,
+        y: item.y ?? 60 + Math.floor(index / 5) * 360,
+        width: frameEditorWidth(item.width),
+      })
+      return
+    }
     if (isGenDialog(item)) {
       nodes.push({
         ...item,
@@ -1124,25 +1297,6 @@ function buildNodes() {
       })
       return
     }
-    if (isSequence(item)) {
-      const frames = item.frames.filter((fid) => imageMap[fid] || fid)
-      if (!frames.length) return
-      const play = state.playback[item.id] || { index: 0 }
-      const frameId = frames[play.index % frames.length]
-      nodes.push({
-        ...item,
-        type: 'sequence',
-        frames,
-        url: imageUrl(frameId),
-        name: item.name || `序列 (${frames.length})`,
-        x: item.x ?? 60 + (index % 5) * 240,
-        y: item.y ?? 60 + Math.floor(index / 5) * 260,
-        width: item.width || DEFAULT_W,
-        frameCount: frames.length,
-        currentFrameId: frameId,
-      })
-      return
-    }
     const img = imageMap[item.id]
     if (!img) return
     nodes.push({
@@ -1158,18 +1312,55 @@ function buildNodes() {
   return nodes
 }
 
-async function saveLayout(items) {
-  const next = (items || state.layoutItems).map(serializeLayoutItem)
+function saveLayout(items) {
+  const next = (items || state.layoutItems).map((item) =>
+    attachCanvasIdentity(serializeLayoutItem(item), item),
+  )
+  const sequence = ++layoutSaveSequence
+  const epoch = layoutSaveEpoch
+  const expectedRevision = layoutPendingSaveCount === 0
+    ? state.layoutRevision
+    : layoutNextExpectedRevision
+  layoutNextExpectedRevision = expectedRevision + 1
+  layoutPendingSaveCount += 1
   state.layoutItems = next
-  try {
-    await api('/api/layout', {
-      method: 'PUT',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ items: next }),
-    })
-  } catch (err) {
-    console.warn('save layout failed', err)
-  }
+  const request = layoutSaveQueue.then(async () => {
+    try {
+      if (epoch !== layoutSaveEpoch) {
+        const staleError = new Error('画布已被其他任务更新，请重试刚才的操作。')
+        staleError.status = 409
+        throw staleError
+      }
+      const saved = await api('/api/layout', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ items: next, revision: expectedRevision }),
+      })
+      state.layoutRevision = Number(saved.revision) || state.layoutRevision
+      if (sequence === layoutSaveSequence && Array.isArray(saved.items)) {
+        state.layoutItems = mergeLayout(state.images, saved.items)
+      }
+      return saved
+    } catch (err) {
+      console.warn('save layout failed', err)
+      const firstFailureInEpoch = epoch === layoutSaveEpoch
+      if (firstFailureInEpoch) {
+        layoutSaveEpoch += 1
+      }
+      if (err?.status === 409 && firstFailureInEpoch) {
+        state.error = '画布已被其他任务更新，请重试刚才的操作。'
+        await reload().catch(() => undefined)
+      }
+      throw err
+    } finally {
+      layoutPendingSaveCount = Math.max(0, layoutPendingSaveCount - 1)
+      if (layoutPendingSaveCount === 0) {
+        layoutNextExpectedRevision = state.layoutRevision
+      }
+    }
+  })
+  layoutSaveQueue = request.catch(() => undefined)
+  return request
 }
 
 function applyCamera() {
@@ -1188,40 +1379,30 @@ function showCtxMenu(clientX, clientY, node) {
   state.ctxCanvasPoint = null
   const selectedIds = isSelected(node.id) ? [...state.selectedIds] : [node.id]
   const isMulti = selectedIds.length > 1
-  const canCombineSequence =
-    isMulti &&
-    selectedIds.every((id) =>
-      isPlainImageItem(state.layoutItems.find((item) => item.id === id)),
-    )
-  if (isMulti) {
+  if (isMulti || isFrameEditor(node)) {
     for (const button of els.ctxMenu.querySelectorAll('button[data-action]')) {
-      button.hidden = !(
-        button.dataset.action === 'delete' ||
-        (button.dataset.action === 'combine-sequence' && canCombineSequence)
-      )
+      button.hidden = button.dataset.action !== 'delete'
     }
   } else {
-    const isSeq = isSequence(node)
     const isDialog = isGenDialog(node) || isVideoDialog(node)
     const pending = isPending(node)
     const isVid = isVideoItem(node)
-    const isImage = !isSeq && !isDialog && !pending && !isVid
+    const isImage = !isDialog && !pending && !isVid
     els.ctxMenu.querySelector('[data-action="copy"]').hidden = pending || isDialog
     els.ctxMenu.querySelector('[data-action="paste"]').hidden = true
     els.ctxMenu.querySelector('[data-action="cutout"]').hidden = !isImage
     els.ctxMenu.querySelector('[data-action="interactive-edit"]').hidden = !isImage
     els.ctxMenu.querySelector('[data-action="layer-decomposition"]').hidden = !isImage
-    els.ctxMenu.querySelector('[data-action="video-trim"]').hidden = !isVid
     els.ctxMenu.querySelector('[data-action="video-cycle"]').hidden = !isVid
-    els.ctxMenu.querySelector('[data-action="video-to-sequence"]').hidden = !isVid
-    els.ctxMenu.querySelector('[data-action="smart-split"]').hidden =
-      isSeq || isDialog || pending || isVid
-    els.ctxMenu.querySelector('[data-action="manual-split"]').hidden =
-      isSeq || isDialog || pending || isVid
-    els.ctxMenu.querySelector('[data-action="edit-sequence"]').hidden = !isSeq
-    els.ctxMenu.querySelector('[data-action="sequence-to-sheet"]').hidden = !isSeq
-    els.ctxMenu.querySelector('[data-action="ungroup-sequence"]').hidden = !isSeq
-    els.ctxMenu.querySelector('[data-action="combine-sequence"]').hidden = true
+    els.ctxMenu.querySelector('[data-action="video-to-frame-sheet"]').hidden = !isVid
+    els.ctxMenu.querySelector('[data-action="smart-split"]').hidden = !isImage
+    els.ctxMenu.querySelector('[data-action="manual-split"]').hidden = !isImage
+    const framePreviewButton = els.ctxMenu.querySelector('[data-action="frame-sheet-preview"]')
+    framePreviewButton.hidden = !isImage
+    framePreviewButton.textContent = frameSheetPreviewMeta(node)
+      ? '停止序列帧预览'
+      : '序列帧预览'
+    els.ctxMenu.querySelector('[data-action="frame-sheet-edit"]').hidden = !isImage
     els.ctxMenu.querySelector('[data-action="delete"]').hidden = false
   }
   positionCtxMenu(clientX, clientY)
@@ -1509,7 +1690,7 @@ async function submitGenDialog(dialogId) {
     : undefined
   const references = [...ds.refs]
   const display = pendingDisplaySize(size)
-  const pendingId = `pending_${Date.now().toString(36)}`
+  const pendingId = createCanvasClientId('pending')
   const pendingItem = {
     id: pendingId,
     type: 'pending',
@@ -1535,6 +1716,7 @@ async function submitGenDialog(dialogId) {
   renderCanvas()
   renderChrome()
 
+  const activeOperation = beginActiveOperation('image-generation')
   try {
     const result = await api('/api/generate', {
       method: 'POST',
@@ -1550,25 +1732,7 @@ async function submitGenDialog(dialogId) {
       }),
     })
     // 占位节点替换为真实图片
-    state.layoutItems = state.layoutItems.map((it) =>
-      it.id === pendingId
-        ? {
-            id: result.id,
-            x: it.x,
-            y: it.y,
-            width: it.width,
-            height: it.height,
-            gen: buildImageGenMeta({
-              prompt: text,
-              model: result.model || model,
-              size: result.size || size,
-              references,
-            }),
-          }
-        : it,
-    )
     delete state.genDialogs[dialogId]
-    await saveLayout(state.layoutItems)
     await reload()
     setSelection([result.id])
     renderCanvas()
@@ -1581,10 +1745,12 @@ async function submitGenDialog(dialogId) {
       (it) => it.id !== pendingId && it.id !== dialogId,
     )
     delete state.genDialogs[dialogId]
-    await saveLayout(state.layoutItems)
+    await reload().catch(() => undefined)
     clearSelection()
     renderCanvas()
     renderChrome()
+  } finally {
+    endActiveOperation(activeOperation)
   }
 }
 
@@ -1811,7 +1977,7 @@ async function submitVideoGenDialog(dialogId) {
   const text = String(ds.prompt || '').trim()
   if (!text || ds.busy || !dialog) return
   const display = videoDisplaySize(ds.ratio || '16:9')
-  const pendingId = `pending_${Date.now().toString(36)}`
+  const pendingId = createCanvasClientId('pending')
   const references = ds.refs.map((r) => ({
     id: r.id,
     role: r.role,
@@ -1845,6 +2011,7 @@ async function submitVideoGenDialog(dialogId) {
   renderCanvas()
   renderChrome()
 
+  const activeOperation = beginActiveOperation('video-generation')
   try {
     const seedRaw = String(ds.seed ?? '').trim()
     const result = await api('/api/generate-video', {
@@ -1862,30 +2029,7 @@ async function submitVideoGenDialog(dialogId) {
         place: false,
       }),
     })
-    state.layoutItems = state.layoutItems.map((it) =>
-      it.id === pendingId
-        ? {
-            id: result.id,
-            type: 'video',
-            x: it.x,
-            y: it.y,
-            width: it.width,
-            height: null,
-            gen: buildVideoGenMeta({
-              prompt: text,
-              model: result.model || 'seedance',
-              ratio: result.ratio || ds.ratio,
-              duration: result.duration ?? ds.duration,
-              resolution: result.resolution || ds.resolution,
-              generateAudio: ds.generateAudio === true,
-              seed: seedRaw === '' ? null : Number(seedRaw),
-              references: ds.refs,
-            }),
-          }
-        : it,
-    )
     delete state.videoDialogs[dialogId]
-    await saveLayout(state.layoutItems)
     await reload()
     setSelection([result.id])
     renderCanvas()
@@ -1900,6 +2044,15 @@ async function submitVideoGenDialog(dialogId) {
       role: 'assistant',
       error: detail,
     })
+    await reload().catch(() => undefined)
+    state.layoutItems.push({
+      id: pendingId,
+      type: 'pending',
+      x: dialog.x,
+      y: dialog.y,
+      width: VIDEO_DIALOG_W,
+      height: null,
+    })
     state.layoutItems = state.layoutItems.map((it) =>
       it.id === pendingId
         ? {
@@ -1917,6 +2070,8 @@ async function submitVideoGenDialog(dialogId) {
     setSelection([dialogId])
     renderCanvas()
     renderChrome()
+  } finally {
+    endActiveOperation(activeOperation)
   }
 }
 
@@ -1985,6 +2140,9 @@ function dependencyParentIds(item) {
   if (isVideoDialog(item)) {
     for (const reference of ensureVideoDialogState(item.id).refs || []) add(reference.id)
   }
+  if (isFrameEditor(item)) {
+    for (const parentId of frameEditorParentIds(item)) add(parentId)
+  }
   if (isPending(item)) {
     for (const reference of item.references || item._refs || []) add(reference.id)
   }
@@ -1997,11 +2155,7 @@ function dependencyParentIds(item) {
 }
 
 function resolveVisibleDependencyId(parentId, visibleIds) {
-  if (visibleIds.has(parentId)) return parentId
-  const sequence = state.layoutItems.find(
-    (item) => isSequence(item) && item.frames.includes(parentId) && visibleIds.has(item.id),
-  )
-  return sequence?.id || null
+  return visibleIds.has(parentId) ? parentId : null
 }
 
 function dependencyNodeBox(id) {
@@ -2113,62 +2267,603 @@ function requestDependencyEdgeGeometryUpdate() {
   })
 }
 
-function renderCanvas() {
-  const nodes = buildNodes()
-  const alive = new Set(nodes.map((n) => n.id))
-  state.selectedIds = new Set([...state.selectedIds].filter((id) => alive.has(id)))
+function frameEditorLayoutItem(editorId) {
+  const item = state.layoutItems.find((candidate) => candidate.id === editorId)
+  return isFrameEditor(item) ? item : null
+}
 
-  els.world.innerHTML = ''
-  const dependencyLayer = createDependencyLayer()
-  els.world.appendChild(dependencyLayer)
-  for (let index = 0; index < nodes.length; index += 1) {
-    const node = nodes[index]
-    const el = document.createElement('div')
-    el.className = `canvas-node${isSelected(node.id) ? ' is-selected' : ''}${
-      isSequence(node) ? ' is-sequence' : ''
-    }${isGenDialog(node) || isVideoDialog(node) ? ' is-gen-dialog' : ''}${
-      isVideoDialog(node) ? ' is-video-dialog' : ''
-    }${isVideoItem(node) ? ' is-video' : ''}`
-    el.style.left = `${node.x}px`
-    el.style.top = `${node.y}px`
-    el.style.width = `${node.width}px`
-    el.style.zIndex = isSelected(node.id) ? String(1000 + index) : String(1 + index)
-    el.dataset.id = node.id
+async function commitFrameEditorChange(editorId) {
+  await saveLayout()
+  renderCanvas()
+  renderChrome()
+  setSelection([editorId])
+  syncSelectionClass()
+}
 
-    if (isGenDialog(node)) {
-      mountGenDialogNode(el, node)
-      el.addEventListener('pointerdown', (e) => onNodePointerDown(e, node))
-      el.addEventListener('contextmenu', (e) => {
-        e.preventDefault()
-        e.stopPropagation()
-        if (!isSelected(node.id)) setSelection([node.id])
-        state.ctxTargetId = node.id
-        syncSelectionClass()
-        renderChrome()
-        showCtxMenu(e.clientX, e.clientY, node)
-      })
-      els.world.appendChild(el)
-      continue
+function frameEditorThumbnail(editor, frame) {
+  const preview = document.createElement('div')
+  preview.className = 'frame-editor-thumb'
+  const image = document.createElement('img')
+  image.alt = '序列帧'
+  image.draggable = false
+  if (frame.kind === 'source_cell') {
+    preview.classList.add('is-source-cell')
+    image.src = imageUrl(editor.sourceId)
+    image.style.width = `${editor.sourceColumns * 100}%`
+    image.style.height = `${editor.sourceRows * 100}%`
+    const row = Math.floor(frame.index / editor.sourceColumns)
+    const column = frame.index % editor.sourceColumns
+    image.style.transform = `translate(${-100 * column / editor.sourceColumns}%, ${-100 * row / editor.sourceRows}%)`
+  } else {
+    image.src = imageUrl(frame.assetId)
+  }
+  preview.appendChild(image)
+  return preview
+}
+
+function applyFrameEditorPreviewFrame(preview, editor, index) {
+  if (!preview) return
+  const frameCount = editor.frames.length
+  const counter = preview
+    .closest('.frame-editor-preview')
+    ?.querySelector('[data-role="frame-editor-preview-counter"]')
+  if (!frameCount) {
+    const empty = document.createElement('span')
+    empty.className = 'frame-editor-preview-empty'
+    empty.textContent = '暂无帧'
+    preview.replaceChildren(empty)
+    if (counter) counter.textContent = '0 / 0'
+    return
+  }
+
+  const frameIndex = Math.max(0, index % frameCount)
+  const frame = frameEditorThumbnail(editor, editor.frames[frameIndex])
+  frame.classList.add('frame-editor-preview-frame')
+  preview.replaceChildren(frame)
+  if (counter) counter.textContent = `${frameIndex + 1} / ${frameCount}`
+}
+
+function fitFrameEditorPreviewStage(preview, editor) {
+  const source = new Image()
+  source.onload = () => {
+    if (!source.naturalWidth || !source.naturalHeight) return
+    const ratio =
+      (source.naturalWidth * editor.sourceRows) /
+      (source.naturalHeight * editor.sourceColumns)
+    if (!Number.isFinite(ratio) || ratio <= 0) return
+    preview.style.aspectRatio = String(ratio)
+    preview.style.width = `${Math.min(1, ratio) * 100}%`
+  }
+  source.src = imageUrl(editor.sourceId)
+}
+
+async function deleteFrameEditorFrame(editorId, frameIndex) {
+  const item = frameEditorLayoutItem(editorId)
+  const editor = normalizeFrameEditor(item)
+  if (!item || !editor || frameIndex < 0 || frameIndex >= editor.frames.length) return
+  item.frames = editor.frames.filter((_, index) => index !== frameIndex)
+  item.error = null
+  await commitFrameEditorChange(editorId)
+}
+
+async function updateFrameEditorDimension(editorId, dimension, rawValue) {
+  const item = frameEditorLayoutItem(editorId)
+  const editor = normalizeFrameEditor(item)
+  if (!item || !editor) return
+  const value = Number(rawValue)
+  if (!Number.isInteger(value) || value < 1 || value > 64) {
+    item.error = `${dimension === 'row' ? '行数' : '列数'}必须是 1–64 的整数`
+    renderCanvas()
+    return
+  }
+  if (dimension === 'row') {
+    item.rows = value
+  } else {
+    item.columns = value
+  }
+  const capacity = Number(item.rows) * Number(item.columns)
+  if (editor.frames.length > capacity) item.frames = editor.frames.slice(0, capacity)
+  item.error = null
+  await commitFrameEditorChange(editorId)
+}
+
+async function updateFrameEditorFps(editorId, rawValue) {
+  const item = frameEditorLayoutItem(editorId)
+  const fps = Number(rawValue)
+  if (!item || !Number.isFinite(fps) || fps <= 0) {
+    if (item) {
+      item.error = 'FPS 必须大于 0'
+      renderCanvas()
     }
+    return
+  }
+  item.fps = fps
+  item.error = null
+  await saveLayout()
+}
 
-    if (isVideoDialog(node)) {
-      mountVideoGenDialogNode(el, node)
-      el.addEventListener('pointerdown', (e) => onNodePointerDown(e, node))
-      el.addEventListener('contextmenu', (e) => {
-        e.preventDefault()
-        e.stopPropagation()
-        if (!isSelected(node.id)) setSelection([node.id])
-        state.ctxTargetId = node.id
-        syncSelectionClass()
-        renderChrome()
-        showCtxMenu(e.clientX, e.clientY, node)
-      })
-      els.world.appendChild(el)
-      continue
+async function dropOnFrameEditor(editorId, targetIndex, dataTransfer) {
+  const item = frameEditorLayoutItem(editorId)
+  const editor = normalizeFrameEditor(item)
+  if (!item || !editor) return
+
+  const internalRaw = dataTransfer.getData('application/x-frame-editor-frame')
+  if (internalRaw) {
+    try {
+      const internal = JSON.parse(internalRaw)
+      const fromIndex = Number(internal.index)
+      if (
+        internal.editorId !== editorId ||
+        !Number.isInteger(fromIndex) ||
+        fromIndex < 0 ||
+        fromIndex >= editor.frames.length
+      ) return
+      const frames = [...editor.frames]
+      if (targetIndex >= frames.length) {
+        const [moved] = frames.splice(fromIndex, 1)
+        frames.push(moved)
+      } else if (targetIndex !== fromIndex) {
+        const targetFrame = frames[targetIndex]
+        frames[targetIndex] = frames[fromIndex]
+        frames[fromIndex] = targetFrame
+      }
+      item.frames = frames
+      item.error = null
+      await commitFrameEditorChange(editorId)
+    } catch {
+      /* ignore malformed internal drag data */
     }
+    return
+  }
 
-    if (isPending(node)) {
-      el.classList.add('is-pending')
+  let raw = dataTransfer.getData('application/x-canvas-image')
+  if (!raw) {
+    const id = dataTransfer.getData('text/plain')
+    if (id && id.includes('/')) raw = JSON.stringify({ id })
+  }
+  if (!raw) return
+  try {
+    const reference = JSON.parse(raw)
+    const assetId = String(reference.id || '').trim()
+    const image = state.images.find((candidate) => candidate.id === assetId)
+    if (!image || image.kind !== 'image') {
+      item.error = '只能加入图片素材'
+      renderCanvas()
+      return
+    }
+    if (editor.frames.length >= editor.rows * editor.columns) {
+      if (editor.rows < 64) item.rows = editor.rows + 1
+      else if (editor.columns < 64) item.columns = editor.columns + 1
+      else {
+        item.error = '网格已满，无法继续添加图片'
+        renderCanvas()
+        return
+      }
+    }
+    const frames = [...editor.frames]
+    frames.splice(Math.min(targetIndex, frames.length), 0, { kind: 'asset', assetId })
+    item.frames = frames
+    item.error = null
+    await commitFrameEditorChange(editorId)
+  } catch {
+    item.error = '无法读取拖入的图片'
+    renderCanvas()
+  }
+}
+
+async function saveFrameEditorAsSheet(editorId) {
+  if (hasActiveOperations()) return
+  const item = frameEditorLayoutItem(editorId)
+  const editor = normalizeFrameEditor(item)
+  if (!item || !editor) return
+  if (editor.frames.length < 2 || editor.rows * editor.columns < 2) {
+    item.error = '至少需要两帧和两个格子才能保存序列帧'
+    renderCanvas()
+    return
+  }
+
+  const activeOperation = beginActiveOperation('frame-sheet-save')
+  state.error = ''
+  item.error = null
+  const editorSnapshot = serializeLayoutItem(item)
+  const operationId = createCanvasClientId('pending_frame_sheet')
+  const parentIds = frameEditorParentIds(item)
+  try {
+    state.layoutItems = state.layoutItems.map((candidate) =>
+      candidate.id === editorId
+        ? {
+            id: operationId,
+            type: 'pending',
+            name: '序列帧保存中',
+            x: item.x,
+            y: item.y,
+            width: frameEditorWidth(item.width),
+            height: item.height ?? null,
+            media: 'image',
+            references: parentIds.map((id) => ({ id, role: 'source' })),
+          }
+        : candidate,
+    )
+    setSelection([operationId])
+    await saveLayout()
+    renderCanvas()
+    renderChrome()
+    const result = await api('/api/frame-sheet/edit', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        source_id: editor.sourceId,
+        source_rows: editor.sourceRows,
+        source_columns: editor.sourceColumns,
+        rows: editor.rows,
+        columns: editor.columns,
+        fps: editor.fps,
+        frames: editor.frames.map((frame) =>
+          frame.kind === 'source_cell'
+            ? { kind: 'source_cell', index: frame.index }
+            : { kind: 'asset', asset_id: frame.assetId },
+        ),
+        client_operation_id: operationId,
+      }),
+    })
+    await reload()
+    if (result.id) setSelection([result.id])
+    renderCanvas()
+    renderChrome()
+  } catch (err) {
+    state.error = String(err.message || err)
+    await reload().catch(() => undefined)
+    state.layoutItems = [
+      ...state.layoutItems.filter(
+        (candidate) => candidate.id !== operationId && candidate.id !== editorId,
+      ),
+      editorSnapshot,
+    ]
+    await saveLayout()
+    setSelection([editorId])
+    renderCanvas()
+    renderChrome()
+  } finally {
+    endActiveOperation(activeOperation)
+    renderChrome()
+  }
+}
+
+function mountFrameEditorNode(container, node) {
+  const editor = normalizeFrameEditor(node)
+  if (!editor) return
+  container.classList.add('is-frame-editor')
+
+  const head = document.createElement('div')
+  head.className = 'frame-editor-head'
+  const title = document.createElement('strong')
+  title.textContent = node.name || '序列帧编辑'
+  const summary = document.createElement('span')
+  summary.textContent = `${editor.frames.length} 帧 · ${editor.rows}×${editor.columns}`
+  head.append(title, summary)
+
+  const toolbar = document.createElement('div')
+  toolbar.className = 'frame-editor-toolbar frame-editor-interactive'
+  const rowLabel = document.createElement('label')
+  rowLabel.className = 'frame-editor-dimension-field'
+  rowLabel.textContent = '行数'
+  const rowInput = document.createElement('input')
+  rowInput.type = 'number'
+  rowInput.min = '1'
+  rowInput.max = '64'
+  rowInput.step = '1'
+  rowInput.value = String(editor.rows)
+  rowInput.disabled = hasActiveOperations()
+  rowInput.dataset.role = 'frame-editor-rows'
+  rowInput.addEventListener('change', () =>
+    updateFrameEditorDimension(node.id, 'row', rowInput.value),
+  )
+  rowLabel.appendChild(rowInput)
+  const columnLabel = document.createElement('label')
+  columnLabel.className = 'frame-editor-dimension-field'
+  columnLabel.textContent = '列数'
+  const columnInput = document.createElement('input')
+  columnInput.type = 'number'
+  columnInput.min = '1'
+  columnInput.max = '64'
+  columnInput.step = '1'
+  columnInput.value = String(editor.columns)
+  columnInput.disabled = hasActiveOperations()
+  columnInput.dataset.role = 'frame-editor-columns'
+  columnInput.addEventListener('change', () =>
+    updateFrameEditorDimension(node.id, 'column', columnInput.value),
+  )
+  columnLabel.appendChild(columnInput)
+  const fpsLabel = document.createElement('label')
+  fpsLabel.className = 'frame-editor-fps-field'
+  fpsLabel.textContent = 'FPS'
+  const fpsInput = document.createElement('input')
+  fpsInput.type = 'number'
+  fpsInput.min = '0.000001'
+  fpsInput.step = 'any'
+  fpsInput.value = String(editor.fps)
+  fpsInput.disabled = hasActiveOperations()
+  fpsInput.addEventListener('change', () => updateFrameEditorFps(node.id, fpsInput.value))
+  fpsLabel.appendChild(fpsInput)
+  toolbar.append(rowLabel, columnLabel, fpsLabel)
+
+  const scroll = document.createElement('div')
+  scroll.className = 'frame-editor-grid-scroll frame-editor-interactive'
+  const grid = document.createElement('div')
+  grid.className = 'frame-editor-grid'
+  grid.dataset.accept = 'image'
+  grid.style.gridTemplateColumns = `repeat(${editor.columns}, 72px)`
+  const capacity = editor.rows * editor.columns
+  for (let index = 0; index < capacity; index += 1) {
+    const cell = document.createElement('div')
+    const frame = editor.frames[index]
+    cell.className = `frame-editor-cell${frame ? ' has-frame' : ' is-empty'}`
+    cell.dataset.index = String(index)
+    cell.addEventListener('dragover', (event) => {
+      event.preventDefault()
+      event.stopPropagation()
+      event.dataTransfer.dropEffect = Array.from(event.dataTransfer.types).includes('application/x-frame-editor-frame')
+        ? 'move'
+        : 'copy'
+      cell.classList.add('is-drop')
+    })
+    cell.addEventListener('dragleave', () => cell.classList.remove('is-drop'))
+    cell.addEventListener('drop', async (event) => {
+      event.preventDefault()
+      event.stopPropagation()
+      interaction.htmlDrag = false
+      clearRefDragHighlight()
+      await dropOnFrameEditor(node.id, index, event.dataTransfer)
+    })
+    if (frame) {
+    cell.draggable = !hasActiveOperations()
+      cell.appendChild(frameEditorThumbnail(editor, frame))
+      const order = document.createElement('span')
+      order.className = 'frame-editor-order'
+      order.textContent = String(index + 1)
+      const remove = document.createElement('button')
+      remove.type = 'button'
+      remove.className = 'frame-editor-remove'
+      remove.textContent = '×'
+      remove.title = '删除这一帧'
+    remove.disabled = hasActiveOperations()
+      remove.addEventListener('click', (event) => {
+        event.stopPropagation()
+        deleteFrameEditorFrame(node.id, index)
+      })
+      cell.append(order, remove)
+      cell.addEventListener('dragstart', (event) => {
+        event.stopPropagation()
+        event.dataTransfer.setData(
+          'application/x-frame-editor-frame',
+          JSON.stringify({ editorId: node.id, index }),
+        )
+        event.dataTransfer.effectAllowed = 'move'
+        interaction.htmlDrag = true
+        cell.classList.add('is-dragging')
+      })
+      cell.addEventListener('dragend', () => {
+        interaction.htmlDrag = false
+        cell.classList.remove('is-dragging')
+      })
+    } else {
+      const empty = document.createElement('span')
+      empty.className = 'frame-editor-empty-label'
+      empty.textContent = '拖入'
+      cell.appendChild(empty)
+    }
+    grid.appendChild(cell)
+  }
+  scroll.appendChild(grid)
+
+  const workspace = document.createElement('div')
+  workspace.className = 'frame-editor-workspace frame-editor-interactive'
+  const previewPanel = document.createElement('aside')
+  previewPanel.className = 'frame-editor-preview'
+  const previewHead = document.createElement('div')
+  previewHead.className = 'frame-editor-preview-head'
+  const previewTitle = document.createElement('strong')
+  previewTitle.textContent = '实时预览'
+  const previewCounter = document.createElement('span')
+  previewCounter.dataset.role = 'frame-editor-preview-counter'
+  previewHead.append(previewTitle, previewCounter)
+  const previewViewport = document.createElement('div')
+  previewViewport.className = 'frame-editor-preview-viewport'
+  const previewStage = document.createElement('div')
+  previewStage.className = 'frame-editor-preview-stage'
+  previewStage.dataset.editorId = node.id
+  previewViewport.appendChild(previewStage)
+  const previewHint = document.createElement('span')
+  previewHint.className = 'frame-editor-preview-hint'
+  previewHint.textContent = '按照当前顺序循环播放'
+  previewPanel.append(previewHead, previewViewport, previewHint)
+  workspace.append(scroll, previewPanel)
+
+  const play = state.frameSheetPlayback[node.id] || { index: 0, acc: 0 }
+  if (editor.frames.length) play.index %= editor.frames.length
+  else play.index = 0
+  state.frameSheetPlayback[node.id] = play
+  applyFrameEditorPreviewFrame(previewStage, editor, play.index)
+  fitFrameEditorPreviewStage(previewStage, editor)
+
+  const hint = document.createElement('p')
+  hint.className = `frame-editor-hint${node.error ? ' is-error' : ''}`
+  hint.textContent = node.error || '拖入其他图片可添加帧；拖动格子可交换顺序。'
+
+  const footer = document.createElement('div')
+  footer.className = 'frame-editor-footer frame-editor-interactive'
+  const saveButton = document.createElement('button')
+  saveButton.type = 'button'
+  saveButton.className = 'tool-btn'
+  saveButton.textContent = hasActiveOperations() ? '正在保存…' : '保存成为序列帧'
+  saveButton.disabled = hasActiveOperations() || editor.frames.length < 2 || capacity < 2
+  saveButton.addEventListener('click', () => saveFrameEditorAsSheet(node.id))
+  footer.appendChild(saveButton)
+
+  toolbar.addEventListener('pointerdown', (event) => event.stopPropagation())
+  workspace.addEventListener('pointerdown', (event) => event.stopPropagation())
+  footer.addEventListener('pointerdown', (event) => event.stopPropagation())
+  container.append(head, toolbar, workspace, hint, footer)
+}
+
+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 : DEFAULT_W)
+  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')
+  const anchor = {
+    x: east ? x : x + clickedSize.width,
+    y: south ? y : y + clickedSize.height,
+  }
+  const diagonal = {
+    x: east ? clickedSize.width : -clickedSize.width,
+    y: south ? clickedSize.height : -clickedSize.height,
+  }
+  const originals = new Map()
+  originals.set(current.id, {
+    x,
+    y,
+    width: clickedSize.width,
+    height: clickedSize.height,
+  })
+
+  interaction.mode = 'resize'
+  interaction.resize = {
+    pointerId: event.pointerId,
+    startWorld: clientToWorld(event.clientX, event.clientY),
+    anchor,
+    diagonal,
+    originals,
+    minimumScale: Math.min(
+      1,
+      MIN_MEDIA_RESIZE_SIDE / Math.max(1, Math.min(clickedSize.width, clickedSize.height)),
+    ),
+  }
+  els.viewport.classList.add('is-resizing')
+  els.viewport.dataset.resizeCorner = corner
+  els.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', '等比缩放画布元素')
+    handle.addEventListener('pointerdown', (event) => startMediaResize(event, node, corner))
+    container.appendChild(handle)
+  }
+}
+
+function renderCanvas() {
+  const nodes = buildNodes()
+  const alive = new Set(nodes.map((n) => n.id))
+  state.selectedIds = new Set([...state.selectedIds].filter((id) => alive.has(id)))
+  for (const id of Object.keys(state.frameSheetPlayback)) {
+    if (!alive.has(id)) delete state.frameSheetPlayback[id]
+  }
+
+  els.world.innerHTML = ''
+  const dependencyLayer = createDependencyLayer()
+  els.world.appendChild(dependencyLayer)
+  for (let index = 0; index < nodes.length; index += 1) {
+    const node = nodes[index]
+    const el = document.createElement('div')
+    el.className = `canvas-node${isSelected(node.id) ? ' is-selected' : ''}${
+      isGenDialog(node) || isVideoDialog(node) ? ' is-gen-dialog' : ''}${
+      isVideoDialog(node) ? ' is-video-dialog' : ''
+    }${isVideoItem(node) ? ' is-video' : ''}`
+    el.style.left = `${node.x}px`
+    el.style.top = `${node.y}px`
+    el.style.width = `${node.width}px`
+    el.style.zIndex = isSelected(node.id) ? String(1000 + index) : String(1 + index)
+    el.dataset.id = node.id
+
+    if (isFrameEditor(node)) {
+      mountFrameEditorNode(el, node)
+      el.addEventListener('pointerdown', (e) => onNodePointerDown(e, node))
+      el.addEventListener('contextmenu', (e) => {
+        e.preventDefault()
+        e.stopPropagation()
+        if (!isSelected(node.id)) setSelection([node.id])
+        state.ctxTargetId = node.id
+        syncSelectionClass()
+        renderChrome()
+        showCtxMenu(e.clientX, e.clientY, node)
+      })
+      els.world.appendChild(el)
+      continue
+    }
+
+    if (isGenDialog(node)) {
+      mountGenDialogNode(el, node)
+      el.addEventListener('pointerdown', (e) => onNodePointerDown(e, node))
+      el.addEventListener('contextmenu', (e) => {
+        e.preventDefault()
+        e.stopPropagation()
+        if (!isSelected(node.id)) setSelection([node.id])
+        state.ctxTargetId = node.id
+        syncSelectionClass()
+        renderChrome()
+        showCtxMenu(e.clientX, e.clientY, node)
+      })
+      els.world.appendChild(el)
+      continue
+    }
+
+    if (isVideoDialog(node)) {
+      mountVideoGenDialogNode(el, node)
+      el.addEventListener('pointerdown', (e) => onNodePointerDown(e, node))
+      el.addEventListener('contextmenu', (e) => {
+        e.preventDefault()
+        e.stopPropagation()
+        if (!isSelected(node.id)) setSelection([node.id])
+        state.ctxTargetId = node.id
+        syncSelectionClass()
+        renderChrome()
+        showCtxMenu(e.clientX, e.clientY, node)
+      })
+      els.world.appendChild(el)
+      continue
+    }
+
+    if (isPending(node)) {
+      el.classList.add('is-pending')
       if (node.media === 'video') el.classList.add('is-pending-video')
       if (node.error) el.classList.add('is-pending-error')
       if (node.height) el.style.height = `${node.height}px`
@@ -2235,7 +2930,7 @@ function renderCanvas() {
         if (!video.videoWidth || !video.videoHeight) return
         video.style.aspectRatio = `${video.videoWidth} / ${video.videoHeight}`
         const layoutItem = state.layoutItems.find((it) => it.id === node.id)
-        if (layoutItem && layoutItem.height != null) {
+        if (layoutItem && layoutItem.manualSize !== true && layoutItem.height != null) {
           layoutItem.height = null
         }
         requestDependencyEdgeUpdate()
@@ -2246,6 +2941,7 @@ function renderCanvas() {
       caption.textContent = node.name
 
       el.append(handle, video, caption)
+      appendMediaResizeHandles(el, node)
       el.addEventListener('pointerdown', (e) => onNodePointerDown(e, node))
       el.addEventListener('contextmenu', (e) => {
         e.preventDefault()
@@ -2260,23 +2956,16 @@ function renderCanvas() {
       continue
     }
 
-    if (isSequence(node)) {
-      const badge = document.createElement('div')
-      badge.className = 'seq-badge'
-      badge.textContent = `${node.frameCount} 帧 · ${node.fps || 8}fps`
-      el.appendChild(badge)
-    }
-
     el.classList.add('is-image')
 
     const handle = document.createElement('div')
     handle.className = 'ref-handle'
-    handle.title = isSequence(node) ? '拖到生图对话框引用当前帧' : '拖到生图对话框引用'
+    handle.title = '拖到生图对话框引用'
     handle.textContent = '引用'
     handle.draggable = true
     handle.addEventListener('dragstart', (e) => {
       e.stopPropagation()
-      const refId = isSequence(node) ? node.currentFrameId : node.id
+      const refId = node.id
       e.dataTransfer.setData(
         'application/x-canvas-image',
         JSON.stringify({
@@ -2296,21 +2985,66 @@ function renderCanvas() {
     })
     handle.addEventListener('pointerdown', (e) => e.stopPropagation())
 
-    const img = document.createElement('img')
-    img.src = node.url
-    img.alt = node.name
-    img.draggable = false
-    img.dataset.role = 'frame'
-    img.addEventListener(
-      'load',
-      isSequence(node) ? requestDependencyEdgeGeometryUpdate : requestDependencyEdgeUpdate,
-    )
+    const frameSheet = frameSheetPreviewMeta(node)
+    let mediaPreview
+    if (frameSheet) {
+      el.classList.add('is-frame-sheet-preview')
+      const preview = document.createElement('div')
+      preview.className = 'frame-sheet-preview'
+      preview.dataset.assetId = node.id
+      preview.style.aspectRatio =
+        frameSheet.cellWidth && frameSheet.cellHeight
+          ? `${frameSheet.cellWidth} / ${frameSheet.cellHeight}`
+          : '1 / 1'
+      const image = document.createElement('img')
+      image.src = node.url
+      image.alt = node.name
+      image.draggable = false
+      image.dataset.role = 'frame-sheet-image'
+      image.style.width = `${frameSheet.columns * 100}%`
+      image.style.height = `${frameSheet.rows * 100}%`
+      image.addEventListener('load', () => {
+        if (image.naturalWidth > 0 && image.naturalHeight > 0) {
+          state.imageDims[node.id] = { w: image.naturalWidth, h: image.naturalHeight }
+          preview.style.aspectRatio = `${image.naturalWidth * frameSheet.rows} / ${image.naturalHeight * frameSheet.columns}`
+          const frameWidth = Number(frameSheet.cellWidth) > 0
+            ? Number(frameSheet.cellWidth)
+            : image.naturalWidth / frameSheet.columns
+          const frameHeight = Number(frameSheet.cellHeight) > 0
+            ? Number(frameSheet.cellHeight)
+            : image.naturalHeight / frameSheet.rows
+          applyImageDisplaySize(node.id, frameWidth, frameHeight)
+        }
+        requestDependencyEdgeUpdate()
+      })
+      preview.appendChild(image)
+      const play = state.frameSheetPlayback[node.id] || { index: 0, acc: 0 }
+      state.frameSheetPlayback[node.id] = play
+      applyFrameSheetPreviewFrame(preview, frameSheet, play.index)
+      mediaPreview = preview
+    } else {
+      const image = document.createElement('img')
+      image.src = node.url
+      image.alt = node.name
+      image.draggable = false
+      image.dataset.role = 'frame'
+      image.addEventListener('load', () => {
+        if (image.naturalWidth > 0 && image.naturalHeight > 0) {
+          state.imageDims[node.id] = { w: image.naturalWidth, h: image.naturalHeight }
+          applyImageDisplaySize(node.id, image.naturalWidth, image.naturalHeight)
+          if (state.selectedIds.has(node.id)) renderInspector()
+        }
+        requestDependencyEdgeUpdate()
+      })
+      mediaPreview = image
+    }
 
     const caption = document.createElement('div')
     caption.className = 'canvas-node-caption'
     caption.textContent = node.name
 
-    el.append(handle, img, caption)
+    el.append(handle, mediaPreview, caption)
+    appendMediaResizeHandles(el, node)
     el.addEventListener('pointerdown', (e) => onNodePointerDown(e, node))
     el.addEventListener('contextmenu', (e) => {
       e.preventDefault()
@@ -2327,24 +3061,6 @@ function renderCanvas() {
   applyCamera()
 }
 
-function updateSequenceFramesOnly() {
-  // 轻量更新：只换序列节点的 img.src，避免拖拽时整树重绘打断
-  for (const nodeEl of els.world.querySelectorAll('.canvas-node.is-sequence')) {
-    const id = nodeEl.dataset.id
-    const item = state.layoutItems.find((it) => it.id === id)
-    if (!isSequence(item) || !item.frames.length) continue
-    const play = state.playback[id] || { index: 0 }
-    const frameId = item.frames[play.index % item.frames.length]
-    const img = nodeEl.querySelector('img[data-role="frame"]')
-    const nextUrl = imageUrl(frameId)
-    if (img && img.src !== new URL(nextUrl, location.href).href) {
-      img.src = nextUrl
-    }
-    const badge = nodeEl.querySelector('.seq-badge')
-    if (badge) badge.textContent = `${item.frames.length} 帧 · ${item.fps || 8}fps`
-  }
-}
-
 function inspSelectField(labelText, selectEl) {
   const field = el('label', 'insp-field')
   field.appendChild(document.createTextNode(labelText))
@@ -2553,122 +3269,6 @@ function renderInspectorImage(id) {
   els.inspectorBody.appendChild(section)
 }
 
-function renderInspectorSequence(item) {
-  els.inspectorTitle.textContent = '序列'
-  const section = el('div', 'insp-section')
-  appendKv(section, [
-    ['名称', item.name || item.id],
-    ['ID', item.id],
-    ['帧数', String(item.frames.length)],
-    ['播放速率', `${item.fps || 8} FPS`],
-    ['循环', item.loop === false ? '关闭' : '开启'],
-  ])
-  appendOriginSection(section, item)
-
-  const fpsField = el('label', 'insp-field')
-  fpsField.appendChild(document.createTextNode('播放速率 (FPS)'))
-  const fpsRow = el('div', 'insp-field-row')
-  const fpsInput = document.createElement('input')
-  fpsInput.type = 'range'
-  fpsInput.min = '1'
-  fpsInput.max = '24'
-  fpsInput.value = String(item.fps || 8)
-  const fpsVal = el('span', 'insp-field-val', String(item.fps || 8))
-  fpsInput.addEventListener('input', () => {
-    fpsVal.textContent = fpsInput.value
-  })
-  fpsInput.addEventListener('change', () => {
-    patchSequence(item.id, { fps: Number(fpsInput.value) || 8 })
-  })
-  fpsRow.append(fpsInput, fpsVal)
-  fpsField.appendChild(fpsRow)
-  section.appendChild(fpsField)
-
-  const loopLabel = el('label', 'insp-check')
-  const loopInput = document.createElement('input')
-  loopInput.type = 'checkbox'
-  loopInput.checked = item.loop !== false
-  loopInput.addEventListener('change', () => {
-    patchSequence(item.id, { loop: loopInput.checked })
-  })
-  loopLabel.append(loopInput, document.createTextNode('循环播放'))
-  section.appendChild(loopLabel)
-  els.inspectorBody.appendChild(section)
-
-  const framesWrap = el('div', 'insp-section')
-  framesWrap.appendChild(el('div', 'insp-label', '构成帧'))
-  const box = el('div', 'insp-frame-box')
-  box.appendChild(el('p', 'insp-frame-hint', '拖动缩略图可调整顺序'))
-  const grid = el('div', 'insp-frame-grid')
-  let dragFrom = -1
-
-  item.frames.forEach((fid, index) => {
-    ensureImageDims(fid)
-    const card = el('div', 'insp-frame')
-    card.draggable = true
-    card.dataset.index = String(index)
-    card.title = `${index + 1}. ${imageName(fid)}\n${fid}\n${formatDims(fid)}`
-
-    const badge = el('span', 'insp-frame-index', String(index + 1))
-    const del = document.createElement('button')
-    del.type = 'button'
-    del.className = 'insp-frame-del'
-    del.title = '删除此帧'
-    del.textContent = '×'
-    del.addEventListener('pointerdown', (e) => e.stopPropagation())
-    del.addEventListener('click', (e) => {
-      e.stopPropagation()
-      removeFrame(item.id, index)
-    })
-
-    const thumb = el('div', 'insp-frame-thumb')
-    const img = document.createElement('img')
-    img.src = imageUrl(fid)
-    img.alt = imageName(fid)
-    img.draggable = false
-    thumb.appendChild(img)
-    card.append(badge, del, thumb)
-
-    card.addEventListener('dragstart', (e) => {
-      dragFrom = index
-      card.classList.add('is-dragging')
-      e.dataTransfer.effectAllowed = 'move'
-      e.dataTransfer.setData('text/plain', String(index))
-    })
-    card.addEventListener('dragend', () => {
-      dragFrom = -1
-      card.classList.remove('is-dragging')
-      for (const node of grid.querySelectorAll('.insp-frame.is-drop-target')) {
-        node.classList.remove('is-drop-target')
-      }
-    })
-    card.addEventListener('dragover', (e) => {
-      e.preventDefault()
-      e.dataTransfer.dropEffect = 'move'
-      if (dragFrom === index) return
-      for (const node of grid.querySelectorAll('.insp-frame.is-drop-target')) {
-        node.classList.remove('is-drop-target')
-      }
-      card.classList.add('is-drop-target')
-    })
-    card.addEventListener('dragleave', () => {
-      card.classList.remove('is-drop-target')
-    })
-    card.addEventListener('drop', (e) => {
-      e.preventDefault()
-      card.classList.remove('is-drop-target')
-      const from = Number(e.dataTransfer.getData('text/plain'))
-      if (!Number.isFinite(from) || from === index) return
-      reorderFrame(item.id, from, index)
-    })
-
-    grid.appendChild(card)
-  })
-  box.appendChild(grid)
-  framesWrap.appendChild(box)
-  els.inspectorBody.appendChild(framesWrap)
-}
-
 function renderInspectorMulti(ids) {
   els.inspectorTitle.textContent = `已选中 ${ids.length} 项`
   const list = el('div', 'insp-list')
@@ -2678,9 +3278,12 @@ function renderInspectorMulti(ids) {
     btn.type = 'button'
     const name = el('div', 'name')
     const meta = el('div', 'meta')
-    if (isSequence(item)) {
-      name.textContent = item.name || id
-      meta.textContent = `序列 · ${item.frames.length} 帧 · ${item.fps || 8}fps`
+    if (isFrameEditor(item)) {
+      const editor = normalizeFrameEditor(item)
+      name.textContent = item.name || '序列帧编辑'
+      meta.textContent = editor
+        ? `编辑器 · ${editor.frames.length} 帧 · ${editor.rows}×${editor.columns}`
+        : '序列帧编辑器'
     } else if (isGenDialog(item)) {
       name.textContent = item.name || '图片生成'
       meta.textContent = '生图对话框'
@@ -2731,13 +3334,20 @@ function renderInspector() {
 
   const id = ids[0]
   const item = getSelectedItem(id)
-  if (isSequence(item)) {
-    state.editingSeqId = id
-    renderInspectorSequence(item)
+  if (isFrameEditor(item)) {
+    const editor = normalizeFrameEditor(item)
+    els.inspectorTitle.textContent = '序列帧编辑'
+    const section = el('div', 'insp-section')
+    appendKv(section, [
+      ['来源', editor ? imageName(editor.sourceId) : '—'],
+      ['切分', editor ? `${editor.sourceRows}×${editor.sourceColumns}` : '—'],
+      ['输出网格', editor ? `${editor.rows}×${editor.columns}` : '—'],
+      ['帧数', editor?.frames.length ?? 0],
+      ['FPS', editor?.fps ?? '—'],
+    ])
+    els.inspectorBody.appendChild(section)
     return
   }
-
-  state.editingSeqId = null
   if (isGenDialog(item)) {
     renderInspectorGenDialog(item)
     return
@@ -2797,145 +3407,19 @@ function renderChrome() {
   renderInspector()
 }
 
-function openSeqModal(seqId) {
-  const item = state.layoutItems.find((it) => it.id === seqId)
-  if (!isSequence(item)) return
-  // 序列编辑改到左侧属性栏，不再弹出模态框
-  state.editingSeqId = seqId
-  setSelection([seqId])
-  syncSelectionClass()
-  renderChrome()
-}
-
-function closeSeqModal() {
-  els.seqModal.hidden = true
-  state.editingSeqId = null
-}
-
-function renderSeqFrames(item) {
-  els.seqFrames.innerHTML = ''
-  item.frames.forEach((fid, index) => {
-    const row = document.createElement('div')
-    row.className = 'seq-frame-row'
-    const img = document.createElement('img')
-    img.src = imageUrl(fid)
-    img.alt = imageName(fid)
-    const name = document.createElement('div')
-    name.className = 'seq-frame-name'
-    name.textContent = `${index + 1}. ${imageName(fid)}`
-    const actions = document.createElement('div')
-    actions.className = 'seq-frame-actions'
-
-    const up = document.createElement('button')
-    up.type = 'button'
-    up.title = '上移'
-    up.textContent = '↑'
-    up.disabled = index === 0
-    up.addEventListener('click', () => moveFrame(item.id, index, -1))
-
-    const down = document.createElement('button')
-    down.type = 'button'
-    down.title = '下移'
-    down.textContent = '↓'
-    down.disabled = index === item.frames.length - 1
-    down.addEventListener('click', () => moveFrame(item.id, index, 1))
-
-    const del = document.createElement('button')
-    del.type = 'button'
-    del.title = '删除此帧'
-    del.textContent = '×'
-    del.addEventListener('click', () => removeFrame(item.id, index))
-
-    actions.append(up, down, del)
-    row.append(img, name, actions)
-    els.seqFrames.appendChild(row)
-  })
-}
-
-function patchSequence(seqId, patch) {
-  state.layoutItems = state.layoutItems.map((it) =>
-    it.id === seqId && isSequence(it) ? { ...it, ...patch } : it,
-  )
-  saveLayout(state.layoutItems)
-  const item = state.layoutItems.find((it) => it.id === seqId)
-  if (item && !els.seqModal.hidden) renderSeqFrames(item)
-  renderChrome()
-  updateSequenceFramesOnly()
-}
-
-function moveFrame(seqId, index, delta) {
-  reorderFrame(seqId, index, index + delta)
-}
-
-function reorderFrame(seqId, from, to) {
-  const item = state.layoutItems.find((it) => it.id === seqId)
-  if (!isSequence(item)) return
-  if (from === to || from < 0 || to < 0) return
-  if (from >= item.frames.length || to >= item.frames.length) return
-  const frames = [...item.frames]
-  const [picked] = frames.splice(from, 1)
-  frames.splice(to, 0, picked)
-  // 播放索引跟随被拖动的帧
-  const play = state.playback[seqId]
-  if (play) {
-    if (play.index === from) play.index = to
-    else if (from < play.index && to >= play.index) play.index -= 1
-    else if (from > play.index && to <= play.index) play.index += 1
-    state.playback[seqId] = play
-  }
-  patchSequence(seqId, { frames })
-}
-
-async function removeFrame(seqId, index) {
-  const item = state.layoutItems.find((it) => it.id === seqId)
-  if (!isSequence(item)) return
-  if (item.frames.length <= 1) {
-    state.error = '序列至少保留 1 帧；可用「拆散为单图」或右键删除整个序列'
-    renderChrome()
-    return
-  }
-  const removedId = item.frames[index]
-  const frames = item.frames.filter((_, i) => i !== index)
-  const play = state.playback[seqId] || { index: 0, acc: 0 }
-  play.index = play.index % frames.length
-  state.playback[seqId] = play
-  patchSequence(seqId, { frames })
-  // 删了就是删了：从磁盘移除该帧，避免刷新后冒成独立图
-  try {
-    await api('/api/delete', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ image_ids: [removedId] }),
-    })
-    state.images = state.images.filter((img) => img.id !== removedId)
-  } catch (err) {
-    state.error = String(err.message || err)
-    renderChrome()
-  }
-}
-
 async function copyCanvasItem(targetId) {
   const item = state.layoutItems.find((it) => it.id === targetId)
-  if (!item || isPending(item) || isGenDialog(item) || isVideoDialog(item)) return
+  if (!item || isPending(item) || isGenDialog(item) || isVideoDialog(item) || isFrameEditor(item)) return
 
-  const ids = isSequence(item) ? [...new Set(item.frames || [])] : [item.id]
+  const ids = [item.id]
   if (!ids.length) return
 
   try {
     state.error = ''
-    const sequence = isSequence(item)
-      ? {
-          kind: 'sequence',
-          name: item.name || '序列',
-          fps: Number(item.fps) > 0 ? Number(item.fps) : 8,
-          loop: item.loop !== false,
-          frameCount: ids.length,
-        }
-      : undefined
     await api('/api/clipboard/copy', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ ids, sequence }),
+      body: JSON.stringify({ ids }),
     })
     renderChrome()
   } catch (err) {
@@ -2945,8 +3429,8 @@ async function copyCanvasItem(targetId) {
 }
 
 async function pasteClipboardFiles(point) {
-  if (!point || state.busy) return
-  state.busy = true
+  if (!point || hasActiveOperations()) return
+  const activeOperation = beginActiveOperation('clipboard-paste')
   state.error = ''
   renderChrome()
   try {
@@ -2957,29 +3441,7 @@ async function pasteClipboardFiles(point) {
     })
     const assets = Array.isArray(result.assets) ? result.assets : []
     if (!assets.length) throw new Error('剪贴板中没有可粘贴的素材文件')
-    const sequence = result.sequence?.kind === 'sequence' ? result.sequence : null
     const ids = assets.map((asset) => asset.id)
-    if (sequence && assets.every((asset) => asset.kind === 'image')) {
-      const sequenceId = `seq_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 8)}`
-      state.layoutItems.push({
-        id: sequenceId,
-        type: 'sequence',
-        name: `${sequence.name || '序列'} 副本`,
-        x: point.x,
-        y: point.y,
-        width: DEFAULT_W,
-        height: null,
-        frames: ids,
-        fps: Number(sequence.fps) > 0 ? Number(sequence.fps) : 8,
-        loop: sequence.loop !== false,
-      })
-      await saveLayout(state.layoutItems)
-      await reload()
-      setSelection([sequenceId])
-      renderCanvas()
-      return
-    }
-
     const columns = Math.min(5, Math.max(1, Math.ceil(Math.sqrt(assets.length))))
     assets.forEach((asset, index) => {
       const width = asset.kind === 'video' ? 280 : DEFAULT_W
@@ -3000,7 +3462,7 @@ async function pasteClipboardFiles(point) {
   } catch (err) {
     state.error = String(err.message || err)
   } finally {
-    state.busy = false
+    endActiveOperation(activeOperation)
     renderChrome()
   }
 }
@@ -3026,7 +3488,8 @@ async function deleteCanvasItems(targetIds, { confirm = true } = {}) {
     .filter(Boolean)
   const imageIds = ids.filter((id) => {
     const item = state.layoutItems.find((candidate) => candidate.id === id)
-    return !item || (!isSequence(item) && !isGenDialog(item) && !isVideoDialog(item) && !isPending(item))
+    return !item ||
+      (!isGenDialog(item) && !isVideoDialog(item) && !isPending(item) && !isFrameEditor(item))
   })
 
   state.deleting = true
@@ -3041,11 +3504,9 @@ async function deleteCanvasItems(targetIds, { confirm = true } = {}) {
     })
 
     for (const item of items) {
-      if (isSequence(item)) delete state.playback[item.id]
       if (isGenDialog(item)) delete state.genDialogs[item.id]
       if (isVideoDialog(item)) delete state.videoDialogs[item.id]
     }
-    if (state.editingSeqId && selected.has(state.editingSeqId)) closeSeqModal()
     for (const ds of Object.values(state.genDialogs)) {
       ds.refs = ds.refs.filter((reference) => !selected.has(reference.id))
     }
@@ -3067,16 +3528,20 @@ async function deleteCanvasItems(targetIds, { confirm = true } = {}) {
 }
 
 function resetSessionState() {
+  clearTimeout(imageSizeSaveTimer)
+  imageSizeSaveTimer = null
   state.meta = null
   state.images = []
   state.layoutItems = []
+  state.layoutRevision = 0
+  layoutNextExpectedRevision = 0
+  layoutSaveEpoch += 1
   state.selectedIds = new Set()
-  state.editingSeqId = null
   state.genDialogs = {}
   state.videoDialogs = {}
   state.fileInputDialogId = null
   state.mediaInputDialogId = null
-  state.busy = false
+  state.activeOperations.clear()
   state.deleting = false
   state.error = ''
   state.camera = { x: 0, y: 0, scale: 1 }
@@ -3084,12 +3549,15 @@ function resetSessionState() {
   state.ctxCanvasPoint = null
   state.interactiveEditImageId = null
   state.layerDecompositionImageId = null
-  state.playback = {}
+  state.framePreviewImageId = null
+  state.frameEditorSourceImageId = null
+  state.frameSheetPlayback = {}
   state.imageDims = {}
   hideCtxMenu()
   closeInteractiveEditModal(true)
   closeLayerDecompositionModal(true)
-  closeSeqModal()
+  closeFramePreviewModal(true)
+  closeFrameEditorSplitModal(true)
   if (els.world) els.world.innerHTML = ''
   if (els.inspector) els.inspector.hidden = true
 }
@@ -3244,6 +3712,8 @@ async function fetchCanvasSnapshot() {
     return {
       images: imagesData.images || [],
       items: layoutData.items || [],
+      version: layoutData.version,
+      revision: layoutData.revision,
     }
   }
 }
@@ -3251,6 +3721,11 @@ async function fetchCanvasSnapshot() {
 function applyCanvasSnapshot(snapshot, force = false) {
   const nextImages = snapshot.images || []
   const nextItems = mergeLayout(nextImages, snapshot.items || [])
+  const nextRevision = Number(snapshot.revision)
+  if (Number.isInteger(nextRevision) && nextRevision >= 0) {
+    state.layoutRevision = nextRevision
+    if (layoutPendingSaveCount === 0) layoutNextExpectedRevision = nextRevision
+  }
   if (!force && JSON.stringify([state.images, state.layoutItems]) === JSON.stringify([nextImages, nextItems])) {
     return false
   }
@@ -3258,11 +3733,6 @@ function applyCanvasSnapshot(snapshot, force = false) {
   state.layoutItems = nextItems
   renderCanvas()
   renderChrome()
-  if (!els.seqModal.hidden && state.editingSeqId) {
-    const item = state.layoutItems.find((it) => it.id === state.editingSeqId)
-    if (isSequence(item)) openSeqModal(item.id)
-    else closeSeqModal()
-  }
   return true
 }
 
@@ -3285,7 +3755,7 @@ function hasEditableFocus() {
 function shouldDeferExternalSync() {
   return Boolean(
     !state.project ||
-      state.busy ||
+      hasActiveOperations() ||
       state.refreshing ||
       interaction.mode ||
       document.hidden ||
@@ -3362,11 +3832,12 @@ async function boot() {
 }
 
 const interaction = {
-  mode: null, // null | 'pan' | 'marquee' | 'move' | 'click' | 'generator-tool-drag'
+  mode: null, // null | 'pan' | 'marquee' | 'move' | 'resize' | 'click' | 'generator-tool-drag'
   htmlDrag: false,
   pan: null,
   marquee: null,
   move: null,
+  resize: null,
   click: null,
 }
 
@@ -3524,41 +3995,33 @@ function ensureLayoutItem(node) {
             ? 280
             : DEFAULT_W),
     height: isPending(node) || isVideoItem(node) ? node.height ?? null : null,
-    ...(isSequence(node)
+    ...(isGenDialog(node)
       ? {
-          type: 'sequence',
-          name: node.name,
-          frames: [...node.frames],
-          fps: node.fps || 8,
-          loop: node.loop !== false,
+          type: 'gen_dialog',
+          name: node.name || '图片生成',
         }
-      : isGenDialog(node)
+      : isVideoDialog(node)
         ? {
-            type: 'gen_dialog',
-            name: node.name || '图片生成',
+            type: 'video_dialog',
+            name: node.name || '视频生成',
           }
-        : isVideoDialog(node)
+        : isPending(node)
           ? {
-              type: 'video_dialog',
-              name: node.name || '视频生成',
+              type: 'pending',
+              name: node.name || '生成中',
+              prompt: node.prompt || '',
+              size: node.size || '',
+              model: node.model || '',
+              media: node.media || 'image',
+              ratio: node.ratio || '',
+              error: node.error || null,
+              references: (node.references || []).map((reference) => ({ ...reference })),
             }
-          : isPending(node)
+          : isVideoItem(node)
             ? {
-                type: 'pending',
-                name: node.name || '生成中',
-                prompt: node.prompt || '',
-                size: node.size || '',
-                model: node.model || '',
-                media: node.media || 'image',
-                ratio: node.ratio || '',
-                error: node.error || null,
-                references: (node.references || []).map((reference) => ({ ...reference })),
+                type: 'video',
               }
-            : isVideoItem(node)
-              ? {
-                  type: 'video',
-                }
-              : {}),
+            : {}),
   })
   return getNodePosition(node.id, node)
 }
@@ -3648,6 +4111,7 @@ function startMarquee(e) {
 
 function onNodePointerDown(e, node) {
   if (e.target?.closest?.('.ref-handle')) return
+  if (e.target?.closest?.('.canvas-resize-handle')) return
   if (e.target?.closest?.('.gen-dialog-chrome .ghost-btn')) return
   if (e.button === 2) return
 
@@ -3789,6 +4253,49 @@ els.viewport.addEventListener('pointermove', (e) => {
     return
   }
 
+  if (interaction.mode === 'resize' && interaction.resize) {
+    const resize = interaction.resize
+    if (resize.pointerId !== e.pointerId) return
+    const world = clientToWorld(e.clientX, e.clientY)
+    const pointerDelta = {
+      x: world.x - resize.startWorld.x,
+      y: world.y - resize.startWorld.y,
+    }
+    const vector = {
+      x: resize.diagonal.x + pointerDelta.x,
+      y: resize.diagonal.y + pointerDelta.y,
+    }
+    const denominator =
+      resize.diagonal.x * resize.diagonal.x + resize.diagonal.y * resize.diagonal.y
+    const projectedScale = denominator > 0
+      ? (vector.x * resize.diagonal.x + vector.y * resize.diagonal.y) / denominator
+      : 1
+    const scale = Math.max(resize.minimumScale, projectedScale)
+
+    for (const [id, original] of resize.originals) {
+      const x = resize.anchor.x + (original.x - resize.anchor.x) * scale
+      const y = resize.anchor.y + (original.y - resize.anchor.y) * scale
+      const width = Math.max(1, original.width * scale)
+      const height = Math.max(1, original.height * scale)
+      const item = state.layoutItems.find((candidate) => candidate.id === id)
+      if (item) {
+        item.x = x
+        item.y = y
+        item.width = width
+        item.height = height
+        item.manualSize = true
+      }
+      const nodeElement = findNodeEl(id)
+      if (nodeElement) {
+        nodeElement.style.left = `${x}px`
+        nodeElement.style.top = `${y}px`
+        nodeElement.style.width = `${width}px`
+      }
+    }
+    requestDependencyEdgeUpdate()
+    return
+  }
+
   if (interaction.mode === 'marquee' && interaction.marquee) {
     updateMarquee(
       interaction.marquee.x0,
@@ -3802,7 +4309,7 @@ els.viewport.addEventListener('pointermove', (e) => {
 function endPointer(e) {
   const mode = interaction.mode
 
-  if (mode === 'move') {
+  if (mode === 'move' || mode === 'resize') {
     saveLayout(state.layoutItems)
   }
 
@@ -3860,10 +4367,13 @@ function endPointer(e) {
   }
 
   els.viewport.classList.remove('is-panning')
+  els.viewport.classList.remove('is-resizing')
+  delete els.viewport.dataset.resizeCorner
   interaction.mode = null
   interaction.pan = null
   interaction.marquee = null
   interaction.move = null
+  interaction.resize = null
   interaction.click = null
 }
 
@@ -3889,14 +4399,13 @@ window.addEventListener('keydown', async (e) => {
     hideCtxMenu()
     // 弹窗只允许点关闭/取消按钮退出，Esc 不关
     if (
-      !els.seqModal.hidden ||
       !els.interactiveEditModal.hidden ||
       !els.layerDecompositionModal.hidden ||
       !els.smartSplitModal.hidden ||
       !els.manualSplitModal.hidden ||
       !els.frameExtractModal.hidden ||
-      !els.videoTrimModal.hidden ||
-      !els.seqSheetModal.hidden ||
+      !els.framePreviewModal.hidden ||
+      !els.frameEditorSplitModal.hidden ||
       !els.videoCycleModal.hidden
     ) {
       return
@@ -3914,7 +4423,6 @@ window.addEventListener('click', (e) => {
 
 els.inspectorClose.addEventListener('click', () => {
   clearSelection()
-  state.editingSeqId = null
   syncSelectionClass()
   renderChrome()
 })
@@ -3988,15 +4496,11 @@ els.ctxMenu.addEventListener('click', async (e) => {
     openLayerDecompositionModal(targetId)
     return
   }
-  if (action === 'video-trim') {
-    openVideoTrimModal(targetId)
-    return
-  }
   if (action === 'video-cycle') {
     openVideoCycleModal(targetId)
     return
   }
-  if (action === 'video-to-sequence') {
+  if (action === 'video-to-frame-sheet') {
     openFrameExtractModal(targetId)
     return
   }
@@ -4008,20 +4512,14 @@ els.ctxMenu.addEventListener('click', async (e) => {
     openManualSplitModal(targetId)
     return
   }
-  if (action === 'edit-sequence') {
-    openSeqModal(targetId)
+  if (action === 'frame-sheet-preview') {
+    const node = state.layoutItems.find((item) => item.id === targetId)
+    if (frameSheetPreviewMeta(node)) await stopFrameSheetPreview(targetId)
+    else openFramePreviewModal(targetId)
     return
   }
-  if (action === 'sequence-to-sheet') {
-    openSeqSheetModal(targetId)
-    return
-  }
-  if (action === 'ungroup-sequence') {
-    await ungroupSequence(targetId)
-    return
-  }
-  if (action === 'combine-sequence') {
-    await combineImagesAsSequence([...state.selectedIds])
+  if (action === 'frame-sheet-edit') {
+    openFrameEditorSplitModal(targetId)
     return
   }
   if (action === 'delete') {
@@ -4030,9 +4528,6 @@ els.ctxMenu.addEventListener('click', async (e) => {
   }
 })
 
-els.seqPanelClose.addEventListener('click', closeSeqModal)
-els.seqPanelDone.addEventListener('click', closeSeqModal)
-
 els.interactiveEditClose.addEventListener('click', closeInteractiveEditModal)
 els.interactiveEditCancel.addEventListener('click', closeInteractiveEditModal)
 els.interactiveEditSave.addEventListener('click', () => {
@@ -4091,13 +4586,41 @@ els.frameExtractCount.addEventListener('keydown', (e) => {
   }
 })
 
-els.seqSheetClose.addEventListener('click', closeSeqSheetModal)
-els.seqSheetCancel.addEventListener('click', closeSeqSheetModal)
-els.seqSheetConfirm.addEventListener('click', () => {
-  confirmSeqSheet()
+els.framePreviewClose.addEventListener('click', () => closeFramePreviewModal())
+els.framePreviewCancel.addEventListener('click', () => closeFramePreviewModal())
+els.framePreviewConfirm.addEventListener('click', () => {
+  confirmFramePreview()
 })
-els.seqSheetRows.addEventListener('input', updateSeqSheetPreview)
-els.seqSheetCols.addEventListener('input', updateSeqSheetPreview)
+els.framePreviewRows.addEventListener('input', updateFramePreviewBounds)
+els.framePreviewColumns.addEventListener('input', updateFramePreviewBounds)
+for (const input of [
+  els.framePreviewRows,
+  els.framePreviewColumns,
+  els.framePreviewFps,
+]) {
+  input.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      confirmFramePreview()
+    }
+  })
+}
+
+els.frameEditorSplitClose.addEventListener('click', () => closeFrameEditorSplitModal())
+els.frameEditorSplitCancel.addEventListener('click', () => closeFrameEditorSplitModal())
+els.frameEditorSplitConfirm.addEventListener('click', () => {
+  confirmFrameEditorSplit()
+})
+els.frameEditorSplitRows.addEventListener('input', updateFrameEditorSplitInfo)
+els.frameEditorSplitColumns.addEventListener('input', updateFrameEditorSplitInfo)
+for (const input of [els.frameEditorSplitRows, els.frameEditorSplitColumns]) {
+  input.addEventListener('keydown', (event) => {
+    if (event.key === 'Enter') {
+      event.preventDefault()
+      confirmFrameEditorSplit()
+    }
+  })
+}
 
 els.videoCycleClose.addEventListener('click', () => closeVideoCycleModal())
 els.videoCycleCancel.addEventListener('click', () => closeVideoCycleModal())
@@ -4105,124 +4628,6 @@ els.videoCycleConfirm.addEventListener('click', () => {
   confirmVideoCycle()
 })
 
-els.videoTrimClose.addEventListener('click', closeVideoTrimModal)
-els.videoTrimCancel.addEventListener('click', closeVideoTrimModal)
-els.videoTrimConfirm.addEventListener('click', () => {
-  confirmVideoTrim()
-})
-bindVideoTrimHandles()
-
-els.seqFps.addEventListener('input', () => {
-  els.seqFpsVal.textContent = els.seqFps.value
-})
-els.seqFps.addEventListener('change', () => {
-  if (!state.editingSeqId) return
-  patchSequence(state.editingSeqId, { fps: Number(els.seqFps.value) || 8 })
-})
-els.seqLoop.addEventListener('change', () => {
-  if (!state.editingSeqId) return
-  patchSequence(state.editingSeqId, { loop: els.seqLoop.checked })
-})
-
-function formatTrimClock(sec) {
-  const s = Math.max(0, Number(sec) || 0)
-  const m = Math.floor(s / 60)
-  const rest = s - m * 60
-  const whole = Math.floor(rest)
-  const ms = Math.round((rest - whole) * 1000)
-  const msClamped = ms === 1000 ? 999 : ms
-  return `${m}:${String(whole).padStart(2, '0')}.${String(msClamped).padStart(3, '0')}`
-}
-
-function clampTrimTime(t) {
-  const dur = Math.max(0, state.videoTrim.duration || 0)
-  return Math.min(Math.max(0, Number(t) || 0), dur)
-}
-
-function syncVideoTrimUi() {
-  const { duration, start, end } = state.videoTrim
-  const dur = Math.max(duration, 1e-6)
-  const left = (start / dur) * 100
-  const right = (end / dur) * 100
-  els.videoTrimHandleStart.style.left = `${left}%`
-  els.videoTrimHandleEnd.style.left = `${right}%`
-  els.videoTrimRange.style.left = `${left}%`
-  els.videoTrimRange.style.width = `${Math.max(0, right - left)}%`
-  els.videoTrimStartLabel.textContent = formatTrimClock(start)
-  els.videoTrimEndLabel.textContent = formatTrimClock(end)
-  els.videoTrimDurLabel.textContent = formatTrimClock(Math.max(0, end - start))
-  els.videoTrimTotalLabel.textContent = formatTrimClock(duration)
-  els.videoTrimScrub.max = String(duration || 0)
-  els.videoTrimScrub.step = '0.001'
-  syncVideoTrimNow()
-}
-
-function syncVideoTrimNow(forcedTime) {
-  const video = els.videoTrimPreview
-  const t =
-    forcedTime != null
-      ? clampTrimTime(forcedTime)
-      : state.videoTrim.uiTime != null
-        ? clampTrimTime(state.videoTrim.uiTime)
-        : clampTrimTime(video?.currentTime)
-  els.videoTrimNowLabel.textContent = formatTrimClock(t)
-  if (!state.videoTrim.scrubbing) {
-    els.videoTrimScrub.value = String(t)
-  }
-}
-
-function setTrimVideoTime(t) {
-  const video = els.videoTrimPreview
-  const next = clampTrimTime(t)
-  state.videoTrim.uiTime = next
-  syncVideoTrimNow(next)
-  if (!video) return
-  try {
-    if (Math.abs((Number(video.currentTime) || 0) - next) > 0.0005) {
-      video.currentTime = next
-    }
-  } catch {
-    /* ignore */
-  }
-}
-
-function updateTrimPlayButton() {
-  const video = els.videoTrimPreview
-  const playing = Boolean(video && !video.paused && !video.ended)
-  els.videoTrimPlay.textContent = playing ? '❚❚' : '▶'
-  els.videoTrimPlay.title = playing ? '暂停' : '播放'
-}
-
-function toggleTrimPlayback() {
-  const video = els.videoTrimPreview
-  if (!video || !state.videoTrim.duration) return
-  if (!video.paused && !video.ended) {
-    video.pause()
-    updateTrimPlayButton()
-    return
-  }
-  // 若 UI 已拖到某处但解码器尚未到位，先落到该时间再播（避免从 0 起播）
-  const want =
-    state.videoTrim.uiTime != null
-      ? clampTrimTime(state.videoTrim.uiTime)
-      : clampTrimTime(Number(els.videoTrimScrub.value) || video.currentTime || 0)
-  const dur = state.videoTrim.duration
-  const atEnd = video.ended || want >= dur - 0.01
-  const startAt = atEnd ? 0 : want
-  state.videoTrim.uiTime = null
-  state.videoTrim.scrubbing = false
-  try {
-    if (Math.abs((Number(video.currentTime) || 0) - startAt) > 0.01) {
-      video.currentTime = startAt
-    }
-  } catch {
-    /* ignore */
-  }
-  syncVideoTrimNow(startAt)
-  video.play().catch(() => {})
-  updateTrimPlayButton()
-}
-
 function openVideoCycleModal(videoId) {
   const item = state.layoutItems.find((it) => it.id === videoId)
   if (!isVideoItem(item) && !String(videoId || '').startsWith('videos/')) {
@@ -4248,7 +4653,7 @@ function closeVideoCycleModal(force = false) {
     state.videoCycleAbort.abort()
     state.videoCycleAbort = null
   }
-  if (!force && state.busy && state.videoCycleId) {
+  if (!force && hasActiveOperations() && state.videoCycleId) {
     els.videoCycleStatus.hidden = false
     els.videoCycleStatus.textContent = '正在取消…'
     return
@@ -4271,7 +4676,7 @@ function readVideoCycleParams() {
 
 async function confirmVideoCycle() {
   const videoId = state.videoCycleId
-  if (!videoId || state.busy) return
+  if (!videoId || hasActiveOperations()) return
 
   let params
   try {
@@ -4285,7 +4690,7 @@ async function confirmVideoCycle() {
   const node = state.layoutItems.find((it) => it.id === videoId)
   const abort = new AbortController()
   state.videoCycleAbort = abort
-  state.busy = true
+  const activeOperation = beginActiveOperation('video-cycle')
   state.error = ''
   els.videoCycleConfirm.disabled = true
   els.videoCycleCancel.disabled = false
@@ -4334,7 +4739,7 @@ async function confirmVideoCycle() {
       renderChrome()
     }
   } finally {
-    state.busy = false
+    endActiveOperation(activeOperation)
     state.videoCycleAbort = null
     els.videoCycleConfirm.disabled = false
     els.videoCycleCancel.disabled = false
@@ -4345,272 +4750,8 @@ async function confirmVideoCycle() {
   }
 }
 
-function openVideoTrimModal(videoId) {
-  const item = state.layoutItems.find((it) => it.id === videoId)
-  if (!isVideoItem(item) && !String(videoId || '').startsWith('videos/')) {
-    state.error = '请对视频元素使用裁剪'
-    renderChrome()
-    return
-  }
-  state.videoTrimId = videoId
-  state.videoTrim = {
-    duration: 0,
-    start: 0,
-    end: 0,
-    drag: null,
-    uiTime: 0,
-    scrubbing: false,
-  }
-  els.videoTrimStatus.hidden = true
-  els.videoTrimStatus.textContent = ''
-  els.videoTrimConfirm.disabled = true
-  els.videoTrimCancel.disabled = false
-  els.videoTrimClose.disabled = false
-  els.videoTrimPlay.disabled = true
-  els.videoTrimScrub.disabled = true
-  els.videoTrimModal.hidden = false
-  syncVideoTrimNow(0)
-
-  const video = els.videoTrimPreview
-  video.pause()
-  updateTrimPlayButton()
-  video.muted = true
-  video.controls = false
-  video.removeAttribute('controls')
-  video.playsInline = true
-  video.preload = 'auto'
-  video.src = `${imageUrl(videoId)}?t=${Date.now()}`
-
-  const onMeta = () => {
-    const duration = Number(video.duration)
-    if (!Number.isFinite(duration) || duration <= 0) {
-      els.videoTrimStatus.hidden = false
-      els.videoTrimStatus.textContent = '无法读取视频时长'
-      return
-    }
-    state.videoTrim.duration = duration
-    state.videoTrim.start = 0
-    state.videoTrim.end = duration
-    state.videoTrim.uiTime = 0
-    els.videoTrimConfirm.disabled = false
-    els.videoTrimPlay.disabled = false
-    els.videoTrimScrub.disabled = false
-    syncVideoTrimUi()
-    setTrimVideoTime(0)
-  }
-  const onTime = () => {
-    if (!state.videoTrimId || state.videoTrim.drag || state.videoTrim.scrubbing) return
-    if (state.videoTrim.uiTime != null) {
-      if (video.seeking) return
-      const ui = state.videoTrim.uiTime
-      const cur = Number(video.currentTime) || 0
-      if (Math.abs(cur - ui) > 0.05) return
-      state.videoTrim.uiTime = null
-    }
-    syncVideoTrimNow()
-  }
-  const onPlayPause = () => updateTrimPlayButton()
-  const onEnded = () => {
-    state.videoTrim.uiTime = null
-    updateTrimPlayButton()
-    syncVideoTrimNow()
-  }
-
-  video.addEventListener('loadedmetadata', onMeta, { once: true })
-  video.addEventListener('timeupdate', onTime)
-  video.addEventListener('seeked', onTime)
-  video.addEventListener('play', onPlayPause)
-  video.addEventListener('pause', onPlayPause)
-  video.addEventListener('ended', onEnded)
-  video._trimCleanups = () => {
-    video.removeEventListener('timeupdate', onTime)
-    video.removeEventListener('seeked', onTime)
-    video.removeEventListener('play', onPlayPause)
-    video.removeEventListener('pause', onPlayPause)
-    video.removeEventListener('ended', onEnded)
-  }
-  video.load()
-}
-
-function closeVideoTrimModal(force = false) {
-  if (!force && state.busy && state.videoTrimId) return
-  const video = els.videoTrimPreview
-  video.pause()
-  video._trimCleanups?.()
-  video._trimCleanups = null
-  video.removeAttribute('src')
-  video.load()
-  els.videoTrimModal.hidden = true
-  state.videoTrimId = null
-  state.videoTrim.drag = null
-  state.videoTrim.uiTime = null
-  state.videoTrim.scrubbing = false
-  updateTrimPlayButton()
-}
-
-function bindVideoTrimHandles() {
-  const MIN_GAP = 0.04
-
-  const timeFromClientX = (clientX) => {
-    const rect = els.videoTrimTrack.getBoundingClientRect()
-    const width = Math.max(rect.width, 1)
-    const ratio = Math.min(1, Math.max(0, (clientX - rect.left) / width))
-    return clampTrimTime(ratio * state.videoTrim.duration)
-  }
-
-  const beginHandleDrag = (which, e) => {
-    if (e.button != null && e.button !== 0) return
-    e.preventDefault()
-    e.stopPropagation()
-    if (state.busy || !state.videoTrim.duration) return
-
-    const video = els.videoTrimPreview
-    video.pause()
-    updateTrimPlayButton()
-    state.videoTrim.drag = which
-
-    const apply = (t) => {
-      if (which === 'start') {
-        state.videoTrim.start = Math.min(Math.max(0, t), state.videoTrim.end - MIN_GAP)
-        state.videoTrim.uiTime = state.videoTrim.start
-        syncVideoTrimUi()
-      } else {
-        state.videoTrim.end = Math.max(
-          Math.min(t, state.videoTrim.duration),
-          state.videoTrim.start + MIN_GAP,
-        )
-        state.videoTrim.uiTime = state.videoTrim.end
-        syncVideoTrimUi()
-      }
-    }
-
-    apply(timeFromClientX(e.clientX))
-
-    const onMove = (ev) => {
-      if (state.videoTrim.drag !== which) return
-      if (typeof ev.clientX !== 'number') return
-      apply(timeFromClientX(ev.clientX))
-    }
-
-    const finish = () => {
-      if (state.videoTrim.drag !== which) return
-      const finalT = which === 'start' ? state.videoTrim.start : state.videoTrim.end
-      state.videoTrim.drag = null
-      setTrimVideoTime(finalT)
-      window.removeEventListener('pointermove', onMove, true)
-      window.removeEventListener('pointerup', finish, true)
-      window.removeEventListener('pointercancel', finish, true)
-    }
-
-    window.addEventListener('pointermove', onMove, true)
-    window.addEventListener('pointerup', finish, true)
-    window.addEventListener('pointercancel', finish, true)
-  }
-
-  els.videoTrimHandleStart.addEventListener('pointerdown', (e) => beginHandleDrag('start', e))
-  els.videoTrimHandleEnd.addEventListener('pointerdown', (e) => beginHandleDrag('end', e))
-
-  const onScrubInput = () => {
-    if (!state.videoTrim.duration) return
-    const t = clampTrimTime(Number(els.videoTrimScrub.value))
-    state.videoTrim.scrubbing = true
-    state.videoTrim.uiTime = t
-    els.videoTrimPreview.pause()
-    updateTrimPlayButton()
-    syncVideoTrimNow(t)
-    try {
-      els.videoTrimPreview.currentTime = t
-    } catch {
-      /* ignore */
-    }
-  }
-  const onScrubEnd = () => {
-    const t = clampTrimTime(Number(els.videoTrimScrub.value))
-    state.videoTrim.scrubbing = false
-    setTrimVideoTime(t)
-  }
-
-  els.videoTrimScrub.addEventListener('input', onScrubInput)
-  els.videoTrimScrub.addEventListener('change', onScrubEnd)
-  els.videoTrimScrub.addEventListener('pointerup', onScrubEnd)
-  els.videoTrimScrub.addEventListener('keyup', onScrubEnd)
-
-  els.videoTrimTimeline.addEventListener(
-    'wheel',
-    (e) => {
-      if (!state.videoTrim.duration || state.busy) return
-      e.preventDefault()
-      const step = e.shiftKey ? 0.001 : 1 / 24
-      const delta = e.deltaY > 0 ? step : -step
-      const base =
-        state.videoTrim.uiTime != null
-          ? state.videoTrim.uiTime
-          : Number(els.videoTrimPreview.currentTime) || 0
-      els.videoTrimPreview.pause()
-      updateTrimPlayButton()
-      setTrimVideoTime(base + delta)
-    },
-    { passive: false },
-  )
-
-  els.videoTrimPlay.addEventListener('click', () => {
-    toggleTrimPlayback()
-  })
-}
-
-async function confirmVideoTrim() {
-  const videoId = state.videoTrimId
-  if (!videoId || state.busy) return
-  const { start, end, duration } = state.videoTrim
-  if (!(duration > 0) || !(end > start + 0.01)) {
-    els.videoTrimStatus.hidden = false
-    els.videoTrimStatus.textContent = '请选择有效的起止区间（至少约 0.01s）'
-    return
-  }
-
-  const node = state.layoutItems.find((it) => it.id === videoId)
-  state.busy = true
-  state.error = ''
-  els.videoTrimConfirm.disabled = true
-  els.videoTrimCancel.disabled = true
-  els.videoTrimClose.disabled = true
-  els.videoTrimStatus.hidden = false
-  els.videoTrimStatus.textContent = '正在裁剪…'
-  renderChrome()
-
-  try {
-    const operationId = await createProcessingPlaceholder(node, {
-      name: '视频裁剪中',
-      media: 'video',
-      references: [videoId],
-    })
-    closeVideoTrimModal(true)
-    const result = await api('/api/video-trim', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ id: videoId, start, end, client_operation_id: operationId }),
-    })
-    await reload()
-    setSelection([result.id])
-    closeVideoTrimModal(true)
-    renderCanvas()
-    renderChrome()
-  } catch (err) {
-    state.error = String(err.message || err)
-    els.videoTrimStatus.hidden = false
-    els.videoTrimStatus.textContent = state.error
-    renderChrome()
-  } finally {
-    state.busy = false
-    els.videoTrimConfirm.disabled = false
-    els.videoTrimCancel.disabled = false
-    els.videoTrimClose.disabled = false
-    renderChrome()
-  }
-}
-
 async function createProcessingPlaceholder(source, { name, media = 'image', references = [] } = {}) {
-  const id = `pending_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 8)}`
+  const id = createCanvasClientId('pending')
   const width = source?.width || (media === 'video' ? 280 : DEFAULT_W)
   const item = {
     id,
@@ -4961,7 +5102,7 @@ function installInteractiveEditorInteractions(editor) {
 }
 
 function closeInteractiveEditModal(force = false) {
-  if (!force && state.busy && state.interactiveEditImageId) return
+  if (!force && hasActiveOperations() && state.interactiveEditImageId) return
   els.interactiveEditModal.hidden = true
   state.interactiveEditImageId = null
   destroyInteractiveEditor()
@@ -4992,14 +5133,14 @@ async function saveInteractiveEditToCanvas() {
   const imageId = state.interactiveEditImageId
   const node = state.layoutItems.find((item) => item.id === imageId)
   const editor = interactiveEditor
-  if (!imageId || !editor || state.busy) return
+  if (!imageId || !editor || hasActiveOperations()) return
   if (!isPlainImageItem(node)) {
     state.error = '请对普通图片使用交互编辑'
     renderChrome()
     return
   }
 
-  state.busy = true
+  const activeOperation = beginActiveOperation('interactive-edit-save')
   state.error = ''
   setInteractiveEditControlsDisabled(true)
   els.interactiveEditStatus.hidden = false
@@ -5040,7 +5181,7 @@ async function saveInteractiveEditToCanvas() {
     els.interactiveEditStatus.hidden = false
     els.interactiveEditStatus.textContent = `保存编辑图片失败：${String(error.message || error)}`
   } finally {
-    state.busy = false
+    endActiveOperation(activeOperation)
     if (!els.interactiveEditModal.hidden) setInteractiveEditControlsDisabled(false)
     renderChrome()
   }
@@ -5051,7 +5192,7 @@ async function confirmInteractiveEdit() {
   const node = state.layoutItems.find((item) => item.id === imageId)
   const prompt = els.interactiveEditPrompt.value.trim()
   const editor = interactiveEditor
-  if (!imageId || !editor || state.busy) return
+  if (!imageId || !editor || hasActiveOperations()) return
   if (!isPlainImageItem(node)) {
     state.error = '请对普通图片使用交互编辑'
     renderChrome()
@@ -5078,7 +5219,7 @@ async function confirmInteractiveEdit() {
     return
   }
 
-  state.busy = true
+  const activeOperation = beginActiveOperation('interactive-edit')
   state.error = ''
   setInteractiveEditControlsDisabled(true)
   els.interactiveEditStatus.hidden = false
@@ -5109,14 +5250,10 @@ async function confirmInteractiveEdit() {
     renderChrome()
   } catch (error) {
     state.error = String(error.message || error)
-    if (operationId) {
-      state.layoutItems = state.layoutItems.filter((item) => item.id !== operationId)
-      await saveLayout(state.layoutItems)
-    }
     await reload().catch(() => undefined)
     renderChrome()
   } finally {
-    state.busy = false
+    endActiveOperation(activeOperation)
     renderChrome()
   }
 }
@@ -5147,7 +5284,7 @@ function openLayerDecompositionModal(imageId) {
 }
 
 function closeLayerDecompositionModal(force = false) {
-  if (!force && state.busy && state.layerDecompositionImageId) return
+  if (!force && hasActiveOperations() && state.layerDecompositionImageId) return
   els.layerDecompositionModal.hidden = true
   state.layerDecompositionImageId = null
   els.layerDecompositionImage.removeAttribute('src')
@@ -5156,7 +5293,7 @@ function closeLayerDecompositionModal(force = false) {
 async function confirmLayerDecomposition() {
   const imageId = state.layerDecompositionImageId
   const prompt = els.layerDecompositionPrompt.value.trim()
-  if (!imageId || state.busy) return
+  if (!imageId || hasActiveOperations()) return
   if (!prompt) {
     els.layerDecompositionStatus.hidden = false
     els.layerDecompositionStatus.textContent = '请输入需要模型执行的图层拆分要求'
@@ -5171,7 +5308,7 @@ async function confirmLayerDecomposition() {
     return
   }
 
-  state.busy = true
+  const activeOperation = beginActiveOperation('layer-decomposition')
   state.error = ''
   setLayerDecompositionControlsDisabled(true)
   els.layerDecompositionStatus.hidden = false
@@ -5204,14 +5341,10 @@ async function confirmLayerDecomposition() {
     renderChrome()
   } catch (err) {
     state.error = String(err.message || err)
-    if (operationId) {
-      state.layoutItems = state.layoutItems.filter((item) => item.id !== operationId)
-      await saveLayout(state.layoutItems)
-    }
     await reload().catch(() => undefined)
     renderChrome()
   } finally {
-    state.busy = false
+    endActiveOperation(activeOperation)
     setLayerDecompositionControlsDisabled(false)
     renderChrome()
   }
@@ -5220,7 +5353,7 @@ async function confirmLayerDecomposition() {
 function openFrameExtractModal(videoId) {
   const item = state.layoutItems.find((it) => it.id === videoId)
   if (!isVideoItem(item) && !String(videoId || '').startsWith('videos/')) {
-    state.error = '请对视频元素使用序列帧化'
+    state.error = '请对视频元素使用视频转序列帧图'
     renderChrome()
     return
   }
@@ -5236,7 +5369,7 @@ function openFrameExtractModal(videoId) {
 }
 
 function closeFrameExtractModal() {
-  if (state.busy && state.frameExtractVideoId) return
+  if (hasActiveOperations() && state.frameExtractVideoId) return
   els.frameExtractModal.hidden = true
   state.frameExtractVideoId = null
 }
@@ -5244,14 +5377,14 @@ function closeFrameExtractModal() {
 function readFrameExtractCount() {
   const n = Math.round(Number(els.frameExtractCount.value))
   if (!Number.isFinite(n) || n < 2 || n > 30) {
-    throw new Error('序列帧长度需在 2–30 之间')
+    throw new Error('抽取帧数需在 2–30 之间')
   }
   return n
 }
 
 async function confirmFrameExtract() {
   const videoId = state.frameExtractVideoId
-  if (!videoId || state.busy) return
+  if (!videoId || hasActiveOperations()) return
   let count
   try {
     count = readFrameExtractCount()
@@ -5262,19 +5395,19 @@ async function confirmFrameExtract() {
   }
 
   const node = state.layoutItems.find((it) => it.id === videoId)
-  state.busy = true
+  const activeOperation = beginActiveOperation('video-frame-extract')
   state.error = ''
   els.frameExtractConfirm.disabled = true
   els.frameExtractCancel.disabled = true
   els.frameExtractClose.disabled = true
   els.frameExtractCount.disabled = true
   els.frameExtractStatus.hidden = false
-  els.frameExtractStatus.textContent = `正在按帧号抽取 ${count} 帧…`
+  els.frameExtractStatus.textContent = `正在抽取 ${count} 帧并拼接 PNG…`
   renderChrome()
 
   try {
     const operationId = await createProcessingPlaceholder(node, {
-      name: '视频抽帧中',
+      name: '视频序列帧图生成中',
       references: [videoId],
     })
     els.frameExtractModal.hidden = true
@@ -5285,7 +5418,7 @@ async function confirmFrameExtract() {
       body: JSON.stringify({ id: videoId, count, client_operation_id: operationId }),
     })
     await reload()
-    if (result.sequence_id) setSelection([result.sequence_id])
+    if (result.id) setSelection([result.id])
     els.frameExtractModal.hidden = true
     state.frameExtractVideoId = null
     renderCanvas()
@@ -5296,7 +5429,7 @@ async function confirmFrameExtract() {
     els.frameExtractStatus.textContent = state.error
     renderChrome()
   } finally {
-    state.busy = false
+    endActiveOperation(activeOperation)
     els.frameExtractConfirm.disabled = false
     els.frameExtractCancel.disabled = false
     els.frameExtractClose.disabled = false
@@ -5305,6 +5438,291 @@ async function confirmFrameExtract() {
   }
 }
 
+function openFramePreviewModal(imageId) {
+  const item = state.layoutItems.find((candidate) => candidate.id === imageId)
+  if (!isPlainImageItem(item)) {
+    state.error = '请对普通图片使用序列帧预览'
+    renderChrome()
+    return
+  }
+
+  const config = suggestedFramePreviewConfig(item)
+  state.framePreviewImageId = imageId
+  els.framePreviewRows.value = String(config.rows)
+  els.framePreviewColumns.value = String(config.columns)
+  els.framePreviewFps.value = String(config.fps)
+  els.framePreviewStatus.hidden = true
+  els.framePreviewStatus.textContent = ''
+  els.framePreviewConfirm.disabled = false
+  els.framePreviewModal.hidden = false
+  updateFramePreviewBounds()
+  els.framePreviewRows.focus()
+}
+
+function closeFramePreviewModal(force = false) {
+  if (!force && els.framePreviewConfirm.disabled) return
+  els.framePreviewModal.hidden = true
+  state.framePreviewImageId = null
+}
+
+function updateFramePreviewBounds() {
+  const rows = Number(els.framePreviewRows.value)
+  const columns = Number(els.framePreviewColumns.value)
+  const valid =
+    Number.isInteger(rows) &&
+    Number.isInteger(columns) &&
+    rows >= 1 &&
+    columns >= 1 &&
+    rows <= 64 &&
+    columns <= 64 &&
+    rows * columns >= 2
+  const frameCount = valid ? rows * columns : 0
+  els.framePreviewInfo.textContent = valid
+    ? `网格 ${rows}×${columns} · 按从左到右、从上到下播放`
+    : '请输入有效的行列数（至少两格）'
+  els.framePreviewConfirm.disabled = !valid
+
+  const preview = els.framePreviewGrid
+  preview.innerHTML = ''
+  if (!valid) return
+  preview.style.gridTemplateColumns = `repeat(${columns}, 18px)`
+  preview.style.gridTemplateRows = `repeat(${rows}, 18px)`
+  for (let index = 0; index < frameCount; index += 1) {
+    const cell = document.createElement('div')
+    cell.className = 'seq-sheet-cell is-filled'
+    cell.textContent = String(index + 1)
+    cell.title = `帧 ${index + 1}`
+    preview.appendChild(cell)
+  }
+}
+
+function readFramePreviewConfig() {
+  const rows = Number(els.framePreviewRows.value)
+  const columns = Number(els.framePreviewColumns.value)
+  const fps = Number(els.framePreviewFps.value)
+  if (
+    !Number.isInteger(rows) ||
+    !Number.isInteger(columns) ||
+    rows < 1 ||
+    columns < 1 ||
+    rows > 64 ||
+    columns > 64 ||
+    rows * columns < 2
+  ) {
+    throw new Error('行列数需为 1–64 的整数，且至少两格')
+  }
+  const config = normalizeFramePreviewConfig({
+    enabled: true,
+    rows,
+    columns,
+    frameCount: rows * columns,
+    fps,
+  })
+  if (!config) {
+    throw new Error('行列数需为 1–64 的整数且至少两格，FPS 必须大于 0')
+  }
+  return config
+}
+
+function loadFramePreviewImage(imageId) {
+  return new Promise((resolve, reject) => {
+    const image = new Image()
+    image.onload = () => resolve(image)
+    image.onerror = () => reject(new Error('无法读取图片，不能检测透明空帧'))
+    image.src = imageUrl(imageId)
+  })
+}
+
+async function detectFramePreviewCount(imageId, rows, columns) {
+  const image = await loadFramePreviewImage(imageId)
+  if (!image.naturalWidth || !image.naturalHeight) return rows * columns
+  const canvas = document.createElement('canvas')
+
+  for (let index = rows * columns - 1; index >= 0; index -= 1) {
+    const row = Math.floor(index / columns)
+    const column = index % columns
+    const left = Math.floor((column * image.naturalWidth) / columns)
+    const right = Math.floor(((column + 1) * image.naturalWidth) / columns)
+    const top = Math.floor((row * image.naturalHeight) / rows)
+    const bottom = Math.floor(((row + 1) * image.naturalHeight) / rows)
+    const width = Math.max(1, right - left)
+    const height = Math.max(1, bottom - top)
+    canvas.width = width
+    canvas.height = height
+    const currentContext = canvas.getContext('2d', { willReadFrequently: true })
+    if (!currentContext) return rows * columns
+    currentContext.clearRect(0, 0, width, height)
+    currentContext.drawImage(image, left, top, width, height, 0, 0, width, height)
+    const pixels = currentContext.getImageData(0, 0, width, height).data
+    for (let offset = 3; offset < pixels.length; offset += 4) {
+      if (pixels[offset] !== 0) return index + 1
+    }
+  }
+  return 1
+}
+
+async function confirmFramePreview() {
+  const imageId = state.framePreviewImageId
+  if (!imageId || els.framePreviewConfirm.disabled) return
+
+  let config
+  try {
+    config = readFramePreviewConfig()
+  } catch (err) {
+    els.framePreviewStatus.hidden = false
+    els.framePreviewStatus.textContent = String(err.message || err)
+    return
+  }
+
+  const item = state.layoutItems.find((candidate) => candidate.id === imageId)
+  if (!isPlainImageItem(item)) {
+    closeFramePreviewModal(true)
+    state.error = '图片不存在，无法开始序列帧预览'
+    renderChrome()
+    return
+  }
+
+  els.framePreviewConfirm.disabled = true
+  els.framePreviewClose.disabled = true
+  els.framePreviewCancel.disabled = true
+  try {
+    els.framePreviewStatus.hidden = false
+    els.framePreviewStatus.textContent = '正在检查末尾透明空帧…'
+    const known =
+      normalizeFramePreviewConfig(item.framePreview) || sourceFramePreviewConfig(item)
+    const frameCount =
+      known && known.rows === config.rows && known.columns === config.columns
+        ? known.frameCount
+        : await detectFramePreviewCount(imageId, config.rows, config.columns)
+    item.framePreview = { ...config, frameCount }
+    state.frameSheetPlayback[imageId] = { index: 0, acc: 0 }
+    await saveLayout()
+    closeFramePreviewModal(true)
+    renderCanvas()
+    renderChrome()
+  } catch (err) {
+    els.framePreviewStatus.hidden = false
+    els.framePreviewStatus.textContent = String(err.message || err)
+  } finally {
+    els.framePreviewConfirm.disabled = false
+    els.framePreviewClose.disabled = false
+    els.framePreviewCancel.disabled = false
+  }
+}
+
+async function stopFrameSheetPreview(imageId) {
+  const item = state.layoutItems.find((candidate) => candidate.id === imageId)
+  const config = normalizeFramePreviewConfig(item?.framePreview)
+  if (!item || !config) return
+  item.framePreview = { ...config, enabled: false }
+  delete state.frameSheetPlayback[imageId]
+  await saveLayout()
+  renderCanvas()
+  renderChrome()
+}
+
+function openFrameEditorSplitModal(imageId) {
+  const item = state.layoutItems.find((candidate) => candidate.id === imageId)
+  if (!isPlainImageItem(item)) {
+    state.error = '请对普通图片使用序列帧编辑'
+    renderChrome()
+    return
+  }
+  const preview = frameSheetPreviewMeta(item)
+  state.frameEditorSourceImageId = imageId
+  els.frameEditorSplitRows.value = String(preview?.rows || 2)
+  els.frameEditorSplitColumns.value = String(preview?.columns || 2)
+  els.frameEditorSplitStatus.hidden = true
+  els.frameEditorSplitStatus.textContent = ''
+  els.frameEditorSplitModal.hidden = false
+  updateFrameEditorSplitInfo()
+  els.frameEditorSplitRows.focus()
+}
+
+function closeFrameEditorSplitModal(_force = false) {
+  els.frameEditorSplitModal.hidden = true
+  state.frameEditorSourceImageId = null
+}
+
+function readFrameEditorSplitGrid() {
+  const rows = Number(els.frameEditorSplitRows.value)
+  const columns = Number(els.frameEditorSplitColumns.value)
+  if (
+    !Number.isInteger(rows) ||
+    !Number.isInteger(columns) ||
+    rows < 1 ||
+    columns < 1 ||
+    rows > 64 ||
+    columns > 64
+  ) {
+    throw new Error('行数和列数必须是 1–64 的整数')
+  }
+  return { rows, columns }
+}
+
+function updateFrameEditorSplitInfo() {
+  try {
+    const { rows, columns } = readFrameEditorSplitGrid()
+    els.frameEditorSplitInfo.textContent = `将生成 ${rows * columns} 个可编辑帧格；切分允许 1×1。`
+    els.frameEditorSplitConfirm.disabled = false
+  } catch (err) {
+    els.frameEditorSplitInfo.textContent = String(err.message || err)
+    els.frameEditorSplitConfirm.disabled = true
+  }
+}
+
+async function confirmFrameEditorSplit() {
+  const sourceId = state.frameEditorSourceImageId
+  if (!sourceId || els.frameEditorSplitConfirm.disabled) return
+  let grid
+  try {
+    grid = readFrameEditorSplitGrid()
+  } catch (err) {
+    els.frameEditorSplitStatus.hidden = false
+    els.frameEditorSplitStatus.textContent = String(err.message || err)
+    return
+  }
+
+  const source = state.layoutItems.find((candidate) => candidate.id === sourceId)
+  if (!isPlainImageItem(source)) {
+    closeFrameEditorSplitModal(true)
+    state.error = '原始图片不存在，无法创建序列帧编辑器'
+    renderChrome()
+    return
+  }
+  const preview = frameSheetPreviewMeta(source)
+  const usesPreviewGrid = preview?.rows === grid.rows && preview?.columns === grid.columns
+  const frameCount = usesPreviewGrid ? preview.frameCount : grid.rows * grid.columns
+  const fps = preview?.fps || 8
+  const editorId = createCanvasClientId('frameeditor')
+  const width = source.width || DEFAULT_W
+  state.layoutItems.push({
+    id: editorId,
+    type: 'frame_editor',
+    name: '序列帧编辑',
+    x: (Number(source.x) || 0) + width + 60,
+    y: Number(source.y) || 0,
+    width: FRAME_EDITOR_W,
+    height: null,
+    sourceId,
+    sourceRows: grid.rows,
+    sourceColumns: grid.columns,
+    rows: grid.rows,
+    columns: grid.columns,
+    fps,
+    frames: Array.from({ length: frameCount }, (_, index) => ({
+      kind: 'source_cell',
+      index,
+    })),
+    error: null,
+  })
+  await saveLayout()
+  closeFrameEditorSplitModal(true)
+  setSelection([editorId])
+  renderCanvas()
+  renderChrome()
+}
+
 function selectSmartSplitAnchor(anchor) {
   state.smartSplitAnchor = anchor
   for (const button of els.smartSplitAnchorGrid.querySelectorAll('button[data-anchor]')) {
@@ -5325,7 +5743,7 @@ function setSmartSplitControlsDisabled(disabled) {
 
 function openSmartSplitModal(imageId) {
   const node = state.layoutItems.find((it) => it.id === imageId)
-  if (!node || isSequence(node)) {
+  if (!node) {
     state.error = '请对普通图片使用智能切分'
     renderChrome()
     return
@@ -5345,18 +5763,18 @@ function closeSmartSplitModal() {
 
 async function confirmSmartSplit() {
   const imageId = state.smartSplitImageId
-  if (!imageId || state.busy) return
+  if (!imageId || hasActiveOperations()) return
   await runSmartSplit(imageId, state.smartSplitAnchor)
 }
 
 async function runSmartSplit(imageId, anchor = 'center') {
   const node = state.layoutItems.find((it) => it.id === imageId)
-  if (isSequence(node)) {
+  if (!node || isVideoItem(node) || isPending(node)) {
     state.error = '请对普通图片使用智能切分'
     renderChrome()
     return
   }
-  state.busy = true
+  const activeOperation = beginActiveOperation('smart-split')
   state.error = ''
   setSmartSplitControlsDisabled(true)
   els.smartSplitStatus.hidden = false
@@ -5388,7 +5806,7 @@ async function runSmartSplit(imageId, anchor = 'center') {
     els.smartSplitStatus.textContent = state.error
     renderChrome()
   } finally {
-    state.busy = false
+    endActiveOperation(activeOperation)
     setSmartSplitControlsDisabled(false)
     renderChrome()
   }
@@ -5417,7 +5835,7 @@ function updateManualSplitPreview() {
   els.manualSplitInfo.textContent = valid
     ? `网格 ${rows}×${columns} · 将生成 ${count} 张图片`
     : '请输入有效的行列数（至少两格）'
-  els.manualSplitConfirm.disabled = !valid || state.busy
+  els.manualSplitConfirm.disabled = !valid || hasActiveOperations()
 
   const preview = els.manualSplitPreview
   preview.innerHTML = ''
@@ -5457,14 +5875,14 @@ function openManualSplitModal(imageId) {
 }
 
 function closeManualSplitModal() {
-  if (state.busy && state.manualSplitImageId) return
+  if (hasActiveOperations() && state.manualSplitImageId) return
   els.manualSplitModal.hidden = true
   state.manualSplitImageId = null
 }
 
 async function confirmManualSplit() {
   const imageId = state.manualSplitImageId
-  if (!imageId || state.busy) return
+  if (!imageId || hasActiveOperations()) return
   let grid
   try {
     grid = readManualSplitGrid()
@@ -5475,7 +5893,7 @@ async function confirmManualSplit() {
   }
 
   const node = state.layoutItems.find((item) => item.id === imageId)
-  state.busy = true
+  const activeOperation = beginActiveOperation('manual-split')
   state.error = ''
   els.manualSplitConfirm.disabled = true
   els.manualSplitClose.disabled = true
@@ -5515,7 +5933,7 @@ async function confirmManualSplit() {
     els.manualSplitStatus.textContent = state.error
     renderChrome()
   } finally {
-    state.busy = false
+    endActiveOperation(activeOperation)
     els.manualSplitConfirm.disabled = false
     els.manualSplitClose.disabled = false
     els.manualSplitCancel.disabled = false
@@ -5526,244 +5944,54 @@ async function confirmManualSplit() {
   }
 }
 
-function readSeqSheetGrid() {
-  const rows = Math.round(Number(els.seqSheetRows.value))
-  const cols = Math.round(Number(els.seqSheetCols.value))
-  if (!Number.isFinite(rows) || !Number.isFinite(cols) || rows < 1 || cols < 1) {
-    throw new Error('行数与列数需为 ≥ 1 的整数')
-  }
-  if (rows > 64 || cols > 64) {
-    throw new Error('行/列最大 64')
-  }
-  return { rows, cols }
-}
-
-function updateSeqSheetPreview() {
-  const item = state.layoutItems.find((it) => it.id === state.seqSheetId)
-  const frameCount = isSequence(item) ? item.frames.length : 0
-  let rows = Math.round(Number(els.seqSheetRows.value)) || 0
-  let cols = Math.round(Number(els.seqSheetCols.value)) || 0
-  const cells = Math.max(0, rows) * Math.max(0, cols)
-  const ok = rows >= 1 && cols >= 1 && cells >= frameCount && frameCount > 0
-  els.seqSheetFrameInfo.textContent = frameCount
-    ? `共 ${frameCount} 帧 · 格子 ${Math.max(0, rows)}×${Math.max(0, cols)}=${cells}${
-        ok ? '' : cells < frameCount ? '（不足）' : ''
-      }`
-    : '共 0 帧'
-  els.seqSheetConfirm.disabled = !ok || state.busy
-
-  const preview = els.seqSheetPreview
-  preview.innerHTML = ''
-  if (!(rows >= 1 && cols >= 1 && rows <= 64 && cols <= 64)) return
-  preview.style.gridTemplateColumns = `repeat(${cols}, 18px)`
-  preview.style.gridTemplateRows = `repeat(${rows}, 18px)`
-  // 行优先：左→右，再换行
-  for (let row = 0; row < rows; row++) {
-    for (let col = 0; col < cols; col++) {
-      const index = row * cols + col
-      const cell = document.createElement('div')
-      cell.className = `seq-sheet-cell${index < frameCount ? ' is-filled' : ''}`
-      cell.textContent = index < frameCount ? String(index + 1) : ''
-      cell.title = index < frameCount ? `帧 ${index + 1}` : '透明空位'
-      preview.appendChild(cell)
+let lastFrameSheetPreviewTimestamp = 0
+
+function tickFrameSheetPreviews(timestamp) {
+  if (!lastFrameSheetPreviewTimestamp) lastFrameSheetPreviewTimestamp = timestamp
+  const deltaSeconds = Math.min(0.25, Math.max(0, timestamp - lastFrameSheetPreviewTimestamp) / 1000)
+  lastFrameSheetPreviewTimestamp = timestamp
+
+  for (const preview of els.world.querySelectorAll('.frame-sheet-preview[data-asset-id]')) {
+    const assetId = preview.dataset.assetId
+    const item = state.layoutItems.find((candidate) => candidate.id === assetId)
+    const meta = frameSheetPreviewMeta(item)
+    if (!meta || meta.frameCount < 2) continue
+    const play = state.frameSheetPlayback[assetId] || { index: 0, acc: 0 }
+    play.acc += deltaSeconds
+    const frameDuration = 1 / meta.fps
+    let changed = false
+    const elapsedFrames = Math.floor(play.acc / frameDuration)
+    if (elapsedFrames > 0) {
+      play.acc -= elapsedFrames * frameDuration
+      play.index = (play.index + elapsedFrames) % meta.frameCount
+      changed = true
     }
+    state.frameSheetPlayback[assetId] = play
+    if (changed) applyFrameSheetPreviewFrame(preview, meta, play.index)
   }
-}
 
-function openSeqSheetModal(seqId) {
-  const item = state.layoutItems.find((it) => it.id === seqId)
-  if (!isSequence(item) || !item.frames.length) {
-    state.error = '请对含帧的序列使用拼成单图'
-    renderChrome()
-    return
-  }
-  state.seqSheetId = seqId
-  const { rows, cols } = suggestSheetGrid(item.frames.length)
-  els.seqSheetRows.value = String(rows)
-  els.seqSheetCols.value = String(cols)
-  els.seqSheetStatus.hidden = true
-  els.seqSheetStatus.textContent = ''
-  els.seqSheetCancel.disabled = false
-  els.seqSheetClose.disabled = false
-  els.seqSheetRows.disabled = false
-  els.seqSheetCols.disabled = false
-  els.seqSheetModal.hidden = false
-  updateSeqSheetPreview()
-}
-
-function closeSeqSheetModal() {
-  if (state.busy && state.seqSheetId) return
-  els.seqSheetModal.hidden = true
-  state.seqSheetId = null
-}
-
-async function confirmSeqSheet() {
-  const seqId = state.seqSheetId
-  if (!seqId || state.busy) return
-  const item = state.layoutItems.find((it) => it.id === seqId)
-  if (!isSequence(item) || !item.frames.length) {
-    els.seqSheetStatus.hidden = false
-    els.seqSheetStatus.textContent = '序列无效'
-    return
-  }
-
-  let grid
-  try {
-    grid = readSeqSheetGrid()
-    if (grid.rows * grid.cols < item.frames.length) {
-      throw new Error(`格子不足：需要至少 ${item.frames.length} 格`)
+  for (const preview of els.world.querySelectorAll('.frame-editor-preview-stage[data-editor-id]')) {
+    const editorId = preview.dataset.editorId
+    const editor = normalizeFrameEditor(
+      state.layoutItems.find((candidate) => candidate.id === editorId),
+    )
+    if (!editor || editor.frames.length < 2) continue
+    const play = state.frameSheetPlayback[editorId] || { index: 0, acc: 0 }
+    play.acc += deltaSeconds
+    const frameDuration = 1 / editor.fps
+    const elapsedFrames = Math.floor(play.acc / frameDuration)
+    if (elapsedFrames > 0) {
+      play.acc -= elapsedFrames * frameDuration
+      play.index = (play.index + elapsedFrames) % editor.frames.length
+      applyFrameEditorPreviewFrame(preview, editor, play.index)
     }
-  } catch (err) {
-    els.seqSheetStatus.hidden = false
-    els.seqSheetStatus.textContent = String(err.message || err)
-    return
+    state.frameSheetPlayback[editorId] = play
   }
 
-  state.busy = true
-  state.error = ''
-  els.seqSheetConfirm.disabled = true
-  els.seqSheetCancel.disabled = true
-  els.seqSheetClose.disabled = true
-  els.seqSheetRows.disabled = true
-  els.seqSheetCols.disabled = true
-  els.seqSheetStatus.hidden = false
-  els.seqSheetStatus.textContent = '正在拼接…'
-  renderChrome()
-
-  try {
-    const operationId = await createProcessingPlaceholder(item, {
-      name: '序列拼图中',
-      references: item.frames,
-    })
-    els.seqSheetModal.hidden = true
-    state.seqSheetId = null
-    const uploaded = await api('/api/sequence-sheet', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        frame_ids: item.frames,
-        rows: grid.rows,
-        columns: grid.cols,
-        client_operation_id: operationId,
-      }),
-    })
-    const imageId = uploaded.id
-    if (!imageId) throw new Error('序列拼图没有产物')
-    await reload()
-    setSelection([imageId])
-    closeSeqSheetModal()
-    renderCanvas()
-    renderChrome()
-  } catch (err) {
-    state.error = String(err.message || err)
-    els.seqSheetStatus.hidden = false
-    els.seqSheetStatus.textContent = state.error
-    renderChrome()
-  } finally {
-    state.busy = false
-    els.seqSheetConfirm.disabled = false
-    els.seqSheetCancel.disabled = false
-    els.seqSheetClose.disabled = false
-    els.seqSheetRows.disabled = false
-    els.seqSheetCols.disabled = false
-    updateSeqSheetPreview()
-    renderChrome()
-  }
+  requestAnimationFrame(tickFrameSheetPreviews)
 }
 
-async function ungroupSequence(seqId) {
-  const item = state.layoutItems.find((it) => it.id === seqId)
-  if (!isSequence(item)) return
-  const singles = item.frames.map((fid, i) => ({
-    id: fid,
-    x: (item.x || 0) + (i % 4) * 40,
-    y: (item.y || 0) + Math.floor(i / 4) * 40,
-    width: item.width || DEFAULT_W,
-    height: null,
-  }))
-  state.layoutItems = [
-    ...state.layoutItems.filter((it) => it.id !== seqId),
-    ...singles,
-  ]
-  delete state.playback[seqId]
-  closeSeqModal()
-  await saveLayout(state.layoutItems)
-  await reload()
-}
-
-async function combineImagesAsSequence(imageIds) {
-  const ids = [...new Set((imageIds || []).filter(Boolean))]
-  if (ids.length < 2) return
-  const images = ids
-    .map((id) => state.layoutItems.find((item) => item.id === id))
-    .filter(Boolean)
-  if (images.length !== ids.length || !images.every(isPlainImageItem)) {
-    state.error = '只有全部选中项都是普通图片时，才能组合为序列帧'
-    renderChrome()
-    return
-  }
-
-  images.sort(
-    (a, b) =>
-      (Number(a.y) || 0) - (Number(b.y) || 0) ||
-      (Number(a.x) || 0) - (Number(b.x) || 0),
-  )
-  const selected = new Set(images.map((item) => item.id))
-  const seqId = `seq_${Date.now().toString(36)}`
-  const sequence = {
-    id: seqId,
-    type: 'sequence',
-    name: `序列 · ${images.length} 帧`,
-    x: Math.min(...images.map((item) => Number(item.x) || 0)),
-    y: Math.min(...images.map((item) => Number(item.y) || 0)),
-    width: images[0].width || DEFAULT_W,
-    height: null,
-    frames: images.map((item) => item.id),
-    fps: 8,
-    loop: true,
-  }
-  state.layoutItems = [
-    ...state.layoutItems.filter((item) => !selected.has(item.id)),
-    sequence,
-  ]
-  state.playback[seqId] = { index: 0, acc: 0 }
-  await saveLayout(state.layoutItems)
-  await reload()
-  setSelection([seqId])
-  renderCanvas()
-  renderChrome()
-}
-
-let lastTs = 0
-function tickPlayback(ts) {
-  if (!lastTs) lastTs = ts
-  const dt = (ts - lastTs) / 1000
-  lastTs = ts
-  let dirty = false
-  for (const item of state.layoutItems) {
-    if (!isSequence(item) || item.frames.length < 2) continue
-    const fps = Number(item.fps) > 0 ? Number(item.fps) : 8
-    const play = state.playback[item.id] || { index: 0, acc: 0 }
-    play.acc += dt
-    const step = 1 / fps
-    while (play.acc >= step) {
-      play.acc -= step
-      if (item.loop === false) {
-        if (play.index < item.frames.length - 1) {
-          play.index += 1
-          dirty = true
-        }
-      } else {
-        play.index = (play.index + 1) % item.frames.length
-        dirty = true
-      }
-    }
-    state.playback[item.id] = play
-  }
-  if (dirty) updateSequenceFramesOnly()
-  requestAnimationFrame(tickPlayback)
-}
-requestAnimationFrame(tickPlayback)
+requestAnimationFrame(tickFrameSheetPreviews)
 
 const SLOW_ASSET_SYNC_INTERVAL_MS = 5 * 60 * 1000
 
@@ -5776,13 +6004,13 @@ function scheduleSlowAssetSync() {
 
 async function runCutout(imageId) {
   const source = state.layoutItems.find((item) => item.id === imageId)
-  if (!source || isSequence(source) || isPending(source) || isVideoItem(source)) {
+  if (!source || isPending(source) || isVideoItem(source)) {
     state.error = '请对普通图片使用抠图'
     renderChrome()
     return
   }
 
-  const pendingId = `job_cutout_${Date.now().toString(36)}`
+  const pendingId = createCanvasClientId('job_cutout')
   const pending = {
     id: pendingId,
     type: 'pending',
@@ -5794,14 +6022,13 @@ async function runCutout(imageId) {
     references: [{ id: imageId, role: 'source' }],
   }
   state.layoutItems.push(pending)
-  state.busy = true
+  const activeOperation = beginActiveOperation('cutout')
   state.error = ''
   setSelection([pendingId])
-  await saveLayout(state.layoutItems)
-  renderCanvas()
-  renderChrome()
-
   try {
+    await saveLayout(state.layoutItems)
+    renderCanvas()
+    renderChrome()
     const result = await api('/api/cutout', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
@@ -5810,27 +6037,13 @@ async function runCutout(imageId) {
         client_operation_id: pendingId,
       }),
     })
-    state.layoutItems = state.layoutItems.map((item) =>
-      item.id === pendingId
-        ? {
-            id: result.id,
-            x: item.x,
-            y: item.y,
-            width: item.width,
-            height: item.height,
-          }
-        : item,
-    )
-    await saveLayout(state.layoutItems)
     await reload()
     setSelection([result.id])
   } catch (err) {
     state.error = String(err.message || err)
-    state.layoutItems = state.layoutItems.filter((item) => item.id !== pendingId)
-    await saveLayout(state.layoutItems)
     await reload()
   } finally {
-    state.busy = false
+    endActiveOperation(activeOperation)
     renderCanvas()
     renderChrome()
   }