evomeme 0.1.9 → 0.1.10-beta.13

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

@@ -0,0 +1,64 @@
+import { t } from '../language/index.js'
+import { state } from '../core/state.js'
+import { createCanvasNodeCaption } from './base.js'
+
+export function mountVideoElement(element, item, context) {
+  const {
+    appendResizeHandles,
+    clearRefDragHighlight,
+    interaction,
+    requestDependencyEdgeUpdate,
+    setRefDragHighlight,
+  } = context
+
+  const handle = document.createElement('div')
+  handle.className = 'ref-handle'
+  handle.title = t("elements.video.text001")
+  handle.textContent = t("elements.video.text002")
+  handle.draggable = true
+  handle.addEventListener('dragstart', (event) => {
+    event.stopPropagation()
+    event.dataTransfer.setData(
+      'application/x-canvas-media',
+      JSON.stringify({
+        id: item.id,
+        name: item.name,
+        url: item.url,
+        kind: 'video',
+      }),
+    )
+    event.dataTransfer.setData('text/plain', item.id)
+    event.dataTransfer.effectAllowed = 'copy'
+    interaction.htmlDrag = true
+    setRefDragHighlight(new Set(['video']))
+  })
+  handle.addEventListener('dragend', () => {
+    interaction.htmlDrag = false
+    clearRefDragHighlight()
+  })
+  handle.addEventListener('pointerdown', (event) => event.stopPropagation())
+
+  const video = document.createElement('video')
+  video.src = item.url
+  video.muted = true
+  video.loop = true
+  video.autoplay = true
+  video.playsInline = true
+  video.dataset.role = 'frame'
+  const ratio = String(item._fallbackRatio || item.gen?.ratio || '16:9')
+  const match = ratio.match(/^(\d+)\s*:\s*(\d+)$/)
+  if (match) video.style.aspectRatio = `${match[1]} / ${match[2]}`
+  video.addEventListener('pointerdown', (event) => event.stopPropagation())
+  video.addEventListener('loadedmetadata', () => {
+    if (!video.videoWidth || !video.videoHeight) return
+    video.style.aspectRatio = `${video.videoWidth} / ${video.videoHeight}`
+    const layoutItem = state.layoutItems.find((candidate) => candidate.id === item.id)
+    if (layoutItem && layoutItem.manualSize !== true && layoutItem.height != null) {
+      layoutItem.height = null
+    }
+    requestDependencyEdgeUpdate()
+  })
+
+  element.append(handle, video, createCanvasNodeCaption(item))
+  appendResizeHandles(element, item)
+}

package/dist/canvas-public/features/assets/local-assets.js

@@ -0,0 +1,72 @@
+import { t } from '../../language/index.js'
+import { api } from '../../core/api.js'
+import { state } from '../../core/state.js'
+
+export function createLocalAssetsTool({
+  imageFilePattern,
+  mediaKindFromId,
+  reload,
+  renderCanvasItem,
+  renderChrome,
+}) {
+  const IMAGE_FILE_RE = imageFilePattern
+
+  async function uploadMediaFile(file) {
+    const name = file.name || 'upload.bin'
+    const type = String(file.type || '')
+    let kind = 'image'
+    if (type.startsWith('video/') || /\.(mp4|webm|mov|m4v)$/i.test(name)) kind = 'video'
+    else if (type.startsWith('audio/') || /\.(mp3|wav|m4a|aac|ogg)$/i.test(name)) kind = 'audio'
+    else if (!type.startsWith('image/') && !IMAGE_FILE_RE.test(name)) {
+      throw new Error(`${t('features.assets.localAssets.text001')}${name}`)
+    }
+    const dataUrl = await fileToBase64(file)
+    return api('/api/upload-media', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        name,
+        data: dataUrl,
+        kind,
+      }),
+    })
+  }
+
+  async function ingestMediaFiles(fileList) {
+    const files = [...(fileList || [])].filter(Boolean)
+    if (!files.length) return
+    const errors = []
+    for (const file of files) {
+      try {
+        await uploadMediaFile(file)
+      } catch (err) {
+        errors.push(String(err.message || err))
+      }
+    }
+    await reload().catch(() => {})
+    if (errors.length) {
+      state.error = errors.join('\n')
+      renderChrome()
+    }
+  }
+
+  function fileToBase64(file) {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader()
+      reader.onload = () => resolve(String(reader.result || ''))
+      reader.onerror = () =>
+        reject(
+          new Error(
+            `${t('features.assets.localAssets.text002')}${file.name || t('common.assetFile')}`,
+          ),
+        )
+      reader.readAsDataURL(file)
+    })
+  }
+
+  return {
+    fileToBase64,
+    ingestMediaFiles,
+    uploadMediaFile,
+  }
+}

