handlebars-editor-react 0.1.1 → 0.1.3

package/dist/index.cjs

@@ -1,3 +1,3 @@
-'use strict';Object.defineProperty(exports,'__esModule',{value:true});var react=require('react'),V=require('handlebars'),jsxRuntime=require('react/jsx-runtime');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var V__default=/*#__PURE__*/_interopDefault(V);var Y=V__default.default.Parser,P=Y.lexer,me=Y.terminals_,ge={CONTENT:"text",COMMENT:"comment",OPEN:"brace",CLOSE:"brace",OPEN_UNESCAPED:"brace",CLOSE_UNESCAPED:"brace",OPEN_RAW_BLOCK:"brace",CLOSE_RAW_BLOCK:"brace",END_RAW_BLOCK:"brace",OPEN_BLOCK:"brace",OPEN_INVERSE:"brace",OPEN_INVERSE_CHAIN:"brace",OPEN_ENDBLOCK:"brace",OPEN_PARTIAL:"brace",OPEN_PARTIAL_BLOCK:"brace",OPEN_SEXPR:"subexpr-paren",CLOSE_SEXPR:"subexpr-paren",OPEN_BLOCK_PARAMS:"block-keyword",CLOSE_BLOCK_PARAMS:"block-keyword",INVERSE:"block-keyword",ID:"variable",STRING:"literal",NUMBER:"literal",BOOLEAN:"literal",UNDEFINED:"literal",NULL:"literal",DATA:"data-var",SEP:"text",EQUALS:"text"};function J(r,a,e){let t=0;for(let c=0;c<a-1&&c<r.length;c++)t+=r[c].length+1;return t+e}function Ee(r){let a=[],e=r.split(`
-`);P.setInput(r);try{for(let t=P.lex();t!==P.EOF;t=P.lex()){let c=me[t]||"UNKNOWN",n=P.yylloc;a.push({type:c,text:P.yytext,start:J(e,n.first_line,n.first_column),end:J(e,n.last_line,n.last_column)});}}catch{}return a}function xe(r,a){let e=r[a-1],t=r[a+1];return e&&(e.type==="OPEN_BLOCK"||e.type==="OPEN_INVERSE"||e.type==="OPEN_INVERSE_CHAIN"||e.type==="OPEN_ENDBLOCK")?"block-keyword":e?.type==="OPEN_PARTIAL"||e?.type==="OPEN_PARTIAL_BLOCK"||e?.type==="OPEN_SEXPR"?"helper":e?.type==="OPEN"||e?.type==="OPEN_UNESCAPED"?t&&(t.type==="ID"||t.type==="SEP"||t.type==="STRING"||t.type==="NUMBER"||t.type==="BOOLEAN"||t.type==="DATA"||t.type==="OPEN_SEXPR")?"helper":"variable":e?.type==="EQUALS"?"hash-value":e?.type==="ID"?t?.type==="EQUALS"?"hash-key":"helper-arg":e?.type==="DATA"||e?.type==="SEP"?"helper-arg":e?.type==="OPEN_BLOCK_PARAMS"?"block-param":"variable"}function ye(r,a){let e=[],t=0;for(let c=0;c<a.length;c++){let n=a[c];n.start>t&&e.push({type:"text",value:r.slice(t,n.start),start:t,end:n.start});let b=ge[n.type]||"text";if(n.type==="ID"&&(b=xe(a,c)),n.type==="DATA"){let d=a[c+1];if(d?.type==="ID"&&d.start===n.end){e.push({type:"data-var",value:r.slice(n.start,d.end),start:n.start,end:d.end}),t=d.end,c++;continue}}e.push({type:b,value:r.slice(n.start,n.end),start:n.start,end:n.end}),t=n.end;}return t<r.length&&e.push({type:"text",value:r.slice(t),start:t,end:r.length}),e}function L(r){if(!r)return [];let a=Ee(r);return ye(r,a).filter(e=>e.value.length>0)}var Z=new Set(["if","unless","each","with","lookup","log","this","else"]),M=new Set(["each","with"]);function K(r){return Z.has(r)||r.startsWith("@")}var ee=V__default.default.Parser,O=ee.lexer,Oe=ee.terminals_;function Ne(r){let a=new Map,e=r;for(;e.length>0;){let t=ke(e,a);if(t===e.length)break;let c=e.slice(t),n=c.search(/\{\{/);if(n===-1)break;e=c.slice(n);}return Array.from(a.values())}function ke(r,a){O.setInput(r),O.conditionStack=["INITIAL"];let e=0,t=false,c=null,n=[],b=[];function d(i,l){let f=[];for(let o=l;o<i.length;o++)if(i[o].name==="ID")f.push(i[o].text);else if(i[o].name!=="SEP")break;return f}function x(i,l,f){a.has(l)||a.set(l,{name:i,path:l,type:f?"block":l.includes(".")?"nested":"simple",blockType:f});}function _(){if(n.length===0)return;let i=0;if(n[i]?.name==="DATA")return;let l=n[i].text;if(c==="block"){let f=b.some(o=>M.has(o.helper));if(M.has(l)){for(i++;i<n.length&&n[i].name!=="ID";)i++;if(i<n.length){let o=d(n,i);o.length>0&&!K(o[0])&&!f&&x(o[0],o.join("."),l),b.push({helper:l,context:o[0]||""});}}else if(Z.has(l)){for(i++;i<n.length&&n[i].name!=="ID";)i++;if(i<n.length){let o=d(n,i);o.length>0&&!K(o[0])&&!f&&x(o[0],o.join("."),l);}b.push({helper:l,context:""});}else b.push({helper:l,context:""});}else if(c==="endblock")b.length>0&&b.pop();else {let f=b.some(o=>M.has(o.helper));if(!K(l)&&!f){let o=d(n,i);o.length>0&&x(o[0],o.join("."));}}}try{for(let i=O.lex();i!==O.EOF;i=O.lex()){let l=Oe[i],f=O.yytext;if(e=O.yylloc?.last_column??e,!(l==="OPEN_RAW_BLOCK"||l==="CLOSE_RAW_BLOCK"||l==="END_RAW_BLOCK")){if(l==="OPEN"||l==="OPEN_UNESCAPED"){t=!0,c="mustache",n=[];continue}if(l==="OPEN_BLOCK"||l==="OPEN_INVERSE"||l==="OPEN_INVERSE_CHAIN"){t=!0,c="block",n=[];continue}if(l==="OPEN_ENDBLOCK"){t=!0,c="endblock",n=[];continue}if(l==="CLOSE"||l==="CLOSE_UNESCAPED"){_(),t=!1,n=[];continue}t&&n.push({name:l,text:f});}}return r.length}catch{return e}}function U(r){let a=Ne(r),e=[...new Set(a.map(t=>t.name))];return {variables:a,rootVariables:e}}function Pe(r,a,e){if(!a)return r;let t=e?.helpers?V__default.default.create():V__default.default;if(e?.helpers)for(let[c,n]of Object.entries(e.helpers))t.registerHelper(c,n);return t.compile(r)(a)}var Se=["#if","#each","#with","#unless","/if","/each","/with","/unless","else"];function re({value:r,onChange:a,placeholder:e="Enter template...",readOnly:t=false,className:c="",style:n,theme:b,customHelpers:d=[],autocomplete:x=true,minHeight:_=100}){let i=react.useRef(null),l=react.useRef(null),f=react.useRef(null),[o,y]=react.useState({isOpen:false,options:[],selectedIndex:0,triggerStart:0,filterText:""}),[R,se]=react.useState({top:0,left:0}),z=react.useMemo(()=>U(r).rootVariables,[r]),F=react.useMemo(()=>[...Se,...d,...z],[d,z]),$=react.useMemo(()=>L(r),[r]),oe=react.useMemo(()=>r?$.map(s=>s.type==="text"?s.value:jsxRuntime.jsx("span",{className:`hbs-token-${s.type}`,children:s.value},s.start)):jsxRuntime.jsx("span",{className:"hbs-editor-placeholder",children:e}),[$,r,e]),ae=react.useCallback(s=>{let p=s.target.value;if(a?.(p),!x||t)return;let h=s.target.selectionStart,m=p.slice(0,h).match(/\{\{([#/]?\w*)$/);if(m){let g=m[1]||"",E=h-g.length,N=F.filter(w=>w.toLowerCase().startsWith(g.toLowerCase()));if(N.length>0){y({isOpen:true,options:N,selectedIndex:0,triggerStart:E,filterText:g});return}}y(g=>({...g,isOpen:false}));},[a,x,t,F]),v=react.useCallback(s=>{let p=i.current;if(!p)return;let{triggerStart:h}=o,u=s,m=s.length;if(s.startsWith("#")){let E=s.slice(1);u=`${s} }}{{/${E}}}`,m=s.length+1;}else !s.startsWith("/")&&s!=="else"?(u=`${s}}}`,m=u.length):(u=`${s}}}`,m=u.length);p.focus(),p.setSelectionRange(h,p.selectionStart),document.execCommand("insertText",false,u);let g=h+m;p.setSelectionRange(g,g),a?.(p.value),y(E=>({...E,isOpen:false}));},[a,o]),le=react.useCallback(s=>{let{scrollTop:p,scrollLeft:h}=s.currentTarget;l.current&&(l.current.scrollTop=p,l.current.scrollLeft=h),se({top:p,left:h});},[]),ie=react.useCallback(s=>{if(!o.isOpen)return;let{options:p,selectedIndex:h}=o;switch(s.key){case "ArrowDown":s.preventDefault(),y(u=>({...u,selectedIndex:Math.min(h+1,p.length-1)}));break;case "ArrowUp":s.preventDefault(),y(u=>({...u,selectedIndex:Math.max(h-1,0)}));break;case "Enter":case "Tab":s.preventDefault(),p[h]&&v(p[h]);break;case "Escape":s.preventDefault(),y(u=>({...u,isOpen:false}));break}},[o,v]),I=react.useMemo(()=>{if(!o.isOpen||!i.current)return {top:0,left:0,maxHeight:192,openUpward:false,visible:false};let s=i.current,{triggerStart:p}=o,u=r.slice(0,p).split(`
-`),m=u.length,g=u[u.length-1]?.length||0,E=getComputedStyle(s),N=parseFloat(E.lineHeight)||20,w=parseFloat(E.paddingTop)||0,he=parseFloat(E.paddingLeft)||0,ue=(parseFloat(E.fontSize)||14)*.6,X=getComputedStyle(s.parentElement||s),fe=parseInt(X.getPropertyValue("--hbs-autocomplete-min-width"))||180,j=parseInt(X.getPropertyValue("--hbs-autocomplete-max-height"))||192,k=w+m*N-R.top,A=he+g*ue-R.left,Q=s.clientWidth-fe-10;A>Q&&(A=Math.max(10,Q));let D=s.clientHeight-k-10,G=k-N-10,q=D<120&&G>D,B,C;q?(C=Math.min(j,Math.max(80,G)),B=k-N-C):(C=Math.min(j,Math.max(80,D)),B=k);let be=k>0&&k<s.clientHeight&&A>0&&A<s.clientWidth;return {top:B,left:A,maxHeight:C,openUpward:q,visible:be}},[o,r,R]),ce=react.useMemo(()=>{if(!b)return {};let s={},p={variable:"--hbs-color-variable",variablePath:"--hbs-color-variable-path",blockKeyword:"--hbs-color-block-keyword",blockParam:"--hbs-color-block-param",helper:"--hbs-color-helper",helperArg:"--hbs-color-helper-arg",hashKey:"--hbs-color-hash-key",hashValue:"--hbs-color-hash-value",literal:"--hbs-color-literal",dataVar:"--hbs-color-data-var",subexprParen:"--hbs-color-subexpr-paren",comment:"--hbs-color-comment",raw:"--hbs-color-raw",brace:"--hbs-color-brace",text:"--hbs-color-text",background:"--hbs-color-background",caret:"--hbs-color-caret",border:"--hbs-color-border",placeholder:"--hbs-color-placeholder"};for(let[h,u]of Object.entries(p)){let m=b[h];m&&(s[u]=m);}return s},[b]);react.useEffect(()=>{if(!o.isOpen||!f.current)return;let h=f.current.querySelectorAll(".hbs-autocomplete-item")[o.selectedIndex];h&&h.scrollIntoView({block:"nearest"});},[o.selectedIndex,o.isOpen]);let pe=["hbs-editor",t?"hbs-readonly":"",c].filter(Boolean).join(" ");return jsxRuntime.jsxs("div",{className:pe,style:{...ce,minHeight:typeof _=="number"?`${_}px`:_,...n},children:[jsxRuntime.jsx("div",{ref:l,className:"hbs-editor-highlight",children:oe}),jsxRuntime.jsx("textarea",{ref:i,className:"hbs-editor-textarea",value:r,onChange:ae,onKeyDown:ie,onScroll:le,placeholder:"",readOnly:t,spellCheck:false,autoCapitalize:"off",autoComplete:"off",autoCorrect:"off"}),x&&o.isOpen&&I.visible&&jsxRuntime.jsx("div",{ref:f,className:"hbs-autocomplete",style:{top:I.top,left:I.left,maxHeight:I.maxHeight},children:o.options.map((s,p)=>jsxRuntime.jsx("button",{type:"button",className:`hbs-autocomplete-item ${p===o.selectedIndex?"hbs-selected":""}`,onClick:()=>v(s),onMouseEnter:()=>y(h=>({...h,selectedIndex:p})),children:s},s))})]})}function _e({content:r,className:a}){if(!r)return null;let e=L(r);return jsxRuntime.jsx("span",{className:a,children:e.map(t=>jsxRuntime.jsx("span",{className:`hbs-token-${t.type}`,children:t.value},t.start))})}exports.HandlebarsEditor=re;exports.HandlebarsHighlight=_e;exports.default=re;exports.extract=U;exports.interpolate=Pe;exports.tokenize=L;
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var react=require('react'),ne=require('handlebars'),reactDom=require('react-dom'),jsxRuntime=require('react/jsx-runtime');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var ne__default=/*#__PURE__*/_interopDefault(ne);var ce=ne__default.default.Parser,H=ce.lexer,Te=ce.terminals_,Ne=new Set(["OPEN_BLOCK","OPEN_INVERSE","OPEN_INVERSE_CHAIN","OPEN_ENDBLOCK"]),Ce=new Set(["OPEN","OPEN_UNESCAPED"]),Re=new Set(["OPEN_PARTIAL","OPEN_PARTIAL_BLOCK"]),Ie=new Set(["OPEN","OPEN_UNESCAPED","OPEN_BLOCK","OPEN_INVERSE","OPEN_INVERSE_CHAIN","OPEN_ENDBLOCK","OPEN_PARTIAL","OPEN_PARTIAL_BLOCK"]),Le=new Set(["CLOSE","CLOSE_UNESCAPED","CLOSE_RAW_BLOCK","END_RAW_BLOCK"]),_e=new Set(["ID","STRING","NUMBER","BOOLEAN","DATA","OPEN_SEXPR","UNDEFINED","NULL"]),pe=t=>Ne.has(t),ue=t=>Ce.has(t),fe=t=>Re.has(t),ve=t=>Ie.has(t),we=t=>Le.has(t),De=t=>_e.has(t),Be={CONTENT:"text",COMMENT:"comment",OPEN:"brace",CLOSE:"brace",OPEN_UNESCAPED:"brace",CLOSE_UNESCAPED:"brace",OPEN_RAW_BLOCK:"brace",CLOSE_RAW_BLOCK:"brace",END_RAW_BLOCK:"brace",OPEN_BLOCK:"brace",OPEN_INVERSE:"brace",OPEN_INVERSE_CHAIN:"brace",OPEN_ENDBLOCK:"brace",OPEN_PARTIAL:"brace",OPEN_PARTIAL_BLOCK:"brace",OPEN_SEXPR:"subexpr-paren",CLOSE_SEXPR:"subexpr-paren",OPEN_BLOCK_PARAMS:"block-keyword",CLOSE_BLOCK_PARAMS:"block-keyword",INVERSE:"block-keyword",ID:"variable",STRING:"literal",NUMBER:"literal",BOOLEAN:"literal",UNDEFINED:"literal",NULL:"literal",DATA:"data-var",SEP:"brace",EQUALS:"brace"};function le(t,n,o){let e=0;for(let r=0;r<n-1&&r<t.length;r++)e+=t[r].length+1;return e+o}function He(t){let n=[],o=t.split(`
+`);H.setInput(t);try{for(let e=H.lex();e!==H.EOF;e=H.lex()){let r=Te[e]||"UNKNOWN",s=H.yylloc;n.push({type:r,text:H.yytext,start:le(o,s.first_line,s.first_column),end:le(o,s.last_line,s.last_column)});}}catch{}return n}function Me(t){return t.map(n=>n.type==="ID"&&n.text==="."?{...n,type:"SEP"}:n.type==="ID"&&n.text==="="?{...n,type:"EQUALS"}:n)}function Ve(t){let n=[],o=null,e=false,r=false,s=0;for(let l=0;l<t.length;l++){let i=t[l],d=t[l-1];ve(i.type)?(pe(i.type)?o=i.type==="OPEN_ENDBLOCK"?"block-close":"block-open":fe(i.type)?o="partial":ue(i.type)&&(o="mustache"),r=false,s=0):we(i.type)&&(o=null,r=false,s=0),i.type==="OPEN_BLOCK_PARAMS"?e=true:i.type==="CLOSE_BLOCK_PARAMS"&&(e=false),i.type==="SEP"?s++:i.type==="ID"&&d?.type!=="SEP"&&d?.type!=="DATA"&&(s=0);let O=false;if(i.type==="ID"){if(s===0)O=r;else for(let k=l-1;k>=0;k--)if(t[k].type==="ID"&&n[k]?.context.pathRootAfterHelper!==void 0){let x=t[k-1];if(x?.type!=="SEP"&&x?.type!=="DATA"){O=n[k].context.pathRootAfterHelper;break}}}n.push({...i,context:{type:o,isInBlockParams:e,pathRootAfterHelper:O}}),i.type==="ID"&&s===0&&!e&&d?.type!=="EQUALS"&&d?.type!=="DATA"&&(r=true);}return n}function Ke(t,n,o){let{context:e}=t;return t.text==="this"?"data-var":e.isInBlockParams?"block-param":o?.type==="EQUALS"?"hash-key":n?.type==="EQUALS"?"hash-value":n?.type==="DATA"?"data-var":n?.type==="SEP"?e.pathRootAfterHelper?"helper-arg":"variable-path":Ue(t,n,o)}function Ue(t,n,o){let{context:e}=t;return e.type==="block-open"||e.type==="block-close"?pe(n?.type??"")?"block-keyword":"helper-arg":e.type==="partial"?fe(n?.type??"")?"helper":"helper-arg":n?.type==="OPEN_SEXPR"?"helper":e.type==="mustache"?ue(n?.type??"")?o?.type==="SEP"?"variable":o&&De(o.type)?"helper":"variable":"helper-arg":"variable"}function We(t){return t.map((n,o)=>{let e=t[o-1],r=t[o+1],s;return n.type==="ID"?s=Ke(n,e,r):s=Be[n.type]||"text",{token:n,highlightType:s}})}function ze(t,n){let o=[],e=0;for(let r=0;r<n.length;r++){let{token:s,highlightType:l}=n[r];if(s.start>e&&o.push({type:"text",value:t.slice(e,s.start),start:e,end:s.start}),s.type==="DATA"){let i=n[r+1];if(i?.token.type==="ID"&&i.token.start===s.end){o.push({type:"data-var",value:t.slice(s.start,i.token.end),start:s.start,end:i.token.end}),e=i.token.end,r++;continue}}o.push({type:l,value:t.slice(s.start,s.end),start:s.start,end:s.end}),e=s.end;}return e<t.length&&o.push({type:"text",value:t.slice(e),start:e,end:t.length}),o}function M(t){if(!t)return [];let n=He(t),o=Me(n),e=Ve(o),r=We(e);return ze(t,r).filter(l=>l.value.length>0)}var J=["if","unless","each","with"],de=new Set([...J,"lookup","log","this","else"]),he=new Set(["each","with"]),$e=new Set(["ID","STRING","NUMBER","BOOLEAN","DATA","OPEN_SEXPR"]),me=ne__default.default.Parser,D=me.lexer,Fe=me.terminals_;function j(t){return de.has(t)||t.startsWith("@")}function Xe(t){return $e.has(t.name)}function q(t,n){let o=[],e=true;for(let r=n;r<t.length;r++){let s=t[r];if(s.name==="EQUALS")break;if(s.name==="ID"){if(!e||t[r+1]?.name==="EQUALS")break;o.push(s.text),e=false;}else if(s.name==="SEP")e=true;else break}return o}function Qe(t,n,o,e){return {name:t,path:n,type:o?"block":n.includes(".")||e?"nested":"simple",blockType:o,context:e}}function Ge(t){let n=[],o=null;for(let e of t)he.has(e.helper)&&e.context&&(o||(o=e.context),n.push(e.helper==="each"?`${e.context}[]`:e.context));return n.length===0||!o?null:{root:o,prefix:`${n.join(".")}.`}}function je(t){let n=[],o=t;for(;o.length>0;){let e=qe(o);if(n.push(...e.expressions),e.consumed===o.length)break;let r=o.slice(e.consumed),s=r.search(/\{\{/);if(s===-1)break;o=r.slice(s);}return {expressions:n}}function qe(t){D.setInput(t),D.conditionStack=["INITIAL"];let n=[],o=0,e=false,r=null,s=[];try{for(let l=D.lex();l!==D.EOF;l=D.lex()){let i=Fe[l],d=D.yytext;if(o=D.yylloc?.last_column??o,!(i==="OPEN_RAW_BLOCK"||i==="CLOSE_RAW_BLOCK"||i==="END_RAW_BLOCK")){if(i==="OPEN"||i==="OPEN_UNESCAPED"){e=!0,r="mustache",s=[];continue}if(i==="OPEN_PARTIAL"||i==="OPEN_PARTIAL_BLOCK"){e=!0,r="partial",s=[];continue}if(i==="OPEN_BLOCK"||i==="OPEN_INVERSE"||i==="OPEN_INVERSE_CHAIN"){e=!0,r="block",s=[];continue}if(i==="OPEN_ENDBLOCK"){e=!0,r="endblock",s=[];continue}if(i==="CLOSE"||i==="CLOSE_UNESCAPED"){if(r){let O=s[0]?.text??null;n.push({type:r,tokens:[...s],helperName:O});}e=!1,s=[];continue}e&&s.push({name:i,text:d});}}return {expressions:n,consumed:t.length}}catch{return {expressions:n,consumed:o}}}function Ye(t,n,o){let e=t.tokens;if(e.length===0||e[0]?.name==="DATA")return;let r=e[0]?.text;if(j(r))F(e,1,n,o);else {let s=q(e,0);if(s.length>0){let i=s.length*2-1,d=e[i];d&&Xe(d)?F(e,i,n,o):Y(s,n,o);}}}function Je(t,n,o){let e=t.tokens,r=e[0]?.text;if(he.has(r)){if(e[1]?.name==="OPEN_SEXPR")return F(e,1,n,o),{helper:r,context:""};{let s=1;for(;s<e.length&&e[s].name!=="ID";)s++;if(s<e.length){let l=q(e,s);return l.length>0&&!j(l[0])&&Y(l,n,o,r),{helper:r,context:l[0]||""}}return {helper:r,context:""}}}else if(de.has(r)){if(e[1]?.name==="OPEN_SEXPR")F(e,1,n,o);else {let s=1;for(;s<e.length&&e[s].name!=="ID";)s++;if(s<e.length){let l=q(e,s);l.length>0&&!j(l[0])&&Y(l,n,o,r);}}return {helper:r,context:""}}return {helper:r,context:""}}function Ze(t,n,o){let e=t.tokens,r=1;for(;r<e.length&&(e[r].name==="SEP"||e[r].name==="ID")&&!(e[r].name==="ID"&&e[r-1]?.name!=="SEP");)r++;F(e,r,n,o);}function F(t,n,o,e){for(let r=n;r<t.length;r++){let s=t[r];if(!(s.name==="OPEN_SEXPR"||s.name==="CLOSE_SEXPR")&&s.name!=="DATA"&&t[r-1]?.name!=="DATA"&&s.name!=="EQUALS"&&!(s.name==="ID"&&t[r+1]?.name==="EQUALS")&&s.name==="ID"&&!j(s.text)){if(t[r-1]?.name==="OPEN_SEXPR")continue;let i=q(t,r);i.length>0&&(Y(i,o,e),r+=i.length*2-2);}}}function Y(t,n,o,e){let r=t[0],s=n.contextPrefix&&n.rootContext?{prefix:n.contextPrefix,root:n.rootContext}:null,l,i;s?(l=s.prefix+t.join("."),i=s.root):(l=t.join("."),i=void 0),o.has(l)||o.set(l,Qe(r,l,e,i));}function et(t,n){return n.type==="endblock"&&t.length>0?t.slice(0,-1):t}function tt(t){let n=new Map,o=[];for(let e of t){let r=Ge(o),s={contextPrefix:r?.prefix??null,rootContext:r?.root??null};if(e.type==="mustache")Ye(e,s,n);else if(e.type==="block"){let l=Je(e,s,n);o=[...o,l];}else e.type==="partial"?Ze(e,s,n):e.type==="endblock"&&(o=et(o,e));}return Array.from(n.values())}function oe(t){let{expressions:n}=je(t),o=tt(n),e=[...new Set(o.filter(r=>!r.context).map(r=>r.name))];return {variables:o,rootVariables:e}}function nt(t,n,o){if(!n)return t;let e=o?.helpers?ne__default.default.create():ne__default.default;if(o?.helpers)for(let[r,s]of Object.entries(o.helpers))e.registerHelper(r,s);return e.compile(t)(n)}var ot=["direction","boxSizing","width","height","overflowX","overflowY","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","borderStyle","paddingTop","paddingRight","paddingBottom","paddingLeft","fontStyle","fontVariant","fontWeight","fontStretch","fontSize","fontSizeAdjust","lineHeight","fontFamily","textAlign","textTransform","textIndent","textDecoration","letterSpacing","wordSpacing","tabSize","MozTabSize","whiteSpace","wordWrap","wordBreak","overflowWrap"];function be(t,n){let o=getComputedStyle(t),e=document.createElement("div");e.id="hbs-caret-mirror",document.body.appendChild(e);let r=e.style;r.position="absolute",r.visibility="hidden",r.whiteSpace="pre-wrap",r.wordWrap="break-word";for(let x of ot)r[x]=o[x];r.width=`${t.clientWidth}px`,r.height="auto",r.overflow="hidden";let s=t.value.substring(0,n);e.textContent=s;let l=document.createElement("span");l.textContent="\u200B",e.appendChild(l);let i=t.value.substring(n);i&&e.appendChild(document.createTextNode(i));let d=l.getBoundingClientRect(),O=e.getBoundingClientRect(),k={top:d.top-O.top,left:d.left-O.left,height:parseFloat(o.lineHeight)||parseFloat(o.fontSize)*1.2};return document.body.removeChild(e),k}var at=160,se=200,X=10,it=["--hbs-color-text","--hbs-color-border","--hbs-color-placeholder","--hbs-color-focus-ring","--hbs-color-autocomplete-bg","--hbs-color-autocomplete-selected"];function Ee({textareaRef:t,containerRef:n,triggerPosition:o,isOpen:e,children:r,listboxId:s}){let[l,i]=react.useState({top:void 0,bottom:void 0,left:0,maxHeight:se,visible:false}),[d,O]=react.useState({});react.useEffect(()=>{if(!e||!n.current)return;let E=getComputedStyle(n.current),P={};for(let c of it){let u=E.getPropertyValue(c).trim();u&&(P[c]=u);}O(P);},[e,n]);let k=react.useCallback(()=>{let E=t.current;if(!E||!e){i(m=>({...m,visible:false}));return}let P=E.getBoundingClientRect(),c=be(E,o),u=E.scrollTop,S=E.scrollLeft,N=P.top+c.top-u,V=P.left+c.left-S,g=c.height,K=window.innerHeight,ee=window.innerWidth,R=K-N-g-X,Q=N-X,te=R<120&&Q>R,w,U,W;te?(W=Math.min(se,Math.max(80,Q)),U=K-N+X,w=void 0):(W=Math.min(se,Math.max(80,R)),w=N+g,U=void 0);let z=V,G=ee-at-X;z>G&&(z=Math.max(X,G));let a=c.top-u>=0&&c.top-u<E.clientHeight,p=c.left-S>=0&&c.left-S<E.clientWidth;i({top:w,bottom:U,left:z,maxHeight:W,visible:a&&p});},[t,o,e]);if(react.useEffect(()=>{k();},[k]),react.useEffect(()=>{if(!e)return;let E=()=>{k();};return window.addEventListener("scroll",E,true),window.addEventListener("resize",E),()=>{window.removeEventListener("scroll",E,true),window.removeEventListener("resize",E);}},[e,k]),!e||!l.visible)return null;let x={top:l.top,bottom:l.bottom,left:l.left,maxHeight:l.maxHeight,...d};return reactDom.createPortal(jsxRuntime.jsx("div",{id:s,role:"listbox","aria-label":"Autocomplete suggestions",className:"hbs-autocomplete-portal",style:x,children:r}),document.body)}var ut=["this","@index","@first","@last","@key"],ft=["@root"];function dt(t,n){if(!n)return "prefix";let o=t.toLowerCase(),e=n.toLowerCase();return o===e?"exact":o.startsWith(e)?"prefix":o.includes(e)?"partial":"none"}function ht(t,n,o,e,r){let s=[],l=new Set,i=r.lastIndexOf("."),d=i!==-1;d?r.slice(0,i+1):"";let k=d?r.slice(i+1):r,x=(c,u)=>{if(l.has(c))return;let S=dt(c,k);S!=="none"&&(l.add(c),s.push({option:{value:c,type:u},matchType:S}));};if(d){let c=r.slice(0,i).replace(/\[\]$/,"");n.forEach(u=>{let S=u.path.replace(/\[\]/g,"");if(S.startsWith(`${c}.`)){let V=S.slice(c.length+1).split(".")[0];x(V,"variable");}});}else {if(!o){for(let u of J)x(`#${u}`,"block-open");for(let u of J)x(`/${u}`,"block-close");x("else","block-close");}for(let u of t)x(u,"helper");if(e){if(e.isEach)for(let u of ut)x(u,"data-var");for(let u of e.blockParams)x(u,"variable");for(let u of ft)x(u,"data-var");}let c=new Set;for(let u of n){let S=u.path.split(".")[0].replace("[]","");c.add(S);}for(let u of c)x(u,"variable");}let E={"data-var":0,variable:1,helper:2,"block-open":3,"block-close":4},P={exact:0,prefix:1,partial:2,none:3};return s.sort((c,u)=>{let S=P[c.matchType]-P[u.matchType];if(S!==0)return S;let N=E[c.option.type]-E[u.option.type];return N!==0?N:c.option.value.localeCompare(u.option.value)}),s.map(c=>c.option)}function mt(t,n){let o=t.slice(0,n),e=[],r=/\{\{#(each|with)\s+([^\s}]+)(?:\s+as\s*\|([^|]+)\|)?|\{\{\/(each|with)\}\}/g;for(let s of o.matchAll(r))if(s[1]){let l=s[1],i=s[2],O=(s[3]||"").split(/\s+/).filter(Boolean);e.push({type:l,variable:i,blockParams:O,isEach:l==="each"});}else if(s[4]){let l=s[4];for(let i=e.length-1;i>=0;i--)if(e[i].type===l){e.splice(i,1);break}}return e.length>0?e[e.length-1]:null}function bt(t,n){let o=t.slice(0,n),e=o.lastIndexOf("{{!--");if(e!==-1&&o.slice(e).indexOf("--}}")===-1)return  true;let r=o.lastIndexOf("{{!");if(r!==-1){let s=o.slice(r);if(!s.startsWith("{{!--")&&s.indexOf("}}")===-1)return  true}return  false}function xt(t,n){let o=t.slice(0,n),e=t.slice(n),r=o.lastIndexOf("{{");if(r===-1||o.slice(r).includes("}}"))return  false;let l=e.indexOf("}}");return l===-1?false:!e.slice(0,l).includes("{{")}function ye({value:t,onChange:n,placeholder:o="Enter template...",readOnly:e=false,className:r="",style:s,theme:l,customHelpers:i=[],autocomplete:d=true,minHeight:O=100}){let k=react.useRef(null),x=react.useRef(null),E=react.useRef(null),P=react.useId(),[c,u]=react.useState({isOpen:false,options:[],selectedIndex:0,triggerStart:0,filterText:"",isRaw:false,contextPath:null}),S=react.useMemo(()=>oe(t).variables.map(p=>({path:p.path,context:p.context})),[t]),N=react.useMemo(()=>M(t),[t]),V=react.useMemo(()=>t?N.map(a=>a.type==="text"?a.value:jsxRuntime.jsx("span",{className:`hbs-token-${a.type}`,children:a.value},a.start)):jsxRuntime.jsx("span",{className:"hbs-editor-placeholder",children:o}),[N,t,o]),g=react.useCallback(()=>{u(a=>({...a,isOpen:false}));},[]),K=react.useCallback((a,p)=>{if(!d||e){g();return}if(bt(a,p)||xt(a,p)){g();return}let m=a.slice(0,p).match(/(\{\{\{?)([#/]?[\w.@]*)$/);if(!m){g();return}let y=m[1],f=m[2]||"",C=p-f.length,b=y==="{{{";if(f.includes("}")){g();return}let T=mt(a,p),A=ht(i,S,b,T,f);if(A.length===0){g();return}u({isOpen:true,options:A,selectedIndex:0,triggerStart:C,filterText:f,isRaw:b,contextPath:T});},[d,e,i,S,g]),ee=react.useCallback(a=>{let p=a.target.value;n?.(p),K(p,a.target.selectionStart);},[n,K]),R=react.useCallback(a=>{let p=x.current;if(!p)return;let{triggerStart:h,filterText:m,isRaw:y}=c,f=y?"}}}":"}}",C=m.lastIndexOf("."),b=C!==-1?m.slice(0,C+1):"",T,A;if(a.type==="block-open"&&!y){let I=a.value.slice(1);T=`${a.value} }}{{/${I}}}`,A=a.value.length+1;}else a.type!=="block-close"&&a.value!=="else"?(T=`${b}${a.value}${f}`,A=T.length):(T=`${a.value}${f}`,A=T.length);p.focus(),p.setSelectionRange(h,p.selectionStart),document.execCommand("insertText",false,T);let B=h+A;p.setSelectionRange(B,B),n?.(p.value),g();},[c,n,g]),Q=react.useCallback(a=>{let{scrollTop:p,scrollLeft:h}=a.currentTarget;E.current&&(E.current.scrollTop=p,E.current.scrollLeft=h);},[]),te=react.useCallback(a=>{document.querySelector(".hbs-autocomplete-portal")?.contains(a.relatedTarget)||g();},[g]),w=react.useCallback(()=>{let a=x.current;if(!a||!c.isOpen)return;let p=a.selectionStart;t.slice(0,p).match(/(\{\{\{?)([#/]?[\w.@]*)$/)||g();},[c.isOpen,t,g]),U=react.useCallback(a=>{let p=a.currentTarget;if(a.key==="Tab"){if(c.isOpen){a.preventDefault();let C=c.options[c.selectedIndex];C&&R(C);return}a.preventDefault();let{selectionStart:f}=p;if(a.shiftKey){let b=t.slice(0,f).lastIndexOf(`
+`)+1,A=t.slice(b,f).match(/^(\t| {2})/);if(A){let B=A[1].length,I=t.slice(0,b)+t.slice(b+B);n?.(I);let L=Math.max(b,f-B);setTimeout(()=>p.setSelectionRange(L,L),0);}}else document.execCommand("insertText",false,"	"),n?.(p.value);return}if((a.metaKey||a.ctrlKey)&&(a.key==="z"||a.key==="y")||!c.isOpen)return;let{options:h,selectedIndex:m}=c,y=8;switch(a.key){case "ArrowDown":a.preventDefault(),u(f=>({...f,selectedIndex:Math.min(m+1,h.length-1)}));break;case "ArrowUp":a.preventDefault(),u(f=>({...f,selectedIndex:Math.max(m-1,0)}));break;case "Home":a.preventDefault(),u(f=>({...f,selectedIndex:0}));break;case "End":a.preventDefault(),u(f=>({...f,selectedIndex:h.length-1}));break;case "PageDown":a.preventDefault(),u(f=>({...f,selectedIndex:Math.min(m+y,h.length-1)}));break;case "PageUp":a.preventDefault(),u(f=>({...f,selectedIndex:Math.max(m-y,0)}));break;case "Enter":a.preventDefault(),h[m]&&R(h[m]);break;case "Escape":a.preventDefault(),g();break;case "ArrowLeft":case "ArrowRight":setTimeout(()=>w(),0);break}},[c,R,g,w,t,n]),W=react.useMemo(()=>{if(!l)return {};let a={},p={variable:"--hbs-color-variable",variablePath:"--hbs-color-variable-path",blockKeyword:"--hbs-color-block-keyword",blockParam:"--hbs-color-block-param",helper:"--hbs-color-helper",helperArg:"--hbs-color-helper-arg",hashKey:"--hbs-color-hash-key",hashValue:"--hbs-color-hash-value",literal:"--hbs-color-literal",dataVar:"--hbs-color-data-var",subexprParen:"--hbs-color-subexpr-paren",comment:"--hbs-color-comment",raw:"--hbs-color-raw",brace:"--hbs-color-brace",text:"--hbs-color-text",background:"--hbs-color-background",caret:"--hbs-color-caret",border:"--hbs-color-border",placeholder:"--hbs-color-placeholder"};for(let[h,m]of Object.entries(p)){let y=l[h];y&&(a[m]=y);}return a},[l]);react.useEffect(()=>{if(!c.isOpen)return;let a=document.querySelector(".hbs-autocomplete-portal");if(!a)return;let h=a.querySelectorAll(".hbs-autocomplete-item")[c.selectedIndex];h&&h.scrollIntoView({block:"nearest"});},[c.selectedIndex,c.isOpen]),react.useEffect(()=>{if(!c.isOpen)return;let a=k.current,p=m=>{let y=m.target;document.querySelector(".hbs-autocomplete-portal")?.contains(y)||a&&!a.contains(y)&&g();},h=m=>{let y=m.target;document.querySelector(".hbs-autocomplete-portal")?.contains(y)||a?.contains(y)&&y!==x.current&&g();};return document.addEventListener("mousedown",p),a?.addEventListener("mousedown",h),()=>{document.removeEventListener("mousedown",p),a?.removeEventListener("mousedown",h);}},[c.isOpen,g]);let z=react.useCallback((a,p)=>{let{filterText:h,selectedIndex:m}=c,y=p===m,f=h.lastIndexOf("."),C=f!==-1?h.slice(f+1):h,b=a.value;(a.type==="block-open"&&b.startsWith("#")||a.type==="block-close"&&b.startsWith("/")||a.type==="data-var"&&b.startsWith("@"))&&(b=b.slice(1));let T,A=C.toLowerCase().replace(/^[#/@]/,""),I=b.toLowerCase().indexOf(A);if(A.length>0&&I!==-1){let $=b.slice(0,I),Se=b.slice(I,I+A.length),Ae=b.slice(I+A.length);T=jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[$,jsxRuntime.jsx("span",{className:"hbs-autocomplete-match",children:Se}),Ae]});}else T=b;let L="";switch(a.type){case "block-open":L="#";break;case "block-close":L="/";break;case "data-var":L="@";break;case "helper":L="\u0192";break;case "variable":L="\xB7";break}let Oe=jsxRuntime.jsx("span",{className:"hbs-autocomplete-type",children:L});return jsxRuntime.jsxs("button",{id:`${P}-option-${p}`,type:"button",role:"option","aria-selected":y,className:`hbs-autocomplete-item hbs-autocomplete-${a.type} ${y?"hbs-selected":""}`,onMouseDown:$=>{$.preventDefault(),R(a);},onMouseEnter:()=>u($=>({...$,selectedIndex:p})),children:[Oe,jsxRuntime.jsx("span",{className:"hbs-autocomplete-value",children:T})]},a.value)},[c,R,P]),G=["hbs-editor",e?"hbs-readonly":"",r].filter(Boolean).join(" ");return jsxRuntime.jsxs("div",{ref:k,className:G,style:{...W,minHeight:typeof O=="number"?`${O}px`:O,...s},children:[jsxRuntime.jsx("div",{ref:E,className:"hbs-editor-highlight",children:V}),jsxRuntime.jsx("textarea",{ref:x,className:"hbs-editor-textarea",value:t,onChange:ee,onKeyDown:U,onScroll:Q,onBlur:te,onSelect:w,placeholder:"",readOnly:e,spellCheck:false,autoCapitalize:"off",autoComplete:"off",autoCorrect:"off",role:"combobox","aria-haspopup":"listbox","aria-expanded":d&&c.isOpen,"aria-controls":P,"aria-activedescendant":d&&c.isOpen&&c.options[c.selectedIndex]?`${P}-option-${c.selectedIndex}`:void 0}),d&&jsxRuntime.jsx(Ee,{textareaRef:x,containerRef:k,triggerPosition:c.triggerStart,isOpen:c.isOpen,listboxId:P,children:c.options.map((a,p)=>z(a,p))})]})}function gt({content:t,className:n}){if(!t)return null;let o=M(t);return jsxRuntime.jsx("span",{className:n,children:o.map(e=>jsxRuntime.jsx("span",{className:`hbs-token-${e.type}`,children:e.value},e.start))})}exports.HandlebarsEditor=ye;exports.HandlebarsHighlight=gt;exports.default=ye;exports.extract=oe;exports.interpolate=nt;exports.tokenize=M;

package/dist/index.d.cts

@@ -106,20 +106,41 @@ interface HandlebarsEditorProps {
     /** Minimum height */
     minHeight?: string | number;
 }
+/**
+ * Autocomplete option with metadata
+ */
+interface AutocompleteOption {
+    /** Display value (the part to insert) */
+    value: string;
+    /** Type of option for styling */
+    type: 'block-open' | 'block-close' | 'helper' | 'variable' | 'data-var';
+}
+/**
+ * Block context information
+ */
+interface BlockContext {
+    type: 'each' | 'with';
+    variable: string;
+    blockParams: string[];
+    isEach: boolean;
+}
 /**
  * Autocomplete state
  */
 interface AutocompleteState {
     isOpen: boolean;
-    options: string[];
+    options: AutocompleteOption[];
     selectedIndex: number;
+    /** Position where the replaceable text starts (after {{) */
     triggerStart: number;
+    /** Current filter text typed by user */
     filterText: string;
+    /** Whether triggered by triple braces {{{ for raw output */
+    isRaw: boolean;
+    /** Current block context if inside #each/#with */
+    contextPath: BlockContext | null;
 }
 
-/**
- * Handlebars template editor with syntax highlighting
- */
 declare function HandlebarsEditor({ value, onChange, placeholder, readOnly, className, style, theme, customHelpers, autocomplete, minHeight, }: HandlebarsEditorProps): react_jsx_runtime.JSX.Element;
 
 interface HandlebarsHighlightProps {

package/dist/index.d.ts

@@ -106,20 +106,41 @@ interface HandlebarsEditorProps {
     /** Minimum height */
     minHeight?: string | number;
 }
+/**
+ * Autocomplete option with metadata
+ */
+interface AutocompleteOption {
+    /** Display value (the part to insert) */
+    value: string;
+    /** Type of option for styling */
+    type: 'block-open' | 'block-close' | 'helper' | 'variable' | 'data-var';
+}
+/**
+ * Block context information
+ */
+interface BlockContext {
+    type: 'each' | 'with';
+    variable: string;
+    blockParams: string[];
+    isEach: boolean;
+}
 /**
  * Autocomplete state
  */
 interface AutocompleteState {
     isOpen: boolean;
-    options: string[];
+    options: AutocompleteOption[];
     selectedIndex: number;
+    /** Position where the replaceable text starts (after {{) */
     triggerStart: number;
+    /** Current filter text typed by user */
     filterText: string;
+    /** Whether triggered by triple braces {{{ for raw output */
+    isRaw: boolean;
+    /** Current block context if inside #each/#with */
+    contextPath: BlockContext | null;
 }
 
-/**
- * Handlebars template editor with syntax highlighting
- */
 declare function HandlebarsEditor({ value, onChange, placeholder, readOnly, className, style, theme, customHelpers, autocomplete, minHeight, }: HandlebarsEditorProps): react_jsx_runtime.JSX.Element;
 
 interface HandlebarsHighlightProps {

package/dist/index.js

@@ -1,3 +1,3 @@
-import {useRef,useState,useMemo,useCallback,useEffect}from'react';import V from'handlebars';import {jsx,jsxs}from'react/jsx-runtime';var Y=V.Parser,P=Y.lexer,me=Y.terminals_,ge={CONTENT:"text",COMMENT:"comment",OPEN:"brace",CLOSE:"brace",OPEN_UNESCAPED:"brace",CLOSE_UNESCAPED:"brace",OPEN_RAW_BLOCK:"brace",CLOSE_RAW_BLOCK:"brace",END_RAW_BLOCK:"brace",OPEN_BLOCK:"brace",OPEN_INVERSE:"brace",OPEN_INVERSE_CHAIN:"brace",OPEN_ENDBLOCK:"brace",OPEN_PARTIAL:"brace",OPEN_PARTIAL_BLOCK:"brace",OPEN_SEXPR:"subexpr-paren",CLOSE_SEXPR:"subexpr-paren",OPEN_BLOCK_PARAMS:"block-keyword",CLOSE_BLOCK_PARAMS:"block-keyword",INVERSE:"block-keyword",ID:"variable",STRING:"literal",NUMBER:"literal",BOOLEAN:"literal",UNDEFINED:"literal",NULL:"literal",DATA:"data-var",SEP:"text",EQUALS:"text"};function J(r,a,e){let t=0;for(let c=0;c<a-1&&c<r.length;c++)t+=r[c].length+1;return t+e}function Ee(r){let a=[],e=r.split(`
-`);P.setInput(r);try{for(let t=P.lex();t!==P.EOF;t=P.lex()){let c=me[t]||"UNKNOWN",n=P.yylloc;a.push({type:c,text:P.yytext,start:J(e,n.first_line,n.first_column),end:J(e,n.last_line,n.last_column)});}}catch{}return a}function xe(r,a){let e=r[a-1],t=r[a+1];return e&&(e.type==="OPEN_BLOCK"||e.type==="OPEN_INVERSE"||e.type==="OPEN_INVERSE_CHAIN"||e.type==="OPEN_ENDBLOCK")?"block-keyword":e?.type==="OPEN_PARTIAL"||e?.type==="OPEN_PARTIAL_BLOCK"||e?.type==="OPEN_SEXPR"?"helper":e?.type==="OPEN"||e?.type==="OPEN_UNESCAPED"?t&&(t.type==="ID"||t.type==="SEP"||t.type==="STRING"||t.type==="NUMBER"||t.type==="BOOLEAN"||t.type==="DATA"||t.type==="OPEN_SEXPR")?"helper":"variable":e?.type==="EQUALS"?"hash-value":e?.type==="ID"?t?.type==="EQUALS"?"hash-key":"helper-arg":e?.type==="DATA"||e?.type==="SEP"?"helper-arg":e?.type==="OPEN_BLOCK_PARAMS"?"block-param":"variable"}function ye(r,a){let e=[],t=0;for(let c=0;c<a.length;c++){let n=a[c];n.start>t&&e.push({type:"text",value:r.slice(t,n.start),start:t,end:n.start});let b=ge[n.type]||"text";if(n.type==="ID"&&(b=xe(a,c)),n.type==="DATA"){let d=a[c+1];if(d?.type==="ID"&&d.start===n.end){e.push({type:"data-var",value:r.slice(n.start,d.end),start:n.start,end:d.end}),t=d.end,c++;continue}}e.push({type:b,value:r.slice(n.start,n.end),start:n.start,end:n.end}),t=n.end;}return t<r.length&&e.push({type:"text",value:r.slice(t),start:t,end:r.length}),e}function L(r){if(!r)return [];let a=Ee(r);return ye(r,a).filter(e=>e.value.length>0)}var Z=new Set(["if","unless","each","with","lookup","log","this","else"]),M=new Set(["each","with"]);function K(r){return Z.has(r)||r.startsWith("@")}var ee=V.Parser,O=ee.lexer,Oe=ee.terminals_;function Ne(r){let a=new Map,e=r;for(;e.length>0;){let t=ke(e,a);if(t===e.length)break;let c=e.slice(t),n=c.search(/\{\{/);if(n===-1)break;e=c.slice(n);}return Array.from(a.values())}function ke(r,a){O.setInput(r),O.conditionStack=["INITIAL"];let e=0,t=false,c=null,n=[],b=[];function d(i,l){let f=[];for(let o=l;o<i.length;o++)if(i[o].name==="ID")f.push(i[o].text);else if(i[o].name!=="SEP")break;return f}function x(i,l,f){a.has(l)||a.set(l,{name:i,path:l,type:f?"block":l.includes(".")?"nested":"simple",blockType:f});}function _(){if(n.length===0)return;let i=0;if(n[i]?.name==="DATA")return;let l=n[i].text;if(c==="block"){let f=b.some(o=>M.has(o.helper));if(M.has(l)){for(i++;i<n.length&&n[i].name!=="ID";)i++;if(i<n.length){let o=d(n,i);o.length>0&&!K(o[0])&&!f&&x(o[0],o.join("."),l),b.push({helper:l,context:o[0]||""});}}else if(Z.has(l)){for(i++;i<n.length&&n[i].name!=="ID";)i++;if(i<n.length){let o=d(n,i);o.length>0&&!K(o[0])&&!f&&x(o[0],o.join("."),l);}b.push({helper:l,context:""});}else b.push({helper:l,context:""});}else if(c==="endblock")b.length>0&&b.pop();else {let f=b.some(o=>M.has(o.helper));if(!K(l)&&!f){let o=d(n,i);o.length>0&&x(o[0],o.join("."));}}}try{for(let i=O.lex();i!==O.EOF;i=O.lex()){let l=Oe[i],f=O.yytext;if(e=O.yylloc?.last_column??e,!(l==="OPEN_RAW_BLOCK"||l==="CLOSE_RAW_BLOCK"||l==="END_RAW_BLOCK")){if(l==="OPEN"||l==="OPEN_UNESCAPED"){t=!0,c="mustache",n=[];continue}if(l==="OPEN_BLOCK"||l==="OPEN_INVERSE"||l==="OPEN_INVERSE_CHAIN"){t=!0,c="block",n=[];continue}if(l==="OPEN_ENDBLOCK"){t=!0,c="endblock",n=[];continue}if(l==="CLOSE"||l==="CLOSE_UNESCAPED"){_(),t=!1,n=[];continue}t&&n.push({name:l,text:f});}}return r.length}catch{return e}}function U(r){let a=Ne(r),e=[...new Set(a.map(t=>t.name))];return {variables:a,rootVariables:e}}function Pe(r,a,e){if(!a)return r;let t=e?.helpers?V.create():V;if(e?.helpers)for(let[c,n]of Object.entries(e.helpers))t.registerHelper(c,n);return t.compile(r)(a)}var Se=["#if","#each","#with","#unless","/if","/each","/with","/unless","else"];function re({value:r,onChange:a,placeholder:e="Enter template...",readOnly:t=false,className:c="",style:n,theme:b,customHelpers:d=[],autocomplete:x=true,minHeight:_=100}){let i=useRef(null),l=useRef(null),f=useRef(null),[o,y]=useState({isOpen:false,options:[],selectedIndex:0,triggerStart:0,filterText:""}),[R,se]=useState({top:0,left:0}),z=useMemo(()=>U(r).rootVariables,[r]),F=useMemo(()=>[...Se,...d,...z],[d,z]),$=useMemo(()=>L(r),[r]),oe=useMemo(()=>r?$.map(s=>s.type==="text"?s.value:jsx("span",{className:`hbs-token-${s.type}`,children:s.value},s.start)):jsx("span",{className:"hbs-editor-placeholder",children:e}),[$,r,e]),ae=useCallback(s=>{let p=s.target.value;if(a?.(p),!x||t)return;let h=s.target.selectionStart,m=p.slice(0,h).match(/\{\{([#/]?\w*)$/);if(m){let g=m[1]||"",E=h-g.length,N=F.filter(w=>w.toLowerCase().startsWith(g.toLowerCase()));if(N.length>0){y({isOpen:true,options:N,selectedIndex:0,triggerStart:E,filterText:g});return}}y(g=>({...g,isOpen:false}));},[a,x,t,F]),v=useCallback(s=>{let p=i.current;if(!p)return;let{triggerStart:h}=o,u=s,m=s.length;if(s.startsWith("#")){let E=s.slice(1);u=`${s} }}{{/${E}}}`,m=s.length+1;}else !s.startsWith("/")&&s!=="else"?(u=`${s}}}`,m=u.length):(u=`${s}}}`,m=u.length);p.focus(),p.setSelectionRange(h,p.selectionStart),document.execCommand("insertText",false,u);let g=h+m;p.setSelectionRange(g,g),a?.(p.value),y(E=>({...E,isOpen:false}));},[a,o]),le=useCallback(s=>{let{scrollTop:p,scrollLeft:h}=s.currentTarget;l.current&&(l.current.scrollTop=p,l.current.scrollLeft=h),se({top:p,left:h});},[]),ie=useCallback(s=>{if(!o.isOpen)return;let{options:p,selectedIndex:h}=o;switch(s.key){case "ArrowDown":s.preventDefault(),y(u=>({...u,selectedIndex:Math.min(h+1,p.length-1)}));break;case "ArrowUp":s.preventDefault(),y(u=>({...u,selectedIndex:Math.max(h-1,0)}));break;case "Enter":case "Tab":s.preventDefault(),p[h]&&v(p[h]);break;case "Escape":s.preventDefault(),y(u=>({...u,isOpen:false}));break}},[o,v]),I=useMemo(()=>{if(!o.isOpen||!i.current)return {top:0,left:0,maxHeight:192,openUpward:false,visible:false};let s=i.current,{triggerStart:p}=o,u=r.slice(0,p).split(`
-`),m=u.length,g=u[u.length-1]?.length||0,E=getComputedStyle(s),N=parseFloat(E.lineHeight)||20,w=parseFloat(E.paddingTop)||0,he=parseFloat(E.paddingLeft)||0,ue=(parseFloat(E.fontSize)||14)*.6,X=getComputedStyle(s.parentElement||s),fe=parseInt(X.getPropertyValue("--hbs-autocomplete-min-width"))||180,j=parseInt(X.getPropertyValue("--hbs-autocomplete-max-height"))||192,k=w+m*N-R.top,A=he+g*ue-R.left,Q=s.clientWidth-fe-10;A>Q&&(A=Math.max(10,Q));let D=s.clientHeight-k-10,G=k-N-10,q=D<120&&G>D,B,C;q?(C=Math.min(j,Math.max(80,G)),B=k-N-C):(C=Math.min(j,Math.max(80,D)),B=k);let be=k>0&&k<s.clientHeight&&A>0&&A<s.clientWidth;return {top:B,left:A,maxHeight:C,openUpward:q,visible:be}},[o,r,R]),ce=useMemo(()=>{if(!b)return {};let s={},p={variable:"--hbs-color-variable",variablePath:"--hbs-color-variable-path",blockKeyword:"--hbs-color-block-keyword",blockParam:"--hbs-color-block-param",helper:"--hbs-color-helper",helperArg:"--hbs-color-helper-arg",hashKey:"--hbs-color-hash-key",hashValue:"--hbs-color-hash-value",literal:"--hbs-color-literal",dataVar:"--hbs-color-data-var",subexprParen:"--hbs-color-subexpr-paren",comment:"--hbs-color-comment",raw:"--hbs-color-raw",brace:"--hbs-color-brace",text:"--hbs-color-text",background:"--hbs-color-background",caret:"--hbs-color-caret",border:"--hbs-color-border",placeholder:"--hbs-color-placeholder"};for(let[h,u]of Object.entries(p)){let m=b[h];m&&(s[u]=m);}return s},[b]);useEffect(()=>{if(!o.isOpen||!f.current)return;let h=f.current.querySelectorAll(".hbs-autocomplete-item")[o.selectedIndex];h&&h.scrollIntoView({block:"nearest"});},[o.selectedIndex,o.isOpen]);let pe=["hbs-editor",t?"hbs-readonly":"",c].filter(Boolean).join(" ");return jsxs("div",{className:pe,style:{...ce,minHeight:typeof _=="number"?`${_}px`:_,...n},children:[jsx("div",{ref:l,className:"hbs-editor-highlight",children:oe}),jsx("textarea",{ref:i,className:"hbs-editor-textarea",value:r,onChange:ae,onKeyDown:ie,onScroll:le,placeholder:"",readOnly:t,spellCheck:false,autoCapitalize:"off",autoComplete:"off",autoCorrect:"off"}),x&&o.isOpen&&I.visible&&jsx("div",{ref:f,className:"hbs-autocomplete",style:{top:I.top,left:I.left,maxHeight:I.maxHeight},children:o.options.map((s,p)=>jsx("button",{type:"button",className:`hbs-autocomplete-item ${p===o.selectedIndex?"hbs-selected":""}`,onClick:()=>v(s),onMouseEnter:()=>y(h=>({...h,selectedIndex:p})),children:s},s))})]})}function _e({content:r,className:a}){if(!r)return null;let e=L(r);return jsx("span",{className:a,children:e.map(t=>jsx("span",{className:`hbs-token-${t.type}`,children:t.value},t.start))})}export{re as HandlebarsEditor,_e as HandlebarsHighlight,re as default,U as extract,Pe as interpolate,L as tokenize};
+import {useRef,useId,useState,useMemo,useCallback,useEffect}from'react';import ne from'handlebars';import {createPortal}from'react-dom';import {jsx,jsxs,Fragment}from'react/jsx-runtime';var ce=ne.Parser,H=ce.lexer,Te=ce.terminals_,Ne=new Set(["OPEN_BLOCK","OPEN_INVERSE","OPEN_INVERSE_CHAIN","OPEN_ENDBLOCK"]),Ce=new Set(["OPEN","OPEN_UNESCAPED"]),Re=new Set(["OPEN_PARTIAL","OPEN_PARTIAL_BLOCK"]),Ie=new Set(["OPEN","OPEN_UNESCAPED","OPEN_BLOCK","OPEN_INVERSE","OPEN_INVERSE_CHAIN","OPEN_ENDBLOCK","OPEN_PARTIAL","OPEN_PARTIAL_BLOCK"]),Le=new Set(["CLOSE","CLOSE_UNESCAPED","CLOSE_RAW_BLOCK","END_RAW_BLOCK"]),_e=new Set(["ID","STRING","NUMBER","BOOLEAN","DATA","OPEN_SEXPR","UNDEFINED","NULL"]),pe=t=>Ne.has(t),ue=t=>Ce.has(t),fe=t=>Re.has(t),ve=t=>Ie.has(t),we=t=>Le.has(t),De=t=>_e.has(t),Be={CONTENT:"text",COMMENT:"comment",OPEN:"brace",CLOSE:"brace",OPEN_UNESCAPED:"brace",CLOSE_UNESCAPED:"brace",OPEN_RAW_BLOCK:"brace",CLOSE_RAW_BLOCK:"brace",END_RAW_BLOCK:"brace",OPEN_BLOCK:"brace",OPEN_INVERSE:"brace",OPEN_INVERSE_CHAIN:"brace",OPEN_ENDBLOCK:"brace",OPEN_PARTIAL:"brace",OPEN_PARTIAL_BLOCK:"brace",OPEN_SEXPR:"subexpr-paren",CLOSE_SEXPR:"subexpr-paren",OPEN_BLOCK_PARAMS:"block-keyword",CLOSE_BLOCK_PARAMS:"block-keyword",INVERSE:"block-keyword",ID:"variable",STRING:"literal",NUMBER:"literal",BOOLEAN:"literal",UNDEFINED:"literal",NULL:"literal",DATA:"data-var",SEP:"brace",EQUALS:"brace"};function le(t,n,o){let e=0;for(let r=0;r<n-1&&r<t.length;r++)e+=t[r].length+1;return e+o}function He(t){let n=[],o=t.split(`
+`);H.setInput(t);try{for(let e=H.lex();e!==H.EOF;e=H.lex()){let r=Te[e]||"UNKNOWN",s=H.yylloc;n.push({type:r,text:H.yytext,start:le(o,s.first_line,s.first_column),end:le(o,s.last_line,s.last_column)});}}catch{}return n}function Me(t){return t.map(n=>n.type==="ID"&&n.text==="."?{...n,type:"SEP"}:n.type==="ID"&&n.text==="="?{...n,type:"EQUALS"}:n)}function Ve(t){let n=[],o=null,e=false,r=false,s=0;for(let l=0;l<t.length;l++){let i=t[l],d=t[l-1];ve(i.type)?(pe(i.type)?o=i.type==="OPEN_ENDBLOCK"?"block-close":"block-open":fe(i.type)?o="partial":ue(i.type)&&(o="mustache"),r=false,s=0):we(i.type)&&(o=null,r=false,s=0),i.type==="OPEN_BLOCK_PARAMS"?e=true:i.type==="CLOSE_BLOCK_PARAMS"&&(e=false),i.type==="SEP"?s++:i.type==="ID"&&d?.type!=="SEP"&&d?.type!=="DATA"&&(s=0);let O=false;if(i.type==="ID"){if(s===0)O=r;else for(let k=l-1;k>=0;k--)if(t[k].type==="ID"&&n[k]?.context.pathRootAfterHelper!==void 0){let x=t[k-1];if(x?.type!=="SEP"&&x?.type!=="DATA"){O=n[k].context.pathRootAfterHelper;break}}}n.push({...i,context:{type:o,isInBlockParams:e,pathRootAfterHelper:O}}),i.type==="ID"&&s===0&&!e&&d?.type!=="EQUALS"&&d?.type!=="DATA"&&(r=true);}return n}function Ke(t,n,o){let{context:e}=t;return t.text==="this"?"data-var":e.isInBlockParams?"block-param":o?.type==="EQUALS"?"hash-key":n?.type==="EQUALS"?"hash-value":n?.type==="DATA"?"data-var":n?.type==="SEP"?e.pathRootAfterHelper?"helper-arg":"variable-path":Ue(t,n,o)}function Ue(t,n,o){let{context:e}=t;return e.type==="block-open"||e.type==="block-close"?pe(n?.type??"")?"block-keyword":"helper-arg":e.type==="partial"?fe(n?.type??"")?"helper":"helper-arg":n?.type==="OPEN_SEXPR"?"helper":e.type==="mustache"?ue(n?.type??"")?o?.type==="SEP"?"variable":o&&De(o.type)?"helper":"variable":"helper-arg":"variable"}function We(t){return t.map((n,o)=>{let e=t[o-1],r=t[o+1],s;return n.type==="ID"?s=Ke(n,e,r):s=Be[n.type]||"text",{token:n,highlightType:s}})}function ze(t,n){let o=[],e=0;for(let r=0;r<n.length;r++){let{token:s,highlightType:l}=n[r];if(s.start>e&&o.push({type:"text",value:t.slice(e,s.start),start:e,end:s.start}),s.type==="DATA"){let i=n[r+1];if(i?.token.type==="ID"&&i.token.start===s.end){o.push({type:"data-var",value:t.slice(s.start,i.token.end),start:s.start,end:i.token.end}),e=i.token.end,r++;continue}}o.push({type:l,value:t.slice(s.start,s.end),start:s.start,end:s.end}),e=s.end;}return e<t.length&&o.push({type:"text",value:t.slice(e),start:e,end:t.length}),o}function M(t){if(!t)return [];let n=He(t),o=Me(n),e=Ve(o),r=We(e);return ze(t,r).filter(l=>l.value.length>0)}var J=["if","unless","each","with"],de=new Set([...J,"lookup","log","this","else"]),he=new Set(["each","with"]),$e=new Set(["ID","STRING","NUMBER","BOOLEAN","DATA","OPEN_SEXPR"]),me=ne.Parser,D=me.lexer,Fe=me.terminals_;function j(t){return de.has(t)||t.startsWith("@")}function Xe(t){return $e.has(t.name)}function q(t,n){let o=[],e=true;for(let r=n;r<t.length;r++){let s=t[r];if(s.name==="EQUALS")break;if(s.name==="ID"){if(!e||t[r+1]?.name==="EQUALS")break;o.push(s.text),e=false;}else if(s.name==="SEP")e=true;else break}return o}function Qe(t,n,o,e){return {name:t,path:n,type:o?"block":n.includes(".")||e?"nested":"simple",blockType:o,context:e}}function Ge(t){let n=[],o=null;for(let e of t)he.has(e.helper)&&e.context&&(o||(o=e.context),n.push(e.helper==="each"?`${e.context}[]`:e.context));return n.length===0||!o?null:{root:o,prefix:`${n.join(".")}.`}}function je(t){let n=[],o=t;for(;o.length>0;){let e=qe(o);if(n.push(...e.expressions),e.consumed===o.length)break;let r=o.slice(e.consumed),s=r.search(/\{\{/);if(s===-1)break;o=r.slice(s);}return {expressions:n}}function qe(t){D.setInput(t),D.conditionStack=["INITIAL"];let n=[],o=0,e=false,r=null,s=[];try{for(let l=D.lex();l!==D.EOF;l=D.lex()){let i=Fe[l],d=D.yytext;if(o=D.yylloc?.last_column??o,!(i==="OPEN_RAW_BLOCK"||i==="CLOSE_RAW_BLOCK"||i==="END_RAW_BLOCK")){if(i==="OPEN"||i==="OPEN_UNESCAPED"){e=!0,r="mustache",s=[];continue}if(i==="OPEN_PARTIAL"||i==="OPEN_PARTIAL_BLOCK"){e=!0,r="partial",s=[];continue}if(i==="OPEN_BLOCK"||i==="OPEN_INVERSE"||i==="OPEN_INVERSE_CHAIN"){e=!0,r="block",s=[];continue}if(i==="OPEN_ENDBLOCK"){e=!0,r="endblock",s=[];continue}if(i==="CLOSE"||i==="CLOSE_UNESCAPED"){if(r){let O=s[0]?.text??null;n.push({type:r,tokens:[...s],helperName:O});}e=!1,s=[];continue}e&&s.push({name:i,text:d});}}return {expressions:n,consumed:t.length}}catch{return {expressions:n,consumed:o}}}function Ye(t,n,o){let e=t.tokens;if(e.length===0||e[0]?.name==="DATA")return;let r=e[0]?.text;if(j(r))F(e,1,n,o);else {let s=q(e,0);if(s.length>0){let i=s.length*2-1,d=e[i];d&&Xe(d)?F(e,i,n,o):Y(s,n,o);}}}function Je(t,n,o){let e=t.tokens,r=e[0]?.text;if(he.has(r)){if(e[1]?.name==="OPEN_SEXPR")return F(e,1,n,o),{helper:r,context:""};{let s=1;for(;s<e.length&&e[s].name!=="ID";)s++;if(s<e.length){let l=q(e,s);return l.length>0&&!j(l[0])&&Y(l,n,o,r),{helper:r,context:l[0]||""}}return {helper:r,context:""}}}else if(de.has(r)){if(e[1]?.name==="OPEN_SEXPR")F(e,1,n,o);else {let s=1;for(;s<e.length&&e[s].name!=="ID";)s++;if(s<e.length){let l=q(e,s);l.length>0&&!j(l[0])&&Y(l,n,o,r);}}return {helper:r,context:""}}return {helper:r,context:""}}function Ze(t,n,o){let e=t.tokens,r=1;for(;r<e.length&&(e[r].name==="SEP"||e[r].name==="ID")&&!(e[r].name==="ID"&&e[r-1]?.name!=="SEP");)r++;F(e,r,n,o);}function F(t,n,o,e){for(let r=n;r<t.length;r++){let s=t[r];if(!(s.name==="OPEN_SEXPR"||s.name==="CLOSE_SEXPR")&&s.name!=="DATA"&&t[r-1]?.name!=="DATA"&&s.name!=="EQUALS"&&!(s.name==="ID"&&t[r+1]?.name==="EQUALS")&&s.name==="ID"&&!j(s.text)){if(t[r-1]?.name==="OPEN_SEXPR")continue;let i=q(t,r);i.length>0&&(Y(i,o,e),r+=i.length*2-2);}}}function Y(t,n,o,e){let r=t[0],s=n.contextPrefix&&n.rootContext?{prefix:n.contextPrefix,root:n.rootContext}:null,l,i;s?(l=s.prefix+t.join("."),i=s.root):(l=t.join("."),i=void 0),o.has(l)||o.set(l,Qe(r,l,e,i));}function et(t,n){return n.type==="endblock"&&t.length>0?t.slice(0,-1):t}function tt(t){let n=new Map,o=[];for(let e of t){let r=Ge(o),s={contextPrefix:r?.prefix??null,rootContext:r?.root??null};if(e.type==="mustache")Ye(e,s,n);else if(e.type==="block"){let l=Je(e,s,n);o=[...o,l];}else e.type==="partial"?Ze(e,s,n):e.type==="endblock"&&(o=et(o,e));}return Array.from(n.values())}function oe(t){let{expressions:n}=je(t),o=tt(n),e=[...new Set(o.filter(r=>!r.context).map(r=>r.name))];return {variables:o,rootVariables:e}}function nt(t,n,o){if(!n)return t;let e=o?.helpers?ne.create():ne;if(o?.helpers)for(let[r,s]of Object.entries(o.helpers))e.registerHelper(r,s);return e.compile(t)(n)}var ot=["direction","boxSizing","width","height","overflowX","overflowY","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","borderStyle","paddingTop","paddingRight","paddingBottom","paddingLeft","fontStyle","fontVariant","fontWeight","fontStretch","fontSize","fontSizeAdjust","lineHeight","fontFamily","textAlign","textTransform","textIndent","textDecoration","letterSpacing","wordSpacing","tabSize","MozTabSize","whiteSpace","wordWrap","wordBreak","overflowWrap"];function be(t,n){let o=getComputedStyle(t),e=document.createElement("div");e.id="hbs-caret-mirror",document.body.appendChild(e);let r=e.style;r.position="absolute",r.visibility="hidden",r.whiteSpace="pre-wrap",r.wordWrap="break-word";for(let x of ot)r[x]=o[x];r.width=`${t.clientWidth}px`,r.height="auto",r.overflow="hidden";let s=t.value.substring(0,n);e.textContent=s;let l=document.createElement("span");l.textContent="\u200B",e.appendChild(l);let i=t.value.substring(n);i&&e.appendChild(document.createTextNode(i));let d=l.getBoundingClientRect(),O=e.getBoundingClientRect(),k={top:d.top-O.top,left:d.left-O.left,height:parseFloat(o.lineHeight)||parseFloat(o.fontSize)*1.2};return document.body.removeChild(e),k}var at=160,se=200,X=10,it=["--hbs-color-text","--hbs-color-border","--hbs-color-placeholder","--hbs-color-focus-ring","--hbs-color-autocomplete-bg","--hbs-color-autocomplete-selected"];function Ee({textareaRef:t,containerRef:n,triggerPosition:o,isOpen:e,children:r,listboxId:s}){let[l,i]=useState({top:void 0,bottom:void 0,left:0,maxHeight:se,visible:false}),[d,O]=useState({});useEffect(()=>{if(!e||!n.current)return;let E=getComputedStyle(n.current),P={};for(let c of it){let u=E.getPropertyValue(c).trim();u&&(P[c]=u);}O(P);},[e,n]);let k=useCallback(()=>{let E=t.current;if(!E||!e){i(m=>({...m,visible:false}));return}let P=E.getBoundingClientRect(),c=be(E,o),u=E.scrollTop,S=E.scrollLeft,N=P.top+c.top-u,V=P.left+c.left-S,g=c.height,K=window.innerHeight,ee=window.innerWidth,R=K-N-g-X,Q=N-X,te=R<120&&Q>R,w,U,W;te?(W=Math.min(se,Math.max(80,Q)),U=K-N+X,w=void 0):(W=Math.min(se,Math.max(80,R)),w=N+g,U=void 0);let z=V,G=ee-at-X;z>G&&(z=Math.max(X,G));let a=c.top-u>=0&&c.top-u<E.clientHeight,p=c.left-S>=0&&c.left-S<E.clientWidth;i({top:w,bottom:U,left:z,maxHeight:W,visible:a&&p});},[t,o,e]);if(useEffect(()=>{k();},[k]),useEffect(()=>{if(!e)return;let E=()=>{k();};return window.addEventListener("scroll",E,true),window.addEventListener("resize",E),()=>{window.removeEventListener("scroll",E,true),window.removeEventListener("resize",E);}},[e,k]),!e||!l.visible)return null;let x={top:l.top,bottom:l.bottom,left:l.left,maxHeight:l.maxHeight,...d};return createPortal(jsx("div",{id:s,role:"listbox","aria-label":"Autocomplete suggestions",className:"hbs-autocomplete-portal",style:x,children:r}),document.body)}var ut=["this","@index","@first","@last","@key"],ft=["@root"];function dt(t,n){if(!n)return "prefix";let o=t.toLowerCase(),e=n.toLowerCase();return o===e?"exact":o.startsWith(e)?"prefix":o.includes(e)?"partial":"none"}function ht(t,n,o,e,r){let s=[],l=new Set,i=r.lastIndexOf("."),d=i!==-1;d?r.slice(0,i+1):"";let k=d?r.slice(i+1):r,x=(c,u)=>{if(l.has(c))return;let S=dt(c,k);S!=="none"&&(l.add(c),s.push({option:{value:c,type:u},matchType:S}));};if(d){let c=r.slice(0,i).replace(/\[\]$/,"");n.forEach(u=>{let S=u.path.replace(/\[\]/g,"");if(S.startsWith(`${c}.`)){let V=S.slice(c.length+1).split(".")[0];x(V,"variable");}});}else {if(!o){for(let u of J)x(`#${u}`,"block-open");for(let u of J)x(`/${u}`,"block-close");x("else","block-close");}for(let u of t)x(u,"helper");if(e){if(e.isEach)for(let u of ut)x(u,"data-var");for(let u of e.blockParams)x(u,"variable");for(let u of ft)x(u,"data-var");}let c=new Set;for(let u of n){let S=u.path.split(".")[0].replace("[]","");c.add(S);}for(let u of c)x(u,"variable");}let E={"data-var":0,variable:1,helper:2,"block-open":3,"block-close":4},P={exact:0,prefix:1,partial:2,none:3};return s.sort((c,u)=>{let S=P[c.matchType]-P[u.matchType];if(S!==0)return S;let N=E[c.option.type]-E[u.option.type];return N!==0?N:c.option.value.localeCompare(u.option.value)}),s.map(c=>c.option)}function mt(t,n){let o=t.slice(0,n),e=[],r=/\{\{#(each|with)\s+([^\s}]+)(?:\s+as\s*\|([^|]+)\|)?|\{\{\/(each|with)\}\}/g;for(let s of o.matchAll(r))if(s[1]){let l=s[1],i=s[2],O=(s[3]||"").split(/\s+/).filter(Boolean);e.push({type:l,variable:i,blockParams:O,isEach:l==="each"});}else if(s[4]){let l=s[4];for(let i=e.length-1;i>=0;i--)if(e[i].type===l){e.splice(i,1);break}}return e.length>0?e[e.length-1]:null}function bt(t,n){let o=t.slice(0,n),e=o.lastIndexOf("{{!--");if(e!==-1&&o.slice(e).indexOf("--}}")===-1)return  true;let r=o.lastIndexOf("{{!");if(r!==-1){let s=o.slice(r);if(!s.startsWith("{{!--")&&s.indexOf("}}")===-1)return  true}return  false}function xt(t,n){let o=t.slice(0,n),e=t.slice(n),r=o.lastIndexOf("{{");if(r===-1||o.slice(r).includes("}}"))return  false;let l=e.indexOf("}}");return l===-1?false:!e.slice(0,l).includes("{{")}function ye({value:t,onChange:n,placeholder:o="Enter template...",readOnly:e=false,className:r="",style:s,theme:l,customHelpers:i=[],autocomplete:d=true,minHeight:O=100}){let k=useRef(null),x=useRef(null),E=useRef(null),P=useId(),[c,u]=useState({isOpen:false,options:[],selectedIndex:0,triggerStart:0,filterText:"",isRaw:false,contextPath:null}),S=useMemo(()=>oe(t).variables.map(p=>({path:p.path,context:p.context})),[t]),N=useMemo(()=>M(t),[t]),V=useMemo(()=>t?N.map(a=>a.type==="text"?a.value:jsx("span",{className:`hbs-token-${a.type}`,children:a.value},a.start)):jsx("span",{className:"hbs-editor-placeholder",children:o}),[N,t,o]),g=useCallback(()=>{u(a=>({...a,isOpen:false}));},[]),K=useCallback((a,p)=>{if(!d||e){g();return}if(bt(a,p)||xt(a,p)){g();return}let m=a.slice(0,p).match(/(\{\{\{?)([#/]?[\w.@]*)$/);if(!m){g();return}let y=m[1],f=m[2]||"",C=p-f.length,b=y==="{{{";if(f.includes("}")){g();return}let T=mt(a,p),A=ht(i,S,b,T,f);if(A.length===0){g();return}u({isOpen:true,options:A,selectedIndex:0,triggerStart:C,filterText:f,isRaw:b,contextPath:T});},[d,e,i,S,g]),ee=useCallback(a=>{let p=a.target.value;n?.(p),K(p,a.target.selectionStart);},[n,K]),R=useCallback(a=>{let p=x.current;if(!p)return;let{triggerStart:h,filterText:m,isRaw:y}=c,f=y?"}}}":"}}",C=m.lastIndexOf("."),b=C!==-1?m.slice(0,C+1):"",T,A;if(a.type==="block-open"&&!y){let I=a.value.slice(1);T=`${a.value} }}{{/${I}}}`,A=a.value.length+1;}else a.type!=="block-close"&&a.value!=="else"?(T=`${b}${a.value}${f}`,A=T.length):(T=`${a.value}${f}`,A=T.length);p.focus(),p.setSelectionRange(h,p.selectionStart),document.execCommand("insertText",false,T);let B=h+A;p.setSelectionRange(B,B),n?.(p.value),g();},[c,n,g]),Q=useCallback(a=>{let{scrollTop:p,scrollLeft:h}=a.currentTarget;E.current&&(E.current.scrollTop=p,E.current.scrollLeft=h);},[]),te=useCallback(a=>{document.querySelector(".hbs-autocomplete-portal")?.contains(a.relatedTarget)||g();},[g]),w=useCallback(()=>{let a=x.current;if(!a||!c.isOpen)return;let p=a.selectionStart;t.slice(0,p).match(/(\{\{\{?)([#/]?[\w.@]*)$/)||g();},[c.isOpen,t,g]),U=useCallback(a=>{let p=a.currentTarget;if(a.key==="Tab"){if(c.isOpen){a.preventDefault();let C=c.options[c.selectedIndex];C&&R(C);return}a.preventDefault();let{selectionStart:f}=p;if(a.shiftKey){let b=t.slice(0,f).lastIndexOf(`
+`)+1,A=t.slice(b,f).match(/^(\t| {2})/);if(A){let B=A[1].length,I=t.slice(0,b)+t.slice(b+B);n?.(I);let L=Math.max(b,f-B);setTimeout(()=>p.setSelectionRange(L,L),0);}}else document.execCommand("insertText",false,"	"),n?.(p.value);return}if((a.metaKey||a.ctrlKey)&&(a.key==="z"||a.key==="y")||!c.isOpen)return;let{options:h,selectedIndex:m}=c,y=8;switch(a.key){case "ArrowDown":a.preventDefault(),u(f=>({...f,selectedIndex:Math.min(m+1,h.length-1)}));break;case "ArrowUp":a.preventDefault(),u(f=>({...f,selectedIndex:Math.max(m-1,0)}));break;case "Home":a.preventDefault(),u(f=>({...f,selectedIndex:0}));break;case "End":a.preventDefault(),u(f=>({...f,selectedIndex:h.length-1}));break;case "PageDown":a.preventDefault(),u(f=>({...f,selectedIndex:Math.min(m+y,h.length-1)}));break;case "PageUp":a.preventDefault(),u(f=>({...f,selectedIndex:Math.max(m-y,0)}));break;case "Enter":a.preventDefault(),h[m]&&R(h[m]);break;case "Escape":a.preventDefault(),g();break;case "ArrowLeft":case "ArrowRight":setTimeout(()=>w(),0);break}},[c,R,g,w,t,n]),W=useMemo(()=>{if(!l)return {};let a={},p={variable:"--hbs-color-variable",variablePath:"--hbs-color-variable-path",blockKeyword:"--hbs-color-block-keyword",blockParam:"--hbs-color-block-param",helper:"--hbs-color-helper",helperArg:"--hbs-color-helper-arg",hashKey:"--hbs-color-hash-key",hashValue:"--hbs-color-hash-value",literal:"--hbs-color-literal",dataVar:"--hbs-color-data-var",subexprParen:"--hbs-color-subexpr-paren",comment:"--hbs-color-comment",raw:"--hbs-color-raw",brace:"--hbs-color-brace",text:"--hbs-color-text",background:"--hbs-color-background",caret:"--hbs-color-caret",border:"--hbs-color-border",placeholder:"--hbs-color-placeholder"};for(let[h,m]of Object.entries(p)){let y=l[h];y&&(a[m]=y);}return a},[l]);useEffect(()=>{if(!c.isOpen)return;let a=document.querySelector(".hbs-autocomplete-portal");if(!a)return;let h=a.querySelectorAll(".hbs-autocomplete-item")[c.selectedIndex];h&&h.scrollIntoView({block:"nearest"});},[c.selectedIndex,c.isOpen]),useEffect(()=>{if(!c.isOpen)return;let a=k.current,p=m=>{let y=m.target;document.querySelector(".hbs-autocomplete-portal")?.contains(y)||a&&!a.contains(y)&&g();},h=m=>{let y=m.target;document.querySelector(".hbs-autocomplete-portal")?.contains(y)||a?.contains(y)&&y!==x.current&&g();};return document.addEventListener("mousedown",p),a?.addEventListener("mousedown",h),()=>{document.removeEventListener("mousedown",p),a?.removeEventListener("mousedown",h);}},[c.isOpen,g]);let z=useCallback((a,p)=>{let{filterText:h,selectedIndex:m}=c,y=p===m,f=h.lastIndexOf("."),C=f!==-1?h.slice(f+1):h,b=a.value;(a.type==="block-open"&&b.startsWith("#")||a.type==="block-close"&&b.startsWith("/")||a.type==="data-var"&&b.startsWith("@"))&&(b=b.slice(1));let T,A=C.toLowerCase().replace(/^[#/@]/,""),I=b.toLowerCase().indexOf(A);if(A.length>0&&I!==-1){let $=b.slice(0,I),Se=b.slice(I,I+A.length),Ae=b.slice(I+A.length);T=jsxs(Fragment,{children:[$,jsx("span",{className:"hbs-autocomplete-match",children:Se}),Ae]});}else T=b;let L="";switch(a.type){case "block-open":L="#";break;case "block-close":L="/";break;case "data-var":L="@";break;case "helper":L="\u0192";break;case "variable":L="\xB7";break}let Oe=jsx("span",{className:"hbs-autocomplete-type",children:L});return jsxs("button",{id:`${P}-option-${p}`,type:"button",role:"option","aria-selected":y,className:`hbs-autocomplete-item hbs-autocomplete-${a.type} ${y?"hbs-selected":""}`,onMouseDown:$=>{$.preventDefault(),R(a);},onMouseEnter:()=>u($=>({...$,selectedIndex:p})),children:[Oe,jsx("span",{className:"hbs-autocomplete-value",children:T})]},a.value)},[c,R,P]),G=["hbs-editor",e?"hbs-readonly":"",r].filter(Boolean).join(" ");return jsxs("div",{ref:k,className:G,style:{...W,minHeight:typeof O=="number"?`${O}px`:O,...s},children:[jsx("div",{ref:E,className:"hbs-editor-highlight",children:V}),jsx("textarea",{ref:x,className:"hbs-editor-textarea",value:t,onChange:ee,onKeyDown:U,onScroll:Q,onBlur:te,onSelect:w,placeholder:"",readOnly:e,spellCheck:false,autoCapitalize:"off",autoComplete:"off",autoCorrect:"off",role:"combobox","aria-haspopup":"listbox","aria-expanded":d&&c.isOpen,"aria-controls":P,"aria-activedescendant":d&&c.isOpen&&c.options[c.selectedIndex]?`${P}-option-${c.selectedIndex}`:void 0}),d&&jsx(Ee,{textareaRef:x,containerRef:k,triggerPosition:c.triggerStart,isOpen:c.isOpen,listboxId:P,children:c.options.map((a,p)=>z(a,p))})]})}function gt({content:t,className:n}){if(!t)return null;let o=M(t);return jsx("span",{className:n,children:o.map(e=>jsx("span",{className:`hbs-token-${e.type}`,children:e.value},e.start))})}export{ye as HandlebarsEditor,gt as HandlebarsHighlight,ye as default,oe as extract,nt as interpolate,M as tokenize};

package/dist/styles.css

@@ -1,52 +1,43 @@
 /* Handlebars Editor - Default Theme */
 
 .hbs-editor {
-  /* Colors - customize these CSS variables */
-  --hbs-color-text: #1f2937;
+  /* Base colors */
+  --hbs-color-text: #24292f;
   --hbs-color-background: #ffffff;
-  --hbs-color-border: #e5e7eb;
-  --hbs-color-caret: #1f2937;
-  --hbs-color-placeholder: #9ca3af;
-  --hbs-color-focus-ring: #3b82f6;
-
-  /* Syntax highlighting colors */
-  --hbs-color-variable: #3b82f6;
-  --hbs-color-variable-path: #06b6d4;
-  --hbs-color-block-keyword: #a855f7;
-  --hbs-color-block-param: #3b82f6;
-  --hbs-color-helper: #f59e0b;
-  --hbs-color-helper-arg: #3b82f6;
-  --hbs-color-hash-key: #ec4899;
-  --hbs-color-hash-value: #3b82f6;
-  --hbs-color-literal: #16a34a;
-  --hbs-color-data-var: #f43f5e;
+  --hbs-color-border: #d1d5db;
+  --hbs-color-caret: #24292f;
+  --hbs-color-placeholder: #6b7280;
+  --hbs-color-focus-ring: #2563eb;
+
+  /* Syntax highlighting - balanced, readable palette */
+  --hbs-color-variable: #0550ae;
+  --hbs-color-variable-path: #0550ae;
+  --hbs-color-block-keyword: #8250df;
+  --hbs-color-block-param: #0550ae;
+  --hbs-color-helper: #953800;
+  --hbs-color-helper-arg: #0550ae;
+  --hbs-color-hash-key: #0550ae;
+  --hbs-color-hash-value: #0a3069;
+  --hbs-color-literal: #0a3069;
+  --hbs-color-data-var: #cf222e;
   --hbs-color-subexpr-paren: #6b7280;
-  --hbs-color-comment: #9ca3af;
-  --hbs-color-raw: #f97316;
-  --hbs-color-brace: #6b7280;
-  --hbs-color-error: #ef4444;
-  --hbs-color-error-bg: rgba(239, 68, 68, 0.1);
+  --hbs-color-comment: #6b7280;
+  --hbs-color-raw: #953800;
+  --hbs-color-brace: #9ca3af;
+  --hbs-color-error: #cf222e;
+  --hbs-color-error-bg: rgba(207, 34, 46, 0.1);
 
-  /* Autocomplete colors */
+  /* Autocomplete */
   --hbs-color-autocomplete-bg: #ffffff;
-  --hbs-color-autocomplete-border: #e5e7eb;
   --hbs-color-autocomplete-selected: #f3f4f6;
-  --hbs-color-autocomplete-hover: #f9fafb;
-
-  /* Autocomplete dimensions */
-  --hbs-autocomplete-min-width: 180px;
-  --hbs-autocomplete-max-height: 192px;
 
-  /* Error bar colors */
-  --hbs-color-error-bar-bg: rgba(239, 68, 68, 0.1);
-  --hbs-color-error-bar-border: rgba(239, 68, 68, 0.5);
-
-  /* Spacing */
+  /* Dimensions */
+  --hbs-autocomplete-min-width: 160px;
+  --hbs-autocomplete-max-height: 200px;
   --hbs-padding: 12px;
   --hbs-font-size: 14px;
-  --hbs-line-height: 1.5;
-  --hbs-font-family:
-    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  --hbs-line-height: 1.6;
+  --hbs-font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
   --hbs-border-radius: 6px;
   --hbs-tab-size: 2;
 
@@ -63,20 +54,34 @@
 
 /* Dark theme */
 .hbs-editor.hbs-theme-dark {
-  --hbs-color-text: #f9fafb;
-  --hbs-color-background: #1f2937;
-  --hbs-color-border: #374151;
-  --hbs-color-caret: #f9fafb;
-  --hbs-color-placeholder: #6b7280;
-  --hbs-color-autocomplete-bg: #1f2937;
-  --hbs-color-autocomplete-border: #374151;
-  --hbs-color-autocomplete-selected: #374151;
-  --hbs-color-autocomplete-hover: #4b5563;
-  --hbs-color-autocomplete-text: #f9fafb;
-}
+  --hbs-color-text: #e6edf3;
+  --hbs-color-background: #0d1117;
+  --hbs-color-border: #30363d;
+  --hbs-color-caret: #e6edf3;
+  --hbs-color-placeholder: #6e7681;
+  --hbs-color-focus-ring: #58a6ff;
+
+  /* Syntax - GitHub dark inspired */
+  --hbs-color-variable: #79c0ff;
+  --hbs-color-variable-path: #79c0ff;
+  --hbs-color-block-keyword: #d2a8ff;
+  --hbs-color-block-param: #79c0ff;
+  --hbs-color-helper: #ffa657;
+  --hbs-color-helper-arg: #79c0ff;
+  --hbs-color-hash-key: #79c0ff;
+  --hbs-color-hash-value: #a5d6ff;
+  --hbs-color-literal: #a5d6ff;
+  --hbs-color-data-var: #ff7b72;
+  --hbs-color-subexpr-paren: #6e7681;
+  --hbs-color-comment: #6e7681;
+  --hbs-color-raw: #ffa657;
+  --hbs-color-brace: #6e7681;
+  --hbs-color-error: #f85149;
+  --hbs-color-error-bg: rgba(248, 81, 73, 0.15);
 
-.hbs-editor.hbs-theme-dark .hbs-autocomplete-item {
-  color: var(--hbs-color-autocomplete-text, #f9fafb);
+  /* Autocomplete */
+  --hbs-color-autocomplete-bg: #161b22;
+  --hbs-color-autocomplete-selected: #30363d;
 }
 
 /* Highlight layer */
@@ -95,7 +100,6 @@
   color: var(--hbs-color-text);
   tab-size: var(--hbs-tab-size);
   -moz-tab-size: var(--hbs-tab-size);
-  /* Hide scrollbars - scrolling is synced from textarea */
   scrollbar-width: none;
   -ms-overflow-style: none;
 }
@@ -109,7 +113,7 @@
 }
 
 .hbs-editor.hbs-readonly .hbs-editor-highlight {
-  background: rgba(0, 0, 0, 0.03);
+  background: rgba(0, 0, 0, 0.02);
 }
 
 /* Textarea layer */
@@ -132,16 +136,45 @@
   outline: none;
   tab-size: var(--hbs-tab-size);
   -moz-tab-size: var(--hbs-tab-size);
+  scrollbar-width: thin;
+  scrollbar-color: var(--hbs-color-border) transparent;
+}
+
+.hbs-editor-textarea::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+.hbs-editor-textarea::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.hbs-editor-textarea::-webkit-scrollbar-thumb {
+  background: var(--hbs-color-border);
+  border: 2px solid var(--hbs-color-background);
+  border-radius: 5px;
+}
+
+.hbs-editor-textarea::-webkit-scrollbar-thumb:hover {
+  background: var(--hbs-color-placeholder);
+}
+
+.hbs-editor-textarea::-webkit-scrollbar-corner {
+  background: transparent;
 }
 
 .hbs-editor-textarea:focus {
   border-color: var(--hbs-color-focus-ring);
-  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
+}
+
+.hbs-editor.hbs-theme-dark .hbs-editor-textarea:focus {
+  box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15);
 }
 
 .hbs-editor.hbs-readonly .hbs-editor-textarea {
   cursor: default;
-  background: rgba(0, 0, 0, 0.03);
+  background: rgba(0, 0, 0, 0.02);
 }
 
 /* Placeholder */
@@ -153,91 +186,134 @@
 .hbs-token-variable {
   color: var(--hbs-color-variable);
 }
+
 .hbs-token-variable-path {
   color: var(--hbs-color-variable-path);
 }
+
 .hbs-token-block-keyword {
   color: var(--hbs-color-block-keyword);
-  font-weight: 500;
+  font-weight: 600;
 }
+
 .hbs-token-block-param {
   color: var(--hbs-color-block-param);
 }
+
 .hbs-token-helper {
   color: var(--hbs-color-helper);
-  font-weight: 500;
 }
+
 .hbs-token-helper-arg {
   color: var(--hbs-color-helper-arg);
 }
+
 .hbs-token-hash-key {
   color: var(--hbs-color-hash-key);
 }
+
 .hbs-token-hash-value {
   color: var(--hbs-color-hash-value);
 }
+
 .hbs-token-literal {
   color: var(--hbs-color-literal);
 }
+
 .hbs-token-data-var {
   color: var(--hbs-color-data-var);
 }
+
 .hbs-token-subexpr-paren {
   color: var(--hbs-color-subexpr-paren);
-  font-weight: 500;
 }
+
 .hbs-token-comment {
   color: var(--hbs-color-comment);
   font-style: italic;
 }
+
 .hbs-token-raw {
   color: var(--hbs-color-raw);
 }
+
 .hbs-token-brace {
   color: var(--hbs-color-brace);
 }
+
 .hbs-token-error {
   color: var(--hbs-color-error);
   background: var(--hbs-color-error-bg);
   text-decoration: wavy underline var(--hbs-color-error);
 }
 
-/* Autocomplete dropdown */
-.hbs-autocomplete {
-  position: absolute;
-  z-index: 50;
-  min-width: var(--hbs-autocomplete-min-width);
+/* Autocomplete dropdown (portal-based, rendered to document.body) */
+.hbs-autocomplete-portal {
+  position: fixed;
+  z-index: 9999;
+  min-width: 160px;
+  max-width: 240px;
   overflow: auto;
-  border-radius: var(--hbs-border-radius);
-  border: 1px solid var(--hbs-color-autocomplete-border);
-  background: var(--hbs-color-autocomplete-bg);
+  border-radius: 8px;
   padding: 4px;
-  box-shadow:
-    0 4px 6px -1px rgba(0, 0, 0, 0.1),
-    0 2px 4px -2px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+
+  /* Default theme values (can be overridden via inline styles) */
+  --hbs-color-text: #24292f;
+  --hbs-color-border: #d1d5db;
+  --hbs-color-placeholder: #6b7280;
+  --hbs-color-focus-ring: #2563eb;
+  --hbs-color-autocomplete-bg: #ffffff;
+  --hbs-color-autocomplete-selected: #f3f4f6;
+  --hbs-font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+
+  border: 1px solid var(--hbs-color-border);
+  background: var(--hbs-color-autocomplete-bg);
+  font-family: var(--hbs-font-family);
+  color: var(--hbs-color-text);
 }
 
 .hbs-autocomplete-item {
-  display: block;
+  display: flex;
+  align-items: center;
+  gap: 6px;
   width: 100%;
   text-align: left;
   cursor: pointer;
   border-radius: 4px;
-  padding: 6px 8px;
+  padding: 5px 8px;
   font-family: var(--hbs-font-family);
-  font-size: var(--hbs-font-size);
+  font-size: 13px;
   background: transparent;
   border: none;
+  color: var(--hbs-color-text);
 }
 
-.hbs-autocomplete-item:hover {
-  background: var(--hbs-color-autocomplete-hover);
-}
-
+.hbs-autocomplete-item:hover,
 .hbs-autocomplete-item.hbs-selected {
   background: var(--hbs-color-autocomplete-selected);
 }
 
+.hbs-autocomplete-value {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.hbs-autocomplete-match {
+  color: var(--hbs-color-focus-ring);
+  font-weight: 600;
+}
+
+/* Type indicator */
+.hbs-autocomplete-type {
+  flex-shrink: 0;
+  font-size: 11px;
+  color: var(--hbs-color-placeholder);
+  opacity: 0.8;
+}
+
 /* Error bar */
 .hbs-error-bar {
   position: absolute;
@@ -248,10 +324,10 @@
   align-items: center;
   gap: 8px;
   border-radius: var(--hbs-border-radius);
-  border: 1px solid var(--hbs-color-error-bar-border);
-  background: var(--hbs-color-error-bar-bg);
+  border: 1px solid rgba(207, 34, 46, 0.4);
+  background: var(--hbs-color-error-bg);
   padding: 8px 12px;
-  font-size: 14px;
+  font-size: 13px;
   color: var(--hbs-color-error);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "handlebars-editor-react",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "A React component for editing Handlebars templates with syntax highlighting and autocomplete",
   "author": "Dogukan Incesu",
   "license": "MIT",
@@ -24,6 +24,20 @@
   "sideEffects": [
     "*.css"
   ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "check-types": "tsc --noEmit",
+    "lint": "biome lint src/ tests/",
+    "format": "biome format --write src/ tests/",
+    "check": "biome check src/ tests/",
+    "prepublishOnly": "pnpm run build",
+    "example": "pnpm --dir example dev",
+    "example:dist": "pnpm --dir example dev:dist",
+    "example:build": "pnpm --dir example build"
+  },
   "peerDependencies": {
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
@@ -59,18 +73,5 @@
   "bugs": {
     "url": "https://github.com/dogukani/handlebars-editor/issues"
   },
-  "homepage": "https://dogukani.github.io/handlebars-editor",
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "test": "vitest",
-    "test:run": "vitest run",
-    "check-types": "tsc --noEmit",
-    "lint": "biome lint src/ tests/",
-    "format": "biome format --write src/ tests/",
-    "check": "biome check src/ tests/",
-    "example": "pnpm --dir example dev",
-    "example:dist": "pnpm --dir example dev:dist",
-    "example:build": "pnpm --dir example build"
-  }
-}
+  "homepage": "https://dogukani.github.io/handlebars-editor"
+}