@arbidocs/blocks 0.5.120 → 0.5.121

package/dist/presentation/useClipDrag.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/presentation/useClipDrag.ts"],
+  "sourcesContent": ["/**\n * Dragging a clip from the tray onto a slide, with pointer events: the same for a mouse, a pen and\n * a finger (HTML drag and drop does not work on touch screens). A drag starts once the pointer has\n * moved a little; a thumbnail follows it; on release, what is under it decides: the stage (the\n * clip goes on the current slide where it was dropped) or a slide chip (on that slide). A press\n * that does not move is a tap.\n *\n * Drop targets are marked with `data-presentation-drop` (\"stage\", or \"slide\" with\n * `data-slide-index`), so they are found under the pointer in whichever window the tray is in.\n */\n\nimport { useRef, useState, type PointerEvent as ReactPointerEvent } from 'react'\nimport { usePresentation } from './store'\n\n/** How far (px) the pointer moves before a press becomes a drag. */\nconst DRAG_THRESHOLD = 6\n\nexport const DROP_ATTRIBUTE = 'data-presentation-drop'\n\nexport interface ClipDrag {\n  /** Where the dragged thumbnail is (client px), while dragging. */\n  ghost: { x: number; y: number } | null\n  handlers: {\n    onPointerDown: (event: ReactPointerEvent<HTMLElement>) => void\n    onPointerMove: (event: ReactPointerEvent<HTMLElement>) => void\n    onPointerUp: (event: ReactPointerEvent<HTMLElement>) => void\n    onPointerCancel: () => void\n  }\n}\n\n/** Drop a clip at a point of the window: on the stage there, or on a slide chip. */\nfunction dropAt(doc: Document, clipId: string, x: number, y: number): boolean {\n  const target = doc.elementFromPoint(x, y)?.closest(`[${DROP_ATTRIBUTE}]`)\n  if (!target) return false\n  const state = usePresentation.getState()\n  if (target.getAttribute(DROP_ATTRIBUTE) === 'slide') {\n    const index = Number(target.getAttribute('data-slide-index'))\n    if (!Number.isInteger(index)) return false\n    state.goTo(index)\n    state.place(clipId)\n    return true\n  }\n  // A slide's stage (the editor shows them all): that slide, at the point.\n  const index = Number(target.getAttribute('data-slide-index'))\n  if (target.hasAttribute('data-slide-index') && Number.isInteger(index)) state.goTo(index)\n  const box = target.getBoundingClientRect()\n  state.place(clipId, { x: (x - box.left) / box.width, y: (y - box.top) / box.height })\n  return true\n}\n\nexport function useClipDrag(clipId: string, onTap: () => void): ClipDrag {\n  const press = useRef<{ x: number; y: number; dragging: boolean } | null>(null)\n  const [ghost, setGhost] = useState<{ x: number; y: number } | null>(null)\n\n  const end = () => {\n    press.current = null\n    setGhost(null)\n    usePresentation.getState().setDragging(null)\n  }\n\n  return {\n    ghost,\n    handlers: {\n      onPointerDown: (event) => {\n        if (event.button !== 0) return\n        press.current = { x: event.clientX, y: event.clientY, dragging: false }\n      },\n      onPointerMove: (event) => {\n        const p = press.current\n        if (!p) return\n        if (!p.dragging) {\n          if (Math.hypot(event.clientX - p.x, event.clientY - p.y) < DRAG_THRESHOLD) return\n          p.dragging = true\n          // Keep receiving the pointer wherever it goes, and stop the browser scrolling for it.\n          event.currentTarget.setPointerCapture(event.pointerId)\n          usePresentation.getState().setDragging(clipId)\n        }\n        event.preventDefault()\n        setGhost({ x: event.clientX, y: event.clientY })\n      },\n      onPointerUp: (event) => {\n        const p = press.current\n        if (p?.dragging)\n          dropAt(event.currentTarget.ownerDocument, clipId, event.clientX, event.clientY)\n        else if (p) onTap()\n        end()\n      },\n      onPointerCancel: end,\n    },\n  }\n}\n"],
+  "mappings": ";AAWA,SAAS,QAAQ,gBAAwD;AACzE,SAAS,uBAAuB;AAGhC,MAAM,iBAAiB;AAEhB,MAAM,iBAAiB;AAc9B,SAAS,OAAO,KAAe,QAAgB,GAAW,GAAoB;AAC5E,QAAM,SAAS,IAAI,iBAAiB,GAAG,CAAC,GAAG,QAAQ,IAAI,cAAc,GAAG;AACxE,MAAI,CAAC,OAAQ,QAAO;AACpB,QAAM,QAAQ,gBAAgB,SAAS;AACvC,MAAI,OAAO,aAAa,cAAc,MAAM,SAAS;AACnD,UAAMA,SAAQ,OAAO,OAAO,aAAa,kBAAkB,CAAC;AAC5D,QAAI,CAAC,OAAO,UAAUA,MAAK,EAAG,QAAO;AACrC,UAAM,KAAKA,MAAK;AAChB,UAAM,MAAM,MAAM;AAClB,WAAO;AAAA,EACT;AAEA,QAAM,QAAQ,OAAO,OAAO,aAAa,kBAAkB,CAAC;AAC5D,MAAI,OAAO,aAAa,kBAAkB,KAAK,OAAO,UAAU,KAAK,EAAG,OAAM,KAAK,KAAK;AACxF,QAAM,MAAM,OAAO,sBAAsB;AACzC,QAAM,MAAM,QAAQ,EAAE,IAAI,IAAI,IAAI,QAAQ,IAAI,OAAO,IAAI,IAAI,IAAI,OAAO,IAAI,OAAO,CAAC;AACpF,SAAO;AACT;AAEO,SAAS,YAAY,QAAgB,OAA6B;AACvE,QAAM,QAAQ,OAA2D,IAAI;AAC7E,QAAM,CAAC,OAAO,QAAQ,IAAI,SAA0C,IAAI;AAExE,QAAM,MAAM,MAAM;AAChB,UAAM,UAAU;AAChB,aAAS,IAAI;AACb,oBAAgB,SAAS,EAAE,YAAY,IAAI;AAAA,EAC7C;AAEA,SAAO;AAAA,IACL;AAAA,IACA,UAAU;AAAA,MACR,eAAe,CAAC,UAAU;AACxB,YAAI,MAAM,WAAW,EAAG;AACxB,cAAM,UAAU,EAAE,GAAG,MAAM,SAAS,GAAG,MAAM,SAAS,UAAU,MAAM;AAAA,MACxE;AAAA,MACA,eAAe,CAAC,UAAU;AACxB,cAAM,IAAI,MAAM;AAChB,YAAI,CAAC,EAAG;AACR,YAAI,CAAC,EAAE,UAAU;AACf,cAAI,KAAK,MAAM,MAAM,UAAU,EAAE,GAAG,MAAM,UAAU,EAAE,CAAC,IAAI,eAAgB;AAC3E,YAAE,WAAW;AAEb,gBAAM,cAAc,kBAAkB,MAAM,SAAS;AACrD,0BAAgB,SAAS,EAAE,YAAY,MAAM;AAAA,QAC/C;AACA,cAAM,eAAe;AACrB,iBAAS,EAAE,GAAG,MAAM,SAAS,GAAG,MAAM,QAAQ,CAAC;AAAA,MACjD;AAAA,MACA,aAAa,CAAC,UAAU;AACtB,cAAM,IAAI,MAAM;AAChB,YAAI,GAAG;AACL,iBAAO,MAAM,cAAc,eAAe,QAAQ,MAAM,SAAS,MAAM,OAAO;AAAA,iBACvE,EAAG,OAAM;AAClB,YAAI;AAAA,MACN;AAAA,MACA,iBAAiB;AAAA,IACnB;AAAA,EACF;AACF;",
+  "names": ["index"]
+}

