@12-apps/ui 6.7.0 → 6.9.0

package/src/components/data-display/TimingDiagram/TimingDiagram.tsx

@@ -76,6 +76,7 @@ const VIEWS: Record<string, FC<TimingViewProps>> = {
 
 // Main component
 export const TimingDiagram: FC<TimingDiagramProps> = ({
+  copy,
   data,
   showLabels = true,
   height = 40,
@@ -88,9 +89,9 @@ export const TimingDiagram: FC<TimingDiagramProps> = ({
   const View = VIEWS[variant];
 
   return (
-    <DiagramContainer elevation={2} role="region" aria-label="Timing diagram" tabIndex={0}>
+    <DiagramContainer elevation={2} role="region" aria-label={copy.regionLabel} tabIndex={0}>
       <Typography variant="h6" fontWeight="bold" gutterBottom>
-        Request Timing
+        {copy.heading}
       </Typography>
 
       {View && (

package/src/components/data-display/TimingDiagram/TimingDiagram.types.ts

@@ -1,3 +1,4 @@
+import type { TimingDiagramCopy } from '../../../copy';
 // Types
 export interface TimingData {
   dns?: number;
@@ -9,6 +10,8 @@ export interface TimingData {
 }
 
 export interface TimingDiagramProps {
+  /** The region's accessible name and its visible heading. REQUIRED. */
+  copy: TimingDiagramCopy;
   data: TimingData;
   showLabels?: boolean;
   color?: string;

package/src/components/feedback/Sonner/Sonner.tsx

@@ -71,7 +71,16 @@ const trackPromiseWithToasts = async <T,>(
   }
 };
 
-export const SonnerProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+export const SonnerProvider: React.FC<{
+  children: React.ReactNode;
+  /**
+   * The dismiss button's accessible name, for every toast this provider
+   * raises. REQUIRED and mounted ONCE — the shortcut helpers
+   * (`sonner.success(…)`) take a message and nothing else by design, so the
+   * word cannot be a per-call argument without changing what they are for.
+   */
+  dismissLabel: string;
+}> = ({ children, dismissLabel }) => {
   const [toasts, setToasts] = useState<SonnerItem[]>([]);
   const toastCounter = useRef(0);
 
@@ -106,7 +115,7 @@ export const SonnerProvider: React.FC<{ children: React.ReactNode }> = ({ childr
   const makeShortcut = useCallback(
     (type: SonnerProps['type'], extra?: Partial<SonnerProps>) =>
       (message: React.ReactNode, options?: Partial<SonnerProps>) =>
-        addToast({ ...options, ...extra, title: message }, type),
+        addToast({ dismissLabel, ...options, ...extra, title: message }, type),
     [addToast],
   );
 
@@ -306,4 +315,7 @@ export const Toaster: React.FC<{
   expand?: boolean;
   richColors?: boolean;
   closeButton?: boolean;
-}> = ({ children }) => <SonnerProvider>{children}</SonnerProvider>;
+  dismissLabel: string;
+}> = ({ children, dismissLabel }) => (
+  <SonnerProvider dismissLabel={dismissLabel}>{children}</SonnerProvider>
+);

package/src/components/feedback/Sonner/Sonner.types.ts

@@ -4,6 +4,8 @@ export type SonnerVariant = 'default' | 'glass' | 'minimal';
 export type SonnerType = 'default' | 'success' | 'error' | 'warning' | 'info' | 'loading';
 
 export interface SonnerProps {
+  /** The dismiss button's accessible name — it carries a glyph only. REQUIRED. */
+  dismissLabel: string;
   id?: string;
   title?: ReactNode;
   description?: ReactNode;

package/src/components/feedback/Sonner/SonnerToast.tsx

@@ -153,6 +153,7 @@ export const SonnerToast: React.FC<SonnerItem & { onDismiss: (id: string) => voi
   type = 'default',
   variant = 'default',
   closable = true,
+  dismissLabel,
   action,
   cancel,
   icon,
@@ -198,7 +199,7 @@ export const SonnerToast: React.FC<SonnerItem & { onDismiss: (id: string) => voi
           <IconButton
             size="small"
             onClick={handleDismiss}
-            aria-label="Dismiss notification"
+            aria-label={dismissLabel}
             sx={{
               ml: 'auto',
               color: 'text.secondary',

package/src/components/feedback/StackedModal/StackedModal.parts.tsx

@@ -121,6 +121,8 @@ interface ModalHeaderProps {
   /** Deeper than the first panel, so the leading button goes back instead of closing. */
   canGoBack: boolean;
   onBack: () => void;
+  /** The back arrow's accessible name — it carries a glyph only. REQUIRED. */
+  backLabel: string;
   onClose: () => void;
   /** Renders the bar without its ✕ — the panel's content owns the dismiss. */
   hideClose?: boolean;
@@ -135,15 +137,18 @@ interface ModalHeaderProps {
  * all when the panel's content carries its own ✕ (`hideClose`).
  */
 const HeaderLeadingButton: FC<
-  Pick<ModalHeaderProps, 'canGoBack' | 'onBack' | 'onClose' | 'hideClose' | 'rtl' | 'dataTestId'>
-> = ({ canGoBack, onBack, onClose, hideClose, rtl, dataTestId }) => {
+  Pick<
+    ModalHeaderProps,
+    'canGoBack' | 'onBack' | 'backLabel' | 'onClose' | 'hideClose' | 'rtl' | 'dataTestId'
+  >
+> = ({ canGoBack, onBack, backLabel, onClose, hideClose, rtl, dataTestId }) => {
   if (canGoBack) {
     return (
       <IconButton
         edge="start"
         color="inherit"
         onClick={onBack}
-        aria-label="go back"
+        aria-label={backLabel}
         size="small"
         sx={{ transform: rtl ? 'rotate(180deg)' : 'none' }}
         data-testid={testId(dataTestId, 'back-button')}
@@ -174,6 +179,7 @@ export const ModalHeader: FC<ModalHeaderProps> = ({
   onBack,
   onClose,
   hideClose,
+  backLabel,
   headerActions,
   rtl,
   dataTestId,
@@ -183,6 +189,7 @@ export const ModalHeader: FC<ModalHeaderProps> = ({
       <HeaderLeadingButton
         canGoBack={canGoBack}
         onBack={onBack}
+        backLabel={backLabel}
         onClose={onClose}
         hideClose={hideClose}
         rtl={rtl}

package/src/components/feedback/StackedModal/StackedModal.tsx

@@ -59,7 +59,7 @@ type ResolvedProps = StackedModalProps & { modalId: string };
 
 const StackedModalPanel: FC<ResolvedProps> = (props) => {
   const {
-    open, onClose, glass, navigationTitle, hideClose, children, actions, modalId,
+    open, onClose, glass, navigationTitle, backLabel, hideClose, children, actions, modalId,
     closeOnClickOutside, closeOnEsc, loading, loadingText, fullScreen, maxWidth, disableBackdrop,
     disableFocusTrap, keepMounted, rtl, dataTestId,
     'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...otherProps
@@ -105,6 +105,7 @@ const StackedModalPanel: FC<ResolvedProps> = (props) => {
       {...otherProps}
     >
       <ModalPanelContents
+        backLabel={backLabel}
         showSkeleton={showSkeleton}
         loadingText={loadingText}
         titleId={titleId}

package/src/components/feedback/StackedModal/StackedModal.types.ts

@@ -7,6 +7,8 @@ export type ModalPanelRole = 'primary' | 'secondary' | 'background';
 export type PanelMaxWidth = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false;
 
 export interface StackedModalProps {
+  /** The back arrow's accessible name — it carries a glyph only. REQUIRED. */
+  backLabel: string;
   /** Controls the visibility of the modal */
   open: boolean;
   /** Callback fired when the component requests to be closed */

package/src/components/feedback/TutorialOverlay/TutorialOverlay.tsx

@@ -202,7 +202,16 @@ const TutorialTooltip: React.FC<{
   showProgress: boolean;
   animated: boolean;
   requiresActionBeforeNext: boolean;
-}> = ({ tutorial, steps, allowSkip, showProgress, animated, requiresActionBeforeNext }) => (
+  copy: TutorialOverlayProps['copy'];
+}> = ({
+  tutorial,
+  steps,
+  allowSkip,
+  showProgress,
+  animated,
+  requiresActionBeforeNext,
+  copy,
+}) => (
         <Fade in={tutorial.isVisible} timeout={300}>
           <TooltipContainer
             ref={tutorial.tooltipRef}
@@ -218,6 +227,7 @@ const TutorialTooltip: React.FC<{
             data-testid={`tutorial-step-${tutorial.currentStep}`}
           >
             <TutorialStepBody
+              copy={copy}
               step={tutorial.currentStepData}
               currentStep={tutorial.currentStep}
               stepCount={steps.length}
@@ -237,6 +247,7 @@ const TutorialTooltip: React.FC<{
 
 export const TutorialOverlay: FC<TutorialOverlayProps> = (componentProps) => {
   const {
+    copy,
     steps,
     onComplete,
     onSkip,
@@ -280,6 +291,7 @@ export const TutorialOverlay: FC<TutorialOverlayProps> = (componentProps) => {
         />
 
         <TutorialTooltip
+          copy={copy}
           tutorial={{ ...tutorial, currentStepData }}
           steps={steps}
           allowSkip={allowSkip}

package/src/components/feedback/TutorialOverlay/TutorialOverlay.types.ts

@@ -1,3 +1,4 @@
+import type { TutorialCopy } from '../../../copy';
 // Component types
 export interface TutorialStep {
   id: string;
@@ -15,6 +16,8 @@ export interface TutorialStep {
 }
 
 export interface TutorialOverlayProps {
+  /** The tour's four controls. REQUIRED — all four were English literals. */
+  copy: TutorialCopy;
   steps: TutorialStep[];
   onComplete?: () => void;
   onSkip?: () => void;

package/src/components/feedback/TutorialOverlay/TutorialStepBody.tsx

@@ -14,6 +14,7 @@ import {
 import React, {  } from 'react';
 
 import type { TutorialOverlayProps } from './TutorialOverlay.types';
+import type { TutorialCopy } from '../../../copy';
 
 // Animation keyframes
 
@@ -42,6 +43,7 @@ const StepDot = styled(Box, {
 
 // The step's controls: skip/restart on the left, previous/next on the right.
 const TutorialStepNav: React.FC<{
+  copy: TutorialCopy;
   currentStep: number;
   stepCount: number;
   isLastStep: boolean;
@@ -52,6 +54,7 @@ const TutorialStepNav: React.FC<{
   onSkip: () => void;
   onRestart: () => void;
 }> = ({
+  copy,
   currentStep,
   stepCount,
   isLastStep,
@@ -70,7 +73,7 @@ const TutorialStepNav: React.FC<{
           <Stack direction="row" spacing={1}>
             {allowSkip && (
               <Button size="small" onClick={onSkip} variant="text">
-                Skip
+                {copy.skip}
               </Button>
             )}
             {stepCount > 1 && (
@@ -78,7 +81,7 @@ const TutorialStepNav: React.FC<{
                 size="small"
                 onClick={onRestart}
                 disabled={currentStep === 0}
-                title="Restart"
+                title={copy.restart}
               >
                 <RestartIcon fontSize="small" />
               </IconButton>
@@ -94,7 +97,7 @@ const TutorialStepNav: React.FC<{
                 disabled={currentStep === 0}
                 data-testid="tutorial-prev-button"
               >
-                Previous
+                {copy.previous}
               </Button>
             )}
 
@@ -108,7 +111,7 @@ const TutorialStepNav: React.FC<{
                 title={requiresActionBeforeNext ? 'Complete the required action first' : ''}
                 data-testid="tutorial-next-button"
               >
-                Next
+                {copy.next}
               </Button>
             ) : (
               <Button
@@ -175,6 +178,7 @@ const TutorialStepHeader: React.FC<{
 );
 
 export const TutorialStepBody: React.FC<{
+  copy: TutorialCopy;
   step: TutorialOverlayProps['steps'][number];
   currentStep: number;
   stepCount: number;
@@ -188,6 +192,7 @@ export const TutorialStepBody: React.FC<{
   onSkip: () => void;
   onRestart: () => void;
 }> = ({
+  copy,
   step,
   currentStep,
   stepCount,
@@ -239,6 +244,7 @@ export const TutorialStepBody: React.FC<{
         <StepDots currentStep={currentStep} stepCount={stepCount} />
 
         <TutorialStepNav
+          copy={copy}
           currentStep={currentStep}
           stepCount={stepCount}
           isLastStep={isLastStep}

package/src/components/form/AddressAutocomplete/AddressAutocomplete.types.ts

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react';
 
+import type { AddressAutocompleteCopy } from '../../../copy';
 import type { MockPrediction } from './mockPlaces';
 
 /// <reference types="@types/google.maps" />
@@ -27,6 +28,12 @@ export interface AddressDetails {
 }
 
 export interface AddressAutocompleteProps {
+  /**
+   * The field's own three sentences. REQUIRED: this package ships no default
+   * copy, and two of the three are read while the field is unusable because
+   * Google Maps never arrived — the worst moment to speak the wrong language.
+   */
+  copy: AddressAutocompleteCopy;
   variant?: 'glass' | 'outlined' | 'filled';
   label?: string;
   placeholder?: string;

package/src/components/form/AddressAutocomplete/AddressAutocompleteField.tsx

@@ -17,6 +17,7 @@ export type AddressAutocompleteFieldProps = ResolvedAddressProps & AddressAutoco
 
 // The live field, rendered once Google Maps (or the mock stand-in) is ready.
 export const AddressAutocompleteField: FC<AddressAutocompleteFieldProps> = ({
+  copy,
   variant,
   label,
   placeholder,
@@ -62,6 +63,7 @@ export const AddressAutocompleteField: FC<AddressAutocompleteFieldProps> = ({
       )}
       renderInput={(params) => (
         <AddressInputField
+          copy={copy}
           params={params}
           addressVariant={variant}
           label={floating ? undefined : label}

package/src/components/form/AddressAutocomplete/AddressFallbackField.tsx

@@ -6,6 +6,7 @@ import type { AddressAutocompleteProps } from './AddressAutocomplete.types';
 import { AddressTextField } from './AddressTextField';
 
 export interface AddressFallbackFieldProps {
+  copy: AddressAutocompleteProps['copy'];
   variant: AddressAutocompleteProps['variant'];
   label?: string;
   placeholder?: string;
@@ -18,6 +19,7 @@ export interface AddressFallbackFieldProps {
 // Stands in for the Autocomplete before Google Maps is usable: a disabled field
 // that either spins or explains why it never loaded.
 export const AddressFallbackField: FC<AddressFallbackFieldProps> = ({
+  copy,
   variant,
   label,
   placeholder,
@@ -33,7 +35,7 @@ export const AddressFallbackField: FC<AddressFallbackFieldProps> = ({
       <AddressTextField
         addressVariant={variant}
         label={floating ? undefined : label}
-        placeholder="Loading Google Maps..."
+        placeholder={copy.loadingMaps}
         disabled
         fullWidth={fullWidth}
         InputProps={{
@@ -57,7 +59,7 @@ export const AddressFallbackField: FC<AddressFallbackFieldProps> = ({
         InputProps={{ startAdornment }}
       />
       <Alert severity="error" sx={{ mt: 1 }}>
-        Google Maps API failed to load. Please check your API key and internet connection.
+        {copy.mapsLoadFailed}
       </Alert>
     </Box>
   );

package/src/components/form/AddressAutocomplete/AddressInputField.tsx

@@ -7,16 +7,17 @@ import React from 'react';
 import type { AddressAutocompleteProps } from './AddressAutocomplete.types';
 import { AddressTextField } from './AddressTextField';
 
-const CurrentLocationButton: FC<{ disabled: boolean; onClick: () => void }> = ({
-  disabled,
-  onClick,
-}) => (
+const CurrentLocationButton: FC<{
+  disabled: boolean;
+  onClick: () => void;
+  currentLocationLabel: string;
+}> = ({ disabled, onClick, currentLocationLabel }) => (
   <InputAdornment position="end">
     <IconButton
       edge="end"
       onClick={onClick}
       size="small"
-      title="Use current location"
+      title={currentLocationLabel}
       disabled={disabled}
       data-testid="address-current-location-button"
     >
@@ -26,6 +27,7 @@ const CurrentLocationButton: FC<{ disabled: boolean; onClick: () => void }> = ({
 );
 
 export interface AddressInputFieldProps {
+  copy: AddressAutocompleteProps['copy'];
   params: AutocompleteRenderInputParams;
   addressVariant: AddressAutocompleteProps['variant'];
   label?: string;
@@ -41,6 +43,7 @@ export interface AddressInputFieldProps {
 }
 
 export const AddressInputField: FC<AddressInputFieldProps> = ({
+  copy,
   params,
   addressVariant,
   label,
@@ -69,7 +72,11 @@ export const AddressInputField: FC<AddressInputFieldProps> = ({
         <>
           {loading && <CircularProgress color="inherit" size={20} data-testid="address-loading" />}
           {showCurrentLocation && (
-            <CurrentLocationButton disabled={disabled} onClick={onGetCurrentLocation} />
+            <CurrentLocationButton
+              disabled={disabled}
+              onClick={onGetCurrentLocation}
+              currentLocationLabel={copy.useCurrentLocation}
+            />
           )}
           {params.InputProps.endAdornment}
         </>

package/src/components/form/Autocomplete/Autocomplete.parts.tsx

@@ -17,6 +17,7 @@ import React from 'react';
 
 import { highlightLabel, type MatchMode } from './Autocomplete.helpers';
 import type { SuggestionItemState, SuggestionType } from './Autocomplete.types';
+import type { AutocompleteCopy } from '../../../copy';
 
 const StyledPopper = styled(Popper)(({ theme }) => ({
   zIndex: theme.zIndex.tooltip,
@@ -213,13 +214,13 @@ export function DefaultSuggestion<T>({
 }
 
 /** A "Loading…" row shown while async suggestions resolve. */
-export function LoadingRow(): React.JSX.Element {
+export function LoadingRow({ label }: { label: string }): React.JSX.Element {
   return (
     <ListItem>
       <Box display="flex" alignItems="center" gap={1}>
         <CircularProgress size={16} />
         <Typography variant="body2" color="text.secondary">
-          Loading...
+          {label}
         </Typography>
       </Box>
     </ListItem>
@@ -227,11 +228,11 @@ export function LoadingRow(): React.JSX.Element {
 }
 
 /** The empty "No results found" row. */
-export function NoResultsRow(): React.JSX.Element {
+export function NoResultsRow({ label }: { label: string }): React.JSX.Element {
   return (
     <ListItem>
       <Typography variant="body2" color="text.secondary">
-        No results found
+        {label}
       </Typography>
     </ListItem>
   );
@@ -251,6 +252,7 @@ const SAME_WIDTH_MODIFIER = {
 };
 
 export interface SuggestionListBoxProps<T> {
+  copy: AutocompleteCopy;
   open: boolean;
   anchorEl: HTMLElement | null;
   portal: boolean | { container?: HTMLElement };
@@ -272,6 +274,7 @@ export interface SuggestionListBoxProps<T> {
 
 /** The suggestions dropdown: a same-width Popper with the option list + loading/empty rows. */
 export function SuggestionListBox<T>({
+  copy,
   open,
   anchorEl,
   portal,
@@ -328,8 +331,8 @@ export function SuggestionListBox<T>({
               {renderItem(item, index === activeIndex)}
             </ListItem>
           ))}
-          {isLoading && <LoadingRow />}
-          {showNoResults && <NoResultsRow />}
+          {isLoading && <LoadingRow label={copy.loading} />}
+          {showNoResults && <NoResultsRow label={copy.noResults} />}
         </List>
       </Paper>
     </StyledPopper>

package/src/components/form/Autocomplete/Autocomplete.tsx

@@ -54,7 +54,7 @@ function resolveRenderConfig<T>(p: AutocompleteProps<T>): RenderConfig<T> {
     selectedItems: p.selectedItems ?? [],
     isLoading: Boolean(p.isLoading),
     showGhostText: p.showGhostText ?? true,
-    placeholder: p.placeholder ?? 'Type to search...',
+    placeholder: p.placeholder ?? p.copy.placeholder,
     autoFocus: Boolean(p.autoFocus),
     disabled: Boolean(p.disabled),
     portal: p.portal ?? false,
@@ -137,6 +137,7 @@ export const Autocomplete = <T = AutocompleteOption>(props: AutocompleteProps<T>
 
         {s.open && (
           <SuggestionListBox
+            copy={props.copy}
             open={s.open}
             anchorEl={s.inputRef.current}
             portal={cfg.portal}

package/src/components/form/Autocomplete/Autocomplete.types.ts

@@ -1,4 +1,5 @@
 import type React from 'react';
+import type { AutocompleteCopy } from '../../../copy';
 
 /**
  * A suggestion's behavior on select:
@@ -24,6 +25,12 @@ export interface AutocompleteOption<T = unknown> {
 }
 
 export interface AutocompleteProps<T = AutocompleteOption> {
+  /**
+   * The two rows the dropdown shows in place of options — while an async
+   * fetch is in flight, and when it came back empty. REQUIRED: this package
+   * ships no default copy.
+   */
+  copy: AutocompleteCopy;
   /** Controlled input value */
   value: string;
   /** Input value change */

package/src/components/form/Calendar/Calendar.tsx

@@ -23,7 +23,7 @@ const containerSx = (monthsToShow: number): SxProps<Theme> => ({
 
 export const Calendar = React.forwardRef<HTMLDivElement, CalendarProps>((componentProps, ref) => {
   const props = resolveCalendarProps(componentProps);
-  const { monthsToShow, locale, renderHeader, renderFooter, className } = props;
+  const { monthsToShow, locale, renderHeader, renderFooter, className, ariaLabel } = props;
 
   const calendar = useCalendar(props);
 
@@ -48,7 +48,7 @@ export const Calendar = React.forwardRef<HTMLDivElement, CalendarProps>((compone
       ref={ref}
       className={className}
       role="application"
-      aria-label="Calendar"
+      aria-label={ariaLabel}
       tabIndex={0}
       onKeyDown={calendar.handleKeyDown}
       data-testid="calendar-container"

package/src/components/form/Calendar/Calendar.types.ts

@@ -23,6 +23,13 @@ export interface HeaderRenderContext {
 }
 
 export interface CalendarProps {
+  /**
+   * The grid's accessible name. REQUIRED: the container is a
+   * `role="application"`, so a screen reader announces this and nothing else —
+   * and the package cannot know whether it picks a delivery day or a birthday.
+   */
+  ariaLabel: string;
+
   // Mode
   selectionMode?: SelectionMode; // default: 'single'
 

package/src/components/form/CodeEditor/CodeEditor.tsx

@@ -50,7 +50,7 @@ const PlaceholderOverlay = styled(Box)(({ theme }) => ({
   userSelect: 'none' }));
 
 // Monaco editor themes
-const EditorLoading: FC = () => (
+const EditorLoading: FC<{ label: string }> = ({ label }) => (
   <Box
     sx={{
       display: 'flex',
@@ -59,7 +59,7 @@ const EditorLoading: FC = () => (
       height: '100%',
       color: 'text.secondary' }}
   >
-    <Typography variant="body2">Loading editor...</Typography>
+    <Typography variant="body2">{label}</Typography>
   </Box>
 );
 
@@ -116,7 +116,8 @@ export const CodeEditor: FC<CodeEditorProps> = (componentProps) => {
     autoFormat,
     placeholder,
     onSave,
-    dataTestId } = resolveCodeEditorProps(componentProps);
+    dataTestId,
+    copy } = resolveCodeEditorProps(componentProps);
 
   const testId = makeTestId(dataTestId);
   const editor = useCodeEditor({ themeProp, wordWrap, autoFormat, readOnly, onSave });
@@ -132,6 +133,7 @@ export const CodeEditor: FC<CodeEditorProps> = (componentProps) => {
     <EditorContainer elevation={2} data-testid={dataTestId || 'code-editor'}>
       {showToolbar && (
         <EditorToolbar
+          copy={copy}
           language={language}
           readOnly={readOnly}
           isWrapped={editor.isWrapped}
@@ -158,7 +160,7 @@ export const CodeEditor: FC<CodeEditorProps> = (componentProps) => {
           theme={editor.editorTheme}
           options={editorOptions}
           onMount={editor.handleEditorDidMount}
-          loading={<EditorLoading />}
+          loading={<EditorLoading label={copy.loading} />}
         />
       </EditorWrapper>
     </EditorContainer>

package/src/components/form/CodeEditor/CodeEditor.types.ts

@@ -1,10 +1,17 @@
 // Types for CodeEditor component
+import type { CodeEditorCopy } from '../../../copy';
 
 export type EditorLanguage = 'json' | 'javascript' | 'typescript' | 'css' | 'html' | 'yaml' | 'markdown' | 'sql' | 'python';
 
 export type EditorTheme = 'light' | 'dark' | 'auto';
 
 export interface CodeEditorProps {
+  /**
+   * The editor's chrome — the loading line, the read-only badge and the four
+   * toolbar tooltips, which are also those buttons' accessible names.
+   * REQUIRED: this package ships no default copy.
+   */
+  copy: CodeEditorCopy;
   /** Programming language for syntax highlighting */
   language: EditorLanguage;
   /** Editor height (default: '400px') */