@open-slide/core 1.0.5 → 1.1.0

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

@@ -1,16 +1,18 @@
-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();
+  const { active, slideId, selected, setSelected, cancel, openCrop } = useInspector();
   const overlayRef = useRef<HTMLDivElement>(null);
   const [hover, setHover] = useState<Highlight | null>(null);
 
@@ -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,18 +47,33 @@ 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 });
+    };
+
+    const onDblClick = (e: MouseEvent) => {
+      if (e.target instanceof Element && e.target.closest('[data-inspector-ui]')) return;
+      const el = pickElement(e.clientX, e.clientY);
+      if (!el) return;
+      const hit = findSlideSource(el, slideId, { hostOnly: true });
+      if (!hit) return;
+      if (!(hit.anchor instanceof HTMLImageElement)) return;
+      e.preventDefault();
+      e.stopPropagation();
+      setSelected({ line: hit.line, column: hit.column, anchor: hit.anchor });
+      openCrop(hit.anchor);
     };
 
     window.addEventListener('pointermove', onMove, true);
     window.addEventListener('click', onClick, true);
+    window.addEventListener('dblclick', onDblClick, true);
     window.addEventListener('keydown', onKey, true);
     return () => {
       window.removeEventListener('pointermove', onMove, true);
       window.removeEventListener('click', onClick, true);
+      window.removeEventListener('dblclick', onDblClick, true);
       window.removeEventListener('keydown', onKey, true);
     };
-  }, [active, slideId, setSelected, cancel]);
+  }, [active, slideId, setSelected, cancel, openCrop]);
 
   return (
     <FrameOverlay
@@ -64,7 +81,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 +89,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 +174,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 +201,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/inspector-panel.tsx

@@ -202,7 +202,12 @@ export function InspectorPanel() {
         <>
           <Separator />
           <Section title={t.inspector.imageSection}>
-            <ImageField slideId={slideId} src={pinSnapshot.imageSrc} apply={apply} />
+            <ImageField
+              slideId={slideId}
+              src={pinSnapshot.imageSrc}
+              anchor={pinSelected.anchor}
+              apply={apply}
+            />
           </Section>
         </>
       )}
