@motionscript/code 0.0.0-stage → 0.1.0-alpha.0

package/dist/style.js

@@ -0,0 +1,203 @@
+import { tagHighlighter, tags as t } from "@lezer/highlight";
+/**
+ * Motion Canvas's default highlight palette (a Nord-derived theme), ported from
+ * `@motion-canvas/2d`'s DefaultHighlightStyle so highlighting matches Motion
+ * Canvas token-for-token. Colors and tag groupings are kept identical; only the
+ * shape changes (color strings in place of CSS rules).
+ */
+export const DefaultHighlightStyle = {
+    name: "motion-canvas-default",
+    defaultColor: "#d8dee9",
+    rules: [
+        { tag: t.keyword, color: "#5e81ac" },
+        { tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName], color: "#88c0d0" },
+        { tag: [t.variableName], color: "#8fbcbb" },
+        { tag: [t.function(t.variableName)], color: "#8fbcbb" },
+        { tag: [t.labelName], color: "#81a1c1" },
+        { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: "#5e81ac" },
+        { tag: [t.definition(t.name), t.separator], color: "#a3be8c" },
+        { tag: [t.brace], color: "#8fbcbb" },
+        { tag: [t.annotation], color: "#d30102" },
+        { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: "#b48ead" },
+        { tag: [t.typeName, t.className], color: "#ECEFF4" },
+        { tag: [t.operator, t.operatorKeyword], color: "#a3be8c" },
+        { tag: [t.tagName], color: "#b48ead" },
+        { tag: [t.squareBracket], color: "#ECEFF4" },
+        { tag: [t.angleBracket], color: "#ECEFF4" },
+        { tag: [t.attributeName], color: "#eceff4" },
+        { tag: [t.regexp], color: "#5e81ac" },
+        { tag: [t.quote], color: "#b48ead" },
+        { tag: [t.string], color: "#a3be8c" },
+        { tag: t.link, color: "#a3be8c" },
+        { tag: [t.url, t.escape, t.special(t.string)], color: "#8fbcbb" },
+        { tag: [t.meta], color: "#88c0d0" },
+        { tag: [t.monospace], color: "#d8dee9" },
+        { tag: [t.comment], color: "#4c566a" },
+        { tag: t.strong, color: "#5e81ac" },
+        { tag: t.emphasis, color: "#5e81ac" },
+        { tag: t.heading, color: "#5e81ac" },
+        { tag: t.special(t.heading1), color: "#5e81ac" },
+        { tag: t.heading1, color: "#5e81ac" },
+        { tag: [t.heading2, t.heading3, t.heading4], color: "#5e81ac" },
+        { tag: [t.heading5, t.heading6], color: "#5e81ac" },
+        { tag: [t.atom, t.bool, t.special(t.variableName)], color: "#d08770" },
+        { tag: [t.processingInstruction, t.inserted], color: "#8fbcbb" },
+        { tag: [t.contentSeparator], color: "#ebcb8b" },
+        { tag: t.invalid, color: "#434c5e" },
+    ],
+};
+/**
+ * GitHub Dark highlight palette, adapted from `@uiw/codemirror-theme-github`.
+ * `defaultColor` is GitHub's editor foreground (`#c9d1d9`), used for any text the
+ * parser tags don't cover. DOM-only style props (backgroundColor, textDecoration,
+ * fontWeight, fontStyle) are dropped — we only color tokens on the canvas.
+ */
+export const GithubDarkStyle = {
+    name: "github-dark",
+    defaultColor: "#c9d1d9",
+    rules: [
+        { tag: [t.standard(t.tagName), t.tagName], color: "#7ee787" },
+        { tag: [t.comment, t.bracket], color: "#8b949e" },
+        { tag: [t.className, t.propertyName], color: "#d2a8ff" },
+        { tag: [t.variableName, t.attributeName, t.number, t.operator], color: "#79c0ff" },
+        { tag: [t.keyword, t.typeName, t.typeOperator], color: "#ff7b72" },
+        { tag: [t.string, t.meta, t.regexp], color: "#a5d6ff" },
+        { tag: [t.name, t.quote], color: "#7ee787" },
+        { tag: [t.heading, t.strong], color: "#d2a8ff" },
+        { tag: [t.emphasis], color: "#d2a8ff" },
+        { tag: [t.deleted], color: "#ffdcd7" },
+        { tag: [t.atom, t.bool, t.special(t.variableName)], color: "#ffab70" },
+        { tag: t.invalid, color: "#f97583" },
+    ],
+};
+/**
+ * GitHub Light highlight palette, adapted from `@uiw/codemirror-theme-github`.
+ * `defaultColor` is GitHub's editor foreground (`#24292e`). See {@link GithubDarkStyle}
+ * for the note on dropped DOM-only style props.
+ */
+export const GithubLightStyle = {
+    name: "github-light",
+    defaultColor: "#24292e",
+    rules: [
+        { tag: [t.standard(t.tagName), t.tagName], color: "#116329" },
+        { tag: [t.comment, t.bracket], color: "#6a737d" },
+        { tag: [t.className, t.propertyName], color: "#6f42c1" },
+        { tag: [t.variableName, t.attributeName, t.number, t.operator], color: "#005cc5" },
+        { tag: [t.keyword, t.typeName, t.typeOperator], color: "#d73a49" },
+        { tag: [t.string, t.meta, t.regexp], color: "#032f62" },
+        { tag: [t.name, t.quote], color: "#22863a" },
+        { tag: [t.heading, t.strong], color: "#24292e" },
+        { tag: [t.emphasis], color: "#24292e" },
+        { tag: [t.deleted], color: "#b31d28" },
+        { tag: [t.atom, t.bool, t.special(t.variableName)], color: "#e36209" },
+        { tag: [t.url, t.escape, t.regexp, t.link], color: "#032f62" },
+        { tag: t.invalid, color: "#cb2431" },
+    ],
+};
+/**
+ * VS Code Dark+ highlight palette, adapted from the `@uiw/codemirror-theme-vscode`
+ * snippet. `defaultColor` is VS Code's editor foreground (`#9cdcfe`). DOM-only
+ * style props are dropped; later rules win, matching {@link tagHighlighter}.
+ */
+export const VscodeDarkStyle = {
+    name: "vscode-dark",
+    defaultColor: "#9cdcfe",
+    rules: [
+        {
+            tag: [
+                t.keyword, t.operatorKeyword, t.modifier, t.color,
+                t.constant(t.name), t.standard(t.name), t.standard(t.tagName),
+                t.special(t.brace), t.atom, t.bool, t.special(t.variableName),
+            ],
+            color: "#569cd6",
+        },
+        { tag: [t.controlKeyword, t.moduleKeyword], color: "#c586c0" },
+        {
+            tag: [
+                t.name, t.deleted, t.character, t.macroName, t.propertyName,
+                t.variableName, t.labelName, t.definition(t.name),
+            ],
+            color: "#9cdcfe",
+        },
+        { tag: t.heading, color: "#9cdcfe" },
+        { tag: [t.typeName, t.className, t.tagName, t.changed, t.annotation, t.self, t.namespace], color: "#4ec9b0" },
+        { tag: [t.function(t.variableName), t.function(t.propertyName)], color: "#dcdcaa" },
+        { tag: [t.number], color: "#b5cea8" },
+        { tag: [t.operator, t.punctuation, t.separator, t.url, t.escape], color: "#d4d4d4" },
+        { tag: [t.regexp], color: "#d16969" },
+        { tag: [t.special(t.string), t.processingInstruction, t.string, t.inserted], color: "#ce9178" },
+        { tag: [t.angleBracket], color: "#808080" },
+        { tag: [t.meta, t.comment], color: "#6a9955" },
+        { tag: t.link, color: "#6a9955" },
+        { tag: t.invalid, color: "#ff0000" },
+    ],
+};
+/**
+ * VS Code Light+ highlight palette, adapted from the `@uiw/codemirror-theme-vscode`
+ * snippet. `defaultColor` is VS Code's editor foreground (`#383a42`). See
+ * {@link VscodeDarkStyle} for the note on dropped DOM-only style props.
+ */
+export const VscodeLightStyle = {
+    name: "vscode-light",
+    defaultColor: "#383a42",
+    rules: [
+        {
+            tag: [
+                t.keyword, t.operatorKeyword, t.modifier, t.color,
+                t.constant(t.name), t.standard(t.name), t.standard(t.tagName),
+                t.special(t.brace), t.atom, t.bool, t.special(t.variableName),
+            ],
+            color: "#0000ff",
+        },
+        { tag: [t.moduleKeyword, t.controlKeyword], color: "#af00db" },
+        {
+            tag: [
+                t.name, t.deleted, t.character, t.macroName, t.propertyName,
+                t.variableName, t.labelName, t.definition(t.name),
+            ],
+            color: "#0070c1",
+        },
+        { tag: t.heading, color: "#0070c1" },
+        { tag: [t.typeName, t.className, t.tagName, t.changed, t.annotation, t.self, t.namespace], color: "#267f99" },
+        { tag: [t.function(t.variableName), t.function(t.propertyName)], color: "#795e26" },
+        { tag: [t.number], color: "#098658" },
+        { tag: [t.operator, t.punctuation, t.separator, t.url, t.escape], color: "#383a42" },
+        { tag: [t.regexp], color: "#af00db" },
+        { tag: [t.special(t.string), t.processingInstruction, t.string, t.inserted], color: "#a31515" },
+        { tag: [t.angleBracket], color: "#383a42" },
+        { tag: [t.meta, t.comment], color: "#008000" },
+        { tag: t.link, color: "#4078f2" },
+        { tag: t.invalid, color: "#e45649" },
+    ],
+};
+/**
+ * The built-in themes, keyed by their string name. {@link CodeThemeName} is the
+ * union of these keys — pass one of those strings (or any {@link CodeHighlightStyle}
+ * object) to a Code node's `theme` prop.
+ */
+export const BUILTIN_THEMES = {
+    // Literal keys (not computed from `.name`) so `keyof` yields a string-literal
+    // union for CodeThemeName; these must stay in sync with each style's `name`.
+    "motion-canvas-default": DefaultHighlightStyle,
+    "github-dark": GithubDarkStyle,
+    "github-light": GithubLightStyle,
+    "vscode-dark": VscodeDarkStyle,
+    "vscode-light": VscodeLightStyle,
+};
+// Cache one compiled Highlighter per style name. Compiling builds a tag-rule
+// matcher; the parsed result is pure data so it's safe to share across Code nodes.
+const compiledByName = new Map();
+/**
+ * Compile a {@link CodeHighlightStyle} into a `@lezer/highlight` {@link Highlighter}
+ * whose "class" output is the literal color string for each tag. Cached by style
+ * name so repeated lookups (every tokenize) don't rebuild the matcher.
+ */
+export function compileStyle(style) {
+    const cached = compiledByName.get(style.name);
+    if (cached)
+        return cached;
+    const highlighter = tagHighlighter(style.rules.map(rule => ({ tag: rule.tag, class: rule.color })));
+    compiledByName.set(style.name, highlighter);
+    return highlighter;
+}
+//# sourceMappingURL=style.js.map