package/dist/presentation/useObjectUrl.d.ts

@@ -0,0 +1,6 @@
+/**
+ * An object URL for a file, owned by the mount that made it and revoked when it unmounts or the
+ * file changes. Made in an effect, not a memo: a memoised URL survives a remount (React's
+ * StrictMode replays mount effects) while the first mount's cleanup has already revoked it.
+ */
+export declare function useObjectUrl(file: Blob): string | undefined;

package/dist/presentation/useObjectUrl.js

@@ -0,0 +1,15 @@
+"use client";
+import { useEffect, useState } from "react";
+function useObjectUrl(file) {
+  const [url, setUrl] = useState();
+  useEffect(() => {
+    const next = URL.createObjectURL(file);
+    setUrl(next);
+    return () => URL.revokeObjectURL(next);
+  }, [file]);
+  return url;
+}
+export {
+  useObjectUrl
+};
+//# sourceMappingURL=useObjectUrl.js.map

package/dist/presentation/useObjectUrl.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/presentation/useObjectUrl.ts"],
+  "sourcesContent": ["import { useEffect, useState } from 'react'\n\n/**\n * An object URL for a file, owned by the mount that made it and revoked when it unmounts or the\n * file changes. Made in an effect, not a memo: a memoised URL survives a remount (React's\n * StrictMode replays mount effects) while the first mount's cleanup has already revoked it.\n */\nexport function useObjectUrl(file: Blob): string | undefined {\n  const [url, setUrl] = useState<string>()\n  useEffect(() => {\n    const next = URL.createObjectURL(file)\n    setUrl(next)\n    return () => URL.revokeObjectURL(next)\n  }, [file])\n  return url\n}\n"],
+  "mappings": ";AAAA,SAAS,WAAW,gBAAgB;AAO7B,SAAS,aAAa,MAAgC;AAC3D,QAAM,CAAC,KAAK,MAAM,IAAI,SAAiB;AACvC,YAAU,MAAM;AACd,UAAM,OAAO,IAAI,gBAAgB,IAAI;AACrC,WAAO,IAAI;AACX,WAAO,MAAM,IAAI,gBAAgB,IAAI;AAAA,EACvC,GAAG,CAAC,IAAI,CAAC;AACT,SAAO;AACT;",
+  "names": []
+}

