@open-slide/core 1.0.6 → 1.2.0

package/src/app/components/notes-drawer.tsx

@@ -0,0 +1,117 @@
+import { ChevronDown, ChevronUp, NotebookPen } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import { PANEL_TRANSITION_MS, usePanelMount } from '@/components/panel/panel-shell';
+import { useNotes } from '@/lib/inspector/use-notes';
+import { format, useLocale } from '@/lib/use-locale';
+import { cn } from '@/lib/utils';
+
+const STORAGE_KEY = 'open-slide:notes-drawer-open';
+const DRAWER_CONTENT_H = 166;
+
+type Props = {
+  slideId: string;
+  index: number;
+  total: number;
+  initial: string | undefined;
+};
+
+export function NotesDrawer({ slideId, index, total, initial }: Props) {
+  const t = useLocale();
+  const [open, setOpen] = useState(() => {
+    if (typeof window === 'undefined') return false;
+    return window.localStorage.getItem(STORAGE_KEY) === '1';
+  });
+  const { value, setValue, status, flush } = useNotes(slideId, index, initial);
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+  const { mounted, animVisible } = usePanelMount(open);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    window.localStorage.setItem(STORAGE_KEY, open ? '1' : '0');
+  }, [open]);
+
+  const statusLabel = (() => {
+    switch (status.kind) {
+      case 'saving':
+        return t.notesDrawer.statusSaving;
+      case 'saved':
+        return t.notesDrawer.statusSaved;
+      case 'error':
+        return format(t.notesDrawer.statusError, { msg: status.message });
+      default:
+        return '';
+    }
+  })();
+
+  return (
+    <aside
+      data-notes-drawer
+      className="hidden shrink-0 border-t border-hairline bg-sidebar/85 backdrop-blur md:block"
+    >
+      <button
+        type="button"
+        onClick={() => {
+          setOpen((o) => {
+            if (o) void flush();
+            return !o;
+          });
+        }}
+        className="flex h-9 w-full items-center gap-2 px-3 text-[12px] text-foreground/80 hover:bg-muted/40"
+        aria-expanded={open}
+      >
+        <NotebookPen className="size-3.5 text-muted-foreground" />
+        <span className="font-medium">{t.notesDrawer.toggle}</span>
+        <span className="font-mono text-[11px] text-muted-foreground">
+          {format(t.notesDrawer.pageLabel, { n: index + 1, total })}
+        </span>
+        <span
+          className={cn(
+            'ml-auto truncate text-[11px]',
+            status.kind === 'error' ? 'text-destructive' : 'text-muted-foreground',
+          )}
+          aria-live="polite"
+        >
+          {statusLabel}
+        </span>
+        {open ? (
+          <ChevronDown className="size-3.5 text-muted-foreground" />
+        ) : (
+          <ChevronUp className="size-3.5 text-muted-foreground" />
+        )}
+      </button>
+      {mounted && (
+        <div
+          className="overflow-hidden border-t border-hairline transition-[height] ease-out"
+          style={{
+            height: animVisible ? DRAWER_CONTENT_H : 0,
+            transitionDuration: `${PANEL_TRANSITION_MS}ms`,
+          }}
+        >
+          <div className="px-3 py-2">
+            <textarea
+              ref={textareaRef}
+              value={value}
+              onChange={(e) => setValue(e.target.value)}
+              onBlur={() => {
+                void flush();
+              }}
+              onKeyDown={(e) => {
+                if (e.key === 'Escape') {
+                  e.preventDefault();
+                  textareaRef.current?.blur();
+                } else if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+                  e.preventDefault();
+                  void flush();
+                }
+              }}
+              placeholder={t.notesDrawer.placeholder}
+              rows={6}
+              spellCheck
+              className="block h-[150px] w-full resize-none rounded-[6px] border border-border bg-card px-3 py-2 text-[13px] leading-relaxed text-card-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring/30"
+            />
+          </div>
+        </div>
+      )}
+    </aside>
+  );
+}

package/src/app/components/player.tsx

