@formatjs/editor 1.3.0 → 1.5.0

package/README.md

@@ -1,7 +1,8 @@
 # Headless message editor
 
 Install `@formatjs/editor` alongside React 19. The published package exports
-headless APIs and TypeScript declarations; demo UI remains repository-only.
+headless APIs and TypeScript declarations at the root, plus optional reusable UI
+at `@formatjs/editor/ui`. The styled demos remain repository-only.
 
 The React 19 editor exposes behavior without DOM, styles, a design system, an
 IntlProvider, or network requests. Consumers own catalogs, persistence, loading
@@ -182,8 +183,367 @@ categories inherit the source `other` branch's argument contract. Repeated
 placeholders do not change that contract. Validation is structural, not a check
 of translation quality.
 
-The optional `TranslationEditorDemo` in `demo/workflow-demo.tsx` reuses the StyleX
-`EditorView`, tokens, and controls. It includes locale/catalog/status filters,
+The optional `TranslationEditorDemo` in `demo/workflow-demo.tsx` uses the public
+`TranslationEditorView` with a StyleX component adapter and localized labels. It includes locale/catalog/status filters,
 pagination, source locations, localized validation, reset, and save feedback.
 Supply an `IntlProvider` and the same StyleX Vite integration used by the demo.
 It is separate from the headless entry point; consumers can use any design system.
