museav-cli 2.9.0 → 2.10.2

package/src/index.ts

@@ -16,7 +16,7 @@ import { printWelcome } from './commands/welcome.js'
 import { gen } from './commands/gen.js'
 import { reverse } from './commands/reverse.js'
 import { compressCmd, removeBgCmd, upscaleCmd, removeWatermarkCmd } from './commands/img-tools.js'
-import { slideshowCmd } from './commands/slideshow.js'
+import { slideshowCmd, slideshowLayoutsCmd, createSlideshowLayoutCmd } from './commands/slideshow.js'
 import { projects, createProject, listAssets, addAsset, removeAsset, resolveWorkspace } from './commands/projects.js'
 import { imageToTemplate } from './commands/image-to-template.js'
 import { upload } from './commands/upload.js'
@@ -27,6 +27,7 @@ import { videoTemplates, createVideoTemplate } from './commands/video-templates.
 import { balance } from './commands/balance.js'
 import { jobs } from './commands/jobs.js'
 import { whoami } from './commands/whoami.js'
+import { feedback } from './commands/feedback.js'
 import { products } from './commands/products.js'
 import { assets } from './commands/assets.js'
 import { stickers, createSticker } from './commands/stickers.js'
@@ -221,13 +222,27 @@ program
   .option('--captions <file>', '文案文件（每行一条，按顺序对应每张图），与 --caption 二选一')
   .option('--footer <text>', '底部引导语')
   .option('--music <file>', '配乐音频。自动裁到视频长度并加首尾淡入淡出（不会中途硬切断）')
-  .option('--sec <n>', '每张停留秒数，默认 2.5')
-  .option('--size <WxH>', '画面尺寸，默认 1080x1920')
-  .option('--art <px>', '主图渲染边长，默认画面宽的 48%')
-  .option('--theme <name>', 'light（默认）/ dark')
-  .option('--no-trim', '不裁主图四周的透明留白（默认会裁，贴纸类图片不裁会显得很小）')
+  .option('--sec <n>', '每张停留秒数，默认取模板的（内置模板 2.5）')
+  .option('--size <WxH>', '画面尺寸，默认取模板画布（内置模板 1080x1920）；与模板不同则整体等比缩放')
+  .option('--theme <name>', 'light（默认）/ dark。只影响内置版式，给了 --layout 就以模板为准')
+  .option('--layout <slug>', '排版模板 slug：内置的直接用，其余去中台拉（需登录）。清单见 museav slideshow-layouts')
+  .option('--layout-file <path>', '直接用本地 JSON 排版模板（调模板时用，免登录）')
   .action(asyncRun((paths: string[], opts: any) => slideshowCmd(paths, opts)))
 
+const slideshowLayoutsCommand = program
+  .command('slideshow-layouts')
+  .description('查排版模板：内置版式（免登录）+ 中台模板（平台共享 / 本租户 / 本人私有）。配合 slideshow --layout 使用')
+  .action(asyncRun(() => slideshowLayoutsCmd()))
+
+slideshowLayoutsCommand
+  .command('create <layout.json>')
+  .description('从 JSON 文件新建排版模板——归属由身份自动决定：租户 Key 建的归本租户，个人账号建的仅本人可见。结构校验在服务端做')
+  .requiredOption('--name <名称>', '模板中文名')
+  .requiredOption('--slug <slug>', '对外调用标识（小写字母/数字/连字符，全局唯一）')
+  .option('--description <text>', '模板说明')
+  .option('--category <name>', '分类，默认「其他」')
+  .action(asyncRun((file: string, opts: any) => createSlideshowLayoutCmd(file, opts)))
+
 // 工作区（项目）与项目素材库：平台 → 账户 → 工作区三层归属，素材挂工作区
 const projectsCmd = program
   .command('projects')
@@ -416,6 +431,13 @@ program
   .description('查当前登录账户 + 租户归属（仅个人 login 可用，apiKey 调用会报错）')
   .action(withClient((client: StudioClient) => whoami(client)))
 
+program
+  .command('feedback [content]')
+  .description('提 bug / 需求（不带内容则交互式输入）；--list 看我的反馈记录。个人账户可提，租户 apiKey 会被服务端拒')
+  .option('--type <type>', '反馈类型：bug / 需求（默认 bug）')
+  .option('--list', '列出我的反馈记录')
+  .action(withLazyClient((getClient: () => StudioClient, content: string | undefined, opts: any) => feedback(getClient, content || '', opts)))
+
 program
   .command('config')
   .description('配置中台地址和 apiKey（存到 ~/.museav.json）')

