evomeme 0.1.9 → 0.1.10

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

@@ -0,0 +1,222 @@
+import { t } from '../language/index.js'
+export function el(tag, className, text) {
+  const node = document.createElement(tag)
+  if (className) node.className = className
+  if (text != null) node.textContent = text
+  return node
+}
+
+export function createInput(type = 'text', value = '', options = {}) {
+  const input = document.createElement('input')
+  input.type = type
+  if (type !== 'file') input.value = String(value ?? '')
+  if (options.placeholder) input.placeholder = options.placeholder
+  if (options.disabled === true) input.disabled = true
+  if (options.maxLength != null) input.maxLength = Number(options.maxLength)
+  if (options.min != null) input.min = String(options.min)
+  if (options.max != null) input.max = String(options.max)
+  if (options.step != null) input.step = String(options.step)
+  if (options.label) input.setAttribute('aria-label', options.label)
+  return input
+}
+
+export function createTextInput(value = '', options = {}) {
+  return createInput(options.type || 'text', value, options)
+}
+
+export function createNumberInput(value, options = {}) {
+  const input = createInput('number', value, { step: 1, ...options })
+  input.addEventListener('keydown', (event) => {
+    if (event.key === 'Enter') input.blur()
+  })
+  return input
+}
+
+export function createIntegerInput(value, options = {}) {
+  return createNumberInput(value, { ...options, step: 1 })
+}
+
+export function createColorInput(value = '#000000', options = {}) {
+  const normalized = /^#[0-9a-f]{6}$/i.test(String(value || ''))
+    ? String(value).toLowerCase()
+    : '#000000'
+  return createInput('color', normalized, options)
+}
+
+export function createTextarea(value = '', options = {}) {
+  const textarea = document.createElement('textarea')
+  textarea.value = String(value ?? '')
+  textarea.rows = Number(options.rows) || 3
+  if (options.placeholder) textarea.placeholder = options.placeholder
+  if (options.disabled === true) textarea.disabled = true
+  return textarea
+}
+
+export function createCheckbox(checked = false, options = {}) {
+  const input = createInput('checkbox')
+  input.checked = checked === true
+  input.disabled = options.disabled === true
+  return input
+}
+
+export function createSelect(values = [], current = null, labelFn = (value) => String(value)) {
+  const select = document.createElement('select')
+  fillSelect(select, values, current, labelFn)
+  return select
+}
+
+export function createEnumSelect(values = [], current = null, labelFn = (value) => String(value)) {
+  return createSelect(values, current, labelFn)
+}
+
+export function fillSelect(select, values, current, labelFn = (value) => String(value)) {
+  select.innerHTML = ''
+  for (const value of values) {
+    const option = document.createElement('option')
+    option.value = String(value)
+    option.textContent = labelFn(value)
+    select.appendChild(option)
+  }
+  if (current != null && [...select.options].some((option) => option.value === String(current))) {
+    select.value = String(current)
+  }
+  return select
+}
+
+export function createField(labelText, control, className = 'insp-field') {
+  const field = el('label', className)
+  field.appendChild(document.createTextNode(labelText))
+  field.appendChild(control)
+  return field
+}
+
+/** Accessible native checkbox behavior, styled as a switch on every surface. */
+export function createSwitch() {
+  const root = el('label', 'ui-switch')
+  const input = createCheckbox()
+  input.setAttribute('role', 'switch')
+  const track = el('span', 'ui-switch-track')
+  track.setAttribute('aria-hidden', 'true')
+  root.append(input, track)
+  return { root, input }
+}
+
+let referenceDragKinds = null
+function highlightReferenceZone(zone) {
+  const accept = (zone.dataset.accept || 'image').split(',')
+  const match =
+    referenceDragKinds &&
+    zone.dataset.disabled !== 'true' &&
+    accept.some(
+      (kind) =>
+        kind === 'any' ||
+        referenceDragKinds.has(kind) ||
+        (kind === 'media' &&
+          [...referenceDragKinds].some((value) => ['video', 'audio'].includes(value))),
+    )
+  zone.classList.toggle('is-ref-target', Boolean(match))
+}
+export function setRefDragHighlight(kinds) {
+  referenceDragKinds = kinds instanceof Set && kinds.size ? kinds : null
+  document.body.classList.toggle('is-ref-dragging', Boolean(referenceDragKinds))
+  document.querySelectorAll('.prompt-drop-zone').forEach(highlightReferenceZone)
+}
+export function clearRefDragHighlight() {
+  setRefDragHighlight(null)
+}
+
+/** A stable drop zone. Updating thumbnails never replaces the prompt or focused controls. */
+export function createImageReferenceInput({
+  references = [],
+  disabled = false,
+  className = '',
+  label = '',
+  labelClassName = '',
+  accept = ['image'],
+  imageUrl = (ref) => ref?.url || '',
+  imageName = (ref) => ref?.name || ref?.id || '',
+  onRemove,
+  onDrop,
+} = {}) {
+  const root = el('div', 'prompt-drop-zone reference-input' + (className ? ' ' + className : ''))
+  root.dataset.accept = accept.join(',')
+  if (label) root.append(el('div', labelClassName, label))
+  const strip = el('div', 'ref-strip')
+  const hint = el('div', 'reference-drop-hint', t('ui.reference.dropHint'))
+  root.append(strip, hint)
+  let isDisabled = disabled
+  let signature = ''
+  root.updateReferences = (nextRefs, nextDisabled = false) => {
+    isDisabled = nextDisabled
+    root.dataset.disabled = String(isDisabled)
+    highlightReferenceZone(root)
+    hint.hidden = nextRefs.length > 0
+    strip.hidden = !nextRefs.length
+    const nextSignature = JSON.stringify([nextRefs, nextDisabled])
+    if (signature === nextSignature) return
+    signature = nextSignature
+    strip.replaceChildren()
+    for (const ref of nextRefs) {
+      const chip = el('div', 'ref-chip')
+      chip.title = imageName(ref)
+      const url = imageUrl(ref)
+      const preview = url ? el('img') : el('span', 'reference-media-label', imageName(ref))
+      if (url) {
+        preview.src = url
+        preview.alt = imageName(ref)
+        preview.draggable = false
+      }
+      const remove = el('button', null, '×')
+      remove.type = 'button'
+      remove.title = t('ui.controls.text001')
+      remove.setAttribute('aria-label', t('ui.controls.text001'))
+      remove.disabled = isDisabled
+      remove.addEventListener('pointerdown', (event) => event.stopPropagation())
+      remove.addEventListener('click', (event) => {
+        event.preventDefault()
+        event.stopPropagation()
+        if (!isDisabled) onRemove?.(ref)
+      })
+      chip.append(preview, remove)
+      strip.append(chip)
+    }
+  }
+  const isReferenceDrag = (event) =>
+    [...(event.dataTransfer?.types || [])].some((type) =>
+      ['application/x-canvas-image', 'application/x-canvas-media', 'text/plain'].includes(type),
+    )
+  root.addEventListener('dragover', (event) => {
+    if (isDisabled || !isReferenceDrag(event)) return
+    event.preventDefault()
+    event.stopPropagation()
+    event.dataTransfer.dropEffect = 'copy'
+    root.classList.add('is-drop')
+  })
+  root.addEventListener('dragleave', (event) => {
+    if (!root.contains(event.relatedTarget)) root.classList.remove('is-drop')
+  })
+  root.addEventListener('drop', (event) => {
+    if (isDisabled || !isReferenceDrag(event)) return
+    event.preventDefault()
+    event.stopPropagation()
+    root.classList.remove('is-drop')
+    clearRefDragHighlight()
+    onDrop?.(event)
+  })
+  root.updateReferences(references, disabled)
+  return root
+}
+/** Install feature-owned presentation once; the common layer never interprets the CSS. */
+export function installFeatureStyles(id, css) {
+  if (
+    !css ||
+    [...document.head.querySelectorAll('style[data-feature-style]')].some(
+      (node) => node.dataset.featureStyle === id,
+    )
+  )
+    return
+  const style = el('style')
+  style.dataset.featureStyle = id
+  style.textContent = css
+  document.head.append(style)
+}

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

