Code Editor

1/**
2 * showcase-code — code editor window with syntax-highlighted snippet.
3 *
4 * macOS-style editor frame with traffic-light dots and filename in
5 * the title bar. Code lines appear with staggered fade-in. Simple
6 * syntax coloring for keywords, strings, comments, and numbers.
7 * Same frame style as showcase-terminal.
8 *
9 * The editor frame itself lives in the CodeEditor primitive
10 * (src/lib/primitives/devices/CodeEditor.tsx) — shared with vibecoded
11 * scenes. It owns shrink-to-fit + ellipsis for long lines so code never
12 * clips mid-token at the frame edge.
13 */
14 
15import React from "react";
16import type { VariableField } from "../video-config";
17import type { SceneTemplateProps } from "./types";
18import { resolveTokens } from "../theme";
19import { TemplateText } from "./template-text";
20import { CodeEditor } from "../primitives/devices/CodeEditor";
21import { SceneBackground, mediaBackgroundDefaults, mediaBackgroundSchemaFields } from "./scene-background";
22 
23export const showcaseCodeSchema: Record<string, VariableField> = {
24  texts: {
25    type: "string",
26    label: "Text",
27    default: "Simple as this.",
28    required: true,
29    description: "Title text shown on the scene",
30  },
31  code: {
32    type: "string",
33    label: "Code",
34    default: 'import { create } from "vanillasky";\n\nconst video = await create({\n  prompt: "Launch trailer",\n  style: "cinematic",\n});\n\nconsole.log(video.url);',
35    required: true,
36    description: "Code snippet — use \\n for line breaks",
37  },
38  filename: {
39    type: "string",
40    label: "Filename",
41    default: "app.ts",
42    description: "Filename shown in the editor title bar",
43  },
44  ...mediaBackgroundSchemaFields,
45  textColor: {
46    type: "color",
47    label: "Text color",
48    default: "",
49    description: "Override text color (leave empty for auto)",
50  },
51};
52 
53export const showcaseCodeDefaults: Record<string, unknown> = {
54  texts: "Simple as this.",
55  code: 'import { create } from "vanillasky";\n\nconst video = await create({\n  prompt: "Launch trailer",\n  style: "cinematic",\n});\n\nconsole.log(video.url);',
56  filename: "app.ts",
57  ...mediaBackgroundDefaults,
58  textColor: "",
59};
60 
61export const ShowcaseCodeTemplate: React.FC<SceneTemplateProps> = ({
62  variables,
63  style,
64  progress,
65  beatIntensity,
66  width,
67  height,
68  safeZone,
69  sceneDuration,
70  backgroundEffect,
71  isPlaying = true,
72}) => {
73  const { accent, content, font } = resolveTokens(style);
74  const textColor = String(variables.textColor || "") || content;
75// … truncated