@tensor_1/react 2.19.2 → 2.21.0

package/README.md

@@ -191,4 +191,18 @@ Radial mode still shortens long labels to fit its ring, but every node carries i
 <TabPanel value="history" keepMounted>{history}</TabPanel>
 ```
 
+### Scrolling tabs, toned stat tiles and copying
+
+- **`Tabs overflow="scroll"`** keeps a long tab row on one line that scrolls sideways. The selected tab is always scrolled into view, and edge buttons appear only on the side that has hidden tabs. The buttons are pointer-only: keyboard users move with Arrow, Home and End. Combine it with `TabPanel keepMounted` on a record page with many sections.
+- **`Stat tone`** (`warning`, `danger`) draws a toned outline and value; the label stays muted, so the tone never replaces words. `size="compact"` fits dense fact bands.
+- **`Stat onActivate`** makes the whole tile a button that opens an editor (`aria-haspopup="dialog"`). Pass `activateLabel` (e.g. "change") so the name reads "Priority: P1, change", and `expanded` while the editor is open. The ref points at the button, for anchoring a popover.
+- **`CopyButton`** copies `value`. Name it for what it copies (`label="Copy email"`), pass `copiedLabel`, and pass `failedLabel` so a refused copy is explained rather than silent.
+
+```tsx
+<Tabs value={tab} onChange={setTab} overflow="scroll">{tabs}</Tabs>
+<Stat label={t('sla')} value={remaining} tone={breached ? 'danger' : 'neutral'} size="compact" />
+<Stat ref={anchor} label={t('priority')} value="P1" onActivate={openEditor} activateLabel={t('change')} expanded={open} size="compact" />
+<CopyButton value={email} label={t('copyEmail')} copiedLabel={t('copied')} failedLabel={t('copyFailed')} />
+```
+
 Ships **ESM + CJS + types**, with per-file `"use client"` so it's safe under React Server Components. Part of the **[UIx v2 styleguide](https://github.com/COx-ORG-H/UIx)**.

package/dist/{ChartCore-Do6gRBN3.d.cts → ChartCore-DzWe10bN.d.cts}

@@ -6,6 +6,19 @@ declare function uixChartPalette(): string[];
 interface ChartTableRow {
     [key: string]: string | number;
 }
+/**
+ * Every word the chart renders itself (TENSOR RX-125, UIX-04 / UIX-05). The
+ * loading text used to live in CSS `content:`, where nothing could translate it.
+ */
+interface ChartLabels {
+    /** Shown (and announced inside the busy region) while `loading`. */
+    loading: ReactNode;
+    /** Accessible name when neither `ariaLabel` nor `title` is given. */
+    chart: string;
+    /** Appended to the chart's name for its data-table alternative. */
+    dataTableSuffix: string;
+}
+declare const DEFAULT_CHART_LABELS: ChartLabels;
 interface ChartProps {
     option: EChartsOption;
     title?: string;
@@ -22,6 +35,8 @@ interface ChartProps {
     footer?: ReactNode;
     loading?: boolean;
     empty?: ReactNode;
+    /** Translatable words; English defaults in {@link DEFAULT_CHART_LABELS}. */
+    labels?: Partial<ChartLabels>;
 }
 interface ChartMetricProps extends HTMLAttributes<HTMLDivElement> {
     value: ReactNode;
@@ -41,4 +56,4 @@ interface ChartLegendItemProps extends HTMLAttributes<HTMLLIElement> {
 }
 declare function ChartLegendItem({ label, color, swatch, className, style, ...props }: ChartLegendItemProps): react.JSX.Element;
 
-export { type ChartProps as C, ChartLegend as a, ChartLegendItem as b, type ChartLegendItemProps as c, type ChartLegendProps as d, ChartMetric as e, type ChartMetricProps as f, type ChartTableRow as g, uixChartPalette as u };
+export { type ChartProps as C, DEFAULT_CHART_LABELS as D, type ChartLabels as a, ChartLegend as b, ChartLegendItem as c, type ChartLegendItemProps as d, type ChartLegendProps as e, ChartMetric as f, type ChartMetricProps as g, type ChartTableRow as h, uixChartPalette as u };

package/dist/chart-preset.cjs

@@ -35,6 +35,7 @@ __export(chart_preset_exports, {
   ChartLegend: () => ChartLegend,
   ChartLegendItem: () => ChartLegendItem,
   ChartMetric: () => ChartMetric,
+  DEFAULT_CHART_LABELS: () => DEFAULT_CHART_LABELS,
   uixChartPalette: () => uixChartPalette
 });
 module.exports = __toCommonJS(chart_preset_exports);
@@ -66,6 +67,11 @@ function motionSafe(option) {
   }
   return option;
 }
+var DEFAULT_CHART_LABELS = {
+  loading: "Loading chart\u2026",
+  chart: "Chart",
+  dataTableSuffix: "data table"
+};
 function ChartCore({
   engine,
   option,
@@ -82,8 +88,10 @@ function ChartCore({
   headerAction,
   footer,
   loading = false,
-  empty
+  empty,
+  labels: labelOverrides
 }) {
+  const labels = { ...DEFAULT_CHART_LABELS, ...labelOverrides };
   const containerRef = (0, import_react.useRef)(null);
   const chartRef = (0, import_react.useRef)(null);
   const appliedOptionRef = (0, import_react.useRef)(null);
@@ -138,7 +146,7 @@ function ChartCore({
     appliedOptionRef.current = option;
   }, [option]);
   const heightValue = typeof height === "number" ? `${height}px` : height;
-  const effectiveAriaLabel = ariaLabel ?? title ?? "Chart";
+  const effectiveAriaLabel = ariaLabel ?? title ?? labels.chart;
   const hasTable = Boolean(tableData?.length && tableHeaders?.length);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cx("uix-chart", className), style, children: [
     title != null || subtitle != null || header != null || headerAction != null ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "uix-chart__header", children: [
@@ -149,17 +157,20 @@ function ChartCore({
       ] }),
       headerAction
     ] }) : null,
-    hasEmpty ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uix-chart__plot", "data-empty": true, children: empty }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uix-chart__plot", "data-loading": loading || void 0, "aria-busy": loading || void 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "div",
-      {
-        ref: containerRef,
-        style: { height: heightValue },
-        role: "img",
-        "aria-label": effectiveAriaLabel,
-        "aria-describedby": hasTable ? tableId : void 0
-      }
-    ) }),
-    hasTable ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { id: tableId, className: "uix-visually-hidden", "aria-label": `${effectiveAriaLabel} \u2014 data table`, children: [
+    hasEmpty ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uix-chart__plot", "data-empty": true, children: empty }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "uix-chart__plot", "data-loading": loading || void 0, "aria-busy": loading || void 0, children: [
+      loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uix-chart__loading", children: labels.loading }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          ref: containerRef,
+          style: { height: heightValue },
+          role: "img",
+          "aria-label": effectiveAriaLabel,
+          "aria-describedby": hasTable ? tableId : void 0
+        }
+      )
+    ] }),
+    hasTable ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { id: tableId, className: "uix-visually-hidden", "aria-label": `${effectiveAriaLabel} \u2014 ${labels.dataTableSuffix}`, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: tableHeaders.map((label) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { scope: "col", children: label }, label)) }) }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: tableData.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: tableHeaders.map((label) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { children: row[label] }, label)) }, index)) })
     ] }) : null,
@@ -208,5 +219,6 @@ function Chart(props) {
   ChartLegend,
   ChartLegendItem,
   ChartMetric,
+  DEFAULT_CHART_LABELS,
   uixChartPalette
 });

package/dist/chart-preset.d.cts

@@ -1,6 +1,6 @@
 import * as react from 'react';
-import { C as ChartProps } from './ChartCore-Do6gRBN3.cjs';
-export { a as ChartLegend, b as ChartLegendItem, c as ChartLegendItemProps, d as ChartLegendProps, e as ChartMetric, f as ChartMetricProps, g as ChartTableRow, u as uixChartPalette } from './ChartCore-Do6gRBN3.cjs';
+import { C as ChartProps } from './ChartCore-DzWe10bN.cjs';
+export { a as ChartLabels, b as ChartLegend, c as ChartLegendItem, d as ChartLegendItemProps, e as ChartLegendProps, f as ChartMetric, g as ChartMetricProps, h as ChartTableRow, D as DEFAULT_CHART_LABELS, u as uixChartPalette } from './ChartCore-DzWe10bN.cjs';
 import 'echarts';
 
 /** Lean SVG adapter: line, bar, pie, dataset, grid, legend, title, and tooltip. */

package/dist/chart-preset.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ChartProps } from './components/ChartCore.js';
-export { ChartLegend, ChartLegendItem, ChartLegendItemProps, ChartLegendProps, ChartMetric, ChartMetricProps, ChartTableRow, uixChartPalette } from './components/ChartCore.js';
+export { ChartLabels, ChartLegend, ChartLegendItem, ChartLegendItemProps, ChartLegendProps, ChartMetric, ChartMetricProps, ChartTableRow, DEFAULT_CHART_LABELS, uixChartPalette } from './components/ChartCore.js';
 import 'echarts';
 
 /** Lean SVG adapter: line, bar, pie, dataset, grid, legend, title, and tooltip. */

package/dist/chart-preset.js

@@ -28,11 +28,12 @@ const presetEngine = echarts;
 function Chart(props) {
   return /* @__PURE__ */ jsx(ChartCore, { ...props, engine: presetEngine });
 }
-import { ChartLegend, ChartLegendItem, ChartMetric, uixChartPalette } from "./components/ChartCore.js";
+import { ChartLegend, ChartLegendItem, ChartMetric, DEFAULT_CHART_LABELS, uixChartPalette } from "./components/ChartCore.js";
 export {
   Chart,
   ChartLegend,
   ChartLegendItem,
   ChartMetric,
+  DEFAULT_CHART_LABELS,
   uixChartPalette
 };

package/dist/chart.cjs

@@ -34,6 +34,7 @@ __export(chart_exports, {
   ChartLegend: () => ChartLegend,
   ChartLegendItem: () => ChartLegendItem,
   ChartMetric: () => ChartMetric,
+  DEFAULT_CHART_LABELS: () => DEFAULT_CHART_LABELS,
   uixChartPalette: () => uixChartPalette
 });
 module.exports = __toCommonJS(chart_exports);
@@ -64,6 +65,11 @@ function motionSafe(option) {
   }
   return option;
 }
+var DEFAULT_CHART_LABELS = {
+  loading: "Loading chart\u2026",
+  chart: "Chart",
+  dataTableSuffix: "data table"
+};
 function ChartCore({
   engine,
   option,
@@ -80,8 +86,10 @@ function ChartCore({
   headerAction,
   footer,
   loading = false,
-  empty
+  empty,
+  labels: labelOverrides
 }) {
+  const labels = { ...DEFAULT_CHART_LABELS, ...labelOverrides };
   const containerRef = (0, import_react.useRef)(null);
   const chartRef = (0, import_react.useRef)(null);
   const appliedOptionRef = (0, import_react.useRef)(null);
@@ -136,7 +144,7 @@ function ChartCore({
     appliedOptionRef.current = option;
   }, [option]);
   const heightValue = typeof height === "number" ? `${height}px` : height;
-  const effectiveAriaLabel = ariaLabel ?? title ?? "Chart";
+  const effectiveAriaLabel = ariaLabel ?? title ?? labels.chart;
   const hasTable = Boolean(tableData?.length && tableHeaders?.length);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cx("uix-chart", className), style, children: [
     title != null || subtitle != null || header != null || headerAction != null ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "uix-chart__header", children: [
@@ -147,17 +155,20 @@ function ChartCore({
       ] }),
       headerAction
     ] }) : null,
-    hasEmpty ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uix-chart__plot", "data-empty": true, children: empty }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uix-chart__plot", "data-loading": loading || void 0, "aria-busy": loading || void 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "div",
-      {
-        ref: containerRef,
-        style: { height: heightValue },
-        role: "img",
-        "aria-label": effectiveAriaLabel,
-        "aria-describedby": hasTable ? tableId : void 0
-      }
-    ) }),
-    hasTable ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { id: tableId, className: "uix-visually-hidden", "aria-label": `${effectiveAriaLabel} \u2014 data table`, children: [
+    hasEmpty ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uix-chart__plot", "data-empty": true, children: empty }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "uix-chart__plot", "data-loading": loading || void 0, "aria-busy": loading || void 0, children: [
+      loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uix-chart__loading", children: labels.loading }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          ref: containerRef,
+          style: { height: heightValue },
+          role: "img",
+          "aria-label": effectiveAriaLabel,
+          "aria-describedby": hasTable ? tableId : void 0
+        }
+      )
+    ] }),
+    hasTable ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { id: tableId, className: "uix-visually-hidden", "aria-label": `${effectiveAriaLabel} \u2014 ${labels.dataTableSuffix}`, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: tableHeaders.map((label) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { scope: "col", children: label }, label)) }) }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: tableData.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: tableHeaders.map((label) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { children: row[label] }, label)) }, index)) })
     ] }) : null,
@@ -193,5 +204,6 @@ function Chart(props) {
   ChartLegend,
   ChartLegendItem,
   ChartMetric,
+  DEFAULT_CHART_LABELS,
   uixChartPalette
 });

package/dist/chart.d.cts

@@ -1,6 +1,6 @@
 import * as react from 'react';
-import { C as ChartProps } from './ChartCore-Do6gRBN3.cjs';
-export { a as ChartLegend, b as ChartLegendItem, c as ChartLegendItemProps, d as ChartLegendProps, e as ChartMetric, f as ChartMetricProps, g as ChartTableRow, u as uixChartPalette } from './ChartCore-Do6gRBN3.cjs';
+import { C as ChartProps } from './ChartCore-DzWe10bN.cjs';
+export { a as ChartLabels, b as ChartLegend, c as ChartLegendItem, d as ChartLegendItemProps, e as ChartLegendProps, f as ChartMetric, g as ChartMetricProps, h as ChartTableRow, D as DEFAULT_CHART_LABELS, u as uixChartPalette } from './ChartCore-DzWe10bN.cjs';
 import 'echarts';
 
 /** Full-compatibility adapter. Use `@tensor_1/react/chart/preset` for the lean preset. */

package/dist/chart.d.ts

@@ -1,4 +1,4 @@
 export { Chart } from './components/Chart.js';
-export { ChartLegend, ChartLegendItem, ChartLegendItemProps, ChartLegendProps, ChartMetric, ChartMetricProps, ChartProps, ChartTableRow, uixChartPalette } from './components/ChartCore.js';
+export { ChartLabels, ChartLegend, ChartLegendItem, ChartLegendItemProps, ChartLegendProps, ChartMetric, ChartMetricProps, ChartProps, ChartTableRow, DEFAULT_CHART_LABELS, uixChartPalette } from './components/ChartCore.js';
 import 'react';
 import 'echarts';

package/dist/chart.js

@@ -1,8 +1,9 @@
-import { Chart, ChartLegend, ChartLegendItem, ChartMetric, uixChartPalette } from "./components/Chart.js";
+import { Chart, ChartLegend, ChartLegendItem, ChartMetric, DEFAULT_CHART_LABELS, uixChartPalette } from "./components/Chart.js";
 export {
   Chart,
   ChartLegend,
   ChartLegendItem,
   ChartMetric,
+  DEFAULT_CHART_LABELS,
   uixChartPalette
 };

package/dist/components/AppShell.d.ts

@@ -22,7 +22,11 @@ interface AppShellProps extends HTMLAttributes<HTMLDivElement> {
     sidebar?: ReactNode;
     topbar?: ReactNode;
     children?: ReactNode;
+    /** TENSOR RX-125 (UIX-04): translatable; English default. */
+    skipToContentLabel?: ReactNode;
+    /** TENSOR RX-125 (UIX-04): translatable; English default. */
+    exitFocusLabel?: ReactNode;
 }
-declare function AppShell({ nav, collapsed, focus, onExitFocus, mainBleed, mainId, sidebar, topbar, children, className, ...props }: AppShellProps): react.JSX.Element;
+declare function AppShell({ nav, collapsed, focus, onExitFocus, mainBleed, mainId, sidebar, topbar, children, skipToContentLabel, exitFocusLabel, className, ...props }: AppShellProps): react.JSX.Element;
 
 export { AppShell, type AppShellProps, type ShellNav };

package/dist/components/AppShell.js

@@ -12,6 +12,8 @@ function AppShell({
   sidebar,
   topbar,
   children,
+  skipToContentLabel = "Skip to content",
+  exitFocusLabel = "Esc \xB7 Exit focus",
   className,
   ...props
 }) {
@@ -33,11 +35,11 @@ function AppShell({
       "data-focus": focus || void 0,
       ...props,
       children: [
-        /* @__PURE__ */ jsx("a", { className: "uix-skiplink", href: `#${mainId}`, children: "Skip to content" }),
+        /* @__PURE__ */ jsx("a", { className: "uix-skiplink", href: `#${mainId}`, children: skipToContentLabel }),
         sidebar && /* @__PURE__ */ jsx("div", { className: "uix-shell__sidebar", children: sidebar }),
         topbar && /* @__PURE__ */ jsx("div", { className: "uix-shell__topbar", children: topbar }),
         /* @__PURE__ */ jsx("main", { id: mainId, tabIndex: -1, className: cx("uix-shell__main", mainBleed && "uix-shell__main--bleed"), children }),
