next-live 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,33 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
+
+## [Unreleased]
+
+## [0.1.0] - 2026-09-12
+
+### Added
+
+- Live TSX/JSX evaluation for the Next.js App Router with real ESM `import` statements and a module registry.
+- Three entry points: `next-live` (provider, preview, hooks, engine), `next-live/editor` (syntax-highlighted editor), `next-live/server` (precompile, validateSnippet).
+- `onCodeChange` on `<LiveProvider>`, called when code is edited from inside, not when the `code` prop changes from outside.
+- `precompiledTransform` on the client entry, wrap server-precompiled output without pulling Sucrase into the page bundle.
+- `validateSnippet` / `validateSnippets` for CI validation of stored snippets.
+- `useLiveModule` for non-UI snippets (validators, transformers, config).
+- Render-loop breaker, error boundary, SSR-safe hydration, lazy Sucrase loading.
+- Error-line highlighting in `<LiveEditor>`, compile and runtime errors mark the reported line in the built-in editor; `LiveEditorRenderProps` exposes `error`, `errorLine`, and `errorColumn` for custom editors.
+- `onCompileSuccess` on `<LiveProvider>` / `useLiveRunner` / `useLiveModule`, fires after a successful compile with `compileId`, sorted `imports`, optional `via`, and `durationMs`.
+- `CompileResult` and `CompileModuleResult` now include sorted `imports`.
+- Opt-in stricter `validateSnippet` options: `maxSourceBytes`, `forbidNodeBuiltins`, `forbidRemoteImports`, `denySpecifiers`.
+- `errorPosition` and `PositionedError` exported from `next-live`.
+- `resolveSubpaths` on `<LiveProvider>` / `useLiveRunner` / `useLiveModule`, opt in to resolving `pkg/Sub` against a registered `pkg` by property access.
+
+### Changed
+
+- **`<LiveEditor>` is exported from `next-live/editor`, not `next-live`.** Preview-only pages that never edit snippets should import only from `next-live`, measured ~16 KB instead of ~97 KB when Prism is not needed.
+- `prism-react-renderer` is an **optional** peer dependency. Package managers do not install it automatically, so run `npm install prism-react-renderer` yourself if you import `next-live/editor`. Preview-only pages need nothing extra.
+
+[unreleased]: https://github.com/khaledOghli/next-live/compare/v0.1.0...HEAD
+[0.1.0]: https://github.com/khaledOghli/next-live/releases/tag/v0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Khaled Oghli
+
+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,142 @@
+# next-live
+
+[![npm version](https://img.shields.io/npm/v/next-live.svg?color=0b7285)](https://www.npmjs.com/package/next-live)
+[![CI](https://github.com/khaledOghli/next-live/actions/workflows/ci.yml/badge.svg)](https://github.com/khaledOghli/next-live/actions/workflows/ci.yml)
+[![npm downloads](https://img.shields.io/npm/dm/next-live.svg?color=0b7285)](https://www.npmjs.com/package/next-live)
+[![bundle size](https://img.shields.io/bundlephobia/minzip/next-live?label=minzip)](https://bundlephobia.com/package/next-live)
+[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/khaledOghli/next-live/blob/main/LICENSE)
+
+Live TSX/JSX evaluation for **React**, real ESM `import` statements, a module
+registry instead of a global scope bag, and no hydration mismatches.
+
+**Next.js is not required.** It works in Vite, Remix, CRA, or anywhere React
+runs. The name reflects where it was designed and what it is tuned for: App
+Router SSR safety, and docs written against Next 16.
+
+```bash
+npm install next-live
+```
+
+Using the built-in editor? It needs one optional peer, which npm does **not**
+install for you:
+
+```bash
+npm install next-live prism-react-renderer
+```
+
+Preview-only pages never import `next-live/editor`, and should skip it, that is
+the whole point of keeping the highlighter on a separate entry.
+
+## Quick start
+
+```tsx
+'use client';
+
+import { LiveProvider, LivePreview, LiveError } from 'next-live';
+import { LiveEditor } from 'next-live/editor';
+
+export function Playground({ source }: { source: string }) {
+  return (
+    <LiveProvider code={source}>
+      <LiveEditor />
+      <LivePreview />
+      <LiveError />
+    </LiveProvider>
+  );
+}
+```
+
+The snippet is written the way a real file is written:
+
+```tsx
+import { useState } from 'react';
+
+export default function App() {
+  const [count, setCount] = useState(0);
+  return <button onClick={() => setCount(count + 1)}>clicked {count} times</button>;
+}
+```
+
+To let snippets reach your own code, hand it over explicitly:
+
+```tsx
+<LiveProvider
+  code={source}
+  modules={{ '@app/store': defineLoader(() => import('@/lib/store')) }}
+  props={{ user }}
+/>
+```
+
+## When to use something else
+
+Sandpack solves a different problem: it boots a virtual filesystem and an iframe
+per instance. `next-live` is for embedded live tools and control panels, where a
+snippet should share your page's React instance and your live objects.
+
+## What you get
+
+- **Real ESM.** `import`, `export default`, namespace imports, deep subpaths.
+- **TypeScript and JSX**, transpiled by Sucrase in single-digit milliseconds.
+- **A module registry** - hand snippets your store, your UI kit, your helpers.
+- **Live props by reference.** Pass a store or a class instance; a snippet
+  mutating it updates your app.
+- **SSR-safe.** No hydration mismatch, no `next/dynamic` needed.
+- **Contained failures.** An error boundary and a render-loop breaker keep a bad
+  snippet from taking down the page.
+- **Not just components.** `useLiveModule` runs snippets that export
+  validators, transformers, or config rather than UI.
+- **CI validation.** `validateSnippets` checks every stored snippet still
+  compiles against your registry, so an SDK rename fails the build instead of
+  breaking apps silently.
+- **Small, and lazy.** A page that only runs snippets pays **16.1 KB**; the
+  editor and its highlighter are a separate entry, and the transpiler is a
+  chunk fetched on first compile.
+- **Headless if you want it.** `useLiveRunner` for a completely custom UI.
+- **Server precompilation** via `next-live/server`, so the browser can skip the
+  transpiler entirely.
+
+## Documentation
+
+**[→ Full documentation](./docs/README.md)**
+
+| | |
+| --- | --- |
+| [Getting started](./docs/01-getting-started.md) | Install and first working preview |
+| [The module registry](./docs/02-module-registry.md) | How `import` resolves, the core concept |
+| [Sharing libraries with your app](./docs/03-sharing-your-app-libraries.md) | One instance, not two copies |
+| [Scaling to many apps](./docs/04-scaling.md) | Keeping the bundle small |
+| [Security](./docs/05-security.md) | Trust model and CSP, read before deploying |
+| [API reference](./docs/06-api-reference.md) | Every export and prop |
+| [Troubleshooting](./docs/07-troubleshooting.md) | Real errors and their fixes |
+| [Integration guide](./docs/08-integration-guide.md) | End-to-end walkthrough |
+| [Snippets that are not components](./docs/09-non-ui-snippets.md) | Validators, transformers, config |
+| [Validating stored snippets in CI](./docs/10-validating-in-ci.md) | Catch SDK renames before users do |
+
+## Two things to know up front
+
+**It needs `'unsafe-eval'` in your CSP**, scoped to the routes that run snippets.
+That is inherent to compiling at runtime. [Security](./docs/05-security.md)
+explains why it is narrower than it sounds and how to contain it.
+
+**It is not a sandbox.** Snippets run with your page's authority. That is what
+makes shared stores and live props work, and it means snippet authors must be
+people you trust.
+
+## Requirements
+
+React 19+ and Node 20.9+. Nothing else is required: the library imports only
+`react`, `react/jsx-runtime`, `react/jsx-dev-runtime`, `sucrase`, and
+`prism-react-renderer` on the `/editor` entry.
+
+## Contributing
+
+Bug reports, feature requests and pull requests are welcome. Start with
+[CONTRIBUTING.md](https://github.com/khaledOghli/next-live/blob/main/CONTRIBUTING.md),
+and see the [changelog](./CHANGELOG.md) for what has changed.
+
+Found a security issue? Do not open an issue, follow
+[SECURITY.md](https://github.com/khaledOghli/next-live/blob/main/SECURITY.md).
+
+## License
+
+[MIT](https://github.com/khaledOghli/next-live/blob/main/LICENSE) (c) KhaledOghli

package/dist/editor.cjs

@@ -0,0 +1,247 @@
+"use client";
+'use strict';
+
+var react = require('react');
+var prismReactRenderer = require('prism-react-renderer');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/core/positions.ts
+function errorPosition(error) {
+  if (error === null || error === void 0) return null;
+  const positioned = error;
+  if (positioned.line === void 0 || positioned.line < 1) return null;
+  return {
+    line: positioned.line,
+    ...positioned.column !== void 0 ? { column: positioned.column } : {}
+  };
+}
+var CONTEXT_KEY = /* @__PURE__ */ Symbol.for("next-live.LiveContext");
+function createLiveContext() {
+  const store = globalThis;
+  const existing = store[CONTEXT_KEY];
+  if (existing) return existing;
+  const context = react.createContext(null);
+  context.displayName = "LiveContext";
+  store[CONTEXT_KEY] = context;
+  return context;
+}
+var LiveContext = createLiveContext();
+var DEFAULT_ERROR_LINE_STYLE = {
+  background: "rgba(179, 38, 30, 0.35)",
+  boxShadow: "inset 3px 0 0 #b3261e"
+};
+var DEFAULT_FOCUS_RING_STYLE = {
+  outline: "2px solid #4d9fff",
+  outlineOffset: "2px"
+};
+var SHARED_TEXT_STYLE = {
+  margin: 0,
+  border: 0,
+  fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace',
+  fontSize: "0.8125rem",
+  lineHeight: 1.6,
+  fontVariantLigatures: "none",
+  tabSize: 2,
+  whiteSpace: "pre",
+  wordBreak: "normal",
+  overflowWrap: "normal"
+};
+var VISUALLY_HIDDEN = {
+  position: "absolute",
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: -1,
+  overflow: "hidden",
+  clip: "rect(0 0 0 0)",
+  whiteSpace: "nowrap",
+  border: 0
+};
+function prefersVisibleFocus(element) {
+  try {
+    return element.matches(":focus-visible");
+  } catch {
+    return true;
+  }
+}
+function LiveEditor(props) {
+  const {
+    className,
+    style,
+    theme = prismReactRenderer.themes.vsDark,
+    readOnly: readOnlyProp,
+    tabSize = 2,
+    padding = 16,
+    errorLineStyle = DEFAULT_ERROR_LINE_STYLE,
+    errorLineClassName,
+    code: codeProp,
+    onChange: onChangeProp,
+    language: languageProp,
+    error: errorProp,
+    prism,
+    focusRingStyle = DEFAULT_FOCUS_RING_STYLE,
+    "aria-label": ariaLabel = "Live code editor",
+    renderEditor
+  } = props;
+  const live = react.useContext(LiveContext);
+  const highlightRef = react.useRef(null);
+  const hintId = react.useId();
+  const [tabEscapes, setTabEscapes] = react.useState(false);
+  const [focusRing, setFocusRing] = react.useState(false);
+  if (codeProp === void 0 && live === null) {
+    throw new Error(
+      "<LiveEditor> needs either a surrounding <LiveProvider> or a `code` prop. Pass `code` (and `onChange` to make it editable) to use it standalone."
+    );
+  }
+  const code = codeProp ?? live?.code ?? "";
+  const language = languageProp ?? live?.language ?? "tsx";
+  const error = errorProp !== void 0 ? errorProp : live?.error ?? null;
+  const setCode = onChangeProp ?? (codeProp === void 0 ? live?.setCode : void 0);
+  const readOnly = readOnlyProp ?? setCode === void 0;
+  const position = error ? errorPosition(error) : null;
+  const errorLine = position?.line;
+  const errorColumn = position?.column;
+  const handleChange = react.useCallback(
+    (value) => {
+      setCode?.(value);
+    },
+    [setCode]
+  );
+  const renderProps = {
+    code,
+    onChange: handleChange,
+    language,
+    error,
+    errorLine,
+    errorColumn
+  };
+  if (renderEditor) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderEditor(renderProps) });
+  }
+  const syncScroll = (event) => {
+    const node = highlightRef.current;
+    if (!node) return;
+    node.scrollTop = event.currentTarget.scrollTop;
+    node.scrollLeft = event.currentTarget.scrollLeft;
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Escape") {
+      setTabEscapes(true);
+      return;
+    }
+    if (event.key !== "Tab") {
+      if (!event.shiftKey && !event.ctrlKey && !event.altKey && !event.metaKey) {
+        if (tabEscapes) setTabEscapes(false);
+      }
+      return;
+    }
+    if (tabEscapes || readOnly) {
+      setTabEscapes(false);
+      return;
+    }
+    event.preventDefault();
+    const target = event.currentTarget;
+    const { selectionStart, selectionEnd, value } = target;
+    const indent = " ".repeat(tabSize);
+    const next = value.slice(0, selectionStart) + indent + value.slice(selectionEnd);
+    handleChange(next);
+    requestAnimationFrame(() => {
+      target.selectionStart = target.selectionEnd = selectionStart + indent.length;
+    });
+  };
+  const layerStyle = {
+    ...SHARED_TEXT_STYLE,
+    tabSize,
+    padding,
+    gridArea: "1 / 1",
+    minWidth: 0,
+    minHeight: 0,
+    overflow: "auto"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className,
+      style: {
+        // A single-cell grid makes both layers size to the larger of the two,
+        // which absolute positioning cannot do without a fixed height.
+        display: "grid",
+        position: "relative",
+        background: theme.plain.backgroundColor ?? "#1e1e1e",
+        ...style,
+        // The ring is painted on the wrapper rather than the textarea, whose
+        // own outline would be clipped by its scroll box. Applied after the
+        // caller's `style` so it is not accidentally overwritten.
+        ...focusRing && focusRingStyle ? focusRingStyle : null
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(prismReactRenderer.Highlight, { prism, code, language, theme, children: ({ style: prismStyle, tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ jsxRuntime.jsx(
+          "pre",
+          {
+            ref: highlightRef,
+            "aria-hidden": "true",
+            style: { ...prismStyle, ...layerStyle },
+            children: tokens.map((line, i) => {
+              const isErrorLine = errorLineStyle !== null && errorLine === i + 1;
+              const lineProps = getLineProps({ line });
+              return (
+                // eslint-disable-next-line react/no-array-index-key
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    ...lineProps,
+                    className: [lineProps.className, isErrorLine ? errorLineClassName : void 0].filter(Boolean).join(" "),
+                    style: isErrorLine ? { ...lineProps.style, ...errorLineStyle } : lineProps.style,
+                    children: line.map((token, key) => (
+                      // eslint-disable-next-line react/no-array-index-key
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { ...getTokenProps({ token }) }, key)
+                    ))
+                  },
+                  i
+                )
+              );
+            })
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "textarea",
+          {
+            value: code,
+            onChange: (event) => handleChange(event.target.value),
+            onScroll: syncScroll,
+            onKeyDown: handleKeyDown,
+            onFocus: (event) => setFocusRing(prefersVisibleFocus(event.currentTarget)),
+            onBlur: () => {
+              setFocusRing(false);
+              setTabEscapes(false);
+            },
+            readOnly,
+            spellCheck: false,
+            autoCapitalize: "off",
+            autoCorrect: "off",
+            autoComplete: "off",
+            "aria-label": ariaLabel,
+            "aria-describedby": readOnly ? void 0 : hintId,
+            "aria-keyshortcuts": readOnly ? void 0 : "Escape",
+            style: {
+              ...layerStyle,
+              resize: "none",
+              // The wrapper paints the ring instead - see above.
+              outline: "none",
+              background: "transparent",
+              // The text itself is invisible; only the highlighted layer is read.
+              // The caret is painted separately so it stays visible.
+              color: "transparent",
+              caretColor: theme.plain.color ?? "#fff"
+            }
+          }
+        ),
+        !readOnly && /* @__PURE__ */ jsxRuntime.jsx("span", { id: hintId, style: VISUALLY_HIDDEN, children: "Tab inserts spaces. Press Escape and then Tab to move focus out of the editor." })
+      ]
+    }
+  );
+}
+
+exports.LiveEditor = LiveEditor;
+//# sourceMappingURL=editor.cjs.map
+//# sourceMappingURL=editor.cjs.map

package/dist/editor.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/core/positions.ts","../src/context/LiveContext.tsx","../src/components/LiveEditor.tsx"],"names":["createContext","themes","useContext","useRef","useId","useState","useCallback","jsx","Fragment","jsxs","Highlight"],"mappings":"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","file":"editor.cjs","sourcesContent":["export interface PositionedError extends Error {\n  line?: number;\n  column?: number;\n}\n\n/**\n * Reads a 1-based line/column from a compile or runtime error, if present.\n *\n * Accepts a nullish value and returns null for it. The state this is meant to\n * be fed from - `LiveRunnerState.error` and `LiveContextValue.error` - is\n * `Error | null`, so `errorPosition(error)` is the natural thing to write in a\n * custom editor. TypeScript rejects that, but a JavaScript host would have hit\n * a TypeError instead of the \"no position\" answer the name promises.\n */\nexport function errorPosition(error: Error | null | undefined): { line: number; column?: number } | null {\n  if (error === null || error === undefined) return null;\n  const positioned = error as PositionedError;\n  if (positioned.line === undefined || positioned.line < 1) return null;\n  return {\n    line: positioned.line,\n    ...(positioned.column !== undefined ? { column: positioned.column } : {}),\n  };\n}\n","'use client';\n\nimport { createContext } from 'react';\nimport type { Context } from 'react';\nimport type { LiveContextValue } from '../core/types';\n\n/**\n * One context, however many copies of this module exist.\n *\n * The context is cached on a global symbol rather than being a plain\n * module-level constant, because a plain one is only unique per module\n * instance, and there are realistic ways to end up with more than one:\n *\n * - The CommonJS build cannot code-split, so `index.cjs` and `editor.cjs` each\n *   inline their own copy. Without this, `<LiveEditor>` from `next-live/editor`\n *   would read a different context than `<LiveProvider>` provides and throw\n *   \"useLiveContext must be called inside a <LiveProvider>\".\n * - npm can install two versions of the package side by side.\n *\n * Keying on a symbol means every copy resolves to whichever created it first,\n * so provider and consumer always meet.\n */\nconst CONTEXT_KEY = Symbol.for('next-live.LiveContext');\n\ntype GlobalWithContext = typeof globalThis & {\n  [CONTEXT_KEY]?: Context<LiveContextValue | null>;\n};\n\nfunction createLiveContext(): Context<LiveContextValue | null> {\n  const store = globalThis as GlobalWithContext;\n  const existing = store[CONTEXT_KEY];\n  if (existing) return existing;\n\n  /**\n   * Null rather than a default value, so `useLiveContext` can tell \"outside a\n   * provider\" apart from \"inside a provider that has not compiled yet\".\n   */\n  const context = createContext<LiveContextValue | null>(null);\n  context.displayName = 'LiveContext';\n  store[CONTEXT_KEY] = context;\n  return context;\n}\n\nexport const LiveContext = createLiveContext();\n","'use client';\n\nimport { useCallback, useContext, useId, useRef, useState } from 'react';\nimport type { CSSProperties, ReactNode } from 'react';\nimport { Highlight, themes } from 'prism-react-renderer';\nimport type { Prism, PrismTheme } from 'prism-react-renderer';\nimport { errorPosition } from '../core/positions';\nimport { LiveContext } from '../context/LiveContext';\n\nexport interface LiveEditorRenderProps {\n  code: string;\n  onChange: (code: string) => void;\n  language: string;\n  error: Error | null;\n  errorLine?: number;\n  errorColumn?: number;\n}\n\nexport interface LiveEditorProps {\n  className?: string;\n  style?: CSSProperties;\n  theme?: PrismTheme;\n  /** Read-only mode, for showing an app's source without allowing edits. */\n  readOnly?: boolean;\n  /** Spaces inserted by the Tab key. Default 2. */\n  tabSize?: number;\n  padding?: number;\n  /** Paint-only highlight for the error line. Pass `null` to disable. */\n  errorLineStyle?: CSSProperties | null;\n  errorLineClassName?: string;\n  /**\n   * Standalone mode: the code to show, when there is no `<LiveProvider>`\n   * above. Inside a provider this overrides the provider's code, which is\n   * rarely what you want - omit it and let the context supply it.\n   */\n  code?: string;\n  /**\n   * Standalone mode: notified on every edit. Without it - and without a\n   * provider to call `setCode` on - there is nothing to write an edit to, so\n   * the editor renders read-only.\n   */\n  onChange?: (code: string) => void;\n  /** Highlighting language. Defaults to the provider's, then `'tsx'`. */\n  language?: string;\n  /** Error to underline. Defaults to the provider's. */\n  error?: Error | null;\n  /**\n   * A Prism instance with extra languages registered, for highlighting\n   * anything outside `prism-react-renderer`'s built-in set.\n   *\n   * ```ts\n   * import { Prism } from 'prism-react-renderer';\n   * (globalThis as any).Prism = Prism;\n   * await import('prismjs/components/prism-rust');\n   * ```\n   */\n  prism?: typeof Prism;\n  /**\n   * Ring painted around the editor while it holds keyboard focus. Pass `null`\n   * to disable - but then paint your own, or keyboard users cannot see where\n   * they are (WCAG 2.4.7).\n   */\n  focusRingStyle?: CSSProperties | null;\n  /** Overrides the default accessible name. */\n  'aria-label'?: string;\n  /**\n   * Replaces the built-in editor entirely - drop in CodeMirror, Monaco, or\n   * anything else while keeping the rest of the provider wiring.\n   */\n  renderEditor?: (props: LiveEditorRenderProps) => ReactNode;\n}\n\nconst DEFAULT_ERROR_LINE_STYLE: CSSProperties = {\n  background: 'rgba(179, 38, 30, 0.35)',\n  boxShadow: 'inset 3px 0 0 #b3261e',\n};\n\n/**\n * Two pixels of high-contrast outline, offset so it reads against both the\n * editor background and the page behind it.\n */\nconst DEFAULT_FOCUS_RING_STYLE: CSSProperties = {\n  outline: '2px solid #4d9fff',\n  outlineOffset: '2px',\n};\n\n/**\n * Typography shared by the textarea and the highlighted layer beneath it.\n *\n * Every value here has to match in both layers or the visible text will drift\n * out of alignment with the caret - that is the whole difficulty of this\n * technique, so the styles live in one object rather than being repeated.\n */\nconst SHARED_TEXT_STYLE: CSSProperties = {\n  margin: 0,\n  border: 0,\n  fontFamily:\n    'ui-monospace, SFMono-Regular, Menlo, Consolas, \"Liberation Mono\", monospace',\n  fontSize: '0.8125rem',\n  lineHeight: 1.6,\n  fontVariantLigatures: 'none',\n  tabSize: 2,\n  whiteSpace: 'pre',\n  wordBreak: 'normal',\n  overflowWrap: 'normal',\n};\n\n/** Hides the focus hint from sight while leaving it on the accessibility tree. */\nconst VISUALLY_HIDDEN: CSSProperties = {\n  position: 'absolute',\n  width: 1,\n  height: 1,\n  padding: 0,\n  margin: -1,\n  overflow: 'hidden',\n  clip: 'rect(0 0 0 0)',\n  whiteSpace: 'nowrap',\n  border: 0,\n};\n\n/**\n * `:focus-visible` is what decides whether a focus ring should be painted, but\n * it can only be asked of a live element - and jsdom, plus a few older\n * engines, do not implement it. Treating an unanswerable question as \"yes\"\n * fails safe: a ring that shows after a mouse click is a cosmetic complaint,\n * a ring that never shows is an accessibility defect.\n */\nfunction prefersVisibleFocus(element: HTMLElement): boolean {\n  try {\n    return element.matches(':focus-visible');\n  } catch {\n    return true;\n  }\n}\n\n/**\n * A code editor built from a transparent `<textarea>` layered over syntax\n * highlighted output.\n *\n * There is no editor engine here by design - that keeps the bundle small and\n * sidesteps the SSR problems full editors bring. When a real editor is wanted,\n * pass `renderEditor`.\n *\n * Usually rendered inside a `<LiveProvider>`, which supplies the code and\n * receives the edits. It also works standalone - pass `code`, and `onChange`\n * if it should be editable - which is how a page shows a highlighted,\n * read-only snippet without spinning up a provider to run it.\n */\nexport function LiveEditor(props: LiveEditorProps): ReactNode {\n  const {\n    className,\n    style,\n    theme = themes.vsDark,\n    readOnly: readOnlyProp,\n    tabSize = 2,\n    padding = 16,\n    errorLineStyle = DEFAULT_ERROR_LINE_STYLE,\n    errorLineClassName,\n    code: codeProp,\n    onChange: onChangeProp,\n    language: languageProp,\n    error: errorProp,\n    prism,\n    focusRingStyle = DEFAULT_FOCUS_RING_STYLE,\n    'aria-label': ariaLabel = 'Live code editor',\n    renderEditor,\n  } = props;\n\n  // Read the context directly rather than through `useLiveContext`, which\n  // throws when there is no provider. Standalone rendering is supported, so\n  // \"no provider\" is a valid state here rather than a mistake.\n  const live = useContext(LiveContext);\n  const highlightRef = useRef<HTMLPreElement>(null);\n  const hintId = useId();\n\n  /**\n   * Set by Escape, cleared by anything else. While set, Tab moves focus\n   * instead of indenting.\n   *\n   * A code editor has to swallow Tab to be usable, and swallowing Tab with no\n   * way out is a keyboard trap - WCAG 2.1.2, a Level A failure. Escape-then-Tab\n   * is the convention CodeMirror and Monaco use, and `aria-describedby` below\n   * announces it, which 2.1.2 requires whenever the escape is non-obvious.\n   */\n  const [tabEscapes, setTabEscapes] = useState(false);\n  const [focusRing, setFocusRing] = useState(false);\n\n  if (codeProp === undefined && live === null) {\n    throw new Error(\n      '<LiveEditor> needs either a surrounding <LiveProvider> or a `code` prop. ' +\n        'Pass `code` (and `onChange` to make it editable) to use it standalone.',\n    );\n  }\n\n  const code = codeProp ?? live?.code ?? '';\n  const language = languageProp ?? live?.language ?? 'tsx';\n  const error = errorProp !== undefined ? errorProp : (live?.error ?? null);\n\n  // An editor with nowhere to send an edit is read-only whether it says so or\n  // not; making that explicit keeps the textarea's behaviour honest and stops\n  // keystrokes being silently swallowed.\n  const setCode = onChangeProp ?? (codeProp === undefined ? live?.setCode : undefined);\n  const readOnly = readOnlyProp ?? setCode === undefined;\n\n  const position = error ? errorPosition(error) : null;\n  const errorLine = position?.line;\n  const errorColumn = position?.column;\n\n  const handleChange = useCallback(\n    (value: string) => {\n      setCode?.(value);\n    },\n    [setCode],\n  );\n\n  const renderProps: LiveEditorRenderProps = {\n    code,\n    onChange: handleChange,\n    language,\n    error,\n    errorLine,\n    errorColumn,\n  };\n\n  if (renderEditor) {\n    return <>{renderEditor(renderProps)}</>;\n  }\n\n  // The highlighted layer does not scroll on its own - it is not focusable -\n  // so it has to be driven from the textarea to stay aligned.\n  const syncScroll = (event: React.UIEvent<HTMLTextAreaElement>) => {\n    const node = highlightRef.current;\n    if (!node) return;\n    node.scrollTop = event.currentTarget.scrollTop;\n    node.scrollLeft = event.currentTarget.scrollLeft;\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n    if (event.key === 'Escape') {\n      // Arms the exit. Nothing is prevented: Escape has no meaning in a\n      // textarea, but a dialog wrapping the editor may well want it.\n      setTabEscapes(true);\n      return;\n    }\n\n    if (event.key !== 'Tab') {\n      // Any other key means the author kept typing, so re-arm indentation.\n      // Modifier presses on their own are not \"typing\" and must not disarm the\n      // exit - Shift+Tab fires a Shift keydown first, and disarming there\n      // would make backwards escape impossible.\n      if (!event.shiftKey && !event.ctrlKey && !event.altKey && !event.metaKey) {\n        if (tabEscapes) setTabEscapes(false);\n      }\n      return;\n    }\n\n    // Tab. Let it through when armed, or when there is nothing to edit.\n    if (tabEscapes || readOnly) {\n      setTabEscapes(false);\n      return;\n    }\n\n    event.preventDefault();\n    const target = event.currentTarget;\n    const { selectionStart, selectionEnd, value } = target;\n    const indent = ' '.repeat(tabSize);\n    const next = value.slice(0, selectionStart) + indent + value.slice(selectionEnd);\n    handleChange(next);\n    requestAnimationFrame(() => {\n      target.selectionStart = target.selectionEnd = selectionStart + indent.length;\n    });\n  };\n\n  const layerStyle: CSSProperties = {\n    ...SHARED_TEXT_STYLE,\n    tabSize,\n    padding,\n    gridArea: '1 / 1',\n    minWidth: 0,\n    minHeight: 0,\n    overflow: 'auto',\n  };\n\n  return (\n    <div\n      className={className}\n      style={{\n        // A single-cell grid makes both layers size to the larger of the two,\n        // which absolute positioning cannot do without a fixed height.\n        display: 'grid',\n        position: 'relative',\n        background: theme.plain.backgroundColor ?? '#1e1e1e',\n        ...style,\n        // The ring is painted on the wrapper rather than the textarea, whose\n        // own outline would be clipped by its scroll box. Applied after the\n        // caller's `style` so it is not accidentally overwritten.\n        ...(focusRing && focusRingStyle ? focusRingStyle : null),\n      }}\n    >\n      <Highlight prism={prism} code={code} language={language} theme={theme}>\n        {({ style: prismStyle, tokens, getLineProps, getTokenProps }) => (\n          <pre\n            ref={highlightRef}\n            aria-hidden=\"true\"\n            style={{ ...prismStyle, ...layerStyle }}\n          >\n            {tokens.map((line, i) => {\n              const isErrorLine = errorLineStyle !== null && errorLine === i + 1;\n              const lineProps = getLineProps({ line });\n              return (\n                // eslint-disable-next-line react/no-array-index-key\n                <div\n                  key={i}\n                  {...lineProps}\n                  className={[lineProps.className, isErrorLine ? errorLineClassName : undefined]\n                    .filter(Boolean)\n                    .join(' ')}\n                  style={\n                    isErrorLine\n                      ? { ...lineProps.style, ...errorLineStyle }\n                      : lineProps.style\n                  }\n                >\n                  {line.map((token, key) => (\n                    // eslint-disable-next-line react/no-array-index-key\n                    <span key={key} {...getTokenProps({ token })} />\n                  ))}\n                </div>\n              );\n            })}\n          </pre>\n        )}\n      </Highlight>\n\n      <textarea\n        value={code}\n        onChange={(event) => handleChange(event.target.value)}\n        onScroll={syncScroll}\n        onKeyDown={handleKeyDown}\n        onFocus={(event) => setFocusRing(prefersVisibleFocus(event.currentTarget))}\n        onBlur={() => {\n          setFocusRing(false);\n          // Leaving and returning should not silently keep the exit armed.\n          setTabEscapes(false);\n        }}\n        readOnly={readOnly}\n        spellCheck={false}\n        autoCapitalize=\"off\"\n        autoCorrect=\"off\"\n        autoComplete=\"off\"\n        aria-label={ariaLabel}\n        aria-describedby={readOnly ? undefined : hintId}\n        aria-keyshortcuts={readOnly ? undefined : 'Escape'}\n        style={{\n          ...layerStyle,\n          resize: 'none',\n          // The wrapper paints the ring instead - see above.\n          outline: 'none',\n          background: 'transparent',\n          // The text itself is invisible; only the highlighted layer is read.\n          // The caret is painted separately so it stays visible.\n          color: 'transparent',\n          caretColor: theme.plain.color ?? '#fff',\n        }}\n      />\n\n      {!readOnly && (\n        <span id={hintId} style={VISUALLY_HIDDEN}>\n          Tab inserts spaces. Press Escape and then Tab to move focus out of the\n          editor.\n        </span>\n      )}\n    </div>\n  );\n}\n"]}

package/dist/editor.d.cts

@@ -0,0 +1,80 @@
+import { CSSProperties, ReactNode } from 'react';
+import { PrismTheme, Prism } from 'prism-react-renderer';
+
+interface LiveEditorRenderProps {
+    code: string;
+    onChange: (code: string) => void;
+    language: string;
+    error: Error | null;
+    errorLine?: number;
+    errorColumn?: number;
+}
+interface LiveEditorProps {
+    className?: string;
+    style?: CSSProperties;
+    theme?: PrismTheme;
+    /** Read-only mode, for showing an app's source without allowing edits. */
+    readOnly?: boolean;
+    /** Spaces inserted by the Tab key. Default 2. */
+    tabSize?: number;
+    padding?: number;
+    /** Paint-only highlight for the error line. Pass `null` to disable. */
+    errorLineStyle?: CSSProperties | null;
+    errorLineClassName?: string;
+    /**
+     * Standalone mode: the code to show, when there is no `<LiveProvider>`
+     * above. Inside a provider this overrides the provider's code, which is
+     * rarely what you want - omit it and let the context supply it.
+     */
+    code?: string;
+    /**
+     * Standalone mode: notified on every edit. Without it - and without a
+     * provider to call `setCode` on - there is nothing to write an edit to, so
+     * the editor renders read-only.
+     */
+    onChange?: (code: string) => void;
+    /** Highlighting language. Defaults to the provider's, then `'tsx'`. */
+    language?: string;
+    /** Error to underline. Defaults to the provider's. */
+    error?: Error | null;
+    /**
+     * A Prism instance with extra languages registered, for highlighting
+     * anything outside `prism-react-renderer`'s built-in set.
+     *
+     * ```ts
+     * import { Prism } from 'prism-react-renderer';
+     * (globalThis as any).Prism = Prism;
+     * await import('prismjs/components/prism-rust');
+     * ```
+     */
+    prism?: typeof Prism;
+    /**
+     * Ring painted around the editor while it holds keyboard focus. Pass `null`
+     * to disable - but then paint your own, or keyboard users cannot see where
+     * they are (WCAG 2.4.7).
+     */
+    focusRingStyle?: CSSProperties | null;
+    /** Overrides the default accessible name. */
+    'aria-label'?: string;
+    /**
+     * Replaces the built-in editor entirely - drop in CodeMirror, Monaco, or
+     * anything else while keeping the rest of the provider wiring.
+     */
+    renderEditor?: (props: LiveEditorRenderProps) => ReactNode;
+}
+/**
+ * A code editor built from a transparent `<textarea>` layered over syntax
+ * highlighted output.
+ *
+ * There is no editor engine here by design - that keeps the bundle small and
+ * sidesteps the SSR problems full editors bring. When a real editor is wanted,
+ * pass `renderEditor`.
+ *
+ * Usually rendered inside a `<LiveProvider>`, which supplies the code and
+ * receives the edits. It also works standalone - pass `code`, and `onChange`
+ * if it should be editable - which is how a page shows a highlighted,
+ * read-only snippet without spinning up a provider to run it.
+ */
+declare function LiveEditor(props: LiveEditorProps): ReactNode;
+
+export { LiveEditor, type LiveEditorProps, type LiveEditorRenderProps };

package/dist/editor.d.ts

@@ -0,0 +1,80 @@
+import { CSSProperties, ReactNode } from 'react';
+import { PrismTheme, Prism } from 'prism-react-renderer';
+
+interface LiveEditorRenderProps {
+    code: string;
+    onChange: (code: string) => void;
+    language: string;
+    error: Error | null;
+    errorLine?: number;
+    errorColumn?: number;
+}
+interface LiveEditorProps {
+    className?: string;
+    style?: CSSProperties;
+    theme?: PrismTheme;
+    /** Read-only mode, for showing an app's source without allowing edits. */
+    readOnly?: boolean;
+    /** Spaces inserted by the Tab key. Default 2. */
+    tabSize?: number;
+    padding?: number;
+    /** Paint-only highlight for the error line. Pass `null` to disable. */
+    errorLineStyle?: CSSProperties | null;
+    errorLineClassName?: string;
+    /**
+     * Standalone mode: the code to show, when there is no `<LiveProvider>`
+     * above. Inside a provider this overrides the provider's code, which is
+     * rarely what you want - omit it and let the context supply it.
+     */
+    code?: string;
+    /**
+     * Standalone mode: notified on every edit. Without it - and without a
+     * provider to call `setCode` on - there is nothing to write an edit to, so
+     * the editor renders read-only.
+     */
+    onChange?: (code: string) => void;
+    /** Highlighting language. Defaults to the provider's, then `'tsx'`. */
+    language?: string;
+    /** Error to underline. Defaults to the provider's. */
+    error?: Error | null;
+    /**
+     * A Prism instance with extra languages registered, for highlighting
+     * anything outside `prism-react-renderer`'s built-in set.
+     *
+     * ```ts
+     * import { Prism } from 'prism-react-renderer';
+     * (globalThis as any).Prism = Prism;
+     * await import('prismjs/components/prism-rust');
+     * ```
+     */
+    prism?: typeof Prism;
+    /**
+     * Ring painted around the editor while it holds keyboard focus. Pass `null`
+     * to disable - but then paint your own, or keyboard users cannot see where
+     * they are (WCAG 2.4.7).
+     */
+    focusRingStyle?: CSSProperties | null;
+    /** Overrides the default accessible name. */
+    'aria-label'?: string;
+    /**
+     * Replaces the built-in editor entirely - drop in CodeMirror, Monaco, or
+     * anything else while keeping the rest of the provider wiring.
+     */
+    renderEditor?: (props: LiveEditorRenderProps) => ReactNode;
+}
+/**
+ * A code editor built from a transparent `<textarea>` layered over syntax
+ * highlighted output.
+ *
+ * There is no editor engine here by design - that keeps the bundle small and
+ * sidesteps the SSR problems full editors bring. When a real editor is wanted,
+ * pass `renderEditor`.
+ *
+ * Usually rendered inside a `<LiveProvider>`, which supplies the code and
+ * receives the edits. It also works standalone - pass `code`, and `onChange`
+ * if it should be editable - which is how a page shows a highlighted,
+ * read-only snippet without spinning up a provider to run it.
+ */
+declare function LiveEditor(props: LiveEditorProps): ReactNode;
+
+export { LiveEditor, type LiveEditorProps, type LiveEditorRenderProps };