@gntik-ai/editor 0.0.0-stage → 0.11.0

package/README.md

@@ -1,3 +1,248 @@
-# Temporary Holding Version
+# @gntik-ai/editor
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Monaco (the VS Code editor) themed by the gntik-ui brand tokens. Ships three Monaco
+themes — `gntik-dark`, `gntik-light`, `gntik-hc` — built at runtime from the live CSS
+variables of `@gntik-ai/tokens`, and two React components that follow the `<html>`
+theme class automatically.
+
+```tsx
+import '@gntik-ai/tokens/brand.css';
+import { CodeEditor, DiffEditor } from '@gntik-ai/editor';
+
+<CodeEditor value={code} onChange={setCode} language="typescript" height={360} aria-label="Agent source" />
+<DiffEditor original={before} modified={after} language="yaml" aria-label="Manifest changes" />
+```
+
+Monaco is loaded with a dynamic `import('monaco-editor')`, so it is split into its own
+chunk and only downloaded when an editor mounts. A token-styled skeleton shows until then.
+
+## Workers (required)
+
+Monaco runs its language services in web workers. The package does not import them —
+each bundler resolves workers differently — so wire them once at app start-up.
+
+### Vite
+
+```ts
+// src/monaco-workers.ts — import this once, before any editor renders.
+import { configureMonacoWorkers } from '@gntik-ai/editor';
+import EditorWorker from 'monaco-editor/editor/editor.worker?worker';
+import JsonWorker from 'monaco-editor/languages/features/json/json.worker?worker';
+import CssWorker from 'monaco-editor/languages/features/css/css.worker?worker';
+import HtmlWorker from 'monaco-editor/languages/features/html/html.worker?worker';
+import TsWorker from 'monaco-editor/languages/features/typescript/ts.worker?worker';
+
+configureMonacoWorkers((_id, label) => {
+  if (label === 'json') return new JsonWorker();
+  if (label === 'css' || label === 'scss' || label === 'less') return new CssWorker();
+  if (label === 'html' || label === 'handlebars' || label === 'razor') return new HtmlWorker();
+  if (label === 'typescript' || label === 'javascript') return new TsWorker();
+  return new EditorWorker();
+});
+```
+
+Only need syntax highlighting? Return `new EditorWorker()` for every label and skip the rest.
+
+## API
+
+| Export                                                                       | Purpose                                                                                                                                                                   |
+| ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `CodeEditor`                                                                 | `value` / `defaultValue`, `onChange(value, event)`, `language`, `readOnly`, `height`, `aria-label`, `options`, `className`, `loader`, `onMount`.                          |
+| `DiffEditor`                                                                 | `original`, `modified`, `language`, `readOnly` (default `true`), `sideBySide`, `onChange(modified)`, `height`, `aria-label`, `options`, `className`, `loader`, `onMount`. |
+| `defineBrandThemes(monaco)`                                                  | Registers the three brand themes from the live tokens. Call again after a theme switch (the components do).                                                               |
+| `brandThemeFor(theme?)`                                                      | `'dark' \| 'light' \| 'high_contrast'` → Monaco theme name (defaults to the active theme).                                                                                |
+| `brandThemeData(theme, el?)`                                                 | The raw `IStandaloneThemeData` for one theme.                                                                                                                             |
+| `configureMonacoWorkers(getWorker)`                                          | Sets `self.MonacoEnvironment.getWorker`.                                                                                                                                  |
+| `loadMonaco`, `useMonaco`, `useBrandTheme`, `BASE_OPTIONS`, `EditorSkeleton` | Building blocks for custom Monaco surfaces.                                                                                                                               |
+
+### Custom loader
+
+Pass `loader` to use a preconfigured or self-hosted Monaco (or a mock in tests):
+
+```tsx
+const loader = () => import('monaco-editor').then((m) => {
+  m.typescript.typescriptDefaults.setDiagnosticsOptions({ noSemanticValidation: true });
+  return m;
+});
+<CodeEditor loader={loader} … />
+```
+
+Keep the loader identity stable (module scope or `useCallback`); a new function reloads Monaco.
+
+## Notes
+
+- Monaco themes only accept hex, so colours are converted with `tokenHex` from
+  `@gntik-ai/tokens/runtime`; alpha is appended as a hex suffix. No colour literals.
+- `monaco.editor.setTheme` is global: every Monaco instance on the page shares one theme.
+- Light tokens live on `:root`, so `gntik-light` is only exact while light is active; the
+  components redefine all themes on every switch, so the active theme is always correct.
+
+## Consumer-injected YAML diagnostics (Monaco 0.57)
+
+The kit does not depend on `monaco-yaml` and never imports a worker. Install a compatible
+`monaco-yaml` in the consumer (the docs example uses 5.5.1 with `monaco-editor` 0.57.0).
+The integration lives behind a stable lazy loader. Do not import these worker constructors
+from your app entry if you want to defer their chunks until the editor opens.
+
+```ts
+// yaml-workers.ts: loaded only by yaml-loader.ts
+import { configureMonacoWorkers } from '@gntik-ai/editor';
+import EditorWorker from 'monaco-editor/editor/editor.worker?worker';
+import YamlWorker from 'monaco-yaml/yaml.worker?worker';
+
+configureMonacoWorkers((_id, label) => {
+  if (label === 'yaml') return new YamlWorker();
+  return new EditorWorker();
+});
+```
+
+```ts
+// yaml-loader.ts: keep this module's loader identity stable
+import type { MonacoLoader } from '@gntik-ai/editor';
+let configured: ReturnType<MonacoLoader> | undefined;
+export const yamlLoader: MonacoLoader = () => {
+  configured ??= Promise.all([import('./yaml-workers'), import('monaco-editor'), import('monaco-yaml')]).then(
+    ([, monaco, { configureMonacoYaml }]) => {
+      configureMonacoYaml(yamlMonaco(monaco), {
+        enableSchemaRequest: false,
+        validate: true,
+        schemas: [
+          {
+            uri: 'inmemory://schemas/workflow.json',
+            fileMatch: ['*'],
+            schema: {
+              type: 'object',
+              required: ['count'],
+              properties: { count: { type: 'integer' } },
+            },
+          },
+        ],
+      });
+      return monaco;
+    },
+  );
+  return configured;
+};
+```
+
+This adapter is pinned to `monaco-yaml` 5.5.1 and its `monaco-worker-manager` 2.0.1
+dependency: it relies on their internal two-message bootstrap. Revalidate the production
+browser spec before upgrading either dependency. Put this consumer adapter in `yaml-loader.ts`. Monaco 0.57 requires a `worker` instance in
+`createWebWorker`; the older worker manager supplies `moduleId`, `label` and
+`createData` instead. Passing those options directly silently selects Monaco's generic
+worker, which cannot run YAML validation. The adapter requests the YAML worker through
+`getWorker`, initializes its legacy bootstrap with the schema options, and passes it to
+Monaco's current API. It only adapts the Monaco facade given to `configureMonacoYaml`.
+
+```ts
+import type { Monaco } from '@gntik-ai/editor';
+
+function yamlMonaco(monaco: Monaco): Monaco {
+  return {
+    ...monaco,
+    editor: {
+      ...monaco.editor,
+      createWebWorker<T extends object>(options: {
+        createData?: unknown;
+        label?: string;
+        host?: Parameters<Monaco['editor']['createWebWorker']>[0]['host'];
+        keepIdleModels?: boolean;
+      }) {
+        const worker = Promise.resolve(
+          globalThis.MonacoEnvironment!.getWorker!('workerMain.js', options.label ?? 'yaml'),
+        ).then((worker) => {
+          worker.postMessage('-please-ignore-');
+          worker.postMessage(options.createData);
+          return worker;
+        });
+        return monaco.editor.createWebWorker<T>({
+          worker,
+          host: options.host,
+          keepIdleModels: options.keepIdleModels,
+        });
+      },
+    },
+  };
+}
+```
+
+The running example is `apps/docs/src/examples/yaml-loader.js` and its sibling
+`yaml-monaco.js`. After building the docs, `pnpm --filter @gntik-ai/docs test:yaml-worker`
+checks the real bundled worker's schema diagnostics without an HTTP server. The browser
+test additionally checks the Problems list and production CSP.
+
+Monaco 0.57 exports shorter public subpaths. `monaco-worker-manager` 2.0.1, used by
+`monaco-yaml` 5.5.1, still imports the legacy `monaco-editor/esm/vs/` path. Keep the alias
+in the consumer Vite config for that dependency, including worker builds:
+
+```ts
+import { fileURLToPath } from 'node:url';
+export default {
+  resolve: {
+    alias: [
+      {
+        find: /^monaco-editor\/esm\/vs\//,
+        replacement: fileURLToPath(new URL('./node_modules/monaco-editor/esm/vs/', import.meta.url)),
+      },
+    ],
+  },
+  worker: { format: 'es' },
+  build: { assetsInlineLimit: 0 },
+};
+```
+
+Vite's `?worker` constructors load module workers from bundled same-origin assets. Serve
+production with `script-src 'self'; worker-src 'self' blob:; connect-src 'self'`. Monaco
+also needs its generated inline styles (`style-src 'self' 'unsafe-inline'`); fonts and
+stylesheets must be bundled on the same origin. Always supply the schema inline and set
+`enableSchemaRequest: false`. Do not configure remote `$ref` dependencies, schema stores,
+or CDN loaders. The kit's default `loadMonaco` is an ESM import, never a CDN request.
+
+With `font-src 'self'`, set `build.assetsInlineLimit: 0` so Vite emits small fonts as
+same-origin files instead of CSP-blocked data URLs. After building the docs, run
+`node --test --test-isolation=none apps/docs/scripts/check-csp-fonts.test.mjs` to check
+the emitted font sources without a browser.
+
+```tsx
+<CodePanel
+  files={[{ path: 'flow.yaml', language: 'yaml', content: 'count: wrong\n' }]}
+  problems={[]}
+  loader={yamlLoader}
+  markers={[
+    {
+      id: 'semantic',
+      owner: 'semantic-worker',
+      file: 'flow.yaml',
+      line: 1,
+      severity: 'warning',
+      message: 'Review the terminal step.',
+    },
+  ]}
+  readOnly={runMode}
+  onValidityChange={(valid) => setCanSave(valid)}
+/>
+```
+
+Set `markers` (even an empty list), `onMonacoReady`, or `onValidityChange` to opt
+into model diagnostics. `readOnly` controls editing independently. Omitting diagnostics
+extensions preserves the caller-supplied Problems list. Collection covers both the code editor and the modified diff model.
+
+`CodePanel` subscribes to the public Monaco marker API for every mounted file model and
+merges every owner's markers into its Problems list. It reserves each `markers[].owner`
+for that consumer marker group, writes those line markers to the model, and clears them
+when removed or unmounted. Consumer markers also appear for files not yet opened. Keep
+owners distinct from `yaml`; owner groups supplied through `markers` replace that group's
+model diagnostics, so they are listed once.
+
+`onMonacoReady(monaco)` is an alternative setup hook for already-loaded consumer services;
+it runs once per Monaco instance in the panel and may return a disposer. Prefer the loader
+for language registration before editor creation. Validity is based on the merged error
+count: no notification for an initially clean panel, `false` when errors become nonzero,
+and `true` when the last error clears. Warnings do not change validity. `readOnly` reaches
+both CodeEditor and DiffEditor; leaving it undefined preserves each editor's defaults.
+
+The production docs example is `/builders.html?item=code-panel&mode=edit&theme=dark`.
+`apps/docs/e2e/builders.a11y.spec.js` checks Worker response evidence for `getWorker('yaml')`,
+inline-schema errors alongside consumer markers, no CSP violations or external requests,
+and axe in dark, light and high_contrast for the code panel, flow builder and workflow page
+in edit and run modes. Build the docs before running that Playwright file.

