@tslite/react 0.1.0

package/dist/full.cjs

@@ -0,0 +1 @@
+'use strict';var search=require('@tslite/codemirror/search'),format=require('@tslite/format'),editor=require('@tslite/editor');function y(t={}){let{dark:s=true,layout:e="inline",mode:o="expression",gutters:n=e==="block",search:i=e==="block",extensions:r=[]}=t;return {layout:e,mode:o,gutters:n,format:o==="program"?format.format:format.formatExpression,features:{chrome:{dark:s},theme:editor.tsliteTokenStyles},extensions:i?[search.searchEditing(),...r]:[...r]}}Object.defineProperty(exports,"searchEditing",{enumerable:true,get:function(){return search.searchEditing}});Object.defineProperty(exports,"format",{enumerable:true,get:function(){return format.format}});Object.defineProperty(exports,"formatExpression",{enumerable:true,get:function(){return format.formatExpression}});Object.defineProperty(exports,"tsliteTokenStyles",{enumerable:true,get:function(){return editor.tsliteTokenStyles}});exports.expressionFieldProps=y;

package/dist/full.d.cts

@@ -0,0 +1,74 @@
+import { Extension } from '@codemirror/state';
+import { U as UseExpressionFieldOptions } from './useExpressionField-CA__y0bO.cjs';
+export { searchEditing } from '@tslite/codemirror/search';
+export { format, formatExpression } from '@tslite/format';
+export { tsliteTokenStyles } from '@tslite/editor';
+import 'react';
+import '@codemirror/view';
+import '@tslite/codemirror';
+import '@tslite/language-service';
+
+/** O que o preset deixa você escolher. Tudo tem padrão. */
+interface PresetOptions {
+    /**
+     * O editor está num tema ESCURO? Padrão: `true`.
+     *
+     * Não muda cor nossa — todas saem de CSS var e já acompanham o seu tema. O que
+     * ele muda é o que o **CodeMirror** faz sozinho: várias regras dele são
+     * declaradas em `&light`/`&dark`, e sem a marca ele aplica as claras. O
+     * sintoma é um editor escuro com a régua de busca e o painel de problemas com
+     * cara de tema claro.
+     */
+    readonly dark?: boolean;
+    /**
+     * Como o campo se apresenta. Padrão: `"inline"`.
+     *
+     * `"block"` é o campo EXPANDIDO (tipicamente num modal): ganha o `Tab` que
+     * indenta, a quebra de linha e — por este preset — a régua de linhas.
+     */
+    readonly layout?: "inline" | "block";
+    /**
+     * O que o código É. Padrão: `"expression"`.
+     *
+     * Decide também qual formatador entra: um programa é reimpresso com `;` e
+     * quebra de statement; uma expressão, não. Injetar o de expressão num programa
+     * faz o `parseExpression` lançar, e o serviço então declara que não sabe
+     * formatar — em silêncio. Foi um defeito real, e é por isso que o preset
+     * escolhe por você.
+     */
+    readonly mode?: "expression" | "program";
+    /** Régua de linhas. Padrão: ligada no `"block"`, desligada no `"inline"`. */
+    readonly gutters?: boolean;
+    /** Busca e `Ctrl+D`. Padrão: ligadas no `"block"`, desligadas no `"inline"`. */
+    readonly search?: boolean;
+    /** Extensões suas, acrescentadas às do preset. */
+    readonly extensions?: readonly Extension[];
+}
+/** As props que o preset resolve — o resto (`value`, `onChange`, `env`) é seu. */
+type PresetProps = Pick<UseExpressionFieldOptions, "layout" | "mode" | "gutters" | "format" | "features" | "extensions">;
+/**
+ * As props de um campo que já nasce certo.
+ *
+ * ```tsx
+ * import { ExpressionInput } from "@tslite/react";
+ * import { expressionFieldProps } from "@tslite/react/full";
+ *
+ * <ExpressionInput
+ *   {...expressionFieldProps()}
+ *   value={v}
+ *   onChange={setV}
+ *   env={env}
+ * />
+ * ```
+ *
+ * O campo EXPANDIDO é o mesmo componente com outra roupa:
+ *
+ * ```tsx
+ * <ExpressionInput {...expressionFieldProps({ layout: "block" })} … />
+ * ```
+ *
+ * Qualquer prop depois do spread vence — é assim que se ajusta sem bifurcar.
+ */
+declare function expressionFieldProps(options?: PresetOptions): PresetProps;
+
+export { type PresetOptions, type PresetProps, expressionFieldProps };

package/dist/full.d.ts

@@ -0,0 +1,74 @@
+import { Extension } from '@codemirror/state';
+import { U as UseExpressionFieldOptions } from './useExpressionField-CA__y0bO.js';
+export { searchEditing } from '@tslite/codemirror/search';
+export { format, formatExpression } from '@tslite/format';
+export { tsliteTokenStyles } from '@tslite/editor';
+import 'react';
+import '@codemirror/view';
+import '@tslite/codemirror';
+import '@tslite/language-service';
+
+/** O que o preset deixa você escolher. Tudo tem padrão. */
+interface PresetOptions {
+    /**
+     * O editor está num tema ESCURO? Padrão: `true`.
+     *
+     * Não muda cor nossa — todas saem de CSS var e já acompanham o seu tema. O que
+     * ele muda é o que o **CodeMirror** faz sozinho: várias regras dele são
+     * declaradas em `&light`/`&dark`, e sem a marca ele aplica as claras. O
+     * sintoma é um editor escuro com a régua de busca e o painel de problemas com
+     * cara de tema claro.
+     */
+    readonly dark?: boolean;
+    /**
+     * Como o campo se apresenta. Padrão: `"inline"`.
+     *
+     * `"block"` é o campo EXPANDIDO (tipicamente num modal): ganha o `Tab` que
+     * indenta, a quebra de linha e — por este preset — a régua de linhas.
+     */
+    readonly layout?: "inline" | "block";
+    /**
+     * O que o código É. Padrão: `"expression"`.
+     *
+     * Decide também qual formatador entra: um programa é reimpresso com `;` e
+     * quebra de statement; uma expressão, não. Injetar o de expressão num programa
+     * faz o `parseExpression` lançar, e o serviço então declara que não sabe
+     * formatar — em silêncio. Foi um defeito real, e é por isso que o preset
+     * escolhe por você.
+     */
+    readonly mode?: "expression" | "program";
+    /** Régua de linhas. Padrão: ligada no `"block"`, desligada no `"inline"`. */
+    readonly gutters?: boolean;
+    /** Busca e `Ctrl+D`. Padrão: ligadas no `"block"`, desligadas no `"inline"`. */
+    readonly search?: boolean;
+    /** Extensões suas, acrescentadas às do preset. */
+    readonly extensions?: readonly Extension[];
+}
+/** As props que o preset resolve — o resto (`value`, `onChange`, `env`) é seu. */
+type PresetProps = Pick<UseExpressionFieldOptions, "layout" | "mode" | "gutters" | "format" | "features" | "extensions">;
+/**
+ * As props de um campo que já nasce certo.
+ *
+ * ```tsx
+ * import { ExpressionInput } from "@tslite/react";
+ * import { expressionFieldProps } from "@tslite/react/full";
+ *
+ * <ExpressionInput
+ *   {...expressionFieldProps()}
+ *   value={v}
+ *   onChange={setV}
+ *   env={env}
+ * />
+ * ```
+ *
+ * O campo EXPANDIDO é o mesmo componente com outra roupa:
+ *
+ * ```tsx
+ * <ExpressionInput {...expressionFieldProps({ layout: "block" })} … />
+ * ```
+ *
+ * Qualquer prop depois do spread vence — é assim que se ajusta sem bifurcar.
+ */
+declare function expressionFieldProps(options?: PresetOptions): PresetProps;
+
+export { type PresetOptions, type PresetProps, expressionFieldProps };

