handlebars-editor-react 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Dogukan Incesu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,189 @@
+# handlebars-editor-react
+
+[![npm version](https://img.shields.io/npm/v/handlebars-editor-react.svg)](https://www.npmjs.com/package/handlebars-editor-react)
+[![license](https://img.shields.io/npm/l/handlebars-editor-react.svg)](https://github.com/dogukani/handlebars-editor/blob/main/LICENSE)
+[![downloads](https://img.shields.io/npm/dm/handlebars-editor-react.svg)](https://www.npmjs.com/package/handlebars-editor-react)
+
+A React component for editing Handlebars templates with syntax highlighting, autocomplete, and error handling.
+
+**[Live Demo](https://dogukani.github.io/handlebars-editor)**
+
+## Features
+
+- Syntax highlighting for all Handlebars constructs
+- Autocomplete for block helpers and variables
+- Real-time validation with error display
+- Customizable theming via CSS variables
+- TypeScript support
+- Zero dependencies (except React and Handlebars)
+
+## Installation
+
+```bash
+npm install handlebars-editor-react
+```
+
+## Usage
+
+```tsx
+import { HandlebarsEditor } from 'handlebars-editor-react';
+import 'handlebars-editor-react/styles.css';
+
+function App() {
+  const [template, setTemplate] = useState('Hello {{name}}!');
+
+  return (
+    <HandlebarsEditor
+      value={template}
+      onChange={setTemplate}
+      placeholder="Enter your template..."
+    />
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `string` | required | The template content |
+| `onChange` | `(value: string) => void` | - | Called when content changes |
+| `placeholder` | `string` | `"Enter template..."` | Placeholder text |
+| `readOnly` | `boolean` | `false` | Disable editing |
+| `className` | `string` | `""` | Additional CSS class |
+| `style` | `CSSProperties` | - | Inline styles |
+| `theme` | `Partial<ThemeColors>` | - | Custom colors |
+| `customHelpers` | `string[]` | `[]` | Additional helpers for autocomplete |
+| `autocomplete` | `boolean` | `true` | Enable autocomplete |
+| `showErrors` | `boolean` | `true` | Show error bar |
+| `onError` | `(error: ParseError \| null) => void` | - | Error callback |
+| `errorIcon` | `ReactNode` | - | Custom error icon |
+| `minHeight` | `string \| number` | `100` | Minimum editor height |
+
+## Theming
+
+Customize colors using CSS variables or the `theme` prop:
+
+```css
+.hbs-editor {
+  --hbs-color-variable: #3b82f6;
+  --hbs-color-helper: #f59e0b;
+  --hbs-color-block-keyword: #a855f7;
+  --hbs-color-literal: #16a34a;
+  --hbs-color-comment: #9ca3af;
+  --hbs-color-error: #ef4444;
+}
+```
+
+Or via props:
+
+```tsx
+<HandlebarsEditor
+  value={template}
+  theme={{
+    variable: '#3b82f6',
+    helper: '#f59e0b',
+    blockKeyword: '#a855f7',
+  }}
+/>
+```
+
+### Available Theme Colors
+
+- `variable` - Simple variables `{{name}}`
+- `variablePath` - Nested paths `{{person.name}}`
+- `blockKeyword` - Block keywords `#if`, `/each`, `else`
+- `blockParam` - Block parameters
+- `helper` - Helper names `{{uppercase name}}`
+- `helperArg` - Helper arguments
+- `hashKey` - Hash keys `key=`
+- `hashValue` - Hash values
+- `literal` - Strings, numbers, booleans
+- `dataVar` - Data variables `@index`, `@key`
+- `subexprParen` - Subexpression parentheses
+- `comment` - Comments
+- `raw` - Raw output `{{{raw}}}`
+- `brace` - Braces `{{` and `}}`
+- `error` - Error highlighting
+- `text` - Default text color
+- `background` - Editor background
+- `caret` - Cursor color
+- `border` - Border color
+- `placeholder` - Placeholder text color
+
+### Dark Theme
+
+Add the `hbs-theme-dark` class to enable dark mode:
+
+```tsx
+<HandlebarsEditor
+  value={template}
+  className="hbs-theme-dark"
+/>
+```
+
+## Utility Functions
+
+The package also exports utility functions for working with Handlebars templates:
+
+```tsx
+import { extract, tokenize, validate, interpolate } from 'handlebars-editor-react';
+
+// Extract variables from template
+const result = extract('Hello {{name}}, you have {{count}} messages');
+console.log(result.rootVariables); // ['name', 'count']
+
+// Tokenize for custom rendering
+const tokens = tokenize('{{#if show}}content{{/if}}');
+
+// Validate template syntax
+const { isValid, error } = validate('{{#if unclosed');
+
+// Interpolate template with data
+const output = interpolate('Hello {{name}}!', { name: 'World' });
+```
+
+## Supported Handlebars Syntax
+
+- Simple variables: `{{name}}`
+- Nested paths: `{{person.name}}`
+- Block helpers: `{{#if}}`, `{{#each}}`, `{{#with}}`, `{{#unless}}`
+- Else blocks: `{{else}}`
+- Helpers with arguments: `{{link text url}}`
+- Hash arguments: `{{link "text" href=url}}`
+- Subexpressions: `{{helper (inner arg)}}`
+- Raw output: `{{{unescaped}}}`
+- Comments: `{{! comment }}` and `{{!-- block comment --}}`
+- Data variables: `@index`, `@key`, `@first`, `@last`
+- Parent context: `../`
+- Whitespace control: `{{~trim~}}`
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add some amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+### Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Run in development mode
+pnpm dev
+
+# Run tests
+pnpm test
+
+# Build
+pnpm build
+```
+
+## License
+
+MIT - see [LICENSE](LICENSE) for details.

package/dist/index.cjs

@@ -0,0 +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;

package/dist/index.d.cts

@@ -0,0 +1,143 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CSSProperties } from 'react';
+
+/**
+ * Extracted variable/input from a Handlebars template
+ */
+interface ExtractedVariable {
+    /** Root variable name (e.g., "person" for "person.name") */
+    name: string;
+    /** Full path (e.g., "person.name") */
+    path: string;
+    /** Type of variable */
+    type: 'simple' | 'nested' | 'block';
+    /** Block type if this is a block helper parameter */
+    blockType?: 'if' | 'each' | 'with' | 'unless';
+    /** Context path if inside a block (e.g., "items[]" for vars inside #each items) */
+    context?: string;
+}
+/**
+ * Result of extracting variables from a template
+ */
+interface ExtractionResult {
+    /** All extracted variables with full details */
+    variables: ExtractedVariable[];
+    /** Unique root variable names */
+    rootVariables: string[];
+}
+/**
+ * Token types for syntax highlighting
+ */
+type TokenType = 'text' | 'variable' | 'variable-path' | 'block-keyword' | 'block-param' | 'helper' | 'helper-arg' | 'hash-key' | 'hash-value' | 'literal' | 'data-var' | 'subexpr-paren' | 'comment' | 'raw' | 'brace';
+/**
+ * A single token from tokenization
+ */
+interface HighlightToken {
+    type: TokenType;
+    value: string;
+    start: number;
+    end: number;
+}
+/**
+ * Theme colors for syntax highlighting
+ */
+interface ThemeColors {
+    /** Simple variables like {{name}} */
+    variable?: string;
+    /** Nested paths like {{person.name}} */
+    variablePath?: string;
+    /** Block keywords like #if, /each, else */
+    blockKeyword?: string;
+    /** Block parameters */
+    blockParam?: string;
+    /** Helper names like {{uppercase name}} */
+    helper?: string;
+    /** Helper arguments */
+    helperArg?: string;
+    /** Hash keys like key= in {{helper key=value}} */
+    hashKey?: string;
+    /** Hash values */
+    hashValue?: string;
+    /** Literals like "string", 123, true */
+    literal?: string;
+    /** Data variables like @index, @key */
+    dataVar?: string;
+    /** Subexpression parentheses */
+    subexprParen?: string;
+    /** Comments */
+    comment?: string;
+    /** Raw output {{{raw}}} */
+    raw?: string;
+    /** Braces {{ and }} */
+    brace?: string;
+    /** Text color */
+    text?: string;
+    /** Background color */
+    background?: string;
+    /** Caret/cursor color */
+    caret?: string;
+    /** Border color */
+    border?: string;
+    /** Placeholder text color */
+    placeholder?: string;
+}
+/**
+ * Props for the HandlebarsEditor component
+ */
+interface HandlebarsEditorProps {
+    /** Current template value */
+    value: string;
+    /** Called when value changes */
+    onChange?: (value: string) => void;
+    /** Placeholder text when empty */
+    placeholder?: string;
+    /** Whether the editor is read-only */
+    readOnly?: boolean;
+    /** Custom class name */
+    className?: string;
+    /** Inline styles */
+    style?: CSSProperties;
+    /** Theme colors (overrides CSS variables) */
+    theme?: Partial<ThemeColors>;
+    /** Additional helpers to show in autocomplete */
+    customHelpers?: string[];
+    /** Whether to show autocomplete */
+    autocomplete?: boolean;
+    /** Minimum height */
+    minHeight?: string | number;
+}
+/**
+ * Autocomplete state
+ */
+interface AutocompleteState {
+    isOpen: boolean;
+    options: string[];
+    selectedIndex: number;
+    triggerStart: number;
+    filterText: string;
+}
+
+/**
+ * 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 {
+    content: string;
+    className?: string;
+}
+/**
+ * Lightweight inline syntax highlighting for Handlebars content.
+ * Renders colored spans without any wrapper - embed within your own containers.
+ */
+declare function HandlebarsHighlight({ content, className }: HandlebarsHighlightProps): react_jsx_runtime.JSX.Element | null;
+
+declare function tokenize(content: string): HighlightToken[];
+
+declare function extract(content: string): ExtractionResult;
+interface InterpolateOptions {
+    helpers?: Record<string, (...args: unknown[]) => unknown>;
+}
+declare function interpolate(content: string, variables?: Record<string, unknown>, options?: InterpolateOptions): string;
+
+export { type AutocompleteState, type ExtractedVariable, type ExtractionResult, HandlebarsEditor, type HandlebarsEditorProps, HandlebarsHighlight, type HighlightToken, type InterpolateOptions, type ThemeColors, type TokenType, HandlebarsEditor as default, extract, interpolate, tokenize };

package/dist/index.d.ts

@@ -0,0 +1,143 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CSSProperties } from 'react';
+
+/**
+ * Extracted variable/input from a Handlebars template
+ */
+interface ExtractedVariable {
+    /** Root variable name (e.g., "person" for "person.name") */
+    name: string;
+    /** Full path (e.g., "person.name") */
+    path: string;
+    /** Type of variable */
+    type: 'simple' | 'nested' | 'block';
+    /** Block type if this is a block helper parameter */
+    blockType?: 'if' | 'each' | 'with' | 'unless';
+    /** Context path if inside a block (e.g., "items[]" for vars inside #each items) */
+    context?: string;
+}
+/**
+ * Result of extracting variables from a template
+ */
+interface ExtractionResult {
+    /** All extracted variables with full details */
+    variables: ExtractedVariable[];
+    /** Unique root variable names */
+    rootVariables: string[];
+}
+/**
+ * Token types for syntax highlighting
+ */
+type TokenType = 'text' | 'variable' | 'variable-path' | 'block-keyword' | 'block-param' | 'helper' | 'helper-arg' | 'hash-key' | 'hash-value' | 'literal' | 'data-var' | 'subexpr-paren' | 'comment' | 'raw' | 'brace';
+/**
+ * A single token from tokenization
+ */
+interface HighlightToken {
+    type: TokenType;
+    value: string;
+    start: number;
+    end: number;
+}
+/**
+ * Theme colors for syntax highlighting
+ */
+interface ThemeColors {
+    /** Simple variables like {{name}} */
+    variable?: string;
+    /** Nested paths like {{person.name}} */
+    variablePath?: string;
+    /** Block keywords like #if, /each, else */
+    blockKeyword?: string;
+    /** Block parameters */
+    blockParam?: string;
+    /** Helper names like {{uppercase name}} */
+    helper?: string;
+    /** Helper arguments */
+    helperArg?: string;
+    /** Hash keys like key= in {{helper key=value}} */
+    hashKey?: string;
+    /** Hash values */
+    hashValue?: string;
+    /** Literals like "string", 123, true */
+    literal?: string;
+    /** Data variables like @index, @key */
+    dataVar?: string;
+    /** Subexpression parentheses */
+    subexprParen?: string;
+    /** Comments */
+    comment?: string;
+    /** Raw output {{{raw}}} */
+    raw?: string;
+    /** Braces {{ and }} */
+    brace?: string;
+    /** Text color */
+    text?: string;
+    /** Background color */
+    background?: string;
+    /** Caret/cursor color */
+    caret?: string;
+    /** Border color */
+    border?: string;
+    /** Placeholder text color */
+    placeholder?: string;
+}
+/**
+ * Props for the HandlebarsEditor component
+ */
+interface HandlebarsEditorProps {
+    /** Current template value */
+    value: string;
+    /** Called when value changes */
+    onChange?: (value: string) => void;
+    /** Placeholder text when empty */
+    placeholder?: string;
+    /** Whether the editor is read-only */
+    readOnly?: boolean;
+    /** Custom class name */
+    className?: string;
+    /** Inline styles */
+    style?: CSSProperties;
+    /** Theme colors (overrides CSS variables) */
+    theme?: Partial<ThemeColors>;
+    /** Additional helpers to show in autocomplete */
+    customHelpers?: string[];
+    /** Whether to show autocomplete */
+    autocomplete?: boolean;
+    /** Minimum height */
+    minHeight?: string | number;
+}
+/**
+ * Autocomplete state
+ */
+interface AutocompleteState {
+    isOpen: boolean;
+    options: string[];
+    selectedIndex: number;
+    triggerStart: number;
+    filterText: string;
+}
+
+/**
+ * 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 {
+    content: string;
+    className?: string;
+}
+/**
+ * Lightweight inline syntax highlighting for Handlebars content.
+ * Renders colored spans without any wrapper - embed within your own containers.
+ */
+declare function HandlebarsHighlight({ content, className }: HandlebarsHighlightProps): react_jsx_runtime.JSX.Element | null;
+
+declare function tokenize(content: string): HighlightToken[];
+
+declare function extract(content: string): ExtractionResult;
+interface InterpolateOptions {
+    helpers?: Record<string, (...args: unknown[]) => unknown>;
+}
+declare function interpolate(content: string, variables?: Record<string, unknown>, options?: InterpolateOptions): string;
+
+export { type AutocompleteState, type ExtractedVariable, type ExtractionResult, HandlebarsEditor, type HandlebarsEditorProps, HandlebarsHighlight, type HighlightToken, type InterpolateOptions, type ThemeColors, type TokenType, HandlebarsEditor as default, extract, interpolate, tokenize };

package/dist/index.js

@@ -0,0 +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};

package/dist/styles.css

@@ -0,0 +1,268 @@
+/* Handlebars Editor - Default Theme */
+
+.hbs-editor {
+  /* Colors - customize these CSS variables */
+  --hbs-color-text: #1f2937;
+  --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-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);
+
+  /* Autocomplete colors */
+  --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 */
+  --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-border-radius: 6px;
+  --hbs-tab-size: 2;
+
+  position: relative;
+  flex: 1;
+  font-family: var(--hbs-font-family);
+  font-size: var(--hbs-font-size);
+  line-height: var(--hbs-line-height);
+  background-color: var(--hbs-color-background);
+  border-radius: var(--hbs-border-radius);
+  -webkit-text-size-adjust: 100%;
+  overflow: hidden;
+}
+
+/* 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-editor.hbs-theme-dark .hbs-autocomplete-item {
+  color: var(--hbs-color-autocomplete-text, #f9fafb);
+}
+
+/* Highlight layer */
+.hbs-editor-highlight {
+  position: absolute;
+  inset: 0;
+  overflow: auto;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  border-radius: var(--hbs-border-radius);
+  border: 1px solid transparent;
+  background: transparent;
+  padding: var(--hbs-padding);
+  pointer-events: none;
+  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;
+}
+
+.hbs-editor-highlight::-webkit-scrollbar {
+  display: none;
+}
+
+.hbs-editor-highlight code {
+  font-family: inherit;
+}
+
+.hbs-editor.hbs-readonly .hbs-editor-highlight {
+  background: rgba(0, 0, 0, 0.03);
+}
+
+/* Textarea layer */
+.hbs-editor-textarea {
+  position: absolute;
+  inset: 0;
+  resize: none;
+  border-radius: var(--hbs-border-radius);
+  border: 1px solid var(--hbs-color-border);
+  background: transparent;
+  padding: var(--hbs-padding);
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  color: transparent;
+  caret-color: var(--hbs-color-caret);
+  outline: none;
+  tab-size: var(--hbs-tab-size);
+  -moz-tab-size: var(--hbs-tab-size);
+}
+
+.hbs-editor-textarea:focus {
+  border-color: var(--hbs-color-focus-ring);
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+}
+
+.hbs-editor.hbs-readonly .hbs-editor-textarea {
+  cursor: default;
+  background: rgba(0, 0, 0, 0.03);
+}
+
+/* Placeholder */
+.hbs-editor-placeholder {
+  color: var(--hbs-color-placeholder);
+}
+
+/* Token styles */
+.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;
+}
+.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);
+  overflow: auto;
+  border-radius: var(--hbs-border-radius);
+  border: 1px solid var(--hbs-color-autocomplete-border);
+  background: var(--hbs-color-autocomplete-bg);
+  padding: 4px;
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -2px rgba(0, 0, 0, 0.1);
+}
+
+.hbs-autocomplete-item {
+  display: block;
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
+  border-radius: 4px;
+  padding: 6px 8px;
+  font-family: var(--hbs-font-family);
+  font-size: var(--hbs-font-size);
+  background: transparent;
+  border: none;
+}
+
+.hbs-autocomplete-item:hover {
+  background: var(--hbs-color-autocomplete-hover);
+}
+
+.hbs-autocomplete-item.hbs-selected {
+  background: var(--hbs-color-autocomplete-selected);
+}
+
+/* Error bar */
+.hbs-error-bar {
+  position: absolute;
+  right: 8px;
+  bottom: 8px;
+  left: 8px;
+  display: flex;
+  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);
+  padding: 8px 12px;
+  font-size: 14px;
+  color: var(--hbs-color-error);
+}
+
+.hbs-error-bar svg {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+}
+
+.hbs-error-bar span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "handlebars-editor-react",
+  "version": "0.1.0",
+  "description": "A React component for editing Handlebars templates with syntax highlighting and autocomplete",
+  "author": "Dogukan Incesu",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "dependencies": {
+    "handlebars": "^4.7.8"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.3.13",
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^14.0.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "jsdom": "^24.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.0",
+    "vitest": "^1.0.0"
+  },
+  "keywords": [
+    "handlebars",
+    "editor",
+    "syntax-highlighting",
+    "react",
+    "autocomplete",
+    "template"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dogukani/handlebars-editor"
+  },
+  "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"
+  }
+}