package/dist/style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","sourceRoot":"","sources":["../src/style.ts"],"names":[],"mappings":"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","sourcesContent":["import { Highlighter, Tag, tagHighlighter, tags as t } from \"@lezer/highlight\";\n\n/**\n * A single style rule: map one or more Lezer highlight {@link Tag}s to a color.\n * This mirrors a `@codemirror/language` HighlightStyle entry, but instead of\n * emitting CSS class names it carries the color directly — we render to a canvas,\n * not the DOM, so there is no stylesheet to resolve against.\n */\nexport interface CodeStyleRule {\n    tag: Tag | readonly Tag[];\n    color: string;\n}\n\n/**\n * A code theme: an ordered list of tag→color rules plus a fallback color for any\n * text the parser produces no highlight tag for (operators, punctuation, plain\n * identifiers in some grammars, etc.). Pass a custom one via the Code node's\n * `theme` prop to recolor highlighting without touching the highlighter wiring.\n *\n * @remarks\n * Later rules win when several match the same tag, matching how\n * `@lezer/highlight`'s {@link tagHighlighter} resolves precedence.\n */\nexport interface CodeHighlightStyle {\n    /** Stable name, used as the highlighter cache key. */\n    name: string;\n    /** Color applied to text with no matching tag. */\n    defaultColor: string;\n    rules: CodeStyleRule[];\n}\n\n/**\n * Motion Canvas's default highlight palette (a Nord-derived theme), ported from\n * `@motion-canvas/2d`'s DefaultHighlightStyle so highlighting matches Motion\n * Canvas token-for-token. Colors and tag groupings are kept identical; only the\n * shape changes (color strings in place of CSS rules).\n */\nexport const DefaultHighlightStyle: CodeHighlightStyle = {\n    name: \"motion-canvas-default\",\n    defaultColor: \"#d8dee9\",\n    rules: [\n        { tag: t.keyword, color: \"#5e81ac\" },\n        { tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName], color: \"#88c0d0\" },\n        { tag: [t.variableName], color: \"#8fbcbb\" },\n        { tag: [t.function(t.variableName)], color: \"#8fbcbb\" },\n        { tag: [t.labelName], color: \"#81a1c1\" },\n        { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: \"#5e81ac\" },\n        { tag: [t.definition(t.name), t.separator], color: \"#a3be8c\" },\n        { tag: [t.brace], color: \"#8fbcbb\" },\n        { tag: [t.annotation], color: \"#d30102\" },\n        { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: \"#b48ead\" },\n        { tag: [t.typeName, t.className], color: \"#ECEFF4\" },\n        { tag: [t.operator, t.operatorKeyword], color: \"#a3be8c\" },\n        { tag: [t.tagName], color: \"#b48ead\" },\n        { tag: [t.squareBracket], color: \"#ECEFF4\" },\n        { tag: [t.angleBracket], color: \"#ECEFF4\" },\n        { tag: [t.attributeName], color: \"#eceff4\" },\n        { tag: [t.regexp], color: \"#5e81ac\" },\n        { tag: [t.quote], color: \"#b48ead\" },\n        { tag: [t.string], color: \"#a3be8c\" },\n        { tag: t.link, color: \"#a3be8c\" },\n        { tag: [t.url, t.escape, t.special(t.string)], color: \"#8fbcbb\" },\n        { tag: [t.meta], color: \"#88c0d0\" },\n        { tag: [t.monospace], color: \"#d8dee9\" },\n        { tag: [t.comment], color: \"#4c566a\" },\n        { tag: t.strong, color: \"#5e81ac\" },\n        { tag: t.emphasis, color: \"#5e81ac\" },\n        { tag: t.heading, color: \"#5e81ac\" },\n        { tag: t.special(t.heading1), color: \"#5e81ac\" },\n        { tag: t.heading1, color: \"#5e81ac\" },\n        { tag: [t.heading2, t.heading3, t.heading4], color: \"#5e81ac\" },\n        { tag: [t.heading5, t.heading6], color: \"#5e81ac\" },\n        { tag: [t.atom, t.bool, t.special(t.variableName)], color: \"#d08770\" },\n        { tag: [t.processingInstruction, t.inserted], color: \"#8fbcbb\" },\n        { tag: [t.contentSeparator], color: \"#ebcb8b\" },\n        { tag: t.invalid, color: \"#434c5e\" },\n    ],\n};\n\n/**\n * GitHub Dark highlight palette, adapted from `@uiw/codemirror-theme-github`.\n * `defaultColor` is GitHub's editor foreground (`#c9d1d9`), used for any text the\n * parser tags don't cover. DOM-only style props (backgroundColor, textDecoration,\n * fontWeight, fontStyle) are dropped — we only color tokens on the canvas.\n */\nexport const GithubDarkStyle: CodeHighlightStyle = {\n    name: \"github-dark\",\n    defaultColor: \"#c9d1d9\",\n    rules: [\n        { tag: [t.standard(t.tagName), t.tagName], color: \"#7ee787\" },\n        { tag: [t.comment, t.bracket], color: \"#8b949e\" },\n        { tag: [t.className, t.propertyName], color: \"#d2a8ff\" },\n        { tag: [t.variableName, t.attributeName, t.number, t.operator], color: \"#79c0ff\" },\n        { tag: [t.keyword, t.typeName, t.typeOperator], color: \"#ff7b72\" },\n        { tag: [t.string, t.meta, t.regexp], color: \"#a5d6ff\" },\n        { tag: [t.name, t.quote], color: \"#7ee787\" },\n        { tag: [t.heading, t.strong], color: \"#d2a8ff\" },\n        { tag: [t.emphasis], color: \"#d2a8ff\" },\n        { tag: [t.deleted], color: \"#ffdcd7\" },\n        { tag: [t.atom, t.bool, t.special(t.variableName)], color: \"#ffab70\" },\n        { tag: t.invalid, color: \"#f97583\" },\n    ],\n};\n\n/**\n * GitHub Light highlight palette, adapted from `@uiw/codemirror-theme-github`.\n * `defaultColor` is GitHub's editor foreground (`#24292e`). See {@link GithubDarkStyle}\n * for the note on dropped DOM-only style props.\n */\nexport const GithubLightStyle: CodeHighlightStyle = {\n    name: \"github-light\",\n    defaultColor: \"#24292e\",\n    rules: [\n        { tag: [t.standard(t.tagName), t.tagName], color: \"#116329\" },\n        { tag: [t.comment, t.bracket], color: \"#6a737d\" },\n        { tag: [t.className, t.propertyName], color: \"#6f42c1\" },\n        { tag: [t.variableName, t.attributeName, t.number, t.operator], color: \"#005cc5\" },\n        { tag: [t.keyword, t.typeName, t.typeOperator], color: \"#d73a49\" },\n        { tag: [t.string, t.meta, t.regexp], color: \"#032f62\" },\n        { tag: [t.name, t.quote], color: \"#22863a\" },\n        { tag: [t.heading, t.strong], color: \"#24292e\" },\n        { tag: [t.emphasis], color: \"#24292e\" },\n        { tag: [t.deleted], color: \"#b31d28\" },\n        { tag: [t.atom, t.bool, t.special(t.variableName)], color: \"#e36209\" },\n        { tag: [t.url, t.escape, t.regexp, t.link], color: \"#032f62\" },\n        { tag: t.invalid, color: \"#cb2431\" },\n    ],\n};\n\n/**\n * VS Code Dark+ highlight palette, adapted from the `@uiw/codemirror-theme-vscode`\n * snippet. `defaultColor` is VS Code's editor foreground (`#9cdcfe`). DOM-only\n * style props are dropped; later rules win, matching {@link tagHighlighter}.\n */\nexport const VscodeDarkStyle: CodeHighlightStyle = {\n    name: \"vscode-dark\",\n    defaultColor: \"#9cdcfe\",\n    rules: [\n        {\n            tag: [\n                t.keyword, t.operatorKeyword, t.modifier, t.color,\n                t.constant(t.name), t.standard(t.name), t.standard(t.tagName),\n                t.special(t.brace), t.atom, t.bool, t.special(t.variableName),\n            ],\n            color: \"#569cd6\",\n        },\n        { tag: [t.controlKeyword, t.moduleKeyword], color: \"#c586c0\" },\n        {\n            tag: [\n                t.name, t.deleted, t.character, t.macroName, t.propertyName,\n                t.variableName, t.labelName, t.definition(t.name),\n            ],\n            color: \"#9cdcfe\",\n        },\n        { tag: t.heading, color: \"#9cdcfe\" },\n        { tag: [t.typeName, t.className, t.tagName, t.changed, t.annotation, t.self, t.namespace], color: \"#4ec9b0\" },\n        { tag: [t.function(t.variableName), t.function(t.propertyName)], color: \"#dcdcaa\" },\n        { tag: [t.number], color: \"#b5cea8\" },\n        { tag: [t.operator, t.punctuation, t.separator, t.url, t.escape], color: \"#d4d4d4\" },\n        { tag: [t.regexp], color: \"#d16969\" },\n        { tag: [t.special(t.string), t.processingInstruction, t.string, t.inserted], color: \"#ce9178\" },\n        { tag: [t.angleBracket], color: \"#808080\" },\n        { tag: [t.meta, t.comment], color: \"#6a9955\" },\n        { tag: t.link, color: \"#6a9955\" },\n        { tag: t.invalid, color: \"#ff0000\" },\n    ],\n};\n\n/**\n * VS Code Light+ highlight palette, adapted from the `@uiw/codemirror-theme-vscode`\n * snippet. `defaultColor` is VS Code's editor foreground (`#383a42`). See\n * {@link VscodeDarkStyle} for the note on dropped DOM-only style props.\n */\nexport const VscodeLightStyle: CodeHighlightStyle = {\n    name: \"vscode-light\",\n    defaultColor: \"#383a42\",\n    rules: [\n        {\n            tag: [\n                t.keyword, t.operatorKeyword, t.modifier, t.color,\n                t.constant(t.name), t.standard(t.name), t.standard(t.tagName),\n                t.special(t.brace), t.atom, t.bool, t.special(t.variableName),\n            ],\n            color: \"#0000ff\",\n        },\n        { tag: [t.moduleKeyword, t.controlKeyword], color: \"#af00db\" },\n        {\n            tag: [\n                t.name, t.deleted, t.character, t.macroName, t.propertyName,\n                t.variableName, t.labelName, t.definition(t.name),\n            ],\n            color: \"#0070c1\",\n        },\n        { tag: t.heading, color: \"#0070c1\" },\n        { tag: [t.typeName, t.className, t.tagName, t.changed, t.annotation, t.self, t.namespace], color: \"#267f99\" },\n        { tag: [t.function(t.variableName), t.function(t.propertyName)], color: \"#795e26\" },\n        { tag: [t.number], color: \"#098658\" },\n        { tag: [t.operator, t.punctuation, t.separator, t.url, t.escape], color: \"#383a42\" },\n        { tag: [t.regexp], color: \"#af00db\" },\n        { tag: [t.special(t.string), t.processingInstruction, t.string, t.inserted], color: \"#a31515\" },\n        { tag: [t.angleBracket], color: \"#383a42\" },\n        { tag: [t.meta, t.comment], color: \"#008000\" },\n        { tag: t.link, color: \"#4078f2\" },\n        { tag: t.invalid, color: \"#e45649\" },\n    ],\n};\n\n/**\n * The built-in themes, keyed by their string name. {@link CodeThemeName} is the\n * union of these keys — pass one of those strings (or any {@link CodeHighlightStyle}\n * object) to a Code node's `theme` prop.\n */\nexport const BUILTIN_THEMES = {\n    // Literal keys (not computed from `.name`) so `keyof` yields a string-literal\n    // union for CodeThemeName; these must stay in sync with each style's `name`.\n    \"motion-canvas-default\": DefaultHighlightStyle,\n    \"github-dark\": GithubDarkStyle,\n    \"github-light\": GithubLightStyle,\n    \"vscode-dark\": VscodeDarkStyle,\n    \"vscode-light\": VscodeLightStyle,\n} satisfies Record<string, CodeHighlightStyle>;\n\n/** Names of the built-in themes, e.g. `'github-dark' | 'github-light'`. */\nexport type CodeThemeName = keyof typeof BUILTIN_THEMES;\n\n/**\n * What a Code node's `theme` prop accepts: a built-in theme name (with\n * autocomplete), any other registered theme name, or a {@link CodeHighlightStyle}\n * object passed inline. The `string & {}` keeps the literal-name suggestions while\n * still allowing arbitrary registered names.\n */\nexport type CodeTheme = CodeThemeName | (string & {}) | CodeHighlightStyle;\n\n// Cache one compiled Highlighter per style name. Compiling builds a tag-rule\n// matcher; the parsed result is pure data so it's safe to share across Code nodes.\nconst compiledByName = new Map<string, Highlighter>();\n\n/**\n * Compile a {@link CodeHighlightStyle} into a `@lezer/highlight` {@link Highlighter}\n * whose \"class\" output is the literal color string for each tag. Cached by style\n * name so repeated lookups (every tokenize) don't rebuild the matcher.\n */\nexport function compileStyle(style: CodeHighlightStyle): Highlighter {\n    const cached = compiledByName.get(style.name);\n    if (cached) return cached;\n    const highlighter = tagHighlighter(\n        style.rules.map(rule => ({ tag: rule.tag, class: rule.color })),\n    );\n    compiledByName.set(style.name, highlighter);\n    return highlighter;\n}\n"]}