-        focus && onExitFocus && /* @__PURE__ */ jsx("div", { className: "uix-shell__focus-exit", children: /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--secondary uix-btn--sm", onClick: onExitFocus, children: "Esc \xB7 Exit focus" }) })
+        focus && onExitFocus && /* @__PURE__ */ jsx("div", { className: "uix-shell__focus-exit", children: /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--secondary uix-btn--sm", onClick: onExitFocus, children: exitFocusLabel }) })
       ]
     }
   );

package/dist/components/Avatar.d.ts

@@ -2,6 +2,8 @@ import * as react from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
 
 interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
+    /** TENSOR RX-125 (UIX-04): translatable; English default. */
+    onlineLabel?: string;
     size?: 'sm' | 'md' | 'lg';
     src?: string;
     alt?: string;
@@ -11,7 +13,7 @@ interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
     status?: boolean;
 }
 /** Avatar over `.uix-avatar`. Renders an image when `src` is set, else children (initials). */
-declare function Avatar({ size, src, alt, children, status, className, ...props }: AvatarProps): react.JSX.Element;
+declare function Avatar({ size, src, alt, children, status, onlineLabel, className, ...props }: AvatarProps): react.JSX.Element;
 interface AvatarGroupProps extends HTMLAttributes<HTMLSpanElement> {
     children?: ReactNode;
 }

