@textcortex/slidewise 1.0.1 → 1.1.0

package/package.json

@@ -1,9 +1,8 @@
 {
   "name": "@textcortex/slidewise",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Embeddable React PPTX editor.",
   "license": "MIT",
-  "private": false,
   "type": "module",
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
@@ -25,7 +24,8 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/textcortex/SlideWise.git"
+    "url": "git+https://github.com/textcortex/SlideWise.git",
+    "directory": "packages/slidewise"
   },
   "homepage": "https://github.com/textcortex/SlideWise#readme",
   "bugs": {
@@ -51,36 +51,21 @@
     "zustand": "^5.0.12"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.27.10",
-    "@tailwindcss/vite": "^4",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@vitejs/plugin-react": "^5.0.0",
-    "eslint": "^9",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.20",
-    "globals": "^16.2.0",
     "jsdom": "^29.1.1",
     "react": "19.2.4",
     "react-dom": "19.2.4",
-    "tailwindcss": "^4",
-    "typescript": "^5",
-    "typescript-eslint": "^8.42.0",
     "vite": "^7.0.0",
     "vitest": "^4.1.5"
   },
   "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
     "build:lib": "tsc -p tsconfig.lib.json && vite build --mode lib",
-    "preview": "vite preview",
     "test": "vitest run",
     "test:watch": "vitest",
-    "lint": "eslint .",
-    "changeset": "changeset",
-    "version-packages": "changeset version",
-    "release": "pnpm run build:lib && changeset publish"
+    "lint": "eslint ."
   }
 }

package/src/SlidewiseEditor.css

@@ -4,24 +4,75 @@
  * to avoid colliding with host styles. At-rules (@font-face, @media, …) are
  * fine at the top level. The `library CSS scope` test in
  * src/lib/__tests__/css-scope.test.ts enforces this.
+ *
+ * THEMING
+ * -------
+ * Every chrome surface (panels, cards, popovers, the canvas frame) reads
+ * from a small set of CSS custom properties exposed below. Hosts override
+ * any of them by either:
+ *
+ *   1. Passing them via the `style` prop on `<Slidewise.Root>`:
+ *        <Slidewise.Root style={{ "--surface-bg": "#0f0f12" }}>
+ *
+ *   2. Setting them in a stylesheet that targets a wrapping class:
+ *        .my-host .slidewise-editor { --surface-bg: #0f0f12; }
+ *
+ * The light defaults track the rest of TextCortex's web app; the dark
+ * defaults adopt the kit from textcortex/platform#7428 (charcoal-purple
+ * surface with a faint inset highlight + layered shadow on hover).
  */
 @import "./fonts.css";
 
 .slidewise-editor {
+  /* PUBLIC THEMING TOKENS
+     These are namespaced with `--slidewise-*` and intended for hosts to
+     override directly via the `style` prop on `<Slidewise.Root>` or via a
+     wrapping stylesheet. Internal variables (below) cascade from these
+     where the connection is structural. Hosts that want to override every
+     surface still have access to the unprefixed internal vars too. */
+  --slidewise-radius: 10px;
+  --slidewise-bar-bg: var(--app-bg);
+  --slidewise-accent: var(--accent);
+
+  /* Layout backgrounds */
   --app-bg: #ffffff;
   --rail-bg: #fafafb;
   --canvas-bg-from: #f4f6fb;
   --canvas-bg-to: #e7eaf2;
+
+  /* Generic chrome surface (cards, popovers, dialogs). Mirrors the kit
+     introduced for the Browse Agents redesign — neutral surface with a
+     hairline inset ring and a layered shadow that lifts on hover. */
+  --surface-bg: #ffffff;
+  --surface-ring: rgba(0, 0, 0, 0.06);
+  --surface-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6) inset,
+    0 1px 2px rgba(16, 24, 40, 0.06),
+    0 1px 3px rgba(16, 24, 40, 0.08);
+  --surface-hover-bg: #f6f3ff;
+  --surface-hover-ring: rgba(213, 192, 253, 0.6);
+  --surface-hover-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6) inset,
+    0 2px 4px rgba(128, 67, 249, 0.1),
+    0 8px 24px -4px rgba(128, 67, 249, 0.22);
+
+  /* Borders and dividers */
   --border: rgba(15, 23, 42, 0.08);
   --border-strong: rgba(15, 23, 42, 0.1);
   --border-dashed: rgba(15, 23, 42, 0.18);
