evomeme 0.1.9 → 0.1.10-beta.13

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

@@ -0,0 +1,402 @@
+import { errorText } from '../language/index.js'
+import { t } from '../language/index.js'
+import {
+  getField,
+  ensureFeatureState,
+  updateFeatureField,
+  subscribeFeatureState,
+  validateFeature,
+} from '../core/feature-state.js'
+import {
+  createInput,
+  createTextarea,
+  createSelect,
+  createImageReferenceInput,
+  createSwitch,
+  el,
+} from './controls.js'
+
+const resolve = (value, params) => (typeof value === 'function' ? value(params) : value)
+const label = (field) => (field.label ? t(field.label) : '')
+
+export function disposeFeatureForms(root) {
+  root?._disposeFeatureView?.()
+  if (root) root._disposeFeatureView = null
+  root?._disposeFeatureForm?.()
+  for (const node of root?.querySelectorAll?.('.canvas-node') || []) {
+    node._disposeFeatureView?.()
+    node._disposeFeatureView = null
+  }
+  for (const form of root?.querySelectorAll?.('[data-feature-form]') || [])
+    form._disposeFeatureForm?.()
+}
+
+/** One mounted form per surface; both surfaces subscribe to the same node state. */
+export function mountFeatureForm(host, item, definition, services) {
+  // The caller owns its special view. Only replace subscriptions belonging to forms.
+  for (const form of host.querySelectorAll('[data-feature-form]')) form._disposeFeatureForm?.()
+  const form = el('form', 'feature-form chat-composer')
+  form.dataset.featureForm = definition.id
+  form.dataset.surface = services.inspector ? 'inspector' : 'canvas'
+  const mounts = []
+  const viewDisposers = []
+  const updates = []
+  let disposed = false
+  const get = () => ensureFeatureState(item, definition)
+  const report = (error) => services.reportError?.(error)
+  const save = () => Promise.resolve(services.save?.()).catch(report)
+  const change = (field, value) => {
+    if (disposed || get().busy) return
+    updateFeatureField(item, field.path, value, definition)
+    services.parametersChanged?.()
+    services.referencesChanged?.()
+    save()
+  }
+
+  function appendFields(container, fields, parents = []) {
+    for (const field of fields || []) {
+      if (field.type === 'hidden') continue
+      if (field.fields) {
+        const section = el('section', 'feature-section')
+        const header = el('div', 'feature-section-header')
+        let collapsed = false
+        const title = el('button', 'feature-section-collapse', label(field))
+        title.type = 'button'
+        title.setAttribute('aria-expanded', 'true')
+        title.addEventListener('click', () => {
+          collapsed = !collapsed
+          update()
+        })
+        header.append(title)
+        const body = el('div', 'feature-section-body')
+        let toggle = null
+        if (field.enablePath) {
+          const { root: toggleLabel, input } = createSwitch()
+          toggleLabel.classList.add('feature-section-toggle')
+          toggle = input
+          toggle.setAttribute('aria-label', label(field))
+          toggle.dataset.field = field.enablePath
+          toggle.addEventListener('change', () =>
+            change({ path: field.enablePath }, toggle.checked),
+          )
+          header.append(toggleLabel)
+        }
+        section.append(header, body)
+        container.append(section)
+        updates.push(() => {
+          const params = get()
+          section.hidden = field.visible ? !field.visible(params) : false
+          const enabled = !field.enablePath || getField(params, field.enablePath) === true
+          section.classList.toggle('is-disabled', !enabled)
+          body.hidden = !enabled || collapsed
+          title.setAttribute('aria-expanded', String(!collapsed))
+          if (toggle) {
+            toggle.checked = enabled
+            toggle.disabled =
+              params.busy ||
+              [...parents, field].some(
+                (entry) =>
+                  Boolean(resolve(entry.disabled, params)) ||
+                  (entry !== field && entry.enablePath && !getField(params, entry.enablePath)),
+              )
+          }
+        })
+        if (field.content) body.append(...field.content.filter(Boolean))
+        else appendFields(body, field.fields, [...parents, field])
+        continue
+      }
+      if (field.type === 'note' || field.type === 'illustration') {
+        const node =
+          field.type === 'note'
+            ? el('p', 'modal-hint', label(field))
+            : el('img', 'feature-illustration')
+        if (field.src) {
+          node.src = field.src
+          node.alt = label(field)
+          node.draggable = false
+        }
+        container.append(node)
+        updates.push(() => {
+          node.hidden = field.visible ? !field.visible(get()) : false
+        })
+        continue
+      }
+      const wrapper = el('div', 'feature-field')
+      const text = el('label', 'feature-field-label', label(field))
+      const requiredIndicator = field.required
+        ? el('span', 'feature-required-indicator', t('ui.form.required'))
+        : null
+      if (requiredIndicator) text.append(' ', requiredIndicator)
+      wrapper.append(text)
+      container.append(wrapper)
+      const syncRequired = (control, params) => {
+        const required = Boolean(resolve(field.required, params))
+        wrapper.classList.toggle('is-required', required)
+        if (requiredIndicator) requiredIndicator.hidden = !required
+        if (control) {
+          if (required) control.setAttribute('aria-required', 'true')
+          else control.removeAttribute('aria-required')
+        }
+      }
+      const unavailable = (params) =>
+        params.busy ||
+        [...parents, field].some(
+          (entry) =>
+            Boolean(resolve(entry.disabled, params)) ||
+            (entry.enablePath && getField(params, entry.enablePath) !== true),
+        )
+      updates.push(() => {
+        wrapper.hidden = field.visible ? !field.visible(get()) : false
+      })
+
+      if (field.reference) {
+        const matches = (ref) => !field.referenceFilter || field.referenceFilter(ref)
+        const accept = field.accept || ['image']
+        const references = () => {
+          const value = getField(get(), field.path)
+          return (Array.isArray(value) ? value : [value]).filter((ref) => ref?.id)
+        }
+        const control = createImageReferenceInput({
+          accept,
+          imageUrl: (ref) =>
+            ref.kind && ref.kind !== 'image' ? '' : ref.url || services.imageUrl(ref.id),
+          imageName: (ref) => ref.name || services.imageName(ref.id),
+          onRemove: (ref) =>
+            change(
+              field,
+              field.referenceFilter || field.multiple
+                ? references().filter((entry) => entry.id !== ref.id || entry.role !== ref.role)
+                : null,
+            ),
+          onDrop(event) {
+            if (disposed || unavailable(get())) return
+            try {
+              const raw =
+                event.dataTransfer.getData('application/x-canvas-image') ||
+                event.dataTransfer.getData('application/x-canvas-media')
+              const id = event.dataTransfer.getData('text/plain')
+              const ref = raw ? JSON.parse(raw) : id ? { id } : null
+              if (!ref?.id) return
+              const kind = ref.kind || services.mediaKindFromId(ref.id)
+              if (!accept.includes(kind)) return
+              const incoming = {
+                ...ref,
+                kind,
+                name: ref.name || services.imageName(ref.id),
+                url: ref.url || services.imageUrl(ref.id),
+                ...(field.referenceDefaults?.(kind) || {}),
+              }
+              const current = references()
+              const next = field.multiple
+                ? [
+                    ...new Map(
+                      [...current.filter(matches), incoming].map((entry) => [entry.id, entry]),
+                    ).values(),
+                  ]
+                : [incoming]
+              change(
+                field,
+                field.referenceFilter
+                  ? [...current.filter((entry) => !matches(entry)), ...next]
+                  : field.multiple
+                    ? next
+                    : incoming,
+              )
+            } catch (error) {
+              report(error)
+            }
+          },
+        })
+        control.dataset.field = field.path
+        wrapper.append(control)
+        updates.push(() => {
+          const params = get()
+          syncRequired(control, params)
+          control.updateReferences(references().filter(matches), unavailable(params))
+        })
+        continue
+      }
+
+      let control
+      if (field.type === 'textarea') control = createTextarea('', { rows: field.rows || 3 })
+      else if (field.type === 'enum') control = createSelect()
+      else if (field.type === 'boolean') {
+        const toggle = createSwitch()
+        control = toggle.input
+        wrapper.classList.add('feature-field-switch')
+        wrapper.append(toggle.root)
+      } else
+        control = createInput(
+          { boolean: 'checkbox', integer: 'number', number: 'number', color: 'color' }[
+            field.type
+          ] || 'text',
+          '',
+          field,
+        )
+      control.dataset.field = field.path
+      control.setAttribute('aria-label', label(field))
+      if (field.placeholder) control.placeholder = t(field.placeholder)
+      text.addEventListener('click', () => control.focus())
+      if (field.type !== 'boolean') wrapper.append(control)
+      let optionSignature = ''
+      updates.push(() => {
+        const params = get()
+        const value = getField(params, field.path)
+        syncRequired(control, params)
+        if (field.type === 'enum') {
+          const options = (resolve(field.options, params) || []).map((entry) =>
+            typeof entry === 'object' ? entry : { value: entry, label: String(entry) },
+          )
+          const signature = JSON.stringify(options)
+          if (signature !== optionSignature) {
+            optionSignature = signature
+            control.replaceChildren(
+              ...options.map((entry) => {
+                const option = el('option', null, entry.labelKey ? t(entry.labelKey) : entry.label)
+                option.value = String(entry.value)
+                return option
+              }),
+            )
+          }
+        }
+        control.disabled = unavailable(params)
+        if (field.type === 'boolean') control.checked = value === true
+        else if (control.value !== String(value ?? '')) control.value = String(value ?? '')
+      })
+      control.addEventListener(
+        ['boolean', 'enum'].includes(field.type) ? 'change' : 'input',
+        () => {
+          let value = field.type === 'boolean' ? control.checked : control.value
+          if (['number', 'integer'].includes(field.type) && value !== '') value = Number(value)
+          if (field.type === 'enum' && field.valueType === 'number') value = Number(value)
+          if (field.type === 'enum' && field.valueType === 'boolean') value = value === 'true'
+          change(field, value)
+        },
+      )
+    }
+  }
+
+  // The feature owns composition. This layer only binds reusable controls to shared state.
+  const entries = []
+  const collect = (fields, parents = []) => {
+    for (const field of fields || []) {
+      entries.push({ field, parents })
+      if (field.fields) collect(field.fields, [...parents, field])
+    }
+  }
+  collect(definition.fields)
+  const lookup = (key) => {
+    const entry = entries.find(
+      ({ field }) => (field.id || field.enablePath || field.path || field.label) === key,
+    )
+    if (!entry) throw new Error('Unknown feature field: ' + definition.id + '.' + key)
+    return entry
+  }
+  const render = (key, content) => {
+    const { field, parents } = lookup(key)
+    const host = el('div')
+    appendFields(host, [content ? { ...field, content } : field], parents)
+    return host.firstElementChild
+  }
+  const group = (className, children) => {
+    const node = el('div', className)
+    node.append(...children.filter(Boolean))
+    return node
+  }
+  const ui = {
+    field: (key) => render(key),
+    section: (key, ...children) => render(key, children.length ? children : undefined),
+    stack: (...children) => group('feature-stack', children),
+    row: (...children) => group('feature-row', children),
+    prompt(promptKey, referenceKey) {
+      const promptField = lookup(promptKey).field
+      const prompt = render(promptKey)
+      const textarea = prompt.querySelector('textarea')
+      textarea.placeholder ||= label(promptField)
+      const promptLabel = prompt.querySelector('.feature-field-label')
+      if (promptField.required) promptLabel?.classList.replace('feature-field-label', 'feature-prompt-required-label')
+      else promptLabel?.remove()
+      if (!referenceKey) return prompt
+      const referenceField = lookup(referenceKey).field
+      const refs = render(referenceKey)
+      const zone = refs.querySelector('.prompt-drop-zone')
+      if (referenceField.required) {
+        const referenceLabel = refs.querySelector('.feature-field-label')
+        if (referenceLabel) {
+          referenceLabel.classList.replace('feature-field-label', 'feature-prompt-required-label')
+          zone.prepend(referenceLabel)
+        }
+      }
+      zone.classList.add('reference-prompt')
+      zone.querySelector('.reference-drop-hint').remove()
+      textarea.placeholder = [textarea.placeholder, t('ui.reference.dropHint')]
+        .filter(Boolean)
+        .join('\n')
+      zone.prepend(prompt)
+      return zone
+    },
+    view() {
+      if (services.inspector) return null
+      const slot = el('div', 'feature-view')
+      mounts.push(() => viewDisposers.push(services.mountView?.(slot)))
+      return slot
+    },
+  }
+  const content = el('div', 'feature-form-content')
+  content.append(definition.render(ui, { inspector: Boolean(services.inspector) }))
+  form.append(content)
+  const error = el('p', 'gen-dialog-warning')
+  const actions = el('div', 'composer-actions feature-form-actions')
+  const submit = el(
+    'button',
+    'primary-btn',
+    t(definition.submitLabel || 'features.generation.imageGeneration.text023'),
+  )
+  submit.type = 'submit'
+  actions.append(submit)
+  form.append(error, actions)
+  updates.push(() => {
+    const params = get()
+    const validation = validateFeature(definition, params)
+    const message = params.messages?.findLast?.((entry) => entry.error)?.error || validation.message
+    error.textContent = errorText(message) || ''
+    error.hidden = !message
+    submit.hidden = !definition.task && !definition.execute && !definition.setup
+    submit.disabled =
+      params.busy ||
+      validation.fields.length > 0 ||
+      Boolean(validation.message) ||
+      (definition.ready && !definition.ready(params))
+  })
+  form.addEventListener('submit', (event) => {
+    event.preventDefault()
+    event.stopPropagation()
+    if (submit.disabled) return
+    Promise.resolve(services.submit(item)).catch(report)
+  })
+  form.addEventListener('keydown', (event) => {
+    if (event.key !== 'Enter' || !(event.ctrlKey || event.metaKey) || event.isComposing) return
+    event.preventDefault()
+    event.stopPropagation()
+    if (!submit.disabled) form.requestSubmit()
+  })
+  form.addEventListener('pointerdown', (event) => {
+    event.stopPropagation()
+    services.select?.(item.id)
+  })
+  form.addEventListener('wheel', (event) => event.stopPropagation(), { passive: true })
+  const update = () => {
+    if (!disposed) for (const refresh of updates) refresh()
+  }
+  const unsubscribe = subscribeFeatureState(item.id, update)
+  form._disposeFeatureForm = () => {
+    if (disposed) return
+    disposed = true
+    unsubscribe()
+    for (const dispose of viewDisposers) dispose?.()
+  }
+  host.append(form)
+  for (const mount of mounts) mount()
+  update()
+  return form._disposeFeatureForm
+}

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

