@arbidocs/blocks 0.5.120 → 0.5.122

package/dist/presentation/StageItem.js

@@ -0,0 +1,211 @@
+"use client";
+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,
+  reshapeFrame,
+  resizeFrame
+} from "./model.js";
+import { TEXT_COLORS, clipEdgeCss } from "./theme.js";
+const isEdge = (kind) => kind === "n" || kind === "e" || kind === "s" || kind === "w";
+const EDGES = [
+  { edge: "n", left: "50%", top: "0%", cursor: "ns-resize", label: "top" },
+  { edge: "e", left: "100%", top: "50%", cursor: "ew-resize", label: "right" },
+  { edge: "s", left: "50%", top: "100%", cursor: "ns-resize", label: "bottom" },
+  { edge: "w", left: "0%", top: "50%", cursor: "ew-resize", label: "left" }
+];
+const CORNERS = [
+  { corner: "nw", left: "0%", top: "0%", cursor: "nwse-resize" },
+  { corner: "ne", left: "100%", top: "0%", cursor: "nesw-resize" },
+  { corner: "sw", left: "0%", top: "100%", cursor: "nesw-resize" },
+  { corner: "se", left: "100%", top: "100%", cursor: "nwse-resize" }
+];
+const EDGE_CSS = clipEdgeCss();
+const StageItem = memo(function StageItem2({
+  clip,
+  frame,
+  editable,
+  selected,
+  dim,
+  label,
+  host
+}) {
+  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;
+  const view = () => element.current?.ownerDocument.defaultView ?? window;
+  const apply = () => {
+    const g = gesture.current;
+    const el = element.current;
+    if (!g) return;
+    g.request = null;
+    const next = g.next;
+    if (!next || !el) return;
+    if (next.shape) {
+      setReshape({ frame: next.frame, shape: next.shape });
+    } else {
+      const dx = (next.frame.x - g.frame.x) * g.stage.width;
+      const dy = (next.frame.y - g.frame.y) * g.stage.height;
+      const scale = next.frame.w / g.frame.w;
+      el.style.transform = `translate3d(${dx}px, ${dy}px, 0) scale(${scale})`;
+    }
+    const key = next.guides.map((guide) => `${guide.axis}${guide.at}`).join();
+    if (key !== g.guidesKey) {
+      g.guidesKey = key;
+      host.guides(next.guides);
+    }
+  };
+  const start = (event, kind) => {
+    if (!editable || event.button !== 0) return;
+    const stage = host.stageBox();
+    if (!stage) return;
+    event.preventDefault();
+    event.stopPropagation();
+    host.select(clip.id);
+    event.currentTarget.setPointerCapture(event.pointerId);
+    gesture.current = {
+      kind,
+      pointer: { x: event.clientX, y: event.clientY },
+      frame,
+      shape: { rect: clip.rect, aspect: clip.aspect },
+      stage,
+      others: host.others(clip.id),
+      next: null,
+      request: null,
+      guidesKey: ""
+    };
+  };
+  const move = (event) => {
+    const g = gesture.current;
+    if (!g) return;
+    if (!g.next) {
+      setDragging(true);
+      host.dragging(true);
+      if (element.current) element.current.style.willChange = "transform";
+    }
+    const dx = (event.clientX - g.pointer.x) / g.stage.width;
+    const dy = (event.clientY - g.pointer.y) / g.stage.height;
+    const free = event.altKey;
+    if (isEdge(g.kind)) {
+      const result = reshapeFrame(g.frame, g.shape, g.kind, dx, dy, g.others, free);
+      g.next = {
+        frame: result.frame,
+        shape: { rect: result.rect, aspect: result.aspect },
+        guides: result.guides
+      };
+    } else {
+      g.next = g.kind === "move" ? moveFrame(g.frame, g.shape.aspect, dx, dy, g.others, free) : resizeFrame(g.frame, g.shape.aspect, g.kind, dx, dy, g.others, free);
+    }
+    g.request ??= view().requestAnimationFrame(apply);
+  };
+  const end = () => {
+    const g = gesture.current;
+    gesture.current = null;
+    if (!g) return;
+    if (g.request !== null) view().cancelAnimationFrame(g.request);
+    const el = element.current;
+    if (el) {
+      el.style.transform = "";
+      el.style.willChange = "";
+    }
+    if (!g.next) return;
+    setReshape(null);
+    setDragging(false);
+    host.dragging(false);
+    host.guides([]);
+    host.commit(clip.id, g.next.frame, g.next.shape);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: element,
+      className: cn(
+        "absolute origin-top-left",
+        // Lifted off the background (a picture that is part of the slide's design is not).
+        !clip.plain && "rounded-[0.6cqw] shadow-[0_0.5cqw_1.6cqw_rgba(0,0,0,0.5)]",
+        editable && "cursor-move touch-none",
+        selected && "outline outline-2 outline-offset-2 outline-primary",
+        dim && "opacity-30"
+      ),
+      style: {
+        left: `${box.x * 100}%`,
+        top: `${box.y * 100}%`,
+        width: `${box.w * 100}%`,
+        height: `${frameHeight(box, shown.aspect) * 100}%`
+      },
+      onPointerDown: (event) => start(event, "move"),
+      onPointerMove: move,
+      onPointerUp: end,
+      onPointerCancel: end,
+      "data-testid": `stage-item-${clip.id}`,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("absolute inset-0 overflow-hidden", !clip.plain && "rounded-[0.6cqw]"), children: [
+          /* @__PURE__ */ jsx(ClipImage, { clip: shown, live: !editable }),
+          clip.kind === "pdf" && !clip.plain && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "pointer-events-none absolute inset-0",
+              style: { background: EDGE_CSS },
+              "data-testid": "stage-clip-edge"
+            }
+          ),
+          !clip.plain && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 rounded-[0.6cqw] ring-1 ring-inset ring-white/15" })
+        ] }),
+        label && !clip.plain && // Under the clip, in the room the layout keeps (CAPTION_SPACE): never over it.
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "pointer-events-none absolute left-0 top-full mt-[0.5cqw] max-w-full truncate text-[1.7cqw] leading-tight",
+            style: { color: TEXT_COLORS.muted },
+            children: label
+          }
+        ),
+        selected && !dragging && /* @__PURE__ */ jsx(ClipViewControls, { clip }),
+        selected && CORNERS.map(({ corner, left, top, cursor }) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute flex size-6 -translate-x-1/2 -translate-y-1/2 items-center justify-center pointer-coarse:size-11",
+            style: { left, top, cursor, touchAction: "none" },
+            onPointerDown: (event) => start(event, corner),
+            "aria-label": `Resize from the ${corner} corner`,
+            "data-testid": `stage-item-resize-${corner}`,
+            children: /* @__PURE__ */ jsx("span", { className: "pointer-events-none size-3 rounded-full border-2 border-primary bg-background" })
+          },
+          corner
+        )),
+        selected && EDGES.map(({ edge, left, top, cursor, label: side }) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute flex size-6 -translate-x-1/2 -translate-y-1/2 items-center justify-center pointer-coarse:size-11",
+            style: { left, top, cursor, touchAction: "none" },
+            onPointerDown: (event) => start(event, edge),
+            "aria-label": `Show more or less at the ${side}`,
+            title: "Drag to show more or less of the page",
+            "data-testid": `stage-item-reshape-${edge}`,
+            children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "pointer-events-none rounded-full border-2 border-primary bg-background",
+                  edge === "n" || edge === "s" ? "h-2 w-4" : "h-4 w-2"
+                )
+              }
+            )
+          },
+          edge
+        ))
+      ]
+    }
+  );
+});
+export {
+  StageItem
+};
+//# sourceMappingURL=StageItem.js.map

