@elabs-ai/components-editor 4.0.0

package/dist/index.css

@@ -0,0 +1,233 @@
+/* src/markdown-editor/markdown-editor.css */
+.milkdown-host .ProseMirror {
+  outline: none;
+  padding: 1rem 1.1rem;
+  min-height: 9rem;
+  color: var(--foreground);
+  font-size: 0.875rem;
+  line-height: 1.65;
+  caret-color: var(--primary);
+  word-break: break-word;
+  max-width: var(--md-measure, 48rem);
+  margin-inline: auto;
+}
+.milkdown-host .ProseMirror:focus {
+  outline: none;
+}
+.milkdown-host {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+}
+.milkdown-host > div,
+.milkdown-host .milkdown {
+  display: flex;
+  min-height: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+}
+.milkdown-host .ProseMirror.editor {
+  flex: 1 1 auto;
+}
+.milkdown-host .ProseMirror > * + * {
+  margin-top: 0.7em;
+}
+.milkdown-host .ProseMirror h1,
+.milkdown-host .ProseMirror h2,
+.milkdown-host .ProseMirror h3,
+.milkdown-host .ProseMirror h4,
+.milkdown-host .ProseMirror h5,
+.milkdown-host .ProseMirror h6 {
+  font-weight: var(--md-heading-weight, 600);
+  letter-spacing: var(--md-heading-tracking, -0.025em);
+  line-height: 1.25;
+  color: var(--foreground);
+  margin-top: 1.1em;
+}
+.milkdown-host .ProseMirror h1 {
+  font-size: var(--md-h1, 1.5rem);
+}
+.milkdown-host .ProseMirror h2 {
+  font-size: var(--md-h2, 1.25rem);
+}
+.milkdown-host .ProseMirror h3 {
+  font-size: var(--md-h3, 1.125rem);
+}
+.milkdown-host .ProseMirror h4 {
+  font-size: var(--md-h4, 1rem);
+}
+.milkdown-host .ProseMirror h5 {
+  font-size: var(--md-h5, 0.875rem);
+}
+.milkdown-host .ProseMirror h6 {
+  font-size: var(--md-h6, 0.875rem);
+  color: var(--muted-foreground);
+}
+.milkdown-host .ProseMirror a {
+  color: var(--primary);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.milkdown-host .ProseMirror strong {
+  font-weight: 650;
+}
+.milkdown-host .ProseMirror code {
+  font-family:
+    ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
+  font-size: 0.85em;
+  background: var(--muted);
+  color: var(--foreground);
+  padding: 0.12em 0.36em;
+  border-radius: calc(var(--radius) - 4px);
+}
+.milkdown-host .ProseMirror blockquote {
+  border-left: 2px solid var(--border);
+  padding-left: 1rem;
+  color: var(--muted-foreground);
+}
+.milkdown-host .ProseMirror pre {
+  background: var(--surface-muted);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 0.85rem 1rem;
+  overflow: auto;
+}
+.milkdown-host .ProseMirror pre code {
+  background: transparent;
+  padding: 0;
+  font-size: 0.82rem;
+}
+.milkdown-host .ProseMirror hr {
+  border: none;
+  border-top: 1px solid var(--border);
+  margin: 1.25em 0;
+}
+.milkdown-host .ProseMirror ul,
+.milkdown-host .ProseMirror ol {
+  padding-left: 1.4rem;
+}
+.milkdown-host .ProseMirror ul {
+  list-style: disc;
+}
+.milkdown-host .ProseMirror ol {
+  list-style: decimal;
+}
+.milkdown-host .ProseMirror li > * + * {
+  margin-top: 0.35em;
+}
+.milkdown-host .ProseMirror table {
+  border-collapse: collapse;
+  width: 100%;
+  font-size: 0.85rem;
+}
+.milkdown-host .ProseMirror th,
+.milkdown-host .ProseMirror td {
+  border: 1px solid var(--border);
+  padding: 0.4rem 0.6rem;
+  text-align: left;
+}
+.milkdown-host .ProseMirror th {
+  background: var(--surface-muted);
+  font-weight: 600;
+}
+.milkdown-host .ProseMirror ul[data-item-type=task] {
+  list-style: none;
+  padding-left: 0.25rem;
+}
+.milkdown-host .ProseMirror[contenteditable=false] {
+  caret-color: transparent;
+}
+.milkdown-host .brand-directive {
+  margin: 0.85em 0;
+}
+.milkdown-host .brand-directive__body > * + * {
+  margin-top: 0.6em;
+}
+.milkdown-host .brand-directive__body > :first-child {
+  margin-top: 0;
+}
+.milkdown-host .brand-directive--timeline {
+  border-left: 2px solid var(--border);
+  padding-left: 1rem;
+}
+.milkdown-host .brand-inline-edit {
+  cursor: text;
+  min-width: 1ch;
+  font: inherit;
+  color: inherit;
+  letter-spacing: inherit;
+}
+.milkdown-host .brand-inline-edit:empty::before {
+  content: attr(data-placeholder);
+  color: var(--muted-foreground);
+  opacity: 0.65;
+  pointer-events: none;
+}
+[data-focus-writing] .milkdown-host .ProseMirror > * {
+  opacity: 0.35;
+  transition: opacity var(--t-base, 200ms) var(--ease-standard, ease);
+}
+[data-focus-writing] .milkdown-host .ProseMirror > .wb-fw-active,
+[data-focus-writing] .milkdown-host .ProseMirror > *:hover {
+  opacity: 1;
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-focus-writing] .milkdown-host .ProseMirror > * {
+    transition: none;
+  }
+}
+
+/* src/calc-block/calc-editor.css */
+.brand-calc-tok.brand-calc-tok--number,
+.brand-calc-tok.brand-calc-tok--constant {
+  color: var(--calc-number);
+}
+.brand-calc-tok.brand-calc-tok--unit {
+  color: var(--calc-unit);
+}
+.brand-calc-tok.brand-calc-tok--currency {
+  color: var(--calc-currency);
+}
+.brand-calc-tok.brand-calc-tok--operator {
+  color: var(--calc-operator);
+}
+.brand-calc-tok.brand-calc-tok--function {
+  color: var(--calc-function);
+}
+.brand-calc-tok.brand-calc-tok--var-ref {
+  color: var(--calc-variable);
+}
+.brand-calc-tok.brand-calc-tok--var-def {
+  color: var(--calc-variable);
+  font-weight: 500;
+}
+.brand-calc-tok.brand-calc-tok--line-ref {
+  color: var(--calc-reference);
+  font-variant-numeric: tabular-nums;
+}
+.brand-calc-tok.brand-calc-tok--comment {
+  color: var(--calc-comment);
+  font-style: italic;
+}
+.brand-calc-tok.brand-calc-tok--unknown {
+  color: var(--calc-warning);
+}
+.brand-calc-tok.brand-calc-tok--unresolved {
+  text-decoration: underline dotted;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 2px;
+}
+.brand-calc-inlay {
+  margin-inline-start: 1ch;
+  color: var(--calc-result);
+  font-variant-numeric: tabular-nums;
+  user-select: none;
+  white-space: pre;
+}
+.brand-calc-inlay--error {
+  color: var(--calc-warning);
+}
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/markdown-editor/markdown-editor.css","../src/calc-block/calc-editor.css"],"sourcesContent":["/**\n * Token-driven theme for the Milkdown (ProseMirror) WYSIWYG surface.\n *\n * Milkdown core ships ZERO styles (headless), so this is where brand-ui owns the\n * look. Every value is a semantic design token (var(--foreground), --border,\n * --radius, …) — NO raw colors — so the editor matches all three themes\n * (light/dark) for free. Every rule\n * is scoped under `.milkdown-host` so nothing leaks globally.\n */\n\n.milkdown-host .ProseMirror {\n  outline: none;\n  padding: 1rem 1.1rem;\n  min-height: 9rem;\n  color: var(--foreground);\n  font-size: 0.875rem;\n  line-height: 1.65;\n  caret-color: var(--primary);\n  word-break: break-word;\n  /* Same reading measure as the preview (max-w-3xl). Driven by the shared scale\n     (--md-measure, set via markdownScaleVars) so editor + preview match (#18). */\n  max-width: var(--md-measure, 48rem);\n  margin-inline: auto;\n}\n\n.milkdown-host .ProseMirror:focus {\n  outline: none;\n}\n\n/* ----------------------------------------------------------------------------\n * Fill height — the editable grows to fill a definite-height parent.\n *\n * Milkdown's host box is otherwise content-sized (the `.ProseMirror` floor below\n * is `min-height: 9rem`), so inside a tall pane a short document leaves a large\n * dead area below the editable AND the caret-anchored `/` slash menu clips inside\n * the short box near the bottom edge. Making `.milkdown-host` a column flex that\n * fills its parent — and letting the intermediate Milkdown wrapper + the\n * ProseMirror surface grow inside it — means the editable fills the pane\n * (clickable everywhere) and the slash menu has room to open / flip.\n *\n * `min-height: 100%` only resolves against a parent with a DEFINITE height (the\n * workspace's `h-full` wysiwyg pane, or any sized container). In an\n * indefinite-height parent it resolves to `auto`, so the standalone / short\n * editor still sizes to its content above the 9rem floor — no regression for the\n * autodocs / inline cases. (elabs-components: editor-fill-height)\n * ------------------------------------------------------------------------- */\n.milkdown-host {\n  display: flex;\n  flex-direction: column;\n  min-height: 100%;\n}\n.milkdown-host > div,\n.milkdown-host .milkdown {\n  display: flex;\n  min-height: 0;\n  flex: 1 1 auto;\n  flex-direction: column;\n}\n.milkdown-host .ProseMirror.editor {\n  flex: 1 1 auto;\n}\n\n.milkdown-host .ProseMirror > * + * {\n  margin-top: 0.7em;\n}\n\n/* Headings — sizes/weight/tracking come from the SHARED markdown scale\n   (markdown-scale.ts → --md-* vars on .milkdown-host), so the editor matches the\n   prose `Heading` exactly and can't drift on the next edit to either side (#18).\n   Fallbacks equal the canonical scale for use without the vars (e.g. clipboard). */\n.milkdown-host .ProseMirror h1,\n.milkdown-host .ProseMirror h2,\n.milkdown-host .ProseMirror h3,\n.milkdown-host .ProseMirror h4,\n.milkdown-host .ProseMirror h5,\n.milkdown-host .ProseMirror h6 {\n  font-weight: var(--md-heading-weight, 600);\n  letter-spacing: var(--md-heading-tracking, -0.025em);\n  line-height: 1.25;\n  color: var(--foreground);\n  margin-top: 1.1em;\n}\n.milkdown-host .ProseMirror h1 {\n  font-size: var(--md-h1, 1.5rem);\n}\n.milkdown-host .ProseMirror h2 {\n  font-size: var(--md-h2, 1.25rem);\n}\n.milkdown-host .ProseMirror h3 {\n  font-size: var(--md-h3, 1.125rem);\n}\n.milkdown-host .ProseMirror h4 {\n  font-size: var(--md-h4, 1rem);\n}\n.milkdown-host .ProseMirror h5 {\n  font-size: var(--md-h5, 0.875rem);\n}\n.milkdown-host .ProseMirror h6 {\n  font-size: var(--md-h6, 0.875rem);\n  color: var(--muted-foreground);\n}\n\n/* Inline */\n.milkdown-host .ProseMirror a {\n  color: var(--primary);\n  text-decoration: underline;\n  text-underline-offset: 2px;\n}\n.milkdown-host .ProseMirror strong {\n  font-weight: 650;\n}\n.milkdown-host .ProseMirror code {\n  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n  font-size: 0.85em;\n  background: var(--muted);\n  color: var(--foreground);\n  padding: 0.12em 0.36em;\n  border-radius: calc(var(--radius) - 4px);\n}\n\n/* Blocks */\n.milkdown-host .ProseMirror blockquote {\n  border-left: 2px solid var(--border);\n  padding-left: 1rem;\n  color: var(--muted-foreground);\n}\n.milkdown-host .ProseMirror pre {\n  background: var(--surface-muted);\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  padding: 0.85rem 1rem;\n  overflow: auto;\n}\n.milkdown-host .ProseMirror pre code {\n  background: transparent;\n  padding: 0;\n  font-size: 0.82rem;\n}\n.milkdown-host .ProseMirror hr {\n  border: none;\n  border-top: 1px solid var(--border);\n  margin: 1.25em 0;\n}\n\n/* Lists */\n.milkdown-host .ProseMirror ul,\n.milkdown-host .ProseMirror ol {\n  padding-left: 1.4rem;\n}\n.milkdown-host .ProseMirror ul {\n  list-style: disc;\n}\n.milkdown-host .ProseMirror ol {\n  list-style: decimal;\n}\n.milkdown-host .ProseMirror li > * + * {\n  margin-top: 0.35em;\n}\n\n/* Tables (GFM) */\n.milkdown-host .ProseMirror table {\n  border-collapse: collapse;\n  width: 100%;\n  font-size: 0.85rem;\n}\n.milkdown-host .ProseMirror th,\n.milkdown-host .ProseMirror td {\n  border: 1px solid var(--border);\n  padding: 0.4rem 0.6rem;\n  text-align: left;\n}\n.milkdown-host .ProseMirror th {\n  background: var(--surface-muted);\n  font-weight: 600;\n}\n\n/* Task lists (GFM) */\n.milkdown-host .ProseMirror ul[data-item-type=\"task\"] {\n  list-style: none;\n  padding-left: 0.25rem;\n}\n\n/* Read-only mode dims the caret affordance */\n.milkdown-host .ProseMirror[contenteditable=\"false\"] {\n  caret-color: transparent;\n}\n\n/* ---- Brand `:::` directives ----------------------------------------------------\n * These now render as LIVE @brand React components via @prosemirror-adapter/react\n * (see directive-views.tsx), so the box-model chrome (card/callout/metric borders,\n * fills, type accents) comes from the components themselves — NOT from here. This\n * section only owns what the editor adds on top: outer spacing, the editable-body\n * rhythm, the timeline frame (an editable list, not a derived <Timeline>), and the\n * inline-edit affordance for editable attributes (card/callout title, metric\n * label/value). The `toDOM` defs in directive-nodes.ts keep their own marker classes\n * for clipboard serialization but are not visually rendered while node-views are on.\n */\n.milkdown-host .brand-directive {\n  margin: 0.85em 0;\n}\n.milkdown-host .brand-directive__body > * + * {\n  margin-top: 0.6em;\n}\n/* The first/last editable block inside a card/callout shouldn't add stray margin\n * on top of the component's own padding. */\n.milkdown-host .brand-directive__body > :first-child {\n  margin-top: 0;\n}\n\n/* timeline → keep the list editable inside a subtle frame */\n.milkdown-host .brand-directive--timeline {\n  border-left: 2px solid var(--border);\n  padding-left: 1rem;\n}\n\n/* Inline-editable directive attribute (seamless, caret-friendly). */\n.milkdown-host .brand-inline-edit {\n  cursor: text;\n  min-width: 1ch;\n  /* inherit the surrounding component's type (CardTitle, MetricBlock label/value) */\n  font: inherit;\n  color: inherit;\n  letter-spacing: inherit;\n}\n.milkdown-host .brand-inline-edit:empty::before {\n  content: attr(data-placeholder);\n  color: var(--muted-foreground);\n  opacity: 0.65;\n  pointer-events: none;\n}\n\n/* ------------------------------------------------------------------------- */\n/* Focus writing (Ulysses Phase A): under a `[data-focus-writing]` ancestor   */\n/* (the workspace's wysiwyg pane), every top-level block dims except the one  */\n/* owning the selection (`.wb-fw-active`, set by the workspace) — paragraph   */\n/* focus. Hover un-dims for mouse repositioning. Token-driven, motion-safe.   */\n/* ------------------------------------------------------------------------- */\n[data-focus-writing] .milkdown-host .ProseMirror > * {\n  opacity: 0.35;\n  transition: opacity var(--t-base, 200ms) var(--ease-standard, ease);\n}\n[data-focus-writing] .milkdown-host .ProseMirror > .wb-fw-active,\n[data-focus-writing] .milkdown-host .ProseMirror > *:hover {\n  opacity: 1;\n}\n@media (prefers-reduced-motion: reduce) {\n  [data-focus-writing] .milkdown-host .ProseMirror > * {\n    transition: none;\n  }\n}\n","/**\n * Calc authoring decorations (#220) — shared by the Monaco source surface\n * (decoration `inlineClassName`) and the Milkdown WYSIWYG surface (ProseMirror\n * inline decorations + result-inlay widgets).\n *\n * Colors come from the `--calc-*` syntax tokens — the SAME tokens `CalcBlock`\n * paints with (#221), already AA-verified against `--background` (the editor\n * surface) and `--card` in all three themes — so highlighting tracks the theme via\n * the cascade with no hardcoded hex. The compound `.brand-calc-tok.brand-calc-tok--x`\n * selector raises specificity above Monaco's own token color class (`.mtkN`) so\n * the calc color wins regardless of stylesheet load order (no `!important`).\n *\n * Hue is never the SOLE cue (var-def = weight, unresolved = dotted underline), so\n * roles stay distinct in the high-contrast theme where the calc colors collapse\n * toward the foreground — mirroring `CalcBlock.tokenClass`.\n */\n\n.brand-calc-tok.brand-calc-tok--number,\n.brand-calc-tok.brand-calc-tok--constant {\n  color: var(--calc-number);\n}\n.brand-calc-tok.brand-calc-tok--unit {\n  color: var(--calc-unit);\n}\n.brand-calc-tok.brand-calc-tok--currency {\n  color: var(--calc-currency);\n}\n.brand-calc-tok.brand-calc-tok--operator {\n  color: var(--calc-operator);\n}\n.brand-calc-tok.brand-calc-tok--function {\n  color: var(--calc-function);\n}\n.brand-calc-tok.brand-calc-tok--var-ref {\n  color: var(--calc-variable);\n}\n.brand-calc-tok.brand-calc-tok--var-def {\n  color: var(--calc-variable);\n  font-weight: 500;\n}\n.brand-calc-tok.brand-calc-tok--line-ref {\n  color: var(--calc-reference);\n  font-variant-numeric: tabular-nums;\n}\n.brand-calc-tok.brand-calc-tok--comment {\n  color: var(--calc-comment);\n  font-style: italic;\n}\n.brand-calc-tok.brand-calc-tok--unknown {\n  color: var(--calc-warning);\n}\n\n/* Non-hue cue for unresolved identifiers / dangling refs — carries the role in\n   high-contrast, where hue is flattened. */\n.brand-calc-tok.brand-calc-tok--unresolved {\n  text-decoration: underline dotted;\n  text-decoration-thickness: 1px;\n  text-underline-offset: 2px;\n}\n\n/**\n * WYSIWYG result inlay — a ProseMirror widget after each calc line showing the\n * computed answer. The number IS the signal (shown as text), color is only an\n * enhancement, and it is non-editable / non-selectable so it never enters the\n * document. (The Monaco surface uses Monaco's own inlay hints, themed via the\n * theme bridge's `editorInlayHint.*` colors — not this class.)\n */\n.brand-calc-inlay {\n  /* Full strength (no opacity de-emphasis): the result is the answer, and the\n     `--calc-result` token is AA-verified at FULL opacity (#221) — reducing it\n     would drop effective contrast below what the contrast gate models. */\n  margin-inline-start: 1ch;\n  color: var(--calc-result);\n  font-variant-numeric: tabular-nums;\n  user-select: none;\n  white-space: pre;\n}\n.brand-calc-inlay--error {\n  color: var(--calc-warning);\n}\n"],"mappings":"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","names":[]}

