@textcortex/slidewise 1.4.0 → 1.6.0

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={{

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,