@arbidocs/blocks 0.5.119 → 0.5.121

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,69 @@
+"use client";
+import { jsx } 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";
+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]);
+}
+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);
+  if (presenting) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: rootRef,
+        className: "h-full w-full select-none bg-black",
+        style: { cursor: "none" },
+        onDoubleClick: () => view && toggleFullscreen(view),
+        "data-testid": "presentation-present",
+        children: /* @__PURE__ */ jsx(PresentationStage, {})
+      }
+    );
+  }
+  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'\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\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  if (presenting) {\n    return (\n      <div\n        ref={rootRef}\n        className=\"h-full w-full select-none bg-black\"\n        style={{ cursor: 'none' }}\n        onDoubleClick={() => view && toggleFullscreen(view)}\n        data-testid=\"presentation-present\"\n      >\n        <PresentationStage />\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": ";AAgFQ;AArER,SAAS,aAAa,WAAW,gBAAgB;AACjD,SAAS,yBAAyB;AAClC,SAAS,oBAA4C;AACrD,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,kBAAkB,wBAAwB;AAGnD,MAAM,gBAAgB;AAOtB,SAAS,qBAAqB,MAAqB,YAAqB;AACtE,YAAU,MAAM;AACd,QAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,KAAK,OAAQ;AAC1C,UAAM,SAAS,EAAE,OAAO,KAAK,YAAY,QAAQ,KAAK,YAAY;AAClE,UAAM,cAAc,KAAK,aAAa,KAAK;AAC3C,UAAM,eAAe,KAAK,cAAc,KAAK;AAE7C,UAAM,QAAQ,KAAK;AAAA,MACjB,KAAK;AAAA,MACL,KAAK,IAAI,eAAe,KAAK,OAAO,KAAK,OAAO,aAAa,eAAe,GAAG,CAAC;AAAA,IAClF;AACA,UAAM,SAAS,KAAK;AAAA,MAClB,KAAK,MAAM,QAAQ,YAAY;AAAA,MAC/B,KAAK,OAAO,cAAc;AAAA,IAC5B;AACA,QAAI;AACF,WAAK,SAAS,KAAK,MAAM,SAAS,YAAY,IAAI,aAAa,SAAS,YAAY;AAAA,IACtF,QAAQ;AACN;AAAA,IACF;AACA,WAAO,MAAM;AACX,UAAI;AACF,YAAI,CAAC,KAAK,OAAQ,MAAK,SAAS,OAAO,OAAO,OAAO,MAAM;AAAA,MAC7D,QAAQ;AAAA,MAER;AAAA,IACF;AAAA,EACF,GAAG,CAAC,MAAM,UAAU,CAAC;AACvB;AAOO,SAAS,cAAc,EAAE,WAAW,GAAG,OAAO,GAAuB;AAC1E,QAAM,aAAa,gBAAgB,CAAC,MAAM,EAAE,UAAU;AACtD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAwB,IAAI;AAEpD,QAAM,UAAU,YAAY,CAAC,SAAgC;AAC3D,QAAI,KAAM,SAAQ,KAAK,cAAc,WAAW;AAAA,EAClD,GAAG,CAAC,CAAC;AACL,mBAAiB,aAAa,OAAO,MAAM,IAAI;AAC/C,uBAAqB,MAAM,UAAU;AAErC,MAAI,YAAY;AACd,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAU;AAAA,QACV,OAAO,EAAE,QAAQ,OAAO;AAAA,QACxB,eAAe,MAAM,QAAQ,iBAAiB,IAAI;AAAA,QAClD,eAAY;AAAA,QAEZ,8BAAC,qBAAkB;AAAA;AAAA,IACrB;AAAA,EAEJ;AACA,SACE,oBAAC,SAAI,KAAK,SAAS,WAAU,kBAAiB,eAAY,kBACxD;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,cAAc,MAAM,gBAAgB,SAAS,EAAE,cAAc,IAAI;AAAA;AAAA,EAC9E,GACF;AAEJ;",
+  "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;
+}>;

package/dist/presentation/SlideDecor.js