package/dist/presentation/StageItem.js.map

@@ -0,0 +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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",
+  "names": ["StageItem"]
+}

package/dist/presentation/box-style.d.ts

@@ -0,0 +1,6 @@
+/** Text boxes' type as CSS (container units: it scales with the stage). */
+import type { CSSProperties } from 'react';
+import { type TextRun } from './boxes';
+/** A size in points as CSS (container units). */
+export declare const cqw: (points: number) => string;
+export declare function runStyle(run: TextRun, font: string): CSSProperties;

package/dist/presentation/box-style.js

@@ -0,0 +1,19 @@
+"use client";
+import { DEFAULT_TEXT_SIZE, pointsToStage } from "./boxes.js";
+import { TEXT_COLORS } from "./theme.js";
+const cqw = (points) => `${pointsToStage(points) * 100}cqw`;
+function runStyle(run, font) {
+  return {
+    fontSize: cqw(run.size ?? DEFAULT_TEXT_SIZE),
+    fontWeight: run.bold ? 700 : 400,
+    fontStyle: run.italic ? "italic" : void 0,
+    textDecoration: run.underline ? "underline" : void 0,
+    color: run.color ?? TEXT_COLORS.body,
+    fontFamily: run.font ? `"${run.font}", ${font}` : font
+  };
+}
+export {
+  cqw,
+  runStyle
+};
+//# sourceMappingURL=box-style.js.map

