dsh-drawai 0.3.3 → 0.4.0

package/lib/media.js

@@ -46,7 +46,7 @@ const MEDIA_DATA_KEYS = ['drawaiMedia', 'mediaKind', 'mediaClip', 'mediaFps', 'm
 /** 从画布路径得到 stem（去掉 .drawio）。 */
 export function drawioStem(drawioPath) {
   const base = basename(String(drawioPath || ''))
-  return base.replace(/\.drawio$/i, '') || 'canvas'
+  return base.replace(/\.(?:drawio|drawai)$/i, '') || 'canvas'
 }
 
 /** `foo.drawio` → `…/foo.media`（绝对或相对，跟随入参形态）。 */
@@ -54,7 +54,8 @@ export function mediaRootFor(drawioPath) {
   const p = String(drawioPath || '')
   const dir = dirname(p)
   const stem = drawioStem(p)
-  return dir === '.' ? stem + MEDIA_DIR_SUFFIX : join(dir, stem + MEDIA_DIR_SUFFIX)
+  const suffix = /\.drawai$/i.test(p) ? '.drawai.media' : MEDIA_DIR_SUFFIX
+  return dir === '.' ? stem + suffix : join(dir, stem + suffix)
 }
 
 /** clip 目录：`…/foo.media/clip-a` */
@@ -162,7 +163,11 @@ export function emptyManifest(opts) {
 function syncDuration(manifest) {
   const frames = Array.isArray(manifest.frames) ? manifest.frames.length : 0
   const fps = Number(manifest.fps)
-  manifest.duration = frames > 0 && Number.isFinite(fps) && fps > 0 ? frames / fps : 0
+  // 有逐帧清单时以清单为准；没有清单（raster clip pack 就是这种）就保留写进来的时长。
+  // 以前这里无条件用 frames/fps 覆盖，于是 applyFilm 写下的 12.1s 被抹成 0 —— "不看 <video>
+  // metadata 也知道多长"这个用途就永远拿不到真值。
+  if (frames > 0 && Number.isFinite(fps) && fps > 0) manifest.duration = frames / fps
+  else if (!(Number(manifest.duration) > 0)) manifest.duration = 0
   return manifest
 }
 
@@ -183,6 +188,7 @@ export function normalizeManifest(raw) {
       frames.push({ file: file, t: Number.isFinite(t) ? t : i / (Number.isFinite(fps) && fps > 0 ? fps : DEFAULT_MEDIA_FPS) })
     }
   }
+  const duration = Number(raw.duration)
   return syncDuration({
     version: Number(raw.version) || MEDIA_VERSION,
     kind: raw.kind === 'raster' ? 'raster' : 'svg',
@@ -192,7 +198,7 @@ export function normalizeManifest(raw) {
     source: typeof raw.source === 'string' && raw.source.length > 0 ? raw.source.replace(/\\/g, '/') : null,
     sourceOffset: Number.isFinite(Number(raw.sourceOffset)) && Number(raw.sourceOffset) >= 0 ? Number(raw.sourceOffset) : 0,
     frames: frames,
-    duration: 0,
+    duration: Number.isFinite(duration) && duration > 0 ? duration : 0,
   })
 }
 
@@ -395,8 +401,14 @@ export function collectReferencedClips(doc) {
   const used = new Set()
   if (doc === null || typeof doc !== 'object' || Array.isArray(doc.nodes) === false) return used
   for (let i = 0; i < doc.nodes.length; i += 1) {
+    const audioClip=doc.nodes[i].data?.drawaiAudio==='1'&&sanitizeClipId(doc.nodes[i].data.audioClip)
+    if(audioClip)used.add(audioClip)
     const meta = videoMetaFromData(doc.nodes[i].data)
     if (meta !== null && meta.clip !== null) used.add(meta.clip)
+    for (const result of Array.isArray(doc.nodes[i].data?.motion?.results) ? doc.nodes[i].data.motion.results : []) {
+      const clip = sanitizeClipId(result.clip)
+      if (clip) used.add(clip)
+    }
   }
   return used
 }
@@ -551,11 +563,11 @@ export function packCanvasBundle(drawioPath) {
   const stem = drawioStem(drawioPath)
   const files = []
   if (existsSync(drawioPath) === false) throw new Error('drawio not found: ' + drawioPath)
-  files.push({ name: stem + '.drawio', data: readFileSync(drawioPath) })
+  files.push({ name: stem + (/\.drawai$/i.test(drawioPath) ? '.drawai' : '.drawio'), data: readFileSync(drawioPath) })
   const mediaRoot = mediaRootFor(drawioPath)
   if (existsSync(mediaRoot)) {
     const mediaFiles = []
-    walkFiles(mediaRoot, stem + MEDIA_DIR_SUFFIX, mediaFiles)
+    walkFiles(mediaRoot, basename(mediaRoot), mediaFiles)
     for (let i = 0; i < mediaFiles.length; i += 1) files.push(mediaFiles[i])
   }
   return buildZip(files)
@@ -567,29 +579,30 @@ export function unpackCanvasBundle(zipBuffer, destDir, preferredStem) {
   if (entries.length === 0) throw new Error('empty zip')
   let drawioEntry = null
   for (let i = 0; i < entries.length; i += 1) {
-    if (/\.drawio$/i.test(entries[i].name) && entries[i].name.indexOf('/') < 0) {
+    if (/\.(?:drawio|drawai)$/i.test(entries[i].name) && entries[i].name.indexOf('/') < 0) {
       drawioEntry = entries[i]
       break
     }
   }
   if (drawioEntry === null) {
     for (let i = 0; i < entries.length; i += 1) {
-      if (/\.drawio$/i.test(entries[i].name)) {
+      if (/\.(?:drawio|drawai)$/i.test(entries[i].name)) {
         drawioEntry = entries[i]
         break
       }
     }
   }
   if (drawioEntry === null) throw new Error('zip 里没有 .drawio')
-  const stem = preferredStem || basename(drawioEntry.name).replace(/\.drawio$/i, '')
+  const stem = preferredStem || basename(drawioEntry.name).replace(/\.(?:drawio|drawai)$/i, '')
   mkdirSync(destDir, { recursive: true })
-  const drawioOut = join(destDir, stem + '.drawio')
+  const extension = /\.drawai$/i.test(drawioEntry.name) ? '.drawai' : '.drawio'
+  const drawioOut = join(destDir, stem + extension)
   if (existsSync(drawioOut)) throw new Error('already exists: ' + stem + '.drawio')
   writeFileSync(drawioOut, drawioEntry.data)
-  const mediaOut = join(destDir, stem + MEDIA_DIR_SUFFIX)
+  const mediaOut = mediaRootFor(drawioOut)
   for (let i = 0; i < entries.length; i += 1) {
     const name = entries[i].name.replace(/\\/g, '/')
-    if (/\.drawio$/i.test(name)) continue
+    if (/\.(?:drawio|drawai)$/i.test(name)) continue
     // 接受 `foo.media/...` 或任意 `*.media/...`
     const m = /([^/]+)\.media\/(.+)$/i.exec(name)
     if (m === null) continue
@@ -599,7 +612,7 @@ export function unpackCanvasBundle(zipBuffer, destDir, preferredStem) {
     mkdirSync(dirname(abs), { recursive: true })
     writeFileSync(abs, entries[i].data)
   }
-  return { path: stem + '.drawio', mediaRoot: mediaOut }
+  return { path: stem + extension, mediaRoot: mediaOut }
 }
 
 /** 导出单个 clip 为 SVG 视频 zip（manifest + frames + poster）。 */

package/lib/mgstyle-core.js

@@ -0,0 +1,75 @@
+/* 由 tools/build.mjs 生成 —— 请勿直接编辑；改 src/ 下的源文件。 */
+/* Browser-safe, shared identity and search for the mg-styles library (整片风格，不是单镜卡). */
+export function resolveMgStyle(catalog, slug) {
+  const style = catalog.styles.find((item) => item.slug === slug)
+  if (!style) {
+    throw new Error('未知 mg 风格：' + slug + '（可用：' + catalog.styles.map((item) => item.slug).join(' / ') + '）')
+  }
+  return {
+    slug: style.slug,
+    name: style.name,
+    en: style.en,
+    oneLiner: style.oneLiner,
+    signature: style.signature || [],
+    palette: style.palette,
+    colors: style.colors || [],
+    fonts: style.fonts || null,
+    rhythm: style.rhythm || null,
+    prompt: style.prompt,
+    demos: style.demos,
+    brief: style.brief,
+    engine: style.engine || null,
+    engines: style.engines || [],
+    engineNote: style.engineNote || '',
+    engineFiles: style.engineFiles || [],
+    motion: style.motion || null,
+    commit: catalog.commit,
+    label: style.name + ' · ' + style.slug,
+  }
+}
+
+/** 按词打分：命中的词越多分越高；slug 精确命中、中文名命中权重最高。中文按字包含即可。 */
+export function searchMgStyles(catalog, query = '') {
+  const terms = String(query).toLowerCase().trim().split(/\s+/).filter(Boolean)
+  return catalog.styles
+    .map((style) => {
+      const haystack = [style.slug, style.name, style.en, style.heading, style.oneLiner,
+        (style.tags || []).join(' '), (style.signature || []).join(' ')].join(' ').toLowerCase()
+      const hit = terms.filter((term) => haystack.includes(term)).length
+      if (terms.length && hit === 0) return null
+      const exact = terms.includes(style.slug) || terms.includes(style.name.toLowerCase())
+      return { style, score: (exact ? 100 : 0) + hit * 10 + (terms.length && hit === terms.length ? 5 : 0) }
+    })
+    .filter(Boolean)
+    .sort((a, b) => b.score - a.score)
+    .map(({ style }) => ({
+      slug: style.slug,
+      name: style.name,
+      en: style.en,
+      oneLiner: style.oneLiner,
+      tags: style.tags || [],
+      palette: style.palette,
+      rhythm: style.rhythm || null,
+      shot: style.shot || '',
+    }))
+}
+
+export function isMgStyleNode(node) { return node?.data?.drawaiMgStyle === '1' }
+
+export function mgStyleData(catalog, slug) {
+  const selection = resolveMgStyle(catalog, slug)
+  return { drawaiMgStyle: '1', mgStyleSlug: selection.slug, mgStyleCommit: selection.commit }
+}
+
+/** 一条片子只允许一种整片风格；重复引用同一个风格不算错，去重即可。 */
+export function mgStyleSelection(catalog, input) {
+  const picks = input.refs.filter((ref) => ref.role === 'mgstyle').map((ref) => {
+    const node = ref.nodes.find((item) => item.id === ref.id)
+    if (!isMgStyleNode(node)) throw new Error('风格参考必须来自 mg 风格节点')
+    if (node.data.mgStyleCommit !== catalog.commit) throw new Error('mg 风格库版本已变化，请重新选择风格')
+    return { ...resolveMgStyle(catalog, node.data.mgStyleSlug), nodeId: ref.id }
+  })
+  const unique = picks.filter((item, index, all) => all.findIndex((other) => other.slug === item.slug) === index)
+  if (unique.length > 1) throw new Error('一条片子只能选一种整片风格，当前有：' + unique.map((item) => item.slug).join(' / '))
+  return unique[0] || null
+}

package/lib/motion/apply.js

@@ -0,0 +1,180 @@
+// 成片回流：把渲染产物落成画布视频节点能播的 clip pack。
+//
+// 为什么不是"把 mp4 塞进 .drawio"：文档里只该有 id（mediaClip），字节留在
+// `<画布>.media/<clip>/` 里。播放器对 raster clip 的做法是读 `source.mp4`
+// 的原字节、用 <video> 直接播（见 src/video-player.js:203），所以只要
+// source + manifest 就够，stills/ 只服务于"抽帧转 SVG"那条编辑路径。
+//
+// 这里不做视频解码之外的任何创作：渲染出来的像素原样搬，海报抽一帧。
+
+import { execFile } from 'node:child_process'
+import { promisify } from 'node:util'
+import { chmodSync, existsSync, statSync, writeFileSync } from 'node:fs'
+import { join } from 'node:path'
+import { ffmpegBinary } from '../video-export.js'
+import {
+  allocateClipId,
+  clipDirFor,
+  ensureClipPack,
+  importSourceFile,
+  POSTER_NAME,
+  readManifest,
+  videoDataAttrs,
+  videoMetaFromData,
+  writeManifest,
+} from '../media.js'
+
+const exec = promisify(execFile)
+const MAX_SOURCE_BYTES = 512 * 1024 * 1024
+
+function ffmpeg(args, options = {}) {
+  return exec(ffmpegBinary(), args, {
+    windowsHide: true,
+    timeout: 120000,
+    maxBuffer: 64 * 1024 * 1024,
+    ...options,
+  })
+}
+
+/** ffmpeg 不做 ffprobe 的活：`-i` 的 stderr 里就有尺寸、帧率、时长。 */
+export async function probeVideo(file) {  let stderr = ''
+  try {
+    const result = await ffmpeg(['-hide_banner', '-i', file, '-f', 'null', '-'], { encoding: 'utf8' })
+    stderr = result.stderr || ''
+  } catch (error) {
+    // ffmpeg 对"没有输出文件"的探测会以非零码退出，stderr 仍然有效。
+    stderr = String((error && (error.stderr || error.message)) || '')
+  }
+  const size = /Stream #\d+:\d+.*?(\d{2,5})x(\d{2,5})/.exec(stderr)
+  if (!size) throw new Error('读不出视频尺寸：' + file)
+  const fpsMatch = /(\d+(?:\.\d+)?)\s*fps/.exec(stderr)
+  const durationMatch = /Duration:\s*(\d+):(\d+):(\d+(?:\.\d+)?)/.exec(stderr)
+  const fps = fpsMatch ? Number(fpsMatch[1]) : 0
+  const seconds = durationMatch
+    ? Number(durationMatch[1]) * 3600 + Number(durationMatch[2]) * 60 + Number(durationMatch[3])
+    : 0
+  return {
+    width: Number(size[1]),
+    height: Number(size[2]),
+    fps: Number.isFinite(fps) && fps > 0 ? Math.round(fps * 1000) / 1000 : 0,
+    seconds: Number.isFinite(seconds) && seconds > 0 ? seconds : 0,
+  }
+}
+
+/** 抽一帧 PNG 当海报（默认取 0.4s，避开首帧可能的黑场/入场动画）。 */
+export async function posterPng(file, atSeconds = 0.4) {
+  // 海报最终以 base64 内嵌进节点 style，尺寸就是文档体积——所以先缩到 960 宽。
+  const result = await ffmpeg(
+    ['-hide_banner', '-loglevel', 'error', '-ss', String(Math.max(0, atSeconds)), '-i', file,
+      '-frames:v', '1', '-vf', 'scale=640:-2:flags=lanczos', '-f', 'image2pipe', '-vcodec', 'png', '-'],
+    { encoding: 'buffer' },
+  )
+  if (!Buffer.isBuffer(result.stdout) || result.stdout.length === 0) throw new Error('抽不出海报帧：' + file)
+  return result.stdout
+}
+
+/**
+ * 把海报 PNG 变成节点 style 里 `image=` 的值。
+ *
+ * 直接给**位图 data URI**，不再包一层 SVG。原因有两条：
+ *   1. `shape=image` 的渲染分支（client.js:2414 的 `isRasterDataUri(href)`）本来就要求位图；
+ *   2. 「SVG 里再 `<image href="data:image/png…">`」这种嵌套在 Chromium 里会让
+ *      画进 canvas 的导出图变成 tainted —— 导出 PNG / AI「看一眼」都会抛
+ *      `Tainted canvases may not be exported`。平铺成 PNG 就没有这层嵌套。
+ */
+export function posterMarkup(pngBuffer, width, height) {
+  // 宽高只为保持签名兼容：位图自己带着尺寸，节点按 imageAspect 铺满。
+  void width
+  void height
+  return 'data:image/png;base64,' + pngBuffer.toString('base64')
+}
+
+function existingClipIds(doc) {
+  const out = []
+  for (const node of (doc && doc.nodes) || []) {
+    const meta = videoMetaFromData(node.data)
+    if (meta) out.push(meta.clip)
+  }
+  return out
+}
+
+/**
+ * 把一段成片落进节点的 clip pack。
+ *
+ * - 节点已有 clip 就复用，没有就分配 `clip-N`；
+ * - source 复制成 `source.mp4`（保留原字节，播放器直接播它）；
+ * - manifest 标成 raster，写回 fps/尺寸/时长；
+ * - 返回 node.data 需要合并的属性 + 海报标记，调用方负责写文档。
+ */
+export async function applyFilm({ drawioAbs, doc, node, film, fpsFallback = 30 }) {
+  if (typeof film !== 'string' || film.length === 0) throw new Error('缺少成片路径')
+  if (existsSync(film) === false) throw new Error('成片还不存在：' + film)
+  const bytes = statSync(film).size
+  if (bytes <= 0) throw new Error('成片是空文件：' + film)
+  if (bytes > MAX_SOURCE_BYTES) throw new Error('成片超过 ' + Math.round(MAX_SOURCE_BYTES / 1024 / 1024) + 'MB，先把画布外置存储清一清')
+
+  const probed = await probeVideo(film)
+  const fallbackFps = Number(fpsFallback) > 0 ? Number(fpsFallback) : 30
+  const fps = probed.fps > 0 ? probed.fps : fallbackFps
+  const existing = videoMetaFromData(node.data)
+  // 注意：视频节点建出来时就有 drawaiMedia=1，但 mediaClip 还是空的——
+  // videoMetaFromData 这时会返回 { clip: null }，不能直接信。
+  const clip = existing && existing.clip ? existing.clip : allocateClipId(existingClipIds(doc))
+
+  const clipDir = clipDirFor(drawioAbs, clip)
+  ensureClipPack(drawioAbs, clip, { kind: 'raster', fps, w: probed.width, h: probed.height })
+  const imported = importSourceFile(clipDir, film, 'source.mp4')
+  // 只读位会跟着复制过来，Remotion 打包 publicDir 时会炸（EPERM copyfile）。
+  try { chmodSync(join(clipDir, imported.rel), 0o644) } catch { /* 权限已够 */ }
+
+  const manifest = readManifest(clipDir)
+  manifest.kind = 'raster'
+  manifest.fps = fps
+  manifest.width = probed.width
+  manifest.height = probed.height
+  manifest.source = imported.rel
+  manifest.sourceOffset = 0
+  // duration 留给"不看 <video> metadata 也要知道多长"的读者（缩略帧、打包、校验）；
+  // raster 播放仍然以元素自己的 metadata 为准，这里只是把已知事实写下来。
+  manifest.duration = probed.seconds
+  writeManifest(clipDir, manifest)
+
+  const attrs = videoDataAttrs({ clip, kind: 'raster', fps, w: probed.width, h: probed.height, posterFrame: 0 })
+  let mark = ''
+  // 海报取片子的 35% 处，而不是固定 0.4s：深色/慢起的片子头几帧几乎是黑的，
+  // 拿它当封面等于画布上放一块空图，看着就像"没写回来"。
+  const posterAt = probed.seconds > 0
+    ? Math.min(Math.max(0.4, probed.seconds * 0.35), Math.max(0.4, probed.seconds - 0.5))
+    : 0.4
+  try {
+    mark = posterMarkup(await posterPng(film, posterAt), probed.width, probed.height)
+    // 顺手把海报也写进 clip pack：ensureClipPack 只会放一张占位图，
+    // 打包画布（packCanvasBundle）或别处直接读 poster.svg 时才不会拿到空白。
+    writeFileSync(join(clipDir, POSTER_NAME), mark, 'utf8')
+  } catch {
+    mark = ''
+  }
+  return {
+    clip,
+    dir: clipDir,
+    source: imported.rel,
+    width: probed.width,
+    height: probed.height,
+    fps,
+    seconds: probed.seconds,
+    frames: Math.round(probed.seconds * fps),
+    bytes,
+    attrs,
+    poster: mark,
+  }
+}
+
+/**
+ * 把成片的音轨抽成单声道 wav，给回测用（motion_audio_verify）。
+ * 20 秒的片子这一步不到 1 秒，别把整条视频解出来。
+ */
+export async function extractAudio(film, out) {
+  if (!existsSync(film)) throw new Error('没有这个文件：' + film)
+  await ffmpeg(['-hide_banner', '-loglevel', 'error', '-y', '-i', film, '-vn', '-ac', '1', '-ar', '22050', out])
+  return out
+}

package/lib/motion/asset-pack-lock.js

@@ -0,0 +1,10 @@
+// 由 tools/build-assets-pack.mjs 生成，勿手改。
+export const ASSETS_LOCK = {
+  "version": "v1",
+  "file": "drawai-assets-v1.tar.gz",
+  "bytes": 151660586,
+  "sha256": "6804f9dcd5b9d8c46edc079c7c29cebf9b9f8e144d6ce9a3af37387b8a916f9f",
+  "files": 164,
+  "rawBytes": 210718720,
+  "builtAt": "2026-11-07T10:25:25.324Z"
+}