@textcortex/slidewise 1.5.0 → 1.7.0

package/src/compound/sliderail/List.tsx

@@ -0,0 +1,67 @@
+import type { CSSProperties, ReactNode } from "react";
+import { useEditor } from "@/lib/StoreProvider";
+import type { Slide } from "@/lib/types";
+import { Item } from "./Item";
+import { Thumbnail } from "./Thumbnail";
+import { Number as SlideNumber } from "./Number";
+
+/**
+ * Iterates `deck.slides` and renders each one. Pass a render-prop child
+ * for full control over what each row contains; omit the child to get
+ * the default `<Item><Thumbnail /><Number /></Item>` layout.
+ *
+ * ```tsx
+ * // Default
+ * <Slidewise.SlideRail.List />
+ *
+ * // Custom — add a per-row context menu
+ * <Slidewise.SlideRail.List>
+ *   {(slide) => (
+ *     <Slidewise.SlideRail.Item slide={slide}>
+ *       <Slidewise.SlideRail.Thumbnail />
+ *       <Slidewise.SlideRail.Number />
+ *       <MyContextMenu slide={slide} />
+ *     </Slidewise.SlideRail.Item>
+ *   )}
+ * </Slidewise.SlideRail.List>
+ * ```
+ */
+export interface SlideRailListProps {
+  className?: string;
+  style?: CSSProperties;
+  /**
+   * Optional render-prop. Receives each slide + its zero-based index;
+   * return the row content. When omitted, the default row layout
+   * is used.
+   */
+  children?: (slide: Slide, index: number) => ReactNode;
+}
+
+export function List({ className, style, children }: SlideRailListProps) {
+  const slides = useEditor((s) => s.deck.slides);
+
+  return (
+    <div
+      className={className}
+      style={{
+        flex: 1,
+        overflowY: "auto",
+        padding: "12px 0",
+        ...style,
+      }}
+    >
+      {slides.map((slide, index) =>
+        children ? (
+          // Render-prop branch: host returns whatever they want, typically
+          // wrapping their JSX in a SlideRail.Item to wire selection.
+          <div key={slide.id}>{children(slide, index)}</div>
+        ) : (
+          <Item key={slide.id} slide={slide}>
+            <Thumbnail />
+            <SlideNumber />
+          </Item>
+        )
+      )}
+    </div>
+  );
+}

package/src/compound/sliderail/Number.tsx

@@ -0,0 +1,57 @@
+import type { CSSProperties } from "react";
+import { useSlideRailItem } from "./ItemContext";
+
+/**
+ * Renders the slide's "01" / "02" badge in the top-left corner of the rail
+ * item. Reads the current slide's index from `<SlideRail.Item>`'s context.
+ *
+ * Render after `<SlideRail.Thumbnail>` so it stacks on top (or position
+ * it manually via `style`).
+ */
+export interface SlideRailNumberProps {
+  className?: string;
+  style?: CSSProperties;
+  /**
+   * Format the displayed number. Default is zero-padded to width 2
+   * (`01`, `02`, …, `10`).
+   */
+  format?: (index: number) => string;
+}
+
+const defaultFormat = (i: number) => String(i + 1).padStart(2, "0");
+
+export function Number({
+  className,
+  style,
+  format = defaultFormat,
+}: SlideRailNumberProps = {}) {
+  const { index, isCurrent } = useSlideRailItem();
+
+  return (
+    <span
+      className={className}
+      aria-hidden="true"
+      style={{
+        position: "absolute",
+        left: 20,
+        top: 6,
+        zIndex: 2,
+        width: 22,
+        height: 22,
+        borderRadius: 5,
+        background: isCurrent ? "var(--ink)" : "#6B7280",
+        color: isCurrent ? "var(--app-bg)" : "#fff",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        fontSize: 11,
+        fontWeight: 700,
+        fontFamily: "Inter, system-ui, sans-serif",
+        pointerEvents: "none",
+        ...style,
+      }}
+    >
+      {format(index)}
+    </span>
+  );
+}

package/src/compound/sliderail/Root.tsx