package/dist/tokens.d.ts

@@ -0,0 +1,24 @@
+import { CodeTheme } from "./style.js";
+export interface IdToken {
+    id: number;
+    content: string;
+    color?: string;
+}
+export interface IdLine {
+    id: number;
+    tokens: IdToken[];
+}
+export declare function makeIdToken(content: string, color?: string): IdToken;
+export declare function makeIdLine(tokens: IdToken[]): IdLine;
+export declare function tokenizeCodeToIdLines(code: string, language: string, theme: CodeTheme): IdLine[];
+/**
+ * Split `tokens` at character offset `col` (relative to the joined content of
+ * the tokens). If `col` falls inside a token, that token is split into two new
+ * tokens with fresh ids (the original id is discarded — it didn't exist as a
+ * single unit on either side of the cut).
+ */
+export declare function splitTokensAt(tokens: IdToken[], col: number): {
+    before: IdToken[];
+    after: IdToken[];
+};
+//# sourceMappingURL=tokens.d.ts.map

package/dist/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAMpC,MAAM,WAAW,OAAO;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAID,MAAM,WAAW,MAAM;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,OAAO,EAAE,CAAC;CACrB;AAQD,wBAAgB,WAAW,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAEpE;AAED,wBAAgB,UAAU,CAAC,MAAM,EAAE,OAAO,EAAE,GAAG,MAAM,CAEpD;AAED,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,GAAG,MAAM,EAAE,CAUhG;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CACzB,MAAM,EAAE,OAAO,EAAE,EACjB,GAAG,EAAE,MAAM,GACZ;IAAE,MAAM,EAAE,OAAO,EAAE,CAAC;IAAC,KAAK,EAAE,OAAO,EAAE,CAAA;CAAE,CAmBzC"}