+
+  /* Text */
   --ink: #0e1330;
   --ink-muted: #5b6178;
+
+  /* Hover/active states for interactive elements (buttons, list rows) */
   --hover: rgba(15, 23, 42, 0.05);
   --hover-strong: rgba(15, 23, 42, 0.06);
   --active: rgba(15, 23, 42, 0.08);
+
+  /* Brand accent */
   --accent: #4f5bd5;
   --accent-soft: rgba(79, 91, 213, 0.14);
+
+  /* Floating UI shadows */
   --toolbar-bg: rgba(255, 255, 255, 0.94);
   --toolbar-shadow: 0 1px 2px rgba(15, 23, 42, 0.04),
     0 12px 32px rgba(15, 23, 42, 0.1);
@@ -32,20 +83,33 @@
     0 24px 60px rgba(15, 23, 42, 0.16);
   --thumb-shadow: 0 1px 2px rgba(15, 23, 42, 0.04),
     0 6px 20px rgba(15, 23, 42, 0.08);
+
+  /* Tool selector active pill */
   --tool-active-bg: #0e1330;
   --tool-active-fg: #ffffff;
+
+  /* Primary button (e.g. Save) */
   --primary-bg: #0e1330;
   --primary-bg-hover: #1a2147;
   --primary-fg: #ffffff;
+
+  /* Form inputs */
   --input-bg: rgba(15, 23, 42, 0.04);
+
+  /* Popover surfaces */
   --menu-bg: #ffffff;
   --menu-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
+
+  /* Misc */
   --gap-icon-bg: #ffffff;
   --scroll-thumb: rgba(15, 23, 42, 0.14);
   --scroll-thumb-hover: rgba(15, 23, 42, 0.24);
   --smart-grad: linear-gradient(135deg, #e7e9ff, #fce7df);
   --smart-fg: #4f5bd5;
   --grid-overlay-bg: rgba(245, 246, 250, 0.96);
+  --loading-overlay-bg: rgba(255, 255, 255, 0.6);
+
+  /* Typography */
   --font-geist-sans: "Geist Variable";
   --font-geist-mono: "Geist Mono Variable";
   color-scheme: light;
@@ -58,20 +122,38 @@
 
 .slidewise-editor.theme-dark {
   --app-bg: #0a0d1c;
-  --rail-bg: #0d1124;
+  --rail-bg: #11131c;
   --canvas-bg-from: #181c38;
   --canvas-bg-to: #0c1027;
+
+  /* Charcoal-purple surface kit from textcortex/platform#7428 — neutral
+     dark base, faint inset highlight, layered shadow that lifts to a
+     subtle plum tint on hover. */
+  --surface-bg: #1c1c22;
+  --surface-ring: rgba(255, 255, 255, 0.05);
+  --surface-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.06) inset,
+    0 1px 2px rgba(0, 0, 0, 0.5),
+    0 4px 10px -2px rgba(0, 0, 0, 0.4);
+  --surface-hover-bg: #241834;
+  --surface-hover-ring: rgba(125, 91, 223, 0.2);
+  --surface-hover-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.04) inset,
+    0 4px 16px -2px rgba(125, 91, 223, 0.4);
+
   --border: rgba(255, 255, 255, 0.08);
   --border-strong: rgba(255, 255, 255, 0.14);
   --border-dashed: rgba(255, 255, 255, 0.18);
+
   --ink: #ecedfa;
   --ink-muted: #969ab8;
