@textcortex/slidewise 1.6.0 → 1.8.0

package/package.json

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

package/src/SlidewiseEditor.tsx

@@ -7,8 +7,8 @@ import {
   type SelectionSnapshot,
 } from "./compound/SlidewiseRoot";
 import { TopBar } from "./compound/topbar";
+import { SlideRail } from "./compound/sliderail";
 import {
-  SlideRail,
   Canvas,
   BottomToolbar,
   Body,
@@ -17,6 +17,7 @@ import {
 import type { SlidewiseIcons } from "./compound/IconContext";
 import type { SlidewiseLabels } from "./compound/LabelsContext";
 import type { SlidewiseSurfaces } from "./compound/SurfacesContext";
+import type { SlidewiseCanvasConfig } from "./compound/CanvasContext";
 import type { Transition } from "framer-motion";
 import type { Deck } from "@/lib/types";
 import "./SlidewiseEditor.css";
@@ -96,6 +97,13 @@ export interface SlidewiseEditorProps {
    * list of keys.
    */
   surfaces?: SlidewiseSurfaces;
+  /**
+   * Canvas/viewport configuration: padding, initial zoom, slide shadow +
+   * radius, and host-driven slide-background overrides. Use this when the
+   * default "slide fills the workspace" presentation isn't right for your
+   * host chrome.
+   */
+  canvas?: SlidewiseCanvasConfig;
   /** Extra class names appended to the editor root. */
   className?: string;
   /** Inline style applied to the editor root. */
@@ -151,6 +159,7 @@ export const SlidewiseEditor = forwardRef<
     icons,
     labels,
     surfaces,
+    canvas,
     className,
     style,
   },
@@ -178,6 +187,7 @@ export const SlidewiseEditor = forwardRef<
     icons,
     labels,
     surfaces,
+    canvas,
     className,
     style,
   };

package/src/SlidewiseFileEditor.tsx

@@ -12,6 +12,7 @@ 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 type { SlidewiseCanvasConfig } from "./compound/CanvasContext";
 import { DEFAULT_LABELS } from "./compound/LabelsContext";
 import type { Transition } from "framer-motion";
 import type { HistoryState, SelectionSnapshot } from "./compound/SlidewiseRoot";
@@ -106,6 +107,11 @@ export interface SlidewiseFileEditorProps {
    * `--slidewise-bg-*` CSS variables.
    */
   surfaces?: SlidewiseSurfaces;
+  /**
+   * Canvas/viewport configuration: padding, initial zoom, slide shadow +
+   * radius, and host-driven slide-background overrides.
+   */
+  canvas?: SlidewiseCanvasConfig;
   /**
    * Reduced-motion behavior. `"system"` (default) respects the OS
    * preference; `true` forces motion off; `false` forces it on.
@@ -217,6 +223,7 @@ export const SlidewiseFileEditor = forwardRef<
     icons,
     labels,
     surfaces,
+    canvas,
     reduceMotion,
     transition,
     className,
@@ -394,6 +401,7 @@ export const SlidewiseFileEditor = forwardRef<
         icons={icons}
         labels={labels}
         surfaces={surfaces}
+        canvas={canvas}
         reduceMotion={reduceMotion}
         transition={transition}
         onChange={(next) => {

package/src/components/editor/Canvas.tsx

@@ -5,6 +5,10 @@ import { SLIDE_W, SLIDE_H, type SlideElement, type ElementDraft } from "@/lib/ty
 import { ElementView } from "./ElementView";
 import { SelectionFrame } from "./SelectionFrame";
 import { FloatingToolbar } from "./FloatingToolbar";
+import {
+  useCanvasConfig,
+  resolveSlideBackground,
+} from "@/compound/CanvasContext";
 
 export function Canvas() {
   const store = useEditorStore();
@@ -22,6 +26,7 @@ export function Canvas() {
   const deleteElement = useEditor((s) => s.deleteElement);
   const pushHistory = useEditor((s) => s.pushHistory);
 
+  const canvasConfig = useCanvasConfig();
   const [editingId, setEditingId] = useState<string | null>(null);
   const wrapRef = useRef<HTMLDivElement>(null);
   const [autoScale, setAutoScale] = useState(0.6);
@@ -30,10 +35,12 @@ export function Canvas() {
     if (fitMode !== "fit" || !wrapRef.current) return;
     const recompute = () => {
       const r = wrapRef.current!.getBoundingClientRect();
-      // Generous fill: small breathing room horizontally, plus enough vertical
-      // headroom for the floating toolbar (~56) and the bottom toolbar (~76).
-      const padX = 32;
-      const padY = 56 + 76 + 16;
+      // Host-controllable padding via `canvas.padding` on <Slidewise.Root>.
+      // Default mirrors what the editor needed before the prop existed —
+      // ~32px horizontal breathing room and enough vertical headroom for
+      // the floating toolbar (~56) and the bottom toolbar (~76).
+      const padX = canvasConfig.padding.x * 2;
+      const padY = canvasConfig.padding.y * 2;
       const fit = Math.min(
         (r.width - padX) / SLIDE_W,
         (r.height - padY) / SLIDE_H
@@ -44,7 +51,7 @@ export function Canvas() {
     const ro = new ResizeObserver(recompute);
     ro.observe(wrapRef.current);
     return () => ro.disconnect();
-  }, [fitMode]);
+  }, [fitMode, canvasConfig.padding.x, canvasConfig.padding.y]);
 
   const scale = fitMode === "fit" ? autoScale : zoom;
 
@@ -245,9 +252,9 @@ export function Canvas() {
           width: SLIDE_W * scale,
           height: SLIDE_H * scale,
           transform: "translate(-50%, -50%)",
-          background: slide.background,
-          borderRadius: 8,
-          boxShadow: "var(--slide-shadow)",
+          background: resolveSlideBackground(canvasConfig, slide),
+          borderRadius: canvasConfig.slideRadius,
+          boxShadow: canvasConfig.slideShadow,
         }}
       >
         <div

package/src/components/editor/SlideView.tsx

@@ -1,6 +1,10 @@
 import type { Slide } from "@/lib/types";
 import { SLIDE_W, SLIDE_H } from "@/lib/types";
 import { ElementView } from "./ElementView";
+import {
+  useCanvasConfig,
+  resolveSlideBackground,
+} from "@/compound/CanvasContext";
 
 export function SlideView({
   slide,
@@ -9,12 +13,13 @@ export function SlideView({
   slide: Slide;
   scale?: number;
 }) {
+  const canvasConfig = useCanvasConfig();
   return (
     <div
       style={{
         width: SLIDE_W * scale,
         height: SLIDE_H * scale,
-        background: slide.background,
+        background: resolveSlideBackground(canvasConfig, slide),
         position: "relative",
         overflow: "hidden",
         borderRadius: 12 * scale,

package/src/compound/CanvasContext.tsx

@@ -0,0 +1,176 @@
+import { createContext, useContext, useMemo, type ReactNode } from "react";
+import type { Slide } from "@/lib/types";
+
+/**
+ * Canvas/viewport configuration. Lets hosts tame the slide presentation so a
+ * slide with a bold background fill doesn't paint the entire workspace —
+ * which is what `<Slidewise.Root>` did by default before this prop existed.
+ *
+ * Pass any subset:
+ *
+ * ```tsx
+ * <Slidewise.Root
+ *   canvas={{
+ *     padding: { x: 48, y: 32 },
+ *     defaultZoom: 0.7,
+ *     slideRadius: 12,
+ *     slideShadow:
+ *       "0 1px 2px rgba(0,0,0,0.25), 0 24px 60px rgba(0,0,0,0.45)",
+ *     resolveSlideBackground: (slide) =>
+ *       hostThemeOverridesSlideBg ? "#ffffff" : undefined,
+ *   }}
+ * >
+ * ```
+ *
+ * Outside the slide rectangle hosts still own the canvas-frame backdrop via
+ * the `--slidewise-bg-canvas-from` / `--slidewise-bg-canvas-to` CSS tokens
+ * or the `surfaces.canvasFrom` / `surfaces.canvasTo` prop entries.
+ */
+export interface SlidewiseCanvasConfig {
+  /**
+   * Padding between the slide and the canvas frame, in pixels. Used both
+   * for the auto-fit calculation and as actual whitespace around the
+   * slide. Pass a number for uniform padding, or an object for per-axis
+   * control. Default: roughly the room the floating toolbars need —
+   * 32px horizontal, ~148px vertical (top bar + bottom toolbar).
+   */
+  padding?: number | { x?: number; y?: number };
+  /**
+   * How the slide scales inside the canvas:
+   * - `"fit"` (default) auto-shrinks the slide to fit while preserving aspect
+   * - `"fill"` reserved for a future fill behavior; currently equivalent to fit
+   * - `"manual"` uses `defaultZoom` (or whatever the user has set via
+   *   `api.setZoom` / pinch-zoom) verbatim
+   *
+   * Applied via `store.setFitMode()` once on mount. Subsequent user
+   * interactions (zoom in, fit toggle) override this.
+   */
+  fitMode?: "fit" | "fill" | "manual";
+  /**
+   * Initial zoom level when `fitMode === "manual"` (or as a starting point
+   * when the user switches off auto-fit). 1 = 100%. Clamped to [0.1, 4].
+   */
+  defaultZoom?: number;
+  /**
+   * Box-shadow applied to the slide paper. Any valid CSS `box-shadow`
+   * value. Defaults to `var(--slide-shadow)`.
+   */
+  slideShadow?: string;
+  /**
+   * Border-radius applied to the slide paper. Number = pixels; string =
+   * any valid CSS length. Defaults to `8`.
+   */
+  slideRadius?: number | string;
+  /**
+   * Hard-override the slide's background paint regardless of what the
+   * deck's `slide.background` says. Useful when the host wants every
+   * slide to render as a neutral surface (`#ffffff`, host-tinted, etc.)
+   * for a viewer experience where the deck's baked fills would clash
+   * with the chrome.
+   *
+   * If both `forceSlideBackground` and `resolveSlideBackground` are
+   * passed, the force value wins.
+   */
+  forceSlideBackground?: string;
+  /**
+   * Per-slide background resolver. Receives the current slide; return a
+   * CSS value to override, or `undefined` to fall through to the slide's
+   * own `background` property. Useful for "respect host theme but only
+   * for slides that don't explicitly set a fill" patterns.
+   */
+  resolveSlideBackground?: (slide: Slide) => string | undefined;
+}
+
+/**
+ * Fully-resolved canvas config, with internal defaults filled in. Consumers
+ * (the Canvas component, host-rendered surfaces) read this shape via
+ * `useCanvasConfig()` and never have to check for undefined.
+ */
+export interface ResolvedCanvasConfig {
+  padding: { x: number; y: number };
+  fitMode: "fit" | "fill" | "manual" | null;
+  defaultZoom: number | null;
+  slideShadow: string;
+  slideRadius: number | string;
+  forceSlideBackground: string | null;
+  resolveSlideBackground:
+    | ((slide: Slide) => string | undefined)
+    | null;
+}
+
+export const DEFAULT_CANVAS_CONFIG: ResolvedCanvasConfig = {
+  // Matches the previous hardcoded padX=32 / padY=56+76+16 in Canvas.tsx —
+  // enough vertical room for the top bar + the floating bottom toolbar.
+  padding: { x: 32, y: 148 },
+  fitMode: null,
+  defaultZoom: null,
+  slideShadow: "var(--slide-shadow)",
+  slideRadius: 8,
+  forceSlideBackground: null,
+  resolveSlideBackground: null,
+};
+
+function mergeCanvasConfig(
+  config: SlidewiseCanvasConfig | undefined
+): ResolvedCanvasConfig {
+  if (!config) return DEFAULT_CANVAS_CONFIG;
+  let padding = DEFAULT_CANVAS_CONFIG.padding;
+  if (typeof config.padding === "number") {
+    padding = { x: config.padding, y: config.padding };
+  } else if (config.padding && typeof config.padding === "object") {
+    padding = {
+      x: config.padding.x ?? DEFAULT_CANVAS_CONFIG.padding.x,
+      y: config.padding.y ?? DEFAULT_CANVAS_CONFIG.padding.y,
+    };
+  }
+  return {
+    padding,
+    fitMode: config.fitMode ?? null,
+    defaultZoom: config.defaultZoom ?? null,
+    slideShadow: config.slideShadow ?? DEFAULT_CANVAS_CONFIG.slideShadow,
+    slideRadius: config.slideRadius ?? DEFAULT_CANVAS_CONFIG.slideRadius,
+    forceSlideBackground: config.forceSlideBackground ?? null,
+    resolveSlideBackground: config.resolveSlideBackground ?? null,
+  };
+}
+
+const CanvasContext = createContext<ResolvedCanvasConfig>(DEFAULT_CANVAS_CONFIG);
+
+export function CanvasConfigProvider({
+  config,
+  children,
+}: {
+  config: SlidewiseCanvasConfig | undefined;
+  children: ReactNode;
+}) {
+  const value = useMemo(() => mergeCanvasConfig(config), [config]);
+  return (
+    <CanvasContext.Provider value={value}>{children}</CanvasContext.Provider>
+  );
+}
+
+/**
+ * Read the resolved canvas configuration. Always returns a complete object
+ * with defaults filled in.
+ */
+export function useCanvasConfig(): ResolvedCanvasConfig {
+  return useContext(CanvasContext);
+}
+
+/**
+ * Convenience helper used by the internal Canvas component (and exported
+ * so host-rendered slide previews can reuse the same resolution rules).
+ * Returns whatever the canvas config says, falling back to the slide's
+ * own `background` property.
+ */
+export function resolveSlideBackground(
+  config: ResolvedCanvasConfig,
+  slide: Slide
+): string {
+  if (config.forceSlideBackground) return config.forceSlideBackground;
+  if (config.resolveSlideBackground) {
+    const resolved = config.resolveSlideBackground(slide);
+    if (resolved !== undefined) return resolved;
+  }
+  return slide.background;
+}

package/src/compound/SlidewiseRoot.tsx

@@ -29,6 +29,10 @@ import {
   surfacesToCssVars,
   type SlidewiseSurfaces,
 } from "./SurfacesContext";
+import {
+  CanvasConfigProvider,
+  type SlidewiseCanvasConfig,
+} from "./CanvasContext";
 
 export interface SlidewiseRootProps {
   /**
@@ -118,6 +122,14 @@ export interface SlidewiseRootProps {
    * ```
    */
   surfaces?: SlidewiseSurfaces;
+  /**
+   * Canvas/viewport configuration. Set `padding`, `slideRadius`,
+   * `slideShadow`, and an initial `defaultZoom` to keep the slide
+   * presented as a centered card rather than letting a bold deck fill
+   * paint the entire workspace. `forceSlideBackground` /
+   * `resolveSlideBackground` let hosts override per-slide fills.
+   */
+  canvas?: SlidewiseCanvasConfig;
   /** Extra class names appended to the root. */
   className?: string;
   /** Inline style applied to the root. */
@@ -241,6 +253,7 @@ function RootInner({
   icons,
   labels,
   surfaces,
+  canvas,
   className,
   style,
   children,
@@ -305,6 +318,14 @@ function RootInner({
         store.getState().selectSlide(initialSlideId);
       }
     }
+    // Apply canvas defaults once on mount. setZoom auto-flips fitMode to
+    // "manual" so we set fitMode last to honor an explicit canvas.fitMode.
+    if (canvas?.defaultZoom !== undefined) {
+      store.getState().setZoom(canvas.defaultZoom);
+    }
+    if (canvas?.fitMode) {
+      store.getState().setFitMode(canvas.fitMode);
+    }
     // run once on mount
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -515,17 +536,19 @@ function RootInner({
         <IconProvider icons={icons ?? {}}>
           <LabelsProvider labels={labels}>
             <SurfacesProvider surfaces={surfaces}>
-              <DirtyProvider dirty={dirty}>
-                <HostProvider callbacks={{ onSave: wrappedSave, onExport }}>
-                  <RootShell
-                    fontFamily={fontFamily}
-                    className={combinedClassName}
-                    style={mergedStyle}
-                  >
-                    {children}
-                  </RootShell>
-                </HostProvider>
-              </DirtyProvider>
+              <CanvasConfigProvider config={canvas}>
+                <DirtyProvider dirty={dirty}>
+                  <HostProvider callbacks={{ onSave: wrappedSave, onExport }}>
+                    <RootShell
+                      fontFamily={fontFamily}
+                      className={combinedClassName}
+                      style={mergedStyle}
+                    >
+                      {children}
+                    </RootShell>
+                  </HostProvider>
+                </DirtyProvider>
+              </CanvasConfigProvider>
             </SurfacesProvider>
           </LabelsProvider>
         </IconProvider>

package/src/compound/index.ts

@@ -40,7 +40,6 @@ export {
   type SelectionSnapshot,
 } from "./SlidewiseRoot";
 export {
-  SlideRail,
   Canvas,
   BottomToolbar,
   RightPanel,
@@ -50,6 +49,19 @@ export {
 } from "./parts";
 
 export { TopBar, type TopBarProps, type TopBarSlotId } from "./topbar";
+export {
+  SlideRail,
+  useSlideRailItem,
+  type SlideRailProps,
+  type SlideRailRootProps,
+  type SlideRailHeaderProps,
+  type SlideRailListProps,
+  type SlideRailItemProps,
+  type SlideRailThumbnailProps,
+  type SlideRailNumberProps,
+  type SlideRailAddButtonProps,
+  type SlideRailItemContextValue,
+} from "./sliderail";
 export type {
   TopBarRootProps,
   TopBarTitleProps,
@@ -87,6 +99,14 @@ export {
   surfacesToCssVars,
   type SlidewiseSurfaces,
 } from "./SurfacesContext";
+export {
+  CanvasConfigProvider,
+  useCanvasConfig,
+  resolveSlideBackground,
+  DEFAULT_CANVAS_CONFIG,
+  type SlidewiseCanvasConfig,
+  type ResolvedCanvasConfig,
+} from "./CanvasContext";
 
 /**
  * Store hooks. Use these from host components anywhere under

package/src/compound/parts.tsx

@@ -1,5 +1,4 @@
 import type { CSSProperties, ReactNode } from "react";
-import { SlideRail as SlideRailInternal } from "@/components/editor/SlideRail";
 import { Canvas as CanvasInternal } from "@/components/editor/Canvas";
 import { BottomToolbar as BottomToolbarInternal } from "@/components/editor/BottomToolbar";
 
@@ -8,9 +7,10 @@ import { BottomToolbar as BottomToolbarInternal } from "@/components/editor/Bott
  * so any part can be omitted, wrapped, or replaced. None of these accept
  * deck/onChange/onSave props — those live on `<Slidewise.Root>`.
  *
- * Note: `<Slidewise.TopBar>` is defined separately in `./topbar/` because
- * it itself decomposes into subparts (`TopBar.Root`, `TopBar.Title`,
- * `TopBar.Undo`, etc.) and ships a `hide` prop for per-button removal.
+ * Note: `<Slidewise.TopBar>` and `<Slidewise.SlideRail>` are defined
+ * separately under `./topbar/` and `./sliderail/` because they decompose
+ * into their own subparts. Both ship a callable component for the default
+ * arrangement plus a namespace of named subparts.
  */
 
 export interface RegionProps {
@@ -18,13 +18,6 @@ export interface RegionProps {
   style?: CSSProperties;
 }
 
-/**
- * Left-side slide thumbnail rail with add/duplicate/delete.
- */
-export function SlideRail(_props: RegionProps = {}) {
-  return <SlideRailInternal />;
-}
-
 /**
  * The main editing canvas. This is the only part that's effectively required
  * — without it the editor renders nothing visible. Layout-wise it expects

package/src/compound/sliderail/AddButton.tsx

@@ -0,0 +1,76 @@
+import type { CSSProperties, ReactNode } from "react";
+import { Plus } from "lucide-react";
+import { useEditor } from "@/lib/StoreProvider";
+import { useReadOnly } from "../ReadOnlyContext";
+import { useLabels } from "../LabelsContext";
+
+/**
+ * Dashed "New Slide" button at the bottom of the rail. Calls
+ * `store.addSlide()`. Hidden in read-only mode.
+ *
+ * Replace with your own button when you need a different shape; the
+ * store action is exported (`useEditor((s) => s.addSlide)`).
+ */
+export interface SlideRailAddButtonProps {
+  className?: string;
+  style?: CSSProperties;
+  ariaLabel?: string;
+  /** Override the visible label. Defaults to `labels.addSlide`. */
+  label?: string;
+  children?: ReactNode;
+}
+
+export function AddButton({
+  className,
+  style,
+  ariaLabel,
+  label,
+  children,
+}: SlideRailAddButtonProps = {}) {
+  const addSlide = useEditor((s) => s.addSlide);
+  const readOnly = useReadOnly();
+  const labels = useLabels();
+  if (readOnly) return null;
+
+  const resolved = label ?? labels.addSlide;
+
+  return (
+    <button
+      type="button"
+      className={className}
+      aria-label={ariaLabel ?? resolved}
+      onClick={() => addSlide()}
+      style={{
+        height: 44,
+        margin: 12,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 6,
+        background: "var(--slidewise-bg-app, var(--app-bg))",
+        border: "1px dashed var(--border-dashed)",
+        borderRadius: "var(--slidewise-radius, 10px)",
+        color: "var(--ink)",
+        fontSize: 13,
+        fontWeight: 500,
+        cursor: "pointer",
+        transition: "background 120ms, border-color 120ms, color 120ms",
+        fontFamily: "inherit",
+        ...style,
+      }}
+      onMouseEnter={(e) => {
+        e.currentTarget.style.borderColor =
+          "var(--slidewise-accent, var(--accent))";
+        e.currentTarget.style.color =
+          "var(--slidewise-accent, var(--accent))";
+      }}
+      onMouseLeave={(e) => {
+        e.currentTarget.style.borderColor = "var(--border-dashed)";
+        e.currentTarget.style.color = "var(--ink)";
+      }}
+    >
+      {children ?? <Plus size={14} />}
+      {resolved}
+    </button>
+  );
+}

package/src/compound/sliderail/Header.tsx

@@ -0,0 +1,84 @@
+import type { CSSProperties, PropsWithChildren } from "react";
+import { LayoutGrid } from "lucide-react";
+import { useEditor } from "@/lib/StoreProvider";
+
+/**
+ * Default rail header. Renders the grid-view button and a "current / total"
+ * slide counter. Hosts can pass `children` to replace the whole content
+ * while keeping the height + border, or render their own `<header>` instead.
+ *
+ * ```tsx
+ * // Default counter
+ * <Slidewise.SlideRail.Header />
+ *
+ * // Custom content
+ * <Slidewise.SlideRail.Header>
+ *   <strong>{deckTitle}</strong>
+ * </Slidewise.SlideRail.Header>
+ * ```
+ */
+export interface SlideRailHeaderProps {
+  className?: string;
+  style?: CSSProperties;
+}
+
+export function Header({
+  className,
+  style,
+  children,
+}: PropsWithChildren<SlideRailHeaderProps>) {
+  const slides = useEditor((s) => s.deck.slides);
+  const currentId = useEditor((s) => s.currentSlideId);
+  const setView = useEditor((s) => s.setView);
+  const idx = slides.findIndex((s) => s.id === currentId);
+
+  return (
+    <div
+      className={className}
+      style={{
+        height: 36,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        padding: "0 12px",
+        fontSize: 12,
+        color: "var(--ink-muted)",
+        borderBottom: "1px solid var(--border)",
+        ...style,
+      }}
+    >
+      {children ?? (
+        <>
+          <button
+            title="Slide overview"
+            aria-label="Open slide overview"
+            onClick={() => setView("grid")}
+            style={{
+              width: 28,
+              height: 28,
+              border: "none",
+              borderRadius: 6,
+              background: "transparent",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              color: "var(--ink)",
+              cursor: "pointer",
+            }}
+            onMouseEnter={(e) =>
+              (e.currentTarget.style.background = "var(--hover-strong)")
+            }
+            onMouseLeave={(e) =>
+              (e.currentTarget.style.background = "transparent")
+            }
+          >
+            <LayoutGrid size={14} />
+          </button>
+          <span>
+            {idx + 1} / {slides.length}
+          </span>
+        </>
+      )}
+    </div>
+  );
+}