package/dist/tokens.js

@@ -0,0 +1,50 @@
+import { canHighlight, highlightToTokens } from "./highlight.js";
+// Module-global, monotonic id counters shared across all Code nodes — ids only
+// need to be unique within a node, but a global counter is the simplest way to
+// guarantee that and never collides.
+let nextTokenId = 1;
+let nextLineId = 1;
+export function makeIdToken(content, color) {
+    return { id: nextTokenId++, content, color };
+}
+export function makeIdLine(tokens) {
+    return { id: nextLineId++, tokens };
+}
+export function tokenizeCodeToIdLines(code, language, theme) {
+    // Until the language parser has loaded (it streams in via the asset loader),
+    // fall back to flat, uncolored lines instead of throwing on an unloaded
+    // grammar. The node re-tokenizes once the load completes.
+    if (!canHighlight(language, theme)) {
+        return code.split('\n').map(line => makeIdLine([makeIdToken(line, '#d1d5db')]));
+    }
+    return highlightToTokens(code, language, theme).map(line => makeIdLine(line.map(tok => makeIdToken(tok.content, tok.color))));
+}
+/**
+ * Split `tokens` at character offset `col` (relative to the joined content of
+ * the tokens). If `col` falls inside a token, that token is split into two new
+ * tokens with fresh ids (the original id is discarded — it didn't exist as a
+ * single unit on either side of the cut).
+ */
+export function splitTokensAt(tokens, col) {
+    const before = [];
+    const after = [];
+    let off = 0;
+    for (const tok of tokens) {
+        const tStart = off;
+        const tEnd = off + tok.content.length;
+        if (tEnd <= col) {
+            before.push(tok);
+        }
+        else if (tStart >= col) {
+            after.push(tok);
+        }
+        else {
+            const cut = col - tStart;
+            before.push(makeIdToken(tok.content.slice(0, cut), tok.color));
+            after.push(makeIdToken(tok.content.slice(cut), tok.color));
+        }
+        off = tEnd;
+    }
+    return { before, after };
+}
+//# sourceMappingURL=tokens.js.map

