@textcortex/slidewise 1.6.0 → 1.8.0

package/src/compound/sliderail/Item.tsx

@@ -0,0 +1,82 @@
+import type { CSSProperties, PropsWithChildren } from "react";
+import { useEditor } from "@/lib/StoreProvider";
+import type { Slide } from "@/lib/types";
+import { SlideRailItemProvider } from "./ItemContext";
+
+/**
+ * Wraps a single slide in the rail. Provides the slide to descendants via
+ * context (read with `useSlideRailItem`) and wires click → `selectSlide`.
+ *
+ * The default subparts (`Thumbnail`, `Number`) read the slide off the
+ * context, so hosts can rearrange them freely. Host content (e.g. a
+ * three-dots menu, a duplicate button) drops in as additional children.
+ *
+ * ```tsx
+ * <Slidewise.SlideRail.Item slide={slide}>
+ *   <Slidewise.SlideRail.Thumbnail />
+ *   <Slidewise.SlideRail.Number />
+ *   <MyContextMenu slide={slide} />
+ * </Slidewise.SlideRail.Item>
+ * ```
+ */
+export interface SlideRailItemProps {
+  slide: Slide;
+  className?: string;
+  style?: CSSProperties;
+  /**
+   * Override the click handler. The default selects the slide via the
+   * editor store; pass a function here to add host behavior (e.g. open
+   * a context drawer instead of selecting).
+   */
+  onClick?: (slide: Slide) => void;
+}
+
+export function Item({
+  slide,
+  className,
+  style,
+  onClick,
+  children,
+}: PropsWithChildren<SlideRailItemProps>) {
+  const slides = useEditor((s) => s.deck.slides);
+  const currentId = useEditor((s) => s.currentSlideId);
+  const selectSlide = useEditor((s) => s.selectSlide);
+  const index = slides.findIndex((s) => s.id === slide.id);
+  const isCurrent = slide.id === currentId;
+
+  return (
+    <SlideRailItemProvider value={{ slide, index, isCurrent }}>
+      <div
+        className={className}
+        onClick={() => (onClick ? onClick(slide) : selectSlide(slide.id))}
+        role="button"
+        tabIndex={0}
+        aria-current={isCurrent ? "true" : undefined}
+        aria-label={`Open slide ${index + 1}`}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onClick ? onClick(slide) : selectSlide(slide.id);
+          }
+        }}
+        style={{
+          position: "relative",
+          padding: "0 12px",
+          marginBottom: 14,
+          cursor: "pointer",
+          background:
+            "var(--slidewise-bg-rail-item, transparent)",
+          ...(isCurrent
+            ? {
+                background:
+                  "var(--slidewise-bg-rail-item-active, var(--accent-soft))",
+              }
+            : null),
+          ...style,
+        }}
+      >
+        {children}
+      </div>
+    </SlideRailItemProvider>
+  );
+}

package/src/compound/sliderail/ItemContext.tsx

@@ -0,0 +1,42 @@
+import { createContext, useContext } from "react";
+import type { Slide } from "@/lib/types";
+
+/**
+ * Context handed to descendants of `<SlideRail.Item>` so leaf subparts
+ * (`Thumbnail`, `Number`) and host content can read which slide they're
+ * rendering against without prop drilling.
+ */
+export interface SlideRailItemContextValue {
+  slide: Slide;
+  /** Zero-based position in `deck.slides`. */
+  index: number;
+  /** True when this is the editor's currently-focused slide. */
+  isCurrent: boolean;
+}
+
+const ItemContext = createContext<SlideRailItemContextValue | null>(null);
+
+export function SlideRailItemProvider({
+  value,
+  children,
+}: {
+  value: SlideRailItemContextValue;
+  children: React.ReactNode;
+}) {
+  return <ItemContext.Provider value={value}>{children}</ItemContext.Provider>;
+}
+
+/**
+ * Read the current item context. Throws when used outside a
+ * `<SlideRail.Item>` — the leaf subparts are meaningless without a
+ * concrete slide to render.
+ */
+export function useSlideRailItem(): SlideRailItemContextValue {
+  const ctx = useContext(ItemContext);
+  if (!ctx) {
+    throw new Error(
+      "useSlideRailItem must be used inside <Slidewise.SlideRail.Item>"
+    );
+  }
+  return ctx;
+}

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

@@ -48,6 +48,9 @@ export {
   useDirty,
   useLabels,
   useSurfaces,
+  useCanvasConfig,
+  resolveSlideBackground,
+  DEFAULT_CANVAS_CONFIG,
   useEditor,
   useEditorStore,
   useSlides,
@@ -67,10 +70,22 @@ export {
   type SlidewiseIcons,
   type SlidewiseLabels,
   type SlidewiseSurfaces,
+  type SlidewiseCanvasConfig,
   type ResolvedLabels,
+  type ResolvedCanvasConfig,
+  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";