dsh-drawai 0.4.2 → 0.4.4

package/lib/motion/shotcraft/upstream/template/THEMES.md

@@ -1,44 +1,44 @@
-# Visual themes and palette editing
-
-Open the **主题 (Themes)** tab in the existing left sidebar. Its upper section selects a preset; its lower section edits background, card surface, text, secondary text, accent, subtle fill, and border colors using a color picker or a six-digit HEX value. Press Enter or leave the HEX field to apply it. Invalid input is discarded.
-
-Presets: Ink Press, Modern Light, Midnight, Sage, Coral, Iris, Deep Ocean, Obsidian Violet, and Vintage Kraft. Sage, Coral, and Iris replace the earlier bright experiments with pale surfaces and restrained accents. Their existing IDs (`solar-pop`, `coral-burst`, `color-play`) remain compatible with saved projects. Coral's neutral surface / dark violet text / coral accent direction draws on [Happy Hues](https://www.happyhues.co/); values are adapted for this fixture, not an exact copy of a complete site.
-
-- `themeId` and optional `themeColors` are stored in project JSON and browser saves. Changes support undo/redo. A continuous color-picker gesture creates one undo step and keeps the current clip selected.
-- Selecting another preset clears palette overrides; **恢复预设** clears them for the current preset. Explicit per-clip edits remain intact and take precedence.
-- Ink Press preserves its original raster screenshots and has no palette editor. Select another preset to recolor both the film and its demo UI assets.
-- Editable presets preserve the weekly heading in the report-header band and use compact 36px captions near the bottom. Explicit per-clip text, size, and position edits still take precedence.
-- Themes apply to the adapted template scenes. Ordinary Gallery cards and the editor's own chrome are not globally recolored.
-- Old projects without a theme marker are normalized once; explicit edits are never inferred or discarded after migration.
-
-## Single palette source
-
-`src/themes/palettes.json` defines the seven semantic colors per editable preset. Both the scene adapter and `themes/ui.cjs` read it. Add the palette, its type ID, and a manifest label to add a preset using the same fixture. No copied scene tree is needed.
-
-`src/themes/palette-assets.json` contains five trusted, serialized demo pages and 27 crop definitions. Runtime SVG assets embed this markup using `foreignObject` and validated HEX variables. The same renderer is used in preview and video export, with a bounded cache. Editing colors does not invoke a capture service or recolor pixels with a filter. Third-party screenshots still require a separately adapted source.
-
-After changing fixture markup or geometry, run `node scripts/build-palette-assets.cjs` from `template/`. It requires Playwright in the development environment. `SHOTCRAFT_PLAYWRIGHT` and `SHOTCRAFT_BROWSER` can select an existing module and Chromium executable. The compiled JSON is committed, so end users do not need these tools.
-
-The optional manifest additions are `themes[].palette` and `paletteProp`, alongside `themes`, `defaultTheme`, `themeProp`, and each unit's `themeKey`. Props resolve schema defaults → preset defaults → project palette → explicit clip edits. Manifests without palette support keep their existing behavior.
-
-## Direct render
-
-The existing `AiflPromo` composition accepts `theme` and optional `colors`:
-
-```json
-{"theme":"coral-burst","colors":{"accent":"#2459ad","surface":"#e1ecff"}}
-```
-
-Save this as a props JSON and pass it to `npm run render -- --props=<file>`. Workbench exports instead carry `project.themeId` and `project.themeColors`. Missing or unknown preset IDs fall back to Ink Press.
-
-## Verification and provenance
-
-After installing dependencies in both `workbench/` and `template/`, run `npm run test:themes` and `npx tsc --noEmit` from `workbench/`, and `npx tsc --noEmit` from `template/`. Tests cover custom palette validation and precedence, reset, edit preservation, legacy saves, unthemed projects, palette history, preserved weekly copy, caption defaults, and separate light/accent/shadow roles. Browser/export validation results are recorded in PR #80.
-
-The fixture describes a fictional research workspace, not a connected service or real research results. Original assets retain their existing attribution/license terms; new fixture code and derived assets use this repository's Apache-2.0 license.
-
-## Save, import and export palettes
-
-Name a palette and click **保存配色** to add it to **我的主题**. These entries live in this browser's local storage, scoped to the current manifest name (up to 50 entries); they are separate from the project timeline. Click an entry to apply it, or its × button to remove it. Export a JSON file to back it up or move it to another browser.
-
-**导入配色** accepts version-1 `shotcraft-palette` JSON exported by this panel, validates the compatible base theme and complete HEX fields, and applies it without changing timeline edits. Click Save afterward to add the imported palette to My Themes. Arbitrary color-site JSON schemas are not yet supported. **导出配色** downloads the current palette, name and base theme ID. Vintage Kraft (`vintage-kraft`) preserves its procedural paper texture when its palette is saved or imported.
+# Visual themes and palette editing
+
+Open the **主题 (Themes)** tab in the existing left sidebar. Its upper section selects a preset; its lower section edits background, card surface, text, secondary text, accent, subtle fill, and border colors using a color picker or a six-digit HEX value. Press Enter or leave the HEX field to apply it. Invalid input is discarded.
+
+Presets: Ink Press, Modern Light, Midnight, Sage, Coral, Iris, Deep Ocean, Obsidian Violet, and Vintage Kraft. Sage, Coral, and Iris replace the earlier bright experiments with pale surfaces and restrained accents. Their existing IDs (`solar-pop`, `coral-burst`, `color-play`) remain compatible with saved projects. Coral's neutral surface / dark violet text / coral accent direction draws on [Happy Hues](https://www.happyhues.co/); values are adapted for this fixture, not an exact copy of a complete site.
+
+- `themeId` and optional `themeColors` are stored in project JSON and browser saves. Changes support undo/redo. A continuous color-picker gesture creates one undo step and keeps the current clip selected.
+- Selecting another preset clears palette overrides; **恢复预设** clears them for the current preset. Explicit per-clip edits remain intact and take precedence.
+- Ink Press preserves its original raster screenshots and has no palette editor. Select another preset to recolor both the film and its demo UI assets.
+- Editable presets preserve the weekly heading in the report-header band and use compact 36px captions near the bottom. Explicit per-clip text, size, and position edits still take precedence.
+- Themes apply to the adapted template scenes. Ordinary Gallery cards and the editor's own chrome are not globally recolored.
+- Old projects without a theme marker are normalized once; explicit edits are never inferred or discarded after migration.
+
+## Single palette source
+
+`src/themes/palettes.json` defines the seven semantic colors per editable preset. Both the scene adapter and `themes/ui.cjs` read it. Add the palette, its type ID, and a manifest label to add a preset using the same fixture. No copied scene tree is needed.
+
+`src/themes/palette-assets.json` contains five trusted, serialized demo pages and 27 crop definitions. Runtime SVG assets embed this markup using `foreignObject` and validated HEX variables. The same renderer is used in preview and video export, with a bounded cache. Editing colors does not invoke a capture service or recolor pixels with a filter. Third-party screenshots still require a separately adapted source.
+
+After changing fixture markup or geometry, run `node scripts/build-palette-assets.cjs` from `template/`. It requires Playwright in the development environment. `SHOTCRAFT_PLAYWRIGHT` and `SHOTCRAFT_BROWSER` can select an existing module and Chromium executable. The compiled JSON is committed, so end users do not need these tools.
+
+The optional manifest additions are `themes[].palette` and `paletteProp`, alongside `themes`, `defaultTheme`, `themeProp`, and each unit's `themeKey`. Props resolve schema defaults → preset defaults → project palette → explicit clip edits. Manifests without palette support keep their existing behavior.
+
+## Direct render
+
+The existing `AiflPromo` composition accepts `theme` and optional `colors`:
+
+```json
+{"theme":"coral-burst","colors":{"accent":"#2459ad","surface":"#e1ecff"}}
+```
+
+Save this as a props JSON and pass it to `npm run render -- --props=<file>`. Workbench exports instead carry `project.themeId` and `project.themeColors`. Missing or unknown preset IDs fall back to Ink Press.
+
+## Verification and provenance
+
+After installing dependencies in both `workbench/` and `template/`, run `npm run test:themes` and `npx tsc --noEmit` from `workbench/`, and `npx tsc --noEmit` from `template/`. Tests cover custom palette validation and precedence, reset, edit preservation, legacy saves, unthemed projects, palette history, preserved weekly copy, caption defaults, and separate light/accent/shadow roles. Browser/export validation results are recorded in PR #80.
+
+The fixture describes a fictional research workspace, not a connected service or real research results. Original assets retain their existing attribution/license terms; new fixture code and derived assets use this repository's Apache-2.0 license.
+
+## Save, import and export palettes
+
+Name a palette and click **保存配色** to add it to **我的主题**. These entries live in this browser's local storage, scoped to the current manifest name (up to 50 entries); they are separate from the project timeline. Click an entry to apply it, or its × button to remove it. Export a JSON file to back it up or move it to another browser.
+
+**导入配色** accepts version-1 `shotcraft-palette` JSON exported by this panel, validates the compatible base theme and complete HEX fields, and applies it without changing timeline edits. Click Save afterward to add the imported palette to My Themes. Arbitrary color-site JSON schemas are not yet supported. **导出配色** downloads the current palette, name and base theme ID. Vintage Kraft (`vintage-kraft`) preserves its procedural paper texture when its palette is saved or imported.

