Terminal

1/**
2 * showcase-terminal — terminal window with typing animation.
3 *
4 * macOS-style terminal frame with traffic-light dots. Command types
5 * out character by character, then output lines stagger in below.
6 * All animation progress-driven. Cursor blinks via progress.
7 *
8 * The terminal frame itself lives in the TerminalOutput primitive
9 * (src/lib/primitives/devices/TerminalOutput.tsx) — shared with
10 * vibecoded scenes. It owns shrink-to-fit + ellipsis for long commands
11 * and output lines so they never clip mid-token at the frame edge.
12 */
13 
14import React from "react";
15import type { VariableField } from "../video-config";
16import { parseList } from "../parse-list";
17import type { SceneTemplateProps } from "./types";
18import { resolveTokens } from "../theme";
19import { TemplateText } from "./template-text";
20import { TerminalOutput } from "../primitives/devices/TerminalOutput";
21import { SceneBackground, mediaBackgroundDefaults, mediaBackgroundSchemaFields } from "./scene-background";
22 
23export const showcaseTerminalSchema: Record<string, VariableField> = {
24  texts: {
25    type: "string",
26    label: "Text",
27    default: "Ship it.",
28    required: true,
29    description: "Title text shown on the scene",
30  },
31  command: {
32    type: "string",
33    label: "Command",
34    default: "npx vanillasky create --trailer",
35    required: true,
36    description: "The command that gets typed out character by character",
37  },
38  output: {
39    type: "string",
40    label: "Output lines",
41    default: "✓ Scenes composed,✓ Beat-synced to music,✓ Ready to export",
42    description: "JSON array of output lines that appear after the command. Send as an array — terminal output frequently contains commas. Example: [\"✓ Built /api/auth/login.ts, /api/users/me.ts\", \"✓ 12 tests passed\", \"✓ Ready to deploy\"]",
43  },
44  promptPrefix: {
45    type: "string",
46    label: "Prompt",
47    default: "$",
48    description: "Prompt prefix character (e.g. $, >, →)",
49  },
50  ...mediaBackgroundSchemaFields,
51  textColor: {
52    type: "color",
53    label: "Text color",
54    default: "",
55    description: "Override text color (leave empty for auto)",
56  },
57};
58 
59export const showcaseTerminalDefaults: Record<string, unknown> = {
60  texts: "Ship it.",
61  command: "npx vanillasky create --trailer",
62  output: "✓ Scenes composed,✓ Beat-synced to music,✓ Ready to export",
63  promptPrefix: "$",
64  ...mediaBackgroundDefaults,
65  textColor: "",
66};
67 
68// … truncated