fix(bolt-slides): dock export, grid delete, and presenter page sync

Move export beside notes, hide the rail on Play, add an editor-only
grid trash overlay, and keep present in lockstep with the console.

Author: geotrev

bolt-slides/src/deck/Deck.tsx

@@ -229,11 +229,18 @@ export default function Deck({
   useDeckHashSync({ slideIndex, slideCount, go, skipHash });
 
   const isLeader = isPresenter || !!onExit;
+  const applyBroadcastIndex = useCallback(
+    (index: number) => {
+      setSlideIndex(index);
+      syncStoreCurrent(index);
+    },
+    [syncStoreCurrent]
+  );
   useDeckBroadcastSync({
     slideIndex,
     clicks,
     isLeader,
-    setSlideIndex,
+    setSlideIndex: applyBroadcastIndex,
     setClicks,
   });
 

bolt-slides/src/deck/Dock.tsx

@@ -15,6 +15,7 @@ import {
 import {
   IconClose,
   IconExpand,
+  IconExport,
   IconGrid,
   IconGrip,
   IconLeft,
@@ -326,6 +327,17 @@ const Dock = forwardRef<HTMLDivElement, DockProps>(function Dock(
           <IconRight />
         </button>
         {(isEditor || isPresentSurface) && <span className="noir-sep" />}
+        {isEditor && exportItems && (
+          <MenuButton
+            label="Export as…"
+            buttonClassName="noir-icon-btn"
+            tip={exportBusy ? undefined : 'Export as PDF or JSON'}
+            disabled={!!exportBusy}
+            items={exportItems}
+          >
+            <IconExport />
+          </MenuButton>
+        )}
         {isEditor && onNotes && (
           <button
             ref={notesBtnRef}
@@ -390,15 +402,6 @@ const Dock = forwardRef<HTMLDivElement, DockProps>(function Dock(
             <IconPlay />
           </button>
         )}
-        {isEditor && exportItems && (
-          <MenuButton
-            label="Export as…"
-            buttonClassName="noir-chip"
-            tip={exportBusy ? undefined : 'Export the deck as PDF or JSON'}
-            disabled={!!exportBusy}
-            items={exportItems}
-          />
-        )}
         {onBack && (
           <>
             <span className="noir-sep" />

bolt-slides/src/deck/SlideBrowser.tsx

@@ -23,7 +23,7 @@ import { useStore } from '../data/store';
 import ContextMenu, { type MenuItem } from '../edit/ContextMenu';
 import SlideView from '../slide/SlideView';
 import Thumb from './Thumb';
-import { IconClose } from './icons';
+import { IconClose, IconTrash } from './icons';
 import { useScrolled } from './deckHooks';
 import { STAGE_LAYOUT_TRANSITION } from './stageLayout';
 
@@ -160,6 +160,7 @@ function SortableThumb({
   onOpen,
   onKeyDown,
   onMenu,
+  onDelete,
 }: {
   slide: SlideData;
   index: number;
@@ -173,6 +174,7 @@ function SortableThumb({
   onOpen?: () => void;
   onKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
   onMenu: (event: React.MouseEvent) => void;
+  onDelete?: () => void;
 }) {
   const {
     attributes,
@@ -187,34 +189,50 @@ function SortableThumb({
   const label = grid
     ? `Slide ${index + 1}${name ? ' — ' + name : ''}. Double-click to open.`
     : `Go to slide ${index + 1}${name ? ' — ' + name : ''}`;
+  const showTrash = !!(onDelete && grid && selected);
+  const dragStyle = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.55 : 1,
+  };
 
   return (
-    <button
-      ref={(node) => {
-        setNodeRef(node);
-        thumbRef?.(node);
-      }}
-      type="button"
-      style={{
-        transform: CSS.Transform.toString(transform),
-        transition,
-        opacity: isDragging ? 0.55 : 1,
-      }}
-      className={thumbClass(grid, active, selected)}
-      aria-label={label}
-      aria-current={active ? 'true' : undefined}
-      {...attributes}
-      {...listeners}
-      tabIndex={tabIndex}
-      role={grid ? 'option' : undefined}
-      aria-selected={grid ? selected : undefined}
-      onClick={onPick}
-      onDoubleClick={onOpen}
-      onKeyDown={onKeyDown}
-      onContextMenu={onMenu}
-    >
-      <ThumbBody slide={slide} index={index} grid={grid} />
-    </button>
+    <div ref={setNodeRef} className="noir-thumb-shell" style={dragStyle}>
+      <button
+        ref={thumbRef}
+        type="button"
+        className={thumbClass(grid, active, selected)}
+        aria-label={label}
+        aria-current={active ? 'true' : undefined}
+        {...attributes}
+        {...listeners}
+        tabIndex={tabIndex}
+        role={grid ? 'option' : undefined}
+        aria-selected={grid ? selected : undefined}
+        onClick={onPick}
+        onDoubleClick={onOpen}
+        onKeyDown={onKeyDown}
+        onContextMenu={onMenu}
+      >
+        <ThumbBody slide={slide} index={index} grid={grid} />
+      </button>
+      {showTrash && (
+        <button
+          type="button"
+          className="noir-thumb-trash"
+          data-tip="Delete"
+          aria-label={`Delete slide ${index + 1}`}
+          onPointerDown={(event) => event.stopPropagation()}
+          onClick={(event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            onDelete();
+          }}
+        >
+          <IconTrash />
+        </button>
+      )}
+    </div>
   );
 }
 
@@ -223,6 +241,7 @@ export default function SlideBrowser({
   current,
   browse,
   mutable = false,
+  canDelete = false,
   navLabel,
   onGo,
   onClose,
@@ -231,6 +250,8 @@ export default function SlideBrowser({
   current: number;
   browse: BrowseMode;
   mutable?: boolean;
+  /** Editor-only: trash on the selected grid thumb. Hidden in present/published. */
+  canDelete?: boolean;
   navLabel?: (index: number) => string | undefined;
   onGo: (index: number) => void;
   onClose: () => void;
@@ -388,6 +409,9 @@ export default function SlideBrowser({
           onOpen={onOpen}
           onKeyDown={onKeyDown}
           onMenu={(event) => onMenu(event, slide.id)}
+          onDelete={
+            canDelete && grid ? () => deleteSlide(slide.id) : undefined
+          }
         />
       );
     });

bolt-slides/src/deck/icons.tsx

@@ -70,12 +70,23 @@ export const IconGrip = () => (
     <circle cx="15" cy="17.5" r="1.15" />
   </svg>
 );
+export const IconExport = () => (
+  <svg {...base}>
+    <path d="M12 3v12M8 7l4-4 4 4" />
+    <path d="M5 14v5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-5" />
+  </svg>
+);
 export const IconNotes = () => (
   <svg {...base}>
     <rect x="4" y="4" width="16" height="16" rx="3" />
     <path d="M8 9.5h8M8 13h8M8 16.5h4.5" />
   </svg>
 );
+export const IconTrash = () => (
+  <svg {...base}>
+    <path d="M5 7h14M10 7V5h4v2M6 7l1 13h10l1-13" />
+  </svg>
+);
 export const IconPlay = () => (
   <svg {...base} fill="currentColor" stroke="none">
     <path d="M8 5.14v13.72c0 .9 1 1.45 1.77.97l10.4-6.86a1.15 1.15 0 0 0 0-1.94L9.77 4.17C9 3.69 8 4.24 8 5.14Z" />

bolt-slides/src/edit/EditorApp.tsx

@@ -35,6 +35,10 @@ export default function EditorApp() {
   );
   const closeBrowse = useCallback(() => setBrowse('none'), []);
 
+  useEffect(() => {
+    if (presenting) setBrowse('none');
+  }, [presenting]);
+
   useEffect(() => {
     useStore.getState().load();
   }, []);
@@ -81,6 +85,7 @@ export default function EditorApp() {
                 current={current}
                 browse={browse}
                 mutable
+                canDelete
                 onGo={setCurrent}
                 onClose={closeBrowse}
               />

bolt-slides/src/edit/MenuButton.tsx

@@ -1,6 +1,13 @@
 /* WAI-ARIA APG menu button — opens a role=menu, roving tabindex, and
    returns focus to the button on Escape. Tab leaves the widget. */
-import { useEffect, useId, useLayoutEffect, useRef, useState } from 'react';
+import {
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type ReactNode,
+} from 'react';
 
 export interface MenuButtonItem {
   id: string;
@@ -15,12 +22,14 @@ export default function MenuButton({
   disabled,
   tip,
   buttonClassName = 'ghost-btn',
+  children,
 }: {
   label: string;
   items: MenuButtonItem[];
   disabled?: boolean;
   tip?: string;
   buttonClassName?: string;
+  children?: ReactNode;
 }) {
   const uid = useId();
   const buttonId = `${uid}-btn`;
@@ -148,16 +157,17 @@ export default function MenuButton({
         ref={btnRef}
         id={buttonId}
         type="button"
-        className={buttonClassName}
+        className={buttonClassName + (open ? ' on' : '')}
         data-tip={tip}
         disabled={disabled}
+        aria-label={label}
         aria-haspopup="menu"
         aria-expanded={open}
         aria-controls={menuId}
         onClick={() => (open ? close(true) : openAt(enabled[0] ?? 0))}
         onKeyDown={onButtonKey}
       >
-        {label}
+        {children ?? label}
       </button>
       {open && (
         <div

bolt-slides/src/styles/base.css

@@ -1898,6 +1898,9 @@ strong {
   background: var(--ed-divider);
   margin: 0 4px;
 }
+.noir-bar .dl-wrap {
+  flex: none;
+}
 .noir-counter {
   display: flex;
   align-items: baseline;
@@ -2132,6 +2135,48 @@ strong {
 .noir-thumb-grid .noir-thumb-no {
   width: auto;
 }
+.noir-thumb-shell {
+  position: relative;
+  min-width: 0;
+  width: 100%;
+}
+.noir-thumb-shell .noir-thumb {
+  width: 100%;
+}
+.noir-thumb-shell > .noir-thumb-trash {
+  /* Beat `[data-tip] { position: relative }` so this stays an overlay. */
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 2;
+  width: 28px;
+  height: 28px;
+  display: grid;
+  place-items: center;
+  border: none;
+  border-radius: 50%;
+  background: rgb(17 17 20 / 0.78);
+  color: var(--ed-text);
+  cursor: pointer;
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+}
+.noir-thumb-shell > .noir-thumb-trash:hover {
+  background: var(--ed-danger);
+  color: var(--ed-on-danger);
+}
+.noir-thumb-shell > .noir-thumb-trash svg {
+  width: 14px;
+  height: 14px;
+}
+.noir-thumb-shell > .noir-thumb-trash[data-tip]::after {
+  bottom: auto;
+  top: calc(100% + 6px);
+  transform: translateX(-50%) translateY(-4px);
+}
+.noir-thumb-shell > .noir-thumb-trash[data-tip]:hover::after {
+  transform: translateX(-50%) translateY(0);
+}
 @media (max-width: 700px) {
   .noir-grid-list {
     grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));