@12-apps/ui 6.2.0 → 6.3.0

package/src/components/data-display/DataViews/data-views-bar-controls.tsx

@@ -15,6 +15,7 @@ import FilterAltOffRoundedIcon from "@mui/icons-material/FilterAltOffRounded";
 import { Tooltip } from "@mui/material";
 
 import { Box } from "../../../mui/Box";
+import { useDataViewsCopy } from "./data-views-copy-context";
 
 /**
  * "Limpar" — one gesture back to the unfiltered list.
@@ -38,6 +39,7 @@ export function ClearAllControl({
   compact: boolean;
   testIdPrefix: string;
 }): React.JSX.Element {
+  const copy = useDataViewsCopy();
   // No border, no fill. Every other control on this row is an outlined pill
   // because it OPENS something; this one is an escape hatch, and giving it the
   // same weight made it read as a sixth filter. Quiet until hovered.
@@ -47,7 +49,7 @@ export function ClearAllControl({
       type="button"
       onClick={onClearAll}
       data-testid={`${testIdPrefix}-clear-all`}
-      aria-label="Limpar filtros"
+      aria-label={copy.filters.clearAll}
       sx={{
         display: "inline-flex",
         alignItems: "center",
@@ -66,10 +68,10 @@ export function ClearAllControl({
       }}
     >
       <FilterAltOffRoundedIcon sx={{ fontSize: 16 }} />
-      {!compact && <Box component="span">Limpar</Box>}
+      {!compact && <Box component="span">{copy.filters.clear}</Box>}
     </Box>
   );
-  return compact ? <Tooltip title="Limpar filtros">{button}</Tooltip> : button;
+  return compact ? <Tooltip title={copy.filters.clearAll}>{button}</Tooltip> : button;
 }
 
 /**
@@ -91,13 +93,14 @@ export function CloseSearchControl({
   onClose: () => void;
   testIdPrefix: string;
 }): React.JSX.Element {
+  const copy = useDataViewsCopy();
   return (
-    <Tooltip title="Fechar busca">
+    <Tooltip title={copy.search.close}>
       <Box
         component="button"
         type="button"
         onClick={onClose}
-        aria-label="Fechar busca"
+        aria-label={copy.search.close}
         data-testid={`${testIdPrefix}-search-close`}
         sx={{
           display: "inline-flex",

package/src/components/data-display/DataViews/data-views-category-pill.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useDataViewsCopy } from "./data-views-copy-context";
 import { CategorySelect } from "../../form/CategorySelect";
 import { MultiSelectDropdown } from "../../layout/ContentToolbar";
 
@@ -65,10 +66,12 @@ export function PillControl<T extends Record<string, unknown>>({
   testIdPrefix,
   layout = "pill",
 }: PillControlProps<T>): React.JSX.Element {
+  const copy = useDataViewsCopy();
   const testId = `${testIdPrefix}-filter-${fieldId}`;
   if (pill.control === "category") {
     return (
       <CategorySelect
+        copy={copy.categorySelect}
         placeholder={pill.label}
         label={layout === "stacked" ? pill.label : undefined}
         fullWidth={layout === "stacked"}
@@ -86,10 +89,10 @@ export function PillControl<T extends Record<string, unknown>>({
       selected={new Set(selected)}
       onToggle={(value, checked) => onTogglePill(fieldId, value, checked)}
       onClear={() => onClearField(fieldId)}
-      allLabel="Todas"
+      allLabel={copy.filters.allOption}
       searchable={pill.searchEnabled ? true : undefined}
-      searchPlaceholder="Buscar…"
-      noResultsLabel="Nenhum resultado"
+      searchPlaceholder={copy.filters.optionSearchPlaceholder}
+      noResultsLabel={copy.filters.optionsEmpty}
       layout={layout}
       onOpenChange={onOpenChange}
       data-testid={testId}

package/src/components/data-display/DataViews/data-views-columns-tab.tsx

@@ -6,6 +6,7 @@ import DragIndicatorRoundedIcon from "@mui/icons-material/DragIndicatorRounded";
 import { Checkbox } from "@mui/material";
 import { useState } from "react";
 
+import { useDataViewsCopy } from "./data-views-copy-context";
 import { Box } from "../../../mui/Box";
 import { Text } from "../../typography/Text";
 
@@ -51,6 +52,7 @@ export function ColumnsTab({
   onReset,
   testIdPrefix,
 }: ColumnsTabProps): React.JSX.Element {
+  const copy = useDataViewsCopy();
   const [dragId, setDragId] = useState<string | null>(null);
   const byId = new Map(columns.map((column) => [column.id, column]));
   const ordered = order.map((id) => byId.get(id)).filter((column): column is HideableColumn => Boolean(column));
@@ -72,12 +74,12 @@ export function ColumnsTab({
       <Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", px: 1.5, py: 1 }}>
         <Text variant="caption" as="span">
           <Box component="span" sx={{ color: "text.secondary" }} data-testid={`${testIdPrefix}-columns-count`}>
-            <strong>{visibleHideableCount}</strong> de {columns.length} visíveis
+            {copy.columns.visibleCount(visibleHideableCount, columns.length)}
           </Box>
         </Text>
         <Box sx={{ display: "flex", gap: 1 }}>
-          <LinkButton label="Mostrar todas" onClick={onShowAll} testId={`${testIdPrefix}-columns-show-all`} />
-          <LinkButton label="Padrão" onClick={onReset} testId={`${testIdPrefix}-columns-reset`} muted />
+          <LinkButton label={copy.columns.showAll} onClick={onShowAll} testId={`${testIdPrefix}-columns-show-all`} />
+          <LinkButton label={copy.columns.reset} onClick={onReset} testId={`${testIdPrefix}-columns-reset`} muted />
         </Box>
       </Box>
       <Text variant="caption" as="p">

package/src/components/data-display/DataViews/data-views-copy-context.tsx

@@ -0,0 +1,43 @@
+import { createContext, useContext, type JSX, type ReactNode } from "react";
+
+import type { DataViewsCopy } from "./data-views-copy";
+
+/**
+ * The words this component family renders, put in scope once by the host.
+ *
+ * Context rather than a prop per component for the same reason
+ * `data-views-layout-context` uses one: the nineteen files here are a single
+ * surface mounted once, and threading words through leaves a host never names
+ * is the prop-drilling context exists to avoid.
+ */
+const DataViewsCopyContext = createContext<DataViewsCopy | null>(null);
+
+export function DataViewsCopyProvider({
+  copy,
+  children,
+}: {
+  copy: DataViewsCopy;
+  children: ReactNode;
+}): JSX.Element {
+  return <DataViewsCopyContext.Provider value={copy}>{children}</DataViewsCopyContext.Provider>;
+}
+
+/**
+ * The copy in scope.
+ *
+ * THROWS outside a provider rather than falling back. There is no meaningful
+ * empty answer: a saved-views dialog with no words is broken, and any default
+ * would be the origin host's Portuguese — which is the exact thing this config
+ * exists to stop being silent. Failing at the first render names the wiring
+ * mistake; blank buttons would hide it.
+ */
+export function useDataViewsCopy(): DataViewsCopy {
+  const copy = useContext(DataViewsCopyContext);
+  if (!copy) {
+    throw new Error(
+      "DataViews components must be rendered inside <DataViewsCopyProvider copy={…}>. " +
+        "@12-apps/ui ships no default copy; pass PT_BR_DATA_VIEWS_COPY to keep the pt-BR wording.",
+    );
+  }
+  return copy;
+}