@@ -0,0 +1,84 @@
+import { errorText } from '../language/index.js'
+import { api } from '../core/api.js'
+import { getLanguage, onLanguageChange, setLanguage, t } from '../language/index.js'
+
+export function initSettingsDialog(elements) {
+  const {
+    settingsBtn,
+    settingsClose,
+    settingsLanguage,
+    settingsLanguageError,
+    settingsModal,
+  } = elements
+
+  function syncLanguageSelection() {
+    settingsLanguage.value = getLanguage()
+  }
+
+  function clearLanguageError() {
+    settingsLanguageError.hidden = true
+    settingsLanguageError.textContent = ''
+  }
+
+  function showLanguageError(messageKey, error) {
+    settingsLanguageError.textContent = `${errorText(t(messageKey))} ${errorText(error)}`
+    settingsLanguageError.hidden = false
+  }
+
+  async function loadLanguagePreference() {
+    settingsLanguage.disabled = true
+    clearLanguageError()
+    try {
+      const preference = await api('/api/language')
+      if (!setLanguage(preference.language)) throw new Error(String(preference.language || ''))
+    } catch (error) {
+      syncLanguageSelection()
+      showLanguageError('settings.language.loadFailed', error)
+    } finally {
+      settingsLanguage.disabled = false
+    }
+  }
+
+  async function saveLanguagePreference(language) {
+    settingsLanguage.disabled = true
+    clearLanguageError()
+    try {
+      const preference = await api('/api/language', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ language }),
+      })
+      if (!setLanguage(preference.language)) throw new Error(String(preference.language || ''))
+    } catch (error) {
+      syncLanguageSelection()
+      showLanguageError('settings.language.saveFailed', error)
+    } finally {
+      settingsLanguage.disabled = false
+    }
+  }
+
+  function openSettings() {
+    settingsModal.hidden = false
+    settingsClose.focus()
+  }
+
+  function closeSettings() {
+    if (settingsModal.hidden) return
+    settingsModal.hidden = true
+    settingsBtn.focus()
+  }
+
+  settingsBtn.addEventListener('click', openSettings)
+  settingsClose.addEventListener('click', closeSettings)
+  settingsLanguage.addEventListener('change', () => saveLanguagePreference(settingsLanguage.value))
+  settingsModal.addEventListener('pointerdown', (event) => {
+    if (event.target === settingsModal) closeSettings()
+  })
+  window.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape' && !settingsModal.hidden) closeSettings()
+  })
+  onLanguageChange(syncLanguageSelection)
+  syncLanguageSelection()
+
+  return { closeSettings, loadLanguagePreference, openSettings }
+}

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