@@ -0,0 +1,9 @@
+function elementPropertyName(id) {
+  return id.replace(/-([a-z0-9])/g, (_, character) => character.toUpperCase())
+}
+
+export function getCanvasElements(root = document) {
+  return Object.fromEntries(
+    [...root.querySelectorAll('[id]')].map((element) => [elementPropertyName(element.id), element]),
+  )
+}

package/dist/canvas-public/ui/feature-controller.js

@@ -0,0 +1,296 @@
+import { api } from '../core/api.js'
+import { state } from '../core/state.js'
+import { getFeature, listFeatures } from '../core/feature-registry.js'
+import {
+  discardFeatureState,
+  ensureFeatureState,
+  featureStateEntries,
+  notifyFeatureState,
+  resetFeatureStates,
+  serializeFeatureState,
+  validateFeature,
+} from '../core/feature-state.js'
+import { t } from '../language/index.js'
+import { uiDefinitionFor } from '../elements/registry.js'
+import { el, installFeatureStyles } from './controls.js'
+import { mountFeatureForm } from './feature-form.js'
+
+export function createFeatureController(services) {
+  const runtimes = new Map(
+    listFeatures()
+      .filter((definition) => definition.setup)
+      .map((definition) => [
+        definition.id,
+        definition.setup({
+          ...services,
+          replaceLocal: (...args) => replaceLocal(...args),
+          createFeature: (...args) => create(...args),
+        }),
+      ]),
+  )
+  const actionRuns = new Set()
+  const save = () => services.saveLayout(state.layoutItems)
+  function reportError(error) {
+    state.error = String(error?.message || error)
+    services.renderChrome()
+  }
+  function normalize(item, index = 0) {
+    let definition = getFeature(item)
+    if (definition?.migrateItem?.(item)) definition = getFeature(item)
+    const node = uiDefinitionFor(item)
+    if (!node) return item
+    if (definition) ensureFeatureState(item, definition)
+    return {
+      ...item,
+      name: item.name || t(definition?.title || 'ui.unsupportedFeature'),
+      width: item.width || node.width,
+      height: item.height ?? node.height ?? null,
+      x: item.x ?? 60 + (index % 5) * (node.width + 40),
+      y: item.y ?? 60 + Math.floor(index / 5) * 300,
+    }
+  }
+  function serialize(item) {
+    const definition = getFeature(item)
+    if (!definition) return structuredClone(item)
+    const next = normalize(item)
+    const parameters = serializeFeatureState(item, definition)
+    const output = definition.inline
+      ? { ...next, ...parameters }
+      : { ...next, [definition.storage]: parameters }
+    for (const key of [
+      'busy',
+      'messages',
+      'persistedError',
+      ...Object.keys(definition.runtimeDefaults?.() || {}),
+    ])
+      delete output[key]
+    return output
+  }
+  function buildItem(kind, position, initial = {}, metadata = {}) {
+    const definition = getFeature(kind)
+    if (!definition?.node) throw new Error(`Unknown UI feature: ${kind}`)
+    const item = {
+      ...metadata,
+      id: services.createCanvasClientId(definition.node.prefix || definition.id),
+      type: definition.node.type,
+      ...(definition.node.type === 'feature_dialog' ? { featureId: definition.id } : {}),
+      name: t(definition.aliasTitles?.[kind] || definition.title),
+      width: definition.node.width,
+      height: definition.node.height ?? null,
+      x: position.x - definition.node.width / 2,
+      y: position.y - 18,
+      [definition.storage]: { ...(definition.aliases?.[kind] || {}), ...initial },
+    }
+    if (definition.inline) {
+      Object.assign(item, initial)
+      delete item[definition.storage]
+    }
+    return item
+  }
+  function create(kind, position, initial = {}, metadata = {}) {
+    const item = buildItem(kind, position, initial, metadata)
+    ensureFeatureState(item)
+    try {
+      state.layoutItems.push(item)
+      services.setSelection([item.id])
+      services.renderCanvasItem(item.id)
+      services.renderChrome()
+      return item
+    } catch (error) {
+      state.layoutItems = state.layoutItems.filter((entry) => entry.id !== item.id)
+      state.selectedIds.delete(item.id)
+      discardFeatureState(item)
+      services.renderCanvas({ changedIds: [item.id] })
+      reportError(error)
+      throw error
+    }
+  }
+  async function replaceLocal(item, replacements) {
+    const index = state.layoutItems.findIndex((entry) => entry.id === item.id)
+    if (index < 0) return
+    state.layoutItems.splice(index, 1, ...replacements)
+    try {
+      await save()
+    } catch (error) {
+      state.layoutItems.splice(index, replacements.length, item)
+      throw error
+    }
+    release(item)
+    services.renderCanvas({ changedIds: [item.id, ...replacements.map((entry) => entry.id)] })
+    services.renderChrome()
+  }
+  async function replaceWithFeature(item, kind, parameters) {
+    const definition = getFeature(kind)
+    const replacement = buildItem(
+      kind,
+      { x: item.x + definition.node.width / 2, y: item.y + 18 },
+      parameters,
+    )
+    await replaceLocal(item, [replacement])
+    services.setSelection([replacement.id])
+    services.renderChrome()
+    return replacement
+  }
+  const featureServices = { ...services, replaceLocal, replaceWithFeature, createFeature: create }
+  async function executeTask(item, definition, task, placement = 'replace') {
+    const outcome = await services.runTaskPipeline({
+      kind: definition.id,
+      source: item,
+      placement,
+      ...task.options,
+      wait: task.wait,
+      execute: async ({ operationId }) => {
+        const result = task.request
+          ? await task.request(operationId)
+          : await api(task.endpoint, {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ ...task.body, client_operation_id: operationId }),
+            })
+        task.checkResult?.(result)
+        return result
+      },
+      onSuccess: () => {
+        if (!definition.action) release(item)
+      },
+      onFailure: () => {
+        if (!definition.action) {
+          ensureFeatureState(item).busy = false
+          notifyFeatureState(item.id)
+        }
+      },
+    })
+    if (outcome.ok) await definition.afterTaskSuccess?.(outcome, featureServices, item)
+    return outcome
+  }
+  async function submit(item) {
+    item = state.layoutItems.find((entry) => entry.id === item.id) || item
+    const definition = getFeature(item)
+    const params = ensureFeatureState(item, definition)
+    if (params.busy || (definition.ready && !definition.ready(params))) return
+    const validation = validateFeature(definition, params)
+    if (validation.fields.length || validation.message) {
+      if (validation.message) reportError(validation.message)
+      return
+    }
+    params.busy = true
+    notifyFeatureState(item.id)
+    try {
+      // Snapshot request parameters before awaiting anything. Later UI changes cannot alter this run.
+      const input = structuredClone(serializeFeatureState(item, definition))
+      if (definition.execute) return await definition.execute(input, item, featureServices)
+      const task = definition.task
+        ? await definition.task(params, featureServices, item)
+        : await runtimes.get(definition.id).task(item, params)
+      await executeTask(item, definition, task)
+    } catch (error) {
+      reportError(error)
+    } finally {
+      params.busy = false
+      notifyFeatureState(item.id)
+    }
+  }
+  function mount(host, item, { inspector = false } = {}) {
+    const definition = getFeature(item)
+    if (!uiDefinitionFor(item)) return false
+    installFeatureStyles(definition?.id, definition?.styles)
+    if (!inspector) {
+      const header = el('div', 'gen-dialog-chrome')
+      const title = el('strong', null, item.name || t(definition?.title || 'ui.unsupportedFeature'))
+      const close = el('button', 'ghost-btn', '×')
+      close.type = 'button'
+      close.setAttribute('aria-label', t('features.generation.imageGeneration.text003'))
+      close.addEventListener('pointerdown', (event) => event.stopPropagation())
+      close.addEventListener('click', (event) => {
+        event.preventDefault()
+        event.stopPropagation()
+        if (!definition || !ensureFeatureState(item).busy)
+          services.deleteCanvasItems([item.id], { confirm: false }).catch(reportError)
+      })
+      header.append(title, close)
+      host.append(header)
+    }
+    if (!definition) {
+      host.append(
+        el('p', 'modal-hint', t('ui.unsupportedFeatureHint') + (item.featureId || item.type)),
+      )
+      return true
+    }
+    if (definition.form === false) {
+      if (!inspector)
+        host._disposeFeatureView = runtimes.get(definition.id)?.mountView?.(host, item)
+      return () => host._disposeFeatureView?.()
+    }
+    return mountFeatureForm(host, item, definition, {
+      ...services,
+      save,
+      submit,
+      reportError,
+      inspector,
+      mountView: (slot) => runtimes.get(definition.id)?.mountView?.(slot, item),
+      parametersChanged: () => runtimes.get(definition.id)?.parametersChanged?.(item.id),
+      select: (id) => {
+        if (state.selectedIds.size === 1 && state.selectedIds.has(id)) return
+        services.setSelection([id])
+        services.renderChrome()
+      },
+    })
+  }
+  async function openForSource(kind, sourceId, field) {
+    const source = state.layoutItems.find((entry) => entry.id === sourceId)
+    if (!source) return
+    const definition = getFeature(kind)
+    if (await definition.sourceAction?.(source, featureServices)) return
+    if (definition.action) {
+      const key = definition.id + ':' + sourceId
+      if (actionRuns.has(key)) return
+      actionRuns.add(key)
+      try {
+        return await executeTask(
+          source,
+          definition,
+          await definition.task({}, featureServices, source),
+          'adjacent',
+        )
+      } finally {
+        actionRuns.delete(key)
+      }
+    }
+    field ||= definition.sourceField
+    const initial = {
+      ...(definition.aliases?.[kind] || {}),
+      ...(await definition.prefill?.(source, services)),
+    }
+    if (field)
+      initial[field] = {
+        id: sourceId,
+        name: services.imageName(sourceId),
+        url: services.imageUrl(sourceId),
+        kind: services.mediaKindFromId(sourceId),
+      }
+    const item = create(
+      kind,
+      { x: source.x + (source.width || 220) + 40 + definition.node.width / 2, y: source.y + 18 },
+      initial,
+      { sourceId },
+    )
+    await save()
+    return item
+  }
+  function release(item) {
+    runtimes.get(getFeature(item)?.id)?.dispose?.(item.id)
+    discardFeatureState(item)
+  }
+  function prune(alive) {
+    const retained = new Set(
+      [...state.pendingUiRecoveries.values()].map((entry) => entry.snapshot?.id),
+    )
+    for (const { item } of featureStateEntries())
+      if (!item.transient && !alive.has(item.id) && !retained.has(item.id)) release(item)
+  }
+  function reset() {
+    for (const { item } of featureStateEntries()) release(item)
+    resetFeatureStates()
+  }
+  return { create, mount, normalize, serialize, submit, openForSource, release, prune, reset }
+}