package/src/components/data-display/DataViews/data-views-copy.ts

@@ -0,0 +1,214 @@
+import type { CategorySelectCopy, ConfirmActionCopy } from "../../../copy";
+import type { SavedViewsLabels } from "../../layout/ContentToolbar/ContentToolbar.types";
+/**
+ * Every word the DataViews family renders, as REQUIRED host config (FUT-760).
+ *
+ * Nineteen files in this one component tree carried pt-BR — the saved-view
+ * dialogs, the display tabs, the column and filter panels, the selection strip,
+ * the nav. A design system shipping product copy is the leak at its most
+ * expensive: `@12-apps/ui` is the package every host renders, so its Portuguese
+ * reached every adopter of every OTHER package too.
+ *
+ * ONE object threaded through a context rather than a prop per component,
+ * because these nineteen files are a single surface a host mounts once, and
+ * `data-views-layout-context.tsx` already establishes that shape here for
+ * layout. A prop per leaf would make a host thread words through components it
+ * never names.
+ */
+
+/** What the board's per-page footnote says about counts and sums. */
+export interface DataViewsBoardCopy {
+  countOnPage(label: string, count: number): string;
+  onThisPage(count: number): string;
+  pageSum(sum: string): string;
+  /** Why the figures below are not the whole set. */
+  pageScopeNote: string;
+}
+
+export interface DeleteViewCopy {
+  title: string;
+  /** Shown only when the view is shared with the team. */
+  sharedWarning: string;
+  /** `entityLabel` is the host's own noun for the rows — never this package's. */
+  rowsUnaffected(entityLabel: string): string;
+  confirm: string;
+}
+
+export interface ManageViewsCopy {
+  title: string;
+  empty: string;
+  defaultTag: string;
+  otherUserTag: string;
+  deleteTitle: string;
+  deleteBody: string;
+  deleteConfirm: string;
+}
+
+export interface SaveViewCopy {
+  sharedDescription: string;
+  setDefaultTitle: string;
+  setDefaultDescription: string;
+  previewHeading: string;
+  /** The view would be identical to the unsaved default. */
+  previewUnchanged: string;
+  sortRowLabel: string;
+  saveFailed: string;
+  titleEditing: string;
+  titleCreating: string;
+  descriptionLabel: string;
+  descriptionPlaceholder: string;
+  submitEditing: string;
+  submitCreating: string;
+  nameLabel: string;
+  /** The dialog's way out, beside the submit. */
+  cancel: string;
+  /** The pin toggle. Its share twin reuses `sharedDescription` below. */
+  pinnedTitle: string;
+  pinnedDescription: string;
+  sharedTitle: string;
+  /** An example of a view worth saving, in the host's own domain. */
+  namePlaceholder: string;
+  /** The two rows of the preview block. */
+  previewFilters: string;
+  previewHiddenColumns: string;
+}
+
+export interface DataViewsColumnsCopy {
+  visibleCount(visible: number, total: number): string;
+  reset: string;
+  showAll: string;
+}
+
+export interface DataViewsDisplayCopy {
+  /** The three tabs of the display panel. */
+  sortTab: string;
+  columnsTab: string;
+  panelTab: string;
+  direction: string;
+  /** What each layout is good for, keyed by layout id. */
+  layoutHints: Readonly<Record<string, string>>;
+  /**
+   * What density MEANS in each layout — same three values, three different
+   * questions. A table's is how tall its rows are, a card grid's is how many
+   * fit on a line, a board's is how wide its columns are.
+   */
+  densityHeadings: Readonly<Record<string, string>>;
+  /**
+   * Density words per layout. They differ by layout on purpose: "Baixa" density
+   * on a table and "Muitos" cards describe the same setting from the reader's
+   * side, which is the register this surface is written in.
+   */
+  densityLabels: Readonly<Record<string, Readonly<Record<string, string>>>>;
+  /** The board layout needs stages, and this screen declares none. */
+  boardUnavailable: string;
+  /** Density is unavailable because the viewport only fits one card per row. */
+  densityUnavailableNarrow: string;
+  /** The control that opens this panel. */
+  trigger: string;
+}
+
+export interface DataViewsExportCopy {
+  /** Format labels and hints, keyed by format id. */
+  formats: Readonly<Record<string, { label: string; hint: string }>>;
+  visibleColumns(columnCount: number): string;
+  /** The control that opens the menu. */
+  trigger: string;
+}
+
+export interface DataViewsGridCopy {
+  /** The per-row kebab's accessible name. */
+  rowActions: string;
+  bulkActions(selectedCount: number): string;
+}
+
+export interface DataViewsFiltersCopy {
+  moreFilters(count: number): string;
+  moreFiltersApplied(count: number, appliedCount: number): string;
+  overflowNote: string;
+  rangeEnd: string;
+  rangeInvalid: string;
+  /** The day-range presets' labels, keyed by preset id. */
+  rangePresets: Readonly<Record<string, string>>;
+  scopesLabel: string;
+  /** The slide-in panel, and the button that opens it. */
+  panelTitle: string;
+  /** Drop every applied filter. Two spellings: the bar has room for one word. */
+  clear: string;
+  clearAll: string;
+  /** Drop one range filter, named. */
+  clearRange(label: string): string;
+  /** The multi-select dropdowns this surface mounts. */
+  allOption: string;
+  optionSearchPlaceholder: string;
+  optionsEmpty: string;
+}
+
+export interface DataViewsSelectionCopy {
+  selectAllOnPage: string;
+  clearSelection: string;
+  selectAll: string;
+  onThisPage(count: number): string;
+  /** One row's checkbox, which carries no visible label of its own. */
+  selectRow: string;
+}
+
+export interface DataViewsNavCopy {
+  mainView: string;
+  defaultTag: string;
+  viewOptions(viewName: string): string;
+  emptyHint: string;
+  setDefault: string;
+  deleteView: string;
+  unsavedChanges: string;
+  label: string;
+  update: string;
+  save: string;
+  /** The inline error when a view could not be refreshed or saved. */
+  updateFailed: string;
+  saveFailed: string;
+  /** Reopen the save dialog over an existing view. */
+  editView: string;
+  pinToSidebar: string;
+  shareWithTeam: string;
+}
+
+/** The search box on the toolbar, and the one inside the filter panel. */
+export interface DataViewsSearchCopy {
+  placeholder: string;
+  /** The input's accessible name — it says what the term is matched against. */
+  allColumnsLabel: string;
+  /** The panel's keyword box, which commits on Enter rather than as you type. */
+  keywordPlaceholder: string;
+  /** The icon button that reveals the input on a narrow bar. */
+  open: string;
+  close: string;
+  clear: string;
+}
+
+/** Every word this component family renders, in one object a host passes once. */
+export interface DataViewsCopy {
+  /**
+   * The words of the components this surface RENDERS but does not own — the
+   * saved-views menu, the confirm dialog behind a delete, the category pill.
+   *
+   * Here rather than threaded as props because this surface already carries a
+   * copy context: a host mounting DataViews should pass one object, not one per
+   * leaf it never names. Each of those components still takes its own copy when
+   * mounted standalone.
+   */
+  savedViewsMenu: SavedViewsLabels;
+  confirmAction: ConfirmActionCopy;
+  categorySelect: CategorySelectCopy;
+  board: DataViewsBoardCopy;
+  deleteView: DeleteViewCopy;
+  manageViews: ManageViewsCopy;
+  saveView: SaveViewCopy;
+  columns: DataViewsColumnsCopy;
+  display: DataViewsDisplayCopy;
+  export: DataViewsExportCopy;
+  grid: DataViewsGridCopy;
+  filters: DataViewsFiltersCopy;
+  selection: DataViewsSelectionCopy;
+  nav: DataViewsNavCopy;
+  search: DataViewsSearchCopy;
+}

