@arbidocs/blocks 0.5.121 → 0.5.122

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/PresentControls.d.ts

@@ -0,0 +1,11 @@
+/**
+ * The presented slides' controls, bottom left: previous and next slide (with where you are),
+ * blank, full screen and stop. Like a slideshow's, they show while the pointer moves (or a key is
+ * pressed) and fade after a moment, with the pointer, so a shared screen rarely shows them.
+ */
+export interface PresentControlsProps {
+    /** The window presented in (full screen is that window's). */
+    view: Window | null;
+    shown: boolean;
+}
+export declare function PresentControls({ view, shown }: PresentControlsProps): import("react").JSX.Element;

package/dist/presentation/PresentControls.js

@@ -0,0 +1,117 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight, EyeOff, Maximize, Square } from "lucide-react";
+import { cn } from "@arbidocs/react/ui";
+import { usePresentation } from "./store.js";
+import { toggleFullscreen } from "./usePresenterKeys.js";
+const CONTROL = "inline-flex size-8 items-center justify-center rounded-full text-white/85 hover:bg-white/15 hover:text-white disabled:opacity-30 disabled:hover:bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60 pointer-coarse:size-11";
+function Control({
+  label,
+  onClick,
+  disabled,
+  children,
+  testId
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: CONTROL,
+      title: label,
+      "aria-label": label,
+      disabled,
+      onClick: (event) => {
+        event.stopPropagation();
+        onClick();
+      },
+      "data-testid": testId,
+      children
+    }
+  );
+}
+function PresentControls({ view, shown }) {
+  const current = usePresentation((s) => s.current);
+  const count = usePresentation((s) => s.slides.length);
+  const blank = usePresentation((s) => s.blank);
+  const actions = usePresentation.getState();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "absolute bottom-4 left-4 z-30 flex items-center gap-0.5 rounded-full bg-black/60 p-1 text-white shadow-lg backdrop-blur transition-opacity duration-300",
+        shown ? "opacity-100" : "pointer-events-none opacity-0"
+      ),
+      onPointerDown: (event) => event.stopPropagation(),
+      onDoubleClick: (event) => event.stopPropagation(),
+      role: "toolbar",
+      "aria-label": "Slideshow",
+      "data-testid": "present-controls",
+      children: [
+        /* @__PURE__ */ jsx(
+          Control,
+          {
+            label: "Previous slide (\u2190)",
+            onClick: () => actions.goTo(current - 1),
+            disabled: current === 0,
+            testId: "present-previous",
+            children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: "min-w-12 text-center text-xs tabular-nums text-white/85",
+            "data-testid": "present-position",
+            children: [
+              current + 1,
+              " / ",
+              count
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Control,
+          {
+            label: "Next slide (\u2192, or click the slide)",
+            onClick: () => actions.goTo(current + 1),
+            disabled: current >= count - 1,
+            testId: "present-next",
+            children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "mx-1 h-4 w-px bg-white/25" }),
+        /* @__PURE__ */ jsx(
+          Control,
+          {
+            label: blank ? "Show the slide (B)" : "Blank the screen (B)",
+            onClick: () => actions.setBlank(!blank),
+            testId: "present-blank",
+            children: /* @__PURE__ */ jsx(EyeOff, { className: cn("size-4", blank && "text-amber-300") })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Control,
+          {
+            label: "Full screen (F)",
+            onClick: () => view && toggleFullscreen(view),
+            testId: "present-fullscreen",
+            children: /* @__PURE__ */ jsx(Maximize, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Control,
+          {
+            label: "Stop presenting (Esc)",
+            onClick: () => actions.setPresenting(false),
+            testId: "present-stop",
+            children: /* @__PURE__ */ jsx(Square, { className: "size-3.5 fill-current" })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  PresentControls
+};
+//# sourceMappingURL=PresentControls.js.map

package/dist/presentation/PresentControls.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/presentation/PresentControls.tsx"],
+  "sourcesContent": ["/**\n * The presented slides' controls, bottom left: previous and next slide (with where you are),\n * blank, full screen and stop. Like a slideshow's, they show while the pointer moves (or a key is\n * pressed) and fade after a moment, with the pointer, so a shared screen rarely shows them.\n */\n\nimport type { ReactNode } from 'react'\nimport { ChevronLeft, ChevronRight, EyeOff, Maximize, Square } from 'lucide-react'\nimport { cn } from '@arbidocs/react/ui'\nimport { usePresentation } from './store'\nimport { toggleFullscreen } from './usePresenterKeys'\n\nconst CONTROL =\n  'inline-flex size-8 items-center justify-center rounded-full text-white/85 hover:bg-white/15 hover:text-white disabled:opacity-30 disabled:hover:bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60 pointer-coarse:size-11'\n\nfunction Control({\n  label,\n  onClick,\n  disabled,\n  children,\n  testId,\n}: {\n  label: string\n  onClick: () => void\n  disabled?: boolean\n  children: ReactNode\n  testId: string\n}) {\n  return (\n    <button\n      type=\"button\"\n      className={CONTROL}\n      title={label}\n      aria-label={label}\n      disabled={disabled}\n      onClick={(event) => {\n        // A click on the controls is not a click on the slide (which goes to the next one).\n        event.stopPropagation()\n        onClick()\n      }}\n      data-testid={testId}\n    >\n      {children}\n    </button>\n  )\n}\n\nexport interface PresentControlsProps {\n  /** The window presented in (full screen is that window's). */\n  view: Window | null\n  shown: boolean\n}\n\nexport function PresentControls({ view, shown }: PresentControlsProps) {\n  const current = usePresentation((s) => s.current)\n  const count = usePresentation((s) => s.slides.length)\n  const blank = usePresentation((s) => s.blank)\n  const actions = usePresentation.getState()\n  return (\n    <div\n      className={cn(\n        'absolute bottom-4 left-4 z-30 flex items-center gap-0.5 rounded-full bg-black/60 p-1 text-white shadow-lg backdrop-blur transition-opacity duration-300',\n        shown ? 'opacity-100' : 'pointer-events-none opacity-0'\n      )}\n      onPointerDown={(event) => event.stopPropagation()}\n      onDoubleClick={(event) => event.stopPropagation()}\n      role=\"toolbar\"\n      aria-label=\"Slideshow\"\n      data-testid=\"present-controls\"\n    >\n      <Control\n        label=\"Previous slide (\u2190)\"\n        onClick={() => actions.goTo(current - 1)}\n        disabled={current === 0}\n        testId=\"present-previous\"\n      >\n        <ChevronLeft className=\"size-4\" />\n      </Control>\n      <span\n        className=\"min-w-12 text-center text-xs tabular-nums text-white/85\"\n        data-testid=\"present-position\"\n      >\n        {current + 1} / {count}\n      </span>\n      <Control\n        label=\"Next slide (\u2192, or click the slide)\"\n        onClick={() => actions.goTo(current + 1)}\n        disabled={current >= count - 1}\n        testId=\"present-next\"\n      >\n        <ChevronRight className=\"size-4\" />\n      </Control>\n      <div className=\"mx-1 h-4 w-px bg-white/25\" />\n      <Control\n        label={blank ? 'Show the slide (B)' : 'Blank the screen (B)'}\n        onClick={() => actions.setBlank(!blank)}\n        testId=\"present-blank\"\n      >\n        <EyeOff className={cn('size-4', blank && 'text-amber-300')} />\n      </Control>\n      <Control\n        label=\"Full screen (F)\"\n        onClick={() => view && toggleFullscreen(view)}\n        testId=\"present-fullscreen\"\n      >\n        <Maximize className=\"size-4\" />\n      </Control>\n      <Control\n        label=\"Stop presenting (Esc)\"\n        onClick={() => actions.setPresenting(false)}\n        testId=\"present-stop\"\n      >\n        <Square className=\"size-3.5 fill-current\" />\n      </Control>\n    </div>\n  )\n}\n"],
+  "mappings": ";AA6BI,cAiDE,YAjDF;AAtBJ,SAAS,aAAa,cAAc,QAAQ,UAAU,cAAc;AACpE,SAAS,UAAU;AACnB,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AAEjC,MAAM,UACJ;AAEF,SAAS,QAAQ;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW;AAAA,MACX,OAAO;AAAA,MACP,cAAY;AAAA,MACZ;AAAA,MACA,SAAS,CAAC,UAAU;AAElB,cAAM,gBAAgB;AACtB,gBAAQ;AAAA,MACV;AAAA,MACA,eAAa;AAAA,MAEZ;AAAA;AAAA,EACH;AAEJ;AAQO,SAAS,gBAAgB,EAAE,MAAM,MAAM,GAAyB;AACrE,QAAM,UAAU,gBAAgB,CAAC,MAAM,EAAE,OAAO;AAChD,QAAM,QAAQ,gBAAgB,CAAC,MAAM,EAAE,OAAO,MAAM;AACpD,QAAM,QAAQ,gBAAgB,CAAC,MAAM,EAAE,KAAK;AAC5C,QAAM,UAAU,gBAAgB,SAAS;AACzC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,QAAQ,gBAAgB;AAAA,MAC1B;AAAA,MACA,eAAe,CAAC,UAAU,MAAM,gBAAgB;AAAA,MAChD,eAAe,CAAC,UAAU,MAAM,gBAAgB;AAAA,MAChD,MAAK;AAAA,MACL,cAAW;AAAA,MACX,eAAY;AAAA,MAEZ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAM;AAAA,YACN,SAAS,MAAM,QAAQ,KAAK,UAAU,CAAC;AAAA,YACvC,UAAU,YAAY;AAAA,YACtB,QAAO;AAAA,YAEP,8BAAC,eAAY,WAAU,UAAS;AAAA;AAAA,QAClC;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,eAAY;AAAA,YAEX;AAAA,wBAAU;AAAA,cAAE;AAAA,cAAI;AAAA;AAAA;AAAA,QACnB;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,OAAM;AAAA,YACN,SAAS,MAAM,QAAQ,KAAK,UAAU,CAAC;AAAA,YACvC,UAAU,WAAW,QAAQ;AAAA,YAC7B,QAAO;AAAA,YAEP,8BAAC,gBAAa,WAAU,UAAS;AAAA;AAAA,QACnC;AAAA,QACA,oBAAC,SAAI,WAAU,6BAA4B;AAAA,QAC3C;AAAA,UAAC;AAAA;AAAA,YACC,OAAO,QAAQ,uBAAuB;AAAA,YACtC,SAAS,MAAM,QAAQ,SAAS,CAAC,KAAK;AAAA,YACtC,QAAO;AAAA,YAEP,8BAAC,UAAO,WAAW,GAAG,UAAU,SAAS,gBAAgB,GAAG;AAAA;AAAA,QAC9D;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,OAAM;AAAA,YACN,SAAS,MAAM,QAAQ,iBAAiB,IAAI;AAAA,YAC5C,QAAO;AAAA,YAEP,8BAAC,YAAS,WAAU,UAAS;AAAA;AAAA,QAC/B;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,OAAM;AAAA,YACN,SAAS,MAAM,QAAQ,cAAc,KAAK;AAAA,YAC1C,QAAO;AAAA,YAEP,8BAAC,UAAO,WAAU,yBAAwB;AAAA;AAAA,QAC5C;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "names": []
+}

package/dist/presentation/PresenterView.js

@@ -1,11 +1,12 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useState } from "react";
 import { PresentationStage } from "./PresentationStage.js";
 import { SlidesEditor } from "./SlidesEditor.js";
 import { STAGE_ASPECT } from "./model.js";
 import { usePresentation } from "./store.js";
 import { toggleFullscreen, usePresenterKeys } from "./usePresenterKeys.js";
+import { PresentControls } from "./PresentControls.js";
 const PRESENT_WIDTH = 1280;
 function useStageShapedWindow(view, presenting) {
   useEffect(() => {
@@ -34,6 +35,28 @@ function useStageShapedWindow(view, presenting) {
     };
   }, [view, presenting]);
 }
+const IDLE_MS = 2200;
+function usePointerActive(view) {
+  const [active, setActive] = useState(true);
+  useEffect(() => {
+    if (!view) return;
+    setActive(true);
+    let timer = view.setTimeout(() => setActive(false), IDLE_MS);
+    const wake = () => {
+      setActive(true);
+      view.clearTimeout(timer);
+      timer = view.setTimeout(() => setActive(false), IDLE_MS);
+    };
+    view.addEventListener("pointermove", wake);
+    view.addEventListener("keydown", wake);
+    return () => {
+      view.clearTimeout(timer);
+      view.removeEventListener("pointermove", wake);
+      view.removeEventListener("keydown", wake);
+    };
+  }, [view]);
+  return active;
+}
 function PresenterView({ onPresent, ...editor }) {
   const presenting = usePresentation((s) => s.presenting);
   const [view, setView] = useState(null);
@@ -42,16 +65,24 @@ function PresenterView({ onPresent, ...editor }) {
   }, []);
   usePresenterKeys(presenting ? view : null, true);
   useStageShapedWindow(view, presenting);
+  const active = usePointerActive(presenting ? view : null);
   if (presenting) {
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsxs(
       "div",
       {
         ref: rootRef,
-        className: "h-full w-full select-none bg-black",
-        style: { cursor: "none" },
+        className: "relative h-full w-full select-none bg-black",
+        style: { cursor: active ? "default" : "none" },
+        onClick: () => {
+          const state = usePresentation.getState();
+          state.goTo(state.current + 1);
+        },
         onDoubleClick: () => view && toggleFullscreen(view),
         "data-testid": "presentation-present",
-        children: /* @__PURE__ */ jsx(PresentationStage, {})
+        children: [
+          /* @__PURE__ */ jsx(PresentationStage, {}),
+          /* @__PURE__ */ jsx(PresentControls, { view, shown: active })
+        ]
       }
     );
   }

package/dist/presentation/PresenterView.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/presentation/PresenterView.tsx"],
-  "sourcesContent": ["/**\n * The presentation in a window of its own, in one of two modes.\n *\n * Present: nothing but the stage on black, no controls and no pointer: what is shared in a call or\n * shown on a projector. Keys drive it (arrows / Page Up / Page Down change slide, B blanks, F or\n * double-click toggles full screen, Space plays videos, Escape stops presenting).\n *\n * Edit: the slides editor (`SlidesEditor`), the same as in the viewer's tab, when the presentation\n * is edited in its own window (beside the document its clips come from).\n */\n\nimport { useCallback, useEffect, useState } from 'react'\nimport { PresentationStage } from './PresentationStage'\nimport { SlidesEditor, type SlidesEditorProps } from './SlidesEditor'\nimport { STAGE_ASPECT } from './model'\nimport { usePresentation } from './store'\nimport { toggleFullscreen, usePresenterKeys } from './usePresenterKeys'\n\n/** The presenting window's page width, at most (smaller on a small screen). */\nconst PRESENT_WIDTH = 1280\n\n/**\n * While presenting in a pop-out, its page is made 16:9 and wide enough to share sharply, so a\n * shared window is all stage with no bars; editing again gives the window back its size. Only a\n * pop-out (a window this app opened) can be resized; the app's own window is left alone.\n */\nfunction useStageShapedWindow(view: Window | null, presenting: boolean) {\n  useEffect(() => {\n    if (!view || !presenting || !view.opener) return\n    const before = { width: view.outerWidth, height: view.outerHeight }\n    const chromeWidth = view.outerWidth - view.innerWidth\n    const chromeHeight = view.outerHeight - view.innerHeight\n    // Wide enough for a sharp share (a call receives about what the window shows), and 16:9.\n    const width = Math.max(\n      view.innerWidth,\n      Math.min(PRESENT_WIDTH, Math.round((view.screen.availWidth - chromeWidth) * 0.6))\n    )\n    const height = Math.min(\n      Math.round(width / STAGE_ASPECT),\n      view.screen.availHeight - chromeHeight\n    )\n    try {\n      view.resizeTo(Math.round(height * STAGE_ASPECT) + chromeWidth, height + chromeHeight)\n    } catch {\n      return // not resizable: the stage letterboxes in black\n    }\n    return () => {\n      try {\n        if (!view.closed) view.resizeTo(before.width, before.height)\n      } catch {\n        // gone or not resizable\n      }\n    }\n  }, [view, presenting])\n}\n\nexport type PresenterViewProps = Omit<SlidesEditorProps, 'onPresent'> & {\n  /** Present (default: here, in this window). */\n  onPresent?: () => void\n}\n\nexport function PresenterView({ onPresent, ...editor }: PresenterViewProps) {\n  const presenting = usePresentation((s) => s.presenting)\n  const [view, setView] = useState<Window | null>(null)\n  // The keys work in whichever window the presenter is in.\n  const rootRef = useCallback((node: HTMLDivElement | null) => {\n    if (node) setView(node.ownerDocument.defaultView)\n  }, [])\n  usePresenterKeys(presenting ? view : null, true)\n  useStageShapedWindow(view, presenting)\n\n  if (presenting) {\n    return (\n      <div\n        ref={rootRef}\n        className=\"h-full w-full select-none bg-black\"\n        style={{ cursor: 'none' }}\n        onDoubleClick={() => view && toggleFullscreen(view)}\n        data-testid=\"presentation-present\"\n      >\n        <PresentationStage />\n      </div>\n    )\n  }\n  return (\n    <div ref={rootRef} className=\"h-full min-h-0\" data-testid=\"presenter-view\">\n      <SlidesEditor\n        {...editor}\n        onPresent={onPresent ?? (() => usePresentation.getState().setPresenting(true))}\n      />\n    </div>\n  )\n}\n"],
-  "mappings": ";AAgFQ;AArER,SAAS,aAAa,WAAW,gBAAgB;AACjD,SAAS,yBAAyB;AAClC,SAAS,oBAA4C;AACrD,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,kBAAkB,wBAAwB;AAGnD,MAAM,gBAAgB;AAOtB,SAAS,qBAAqB,MAAqB,YAAqB;AACtE,YAAU,MAAM;AACd,QAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,KAAK,OAAQ;AAC1C,UAAM,SAAS,EAAE,OAAO,KAAK,YAAY,QAAQ,KAAK,YAAY;AAClE,UAAM,cAAc,KAAK,aAAa,KAAK;AAC3C,UAAM,eAAe,KAAK,cAAc,KAAK;AAE7C,UAAM,QAAQ,KAAK;AAAA,MACjB,KAAK;AAAA,MACL,KAAK,IAAI,eAAe,KAAK,OAAO,KAAK,OAAO,aAAa,eAAe,GAAG,CAAC;AAAA,IAClF;AACA,UAAM,SAAS,KAAK;AAAA,MAClB,KAAK,MAAM,QAAQ,YAAY;AAAA,MAC/B,KAAK,OAAO,cAAc;AAAA,IAC5B;AACA,QAAI;AACF,WAAK,SAAS,KAAK,MAAM,SAAS,YAAY,IAAI,aAAa,SAAS,YAAY;AAAA,IACtF,QAAQ;AACN;AAAA,IACF;AACA,WAAO,MAAM;AACX,UAAI;AACF,YAAI,CAAC,KAAK,OAAQ,MAAK,SAAS,OAAO,OAAO,OAAO,MAAM;AAAA,MAC7D,QAAQ;AAAA,MAER;AAAA,IACF;AAAA,EACF,GAAG,CAAC,MAAM,UAAU,CAAC;AACvB;AAOO,SAAS,cAAc,EAAE,WAAW,GAAG,OAAO,GAAuB;AAC1E,QAAM,aAAa,gBAAgB,CAAC,MAAM,EAAE,UAAU;AACtD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAwB,IAAI;AAEpD,QAAM,UAAU,YAAY,CAAC,SAAgC;AAC3D,QAAI,KAAM,SAAQ,KAAK,cAAc,WAAW;AAAA,EAClD,GAAG,CAAC,CAAC;AACL,mBAAiB,aAAa,OAAO,MAAM,IAAI;AAC/C,uBAAqB,MAAM,UAAU;AAErC,MAAI,YAAY;AACd,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAU;AAAA,QACV,OAAO,EAAE,QAAQ,OAAO;AAAA,QACxB,eAAe,MAAM,QAAQ,iBAAiB,IAAI;AAAA,QAClD,eAAY;AAAA,QAEZ,8BAAC,qBAAkB;AAAA;AAAA,IACrB;AAAA,EAEJ;AACA,SACE,oBAAC,SAAI,KAAK,SAAS,WAAU,kBAAiB,eAAY,kBACxD;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,cAAc,MAAM,gBAAgB,SAAS,EAAE,cAAc,IAAI;AAAA;AAAA,EAC9E,GACF;AAEJ;",
+  "sourcesContent": ["/**\n * The presentation in a window of its own, in one of two modes.\n *\n * Present: nothing but the stage on black, no controls and no pointer: what is shared in a call or\n * shown on a projector. Keys drive it (arrows / Page Up / Page Down change slide, B blanks, F or\n * double-click toggles full screen, Space plays videos, Escape stops presenting).\n *\n * Edit: the slides editor (`SlidesEditor`), the same as in the viewer's tab, when the presentation\n * is edited in its own window (beside the document its clips come from).\n */\n\nimport { useCallback, useEffect, useState } from 'react'\nimport { PresentationStage } from './PresentationStage'\nimport { SlidesEditor, type SlidesEditorProps } from './SlidesEditor'\nimport { STAGE_ASPECT } from './model'\nimport { usePresentation } from './store'\nimport { toggleFullscreen, usePresenterKeys } from './usePresenterKeys'\nimport { PresentControls } from './PresentControls'\n\n/** The presenting window's page width, at most (smaller on a small screen). */\nconst PRESENT_WIDTH = 1280\n\n/**\n * While presenting in a pop-out, its page is made 16:9 and wide enough to share sharply, so a\n * shared window is all stage with no bars; editing again gives the window back its size. Only a\n * pop-out (a window this app opened) can be resized; the app's own window is left alone.\n */\nfunction useStageShapedWindow(view: Window | null, presenting: boolean) {\n  useEffect(() => {\n    if (!view || !presenting || !view.opener) return\n    const before = { width: view.outerWidth, height: view.outerHeight }\n    const chromeWidth = view.outerWidth - view.innerWidth\n    const chromeHeight = view.outerHeight - view.innerHeight\n    // Wide enough for a sharp share (a call receives about what the window shows), and 16:9.\n    const width = Math.max(\n      view.innerWidth,\n      Math.min(PRESENT_WIDTH, Math.round((view.screen.availWidth - chromeWidth) * 0.6))\n    )\n    const height = Math.min(\n      Math.round(width / STAGE_ASPECT),\n      view.screen.availHeight - chromeHeight\n    )\n    try {\n      view.resizeTo(Math.round(height * STAGE_ASPECT) + chromeWidth, height + chromeHeight)\n    } catch {\n      return // not resizable: the stage letterboxes in black\n    }\n    return () => {\n      try {\n        if (!view.closed) view.resizeTo(before.width, before.height)\n      } catch {\n        // gone or not resizable\n      }\n    }\n  }, [view, presenting])\n}\n\n/** How long the pointer (or a key) has to rest before the controls fade. */\nconst IDLE_MS = 2200\n\n/** The pointer has moved (or a key was pressed) in `view` within the last moment. */\nfunction usePointerActive(view: Window | null): boolean {\n  const [active, setActive] = useState(true)\n  useEffect(() => {\n    if (!view) return\n    setActive(true)\n    let timer = view.setTimeout(() => setActive(false), IDLE_MS)\n    const wake = () => {\n      setActive(true)\n      view.clearTimeout(timer)\n      timer = view.setTimeout(() => setActive(false), IDLE_MS)\n    }\n    view.addEventListener('pointermove', wake)\n    view.addEventListener('keydown', wake)\n    return () => {\n      view.clearTimeout(timer)\n      view.removeEventListener('pointermove', wake)\n      view.removeEventListener('keydown', wake)\n    }\n  }, [view])\n  return active\n}\n\nexport type PresenterViewProps = Omit<SlidesEditorProps, 'onPresent'> & {\n  /** Present (default: here, in this window). */\n  onPresent?: () => void\n}\n\nexport function PresenterView({ onPresent, ...editor }: PresenterViewProps) {\n  const presenting = usePresentation((s) => s.presenting)\n  const [view, setView] = useState<Window | null>(null)\n  // The keys work in whichever window the presenter is in.\n  const rootRef = useCallback((node: HTMLDivElement | null) => {\n    if (node) setView(node.ownerDocument.defaultView)\n  }, [])\n  usePresenterKeys(presenting ? view : null, true)\n  useStageShapedWindow(view, presenting)\n\n  const active = usePointerActive(presenting ? view : null)\n\n  if (presenting) {\n    return (\n      <div\n        ref={rootRef}\n        className=\"relative h-full w-full select-none bg-black\"\n        // The pointer shows while it moves, with the controls; idle, nothing but the slide.\n        style={{ cursor: active ? 'default' : 'none' }}\n        // A click on the slide goes to the next one, as in a slideshow.\n        onClick={() => {\n          const state = usePresentation.getState()\n          state.goTo(state.current + 1)\n        }}\n        onDoubleClick={() => view && toggleFullscreen(view)}\n        data-testid=\"presentation-present\"\n      >\n        <PresentationStage />\n        <PresentControls view={view} shown={active} />\n      </div>\n    )\n  }\n  return (\n    <div ref={rootRef} className=\"h-full min-h-0\" data-testid=\"presenter-view\">\n      <SlidesEditor\n        {...editor}\n        onPresent={onPresent ?? (() => usePresentation.getState().setPresenting(true))}\n      />\n    </div>\n  )\n}\n"],
+  "mappings": ";AAsGM,SAaE,KAbF;AA3FN,SAAS,aAAa,WAAW,gBAAgB;AACjD,SAAS,yBAAyB;AAClC,SAAS,oBAA4C;AACrD,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,kBAAkB,wBAAwB;AACnD,SAAS,uBAAuB;AAGhC,MAAM,gBAAgB;AAOtB,SAAS,qBAAqB,MAAqB,YAAqB;AACtE,YAAU,MAAM;AACd,QAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,KAAK,OAAQ;AAC1C,UAAM,SAAS,EAAE,OAAO,KAAK,YAAY,QAAQ,KAAK,YAAY;AAClE,UAAM,cAAc,KAAK,aAAa,KAAK;AAC3C,UAAM,eAAe,KAAK,cAAc,KAAK;AAE7C,UAAM,QAAQ,KAAK;AAAA,MACjB,KAAK;AAAA,MACL,KAAK,IAAI,eAAe,KAAK,OAAO,KAAK,OAAO,aAAa,eAAe,GAAG,CAAC;AAAA,IAClF;AACA,UAAM,SAAS,KAAK;AAAA,MAClB,KAAK,MAAM,QAAQ,YAAY;AAAA,MAC/B,KAAK,OAAO,cAAc;AAAA,IAC5B;AACA,QAAI;AACF,WAAK,SAAS,KAAK,MAAM,SAAS,YAAY,IAAI,aAAa,SAAS,YAAY;AAAA,IACtF,QAAQ;AACN;AAAA,IACF;AACA,WAAO,MAAM;AACX,UAAI;AACF,YAAI,CAAC,KAAK,OAAQ,MAAK,SAAS,OAAO,OAAO,OAAO,MAAM;AAAA,MAC7D,QAAQ;AAAA,MAER;AAAA,IACF;AAAA,EACF,GAAG,CAAC,MAAM,UAAU,CAAC;AACvB;AAGA,MAAM,UAAU;AAGhB,SAAS,iBAAiB,MAA8B;AACtD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,IAAI;AACzC,YAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,cAAU,IAAI;AACd,QAAI,QAAQ,KAAK,WAAW,MAAM,UAAU,KAAK,GAAG,OAAO;AAC3D,UAAM,OAAO,MAAM;AACjB,gBAAU,IAAI;AACd,WAAK,aAAa,KAAK;AACvB,cAAQ,KAAK,WAAW,MAAM,UAAU,KAAK,GAAG,OAAO;AAAA,IACzD;AACA,SAAK,iBAAiB,eAAe,IAAI;AACzC,SAAK,iBAAiB,WAAW,IAAI;AACrC,WAAO,MAAM;AACX,WAAK,aAAa,KAAK;AACvB,WAAK,oBAAoB,eAAe,IAAI;AAC5C,WAAK,oBAAoB,WAAW,IAAI;AAAA,IAC1C;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AACT,SAAO;AACT;AAOO,SAAS,cAAc,EAAE,WAAW,GAAG,OAAO,GAAuB;AAC1E,QAAM,aAAa,gBAAgB,CAAC,MAAM,EAAE,UAAU;AACtD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAwB,IAAI;AAEpD,QAAM,UAAU,YAAY,CAAC,SAAgC;AAC3D,QAAI,KAAM,SAAQ,KAAK,cAAc,WAAW;AAAA,EAClD,GAAG,CAAC,CAAC;AACL,mBAAiB,aAAa,OAAO,MAAM,IAAI;AAC/C,uBAAqB,MAAM,UAAU;AAErC,QAAM,SAAS,iBAAiB,aAAa,OAAO,IAAI;AAExD,MAAI,YAAY;AACd,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAU;AAAA,QAEV,OAAO,EAAE,QAAQ,SAAS,YAAY,OAAO;AAAA,QAE7C,SAAS,MAAM;AACb,gBAAM,QAAQ,gBAAgB,SAAS;AACvC,gBAAM,KAAK,MAAM,UAAU,CAAC;AAAA,QAC9B;AAAA,QACA,eAAe,MAAM,QAAQ,iBAAiB,IAAI;AAAA,QAClD,eAAY;AAAA,QAEZ;AAAA,8BAAC,qBAAkB;AAAA,UACnB,oBAAC,mBAAgB,MAAY,OAAO,QAAQ;AAAA;AAAA;AAAA,IAC9C;AAAA,EAEJ;AACA,SACE,oBAAC,SAAI,KAAK,SAAS,WAAU,kBAAiB,eAAY,kBACxD;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,cAAc,MAAM,gBAAgB,SAAS,EAAE,cAAc,IAAI;AAAA;AAAA,EAC9E,GACF;AAEJ;",
   "names": []
 }

package/dist/presentation/SlidesEditor.js

@@ -251,6 +251,7 @@ function SlidesEditor({
   const slideIds = useMemo(() => ids.split(" "), [ids]);
   const current = usePresentation((s) => s.current);
   const captions = usePresentation((s) => s.captions);
+  const presenting = usePresentation((s) => s.presenting);
   const [selection, setSelection] = useState(null);
   const [view, setView] = useState(null);
   const list = useRef(null);
@@ -326,7 +327,22 @@ function SlidesEditor({
                   )
                 ] })
               ] }),
-              /* @__PURE__ */ jsxs(
+              presenting ? /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  type: "button",
+                  size: "sm",
+                  variant: "destructive",
+                  className: "ml-0.5 h-8 rounded-full",
+                  onClick: () => usePresentation.getState().setPresenting(false),
+                  title: "Stop presenting (the presentation window closes)",
+                  "data-testid": "presentation-stop-button",
+                  children: [
+                    /* @__PURE__ */ jsx(Square, { className: "size-3 fill-current" }),
+                    "Stop presenting"
+                  ]
+                }
+              ) : /* @__PURE__ */ jsxs(
                 Button,
                 {
                   type: "button",

package/dist/presentation/SlidesEditor.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/presentation/SlidesEditor.tsx"],
-  "sourcesContent": ["/**\n * The presentation editor: its slides one under the other, scrolled like a PDF's pages, each one\n * edited where it is \u2014 clips dragged, resized and reshaped on it, its title and points typed on\n * it. Hovering a slide shows its actions (layout, move up or down, duplicate, delete); between two\n * slides, + inserts one. One small floating bar holds the rest (Design, the host's Save and other\n * actions, Present, \"\u2026\"), so no header takes room from the slides. The clips collected for the\n * presentation wait in the tray along the bottom, to be dragged onto any slide.\n *\n * The same editor shows wherever the host mounts it (the viewer's tab, or its own window).\n */\n\nimport { memo, useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react'\nimport {\n  ArrowDown,\n  ArrowUp,\n  Circle,\n  Copy,\n  Minus,\n  MoreHorizontal,\n  Play,\n  Plus,\n  RectangleHorizontal,\n  Shapes,\n  Square,\n  Trash2,\n  Type,\n} from 'lucide-react'\nimport {\n  Button,\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n  cn,\n} from '@arbidocs/react/ui'\nimport { ClipTray } from './ClipTray'\nimport { DesignMenu } from './DesignMenu'\nimport { LayoutMenu } from './LayoutMenu'\nimport { Notice } from './Notice'\nimport { PresentationStage } from './PresentationStage'\nimport type { SlideTextEditing } from './SlideDecor'\nimport { usePresentation } from './store'\nimport { newBox, type BoxShape } from './boxes'\nimport { accentColor, isLightBackground } from './theme'\nimport { usePresenterKeys } from './usePresenterKeys'\n\nexport interface SlidesEditorProps {\n  /** Present: the host opens the shareable window. */\n  onPresent: () => void\n  /** In the floating bar, before Present (e.g. Save, pop out). */\n  actions?: ReactNode\n  /** At the top of the \"\u2026\" menu (e.g. New from template, Save as, Export). */\n  menuItems?: ReactNode\n  /** First in the clip tray (e.g. Generate image). */\n  trayStart?: ReactNode\n  onChooseLogo?: () => void\n  onEditImage?: (clipId: string) => void\n  onCropImage?: (clipId: string) => void\n}\n\ninterface Selection {\n  index: number\n  clipId: string\n}\n\n/** A small icon button of a slide's hover bar. */\nfunction SlideAction({\n  label,\n  onClick,\n  disabled,\n  children,\n}: {\n  label: string\n  onClick: () => void\n  disabled?: boolean\n  children: ReactNode\n}) {\n  return (\n    <Button\n      type=\"button\"\n      size=\"icon\"\n      variant=\"ghost\"\n      className=\"size-7 text-muted-foreground hover:text-foreground pointer-coarse:size-10\"\n      title={label}\n      aria-label={label}\n      disabled={disabled}\n      onClick={onClick}\n    >\n      {children}\n    </Button>\n  )\n}\n\nconst SlideCard = memo(function SlideCard({\n  index,\n  count,\n  current,\n  selected,\n  onSelect,\n  onEditImage,\n  onCropImage,\n}: {\n  index: number\n  count: number\n  current: boolean\n  selected: string | null\n  onSelect: (index: number, clipId: string | null) => void\n  onEditImage?: (clipId: string) => void\n  onCropImage?: (clipId: string) => void\n}) {\n  const empty = usePresentation((s) => {\n    const slide = s.slides[index]\n    return (\n      !!slide &&\n      !slide.items.length &&\n      !slide.boxes.length &&\n      slide.layout !== 'title' &&\n      slide.layout !== 'section'\n    )\n  })\n  const notes = usePresentation((s) => s.slides[index]?.notes ?? '')\n  const textEditing = useMemo<SlideTextEditing>(\n    () => ({\n      onTitle: (title) => usePresentation.getState().setSlideCaption(title, index),\n      onPoints: (points) => usePresentation.getState().setSlidePoints(points, index),\n    }),\n    [index]\n  )\n  const select = useCallback((clipId: string | null) => onSelect(index, clipId), [onSelect, index])\n  const actions = usePresentation.getState()\n  return (\n    <div className=\"group relative flex gap-2\" data-testid={`slide-${index}`}>\n      {/* The gutter: the slide's number, and its actions on hover (always on a touch screen's\n          current slide), clear of the slide itself. */}\n      <div className=\"flex w-9 shrink-0 flex-col items-center gap-0.5\">\n        <span\n          className={cn(\n            'py-1 text-xs tabular-nums',\n            current ? 'font-semibold text-foreground' : 'text-muted-foreground'\n          )}\n        >\n          {index + 1}\n        </span>\n        <div\n          className={cn(\n            'flex flex-col items-center gap-0.5 transition-opacity',\n            'opacity-0 focus-within:opacity-100 group-hover:opacity-100',\n            current && 'pointer-coarse:opacity-100'\n          )}\n          data-testid={`slide-actions-${index}`}\n        >\n          <LayoutMenu index={index} compact />\n          <SlideAction\n            label=\"Move up\"\n            disabled={index === 0}\n            onClick={() => actions.moveSlide(index, index - 1)}\n          >\n            <ArrowUp className=\"size-3.5\" />\n          </SlideAction>\n          <SlideAction\n            label=\"Move down\"\n            disabled={index === count - 1}\n            onClick={() => actions.moveSlide(index, index + 1)}\n          >\n            <ArrowDown className=\"size-3.5\" />\n          </SlideAction>\n          <SlideAction label=\"Duplicate\" onClick={() => actions.duplicateSlide(index)}>\n            <Copy className=\"size-3.5\" />\n          </SlideAction>\n          <SlideAction label=\"Delete slide\" onClick={() => actions.removeSlide(index)}>\n            <Trash2 className=\"size-3.5\" />\n          </SlideAction>\n        </div>\n      </div>\n      <div\n        className={cn(\n          'relative aspect-video min-w-0 flex-1 rounded-sm',\n          current && 'ring-1 ring-primary/40 ring-offset-4 ring-offset-transparent'\n        )}\n      >\n        <PresentationStage\n          editable\n          slideIndex={index}\n          selected={selected}\n          onSelect={select}\n          onEditImage={onEditImage}\n          onCropImage={onCropImage}\n          textEditing={textEditing}\n          overlay={\n            empty && (\n              <div className=\"pointer-events-none absolute inset-x-0 bottom-[8%] flex justify-center\">\n                <span className=\"rounded-full bg-black/40 px-3 py-1 text-[1.4cqw] text-white/70\">\n                  Drag a clip here from the tray\n                </span>\n              </div>\n            )\n          }\n        />\n        {(notes || current) && (\n          <textarea\n            value={notes}\n            rows={notes.split('\\n').length}\n            placeholder=\"Speaker notes\"\n            onChange={(event) =>\n              usePresentation.getState().setSlideNotes(event.target.value, index)\n            }\n            className=\"mt-2 block w-full resize-none rounded-sm border-0 bg-transparent px-1 py-0.5 text-xs text-muted-foreground placeholder:text-muted-foreground/50 focus:bg-background focus:text-foreground focus:outline-none focus:ring-1 focus:ring-ring\"\n            aria-label={`Speaker notes for slide ${index + 1}`}\n            data-testid={`slide-notes-${index}`}\n          />\n        )}\n      </div>\n    </div>\n  )\n})\n\nconst INSERTS: { shape: BoxShape; label: string; icon: ReactNode }[] = [\n  { shape: 'text', label: 'Text box', icon: <Type className=\"size-4\" /> },\n  { shape: 'rect', label: 'Rectangle', icon: <Square className=\"size-4\" /> },\n  {\n    shape: 'roundRect',\n    label: 'Rounded rectangle',\n    icon: <RectangleHorizontal className=\"size-4\" />,\n  },\n  { shape: 'ellipse', label: 'Ellipse', icon: <Circle className=\"size-4\" /> },\n  { shape: 'line', label: 'Line', icon: <Minus className=\"size-4\" /> },\n]\n\n/** Insert a text box or a shape on the current slide; it is selected, ready to type in. */\nfunction InsertMenu({ onInserted }: { onInserted: (index: number, boxId: string) => void }) {\n  const insert = (shape: BoxShape) => {\n    const state = usePresentation.getState()\n    const slide = state.slides[state.current]\n    const box = newBox(shape, accentColor(state.theme.accent))\n    // On a light slide (an imported deck's), text is dark.\n    const dark = isLightBackground(slide?.background)\n    const { id, ...rest } = dark\n      ? {\n          ...box,\n          paragraphs: box.paragraphs.map((p) => ({\n            ...p,\n            runs: p.runs.map((r) => ({ color: '#1f2328', ...r })),\n          })),\n        }\n      : box\n    void id\n    onInserted(state.current, state.addBox(rest))\n  }\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button\n          type=\"button\"\n          size=\"icon\"\n          variant=\"ghost\"\n          className=\"size-8 text-muted-foreground hover:text-foreground pointer-coarse:size-11\"\n          title=\"Insert a text box or shape\"\n          aria-label=\"Insert\"\n          data-testid=\"slides-insert\"\n        >\n          <Shapes className=\"size-4\" />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\">\n        {INSERTS.map(({ shape, label, icon }) => (\n          <DropdownMenuItem\n            key={shape}\n            onSelect={() => insert(shape)}\n            data-testid={`slides-insert-${shape}`}\n          >\n            {icon}\n            <span className=\"ml-2\">{label}</span>\n          </DropdownMenuItem>\n        ))}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n\n/** Between two slides (and after the last): + inserts a slide there, shown on hover. */\nfunction InsertSlide({ after, always }: { after: number; always?: boolean }) {\n  return (\n    <div className=\"group/insert relative flex h-8 items-center justify-center pl-11\">\n      <button\n        type=\"button\"\n        onClick={() => usePresentation.getState().addSlide(undefined, after)}\n        className={cn(\n          'flex items-center gap-1 rounded-full border border-dashed border-border bg-background px-2.5 py-0.5 text-xs text-muted-foreground transition-opacity hover:border-solid hover:text-foreground focus-visible:opacity-100',\n          !always && 'opacity-0 group-hover/insert:opacity-100 pointer-coarse:opacity-100'\n        )}\n        aria-label={`New slide after slide ${after + 1}`}\n        data-testid={`slide-insert-${after}`}\n      >\n        <Plus className=\"size-3\" />\n        Slide\n      </button>\n    </div>\n  )\n}\n\nexport function SlidesEditor({\n  onPresent,\n  actions,\n  menuItems,\n  trayStart,\n  onChooseLogo,\n  onEditImage,\n  onCropImage,\n}: SlidesEditorProps) {\n  const ids = usePresentation((s) => s.slides.map((slide) => slide.id).join(' '))\n  const slideIds = useMemo(() => ids.split(' '), [ids])\n  const current = usePresentation((s) => s.current)\n  const captions = usePresentation((s) => s.captions)\n  const [selection, setSelection] = useState<Selection | null>(null)\n  const [view, setView] = useState<Window | null>(null)\n  const list = useRef<HTMLDivElement>(null)\n  const rootRef = useCallback((node: HTMLDivElement | null) => {\n    if (node) setView(node.ownerDocument.defaultView)\n  }, [])\n\n  const onSelect = useCallback((index: number, clipId: string | null) => {\n    setSelection(clipId ? { index, clipId } : null)\n  }, [])\n  const keySelection = useMemo(\n    () => ({ clipId: selection?.clipId ?? null, clear: () => setSelection(null) }),\n    [selection]\n  )\n  usePresenterKeys(view, false, keySelection)\n\n  // A slide added, duplicated or moved becomes the current one: brought into view.\n  useEffect(() => {\n    const card = list.current?.querySelector(`[data-testid=\"slide-${current}\"]`)\n    card?.scrollIntoView?.({ block: 'nearest', behavior: 'smooth' })\n  }, [current, slideIds.length])\n\n  return (\n    <div\n      ref={rootRef}\n      className=\"relative flex h-full min-h-0 flex-col bg-muted/30\"\n      data-testid=\"slides-editor\"\n    >\n      <div ref={list} className=\"min-h-0 flex-1 overflow-y-auto\">\n        <div className=\"mx-auto flex max-w-[1100px] flex-col pb-6 pl-2 pr-6 pt-14\">\n          {slideIds.map((id, index) => (\n            <div key={id}>\n              <SlideCard\n                index={index}\n                count={slideIds.length}\n                current={index === current}\n                selected={selection?.index === index ? selection.clipId : null}\n                onSelect={onSelect}\n                onEditImage={onEditImage}\n                onCropImage={onCropImage}\n              />\n              <InsertSlide after={index} always={index === slideIds.length - 1} />\n            </div>\n          ))}\n        </div>\n      </div>\n\n      {/* The rest, in one small floating bar: no header row. */}\n      <div\n        className=\"absolute right-4 top-2.5 z-40 flex items-center gap-0.5 rounded-full border border-border bg-background p-1 shadow-md\"\n        data-testid=\"slides-toolbar\"\n      >\n        <DesignMenu onChooseLogo={onChooseLogo} />\n        <InsertMenu onInserted={(index, boxId) => setSelection({ index, clipId: boxId })} />\n        {actions}\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              type=\"button\"\n              size=\"icon\"\n              variant=\"ghost\"\n              className=\"size-8 text-muted-foreground hover:text-foreground pointer-coarse:size-11\"\n              title=\"More\"\n              aria-label=\"More\"\n            >\n              <MoreHorizontal className=\"size-4\" />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            {menuItems}\n            {menuItems && <DropdownMenuSeparator />}\n            <DropdownMenuCheckboxItem\n              checked={captions}\n              onCheckedChange={(on) => usePresentation.getState().setCaptions(!!on)}\n            >\n              Show source labels\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <Button\n          type=\"button\"\n          size=\"sm\"\n          className=\"ml-0.5 h-8 rounded-full\"\n          onClick={() => {\n            setSelection(null)\n            onPresent()\n          }}\n          title=\"Present: the slides alone, in a window to share or put full screen\"\n          data-testid=\"presentation-present-button\"\n        >\n          <Play className=\"size-3.5\" />\n          Present\n        </Button>\n      </div>\n\n      <ClipTray start={trayStart} />\n      <Notice />\n    </div>\n  )\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * The presentation editor: its slides one under the other, scrolled like a PDF's pages, each one\n * edited where it is \u2014 clips dragged, resized and reshaped on it, its title and points typed on\n * it. Hovering a slide shows its actions (layout, move up or down, duplicate, delete); between two\n * slides, + inserts one. One small floating bar holds the rest (Design, the host's Save and other\n * actions, Present, \"\u2026\"), so no header takes room from the slides. The clips collected for the\n * presentation wait in the tray along the bottom, to be dragged onto any slide.\n *\n * The same editor shows wherever the host mounts it (the viewer's tab, or its own window).\n */\n\nimport { memo, useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react'\nimport {\n  ArrowDown,\n  ArrowUp,\n  Circle,\n  Copy,\n  Minus,\n  MoreHorizontal,\n  Play,\n  Plus,\n  RectangleHorizontal,\n  Shapes,\n  Square,\n  Trash2,\n  Type,\n} from 'lucide-react'\nimport {\n  Button,\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n  cn,\n} from '@arbidocs/react/ui'\nimport { ClipTray } from './ClipTray'\nimport { DesignMenu } from './DesignMenu'\nimport { LayoutMenu } from './LayoutMenu'\nimport { Notice } from './Notice'\nimport { PresentationStage } from './PresentationStage'\nimport type { SlideTextEditing } from './SlideDecor'\nimport { usePresentation } from './store'\nimport { newBox, type BoxShape } from './boxes'\nimport { accentColor, isLightBackground } from './theme'\nimport { usePresenterKeys } from './usePresenterKeys'\n\nexport interface SlidesEditorProps {\n  /** Present: the host opens the shareable window. */\n  onPresent: () => void\n  /** In the floating bar, before Present (e.g. Save, pop out). */\n  actions?: ReactNode\n  /** At the top of the \"\u2026\" menu (e.g. New from template, Save as, Export). */\n  menuItems?: ReactNode\n  /** First in the clip tray (e.g. Generate image). */\n  trayStart?: ReactNode\n  onChooseLogo?: () => void\n  onEditImage?: (clipId: string) => void\n  onCropImage?: (clipId: string) => void\n}\n\ninterface Selection {\n  index: number\n  clipId: string\n}\n\n/** A small icon button of a slide's hover bar. */\nfunction SlideAction({\n  label,\n  onClick,\n  disabled,\n  children,\n}: {\n  label: string\n  onClick: () => void\n  disabled?: boolean\n  children: ReactNode\n}) {\n  return (\n    <Button\n      type=\"button\"\n      size=\"icon\"\n      variant=\"ghost\"\n      className=\"size-7 text-muted-foreground hover:text-foreground pointer-coarse:size-10\"\n      title={label}\n      aria-label={label}\n      disabled={disabled}\n      onClick={onClick}\n    >\n      {children}\n    </Button>\n  )\n}\n\nconst SlideCard = memo(function SlideCard({\n  index,\n  count,\n  current,\n  selected,\n  onSelect,\n  onEditImage,\n  onCropImage,\n}: {\n  index: number\n  count: number\n  current: boolean\n  selected: string | null\n  onSelect: (index: number, clipId: string | null) => void\n  onEditImage?: (clipId: string) => void\n  onCropImage?: (clipId: string) => void\n}) {\n  const empty = usePresentation((s) => {\n    const slide = s.slides[index]\n    return (\n      !!slide &&\n      !slide.items.length &&\n      !slide.boxes.length &&\n      slide.layout !== 'title' &&\n      slide.layout !== 'section'\n    )\n  })\n  const notes = usePresentation((s) => s.slides[index]?.notes ?? '')\n  const textEditing = useMemo<SlideTextEditing>(\n    () => ({\n      onTitle: (title) => usePresentation.getState().setSlideCaption(title, index),\n      onPoints: (points) => usePresentation.getState().setSlidePoints(points, index),\n    }),\n    [index]\n  )\n  const select = useCallback((clipId: string | null) => onSelect(index, clipId), [onSelect, index])\n  const actions = usePresentation.getState()\n  return (\n    <div className=\"group relative flex gap-2\" data-testid={`slide-${index}`}>\n      {/* The gutter: the slide's number, and its actions on hover (always on a touch screen's\n          current slide), clear of the slide itself. */}\n      <div className=\"flex w-9 shrink-0 flex-col items-center gap-0.5\">\n        <span\n          className={cn(\n            'py-1 text-xs tabular-nums',\n            current ? 'font-semibold text-foreground' : 'text-muted-foreground'\n          )}\n        >\n          {index + 1}\n        </span>\n        <div\n          className={cn(\n            'flex flex-col items-center gap-0.5 transition-opacity',\n            'opacity-0 focus-within:opacity-100 group-hover:opacity-100',\n            current && 'pointer-coarse:opacity-100'\n          )}\n          data-testid={`slide-actions-${index}`}\n        >\n          <LayoutMenu index={index} compact />\n          <SlideAction\n            label=\"Move up\"\n            disabled={index === 0}\n            onClick={() => actions.moveSlide(index, index - 1)}\n          >\n            <ArrowUp className=\"size-3.5\" />\n          </SlideAction>\n          <SlideAction\n            label=\"Move down\"\n            disabled={index === count - 1}\n            onClick={() => actions.moveSlide(index, index + 1)}\n          >\n            <ArrowDown className=\"size-3.5\" />\n          </SlideAction>\n          <SlideAction label=\"Duplicate\" onClick={() => actions.duplicateSlide(index)}>\n            <Copy className=\"size-3.5\" />\n          </SlideAction>\n          <SlideAction label=\"Delete slide\" onClick={() => actions.removeSlide(index)}>\n            <Trash2 className=\"size-3.5\" />\n          </SlideAction>\n        </div>\n      </div>\n      <div\n        className={cn(\n          'relative aspect-video min-w-0 flex-1 rounded-sm',\n          current && 'ring-1 ring-primary/40 ring-offset-4 ring-offset-transparent'\n        )}\n      >\n        <PresentationStage\n          editable\n          slideIndex={index}\n          selected={selected}\n          onSelect={select}\n          onEditImage={onEditImage}\n          onCropImage={onCropImage}\n          textEditing={textEditing}\n          overlay={\n            empty && (\n              <div className=\"pointer-events-none absolute inset-x-0 bottom-[8%] flex justify-center\">\n                <span className=\"rounded-full bg-black/40 px-3 py-1 text-[1.4cqw] text-white/70\">\n                  Drag a clip here from the tray\n                </span>\n              </div>\n            )\n          }\n        />\n        {(notes || current) && (\n          <textarea\n            value={notes}\n            rows={notes.split('\\n').length}\n            placeholder=\"Speaker notes\"\n            onChange={(event) =>\n              usePresentation.getState().setSlideNotes(event.target.value, index)\n            }\n            className=\"mt-2 block w-full resize-none rounded-sm border-0 bg-transparent px-1 py-0.5 text-xs text-muted-foreground placeholder:text-muted-foreground/50 focus:bg-background focus:text-foreground focus:outline-none focus:ring-1 focus:ring-ring\"\n            aria-label={`Speaker notes for slide ${index + 1}`}\n            data-testid={`slide-notes-${index}`}\n          />\n        )}\n      </div>\n    </div>\n  )\n})\n\nconst INSERTS: { shape: BoxShape; label: string; icon: ReactNode }[] = [\n  { shape: 'text', label: 'Text box', icon: <Type className=\"size-4\" /> },\n  { shape: 'rect', label: 'Rectangle', icon: <Square className=\"size-4\" /> },\n  {\n    shape: 'roundRect',\n    label: 'Rounded rectangle',\n    icon: <RectangleHorizontal className=\"size-4\" />,\n  },\n  { shape: 'ellipse', label: 'Ellipse', icon: <Circle className=\"size-4\" /> },\n  { shape: 'line', label: 'Line', icon: <Minus className=\"size-4\" /> },\n]\n\n/** Insert a text box or a shape on the current slide; it is selected, ready to type in. */\nfunction InsertMenu({ onInserted }: { onInserted: (index: number, boxId: string) => void }) {\n  const insert = (shape: BoxShape) => {\n    const state = usePresentation.getState()\n    const slide = state.slides[state.current]\n    const box = newBox(shape, accentColor(state.theme.accent))\n    // On a light slide (an imported deck's), text is dark.\n    const dark = isLightBackground(slide?.background)\n    const { id, ...rest } = dark\n      ? {\n          ...box,\n          paragraphs: box.paragraphs.map((p) => ({\n            ...p,\n            runs: p.runs.map((r) => ({ color: '#1f2328', ...r })),\n          })),\n        }\n      : box\n    void id\n    onInserted(state.current, state.addBox(rest))\n  }\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button\n          type=\"button\"\n          size=\"icon\"\n          variant=\"ghost\"\n          className=\"size-8 text-muted-foreground hover:text-foreground pointer-coarse:size-11\"\n          title=\"Insert a text box or shape\"\n          aria-label=\"Insert\"\n          data-testid=\"slides-insert\"\n        >\n          <Shapes className=\"size-4\" />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\">\n        {INSERTS.map(({ shape, label, icon }) => (\n          <DropdownMenuItem\n            key={shape}\n            onSelect={() => insert(shape)}\n            data-testid={`slides-insert-${shape}`}\n          >\n            {icon}\n            <span className=\"ml-2\">{label}</span>\n          </DropdownMenuItem>\n        ))}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n\n/** Between two slides (and after the last): + inserts a slide there, shown on hover. */\nfunction InsertSlide({ after, always }: { after: number; always?: boolean }) {\n  return (\n    <div className=\"group/insert relative flex h-8 items-center justify-center pl-11\">\n      <button\n        type=\"button\"\n        onClick={() => usePresentation.getState().addSlide(undefined, after)}\n        className={cn(\n          'flex items-center gap-1 rounded-full border border-dashed border-border bg-background px-2.5 py-0.5 text-xs text-muted-foreground transition-opacity hover:border-solid hover:text-foreground focus-visible:opacity-100',\n          !always && 'opacity-0 group-hover/insert:opacity-100 pointer-coarse:opacity-100'\n        )}\n        aria-label={`New slide after slide ${after + 1}`}\n        data-testid={`slide-insert-${after}`}\n      >\n        <Plus className=\"size-3\" />\n        Slide\n      </button>\n    </div>\n  )\n}\n\nexport function SlidesEditor({\n  onPresent,\n  actions,\n  menuItems,\n  trayStart,\n  onChooseLogo,\n  onEditImage,\n  onCropImage,\n}: SlidesEditorProps) {\n  const ids = usePresentation((s) => s.slides.map((slide) => slide.id).join(' '))\n  const slideIds = useMemo(() => ids.split(' '), [ids])\n  const current = usePresentation((s) => s.current)\n  const captions = usePresentation((s) => s.captions)\n  // Presenting in the presentation's own window: Present becomes Stop presenting.\n  const presenting = usePresentation((s) => s.presenting)\n  const [selection, setSelection] = useState<Selection | null>(null)\n  const [view, setView] = useState<Window | null>(null)\n  const list = useRef<HTMLDivElement>(null)\n  const rootRef = useCallback((node: HTMLDivElement | null) => {\n    if (node) setView(node.ownerDocument.defaultView)\n  }, [])\n\n  const onSelect = useCallback((index: number, clipId: string | null) => {\n    setSelection(clipId ? { index, clipId } : null)\n  }, [])\n  const keySelection = useMemo(\n    () => ({ clipId: selection?.clipId ?? null, clear: () => setSelection(null) }),\n    [selection]\n  )\n  usePresenterKeys(view, false, keySelection)\n\n  // A slide added, duplicated or moved becomes the current one: brought into view.\n  useEffect(() => {\n    const card = list.current?.querySelector(`[data-testid=\"slide-${current}\"]`)\n    card?.scrollIntoView?.({ block: 'nearest', behavior: 'smooth' })\n  }, [current, slideIds.length])\n\n  return (\n    <div\n      ref={rootRef}\n      className=\"relative flex h-full min-h-0 flex-col bg-muted/30\"\n      data-testid=\"slides-editor\"\n    >\n      <div ref={list} className=\"min-h-0 flex-1 overflow-y-auto\">\n        <div className=\"mx-auto flex max-w-[1100px] flex-col pb-6 pl-2 pr-6 pt-14\">\n          {slideIds.map((id, index) => (\n            <div key={id}>\n              <SlideCard\n                index={index}\n                count={slideIds.length}\n                current={index === current}\n                selected={selection?.index === index ? selection.clipId : null}\n                onSelect={onSelect}\n                onEditImage={onEditImage}\n                onCropImage={onCropImage}\n              />\n              <InsertSlide after={index} always={index === slideIds.length - 1} />\n            </div>\n          ))}\n        </div>\n      </div>\n\n      {/* The rest, in one small floating bar: no header row. */}\n      <div\n        className=\"absolute right-4 top-2.5 z-40 flex items-center gap-0.5 rounded-full border border-border bg-background p-1 shadow-md\"\n        data-testid=\"slides-toolbar\"\n      >\n        <DesignMenu onChooseLogo={onChooseLogo} />\n        <InsertMenu onInserted={(index, boxId) => setSelection({ index, clipId: boxId })} />\n        {actions}\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              type=\"button\"\n              size=\"icon\"\n              variant=\"ghost\"\n              className=\"size-8 text-muted-foreground hover:text-foreground pointer-coarse:size-11\"\n              title=\"More\"\n              aria-label=\"More\"\n            >\n              <MoreHorizontal className=\"size-4\" />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            {menuItems}\n            {menuItems && <DropdownMenuSeparator />}\n            <DropdownMenuCheckboxItem\n              checked={captions}\n              onCheckedChange={(on) => usePresentation.getState().setCaptions(!!on)}\n            >\n              Show source labels\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        {presenting ? (\n          <Button\n            type=\"button\"\n            size=\"sm\"\n            variant=\"destructive\"\n            className=\"ml-0.5 h-8 rounded-full\"\n            onClick={() => usePresentation.getState().setPresenting(false)}\n            title=\"Stop presenting (the presentation window closes)\"\n            data-testid=\"presentation-stop-button\"\n          >\n            <Square className=\"size-3 fill-current\" />\n            Stop presenting\n          </Button>\n        ) : (\n          <Button\n            type=\"button\"\n            size=\"sm\"\n            className=\"ml-0.5 h-8 rounded-full\"\n            onClick={() => {\n              setSelection(null)\n              onPresent()\n            }}\n            title=\"Present: the slides alone, in a window to share or put full screen\"\n            data-testid=\"presentation-present-button\"\n          >\n            <Play className=\"size-3.5\" />\n            Present\n          </Button>\n        )}\n      </div>\n\n      <ClipTray start={trayStart} />\n      <Notice />\n    </div>\n  )\n}\n"],
+  "mappings": "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",
   "names": ["SlideCard"]
 }

package/dist/presentation/panel-id.d.ts

@@ -19,14 +19,24 @@ export declare const isLegacyPresentationFile: (fileName: string | null | undefi
 type Session = {
     openPanel(panelId: string, mode: 'popout' | 'docked' | 'overlay' | 'main'): void;
 };
+type Windows = {
+    createPopupWindow(panelId: string, onClose?: () => void, title?: string): string | null;
+};
 /**
  * Open the presentation's own window (a pop-out: call it from a click), to edit the presentation
  * there, or (`present`) only to present it: that window closes when presenting ends. Recorded, so
  * a window the saved layout restores after a reload, with nothing in it (a presentation lives in
  * memory), is closed rather than reopened.
+ *
+ * Given the host's panel `windows`, the browser window opens at once, in the click, and the panel
+ * adopts it. The panel would otherwise open it only once the presentation's code has loaded: by
+ * then the click's permission to open a window has passed, and the browser blocks it as an
+ * unrequested pop-up (asking whether to allow pop-ups), where a document popped out opens at once.
  */
-export declare function openPresentation(session: Session, { present }?: {
-    present?: boolean | undefined;
+export declare function openPresentation(session: Session, { present, windows, title, }?: {
+    present?: boolean;
+    windows?: Windows;
+    title?: string;
 }): void;
 export declare const presentationOpenedInThisPage: () => boolean;
 /** The window was opened only to present (it closes when presenting ends). */

package/dist/presentation/panel-id.js

@@ -5,9 +5,14 @@ const LEGACY_PRESENTATION_SUFFIX = ".presentation.json";
 const isLegacyPresentationFile = (fileName) => !!fileName && fileName.endsWith(LEGACY_PRESENTATION_SUFFIX);
 let openedInThisPage = false;
 let presentOnly = false;
-function openPresentation(session, { present = false } = {}) {
+function openPresentation(session, {
+  present = false,
+  windows,
+  title = "Presentation"
+} = {}) {
   openedInThisPage = true;
   presentOnly = present;
+  windows?.createPopupWindow(`panel-${PRESENTATION_PANEL}`, void 0, title);
   session.openPanel(PRESENTATION_PANEL, "popout");
 }
 const presentationOpenedInThisPage = () => openedInThisPage;

package/dist/presentation/panel-id.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/presentation/panel-id.ts"],
-  "sourcesContent": ["/**\n * The presentation window's entry points, for any surface. Light: no PDF engine, no presentation\n * module (that loads with the window or the viewer's slides tab).\n *\n * A presentation is edited in the viewer's slides tab, or in a window of its own (`openPresentation`)\n * beside the documents its clips come from; Present always shows in that window, alone, to share.\n */\n\n/** The session's panel for the presentation's own window (`ConnectedPresentation`). */\nexport const PRESENTATION_PANEL = 'presentation-panel'\n\n/**\n * The names presentations were saved under before they were known by their folder (a saved\n * presentation is now `<title>.pdf` in Files \u203A Presentations): `.presentation.pdf`, and\n * `.presentation.json` (the editable data alone, from before presentations were PDFs).\n */\nexport const PRESENTATION_FILE_SUFFIX = '.presentation.pdf'\nexport const LEGACY_PRESENTATION_SUFFIX = '.presentation.json'\n\n/** A presentation saved before it was a PDF: its data alone, no slides to view. */\nexport const isLegacyPresentationFile = (fileName: string | null | undefined): boolean =>\n  !!fileName && fileName.endsWith(LEGACY_PRESENTATION_SUFFIX)\n\ntype Session = { openPanel(panelId: string, mode: 'popout' | 'docked' | 'overlay' | 'main'): void }\n\nlet openedInThisPage = false\nlet presentOnly = false\n\n/**\n * Open the presentation's own window (a pop-out: call it from a click), to edit the presentation\n * there, or (`present`) only to present it: that window closes when presenting ends. Recorded, so\n * a window the saved layout restores after a reload, with nothing in it (a presentation lives in\n * memory), is closed rather than reopened.\n */\nexport function openPresentation(session: Session, { present = false } = {}): void {\n  openedInThisPage = true\n  presentOnly = present\n  session.openPanel(PRESENTATION_PANEL, 'popout')\n}\n\nexport const presentationOpenedInThisPage = (): boolean => openedInThisPage\n\n/** The window was opened only to present (it closes when presenting ends). */\nexport const presentationWindowOnlyPresents = (): boolean => presentOnly\n"],
-  "mappings": ";AASO,MAAM,qBAAqB;AAO3B,MAAM,2BAA2B;AACjC,MAAM,6BAA6B;AAGnC,MAAM,2BAA2B,CAAC,aACvC,CAAC,CAAC,YAAY,SAAS,SAAS,0BAA0B;AAI5D,IAAI,mBAAmB;AACvB,IAAI,cAAc;AAQX,SAAS,iBAAiB,SAAkB,EAAE,UAAU,MAAM,IAAI,CAAC,GAAS;AACjF,qBAAmB;AACnB,gBAAc;AACd,UAAQ,UAAU,oBAAoB,QAAQ;AAChD;AAEO,MAAM,+BAA+B,MAAe;AAGpD,MAAM,iCAAiC,MAAe;",
+  "sourcesContent": ["/**\n * The presentation window's entry points, for any surface. Light: no PDF engine, no presentation\n * module (that loads with the window or the viewer's slides tab).\n *\n * A presentation is edited in the viewer's slides tab, or in a window of its own (`openPresentation`)\n * beside the documents its clips come from; Present always shows in that window, alone, to share.\n */\n\n/** The session's panel for the presentation's own window (`ConnectedPresentation`). */\nexport const PRESENTATION_PANEL = 'presentation-panel'\n\n/**\n * The names presentations were saved under before they were known by their folder (a saved\n * presentation is now `<title>.pdf` in Files \u203A Presentations): `.presentation.pdf`, and\n * `.presentation.json` (the editable data alone, from before presentations were PDFs).\n */\nexport const PRESENTATION_FILE_SUFFIX = '.presentation.pdf'\nexport const LEGACY_PRESENTATION_SUFFIX = '.presentation.json'\n\n/** A presentation saved before it was a PDF: its data alone, no slides to view. */\nexport const isLegacyPresentationFile = (fileName: string | null | undefined): boolean =>\n  !!fileName && fileName.endsWith(LEGACY_PRESENTATION_SUFFIX)\n\ntype Session = { openPanel(panelId: string, mode: 'popout' | 'docked' | 'overlay' | 'main'): void }\ntype Windows = {\n  createPopupWindow(panelId: string, onClose?: () => void, title?: string): string | null\n}\n\nlet openedInThisPage = false\nlet presentOnly = false\n\n/**\n * Open the presentation's own window (a pop-out: call it from a click), to edit the presentation\n * there, or (`present`) only to present it: that window closes when presenting ends. Recorded, so\n * a window the saved layout restores after a reload, with nothing in it (a presentation lives in\n * memory), is closed rather than reopened.\n *\n * Given the host's panel `windows`, the browser window opens at once, in the click, and the panel\n * adopts it. The panel would otherwise open it only once the presentation's code has loaded: by\n * then the click's permission to open a window has passed, and the browser blocks it as an\n * unrequested pop-up (asking whether to allow pop-ups), where a document popped out opens at once.\n */\nexport function openPresentation(\n  session: Session,\n  {\n    present = false,\n    windows,\n    title = 'Presentation',\n  }: { present?: boolean; windows?: Windows; title?: string } = {}\n): void {\n  openedInThisPage = true\n  presentOnly = present\n  windows?.createPopupWindow(`panel-${PRESENTATION_PANEL}`, undefined, title)\n  session.openPanel(PRESENTATION_PANEL, 'popout')\n}\n\nexport const presentationOpenedInThisPage = (): boolean => openedInThisPage\n\n/** The window was opened only to present (it closes when presenting ends). */\nexport const presentationWindowOnlyPresents = (): boolean => presentOnly\n"],
+  "mappings": ";AASO,MAAM,qBAAqB;AAO3B,MAAM,2BAA2B;AACjC,MAAM,6BAA6B;AAGnC,MAAM,2BAA2B,CAAC,aACvC,CAAC,CAAC,YAAY,SAAS,SAAS,0BAA0B;AAO5D,IAAI,mBAAmB;AACvB,IAAI,cAAc;AAaX,SAAS,iBACd,SACA;AAAA,EACE,UAAU;AAAA,EACV;AAAA,EACA,QAAQ;AACV,IAA8D,CAAC,GACzD;AACN,qBAAmB;AACnB,gBAAc;AACd,WAAS,kBAAkB,SAAS,kBAAkB,IAAI,QAAW,KAAK;AAC1E,UAAQ,UAAU,oBAAoB,QAAQ;AAChD;AAEO,MAAM,+BAA+B,MAAe;AAGpD,MAAM,iCAAiC,MAAe;",
   "names": []
 }

package/dist/presentation/slide-layout.d.ts

@@ -46,7 +46,11 @@ export declare const LAYOUT_INFO: Record<SlideLayout, {
     label: string;
     text?: string;
 }>;
-export declare function slideGeometry(slide: Pick<Slide, 'layout' | 'caption'>, options: {
+export declare function slideGeometry(
+/** `items`, when given: a points slide with none puts its text across the slide. */
+slide: Pick<Slide, 'layout' | 'caption'> & {
+    items?: readonly unknown[];
+}, options: {
     labels: boolean;
     logo: LogoCorner | null;
 }): SlideGeometry;

package/dist/presentation/slide-layout.js

@@ -87,6 +87,22 @@ function slideGeometry(slide, options) {
     logo,
     reserve: { top, below, bottom, inset }
   };
+  if (slide.layout === "points" && slide.items && slide.items.length === 0) {
+    const y = STAGE_MARGIN + top;
+    geometry.text = {
+      x: TEXT_INSET,
+      y,
+      w: 1 - 2 * TEXT_INSET,
+      h: 1 - y - STAGE_MARGIN - bottom,
+      size: 0.024,
+      weight: 400,
+      align: "left",
+      tone: "body",
+      bullets: true,
+      leading: 1.45
+    };
+    return geometry;
+  }
   if (slide.layout === "points") {
     const y = STAGE_MARGIN + top;
     geometry.text = {

package/dist/presentation/slide-layout.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/presentation/slide-layout.ts"],
-  "sourcesContent": ["/**\n * Where a slide's parts go, by its layout: its title, the accent rule, its text (points, or a\n * subtitle), the logo in the footer, and the room its clips are arranged in. One description,\n * drawn by the stage, the saved PDF and the PowerPoint export alike.\n *\n * All positions are fractions of the stage (x, w of its width; y, h of its height); type sizes\n * are fractions of the stage width.\n */\n\nimport { CAPTION_SPACE, STAGE_MARGIN, type Reserve, type Slide, type SlideLayout } from './model'\nimport type { LogoCorner } from './theme'\n\n/** Text sits this far in from the stage's sides: a generous margin. */\nconst TEXT_INSET = 0.06\n\nexport interface TextBox {\n  x: number\n  y: number\n  w: number\n  h: number\n  /** Type size, a fraction of the stage width. */\n  size: number\n  weight: 400 | 600 | 700\n  align: 'left' | 'center'\n  tone: 'title' | 'body' | 'muted'\n  /** Lines start with a bullet in the accent colour. */\n  bullets?: boolean\n  /** Line height, a multiple of the type size. */\n  leading: number\n  /** Where the text sits in its box, top to bottom (default top). */\n  anchor?: 'top' | 'middle' | 'bottom'\n}\n\nexport interface Box {\n  x: number\n  y: number\n  w: number\n  h: number\n}\n\nexport interface SlideGeometry {\n  /** Where its title goes (none on a blank slide: its text is in its boxes). */\n  title: TextBox | null\n  /** The accent rule (under or above the title), when the slide shows a title. */\n  rule: Box | null\n  /** Where its points (or subtitle) go, if this layout has text. */\n  text: TextBox | null\n  logo: Box | null\n  /** The room its clips keep free (they are arranged in the rest). */\n  reserve: Reserve\n}\n\nexport const LAYOUT_INFO: Record<SlideLayout, { label: string; text?: string }> = {\n  clips: { label: 'Title and clips' },\n  points: { label: 'Clips and points', text: 'One point per line' },\n  compare: { label: 'Side by side' },\n  title: { label: 'Title slide', text: 'Subtitle' },\n  section: { label: 'Section', text: 'Subtitle' },\n  free: { label: 'Blank' },\n}\n\n/** The footer's height while a logo shows. */\nconst FOOTER = 0.085\n\nexport function slideGeometry(\n  slide: Pick<Slide, 'layout' | 'caption'>,\n  options: { labels: boolean; logo: LogoCorner | null }\n): SlideGeometry {\n  const below = options.labels ? CAPTION_SPACE : 0\n  const bottom = options.logo ? FOOTER : 0\n  const logo: Box | null = options.logo\n    ? {\n        x: options.logo === 'bl' ? TEXT_INSET : 1 - TEXT_INSET - 0.16,\n        y: 1 - 0.03 - 0.055,\n        w: 0.16,\n        h: 0.055,\n      }\n    : null\n  const hasTitle = slide.caption.trim() !== ''\n\n  // Blank: nothing of its own but the logo; whatever is placed on it goes anywhere.\n  if (slide.layout === 'free') {\n    return { title: null, rule: null, text: null, logo, reserve: { top: 0, below, bottom } }\n  }\n\n  if (slide.layout === 'title' || slide.layout === 'section') {\n    const centred = slide.layout === 'title'\n    const title: TextBox = centred\n      ? {\n          x: 0.1,\n          y: 0.28,\n          w: 0.8,\n          h: 0.2,\n          size: 0.052,\n          weight: 700,\n          align: 'center',\n          tone: 'title',\n          leading: 1.1,\n          // Just above the rule, however many lines it takes.\n          anchor: 'bottom',\n        }\n      : {\n          x: TEXT_INSET + 0.02,\n          y: 0.36,\n          w: 0.8,\n          h: 0.18,\n          size: 0.046,\n          weight: 700,\n          align: 'left',\n          tone: 'title',\n          leading: 1.1,\n        }\n    return {\n      title,\n      rule: centred\n        ? { x: 0.47, y: 0.505, w: 0.06, h: 0.007 }\n        : { x: TEXT_INSET + 0.02, y: 0.33, w: 0.07, h: 0.008 },\n      text: {\n        x: title.x,\n        y: centred ? 0.545 : 0.555,\n        w: title.w,\n        h: 0.1,\n        size: 0.021,\n        weight: 400,\n        align: title.align,\n        tone: 'muted',\n        leading: 1.3,\n      },\n      logo,\n      // Clips, if any, go under the text.\n      reserve: { top: 0.62, below, bottom },\n    }\n  }\n\n  const title: TextBox = {\n    x: TEXT_INSET,\n    y: 0.05,\n    w: 1 - 2 * TEXT_INSET,\n    h: 0.075,\n    size: 0.03,\n    weight: 600,\n    align: 'left',\n    tone: 'title',\n    leading: 1.15,\n  }\n  const top = hasTitle ? 0.14 : 0\n  // Clips line up with the slide's text (its title, its points); with none, they take the room.\n  const inset = hasTitle || slide.layout === 'points' ? TEXT_INSET - STAGE_MARGIN : 0\n  const geometry: SlideGeometry = {\n    title,\n    rule: hasTitle ? { x: TEXT_INSET, y: 0.128, w: 0.045, h: 0.006 } : null,\n    text: null,\n    logo,\n    reserve: { top, below, bottom, inset },\n  }\n  if (slide.layout === 'points') {\n    const y = STAGE_MARGIN + top\n    geometry.text = {\n      x: 0.6,\n      y,\n      w: 1 - 0.6 - TEXT_INSET,\n      h: 1 - y - STAGE_MARGIN - bottom - below,\n      // Level with the clips, which are centred in their room.\n      anchor: 'middle',\n      size: 0.0195,\n      weight: 400,\n      align: 'left',\n      tone: 'body',\n      bullets: true,\n      leading: 1.45,\n    }\n    geometry.reserve = { ...geometry.reserve, right: 0.4 - inset }\n  }\n  if (slide.layout === 'compare') geometry.reserve = { ...geometry.reserve, columns: 2 }\n  return geometry\n}\n\n/** The lines of a slide's text (blank lines dropped). */\nexport const textLines = (text: string): string[] =>\n  text\n    .split('\\n')\n    .map((line) => line.trim())\n    .filter(Boolean)\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * Where a slide's parts go, by its layout: its title, the accent rule, its text (points, or a\n * subtitle), the logo in the footer, and the room its clips are arranged in. One description,\n * drawn by the stage, the saved PDF and the PowerPoint export alike.\n *\n * All positions are fractions of the stage (x, w of its width; y, h of its height); type sizes\n * are fractions of the stage width.\n */\n\nimport { CAPTION_SPACE, STAGE_MARGIN, type Reserve, type Slide, type SlideLayout } from './model'\nimport type { LogoCorner } from './theme'\n\n/** Text sits this far in from the stage's sides: a generous margin. */\nconst TEXT_INSET = 0.06\n\nexport interface TextBox {\n  x: number\n  y: number\n  w: number\n  h: number\n  /** Type size, a fraction of the stage width. */\n  size: number\n  weight: 400 | 600 | 700\n  align: 'left' | 'center'\n  tone: 'title' | 'body' | 'muted'\n  /** Lines start with a bullet in the accent colour. */\n  bullets?: boolean\n  /** Line height, a multiple of the type size. */\n  leading: number\n  /** Where the text sits in its box, top to bottom (default top). */\n  anchor?: 'top' | 'middle' | 'bottom'\n}\n\nexport interface Box {\n  x: number\n  y: number\n  w: number\n  h: number\n}\n\nexport interface SlideGeometry {\n  /** Where its title goes (none on a blank slide: its text is in its boxes). */\n  title: TextBox | null\n  /** The accent rule (under or above the title), when the slide shows a title. */\n  rule: Box | null\n  /** Where its points (or subtitle) go, if this layout has text. */\n  text: TextBox | null\n  logo: Box | null\n  /** The room its clips keep free (they are arranged in the rest). */\n  reserve: Reserve\n}\n\nexport const LAYOUT_INFO: Record<SlideLayout, { label: string; text?: string }> = {\n  clips: { label: 'Title and clips' },\n  points: { label: 'Clips and points', text: 'One point per line' },\n  compare: { label: 'Side by side' },\n  title: { label: 'Title slide', text: 'Subtitle' },\n  section: { label: 'Section', text: 'Subtitle' },\n  free: { label: 'Blank' },\n}\n\n/** The footer's height while a logo shows. */\nconst FOOTER = 0.085\n\nexport function slideGeometry(\n  /** `items`, when given: a points slide with none puts its text across the slide. */\n  slide: Pick<Slide, 'layout' | 'caption'> & { items?: readonly unknown[] },\n  options: { labels: boolean; logo: LogoCorner | null }\n): SlideGeometry {\n  const below = options.labels ? CAPTION_SPACE : 0\n  const bottom = options.logo ? FOOTER : 0\n  const logo: Box | null = options.logo\n    ? {\n        x: options.logo === 'bl' ? TEXT_INSET : 1 - TEXT_INSET - 0.16,\n        y: 1 - 0.03 - 0.055,\n        w: 0.16,\n        h: 0.055,\n      }\n    : null\n  const hasTitle = slide.caption.trim() !== ''\n\n  // Blank: nothing of its own but the logo; whatever is placed on it goes anywhere.\n  if (slide.layout === 'free') {\n    return { title: null, rule: null, text: null, logo, reserve: { top: 0, below, bottom } }\n  }\n\n  if (slide.layout === 'title' || slide.layout === 'section') {\n    const centred = slide.layout === 'title'\n    const title: TextBox = centred\n      ? {\n          x: 0.1,\n          y: 0.28,\n          w: 0.8,\n          h: 0.2,\n          size: 0.052,\n          weight: 700,\n          align: 'center',\n          tone: 'title',\n          leading: 1.1,\n          // Just above the rule, however many lines it takes.\n          anchor: 'bottom',\n        }\n      : {\n          x: TEXT_INSET + 0.02,\n          y: 0.36,\n          w: 0.8,\n          h: 0.18,\n          size: 0.046,\n          weight: 700,\n          align: 'left',\n          tone: 'title',\n          leading: 1.1,\n        }\n    return {\n      title,\n      rule: centred\n        ? { x: 0.47, y: 0.505, w: 0.06, h: 0.007 }\n        : { x: TEXT_INSET + 0.02, y: 0.33, w: 0.07, h: 0.008 },\n      text: {\n        x: title.x,\n        y: centred ? 0.545 : 0.555,\n        w: title.w,\n        h: 0.1,\n        size: 0.021,\n        weight: 400,\n        align: title.align,\n        tone: 'muted',\n        leading: 1.3,\n      },\n      logo,\n      // Clips, if any, go under the text.\n      reserve: { top: 0.62, below, bottom },\n    }\n  }\n\n  const title: TextBox = {\n    x: TEXT_INSET,\n    y: 0.05,\n    w: 1 - 2 * TEXT_INSET,\n    h: 0.075,\n    size: 0.03,\n    weight: 600,\n    align: 'left',\n    tone: 'title',\n    leading: 1.15,\n  }\n  const top = hasTitle ? 0.14 : 0\n  // Clips line up with the slide's text (its title, its points); with none, they take the room.\n  const inset = hasTitle || slide.layout === 'points' ? TEXT_INSET - STAGE_MARGIN : 0\n  const geometry: SlideGeometry = {\n    title,\n    rule: hasTitle ? { x: TEXT_INSET, y: 0.128, w: 0.045, h: 0.006 } : null,\n    text: null,\n    logo,\n    reserve: { top, below, bottom, inset },\n  }\n  if (slide.layout === 'points' && slide.items && slide.items.length === 0) {\n    // Points alone: across the slide, under its title (no room kept for clips that are not there).\n    const y = STAGE_MARGIN + top\n    geometry.text = {\n      x: TEXT_INSET,\n      y,\n      w: 1 - 2 * TEXT_INSET,\n      h: 1 - y - STAGE_MARGIN - bottom,\n      size: 0.024,\n      weight: 400,\n      align: 'left',\n      tone: 'body',\n      bullets: true,\n      leading: 1.45,\n    }\n    return geometry\n  }\n  if (slide.layout === 'points') {\n    const y = STAGE_MARGIN + top\n    geometry.text = {\n      x: 0.6,\n      y,\n      w: 1 - 0.6 - TEXT_INSET,\n      h: 1 - y - STAGE_MARGIN - bottom - below,\n      // Level with the clips, which are centred in their room.\n      anchor: 'middle',\n      size: 0.0195,\n      weight: 400,\n      align: 'left',\n      tone: 'body',\n      bullets: true,\n      leading: 1.45,\n    }\n    geometry.reserve = { ...geometry.reserve, right: 0.4 - inset }\n  }\n  if (slide.layout === 'compare') geometry.reserve = { ...geometry.reserve, columns: 2 }\n  return geometry\n}\n\n/** The lines of a slide's text (blank lines dropped). */\nexport const textLines = (text: string): string[] =>\n  text\n    .split('\\n')\n    .map((line) => line.trim())\n    .filter(Boolean)\n"],
+  "mappings": "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",
   "names": ["title"]
 }