@arbidocs/blocks 0.5.120 → 0.5.122

package/dist/presentation/PresentControls.js

@@ -0,0 +1,117 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight, EyeOff, Maximize, Square } from "lucide-react";
+import { cn } from "@arbidocs/react/ui";
+import { usePresentation } from "./store.js";
+import { toggleFullscreen } from "./usePresenterKeys.js";
+const CONTROL = "inline-flex size-8 items-center justify-center rounded-full text-white/85 hover:bg-white/15 hover:text-white disabled:opacity-30 disabled:hover:bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60 pointer-coarse:size-11";
+function Control({
+  label,
+  onClick,
+  disabled,
+  children,
+  testId
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: CONTROL,
+      title: label,
+      "aria-label": label,
+      disabled,
+      onClick: (event) => {
+        event.stopPropagation();
+        onClick();
+      },
+      "data-testid": testId,
+      children
+    }
+  );
+}
+function PresentControls({ view, shown }) {
+  const current = usePresentation((s) => s.current);
+  const count = usePresentation((s) => s.slides.length);
+  const blank = usePresentation((s) => s.blank);
+  const actions = usePresentation.getState();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "absolute bottom-4 left-4 z-30 flex items-center gap-0.5 rounded-full bg-black/60 p-1 text-white shadow-lg backdrop-blur transition-opacity duration-300",
+        shown ? "opacity-100" : "pointer-events-none opacity-0"
+      ),
+      onPointerDown: (event) => event.stopPropagation(),
+      onDoubleClick: (event) => event.stopPropagation(),
+      role: "toolbar",
+      "aria-label": "Slideshow",
+      "data-testid": "present-controls",
+      children: [
+        /* @__PURE__ */ jsx(
+          Control,
+          {
+            label: "Previous slide (\u2190)",
+            onClick: () => actions.goTo(current - 1),
+            disabled: current === 0,
+            testId: "present-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": "present-position",
+            children: [
+              current + 1,
+              " / ",
+              count
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Control,
+          {
+            label: "Next slide (\u2192, or click the slide)",
+            onClick: () => actions.goTo(current + 1),
+            disabled: current >= count - 1,
+            testId: "present-next",
+            children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "mx-1 h-4 w-px bg-white/25" }),
+        /* @__PURE__ */ jsx(
+          Control,
+          {
+            label: blank ? "Show the slide (B)" : "Blank the screen (B)",
+            onClick: () => actions.setBlank(!blank),
+            testId: "present-blank",
+            children: /* @__PURE__ */ jsx(EyeOff, { className: cn("size-4", blank && "text-amber-300") })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Control,
+          {
+            label: "Full screen (F)",
+            onClick: () => view && toggleFullscreen(view),
+            testId: "present-fullscreen",
+            children: /* @__PURE__ */ jsx(Maximize, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Control,
+          {
+            label: "Stop presenting (Esc)",
+            onClick: () => actions.setPresenting(false),
+            testId: "present-stop",
+            children: /* @__PURE__ */ jsx(Square, { className: "size-3.5 fill-current" })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  PresentControls
+};
+//# sourceMappingURL=PresentControls.js.map

package/dist/presentation/PresentControls.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/presentation/PresentControls.tsx"],
+  "sourcesContent": ["/**\n * The presented slides' controls, bottom left: previous and next slide (with where you are),\n * blank, full screen and stop. Like a slideshow's, they show while the pointer moves (or a key is\n * pressed) and fade after a moment, with the pointer, so a shared screen rarely shows them.\n */\n\nimport type { ReactNode } from 'react'\nimport { ChevronLeft, ChevronRight, EyeOff, Maximize, Square } from 'lucide-react'\nimport { cn } from '@arbidocs/react/ui'\nimport { usePresentation } from './store'\nimport { toggleFullscreen } from './usePresenterKeys'\n\nconst CONTROL =\n  'inline-flex size-8 items-center justify-center rounded-full text-white/85 hover:bg-white/15 hover:text-white disabled:opacity-30 disabled:hover:bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60 pointer-coarse:size-11'\n\nfunction Control({\n  label,\n  onClick,\n  disabled,\n  children,\n  testId,\n}: {\n  label: string\n  onClick: () => void\n  disabled?: boolean\n  children: ReactNode\n  testId: string\n}) {\n  return (\n    <button\n      type=\"button\"\n      className={CONTROL}\n      title={label}\n      aria-label={label}\n      disabled={disabled}\n      onClick={(event) => {\n        // A click on the controls is not a click on the slide (which goes to the next one).\n        event.stopPropagation()\n        onClick()\n      }}\n      data-testid={testId}\n    >\n      {children}\n    </button>\n  )\n}\n\nexport interface PresentControlsProps {\n  /** The window presented in (full screen is that window's). */\n  view: Window | null\n  shown: boolean\n}\n\nexport function PresentControls({ view, shown }: PresentControlsProps) {\n  const current = usePresentation((s) => s.current)\n  const count = usePresentation((s) => s.slides.length)\n  const blank = usePresentation((s) => s.blank)\n  const actions = usePresentation.getState()\n  return (\n    <div\n      className={cn(\n        'absolute bottom-4 left-4 z-30 flex items-center gap-0.5 rounded-full bg-black/60 p-1 text-white shadow-lg backdrop-blur transition-opacity duration-300',\n        shown ? 'opacity-100' : 'pointer-events-none opacity-0'\n      )}\n      onPointerDown={(event) => event.stopPropagation()}\n      onDoubleClick={(event) => event.stopPropagation()}\n      role=\"toolbar\"\n      aria-label=\"Slideshow\"\n      data-testid=\"present-controls\"\n    >\n      <Control\n        label=\"Previous slide (\u2190)\"\n        onClick={() => actions.goTo(current - 1)}\n        disabled={current === 0}\n        testId=\"present-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=\"present-position\"\n      >\n        {current + 1} / {count}\n      </span>\n      <Control\n        label=\"Next slide (\u2192, or click the slide)\"\n        onClick={() => actions.goTo(current + 1)}\n        disabled={current >= count - 1}\n        testId=\"present-next\"\n      >\n        <ChevronRight className=\"size-4\" />\n      </Control>\n      <div className=\"mx-1 h-4 w-px bg-white/25\" />\n      <Control\n        label={blank ? 'Show the slide (B)' : 'Blank the screen (B)'}\n        onClick={() => actions.setBlank(!blank)}\n        testId=\"present-blank\"\n      >\n        <EyeOff className={cn('size-4', blank && 'text-amber-300')} />\n      </Control>\n      <Control\n        label=\"Full screen (F)\"\n        onClick={() => view && toggleFullscreen(view)}\n        testId=\"present-fullscreen\"\n      >\n        <Maximize className=\"size-4\" />\n      </Control>\n      <Control\n        label=\"Stop presenting (Esc)\"\n        onClick={() => actions.setPresenting(false)}\n        testId=\"present-stop\"\n      >\n        <Square className=\"size-3.5 fill-current\" />\n      </Control>\n    </div>\n  )\n}\n"],
+  "mappings": ";AA6BI,cAiDE,YAjDF;AAtBJ,SAAS,aAAa,cAAc,QAAQ,UAAU,cAAc;AACpE,SAAS,UAAU;AACnB,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AAEjC,MAAM,UACJ;AAEF,SAAS,QAAQ;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW;AAAA,MACX,OAAO;AAAA,MACP,cAAY;AAAA,MACZ;AAAA,MACA,SAAS,CAAC,UAAU;AAElB,cAAM,gBAAgB;AACtB,gBAAQ;AAAA,MACV;AAAA,MACA,eAAa;AAAA,MAEZ;AAAA;AAAA,EACH;AAEJ;AAQO,SAAS,gBAAgB,EAAE,MAAM,MAAM,GAAyB;AACrE,QAAM,UAAU,gBAAgB,CAAC,MAAM,EAAE,OAAO;AAChD,QAAM,QAAQ,gBAAgB,CAAC,MAAM,EAAE,OAAO,MAAM;AACpD,QAAM,QAAQ,gBAAgB,CAAC,MAAM,EAAE,KAAK;AAC5C,QAAM,UAAU,gBAAgB,SAAS;AACzC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,QAAQ,gBAAgB;AAAA,MAC1B;AAAA,MACA,eAAe,CAAC,UAAU,MAAM,gBAAgB;AAAA,MAChD,eAAe,CAAC,UAAU,MAAM,gBAAgB;AAAA,MAChD,MAAK;AAAA,MACL,cAAW;AAAA,MACX,eAAY;AAAA,MAEZ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAM;AAAA,YACN,SAAS,MAAM,QAAQ,KAAK,UAAU,CAAC;AAAA,YACvC,UAAU,YAAY;AAAA,YACtB,QAAO;AAAA,YAEP,8BAAC,eAAY,WAAU,UAAS;AAAA;AAAA,QAClC;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,eAAY;AAAA,YAEX;AAAA,wBAAU;AAAA,cAAE;AAAA,cAAI;AAAA;AAAA;AAAA,QACnB;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,OAAM;AAAA,YACN,SAAS,MAAM,QAAQ,KAAK,UAAU,CAAC;AAAA,YACvC,UAAU,WAAW,QAAQ;AAAA,YAC7B,QAAO;AAAA,YAEP,8BAAC,gBAAa,WAAU,UAAS;AAAA;AAAA,QACnC;AAAA,QACA,oBAAC,SAAI,WAAU,6BAA4B;AAAA,QAC3C;AAAA,UAAC;AAAA;AAAA,YACC,OAAO,QAAQ,uBAAuB;AAAA,YACtC,SAAS,MAAM,QAAQ,SAAS,CAAC,KAAK;AAAA,YACtC,QAAO;AAAA,YAEP,8BAAC,UAAO,WAAW,GAAG,UAAU,SAAS,gBAAgB,GAAG;AAAA;AAAA,QAC9D;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,OAAM;AAAA,YACN,SAAS,MAAM,QAAQ,iBAAiB,IAAI;AAAA,YAC5C,QAAO;AAAA,YAEP,8BAAC,YAAS,WAAU,UAAS;AAAA;AAAA,QAC/B;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,OAAM;AAAA,YACN,SAAS,MAAM,QAAQ,cAAc,KAAK;AAAA,YAC1C,QAAO;AAAA,YAEP,8BAAC,UAAO,WAAU,yBAAwB;AAAA;AAAA,QAC5C;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "names": []
+}

package/dist/presentation/PresentationStage.d.ts

@@ -0,0 +1,32 @@
+/**
+ * The 16:9 stage: a slide's clips in their frames, its title, points and logo, as large as the
+ * container allows. Presenting shows it bare; the editor's copy is `editable`: each clip
+ * (`StageItem`) is moved, resized and reshaped by dragging, snapping with guide lines; clips are
+ * selected for their floating actions, and clips dragged from the tray are dropped onto it.
+ *
+ * A slide's stage re-renders only when its slide (or the clips, theme or labels) change; a clip's
+ * drag re-renders nothing here but the guides and, at its start and end, the floating actions.
+ */
+import { type ReactNode } from 'react';
+import { type SlideTextEditing } from './SlideDecor';
+import { type Guide } from './model';
+export interface PresentationStageProps {
+    editable?: boolean;
+    /** The slide shown (default: the current one). */
+    slideIndex?: number;
+    selected?: string | null;
+    onSelect?: (clipId: string | null) => void;
+    /** Offered on a selected image clip: make a new version of it. */
+    onEditImage?: (clipId: string) => void;
+    /** Offered on a selected image clip: choose the part of the image it shows. */
+    onCropImage?: (clipId: string) => void;
+    /** Typing the slide's title and points on the slide itself (the editor's stages). */
+    textEditing?: SlideTextEditing;
+    /** Over the slide (e.g. the editor's hover actions). */
+    overlay?: ReactNode;
+    className?: string;
+}
+export interface GuideLayerHandle {
+    set(guides: Guide[]): void;
+}
+export declare function PresentationStage({ editable, slideIndex, selected, onSelect, onEditImage, onCropImage, textEditing, overlay, className, }: PresentationStageProps): import("react").JSX.Element;

package/dist/presentation/PresentationStage.js

@@ -0,0 +1,232 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef,
+  memo,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { cn } from "@arbidocs/react/ui";
+import { ClipActionBar } from "./ClipActionBar.js";
+import { SlideDecor } from "./SlideDecor.js";
+import { StageItem } from "./StageItem.js";
+import { StageBox } from "./StageBox.js";
+import { BoxActionBar } from "./BoxActionBar.js";
+import { FONTS, backgroundCss, slideBackgroundCss } from "./theme.js";
+import { clipLabel } from "./model.js";
+import { usePresentation } from "./store.js";
+import { DROP_ATTRIBUTE } from "./useClipDrag.js";
+const GuideLayer = memo(
+  forwardRef(function GuideLayer2(_, ref) {
+    const [guides, setGuides] = useState([]);
+    useImperativeHandle(ref, () => ({ set: setGuides }), []);
+    return /* @__PURE__ */ jsx(Fragment, { children: guides.map((guide) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "pointer-events-none absolute z-10 bg-primary",
+        style: guide.axis === "x" ? { left: `${guide.at * 100}%`, top: 0, bottom: 0, width: 1 } : { top: `${guide.at * 100}%`, left: 0, right: 0, height: 1 },
+        "data-testid": `stage-guide-${guide.axis}`
+      },
+      `${guide.axis}-${guide.at}`
+    )) });
+  })
+);
+function PresentationStage({
+  editable = false,
+  slideIndex,
+  selected = null,
+  onSelect,
+  onEditImage,
+  onCropImage,
+  textEditing,
+  overlay,
+  className
+}) {
+  const index = usePresentation((s) => slideIndex ?? s.current);
+  const slide = usePresentation((s) => s.slides[index]);
+  const clips = usePresentation((s) => s.clips);
+  const blank = usePresentation((s) => s.blank && !editable);
+  const captions = usePresentation((s) => s.captions);
+  const columnValues = usePresentation((s) => s.columnValues);
+  const theme = usePresentation((s) => s.theme);
+  const logoImage = usePresentation((s) => s.logoImage);
+  const media = usePresentation((s) => s.media);
+  const stageRef = useRef(null);
+  const guideLayer = useRef(null);
+  const dropping = usePresentation((s) => editable && s.dragging !== null);
+  const [dragging, setDragging] = useState(false);
+  const latest = useRef({ slide, clips, index, onSelect });
+  latest.current = { slide, clips, index, onSelect };
+  const host = useMemo(
+    () => ({
+      stageBox: () => stageRef.current?.getBoundingClientRect() ?? null,
+      others: (clipId) => {
+        const { slide: current, clips: all } = latest.current;
+        return (current?.items ?? []).filter((item) => item.clipId !== clipId).map((item) => ({
+          frame: item.frame,
+          aspect: all.find((clip) => clip.id === item.clipId)?.aspect ?? 1
+        }));
+      },
+      select: (clipId) => {
+        usePresentation.getState().goTo(latest.current.index);
+        latest.current.onSelect?.(clipId);
+      },
+      guides: (guides) => guideLayer.current?.set(guides),
+      dragging: setDragging,
+      commit: (clipId, frame, shape) => {
+        const state = usePresentation.getState();
+        state.goTo(latest.current.index);
+        if (shape) state.reshapeClip(clipId, frame, shape.rect, shape.aspect);
+        else state.setFrame(clipId, frame);
+      }
+    }),
+    []
+  );
+  const boxHost = useMemo(
+    () => ({
+      stageBox: () => stageRef.current?.getBoundingClientRect() ?? null,
+      select: (boxId) => {
+        usePresentation.getState().goTo(latest.current.index);
+        latest.current.onSelect?.(boxId);
+      },
+      commit: (boxId, frame) => usePresentation.getState().updateBox(boxId, (box) => ({ ...box, frame })),
+      setText: (boxId, text) => usePresentation.getState().setBoxText(boxId, text)
+    }),
+    []
+  );
+  const font = FONTS[theme.font].css;
+  const boxes = slide?.boxes ?? [];
+  const selectedBox = selected ? boxes.find((box) => box.id === selected) : void 0;
+  const renderBoxes = (front) => boxes.filter((box) => !!box.front === front).map((box) => /* @__PURE__ */ jsx(
+    StageBox,
+    {
+      box,
+      font,
+      editable,
+      selected: editable && selected === box.id,
+      host: boxHost
+    },
+    box.id
+  ));
+  const clipOf = (id) => clips.find((clip) => clip.id === id);
+  const selectedFrame = selected ? slide?.items.find((item) => item.clipId === selected)?.frame : void 0;
+  useEffect(() => {
+    const stage = stageRef.current;
+    const view = stage?.ownerDocument.defaultView;
+    if (!editable || !selected || !stage || !view) return;
+    let sum = { x: 0, y: 0 };
+    let request = null;
+    const onWheel = (event) => {
+      const item = event.target?.closest?.(
+        `[data-testid="stage-item-${selected}"]`
+      );
+      const clip = usePresentation.getState().clips.find((entry) => entry.id === selected);
+      if (!item || !clip) return;
+      event.preventDefault();
+      const box = item.getBoundingClientRect();
+      const horizontal = event.shiftKey && !event.deltaX;
+      const deltaX = horizontal ? event.deltaY : event.deltaX;
+      const deltaY = horizontal ? 0 : event.deltaY;
+      sum = {
+        x: sum.x + deltaX / box.width * clip.rect.w,
+        y: sum.y + deltaY / box.height * clip.rect.h
+      };
+      request ??= view.requestAnimationFrame(() => {
+        request = null;
+        usePresentation.getState().panClip(selected, sum.x, sum.y);
+        sum = { x: 0, y: 0 };
+      });
+    };
+    stage.addEventListener("wheel", onWheel, { passive: false });
+    return () => {
+      stage.removeEventListener("wheel", onWheel);
+      if (request !== null) view.cancelAnimationFrame(request);
+    };
+  }, [editable, selected]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("relative h-full w-full", !editable && "overflow-hidden bg-black", className),
+      style: { containerType: "size" },
+      "data-testid": editable ? "presentation-stage-editor" : "presentation-stage",
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: stageRef,
+          className: cn(
+            "absolute inset-0 m-auto",
+            editable ? "shadow-md" : "overflow-hidden",
+            dropping && "outline outline-2 outline-offset-2 outline-primary"
+          ),
+          style: {
+            width: "min(100cqw, calc(100cqh * 16 / 9))",
+            height: "min(100cqh, calc(100cqw * 9 / 16))",
+            containerType: "inline-size",
+            background: slide?.background ? slideBackgroundCss(slide.background, media) : backgroundCss(theme.background),
+            fontFamily: FONTS[theme.font].css
+          },
+          onPointerDown: () => {
+            if (!editable) return;
+            usePresentation.getState().goTo(index);
+            onSelect?.(null);
+          },
+          ...editable ? { [DROP_ATTRIBUTE]: "stage", "data-slide-index": index } : {},
+          "aria-label": `Slide ${index + 1}`,
+          children: [
+            blank && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-20 bg-black" }),
+            slide && /* @__PURE__ */ jsx(
+              SlideDecor,
+              {
+                slide,
+                theme,
+                labels: captions,
+                logoImage,
+                editable,
+                editing: textEditing
+              }
+            ),
+            renderBoxes(false),
+            slide?.items.map((item) => {
+              const clip = clipOf(item.clipId);
+              if (!clip) return null;
+              return /* @__PURE__ */ jsx(
+                StageItem,
+                {
+                  clip,
+                  frame: item.frame,
+                  editable,
+                  selected: editable && selected === clip.id,
+                  dim: false,
+                  label: captions ? clipLabel(clip, columnValues) : "",
+                  host
+                },
+                clip.id
+              );
+            }),
+            renderBoxes(true),
+            editable && /* @__PURE__ */ jsx(GuideLayer, { ref: guideLayer }),
+            editable && selectedFrame && selected && !dragging && /* @__PURE__ */ jsx(
+              ClipActionBar,
+              {
+                clipId: selected,
+                at: selectedFrame,
+                onRemoved: () => onSelect?.(null),
+                onEditImage: onEditImage && clipOf(selected)?.kind === "image" ? () => onEditImage(selected) : void 0,
+                onCropImage: onCropImage && clipOf(selected)?.kind === "image" ? () => onCropImage(selected) : void 0
+              }
+            ),
+            editable && selectedBox && /* @__PURE__ */ jsx(BoxActionBar, { box: selectedBox, onRemoved: () => onSelect?.(null) }),
+            overlay
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  PresentationStage
+};
+//# sourceMappingURL=PresentationStage.js.map

package/dist/presentation/PresentationStage.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/presentation/PresentationStage.tsx"],
+  "sourcesContent": ["/**\n * The 16:9 stage: a slide's clips in their frames, its title, points and logo, as large as the\n * container allows. Presenting shows it bare; the editor's copy is `editable`: each clip\n * (`StageItem`) is moved, resized and reshaped by dragging, snapping with guide lines; clips are\n * selected for their floating actions, and clips dragged from the tray are dropped onto it.\n *\n * A slide's stage re-renders only when its slide (or the clips, theme or labels) change; a clip's\n * drag re-renders nothing here but the guides and, at its start and end, the floating actions.\n */\n\nimport {\n  forwardRef,\n  memo,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n  type ReactNode,\n} from 'react'\nimport { cn } from '@arbidocs/react/ui'\nimport { ClipActionBar } from './ClipActionBar'\nimport { SlideDecor, type SlideTextEditing } from './SlideDecor'\nimport { StageItem, type StageItemHost } from './StageItem'\nimport { StageBox, type StageBoxHost } from './StageBox'\nimport { BoxActionBar } from './BoxActionBar'\nimport { FONTS, backgroundCss, slideBackgroundCss } from './theme'\nimport { clipLabel, type Clip, type Frame, type Guide } from './model'\nimport { usePresentation } from './store'\nimport { DROP_ATTRIBUTE } from './useClipDrag'\n\nexport interface PresentationStageProps {\n  editable?: boolean\n  /** The slide shown (default: the current one). */\n  slideIndex?: number\n  selected?: string | null\n  onSelect?: (clipId: string | null) => void\n  /** Offered on a selected image clip: make a new version of it. */\n  onEditImage?: (clipId: string) => void\n  /** Offered on a selected image clip: choose the part of the image it shows. */\n  onCropImage?: (clipId: string) => void\n  /** Typing the slide's title and points on the slide itself (the editor's stages). */\n  textEditing?: SlideTextEditing\n  /** Over the slide (e.g. the editor's hover actions). */\n  overlay?: ReactNode\n  className?: string\n}\n\nexport interface GuideLayerHandle {\n  set(guides: Guide[]): void\n}\n\n/** The snap lines of a dragged clip: its own state, so drawing them re-renders nothing else. */\nconst GuideLayer = memo(\n  forwardRef<GuideLayerHandle>(function GuideLayer(_, ref) {\n    const [guides, setGuides] = useState<Guide[]>([])\n    useImperativeHandle(ref, () => ({ set: setGuides }), [])\n    return (\n      <>\n        {guides.map((guide) => (\n          <div\n            key={`${guide.axis}-${guide.at}`}\n            className=\"pointer-events-none absolute z-10 bg-primary\"\n            style={\n              guide.axis === 'x'\n                ? { left: `${guide.at * 100}%`, top: 0, bottom: 0, width: 1 }\n                : { top: `${guide.at * 100}%`, left: 0, right: 0, height: 1 }\n            }\n            data-testid={`stage-guide-${guide.axis}`}\n          />\n        ))}\n      </>\n    )\n  })\n)\n\nexport function PresentationStage({\n  editable = false,\n  slideIndex,\n  selected = null,\n  onSelect,\n  onEditImage,\n  onCropImage,\n  textEditing,\n  overlay,\n  className,\n}: PresentationStageProps) {\n  const index = usePresentation((s) => slideIndex ?? s.current)\n  const slide = usePresentation((s) => s.slides[index])\n  const clips = usePresentation((s) => s.clips)\n  const blank = usePresentation((s) => s.blank && !editable)\n  const captions = usePresentation((s) => s.captions)\n  const columnValues = usePresentation((s) => s.columnValues)\n  const theme = usePresentation((s) => s.theme)\n  const logoImage = usePresentation((s) => s.logoImage)\n  const media = usePresentation((s) => s.media)\n  const stageRef = useRef<HTMLDivElement>(null)\n  const guideLayer = useRef<GuideLayerHandle>(null)\n  // A clip dragged from the tray: the stage shows it can take it.\n  const dropping = usePresentation((s) => editable && s.dragging !== null)\n  // A clip being dragged on the stage: its floating actions hide meanwhile.\n  const [dragging, setDragging] = useState(false)\n\n  // The latest values the clips' gestures read as they begin (the host itself never changes).\n  const latest = useRef({ slide, clips, index, onSelect })\n  latest.current = { slide, clips, index, onSelect }\n  const host = useMemo<StageItemHost>(\n    () => ({\n      stageBox: () => stageRef.current?.getBoundingClientRect() ?? null,\n      others: (clipId) => {\n        const { slide: current, clips: all } = latest.current\n        return (current?.items ?? [])\n          .filter((item) => item.clipId !== clipId)\n          .map((item) => ({\n            frame: item.frame,\n            aspect: all.find((clip) => clip.id === item.clipId)?.aspect ?? 1,\n          }))\n      },\n      select: (clipId) => {\n        usePresentation.getState().goTo(latest.current.index)\n        latest.current.onSelect?.(clipId)\n      },\n      guides: (guides) => guideLayer.current?.set(guides),\n      dragging: setDragging,\n      commit: (clipId: string, frame: Frame, shape?: Pick<Clip, 'rect' | 'aspect'>) => {\n        const state = usePresentation.getState()\n        state.goTo(latest.current.index)\n        if (shape) state.reshapeClip(clipId, frame, shape.rect, shape.aspect)\n        else state.setFrame(clipId, frame)\n      },\n    }),\n    []\n  )\n\n  const boxHost = useMemo<StageBoxHost>(\n    () => ({\n      stageBox: () => stageRef.current?.getBoundingClientRect() ?? null,\n      select: (boxId) => {\n        usePresentation.getState().goTo(latest.current.index)\n        latest.current.onSelect?.(boxId)\n      },\n      commit: (boxId, frame) =>\n        usePresentation.getState().updateBox(boxId, (box) => ({ ...box, frame })),\n      setText: (boxId, text) => usePresentation.getState().setBoxText(boxId, text),\n    }),\n    []\n  )\n  const font = FONTS[theme.font].css\n  const boxes = slide?.boxes ?? []\n  const selectedBox = selected ? boxes.find((box) => box.id === selected) : undefined\n  const renderBoxes = (front: boolean) =>\n    boxes\n      .filter((box) => !!box.front === front)\n      .map((box) => (\n        <StageBox\n          key={box.id}\n          box={box}\n          font={font}\n          editable={editable}\n          selected={editable && selected === box.id}\n          host={boxHost}\n        />\n      ))\n\n  const clipOf = (id: string): Clip | undefined => clips.find((clip) => clip.id === id)\n  const selectedFrame = selected\n    ? slide?.items.find((item) => item.clipId === selected)?.frame\n    : undefined\n\n  // Scrolling over the selected clip (wheel or trackpad; Shift for sideways) scrolls what it shows\n  // over its source: the lines above or below, say. A native listener, so the editor itself does\n  // not scroll; steps are gathered and applied once per animation frame.\n  useEffect(() => {\n    const stage = stageRef.current\n    const view = stage?.ownerDocument.defaultView\n    if (!editable || !selected || !stage || !view) return\n    let sum = { x: 0, y: 0 }\n    let request: number | null = null\n    const onWheel = (event: WheelEvent) => {\n      const item = (event.target as Element | null)?.closest?.(\n        `[data-testid=\"stage-item-${selected}\"]`\n      )\n      const clip = usePresentation.getState().clips.find((entry) => entry.id === selected)\n      if (!item || !clip) return\n      event.preventDefault()\n      const box = item.getBoundingClientRect()\n      const horizontal = event.shiftKey && !event.deltaX\n      const deltaX = horizontal ? event.deltaY : event.deltaX\n      const deltaY = horizontal ? 0 : event.deltaY\n      // Screen pixels to fractions of the source: the clip's area spans the clip's box.\n      sum = {\n        x: sum.x + (deltaX / box.width) * clip.rect.w,\n        y: sum.y + (deltaY / box.height) * clip.rect.h,\n      }\n      request ??= view.requestAnimationFrame(() => {\n        request = null\n        usePresentation.getState().panClip(selected, sum.x, sum.y)\n        sum = { x: 0, y: 0 }\n      })\n    }\n    stage.addEventListener('wheel', onWheel, { passive: false })\n    return () => {\n      stage.removeEventListener('wheel', onWheel)\n      if (request !== null) view.cancelAnimationFrame(request)\n    }\n  }, [editable, selected])\n\n  return (\n    <div\n      className={cn('relative h-full w-full', !editable && 'overflow-hidden bg-black', className)}\n      // The stage's size comes from this box's (container query units): 16:9, as large as fits.\n      style={{ containerType: 'size' }}\n      data-testid={editable ? 'presentation-stage-editor' : 'presentation-stage'}\n    >\n      <div\n        ref={stageRef}\n        className={cn(\n          'absolute inset-0 m-auto',\n          editable ? 'shadow-md' : 'overflow-hidden',\n          dropping && 'outline outline-2 outline-offset-2 outline-primary'\n        )}\n        style={{\n          width: 'min(100cqw, calc(100cqh * 16 / 9))',\n          height: 'min(100cqh, calc(100cqw * 9 / 16))',\n          containerType: 'inline-size',\n          background: slide?.background\n            ? slideBackgroundCss(slide.background, media)\n            : backgroundCss(theme.background),\n          fontFamily: FONTS[theme.font].css,\n        }}\n        onPointerDown={() => {\n          if (!editable) return\n          usePresentation.getState().goTo(index)\n          onSelect?.(null)\n        }}\n        {...(editable ? { [DROP_ATTRIBUTE]: 'stage', 'data-slide-index': index } : {})}\n        aria-label={`Slide ${index + 1}`}\n      >\n        {/* Blanked: the shared stage is black. */}\n        {blank && <div className=\"absolute inset-0 z-20 bg-black\" />}\n        {/* The title, points and logo, by the slide's layout. */}\n        {slide && (\n          <SlideDecor\n            slide={slide}\n            theme={theme}\n            labels={captions}\n            logoImage={logoImage}\n            editable={editable}\n            editing={textEditing}\n          />\n        )}\n        {renderBoxes(false)}\n        {slide?.items.map((item) => {\n          const clip = clipOf(item.clipId)\n          if (!clip) return null\n          return (\n            <StageItem\n              key={clip.id}\n              clip={clip}\n              frame={item.frame}\n              editable={editable}\n              selected={editable && selected === clip.id}\n              dim={false}\n              label={captions ? clipLabel(clip, columnValues) : ''}\n              host={host}\n            />\n          )\n        })}\n        {renderBoxes(true)}\n        {/* Smart guides: the lines the dragged clip snapped to (editor only). */}\n        {editable && <GuideLayer ref={guideLayer} />}\n        {/* The selected clip's floating actions, above it (the stage leaves room). */}\n        {editable && selectedFrame && selected && !dragging && (\n          <ClipActionBar\n            clipId={selected}\n            at={selectedFrame}\n            onRemoved={() => onSelect?.(null)}\n            onEditImage={\n              onEditImage && clipOf(selected)?.kind === 'image'\n                ? () => onEditImage(selected)\n                : undefined\n            }\n            onCropImage={\n              onCropImage && clipOf(selected)?.kind === 'image'\n                ? () => onCropImage(selected)\n                : undefined\n            }\n          />\n        )}\n        {editable && selectedBox && (\n          <BoxActionBar box={selectedBox} onRemoved={() => onSelect?.(null)} />\n        )}\n        {overlay}\n      </div>\n    </div>\n  )\n}\n"],
+  "mappings": "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",
+  "names": ["GuideLayer"]
+}

package/dist/presentation/PresenterView.d.ts

@@ -0,0 +1,16 @@
+/**
+ * The presentation in a window of its own, in one of two modes.
+ *
+ * Present: nothing but the stage on black, no controls and no pointer: what is shared in a call or
+ * shown on a projector. Keys drive it (arrows / Page Up / Page Down change slide, B blanks, F or
+ * double-click toggles full screen, Space plays videos, Escape stops presenting).
+ *
+ * Edit: the slides editor (`SlidesEditor`), the same as in the viewer's tab, when the presentation
+ * is edited in its own window (beside the document its clips come from).
+ */
+import { type SlidesEditorProps } from './SlidesEditor';
+export type PresenterViewProps = Omit<SlidesEditorProps, 'onPresent'> & {
+    /** Present (default: here, in this window). */
+    onPresent?: () => void;
+};
+export declare function PresenterView({ onPresent, ...editor }: PresenterViewProps): import("react").JSX.Element;

package/dist/presentation/PresenterView.js

@@ -0,0 +1,100 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+import { PresentationStage } from "./PresentationStage.js";
+import { SlidesEditor } from "./SlidesEditor.js";
+import { STAGE_ASPECT } from "./model.js";
+import { usePresentation } from "./store.js";
+import { toggleFullscreen, usePresenterKeys } from "./usePresenterKeys.js";
+import { PresentControls } from "./PresentControls.js";
+const PRESENT_WIDTH = 1280;
+function useStageShapedWindow(view, presenting) {
+  useEffect(() => {
+    if (!view || !presenting || !view.opener) return;
+    const before = { width: view.outerWidth, height: view.outerHeight };
+    const chromeWidth = view.outerWidth - view.innerWidth;
+    const chromeHeight = view.outerHeight - view.innerHeight;
+    const width = Math.max(
+      view.innerWidth,
+      Math.min(PRESENT_WIDTH, Math.round((view.screen.availWidth - chromeWidth) * 0.6))
+    );
+    const height = Math.min(
+      Math.round(width / STAGE_ASPECT),
+      view.screen.availHeight - chromeHeight
+    );
+    try {
+      view.resizeTo(Math.round(height * STAGE_ASPECT) + chromeWidth, height + chromeHeight);
+    } catch {
+      return;
+    }
+    return () => {
+      try {
+        if (!view.closed) view.resizeTo(before.width, before.height);
+      } catch {
+      }
+    };
+  }, [view, presenting]);
+}
+const IDLE_MS = 2200;
+function usePointerActive(view) {
+  const [active, setActive] = useState(true);
+  useEffect(() => {
+    if (!view) return;
+    setActive(true);
+    let timer = view.setTimeout(() => setActive(false), IDLE_MS);
+    const wake = () => {
+      setActive(true);
+      view.clearTimeout(timer);
+      timer = view.setTimeout(() => setActive(false), IDLE_MS);
+    };
+    view.addEventListener("pointermove", wake);
+    view.addEventListener("keydown", wake);
+    return () => {
+      view.clearTimeout(timer);
+      view.removeEventListener("pointermove", wake);
+      view.removeEventListener("keydown", wake);
+    };
+  }, [view]);
+  return active;
+}
+function PresenterView({ onPresent, ...editor }) {
+  const presenting = usePresentation((s) => s.presenting);
+  const [view, setView] = useState(null);
+  const rootRef = useCallback((node) => {
+    if (node) setView(node.ownerDocument.defaultView);
+  }, []);
+  usePresenterKeys(presenting ? view : null, true);
+  useStageShapedWindow(view, presenting);
+  const active = usePointerActive(presenting ? view : null);
+  if (presenting) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: rootRef,
+        className: "relative h-full w-full select-none bg-black",
+        style: { cursor: active ? "default" : "none" },
+        onClick: () => {
+          const state = usePresentation.getState();
+          state.goTo(state.current + 1);
+        },
+        onDoubleClick: () => view && toggleFullscreen(view),
+        "data-testid": "presentation-present",
+        children: [
+          /* @__PURE__ */ jsx(PresentationStage, {}),
+          /* @__PURE__ */ jsx(PresentControls, { view, shown: active })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { ref: rootRef, className: "h-full min-h-0", "data-testid": "presenter-view", children: /* @__PURE__ */ jsx(
+    SlidesEditor,
+    {
+      ...editor,
+      onPresent: onPresent ?? (() => usePresentation.getState().setPresenting(true))
+    }
+  ) });
+}
+export {
+  PresenterView
+};
+//# sourceMappingURL=PresenterView.js.map

package/dist/presentation/PresenterView.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/presentation/PresenterView.tsx"],
+  "sourcesContent": ["/**\n * The presentation in a window of its own, in one of two modes.\n *\n * Present: nothing but the stage on black, no controls and no pointer: what is shared in a call or\n * shown on a projector. Keys drive it (arrows / Page Up / Page Down change slide, B blanks, F or\n * double-click toggles full screen, Space plays videos, Escape stops presenting).\n *\n * Edit: the slides editor (`SlidesEditor`), the same as in the viewer's tab, when the presentation\n * is edited in its own window (beside the document its clips come from).\n */\n\nimport { useCallback, useEffect, useState } from 'react'\nimport { PresentationStage } from './PresentationStage'\nimport { SlidesEditor, type SlidesEditorProps } from './SlidesEditor'\nimport { STAGE_ASPECT } from './model'\nimport { usePresentation } from './store'\nimport { toggleFullscreen, usePresenterKeys } from './usePresenterKeys'\nimport { PresentControls } from './PresentControls'\n\n/** The presenting window's page width, at most (smaller on a small screen). */\nconst PRESENT_WIDTH = 1280\n\n/**\n * While presenting in a pop-out, its page is made 16:9 and wide enough to share sharply, so a\n * shared window is all stage with no bars; editing again gives the window back its size. Only a\n * pop-out (a window this app opened) can be resized; the app's own window is left alone.\n */\nfunction useStageShapedWindow(view: Window | null, presenting: boolean) {\n  useEffect(() => {\n    if (!view || !presenting || !view.opener) return\n    const before = { width: view.outerWidth, height: view.outerHeight }\n    const chromeWidth = view.outerWidth - view.innerWidth\n    const chromeHeight = view.outerHeight - view.innerHeight\n    // Wide enough for a sharp share (a call receives about what the window shows), and 16:9.\n    const width = Math.max(\n      view.innerWidth,\n      Math.min(PRESENT_WIDTH, Math.round((view.screen.availWidth - chromeWidth) * 0.6))\n    )\n    const height = Math.min(\n      Math.round(width / STAGE_ASPECT),\n      view.screen.availHeight - chromeHeight\n    )\n    try {\n      view.resizeTo(Math.round(height * STAGE_ASPECT) + chromeWidth, height + chromeHeight)\n    } catch {\n      return // not resizable: the stage letterboxes in black\n    }\n    return () => {\n      try {\n        if (!view.closed) view.resizeTo(before.width, before.height)\n      } catch {\n        // gone or not resizable\n      }\n    }\n  }, [view, presenting])\n}\n\n/** How long the pointer (or a key) has to rest before the controls fade. */\nconst IDLE_MS = 2200\n\n/** The pointer has moved (or a key was pressed) in `view` within the last moment. */\nfunction usePointerActive(view: Window | null): boolean {\n  const [active, setActive] = useState(true)\n  useEffect(() => {\n    if (!view) return\n    setActive(true)\n    let timer = view.setTimeout(() => setActive(false), IDLE_MS)\n    const wake = () => {\n      setActive(true)\n      view.clearTimeout(timer)\n      timer = view.setTimeout(() => setActive(false), IDLE_MS)\n    }\n    view.addEventListener('pointermove', wake)\n    view.addEventListener('keydown', wake)\n    return () => {\n      view.clearTimeout(timer)\n      view.removeEventListener('pointermove', wake)\n      view.removeEventListener('keydown', wake)\n    }\n  }, [view])\n  return active\n}\n\nexport type PresenterViewProps = Omit<SlidesEditorProps, 'onPresent'> & {\n  /** Present (default: here, in this window). */\n  onPresent?: () => void\n}\n\nexport function PresenterView({ onPresent, ...editor }: PresenterViewProps) {\n  const presenting = usePresentation((s) => s.presenting)\n  const [view, setView] = useState<Window | null>(null)\n  // The keys work in whichever window the presenter is in.\n  const rootRef = useCallback((node: HTMLDivElement | null) => {\n    if (node) setView(node.ownerDocument.defaultView)\n  }, [])\n  usePresenterKeys(presenting ? view : null, true)\n  useStageShapedWindow(view, presenting)\n\n  const active = usePointerActive(presenting ? view : null)\n\n  if (presenting) {\n    return (\n      <div\n        ref={rootRef}\n        className=\"relative h-full w-full select-none bg-black\"\n        // The pointer shows while it moves, with the controls; idle, nothing but the slide.\n        style={{ cursor: active ? 'default' : 'none' }}\n        // A click on the slide goes to the next one, as in a slideshow.\n        onClick={() => {\n          const state = usePresentation.getState()\n          state.goTo(state.current + 1)\n        }}\n        onDoubleClick={() => view && toggleFullscreen(view)}\n        data-testid=\"presentation-present\"\n      >\n        <PresentationStage />\n        <PresentControls view={view} shown={active} />\n      </div>\n    )\n  }\n  return (\n    <div ref={rootRef} className=\"h-full min-h-0\" data-testid=\"presenter-view\">\n      <SlidesEditor\n        {...editor}\n        onPresent={onPresent ?? (() => usePresentation.getState().setPresenting(true))}\n      />\n    </div>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/presentation/SlideDecor.d.ts

@@ -0,0 +1,25 @@
+/**
+ * What a slide shows besides its clips, by its layout and the theme: its title with the accent
+ * rule, its points (accent bullets) or subtitle, and the logo in the footer. Positioned on the
+ * stage from `slideGeometry`, sized in container units (`cqw`) so it scales with the stage. The
+ * saved PDF and the PowerPoint export draw the same geometry.
+ *
+ * In the editor (`editing`), the title and text are typed on the slide itself: a click swaps the
+ * text for a field with the same type, size and place, so nothing moves while it is edited.
+ */
+import type { Slide } from './model';
+import { type Theme } from './theme';
+/** Typing a slide's title and text on the slide. */
+export interface SlideTextEditing {
+    onTitle(title: string): void;
+    onPoints(points: string): void;
+}
+export declare const SlideDecor: import("react").NamedExoticComponent<{
+    slide: Pick<Slide, "layout" | "caption" | "points">;
+    theme: Theme;
+    labels: boolean;
+    logoImage: Blob | null;
+    editable: boolean;
+    editing?: SlideTextEditing;
+    dim?: boolean;
+}>;