package/dist/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAoB9D,+EAA+E;AAC/E,+EAA+E;AAC/E,qCAAqC;AACrC,IAAI,WAAW,GAAG,CAAC,CAAC;AACpB,IAAI,UAAU,GAAG,CAAC,CAAC;AAEnB,MAAM,UAAU,WAAW,CAAC,OAAe,EAAE,KAAc;IACvD,OAAO,EAAE,EAAE,EAAE,WAAW,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;AACjD,CAAC;AAED,MAAM,UAAU,UAAU,CAAC,MAAiB;IACxC,OAAO,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,MAAM,EAAE,CAAC;AACxC,CAAC;AAED,MAAM,UAAU,qBAAqB,CAAC,IAAY,EAAE,QAAgB,EAAE,KAAgB;IAClF,6EAA6E;IAC7E,wEAAwE;IACxE,0DAA0D;IAC1D,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC;QACjC,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;IACpF,CAAC;IACD,OAAO,iBAAiB,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CACvD,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,WAAW,CAAC,GAAG,CAAC,OAAO,EAAE,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CACnE,CAAC;AACN,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,aAAa,CACzB,MAAiB,EACjB,GAAW;IAEX,MAAM,MAAM,GAAc,EAAE,CAAC;IAC7B,MAAM,KAAK,GAAc,EAAE,CAAC;IAC5B,IAAI,GAAG,GAAG,CAAC,CAAC;IACZ,KAAK,MAAM,GAAG,IAAI,MAAM,EAAE,CAAC;QACvB,MAAM,MAAM,GAAG,GAAG,CAAC;QACnB,MAAM,IAAI,GAAG,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC,MAAM,CAAC;QACtC,IAAI,IAAI,IAAI,GAAG,EAAE,CAAC;YACd,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACrB,CAAC;aAAM,IAAI,MAAM,IAAI,GAAG,EAAE,CAAC;YACvB,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACpB,CAAC;aAAM,CAAC;YACJ,MAAM,GAAG,GAAG,GAAG,GAAG,MAAM,CAAC;YACzB,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC;YAC/D,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC;QAC/D,CAAC;QACD,GAAG,GAAG,IAAI,CAAC;IACf,CAAC;IACD,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC;AAC7B,CAAC","sourcesContent":["import { canHighlight, highlightToTokens } from \"./highlight\";\nimport { CodeTheme } from \"./style\";\n\n// IdToken is our internal wrapper around a highlighter token that gives every\n// token a stable identity across line insertions/removals. All animation state\n// is keyed by `id`, so concurrent edits at different positions don't clobber\n// each other while one is mid-animation.\nexport interface IdToken {\n    id: number;\n    content: string;\n    color?: string;\n}\n\n// IdLine wraps a row of tokens with its own stable id, so per-line animations\n// (heightScale during insert/remove) survive line insertions/removals.\nexport interface IdLine {\n    id: number;\n    tokens: IdToken[];\n}\n\n// Module-global, monotonic id counters shared across all Code nodes — ids only\n// need to be unique within a node, but a global counter is the simplest way to\n// guarantee that and never collides.\nlet nextTokenId = 1;\nlet nextLineId = 1;\n\nexport function makeIdToken(content: string, color?: string): IdToken {\n    return { id: nextTokenId++, content, color };\n}\n\nexport function makeIdLine(tokens: IdToken[]): IdLine {\n    return { id: nextLineId++, tokens };\n}\n\nexport function tokenizeCodeToIdLines(code: string, language: string, theme: CodeTheme): IdLine[] {\n    // Until the language parser has loaded (it streams in via the asset loader),\n    // fall back to flat, uncolored lines instead of throwing on an unloaded\n    // grammar. The node re-tokenizes once the load completes.\n    if (!canHighlight(language, theme)) {\n        return code.split('\\n').map(line => makeIdLine([makeIdToken(line, '#d1d5db')]));\n    }\n    return highlightToTokens(code, language, theme).map(line =>\n        makeIdLine(line.map(tok => makeIdToken(tok.content, tok.color))),\n    );\n}\n\n/**\n * Split `tokens` at character offset `col` (relative to the joined content of\n * the tokens). If `col` falls inside a token, that token is split into two new\n * tokens with fresh ids (the original id is discarded — it didn't exist as a\n * single unit on either side of the cut).\n */\nexport function splitTokensAt(\n    tokens: IdToken[],\n    col: number,\n): { before: IdToken[]; after: IdToken[] } {\n    const before: IdToken[] = [];\n    const after: IdToken[] = [];\n    let off = 0;\n    for (const tok of tokens) {\n        const tStart = off;\n        const tEnd = off + tok.content.length;\n        if (tEnd <= col) {\n            before.push(tok);\n        } else if (tStart >= col) {\n            after.push(tok);\n        } else {\n            const cut = col - tStart;\n            before.push(makeIdToken(tok.content.slice(0, cut), tok.color));\n            after.push(makeIdToken(tok.content.slice(cut), tok.color));\n        }\n        off = tEnd;\n    }\n    return { before, after };\n}\n"]}

