@textcortex/slidewise 1.7.0 → 1.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@textcortex/slidewise",
-  "version": "1.7.0",
+  "version": "1.9.0",
   "description": "Embeddable React PPTX editor.",
   "license": "MIT",
   "type": "module",

package/src/SlidewiseEditor.tsx

@@ -17,6 +17,7 @@ import {
 import type { SlidewiseIcons } from "./compound/IconContext";
 import type { SlidewiseLabels } from "./compound/LabelsContext";
 import type { SlidewiseSurfaces } from "./compound/SurfacesContext";
+import type { SlidewiseCanvasConfig } from "./compound/CanvasContext";
 import type { Transition } from "framer-motion";
 import type { Deck } from "@/lib/types";
 import "./SlidewiseEditor.css";
@@ -96,6 +97,13 @@ export interface SlidewiseEditorProps {
    * list of keys.
    */
   surfaces?: SlidewiseSurfaces;
+  /**
+   * Canvas/viewport configuration: padding, initial zoom, slide shadow +
+   * radius, and host-driven slide-background overrides. Use this when the
+   * default "slide fills the workspace" presentation isn't right for your
+   * host chrome.
+   */
+  canvas?: SlidewiseCanvasConfig;
   /** Extra class names appended to the editor root. */
   className?: string;
   /** Inline style applied to the editor root. */
@@ -151,6 +159,7 @@ export const SlidewiseEditor = forwardRef<
     icons,
     labels,
     surfaces,
+    canvas,
     className,
     style,
   },
@@ -178,6 +187,7 @@ export const SlidewiseEditor = forwardRef<
     icons,
     labels,
     surfaces,
+    canvas,
     className,
     style,
   };

package/src/SlidewiseFileEditor.tsx

@@ -12,6 +12,7 @@ import type { Deck } from "@/lib/types";
 import type { SlidewiseIcons } from "./compound/IconContext";
 import type { SlidewiseLabels } from "./compound/LabelsContext";
 import type { SlidewiseSurfaces } from "./compound/SurfacesContext";
+import type { SlidewiseCanvasConfig } from "./compound/CanvasContext";
 import { DEFAULT_LABELS } from "./compound/LabelsContext";
 import type { Transition } from "framer-motion";
 import type { HistoryState, SelectionSnapshot } from "./compound/SlidewiseRoot";