@@ -58,8 +58,12 @@ export function Player({
   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 canPrev = index > 0;
+  const canNext = index < pages.length - 1;
+
   const goPrev = useCallback(() => {
     if (index > 0) onIndexChange(index - 1);
   }, [index, onIndexChange]);
@@ -72,8 +76,8 @@ export function Player({
   useWheelPageNavigation({
     ref: rootRef,
     enabled: !overlayActive,
-    canPrev: index > 0,
-    canNext: index < pages.length - 1,
+    canPrev,
+    canNext,
     onPrev: goPrev,
     onNext: goNext,
   });
@@ -181,19 +185,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;
       }
@@ -246,7 +254,16 @@ export function Player({
   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];
 
@@ -255,7 +272,8 @@ export function Player({
       ref={setRoot}
       className={cn(
         'relative flex h-dvh w-screen items-center justify-center bg-black',
-        hideCursor && 'cursor-none',
+        controls && 'select-none',
+        controls && (hideCursor ? 'cursor-none' : 'cursor-default'),
       )}
     >
       <SlideCanvas flat design={design}>
@@ -266,15 +284,15 @@ export function Player({
         type="button"
         aria-label="Previous page"
         onClick={goPrev}
-        disabled={index === 0}
-        className="absolute inset-y-0 left-0 z-10 w-[30%]"
+        disabled={!canPrev}
+        className={cn('absolute inset-y-0 left-0 z-10 w-[30%]', hideCursor && 'cursor-none')}
       />
       <button
         type="button"
         aria-label="Next page"
         onClick={goNext}
-        disabled={index === pages.length - 1}
-        className="absolute inset-y-0 right-0 z-10 w-[30%]"
+        disabled={!canNext}
+        className={cn('absolute inset-y-0 right-0 z-10 w-[30%]', hideCursor && 'cursor-none')}
       />
 
       {controls && (

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

@@ -96,9 +96,9 @@ export function PresentOverviewGrid({ pages, design, open, current, onClose, onS
       </div>
       <div ref={gridRef} className="min-h-0 flex-1 overflow-auto px-8 pb-8">
         <div
-          className="grid gap-5"
+          className="grid justify-center gap-5"
           style={{
-            gridTemplateColumns: `repeat(auto-fill, minmax(${THUMB_W}px, 1fr))`,
+            gridTemplateColumns: `repeat(auto-fill, ${THUMB_W}px)`,
           }}
         >
           {pages.map((PageComp, i) => {

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/style-panel/design-provider.tsx

@@ -11,6 +11,7 @@ import {
 import { toast } from 'sonner';
 import { useHistory } from '@/components/history-provider';
 import { type DesignSystem, defaultDesign, designToCssVars } from '../../lib/design';
+import { shuffleDesign } from '../../lib/design-presets';
 import { useDesign as useDesignFetch } from './use-design';
 
 type DesignCtx = {
@@ -26,6 +27,7 @@ type DesignCtx = {
   commit: () => Promise<void>;
   discard: () => void;
   resetToDefaults: () => void;
+  shuffle: () => void;
 };
 
 const Ctx = createContext<DesignCtx | null>(null);
@@ -98,6 +100,16 @@ export function DesignProvider({ slideId, children }: { slideId: string; childre
     });
   }, [history]);
 
+  const shuffle = useCallback(() => {
+    const prev = draftRef.current;
+    const next = clone(shuffleDesign(prev));
+    setDraft(next);
+    history.record({
+      undo: () => setDraft(prev),
+      redo: () => setDraft(next),
+    });
+  }, [history]);
+
   // 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(() => {
@@ -121,6 +133,7 @@ export function DesignProvider({ slideId, children }: { slideId: string; childre
     commit,
     discard,
     resetToDefaults,
+    shuffle,
   };
 
   return (

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

@@ -1,4 +1,4 @@
-import { Palette, X } from 'lucide-react';
+import { Palette, Shuffle, X } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { Field, NumberField, Section } from '@/components/panel/panel-fields';
 import { PanelShell, usePanelMount } from '@/components/panel/panel-shell';
@@ -28,7 +28,7 @@ type DesignPanelProps = {
 };
 
 export function DesignPanel({ open, onClose }: DesignPanelProps) {
-  const { draft, exists, warning, loaded, dirty, update } = useDesignPanelState();
+  const { draft, exists, warning, loaded, dirty, update, shuffle } = useDesignPanelState();
   const { mounted, animVisible } = usePanelMount(open);
   const t = useLocale();
 
@@ -60,15 +60,27 @@ export function DesignPanel({ open, onClose }: DesignPanelProps) {
               />
             )}
           </div>
-          <Button
-            variant="ghost"
-            size="icon-sm"
-            className="text-muted-foreground hover:text-foreground"
-            onClick={onClose}
-            aria-label={t.stylePanel.closePanelAria}
-          >
-            <X className="size-3.5" />
-          </Button>
+          <div className="flex items-center gap-0.5">
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              className="text-muted-foreground hover:text-foreground"
+              onClick={shuffle}
+              aria-label={t.stylePanel.shuffleAria}
+              title={t.stylePanel.shuffleTitle}
+            >
+              <Shuffle className="size-3.5" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              className="text-muted-foreground hover:text-foreground"
+              onClick={onClose}
+              aria-label={t.stylePanel.closePanelAria}
+            >
+              <X className="size-3.5" />
+            </Button>
+          </div>
         </>
       }
       banner={