+
   --hover: rgba(255, 255, 255, 0.06);
   --hover-strong: rgba(255, 255, 255, 0.09);
   --active: rgba(255, 255, 255, 0.12);
+
   --accent: #8a96f0;
   --accent-soft: rgba(138, 150, 240, 0.22);
-  --toolbar-bg: rgba(22, 26, 56, 0.88);
+
+  --toolbar-bg: rgba(28, 28, 34, 0.92);
   --toolbar-shadow: 0 1px 2px rgba(0, 0, 0, 0.5),
     0 12px 32px rgba(0, 0, 0, 0.5);
   --rail-shadow: 4px 0 14px rgba(0, 0, 0, 0.35);
@@ -81,15 +163,20 @@
     0 30px 80px rgba(0, 0, 0, 0.55);
   --thumb-shadow: 0 1px 2px rgba(0, 0, 0, 0.5),
     0 8px 24px rgba(0, 0, 0, 0.45);
+
   --tool-active-bg: #ecedfa;
   --tool-active-fg: #0a0d1c;
+
   --primary-bg: #ecedfa;
   --primary-bg-hover: #ffffff;
   --primary-fg: #0a0d1c;
+
   --input-bg: rgba(255, 255, 255, 0.07);
-  --menu-bg: #181c3a;
+
+  --menu-bg: #1c1c22;
   --menu-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
-  --gap-icon-bg: #181c3a;
+
+  --gap-icon-bg: #1c1c22;
   --scroll-thumb: rgba(255, 255, 255, 0.16);
   --scroll-thumb-hover: rgba(255, 255, 255, 0.3);
   --smart-grad: linear-gradient(
@@ -99,6 +186,7 @@
   );
   --smart-fg: #c8cefb;
   --grid-overlay-bg: rgba(10, 13, 28, 0.96);
+  --loading-overlay-bg: rgba(0, 0, 0, 0.5);
   color-scheme: dark;
 }
 
@@ -144,3 +232,32 @@
 .slidewise-editor button {
   font-family: inherit;
 }
+
+/*
+ * Ambient surface utility — a card / panel base that uses the surface-*
+ * tokens. Region parts (e.g. RightPanel) and host injections under it
+ * automatically pick up the kit's hairline ring + layered shadow with no
+ * extra styling. Hosts can apply this class manually or override the
+ * token values to retheme every surface in one place.
+ */
+.slidewise-editor .slidewise-surface {
+  background: var(--surface-bg);
+  box-shadow: var(--surface-shadow);
+  border: 1px solid transparent;
+  outline: 1px solid var(--surface-ring);
+  outline-offset: -1px;
+  border-radius: 12px;
+  transition: background-color 200ms, box-shadow 200ms, outline-color 200ms;
+}
+
+.slidewise-editor .slidewise-surface[data-interactive="true"]:hover {
+  background: var(--surface-hover-bg);
+  box-shadow: var(--surface-hover-shadow);
+  outline-color: var(--surface-hover-ring);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .slidewise-editor .slidewise-surface {
+    transition: none;
+  }
+}

package/src/SlidewiseEditor.tsx

@@ -1,18 +1,14 @@
+import { forwardRef, type CSSProperties } from "react";
+import { Root, type SlidewiseRootHandle, type SlidewiseRootProps } from "./compound/SlidewiseRoot";
 import {
-  forwardRef,
-  useEffect,
-  useId,
-  useImperativeHandle,
-  useRef,
-  type CSSProperties,
-  type Ref,
-} from "react";
-import { Editor } from "@/components/editor/Editor";
-import {
-  EditorStoreProvider,
-  useEditorStore,
-} from "@/lib/StoreProvider";
-import { collectFontFamilies, ensureGoogleFontsLoaded } from "@/lib/fonts";
+  TopBar,
+  SlideRail,
+  Canvas,
+  BottomToolbar,
+  Body,
+  CanvasFrame,
+} from "./compound/parts";
+import type { SlidewiseIcons } from "./compound/IconContext";
 import type { Deck } from "@/lib/types";
 import "./SlidewiseEditor.css";
 
