@textcortex/slidewise 1.0.0

package/src/components/editor/TopBar.tsx

@@ -0,0 +1,240 @@
+import {
+  Undo2,
+  Redo2,
+  Save,
+  Play,
+  Download,
+  Sparkles,
+  Sun,
+  Moon,
+} from "lucide-react";
+import { useEditor, useEditorStore } from "@/lib/StoreProvider";
+import { useState } from "react";
+import type { Deck } from "@/lib/types";
+
+interface TopBarProps {
+  onSave?: (deck: Deck) => void | Promise<void>;
+  onExport?: (deck: Deck) => void;
+}
+
+export function TopBar({ onSave: onSaveProp, onExport: onExportProp }: TopBarProps = {}) {
+  const store = useEditorStore();
+  const title = useEditor((s) => s.deck.title);
+  const setTitle = useEditor((s) => s.setTitle);
+  const undo = useEditor((s) => s.undo);
+  const redo = useEditor((s) => s.redo);
+  const play = useEditor((s) => s.play);
+  const theme = useEditor((s) => s.theme);
+  const toggleTheme = useEditor((s) => s.toggleTheme);
+  const [saved, setSaved] = useState<"idle" | "saving" | "saved">("idle");
+
+  const onSave = async () => {
+    setSaved("saving");
+    const deck = store.getState().deck;
+    try {
+      if (onSaveProp) {
+        await onSaveProp(deck);
+      } else {
+        try {
+          localStorage.setItem("slidewise-deck", JSON.stringify(deck));
+        } catch {}
+      }
+      setTimeout(() => setSaved("saved"), 320);
+      setTimeout(() => setSaved("idle"), 1600);
+    } catch {
+      setSaved("idle");
+    }
+  };
+
+  const onExport = () => {
+    const deck = store.getState().deck;
+    if (onExportProp) {
+      onExportProp(deck);
+      return;
+    }
+    const blob = new Blob([JSON.stringify(deck, null, 2)], {
+      type: "application/json",
+    });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${(deck.title || "deck").replace(/[^a-z0-9-_]+/gi, "-")}.slidewise.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  return (
+    <div
+      style={{
+        height: 56,
+        display: "flex",
+        alignItems: "center",
+        padding: "0 14px",
+        gap: 10,
+        background: "var(--app-bg)",
+        borderBottom: "1px solid var(--border)",
+        boxShadow: "var(--topbar-shadow)",
+        fontFamily: "Inter, system-ui, sans-serif",
+        position: "relative",
+        zIndex: 10,
+        color: "var(--ink)",
+      }}
+    >
+      <IconBtn onClick={undo} title="Undo">
+        <Undo2 size={16} />
+      </IconBtn>
+      <IconBtn onClick={redo} title="Redo">
+        <Redo2 size={16} />
+      </IconBtn>
+
+      <div
+        style={{
+          flex: 1,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: 8,
+          minWidth: 0,
+        }}
+      >
+        <span
+          style={{
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 4,
+            padding: "3px 8px",
+            background: "var(--smart-grad)",
+            color: "var(--smart-fg)",
+            borderRadius: 999,
+            fontSize: 11,
+            fontWeight: 600,
+            letterSpacing: 0.2,
+          }}
+        >
+          <Sparkles size={11} />
+          Smart
+        </span>
+        <input
+          aria-label="Deck title"
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          style={{
+            background: "transparent",
+            border: "none",
+            fontSize: 14,
+            fontWeight: 500,
+            color: "var(--ink)",
+            textAlign: "center",
+            minWidth: 240,
+            maxWidth: 520,
+          }}
+        />
+      </div>
+
+      <IconBtn
+        onClick={toggleTheme}
+        title={theme === "dark" ? "Light mode" : "Dark mode"}
+      >
+        {theme === "dark" ? <Sun size={16} /> : <Moon size={16} />}
+      </IconBtn>
+
+      <button
+        onClick={onSave}
+        style={chromeBtnStyle()}
+        onMouseEnter={(e) => (e.currentTarget.style.background = "var(--hover)")}
+        onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}
+      >
+        <Save size={14} />
+        {saved === "saving" ? "Saving…" : saved === "saved" ? "Saved" : "Save"}
+      </button>
+
+      <button
+        onClick={play}
+        style={chromeBtnStyle()}
+        onMouseEnter={(e) => (e.currentTarget.style.background = "var(--hover)")}
+        onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}
+      >
+        <Play size={14} />
+        Play
+      </button>
+
+      <button
+        onClick={onExport}
+        style={{
+          height: 32,
+          padding: "0 12px",
+          display: "flex",
+          alignItems: "center",
+          gap: 6,
+          background: "var(--primary-bg)",
+          border: "1px solid var(--primary-bg)",
+          borderRadius: 10,
+          cursor: "pointer",
+          color: "var(--primary-fg)",
+          fontSize: 13,
+          fontWeight: 500,
+        }}
+        onMouseEnter={(e) =>
+          (e.currentTarget.style.background = "var(--primary-bg-hover)")
+        }
+        onMouseLeave={(e) =>
+          (e.currentTarget.style.background = "var(--primary-bg)")
+        }
+      >
+        <Download size={14} />
+        Export
+      </button>
+    </div>
+  );
+}
+
+function chromeBtnStyle(): React.CSSProperties {
+  return {
+    height: 32,
+    padding: "0 12px",
+    display: "flex",
+    alignItems: "center",
+    gap: 6,
+    background: "transparent",
+    border: "1px solid var(--border-strong)",
+    borderRadius: 10,
+    cursor: "pointer",
+    color: "var(--ink)",
+    fontSize: 13,
+    fontWeight: 500,
+  };
+}
+
+function IconBtn({
+  children,
+  onClick,
+  title,
+}: {
+  children: React.ReactNode;
+  onClick: () => void;
+  title: string;
+}) {
+  return (
+    <button
+      title={title}
+      aria-label={title}
+      onClick={onClick}
+      style={{
+        width: 32,
+        height: 32,
+        borderRadius: 8,
+        border: "none",
+        background: "transparent",
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        color: "var(--ink)",
+      }}
+      onMouseEnter={(e) => (e.currentTarget.style.background = "var(--hover)")}
+      onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}
+    >
+      {children}
+    </button>
+  );
+}

