evomeme 0.1.9 → 0.1.10-beta.13

package/dist/canvas-public/dialogs/context-menu.js

@@ -0,0 +1,118 @@
+import { listFeatures } from '../core/feature-registry.js'
+import { t } from '../language/index.js'
+import { state } from '../core/state.js'
+import {
+  isInteractiveCanvasUi,
+  isPending,
+  isVideoItem,
+} from '../elements/types.js'
+import { isTileMapItem } from '../map/model.js'
+
+export function createContextMenu({ clientToWorld, elements, isSelected }) {
+  const els = elements
+  const featureActions = []
+  for (const definition of listFeatures()) {
+    for (const entry of definition.menu || []) {
+      const kind = entry.kind || definition.id
+      let button = els.ctxMenu.querySelector('[data-action="' + kind + '"]')
+      if (!button) {
+        button = document.createElement('button')
+        button.type = 'button'
+        button.dataset.action = kind
+        const group = entry.group ? els.ctxMenu.querySelector('[data-submenu="' + entry.group + '"] .ctx-submenu-panel') : null
+        if (group) { button.setAttribute('role', 'menuitem'); group.append(button) }
+        else els.ctxMenu.insertBefore(button, els.ctxMenu.querySelector('[data-action="delete"]'))
+      }
+      button.dataset.i18n = entry.title || definition.title
+      button.textContent = t(entry.title || definition.title)
+      featureActions.push({ button, entry, definition, accepts: entry.accepts || ['image'] })
+    }
+  }
+
+  function hideCtxMenu() {
+    closeCtxSubmenus()
+    els.ctxMenu.hidden = true
+    state.ctxTargetId = null
+    state.ctxCanvasPoint = null
+  }
+  
+  function closeCtxSubmenus(except = null) {
+    for (const submenu of els.ctxMenu.querySelectorAll('.ctx-submenu')) {
+      if (submenu === except) continue
+      submenu.classList.remove('is-open')
+      submenu.querySelector('.ctx-submenu-trigger')?.setAttribute('aria-expanded', 'false')
+    }
+  }
+  
+  function syncCtxSubmenuVisibility() {
+    for (const submenu of els.ctxMenu.querySelectorAll('.ctx-submenu')) {
+      const hasVisibleAction = [...submenu.querySelectorAll('button[data-action]')]
+        .some((button) => !button.hidden)
+      submenu.hidden = !hasVisibleAction
+      if (!hasVisibleAction) {
+        submenu.classList.remove('is-open')
+        submenu.querySelector('.ctx-submenu-trigger')?.setAttribute('aria-expanded', 'false')
+      }
+    }
+  }
+  
+  function showCtxMenu(clientX, clientY, node) {
+    state.ctxTargetId = node.id
+    state.ctxCanvasPoint = null
+    const selectedIds = isSelected(node.id) ? [...state.selectedIds] : [node.id]
+    const isMulti = selectedIds.length > 1
+    if (isMulti || (isInteractiveCanvasUi(node) && !isTileMapItem(node))) {
+      for (const button of els.ctxMenu.querySelectorAll('button[data-action]')) {
+        button.hidden = button.dataset.action !== 'delete'
+      }
+    } else {
+      const isDialog = isInteractiveCanvasUi(node)
+      const pending = isPending(node)
+      const isVid = isVideoItem(node)
+      const isImage = !isDialog && !pending && !isVid && !isTileMapItem(node)
+      els.ctxMenu.querySelector('[data-action="export-tile-map"]').hidden = !isTileMapItem(node)
+      els.ctxMenu.querySelector('[data-action="copy"]').hidden = pending || isDialog
+      els.ctxMenu.querySelector('[data-action="paste"]').hidden = true
+      for (const { button, entry, definition, accepts } of featureActions) {
+        button.hidden = !(isImage && accepts.includes('image')) && !(isVid && accepts.includes('video'))
+        button.textContent = t(entry.titleFor?.(node) || entry.title || definition.title)
+      }
+      els.ctxMenu.querySelector('[data-action="delete"]').hidden = false
+    }
+    syncCtxSubmenuVisibility()
+    positionCtxMenu(clientX, clientY)
+  }
+  
+  function showCanvasCtxMenu(clientX, clientY) {
+    state.ctxTargetId = null
+    state.ctxCanvasPoint = clientToWorld(clientX, clientY)
+    for (const button of els.ctxMenu.querySelectorAll('button[data-action]')) {
+      button.hidden = button.dataset.action !== 'paste'
+    }
+    syncCtxSubmenuVisibility()
+    positionCtxMenu(clientX, clientY)
+  }
+  
+  function positionCtxMenu(clientX, clientY) {
+    els.ctxMenu.hidden = false
+    const pad = 8
+    const rect = els.ctxMenu.getBoundingClientRect()
+    const w = rect.width || 160
+    const h = rect.height || 120
+    const left = Math.min(clientX, window.innerWidth - w - pad)
+    const top = Math.min(clientY, window.innerHeight - h - pad)
+    const boundedLeft = Math.max(pad, left)
+    els.ctxMenu.style.left = `${boundedLeft}px`
+    els.ctxMenu.style.top = `${Math.max(pad, top)}px`
+    els.ctxMenu.classList.toggle('is-submenu-left', boundedLeft + w + 173 > window.innerWidth)
+  }
+
+  return {
+    closeCtxSubmenus,
+    hideCtxMenu,
+    positionCtxMenu,
+    showCanvasCtxMenu,
+    showCtxMenu,
+    syncCtxSubmenuVisibility,
+  }
+}

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

