@miragon/mcp-toolkit-ui 2.5.0 → 2.7.0

package/src/lib/tone-utils.test.ts

@@ -1,35 +1,68 @@
 import { describe, expect, it } from "vitest"
-import { TONE_DOT, TONE_SOFT, TONE_TEXT, type ToneVariant } from "./tone-utils.js"
+import {
+  TONE_BORDER,
+  TONE_DOT,
+  TONE_ICON,
+  TONE_SOFT,
+  TONE_TEXT,
+  type ToneVariant,
+} from "./tone-utils.js"
 
 const ALL_TONES: ToneVariant[] = ["neutral", "info", "success", "warning", "danger"]
+const STATUS_TONES = ["info", "success", "warning", "danger"] as const
+const ALL_MAPS = { TONE_SOFT, TONE_DOT, TONE_TEXT, TONE_BORDER, TONE_ICON }
 
 describe("tone-utils", () => {
   it("covers every ToneVariant in each map (no missing tones)", () => {
-    for (const map of [TONE_SOFT, TONE_DOT, TONE_TEXT]) {
+    for (const map of Object.values(ALL_MAPS)) {
       expect(Object.keys(map).sort()).toEqual([...ALL_TONES].sort())
     }
   })
 
   it("maps each tone to a non-empty class string in every map", () => {
-    for (const tone of ALL_TONES) {
-      expect(TONE_SOFT[tone], `soft:${tone}`).toBeTruthy()
-      expect(TONE_DOT[tone], `dot:${tone}`).toBeTruthy()
-      expect(TONE_TEXT[tone], `text:${tone}`).toBeTruthy()
+    for (const [name, map] of Object.entries(ALL_MAPS)) {
+      for (const tone of ALL_TONES) {
+        expect(map[tone], `${name}:${tone}`).toBeTruthy()
+      }
     }
   })
 
-  it("routes each status tone to its matching design token", () => {
-    expect(TONE_SOFT.danger).toBe("bg-danger-soft text-danger")
-    expect(TONE_SOFT.warning).toBe("bg-warning-soft text-warning")
-    expect(TONE_SOFT.success).toBe("bg-success-soft text-success")
-    expect(TONE_SOFT.info).toBe("bg-info-soft text-info")
-    expect(TONE_DOT.danger).toBe("bg-danger")
-    expect(TONE_TEXT.success).toBe("text-success")
+  it("routes each status tone to its three roles (colour, tint, ink)", () => {
+    for (const tone of STATUS_TONES) {
+      expect(TONE_SOFT[tone]).toBe(`bg-${tone}-soft text-foreground`)
+      expect(TONE_TEXT[tone]).toBe(`text-${tone}-ink`)
+      expect(TONE_DOT[tone]).toBe(`bg-${tone}`)
+      expect(TONE_BORDER[tone]).toBe(`border-${tone}`)
+      expect(TONE_ICON[tone]).toBe(`text-${tone}`)
+    }
+  })
+
+  it("never sets text in a raw status colour outside the icon map (CI §3.3)", () => {
+    // Success and warning reach 1.67:1 / 1.83:1 on white; text takes the
+    // tone's -ink role. TONE_ICON is the one deliberate exception (SVG
+    // currentColor, always next to a readable label).
+    const rawStatusText = /\btext-(success|warning|danger|info)(?![-\w])/
+    for (const [name, map] of Object.entries({ TONE_SOFT, TONE_DOT, TONE_TEXT, TONE_BORDER })) {
+      for (const tone of ALL_TONES) {
+        expect(map[tone], `${name}:${tone}`).not.toMatch(rawStatusText)
+      }
+    }
+  })
+
+  it("puts the foreground on every status tint, never the ink or the status colour (CI §3.3)", () => {
+    // "-soft: Text darauf --cd-schwarz, Rand in der Statusfarbe" — the rim
+    // (TONE_BORDER) carries the tone, danger/info ink is for plain surfaces.
+    for (const tone of STATUS_TONES) {
+      expect(TONE_SOFT[tone]).not.toMatch(/\btext-(?:success|warning|danger|info)/)
+      expect(TONE_SOFT[tone]).toMatch(/\btext-foreground\b/)
+    }
   })
 
-  it("routes the neutral tone to the shadcn muted ramp", () => {
+  it("routes the neutral tone to the muted ramp", () => {
     expect(TONE_SOFT.neutral).toBe("bg-muted text-muted-foreground")
     expect(TONE_DOT.neutral).toBe("bg-muted-foreground")
     expect(TONE_TEXT.neutral).toBe("text-foreground")
+    expect(TONE_BORDER.neutral).toBe("border-border")
+    expect(TONE_ICON.neutral).toBe("text-muted-foreground")
   })
 })

package/src/lib/tone-utils.ts

@@ -1,25 +1,46 @@
 /**
  * Single source of truth for the semantic "tones" used across the tone-aware
- * components (`Pills`, `KpiGrid`, `WidgetHeader`, …).
+ * components (`Pills`, `KpiGrid`, `WidgetHeader`, `Badge`, …).
  *
- * Each tone maps to the status tokens defined in `globals.css`
- * (`--danger`, `--warning`, `--success`, `--info`) plus the shadcn neutral ramp
- * for the `neutral` tone. All tokens carry light + dark values, so these class
- * strings re-theme automatically — change a tone in one place instead of
- * hand-rolling `tone === "x" ? "…" : "…"` ternaries at every call site.
+ * Every status tone has THREE roles (Miragon CI §3.3), each its own token in
+ * `theme.css` with light and dark values:
+ *
+ * | Role                         | Token           | Map            |
+ * | ---------------------------- | --------------- | -------------- |
+ * | fill, dot, border, icon      | `--<tone>`      | `TONE_DOT`, `TONE_BORDER`, `TONE_ICON` |
+ * | tint (badge/banner surface)  | `--<tone>-soft` | `TONE_SOFT` (text on it: the foreground) |
+ * | text on a plain surface      | `--<tone>-ink`  | `TONE_TEXT`    |
+ *
+ * Status is never text in its own colour: success and warning reach only
+ * 1.67:1 / 1.83:1 on white, so their ink is the foreground and the tone shows
+ * as a dot, icon or border NEXT to the text. On a tint the text is always the
+ * foreground (CI §3.3: "-soft: Text darauf --cd-schwarz, Rand in der
+ * Statusfarbe"), so pair `TONE_SOFT` with `TONE_BORDER`. `TONE_TEXT` is for
+ * a tone's words on a plain surface (a field error); figures — counts, KPI
+ * values, trends — never take it: they stay in the foreground next to a
+ * `TONE_DOT`. In dark mode the colours are the `-hell` values and the tints
+ * are transparent (no tinted fills on dark). The `neutral` tone reuses the
+ * muted ramp.
+ *
+ * Change a tone here, in one place, instead of hand-rolling
+ * `tone === "x" ? "…" : "…"` ternaries at every call site.
  */
 export type ToneVariant = "neutral" | "info" | "success" | "warning" | "danger"
 
-/** Tinted background + readable foreground — badges, icon tiles, pills. */
+/**
+ * Tinted surface + its text (the foreground: CI §3.3) — badges, pills,
+ * banners. Pair it with {@link TONE_BORDER}: the rim carries the tone, and in
+ * dark mode (no tints) it is all that does.
+ */
 export const TONE_SOFT: Record<ToneVariant, string> = {
   neutral: "bg-muted text-muted-foreground",
-  info: "bg-info-soft text-info",
-  success: "bg-success-soft text-success",
-  warning: "bg-warning-soft text-warning",
-  danger: "bg-danger-soft text-danger",
+  info: "bg-info-soft text-foreground",
+  success: "bg-success-soft text-foreground",
+  warning: "bg-warning-soft text-foreground",
+  danger: "bg-danger-soft text-foreground",
 }
 
-/** Solid dot color — status dots next to a label. */
+/** Solid dot colour — a status dot next to a label. */
 export const TONE_DOT: Record<ToneVariant, string> = {
   neutral: "bg-muted-foreground",
   info: "bg-info",
@@ -28,9 +49,36 @@ export const TONE_DOT: Record<ToneVariant, string> = {
   danger: "bg-danger",
 }
 
-/** Foreground-only color — metric values, inline emphasis. */
+/**
+ * The tone's TEXT colour (its `-ink` role) for words on a plain surface — a
+ * field error, a "missing" label. Success and warning resolve to the
+ * foreground on light: pair the text with a {@link TONE_DOT} or
+ * {@link TONE_ICON} to show the tone. Never on a tint (use {@link TONE_SOFT})
+ * and never for figures (they stay in the foreground next to a dot).
+ */
 export const TONE_TEXT: Record<ToneVariant, string> = {
   neutral: "text-foreground",
+  info: "text-info-ink",
+  success: "text-success-ink",
+  warning: "text-warning-ink",
+  danger: "text-danger-ink",
+}
+
+/** Border colour in the tone — the rim of a tinted badge, banner or toast. */
+export const TONE_BORDER: Record<ToneVariant, string> = {
+  neutral: "border-border",
+  info: "border-info",
+  success: "border-success",
+  warning: "border-warning",
+  danger: "border-danger",
+}
+
+/**
+ * Icon colour in the tone (SVG `currentColor`). For icons only — never for
+ * text: an icon next to its label carries the tone, the label stays readable.
+ */
+export const TONE_ICON: Record<ToneVariant, string> = {
+  neutral: "text-muted-foreground",
   info: "text-info",
   success: "text-success",
   warning: "text-warning",

package/src/locale/index.ts

@@ -3,5 +3,17 @@
 // <LocaleProvider> and reads the active locale with useLocale/useTranslate,
 // without pulling in the host runtime. Pairs with `createTranslator` from
 // `@miragon/mcp-toolkit-core`.
-export { LocaleProvider, useLocale, useTranslate } from "./locale-provider.js"
+export { LocaleProvider, useLocale, useTranslate, useToolkitMessages } from "./locale-provider.js"
 export type { LocaleContextValue, LocaleProviderProps, BoundTranslate } from "./locale-provider.js"
+export { TOOLKIT_MESSAGES, formatCount, resolveToolkitMessages } from "./toolkit-messages.js"
+export type {
+  BuilderMessages,
+  CommonMessages,
+  ListFooterMessages,
+  PropsSheetMessages,
+  RendererMessages,
+  ToolkitLocale,
+  ToolkitMessages,
+  ToolkitMessagesOverride,
+  ViewMessages,
+} from "./toolkit-messages.js"

package/src/locale/locale-provider.test.tsx

@@ -0,0 +1,87 @@
+import type { ReactNode } from "react"
+import { renderToStaticMarkup } from "react-dom/server"
+import { describe, expect, it } from "vitest"
+import { ListFooter } from "../components/ListFooter.js"
+import {
+  LocaleProvider,
+  ToolkitLocaleFallback,
+  useLocale,
+  useToolkitLocale,
+  useToolkitMessages,
+  useTranslate,
+  type LocaleContextValue,
+} from "./locale-provider.js"
+import { TOOLKIT_MESSAGES } from "./toolkit-messages.js"
+
+/**
+ * The locale contract: `LocaleProvider` sets the locale for everyone; the
+ * `ToolkitLocaleFallback` McpAppView mounts with the host's locale binds ONLY
+ * the toolkit's own strings and number format, so a consumer widget's
+ * `useLocale()`/`useTranslate()` keep their outside-a-provider behaviour.
+ */
+
+function Probe() {
+  const messages = useToolkitMessages()
+  return (
+    <p>
+      {`locale=${useLocale()} toolkit=${useToolkitLocale()} t=${useTranslate()("k")} close=${messages.common.close}`}
+    </p>
+  )
+}
+
+const render = (node: ReactNode) => renderToStaticMarkup(node)
+
+describe("ToolkitLocaleFallback", () => {
+  it("binds the toolkit's strings and number locale, not useLocale/useTranslate", () => {
+    expect(
+      render(
+        <ToolkitLocaleFallback locale="de-DE">
+          <Probe />
+        </ToolkitLocaleFallback>,
+      ),
+    ).toContain(`locale=en toolkit=de-DE t=k close=${TOOLKIT_MESSAGES.de.common.close}`)
+  })
+
+  it("yields to a LocaleProvider above or below it", () => {
+    const below = render(
+      <ToolkitLocaleFallback locale="de-DE">
+        <LocaleProvider locale="en-GB">
+          <Probe />
+        </LocaleProvider>
+      </ToolkitLocaleFallback>,
+    )
+    expect(below).toContain(
+      `locale=en-GB toolkit=en-GB t=k close=${TOOLKIT_MESSAGES.en.common.close}`,
+    )
+    const above = render(
+      <LocaleProvider locale="en">
+        <ToolkitLocaleFallback locale="de-DE">
+          <Probe />
+        </ToolkitLocaleFallback>
+      </LocaleProvider>,
+    )
+    expect(above).toContain(`locale=en toolkit=en t=k close=${TOOLKIT_MESSAGES.en.common.close}`)
+  })
+
+  it("keeps the defaults outside any provider", () => {
+    expect(render(<Probe />)).toContain(
+      `locale=en toolkit=en t=k close=${TOOLKIT_MESSAGES.en.common.close}`,
+    )
+  })
+
+  it("formats toolkit counts in the language of the sentence around them", () => {
+    const html = render(
+      <ToolkitLocaleFallback locale="de-DE">
+        <ListFooter shown={1200} total={4500} hasMore={false} onLoadMore={() => {}} />
+      </ToolkitLocaleFallback>,
+    )
+    expect(html).toContain("Zeigt 1.200 von 4.500 Zeilen")
+  })
+})
+
+describe("LocaleContextValue", () => {
+  it("accepts a hand-built value without messages (the field is optional)", () => {
+    const value: LocaleContextValue = { locale: "en", t: (key) => key }
+    expect(value.messages).toBeUndefined()
+  })
+})

package/src/locale/locale-provider.tsx

@@ -1,5 +1,10 @@
 import { createContext, useContext, useMemo, type ReactNode } from "react"
 import type { Translate } from "@miragon/mcp-toolkit-core"
+import {
+  resolveToolkitMessages,
+  type ToolkitMessages,
+  type ToolkitMessagesOverride,
+} from "./toolkit-messages.js"
 
 /**
  * A locale-bound translate: the active locale is already applied, so call sites
@@ -13,6 +18,14 @@ export interface LocaleContextValue {
   locale: string
   /** Translate a key in the active locale. */
   t: BoundTranslate
+  /**
+   * The toolkit's own strings for the active locale (its shipped `en`/`de`
+   * catalog, English for any other locale) with the provider's
+   * `toolkitMessages` override applied. Read it with {@link useToolkitMessages}.
+   * Optional on the type (a hand-built value may omit it); `LocaleProvider`
+   * always sets it.
+   */
+  messages?: ToolkitMessages
 }
 
 const DEFAULT_LOCALE = "en"
@@ -24,10 +37,22 @@ const DEFAULT_LOCALE = "en"
  * missing wrapper echoes the key (visible + greppable) instead of crashing a
  * widget that is perfectly renderable in English.
  */
-const DEFAULT_VALUE: LocaleContextValue = { locale: DEFAULT_LOCALE, t: (key) => key }
+const DEFAULT_VALUE = {
+  locale: DEFAULT_LOCALE,
+  t: (key) => key,
+  messages: resolveToolkitMessages(DEFAULT_LOCALE),
+} satisfies Required<LocaleContextValue>
 
 const LocaleContext = createContext<LocaleContextValue | null>(null)
 
+/** The toolkit-only locale a {@link ToolkitLocaleFallback} binds (no `t`). */
+interface ToolkitLocaleScope {
+  locale: string
+  messages: ToolkitMessages
+}
+
+const ToolkitLocaleFallbackContext = createContext<ToolkitLocaleScope | null>(null)
+
 /** Read the active locale tag from the nearest {@link LocaleProvider}. */
 export function useLocale(): string {
   return useContext(LocaleContext)?.locale ?? DEFAULT_VALUE.locale
@@ -42,6 +67,56 @@ export function useTranslate(): BoundTranslate {
   return useContext(LocaleContext)?.t ?? DEFAULT_VALUE.t
 }
 
+/**
+ * The toolkit's own UI strings for the nearest {@link LocaleProvider}'s locale
+ * (English outside a provider). Every toolkit component reads its captions,
+ * labels and accessible names here, so a German locale renders no English
+ * toolkit chrome.
+ */
+export function useToolkitMessages(): ToolkitMessages {
+  const provided = useContext(LocaleContext)
+  const fallback = useContext(ToolkitLocaleFallbackContext)
+  return provided?.messages ?? fallback?.messages ?? DEFAULT_VALUE.messages
+}
+
+/**
+ * The locale the toolkit's own text is in: the nearest {@link LocaleProvider}'s,
+ * else a {@link ToolkitLocaleFallback}'s (the host's, inside `McpAppView`),
+ * else `"en"`. Toolkit components format their numbers with it, so a count
+ * always matches the language of the sentence around it. Internal: consumer
+ * widgets read {@link useLocale}.
+ */
+export function useToolkitLocale(): string {
+  const provided = useContext(LocaleContext)
+  const fallback = useContext(ToolkitLocaleFallbackContext)
+  return provided?.locale ?? fallback?.locale ?? DEFAULT_VALUE.locale
+}
+
+/**
+ * Binds ONLY the toolkit's own strings and number format to `locale` for a
+ * subtree — the fallback `McpAppView` mounts with the host's locale. It is not
+ * a {@link LocaleProvider}: {@link useLocale} and {@link useTranslate} keep
+ * their outside-a-provider behaviour (`"en"`, echoed keys) for consumer
+ * widgets, and any `LocaleProvider` above or below wins over it.
+ */
+export function ToolkitLocaleFallback({
+  locale,
+  children,
+}: {
+  locale: string
+  children: ReactNode
+}): ReactNode {
+  const value = useMemo<ToolkitLocaleScope>(
+    () => ({ locale, messages: resolveToolkitMessages(locale) }),
+    [locale],
+  )
+  return (
+    <ToolkitLocaleFallbackContext.Provider value={value}>
+      {children}
+    </ToolkitLocaleFallbackContext.Provider>
+  )
+}
+
 export interface LocaleProviderProps {
   /** The active locale tag (e.g. `"en"`, `"de"`). */
   locale: string
@@ -51,6 +126,12 @@ export interface LocaleProviderProps {
    * consumer wires the locale before any catalog exists.
    */
   translator?: Translate
+  /**
+   * Override individual toolkit strings for this subtree, per catalog section
+   * (e.g. `{ listFooter: { loadMore: "Show more" } }`). Omitted entries keep the
+   * shipped `en`/`de` catalog of `locale`.
+   */
+  toolkitMessages?: ToolkitMessagesOverride
   children: ReactNode
 }
 
@@ -69,13 +150,19 @@ export interface LocaleProviderProps {
  *   <YourWidget />
  * </LocaleProvider>
  */
-export function LocaleProvider({ locale, translator, children }: LocaleProviderProps): ReactNode {
+export function LocaleProvider({
+  locale,
+  translator,
+  toolkitMessages,
+  children,
+}: LocaleProviderProps): ReactNode {
   const value = useMemo<LocaleContextValue>(
     () => ({
       locale,
       t: translator ? (key, params) => translator(locale, key, params) : (key) => key,
+      messages: resolveToolkitMessages(locale, toolkitMessages),
     }),
-    [locale, translator],
+    [locale, translator, toolkitMessages],
   )
   return <LocaleContext.Provider value={value}>{children}</LocaleContext.Provider>
 }

package/src/locale/message-types.ts

@@ -0,0 +1,221 @@
+/**
+ * The shapes of the toolkit's message catalogs (see `toolkit-messages.ts`).
+ * Types only, kept apart from the catalogs so `messages-en.ts` /
+ * `messages-de.ts` can implement them without an import cycle.
+ */
+
+/** Strings shared by several components. */
+export interface CommonMessages {
+  /** Accessible name of the close button in dialogs and sheets. */
+  close: string
+  /** Retry action of error states. */
+  retry: string
+  /** Summary of a technical-details disclosure. */
+  details: string
+  /** Accessible name of a toast's close button. */
+  dismiss: string
+  /** Accessible name of the toast region. */
+  notifications: string
+}
+
+/** Strings of the `McpAppView` chrome (placeholder, error state, toolbar, step errors). */
+export interface ViewMessages {
+  /** Placeholder text while the view's data is on its way. */
+  loading: string
+  /** Shown instead of the placeholder when the host cancelled the rendering call. */
+  cancelled: string
+  /** Accessible name of the refresh icon button. */
+  refresh: string
+  /** Accessible name of the refresh icon button while a refresh runs. */
+  refreshing: string
+  /** Accessible name of the fullscreen icon button (inline view). */
+  enterFullscreen: string
+  /** Accessible name of the fullscreen icon button (fullscreen view). */
+  exitFullscreen: string
+  /** Label of the button that opens the view builder. */
+  build: string
+  /** Shown under the placeholder once loading takes longer than `slowHintAfterMs`. */
+  slowHint: string
+  /** Title of the error state when the view could not be loaded. */
+  errorTitle: string
+  /** One line under the error title: what you can do next (a retry button follows). */
+  errorHint: string
+  /**
+   * The line under an error title when no retry is offered (the originating
+   * tool is unknown, or the view cannot refresh): what you can do instead.
+   */
+  errorHintNoRetry: string
+  /** Retry button of the error state and of the step-error alert. */
+  retry: string
+  /** Summary of the error's technical-details disclosure. */
+  errorDetails: string
+  /** Title of the alert that lists the data steps that failed. */
+  stepErrorsTitle: string
+  /** The line under the step-error title when a retry is offered: what it does. */
+  stepErrorsHint: string
+  /** Toast title when a refresh failed: what happened, in one short sentence. */
+  refreshFailed: string
+  /** Toast line under {@link ViewMessages.refreshFailed}: what you see now and can do. */
+  refreshFailedHint: string
+  /** Toast title when the host rejected a display-mode change. */
+  fullscreenFailed: string
+  /** Toast line under {@link ViewMessages.fullscreenFailed}: what you can do. */
+  fullscreenFailedHint: string
+}
+
+/** Strings of `ListFooter`. */
+export interface ListFooterMessages {
+  /** The honest count line, e.g. "Showing 8 of 42 tasks". Numbers arrive pre-formatted. */
+  showing: (params: { shown: string; total: string; noun: string }) => string
+  /** Plural noun used when the caller passes none. */
+  defaultNoun: string
+  loadMore: string
+  loadingMore: string
+}
+
+/** Strings of the widget renderer's fallbacks. */
+export interface RendererMessages {
+  /** A layout cell names a widget id the bundle does not contain. */
+  widgetUnavailable: string
+  /** A widget threw while rendering. */
+  widgetCrashed: string
+  /** Builder canvas/preview: the cell has no data yet. */
+  noDataYet: string
+}
+
+/** Strings of the visual view builder (`LayoutBuilder`). */
+export interface BuilderMessages {
+  title: string
+  builderBadge: string
+  previewBadge: string
+  catalogue: string
+  save: string
+  done: string
+  viewLayoutTab: string
+  viewPipelineTab: string
+  viewPreviewTab: string
+  saveDialogTitle: string
+  saveDialogDescription: string
+  saveNameLabel: string
+  saveDescriptionLabel: string
+  saveConfirm: string
+  cancel: string
+  pipelineHeader: string
+  keysHeader: string
+  stepsHeader: string
+  keyName: string
+  keyValue: string
+  stepContextId: string
+  stepPickerLabel: string
+  addKey: string
+  addStep: string
+  emptyKeys: string
+  emptySteps: string
+  statusUpToDate: string
+  statusPending: string
+  statusRefreshing: string
+  paletteHeader: string
+  paletteEmpty: string
+  canvasEmpty: string
+  canvasDropHint: string
+  addRow: string
+  addTab: string
+  removeRow: string
+  renameTab: string
+  removeTab: string
+  tabsLabel: string
+  catalogueDescription: string
+  catalogueKeys: string
+  catalogueSteps: string
+  catalogueUnreachable: string
+  catalogueUnreachableEmpty: string
+  catalogueProducedBy: string
+  catalogueConsumedBy: string
+  catalogueNeedsKeys: string
+  cataloguePickKey: string
+  catalogueAddProducingStep: string
+  catalogueLive: string
+  catalogueMissing: string
+  /** Title of the error state when the catalogue fetch fails (the raw reason goes under Details). */
+  catalogueError: string
+  /** What to do when the catalogue fetch fails (the state offers a retry). */
+  catalogueErrorHint: string
+  /** Heading for the pipeline-validation warning banner. */
+  validationWarning: string
+  /** Title of the save dialog's error state when a save fails (the raw reason goes under Details). */
+  saveError: string
+  /** What to do when a save fails (the dialog's Save button is the retry). */
+  saveErrorHint: string
+  /** Inline message when a tab rename is rejected (duplicate label). */
+  renameDuplicate: string
+  /** Toolbar stat: keys present in the live context. */
+  statsLive: string
+  /** Toolbar stat: widgets the current keys and steps can feed. */
+  statsReachable: string
+  /** Toolbar stat: widgets nothing can feed yet. */
+  statsUnreachable: string
+  /** Empty layout view: title. */
+  emptyHintTitle: string
+  /** Empty layout view: what to do. */
+  emptyHintBody: string
+  /** Empty layout view: button that switches to the data-sources tab. */
+  openDataSources: string
+  saveNamePlaceholder: string
+  saveDescriptionPlaceholder: string
+  /** Toast after a successful save. */
+  saved: (name: string) => string
+  /** Hint next to the tab strip. */
+  renameHint: string
+  /** Tooltip of a tab trigger. */
+  renameTitle: string
+  /** Note next to the data-sources header. */
+  autoApplies: string
+  noMoreKeys: string
+  /** Tooltip of the detected value type next to a key value. */
+  parsedType: string
+  /** Name of a detected value type (`valueTypeLabel` code: str, num, bool, arr, obj, null). */
+  valueType: (code: string) => string
+  removeKey: string
+  removeStep: string
+  noInputs: string
+  noOutputs: string
+  rowLabel: (index: number) => string
+  elementCount: (count: number) => string
+  moveRowUp: string
+  moveRowDown: string
+  columnSpan: string
+  configureElement: string
+  configureElementSet: (count: number) => string
+  removeElement: string
+  resizeElement: string
+  noKeysRegistered: string
+  noStepsRegistered: string
+  /** Prefix for "used by" lines that list steps. */
+  catalogueStepPrefix: string
+  /** Prefix for "used by" lines that list widgets. */
+  catalogueElementPrefix: string
+}
+
+/** Strings of the builder's per-cell props sheet. */
+export interface PropsSheetMessages {
+  title: string
+  description: string
+  apply: string
+  cancel: string
+  reset: string
+  noProps: string
+  unsetOption: string
+  unsupportedType: (type: string) => string
+}
+
+/** One locale's complete toolkit catalog. */
+export interface ToolkitMessages {
+  common: CommonMessages
+  view: ViewMessages
+  listFooter: ListFooterMessages
+  filterBar: { searchPlaceholder: string }
+  pills: { live: string }
+  renderer: RendererMessages
+  builder: BuilderMessages
+  propsSheet: PropsSheetMessages
+}