@arbidocs/blocks 0.5.122 → 0.5.123

package/dist/presentation/BoxActionBar.d.ts

@@ -1,6 +1,6 @@
 /**
- * The floating bar over a selected text box or shape: its type (smaller, larger, bold, italic, its
- * colour), its alignment, its fill, in front of or behind the clips, delete. Colours are picked with
+ * The floating bar over a selected text box or shape: its type (smaller, larger, bold, its
+ * colour), its fill and delete; italic, alignment and stacking in its "…". Colours are picked with
  * the system's colour picker.
  */
 import { type SlideBox } from './boxes';

package/dist/presentation/BoxActionBar.js

@@ -10,23 +10,26 @@ import {
   Bold,
   BringToFront,
   Italic,
+  MoreHorizontal,
   PaintBucket,
   SendToBack,
   Trash2
 } from "lucide-react";
-import { cn } from "@arbidocs/react/ui";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  cn
+} from "@arbidocs/react/ui";
 import { ACTION, Action } from "./ClipActionBar.js";
 import { DEFAULT_TEXT_SIZE, firstRun, styleRuns } from "./boxes.js";
 import { usePresentation } from "./store.js";
 import { TEXT_COLORS } from "./theme.js";
 const SIZE_STEPS = [8, 10, 12, 14, 16, 18, 20, 24, 28, 32, 36, 44, 54, 66, 80, 96];
 const nextSize = (size, up) => up ? SIZE_STEPS.find((step) => step > size + 0.5) ?? size : [...SIZE_STEPS].reverse().find((step) => step < size - 0.5) ?? size;
-const ALIGN_NEXT = {
-  left: "center",
-  center: "right",
-  right: "left",
-  justify: "left"
-};
 const ALIGN_ICON = {
   left: /* @__PURE__ */ jsx(AlignLeft, { className: "size-4" }),
   center: /* @__PURE__ */ jsx(AlignCenter, { className: "size-4" }),
@@ -114,25 +117,6 @@ function BoxActionBar({ box, onRemoved }) {
               children: /* @__PURE__ */ jsx(Bold, { className: cn("size-4", run?.bold && "text-primary") })
             }
           ),