@@ -106,6 +107,11 @@ export interface SlidewiseFileEditorProps {
    * `--slidewise-bg-*` CSS variables.
    */
   surfaces?: SlidewiseSurfaces;
+  /**
+   * Canvas/viewport configuration: padding, initial zoom, slide shadow +
+   * radius, and host-driven slide-background overrides.
+   */
+  canvas?: SlidewiseCanvasConfig;
   /**
    * Reduced-motion behavior. `"system"` (default) respects the OS
    * preference; `true` forces motion off; `false` forces it on.
@@ -217,6 +223,7 @@ export const SlidewiseFileEditor = forwardRef<
     icons,
     labels,
     surfaces,
+    canvas,
     reduceMotion,
     transition,
     className,
@@ -394,6 +401,7 @@ export const SlidewiseFileEditor = forwardRef<
         icons={icons}
         labels={labels}
         surfaces={surfaces}
+        canvas={canvas}
         reduceMotion={reduceMotion}
         transition={transition}
         onChange={(next) => {

package/src/components/editor/Canvas.tsx

@@ -5,6 +5,10 @@ import { SLIDE_W, SLIDE_H, type SlideElement, type ElementDraft } from "@/lib/ty
 import { ElementView } from "./ElementView";
 import { SelectionFrame } from "./SelectionFrame";
 import { FloatingToolbar } from "./FloatingToolbar";
+import {
+  useCanvasConfig,
+  resolveSlideBackground,
+} from "@/compound/CanvasContext";
 
 export function Canvas() {
   const store = useEditorStore();
@@ -22,6 +26,7 @@ export function Canvas() {
   const deleteElement = useEditor((s) => s.deleteElement);
   const pushHistory = useEditor((s) => s.pushHistory);
 
+  const canvasConfig = useCanvasConfig();
   const [editingId, setEditingId] = useState<string | null>(null);
   const wrapRef = useRef<HTMLDivElement>(null);
   const [autoScale, setAutoScale] = useState(0.6);
@@ -30,10 +35,12 @@ export function Canvas() {
     if (fitMode !== "fit" || !wrapRef.current) return;
     const recompute = () => {
       const r = wrapRef.current!.getBoundingClientRect();
-      // Generous fill: small breathing room horizontally, plus enough vertical
-      // headroom for the floating toolbar (~56) and the bottom toolbar (~76).
-      const padX = 32;
-      const padY = 56 + 76 + 16;
+      // Host-controllable padding via `canvas.padding` on <Slidewise.Root>.
+      // Default mirrors what the editor needed before the prop existed —
+      // ~32px horizontal breathing room and enough vertical headroom for
+      // the floating toolbar (~56) and the bottom toolbar (~76).
+      const padX = canvasConfig.padding.x * 2;
+      const padY = canvasConfig.padding.y * 2;
       const fit = Math.min(
         (r.width - padX) / SLIDE_W,
         (r.height - padY) / SLIDE_H
@@ -44,7 +51,7 @@ export function Canvas() {
     const ro = new ResizeObserver(recompute);
     ro.observe(wrapRef.current);
     return () => ro.disconnect();
-  }, [fitMode]);
+  }, [fitMode, canvasConfig.padding.x, canvasConfig.padding.y]);
 
   const scale = fitMode === "fit" ? autoScale : zoom;
 
@@ -245,9 +252,9 @@ export function Canvas() {
           width: SLIDE_W * scale,
           height: SLIDE_H * scale,
           transform: "translate(-50%, -50%)",
-          background: slide.background,
-          borderRadius: 8,
-          boxShadow: "var(--slide-shadow)",
+          background: resolveSlideBackground(canvasConfig, slide),
+          borderRadius: canvasConfig.slideRadius,
+          boxShadow: canvasConfig.slideShadow,
         }}
       >
         <div

package/src/components/editor/ElementView.tsx

@@ -65,12 +65,17 @@ function TextView({
         : el.vAlign === "middle"
           ? "center"
           : "flex-end",
+    background: el.background,
+    padding: el.padding
+      ? `${el.padding.t}px ${el.padding.r}px ${el.padding.b}px ${el.padding.l}px`
+      : undefined,
+    boxSizing: el.padding ? "border-box" : undefined,
     cursor: editing ? "text" : "inherit",
   };
   const inner: React.CSSProperties = {
     width: "100%",
     color: el.color,
-    fontFamily: el.fontFamily,
+    fontFamily: withGenericFallback(el.fontFamily),
     fontSize: el.fontSize,
     fontWeight: el.fontWeight,
     fontStyle: el.italic ? "italic" : "normal",
@@ -85,11 +90,40 @@ function TextView({
     outline: "none",
   };
 
+  const backingPath = el.backingPath;
+  const positionedOuter: React.CSSProperties = backingPath
+    ? { ...outer, position: "relative" }
+    : outer;
+  const innerStacked: React.CSSProperties = backingPath
+    ? { ...inner, position: "relative", zIndex: 1 }
+    : inner;
+  const backingSvg = backingPath ? (
+    <svg
+      viewBox={`0 0 ${backingPath.viewW} ${backingPath.viewH}`}
+      preserveAspectRatio="none"
+      style={{
+        position: "absolute",
+        inset: 0,
+        width: "100%",
+        height: "100%",
+        pointerEvents: "none",
+        zIndex: 0,
+      }}
+    >
+      <path
+        d={backingPath.d}
+        fill={backingPath.fill}
+        fillRule={backingPath.fillRule ?? "nonzero"}
+      />
+    </svg>
+  ) : null;
+
   if (editing) {
     return (
-      <div style={outer}>
+      <div style={positionedOuter}>
+        {backingSvg}
         <EditableText
-          style={inner}
+          style={innerStacked}
           initialText={el.text}
           initialRuns={el.runs}
           onCommit={(t, r) => onCommit?.(t, r)}
@@ -100,8 +134,9 @@ function TextView({
 
   if (el.runs && el.runs.length) {
     return (
-      <div style={outer}>
-        <div style={inner}>
+      <div style={positionedOuter}>
+        {backingSvg}
+        <div style={innerStacked}>
           {el.runs.map((r, i) => (
             <span key={i} style={runCssStyle(r)}>
               {r.text}
@@ -113,15 +148,40 @@ function TextView({
   }
 
   return (
-    <div style={outer}>
-      <div style={inner}>{el.text}</div>
+    <div style={positionedOuter}>
+      {backingSvg}
+      <div style={innerStacked}>{el.text}</div>
     </div>
   );
 }
 
+/**
+ * Append a `sans-serif` generic so brand families imported from PPTX
+ * (e.g. "EON Office Head") degrade gracefully when the typeface isn't
+ * installed locally — without the generic the browser silently picks
+ * its default serif. Already-qualified stacks (containing a comma) and
+ * plain generics ("serif"/"monospace") pass through untouched.
+ */
+function withGenericFallback(family: string | undefined): string | undefined {
+  if (!family) return family;
+  if (family.includes(",")) return family;
+  const lower = family.trim().toLowerCase();
+  if (
+    lower === "serif" ||
+    lower === "sans-serif" ||
+    lower === "monospace" ||
+    lower === "cursive" ||
+    lower === "fantasy" ||
+    lower === "system-ui"
+  ) {
+    return family;
+  }
+  return `${family}, sans-serif`;
+}
+
 function runCssStyle(r: TextRun): React.CSSProperties {
   const s: React.CSSProperties = {};
-  if (r.fontFamily) s.fontFamily = r.fontFamily;
+  if (r.fontFamily) s.fontFamily = withGenericFallback(r.fontFamily);
   if (r.fontSize) s.fontSize = r.fontSize;
   if (r.fontWeight) s.fontWeight = r.fontWeight;
   if (r.color) s.color = r.color;
@@ -315,6 +375,27 @@ function sameStyle(a: TextRun, b: TextRun): boolean {
 function ShapeView({ el }: { el: ShapeElement }) {
   const stroke = el.stroke ?? "transparent";
   const sw = el.strokeWidth ?? 0;
+  // Custom vector path (PPTX <a:custGeom>) takes precedence over the preset
+  // kind — the path coordinates already encode the actual silhouette.
+  if (el.path) {
+    return (
+      <svg
+        viewBox={`0 0 ${el.path.viewW} ${el.path.viewH}`}
+        preserveAspectRatio="none"
+        width="100%"
+        height="100%"
+      >
+        <path
+          d={el.path.d}
+          fill={el.fill}
+          fillRule={el.path.fillRule ?? "nonzero"}
+          stroke={stroke}
+          strokeWidth={sw || undefined}
+          vectorEffect="non-scaling-stroke"
+        />
+      </svg>
+    );
+  }
   if (el.shape === "rect" || el.shape === "rounded") {
     return (
       <div
@@ -474,7 +555,9 @@ function LineView({ el }: { el: LineElement }) {
 function TableView({ el }: { el: TableElement }) {
   const cols = el.rows[0]?.length ?? 1;
   // PPTX-faithful: contiguous cells, no inter-cell gap, no rounded corners.
-  // Earlier "card grid" styling drifted too far from the source look.
+  // Cells share their dividers via inset box-shadows so we draw a single
+  // grid line between adjacent cells instead of doubling-up borders.
+  const stroke = el.borderColor ?? "rgba(0, 0, 0, 0.12)";
   return (
     <div
       style={{
@@ -485,6 +568,7 @@ function TableView({ el }: { el: TableElement }) {
         height: "100%",
         gap: 0,
         background: "transparent",
+        boxShadow: `inset 0 0 0 1px ${stroke}`,
       }}
     >
       {el.rows.flatMap((row, ri) =>
@@ -504,6 +588,10 @@ function TableView({ el }: { el: TableElement }) {
               minHeight: 0,
               overflow: "hidden",
               wordBreak: "break-word",
+              borderRight:
+                ci < cols - 1 ? `1px solid ${stroke}` : undefined,
+              borderBottom:
+                ri < el.rows.length - 1 ? `1px solid ${stroke}` : undefined,
             }}
           >
             {cell}

package/src/components/editor/SlideView.tsx

@@ -1,6 +1,10 @@
 import type { Slide } from "@/lib/types";
 import { SLIDE_W, SLIDE_H } from "@/lib/types";
 import { ElementView } from "./ElementView";
+import {
+  useCanvasConfig,
+  resolveSlideBackground,
+} from "@/compound/CanvasContext";
 
 export function SlideView({
   slide,
@@ -9,12 +13,13 @@ export function SlideView({
   slide: Slide;
   scale?: number;
 }) {
+  const canvasConfig = useCanvasConfig();
   return (
     <div
       style={{
         width: SLIDE_W * scale,
         height: SLIDE_H * scale,
-        background: slide.background,
+        background: resolveSlideBackground(canvasConfig, slide),
         position: "relative",
         overflow: "hidden",
         borderRadius: 12 * scale,

package/src/compound/CanvasContext.tsx

@@ -0,0 +1,176 @@
+import { createContext, useContext, useMemo, type ReactNode } from "react";
+import type { Slide } from "@/lib/types";
+
+/**
+ * Canvas/viewport configuration. Lets hosts tame the slide presentation so a
+ * slide with a bold background fill doesn't paint the entire workspace —
+ * which is what `<Slidewise.Root>` did by default before this prop existed.
+ *
+ * Pass any subset:
+ *
+ * ```tsx
+ * <Slidewise.Root
+ *   canvas={{
+ *     padding: { x: 48, y: 32 },
+ *     defaultZoom: 0.7,
+ *     slideRadius: 12,
+ *     slideShadow:
+ *       "0 1px 2px rgba(0,0,0,0.25), 0 24px 60px rgba(0,0,0,0.45)",
+ *     resolveSlideBackground: (slide) =>
+ *       hostThemeOverridesSlideBg ? "#ffffff" : undefined,
+ *   }}
+ * >
+ * ```
+ *
+ * Outside the slide rectangle hosts still own the canvas-frame backdrop via
+ * the `--slidewise-bg-canvas-from` / `--slidewise-bg-canvas-to` CSS tokens
+ * or the `surfaces.canvasFrom` / `surfaces.canvasTo` prop entries.
+ */
+export interface SlidewiseCanvasConfig {
+  /**
+   * Padding between the slide and the canvas frame, in pixels. Used both
+   * for the auto-fit calculation and as actual whitespace around the
+   * slide. Pass a number for uniform padding, or an object for per-axis
+   * control. Default: roughly the room the floating toolbars need —
+   * 32px horizontal, ~148px vertical (top bar + bottom toolbar).
+   */
+  padding?: number | { x?: number; y?: number };
+  /**
+   * How the slide scales inside the canvas:
+   * - `"fit"` (default) auto-shrinks the slide to fit while preserving aspect
+   * - `"fill"` reserved for a future fill behavior; currently equivalent to fit
+   * - `"manual"` uses `defaultZoom` (or whatever the user has set via
+   *   `api.setZoom` / pinch-zoom) verbatim
+   *
+   * Applied via `store.setFitMode()` once on mount. Subsequent user
+   * interactions (zoom in, fit toggle) override this.
+   */
+  fitMode?: "fit" | "fill" | "manual";
+  /**
+   * Initial zoom level when `fitMode === "manual"` (or as a starting point
+   * when the user switches off auto-fit). 1 = 100%. Clamped to [0.1, 4].
+   */
+  defaultZoom?: number;
+  /**
+   * Box-shadow applied to the slide paper. Any valid CSS `box-shadow`
+   * value. Defaults to `var(--slide-shadow)`.
+   */
+  slideShadow?: string;
+  /**
+   * Border-radius applied to the slide paper. Number = pixels; string =
+   * any valid CSS length. Defaults to `8`.
+   */
+  slideRadius?: number | string;
+  /**
+   * Hard-override the slide's background paint regardless of what the
+   * deck's `slide.background` says. Useful when the host wants every
+   * slide to render as a neutral surface (`#ffffff`, host-tinted, etc.)
+   * for a viewer experience where the deck's baked fills would clash
+   * with the chrome.
+   *
+   * If both `forceSlideBackground` and `resolveSlideBackground` are
+   * passed, the force value wins.
+   */
+  forceSlideBackground?: string;
+  /**
+   * Per-slide background resolver. Receives the current slide; return a
+   * CSS value to override, or `undefined` to fall through to the slide's
+   * own `background` property. Useful for "respect host theme but only
+   * for slides that don't explicitly set a fill" patterns.
+   */
+  resolveSlideBackground?: (slide: Slide) => string | undefined;
+}
+
+/**
+ * Fully-resolved canvas config, with internal defaults filled in. Consumers
+ * (the Canvas component, host-rendered surfaces) read this shape via
+ * `useCanvasConfig()` and never have to check for undefined.
+ */
+export interface ResolvedCanvasConfig {
+  padding: { x: number; y: number };
+  fitMode: "fit" | "fill" | "manual" | null;
+  defaultZoom: number | null;
+  slideShadow: string;
+  slideRadius: number | string;
+  forceSlideBackground: string | null;
+  resolveSlideBackground:
+    | ((slide: Slide) => string | undefined)
+    | null;
+}
+
+export const DEFAULT_CANVAS_CONFIG: ResolvedCanvasConfig = {
+  // Matches the previous hardcoded padX=32 / padY=56+76+16 in Canvas.tsx —
+  // enough vertical room for the top bar + the floating bottom toolbar.
+  padding: { x: 32, y: 148 },
+  fitMode: null,
+  defaultZoom: null,
+  slideShadow: "var(--slide-shadow)",
+  slideRadius: 8,
+  forceSlideBackground: null,
+  resolveSlideBackground: null,
+};
+
+function mergeCanvasConfig(
+  config: SlidewiseCanvasConfig | undefined
+): ResolvedCanvasConfig {
+  if (!config) return DEFAULT_CANVAS_CONFIG;
+  let padding = DEFAULT_CANVAS_CONFIG.padding;
+  if (typeof config.padding === "number") {
+    padding = { x: config.padding, y: config.padding };
+  } else if (config.padding && typeof config.padding === "object") {
+    padding = {
+      x: config.padding.x ?? DEFAULT_CANVAS_CONFIG.padding.x,
+      y: config.padding.y ?? DEFAULT_CANVAS_CONFIG.padding.y,
+    };
+  }
+  return {
+    padding,
+    fitMode: config.fitMode ?? null,
+    defaultZoom: config.defaultZoom ?? null,
+    slideShadow: config.slideShadow ?? DEFAULT_CANVAS_CONFIG.slideShadow,
+    slideRadius: config.slideRadius ?? DEFAULT_CANVAS_CONFIG.slideRadius,
+    forceSlideBackground: config.forceSlideBackground ?? null,
+    resolveSlideBackground: config.resolveSlideBackground ?? null,
+  };
+}
+
+const CanvasContext = createContext<ResolvedCanvasConfig>(DEFAULT_CANVAS_CONFIG);
+
+export function CanvasConfigProvider({
+  config,
+  children,
+}: {
+  config: SlidewiseCanvasConfig | undefined;
+  children: ReactNode;
+}) {
+  const value = useMemo(() => mergeCanvasConfig(config), [config]);
+  return (
+    <CanvasContext.Provider value={value}>{children}</CanvasContext.Provider>
+  );
+}
+
+/**
+ * Read the resolved canvas configuration. Always returns a complete object
+ * with defaults filled in.
+ */
+export function useCanvasConfig(): ResolvedCanvasConfig {
+  return useContext(CanvasContext);
+}
+
+/**
+ * Convenience helper used by the internal Canvas component (and exported
+ * so host-rendered slide previews can reuse the same resolution rules).
+ * Returns whatever the canvas config says, falling back to the slide's
+ * own `background` property.
+ */
+export function resolveSlideBackground(
+  config: ResolvedCanvasConfig,
+  slide: Slide
+): string {
+  if (config.forceSlideBackground) return config.forceSlideBackground;
+  if (config.resolveSlideBackground) {
+    const resolved = config.resolveSlideBackground(slide);
+    if (resolved !== undefined) return resolved;
+  }
+  return slide.background;
+}

package/src/compound/SlidewiseRoot.tsx

@@ -29,6 +29,10 @@ import {
   surfacesToCssVars,
   type SlidewiseSurfaces,
 } from "./SurfacesContext";
+import {
+  CanvasConfigProvider,
+  type SlidewiseCanvasConfig,
+} from "./CanvasContext";
 
 export interface SlidewiseRootProps {
   /**
@@ -118,6 +122,14 @@ export interface SlidewiseRootProps {
    * ```
    */
   surfaces?: SlidewiseSurfaces;
+  /**
+   * Canvas/viewport configuration. Set `padding`, `slideRadius`,
+   * `slideShadow`, and an initial `defaultZoom` to keep the slide
+   * presented as a centered card rather than letting a bold deck fill
+   * paint the entire workspace. `forceSlideBackground` /
+   * `resolveSlideBackground` let hosts override per-slide fills.
+   */
+  canvas?: SlidewiseCanvasConfig;
   /** Extra class names appended to the root. */
   className?: string;
   /** Inline style applied to the root. */
@@ -241,6 +253,7 @@ function RootInner({
   icons,
   labels,
   surfaces,
+  canvas,
   className,
   style,
   children,
@@ -305,6 +318,14 @@ function RootInner({
         store.getState().selectSlide(initialSlideId);
       }
     }
+    // Apply canvas defaults once on mount. setZoom auto-flips fitMode to
+    // "manual" so we set fitMode last to honor an explicit canvas.fitMode.
+    if (canvas?.defaultZoom !== undefined) {
+      store.getState().setZoom(canvas.defaultZoom);
+    }
+    if (canvas?.fitMode) {
+      store.getState().setFitMode(canvas.fitMode);
+    }
     // run once on mount
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -515,17 +536,19 @@ function RootInner({
         <IconProvider icons={icons ?? {}}>
           <LabelsProvider labels={labels}>
             <SurfacesProvider surfaces={surfaces}>
-              <DirtyProvider dirty={dirty}>
-                <HostProvider callbacks={{ onSave: wrappedSave, onExport }}>
-                  <RootShell
-                    fontFamily={fontFamily}
-                    className={combinedClassName}
-                    style={mergedStyle}
-                  >
-                    {children}
-                  </RootShell>
-                </HostProvider>
-              </DirtyProvider>
+              <CanvasConfigProvider config={canvas}>
+                <DirtyProvider dirty={dirty}>
+                  <HostProvider callbacks={{ onSave: wrappedSave, onExport }}>
+                    <RootShell
+                      fontFamily={fontFamily}
+                      className={combinedClassName}
+                      style={mergedStyle}
+                    >
+                      {children}
+                    </RootShell>
+                  </HostProvider>
+                </DirtyProvider>
+              </CanvasConfigProvider>
             </SurfacesProvider>
           </LabelsProvider>
         </IconProvider>

package/src/compound/index.ts

@@ -99,6 +99,14 @@ export {
   surfacesToCssVars,
   type SlidewiseSurfaces,
 } from "./SurfacesContext";
+export {
+  CanvasConfigProvider,
+  useCanvasConfig,
+  resolveSlideBackground,
+  DEFAULT_CANVAS_CONFIG,
+  type SlidewiseCanvasConfig,
+  type ResolvedCanvasConfig,
+} from "./CanvasContext";
 
 /**
  * Store hooks. Use these from host components anywhere under

package/src/index.ts

@@ -48,6 +48,9 @@ export {
   useDirty,
   useLabels,
   useSurfaces,
+  useCanvasConfig,
+  resolveSlideBackground,
+  DEFAULT_CANVAS_CONFIG,
   useEditor,
   useEditorStore,
   useSlides,
@@ -67,7 +70,9 @@ export {
   type SlidewiseIcons,
   type SlidewiseLabels,
   type SlidewiseSurfaces,
+  type SlidewiseCanvasConfig,
   type ResolvedLabels,
+  type ResolvedCanvasConfig,
   useSlideRailItem,
   type RegionProps,
   type TopBarProps,