package/dist/canvas-public/features/assets/official-assets.js

@@ -0,0 +1,539 @@
+import { errorT, errorText } from '../../language/index.js'
+import { ensureFeatureState, peekFeatureState } from '../../core/feature-state.js'
+import { t } from '../../language/index.js'
+import { api } from '../../core/api.js'
+import { state } from '../../core/state.js'
+import { layoutCanvasElementsAtSlot } from '../../elements/replacement.js'
+import { el } from '../../ui/controls.js'
+
+export default {
+  styles: `
+.canvas-node.is-official-assets-dialog {
+  display: flex;
+  min-width: 460px;
+  min-height: 360px;
+  flex-direction: column;
+  container-name: official-assets-dialog;
+  container-type: inline-size;
+}
+
+.official-assets-title {
+  display: flex;
+  min-width: 0;
+  align-items: baseline;
+  gap: 8px;
+}
+
+.official-assets-title > span {
+  color: var(--muted);
+  font-size: 10px;
+  font-weight: 500;
+}
+
+.official-assets-body {
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 0;
+  flex-direction: column;
+  cursor: default;
+}
+
+.official-assets-tabs {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 5px;
+  padding: 9px 10px 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.official-assets-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  margin-bottom: -1px;
+  padding: 7px 12px 8px;
+  border: 1px solid transparent;
+  border-bottom-color: transparent;
+  border-radius: 8px 8px 0 0;
+  background: transparent;
+  color: var(--muted);
+  font: inherit;
+  font-size: 11px;
+  cursor: pointer;
+}
+
+.official-assets-tab:hover:not(:disabled) {
+  color: var(--text);
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.official-assets-tab.is-active {
+  border-color: rgba(61, 214, 198, 0.28);
+  border-bottom-color: #151a21;
+  background: #151a21;
+  color: var(--accent);
+  font-weight: 650;
+}
+
+.official-assets-tab:disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+.official-assets-tab small {
+  padding: 1px 4px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.08);
+  font-size: 8px;
+}
+
+.official-assets-catalog {
+  flex: 1 1 auto;
+  min-height: 0;
+  padding: 10px;
+  overflow: auto;
+}
+
+.official-assets-grid {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.official-asset-card {
+  position: relative;
+  min-width: 0;
+  padding: 5px;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 9px;
+  background: rgba(8, 11, 15, 0.55);
+  color: var(--text);
+  cursor: pointer;
+  text-align: left;
+}
+
+.official-asset-card:hover:not(:disabled) {
+  border-color: rgba(61, 214, 198, 0.45);
+  background: rgba(61, 214, 198, 0.08);
+}
+
+.official-asset-card.is-selected {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 1px rgba(61, 214, 198, 0.24);
+  background: rgba(61, 214, 198, 0.12);
+}
+
+.official-asset-card:disabled {
+  cursor: wait;
+  opacity: 0.62;
+}
+
+.official-asset-card img {
+  display: block;
+  width: 100%;
+  aspect-ratio: 1;
+  object-fit: cover;
+  border-radius: 6px;
+  image-rendering: auto;
+}
+
+.official-asset-name {
+  display: block;
+  padding: 5px 2px 1px;
+  overflow: hidden;
+  font-size: 10px;
+  line-height: 1.25;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.official-asset-check {
+  position: absolute;
+  top: 9px;
+  right: 9px;
+  display: grid;
+  width: 18px;
+  height: 18px;
+  place-items: center;
+  border: 1px solid rgba(255, 255, 255, 0.34);
+  border-radius: 50%;
+  background: rgba(8, 11, 15, 0.8);
+  color: #071411;
+  font-size: 11px;
+  font-weight: 800;
+}
+
+.official-asset-card.is-selected .official-asset-check {
+  border-color: var(--accent);
+  background: var(--accent);
+}
+
+.official-assets-message,
+.official-assets-empty {
+  display: flex;
+  min-height: 160px;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 10px;
+  margin: 0;
+  color: var(--muted);
+  font-size: 12px;
+  text-align: center;
+}
+
+.official-assets-message p {
+  margin: 0;
+}
+
+.official-assets-message .is-error,
+.official-assets-feedback.is-error {
+  color: var(--danger);
+}
+
+.official-assets-footer {
+  display: flex;
+  flex: 0 0 auto;
+  min-height: 48px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 8px 12px;
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(8, 11, 15, 0.4);
+}
+
+.official-assets-feedback {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--muted);
+  font-size: 11px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.official-assets-actions {
+  display: flex;
+  flex: 0 0 auto;
+  gap: 7px;
+}
+
+.official-assets-actions button {
+  min-width: 64px;
+  font-size: 11px;
+}
+
+@container official-assets-dialog (max-width: 570px) {
+  .official-assets-grid {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .official-assets-tab small {
+    display: none;
+  }
+}
+`,
+  toolbar: [
+    { id: 'tool-official-assets', group: 'assets', label: 'html.text036', title: 'html.text005' },
+  ],
+  id: 'official-assets',
+  title: 'features.generation.generationDialog.text002',
+  storage: 'officialAssets',
+  form: false,
+  node: {
+    type: 'official_assets_dialog',
+    width: 680,
+    height: 560,
+    minWidth: 460,
+    minHeight: 360,
+    inspector: false,
+    classNames: ['is-interactive-ui', 'is-gen-dialog', 'is-official-assets-dialog'],
+  },
+  fields: [
+    { path: 'activeCategory', type: 'hidden', default: 'tiles' },
+    {
+      path: 'selectedIds',
+      type: 'hidden',
+      default: () => new Set(),
+      decode: (values) => new Set(Array.isArray(values) ? values.map(String) : []),
+      encode: (values) => [...values],
+    },
+  ],
+  runtimeDefaults: () => ({ status: '', error: '' }),
+  setup: createOfficialAssetsTool,
+}
+
+function createOfficialAssetsTool(context) {
+  const {
+    replaceLocal,
+    beginActiveOperation,
+    defaultNodeWidth,
+    endActiveOperation,
+    fileToBase64,
+    reload,
+    renderCanvas,
+    renderCanvasItem,
+    renderChrome,
+    saveLayout,
+    setSelection,
+  } = context
+
+  const OFFICIAL_ASSET_CATALOG_URL = '/assets/presets/catalog.json'
+  const OFFICIAL_ASSET_CATEGORY_FALLBACKS = [
+    { id: 'tiles', label: t('features.assets.officialAssets.text001'), enabled: true, items: [] },
+    {
+      id: 'characters',
+      label: t('features.assets.officialAssets.text002'),
+      enabled: false,
+      items: [],
+    },
+    { id: 'props', label: t('features.assets.officialAssets.text003'), enabled: false, items: [] },
+    {
+      id: 'backgrounds',
+      label: t('features.assets.officialAssets.text004'),
+      enabled: false,
+      items: [],
+    },
+  ]
+  let officialAssetCatalog = null
+  let officialAssetCatalogRequest = null
+  let officialAssetCatalogError = ''
+
+  async function loadOfficialAssetCatalog() {
+    if (officialAssetCatalog) return officialAssetCatalog
+    if (officialAssetCatalogRequest) return officialAssetCatalogRequest
+    officialAssetCatalogError = ''
+    officialAssetCatalogRequest = fetch(OFFICIAL_ASSET_CATALOG_URL)
+      .then(async (response) => {
+        if (!response.ok)
+          throw new Error(
+            `${t('features.assets.officialAssets.text005')}${response.status}${t('features.assets.officialAssets.text005.part1')}`,
+          )
+        const catalog = await response.json()
+        if (!Array.isArray(catalog?.categories))
+          throw new Error(errorT('features.assets.officialAssets.text006'))
+        officialAssetCatalog = catalog
+        return catalog
+      })
+      .catch((error) => {
+        officialAssetCatalogError = String(error.message || error)
+        throw error
+      })
+      .finally(() => {
+        officialAssetCatalogRequest = null
+      })
+    return officialAssetCatalogRequest
+  }
+
+  function officialAssetCategories() {
+    return officialAssetCatalog?.categories || OFFICIAL_ASSET_CATEGORY_FALLBACKS
+  }
+
+  function officialAssetUrl(categoryId, filename) {
+    return `/assets/presets/${encodeURIComponent(categoryId)}/${encodeURIComponent(filename)}`
+  }
+
+  async function importOfficialAssets(dialogId) {
+    const dialog = state.layoutItems.find((item) => item.id === dialogId)
+    const ds = peekFeatureState(dialogId)
+    if (!dialog || !ds || ds.busy || !officialAssetCatalog) return
+    const category = officialAssetCategories().find(
+      (candidate) => candidate.id === ds.activeCategory && candidate.enabled !== false,
+    )
+    const selected = (category?.items || []).filter((item) => ds.selectedIds.has(item.id))
+    if (!selected.length) return
+
+    const activeOperation = beginActiveOperation('official-assets-import')
+    ds.busy = true
+    ds.error = ''
+    const dialogSlot = { item: dialog, index: state.layoutItems.indexOf(dialog) }
+    renderCanvas({ changedIds: [dialogId] })
+    renderChrome()
+    let importedIds = []
+    try {
+      const files = await Promise.all(
+        selected.map(async (item) => {
+          const response = await fetch(officialAssetUrl(category.id, item.file))
+          if (!response.ok)
+            throw new Error(
+              `${t('features.assets.officialAssets.text007')}${item.name || item.file}`,
+            )
+          return {
+            name: item.file,
+            data: await fileToBase64(await response.blob()),
+          }
+        }),
+      )
+      const result = await api('/api/upload-batch', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ files, place: false }),
+      })
+      const imported = Array.isArray(result.images) ? result.images : []
+      if (!imported.length) throw new Error(errorT('features.assets.officialAssets.text008'))
+      importedIds = imported.map((asset) => asset.id).filter(Boolean)
+
+      const resultItems = layoutCanvasElementsAtSlot(
+        dialogSlot,
+        imported.map((asset) => ({
+          id: asset.id,
+          name: asset.name,
+          width: defaultNodeWidth,
+          height: null,
+        })),
+        { nodeWidth: defaultNodeWidth },
+      )
+      await replaceLocal(dialog, resultItems)
+      await reload()
+      setSelection(imported.map((asset) => asset.id))
+      renderCanvas({ changedIds: importedIds })
+    } catch (error) {
+      ds.error = String(error.message || error)
+      ds.status = ''
+    } finally {
+      ds.busy = false
+      endActiveOperation(activeOperation)
+      renderCanvas({ changedIds: [dialogId] })
+      renderChrome()
+    }
+  }
+
+  function mountOfficialAssetsDialogNode(host, node) {
+    const ds = ensureFeatureState(node)
+    const body = el('div', 'official-assets-body')
+    const categories = officialAssetCategories()
+    const availableCategory =
+      categories.find(
+        (category) => category.id === ds.activeCategory && category.enabled !== false,
+      ) || categories.find((category) => category.enabled !== false)
+    if (availableCategory) ds.activeCategory = availableCategory.id
+
+    const tabs = el('div', 'official-assets-tabs')
+    tabs.setAttribute('role', 'tablist')
+    tabs.setAttribute('aria-label', t('features.assets.officialAssets.text012'))
+    for (const category of categories) {
+      const tab = el('button', 'official-assets-tab')
+      tab.type = 'button'
+      tab.setAttribute('role', 'tab')
+      tab.setAttribute('aria-selected', String(category.id === ds.activeCategory))
+      tab.classList.toggle('is-active', category.id === ds.activeCategory)
+      tab.disabled = category.enabled === false || ds.busy
+      tab.textContent = category.label || category.id
+      if (category.enabled === false) {
+        tab.title = t('features.assets.officialAssets.text013')
+        tab.appendChild(el('small', null, t('features.assets.officialAssets.text013')))
+      }
+      tab.addEventListener('click', () => {
+        if (tab.disabled || ds.activeCategory === category.id) return
+        ds.activeCategory = category.id
+        ds.selectedIds.clear()
+        ds.status = ''
+        ds.error = ''
+        renderCanvasItem(node.id)
+        saveLayout(state.layoutItems).catch(() => undefined)
+      })
+      tabs.appendChild(tab)
+    }
+
+    const catalogBody = el('div', 'official-assets-catalog')
+    if (!officialAssetCatalog) {
+      const message = el('div', 'official-assets-message')
+      if (officialAssetCatalogError) {
+        message.appendChild(el('p', 'is-error', officialAssetCatalogError))
+        const retry = el('button', 'ghost-btn', t('features.assets.officialAssets.text014'))
+        retry.type = 'button'
+        retry.addEventListener('click', () => {
+          officialAssetCatalogError = ''
+          loadOfficialAssetCatalog()
+            .then(() => renderCanvasItem(node.id))
+            .catch(() => renderCanvasItem(node.id))
+          renderCanvasItem(node.id)
+        })
+        message.appendChild(retry)
+      } else {
+        message.textContent = t('features.assets.officialAssets.text015')
+        loadOfficialAssetCatalog()
+          .then(() => renderCanvasItem(node.id))
+          .catch(() => renderCanvasItem(node.id))
+      }
+      catalogBody.appendChild(message)
+    } else {
+      const items = availableCategory?.items || []
+      const validIds = new Set(items.map((item) => item.id))
+      ds.selectedIds = new Set([...ds.selectedIds].filter((id) => validIds.has(id)))
+      const grid = el('div', 'official-assets-grid')
+      if (!items.length) {
+        grid.appendChild(
+          el('p', 'official-assets-empty', t('features.assets.officialAssets.text016')),
+        )
+      }
+      for (const item of items) {
+        const selected = ds.selectedIds.has(item.id)
+        const card = el('button', `official-asset-card${selected ? ' is-selected' : ''}`)
+        card.type = 'button'
+        card.disabled = ds.busy
+        card.setAttribute('aria-pressed', String(selected))
+        card.title = item.name || item.file
+        const preview = document.createElement('img')
+        preview.src = officialAssetUrl(availableCategory.id, item.file)
+        preview.alt = item.name || item.file
+        preview.loading = 'lazy'
+        preview.draggable = false
+        const check = el('span', 'official-asset-check', selected ? '✓' : '')
+        check.setAttribute('aria-hidden', 'true')
+        card.append(preview, el('span', 'official-asset-name', item.name || item.file), check)
+        card.addEventListener('click', () => {
+          if (ds.selectedIds.has(item.id)) ds.selectedIds.delete(item.id)
+          else ds.selectedIds.add(item.id)
+          ds.status = ''
+          ds.error = ''
+          renderCanvasItem(node.id)
+          saveLayout(state.layoutItems).catch(() => undefined)
+        })
+        grid.appendChild(card)
+      }
+      catalogBody.appendChild(grid)
+    }
+
+    const footer = el('div', 'official-assets-footer')
+    const feedback = el('div', `official-assets-feedback${ds.error ? ' is-error' : ''}`)
+    feedback.textContent =
+      errorText(ds.error) ||
+      ds.status ||
+      `${t('features.assets.officialAssets.text017')}${ds.selectedIds.size}${t('features.assets.officialAssets.text017.part1')}`
+    const actions = el('div', 'official-assets-actions')
+    const clearButton = el('button', 'ghost-btn', t('features.assets.officialAssets.text018'))
+    clearButton.type = 'button'
+    clearButton.disabled = ds.busy || ds.selectedIds.size === 0
+    clearButton.addEventListener('click', () => {
+      ds.selectedIds.clear()
+      ds.status = ''
+      ds.error = ''
+      renderCanvasItem(node.id)
+      saveLayout(state.layoutItems).catch(() => undefined)
+    })
+    const importButton = el(
+      'button',
+      'tool-btn',
+      ds.busy
+        ? `${t('features.assets.officialAssets.text019')}${ds.selectedIds.size}${t('features.assets.officialAssets.text019.part1')}`
+        : `${t('features.assets.officialAssets.text020')}${ds.selectedIds.size}${t('features.assets.officialAssets.text020.part1')}`,
+    )
+    importButton.type = 'button'
+    importButton.disabled = ds.busy || !officialAssetCatalog || ds.selectedIds.size === 0
+    importButton.addEventListener('click', () => importOfficialAssets(node.id))
+    actions.append(clearButton, importButton)
+    footer.append(feedback, actions)
+    body.append(tabs, catalogBody, footer)
+    body.addEventListener('wheel', (event) => event.stopPropagation(), { passive: true })
+    host.append(body)
+  }
+
+  return {
+    mountView: mountOfficialAssetsDialogNode,
+    loadOfficialAssetCatalog,
+    mountOfficialAssetsDialogNode,
+  }
+}