@arbidocs/blocks 0.5.120 → 0.5.121

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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBO,SAAS,sBAAA,CAAuB;AAAA,EACrC,cAAA;AAAA,EACA,WAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA,GAAQ,gBAAA;AAAA,EACR,SAAA;AAAA,EACA;AACF,CAAA,EAAgC;AAC9B,EAAA,MAAM,EAAE,OAAA,EAAAA,QAAAA,EAAS,gBAAA,KAAqBC,sCAAA,EAAqB;AAC3D,EAAA,IAAI,CAAC,gBAAgB,OAAO,IAAA;AAC5B,EAAA,uBACEC,eAAA;AAAA,IAACC,4BAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAMH,SAAQ,EAAE,IAAA,EAAM,gBAAgB,cAAA,EAAgB,WAAA,EAAa,WAAW,CAAA;AAAA,MAC9E,QAAA,EAAU,MACR,gBAAA,CAAiB,cAAA,EAAgB;AAAA,QAC/B,GAAI,SAAA,IAAa,EAAE,SAAA,EAAU;AAAA,QAC7B,GAAI,WAAA,IAAe,EAAE,WAAA;AAAY,OAClC,CAAA;AAAA,MAEH,SAAA,EAAWI,KAAA,CAAGC,iBAAA,CAAe,EAAE,OAAA,EAAS,WAAW,IAAA,EAAM,IAAA,EAAM,CAAA,EAAG,SAAS,CAAA;AAAA,MAC3E,aAAA,EAAa,MAAA;AAAA,MAEb,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAACC,0BAAA,EAAA,EAAe,SAAA,EAAU,UAAA,EAAW,aAAA,EAAW,IAAA,EAAC,CAAA;AAAA,QAChD;AAAA;AAAA;AAAA,GACH;AAEJ;;;ACbO,SAAS,aAAA,CACd,OAAA,EACA,OAAA,GAAuE,EAAC,EACxE;AACA,EAAA,MAAM,MAAA,GAAS,IAAI,GAAA,CAAY,OAAA,CAAQ,SAAS,CAAA;AAChD,EAAA,OAAO;AAAA,IACL,OAAA;AAAA,IACA,OAAA,EAAU,MAAA,CAAO,MAAA,CAAO,OAAO,CAAA,CAAe,GAAA,CAAI,CAAC,EAAE,EAAA,EAAI,KAAA,EAAO,QAAA,EAAS,MAAO;AAAA,MAC9E,KAAA,EAAO,EAAA;AAAA,MACP,KAAA;AAAA,MACA;AAAA,KACF,CAAE,CAAA;AAAA,IACF,WAAW,KAAA,EAA4B;AACrC,MAAA,OAAO,MAAA,CAAO,IAAI,KAAK,CAAA,IAAK,OAAO,SAAA,CAAU,cAAA,CAAe,IAAA,CAAK,OAAA,EAAS,KAAK,CAAA;AAAA,IACjF,CAAA;AAAA,IACA,IAAI,EAAA,EAAc;AAChB,MAAA,MAAM,MAAA,GAAS,MAAA,CAAO,SAAA,CAAU,cAAA,CAAe,IAAA,CAAK,SAAS,EAAE,CAAA,GAAI,OAAA,CAAQ,EAAE,CAAA,GAAI,MAAA;AACjF,MAAA,IAAI,MAAA,SAAe,GAAA,EAAI;AAAA,WAClB,OAAA,CAAQ,YAAY,EAAE,CAAA;AAAA,IAC7B;AAAA,GACF;AACF;ACjDO,SAAS,iBAAiB,QAAA,EAAoC;AACnE,EAAA,MAAM,QAAQ,QAAA,CAAS,OAAA,CAAQ,CAAC,OAAA,KAAY,QAAQ,KAAK,CAAA;AACzD,EAAA,OAAO;AAAA,IACL,QAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAQ,OAAA,EAIM;AACZ,MAAA,OAAO,KAAA,CAAM,GAAA,CAAI,CAAC,IAAA,MAAU;AAAA,QAC1B,IAAI,IAAA,CAAK,EAAA;AAAA,QACT,OAAO,IAAA,CAAK,KAAA;AAAA,QACZ,MAAMC,mBAAA,CAAc,IAAA,CAAK,MAAM,EAAE,SAAA,EAAW,UAAU,CAAA;AAAA,QACtD,GAAG,OAAA,CAAQ,SAAA,GAAY,IAAI,CAAA;AAAA,QAC3B,UAAU,MAAM;AACd,UAAA,OAAA,CAAQ,cAAA,IAAiB;AACzB,UAAA,OAAA,CAAQ,WAAW,IAAI,CAAA;AAAA,QACzB;AAAA,OACF,CAAE,CAAA;AAAA,IACJ;AAAA,GACF;AACF","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

