@elabs-ai/components-editor 4.1.0 → 5.0.0

package/src/markdown-academic/citations.tsx

@@ -16,7 +16,7 @@
  * pre-pass over the source) so an inline `[1]` and bibliography entry 1 always agree.
  */
 import { cn } from "@elabs-ai/components-ui/lib/cn";
-import { Separator } from "@elabs-ai/components-ui";
+import { Separator, useLocale } from "@elabs-ai/components-ui";
 import {
   createContext,
   forwardRef,
@@ -249,6 +249,7 @@ function hoverTitle(data: CitationData): string {
 }
 
 function CiteLink({ entry, label }: { entry: ResolvedCitation; label: string }) {
+  const { t } = useLocale();
   // For numeric style the visible label is a bare "[1]" — give AT a real name
   // (the `title` tooltip is for mouse users and is not reliably announced).
   const name = entry.data ? hoverTitle(entry.data) : entry.key;
@@ -256,13 +257,13 @@ function CiteLink({ entry, label }: { entry: ResolvedCitation; label: string })
     <a
       href={`#ref-${cssId(entry.key)}`}
       title={entry.data ? hoverTitle(entry.data) : undefined}
-      aria-label={`Citation: ${name}`}
+      aria-label={t("editor.citations.citationLabel", { name })}
       // #317/#399 — the on-surface `-text` rung, NOT the `--primary` FILL: an
       // inline cite is body text inside a paragraph and owes WCAG 1.4.3 AA
       // (4.5:1), which `--primary` missed at 4.29-4.31:1 in light. The
       // resting `underline` is the separate 1.4.1 non-colour cue (#317's
       // link-in-text-block half) — keep both.
-      className="text-primary-text underline hover:underline focus-visible:rounded-sm focus-ring"
+      className="text-link underline hover:underline focus-visible:rounded-sm focus-ring"
     >
       {label}
     </a>
@@ -292,6 +293,7 @@ function readCite(rest: TagProps): CitePayload | null {
 
 /** Renderer for the inline `<brand-cite>` element produced by the transform. */
 export function InlineCite({ node: _n, children: _c, ...rest }: TagProps) {
+  const { t } = useLocale();
   const ctx = useContext(CitationContext);
   const payload = readCite(rest);
   if (!payload) return null;
@@ -302,7 +304,7 @@ export function InlineCite({ node: _n, children: _c, ...rest }: TagProps) {
   if (!anyResolved) {
     // Graceful: nothing resolved → keep the literal, marked for sighted + AT.
     return (
-      <span className="text-muted-foreground" title="Unresolved citation">
+      <span className="text-muted-foreground" title={t("editor.citations.unresolvedCitation")}>
         {payload.original}
       </span>
     );
@@ -324,7 +326,10 @@ export function InlineCite({ node: _n, children: _c, ...rest }: TagProps) {
             {entry?.data ? (
               <CiteLink entry={entry} label={label} />
             ) : (
-              <span className="text-muted-foreground" title={`Unresolved: @${it.key}`}>
+              <span
+                className="text-muted-foreground"
+                title={t("editor.citations.unresolvedKey", { key: it.key })}
+              >
                 {label}
               </span>
             )}
@@ -387,9 +392,11 @@ export interface BibliographyProps extends Omit<HTMLAttributes<HTMLElement>, "ch
  * One focal separation gesture — a top `Separator` — over a quiet label + list.
  */
 export const Bibliography = forwardRef<HTMLElement, BibliographyProps>(function Bibliography(
-  { entries, style, title = "References", className, ...props },
+  { entries, style, title: titleProp, className, ...props },
   ref,
 ) {
+  const { t } = useLocale();
+  const title = titleProp ?? t("editor.citations.references");
   const ctx = useContext(CitationContext);
   const labelId = useId();
   const list = entries ?? ctx?.order ?? [];
@@ -427,7 +434,7 @@ export const Bibliography = forwardRef<HTMLElement, BibliographyProps>(function
                     rel="noopener noreferrer"
                     // #317/#399 — bibliography DOI/URL is body text: `-text` rung
                     // + resting underline (the non-colour cue).
-                    className="break-words text-primary-text underline underline-offset-2 hover:underline focus-visible:rounded-sm focus-ring"
+                    className="break-words text-link underline underline-offset-2 hover:underline focus-visible:rounded-sm focus-ring"
                   >
                     {data.url ?? `doi:${data.doi}`}
                   </a>

package/src/markdown-academic/footnotes.tsx

@@ -165,7 +165,7 @@ export function FootnoteRef({ node: _n, children: _c, ...rest }: TagProps) {
         data-footnote-ref=""
         aria-label={`Footnote ${n}`}
         // #399 — a footnote marker is superscript body text: `-text` rung.
-        className="px-0.5 font-medium text-primary-text underline tabular-nums hover:underline focus-visible:rounded-sm focus-ring"
+        className="px-0.5 font-medium text-link underline tabular-nums hover:underline focus-visible:rounded-sm focus-ring"
       >
         {n}
       </a>

package/src/markdown-academic/math.tsx

@@ -14,6 +14,7 @@
  * a contained error, never crashes the page). a11y: `output: "htmlAndMathml"`
  * emits MathML (read by assistive tech) alongside the visual HTML.
  */
+import { useLocale } from "@elabs-ai/components-ui";
 import { cn } from "@elabs-ai/components-ui/lib/cn";
 import katex from "katex";
 import { useMemo, type HTMLAttributes } from "react";
@@ -96,13 +97,14 @@ export interface MathProps extends Omit<HTMLAttributes<HTMLElement>, "children">
 
 /** Inline math (`$…$`) → KaTeX, in the text flow. */
 export function MathInline({ tex, className, ...props }: MathProps) {
+  const { t } = useLocale();
   const { html, error } = useMemo(() => renderKatex(tex, false), [tex]);
   if (error) {
     return (
       <code
         className={cn("text-destructive-text", className)}
-        aria-label={`Math (could not render): ${tex}`}
-        title="Could not render math"
+        aria-label={t("editor.math.renderErrorLabel", { tex })}
+        title={t("editor.math.renderError")}
         {...props}
       >
         {tex}
@@ -125,6 +127,7 @@ export function MathInline({ tex, className, ...props }: MathProps) {
 
 /** Block math (`$$…$$`) → centered display KaTeX. */
 export function MathBlock({ tex, className, ...props }: MathProps) {
+  const { t } = useLocale();
   const { html, error } = useMemo(() => renderKatex(tex, true), [tex]);
   if (error) {
     return (
@@ -133,8 +136,8 @@ export function MathBlock({ tex, className, ...props }: MathProps) {
           "overflow-x-auto rounded-md bg-surface-muted p-3 text-destructive-text",
           className,
         )}
-        aria-label={`Math (could not render): ${tex}`}
-        title="Could not render math"
+        aria-label={t("editor.math.renderErrorLabel", { tex })}
+        title={t("editor.math.renderError")}
         {...props}
       >
         <code>{tex}</code>

package/src/markdown-editor/completions/completions-menu.tsx

@@ -8,6 +8,7 @@
  * Same visual grammar (bg-popover, accent selection) for consistency with the
  * slash popup and Monaco's own themed suggest widget.
  */
+import { useLocale } from "@elabs-ai/components-ui";
 import { cn } from "@elabs-ai/components-ui/lib/cn";
 import { forwardRef, type HTMLAttributes } from "react";
 
@@ -38,17 +39,19 @@ export const CompletionMenu = forwardRef<HTMLDivElement, CompletionMenuProps>(
       activeIndex,
       onSelect,
       idPrefix = "brand-completions",
-      emptyLabel = "No suggestions",
+      emptyLabel: emptyLabelProp,
       className,
       ...props
     },
     ref,
   ) {
+    const { t } = useLocale();
+    const emptyLabel = emptyLabelProp ?? t("editor.completions.noSuggestions");
     return (
       <div
         ref={ref}
         role="listbox"
-        aria-label="Suggestions"
+        aria-label={t("editor.completions.suggestions")}
         className={cn(
           "max-h-[min(280px,50vh)] w-64 overflow-y-auto overflow-x-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-ring-md",
           className,

package/src/markdown-editor/directive-views.tsx

@@ -46,6 +46,7 @@ import {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
+  useLocale,
 } from "@elabs-ai/components-ui";
 import { cn } from "@elabs-ai/components-ui/lib/cn";
 import { editorViewCtx, parserCtx, serializerCtx } from "@milkdown/kit/core";
@@ -177,6 +178,7 @@ function InlineEdit({ value, onCommit, ariaLabel, placeholder, className }: Inli
 
 /** `:::name` block directives → live @brand component with an editable body. */
 function ContainerDirectiveView() {
+  const { t } = useLocale();
   const { contentRef } = useNodeViewContext();
   const { name, attributes, update } = useDirectiveAttrs();
 
@@ -189,8 +191,8 @@ function ContainerDirectiveView() {
         <CardHeader className="pb-3">
           <CardTitle>
             <InlineEdit
-              ariaLabel="Card title"
-              placeholder="Card title"
+              ariaLabel={t("editor.directiveViews.cardTitle")}
+              placeholder={t("editor.directiveViews.cardTitle")}
               value={attributes.title ?? ""}
               onCommit={(v) => update("title", v)}
             />
@@ -213,7 +215,7 @@ function ContainerDirectiveView() {
             flow, so its label must not join the document heading outline (see #21). */}
         <div className="mb-1 font-medium leading-none tracking-tight">
           <InlineEdit
-            ariaLabel="Callout title"
+            ariaLabel={t("editor.directiveViews.calloutTitle")}
             placeholder={capitalize(attributes.type ?? "note")}
             value={attributes.title ?? ""}
             onCommit={(v) => update("title", v)}
@@ -250,7 +252,9 @@ function ContainerDirectiveView() {
       className="brand-directive brand-directive--unknown"
       data-brand-directive={name}
     >
-      <div className="mb-1 font-medium leading-none tracking-tight">Unknown block: {name}</div>
+      <div className="mb-1 font-medium leading-none tracking-tight">
+        {t("editor.directiveViews.unknownBlock", { name })}
+      </div>
       <AlertDescription>{body}</AlertDescription>
     </Alert>
   );
@@ -492,6 +496,7 @@ function IterationMenuItems({
  * inline (today's behaviour, unchanged).
  */
 function IterationDirectiveView() {
+  const { t } = useLocale();
   const { contentRef, node, getPos, setAttrs } = useNodeViewContext();
   const { name, attributes } = useDirectiveAttrs();
   const [, getInstance] = useInstance();
@@ -577,7 +582,7 @@ function IterationDirectiveView() {
       attributes: attributes as Record<string, string>,
     }).cells.length > 0;
 
-  const disabledHint = "— needs embedded values";
+  const disabledHint = t("editor.directiveViews.needsEmbeddedValues");
 
   const convertToStatic = () => {
     const template = readBodyMarkdown(getInstance as GetEditor, node);
@@ -589,14 +594,14 @@ function IterationDirectiveView() {
     {
       type: "item",
       id: "edit",
-      label: "Edit iteration…",
+      label: t("editor.directiveViews.editIteration"),
       icon: <Pencil className="size-4" aria-hidden="true" />,
       onSelect: requestEdit,
     },
     {
       type: "layout",
       id: "layout",
-      label: "Change layout",
+      label: t("editor.directiveViews.changeLayout"),
       icon: <LayoutGrid className="size-4" aria-hidden="true" />,
       value: (attributes.layout as IterationLayout) || ITERATION_LAYOUTS[kind][0]!,
       options: ITERATION_LAYOUTS[kind],
@@ -607,7 +612,9 @@ function IterationDirectiveView() {
           {
             type: "item",
             id: "transpose",
-            label: hasEmbeddedData ? "Transpose" : `Transpose ${disabledHint}`,
+            label: hasEmbeddedData
+              ? t("editor.directiveViews.transpose")
+              : `${t("editor.directiveViews.transpose")} ${disabledHint}`,
             icon: <ArrowLeftRight className="size-4" aria-hidden="true" />,
             onSelect: transpose,
             disabled: !hasEmbeddedData,
@@ -617,7 +624,9 @@ function IterationDirectiveView() {
     {
       type: "item",
       id: "convert-to-static",
-      label: hasEmbeddedData ? "Convert to static" : `Convert to static ${disabledHint}`,
+      label: hasEmbeddedData
+        ? t("editor.directiveViews.convertToStatic")
+        : `${t("editor.directiveViews.convertToStatic")} ${disabledHint}`,
       icon: <FileText className="size-4" aria-hidden="true" />,
       onSelect: convertToStatic,
       disabled: !hasEmbeddedData,
@@ -627,11 +636,15 @@ function IterationDirectiveView() {
   const header = (
     <div className="mb-1.5 flex items-center gap-1.5 text-meta font-medium text-info-text">
       <Icon className="size-3.5 shrink-0" aria-hidden="true" />
-      <span>{isPivot ? "Pivot" : "Iterate"}</span>
+      <span>{isPivot ? t("editor.directiveViews.pivot") : t("editor.directiveViews.iterate")}</span>
       {!isPivot && attributes.as ? (
-        <span className="font-normal text-muted-foreground">· per {attributes.as}</span>
+        <span className="font-normal text-muted-foreground">
+          {t("editor.directiveViews.perItem", { as: attributes.as })}
+        </span>
       ) : null}
-      <span className="font-normal text-muted-foreground">— template</span>
+      <span className="font-normal text-muted-foreground">
+        {t("editor.directiveViews.templateSuffix")}
+      </span>
       {onEdit ? (
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
@@ -639,8 +652,8 @@ function IterationDirectiveView() {
               type="button"
               // `data-directive-chrome` routes the click to the browser, not ProseMirror.
               data-directive-chrome=""
-              aria-label="Iteration actions"
-              title="Iteration actions…"
+              aria-label={t("editor.directiveViews.iterationActions")}
+              title={t("editor.directiveViews.iterationActionsTitle")}
               className="ms-auto inline-flex size-5 items-center justify-center rounded-sm text-muted-foreground hover:bg-accent hover:text-foreground focus-ring"
             >
               <MoreHorizontal className="size-4" aria-hidden="true" />
@@ -700,6 +713,7 @@ function IterationDirectiveView() {
 
 /** `::name` leaf directives (e.g. `::metric`) → live, atomic @brand component. */
 function LeafDirectiveView() {
+  const { t } = useLocale();
   const { name, attributes, update } = useDirectiveAttrs();
 
   if (name !== "metric") {
@@ -708,7 +722,7 @@ function LeafDirectiveView() {
         className="brand-directive brand-directive--leaf brand-directive--unknown rounded-md border border-destructive/40 bg-surface-muted p-3 text-sm text-muted-foreground"
         data-brand-leaf={name}
       >
-        Unknown inline block: <code>::{name}</code>
+        {t("editor.directiveViews.unknownInlineBlock")} <code>::{name}</code>
       </div>
     );
   }
@@ -720,16 +734,16 @@ function LeafDirectiveView() {
       data-brand-leaf="metric"
       label={
         <InlineEdit
-          ariaLabel="Metric label"
-          placeholder="Label"
+          ariaLabel={t("editor.directiveViews.metricLabel")}
+          placeholder={t("editor.directiveViews.metricLabelPlaceholder")}
           value={attributes.label ?? ""}
           onCommit={(v) => update("label", v)}
         />
       }
       value={
         <InlineEdit
-          ariaLabel="Metric value"
-          placeholder="0"
+          ariaLabel={t("editor.directiveViews.metricValue")}
+          placeholder={t("editor.directiveViews.metricValuePlaceholder")}
           value={attributes.value ?? ""}
           onCommit={(v) => update("value", v)}
           className="min-w-[1ch]"

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

@@ -530,6 +530,7 @@ export const IterationContextMenu: Story = {
  * to localStorage across runs.
  */
 export const NodeMenuDark: Story = {
+  tags: ["!dev"],
   name: "Iteration node menu (⋯ dropdown) — dark",
   decorators: [
     (Story) => (
@@ -543,6 +544,7 @@ export const NodeMenuDark: Story = {
 };
 
 export const NodeMenuHighDecoration: Story = {
+  tags: ["!dev"],
   name: "Iteration node menu (⋯ dropdown) — high decoration",
   globals: { decoration: "10" },
   render: NodeMenu.render,
@@ -550,6 +552,7 @@ export const NodeMenuHighDecoration: Story = {
 };
 
 export const IterationContextMenuDark: Story = {
+  tags: ["!dev"],
   name: "Iteration node menu (right-click) — dark",
   decorators: [
     (Story) => (
@@ -563,6 +566,7 @@ export const IterationContextMenuDark: Story = {
 };
 
 export const IterationContextMenuHighDecoration: Story = {
+  tags: ["!dev"],
   name: "Iteration node menu (right-click) — high decoration",
   globals: { decoration: "10" },
   render: IterationContextMenu.render,
@@ -580,7 +584,7 @@ export const IterationContextMenuHighDecoration: Story = {
  * stylesheet TEXT; this is the rendered-surface proof.
  */
 export const FocusIndicator: Story = {
-  name: "Focus indicator (#309)",
+  name: "Keyboard focus",
   render: () => (
     <div className="mx-auto max-w-3xl p-6">
       <MarkdownEditor
@@ -661,7 +665,8 @@ export const FocusIndicator: Story = {
 };
 
 export const FocusIndicatorDark: Story = {
-  name: "Focus indicator (#309) — dark",
+  tags: ["!dev"],
+  name: "Keyboard focus — dark",
   decorators: [
     (Story) => (
       <ThemeProvider defaultTheme="dark" storageKey={null}>
@@ -674,7 +679,8 @@ export const FocusIndicatorDark: Story = {
 };
 
 export const FocusIndicatorHighDecoration: Story = {
-  name: "Focus indicator (#309) — high decoration",
+  tags: ["!dev"],
+  name: "Keyboard focus — high decoration",
   globals: { decoration: "10" },
   render: FocusIndicator.render,
   play: FocusIndicator.play,

package/src/markdown-editor/slash/slash-menu.tsx

@@ -14,6 +14,7 @@
  * Semantic tokens only; matches the `Command` popover look (bg-popover, accent
  * selection, muted group headings).
  */
+import { useLocale } from "@elabs-ai/components-ui";
 import { cn } from "@elabs-ai/components-ui/lib/cn";
 import { forwardRef, type HTMLAttributes } from "react";
 
@@ -43,12 +44,14 @@ export const SlashMenu = forwardRef<HTMLDivElement, SlashMenuProps>(function Sla
     activeId,
     onSelect,
     idPrefix = "brand-slash",
-    emptyLabel = "No matching blocks",
+    emptyLabel: emptyLabelProp,
     className,
     ...props
   },
   ref,
 ) {
+  const { t } = useLocale();
+  const emptyLabel = emptyLabelProp ?? t("editor.slashMenu.noMatchingBlocks");
   const groups = groupSlashCommands(commands);
 
   return (
@@ -57,7 +60,7 @@ export const SlashMenu = forwardRef<HTMLDivElement, SlashMenuProps>(function Sla
       // The editor surface carries `role="textbox"`; this list is its popup. The
       // plugin sets `aria-controls`/`aria-activedescendant` on the textbox.
       role="listbox"
-      aria-label="Insert block"
+      aria-label={t("editor.slashMenu.insertBlock")}
       className={cn(
         "max-h-[min(320px,60vh)] w-72 overflow-y-auto overflow-x-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-ring-md",
         className,

package/src/markdown-editor/table-view.tsx

@@ -42,6 +42,7 @@ import { Plugin, PluginKey } from "@milkdown/kit/prose/state";
 import type { EditorView } from "@milkdown/kit/prose/view";
 import { $prose } from "@milkdown/kit/utils";
 import { isInTable } from "@milkdown/kit/prose/tables";
+import { useLocale } from "@elabs-ai/components-ui";
 import { cn } from "@elabs-ai/components-ui/lib/cn";
 import { usePluginViewContext } from "@prosemirror-adapter/react";
 import type { usePluginViewFactory } from "@prosemirror-adapter/react";
@@ -137,39 +138,49 @@ function ToolbarDivider() {
  */
 function TableControlsView() {
   const { view } = usePluginViewContext();
+  const { t } = useLocale();
   const inTable = isInTable(view.state);
   const run = (key: Parameters<typeof dispatchCommand>[1]) => () => dispatchCommand(view, key);
 
   if (!inTable) return null;
 
+  const addRowAbove = t("editor.tableView.addRowAbove");
+  const addRowBelow = t("editor.tableView.addRowBelow");
+  const deleteRow = t("editor.tableView.deleteRow");
+  const addColLeft = t("editor.tableView.addColumnLeft");
+  const addColRight = t("editor.tableView.addColumnRight");
+  const deleteCol = t("editor.tableView.deleteColumn");
+
   return (
     <div
       role="toolbar"
-      aria-label="Table controls"
+      aria-label={t("editor.tableView.tableControls")}
       className={cn(
         "flex flex-wrap items-center gap-1 px-2 py-1.5",
         "border-t border-border-strong bg-surface-muted",
       )}
     >
       {/* Row group */}
-      <span className="mr-1 select-none text-caption text-muted-foreground">Row</span>
+      <span className="mr-1 select-none text-caption text-muted-foreground">
+        {t("editor.tableView.row")}
+      </span>
       <ToolbarButton
-        ariaLabel="Add row above"
-        title="Add row above"
+        ariaLabel={addRowAbove}
+        title={addRowAbove}
         onClick={run(addRowBeforeCommand.key)}
       >
         ↑+
       </ToolbarButton>
       <ToolbarButton
-        ariaLabel="Add row below"
-        title="Add row below"
+        ariaLabel={addRowBelow}
+        title={addRowBelow}
         onClick={run(addRowAfterCommand.key)}
       >
         ↓+
       </ToolbarButton>
       <ToolbarButton
-        ariaLabel="Delete row"
-        title="Delete row"
+        ariaLabel={deleteRow}
+        title={deleteRow}
         variant="destructive"
         onClick={run(deleteSelectedCellsCommand.key)}
       >
@@ -179,24 +190,26 @@ function TableControlsView() {
       <ToolbarDivider />
 
       {/* Column group */}
-      <span className="mr-1 select-none text-caption text-muted-foreground">Col</span>
+      <span className="mr-1 select-none text-caption text-muted-foreground">
+        {t("editor.tableView.col")}
+      </span>
       <ToolbarButton
-        ariaLabel="Add column left"
-        title="Add column left"
+        ariaLabel={addColLeft}
+        title={addColLeft}
         onClick={run(addColBeforeCommand.key)}
       >
         ←+
       </ToolbarButton>
       <ToolbarButton
-        ariaLabel="Add column right"
-        title="Add column right"
+        ariaLabel={addColRight}
+        title={addColRight}
         onClick={run(addColAfterCommand.key)}
       >
         →+
       </ToolbarButton>
       <ToolbarButton
-        ariaLabel="Delete column"
-        title="Delete column"
+        ariaLabel={deleteCol}
+        title={deleteCol}
         variant="destructive"
         onClick={run(deleteSelectedCellsCommand.key)}
       >