package/dist/index.d.ts

@@ -0,0 +1,164 @@
+
+import "react";
+import { Theme } from "@gntik-ai/tokens/runtime";
+import * as MonacoNamespace from "monaco-editor";
+import { editor } from "monaco-editor";
+//#region src/loader.d.ts
+/** The `monaco-editor` ESM module. */
+type Monaco = typeof MonacoNamespace;
+/** Returns the Monaco module; inject one to self-host, preconfigure or mock Monaco. */
+type MonacoLoader = () => Promise<Monaco>;
+/** Default loader: a dynamic `import('monaco-editor')`, so Monaco lands in its own chunk. */
+export declare const loadMonaco: MonacoLoader;
+type MonacoState = {
+  status: 'loading';
+  monaco: null;
+} | {
+  status: 'ready';
+  monaco: Monaco;
+} | {
+  status: 'error';
+  monaco: null;
+  error: unknown;
+};
+/** Loads Monaco once per loader and reports its state. */
+export declare function useMonaco(loader?: MonacoLoader): MonacoState;
+/** Registers the brand themes, applies the active one and re-skins on every <html> theme switch. */
+export declare function useBrandTheme(monaco: Monaco | null): void;
+/** Brand defaults shared by both editors (Geist Mono, flat chrome, no overview ruler). */
+export declare const BASE_OPTIONS: {
+  readonly automaticLayout: true;
+  readonly editContext: false;
+  readonly fontFamily: "Geist Mono, ui-monospace, SFMono-Regular, Menlo, monospace";
+  readonly fontSize: 13;
+  readonly lineHeight: 21;
+  readonly fontLigatures: false;
+  readonly letterSpacing: 0.2;
+  readonly padding: {
+    readonly top: 14;
+    readonly bottom: 14;
+  };
+  readonly scrollBeyondLastLine: false;
+  readonly smoothScrolling: true;
+  readonly cursorBlinking: "smooth";
+  readonly cursorSmoothCaretAnimation: "on";
+  readonly renderLineHighlight: "all";
+  readonly roundedSelection: true;
+  readonly tabSize: 2;
+  readonly insertSpaces: true;
+  readonly guides: {
+    readonly indentation: true;
+    readonly bracketPairs: true;
+  };
+  readonly scrollbar: {
+    readonly verticalScrollbarSize: 10;
+    readonly horizontalScrollbarSize: 10;
+    readonly useShadows: false;
+  };
+  readonly overviewRulerLanes: 0;
+  readonly overviewRulerBorder: false;
+  readonly fixedOverflowWidgets: true;
+  readonly minimap: {
+    readonly enabled: false;
+  };
+};
+//#endregion
+//#region src/CodeEditor.d.ts
+interface CodeEditorProps {
+  /** Controlled text. When it changes, the editor is updated (cursor kept when equal). */
+  value?: string;
+  /** Initial text for an uncontrolled editor. */
+  defaultValue?: string;
+  /** Called with the full text on every user edit. */
+  onChange?: (value: string, event: editor.IModelContentChangedEvent) => void;
+  /** Monaco language id, e.g. "typescript", "json", "yaml". */
+  language?: string;
+  readOnly?: boolean;
+  /** CSS height of the editor box. */
+  height?: number | string;
+  /** Accessible name of the editor's text area. */
+  'aria-label'?: string;
+  /** Extra Monaco options, merged over the brand defaults. */
+  options?: editor.IStandaloneEditorConstructionOptions;
+  className?: string;
+  /** Override how Monaco is loaded (self-hosting, preconfigured instance, tests). */
+  loader?: MonacoLoader;
+  /** Called once the editor instance exists. */
+  onMount?: (instance: editor.IStandaloneCodeEditor, monaco: Monaco) => void;
+}
+/** Monaco code editor themed by the brand tokens; loads Monaco lazily. */
+export declare function CodeEditor({ value, defaultValue, onChange, language, readOnly, height, 'aria-label': ariaLabel, options, className, loader, onMount }: CodeEditorProps): import("react").JSX.Element;
+//#endregion
+//#region src/DiffEditor.d.ts
+interface DiffEditorProps {
+  /** Left-hand (before) text. */
+  original: string;
+  /** Right-hand (after) text. */
+  modified: string;
+  /** Monaco language id for both sides. */
+  language?: string;
+  /** Read-only by default; set false to let users edit the modified side. */
+  readOnly?: boolean;
+  /** Side by side (default) or inline. */
+  sideBySide?: boolean;
+  height?: number | string;
+  /** Accessible name; the sides are announced as "<label>, original" / "<label>, modified". */
+  'aria-label'?: string;
+  /** Called with the modified text when the user edits it (requires readOnly={false}). */
+  onChange?: (modified: string) => void;
+  /** Extra Monaco diff options, merged over the brand defaults. */
+  options?: editor.IStandaloneDiffEditorConstructionOptions;
+  className?: string;
+  loader?: MonacoLoader;
+  onMount?: (instance: editor.IStandaloneDiffEditor, monaco: Monaco) => void;
+}
+/** Monaco diff editor themed by the brand tokens; loads Monaco lazily. */
+export declare function DiffEditor({ original, modified, language, readOnly, sideBySide, height, 'aria-label': ariaLabel, onChange, options, className, loader, onMount }: DiffEditorProps): import("react").JSX.Element;
+//#endregion
+//#region src/EditorFrame.d.ts
+/** Token-styled placeholder shown until Monaco has loaded. */
+export declare function EditorSkeleton({ label }: {
+  label: string;
+}): import("react").JSX.Element;
+//#endregion
+//#region src/theme.d.ts
+/** Monaco theme names registered by `defineBrandThemes`. */
+export declare const BRAND_THEMES: {
+  readonly dark: "gntik-dark";
+  readonly light: "gntik-light";
+  readonly high_contrast: "gntik-hc";
+};
+type BrandThemeName = (typeof BRAND_THEMES)[Theme];
+/** The subset of the Monaco API the theme helpers touch (keeps them mock-friendly). */
+interface MonacoThemeApi {
+  editor: Pick<typeof editor, 'defineTheme'>;
+}
+/** Monaco theme name for a gntik-ui theme. Defaults to the active <html> theme. */
+export declare function brandThemeFor(theme?: Theme): BrandThemeName;
+/**
+ * Builds Monaco theme data from the live brand tokens read on `el`
+ * (default: <html>). Every colour comes from `tokenHex`; alpha is a hex suffix.
+ */
+export declare function brandThemeData(theme: Theme, el?: Element): editor.IStandaloneThemeData;
+/**
+ * Registers `gntik-dark`, `gntik-light` and `gntik-hc` from the live brand tokens.
+ * The active theme is read from <html>; dark and high contrast are resolved on a
+ * hidden probe carrying their class. Light lives on `:root`, so while another
+ * theme is active it cannot be resolved exactly — call again after every theme
+ * switch (the components do this through `observeTheme`).
+ */
+export declare function defineBrandThemes(monaco: MonacoThemeApi): void;
+//#endregion
+//#region src/workers.d.ts
+/** Worker factory Monaco calls per language service (`label` is e.g. "json", "typescript", "yaml"). */
+type MonacoWorkerFactory = (workerId: string, label: string) => Worker | Promise<Worker>;
+/**
+ * Sets `self.MonacoEnvironment.getWorker`. Call once, before the first editor mounts.
+ * The package never imports workers itself: bundlers resolve them differently
+ * including consumer-injected YAML workers. Labels are passed through unchanged
+ * (see README for the Vite `?worker` recipe).
+ */
+export declare function configureMonacoWorkers(getWorker: MonacoWorkerFactory): void;
+//#endregion
+export type { BrandThemeName, CodeEditorProps, DiffEditorProps, Monaco, MonacoLoader, MonacoState, MonacoThemeApi, MonacoWorkerFactory };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -0,0 +1,592 @@
+'use client';
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { currentTheme, observeTheme, tokenHex } from "@gntik-ai/tokens/runtime";
+//#region src/EditorFrame.tsx
+const SKELETON_LINES = [
+	"w-2/5",
+	"w-3/4",
+	"w-1/2",
+	"w-2/3",
+	"w-1/3",
+	"w-3/5"
+];
+/** Token-styled placeholder shown until Monaco has loaded. */
+function EditorSkeleton({ label }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "status",
+		"aria-label": `Loading ${label}`,
+		"data-slot": "editor-skeleton",
+		className: "absolute inset-0 flex flex-col gap-3 bg-card px-4 py-3.5",
+		children: SKELETON_LINES.map((width, i) => /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-4",
+			children: [/* @__PURE__ */ jsx("span", { className: "h-2.5 w-4 rounded-sm bg-muted motion-safe:animate-pulse" }), /* @__PURE__ */ jsx("span", { className: `h-2.5 ${width} rounded-sm bg-muted motion-safe:animate-pulse` })]
+		}, i))
+	});
+}
+function EditorError({ label }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "alert",
+		"data-slot": "editor-error",
+		className: "absolute inset-0 grid place-items-center border border-dashed border-border bg-card px-8 text-center",
+		children: /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("p", {
+			className: "font-sans text-sm font-semibold text-foreground",
+			children: [
+				"The ",
+				label,
+				" could not load"
+			]
+		}), /* @__PURE__ */ jsxs("p", {
+			className: "mt-1 font-sans text-xs text-muted-foreground",
+			children: [
+				"Check that ",
+				/* @__PURE__ */ jsx("span", {
+					className: "font-mono",
+					children: "monaco-editor"
+				}),
+				" is installed and its workers are configured."
+			]
+		})] })
+	});
+}
+/** Sized host for a Monaco instance plus its loading and error states. */
+function EditorFrame({ state, height, label, className, hostRef }) {
+	const style = { height };
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "editor",
+		"data-state": state.status,
+		"aria-busy": state.status === "loading" || void 0,
+		className: ["relative w-full overflow-hidden bg-card", className].filter(Boolean).join(" "),
+		style,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				ref: hostRef,
+				className: "absolute inset-0"
+			}),
+			state.status === "loading" && /* @__PURE__ */ jsx(EditorSkeleton, { label }),
+			state.status === "error" && /* @__PURE__ */ jsx(EditorError, { label })
+		]
+	});
+}
+//#endregion
+//#region src/theme.ts
+/** Monaco theme names registered by `defineBrandThemes`. */
+const BRAND_THEMES = {
+	dark: "gntik-dark",
+	light: "gntik-light",
+	high_contrast: "gntik-hc"
+};
+const BASE = {
+	dark: "vs-dark",
+	light: "vs",
+	high_contrast: "hc-black"
+};
+/** Monaco theme name for a gntik-ui theme. Defaults to the active <html> theme. */
+function brandThemeFor(theme = currentTheme()) {
+	return BRAND_THEMES[theme];
+}
+/** Syntax token → brand token. Keywords use the brand green; the rest, categorical accents. */
+const RULES = [
+	["", "foreground"],
+	[
+		"comment",
+		"muted-foreground",
+		"italic"
+	],
+	["keyword", "primary"],
+	["keyword.json", "primary"],
+	["operator", "primary"],
+	["operators", "primary"],
+	["tag", "primary"],
+	["string", "category-cyan"],
+	["string.escape", "category-amber"],
+	["string.key.json", "primary"],
+	["string.value.json", "category-cyan"],
+	["attribute.value", "category-cyan"],
+	["attribute.name", "category-violet"],
+	["number", "category-amber"],
+	["constant", "category-amber"],
+	["regexp", "category-rose"],
+	["type", "category-violet"],
+	["type.identifier", "category-violet"],
+	["identifier", "foreground"],
+	["delimiter", "muted-foreground"],
+	["delimiter.bracket", "muted-foreground"],
+	["annotation", "category-rose"],
+	["metatag", "category-rose"]
+];
+const channel = (hex, i) => parseInt(hex.slice(1 + 2 * i, 3 + 2 * i), 16);
+const luminance = (hex) => {
+	const [r, g, b] = [
+		0,
+		1,
+		2
+	].map((i) => {
+		const v = channel(hex, i) / 255;
+		return v <= .03928 ? v / 12.92 : ((v + .055) / 1.055) ** 2.4;
+	});
+	return .2126 * r + .7152 * g + .0722 * b;
+};
+const contrastRatio = (a, b) => {
+	const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+	return (hi + .05) / (lo + .05);
+};
+/** Syntax text target: AA (4.5:1) with headroom for the current-line highlight. */
+const SYNTAX_CONTRAST = 4.7;
+/**
+* Keeps a syntax colour's hue but mixes it toward `fg` in 10% steps until it reaches
+* SYNTAX_CONTRAST on `bg` (green, amber and cyan on the light theme's white card otherwise
+* fall to 2–3:1). Token values never change; only the mix is derived from them.
+*/
+function readableOn(color, bg, fg) {
+	for (let step = 0; step <= 10; step++) {
+		const hex = mixHex(color, fg, step / 10);
+		if (contrastRatio(hex, bg) >= SYNTAX_CONTRAST) return hex;
+	}
+	return fg;
+}
+/** `a` mixed with `b` by `t` (0–1), per sRGB channel. */
+function mixHex(a, b, t) {
+	return `#${[
+		0,
+		1,
+		2
+	].map((i) => Math.round(channel(a, i) * (1 - t) + channel(b, i) * t).toString(16).padStart(2, "0")).join("")}`;
+}
+/** Alpha of the current-line highlight (`${fg}0d`): syntax text must also read on it. */
+const LINE_HIGHLIGHT_ALPHA = 13;
+/**
+* Builds Monaco theme data from the live brand tokens read on `el`
+* (default: <html>). Every colour comes from `tokenHex`; alpha is a hex suffix.
+*/
+function brandThemeData(theme, el) {
+	const c = (name) => tokenHex(name, el);
+	const primary = c("primary");
+	const muted = c("muted-foreground");
+	const border = c("border");
+	const fg = c("foreground");
+	const card = c("card");
+	const popover = c("popover");
+	const destructive = c("destructive");
+	const transparent = `${card}00`;
+	const lineBg = mixHex(card, fg, LINE_HIGHLIGHT_ALPHA / 255);
+	const syntax = (color) => readableOn(color, lineBg, fg);
+	return {
+		base: BASE[theme],
+		inherit: true,
+		rules: RULES.map(([token, color, fontStyle]) => ({
+			token,
+			foreground: syntax(c(color)).slice(1),
+			...fontStyle ? { fontStyle } : {}
+		})),
+		colors: {
+			"editor.background": card,
+			"editor.foreground": fg,
+			"editorLineNumber.foreground": `${muted}59`,
+			"editorLineNumber.activeForeground": primary,
+			"editorCursor.foreground": primary,
+			"editor.selectionBackground": `${primary}33`,
+			"editor.inactiveSelectionBackground": `${primary}1f`,
+			"editor.selectionHighlightBackground": `${primary}1f`,
+			"editor.lineHighlightBackground": `${fg}${LINE_HIGHLIGHT_ALPHA.toString(16).padStart(2, "0")}`,
+			"editor.lineHighlightBorder": transparent,
+			"editorIndentGuide.background": `${border}99`,
+			"editorIndentGuide.activeBackground": `${primary}80`,
+			"editorGutter.background": card,
+			"editorWhitespace.foreground": border,
+			"editorBracketMatch.background": `${primary}26`,
+			"editorBracketMatch.border": `${primary}99`,
+			"editorBracketHighlight.foreground1": syntax(primary),
+			"editorBracketHighlight.foreground2": syntax(c("category-violet")),
+			"editorBracketHighlight.foreground3": syntax(c("category-cyan")),
+			"editorOverviewRuler.border": transparent,
+			"scrollbarSlider.background": `${muted}2e`,
+			"scrollbarSlider.hoverBackground": `${muted}4d`,
+			"scrollbarSlider.activeBackground": `${muted}70`,
+			"editorWidget.background": popover,
+			"editorWidget.border": border,
+			"editorSuggestWidget.background": popover,
+			"editorSuggestWidget.border": border,
+			"editorSuggestWidget.selectedBackground": `${primary}26`,
+			"editorSuggestWidget.highlightForeground": primary,
+			"editorHoverWidget.background": popover,
+			"editorHoverWidget.border": border,
+			"editorGutter.modifiedBackground": c("info"),
+			"editorGutter.addedBackground": primary,
+			"editorGutter.deletedBackground": destructive,
+			"minimap.background": card,
+			"minimapSlider.background": `${muted}24`,
+			"diffEditor.insertedTextBackground": `${primary}26`,
+			"diffEditor.removedTextBackground": `${destructive}2e`,
+			"diffEditor.insertedLineBackground": `${primary}14`,
+			"diffEditor.removedLineBackground": `${destructive}14`,
+			"diffEditorGutter.insertedLineBackground": `${primary}24`,
+			"diffEditorGutter.removedLineBackground": `${destructive}24`,
+			"diffEditor.diagonalFill": `${border}80`
+		}
+	};
+}
+/** Theme class a probe element needs to resolve a theme's tokens. Light is `:root`. */
+const PROBE_CLASS = {
+	dark: "dark",
+	light: "",
+	high_contrast: "high_contrast"
+};
+/**
+* Registers `gntik-dark`, `gntik-light` and `gntik-hc` from the live brand tokens.
+* The active theme is read from <html>; dark and high contrast are resolved on a
+* hidden probe carrying their class. Light lives on `:root`, so while another
+* theme is active it cannot be resolved exactly — call again after every theme
+* switch (the components do this through `observeTheme`).
+*/
+function defineBrandThemes(monaco) {
+	const active = currentTheme();
+	const doc = typeof document === "undefined" ? void 0 : document;
+	for (const theme of Object.keys(BRAND_THEMES)) {
+		let probe;
+		if (theme !== active && doc && PROBE_CLASS[theme]) {
+			probe = doc.createElement("div");
+			probe.className = PROBE_CLASS[theme];
+			probe.hidden = true;
+			doc.body.appendChild(probe);
+		}
+		try {
+			monaco.editor.defineTheme(BRAND_THEMES[theme], brandThemeData(theme, probe));
+		} finally {
+			probe?.remove();
+		}
+	}
+}
+//#endregion
+//#region src/loader.ts
+let cached;
+/** Default loader: a dynamic `import('monaco-editor')`, so Monaco lands in its own chunk. */
+const loadMonaco = () => {
+	cached ??= import("monaco-editor").then((m) => {
+		if (typeof document !== "undefined" && document.fonts?.ready) document.fonts.ready.then(() => m.editor.remeasureFonts());
+		return m;
+	});
+	cached.catch(() => {
+		cached = void 0;
+	});
+	return cached;
+};
+/** Loads Monaco once per loader and reports its state. */
+function useMonaco(loader = loadMonaco) {
+	const [entry, setEntry] = useState(null);
+	useEffect(() => {
+		let alive = true;
+		loader().then((monaco) => alive && setEntry({
+			loader,
+			state: {
+				status: "ready",
+				monaco
+			}
+		}), (error) => alive && setEntry({
+			loader,
+			state: {
+				status: "error",
+				monaco: null,
+				error
+			}
+		}));
+		return () => {
+			alive = false;
+		};
+	}, [loader]);
+	return entry && entry.loader === loader ? entry.state : {
+		status: "loading",
+		monaco: null
+	};
+}
+/** Registers the brand themes, applies the active one and re-skins on every <html> theme switch. */
+function useBrandTheme(monaco) {
+	useEffect(() => {
+		if (!monaco) return void 0;
+		const apply = () => {
+			defineBrandThemes(monaco);
+			monaco.editor.setTheme(brandThemeFor());
+		};
+		apply();
+		return observeTheme(apply);
+	}, [monaco]);
+}
+/** Brand defaults shared by both editors (Geist Mono, flat chrome, no overview ruler). */
+const BASE_OPTIONS = {
+	automaticLayout: true,
+	editContext: false,
+	fontFamily: "Geist Mono, ui-monospace, SFMono-Regular, Menlo, monospace",
+	fontSize: 13,
+	lineHeight: 21,
+	fontLigatures: false,
+	letterSpacing: .2,
+	padding: {
+		top: 14,
+		bottom: 14
+	},
+	scrollBeyondLastLine: false,
+	smoothScrolling: true,
+	cursorBlinking: "smooth",
+	cursorSmoothCaretAnimation: "on",
+	renderLineHighlight: "all",
+	roundedSelection: true,
+	tabSize: 2,
+	insertSpaces: true,
+	guides: {
+		indentation: true,
+		bracketPairs: true
+	},
+	scrollbar: {
+		verticalScrollbarSize: 10,
+		horizontalScrollbarSize: 10,
+		useShadows: false
+	},
+	overviewRulerLanes: 0,
+	overviewRulerBorder: false,
+	fixedOverflowWidgets: true,
+	minimap: { enabled: false }
+};
+/** Forces a few layout passes: containers and webfonts often settle after creation. */
+function kickLayout(layout) {
+	const run = () => {
+		try {
+			layout();
+		} catch {}
+	};
+	const raf = typeof requestAnimationFrame === "function" ? requestAnimationFrame(run) : 0;
+	const timers = [setTimeout(run, 70), setTimeout(run, 240)];
+	return () => {
+		if (raf && typeof cancelAnimationFrame === "function") cancelAnimationFrame(raf);
+		timers.forEach(clearTimeout);
+	};
+}
+//#endregion
+//#region src/CodeEditor.tsx
+/** Monaco code editor themed by the brand tokens; loads Monaco lazily. */
+function CodeEditor({ value, defaultValue = "", onChange, language = "plaintext", readOnly = false, height = 320, "aria-label": ariaLabel = "Code editor", options, className, loader = loadMonaco, onMount }) {
+	const state = useMonaco(loader);
+	const monaco = state.monaco;
+	const host = useRef(null);
+	const instance = useRef(null);
+	const syncing = useRef(false);
+	const latest = useRef({
+		value,
+		defaultValue,
+		language,
+		readOnly,
+		ariaLabel,
+		options,
+		onChange,
+		onMount
+	});
+	useLayoutEffect(() => {
+		latest.current = {
+			value,
+			defaultValue,
+			language,
+			readOnly,
+			ariaLabel,
+			options,
+			onChange,
+			onMount
+		};
+	});
+	useBrandTheme(monaco);
+	useEffect(() => {
+		if (!monaco || !host.current) return void 0;
+		const p = latest.current;
+		const ed = monaco.editor.create(host.current, {
+			...BASE_OPTIONS,
+			...p.options,
+			value: p.value ?? p.defaultValue,
+			language: p.language,
+			readOnly: p.readOnly,
+			ariaLabel: p.ariaLabel,
+			theme: brandThemeFor()
+		});
+		instance.current = ed;
+		const sub = ed.onDidChangeModelContent((event) => {
+			if (!syncing.current) latest.current.onChange?.(ed.getValue(), event);
+		});
+		p.onMount?.(ed, monaco);
+		const stopLayout = kickLayout(() => ed.layout());
+		return () => {
+			stopLayout();
+			sub.dispose();
+			ed.dispose();
+			instance.current = null;
+		};
+	}, [monaco]);
+	useEffect(() => {
+		const ed = instance.current;
+		if (!ed || value === void 0 || ed.getValue() === value) return;
+		syncing.current = true;
+		try {
+			ed.setValue(value);
+		} finally {
+			syncing.current = false;
+		}
+	}, [value, monaco]);
+	useEffect(() => {
+		const model = instance.current?.getModel();
+		if (monaco && model) monaco.editor.setModelLanguage(model, language);
+	}, [language, monaco]);
+	useEffect(() => {
+		instance.current?.updateOptions({
+			...options,
+			readOnly,
+			ariaLabel
+		});
+	}, [
+		options,
+		readOnly,
+		ariaLabel,
+		monaco
+	]);
+	return /* @__PURE__ */ jsx(EditorFrame, {
+		state,
+		height,
+		label: "code editor",
+		className,
+		hostRef: host
+	});
+}
+//#endregion
+//#region src/DiffEditor.tsx
+/** Monaco diff editor themed by the brand tokens; loads Monaco lazily. */
+function DiffEditor({ original, modified, language = "plaintext", readOnly = true, sideBySide = true, height = 320, "aria-label": ariaLabel = "Diff editor", onChange, options, className, loader = loadMonaco, onMount }) {
+	const state = useMonaco(loader);
+	const monaco = state.monaco;
+	const host = useRef(null);
+	const instance = useRef(null);
+	const syncing = useRef(false);
+	const latest = useRef({
+		original,
+		modified,
+		language,
+		readOnly,
+		sideBySide,
+		ariaLabel,
+		options,
+		onChange,
+		onMount
+	});
+	useLayoutEffect(() => {
+		latest.current = {
+			original,
+			modified,
+			language,
+			readOnly,
+			sideBySide,
+			ariaLabel,
+			options,
+			onChange,
+			onMount
+		};
+	});
+	useBrandTheme(monaco);
+	useEffect(() => {
+		if (!monaco || !host.current) return void 0;
+		const p = latest.current;
+		const ed = monaco.editor.createDiffEditor(host.current, {
+			...BASE_OPTIONS,
+			ignoreTrimWhitespace: false,
+			renderOverviewRuler: false,
+			renderIndicators: true,
+			renderMarginRevertIcon: false,
+			useInlineViewWhenSpaceIsLimited: false,
+			...p.options,
+			readOnly: p.readOnly,
+			renderSideBySide: p.sideBySide,
+			originalAriaLabel: `${p.ariaLabel}, original`,
+			modifiedAriaLabel: `${p.ariaLabel}, modified`,
+			theme: brandThemeFor()
+		});
+		const originalModel = monaco.editor.createModel(p.original, p.language);
+		const modifiedModel = monaco.editor.createModel(p.modified, p.language);
+		ed.setModel({
+			original: originalModel,
+			modified: modifiedModel
+		});
+		instance.current = ed;
+		const sub = modifiedModel.onDidChangeContent(() => {
+			if (!syncing.current) latest.current.onChange?.(modifiedModel.getValue());
+		});
+		p.onMount?.(ed, monaco);
+		const fit = () => {
+			const el = host.current;
+			if (el) ed.layout({
+				width: el.clientWidth,
+				height: el.clientHeight
+			});
+		};
+		const stopLayout = kickLayout(fit);
+		return () => {
+			stopLayout();
+			sub.dispose();
+			ed.dispose();
+			originalModel.dispose();
+			modifiedModel.dispose();
+			instance.current = null;
+		};
+	}, [monaco]);
+	useEffect(() => {
+		const model = instance.current?.getModel();
+		if (!model) return;
+		syncing.current = true;
+		try {
+			if (model.original.getValue() !== original) model.original.setValue(original);
+			if (model.modified.getValue() !== modified) model.modified.setValue(modified);
+		} finally {
+			syncing.current = false;
+		}
+	}, [
+		original,
+		modified,
+		monaco
+	]);
+	useEffect(() => {
+		const model = instance.current?.getModel();
+		if (!monaco || !model) return;
+		monaco.editor.setModelLanguage(model.original, language);
+		monaco.editor.setModelLanguage(model.modified, language);
+	}, [language, monaco]);
+	useEffect(() => {
+		instance.current?.updateOptions({
+			...options,
+			readOnly,
+			renderSideBySide: sideBySide
+		});
+	}, [
+		options,
+		readOnly,
+		sideBySide,
+		monaco
+	]);
+	return /* @__PURE__ */ jsx(EditorFrame, {
+		state,
+		height,
+		label: "diff editor",
+		className,
+		hostRef: host
+	});
+}
+//#endregion
+//#region src/workers.ts
+/**
+* Sets `self.MonacoEnvironment.getWorker`. Call once, before the first editor mounts.
+* The package never imports workers itself: bundlers resolve them differently
+* including consumer-injected YAML workers. Labels are passed through unchanged
+* (see README for the Vite `?worker` recipe).
+*/
+function configureMonacoWorkers(getWorker) {
+	const scope = globalThis;
+	scope.MonacoEnvironment = {
+		...scope.MonacoEnvironment,
+		getWorker
+	};
+}
+//#endregion
+export { BASE_OPTIONS, BRAND_THEMES, CodeEditor, DiffEditor, EditorSkeleton, brandThemeData, brandThemeFor, configureMonacoWorkers, defineBrandThemes, loadMonaco, useBrandTheme, useMonaco };
+
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../src/EditorFrame.tsx","../src/theme.ts","../src/loader.ts","../src/CodeEditor.tsx","../src/DiffEditor.tsx","../src/workers.ts"],"sourcesContent":["import type { CSSProperties, ReactNode, Ref } from 'react';\nimport type { MonacoState } from './loader';\n\nexport interface EditorFrameProps {\n  state: MonacoState;\n  height: number | string;\n  label: string;\n  className?: string;\n  hostRef: Ref<HTMLDivElement>;\n}\n\nconst SKELETON_LINES = ['w-2/5', 'w-3/4', 'w-1/2', 'w-2/3', 'w-1/3', 'w-3/5'];\n\n/** Token-styled placeholder shown until Monaco has loaded. */\nexport function EditorSkeleton({ label }: { label: string }) {\n  return (\n    <div\n      role=\"status\"\n      aria-label={`Loading ${label}`}\n      data-slot=\"editor-skeleton\"\n      className=\"absolute inset-0 flex flex-col gap-3 bg-card px-4 py-3.5\"\n    >\n      {SKELETON_LINES.map((width, i) => (\n        <div key={i} className=\"flex items-center gap-4\">\n          <span className=\"h-2.5 w-4 rounded-sm bg-muted motion-safe:animate-pulse\" />\n          <span className={`h-2.5 ${width} rounded-sm bg-muted motion-safe:animate-pulse`} />\n        </div>\n      ))}\n    </div>\n  );\n}\n\nfunction EditorError({ label }: { label: string }): ReactNode {\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"editor-error\"\n      className=\"absolute inset-0 grid place-items-center border border-dashed border-border bg-card px-8 text-center\"\n    >\n      <div>\n        <p className=\"font-sans text-sm font-semibold text-foreground\">The {label} could not load</p>\n        <p className=\"mt-1 font-sans text-xs text-muted-foreground\">\n          Check that <span className=\"font-mono\">monaco-editor</span> is installed and its workers are configured.\n        </p>\n      </div>\n    </div>\n  );\n}\n\n/** Sized host for a Monaco instance plus its loading and error states. */\nexport function EditorFrame({ state, height, label, className, hostRef }: EditorFrameProps) {\n  const style: CSSProperties = { height };\n  return (\n    <div\n      data-slot=\"editor\"\n      data-state={state.status}\n      aria-busy={state.status === 'loading' || undefined}\n      className={['relative w-full overflow-hidden bg-card', className].filter(Boolean).join(' ')}\n      style={style}\n    >\n      <div ref={hostRef} className=\"absolute inset-0\" />\n      {state.status === 'loading' && <EditorSkeleton label={label} />}\n      {state.status === 'error' && <EditorError label={label} />}\n    </div>\n  );\n}\n","import type { editor } from 'monaco-editor';\nimport { currentTheme, tokenHex, type Theme } from '@gntik-ai/tokens/runtime';\n\n/** Monaco theme names registered by `defineBrandThemes`. */\nexport const BRAND_THEMES = {\n  dark: 'gntik-dark',\n  light: 'gntik-light',\n  high_contrast: 'gntik-hc',\n} as const satisfies Record<Theme, string>;\n\nexport type BrandThemeName = (typeof BRAND_THEMES)[Theme];\n\n/** The subset of the Monaco API the theme helpers touch (keeps them mock-friendly). */\nexport interface MonacoThemeApi {\n  editor: Pick<typeof editor, 'defineTheme'>;\n}\n\nconst BASE: Record<Theme, editor.BuiltinTheme> = {\n  dark: 'vs-dark',\n  light: 'vs',\n  high_contrast: 'hc-black',\n};\n\n/** Monaco theme name for a gntik-ui theme. Defaults to the active <html> theme. */\nexport function brandThemeFor(theme: Theme = currentTheme()): BrandThemeName {\n  return BRAND_THEMES[theme];\n}\n\n/** Syntax token → brand token. Keywords use the brand green; the rest, categorical accents. */\nconst RULES: ReadonlyArray<readonly [token: string, color: string, fontStyle?: string]> = [\n  ['', 'foreground'],\n  ['comment', 'muted-foreground', 'italic'],\n  ['keyword', 'primary'],\n  ['keyword.json', 'primary'],\n  ['operator', 'primary'],\n  ['operators', 'primary'],\n  ['tag', 'primary'],\n  ['string', 'category-cyan'],\n  ['string.escape', 'category-amber'],\n  ['string.key.json', 'primary'],\n  ['string.value.json', 'category-cyan'],\n  ['attribute.value', 'category-cyan'],\n  ['attribute.name', 'category-violet'],\n  ['number', 'category-amber'],\n  ['constant', 'category-amber'],\n  ['regexp', 'category-rose'],\n  ['type', 'category-violet'],\n  ['type.identifier', 'category-violet'],\n  ['identifier', 'foreground'],\n  ['delimiter', 'muted-foreground'],\n  ['delimiter.bracket', 'muted-foreground'],\n  ['annotation', 'category-rose'],\n  ['metatag', 'category-rose'],\n];\n\nconst channel = (hex: string, i: number) => parseInt(hex.slice(1 + 2 * i, 3 + 2 * i), 16);\nconst luminance = (hex: string) => {\n  const [r, g, b] = [0, 1, 2].map((i) => {\n    const v = channel(hex, i) / 255;\n    return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;\n  });\n  return 0.2126 * r! + 0.7152 * g! + 0.0722 * b!;\n};\nexport const contrastRatio = (a: string, b: string) => {\n  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);\n  return (hi! + 0.05) / (lo! + 0.05);\n};\n/** Syntax text target: AA (4.5:1) with headroom for the current-line highlight. */\nconst SYNTAX_CONTRAST = 4.7;\n\n/**\n * Keeps a syntax colour's hue but mixes it toward `fg` in 10% steps until it reaches\n * SYNTAX_CONTRAST on `bg` (green, amber and cyan on the light theme's white card otherwise\n * fall to 2–3:1). Token values never change; only the mix is derived from them.\n */\nexport function readableOn(color: string, bg: string, fg: string): string {\n  for (let step = 0; step <= 10; step++) {\n    const hex = mixHex(color, fg, step / 10);\n    if (contrastRatio(hex, bg) >= SYNTAX_CONTRAST) return hex;\n  }\n  return fg;\n}\n\n/** `a` mixed with `b` by `t` (0–1), per sRGB channel. */\nexport function mixHex(a: string, b: string, t: number): string {\n  return `#${[0, 1, 2]\n    .map((i) =>\n      Math.round(channel(a, i) * (1 - t) + channel(b, i) * t)\n        .toString(16)\n        .padStart(2, '0'),\n    )\n    .join('')}`;\n}\n\n/** Alpha of the current-line highlight (`${fg}0d`): syntax text must also read on it. */\nconst LINE_HIGHLIGHT_ALPHA = 0x0d;\n\n/**\n * Builds Monaco theme data from the live brand tokens read on `el`\n * (default: <html>). Every colour comes from `tokenHex`; alpha is a hex suffix.\n */\nexport function brandThemeData(theme: Theme, el?: Element): editor.IStandaloneThemeData {\n  const c = (name: string) => tokenHex(name, el);\n  const primary = c('primary');\n  const muted = c('muted-foreground');\n  const border = c('border');\n  const fg = c('foreground');\n  const card = c('card');\n  const popover = c('popover');\n  const destructive = c('destructive');\n  const transparent = `${card}00`;\n  // Darkest surface syntax text sits on: the card under the current-line highlight.\n  const lineBg = mixHex(card, fg, LINE_HIGHLIGHT_ALPHA / 255);\n  const syntax = (color: string) => readableOn(color, lineBg, fg);\n\n  return {\n    base: BASE[theme],\n    inherit: true,\n    rules: RULES.map(([token, color, fontStyle]) => ({\n      token,\n      foreground: syntax(c(color)).slice(1),\n      ...(fontStyle ? { fontStyle } : {}),\n    })),\n    colors: {\n      'editor.background': card,\n      'editor.foreground': fg,\n      'editorLineNumber.foreground': `${muted}59`,\n      'editorLineNumber.activeForeground': primary,\n      'editorCursor.foreground': primary,\n      'editor.selectionBackground': `${primary}33`,\n      'editor.inactiveSelectionBackground': `${primary}1f`,\n      'editor.selectionHighlightBackground': `${primary}1f`,\n      'editor.lineHighlightBackground': `${fg}${LINE_HIGHLIGHT_ALPHA.toString(16).padStart(2, '0')}`,\n      'editor.lineHighlightBorder': transparent,\n      'editorIndentGuide.background': `${border}99`,\n      'editorIndentGuide.activeBackground': `${primary}80`,\n      'editorGutter.background': card,\n      'editorWhitespace.foreground': border,\n      'editorBracketMatch.background': `${primary}26`,\n      'editorBracketMatch.border': `${primary}99`,\n      'editorBracketHighlight.foreground1': syntax(primary),\n      'editorBracketHighlight.foreground2': syntax(c('category-violet')),\n      'editorBracketHighlight.foreground3': syntax(c('category-cyan')),\n      'editorOverviewRuler.border': transparent,\n      'scrollbarSlider.background': `${muted}2e`,\n      'scrollbarSlider.hoverBackground': `${muted}4d`,\n      'scrollbarSlider.activeBackground': `${muted}70`,\n      'editorWidget.background': popover,\n      'editorWidget.border': border,\n      'editorSuggestWidget.background': popover,\n      'editorSuggestWidget.border': border,\n      'editorSuggestWidget.selectedBackground': `${primary}26`,\n      'editorSuggestWidget.highlightForeground': primary,\n      'editorHoverWidget.background': popover,\n      'editorHoverWidget.border': border,\n      'editorGutter.modifiedBackground': c('info'),\n      'editorGutter.addedBackground': primary,\n      'editorGutter.deletedBackground': destructive,\n      'minimap.background': card,\n      'minimapSlider.background': `${muted}24`,\n      'diffEditor.insertedTextBackground': `${primary}26`,\n      'diffEditor.removedTextBackground': `${destructive}2e`,\n      'diffEditor.insertedLineBackground': `${primary}14`,\n      'diffEditor.removedLineBackground': `${destructive}14`,\n      'diffEditorGutter.insertedLineBackground': `${primary}24`,\n      'diffEditorGutter.removedLineBackground': `${destructive}24`,\n      'diffEditor.diagonalFill': `${border}80`,\n    },\n  };\n}\n\n/** Theme class a probe element needs to resolve a theme's tokens. Light is `:root`. */\nconst PROBE_CLASS: Record<Theme, string> = { dark: 'dark', light: '', high_contrast: 'high_contrast' };\n\n/**\n * Registers `gntik-dark`, `gntik-light` and `gntik-hc` from the live brand tokens.\n * The active theme is read from <html>; dark and high contrast are resolved on a\n * hidden probe carrying their class. Light lives on `:root`, so while another\n * theme is active it cannot be resolved exactly — call again after every theme\n * switch (the components do this through `observeTheme`).\n */\nexport function defineBrandThemes(monaco: MonacoThemeApi): void {\n  const active = currentTheme();\n  const doc = typeof document === 'undefined' ? undefined : document;\n  for (const theme of Object.keys(BRAND_THEMES) as Theme[]) {\n    let probe: HTMLElement | undefined;\n    if (theme !== active && doc && PROBE_CLASS[theme]) {\n      probe = doc.createElement('div');\n      probe.className = PROBE_CLASS[theme];\n      probe.hidden = true;\n      doc.body.appendChild(probe);\n    }\n    try {\n      monaco.editor.defineTheme(BRAND_THEMES[theme], brandThemeData(theme, probe));\n    } finally {\n      probe?.remove();\n    }\n  }\n}\n","import { useEffect, useState } from 'react';\nimport { observeTheme } from '@gntik-ai/tokens/runtime';\nimport type * as MonacoNamespace from 'monaco-editor';\nimport { brandThemeFor, defineBrandThemes } from './theme';\n\n/** The `monaco-editor` ESM module. */\nexport type Monaco = typeof MonacoNamespace;\n/** Returns the Monaco module; inject one to self-host, preconfigure or mock Monaco. */\nexport type MonacoLoader = () => Promise<Monaco>;\n\nlet cached: Promise<Monaco> | undefined;\n\n/** Default loader: a dynamic `import('monaco-editor')`, so Monaco lands in its own chunk. */\nexport const loadMonaco: MonacoLoader = () => {\n  cached ??= import('monaco-editor').then((m) => {\n    // Webfonts load late: re-measure glyph metrics once they are ready.\n    if (typeof document !== 'undefined' && document.fonts?.ready) {\n      void document.fonts.ready.then(() => m.editor.remeasureFonts());\n    }\n    return m;\n  });\n  cached.catch(() => {\n    cached = undefined;\n  });\n  return cached;\n};\n\nexport type MonacoState =\n  | { status: 'loading'; monaco: null }\n  | { status: 'ready'; monaco: Monaco }\n  | { status: 'error'; monaco: null; error: unknown };\n\n/** Loads Monaco once per loader and reports its state. */\nexport function useMonaco(loader: MonacoLoader = loadMonaco): MonacoState {\n  // State is keyed by loader, so a new loader reads as \"loading\" without a sync setState.\n  const [entry, setEntry] = useState<{ loader: MonacoLoader; state: MonacoState } | null>(null);\n  useEffect(() => {\n    let alive = true;\n    loader().then(\n      (monaco) => alive && setEntry({ loader, state: { status: 'ready', monaco } }),\n      (error: unknown) => alive && setEntry({ loader, state: { status: 'error', monaco: null, error } }),\n    );\n    return () => {\n      alive = false;\n    };\n  }, [loader]);\n  return entry && entry.loader === loader ? entry.state : { status: 'loading', monaco: null };\n}\n\n/** Registers the brand themes, applies the active one and re-skins on every <html> theme switch. */\nexport function useBrandTheme(monaco: Monaco | null): void {\n  useEffect(() => {\n    if (!monaco) return undefined;\n    const apply = () => {\n      defineBrandThemes(monaco);\n      monaco.editor.setTheme(brandThemeFor());\n    };\n    apply();\n    return observeTheme(apply);\n  }, [monaco]);\n}\n\n/** Brand defaults shared by both editors (Geist Mono, flat chrome, no overview ruler). */\nexport const BASE_OPTIONS = {\n  automaticLayout: true,\n  // Keep the labelled input focusable before the first click in Chromium.\n  // Monaco 0.57's native EditContext can expose a zero-size textbox instead.\n  editContext: false,\n  fontFamily: 'Geist Mono, ui-monospace, SFMono-Regular, Menlo, monospace',\n  fontSize: 13,\n  lineHeight: 21,\n  fontLigatures: false,\n  letterSpacing: 0.2,\n  padding: { top: 14, bottom: 14 },\n  scrollBeyondLastLine: false,\n  smoothScrolling: true,\n  cursorBlinking: 'smooth',\n  cursorSmoothCaretAnimation: 'on',\n  renderLineHighlight: 'all',\n  roundedSelection: true,\n  tabSize: 2,\n  insertSpaces: true,\n  guides: { indentation: true, bracketPairs: true },\n  scrollbar: { verticalScrollbarSize: 10, horizontalScrollbarSize: 10, useShadows: false },\n  overviewRulerLanes: 0,\n  overviewRulerBorder: false,\n  fixedOverflowWidgets: true,\n  minimap: { enabled: false },\n} as const satisfies MonacoNamespace.editor.IStandaloneEditorConstructionOptions;\n\n/** Forces a few layout passes: containers and webfonts often settle after creation. */\nexport function kickLayout(layout: () => void): () => void {\n  const run = () => {\n    try {\n      layout();\n    } catch {\n      /* editor already disposed */\n    }\n  };\n  const raf = typeof requestAnimationFrame === 'function' ? requestAnimationFrame(run) : 0;\n  const timers = [setTimeout(run, 70), setTimeout(run, 240)];\n  return () => {\n    if (raf && typeof cancelAnimationFrame === 'function') cancelAnimationFrame(raf);\n    timers.forEach(clearTimeout);\n  };\n}\n","import { useEffect, useRef, useLayoutEffect } from 'react';\nimport type { editor } from 'monaco-editor';\nimport { EditorFrame } from './EditorFrame';\nimport {\n  BASE_OPTIONS,\n  kickLayout,\n  loadMonaco,\n  useBrandTheme,\n  useMonaco,\n  type Monaco,\n  type MonacoLoader,\n} from './loader';\nimport { brandThemeFor } from './theme';\n\nexport interface CodeEditorProps {\n  /** Controlled text. When it changes, the editor is updated (cursor kept when equal). */\n  value?: string;\n  /** Initial text for an uncontrolled editor. */\n  defaultValue?: string;\n  /** Called with the full text on every user edit. */\n  onChange?: (value: string, event: editor.IModelContentChangedEvent) => void;\n  /** Monaco language id, e.g. \"typescript\", \"json\", \"yaml\". */\n  language?: string;\n  readOnly?: boolean;\n  /** CSS height of the editor box. */\n  height?: number | string;\n  /** Accessible name of the editor's text area. */\n  'aria-label'?: string;\n  /** Extra Monaco options, merged over the brand defaults. */\n  options?: editor.IStandaloneEditorConstructionOptions;\n  className?: string;\n  /** Override how Monaco is loaded (self-hosting, preconfigured instance, tests). */\n  loader?: MonacoLoader;\n  /** Called once the editor instance exists. */\n  onMount?: (instance: editor.IStandaloneCodeEditor, monaco: Monaco) => void;\n}\n\n/** Monaco code editor themed by the brand tokens; loads Monaco lazily. */\nexport function CodeEditor({\n  value,\n  defaultValue = '',\n  onChange,\n  language = 'plaintext',\n  readOnly = false,\n  height = 320,\n  'aria-label': ariaLabel = 'Code editor',\n  options,\n  className,\n  loader = loadMonaco,\n  onMount,\n}: CodeEditorProps) {\n  const state = useMonaco(loader);\n  const monaco = state.monaco;\n  const host = useRef<HTMLDivElement>(null);\n  const instance = useRef<editor.IStandaloneCodeEditor | null>(null);\n  const syncing = useRef(false);\n  const latest = useRef({ value, defaultValue, language, readOnly, ariaLabel, options, onChange, onMount });\n  useLayoutEffect(() => {\n    latest.current = { value, defaultValue, language, readOnly, ariaLabel, options, onChange, onMount };\n  });\n\n  useBrandTheme(monaco);\n\n  useEffect(() => {\n    if (!monaco || !host.current) return undefined;\n    const p = latest.current;\n    const ed = monaco.editor.create(host.current, {\n      ...BASE_OPTIONS,\n      ...p.options,\n      value: p.value ?? p.defaultValue,\n      language: p.language,\n      readOnly: p.readOnly,\n      ariaLabel: p.ariaLabel,\n      theme: brandThemeFor(),\n    });\n    instance.current = ed;\n    const sub = ed.onDidChangeModelContent((event) => {\n      if (!syncing.current) latest.current.onChange?.(ed.getValue(), event);\n    });\n    p.onMount?.(ed, monaco);\n    const stopLayout = kickLayout(() => ed.layout());\n    return () => {\n      stopLayout();\n      sub.dispose();\n      ed.dispose();\n      instance.current = null;\n    };\n  }, [monaco]);\n\n  useEffect(() => {\n    const ed = instance.current;\n    if (!ed || value === undefined || ed.getValue() === value) return;\n    syncing.current = true;\n    try {\n      ed.setValue(value);\n    } finally {\n      syncing.current = false;\n    }\n  }, [value, monaco]);\n\n  useEffect(() => {\n    const model = instance.current?.getModel();\n    if (monaco && model) monaco.editor.setModelLanguage(model, language);\n  }, [language, monaco]);\n\n  useEffect(() => {\n    instance.current?.updateOptions({ ...options, readOnly, ariaLabel });\n  }, [options, readOnly, ariaLabel, monaco]);\n\n  return <EditorFrame state={state} height={height} label=\"code editor\" className={className} hostRef={host} />;\n}\n","import { useEffect, useRef, useLayoutEffect } from 'react';\nimport type { editor } from 'monaco-editor';\nimport { EditorFrame } from './EditorFrame';\nimport {\n  BASE_OPTIONS,\n  kickLayout,\n  loadMonaco,\n  useBrandTheme,\n  useMonaco,\n  type Monaco,\n  type MonacoLoader,\n} from './loader';\nimport { brandThemeFor } from './theme';\n\nexport interface DiffEditorProps {\n  /** Left-hand (before) text. */\n  original: string;\n  /** Right-hand (after) text. */\n  modified: string;\n  /** Monaco language id for both sides. */\n  language?: string;\n  /** Read-only by default; set false to let users edit the modified side. */\n  readOnly?: boolean;\n  /** Side by side (default) or inline. */\n  sideBySide?: boolean;\n  height?: number | string;\n  /** Accessible name; the sides are announced as \"<label>, original\" / \"<label>, modified\". */\n  'aria-label'?: string;\n  /** Called with the modified text when the user edits it (requires readOnly={false}). */\n  onChange?: (modified: string) => void;\n  /** Extra Monaco diff options, merged over the brand defaults. */\n  options?: editor.IStandaloneDiffEditorConstructionOptions;\n  className?: string;\n  loader?: MonacoLoader;\n  onMount?: (instance: editor.IStandaloneDiffEditor, monaco: Monaco) => void;\n}\n\n/** Monaco diff editor themed by the brand tokens; loads Monaco lazily. */\nexport function DiffEditor({\n  original,\n  modified,\n  language = 'plaintext',\n  readOnly = true,\n  sideBySide = true,\n  height = 320,\n  'aria-label': ariaLabel = 'Diff editor',\n  onChange,\n  options,\n  className,\n  loader = loadMonaco,\n  onMount,\n}: DiffEditorProps) {\n  const state = useMonaco(loader);\n  const monaco = state.monaco;\n  const host = useRef<HTMLDivElement>(null);\n  const instance = useRef<editor.IStandaloneDiffEditor | null>(null);\n  const syncing = useRef(false);\n  const latest = useRef({ original, modified, language, readOnly, sideBySide, ariaLabel, options, onChange, onMount });\n  useLayoutEffect(() => {\n    latest.current = { original, modified, language, readOnly, sideBySide, ariaLabel, options, onChange, onMount };\n  });\n\n  useBrandTheme(monaco);\n\n  useEffect(() => {\n    if (!monaco || !host.current) return undefined;\n    const p = latest.current;\n    const ed = monaco.editor.createDiffEditor(host.current, {\n      ...BASE_OPTIONS,\n      ignoreTrimWhitespace: false,\n      renderOverviewRuler: false,\n      renderIndicators: true,\n      renderMarginRevertIcon: false,\n      useInlineViewWhenSpaceIsLimited: false,\n      ...p.options,\n      readOnly: p.readOnly,\n      renderSideBySide: p.sideBySide,\n      originalAriaLabel: `${p.ariaLabel}, original`,\n      modifiedAriaLabel: `${p.ariaLabel}, modified`,\n      theme: brandThemeFor(),\n    });\n    const originalModel = monaco.editor.createModel(p.original, p.language);\n    const modifiedModel = monaco.editor.createModel(p.modified, p.language);\n    ed.setModel({ original: originalModel, modified: modifiedModel });\n    instance.current = ed;\n    const sub = modifiedModel.onDidChangeContent(() => {\n      if (!syncing.current) latest.current.onChange?.(modifiedModel.getValue());\n    });\n    p.onMount?.(ed, monaco);\n    const fit = () => {\n      const el = host.current;\n      if (el) ed.layout({ width: el.clientWidth, height: el.clientHeight });\n    };\n    const stopLayout = kickLayout(fit);\n    return () => {\n      stopLayout();\n      sub.dispose();\n      ed.dispose();\n      originalModel.dispose();\n      modifiedModel.dispose();\n      instance.current = null;\n    };\n  }, [monaco]);\n\n  useEffect(() => {\n    const model = instance.current?.getModel();\n    if (!model) return;\n    syncing.current = true;\n    try {\n      if (model.original.getValue() !== original) model.original.setValue(original);\n      if (model.modified.getValue() !== modified) model.modified.setValue(modified);\n    } finally {\n      syncing.current = false;\n    }\n  }, [original, modified, monaco]);\n\n  useEffect(() => {\n    const model = instance.current?.getModel();\n    if (!monaco || !model) return;\n    monaco.editor.setModelLanguage(model.original, language);\n    monaco.editor.setModelLanguage(model.modified, language);\n  }, [language, monaco]);\n\n  useEffect(() => {\n    instance.current?.updateOptions({ ...options, readOnly, renderSideBySide: sideBySide });\n  }, [options, readOnly, sideBySide, monaco]);\n\n  return <EditorFrame state={state} height={height} label=\"diff editor\" className={className} hostRef={host} />;\n}\n","/** Worker factory Monaco calls per language service (`label` is e.g. \"json\", \"typescript\", \"yaml\"). */\nexport type MonacoWorkerFactory = (workerId: string, label: string) => Worker | Promise<Worker>;\n\ninterface MonacoEnvironmentLike {\n  getWorker?: MonacoWorkerFactory;\n  [key: string]: unknown;\n}\n\n/**\n * Sets `self.MonacoEnvironment.getWorker`. Call once, before the first editor mounts.\n * The package never imports workers itself: bundlers resolve them differently\n * including consumer-injected YAML workers. Labels are passed through unchanged\n * (see README for the Vite `?worker` recipe).\n */\nexport function configureMonacoWorkers(getWorker: MonacoWorkerFactory): void {\n  const scope = globalThis as unknown as { MonacoEnvironment?: MonacoEnvironmentLike };\n  scope.MonacoEnvironment = { ...scope.MonacoEnvironment, getWorker };\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,58 @@
 {
   "name": "@gntik-ai/editor",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.11.0",
+  "description": "Monaco code editor themed by the gntik-ui brand tokens (dark, light, high contrast).",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "files": [
+    "dist",
+    "src/styles.css"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json",
+    "./styles.css": "./src/styles.css"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gntik-ai/gntik-ui.git",
+    "directory": "packages/editor"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "@gntik-ai/tokens": "0.3.0",
+    "monaco-editor": "^0.57.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "jsdom": "^30.1.1",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "tsdown": "^0.23.0",
+    "typescript": "~6.0.3",
+    "vitest": "^5.0.2"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "vitest run"
+  }
 }

package/src/styles.css

@@ -0,0 +1,10 @@
+/* @gntik-ai/editor — lets Tailwind v4 see this package's classes. Import after "@gntik-ai/ui/styles.css". */
+@source "../dist";
+
+/* Keep the labelled input available to pointer users above the editor surface.
+   Leave Monaco's visible IME composition layer in control of its own stacking. */
+[data-slot="editor"] .monaco-editor .inputarea:not(.ime-input) {
+  min-width: 1px;
+  min-height: 1px;
+  z-index: 1;
+}