evomeme 0.1.9 → 0.1.10-beta.13

package/dist/canvas-public/media/support.js

@@ -0,0 +1,183 @@
+import { t } from '../language/index.js'
+import { state } from '../core/state.js'
+import { isInteractiveCanvasUi, isPending, isVideoItem } from '../elements/types.js'
+
+export function createMediaSupport({
+  baseImageSize,
+  findNodeEl,
+  renderInspector,
+  requestDependencyEdgeUpdate,
+  saveLayout,
+}) {
+  const IMAGE_BASE_SIZE = baseImageSize
+  let imageSizeSaveTimer = null
+
+  function mediaKindFromId(id) {
+    const prefix = String(id || '').split('/')[0]
+    if (prefix === 'videos') return 'video'
+    if (prefix === 'audio') return 'audio'
+    return 'image'
+  }
+  
+  function parseSizeAspect(sizeStr) {
+    const m = String(sizeStr || '').toLowerCase().match(/^(\d+)\s*x\s*(\d+)$/)
+    if (!m) return { w: 1, h: 1 }
+    const w = Number(m[1]) || 1
+    const h = Number(m[2]) || 1
+    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)
+    return imageDisplaySize(w, h)
+  }
+  
+  function videoDisplaySize(ratio) {
+    const map = {
+      '16:9': { width: 280, height: 158 },
+      '9:16': { width: 158, height: 280 },
+      '1:1': { width: 220, height: 220 },
+      '4:3': { width: 260, height: 195 },
+      '3:4': { width: 195, height: 260 },
+      '21:9': { width: 300, height: 129 },
+      adaptive: { width: 280, height: 158 },
+    }
+    return map[ratio] || map['16:9']
+  }
+  
+  function imageUrl(id) {
+    const hit = state.images.find((img) => img.id === id)
+    return hit?.url || `/files/${id}`
+  }
+  
+  function imageName(id) {
+    const hit = state.images.find((img) => img.id === id)
+    return hit?.name || String(id).split('/').pop()
+  }
+  
+  
+  function imageSourceLabel(id) {
+    const prefix = String(id).split('/')[0]
+    if (prefix === 'generated') return t("media.support.text001")
+    if (prefix === 'canvas') return t("media.support.text002")
+    if (prefix === 'videos') return t("media.support.text003")
+    if (prefix === 'audio') return t("media.support.text004")
+    return prefix || t("media.support.text005")
+  }
+  
+  function formatDims(id) {
+    const dims = state.imageDims[id]
+    if (!dims) return t("media.support.text006")
+    if (dims.loading) return t("media.support.text006")
+    if (dims.w && dims.h) return `${dims.w} × ${dims.h}`
+    return t("media.support.text005")
+  }
+  
+  function ensureImageDims(id) {
+    if (!id || state.imageDims[id]) return
+    state.imageDims[id] = { loading: true }
+    const img = new Image()
+    img.onload = () => {
+      state.imageDims[id] = { w: img.naturalWidth, h: img.naturalHeight }
+      if (state.selectedIds.has(id)) {
+        renderInspector()
+      }
+    }
+    img.onerror = () => {
+      state.imageDims[id] = { w: 0, h: 0 }
+      if (state.selectedIds.has(id)) {
+        renderInspector()
+      }
+    }
+    img.src = imageUrl(id)
+  }
+  
+  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) ||
+      isInteractiveCanvasUi(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) {
+    return (
+      state.layoutItems.find((it) => it.id === id) ||
+      state.images.find((img) => img.id === id) ||
+      null
+    )
+  }
+  
+  function isPlainImageItem(item) {
+    if (
+      !item ||
+      isInteractiveCanvasUi(item) ||
+      isPending(item) ||
+      isVideoItem(item)
+    ) {
+      return false
+    }
+    return state.images.some((image) => image.id === item.id && image.kind === 'image')
+  }
+
+  function resetImageSizeSave() {
+    clearTimeout(imageSizeSaveTimer)
+    imageSizeSaveTimer = null
+  }
+
+  return {
+    applyImageDisplaySize,
+    ensureImageDims,
+    formatDims,
+    getSelectedItem,
+    imageDisplaySize,
+    imageName,
+    imageSourceLabel,
+    imageUrl,
+    isPlainImageItem,
+    mediaKindFromId,
+    parseSizeAspect,
+    pendingDisplaySize,
+    resetImageSizeSave,
+    videoDisplaySize,
+  }
+}
+
+
+

package/dist/canvas-public/styles/base.css

