@dxos/plugin-presenter 0.6.8-main.046e6cf

package/LICENSE

@@ -0,0 +1,8 @@
+MIT License 
+Copyright (c) 2022 DXOS
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# @dxos/plugin-presenter
+
+Plugin to enable stacks to be presented full-screen with presenter controls. Adds an additional Surface role called `presenter-slide` that plugins can provide in order to control their presentation in presenter mode.

package/dist/lib/browser/MarkdownSlide-RIKDY66R.mjs

@@ -0,0 +1,313 @@
+// packages/plugins/plugin-presenter/src/components/MarkdownSlide.tsx
+import React3 from "react";
+
+// packages/plugins/plugin-presenter/src/components/Markdown/Container.tsx
+import React, { useState } from "react";
+import { useResizeDetector } from "react-resize-detector";
+import { mx } from "@dxos/react-ui-theme";
+var Container = ({ 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", classNames)
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: mx("flex w-full h-full overflow-hidden 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})`
+  };
+};
+
+// packages/plugins/plugin-presenter/src/components/Markdown/Slide.tsx
+import { h } from "hastscript";
+import React2 from "react";
+import ReactMarkdown from "react-markdown";
+import addClasses from "rehype-add-classes";
+import highlight from "rehype-highlight";
+import remarkFrontmatter from "remark-frontmatter";
+import remarkParseFrontmatter from "remark-parse-frontmatter";
+import "highlight.js/styles/github.css";
+
+// packages/plugins/plugin-presenter/src/components/Markdown/theme.ts
+var theme = {
+  root: "bg-attention leading-relaxed font-mono",
+  padding: "px-40 py-16 gap-8",
+  nodes: {
+    h1: "text-[80px] fg-accent",
+    h2: "text-[60px] fg-accent",
+    h3: "text-[48px] fg-accent",
+    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-0 __border-l-[16px] surface-input p-4 __whitespace-pre-line",
+    code: "p-0 text-[40px]"
+  }
+};
+
+// packages/plugins/plugin-presenter/src/components/Markdown/Slide.tsx
+var Slide = ({ content = "", classes = theme.nodes }) => {
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("style", null, `
+.dark pre code.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 1em
+}
+.dark code.hljs {
+  padding: 3px 5px
+}
+/*!
+  Theme: GitHub Dark
+  Description: Dark theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Outdated base version: https://github.com/primer/github-syntax-dark
+  Current colors taken from GitHub's CSS
+*/
+.dark .hljs {
+  color: #c9d1d9;
+  background: #0d1117
+}
+.dark .hljs-doctag,
+.dark .hljs-keyword,
+.dark .hljs-meta .hljs-keyword,
+.dark .hljs-template-tag,
+.dark .hljs-template-variable,
+.dark .hljs-type,
+.dark .hljs-variable.language_ {
+  /* prettylights-syntax-keyword */
+  color: #ff7b72
+}
+.dark .hljs-title,
+.dark .hljs-title.class_,
+.dark .hljs-title.class_.inherited__,
+.dark .hljs-title.function_ {
+  /* prettylights-syntax-entity */
+  color: #d2a8ff
+}
+.dark .hljs-attr,
+.dark .hljs-attribute,
+.dark .hljs-literal,
+.dark .hljs-meta,
+.dark .hljs-number,
+.dark .hljs-operator,
+.dark .hljs-variable,
+.dark .hljs-selector-attr,
+.dark .hljs-selector-class,
+.dark .hljs-selector-id {
+  /* prettylights-syntax-constant */
+  color: #79c0ff
+}
+.dark .hljs-regexp,
+.dark .hljs-string,
+.dark .hljs-meta .hljs-string {
+  /* prettylights-syntax-string */
+  color: #a5d6ff
+}
+.dark .hljs-built_in,
+.dark .hljs-symbol {
+  /* prettylights-syntax-variable */
+  color: #ffa657
+}
+.dark .hljs-comment,
+.dark .hljs-code,
+.dark .hljs-formula {
+  /* prettylights-syntax-comment */
+  color: #8b949e
+}
+.dark .hljs-name,
+.dark .hljs-quote,
+.dark .hljs-selector-tag,
+.dark .hljs-selector-pseudo {
+  /* prettylights-syntax-entity-tag */
+  color: #7ee787
+}
+.dark .hljs-subst {
+  /* prettylights-syntax-storage-modifier-import */
+  color: #c9d1d9
+}
+.dark .hljs-section {
+  /* prettylights-syntax-markup-heading */
+  color: #1f6feb;
+  font-weight: bold
+}
+.dark .hljs-bullet {
+  /* prettylights-syntax-markup-list */
+  color: #f2cc60
+}
+.dark .hljs-emphasis {
+  /* prettylights-syntax-markup-italic */
+  color: #c9d1d9;
+  font-style: italic
+}
+.dark .hljs-strong {
+  /* prettylights-syntax-markup-bold */
+  color: #c9d1d9;
+  font-weight: bold
+}
+.dark .hljs-addition {
+  /* prettylights-syntax-markup-inserted */
+  color: #aff5b4;
+  background-color: #033a16
+}
+.dark .hljs-deletion {
+  /* prettylights-syntax-markup-deleted */
+  color: #ffdcd7;
+  background-color: #67060c
+}
+.dark .hljs-char.escape_,
+.dark .hljs-link,
+.dark .hljs-params,
+.dark .hljs-property,
+.dark .hljs-punctuation,
+.dark .hljs-tag {
+  /* purposely ignored */
+  
+}
+      `), /* @__PURE__ */ React2.createElement(ReactMarkdown, {
+    components,
+    // Markdown to HTML.
+    remarkPlugins: [
+      [
+        remarkFrontmatter,
+        "yaml"
+      ],
+      remarkParseFrontmatter
+    ],
+    // HTML processing.
+    rehypePlugins: [
+      highlight,
+      [
+        addClasses,
+        classes
+      ],
+      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: ImageWrapper
+};
+
+// packages/plugins/plugin-presenter/src/components/MarkdownSlide.tsx
+var MarkdownSlide = ({ document }) => {
+  const content = document.content?.content;
+  if (!content) {
+    return null;
+  }
+  return /* @__PURE__ */ React3.createElement(Container, null, /* @__PURE__ */ React3.createElement(Slide, {
+    content
+  }));
+};
+var MarkdownSlide_default = MarkdownSlide;
+export {
+  MarkdownSlide_default as default
+};
+//# sourceMappingURL=MarkdownSlide-RIKDY66R.mjs.map

package/dist/lib/browser/MarkdownSlide-RIKDY66R.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/MarkdownSlide.tsx", "../../../src/components/Markdown/Container.tsx", "../../../src/components/Markdown/Slide.tsx", "../../../src/components/Markdown/theme.ts"],
+  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { type FC } from 'react';\n\nimport { type DocumentType } from '@dxos/plugin-markdown/types';\n\nimport { Container, Slide } from './Markdown';\n\nconst MarkdownSlide: FC<{ document: DocumentType }> = ({ document }) => {\n  const content = document.content?.content;\n  if (!content) {\n    return null;\n  }\n\n  return (\n    <Container>\n      <Slide content={content} />\n    </Container>\n  );\n};\n\nexport default MarkdownSlide;\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { type PropsWithChildren, useState } from 'react';\nimport { useResizeDetector } from 'react-resize-detector';\n\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nexport type ContainerProps = ThemedClassName<PropsWithChildren<{}>>;\n\n/**\n * Scaled markdown container.\n */\nexport const Container = ({ children, classNames }: ContainerProps) => {\n  const [props, setProps] = useState({});\n  const {\n    ref: containerRef,\n    width,\n    height,\n  } = useResizeDetector({\n    refreshMode: 'debounce',\n    refreshRate: 200,\n    refreshOptions: {\n      leading: true,\n    },\n    onResize: ({ width, height }) => {\n      if (width && height) {\n        setProps(createLayoutProps({ width, height }));\n      }\n    },\n  });\n\n  // TODO(burdon): Reconcile highlight colors with markdown editor.\n  // https://www.npmjs.com/package/react-markdown\n  return (\n    <div ref={containerRef} className={mx('flex grow relative overflow-hidden bg-attention', classNames)}>\n      <div className={mx('flex w-full h-full overflow-hidden absolute')} style={props}>\n        {width && height && children}\n      </div>\n    </div>\n  );\n};\n\n/**\n * Compute CSS properties to transform DIV to be full screen.\n *\n * Display resolutions:\n * window.screen.{availWidth, availHeight}\n *          5K Studio       16.2-inch Macbook Pro\n * Max      5120 x 2880     3456 x 2234\n * Default  2560 x 1440     1728 x 1117 (Actual height 1080 - 37 pixel notch)\n * Aspect   1.77 (16/9)     1.54\n */\nconst createLayoutProps = ({ width, height }: { width: number; height: number }) => {\n  // Config.\n  const aspectRatio = 16 / 9;\n  const nominalWidth = 2560;\n  const nominalHeight = nominalWidth / aspectRatio;\n\n  // NOTE: Hack to detect full height on Macbook Pro due to notch.\n  // const macIntelNotch = 1117 - 1080;\n  // const fullscreen =\n  //   height === screen.availHeight ||\n  //   (window.navigator.platform === 'MacIntel' && height === screen.availHeight - macIntelNotch);\n\n  // If not fullscreen then make scale slightly smaller so there's a natural border.\n  // const scaleFactor = fullscreen ? 1 : 0.95;\n\n  // Compute scaling factor required.\n  const scale = Math.min(width / nominalWidth, height / nominalHeight);\n\n  return {\n    left: (width - nominalWidth) / 2,\n    top: (height - nominalHeight) / 2,\n    width: nominalWidth,\n    height: nominalHeight,\n    transform: `scale(${scale})`,\n  };\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { h } from 'hastscript';\nimport React from 'react';\nimport ReactMarkdown from 'react-markdown';\nimport addClasses from 'rehype-add-classes';\nimport highlight from 'rehype-highlight';\nimport remarkFrontmatter from 'remark-frontmatter';\nimport remarkParseFrontmatter from 'remark-parse-frontmatter';\n\nimport 'highlight.js/styles/github.css';\n\nimport { theme } from './theme';\n\nexport type SlideProps = {\n  content?: string;\n  classes?: { [selector: string]: string };\n};\n\nexport const Slide = ({ content = '', classes = theme.nodes }: SlideProps) => {\n  // TODO(thure): `rehype-highlight` ends up using `github.css` from `highlight.js`, but this does not appear to be\n  //  configurable. Find a way to remove the literal stylesheet here.\n  return (\n    <>\n      <style>{`\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/*!\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\n  Outdated base version: https://github.com/primer/github-syntax-dark\n  Current colors taken from GitHub's CSS\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  /* prettylights-syntax-keyword */\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  /* prettylights-syntax-entity */\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  /* prettylights-syntax-constant */\n  color: #79c0ff\n}\n.dark .hljs-regexp,\n.dark .hljs-string,\n.dark .hljs-meta .hljs-string {\n  /* prettylights-syntax-string */\n  color: #a5d6ff\n}\n.dark .hljs-built_in,\n.dark .hljs-symbol {\n  /* prettylights-syntax-variable */\n  color: #ffa657\n}\n.dark .hljs-comment,\n.dark .hljs-code,\n.dark .hljs-formula {\n  /* prettylights-syntax-comment */\n  color: #8b949e\n}\n.dark .hljs-name,\n.dark .hljs-quote,\n.dark .hljs-selector-tag,\n.dark .hljs-selector-pseudo {\n  /* prettylights-syntax-entity-tag */\n  color: #7ee787\n}\n.dark .hljs-subst {\n  /* prettylights-syntax-storage-modifier-import */\n  color: #c9d1d9\n}\n.dark .hljs-section {\n  /* prettylights-syntax-markup-heading */\n  color: #1f6feb;\n  font-weight: bold\n}\n.dark .hljs-bullet {\n  /* prettylights-syntax-markup-list */\n  color: #f2cc60\n}\n.dark .hljs-emphasis {\n  /* prettylights-syntax-markup-italic */\n  color: #c9d1d9;\n  font-style: italic\n}\n.dark .hljs-strong {\n  /* prettylights-syntax-markup-bold */\n  color: #c9d1d9;\n  font-weight: bold\n}\n.dark .hljs-addition {\n  /* prettylights-syntax-markup-inserted */\n  color: #aff5b4;\n  background-color: #033a16\n}\n.dark .hljs-deletion {\n  /* prettylights-syntax-markup-deleted */\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  \n}\n      `}</style>\n      <ReactMarkdown\n        components={components}\n        // Markdown to HTML.\n        remarkPlugins={[[remarkFrontmatter, 'yaml'], remarkParseFrontmatter as any]}\n        // HTML processing.\n        rehypePlugins={[highlight, [addClasses, classes], slideLayout]}\n      >\n        {content}\n      </ReactMarkdown>\n    </>\n  );\n};\n\n/**\n * Rehype plugin to format DOM based on frontmatter.\n * https://github.com/unifiedjs/unified#plugin\n * TODO(burdon): See tools/presenter: remarkPluginLayout\n *  E.g., layout image from front-matter.\n */\nconst slideLayout =\n  (options = {}) =>\n  (tree: any, file: any) => {\n    const {\n      data: { frontmatter = {} },\n    } = file;\n\n    let content = tree.children;\n    const { layout, image } = frontmatter;\n    if (image) {\n      const img = h('div', {\n        class: 'flex grow shrink-0 bg-cover bg-center bg-no-repeat',\n        style: {\n          backgroundImage: `url(${image})`,\n        },\n      });\n\n      switch (layout) {\n        case 'fullscreen': {\n          content = img;\n          break;\n        }\n\n        case 'columns': {\n          content = h('div', { class: 'flex grow grid grid-cols-2' }, [\n            h('div', { class: theme.padding }, [content]),\n            img,\n          ]);\n          break;\n        }\n\n        case 'rows': {\n          content = h('div', { class: 'flex grow flex-col' }, [\n            h('div', { class: theme.padding }, [content]),\n            h('div', { class: ['flex grow pt-0', theme.padding] }, [img]),\n          ]);\n          break;\n        }\n      }\n    } else {\n      content = h('div', { class: ['flex grow flex-col', theme.padding] }, [content]);\n    }\n\n    const root = h('div', { class: ['flex flex-col grow', theme.root] }, [content]);\n    tree.children = [root];\n  };\n\nconst ImageWrapper = ({ node, ...props }: { node: any }) => {\n  const { alt = '', src } = props as { alt: string; src: string };\n  return <img alt={alt} src={src} />;\n};\n\nconst components = { img: ImageWrapper };\n", "//\n// Copyright 2023 DXOS.org\n//\n\n// TODO(burdon): Create theme type and picker.\n\nexport const theme = {\n  root: 'bg-attention leading-relaxed font-mono',\n\n  padding: 'px-40 py-16 gap-8',\n\n  nodes: {\n    h1: 'text-[80px] fg-accent',\n    h2: 'text-[60px] fg-accent',\n    h3: 'text-[48px] fg-accent',\n\n    p: 'text-[48px]',\n\n    ul: 'my-[16px] ml-12 leading-relaxed list-disc',\n    ol: 'my-[16px] ml-24 leading-relaxed list-decimal',\n    li: 'pl-6 text-[48px]',\n\n    pre: 'w-full mx-0 my-[32px] p-0 __border-l-[16px] surface-input p-4 __whitespace-pre-line',\n    code: 'p-0 text-[40px]',\n  },\n};\n"],
+  "mappings": "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",
+  "names": ["React", "React", "useState", "useResizeDetector", "mx", "Container", "children", "classNames", "props", "setProps", "useState", "ref", "containerRef", "width", "height", "useResizeDetector", "refreshMode", "refreshRate", "refreshOptions", "leading", "onResize", "createLayoutProps", "div", "className", "mx", "style", "aspectRatio", "nominalWidth", "nominalHeight", "scale", "Math", "min", "left", "top", "transform", "h", "React", "ReactMarkdown", "addClasses", "highlight", "remarkFrontmatter", "remarkParseFrontmatter", "theme", "root", "padding", "nodes", "h1", "h2", "h3", "p", "ul", "ol", "li", "pre", "code", "Slide", "content", "classes", "theme", "nodes", "React", "style", "ReactMarkdown", "components", "remarkPlugins", "remarkFrontmatter", "remarkParseFrontmatter", "rehypePlugins", "highlight", "addClasses", "slideLayout", "options", "tree", "file", "data", "frontmatter", "children", "layout", "image", "img", "h", "class", "backgroundImage", "padding", "root", "ImageWrapper", "node", "props", "alt", "src", "MarkdownSlide", "document", "content", "React", "Container", "Slide"]
+}

package/dist/lib/browser/PresenterMain-J5Y5ND2S.mjs

@@ -0,0 +1,228 @@
+import {
+  PresenterContext,
+  TOGGLE_PRESENTATION
+} from "./chunk-KWRWOGSM.mjs";
+import {
+  PRESENTER_PLUGIN
+} from "./chunk-XDACGTXJ.mjs";
+
+// packages/plugins/plugin-presenter/src/components/PresenterMain.tsx
+import React3, { useContext, useState as useState2 } from "react";
+import { Surface, useIntentDispatcher, useResolvePlugin, parseLayoutPlugin, NavigationAction } from "@dxos/app-framework";
+import { fullyQualifiedId } from "@dxos/react-client/echo";
+import { Main } from "@dxos/react-ui";
+import { baseSurface, topbarBlockPaddingStart, fixedInsetFlexLayout, bottombarBlockPaddingEnd } from "@dxos/react-ui-theme";
+
+// packages/plugins/plugin-presenter/src/components/Presenter/Layout.tsx
+import React from "react";
+import { mx } from "@dxos/react-ui-theme";
+var Layout = ({ children, classNames, topLeft, topRight, bottomLeft, bottomRight }) => {
+  return /* @__PURE__ */ React.createElement("div", {
+    className: mx("flex grow relative overflow-hidden surface-attention", classNames)
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: mx("flex flex-col grow overflow-hidden")
+  }, children), /* @__PURE__ */ React.createElement("div", {
+    className: "z-[200]"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "absolute top-4 left-4"
+  }, topLeft), /* @__PURE__ */ React.createElement("div", {
+    className: "absolute top-4 right-4"
+  }, topRight), /* @__PURE__ */ React.createElement("div", {
+    className: "absolute bottom-4 left-4"
+  }, bottomLeft), /* @__PURE__ */ React.createElement("div", {
+    className: "absolute bottom-4 right-4"
+  }, bottomRight)));
+};
+
+// packages/plugins/plugin-presenter/src/components/Presenter/Pager.tsx
+import { Play, X, CaretDoubleLeft, CaretDoubleRight, CaretLeft, CaretRight } from "@phosphor-icons/react";
+import React2, { useEffect as useEffect2 } from "react";
+import { Button } from "@dxos/react-ui";
+import { getSize, mx as mx2 } from "@dxos/react-ui-theme";
+
+// packages/plugins/plugin-presenter/src/hooks/useControlledValue.ts
+import { useEffect, useState } from "react";
+var useControlledValue = (controlledValue) => {
+  const [value, setValue] = useState(controlledValue);
+  useEffect(() => {
+    setValue(controlledValue);
+  }, [
+    controlledValue
+  ]);
+  return [
+    value,
+    setValue
+  ];
+};
+
+// packages/plugins/plugin-presenter/src/components/Presenter/Pager.tsx
+var Pager = ({ index: controlledIndex = 0, count = 0, keys, onChange, onExit }) => {
+  const [index, setIndex] = useControlledValue(controlledIndex);
+  useEffect2(() => {
+    onChange?.(index);
+  }, [
+    index
+  ]);
+  const handleChangeIndex = (dir) => {
+    setIndex((index2) => {
+      const next = index2 + dir;
+      return next >= 0 && next < count ? next : index2;
+    });
+  };
+  useEffect2(() => {
+    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__ */ React2.createElement("div", {
+    className: "flex items-center text-neutral-500"
+  }, /* @__PURE__ */ React2.createElement(Button, {
+    variant: "ghost",
+    classNames: "p-0",
+    onClick: () => onChange?.(0)
+  }, /* @__PURE__ */ React2.createElement(CaretDoubleLeft, {
+    className: mx2(getSize(6))
+  })), /* @__PURE__ */ React2.createElement(Button, {
+    variant: "ghost",
+    classNames: "p-0",
+    onClick: () => handleChangeIndex(-1)
+  }, /* @__PURE__ */ React2.createElement(CaretLeft, {
+    className: mx2(getSize(6))
+  })), /* @__PURE__ */ React2.createElement(Button, {
+    variant: "ghost",
+    classNames: "p-0",
+    onClick: () => handleChangeIndex(1)
+  }, /* @__PURE__ */ React2.createElement(CaretRight, {
+    className: mx2(getSize(6))
+  })), /* @__PURE__ */ React2.createElement(Button, {
+    variant: "ghost",
+    classNames: "p-0",
+    onClick: () => onChange?.(count - 1)
+  }, /* @__PURE__ */ React2.createElement(CaretDoubleRight, {
+    className: mx2(getSize(6))
+  })));
+};
+var PageNumber = ({ index = 0, count = 1 }) => {
+  if (index === void 0 || !count) {
+    return null;
+  }
+  return /* @__PURE__ */ React2.createElement("div", {
+    className: "flex items-center text-neutral-500 text-2xl"
+  }, /* @__PURE__ */ React2.createElement("div", null, index + 1, " / ", count));
+};
+var StartButton = ({ running, onClick }) => {
+  return /* @__PURE__ */ React2.createElement(Button, {
+    variant: "ghost",
+    classNames: "p-0",
+    onClick: () => onClick?.(!running)
+  }, running && /* @__PURE__ */ React2.createElement(X, {
+    className: mx2(getSize(6))
+  }) || /* @__PURE__ */ React2.createElement(Play, {
+    className: mx2(getSize(6))
+  }));
+};
+
+// packages/plugins/plugin-presenter/src/components/PresenterMain.tsx
+var PresenterMain = ({ collection }) => {
+  const [slide, setSlide] = useState2(0);
+  const layoutPlugin = useResolvePlugin(parseLayoutPlugin);
+  const fullscreen = layoutPlugin?.provides.layout.layoutMode === "fullscreen";
+  const { running } = useContext(PresenterContext);
+  const dispatch = useIntentDispatcher();
+  const handleSetRunning = (running2) => {
+    void dispatch([
+      {
+        plugin: PRESENTER_PLUGIN,
+        action: TOGGLE_PRESENTATION,
+        data: {
+          state: running2
+        }
+      },
+      ...!running2 ? [
+        {
+          action: NavigationAction.CLOSE,
+          data: {
+            activeParts: {
+              fullScreen: fullyQualifiedId(collection)
+            }
+          }
+        }
+      ] : []
+    ]);
+  };
+  return /* @__PURE__ */ React3.createElement(Main.Content, {
+    classNames: [
+      baseSurface,
+      fixedInsetFlexLayout,
+      !fullscreen && topbarBlockPaddingStart,
+      !fullscreen && bottombarBlockPaddingEnd
+    ]
+  }, /* @__PURE__ */ React3.createElement(Layout, {
+    topRight: /* @__PURE__ */ React3.createElement(StartButton, {
+      running,
+      onClick: (running2) => handleSetRunning(running2)
+    }),
+    bottomRight: /* @__PURE__ */ React3.createElement(PageNumber, {
+      index: slide,
+      count: collection.objects.length
+    }),
+    bottomLeft: /* @__PURE__ */ React3.createElement(Pager, {
+      index: slide,
+      count: collection.objects.length,
+      keys: running,
+      onChange: setSlide,
+      onExit: () => handleSetRunning(false)
+    })
+  }, /* @__PURE__ */ React3.createElement(Surface, {
+    role: "slide",
+    data: {
+      slide: collection.objects[slide]
+    },
+    placeholder: /* @__PURE__ */ React3.createElement(React3.Fragment, null)
+  })));
+};
+var PresenterMain_default = PresenterMain;
+export {
+  PresenterMain_default as default
+};
+//# sourceMappingURL=PresenterMain-J5Y5ND2S.mjs.map

package/dist/lib/browser/PresenterMain-J5Y5ND2S.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/PresenterMain.tsx", "../../../src/components/Presenter/Layout.tsx", "../../../src/components/Presenter/Pager.tsx", "../../../src/hooks/useControlledValue.ts"],
+  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { type FC, useContext, useState } from 'react';\n\nimport {\n  Surface,\n  useIntentDispatcher,\n  useResolvePlugin,\n  parseLayoutPlugin,\n  NavigationAction,\n} from '@dxos/app-framework';\nimport { type CollectionType } from '@dxos/plugin-space/types';\nimport { fullyQualifiedId } from '@dxos/react-client/echo';\nimport { Main } from '@dxos/react-ui';\nimport {\n  baseSurface,\n  topbarBlockPaddingStart,\n  fixedInsetFlexLayout,\n  bottombarBlockPaddingEnd,\n} from '@dxos/react-ui-theme';\n\nimport { Layout, PageNumber, Pager, StartButton } from './Presenter';\nimport { PRESENTER_PLUGIN } from '../meta';\nimport { PresenterContext, TOGGLE_PRESENTATION } from '../types';\n\nconst PresenterMain: FC<{ collection: CollectionType }> = ({ collection }) => {\n  const [slide, setSlide] = useState(0);\n\n  // TODO(burdon): Should not depend on split screen.\n  const layoutPlugin = useResolvePlugin(parseLayoutPlugin);\n  const fullscreen = layoutPlugin?.provides.layout.layoutMode === 'fullscreen';\n  const { running } = useContext(PresenterContext);\n\n  // TODO(burdon): Currently conflates fullscreen and running.\n  const dispatch = useIntentDispatcher();\n  const handleSetRunning = (running: boolean) => {\n    void dispatch([\n      {\n        plugin: PRESENTER_PLUGIN,\n        action: TOGGLE_PRESENTATION,\n        data: { state: running },\n      },\n      ...(!running\n        ? [\n            {\n              action: NavigationAction.CLOSE,\n              data: { activeParts: { fullScreen: fullyQualifiedId(collection) } },\n            },\n          ]\n        : []),\n    ]);\n  };\n\n  return (\n    <Main.Content\n      classNames={[\n        baseSurface,\n        fixedInsetFlexLayout,\n        !fullscreen && topbarBlockPaddingStart,\n        !fullscreen && bottombarBlockPaddingEnd,\n      ]}\n    >\n      <Layout\n        topRight={<StartButton running={running} onClick={(running) => handleSetRunning(running)} />}\n        bottomRight={<PageNumber index={slide} count={collection.objects.length} />}\n        bottomLeft={\n          <Pager\n            index={slide}\n            count={collection.objects.length}\n            keys={running}\n            onChange={setSlide}\n            onExit={() => handleSetRunning(false)}\n          />\n        }\n      >\n        {/* TODO(wittjosiah): Better slide placeholder. */}\n        <Surface role='slide' data={{ slide: collection.objects[slide] }} placeholder={<></>} />\n      </Layout>\n    </Main.Content>\n  );\n};\n\nexport default PresenterMain;\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { type PropsWithChildren, type ReactNode } from 'react';\n\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nexport type LayoutProps = ThemedClassName<\n  PropsWithChildren<{\n    className?: string;\n    topLeft?: ReactNode;\n    topRight?: ReactNode;\n    bottomLeft?: ReactNode;\n    bottomRight?: ReactNode;\n  }>\n>;\n\nexport const Layout = ({ children, classNames, topLeft, topRight, bottomLeft, bottomRight }: LayoutProps) => {\n  return (\n    <div className={mx('flex grow relative overflow-hidden surface-attention', classNames)}>\n      <div className={mx('flex flex-col grow overflow-hidden')}>{children}</div>\n\n      <div className='z-[200]'>\n        <div className='absolute top-4 left-4'>{topLeft}</div>\n        <div className='absolute top-4 right-4'>{topRight}</div>\n        <div className='absolute bottom-4 left-4'>{bottomLeft}</div>\n        <div className='absolute bottom-4 right-4'>{bottomRight}</div>\n      </div>\n    </div>\n  );\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { Play, X, CaretDoubleLeft, CaretDoubleRight, CaretLeft, CaretRight } from '@phosphor-icons/react';\nimport React, { type FC, useEffect } from 'react';\n\nimport { Button } from '@dxos/react-ui';\nimport { getSize, mx } from '@dxos/react-ui-theme';\n\nimport { useControlledValue } from '../../hooks';\n\nexport type PagerProps = {\n  index?: number;\n  count?: number;\n  keys?: boolean; // TODO(burdon): Rename.\n  onChange?: (index: number) => void;\n  onExit?: () => void;\n};\n\nexport const Pager = ({ index: controlledIndex = 0, count = 0, keys, onChange, onExit }: PagerProps) => {\n  const [index, setIndex] = useControlledValue(controlledIndex);\n  useEffect(() => {\n    onChange?.(index);\n  }, [index]);\n\n  const handleChangeIndex = (dir: number) => {\n    setIndex((index) => {\n      const next = index + dir;\n      return next >= 0 && next < count ? next : index;\n    });\n  };\n\n  // TODO(burdon): Standardize via system key binding.\n  useEffect(() => {\n    if (!keys) {\n      return;\n    }\n\n    const keydownHandler = (event: KeyboardEvent) => {\n      switch (event.key) {\n        case 'Escape': {\n          onExit?.();\n          break;\n        }\n        case 'ArrowLeft': {\n          if (event.shiftKey) {\n            onChange?.(0);\n          } else {\n            handleChangeIndex(-1);\n          }\n          break;\n        }\n        case 'ArrowRight': {\n          if (event.shiftKey) {\n            onChange?.(count - 1);\n          } else {\n            handleChangeIndex(1);\n          }\n          break;\n        }\n        case 'ArrowUp': {\n          onChange?.(0);\n          break;\n        }\n        case 'ArrowDown': {\n          onChange?.(count - 1);\n          break;\n        }\n      }\n    };\n\n    window.addEventListener('keydown', keydownHandler);\n    return () => window.removeEventListener('keydown', keydownHandler);\n  }, [keys, count]);\n\n  if (index === undefined || !count) {\n    return null;\n  }\n\n  return (\n    <div className='flex items-center text-neutral-500'>\n      <Button variant='ghost' classNames='p-0' onClick={() => onChange?.(0)}>\n        <CaretDoubleLeft className={mx(getSize(6))} />\n      </Button>\n      <Button variant='ghost' classNames='p-0' onClick={() => handleChangeIndex(-1)}>\n        <CaretLeft className={mx(getSize(6))} />\n      </Button>\n      <Button variant='ghost' classNames='p-0' onClick={() => handleChangeIndex(1)}>\n        <CaretRight className={mx(getSize(6))} />\n      </Button>\n      <Button variant='ghost' classNames='p-0' onClick={() => onChange?.(count - 1)}>\n        <CaretDoubleRight className={mx(getSize(6))} />\n      </Button>\n    </div>\n  );\n};\n\nexport type PageNumberProps = {\n  index?: number;\n  count?: number;\n};\n\nexport const PageNumber = ({ index = 0, count = 1 }: PageNumberProps) => {\n  if (index === undefined || !count) {\n    return null;\n  }\n\n  return (\n    <div className='flex items-center text-neutral-500 text-2xl'>\n      <div>\n        {index + 1} / {count}\n      </div>\n    </div>\n  );\n};\n\nexport const StartButton: FC<{ running?: boolean; onClick?: (start: boolean) => void }> = ({ running, onClick }) => {\n  return (\n    <Button variant='ghost' classNames='p-0' onClick={() => onClick?.(!running)}>\n      {(running && <X className={mx(getSize(6))} />) || <Play className={mx(getSize(6))} />}\n    </Button>\n  );\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Dispatch, type SetStateAction, useEffect, useState } from 'react';\n\n// TODO(burdon): Factor out.\nexport const useControlledValue = <TValue>(controlledValue: TValue): [TValue, Dispatch<SetStateAction<TValue>>] => {\n  const [value, setValue] = useState<TValue>(controlledValue);\n  useEffect(() => {\n    setValue(controlledValue);\n  }, [controlledValue]);\n  return [value, setValue];\n};\n"],
+  "mappings": "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",
+  "names": ["React", "useContext", "useState", "Surface", "useIntentDispatcher", "useResolvePlugin", "parseLayoutPlugin", "NavigationAction", "fullyQualifiedId", "Main", "baseSurface", "topbarBlockPaddingStart", "fixedInsetFlexLayout", "bottombarBlockPaddingEnd", "React", "mx", "Layout", "children", "classNames", "topLeft", "topRight", "bottomLeft", "bottomRight", "div", "className", "mx", "Play", "X", "CaretDoubleLeft", "CaretDoubleRight", "CaretLeft", "CaretRight", "React", "useEffect", "Button", "getSize", "mx", "useEffect", "useState", "useControlledValue", "controlledValue", "value", "setValue", "useState", "useEffect", "Pager", "index", "controlledIndex", "count", "keys", "onChange", "onExit", "setIndex", "useControlledValue", "useEffect", "handleChangeIndex", "dir", "next", "keydownHandler", "event", "key", "shiftKey", "window", "addEventListener", "removeEventListener", "undefined", "React", "div", "className", "Button", "variant", "classNames", "onClick", "CaretDoubleLeft", "mx", "getSize", "CaretLeft", "CaretRight", "CaretDoubleRight", "PageNumber", "StartButton", "running", "X", "Play", "PresenterMain", "collection", "slide", "setSlide", "useState", "layoutPlugin", "useResolvePlugin", "parseLayoutPlugin", "fullscreen", "provides", "layout", "layoutMode", "running", "useContext", "PresenterContext", "dispatch", "useIntentDispatcher", "handleSetRunning", "plugin", "PRESENTER_PLUGIN", "action", "TOGGLE_PRESENTATION", "data", "state", "NavigationAction", "CLOSE", "activeParts", "fullScreen", "fullyQualifiedId", "React", "Main", "Content", "classNames", "baseSurface", "fixedInsetFlexLayout", "topbarBlockPaddingStart", "bottombarBlockPaddingEnd", "Layout", "topRight", "StartButton", "onClick", "bottomRight", "PageNumber", "index", "count", "objects", "length", "bottomLeft", "Pager", "keys", "onChange", "onExit", "Surface", "role", "placeholder"]
+}