@@ -0,0 +1,189 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useState } from "react";
+import { cn } from "@arbidocs/react/ui";
+import { LAYOUT_INFO, slideGeometry, textLines } from "./slide-layout.js";
+import { TEXT_COLORS, accentColor } from "./theme.js";
+import { useObjectUrl } from "./useObjectUrl.js";
+const boxStyle = (box) => ({
+  left: `${box.x * 100}%`,
+  top: `${box.y * 100}%`,
+  width: `${box.w * 100}%`,
+  height: `${box.h * 100}%`
+});
+const textStyle = (box, color) => ({
+  ...boxStyle(box),
+  fontSize: `${box.size * 100}cqw`,
+  fontWeight: box.weight,
+  lineHeight: box.leading,
+  color,
+  letterSpacing: box.tone === "title" ? "-0.01em" : void 0
+});
+const PLACEHOLDER_COLOR = "rgba(255,255,255,0.32)";
+function Text({
+  box,
+  lines,
+  accent,
+  placeholder,
+  onEdit,
+  testId
+}) {
+  const empty = lines.length === 0;
+  if (empty && !placeholder) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "absolute flex flex-col overflow-hidden",
+        onEdit ? "pointer-events-auto cursor-text rounded-[0.3cqw] hover:outline hover:outline-1 hover:outline-white/25" : "pointer-events-none",
+        box.align === "center" && "text-center",
+        box.bullets && "gap-[0.6cqw]",
+        box.anchor === "middle" && "justify-center",
+        box.anchor === "bottom" && "justify-end"
+      ),
+      style: textStyle(box, empty ? PLACEHOLDER_COLOR : TEXT_COLORS[box.tone]),
+      onPointerDown: onEdit ? (event) => event.stopPropagation() : void 0,
+      onClick: onEdit,
+      "data-testid": testId,
+      children: (empty ? [placeholder] : lines).map(
+        (line, index) => box.bullets ? /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-[0.8em]", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: "inline-block size-[0.42em] shrink-0 -translate-y-[0.12em]",
+              style: { background: empty ? "currentColor" : accent }
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { children: line })
+        ] }, index) : /* @__PURE__ */ jsx("div", { children: line }, index)
+      )
+    }
+  );
+}
+function TextField({
+  box,
+  value,
+  placeholder,
+  multiline,
+  onChange,
+  onDone,
+  testId
+}) {
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      autoFocus: true,
+      value,
+      placeholder,
+      onChange: (event) => onChange(multiline ? event.target.value : event.target.value.replace(/\n/g, " ")),
+      onBlur: onDone,
+      onPointerDown: (event) => event.stopPropagation(),
+      onKeyDown: (event) => {
+        if (event.key === "Escape" || !multiline && event.key === "Enter") {
+          event.preventDefault();
+          event.currentTarget.blur();
+        }
+      },
+      className: cn(
+        "pointer-events-auto absolute resize-none overflow-hidden rounded-[0.3cqw] bg-white/5 p-0 outline outline-1 outline-white/40 placeholder:text-white/30 focus:outline-white/60",
+        box.align === "center" && "text-center"
+      ),
+      style: {
+        ...textStyle(box, TEXT_COLORS[box.tone]),
+        fontFamily: "inherit",
+        // Bulleted lines keep their indent while typed.
+        paddingLeft: box.bullets ? "1.22em" : void 0
+      },
+      "aria-label": placeholder,
+      "data-testid": testId
+    }
+  );
+}
+function Logo({ image, box }) {
+  const url = useObjectUrl(image);
+  if (!url) return null;
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: url,
+      alt: "",
+      className: "pointer-events-none absolute object-contain opacity-90",
+      style: { ...boxStyle(box), objectPosition: box.x < 0.5 ? "left bottom" : "right bottom" },
+      "data-testid": "stage-logo"
+    }
+  );
+}
+const SlideDecor = memo(function SlideDecor2({
+  slide,
+  theme,
+  labels,
+  logoImage,
+  editable,
+  editing,
+  dim
+}) {
+  const [typing, setTyping] = useState(null);
+  const geometry = slideGeometry(slide, { labels, logo: theme.logo?.corner ?? null });
+  const title = slide.caption.trim();
+  const titled = slide.layout === "title" || slide.layout === "section";
+  const info = LAYOUT_INFO[slide.layout];
+  return /* @__PURE__ */ jsxs("div", { className: cn("pointer-events-none absolute inset-0", dim && "opacity-30"), children: [
+    !geometry.title ? null : editing && typing === "title" ? /* @__PURE__ */ jsx(
+      TextField,
+      {
+        box: geometry.title,
+        value: slide.caption,
+        placeholder: "Title",
+        multiline: false,
+        onChange: editing.onTitle,
+        onDone: () => setTyping(null),
+        testId: "stage-slide-caption-input"
+      }
+    ) : /* @__PURE__ */ jsx(
+      Text,
+      {
+        box: geometry.title,
+        lines: title ? [title] : [],
+        accent: accentColor(theme.accent),
+        placeholder: editable && (titled || editing) ? "Click to add a title" : void 0,
+        onEdit: editing ? () => setTyping("title") : void 0,
+        testId: "stage-slide-caption"
+      }
+    ),
+    geometry.rule && (title || editable && titled) && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute",
+        style: { ...boxStyle(geometry.rule), background: accentColor(theme.accent) }
+      }
+    ),
+    geometry.text && (editing && typing === "text" ? /* @__PURE__ */ jsx(
+      TextField,
+      {
+        box: geometry.text,
+        value: slide.points,
+        placeholder: info.text ?? "",
+        multiline: true,
+        onChange: editing.onPoints,
+        onDone: () => setTyping(null),
+        testId: "stage-slide-points-input"
+      }
+    ) : /* @__PURE__ */ jsx(
+      Text,
+      {
+        box: geometry.text,
+        lines: textLines(slide.points),
+        accent: accentColor(theme.accent),
+        placeholder: editable ? info.text : void 0,
+        onEdit: editing ? () => setTyping("text") : void 0,
+        testId: "stage-slide-points"
+      }
+    )),
+    geometry.logo && logoImage && /* @__PURE__ */ jsx(Logo, { image: logoImage, box: geometry.logo })
+  ] });
+});
+export {
+  SlideDecor
+};
+//# sourceMappingURL=SlideDecor.js.map

