@kissmybutton/mc-code 0.0.1 → 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -197,9 +197,10 @@ class CodeClip extends motorcortex.BrowserClip {
197
197
  return `
198
198
  #code-container {
199
199
  width: 100%;
200
- height: 100%;
200
+ height: auto !important;
201
+ min-height: 100%;
201
202
  display: flex;
202
- align-items: center;
203
+ align-items: flex-start;
203
204
  justify-content: center;
204
205
  padding: 24px;
205
206
  box-sizing: border-box;
@@ -215,7 +216,6 @@ class CodeClip extends motorcortex.BrowserClip {
215
216
  line-height: 1.7;
216
217
  overflow-x: auto;
217
218
  width: 100%;
218
- max-height: 100%;
219
219
  box-sizing: border-box;
220
220
  font-family: "Fira Code", "Cascadia Code", "JetBrains Mono", "Consolas", monospace;
221
221
  }
@@ -345,7 +345,7 @@ class WriteCode extends motorcortex.Effect {
345
345
  }
346
346
 
347
347
  var name = "@kissmybutton/mc-code";
348
- var version = "0.0.1";
348
+ var version = "0.0.2";
349
349
 
350
350
  var index = {
351
351
  npm_name: name,
@@ -195,9 +195,10 @@ class CodeClip extends BrowserClip {
195
195
  return `
196
196
  #code-container {
197
197
  width: 100%;
198
- height: 100%;
198
+ height: auto !important;
199
+ min-height: 100%;
199
200
  display: flex;
200
- align-items: center;
201
+ align-items: flex-start;
201
202
  justify-content: center;
202
203
  padding: 24px;
203
204
  box-sizing: border-box;
@@ -213,7 +214,6 @@ class CodeClip extends BrowserClip {
213
214
  line-height: 1.7;
214
215
  overflow-x: auto;
215
216
  width: 100%;
216
- max-height: 100%;
217
217
  box-sizing: border-box;
218
218
  font-family: "Fira Code", "Cascadia Code", "JetBrains Mono", "Consolas", monospace;
219
219
  }
@@ -343,7 +343,7 @@ class WriteCode extends Effect {
343
343
  }
344
344
 
345
345
  var name = "@kissmybutton/mc-code";
346
- var version = "0.0.1";
346
+ var version = "0.0.2";
347
347
 
348
348
  var index = {
349
349
  npm_name: name,
@@ -1 +1 @@
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}}}));
1
+ !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("@donkeyclip/motorcortex")):"function"==typeof define&&define.amd?define(["@donkeyclip/motorcortex"],e):(t="undefined"!=typeof globalThis?globalThis:t||self)["@kissmybutton/mc-code"]=e(t.MotorCortex)}(this,(function(t){"use strict";const e={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(t){return t.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function o(t,e,o){return t.split("\n").map(((t,a)=>`<div class="shiki-line" id="line_${a}"><span class="line-num">${a+1}</span><span class="line-code">${function(t,e,o){const a=e,l=n[o]||n.javascript,r=s[o]??"//";let c="",p=0;if("yaml"===o){const e=t.match(/^(\s*)([\w.\-/]+)(\s*:\s*)(.*)/);if(e){const[,t,n,s,o]=e;return c+=i(t),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=t.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 e=t.match(/^(\s*)("(?:[^"\\]|\\.)*")(\s*:\s*)(.*)/);if(e){const[,t,n,s,o]=e;return c+=i(t),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<t.length;){if(r&&t.startsWith(r,p)&&(0===p||/\s/.test(t[p-1])||0===p)){c+=`<span style="color:${a.comment};font-style:italic">${i(t.slice(p))}</span>`;break}if('"'!==t[p]&&"'"!==t[p]&&"`"!==t[p])if(!/\d/.test(t[p])||0!==p&&!/[\s,;(=+\-*/<>!&|]/.test(t[p-1]))if(/[a-zA-Z_$]/.test(t[p])){let e=p;for(;e<t.length&&/[a-zA-Z0-9_$]/.test(t[e]);)e++;const n=t.slice(p,e);l.has(n)?c+=`<span style="color:${a.keyword};font-weight:600">${i(n)}</span>`:e<t.length&&"("===t[e]?c+=`<span style="color:${a.fn}">${i(n)}</span>`:c+=`<span style="color:${a.fg}">${i(n)}</span>`,p=e}else/[{}()\[\];:.,=+\-*/<>!&|?%^~@]/.test(t[p])?(c+=`<span style="color:${a.punct}">${i(t[p])}</span>`,p++):(c+=i(t[p]),p++);else{let e=p;for(;e<t.length&&/[\d.]/.test(t[e]);)e++;c+=`<span style="color:${a.number}">${i(t.slice(p,e))}</span>`,p=e}else{const e=t[p];let n=p+1;for(;n<t.length&&t[n]!==e;)"\\"===t[n]&&n++,n++;n=Math.min(n+1,t.length),c+=`<span style="color:${a.string}">${i(t.slice(p,n))}</span>`,p=n}}return c||" "}(t,e,o)}</span></div>`)).join("")}class a extends t.BrowserClip{get html(){const t=this.attrs.code||"",n=this.attrs.language||"javascript";return`<div id="code-container"><pre><code>${o(t,e[this.attrs.theme]||e.dark,n)}</code></pre></div>`}get css(){const t=this.attrs.fontSize||14,n=e[this.attrs.theme]||e.dark;return`\n #code-container {\n width: 100%;\n height: auto !important;\n min-height: 100%;\n display: flex;\n align-items: flex-start;\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: ${t}px;\n line-height: 1.7;\n overflow-x: auto;\n width: 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 t=this.context.getElements("#code-container")[0],e=t.querySelectorAll(".shiki-line");this.setCustomEntity("code",{container:t,lines:e,lineCount:e.length})}}class l extends t.Effect{getScratchValue(){return 0}onGetContext(){this._lines=this.element?.entity?.lines,this._color=this.attrs.color||"rgba(99,102,241,0.25)";const t=this.attributeKey||"";this._lineIndex=parseInt(t.split("_").pop(),10)}onProgress(t){if(!this._lines||isNaN(this._lineIndex)||this._lineIndex<0||this._lineIndex>=this._lines.length)return;const e=this.getFraction(t),n=this._lines[this._lineIndex];let s;if(s=e<.25?e/.25:e<.5?1-(e-.25)/.25:e<.75?(e-.5)/.25:1-(e-.75)/.25,s>.01){const t=.35*s,e=this._color.match(/\d+/g);e&&e.length>=3&&(n.style.backgroundColor=`rgba(${e[0]},${e[1]},${e[2]},${t})`)}else n.style.backgroundColor=""}}class r extends t.Effect{getScratchValue(){return 0}onGetContext(){if(this._lines=this.element?.entity?.lines,this._lines)for(const t of this._lines)t.style.opacity="0"}onProgress(t){if(!this._lines)return;const e=this.getFraction(t),n=this.initialValue??0,s=n+(this.targetValue-n)*e,i=this._lines.length,o=s*i;for(let t=0;t<i;t++)t<Math.floor(o)?this._lines[t].style.opacity="1":this._lines[t].style.opacity=t<o?String(o-t):"0"}}return{npm_name:"@kissmybutton/mc-code",version:"0.0.2",incidents:[{exportable:l,name:"CodeHighlight"},{exportable:r,name:"WriteCode"}],Clip:{exportable:a}}}));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kissmybutton/mc-code",
3
- "version": "0.0.1",
3
+ "version": "0.0.2",
4
4
  "description": "MotorCortex code display plugin — Shiki syntax highlighting with line-level animation",
5
5
  "main": "dist/bundle.cjs.js",
6
6
  "module": "dist/bundle.esm.js",
@@ -175,9 +175,10 @@ export default class CodeClip extends BrowserClip {
175
175
  return `
176
176
  #code-container {
177
177
  width: 100%;
178
- height: 100%;
178
+ height: auto !important;
179
+ min-height: 100%;
179
180
  display: flex;
180
- align-items: center;
181
+ align-items: flex-start;
181
182
  justify-content: center;
182
183
  padding: 24px;
183
184
  box-sizing: border-box;
@@ -193,7 +194,6 @@ export default class CodeClip extends BrowserClip {
193
194
  line-height: 1.7;
194
195
  overflow-x: auto;
195
196
  width: 100%;
196
- max-height: 100%;
197
197
  box-sizing: border-box;
198
198
  font-family: "Fira Code", "Cascadia Code", "JetBrains Mono", "Consolas", monospace;
199
199
  }