@textcortex/slidewise 1.0.0 → 1.1.0

package/dist/types/lib/schema/migrate.d.ts

@@ -1,25 +0,0 @@
-import type { Deck } from "@/lib/types";
-/**
- * Slidewise deck schema version. Bump this whenever the persisted shape of a
- * Deck changes in a way old hosts cannot read transparently — adding a new
- * required field, renaming a key, restructuring an element type, etc.
- *
- * Bumping always pairs with a migrator at `MIGRATIONS[oldVersion]` that takes
- * a deck shaped at the previous version and returns one shaped at this one.
- * Migrations are run forward in order, so a v0 deck becomes v1 then v2 etc.
- *
- * Never delete an old migrator — published decks in the wild may still be at
- * any historical version, and they all need a path forward.
- */
-export declare const CURRENT_DECK_VERSION = 1;
-/**
- * Normalise an external deck (from PPTX import, JSON import, localStorage,
- * a host prop, etc.) to the current schema. Stamps the current version on
- * its way out so downstream code can rely on `deck.version`.
- *
- * Throws if the input is missing the basic shape, or if its `version` is
- * higher than `CURRENT_DECK_VERSION` — that means the deck was written by
- * a newer Slidewise and the host should upgrade rather than silently render
- * a degraded version.
- */
-export declare function migrate(input: unknown): Deck;

package/dist/types/lib/seed.d.ts

@@ -1,2 +0,0 @@
-import type { Deck } from "./types";
-export declare const seedDeck: Deck;

package/dist/types/lib/store.d.ts

@@ -1,55 +0,0 @@
-import { type StoreApi } from "zustand/vanilla";
-import type { Deck, Slide, SlideElement, ElementDraft, ShapeKind } from "./types";
-import { SLIDE_W, SLIDE_H } from "./types";
-type Tool = "select" | "text" | "shape" | "line" | "image" | "table" | "formula" | "icon" | "embed";
-interface HistorySnapshot {
-    deck: Deck;
-    currentSlideId: string;
-}
-type Theme = "light" | "dark";
-type View = "editor" | "grid";
-export interface EditorState {
-    deck: Deck;
-    currentSlideId: string;
-    selectedIds: string[];
-    tool: Tool;
-    zoom: number;
-    fitMode: "fit" | "fill" | "manual";
-    playing: boolean;
-    theme: Theme;
-    view: View;
-    history: HistorySnapshot[];
-    future: HistorySnapshot[];
-    currentSlide: () => Slide;
-    setTool: (t: Tool) => void;
-    setTitle: (t: string) => void;
-    setZoom: (z: number) => void;
-    setFitMode: (f: "fit" | "fill" | "manual") => void;
-    selectSlide: (id: string) => void;
-    selectElement: (id: string | null, additive?: boolean) => void;
-    clearSelection: () => void;
-    addSlide: (afterId?: string) => void;
-    duplicateSlide: (id: string) => void;
-    deleteSlide: (id: string) => void;
-    reorderSlide: (id: string, toIndex: number) => void;
-    addElement: (partial: ElementDraft) => string;
-    updateElement: (id: string, patch: Partial<SlideElement>) => void;
-    deleteElement: (id: string) => void;
-    bringForward: (id: string) => void;
-    sendBackward: (id: string) => void;
-    setBackground: (color: string) => void;
-    play: () => void;
-    stop: () => void;
-    undo: () => void;
-    redo: () => void;
-    pushHistory: () => void;
-    setDeck: (deck: Deck) => void;
-    setTheme: (t: Theme) => void;
-    toggleTheme: () => void;
-    setView: (v: View) => void;
-}
-export type EditorStore = StoreApi<EditorState>;
-export declare function createEditorStore(initialDeck: Deck): EditorStore;
-export type { Tool };
-export { SLIDE_W, SLIDE_H };
-export declare const presetShapes: ShapeKind[];

package/dist/types/lib/types.d.ts