package/lib/motion/shotcraft/upstream/template/package.json

@@ -1,20 +1,20 @@
-{
-  "name": "promo-template",
-  "version": "1.0.0",
-  "private": true,
-  "scripts": {
-    "dev": "remotion studio src/index.ts",
-    "render": "remotion render src/index.ts AiflPromo out/promo.mp4",
-    "still": "remotion still src/index.ts AiflPromo"
-  },
-  "dependencies": {
-    "@remotion/cli": "4.0.484",
-    "react": "19.2.7",
-    "react-dom": "19.2.7",
-    "remotion": "4.0.484"
-  },
-  "devDependencies": {
-    "@types/react": "19.2.17",
-    "typescript": "6.0.3"
-  }
-}
+{
+  "name": "promo-template",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "remotion studio src/index.ts",
+    "render": "remotion render src/index.ts AiflPromo out/promo.mp4",
+    "still": "remotion still src/index.ts AiflPromo"
+  },
+  "dependencies": {
+    "@remotion/cli": "4.0.484",
+    "react": "19.2.7",
+    "react-dom": "19.2.7",
+    "remotion": "4.0.484"
+  },
+  "devDependencies": {
+    "@types/react": "19.2.17",
+    "typescript": "6.0.3"
+  }
+}

package/lib/motion/shotcraft/upstream/template/remotion.config.ts