package/src/components/data-display/DataViews/data-views-display-panel.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import type { DataViewsCopy } from "./data-views-copy";
 import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
 // Says "display settings" rather than the generic tune sliders it used to
 // share with the "Mais" FILTER trigger — see the note there.
@@ -7,6 +8,7 @@ import DisplaySettingsRoundedIcon from "@mui/icons-material/DisplaySettingsRound
 import { Popover } from "@mui/material";
 import { useState } from "react";
 
+import { useDataViewsCopy } from "./data-views-copy-context";
 import { Button } from "../../form/Button";
 import { Box } from "../../../mui/Box";
 
@@ -39,11 +41,13 @@ import type { DataViewsController } from "./use-data-views-state";
 /** Which tab is showing. `columns` first: it is what an operator opens this for. */
 type DisplayTabKey = "sort" | "columns" | "display";
 
-const TABS: { key: DisplayTabKey; label: string }[] = [
-  { key: "sort", label: "Ordenar" },
-  { key: "columns", label: "Colunas" },
-  { key: "display", label: "Exibição" },
-];
+function displayTabs(copy: DataViewsCopy): { key: DisplayTabKey; label: string }[] {
+  return [
+    { key: "sort", label: copy.display.sortTab },
+    { key: "columns", label: copy.display.columnsTab },
+    { key: "display", label: copy.display.panelTab },
+  ];
+}
 
 /** The saved-view chrome the panel brackets its tabs with, when a host supplies it. */
 export interface DisplayPanelView {
@@ -89,9 +93,10 @@ function PanelTabs({
   muted?: boolean;
   testIdPrefix: string;
 }): React.JSX.Element {
+  const copy = useDataViewsCopy();
   return (
     <Box sx={{ display: "flex", gap: 0.5, p: 0.75, bgcolor: "action.hover", borderBottom: 1, borderColor: "divider" }}>
-      {TABS.map((entry) => {
+      {displayTabs(copy).map((entry) => {
         const active = tab === entry.key && !muted;
         return (
         <Box
@@ -258,6 +263,7 @@ function DisplayTrigger({
   onOpen: (anchor: HTMLElement) => void;
   testIdPrefix: string;
 }): React.JSX.Element {
+  const copy = useDataViewsCopy();
   return (
     <Button
       variant="outline"
@@ -265,14 +271,14 @@ function DisplayTrigger({
       color="neutral"
       onClick={(event) => onOpen(event.currentTarget as HTMLElement)}
       dataTestId={`${testIdPrefix}-display-trigger`}
-      aria-label="Exibir"
-      title={compact ? "Exibir" : undefined}
+      aria-label={copy.display.trigger}
+      title={compact ? copy.display.trigger : undefined}
     >
       <Box component="span" sx={{ display: "inline-flex", alignItems: "center", gap: 0.5 }}>
         <DisplaySettingsRoundedIcon fontSize="small" />
         {!compact && (
           <Box component="span" sx={{ display: { xs: "none", sm: "inline" } }}>
-            Exibir
+            {copy.display.trigger}
           </Box>
         )}
         {dirty && (

package/src/components/data-display/DataViews/data-views-display-tabs.tsx

@@ -1,10 +1,12 @@
 "use client";
 
+import type { DataViewsCopy } from "./data-views-copy";
 import ArrowDownwardRoundedIcon from "@mui/icons-material/ArrowDownwardRounded";
 import ArrowUpwardRoundedIcon from "@mui/icons-material/ArrowUpwardRounded";
 import { useMediaQuery } from "@mui/material";
 import type { Theme } from "@mui/material";
 
+import { useDataViewsCopy } from "./data-views-copy-context";
 import type { SortFieldDefinition } from "../../layout/ContentToolbar";
 import { Box } from "../../../mui/Box";
 import { Text } from "../../typography/Text";
@@ -121,12 +123,13 @@ export function SortTab({
   sortKinds,
   testIdPrefix,
 }: SortTabProps): React.JSX.Element {
+  const copy = useDataViewsCopy();
   const [ascLabel, descLabel] = directionLabels(sortKinds?.[activeField]);
   return (
     <Box sx={{ p: 1 }}>
       <Text variant="caption" as="p">
         <Box component="span" sx={{ px: 0.5, color: "text.secondary" }}>
-          Direção
+          {copy.display.direction}
         </Box>
       </Text>
       <Box sx={{ display: "flex", gap: 0.75, mb: 1.5, mt: 0.5 }}>
@@ -214,13 +217,6 @@ function SortFieldRow({
 
 /* ── Exibição ────────────────────────────────────────────────────────────── */
 
-/** One line of copy per layout, saying what it is FOR rather than what it is. */
-const LAYOUT_HINTS: Record<DataViewsLayout, string> = {
-  table: "Colunas comparáveis, boa para varrer números.",
-  list: "Uma linha por item, com os dados principais.",
-  cards: "Blocos maiores, bom para poucos itens.",
-  board: "Colunas por etapa, para acompanhar o que está onde.",
-};
 
 /**
  * What density MEANS in each layout — same three values, three different
@@ -229,29 +225,21 @@ const LAYOUT_HINTS: Record<DataViewsLayout, string> = {
  * tile labels change with the layout because "Alta" over a board is meaningless
  * where "Larga" is not.
  */
-const DENSITY_HEADINGS: Record<DataViewsLayout, string> = {
-  table: "Altura das linhas",
-  list: "Altura das linhas",
-  cards: "Cards por linha",
-  board: "Largura das colunas",
-};
 
-const DENSITY_LABELS: Record<DataViewsLayout, Record<DataViewsDensity, string>> = {
-  table: { compact: "Baixa", cozy: "Média", comfortable: "Alta" },
-  list: { compact: "Baixa", cozy: "Média", comfortable: "Alta" },
-  cards: { compact: "Muitos", cozy: "Médio", comfortable: "Poucos" },
-  board: { compact: "Estreita", cozy: "Média", comfortable: "Larga" },
-};
 
 /** The density tiles, phrased for whichever layout is on screen. */
 function densityTiles(
   layout: DataViewsLayout,
+  copy: DataViewsCopy,
 ): { value: DataViewsDensity; label: string; gap: number; columns: number }[] {
-  const labels = DENSITY_LABELS[layout];
+  // A layout the pack does not key falls back to the table's words rather
+  // than rendering three blank tiles — a host adding a layout should still see
+  // a usable control while it writes the labels for it.
+  const labels = copy.display.densityLabels[layout] ?? copy.display.densityLabels.table;
   return [
-    { value: "compact", label: labels.compact, gap: 2, columns: 4 },
-    { value: "cozy", label: labels.cozy, gap: 5, columns: 3 },
-    { value: "comfortable", label: labels.comfortable, gap: 8, columns: 2 },
+    { value: "compact", label: labels?.compact ?? "compact", gap: 2, columns: 4 },
+    { value: "cozy", label: labels?.cozy ?? "cozy", gap: 5, columns: 3 },
+    { value: "comfortable", label: labels?.comfortable ?? "comfortable", gap: 8, columns: 2 },
   ];
 }
 
@@ -294,6 +282,7 @@ const LAYOUT_TILE_LABELS: Record<DataViewsLayout, string> = {
  * so rather than vanishing, for the same reason as the board note below it.
  */
 function DensityTiles({ testIdPrefix }: { testIdPrefix: string }): React.JSX.Element {
+  const copy = useDataViewsCopy();
   const { layout, density, setDensity } = useDataViewsLayout();
   // Matches the card grid's own `xs: "1fr"` track, so the control and the thing
   // it controls agree on where density stops meaning anything.
@@ -302,14 +291,14 @@ function DensityTiles({ testIdPrefix }: { testIdPrefix: string }): React.JSX.Ele
     return (
       <Text variant="caption" as="p">
         <Box component="span" sx={{ px: 0.5, pt: 0.5, display: "block", color: "text.disabled" }}>
-          Um card por linha nesta largura — a densidade volta em telas maiores.
+          {copy.display.densityUnavailableNarrow}
         </Box>
       </Text>
     );
   }
   return (
     <Box sx={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0.75, mt: 0.5 }}>
-      {densityTiles(layout).map((tile) => (
+      {densityTiles(layout, copy).map((tile) => (
         <Tile
           key={tile.value}
           active={density === tile.value}
@@ -325,6 +314,7 @@ function DensityTiles({ testIdPrefix }: { testIdPrefix: string }): React.JSX.Ele
 }
 
 export function DisplayTab({ testIdPrefix }: { testIdPrefix: string }): React.JSX.Element {
+  const copy = useDataViewsCopy();
   const { layout, setLayout, canUseCards, canUseList, canUseBoard } = useDataViewsLayout();
   const available: DataViewsLayout[] = [
     "table",
@@ -361,7 +351,7 @@ export function DisplayTab({ testIdPrefix }: { testIdPrefix: string }): React.JS
       </Box>
       <Text variant="caption" as="p">
         <Box component="span" sx={{ px: 0.5, py: 1, display: "block", color: "text.disabled" }}>
-          {LAYOUT_HINTS[layout]}
+          {copy.display.layoutHints[layout]}
         </Box>
       </Text>
       {/* Every layout gets this, the board included. It used to be hidden on
@@ -370,14 +360,14 @@ export function DisplayTab({ testIdPrefix }: { testIdPrefix: string }): React.JS
           control that broke rather than one that does not apply. */}
       <Text variant="caption" as="p">
         <Box component="span" sx={{ px: 0.5, color: "text.secondary" }}>
-          {DENSITY_HEADINGS[layout]}
+          {copy.display.densityHeadings[layout]}
         </Box>
       </Text>
       <DensityTiles testIdPrefix={testIdPrefix} />
       {!canUseBoard && (
         <Text variant="caption" as="p">
           <Box component="span" sx={{ px: 0.5, pt: 1.25, display: "block", color: "text.disabled" }}>
-            Esta tela não declara etapas, então não oferece quadro.
+            {copy.display.boardUnavailable}
           </Box>
         </Text>
       )}

package/src/components/data-display/DataViews/data-views-export.tsx

@@ -5,6 +5,7 @@ import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownR
 import { CircularProgress, Popover } from "@mui/material";
 import { useState } from "react";
 
+import { useDataViewsCopy } from "./data-views-copy-context";
 import { Button } from "../../form/Button";
 import { Box } from "../../../mui/Box";
 import { Text } from "../../typography/Text";
@@ -55,11 +56,6 @@ export interface DataViewExport {
 }
 
 /** One line per format: what it is, and when to reach for it. */
-const FORMAT_COPY: Record<DataViewExportFormat, { label: string; hint: string }> = {
-  xlsx: { label: "Excel (.xlsx)", hint: "Abre direto, com as colunas dimensionadas" },
-  csv: { label: "CSV (.csv)", hint: "Para importar em outro sistema" },
-  json: { label: "JSON (.json)", hint: "Para integrações" },
-};
 
 const ALL_FORMATS: DataViewExportFormat[] = ["xlsx", "csv", "json"];
 
@@ -97,6 +93,7 @@ function ExportTrigger({
   /** Icon only — step 2 of the toolbar's degradation ladder. */
   compact?: boolean;
 }): React.JSX.Element {
+  const copy = useDataViewsCopy();
   return (
     <Button
       variant="outline"
@@ -105,9 +102,9 @@ function ExportTrigger({
       disabled={busy}
       onClick={(event) => onOpen(event.currentTarget as HTMLElement)}
       dataTestId={`${testIdPrefix}-export-trigger`}
-      aria-label="Exportar"
+      aria-label={copy.export.trigger}
       // The label is gone, so the tooltip is the only thing naming the control.
-      title={compact ? "Exportar" : undefined}
+      title={compact ? copy.export.trigger : undefined}
     >
       <Box component="span" sx={{ display: "inline-flex", alignItems: "center", gap: 0.5 }}>
         {busy ? <CircularProgress size={14} /> : <DownloadRoundedIcon fontSize="small" />}
@@ -133,6 +130,7 @@ function FormatRow({
   onPick: () => void;
   testIdPrefix: string;
 }): React.JSX.Element {
+  const copy = useDataViewsCopy();
   return (
     <Box
       component="button"
@@ -155,10 +153,10 @@ function FormatRow({
       }}
     >
       <Box component="span" sx={{ fontSize: "0.8125rem" }}>
-        {FORMAT_COPY[format].label}
+        {copy.export.formats[format]?.label ?? format}
       </Box>
       <Box component="span" sx={{ fontSize: "0.6875rem", color: "text.disabled" }}>
-        {FORMAT_COPY[format].hint}
+        {copy.export.formats[format]?.hint ?? ""}
       </Box>
     </Box>
   );
@@ -180,6 +178,7 @@ function ExportPanel({
   onPick: (format: DataViewExportFormat) => void;
   testIdPrefix: string;
 }): React.JSX.Element {
+  const copy = useDataViewsCopy();
   return (
     <Box data-testid={`${testIdPrefix}-export-panel`}>
       <Box sx={{ px: 1.5, pt: 1, pb: 1, borderBottom: 1, borderColor: "divider" }}>
@@ -190,7 +189,7 @@ function ExportPanel({
         </Text>
         <Text variant="caption" as="p">
           <Box component="span" sx={{ color: "text.disabled" }}>
-            {columnCount} colunas visíveis, na ordem atual
+            {copy.export.visibleColumns(columnCount)}
           </Box>
         </Text>
       </Box>