@textcortex/slidewise 1.0.0

package/src/components/editor/GridView.tsx

@@ -0,0 +1,232 @@
+import { useEffect } from "react";
+import { Plus, X } from "lucide-react";
+import { useEditor } from "@/lib/StoreProvider";
+import { SlideView } from "./SlideView";
+import { SLIDE_W } from "@/lib/types";
+
+const COL_GAP = 28;
+const ROW_GAP = 36;
+const COLS = 4;
+const PAD_X = 64;
+
+export function GridView() {
+  const slides = useEditor((s) => s.deck.slides);
+  const currentId = useEditor((s) => s.currentSlideId);
+  const title = useEditor((s) => s.deck.title);
+  const selectSlide = useEditor((s) => s.selectSlide);
+  const addSlide = useEditor((s) => s.addSlide);
+  const setView = useEditor((s) => s.setView);
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setView("editor");
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [setView]);
+
+  const thumbW =
+    typeof window !== "undefined"
+      ? Math.min(
+          340,
+          (window.innerWidth - PAD_X * 2 - COL_GAP * (COLS - 1)) / COLS
+        )
+      : 320;
+  const scale = thumbW / SLIDE_W;
+
+  return (
+    <div
+      style={{
+        position: "fixed",
+        inset: 0,
+        background: "var(--grid-overlay-bg)",
+        backdropFilter: "blur(18px)",
+        WebkitBackdropFilter: "blur(18px)",
+        zIndex: 80,
+        display: "flex",
+        flexDirection: "column",
+        fontFamily: "Inter, system-ui, sans-serif",
+      }}
+    >
+      <div
+        style={{
+          height: 56,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          padding: "0 28px",
+          borderBottom: "1px solid var(--border)",
+          background: "var(--toolbar-bg)",
+          backdropFilter: "blur(20px)",
+          WebkitBackdropFilter: "blur(20px)",
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: 14,
+            color: "var(--ink)",
+          }}
+        >
+          <span style={{ fontSize: 14, fontWeight: 600 }}>
+            {title || "Untitled deck"}
+          </span>
+          <span
+            style={{
+              fontSize: 12,
+              color: "var(--ink-muted)",
+              padding: "2px 8px",
+              borderRadius: 999,
+              background: "var(--input-bg)",
+            }}
+          >
+            {slides.length} slide{slides.length === 1 ? "" : "s"}
+          </span>
+        </div>
+        <button
+          onClick={() => setView("editor")}
+          title="Close overview (Esc)"
+          aria-label="Close slide overview"
+          style={{
+            width: 32,
+            height: 32,
+            borderRadius: 8,
+            border: "1px solid var(--border)",
+            background: "transparent",
+            color: "var(--ink)",
+            cursor: "pointer",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+          onMouseEnter={(e) =>
+            (e.currentTarget.style.background = "var(--hover)")
+          }
+          onMouseLeave={(e) =>
+            (e.currentTarget.style.background = "transparent")
+          }
+        >
+          <X size={16} />
+        </button>
+      </div>
+
+      <div
+        style={{
+          flex: 1,
+          overflowY: "auto",
+          padding: `40px ${PAD_X}px 80px`,
+        }}
+      >
+        <div
+          style={{
+            display: "grid",
+            gridTemplateColumns: `repeat(${COLS}, ${thumbW}px)`,
+            columnGap: COL_GAP,
+            rowGap: ROW_GAP,
+            justifyContent: "center",
+          }}
+        >
+          {slides.map((s, i) => {
+            const isCurrent = s.id === currentId;
+            return (
+              <button
+                key={s.id}
+                aria-label={`Open slide ${i + 1}`}
+                aria-current={isCurrent ? "true" : undefined}
+                onClick={() => {
+                  selectSlide(s.id);
+                  setView("editor");
+                }}
+                style={{
+                  position: "relative",
+                  padding: 0,
+                  border: "none",
+                  background: "transparent",
+                  cursor: "pointer",
+                  textAlign: "left",
+                }}
+              >
+                <div
+                  style={{
+                    position: "absolute",
+                    left: -10,
+                    top: -10,
+                    zIndex: 2,
+                    width: 28,
+                    height: 28,
+                    borderRadius: 8,
+                    background: isCurrent ? "var(--accent)" : "var(--ink)",
+                    color: "#fff",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    fontSize: 12,
+                    fontWeight: 700,
+                    boxShadow: "var(--thumb-shadow)",
+                  }}
+                >
+                  {String(i + 1).padStart(2, "0")}
+                </div>
+                <div
+                  style={{
+                    borderRadius: 14,
+                    overflow: "hidden",
+                    border: isCurrent
+                      ? "3px solid var(--accent)"
+                      : "3px solid transparent",
+                    boxShadow: "var(--slide-shadow)",
+                    transition: "transform 140ms, border-color 120ms",
+                  }}
+                  onMouseEnter={(e) => {
+                    e.currentTarget.style.transform = "translateY(-2px)";
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.transform = "translateY(0)";
+                  }}
+                >
+                  <SlideView slide={s} scale={scale} />
+                </div>
+              </button>
+            );
+          })}
+
+          <button
+            onClick={() => addSlide()}
+            aria-label="Add new slide"
+            style={{
+              width: thumbW,
+              aspectRatio: `${SLIDE_W} / 1080`,
+              borderRadius: 14,
+              border: "2px dashed var(--border-dashed)",
+              background: "transparent",
+              color: "var(--ink-muted)",
+              cursor: "pointer",
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: 8,
+              fontSize: 13,
+              fontWeight: 500,
+              transition: "border-color 120ms, color 120ms, background 120ms",
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.borderColor = "var(--accent)";
+              e.currentTarget.style.color = "var(--accent)";
+              e.currentTarget.style.background = "var(--accent-soft)";
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.borderColor = "var(--border-dashed)";
+              e.currentTarget.style.color = "var(--ink-muted)";
+              e.currentTarget.style.background = "transparent";
+            }}
+          >
+            <Plus size={20} />
+            New Slide
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/editor/PlayMode.tsx

@@ -0,0 +1,260 @@
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { ChevronLeft, ChevronRight, X } from "lucide-react";
+import { useEditor } from "@/lib/StoreProvider";
+import { SLIDE_W, SLIDE_H, type SlideElement, type EnterAnim } from "@/lib/types";
+import { ElementView } from "./ElementView";
+
+export function PlayMode() {
+  const slides = useEditor((s) => s.deck.slides);
+  const stop = useEditor((s) => s.stop);
+  const [index, setIndex] = useState(0);
+  const wrapRef = useRef<HTMLDivElement>(null);
+  const [scale, setScale] = useState(1);
+
+  useLayoutEffect(() => {
+    const compute = () => {
+      if (!wrapRef.current) return;
+      const r = wrapRef.current.getBoundingClientRect();
+      const fit = Math.min(r.width / SLIDE_W, r.height / SLIDE_H);
+      setScale(fit);
+    };
+    compute();
+    window.addEventListener("resize", compute);
+    return () => window.removeEventListener("resize", compute);
+  }, []);
+
+  useEffect(() => {
+    function onKey(e: KeyboardEvent) {
+      if (e.key === "Escape") stop();
+      if (e.key === "ArrowRight" || e.key === " " || e.key === "PageDown")
+        setIndex((i) => Math.min(slides.length - 1, i + 1));
+      if (e.key === "ArrowLeft" || e.key === "PageUp")
+        setIndex((i) => Math.max(0, i - 1));
+    }
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [slides.length, stop]);
+
+  const slide = slides[index];
+
+  return (
+    <div
+      style={{
+        position: "fixed",
+        inset: 0,
+        background: "#000",
+        zIndex: 100,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+      ref={wrapRef}
+    >
+      <button
+        onClick={stop}
+        title="Exit (Esc)"
+        aria-label="Exit play mode"
+        style={{
+          position: "absolute",
+          top: 16,
+          right: 16,
+          width: 40,
+          height: 40,
+          borderRadius: 999,
+          background: "rgba(255,255,255,0.10)",
+          border: "1px solid rgba(255,255,255,0.18)",
+          color: "#fff",
+          cursor: "pointer",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          backdropFilter: "blur(12px)",
+          zIndex: 5,
+        }}
+      >
+        <X size={18} />
+      </button>
+
+      <button
+        onClick={() => setIndex((i) => Math.max(0, i - 1))}
+        disabled={index === 0}
+        aria-label="Previous slide"
+        title="Previous slide"
+        style={{
+          position: "absolute",
+          left: 16,
+          top: "50%",
+          transform: "translateY(-50%)",
+          width: 44,
+          height: 44,
+          borderRadius: 999,
+          background: "rgba(255,255,255,0.10)",
+          border: "1px solid rgba(255,255,255,0.18)",
+          color: "#fff",
+          cursor: index === 0 ? "default" : "pointer",
+          opacity: index === 0 ? 0.3 : 1,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          backdropFilter: "blur(12px)",
+          zIndex: 5,
+        }}
+      >
+        <ChevronLeft size={20} />
+      </button>
+
+      <button
+        onClick={() => setIndex((i) => Math.min(slides.length - 1, i + 1))}
+        disabled={index === slides.length - 1}
+        aria-label="Next slide"
+        title="Next slide"
+        style={{
+          position: "absolute",
+          right: 16,
+          top: "50%",
+          transform: "translateY(-50%)",
+          width: 44,
+          height: 44,
+          borderRadius: 999,
+          background: "rgba(255,255,255,0.10)",
+          border: "1px solid rgba(255,255,255,0.18)",
+          color: "#fff",
+          cursor: index === slides.length - 1 ? "default" : "pointer",
+          opacity: index === slides.length - 1 ? 0.3 : 1,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          backdropFilter: "blur(12px)",
+          zIndex: 5,
+        }}
+      >
+        <ChevronRight size={20} />
+      </button>
+
+      <div
+        role="status"
+        aria-live="polite"
+        aria-label={`Slide ${index + 1} of ${slides.length}`}
+        style={{
+          position: "absolute",
+          bottom: 18,
+          left: "50%",
+          transform: "translateX(-50%)",
+          padding: "6px 12px",
+          borderRadius: 999,
+          background: "rgba(255,255,255,0.08)",
+          border: "1px solid rgba(255,255,255,0.14)",
+          color: "#fff",
+          fontFamily: "Inter, system-ui, sans-serif",
+          fontSize: 12,
+          backdropFilter: "blur(12px)",
+        }}
+      >
+        {index + 1} / {slides.length}
+      </div>
+
+      <AnimatePresence mode="wait">
+        <motion.div
+          key={slide.id}
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.35 }}
+          style={{
+            width: SLIDE_W * scale,
+            height: SLIDE_H * scale,
+            background: slide.background,
+            position: "relative",
+            overflow: "hidden",
+            borderRadius: 4,
+            boxShadow: "0 30px 80px rgba(0,0,0,0.5)",
+          }}
+        >
+          <div
+            style={{
+              width: SLIDE_W,
+              height: SLIDE_H,
+              transform: `scale(${scale})`,
+              transformOrigin: "top left",
+              position: "absolute",
+              inset: 0,
+            }}
+          >
+            {[...slide.elements]
+              .sort((a, b) => a.z - b.z)
+              .map((el) => (
+                <AnimatedElement key={el.id} el={el} />
+              ))}
+          </div>
+        </motion.div>
+      </AnimatePresence>
+    </div>
+  );
+}
+
+function variantsFor(anim: EnterAnim) {
+  switch (anim) {
+    case "fade":
+      return { initial: { opacity: 0 }, animate: { opacity: 1 } };
+    case "slide-up":
+      return {
+        initial: { opacity: 0, y: 40 },
+        animate: { opacity: 1, y: 0 },
+      };
+    case "slide-down":
+      return {
+        initial: { opacity: 0, y: -40 },
+        animate: { opacity: 1, y: 0 },
+      };
+    case "slide-left":
+      return {
+        initial: { opacity: 0, x: 40 },
+        animate: { opacity: 1, x: 0 },
+      };
+    case "slide-right":
+      return {
+        initial: { opacity: 0, x: -40 },
+        animate: { opacity: 1, x: 0 },
+      };
+    case "scale":
+      return {
+        initial: { opacity: 0, scale: 0.92 },
+        animate: { opacity: 1, scale: 1 },
+      };
+    case "draw":
+      return {
+        initial: { opacity: 0, scaleX: 0 },
+        animate: { opacity: 1, scaleX: 1 },
+      };
+    case "none":
+    default:
+      return { initial: { opacity: 1 }, animate: { opacity: 1 } };
+  }
+}
+
+function AnimatedElement({ el }: { el: SlideElement }) {
+  const v = variantsFor(el.enter ?? "fade");
+  return (
+    <motion.div
+      initial={v.initial}
+      animate={v.animate}
+      transition={{
+        duration: 0.55,
+        delay: el.delay ?? 0,
+        ease: [0.22, 1, 0.36, 1],
+      }}
+      style={{
+        position: "absolute",
+        left: el.x,
+        top: el.y,
+        width: el.w,
+        height: el.h,
+        transform: `rotate(${el.rotation}deg)`,
+        transformOrigin: el.enter === "draw" ? "left center" : "center",
+      }}
+    >
+      <ElementView el={el} />
+    </motion.div>
+  );
+}