@cascivo/editor 0.0.1

package/README.md

@@ -0,0 +1,72 @@
+<!-- generated by scripts/readme/generate.ts — edit readme.body.md, not this file -->
+
+<div align="center">
+  <a href="https://cascivo.com"><img src="https://cascivo.com/favicon.svg" width="72" height="72" alt="cascivo logo"></a>
+  <h1>@cascivo/editor</h1>
+  <p><strong>Lightweight CSS-native code editor — native textarea overlay + owned zero-dependency tokenizer</strong></p>
+
+[![npm](https://img.shields.io/npm/v/%40cascivo%2Feditor?style=flat-square&color=0079bf)](https://www.npmjs.com/package/@cascivo/editor)
+[![downloads](https://img.shields.io/npm/dm/%40cascivo%2Feditor?style=flat-square&color=0079bf)](https://www.npmjs.com/package/@cascivo/editor)
+[![license](https://img.shields.io/npm/l/%40cascivo%2Feditor?style=flat-square&color=0079bf)](https://github.com/cascivo/cascivo/blob/main/LICENSE)
+![types](https://img.shields.io/badge/types-included-0079bf?style=flat-square&logo=typescript&logoColor=white)
+
+[npm](https://www.npmjs.com/package/@cascivo/editor) · [cascivo.com](https://cascivo.com) · [Docs](https://docs.cascivo.com) · [Storybook](https://storybook.cascivo.com) · [GitHub](https://github.com/cascivo/cascivo)
+
+</div>
+
+---
+
+A lightweight, CSS-native, signal-driven code editor for cascivo. `CodeEditor` overlays a native `<textarea>` on a syntax-highlighted `<pre>`, so the browser owns the caret, selection, IME, undo, and accessibility — JS is limited to a tiny owned tokenizer and scroll-sync. `Highlight` is the read-only renderer for snippets and docs. Zero runtime dependencies, themeable through the cascivo token system.
+
+## Install
+
+```sh
+pnpm add @cascivo/editor @preact/signals-react
+```
+
+`react`, `react-dom`, and `@preact/signals-react` are peer dependencies — install them in your app.
+
+## Usage
+
+```tsx
+import { CodeEditor } from '@cascivo/editor'
+import '@cascivo/editor/styles.css' // required — maps to the dist `editor.css`
+import '@cascivo/themes/dark.css' // any cascivo theme drives the editor colors
+
+export function Example() {
+  return <CodeEditor language="typescript" lineNumbers defaultValue={`const x = 1\n`} />
+}
+```
+
+The editor is CSS-token-themed: drop it inside any element carrying a `data-theme` (or import a
+theme stylesheet) and it picks up the same palette, radii, and typography as the rest of cascivo —
+including the syntax colors, which map onto the `--cascivo-editor-syntax-*` palette.
+
+### Read-only highlighting
+
+```tsx
+import { Highlight } from '@cascivo/editor'
+;<Highlight language="json" value={`{ "ok": true }`} />
+```
+
+### Languages
+
+Ships small, tree-shakeable grammars: `plaintext`, `json`, `javascript`, `typescript`, `css`,
+`html`, `markdown`, `bash`. Register your own with `registerGrammar(grammar)`.
+
+### React apps must subscribe to signals
+
+`CodeEditor` and `Highlight` are signal-driven. In a plain React app (no Babel signals transform),
+they already call `useSignals()` internally — no extra wiring is required.
+
+## Install
+
+```sh
+pnpm add @cascivo/editor
+```
+
+---
+
+[cascivo.com](https://cascivo.com) · [Docs](https://docs.cascivo.com) · [Storybook](https://storybook.cascivo.com) · [GitHub](https://github.com/cascivo/cascivo) · AI agents: use [`@cascivo/mcp`](https://github.com/cascivo/cascivo/tree/main/packages/mcp) and [`registry.json`](https://github.com/cascivo/cascivo/blob/main/registry.json) · MIT
+
+<div align="center"><a href="https://cascivo.com"><img src="https://cascivo.com/favicon.svg" width="28" height="28" alt="cascivo"></a></div>

package/dist/editor.css

@@ -0,0 +1,2 @@
+@layer cascivo.component{._root_4k2k5_2{background:var(--cascivo-editor-bg);max-block-size:100%;color:var(--cascivo-editor-fg);border:1px solid var(--cascivo-editor-border);border-radius:var(--cascivo-radius-field);font-family:var(--cascivo-font-mono);font-size:var(--cascivo-text-sm);line-height:var(--cascivo-leading-normal);tab-size:var(--cascivo-editor-tab-size,2);display:flex;overflow:auto}._gutter_4k2k5_17{padding-block:var(--cascivo-space-3);background:var(--cascivo-editor-gutter-bg);color:var(--cascivo-editor-gutter-fg);text-align:end;-webkit-user-select:none;user-select:none;flex:none;padding-inline-start:var(--cascivo-space-3);padding-inline-end:var(--cascivo-space-2)}._gutterLine_4k2k5_28{min-block-size:1lh;display:block}._pre_4k2k5_33{min-inline-size:0;padding-block:var(--cascivo-space-3);padding-inline:var(--cascivo-space-3);white-space:pre;font:inherit;tab-size:inherit;flex:auto;margin-block:0;margin-inline:0}._code_4k2k5_45{font:inherit}._line_4k2k5_50{min-block-size:1lh;display:block}._root_4k2k5_2[data-wrap=true] ._pre_4k2k5_33{white-space:pre-wrap;word-break:break-word}._root_4k2k5_2[data-line-numbers=false] ._gutter_4k2k5_17{display:none}._plain_4k2k5_65{color:var(--cascivo-editor-fg)}._keyword_4k2k5_68{color:var(--cascivo-editor-syntax-keyword)}._string_4k2k5_71{color:var(--cascivo-editor-syntax-string)}._number_4k2k5_74{color:var(--cascivo-editor-syntax-number)}._comment_4k2k5_77{color:var(--cascivo-editor-syntax-comment);font-style:italic}._function_4k2k5_81{color:var(--cascivo-editor-syntax-function)}._type_4k2k5_84{color:var(--cascivo-editor-syntax-type)}._operator_4k2k5_87{color:var(--cascivo-editor-syntax-operator)}._punctuation_4k2k5_90{color:var(--cascivo-editor-syntax-punctuation)}._variable_4k2k5_93{color:var(--cascivo-editor-syntax-variable)}._tag_4k2k5_96{color:var(--cascivo-editor-syntax-tag)}._attr_4k2k5_99{color:var(--cascivo-editor-syntax-attr)}._regexp_4k2k5_102{color:var(--cascivo-editor-syntax-regexp)}._boolean_4k2k5_105{color:var(--cascivo-editor-syntax-boolean)}._property_4k2k5_108{color:var(--cascivo-editor-syntax-property)}._root_q71hw_2{background:var(--cascivo-editor-bg);color:var(--cascivo-editor-fg);border:1px solid var(--cascivo-editor-border);border-radius:var(--cascivo-radius-field);font-family:var(--cascivo-font-mono);font-size:var(--cascivo-text-sm);line-height:var(--cascivo-leading-normal);tab-size:var(--cascivo-editor-tab-size,2);transition:box-shadow var(--cascivo-duration-150) var(--cascivo-ease-out);display:flex;position:relative;overflow:hidden}._root_q71hw_2:has(._textarea_q71hw_18:focus-visible){box-shadow:var(--cascivo-focus-ring);border-color:var(--cascivo-color-accent)}._gutter_q71hw_23{padding-block:var(--cascivo-space-3);background:var(--cascivo-editor-gutter-bg);color:var(--cascivo-editor-gutter-fg);text-align:end;-webkit-user-select:none;user-select:none;flex:none;padding-inline-start:var(--cascivo-space-3);padding-inline-end:var(--cascivo-space-2);overflow:hidden}._codeArea_q71hw_35{flex:auto;min-inline-size:0;position:relative}._pre_q71hw_42{padding-block:var(--cascivo-space-3);padding-inline:var(--cascivo-space-3);white-space:pre;pointer-events:none;font:inherit;tab-size:inherit;margin-block:0;margin-inline:0;position:absolute;inset:0;overflow:hidden}._currentLine_q71hw_57{inset-inline:0;top:var(--cascivo-space-3);block-size:1lh;transform:translateY(calc(var(--cascivo-editor-caret-line,0) * 1lh));background:var(--cascivo-editor-current-line);pointer-events:none;position:absolute}._textarea_q71hw_18{block-size:100%;inline-size:100%;padding-block:var(--cascivo-space-3);padding-inline:var(--cascivo-space-3);resize:none;color:#0000;caret-color:var(--cascivo-editor-fg);white-space:pre;font:inherit;tab-size:inherit;background:0 0;border:0;outline:none;margin-block:0;margin-inline:0;position:absolute;inset:0;overflow:auto}._textarea_q71hw_18::placeholder{color:var(--cascivo-editor-gutter-fg)}._textarea_q71hw_18::selection{background:var(--cascivo-editor-selection)}._textarea_q71hw_18:disabled{cursor:not-allowed;opacity:var(--cascivo-disabled-opacity)}._root_q71hw_2[data-wrap=true] ._pre_q71hw_42,._root_q71hw_2[data-wrap=true] ._textarea_q71hw_18{white-space:pre-wrap;word-break:break-word}._root_q71hw_2[data-line-numbers=false] ._gutter_q71hw_23{display:none}@media (pointer:coarse){._root_q71hw_2{min-block-size:var(--cascivo-target-min-coarse,2.75rem)}}@media (prefers-reduced-motion:reduce){._root_q71hw_2{transition:none}}}@media (forced-colors:active){._root_q71hw_2{border:1px solid fieldtext}._pre_q71hw_42{display:none}._textarea_q71hw_18{color:canvastext;caret-color:canvastext}}
+/*$vite$:1*/

package/dist/index.d.ts

@@ -0,0 +1,202 @@
+import { HTMLAttributes, Ref, TextareaHTMLAttributes } from "react";
+
+/**
+ * Token classes the syntax palette colors. Every kind maps to a
+ * `--cascivo-editor-syntax-<kind>` custom property (see @cascivo/tokens). `plain`
+ * is uncolored text (whitespace, identifiers a grammar chose not to classify).
+ */
+type TokenKind = 'keyword' | 'string' | 'number' | 'comment' | 'function' | 'type' | 'operator' | 'punctuation' | 'variable' | 'tag' | 'attr' | 'regexp' | 'boolean' | 'property' | 'plain';
+/** A single highlighted span. The concatenation of a line's token values is the line. */
+interface Token {
+  kind: TokenKind;
+  value: string;
+}
+/**
+ * Opaque per-grammar continuation carried from one line to the next so multi-line
+ * constructs (block comments, template literals, fenced code) continue correctly.
+ * Each grammar owns the meaning of its own state strings; `'default'` is the start.
+ */
+type GrammarState = string;
+/** Result of tokenizing one line: its spans plus the state to feed the next line. */
+interface LineTokens {
+  tokens: Token[];
+  state: GrammarState;
+}
+/**
+ * A language grammar. Pure and deterministic: `tokenizeLine` must depend only on
+ * `(line, state)` and must be lossless (the token values concatenate back to `line`).
+ */
+interface Grammar {
+  name: string;
+  initialState: GrammarState;
+  tokenizeLine(line: string, state: GrammarState): LineTokens;
+}
+/** Result of tokenizing one line: spans plus the continuation state. */
+interface TokenizeResult {
+  tokens: Token[];
+  endState: GrammarState;
+}
+/**
+ * Tokenize a single line, restartable from `startState`, memoized. Pure from the
+ * caller's perspective: identical `(grammar, line, startState)` yield identical
+ * results (a cache hit returns the previously-computed value).
+ */
+declare function tokenize(grammar: Grammar, line: string, startState: GrammarState): TokenizeResult;
+/**
+ * Tokenize a whole document, threading each line's `endState` into the next so
+ * block comments / template literals / fenced code continue across lines.
+ * Returns one token array per line. The per-line memo makes a single-line edit
+ * re-tokenize only the changed line(s) until the start-state reconverges.
+ */
+declare function tokenizeDocument(grammar: Grammar, text: string): Token[][];
+/** Register (or replace) a grammar under its `name`. */
+declare function registerGrammar(grammar: Grammar): void;
+/** Resolve a grammar by name, falling back to `plaintext` for unknown languages. */
+declare function getGrammar(name?: string): Grammar;
+/** List the names of all currently-registered grammars. */
+declare function listGrammars(): string[];
+/**
+ * One tokenizer rule. `match` is anchored at the current scan position (compiled
+ * sticky internally). On a non-empty match the matched text becomes a token of
+ * `kind`, the position advances, and the state transitions via `push`/`pop`.
+ */
+interface Rule {
+  match: RegExp;
+  kind: TokenKind;
+  /** Switch to this state after matching (for entering multi-line constructs). */
+  push?: string;
+  /** Return to the `default` state after matching (for leaving them). */
+  pop?: boolean;
+}
+interface RuleSpec {
+  name: string;
+  /** Per-state ordered rule lists. Must include a `default` state. */
+  states: Record<string, Rule[]>;
+}
+/**
+ * Build a {@link Grammar} from ordered, state-keyed regex rules — a tiny
+ * Monarch/Prism-style engine. At each position, the first rule in the current
+ * state whose sticky regex matches wins; unmatched characters accumulate into
+ * `plain` tokens, so the tokenizer is always lossless. State carries across
+ * lines for block comments, template literals, and fenced code.
+ */
+declare function createRuleGrammar(spec: RuleSpec): Grammar;
+/** The trivial fallback grammar: one uncolored `plain` token per line. */
+declare const plaintext: Grammar;
+/**
+ * JSON: property keys vs string values, numbers, booleans/null, punctuation.
+ * A string immediately followed by a colon is a property key; other strings are
+ * values.
+ */
+declare const json: Grammar;
+/** JavaScript: keywords, strings (incl. multi-line template literals), numbers,
+ * line + block comments (state carry), function calls, identifiers, operators. */
+declare const javascript: Grammar;
+declare const typescript: Grammar;
+/**
+ * CSS: at-rules, selectors, property names, values, numbers/units, strings, and
+ * `/* *\/` block comments (state carried across lines).
+ */
+declare const css: Grammar;
+/**
+ * HTML: tags, attribute names/values, `<!-- -->` comments (state carried across
+ * lines), and text. Inside a tag, attributes and strings are colored until `>`.
+ */
+declare const html: Grammar;
+/**
+ * Markdown: headings, strong/emphasis, inline code, fenced code blocks (state
+ * carried across lines), links, and list markers.
+ */
+declare const markdown: Grammar;
+/** Bash: comments, strings, keywords, variables (`$VAR` / `${...}`), operators. */
+declare const bash: Grammar;
+interface CodeEditorProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'defaultValue' | 'onChange' | 'wrap'> {
+  /** Controlled value. */
+  value?: string;
+  /** Initial value for uncontrolled use. */
+  defaultValue?: string;
+  /** Called with the new text on every edit. */
+  onValueChange?: (value: string) => void;
+  /** Grammar name (defaults to `plaintext`; unknown names fall back to it). */
+  language?: string;
+  /** Show the line-number gutter (default true). */
+  lineNumbers?: boolean;
+  /** Spaces per tab stop (default 2). */
+  tabSize?: number;
+  /** Insert spaces (default) vs a literal tab on Tab. */
+  insertSpaces?: boolean;
+  /** Soft-wrap long lines instead of scrolling horizontally (default false). */
+  wrap?: boolean;
+  /**
+   * Render only the visible lines for large documents. Defaults to auto
+   * (on above ~1000 lines); disabled when `wrap` makes row heights variable.
+   */
+  virtualize?: boolean;
+  /** Accessible label for the editor (defaults to the i18n "Code editor"). */
+  label?: string;
+}
+/**
+ * A lightweight code editor: a native `<textarea>` overlaid on a syntax-highlighted
+ * `Highlight` layer. The browser owns editing/caret/IME/undo/a11y; JS handles only
+ * tokenizing, scroll-sync, and Tab/Shift-Tab indent. Signal-driven, no banned hooks.
+ *
+ * Performance: tokenization is per-line memoized, the highlight layer is
+ * rAF-debounced (typing never blocks), and large documents window to the visible
+ * range while the textarea always holds the full text.
+ */
+declare function CodeEditor({
+  value,
+  defaultValue,
+  onValueChange,
+  language,
+  lineNumbers,
+  tabSize,
+  insertSpaces,
+  wrap,
+  virtualize,
+  readOnly,
+  disabled,
+  spellCheck,
+  label,
+  className,
+  style,
+  onKeyDown,
+  ...rest
+}: CodeEditorProps): import("react").JSX.Element;
+interface HighlightProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+  /** Code to render. */
+  value: string;
+  /** Grammar name (defaults to `plaintext`; unknown names fall back to it). */
+  language?: string;
+  /** Show the line-number gutter. */
+  lineNumbers?: boolean;
+  /** Soft-wrap long lines instead of scrolling horizontally. */
+  wrap?: boolean;
+  /** Spaces per tab stop (default 2). */
+  tabSize?: number;
+  /** Accessible label for the read-only code block. */
+  label?: string;
+  /** Ref to the scrollable `<pre>` (used by `CodeEditor` for scroll-sync). */
+  preRef?: Ref<HTMLPreElement>;
+  /** Ref to the gutter column (used by `CodeEditor` for scroll-sync). */
+  gutterRef?: Ref<HTMLDivElement>;
+}
+/**
+ * Read-only, syntax-highlighted `<pre><code>` rendered from the owned tokenizer.
+ * The same render layer `CodeEditor` overlays its `<textarea>` on. Signal-safe,
+ * themeable, and accessible — no banned hooks.
+ */
+declare function Highlight({
+  value,
+  language,
+  lineNumbers,
+  wrap,
+  tabSize,
+  label,
+  className,
+  preRef,
+  gutterRef,
+  style,
+  ...rest
+}: HighlightProps): import("react").JSX.Element;
+export { CodeEditor, type CodeEditorProps, type Grammar, type GrammarState, Highlight, type HighlightProps, type LineTokens, type Rule, type RuleSpec, type Token, type TokenKind, type TokenizeResult, bash, createRuleGrammar, css, getGrammar, html, javascript, json, listGrammars, markdown, plaintext, registerGrammar, tokenize, tokenizeDocument, typescript };

package/dist/index.js

@@ -0,0 +1,701 @@
+"use client";
+import { cn as e, useControllableSignal as t, useSignal as n, useSignalEffect as r, useSignals as i } from "@cascivo/core";
+import { builtin as a, t as o } from "@cascivo/i18n";
+import { useRef as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/engine/tokenize.ts
+var u = 5e3, d = /* @__PURE__ */ new Map(), f = "\0";
+function p(e, t, n) {
+	let r = `${e.name}${f}${n}${f}${t}`, i = d.get(r);
+	if (i) return d.delete(r), d.set(r, i), i;
+	let { tokens: a, state: o } = e.tokenizeLine(t, n), s = {
+		tokens: a,
+		endState: o
+	};
+	if (d.set(r, s), d.size > u) {
+		let e = d.keys().next().value;
+		e !== void 0 && d.delete(e);
+	}
+	return s;
+}
+function m(e, t) {
+	let n = t.split("\n"), r = [], i = e.initialState;
+	for (let t of n) {
+		let n = p(e, t, i);
+		r.push(n.tokens), i = n.endState;
+	}
+	return r;
+}
+//#endregion
+//#region src/engine/registry.ts
+var h = /* @__PURE__ */ new Map(), g = {
+	name: "plaintext",
+	initialState: "default",
+	tokenizeLine: (e) => ({
+		tokens: e.length > 0 ? [{
+			kind: "plain",
+			value: e
+		}] : [],
+		state: "default"
+	})
+};
+h.set(g.name, g);
+function _(e) {
+	h.set(e.name, e);
+}
+function v(e) {
+	if (e !== void 0) {
+		let t = h.get(e);
+		if (t) return t;
+	}
+	return h.get("plaintext");
+}
+function y() {
+	return [...h.keys()];
+}
+//#endregion
+//#region src/grammars/rules.ts
+function b(e) {
+	let t = {};
+	for (let [n, r] of Object.entries(e.states)) t[n] = r.map((e) => {
+		let t = `${e.match.flags.replace(/[gy]/g, "")}y`, n = {
+			re: new RegExp(e.match.source, t),
+			kind: e.kind
+		};
+		return e.push !== void 0 && (n.push = e.push), e.pop !== void 0 && (n.pop = e.pop), n;
+	});
+	return {
+		name: e.name,
+		initialState: "default",
+		tokenizeLine(e, n) {
+			let r = t[n] ? n : "default", i = [], a = -1, o = 0, s = (t) => {
+				a >= 0 && (i.push({
+					kind: "plain",
+					value: e.slice(a, t)
+				}), a = -1);
+			};
+			for (; o < e.length;) {
+				let n = t[r], c = !1;
+				for (let a of n) {
+					a.re.lastIndex = o;
+					let n = a.re.exec(e);
+					if (n !== null && n.index === o && n[0].length > 0) {
+						s(o), i.push({
+							kind: a.kind,
+							value: n[0]
+						}), o += n[0].length, a.pop ? r = "default" : a.push && t[a.push] && (r = a.push), c = !0;
+						break;
+					}
+				}
+				c || (a < 0 && (a = o), o++);
+			}
+			return s(e.length), {
+				tokens: i,
+				state: r
+			};
+		}
+	};
+}
+//#endregion
+//#region src/grammars/plaintext.ts
+var x = {
+	name: "plaintext",
+	initialState: "default",
+	tokenizeLine: (e) => ({
+		tokens: e.length > 0 ? [{
+			kind: "plain",
+			value: e
+		}] : [],
+		state: "default"
+	})
+};
+_(x);
+//#endregion
+//#region src/grammars/json.ts
+var S = b({
+	name: "json",
+	states: { default: [
+		{
+			match: /"(?:[^"\\]|\\.)*"(?=\s*:)/,
+			kind: "property"
+		},
+		{
+			match: /"(?:[^"\\]|\\.)*"/,
+			kind: "string"
+		},
+		{
+			match: /\b(?:true|false|null)\b/,
+			kind: "boolean"
+		},
+		{
+			match: /-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/,
+			kind: "number"
+		},
+		{
+			match: /[{}[\],]/,
+			kind: "punctuation"
+		},
+		{
+			match: /:/,
+			kind: "operator"
+		}
+	] }
+});
+_(S);
+//#endregion
+//#region src/grammars/clike.ts
+var C = /* @__PURE__ */ "async.await.break.case.catch.class.const.continue.debugger.default.delete.do.else.export.extends.finally.for.function.if.import.in.instanceof.let.new.of.return.static.super.switch.this.throw.try.typeof.var.void.while.with.yield.as.from.get.set".split(".");
+function w(e) {
+	return RegExp(`(?:${e.join("|")})\\b`);
+}
+function T(e, t, n = []) {
+	let r = [
+		{
+			match: /\/\/.*/,
+			kind: "comment"
+		},
+		{
+			match: /\/\*/,
+			kind: "comment",
+			push: "block"
+		},
+		{
+			match: /`/,
+			kind: "string",
+			push: "template"
+		},
+		{
+			match: /'(?:[^'\\]|\\.)*'/,
+			kind: "string"
+		},
+		{
+			match: /"(?:[^"\\]|\\.)*"/,
+			kind: "string"
+		},
+		{
+			match: /0[xX][0-9a-fA-F]+|0[bB][01]+|0[oO][0-7]+|(?:\d[\d_]*\.?\d*|\.\d+)(?:[eE][+-]?\d+)?n?/,
+			kind: "number"
+		},
+		{
+			match: /\b(?:true|false|null|undefined|NaN|Infinity)\b/,
+			kind: "boolean"
+		}
+	];
+	return n.length > 0 && r.push({
+		match: w(n),
+		kind: "type"
+	}), r.push({
+		match: w(t),
+		kind: "keyword"
+	}, {
+		match: /[A-Za-z_$][\w$]*(?=\s*\()/,
+		kind: "function"
+	}, {
+		match: /[A-Z][\w$]*/,
+		kind: "type"
+	}, {
+		match: /[A-Za-z_$][\w$]*/,
+		kind: "variable"
+	}, {
+		match: /[+\-*/%=<>!&|^~?]+/,
+		kind: "operator"
+	}, {
+		match: /[{}()[\];,.:]/,
+		kind: "punctuation"
+	}), b({
+		name: e,
+		states: {
+			default: r,
+			block: [
+				{
+					match: /\*\//,
+					kind: "comment",
+					pop: !0
+				},
+				{
+					match: /[^*]+/,
+					kind: "comment"
+				},
+				{
+					match: /\*/,
+					kind: "comment"
+				}
+			],
+			template: [
+				{
+					match: /\\./,
+					kind: "string"
+				},
+				{
+					match: /`/,
+					kind: "string",
+					pop: !0
+				},
+				{
+					match: /\$\{/,
+					kind: "punctuation"
+				},
+				{
+					match: /[^`\\$]+/,
+					kind: "string"
+				},
+				{
+					match: /\$/,
+					kind: "string"
+				}
+			]
+		}
+	});
+}
+//#endregion
+//#region src/grammars/javascript.ts
+var E = T("javascript", C);
+_(E);
+var D = T("typescript", C, [
+	"interface",
+	"type",
+	"enum",
+	"implements",
+	"namespace",
+	"declare",
+	"abstract",
+	"readonly",
+	"public",
+	"private",
+	"protected",
+	"keyof",
+	"infer",
+	"satisfies",
+	"is",
+	"asserts",
+	"override",
+	"string",
+	"number",
+	"boolean",
+	"any",
+	"unknown",
+	"never",
+	"object"
+]);
+_(D);
+//#endregion
+//#region src/grammars/css.ts
+var O = b({
+	name: "css",
+	states: {
+		default: [
+			{
+				match: /\/\*/,
+				kind: "comment",
+				push: "block"
+			},
+			{
+				match: /@[\w-]+/,
+				kind: "keyword"
+			},
+			{
+				match: /"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'/,
+				kind: "string"
+			},
+			{
+				match: /#[0-9a-fA-F]{3,8}\b/,
+				kind: "number"
+			},
+			{
+				match: /-?\d+(?:\.\d+)?(?:px|rem|em|%|vh|vw|s|ms|deg|fr|ch|ex)?/,
+				kind: "number"
+			},
+			{
+				match: /--[\w-]+/,
+				kind: "variable"
+			},
+			{
+				match: /[.#][\w-]+/,
+				kind: "tag"
+			},
+			{
+				match: /&|::?[\w-]+/,
+				kind: "tag"
+			},
+			{
+				match: /[\w-]+(?=\s*:)/,
+				kind: "property"
+			},
+			{
+				match: /[\w-]+(?=\s*\()/,
+				kind: "function"
+			},
+			{
+				match: /[{}();,:]/,
+				kind: "punctuation"
+			}
+		],
+		block: [
+			{
+				match: /\*\//,
+				kind: "comment",
+				pop: !0
+			},
+			{
+				match: /[^*]+/,
+				kind: "comment"
+			},
+			{
+				match: /\*/,
+				kind: "comment"
+			}
+		]
+	}
+});
+_(O);
+//#endregion
+//#region src/grammars/html.ts
+var k = b({
+	name: "html",
+	states: {
+		default: [
+			{
+				match: /<!--/,
+				kind: "comment",
+				push: "comment"
+			},
+			{
+				match: /<!?\/?[A-Za-z][\w-]*/,
+				kind: "tag",
+				push: "tag"
+			},
+			{
+				match: /&[a-zA-Z#0-9]+;/,
+				kind: "boolean"
+			}
+		],
+		comment: [
+			{
+				match: /-->/,
+				kind: "comment",
+				pop: !0
+			},
+			{
+				match: /[^-]+/,
+				kind: "comment"
+			},
+			{
+				match: /-/,
+				kind: "comment"
+			}
+		],
+		tag: [
+			{
+				match: /\/?>/,
+				kind: "tag",
+				pop: !0
+			},
+			{
+				match: /"(?:[^"\\]|\\.)*"|'[^']*'/,
+				kind: "string"
+			},
+			{
+				match: /[\w-]+(?=\s*=)/,
+				kind: "attr"
+			},
+			{
+				match: /=/,
+				kind: "operator"
+			},
+			{
+				match: /[\w-]+/,
+				kind: "attr"
+			}
+		]
+	}
+});
+_(k);
+//#endregion
+//#region src/grammars/markdown.ts
+var A = b({
+	name: "markdown",
+	states: {
+		default: [
+			{
+				match: /^```.*/,
+				kind: "keyword",
+				push: "fence"
+			},
+			{
+				match: /^#{1,6}\s.*/,
+				kind: "keyword"
+			},
+			{
+				match: /^\s*(?:[-*+]|\d+\.)\s/,
+				kind: "operator"
+			},
+			{
+				match: /^\s*>\s.*/,
+				kind: "comment"
+			},
+			{
+				match: /`[^`]+`/,
+				kind: "string"
+			},
+			{
+				match: /\*\*[^*]+\*\*|__[^_]+__/,
+				kind: "keyword"
+			},
+			{
+				match: /\*[^*\s][^*]*\*|_[^_\s][^_]*_/,
+				kind: "type"
+			},
+			{
+				match: /!?\[[^\]]*\]\([^)]*\)/,
+				kind: "function"
+			}
+		],
+		fence: [{
+			match: /^```.*/,
+			kind: "keyword",
+			pop: !0
+		}, {
+			match: /.+/,
+			kind: "string"
+		}]
+	}
+});
+_(A);
+//#endregion
+//#region src/grammars/bash.ts
+var j = b({
+	name: "bash",
+	states: { default: [
+		{
+			match: /#.*/,
+			kind: "comment"
+		},
+		{
+			match: /"(?:[^"\\]|\\.)*"/,
+			kind: "string"
+		},
+		{
+			match: /'[^']*'/,
+			kind: "string"
+		},
+		{
+			match: /\b(?:if|then|else|elif|fi|for|while|until|do|done|case|esac|in|function|select|return|exit|break|continue|local|export|readonly|declare|echo|cd|source|set|unset)\b/,
+			kind: "keyword"
+		},
+		{
+			match: /\$\{[^}]*\}|\$[A-Za-z_]\w*|\$[0-9@*#?$!]/,
+			kind: "variable"
+		},
+		{
+			match: /-?\b\d+\b/,
+			kind: "number"
+		},
+		{
+			match: /[A-Za-z_][\w-]*(?=\s*\(\s*\))/,
+			kind: "function"
+		},
+		{
+			match: /[|&;<>()]+|&&|\|\||=/,
+			kind: "operator"
+		}
+	] }
+});
+_(j);
+var M = {
+	root: "_root_4k2k5_2",
+	gutter: "_gutter_4k2k5_17",
+	gutterLine: "_gutterLine_4k2k5_28",
+	pre: "_pre_4k2k5_33",
+	code: "_code_4k2k5_45",
+	line: "_line_4k2k5_50",
+	plain: "_plain_4k2k5_65",
+	keyword: "_keyword_4k2k5_68",
+	string: "_string_4k2k5_71",
+	number: "_number_4k2k5_74",
+	comment: "_comment_4k2k5_77",
+	function: "_function_4k2k5_81",
+	type: "_type_4k2k5_84",
+	operator: "_operator_4k2k5_87",
+	punctuation: "_punctuation_4k2k5_90",
+	variable: "_variable_4k2k5_93",
+	tag: "_tag_4k2k5_96",
+	attr: "_attr_4k2k5_99",
+	regexp: "_regexp_4k2k5_102",
+	boolean: "_boolean_4k2k5_105",
+	property: "_property_4k2k5_108"
+};
+//#endregion
+//#region src/editor/view.tsx
+function N(e, t = 0, n = e.length) {
+	let r = [];
+	for (let i = t; i < n; i++) {
+		let t = e[i];
+		r.push(/* @__PURE__ */ c("span", {
+			className: M.line,
+			children: t.length === 0 ? "​" : t.map((e, t) => /* @__PURE__ */ c("span", {
+				className: M[e.kind],
+				children: e.value
+			}, t))
+		}, i));
+	}
+	return r;
+}
+function P({ count: e, className: t, gutterRef: n, start: r = 0, end: i = e, topPad: a = 0, bottomPad: o = 0 }) {
+	let s = [];
+	for (let e = r + 1; e <= i; e++) s.push(/* @__PURE__ */ c("span", {
+		className: M.gutterLine,
+		children: e
+	}, e));
+	return /* @__PURE__ */ l("div", {
+		ref: n,
+		className: t,
+		"aria-hidden": "true",
+		children: [
+			a > 0 && /* @__PURE__ */ c("div", { style: { blockSize: a } }),
+			s,
+			o > 0 && /* @__PURE__ */ c("div", { style: { blockSize: o } })
+		]
+	});
+}
+var F = {
+	root: "_root_q71hw_2",
+	textarea: "_textarea_q71hw_18",
+	gutter: "_gutter_q71hw_23",
+	codeArea: "_codeArea_q71hw_35",
+	pre: "_pre_q71hw_42",
+	currentLine: "_currentLine_q71hw_57"
+}, I = 1e3, L = 12;
+function R({ value: u, defaultValue: d, onValueChange: f, language: p = "plaintext", lineNumbers: h = !0, tabSize: g = 2, insertSpaces: _ = !0, wrap: y = !1, virtualize: b, readOnly: x = !1, disabled: S = !1, spellCheck: C = !1, label: w, className: T, style: E, onKeyDown: D, ...O }) {
+	i();
+	let [k, A] = t({
+		value: u,
+		defaultValue: d ?? "",
+		onChange: f
+	}), j = s(null), M = s(null), R = s(null), z = s(null), B = n(k.value), V = n(0), H = n(0), U = n(0);
+	r(() => {
+		let e = k.value;
+		if (typeof requestAnimationFrame != "function") {
+			B.value = e;
+			return;
+		}
+		let t = requestAnimationFrame(() => {
+			B.value = e;
+		});
+		return () => cancelAnimationFrame(t);
+	}), r(() => {
+		let e = z.current;
+		if (!e) return;
+		let t = () => {
+			let t = Number.parseFloat(getComputedStyle(e).lineHeight);
+			U.value = Number.isFinite(t) && t > 0 ? t : 0, H.value = e.clientHeight;
+		}, n = () => {
+			V.value = e.scrollTop, H.value = e.clientHeight, M.current && (M.current.scrollTop = e.scrollTop, M.current.scrollLeft = e.scrollLeft), R.current && (R.current.scrollTop = e.scrollTop);
+		}, r = () => {
+			let t = e.value.slice(0, e.selectionStart).split("\n").length - 1;
+			j.current?.style.setProperty("--cascivo-editor-caret-line", String(t));
+		};
+		return t(), r(), e.addEventListener("scroll", n), e.addEventListener("keyup", r), e.addEventListener("click", r), e.addEventListener("input", r), () => {
+			e.removeEventListener("scroll", n), e.removeEventListener("keyup", r), e.removeEventListener("click", r), e.removeEventListener("input", r);
+		};
+	});
+	let W = m(v(p), B.value), G = W.length, K = U.value, q = (b ?? G > I) && !y && K > 0, J = 0, Y = G;
+	if (q) {
+		J = Math.max(0, Math.floor(V.value / K) - L);
+		let e = Math.ceil(H.value / K);
+		Y = Math.min(G, J + e + L * 2);
+	}
+	let X = J * K, Z = (G - Y) * K, Q = (e) => {
+		if (e.key === "Tab" && !x && !S) {
+			e.preventDefault();
+			let t = e.currentTarget, { selectionStart: n, selectionEnd: r, value: i } = t, a = _ ? " ".repeat(g) : "	", o = i.lastIndexOf("\n", n - 1) + 1;
+			if (e.shiftKey) {
+				let e = i.slice(o, r).replace(RegExp(`^(?:\\t| {1,${g}})`, "gm"), "");
+				t.setRangeText(e, o, r, "select");
+			} else if (n === r) t.setRangeText(a, n, r, "end");
+			else {
+				let e = i.slice(o, r).replace(/^/gm, a);
+				t.setRangeText(e, o, r, "select");
+			}
+			A(t.value);
+		}
+		D?.(e);
+	}, $ = {
+		"--cascivo-editor-tab-size": g,
+		...E
+	};
+	return /* @__PURE__ */ l("div", {
+		ref: j,
+		className: e(F.root, T),
+		"data-wrap": y,
+		"data-line-numbers": h,
+		style: $,
+		children: [h && /* @__PURE__ */ c(P, {
+			count: G,
+			className: F.gutter,
+			gutterRef: R,
+			start: J,
+			end: Y,
+			topPad: X,
+			bottomPad: Z
+		}), /* @__PURE__ */ l("div", {
+			className: F.codeArea,
+			children: [/* @__PURE__ */ l("pre", {
+				ref: M,
+				className: F.pre,
+				"aria-hidden": "true",
+				children: [
+					/* @__PURE__ */ c("div", { className: F.currentLine }),
+					X > 0 && /* @__PURE__ */ c("div", { style: { blockSize: X } }),
+					/* @__PURE__ */ c("code", { children: N(W, J, Y) }),
+					Z > 0 && /* @__PURE__ */ c("div", { style: { blockSize: Z } })
+				]
+			}), /* @__PURE__ */ c("textarea", {
+				ref: z,
+				className: F.textarea,
+				value: k.value,
+				onChange: (e) => A(e.currentTarget.value),
+				onKeyDown: Q,
+				readOnly: x,
+				disabled: S,
+				spellCheck: C,
+				"aria-label": w ?? o(a.editor.label),
+				autoCapitalize: "off",
+				autoCorrect: "off",
+				autoComplete: "off",
+				wrap: y ? "soft" : "off",
+				...O
+			})]
+		})]
+	});
+}
+//#endregion
+//#region src/editor/highlight/highlight.tsx
+function z({ value: t, language: n = "plaintext", lineNumbers: r = !1, wrap: a = !1, tabSize: o = 2, label: s, className: u, preRef: d, gutterRef: f, style: p, ...h }) {
+	i();
+	let g = m(v(n), t), _ = {
+		"--cascivo-editor-tab-size": o,
+		...p
+	};
+	return /* @__PURE__ */ l("div", {
+		className: e(M.root, u),
+		"data-wrap": a,
+		"data-line-numbers": r,
+		style: _,
+		"aria-label": s,
+		...h,
+		children: [r && /* @__PURE__ */ c(P, {
+			count: g.length,
+			className: M.gutter,
+			gutterRef: f
+		}), /* @__PURE__ */ c("pre", {
+			ref: d,
+			className: M.pre,
+			children: /* @__PURE__ */ c("code", {
+				className: M.code,
+				children: N(g)
+			})
+		})]
+	});
+}
+//#endregion
+export { R as CodeEditor, z as Highlight, j as bash, b as createRuleGrammar, O as css, v as getGrammar, k as html, E as javascript, S as json, y as listGrammars, A as markdown, x as plaintext, _ as registerGrammar, p as tokenize, m as tokenizeDocument, D as typescript };

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@cascivo/editor",
+  "version": "0.0.1",
+  "private": false,
+  "description": "Lightweight CSS-native code editor — native textarea overlay + owned zero-dependency tokenizer",
+  "keywords": [
+    "cascivo",
+    "code-editor",
+    "css",
+    "design-system",
+    "react",
+    "signals",
+    "syntax-highlighting",
+    "textarea"
+  ],
+  "homepage": "https://github.com/cascivo/cascivo/tree/main/packages/editor#readme",
+  "bugs": "https://github.com/cascivo/cascivo/issues",
+  "license": "MIT",
+  "author": "urbanisierung",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cascivo/cascivo.git",
+    "directory": "packages/editor"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./styles.css": "./dist/editor.css"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "scripts": {
+    "build": "vp build && node scripts/flatten-types.mjs && node scripts/check-types-flat.mjs",
+    "check": "tsc --noEmit",
+    "test": "vp test"
+  },
+  "dependencies": {
+    "@cascivo/core": "workspace:^",
+    "@cascivo/i18n": "workspace:^"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "catalog:",
+    "@testing-library/react": "catalog:",
+    "@testing-library/user-event": "catalog:",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "fast-check": "catalog:",
+    "jsdom": "catalog:",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "typescript": "catalog:",
+    "vite-plus": "catalog:"
+  },
+  "peerDependencies": {
+    "@preact/signals-react": ">=2.0.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  }
+}

package/readme.body.md

@@ -0,0 +1,42 @@
+A lightweight, CSS-native, signal-driven code editor for cascivo. `CodeEditor` overlays a native `<textarea>` on a syntax-highlighted `<pre>`, so the browser owns the caret, selection, IME, undo, and accessibility — JS is limited to a tiny owned tokenizer and scroll-sync. `Highlight` is the read-only renderer for snippets and docs. Zero runtime dependencies, themeable through the cascivo token system.
+
+## Install
+
+```sh
+pnpm add @cascivo/editor @preact/signals-react
+```
+
+`react`, `react-dom`, and `@preact/signals-react` are peer dependencies — install them in your app.
+
+## Usage
+
+```tsx
+import { CodeEditor } from '@cascivo/editor'
+import '@cascivo/editor/styles.css' // required — maps to the dist `editor.css`
+import '@cascivo/themes/dark.css' // any cascivo theme drives the editor colors
+
+export function Example() {
+  return <CodeEditor language="typescript" lineNumbers defaultValue={`const x = 1\n`} />
+}
+```
+
+The editor is CSS-token-themed: drop it inside any element carrying a `data-theme` (or import a
+theme stylesheet) and it picks up the same palette, radii, and typography as the rest of cascivo —
+including the syntax colors, which map onto the `--cascivo-editor-syntax-*` palette.
+
+### Read-only highlighting
+
+```tsx
+import { Highlight } from '@cascivo/editor'
+;<Highlight language="json" value={`{ "ok": true }`} />
+```
+
+### Languages
+
+Ships small, tree-shakeable grammars: `plaintext`, `json`, `javascript`, `typescript`, `css`,
+`html`, `markdown`, `bash`. Register your own with `registerGrammar(grammar)`.
+
+### React apps must subscribe to signals
+
+`CodeEditor` and `Highlight` are signal-driven. In a plain React app (no Babel signals transform),
+they already call `useSignals()` internally — no extra wiring is required.