package/src/local-slideshow.ts

@@ -1,14 +1,25 @@
 /**
  * 本地图集转竖版短视频 —— slideshow 的核心实现。
- * 一组图 + 每张的文字说明 + 配乐 → 1080×1920 的 mp4，适合发朋友圈 / 视频号 / 小红书。
+ * 一组图 + 每张的文字说明 + 配乐 → mp4，适合发朋友圈 / 视频号 / 小红书。
  *
- * 排版走 sharp 渲染 SVG（中文靠系统字体，macOS/Win/主流 Linux 都有中文字体），
- * 合成走 ffmpeg 的 concat demuxer —— 不引入 canvas 那种要编译的重依赖。
+ * 版面由**排版模板（图层 DSL）**描述，不再写死在代码里。内置一套默认模板（免登录可用），
+ * `--layout <slug>` 可以拉中台 `slideshow_layouts` 里的模板 —— 模板结构的真源在中台的
+ * `shared/slideshow-layout.js`。
+ *
+ * ## 这里刻意不校验模板
+ *
+ * 校验只在中台写入时做。本模块是消费方：遇到不认识的层类型**跳过该层并提示升级 CLI**，
+ * 而不是报错中断。老版本 CLI 碰上新层类型应该少画一个图层，不是彻底出不了片。
+ * 两侧都校验的话，老 CLI 会把新写的合法模板判为非法，那才是真坏掉。
+ *
+ * 渲染走 sharp 渲染 SVG（中文靠系统字体），合成走 ffmpeg 的 concat demuxer ——
+ * 不引入 canvas 那种要编译的重依赖。
  *
  * 三个实测踩出来的点，写在这里免得下次重踩：
  *
  * 1. 图片必须显式放大。小图（如 240×240 的表情）直接贴到 1080 宽的画布上只占两成宽，
  *    画面空得离谱。要按目标尺寸等比 resize，而不是「不超过某上限」那种只缩不放的逻辑。
+ *    贴纸类素材还要先裁掉四周透明留白（slot 层的 trim），否则放大的是留白、主体照样小。
  * 2. 配乐不能直接 -shortest。配乐通常比视频长几倍，硬切会在中途断掉。
  *    要 atrim 裁到视频时长 + 首尾 afade。
  * 3. concat demuxer 的最后一张要再列一次，否则它的 duration 被忽略，末页一闪而过。
@@ -18,22 +29,64 @@ import { tmpdir } from 'node:os'
 import { join } from 'node:path'
 import { spawn } from 'node:child_process'
 
+/** 图层类型。与中台 shared/slideshow-layout.js 的 LAYER_TYPES 对应。 */
+export type LayerType = 'rect' | 'ellipse' | 'text' | 'slot' | 'image'
+
+export interface Layer {
+  type: LayerType | string
+  fill?: string
+  opacity?: number
+  // rect / slot / image
+  box?: [number, number, number, number]
+  radius?: number
+  fit?: 'contain' | 'cover'
+  trim?: boolean
+  src?: string
+  // ellipse
+  cx?: number; cy?: number; rx?: number; ry?: number
+  // text
+  bind?: string | null
+  text?: string
+  x?: number; y?: number
+  size?: number
+  weight?: number
+  align?: 'left' | 'center' | 'right'
+  maxWidth?: number
+  minSize?: number
+}
+
+export interface Layout {
+  version?: number
+  canvas: { w: number; h: number; bg?: string }
+  seconds?: number
+  layers: Layer[]
+}
+
+/** 渲染时填进模板的内容。caption / image 逐页变化，其余全局固定。 */
+export interface PageContent {
+  title?: string
+  subtitle?: string
+  caption?: string
+  footer?: string
+  image: string
+}
+
 export interface SlideshowOpts {
   images: string[]
   out: string
+  layout: Layout
+  captions?: string[]
   title?: string
   subtitle?: string
-  captions?: string[]
   footer?: string
   music?: string
   seconds?: number
+  /** 目标尺寸。与模板 canvas 不同时整个版面按比例缩放 */
   width?: number
   height?: number
-  /** 主图渲染尺寸（正方形边长）。默认 520，约占 1080 宽的 48% */
-  artSize?: number
-  theme?: 'light' | 'dark'
-  /** 放大前先裁掉主图四周的透明留白，默认开（仅对带 alpha 的图生效） */
-  trim?: boolean
+  /** 解析 sticker://<id> → 图片 URL/本地路径。不传则跳过这类图层 */
+  resolveSticker?: (id: string) => Promise<string | null>
+  onWarn?: (msg: string) => void
 }
 
 const FONT = 'Hiragino Sans GB, PingFang SC, Microsoft YaHei, Noto Sans CJK SC, sans-serif'