@@ -0,0 +1,100 @@
+import { t } from '../language/index.js'
+import { canvasElementKind, uiDefinitionFor } from './registry.js'
+
+export function canvasNodeZIndex(item, index, selected = false) {
+  const order = Math.max(0, Number(index) || 0)
+  const kind = canvasElementKind(item)
+  const elevated = kind === 'ui' || kind === 'map'
+  return (elevated ? 100000 : 1) + (selected ? 10000 : 0) + order
+}
+
+export function isResizableCanvasPanel(item) {
+  const kind = canvasElementKind(item)
+  return kind === 'ui' || kind === 'map'
+}
+
+export function canvasNodeDisplayName(item, fallback = '') {
+  return String(item?.name || fallback || item?.id || '')
+}
+
+export function applyCanvasNodeFrame(element, item, index, selected = false) {
+  const kind = canvasElementKind(item)
+  const uiDefinition = uiDefinitionFor(item)
+
+  element.classList.add('canvas-node')
+  element.classList.toggle('is-selected', selected)
+  for (const className of uiDefinition?.classNames || []) element.classList.add(className)
+  if (kind === 'map') element.classList.add('is-tile-map')
+  if (kind === 'video') element.classList.add('is-video')
+  element.style.left = `${item.x}px`
+  element.style.top = `${item.y}px`
+  element.style.width = `${item.width}px`
+  element.style.zIndex = String(canvasNodeZIndex(item, index, selected))
+  element.dataset.id = item.id
+  element.dataset.name = canvasNodeDisplayName(item)
+  element.setAttribute('aria-label', canvasNodeDisplayName(item, t("elements.base.text001")))
+
+  if ((isResizableCanvasPanel(item) || kind === 'loading') && Number(item.height) > 0) {
+    element.style.height = `${item.height}px`
+    element.classList.toggle('is-manual-size', isResizableCanvasPanel(item))
+  } else if (isResizableCanvasPanel(item) || kind === 'loading') {
+    element.style.height = ''
+    element.classList.remove('is-manual-size')
+  }
+
+  return element
+}
+
+/** World-space geometry shared by every canvas element and dependency arrow. */
+export function canvasNodeWorldBox(element, item, fallbackWidth = 220) {
+  const x = Number.parseFloat(element?.style?.left) || Number(item?.x) || 0
+  const y = Number.parseFloat(element?.style?.top) || Number(item?.y) || 0
+  const width = element?.offsetWidth || Number(item?.width) || fallbackWidth
+  const height = element?.offsetHeight || Number.parseFloat(element?.style?.height) ||
+    Number(item?.height) || 120
+  return { x, y, width, height, cx: x + width / 2, cy: y + height / 2 }
+}
+
+export function updateCanvasNodeGeometry(element, item, index, selected = false) {
+  if (!element || !item) return
+  element.style.left = `${Number(item.x) || 0}px`
+  element.style.top = `${Number(item.y) || 0}px`
+  element.style.width = `${Number(item.width) || 0}px`
+  element.style.zIndex = String(canvasNodeZIndex(item, index, selected))
+  const panel = isResizableCanvasPanel(item)
+  if (panel || canvasElementKind(item) === 'loading') {
+    element.style.height = Number(item.height) > 0 ? `${item.height}px` : ''
+    element.classList.toggle('is-manual-size', panel && Number(item.height) > 0)
+  }
+}
+
+export function setCanvasNodePosition(element, item, x, y) {
+  if (item) {
+    item.x = x
+    item.y = y
+  }
+  if (element) {
+    element.style.left = `${x}px`
+    element.style.top = `${y}px`
+  }
+}
+
+export function findCanvasNodeElement(world, id) {
+  return [...(world?.children || [])].find((element) => element.dataset?.id === id) || null
+}
+
+export function createCanvasNodeCaption(item) {
+  const caption = document.createElement('div')
+  caption.className = 'canvas-node-caption'
+  caption.textContent = canvasNodeDisplayName(item)
+  return caption
+}
+
+export function createCanvasNodeElement(item, index, selected = false) {
+  return applyCanvasNodeFrame(document.createElement('div'), item, index, selected)
+}
+
+export function bindCanvasNodeInteractions(element, item, { onPointerDown, onContextMenu }) {
+  element.addEventListener('pointerdown', (event) => onPointerDown(event, item))
+  element.addEventListener('contextmenu', (event) => onContextMenu(event, item))
+}

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

