@arbidocs/blocks 0.5.122 → 0.5.124

package/dist/presentation/SlidesEditor.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/presentation/SlidesEditor.tsx"],
-  "sourcesContent": ["/**\n * The presentation editor: its slides one under the other, scrolled like a PDF's pages, each one\n * edited where it is \u2014 clips dragged, resized and reshaped on it, its title and points typed on\n * it. Hovering a slide shows its actions (layout, move up or down, duplicate, delete); between two\n * slides, + inserts one. One small floating bar holds the rest (Design, the host's Save and other\n * actions, Present, \"\u2026\"), so no header takes room from the slides. The clips collected for the\n * presentation wait in the tray along the bottom, to be dragged onto any slide.\n *\n * The same editor shows wherever the host mounts it (the viewer's tab, or its own window).\n */\n\nimport { memo, useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react'\nimport {\n  ArrowDown,\n  ArrowUp,\n  Circle,\n  Copy,\n  Minus,\n  MoreHorizontal,\n  Play,\n  Plus,\n  RectangleHorizontal,\n  Shapes,\n  Square,\n  Trash2,\n  Type,\n} from 'lucide-react'\nimport {\n  Button,\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n  cn,\n} from '@arbidocs/react/ui'\nimport { ClipTray } from './ClipTray'\nimport { DesignMenu } from './DesignMenu'\nimport { LayoutMenu } from './LayoutMenu'\nimport { Notice } from './Notice'\nimport { PresentationStage } from './PresentationStage'\nimport type { SlideTextEditing } from './SlideDecor'\nimport { usePresentation } from './store'\nimport { newBox, type BoxShape } from './boxes'\nimport { accentColor, isLightBackground } from './theme'\nimport { usePresenterKeys } from './usePresenterKeys'\n\nexport interface SlidesEditorProps {\n  /** Present: the host opens the shareable window. */\n  onPresent: () => void\n  /** In the floating bar, before Present (e.g. Save, pop out). */\n  actions?: ReactNode\n  /** At the top of the \"\u2026\" menu (e.g. New from template, Save as, Export). */\n  menuItems?: ReactNode\n  /** First in the clip tray (e.g. Generate image). */\n  trayStart?: ReactNode\n  onChooseLogo?: () => void\n  onEditImage?: (clipId: string) => void\n  onCropImage?: (clipId: string) => void\n}\n\ninterface Selection {\n  index: number\n  clipId: string\n}\n\n/** A small icon button of a slide's hover bar. */\nfunction SlideAction({\n  label,\n  onClick,\n  disabled,\n  children,\n}: {\n  label: string\n  onClick: () => void\n  disabled?: boolean\n  children: ReactNode\n}) {\n  return (\n    <Button\n      type=\"button\"\n      size=\"icon\"\n      variant=\"ghost\"\n      className=\"size-7 text-muted-foreground hover:text-foreground pointer-coarse:size-10\"\n      title={label}\n      aria-label={label}\n      disabled={disabled}\n      onClick={onClick}\n    >\n      {children}\n    </Button>\n  )\n}\n\nconst SlideCard = memo(function SlideCard({\n  index,\n  count,\n  current,\n  selected,\n  onSelect,\n  onEditImage,\n  onCropImage,\n}: {\n  index: number\n  count: number\n  current: boolean\n  selected: string | null\n  onSelect: (index: number, clipId: string | null) => void\n  onEditImage?: (clipId: string) => void\n  onCropImage?: (clipId: string) => void\n}) {\n  const empty = usePresentation((s) => {\n    const slide = s.slides[index]\n    return (\n      !!slide &&\n      !slide.items.length &&\n      !slide.boxes.length &&\n      slide.layout !== 'title' &&\n      slide.layout !== 'section'\n    )\n  })\n  const notes = usePresentation((s) => s.slides[index]?.notes ?? '')\n  const textEditing = useMemo<SlideTextEditing>(\n    () => ({\n      onTitle: (title) => usePresentation.getState().setSlideCaption(title, index),\n      onPoints: (points) => usePresentation.getState().setSlidePoints(points, index),\n    }),\n    [index]\n  )\n  const select = useCallback((clipId: string | null) => onSelect(index, clipId), [onSelect, index])\n  const actions = usePresentation.getState()\n  return (\n    <div className=\"group relative flex gap-2\" data-testid={`slide-${index}`}>\n      {/* The gutter: the slide's number, and its actions on hover (always on a touch screen's\n          current slide), clear of the slide itself. */}\n      <div className=\"flex w-9 shrink-0 flex-col items-center gap-0.5\">\n        <span\n          className={cn(\n            'py-1 text-xs tabular-nums',\n            current ? 'font-semibold text-foreground' : 'text-muted-foreground'\n          )}\n        >\n          {index + 1}\n        </span>\n        <div\n          className={cn(\n            'flex flex-col items-center gap-0.5 transition-opacity',\n            'opacity-0 focus-within:opacity-100 group-hover:opacity-100',\n            current && 'pointer-coarse:opacity-100'\n          )}\n          data-testid={`slide-actions-${index}`}\n        >\n          <LayoutMenu index={index} compact />\n          <SlideAction\n            label=\"Move up\"\n            disabled={index === 0}\n            onClick={() => actions.moveSlide(index, index - 1)}\n          >\n            <ArrowUp className=\"size-3.5\" />\n          </SlideAction>\n          <SlideAction\n            label=\"Move down\"\n            disabled={index === count - 1}\n            onClick={() => actions.moveSlide(index, index + 1)}\n          >\n            <ArrowDown className=\"size-3.5\" />\n          </SlideAction>\n          <SlideAction label=\"Duplicate\" onClick={() => actions.duplicateSlide(index)}>\n            <Copy className=\"size-3.5\" />\n          </SlideAction>\n          <SlideAction label=\"Delete slide\" onClick={() => actions.removeSlide(index)}>\n            <Trash2 className=\"size-3.5\" />\n          </SlideAction>\n        </div>\n      </div>\n      <div\n        className={cn(\n          'relative aspect-video min-w-0 flex-1 rounded-sm',\n          current && 'ring-1 ring-primary/40 ring-offset-4 ring-offset-transparent'\n        )}\n      >\n        <PresentationStage\n          editable\n          slideIndex={index}\n          selected={selected}\n          onSelect={select}\n          onEditImage={onEditImage}\n          onCropImage={onCropImage}\n          textEditing={textEditing}\n          overlay={\n            empty && (\n              <div className=\"pointer-events-none absolute inset-x-0 bottom-[8%] flex justify-center\">\n                <span className=\"rounded-full bg-black/40 px-3 py-1 text-[1.4cqw] text-white/70\">\n                  Drag a clip here from the tray\n                </span>\n              </div>\n            )\n          }\n        />\n        {(notes || current) && (\n          <textarea\n            value={notes}\n            rows={notes.split('\\n').length}\n            placeholder=\"Speaker notes\"\n            onChange={(event) =>\n              usePresentation.getState().setSlideNotes(event.target.value, index)\n            }\n            className=\"mt-2 block w-full resize-none rounded-sm border-0 bg-transparent px-1 py-0.5 text-xs text-muted-foreground placeholder:text-muted-foreground/50 focus:bg-background focus:text-foreground focus:outline-none focus:ring-1 focus:ring-ring\"\n            aria-label={`Speaker notes for slide ${index + 1}`}\n            data-testid={`slide-notes-${index}`}\n          />\n        )}\n      </div>\n    </div>\n  )\n})\n\nconst INSERTS: { shape: BoxShape; label: string; icon: ReactNode }[] = [\n  { shape: 'text', label: 'Text box', icon: <Type className=\"size-4\" /> },\n  { shape: 'rect', label: 'Rectangle', icon: <Square className=\"size-4\" /> },\n  {\n    shape: 'roundRect',\n    label: 'Rounded rectangle',\n    icon: <RectangleHorizontal className=\"size-4\" />,\n  },\n  { shape: 'ellipse', label: 'Ellipse', icon: <Circle className=\"size-4\" /> },\n  { shape: 'line', label: 'Line', icon: <Minus className=\"size-4\" /> },\n]\n\n/** Insert a text box or a shape on the current slide; it is selected, ready to type in. */\nfunction InsertMenu({ onInserted }: { onInserted: (index: number, boxId: string) => void }) {\n  const insert = (shape: BoxShape) => {\n    const state = usePresentation.getState()\n    const slide = state.slides[state.current]\n    const box = newBox(shape, accentColor(state.theme.accent))\n    // On a light slide (an imported deck's), text is dark.\n    const dark = isLightBackground(slide?.background)\n    const { id, ...rest } = dark\n      ? {\n          ...box,\n          paragraphs: box.paragraphs.map((p) => ({\n            ...p,\n            runs: p.runs.map((r) => ({ color: '#1f2328', ...r })),\n          })),\n        }\n      : box\n    void id\n    onInserted(state.current, state.addBox(rest))\n  }\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button\n          type=\"button\"\n          size=\"icon\"\n          variant=\"ghost\"\n          className=\"size-8 text-muted-foreground hover:text-foreground pointer-coarse:size-11\"\n          title=\"Insert a text box or shape\"\n          aria-label=\"Insert\"\n          data-testid=\"slides-insert\"\n        >\n          <Shapes className=\"size-4\" />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\">\n        {INSERTS.map(({ shape, label, icon }) => (\n          <DropdownMenuItem\n            key={shape}\n            onSelect={() => insert(shape)}\n            data-testid={`slides-insert-${shape}`}\n          >\n            {icon}\n            <span className=\"ml-2\">{label}</span>\n          </DropdownMenuItem>\n        ))}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n\n/** Between two slides (and after the last): + inserts a slide there, shown on hover. */\nfunction InsertSlide({ after, always }: { after: number; always?: boolean }) {\n  return (\n    <div className=\"group/insert relative flex h-8 items-center justify-center pl-11\">\n      <button\n        type=\"button\"\n        onClick={() => usePresentation.getState().addSlide(undefined, after)}\n        className={cn(\n          'flex items-center gap-1 rounded-full border border-dashed border-border bg-background px-2.5 py-0.5 text-xs text-muted-foreground transition-opacity hover:border-solid hover:text-foreground focus-visible:opacity-100',\n          !always && 'opacity-0 group-hover/insert:opacity-100 pointer-coarse:opacity-100'\n        )}\n        aria-label={`New slide after slide ${after + 1}`}\n        data-testid={`slide-insert-${after}`}\n      >\n        <Plus className=\"size-3\" />\n        Slide\n      </button>\n    </div>\n  )\n}\n\nexport function SlidesEditor({\n  onPresent,\n  actions,\n  menuItems,\n  trayStart,\n  onChooseLogo,\n  onEditImage,\n  onCropImage,\n}: SlidesEditorProps) {\n  const ids = usePresentation((s) => s.slides.map((slide) => slide.id).join(' '))\n  const slideIds = useMemo(() => ids.split(' '), [ids])\n  const current = usePresentation((s) => s.current)\n  const captions = usePresentation((s) => s.captions)\n  // Presenting in the presentation's own window: Present becomes Stop presenting.\n  const presenting = usePresentation((s) => s.presenting)\n  const [selection, setSelection] = useState<Selection | null>(null)\n  const [view, setView] = useState<Window | null>(null)\n  const list = useRef<HTMLDivElement>(null)\n  const rootRef = useCallback((node: HTMLDivElement | null) => {\n    if (node) setView(node.ownerDocument.defaultView)\n  }, [])\n\n  const onSelect = useCallback((index: number, clipId: string | null) => {\n    setSelection(clipId ? { index, clipId } : null)\n  }, [])\n  const keySelection = useMemo(\n    () => ({ clipId: selection?.clipId ?? null, clear: () => setSelection(null) }),\n    [selection]\n  )\n  usePresenterKeys(view, false, keySelection)\n\n  // A slide added, duplicated or moved becomes the current one: brought into view.\n  useEffect(() => {\n    const card = list.current?.querySelector(`[data-testid=\"slide-${current}\"]`)\n    card?.scrollIntoView?.({ block: 'nearest', behavior: 'smooth' })\n  }, [current, slideIds.length])\n\n  return (\n    <div\n      ref={rootRef}\n      className=\"relative flex h-full min-h-0 flex-col bg-muted/30\"\n      data-testid=\"slides-editor\"\n    >\n      <div ref={list} className=\"min-h-0 flex-1 overflow-y-auto\">\n        <div className=\"mx-auto flex max-w-[1100px] flex-col pb-6 pl-2 pr-6 pt-14\">\n          {slideIds.map((id, index) => (\n            <div key={id}>\n              <SlideCard\n                index={index}\n                count={slideIds.length}\n                current={index === current}\n                selected={selection?.index === index ? selection.clipId : null}\n                onSelect={onSelect}\n                onEditImage={onEditImage}\n                onCropImage={onCropImage}\n              />\n              <InsertSlide after={index} always={index === slideIds.length - 1} />\n            </div>\n          ))}\n        </div>\n      </div>\n\n      {/* The rest, in one small floating bar: no header row. */}\n      <div\n        className=\"absolute right-4 top-2.5 z-40 flex items-center gap-0.5 rounded-full border border-border bg-background p-1 shadow-md\"\n        data-testid=\"slides-toolbar\"\n      >\n        <DesignMenu onChooseLogo={onChooseLogo} />\n        <InsertMenu onInserted={(index, boxId) => setSelection({ index, clipId: boxId })} />\n        {actions}\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              type=\"button\"\n              size=\"icon\"\n              variant=\"ghost\"\n              className=\"size-8 text-muted-foreground hover:text-foreground pointer-coarse:size-11\"\n              title=\"More\"\n              aria-label=\"More\"\n            >\n              <MoreHorizontal className=\"size-4\" />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            {menuItems}\n            {menuItems && <DropdownMenuSeparator />}\n            <DropdownMenuCheckboxItem\n              checked={captions}\n              onCheckedChange={(on) => usePresentation.getState().setCaptions(!!on)}\n            >\n              Show source labels\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        {presenting ? (\n          <Button\n            type=\"button\"\n            size=\"sm\"\n            variant=\"destructive\"\n            className=\"ml-0.5 h-8 rounded-full\"\n            onClick={() => usePresentation.getState().setPresenting(false)}\n            title=\"Stop presenting (the presentation window closes)\"\n            data-testid=\"presentation-stop-button\"\n          >\n            <Square className=\"size-3 fill-current\" />\n            Stop presenting\n          </Button>\n        ) : (\n          <Button\n            type=\"button\"\n            size=\"sm\"\n            className=\"ml-0.5 h-8 rounded-full\"\n            onClick={() => {\n              setSelection(null)\n              onPresent()\n            }}\n            title=\"Present: the slides alone, in a window to share or put full screen\"\n            data-testid=\"presentation-present-button\"\n          >\n            <Play className=\"size-3.5\" />\n            Present\n          </Button>\n        )}\n      </div>\n\n      <ClipTray start={trayStart} />\n      <Notice />\n    </div>\n  )\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * The presentation editor: its slides one under the other, scrolled like a PDF's pages, each one\n * edited where it is \u2014 clips dragged, resized and reshaped on it, its title and points typed on\n * it. Hovering a slide shows its actions (layout, move up or down, duplicate, delete); between two\n * slides, + inserts one. One small floating bar holds the rest (Design, the host's Save and other\n * actions, Present, \"\u2026\"), so no header takes room from the slides. The clips collected for the\n * presentation wait in the tray along the bottom, to be dragged onto any slide.\n *\n * The same editor shows wherever the host mounts it (the viewer's tab, or its own window).\n */\n\nimport { memo, useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react'\nimport {\n  ArrowDown,\n  ArrowUp,\n  Circle,\n  Copy,\n  Minus,\n  MoreHorizontal,\n  Play,\n  Plus,\n  RectangleHorizontal,\n  Shapes,\n  Square,\n  Trash2,\n  Type,\n} from 'lucide-react'\nimport {\n  Button,\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n  cn,\n} from '@arbidocs/react/ui'\nimport { ClipTray } from './ClipTray'\nimport { DesignMenu } from './DesignMenu'\nimport { LayoutMenu } from './LayoutMenu'\nimport { Notice } from './Notice'\nimport { PresentationStage } from './PresentationStage'\nimport type { SlideTextEditing } from './SlideDecor'\nimport { usePresentation } from './store'\nimport { newBox, type BoxShape } from './boxes'\nimport { accentColor, isLightBackground } from './theme'\nimport { usePresenterKeys } from './usePresenterKeys'\n\nexport interface SlidesEditorProps {\n  /** Present: the host opens the shareable window. */\n  onPresent: () => void\n  /** In the floating bar, before Present (e.g. Save, pop out). */\n  actions?: ReactNode\n  /** At the top of the \"\u2026\" menu (e.g. New from template, Save as, Export). */\n  menuItems?: ReactNode\n  /** First in the clip tray (e.g. Generate image). */\n  trayStart?: ReactNode\n  onChooseLogo?: () => void\n  onEditImage?: (clipId: string) => void\n  onCropImage?: (clipId: string) => void\n}\n\ninterface Selection {\n  index: number\n  clipId: string\n}\n\nconst SlideCard = memo(function SlideCard({\n  index,\n  count,\n  current,\n  selected,\n  onSelect,\n  onEditImage,\n  onCropImage,\n}: {\n  index: number\n  count: number\n  current: boolean\n  selected: string | null\n  onSelect: (index: number, clipId: string | null) => void\n  onEditImage?: (clipId: string) => void\n  onCropImage?: (clipId: string) => void\n}) {\n  const empty = usePresentation((s) => {\n    const slide = s.slides[index]\n    return (\n      !!slide &&\n      !slide.items.length &&\n      !slide.boxes.length &&\n      !slide.points.trim() &&\n      slide.layout !== 'title' &&\n      slide.layout !== 'section'\n    )\n  })\n  const notes = usePresentation((s) => s.slides[index]?.notes ?? '')\n  const textEditing = useMemo<SlideTextEditing>(\n    () => ({\n      onTitle: (title) => usePresentation.getState().setSlideCaption(title, index),\n      onPoints: (points) => usePresentation.getState().setSlidePoints(points, index),\n    }),\n    [index]\n  )\n  const select = useCallback((clipId: string | null) => onSelect(index, clipId), [onSelect, index])\n  const actions = usePresentation.getState()\n  return (\n    <div className=\"group relative flex gap-2\" data-testid={`slide-${index}`}>\n      {/* The gutter: the slide's number, and its actions on hover (always on a touch screen's\n          current slide), clear of the slide itself. */}\n      <div className=\"flex w-9 shrink-0 flex-col items-center gap-0.5\">\n        <span\n          className={cn(\n            'py-1 text-xs tabular-nums',\n            current ? 'font-semibold text-foreground' : 'text-muted-foreground'\n          )}\n        >\n          {index + 1}\n        </span>\n        <div\n          className={cn(\n            'flex flex-col items-center gap-0.5 transition-opacity',\n            'opacity-0 focus-within:opacity-100 group-hover:opacity-100',\n            current && 'pointer-coarse:opacity-100'\n          )}\n          data-testid={`slide-actions-${index}`}\n        >\n          <LayoutMenu index={index} compact />\n          {/* The slide's other actions, behind \"\u2026\": moving it, copying it, deleting it. */}\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button\n                type=\"button\"\n                size=\"icon\"\n                variant=\"ghost\"\n                className=\"size-7 text-muted-foreground hover:text-foreground pointer-coarse:size-11\"\n                title=\"Slide actions\"\n                aria-label={`Slide ${index + 1} actions`}\n                data-testid={`slide-menu-${index}`}\n              >\n                <MoreHorizontal className=\"size-3.5\" />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\">\n              <DropdownMenuItem\n                disabled={index === 0}\n                onSelect={() => actions.moveSlide(index, index - 1)}\n              >\n                <ArrowUp className=\"size-4\" />\n                <span className=\"ml-2\">Move up</span>\n              </DropdownMenuItem>\n              <DropdownMenuItem\n                disabled={index === count - 1}\n                onSelect={() => actions.moveSlide(index, index + 1)}\n              >\n                <ArrowDown className=\"size-4\" />\n                <span className=\"ml-2\">Move down</span>\n              </DropdownMenuItem>\n              <DropdownMenuItem onSelect={() => actions.duplicateSlide(index)}>\n                <Copy className=\"size-4\" />\n                <span className=\"ml-2\">Duplicate</span>\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem\n                className=\"text-destructive\"\n                onSelect={() => actions.removeSlide(index)}\n              >\n                <Trash2 className=\"size-4\" />\n                <span className=\"ml-2\">Delete slide</span>\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n      </div>\n      <div\n        className={cn(\n          'relative aspect-video min-w-0 flex-1 rounded-sm',\n          current && 'ring-1 ring-primary/40 ring-offset-4 ring-offset-transparent'\n        )}\n      >\n        <PresentationStage\n          editable\n          slideIndex={index}\n          selected={selected}\n          onSelect={select}\n          onEditImage={onEditImage}\n          onCropImage={onCropImage}\n          textEditing={textEditing}\n          overlay={\n            empty && (\n              <div className=\"pointer-events-none absolute inset-x-0 bottom-[8%] flex justify-center\">\n                <span className=\"rounded-full bg-black/40 px-3 py-1 text-[1.4cqw] text-white/70\">\n                  Drag a clip here from the tray\n                </span>\n              </div>\n            )\n          }\n        />\n        {(notes || current) && (\n          <textarea\n            value={notes}\n            rows={notes.split('\\n').length}\n            placeholder=\"Speaker notes\"\n            onChange={(event) =>\n              usePresentation.getState().setSlideNotes(event.target.value, index)\n            }\n            className=\"mt-2 block w-full resize-none rounded-sm border-0 bg-transparent px-1 py-0.5 text-xs text-muted-foreground placeholder:text-muted-foreground/50 focus:bg-background focus:text-foreground focus:outline-none focus:ring-1 focus:ring-ring\"\n            aria-label={`Speaker notes for slide ${index + 1}`}\n            data-testid={`slide-notes-${index}`}\n          />\n        )}\n      </div>\n    </div>\n  )\n})\n\nconst INSERTS: { shape: BoxShape; label: string; icon: ReactNode }[] = [\n  { shape: 'text', label: 'Text box', icon: <Type className=\"size-4\" /> },\n  { shape: 'rect', label: 'Rectangle', icon: <Square className=\"size-4\" /> },\n  {\n    shape: 'roundRect',\n    label: 'Rounded rectangle',\n    icon: <RectangleHorizontal className=\"size-4\" />,\n  },\n  { shape: 'ellipse', label: 'Ellipse', icon: <Circle className=\"size-4\" /> },\n  { shape: 'line', label: 'Line', icon: <Minus className=\"size-4\" /> },\n]\n\n/** Insert a text box or a shape on the current slide; it is selected, ready to type in. */\nfunction InsertMenu({ onInserted }: { onInserted: (index: number, boxId: string) => void }) {\n  const insert = (shape: BoxShape) => {\n    const state = usePresentation.getState()\n    const slide = state.slides[state.current]\n    const box = newBox(shape, accentColor(state.theme.accent))\n    // On a light slide (an imported deck's), text is dark.\n    const dark = isLightBackground(slide?.background)\n    const { id, ...rest } = dark\n      ? {\n          ...box,\n          paragraphs: box.paragraphs.map((p) => ({\n            ...p,\n            runs: p.runs.map((r) => ({ color: '#1f2328', ...r })),\n          })),\n        }\n      : box\n    void id\n    onInserted(state.current, state.addBox(rest))\n  }\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button\n          type=\"button\"\n          size=\"icon\"\n          variant=\"ghost\"\n          className=\"size-8 text-muted-foreground hover:text-foreground pointer-coarse:size-11\"\n          title=\"Insert a text box or shape\"\n          aria-label=\"Insert\"\n          data-testid=\"slides-insert\"\n        >\n          <Shapes className=\"size-4\" />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\">\n        {INSERTS.map(({ shape, label, icon }) => (\n          <DropdownMenuItem\n            key={shape}\n            onSelect={() => insert(shape)}\n            data-testid={`slides-insert-${shape}`}\n          >\n            {icon}\n            <span className=\"ml-2\">{label}</span>\n          </DropdownMenuItem>\n        ))}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n\n/** Between two slides (and after the last): + inserts a slide there, shown on hover. */\nfunction InsertSlide({ after, always }: { after: number; always?: boolean }) {\n  return (\n    <div className=\"group/insert relative flex h-8 items-center justify-center pl-11\">\n      <button\n        type=\"button\"\n        onClick={() => usePresentation.getState().addSlide(undefined, after)}\n        className={cn(\n          'flex items-center gap-1 rounded-full border border-dashed border-border bg-background px-2.5 py-0.5 text-xs text-muted-foreground transition-opacity hover:border-solid hover:text-foreground focus-visible:opacity-100',\n          !always && 'opacity-0 group-hover/insert:opacity-100 pointer-coarse:opacity-100'\n        )}\n        aria-label={`New slide after slide ${after + 1}`}\n        data-testid={`slide-insert-${after}`}\n      >\n        <Plus className=\"size-3\" />\n        Slide\n      </button>\n    </div>\n  )\n}\n\nexport function SlidesEditor({\n  onPresent,\n  actions,\n  menuItems,\n  trayStart,\n  onChooseLogo,\n  onEditImage,\n  onCropImage,\n}: SlidesEditorProps) {\n  const ids = usePresentation((s) => s.slides.map((slide) => slide.id).join(' '))\n  const slideIds = useMemo(() => ids.split(' '), [ids])\n  const current = usePresentation((s) => s.current)\n  const captions = usePresentation((s) => s.captions)\n  // Presenting in the presentation's own window: Present becomes Stop presenting.\n  const presenting = usePresentation((s) => s.presenting)\n  const [selection, setSelection] = useState<Selection | null>(null)\n  const [view, setView] = useState<Window | null>(null)\n  const list = useRef<HTMLDivElement>(null)\n  const rootRef = useCallback((node: HTMLDivElement | null) => {\n    if (node) setView(node.ownerDocument.defaultView)\n  }, [])\n\n  const onSelect = useCallback((index: number, clipId: string | null) => {\n    setSelection(clipId ? { index, clipId } : null)\n  }, [])\n  const keySelection = useMemo(\n    () => ({ clipId: selection?.clipId ?? null, clear: () => setSelection(null) }),\n    [selection]\n  )\n  usePresenterKeys(view, false, keySelection)\n\n  // A slide added, duplicated or moved becomes the current one: brought into view.\n  useEffect(() => {\n    const card = list.current?.querySelector(`[data-testid=\"slide-${current}\"]`)\n    card?.scrollIntoView?.({ block: 'nearest', behavior: 'smooth' })\n  }, [current, slideIds.length])\n\n  return (\n    <div\n      ref={rootRef}\n      className=\"relative flex h-full min-h-0 flex-col bg-muted/30\"\n      data-testid=\"slides-editor\"\n    >\n      <div ref={list} className=\"min-h-0 flex-1 overflow-y-auto\">\n        <div className=\"mx-auto flex max-w-[1100px] flex-col pb-6 pl-2 pr-6 pt-14\">\n          {slideIds.map((id, index) => (\n            <div key={id}>\n              <SlideCard\n                index={index}\n                count={slideIds.length}\n                current={index === current}\n                selected={selection?.index === index ? selection.clipId : null}\n                onSelect={onSelect}\n                onEditImage={onEditImage}\n                onCropImage={onCropImage}\n              />\n              <InsertSlide after={index} always={index === slideIds.length - 1} />\n            </div>\n          ))}\n        </div>\n      </div>\n\n      {/* The rest, in one small floating bar: no header row. */}\n      <div\n        className=\"absolute right-4 top-2.5 z-40 flex items-center gap-0.5 rounded-full border border-border bg-background p-1 shadow-md\"\n        data-testid=\"slides-toolbar\"\n      >\n        <DesignMenu onChooseLogo={onChooseLogo} />\n        <InsertMenu onInserted={(index, boxId) => setSelection({ index, clipId: boxId })} />\n        {actions}\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              type=\"button\"\n              size=\"icon\"\n              variant=\"ghost\"\n              className=\"size-8 text-muted-foreground hover:text-foreground pointer-coarse:size-11\"\n              title=\"More\"\n              aria-label=\"More\"\n            >\n              <MoreHorizontal className=\"size-4\" />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            {menuItems}\n            {menuItems && <DropdownMenuSeparator />}\n            <DropdownMenuCheckboxItem\n              checked={captions}\n              onCheckedChange={(on) => usePresentation.getState().setCaptions(!!on)}\n            >\n              Show source labels\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        {presenting ? (\n          <Button\n            type=\"button\"\n            size=\"sm\"\n            variant=\"destructive\"\n            className=\"ml-0.5 h-8 rounded-full\"\n            onClick={() => usePresentation.getState().setPresenting(false)}\n            title=\"Stop presenting (the presentation window closes)\"\n            data-testid=\"presentation-stop-button\"\n          >\n            <Square className=\"size-3 fill-current\" />\n            Stop presenting\n          </Button>\n        ) : (\n          <Button\n            type=\"button\"\n            size=\"sm\"\n            className=\"ml-0.5 h-8 rounded-full\"\n            onClick={() => {\n              setSelection(null)\n              onPresent()\n            }}\n            title=\"Present: the slides alone, in a window to share or put full screen\"\n            data-testid=\"presentation-present-button\"\n          >\n            <Play className=\"size-3.5\" />\n            Present\n          </Button>\n        )}\n      </div>\n\n      <ClipTray start={trayStart} />\n      <Notice />\n    </div>\n  )\n}\n"],
+  "mappings": "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",
   "names": ["SlideCard"]
 }