package/dist/full.js

@@ -0,0 +1 @@
+import {searchEditing}from'@tslite/codemirror/search';export{searchEditing}from'@tslite/codemirror/search';import {format,formatExpression}from'@tslite/format';export{format,formatExpression}from'@tslite/format';import {tsliteTokenStyles}from'@tslite/editor';export{tsliteTokenStyles}from'@tslite/editor';function y(t={}){let{dark:s=true,layout:e="inline",mode:o="expression",gutters:n=e==="block",search:i=e==="block",extensions:r=[]}=t;return {layout:e,mode:o,gutters:n,format:o==="program"?format:formatExpression,features:{chrome:{dark:s},theme:tsliteTokenStyles},extensions:i?[searchEditing(),...r]:[...r]}}export{y as expressionFieldProps};

package/dist/index.cjs

@@ -0,0 +1 @@
+'use strict';var o=require('react'),state=require('@codemirror/state'),view=require('@codemirror/view'),commands=require('@codemirror/commands'),codemirror=require('@tslite/codemirror'),editor=require('@tslite/editor'),languageService=require('@tslite/language-service'),jsxRuntime=require('react/jsx-runtime');function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var o__namespace=/*#__PURE__*/_interopNamespace(o);var te={mustache:languageService.mustache,whole:languageService.whole},oe=e=>typeof e=="function"?e:te[e];function P(e){let{env:n,service:i,segmenter:t="mustache",mode:u="expression",profile:c,limits:l,unused:d,format:s}=e;return o__namespace.useMemo(()=>i||(n?editor.createHostService({env:n,segmenter:oe(t),mode:u,...c?{profile:c}:{},...l?{limits:l}:{},...d!==void 0?{unused:d}:{},...s?{format:s}:{}}):null),[i,n,t,u,c,l,d,s])}var me=view.EditorView.theme({".cm-scroller":{overflowX:"auto",overflowY:"hidden"},".cm-content":{padding:"6px 8px"},".cm-line":{padding:"0"},"&.cm-focused":{outline:"none"}}),Ee=view.EditorView.theme({"&":{height:"100%"},".cm-scroller":{overflowY:"auto"},".cm-content":{padding:"8px"},"&.cm-focused":{outline:"none"}}),Y=e=>e.replace(/\r?\n/g," "),ye=(e,n)=>{if(e===false)return [];let i=n==="block"?{}:{tab:false,indentOnInput:false};return codemirror.codeEditing(typeof e=="object"?{...i,...e}:i)},ve=e=>e?codemirror.gutters(typeof e=="object"?e:{}):[];function M(e){let{value:n,onChange:i,layout:t="inline",wrap:u=t==="block",editing:c,gutters:l,readOnly:d=false,placeholder:s,features:y,tooltipParent:E,onTokenAction:A,isTokenActionable:D,definition:k,extensions:W}=e,v=P(e),L=o__namespace.useRef(null),g=o__namespace.useRef(null),[z,I]=o__namespace.useState(null),[X,$]=o__namespace.useState(false),b=o__namespace.useRef({onChange:i,onTokenAction:A,isTokenActionable:D});b.current={onChange:i,onTokenAction:A,isTokenActionable:D};let p=o__namespace.useRef({service:new state.Compartment,layout:new state.Compartment,editable:new state.Compartment,actions:new state.Compartment}).current,C=o__namespace.useCallback(r=>r?codemirror.languageService(r,{theme:editor.tsliteTokenStyles,...E!==null?{tooltipParent:E??(typeof document<"u"?document.body:void 0)}:{},...y}):[],[y,E]),w=o__namespace.useCallback((r,a,S,h)=>[r==="block"?[...a?[view.EditorView.lineWrapping]:[],Ee]:[codemirror.singleLine,me],ye(S,r),ve(h)],[]),H=o__namespace.useCallback(()=>{let r=[];return b.current.onTokenAction&&r.push(codemirror.tokenAction({actionable:a=>b.current.isTokenActionable?.(a)??true,onAction:a=>b.current.onTokenAction?.(a)})),k&&v?.definitionAt&&r.push(codemirror.gotoDefinition(k)),r},[k,v]);o__namespace.useEffect(()=>{if(!L.current)return;let r=new view.EditorView({parent:L.current,state:state.EditorState.create({doc:t==="inline"?Y(n):n,extensions:[commands.history(),p.service.of(C(v)),p.layout.of(w(t,u,c,l)),p.editable.of(view.EditorView.editable.of(!d)),p.actions.of(H()),...s?[view.placeholder(s)]:[],view.keymap.of([...commands.historyKeymap,...commands.defaultKeymap]),view.EditorView.updateListener.of(a=>{if(a.focusChanged&&$(a.view.hasFocus),!a.docChanged)return;a.transactions.some(h=>h.annotation(codemirror.externalChange))||b.current.onChange?.(a.state.doc.toString());}),view.EditorView.contentAttributes.of({"aria-label":s??"expression"}),...W??[]]})});return g.current=r,I(r),()=>{r.destroy(),g.current=null,I(null);}},[]),o__namespace.useEffect(()=>{g.current?.dispatch({effects:p.service.reconfigure(C(v))});},[v,C,p]),o__namespace.useEffect(()=>{g.current?.dispatch({effects:p.layout.reconfigure(w(t,u,c,l))});},[t,u,c,l,w,p]),o__namespace.useEffect(()=>{g.current?.dispatch({effects:p.editable.reconfigure(view.EditorView.editable.of(!d))});},[d,p]),o__namespace.useEffect(()=>{g.current?.dispatch({effects:p.actions.reconfigure(H())});},[H,p]),o__namespace.useEffect(()=>{let r=g.current;if(!r)return;let a=t==="inline"?Y(n):n;if(a===r.state.doc.toString())return;let{anchor:S,head:h}=r.state.selection.main,U=J=>Math.min(J,a.length);r.dispatch({changes:{from:0,to:r.state.doc.length,insert:a},selection:{anchor:U(S),head:U(h)},annotations:codemirror.externalChange.of(true)});},[n,t]);let q=o__namespace.useCallback(()=>g.current?.focus(),[]);return {ref:L,view:z,focused:X,service:v,focus:q}}var G=o__namespace.createContext(null);function K(){let e=o__namespace.useContext(G);if(!e)throw new Error("useFieldContext must be used inside <ExpressionField.Root>");return e}var be=["value","onChange","layout","wrap","editing","gutters","readOnly","placeholder","features","tooltipParent","onTokenAction","isTokenActionable","definition","extensions","env","service","segmenter","mode","profile","limits","unused","format"];var N=o__namespace.forwardRef(function(n,i){let{children:t,...u}=n,c={},l={};for(let[s,y]of Object.entries(u))(be.includes(s)?c:l)[s]=y;let d=M(c);return jsxRuntime.jsx(G.Provider,{value:d,children:jsxRuntime.jsx("div",{ref:i,...l,children:typeof t=="function"?t(d):t})})}),j=o__namespace.forwardRef(function(n,i){let t=K();return jsxRuntime.jsx("div",{ref:t.ref,...n})}),B=o__namespace.forwardRef(function({children:n,...i},t){return jsxRuntime.jsx("button",{ref:t,type:"button",...i,children:n})}),R={Root:N,Editor:j,ExpandTrigger:B};var f={fg:"var(--foreground, #cccccc)",mutedFg:"var(--muted-foreground, #8b8b8b)",border:"var(--border, #2b2b2b)",ring:"var(--ring, #0078d4)",input:"var(--input, transparent)",destructive:"var(--destructive, #f14c4c)",font:"var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace)"},he=["--foreground","--muted-foreground","--border","--ring","--input","--destructive","--font-mono","--muted","--popover","--popover-foreground","--primary","--primary-foreground","--secondary","--accent"];var Re=jsxRuntime.jsx("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:jsxRuntime.jsx("path",{d:"M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"})});function Fe({invalid:e,className:n,style:i,onExpand:t,expandIcon:u,multiline:c,layout:l,...d}){let s=l??(c?"block":"inline");return jsxRuntime.jsx(R.Root,{...d,layout:s,className:n,children:y=>jsxRuntime.jsxs("div",{style:{position:"relative",border:`1px solid ${e?f.destructive:y.focused?f.ring:f.border}`,borderRadius:"6px",backgroundColor:f.input,color:f.fg,fontFamily:f.font,fontSize:"13px",overflow:"hidden",...s==="block"?{height:"100%",display:"flex",flexDirection:"column"}:{},...i},children:[jsxRuntime.jsx(R.Editor,{style:s==="block"?{flex:1,minHeight:0}:{paddingRight:t?"24px":void 0}}),t&&jsxRuntime.jsx(R.ExpandTrigger,{onClick:t,"aria-label":"Expandir",title:"Expandir",onMouseEnter:E=>E.currentTarget.style.opacity="1",onMouseLeave:E=>E.currentTarget.style.opacity="0.55",style:{position:"absolute",top:s==="block"?"6px":"50%",right:"4px",transform:s==="block"?void 0:"translateY(-50%)",display:"flex",alignItems:"center",justifyContent:"center",width:"20px",height:"20px",padding:0,lineHeight:0,border:"none",borderRadius:"4px",background:f.input,color:f.mutedFg,cursor:"pointer",opacity:.55},children:u??Re})]})})}exports.CSS_VARS=he;exports.ExpressionField=R;exports.ExpressionFieldEditor=j;exports.ExpressionFieldExpandTrigger=B;exports.ExpressionFieldRoot=N;exports.ExpressionInput=Fe;exports.V=f;exports.useExpressionField=M;exports.useFieldContext=K;exports.useLanguageService=P;

package/dist/index.d.cts

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import { U as UseExpressionFieldOptions, E as ExpressionFieldHandle } from './useExpressionField-CA__y0bO.cjs';
+export { F as FieldLayout, L as LanguageServiceOptions, S as SegmenterOption, u as useExpressionField, a as useLanguageService } from './useExpressionField-CA__y0bO.cjs';
+export { TokenActionTarget } from '@tslite/codemirror';
+import '@codemirror/state';
+import '@codemirror/view';
+import '@tslite/language-service';
+import '@tslite/editor';
+
+interface ExpressionInputProps extends UseExpressionFieldOptions {
+    /** Borda destrutiva — ex.: um erro de validação que veio de fora. */
+    readonly invalid?: boolean;
+    /** Classe extra no container. */
+    readonly className?: string;
+    /** Estilo extra no container (mesclado por cima do padrão). */
+    readonly style?: React.CSSProperties;
+    /**
+     * Ícone de EXPANDIR no canto → chama isto ao clicar (o consumidor abre um
+     * modal maior, estilo n8n). Sem esta prop, sem ícone.
+     */
+    readonly onExpand?: () => void;
+    /** O ícone do botão. Padrão: um SVG inline (sem dependência de lib de ícone). */
+    readonly expandIcon?: React.ReactNode;
+    /**
+     * @deprecated Use `layout="block"`. Mantido porque a prop antiga era booleana
+     * e trocá-la de uma vez quebraria quem já a usa.
+     */
+    readonly multiline?: boolean;
+}
+/**
+ * O campo de expressão pronto para uso.
+ *
+ * ```tsx
+ * <ExpressionInput value={v} onChange={setV} env={env} />                 // "Olá {{ user.name }}"
+ * <ExpressionInput value={v} onChange={setV} env={env} segmenter="whole" /> // "foo.bar >= 32"
+ * <ExpressionInput value={v} onChange={setV} env={env} layout="block" />    // o modal expandido
+ * ```
+ */
+declare function ExpressionInput({ invalid, className, style, onExpand, expandIcon, multiline, layout, ...options }: ExpressionInputProps): React.JSX.Element;
+
+/**
+ * O campo em volta — para um botão, um badge, um contador saberem o estado
+ * (foco, `view`, serviço) sem receberem props.
+ */
+declare function useFieldContext(): ExpressionFieldHandle;
+interface RootProps extends UseExpressionFieldOptions, Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "children"> {
+    /**
+     * Os filhos. Como FUNÇÃO, recebe o estado do campo — é o atalho para desenhar
+     * a borda de foco sem precisar de um componente só para ler o contexto.
+     */
+    readonly children?: React.ReactNode | ((field: ExpressionFieldHandle) => React.ReactNode);
+}
+/**
+ * A raiz: monta o campo e publica o estado dele. Renderiza um `<div>` **sem
+ * estilo nenhum**.
+ */
+declare const Root: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLDivElement>>;
+type EditorProps = React.HTMLAttributes<HTMLDivElement>;
+/**
+ * Onde o editor monta. Um `<div>` vazio — o CodeMirror preenche.
+ *
+ * Precisa existir como peça própria (e não ser a `Root`) porque quase todo
+ * layout põe algo ao lado do editor: um botão de expandir, um badge de tipo, um
+ * indicador de erro.
+ */
+declare const Editor: React.ForwardRefExoticComponent<EditorProps & React.RefAttributes<HTMLDivElement>>;
+interface ExpandTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    readonly children?: React.ReactNode;
+}
+/**
+ * Um `<button type="button">` sem estilo. Existe só para carregar o padrão
+ * acessível (o `type`, que sem ele submete formulário) e o vocabulário.
+ */
+declare const ExpandTrigger: React.ForwardRefExoticComponent<ExpandTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+/** As peças, agrupadas — `<ExpressionField.Root>`, `.Editor`, `.ExpandTrigger`. */
+declare const ExpressionField: {
+    Root: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLDivElement>>;
+    Editor: React.ForwardRefExoticComponent<EditorProps & React.RefAttributes<HTMLDivElement>>;
+    ExpandTrigger: React.ForwardRefExoticComponent<ExpandTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+};
+
+/** As cores de chrome. Exportadas para o consumidor reusar no que ele desenhar. */
+declare const V: {
+    readonly fg: "var(--foreground, #cccccc)";
+    readonly mutedFg: "var(--muted-foreground, #8b8b8b)";
+    readonly border: "var(--border, #2b2b2b)";
+    readonly ring: "var(--ring, #0078d4)";
+    readonly input: "var(--input, transparent)";
+    readonly destructive: "var(--destructive, #f14c4c)";
+    readonly font: "var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace)";
+};
+/** As vars que o componente lê — para documentar e para o consumidor conferir. */
+declare const CSS_VARS: readonly ["--foreground", "--muted-foreground", "--border", "--ring", "--input", "--destructive", "--font-mono", "--muted", "--popover", "--popover-foreground", "--primary", "--primary-foreground", "--secondary", "--accent"];
+
+export { CSS_VARS, ExpressionField, Editor as ExpressionFieldEditor, type EditorProps as ExpressionFieldEditorProps, ExpandTrigger as ExpressionFieldExpandTrigger, type ExpandTriggerProps as ExpressionFieldExpandTriggerProps, ExpressionFieldHandle, Root as ExpressionFieldRoot, type RootProps as ExpressionFieldRootProps, ExpressionInput, type ExpressionInputProps, UseExpressionFieldOptions, V, useFieldContext };