@@ -0,0 +1,105 @@
+import { canvasNodeWorldBox } from './base.js'
+
+const SVG_NS = 'http://www.w3.org/2000/svg'
+
+function svgElement(name, attributes = {}) {
+  const element = document.createElementNS(SVG_NS, name)
+  for (const [key, value] of Object.entries(attributes)) {
+    element.setAttribute(key, String(value))
+  }
+  return element
+}
+
+export function createDependencyLayer() {
+  const svg = svgElement('svg', {
+    class: 'dependency-layer',
+    'aria-hidden': 'true',
+  })
+  const defs = svgElement('defs')
+  const glow = svgElement('filter', {
+    id: 'dependency-glow',
+    x: '-60%',
+    y: '-60%',
+    width: '220%',
+    height: '220%',
+  })
+  glow.appendChild(svgElement('feGaussianBlur', { stdDeviation: '3.5' }))
+  const marker = svgElement('marker', {
+    id: 'dependency-arrow',
+    viewBox: '0 0 12 12',
+    refX: '10',
+    refY: '6',
+    markerWidth: '10',
+    markerHeight: '10',
+    orient: 'auto',
+    markerUnits: 'userSpaceOnUse',
+  })
+  marker.appendChild(svgElement('path', {
+    d: 'M 1 1 L 11 6 L 1 11 Z',
+    class: 'dependency-arrow',
+  }))
+  defs.append(glow, marker)
+  svg.append(defs, svgElement('g', { class: 'dependency-edges' }))
+  return svg
+}
+
+export function dependencyNodeBox(element, item, fallbackWidth) {
+  // Every canvas element is measured in the same world coordinate system.
+  // Camera zoom transforms the common world once and must never be applied or
+  // reversed for an individual UI subtype.
+  return element ? canvasNodeWorldBox(element, item, fallbackWidth) : null
+}
+
+export function dependencyCurve(source, target, fanOffset = 0) {
+  const dx = target.cx - source.cx
+  const dy = target.cy - source.cy
+  if (Math.abs(dx) >= Math.abs(dy)) {
+    const direction = dx >= 0 ? 1 : -1
+    const sx = direction > 0 ? source.x + source.width : source.x
+    const tx = direction > 0 ? target.x : target.x + target.width
+    const sy = source.cy + fanOffset
+    const ty = target.cy + fanOffset * 0.35
+    const bend = Math.max(70, Math.min(260, Math.abs(tx - sx) * 0.55))
+    return `M ${sx} ${sy} C ${sx + direction * bend} ${sy}, ${tx - direction * bend} ${ty}, ${tx} ${ty}`
+  }
+
+  const direction = dy >= 0 ? 1 : -1
+  const sx = source.cx + fanOffset
+  const tx = target.cx + fanOffset * 0.35
+  const sy = direction > 0 ? source.y + source.height : source.y
+  const ty = direction > 0 ? target.y : target.y + target.height
+  const bend = Math.max(70, Math.min(260, Math.abs(ty - sy) * 0.55))
+  return `M ${sx} ${sy} C ${sx} ${sy + direction * bend}, ${tx} ${ty - direction * bend}, ${tx} ${ty}`
+}
+
+export function createDependencyEdge({ sourceId, targetId, fanOffset, path, active, title }) {
+  const group = svgElement('g', {
+    class: `dependency-edge${active ? ' is-active' : ''}`,
+    'data-source-id': sourceId,
+    'data-target-id': targetId,
+    'data-fan-offset': fanOffset,
+  })
+  const titleElement = svgElement('title')
+  titleElement.textContent = title
+  group.append(
+    titleElement,
+    svgElement('path', { d: path, class: 'dependency-path dependency-path-glow' }),
+    svgElement('path', {
+      d: path,
+      class: 'dependency-path dependency-path-base',
+      'marker-end': 'url(#dependency-arrow)',
+    }),
+    svgElement('path', { d: path, class: 'dependency-path dependency-path-flow' }),
+  )
+  return group
+}
+
+export function updateDependencyEdgeGeometry(layer, resolveBox) {
+  for (const group of layer?.querySelectorAll('.dependency-edge') || []) {
+    const source = resolveBox(group.dataset.sourceId)
+    const target = resolveBox(group.dataset.targetId)
+    if (!source || !target) continue
+    const path = dependencyCurve(source, target, Number(group.dataset.fanOffset) || 0)
+    for (const element of group.querySelectorAll('.dependency-path')) element.setAttribute('d', path)
+  }
+}

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

