@textcortex/slidewise 1.4.0 → 1.5.0

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()}

package/src/compound/topbar/ThemeToggle.tsx

@@ -2,6 +2,7 @@ import type { CSSProperties, ReactNode } from "react";
 import { Sun, Moon } from "lucide-react";
 import { useEditor } from "@/lib/StoreProvider";
 import { useIcons } from "../IconContext";
+import { useLabels } from "../LabelsContext";
 import { iconBtnStyle, hoverHandlers } from "./styles";
 
 /**
@@ -24,11 +25,12 @@ export function ThemeToggle({
   const theme = useEditor((s) => s.theme);
   const toggleTheme = useEditor((s) => s.toggleTheme);
   const icons = useIcons();
+  const ctxLabels = useLabels();
 
   const label =
     theme === "dark"
-      ? (labels?.toggleToLight ?? "Light mode")
-      : (labels?.toggleToDark ?? "Dark mode");
+      ? (labels?.toggleToLight ?? ctxLabels.themeToggle.toLight)
+      : (labels?.toggleToDark ?? ctxLabels.themeToggle.toDark);
 
   return (
     <button

package/src/compound/topbar/Title.tsx

@@ -3,6 +3,7 @@ import { Sparkles } from "lucide-react";
 import { useEditor } from "@/lib/StoreProvider";
 import { useIcons } from "../IconContext";
 import { useReadOnly } from "../ReadOnlyContext";
+import { useLabels } from "../LabelsContext";
 
 /**
  * Deck title input wrapped in the "Smart" pill. Reads + writes
@@ -23,6 +24,7 @@ export function Title({ className, style }: TopBarTitleProps = {}) {
   const setTitle = useEditor((s) => s.setTitle);
   const icons = useIcons();
   const readOnly = useReadOnly();
+  const labels = useLabels();
 
   return (
     <div
@@ -56,10 +58,10 @@ export function Title({ className, style }: TopBarTitleProps = {}) {
         }}
       >
         {icons.smart ?? <Sparkles size={11} />}
-        Smart
+        {labels.smart}
       </span>
       <input
-        aria-label="Deck title"
+        aria-label={labels.titleAriaLabel}
         value={title}
         readOnly={readOnly}
         onChange={(e) => setTitle(e.target.value)}

package/src/compound/topbar/Undo.tsx

@@ -3,6 +3,7 @@ import { Undo2 } 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";
 
 /**
@@ -31,21 +32,23 @@ export interface TopBarUndoProps {
 export function Undo({
   className,
   style,
-  ariaLabel = "Undo",
+  ariaLabel,
   children,
 }: TopBarUndoProps = {}) {
   const undo = useEditor((s) => s.undo);
   const canUndo = useEditor((s) => s.history.length > 0);
   const icons = useIcons();
   const readOnly = useReadOnly();
+  const labels = useLabels();
+  const resolvedAria = ariaLabel ?? labels.undo;
   if (readOnly) return null;
 
   return (
     <button
       type="button"
       className={className}
-      title={ariaLabel}
-      aria-label={ariaLabel}
+      title={resolvedAria}
+      aria-label={resolvedAria}
       disabled={!canUndo}
       onClick={undo}
       style={{

package/src/index.ts

@@ -46,6 +46,8 @@ export {
   useIcons,
   useReadOnly,
   useDirty,
+  useLabels,
+  useSurfaces,
   useEditor,
   useEditorStore,
   useSlides,
@@ -63,6 +65,9 @@ export {
   type SelectionSnapshot,
   type SlidewiseHostCallbacks,
   type SlidewiseIcons,
+  type SlidewiseLabels,
+  type SlidewiseSurfaces,
+  type ResolvedLabels,
   type RegionProps,
   type TopBarProps,
   type TopBarSlotId,