@@ -1,6 +1,6 @@
-import { Config } from '@remotion/cli/config';
-
-Config.setVideoImageFormat('jpeg');
-Config.setOverwriteOutput(true);
-Config.setChromiumOpenGlRenderer('angle');
-Config.setConcurrency(4);
+import { Config } from '@remotion/cli/config';
+
+Config.setVideoImageFormat('jpeg');
+Config.setOverwriteOutput(true);
+Config.setChromiumOpenGlRenderer('angle');
+Config.setConcurrency(4);

package/lib/motion/shotcraft/upstream/template/src/Root.tsx

@@ -1,17 +1,17 @@
-import { Composition } from 'remotion';
-import { AIFL_TOTAL } from './aifl/Main';
-import { ThemedFilm } from './themes/ThemedFilm';
-
-export const Root: React.FC = () => {
-  return (
-    <Composition
-      id="AiflPromo"
-      component={ThemedFilm}
-      defaultProps={{theme: 'ink-press'}}
-      durationInFrames={AIFL_TOTAL}
-      fps={30}
-      width={1920}
-      height={1080}
-    />
-  );
-};
+import { Composition } from 'remotion';
+import { AIFL_TOTAL } from './aifl/Main';
+import { ThemedFilm } from './themes/ThemedFilm';
+
+export const Root: React.FC = () => {
+  return (
+    <Composition
+      id="AiflPromo"
+      component={ThemedFilm}
+      defaultProps={{theme: 'ink-press'}}
+      durationInFrames={AIFL_TOTAL}
+      fps={30}
+      width={1920}
+      height={1080}
+    />
+  );
+};

