@dxos/plugin-presenter 0.8.4-main.406dc2a → 0.8.4-main.422d1c7879

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (144) hide show
  1. package/dist/lib/browser/PresenterSettings-DZO2DC53.mjs +29 -0
  2. package/dist/lib/browser/PresenterSettings-DZO2DC53.mjs.map +7 -0
  3. package/dist/lib/browser/chunk-J5LGTIGS.mjs +10 -0
  4. package/dist/lib/browser/chunk-J5LGTIGS.mjs.map +7 -0
  5. package/dist/lib/browser/index.mjs +533 -46
  6. package/dist/lib/browser/index.mjs.map +4 -4
  7. package/dist/lib/browser/meta.json +1 -1
  8. package/dist/lib/browser/operations/index.mjs +30 -0
  9. package/dist/lib/browser/operations/index.mjs.map +7 -0
  10. package/dist/types/src/PresenterPlugin.d.ts +2 -1
  11. package/dist/types/src/PresenterPlugin.d.ts.map +1 -1
  12. package/dist/types/src/capabilities/app-graph-builder.d.ts +4 -2
  13. package/dist/types/src/capabilities/app-graph-builder.d.ts.map +1 -1
  14. package/dist/types/src/capabilities/index.d.ts +4 -3
  15. package/dist/types/src/capabilities/index.d.ts.map +1 -1
  16. package/dist/types/src/capabilities/react-surface.d.ts +3 -2
  17. package/dist/types/src/capabilities/react-surface.d.ts.map +1 -1
  18. package/dist/types/src/capabilities/settings.d.ts +5 -2
  19. package/dist/types/src/capabilities/settings.d.ts.map +1 -1
  20. package/dist/types/src/components/Markdown/Panel.d.ts +8 -0
  21. package/dist/types/src/components/Markdown/Panel.d.ts.map +1 -0
  22. package/dist/types/src/components/Markdown/{Container.stories.d.ts → Panel.stories.d.ts} +1 -1
  23. package/dist/types/src/components/Markdown/Panel.stories.d.ts.map +1 -0
  24. package/dist/types/src/components/Markdown/Slide.d.ts +1 -1
  25. package/dist/types/src/components/Markdown/Slide.d.ts.map +1 -1
  26. package/dist/types/src/components/Markdown/index.d.ts +1 -1
  27. package/dist/types/src/components/Markdown/index.d.ts.map +1 -1
  28. package/dist/types/src/components/Presenter/Layout.d.ts +5 -5
  29. package/dist/types/src/components/Presenter/Layout.d.ts.map +1 -1
  30. package/dist/types/src/components/Presenter/Pager.d.ts +1 -1
  31. package/dist/types/src/components/Presenter/Pager.d.ts.map +1 -1
  32. package/dist/types/src/components/PresenterSettings/PresenterSettings.d.ts +6 -0
  33. package/dist/types/src/components/PresenterSettings/PresenterSettings.d.ts.map +1 -0
  34. package/dist/types/src/components/PresenterSettings/PresenterSettings.stories.d.ts +25 -0
  35. package/dist/types/src/components/PresenterSettings/PresenterSettings.stories.d.ts.map +1 -0
  36. package/dist/types/src/components/PresenterSettings/index.d.ts +2 -0
  37. package/dist/types/src/components/PresenterSettings/index.d.ts.map +1 -0
  38. package/dist/types/src/components/RevealPlayer/RevealPlayer.d.ts +5 -4
  39. package/dist/types/src/components/RevealPlayer/RevealPlayer.d.ts.map +1 -1
  40. package/dist/types/src/components/RevealPlayer/RevealPlayer.stories.d.ts +8 -5
  41. package/dist/types/src/components/RevealPlayer/RevealPlayer.stories.d.ts.map +1 -1
  42. package/dist/types/src/components/index.d.ts +5 -27
  43. package/dist/types/src/components/index.d.ts.map +1 -1
  44. package/dist/types/src/containers/CollectionPresenterContainer/CollectionPresenterContainer.d.ts +6 -0
  45. package/dist/types/src/containers/CollectionPresenterContainer/CollectionPresenterContainer.d.ts.map +1 -0
  46. package/dist/types/src/containers/CollectionPresenterContainer/index.d.ts +2 -0
  47. package/dist/types/src/containers/CollectionPresenterContainer/index.d.ts.map +1 -0
  48. package/dist/types/src/{components/MarkdownSlide.d.ts → containers/DocumentPresenterContainer/DocumentPresenterContainer.d.ts} +2 -3
  49. package/dist/types/src/containers/DocumentPresenterContainer/DocumentPresenterContainer.d.ts.map +1 -0
  50. package/dist/types/src/containers/DocumentPresenterContainer/index.d.ts +2 -0
  51. package/dist/types/src/containers/DocumentPresenterContainer/index.d.ts.map +1 -0
  52. package/dist/types/src/containers/MarkdownSlide/MarkdownSlide.d.ts +8 -0
  53. package/dist/types/src/containers/MarkdownSlide/MarkdownSlide.d.ts.map +1 -0
  54. package/dist/types/src/containers/MarkdownSlide/index.d.ts +2 -0
  55. package/dist/types/src/containers/MarkdownSlide/index.d.ts.map +1 -0
  56. package/dist/types/src/containers/index.d.ts +5 -0
  57. package/dist/types/src/containers/index.d.ts.map +1 -0
  58. package/dist/types/src/meta.d.ts +2 -2
  59. package/dist/types/src/meta.d.ts.map +1 -1
  60. package/dist/types/src/operations/definitions.d.ts +17 -0
  61. package/dist/types/src/operations/definitions.d.ts.map +1 -0
  62. package/dist/types/src/operations/index.d.ts +2 -0
  63. package/dist/types/src/operations/index.d.ts.map +1 -0
  64. package/dist/types/src/translations.d.ts +6 -5
  65. package/dist/types/src/translations.d.ts.map +1 -1
  66. package/dist/types/src/types/Settings.d.ts +7 -0
  67. package/dist/types/src/types/Settings.d.ts.map +1 -0
  68. package/dist/types/src/types/index.d.ts +15 -0
  69. package/dist/types/src/types/index.d.ts.map +1 -0
  70. package/dist/types/src/useExitPresenter.d.ts +3 -4
  71. package/dist/types/src/useExitPresenter.d.ts.map +1 -1
  72. package/dist/types/tsconfig.tsbuildinfo +1 -1
  73. package/package.json +62 -42
  74. package/src/PresenterPlugin.tsx +12 -25
  75. package/src/capabilities/app-graph-builder.ts +91 -100
  76. package/src/capabilities/index.ts +4 -4
  77. package/src/capabilities/react-surface.tsx +58 -53
  78. package/src/capabilities/settings.ts +24 -12
  79. package/src/components/Markdown/{Container.stories.tsx → Panel.stories.tsx} +7 -7
  80. package/src/components/Markdown/{Container.tsx → Panel.tsx} +6 -6
  81. package/src/components/Markdown/Slide.stories.tsx +4 -4
  82. package/src/components/Markdown/Slide.tsx +2 -2
  83. package/src/components/Markdown/index.ts +1 -1
  84. package/src/components/Markdown/theme.ts +5 -5
  85. package/src/components/Presenter/Layout.tsx +24 -23
  86. package/src/components/Presenter/Pager.stories.tsx +2 -2
  87. package/src/components/Presenter/Pager.tsx +53 -18
  88. package/src/components/PresenterSettings/PresenterSettings.stories.tsx +31 -0
  89. package/src/components/PresenterSettings/PresenterSettings.tsx +32 -0
  90. package/src/components/PresenterSettings/index.ts +5 -0
  91. package/src/components/RevealPlayer/RevealPlayer.stories.tsx +3 -4
  92. package/src/components/RevealPlayer/RevealPlayer.tsx +104 -95
  93. package/src/components/index.ts +5 -5
  94. package/src/containers/CollectionPresenterContainer/CollectionPresenterContainer.tsx +50 -0
  95. package/src/containers/CollectionPresenterContainer/index.ts +5 -0
  96. package/src/containers/DocumentPresenterContainer/DocumentPresenterContainer.tsx +24 -0
  97. package/src/containers/DocumentPresenterContainer/index.ts +5 -0
  98. package/src/{components → containers/MarkdownSlide}/MarkdownSlide.tsx +9 -7
  99. package/src/containers/MarkdownSlide/index.ts +5 -0
  100. package/src/containers/index.ts +9 -0
  101. package/src/meta.ts +9 -4
  102. package/src/operations/definitions.ts +23 -0
  103. package/src/operations/index.ts +5 -0
  104. package/src/testing.ts +6 -6
  105. package/src/translations.ts +6 -5
  106. package/src/types/Settings.ts +15 -0
  107. package/src/types/index.ts +30 -0
  108. package/src/useExitPresenter.ts +26 -24
  109. package/dist/lib/browser/CollectionPresenterContainer-LPJILYRF.mjs +0 -191
  110. package/dist/lib/browser/CollectionPresenterContainer-LPJILYRF.mjs.map +0 -7
  111. package/dist/lib/browser/DocumentPresenterContainer-F42V4KAL.mjs +0 -183
  112. package/dist/lib/browser/DocumentPresenterContainer-F42V4KAL.mjs.map +0 -7
  113. package/dist/lib/browser/MarkdownSlide-BLVWTH3U.mjs +0 -223
  114. package/dist/lib/browser/MarkdownSlide-BLVWTH3U.mjs.map +0 -7
  115. package/dist/lib/browser/app-graph-builder-RLGABE65.mjs +0 -106
  116. package/dist/lib/browser/app-graph-builder-RLGABE65.mjs.map +0 -7
  117. package/dist/lib/browser/chunk-6ZM323ED.mjs +0 -13
  118. package/dist/lib/browser/chunk-6ZM323ED.mjs.map +0 -7
  119. package/dist/lib/browser/chunk-7DV6S5XB.mjs +0 -39
  120. package/dist/lib/browser/chunk-7DV6S5XB.mjs.map +0 -7
  121. package/dist/lib/browser/chunk-QTSOWA2K.mjs +0 -41
  122. package/dist/lib/browser/chunk-QTSOWA2K.mjs.map +0 -7
  123. package/dist/lib/browser/chunk-UVGTHJUO.mjs +0 -36
  124. package/dist/lib/browser/chunk-UVGTHJUO.mjs.map +0 -7
  125. package/dist/lib/browser/react-surface-P7YJFHF3.mjs +0 -57
  126. package/dist/lib/browser/react-surface-P7YJFHF3.mjs.map +0 -7
  127. package/dist/lib/browser/settings-7A4A2H6X.mjs +0 -22
  128. package/dist/lib/browser/settings-7A4A2H6X.mjs.map +0 -7
  129. package/dist/types/src/components/CollectionPresenterContainer.d.ts +0 -7
  130. package/dist/types/src/components/CollectionPresenterContainer.d.ts.map +0 -1
  131. package/dist/types/src/components/DocumentPresenterContainer.d.ts +0 -7
  132. package/dist/types/src/components/DocumentPresenterContainer.d.ts.map +0 -1
  133. package/dist/types/src/components/Markdown/Container.d.ts +0 -8
  134. package/dist/types/src/components/Markdown/Container.d.ts.map +0 -1
  135. package/dist/types/src/components/Markdown/Container.stories.d.ts.map +0 -1
  136. package/dist/types/src/components/MarkdownSlide.d.ts.map +0 -1
  137. package/dist/types/src/components/PresenterSettings.d.ts +0 -6
  138. package/dist/types/src/components/PresenterSettings.d.ts.map +0 -1
  139. package/dist/types/src/types.d.ts +0 -40
  140. package/dist/types/src/types.d.ts.map +0 -1
  141. package/src/components/CollectionPresenterContainer.tsx +0 -44
  142. package/src/components/DocumentPresenterContainer.tsx +0 -23
  143. package/src/components/PresenterSettings.tsx +0 -30
  144. package/src/types.ts +0 -46