@@ -0,0 +1,11 @@
+/**
+ * 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 system's colour picker.
+ */
+import { type SlideBox } from './boxes';
+export interface BoxActionBarProps {
+    box: SlideBox;
+    onRemoved: () => void;
+}
+export declare function BoxActionBar({ box, onRemoved }: BoxActionBarProps): import("react").JSX.Element;

package/dist/presentation/BoxActionBar.js

@@ -0,0 +1,182 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  AlignCenter,
+  AlignLeft,
+  AlignRight,
+  AArrowDown,
+  AArrowUp,
+  Baseline,
+  Bold,
+  BringToFront,
+  Italic,
+  PaintBucket,
+  SendToBack,
+  Trash2
+} from "lucide-react";
+import { 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" }),
+  right: /* @__PURE__ */ jsx(AlignRight, { className: "size-4" }),
+  justify: /* @__PURE__ */ jsx(AlignLeft, { className: "size-4" })
+};
+function ColorAction({
+  label,
+  value,
+  onChange,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("label", { className: cn(ACTION, "relative cursor-pointer"), title: label, "aria-label": label, children: [
+    children,
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "pointer-events-none absolute inset-x-1.5 bottom-0.5 h-0.5 rounded-full",
+        style: { background: value }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "color",
+        value,
+        onChange: (event) => onChange(event.target.value),
+        className: "absolute inset-0 size-full cursor-pointer opacity-0",
+        "aria-label": label
+      }
+    )
+  ] });
+}
+function BoxActionBar({ box, onRemoved }) {
+  const actions = usePresentation.getState();
+  const run = firstRun(box);
+  const size = run?.size ?? DEFAULT_TEXT_SIZE;
+  const align = box.paragraphs[0]?.align ?? "left";
+  const update = (change) => actions.updateBox(box.id, change);
+  const text = box.shape !== "line";
+  const top = Math.max(0, box.frame.y);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "toolbar",
+      "aria-label": "Text box",
+      className: "absolute z-20 flex items-center gap-0.5 rounded-md border border-border bg-background p-0.5 shadow-md",
+      style: {
+        left: `${Math.min(Math.max(0, box.frame.x), 0.6) * 100}%`,
+        top: `calc(${top * 100}% - 40px)`
+      },
+      onPointerDown: (event) => event.stopPropagation(),
+      "data-testid": "box-action-bar",
+      children: [
+        text && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Action,
+            {
+              label: "Smaller",
+              onClick: () => update((b) => styleRuns(b, (r) => ({ ...r, size: nextSize(r.size ?? size, false) }))),
+              children: /* @__PURE__ */ jsx(AArrowDown, { className: "size-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "w-7 text-center text-xs tabular-nums text-muted-foreground",
+              "data-testid": "box-text-size",
+              children: Math.round(size)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Action,
+            {
+              label: "Larger",
+              onClick: () => update((b) => styleRuns(b, (r) => ({ ...r, size: nextSize(r.size ?? size, true) }))),
+              children: /* @__PURE__ */ jsx(AArrowUp, { className: "size-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Action,
+            {
+              label: "Bold",
+              onClick: () => update((b) => styleRuns(b, (r) => ({ ...r, bold: !run?.bold }))),
+              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,
+            {
+              label: "Text colour",
+              value: run?.color ?? TEXT_COLORS.body,
+              onChange: (color) => update((b) => styleRuns(b, (r) => ({ ...r, color }))),
+              children: /* @__PURE__ */ jsx(Baseline, { className: "size-4" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          ColorAction,
+          {
+            label: box.shape === "line" ? "Line colour" : "Fill",
+            value: (box.shape === "line" ? box.line?.color : box.fill) ?? "#ffffff",
+            onChange: (color) => update(
+              (b) => b.shape === "line" ? { ...b, line: { width: b.line?.width ?? 2, ...b.line, color } } : { ...b, fill: color, shape: b.shape === "text" ? "rect" : b.shape }
+            ),
+            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__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: cn(ACTION, "text-destructive hover:bg-destructive/10"),
+            title: "Delete (Delete)",
+            "aria-label": "Delete",
+            onClick: () => {
+              actions.removeBox(box.id);
+              onRemoved();
+            },
+            children: /* @__PURE__ */ jsx(Trash2, { className: "size-4" })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  BoxActionBar
+};
+//# sourceMappingURL=BoxActionBar.js.map

package/dist/presentation/BoxActionBar.js.map

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

package/dist/presentation/ClipActionBar.d.ts

@@ -0,0 +1,26 @@
+/**
+ * The floating action bar over the selected clip (the markup overlay's pattern): size it to the
+ * stage, align it, put it in front or behind, take it off the slide. Icons with labels on hover
+ * (`title`: portalled tooltips misplace in a popped-out window).
+ */
+import type { ReactNode } from 'react';
+export declare 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";
+export declare function Action({ label, onClick, children, }: {
+    label: string;
+    onClick: () => void;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export interface ClipActionBarProps {
+    clipId: string;
+    /** The clip's top-left, as fractions of the stage. */
+    at: {
+        x: number;
+        y: number;
+    };
+    onRemoved: () => void;
+    /** An image clip: make a new version of the image (Generate image with it as the reference). */
+    onEditImage?: () => void;
+    /** An image clip: choose the part of the image it shows. */
+    onCropImage?: () => void;
+}
+export declare function ClipActionBar({ clipId, at, onRemoved, onEditImage, onCropImage, }: ClipActionBarProps): import("react").JSX.Element;

package/dist/presentation/ClipActionBar.js

@@ -0,0 +1,103 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  AlignCenterHorizontal,
+  AlignCenterVertical,
+  AlignEndHorizontal,
+  AlignEndVertical,
+  AlignStartHorizontal,
+  AlignStartVertical,
+  BringToFront,
+  Crop,
+  Maximize2,
+  MoveHorizontal,
+  MoveVertical,
+  SendToBack,
+  Sparkles,
+  Trash2
+} from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  cn
+} from "@arbidocs/react/ui";
+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 = [
+  { command: "fit", label: "Fit the slide", icon: /* @__PURE__ */ jsx(Maximize2, { className: "size-4" }) },
+  { command: "fullWidth", label: "Full width", icon: /* @__PURE__ */ jsx(MoveHorizontal, { className: "size-4" }) },
+  { command: "fullHeight", label: "Full height", icon: /* @__PURE__ */ jsx(MoveVertical, { className: "size-4" }) }
+];
+const ALIGNMENTS = [
+  { alignment: "left", label: "Left", icon: /* @__PURE__ */ jsx(AlignStartVertical, { className: "size-4" }) },
+  { alignment: "centre", label: "Centre", icon: /* @__PURE__ */ jsx(AlignCenterVertical, { className: "size-4" }) },
+  { alignment: "right", label: "Right", icon: /* @__PURE__ */ jsx(AlignEndVertical, { className: "size-4" }) },
+  { alignment: "top", label: "Top", icon: /* @__PURE__ */ jsx(AlignStartHorizontal, { className: "size-4" }) },
+  { alignment: "middle", label: "Middle", icon: /* @__PURE__ */ jsx(AlignCenterHorizontal, { className: "size-4" }) },
+  { alignment: "bottom", label: "Bottom", icon: /* @__PURE__ */ jsx(AlignEndHorizontal, { className: "size-4" }) }
+];
+function Action({
+  label,
+  onClick,
+  children
+}) {
+  return /* @__PURE__ */ jsx("button", { type: "button", className: ACTION, title: label, "aria-label": label, onClick, children });
+}
+function ClipActionBar({
+  clipId,
+  at,
+  onRemoved,
+  onEditImage,
+  onCropImage
+}) {
+  const actions = usePresentation.getState();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "toolbar",
+      "aria-label": "Clip",
+      className: "absolute z-20 flex items-center gap-0.5 rounded-md border border-border bg-background p-0.5 shadow-md",
+      style: { left: `${at.x * 100}%`, top: `calc(${at.y * 100}% - 40px)` },
+      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__ */ 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: [
+            icon,
+            /* @__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" }) }),
+        /* @__PURE__ */ jsx("div", { className: "mx-0.5 h-5 w-px bg-border" }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: cn(ACTION, "text-destructive hover:bg-destructive/10"),
+            title: "Remove from slide (Delete)",
+            "aria-label": "Remove from slide",
+            onClick: () => {
+              actions.unplace(clipId);
+              onRemoved();
+            },
+            children: /* @__PURE__ */ jsx(Trash2, { className: "size-4" })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  ACTION,
+  Action,
+  ClipActionBar
+};
+//# sourceMappingURL=ClipActionBar.js.map

package/dist/presentation/ClipActionBar.js.map

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

package/dist/presentation/ClipCaptureOverlay.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Over a page while clipping: drag a rectangle and it becomes a clip. The rectangle is kept as
+ * fractions of the page (`toNorm`), so it does not depend on the zoom it was drawn at.
+ */
+import type { Rect } from './model';
+export interface ClipCaptureOverlayProps {
+    page: number;
+    onCapture: (capture: {
+        page: number;
+        rect: Rect;
+        aspect: number;
+    }) => void;
+}
+export declare function ClipCaptureOverlay({ page, onCapture }: ClipCaptureOverlayProps): import("react").JSX.Element;

package/dist/presentation/ClipCaptureOverlay.js

@@ -0,0 +1,69 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { toNorm } from "@arbidocs/react/annotations";
+const MIN_CLIP_FRACTION = 0.02;
+function ClipCaptureOverlay({ page, onCapture }) {
+  const start = useRef(null);
+  const [draft, setDraft] = useState(null);
+  const point = (event, box) => ({
+    x: event.clientX - box.left,
+    y: event.clientY - box.top
+  });
+  const onPointerDown = (event) => {
+    if (event.button !== 0) return;
+    event.preventDefault();
+    event.currentTarget.setPointerCapture(event.pointerId);
+    const box = event.currentTarget.getBoundingClientRect();
+    start.current = { ...point(event, box), box };
+    setDraft(null);
+  };
+  const onPointerMove = (event) => {
+    const s = start.current;
+    if (!s) return;
+    const p = point(event, s.box);
+    setDraft({ x: s.x, y: s.y, width: p.x - s.x, height: p.y - s.y });
+  };
+  const onPointerUp = (event) => {
+    const s = start.current;
+    start.current = null;
+    setDraft(null);
+    if (!s) return;
+    const p = point(event, s.box);
+    const size = { width: s.box.width, height: s.box.height };
+    const rect = toNorm({ x: s.x, y: s.y, width: p.x - s.x, height: p.y - s.y }, size);
+    if (rect.w < MIN_CLIP_FRACTION || rect.h < MIN_CLIP_FRACTION) return;
+    onCapture({ page, rect, aspect: rect.w * size.width / (rect.h * size.height) });
+  };
+  const shown = draft && {
+    left: Math.min(draft.x, draft.x + draft.width),
+    top: Math.min(draft.y, draft.y + draft.height),
+    width: Math.abs(draft.width),
+    height: Math.abs(draft.height)
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "absolute inset-0 z-20 cursor-crosshair touch-none select-none",
+      onPointerDown,
+      onPointerMove,
+      onPointerUp,
+      onPointerCancel: () => {
+        start.current = null;
+        setDraft(null);
+      },
+      "data-testid": `clip-capture-${page}`,
+      children: shown && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "pointer-events-none absolute border-2 border-dashed border-primary bg-primary/10",
+          style: shown
+        }
+      )
+    }
+  );
+}
+export {
+  ClipCaptureOverlay
+};
+//# sourceMappingURL=ClipCaptureOverlay.js.map

package/dist/presentation/ClipCaptureOverlay.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/presentation/ClipCaptureOverlay.tsx"],
+  "sourcesContent": ["/**\n * Over a page while clipping: drag a rectangle and it becomes a clip. The rectangle is kept as\n * fractions of the page (`toNorm`), so it does not depend on the zoom it was drawn at.\n */\n\nimport { useRef, useState, type PointerEvent as ReactPointerEvent } from 'react'\nimport { toNorm, type PixelRect } from '@arbidocs/react/annotations'\nimport type { Rect } from './model'\n\n/** Smaller than this (a fraction of the page, either side) is a stray click, not a clip. */\nconst MIN_CLIP_FRACTION = 0.02\n\nexport interface ClipCaptureOverlayProps {\n  page: number\n  onCapture: (capture: { page: number; rect: Rect; aspect: number }) => void\n}\n\nexport function ClipCaptureOverlay({ page, onCapture }: ClipCaptureOverlayProps) {\n  const start = useRef<{ x: number; y: number; box: DOMRect } | null>(null)\n  const [draft, setDraft] = useState<PixelRect | null>(null)\n\n  const point = (event: ReactPointerEvent, box: DOMRect) => ({\n    x: event.clientX - box.left,\n    y: event.clientY - box.top,\n  })\n\n  const onPointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {\n    if (event.button !== 0) return\n    event.preventDefault()\n    event.currentTarget.setPointerCapture(event.pointerId)\n    const box = event.currentTarget.getBoundingClientRect()\n    start.current = { ...point(event, box), box }\n    setDraft(null)\n  }\n\n  const onPointerMove = (event: ReactPointerEvent) => {\n    const s = start.current\n    if (!s) return\n    const p = point(event, s.box)\n    setDraft({ x: s.x, y: s.y, width: p.x - s.x, height: p.y - s.y })\n  }\n\n  const onPointerUp = (event: ReactPointerEvent) => {\n    const s = start.current\n    start.current = null\n    setDraft(null)\n    if (!s) return\n    const p = point(event, s.box)\n    const size = { width: s.box.width, height: s.box.height }\n    const rect = toNorm({ x: s.x, y: s.y, width: p.x - s.x, height: p.y - s.y }, size)\n    if (rect.w < MIN_CLIP_FRACTION || rect.h < MIN_CLIP_FRACTION) return\n    onCapture({ page, rect, aspect: (rect.w * size.width) / (rect.h * size.height) })\n  }\n\n  const shown = draft && {\n    left: Math.min(draft.x, draft.x + draft.width),\n    top: Math.min(draft.y, draft.y + draft.height),\n    width: Math.abs(draft.width),\n    height: Math.abs(draft.height),\n  }\n\n  return (\n    <div\n      className=\"absolute inset-0 z-20 cursor-crosshair touch-none select-none\"\n      onPointerDown={onPointerDown}\n      onPointerMove={onPointerMove}\n      onPointerUp={onPointerUp}\n      onPointerCancel={() => {\n        start.current = null\n        setDraft(null)\n      }}\n      data-testid={`clip-capture-${page}`}\n    >\n      {shown && (\n        <div\n          className=\"pointer-events-none absolute border-2 border-dashed border-primary bg-primary/10\"\n          style={shown}\n        />\n      )}\n    </div>\n  )\n}\n"],
+  "mappings": ";AA0EQ;AArER,SAAS,QAAQ,gBAAwD;AACzE,SAAS,cAA8B;AAIvC,MAAM,oBAAoB;AAOnB,SAAS,mBAAmB,EAAE,MAAM,UAAU,GAA4B;AAC/E,QAAM,QAAQ,OAAsD,IAAI;AACxE,QAAM,CAAC,OAAO,QAAQ,IAAI,SAA2B,IAAI;AAEzD,QAAM,QAAQ,CAAC,OAA0B,SAAkB;AAAA,IACzD,GAAG,MAAM,UAAU,IAAI;AAAA,IACvB,GAAG,MAAM,UAAU,IAAI;AAAA,EACzB;AAEA,QAAM,gBAAgB,CAAC,UAA6C;AAClE,QAAI,MAAM,WAAW,EAAG;AACxB,UAAM,eAAe;AACrB,UAAM,cAAc,kBAAkB,MAAM,SAAS;AACrD,UAAM,MAAM,MAAM,cAAc,sBAAsB;AACtD,UAAM,UAAU,EAAE,GAAG,MAAM,OAAO,GAAG,GAAG,IAAI;AAC5C,aAAS,IAAI;AAAA,EACf;AAEA,QAAM,gBAAgB,CAAC,UAA6B;AAClD,UAAM,IAAI,MAAM;AAChB,QAAI,CAAC,EAAG;AACR,UAAM,IAAI,MAAM,OAAO,EAAE,GAAG;AAC5B,aAAS,EAAE,GAAG,EAAE,GAAG,GAAG,EAAE,GAAG,OAAO,EAAE,IAAI,EAAE,GAAG,QAAQ,EAAE,IAAI,EAAE,EAAE,CAAC;AAAA,EAClE;AAEA,QAAM,cAAc,CAAC,UAA6B;AAChD,UAAM,IAAI,MAAM;AAChB,UAAM,UAAU;AAChB,aAAS,IAAI;AACb,QAAI,CAAC,EAAG;AACR,UAAM,IAAI,MAAM,OAAO,EAAE,GAAG;AAC5B,UAAM,OAAO,EAAE,OAAO,EAAE,IAAI,OAAO,QAAQ,EAAE,IAAI,OAAO;AACxD,UAAM,OAAO,OAAO,EAAE,GAAG,EAAE,GAAG,GAAG,EAAE,GAAG,OAAO,EAAE,IAAI,EAAE,GAAG,QAAQ,EAAE,IAAI,EAAE,EAAE,GAAG,IAAI;AACjF,QAAI,KAAK,IAAI,qBAAqB,KAAK,IAAI,kBAAmB;AAC9D,cAAU,EAAE,MAAM,MAAM,QAAS,KAAK,IAAI,KAAK,SAAU,KAAK,IAAI,KAAK,QAAQ,CAAC;AAAA,EAClF;AAEA,QAAM,QAAQ,SAAS;AAAA,IACrB,MAAM,KAAK,IAAI,MAAM,GAAG,MAAM,IAAI,MAAM,KAAK;AAAA,IAC7C,KAAK,KAAK,IAAI,MAAM,GAAG,MAAM,IAAI,MAAM,MAAM;AAAA,IAC7C,OAAO,KAAK,IAAI,MAAM,KAAK;AAAA,IAC3B,QAAQ,KAAK,IAAI,MAAM,MAAM;AAAA,EAC/B;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA,iBAAiB,MAAM;AACrB,cAAM,UAAU;AAChB,iBAAS,IAAI;AAAA,MACf;AAAA,MACA,eAAa,gBAAgB,IAAI;AAAA,MAEhC,mBACC;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO;AAAA;AAAA,MACT;AAAA;AAAA,EAEJ;AAEJ;",
+  "names": []
+}

package/dist/presentation/ClipImage.d.ts

@@ -0,0 +1,21 @@
+/**
+ * A clip as shown on a slide or in the tray.
+ *
+ * A PDF clip is drawn into a canvas the size of its box in device pixels (measured in whichever
+ * window it is in), from a bitmap of its region rendered for that size: as sharp as the screen
+ * allows. The canvas remembers what area its bitmap covers, so when the clip is scrolled or
+ * resized it is redrawn at once from the bitmap it has (shifted or scaled: cheap), and the sharp
+ * rendering follows once the change settles. An older render still running is cancelled; renders
+ * across clips are queued a few at a time (`renderPdfRegion`), so the page stays smooth.
+ *
+ * An image or video clip is its own file, cropped (`MediaClip`).
+ */
+import type { Clip } from './model';
+export interface ClipImageProps {
+    clip: Clip;
+    className?: string;
+    /** On the presented stage: a video clip plays with its sound (the editor's copy is muted). */
+    live?: boolean;
+}
+/** An image or video clip is its own file, cropped; a PDF clip is drawn for its size. */
+export declare const ClipImage: import("react").NamedExoticComponent<ClipImageProps>;