@kissmybutton/mc-code 0.0.1

package/src/Incidents/CodeClip.js

@@ -0,0 +1,237 @@
+import { BrowserClip } from "@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("");
+}
+
+export default class CodeClip extends 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() {
+    const code = 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,
+    });
+  }
+}

package/src/Incidents/CodeHighlight.js

@@ -0,0 +1,53 @@
+import { Effect } from "@donkeyclip/motorcortex";
+
+/**
+ * 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
+ */
+export default class CodeHighlight extends 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 = "";
+    }
+  }
+}

package/src/Incidents/WriteCode.js

@@ -0,0 +1,44 @@
+import { Effect } from "@donkeyclip/motorcortex";
+
+/**
+ * WriteCode — Effect that progressively reveals code lines.
+ *
+ * Selector: !#code
+ * animatedAttrs: { writeCode: 1 } — fraction 0→1 reveals all lines
+ */
+export default class WriteCode extends 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";
+      }
+    }
+  }
+}

package/src/index.js

@@ -0,0 +1,22 @@
+import CodeClip from "./Incidents/CodeClip";
+import CodeHighlight from "./Incidents/CodeHighlight";
+import WriteCode from "./Incidents/WriteCode";
+import { name, version } from "../package.json";
+
+export default {
+  npm_name: name,
+  version: version,
+  incidents: [
+    {
+      exportable: CodeHighlight,
+      name: "CodeHighlight",
+    },
+    {
+      exportable: WriteCode,
+      name: "WriteCode",
+    },
+  ],
+  Clip: {
+    exportable: CodeClip,
+  },
+};