@@ -0,0 +1,49 @@
+/* Styles are split by page responsibility; import order is preserved by styles.css. */
+:root {
+  --bg-0: #12151a;
+  --bg-1: #1a1f27;
+  --bg-2: #232a34;
+  --line: rgba(255, 255, 255, 0.08);
+  --text: #e8edf4;
+  --muted: #93a0b4;
+  --accent: #3dd6c6;
+  --danger: #ff6b7a;
+  --shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
+  --control-track: rgba(255, 255, 255, 0.1);
+  --control-track-hover: rgba(255, 255, 255, 0.16);
+  --control-thumb: #748196;
+  --control-thumb-hover: #9aa8bb;
+  --control-thumb-active: var(--accent);
+  --control-scrollbar-size: 10px;
+  --control-scrollbar-radius: 999px;
+  --control-range-track-height: 5px;
+  --control-range-thumb-size: 15px;
+  --control-number-stepper-width: 22px;
+  font-family: 'DM Sans', sans-serif;
+  color: var(--text);
+  background: var(--bg-0);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  height: 100%;
+}
+
+body {
+  background:
+    radial-gradient(1200px 700px at 10% 0%, rgba(61, 214, 198, 0.12), transparent 55%),
+    radial-gradient(900px 600px at 90% 20%, rgba(240, 180, 41, 0.08), transparent 50%),
+    linear-gradient(160deg, #101318, #171c24 45%, #10141b);
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}

package/dist/canvas-public/styles/canvas.css

@@ -0,0 +1,127 @@
+/* Styles are split by page responsibility; import order is preserved by styles.css. */
+.canvas-viewport {
+  position: relative;
+  flex: 1;
+  overflow: hidden;
+  cursor: default;
+  background-image:
+    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
+  background-size: 32px 32px;
+  background-position: center;
+}
+
+.canvas-viewport.is-panning {
+  cursor: grabbing;
+}
+
+.marquee {
+  position: absolute;
+  z-index: 5;
+  border: 1px solid rgba(61, 214, 198, 0.85);
+  background: rgba(61, 214, 198, 0.12);
+  pointer-events: none;
+}
+
+.marquee[hidden] {
+  display: none !important;
+}
+
+.canvas-world {
+  position: absolute;
+  inset: 0;
+  transform-origin: 0 0;
+}
+
+.dependency-layer {
+  position: absolute;
+  z-index: 0;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  pointer-events: none;
+}
+
+.dependency-path {
+  fill: none;
+  vector-effect: non-scaling-stroke;
+}
+
+.dependency-path-glow {
+  stroke: #3dd6c6;
+  stroke-width: 9;
+  stroke-linecap: round;
+  opacity: 0.14;
+  filter: url('#dependency-glow');
+  animation: dependency-pulse 2.4s ease-in-out infinite;
+}
+
+.dependency-path-base {
+  stroke: rgba(61, 214, 198, 0.52);
+  stroke-width: 1.6;
+}
+
+.dependency-path-flow {
+  stroke: #9ffff4;
+  stroke-width: 2.4;
+  stroke-linecap: round;
+  stroke-dasharray: 3 13;
+  filter: drop-shadow(0 0 4px rgba(111, 255, 239, 0.95));
+  animation: dependency-flow 1.15s linear infinite;
+}
+
+.dependency-arrow {
+  fill: #8ffff2;
+  filter: drop-shadow(0 0 4px rgba(111, 255, 239, 0.9));
+}
+
+/*
+ * SVG filters and continuously animated paths become very expensive once the
+ * transformed world is large. Keep the relationship line intact while panning
+ * or under high canvas load, but avoid allocating oversized filtered layers.
+ */
+.canvas-viewport.is-panning .dependency-path-glow,
+.canvas-viewport.is-panning .dependency-path-flow,
+.canvas-viewport.is-dependency-effects-reduced .dependency-path-glow,
+.canvas-viewport.is-dependency-effects-reduced .dependency-path-flow {
+  display: none;
+}
+
+.canvas-viewport.is-panning .dependency-arrow,
+.canvas-viewport.is-dependency-effects-reduced .dependency-arrow {
+  filter: none;
+}
+
+.dependency-edge.is-active .dependency-path-base {
+  stroke: rgba(124, 255, 241, 0.86);
+  stroke-width: 2;
+}
+
+.dependency-edge.is-active .dependency-path-glow {
+  opacity: 0.26;
+}
+
+@keyframes dependency-flow {
+  to {
+    stroke-dashoffset: -32;
+  }
+}
+
+@keyframes dependency-pulse {
+  0%,
+  100% {
+    opacity: 0.1;
+  }
+  50% {
+    opacity: 0.24;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dependency-path-flow,
+  .dependency-path-glow {
+    animation: none;
+  }
+}

package/dist/canvas-public/styles/controls.css

@@ -0,0 +1,203 @@
+/* Styles are split by page responsibility; import order is preserved by styles.css. */
+/* Shared native controls. Change this block and the --control-* tokens above to
+   restyle scrollbars, range sliders, and numeric steppers across every module. */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--control-thumb) var(--control-track);
+}
+
+*::-webkit-scrollbar {
+  width: var(--control-scrollbar-size);
+  height: var(--control-scrollbar-size);
+}
+
+*::-webkit-scrollbar-track {
+  border-radius: var(--control-scrollbar-radius);
+  background: var(--control-track);
+}
+
+*::-webkit-scrollbar-thumb {
+  min-width: 28px;
+  min-height: 28px;
+  border: 3px solid transparent;
+  border-radius: var(--control-scrollbar-radius);
+  background: var(--control-thumb);
+  background-clip: padding-box;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background-color: var(--control-thumb-hover);
+}
+
+*::-webkit-scrollbar-thumb:active {
+  background-color: var(--control-thumb-active);
+}
+
+*::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+*::-webkit-scrollbar-button {
+  display: none;
+  width: 0;
+  height: 0;
+}
+
+input[type='range'] {
+  appearance: none;
+  min-height: var(--control-range-thumb-size);
+  margin-block: 3px;
+  outline: none;
+  background: transparent;
+  cursor: pointer;
+}
+
+input[type='range']::-webkit-slider-runnable-track {
+  height: var(--control-range-track-height);
+  border-radius: var(--control-scrollbar-radius);
+  background: var(--control-track);
+}
+
+input[type='range']:hover::-webkit-slider-runnable-track {
+  background: var(--control-track-hover);
+}
+
+input[type='range']::-webkit-slider-thumb {
+  appearance: none;
+  width: var(--control-range-thumb-size);
+  height: var(--control-range-thumb-size);
+  margin-top: calc((var(--control-range-track-height) - var(--control-range-thumb-size)) / 2);
+  border: 2px solid var(--bg-1);
+  border-radius: 50%;
+  background: var(--control-thumb-hover);
+  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.42);
+}
+
+input[type='range']:hover::-webkit-slider-thumb,
+input[type='range']:focus-visible::-webkit-slider-thumb {
+  background: var(--control-thumb-active);
+}
+
+input[type='range']::-moz-range-track {
+  height: var(--control-range-track-height);
+  border-radius: var(--control-scrollbar-radius);
+  background: var(--control-track);
+}
+
+input[type='range']::-moz-range-progress {
+  height: var(--control-range-track-height);
+  border-radius: var(--control-scrollbar-radius);
+  background: color-mix(in srgb, var(--accent) 65%, transparent);
+}
+
+input[type='range']::-moz-range-thumb {
+  width: var(--control-range-thumb-size);
+  height: var(--control-range-thumb-size);
+  border: 2px solid var(--bg-1);
+  border-radius: 50%;
+  background: var(--control-thumb-hover);
+  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.42);
+}
+
+input[type='range']:hover::-moz-range-thumb,
+input[type='range']:focus-visible::-moz-range-thumb {
+  background: var(--control-thumb-active);
+}
+
+input[type='range']:disabled {
+  cursor: not-allowed;
+  opacity: 0.42;
+}
+
+input[type='number'] {
+  color-scheme: dark;
+  font-variant-numeric: tabular-nums;
+}
+
+input[type='number']:hover,
+input[type='number']:focus-visible {
+  background-color: rgba(61, 214, 198, 0.055);
+}
+
+.ui-number-stepper {
+  position: relative;
+  display: inline-grid;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.ui-number-stepper.is-fluid {
+  width: 100%;
+}
+
+.ui-number-stepper > input[type='number'] {
+  width: 100% !important;
+  min-width: 0;
+  padding-right: calc(var(--control-number-stepper-width) + 6px) !important;
+  appearance: textfield;
+}
+
+.ui-number-stepper > input[type='number']::-webkit-inner-spin-button,
+.ui-number-stepper > input[type='number']::-webkit-outer-spin-button {
+  margin: 0;
+  appearance: none;
+}
+
+.ui-number-stepper-controls {
+  position: absolute;
+  top: 1px;
+  right: 1px;
+  bottom: 1px;
+  display: grid;
+  width: var(--control-number-stepper-width);
+  grid-template-rows: repeat(2, minmax(0, 1fr));
+  overflow: hidden;
+  border-left: 1px solid var(--control-track-hover);
+  border-radius: 0 5px 5px 0;
+}
+
+.ui-number-stepper-button {
+  display: grid;
+  min-width: 0;
+  min-height: 0;
+  place-items: center;
+  padding: 0;
+  border: 0;
+  color: var(--muted);
+  background: rgba(255, 255, 255, 0.025);
+  cursor: pointer;
+}
+
+.ui-number-stepper-button + .ui-number-stepper-button {
+  border-top: 1px solid var(--control-track);
+}
+
+.ui-number-stepper-button:hover {
+  color: var(--text);
+  background: rgba(61, 214, 198, 0.16);
+}
+
+.ui-number-stepper-button:active {
+  color: #07100f;
+  background: var(--accent);
+}
+
+.ui-number-stepper-button svg {
+  width: 10px;
+  height: 7px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.6;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  pointer-events: none;
+}
+
+.ui-number-stepper:has(input:disabled) {
+  opacity: 0.48;
+}
+
+.ui-number-stepper:has(input:disabled) .ui-number-stepper-button {
+  cursor: not-allowed;
+  pointer-events: none;
+}