package/dist/index.d.ts

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import { U as UseExpressionFieldOptions, E as ExpressionFieldHandle } from './useExpressionField-CA__y0bO.js';
+export { F as FieldLayout, L as LanguageServiceOptions, S as SegmenterOption, u as useExpressionField, a as useLanguageService } from './useExpressionField-CA__y0bO.js';
+export { TokenActionTarget } from '@tslite/codemirror';
+import '@codemirror/state';
+import '@codemirror/view';
+import '@tslite/language-service';
+import '@tslite/editor';
+
+interface ExpressionInputProps extends UseExpressionFieldOptions {
+    /** Borda destrutiva — ex.: um erro de validação que veio de fora. */
+    readonly invalid?: boolean;
+    /** Classe extra no container. */
+    readonly className?: string;
+    /** Estilo extra no container (mesclado por cima do padrão). */
+    readonly style?: React.CSSProperties;
+    /**
+     * Ícone de EXPANDIR no canto → chama isto ao clicar (o consumidor abre um
+     * modal maior, estilo n8n). Sem esta prop, sem ícone.
+     */
+    readonly onExpand?: () => void;
+    /** O ícone do botão. Padrão: um SVG inline (sem dependência de lib de ícone). */
+    readonly expandIcon?: React.ReactNode;
+    /**
+     * @deprecated Use `layout="block"`. Mantido porque a prop antiga era booleana
+     * e trocá-la de uma vez quebraria quem já a usa.
+     */
+    readonly multiline?: boolean;
+}
+/**
+ * O campo de expressão pronto para uso.
+ *
+ * ```tsx
+ * <ExpressionInput value={v} onChange={setV} env={env} />                 // "Olá {{ user.name }}"
+ * <ExpressionInput value={v} onChange={setV} env={env} segmenter="whole" /> // "foo.bar >= 32"
+ * <ExpressionInput value={v} onChange={setV} env={env} layout="block" />    // o modal expandido
+ * ```
+ */
+declare function ExpressionInput({ invalid, className, style, onExpand, expandIcon, multiline, layout, ...options }: ExpressionInputProps): React.JSX.Element;
+
+/**
+ * O campo em volta — para um botão, um badge, um contador saberem o estado
+ * (foco, `view`, serviço) sem receberem props.
+ */
+declare function useFieldContext(): ExpressionFieldHandle;
+interface RootProps extends UseExpressionFieldOptions, Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "children"> {
+    /**
+     * Os filhos. Como FUNÇÃO, recebe o estado do campo — é o atalho para desenhar
+     * a borda de foco sem precisar de um componente só para ler o contexto.
+     */
+    readonly children?: React.ReactNode | ((field: ExpressionFieldHandle) => React.ReactNode);
+}
+/**
+ * A raiz: monta o campo e publica o estado dele. Renderiza um `<div>` **sem
+ * estilo nenhum**.
+ */
+declare const Root: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLDivElement>>;
+type EditorProps = React.HTMLAttributes<HTMLDivElement>;
+/**
+ * Onde o editor monta. Um `<div>` vazio — o CodeMirror preenche.
+ *
+ * Precisa existir como peça própria (e não ser a `Root`) porque quase todo
+ * layout põe algo ao lado do editor: um botão de expandir, um badge de tipo, um
+ * indicador de erro.
+ */
+declare const Editor: React.ForwardRefExoticComponent<EditorProps & React.RefAttributes<HTMLDivElement>>;
+interface ExpandTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    readonly children?: React.ReactNode;
+}
+/**
+ * Um `<button type="button">` sem estilo. Existe só para carregar o padrão
+ * acessível (o `type`, que sem ele submete formulário) e o vocabulário.
+ */
+declare const ExpandTrigger: React.ForwardRefExoticComponent<ExpandTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+/** As peças, agrupadas — `<ExpressionField.Root>`, `.Editor`, `.ExpandTrigger`. */
+declare const ExpressionField: {
+    Root: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLDivElement>>;
+    Editor: React.ForwardRefExoticComponent<EditorProps & React.RefAttributes<HTMLDivElement>>;
+    ExpandTrigger: React.ForwardRefExoticComponent<ExpandTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+};
+
+/** As cores de chrome. Exportadas para o consumidor reusar no que ele desenhar. */
+declare const V: {
+    readonly fg: "var(--foreground, #cccccc)";
+    readonly mutedFg: "var(--muted-foreground, #8b8b8b)";
+    readonly border: "var(--border, #2b2b2b)";
+    readonly ring: "var(--ring, #0078d4)";
+    readonly input: "var(--input, transparent)";
+    readonly destructive: "var(--destructive, #f14c4c)";
+    readonly font: "var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace)";
+};
+/** As vars que o componente lê — para documentar e para o consumidor conferir. */
+declare const CSS_VARS: readonly ["--foreground", "--muted-foreground", "--border", "--ring", "--input", "--destructive", "--font-mono", "--muted", "--popover", "--popover-foreground", "--primary", "--primary-foreground", "--secondary", "--accent"];
+
+export { CSS_VARS, ExpressionField, Editor as ExpressionFieldEditor, type EditorProps as ExpressionFieldEditorProps, ExpandTrigger as ExpressionFieldExpandTrigger, type ExpandTriggerProps as ExpressionFieldExpandTriggerProps, ExpressionFieldHandle, Root as ExpressionFieldRoot, type RootProps as ExpressionFieldRootProps, ExpressionInput, type ExpressionInputProps, UseExpressionFieldOptions, V, useFieldContext };