@@ -0,0 +1,54 @@
+import type { CSSProperties, PropsWithChildren } from "react";
+
+export const SLIDERAIL_DEFAULT_WIDTH = 168;
+
+/**
+ * Container for the slide rail subparts. Owns the rail's width, surface
+ * color, and divider. Hosts replace this when they want a different rail
+ * geometry (wider, narrower, full-bleed, etc.) — otherwise just render
+ * subparts inside it.
+ *
+ * ```tsx
+ * <Slidewise.SlideRail.Root>
+ *   <Slidewise.SlideRail.Header />
+ *   <Slidewise.SlideRail.List />
+ *   <Slidewise.SlideRail.AddButton />
+ * </Slidewise.SlideRail.Root>
+ * ```
+ */
+export interface SlideRailRootProps {
+  className?: string;
+  style?: CSSProperties;
+  /** Rail width in pixels. Defaults to 168. */
+  width?: number | string;
+}
+
+export function Root({
+  className,
+  style,
+  width = SLIDERAIL_DEFAULT_WIDTH,
+  children,
+}: PropsWithChildren<SlideRailRootProps>) {
+  return (
+    <div
+      className={
+        className ? `slidewise-rail ${className}` : "slidewise-rail"
+      }
+      style={{
+        width,
+        flexShrink: 0,
+        background: "var(--slidewise-bg-rail, var(--rail-bg))",
+        borderRight: "1px solid var(--border)",
+        boxShadow: "var(--rail-shadow)",
+        display: "flex",
+        flexDirection: "column",
+        fontFamily: "Inter, system-ui, sans-serif",
+        overflow: "hidden",
+        zIndex: 5,
+        ...style,
+      }}
+    >
+      {children}
+    </div>
+  );
+}

package/src/compound/sliderail/Thumbnail.tsx