package/dist/transitions.d.ts

@@ -0,0 +1,115 @@
+import type { CodeLayout } from "./layout.js";
+import { IdLine } from "./tokens.js";
+export interface AnimToken {
+    id: number;
+    opacity: number[];
+    opacityKeys: number[];
+}
+/**
+ * A highlight cross-fade: opacity, and nothing else.
+ *
+ * Structure is untouched, so several of these stack happily and a listing held
+ * under a highlight still hits the static-layout cache.
+ */
+export interface DimTransition {
+    kind: "dim";
+    tokens: AnimToken[];
+    progress: number;
+}
+/**
+ * When each part of a structural edit happens, in normalized transition time.
+ *
+ * The order is what an edit *looks like* being made: what is going away leaves
+ * first, what stays reflows into its new place, and only then does what is new
+ * appear. Running them together is what made a replacement look like a
+ * cross-dissolve of two unrelated listings.
+ */
+export interface Phases {
+    /** Removed tokens fade out. Null when the edit removes nothing. */
+    out: [number, number] | null;
+    /** Surviving tokens travel, and the block resizes. Always present. */
+    move: [number, number];
+    /** Added tokens fade (and slide) in. Null when the edit adds nothing. */
+    in: [number, number] | null;
+}
+/**
+ * One edit in flight: the structure before, the structure after, and who is
+ * doing what.
+ *
+ * Both endpoints are fixed for the transition's whole life, which is why the
+ * two resolved layouts hang off it — they are computed once and reused for
+ * every frame the edit spans, rather than rebuilt per frame from a structure
+ * that is being mutated underneath.
+ */
+export interface StructuralTransition {
+    kind: "structural";
+    from: IdLine[];
+    to: IdLine[];
+    removedIds: Set<number>;
+    addedIds: Set<number>;
+    /**
+     * Ids of rows in `to` that did not exist before, and so enter as a whole
+     * row rather than as tokens spliced into one.
+     *
+     * They enter by fading in place, and that is the *only* thing they do. An
+     * earlier version slid each one in from the edge the block had just grown
+     * along — appended rows rising from below, prepended ones descending, ones
+     * spliced into the middle arriving from the left. Every one of those is a
+     * claim about where the line came from, and a listing has no such story to
+     * tell: text is written where it belongs, it does not travel there. Sliding
+     * also puts the row under the neighbours it is meant to sit between for the
+     * length of its entrance, which reads as the listing redrawing itself.
+     */
+    enteringLineIds: Set<number>;
+    fromColorById: Map<number, string | undefined>;
+    phases: Phases;
+    progress: number;
+    /** @internal Layout cache — see {@link StructuralTransition}. */
+    layoutKey: string | null;
+    fromLayout: CodeLayout | null;
+    toLayout: CodeLayout | null;
+}
+export type CodeTransition = DimTransition | StructuralTransition;
+/**
+ * Decides *when* (in normalized transition time) each part of a structural
+ * edit happens, given only whether the edit removes/adds anything.
+ * `phasesFor` below is the default implementation (exported as
+ * `defaultCodePhases`) — pass a `phaseStrategy` of this shape to `<Code>` to
+ * replace it with your own timing.
+ */
+export type CodePhaseStrategy = (hasRemoved: boolean, hasAdded: boolean) => Phases;
+export interface TokenState {
+    opacity: number;
+}
+/** Sample a piecewise-linear curve (keys → values) at progress `p` in [0, 1]. */
+export declare function sampleCurve(keys: number[], values: number[], p: number): number;
+/** Progress *within* a phase window, clamped to [0, 1]. A null window is complete. */
+export declare function windowProgress(w: [number, number] | null, p: number): number;
+/** Smooth start and end, so a phase never begins or ends with a velocity step. */
+export declare function smoothstep(t: number): number;
+export declare function makeAnim(id: number, curve: {
+    keys: number[];
+    values: number[];
+}): AnimToken;
+/**
+ * The phase schedule for an edit, shaped by what the edit actually contains.
+ *
+ * A fixed schedule wastes time it does not need: a pure append has nothing to
+ * fade out, so holding the first 40% of the duration empty just makes the
+ * animation feel late. Each shape gets the whole duration spent on the parts
+ * that exist, with adjacent phases overlapping enough to read as one movement.
+ */
+export declare function phasesFor(hasRemoved: boolean, hasAdded: boolean): Phases;
+/** {@link phasesFor} under the name a `phaseStrategy` default is looked up by. */
+export declare const defaultCodePhases: CodePhaseStrategy;
+/** How far through the "everything reflows" phase a frame is, eased. A settled frame (no edit) is always fully moved. */
+export declare function moveProgress(edit: {
+    phases: Phases;
+    progress: number;
+} | null): number;
+/**
+ * Resolve the per-token opacity multiplier for the current frame from the
+ * persistent highlight dim plus every active dim transition.
+ */
+export declare function resolveTokenStates(tokenLines: IdLine[], transitions: CodeTransition[], highlightDimOpacity: number | null, highlightedIds: Set<number>): Map<number, TokenState>;
+//# sourceMappingURL=transitions.d.ts.map