package/dist/index.js

@@ -0,0 +1 @@
+import*as o from'react';import {Compartment,EditorState}from'@codemirror/state';import {EditorView,placeholder,keymap}from'@codemirror/view';import {history,historyKeymap,defaultKeymap}from'@codemirror/commands';import {languageService,singleLine,tokenAction,gotoDefinition,externalChange,codeEditing,gutters}from'@tslite/codemirror';import {tsliteTokenStyles,createHostService}from'@tslite/editor';import {whole,mustache}from'@tslite/language-service';import {jsx,jsxs}from'react/jsx-runtime';var te={mustache:mustache,whole:whole},oe=e=>typeof e=="function"?e:te[e];function P(e){let{env:n,service:i,segmenter:t="mustache",mode:u="expression",profile:c,limits:l,unused:d,format:s}=e;return o.useMemo(()=>i||(n?createHostService({env:n,segmenter:oe(t),mode:u,...c?{profile:c}:{},...l?{limits:l}:{},...d!==void 0?{unused:d}:{},...s?{format:s}:{}}):null),[i,n,t,u,c,l,d,s])}var me=EditorView.theme({".cm-scroller":{overflowX:"auto",overflowY:"hidden"},".cm-content":{padding:"6px 8px"},".cm-line":{padding:"0"},"&.cm-focused":{outline:"none"}}),Ee=EditorView.theme({"&":{height:"100%"},".cm-scroller":{overflowY:"auto"},".cm-content":{padding:"8px"},"&.cm-focused":{outline:"none"}}),Y=e=>e.replace(/\r?\n/g," "),ye=(e,n)=>{if(e===false)return [];let i=n==="block"?{}:{tab:false,indentOnInput:false};return codeEditing(typeof e=="object"?{...i,...e}:i)},ve=e=>e?gutters(typeof e=="object"?e:{}):[];function M(e){let{value:n,onChange:i,layout:t="inline",wrap:u=t==="block",editing:c,gutters:l,readOnly:d=false,placeholder:s,features:y,tooltipParent:E,onTokenAction:A,isTokenActionable:D,definition:k,extensions:W}=e,v=P(e),L=o.useRef(null),g=o.useRef(null),[z,I]=o.useState(null),[X,$]=o.useState(false),b=o.useRef({onChange:i,onTokenAction:A,isTokenActionable:D});b.current={onChange:i,onTokenAction:A,isTokenActionable:D};let p=o.useRef({service:new Compartment,layout:new Compartment,editable:new Compartment,actions:new Compartment}).current,C=o.useCallback(r=>r?languageService(r,{theme:tsliteTokenStyles,...E!==null?{tooltipParent:E??(typeof document<"u"?document.body:void 0)}:{},...y}):[],[y,E]),w=o.useCallback((r,a,S,h)=>[r==="block"?[...a?[EditorView.lineWrapping]:[],Ee]:[singleLine,me],ye(S,r),ve(h)],[]),H=o.useCallback(()=>{let r=[];return b.current.onTokenAction&&r.push(tokenAction({actionable:a=>b.current.isTokenActionable?.(a)??true,onAction:a=>b.current.onTokenAction?.(a)})),k&&v?.definitionAt&&r.push(gotoDefinition(k)),r},[k,v]);o.useEffect(()=>{if(!L.current)return;let r=new EditorView({parent:L.current,state:EditorState.create({doc:t==="inline"?Y(n):n,extensions:[history(),p.service.of(C(v)),p.layout.of(w(t,u,c,l)),p.editable.of(EditorView.editable.of(!d)),p.actions.of(H()),...s?[placeholder(s)]:[],keymap.of([...historyKeymap,...defaultKeymap]),EditorView.updateListener.of(a=>{if(a.focusChanged&&$(a.view.hasFocus),!a.docChanged)return;a.transactions.some(h=>h.annotation(externalChange))||b.current.onChange?.(a.state.doc.toString());}),EditorView.contentAttributes.of({"aria-label":s??"expression"}),...W??[]]})});return g.current=r,I(r),()=>{r.destroy(),g.current=null,I(null);}},[]),o.useEffect(()=>{g.current?.dispatch({effects:p.service.reconfigure(C(v))});},[v,C,p]),o.useEffect(()=>{g.current?.dispatch({effects:p.layout.reconfigure(w(t,u,c,l))});},[t,u,c,l,w,p]),o.useEffect(()=>{g.current?.dispatch({effects:p.editable.reconfigure(EditorView.editable.of(!d))});},[d,p]),o.useEffect(()=>{g.current?.dispatch({effects:p.actions.reconfigure(H())});},[H,p]),o.useEffect(()=>{let r=g.current;if(!r)return;let a=t==="inline"?Y(n):n;if(a===r.state.doc.toString())return;let{anchor:S,head:h}=r.state.selection.main,U=J=>Math.min(J,a.length);r.dispatch({changes:{from:0,to:r.state.doc.length,insert:a},selection:{anchor:U(S),head:U(h)},annotations:externalChange.of(true)});},[n,t]);let q=o.useCallback(()=>g.current?.focus(),[]);return {ref:L,view:z,focused:X,service:v,focus:q}}var G=o.createContext(null);function K(){let e=o.useContext(G);if(!e)throw new Error("useFieldContext must be used inside <ExpressionField.Root>");return e}var be=["value","onChange","layout","wrap","editing","gutters","readOnly","placeholder","features","tooltipParent","onTokenAction","isTokenActionable","definition","extensions","env","service","segmenter","mode","profile","limits","unused","format"];var N=o.forwardRef(function(n,i){let{children:t,...u}=n,c={},l={};for(let[s,y]of Object.entries(u))(be.includes(s)?c:l)[s]=y;let d=M(c);return jsx(G.Provider,{value:d,children:jsx("div",{ref:i,...l,children:typeof t=="function"?t(d):t})})}),j=o.forwardRef(function(n,i){let t=K();return jsx("div",{ref:t.ref,...n})}),B=o.forwardRef(function({children:n,...i},t){return jsx("button",{ref:t,type:"button",...i,children:n})}),R={Root:N,Editor:j,ExpandTrigger:B};var f={fg:"var(--foreground, #cccccc)",mutedFg:"var(--muted-foreground, #8b8b8b)",border:"var(--border, #2b2b2b)",ring:"var(--ring, #0078d4)",input:"var(--input, transparent)",destructive:"var(--destructive, #f14c4c)",font:"var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace)"},he=["--foreground","--muted-foreground","--border","--ring","--input","--destructive","--font-mono","--muted","--popover","--popover-foreground","--primary","--primary-foreground","--secondary","--accent"];var Re=jsx("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:jsx("path",{d:"M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"})});function Fe({invalid:e,className:n,style:i,onExpand:t,expandIcon:u,multiline:c,layout:l,...d}){let s=l??(c?"block":"inline");return jsx(R.Root,{...d,layout:s,className:n,children:y=>jsxs("div",{style:{position:"relative",border:`1px solid ${e?f.destructive:y.focused?f.ring:f.border}`,borderRadius:"6px",backgroundColor:f.input,color:f.fg,fontFamily:f.font,fontSize:"13px",overflow:"hidden",...s==="block"?{height:"100%",display:"flex",flexDirection:"column"}:{},...i},children:[jsx(R.Editor,{style:s==="block"?{flex:1,minHeight:0}:{paddingRight:t?"24px":void 0}}),t&&jsx(R.ExpandTrigger,{onClick:t,"aria-label":"Expandir",title:"Expandir",onMouseEnter:E=>E.currentTarget.style.opacity="1",onMouseLeave:E=>E.currentTarget.style.opacity="0.55",style:{position:"absolute",top:s==="block"?"6px":"50%",right:"4px",transform:s==="block"?void 0:"translateY(-50%)",display:"flex",alignItems:"center",justifyContent:"center",width:"20px",height:"20px",padding:0,lineHeight:0,border:"none",borderRadius:"4px",background:f.input,color:f.mutedFg,cursor:"pointer",opacity:.55},children:u??Re})]})})}export{he as CSS_VARS,R as ExpressionField,j as ExpressionFieldEditor,B as ExpressionFieldExpandTrigger,N as ExpressionFieldRoot,Fe as ExpressionInput,f as V,M as useExpressionField,K as useFieldContext,P as useLanguageService};

package/dist/useExpressionField-CA__y0bO.d.cts

@@ -0,0 +1,159 @@
+import * as React from 'react';
+import { Extension } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import { CodeEditingOptions, GuttersOptions, LanguageServiceOptions as LanguageServiceOptions$1, TokenActionTarget, GotoDefinitionOptions } from '@tslite/codemirror';
+import { LanguageService, Segmenter, Token } from '@tslite/language-service';
+import { HostServiceOptions } from '@tslite/editor';
+
+/**
+ * Onde, no texto, mora o código.
+ *
+ * - `"mustache"` — ilhas `{{ … }}` dentro de texto de host (`"Olá {{ user.name }}"`);
+ * - `"whole"` — o campo INTEIRO é código (`"foo.bar >= 32"`);
+ * - um `Segmenter` seu, para outra convenção de delimitador.
+ */
+type SegmenterOption = "mustache" | "whole" | Segmenter;
+/** O que define o cérebro do campo. */
+interface LanguageServiceOptions {
+    /**
+     * O ambiente de tipos — o shape dos dados no escopo das expressões.
+     *
+     * ⚠️ **Memoize-o.** Um objeto novo a cada render reconstrói o serviço e joga
+     * fora o cache de análise. `useMemo` no seu lado resolve.
+     */
+    readonly env?: HostServiceOptions["env"];
+    /**
+     * Um serviço pronto, no lugar do `env`. Tem precedência — e é o caminho para
+     * trocar o cérebro por outro (outra linguagem, outra implementação).
+     */
+    readonly service?: LanguageService;
+    /** Onde o código está. Padrão: `"mustache"`. */
+    readonly segmenter?: SegmenterOption;
+    /**
+     * O que o código É. Padrão: `"expression"`.
+     *
+     * Ortogonal ao `segmenter`: uma ilha pode conter um programa, e um campo
+     * inteiro pode ser uma expressão. São dois botões porque nada os amarra.
+     */
+    readonly mode?: "expression" | "program";
+    /**
+     * Capability — **desinstala** features da Linguagem.
+     *
+     * Sem ela o campo só tipa, e uma atribuição (`{{ user.name = "ok" }}`) passa:
+     * `=` existe na Linguagem completa. Não há padrão implícito aqui, porque qual
+     * profile cabe num campo é decisão de produto.
+     */
+    readonly profile?: HostServiceOptions["profile"];
+    /** Limites estruturais (anti-DoS). */
+    readonly limits?: HostServiceOptions["limits"];
+    /** Bindings nunca lidos. Ligado por padrão (é API de editor). */
+    readonly unused?: HostServiceOptions["unused"];
+    /** O formatador (`formatExpression` do `@tslite/format`). Sem ele, não formata. */
+    readonly format?: HostServiceOptions["format"];
+}
+/**
+ * O `LanguageService` do campo. `null` quando não há `env` nem `service` — o
+ * editor continua editando texto, só sem inteligência.
+ */
+declare function useLanguageService(options: LanguageServiceOptions): LanguageService | null;
+
+/**
+ * Como o campo se APRESENTA — ortogonal ao que ele contém.
+ *
+ * - `"inline"` — uma linha, estilo input: sem quebra, rolagem horizontal;
+ * - `"block"` — várias linhas, estilo editor: quebra de linha e rolagem vertical.
+ */
+type FieldLayout = "inline" | "block";
+interface UseExpressionFieldOptions extends LanguageServiceOptions {
+    /** O texto do campo (controlado). */
+    readonly value: string;
+    /** Chamado a cada edição do USUÁRIO — nunca por sincronização externa. */
+    readonly onChange?: (value: string) => void;
+    /** Como o campo se apresenta. Padrão: `"inline"`. */
+    readonly layout?: FieldLayout;
+    /**
+     * Quebrar linha longa em vez de rolar na horizontal. Padrão: `true` no layout
+     * `"block"`.
+     *
+     * É opção à parte do `layout` porque são decisões diferentes: um CAMPO de
+     * várias linhas quer quebrar (o texto é o conteúdo); um editor de ARQUIVO
+     * normalmente não — a coluna importa, e é o que o VS Code faz por padrão. No
+     * `"inline"` não se aplica: ali é uma linha só.
+     */
+    readonly wrap?: boolean;
+    /**
+     * As capacidades de EDIÇÃO do CodeMirror — pares que se fecham, seleção
+     * desenhada, multi-cursor e o `Tab` que indenta. Padrão: **ligadas**, com uma
+     * diferença que segue o layout:
+     *
+     * | layout | `Tab` | por quê |
+     * | --- | --- | --- |
+     * | `"block"` | indenta | é um editor: não há para onde o foco ir |
+     * | `"inline"` | **navega** | num campo de formulário, roubar o `Tab` prende o teclado — o usuário não sai sem o mouse |
+     *
+     * Passe `false` para não instalar nada, ou um objeto para ajustar (ele é
+     * mesclado sobre o padrão do layout).
+     *
+     * A BUSCA (`Ctrl+D`, `Ctrl+F`) **não** entra aqui: ela vive num peer opcional.
+     * Quem a quiser instala `@codemirror/search` e passa a extensão:
+     *
+     * ```tsx
+     * import { searchEditing } from "@tslite/codemirror/search";
+     * <ExpressionInput layout="block" extensions={[searchEditing()]} />
+     * ```
+     */
+    readonly editing?: boolean | CodeEditingOptions;
+    /**
+     * Régua de linhas e realce da linha ativa. Padrão: **desligadas** — um campo
+     * não as quer. Num campo EXPANDIDO (o modal), normalmente sim.
+     */
+    readonly gutters?: boolean | GuttersOptions;
+    /** Somente leitura (ainda navegável, selecionável e com hover). */
+    readonly readOnly?: boolean;
+    /** Texto mostrado quando o campo está vazio. */
+    readonly placeholder?: string;
+    /** Quais capacidades da superfície ligar. Ver `@tslite/codemirror`. */
+    readonly features?: LanguageServiceOptions$1;
+    /**
+     * Onde os tooltips (hover, dropdown) são inseridos no DOM.
+     *
+     * Padrão: **`document.body`**. Um campo de expressão vive dentro de modal,
+     * drawer e painel — e quase todo modal centraliza com `transform`, o que faz o
+     * CodeMirror abandonar o `position: fixed` dos tooltips e cair no absoluto: a
+     * caixa nasce longe do cursor e o mouse não a alcança.
+     *
+     * Passe `null` para deixar o CodeMirror decidir (o tooltip fica dentro do
+     * editor), ou um elemento seu se precisar controlar o empilhamento.
+     */
+    readonly tooltipParent?: HTMLElement | null;
+    /**
+     * Modificador + clique num token → o consumidor decide o que fazer (abrir um
+     * inspetor, a doc de um operador). Sem esta função, o gesto fica desligado.
+     */
+    readonly onTokenAction?: (target: TokenActionTarget) => void;
+    /** Quais tokens são acionáveis. Padrão: todos. */
+    readonly isTokenActionable?: (token: Token) => boolean;
+    /**
+     * Navegação por definição. Desligada por padrão: ela exige decisões que só o
+     * consumidor toma (qual tecla, e o que fazer com um alvo externo).
+     */
+    readonly definition?: GotoDefinitionOptions | false;
+    /** Extensões extras do CodeMirror — a escotilha de fuga. */
+    readonly extensions?: readonly Extension[];
+}
+/** O que o hook devolve. */
+interface ExpressionFieldHandle {
+    /** Ponha num elemento vazio: é onde o editor monta. */
+    readonly ref: React.RefObject<HTMLDivElement>;
+    /** O `EditorView`, depois da montagem. Para comandos e integrações. */
+    readonly view: EditorView | null;
+    /** O campo está com foco? (para desenhar o anel, sem `:focus-within`) */
+    readonly focused: boolean;
+    /** O serviço em uso, ou `null`. */
+    readonly service: LanguageService | null;
+    /** Põe o foco no editor. */
+    focus(): void;
+}
+declare function useExpressionField(options: UseExpressionFieldOptions): ExpressionFieldHandle;
+
+export { type ExpressionFieldHandle as E, type FieldLayout as F, type LanguageServiceOptions as L, type SegmenterOption as S, type UseExpressionFieldOptions as U, useLanguageService as a, useExpressionField as u };

package/dist/useExpressionField-CA__y0bO.d.ts

@@ -0,0 +1,159 @@
+import * as React from 'react';
+import { Extension } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import { CodeEditingOptions, GuttersOptions, LanguageServiceOptions as LanguageServiceOptions$1, TokenActionTarget, GotoDefinitionOptions } from '@tslite/codemirror';
+import { LanguageService, Segmenter, Token } from '@tslite/language-service';
+import { HostServiceOptions } from '@tslite/editor';
+
+/**
+ * Onde, no texto, mora o código.
+ *
+ * - `"mustache"` — ilhas `{{ … }}` dentro de texto de host (`"Olá {{ user.name }}"`);
+ * - `"whole"` — o campo INTEIRO é código (`"foo.bar >= 32"`);
+ * - um `Segmenter` seu, para outra convenção de delimitador.
+ */
+type SegmenterOption = "mustache" | "whole" | Segmenter;
+/** O que define o cérebro do campo. */
+interface LanguageServiceOptions {
+    /**
+     * O ambiente de tipos — o shape dos dados no escopo das expressões.
+     *
+     * ⚠️ **Memoize-o.** Um objeto novo a cada render reconstrói o serviço e joga
+     * fora o cache de análise. `useMemo` no seu lado resolve.
+     */
+    readonly env?: HostServiceOptions["env"];
+    /**
+     * Um serviço pronto, no lugar do `env`. Tem precedência — e é o caminho para
+     * trocar o cérebro por outro (outra linguagem, outra implementação).
+     */
+    readonly service?: LanguageService;
+    /** Onde o código está. Padrão: `"mustache"`. */
+    readonly segmenter?: SegmenterOption;
+    /**
+     * O que o código É. Padrão: `"expression"`.
+     *
+     * Ortogonal ao `segmenter`: uma ilha pode conter um programa, e um campo
+     * inteiro pode ser uma expressão. São dois botões porque nada os amarra.
+     */
+    readonly mode?: "expression" | "program";
+    /**
+     * Capability — **desinstala** features da Linguagem.
+     *
+     * Sem ela o campo só tipa, e uma atribuição (`{{ user.name = "ok" }}`) passa:
+     * `=` existe na Linguagem completa. Não há padrão implícito aqui, porque qual
+     * profile cabe num campo é decisão de produto.
+     */
+    readonly profile?: HostServiceOptions["profile"];
+    /** Limites estruturais (anti-DoS). */
+    readonly limits?: HostServiceOptions["limits"];
+    /** Bindings nunca lidos. Ligado por padrão (é API de editor). */
+    readonly unused?: HostServiceOptions["unused"];
+    /** O formatador (`formatExpression` do `@tslite/format`). Sem ele, não formata. */
+    readonly format?: HostServiceOptions["format"];
+}
+/**
+ * O `LanguageService` do campo. `null` quando não há `env` nem `service` — o
+ * editor continua editando texto, só sem inteligência.
+ */
+declare function useLanguageService(options: LanguageServiceOptions): LanguageService | null;
+
+/**
+ * Como o campo se APRESENTA — ortogonal ao que ele contém.
+ *
+ * - `"inline"` — uma linha, estilo input: sem quebra, rolagem horizontal;
+ * - `"block"` — várias linhas, estilo editor: quebra de linha e rolagem vertical.
+ */
+type FieldLayout = "inline" | "block";
+interface UseExpressionFieldOptions extends LanguageServiceOptions {
+    /** O texto do campo (controlado). */
+    readonly value: string;
+    /** Chamado a cada edição do USUÁRIO — nunca por sincronização externa. */
+    readonly onChange?: (value: string) => void;
+    /** Como o campo se apresenta. Padrão: `"inline"`. */
+    readonly layout?: FieldLayout;
+    /**
+     * Quebrar linha longa em vez de rolar na horizontal. Padrão: `true` no layout
+     * `"block"`.
+     *
+     * É opção à parte do `layout` porque são decisões diferentes: um CAMPO de
+     * várias linhas quer quebrar (o texto é o conteúdo); um editor de ARQUIVO
+     * normalmente não — a coluna importa, e é o que o VS Code faz por padrão. No
+     * `"inline"` não se aplica: ali é uma linha só.
+     */
+    readonly wrap?: boolean;
+    /**
+     * As capacidades de EDIÇÃO do CodeMirror — pares que se fecham, seleção
+     * desenhada, multi-cursor e o `Tab` que indenta. Padrão: **ligadas**, com uma
+     * diferença que segue o layout:
+     *
+     * | layout | `Tab` | por quê |
+     * | --- | --- | --- |
+     * | `"block"` | indenta | é um editor: não há para onde o foco ir |
+     * | `"inline"` | **navega** | num campo de formulário, roubar o `Tab` prende o teclado — o usuário não sai sem o mouse |
+     *
+     * Passe `false` para não instalar nada, ou um objeto para ajustar (ele é
+     * mesclado sobre o padrão do layout).
+     *
+     * A BUSCA (`Ctrl+D`, `Ctrl+F`) **não** entra aqui: ela vive num peer opcional.
+     * Quem a quiser instala `@codemirror/search` e passa a extensão:
+     *
+     * ```tsx
+     * import { searchEditing } from "@tslite/codemirror/search";
+     * <ExpressionInput layout="block" extensions={[searchEditing()]} />
+     * ```
+     */
+    readonly editing?: boolean | CodeEditingOptions;
+    /**
+     * Régua de linhas e realce da linha ativa. Padrão: **desligadas** — um campo
+     * não as quer. Num campo EXPANDIDO (o modal), normalmente sim.
+     */
+    readonly gutters?: boolean | GuttersOptions;
+    /** Somente leitura (ainda navegável, selecionável e com hover). */
+    readonly readOnly?: boolean;
+    /** Texto mostrado quando o campo está vazio. */
+    readonly placeholder?: string;
+    /** Quais capacidades da superfície ligar. Ver `@tslite/codemirror`. */
+    readonly features?: LanguageServiceOptions$1;
+    /**
+     * Onde os tooltips (hover, dropdown) são inseridos no DOM.
+     *
+     * Padrão: **`document.body`**. Um campo de expressão vive dentro de modal,
+     * drawer e painel — e quase todo modal centraliza com `transform`, o que faz o
+     * CodeMirror abandonar o `position: fixed` dos tooltips e cair no absoluto: a
+     * caixa nasce longe do cursor e o mouse não a alcança.
+     *
+     * Passe `null` para deixar o CodeMirror decidir (o tooltip fica dentro do
+     * editor), ou um elemento seu se precisar controlar o empilhamento.
+     */
+    readonly tooltipParent?: HTMLElement | null;
+    /**
+     * Modificador + clique num token → o consumidor decide o que fazer (abrir um
+     * inspetor, a doc de um operador). Sem esta função, o gesto fica desligado.
+     */
+    readonly onTokenAction?: (target: TokenActionTarget) => void;
+    /** Quais tokens são acionáveis. Padrão: todos. */
+    readonly isTokenActionable?: (token: Token) => boolean;
+    /**
+     * Navegação por definição. Desligada por padrão: ela exige decisões que só o
+     * consumidor toma (qual tecla, e o que fazer com um alvo externo).
+     */
+    readonly definition?: GotoDefinitionOptions | false;
+    /** Extensões extras do CodeMirror — a escotilha de fuga. */
+    readonly extensions?: readonly Extension[];
+}
+/** O que o hook devolve. */
+interface ExpressionFieldHandle {
+    /** Ponha num elemento vazio: é onde o editor monta. */
+    readonly ref: React.RefObject<HTMLDivElement>;
+    /** O `EditorView`, depois da montagem. Para comandos e integrações. */
+    readonly view: EditorView | null;
+    /** O campo está com foco? (para desenhar o anel, sem `:focus-within`) */
+    readonly focused: boolean;
+    /** O serviço em uso, ou `null`. */
+    readonly service: LanguageService | null;
+    /** Põe o foco no editor. */
+    focus(): void;
+}
+declare function useExpressionField(options: UseExpressionFieldOptions): ExpressionFieldHandle;
+
+export { type ExpressionFieldHandle as E, type FieldLayout as F, type LanguageServiceOptions as L, type SegmenterOption as S, type UseExpressionFieldOptions as U, useLanguageService as a, useExpressionField as u };

package/package.json

@@ -0,0 +1,98 @@
+{
+  "name": "@tslite/react",
+  "version": "0.1.0",
+  "description": "React bindings for TSLite — a headless expression field (CodeMirror 6) with type-aware highlighting, completion, diagnostics and quick-fixes, driven by the TSLite checker.",
+  "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"
+    },
+    "./full": {
+      "types": "./dist/full.d.ts",
+      "import": "./dist/full.js",
+      "require": "./dist/full.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "engines": {
+    "node": ">=18"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/andersondrosa/tslite.git",
+    "directory": "packages/react"
+  },
+  "keywords": [
+    "react",
+    "codemirror",
+    "expression",
+    "input",
+    "headless",
+    "autocomplete",
+    "mustache",
+    "nocode",
+    "typescript"
+  ],
+  "author": "Anderson D. Rosa <andersondrosa@outlook.com>",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@tslite/codemirror": "0.1.0",
+    "@tslite/editor": "0.4.0",
+    "@tslite/format": "0.3.0",
+    "@tslite/language-service": "0.1.0"
+  },
+  "peerDependencies": {
+    "@codemirror/autocomplete": "^6.0.0",
+    "@codemirror/commands": "^6.0.0",
+    "@codemirror/language": "^6.0.0",
+    "@codemirror/lint": "^6.0.0",
+    "@codemirror/search": "^6.0.0",
+    "@codemirror/state": "^6.0.0",
+    "@codemirror/view": "^6.0.0",
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@codemirror/autocomplete": "^6.20.3",
+    "@codemirror/commands": "^6.10.4",
+    "@codemirror/language": "^6.12.4",
+    "@codemirror/lint": "^6.9.7",
+    "@codemirror/state": "^6.7.1",
+    "@codemirror/view": "^6.43.7",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.1.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "@tslite/checker": "0.7.0"
+  },
+  "peerDependenciesMeta": {
+    "@codemirror/search": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src",
+    "lint:fix": "eslint src --fix",
+    "clean": "rm -rf dist",
+    "format": "prettier --write \"{src,tests}/**/*.{ts,tsx}\"",
+    "format:check": "prettier --check \"{src,tests}/**/*.{ts,tsx}\""
+  }
+}