@@ -587,14 +592,18 @@ function ColorField({
 function ImageField({
   slideId,
   src,
+  anchor,
   apply,
 }: {
   slideId: string;
   src: string;
+  anchor: HTMLElement;
   apply: (ops: EditOp[]) => void;
 }) {
   const [open, setOpen] = useState(false);
   const t = useLocale();
+  const { openCrop } = useInspector();
+  const isImage = anchor.tagName === 'IMG';
   return (
     <div className="space-y-2">
       <div className="flex items-center gap-3">
@@ -609,16 +618,29 @@ function ImageField({
             }}
           />
         </div>
-        <Button
-          type="button"
-          variant="outline"
-          size="sm"
-          className="flex-1"
-          onClick={() => setOpen(true)}
-        >
-          <ImageIcon className="size-3.5" />
-          {t.inspector.replace}
-        </Button>
+        <div className="flex flex-1 gap-2">
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            className="flex-1"
+            onClick={() => setOpen(true)}
+          >
+            <ImageIcon className="size-3.5" />
+            {t.inspector.replace}
+          </Button>
+          {isImage && (
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              className="flex-1"
+              onClick={() => openCrop(anchor as HTMLImageElement)}
+            >
+              {t.inspector.crop}
+            </Button>
+          )}
+        </div>
       </div>
       {open && (
         <AssetPickerDialog
@@ -626,14 +648,25 @@ function ImageField({
           onClose={() => setOpen(false)}
           onPick={(asset) => {
             setOpen(false);
-            apply([
+            const ops: EditOp[] = [
               {
                 kind: 'set-attr-asset',
                 attr: 'src',
                 assetPath: `./assets/${asset.name}`,
                 previewUrl: asset.url,
               },
-            ]);
+            ];
+            if (isImage) {
+              const cs = window.getComputedStyle(anchor);
+              if (cs.objectFit !== 'cover' && cs.objectFit !== 'contain') {
+                ops.push({ kind: 'set-style', key: 'objectFit', value: 'cover' });
+              }
+              const op = cs.objectPosition.trim();
+              if (!op || op === '0% 0%' || op === 'auto') {
+                ops.push({ kind: 'set-style', key: 'objectPosition', value: '50% 50%' });
+              }
+            }
+            apply(ops);
           }}
         />
       )}

package/src/app/components/inspector/inspector-provider.tsx

@@ -15,6 +15,7 @@ import { Button } from '@/components/ui/button';
 import { type SlideComment, useComments } from '@/lib/inspector/use-comments';
 import { type Edit, type EditOp, type EditResult, useEditor } from '@/lib/inspector/use-editor';
 import { useLocale } from '@/lib/use-locale';
+import { ImageCropDialog } from './image-crop-dialog';
 
 export type SelectedTarget = {
   line: number;
@@ -69,6 +70,7 @@ type InspectorCtx = {
   commitEdits: () => Promise<void>;
   cancelEdits: () => void;
   committing: boolean;
+  openCrop: (anchor: HTMLImageElement) => void;
 };
 
 const Ctx = createContext<InspectorCtx | null>(null);
@@ -90,6 +92,16 @@ export function InspectorProvider({ slideId, children }: { slideId: string; chil
   const instanceCounterRef = useRef(0);
   const [pendingCount, setPendingCount] = useState(0);
   const [committing, setCommitting] = useState(false);
+  const [cropTarget, setCropTarget] = useState<{
+    line: number;
+    column: number;
+    anchor: HTMLImageElement;
+    src: string;
+    targetWidth: number;
+    targetHeight: number;
+    initialFit: 'cover' | 'contain';
+    initialPosition: { x: number; y: number };
+  } | null>(null);
   const t = useLocale();
 
   const ensureInstanceId = useCallback((el: HTMLElement): string => {
@@ -529,6 +541,26 @@ export function InspectorProvider({ slideId, children }: { slideId: string; chil
     setSelected(null);
   }, []);
 
+  const openCrop = useCallback((anchor: HTMLImageElement) => {
+    const loc = anchor.dataset.slideLoc;
+    if (!loc) return;
+    const [lineStr, columnStr] = loc.split(':');
+    const line = Number(lineStr);
+    const column = Number(columnStr);
+    if (!Number.isFinite(line) || !Number.isFinite(column)) return;
+    const cs = window.getComputedStyle(anchor);
+    setCropTarget({
+      line,
+      column,
+      anchor,
+      src: anchor.currentSrc || anchor.src,
+      targetWidth: anchor.offsetWidth || anchor.getBoundingClientRect().width,
+      targetHeight: anchor.offsetHeight || anchor.getBoundingClientRect().height,
+      initialFit: cs.objectFit === 'contain' ? 'contain' : 'cover',
+      initialPosition: parseObjectPosition(cs.objectPosition),
+    });
+  }, []);
+
   const value = useMemo<InspectorCtx>(
     () => ({
       slideId,
@@ -549,6 +581,7 @@ export function InspectorProvider({ slideId, children }: { slideId: string; chil
       commitEdits,
       cancelEdits,
       committing,
+      openCrop,
     }),
     [
       slideId,
@@ -568,10 +601,59 @@ export function InspectorProvider({ slideId, children }: { slideId: string; chil
       commitEdits,
       cancelEdits,
       committing,
+      openCrop,
     ],
   );
 
-  return <Ctx.Provider value={value}>{children}</Ctx.Provider>;
+  return (
+    <Ctx.Provider value={value}>
+      {children}
+      {cropTarget && (
+        <ImageCropDialog
+          src={cropTarget.src}
+          targetWidth={cropTarget.targetWidth}
+          targetHeight={cropTarget.targetHeight}
+          initialFit={cropTarget.initialFit}
+          initialPosition={cropTarget.initialPosition}
+          onClose={() => setCropTarget(null)}
+          onApply={(result) => {
+            const { line, column, anchor } = cropTarget;
+            if (anchor.isConnected) {
+              bufferOps(line, column, anchor, [
+                { kind: 'set-style', key: 'objectFit', value: result.fit },
+                {
+                  kind: 'set-style',
+                  key: 'objectPosition',
+                  value: `${round2(result.x)}% ${round2(result.y)}%`,
+                },
+              ]);
+            }
+            setCropTarget(null);
+          }}
+        />
+      )}
+    </Ctx.Provider>
+  );
+}
+
+function round2(n: number): number {
+  return Math.round(n * 100) / 100;
+}
+
+function parseObjectPosition(value: string): { x: number; y: number } {
+  const parts = value.trim().split(/\s+/);
+  const xRaw = parts[0] ?? '50%';
+  const yRaw = parts[1] ?? xRaw;
+  return { x: parsePercent(xRaw, 50), y: parsePercent(yRaw, 50) };
+}
+
+function parsePercent(s: string, fallback: number): number {
+  if (s === 'center') return 50;
+  if (s === 'left' || s === 'top') return 0;
+  if (s === 'right' || s === 'bottom') return 100;
+  const m = s.match(/(-?\d+(?:\.\d+)?)%/);
+  if (m?.[1]) return Number(m[1]);
+  return fallback;
 }
 
 export function InspectToggleButton() {

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,20 +45,20 @@ 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);
   const [laser, setLaser] = useState(false);
+  const [keyboardDriven, setKeyboardDriven] = useState(false);
   const [startedAt] = useState(() => Date.now());
 
   const goPrev = useCallback(() => {
@@ -97,7 +86,6 @@ export function Player({
     onNext: goNext,
   });
 
-  // ── Fullscreen lifecycle ───────────────────────────────────────────────
   useEffect(() => {
     const el = rootRef.current;
     if (!el) return;
@@ -118,11 +106,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 +141,6 @@ export function Player({
     channel.send({ type: 'state', state: presenterState });
   }, [controls, channel, presenterState]);
 
-  // ── Keyboard ───────────────────────────────────────────────────────────
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => {
       const tgt = e.target;
@@ -197,19 +182,23 @@ export function Player({
 
       if (isNext) {
         e.preventDefault();
+        setKeyboardDriven(true);
         goNext();
         return;
       }
       if (isPrev) {
         e.preventDefault();
+        setKeyboardDriven(true);
         goPrev();
         return;
       }
       if (e.key === 'Home') {
+        setKeyboardDriven(true);
         onIndexChange(0);
         return;
       }
       if (e.key === 'End') {
+        setKeyboardDriven(true);
         onIndexChange(pages.length - 1);
         return;
       }
@@ -256,14 +245,22 @@ 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);
-  const hideCursor = controls && (laser || (idle && !overlayActive && !pointerNearBottom));
+
+  useEffect(() => {
+    if (!keyboardDriven) return;
+    const clear = () => setKeyboardDriven(false);
+    window.addEventListener('mousemove', clear, { passive: true });
+    return () => window.removeEventListener('mousemove', clear);
+  }, [keyboardDriven]);
+
+  const hideCursor =
+    controls && (laser || keyboardDriven || (idle && !overlayActive && !pointerNearBottom));
 
   const PageComp = pages[index];
 
@@ -279,7 +276,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-idle.ts

@@ -1,11 +1,15 @@
 import { useEffect, useState } from 'react';
 
 /**
- * Reports whether the user has been idle (no pointer / key / touch input)
- * for at least `delayMs`. Resets on any input event. The hook starts in
+ * Reports whether the user has been idle (no pointer / touch input) for at
+ * least `delayMs`. Resets on any pointer-related event. The hook starts in
  * the non-idle state so freshly-mounted UI is visible while the user
  * orients themselves.
  *
+ * Keyboard input is intentionally excluded — during a talk the presenter
+ * drives slides with arrow keys, and we want the cursor to stay hidden
+ * while they do.
+ *
  * Pass `enabled = false` to short-circuit (useful when the player is
  * paused on an overlay and we don't want to hide chrome behind it).
  */
@@ -27,14 +31,12 @@ export function useIdle(delayMs: number, enabled = true) {
     const opts = { passive: true } as const;
     window.addEventListener('mousemove', reset, opts);
     window.addEventListener('mousedown', reset, opts);
-    window.addEventListener('keydown', reset);
     window.addEventListener('touchstart', reset, opts);
     window.addEventListener('wheel', reset, opts);
     return () => {
       if (timer) clearTimeout(timer);
       window.removeEventListener('mousemove', reset);
       window.removeEventListener('mousedown', reset);
-      window.removeEventListener('keydown', reset);
       window.removeEventListener('touchstart', reset);
       window.removeEventListener('wheel', reset);
     };

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;
 };