@@ -1,141 +0,0 @@
-export declare const SLIDE_W = 1920;
-export declare const SLIDE_H = 1080;
-export type ElementType = "text" | "shape" | "image" | "line" | "table" | "icon" | "embed" | "unknown";
-export type EnterAnim = "none" | "fade" | "slide-up" | "slide-down" | "slide-left" | "slide-right" | "scale" | "draw";
-export interface BaseElement {
-    id: string;
-    type: ElementType;
-    x: number;
-    y: number;
-    w: number;
-    h: number;
-    rotation: number;
-    z: number;
-    locked?: boolean;
-    enter?: EnterAnim;
-    delay?: number;
-}
-/**
- * One styled fragment within a text element. Any field left undefined falls
- * back to the parent TextElement's flat default. Run text may contain "\n" —
- * which becomes a paragraph break in both renderer and PPTX writer.
- */
-export interface TextRun {
-    text: string;
-    fontFamily?: string;
-    fontSize?: number;
-    fontWeight?: number;
-    italic?: boolean;
-    underline?: boolean;
-    strike?: boolean;
-    color?: string;
-    letterSpacing?: number;
-}
-export interface TextElement extends BaseElement {
-    type: "text";
-    text: string;
-    fontFamily: string;
-    fontSize: number;
-    fontWeight: number;
-    italic: boolean;
-    underline: boolean;
-    strike: boolean;
-    color: string;
-    align: "left" | "center" | "right";
-    vAlign: "top" | "middle" | "bottom";
-    lineHeight: number;
-    letterSpacing: number;
-    /**
-     * Optional rich-text breakdown. When present, the renderer and PPTX writer
-     * use these per-run styles; the flat fields above act as defaults for any
-     * field a run leaves unset. Editing the text via the contentEditable surface
-     * collapses runs back to the flat representation.
-     */
-    runs?: TextRun[];
-}
-export type ShapeKind = "rect" | "rounded" | "circle" | "triangle" | "star" | "diamond";
-export interface ShapeElement extends BaseElement {
-    type: "shape";
-    shape: ShapeKind;
-    fill: string;
-    stroke?: string;
-    strokeWidth?: number;
-    radius?: number;
-}
-export interface ImageElement extends BaseElement {
-    type: "image";
-    src: string;
-    alt?: string;
-    fit: "cover" | "contain" | "fill";
-    radius?: number;
-    /**
-     * PPTX <a:srcRect> source crop, expressed as fractions (0..1) of the source
-     * image to chop from each edge before placing into the bounding box.
-     * Slidewise applies it via background-image / background-position so the
-     * final paint matches PowerPoint's "crop + stretch" behaviour.
-     */
-    crop?: {
-        l: number;
-        r: number;
-        t: number;
-        b: number;
-    };
-}
-export interface LineElement extends BaseElement {
-    type: "line";
-    stroke: string;
-    strokeWidth: number;
-    arrow?: boolean;
-    dashed?: boolean;
-}
-export interface TableElement extends BaseElement {
-    type: "table";
-    rows: string[][];
-    headerFill: string;
-    rowFill: string;
-    textColor: string;
-    fontSize: number;
-}
-export interface IconElement extends BaseElement {
-    type: "icon";
-    icon: string;
-    color: string;
-}
-export interface EmbedElement extends BaseElement {
-    type: "embed";
-    url: string;
-    label: string;
-}
-/**
- * Opaque OOXML element preserved for round-trip when reading a PPTX
- * containing constructs Slidewise does not yet model (charts, SmartArt,
- * embedded media, etc.). Position/size is editable; the inner XML is
- * re-emitted on write so the user does not lose data.
- */
-export interface UnknownElement extends BaseElement {
-    type: "unknown";
-    /** Tag name of the wrapped OOXML node, e.g. "p:graphicFrame". */
-    ooxmlTag: string;
-    /** Raw OOXML serialized as a string, re-emitted verbatim on save. */
-    ooxmlXml: string;
-    /** Human-readable label for the editor UI, e.g. "Chart" or "SmartArt". */
-    label?: string;
-}
-export type SlideElement = TextElement | ShapeElement | ImageElement | LineElement | TableElement | IconElement | EmbedElement | UnknownElement;
-export interface Slide {
-    id: string;
-    background: string;
-    elements: SlideElement[];
-}
-export interface Deck {
-    /**
-     * Schema version this deck conforms to. Stamped by `migrate()` and by
-     * internal Deck constructors (seed, PPTX import). Hosts should not set
-     * this manually — pass an external deck through `migrate()` and read the
-     * version off the result.
-     */
-    version: number;
-    title: string;
-    slides: Slide[];
-}
-export type ElementDraft<T extends SlideElement = SlideElement> = T extends SlideElement ? Omit<T, "id" | "z"> : never;

package/dist/window.svg

@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

package/src/App.tsx