package/dist/transitions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"transitions.d.ts","sourceRoot":"","sources":["../src/transitions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAKlC,MAAM,WAAW,SAAS;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,WAAW,EAAE,MAAM,EAAE,CAAC;CACzB;AAED;;;;;GAKG;AACH,MAAM,WAAW,aAAa;IAC1B,IAAI,EAAE,KAAK,CAAC;IACZ,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,MAAM;IACnB,mEAAmE;IACnE,GAAG,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC;IAC7B,sEAAsE;IACtE,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACvB,yEAAyE;IACzE,EAAE,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC;CAC/B;AAED;;;;;;;;GAQG;AACH,MAAM,WAAW,oBAAoB;IACjC,IAAI,EAAE,YAAY,CAAC;IACnB,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,EAAE,EAAE,MAAM,EAAE,CAAC;IACb,UAAU,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACxB,QAAQ,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACtB;;;;;;;;;;;;OAYG;IACH,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC7B,aAAa,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;IAC/C,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,iEAAiE;IACjE,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,UAAU,EAAE,UAAU,GAAG,IAAI,CAAC;IAC9B,QAAQ,EAAE,UAAU,GAAG,IAAI,CAAC;CAC/B;AAED,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG,oBAAoB,CAAC;AAElE;;;;;;GAMG;AACH,MAAM,MAAM,iBAAiB,GAAG,CAAC,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,KAAK,MAAM,CAAC;AAEnF,MAAM,WAAW,UAAU;IACvB,OAAO,EAAE,MAAM,CAAC;CACnB;AAED,iFAAiF;AACjF,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAW/E;AAED,sFAAsF;AACtF,wBAAgB,cAAc,CAAC,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAM5E;AAED,kFAAkF;AAClF,wBAAgB,UAAU,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAE5C;AAED,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE;IAAE,IAAI,EAAE,MAAM,EAAE,CAAC;IAAC,MAAM,EAAE,MAAM,EAAE,CAAA;CAAE,GAAG,SAAS,CAE3F;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,GAAG,MAAM,CAUxE;AAED,kFAAkF;AAClF,eAAO,MAAM,iBAAiB,EAAE,iBAA6B,CAAC;AAE9D,yHAAyH;AACzH,wBAAgB,YAAY,CAAC,IAAI,EAAE;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,GAAG,MAAM,CAEtF;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAC9B,UAAU,EAAE,MAAM,EAAE,EACpB,WAAW,EAAE,cAAc,EAAE,EAC7B,mBAAmB,EAAE,MAAM,GAAG,IAAI,EAClC,cAAc,EAAE,GAAG,CAAC,MAAM,CAAC,GAC5B,GAAG,CAAC,MAAM,EAAE,UAAU,CAAC,CAoBzB"}

package/dist/transitions.js

@@ -0,0 +1,85 @@
+/** Sample a piecewise-linear curve (keys → values) at progress `p` in [0, 1]. */
+export function sampleCurve(keys, values, p) {
+    if (p <= keys[0])
+        return values[0];
+    if (p >= keys[keys.length - 1])
+        return values[values.length - 1];
+    for (let i = 0; i < keys.length - 1; i++) {
+        if (p <= keys[i + 1]) {
+            const span = keys[i + 1] - keys[i];
+            const local = span === 0 ? 0 : (p - keys[i]) / span;
+            return values[i] + (values[i + 1] - values[i]) * local;
+        }
+    }
+    return values[values.length - 1];
+}
+/** Progress *within* a phase window, clamped to [0, 1]. A null window is complete. */
+export function windowProgress(w, p) {
+    if (!w)
+        return 1;
+    const [a, b] = w;
+    if (p <= a)
+        return 0;
+    if (p >= b)
+        return 1;
+    return b === a ? 1 : (p - a) / (b - a);
+}
+/** Smooth start and end, so a phase never begins or ends with a velocity step. */
+export function smoothstep(t) {
+    return t * t * (3 - 2 * t);
+}
+export function makeAnim(id, curve) {
+    return { id, opacity: curve.values, opacityKeys: curve.keys };
+}
+/**
+ * The phase schedule for an edit, shaped by what the edit actually contains.
+ *
+ * A fixed schedule wastes time it does not need: a pure append has nothing to
+ * fade out, so holding the first 40% of the duration empty just makes the
+ * animation feel late. Each shape gets the whole duration spent on the parts
+ * that exist, with adjacent phases overlapping enough to read as one movement.
+ */
+export function phasesFor(hasRemoved, hasAdded) {
+    // The overlaps are deliberate and small. Butt-joining the phases leaves the
+    // block sitting empty at its new size for a beat between the old content
+    // leaving and the new content arriving; letting the arrival start while the
+    // reflow's eased tail is still running closes that gap without blurring the
+    // order the edit reads in.
+    if (hasRemoved && hasAdded)
+        return { out: [0, 0.38], move: [0.10, 0.68], in: [0.52, 1] };
+    if (hasRemoved)
+        return { out: [0, 0.45], move: [0.22, 1], in: null };
+    if (hasAdded)
+        return { out: null, move: [0, 0.55], in: [0.38, 1] };
+    return { out: null, move: [0, 1], in: null };
+}
+/** {@link phasesFor} under the name a `phaseStrategy` default is looked up by. */
+export const defaultCodePhases = phasesFor;
+/** How far through the "everything reflows" phase a frame is, eased. A settled frame (no edit) is always fully moved. */
+export function moveProgress(edit) {
+    return edit ? smoothstep(windowProgress(edit.phases.move, edit.progress)) : 1;
+}
+/**
+ * Resolve the per-token opacity multiplier for the current frame from the
+ * persistent highlight dim plus every active dim transition.
+ */
+export function resolveTokenStates(tokenLines, transitions, highlightDimOpacity, highlightedIds) {
+    const out = new Map();
+    if (highlightDimOpacity !== null) {
+        const dim = highlightDimOpacity;
+        for (const line of tokenLines) {
+            for (const tok of line.tokens) {
+                out.set(tok.id, { opacity: highlightedIds.has(tok.id) ? 1 : dim });
+            }
+        }
+    }
+    for (const tr of transitions) {
+        if (tr.kind !== "dim")
+            continue;
+        for (const at of tr.tokens) {
+            out.set(at.id, { opacity: sampleCurve(at.opacityKeys, at.opacity, tr.progress) });
+        }
+    }
+    return out;
+}
+//# sourceMappingURL=transitions.js.map