+
+## Reusable UI with your design system
+
+Import `TranslationEditorView`, `MessageList`, `SourceMessage`, and
+`TranslationField` from `@formatjs/editor/ui`. This separate entry point owns
+message-row selection wiring, field labels and error descriptions, draft status,
+and copy/reset/save controls. It ships native controls and uses React plus the package's existing ICU parser. The headless root does not import the UI, StyleX, icons, or React Intl.
+
+Mount one workflow above the views and pass its existing drafts:
+
+```tsx
+import {useTranslationEditor} from '@formatjs/editor'
+import {TranslationEditorView} from '@formatjs/editor/ui'
+
+const workflow = useTranslationEditor({messages, locales, onSave: persist})
+const selected = workflow.selectedMessage
+return (
+  <TranslationEditorView
+    messages={workflow.pageMessages}
+    selectedMessage={selected}
+    onSelect={workflow.editor.selectMessage}
+    search={{
+      value: workflow.editor.query,
+      onValueChange: workflow.editor.setQuery,
+    }}
+    translations={
+      selected
+        ? visibleLocales.map(locale => {
+            const draft = workflow.getTranslation(selected.id, locale)!
+            return {
+              locale,
+              draft,
+              onSave: () => {
+                void draft.save()
+              },
+            }
+          })
+        : []
+    }
+  />
+)
+```
+
+`visibleLocales` must be a subset of the workflow's available `locales`. Hiding a
+view does not remove its draft. The view does not create a workflow or own
+selection, fetching, filtering, pagination, locale visibility, or persistence.
+For server-side search, pass the loaded page directly as `messages`, your search
+value/callback as `search`, and your externally selected detail as
+`selectedMessage`. Selection can remain outside the loaded page. `loading` marks
+navigation busy and displays a status; it does not clear the controlled list.
+
+### Component adapters
+
+`EditorDesignSystemProvider` accepts partial overrides of `EditorComponents`: `Button`,
+`TextInput`, `TextArea`, `MessageRow`, `Panel`, and `Layout`, plus the optional tool
+adapters described below. Unspecified or explicitly `undefined` entries
+inherit from the nearest provider, falling back to `nativeEditorComponents`. Adapters map a design system's control API to
+semantic `onPress`, `onSelect`, and `onValueChange` callbacks. Define adapters at
+module scope so React preserves focus and control state between edits:
+
+```tsx
+import {
+  EditorDesignSystemProvider,
+  useEditorDesignSystem,
+  type EditorComponents,
+} from '@formatjs/editor/ui'
+import {Button, Textarea} from './controls'
+
+const components: Partial<EditorComponents> = {
+  Button: ({onPress, ...props}) => (
+    <Button {...props} onClick={() => onPress()} />
+  ),
+  TextArea: ({onValueChange, ...props}) => (
+    <Textarea {...props} onValueChange={onValueChange} />
+  ),
+}
+```
+
+Configure the design system once around your application or editor subtree:
+
+```tsx
+function EditorWorkspace() {
+  return (
+    <EditorDesignSystemProvider components={components}>
+      <TranslationEditorView {...viewProps} />
+      <CustomToolbar />
+    </EditorDesignSystemProvider>
+  )
+}
+
+function CustomToolbar() {
+  const {Button} = useEditorDesignSystem()
+  return (
+    <Button variant="secondary" onPress={openReview}>
+      Review
+    </Button>
+  )
+}
+```
+
+All built-in views and downstream consumers use `useEditorDesignSystem()`;
+there is no component-registry prop on individual views. The hook returns the
+resolved, read-only `ResolvedEditorComponents` contract, including native defaults for every optional tool adapter. Providers are React-tree scoped,
+so sibling editors (and separate server-rendered trees) do not share mutable
+configuration. Nested providers override only specified components and inherit
+the rest. Changing the registry updates consumers; keeping each component type
+stable preserves field focus and local state. No provider is needed for native
+controls.
+
+Each component has an exported props contract:
+
+| Component                              | Inputs                                                                                     | Output callback                      |
+| -------------------------------------- | ------------------------------------------------------------------------------------------ | ------------------------------------ |
+| `Button` / `EditorButtonProps`         | `children`, `variant`, optional `disabled`                                                 | `onPress(): void`                    |
+| `TextInput` / `EditorTextInputProps`   | `id`, `value`, `type` (`text` or `search`), optional disabled/error-description attributes | `onValueChange(value: string): void` |
+| `TextArea` / `EditorTextAreaProps`     | `id`, `value`, optional `rows` (default six), disabled/error-description attributes        | `onValueChange(value: string): void` |
+| `MessageRow` / `EditorMessageRowProps` | `children`, controlled `selected`                                                          | `onSelect(): void`                   |
+| `Panel` / `EditorPanelProps`           | `children`, accessible `label`, `kind` (`source` or `translation`)                         | None; layout only                    |
+| `Layout` / `EditorLayoutProps`         | `toolbar`, `navigation`, `content`, optional `sidebar` nodes                               | None; layout only                    |
+
+`EditorInputProps` defines the shared input attributes explicitly: `id`, `value`,
+`onValueChange`, optional `disabled`, `aria-invalid`, and `aria-describedby`.
+Callbacks never receive DOM events. Inputs remain controlled; callbacks request
+a change and the caller supplies the next value. Disabled buttons must not invoke
+`onPress`. Panel and Layout do not invent interaction callbacks.
+
+The complete StyleX adapter lives in `demo/design-system/editor-components.tsx`;
+its layout, tokens, and native-control wrappers are not bundled into the package.
+
+Adapter requirements:
+
+- Inputs forward `id`, `value`, `disabled`, `aria-invalid`, and
+  `aria-describedby` to their focusable control. They report strings through
+  `onValueChange` and stay associated with the view's visible label.
+- Buttons honor `disabled`, support keyboard activation, and do not submit a
+  surrounding form. `onPress` and `onSelect` take no event argument.
+- Message rows expose selection (the native adapter uses `aria-current`) and
+  preserve keyboard activation. Icons and selection styling belong in the adapter.
+- Panels retain their accessible label and render their children. Layout receives
+  `toolbar`, `navigation`, and `content` nodes, which it can arrange responsively.
+  Preserve a meaningful reading and keyboard order.
+
+The reusable pieces retain semantic labels, headings, lists, alerts, and status
+nodes. Adapters control the interactive controls and outer presentation; use the
+standalone pieces when a different page composition is needed.
+
+### Reusable translation tools
+
+`LocalePicker`, `MessagePreview`, `CopyTextButton`, and `MessageContext` are also
+exported from `@formatjs/editor/ui`. They use the same `EditorDesignSystemProvider`
+and work independently or inside the composed view's slots:
+
+```tsx
+import {
+  CopyTextButton,
+  LocalePicker,
+  MessageContext,
+  MessagePreview,
+} from '@formatjs/editor/ui'
+
+function TranslationTools() {
+  return (
+    <>
+      <LocalePicker
+        locales={availableLocales}
+        selectedLocales={selectedLocales}
+        onChange={setSelectedLocales}
+        getLocaleLabel={locale => displayNames.of(locale) ?? locale}
+      />
+
+      <MessagePreview message={draft.value} />
+      <CopyTextButton value={draft.value} label="translation" />
+      <MessageContext message={selectedMessage} />
+    </>
+  )
+}
+```
+
+- **LocalePicker** reports unique available locale codes in input order through
+  `onChange(locales: string[])`. Selection is controlled; duplicate and unavailable
+  selections do not distort select-all or mixed state. A selection change drops
+  unavailable codes. The picker uses unique label/control IDs and balanced,
+  contiguous columns that collapse without changing reading order. Empty lists
+  disable select-all. `getLocaleLabel` defaults to the code so display language
+  stays explicit. `labels` overrides `title`, `empty`, `clear`, and the formatter
+  callbacks `selectAll(count)`, `selected(count)`, and `trigger(summary)`.
+- **MessagePreview** shows ICU structure, not a formatted sample result: all plural
+  and select branches, ordinal types, plural offsets, rich-text tags, and exact
+  number/date/time format tokens (including skeletons). Literals retain whitespace;
+  tags are displayed as text, never executed as HTML. Incomplete syntax produces
+  an alert; `formatError(error)` can localize its contents. No argument values are
+  required, and empty text is valid.
+- **CopyTextButton** copies `value` verbatim through the browser Clipboard API.
+  `writeText(value): Promise<void>` can supply a different clipboard implementation,
+  including a host-specific fallback. Unsupported access and rejected writes show
+  failure feedback, never success. Pending writes disable the control. Changing
+  the value or writer, or unmounting, invalidates old results and callbacks.
+  `onCopy(value)` and `onError(error, value)` report completed current requests.
+  Feedback expires after `feedbackDurationMs` (default 1500); `labels` provides
+  `copy`, `copying`, `copied`, and `failed` formatters receiving the supplied label.
+  Native clipboard access happens only when the user presses the button.
+- **MessageContext** renders an ID, optional description, catalogs, and source
+  locations from the existing `EditorMessage` metadata contract. Locations render
+  as plain text with optional start/end ranges; `renderLocation(location)` can
+  customize them. `copyId` defaults to true and `copyOptions` passes clipboard
+  callbacks, labels, writer, and timing to the ID's copy control. `labels` overrides
+  `title`, `id`, `description`, `catalogs`, and `locations`. A missing message clears
+  the content; absent metadata sections are omitted.
+
+Tool adapters are optional in `EditorComponents`, so existing complete registries
+remain valid. The hook resolves all of them to native defaults. Override them in
+one provider to use the same design system across fields and standalone tools:
+
+| Adapter / props                                        | Inputs                                                                                  | Output callback                     |
+| ------------------------------------------------------ | --------------------------------------------------------------------------------------- | ----------------------------------- |
+| `Checkbox` / `EditorCheckboxProps`                     | `id`, `checked` (boolean or `indeterminate`), optional `disabled`                       | `onCheckedChange(checked: boolean)` |
+| `LocalePickerLayout` / `EditorLocalePickerLayoutProps` | `id`, `title`, `summary`, `triggerLabel`, `open`, `controls`, ordered `columns`         | `onOpenChange(open: boolean)`       |
+| `PreviewToken` / `EditorPreviewTokenProps`             | `children`, `kind` (argument, number, date, time, tag, selector, plural, pound, syntax) | None                                |
+| `CopyButton` / `EditorCopyButtonProps`                 | `label`, `status` (idle, copying, copied, error), `disabled`                            | `onPress()`                         |
+| `Metadata` / `EditorMetadataProps`                     | Accessible `label`, `children`                                                          | None                                |
+
+Checkbox adapters forward IDs, expose mixed state, honor disabled state, and report
+booleans without DOM events. Locale-picker layouts can use a popover, disclosure,
+or dialog: they own open-state interaction, focus handling, and responsive layout,
+while preserving column order and rendering every control. Copy-button adapters
+can map status to icons, but must retain the accessible label and must not submit
+forms. Preview-token adapters render children as text/content, never raw HTML.
+The tools demo (`demo/tools-demo.tsx`, browser fixture `/?tools=1`) combines these
+components with the StyleX registry.
+
+### Custom message rows and composed layouts
+
+`MessageList` and `TranslationEditorView` infer your message type from `messages`,
+so row renderers retain application metadata without casts. `renderMessage` receives
+`(message, {selected})` and returns **noninteractive** content inside the existing
+selection control. `renderMessageActions` receives the same inputs and renders
+sibling controls in the list item; pressing an action does not select the row.
+Actions should have accessible names and use non-submitting buttons. The library
+continues to own row keys, selection callbacks, list semantics, and search wiring.
+Omit a renderer for the standard content; return `null` to suppress that slot.
+
+```tsx
+const messages = [
+  {id: 'greeting', defaultMessage: 'Hello {name}', translatedCount: 3},
+]
+
+function CatalogEditor() {
+  const {Button} = useEditorDesignSystem()
+  return (
+    <TranslationEditorView
+      messages={messages}
+      selectedId={selectedId}
+      selectedMessage={loadedDetail}
+      onSelect={selectMessage}
+      translations={translations}
+      listSummary={<output>{total} results</output>}
+      renderMessage={(message, {selected}) => (
+        <>
+          <span>{message.defaultMessage}</span>
+          <span>{message.translatedCount} translations</span>
+          {selected && <span>Selected</span>}
+        </>
+      )}
+      renderMessageActions={message => (
+        <Button variant="secondary" onPress={() => openReview(message.id)}>
+          Review {message.id}
+        </Button>
+      )}
+      renderTranslations={fields => <div className="locale-grid">{fields}</div>}
+      renderContent={content => (
+        <section aria-label="Translation details">
+          {content}
+          <p>Drafts remain available when you hide a locale.</p>
+        </section>
+      )}
+      sidebar={<SourceMetadata message={loadedDetail} />}
+      emptyState={<output>Loading message details…</output>}
+    />
+  )
+}
+```
+
+`selectedId` controls list highlighting independently of fetched detail; it defaults
+to `selectedMessage?.id`. `selectedMessage` can remain outside the loaded page.
+`listSummary` appears after search and before the rows/loading status. Lists remain
+caller-controlled: passing `loading` does not clear existing rows.
+
+`renderTranslations` wraps the generated locale fields (including an empty array)
+when a message is selected. `renderContent` wraps the whole detail region, including
+notices and the empty state. These are render functions, not component types;
+keep any component types they return stable so fields retain focus. The wrappers
+must render their provided children to retain the built-in editing UI. Draft
+lifetime still belongs to the caller's workflow.
+
+`sidebar` is passed separately to the context's `Layout` adapter, which chooses
+its placement and responsive behavior. Layout adapters must render this optional
+prop to support sidebars; existing adapters that do not use sidebars remain valid.
+`emptyState` replaces the default no-selection status (`null` suppresses it).
+Per-locale `translations[].labels` override shared labels, with validation labels
+merged individually, so locale-specific save labels do not drop shared errors.
+
+### Application slots and localization
+
+`filters`, `pagination`, `context`, and `notice` accept React nodes. Supply your
+own locale picker or filter controls in `filters`; no native-select API is
+imposed on applications with multi-select or asynchronous selectors.
+`sourcePreview` and each translation's `preview` can render a custom preview.
+Each translation also accepts a readable `label` and an `actions` slot (`null`
+suppresses default actions).
+
+A translation's `onSave` is a command callback. It can open a confirmation dialog
+that retains the supplied draft's `save` action, then supply typed context and
+handle the returned result. The view never calls persistence itself or interprets
+application receipts. Without `onSave`, default actions include copy and reset
+but no save button. Validation and pending state disable the default save button;
+custom action slots own their own disabled/confirmation behavior.
+
+All built-in strings can be overridden through `labels`, including individual
+`labels.validation` entries. Supply already-localized strings from your preferred
+library. The workflow demo demonstrates a React Intl consumer without making
+`IntlProvider` a requirement for the public UI.
+
+## Browser interaction tests
+
+Write native Playwright `*.spec.ts` files in `packages/editor/vrt/`. The
+`e2eConfig` helper supplies `baseURL`, so specs can use `page.goto('/')`,
+accessible locators, clicks, and web-first assertions. VRT captures are generated from the `.visual.tsx` module. Both targets share the consumer-owned
+server, shell, declared inputs, and pinned Testcontainers browser.
+
+```sh
+bazel test //packages/editor/vrt:e2e_test --test_output=errors
+bazel test //packages/editor/vrt:e2e_test --test_arg=--grep=translation
+```
+
+E2E covers editing, search, selection, copy/clear, ICU error recovery, locale
+drafts, and saving. It requires Docker and runs manually, locally, and uncached.
+CI should explicitly select both `e2e_test` and `visual_test`. Failures retain
+JUnit, screenshots, and Playwright traces in undeclared test outputs.
+
+## Component browser tests
+
+`bazel test //packages/editor/vrt:component_test --test_output=errors` runs
+Playwright 1.63 native `mount()` specs for the real editor. The typed
+`editor.visual.tsx` uses the existing provider shell and demo; `gallery.tsx` owns
+mount/update/unmount. The tests check provider updates without losing a draft,
+clear, ICU validation, and isolation between mounts.
+
+`component_browser_test` shares the custom server, root npm dependencies, strict
+typechecks, and pinned Testcontainers browser with E2E and VRT.
+`componentBrowserConfig` discovers `*.browser.spec.ts` separately from the E2E
+`*.spec.ts` and generated VRT capture cases. CI should explicitly run all three
+manual browser targets. Screenshot baselines and updates remain in `visual_test`.
+
+The default export of `editor.visual.tsx` is a `ComponentVisualModule`: it declares
+renderable cases, browser-side capture hooks, and VRT options. The gallery registers
+that module with `installVisualGallery`. The shared runtime generates all six
+screenshot tests; no `editor.visual.spec.ts` is maintained. Interaction tests stay
+in `editor.browser.spec.tsx`, and the existing PNG names remain explicit in the
+visual declarations.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formatjs/editor",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "private": false,
   "description": "Headless ICU MessageFormat editor for React",
   "keywords": [
@@ -34,7 +34,11 @@
   "sideEffects": false,
   "types": "index.d.ts",
   "exports": {
-    ".": "./index.js"
+    ".": "./index.js",
+    "./ui": {
+      "types": "./ui.d.ts",
+      "default": "./ui.js"
+    }
   },
   "dependencies": {
     "@formatjs/icu-messageformat-parser": "3.5.17"

package/ui.d.ts

@@ -0,0 +1,307 @@
+import { ComponentType, ReactNode } from "react";
+import "@formatjs/icu-messageformat-parser";
+//#region packages/editor/design-system.d.ts
+interface EditorButtonProps {
+  children: ReactNode;
+  /** Called once per activation, without a DOM event; disabled controls must not call it. */
+  onPress: () => void;
+  disabled?: boolean;
+  variant: "primary" | "secondary";
+}
+interface EditorInputProps {
+  id: string;
+  value: string;
+  /** Reports the complete next string value; never a DOM event. */
+  onValueChange: (value: string) => void;
+  disabled?: boolean;
+  "aria-invalid"?: boolean;
+  "aria-describedby"?: string;
+}
+interface EditorTextInputProps extends EditorInputProps {
+  type: "text" | "search";
+}
+interface EditorTextAreaProps extends EditorInputProps {
+  /** Visible rows when supported by the control; defaults to six. */
+  rows?: number;
+}
+interface EditorMessageRowProps {
+  children: ReactNode;
+  selected: boolean;
+  /** Activates this row without changing controlled selection itself. */
+  onSelect: () => void;
+}
+interface EditorPanelProps {
+  children: ReactNode;
+  label: string;
+  kind: "source" | "translation";
+}
+interface EditorLayoutProps {
+  toolbar: ReactNode;
+  navigation: ReactNode;
+  content: ReactNode;
+  /** Optional secondary content, arranged by the design-system layout. */
+  sidebar?: ReactNode;
+}
+/** Define adapters outside render so controls retain focus across edits. */
+interface EditorComponents extends Partial<EditorToolComponents> {
+  Button: ComponentType<EditorButtonProps>;
+  TextInput: ComponentType<EditorTextInputProps>;
+  TextArea: ComponentType<EditorTextAreaProps>;
+  MessageRow: ComponentType<EditorMessageRowProps>;
+  Panel: ComponentType<EditorPanelProps>;
+  Layout: ComponentType<EditorLayoutProps>;
+}
+interface EditorCheckboxProps {
+  id: string;
+  checked: boolean | "indeterminate";
+  disabled?: boolean;
+  onCheckedChange: (checked: boolean) => void;
+}
+interface EditorLocalePickerLayoutProps {
+  id: string;
+  title: string;
+  summary: string;
+  triggerLabel: string;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  controls: ReactNode;
+  /** Contiguous, balanced columns in the caller's locale order. */
+  columns: readonly ReactNode[];
+}
+interface EditorPreviewTokenProps {
+  children: ReactNode;
+  kind: "argument" | "number" | "date" | "time" | "tag" | "selector" | "plural" | "pound" | "syntax";
+}
+type EditorCopyStatus = "idle" | "copying" | "copied" | "error";
+interface EditorCopyButtonProps {
+  label: string;
+  status: EditorCopyStatus;
+  disabled: boolean;
+  onPress: () => void;
+}
+interface EditorMetadataProps {
+  label: string;
+  children: ReactNode;
+}
+/** Optional additions preserve existing complete design-system registries. */
+interface EditorToolComponents {
+  Checkbox: ComponentType<EditorCheckboxProps>;
+  LocalePickerLayout: ComponentType<EditorLocalePickerLayoutProps>;
+  PreviewToken: ComponentType<EditorPreviewTokenProps>;
+  CopyButton: ComponentType<EditorCopyButtonProps>;
+  Metadata: ComponentType<EditorMetadataProps>;
+}
+type ResolvedEditorComponents = Required<EditorComponents>;
+/** Unstyled native controls; no CSS, icons, or localization provider is required. */
+export declare const nativeEditorComponents: ResolvedEditorComponents;
+interface EditorDesignSystemProviderProps {
+  /** Overrides inherit unspecified components from the nearest provider. */
+  components: Partial<EditorComponents>;
+  children: ReactNode;
+}
+/** Configure a tree once; sibling providers remain independent. */
+export declare function EditorDesignSystemProvider({ components, children }: EditorDesignSystemProviderProps): ReactNode;
+/** Read the resolved controls, including native defaults outside a provider. */
+export declare function useEditorDesignSystem(): Readonly<ResolvedEditorComponents>;
+//#endregion
+//#region packages/editor/locale-picker.d.ts
+interface LocalePickerLabels {
+  title: string;
+  empty: string;
+  clear: string;
+  selectAll: (count: number) => string;
+  selected: (count: number) => string;
+  trigger: (summary: string) => string;
+}
+interface LocalePickerProps {
+  locales: readonly string[];
+  selectedLocales: readonly string[];
+  /** Reports unique available locales in their input order; never mutates selection. */
+  onChange: (locales: string[]) => void;
+  /** Defaults to the locale code; consumers choose the display language. */
+  getLocaleLabel?: (locale: string) => string;
+  labels?: Partial<LocalePickerLabels>;
+}
+export declare function LocalePicker({ locales, selectedLocales, onChange, getLocaleLabel, labels }: LocalePickerProps): ReactNode;
+//#endregion
+//#region packages/editor/message-preview.d.ts
+interface MessagePreviewProps {
+  message: string;
+  /** Customize a parser error without suppressing the alert semantics. */
+  formatError?: (error: Error) => ReactNode;
+}
+/** Structural ICU preview: shows every branch, without evaluating values or HTML. */
+export declare function MessagePreview({ message, formatError }: MessagePreviewProps): ReactNode;
+//#endregion
+//#region packages/editor/copy-text-button.d.ts
+interface CopyTextLabels {
+  copy: (label: string) => string;
+  copying: (label: string) => string;
+  copied: (label: string) => string;
+  failed: (label: string) => string;
+}
+interface CopyTextButtonProps {
+  value: string;
+  label: string;
+  disabled?: boolean;
+  /** Injectable clipboard boundary; rejects when the write fails. */
+  writeText?: (value: string) => Promise<void>;
+  onCopy?: (value: string) => void;
+  onError?: (error: Error, value: string) => void;
+  feedbackDurationMs?: number;
+  labels?: Partial<CopyTextLabels>;
+}
+/** Copies exact text; feedback belongs to the current value and mounted control. */
+export declare function CopyTextButton({ value, label, disabled, writeText, onCopy, onError, feedbackDurationMs, labels }: CopyTextButtonProps): ReactNode;
+//#endregion
+//#region packages/editor/validation.d.ts
+type TranslationValidationError = "empty" | "invalid-source" | "invalid-translation" | "structure";
+//#endregion
+//#region packages/editor/workflow.d.ts
+interface SourceLocation {
+  file: string;
+  start?: number;
+  end?: number;
+}
+interface EditorMessage {
+  id: string;
+  defaultMessage: string;
+  description?: string;
+  catalogs?: readonly string[];
+  locations?: readonly SourceLocation[];
+  translations: Readonly<Record<string, string | undefined>>;
+}
+type TranslationSaveResult<TResult = void> = {
+  status: "saved";
+  value: TResult;
+} | {
+  status: "failed";
+  error: Error;
+} | {
+  status: "invalid";
+  validationError: TranslationValidationError;
+} | {
+  status: "skipped";
+  reason: "unavailable" | "unchanged" | "pending";
+};
+/** A render snapshot and actions for one message/locale pair. */
+interface TranslationDraftState<TContext = void, TResult = void> {
+  readonly value: string;
+  readonly baseline: string;
+  readonly validationError: TranslationValidationError | null;
+  readonly changed: boolean;
+  readonly isSaving: boolean;
+  readonly saveError: Error | null;
+  readonly saved: boolean;
+  setTranslation: (value: string) => void;
+  reset: () => void;
+  save: (context?: TContext) => Promise<TranslationSaveResult<TResult>>;
+}
+//#endregion
+//#region packages/editor/message-context.d.ts
+interface MessageContextLabels {
+  title: string;
+  id: string;
+  description: string;
+  catalogs: string;
+  locations: string;
+}
+interface MessageContextProps {
+  message?: Pick<EditorMessage, "id" | "description" | "catalogs" | "locations"> | null;
+  labels?: Partial<MessageContextLabels>;
+  copyId?: boolean;
+  copyOptions?: Pick<CopyTextButtonProps, "writeText" | "onCopy" | "onError" | "labels" | "feedbackDurationMs">;
+  /** Default locations are plain text, never file URLs or HTML. */
+  renderLocation?: (location: SourceLocation) => ReactNode;
+}
+export declare function MessageContext({ message, labels, copyId, copyOptions, renderLocation }: MessageContextProps): ReactNode;
+//#endregion
+//#region packages/editor/ui.d.ts
+export interface EditorLabels {
+  search: string;
+  messages: string;
+  source: string;
+  noMessages: string;
+  noSelection: string;
+  loading: string;
+  copySource: string;
+  reset: string;
+  save: string;
+  saving: string;
+  saved: string;
+  unsaved: string;
+  unchanged: string;
+  validation: Record<TranslationValidationError, string>;
+}
+export type EditorLabelOverrides = Partial<Omit<EditorLabels, "validation">> & {
+  validation?: Partial<EditorLabels["validation"]>;
+};
+interface ViewOptions {
+  labels?: EditorLabelOverrides;
+}
+export type EditorViewMessage = Pick<EditorMessage, "id" | "defaultMessage" | "description">;
+export interface EditorSearch {
+  value: string;
+  onValueChange: (value: string) => void;
+}
+export interface EditorMessageRenderState {
+  selected: boolean;
+}
+export interface MessageListProps<Message extends EditorViewMessage = EditorViewMessage> extends ViewOptions {
+  messages: readonly Message[];
+  selectedId?: string;
+  onSelect: (id: string) => void;
+  search?: EditorSearch;
+  loading?: boolean;
+  pagination?: ReactNode;
+  /** Summary or controls between search and the loaded rows. */
+  listSummary?: ReactNode;
+  /** Noninteractive content inside the design-system selection control. */
+  renderMessage?: (message: Message, state: EditorMessageRenderState) => ReactNode;
+  /** Interactive actions rendered beside, never inside, the selection control. */
+  renderMessageActions?: (message: Message, state: EditorMessageRenderState) => ReactNode;
+}
+/** Controlled list: it never filters, paginates, fetches, or changes selection itself. */
+export declare function MessageList<Message extends EditorViewMessage = EditorViewMessage>({ messages, selectedId, onSelect, search, loading, pagination, listSummary, renderMessage, renderMessageActions, labels }: MessageListProps<Message>): ReactNode;
+export interface SourceMessageProps extends ViewOptions {
+  message: EditorViewMessage;
+  preview?: ReactNode;
+  context?: ReactNode;
+}
+export declare function SourceMessage({ message, preview, context, labels }: SourceMessageProps): ReactNode;
+export type TranslationFieldDraft = Pick<TranslationDraftState, "value" | "validationError" | "changed" | "isSaving" | "saveError" | "saved" | "setTranslation" | "reset">;
+export interface TranslationFieldProps extends ViewOptions {
+  locale: string;
+  /** Human-readable label; defaults to the locale identifier. */
+  label?: string;
+  source: string;
+  draft: TranslationFieldDraft;
+  /** The caller owns confirmation, context, persistence, and receipt presentation. */
+  onSave?: () => void;
+  /** Overrides the default copy/reset/save actions, including with null. */
+  actions?: ReactNode;
+  preview?: ReactNode;
+}
+export declare function TranslationField({ locale, label, source, draft, onSave, actions, preview, labels }: TranslationFieldProps): ReactNode;
+export type EditorTranslation = Omit<TranslationFieldProps, "source">;
+export interface TranslationEditorViewProps<Message extends EditorViewMessage = EditorViewMessage> extends MessageListProps<Message> {
+  /** May be outside the loaded list, e.g. during a server-side page change. */
+  selectedMessage?: EditorViewMessage;
+  translations: readonly EditorTranslation[];
+  filters?: ReactNode;
+  context?: ReactNode;
+  sourcePreview?: ReactNode;
+  notice?: ReactNode;
+  sidebar?: ReactNode;
+  /** Replaces the no-selection status; null suppresses it. */
+  emptyState?: ReactNode;
+  /** Wrap the generated locale fields without recreating their wiring. */
+  renderTranslations?: (fields: ReactNode) => ReactNode;
+  /** Wrap the entire detail region, including notices and the empty state. */
+  renderContent?: (content: ReactNode) => ReactNode;
+}
+/** A stateless composition over caller-owned navigation and locale drafts. */
+export declare function TranslationEditorView<Message extends EditorViewMessage = EditorViewMessage>({ selectedMessage, selectedId, translations, filters, context, sourcePreview, notice, sidebar, emptyState, renderTranslations, renderContent, labels, ...list }: TranslationEditorViewProps<Message>): ReactNode;
+//#endregion
+export type { CopyTextButtonProps, CopyTextLabels, EditorButtonProps, EditorCheckboxProps, EditorComponents, EditorCopyButtonProps, EditorCopyStatus, EditorDesignSystemProviderProps, EditorInputProps, EditorLayoutProps, EditorLocalePickerLayoutProps, EditorMessageRowProps, EditorMetadataProps, EditorPanelProps, EditorPreviewTokenProps, EditorTextAreaProps, EditorTextInputProps, EditorToolComponents, LocalePickerLabels, LocalePickerProps, MessageContextLabels, MessageContextProps, MessagePreviewProps, ResolvedEditorComponents };
+//# sourceMappingURL=ui.d.ts.map

package/ui.js

@@ -0,0 +1,524 @@
+import { createContext, createElement, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { TYPE, parse } from "@formatjs/icu-messageformat-parser";
+//#region packages/editor/design-system.tsx
+/** Unstyled native controls; no CSS, icons, or localization provider is required. */
+const nativeEditorComponents = {
+	Checkbox: function NativeCheckbox({ checked, onCheckedChange, ...props }) {
+		const ref = useRef(null);
+		useEffect(() => {
+			if (ref.current) ref.current.indeterminate = checked === "indeterminate";
+		}, [checked]);
+		return /* @__PURE__ */ jsx("input", {
+			...props,
+			ref,
+			type: "checkbox",
+			checked: checked === true,
+			"aria-checked": checked === "indeterminate" ? "mixed" : checked,
+			onChange: (event) => onCheckedChange(event.target.checked)
+		});
+	},
+	LocalePickerLayout: ({ id, title, summary, triggerLabel, open, onOpenChange, controls, columns }) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": triggerLabel,
+		"aria-expanded": open,
+		"aria-controls": id,
+		onClick: () => onOpenChange(!open),
+		children: summary
+	}), /* @__PURE__ */ jsxs("fieldset", {
+		id,
+		hidden: !open,
+		children: [
+			/* @__PURE__ */ jsx("legend", { children: title }),
+			controls,
+			/* @__PURE__ */ jsx("div", {
+				style: {
+					display: "grid",
+					gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 16rem), 1fr))",
+					maxHeight: "60vh",
+					overflowY: "auto"
+				},
+				children: columns.map((column, index) => /* @__PURE__ */ jsx("div", { children: column }, index))
+			})
+		]
+	})] }),
+	PreviewToken: ({ children }) => /* @__PURE__ */ jsx("code", { children }),
+	CopyButton: ({ label, onPress, disabled }) => /* @__PURE__ */ jsx("button", {
+		type: "button",
+		disabled,
+		onClick: () => onPress(),
+		children: label
+	}),
+	Metadata: ({ label, children }) => /* @__PURE__ */ jsx("aside", {
+		"aria-label": label,
+		children
+	}),
+	Button: ({ children, onPress, disabled }) => /* @__PURE__ */ jsx("button", {
+		type: "button",
+		disabled,
+		onClick: () => onPress(),
+		children
+	}),
+	TextInput: ({ onValueChange, ...props }) => /* @__PURE__ */ jsx("input", {
+		...props,
+		onChange: (event) => onValueChange(event.target.value)
+	}),
+	TextArea: ({ onValueChange, rows = 6, ...props }) => /* @__PURE__ */ jsx("textarea", {
+		...props,
+		rows,
+		onChange: (event) => onValueChange(event.target.value)
+	}),
+	MessageRow: ({ children, selected, onSelect }) => /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-current": selected ? "true" : void 0,
+		onClick: () => onSelect(),
+		children
+	}),
+	Panel: ({ children, label }) => /* @__PURE__ */ jsx("section", {
+		"aria-label": label,
+		children
+	}),
+	Layout: ({ toolbar, navigation, content, sidebar }) => /* @__PURE__ */ jsxs("div", { children: [toolbar, /* @__PURE__ */ jsxs("div", { children: [
+		navigation,
+		content,
+		sidebar
+	] })] })
+};
+const EditorDesignSystemContext = createContext(nativeEditorComponents);
+/** Configure a tree once; sibling providers remain independent. */
+function EditorDesignSystemProvider({ components, children }) {
+	const parent = useEditorDesignSystem();
+	const value = useMemo(() => ({
+		...parent,
+		...Object.fromEntries(Object.entries(components).filter(([, value]) => value !== void 0))
+	}), [parent, components]);
+	return /* @__PURE__ */ jsx(EditorDesignSystemContext, {
+		value,
+		children
+	});
+}
+/** Read the resolved controls, including native defaults outside a provider. */
+function useEditorDesignSystem() {
+	return useContext(EditorDesignSystemContext);
+}
+//#endregion
+//#region packages/editor/locale-picker.tsx
+const defaults$2 = {
+	title: "Locales",
+	empty: "No locales selected",
+	clear: "Clear",
+	selectAll: (count) => `Select all ${count} ${count === 1 ? "locale" : "locales"}`,
+	selected: (count) => `${count} locales selected`,
+	trigger: (summary) => `Locales: ${summary}`
+};
+const localeCode = (locale) => locale;
+function LocalePicker({ locales, selectedLocales, onChange, getLocaleLabel = localeCode, labels }) {
+	const { Checkbox, Button, LocalePickerLayout } = useEditorDesignSystem();
+	const id = useId();
+	const [open, setOpen] = useState(false);
+	const available = [...new Set(locales)];
+	const selected = new Set(selectedLocales);
+	const active = available.filter((locale) => selected.has(locale));
+	const text = {
+		...defaults$2,
+		...labels
+	};
+	const summary = active.length === 0 ? text.empty : active.length === 1 ? getLocaleLabel(active[0]) : text.selected(active.length);
+	const all = available.length > 0 && active.length === available.length;
+	const midpoint = Math.ceil(available.length / 2);
+	const columns = [available.slice(0, midpoint), available.slice(midpoint)];
+	return /* @__PURE__ */ jsx(LocalePickerLayout, {
+		id,
+		title: text.title,
+		summary,
+		triggerLabel: text.trigger(summary),
+		open,
+		onOpenChange: setOpen,
+		controls: /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("label", {
+			htmlFor: `${id}-all`,
+			children: [/* @__PURE__ */ jsx(Checkbox, {
+				id: `${id}-all`,
+				disabled: available.length === 0,
+				checked: all ? true : active.length ? "indeterminate" : false,
+				onCheckedChange: (checked) => onChange(checked ? available : [])
+			}), text.selectAll(available.length)]
+		}), /* @__PURE__ */ jsx(Button, {
+			variant: "secondary",
+			disabled: active.length === 0,
+			onPress: () => onChange([]),
+			children: text.clear
+		})] }),
+		columns: columns.map((column, columnIndex) => column.map((locale, index) => {
+			const checkboxId = `${id}-${columnIndex}-${index}`;
+			return /* @__PURE__ */ jsxs("label", {
+				htmlFor: checkboxId,
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: 8
+				},
+				children: [/* @__PURE__ */ jsx(Checkbox, {
+					id: checkboxId,
+					checked: selected.has(locale),
+					onCheckedChange: (checked) => onChange(available.filter((candidate) => candidate === locale ? checked : selected.has(candidate)))
+				}), getLocaleLabel(locale)]
+			}, locale);
+		}))
+	});
+}
+//#endregion
+//#region packages/editor/message-preview.tsx
+/** Structural ICU preview: shows every branch, without evaluating values or HTML. */
+function MessagePreview({ message, formatError }) {
+	const { PreviewToken } = useEditorDesignSystem();
+	const parsed = useMemo(() => {
+		try {
+			return {
+				ast: parse(message, { captureLocation: true }),
+				error: null
+			};
+		} catch (error) {
+			return {
+				ast: null,
+				error: error instanceof Error ? error : new Error(String(error))
+			};
+		}
+	}, [message]);
+	if (parsed.error) return /* @__PURE__ */ jsx("p", {
+		role: "alert",
+		children: formatError ? formatError(parsed.error) : parsed.error.message
+	});
+	const token = (text, kind, key) => /* @__PURE__ */ jsx(PreviewToken, {
+		kind,
+		children: /* @__PURE__ */ jsx("bdi", {
+			dir: "ltr",
+			children: text
+		})
+	}, key);
+	const elements = (ast, prefix) => ast.flatMap((element, index) => {
+		const key = `${prefix}-${index}`;
+		switch (element.type) {
+			case TYPE.literal: return /* @__PURE__ */ jsx("span", { children: element.value }, key);
+			case TYPE.pound: return token("#", "pound", key);
+			case TYPE.argument:
+			case TYPE.number:
+			case TYPE.date:
+			case TYPE.time: return token(message.slice(element.location.start.offset, element.location.end.offset), TYPE[element.type], key);
+			case TYPE.tag: return [
+				token(`<${element.value}>`, "tag", `${key}-open`),
+				...elements(element.children, `${key}-children`),
+				token(`</${element.value}>`, "tag", `${key}-close`)
+			];
+			case TYPE.select:
+			case TYPE.plural: {
+				const kind = element.type === TYPE.select ? "select" : element.pluralType === "ordinal" ? "selectordinal" : "plural";
+				const offset = element.type === TYPE.plural && element.offset ? ` offset:${element.offset}` : "";
+				return [
+					token(`{${element.value}, ${kind},${offset}`, element.type === TYPE.select ? "selector" : "plural", `${key}-open`),
+					...Object.entries(element.options).flatMap(([selector, option]) => [
+						token(`${selector} {`, "selector", `${key}-${selector}`),
+						...elements(option.value, `${key}-${selector}`),
+						token("}", "syntax", `${key}-${selector}-close`)
+					]),
+					token("}", "syntax", `${key}-close`)
+				];
+			}
+		}
+	});
+	return /* @__PURE__ */ jsx("div", {
+		dir: "auto",
+		style: {
+			whiteSpace: "pre-wrap",
+			overflowWrap: "anywhere"
+		},
+		children: elements(parsed.ast, "message")
+	});
+}
+//#endregion
+//#region packages/editor/copy-text-button.tsx
+const defaults$1 = {
+	copy: (label) => `Copy ${label}`,
+	copying: (label) => `Copying ${label}…`,
+	copied: (label) => `Copied ${label}`,
+	failed: (label) => `Could not copy ${label}`
+};
+async function writeClipboard(value) {
+	if (typeof navigator === "undefined" || !navigator.clipboard?.writeText) throw new Error("Clipboard access is unavailable");
+	await navigator.clipboard.writeText(value);
+}
+/** Copies exact text; feedback belongs to the current value and mounted control. */
+function CopyTextButton({ value, label, disabled = false, writeText = writeClipboard, onCopy, onError, feedbackDurationMs = 1500, labels }) {
+	const { CopyButton } = useEditorDesignSystem();
+	const [status, setStatus] = useState("idle");
+	const operation = useRef({
+		generation: 0,
+		pending: false,
+		timer: void 0
+	});
+	useEffect(() => {
+		const current = operation.current;
+		current.generation++;
+		current.pending = false;
+		setStatus("idle");
+		clearTimeout(current.timer);
+		return () => {
+			current.generation++;
+			clearTimeout(current.timer);
+		};
+	}, [value, writeText]);
+	const copy = async () => {
+		const current = operation.current;
+		if (disabled || current.pending) return;
+		current.pending = true;
+		const request = ++current.generation;
+		clearTimeout(current.timer);
+		setStatus("copying");
+		let error;
+		try {
+			await writeText(value);
+		} catch (failure) {
+			error = failure instanceof Error ? failure : new Error(String(failure));
+		}
+		if (request !== current.generation) return;
+		current.pending = false;
+		setStatus(error ? "error" : "copied");
+		current.timer = setTimeout(() => {
+			if (request === current.generation) setStatus("idle");
+		}, Math.max(0, feedbackDurationMs));
+		if (error) onError?.(error, value);
+		else onCopy?.(value);
+	};
+	const text = {
+		...defaults$1,
+		...labels
+	};
+	const buttonLabel = (status === "copying" ? text.copying : status === "copied" ? text.copied : status === "error" ? text.failed : text.copy)(label);
+	return /* @__PURE__ */ jsxs("span", { children: [
+		/* @__PURE__ */ jsx(CopyButton, {
+			label: buttonLabel,
+			status,
+			disabled: disabled || status === "copying",
+			onPress: () => {
+				copy();
+			}
+		}),
+		status === "copied" && /* @__PURE__ */ jsx("output", { children: text.copied(label) }),
+		status === "error" && /* @__PURE__ */ jsx("span", {
+			role: "alert",
+			children: text.failed(label)
+		})
+	] });
+}
+//#endregion
+//#region packages/editor/message-context.tsx
+const defaults = {
+	title: "Message context",
+	id: "Message ID",
+	description: "Description",
+	catalogs: "Source catalogs",
+	locations: "Source locations"
+};
+function locationText(location) {
+	const start = location.start === void 0 ? "" : `:${location.start}`;
+	const end = location.end === void 0 ? "" : `${location.start === void 0 ? ":" : "–"}${location.end}`;
+	return `${location.file}${start}${end}`;
+}
+function MessageContext({ message, labels, copyId = true, copyOptions, renderLocation = locationText }) {
+	const { Metadata } = useEditorDesignSystem();
+	const text = {
+		...defaults,
+		...labels
+	};
+	return /* @__PURE__ */ jsx(Metadata, {
+		label: text.title,
+		children: message && /* @__PURE__ */ jsxs("dl", { children: [
+			/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: text.id }), /* @__PURE__ */ jsxs("dd", { children: [/* @__PURE__ */ jsx("code", { children: message.id }), copyId && /* @__PURE__ */ jsx(CopyTextButton, {
+				...copyOptions,
+				value: message.id,
+				label: text.id
+			})] })] }),
+			message.description && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: text.description }), /* @__PURE__ */ jsx("dd", { children: message.description })] }),
+			!!message.catalogs?.length && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: text.catalogs }), /* @__PURE__ */ jsx("dd", { children: /* @__PURE__ */ jsx("ul", { children: message.catalogs.map((catalog, index) => /* @__PURE__ */ jsx("li", { children: catalog }, index)) }) })] }),
+			!!message.locations?.length && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: text.locations }), /* @__PURE__ */ jsx("dd", { children: /* @__PURE__ */ jsx("ul", { children: message.locations.map((location, index) => /* @__PURE__ */ jsx("li", { children: renderLocation(location) }, index)) }) })] })
+		] })
+	});
+}
+//#endregion
+//#region packages/editor/ui.tsx
+const defaultLabels = {
+	search: "Search messages",
+	messages: "Messages",
+	source: "Source message",
+	noMessages: "No matching messages",
+	noSelection: "Select a message",
+	loading: "Loading messages…",
+	copySource: "Copy source",
+	reset: "Reset",
+	save: "Save translation",
+	saving: "Saving…",
+	saved: "Translation saved.",
+	unsaved: "Unsaved changes",
+	unchanged: "No unsaved changes",
+	validation: {
+		empty: "Enter a translation before saving.",
+		"invalid-source": "The source contains invalid ICU syntax.",
+		"invalid-translation": "The translation contains invalid ICU syntax.",
+		structure: "Preserve ICU arguments, tags, formatting styles, and selector branches."
+	}
+};
+function resolveLabels(labels) {
+	return {
+		...defaultLabels,
+		...labels,
+		validation: {
+			...defaultLabels.validation,
+			...labels?.validation
+		}
+	};
+}
+/** Controlled list: it never filters, paginates, fetches, or changes selection itself. */
+function MessageList({ messages, selectedId, onSelect, search, loading = false, pagination, listSummary, renderMessage, renderMessageActions, labels }) {
+	const { TextInput, MessageRow } = useEditorDesignSystem();
+	const text = resolveLabels(labels);
+	const searchId = useId();
+	return /* @__PURE__ */ jsxs("nav", {
+		"aria-label": text.messages,
+		"aria-busy": loading,
+		children: [
+			search && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+				htmlFor: searchId,
+				children: text.search
+			}), /* @__PURE__ */ jsx(TextInput, {
+				id: searchId,
+				type: "search",
+				value: search.value,
+				onValueChange: search.onValueChange
+			})] }),
+			listSummary,
+			loading && /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx("output", { children: text.loading }) }),
+			/* @__PURE__ */ jsx("ul", { children: messages.map((message) => {
+				const state = { selected: message.id === selectedId };
+				return /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx(MessageRow, {
+					selected: state.selected,
+					onSelect: () => onSelect(message.id),
+					children: renderMessage ? renderMessage(message, state) : /* @__PURE__ */ jsxs(Fragment, { children: [
+						/* @__PURE__ */ jsx("span", { children: message.defaultMessage }),
+						" ",
+						/* @__PURE__ */ jsx("code", { children: message.id })
+					] })
+				}), renderMessageActions?.(message, state)] }, message.id);
+			}) }),
+			!loading && messages.length === 0 && /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx("output", { children: text.noMessages }) }),
+			pagination
+		]
+	});
+}
+function SourceMessage({ message, preview, context, labels }) {
+	const { Panel } = useEditorDesignSystem();
+	const text = resolveLabels(labels);
+	return /* @__PURE__ */ jsxs(Panel, {
+		kind: "source",
+		label: text.source,
+		children: [
+			/* @__PURE__ */ jsx("h2", { children: text.source }),
+			/* @__PURE__ */ jsx("code", { children: message.id }),
+			preview ?? /* @__PURE__ */ jsx("pre", { children: message.defaultMessage }),
+			message.description && /* @__PURE__ */ jsx("p", { children: message.description }),
+			context
+		]
+	});
+}
+function TranslationField({ locale, label = locale, source, draft, onSave, actions, preview, labels }) {
+	const { Panel, TextArea, Button } = useEditorDesignSystem();
+	const text = resolveLabels(labels);
+	const id = useId();
+	const errorId = `${id}-error`;
+	const statusId = `${id}-status`;
+	const validation = draft.validationError ? text.validation[draft.validationError] : null;
+	const error = validation ?? draft.saveError?.message;
+	return /* @__PURE__ */ jsxs(Panel, {
+		kind: "translation",
+		label,
+		children: [
+			/* @__PURE__ */ jsx("label", {
+				htmlFor: id,
+				children: label
+			}),
+			/* @__PURE__ */ jsx(TextArea, {
+				id,
+				value: draft.value,
+				onValueChange: draft.setTranslation,
+				"aria-invalid": !!validation,
+				"aria-describedby": error ? `${errorId} ${statusId}` : statusId
+			}),
+			error && /* @__PURE__ */ jsx("p", {
+				id: errorId,
+				role: "alert",
+				children: error
+			}),
+			/* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx("output", {
+				id: statusId,
+				children: draft.isSaving ? text.saving : draft.saved ? text.saved : draft.changed ? text.unsaved : text.unchanged
+			}) }),
+			preview,
+			actions !== void 0 ? actions : /* @__PURE__ */ jsxs("div", { children: [
+				/* @__PURE__ */ jsx(Button, {
+					variant: "secondary",
+					disabled: draft.isSaving,
+					onPress: () => draft.setTranslation(source),
+					children: text.copySource
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					variant: "secondary",
+					disabled: !draft.changed || draft.isSaving,
+					onPress: draft.reset,
+					children: text.reset
+				}),
+				onSave && /* @__PURE__ */ jsx(Button, {
+					variant: "primary",
+					disabled: !draft.changed || !!draft.validationError || draft.isSaving,
+					onPress: onSave,
+					children: draft.isSaving ? text.saving : text.save
+				})
+			] })
+		]
+	});
+}
+/** A stateless composition over caller-owned navigation and locale drafts. */
+function TranslationEditorView({ selectedMessage, selectedId = selectedMessage?.id, translations, filters, context, sourcePreview, notice, sidebar, emptyState, renderTranslations, renderContent, labels, ...list }) {
+	const { Layout } = useEditorDesignSystem();
+	const text = resolveLabels(labels);
+	const fields = selectedMessage ? translations.map((translation) => /* @__PURE__ */ createElement(TranslationField, {
+		...translation,
+		key: `${selectedMessage.id}:${translation.locale}`,
+		source: selectedMessage.defaultMessage,
+		labels: {
+			...labels,
+			...translation.labels,
+			validation: {
+				...labels?.validation,
+				...translation.labels?.validation
+			}
+		}
+	})) : null;
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [notice, selectedMessage ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SourceMessage, {
+		message: selectedMessage,
+		preview: sourcePreview,
+		context,
+		labels
+	}), renderTranslations ? renderTranslations(fields) : fields] }) : emptyState !== void 0 ? emptyState : /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx("output", { children: text.noSelection }) })] });
+	return /* @__PURE__ */ jsx(Layout, {
+		toolbar: filters,
+		navigation: /* @__PURE__ */ jsx(MessageList, {
+			...list,
+			selectedId,
+			labels
+		}),
+		content: renderContent ? renderContent(content) : content,
+		sidebar
+	});
+}
+//#endregion
+export { CopyTextButton, EditorDesignSystemProvider, LocalePicker, MessageContext, MessageList, MessagePreview, SourceMessage, TranslationEditorView, TranslationField, nativeEditorComponents, useEditorDesignSystem };
+
+//# sourceMappingURL=ui.js.map