package/dist/index.d.ts

@@ -0,0 +1,199 @@
+import { E as EditorContentAccess, M as MonacoCodeEditor } from './markdown-editor-DfBZibAn.js';
+export { C as CodeEditor, a as CodeEditorProps, b as EditorAction, c as EditorSelection, d as EmbedAssetFn, e as MarkdownEditor, f as MarkdownEditorHandle, g as MarkdownEditorProps, m as monacoContentAccess } from './markdown-editor-DfBZibAn.js';
+import * as react from 'react';
+import { HTMLAttributes, ReactNode, ComponentProps } from 'react';
+import * as monaco from 'monaco-editor';
+export { monaco };
+import { Button } from '@elabs-ai/components-ui';
+import { ThemeName } from '@elabs-ai/components-tokens';
+import '@milkdown/kit/ctx';
+import '@milkdown/kit/prose/model';
+import '@milkdown/kit/prose/state';
+
+type MonacoDiffEditor = monaco.editor.IStandaloneDiffEditor;
+interface DiffEditorProps extends Omit<HTMLAttributes<HTMLDivElement>, "defaultValue"> {
+    /** Left/original document. */
+    original: string;
+    /** Right/modified document. */
+    modified: string;
+    /** Monaco language id applied to both sides. Defaults to "typescript". */
+    language?: string;
+    /** Read-only (diffs are read-only by default). */
+    readOnly?: boolean;
+    /** Side-by-side (true) vs inline (false) diff. Defaults to side-by-side. */
+    renderSideBySide?: boolean;
+    /** Editor height. Number → px. Defaults to "100%". */
+    height?: number | string;
+    /** Passthrough Monaco diff options (merged over the defaults). */
+    options?: monaco.editor.IStandaloneDiffEditorConstructionOptions;
+    /** Called once the diff editor + monaco namespace are ready. */
+    onMount?: (editor: MonacoDiffEditor, monacoApi: typeof monaco) => void;
+}
+/**
+ * A token-themed Monaco diff editor (original ↔ modified). Same theming bridge
+ * and chrome story as {@link CodeEditor}; reads as a side-by-side or inline diff.
+ */
+declare const DiffEditor: react.ForwardRefExoticComponent<DiffEditorProps & react.RefAttributes<monaco.editor.IStandaloneDiffEditor | null>>;
+
+interface EditorFile {
+    /** Unique path/name; shown (basename) on the tab and used as the model path. */
+    path: string;
+    /** Monaco language id. Inferred from the extension when omitted. */
+    language?: string;
+    /** File content. */
+    value: string;
+}
+interface CodeWorkspaceProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+    /** Open files, one tab each. */
+    files: EditorFile[];
+    /** Controlled active file path. */
+    activePath?: string;
+    /** Initial active path for uncontrolled use. Defaults to the first file. */
+    defaultActivePath?: string;
+    /** Called when the active tab changes. */
+    onActivePathChange?: (path: string) => void;
+    /** Called on every edit with the file path + new content. */
+    onFileChange?: (path: string, value: string) => void;
+    /** Render all files read-only. */
+    readOnly?: boolean;
+    /** Workspace height. Number → px. Defaults to "100%". */
+    height?: number | string;
+}
+/**
+ * Imperative handle exposed via `CodeWorkspace`'s `ref`.
+ *
+ * **Migration note:** the forwarded `ref` type changed from `HTMLDivElement` to
+ * `CodeWorkspaceHandle` (mirrors the #273 `MarkdownWorkspaceHandle` precedent).
+ * Replace any `ref.current` / `ref.current.scrollIntoView()` DOM access with
+ * `ref.current?.getElement()`. This is the only breaking change in this work.
+ */
+interface CodeWorkspaceHandle extends EditorContentAccess {
+    /**
+     * The live Monaco editor for the currently active tab, or `null` while booting
+     * or when no files are open. Consumers needing the full Monaco API can use this
+     * and pass it to `monacoContentAccess(handle.getActiveEditor()!)`.
+     */
+    getActiveEditor(): MonacoCodeEditor | null;
+    /**
+     * The workspace root DOM element. Preserves the old `HTMLDivElement` ref access
+     * that existed before the ref-type change (#273 `MarkdownWorkspace` playbook).
+     */
+    getElement(): HTMLDivElement | null;
+}
+/**
+ * Multi-file editor shell: brand-ui `Tabs` for the file bar above a single
+ * {@link CodeEditor} that swaps to the active file. This is the "reuse our
+ * components for the chrome" surface — Tabs/Button are ours; the editing surface
+ * is Monaco. Edits bubble through `onFileChange`.
+ *
+ * The forwarded `ref` exposes a {@link CodeWorkspaceHandle} (not `HTMLDivElement`).
+ * Use `ref.current?.getElement()` to access the root DOM node.
+ */
+declare const CodeWorkspace: react.ForwardRefExoticComponent<CodeWorkspaceProps & react.RefAttributes<CodeWorkspaceHandle>>;
+
+/**
+ * Curated language list for the editor toolbar's language picker. Ids are
+ * Monaco's built-in language ids (`monaco.languages.getLanguages()`), so they
+ * map straight onto `setModelLanguage` / model creation.
+ */
+interface EditorLanguage {
+    /** Monaco language id (e.g. "typescript"). */
+    id: string;
+    /** Human-readable label for the picker. */
+    label: string;
+}
+declare const EDITOR_LANGUAGES: EditorLanguage[];
+/** Look up a language's label, falling back to the raw id. */
+declare function languageLabel(id: string): string;
+
+interface EditorToolbarProps extends HTMLAttributes<HTMLDivElement> {
+    /** Filename shown on the left (e.g. "index.ts"). */
+    filename?: ReactNode;
+    /** Active language id; shows a language picker when `onLanguageChange` is set. */
+    language?: string;
+    /** Called when the user picks a language. Omit to hide the picker. */
+    onLanguageChange?: (language: string) => void;
+    /** Languages offered in the picker. Defaults to {@link EDITOR_LANGUAGES}. */
+    languages?: EditorLanguage[];
+    /** Text copied by the copy button. Omit to hide the button. */
+    copyValue?: string;
+    /** Extra actions rendered before the copy button (brand-ui buttons, etc.). */
+    actions?: ReactNode;
+}
+/**
+ * Brand-ui chrome for the editors — the part that genuinely reuses our
+ * components. Renders a filename label, an optional language `Select` and a copy
+ * `Button`. The editing surface itself is Monaco; this is the frame around it.
+ */
+declare const EditorToolbar: react.ForwardRefExoticComponent<EditorToolbarProps & react.RefAttributes<HTMLDivElement>>;
+
+interface EditorContextMenuProps {
+    /** The Monaco editor instance to act on (null until mounted). */
+    editor: monaco.editor.IStandaloneCodeEditor | null;
+    /** Hide editing items (cut/paste/format) for read-only editors. */
+    readOnly?: boolean;
+    /** The editor element wrapped as the right-click trigger. */
+    children: ReactNode;
+}
+/**
+ * Replaces Monaco's built-in context menu with brand-ui's `ContextMenu`, wired
+ * to the editor instance. This is the "reuse our components instead of Monaco's
+ * built-in ones" path for the right-click menu — set `contextMenu="brand"` on
+ * `CodeEditor` (the default) and it disables Monaco's menu and renders this.
+ *
+ * Clipboard ops use the async Clipboard API + `executeEdits` (reliable in the
+ * browser); other entries delegate to the editor's own actions.
+ */
+declare function EditorContextMenu({ editor, readOnly, children }: EditorContextMenuProps): react.JSX.Element;
+
+interface CopyButtonProps extends Omit<ComponentProps<typeof Button>, "value"> {
+    /** Text written to the clipboard on click. */
+    value: string;
+    /** Show the "Copy" / "Copied" label next to the icon. Defaults to true. */
+    label?: boolean;
+}
+/**
+ * Brand-ui copy-to-clipboard button with a transient "Copied" state. Shared by
+ * the editor toolbar and workspace so the copy affordance is defined once.
+ */
+declare function CopyButton({ value, label, className, ...props }: CopyButtonProps): react.JSX.Element;
+
+/**
+ * Build a Monaco theme from the resolved CSS variables on `rootEl`
+ * (defaults to `<html>`, where `data-theme` lives).
+ */
+declare function buildBrandThemeData(rootEl?: HTMLElement | null): monaco.editor.IStandaloneThemeData;
+/** The Monaco theme id used for a given brand theme. */
+declare function brandThemeId(theme: ThemeName): string;
+/**
+ * Define + activate the Monaco theme for `theme`, reading live token values.
+ * `setTheme` is global to all editors, so calling this from any mounted editor
+ * is idempotent and keeps every editor in sync.
+ */
+declare function applyBrandTheme(monaco: typeof monaco, theme: ThemeName, rootEl?: HTMLElement | null): string;
+
+interface DataThemeState {
+    /** The active brand theme parsed from `data-theme`. */
+    theme: ThemeName;
+    /**
+     * Increments on every observed `data-theme` mutation (and the initial read),
+     * even when the parsed theme name is unchanged. Consumers depend on this to
+     * re-run side effects once the attribute settles — e.g. the editor re-applies
+     * its Monaco theme after a late attribute write that matches the default,
+     * which a name-only dependency would miss.
+     */
+    revision: number;
+}
+/**
+ * Reads the active brand theme straight from the `data-theme` attribute and
+ * keeps it in sync via a `MutationObserver`. Deliberately decoupled from
+ * `ThemeProvider`/`useTheme` so the editor themes correctly whether or not a
+ * provider is present (Storybook's theme decorator just sets `data-theme`).
+ *
+ * @param target Element to watch. Defaults to `<html>` (where `ThemeProvider`
+ *   writes). Pass a scoped element for nested theming; the document root is also
+ *   observed as a fallback.
+ */
+declare function useDataTheme(target?: HTMLElement | null): DataThemeState;
+
+export { CodeWorkspace, type CodeWorkspaceHandle, type CodeWorkspaceProps, CopyButton, type CopyButtonProps, type DataThemeState, DiffEditor, type DiffEditorProps, EDITOR_LANGUAGES, EditorContentAccess, EditorContextMenu, type EditorContextMenuProps, type EditorFile, type EditorLanguage, EditorToolbar, type EditorToolbarProps, MonacoCodeEditor, type MonacoDiffEditor, applyBrandTheme, brandThemeId, buildBrandThemeData, languageLabel, useDataTheme };