@dxos/plugin-presenter 0.8.4-main.f5c0578 → 0.8.4-main.fcfe5033a5

package/dist/lib/browser/PresenterSettings-DZO2DC53.mjs

@@ -0,0 +1,29 @@
+import "./chunk-J5LGTIGS.mjs";
+
+// src/components/PresenterSettings/PresenterSettings.tsx
+import React from "react";
+import { Input, useTranslation } from "@dxos/react-ui";
+import { Settings as SettingsForm } from "@dxos/react-ui-form";
+import { meta } from "#meta";
+var PresenterSettings = ({ settings, onSettingsChange }) => {
+  const { t } = useTranslation(meta.id);
+  return /* @__PURE__ */ React.createElement(SettingsForm.Viewport, null, /* @__PURE__ */ React.createElement(SettingsForm.Section, {
+    title: t("settings.title", {
+      ns: meta.id
+    })
+  }, /* @__PURE__ */ React.createElement(SettingsForm.Item, {
+    title: t("present-collections.label"),
+    description: t("present-collections.description")
+  }, /* @__PURE__ */ React.createElement(Input.Switch, {
+    disabled: !onSettingsChange,
+    checked: settings.presentCollections,
+    onCheckedChange: (checked) => onSettingsChange?.((s) => ({
+      ...s,
+      presentCollections: !!checked
+    }))
+  }))));
+};
+export {
+  PresenterSettings as default
+};
+//# sourceMappingURL=PresenterSettings-DZO2DC53.mjs.map

package/dist/lib/browser/PresenterSettings-DZO2DC53.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/PresenterSettings/PresenterSettings.tsx"],
+  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport React from 'react';\n\nimport { type AppSurface } from '@dxos/app-toolkit/ui';\nimport { Input, useTranslation } from '@dxos/react-ui';\nimport { Settings as SettingsForm } from '@dxos/react-ui-form';\n\nimport { meta } from '#meta';\nimport { type Settings } from '#types';\n\nexport type PresenterSettingsProps = AppSurface.SettingsArticleProps<Settings.Settings>;\n\nexport const PresenterSettings = ({ settings, onSettingsChange }: PresenterSettingsProps) => {\n  const { t } = useTranslation(meta.id);\n\n  return (\n    <SettingsForm.Viewport>\n      <SettingsForm.Section title={t('settings.title', { ns: meta.id })}>\n        <SettingsForm.Item title={t('present-collections.label')} description={t('present-collections.description')}>\n          <Input.Switch\n            disabled={!onSettingsChange}\n            checked={settings.presentCollections}\n            onCheckedChange={(checked) => onSettingsChange?.((s) => ({ ...s, presentCollections: !!checked }))}\n          />\n        </SettingsForm.Item>\n      </SettingsForm.Section>\n    </SettingsForm.Viewport>\n  );\n};\n"],
+  "mappings": ";;;AAIA,OAAOA,WAAW;AAGlB,SAASC,OAAOC,sBAAsB;AACtC,SAASC,YAAYC,oBAAoB;AAEzC,SAASC,YAAY;AAKd,IAAMC,oBAAoB,CAAC,EAAEC,UAAUC,iBAAgB,MAA0B;AACtF,QAAM,EAAEC,EAAC,IAAKC,eAAeC,KAAKC,EAAE;AAEpC,SACE,sBAAA,cAACC,aAAaC,UAAQ,MACpB,sBAAA,cAACD,aAAaE,SAAO;IAACC,OAAOP,EAAE,kBAAkB;MAAEQ,IAAIN,KAAKC;IAAG,CAAA;KAC7D,sBAAA,cAACC,aAAaK,MAAI;IAACF,OAAOP,EAAE,2BAAA;IAA8BU,aAAaV,EAAE,iCAAA;KACvE,sBAAA,cAACW,MAAMC,QAAM;IACXC,UAAU,CAACd;IACXe,SAAShB,SAASiB;IAClBC,iBAAiB,CAACF,YAAYf,mBAAmB,CAACkB,OAAO;MAAE,GAAGA;MAAGF,oBAAoB,CAAC,CAACD;IAAQ,EAAA;;AAM3G;",
+  "names": ["React", "Input", "useTranslation", "Settings", "SettingsForm", "meta", "PresenterSettings", "settings", "onSettingsChange", "t", "useTranslation", "meta", "id", "SettingsForm", "Viewport", "Section", "title", "ns", "Item", "description", "Input", "Switch", "disabled", "checked", "presentCollections", "onCheckedChange", "s"]
+}