@@ -42,173 +38,93 @@ export interface SlidewiseEditorProps {
   initialSlideId?: string;
   /** Render the built-in top bar (title, undo/redo, save, play). Default true. */
   showTopBar?: boolean;
+  /** Render the floating bottom toolbar (tool selector). Default true. */
+  showBottomToolbar?: boolean;
   /** Override the bundled Geist font; sets `--font-geist-sans` on the root. */
   fontFamily?: string;
+  /**
+   * Per-action icon overrides. Pass a ReactNode for any of `undo`, `redo`,
+   * `save`, `play`, `themeLight`, `themeDark`, `export`, `smart` to skin the
+   * editor's chrome with your own icon set; missing slots fall back to the
+   * bundled lucide-react icons.
+   */
+  icons?: SlidewiseIcons;
   /** Extra class names appended to the editor root. */
   className?: string;
   /** Inline style applied to the editor root. */
   style?: CSSProperties;
 }
 
-export interface SlidewiseEditorHandle {
-  play(): void;
-  stop(): void;
-  undo(): void;
-  redo(): void;
-  getDeck(): Deck;
-  isDirty(): boolean;
-  resetDirty(): void;
-}
+export type SlidewiseEditorHandle = SlidewiseRootHandle;
 
+/**
+ * Convenience wrapper that renders the default editor layout. Equivalent to:
+ *
+ * ```tsx
+ * <Slidewise.Root deck={deck} onChange={...}>
+ *   <Slidewise.TopBar />
+ *   <Slidewise.Body>
+ *     <Slidewise.SlideRail />
+ *     <Slidewise.CanvasFrame>
+ *       <Slidewise.Canvas />
+ *       <Slidewise.BottomToolbar />
+ *     </Slidewise.CanvasFrame>
+ *   </Slidewise.Body>
+ * </Slidewise.Root>
+ * ```
+ *
+ * Use `<Slidewise.Root>` directly when you need to wrap, replace, or omit
+ * any region.
+ */
 export const SlidewiseEditor = forwardRef<
   SlidewiseEditorHandle,
   SlidewiseEditorProps