-          /* @__PURE__ */ jsx(
-            Action,
-            {
-              label: "Italic",
-              onClick: () => update((b) => styleRuns(b, (r) => ({ ...r, italic: !run?.italic }))),
-              children: /* @__PURE__ */ jsx(Italic, { className: cn("size-4", run?.italic && "text-primary") })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Action,
-            {
-              label: "Align",
-              onClick: () => update((b) => ({
-                ...b,
-                paragraphs: b.paragraphs.map((p) => ({ ...p, align: ALIGN_NEXT[align] }))
-              })),
-              children: ALIGN_ICON[align]
-            }
-          ),
           /* @__PURE__ */ jsx(
             ColorAction,
             {
@@ -154,10 +138,58 @@ function BoxActionBar({ box, onRemoved }) {
             children: /* @__PURE__ */ jsx(PaintBucket, { className: "size-4" })
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: "mx-0.5 h-5 w-px bg-border" }),
-        /* @__PURE__ */ jsx(Action, { label: "In front of the clips", onClick: () => actions.restackBox(box.id, "front"), children: /* @__PURE__ */ jsx(BringToFront, { className: "size-4" }) }),
-        /* @__PURE__ */ jsx(Action, { label: "Behind the clips", onClick: () => actions.restackBox(box.id, "back"), children: /* @__PURE__ */ jsx(SendToBack, { className: "size-4" }) }),
-        /* @__PURE__ */ jsx("div", { className: "mx-0.5 h-5 w-px bg-border" }),
+        /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+          /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: ACTION,
+              title: "More",
+              "aria-label": "More",
+              "data-testid": "box-more-menu",
+              children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "size-4" })
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "start", children: [
+            text && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs(
+                DropdownMenuCheckboxItem,
+                {
+                  checked: !!run?.italic,
+                  onCheckedChange: () => update((b) => styleRuns(b, (r) => ({ ...r, italic: !run?.italic }))),
+                  children: [
+                    /* @__PURE__ */ jsx(Italic, { className: "size-4" }),
+                    /* @__PURE__ */ jsx("span", { className: "ml-2", children: "Italic" })
+                  ]
+                }
+              ),
+              ["left", "center", "right"].map((value) => /* @__PURE__ */ jsxs(
+                DropdownMenuCheckboxItem,
+                {
+                  checked: align === value,
+                  onCheckedChange: () => update((b) => ({
+                    ...b,
+                    paragraphs: b.paragraphs.map((p) => ({ ...p, align: value }))
+                  })),
+                  children: [
+                    ALIGN_ICON[value],
+                    /* @__PURE__ */ jsx("span", { className: "ml-2", children: value === "left" ? "Align left" : value === "center" ? "Centre" : "Align right" })
+                  ]
+                },
+                value
+              )),
+              /* @__PURE__ */ jsx(DropdownMenuSeparator, {})
+            ] }),
+            /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: () => actions.restackBox(box.id, "front"), children: [
+              /* @__PURE__ */ jsx(BringToFront, { className: "size-4" }),
+              /* @__PURE__ */ jsx("span", { className: "ml-2", children: "In front of the clips" })
+            ] }),
+            /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: () => actions.restackBox(box.id, "back"), children: [
+              /* @__PURE__ */ jsx(SendToBack, { className: "size-4" }),
+              /* @__PURE__ */ jsx("span", { className: "ml-2", children: "Behind the clips" })
+            ] })
+          ] })
+        ] }),
         /* @__PURE__ */ jsx(
           "button",
           {

package/dist/presentation/BoxActionBar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/presentation/BoxActionBar.tsx"],
-  "sourcesContent": ["/**\n * The floating bar over a selected text box or shape: its type (smaller, larger, bold, italic, its\n * colour), its alignment, its fill, in front of or behind the clips, delete. Colours are picked with\n * the system's colour picker.\n */\n\nimport type { ReactNode } from 'react'\nimport {\n  AlignCenter,\n  AlignLeft,\n  AlignRight,\n  AArrowDown,\n  AArrowUp,\n  Baseline,\n  Bold,\n  BringToFront,\n  Italic,\n  PaintBucket,\n  SendToBack,\n  Trash2,\n} from 'lucide-react'\nimport { cn } from '@arbidocs/react/ui'\nimport { ACTION, Action } from './ClipActionBar'\nimport { DEFAULT_TEXT_SIZE, firstRun, styleRuns, type SlideBox, type TextAlign } from './boxes'\nimport { usePresentation } from './store'\nimport { TEXT_COLORS } from './theme'\n\nconst SIZE_STEPS = [8, 10, 12, 14, 16, 18, 20, 24, 28, 32, 36, 44, 54, 66, 80, 96]\n\nconst nextSize = (size: number, up: boolean) =>\n  up\n    ? (SIZE_STEPS.find((step) => step > size + 0.5) ?? size)\n    : ([...SIZE_STEPS].reverse().find((step) => step < size - 0.5) ?? size)\n\nconst ALIGN_NEXT: Record<TextAlign, TextAlign> = {\n  left: 'center',\n  center: 'right',\n  right: 'left',\n  justify: 'left',\n}\nconst ALIGN_ICON: Record<TextAlign, ReactNode> = {\n  left: <AlignLeft className=\"size-4\" />,\n  center: <AlignCenter className=\"size-4\" />,\n  right: <AlignRight className=\"size-4\" />,\n  justify: <AlignLeft className=\"size-4\" />,\n}\n\n/** A button that opens the system colour picker. */\nfunction ColorAction({\n  label,\n  value,\n  onChange,\n  children,\n}: {\n  label: string\n  value: string\n  onChange: (color: string) => void\n  children: ReactNode\n}) {\n  return (\n    <label className={cn(ACTION, 'relative cursor-pointer')} title={label} aria-label={label}>\n      {children}\n      <span\n        className=\"pointer-events-none absolute inset-x-1.5 bottom-0.5 h-0.5 rounded-full\"\n        style={{ background: value }}\n      />\n      <input\n        type=\"color\"\n        value={value}\n        onChange={(event) => onChange(event.target.value)}\n        className=\"absolute inset-0 size-full cursor-pointer opacity-0\"\n        aria-label={label}\n      />\n    </label>\n  )\n}\n\nexport interface BoxActionBarProps {\n  box: SlideBox\n  onRemoved: () => void\n}\n\nexport function BoxActionBar({ box, onRemoved }: BoxActionBarProps) {\n  const actions = usePresentation.getState()\n  const run = firstRun(box)\n  const size = run?.size ?? DEFAULT_TEXT_SIZE\n  const align = box.paragraphs[0]?.align ?? 'left'\n  const update = (change: (b: SlideBox) => SlideBox) => actions.updateBox(box.id, change)\n  const text = box.shape !== 'line'\n  const top = Math.max(0, box.frame.y)\n  return (\n    <div\n      role=\"toolbar\"\n      aria-label=\"Text box\"\n      className=\"absolute z-20 flex items-center gap-0.5 rounded-md border border-border bg-background p-0.5 shadow-md\"\n      style={{\n        left: `${Math.min(Math.max(0, box.frame.x), 0.6) * 100}%`,\n        top: `calc(${top * 100}% - 40px)`,\n      }}\n      onPointerDown={(event) => event.stopPropagation()}\n      data-testid=\"box-action-bar\"\n    >\n      {text && (\n        <>\n          <Action\n            label=\"Smaller\"\n            onClick={() =>\n              update((b) => styleRuns(b, (r) => ({ ...r, size: nextSize(r.size ?? size, false) })))\n            }\n          >\n            <AArrowDown className=\"size-4\" />\n          </Action>\n          <span\n            className=\"w-7 text-center text-xs tabular-nums text-muted-foreground\"\n            data-testid=\"box-text-size\"\n          >\n            {Math.round(size)}\n          </span>\n          <Action\n            label=\"Larger\"\n            onClick={() =>\n              update((b) => styleRuns(b, (r) => ({ ...r, size: nextSize(r.size ?? size, true) })))\n            }\n          >\n            <AArrowUp className=\"size-4\" />\n          </Action>\n          <Action\n            label=\"Bold\"\n            onClick={() => update((b) => styleRuns(b, (r) => ({ ...r, bold: !run?.bold })))}\n          >\n            <Bold className={cn('size-4', run?.bold && 'text-primary')} />\n          </Action>\n          <Action\n            label=\"Italic\"\n            onClick={() => update((b) => styleRuns(b, (r) => ({ ...r, italic: !run?.italic })))}\n          >\n            <Italic className={cn('size-4', run?.italic && 'text-primary')} />\n          </Action>\n          <Action\n            label=\"Align\"\n            onClick={() =>\n              update((b) => ({\n                ...b,\n                paragraphs: b.paragraphs.map((p) => ({ ...p, align: ALIGN_NEXT[align] })),\n              }))\n            }\n          >\n            {ALIGN_ICON[align]}\n          </Action>\n          <ColorAction\n            label=\"Text colour\"\n            value={run?.color ?? TEXT_COLORS.body}\n            onChange={(color) => update((b) => styleRuns(b, (r) => ({ ...r, color })))}\n          >\n            <Baseline className=\"size-4\" />\n          </ColorAction>\n        </>\n      )}\n      <ColorAction\n        label={box.shape === 'line' ? 'Line colour' : 'Fill'}\n        value={(box.shape === 'line' ? box.line?.color : box.fill) ?? '#ffffff'}\n        onChange={(color) =>\n          update((b) =>\n            b.shape === 'line'\n              ? { ...b, line: { width: b.line?.width ?? 2, ...b.line, color } }\n              : { ...b, fill: color, shape: b.shape === 'text' ? 'rect' : b.shape }\n          )\n        }\n      >\n        <PaintBucket className=\"size-4\" />\n      </ColorAction>\n      <div className=\"mx-0.5 h-5 w-px bg-border\" />\n      <Action label=\"In front of the clips\" onClick={() => actions.restackBox(box.id, 'front')}>\n        <BringToFront className=\"size-4\" />\n      </Action>\n      <Action label=\"Behind the clips\" onClick={() => actions.restackBox(box.id, 'back')}>\n        <SendToBack className=\"size-4\" />\n      </Action>\n      <div className=\"mx-0.5 h-5 w-px bg-border\" />\n      <button\n        type=\"button\"\n        className={cn(ACTION, 'text-destructive hover:bg-destructive/10')}\n        title=\"Delete (Delete)\"\n        aria-label=\"Delete\"\n        onClick={() => {\n          actions.removeBox(box.id)\n          onRemoved()\n        }}\n      >\n        <Trash2 className=\"size-4\" />\n      </button>\n    </div>\n  )\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * The floating bar over a selected text box or shape: its type (smaller, larger, bold, its\n * colour), its fill and delete; italic, alignment and stacking in its \"\u2026\". Colours are picked with\n * the system's colour picker.\n */\n\nimport type { ReactNode } from 'react'\nimport {\n  AlignCenter,\n  AlignLeft,\n  AlignRight,\n  AArrowDown,\n  AArrowUp,\n  Baseline,\n  Bold,\n  BringToFront,\n  Italic,\n  MoreHorizontal,\n  PaintBucket,\n  SendToBack,\n  Trash2,\n} from 'lucide-react'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n  cn,\n} from '@arbidocs/react/ui'\nimport { ACTION, Action } from './ClipActionBar'\nimport { DEFAULT_TEXT_SIZE, firstRun, styleRuns, type SlideBox, type TextAlign } from './boxes'\nimport { usePresentation } from './store'\nimport { TEXT_COLORS } from './theme'\n\nconst SIZE_STEPS = [8, 10, 12, 14, 16, 18, 20, 24, 28, 32, 36, 44, 54, 66, 80, 96]\n\nconst nextSize = (size: number, up: boolean) =>\n  up\n    ? (SIZE_STEPS.find((step) => step > size + 0.5) ?? size)\n    : ([...SIZE_STEPS].reverse().find((step) => step < size - 0.5) ?? size)\n\nconst ALIGN_ICON: Record<TextAlign, ReactNode> = {\n  left: <AlignLeft className=\"size-4\" />,\n  center: <AlignCenter className=\"size-4\" />,\n  right: <AlignRight className=\"size-4\" />,\n  justify: <AlignLeft className=\"size-4\" />,\n}\n\n/** A button that opens the system colour picker. */\nfunction ColorAction({\n  label,\n  value,\n  onChange,\n  children,\n}: {\n  label: string\n  value: string\n  onChange: (color: string) => void\n  children: ReactNode\n}) {\n  return (\n    <label className={cn(ACTION, 'relative cursor-pointer')} title={label} aria-label={label}>\n      {children}\n      <span\n        className=\"pointer-events-none absolute inset-x-1.5 bottom-0.5 h-0.5 rounded-full\"\n        style={{ background: value }}\n      />\n      <input\n        type=\"color\"\n        value={value}\n        onChange={(event) => onChange(event.target.value)}\n        className=\"absolute inset-0 size-full cursor-pointer opacity-0\"\n        aria-label={label}\n      />\n    </label>\n  )\n}\n\nexport interface BoxActionBarProps {\n  box: SlideBox\n  onRemoved: () => void\n}\n\nexport function BoxActionBar({ box, onRemoved }: BoxActionBarProps) {\n  const actions = usePresentation.getState()\n  const run = firstRun(box)\n  const size = run?.size ?? DEFAULT_TEXT_SIZE\n  const align = box.paragraphs[0]?.align ?? 'left'\n  const update = (change: (b: SlideBox) => SlideBox) => actions.updateBox(box.id, change)\n  const text = box.shape !== 'line'\n  const top = Math.max(0, box.frame.y)\n  return (\n    <div\n      role=\"toolbar\"\n      aria-label=\"Text box\"\n      className=\"absolute z-20 flex items-center gap-0.5 rounded-md border border-border bg-background p-0.5 shadow-md\"\n      style={{\n        left: `${Math.min(Math.max(0, box.frame.x), 0.6) * 100}%`,\n        top: `calc(${top * 100}% - 40px)`,\n      }}\n      onPointerDown={(event) => event.stopPropagation()}\n      data-testid=\"box-action-bar\"\n    >\n      {text && (\n        <>\n          <Action\n            label=\"Smaller\"\n            onClick={() =>\n              update((b) => styleRuns(b, (r) => ({ ...r, size: nextSize(r.size ?? size, false) })))\n            }\n          >\n            <AArrowDown className=\"size-4\" />\n          </Action>\n          <span\n            className=\"w-7 text-center text-xs tabular-nums text-muted-foreground\"\n            data-testid=\"box-text-size\"\n          >\n            {Math.round(size)}\n          </span>\n          <Action\n            label=\"Larger\"\n            onClick={() =>\n              update((b) => styleRuns(b, (r) => ({ ...r, size: nextSize(r.size ?? size, true) })))\n            }\n          >\n            <AArrowUp className=\"size-4\" />\n          </Action>\n          <Action\n            label=\"Bold\"\n            onClick={() => update((b) => styleRuns(b, (r) => ({ ...r, bold: !run?.bold })))}\n          >\n            <Bold className={cn('size-4', run?.bold && 'text-primary')} />\n          </Action>\n          <ColorAction\n            label=\"Text colour\"\n            value={run?.color ?? TEXT_COLORS.body}\n            onChange={(color) => update((b) => styleRuns(b, (r) => ({ ...r, color })))}\n          >\n            <Baseline className=\"size-4\" />\n          </ColorAction>\n        </>\n      )}\n      <ColorAction\n        label={box.shape === 'line' ? 'Line colour' : 'Fill'}\n        value={(box.shape === 'line' ? box.line?.color : box.fill) ?? '#ffffff'}\n        onChange={(color) =>\n          update((b) =>\n            b.shape === 'line'\n              ? { ...b, line: { width: b.line?.width ?? 2, ...b.line, color } }\n              : { ...b, fill: color, shape: b.shape === 'text' ? 'rect' : b.shape }\n          )\n        }\n      >\n        <PaintBucket className=\"size-4\" />\n      </ColorAction>\n      {/* The rest, behind \"\u2026\": italic, alignment, in front of or behind the clips. */}\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <button\n            type=\"button\"\n            className={ACTION}\n            title=\"More\"\n            aria-label=\"More\"\n            data-testid=\"box-more-menu\"\n          >\n            <MoreHorizontal className=\"size-4\" />\n          </button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"start\">\n          {text && (\n            <>\n              <DropdownMenuCheckboxItem\n                checked={!!run?.italic}\n                onCheckedChange={() =>\n                  update((b) => styleRuns(b, (r) => ({ ...r, italic: !run?.italic })))\n                }\n              >\n                <Italic className=\"size-4\" />\n                <span className=\"ml-2\">Italic</span>\n              </DropdownMenuCheckboxItem>\n              {(['left', 'center', 'right'] as const).map((value) => (\n                <DropdownMenuCheckboxItem\n                  key={value}\n                  checked={align === value}\n                  onCheckedChange={() =>\n                    update((b) => ({\n                      ...b,\n                      paragraphs: b.paragraphs.map((p) => ({ ...p, align: value })),\n                    }))\n                  }\n                >\n                  {ALIGN_ICON[value]}\n                  <span className=\"ml-2\">\n                    {value === 'left'\n                      ? 'Align left'\n                      : value === 'center'\n                        ? 'Centre'\n                        : 'Align right'}\n                  </span>\n                </DropdownMenuCheckboxItem>\n              ))}\n              <DropdownMenuSeparator />\n            </>\n          )}\n          <DropdownMenuItem onSelect={() => actions.restackBox(box.id, 'front')}>\n            <BringToFront className=\"size-4\" />\n            <span className=\"ml-2\">In front of the clips</span>\n          </DropdownMenuItem>\n          <DropdownMenuItem onSelect={() => actions.restackBox(box.id, 'back')}>\n            <SendToBack className=\"size-4\" />\n            <span className=\"ml-2\">Behind the clips</span>\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n      <button\n        type=\"button\"\n        className={cn(ACTION, 'text-destructive hover:bg-destructive/10')}\n        title=\"Delete (Delete)\"\n        aria-label=\"Delete\"\n        onClick={() => {\n          actions.removeBox(box.id)\n          onRemoved()\n        }}\n      >\n        <Trash2 className=\"size-4\" />\n      </button>\n    </div>\n  )\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/presentation/ClipActionBar.js

@@ -10,19 +10,26 @@ import {
   BringToFront,
   Crop,
   Maximize2,
+  MoreHorizontal,
   MoveHorizontal,
   MoveVertical,
   SendToBack,
   Sparkles,
-  Trash2
+  Trash2,
+  ZoomIn
 } from "lucide-react";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuSeparator,
   DropdownMenuTrigger,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
   cn
 } from "@arbidocs/react/ui";
+import { ClipViewControls } from "./ClipViewControls.js";
 import { usePresentation } from "./store.js";
 const ACTION = "inline-flex size-7 items-center justify-center rounded text-foreground hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring pointer-coarse:size-11";
 const SIZES = [
@@ -53,6 +60,7 @@ function ClipActionBar({
   onCropImage
 }) {
   const actions = usePresentation.getState();
+  const clip = usePresentation((state) => state.clips.find((entry) => entry.id === clipId));
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -63,7 +71,7 @@ function ClipActionBar({
       onPointerDown: (event) => event.stopPropagation(),
       "data-testid": "clip-action-bar",
       children: [
-        SIZES.map(({ command, label, icon }) => /* @__PURE__ */ jsx(Action, { label, onClick: () => actions.applyFrame(clipId, command), children: icon }, command)),
+        /* @__PURE__ */ jsx(Action, { label: "Fit the slide", onClick: () => actions.applyFrame(clipId, "fit"), children: /* @__PURE__ */ jsx(Maximize2, { className: "size-4" }) }),
         /* @__PURE__ */ jsxs(DropdownMenu, { children: [
           /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { type: "button", className: ACTION, title: "Align", "aria-label": "Align", children: /* @__PURE__ */ jsx(AlignCenterHorizontal, { className: "size-4" }) }) }),
           /* @__PURE__ */ jsx(DropdownMenuContent, { align: "start", children: ALIGNMENTS.map(({ alignment, label, icon }) => /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: () => actions.align(clipId, alignment), children: [
@@ -71,11 +79,56 @@ function ClipActionBar({
             /* @__PURE__ */ jsx("span", { className: "ml-2", children: label })
           ] }, alignment)) })
         ] }),
-        onCropImage && /* @__PURE__ */ jsx(Action, { label: "Crop", onClick: onCropImage, children: /* @__PURE__ */ jsx(Crop, { className: "size-4" }) }),
-        onEditImage && /* @__PURE__ */ jsx(Action, { label: "Edit image", onClick: onEditImage, children: /* @__PURE__ */ jsx(Sparkles, { className: "size-4" }) }),
-        /* @__PURE__ */ jsx("div", { className: "mx-0.5 h-5 w-px bg-border" }),
-        /* @__PURE__ */ jsx(Action, { label: "Bring to front", onClick: () => actions.bringToFront(clipId), children: /* @__PURE__ */ jsx(BringToFront, { className: "size-4" }) }),
-        /* @__PURE__ */ jsx(Action, { label: "Send to back", onClick: () => actions.sendToBack(clipId), children: /* @__PURE__ */ jsx(SendToBack, { className: "size-4" }) }),
+        clip && /* @__PURE__ */ jsxs(Popover, { children: [
+          /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: ACTION,
+              title: "View: scroll or zoom what the clip shows (or scroll over it)",
+              "aria-label": "View",
+              "data-testid": "clip-view-button",
+              children: /* @__PURE__ */ jsx(ZoomIn, { className: "size-4" })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(PopoverContent, { align: "start", className: "w-auto p-2", children: /* @__PURE__ */ jsx(ClipViewControls, { clip }) })
+        ] }),
+        /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+          /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: ACTION,
+              title: "More",
+              "aria-label": "More",
+              "data-testid": "clip-more-menu",
+              children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "size-4" })
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "start", children: [
+            SIZES.filter(({ command }) => command !== "fit").map(({ command, label, icon }) => /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: () => actions.applyFrame(clipId, command), children: [
+              icon,
+              /* @__PURE__ */ jsx("span", { className: "ml-2", children: label })
+            ] }, command)),
+            onCropImage && /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: onCropImage, children: [
+              /* @__PURE__ */ jsx(Crop, { className: "size-4" }),
+              /* @__PURE__ */ jsx("span", { className: "ml-2", children: "Crop" })
+            ] }),
+            onEditImage && /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: onEditImage, children: [
+              /* @__PURE__ */ jsx(Sparkles, { className: "size-4" }),
+              /* @__PURE__ */ jsx("span", { className: "ml-2", children: "Edit image" })
+            ] }),
+            /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+            /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: () => actions.bringToFront(clipId), children: [
+              /* @__PURE__ */ jsx(BringToFront, { className: "size-4" }),
+              /* @__PURE__ */ jsx("span", { className: "ml-2", children: "Bring to front" })
+            ] }),
+            /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: () => actions.sendToBack(clipId), children: [
+              /* @__PURE__ */ jsx(SendToBack, { className: "size-4" }),
+              /* @__PURE__ */ jsx("span", { className: "ml-2", children: "Send to back" })
+            ] })
+          ] })
+        ] }),
         /* @__PURE__ */ jsx("div", { className: "mx-0.5 h-5 w-px bg-border" }),
         /* @__PURE__ */ jsx(
           "button",

package/dist/presentation/ClipActionBar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/presentation/ClipActionBar.tsx"],
-  "sourcesContent": ["/**\n * The floating action bar over the selected clip (the markup overlay's pattern): size it to the\n * stage, align it, put it in front or behind, take it off the slide. Icons with labels on hover\n * (`title`: portalled tooltips misplace in a popped-out window).\n */\n\nimport type { ReactNode } from 'react'\nimport {\n  AlignCenterHorizontal,\n  AlignCenterVertical,\n  AlignEndHorizontal,\n  AlignEndVertical,\n  AlignStartHorizontal,\n  AlignStartVertical,\n  BringToFront,\n  Crop,\n  Maximize2,\n  MoveHorizontal,\n  MoveVertical,\n  SendToBack,\n  Sparkles,\n  Trash2,\n} from 'lucide-react'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n  cn,\n} from '@arbidocs/react/ui'\nimport type { Alignment } from './model'\nimport { usePresentation, type FrameCommand } from './store'\n\nexport const ACTION =\n  'inline-flex size-7 items-center justify-center rounded text-foreground hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring pointer-coarse:size-11'\n\nconst SIZES: { command: FrameCommand; label: string; icon: ReactNode }[] = [\n  { command: 'fit', label: 'Fit the slide', icon: <Maximize2 className=\"size-4\" /> },\n  { command: 'fullWidth', label: 'Full width', icon: <MoveHorizontal className=\"size-4\" /> },\n  { command: 'fullHeight', label: 'Full height', icon: <MoveVertical className=\"size-4\" /> },\n]\n\nconst ALIGNMENTS: { alignment: Alignment; label: string; icon: ReactNode }[] = [\n  { alignment: 'left', label: 'Left', icon: <AlignStartVertical className=\"size-4\" /> },\n  { alignment: 'centre', label: 'Centre', icon: <AlignCenterVertical className=\"size-4\" /> },\n  { alignment: 'right', label: 'Right', icon: <AlignEndVertical className=\"size-4\" /> },\n  { alignment: 'top', label: 'Top', icon: <AlignStartHorizontal className=\"size-4\" /> },\n  { alignment: 'middle', label: 'Middle', icon: <AlignCenterHorizontal className=\"size-4\" /> },\n  { alignment: 'bottom', label: 'Bottom', icon: <AlignEndHorizontal className=\"size-4\" /> },\n]\n\nexport function Action({\n  label,\n  onClick,\n  children,\n}: {\n  label: string\n  onClick: () => void\n  children: ReactNode\n}) {\n  return (\n    <button type=\"button\" className={ACTION} title={label} aria-label={label} onClick={onClick}>\n      {children}\n    </button>\n  )\n}\n\nexport interface ClipActionBarProps {\n  clipId: string\n  /** The clip's top-left, as fractions of the stage. */\n  at: { x: number; y: number }\n  onRemoved: () => void\n  /** An image clip: make a new version of the image (Generate image with it as the reference). */\n  onEditImage?: () => void\n  /** An image clip: choose the part of the image it shows. */\n  onCropImage?: () => void\n}\n\nexport function ClipActionBar({\n  clipId,\n  at,\n  onRemoved,\n  onEditImage,\n  onCropImage,\n}: ClipActionBarProps) {\n  const actions = usePresentation.getState()\n  return (\n    <div\n      role=\"toolbar\"\n      aria-label=\"Clip\"\n      className=\"absolute z-20 flex items-center gap-0.5 rounded-md border border-border bg-background p-0.5 shadow-md\"\n      style={{ left: `${at.x * 100}%`, top: `calc(${at.y * 100}% - 40px)` }}\n      // Its clicks are not a click on the stage (which would deselect the clip).\n      onPointerDown={(event) => event.stopPropagation()}\n      data-testid=\"clip-action-bar\"\n    >\n      {SIZES.map(({ command, label, icon }) => (\n        <Action key={command} label={label} onClick={() => actions.applyFrame(clipId, command)}>\n          {icon}\n        </Action>\n      ))}\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <button type=\"button\" className={ACTION} title=\"Align\" aria-label=\"Align\">\n            <AlignCenterHorizontal className=\"size-4\" />\n          </button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"start\">\n          {ALIGNMENTS.map(({ alignment, label, icon }) => (\n            <DropdownMenuItem key={alignment} onSelect={() => actions.align(clipId, alignment)}>\n              {icon}\n              <span className=\"ml-2\">{label}</span>\n            </DropdownMenuItem>\n          ))}\n        </DropdownMenuContent>\n      </DropdownMenu>\n      {onCropImage && (\n        <Action label=\"Crop\" onClick={onCropImage}>\n          <Crop className=\"size-4\" />\n        </Action>\n      )}\n      {onEditImage && (\n        <Action label=\"Edit image\" onClick={onEditImage}>\n          <Sparkles className=\"size-4\" />\n        </Action>\n      )}\n      <div className=\"mx-0.5 h-5 w-px bg-border\" />\n      <Action label=\"Bring to front\" onClick={() => actions.bringToFront(clipId)}>\n        <BringToFront className=\"size-4\" />\n      </Action>\n      <Action label=\"Send to back\" onClick={() => actions.sendToBack(clipId)}>\n        <SendToBack className=\"size-4\" />\n      </Action>\n      <div className=\"mx-0.5 h-5 w-px bg-border\" />\n      <button\n        type=\"button\"\n        className={cn(ACTION, 'text-destructive hover:bg-destructive/10')}\n        title=\"Remove from slide (Delete)\"\n        aria-label=\"Remove from slide\"\n        onClick={() => {\n          actions.unplace(clipId)\n          onRemoved()\n        }}\n      >\n        <Trash2 className=\"size-4\" />\n      </button>\n    </div>\n  )\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * The floating action bar over the selected clip (the markup overlay's pattern): size it to the\n * stage, align it, put it in front or behind, take it off the slide. Icons with labels on hover\n * (`title`: portalled tooltips misplace in a popped-out window).\n */\n\nimport type { ReactNode } from 'react'\nimport {\n  AlignCenterHorizontal,\n  AlignCenterVertical,\n  AlignEndHorizontal,\n  AlignEndVertical,\n  AlignStartHorizontal,\n  AlignStartVertical,\n  BringToFront,\n  Crop,\n  Maximize2,\n  MoreHorizontal,\n  MoveHorizontal,\n  MoveVertical,\n  SendToBack,\n  Sparkles,\n  Trash2,\n  ZoomIn,\n} from 'lucide-react'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n  cn,\n} from '@arbidocs/react/ui'\nimport { ClipViewControls } from './ClipViewControls'\nimport type { Alignment } from './model'\nimport { usePresentation, type FrameCommand } from './store'\n\nexport const ACTION =\n  'inline-flex size-7 items-center justify-center rounded text-foreground hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring pointer-coarse:size-11'\n\nconst SIZES: { command: FrameCommand; label: string; icon: ReactNode }[] = [\n  { command: 'fit', label: 'Fit the slide', icon: <Maximize2 className=\"size-4\" /> },\n  { command: 'fullWidth', label: 'Full width', icon: <MoveHorizontal className=\"size-4\" /> },\n  { command: 'fullHeight', label: 'Full height', icon: <MoveVertical className=\"size-4\" /> },\n]\n\nconst ALIGNMENTS: { alignment: Alignment; label: string; icon: ReactNode }[] = [\n  { alignment: 'left', label: 'Left', icon: <AlignStartVertical className=\"size-4\" /> },\n  { alignment: 'centre', label: 'Centre', icon: <AlignCenterVertical className=\"size-4\" /> },\n  { alignment: 'right', label: 'Right', icon: <AlignEndVertical className=\"size-4\" /> },\n  { alignment: 'top', label: 'Top', icon: <AlignStartHorizontal className=\"size-4\" /> },\n  { alignment: 'middle', label: 'Middle', icon: <AlignCenterHorizontal className=\"size-4\" /> },\n  { alignment: 'bottom', label: 'Bottom', icon: <AlignEndHorizontal className=\"size-4\" /> },\n]\n\nexport function Action({\n  label,\n  onClick,\n  children,\n}: {\n  label: string\n  onClick: () => void\n  children: ReactNode\n}) {\n  return (\n    <button type=\"button\" className={ACTION} title={label} aria-label={label} onClick={onClick}>\n      {children}\n    </button>\n  )\n}\n\nexport interface ClipActionBarProps {\n  clipId: string\n  /** The clip's top-left, as fractions of the stage. */\n  at: { x: number; y: number }\n  onRemoved: () => void\n  /** An image clip: make a new version of the image (Generate image with it as the reference). */\n  onEditImage?: () => void\n  /** An image clip: choose the part of the image it shows. */\n  onCropImage?: () => void\n}\n\nexport function ClipActionBar({\n  clipId,\n  at,\n  onRemoved,\n  onEditImage,\n  onCropImage,\n}: ClipActionBarProps) {\n  const actions = usePresentation.getState()\n  const clip = usePresentation((state) => state.clips.find((entry) => entry.id === clipId))\n  return (\n    <div\n      role=\"toolbar\"\n      aria-label=\"Clip\"\n      className=\"absolute z-20 flex items-center gap-0.5 rounded-md border border-border bg-background p-0.5 shadow-md\"\n      style={{ left: `${at.x * 100}%`, top: `calc(${at.y * 100}% - 40px)` }}\n      // Its clicks are not a click on the stage (which would deselect the clip).\n      onPointerDown={(event) => event.stopPropagation()}\n      data-testid=\"clip-action-bar\"\n    >\n      {/* The commonest: fit it to the slide, line it up, adjust what it shows. */}\n      <Action label=\"Fit the slide\" onClick={() => actions.applyFrame(clipId, 'fit')}>\n        <Maximize2 className=\"size-4\" />\n      </Action>\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <button type=\"button\" className={ACTION} title=\"Align\" aria-label=\"Align\">\n            <AlignCenterHorizontal className=\"size-4\" />\n          </button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"start\">\n          {ALIGNMENTS.map(({ alignment, label, icon }) => (\n            <DropdownMenuItem key={alignment} onSelect={() => actions.align(clipId, alignment)}>\n              {icon}\n              <span className=\"ml-2\">{label}</span>\n            </DropdownMenuItem>\n          ))}\n        </DropdownMenuContent>\n      </DropdownMenu>\n      {clip && (\n        <Popover>\n          <PopoverTrigger asChild>\n            <button\n              type=\"button\"\n              className={ACTION}\n              title=\"View: scroll or zoom what the clip shows (or scroll over it)\"\n              aria-label=\"View\"\n              data-testid=\"clip-view-button\"\n            >\n              <ZoomIn className=\"size-4\" />\n            </button>\n          </PopoverTrigger>\n          <PopoverContent align=\"start\" className=\"w-auto p-2\">\n            <ClipViewControls clip={clip} />\n          </PopoverContent>\n        </Popover>\n      )}\n      {/* The rest, behind \"\u2026\". */}\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <button\n            type=\"button\"\n            className={ACTION}\n            title=\"More\"\n            aria-label=\"More\"\n            data-testid=\"clip-more-menu\"\n          >\n            <MoreHorizontal className=\"size-4\" />\n          </button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"start\">\n          {SIZES.filter(({ command }) => command !== 'fit').map(({ command, label, icon }) => (\n            <DropdownMenuItem key={command} onSelect={() => actions.applyFrame(clipId, command)}>\n              {icon}\n              <span className=\"ml-2\">{label}</span>\n            </DropdownMenuItem>\n          ))}\n          {onCropImage && (\n            <DropdownMenuItem onSelect={onCropImage}>\n              <Crop className=\"size-4\" />\n              <span className=\"ml-2\">Crop</span>\n            </DropdownMenuItem>\n          )}\n          {onEditImage && (\n            <DropdownMenuItem onSelect={onEditImage}>\n              <Sparkles className=\"size-4\" />\n              <span className=\"ml-2\">Edit image</span>\n            </DropdownMenuItem>\n          )}\n          <DropdownMenuSeparator />\n          <DropdownMenuItem onSelect={() => actions.bringToFront(clipId)}>\n            <BringToFront className=\"size-4\" />\n            <span className=\"ml-2\">Bring to front</span>\n          </DropdownMenuItem>\n          <DropdownMenuItem onSelect={() => actions.sendToBack(clipId)}>\n            <SendToBack className=\"size-4\" />\n            <span className=\"ml-2\">Send to back</span>\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n      <div className=\"mx-0.5 h-5 w-px bg-border\" />\n      <button\n        type=\"button\"\n        className={cn(ACTION, 'text-destructive hover:bg-destructive/10')}\n        title=\"Remove from slide (Delete)\"\n        aria-label=\"Remove from slide\"\n        onClick={() => {\n          actions.unplace(clipId)\n          onRemoved()\n        }}\n      >\n        <Trash2 className=\"size-4\" />\n      </button>\n    </div>\n  )\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/presentation/ClipViewControls.d.ts

@@ -1,7 +1,7 @@
 /**
- * The selected clip's view controls, on a layer over it (editor only): arrows at the middle of each
- * edge scroll what the clip shows over its source (a press steps, holding keeps scrolling; an arrow
- * at the source's edge is off), and a zoom slider zooms about the clip's centre.
+ * A clip's view controls (in its action bar's View popover, so nothing covers what it shows):
+ * arrows scroll what the clip shows over its source (a press steps, holding keeps scrolling; an
+ * arrow at the source's edge is off), and a zoom slider zooms about the clip's centre.
  * The clip's frame on the slide does not change; only the part of the source it shows. Presses
  * here never start moving the clip.
  */

package/dist/presentation/ClipViewControls.js

@@ -9,7 +9,7 @@ const PAN_STEP = 0.1;
 const MAX_ZOOM = 800;
 const HOLD_DELAY = 350;
 const HOLD_EVERY = 90;
-const BUTTON = "pointer-events-auto flex size-7 items-center justify-center rounded-full border border-border bg-background/90 text-foreground shadow-sm backdrop-blur-sm hover:bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-30 pointer-coarse:size-11";
+const BUTTON = "flex size-7 items-center justify-center rounded-full border border-border bg-background text-foreground hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-30 pointer-coarse:size-11";
 function HoldButton({
   label,
   disabled,
@@ -64,74 +64,69 @@ function ClipViewControls({ clip }) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: "pointer-events-none absolute inset-0 z-10",
+      className: "flex flex-col items-center gap-2 p-1",
       onPointerDown: (event) => event.stopPropagation(),
       "data-testid": "clip-view-controls",
       children: [
-        /* @__PURE__ */ jsx(
-          HoldButton,
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 grid-rows-3 place-items-center gap-0.5", children: [
+          /* @__PURE__ */ jsx(
+            HoldButton,
+            {
+              label: "Show more above",
+              disabled: rect.y <= edge,
+              onStep: pan(0, -PAN_STEP),
+              className: "col-start-2 row-start-1",
+              children: /* @__PURE__ */ jsx(ChevronUp, { className: "size-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            HoldButton,
+            {
+              label: "Show more on the left",
+              disabled: rect.x <= edge,
+              onStep: pan(-PAN_STEP, 0),
+              className: "col-start-1 row-start-2",
+              children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            HoldButton,
+            {
+              label: "Show more on the right",
+              disabled: rect.x + rect.w >= 1 - edge,
+              onStep: pan(PAN_STEP, 0),
+              className: "col-start-3 row-start-2",
+              children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            HoldButton,
+            {
+              label: "Show more below",
+              disabled: rect.y + rect.h >= 1 - edge,
+              onStep: pan(0, PAN_STEP),
+              className: "col-start-2 row-start-3",
+              children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-4" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { "data-testid": "clip-zoom-control", children: /* @__PURE__ */ jsx(
+          ZoomSlider,
           {
-            label: "Show more above",
-            disabled: rect.y <= edge,
-            onStep: pan(0, -PAN_STEP),
-            className: "absolute left-1/2 top-4 -translate-x-1/2 pointer-coarse:top-7",
-            children: /* @__PURE__ */ jsx(ChevronUp, { className: "size-4" })
+            value: zoom,
+            min: minZoom,
+            max: Math.max(MAX_ZOOM, zoom),
+            zoomOutStep: 25,
+            onChange: (value) => setClipZoom(clip.id, value),
+            label: "Zoom",
+            valueLabel: /* @__PURE__ */ jsxs("span", { "data-testid": "clip-zoom", children: [
+              zoom,
+              "%"
+            ] }),
+            className: "pointer-coarse:h-11",
+            sliderClassName: "w-28"
           }
-        ),
-        /* @__PURE__ */ jsx(
-          HoldButton,
-          {
-            label: "Show more below",
-            disabled: rect.y + rect.h >= 1 - edge,
-            onStep: pan(0, PAN_STEP),
-            className: "absolute bottom-10 left-1/2 -translate-x-1/2 pointer-coarse:bottom-14",
-            children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-4" })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          HoldButton,
-          {
-            label: "Show more on the left",
-            disabled: rect.x <= edge,
-            onStep: pan(-PAN_STEP, 0),
-            className: "absolute left-4 top-1/2 -translate-y-1/2 pointer-coarse:left-7",
-            children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          HoldButton,
-          {
-            label: "Show more on the right",
-            disabled: rect.x + rect.w >= 1 - edge,
-            onStep: pan(PAN_STEP, 0),
-            className: "absolute right-4 top-1/2 -translate-y-1/2 pointer-coarse:right-7",
-            children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "pointer-events-auto absolute bottom-1.5 left-1/2 -translate-x-1/2",
-            "data-testid": "clip-zoom-control",
-            children: /* @__PURE__ */ jsx(
-              ZoomSlider,
-              {
-                value: zoom,
-                min: minZoom,
-                max: Math.max(MAX_ZOOM, zoom),
-                zoomOutStep: 25,
-                onChange: (value) => setClipZoom(clip.id, value),
-                label: "Zoom",
-                valueLabel: /* @__PURE__ */ jsxs("span", { "data-testid": "clip-zoom", children: [
-                  zoom,
-                  "%"
-                ] }),
-                className: "bg-background/95 shadow-sm backdrop-blur-sm pointer-coarse:h-11",
-                sliderClassName: "w-24"
-              }
-            )
-          }
-        )
+        ) })
       ]
     }
   );

package/dist/presentation/ClipViewControls.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/presentation/ClipViewControls.tsx"],
-  "sourcesContent": ["/**\n * The selected clip's view controls, on a layer over it (editor only): arrows at the middle of each\n * edge scroll what the clip shows over its source (a press steps, holding keeps scrolling; an arrow\n * at the source's edge is off), and a zoom slider zooms about the clip's centre.\n * The clip's frame on the slide does not change; only the part of the source it shows. Presses\n * here never start moving the clip.\n */\n\nimport { useEffect, useRef, type PointerEvent as ReactPointerEvent, type ReactNode } from 'react'\nimport { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from 'lucide-react'\nimport { cn } from '@arbidocs/react/ui'\nimport { ZoomSlider } from '../components/ZoomSlider'\nimport type { Clip } from './model'\nimport { usePresentation } from './store'\n\n/** One step scrolls this much of what the clip shows. */\nconst PAN_STEP = 0.1\n/** The closest a clip zooms, in percent of how close it was cut. */\nconst MAX_ZOOM = 800\n/** Holding a button repeats it after this long, this often. */\nconst HOLD_DELAY = 350\nconst HOLD_EVERY = 90\n\nconst BUTTON =\n  'pointer-events-auto flex size-7 items-center justify-center rounded-full border border-border bg-background/90 text-foreground shadow-sm backdrop-blur-sm hover:bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-30 pointer-coarse:size-11'\n\n/** A button that acts on press and keeps acting while held. */\nfunction HoldButton({\n  label,\n  disabled,\n  onStep,\n  className,\n  children,\n}: {\n  label: string\n  disabled?: boolean\n  onStep: () => void\n  className?: string\n  children: ReactNode\n}) {\n  const timer = useRef<ReturnType<typeof setTimeout> | null>(null)\n  const stop = () => {\n    if (timer.current) clearTimeout(timer.current)\n    timer.current = null\n  }\n  useEffect(() => stop, [])\n  useEffect(() => {\n    if (disabled) stop()\n  }, [disabled])\n  const start = (event: ReactPointerEvent) => {\n    event.stopPropagation()\n    if (disabled || event.button !== 0) return\n    onStep()\n    const repeat = () => {\n      onStep()\n      timer.current = setTimeout(repeat, HOLD_EVERY)\n    }\n    timer.current = setTimeout(repeat, HOLD_DELAY)\n  }\n  return (\n    <button\n      type=\"button\"\n      className={cn(BUTTON, className)}\n      title={label}\n      aria-label={label}\n      disabled={disabled}\n      onPointerDown={start}\n      onPointerUp={stop}\n      onPointerLeave={stop}\n      onPointerCancel={stop}\n      // Keyboard: Enter / Space step once.\n      onClick={(event) => event.detail === 0 && onStep()}\n    >\n      {children}\n    </button>\n  )\n}\n\nexport function ClipViewControls({ clip }: { clip: Clip }) {\n  const { panClip, setClipZoom } = usePresentation.getState()\n  const { rect } = clip\n  const zoomBase = clip.zoomBase ?? rect.w\n  // As far out as it goes: the widest area of this shape the source holds.\n  const minZoom = Math.min(100, Math.floor((zoomBase / Math.min(1, rect.w / rect.h)) * 100))\n  const pan = (dx: number, dy: number) => () => panClip(clip.id, dx * rect.w, dy * rect.h)\n  const zoom = Math.round((zoomBase / rect.w) * 100)\n  const edge = 1e-6\n  return (\n    <div\n      className=\"pointer-events-none absolute inset-0 z-10\"\n      // A press on the layer is not a press on the clip (which would start moving it).\n      onPointerDown={(event) => event.stopPropagation()}\n      data-testid=\"clip-view-controls\"\n    >\n      <HoldButton\n        label=\"Show more above\"\n        disabled={rect.y <= edge}\n        onStep={pan(0, -PAN_STEP)}\n        className=\"absolute left-1/2 top-4 -translate-x-1/2 pointer-coarse:top-7\"\n      >\n        <ChevronUp className=\"size-4\" />\n      </HoldButton>\n      <HoldButton\n        label=\"Show more below\"\n        disabled={rect.y + rect.h >= 1 - edge}\n        onStep={pan(0, PAN_STEP)}\n        className=\"absolute bottom-10 left-1/2 -translate-x-1/2 pointer-coarse:bottom-14\"\n      >\n        <ChevronDown className=\"size-4\" />\n      </HoldButton>\n      <HoldButton\n        label=\"Show more on the left\"\n        disabled={rect.x <= edge}\n        onStep={pan(-PAN_STEP, 0)}\n        className=\"absolute left-4 top-1/2 -translate-y-1/2 pointer-coarse:left-7\"\n      >\n        <ChevronLeft className=\"size-4\" />\n      </HoldButton>\n      <HoldButton\n        label=\"Show more on the right\"\n        disabled={rect.x + rect.w >= 1 - edge}\n        onStep={pan(PAN_STEP, 0)}\n        className=\"absolute right-4 top-1/2 -translate-y-1/2 pointer-coarse:right-7\"\n      >\n        <ChevronRight className=\"size-4\" />\n      </HoldButton>\n      {/* Zoom: a slider, from as far out as the source allows to MAX_ZOOM. */}\n      <div\n        className=\"pointer-events-auto absolute bottom-1.5 left-1/2 -translate-x-1/2\"\n        data-testid=\"clip-zoom-control\"\n      >\n        <ZoomSlider\n          value={zoom}\n          min={minZoom}\n          max={Math.max(MAX_ZOOM, zoom)}\n          zoomOutStep={25}\n          onChange={(value) => setClipZoom(clip.id, value)}\n          label=\"Zoom\"\n          valueLabel={<span data-testid=\"clip-zoom\">{zoom}%</span>}\n          // Over the clip: on the surface colour, so it reads over any content.\n          className=\"bg-background/95 shadow-sm backdrop-blur-sm pointer-coarse:h-11\"\n          sliderClassName=\"w-24\"\n        />\n      </div>\n    </div>\n  )\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * A clip's view controls (in its action bar's View popover, so nothing covers what it shows):\n * arrows scroll what the clip shows over its source (a press steps, holding keeps scrolling; an\n * arrow at the source's edge is off), and a zoom slider zooms about the clip's centre.\n * The clip's frame on the slide does not change; only the part of the source it shows. Presses\n * here never start moving the clip.\n */\n\nimport { useEffect, useRef, type PointerEvent as ReactPointerEvent, type ReactNode } from 'react'\nimport { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from 'lucide-react'\nimport { cn } from '@arbidocs/react/ui'\nimport { ZoomSlider } from '../components/ZoomSlider'\nimport type { Clip } from './model'\nimport { usePresentation } from './store'\n\n/** One step scrolls this much of what the clip shows. */\nconst PAN_STEP = 0.1\n/** The closest a clip zooms, in percent of how close it was cut. */\nconst MAX_ZOOM = 800\n/** Holding a button repeats it after this long, this often. */\nconst HOLD_DELAY = 350\nconst HOLD_EVERY = 90\n\nconst BUTTON =\n  'flex size-7 items-center justify-center rounded-full border border-border bg-background text-foreground hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-30 pointer-coarse:size-11'\n\n/** A button that acts on press and keeps acting while held. */\nfunction HoldButton({\n  label,\n  disabled,\n  onStep,\n  className,\n  children,\n}: {\n  label: string\n  disabled?: boolean\n  onStep: () => void\n  className?: string\n  children: ReactNode\n}) {\n  const timer = useRef<ReturnType<typeof setTimeout> | null>(null)\n  const stop = () => {\n    if (timer.current) clearTimeout(timer.current)\n    timer.current = null\n  }\n  useEffect(() => stop, [])\n  useEffect(() => {\n    if (disabled) stop()\n  }, [disabled])\n  const start = (event: ReactPointerEvent) => {\n    event.stopPropagation()\n    if (disabled || event.button !== 0) return\n    onStep()\n    const repeat = () => {\n      onStep()\n      timer.current = setTimeout(repeat, HOLD_EVERY)\n    }\n    timer.current = setTimeout(repeat, HOLD_DELAY)\n  }\n  return (\n    <button\n      type=\"button\"\n      className={cn(BUTTON, className)}\n      title={label}\n      aria-label={label}\n      disabled={disabled}\n      onPointerDown={start}\n      onPointerUp={stop}\n      onPointerLeave={stop}\n      onPointerCancel={stop}\n      // Keyboard: Enter / Space step once.\n      onClick={(event) => event.detail === 0 && onStep()}\n    >\n      {children}\n    </button>\n  )\n}\n\nexport function ClipViewControls({ clip }: { clip: Clip }) {\n  const { panClip, setClipZoom } = usePresentation.getState()\n  const { rect } = clip\n  const zoomBase = clip.zoomBase ?? rect.w\n  // As far out as it goes: the widest area of this shape the source holds.\n  const minZoom = Math.min(100, Math.floor((zoomBase / Math.min(1, rect.w / rect.h)) * 100))\n  const pan = (dx: number, dy: number) => () => panClip(clip.id, dx * rect.w, dy * rect.h)\n  const zoom = Math.round((zoomBase / rect.w) * 100)\n  const edge = 1e-6\n  return (\n    <div\n      className=\"flex flex-col items-center gap-2 p-1\"\n      // A press here is not a press on the clip (which would start moving it).\n      onPointerDown={(event) => event.stopPropagation()}\n      data-testid=\"clip-view-controls\"\n    >\n      {/* Move the view: what the clip shows, over its source (the wheel does the same). */}\n      <div className=\"grid grid-cols-3 grid-rows-3 place-items-center gap-0.5\">\n        <HoldButton\n          label=\"Show more above\"\n          disabled={rect.y <= edge}\n          onStep={pan(0, -PAN_STEP)}\n          className=\"col-start-2 row-start-1\"\n        >\n          <ChevronUp className=\"size-4\" />\n        </HoldButton>\n        <HoldButton\n          label=\"Show more on the left\"\n          disabled={rect.x <= edge}\n          onStep={pan(-PAN_STEP, 0)}\n          className=\"col-start-1 row-start-2\"\n        >\n          <ChevronLeft className=\"size-4\" />\n        </HoldButton>\n        <HoldButton\n          label=\"Show more on the right\"\n          disabled={rect.x + rect.w >= 1 - edge}\n          onStep={pan(PAN_STEP, 0)}\n          className=\"col-start-3 row-start-2\"\n        >\n          <ChevronRight className=\"size-4\" />\n        </HoldButton>\n        <HoldButton\n          label=\"Show more below\"\n          disabled={rect.y + rect.h >= 1 - edge}\n          onStep={pan(0, PAN_STEP)}\n          className=\"col-start-2 row-start-3\"\n        >\n          <ChevronDown className=\"size-4\" />\n        </HoldButton>\n      </div>\n      {/* Zoom: a slider, from as far out as the source allows to MAX_ZOOM. */}\n      <div data-testid=\"clip-zoom-control\">\n        <ZoomSlider\n          value={zoom}\n          min={minZoom}\n          max={Math.max(MAX_ZOOM, zoom)}\n          zoomOutStep={25}\n          onChange={(value) => setClipZoom(clip.id, value)}\n          label=\"Zoom\"\n          valueLabel={<span data-testid=\"clip-zoom\">{zoom}%</span>}\n          className=\"pointer-coarse:h-11\"\n          sliderClassName=\"w-28\"\n        />\n      </div>\n    </div>\n  )\n}\n"],
+  "mappings": "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",
   "names": []
 }