@@ -50,46 +103,86 @@ function textWidth(s: string, size: number): number {
   return w
 }
 
-function fitSize(text: string, max: number, start: number, min = 24): number {
+function fitSize(text: string, max: number, start: number, min: number): number {
   let size = start
   while (size > min && textWidth(text, size) > max) size -= 2
   return size
 }
 
-function pageSvg(o: Required<Pick<SlideshowOpts, 'width' | 'height'>> & {
-  title?: string; subtitle?: string; caption?: string; footer?: string; theme: 'light' | 'dark'
-}): string {
-  const { width: W, height: H, theme } = o
-  const dark = theme === 'dark'
-  const bg = dark ? '#16181c' : '#ffffff'
-  const ink = dark ? '#e9ebef' : '#2b2d31'
-  const muted = dark ? '#8b929c' : '#8c929b'
-  const pink = dark ? '#3a2b33' : '#ffd6e2'
-  const mint = dark ? '#22383a' : '#baebe2'
-
-  const parts = [
-    `<rect width="${W}" height="${H}" fill="${bg}"/>`,
-    // 左上 / 右下两块装饰弧，位置固定，整套看起来是同一个模板
-    `<ellipse cx="${W * 0.176}" cy="${-H * 0.068}" rx="${W * 0.472}" ry="${H * 0.224}" fill="${pink}"/>`,
-    `<ellipse cx="${W * 1.028}" cy="${H * 0.99}" rx="${W * 0.269}" ry="${H * 0.146}" fill="${mint}"/>`,
-  ]
-  if (o.title) {
-    const s = fitSize(o.title, W * 0.86, Math.round(W * 0.078), 36)
-    parts.push(`<text x="${W / 2}" y="${H * 0.205}" font-family="${FONT}" font-size="${s}" font-weight="600" fill="${ink}" text-anchor="middle">${esc(o.title)}</text>`)
-  }
-  if (o.subtitle) {
-    const s = Math.round(W * 0.041)
-    parts.push(`<text x="${W / 2}" y="${H * 0.258}" font-family="${FONT}" font-size="${s}" fill="${muted}" text-anchor="middle">${esc(o.subtitle)}</text>`)
+/** 取 text 层这一页该显示的文字：有 bind 就取绑定值，否则用固定 text */
+function resolveText(layer: Layer, content: PageContent): string {
+  if (!layer.bind) return layer.text ?? ''
+  const v = (content as unknown as Record<string, unknown>)[layer.bind]
+  return typeof v === 'string' ? v : ''
+}
+
+/** 渲染步骤：一段矢量图层（SVG）或一个图片图层。**顺序就是 DSL 里 layers 的顺序。** */
+type Step =
+  | { kind: 'svg'; svg: string }
+  | { kind: 'image'; layer: Layer; box: [number, number, number, number] }
+
+/**
+ * 把一页拆成有序的渲染步骤。
+ *
+ * 关键点：**不能把图片层统一提到最后 composite**。sharp 的 composite 一律贴在底图之上，
+ * 那样所有图片就永远压在所有矢量层上面，DSL 里的图层顺序当场失效 ——
+ * 「图片铺满 + 文字压在上面」这种版式会渲染成文字被图片盖住（实测踩到）。
+ * 所以这里把连续的矢量层攒成一段 SVG，遇到图片层就断开，按原顺序逐段叠。
+ *
+ * 图片不嵌进 SVG 是另一回事：base64 内联会让 SVG 爆大且慢，走 composite 更划算。
+ */
+function buildPage(layout: Layout, content: PageContent, scale: number, onWarn?: (m: string) => void) {
+  const W = Math.round(layout.canvas.w * scale)
+  const H = Math.round(layout.canvas.h * scale)
+  const s = (n: number) => n * scale
+  const steps: Step[] = []
+  let parts: string[] = []
+  const unknown = new Set<string>()
+
+  // 攒够的矢量层收成一段 SVG（透明底 —— 背景色由 base 图承担，否则后一段会盖掉前一段）
+  const flush = () => {
+    if (!parts.length) return
+    steps.push({ kind: 'svg', svg: `<svg width="${W}" height="${H}" xmlns="http://www.w3.org/2000/svg">${parts.join('')}</svg>` })
+    parts = []
   }
-  if (o.caption) {
-    const s = fitSize(o.caption, W * 0.86, Math.round(W * 0.067), 28)
-    parts.push(`<text x="${W / 2}" y="${H * 0.822}" font-family="${FONT}" font-size="${s}" font-weight="600" fill="${ink}" text-anchor="middle">${esc(o.caption)}</text>`)
+
+  for (const layer of layout.layers) {
+    const op = layer.opacity !== undefined ? ` opacity="${layer.opacity}"` : ''
+
+    if (layer.type === 'rect' && layer.box) {
+      const [x, y, w, h] = layer.box
+      const r = layer.radius ? ` rx="${s(layer.radius)}"` : ''
+      parts.push(`<rect x="${s(x)}" y="${s(y)}" width="${s(w)}" height="${s(h)}"${r} fill="${layer.fill ?? '#000000'}"${op}/>`)
+    } else if (layer.type === 'ellipse') {
+      parts.push(`<ellipse cx="${s(layer.cx ?? 0)}" cy="${s(layer.cy ?? 0)}" rx="${s(layer.rx ?? 0)}" ry="${s(layer.ry ?? 0)}" fill="${layer.fill ?? '#000000'}"${op}/>`)
+    } else if (layer.type === 'text') {
+      const txt = resolveText(layer, content)
+      // 绑定值为空就整层不画（比如没给 --subtitle），而不是画一行空白占位
+      if (!txt) continue
+      const base = s(layer.size ?? 40)
+      const min = s(layer.minSize ?? Math.max(12, (layer.size ?? 40) * 0.5))
+      const max = (layer.maxWidth ?? 0.86) * W
+      const size = fitSize(txt, max, base, min)
+      const anchor = layer.align === 'left' ? 'start' : layer.align === 'right' ? 'end' : 'middle'
+      const weight = layer.weight ? ` font-weight="${layer.weight}"` : ''
+      parts.push(
+        `<text x="${s(layer.x ?? 0)}" y="${s(layer.y ?? 0)}" font-family="${FONT}" font-size="${size}"${weight} fill="${layer.fill ?? '#000000'}" text-anchor="${anchor}"${op}>${esc(txt)}</text>`,
+      )
+    } else if ((layer.type === 'slot' || layer.type === 'image') && layer.box) {
+      const [x, y, w, h] = layer.box
+      flush() // 断开：此前的矢量层要落在这张图**下面**
+      steps.push({ kind: 'image', layer, box: [s(x), s(y), s(w), s(h)] })
+    } else {
+      // 不认识的层类型：跳过，不中断。老 CLI 碰上新层类型该少画一层，不是出不了片。
+      unknown.add(String(layer.type))
+    }
   }
-  if (o.footer) {
-    const s = Math.round(W * 0.031)
-    parts.push(`<text x="${W / 2}" y="${H * 0.925}" font-family="${FONT}" font-size="${s}" fill="${muted}" text-anchor="middle">${esc(o.footer)}</text>`)
+  flush()
+
+  if (unknown.size && onWarn) {
+    onWarn(`模板里有本版本不认识的图层类型（${[...unknown].join(', ')}），已跳过。升级试试：npm i -g museav-cli`)
   }
-  return `<svg width="${W}" height="${H}" xmlns="http://www.w3.org/2000/svg">${parts.join('')}</svg>`
+  return { steps, W, H }
 }
 
 function run(cmd: string, args: string[]): Promise<{ code: number; err: string }> {
@@ -115,37 +208,92 @@ export async function makeSlideshow(opts: SlideshowOpts): Promise<{ out: string;
   if (!sharpMod) throw new Error('sharp 不可用。重装 CLI 即可补上：npm install -g museav-cli')
   const sharp = (sharpMod as any).default ?? sharpMod
 
-  const W = opts.width ?? 1080
-  const H = opts.height ?? 1920
-  const ART = opts.artSize ?? 520
-  const sec = opts.seconds ?? 2.5
-  const theme = opts.theme ?? 'light'
+  const layout = opts.layout
+  // 目标尺寸与模板 canvas 不同就整体等比缩放。取较小的比例，保证画面不被裁掉。
+  const targetW = opts.width ?? layout.canvas.w
+  const targetH = opts.height ?? layout.canvas.h
+  const scale = Math.min(targetW / layout.canvas.w, targetH / layout.canvas.h)
+  const sec = opts.seconds ?? layout.seconds ?? 2.5
   const work = await mkdtemp(join(tmpdir(), 'museav-slideshow-'))
 
+  // sticker:// 引用逐个解析一次就够，同一个贴图在每页都用得上
+  const stickerCache = new Map<string, string | null>()
+  let warned = false
+  const warn = (m: string) => { if (!warned) { warned = true; opts.onWarn?.(m) } }
+
   try {
     const pages: string[] = []
     for (let i = 0; i < opts.images.length; i++) {
-      const bg = Buffer.from(pageSvg({
-        width: W, height: H, theme,
-        title: opts.title, subtitle: opts.subtitle,
-        caption: opts.captions?.[i], footer: opts.footer,
-      }))
-      // 贴纸类图片四周常有大片透明留白，直接放大等于把留白也放大、主体显小。
-      // 先裁到主体外接框再放大，画面才撑得住。只对带 alpha 的图做——
-      // 对不透明照片 trim 会去裁纯色边框，那不是这里想要的。
-      let pipe = sharp(opts.images[i])
-      if (opts.trim !== false && (await pipe.metadata()).hasAlpha) {
-        pipe = sharp(opts.images[i]).trim({ background: { r: 0, g: 0, b: 0, alpha: 0 }, threshold: 8 })
+      const content: PageContent = {
+        title: opts.title,
+        subtitle: opts.subtitle,
+        caption: opts.captions?.[i],
+        footer: opts.footer,
+        image: opts.images[i],
       }
-      // 显式等比 resize 到 ART：小图必须放大，否则在竖屏里小得可怜
-      const art = await pipe
-        .resize(ART, ART, { fit: 'inside', withoutEnlargement: false, background: { r: 0, g: 0, b: 0, alpha: 0 } })
-        .png()
-        .toBuffer({ resolveWithObject: true })
-      const top = Math.round(H * 0.344 + (H * 0.365 - art.info.height) / 2)
-      const left = Math.round((W - art.info.width) / 2)
+      const { steps, W, H } = buildPage(layout, content, scale, warn)
+      const composites: { input: Buffer; top: number; left: number }[] = []
+
+      for (const step of steps) {
+        // 矢量段按原顺序插进来，图片压在它之前的段之上、之后的段之下
+        if (step.kind === 'svg') {
+          composites.push({ input: Buffer.from(step.svg), top: 0, left: 0 })
+          continue
+        }
+        const { layer, box } = step
+        const [bx, by, bw, bh] = box
+        let src: string | null = null
+
+        if (layer.type === 'slot') {
+          src = content.image
+        } else if (layer.src?.startsWith('sticker://')) {
+          const id = layer.src.slice('sticker://'.length)
+          if (!stickerCache.has(id)) stickerCache.set(id, opts.resolveSticker ? await opts.resolveSticker(id) : null)
+          src = stickerCache.get(id) ?? null
+          if (!src) { warn(`模板引用的贴图 ${id} 取不到，已跳过该图层`); continue }
+        } else {
+          src = layer.src ?? null
+        }
+        if (!src) continue
+
+        let pipe = sharp(src.startsWith('http') ? Buffer.from(await (await fetch(src)).arrayBuffer()) : src)
+        // 贴纸类素材四周常有大片透明留白，直接放大等于把留白也放大、主体显小。
+        // 只对带 alpha 的图做 —— 对不透明照片 trim 会去裁纯色边框，那不是这里想要的。
+        if (layer.trim && (await pipe.metadata()).hasAlpha) {
+          const buf = await pipe.toBuffer()
+          pipe = sharp(buf).trim({ background: { r: 0, g: 0, b: 0, alpha: 0 }, threshold: 8 })
+        }
+        // 显式放大：fit inside + withoutEnlargement:false，小图必须撑满槽位。
+        //
+        // 注意 box 的语义是**矩形框 + contain**（同 CSS object-fit），不是「正方形边长」。
+        // 2.9.0 那版把主图区当成正方形（resize(ART, ART)），对高瘦的图会受高度限制而偏小：
+        // 219×229 的图在 518×701 的框里，旧算法出 495×518，新算法出 518×542（大 4.6%）。
+        // 换成框语义是刻意的——框多大图就能占多大，这才符合直觉，也是主图偏小那个老问题的根治。
+        const art = await pipe
+          .resize(Math.round(bw), Math.round(bh), {
+            fit: layer.fit === 'cover' ? 'cover' : 'inside',
+            withoutEnlargement: false,
+            background: { r: 0, g: 0, b: 0, alpha: 0 },
+          })
+          .png()
+          .toBuffer({ resolveWithObject: true })
+        // 在槽位内居中
+        composites.push({
+          input: art.data,
+          top: Math.max(0, Math.round(by + (bh - art.info.height) / 2)),
+          left: Math.max(0, Math.round(bx + (bw - art.info.width) / 2)),
+        })
+      }
+
+      // 底图只负责画布背景色，所有内容（含第一段矢量层）都按顺序 composite 上去
       const page = join(work, `p${String(i).padStart(3, '0')}.png`)
-      await sharp(bg).composite([{ input: art.data, top: Math.max(0, top), left: Math.max(0, left) }]).png().toFile(page)
+      const bg = layout.canvas.bg ?? '#ffffff'
+      await sharp({
+        create: { width: W, height: H, channels: 4, background: bg === 'transparent' ? { r: 0, g: 0, b: 0, alpha: 0 } : bg },
+      })
+        .composite(composites)
+        .png()
+        .toFile(page)
       pages.push(page)
     }
 

package/src/slideshow-presets.ts

@@ -0,0 +1,42 @@
+/**
+ * 内置排版模板。不联网、不登录也能出片 —— 这是 slideshow 最重要的属性，
+ * 接中台模板库之后也必须保住。
+ *
+ * `sticker-pink-mint` 与中台 slideshow_layouts 里平台预置的同名模板**是同一份 DSL**
+ * （见 supabase/migrations/20260828120000_slideshow_layouts.sql）。存两份是刻意的：
+ * 中台那份是给人看、给人改的起点，这份是断网兜底。两份必须一致，改动时同步。
+ *
+ * 想要别的版面不要在这里加 —— 去中台建模板（museav slideshow-layouts create），
+ * 那才是排版体系的落点。这里只留「默认」和「深色默认」两套兜底。
+ */
+import type { Layout } from './local-slideshow.js'
+
+export const PRESET_LIGHT: Layout = {
+  version: 1,
+  canvas: { w: 1080, h: 1920, bg: '#ffffff' },
+  seconds: 2.5,
+  layers: [
+    { type: 'ellipse', cx: 190, cy: -131, rx: 510, ry: 430, fill: '#ffd6e2' },
+    { type: 'ellipse', cx: 1110, cy: 1901, rx: 291, ry: 280, fill: '#baebe2' },
+    { type: 'text', bind: 'title', x: 540, y: 394, size: 84, weight: 600, fill: '#2b2d31', align: 'center', maxWidth: 0.86, minSize: 36 },
+    { type: 'text', bind: 'subtitle', x: 540, y: 495, size: 44, fill: '#8c929b', align: 'center' },
+    { type: 'slot', bind: 'image', box: [281, 660, 518, 701], fit: 'contain', trim: true },
+    { type: 'text', bind: 'caption', x: 540, y: 1578, size: 72, weight: 600, fill: '#2b2d31', align: 'center', maxWidth: 0.86, minSize: 28 },
+    { type: 'text', bind: 'footer', x: 540, y: 1776, size: 33, fill: '#8c929b', align: 'center' },
+  ],
+}
+
+export const PRESET_DARK: Layout = {
+  ...PRESET_LIGHT,
+  canvas: { w: 1080, h: 1920, bg: '#16181c' },
+  layers: PRESET_LIGHT.layers.map((l) => {
+    if (l.type === 'ellipse') return { ...l, fill: l.fill === '#ffd6e2' ? '#3a2b33' : '#22383a' }
+    if (l.type === 'text') return { ...l, fill: l.fill === '#2b2d31' ? '#e9ebef' : '#8b929c' }
+    return l
+  }),
+}
+
+export const PRESETS: Record<string, Layout> = {
+  'sticker-pink-mint': PRESET_LIGHT,
+  'sticker-pink-mint-dark': PRESET_DARK,
+}