dsh-drawai 0.4.2 → 0.4.4

package/lib/motion/shotcraft/upstream/template/src/themes/palette-assets.ts

@@ -1,24 +1,24 @@
-import assets from './palette-assets.json';
-
-// Bounded cache: color-picker changes must not retain an unlimited number of SVGs.
-const cache = new Map<string,string>();
-export const paletteAsset = (colors: Record<string,string>, name: string): string | undefined => {
-  const clip = assets.clips[name as keyof typeof assets.clips];
-  if (!clip) return undefined;
-  const keys = ['page','surface','field','text','muted','accent','border'];
-  const values = keys.map(k => /^#[0-9a-f]{6}$/i.test(colors[k]) ? colors[k] : '#ffffff');
-  const kraft = colors.id === 'vintage-kraft';
-  const key = name + values.join('') + (kraft ? ':kraft' : '');
-  if (cache.has(key)) return cache.get(key);
-  const style = keys.map((k,i) => `--${k}:${values[i]}`).join(';');
-  const paperStyle = kraft ? '<style>.project-card,.paper-card,.metadata{border-radius:3px!important;box-shadow:inset 0 0 24px rgba(92,55,23,.09)}.card-tags span,.chip,.status{border-radius:2px!important}</style>' : '';
-  const markup = assets.pages[clip.kind as keyof typeof assets.pages] + paperStyle;
-  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${clip.w*2}" height="${clip.h*2}" viewBox="${clip.x} ${clip.y} ${clip.w} ${clip.h}"><foreignObject x="0" y="0" width="1920" height="5000"><div xmlns="http://www.w3.org/1999/xhtml" style="${style};width:1920px"><style>${clip.empty ? '.project-card{visibility:hidden!important}' : ''}</style>${markup}</div></foreignObject></svg>`;
-  // Fixed seed keeps the fine grain attached to the paper as the camera moves.
-  const grain = `<defs><filter id="kraft-grain" x="0" y="0" width="100%" height="100%"><feTurbulence type="fractalNoise" baseFrequency=".72" numOctaves="3" seed="17"/><feColorMatrix type="saturate" values="0"/></filter></defs><rect x="${clip.x}" y="${clip.y}" width="${clip.w}" height="${clip.h}" filter="url(#kraft-grain)" opacity=".18" style="mix-blend-mode:multiply"/>`;
-  const uri = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(kraft ? svg.replace(/<\/svg>$/, grain + '</svg>') : svg)
-    .replace(/\(/g, '%28').replace(/\)/g, '%29').replace(/'/g, '%27');
-  if (cache.size >= 128) cache.delete(cache.keys().next().value!);
-  cache.set(key,uri);
-  return uri;
-};
+import assets from './palette-assets.json';
+
+// Bounded cache: color-picker changes must not retain an unlimited number of SVGs.
+const cache = new Map<string,string>();
+export const paletteAsset = (colors: Record<string,string>, name: string): string | undefined => {
+  const clip = assets.clips[name as keyof typeof assets.clips];
+  if (!clip) return undefined;
+  const keys = ['page','surface','field','text','muted','accent','border'];
+  const values = keys.map(k => /^#[0-9a-f]{6}$/i.test(colors[k]) ? colors[k] : '#ffffff');
+  const kraft = colors.id === 'vintage-kraft';
+  const key = name + values.join('') + (kraft ? ':kraft' : '');
+  if (cache.has(key)) return cache.get(key);
+  const style = keys.map((k,i) => `--${k}:${values[i]}`).join(';');
+  const paperStyle = kraft ? '<style>.project-card,.paper-card,.metadata{border-radius:3px!important;box-shadow:inset 0 0 24px rgba(92,55,23,.09)}.card-tags span,.chip,.status{border-radius:2px!important}</style>' : '';
+  const markup = assets.pages[clip.kind as keyof typeof assets.pages] + paperStyle;
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${clip.w*2}" height="${clip.h*2}" viewBox="${clip.x} ${clip.y} ${clip.w} ${clip.h}"><foreignObject x="0" y="0" width="1920" height="5000"><div xmlns="http://www.w3.org/1999/xhtml" style="${style};width:1920px"><style>${clip.empty ? '.project-card{visibility:hidden!important}' : ''}</style>${markup}</div></foreignObject></svg>`;
+  // Fixed seed keeps the fine grain attached to the paper as the camera moves.
+  const grain = `<defs><filter id="kraft-grain" x="0" y="0" width="100%" height="100%"><feTurbulence type="fractalNoise" baseFrequency=".72" numOctaves="3" seed="17"/><feColorMatrix type="saturate" values="0"/></filter></defs><rect x="${clip.x}" y="${clip.y}" width="${clip.w}" height="${clip.h}" filter="url(#kraft-grain)" opacity=".18" style="mix-blend-mode:multiply"/>`;
+  const uri = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(kraft ? svg.replace(/<\/svg>$/, grain + '</svg>') : svg)
+    .replace(/\(/g, '%28').replace(/\)/g, '%29').replace(/'/g, '%27');
+  if (cache.size >= 128) cache.delete(cache.keys().next().value!);
+  cache.set(key,uri);
+  return uri;
+};

package/lib/motion/shotcraft/upstream/template/src/themes/palettes.json

@@ -1,74 +1,74 @@
-{
-  "vintage-kraft": {
-    "page": "#c8aa7d",
-    "surface": "#dfc69e",
-    "field": "#ccb086",
-    "text": "#382a20",
-    "muted": "#6b513b",
-    "accent": "#8b4937",
-    "border": "#ac895e"
-  },
-  "deep-ocean": {
-    "page": "#0b1620",
-    "surface": "#142735",
-    "field": "#1c3443",
-    "text": "#e8f1f5",
-    "muted": "#9fb6c3",
-    "accent": "#7cc8b4",
-    "border": "#304957"
-  },
-  "obsidian-violet": {
-    "page": "#14121b",
-    "surface": "#211d2c",
-    "field": "#2e283d",
-    "text": "#f0edf7",
-    "muted": "#b3a9c5",
-    "accent": "#bca0e8",
-    "border": "#41364f"
-  },
-  "modern-light": {
-    "page": "#f4f7fb",
-    "surface": "#ffffff",
-    "field": "#edf2f8",
-    "text": "#142238",
-    "muted": "#5c6b82",
-    "accent": "#2563eb",
-    "border": "#d8e2ef"
-  },
-  "midnight": {
-    "page": "#090f1a",
-    "surface": "#111c2c",
-    "field": "#162438",
-    "text": "#f0f5ff",
-    "muted": "#9babbe",
-    "accent": "#61d9ef",
-    "border": "#293b52"
-  },
-  "solar-pop": {
-    "page": "#f9faf6",
-    "surface": "#ffffff",
-    "field": "#f0f3e7",
-    "text": "#26342b",
-    "muted": "#637067",
-    "accent": "#527434",
-    "border": "#dde4d5"
-  },
-  "coral-burst": {
-    "page": "#fffffe",
-    "surface": "#ffffff",
-    "field": "#f9f2f3",
-    "text": "#1f1235",
-    "muted": "#716579",
-    "accent": "#d94e59",
-    "border": "#e9dfe6"
-  },
-  "color-play": {
-    "page": "#f7f5fb",
-    "surface": "#ffffff",
-    "field": "#eee9f7",
-    "text": "#282039",
-    "muted": "#726781",
-    "accent": "#7354b5",
-    "border": "#e2dbea"
-  }
-}
+{
+  "vintage-kraft": {
+    "page": "#c8aa7d",
+    "surface": "#dfc69e",
+    "field": "#ccb086",
+    "text": "#382a20",
+    "muted": "#6b513b",
+    "accent": "#8b4937",
+    "border": "#ac895e"
+  },
+  "deep-ocean": {
+    "page": "#0b1620",
+    "surface": "#142735",
+    "field": "#1c3443",
+    "text": "#e8f1f5",
+    "muted": "#9fb6c3",
+    "accent": "#7cc8b4",
+    "border": "#304957"
+  },
+  "obsidian-violet": {
+    "page": "#14121b",
+    "surface": "#211d2c",
+    "field": "#2e283d",
+    "text": "#f0edf7",
+    "muted": "#b3a9c5",
+    "accent": "#bca0e8",
+    "border": "#41364f"
+  },
+  "modern-light": {
+    "page": "#f4f7fb",
+    "surface": "#ffffff",
+    "field": "#edf2f8",
+    "text": "#142238",
+    "muted": "#5c6b82",
+    "accent": "#2563eb",
+    "border": "#d8e2ef"
+  },
+  "midnight": {
+    "page": "#090f1a",
+    "surface": "#111c2c",
+    "field": "#162438",
+    "text": "#f0f5ff",
+    "muted": "#9babbe",
+    "accent": "#61d9ef",
+    "border": "#293b52"
+  },
+  "solar-pop": {
+    "page": "#f9faf6",
+    "surface": "#ffffff",
+    "field": "#f0f3e7",
+    "text": "#26342b",
+    "muted": "#637067",
+    "accent": "#527434",
+    "border": "#dde4d5"
+  },
+  "coral-burst": {
+    "page": "#fffffe",
+    "surface": "#ffffff",
+    "field": "#f9f2f3",
+    "text": "#1f1235",
+    "muted": "#716579",
+    "accent": "#d94e59",
+    "border": "#e9dfe6"
+  },
+  "color-play": {
+    "page": "#f7f5fb",
+    "surface": "#ffffff",
+    "field": "#eee9f7",
+    "text": "#282039",
+    "muted": "#726781",
+    "accent": "#7354b5",
+    "border": "#e2dbea"
+  }
+}

package/lib/motion/shotcraft/upstream/template/src/themes/visual-theme.tsx

@@ -1,91 +1,91 @@
-import { createContext, useContext, type FC, type ReactNode } from 'react';
-import { staticFile } from 'remotion';
-import palettes from './palettes.json';
-import { paletteAsset } from './palette-assets';
-
-export type ThemeId = 'ink-press' | keyof typeof palettes;
-const font = '"Segoe UI Variable", "Segoe UI", "Microsoft YaHei", Arial, sans-serif';
-export const THEME = {
-  id: 'modern-light', page: '#f4f7fb', surface: '#ffffff', field: '#edf2f8',
-  text: '#142238', muted: '#5c6b82', accent: '#2563eb', border: '#d8e2ef',
-  shadowRgb: '20,34,56', pageRgb: '244,247,251', lightRgb: '239,245,255',
-  accentRgb: '37,99,235', stage: '#142238', font,
-};
-export type VisualTheme = typeof THEME;
-const rgb = (hex: string) => [1,3,5].map(i => parseInt(hex.slice(i,i+2),16)).join(',');
-export const VISUAL_THEMES: Record<ThemeId, VisualTheme> = {
-  'ink-press': {...THEME, id:'ink-press', page:'#f2eee6'},
-  ...Object.fromEntries(Object.entries(palettes).map(([id,p]) => [id, {...THEME,...p,id,
-    pageRgb:rgb(p.page),accentRgb:rgb(p.accent),shadowRgb:rgb(p.text),lightRgb:rgb(p.surface),stage:p.field}]))
-} as Record<ThemeId, VisualTheme>;
-export const resolveTheme = (id?: string, colors?: Record<string, string>): VisualTheme => {
-  const base = VISUAL_THEMES[id as ThemeId] ?? VISUAL_THEMES['ink-press'];
-  if (base.id === 'ink-press' || !colors) return base;
-  const valid = Object.fromEntries(Object.entries(colors).filter(([k,v]) => k in palettes['modern-light'] && /^#[0-9a-f]{6}$/i.test(v)));
-  const p = {...base,...valid};
-  return {...p,pageRgb:rgb(p.page),accentRgb:rgb(p.accent),shadowRgb:rgb(p.text),lightRgb:rgb(p.surface),stage:p.field};
-};
-const ThemeContext = createContext(VISUAL_THEMES['ink-press']);
-export const VisualThemeProvider: FC<{theme?: string; colors?: Record<string,string>; children: ReactNode}> = ({theme, colors, children}) =>
-  <ThemeContext.Provider value={resolveTheme(theme, colors)}>{children}</ThemeContext.Provider>;
-export const useVisualTheme = () => useContext(ThemeContext);
-export const rgba = (color: string, alpha: number) =>
-  `color-mix(in srgb, ${color} ${Math.max(0, Math.min(1, alpha)) * 100}%, transparent)`;
-export const themeAsset = (theme: VisualTheme, src: string) => {
-  if (src.startsWith('textures/live/') && theme.id !== 'ink-press') {
-    const asset = paletteAsset(theme, src.slice('textures/live/'.length));
-    if (!asset) throw new Error(`Missing editable texture: ${src}`);
-    return asset;
-  }
-  return staticFile(src);
-};
-// Roles of the original scene materials. Warm light is illumination, not an
-// amber UI accent; unknown RGB colors are left alone instead of guessed.
-const INK_RGB_ROLES: Record<string, 'pageRgb' | 'lightRgb' | 'accentRgb' | 'shadowRgb'> = {
-  '250,247,242': 'pageRgb',
-  '255,190,120': 'lightRgb', '255,214,150': 'lightRgb',
-  '255,240,210': 'lightRgb', '255,240,214': 'lightRgb',
-  '255,241,214': 'lightRgb', '255,244,224': 'lightRgb',
-  '255,246,228': 'lightRgb', '255,248,232': 'lightRgb',
-  '255,248,235': 'lightRgb', '255,255,255': 'lightRgb',
-  '180,120,50': 'accentRgb',
-  '0,0,0': 'shadowRgb', '30,25,18': 'shadowRgb',
-  '31,41,55': 'shadowRgb', '40,30,20': 'shadowRgb',
-  '60,45,30': 'shadowRgb', '62,48,32': 'shadowRgb', '70,56,38': 'shadowRgb',
-};
-
-/** Material adapter for existing Ink Press CSS. Returning the input verbatim keeps
- * the default preset backward compatible, including its original gradients. */
-export const themePaint = (theme: VisualTheme, css: string): string => {
-  if (theme.id === 'ink-press') return css;
-  const hex: Record<string, string> = {
-    '#f2eee6': theme.page, '#faf7f2': theme.page, '#f9f6f1': theme.page,
-    '#fdfcfa': theme.page, '#fefcf9': theme.field, '#fff': theme.surface,
-    '#13110f': theme.text, '#1f2937': theme.text, '#955905': theme.accent,
-    '#ae6700': theme.accent, '#b5651d': theme.accent,
-    '#65635f': theme.muted, '#575552': theme.muted, '#6b7280': theme.muted, '#9ca3af': theme.muted,
-  };
-  return css.replace(/#[\da-f]{3,8}\b/gi, c => hex[c.toLowerCase()] ?? c)
-    .replace(/oklch\(\s*([\d.]+)%?[^)]+\)/g, (cssColor, lightness) => {
-      const l = Number(lightness) <= 1 ? Number(lightness) * 100 : Number(lightness);
-      const color = l >= 94 ? theme.page : l >= 80 ? theme.border : l >= 40 ? theme.accent : theme.text;
-      const alpha = cssColor.match(/\/\s*([\d.]+)(%)?/);
-      return alpha ? rgba(color, Number(alpha[1]) / (alpha[2] ? 100 : 1)) : color;
-    })
-    .replace(/(rgba?)\(\s*(\d+),\s*(\d+),\s*(\d+)/g, (cssColor, fn, r, g, b) => {
-      const role = INK_RGB_ROLES[`${+r},${+g},${+b}`];
-      return role ? `${fn}(${theme[role]}` : cssColor;
-    });
-};
-
-/** Per-preset defaults, shared by direct rendering and the workbench manifest. */
-export const sceneDefaults = <T extends Record<string, unknown>>(theme: VisualTheme, key: string, defaults: T): T => {
-  if (theme.id === 'ink-press') return defaults;
-  const mapped = Object.fromEntries(Object.entries(defaults).map(([k,v]) =>
-    [k, typeof v === 'string' && /^(#|oklch|rgba)/.test(v) ? themePaint(theme, v) : v]));
-  const sizes: Record<string, Record<string, unknown>> = {
-    morning: {wordmarkSize: 116, kickerSize: 44}, outro: {wordmarkSize: 124, taglineSize: 44},
-    caption: {fontSize: 36, bottom: 32, color: theme.text}, wbr: {kickerSize: 20},
-  };
-  return {...mapped, ...sizes[key]} as T;
-};
+import { createContext, useContext, type FC, type ReactNode } from 'react';
+import { staticFile } from 'remotion';
+import palettes from './palettes.json';
+import { paletteAsset } from './palette-assets';
+
+export type ThemeId = 'ink-press' | keyof typeof palettes;
+const font = '"Segoe UI Variable", "Segoe UI", "Microsoft YaHei", Arial, sans-serif';
+export const THEME = {
+  id: 'modern-light', page: '#f4f7fb', surface: '#ffffff', field: '#edf2f8',
+  text: '#142238', muted: '#5c6b82', accent: '#2563eb', border: '#d8e2ef',
+  shadowRgb: '20,34,56', pageRgb: '244,247,251', lightRgb: '239,245,255',
+  accentRgb: '37,99,235', stage: '#142238', font,
+};
+export type VisualTheme = typeof THEME;
+const rgb = (hex: string) => [1,3,5].map(i => parseInt(hex.slice(i,i+2),16)).join(',');
+export const VISUAL_THEMES: Record<ThemeId, VisualTheme> = {
+  'ink-press': {...THEME, id:'ink-press', page:'#f2eee6'},
+  ...Object.fromEntries(Object.entries(palettes).map(([id,p]) => [id, {...THEME,...p,id,
+    pageRgb:rgb(p.page),accentRgb:rgb(p.accent),shadowRgb:rgb(p.text),lightRgb:rgb(p.surface),stage:p.field}]))
+} as Record<ThemeId, VisualTheme>;
+export const resolveTheme = (id?: string, colors?: Record<string, string>): VisualTheme => {
+  const base = VISUAL_THEMES[id as ThemeId] ?? VISUAL_THEMES['ink-press'];
+  if (base.id === 'ink-press' || !colors) return base;
+  const valid = Object.fromEntries(Object.entries(colors).filter(([k,v]) => k in palettes['modern-light'] && /^#[0-9a-f]{6}$/i.test(v)));
+  const p = {...base,...valid};
+  return {...p,pageRgb:rgb(p.page),accentRgb:rgb(p.accent),shadowRgb:rgb(p.text),lightRgb:rgb(p.surface),stage:p.field};
+};
+const ThemeContext = createContext(VISUAL_THEMES['ink-press']);
+export const VisualThemeProvider: FC<{theme?: string; colors?: Record<string,string>; children: ReactNode}> = ({theme, colors, children}) =>
+  <ThemeContext.Provider value={resolveTheme(theme, colors)}>{children}</ThemeContext.Provider>;
+export const useVisualTheme = () => useContext(ThemeContext);
+export const rgba = (color: string, alpha: number) =>
+  `color-mix(in srgb, ${color} ${Math.max(0, Math.min(1, alpha)) * 100}%, transparent)`;
+export const themeAsset = (theme: VisualTheme, src: string) => {
+  if (src.startsWith('textures/live/') && theme.id !== 'ink-press') {
+    const asset = paletteAsset(theme, src.slice('textures/live/'.length));
+    if (!asset) throw new Error(`Missing editable texture: ${src}`);
+    return asset;
+  }
+  return staticFile(src);
+};
+// Roles of the original scene materials. Warm light is illumination, not an
+// amber UI accent; unknown RGB colors are left alone instead of guessed.
+const INK_RGB_ROLES: Record<string, 'pageRgb' | 'lightRgb' | 'accentRgb' | 'shadowRgb'> = {
+  '250,247,242': 'pageRgb',
+  '255,190,120': 'lightRgb', '255,214,150': 'lightRgb',
+  '255,240,210': 'lightRgb', '255,240,214': 'lightRgb',
+  '255,241,214': 'lightRgb', '255,244,224': 'lightRgb',
+  '255,246,228': 'lightRgb', '255,248,232': 'lightRgb',
+  '255,248,235': 'lightRgb', '255,255,255': 'lightRgb',
+  '180,120,50': 'accentRgb',
+  '0,0,0': 'shadowRgb', '30,25,18': 'shadowRgb',
+  '31,41,55': 'shadowRgb', '40,30,20': 'shadowRgb',
+  '60,45,30': 'shadowRgb', '62,48,32': 'shadowRgb', '70,56,38': 'shadowRgb',
+};
+
+/** Material adapter for existing Ink Press CSS. Returning the input verbatim keeps
+ * the default preset backward compatible, including its original gradients. */
+export const themePaint = (theme: VisualTheme, css: string): string => {
+  if (theme.id === 'ink-press') return css;
+  const hex: Record<string, string> = {
+    '#f2eee6': theme.page, '#faf7f2': theme.page, '#f9f6f1': theme.page,
+    '#fdfcfa': theme.page, '#fefcf9': theme.field, '#fff': theme.surface,
+    '#13110f': theme.text, '#1f2937': theme.text, '#955905': theme.accent,
+    '#ae6700': theme.accent, '#b5651d': theme.accent,
+    '#65635f': theme.muted, '#575552': theme.muted, '#6b7280': theme.muted, '#9ca3af': theme.muted,
+  };
+  return css.replace(/#[\da-f]{3,8}\b/gi, c => hex[c.toLowerCase()] ?? c)
+    .replace(/oklch\(\s*([\d.]+)%?[^)]+\)/g, (cssColor, lightness) => {
+      const l = Number(lightness) <= 1 ? Number(lightness) * 100 : Number(lightness);
+      const color = l >= 94 ? theme.page : l >= 80 ? theme.border : l >= 40 ? theme.accent : theme.text;
+      const alpha = cssColor.match(/\/\s*([\d.]+)(%)?/);
+      return alpha ? rgba(color, Number(alpha[1]) / (alpha[2] ? 100 : 1)) : color;
+    })
+    .replace(/(rgba?)\(\s*(\d+),\s*(\d+),\s*(\d+)/g, (cssColor, fn, r, g, b) => {
+      const role = INK_RGB_ROLES[`${+r},${+g},${+b}`];
+      return role ? `${fn}(${theme[role]}` : cssColor;
+    });
+};
+
+/** Per-preset defaults, shared by direct rendering and the workbench manifest. */
+export const sceneDefaults = <T extends Record<string, unknown>>(theme: VisualTheme, key: string, defaults: T): T => {
+  if (theme.id === 'ink-press') return defaults;
+  const mapped = Object.fromEntries(Object.entries(defaults).map(([k,v]) =>
+    [k, typeof v === 'string' && /^(#|oklch|rgba)/.test(v) ? themePaint(theme, v) : v]));
+  const sizes: Record<string, Record<string, unknown>> = {
+    morning: {wordmarkSize: 116, kickerSize: 44}, outro: {wordmarkSize: 124, taglineSize: 44},
+    caption: {fontSize: 36, bottom: 32, color: theme.text}, wbr: {kickerSize: 20},
+  };
+  return {...mapped, ...sizes[key]} as T;
+};