@kissmybutton/mc-code 0.0.1

package/.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": "defaults, not ie 11",
+        "corejs": "3.21"
+      }
+    ]
+  ],
+  "plugins": [
+    "@babel/plugin-syntax-import-assertions"
+  ]
+}

package/.eslintignore

@@ -0,0 +1,2 @@
+bundle.js
+dist

package/.eslintrc

@@ -0,0 +1,69 @@
+{
+  "parser": "@babel/eslint-parser",
+  "parserOptions": {
+    "babelOptions": {
+      "presets": ["@babel/preset-react"]
+    }
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "prettier"
+  ],
+  "plugins": [
+    "babel",
+    "prettier",
+    "react"
+  ],
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "globals": {
+    "document": false,
+    "escape": false,
+    "navigator": false,
+    "unescape": false,
+    "window": false,
+    "describe": true,
+    "before": true,
+    "it": true,
+    "expect": true,
+    "sinon": true
+  },
+  "rules": {
+    "prettier/prettier": [
+      "error"
+    ],
+    "linebreak-style": [
+      "error",
+      "unix"
+    ],
+    "semi": [
+      "error",
+      "always"
+    ],
+    "no-console": [
+      "error",
+      {
+        "allow": [
+          "warn",
+          "error",
+          "info"
+        ]
+      }
+    ],
+    "prefer-promise-reject-errors": "error",
+    "prefer-const": [
+      "error",
+      {
+        "destructuring": "any",
+        "ignoreReadBeforeAssign": false
+      }
+    ],
+    "no-var": "error",
+    "no-unused-vars": "error",
+    "react/react-in-jsx-scope": "off",
+    "react/jsx-uses-react": "off"
+  }
+}

package/README.md