@@ -1,261 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import { Upload, RotateCcw } from "lucide-react";
-import { SlidewiseEditor, type SlidewiseEditorHandle } from "./SlidewiseEditor";
-import { seedDeck } from "@/lib/seed";
-import { parsePptx, serializeDeck } from "@/lib/pptx";
-import type { Deck } from "@/lib/types";
-
-const STORAGE_KEY = "slidewise-deck";
-
-function loadInitialDeck(): Deck {
-  try {
-    const raw = localStorage.getItem(STORAGE_KEY);
-    if (raw) {
-      const parsed = JSON.parse(raw) as Deck;
-      if (parsed && Array.isArray(parsed.slides) && parsed.slides.length) {
-        return parsed;
-      }
-    }
-  } catch {}
-  return seedDeck;
-}
-
-export function App() {
-  const [deck, setDeck] = useState<Deck>(() => loadInitialDeck());
-  const editorRef = useRef<SlidewiseEditorHandle>(null);
-  const fileInputRef = useRef<HTMLInputElement>(null);
-  const [overlay, setOverlay] = useState<string | null>(null);
-  const [sourceLabel, setSourceLabel] = useState<string>("Seed deck");
-
-  const loadFromFile = async (file: File) => {
-    if (!file.name.toLowerCase().endsWith(".pptx")) {
-      setOverlay(`Not a .pptx file: ${file.name}`);
-      setTimeout(() => setOverlay(null), 1800);
-      return;
-    }
-    try {
-      setOverlay(`Loading ${file.name}…`);
-      const next = await parsePptx(file);
-      setDeck(next);
-      setSourceLabel(file.name);
-      setOverlay(`Loaded ${next.slides.length} slides from ${file.name}`);
-      setTimeout(() => setOverlay(null), 1600);
-    } catch (err) {
-      console.error("[slidewise] PPTX parse failed:", err);
-      setOverlay("Failed to parse .pptx — see console");
-      setTimeout(() => setOverlay(null), 2400);
-    }
-  };
-
-  useEffect(() => {
-    let dragDepth = 0;
-    const onDragEnter = (e: DragEvent) => {
-      if (!e.dataTransfer?.types.includes("Files")) return;
-      dragDepth++;
-      setOverlay("Drop a .pptx to load it");
-    };
-    const onDragLeave = () => {
-      dragDepth = Math.max(0, dragDepth - 1);
-      if (dragDepth === 0) setOverlay(null);
-    };
-    const onDragOver = (e: DragEvent) => {
-      if (e.dataTransfer?.types.includes("Files")) {
-        e.preventDefault();
-      }
-    };
-    const onDrop = async (e: DragEvent) => {
-      e.preventDefault();
-      dragDepth = 0;
-      setOverlay(null);
-      const file = e.dataTransfer?.files?.[0];
-      if (!file) return;
-      await loadFromFile(file);
-    };
-
-    window.addEventListener("dragenter", onDragEnter);
-    window.addEventListener("dragleave", onDragLeave);
-    window.addEventListener("dragover", onDragOver);
-    window.addEventListener("drop", onDrop);
-    return () => {
-      window.removeEventListener("dragenter", onDragEnter);
-      window.removeEventListener("dragleave", onDragLeave);
-      window.removeEventListener("dragover", onDragOver);
-      window.removeEventListener("drop", onDrop);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const handleSave = (next: Deck) => {
-    try {
-      localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
-    } catch (err) {
-      console.error("Failed to persist deck", err);
-    }
-  };
-
-  const handleExportPptx = async (current: Deck) => {
-    try {
-      const blob = await serializeDeck(current);
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement("a");
-      a.href = url;
-      a.download = `${(current.title || "deck").replace(/[^a-z0-9-_]+/gi, "-")}.pptx`;
-      a.click();
-      URL.revokeObjectURL(url);
-    } catch (err) {
-      console.error("[slidewise] PPTX export failed:", err);
-    }
-  };
-
-  const resetToSeed = () => {
-    try {
-      localStorage.removeItem(STORAGE_KEY);
-    } catch {}
-    setDeck(seedDeck);
-    setSourceLabel("Seed deck");
-  };
-
-  return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        width: "100%",
-        height: "100%",
-        background: "#0E1330",
-      }}
-    >
-      <div
-        style={{
-          flex: "0 0 44px",
-          display: "flex",
-          alignItems: "center",
-          gap: 12,
-          padding: "0 14px",
-          background: "#0E1330",
-          color: "#fff",
-          fontFamily: "Inter, system-ui, sans-serif",
-          borderBottom: "1px solid rgba(255,255,255,0.08)",
-        }}
-      >
-        <span style={{ fontSize: 12, fontWeight: 700, letterSpacing: 0.6, opacity: 0.7 }}>
-          SLIDEWISE DEV
-        </span>
-        <span
-          style={{
-            fontSize: 12,
-            opacity: 0.55,
-            padding: "2px 8px",
-            borderRadius: 999,
-            background: "rgba(255,255,255,0.06)",
-          }}
-          title="Source of the currently loaded deck"
-        >
-          {sourceLabel}
-        </span>
-        <div style={{ flex: 1 }} />
-        <button
-          type="button"
-          onClick={resetToSeed}
-          style={chipBtn(false)}
-          onMouseEnter={(e) => (e.currentTarget.style.background = "rgba(255,255,255,0.10)")}
-          onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}
-          title="Reset to the built-in seed deck"
-        >
-          <RotateCcw size={14} />
-          Reset
-        </button>
-        <button
-          type="button"
-          onClick={() => fileInputRef.current?.click()}
-          style={chipBtn(true)}
-          onMouseEnter={(e) =>
-            (e.currentTarget.style.background = "rgba(138, 150, 240, 0.95)")
-          }
-          onMouseLeave={(e) =>
-            (e.currentTarget.style.background = "rgba(138, 150, 240, 0.85)")
-          }
-        >
-          <Upload size={14} />
-          Open .pptx
-        </button>
-        <input
-          ref={fileInputRef}
-          type="file"
-          accept=".pptx,application/vnd.openxmlformats-officedocument.presentationml.presentation"
-          onChange={async (e) => {
-            const file = e.target.files?.[0];
-            if (file) await loadFromFile(file);
-            e.target.value = "";
-          }}
-          style={{ display: "none" }}
-        />
-      </div>
-
-      <div style={{ flex: 1, position: "relative", minHeight: 0 }}>
-        <SlidewiseEditor
-          ref={editorRef}
-          deck={deck}
-          onChange={(next) => {
-            if (import.meta.env.DEV) {
-              console.debug("[slidewise] onChange", next.slides.length, "slides");
-            }
-          }}
-          onSave={handleSave}
-          onExport={handleExportPptx}
-        />
-      </div>
-
-      {overlay && (
-        <div
-          style={{
-            position: "fixed",
-            inset: 0,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            background: "rgba(15, 23, 42, 0.45)",
-            color: "#fff",
-            fontFamily: "Inter, system-ui, sans-serif",
-            fontSize: 18,
-            fontWeight: 600,
-            zIndex: 999,
-            pointerEvents: "none",
-          }}
-        >
-          <div
-            style={{
-              padding: "16px 28px",
-              background: "rgba(15, 23, 42, 0.85)",
-              borderRadius: 14,
-              border: "1px dashed rgba(255,255,255,0.45)",
-              backdropFilter: "blur(12px)",
-            }}
-          >
-            {overlay}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-function chipBtn(primary: boolean): React.CSSProperties {
-  return {
-    display: "inline-flex",
-    alignItems: "center",
-    gap: 6,
-    height: 28,
-    padding: "0 12px",
-    borderRadius: 999,
-    border: primary
-      ? "1px solid rgba(138, 150, 240, 0.85)"
-      : "1px solid rgba(255,255,255,0.16)",
-    background: primary ? "rgba(138, 150, 240, 0.85)" : "transparent",
-    color: primary ? "#0E1330" : "#fff",
-    fontSize: 12,
-    fontWeight: 600,
-    cursor: "pointer",
-    fontFamily: "inherit",
-  };
-}

package/src/components/editor/Editor.tsx

@@ -1,53 +0,0 @@
-import { useEditor } from "@/lib/StoreProvider";
-import type { Deck } from "@/lib/types";
-import { TopBar } from "./TopBar";
-import { SlideRail } from "./SlideRail";
-import { Canvas } from "./Canvas";
-import { BottomToolbar } from "./BottomToolbar";
-import { PlayMode } from "./PlayMode";
-import { GridView } from "./GridView";
-
-interface EditorProps {
-  showTopBar?: boolean;
-  onSave?: (deck: Deck) => void | Promise<void>;
-  onExport?: (deck: Deck) => void;
-}
-
-export function Editor({ showTopBar = true, onSave, onExport }: EditorProps = {}) {
-  const playing = useEditor((s) => s.playing);
-  const view = useEditor((s) => s.view);
-  const theme = useEditor((s) => s.theme);
-
-  return (
-    <div
-      className={`slidewise-editor theme-${theme}`}
-      style={{
-        width: "100%",
-        height: "100%",
-        display: "flex",
-        flexDirection: "column",
-        background: "var(--app-bg)",
-        color: "var(--ink)",
-        overflow: "hidden",
-      }}
-    >
-      {showTopBar && <TopBar onSave={onSave} onExport={onExport} />}
-      <div
-        style={{
-          flex: 1,
-          display: "flex",
-          overflow: "hidden",
-          position: "relative",
-        }}
-      >
-        <SlideRail />
-        <div style={{ flex: 1, display: "flex", position: "relative" }}>
-          <Canvas />
-          <BottomToolbar />
-        </div>
-      </div>
-      {view === "grid" && <GridView />}
-      {playing && <PlayMode />}
-    </div>
-  );
-}

package/src/index.css

@@ -1,13 +0,0 @@
-@import "tailwindcss";
-@import "./SlidewiseEditor.css";
-
-html,
-body {
-  height: 100%;
-  margin: 0;
-  background: #ffffff;
-}
-
-#root {
-  height: 100%;
-}