package/src/fonts.css

@@ -0,0 +1,2 @@
+@import "@fontsource-variable/geist/index.css";
+@import "@fontsource-variable/geist-mono/index.css";

package/src/index.css

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

package/src/index.ts

@@ -0,0 +1,36 @@
+export {
+  SlidewiseEditor,
+  type SlidewiseEditorProps,
+  type SlidewiseEditorHandle,
+} from "./SlidewiseEditor";
+
+export {
+  SlidewiseFileEditor,
+  type SlidewiseFileEditorProps,
+  type SlidewiseFileEditorApi,
+} from "./SlidewiseFileEditor";
+
+export { parsePptx, serializeDeck } from "./lib/pptx";
+export type { ParseDiagnostics, ParseResult } from "./lib/pptx/types";
+
+export { migrate, CURRENT_DECK_VERSION } from "./lib/schema/migrate";
+
+export type {
+  Deck,
+  Slide,
+  SlideElement,
+  ElementType,
+  EnterAnim,
+  BaseElement,
+  TextElement,
+  ShapeElement,
+  ShapeKind,
+  ImageElement,
+  LineElement,
+  TableElement,
+  IconElement,
+  EmbedElement,
+  UnknownElement,
+  ElementDraft,
+} from "./lib/types";
+export { SLIDE_W, SLIDE_H } from "./lib/types";

package/src/lib/StoreProvider.tsx

@@ -0,0 +1,43 @@
+import {
+  createContext,
+  useContext,
+  useRef,
+  type PropsWithChildren,
+} from "react";
+import { useStore } from "zustand";
+import {
+  createEditorStore,
+  type EditorState,
+  type EditorStore,
+} from "./store";
+import type { Deck } from "./types";
+
+const EditorStoreContext = createContext<EditorStore | null>(null);
+
+export function EditorStoreProvider({
+  initialDeck,
+  children,
+}: PropsWithChildren<{ initialDeck: Deck }>) {
+  const storeRef = useRef<EditorStore | null>(null);
+  if (!storeRef.current) {
+    storeRef.current = createEditorStore(initialDeck);
+  }
+  return (
+    <EditorStoreContext.Provider value={storeRef.current}>
+      {children}
+    </EditorStoreContext.Provider>
+  );
+}
+
+export function useEditorStore(): EditorStore {
+  const store = useContext(EditorStoreContext);
+  if (!store) {
+    throw new Error("useEditor must be used within <EditorStoreProvider>");
+  }
+  return store;
+}
+
+export function useEditor<T>(selector: (s: EditorState) => T): T {
+  const store = useEditorStore();
+  return useStore(store, selector);
+}

