@elabs-ai/components-editor 4.0.0 → 4.2.0

package/dist/{markdown-editor-DfBZibAn.d.ts → markdown-editor-Dn-0L_MM.d.ts}

@@ -9,6 +9,13 @@ import { Command } from '@milkdown/kit/prose/state';
 type MonacoCodeEditor = monaco.editor.IStandaloneCodeEditor;
 /** A Monaco editor action (system command + optional hotkey + palette/menu entry). */
 type EditorAction = monaco.editor.IActionDescriptor;
+/**
+ * The runtime value type handed back by `import("monaco-editor")` — same
+ * namespace as the type-only `monaco` import above (`typeof` a type-only
+ * namespace import resolves to the module's own type), used for `monacoRef`
+ * and `onMount`'s second argument.
+ */
+type MonacoNamespace = typeof monaco;
 interface CodeEditorProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
     /** Controlled content. Pair with `onChange`. */
     value?: string;
@@ -44,7 +51,7 @@ interface CodeEditorProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange
      */
     contextMenu?: "brand" | "monaco" | "none";
     /** Called once the editor instance + monaco namespace are ready. */
-    onMount?: (editor: MonacoCodeEditor, monacoApi: typeof monaco) => void;
+    onMount?: (editor: MonacoCodeEditor, monacoApi: MonacoNamespace) => void;
     /**
      * Declarative Monaco editor actions — each registers a command (run on its
      * `keybindings`, in the command palette, and optionally the context menu via
@@ -62,7 +69,7 @@ interface CodeEditorProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange
  * A token-themed Monaco editor wrapped as a brand-ui React component. Monaco
  * renders its own editing surface + widgets; this wrapper owns lifecycle,
  * controlled/uncontrolled value, and applies the brand theme bridge so the
- * editor matches the active `data-theme` (all three themes).
+ * editor matches the active `data-theme` (every theme).
  *
  * Workers (for completions/diagnostics) are wired by importing
  * `@elabs-ai/components-editor/monaco-environment` once at the app entry.

package/dist/monaco.d.ts

@@ -0,0 +1,2 @@
+import * as monaco from 'monaco-editor';
+export { monaco };

package/dist/monaco.js

@@ -0,0 +1,9 @@
+"use client";
+"use client";
+
+// src/monaco.ts
+import * as monaco from "monaco-editor";
+export {
+  monaco
+};
+//# sourceMappingURL=monaco.js.map

package/dist/monaco.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/monaco.ts"],"sourcesContent":["\"use client\";\n\n/**\n * The `monaco-editor` namespace, as its own subpath (ADR 0006 subpath exports).\n *\n * The root barrel (`.`) exports lightweight chrome — `CopyButton`,\n * `EDITOR_LANGUAGES`, `languageLabel` — that a consumer should be able to\n * import WITHOUT pulling Monaco in at all: the editing surfaces\n * (`CodeEditor`, `DiffEditor`, `MarkdownEditor`) already own lazy-loading the\n * engine themselves. Re-exporting the whole `monaco-editor` namespace from\n * that SAME barrel defeated that split — `import { CopyButton } from\n * \"@elabs-ai/components-editor\"` pulled megabytes of Monaco and touched\n * browser globals at import time, breaking SSR/RSC for a component that never\n * renders the editor.\n *\n * A consumer that needs to build a custom editor, or wire Monaco commands\n * directly, imports this subpath instead:\n *\n *   import { monaco } from \"@elabs-ai/components-editor/monaco\";\n */\nexport * as monaco from \"monaco-editor\";\n"],"mappings":";;;;AAoBA,YAAY,YAAY;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elabs-ai/components-editor",
-  "version": "4.0.0",
+  "version": "4.2.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -36,6 +36,10 @@
     "./monaco-environment": {
       "types": "./dist/lib/monaco-environment.d.ts",
       "default": "./dist/lib/monaco-environment.js"
+    },
+    "./monaco": {
+      "types": "./dist/monaco.d.ts",
+      "default": "./dist/monaco.js"
     }
   },
   "publishConfig": {
@@ -65,8 +69,8 @@
     "monaco-editor": "^0.55.1",
     "react": "^18.2.0 || ^19.0.0",
     "react-dom": "^18.2.0 || ^19.0.0",
-    "@elabs-ai/components-tokens": "4.0.0",
-    "@elabs-ai/components-ui": "4.0.0"
+    "@elabs-ai/components-tokens": "4.2.0",
+    "@elabs-ai/components-ui": "4.2.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
@@ -85,10 +89,10 @@
     "tsup": "^8.3.5",
     "typescript": "^5.7.3",
     "vitest": "^3.0.2",
+    "@elabs-ai/components-eslint-config": "0.1.0",
+    "@elabs-ai/components-tokens": "4.2.0",
     "@elabs-ai/components-typescript-config": "0.1.0",
-    "@elabs-ai/components-tokens": "4.0.0",
-    "@elabs-ai/components-ui": "4.0.0",
-    "@elabs-ai/components-eslint-config": "0.1.0"
+    "@elabs-ai/components-ui": "4.2.0"
   },
   "scripts": {
     "build": "rm -rf dist && tsup && node ../../scripts/link-dist-css.mjs",

package/src/ai-objects/decision-card.tsx

@@ -24,6 +24,7 @@ import {
   CardContent,
   CardHeader,
   Separator,
+  useLocale,
   type BadgeProps,
 } from "@elabs-ai/components-ui";
 import { cn } from "@elabs-ai/components-ui/lib/cn";
@@ -51,11 +52,12 @@ const STATUS_BADGE_VARIANT: Record<DecisionStatus, BadgeProps["variant"]> = {
   superseded: "secondary",
 };
 
-const STATUS_LABELS: Record<DecisionStatus, string> = {
-  accepted: "Accepted",
-  rejected: "Rejected",
-  proposed: "Proposed",
-  superseded: "Superseded",
+/** Status → translation key (see `editor.decisionCard.status.*` in messages.ts). */
+const STATUS_LABEL_KEYS: Record<DecisionStatus, string> = {
+  accepted: "editor.decisionCard.statusAccepted",
+  rejected: "editor.decisionCard.statusRejected",
+  proposed: "editor.decisionCard.statusProposed",
+  superseded: "editor.decisionCard.statusSuperseded",
 };
 
 const STATUS_ICONS: Record<DecisionStatus, ComponentType<SVGProps<SVGSVGElement>>> = {
@@ -113,11 +115,12 @@ export const DecisionCard = forwardRef<HTMLElement, DecisionCardProps>(function
   { status: rawStatus, date, alternatives, children, className, ...props },
   ref,
 ) {
+  const { t } = useLocale();
   const status: DecisionStatus = isDecisionStatus(rawStatus ?? "")
     ? (rawStatus as DecisionStatus)
     : "proposed";
   const badgeVariant = STATUS_BADGE_VARIANT[status];
-  const label = STATUS_LABELS[status];
+  const label = t(STATUS_LABEL_KEYS[status]);
   const Icon = STATUS_ICONS[status];
 
   const altItems = alternatives
@@ -130,7 +133,7 @@ export const DecisionCard = forwardRef<HTMLElement, DecisionCardProps>(function
   return (
     <section
       ref={ref}
-      aria-label={`Decision: ${label}`}
+      aria-label={t("editor.decisionCard.label", { label })}
       className={cn("not-prose", className)}
       {...props}
     >
@@ -158,9 +161,12 @@ export const DecisionCard = forwardRef<HTMLElement, DecisionCardProps>(function
             <Separator />
             <div className="px-6 py-4">
               <p className="mb-2 text-meta font-medium text-muted-foreground">
-                Alternatives considered
+                {t("editor.decisionCard.alternativesConsidered")}
               </p>
-              <ul className="flex flex-wrap gap-1.5" aria-label="Alternatives considered">
+              <ul
+                className="flex flex-wrap gap-1.5"
+                aria-label={t("editor.decisionCard.alternativesConsidered")}
+              >
                 {altItems.map((alt) => (
                   <li key={alt}>
                     <Badge variant="outline" className="text-meta">

package/src/ai-objects/entity.tsx

@@ -62,7 +62,7 @@ function kindMeta(kind: string | undefined): KindMeta {
 export const entityChipVariants = cva(
   // inline-flex + align-middle keeps the chip in the text baseline;
   // no `block` wrapper so it is valid inside <p>.
-  "inline-flex items-center gap-1 rounded-sm border px-1.5 py-0.5 text-meta font-medium align-middle focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+  "inline-flex items-center gap-1 rounded-sm border px-1.5 py-0.5 text-meta font-medium align-middle focus-ring",
   {
     variants: {
       kind: {

package/src/ai-objects/knowledge-card.tsx

@@ -18,7 +18,7 @@
  * `KnowledgeCard` is standalone (no `resolve` → sources rendered as plain labels).
  * The `knowledgeDirective({ resolve })` factory wires the hook for directive use.
  */
-import { Card, CardContent, CardFooter } from "@elabs-ai/components-ui";
+import { Card, CardContent, CardFooter, useLocale } from "@elabs-ai/components-ui";
 import { cn } from "@elabs-ai/components-ui/lib/cn";
 import { BookOpen, FileText } from "lucide-react";
 import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
@@ -49,6 +49,7 @@ interface SourceRowProps {
 }
 
 function SourceRow({ path, resolve }: SourceRowProps) {
+  const { t } = useLocale();
   const resolved = resolve ? resolve(path) : null;
   const display = resolved?.title ?? path;
 
@@ -58,9 +59,9 @@ function SourceRow({ path, resolve }: SourceRowProps) {
         href={resolved.href}
         rel="noopener noreferrer"
         target="_blank"
-        // #399 — a source link is TEXT: on-surface `-text` rung, not the fill.
-        className="flex min-w-0 items-center gap-1.5 text-meta text-primary-text underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-        aria-label={`Source: ${display}`}
+        // #399 — a source link is TEXT: the `--link` ink, not the fill.
+        className="flex min-w-0 items-center gap-1.5 text-meta text-link underline-offset-2 hover:underline focus-ring"
+        aria-label={t("editor.knowledgeCard.source", { name: display })}
       >
         <FileText className="size-3 shrink-0" aria-hidden="true" />
         <span className="truncate">{display}</span>
@@ -71,7 +72,7 @@ function SourceRow({ path, resolve }: SourceRowProps) {
   return (
     <span
       className="flex min-w-0 items-center gap-1.5 text-meta text-muted-foreground"
-      aria-label={`Source (unresolved): ${display}`}
+      aria-label={t("editor.knowledgeCard.sourceUnresolved", { name: display })}
     >
       <FileText className="size-3 shrink-0" aria-hidden="true" />
       <span className="truncate">{display}</span>
@@ -102,6 +103,7 @@ export const KnowledgeCard = forwardRef<HTMLElement, KnowledgeCardProps>(functio
   { sources, resolve, children, className, ...props },
   ref,
 ) {
+  const { t } = useLocale();
   const sourcePaths = sources
     ? sources
         .split(",")
@@ -112,7 +114,7 @@ export const KnowledgeCard = forwardRef<HTMLElement, KnowledgeCardProps>(functio
   return (
     <section
       ref={ref}
-      aria-label="Knowledge fact"
+      aria-label={t("editor.knowledgeCard.label")}
       className={cn("not-prose", className)}
       {...props}
     >
@@ -120,15 +122,22 @@ export const KnowledgeCard = forwardRef<HTMLElement, KnowledgeCardProps>(functio
         <CardContent className="pt-4">
           <div className="mb-2 flex items-center gap-1.5">
             <BookOpen className="size-3.5 shrink-0 text-info-text" aria-hidden="true" />
-            <span className="text-meta font-medium text-info-text">Knowledge</span>
+            <span className="text-meta font-medium text-info-text">
+              {t("editor.knowledgeCard.heading")}
+            </span>
           </div>
           <div className="text-body text-foreground">{children}</div>
         </CardContent>
 
         {sourcePaths.length > 0 ? (
           <CardFooter className="flex-col items-start gap-1 border-t border-border pt-3">
-            <p className="text-meta font-medium text-muted-foreground">Sources</p>
-            <ul className="flex w-full flex-col gap-1" aria-label="Sources">
+            <p className="text-meta font-medium text-muted-foreground">
+              {t("editor.knowledgeCard.sources")}
+            </p>
+            <ul
+              className="flex w-full flex-col gap-1"
+              aria-label={t("editor.knowledgeCard.sources")}
+            >
               {sourcePaths.map((path) => (
                 <li key={path} className="min-w-0">
                   <SourceRow path={path} resolve={resolve} />

package/src/barrel-monaco-lazy.test.ts

@@ -0,0 +1,50 @@
+import { describe, expect, it, vi } from "vitest";
+
+/**
+ * The root barrel (`.`) exports lightweight chrome (`CopyButton`,
+ * `EDITOR_LANGUAGES`, `languageLabel`) alongside the Monaco-backed editing
+ * surfaces (`CodeEditor`, `DiffEditor`, `CodeWorkspace`). A consumer that only
+ * wants the chrome must never pay for Monaco: `monaco-editor` touches browser
+ * globals at import time and is megabytes on the wire, breaking SSR/RSC for a
+ * component that never renders an editor.
+ *
+ * `code-editor.tsx`/`diff-editor.tsx` used to `import * as monaco from
+ * "monaco-editor"` at the top of the module — a VALUE import, evaluated the
+ * moment anything imports the barrel (native ESM instantiates every module in
+ * the graph, regardless of which named export is actually read). This test
+ * locks the fix: mock `monaco-editor` to THROW on evaluation, then import the
+ * barrel and prove the lightweight exports still work. If either editing
+ * surface regresses to a top-level value import, this fails at the `import`
+ * statement itself.
+ */
+vi.mock("monaco-editor", () => {
+  throw new Error(
+    "monaco-editor must not be evaluated merely by importing the @elabs-ai/components-editor barrel",
+  );
+});
+
+describe("@elabs-ai/components-editor barrel", () => {
+  it("importing the barrel never evaluates monaco-editor", async () => {
+    await expect(import("./index")).resolves.toBeDefined();
+  });
+
+  it("CopyButton is usable without evaluating monaco-editor", async () => {
+    const { CopyButton } = await import("./index");
+    expect(CopyButton).toBeTypeOf("function");
+  });
+
+  it("EDITOR_LANGUAGES / languageLabel are usable without evaluating monaco-editor", async () => {
+    const { EDITOR_LANGUAGES, languageLabel } = await import("./index");
+    expect(Array.isArray(EDITOR_LANGUAGES)).toBe(true);
+    expect(EDITOR_LANGUAGES.length).toBeGreaterThan(0);
+    expect(languageLabel(EDITOR_LANGUAGES[0]!.id)).toBeTypeOf("string");
+  });
+
+  it("EditorToolbar + EditorContextMenu are usable (rendered) without evaluating monaco-editor", async () => {
+    const { EditorToolbar, EditorContextMenu } = await import("./index");
+    // Both are `forwardRef`/context components — objects, not plain functions;
+    // assert they're valid React element types instead of a bare `typeof`.
+    expect(EditorToolbar).toBeTruthy();
+    expect(EditorContextMenu).toBeTruthy();
+  });
+});

package/src/calc-block/calc-block.tsx

@@ -32,6 +32,7 @@
  * color is never the only signal (var-def = weight, unresolved = dotted underline),
  * so roles stay distinct in the high-contrast theme.
  */
+import { useLocale } from "@elabs-ai/components-ui";
 import { cn } from "@elabs-ai/components-ui/lib/cn";
 import { TriangleAlert } from "lucide-react";
 import { forwardRef, useId, useMemo, type HTMLAttributes, type ReactNode } from "react";
@@ -239,6 +240,7 @@ function renderSource(text: string, tokens: CalcToken[]): ReactNode {
 
 /** The right-hand cell: a value, a calm error marker, or nothing. */
 function ResultCell({ result }: { result: CalcLineResult }): ReactNode {
+  const { t } = useLocale();
   if (result.error) {
     // Native `title` (not a Radix Tooltip) so CalcBlock is self-contained — it
     // renders inside MarkdownPreview / a story with no TooltipProvider ancestor.
@@ -246,7 +248,7 @@ function ResultCell({ result }: { result: CalcLineResult }): ReactNode {
       <span
         className="inline-flex shrink-0 text-calc-warning"
         title={result.error.message}
-        aria-label={`Error: ${result.error.message}`}
+        aria-label={t("editor.calcBlock.error", { message: result.error.message })}
       >
         <TriangleAlert className="size-3.5" aria-hidden="true" />
       </span>
@@ -255,7 +257,7 @@ function ResultCell({ result }: { result: CalcLineResult }): ReactNode {
   if (result.value) {
     return (
       <div className="brand-calc-tok--result shrink-0 tabular-nums text-calc-result">
-        <span className="sr-only">equals </span>
+        <span className="sr-only">{t("editor.calcBlock.equals")}</span>
         <span>{result.value.display}</span>
       </div>
     );
@@ -270,7 +272,7 @@ export const CalcBlock = forwardRef<HTMLDivElement, CalcBlockProps>(function Cal
     title,
     showTotal = true,
     total,
-    totalLabel = "Total",
+    totalLabel: totalLabelProp,
     markers = true,
     readOnly: _readOnly,
     className,
@@ -278,6 +280,8 @@ export const CalcBlock = forwardRef<HTMLDivElement, CalcBlockProps>(function Cal
   },
   ref,
 ) {
+  const { t } = useLocale();
+  const totalLabel = totalLabelProp ?? t("editor.calcBlock.total");
   // Author markers are stripped BEFORE evaluation: the math engine sees clean
   // lines, and because markers are trailing, token columns stay aligned with the
   // rendered (cleaned) text. `lines`/`evalSource` are the marker-free versions.
@@ -376,7 +380,9 @@ export const CalcBlock = forwardRef<HTMLDivElement, CalcBlockProps>(function Cal
       </div>
 
       {empty ? (
-        <p className="px-4 py-6 text-body text-muted-foreground">Empty calc block.</p>
+        <p className="px-4 py-6 text-body text-muted-foreground">
+          {t("editor.calcBlock.emptyBlock")}
+        </p>
       ) : (
         <div className="flex flex-col gap-y-1 px-4 py-3 font-mono text-code leading-relaxed">
           {rows}

package/src/calc-block/calc-editor.css

@@ -5,7 +5,7 @@
  *
  * Colors come from the `--calc-*` syntax tokens — the SAME tokens `CalcBlock`
  * paints with (#221), already AA-verified against `--background` (the editor
- * surface) and `--card` in all three themes — so highlighting tracks the theme via
+ * surface) and `--card` in every theme — so highlighting tracks the theme via
  * the cascade with no hardcoded hex. The compound `.brand-calc-tok.brand-calc-tok--x`
  * selector raises specificity above Monaco's own token color class (`.mtkN`) so
  * the calc color wins regardless of stylesheet load order (no `!important`).

package/src/code-editor/code-editor.stories.tsx

@@ -4,6 +4,7 @@ import { useMemo, useState } from "react";
 import * as monaco from "monaco-editor";
 import { CodeEditor } from "./code-editor";
 import { EditorToolbar } from "../editor-toolbar";
+import { buildBrandThemeData } from "../lib/monaco-theme-bridge";
 
 const meta = {
   title: "Editor/CodeEditor",
@@ -14,9 +15,12 @@ const meta = {
     docs: {
       description: {
         component:
+          "The real Monaco EDITING surface; a read-only highlighted block is `AI/CodeBlock` " +
+          "and a tool-output viewer is `AI/Sandbox` — see " +
+          "[Choosing between similar components](?path=/docs/docs-choosing-between-similar-components--docs). " +
           "A token-themed Monaco editor. The editing surface + widgets are Monaco; " +
           "brand-ui supplies the chrome (toolbar/Select/Button). Colors track the " +
-          "active `data-theme` across all three themes via the theming bridge.",
+          "active `data-theme` across every theme via the theming bridge.",
       },
     },
   },
@@ -76,6 +80,15 @@ export const WithToolbar: Story = {
   },
 };
 
+/**
+ * Locks #90: Monaco's `vs`/`vs-dark` base themes ship LANGUAGE-SUFFIXED JSON
+ * scopes (`string.key.json`, `string.value.json`, `keyword.json`) that beat the
+ * bridge's shorter, unsuffixed rules in Monaco's token-theme trie (deepest scope
+ * wins) — so JSON rendered in stock VS Code colors instead of brand colors. The
+ * play function reads REAL computed colors off the rendered `.mtk*` token spans
+ * and asserts none of them is a stock JSON color, in whichever theme this story
+ * is rendered under (`globals=theme:light|dark`).
+ */
 export const JsonReadOnly: Story = {
   name: "JSON (read-only)",
   render: () => (
@@ -83,6 +96,68 @@ export const JsonReadOnly: Story = {
       <CodeEditor language="json" defaultValue={JSON_SAMPLE} readOnly />
     </div>
   ),
+  play: async ({ canvasElement }) => {
+    // Monaco mounts asynchronously, and syntax tokenization is a SEPARATE,
+    // later pass: the editor first paints one un-highlighted `.mtk*` span per
+    // line, then re-renders with per-scope spans once the JSON monarch
+    // tokenizer finishes (observed to take ~1-3s in a headless test browser).
+    // Waiting for "any `.mtk*` span" resolves on that FIRST, un-highlighted
+    // paint — a false green that passes identically whether the fix is
+    // present or not (#90 fix-round-1 finding). Wait for the actual `"name"`
+    // key to have tokenized into its own span instead — that only exists once
+    // real per-scope highlighting has landed.
+    const surface = await within(canvasElement).findByTestId("code-editor", {}, { timeout: 10000 });
+    let spans: HTMLSpanElement[] = [];
+    await waitFor(
+      () => {
+        spans = Array.from(
+          surface.querySelectorAll<HTMLSpanElement>('.view-line span[class*="mtk"]'),
+        );
+        const keySpan = spans.some((span) => span.textContent?.trim() === '"name"');
+        if (!keySpan) {
+          throw new Error(
+            `Monaco has not tokenized the "name" key into its own span yet (spans=${spans.length})`,
+          );
+        }
+      },
+      { timeout: 20000, interval: 100 },
+    );
+
+    // Stock `vs`/`vs-dark` colors for string.key.json / string.value.json /
+    // keyword.json (extracted straight from monaco-editor's own base themes —
+    // see monaco-theme-bridge.test.ts's "Monaco real trie resolution" block for
+    // the same values as raw hex). If the bridge's brand rules ever stop beating
+    // the base theme's suffixed scopes, a token renders one of these again.
+    const stockColors = new Set([
+      "rgb(163, 21, 21)", // vs: string.key.json / string (maroon)
+      "rgb(4, 81, 165)", // vs: string.value.json / keyword.json (navy)
+      "rgb(156, 220, 254)", // vs-dark: string.key.json (cyan)
+      "rgb(206, 145, 120)", // vs-dark: string.value.json / keyword.json / string (orange)
+    ]);
+
+    const offenders = spans
+      .map((span) => getComputedStyle(span).color)
+      .filter((color) => stockColors.has(color));
+    await expect(offenders).toEqual([]);
+
+    // Positive check, not just an absence check: the "name" key span must be
+    // colored with the bridge's OWN live `string.key.json` brand ink (read
+    // straight off the currently-applied CSS custom properties), not merely
+    // "some color that isn't stock" — a fix that mapped the scope to the
+    // wrong token would pass the negative check above but fail this one.
+    const hexToRgb = (hex: string) => {
+      const n = Number.parseInt(hex.replace("#", ""), 16);
+      return `rgb(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255})`;
+    };
+    const liveRules = buildBrandThemeData().rules ?? [];
+    const expectedKeyForeground = liveRules.find(
+      (rule) => rule.token === "string.key.json",
+    )?.foreground;
+    await expect(expectedKeyForeground).toBeDefined();
+    const keySpan = spans.find((span) => span.textContent?.trim() === '"name"');
+    await expect(keySpan).toBeDefined();
+    await expect(getComputedStyle(keySpan!).color).toEqual(hexToRgb(expectedKeyForeground!));
+  },
 };
 
 /**