@kissmybutton/mc-code 0.0.1

package/dist/bundle.esm.js

@@ -0,0 +1,363 @@
+import { BrowserClip, Effect } 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("");
+}
+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() {
+    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 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 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
+  }
+};
+
+export { index as default };

package/dist/bundle.umd.js

@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("@donkeyclip/motorcortex")):"function"==typeof define&&define.amd?define(["@donkeyclip/motorcortex"],t):(e="undefined"!=typeof globalThis?globalThis:e||self)["@kissmybutton/mc-code"]=t(e.MotorCortex)}(this,(function(e){"use strict";const t={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"}},n={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"])},s={javascript:"//",typescript:"//",python:"#",bash:"#",yaml:"#",css:null,json:null,html:null};function i(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function o(e,t,o){return e.split("\n").map(((e,a)=>`<div class="shiki-line" id="line_${a}"><span class="line-num">${a+1}</span><span class="line-code">${function(e,t,o){const a=t,l=n[o]||n.javascript,r=s[o]??"//";let c="",p=0;if("yaml"===o){const t=e.match(/^(\s*)([\w.\-/]+)(\s*:\s*)(.*)/);if(t){const[,e,n,s,o]=t;return c+=i(e),c+=`<span style="color:${a.fn}">${i(n)}</span>`,c+=`<span style="color:${a.punct}">${i(s)}</span>`,/^(true|false|null|~)$/i.test(o.trim())?c+=`<span style="color:${a.keyword};font-weight:600">${i(o)}</span>`:/^\d+(\.\d+)?$/.test(o.trim())?c+=`<span style="color:${a.number}">${i(o)}</span>`:/^["']/.test(o.trim())?c+=`<span style="color:${a.string}">${i(o)}</span>`:c+=`<span style="color:${a.fg}">${i(o)}</span>`,c||" "}const n=e.match(/^(\s*)(- )(.*)/);if(n)return c+=i(n[1]),c+=`<span style="color:${a.punct}">${i(n[2])}</span>`,c+=`<span style="color:${a.fg}">${i(n[3])}</span>`,c||" "}if("json"===o){const t=e.match(/^(\s*)("(?:[^"\\]|\\.)*")(\s*:\s*)(.*)/);if(t){const[,e,n,s,o]=t;return c+=i(e),c+=`<span style="color:${a.fn}">${i(n)}</span>`,c+=`<span style="color:${a.punct}">${i(s)}</span>`,/^(true|false|null)/.test(o.trim())?c+=`<span style="color:${a.keyword};font-weight:600">${i(o)}</span>`:/^\d/.test(o.trim())?c+=`<span style="color:${a.number}">${i(o)}</span>`:/^"/.test(o.trim())?c+=`<span style="color:${a.string}">${i(o)}</span>`:c+=`<span style="color:${a.fg}">${i(o)}</span>`,c||" "}}for(;p<e.length;){if(r&&e.startsWith(r,p)&&(0===p||/\s/.test(e[p-1])||0===p)){c+=`<span style="color:${a.comment};font-style:italic">${i(e.slice(p))}</span>`;break}if('"'!==e[p]&&"'"!==e[p]&&"`"!==e[p])if(!/\d/.test(e[p])||0!==p&&!/[\s,;(=+\-*/<>!&|]/.test(e[p-1]))if(/[a-zA-Z_$]/.test(e[p])){let t=p;for(;t<e.length&&/[a-zA-Z0-9_$]/.test(e[t]);)t++;const n=e.slice(p,t);l.has(n)?c+=`<span style="color:${a.keyword};font-weight:600">${i(n)}</span>`:t<e.length&&"("===e[t]?c+=`<span style="color:${a.fn}">${i(n)}</span>`:c+=`<span style="color:${a.fg}">${i(n)}</span>`,p=t}else/[{}()\[\];:.,=+\-*/<>!&|?%^~@]/.test(e[p])?(c+=`<span style="color:${a.punct}">${i(e[p])}</span>`,p++):(c+=i(e[p]),p++);else{let t=p;for(;t<e.length&&/[\d.]/.test(e[t]);)t++;c+=`<span style="color:${a.number}">${i(e.slice(p,t))}</span>`,p=t}else{const t=e[p];let n=p+1;for(;n<e.length&&e[n]!==t;)"\\"===e[n]&&n++,n++;n=Math.min(n+1,e.length),c+=`<span style="color:${a.string}">${i(e.slice(p,n))}</span>`,p=n}}return c||" "}(e,t,o)}</span></div>`)).join("")}class a extends e.BrowserClip{get html(){const e=this.attrs.code||"",n=this.attrs.language||"javascript";return`<div id="code-container"><pre><code>${o(e,t[this.attrs.theme]||t.dark,n)}</code></pre></div>`}get css(){const e=this.attrs.fontSize||14,n=t[this.attrs.theme]||t.dark;return`\n      #code-container {\n        width: 100%;\n        height: 100%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding: 24px;\n        box-sizing: border-box;\n        background: ${n.bg};\n      }\n\n      pre {\n        margin: 0;\n        padding: 20px 24px;\n        border-radius: 10px;\n        background: ${n.bg};\n        font-size: ${e}px;\n        line-height: 1.7;\n        overflow-x: auto;\n        width: 100%;\n        max-height: 100%;\n        box-sizing: border-box;\n        font-family: "Fira Code", "Cascadia Code", "JetBrains Mono", "Consolas", monospace;\n      }\n\n      code {\n        color: ${n.fg};\n      }\n\n      .shiki-line {\n        display: flex;\n        padding: 1px 8px;\n        border-radius: 4px;\n        gap: 16px;\n      }\n\n      .line-num {\n        color: ${n.lineNum};\n        user-select: none;\n        min-width: 2em;\n        text-align: right;\n        flex-shrink: 0;\n      }\n\n      .line-code {\n        white-space: pre;\n      }\n    `}onAfterRender(){this.attrs.code;const e=this.context.getElements("#code-container")[0],t=e.querySelectorAll(".shiki-line");this.setCustomEntity("code",{container:e,lines:t,lineCount:t.length})}}class l extends e.Effect{getScratchValue(){return 0}onGetContext(){this._lines=this.element?.entity?.lines,this._color=this.attrs.color||"rgba(99,102,241,0.25)";const e=this.attributeKey||"";this._lineIndex=parseInt(e.split("_").pop(),10)}onProgress(e){if(!this._lines||isNaN(this._lineIndex)||this._lineIndex<0||this._lineIndex>=this._lines.length)return;const t=this.getFraction(e),n=this._lines[this._lineIndex];let s;if(s=t<.25?t/.25:t<.5?1-(t-.25)/.25:t<.75?(t-.5)/.25:1-(t-.75)/.25,s>.01){const e=.35*s,t=this._color.match(/\d+/g);t&&t.length>=3&&(n.style.backgroundColor=`rgba(${t[0]},${t[1]},${t[2]},${e})`)}else n.style.backgroundColor=""}}class r extends e.Effect{getScratchValue(){return 0}onGetContext(){if(this._lines=this.element?.entity?.lines,this._lines)for(const e of this._lines)e.style.opacity="0"}onProgress(e){if(!this._lines)return;const t=this.getFraction(e),n=this.initialValue??0,s=n+(this.targetValue-n)*t,i=this._lines.length,o=s*i;for(let e=0;e<i;e++)e<Math.floor(o)?this._lines[e].style.opacity="1":this._lines[e].style.opacity=e<o?String(o-e):"0"}}return{npm_name:"@kissmybutton/mc-code",version:"0.0.1",incidents:[{exportable:l,name:"CodeHighlight"},{exportable:r,name:"WriteCode"}],Clip:{exportable:a}}}));

package/package.json

@@ -0,0 +1,87 @@
+{
+  "name": "@kissmybutton/mc-code",
+  "version": "0.0.1",
+  "description": "MotorCortex code display plugin — Shiki syntax highlighting with line-level animation",
+  "main": "dist/bundle.cjs.js",
+  "module": "dist/bundle.esm.js",
+  "browser": "dist/bundle.umd.js",
+  "type": "module",
+  "author": "Donkeyclip",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/kissmybutton/mc-code.git"
+  },
+  "license": "MIT",
+  "engines": {
+    "node": ">=16"
+  },
+  "scripts": {
+    "lint": "eslint -c .eslintrc src/**/*.js",
+    "lint:fix": "npm run lint -- --fix",
+    "build": "npm run build:lib && npm run build:demo",
+    "build:lib": "rollup -c",
+    "start": "npm run build:lib && concurrently -c \"cyan.bold,magenta.bold\" \"npm:build:lib -- -w\"  \"npm:start:demo\" ",
+    "start:demo": "webpack serve --mode=development --config ./demo/webpack.config.cjs",
+    "build:demo": "webpack --mode=production --config ./demo/webpack.config.cjs",
+    "test": "echo \"No tests yet\"",
+    "test:prod": "npm run lint",
+    "prepare": "husky install"
+  },
+  "keywords": [
+    "motorcortex",
+    "code",
+    "shiki",
+    "syntax-highlighting"
+  ],
+  "lint-staged": {
+    "*.{json,md,yml,yaml,css}": [
+      "prettier --write"
+    ],
+    "*.{js,jsx}": [
+      "prettier --write",
+      "eslint --fix"
+    ]
+  },
+  "peerDependencies": {
+    "@donkeyclip/motorcortex": ">=9.24.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.23.4",
+    "@babel/core": "^7.23.3",
+    "@babel/eslint-parser": "^7.23.3",
+    "@babel/plugin-syntax-import-assertions": "^7.23.3",
+    "@babel/plugin-syntax-jsx": "^7.23.3",
+    "@babel/plugin-transform-react-jsx": "^7.22.15",
+    "@babel/preset-env": "^7.23.3",
+    "@babel/preset-react": "^7.23.3",
+    "@donkeyclip/motorcortex": "^9.24.0",
+    "@donkeyclip/motorcortex-player": "^2.15.18",
+    "@rollup/plugin-babel": "6.0.4",
+    "@rollup/plugin-commonjs": "25.0.8",
+    "@rollup/plugin-json": "6.1.0",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "babel-loader": "9.2.1",
+    "concurrently": "^9.0.0",
+    "core-js": "^3.33.3",
+    "css-loader": "6.11.0",
+    "eslint": "^8.54.0",
+    "eslint-config-prettier": "9.1.0",
+    "eslint-plugin-babel": "5.3.1",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-node": "11.1.0",
+    "eslint-plugin-prettier": "5.2.1",
+    "eslint-plugin-promise": "6.6.0",
+    "eslint-plugin-react": "^7.33.2",
+    "husky": "8.0.3",
+    "prettier": "3.4.2",
+    "rimraf": "5.0.10",
+    "rollup": "4.28.1",
+    "webpack": "^5.89.0",
+    "webpack-cli": "5.1.4",
+    "webpack-dev-server": "4.15.2"
+  },
+  "dependencies": {
+    "@rollup/plugin-terser": "^0.4.4",
+    "shiki": "^3.0.0"
+  }
+}

package/renovate.json

@@ -0,0 +1,10 @@
+{
+  "extends": [
+    "config:base",
+    ":separateMajorReleases",
+    ":automergeMinor",
+    ":disablePeerDependencies",
+    ":semanticCommits",
+    ":automergeBranch"
+  ]
+}

package/rollup.config.js

@@ -0,0 +1,67 @@
+import babel from "@rollup/plugin-babel";
+import commonjs from "@rollup/plugin-commonjs";
+import json from "@rollup/plugin-json";
+import resolve from "@rollup/plugin-node-resolve";
+import terser from "@rollup/plugin-terser";
+import pkg from "./package.json" with { type: "json" };
+
+export default [
+  {
+    input: "src/index.js",
+    external: ["@donkeyclip/motorcortex"],
+    output: [
+      { file: pkg.main, format: "cjs", inlineDynamicImports: true },
+      { file: pkg.module, format: "es", inlineDynamicImports: true },
+    ],
+    plugins: [
+      resolve(),
+      babel({
+        plugins: [
+          "@babel/plugin-syntax-jsx",
+          [
+            "@babel/plugin-transform-react-jsx",
+            {
+              pragma: "JSX",
+            },
+          ],
+        ],
+        extensions: [".js", ".jsx"],
+      }),
+      commonjs(),
+      json(),
+    ],
+  },
+  {
+    input: "src/index.js",
+    external: ["@donkeyclip/motorcortex"],
+    output: [
+      {
+        globals: {
+          "@donkeyclip/motorcortex": "MotorCortex",
+        },
+        name: pkg.name,
+        file: pkg.browser,
+        format: "umd",
+        inlineDynamicImports: true,
+      },
+    ],
+    plugins: [
+      json(),
+      resolve({ mainFields: ["module", "main", "browser"] }),
+      babel({
+        plugins: [
+          "@babel/plugin-syntax-jsx",
+          [
+            "@babel/plugin-transform-react-jsx",
+            {
+              pragma: "JSX",
+            },
+          ],
+        ],
+        extensions: [".js", ".jsx"],
+      }),
+      commonjs(),
+      terser(),
+    ],
+  },
+];