@@ -0,0 +1,58 @@
+import type { CSSProperties } from "react";
+import { SlideView } from "@/components/editor/SlideView";
+import { SLIDE_W } from "@/lib/types";
+import { useSlideRailItem } from "./ItemContext";
+
+const DEFAULT_THUMB_W = 132;
+
+/**
+ * Renders the slide preview inside the rail item. Reads the current slide
+ * from `<SlideRail.Item>`'s context. Honors the focused/non-focused state
+ * via an accent border.
+ *
+ * ```tsx
+ * <Slidewise.SlideRail.Item slide={slide}>
+ *   <Slidewise.SlideRail.Thumbnail />
+ * </Slidewise.SlideRail.Item>
+ * ```
+ */
+export interface SlideRailThumbnailProps {
+  className?: string;
+  style?: CSSProperties;
+  /** Pixel width for the rendered thumbnail. Defaults to 132. */
+  width?: number;
+}
+
+export function Thumbnail({
+  className,
+  style,
+  width = DEFAULT_THUMB_W,
+}: SlideRailThumbnailProps = {}) {
+  const { slide, isCurrent } = useSlideRailItem();
+  const scale = width / SLIDE_W;
+
+  return (
+    <div style={{ position: "relative" }}>
+      <div
+        className={className}
+        style={{
+          display: "block",
+          width,
+          border: isCurrent
+            ? "2px solid var(--slidewise-accent, var(--accent))"
+            : "2px solid transparent",
+          borderRadius: 8,
+          padding: 0,
+          background: "transparent",
+          overflow: "hidden",
+          transition: "border-color 120ms",
+          ...style,
+        }}
+      >
+        <div style={{ pointerEvents: "none" }}>
+          <SlideView slide={slide} scale={scale} />
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/compound/sliderail/index.tsx

@@ -0,0 +1,74 @@
+import type { CSSProperties } from "react";
+import { Root, type SlideRailRootProps } from "./Root";
+import { Header, type SlideRailHeaderProps } from "./Header";
+import { List, type SlideRailListProps } from "./List";
+import { Item, type SlideRailItemProps } from "./Item";
+import { Thumbnail, type SlideRailThumbnailProps } from "./Thumbnail";
+import { Number, type SlideRailNumberProps } from "./Number";
+import { AddButton, type SlideRailAddButtonProps } from "./AddButton";
+
+export interface SlideRailProps {
+  className?: string;
+  style?: CSSProperties;
+  /** Rail width; forwarded to `<SlideRail.Root>`. */
+  width?: number | string;
+  /** Omit the header. */
+  hideHeader?: boolean;
+  /** Omit the "New Slide" button. */
+  hideAddButton?: boolean;
+}
+
+/**
+ * Default SlideRail arrangement. Equivalent to:
+ *
+ * ```tsx
+ * <Slidewise.SlideRail.Root>
+ *   <Slidewise.SlideRail.Header />
+ *   <Slidewise.SlideRail.List />
+ *   <Slidewise.SlideRail.AddButton />
+ * </Slidewise.SlideRail.Root>
+ * ```
+ *
+ * For full control (per-row context menus, custom thumbnail layout,
+ * etc.), drop down to the subparts directly.
+ */
+function DefaultSlideRail({
+  className,
+  style,
+  width,
+  hideHeader,
+  hideAddButton,
+}: SlideRailProps = {}) {
+  return (
+    <Root className={className} style={style} width={width}>
+      {!hideHeader && <Header />}
+      <List />
+      {!hideAddButton && <AddButton />}
+    </Root>
+  );
+}
+
+/**
+ * `<Slidewise.SlideRail />` is both the default arrangement and a
+ * namespace of subparts. Mirrors `<Slidewise.TopBar>`.
+ */
+export const SlideRail = Object.assign(DefaultSlideRail, {
+  Root,
+  Header,
+  List,
+  Item,
+  Thumbnail,
+  Number,
+  AddButton,
+});
+
+export { useSlideRailItem, type SlideRailItemContextValue } from "./ItemContext";
+export type {
+  SlideRailRootProps,
+  SlideRailHeaderProps,
+  SlideRailListProps,
+  SlideRailItemProps,
+  SlideRailThumbnailProps,
+  SlideRailNumberProps,
+  SlideRailAddButtonProps,
+};

package/src/index.ts

@@ -68,9 +68,19 @@ export {
   type SlidewiseLabels,
   type SlidewiseSurfaces,
   type ResolvedLabels,
+  useSlideRailItem,
   type RegionProps,
   type TopBarProps,
   type TopBarSlotId,
+  type SlideRailProps,
+  type SlideRailRootProps,
+  type SlideRailHeaderProps,
+  type SlideRailListProps,
+  type SlideRailItemProps,
+  type SlideRailThumbnailProps,
+  type SlideRailNumberProps,
+  type SlideRailAddButtonProps,
+  type SlideRailItemContextValue,
 } from "./compound";
 
 export { parsePptx, serializeDeck } from "./lib/pptx";

package/src/components/editor/SlideRail.tsx

@@ -1,285 +0,0 @@
-import { Plus, LayoutGrid, Trash2 } from "lucide-react";
-import { useState } from "react";
-import { useEditor } from "@/lib/StoreProvider";
-import { SlideView } from "./SlideView";
-import { SLIDE_W, type Slide } from "@/lib/types";
-
-const RAIL_W = 168;
-const THUMB_W = 132;
-const THUMB_SCALE = THUMB_W / SLIDE_W;
-
-export function SlideRail() {
-  const slides = useEditor((s) => s.deck.slides);
-  const currentId = useEditor((s) => s.currentSlideId);
-  const selectSlide = useEditor((s) => s.selectSlide);
-  const addSlide = useEditor((s) => s.addSlide);
-  const deleteSlide = useEditor((s) => s.deleteSlide);
-  const setView = useEditor((s) => s.setView);
-
-  return (
-    <div
-      style={{
-        width: RAIL_W,
-        flexShrink: 0,
-        background: "var(--rail-bg)",
-        borderRight: "1px solid var(--border)",
-        boxShadow: "var(--rail-shadow)",
-        display: "flex",
-        flexDirection: "column",
-        fontFamily: "Inter, system-ui, sans-serif",
-        overflow: "hidden",
-        zIndex: 5,
-      }}
-    >
-      <div
-        style={{
-          height: 36,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          padding: "0 12px",
-          fontSize: 12,
-          color: "var(--ink-muted)",
-          borderBottom: "1px solid var(--border)",
-        }}
-      >
-        <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>
-          {slides.findIndex((s) => s.id === currentId) + 1} / {slides.length}
-        </span>
-      </div>
-
-      <div
-        style={{
-          flex: 1,
-          overflowY: "auto",
-          padding: "12px 0",
-        }}
-      >
-        {slides.map((s, i) => (
-          <ThumbRow
-            key={s.id}
-            index={i}
-            isCurrent={s.id === currentId}
-            slide={s}
-            onSelect={() => selectSlide(s.id)}
-            onInsertAfter={() => addSlide(s.id)}
-            onDelete={() => deleteSlide(s.id)}
-            isLast={i === slides.length - 1}
-          />
-        ))}
-      </div>
-
-      <button
-        onClick={() => addSlide()}
-        style={{
-          height: 44,
-          margin: 12,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          gap: 6,
-          background: "var(--app-bg)",
-          border: "1px dashed var(--border-dashed)",
-          borderRadius: 10,
-          color: "var(--ink)",
-          fontSize: 13,
-          fontWeight: 500,
-          cursor: "pointer",
-          transition:
-            "background 120ms, border-color 120ms, color 120ms",
-        }}
-        onMouseEnter={(e) => {
-          e.currentTarget.style.borderColor = "var(--accent)";
-          e.currentTarget.style.color = "var(--accent)";
-        }}
-        onMouseLeave={(e) => {
-          e.currentTarget.style.borderColor = "var(--border-dashed)";
-          e.currentTarget.style.color = "var(--ink)";
-        }}
-      >
-        <Plus size={14} />
-        New Slide
-      </button>
-    </div>
-  );
-}
-
-function ThumbRow({
-  index,
-  isCurrent,
-  slide,
-  onSelect,
-  onInsertAfter,
-  onDelete,
-  isLast,
-}: {
-  index: number;
-  isCurrent: boolean;
-  slide: Slide;
-  onSelect: () => void;
-  onInsertAfter: () => void;
-  onDelete: () => void;
-  isLast: boolean;
-}) {
-  const [hover, setHover] = useState(false);
-  return (
-    <div
-      onMouseEnter={() => setHover(true)}
-      onMouseLeave={() => setHover(false)}
-      style={{
-        position: "relative",
-        padding: "0 12px",
-        marginBottom: 14,
-      }}
-    >
-      <div style={{ position: "relative" }}>
-        <span
-          aria-hidden="true"
-          style={{
-            position: "absolute",
-            left: 8,
-            top: 6,
-            zIndex: 2,
-            width: 22,
-            height: 22,
-            borderRadius: 5,
-            background: isCurrent ? "var(--ink)" : "#6B7280",
-            color: isCurrent ? "var(--app-bg)" : "#fff",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            fontSize: 11,
-            fontWeight: 700,
-            fontFamily: "Inter, system-ui, sans-serif",
-            pointerEvents: "none",
-          }}
-        >
-          {String(index + 1).padStart(2, "0")}
-        </span>
-        <button
-          aria-label={`Open slide ${index + 1}`}
-          aria-current={isCurrent ? "true" : undefined}
-          onClick={onSelect}
-          style={{
-            display: "block",
-            width: THUMB_W,
-            border: isCurrent
-              ? "2px solid var(--accent)"
-              : "2px solid transparent",
-            borderRadius: 8,
-            padding: 0,
-            background: "transparent",
-            cursor: "pointer",
-            overflow: "hidden",
-            transition: "border-color 120ms",
-          }}
-        >
-          <div style={{ pointerEvents: "none" }}>
-            <SlideView slide={slide} scale={THUMB_SCALE} />
-          </div>
-        </button>
-
-        {hover && (
-          <button
-            onClick={(e) => {
-              e.stopPropagation();
-              onDelete();
-            }}
-            title="Delete slide"
-            aria-label={`Delete slide ${index + 1}`}
-            style={{
-              position: "absolute",
-              right: 6,
-              top: 6,
-              width: 22,
-              height: 22,
-              borderRadius: 6,
-              background: "var(--toolbar-bg)",
-              backdropFilter: "blur(10px)",
-              WebkitBackdropFilter: "blur(10px)",
-              border: "1px solid var(--border-strong)",
-              cursor: "pointer",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              color: "var(--ink)",
-            }}
-          >
-            <Trash2 size={11} />
-          </button>
-        )}
-      </div>
-
-      {!isLast && <InsertGap onInsert={onInsertAfter} />}
-    </div>
-  );
-}
-
-function InsertGap({ onInsert }: { onInsert: () => void }) {
-  const [hover, setHover] = useState(false);
-  return (
-    <div
-      onMouseEnter={() => setHover(true)}
-      onMouseLeave={() => setHover(false)}
-      style={{
-        position: "absolute",
-        left: 0,
-        right: 0,
-        bottom: -14,
-        height: 28,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        zIndex: 5,
-      }}
-    >
-      <button
-        onClick={onInsert}
-        aria-label="Insert slide here"
-        title="Insert slide"
-        style={{
-          width: hover ? 30 : 22,
-          height: hover ? 30 : 22,
-          borderRadius: 999,
-          background: "var(--gap-icon-bg)",
-          border: "1px solid var(--border-strong)",
-          cursor: "pointer",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          color: "var(--ink)",
-          opacity: hover ? 1 : 0,
-          transform: hover ? "scale(1)" : "scale(0.85)",
-          transition:
-            "opacity 140ms, transform 140ms, width 140ms, height 140ms",
-          boxShadow: hover ? "var(--toolbar-shadow)" : "var(--thumb-shadow)",
-        }}
-      >
-        <Plus size={hover ? 16 : 12} />
-      </button>
-    </div>
-  );
-}