package/dist/presentation/usePresenterKeys.d.ts

@@ -0,0 +1,13 @@
+/**
+ * The keys of the presentation window. A presenter (or a presentation clicker, which sends Page Up /
+ * Page Down and "." or "b"): previous / next slide and blank the stage; while presenting, F for
+ * full screen and Escape back to editing. While editing with a clip selected: the arrows nudge it
+ * (Shift: further), Delete takes it off the slide and Escape deselects it.
+ */
+/** Full screen on or off for a window's page (from a key or click in that window). */
+export declare function toggleFullscreen(view: Window): void;
+export interface PresenterSelection {
+    clipId: string | null;
+    clear: () => void;
+}
+export declare function usePresenterKeys(view: Window | null | undefined, presenting: boolean, selection?: PresenterSelection): void;

package/dist/presentation/usePresenterKeys.js

@@ -0,0 +1,62 @@
+"use client";
+import { useEffect } from "react";
+import { toggleStageVideos } from "./stage-videos.js";
+import { STAGE_ASPECT } from "./model.js";
+import { usePresentation } from "./store.js";
+import { moveBox } from "./boxes.js";
+const NUDGE = 5e-3;
+const BIG_NUDGE = 0.04;
+function toggleFullscreen(view) {
+  const doc = view.document;
+  if (doc.fullscreenElement) void doc.exitFullscreen();
+  else void doc.documentElement.requestFullscreen?.();
+}
+function usePresenterKeys(view, presenting, selection) {
+  const selected = presenting ? null : selection?.clipId ?? null;
+  const clear = selection?.clear;
+  useEffect(() => {
+    if (!view) return;
+    const onKeyDown = (event) => {
+      if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.altKey) return;
+      const target = event.target;
+      if (target?.closest?.('input, textarea, select, [contenteditable="true"]')) return;
+      const state = usePresentation.getState();
+      const key = event.key;
+      const onSlide = selected && state.slides[state.current]?.items.some((i) => i.clipId === selected);
+      const box = selected?.startsWith("box-") ? state.slides.flatMap((slide) => slide.boxes).find((entry) => entry.id === selected) : void 0;
+      if (box && key.startsWith("Arrow")) {
+        const step = event.shiftKey ? BIG_NUDGE : NUDGE;
+        const dx = key === "ArrowLeft" ? -step : key === "ArrowRight" ? step : 0;
+        const dy = (key === "ArrowUp" ? -step : key === "ArrowDown" ? step : 0) * STAGE_ASPECT;
+        state.updateBox(box.id, (entry) => ({ ...entry, frame: moveBox(entry.frame, dx, dy) }));
+      } else if (box && (key === "Delete" || key === "Backspace")) {
+        state.removeBox(box.id);
+        clear?.();
+      } else if (onSlide && key.startsWith("Arrow")) {
+        const step = event.shiftKey ? BIG_NUDGE : NUDGE;
+        const dx = key === "ArrowLeft" ? -step : key === "ArrowRight" ? step : 0;
+        const dy = (key === "ArrowUp" ? -step : key === "ArrowDown" ? step : 0) * STAGE_ASPECT;
+        state.nudge(selected, dx, dy);
+      } else if (onSlide && (key === "Delete" || key === "Backspace")) {
+        state.unplace(selected);
+        clear?.();
+      } else if (selected && key === "Escape") clear?.();
+      else if (!presenting) return;
+      else if (key === "ArrowRight" || key === "PageDown") state.goTo(state.current + 1);
+      else if (key === "ArrowLeft" || key === "PageUp") state.goTo(state.current - 1);
+      else if (key === "b" || key === "B" || key === ".") state.setBlank(!state.blank);
+      else if (presenting && (key === "f" || key === "F")) toggleFullscreen(view);
+      else if (presenting && key === " " && toggleStageVideos(view.document)) {
+      } else if (presenting && key === "Escape") state.setPresenting(false);
+      else return;
+      event.preventDefault();
+    };
+    view.addEventListener("keydown", onKeyDown);
+    return () => view.removeEventListener("keydown", onKeyDown);
+  }, [view, presenting, selected, clear]);
+}
+export {
+  toggleFullscreen,
+  usePresenterKeys
+};
+//# sourceMappingURL=usePresenterKeys.js.map