->(function SlidewiseEditor(props, ref) {
-  return (
-    <EditorStoreProvider initialDeck={props.deck}>
-      <SlidewiseEditorInner {...props} forwardedRef={ref} />
-    </EditorStoreProvider>
-  );
-});
-
-function SlidewiseEditorInner({
-  deck,
-  onChange,
-  onSave,
-  onExport,
-  onDirtyChange,
-  theme,
-  initialSlideId,
-  showTopBar,
-  fontFamily,
-  className,
-  style,
-  forwardedRef,
-}: SlidewiseEditorProps & { forwardedRef: Ref<SlidewiseEditorHandle> }) {
-  const store = useEditorStore();
-  const savedDeckRef = useRef<Deck>(deck);
-  const dirtyRef = useRef(false);
-  const onChangeRef = useRef(onChange);
-  const onDirtyChangeRef = useRef(onDirtyChange);
-
-  // Keep callback refs current without re-subscribing.
-  useEffect(() => {
-    onChangeRef.current = onChange;
-    onDirtyChangeRef.current = onDirtyChange;
-  }, [onChange, onDirtyChange]);
-
-  // Apply theme on first render and whenever it changes.
-  useEffect(() => {
-    if (theme) {
-      store.getState().setTheme(theme);
-    }
-  }, [theme, store]);
-
-  // Land on the requested slide.
-  useEffect(() => {
-    if (initialSlideId) {
-      const exists = store
-        .getState()
-        .deck.slides.some((s) => s.id === initialSlideId);
-      if (exists) {
-        store.getState().selectSlide(initialSlideId);
-      }
-    }
-    // run once on mount
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  // External deck reset: if a new Deck reference comes in, replace the store's
-  // deck and clear dirty. The first run is a no-op (savedDeckRef === deck).
-  useEffect(() => {
-    if (deck !== savedDeckRef.current) {
-      store.getState().setDeck(deck);
-      savedDeckRef.current = deck;
-      if (dirtyRef.current) {
-        dirtyRef.current = false;
-        onDirtyChangeRef.current?.(false);
-      }
-    }
-  }, [deck, store]);
-
-  // Subscribe once: emit onChange, recompute dirty, and refresh the Google
-  // Fonts <link> whenever the deck changes.
-  const instanceId = useId().replace(/[^a-z0-9]/gi, "");
-  useEffect(() => {
-    ensureGoogleFontsLoaded(
-      instanceId,
-      collectFontFamilies(store.getState().deck)
-    );
-    return store.subscribe((state, prev) => {
-      if (state.deck === prev.deck) return;
-      onChangeRef.current?.(state.deck);
-      const nextDirty = state.deck !== savedDeckRef.current;
-      if (nextDirty !== dirtyRef.current) {
-        dirtyRef.current = nextDirty;
-        onDirtyChangeRef.current?.(nextDirty);
-      }
-      ensureGoogleFontsLoaded(instanceId, collectFontFamilies(state.deck));
-    });
-  }, [store, instanceId]);
-
-  // Remove our font <link> when the editor unmounts.
-  useEffect(() => {
-    return () => {
-      ensureGoogleFontsLoaded(instanceId, []);
-    };
-  }, [instanceId]);
-
-  useImperativeHandle(
-    forwardedRef,
-    () => ({
-      play: () => store.getState().play(),
-      stop: () => store.getState().stop(),
-      undo: () => store.getState().undo(),
-      redo: () => store.getState().redo(),
-      getDeck: () => store.getState().deck,
-      isDirty: () => dirtyRef.current,
-      resetDirty: () => {
-        savedDeckRef.current = store.getState().deck;
-        if (dirtyRef.current) {
-          dirtyRef.current = false;
-          onDirtyChangeRef.current?.(false);
-        }
-      },
-    }),
-    [store]
-  );
-
-  // Wrap the host save callback so a successful save resets the dirty flag.
-  const handleSave = onSave
-    ? async (d: Deck) => {
-        await onSave(d);
-        savedDeckRef.current = d;
-        if (dirtyRef.current) {
-          dirtyRef.current = false;
-          onDirtyChangeRef.current?.(false);
-        }
-      }
-    : undefined;
-
-  const rootStyle: CSSProperties = {
-    width: "100%",
-    height: "100%",
-    ...(fontFamily ? { ["--font-geist-sans" as string]: fontFamily } : null),
-    ...style,
+>(function SlidewiseEditor(
+  {
+    deck,
+    onChange,
+    onSave,
+    onExport,
+    onDirtyChange,
+    readOnly,
+    theme,
+    initialSlideId,
+    showTopBar = true,
+    showBottomToolbar = true,
+    fontFamily,
+    icons,
+    className,
+    style,
+  },
+  ref
+) {
+  const rootProps: SlidewiseRootProps = {
+    deck,
+    onChange,
+    onSave,
+    onExport,
+    onDirtyChange,
+    readOnly,
+    theme,
+    initialSlideId,
+    fontFamily,
+    icons,
+    className,
+    style,
   };
 
   return (
-    <div
-      className={className ? `slidewise-editor-host ${className}` : "slidewise-editor-host"}
-      style={rootStyle}
-    >
-      <Editor
-        showTopBar={showTopBar !== false}
-        onSave={handleSave}
-        onExport={onExport}
-      />
-    </div>
+    <Root {...rootProps} ref={ref}>
+      {showTopBar && <TopBar />}
+      <Body>
+        <SlideRail />
+        <CanvasFrame>
+          <Canvas />
+          {showBottomToolbar && <BottomToolbar />}
+        </CanvasFrame>
+      </Body>
+    </Root>
   );
-}
+});
 
 export default SlidewiseEditor;