@elabs-ai/components-editor 4.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Manuel Reimitz
+
+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,149 @@
+<!-- brand-ui:gen:readme:start -->
+<!-- Generated by scripts/gen-package-readmes.mjs — do not edit inside these markers. -->
+
+# `@elabs-ai/components-editor`
+
+> Token-themed Monaco editor: CodeEditor, DiffEditor, CodeWorkspace.
+
+Part of **brand-ui**, a source-owned, token-driven React component system.
+These packages are **private** and are not published to any registry — they are
+consumed from this workspace. See `docs/CONSUMING.md`.
+
+## Install
+
+Inside this monorepo the packages resolve as workspace dependencies:
+
+```json
+"@elabs-ai/components-editor": "workspace:*"
+```
+
+## Set up styling (do not skip)
+
+Components are Tailwind v4 classes backed by semantic tokens. Two lines in
+your CSS entry, or **everything renders unstyled** — the single most common
+mistake:
+
+```css
+@import "@elabs-ai/components-tokens/styles.css";
+@source "../node_modules/@elabs-ai/components-editor/dist";
+```
+
+The `@source` line is required because Tailwind ignores `node_modules`. Add
+one per brand-ui package you render. Then wrap your app once:
+
+```tsx
+import { ThemeProvider } from "@elabs-ai/components-tokens";
+
+<ThemeProvider defaultTheme="light">{children}</ThemeProvider>;
+```
+
+## This package specifically
+
+- `monaco-editor` is a peer — it owns `globalThis.MonacoEnvironment`, so two copies break it.
+- Import `.../monaco-environment` once at your app entry to enable language workers (Vite-only).
+- `./markdown/parse` and `./markdown/frontmatter` are pure, Monaco-free and server-safe.
+
+## What's in it
+
+8 exported components — including `CodeEditor`, `CodeWorkspace`, `CopyButton`, `DiffEditor`, `EDITOR_LANGUAGES`.
+
+Don't guess the API — ask the CLI:
+
+```bash
+pnpm add -D @elabs-ai/components-cli
+pnpm exec brand-ui search <query>   # find a component
+pnpm exec brand-ui docs <Name>      # its real props, from source
+```
+
+## Using an AI coding agent?
+
+For Claude Code, install the plugin from this repo's checkout:
+
+```
+/plugin marketplace add .
+/plugin install brand-ui
+```
+
+`brand-ui docs <Name>` returns intent, composition, state→token mappings and
+anti-patterns — tell your agent to run it instead of guessing a prop. The CLI
+also runs as an MCP server (`brand-ui mcp`).
+
+## Full guide
+
+Tailwind and Next.js wiring, per-package extras, agent enablement and a
+prompt for migrating an existing project: `docs/CONSUMING.md`.
+
+## License
+
+UNLICENSED — private.
+
+<!-- brand-ui:gen:readme:end -->
+
+---
+
+## Package detail
+
+A token-themed [Monaco Editor](https://github.com/microsoft/monaco-editor) (the
+editor that powers VS Code) wrapped as brand-ui components.
+
+## What this is (and isn't)
+
+Monaco is a **monolithic, self-rendering editor engine** — it mounts into one DOM
+node and draws all of its own widgets (autocomplete, find/replace, context menu,
+hovers, minimap). Those widgets **cannot** be swapped for brand-ui React
+components without forking VS Code. So this package does the two things that
+actually make Monaco "fit" the design system:
+
+1. **Themes the inside** via Monaco's theming API — the editor surface _and_ its
+   widgets are recolored from the active `data-theme` across all six brand themes
+   (the oklch→hex bridge in `lib/monaco-theme-bridge.ts`).
+2. **Wraps it in brand-ui chrome** — `EditorToolbar`, `CodeWorkspace` tabs and the
+   copy button are brand-ui (`Button`, `Select`, `Tabs`).
+
+This mirrors how `@elabs-ai/components-flow` wraps React Flow and `@elabs-ai/components-data` wraps TanStack:
+a powerful third-party engine behind a token-driven brand API. It is intentionally
+**not** "source-owned" the way primitives in `@elabs-ai/components-ui` are.
+
+## Components
+
+| Component       | Purpose                                                 |
+| --------------- | ------------------------------------------------------- |
+| `CodeEditor`    | Single editable Monaco editor (controlled/uncontrolled) |
+| `DiffEditor`    | Side-by-side / inline diff (original ↔ modified)        |
+| `CodeWorkspace` | Multi-file shell — brand-ui `Tabs` over one editor      |
+| `EditorToolbar` | Filename + language `Select` + copy `Button` chrome     |
+
+For **read-only** syntax-highlighted display (not editing), use `CodeBlock` from
+`@elabs-ai/components-ai` (Shiki) instead.
+
+## Workers (required for IntelliSense)
+
+Monaco runs language services in web workers. Import the worker setup **once** at
+your app entry (Vite):
+
+```ts
+import "@elabs-ai/components-editor/monaco-environment";
+```
+
+Without it the editor still renders and highlights, but completions/diagnostics
+are unavailable. `?worker` is a Vite-only transform — non-Vite bundlers must set
+`self.MonacoEnvironment.getWorker(Url)` themselves.
+
+## Usage
+
+```tsx
+import { CodeEditor } from "@elabs-ai/components-editor";
+
+<div className="h-[420px]">
+  <CodeEditor language="typescript" defaultValue="const a = 1;" onChange={setValue} />
+</div>;
+```
+
+The editor reads the active theme from `data-theme` (set by `ThemeProvider`) and
+re-themes automatically on change — no extra wiring.
+
+## SSR
+
+Components are `"use client"`. `monaco-editor` references browser globals at import
+time, so in RSC/SSR apps load the editor in a client-only boundary (e.g. a dynamic
+import with SSR disabled).