@textcortex/slidewise 1.0.0

package/src/components/editor/SelectionFrame.tsx

@@ -0,0 +1,241 @@
+import { useRef } from "react";
+import type { SlideElement } from "@/lib/types";
+
+type Handle =
+  | "n"
+  | "s"
+  | "e"
+  | "w"
+  | "ne"
+  | "nw"
+  | "se"
+  | "sw"
+  | "rotate";
+
+export function SelectionFrame({
+  el,
+  scale,
+  editing = false,
+  onChange,
+  onCommitStart,
+}: {
+  el: SlideElement;
+  scale: number;
+  editing?: boolean;
+  onChange: (patch: Partial<SlideElement>) => void;
+  onCommitStart: () => void;
+}) {
+  const startedRef = useRef(false);
+
+  function startDrag(handle: Handle, e: React.MouseEvent) {
+    e.stopPropagation();
+    e.preventDefault();
+    if (!startedRef.current) {
+      onCommitStart();
+      startedRef.current = true;
+    }
+    const start = { x: e.clientX, y: e.clientY };
+    const orig = { x: el.x, y: el.y, w: el.w, h: el.h, rotation: el.rotation };
+    const centerScreen = {
+      x: (e.target as HTMLElement)
+        .closest("[data-selection]")!
+        .getBoundingClientRect().left,
+      y: (e.target as HTMLElement)
+        .closest("[data-selection]")!
+        .getBoundingClientRect().top,
+    };
+    const sel = (e.target as HTMLElement).closest("[data-selection]") as HTMLElement;
+    const selRect = sel.getBoundingClientRect();
+    const cxScreen = selRect.left + selRect.width / 2;
+    const cyScreen = selRect.top + selRect.height / 2;
+    void centerScreen;
+
+    function move(ev: MouseEvent) {
+      const dx = (ev.clientX - start.x) / scale;
+      const dy = (ev.clientY - start.y) / scale;
+      if (handle === "rotate") {
+        const angle =
+          (Math.atan2(ev.clientY - cyScreen, ev.clientX - cxScreen) * 180) /
+          Math.PI;
+        onChange({ rotation: Math.round(angle + 90) });
+        return;
+      }
+      let x = orig.x;
+      let y = orig.y;
+      let w = orig.w;
+      let h = orig.h;
+      if (handle.includes("e")) w = Math.max(8, orig.w + dx);
+      if (handle.includes("s")) h = Math.max(8, orig.h + dy);
+      if (handle.includes("w")) {
+        w = Math.max(8, orig.w - dx);
+        x = orig.x + (orig.w - w);
+      }
+      if (handle.includes("n")) {
+        h = Math.max(8, orig.h - dy);
+        y = orig.y + (orig.h - h);
+      }
+      onChange({
+        x: Math.round(x),
+        y: Math.round(y),
+        w: Math.round(w),
+        h: Math.round(h),
+      });
+    }
+    function up() {
+      window.removeEventListener("mousemove", move);
+      window.removeEventListener("mouseup", up);
+      startedRef.current = false;
+    }
+    window.addEventListener("mousemove", move);
+    window.addEventListener("mouseup", up);
+  }
+
+  const left = el.x * scale;
+  const top = el.y * scale;
+  const w = el.w * scale;
+  const h = el.h * scale;
+  const handleSize = 10;
+
+  const handleStyle = (cursor: string): React.CSSProperties => ({
+    position: "absolute",
+    width: handleSize,
+    height: handleSize,
+    background: "var(--app-bg)",
+    border: "1.5px solid var(--accent)",
+    borderRadius: 2,
+    cursor,
+    boxShadow: "0 1px 3px rgba(15,23,42,0.2)",
+  });
+
+  return (
+    <div
+      data-selection
+      style={{
+        position: "absolute",
+        left,
+        top,
+        width: w,
+        height: h,
+        transform: `rotate(${el.rotation}deg)`,
+        pointerEvents: "none",
+      }}
+    >
+      <div
+        style={{
+          position: "absolute",
+          inset: -2,
+          border: editing
+            ? "2px dashed var(--accent)"
+            : "2px solid var(--accent)",
+          borderRadius: 2,
+          boxShadow: "0 0 0 1px rgba(255,255,255,0.6) inset",
+          pointerEvents: "none",
+        }}
+      />
+
+      {/* corners */}
+      <div
+        onMouseDown={(e) => startDrag("nw", e)}
+        style={{
+          ...handleStyle("nwse-resize"),
+          left: -handleSize / 2,
+          top: -handleSize / 2,
+          pointerEvents: "auto",
+        }}
+      />
+      <div
+        onMouseDown={(e) => startDrag("ne", e)}
+        style={{
+          ...handleStyle("nesw-resize"),
+          right: -handleSize / 2,
+          top: -handleSize / 2,
+          pointerEvents: "auto",
+        }}
+      />
+      <div
+        onMouseDown={(e) => startDrag("sw", e)}
+        style={{
+          ...handleStyle("nesw-resize"),
+          left: -handleSize / 2,
+          bottom: -handleSize / 2,
+          pointerEvents: "auto",
+        }}
+      />
+      <div
+        onMouseDown={(e) => startDrag("se", e)}
+        style={{
+          ...handleStyle("nwse-resize"),
+          right: -handleSize / 2,
+          bottom: -handleSize / 2,
+          pointerEvents: "auto",
+        }}
+      />
+      {/* edges */}
+      <div
+        onMouseDown={(e) => startDrag("n", e)}
+        style={{
+          ...handleStyle("ns-resize"),
+          left: "50%",
+          top: -handleSize / 2,
+          transform: "translateX(-50%)",
+          pointerEvents: "auto",
+        }}
+      />
+      <div
+        onMouseDown={(e) => startDrag("s", e)}
+        style={{
+          ...handleStyle("ns-resize"),
+          left: "50%",
+          bottom: -handleSize / 2,
+          transform: "translateX(-50%)",
+          pointerEvents: "auto",
+        }}
+      />
+      <div
+        onMouseDown={(e) => startDrag("w", e)}
+        style={{
+          ...handleStyle("ew-resize"),
+          left: -handleSize / 2,
+          top: "50%",
+          transform: "translateY(-50%)",
+          pointerEvents: "auto",
+        }}
+      />
+      <div
+        onMouseDown={(e) => startDrag("e", e)}
+        style={{
+          ...handleStyle("ew-resize"),
+          right: -handleSize / 2,
+          top: "50%",
+          transform: "translateY(-50%)",
+          pointerEvents: "auto",
+        }}
+      />
+      {/* rotate */}
+      <div
+        onMouseDown={(e) => startDrag("rotate", e)}
+        style={{
+          position: "absolute",
+          left: "50%",
+          top: -28,
+          transform: "translateX(-50%)",
+          width: 18,
+          height: 18,
+          borderRadius: "50%",
+          background: "var(--app-bg)",
+          border: "1.5px solid var(--accent)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "var(--accent)",
+          fontSize: 10,
+          cursor: "grab",
+          pointerEvents: "auto",
+          boxShadow: "var(--thumb-shadow)",
+        }}
+      >
+        ↻
+      </div>
+    </div>
+  );
+}

package/src/components/editor/SlideRail.tsx

@@ -0,0 +1,285 @@
+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>
+  );
+}

package/src/components/editor/SlideView.tsx

@@ -0,0 +1,55 @@
+import type { Slide } from "@/lib/types";
+import { SLIDE_W, SLIDE_H } from "@/lib/types";
+import { ElementView } from "./ElementView";
+
+export function SlideView({
+  slide,
+  scale = 1,
+}: {
+  slide: Slide;
+  scale?: number;
+}) {
+  return (
+    <div
+      style={{
+        width: SLIDE_W * scale,
+        height: SLIDE_H * scale,
+        background: slide.background,
+        position: "relative",
+        overflow: "hidden",
+        borderRadius: 12 * scale,
+        boxShadow: "var(--thumb-shadow)",
+      }}
+    >
+      <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) => (
+            <div
+              key={el.id}
+              style={{
+                position: "absolute",
+                left: el.x,
+                top: el.y,
+                width: el.w,
+                height: el.h,
+                transform: `rotate(${el.rotation}deg)`,
+                pointerEvents: "none",
+              }}
+            >
+              <ElementView el={el} />
+            </div>
+          ))}
+      </div>
+    </div>
+  );
+}