@@ -0,0 +1,24 @@
1
+ //
2
+ // Copyright 2023 DXOS.org
3
+ //
4
+
5
+ import React, { type FC } from 'react';
6
+
7
+ import { type Markdown } from '@dxos/plugin-markdown/types';
8
+ import { Panel } from '@dxos/react-ui';
9
+
10
+ import { RevealPlayer } from '#components';
11
+
12
+ import { useExitPresenter } from '../../useExitPresenter';
13
+
14
+ export const DocumentPresenterContainer: FC<{ document: Markdown.Document }> = ({ document }) => {
15
+ const handleExit = useExitPresenter(document);
16
+
17
+ return (
18
+ <Panel.Root classNames='relative'>
19
+ <Panel.Content asChild>
20
+ <RevealPlayer content={document.content.target?.content ?? ''} onExit={handleExit} />
21
+ </Panel.Content>
22
+ </Panel.Root>
23
+ );
24
+ };
@@ -0,0 +1,5 @@
1
+ //
2
+ // Copyright 2023 DXOS.org
3
+ //
4
+
5
+ export { DocumentPresenterContainer as default } from './DocumentPresenterContainer';
@@ -2,23 +2,25 @@
2
2
  // Copyright 2023 DXOS.org
3
3
  //
4
4
 