package/dist/presentation/SlideDecor.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/presentation/SlideDecor.tsx"],
+  "sourcesContent": ["/**\n * What a slide shows besides its clips, by its layout and the theme: its title with the accent\n * rule, its points (accent bullets) or subtitle, and the logo in the footer. Positioned on the\n * stage from `slideGeometry`, sized in container units (`cqw`) so it scales with the stage. The\n * saved PDF and the PowerPoint export draw the same geometry.\n *\n * In the editor (`editing`), the title and text are typed on the slide itself: a click swaps the\n * text for a field with the same type, size and place, so nothing moves while it is edited.\n */\n\nimport { memo, useState, type CSSProperties } from 'react'\nimport { cn } from '@arbidocs/react/ui'\nimport type { Slide } from './model'\nimport { LAYOUT_INFO, slideGeometry, textLines, type Box, type TextBox } from './slide-layout'\nimport { TEXT_COLORS, accentColor, type Theme } from './theme'\nimport { useObjectUrl } from './useObjectUrl'\n\n/** Typing a slide's title and text on the slide. */\nexport interface SlideTextEditing {\n  onTitle(title: string): void\n  onPoints(points: string): void\n}\n\nconst boxStyle = (box: Box) => ({\n  left: `${box.x * 100}%`,\n  top: `${box.y * 100}%`,\n  width: `${box.w * 100}%`,\n  height: `${box.h * 100}%`,\n})\n\nconst textStyle = (box: TextBox, color: string): CSSProperties => ({\n  ...boxStyle(box),\n  fontSize: `${box.size * 100}cqw`,\n  fontWeight: box.weight,\n  lineHeight: box.leading,\n  color,\n  letterSpacing: box.tone === 'title' ? '-0.01em' : undefined,\n})\n\nconst PLACEHOLDER_COLOR = 'rgba(255,255,255,0.32)'\n\nfunction Text({\n  box,\n  lines,\n  accent,\n  placeholder,\n  onEdit,\n  testId,\n}: {\n  box: TextBox\n  lines: string[]\n  accent: string\n  /** Shown faintly in the editor while the text is empty. */\n  placeholder?: string\n  /** A click starts typing (the editor). */\n  onEdit?: () => void\n  testId: string\n}) {\n  const empty = lines.length === 0\n  if (empty && !placeholder) return null\n  return (\n    <div\n      className={cn(\n        'absolute flex flex-col overflow-hidden',\n        onEdit\n          ? 'pointer-events-auto cursor-text rounded-[0.3cqw] hover:outline hover:outline-1 hover:outline-white/25'\n          : 'pointer-events-none',\n        box.align === 'center' && 'text-center',\n        box.bullets && 'gap-[0.6cqw]',\n        box.anchor === 'middle' && 'justify-center',\n        box.anchor === 'bottom' && 'justify-end'\n      )}\n      style={textStyle(box, empty ? PLACEHOLDER_COLOR : TEXT_COLORS[box.tone])}\n      onPointerDown={onEdit ? (event) => event.stopPropagation() : undefined}\n      onClick={onEdit}\n      data-testid={testId}\n    >\n      {(empty ? [placeholder!] : lines).map((line, index) =>\n        box.bullets ? (\n          <div key={index} className=\"flex items-baseline gap-[0.8em]\">\n            <span\n              aria-hidden\n              className=\"inline-block size-[0.42em] shrink-0 -translate-y-[0.12em]\"\n              style={{ background: empty ? 'currentColor' : accent }}\n            />\n            <span>{line}</span>\n          </div>\n        ) : (\n          <div key={index}>{line}</div>\n        )\n      )}\n    </div>\n  )\n}\n\n/** The field a title or text is typed in: the text's own type, size and place. */\nfunction TextField({\n  box,\n  value,\n  placeholder,\n  multiline,\n  onChange,\n  onDone,\n  testId,\n}: {\n  box: TextBox\n  value: string\n  placeholder: string\n  multiline: boolean\n  onChange: (value: string) => void\n  onDone: () => void\n  testId: string\n}) {\n  return (\n    <textarea\n      autoFocus\n      value={value}\n      placeholder={placeholder}\n      onChange={(event) =>\n        onChange(multiline ? event.target.value : event.target.value.replace(/\\n/g, ' '))\n      }\n      onBlur={onDone}\n      onPointerDown={(event) => event.stopPropagation()}\n      onKeyDown={(event) => {\n        if (event.key === 'Escape' || (!multiline && event.key === 'Enter')) {\n          event.preventDefault()\n          event.currentTarget.blur()\n        }\n      }}\n      className={cn(\n        'pointer-events-auto absolute resize-none overflow-hidden rounded-[0.3cqw] bg-white/5 p-0 outline outline-1 outline-white/40 placeholder:text-white/30 focus:outline-white/60',\n        box.align === 'center' && 'text-center'\n      )}\n      style={{\n        ...textStyle(box, TEXT_COLORS[box.tone]),\n        fontFamily: 'inherit',\n        // Bulleted lines keep their indent while typed.\n        paddingLeft: box.bullets ? '1.22em' : undefined,\n      }}\n      aria-label={placeholder}\n      data-testid={testId}\n    />\n  )\n}\n\nfunction Logo({ image, box }: { image: Blob; box: Box }) {\n  const url = useObjectUrl(image)\n  if (!url) return null\n  return (\n    <img\n      src={url}\n      alt=\"\"\n      className=\"pointer-events-none absolute object-contain opacity-90\"\n      style={{ ...boxStyle(box), objectPosition: box.x < 0.5 ? 'left bottom' : 'right bottom' }}\n      data-testid=\"stage-logo\"\n    />\n  )\n}\n\nexport const SlideDecor = memo(function SlideDecor({\n  slide,\n  theme,\n  labels,\n  logoImage,\n  editable,\n  editing,\n  dim,\n}: {\n  slide: Pick<Slide, 'layout' | 'caption' | 'points'>\n  theme: Theme\n  labels: boolean\n  logoImage: Blob | null\n  editable: boolean\n  editing?: SlideTextEditing\n  dim?: boolean\n}) {\n  const [typing, setTyping] = useState<'title' | 'text' | null>(null)\n  const geometry = slideGeometry(slide, { labels, logo: theme.logo?.corner ?? null })\n  const title = slide.caption.trim()\n  const titled = slide.layout === 'title' || slide.layout === 'section'\n  const info = LAYOUT_INFO[slide.layout]\n  return (\n    <div className={cn('pointer-events-none absolute inset-0', dim && 'opacity-30')}>\n      {!geometry.title ? null : editing && typing === 'title' ? (\n        <TextField\n          box={geometry.title}\n          value={slide.caption}\n          placeholder=\"Title\"\n          multiline={false}\n          onChange={editing.onTitle}\n          onDone={() => setTyping(null)}\n          testId=\"stage-slide-caption-input\"\n        />\n      ) : (\n        <Text\n          box={geometry.title}\n          lines={title ? [title] : []}\n          accent={accentColor(theme.accent)}\n          placeholder={editable && (titled || editing) ? 'Click to add a title' : undefined}\n          onEdit={editing ? () => setTyping('title') : undefined}\n          testId=\"stage-slide-caption\"\n        />\n      )}\n      {geometry.rule && (title || (editable && titled)) && (\n        <div\n          className=\"absolute\"\n          style={{ ...boxStyle(geometry.rule), background: accentColor(theme.accent) }}\n        />\n      )}\n      {geometry.text &&\n        (editing && typing === 'text' ? (\n          <TextField\n            box={geometry.text}\n            value={slide.points}\n            placeholder={info.text ?? ''}\n            multiline\n            onChange={editing.onPoints}\n            onDone={() => setTyping(null)}\n            testId=\"stage-slide-points-input\"\n          />\n        ) : (\n          <Text\n            box={geometry.text}\n            lines={textLines(slide.points)}\n            accent={accentColor(theme.accent)}\n            placeholder={editable ? info.text : undefined}\n            onEdit={editing ? () => setTyping('text') : undefined}\n            testId=\"stage-slide-points\"\n          />\n        ))}\n      {geometry.logo && logoImage && <Logo image={logoImage} box={geometry.logo} />}\n    </div>\n  )\n})\n"],
+  "mappings": "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",
+  "names": ["SlideDecor"]
+}