package/dist/transitions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"transitions.js","sourceRoot":"","sources":["../src/transitions.ts"],"names":[],"mappings":"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","sourcesContent":["import type { CodeLayout } from \"./layout\";\nimport { IdLine } from \"./tokens\";\n\n// A single animated token entry owned by one dim transition. Keyed by stable\n// token id rather than (line, tokenIndex) so concurrent animations don't clobber\n// each other when one shifts the indices of tokens the other is animating.\nexport interface AnimToken {\n    id: number;\n    opacity: number[];\n    opacityKeys: number[];\n}\n\n/**\n * A highlight cross-fade: opacity, and nothing else.\n *\n * Structure is untouched, so several of these stack happily and a listing held\n * under a highlight still hits the static-layout cache.\n */\nexport interface DimTransition {\n    kind: \"dim\";\n    tokens: AnimToken[];\n    progress: number;\n}\n\n/**\n * When each part of a structural edit happens, in normalized transition time.\n *\n * The order is what an edit *looks like* being made: what is going away leaves\n * first, what stays reflows into its new place, and only then does what is new\n * appear. Running them together is what made a replacement look like a\n * cross-dissolve of two unrelated listings.\n */\nexport interface Phases {\n    /** Removed tokens fade out. Null when the edit removes nothing. */\n    out: [number, number] | null;\n    /** Surviving tokens travel, and the block resizes. Always present. */\n    move: [number, number];\n    /** Added tokens fade (and slide) in. Null when the edit adds nothing. */\n    in: [number, number] | null;\n}\n\n/**\n * One edit in flight: the structure before, the structure after, and who is\n * doing what.\n *\n * Both endpoints are fixed for the transition's whole life, which is why the\n * two resolved layouts hang off it — they are computed once and reused for\n * every frame the edit spans, rather than rebuilt per frame from a structure\n * that is being mutated underneath.\n */\nexport interface StructuralTransition {\n    kind: \"structural\";\n    from: IdLine[];\n    to: IdLine[];\n    removedIds: Set<number>;\n    addedIds: Set<number>;\n    /**\n     * Ids of rows in `to` that did not exist before, and so enter as a whole\n     * row rather than as tokens spliced into one.\n     *\n     * They enter by fading in place, and that is the *only* thing they do. An\n     * earlier version slid each one in from the edge the block had just grown\n     * along — appended rows rising from below, prepended ones descending, ones\n     * spliced into the middle arriving from the left. Every one of those is a\n     * claim about where the line came from, and a listing has no such story to\n     * tell: text is written where it belongs, it does not travel there. Sliding\n     * also puts the row under the neighbours it is meant to sit between for the\n     * length of its entrance, which reads as the listing redrawing itself.\n     */\n    enteringLineIds: Set<number>;\n    fromColorById: Map<number, string | undefined>;\n    phases: Phases;\n    progress: number;\n    /** @internal Layout cache — see {@link StructuralTransition}. */\n    layoutKey: string | null;\n    fromLayout: CodeLayout | null;\n    toLayout: CodeLayout | null;\n}\n\nexport type CodeTransition = DimTransition | StructuralTransition;\n\n/**\n * Decides *when* (in normalized transition time) each part of a structural\n * edit happens, given only whether the edit removes/adds anything.\n * `phasesFor` below is the default implementation (exported as\n * `defaultCodePhases`) — pass a `phaseStrategy` of this shape to `<Code>` to\n * replace it with your own timing.\n */\nexport type CodePhaseStrategy = (hasRemoved: boolean, hasAdded: boolean) => Phases;\n\nexport interface TokenState {\n    opacity: number;\n}\n\n/** Sample a piecewise-linear curve (keys → values) at progress `p` in [0, 1]. */\nexport function sampleCurve(keys: number[], values: number[], p: number): number {\n    if (p <= keys[0]) return values[0];\n    if (p >= keys[keys.length - 1]) return values[values.length - 1];\n    for (let i = 0; i < keys.length - 1; i++) {\n        if (p <= keys[i + 1]) {\n            const span = keys[i + 1] - keys[i];\n            const local = span === 0 ? 0 : (p - keys[i]) / span;\n            return values[i] + (values[i + 1] - values[i]) * local;\n        }\n    }\n    return values[values.length - 1];\n}\n\n/** Progress *within* a phase window, clamped to [0, 1]. A null window is complete. */\nexport function windowProgress(w: [number, number] | null, p: number): number {\n    if (!w) return 1;\n    const [a, b] = w;\n    if (p <= a) return 0;\n    if (p >= b) return 1;\n    return b === a ? 1 : (p - a) / (b - a);\n}\n\n/** Smooth start and end, so a phase never begins or ends with a velocity step. */\nexport function smoothstep(t: number): number {\n    return t * t * (3 - 2 * t);\n}\n\nexport function makeAnim(id: number, curve: { keys: number[]; values: number[] }): AnimToken {\n    return { id, opacity: curve.values, opacityKeys: curve.keys };\n}\n\n/**\n * The phase schedule for an edit, shaped by what the edit actually contains.\n *\n * A fixed schedule wastes time it does not need: a pure append has nothing to\n * fade out, so holding the first 40% of the duration empty just makes the\n * animation feel late. Each shape gets the whole duration spent on the parts\n * that exist, with adjacent phases overlapping enough to read as one movement.\n */\nexport function phasesFor(hasRemoved: boolean, hasAdded: boolean): Phases {\n    // The overlaps are deliberate and small. Butt-joining the phases leaves the\n    // block sitting empty at its new size for a beat between the old content\n    // leaving and the new content arriving; letting the arrival start while the\n    // reflow's eased tail is still running closes that gap without blurring the\n    // order the edit reads in.\n    if (hasRemoved && hasAdded) return { out: [0, 0.38], move: [0.10, 0.68], in: [0.52, 1] };\n    if (hasRemoved) return { out: [0, 0.45], move: [0.22, 1], in: null };\n    if (hasAdded) return { out: null, move: [0, 0.55], in: [0.38, 1] };\n    return { out: null, move: [0, 1], in: null };\n}\n\n/** {@link phasesFor} under the name a `phaseStrategy` default is looked up by. */\nexport const defaultCodePhases: CodePhaseStrategy = phasesFor;\n\n/** How far through the \"everything reflows\" phase a frame is, eased. A settled frame (no edit) is always fully moved. */\nexport function moveProgress(edit: { phases: Phases; progress: number } | null): number {\n    return edit ? smoothstep(windowProgress(edit.phases.move, edit.progress)) : 1;\n}\n\n/**\n * Resolve the per-token opacity multiplier for the current frame from the\n * persistent highlight dim plus every active dim transition.\n */\nexport function resolveTokenStates(\n    tokenLines: IdLine[],\n    transitions: CodeTransition[],\n    highlightDimOpacity: number | null,\n    highlightedIds: Set<number>,\n): Map<number, TokenState> {\n    const out = new Map<number, TokenState>();\n\n    if (highlightDimOpacity !== null) {\n        const dim = highlightDimOpacity;\n        for (const line of tokenLines) {\n            for (const tok of line.tokens) {\n                out.set(tok.id, { opacity: highlightedIds.has(tok.id) ? 1 : dim });\n            }\n        }\n    }\n\n    for (const tr of transitions) {\n        if (tr.kind !== \"dim\") continue;\n        for (const at of tr.tokens) {\n            out.set(at.id, { opacity: sampleCurve(at.opacityKeys, at.opacity, tr.progress) });\n        }\n    }\n\n    return out;\n}\n"]}