@@ -0,0 +1,55 @@
+import { listFeatures } from '../core/feature-registry.js'
+import { t } from '../language/index.js'
+export function initToolbar(elements) {
+  for (const definition of listFeatures()) {
+    for (const entry of definition.toolbar || []) {
+      const panel = document.getElementById('toolbar-' + (entry.group === 'assets' ? 'asset' : entry.group) + '-tools')
+      if (!panel) continue
+      const button = document.getElementById(entry.id) || document.createElement('button')
+      button.id = entry.id
+      button.type = 'button'
+      button.className = 'toolbar-ribbon-tool'
+      button.dataset.feature = entry.kind || definition.id
+      button.dataset.i18nTitle = entry.title || definition.title
+      button.title = t(entry.title || definition.title)
+      const label = document.createElement('span')
+      label.dataset.i18n = entry.label || definition.title
+      label.textContent = t(entry.label || definition.title)
+      button.replaceChildren(label)
+      if (!button.parentNode) panel.append(button)
+    }
+  }
+  let activeToolbarCategory = null
+  
+  function selectToolbarCategory(category) {
+    activeToolbarCategory = ['assets', 'image', 'video'].includes(category) ? category : null
+    const showAssets = activeToolbarCategory === 'assets'
+    const showImage = activeToolbarCategory === 'image'
+    const showVideo = activeToolbarCategory === 'video'
+    elements.toolbarRibbon.hidden = !showAssets && !showImage && !showVideo
+    elements.toolbarAssetTools.hidden = !showAssets
+    elements.toolbarImageTools.hidden = !showImage
+    elements.toolbarVideoTools.hidden = !showVideo
+    elements.toolbarRibbon.classList.toggle('is-open', showAssets || showImage || showVideo)
+    elements.toolbarAssetTools.classList.toggle('is-active', showAssets)
+    elements.toolbarImageTools.classList.toggle('is-active', showImage)
+    elements.toolbarVideoTools.classList.toggle('is-active', showVideo)
+    elements.toolAddAssets.setAttribute('aria-selected', String(showAssets))
+    elements.toolAddAssets.setAttribute('aria-expanded', String(showAssets))
+    elements.toolbarImageTab.setAttribute('aria-selected', String(showImage))
+    elements.toolbarVideoTab.setAttribute('aria-selected', String(showVideo))
+    elements.toolbarImageTab.setAttribute('aria-expanded', String(showImage))
+    elements.toolbarVideoTab.setAttribute('aria-expanded', String(showVideo))
+  }
+  
+  function toggleToolbarCategory(category) {
+    selectToolbarCategory(activeToolbarCategory === category ? null : category)
+  }
+  
+  elements.toolbarImageTab.addEventListener('click', () => toggleToolbarCategory('image'))
+  elements.toolbarVideoTab.addEventListener('click', () => toggleToolbarCategory('video'))
+  elements.toolAddAssets.addEventListener('click', () => toggleToolbarCategory('assets'))
+}
+
+
+