@startsimpli/ui 0.4.24 → 0.4.26

package/src/components/slide-deck/SlideDeckViewer.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import * as React from 'react'
-import { ChevronLeft, ChevronRight, RefreshCw } from 'lucide-react'
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, Pencil, Plus, RefreshCw, Trash2 } from 'lucide-react'
 import { cn } from '../../lib/utils'
 import { SlideCanvas } from './SlideCanvas'
 import { SlideFilmstrip } from './SlideFilmstrip'
@@ -14,6 +14,16 @@ export interface SlideDeckViewerProps {
   onActiveChange?: (id: string) => void
   /** Regenerate the currently-active slide. */
   onRegenerate?: (slide: SlideData) => void
+  /** Delete the currently-active slide. Shows a delete control when provided. */
+  onDelete?: (slide: SlideData) => void
+  /** Move the active slide one position left/right. Shows move controls when provided. */
+  onMove?: (slide: SlideData, direction: 'left' | 'right') => void
+  /** Insert a blank slide after the active one. Shows an add control when provided. */
+  onInsert?: (afterSlide: SlideData) => void
+  /** Edit the active slide's title/content (then it regenerates). Shows an edit control. */
+  onEdit?: (slide: SlideData, edits: { title?: string; content?: string }) => void
+  /** Drag-to-reorder in the filmstrip: source + target 0-based indices. */
+  onReorder?: (fromIndex: number, toIndex: number) => void
   emptyState?: React.ReactNode
   /** Extra actions rendered in the stage toolbar (e.g. approve / edit). */
   toolbarActions?: (slide: SlideData) => React.ReactNode
@@ -31,6 +41,11 @@ export function SlideDeckViewer({
   activeId,
   onActiveChange,
   onRegenerate,
+  onDelete,
+  onMove,
+  onInsert,
+  onEdit,
+  onReorder,
   emptyState,
   toolbarActions,
   renderStructured,
@@ -43,6 +58,20 @@ export function SlideDeckViewer({
   const index = Math.max(0, slides.findIndex((s) => s.id === currentId))
   const active = slides[index]
 
+  // Inline edit of the active slide's title/content.
+  const [editing, setEditing] = React.useState(false)
+  const [editTitle, setEditTitle] = React.useState('')
+  const [editContent, setEditContent] = React.useState('')
+  const openEditor = () => {
+    setEditTitle(active?.title ?? '')
+    setEditContent(active?.content ?? '')
+    setEditing(true)
+  }
+  const saveEdit = () => {
+    if (active) onEdit?.(active, { title: editTitle, content: editContent })
+    setEditing(false)
+  }
+
   const goTo = React.useCallback(
     (i: number) => {
       const clamped = Math.min(slides.length - 1, Math.max(0, i))
@@ -54,15 +83,25 @@ export function SlideDeckViewer({
     [slides, isControlled, onActiveChange]
   )
 
-  const onKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'ArrowRight') {
-      e.preventDefault()
-      goTo(index + 1)
-    } else if (e.key === 'ArrowLeft') {
+  // Global ←/→ navigation: works without first focusing the stage, but stays
+  // out of the way of text entry — when the user is typing in the chat composer
+  // (or any input/textarea/contenteditable) or holding a modifier, the arrows
+  // belong to the cursor, not the deck.
+  React.useEffect(() => {
+    function onKey(e: KeyboardEvent) {
+      if (e.key !== 'ArrowRight' && e.key !== 'ArrowLeft') return
+      if (e.defaultPrevented || e.metaKey || e.ctrlKey || e.altKey) return
+      const t = e.target as HTMLElement | null
+      const tag = t?.tagName
+      if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || t?.isContentEditable) {
+        return
+      }
       e.preventDefault()
-      goTo(index - 1)
+      goTo(e.key === 'ArrowRight' ? index + 1 : index - 1)
     }
-  }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [goTo, index])
 
   if (slides.length === 0) {
     return (
@@ -100,6 +139,48 @@ export function SlideDeckViewer({
           </button>
         </div>
         <div className="flex items-center gap-2">
+          {onMove && active && slides.length > 1 && (
+            <div className="flex items-center gap-1">
+              <button
+                type="button"
+                onClick={() => onMove(active, 'left')}
+                disabled={index === 0}
+                aria-label={`Move slide ${active.slideNumber} left`}
+                className="rounded-md border border-input bg-background p-1.5 shadow-sm hover:bg-accent disabled:opacity-30"
+              >
+                <ChevronsLeft className="h-4 w-4" aria-hidden="true" />
+              </button>
+              <button
+                type="button"
+                onClick={() => onMove(active, 'right')}
+                disabled={index === slides.length - 1}
+                aria-label={`Move slide ${active.slideNumber} right`}
+                className="rounded-md border border-input bg-background p-1.5 shadow-sm hover:bg-accent disabled:opacity-30"
+              >
+                <ChevronsRight className="h-4 w-4" aria-hidden="true" />
+              </button>
+            </div>
+          )}
+          {onInsert && active && (
+            <button
+              type="button"
+              onClick={() => onInsert(active)}
+              aria-label="Add a slide"
+              className="inline-flex items-center gap-1.5 rounded-md border border-input bg-background px-2.5 py-1.5 text-sm shadow-sm hover:bg-accent"
+            >
+              <Plus className="h-3.5 w-3.5" aria-hidden="true" /> Add
+            </button>
+          )}
+          {onEdit && active && (
+            <button
+              type="button"
+              onClick={openEditor}
+              aria-label={`Edit slide ${active.slideNumber}`}
+              className="inline-flex items-center gap-1.5 rounded-md border border-input bg-background px-2.5 py-1.5 text-sm shadow-sm hover:bg-accent"
+            >
+              <Pencil className="h-3.5 w-3.5" aria-hidden="true" /> Edit
+            </button>
+          )}
           {active && toolbarActions?.(active)}
           {onRegenerate && active && (
             <button
@@ -110,17 +191,26 @@ export function SlideDeckViewer({
               <RefreshCw className="h-3.5 w-3.5" aria-hidden="true" /> Regenerate
             </button>
           )}
+          {onDelete && active && slides.length > 1 && (
+            <button
+              type="button"
+              onClick={() => onDelete(active)}
+              aria-label={`Delete slide ${active.slideNumber}`}
+              className="inline-flex items-center gap-1.5 rounded-md border border-input bg-background px-2.5 py-1.5 text-sm text-red-600 shadow-sm hover:bg-red-50"
+            >
+              <Trash2 className="h-3.5 w-3.5" aria-hidden="true" /> Delete
+            </button>
+          )}
         </div>
       </div>
 
       {/* Stage */}
       <div
-        className="flex min-h-0 flex-1 items-center justify-center p-4 focus:outline-none"
+        className="relative flex min-h-0 flex-1 items-center justify-center overflow-hidden p-4 focus:outline-none"
         data-testid="slide-deck-stage"
         tabIndex={0}
         role="group"
         aria-label={`Slide ${index + 1} of ${slides.length}`}
-        onKeyDown={onKeyDown}
       >
         {active && (
           <SlideCanvas
@@ -129,6 +219,47 @@ export function SlideDeckViewer({
             renderStructured={renderStructured}
           />
         )}
+        {editing && active && (
+          <div
+            className="absolute inset-0 z-10 flex items-center justify-center bg-background/70 p-4"
+            data-testid="slide-editor"
+          >
+            <div className="w-full max-w-lg rounded-lg border border-border bg-background p-4 shadow-lg">
+              <h3 className="text-sm font-semibold">Edit slide {active.slideNumber}</h3>
+              <label className="mt-3 block text-xs font-medium text-muted-foreground">Title</label>
+              <input
+                value={editTitle}
+                onChange={(e) => setEditTitle(e.target.value)}
+                aria-label="Slide title"
+                className="mt-1 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+              />
+              <label className="mt-3 block text-xs font-medium text-muted-foreground">Content</label>
+              <textarea
+                value={editContent}
+                onChange={(e) => setEditContent(e.target.value)}
+                rows={5}
+                aria-label="Slide content"
+                className="mt-1 w-full resize-y rounded-md border border-input bg-background px-3 py-2 text-sm"
+              />
+              <div className="mt-3 flex justify-end gap-2">
+                <button
+                  type="button"
+                  onClick={() => setEditing(false)}
+                  className="rounded-md border border-input bg-background px-3 py-1.5 text-sm shadow-sm hover:bg-accent"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="button"
+                  onClick={saveEdit}
+                  className="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground shadow-sm hover:opacity-90"
+                >
+                  Save &amp; regenerate
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
       </div>
 
       {/* Filmstrip */}
@@ -137,6 +268,7 @@ export function SlideDeckViewer({
           slides={slides}
           activeId={currentId}
           onSelect={(id) => goTo(slides.findIndex((s) => s.id === id))}
+          onReorder={onReorder}
         />
       </div>
     </div>

package/src/components/slide-deck/SlideFilmstrip.tsx

@@ -9,6 +9,8 @@ export interface SlideFilmstripProps {
   slides: SlideData[]
   activeId?: string
   onSelect: (id: string) => void
+  /** Drag-to-reorder: emits source + target 0-based indices on drop. Enables DnD. */
+  onReorder?: (fromIndex: number, toIndex: number) => void
   /** `horizontal` (default) for a bottom strip, `vertical` for a side rail. */
   orientation?: 'horizontal' | 'vertical'
   className?: string
@@ -22,9 +24,11 @@ export function SlideFilmstrip({
   slides,
   activeId,
   onSelect,
+  onReorder,
   orientation = 'horizontal',
   className,
 }: SlideFilmstripProps) {
+  const dragIndex = React.useRef<number | null>(null)
   return (
     <div
       className={cn(
@@ -35,9 +39,24 @@ export function SlideFilmstrip({
       role="group"
       aria-label="Slides"
     >
-      {slides.map((slide) => {
+      {slides.map((slide, idx) => {
         const active = slide.id === activeId
         const status = slide.status ?? (slide.imageUrl ? 'ready' : 'pending')
+        const dnd = onReorder
+          ? {
+              draggable: true,
+              onDragStart: () => {
+                dragIndex.current = idx
+              },
+              onDragOver: (e: React.DragEvent) => e.preventDefault(),
+              onDrop: (e: React.DragEvent) => {
+                e.preventDefault()
+                const from = dragIndex.current
+                dragIndex.current = null
+                if (from !== null && from !== idx) onReorder(from, idx)
+              },
+            }
+          : {}
         return (
           <button
             key={slide.id}
@@ -45,6 +64,7 @@ export function SlideFilmstrip({
             aria-current={active ? 'true' : undefined}
             aria-label={`Slide ${slide.slideNumber}${slide.title ? `: ${slide.title}` : ''}`}
             onClick={() => onSelect(slide.id)}
+            {...dnd}
             className={cn(
               'group relative aspect-video w-28 shrink-0 overflow-hidden rounded-md border bg-white text-left transition-all',
               active ? 'border-primary ring-2 ring-primary' : 'border-border hover:border-primary/50'