@textcortex/slidewise 1.4.0 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@textcortex/slidewise",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "Embeddable React PPTX editor.",
   "license": "MIT",
   "type": "module",

package/src/SlidewiseEditor.css

@@ -34,6 +34,34 @@
   --slidewise-bar-bg: var(--app-bg);
   --slidewise-accent: var(--accent);
 
+  /* Per-surface background tokens. Map onto internal vars by default so
+     existing theme styling is preserved. Hosts override any subset (or
+     pass the `surfaces` prop on <Slidewise.Root>) to retint individual
+     regions independently. */
+  --slidewise-bg-app: var(--app-bg);
+  --slidewise-bg-topbar: var(--app-bg);
+  --slidewise-bg-rail: var(--rail-bg);
+  --slidewise-bg-rail-item: transparent;
+  --slidewise-bg-rail-item-active: var(--accent-soft);
+  --slidewise-bg-canvas-frame: transparent;
+  --slidewise-bg-canvas-from: var(--canvas-bg-from);
+  --slidewise-bg-canvas-to: var(--canvas-bg-to);
+  --slidewise-bg-bottom-toolbar: var(--toolbar-bg);
+  --slidewise-bg-right-panel: var(--rail-bg);
+  --slidewise-bg-menu: var(--menu-bg);
+  --slidewise-bg-tooltip: var(--menu-bg);
+  --slidewise-bg-popover: var(--menu-bg);
+  --slidewise-bg-dialog: var(--menu-bg);
+  --slidewise-bg-slide: #ffffff;
+  --slidewise-bg-selection: var(--accent-soft);
+  --slidewise-bg-hover: var(--hover);
+  --slidewise-bg-active: var(--active);
+  --slidewise-bg-input: var(--input-bg);
+  --slidewise-bg-button: transparent;
+  --slidewise-bg-button-hover: var(--hover);
+  --slidewise-bg-pill: var(--smart-grad);
+  --slidewise-bg-unsaved-badge: rgba(232, 80, 76, 0.12);
+
   /* Layout backgrounds */
   --app-bg: #ffffff;
   --rail-bg: #fafafb;
@@ -126,6 +154,12 @@
   --canvas-bg-from: #181c38;
   --canvas-bg-to: #0c1027;
 
+  /* Dark-mode overrides for the public --slidewise-bg-* surface tokens.
+     Hosts can still override any one of these from a higher specificity
+     selector or via the `surfaces` prop. */
+  --slidewise-bg-slide: #ffffff;
+  --slidewise-bg-unsaved-badge: rgba(232, 80, 76, 0.18);
+
   /* Charcoal-purple surface kit from textcortex/platform#7428 — neutral
      dark base, faint inset highlight, layered shadow that lifts to a
      subtle plum tint on hover. */

package/src/SlidewiseEditor.tsx

@@ -15,6 +15,8 @@ import {
   CanvasFrame,
 } from "./compound/parts";
 import type { SlidewiseIcons } from "./compound/IconContext";
+import type { SlidewiseLabels } from "./compound/LabelsContext";
+import type { SlidewiseSurfaces } from "./compound/SurfacesContext";
 import type { Deck } from "@/lib/types";
 import "./SlidewiseEditor.css";
 
@@ -72,6 +74,17 @@ export interface SlidewiseEditorProps {
    * bundled lucide-react icons.
    */
   icons?: SlidewiseIcons;
+  /**
+   * User-visible string overrides for i18n. Pass any subset; missing
+   * entries fall back to English defaults.
+   */
+  labels?: SlidewiseLabels;
+  /**
+   * Per-surface background overrides, equivalent to setting the
+   * `--slidewise-bg-*` CSS variables. See `SlidewiseSurfaces` for the full
+   * list of keys.
+   */
+  surfaces?: SlidewiseSurfaces;
   /** Extra class names appended to the editor root. */
   className?: string;
   /** Inline style applied to the editor root. */
@@ -123,6 +136,8 @@ export const SlidewiseEditor = forwardRef<
     showBottomToolbar = true,
     fontFamily,
     icons,
+    labels,
+    surfaces,
     className,
     style,
   },