5
- import React, { type FC } from 'react';
5
+ import React from 'react';
6
6
 
7
7
  import { type Markdown } from '@dxos/plugin-markdown/types';
8
8
 
9
- import { Container, Slide } from './Markdown';
9
+ import { Panel, Slide } from '#components';
10
10
 
11
- const MarkdownSlide: FC<{ document: Markdown.Document }> = ({ document }) => {
11
+ type MarkdownSlideProps = {
12
+ document: Markdown.Document;
13
+ };
14
+
15
+ export const MarkdownSlide = ({ document }: MarkdownSlideProps) => {
12
16
  const content = document.content.target?.content;
13
17
  if (!content) {
14
18
  return null;
15
19
  }
16
20
 
17
21
  return (
18
- <Container>
22
+ <Panel>
19
23
  <Slide content={content} />
20
- </Container>
24
+ </Panel>
21
25
  );
22
26
  };
23
-
24
- export default MarkdownSlide;
@@ -0,0 +1,5 @@
1
+ //
2
+ // Copyright 2023 DXOS.org
3
+ //
4
+
5
+ export { MarkdownSlide as default } from './MarkdownSlide';
@@ -0,0 +1,9 @@
1
+ //
2
+ // Copyright 2023 DXOS.org
3
+ //
4
+
5
+ import { type ComponentType, lazy } from 'react';
6
+
7
+ export const CollectionPresenterContainer: ComponentType<any> = lazy(() => import('./CollectionPresenterContainer'));
8
+ export const DocumentPresenterContainer: ComponentType<any> = lazy(() => import('./DocumentPresenterContainer'));
9
+ export const MarkdownSlide: ComponentType<any> = lazy(() => import('./MarkdownSlide'));
package/src/meta.ts CHANGED
@@ -2,12 +2,17 @@
2
2
  // Copyright 2023 DXOS.org
3
3
  //
4
4
 
5
- import { type PluginMeta } from '@dxos/app-framework';
5
+ import { type Plugin } from '@dxos/app-framework';
6
+ import { trim } from '@dxos/util';
6
7
 
7
- export const meta: PluginMeta = {
8
- id: 'dxos.org/plugin/presenter',
8
+ export const meta: Plugin.Meta = {
9
+ id: 'org.dxos.plugin.presenter',
9
10
  name: 'Presenter',
10
- description: 'Present documents as slideshows.',
11
+ description: trim`
12
+ Transform markdown documents into interactive presentation slideshows.
13
+ Navigate between slides with keyboard controls and present content in full-screen mode.
14
+ `,
11
15
  icon: 'ph--presentation--regular',
16
+ iconHue: 'indigo',
12
17
  source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-presenter',
13
18
  };
@@ -0,0 +1,23 @@
1
+ //
2
+ // Copyright 2025 DXOS.org
3
+ //
4
+
5
+ import * as Schema from 'effect/Schema';
6
+
7
+ import { Collection } from '@dxos/echo';
8
+ import { Operation } from '@dxos/operation';
9
+ import { Markdown } from '@dxos/plugin-markdown/types';
10
+
11
+ import { meta } from '#meta';
12
+
13
+ const PRESENTER_OPERATION = `${meta.id}.operation`;
14
+
15
+ // TODO(wittjosiah): This appears to be unused.
16
+ export const TogglePresentation = Operation.make({
17
+ meta: { key: `${PRESENTER_OPERATION}.toggle-presentation`, name: 'Toggle Presentation' },
18
+ input: Schema.Struct({
19
+ object: Schema.Union(Markdown.Document, Collection.Collection),
20
+ state: Schema.optional(Schema.Boolean),
21
+ }),
22
+ output: Schema.Void,
23
+ });
@@ -0,0 +1,5 @@
1
+ //
2
+ // Copyright 2025 DXOS.org
3
+ //
4
+
5
+ export * as PresenterOperation from './definitions';
package/src/testing.ts CHANGED
@@ -2,7 +2,7 @@
2
2
  // Copyright 2023 DXOS.org
3
3
  //
4
4
 
5
- import { faker } from '@dxos/random';
5
+ import { random } from '@dxos/random';
6
6
 
7
7
  type SlideOptions = {
8
8
  text?: string;
@@ -26,21 +26,21 @@ export const createSlide = (options: SlideOptions = {}) => {
26
26
 
27
27
  const list = (length = 3) =>
28
28
  Array.from({ length })
29
- .map(() => `- ${faker.lorem.sentence(3)}`)
29
+ .map(() => `- ${random.lorem.sentence(3)}`)
30
30
  .join('\n');
31
31
 
32
32
  const ordered = (length = 3) =>
33
33
  Array.from({ length })
34
- .map((_, i) => `${i + 1}. ${faker.lorem.sentence(3)}`)
34
+ .map((_, i) => `${i + 1}. ${random.lorem.sentence(3)}`)
35
35
  .join('\n');
36
36
 
37
37
  return [
38
- `# ${num}${faker.lorem.sentence(3)}`,
39
- options.text && faker.lorem.sentences(),
38
+ `# ${num}${random.lorem.sentence(3)}`,
39
+ options.text && random.lorem.sentences(),
40
40
  options.code && code(),
41
41
  options.list && list(options.list),
42
42
  options.ordered && ordered(options.ordered),
43
- faker.lorem.sentences(),
43
+ random.lorem.sentences(),
44
44
  ]
45
45
  .filter(Boolean)
46
46
  .join('\n\r');
@@ -4,16 +4,17 @@
4
4
 
5
5
  import { type Resource } from '@dxos/react-ui';
6
6
 
7
- import { meta } from './meta';
7
+ import { meta } from '#meta';
8
8
 
9
9
  export const translations = [
10
10
  {
11
11
  'en-US': {
12
12
  [meta.id]: {
13
- 'plugin name': 'Presenter',
14
- 'settings title': 'Presenter settings',
15
- 'toggle presentation label': 'Present',
16
- 'present collections label': 'Present collections (experimental)',
13
+ 'plugin.name': 'Presenter',
14
+ 'settings.title': 'Presenter settings',
15
+ 'toggle-presentation.label': 'Present',
16
+ 'present-collections.label': 'Present collections (experimental)',
17
+ 'present-collections.description': 'Enable presenting collections of documents as a slideshow.',
17
18
  },
18
19
  },
19
20
  },
@@ -0,0 +1,15 @@
1
+ //
2
+ // Copyright 2023 DXOS.org
3
+ //
4
+
5
+ // @import-as-namespace
6
+
7
+ import * as Schema from 'effect/Schema';
8
+
9
+ export const Settings = Schema.mutable(
10
+ Schema.Struct({
11
+ presentCollections: Schema.optional(Schema.Boolean),
12
+ }),
13
+ );
14
+
15
+ export interface Settings extends Schema.Schema.Type<typeof Settings> {}
@@ -0,0 +1,30 @@
1
+ //
2
+ // Copyright 2023 DXOS.org
3
+ //
4
+
5
+ import { type Atom } from '@effect-atom/atom-react';
6
+ import { type Context, createContext } from 'react';
7
+
8
+ import { Capability } from '@dxos/app-framework';
9
+
10
+ import { meta } from '#meta';
11
+
12
+ import * as Settings from './Settings';
13
+
14
+ export type PresenterContextType = {
15
+ running: boolean;
16
+ start: () => void;
17
+ stop: () => void;
18
+ };
19
+
20
+ export const PresenterContext: Context<PresenterContextType> = createContext<PresenterContextType>({
21
+ running: false,
22
+ start: () => {},
23
+ stop: () => {},
24
+ });
25
+
26
+ export * as Settings from './Settings';
27
+
28
+ export namespace PresenterCapabilities {
29
+ export const Settings = Capability.make<Atom.Writable<Settings.Settings>>(`${meta.id}.capability.settings`);
30
+ }
@@ -2,34 +2,36 @@
2
2
  // Copyright 2025 DXOS.org
3
3
  //
4
4
 
5
- import { useCallback } from 'react';
5
+ import { useAtomValue } from '@effect-atom/atom-react';
6
+ import { useCallback, useMemo } from 'react';
6
7
 
7
- import { LayoutAction, createIntent, useCapability, useIntentDispatcher } from '@dxos/app-framework';
8
- import { type Live } from '@dxos/live-object';
8
+ import { useCapability, useOperationInvoker } from '@dxos/app-framework/ui';
9
+ import { LayoutOperation, getObjectPathFromObject, getSpacePath } from '@dxos/app-toolkit';
10
+ import { Obj } from '@dxos/echo';
9
11
  import { DeckCapabilities } from '@dxos/plugin-deck';
10
- import { DeckAction } from '@dxos/plugin-deck/types';
11
- import { fullyQualifiedId, getSpace } from '@dxos/react-client/echo';
12
+ import { DeckOperation } from '@dxos/plugin-deck/operations';
12
13
 
13
- export const useExitPresenter = (object: Live<any>) => {
14
- const { dispatchPromise: dispatch } = useIntentDispatcher();
15
- const layout = useCapability(DeckCapabilities.MutableDeckState);
14
+ export const useExitPresenter = (object: any) => {
15
+ const { invokePromise } = useOperationInvoker();
16
+ const stateAtom = useCapability(DeckCapabilities.State);
17
+ const state = useAtomValue(stateAtom);
18
+
19
+ // Compute deck from decks[activeDeck] since the getter doesn't survive spread operations.
20
+ const deck = useMemo(() => state.decks[state.activeDeck], [state.decks, state.activeDeck]);
16
21
 
17
22
  return useCallback(() => {
18
- const objectId = fullyQualifiedId(object);
19
- if (layout.deck.fullscreen) {
20
- void dispatch(
21
- createIntent(DeckAction.Adjust, {
22
- type: 'solo--fullscreen',
23
- id: objectId,
24
- }),
25
- );
23
+ const objectPath = getObjectPathFromObject(object);
24
+ const db = Obj.getDatabase(object);
25
+ if (deck?.fullscreen) {
26
+ void invokePromise(DeckOperation.Adjust, {
27
+ type: 'solo--fullscreen' as const,
28
+ id: objectPath,
29
+ });
26
30
  }
27
- return dispatch(
28
- createIntent(LayoutAction.Open, {
29
- part: 'main',
30
- subject: [objectId],
31
- options: { workspace: getSpace(document)?.id },
32
- }),
33
- );
34
- }, [dispatch, object]);
31
+
32
+ return invokePromise(LayoutOperation.Open, {
33
+ subject: [objectPath],
34
+ workspace: db ? getSpacePath(db.spaceId) : undefined,
35
+ });
36
+ }, [invokePromise, object, deck]);
35
37
  };
@@ -1,191 +0,0 @@
1
- import {
2
- useExitPresenter
3
- } from "./chunk-UVGTHJUO.mjs";
4
- import {
5
- PresenterContext
6
- } from "./chunk-7DV6S5XB.mjs";
7
- import "./chunk-6ZM323ED.mjs";
8
-
9
- // src/components/CollectionPresenterContainer.tsx
10
- import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
11
- import React3, { useContext, useState } from "react";
12
- import { Surface } from "@dxos/app-framework";
13
- import { StackItem } from "@dxos/react-ui-stack";
14
-
15
- // src/components/Presenter/Layout.tsx
16
- import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
17
- import React from "react";
18
- import { mx } from "@dxos/react-ui-theme";
19
- var Layout = ({ children, classNames, topLeft, topRight, bottomLeft, bottomRight }) => {
20
- var _effect = _useSignals();
21
- try {
22
- return /* @__PURE__ */ React.createElement("div", {
23
- className: mx("flex grow relative overflow-hidden bg-attention", classNames)
24
- }, /* @__PURE__ */ React.createElement("div", {
25
- className: mx("flex flex-col grow overflow-hidden")
26
- }, children), /* @__PURE__ */ React.createElement("div", {
27
- className: "z-[200]"
28
- }, /* @__PURE__ */ React.createElement("div", {
29
- className: "absolute top-4 left-4"
30
- }, topLeft), /* @__PURE__ */ React.createElement("div", {
31
- className: "absolute top-4 right-4"
32
- }, topRight), /* @__PURE__ */ React.createElement("div", {
33
- className: "absolute bottom-4 left-4"
34
- }, bottomLeft), /* @__PURE__ */ React.createElement("div", {
35
- className: "absolute bottom-4 right-4"
36
- }, bottomRight)));
37
- } finally {
38
- _effect.f();
39
- }
40
- };
41
-
42
- // src/components/Presenter/Pager.tsx
43
- import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
44
- import React2, { useEffect } from "react";
45
- import { Button, Icon, useControlledState } from "@dxos/react-ui";
46
- var Pager = ({ index: indexParam = 0, count = 0, keys, onChange, onExit }) => {
47
- var _effect = _useSignals2();
48
- try {
49
- const [index, setIndex] = useControlledState(indexParam);
50
- useEffect(() => {
51
- onChange?.(index);
52
- }, [
53
- index
54
- ]);
55
- const handleChangeIndex = (dir) => {
56
- setIndex((index2) => {
57
- const next = index2 + dir;
58
- return next >= 0 && next < count ? next : index2;
59
- });
60
- };
61
- useEffect(() => {
62
- if (!keys) {
63
- return;
64
- }
65
- const keydownHandler = (event) => {
66
- switch (event.key) {
67
- case "Escape": {
68
- onExit?.();
69
- break;
70
- }
71
- case "ArrowLeft": {
72
- if (event.shiftKey) {
73
- onChange?.(0);
74
- } else {
75
- handleChangeIndex(-1);
76
- }
77
- break;
78
- }
79
- case "ArrowRight": {
80
- if (event.shiftKey) {
81
- onChange?.(count - 1);
82
- } else {
83
- handleChangeIndex(1);
84
- }
85
- break;
86
- }
87
- case "ArrowUp": {
88
- onChange?.(0);
89
- break;
90
- }
91
- case "ArrowDown": {
92
- onChange?.(count - 1);
93
- break;
94
- }
95
- }
96
- };
97
- window.addEventListener("keydown", keydownHandler);
98
- return () => window.removeEventListener("keydown", keydownHandler);
99
- }, [
100
- keys,
101
- count
102
- ]);
103
- if (index === void 0 || !count) {
104
- return null;
105
- }
106
- return /* @__PURE__ */ React2.createElement("div", {
107
- className: "flex items-center text-neutral-500"
108
- }, /* @__PURE__ */ React2.createElement(Button, {
109
- variant: "ghost",
110
- classNames: "p-0",
111
- onClick: () => onChange?.(0)
112
- }, /* @__PURE__ */ React2.createElement(Icon, {
113
- icon: "ph--caret-double-left--regular",
114
- size: 6
115
- })), /* @__PURE__ */ React2.createElement(Button, {
116
- variant: "ghost",
117
- classNames: "p-0",
118
- onClick: () => handleChangeIndex(-1)
119
- }, /* @__PURE__ */ React2.createElement(Icon, {
120
- icon: "ph--caret-left--regular",
121
- size: 6
122
- })), /* @__PURE__ */ React2.createElement(Button, {
123
- variant: "ghost",
124
- classNames: "p-0",
125
- onClick: () => handleChangeIndex(1)
126
- }, /* @__PURE__ */ React2.createElement(Icon, {
127
- icon: "ph--caret-right--regular",
128
- size: 6
129
- })), /* @__PURE__ */ React2.createElement(Button, {
130
- variant: "ghost",
131
- classNames: "p-0",
132
- onClick: () => onChange?.(count - 1)
133
- }, /* @__PURE__ */ React2.createElement(Icon, {
134
- icon: "ph--caret-double-right--regular",
135
- size: 6
136
- })));
137
- } finally {
138
- _effect.f();
139
- }
140
- };
141
- var PageNumber = ({ index = 0, count = 1 }) => {
142
- var _effect = _useSignals2();
143
- try {
144
- if (index === void 0 || !count) {
145
- return null;
146
- }
147
- return /* @__PURE__ */ React2.createElement("div", {
148
- className: "flex items-center text-neutral-500 text-2xl"
149
- }, /* @__PURE__ */ React2.createElement("div", null, index + 1, " / ", count));
150
- } finally {
151
- _effect.f();
152
- }
153
- };
154
-
155
- // src/components/CollectionPresenterContainer.tsx
156
- var CollectionPresenterContainer = ({ collection }) => {
157
- var _effect = _useSignals3();
158
- try {
159
- const [slide, setSlide] = useState(0);
160
- const { running } = useContext(PresenterContext);
161
- const handleExit = useExitPresenter(collection);
162
- return /* @__PURE__ */ React3.createElement(StackItem.Content, {
163
- classNames: "relative"
164
- }, /* @__PURE__ */ React3.createElement(Layout, {
165
- bottomRight: /* @__PURE__ */ React3.createElement(PageNumber, {
166
- index: slide,
167
- count: collection.objects.length
168
- }),
169
- bottomLeft: /* @__PURE__ */ React3.createElement(Pager, {
170
- index: slide,
171
- count: collection.objects.length,
172
- keys: running,
173
- onChange: setSlide,
174
- onExit: handleExit
175
- })
176
- }, /* @__PURE__ */ React3.createElement(Surface, {
177
- role: "slide",
178
- data: {
179
- subject: collection.objects[slide]
180
- },
181
- placeholder: /* @__PURE__ */ React3.createElement(React3.Fragment, null)
182
- })));
183
- } finally {
184
- _effect.f();
185
- }
186
- };
187
- var CollectionPresenterContainer_default = CollectionPresenterContainer;
188
- export {
189
- CollectionPresenterContainer_default as default
190
- };
191
- //# sourceMappingURL=CollectionPresenterContainer-LPJILYRF.mjs.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../src/components/CollectionPresenterContainer.tsx", "../../../src/components/Presenter/Layout.tsx", "../../../src/components/Presenter/Pager.tsx"],
4
- "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { type FC, useContext, useState } from 'react';\n\nimport { Surface } from '@dxos/app-framework';\nimport { StackItem } from '@dxos/react-ui-stack';\nimport { type DataType } from '@dxos/schema';\n\nimport { PresenterContext } from '../types';\nimport { useExitPresenter } from '../useExitPresenter';\n\nimport { Layout, PageNumber, Pager } from './Presenter';\n\nconst CollectionPresenterContainer: FC<{ collection: DataType.Collection }> = ({ collection }) => {\n const [slide, setSlide] = useState(0);\n\n const { running } = useContext(PresenterContext);\n\n const handleExit = useExitPresenter(collection);\n\n return (\n <StackItem.Content classNames='relative'>\n <Layout\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={handleExit}\n />\n }\n >\n {/* TODO(wittjosiah): Better slide placeholder. */}\n <Surface role='slide' data={{ subject: collection.objects[slide] }} placeholder={<></>} />\n </Layout>\n </StackItem.Content>\n );\n};\n\nexport default CollectionPresenterContainer;\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 bg-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 React, { useEffect } from 'react';\n\nimport { Button, Icon, useControlledState } from '@dxos/react-ui';\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: indexParam = 0, count = 0, keys, onChange, onExit }: PagerProps) => {\n const [index, setIndex] = useControlledState(indexParam);\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 <Icon icon='ph--caret-double-left--regular' size={6} />\n </Button>\n <Button variant='ghost' classNames='p-0' onClick={() => handleChangeIndex(-1)}>\n <Icon icon='ph--caret-left--regular' size={6} />\n </Button>\n <Button variant='ghost' classNames='p-0' onClick={() => handleChangeIndex(1)}>\n <Icon icon='ph--caret-right--regular' size={6} />\n </Button>\n <Button variant='ghost' classNames='p-0' onClick={() => onChange?.(count - 1)}>\n <Icon icon='ph--caret-double-right--regular' size={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 = ({ running, onClick }: { running?: boolean; onClick?: (start: boolean) => void }) => {\n return (\n <Button variant='ghost' classNames='p-0' onClick={() => onClick?.(!running)}>\n {(running && <Icon icon='ph--x--regular' size={6} />) || <Icon icon='ph--play--regular' size={6} />}\n </Button>\n );\n};\n"],
5
- "mappings": "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",
6
- "names": ["React", "useContext", "useState", "Surface", "StackItem", "React", "mx", "Layout", "children", "classNames", "topLeft", "topRight", "bottomLeft", "bottomRight", "div", "className", "mx", "React", "useEffect", "Button", "Icon", "useControlledState", "Pager", "index", "indexParam", "count", "keys", "onChange", "onExit", "setIndex", "useControlledState", "useEffect", "handleChangeIndex", "dir", "next", "keydownHandler", "event", "key", "shiftKey", "window", "addEventListener", "removeEventListener", "undefined", "React", "div", "className", "Button", "variant", "classNames", "onClick", "Icon", "icon", "size", "PageNumber", "CollectionPresenterContainer", "collection", "slide", "setSlide", "useState", "running", "useContext", "PresenterContext", "handleExit", "useExitPresenter", "React", "StackItem", "Content", "classNames", "Layout", "bottomRight", "PageNumber", "index", "count", "objects", "length", "bottomLeft", "Pager", "keys", "onChange", "onExit", "Surface", "role", "data", "subject", "placeholder"]
7
- }