@@ -0,0 +1,53 @@
+import { state } from '../core/state.js'
+import { setCanvasNodePosition } from './base.js'
+
+export function shouldIgnoreCanvasElementPointer(event) {
+  return Boolean(
+    event.target?.closest?.('.ref-handle, .canvas-resize-handle') ||
+    event.target?.closest?.('.gen-dialog-chrome .ghost-btn') ||
+    event.target?.closest?.('button, input, textarea, select, label, summary, details, [contenteditable="true"]'),
+  )
+}
+
+export function moveCanvasElements({ ids, origins, startWorld }, world, findElement) {
+  const dx = world.x - startWorld.x
+  const dy = world.y - startWorld.y
+  for (const id of ids) {
+    const origin = origins.get(id)
+    if (!origin) continue
+    const item = state.layoutItems.find((candidate) => candidate.id === id)
+    setCanvasNodePosition(findElement(id), item, origin.x + dx, origin.y + dy)
+  }
+}
+
+export function resizeCanvasElements(resize, world, findElement) {
+  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.width = width
+      item.height = height
+      item.manualSize = true
+    }
+    const element = findElement(id)
+    setCanvasNodePosition(element, item, x, y)
+    if (element) element.style.width = `${width}px`
+  }
+}

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

@@ -0,0 +1,259 @@
+import { t } from '../language/index.js'
+import { state } from '../core/state.js'
+import { createCanvasNodeCaption } from './base.js'
+
+export 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 }
+}
+
+export function normalizeScrollPreviewConfig(value) {
+  if (!value || typeof value !== 'object') return null
+  const speed = Number(value.speed)
+  const direction = value.direction === 'right' ? 'right' : value.direction === 'left' ? 'left' : null
+  if (!direction || !Number.isFinite(speed) || speed < 1 || speed > 2000) return null
+  return { enabled: value.enabled === true, direction, speed }
+}
+
+export function suggestedScrollPreviewConfig(item) {
+  return normalizeScrollPreviewConfig(item?.scrollPreview) || {
+    enabled: false,
+    direction: 'left',
+    speed: 60,
+  }
+}
+
+export function scrollImagePreviewMeta(item) {
+  const config = normalizeScrollPreviewConfig(item?.scrollPreview)
+  return config?.enabled ? config : null
+}
+
+export function advanceScrollPreviewOffset(offset, config, deltaSeconds, width) {
+  const distance = Number(config?.speed) * Number(deltaSeconds)
+  const period = Number(width)
+  if (!Number.isFinite(distance) || !Number.isFinite(period) || period <= 0) return 0
+  const direction = config?.direction === 'right' ? -1 : 1
+  return ((Number(offset || 0) + direction * distance) % period + period) % period
+}
+
+export function applyScrollImagePreviewOffset(preview, offset) {
+  const track = preview?.querySelector('[data-role="scroll-image-track"]')
+  if (!track) return
+  // Whole-pixel translation plus a small image overlap prevents the compositor from
+  // sampling the dark node background between two independently painted images.
+  const alignedOffset = Math.round(Number(offset || 0))
+  track.style.transform = `translate3d(${-alignedOffset}px, 0, 0)`
+}
+
+export 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
+}
+
+export 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 }
+}
+
+export 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,
+  }
+}
+
+export 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}%)`
+}
+
+export function mountImageElement(element, item, context) {
+  const {
+    appendResizeHandles,
+    applyImageDisplaySize,
+    clearRefDragHighlight,
+    imageName,
+    imageUrl,
+    interaction,
+    renderInspector,
+    requestDependencyEdgeUpdate,
+    setRefDragHighlight,
+  } = context
+
+  element.classList.add('is-image')
+
+  const handle = document.createElement('div')
+  handle.className = 'ref-handle'
+  handle.title = t("elements.image.text001")
+  handle.textContent = t("elements.image.text002")
+  handle.draggable = true
+  handle.addEventListener('dragstart', (event) => {
+    event.stopPropagation()
+    const refId = item.id
+    event.dataTransfer.setData(
+      'application/x-canvas-image',
+      JSON.stringify({
+        id: refId,
+        name: imageName(refId),
+        url: imageUrl(refId),
+      }),
+    )
+    event.dataTransfer.setData('text/plain', refId)
+    event.dataTransfer.effectAllowed = 'copy'
+    interaction.htmlDrag = true
+    setRefDragHighlight(new Set(['image']))
+  })
+  handle.addEventListener('dragend', () => {
+    interaction.htmlDrag = false
+    clearRefDragHighlight()
+  })
+  handle.addEventListener('pointerdown', (event) => event.stopPropagation())
+
+  const scrollPreview = scrollImagePreviewMeta(item)
+  const frameSheet = scrollPreview ? null : frameSheetPreviewMeta(item)
+  let mediaPreview
+  if (scrollPreview) {
+    element.classList.add('is-scroll-image-preview')
+    const preview = document.createElement('div')
+    preview.className = 'scroll-image-preview'
+    preview.dataset.assetId = item.id
+    const dimensions = state.imageDims[item.id]
+    preview.style.aspectRatio =
+      dimensions?.w > 0 && dimensions?.h > 0 ? `${dimensions.w} / ${dimensions.h}` : '7 / 3'
+
+    const track = document.createElement('div')
+    track.className = 'scroll-image-preview-track'
+    track.dataset.role = 'scroll-image-track'
+    for (let index = 0; index < 2; index += 1) {
+      const image = document.createElement('img')
+      image.src = item.url
+      image.alt = index === 0 ? item.name : ''
+      image.draggable = false
+      image.dataset.role = 'scroll-image-copy'
+      if (index === 1) image.setAttribute('aria-hidden', 'true')
+      if (index === 0) {
+        image.addEventListener('load', () => {
+          if (image.naturalWidth > 0 && image.naturalHeight > 0) {
+            state.imageDims[item.id] = { w: image.naturalWidth, h: image.naturalHeight }
+            preview.style.aspectRatio = `${image.naturalWidth} / ${image.naturalHeight}`
+            applyImageDisplaySize(item.id, image.naturalWidth, image.naturalHeight)
+            if (state.selectedIds.has(item.id)) renderInspector()
+          }
+          requestDependencyEdgeUpdate()
+        })
+      }
+      track.appendChild(image)
+    }
+    preview.appendChild(track)
+    const play = state.scrollImagePlayback[item.id] || { offset: 0 }
+    state.scrollImagePlayback[item.id] = play
+    applyScrollImagePreviewOffset(preview, play.offset)
+    mediaPreview = preview
+  } else if (frameSheet) {
+    element.classList.add('is-frame-sheet-preview')
+    const preview = document.createElement('div')
+    preview.className = 'frame-sheet-preview'
+    preview.dataset.assetId = item.id
+    preview.style.aspectRatio =
+      frameSheet.cellWidth && frameSheet.cellHeight
+        ? `${frameSheet.cellWidth} / ${frameSheet.cellHeight}`
+        : '1 / 1'
+    const image = document.createElement('img')
+    image.src = item.url
+    image.alt = item.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[item.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(item.id, frameWidth, frameHeight)
+      }
+      requestDependencyEdgeUpdate()
+    })
+    preview.appendChild(image)
+    const play = state.frameSheetPlayback[item.id] || { index: 0, acc: 0 }
+    state.frameSheetPlayback[item.id] = play
+    applyFrameSheetPreviewFrame(preview, frameSheet, play.index)
+    mediaPreview = preview
+  } else {
+    const image = document.createElement('img')
+    image.src = item.url
+    image.alt = item.name
+    image.draggable = false
+    image.dataset.role = 'frame'
+    image.addEventListener('load', () => {
+      if (image.naturalWidth > 0 && image.naturalHeight > 0) {
+        state.imageDims[item.id] = { w: image.naturalWidth, h: image.naturalHeight }
+        applyImageDisplaySize(item.id, image.naturalWidth, image.naturalHeight)
+        if (state.selectedIds.has(item.id)) renderInspector()
+      }
+      requestDependencyEdgeUpdate()
+    })
+    mediaPreview = image
+  }
+
+  element.append(handle, mediaPreview, createCanvasNodeCaption(item))
+  appendResizeHandles(element, item)
+}

package/dist/canvas-public/elements/loading-recovery.js

@@ -0,0 +1,5 @@
+// Compatibility entry point for callers that have not moved to task-pipeline.js yet.
+export {
+  createCanvasTaskPipeline,
+  createCanvasTaskPipeline as createLoadingController,
+} from './task-pipeline.js'

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

@@ -0,0 +1,21 @@
+import { t } from '../language/index.js'
+
+export function pendingStateLabel(item) {
+  if (item.taskStatus === 'INTERRUPTED') return t("elements.loading.text001")
+  if (item.taskStatus === 'NEEDS_ATTENTION') return t("elements.loading.text002")
+  if (item.taskStatus === 'QUEUED') return t("elements.loading.text003")
+  if (item.taskStatus === 'DOWNLOADING') return t("elements.loading.text004")
+  return item.error ? t("elements.loading.text005") : item.media === 'video' ? t("elements.loading.text006") : t("elements.loading.text007")
+}
+
+export function mountLoadingElement(element, item) {
+  element.classList.add('is-pending')
+  if (item.media === 'video') element.classList.add('is-pending-video')
+  if (item.error && item.taskStatus !== 'INTERRUPTED') element.classList.add('is-pending-error')
+  if (item.height) element.style.height = `${item.height}px`
+
+  const stage = document.createElement('div')
+  stage.className = 'pending-stage'
+  stage.innerHTML = '<div class="pending-aura"></div>'
+  element.appendChild(stage)
+}