@@ -0,0 +1,121 @@
+# @kissmybutton/mc-code
+
+MotorCortex plugin for displaying syntax-highlighted code with line-level animation.
+
+## Installation
+
+```bash
+npm install @kissmybutton/mc-code
+```
+
+Peer dependency: `@donkeyclip/motorcortex >= 9.24.0`
+
+## Supported languages
+
+JavaScript, TypeScript, Python, Bash, JSON, YAML, HTML, CSS. Each with language-specific keyword coloring, comment styles, and structural highlighting.
+
+## Quick start
+
+```js
+import { HTMLClip, loadPlugin } from "@donkeyclip/motorcortex";
+import Player from "@donkeyclip/motorcortex-player";
+import codeDef from "@kissmybutton/mc-code";
+
+const McCode = loadPlugin(codeDef);
+
+const clip = new HTMLClip({
+  html: '<div id="scene" style="width:100%;height:100%;"></div>',
+  host: document.getElementById("clip"),
+  containerParams: { width: "900px", height: "600px" },
+});
+
+const codeClip = new McCode.Clip(
+  {
+    code: 'function hello() {\n  return "world";\n}',
+    language: "javascript",
+    theme: "dark",
+    fontSize: 15,
+  },
+  {
+    selector: "#scene",
+    containerParams: { width: "900px", height: "600px" },
+  },
+);
+
+// Progressive write-in
+codeClip.addIncident(
+  new McCode.WriteCode(
+    { animatedAttrs: { writeCode: 1 } },
+    { selector: "!#code", duration: 2000 },
+  ),
+  500,
+);
+
+// Highlight line 1
+codeClip.addIncident(
+  new McCode.CodeHighlight(
+    { animatedAttrs: { highlightLine_1: 1 }, color: "rgba(99,102,241,0.35)" },
+    { selector: "!#code", duration: 800 },
+  ),
+  3000,
+);
+
+clip.addIncident(codeClip, 0);
+new Player({ clip });
+```
+
+## Clip attrs
+
+| Attr       | Type   | Default        | Description                          |
+| ---------- | ------ | -------------- | ------------------------------------ |
+| `code`     | string | `""`           | The source code to display           |
+| `language` | string | `"javascript"` | Language for syntax coloring         |
+| `theme`    | string | `"dark"`       | Color theme: `"dark"` or `"light"`  |
+| `fontSize` | number | `14`           | Font size in pixels                  |
+
+## Incidents
+
+### WriteCode (Effect)
+
+Progressively reveals code lines with a typewriter-style animation.
+
+```js
+new McCode.WriteCode(
+  { animatedAttrs: { writeCode: 1 } },  // 0 = hidden, 1 = fully visible
+  { selector: "!#code", duration: 3000 },
+);
+```
+
+### CodeHighlight (Effect)
+
+Pulses a line's background color with a double-pump effect. Each line needs a unique attr key `highlightLine_N` where N is the 0-based line index.
+
+```js
+// Highlight line 5 (green)
+new McCode.CodeHighlight(
+  { animatedAttrs: { highlightLine_5: 1 }, color: "rgba(46,160,67,0.3)" },
+  { selector: "!#code", duration: 800 },
+);
+
+// Multiple lines don't conflict because each has a unique key
+new McCode.CodeHighlight(
+  { animatedAttrs: { highlightLine_8: 1 }, color: "rgba(231,111,81,0.3)" },
+  { selector: "!#code", duration: 800 },
+);
+```
+
+## Line IDs
+
+Each line in the rendered code gets an id: `line_0`, `line_1`, `line_2`, etc. (0-based).
+
+## Themes
+
+### Dark (default)
+Dark background (#1e1e2e) with Catppuccin-inspired token colors.
+
+### Light
+Light background (#fafafa) with One Light-inspired token colors.
+
+## License
+
+MIT

package/dist/bundle.cjs.js

@@ -0,0 +1,365 @@
+'use strict';
+
+var motorcortex = require('@donkeyclip/motorcortex');
+
+/**
+ * CodeClip — a BrowserClip that renders syntax-highlighted code.
+ *
+ * Each line gets id: line_0, line_1, ... for targeting.
+ * Registers custom entity "code" for Effects via !#code.
+ *
+ * Attrs:
+ *   code: string — the source code to display
+ *   language: string (default: "javascript")
+ *   theme: "dark" | "light" (default: "dark")
+ *   fontSize: number (default: 14)
+ */
+
+const THEMES = {
+  dark: {
+    bg: "#1e1e2e",
+    fg: "#cdd6f4",
+    lineNum: "#585b70",
+    keyword: "#cba6f7",
+    string: "#a6e3a1",
+    comment: "#6c7086",
+    fn: "#89b4fa",
+    number: "#fab387",
+    punct: "#94e2d5",
+    type: "#f9e2af"
+  },
+  light: {
+    bg: "#fafafa",
+    fg: "#383a42",
+    lineNum: "#9ca0b0",
+    keyword: "#a626a4",
+    string: "#50a14f",
+    comment: "#a0a1a7",
+    fn: "#4078f2",
+    number: "#986801",
+    punct: "#0184bc",
+    type: "#c18401"
+  }
+};
+const LANG_KEYWORDS = {
+  javascript: new Set(["const", "let", "var", "function", "return", "if", "else", "for", "while", "do", "switch", "case", "break", "continue", "new", "this", "class", "extends", "import", "export", "default", "from", "of", "in", "typeof", "instanceof", "try", "catch", "finally", "throw", "async", "await", "yield", "null", "undefined", "true", "false"]),
+  typescript: new Set(["const", "let", "var", "function", "return", "if", "else", "for", "while", "do", "switch", "case", "break", "continue", "new", "this", "class", "extends", "import", "export", "default", "from", "of", "in", "typeof", "instanceof", "try", "catch", "finally", "throw", "async", "await", "yield", "null", "undefined", "true", "false", "type", "interface", "enum", "implements", "declare", "readonly", "as", "is", "keyof", "never", "unknown", "any", "void", "abstract", "override", "satisfies", "infer"]),
+  python: new Set(["def", "return", "if", "elif", "else", "for", "while", "in", "not", "and", "or", "is", "class", "import", "from", "as", "with", "try", "except", "finally", "raise", "pass", "break", "continue", "yield", "lambda", "None", "True", "False", "self", "print", "range", "len", "dict", "list", "set", "tuple", "int", "str", "float", "bool", "async", "await"]),
+  bash: new Set(["if", "then", "else", "elif", "fi", "for", "do", "done", "while", "until", "case", "esac", "function", "return", "in", "echo", "exit", "export", "source", "local", "readonly", "declare", "set", "unset", "shift", "cd", "pwd", "ls", "grep", "sed", "awk", "cat", "mkdir", "rm", "cp", "mv", "chmod", "chown", "sudo", "apt", "yum", "npm", "pip", "git", "docker", "kubectl"]),
+  html: new Set(["div", "span", "p", "a", "img", "ul", "ol", "li", "h1", "h2", "h3", "h4", "h5", "h6", "table", "tr", "td", "th", "form", "input", "button", "select", "option", "textarea", "label", "header", "footer", "nav", "main", "section", "article", "aside", "script", "style", "link", "meta", "head", "body", "html"]),
+  css: new Set(["color", "background", "border", "margin", "padding", "display", "position", "width", "height", "font", "text", "flex", "grid", "align", "justify", "overflow", "opacity", "transform", "transition", "animation", "z-index", "top", "left", "right", "bottom", "none", "auto", "inherit", "initial", "important"])
+};
+
+// JSON/YAML don't have keywords in the traditional sense — handled by tokenizer rules
+const COMMENT_STYLES = {
+  javascript: "//",
+  typescript: "//",
+  python: "#",
+  bash: "#",
+  yaml: "#",
+  css: null,
+  json: null,
+  html: null
+};
+function escapeHtml(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function tokenizeLine(line, theme, language) {
+  const t = theme;
+  const keywords = LANG_KEYWORDS[language] || LANG_KEYWORDS.javascript;
+  const commentChar = COMMENT_STYLES[language] ?? "//";
+  let result = "";
+  let i = 0;
+
+  // YAML/JSON: color keys specially
+  if (language === "yaml") {
+    // YAML line: "key: value" or "- item"
+    const yamlKeyMatch = line.match(/^(\s*)([\w.\-/]+)(\s*:\s*)(.*)/);
+    if (yamlKeyMatch) {
+      const [, indent, key, colon, value] = yamlKeyMatch;
+      result += escapeHtml(indent);
+      result += `<span style="color:${t.fn}">${escapeHtml(key)}</span>`;
+      result += `<span style="color:${t.punct}">${escapeHtml(colon)}</span>`;
+      // Value coloring
+      if (/^(true|false|null|~)$/i.test(value.trim())) {
+        result += `<span style="color:${t.keyword};font-weight:600">${escapeHtml(value)}</span>`;
+      } else if (/^\d+(\.\d+)?$/.test(value.trim())) {
+        result += `<span style="color:${t.number}">${escapeHtml(value)}</span>`;
+      } else if (/^["']/.test(value.trim())) {
+        result += `<span style="color:${t.string}">${escapeHtml(value)}</span>`;
+      } else {
+        result += `<span style="color:${t.fg}">${escapeHtml(value)}</span>`;
+      }
+      return result || " ";
+    }
+    const yamlDash = line.match(/^(\s*)(- )(.*)/);
+    if (yamlDash) {
+      result += escapeHtml(yamlDash[1]);
+      result += `<span style="color:${t.punct}">${escapeHtml(yamlDash[2])}</span>`;
+      result += `<span style="color:${t.fg}">${escapeHtml(yamlDash[3])}</span>`;
+      return result || " ";
+    }
+  }
+  if (language === "json") {
+    // JSON: color keys in quotes before colon
+    const jsonKeyMatch = line.match(/^(\s*)("(?:[^"\\]|\\.)*")(\s*:\s*)(.*)/);
+    if (jsonKeyMatch) {
+      const [, indent, key, colon, value] = jsonKeyMatch;
+      result += escapeHtml(indent);
+      result += `<span style="color:${t.fn}">${escapeHtml(key)}</span>`;
+      result += `<span style="color:${t.punct}">${escapeHtml(colon)}</span>`;
+      if (/^(true|false|null)/.test(value.trim())) {
+        result += `<span style="color:${t.keyword};font-weight:600">${escapeHtml(value)}</span>`;
+      } else if (/^\d/.test(value.trim())) {
+        result += `<span style="color:${t.number}">${escapeHtml(value)}</span>`;
+      } else if (/^"/.test(value.trim())) {
+        result += `<span style="color:${t.string}">${escapeHtml(value)}</span>`;
+      } else {
+        result += `<span style="color:${t.fg}">${escapeHtml(value)}</span>`;
+      }
+      return result || " ";
+    }
+  }
+  while (i < line.length) {
+    // Comments: // or # to end of line
+    if (commentChar && line.startsWith(commentChar, i) && (i === 0 || /\s/.test(line[i - 1]) || i === 0)) {
+      result += `<span style="color:${t.comment};font-style:italic">${escapeHtml(line.slice(i))}</span>`;
+      break;
+    }
+
+    // Strings: single or double quoted
+    if (line[i] === '"' || line[i] === "'" || line[i] === "`") {
+      const q = line[i];
+      let j = i + 1;
+      while (j < line.length && line[j] !== q) {
+        if (line[j] === "\\") j++;
+        j++;
+      }
+      j = Math.min(j + 1, line.length);
+      result += `<span style="color:${t.string}">${escapeHtml(line.slice(i, j))}</span>`;
+      i = j;
+      continue;
+    }
+
+    // Numbers
+    if (/\d/.test(line[i]) && (i === 0 || /[\s,;(=+\-*/<>!&|]/.test(line[i - 1]))) {
+      let j = i;
+      while (j < line.length && /[\d.]/.test(line[j])) j++;
+      result += `<span style="color:${t.number}">${escapeHtml(line.slice(i, j))}</span>`;
+      i = j;
+      continue;
+    }
+
+    // Words (keywords, identifiers)
+    if (/[a-zA-Z_$]/.test(line[i])) {
+      let j = i;
+      while (j < line.length && /[a-zA-Z0-9_$]/.test(line[j])) j++;
+      const word = line.slice(i, j);
+      if (keywords.has(word)) {
+        result += `<span style="color:${t.keyword};font-weight:600">${escapeHtml(word)}</span>`;
+      } else if (j < line.length && line[j] === "(") {
+        result += `<span style="color:${t.fn}">${escapeHtml(word)}</span>`;
+      } else {
+        result += `<span style="color:${t.fg}">${escapeHtml(word)}</span>`;
+      }
+      i = j;
+      continue;
+    }
+
+    // Punctuation / operators
+    if (/[{}()\[\];:.,=+\-*/<>!&|?%^~@]/.test(line[i])) {
+      result += `<span style="color:${t.punct}">${escapeHtml(line[i])}</span>`;
+      i++;
+      continue;
+    }
+
+    // Whitespace and anything else
+    result += escapeHtml(line[i]);
+    i++;
+  }
+  return result || " ";
+}
+function renderLines(code, theme, language) {
+  const lines = code.split("\n");
+  return lines.map((line, i) => `<div class="shiki-line" id="line_${i}"><span class="line-num">${i + 1}</span><span class="line-code">${tokenizeLine(line, theme, language)}</span></div>`).join("");
+}
+class CodeClip extends motorcortex.BrowserClip {
+  get html() {
+    const code = this.attrs.code || "";
+    const language = this.attrs.language || "javascript";
+    const t = THEMES[this.attrs.theme] || THEMES.dark;
+    const linesHtml = renderLines(code, t, language);
+    return `<div id="code-container"><pre><code>${linesHtml}</code></pre></div>`;
+  }
+  get css() {
+    const fs = this.attrs.fontSize || 14;
+    const t = THEMES[this.attrs.theme] || THEMES.dark;
+    return `
+      #code-container {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 24px;
+        box-sizing: border-box;
+        background: ${t.bg};
+      }
+
+      pre {
+        margin: 0;
+        padding: 20px 24px;
+        border-radius: 10px;
+        background: ${t.bg};
+        font-size: ${fs}px;
+        line-height: 1.7;
+        overflow-x: auto;
+        width: 100%;
+        max-height: 100%;
+        box-sizing: border-box;
+        font-family: "Fira Code", "Cascadia Code", "JetBrains Mono", "Consolas", monospace;
+      }
+
+      code {
+        color: ${t.fg};
+      }
+
+      .shiki-line {
+        display: flex;
+        padding: 1px 8px;
+        border-radius: 4px;
+        gap: 16px;
+      }
+
+      .line-num {
+        color: ${t.lineNum};
+        user-select: none;
+        min-width: 2em;
+        text-align: right;
+        flex-shrink: 0;
+      }
+
+      .line-code {
+        white-space: pre;
+      }
+    `;
+  }
+  onAfterRender() {
+    this.attrs.code || "";
+    const container = this.context.getElements("#code-container")[0];
+    const lines = container.querySelectorAll(".shiki-line");
+    this.setCustomEntity("code", {
+      container,
+      lines,
+      lineCount: lines.length
+    });
+  }
+}
+
+/**
+ * CodeHighlight — Effect that pulses a line's background color.
+ *
+ * Selector: !#code
+ * animatedAttrs: { highlightLine_N: 1 } — where N is the line index (0-based)
+ * The line index is parsed from the attr key.
+ *
+ * Attrs:
+ *   color: string (default: "rgba(99,102,241,0.25)") — highlight background
+ */
+class CodeHighlight extends motorcortex.Effect {
+  getScratchValue() {
+    return 0;
+  }
+  onGetContext() {
+    this._lines = this.element?.entity?.lines;
+    this._color = this.attrs.color || "rgba(99,102,241,0.25)";
+    // Parse line index from attributeKey: "highlightLine_4" → 4
+    const key = this.attributeKey || "";
+    this._lineIndex = parseInt(key.split("_").pop(), 10);
+  }
+  onProgress(millisecond) {
+    if (!this._lines || isNaN(this._lineIndex) || this._lineIndex < 0 || this._lineIndex >= this._lines.length) return;
+    const fraction = this.getFraction(millisecond);
+    const line = this._lines[this._lineIndex];
+
+    // Double pump: 0→0.25 up, 0.25→0.5 down, 0.5→0.75 up, 0.75→1 down
+    let intensity;
+    if (fraction < 0.25) {
+      intensity = fraction / 0.25;
+    } else if (fraction < 0.5) {
+      intensity = 1 - (fraction - 0.25) / 0.25;
+    } else if (fraction < 0.75) {
+      intensity = (fraction - 0.5) / 0.25;
+    } else {
+      intensity = 1 - (fraction - 0.75) / 0.25;
+    }
+    if (intensity > 0.01) {
+      const alpha = intensity * 0.35;
+      const baseRgb = this._color.match(/\d+/g);
+      if (baseRgb && baseRgb.length >= 3) {
+        line.style.backgroundColor = `rgba(${baseRgb[0]},${baseRgb[1]},${baseRgb[2]},${alpha})`;
+      }
+    } else {
+      line.style.backgroundColor = "";
+    }
+  }
+}
+
+/**
+ * WriteCode — Effect that progressively reveals code lines.
+ *
+ * Selector: !#code
+ * animatedAttrs: { writeCode: 1 } — fraction 0→1 reveals all lines
+ */
+class WriteCode extends motorcortex.Effect {
+  getScratchValue() {
+    return 0;
+  }
+  onGetContext() {
+    this._lines = this.element?.entity?.lines;
+    if (this._lines) {
+      // Hide all lines initially
+      for (const line of this._lines) {
+        line.style.opacity = "0";
+      }
+    }
+  }
+  onProgress(millisecond) {
+    if (!this._lines) return;
+    const fraction = this.getFraction(millisecond);
+    const initial = this.initialValue ?? 0;
+    const target = this.targetValue;
+    const current = initial + (target - initial) * fraction;
+    const total = this._lines.length;
+    const revealUpTo = current * total;
+    for (let i = 0; i < total; i++) {
+      if (i < Math.floor(revealUpTo)) {
+        this._lines[i].style.opacity = "1";
+      } else if (i < revealUpTo) {
+        this._lines[i].style.opacity = String(revealUpTo - i);
+      } else {
+        this._lines[i].style.opacity = "0";
+      }
+    }
+  }
+}
+
+var name = "@kissmybutton/mc-code";
+var version = "0.0.1";
+
+var index = {
+  npm_name: name,
+  version: version,
+  incidents: [{
+    exportable: CodeHighlight,
+    name: "CodeHighlight"
+  }, {
+    exportable: WriteCode,
+    name: "WriteCode"
+  }],
+  Clip: {
+    exportable: CodeClip
+  }
+};
+
+module.exports = index;