package/dist/presentation/SpotlightView.d.ts

@@ -0,0 +1,19 @@
+/**
+ * The spotlight on screen: the document dims and the gathered clips fly from where they are on
+ * their pages into a slide over it, in the same window (a call sharing it goes on sharing it). It is
+ * the presentation's own stage (`PresentationStage`), so it looks as a slide of the deck would.
+ *
+ * ← → step through the clips together and each alone, Esc goes back to the document. Each move is
+ * a FLIP: a clip is drawn where it ends and animated from where it was (its page, or its place on
+ * the previous step) by a transform, about 300 ms; with reduced motion it simply appears.
+ */
+import type { Clip } from './model';
+/** How long a clip takes to fly into place. */
+export declare const SPOTLIGHT_MS = 300;
+/** A box on screen, in CSS pixels. */
+export type ScreenRect = Pick<DOMRect, 'left' | 'top' | 'width' | 'height'>;
+export interface SpotlightViewProps {
+    /** Where a clip is on screen before the spotlight (its passage on the page), if it shows. */
+    fromRect: (clip: Clip) => ScreenRect | null;
+}
+export declare function SpotlightView({ fromRect }: SpotlightViewProps): import("react").JSX.Element;

package/dist/presentation/SpotlightView.js

@@ -0,0 +1,180 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Check, ChevronLeft, ChevronRight, Presentation, X } from "lucide-react";
+import { cn } from "@arbidocs/react/ui";
+import { Control } from "./PresentControls.js";
+import { PresentationStage } from "./PresentationStage.js";
+import { spotlightSlide, spotlightSteps, useSpotlight } from "./spotlight.js";
+import { usePresentation } from "./store.js";
+import { usePointerActive } from "./usePointerActive.js";
+const SPOTLIGHT_MS = 300;
+const EASING = "cubic-bezier(0.2, 0, 0, 1)";
+const prefersReducedMotion = (view) => !!view?.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+function SpotlightView({ fromRect }) {
+  const clips = useSpotlight((s) => s.clips);
+  const note = useSpotlight((s) => s.note);
+  const step = useSpotlight((s) => s.step);
+  const captions = usePresentation((s) => s.captions);
+  const theme = usePresentation((s) => s.theme);
+  const steps = useMemo(() => spotlightSteps(clips), [clips]);
+  const ids = steps[step] ?? [];
+  const stepKey = ids.join();
+  const slide = useMemo(
+    () => spotlightSlide(clips, ids, note, { captions, theme }),
+    // `ids` is new each render; its key says when it changed.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [clips, stepKey, note, captions, theme]
+  );
+  const show = useMemo(() => ({ slide, clips }), [slide, clips]);
+  const [view, setView] = useState(null);
+  const root = useRef(null);
+  const rootRef = useCallback((node) => {
+    root.current = node;
+    if (node) setView(node.ownerDocument.defaultView);
+  }, []);
+  const active = usePointerActive(view);
+  const [kept, setKept] = useState(null);
+  const last = useRef(/* @__PURE__ */ new Map());
+  const fromRectRef = useRef(fromRect);
+  fromRectRef.current = fromRect;
+  useLayoutEffect(() => {
+    const node = root.current;
+    if (!node) return;
+    const reduce = prefersReducedMotion(node.ownerDocument.defaultView);
+    const next = /* @__PURE__ */ new Map();
+    for (const id of stepKey.split(",").filter(Boolean)) {
+      const element = node.querySelector(`[data-testid="stage-item-${id}"]`);
+      const clip = useSpotlight.getState().clips.find((entry) => entry.id === id);
+      if (!element || !clip) continue;
+      const to = element.getBoundingClientRect();
+      next.set(id, to);
+      const from = last.current.get(id) ?? fromRectRef.current(clip);
+      if (reduce || !from || !to.width || !to.height || typeof element.animate !== "function") {
+        continue;
+      }
+      element.animate(
+        [
+          {
+            transform: `translate(${from.left - to.left}px, ${from.top - to.top}px) scale(${from.width / to.width}, ${from.height / to.height})`
+          },
+          { transform: "none" }
+        ],
+        { duration: SPOTLIGHT_MS, easing: EASING }
+      );
+    }
+    last.current = next;
+  }, [stepKey]);
+  const backdrop = useRef(null);
+  useLayoutEffect(() => {
+    const element = backdrop.current;
+    if (!element || typeof element.animate !== "function") return;
+    if (prefersReducedMotion(element.ownerDocument.defaultView)) return;
+    element.animate([{ opacity: 0 }, { opacity: 1 }], { duration: SPOTLIGHT_MS, easing: EASING });
+  }, []);
+  useEffect(() => {
+    if (!view) return;
+    const onKeyDown = (event) => {
+      if (event.metaKey || event.ctrlKey || event.altKey) return;
+      const target = event.target;
+      if (target?.closest?.('input, textarea, select, [contenteditable="true"]')) return;
+      const state = useSpotlight.getState();
+      if (event.key === "Escape") state.hide();
+      else if (event.key === "ArrowRight" || event.key === "PageDown") state.goTo(state.step + 1);
+      else if (event.key === "ArrowLeft" || event.key === "PageUp") state.goTo(state.step - 1);
+      else return;
+      event.preventDefault();
+      event.stopPropagation();
+    };
+    view.addEventListener("keydown", onKeyDown, true);
+    return () => view.removeEventListener("keydown", onKeyDown, true);
+  }, [view]);
+  const actions = useSpotlight.getState();
+  const isKept = kept === `${stepKey}|${note}`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className: "absolute inset-0 z-30 select-none",
+      style: { cursor: active ? "default" : "none" },
+      role: "dialog",
+      "aria-label": "Spotlight",
+      "data-testid": "spotlight",
+      children: [
+        /* @__PURE__ */ jsx("div", { ref: backdrop, className: "absolute inset-0 bg-black/85" }),
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 p-4 pb-16", children: /* @__PURE__ */ jsx(PresentationStage, { show, className: "bg-transparent" }) }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "absolute bottom-3 left-1/2 z-10 flex -translate-x-1/2 items-center gap-0.5 rounded-full bg-black/60 p-1 text-white shadow-lg backdrop-blur transition-opacity duration-300",
+              active ? "opacity-100" : "pointer-events-none opacity-0"
+            ),
+            role: "toolbar",
+            "aria-label": "Spotlight",
+            "data-testid": "spotlight-controls",
+            children: [
+              /* @__PURE__ */ jsx(
+                Control,
+                {
+                  label: "Previous (\u2190)",
+                  onClick: () => actions.goTo(step - 1),
+                  disabled: step === 0,
+                  testId: "spotlight-previous",
+                  children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" })
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  className: "min-w-12 text-center text-xs tabular-nums text-white/85",
+                  "data-testid": "spotlight-position",
+                  children: [
+                    step + 1,
+                    " / ",
+                    steps.length
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Control,
+                {
+                  label: "Next (\u2192)",
+                  onClick: () => actions.goTo(step + 1),
+                  disabled: step >= steps.length - 1,
+                  testId: "spotlight-next",
+                  children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" })
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "mx-1 h-4 w-px bg-white/25" }),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: "inline-flex h-8 items-center gap-1.5 whitespace-nowrap rounded-full px-3 text-xs text-white/85 hover:bg-white/15 hover:text-white disabled:opacity-60 disabled:hover:bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60 pointer-coarse:h-11",
+                  disabled: isKept,
+                  onClick: () => {
+                    actions.keep();
+                    setKept(`${stepKey}|${note}`);
+                  },
+                  title: "Add this as a slide of the open presentation",
+                  "data-testid": "spotlight-keep",
+                  children: [
+                    isKept ? /* @__PURE__ */ jsx(Check, { className: "size-3.5" }) : /* @__PURE__ */ jsx(Presentation, { className: "size-3.5" }),
+                    isKept ? "Kept as slide" : "Keep as slide"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(Control, { label: "Back to the document (Esc)", onClick: actions.hide, testId: "spotlight-close", children: /* @__PURE__ */ jsx(X, { className: "size-4" }) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  SPOTLIGHT_MS,
+  SpotlightView
+};
+//# sourceMappingURL=SpotlightView.js.map

package/dist/presentation/SpotlightView.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/presentation/SpotlightView.tsx"],
+  "sourcesContent": ["/**\n * The spotlight on screen: the document dims and the gathered clips fly from where they are on\n * their pages into a slide over it, in the same window (a call sharing it goes on sharing it). It is\n * the presentation's own stage (`PresentationStage`), so it looks as a slide of the deck would.\n *\n * \u2190 \u2192 step through the clips together and each alone, Esc goes back to the document. Each move is\n * a FLIP: a clip is drawn where it ends and animated from where it was (its page, or its place on\n * the previous step) by a transform, about 300 ms; with reduced motion it simply appears.\n */\n\nimport { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'\nimport { Check, ChevronLeft, ChevronRight, Presentation, X } from 'lucide-react'\nimport { cn } from '@arbidocs/react/ui'\nimport type { Clip } from './model'\nimport { Control } from './PresentControls'\nimport { PresentationStage } from './PresentationStage'\nimport { spotlightSlide, spotlightSteps, useSpotlight } from './spotlight'\nimport { usePresentation } from './store'\nimport { usePointerActive } from './usePointerActive'\n\n/** How long a clip takes to fly into place. */\nexport const SPOTLIGHT_MS = 300\nconst EASING = 'cubic-bezier(0.2, 0, 0, 1)'\n\n/** A box on screen, in CSS pixels. */\nexport type ScreenRect = Pick<DOMRect, 'left' | 'top' | 'width' | 'height'>\n\nexport interface SpotlightViewProps {\n  /** Where a clip is on screen before the spotlight (its passage on the page), if it shows. */\n  fromRect: (clip: Clip) => ScreenRect | null\n}\n\nconst prefersReducedMotion = (view: Window | null) =>\n  !!view?.matchMedia?.('(prefers-reduced-motion: reduce)').matches\n\nexport function SpotlightView({ fromRect }: SpotlightViewProps) {\n  const clips = useSpotlight((s) => s.clips)\n  const note = useSpotlight((s) => s.note)\n  const step = useSpotlight((s) => s.step)\n  const captions = usePresentation((s) => s.captions)\n  const theme = usePresentation((s) => s.theme)\n  const steps = useMemo(() => spotlightSteps(clips), [clips])\n  const ids = steps[step] ?? []\n  const stepKey = ids.join()\n  const slide = useMemo(\n    () => spotlightSlide(clips, ids, note, { captions, theme }),\n    // `ids` is new each render; its key says when it changed.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [clips, stepKey, note, captions, theme]\n  )\n  const show = useMemo(() => ({ slide, clips }), [slide, clips])\n\n  const [view, setView] = useState<Window | null>(null)\n  const root = useRef<HTMLDivElement | null>(null)\n  const rootRef = useCallback((node: HTMLDivElement | null) => {\n    root.current = node\n    if (node) setView(node.ownerDocument.defaultView)\n  }, [])\n  const active = usePointerActive(view)\n  const [kept, setKept] = useState<string | null>(null)\n\n  // FLIP: each clip from where it was (on its page, or on the step before) to where it is now.\n  const last = useRef(new Map<string, ScreenRect>())\n  const fromRectRef = useRef(fromRect)\n  fromRectRef.current = fromRect\n  useLayoutEffect(() => {\n    const node = root.current\n    if (!node) return\n    const reduce = prefersReducedMotion(node.ownerDocument.defaultView)\n    const next = new Map<string, ScreenRect>()\n    for (const id of stepKey.split(',').filter(Boolean)) {\n      const element = node.querySelector<HTMLElement>(`[data-testid=\"stage-item-${id}\"]`)\n      const clip = useSpotlight.getState().clips.find((entry) => entry.id === id)\n      if (!element || !clip) continue\n      const to = element.getBoundingClientRect()\n      next.set(id, to)\n      const from = last.current.get(id) ?? fromRectRef.current(clip)\n      if (reduce || !from || !to.width || !to.height || typeof element.animate !== 'function') {\n        continue\n      }\n      element.animate(\n        [\n          {\n            transform: `translate(${from.left - to.left}px, ${from.top - to.top}px) scale(${\n              from.width / to.width\n            }, ${from.height / to.height})`,\n          },\n          { transform: 'none' },\n        ],\n        { duration: SPOTLIGHT_MS, easing: EASING }\n      )\n    }\n    last.current = next\n  }, [stepKey])\n\n  // The document dims as the clips arrive.\n  const backdrop = useRef<HTMLDivElement>(null)\n  useLayoutEffect(() => {\n    const element = backdrop.current\n    if (!element || typeof element.animate !== 'function') return\n    if (prefersReducedMotion(element.ownerDocument.defaultView)) return\n    element.animate([{ opacity: 0 }, { opacity: 1 }], { duration: SPOTLIGHT_MS, easing: EASING })\n  }, [])\n\n  // Esc back to the document, \u2190 \u2192 through the steps; taken before the viewer's own keys.\n  useEffect(() => {\n    if (!view) return\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.metaKey || event.ctrlKey || event.altKey) return\n      const target = event.target as HTMLElement | null\n      if (target?.closest?.('input, textarea, select, [contenteditable=\"true\"]')) return\n      const state = useSpotlight.getState()\n      if (event.key === 'Escape') state.hide()\n      else if (event.key === 'ArrowRight' || event.key === 'PageDown') state.goTo(state.step + 1)\n      else if (event.key === 'ArrowLeft' || event.key === 'PageUp') state.goTo(state.step - 1)\n      else return\n      event.preventDefault()\n      event.stopPropagation()\n    }\n    view.addEventListener('keydown', onKeyDown, true)\n    return () => view.removeEventListener('keydown', onKeyDown, true)\n  }, [view])\n\n  const actions = useSpotlight.getState()\n  const isKept = kept === `${stepKey}|${note}`\n  return (\n    <div\n      ref={rootRef}\n      className=\"absolute inset-0 z-30 select-none\"\n      style={{ cursor: active ? 'default' : 'none' }}\n      role=\"dialog\"\n      aria-label=\"Spotlight\"\n      data-testid=\"spotlight\"\n    >\n      <div ref={backdrop} className=\"absolute inset-0 bg-black/85\" />\n      <div className=\"absolute inset-0 p-4 pb-16\">\n        <PresentationStage show={show} className=\"bg-transparent\" />\n      </div>\n      <div\n        className={cn(\n          'absolute bottom-3 left-1/2 z-10 flex -translate-x-1/2 items-center gap-0.5 rounded-full bg-black/60 p-1 text-white shadow-lg backdrop-blur transition-opacity duration-300',\n          active ? 'opacity-100' : 'pointer-events-none opacity-0'\n        )}\n        role=\"toolbar\"\n        aria-label=\"Spotlight\"\n        data-testid=\"spotlight-controls\"\n      >\n        <Control\n          label=\"Previous (\u2190)\"\n          onClick={() => actions.goTo(step - 1)}\n          disabled={step === 0}\n          testId=\"spotlight-previous\"\n        >\n          <ChevronLeft className=\"size-4\" />\n        </Control>\n        <span\n          className=\"min-w-12 text-center text-xs tabular-nums text-white/85\"\n          data-testid=\"spotlight-position\"\n        >\n          {step + 1} / {steps.length}\n        </span>\n        <Control\n          label=\"Next (\u2192)\"\n          onClick={() => actions.goTo(step + 1)}\n          disabled={step >= steps.length - 1}\n          testId=\"spotlight-next\"\n        >\n          <ChevronRight className=\"size-4\" />\n        </Control>\n        <div className=\"mx-1 h-4 w-px bg-white/25\" />\n        <button\n          type=\"button\"\n          className=\"inline-flex h-8 items-center gap-1.5 whitespace-nowrap rounded-full px-3 text-xs text-white/85 hover:bg-white/15 hover:text-white disabled:opacity-60 disabled:hover:bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60 pointer-coarse:h-11\"\n          disabled={isKept}\n          onClick={() => {\n            actions.keep()\n            setKept(`${stepKey}|${note}`)\n          }}\n          title=\"Add this as a slide of the open presentation\"\n          data-testid=\"spotlight-keep\"\n        >\n          {isKept ? <Check className=\"size-3.5\" /> : <Presentation className=\"size-3.5\" />}\n          {isKept ? 'Kept as slide' : 'Keep as slide'}\n        </button>\n        <Control label=\"Back to the document (Esc)\" onClick={actions.hide} testId=\"spotlight-close\">\n          <X className=\"size-4\" />\n        </Control>\n      </div>\n    </div>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/presentation/StageItem.js

@@ -3,7 +3,6 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { memo, useRef, useState } from "react";
 import { cn } from "@arbidocs/react/ui";
 import { ClipImage } from "./ClipImage.js";
-import { ClipViewControls } from "./ClipViewControls.js";
 import {
   frameHeight,
   moveFrame,
@@ -36,7 +35,6 @@ const StageItem = memo(function StageItem2({
 }) {
   const element = useRef(null);
   const gesture = useRef(null);
-  const [dragging, setDragging] = useState(false);
   const [reshape, setReshape] = useState(null);
   const shown = reshape ? { ...clip, ...reshape.shape } : clip;
   const box = reshape?.frame ?? frame;
@@ -86,7 +84,6 @@ const StageItem = memo(function StageItem2({
     const g = gesture.current;
     if (!g) return;
     if (!g.next) {
-      setDragging(true);
       host.dragging(true);
       if (element.current) element.current.style.willChange = "transform";
     }
@@ -117,7 +114,6 @@ const StageItem = memo(function StageItem2({
     }
     if (!g.next) return;
     setReshape(null);
-    setDragging(false);
     host.dragging(false);
     host.guides([]);
     host.commit(clip.id, g.next.frame, g.next.shape);
@@ -167,7 +163,6 @@ const StageItem = memo(function StageItem2({
             children: label
           }
         ),
-        selected && !dragging && /* @__PURE__ */ jsx(ClipViewControls, { clip }),
         selected && CORNERS.map(({ corner, left, top, cursor }) => /* @__PURE__ */ jsx(
           "div",
           {

package/dist/presentation/StageItem.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/presentation/StageItem.tsx"],
-  "sourcesContent": ["/**\n * One clip on the stage, and its own gestures: moved by dragging it, resized from a corner (its\n * shape kept), reshaped from a side's middle (more or less of the page that way), snapping to the\n * stage and to the other clips.\n *\n * Built for smooth dragging: while a clip is moved or resized nothing re-renders and nothing is\n * laid out again. Its element is moved by a GPU transform (translate, scale) once per animation\n * frame, and the new frame reaches the presentation once, when the drag ends. Only reshaping, which\n * changes what the clip shows, re-renders the clip itself (and nothing else). The component is\n * memoised: other clips, the slide's text and the other slides are untouched by its drags.\n */\n\nimport { memo, useRef, useState, type PointerEvent as ReactPointerEvent } from 'react'\nimport { cn } from '@arbidocs/react/ui'\nimport { ClipImage } from './ClipImage'\nimport { ClipViewControls } from './ClipViewControls'\nimport {\n  frameHeight,\n  moveFrame,\n  reshapeFrame,\n  resizeFrame,\n  type Clip,\n  type Corner,\n  type Edge,\n  type Frame,\n  type Guide,\n  type Placed,\n} from './model'\nimport { TEXT_COLORS, clipEdgeCss } from './theme'\n\ntype Kind = 'move' | Corner | Edge\n\nconst isEdge = (kind: Kind): kind is Edge =>\n  kind === 'n' || kind === 'e' || kind === 's' || kind === 'w'\n\n/** The handle on each side's middle: drag it to show more (or less) of the page that way. */\nconst EDGES: { edge: Edge; left: string; top: string; cursor: string; label: string }[] = [\n  { edge: 'n', left: '50%', top: '0%', cursor: 'ns-resize', label: 'top' },\n  { edge: 'e', left: '100%', top: '50%', cursor: 'ew-resize', label: 'right' },\n  { edge: 's', left: '50%', top: '100%', cursor: 'ns-resize', label: 'bottom' },\n  { edge: 'w', left: '0%', top: '50%', cursor: 'ew-resize', label: 'left' },\n]\n\nconst CORNERS: { corner: Corner; left: string; top: string; cursor: string }[] = [\n  { corner: 'nw', left: '0%', top: '0%', cursor: 'nwse-resize' },\n  { corner: 'ne', left: '100%', top: '0%', cursor: 'nesw-resize' },\n  { corner: 'sw', left: '0%', top: '100%', cursor: 'nesw-resize' },\n  { corner: 'se', left: '100%', top: '100%', cursor: 'nwse-resize' },\n]\n\nconst EDGE_CSS = clipEdgeCss()\n\n/** What a stage gives its clips (stable across renders: the clips are memoised). */\nexport interface StageItemHost {\n  /** The stage's box on screen, as a gesture begins. */\n  stageBox(): DOMRect | null\n  /** The other clips of the slide, as a gesture begins: what this one snaps to. */\n  others(clipId: string): Placed[]\n  select(clipId: string): void\n  /** The snap lines to draw while a clip is dragged (empty: none). */\n  guides(guides: Guide[]): void\n  /** A drag is on (the stage hides the selected clip's floating actions meanwhile). */\n  dragging(on: boolean): void\n  /** The drag's result, once it ends. */\n  commit(clipId: string, frame: Frame, shape?: Pick<Clip, 'rect' | 'aspect'>): void\n}\n\nexport interface StageItemProps {\n  clip: Clip\n  frame: Frame\n  editable: boolean\n  selected: boolean\n  dim: boolean\n  /** Its source label, under it (empty: none). */\n  label: string\n  host: StageItemHost\n}\n\ninterface Gesture {\n  kind: Kind\n  pointer: { x: number; y: number }\n  frame: Frame\n  shape: Pick<Clip, 'rect' | 'aspect'>\n  stage: DOMRect\n  others: Placed[]\n  /** The latest result, applied at the next animation frame and committed at the end. */\n  next: { frame: Frame; shape?: Pick<Clip, 'rect' | 'aspect'>; guides: Guide[] } | null\n  request: number | null\n  guidesKey: string\n}\n\nexport const StageItem = memo(function StageItem({\n  clip,\n  frame,\n  editable,\n  selected,\n  dim,\n  label,\n  host,\n}: StageItemProps) {\n  const element = useRef<HTMLDivElement>(null)\n  const gesture = useRef<Gesture | null>(null)\n  const [dragging, setDragging] = useState(false)\n  // Being reshaped: drawn as it will be (the one case that re-renders while dragging).\n  const [reshape, setReshape] = useState<{\n    frame: Frame\n    shape: Pick<Clip, 'rect' | 'aspect'>\n  } | null>(null)\n\n  const shown = reshape ? { ...clip, ...reshape.shape } : clip\n  const box = reshape?.frame ?? frame\n\n  const view = () => element.current?.ownerDocument.defaultView ?? window\n\n  const apply = () => {\n    const g = gesture.current\n    const el = element.current\n    if (!g) return\n    g.request = null\n    const next = g.next\n    if (!next || !el) return\n    if (next.shape) {\n      setReshape({ frame: next.frame, shape: next.shape })\n    } else {\n      // Moved or resized: a transform from where the drag began (top left fixed as the origin).\n      const dx = (next.frame.x - g.frame.x) * g.stage.width\n      const dy = (next.frame.y - g.frame.y) * g.stage.height\n      const scale = next.frame.w / g.frame.w\n      el.style.transform = `translate3d(${dx}px, ${dy}px, 0) scale(${scale})`\n    }\n    const key = next.guides.map((guide) => `${guide.axis}${guide.at}`).join()\n    if (key !== g.guidesKey) {\n      g.guidesKey = key\n      host.guides(next.guides)\n    }\n  }\n\n  const start = (event: ReactPointerEvent, kind: Kind) => {\n    if (!editable || event.button !== 0) return\n    const stage = host.stageBox()\n    if (!stage) return\n    event.preventDefault()\n    event.stopPropagation()\n    host.select(clip.id)\n    event.currentTarget.setPointerCapture(event.pointerId)\n    gesture.current = {\n      kind,\n      pointer: { x: event.clientX, y: event.clientY },\n      frame,\n      shape: { rect: clip.rect, aspect: clip.aspect },\n      stage,\n      others: host.others(clip.id),\n      next: null,\n      request: null,\n      guidesKey: '',\n    }\n  }\n\n  const move = (event: ReactPointerEvent) => {\n    const g = gesture.current\n    if (!g) return\n    if (!g.next) {\n      // The first move: the drag is on (handles and actions hide; the layer is promoted).\n      setDragging(true)\n      host.dragging(true)\n      if (element.current) element.current.style.willChange = 'transform'\n    }\n    const dx = (event.clientX - g.pointer.x) / g.stage.width\n    const dy = (event.clientY - g.pointer.y) / g.stage.height\n    // Alt (Option) places freely, without snapping.\n    const free = event.altKey\n    if (isEdge(g.kind)) {\n      const result = reshapeFrame(g.frame, g.shape, g.kind, dx, dy, g.others, free)\n      g.next = {\n        frame: result.frame,\n        shape: { rect: result.rect, aspect: result.aspect },\n        guides: result.guides,\n      }\n    } else {\n      g.next =\n        g.kind === 'move'\n          ? moveFrame(g.frame, g.shape.aspect, dx, dy, g.others, free)\n          : resizeFrame(g.frame, g.shape.aspect, g.kind, dx, dy, g.others, free)\n    }\n    g.request ??= view().requestAnimationFrame(apply)\n  }\n\n  const end = () => {\n    const g = gesture.current\n    gesture.current = null\n    if (!g) return\n    if (g.request !== null) view().cancelAnimationFrame(g.request)\n    const el = element.current\n    if (el) {\n      el.style.transform = ''\n      el.style.willChange = ''\n    }\n    if (!g.next) return // a click: the clip is selected, nothing moved\n    setReshape(null)\n    setDragging(false)\n    host.dragging(false)\n    host.guides([])\n    host.commit(clip.id, g.next.frame, g.next.shape)\n  }\n\n  return (\n    <div\n      ref={element}\n      className={cn(\n        'absolute origin-top-left',\n        // Lifted off the background (a picture that is part of the slide's design is not).\n        !clip.plain && 'rounded-[0.6cqw] shadow-[0_0.5cqw_1.6cqw_rgba(0,0,0,0.5)]',\n        editable && 'cursor-move touch-none',\n        selected && 'outline outline-2 outline-offset-2 outline-primary',\n        dim && 'opacity-30'\n      )}\n      style={{\n        left: `${box.x * 100}%`,\n        top: `${box.y * 100}%`,\n        width: `${box.w * 100}%`,\n        height: `${frameHeight(box, shown.aspect) * 100}%`,\n      }}\n      onPointerDown={(event) => start(event, 'move')}\n      onPointerMove={move}\n      onPointerUp={end}\n      onPointerCancel={end}\n      data-testid={`stage-item-${clip.id}`}\n    >\n      {/* Softly rounded, with a faint light edge: crisp on any background. */}\n      <div className={cn('absolute inset-0 overflow-hidden', !clip.plain && 'rounded-[0.6cqw]')}>\n        <ClipImage clip={shown} live={!editable} />\n        {/* A page's text fades out at the clip's edge rather than being sliced. */}\n        {clip.kind === 'pdf' && !clip.plain && (\n          <div\n            className=\"pointer-events-none absolute inset-0\"\n            style={{ background: EDGE_CSS }}\n            data-testid=\"stage-clip-edge\"\n          />\n        )}\n        {!clip.plain && (\n          <div className=\"pointer-events-none absolute inset-0 rounded-[0.6cqw] ring-1 ring-inset ring-white/15\" />\n        )}\n      </div>\n      {label && !clip.plain && (\n        // Under the clip, in the room the layout keeps (CAPTION_SPACE): never over it.\n        <div\n          className=\"pointer-events-none absolute left-0 top-full mt-[0.5cqw] max-w-full truncate text-[1.7cqw] leading-tight\"\n          style={{ color: TEXT_COLORS.muted }}\n        >\n          {label}\n        </div>\n      )}\n      {/* Scroll and zoom what it shows, on a layer over it (not while it is dragged). */}\n      {selected && !dragging && <ClipViewControls clip={clip} />}\n      {/* A handle on each corner (a small dot in a finger-sized target), and a bar on each side's\n          middle; their moves bubble to the clip's handlers while the gesture lasts. */}\n      {selected &&\n        CORNERS.map(({ corner, left, top, cursor }) => (\n          <div\n            key={corner}\n            className=\"absolute flex size-6 -translate-x-1/2 -translate-y-1/2 items-center justify-center pointer-coarse:size-11\"\n            style={{ left, top, cursor, touchAction: 'none' }}\n            onPointerDown={(event) => start(event, corner)}\n            aria-label={`Resize from the ${corner} corner`}\n            data-testid={`stage-item-resize-${corner}`}\n          >\n            <span className=\"pointer-events-none size-3 rounded-full border-2 border-primary bg-background\" />\n          </div>\n        ))}\n      {selected &&\n        EDGES.map(({ edge, left, top, cursor, label: side }) => (\n          <div\n            key={edge}\n            className=\"absolute flex size-6 -translate-x-1/2 -translate-y-1/2 items-center justify-center pointer-coarse:size-11\"\n            style={{ left, top, cursor, touchAction: 'none' }}\n            onPointerDown={(event) => start(event, edge)}\n            aria-label={`Show more or less at the ${side}`}\n            title=\"Drag to show more or less of the page\"\n            data-testid={`stage-item-reshape-${edge}`}\n          >\n            <span\n              className={cn(\n                'pointer-events-none rounded-full border-2 border-primary bg-background',\n                edge === 'n' || edge === 's' ? 'h-2 w-4' : 'h-4 w-2'\n              )}\n            />\n          </div>\n        ))}\n    </div>\n  )\n})\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * One clip on the stage, and its own gestures: moved by dragging it, resized from a corner (its\n * shape kept), reshaped from a side's middle (more or less of the page that way), snapping to the\n * stage and to the other clips.\n *\n * Built for smooth dragging: while a clip is moved or resized nothing re-renders and nothing is\n * laid out again. Its element is moved by a GPU transform (translate, scale) once per animation\n * frame, and the new frame reaches the presentation once, when the drag ends. Only reshaping, which\n * changes what the clip shows, re-renders the clip itself (and nothing else). The component is\n * memoised: other clips, the slide's text and the other slides are untouched by its drags.\n */\n\nimport { memo, useRef, useState, type PointerEvent as ReactPointerEvent } from 'react'\nimport { cn } from '@arbidocs/react/ui'\nimport { ClipImage } from './ClipImage'\nimport {\n  frameHeight,\n  moveFrame,\n  reshapeFrame,\n  resizeFrame,\n  type Clip,\n  type Corner,\n  type Edge,\n  type Frame,\n  type Guide,\n  type Placed,\n} from './model'\nimport { TEXT_COLORS, clipEdgeCss } from './theme'\n\ntype Kind = 'move' | Corner | Edge\n\nconst isEdge = (kind: Kind): kind is Edge =>\n  kind === 'n' || kind === 'e' || kind === 's' || kind === 'w'\n\n/** The handle on each side's middle: drag it to show more (or less) of the page that way. */\nconst EDGES: { edge: Edge; left: string; top: string; cursor: string; label: string }[] = [\n  { edge: 'n', left: '50%', top: '0%', cursor: 'ns-resize', label: 'top' },\n  { edge: 'e', left: '100%', top: '50%', cursor: 'ew-resize', label: 'right' },\n  { edge: 's', left: '50%', top: '100%', cursor: 'ns-resize', label: 'bottom' },\n  { edge: 'w', left: '0%', top: '50%', cursor: 'ew-resize', label: 'left' },\n]\n\nconst CORNERS: { corner: Corner; left: string; top: string; cursor: string }[] = [\n  { corner: 'nw', left: '0%', top: '0%', cursor: 'nwse-resize' },\n  { corner: 'ne', left: '100%', top: '0%', cursor: 'nesw-resize' },\n  { corner: 'sw', left: '0%', top: '100%', cursor: 'nesw-resize' },\n  { corner: 'se', left: '100%', top: '100%', cursor: 'nwse-resize' },\n]\n\nconst EDGE_CSS = clipEdgeCss()\n\n/** What a stage gives its clips (stable across renders: the clips are memoised). */\nexport interface StageItemHost {\n  /** The stage's box on screen, as a gesture begins. */\n  stageBox(): DOMRect | null\n  /** The other clips of the slide, as a gesture begins: what this one snaps to. */\n  others(clipId: string): Placed[]\n  select(clipId: string): void\n  /** The snap lines to draw while a clip is dragged (empty: none). */\n  guides(guides: Guide[]): void\n  /** A drag is on (the stage hides the selected clip's floating actions meanwhile). */\n  dragging(on: boolean): void\n  /** The drag's result, once it ends. */\n  commit(clipId: string, frame: Frame, shape?: Pick<Clip, 'rect' | 'aspect'>): void\n}\n\nexport interface StageItemProps {\n  clip: Clip\n  frame: Frame\n  editable: boolean\n  selected: boolean\n  dim: boolean\n  /** Its source label, under it (empty: none). */\n  label: string\n  host: StageItemHost\n}\n\ninterface Gesture {\n  kind: Kind\n  pointer: { x: number; y: number }\n  frame: Frame\n  shape: Pick<Clip, 'rect' | 'aspect'>\n  stage: DOMRect\n  others: Placed[]\n  /** The latest result, applied at the next animation frame and committed at the end. */\n  next: { frame: Frame; shape?: Pick<Clip, 'rect' | 'aspect'>; guides: Guide[] } | null\n  request: number | null\n  guidesKey: string\n}\n\nexport const StageItem = memo(function StageItem({\n  clip,\n  frame,\n  editable,\n  selected,\n  dim,\n  label,\n  host,\n}: StageItemProps) {\n  const element = useRef<HTMLDivElement>(null)\n  const gesture = useRef<Gesture | null>(null)\n  // Being reshaped: drawn as it will be (the one case that re-renders while dragging).\n  const [reshape, setReshape] = useState<{\n    frame: Frame\n    shape: Pick<Clip, 'rect' | 'aspect'>\n  } | null>(null)\n\n  const shown = reshape ? { ...clip, ...reshape.shape } : clip\n  const box = reshape?.frame ?? frame\n\n  const view = () => element.current?.ownerDocument.defaultView ?? window\n\n  const apply = () => {\n    const g = gesture.current\n    const el = element.current\n    if (!g) return\n    g.request = null\n    const next = g.next\n    if (!next || !el) return\n    if (next.shape) {\n      setReshape({ frame: next.frame, shape: next.shape })\n    } else {\n      // Moved or resized: a transform from where the drag began (top left fixed as the origin).\n      const dx = (next.frame.x - g.frame.x) * g.stage.width\n      const dy = (next.frame.y - g.frame.y) * g.stage.height\n      const scale = next.frame.w / g.frame.w\n      el.style.transform = `translate3d(${dx}px, ${dy}px, 0) scale(${scale})`\n    }\n    const key = next.guides.map((guide) => `${guide.axis}${guide.at}`).join()\n    if (key !== g.guidesKey) {\n      g.guidesKey = key\n      host.guides(next.guides)\n    }\n  }\n\n  const start = (event: ReactPointerEvent, kind: Kind) => {\n    if (!editable || event.button !== 0) return\n    const stage = host.stageBox()\n    if (!stage) return\n    event.preventDefault()\n    event.stopPropagation()\n    host.select(clip.id)\n    event.currentTarget.setPointerCapture(event.pointerId)\n    gesture.current = {\n      kind,\n      pointer: { x: event.clientX, y: event.clientY },\n      frame,\n      shape: { rect: clip.rect, aspect: clip.aspect },\n      stage,\n      others: host.others(clip.id),\n      next: null,\n      request: null,\n      guidesKey: '',\n    }\n  }\n\n  const move = (event: ReactPointerEvent) => {\n    const g = gesture.current\n    if (!g) return\n    if (!g.next) {\n      // The first move: the drag is on (handles and actions hide; the layer is promoted).\n      host.dragging(true)\n      if (element.current) element.current.style.willChange = 'transform'\n    }\n    const dx = (event.clientX - g.pointer.x) / g.stage.width\n    const dy = (event.clientY - g.pointer.y) / g.stage.height\n    // Alt (Option) places freely, without snapping.\n    const free = event.altKey\n    if (isEdge(g.kind)) {\n      const result = reshapeFrame(g.frame, g.shape, g.kind, dx, dy, g.others, free)\n      g.next = {\n        frame: result.frame,\n        shape: { rect: result.rect, aspect: result.aspect },\n        guides: result.guides,\n      }\n    } else {\n      g.next =\n        g.kind === 'move'\n          ? moveFrame(g.frame, g.shape.aspect, dx, dy, g.others, free)\n          : resizeFrame(g.frame, g.shape.aspect, g.kind, dx, dy, g.others, free)\n    }\n    g.request ??= view().requestAnimationFrame(apply)\n  }\n\n  const end = () => {\n    const g = gesture.current\n    gesture.current = null\n    if (!g) return\n    if (g.request !== null) view().cancelAnimationFrame(g.request)\n    const el = element.current\n    if (el) {\n      el.style.transform = ''\n      el.style.willChange = ''\n    }\n    if (!g.next) return // a click: the clip is selected, nothing moved\n    setReshape(null)\n    host.dragging(false)\n    host.guides([])\n    host.commit(clip.id, g.next.frame, g.next.shape)\n  }\n\n  return (\n    <div\n      ref={element}\n      className={cn(\n        'absolute origin-top-left',\n        // Lifted off the background (a picture that is part of the slide's design is not).\n        !clip.plain && 'rounded-[0.6cqw] shadow-[0_0.5cqw_1.6cqw_rgba(0,0,0,0.5)]',\n        editable && 'cursor-move touch-none',\n        selected && 'outline outline-2 outline-offset-2 outline-primary',\n        dim && 'opacity-30'\n      )}\n      style={{\n        left: `${box.x * 100}%`,\n        top: `${box.y * 100}%`,\n        width: `${box.w * 100}%`,\n        height: `${frameHeight(box, shown.aspect) * 100}%`,\n      }}\n      onPointerDown={(event) => start(event, 'move')}\n      onPointerMove={move}\n      onPointerUp={end}\n      onPointerCancel={end}\n      data-testid={`stage-item-${clip.id}`}\n    >\n      {/* Softly rounded, with a faint light edge: crisp on any background. */}\n      <div className={cn('absolute inset-0 overflow-hidden', !clip.plain && 'rounded-[0.6cqw]')}>\n        <ClipImage clip={shown} live={!editable} />\n        {/* A page's text fades out at the clip's edge rather than being sliced. */}\n        {clip.kind === 'pdf' && !clip.plain && (\n          <div\n            className=\"pointer-events-none absolute inset-0\"\n            style={{ background: EDGE_CSS }}\n            data-testid=\"stage-clip-edge\"\n          />\n        )}\n        {!clip.plain && (\n          <div className=\"pointer-events-none absolute inset-0 rounded-[0.6cqw] ring-1 ring-inset ring-white/15\" />\n        )}\n      </div>\n      {label && !clip.plain && (\n        // Under the clip, in the room the layout keeps (CAPTION_SPACE): never over it.\n        <div\n          className=\"pointer-events-none absolute left-0 top-full mt-[0.5cqw] max-w-full truncate text-[1.7cqw] leading-tight\"\n          style={{ color: TEXT_COLORS.muted }}\n        >\n          {label}\n        </div>\n      )}\n      {/* A handle on each corner (a small dot in a finger-sized target), and a bar on each side's\n          middle; their moves bubble to the clip's handlers while the gesture lasts. */}\n      {selected &&\n        CORNERS.map(({ corner, left, top, cursor }) => (\n          <div\n            key={corner}\n            className=\"absolute flex size-6 -translate-x-1/2 -translate-y-1/2 items-center justify-center pointer-coarse:size-11\"\n            style={{ left, top, cursor, touchAction: 'none' }}\n            onPointerDown={(event) => start(event, corner)}\n            aria-label={`Resize from the ${corner} corner`}\n            data-testid={`stage-item-resize-${corner}`}\n          >\n            <span className=\"pointer-events-none size-3 rounded-full border-2 border-primary bg-background\" />\n          </div>\n        ))}\n      {selected &&\n        EDGES.map(({ edge, left, top, cursor, label: side }) => (\n          <div\n            key={edge}\n            className=\"absolute flex size-6 -translate-x-1/2 -translate-y-1/2 items-center justify-center pointer-coarse:size-11\"\n            style={{ left, top, cursor, touchAction: 'none' }}\n            onPointerDown={(event) => start(event, edge)}\n            aria-label={`Show more or less at the ${side}`}\n            title=\"Drag to show more or less of the page\"\n            data-testid={`stage-item-reshape-${edge}`}\n          >\n            <span\n              className={cn(\n                'pointer-events-none rounded-full border-2 border-primary bg-background',\n                edge === 'n' || edge === 's' ? 'h-2 w-4' : 'h-4 w-2'\n              )}\n            />\n          </div>\n        ))}\n    </div>\n  )\n})\n"],
+  "mappings": "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",
   "names": ["StageItem"]
 }

package/dist/presentation/passage-clip.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Clipping a passage with one click: the parser places each passage on its page (`page_bbox`,
+ * fractions of the page), so in clip mode the passage under the pointer is outlined and a click
+ * clips exactly its box, with a little room around it — the same room the server leaves when it
+ * clips a passage for a slide (`PASSAGE_MARGIN_X` / `_Y` in its presentation tool).
+ */
+import type { Rect } from './model';
+/** Room kept around a clipped passage, as fractions of the page's width and height. */
+export declare const PASSAGE_MARGIN_X = 0.015;
+export declare const PASSAGE_MARGIN_Y = 0.008;
+/** A passage's box `[x0, y0, x1, y1]` as the area to clip: with its margin, kept on the page. */
+export declare function passageClipRect([x0, y0, x1, y1]: readonly [number, number, number, number]): Rect;
+/**
+ * The passage at a point of the page (fractions), if any: the smallest one holding it, so a
+ * caption inside a figure's box wins over the figure.
+ */
+export declare function passageAt(passages: readonly Rect[], x: number, y: number): Rect | null;

package/dist/presentation/passage-clip.js

@@ -0,0 +1,25 @@
+"use client";
+const PASSAGE_MARGIN_X = 0.015;
+const PASSAGE_MARGIN_Y = 8e-3;
+function passageClipRect([x0, y0, x1, y1]) {
+  const left = Math.max(0, x0 - PASSAGE_MARGIN_X);
+  const top = Math.max(0, y0 - PASSAGE_MARGIN_Y);
+  const right = Math.min(1, x1 + PASSAGE_MARGIN_X);
+  const bottom = Math.min(1, y1 + PASSAGE_MARGIN_Y);
+  return { x: left, y: top, w: right - left, h: bottom - top };
+}
+function passageAt(passages, x, y) {
+  let best = null;
+  for (const passage of passages) {
+    const inside = x >= passage.x && x <= passage.x + passage.w && y >= passage.y && y <= passage.y + passage.h;
+    if (inside && (!best || passage.w * passage.h < best.w * best.h)) best = passage;
+  }
+  return best;
+}
+export {
+  PASSAGE_MARGIN_X,
+  PASSAGE_MARGIN_Y,
+  passageAt,
+  passageClipRect
+};
+//# sourceMappingURL=passage-clip.js.map

package/dist/presentation/passage-clip.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/presentation/passage-clip.ts"],
+  "sourcesContent": ["/**\n * Clipping a passage with one click: the parser places each passage on its page (`page_bbox`,\n * fractions of the page), so in clip mode the passage under the pointer is outlined and a click\n * clips exactly its box, with a little room around it \u2014 the same room the server leaves when it\n * clips a passage for a slide (`PASSAGE_MARGIN_X` / `_Y` in its presentation tool).\n */\n\nimport type { Rect } from './model'\n\n/** Room kept around a clipped passage, as fractions of the page's width and height. */\nexport const PASSAGE_MARGIN_X = 0.015\nexport const PASSAGE_MARGIN_Y = 0.008\n\n/** A passage's box `[x0, y0, x1, y1]` as the area to clip: with its margin, kept on the page. */\nexport function passageClipRect([x0, y0, x1, y1]: readonly [number, number, number, number]): Rect {\n  const left = Math.max(0, x0 - PASSAGE_MARGIN_X)\n  const top = Math.max(0, y0 - PASSAGE_MARGIN_Y)\n  const right = Math.min(1, x1 + PASSAGE_MARGIN_X)\n  const bottom = Math.min(1, y1 + PASSAGE_MARGIN_Y)\n  return { x: left, y: top, w: right - left, h: bottom - top }\n}\n\n/**\n * The passage at a point of the page (fractions), if any: the smallest one holding it, so a\n * caption inside a figure's box wins over the figure.\n */\nexport function passageAt(passages: readonly Rect[], x: number, y: number): Rect | null {\n  let best: Rect | null = null\n  for (const passage of passages) {\n    const inside =\n      x >= passage.x && x <= passage.x + passage.w && y >= passage.y && y <= passage.y + passage.h\n    if (inside && (!best || passage.w * passage.h < best.w * best.h)) best = passage\n  }\n  return best\n}\n"],
+  "mappings": ";AAUO,MAAM,mBAAmB;AACzB,MAAM,mBAAmB;AAGzB,SAAS,gBAAgB,CAAC,IAAI,IAAI,IAAI,EAAE,GAAoD;AACjG,QAAM,OAAO,KAAK,IAAI,GAAG,KAAK,gBAAgB;AAC9C,QAAM,MAAM,KAAK,IAAI,GAAG,KAAK,gBAAgB;AAC7C,QAAM,QAAQ,KAAK,IAAI,GAAG,KAAK,gBAAgB;AAC/C,QAAM,SAAS,KAAK,IAAI,GAAG,KAAK,gBAAgB;AAChD,SAAO,EAAE,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,MAAM,GAAG,SAAS,IAAI;AAC7D;AAMO,SAAS,UAAU,UAA2B,GAAW,GAAwB;AACtF,MAAI,OAAoB;AACxB,aAAW,WAAW,UAAU;AAC9B,UAAM,SACJ,KAAK,QAAQ,KAAK,KAAK,QAAQ,IAAI,QAAQ,KAAK,KAAK,QAAQ,KAAK,KAAK,QAAQ,IAAI,QAAQ;AAC7F,QAAI,WAAW,CAAC,QAAQ,QAAQ,IAAI,QAAQ,IAAI,KAAK,IAAI,KAAK,GAAI,QAAO;AAAA,EAC3E;AACA,SAAO;AACT;",
+  "names": []
+}

package/dist/presentation/spotlight.d.ts

@@ -0,0 +1,58 @@
+/**
+ * The spotlight: clips gathered in the document viewer (from one document or several) and shown,
+ * on request, as a slide over the viewer itself — the same window, so a call sharing it keeps
+ * sharing it. It is transient: nothing reaches the presentation unless "Keep as slide" (or "Add to
+ * the presentation") puts it there.
+ *
+ * Kept in memory only, like the presentation (a clip holds its decrypted file), and cleared when
+ * another user signs in (`owner`).
+ */
+import { type Clip, type Slide } from './model';
+import { reserveOf, type NewClip } from './store';
+/** A spotlight slide holds this many clips at most; more are shown on further slides. */
+export declare const SPOTLIGHT_PER_SLIDE = 4;
+interface SpotlightState {
+    clips: Clip[];
+    /** A line of text shown as the spotlight's title (empty: none). */
+    note: string;
+    /** The spotlight is on screen. */
+    showing: boolean;
+    /** Which of its steps (`spotlightSteps`) is shown. */
+    step: number;
+    /** The user the clips were gathered by. */
+    owner: string | null;
+    /**
+     * The viewer's Clip mode is on: kept here, not in the viewer, so it stays on as the viewer opens
+     * one document after another.
+     */
+    clipping: boolean;
+}
+interface SpotlightActions {
+    gather(clip: NewClip): string;
+    remove(clipId: string): void;
+    setNote(note: string): void;
+    show(): void;
+    hide(): void;
+    goTo(step: number): void;
+    /** The step on screen, as a slide of the open presentation (after its current slide). */
+    keep(): void;
+    /** The gathered clips, into the presentation's tray (not placed); the spotlight is emptied. */
+    addToTray(): void;
+    clear(): void;
+    /** Gathering for this user: another's clips are dropped. */
+    own(userId: string | null): void;
+    setClipping(on: boolean): void;
+}
+export type SpotlightStore = SpotlightState & SpotlightActions;
+/**
+ * What ← → step through: the clips together (up to four a slide), and, where a slide shows more
+ * than one, each of them alone after it. Each step lists clip ids.
+ */
+export declare function spotlightSteps(clips: readonly Pick<Clip, 'id'>[]): string[][];
+/**
+ * A step as a slide, arranged as the presentation arranges one (`autoLayout`: two tall clips go
+ * side by side, two wide ones stack), with the note as its title and the presentation's look.
+ */
+export declare function spotlightSlide(clips: readonly Clip[], ids: readonly string[], note: string, look: Parameters<typeof reserveOf>[1]): Slide;
+export declare const useSpotlight: import("zustand").UseBoundStore<import("zustand").StoreApi<SpotlightStore>>;
+export {};