@arbidocs/blocks 0.5.121 → 0.5.123

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/OpenConversationButton.tsx","../src/nav/actions.ts","../src/nav/manifest.ts"],"names":["hrefFor","useBlocksEnvironment","jsxs","ActionLink","cn","buttonVariants","jsx","MessagesSquare","createElement"],"mappings":"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","file":"index.cjs","sourcesContent":["import { MessagesSquare } from 'lucide-react'\nimport { buttonVariants, cn } from '@arbidocs/react/ui'\nimport { useBlocksEnvironment } from '../provider/environment'\nimport { ActionLink } from './ActionLink'\n\nexport interface OpenConversationButtonProps {\n  /** The conversation behind an AI result; none: nothing is rendered. */\n  conversationId: string | null | undefined\n  /** The workspace it is in, for its link. */\n  workspaceId?: string | null\n  /** A message to scroll to. */\n  messageId?: string\n  /** Default \"Open in thread\". */\n  label?: string\n  className?: string\n  testId?: string\n}\n\n/**\n * \"Open in thread\": the full conversation behind an AI result (a brief, a translation, a draft),\n * to check its sources and follow up. A real link where the host gives one (`hrefFor`), opened with\n * `openConversation`.\n */\nexport function OpenConversationButton({\n  conversationId,\n  workspaceId,\n  messageId,\n  label = 'Open in thread',\n  className,\n  testId,\n}: OpenConversationButtonProps) {\n  const { hrefFor, openConversation } = useBlocksEnvironment()\n  if (!conversationId) return null\n  return (\n    <ActionLink\n      href={hrefFor({ kind: 'conversation', conversationId, workspaceId, messageId })}\n      onSelect={() =>\n        openConversation(conversationId, {\n          ...(messageId && { messageId }),\n          ...(workspaceId && { workspaceId }),\n        })\n      }\n      className={cn(buttonVariants({ variant: 'outline', size: 'sm' }), className)}\n      data-testid={testId}\n    >\n      <MessagesSquare className=\"size-3.5\" aria-hidden />\n      {label}\n    </ActionLink>\n  )\n}\n","import type { ArbiFeature } from '@arbidocs/react'\n\n/** Who is asking, for an action's `available` (the same gates the primary UI applies). */\nexport interface ActionContext {\n  /** The open workspace; `null` outside one. */\n  workspaceId: string | null\n  /** The viewer is a member of the open workspace. */\n  isMember: boolean\n  /** The viewer's role there (`owner`, `collaborator`, `guest`); `null` when not a member. */\n  role: string | null\n  /** A temporary-access (external) account. */\n  isTemporaryAccess: boolean\n  /** Whether the account may create projects; `undefined` until known. */\n  canCreateProjects: boolean | undefined\n  isFeatureOn: (feature: ArbiFeature) => boolean\n}\n\n/** A parameter-light action, supplied by a host and usable outside React. */\nexport interface ActionDefinition<Id extends string = string> {\n  id: Id\n  label: string\n  category: string\n  /**\n   * An icon name, so the catalogue stays independent of a renderer. The palette draws the lucide\n   * icons its catalogue names (`connection/command/icons.ts`); any other name, a generic glyph.\n   */\n  icon: string\n  keywords?: readonly string[]\n  /** Offered (in the command palette) only when it says so. Dispatch is not gated. */\n  available?: (context: ActionContext) => boolean\n  /** `false`: dispatch only, never listed (a second name for another row's effect). */\n  listed?: boolean\n  run: () => void\n}\n\n/** One catalogue for picker options, tip CTAs, palettes and validated remote dispatch. */\nexport function defineActions<Id extends string, Action extends ActionDefinition<Id>>(\n  actions: Partial<Record<Id, Action>>,\n  options: { scopedIds?: readonly Id[]; onUnknown?: (id: Id) => void } = {}\n) {\n  const scoped = new Set<string>(options.scopedIds)\n  return {\n    actions,\n    options: (Object.values(actions) as Action[]).map(({ id, label, category }) => ({\n      value: id,\n      label,\n      category,\n    })),\n    isActionId(value: string): value is Id {\n      return scoped.has(value) || Object.prototype.hasOwnProperty.call(actions, value)\n    },\n    run(id: Id): void {\n      const action = Object.prototype.hasOwnProperty.call(actions, id) ? actions[id] : undefined\n      if (action) action.run()\n      else options.onUnknown?.(id)\n    },\n  }\n}\n","import { createElement } from 'react'\nimport type { AppNavItem, AppNavSection } from './types'\nimport type { NavItem } from '../shell/types'\n\n/**\n * A host's destinations, once: the items are also the command palette's nav contract. Resolve\n * their state and handlers for ShellSidebar or MobileTabBar without copying the catalogue.\n */\nexport function defineNavigation(sections: readonly AppNavSection[]) {\n  const items = sections.flatMap((section) => section.items)\n  return {\n    sections,\n    items,\n    resolve(options: {\n      beforeNavigate?: () => void\n      onNavigate: (item: AppNavItem) => void\n      itemProps?: (item: AppNavItem) => Partial<Omit<NavItem, 'id' | 'label' | 'onSelect'>>\n    }): NavItem[] {\n      return items.map((item) => ({\n        id: item.id,\n        label: item.label,\n        icon: createElement(item.icon, { className: 'size-5' }),\n        ...options.itemProps?.(item),\n        onSelect: () => {\n          options.beforeNavigate?.()\n          options.onNavigate(item)\n        },\n      }))\n    },\n  }\n}\n"]}
+{"version":3,"sources":["../src/components/OpenConversationButton.tsx","../src/nav/actions.ts","../src/nav/manifest.ts"],"names":["hrefFor","useBlocksEnvironment","jsxs","ActionLink","cn","buttonVariants","jsx","MessagesSquare","createElement"],"mappings":"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","file":"index.cjs","sourcesContent":["import { MessagesSquare } from 'lucide-react'\nimport { buttonVariants, cn } from '@arbidocs/react/ui'\nimport { useBlocksEnvironment } from '../provider/environment'\nimport { ActionLink } from './ActionLink'\n\nexport interface OpenConversationButtonProps {\n  /** The conversation behind an AI result; none: nothing is rendered. */\n  conversationId: string | null | undefined\n  /** The workspace it is in, for its link. */\n  workspaceId?: string | null\n  /** A message to scroll to. */\n  messageId?: string\n  /** Default \"Open in thread\". */\n  label?: string\n  className?: string\n  testId?: string\n}\n\n/**\n * \"Open in thread\": the full conversation behind an AI result (a brief, a translation, a draft),\n * to check its sources and follow up. A real link where the host gives one (`hrefFor`), opened with\n * `openConversation`.\n */\nexport function OpenConversationButton({\n  conversationId,\n  workspaceId,\n  messageId,\n  label = 'Open in thread',\n  className,\n  testId,\n}: OpenConversationButtonProps) {\n  const { hrefFor, openConversation } = useBlocksEnvironment()\n  if (!conversationId) return null\n  return (\n    <ActionLink\n      href={hrefFor({ kind: 'conversation', conversationId, workspaceId, messageId })}\n      onSelect={() =>\n        openConversation(conversationId, {\n          ...(messageId && { messageId }),\n          ...(workspaceId && { workspaceId }),\n        })\n      }\n      className={cn(buttonVariants({ variant: 'outline', size: 'sm' }), className)}\n      data-testid={testId}\n    >\n      <MessagesSquare className=\"size-3.5\" aria-hidden />\n      {label}\n    </ActionLink>\n  )\n}\n","import type { ArbiFeature } from '@arbidocs/react'\n\n/** Who is asking, for an action's `available` (the same gates the primary UI applies). */\nexport interface ActionContext {\n  /** The open workspace; `null` outside one. */\n  workspaceId: string | null\n  /** The viewer is a member of the open workspace. */\n  isMember: boolean\n  /** The viewer's role there (`owner`, `collaborator`, `guest`); `null` when not a member. */\n  role: string | null\n  /** A temporary-access (external) account. */\n  isTemporaryAccess: boolean\n  /** Whether the account may create projects; `undefined` until known. */\n  canCreateProjects: boolean | undefined\n  isFeatureOn: (feature: ArbiFeature) => boolean\n}\n\n/** A parameter-light action, supplied by a host and usable outside React. */\nexport interface ActionDefinition<Id extends string = string> {\n  id: Id\n  label: string\n  category: string\n  /**\n   * An icon name, so the catalogue stays independent of a renderer. The palette draws the lucide\n   * icons its catalogue names (`connection/command/icons.ts`); any other name, a generic glyph.\n   */\n  icon: string\n  keywords?: readonly string[]\n  /** Offered (in the command palette) only when it says so. Dispatch is not gated. */\n  available?: (context: ActionContext) => boolean\n  /** `false`: dispatch only, never listed (a second name for another row's effect). */\n  listed?: boolean\n  run: () => void\n}\n\n/** One catalogue for picker options, tip CTAs, palettes and validated remote dispatch. */\nexport function defineActions<Id extends string, Action extends ActionDefinition<Id>>(\n  actions: Partial<Record<Id, Action>>,\n  options: { scopedIds?: readonly Id[]; onUnknown?: (id: Id) => void } = {}\n) {\n  const scoped = new Set<string>(options.scopedIds)\n  return {\n    actions,\n    options: (Object.values(actions) as Action[]).map(({ id, label, category }) => ({\n      value: id,\n      label,\n      category,\n    })),\n    isActionId(value: string): value is Id {\n      return scoped.has(value) || Object.prototype.hasOwnProperty.call(actions, value)\n    },\n    run(id: Id): void {\n      const action = Object.prototype.hasOwnProperty.call(actions, id) ? actions[id] : undefined\n      if (action) action.run()\n      else options.onUnknown?.(id)\n    },\n  }\n}\n","import { createElement } from 'react'\nimport type { AppNavItem, AppNavSection } from './types'\nimport type { NavItem } from '../shell/types'\n\n/**\n * A host's destinations, once: the items are also the command palette's nav contract. Resolve\n * their state and handlers for ShellSidebar or MobileTabBar without copying the catalogue.\n */\nexport function defineNavigation(sections: readonly AppNavSection[]) {\n  const items = sections.flatMap((section) => section.items)\n  return {\n    sections,\n    items,\n    resolve(options: {\n      beforeNavigate?: () => void\n      onNavigate: (item: AppNavItem) => void\n      itemProps?: (item: AppNavItem) => Partial<Omit<NavItem, 'id' | 'label' | 'onSelect'>>\n    }): NavItem[] {\n      return items.map((item) => ({\n        id: item.id,\n        label: item.label,\n        icon: createElement(item.icon, { className: 'size-5' }),\n        ...options.itemProps?.(item),\n        onSelect: () => {\n          options.beforeNavigate?.()\n          options.onNavigate(item)\n        },\n      }))\n    },\n  }\n}\n"]}

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": ";AA4CkD,cAwEtC,YAxEsC;AArClD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,wBAAwB;AAEjC,SAAS,uBAA0C;AAE5C,MAAM,SACX;AAEF,MAAM,QAAqE;AAAA,EACzE,EAAE,SAAS,OAAO,OAAO,iBAAiB,MAAM,oBAAC,aAAU,WAAU,UAAS,EAAG;AAAA,EACjF,EAAE,SAAS,aAAa,OAAO,cAAc,MAAM,oBAAC,kBAAe,WAAU,UAAS,EAAG;AAAA,EACzF,EAAE,SAAS,cAAc,OAAO,eAAe,MAAM,oBAAC,gBAAa,WAAU,UAAS,EAAG;AAC3F;AAEA,MAAM,aAAyE;AAAA,EAC7E,EAAE,WAAW,QAAQ,OAAO,QAAQ,MAAM,oBAAC,sBAAmB,WAAU,UAAS,EAAG;AAAA,EACpF,EAAE,WAAW,UAAU,OAAO,UAAU,MAAM,oBAAC,uBAAoB,WAAU,UAAS,EAAG;AAAA,EACzF,EAAE,WAAW,SAAS,OAAO,SAAS,MAAM,oBAAC,oBAAiB,WAAU,UAAS,EAAG;AAAA,EACpF,EAAE,WAAW,OAAO,OAAO,OAAO,MAAM,oBAAC,wBAAqB,WAAU,UAAS,EAAG;AAAA,EACpF,EAAE,WAAW,UAAU,OAAO,UAAU,MAAM,oBAAC,yBAAsB,WAAU,UAAS,EAAG;AAAA,EAC3F,EAAE,WAAW,UAAU,OAAO,UAAU,MAAM,oBAAC,sBAAmB,WAAU,UAAS,EAAG;AAC1F;AAEO,SAAS,OAAO;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,SACE,oBAAC,YAAO,MAAK,UAAS,WAAW,QAAQ,OAAO,OAAO,cAAY,OAAO,SACvE,UACH;AAEJ;AAaO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAuB;AACrB,QAAM,UAAU,gBAAgB,SAAS;AACzC,QAAM,OAAO,gBAAgB,CAAC,UAAU,MAAM,MAAM,KAAK,CAAC,UAAU,MAAM,OAAO,MAAM,CAAC;AACxF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAW;AAAA,MACX,WAAU;AAAA,MACV,OAAO,EAAE,MAAM,GAAG,GAAG,IAAI,GAAG,KAAK,KAAK,QAAQ,GAAG,IAAI,GAAG,YAAY;AAAA,MAEpE,eAAe,CAAC,UAAU,MAAM,gBAAgB;AAAA,MAChD,eAAY;AAAA,MAGZ;AAAA,4BAAC,UAAO,OAAM,iBAAgB,SAAS,MAAM,QAAQ,WAAW,QAAQ,KAAK,GAC3E,8BAAC,aAAU,WAAU,UAAS,GAChC;AAAA,QACA,qBAAC,gBACC;AAAA,8BAAC,uBAAoB,SAAO,MAC1B,8BAAC,YAAO,MAAK,UAAS,WAAW,QAAQ,OAAM,SAAQ,cAAW,SAChE,8BAAC,yBAAsB,WAAU,UAAS,GAC5C,GACF;AAAA,UACA,oBAAC,uBAAoB,OAAM,SACxB,qBAAW,IAAI,CAAC,EAAE,WAAW,OAAO,KAAK,MACxC,qBAAC,oBAAiC,UAAU,MAAM,QAAQ,MAAM,QAAQ,SAAS,GAC9E;AAAA;AAAA,YACD,oBAAC,UAAK,WAAU,QAAQ,iBAAM;AAAA,eAFT,SAGvB,CACD,GACH;AAAA,WACF;AAAA,QACC,QACC,qBAAC,WACC;AAAA,8BAAC,kBAAe,SAAO,MACrB;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAW;AAAA,cACX,OAAM;AAAA,cACN,cAAW;AAAA,cACX,eAAY;AAAA,cAEZ,8BAAC,UAAO,WAAU,UAAS;AAAA;AAAA,UAC7B,GACF;AAAA,UACA,oBAAC,kBAAe,OAAM,SAAQ,WAAU,cACtC,8BAAC,oBAAiB,MAAY,GAChC;AAAA,WACF;AAAA,QAGF,qBAAC,gBACC;AAAA,8BAAC,uBAAoB,SAAO,MAC1B;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAW;AAAA,cACX,OAAM;AAAA,cACN,cAAW;AAAA,cACX,eAAY;AAAA,cAEZ,8BAAC,kBAAe,WAAU,UAAS;AAAA;AAAA,UACrC,GACF;AAAA,UACA,qBAAC,uBAAoB,OAAM,SACxB;AAAA,kBAAM,OAAO,CAAC,EAAE,QAAQ,MAAM,YAAY,KAAK,EAAE,IAAI,CAAC,EAAE,SAAS,OAAO,KAAK,MAC5E,qBAAC,oBAA+B,UAAU,MAAM,QAAQ,WAAW,QAAQ,OAAO,GAC/E;AAAA;AAAA,cACD,oBAAC,UAAK,WAAU,QAAQ,iBAAM;AAAA,iBAFT,OAGvB,CACD;AAAA,YACA,eACC,qBAAC,oBAAiB,UAAU,aAC1B;AAAA,kCAAC,QAAK,WAAU,UAAS;AAAA,cACzB,oBAAC,UAAK,WAAU,QAAO,kBAAI;AAAA,eAC7B;AAAA,YAED,eACC,qBAAC,oBAAiB,UAAU,aAC1B;AAAA,kCAAC,YAAS,WAAU,UAAS;AAAA,cAC7B,oBAAC,UAAK,WAAU,QAAO,wBAAU;AAAA,eACnC;AAAA,YAEF,oBAAC,yBAAsB;AAAA,YACvB,qBAAC,oBAAiB,UAAU,MAAM,QAAQ,aAAa,MAAM,GAC3D;AAAA,kCAAC,gBAAa,WAAU,UAAS;AAAA,cACjC,oBAAC,UAAK,WAAU,QAAO,4BAAc;AAAA,eACvC;AAAA,YACA,qBAAC,oBAAiB,UAAU,MAAM,QAAQ,WAAW,MAAM,GACzD;AAAA,kCAAC,cAAW,WAAU,UAAS;AAAA,cAC/B,oBAAC,UAAK,WAAU,QAAO,0BAAY;AAAA,eACrC;AAAA,aACF;AAAA,WACF;AAAA,QACA,oBAAC,SAAI,WAAU,6BAA4B;AAAA,QAC3C;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAW,GAAG,QAAQ,0CAA0C;AAAA,YAChE,OAAM;AAAA,YACN,cAAW;AAAA,YACX,SAAS,MAAM;AACb,sBAAQ,QAAQ,MAAM;AACtB,wBAAU;AAAA,YACZ;AAAA,YAEA,8BAAC,UAAO,WAAU,UAAS;AAAA;AAAA,QAC7B;AAAA;AAAA;AAAA,EACF;AAEJ;",
   "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"
-              }
-            )
-          }
-        )
+        ) })
       ]
     }
   );