package/dist/lib/browser/chunk-J5LGTIGS.mjs

@@ -0,0 +1,10 @@
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+export {
+  __export
+};
+//# sourceMappingURL=chunk-J5LGTIGS.mjs.map

package/dist/lib/browser/chunk-J5LGTIGS.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/lib/browser/index.mjs

@@ -1,66 +1,552 @@
-import {
-  CollectionPresenterContainer,
-  DocumentPresenterContainer,
-  MarkdownSlide,
-  PresenterSettings
-} from "./chunk-RDCZJT62.mjs";
-import {
-  PRESENTER_PLUGIN,
-  meta
-} from "./chunk-VSD5LSE5.mjs";
+import "./chunk-J5LGTIGS.mjs";
 
-// src/PresenterPlugin.tsx
-import { Capabilities, Events, contributes, defineModule, definePlugin } from "@dxos/app-framework";
+// src/components/index.ts
+import { lazy } from "react";
+
+// src/components/Markdown/Panel.tsx
+import React, { useState } from "react";
+import { useResizeDetector } from "react-resize-detector";
+import { mx } from "@dxos/ui-theme";
+var Panel = ({ children, classNames }) => {
+  const [props, setProps] = useState({});
+  const { ref: containerRef, width, height } = useResizeDetector({
+    refreshMode: "debounce",
+    refreshRate: 200,
+    refreshOptions: {
+      leading: true
+    },
+    onResize: ({ width: width2, height: height2 }) => {
+      if (width2 && height2) {
+        setProps(createLayoutProps({
+          width: width2,
+          height: height2
+        }));
+      }
+    }
+  });
+  return /* @__PURE__ */ React.createElement("div", {
+    ref: containerRef,
+    className: mx("flex grow relative overflow-hidden bg-attention-surface", classNames)
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: mx("dx-container absolute"),
+    style: props
+  }, width && height && children));
+};
+var createLayoutProps = ({ width, height }) => {
+  const aspectRatio = 16 / 9;
+  const nominalWidth = 2560;
+  const nominalHeight = nominalWidth / aspectRatio;
+  const scale = Math.min(width / nominalWidth, height / nominalHeight);
+  return {
+    left: (width - nominalWidth) / 2,
+    top: (height - nominalHeight) / 2,
+    width: nominalWidth,
+    height: nominalHeight,
+    transform: `scale(${scale})`
+  };
+};
+
+// src/components/Markdown/Slide.tsx
+import "highlight.js/styles/github.css";
+import { h } from "hastscript";
+import React2 from "react";
+import ReactMarkdown from "react-markdown";
+import rehypeAddClasses from "rehype-add-classes";
+import rehypeHighlight from "rehype-highlight";
+import remarkFrontmatter from "remark-frontmatter";
+import remarkParseFrontmatter from "remark-parse-frontmatter";
+
+// raw-loader:/__w/dxos/dxos/packages/plugins/plugin-presenter/src/components/Markdown/styles.css?raw
+var styles_default = "/*!\n  Theme: GitHub Dark\n  Description: Dark theme as seen on github.com\n  Author: github.com\n  Maintainer: @Hirse\n  Updated: 2021-05-15\n  Outdated base version: https://github.com/primer/github-syntax-dark\n  Current colors taken from GitHub's CSS\n*/\n/* TODO(burdon): Use tokens. */\n.dark pre code.hljs {\n  display: block;\n  overflow-x: auto;\n  padding: 1em;\n}\n.dark code.hljs {\n  padding: 3px 5px;\n}\n.dark .hljs {\n  color: #c9d1d9;\n  background: #0d1117;\n}\n.dark .hljs-doctag,\n.dark .hljs-keyword,\n.dark .hljs-meta .hljs-keyword,\n.dark .hljs-template-tag,\n.dark .hljs-template-variable,\n.dark .hljs-type,\n.dark .hljs-variable.language_ {\n  color: #ff7b72;\n}\n.dark .hljs-title,\n.dark .hljs-title.class_,\n.dark .hljs-title.class_.inherited__,\n.dark .hljs-title.function_ {\n  color: #d2a8ff;\n}\n.dark .hljs-attr,\n.dark .hljs-attribute,\n.dark .hljs-literal,\n.dark .hljs-meta,\n.dark .hljs-number,\n.dark .hljs-operator,\n.dark .hljs-variable,\n.dark .hljs-selector-attr,\n.dark .hljs-selector-class,\n.dark .hljs-selector-id {\n  color: #79c0ff;\n}\n.dark .hljs-regexp,\n.dark .hljs-string,\n.dark .hljs-meta .hljs-string {\n  color: #a5d6ff;\n}\n.dark .hljs-built_in,\n.dark .hljs-symbol {\n  color: #ffa657;\n}\n.dark .hljs-comment,\n.dark .hljs-code,\n.dark .hljs-formula {\n  color: #8b949e;\n}\n.dark .hljs-name,\n.dark .hljs-quote,\n.dark .hljs-selector-tag,\n.dark .hljs-selector-pseudo {\n  color: #7ee787;\n}\n.dark .hljs-subst {\n  color: #c9d1d9;\n}\n.dark .hljs-section {\n  color: #1f6feb;\n  font-weight: bold;\n}\n.dark .hljs-bullet {\n  color: #f2cc60;\n}\n.dark .hljs-emphasis {\n  color: #c9d1d9;\n  font-style: italic;\n}\n.dark .hljs-strong {\n  color: #c9d1d9;\n  font-weight: bold;\n}\n.dark .hljs-addition {\n  color: #aff5b4;\n  background-color: #033a16;\n}\n.dark .hljs-deletion {\n  color: #ffdcd7;\n  background-color: #67060c;\n}\n.dark .hljs-char.escape_,\n.dark .hljs-link,\n.dark .hljs-params,\n.dark .hljs-property,\n.dark .hljs-punctuation,\n.dark .hljs-tag {\n  /* purposely ignored */\n  all: unset;\n}\n";
+
+// src/components/Markdown/theme.ts
+var theme = {
+  root: "bg-attention-surface leading-relaxed font-mono",
+  padding: "px-40 py-16 gap-8",
+  nodes: {
+    h1: "text-[80px] text-accent-text",
+    h2: "text-[60px] text-accent-text",
+    h3: "text-[48px] text-accent-text",
+    p: "text-[48px]",
+    ul: "my-[16px] ml-12 leading-relaxed list-disc",
+    ol: "my-[16px] ml-24 leading-relaxed list-decimal",
+    li: "pl-6 text-[48px]",
+    pre: "w-full mx-0 my-[32px] p-4 bg-input-surface",
+    code: "p-0 text-[40px]"
+  }
+};
+
+// src/components/Markdown/Slide.tsx
+var Slide = ({ content = "", classes = theme.nodes }) => {
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("style", null, styles_default), /* @__PURE__ */ React2.createElement(ReactMarkdown, {
+    components,
+    // Markdown to HTML.
+    remarkPlugins: [
+      [
+        remarkFrontmatter,
+        "yaml"
+      ],
+      remarkParseFrontmatter
+    ],
+    // HTML processing.
+    rehypePlugins: [
+      [
+        rehypeAddClasses,
+        classes
+      ],
+      rehypeHighlight,
+      slideLayout
+    ]
+  }, content));
+};
+var slideLayout = (_options = {}) => (tree, file) => {
+  const { data: { frontmatter = {} } } = file;
+  let content = tree.children;
+  const { layout, image } = frontmatter;
+  if (image) {
+    const img = h("div", {
+      class: "flex grow shrink-0 bg-cover bg-center bg-no-repeat",
+      style: {
+        backgroundImage: `url(${image})`
+      }
+    });
+    switch (layout) {
+      case "fullscreen": {
+        content = img;
+        break;
+      }
+      case "columns": {
+        content = h("div", {
+          class: "flex grow grid grid-cols-2"
+        }, [
+          h("div", {
+            class: theme.padding
+          }, [
+            content
+          ]),
+          img
+        ]);
+        break;
+      }
+      case "rows": {
+        content = h("div", {
+          class: "flex grow flex-col"
+        }, [
+          h("div", {
+            class: theme.padding
+          }, [
+            content
+          ]),
+          h("div", {
+            class: [
+              "flex grow pt-0",
+              theme.padding
+            ]
+          }, [
+            img
+          ])
+        ]);
+        break;
+      }
+    }
+  } else {
+    content = h("div", {
+      class: [
+        "flex grow flex-col",
+        theme.padding
+      ]
+    }, [
+      content
+    ]);
+  }
+  const root = h("div", {
+    class: [
+      "flex flex-col grow",
+      theme.root
+    ]
+  }, [
+    content
+  ]);
+  tree.children = [
+    root
+  ];
+};
+var ImageWrapper = ({ node: _, ...props }) => {
+  const { alt = "", src } = props;
+  return /* @__PURE__ */ React2.createElement("img", {
+    alt,
+    src
+  });
+};
+var components = {
+  img: ({ node, ...props }) => /* @__PURE__ */ React2.createElement(ImageWrapper, {
+    node,
+    ...props
+  })
+};
+
+// src/components/Presenter/Layout.tsx
+import React3 from "react";
+import { composable, composableProps } from "@dxos/ui-theme";
+var Layout = composable(({ children, topLeft, topRight, bottomLeft, bottomRight, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React3.createElement("div", {
+    ...composableProps(props, {
+      classNames: "flex grow relative overflow-hidden bg-attention-surface"
+    }),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React3.createElement("div", {
+    className: "flex flex-col grow overflow-hidden"
+  }, children), /* @__PURE__ */ React3.createElement("div", {
+    className: "z-[200]"
+  }, /* @__PURE__ */ React3.createElement("div", {
+    className: "absolute top-4 left-4"
+  }, topLeft), /* @__PURE__ */ React3.createElement("div", {
+    className: "absolute top-4 right-4"
+  }, topRight), /* @__PURE__ */ React3.createElement("div", {
+    className: "absolute bottom-4 left-4"
+  }, bottomLeft), /* @__PURE__ */ React3.createElement("div", {
+    className: "absolute bottom-4 right-4"
+  }, bottomRight)));
+});
 
-// src/capabilities/index.ts
-import { lazy } from "@dxos/app-framework";
-var AppGraphBuilder = lazy(() => import("./app-graph-builder-GXESSA7Q.mjs"));
-var ReactSurface = lazy(() => import("./react-surface-H3L7Y3ED.mjs"));
-var PresenterSettings2 = lazy(() => import("./settings-VQVVDAGY.mjs"));
+// src/components/Presenter/Pager.tsx
+import React4, { useEffect } from "react";
+import { IconButton, useControlledState } from "@dxos/react-ui";
+var Pager = ({ index: indexProp = 0, count = 0, keys, onChange, onExit }) => {
+  const [index, setIndex] = useControlledState(indexProp);
+  useEffect(() => {
+    onChange?.(index);
+  }, [
+    index
+  ]);
+  const handleChangeIndex = (dir) => {
+    setIndex((index2) => {
+      const next = index2 + dir;
+      return next >= 0 && next < count ? next : index2;
+    });
+  };
+  useEffect(() => {
+    if (!keys) {
+      return;
+    }
+    const keydownHandler = (event) => {
+      switch (event.key) {
+        case "Escape": {
+          onExit?.();
+          break;
+        }
+        case "ArrowLeft": {
+          if (event.shiftKey) {
+            onChange?.(0);
+          } else {
+            handleChangeIndex(-1);
+          }
+          break;
+        }
+        case "ArrowRight": {
+          if (event.shiftKey) {
+            onChange?.(count - 1);
+          } else {
+            handleChangeIndex(1);
+          }
+          break;
+        }
+        case "ArrowUp": {
+          onChange?.(0);
+          break;
+        }
+        case "ArrowDown": {
+          onChange?.(count - 1);
+          break;
+        }
+      }
+    };
+    window.addEventListener("keydown", keydownHandler);
+    return () => window.removeEventListener("keydown", keydownHandler);
+  }, [
+    keys,
+    count
+  ]);
+  if (index === void 0 || !count) {
+    return null;
+  }
+  return /* @__PURE__ */ React4.createElement("div", {
+    className: "flex items-center text-neutral-500"
+  }, /* @__PURE__ */ React4.createElement(IconButton, {
+    icon: "ph--caret-double-left--regular",
+    size: 6,
+    label: "Jump to first",
+    iconOnly: true,
+    noTooltip: true,
+    variant: "ghost",
+    classNames: "p-0",
+    onClick: () => onChange?.(0)
+  }), /* @__PURE__ */ React4.createElement(IconButton, {
+    icon: "ph--caret-left--regular",
+    size: 6,
+    label: "Previous",
+    iconOnly: true,
+    noTooltip: true,
+    variant: "ghost",
+    classNames: "p-0",
+    onClick: () => handleChangeIndex(-1)
+  }), /* @__PURE__ */ React4.createElement(IconButton, {
+    icon: "ph--caret-right--regular",
+    size: 6,
+    label: "Next",
+    iconOnly: true,
+    noTooltip: true,
+    variant: "ghost",
+    classNames: "p-0",
+    onClick: () => handleChangeIndex(1)
+  }), /* @__PURE__ */ React4.createElement(IconButton, {
+    icon: "ph--caret-double-right--regular",
+    size: 6,
+    label: "Jump to last",
+    iconOnly: true,
+    noTooltip: true,
+    variant: "ghost",
+    classNames: "p-0",
+    onClick: () => onChange?.(count - 1)
+  }));
+};
+var PageNumber = ({ index = 0, count = 1 }) => {
+  if (index === void 0 || !count) {
+    return null;
+  }
+  return /* @__PURE__ */ React4.createElement("div", {
+    className: "flex items-center text-neutral-500 text-2xl"
+  }, /* @__PURE__ */ React4.createElement("div", null, index + 1, " / ", count));
+};
+var StartButton = ({ running, onClick }) => {
+  return /* @__PURE__ */ React4.createElement(IconButton, {
+    icon: running ? "ph--x--regular" : "ph--play--regular",
+    size: 6,
+    label: running ? "Stop" : "Play",
+    iconOnly: true,
+    noTooltip: true,
+    variant: "ghost",
+    classNames: "p-0",
+    onClick: () => onClick?.(!running)
+  });
+};
+
+// src/components/RevealPlayer/RevealPlayer.tsx
+import "reveal.js/dist/reveal.css";
+import "reveal.js/dist/theme/black.css";
+import "highlight.js/styles/tokyo-night-dark.css";
+import hljs from "highlight.js";
+import typescript from "highlight.js/lib/languages/typescript";
+import React5, { useRef } from "react";
+import Reveal from "reveal.js";
+import RevealHighlight from "reveal.js/plugin/highlight/highlight";
+import RevealMarkdown from "reveal.js/plugin/markdown/plugin.js";
+import { useAsyncEffect } from "@dxos/react-ui";
+import { composable as composable2, composableProps as composableProps2 } from "@dxos/ui-theme";
+var styles = `
+<style type="text/css">
+  .reveal h1 {
+    font-weight: 100;
+    font-size: 60px;
+    opacity: 0.5;
+  }
+  .reveal h2 {
+    font-weight: 100;
+    padding-top: 60px;
+    padding-left: 40px;
+    font-size: 48px;
+    opacity: 0.3;
+  }
+  .reveal h1, h2, p {
+    font-family: "Raleway", sans-serif;
+    text-align: left;
+    font-weight: 200;
+  }
+  .reveal ul {
+    font-family: "Raleway", sans-serif;
+    display: block;
+    list-style: "- ";
+  }
+  .reveal blockquote p {
+    text-align: center;
+    font-weight: 100;
+    padding: 32px;
+  }
+  .reveal pre {
+    margin-left: 0;
+  }
+  .reveal code {
+    font-size: 20px;
+    background: #111111;
+    color: #eeeeee;
+    max-height: unset !important;
+  }
+</style>
+`;
+var RevealPlayer = composable2(({ content, slide, fullscreen = true, onExit, children, ...props }, forwardedRef) => {
+  const deckDivRef = useRef(null);
+  const deckRef = useRef(null);
+  useAsyncEffect(async () => {
+    if (deckRef.current) {
+      return;
+    }
+    hljs.registerLanguage("typescript", typescript);
+    deckRef.current = new Reveal(deckDivRef.current, {
+      // view: 'scroll',
+      progress: false,
+      transition: "none",
+      slideNumber: false,
+      embedded: true,
+      // Disable autoplay to prevent errors in headless environments (e.g., CI).
+      autoPlayMedia: false,
+      // TODO(burdon): Speaker view requires server to serve popout window.
+      // https://revealjs.com/speaker-view
+      showNotes: false,
+      // width: 1600,
+      // height: 900,
+      margin: 0.1,
+      // center: false,
+      // minScale: 0.1,
+      // maxScale: 1.4,
+      // https://revealjs.com/markdown
+      // TODO(burdon): Requires server to serve popout window.
+      plugins: [
+        RevealMarkdown,
+        RevealHighlight
+      ],
+      // See https://marked.js.org/using_advanced#options
+      markdown: {
+        gfm: true,
+        smartypants: true,
+        highlight: (code, language) => {
+          if (language) {
+            return hljs.highlight(code, {
+              language
+            }).value;
+          }
+          return hljs.highlightAuto(code).value;
+        }
+      }
+    });
+    await deckRef.current.initialize();
+    if (slide !== void 0) {
+      deckRef.current.slide(slide < 0 ? deckRef.current?.getTotalSlides() + slide : slide - 1);
+    }
+    deckRef.current.addKeyBinding({
+      keyCode: 27,
+      key: "Escape",
+      description: "Exit full screen"
+    }, () => {
+      onExit?.();
+    });
+    return () => {
+      try {
+        if (deckRef.current) {
+          deckRef.current.destroy();
+          deckRef.current = null;
+        }
+      } catch {
+      }
+    };
+  });
+  return /* @__PURE__ */ React5.createElement("div", {
+    ...composableProps2(props, {
+      classNames: [
+        "dx-container grid place-items-center bg-black",
+        fullscreen && "absolute inset-0"
+      ]
+    }),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React5.createElement("div", {
+    role: "none",
+    className: "relative aspect-video h-full w-full h-auto max-h-full overflow-hidden"
+  }, /* @__PURE__ */ React5.createElement("div", {
+    ref: deckDivRef,
+    className: "absolute inset-0 reveal"
+  }, /* @__PURE__ */ React5.createElement("style", null, /* @__PURE__ */ React5.createElement("link", {
+    rel: "preconnect",
+    href: "https://fonts.googleapis.com"
+  }), /* @__PURE__ */ React5.createElement("link", {
+    rel: "preconnect",
+    href: "https://fonts.gstatic.com",
+    crossOrigin: ""
+  }), /* @__PURE__ */ React5.createElement("link", {
+    rel: "stylesheet",
+    href: "https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap"
+  })), /* @__PURE__ */ React5.createElement("div", {
+    className: "slides"
+  }, /* @__PURE__ */ React5.createElement("div", {
+    className: "text-center!"
+  }), /* @__PURE__ */ React5.createElement("section", {
+    "data-markdown": []
+  }, /* @__PURE__ */ React5.createElement("textarea", {
+    "data-template": true,
+    defaultValue: [
+      styles,
+      content
+    ].join("\n")
+  }))))));
+});
+
+// src/components/index.ts
+var PresenterSettings = lazy(() => import("./PresenterSettings-DZO2DC53.mjs"));
+
+// src/meta.ts
+import { trim } from "@dxos/util";
+var meta = {
+  id: "org.dxos.plugin.presenter",
+  name: "Presenter",
+  description: trim`
+    Transform markdown documents into interactive presentation slideshows.
+    Navigate between slides with keyboard controls and present content in full-screen mode.
+  `,
+  icon: "ph--presentation--regular",
+  iconHue: "indigo",
+  source: "https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-presenter"
+};
+
+// src/PresenterPlugin.tsx
+import { Plugin } from "@dxos/app-framework";
+import { AppPlugin } from "@dxos/app-toolkit";
+import { AppGraphBuilder, PresenterSettings as PresenterSettings2, ReactSurface } from "#capabilities";
+import { meta as meta3 } from "#meta";
 
 // src/translations.ts
+import { meta as meta2 } from "#meta";
 var translations = [
   {
     "en-US": {
-      [meta.id]: {
-        "plugin name": "Presenter",
-        "toggle presentation label": "Present",
-        "present collections label": "Present collections (experimental)"
+      [meta2.id]: {
+        "plugin.name": "Presenter",
+        "settings.title": "Presenter settings",
+        "toggle-presentation.label": "Present",
+        "present-collections.label": "Present collections (experimental)",
+        "present-collections.description": "Enable presenting collections of documents as a slideshow."
       }
     }
   }
 ];
 
 // src/PresenterPlugin.tsx
-var PresenterPlugin = () => definePlugin(meta, [
-  defineModule({
-    id: `${meta.id}/module/settings`,
-    activatesOn: Events.SetupSettings,
-    activate: PresenterSettings2
-  }),
-  defineModule({
-    id: `${meta.id}/module/translations`,
-    activatesOn: Events.SetupTranslations,
-    activate: () => contributes(Capabilities.Translations, translations)
-  }),
-  defineModule({
-    id: `${meta.id}/module/react-surface`,
-    activatesOn: Events.SetupReactSurface,
-    activate: ReactSurface
-  }),
-  defineModule({
-    id: `${meta.id}/module/app-graph-builder`,
-    activatesOn: Events.SetupAppGraph,
-    activate: AppGraphBuilder
-  })
-]);
+var PresenterPlugin = Plugin.define(meta3).pipe(AppPlugin.addAppGraphModule({
+  activate: AppGraphBuilder
+}), AppPlugin.addSettingsModule({
+  activate: PresenterSettings2
+}), AppPlugin.addSurfaceModule({
+  activate: ReactSurface
+}), AppPlugin.addTranslationsModule({
+  translations
+}), Plugin.make);
 export {
-  CollectionPresenterContainer,
-  DocumentPresenterContainer,
-  MarkdownSlide,
-  PRESENTER_PLUGIN,
+  Layout,
+  PageNumber,
+  Pager,
+  Panel,
   PresenterPlugin,
   PresenterSettings,
+  RevealPlayer,
+  Slide,
+  StartButton,
   meta
 };
 //# sourceMappingURL=index.mjs.map