package/lib/motion/shotcraft/upstream/template/src/aifl/Caption.tsx

@@ -1,65 +1,65 @@
-import { useVisualTheme, sceneDefaults } from '../themes/visual-theme';
-import { interpolate, useCurrentFrame } from 'remotion';
-
-
-/** Context-level defaults, editable per clip in the workbench (hex = sRGB of the oklch tokens). */
-export const CAPTION_DEFAULTS = {
-  bottom: 72,
-  fontSize: 22,
-  color: '#575552',  // oklch(45% 0.006 82)
-  accent: '#955905', // oklch(52% 0.115 65)
-};
-
-/** Screen-space narration caption: a mono UI info-strip at the bottom of the
- * frame, led by a small amber square. Fades/rises in over 8 frames and fades
- * out over the last 8 of its window. */
-export const Caption: React.FC<{
-  text: string;
-  duration: number;
-  bottom?: number;
-  fontSize?: number;
-  color?: string;
-  accent?: string;
-}> = (props) => {
-  const theme = useVisualTheme();
-  const paperStyle = theme.id === 'ink-press';
-  const MONO = (paperStyle ? 'ui-monospace, SFMono-Regular, Menlo, monospace' : theme.font);
-  const {text, duration, ...style} = props;
-  const {fontSize, color, accent, bottom} = {...sceneDefaults(theme, 'caption', CAPTION_DEFAULTS), ...style};
-  const frame = useCurrentFrame();
-  const inT = interpolate(frame, [0, 8], [0, 1], {
-    extrapolateLeft: 'clamp',
-    extrapolateRight: 'clamp',
-  });
-  const outT = interpolate(frame, [duration - 8, duration], [1, 0], {
-    extrapolateLeft: 'clamp',
-    extrapolateRight: 'clamp',
-  });
-
-  return (
-    <div
-      style={{
-        position: 'absolute',
-        left: 0,
-        right: 0,
-        bottom,
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'baseline',
-        gap: 14,
-        fontFamily: MONO,
-        fontSize,
-        letterSpacing: paperStyle ? '0.14em' : '0.015em',
-        ...(!paperStyle ? {left: '50%', right: 'auto', width: 'max-content', maxWidth: '90%', padding: '8px 18px', borderRadius: 8, background: theme.surface, border: `1px solid ${theme.border}`, fontWeight: 500, lineHeight: 1.2} : {}),
-        textTransform: 'uppercase',
-        color,
-        opacity: inT * outT,
-        transform: paperStyle ? `translateY(${(1 - inT) * 8}px)` : `translate(-50%, ${(1 - inT) * 8}px)`,
-        pointerEvents: 'none',
-      }}
-    >
-      <span style={{ width: 6, height: 6, background: accent, display: 'inline-block' }} />
-      <span>{text}</span>
-    </div>
-  );
-};
+import { useVisualTheme, sceneDefaults } from '../themes/visual-theme';
+import { interpolate, useCurrentFrame } from 'remotion';
+
+
+/** Context-level defaults, editable per clip in the workbench (hex = sRGB of the oklch tokens). */
+export const CAPTION_DEFAULTS = {
+  bottom: 72,
+  fontSize: 22,
+  color: '#575552',  // oklch(45% 0.006 82)
+  accent: '#955905', // oklch(52% 0.115 65)
+};
+
+/** Screen-space narration caption: a mono UI info-strip at the bottom of the
+ * frame, led by a small amber square. Fades/rises in over 8 frames and fades
+ * out over the last 8 of its window. */
+export const Caption: React.FC<{
+  text: string;
+  duration: number;
+  bottom?: number;
+  fontSize?: number;
+  color?: string;
+  accent?: string;
+}> = (props) => {
+  const theme = useVisualTheme();
+  const paperStyle = theme.id === 'ink-press';
+  const MONO = (paperStyle ? 'ui-monospace, SFMono-Regular, Menlo, monospace' : theme.font);
+  const {text, duration, ...style} = props;
+  const {fontSize, color, accent, bottom} = {...sceneDefaults(theme, 'caption', CAPTION_DEFAULTS), ...style};
+  const frame = useCurrentFrame();
+  const inT = interpolate(frame, [0, 8], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  const outT = interpolate(frame, [duration - 8, duration], [1, 0], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        bottom,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'baseline',
+        gap: 14,
+        fontFamily: MONO,
+        fontSize,
+        letterSpacing: paperStyle ? '0.14em' : '0.015em',
+        ...(!paperStyle ? {left: '50%', right: 'auto', width: 'max-content', maxWidth: '90%', padding: '8px 18px', borderRadius: 8, background: theme.surface, border: `1px solid ${theme.border}`, fontWeight: 500, lineHeight: 1.2} : {}),
+        textTransform: 'uppercase',
+        color,
+        opacity: inT * outT,
+        transform: paperStyle ? `translateY(${(1 - inT) * 8}px)` : `translate(-50%, ${(1 - inT) * 8}px)`,
+        pointerEvents: 'none',
+      }}
+    >
+      <span style={{ width: 6, height: 6, background: accent, display: 'inline-block' }} />
+      <span>{text}</span>
+    </div>
+  );
+};