package/dist/presentation/box-style.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/presentation/box-style.ts"],
+  "sourcesContent": ["/** Text boxes' type as CSS (container units: it scales with the stage). */\n\nimport type { CSSProperties } from 'react'\nimport { DEFAULT_TEXT_SIZE, pointsToStage, type TextRun } from './boxes'\nimport { TEXT_COLORS } from './theme'\n\n/** A size in points as CSS (container units). */\nexport const cqw = (points: number) => `${pointsToStage(points) * 100}cqw`\n\nexport function runStyle(run: TextRun, font: string): CSSProperties {\n  return {\n    fontSize: cqw(run.size ?? DEFAULT_TEXT_SIZE),\n    fontWeight: run.bold ? 700 : 400,\n    fontStyle: run.italic ? 'italic' : undefined,\n    textDecoration: run.underline ? 'underline' : undefined,\n    color: run.color ?? TEXT_COLORS.body,\n    fontFamily: run.font ? `\"${run.font}\", ${font}` : font,\n  }\n}\n"],
+  "mappings": ";AAGA,SAAS,mBAAmB,qBAAmC;AAC/D,SAAS,mBAAmB;AAGrB,MAAM,MAAM,CAAC,WAAmB,GAAG,cAAc,MAAM,IAAI,GAAG;AAE9D,SAAS,SAAS,KAAc,MAA6B;AAClE,SAAO;AAAA,IACL,UAAU,IAAI,IAAI,QAAQ,iBAAiB;AAAA,IAC3C,YAAY,IAAI,OAAO,MAAM;AAAA,IAC7B,WAAW,IAAI,SAAS,WAAW;AAAA,IACnC,gBAAgB,IAAI,YAAY,cAAc;AAAA,IAC9C,OAAO,IAAI,SAAS,YAAY;AAAA,IAChC,YAAY,IAAI,OAAO,IAAI,IAAI,IAAI,MAAM,IAAI,KAAK;AAAA,EACpD;AACF;",
+  "names": []
+}

package/dist/presentation/boxes.d.ts

