@open-slide/core 1.0.5 → 1.0.6

package/dist/{build-CoON6kTb.js → build-4wOJF1l4.js}

@@ -1,5 +1,5 @@
 import "./design-C13iz9_4.js";
-import { createViteConfig } from "./config-Bxtztw-H.js";
+import { createViteConfig } from "./config-evLWCV1-.js";
 import path from "node:path";
 import { build as build$1, mergeConfig } from "vite";
 

package/dist/cli/bin.js

@@ -57,15 +57,15 @@ async function run(argv) {
 	program.name("open-slide").description("Author slides — we handle the Vite/React stack.").version(version, "-v, --version", "print version").helpOption("-h, --help", "show help").showHelpAfterError(chalk.dim("(run `open-slide --help` for usage)"));
 	program.command("dev").description("Start the dev server").addOption(new Option("-p, --port <port>", "port to listen on").argParser(parsePort)).addOption(new Option("--host [host]", "expose on the network (optional host)")).option("--open", "open the browser on start").option("--no-skills-check", "skip the built-in skills drift check").action(async (flags) => {
 		if (flags.skillsCheck !== false) await runSkillsDriftCheck(resolveBuiltinSkillsDir());
-		const { dev } = await import("../dev-IezNC17X.js");
+		const { dev } = await import("../dev-BUr0S-Ij.js");
 		await dev(flags);
 	});
 	program.command("build").description("Build a static site").option("--out-dir <dir>", "output directory (defaults to `dist`)").action(async (flags) => {
-		const { build } = await import("../build-CoON6kTb.js");
+		const { build } = await import("../build-4wOJF1l4.js");
 		await build(flags);
 	});
 	program.command("preview").description("Preview the production build").addOption(new Option("-p, --port <port>", "port to listen on").argParser(parsePort)).addOption(new Option("--host [host]", "expose on the network (optional host)")).option("--open", "open the browser on start").action(async (flags) => {
-		const { preview } = await import("../preview-BwYjtENY.js");
+		const { preview } = await import("../preview-DP_gIphz.js");
 		await preview(flags);
 	});
 	program.command("sync:skills").description("Sync built-in skills from @open-slide/core into this workspace").option("--dry-run", "show what would change without writing").action(async (flags) => {

package/dist/{config-Bxtztw-H.js → config-evLWCV1-.js}

@@ -1962,7 +1962,7 @@ function toId(absFile, slidesRoot) {
 function generateSlidesModule(files, slidesRoot, isDev) {
 	const entries = files.map((abs) => {
 		const id = toId(abs, slidesRoot);
-		const importPath = isDev ? `/@fs${abs}` : abs;
+		const importPath = isDev ? `/@fs/${abs.replace(/^\/+/, "")}` : abs;
 		return {
 			id,
 			importPath
@@ -2130,6 +2130,10 @@ async function createViteConfig(opts) {
 		optimizeDeps: {
 			entries: [path.join(APP_ROOT, "main.tsx")],
 			include: [
+				"react",
+				"react-dom",
+				"react-dom/client",
+				"next-themes",
 				"react-router-dom",
 				"radix-ui",
 				"lucide-react",

package/dist/{dev-IezNC17X.js → dev-BUr0S-Ij.js}

@@ -1,5 +1,5 @@
 import "./design-C13iz9_4.js";
-import { createViteConfig } from "./config-Bxtztw-H.js";
+import { createViteConfig } from "./config-evLWCV1-.js";
 import { createServer, mergeConfig } from "vite";
 
 //#region src/cli/dev.ts

package/dist/{preview-BwYjtENY.js → preview-DP_gIphz.js}

@@ -1,5 +1,5 @@
 import "./design-C13iz9_4.js";
-import { createViteConfig } from "./config-Bxtztw-H.js";
+import { createViteConfig } from "./config-evLWCV1-.js";
 import { mergeConfig, preview as preview$1 } from "vite";
 
 //#region src/cli/preview.ts

package/dist/vite/index.js

@@ -1,4 +1,4 @@
 import "../design-C13iz9_4.js";
-import { createViteConfig } from "../config-Bxtztw-H.js";
+import { createViteConfig } from "../config-evLWCV1-.js";
 
 export { createViteConfig };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-slide/core",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Runtime and CLI for open-slide — write slides in slides/, we handle the rest.",
   "type": "module",
   "exports": {

package/src/app/components/inspector/inspect-overlay.tsx

@@ -1,13 +1,15 @@
-import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { PANEL_TRANSITION_MS } from '@/components/panel/panel-shell';
 import { findSlideSource, type SlideSourceHit } from '@/lib/inspector/fiber';
 import { useInspector } from './inspector-provider';
 
-type Highlight = { rect: DOMRect; hit: SlideSourceHit };
+type Highlight = { hit: SlideSourceHit };
 
 type RelRect = { left: number; top: number; width: number; height: number };
 
 const FRAME_FADE_MS = 150;
 const FRAME_MORPH_MS = 180;
+const LAYOUT_TRACK_MS = PANEL_TRANSITION_MS + FRAME_MORPH_MS;
 
 export function InspectOverlay() {
   const { active, slideId, selected, setSelected, cancel } = useInspector();
@@ -33,7 +35,7 @@ export function InspectOverlay() {
       if (!el) return setHover(null);
       const hit = findSlideSource(el, slideId, { hostOnly: true });
       if (!hit) return setHover(null);
-      setHover({ rect: hit.anchor.getBoundingClientRect(), hit });
+      setHover({ hit });
     };
 
     const onClick = (e: MouseEvent) => {
@@ -45,7 +47,7 @@ export function InspectOverlay() {
       e.preventDefault();
       e.stopPropagation();
       setSelected({ line: hit.line, column: hit.column, anchor: hit.anchor });
-      setHover({ rect: hit.anchor.getBoundingClientRect(), hit });
+      setHover({ hit });
     };
 
     window.addEventListener('pointermove', onMove, true);
@@ -64,7 +66,7 @@ export function InspectOverlay() {
       overlayRef={overlayRef}
       // Pin to the selection so the highlight tracks what the panel
       // is editing even after the cursor moves away.
-      targetRect={selected?.anchor.getBoundingClientRect() ?? hover?.rect ?? null}
+      targetAnchor={selected?.anchor ?? hover?.hit.anchor ?? null}
     />
   );
 }
@@ -72,26 +74,77 @@ export function InspectOverlay() {
 function FrameOverlay({
   active,
   overlayRef,
-  targetRect,
+  targetAnchor,
 }: {
   active: boolean;
   overlayRef: React.RefObject<HTMLDivElement>;
-  targetRect: DOMRect | null;
+  targetAnchor: HTMLElement | null;
 }) {
-  const overlayRect = overlayRef.current?.getBoundingClientRect();
-  const visible = !!(active && targetRect && overlayRect);
-
-  // Hold the last rect so the frame stays put during fade-out, when
-  // `targetRect` has already gone null.
-  const lastRectRef = useRef<RelRect | null>(null);
-  if (visible && targetRect && overlayRect) {
-    lastRectRef.current = {
+  const [rect, setRect] = useState<RelRect | null>(null);
+  const [hasTarget, setHasTarget] = useState(false);
+
+  const measure = useCallback(() => {
+    const overlay = overlayRef.current;
+    if (!active || !targetAnchor?.isConnected || !overlay) {
+      setHasTarget(false);
+      return;
+    }
+
+    const targetRect = targetAnchor.getBoundingClientRect();
+    const overlayRect = overlay.getBoundingClientRect();
+    const next = {
       left: targetRect.left - overlayRect.left,
       top: targetRect.top - overlayRect.top,
       width: targetRect.width,
       height: targetRect.height,
     };
-  }
+
+    setHasTarget(true);
+    setRect((prev) => (sameRect(prev, next) ? prev : next));
+  }, [active, overlayRef, targetAnchor]);
+
+  useLayoutEffect(() => {
+    measure();
+  }, [measure]);
+
+  useEffect(() => {
+    if (!active) {
+      setHasTarget(false);
+      return;
+    }
+
+    let scheduled = 0;
+    let tracking = 0;
+    const scheduleMeasure = () => {
+      cancelAnimationFrame(scheduled);
+      scheduled = requestAnimationFrame(measure);
+    };
+
+    const resizeObserver = new ResizeObserver(scheduleMeasure);
+    const root = document.querySelector<HTMLElement>('[data-inspector-root]');
+    if (root) resizeObserver.observe(root);
+    if (overlayRef.current) resizeObserver.observe(overlayRef.current);
+    if (targetAnchor) resizeObserver.observe(targetAnchor);
+
+    const stopAt = performance.now() + LAYOUT_TRACK_MS;
+    const trackPanelTransition = () => {
+      measure();
+      if (performance.now() < stopAt) tracking = requestAnimationFrame(trackPanelTransition);
+    };
+    tracking = requestAnimationFrame(trackPanelTransition);
+
+    window.addEventListener('resize', scheduleMeasure, true);
+    window.addEventListener('scroll', scheduleMeasure, true);
+    return () => {
+      resizeObserver.disconnect();
+      cancelAnimationFrame(scheduled);
+      cancelAnimationFrame(tracking);
+      window.removeEventListener('resize', scheduleMeasure, true);
+      window.removeEventListener('scroll', scheduleMeasure, true);
+    };
+  }, [active, measure, overlayRef, targetAnchor]);
+
+  const visible = !!(active && hasTarget && rect);
 
   // First render after appearing: snap to the new rect (no transition).
   // Subsequent rect changes in the same visible session: animate.
@@ -106,7 +159,6 @@ function FrameOverlay({
   }, [visible]);
 
   if (!active) return null;
-  const rect = lastRectRef.current;
   const transition = morph
     ? `left ${FRAME_MORPH_MS}ms ease-out, top ${FRAME_MORPH_MS}ms ease-out, ` +
       `width ${FRAME_MORPH_MS}ms ease-out, height ${FRAME_MORPH_MS}ms ease-out, ` +
@@ -134,6 +186,16 @@ function FrameOverlay({
   );
 }
 
+function sameRect(a: RelRect | null, b: RelRect): boolean {
+  return (
+    !!a &&
+    Math.abs(a.left - b.left) < 0.5 &&
+    Math.abs(a.top - b.top) < 0.5 &&
+    Math.abs(a.width - b.width) < 0.5 &&
+    Math.abs(a.height - b.height) < 0.5
+  );
+}
+
 function pickElement(x: number, y: number): HTMLElement | null {
   const stack = document.elementsFromPoint(x, y);
   for (const el of stack) {

package/src/app/components/inspector/save-bar.tsx

@@ -4,9 +4,6 @@ import { useDesignPanelState } from '@/components/style-panel/design-provider';
 import { format, plural, useLocale } from '@/lib/use-locale';
 import { useInspector } from './inspector-provider';
 
-// Single save card for both inspector edits and design-token edits.
-// Counts the design draft as one unit; the user sees one combined
-// "N unsaved changes" pill. Save/Discard fan out to both providers.
 export function SaveBar() {
   const insp = useInspector();
   const design = useDesignPanelState();

package/src/app/components/player.tsx

@@ -21,9 +21,6 @@ import { useTouchSwipe } from './present/use-touch-swipe';
 import { SlideCanvas } from './slide-canvas';
 
 const IDLE_HIDE_MS = 2000;
-// Bottom band of the viewport that reveals the control bar + progress bar.
-// Generous enough to feel forgiving with a trackpad, tight enough not to
-// flash on incidental cursor moves.
 const BAR_HOTZONE_PX = 160;
 
 type Props = {
@@ -33,15 +30,7 @@ type Props = {
   onIndexChange: (index: number) => void;
   onExit: () => void;
   allowExit?: boolean;
-  /**
-   * When true, render the full presenter chrome (control bar, progress bar,
-   * overview, blackout, laser pointer, jump-to-slide, help overlay, and
-   * the BroadcastChannel sync that powers Presenter View). Defaults to
-   * false so the static HTML export and any other minimal embeddings stay
-   * untouched.
-   */
   controls?: boolean;
-  /** Optional id used to namespace the BroadcastChannel for Presenter View. */
   slideId?: string;
 };
 
@@ -56,16 +45,15 @@ export function Player({
   slideId,
 }: Props) {
   const rootRef = useRef<HTMLDivElement>(null);
-  // Mirrored as state so children that need to portal *into* the player
-  // (tooltips, popovers — the body is outside the fullscreen subtree and
-  // therefore invisible) can subscribe and re-render once the node mounts.
+  // Mirrored as state so descendants portaling *into* the player subtree
+  // (tooltips, popovers — the body is outside the fullscreen tree) re-render
+  // once the node mounts.
   const [rootEl, setRootEl] = useState<HTMLDivElement | null>(null);
   const setRoot = useCallback((el: HTMLDivElement | null) => {
     rootRef.current = el;
     setRootEl(el);
   }, []);
 
-  // ── Overlay state (only meaningful when `controls` is true) ────────────
   const [overviewOpen, setOverviewOpen] = useState(false);
   const [helpOpen, setHelpOpen] = useState(false);
   const [blackout, setBlackout] = useState<'black' | 'white' | null>(null);
@@ -97,7 +85,6 @@ export function Player({
     onNext: goNext,
   });
 
-  // ── Fullscreen lifecycle ───────────────────────────────────────────────
   useEffect(() => {
     const el = rootRef.current;
     if (!el) return;
@@ -118,11 +105,9 @@ export function Player({
     return () => document.removeEventListener('fullscreenchange', onFsChange);
   }, [onExit, allowExit]);
 
-  // ── Presenter View sync ────────────────────────────────────────────────
-  // Player is the source of truth. It re-publishes state on every change
+  // Player is the source of truth: it re-publishes state on every change
   // and answers `request-state` pings so newly opened presenter windows
-  // hydrate immediately. Notes are loaded by Presenter View itself from
-  // the same slide module, so they don't cross the channel.
+  // hydrate immediately.
   const presenterState = useMemo<PresenterState>(
     () => ({ index, pageCount: pages.length, blackout, startedAt }),
     [index, pages.length, blackout, startedAt],
@@ -155,7 +140,6 @@ export function Player({
     channel.send({ type: 'state', state: presenterState });
   }, [controls, channel, presenterState]);
 
-  // ── Keyboard ───────────────────────────────────────────────────────────
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => {
       const tgt = e.target;
@@ -256,10 +240,9 @@ export function Player({
     slideId,
   ]);
 
-  // ── Chrome visibility / cursor ─────────────────────────────────────────
   // The control bar + progress strip only surface when the pointer is in
-  // the bottom hot zone. Keyboard nav (arrows / space / PgDn) never
-  // reveals them — that's intentional so the deck stays clean.
+  // the bottom hot zone. Keyboard nav (arrows / space / PgDn) never reveals
+  // them — intentional so the deck stays clean during a talk.
   const pointerNearBottom = usePointerNearBottom(BAR_HOTZONE_PX, controls && !overlayActive);
   const chromeVisible = pointerNearBottom || overlayActive;
   const idle = useIdle(IDLE_HIDE_MS, controls && !overlayActive);
@@ -279,7 +262,6 @@ export function Player({
         {PageComp ? <PageComp /> : null}
       </SlideCanvas>
 
-      {/* Invisible side click zones — the original mobile-friendly nav. */}
       <button
         type="button"
         aria-label="Previous page"

package/src/app/components/present/overview-grid.tsx

@@ -18,11 +18,6 @@ type Props = {
   onSelect: (index: number) => void;
 };
 
-/**
- * Full-screen grid of slide thumbnails. Reuses SlideCanvas at fixed scale
- * so each preview is rendered with the slide's design tokens but with
- * motion frozen. Arrow keys move focus; Enter/click jumps and closes.
- */
 export function PresentOverviewGrid({ pages, design, open, current, onClose, onSelect }: Props) {
   const [focused, setFocused] = useState(current);
   const gridRef = useRef<HTMLDivElement>(null);

package/src/app/components/present/use-presenter-channel.ts

@@ -20,16 +20,9 @@ type Handler = (msg: PresenterCommand) => void;
 
 const SUPPORTED = typeof window !== 'undefined' && typeof BroadcastChannel !== 'undefined';
 
-/**
- * BroadcastChannel wrapper used by both the projection window (Player) and
- * the Presenter View. The channel is keyed by slideId so multiple decks
- * open in different tabs do not cross-talk. Falls back to no-op when the
- * API is missing (older browsers, SSR).
- *
- * The channel is owned by the effect (not useMemo) so React 18 StrictMode's
- * double-invoke creates a fresh channel on the second mount instead of
- * leaving a closed one behind that throws on the next `send()`.
- */
+// Channel ownership lives in the effect (not useMemo) so StrictMode's
+// double-invoke produces a fresh channel on remount rather than leaving a
+// closed one behind that throws on the next send().
 export function usePresenterChannel(slideId: string, onMessage?: Handler) {
   const onMessageRef = useRef(onMessage);
   onMessageRef.current = onMessage;

package/src/app/components/sidebar/folder-item.tsx

@@ -130,8 +130,6 @@ export function FolderItem({
     <div
       className={cn(
         'group relative flex items-center gap-2.5 rounded-[5px] px-2 py-[5px] text-[12.5px] transition-colors',
-        // Editorial selected state: subtle warm tint + a thin vermillion
-        // ink-mark on the leading edge. Avoids the heavy "filled pill" look.
         selected
           ? 'bg-muted text-foreground before:absolute before:inset-y-1.5 before:-left-0.5 before:w-[2px] before:rounded-full before:bg-brand'
           : 'text-foreground/70 hover:bg-muted/60 hover:text-foreground',

package/src/app/components/sidebar/icon-picker.tsx

@@ -3,9 +3,6 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import type { FolderIcon } from '@/lib/sdk';
 import { useLocale } from '@/lib/use-locale';
 
-// Editorial palette — restrained warm/earth tones, no shadcn defaults
-// (no #8b5cf6 violet, no #3b82f6 blue, etc.). Picked to coexist with the
-// vermillion brand accent without shouting over it.
 export const PRESET_COLORS = [
   '#c0392b', // vermillion
   '#b8743e', // ochre

package/src/app/components/slide-canvas.tsx

@@ -5,21 +5,12 @@ import { CANVAS_HEIGHT, CANVAS_WIDTH } from '../lib/sdk';
 
 type Props = {
   children: ReactNode;
-  /** If set, use this scale directly (e.g., thumbnails). Otherwise fit to container. */
+  /** If set, use this scale directly. Otherwise fit to container. */
   scale?: number;
-  /** Center the canvas within the container (default true). */
   center?: boolean;
-  /** Flat mode: no rounded corners or drop shadow. */
   flat?: boolean;
-  /** Freeze descendant animations and transitions, useful for thumbnail previews. */
   freezeMotion?: boolean;
   className?: string;
-  /**
-   * Per-slide design tokens. When set, the matching CSS custom properties
-   * are emitted on the canvas root so descendants can use `var(--osd-X)`
-   * regardless of which surface (editor, player, thumbnail, export) is
-   * rendering them.
-   */
   design?: DesignSystem;
 };
 

package/src/app/components/style-panel/design-provider.tsx

@@ -48,7 +48,6 @@ export function DesignProvider({ slideId, children }: { slideId: string; childre
   const draftRef = useRef<DesignSystem | null>(null);
   draftRef.current = draft;
 
-  // Re-seed draft whenever the saved design changes (slide switch, post-save HMR).
   useEffect(() => {
     if (design) setDraft(clone(design));
   }, [design]);
@@ -99,11 +98,8 @@ export function DesignProvider({ slideId, children }: { slideId: string; childre
     });
   }, [history]);
 
-  // Live-preview overlay: rendered only while there are unsaved changes so the
-  // canvas reflects the draft instantly, before any file write. SlideCanvas
-  // emits its own CSS variables inline on the canvas root (so home thumbnails,
-  // player, and exports work without any extra plumbing). Inline styles win
-  // against external rules, so the overlay must use `!important` to override.
+  // SlideCanvas emits its design vars inline on the canvas root, so a draft
+  // overlay must use `!important` to outrank those inline styles.
   const previewCss = useMemo(() => {
     if (!dirty || !draft) return '';
     const lines = Object.entries(designToCssVars(draft))

package/src/app/lib/export-html.ts

@@ -1,8 +1,3 @@
-// Exports a slide as a standalone HTML file (or a .zip bundle if the slide
-// references bundled assets). The export is a static snapshot of each page's
-// post-mount DOM — runtime interactivity (useState click handlers, timers,
-// etc.) is captured at snapshot time only.
-
 import { createElement } from 'react';
 import { createRoot } from 'react-dom/client';
 import { designToCssVars } from './design';
@@ -39,9 +34,7 @@ export async function exportSlideAsHtml(slide: SlideModule, slideId: string): Pr
       const buf = new Uint8Array(await res.arrayBuffer());
       const name = uniqueAssetName(absolute, usedNames);
       assets.set(url, { name, bytes: buf });
-    } catch {
-      // ignore unreachable assets
-    }
+    } catch {}
   }
 
   const rewrittenPages = pagesHtml.map((html) => rewriteUrls(html, assets, 'html'));
@@ -175,7 +168,6 @@ function looksLikeAsset(url: string): boolean {
   if (url.startsWith('mailto:') || url.startsWith('javascript:')) return false;
   const abs = toAbsolute(url);
   if (!abs) return false;
-  // Same-origin only: we can only fetch local assets.
   try {
     const u = new URL(abs);
     if (u.origin !== window.location.origin) return false;

package/src/app/lib/export-pdf.ts

@@ -1,8 +1,3 @@
-// Exports a slide as a PDF via the browser's native print engine.
-// Each page in `slide.default` becomes one PDF page at 1920×1080.
-// Text stays selectable and inline SVG remains vector — `window.print()`
-// preserves both. The user picks "Save as PDF" in the print dialog.
-
 import { createElement } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
 import { designToCssVars } from './design';

package/src/app/lib/print-ready.ts

@@ -1,6 +1,3 @@
-// Helpers used by the PDF export flow to wait for the page to settle before
-// invoking window.print(). Browser-only — no Node / headless dependency.
-
 const DEFAULT_WAITFOR_TIMEOUT_MS = 10_000;
 
 export async function waitForFonts(): Promise<void> {
@@ -38,7 +35,6 @@ export async function waitForDataWaitfor(
   );
 }
 
-/** Returns true if `frame` has no running finite-iteration animations. */
 export function isFrameAnimationSettled(frame: Element): boolean {
   if (typeof document.getAnimations !== 'function') return true;
   for (const anim of document.getAnimations()) {

package/src/app/lib/sdk.ts

@@ -11,8 +11,7 @@ export type SlideModule = {
   default: Page[];
   meta?: SlideMeta;
   design?: DesignSystem;
-  // Index-aligned with `default`. Each entry is the speaker note for the
-  // page at the same position. Used by Presenter View only.
+  // Index-aligned with `default`.
   notes?: (string | undefined)[];
 };