package/lib/motion/shotcraft/upstream/template/src/aifl/DigitRoll.tsx

@@ -1,48 +1,48 @@
-import { useVisualTheme } from '../themes/visual-theme';
-import { interpolate, useCurrentFrame, Easing } from 'remotion';
-
-const DIGITS = '0123456789';
-
-/** Odometer-style digit column roll for monospace numerals. */
-export const DigitRoll: React.FC<{
-  value: string;
-  delay?: number;
-  fontSize?: number;
-  color?: string;
-}> = ({ value, delay = 0, fontSize = 30, color = 'oklch(52% 0.115 65)' }) => {
-  const theme = useVisualTheme();
-  const paperStyle = theme.id === 'ink-press';
-
-  const frame = useCurrentFrame();
-  const lineH = fontSize * 1.15;
-  return (
-    <span style={{ fontFamily: paperStyle ? undefined : theme.font, display: 'inline-flex', overflow: 'hidden', height: lineH, verticalAlign: 'bottom' }}>
-      {value.split('').map((ch, i) => {
-        const target = DIGITS.indexOf(ch);
-        if (target < 0) {
-          return (
-            <span key={i} style={{ fontSize, lineHeight: `${lineH}px`, color }}>{ch}</span>
-          );
-        }
-        const t = interpolate(frame, [delay + i * 4, delay + i * 4 + 22], [0, 1], {
-          extrapolateLeft: 'clamp',
-          extrapolateRight: 'clamp',
-          easing: Easing.bezier(0.25, 0.8, 0.25, 1),
-        });
-        // roll through one full strip then land on the target digit
-        const offset = (10 + target) * t * lineH;
-        return (
-          <span key={i} style={{ display: 'inline-block', height: lineH }}>
-            <span style={{ display: 'block', transform: `translateY(${-offset}px)` }}>
-              {(DIGITS + DIGITS).split('').map((d, j) => (
-                <span key={j} style={{ display: 'block', fontSize, lineHeight: `${lineH}px`, color, fontVariantNumeric: 'tabular-nums' }}>
-                  {d}
-                </span>
-              ))}
-            </span>
-          </span>
-        );
-      })}
-    </span>
-  );
-};
+import { useVisualTheme } from '../themes/visual-theme';
+import { interpolate, useCurrentFrame, Easing } from 'remotion';
+
+const DIGITS = '0123456789';
+
+/** Odometer-style digit column roll for monospace numerals. */
+export const DigitRoll: React.FC<{
+  value: string;
+  delay?: number;
+  fontSize?: number;
+  color?: string;
+}> = ({ value, delay = 0, fontSize = 30, color = 'oklch(52% 0.115 65)' }) => {
+  const theme = useVisualTheme();
+  const paperStyle = theme.id === 'ink-press';
+
+  const frame = useCurrentFrame();
+  const lineH = fontSize * 1.15;
+  return (
+    <span style={{ fontFamily: paperStyle ? undefined : theme.font, display: 'inline-flex', overflow: 'hidden', height: lineH, verticalAlign: 'bottom' }}>
+      {value.split('').map((ch, i) => {
+        const target = DIGITS.indexOf(ch);
+        if (target < 0) {
+          return (
+            <span key={i} style={{ fontSize, lineHeight: `${lineH}px`, color }}>{ch}</span>
+          );
+        }
+        const t = interpolate(frame, [delay + i * 4, delay + i * 4 + 22], [0, 1], {
+          extrapolateLeft: 'clamp',
+          extrapolateRight: 'clamp',
+          easing: Easing.bezier(0.25, 0.8, 0.25, 1),
+        });
+        // roll through one full strip then land on the target digit
+        const offset = (10 + target) * t * lineH;
+        return (
+          <span key={i} style={{ display: 'inline-block', height: lineH }}>
+            <span style={{ display: 'block', transform: `translateY(${-offset}px)` }}>
+              {(DIGITS + DIGITS).split('').map((d, j) => (
+                <span key={j} style={{ display: 'block', fontSize, lineHeight: `${lineH}px`, color, fontVariantNumeric: 'tabular-nums' }}>
+                  {d}
+                </span>
+              ))}
+            </span>
+          </span>
+        );
+      })}
+    </span>
+  );
+};