package/src/lib/__tests__/css-scope.test.ts

@@ -0,0 +1,133 @@
+import { describe, it, expect } from "vitest";
+import { readFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import { dirname, resolve } from "node:path";
+
+const here = dirname(fileURLToPath(import.meta.url));
+const repoRoot = resolve(here, "..", "..", "..");
+
+/**
+ * Slidewise ships as a library. Hosts mount it inside their own DOM, with
+ * their own global stylesheets (Tailwind preflight, normalize.css, app
+ * resets). Every rule we ship must therefore live under `.slidewise-editor`
+ * — anything at the document root would override host styles when our CSS
+ * loads, or get overridden when host CSS loads, depending on order.
+ *
+ * This test scans the source CSS for top-level selectors and rejects
+ * anything that escapes the scope. Allowed at top level: at-rules
+ * (`@font-face`, `@import`, `@media`, `@supports`, …) and selectors that
+ * begin with `.slidewise-editor`.
+ */
+describe("library CSS scope", () => {
+  it("every rule in SlidewiseEditor.css is scoped under .slidewise-editor", () => {
+    const css = readFileSync(
+      resolve(repoRoot, "src", "SlidewiseEditor.css"),
+      "utf8"
+    );
+    const violations = findUnscopedSelectors(css);
+    if (violations.length) {
+      throw new Error(
+        `Found ${violations.length} unscoped top-level selector(s) in SlidewiseEditor.css. ` +
+          `Every rule must be nested under .slidewise-editor so the lib does not collide ` +
+          `with host styles. Offenders:\n  ${violations.join("\n  ")}`
+      );
+    }
+    expect(violations).toEqual([]);
+  });
+});
+
+/**
+ * Walk the CSS at brace depth 0, find each rule's selector list, and report
+ * any selector that does not start with `.slidewise-editor`. Strips comments
+ * and string contents first so braces inside them don't confuse the scan.
+ */
+function findUnscopedSelectors(rawCss: string): string[] {
+  const css = stripCommentsAndStrings(rawCss);
+  const violations: string[] = [];
+  let depth = 0;
+  let buf = "";
+
+  for (let i = 0; i < css.length; i++) {
+    const ch = css[i];
+    if (ch === "{") {
+      if (depth === 0) {
+        const selector = buf.trim();
+        if (selector && !isAllowedTopLevel(selector)) {
+          for (const sel of splitSelectorList(selector)) {
+            const s = sel.trim();
+            if (!s) continue;
+            if (!s.startsWith(".slidewise-editor")) {
+              violations.push(s);
+            }
+          }
+        }
+        buf = "";
+      }
+      depth++;
+      continue;
+    }
+    if (ch === "}") {
+      depth = Math.max(0, depth - 1);
+      if (depth === 0) buf = "";
+      continue;
+    }
+    if (depth === 0) buf += ch;
+  }
+
+  return violations;
+}
+
+function isAllowedTopLevel(selector: string): boolean {
+  // At-rules (@font-face, @media, @supports, @keyframes, @import, …) are
+  // global by design and don't override host styles unless they nest
+  // unscoped rules — which the recursion catches at depth > 0 if it ever
+  // matters. @font-face etc. only register names; they don't paint.
+  return selector.startsWith("@");
+}
+
+function splitSelectorList(selector: string): string[] {
+  // CSS selectors are separated by commas at the top level (commas inside
+  // parens — :is(), :not(), :where() — are not separators). Track paren
+  // depth as we split.
+  const out: string[] = [];
+  let depth = 0;
+  let cur = "";
+  for (const ch of selector) {
+    if (ch === "(") depth++;
+    else if (ch === ")") depth = Math.max(0, depth - 1);
+    if (ch === "," && depth === 0) {
+      out.push(cur);
+      cur = "";
+    } else {
+      cur += ch;
+    }
+  }
+  if (cur.trim()) out.push(cur);
+  return out;
+}
+
+function stripCommentsAndStrings(css: string): string {
+  let out = "";
+  let i = 0;
+  while (i < css.length) {
+    if (css[i] === "/" && css[i + 1] === "*") {
+      const end = css.indexOf("*/", i + 2);
+      i = end < 0 ? css.length : end + 2;
+      continue;
+    }
+    if (css[i] === '"' || css[i] === "'") {
+      const quote = css[i];
+      let j = i + 1;
+      while (j < css.length && css[j] !== quote) {
+        if (css[j] === "\\") j += 2;
+        else j++;
+      }
+      out += quote + " ".repeat(Math.max(0, j - i - 1)) + quote;
+      i = j + 1;
+      continue;
+    }
+    out += css[i];
+    i++;
+  }
+  return out;
+}

package/src/lib/fonts.ts

@@ -0,0 +1,104 @@
+import type { Deck, TextElement } from "@/lib/types";
+
+/**
+ * Best-effort web-font loader for typefaces referenced inside a Deck.
+ *
+ * PPTX files commonly reference typefaces that are NOT installed on the
+ * viewer's machine. The cleanest fix would be to extract the embedded font
+ * binaries from `ppt/fonts/*.fntdata`, but those use Microsoft's EOT format
+ * with MTX compression, which has no practical browser-side decoder.
+ *
+ * As a pragmatic alternative we ask Google Fonts for every unique typeface
+ * name we see — Google's CSS API silently returns 404 for unknown families,
+ * so the worst case is the browser's normal font fallback. Most popular
+ * typefaces (Coda, Quattrocento Sans, Roboto, Inter, Lato, Montserrat, …)
+ * round-trip cleanly this way.
+ */
+
+// System / web-safe families we never try to fetch from Google Fonts.
+const SYSTEM_FAMILIES = new Set(
+  [
+    "inter",
+    "system-ui",
+    "sans-serif",
+    "serif",
+    "monospace",
+    "arial",
+    "helvetica",
+    "helvetica neue",
+    "times",
+    "times new roman",
+    "georgia",
+    "courier",
+    "courier new",
+    "verdana",
+    "tahoma",
+    "trebuchet ms",
+    "geist",
+    "geist variable",
+    "geist mono",
+    "geist mono variable",
+  ].map((s) => s.toLowerCase())
+);
+
+/** Element IDs we manage in <head> — one per editor host. */
+const STYLESHEET_ID_PREFIX = "slidewise-google-fonts-";
+
+export function collectFontFamilies(deck: Deck): string[] {
+  const families = new Set<string>();
+  for (const slide of deck.slides) {
+    for (const el of slide.elements) {
+      if (el.type !== "text") continue;
+      const t = el as TextElement;
+      if (t.fontFamily) families.add(t.fontFamily);
+      if (t.runs) {
+        for (const r of t.runs) {
+          if (r.fontFamily) families.add(r.fontFamily);
+        }
+      }
+    }
+  }
+  return [...families];
+}
+
+export function buildGoogleFontsHref(families: string[]): string | null {
+  const candidates = families
+    .map((f) => f.trim())
+    .filter((f) => f.length > 0)
+    .filter((f) => !SYSTEM_FAMILIES.has(f.toLowerCase()));
+  if (!candidates.length) return null;
+  // Google's css2 endpoint accepts `family=Name+With+Spaces` repeated.
+  const params = candidates
+    .map((f) => `family=${encodeURIComponent(f).replace(/%20/g, "+")}`)
+    .join("&");
+  return `https://fonts.googleapis.com/css2?${params}&display=swap`;
+}
+
+/**
+ * Inject a <link rel="stylesheet"> for the given families. Idempotent per
+ * `instanceId` — calling again with a different family set replaces the
+ * previous link. Returns a disposer.
+ */
+export function ensureGoogleFontsLoaded(
+  instanceId: string,
+  families: string[]
+): () => void {
+  if (typeof document === "undefined") return () => {};
+  const id = STYLESHEET_ID_PREFIX + instanceId;
+  const existing = document.getElementById(id) as HTMLLinkElement | null;
+  const href = buildGoogleFontsHref(families);
+  if (!href) {
+    if (existing) existing.remove();
+    return () => {};
+  }
+  if (existing && existing.href === href) {
+    return () => existing.remove();
+  }
+  const link = existing ?? document.createElement("link");
+  link.id = id;
+  link.rel = "stylesheet";
+  link.href = href;
+  link.crossOrigin = "anonymous";
+  if (!existing) document.head.appendChild(link);
+  return () => link.remove();
+}