@@ -0,0 +1,105 @@
+/**
+ * A slide's text boxes and shapes: what a PowerPoint slide is made of besides pictures, so a deck
+ * imported from PowerPoint keeps its look and its words stay editable. A box sits in a frame of its
+ * own (fractions of the stage, its height free), holds styled text (paragraphs of runs) and can be
+ * a shape (a rectangle, a rounded one, an ellipse, a line) with a fill and an outline.
+ *
+ * Type sizes are points on PowerPoint's widescreen slide (13.333 × 7.5 in), so they read the same
+ * here, in the saved PDF and in an exported deck.
+ */
+/** A box's place: left, top, width and height as fractions of the stage. */
+export interface BoxFrame {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+export type BoxShape = 'text' | 'rect' | 'roundRect' | 'ellipse' | 'line';
+export type TextAlign = 'left' | 'center' | 'right' | 'justify';
+export type BoxAnchor = 'top' | 'middle' | 'bottom';
+export interface TextRun {
+    text: string;
+    /** Points on the widescreen slide; absent: `DEFAULT_TEXT_SIZE`. */
+    size?: number;
+    bold?: boolean;
+    italic?: boolean;
+    underline?: boolean;
+    /** `#rrggbb`; absent: the theme's body text colour. */
+    color?: string;
+    /** A typeface name; absent: the theme's. */
+    font?: string;
+}
+export interface Paragraph {
+    runs: TextRun[];
+    align?: TextAlign;
+    /** Its indent level (0 is the outermost). */
+    level?: number;
+    bullet?: boolean;
+}
+export interface SlideBox {
+    id: string;
+    frame: BoxFrame;
+    shape: BoxShape;
+    /** Degrees, clockwise. */
+    rotation?: number;
+    flipH?: boolean;
+    flipV?: boolean;
+    /** `#rrggbb`; absent: no fill. */
+    fill?: string;
+    /** The fill's opacity, 0–1 (default 1). */
+    fillAlpha?: number;
+    line?: {
+        color: string;
+        width: number;
+        dash?: boolean;
+    };
+    paragraphs: Paragraph[];
+    anchor?: BoxAnchor;
+    /** Room between the box's edge and its text, in points (default `DEFAULT_INSET`). */
+    inset?: number;
+    /** The slide's title or body text (a PowerPoint placeholder): what an outline reads. */
+    role?: 'title' | 'body';
+    /** Drawn over the slide's clips (default: under them). */
+    front?: boolean;
+}
+/** A slide's own background, over the theme's: an image (a media key), a gradient or a colour. */
+export interface SlideBackground {
+    color?: string;
+    gradient?: {
+        from: string;
+        to: string;
+        angle: number;
+    };
+    image?: string;
+}
+/** PowerPoint's widescreen slide in points: type sizes are measured against it. */
+export declare const SLIDE_POINTS: {
+    w: number;
+    h: number;
+};
+export declare const DEFAULT_TEXT_SIZE = 18;
+export declare const DEFAULT_INSET = 7.2;
+/** The smallest a box can be made (fractions of the stage). */
+export declare const MIN_BOX = 0.02;
+/** A size in points as a fraction of the stage width (the stage's `cqw` / 100). */
+export declare const pointsToStage: (points: number) => number;
+/** The text of a box, one line per paragraph. */
+export declare const boxText: (box: Pick<SlideBox, "paragraphs">) => string;
+/**
+ * New text typed into a box: one paragraph per line, each keeping the style of the paragraph it
+ * replaces (its first run's type, its alignment, level and bullet), so retyping keeps the look.
+ */
+export declare function withText(box: SlideBox, text: string): SlideBox;
+/** Every run of a box changed by `change` (bold, a size, a colour: the whole box at once). */
+export declare function styleRuns(box: SlideBox, change: (run: TextRun) => TextRun): SlideBox;
+/** A box's first run (what its style controls show). */
+export declare const firstRun: (box: SlideBox) => TextRun | undefined;
+/** The box moved by `dx, dy`, kept on the stage. */
+export declare function moveBox(frame: BoxFrame, dx: number, dy: number): BoxFrame;
+/** A box handle: a corner or a side's middle. */
+export type BoxHandle = 'nw' | 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w';
+/** The box resized from `handle` by `dx, dy` (its shape is free; the opposite side stays put). */
+export declare function stretchBox(frame: BoxFrame, handle: BoxHandle, dx: number, dy: number): BoxFrame;
+export declare const nextBoxId: () => string;
+/** A new box of `shape`, in the middle of the slide, ready to type in. */
+export declare function newBox(shape: BoxShape, accent: string): SlideBox;

package/dist/presentation/boxes.js

@@ -0,0 +1,103 @@
+"use client";
+const SLIDE_POINTS = { w: 960, h: 540 };
+const DEFAULT_TEXT_SIZE = 18;
+const DEFAULT_INSET = 7.2;
+const MIN_BOX = 0.02;
+const pointsToStage = (points) => points / SLIDE_POINTS.w;
+const boxText = (box) => box.paragraphs.map((paragraph) => paragraph.runs.map((run) => run.text).join("")).join("\n");
+function withText(box, text) {
+  const lines = text.split("\n");
+  const fallback = box.paragraphs[box.paragraphs.length - 1] ?? { runs: [{ text: "" }] };
+  const paragraphs = lines.map((line, index) => {
+    const before = box.paragraphs[index] ?? fallback;
+    const { text: _old, ...style } = before.runs[0] ?? { text: "" };
+    void _old;
+    return { ...before, runs: [{ ...style, text: line }] };
+  });
+  return { ...box, paragraphs };
+}
+function styleRuns(box, change) {
+  return {
+    ...box,
+    paragraphs: box.paragraphs.map((paragraph) => ({
+      ...paragraph,
+      runs: paragraph.runs.map(change)
+    }))
+  };
+}
+const firstRun = (box) => box.paragraphs.find((paragraph) => paragraph.runs.length)?.runs[0];
+const clamp = (value, min, max) => max < min ? (min + max) / 2 : Math.min(Math.max(value, min), max);
+function moveBox(frame, dx, dy) {
+  return {
+    ...frame,
+    x: clamp(frame.x + dx, -frame.w / 2, 1 - frame.w / 2),
+    y: clamp(frame.y + dy, -frame.h / 2, 1 - frame.h / 2)
+  };
+}
+function stretchBox(frame, handle, dx, dy) {
+  let { x, y, w, h } = frame;
+  if (handle.includes("w")) {
+    const right = x + w;
+    x = Math.min(x + dx, right - MIN_BOX);
+    w = right - x;
+  } else if (handle.includes("e")) {
+    w = Math.max(MIN_BOX, w + dx);
+  }
+  if (handle.startsWith("n")) {
+    const bottom = y + h;
+    y = Math.min(y + dy, bottom - MIN_BOX);
+    h = bottom - y;
+  } else if (handle.startsWith("s")) {
+    h = Math.max(MIN_BOX, h + dy);
+  }
+  return { x, y, w, h };
+}
+let sequence = 0;
+const nextBoxId = () => `box-${Date.now().toString(36)}-${++sequence}`;
+function newBox(shape, accent) {
+  const id = nextBoxId();
+  if (shape === "text") {
+    return {
+      id,
+      shape,
+      frame: { x: 0.3, y: 0.42, w: 0.4, h: 0.12 },
+      paragraphs: [{ runs: [{ text: "", size: 24 }] }],
+      front: true
+    };
+  }
+  if (shape === "line") {
+    return {
+      id,
+      shape,
+      frame: { x: 0.35, y: 0.5, w: 0.3, h: 0 },
+      line: { color: accent, width: 2 },
+      paragraphs: [],
+      front: true
+    };
+  }
+  return {
+    id,
+    shape,
+    frame: { x: 0.35, y: 0.35, w: 0.3, h: 0.3 },
+    fill: accent,
+    paragraphs: [{ runs: [{ text: "", size: 20, color: "#ffffff" }], align: "center" }],
+    anchor: "middle",
+    front: false
+  };
+}
+export {
+  DEFAULT_INSET,
+  DEFAULT_TEXT_SIZE,
+  MIN_BOX,
+  SLIDE_POINTS,
+  boxText,
+  firstRun,
+  moveBox,
+  newBox,
+  nextBoxId,
+  pointsToStage,
+  stretchBox,
+  styleRuns,
+  withText
+};
+//# sourceMappingURL=boxes.js.map

package/dist/presentation/boxes.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/presentation/boxes.ts"],
+  "sourcesContent": ["/**\n * A slide's text boxes and shapes: what a PowerPoint slide is made of besides pictures, so a deck\n * imported from PowerPoint keeps its look and its words stay editable. A box sits in a frame of its\n * own (fractions of the stage, its height free), holds styled text (paragraphs of runs) and can be\n * a shape (a rectangle, a rounded one, an ellipse, a line) with a fill and an outline.\n *\n * Type sizes are points on PowerPoint's widescreen slide (13.333 \u00D7 7.5 in), so they read the same\n * here, in the saved PDF and in an exported deck.\n */\n\n/** A box's place: left, top, width and height as fractions of the stage. */\nexport interface BoxFrame {\n  x: number\n  y: number\n  w: number\n  h: number\n}\n\nexport type BoxShape = 'text' | 'rect' | 'roundRect' | 'ellipse' | 'line'\nexport type TextAlign = 'left' | 'center' | 'right' | 'justify'\nexport type BoxAnchor = 'top' | 'middle' | 'bottom'\n\nexport interface TextRun {\n  text: string\n  /** Points on the widescreen slide; absent: `DEFAULT_TEXT_SIZE`. */\n  size?: number\n  bold?: boolean\n  italic?: boolean\n  underline?: boolean\n  /** `#rrggbb`; absent: the theme's body text colour. */\n  color?: string\n  /** A typeface name; absent: the theme's. */\n  font?: string\n}\n\nexport interface Paragraph {\n  runs: TextRun[]\n  align?: TextAlign\n  /** Its indent level (0 is the outermost). */\n  level?: number\n  bullet?: boolean\n}\n\nexport interface SlideBox {\n  id: string\n  frame: BoxFrame\n  shape: BoxShape\n  /** Degrees, clockwise. */\n  rotation?: number\n  flipH?: boolean\n  flipV?: boolean\n  /** `#rrggbb`; absent: no fill. */\n  fill?: string\n  /** The fill's opacity, 0\u20131 (default 1). */\n  fillAlpha?: number\n  line?: { color: string; width: number; dash?: boolean }\n  paragraphs: Paragraph[]\n  anchor?: BoxAnchor\n  /** Room between the box's edge and its text, in points (default `DEFAULT_INSET`). */\n  inset?: number\n  /** The slide's title or body text (a PowerPoint placeholder): what an outline reads. */\n  role?: 'title' | 'body'\n  /** Drawn over the slide's clips (default: under them). */\n  front?: boolean\n}\n\n/** A slide's own background, over the theme's: an image (a media key), a gradient or a colour. */\nexport interface SlideBackground {\n  color?: string\n  gradient?: { from: string; to: string; angle: number }\n  image?: string\n}\n\n/** PowerPoint's widescreen slide in points: type sizes are measured against it. */\nexport const SLIDE_POINTS = { w: 960, h: 540 }\nexport const DEFAULT_TEXT_SIZE = 18\nexport const DEFAULT_INSET = 7.2\n/** The smallest a box can be made (fractions of the stage). */\nexport const MIN_BOX = 0.02\n\n/** A size in points as a fraction of the stage width (the stage's `cqw` / 100). */\nexport const pointsToStage = (points: number): number => points / SLIDE_POINTS.w\n\n/** The text of a box, one line per paragraph. */\nexport const boxText = (box: Pick<SlideBox, 'paragraphs'>): string =>\n  box.paragraphs.map((paragraph) => paragraph.runs.map((run) => run.text).join('')).join('\\n')\n\n/**\n * New text typed into a box: one paragraph per line, each keeping the style of the paragraph it\n * replaces (its first run's type, its alignment, level and bullet), so retyping keeps the look.\n */\nexport function withText(box: SlideBox, text: string): SlideBox {\n  const lines = text.split('\\n')\n  const fallback = box.paragraphs[box.paragraphs.length - 1] ?? { runs: [{ text: '' }] }\n  const paragraphs = lines.map((line, index) => {\n    const before = box.paragraphs[index] ?? fallback\n    const { text: _old, ...style } = before.runs[0] ?? { text: '' }\n    void _old\n    return { ...before, runs: [{ ...style, text: line }] }\n  })\n  return { ...box, paragraphs }\n}\n\n/** Every run of a box changed by `change` (bold, a size, a colour: the whole box at once). */\nexport function styleRuns(box: SlideBox, change: (run: TextRun) => TextRun): SlideBox {\n  return {\n    ...box,\n    paragraphs: box.paragraphs.map((paragraph) => ({\n      ...paragraph,\n      runs: paragraph.runs.map(change),\n    })),\n  }\n}\n\n/** A box's first run (what its style controls show). */\nexport const firstRun = (box: SlideBox): TextRun | undefined =>\n  box.paragraphs.find((paragraph) => paragraph.runs.length)?.runs[0]\n\nconst clamp = (value: number, min: number, max: number) =>\n  max < min ? (min + max) / 2 : Math.min(Math.max(value, min), max)\n\n/** The box moved by `dx, dy`, kept on the stage. */\nexport function moveBox(frame: BoxFrame, dx: number, dy: number): BoxFrame {\n  return {\n    ...frame,\n    x: clamp(frame.x + dx, -frame.w / 2, 1 - frame.w / 2),\n    y: clamp(frame.y + dy, -frame.h / 2, 1 - frame.h / 2),\n  }\n}\n\n/** A box handle: a corner or a side's middle. */\nexport type BoxHandle = 'nw' | 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w'\n\n/** The box resized from `handle` by `dx, dy` (its shape is free; the opposite side stays put). */\nexport function stretchBox(frame: BoxFrame, handle: BoxHandle, dx: number, dy: number): BoxFrame {\n  let { x, y, w, h } = frame\n  if (handle.includes('w')) {\n    const right = x + w\n    x = Math.min(x + dx, right - MIN_BOX)\n    w = right - x\n  } else if (handle.includes('e')) {\n    w = Math.max(MIN_BOX, w + dx)\n  }\n  if (handle.startsWith('n')) {\n    const bottom = y + h\n    y = Math.min(y + dy, bottom - MIN_BOX)\n    h = bottom - y\n  } else if (handle.startsWith('s')) {\n    h = Math.max(MIN_BOX, h + dy)\n  }\n  return { x, y, w, h }\n}\n\nlet sequence = 0\nexport const nextBoxId = (): string => `box-${Date.now().toString(36)}-${++sequence}`\n\n/** A new box of `shape`, in the middle of the slide, ready to type in. */\nexport function newBox(shape: BoxShape, accent: string): SlideBox {\n  const id = nextBoxId()\n  if (shape === 'text') {\n    return {\n      id,\n      shape,\n      frame: { x: 0.3, y: 0.42, w: 0.4, h: 0.12 },\n      paragraphs: [{ runs: [{ text: '', size: 24 }] }],\n      front: true,\n    }\n  }\n  if (shape === 'line') {\n    return {\n      id,\n      shape,\n      frame: { x: 0.35, y: 0.5, w: 0.3, h: 0 },\n      line: { color: accent, width: 2 },\n      paragraphs: [],\n      front: true,\n    }\n  }\n  return {\n    id,\n    shape,\n    frame: { x: 0.35, y: 0.35, w: 0.3, h: 0.3 },\n    fill: accent,\n    paragraphs: [{ runs: [{ text: '', size: 20, color: '#ffffff' }], align: 'center' }],\n    anchor: 'middle',\n    front: false,\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/presentation/draw-boxes.d.ts

@@ -0,0 +1,8 @@
+/**
+ * A slide's text boxes and shapes drawn on a canvas, as the stage draws them (`StageBox`): for the
+ * saved PDF's pages. Text wraps by words across runs of different type.
+ */
+import { type SlideBox } from './boxes';
+export declare function drawBox(context: CanvasRenderingContext2D, box: SlideBox, width: number, height: number, themeFont: string): void;
+/** The words a box shows, for a searchable PDF. */
+export declare const boxWords: (box: SlideBox) => string[];

package/dist/presentation/draw-boxes.js

@@ -0,0 +1,130 @@
+"use client";
+import {
+  DEFAULT_INSET,
+  DEFAULT_TEXT_SIZE,
+  pointsToStage
+} from "./boxes.js";
+import { TEXT_COLORS } from "./theme.js";
+const LINE_HEIGHT = 1.2;
+function fontOf(run, themeFont, width) {
+  const size = pointsToStage(run.size ?? DEFAULT_TEXT_SIZE) * width;
+  const family = run.font ? `"${run.font}", ${themeFont}` : themeFont;
+  return `${run.italic ? "italic " : ""}${run.bold ? 700 : 400} ${size}px ${family}`;
+}
+function outline(context, box, w, h) {
+  context.beginPath();
+  if (box.shape === "ellipse") context.ellipse(w / 2, h / 2, w / 2, h / 2, 0, 0, Math.PI * 2);
+  else if (box.shape === "roundRect") context.roundRect(0, 0, w, h, Math.min(w, h) / 6);
+  else context.rect(0, 0, w, h);
+}
+function drawBox(context, box, width, height, themeFont) {
+  const { frame } = box;
+  const w = frame.w * width;
+  const h = frame.h * height;
+  context.save();
+  context.translate(frame.x * width + w / 2, frame.y * height + h / 2);
+  if (box.rotation) context.rotate(box.rotation * Math.PI / 180);
+  context.translate(-w / 2, -h / 2);
+  const lineWidth = box.line ? Math.max(1, pointsToStage(box.line.width) * width) : 0;
+  if (box.shape === "line") {
+    context.strokeStyle = box.line?.color ?? TEXT_COLORS.body;
+    context.lineWidth = lineWidth || 1;
+    if (box.line?.dash) context.setLineDash([lineWidth * 3, lineWidth * 2]);
+    context.beginPath();
+    context.moveTo(0, box.flipV ? h : 0);
+    context.lineTo(w, box.flipV ? 0 : h);
+    context.stroke();
+    context.restore();
+    return;
+  }
+  if (box.fill) {
+    context.globalAlpha = box.fillAlpha ?? 1;
+    context.fillStyle = box.fill;
+    outline(context, box, w, h);
+    context.fill();
+    context.globalAlpha = 1;
+  }
+  if (box.line && lineWidth) {
+    context.strokeStyle = box.line.color;
+    context.lineWidth = lineWidth;
+    if (box.line.dash) context.setLineDash([lineWidth * 3, lineWidth * 2]);
+    outline(context, box, w, h);
+    context.stroke();
+    context.setLineDash([]);
+  }
+  const inset = pointsToStage(box.inset ?? DEFAULT_INSET) * width;
+  const room = w - 2 * inset;
+  context.textBaseline = "alphabetic";
+  const lines = [];
+  for (const paragraph of box.paragraphs) {
+    const size = pointsToStage(paragraph.runs[0]?.size ?? DEFAULT_TEXT_SIZE) * width;
+    const indent = (paragraph.level ?? 0) * 0.5 * size + (paragraph.bullet ? size * 0.9 : 0);
+    const words = [];
+    for (const run of paragraph.runs) {
+      context.font = fontOf(run, themeFont, width);
+      for (const part of run.text.split(/(\s+)/).filter(Boolean)) {
+        words.push({ text: part, run, width: context.measureText(part).width });
+      }
+    }
+    let line = [];
+    let used = 0;
+    let first = true;
+    const flush = () => {
+      lines.push({
+        pieces: line,
+        size,
+        align: paragraph.align ?? "left",
+        indent,
+        ...first && paragraph.bullet ? { bullet: paragraph.runs[0] } : {}
+      });
+      first = false;
+      line = [];
+      used = 0;
+    };
+    for (const word of words) {
+      if (used + word.width > room - indent && line.length && word.text.trim()) flush();
+      if (!line.length && !word.text.trim()) continue;
+      line.push(word);
+      used += word.width;
+    }
+    flush();
+  }
+  const total = lines.reduce((sum, line) => sum + line.size * LINE_HEIGHT, 0);
+  const free = h - 2 * inset - total;
+  let y = inset + (box.anchor === "middle" ? free / 2 : box.anchor === "bottom" ? free : 0);
+  context.save();
+  context.beginPath();
+  context.rect(0, 0, w, h);
+  context.clip();
+  for (const line of lines) {
+    const lineWidth2 = line.pieces.reduce((sum, piece) => sum + piece.width, 0);
+    const space = room - line.indent;
+    let x = inset + line.indent + (line.align === "center" ? (space - lineWidth2) / 2 : line.align === "right" ? space - lineWidth2 : 0);
+    const baseline = y + line.size * (LINE_HEIGHT - 0.2);
+    if (line.bullet) {
+      context.font = fontOf(line.bullet, themeFont, width);
+      context.fillStyle = line.bullet.color ?? TEXT_COLORS.body;
+      context.fillText("\u2022", inset + line.indent - line.size * 0.9, baseline);
+    }
+    for (const piece of line.pieces) {
+      context.font = fontOf(piece.run, themeFont, width);
+      context.fillStyle = piece.run.color ?? TEXT_COLORS.body;
+      context.fillText(piece.text, x, baseline);
+      if (piece.run.underline) {
+        context.fillRect(x, baseline + line.size * 0.08, piece.width, Math.max(1, line.size * 0.05));
+      }
+      x += piece.width;
+    }
+    y += line.size * LINE_HEIGHT;
+  }
+  context.restore();
+  context.restore();
+}
+const boxWords = (box) => box.paragraphs.map(
+  (paragraph) => paragraph.runs.map((run) => run.text).join("").trim()
+).filter(Boolean);
+export {
+  boxWords,
+  drawBox
+};
+//# sourceMappingURL=draw-boxes.js.map