package/ui.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui.js","names":["defaults","defaults"],"sources":["../design-system.tsx","../locale-picker.tsx","../message-preview.tsx","../copy-text-button.tsx","../message-context.tsx","../ui.tsx"],"sourcesContent":["import {\n  createContext,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  type ComponentType,\n  type ReactNode,\n} from 'react'\nexport interface EditorButtonProps {\n  children: ReactNode\n  /** Called once per activation, without a DOM event; disabled controls must not call it. */\n  onPress: () => void\n  disabled?: boolean\n  variant: 'primary' | 'secondary'\n}\nexport interface EditorInputProps {\n  id: string\n  value: string\n  /** Reports the complete next string value; never a DOM event. */\n  onValueChange: (value: string) => void\n  disabled?: boolean\n  'aria-invalid'?: boolean\n  'aria-describedby'?: string\n}\nexport interface EditorTextInputProps extends EditorInputProps {\n  type: 'text' | 'search'\n}\nexport interface EditorTextAreaProps extends EditorInputProps {\n  /** Visible rows when supported by the control; defaults to six. */\n  rows?: number\n}\nexport interface EditorMessageRowProps {\n  children: ReactNode\n  selected: boolean\n  /** Activates this row without changing controlled selection itself. */\n  onSelect: () => void\n}\nexport interface EditorPanelProps {\n  children: ReactNode\n  label: string\n  kind: 'source' | 'translation'\n}\nexport interface EditorLayoutProps {\n  toolbar: ReactNode\n  navigation: ReactNode\n  content: ReactNode\n  /** Optional secondary content, arranged by the design-system layout. */\n  sidebar?: ReactNode\n}\n/** Define adapters outside render so controls retain focus across edits. */\nexport interface EditorComponents extends Partial<EditorToolComponents> {\n  Button: ComponentType<EditorButtonProps>\n  TextInput: ComponentType<EditorTextInputProps>\n  TextArea: ComponentType<EditorTextAreaProps>\n  MessageRow: ComponentType<EditorMessageRowProps>\n  Panel: ComponentType<EditorPanelProps>\n  Layout: ComponentType<EditorLayoutProps>\n}\nexport interface EditorCheckboxProps {\n  id: string\n  checked: boolean | 'indeterminate'\n  disabled?: boolean\n  onCheckedChange: (checked: boolean) => void\n}\nexport interface EditorLocalePickerLayoutProps {\n  id: string\n  title: string\n  summary: string\n  triggerLabel: string\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  controls: ReactNode\n  /** Contiguous, balanced columns in the caller's locale order. */\n  columns: readonly ReactNode[]\n}\nexport interface EditorPreviewTokenProps {\n  children: ReactNode\n  kind:\n    | 'argument'\n    | 'number'\n    | 'date'\n    | 'time'\n    | 'tag'\n    | 'selector'\n    | 'plural'\n    | 'pound'\n    | 'syntax'\n}\nexport type EditorCopyStatus = 'idle' | 'copying' | 'copied' | 'error'\nexport interface EditorCopyButtonProps {\n  label: string\n  status: EditorCopyStatus\n  disabled: boolean\n  onPress: () => void\n}\nexport interface EditorMetadataProps {\n  label: string\n  children: ReactNode\n}\n/** Optional additions preserve existing complete design-system registries. */\nexport interface EditorToolComponents {\n  Checkbox: ComponentType<EditorCheckboxProps>\n  LocalePickerLayout: ComponentType<EditorLocalePickerLayoutProps>\n  PreviewToken: ComponentType<EditorPreviewTokenProps>\n  CopyButton: ComponentType<EditorCopyButtonProps>\n  Metadata: ComponentType<EditorMetadataProps>\n}\nexport type ResolvedEditorComponents = Required<EditorComponents>\n/** Unstyled native controls; no CSS, icons, or localization provider is required. */\nexport const nativeEditorComponents: ResolvedEditorComponents = {\n  Checkbox: function NativeCheckbox({checked, onCheckedChange, ...props}) {\n    const ref = useRef<HTMLInputElement>(null)\n    useEffect(() => {\n      if (ref.current) ref.current.indeterminate = checked === 'indeterminate'\n    }, [checked])\n    return (\n      <input\n        {...props}\n        ref={ref}\n        type=\"checkbox\"\n        checked={checked === true}\n        aria-checked={checked === 'indeterminate' ? 'mixed' : checked}\n        onChange={event => onCheckedChange(event.target.checked)}\n      />\n    )\n  },\n  LocalePickerLayout: ({\n    id,\n    title,\n    summary,\n    triggerLabel,\n    open,\n    onOpenChange,\n    controls,\n    columns,\n  }) => (\n    <div>\n      <button\n        type=\"button\"\n        aria-label={triggerLabel}\n        aria-expanded={open}\n        aria-controls={id}\n        onClick={() => onOpenChange(!open)}\n      >\n        {summary}\n      </button>\n      <fieldset id={id} hidden={!open}>\n        <legend>{title}</legend>\n        {controls}\n        <div\n          style={{\n            display: 'grid',\n            gridTemplateColumns:\n              'repeat(auto-fit, minmax(min(100%, 16rem), 1fr))',\n            maxHeight: '60vh',\n            overflowY: 'auto',\n          }}\n        >\n          {columns.map((column, index) => (\n            <div key={index}>{column}</div>\n          ))}\n        </div>\n      </fieldset>\n    </div>\n  ),\n  PreviewToken: ({children}) => <code>{children}</code>,\n  CopyButton: ({label, onPress, disabled}) => (\n    <button type=\"button\" disabled={disabled} onClick={() => onPress()}>\n      {label}\n    </button>\n  ),\n  Metadata: ({label, children}) => <aside aria-label={label}>{children}</aside>,\n  Button: ({children, onPress, disabled}) => (\n    <button type=\"button\" disabled={disabled} onClick={() => onPress()}>\n      {children}\n    </button>\n  ),\n  TextInput: ({onValueChange, ...props}) => (\n    <input {...props} onChange={event => onValueChange(event.target.value)} />\n  ),\n  TextArea: ({onValueChange, rows = 6, ...props}) => (\n    <textarea\n      {...props}\n      rows={rows}\n      onChange={event => onValueChange(event.target.value)}\n    />\n  ),\n  MessageRow: ({children, selected, onSelect}) => (\n    <button\n      type=\"button\"\n      aria-current={selected ? 'true' : undefined}\n      onClick={() => onSelect()}\n    >\n      {children}\n    </button>\n  ),\n  Panel: ({children, label}) => (\n    <section aria-label={label}>{children}</section>\n  ),\n  Layout: ({toolbar, navigation, content, sidebar}) => (\n    <div>\n      {toolbar}\n      <div>\n        {navigation}\n        {content}\n        {sidebar}\n      </div>\n    </div>\n  ),\n}\nconst EditorDesignSystemContext = createContext<\n  Readonly<ResolvedEditorComponents>\n>(nativeEditorComponents)\n\nexport interface EditorDesignSystemProviderProps {\n  /** Overrides inherit unspecified components from the nearest provider. */\n  components: Partial<EditorComponents>\n  children: ReactNode\n}\n/** Configure a tree once; sibling providers remain independent. */\nexport function EditorDesignSystemProvider({\n  components,\n  children,\n}: EditorDesignSystemProviderProps): ReactNode {\n  const parent = useEditorDesignSystem()\n  const value = useMemo(\n    () => ({\n      ...parent,\n      ...Object.fromEntries(\n        Object.entries(components).filter(([, value]) => value !== undefined)\n      ),\n    }),\n    [parent, components]\n  )\n  return (\n    <EditorDesignSystemContext value={value}>\n      {children}\n    </EditorDesignSystemContext>\n  )\n}\n/** Read the resolved controls, including native defaults outside a provider. */\nexport function useEditorDesignSystem(): Readonly<ResolvedEditorComponents> {\n  return useContext(EditorDesignSystemContext)\n}\n","import {useId, useState, type ReactNode} from 'react'\nimport {useEditorDesignSystem} from '#packages/editor/design-system.js'\n\nexport interface LocalePickerLabels {\n  title: string\n  empty: string\n  clear: string\n  selectAll: (count: number) => string\n  selected: (count: number) => string\n  trigger: (summary: string) => string\n}\nexport interface LocalePickerProps {\n  locales: readonly string[]\n  selectedLocales: readonly string[]\n  /** Reports unique available locales in their input order; never mutates selection. */\n  onChange: (locales: string[]) => void\n  /** Defaults to the locale code; consumers choose the display language. */\n  getLocaleLabel?: (locale: string) => string\n  labels?: Partial<LocalePickerLabels>\n}\nconst defaults: LocalePickerLabels = {\n  title: 'Locales',\n  empty: 'No locales selected',\n  clear: 'Clear',\n  selectAll: count =>\n    `Select all ${count} ${count === 1 ? 'locale' : 'locales'}`,\n  selected: count => `${count} locales selected`,\n  trigger: summary => `Locales: ${summary}`,\n}\nconst localeCode = (locale: string): string => locale\n\nexport function LocalePicker({\n  locales,\n  selectedLocales,\n  onChange,\n  getLocaleLabel = localeCode,\n  labels,\n}: LocalePickerProps): ReactNode {\n  const {Checkbox, Button, LocalePickerLayout} = useEditorDesignSystem()\n  const id = useId()\n  const [open, setOpen] = useState(false)\n  const available = [...new Set(locales)]\n  const selected = new Set(selectedLocales)\n  const active = available.filter(locale => selected.has(locale))\n  const text = {...defaults, ...labels}\n  const summary =\n    active.length === 0\n      ? text.empty\n      : active.length === 1\n        ? getLocaleLabel(active[0]!)\n        : text.selected(active.length)\n  const all = available.length > 0 && active.length === available.length\n  const midpoint = Math.ceil(available.length / 2)\n  const columns = [available.slice(0, midpoint), available.slice(midpoint)]\n  return (\n    <LocalePickerLayout\n      id={id}\n      title={text.title}\n      summary={summary}\n      triggerLabel={text.trigger(summary)}\n      open={open}\n      onOpenChange={setOpen}\n      controls={\n        <div>\n          <label htmlFor={`${id}-all`}>\n            <Checkbox\n              id={`${id}-all`}\n              disabled={available.length === 0}\n              checked={all ? true : active.length ? 'indeterminate' : false}\n              onCheckedChange={checked => onChange(checked ? available : [])}\n            />\n            {text.selectAll(available.length)}\n          </label>\n          <Button\n            variant=\"secondary\"\n            disabled={active.length === 0}\n            onPress={() => onChange([])}\n          >\n            {text.clear}\n          </Button>\n        </div>\n      }\n      columns={columns.map((column, columnIndex) =>\n        column.map((locale, index) => {\n          const checkboxId = `${id}-${columnIndex}-${index}`\n          return (\n            <label\n              key={locale}\n              htmlFor={checkboxId}\n              style={{display: 'flex', alignItems: 'center', gap: 8}}\n            >\n              <Checkbox\n                id={checkboxId}\n                checked={selected.has(locale)}\n                onCheckedChange={checked =>\n                  onChange(\n                    available.filter(candidate =>\n                      candidate === locale ? checked : selected.has(candidate)\n                    )\n                  )\n                }\n              />\n              {getLocaleLabel(locale)}\n            </label>\n          )\n        })\n      )}\n    />\n  )\n}\n","import {\n  parse,\n  TYPE,\n  type MessageFormatElement,\n} from '@formatjs/icu-messageformat-parser'\nimport {useMemo, type ReactNode} from 'react'\nimport {\n  useEditorDesignSystem,\n  type EditorPreviewTokenProps,\n} from '#packages/editor/design-system.js'\n\nexport interface MessagePreviewProps {\n  message: string\n  /** Customize a parser error without suppressing the alert semantics. */\n  formatError?: (error: Error) => ReactNode\n}\n\n/** Structural ICU preview: shows every branch, without evaluating values or HTML. */\nexport function MessagePreview({\n  message,\n  formatError,\n}: MessagePreviewProps): ReactNode {\n  const {PreviewToken} = useEditorDesignSystem()\n  const parsed = useMemo(() => {\n    try {\n      return {ast: parse(message, {captureLocation: true}), error: null}\n    } catch (error) {\n      return {\n        ast: null,\n        error: error instanceof Error ? error : new Error(String(error)),\n      }\n    }\n  }, [message])\n  if (parsed.error)\n    return (\n      <p role=\"alert\">\n        {formatError ? formatError(parsed.error) : parsed.error.message}\n      </p>\n    )\n  const token = (\n    text: string,\n    kind: EditorPreviewTokenProps['kind'],\n    key: string\n  ): ReactNode => (\n    <PreviewToken key={key} kind={kind}>\n      <bdi dir=\"ltr\">{text}</bdi>\n    </PreviewToken>\n  )\n  const elements = (ast: MessageFormatElement[], prefix: string): ReactNode[] =>\n    ast.flatMap((element, index) => {\n      const key = `${prefix}-${index}`\n      switch (element.type) {\n        case TYPE.literal:\n          return <span key={key}>{element.value}</span>\n        case TYPE.pound:\n          return token('#', 'pound', key)\n        case TYPE.argument:\n        case TYPE.number:\n        case TYPE.date:\n        case TYPE.time:\n          return token(\n            message.slice(\n              element.location!.start.offset,\n              element.location!.end.offset\n            ),\n            TYPE[element.type] as 'argument' | 'number' | 'date' | 'time',\n            key\n          )\n        case TYPE.tag:\n          return [\n            token(`<${element.value}>`, 'tag', `${key}-open`),\n            ...elements(element.children, `${key}-children`),\n            token(`</${element.value}>`, 'tag', `${key}-close`),\n          ]\n        case TYPE.select:\n        case TYPE.plural: {\n          const kind =\n            element.type === TYPE.select\n              ? 'select'\n              : element.pluralType === 'ordinal'\n                ? 'selectordinal'\n                : 'plural'\n          const offset =\n            element.type === TYPE.plural && element.offset\n              ? ` offset:${element.offset}`\n              : ''\n          return [\n            token(\n              `{${element.value}, ${kind},${offset}`,\n              element.type === TYPE.select ? 'selector' : 'plural',\n              `${key}-open`\n            ),\n            ...Object.entries(element.options).flatMap(([selector, option]) => [\n              token(`${selector} {`, 'selector', `${key}-${selector}`),\n              ...elements(option.value, `${key}-${selector}`),\n              token('}', 'syntax', `${key}-${selector}-close`),\n            ]),\n            token('}', 'syntax', `${key}-close`),\n          ]\n        }\n      }\n    })\n  return (\n    <div dir=\"auto\" style={{whiteSpace: 'pre-wrap', overflowWrap: 'anywhere'}}>\n      {elements(parsed.ast!, 'message')}\n    </div>\n  )\n}\n","import {useEffect, useRef, useState, type ReactNode} from 'react'\nimport {\n  useEditorDesignSystem,\n  type EditorCopyStatus,\n} from '#packages/editor/design-system.js'\n\nexport interface CopyTextLabels {\n  copy: (label: string) => string\n  copying: (label: string) => string\n  copied: (label: string) => string\n  failed: (label: string) => string\n}\nexport interface CopyTextButtonProps {\n  value: string\n  label: string\n  disabled?: boolean\n  /** Injectable clipboard boundary; rejects when the write fails. */\n  writeText?: (value: string) => Promise<void>\n  onCopy?: (value: string) => void\n  onError?: (error: Error, value: string) => void\n  feedbackDurationMs?: number\n  labels?: Partial<CopyTextLabels>\n}\nconst defaults: CopyTextLabels = {\n  copy: label => `Copy ${label}`,\n  copying: label => `Copying ${label}…`,\n  copied: label => `Copied ${label}`,\n  failed: label => `Could not copy ${label}`,\n}\nasync function writeClipboard(value: string): Promise<void> {\n  if (typeof navigator === 'undefined' || !navigator.clipboard?.writeText) {\n    throw new Error('Clipboard access is unavailable')\n  }\n  await navigator.clipboard.writeText(value)\n}\n\n/** Copies exact text; feedback belongs to the current value and mounted control. */\nexport function CopyTextButton({\n  value,\n  label,\n  disabled = false,\n  writeText = writeClipboard,\n  onCopy,\n  onError,\n  feedbackDurationMs = 1500,\n  labels,\n}: CopyTextButtonProps): ReactNode {\n  const {CopyButton} = useEditorDesignSystem()\n  const [status, setStatus] = useState<EditorCopyStatus>('idle')\n  const operation = useRef({\n    generation: 0,\n    pending: false,\n    timer: undefined as ReturnType<typeof setTimeout> | undefined,\n  })\n  useEffect(() => {\n    const current = operation.current\n    current.generation++\n    current.pending = false\n    setStatus('idle')\n    clearTimeout(current.timer)\n    return () => {\n      current.generation++\n      clearTimeout(current.timer)\n    }\n  }, [value, writeText])\n  const copy = async (): Promise<void> => {\n    const current = operation.current\n    if (disabled || current.pending) return\n    current.pending = true\n    const request = ++current.generation\n    clearTimeout(current.timer)\n    setStatus('copying')\n    let error: Error | undefined\n    try {\n      await writeText(value)\n    } catch (failure) {\n      error = failure instanceof Error ? failure : new Error(String(failure))\n    }\n    if (request !== current.generation) return\n    current.pending = false\n    setStatus(error ? 'error' : 'copied')\n    current.timer = setTimeout(\n      () => {\n        if (request === current.generation) setStatus('idle')\n      },\n      Math.max(0, feedbackDurationMs)\n    )\n    if (error) onError?.(error, value)\n    else onCopy?.(value)\n  }\n  const text = {...defaults, ...labels}\n  const buttonLabel = (\n    status === 'copying'\n      ? text.copying\n      : status === 'copied'\n        ? text.copied\n        : status === 'error'\n          ? text.failed\n          : text.copy\n  )(label)\n  return (\n    <span>\n      <CopyButton\n        label={buttonLabel}\n        status={status}\n        disabled={disabled || status === 'copying'}\n        onPress={() => {\n          void copy()\n        }}\n      />\n      {status === 'copied' && <output>{text.copied(label)}</output>}\n      {status === 'error' && <span role=\"alert\">{text.failed(label)}</span>}\n    </span>\n  )\n}\n","import type {ReactNode} from 'react'\nimport {useEditorDesignSystem} from '#packages/editor/design-system.js'\nimport {\n  CopyTextButton,\n  type CopyTextButtonProps,\n} from '#packages/editor/copy-text-button.js'\nimport type {EditorMessage, SourceLocation} from '#packages/editor/workflow.js'\n\nexport interface MessageContextLabels {\n  title: string\n  id: string\n  description: string\n  catalogs: string\n  locations: string\n}\nexport interface MessageContextProps {\n  message?: Pick<\n    EditorMessage,\n    'id' | 'description' | 'catalogs' | 'locations'\n  > | null\n  labels?: Partial<MessageContextLabels>\n  copyId?: boolean\n  copyOptions?: Pick<\n    CopyTextButtonProps,\n    'writeText' | 'onCopy' | 'onError' | 'labels' | 'feedbackDurationMs'\n  >\n  /** Default locations are plain text, never file URLs or HTML. */\n  renderLocation?: (location: SourceLocation) => ReactNode\n}\nconst defaults: MessageContextLabels = {\n  title: 'Message context',\n  id: 'Message ID',\n  description: 'Description',\n  catalogs: 'Source catalogs',\n  locations: 'Source locations',\n}\nfunction locationText(location: SourceLocation): string {\n  const start = location.start === undefined ? '' : `:${location.start}`\n  const end =\n    location.end === undefined\n      ? ''\n      : `${location.start === undefined ? ':' : '–'}${location.end}`\n  return `${location.file}${start}${end}`\n}\n\nexport function MessageContext({\n  message,\n  labels,\n  copyId = true,\n  copyOptions,\n  renderLocation = locationText,\n}: MessageContextProps): ReactNode {\n  const {Metadata} = useEditorDesignSystem()\n  const text = {...defaults, ...labels}\n  return (\n    <Metadata label={text.title}>\n      {message && (\n        <dl>\n          <div>\n            <dt>{text.id}</dt>\n            <dd>\n              <code>{message.id}</code>\n              {copyId && (\n                <CopyTextButton\n                  {...copyOptions}\n                  value={message.id}\n                  label={text.id}\n                />\n              )}\n            </dd>\n          </div>\n          {message.description && (\n            <div>\n              <dt>{text.description}</dt>\n              <dd>{message.description}</dd>\n            </div>\n          )}\n          {!!message.catalogs?.length && (\n            <div>\n              <dt>{text.catalogs}</dt>\n              <dd>\n                <ul>\n                  {message.catalogs.map((catalog, index) => (\n                    <li key={index}>{catalog}</li>\n                  ))}\n                </ul>\n              </dd>\n            </div>\n          )}\n          {!!message.locations?.length && (\n            <div>\n              <dt>{text.locations}</dt>\n              <dd>\n                <ul>\n                  {message.locations.map((location, index) => (\n                    <li key={index}>{renderLocation(location)}</li>\n                  ))}\n                </ul>\n              </dd>\n            </div>\n          )}\n        </dl>\n      )}\n    </Metadata>\n  )\n}\n","import {useId, type ReactNode} from 'react'\nimport {useEditorDesignSystem} from '#packages/editor/design-system.js'\nexport {\n  type EditorButtonProps,\n  type EditorInputProps,\n  type EditorTextInputProps,\n  type EditorTextAreaProps,\n  type EditorMessageRowProps,\n  type EditorPanelProps,\n  type EditorLayoutProps,\n  type EditorComponents,\n  type EditorCheckboxProps,\n  type EditorLocalePickerLayoutProps,\n  type EditorPreviewTokenProps,\n  type EditorCopyStatus,\n  type EditorCopyButtonProps,\n  type EditorMetadataProps,\n  type EditorToolComponents,\n  type ResolvedEditorComponents,\n  nativeEditorComponents,\n  type EditorDesignSystemProviderProps,\n  EditorDesignSystemProvider,\n  useEditorDesignSystem,\n} from '#packages/editor/design-system.js'\nexport {\n  type LocalePickerLabels,\n  type LocalePickerProps,\n  LocalePicker,\n} from '#packages/editor/locale-picker.js'\nexport {\n  type MessagePreviewProps,\n  MessagePreview,\n} from '#packages/editor/message-preview.js'\nexport {\n  type CopyTextLabels,\n  type CopyTextButtonProps,\n  CopyTextButton,\n} from '#packages/editor/copy-text-button.js'\nexport {\n  type MessageContextLabels,\n  type MessageContextProps,\n  MessageContext,\n} from '#packages/editor/message-context.js'\nimport type {\n  EditorMessage,\n  TranslationDraftState,\n} from '#packages/editor/workflow.js'\nimport type {TranslationValidationError} from '#packages/editor/validation.js'\n\nexport interface EditorLabels {\n  search: string\n  messages: string\n  source: string\n  noMessages: string\n  noSelection: string\n  loading: string\n  copySource: string\n  reset: string\n  save: string\n  saving: string\n  saved: string\n  unsaved: string\n  unchanged: string\n  validation: Record<TranslationValidationError, string>\n}\nconst defaultLabels: EditorLabels = {\n  search: 'Search messages',\n  messages: 'Messages',\n  source: 'Source message',\n  noMessages: 'No matching messages',\n  noSelection: 'Select a message',\n  loading: 'Loading messages…',\n  copySource: 'Copy source',\n  reset: 'Reset',\n  save: 'Save translation',\n  saving: 'Saving…',\n  saved: 'Translation saved.',\n  unsaved: 'Unsaved changes',\n  unchanged: 'No unsaved changes',\n  validation: {\n    empty: 'Enter a translation before saving.',\n    'invalid-source': 'The source contains invalid ICU syntax.',\n    'invalid-translation': 'The translation contains invalid ICU syntax.',\n    structure:\n      'Preserve ICU arguments, tags, formatting styles, and selector branches.',\n  },\n}\nexport type EditorLabelOverrides = Partial<Omit<EditorLabels, 'validation'>> & {\n  validation?: Partial<EditorLabels['validation']>\n}\nfunction resolveLabels(labels?: EditorLabelOverrides): EditorLabels {\n  return {\n    ...defaultLabels,\n    ...labels,\n    validation: {...defaultLabels.validation, ...labels?.validation},\n  }\n}\ninterface ViewOptions {\n  labels?: EditorLabelOverrides\n}\nexport type EditorViewMessage = Pick<\n  EditorMessage,\n  'id' | 'defaultMessage' | 'description'\n>\nexport interface EditorSearch {\n  value: string\n  onValueChange: (value: string) => void\n}\nexport interface EditorMessageRenderState {\n  selected: boolean\n}\nexport interface MessageListProps<\n  Message extends EditorViewMessage = EditorViewMessage,\n> extends ViewOptions {\n  messages: readonly Message[]\n  selectedId?: string\n  onSelect: (id: string) => void\n  search?: EditorSearch\n  loading?: boolean\n  pagination?: ReactNode\n  /** Summary or controls between search and the loaded rows. */\n  listSummary?: ReactNode\n  /** Noninteractive content inside the design-system selection control. */\n  renderMessage?: (\n    message: Message,\n    state: EditorMessageRenderState\n  ) => ReactNode\n  /** Interactive actions rendered beside, never inside, the selection control. */\n  renderMessageActions?: (\n    message: Message,\n    state: EditorMessageRenderState\n  ) => ReactNode\n}\n/** Controlled list: it never filters, paginates, fetches, or changes selection itself. */\nexport function MessageList<\n  Message extends EditorViewMessage = EditorViewMessage,\n>({\n  messages,\n  selectedId,\n  onSelect,\n  search,\n  loading = false,\n  pagination,\n  listSummary,\n  renderMessage,\n  renderMessageActions,\n  labels,\n}: MessageListProps<Message>): ReactNode {\n  const {TextInput, MessageRow} = useEditorDesignSystem()\n  const text = resolveLabels(labels)\n  const searchId = useId()\n  return (\n    <nav aria-label={text.messages} aria-busy={loading}>\n      {search && (\n        <div>\n          <label htmlFor={searchId}>{text.search}</label>\n          <TextInput\n            id={searchId}\n            type=\"search\"\n            value={search.value}\n            onValueChange={search.onValueChange}\n          />\n        </div>\n      )}\n      {listSummary}\n      {loading && (\n        <p>\n          <output>{text.loading}</output>\n        </p>\n      )}\n      <ul>\n        {messages.map(message => {\n          const state = {selected: message.id === selectedId}\n          return (\n            <li key={message.id}>\n              <MessageRow\n                selected={state.selected}\n                onSelect={() => onSelect(message.id)}\n              >\n                {renderMessage ? (\n                  renderMessage(message, state)\n                ) : (\n                  <>\n                    <span>{message.defaultMessage}</span>{' '}\n                    <code>{message.id}</code>\n                  </>\n                )}\n              </MessageRow>\n              {renderMessageActions?.(message, state)}\n            </li>\n          )\n        })}\n      </ul>\n      {!loading && messages.length === 0 && (\n        <p>\n          <output>{text.noMessages}</output>\n        </p>\n      )}\n      {pagination}\n    </nav>\n  )\n}\nexport interface SourceMessageProps extends ViewOptions {\n  message: EditorViewMessage\n  preview?: ReactNode\n  context?: ReactNode\n}\nexport function SourceMessage({\n  message,\n  preview,\n  context,\n  labels,\n}: SourceMessageProps): ReactNode {\n  const {Panel} = useEditorDesignSystem()\n  const text = resolveLabels(labels)\n  return (\n    <Panel kind=\"source\" label={text.source}>\n      <h2>{text.source}</h2>\n      <code>{message.id}</code>\n      {preview ?? <pre>{message.defaultMessage}</pre>}\n      {message.description && <p>{message.description}</p>}\n      {context}\n    </Panel>\n  )\n}\nexport type TranslationFieldDraft = Pick<\n  TranslationDraftState,\n  | 'value'\n  | 'validationError'\n  | 'changed'\n  | 'isSaving'\n  | 'saveError'\n  | 'saved'\n  | 'setTranslation'\n  | 'reset'\n>\nexport interface TranslationFieldProps extends ViewOptions {\n  locale: string\n  /** Human-readable label; defaults to the locale identifier. */\n  label?: string\n  source: string\n  draft: TranslationFieldDraft\n  /** The caller owns confirmation, context, persistence, and receipt presentation. */\n  onSave?: () => void\n  /** Overrides the default copy/reset/save actions, including with null. */\n  actions?: ReactNode\n  preview?: ReactNode\n}\nexport function TranslationField({\n  locale,\n  label = locale,\n  source,\n  draft,\n  onSave,\n  actions,\n  preview,\n  labels,\n}: TranslationFieldProps): ReactNode {\n  const {Panel, TextArea, Button} = useEditorDesignSystem()\n  const text = resolveLabels(labels)\n  const id = useId()\n  const errorId = `${id}-error`\n  const statusId = `${id}-status`\n  const validation = draft.validationError\n    ? text.validation[draft.validationError]\n    : null\n  const error = validation ?? draft.saveError?.message\n  return (\n    <Panel kind=\"translation\" label={label}>\n      <label htmlFor={id}>{label}</label>\n      <TextArea\n        id={id}\n        value={draft.value}\n        onValueChange={draft.setTranslation}\n        aria-invalid={!!validation}\n        aria-describedby={error ? `${errorId} ${statusId}` : statusId}\n      />\n      {error && (\n        <p id={errorId} role=\"alert\">\n          {error}\n        </p>\n      )}\n      <p>\n        <output id={statusId}>\n          {draft.isSaving\n            ? text.saving\n            : draft.saved\n              ? text.saved\n              : draft.changed\n                ? text.unsaved\n                : text.unchanged}\n        </output>\n      </p>\n      {preview}\n      {actions !== undefined ? (\n        actions\n      ) : (\n        <div>\n          <Button\n            variant=\"secondary\"\n            disabled={draft.isSaving}\n            onPress={() => draft.setTranslation(source)}\n          >\n            {text.copySource}\n          </Button>\n          <Button\n            variant=\"secondary\"\n            disabled={!draft.changed || draft.isSaving}\n            onPress={draft.reset}\n          >\n            {text.reset}\n          </Button>\n          {onSave && (\n            <Button\n              variant=\"primary\"\n              disabled={\n                !draft.changed || !!draft.validationError || draft.isSaving\n              }\n              onPress={onSave}\n            >\n              {draft.isSaving ? text.saving : text.save}\n            </Button>\n          )}\n        </div>\n      )}\n    </Panel>\n  )\n}\nexport type EditorTranslation = Omit<TranslationFieldProps, 'source'>\nexport interface TranslationEditorViewProps<\n  Message extends EditorViewMessage = EditorViewMessage,\n> extends MessageListProps<Message> {\n  /** May be outside the loaded list, e.g. during a server-side page change. */\n  selectedMessage?: EditorViewMessage\n  translations: readonly EditorTranslation[]\n  filters?: ReactNode\n  context?: ReactNode\n  sourcePreview?: ReactNode\n  notice?: ReactNode\n  sidebar?: ReactNode\n  /** Replaces the no-selection status; null suppresses it. */\n  emptyState?: ReactNode\n  /** Wrap the generated locale fields without recreating their wiring. */\n  renderTranslations?: (fields: ReactNode) => ReactNode\n  /** Wrap the entire detail region, including notices and the empty state. */\n  renderContent?: (content: ReactNode) => ReactNode\n}\n/** A stateless composition over caller-owned navigation and locale drafts. */\nexport function TranslationEditorView<\n  Message extends EditorViewMessage = EditorViewMessage,\n>({\n  selectedMessage,\n  selectedId = selectedMessage?.id,\n  translations,\n  filters,\n  context,\n  sourcePreview,\n  notice,\n  sidebar,\n  emptyState,\n  renderTranslations,\n  renderContent,\n  labels,\n  ...list\n}: TranslationEditorViewProps<Message>): ReactNode {\n  const {Layout} = useEditorDesignSystem()\n  const text = resolveLabels(labels)\n  const fields = selectedMessage\n    ? translations.map(translation => (\n        <TranslationField\n          {...translation}\n          key={`${selectedMessage.id}:${translation.locale}`}\n          source={selectedMessage.defaultMessage}\n          labels={{\n            ...labels,\n            ...translation.labels,\n            validation: {\n              ...labels?.validation,\n              ...translation.labels?.validation,\n            },\n          }}\n        />\n      ))\n    : null\n  const content = (\n    <>\n      {notice}\n      {selectedMessage ? (\n        <>\n          <SourceMessage\n            message={selectedMessage}\n            preview={sourcePreview}\n            context={context}\n            labels={labels}\n          />\n          {renderTranslations ? renderTranslations(fields) : fields}\n        </>\n      ) : emptyState !== undefined ? (\n        emptyState\n      ) : (\n        <p>\n          <output>{text.noSelection}</output>\n        </p>\n      )}\n    </>\n  )\n  return (\n    <Layout\n      toolbar={filters}\n      navigation={\n        <MessageList {...list} selectedId={selectedId} labels={labels} />\n      }\n      content={renderContent ? renderContent(content) : content}\n      sidebar={sidebar}\n    />\n  )\n}\n"],"mappings":"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"}