code-syntax

1/**
2 * Minimal syntax tokenizer and editor palette shared by the code scenes
3 * (`code-reveal`, `code-accordion`, `code-diff-wipe`).
4 *
5 * This is deliberately not a real parser. A video shows a handful of lines for
6 * a couple of seconds, so the goal is a believable colour rhythm — strings,
7 * comments, keywords, types, calls — not correctness on pathological input.
8 * Everything runs per frame, so it stays regex-based and allocation-light.
9 */
10 
11export type CodeTokenKind =
12  | "plain"
13  | "comment"
14  | "string"
15  | "keyword"
16  | "number"
17  | "type"
18  | "call"
19  | "prop"
20  | "punct"
21  | "tag";
22 
23export type CodeToken = {
24  text: string;
25  kind: CodeTokenKind;
26};
27 
28export type CodeTheme = {
29  page: string;
30  window: string;
31  header: string;
32  border: string;
33  highlight: string;
34  gutter: string;
35  fg: string;
36  dim: string;
37  faint: string;
38  band: string;
39  shadow: string;
40  token: Record<CodeTokenKind, string>;
41};
42 
43/**
44 * JetBrains Mono (and every other mono face worth shipping) advances 0.6em per
45 * character. Carets and wipe masks are positioned arithmetically from this
46 * rather than measured, so they stay exact in a headless render.
47 */
48export const MONO_ADVANCE = 0.6;
49 
50export const CODE_THEMES: Record<"dark" | "light", CodeTheme> = {
51  dark: {
52    page: "#07070B",
53    window: "#0B0C11",
54    header: "rgba(255,255,255,0.035)",
55    border: "rgba(255,255,255,0.09)",
56    highlight: "rgba(255,255,255,0.14)",
57    gutter: "rgba(255,255,255,0.02)",
58    fg: "#D8DCE4",
59    dim: "#7A828F",
60    faint: "#4A5160",
61    band: "rgba(255,255,255,0.05)",
62    shadow: "rgba(0,0,0,0.55)",
63    token: {
64      plain: "#D8DCE4",
65      comment: "#5C6472",
66      string: "#9BD4A0",
67      keyword: "#C99BE8",
68      number: "#E8B86D",
69      type: "#7DD3E8",
70      call: "#8FB8F0",
71      prop: "#E8B86D",
72      punct: "#7A828F",
73      tag: "#7DD3E8",
74    },
75  },
76  light: {
77    page: "#F4F4F2",
78    window: "#FFFFFF",
79    header: "rgba(0,0,0,0.025)",
80    border: "rgba(0,0,0,0.10)",
81    highlight: "rgba(255,255,255,0.9)",
82    gutter: "rgba(0,0,0,0.018)",
83    fg: "#22252B",
84    dim: "#6B7280",
85    faint: "#A0A6B0",
86    band: "rgba(15,18,25,0.045)",
87    shadow: "rgba(15,18,25,0.18)",
88    token: {
89      plain: "#22252B",
90      comment: "#8A93A1",
91      string: "#1B7F4B",
92      keyword: "#8B3FBF",
93      number: "#9A5B12",
94      type: "#0E7490",
95      call: "#2563A8",
96      prop: "#9A5B12",
97      punct: "#6B7280",
98      tag: "#0E7490",
99    },
100  },
101};
102 
103const KEYWORDS = new Set([
104// … truncated