package/lib/motion/shotcraft/upstream/template/src/aifl/FlashCut.tsx

@@ -1,24 +1,24 @@
-import { useVisualTheme, themePaint } from '../themes/visual-theme';
-import { AbsoluteFill, interpolate, useCurrentFrame } from 'remotion';
-
-/** Bright-field cut: a warm-white bloom that flashes over the hard cut. */
-export const FlashCut: React.FC<{ duration?: number }> = ({ duration = 10 }) => {
-  const theme = useVisualTheme();
-  const paperStyle = theme.id === 'ink-press';
-  const paint = (css: string) => themePaint(theme, css);
-
-  const frame = useCurrentFrame();
-  const o = interpolate(frame, [0, duration * 0.4, duration], [0, paperStyle ? 0.85 : 0.24, 0], {
-    extrapolateLeft: 'clamp',
-    extrapolateRight: 'clamp',
-  });
-  return (
-    <AbsoluteFill
-      style={{
-        pointerEvents: 'none',
-        opacity: o,
-        background: paint('radial-gradient(ellipse at 50% 45%, rgba(255,248,235,0.98), rgba(255,244,224,0.55) 55%, transparent 80%)'),
-      }}
-    />
-  );
-};
+import { useVisualTheme, themePaint } from '../themes/visual-theme';
+import { AbsoluteFill, interpolate, useCurrentFrame } from 'remotion';
+
+/** Bright-field cut: a warm-white bloom that flashes over the hard cut. */
+export const FlashCut: React.FC<{ duration?: number }> = ({ duration = 10 }) => {
+  const theme = useVisualTheme();
+  const paperStyle = theme.id === 'ink-press';
+  const paint = (css: string) => themePaint(theme, css);
+
+  const frame = useCurrentFrame();
+  const o = interpolate(frame, [0, duration * 0.4, duration], [0, paperStyle ? 0.85 : 0.24, 0], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  return (
+    <AbsoluteFill
+      style={{
+        pointerEvents: 'none',
+        opacity: o,
+        background: paint('radial-gradient(ellipse at 50% 45%, rgba(255,248,235,0.98), rgba(255,244,224,0.55) 55%, transparent 80%)'),
+      }}
+    />
+  );
+};