@textcortex/slidewise 1.3.0 → 1.5.0

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 {
   /**
@@ -43,6 +49,18 @@ export interface SlidewiseRootProps {
    * "Undo"/"Redo" button enabled state without polling `canUndo()`/`canRedo()`.
    */
   onHistoryChange?: (state: HistoryState) => void;
+  /** Fires when the active slide changes (user click, programmatic goToSlide). */
+  onActiveSlideChange?: (slideId: string) => void;
+  /** Fires when the selected element ids change. */
+  onSelectionChange?: (selection: SelectionSnapshot) => void;
+  /** Fires when the canvas zoom level changes. */
+  onZoomChange?: (scale: number) => void;
+  /** Fires immediately before the host's `onSave` is invoked. */
+  onSaveStart?: () => void;
+  /** Fires after the host's `onSave` resolves successfully. */
+  onSaveSuccess?: () => void;
+  /** Fires when the host's `onSave` throws. The error still propagates. */
+  onSaveError?: (err: Error) => void;
   /**
    * Hide editing affordances (save / undo / redo) and disable canvas
    * mutations. Use this when the host viewer doesn't have write access.
@@ -60,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. */
@@ -74,6 +108,12 @@ export interface HistoryState {
   redoSize: number;
 }
 
+/** Snapshot of the current selection, scoped to the active slide. */
+export interface SelectionSnapshot {
+  slideId: string;
+  elementIds: string[];
+}
+
 export interface SlidewiseRootHandle {
   play(): void;
   stop(): void;
@@ -92,6 +132,44 @@ export interface SlidewiseRootHandle {
    * window handles typical typing/drag bursts.
    */
   endCoalesce(): void;
+
+  // ---- Navigation ----
+  /** Switch the active slide. No-op when `slideId` is not in the deck. */
+  goToSlide(slideId: string): void;
+  /** Advance to the slide after the current one. No-op past the last slide. */
+  nextSlide(): void;
+  /** Step back to the slide before the current one. No-op past the first. */
+  prevSlide(): void;
+
+  // ---- Zoom ----
+  /** Zoom out by one step (×0.8), clamped to the editor's min zoom. */
+  zoomOut(): void;
+  /** Zoom in by one step (×1.25), clamped to the editor's max zoom. */
+  zoomIn(): void;
+  /** Set the absolute zoom (1 = 100%); clamped to [0.1, 4]. */
+  setZoom(scale: number): void;
+
+  // ---- Slide CRUD ----
+  /**
+   * Insert a blank slide after `afterId`, or at the end if `afterId` is
+   * omitted. Returns the new slide's id. The new slide becomes active.
+   */
+  addSlide(afterId?: string): string;
+  /**
+   * Insert a copy of `slideId` immediately after it. Returns the new
+   * slide's id, or `null` if `slideId` wasn't found. The copy becomes
+   * active.
+   */
+  duplicateSlide(slideId: string): string | null;
+  /**
+   * Delete a slide. No-op when the deck would be left with zero slides.
+   */
+  deleteSlide(slideId: string): void;
+
+  // ---- Selection ----
+  /** Current selection snapshot (slide id + selected element ids). */
+  getSelection(): SelectionSnapshot;
+
   getDeck(): Deck;
   isDirty(): boolean;
   resetDirty(): void;
@@ -124,11 +202,19 @@ function RootInner({
   onExport,
   onDirtyChange,
   onHistoryChange: props_onHistoryChange,
+  onActiveSlideChange,
+  onSelectionChange,
+  onZoomChange,
+  onSaveStart,
+  onSaveSuccess,
+  onSaveError,
   readOnly = false,
   theme,
   initialSlideId,
   fontFamily,
   icons,
+  labels,
+  surfaces,
   className,
   style,
   children,
@@ -145,6 +231,12 @@ function RootInner({
   const onSaveRef = useRef(onSave);
   const onExportRef = useRef(onExport);
   const onHistoryChangeRef = useRef(props_onHistoryChange);
+  const onActiveSlideChangeRef = useRef(onActiveSlideChange);
+  const onSelectionChangeRef = useRef(onSelectionChange);
+  const onZoomChangeRef = useRef(onZoomChange);
+  const onSaveStartRef = useRef(onSaveStart);
+  const onSaveSuccessRef = useRef(onSaveSuccess);
+  const onSaveErrorRef = useRef(onSaveError);
 
   useEffect(() => {
     onChangeRef.current = onChange;
@@ -152,7 +244,25 @@ function RootInner({
     onSaveRef.current = onSave;
     onExportRef.current = onExport;
     onHistoryChangeRef.current = props_onHistoryChange;
-  }, [onChange, onDirtyChange, onSave, onExport, props_onHistoryChange]);
+    onActiveSlideChangeRef.current = onActiveSlideChange;
+    onSelectionChangeRef.current = onSelectionChange;
+    onZoomChangeRef.current = onZoomChange;
+    onSaveStartRef.current = onSaveStart;
+    onSaveSuccessRef.current = onSaveSuccess;
+    onSaveErrorRef.current = onSaveError;
+  }, [
+    onChange,
+    onDirtyChange,
+    onSave,
+    onExport,
+    props_onHistoryChange,
+    onActiveSlideChange,
+    onSelectionChange,
+    onZoomChange,
+    onSaveStart,
+    onSaveSuccess,
+    onSaveError,
+  ]);
 
   useEffect(() => {
     if (theme) {
@@ -207,6 +317,29 @@ function RootInner({
           redoSize: nextFut,
         });
       }
+
+      // Active slide changes (click in rail, programmatic goToSlide).
+      if (state.currentSlideId !== prev.currentSlideId) {
+        onActiveSlideChangeRef.current?.(state.currentSlideId);
+      }
+
+      // Selection — shallow compare ids since the array is rebuilt on
+      // every selectElement call. Same slideId + same ids = no emit.
+      if (
+        state.selectedIds !== prev.selectedIds &&
+        !shallowEqualIds(state.selectedIds, prev.selectedIds)
+      ) {
+        onSelectionChangeRef.current?.({
+          slideId: state.currentSlideId,
+          elementIds: state.selectedIds,
+        });
+      }
+
+      // Zoom.
+      if (state.zoom !== prev.zoom) {
+        onZoomChangeRef.current?.(state.zoom);
+      }
+
       if (state.deck === prev.deck) return;
       onChangeRef.current?.(state.deck);
       const nextDirty = state.deck !== savedDeckRef.current;
@@ -239,12 +372,54 @@ function RootInner({
         return { undo: s.history.length, redo: s.future.length };
       },
       endCoalesce: () => store.getState().endCoalesce(),
+
+      goToSlide: (slideId: string) => {
+        const s = store.getState();
+        if (s.deck.slides.some((sl) => sl.id === slideId)) {
+          s.selectSlide(slideId);
+        }
+      },
+      nextSlide: () => {
+        const s = store.getState();
+        const idx = s.deck.slides.findIndex(
+          (sl) => sl.id === s.currentSlideId
+        );
+        const next = s.deck.slides[idx + 1];
+        if (next) s.selectSlide(next.id);
+      },
+      prevSlide: () => {
+        const s = store.getState();
+        const idx = s.deck.slides.findIndex(
+          (sl) => sl.id === s.currentSlideId
+        );
+        const prev = s.deck.slides[idx - 1];
+        if (prev) s.selectSlide(prev.id);
+      },
+
+      zoomIn: () => store.getState().zoomIn(),
+      zoomOut: () => store.getState().zoomOut(),
+      setZoom: (scale: number) => store.getState().setZoom(scale),
+
+      addSlide: (afterId?: string) => store.getState().addSlide(afterId),
+      duplicateSlide: (slideId: string) =>
+        store.getState().duplicateSlide(slideId),
+      deleteSlide: (slideId: string) => store.getState().deleteSlide(slideId),
+
+      getSelection: (): SelectionSnapshot => {
+        const s = store.getState();
+        return {
+          slideId: s.currentSlideId,
+          elementIds: [...s.selectedIds],
+        };
+      },
+
       getDeck: () => store.getState().deck,
       isDirty: () => dirtyRef.current,
       resetDirty: () => {
         savedDeckRef.current = store.getState().deck;
         if (dirtyRef.current) {
           dirtyRef.current = false;
+          setDirty(false);
           onDirtyChangeRef.current?.(false);
         }
       },
@@ -252,33 +427,58 @@ function RootInner({
     [store]
   );
 
-  // Wrap host save with dirty-flag reset so any TopBar.Save / imperative save
-  // path that funnels through here clears the dirty state on success.
+  // Wrap host save with:
+  //   - onSaveStart / onSaveSuccess / onSaveError lifecycle hooks
+  //   - dirty-flag reset on success
+  // The error still propagates so TopBar.Save's local "Saving…" → "idle"
+  // transition kicks in correctly.
   const wrappedSave = onSave
     ? async (d: Deck) => {
-        await onSaveRef.current!(d);
-        savedDeckRef.current = d;
-        if (dirtyRef.current) {
-          dirtyRef.current = false;
-          onDirtyChangeRef.current?.(false);
+        onSaveStartRef.current?.();
+        try {
+          await onSaveRef.current!(d);
+          savedDeckRef.current = d;
+          if (dirtyRef.current) {
+            dirtyRef.current = false;
+            setDirty(false);
+            onDirtyChangeRef.current?.(false);
+          }
+          onSaveSuccessRef.current?.();
+        } catch (err) {
+          onSaveErrorRef.current?.(
+            err instanceof Error ? err : new Error(String(err))
+          );
+          throw err;
         }
       }
     : 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>
   );
@@ -330,3 +530,12 @@ function RootShell({
     </div>
   );
 }
+
+function shallowEqualIds(a: readonly string[], b: readonly string[]): boolean {
+  if (a === b) return true;
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) {
+    if (a[i] !== b[i]) return false;
+  }
+  return true;
+}

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

@@ -37,6 +37,7 @@ export {
   type SlidewiseRootProps,
   type SlidewiseRootHandle,
   type HistoryState,
+  type SelectionSnapshot,
 } from "./SlidewiseRoot";
 export {
   SlideRail,
@@ -73,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={{

package/src/compound/topbar/Root.tsx

@@ -35,7 +35,8 @@ export function Root({
         alignItems: "center",
         padding: "0 14px",
         gap: 10,
-        background: "var(--slidewise-bar-bg, var(--app-bg))",
+        background:
+          "var(--slidewise-bg-topbar, var(--slidewise-bar-bg, var(--app-bg)))",
         borderBottom: "1px solid var(--border)",
         boxShadow: "var(--topbar-shadow)",
         fontFamily: "Inter, system-ui, sans-serif",

package/src/compound/topbar/Save.tsx

@@ -4,6 +4,7 @@ import { useEditorStore } from "@/lib/StoreProvider";
 import { useHostCallbacks } from "../HostContext";
 import { useIcons } from "../IconContext";
 import { useReadOnly } from "../ReadOnlyContext";
+import { useLabels } from "../LabelsContext";
 import { chromeBtnStyle, hoverHandlers } from "./styles";
 
 /**
@@ -27,7 +28,7 @@ export interface TopBarSaveProps {
 export function Save({
   className,
   style,
-  ariaLabel = "Save",
+  ariaLabel,
   labels,
   children,
 }: TopBarSaveProps = {}) {
@@ -35,6 +36,7 @@ export function Save({
   const { onSave: onSaveHost } = useHostCallbacks();
   const icons = useIcons();
   const readOnly = useReadOnly();
+  const ctxLabels = useLabels();
   const [phase, setPhase] = useState<"idle" | "saving" | "saved">("idle");
 
   if (readOnly) return null;
@@ -59,16 +61,16 @@ export function Save({
 
   const text =
     phase === "saving"
-      ? (labels?.saving ?? "Saving…")
+      ? (labels?.saving ?? ctxLabels.save.saving)
       : phase === "saved"
-        ? (labels?.saved ?? "Saved")
-        : (labels?.idle ?? "Save");
+        ? (labels?.saved ?? ctxLabels.save.saved)
+        : (labels?.idle ?? ctxLabels.save.idle);
 
   return (
     <button
       type="button"
       className={className}
-      aria-label={ariaLabel}
+      aria-label={ariaLabel ?? ctxLabels.save.idle}
       onClick={onClick}
       style={{ ...chromeBtnStyle(), ...style }}
       {...hoverHandlers()}