package/dist/presentation/usePresenterKeys.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/presentation/usePresenterKeys.ts"],
+  "sourcesContent": ["/**\n * The keys of the presentation window. A presenter (or a presentation clicker, which sends Page Up /\n * Page Down and \".\" or \"b\"): previous / next slide and blank the stage; while presenting, F for\n * full screen and Escape back to editing. While editing with a clip selected: the arrows nudge it\n * (Shift: further), Delete takes it off the slide and Escape deselects it.\n */\n\nimport { useEffect } from 'react'\nimport { toggleStageVideos } from './stage-videos'\nimport { STAGE_ASPECT } from './model'\nimport { usePresentation } from './store'\nimport { moveBox } from './boxes'\n\n/** A nudge, as a fraction of the stage width (vertical nudges move as far on screen). */\nconst NUDGE = 0.005\nconst BIG_NUDGE = 0.04\n\n/** Full screen on or off for a window's page (from a key or click in that window). */\nexport function toggleFullscreen(view: Window): void {\n  const doc = view.document\n  if (doc.fullscreenElement) void doc.exitFullscreen()\n  else void doc.documentElement.requestFullscreen?.()\n}\n\nexport interface PresenterSelection {\n  clipId: string | null\n  clear: () => void\n}\n\nexport function usePresenterKeys(\n  view: Window | null | undefined,\n  presenting: boolean,\n  selection?: PresenterSelection\n): void {\n  const selected = presenting ? null : (selection?.clipId ?? null)\n  const clear = selection?.clear\n  useEffect(() => {\n    if (!view) return\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.altKey) return\n      const target = event.target as HTMLElement | null\n      if (target?.closest?.('input, textarea, select, [contenteditable=\"true\"]')) return\n      const state = usePresentation.getState()\n      const key = event.key\n      const onSlide =\n        selected && state.slides[state.current]?.items.some((i) => i.clipId === selected)\n      const box = selected?.startsWith('box-')\n        ? state.slides.flatMap((slide) => slide.boxes).find((entry) => entry.id === selected)\n        : undefined\n      if (box && key.startsWith('Arrow')) {\n        const step = event.shiftKey ? BIG_NUDGE : NUDGE\n        const dx = key === 'ArrowLeft' ? -step : key === 'ArrowRight' ? step : 0\n        const dy = (key === 'ArrowUp' ? -step : key === 'ArrowDown' ? step : 0) * STAGE_ASPECT\n        state.updateBox(box.id, (entry) => ({ ...entry, frame: moveBox(entry.frame, dx, dy) }))\n      } else if (box && (key === 'Delete' || key === 'Backspace')) {\n        state.removeBox(box.id)\n        clear?.()\n      } else if (onSlide && key.startsWith('Arrow')) {\n        const step = event.shiftKey ? BIG_NUDGE : NUDGE\n        const dx = key === 'ArrowLeft' ? -step : key === 'ArrowRight' ? step : 0\n        const dy = (key === 'ArrowUp' ? -step : key === 'ArrowDown' ? step : 0) * STAGE_ASPECT\n        state.nudge(selected, dx, dy)\n      } else if (onSlide && (key === 'Delete' || key === 'Backspace')) {\n        state.unplace(selected)\n        clear?.()\n      } else if (selected && key === 'Escape') clear?.()\n      // Editing (in the app's own window too): only a selected clip takes keys.\n      else if (!presenting) return\n      else if (key === 'ArrowRight' || key === 'PageDown') state.goTo(state.current + 1)\n      else if (key === 'ArrowLeft' || key === 'PageUp') state.goTo(state.current - 1)\n      else if (key === 'b' || key === 'B' || key === '.') state.setBlank(!state.blank)\n      else if (presenting && (key === 'f' || key === 'F')) toggleFullscreen(view)\n      // Space plays or pauses the slide's videos.\n      else if (presenting && key === ' ' && toggleStageVideos(view.document)) {\n        // handled\n      }\n      // Out of full screen the browser takes the first Escape; the next one stops presenting.\n      else if (presenting && key === 'Escape') state.setPresenting(false)\n      else return\n      event.preventDefault()\n    }\n    view.addEventListener('keydown', onKeyDown)\n    return () => view.removeEventListener('keydown', onKeyDown)\n  }, [view, presenting, selected, clear])\n}\n"],
+  "mappings": ";AAOA,SAAS,iBAAiB;AAC1B,SAAS,yBAAyB;AAClC,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,eAAe;AAGxB,MAAM,QAAQ;AACd,MAAM,YAAY;AAGX,SAAS,iBAAiB,MAAoB;AACnD,QAAM,MAAM,KAAK;AACjB,MAAI,IAAI,kBAAmB,MAAK,IAAI,eAAe;AAAA,MAC9C,MAAK,IAAI,gBAAgB,oBAAoB;AACpD;AAOO,SAAS,iBACd,MACA,YACA,WACM;AACN,QAAM,WAAW,aAAa,OAAQ,WAAW,UAAU;AAC3D,QAAM,QAAQ,WAAW;AACzB,YAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,UAAM,YAAY,CAAC,UAAyB;AAC1C,UAAI,MAAM,oBAAoB,MAAM,WAAW,MAAM,WAAW,MAAM,OAAQ;AAC9E,YAAM,SAAS,MAAM;AACrB,UAAI,QAAQ,UAAU,mDAAmD,EAAG;AAC5E,YAAM,QAAQ,gBAAgB,SAAS;AACvC,YAAM,MAAM,MAAM;AAClB,YAAM,UACJ,YAAY,MAAM,OAAO,MAAM,OAAO,GAAG,MAAM,KAAK,CAAC,MAAM,EAAE,WAAW,QAAQ;AAClF,YAAM,MAAM,UAAU,WAAW,MAAM,IACnC,MAAM,OAAO,QAAQ,CAAC,UAAU,MAAM,KAAK,EAAE,KAAK,CAAC,UAAU,MAAM,OAAO,QAAQ,IAClF;AACJ,UAAI,OAAO,IAAI,WAAW,OAAO,GAAG;AAClC,cAAM,OAAO,MAAM,WAAW,YAAY;AAC1C,cAAM,KAAK,QAAQ,cAAc,CAAC,OAAO,QAAQ,eAAe,OAAO;AACvE,cAAM,MAAM,QAAQ,YAAY,CAAC,OAAO,QAAQ,cAAc,OAAO,KAAK;AAC1E,cAAM,UAAU,IAAI,IAAI,CAAC,WAAW,EAAE,GAAG,OAAO,OAAO,QAAQ,MAAM,OAAO,IAAI,EAAE,EAAE,EAAE;AAAA,MACxF,WAAW,QAAQ,QAAQ,YAAY,QAAQ,cAAc;AAC3D,cAAM,UAAU,IAAI,EAAE;AACtB,gBAAQ;AAAA,MACV,WAAW,WAAW,IAAI,WAAW,OAAO,GAAG;AAC7C,cAAM,OAAO,MAAM,WAAW,YAAY;AAC1C,cAAM,KAAK,QAAQ,cAAc,CAAC,OAAO,QAAQ,eAAe,OAAO;AACvE,cAAM,MAAM,QAAQ,YAAY,CAAC,OAAO,QAAQ,cAAc,OAAO,KAAK;AAC1E,cAAM,MAAM,UAAU,IAAI,EAAE;AAAA,MAC9B,WAAW,YAAY,QAAQ,YAAY,QAAQ,cAAc;AAC/D,cAAM,QAAQ,QAAQ;AACtB,gBAAQ;AAAA,MACV,WAAW,YAAY,QAAQ,SAAU,SAAQ;AAAA,eAExC,CAAC,WAAY;AAAA,eACb,QAAQ,gBAAgB,QAAQ,WAAY,OAAM,KAAK,MAAM,UAAU,CAAC;AAAA,eACxE,QAAQ,eAAe,QAAQ,SAAU,OAAM,KAAK,MAAM,UAAU,CAAC;AAAA,eACrE,QAAQ,OAAO,QAAQ,OAAO,QAAQ,IAAK,OAAM,SAAS,CAAC,MAAM,KAAK;AAAA,eACtE,eAAe,QAAQ,OAAO,QAAQ,KAAM,kBAAiB,IAAI;AAAA,eAEjE,cAAc,QAAQ,OAAO,kBAAkB,KAAK,QAAQ,GAAG;AAAA,MAExE,WAES,cAAc,QAAQ,SAAU,OAAM,cAAc,KAAK;AAAA,UAC7D;AACL,YAAM,eAAe;AAAA,IACvB;AACA,SAAK,iBAAiB,WAAW,SAAS;AAC1C,WAAO,MAAM,KAAK,oBAAoB,WAAW,SAAS;AAAA,EAC5D,GAAG,CAAC,MAAM,YAAY,UAAU,KAAK,CAAC;AACxC;",
+  "names": []
+}