package/dist/presentation/SlidesEditor.d.ts

@@ -0,0 +1,25 @@
+/**
+ * The presentation editor: its slides one under the other, scrolled like a PDF's pages, each one
+ * edited where it is — clips dragged, resized and reshaped on it, its title and points typed on
+ * it. Hovering a slide shows its actions (layout, move up or down, duplicate, delete); between two
+ * slides, + inserts one. One small floating bar holds the rest (Design, the host's Save and other
+ * actions, Present, "…"), so no header takes room from the slides. The clips collected for the
+ * presentation wait in the tray along the bottom, to be dragged onto any slide.
+ *
+ * The same editor shows wherever the host mounts it (the viewer's tab, or its own window).
+ */
+import { type ReactNode } from 'react';
+export interface SlidesEditorProps {
+    /** Present: the host opens the shareable window. */
+    onPresent: () => void;
+    /** In the floating bar, before Present (e.g. Save, pop out). */
+    actions?: ReactNode;
+    /** At the top of the "…" menu (e.g. New from template, Save as, Export). */
+    menuItems?: ReactNode;
+    /** First in the clip tray (e.g. Generate image). */
+    trayStart?: ReactNode;
+    onChooseLogo?: () => void;
+    onEditImage?: (clipId: string) => void;
+    onCropImage?: (clipId: string) => void;
+}
+export declare function SlidesEditor({ onPresent, actions, menuItems, trayStart, onChooseLogo, onEditImage, onCropImage, }: SlidesEditorProps): import("react").JSX.Element;