@@ -146,6 +161,8 @@ export const SlidewiseEditor = forwardRef<
     initialSlideId,
     fontFamily,
     icons,
+    labels,
+    surfaces,
     className,
     style,
   };

package/src/SlidewiseFileEditor.tsx

@@ -10,6 +10,9 @@ import { SlidewiseEditor, type SlidewiseEditorHandle } from "./SlidewiseEditor";
 import { parsePptx, serializeDeck } from "@/lib/pptx";
 import type { Deck } from "@/lib/types";
 import type { SlidewiseIcons } from "./compound/IconContext";
+import type { SlidewiseLabels } from "./compound/LabelsContext";
+import type { SlidewiseSurfaces } from "./compound/SurfacesContext";
+import { DEFAULT_LABELS } from "./compound/LabelsContext";
 import type { HistoryState, SelectionSnapshot } from "./compound/SlidewiseRoot";
 
 export interface SlidewiseFileEditorProps {
@@ -91,6 +94,17 @@ export interface SlidewiseFileEditorProps {
    * editor's chrome with your own icon set.
    */
   icons?: SlidewiseIcons;
+  /**
+   * User-visible string overrides for i18n. Pass any subset; missing
+   * entries fall back to English defaults. The "Unsaved changes" badge
+   * and the loading / load-error messages also key off this table.
+   */
+  labels?: SlidewiseLabels;
+  /**
+   * Per-surface background overrides; equivalent to setting the
+   * `--slidewise-bg-*` CSS variables.
+   */
+  surfaces?: SlidewiseSurfaces;
   className?: string;
   style?: CSSProperties;
   /**
@@ -193,6 +207,8 @@ export const SlidewiseFileEditor = forwardRef<
     showBottomToolbar,
     fontFamily,
     icons,
+    labels,
+    surfaces,
     className,
     style,
     parse = parsePptx,
@@ -337,15 +353,18 @@ export const SlidewiseFileEditor = forwardRef<
   if (state.status === "loading") {
     return (
       <div style={{ ...frameStyle, ...style }} className={className}>
-        <div style={messageStyle}>Loading…</div>
+        <div style={messageStyle}>
+          {labels?.fileLoading ?? DEFAULT_LABELS.fileLoading}
+        </div>
       </div>
     );
   }
   if (state.status === "error") {
+    const fmt = labels?.fileLoadError ?? DEFAULT_LABELS.fileLoadError;
     return (
       <div style={{ ...frameStyle, ...style }} className={className}>
         <div style={{ ...messageStyle, color: "#E8504C" }}>
-          Could not open file: {state.error.message}
+          {fmt(state.error.message)}
         </div>
       </div>
     );
@@ -363,6 +382,8 @@ export const SlidewiseFileEditor = forwardRef<
         showBottomToolbar={showBottomToolbar}
         fontFamily={fontFamily}
         icons={icons}
+        labels={labels}
+        surfaces={surfaces}
         onChange={(next) => {
           onChangeRef.current?.(next);
         }}
@@ -382,7 +403,11 @@ export const SlidewiseFileEditor = forwardRef<
           await saveBlob(blob);
         }}
       />
-      {dirty && <UnsavedBadge />}
+      {dirty && (
+        <UnsavedBadge
+          label={labels?.unsavedBadge ?? DEFAULT_LABELS.unsavedBadge}
+        />
+      )}
     </div>
   );
 });
@@ -403,7 +428,7 @@ const messageStyle: CSSProperties = {
   color: "#5b6178",
 };
 
-function UnsavedBadge() {
+function UnsavedBadge({ label }: { label: string }) {
   return (
     <div
       style={{
@@ -411,7 +436,8 @@ function UnsavedBadge() {
         top: 12,
         right: 12,
         padding: "4px 10px",
-        background: "rgba(232, 80, 76, 0.12)",
+        background:
+          "var(--slidewise-bg-unsaved-badge, rgba(232, 80, 76, 0.12))",
         color: "#E8504C",
         borderRadius: 999,
         fontFamily: "Inter, system-ui, sans-serif",
@@ -422,7 +448,7 @@ function UnsavedBadge() {
         pointerEvents: "none",
       }}
     >
-      Unsaved changes
+      {label}
     </div>
   );
 }

package/src/compound/LabelsContext.tsx

@@ -0,0 +1,121 @@
+import { createContext, useContext, useMemo, type ReactNode } from "react";
+
+/**
+ * Every user-visible string in the editor's chrome. Pass any subset on
+ * `<Slidewise.Root labels={...}>` to localise; missing entries fall back
+ * to the English defaults. Use this prop together with `icons` to fully
+ * skin Slidewise for non-English deployments.
+ *
+ * Single-string entries are used both as the button's visible label AND
+ * as its `aria-label`. Where the two need to diverge (the Save button
+ * cycles through three states; the theme toggle shows different labels
+ * per theme), nested keys are provided.
+ */
+export interface SlidewiseLabels {
+  // TopBar buttons (visible text)
+  save?: { idle?: string; saving?: string; saved?: string };
+  play?: string;
+  stop?: string;
+  export?: string;
+  undo?: string;
+  redo?: string;
+  themeToggle?: { toDark?: string; toLight?: string };
+
+  // Pills + status indicators
+  smart?: string;
+  unsavedBadge?: string;
+
+  // Inputs
+  titleAriaLabel?: string;
+
+  // SlideRail (reserved for the future SlideRail compound subparts)
+  addSlide?: string;
+  duplicateSlide?: string;
+  deleteSlide?: string;
+
+  // Errors
+  fileLoadError?: (msg: string) => string;
+  fileLoading?: string;
+}
+
+/**
+ * The fully-resolved label table — every key present, no optionals. Internal
+ * components read this directly so they never have to check for undefined.
+ */
+export interface ResolvedLabels {
+  save: { idle: string; saving: string; saved: string };
+  play: string;
+  stop: string;
+  export: string;
+  undo: string;
+  redo: string;
+  themeToggle: { toDark: string; toLight: string };
+  smart: string;
+  unsavedBadge: string;
+  titleAriaLabel: string;
+  addSlide: string;
+  duplicateSlide: string;
+  deleteSlide: string;
+  fileLoadError: (msg: string) => string;
+  fileLoading: string;
+}
+
+export const DEFAULT_LABELS: ResolvedLabels = {
+  save: { idle: "Save", saving: "Saving…", saved: "Saved" },
+  play: "Play",
+  stop: "Stop",
+  export: "Export",
+  undo: "Undo",
+  redo: "Redo",
+  themeToggle: { toDark: "Dark mode", toLight: "Light mode" },
+  smart: "Smart",
+  unsavedBadge: "Unsaved changes",
+  titleAriaLabel: "Deck title",
+  addSlide: "Add slide",
+  duplicateSlide: "Duplicate slide",
+  deleteSlide: "Delete slide",
+  fileLoadError: (msg) => `Could not open file: ${msg}`,
+  fileLoading: "Loading…",
+};
+
+function mergeLabels(
+  overrides: SlidewiseLabels | undefined
+): ResolvedLabels {
+  if (!overrides) return DEFAULT_LABELS;
+  return {
+    save: { ...DEFAULT_LABELS.save, ...overrides.save },
+    play: overrides.play ?? DEFAULT_LABELS.play,
+    stop: overrides.stop ?? DEFAULT_LABELS.stop,
+    export: overrides.export ?? DEFAULT_LABELS.export,
+    undo: overrides.undo ?? DEFAULT_LABELS.undo,
+    redo: overrides.redo ?? DEFAULT_LABELS.redo,
+    themeToggle: { ...DEFAULT_LABELS.themeToggle, ...overrides.themeToggle },
+    smart: overrides.smart ?? DEFAULT_LABELS.smart,
+    unsavedBadge: overrides.unsavedBadge ?? DEFAULT_LABELS.unsavedBadge,
+    titleAriaLabel: overrides.titleAriaLabel ?? DEFAULT_LABELS.titleAriaLabel,
+    addSlide: overrides.addSlide ?? DEFAULT_LABELS.addSlide,
+    duplicateSlide: overrides.duplicateSlide ?? DEFAULT_LABELS.duplicateSlide,
+    deleteSlide: overrides.deleteSlide ?? DEFAULT_LABELS.deleteSlide,
+    fileLoadError: overrides.fileLoadError ?? DEFAULT_LABELS.fileLoadError,
+    fileLoading: overrides.fileLoading ?? DEFAULT_LABELS.fileLoading,
+  };
+}
+
+const LabelsContext = createContext<ResolvedLabels>(DEFAULT_LABELS);
+
+export function LabelsProvider({
+  labels,
+  children,
+}: {
+  labels: SlidewiseLabels | undefined;
+  children: ReactNode;
+}) {
+  const resolved = useMemo(() => mergeLabels(labels), [labels]);
+  return (
+    <LabelsContext.Provider value={resolved}>{children}</LabelsContext.Provider>
+  );
+}
+
+export function useLabels(): ResolvedLabels {
+  return useContext(LabelsContext);
+}

package/src/compound/SlidewiseRoot.tsx

@@ -22,6 +22,12 @@ import { HostProvider } from "./HostContext";
 import { IconProvider, type SlidewiseIcons } from "./IconContext";
 import { ReadOnlyProvider } from "./ReadOnlyContext";
 import { DirtyProvider } from "./DirtyContext";
+import { LabelsProvider, type SlidewiseLabels } from "./LabelsContext";
+import {
+  SurfacesProvider,
+  surfacesToCssVars,
+  type SlidewiseSurfaces,
+} from "./SurfacesContext";
 
 export interface SlidewiseRootProps {
   /**
@@ -72,6 +78,22 @@ export interface SlidewiseRootProps {
    * the bundled lucide icons.
    */
   icons?: SlidewiseIcons;
+  /**
+   * User-visible string overrides for i18n. Pass any subset; missing
+   * entries fall back to English defaults. Pairs with `icons` for full
+   * locale customization.
+   */
+  labels?: SlidewiseLabels;
+  /**
+   * Per-surface background overrides. Equivalent to setting the
+   * `--slidewise-bg-*` CSS variables on the root, but as a typed prop so
+   * hosts can drive theming from JS without writing CSS:
+   *
+   * ```tsx
+   * <Slidewise.Root surfaces={{ app: "#0b0d10", rail: "#1c1c22" }}>
+   * ```
+   */
+  surfaces?: SlidewiseSurfaces;
   /** Extra class names appended to the root. */
   className?: string;
   /** Inline style applied to the root. */
@@ -191,6 +213,8 @@ function RootInner({
   initialSlideId,
   fontFamily,
   icons,
+  labels,
+  surfaces,
   className,
   style,
   children,
@@ -429,20 +453,32 @@ function RootInner({
       }
     : undefined;
 
+  // Merge host's `style` prop with the surface overrides so a host can
+  // pass both without one clobbering the other. Surfaces win on conflict
+  // because they're the more specific theming intent.
+  const surfaceVars = surfacesToCssVars(surfaces);
+  const mergedStyle: CSSProperties | undefined = surfaceVars
+    ? { ...style, ...(surfaceVars as CSSProperties) }
+    : style;
+
   return (
     <ReadOnlyProvider readOnly={readOnly}>
       <IconProvider icons={icons ?? {}}>
-        <DirtyProvider dirty={dirty}>
-          <HostProvider callbacks={{ onSave: wrappedSave, onExport }}>
-            <RootShell
-              fontFamily={fontFamily}
-              className={className}
-              style={style}
-            >
-              {children}
-            </RootShell>
-          </HostProvider>
-        </DirtyProvider>
+        <LabelsProvider labels={labels}>
+          <SurfacesProvider surfaces={surfaces}>
+            <DirtyProvider dirty={dirty}>
+              <HostProvider callbacks={{ onSave: wrappedSave, onExport }}>
+                <RootShell
+                  fontFamily={fontFamily}
+                  className={className}
+                  style={mergedStyle}
+                >
+                  {children}
+                </RootShell>
+              </HostProvider>
+            </DirtyProvider>
+          </SurfacesProvider>
+        </LabelsProvider>
       </IconProvider>
     </ReadOnlyProvider>
   );

package/src/compound/SurfacesContext.tsx

@@ -0,0 +1,128 @@
+import { createContext, useContext, useMemo, type ReactNode } from "react";
+
+/**
+ * Per-surface background overrides. Each key maps to a CSS variable that the
+ * library's stylesheet reads. Values can be any valid CSS background
+ * (color, gradient, var() reference, etc.). Equivalent to setting the
+ * `--slidewise-bg-*` variables manually — provided as a typed prop so
+ * hosts can drive theming from JS.
+ *
+ * Missing keys fall back to the library's defaults; supply only what you
+ * want to override.
+ */
+export interface SlidewiseSurfaces {
+  /** Outermost app shell. Maps to `--slidewise-bg-app`. */
+  app?: string;
+  /** Top bar surface. `--slidewise-bg-topbar`. */
+  topbar?: string;
+  /** Slide rail container. `--slidewise-bg-rail`. */
+  rail?: string;
+  /** Inactive slide rail item. `--slidewise-bg-rail-item`. */
+  railItem?: string;
+  /** Active/selected slide rail item. `--slidewise-bg-rail-item-active`. */
+  railItemActive?: string;
+  /** Canvas frame (around the slide). `--slidewise-bg-canvas-frame`. */
+  canvasFrame?: string;
+  /** Canvas backdrop gradient start. `--slidewise-bg-canvas-from`. */
+  canvasFrom?: string;
+  /** Canvas backdrop gradient end. `--slidewise-bg-canvas-to`. */
+  canvasTo?: string;
+  /** Floating bottom toolbar. `--slidewise-bg-bottom-toolbar`. */
+  bottomToolbar?: string;
+  /** Right panel surface. `--slidewise-bg-right-panel`. */
+  rightPanel?: string;
+  /** Popover/menu surface. `--slidewise-bg-menu`. */
+  menu?: string;
+  /** Tooltip surface. `--slidewise-bg-tooltip`. */
+  tooltip?: string;
+  /** Popover surface. `--slidewise-bg-popover`. */
+  popover?: string;
+  /** Dialog surface. `--slidewise-bg-dialog`. */
+  dialog?: string;
+  /** Slide paper. `--slidewise-bg-slide`. */
+  slide?: string;
+  /** Selection overlay tint. `--slidewise-bg-selection`. */
+  selection?: string;
+  /** Hover state. `--slidewise-bg-hover`. */
+  hover?: string;
+  /** Active/pressed state. `--slidewise-bg-active`. */
+  active?: string;
+  /** Form input. `--slidewise-bg-input`. */
+  input?: string;
+  /** Chrome button. `--slidewise-bg-button`. */
+  button?: string;
+  /** Chrome button on hover. `--slidewise-bg-button-hover`. */
+  buttonHover?: string;
+  /** Smart pill. `--slidewise-bg-pill`. */
+  pill?: string;
+  /** Unsaved-changes badge. `--slidewise-bg-unsaved-badge`. */
+  unsavedBadge?: string;
+}
+
+const KEY_TO_VAR: Record<keyof SlidewiseSurfaces, string> = {
+  app: "--slidewise-bg-app",
+  topbar: "--slidewise-bg-topbar",
+  rail: "--slidewise-bg-rail",
+  railItem: "--slidewise-bg-rail-item",
+  railItemActive: "--slidewise-bg-rail-item-active",
+  canvasFrame: "--slidewise-bg-canvas-frame",
+  canvasFrom: "--slidewise-bg-canvas-from",
+  canvasTo: "--slidewise-bg-canvas-to",
+  bottomToolbar: "--slidewise-bg-bottom-toolbar",
+  rightPanel: "--slidewise-bg-right-panel",
+  menu: "--slidewise-bg-menu",
+  tooltip: "--slidewise-bg-tooltip",
+  popover: "--slidewise-bg-popover",
+  dialog: "--slidewise-bg-dialog",
+  slide: "--slidewise-bg-slide",
+  selection: "--slidewise-bg-selection",
+  hover: "--slidewise-bg-hover",
+  active: "--slidewise-bg-active",
+  input: "--slidewise-bg-input",
+  button: "--slidewise-bg-button",
+  buttonHover: "--slidewise-bg-button-hover",
+  pill: "--slidewise-bg-pill",
+  unsavedBadge: "--slidewise-bg-unsaved-badge",
+};
+
+/**
+ * Convert a `SlidewiseSurfaces` map into an object suitable for spreading
+ * into a React `style` prop. Returns `null` when no overrides are present
+ * so the consumer doesn't allocate a fresh style object every render.
+ */
+export function surfacesToCssVars(
+  surfaces: SlidewiseSurfaces | undefined
+): Record<string, string> | null {
+  if (!surfaces) return null;
+  const entries: [string, string][] = [];
+  for (const key of Object.keys(KEY_TO_VAR) as (keyof SlidewiseSurfaces)[]) {
+    const value = surfaces[key];
+    if (value !== undefined) entries.push([KEY_TO_VAR[key], value]);
+  }
+  if (entries.length === 0) return null;
+  return Object.fromEntries(entries);
+}
+
+const SurfacesContext = createContext<SlidewiseSurfaces | null>(null);
+
+export function SurfacesProvider({
+  surfaces,
+  children,
+}: {
+  surfaces: SlidewiseSurfaces | undefined;
+  children: ReactNode;
+}) {
+  const value = useMemo(() => surfaces ?? null, [surfaces]);
+  return (
+    <SurfacesContext.Provider value={value}>{children}</SurfacesContext.Provider>
+  );
+}
+
+/**
+ * Read the surface override map. Mostly used by `<Slidewise.Root>` itself,
+ * but exposed so host-rendered surfaces (e.g. a custom panel) can apply
+ * the same tokens for visual consistency.
+ */
+export function useSurfaces(): SlidewiseSurfaces | null {
+  return useContext(SurfacesContext);
+}

package/src/compound/index.ts

@@ -74,6 +74,19 @@ export {
 } from "./IconContext";
 export { ReadOnlyProvider, useReadOnly } from "./ReadOnlyContext";
 export { DirtyProvider, useDirty } from "./DirtyContext";
+export {
+  LabelsProvider,
+  useLabels,
+  DEFAULT_LABELS,
+  type SlidewiseLabels,
+  type ResolvedLabels,
+} from "./LabelsContext";
+export {
+  SurfacesProvider,
+  useSurfaces,
+  surfacesToCssVars,
+  type SlidewiseSurfaces,
+} from "./SurfacesContext";
 
 /**
  * Store hooks. Use these from host components anywhere under

package/src/compound/parts.tsx

@@ -68,7 +68,7 @@ export function RightPanel({
         width,
         flexShrink: 0,
         height: "100%",
-        background: "var(--rail-bg)",
+        background: "var(--slidewise-bg-right-panel, var(--rail-bg))",
         borderLeft: "1px solid var(--border)",
         boxShadow: "var(--rail-shadow)",
         overflow: "auto",

package/src/compound/topbar/Export.tsx

@@ -3,6 +3,7 @@ import { Download } from "lucide-react";
 import { useEditorStore } from "@/lib/StoreProvider";
 import { useHostCallbacks } from "../HostContext";
 import { useIcons } from "../IconContext";
+import { useLabels } from "../LabelsContext";
 import { primaryBtnStyle, primaryHoverHandlers } from "./styles";
 
 /**
@@ -24,13 +25,15 @@ export interface TopBarExportProps {
 export function Export({
   className,
   style,
-  ariaLabel = "Export",
-  label = "Export",
+  ariaLabel,
+  label,
   children,
 }: TopBarExportProps = {}) {
   const store = useEditorStore();
   const { onExport: onExportHost } = useHostCallbacks();
   const icons = useIcons();
+  const labels = useLabels();
+  const resolved = label ?? labels.export;
 
   const onClick = () => {
     const deck = store.getState().deck;
@@ -53,13 +56,13 @@ export function Export({
     <button
       type="button"
       className={className}
-      aria-label={ariaLabel}
+      aria-label={ariaLabel ?? resolved}
       onClick={onClick}
       style={{ ...primaryBtnStyle(), ...style }}
       {...primaryHoverHandlers()}
     >
       {children ?? icons.export ?? <Download size={14} />}
-      {label}
+      {resolved}
     </button>
   );
 }

package/src/compound/topbar/Play.tsx

@@ -2,6 +2,7 @@ import type { CSSProperties, ReactNode } from "react";
 import { Play as PlayIcon } from "lucide-react";
 import { useEditor } from "@/lib/StoreProvider";
 import { useIcons } from "../IconContext";
+import { useLabels } from "../LabelsContext";
 import { chromeBtnStyle, hoverHandlers } from "./styles";
 
 /**
@@ -19,24 +20,26 @@ export interface TopBarPlayProps {
 export function Play({
   className,
   style,
-  ariaLabel = "Play",
-  label = "Play",
+  ariaLabel,
+  label,
   children,
 }: TopBarPlayProps = {}) {
   const play = useEditor((s) => s.play);
   const icons = useIcons();
+  const labels = useLabels();
+  const resolved = label ?? labels.play;
 
   return (
     <button
       type="button"
       className={className}
-      aria-label={ariaLabel}
+      aria-label={ariaLabel ?? resolved}
       onClick={play}
       style={{ ...chromeBtnStyle(), ...style }}
       {...hoverHandlers()}
     >
       {children ?? icons.play ?? <PlayIcon size={14} />}
-      {label}
+      {resolved}
     </button>
   );
 }

package/src/compound/topbar/Redo.tsx

@@ -3,6 +3,7 @@ import { Redo2 } from "lucide-react";
 import { useEditor } from "@/lib/StoreProvider";
 import { useIcons } from "../IconContext";
 import { useReadOnly } from "../ReadOnlyContext";
+import { useLabels } from "../LabelsContext";
 import { iconBtnStyle, hoverHandlers } from "./styles";
 
 /**
@@ -19,21 +20,23 @@ export interface TopBarRedoProps {
 export function Redo({
   className,
   style,
-  ariaLabel = "Redo",
+  ariaLabel,
   children,
 }: TopBarRedoProps = {}) {
   const redo = useEditor((s) => s.redo);
   const canRedo = useEditor((s) => s.future.length > 0);
   const icons = useIcons();
   const readOnly = useReadOnly();
+  const labels = useLabels();
+  const resolvedAria = ariaLabel ?? labels.redo;
   if (readOnly) return null;
 
   return (
     <button
       type="button"
       className={className}
-      title={ariaLabel}
-      aria-label={ariaLabel}
+      title={resolvedAria}
+      aria-label={resolvedAria}
       disabled={!canRedo}
       onClick={redo}
       style={{