package/dist/components/Avatar.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "../cx.js";
-function Avatar({ size = "md", src, alt, children, status, className, ...props }) {
+function Avatar({ size = "md", src, alt, children, status, onlineLabel = "online", className, ...props }) {
   return /* @__PURE__ */ jsxs("span", { className: cx("uix-avatar", size !== "md" && `uix-avatar--${size}`, className), ...props, children: [
     src ? /* @__PURE__ */ jsx("img", { src, alt: alt ?? "" }) : children,
     status && /* @__PURE__ */ jsx("span", { className: "uix-avatar__status", "aria-hidden": "true" }),
-    status && /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", children: "online" })
+    status && /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", children: onlineLabel })
   ] });
 }
 function AvatarGroup({ children, className, ...props }) {

package/dist/components/BrandProfiles.d.ts

@@ -26,6 +26,32 @@ interface AppliedBrandProfileSnapshot {
 /** Apply only the existing UIx brand/font slots and readable logo metadata. */
 declare function applyBrandProfile(profile: BrandProfile, target?: HTMLElement | null): AppliedBrandProfileSnapshot | undefined;
 declare function restoreBrandProfile(snapshot: AppliedBrandProfileSnapshot, target?: HTMLElement | null): void;
+/**
+ * Every word the brand-profile editor renders (TENSOR RX-125, UIX-12). `{name}` is the
+ * profile's name. The preview copy is sample content and may be replaced too.
+ */
+interface BrandProfileEditorLabels {
+    region: string;
+    profile: string;
+    name: string;
+    brand: string;
+    brandColor: string;
+    onBrand: string;
+    onBrandColor: string;
+    bodyFont: string;
+    headingFont: string;
+    logoFile: string;
+    apply: string;
+    applied: string;
+    preview: string;
+    logoPlaceholder: string;
+    previewTitleFallback: string;
+    previewHeading: string;
+    previewBody: string;
+    previewPrimary: string;
+    previewLink: string;
+}
+declare const DEFAULT_BRAND_PROFILE_EDITOR_LABELS: BrandProfileEditorLabels;
 interface BrandProfileEditorProps {
     value: BrandProfile;
     onChange: (profile: BrandProfile) => void;
@@ -36,10 +62,11 @@ interface BrandProfileEditorProps {
     onLogoFile?: (file: File) => void;
     colorPresets?: string[];
     className?: string;
+    labels?: Partial<BrandProfileEditorLabels>;
 }
 /** Small controlled editor composition for serializable UIx brand profiles. */
-declare function BrandProfileEditor({ value, onChange, profiles, onSelectProfile, onApply, applyTarget, onLogoFile, colorPresets, className, }: BrandProfileEditorProps): react.JSX.Element;
+declare function BrandProfileEditor({ value, onChange, profiles, onSelectProfile, onApply, applyTarget, onLogoFile, colorPresets, className, labels: labelOverrides, }: BrandProfileEditorProps): react.JSX.Element;
 /** Canonical Phase 46.9 export; equivalent to BrandProfileEditor. */
 declare const BrandProfiles: typeof BrandProfileEditor;
 
-export { type AppliedBrandProfileSnapshot, type BrandProfile, BrandProfileEditor, type BrandProfileEditorProps, type BrandProfileLogo, type BrandProfileTypography, BrandProfiles, applyBrandProfile, restoreBrandProfile };
+export { type AppliedBrandProfileSnapshot, type BrandProfile, BrandProfileEditor, type BrandProfileEditorLabels, type BrandProfileEditorProps, type BrandProfileLogo, type BrandProfileTypography, BrandProfiles, DEFAULT_BRAND_PROFILE_EDITOR_LABELS, applyBrandProfile, restoreBrandProfile };

package/dist/components/BrandProfiles.js

@@ -4,6 +4,7 @@ import { useState } from "react";
 import { cx } from "../cx.js";
 import { normalizeHex } from "../color-model.js";
 import { ColorPicker } from "./ColorPicker.js";
+import { fillLabel } from "../fill-label.js";
 const PROFILE_PROPERTIES = {
   brand: "--uix-brand",
   brandForeground: "--uix-brand-fg",
@@ -61,6 +62,27 @@ function restoreBrandProfile(snapshot, target) {
   if (snapshot.logoAlt) element.dataset.uixBrandLogoAlt = snapshot.logoAlt;
   else delete element.dataset.uixBrandLogoAlt;
 }
+const DEFAULT_BRAND_PROFILE_EDITOR_LABELS = {
+  region: "Brand profile editor",
+  profile: "Profile",
+  name: "Name",
+  brand: "Brand",
+  brandColor: "Brand color",
+  onBrand: "On brand",
+  onBrandColor: "Brand foreground color",
+  bodyFont: "Body font",
+  headingFont: "Heading font",
+  logoFile: "Logo file",
+  apply: "Apply profile",
+  applied: "{name} applied.",
+  preview: "Live preview of {name}",
+  logoPlaceholder: "Logo",
+  previewTitleFallback: "Brand preview",
+  previewHeading: "Readable, serializable branding",
+  previewBody: "Accent, links, rings, and muted states continue through the existing UIx token chain.",
+  previewPrimary: "Primary action",
+  previewLink: "Preview link"
+};
 function BrandProfileEditor({
   value,
   onChange,
@@ -70,14 +92,16 @@ function BrandProfileEditor({
   applyTarget,
   onLogoFile,
   colorPresets = EMPTY_COLORS,
-  className
+  className,
+  labels: labelOverrides
 }) {
+  const labels = { ...DEFAULT_BRAND_PROFILE_EDITOR_LABELS, ...labelOverrides };
   const [announcement, setAnnouncement] = useState("");
   const update = (patch) => onChange({ ...value, ...patch });
   const apply = () => {
     if (applyTarget !== null) applyBrandProfile(value, applyTarget);
     onApply?.(value);
-    setAnnouncement(`${value.name} applied.`);
+    setAnnouncement(fillLabel(labels.applied, { name: value.name }));
   };
   const onFile = (event) => {
     const file = event.currentTarget.files?.[0];
@@ -89,54 +113,54 @@ function BrandProfileEditor({
     ...value.typography?.sans ? { "--uix-font-sans": value.typography.sans } : {},
     ...value.typography?.heading ? { "--uix-font-heading": value.typography.heading } : {}
   };
-  return /* @__PURE__ */ jsxs("section", { className: cx("uix-brand-profiles", className), "aria-label": "Brand profile editor", children: [
+  return /* @__PURE__ */ jsxs("section", { className: cx("uix-brand-profiles", className), "aria-label": labels.region, children: [
     /* @__PURE__ */ jsxs("div", { className: "uix-brand-profiles__form", children: [
       profiles.length > 0 && /* @__PURE__ */ jsxs("label", { className: "uix-field__label", children: [
-        "Profile",
+        labels.profile,
         /* @__PURE__ */ jsx("select", { className: "uix-select", value: value.id, onChange: (event) => {
           const selected = profiles.find((profile) => profile.id === event.currentTarget.value);
           if (selected) onSelectProfile?.(selected);
         }, children: profiles.map((profile) => /* @__PURE__ */ jsx("option", { value: profile.id, children: profile.name }, profile.id)) })
       ] }),
       /* @__PURE__ */ jsxs("label", { className: "uix-field__label", children: [
-        "Name",
+        labels.name,
         /* @__PURE__ */ jsx("input", { className: "uix-input", value: value.name, onChange: (event) => update({ name: event.currentTarget.value }) })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "uix-brand-profiles__colors", children: [
         /* @__PURE__ */ jsxs("label", { children: [
-          "Brand",
-          /* @__PURE__ */ jsx(ColorPicker, { label: "Brand color", value: value.brand, foreground: value.brandForeground, presets: colorPresets, onChange: (brand) => update({ brand }) })
+          labels.brand,
+          /* @__PURE__ */ jsx(ColorPicker, { label: labels.brandColor, value: value.brand, foreground: value.brandForeground, presets: colorPresets, onChange: (brand) => update({ brand }) })
         ] }),
         /* @__PURE__ */ jsxs("label", { children: [
-          "On brand",
-          /* @__PURE__ */ jsx(ColorPicker, { label: "Brand foreground color", value: value.brandForeground, foreground: value.brand, presets: colorPresets, onChange: (brandForeground) => update({ brandForeground }) })
+          labels.onBrand,
+          /* @__PURE__ */ jsx(ColorPicker, { label: labels.onBrandColor, value: value.brandForeground, foreground: value.brand, presets: colorPresets, onChange: (brandForeground) => update({ brandForeground }) })
         ] })
       ] }),
       /* @__PURE__ */ jsxs("label", { className: "uix-field__label", children: [
-        "Body font",
+        labels.bodyFont,
         /* @__PURE__ */ jsx("input", { className: "uix-input", value: value.typography?.sans ?? "", onChange: (event) => update({ typography: { ...value.typography, sans: event.currentTarget.value || void 0 } }) })
       ] }),
       /* @__PURE__ */ jsxs("label", { className: "uix-field__label", children: [
-        "Heading font",
+        labels.headingFont,
         /* @__PURE__ */ jsx("input", { className: "uix-input", value: value.typography?.heading ?? "", onChange: (event) => update({ typography: { ...value.typography, heading: event.currentTarget.value || void 0 } }) })
       ] }),
       /* @__PURE__ */ jsxs("label", { className: "uix-file-upload uix-brand-profiles__upload", children: [
-        "Logo file",
+        labels.logoFile,
         /* @__PURE__ */ jsx("input", { type: "file", accept: "image/*", onChange: onFile })
       ] }),
-      /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--primary", onClick: apply, children: "Apply profile" }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--primary", onClick: apply, children: labels.apply }),
       /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", "aria-live": "polite", children: announcement })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "uix-brand-profiles__preview", style: previewStyle, "aria-label": `Live preview of ${value.name}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "uix-brand-profiles__preview", style: previewStyle, "aria-label": fillLabel(labels.preview, { name: value.name }), children: [
       /* @__PURE__ */ jsxs("div", { className: "uix-brand-profiles__preview-header", children: [
-        value.logo ? /* @__PURE__ */ jsx("img", { src: value.logo.src, alt: value.logo.alt }) : /* @__PURE__ */ jsx("span", { className: "uix-brand-profiles__logo-placeholder", children: "Logo" }),
-        /* @__PURE__ */ jsx("strong", { children: value.name || "Brand preview" })
+        value.logo ? /* @__PURE__ */ jsx("img", { src: value.logo.src, alt: value.logo.alt }) : /* @__PURE__ */ jsx("span", { className: "uix-brand-profiles__logo-placeholder", children: labels.logoPlaceholder }),
+        /* @__PURE__ */ jsx("strong", { children: value.name || labels.previewTitleFallback })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "uix-brand-profiles__preview-body", children: [
-        /* @__PURE__ */ jsx("h3", { children: "Readable, serializable branding" }),
-        /* @__PURE__ */ jsx("p", { children: "Accent, links, rings, and muted states continue through the existing UIx token chain." }),
-        /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--primary", children: "Primary action" }),
-        /* @__PURE__ */ jsx("a", { href: "#brand-profile-preview", children: "Preview link" })
+        /* @__PURE__ */ jsx("h3", { children: labels.previewHeading }),
+        /* @__PURE__ */ jsx("p", { children: labels.previewBody }),
+        /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--primary", children: labels.previewPrimary }),
+        /* @__PURE__ */ jsx("a", { href: "#brand-profile-preview", children: labels.previewLink })
       ] })
     ] })
   ] });
@@ -145,6 +169,7 @@ const BrandProfiles = BrandProfileEditor;
 export {
   BrandProfileEditor,
   BrandProfiles,
+  DEFAULT_BRAND_PROFILE_EDITOR_LABELS,
   applyBrandProfile,
   restoreBrandProfile
 };

package/dist/components/BuilderCanvas.d.ts

@@ -14,6 +14,30 @@ interface BuilderPaletteItem {
     description?: string;
     create: () => BuilderCanvasItem;
 }
+/** Every word the builder renders (TENSOR RX-125, UIX-12). `{label}` is the item's label. */
+interface BuilderCanvasLabels {
+    region: string;
+    palette: string;
+    paletteHeading: string;
+    paletteEmpty: string;
+    add: string;
+    addFirst: string;
+    canvasHeading: string;
+    loading: string;
+    retry: string;
+    moveUp: string;
+    moveUpNamed: string;
+    moveDown: string;
+    moveDownNamed: string;
+    remove: string;
+    removeNamed: string;
+    properties: string;
+    propertiesHeading: string;
+    propertiesEmpty: string;
+    type: string;
+    label: string;
+}
+declare const DEFAULT_BUILDER_CANVAS_LABELS: BuilderCanvasLabels;
 interface BuilderCanvasProps {
     items: BuilderCanvasItem[];
     onItemsChange: (items: BuilderCanvasItem[]) => void;
@@ -27,8 +51,9 @@ interface BuilderCanvasProps {
     onRetry?: () => void;
     emptyMessage?: string;
     className?: string;
+    labels?: Partial<BuilderCanvasLabels>;
 }
 /** Palette + sortable canvas + property panel scaffold. Owns interaction, never persistence. */
-declare function BuilderCanvas({ items, onItemsChange, palette, selectedId: controlledSelectedId, onSelect, renderItem, renderProperties, loading, error, onRetry, emptyMessage, className, }: BuilderCanvasProps): react.JSX.Element;
+declare function BuilderCanvas({ items, onItemsChange, palette, selectedId: controlledSelectedId, onSelect, renderItem, renderProperties, loading, error, onRetry, emptyMessage, className, labels: labelOverrides, }: BuilderCanvasProps): react.JSX.Element;
 
-export { BuilderCanvas, type BuilderCanvasItem, type BuilderCanvasProps, type BuilderPaletteItem };
+export { BuilderCanvas, type BuilderCanvasItem, type BuilderCanvasLabels, type BuilderCanvasProps, type BuilderPaletteItem, DEFAULT_BUILDER_CANVAS_LABELS };