@dxos/plugin-deck 0.8.2-main.f11618f → 0.8.2-staging.7ac8446
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.
- package/dist/lib/browser/{check-app-scheme-O7JPE4TM.mjs → check-app-scheme-SEYECDHI.mjs} +3 -2
- package/dist/lib/browser/check-app-scheme-SEYECDHI.mjs.map +7 -0
- package/dist/lib/browser/{chunk-6HJZL3WT.mjs → chunk-6ZSOFCPP.mjs} +7 -8
- package/dist/lib/browser/{chunk-6HJZL3WT.mjs.map → chunk-6ZSOFCPP.mjs.map} +3 -3
- package/dist/lib/browser/chunk-B4LOJUWW.mjs +24 -0
- package/dist/lib/browser/{chunk-RBJ6DLAC.mjs.map → chunk-B4LOJUWW.mjs.map} +3 -3
- package/dist/lib/browser/{chunk-RDFJGGGX.mjs → chunk-FJBMNSUC.mjs} +162 -207
- package/dist/lib/browser/chunk-FJBMNSUC.mjs.map +7 -0
- package/dist/lib/browser/{chunk-ZMJMCN7O.mjs → chunk-RJNCG4ND.mjs} +6 -9
- package/dist/lib/browser/chunk-RJNCG4ND.mjs.map +7 -0
- package/dist/lib/browser/index.mjs +3 -5
- package/dist/lib/browser/index.mjs.map +2 -2
- package/dist/lib/browser/{intent-resolver-JKWXWUV6.mjs → intent-resolver-UDYKO2QW.mjs} +34 -59
- package/dist/lib/browser/intent-resolver-UDYKO2QW.mjs.map +7 -0
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/browser/{react-root-S6ZAKNZA.mjs → react-root-XLXN2VEW.mjs} +5 -5
- package/dist/lib/browser/{react-surface-I7WZBOGM.mjs → react-surface-WNGMZL7I.mjs} +5 -5
- package/dist/lib/browser/{settings-6NU7CF2B.mjs → settings-HMDGSBGO.mjs} +4 -4
- package/dist/lib/browser/settings-HMDGSBGO.mjs.map +7 -0
- package/dist/lib/browser/{state-Z6UY2Z3M.mjs → state-7TN26M42.mjs} +5 -6
- package/dist/lib/browser/state-7TN26M42.mjs.map +7 -0
- package/dist/lib/browser/{tools-VDVQTJMD.mjs → tools-SC6QEN7R.mjs} +2 -2
- package/dist/lib/browser/types.mjs +1 -1
- package/dist/lib/browser/{url-handler-3CARFXQK.mjs → url-handler-ODG4B6NX.mjs} +2 -2
- package/dist/types/src/capabilities/capabilities.d.ts +6 -8
- package/dist/types/src/capabilities/capabilities.d.ts.map +1 -1
- package/dist/types/src/capabilities/check-app-scheme.d.ts.map +1 -1
- package/dist/types/src/capabilities/index.d.ts +2 -2
- package/dist/types/src/capabilities/index.d.ts.map +1 -1
- package/dist/types/src/capabilities/intent-resolver.d.ts.map +1 -1
- package/dist/types/src/capabilities/state.d.ts +4 -5
- package/dist/types/src/capabilities/state.d.ts.map +1 -1
- package/dist/types/src/components/DeckLayout/ContentEmpty.d.ts.map +1 -1
- package/dist/types/src/components/DeckLayout/DeckLayout.d.ts.map +1 -1
- package/dist/types/src/components/DeckLayout/Fullscreen.d.ts +5 -0
- package/dist/types/src/components/DeckLayout/Fullscreen.d.ts.map +1 -0
- package/dist/types/src/components/Plank/Plank.d.ts.map +1 -1
- package/dist/types/src/components/Plank/PlankControls.d.ts +2 -2
- package/dist/types/src/components/Plank/PlankControls.d.ts.map +1 -1
- package/dist/types/src/components/Plank/PlankError.d.ts.map +1 -1
- package/dist/types/src/components/Plank/PlankHeading.d.ts +2 -3
- package/dist/types/src/components/Plank/PlankHeading.d.ts.map +1 -1
- package/dist/types/src/components/Sidebar/ComplementarySidebar.d.ts.map +1 -1
- package/dist/types/src/components/Sidebar/Sidebar.d.ts.map +1 -1
- package/dist/types/src/translations.d.ts +0 -2
- package/dist/types/src/translations.d.ts.map +1 -1
- package/dist/types/src/types.d.ts +9 -11
- package/dist/types/src/types.d.ts.map +1 -1
- package/dist/types/src/util/layoutAppliesTopbar.d.ts +1 -2
- package/dist/types/src/util/layoutAppliesTopbar.d.ts.map +1 -1
- package/dist/types/src/util/useHoistStatusbar.d.ts +1 -2
- package/dist/types/src/util/useHoistStatusbar.d.ts.map +1 -1
- package/package.json +28 -29
- package/src/capabilities/check-app-scheme.ts +5 -3
- package/src/capabilities/index.ts +2 -2
- package/src/capabilities/intent-resolver.ts +65 -89
- package/src/capabilities/settings.ts +2 -2
- package/src/capabilities/state.ts +2 -3
- package/src/components/DeckLayout/ContentEmpty.tsx +2 -6
- package/src/components/DeckLayout/DeckLayout.tsx +181 -114
- package/src/components/DeckLayout/Fullscreen.tsx +31 -0
- package/src/components/Plank/Plank.tsx +3 -6
- package/src/components/Plank/PlankControls.tsx +34 -40
- package/src/components/Plank/PlankError.tsx +6 -2
- package/src/components/Plank/PlankHeading.tsx +5 -12
- package/src/components/Sidebar/ComplementarySidebar.tsx +20 -30
- package/src/components/Sidebar/Sidebar.tsx +3 -5
- package/src/translations.ts +0 -2
- package/src/types.ts +6 -9
- package/src/util/layoutAppliesTopbar.ts +2 -8
- package/src/util/useHoistStatusbar.ts +4 -9
- package/dist/lib/browser/check-app-scheme-O7JPE4TM.mjs.map +0 -7
- package/dist/lib/browser/chunk-RBJ6DLAC.mjs +0 -24
- package/dist/lib/browser/chunk-RDFJGGGX.mjs.map +0 -7
- package/dist/lib/browser/chunk-ZMJMCN7O.mjs.map +0 -7
- package/dist/lib/browser/intent-resolver-JKWXWUV6.mjs.map +0 -7
- package/dist/lib/browser/settings-6NU7CF2B.mjs.map +0 -7
- package/dist/lib/browser/state-Z6UY2Z3M.mjs.map +0 -7
- package/dist/types/src/components/DeckLayout/Dialog.d.ts +0 -3
- package/dist/types/src/components/DeckLayout/Dialog.d.ts.map +0 -1
- package/dist/types/src/components/DeckLayout/Popover.d.ts +0 -5
- package/dist/types/src/components/DeckLayout/Popover.d.ts.map +0 -1
- package/src/components/DeckLayout/Dialog.tsx +0 -36
- package/src/components/DeckLayout/Popover.tsx +0 -104
- /package/dist/lib/browser/{react-root-S6ZAKNZA.mjs.map → react-root-XLXN2VEW.mjs.map} +0 -0
- /package/dist/lib/browser/{react-surface-I7WZBOGM.mjs.map → react-surface-WNGMZL7I.mjs.map} +0 -0
- /package/dist/lib/browser/{tools-VDVQTJMD.mjs.map → tools-SC6QEN7R.mjs.map} +0 -0
- /package/dist/lib/browser/{url-handler-3CARFXQK.mjs.map → url-handler-ODG4B6NX.mjs.map} +0 -0
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2024 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
import React from 'react';
|
|
6
|
+
|
|
7
|
+
import { Surface, useAppGraph } from '@dxos/app-framework';
|
|
8
|
+
import { useNode } from '@dxos/plugin-graph';
|
|
9
|
+
import { fixedInsetFlexLayout } from '@dxos/react-ui-theme';
|
|
10
|
+
|
|
11
|
+
import { Fallback } from './Fallback';
|
|
12
|
+
import { SURFACE_PREFIX } from './constants';
|
|
13
|
+
|
|
14
|
+
export const Fullscreen = ({ id }: { id?: string }) => {
|
|
15
|
+
const { graph } = useAppGraph();
|
|
16
|
+
const fullScreenNode = useNode(graph, id);
|
|
17
|
+
|
|
18
|
+
return (
|
|
19
|
+
<div role='none' className={fixedInsetFlexLayout}>
|
|
20
|
+
<Surface
|
|
21
|
+
role='main'
|
|
22
|
+
limit={1}
|
|
23
|
+
fallback={Fallback}
|
|
24
|
+
data={{
|
|
25
|
+
subject: fullScreenNode?.data,
|
|
26
|
+
component: id?.startsWith(SURFACE_PREFIX) ? id.slice(SURFACE_PREFIX.length) : undefined,
|
|
27
|
+
}}
|
|
28
|
+
/>
|
|
29
|
+
</div>
|
|
30
|
+
);
|
|
31
|
+
};
|
|
@@ -101,9 +101,9 @@ const PlankImpl = memo(
|
|
|
101
101
|
}
|
|
102
102
|
}, [id, scrollIntoView, layoutMode]);
|
|
103
103
|
|
|
104
|
-
const isSolo = layoutMode
|
|
104
|
+
const isSolo = layoutMode === 'solo' && part === 'solo';
|
|
105
105
|
const isAttendable =
|
|
106
|
-
(layoutMode
|
|
106
|
+
(layoutMode === 'solo' && part.startsWith('solo')) || (layoutMode === 'deck' && part === 'deck');
|
|
107
107
|
|
|
108
108
|
const sizeAttrs = useMainSize();
|
|
109
109
|
|
|
@@ -116,7 +116,7 @@ const PlankImpl = memo(
|
|
|
116
116
|
path,
|
|
117
117
|
popoverAnchorId,
|
|
118
118
|
},
|
|
119
|
-
[node, node?.data, path, popoverAnchorId, primary?.data
|
|
119
|
+
[node, node?.data, path, popoverAnchorId, primary?.data],
|
|
120
120
|
);
|
|
121
121
|
|
|
122
122
|
// TODO(wittjosiah): Change prop to accept a component.
|
|
@@ -131,8 +131,6 @@ const PlankImpl = memo(
|
|
|
131
131
|
part === 'deck' && (companioned === 'companion' ? '!border-separator border-ie' : '!border-separator border-li'),
|
|
132
132
|
part.startsWith('solo-') && 'row-span-2 grid-rows-subgrid min-is-0',
|
|
133
133
|
part === 'solo-companion' && '!border-separator border-is',
|
|
134
|
-
layoutMode === 'solo--fullscreen' &&
|
|
135
|
-
'!transition-[margin-block-start,inline-size] -mbs-[--rail-action] has-[[data-plank-heading]:hover]:mbs-0',
|
|
136
134
|
);
|
|
137
135
|
|
|
138
136
|
return (
|
|
@@ -159,7 +157,6 @@ const PlankImpl = memo(
|
|
|
159
157
|
id={id}
|
|
160
158
|
part={part.startsWith('solo-') ? 'solo' : part}
|
|
161
159
|
node={node}
|
|
162
|
-
layoutMode={layoutMode}
|
|
163
160
|
deckEnabled={settings?.enableDeck}
|
|
164
161
|
canIncrementStart={canIncrementStart}
|
|
165
162
|
canIncrementEnd={canIncrementEnd}
|
|
@@ -17,7 +17,7 @@ import {
|
|
|
17
17
|
} from '@dxos/react-ui';
|
|
18
18
|
|
|
19
19
|
import { DECK_PLUGIN } from '../../meta';
|
|
20
|
-
import { DeckAction
|
|
20
|
+
import { DeckAction } from '../../types';
|
|
21
21
|
|
|
22
22
|
export type PlankControlHandler = (event: DeckAction.PartAdjustment) => void;
|
|
23
23
|
|
|
@@ -34,7 +34,7 @@ export type PlankControlsProps = Omit<ButtonGroupProps, 'onClick'> & {
|
|
|
34
34
|
variant?: 'hide-disabled' | 'default';
|
|
35
35
|
close?: boolean | 'minify-start' | 'minify-end';
|
|
36
36
|
capabilities: PlankCapabilities;
|
|
37
|
-
|
|
37
|
+
isSolo?: boolean;
|
|
38
38
|
pin?: 'start' | 'end' | 'both';
|
|
39
39
|
};
|
|
40
40
|
|
|
@@ -73,7 +73,8 @@ export const PlankCompanionControls = forwardRef<HTMLDivElement, PlankCompliment
|
|
|
73
73
|
<PlankControl
|
|
74
74
|
label={t('close companion label')}
|
|
75
75
|
variant='ghost'
|
|
76
|
-
icon='ph--
|
|
76
|
+
// icon='ph--minus--regular'
|
|
77
|
+
icon='ph--caret-left--regular'
|
|
77
78
|
onClick={handleCloseCompanion}
|
|
78
79
|
classNames={plankControlSpacing}
|
|
79
80
|
/>
|
|
@@ -87,51 +88,35 @@ export const PlankCompanionControls = forwardRef<HTMLDivElement, PlankCompliment
|
|
|
87
88
|
// NOTE(thure): Pinning & unpinning are disabled indefinitely.
|
|
88
89
|
export const PlankControls = forwardRef<HTMLDivElement, PlankControlsProps>(
|
|
89
90
|
(
|
|
90
|
-
{ children, classNames, variant = 'default', capabilities,
|
|
91
|
+
{ children, classNames, variant = 'default', capabilities, isSolo, pin, close = false, onClick, ...props },
|
|
91
92
|
forwardedRef,
|
|
92
93
|
) => {
|
|
93
94
|
const { t } = useTranslation(DECK_PLUGIN);
|
|
94
95
|
const buttonClassNames =
|
|
95
96
|
variant === 'hide-disabled' ? `disabled:hidden ${plankControlSpacing}` : plankControlSpacing;
|
|
96
97
|
|
|
97
|
-
const layoutIsAnySolo = !!layoutMode?.startsWith('solo');
|
|
98
|
-
|
|
99
98
|
return (
|
|
100
99
|
<ButtonGroup {...props} classNames={['app-no-drag', classNames]} ref={forwardedRef}>
|
|
101
|
-
{
|
|
102
|
-
|
|
103
|
-
{
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
onClick={() => onClick?.('solo--fullscreen')}
|
|
111
|
-
/>
|
|
112
|
-
)}
|
|
113
|
-
<PlankControl
|
|
114
|
-
label={t(
|
|
115
|
-
layoutMode === 'solo--fullscreen'
|
|
116
|
-
? 'exit fullscreen label'
|
|
117
|
-
: layoutIsAnySolo
|
|
118
|
-
? 'show deck plank label'
|
|
119
|
-
: 'show solo plank label',
|
|
120
|
-
)}
|
|
121
|
-
classNames={buttonClassNames}
|
|
122
|
-
icon={
|
|
123
|
-
layoutMode === 'solo--fullscreen'
|
|
124
|
-
? 'ph--corners-in--regular'
|
|
125
|
-
: layoutIsAnySolo
|
|
126
|
-
? 'ph--arrows-in-line-horizontal--regular'
|
|
127
|
-
: 'ph--arrows-out-line-horizontal--regular'
|
|
128
|
-
}
|
|
129
|
-
onClick={() => onClick?.(layoutMode === 'solo--fullscreen' ? 'solo--fullscreen' : 'solo')}
|
|
130
|
-
/>
|
|
131
|
-
</>
|
|
132
|
-
)}
|
|
100
|
+
{/* {pin && !isSolo && ['both', 'start'].includes(pin) && (
|
|
101
|
+
<PlankControl
|
|
102
|
+
label={t('pin start label')}
|
|
103
|
+
variant='ghost'
|
|
104
|
+
classNames={buttonClassNames}
|
|
105
|
+
onClick={() => onClick?.('pin-start')}
|
|
106
|
+
icon='ph--caret-line-left--regular'
|
|
107
|
+
/>
|
|
108
|
+
)} */}
|
|
133
109
|
|
|
134
|
-
|
|
110
|
+
{capabilities.deck && capabilities.solo && (
|
|
111
|
+
<>
|
|
112
|
+
<PlankControl
|
|
113
|
+
label={isSolo ? t('show deck plank label') : t('show solo plank label')}
|
|
114
|
+
classNames={buttonClassNames}
|
|
115
|
+
icon={isSolo ? 'ph--corners-in--regular' : 'ph--corners-out--regular'}
|
|
116
|
+
onClick={() => onClick?.('solo')}
|
|
117
|
+
/>
|
|
118
|
+
|
|
119
|
+
{!isSolo && (
|
|
135
120
|
<>
|
|
136
121
|
<PlankControl
|
|
137
122
|
label={t('increment start label')}
|
|
@@ -152,7 +137,16 @@ export const PlankControls = forwardRef<HTMLDivElement, PlankControlsProps>(
|
|
|
152
137
|
</>
|
|
153
138
|
)}
|
|
154
139
|
|
|
155
|
-
{
|
|
140
|
+
{/* {pin && !isSolo && ['both', 'end'].includes(pin) && (
|
|
141
|
+
<PlankControl
|
|
142
|
+
label={t('pin end label')}
|
|
143
|
+
classNames={buttonClassNames}
|
|
144
|
+
icon='ph--caret-line-right--regular'
|
|
145
|
+
onClick={() => onClick?.('pin-end')}
|
|
146
|
+
/>
|
|
147
|
+
)} */}
|
|
148
|
+
|
|
149
|
+
{close && !isSolo && (
|
|
156
150
|
<PlankControl
|
|
157
151
|
label={t(`${typeof close === 'string' ? 'minify' : 'close'} label`)}
|
|
158
152
|
classNames={buttonClassNames}
|
|
@@ -6,7 +6,7 @@ import React, { useEffect, useState } from 'react';
|
|
|
6
6
|
|
|
7
7
|
import { type Node } from '@dxos/plugin-graph';
|
|
8
8
|
import { useTranslation } from '@dxos/react-ui';
|
|
9
|
-
import {
|
|
9
|
+
import { descriptionText, mx } from '@dxos/react-ui-theme';
|
|
10
10
|
|
|
11
11
|
import { PlankHeading, type PlankHeadingProps } from './PlankHeading';
|
|
12
12
|
import { PlankLoading } from './PlankLoading';
|
|
@@ -19,7 +19,11 @@ export const PlankContentError = ({ error }: { error?: Error }) => {
|
|
|
19
19
|
<div role='none' className='overflow-auto p-8 attention-surface grid place-items-center'>
|
|
20
20
|
<p
|
|
21
21
|
role='alert'
|
|
22
|
-
className={mx(
|
|
22
|
+
className={mx(
|
|
23
|
+
descriptionText,
|
|
24
|
+
'break-words border border-dashed border-separator rounded-lg p-8',
|
|
25
|
+
errorString.length < 256 && 'text-lg',
|
|
26
|
+
)}
|
|
23
27
|
>
|
|
24
28
|
{error ? errorString : t('error fallback message')}
|
|
25
29
|
</p>
|
|
@@ -13,16 +13,13 @@ import { TextTooltip } from '@dxos/react-ui-text-tooltip';
|
|
|
13
13
|
import { PlankCompanionControls, PlankControls } from './PlankControls';
|
|
14
14
|
import { parseEntryId } from '../../layout';
|
|
15
15
|
import { DECK_PLUGIN } from '../../meta';
|
|
16
|
-
import { PLANK_COMPANION_TYPE, DeckAction, type ResolvedPart
|
|
16
|
+
import { PLANK_COMPANION_TYPE, DeckAction, type ResolvedPart } from '../../types';
|
|
17
17
|
import { useBreakpoints } from '../../util';
|
|
18
18
|
import { soloInlinePadding } from '../fragments';
|
|
19
19
|
|
|
20
|
-
const MAX_COMPANIONS = 5;
|
|
21
|
-
|
|
22
20
|
export type PlankHeadingProps = {
|
|
23
21
|
id: string;
|
|
24
22
|
part: ResolvedPart;
|
|
25
|
-
layoutMode?: LayoutMode;
|
|
26
23
|
node?: Node;
|
|
27
24
|
deckEnabled?: boolean;
|
|
28
25
|
canIncrementStart?: boolean;
|
|
@@ -48,7 +45,6 @@ export const PlankHeading = memo(
|
|
|
48
45
|
pending,
|
|
49
46
|
companioned,
|
|
50
47
|
companions,
|
|
51
|
-
layoutMode,
|
|
52
48
|
actions = [],
|
|
53
49
|
}: PlankHeadingProps) => {
|
|
54
50
|
const { t } = useTranslation(DECK_PLUGIN);
|
|
@@ -100,7 +96,7 @@ export const PlankHeading = memo(
|
|
|
100
96
|
|
|
101
97
|
const handlePlankAction = useCallback(
|
|
102
98
|
(eventType: DeckAction.PartAdjustment) => {
|
|
103
|
-
if (eventType
|
|
99
|
+
if (eventType === 'solo') {
|
|
104
100
|
return dispatch(createIntent(DeckAction.Adjust, { type: eventType, id }));
|
|
105
101
|
} else if (eventType === 'close') {
|
|
106
102
|
if (part === 'complementary') {
|
|
@@ -143,12 +139,9 @@ export const PlankHeading = memo(
|
|
|
143
139
|
return (
|
|
144
140
|
<StackItem.Heading
|
|
145
141
|
classNames={[
|
|
146
|
-
'plb-1 border-be border-separator items-stretch gap-1 sticky inline-start-12 app-drag min-is-0 contain
|
|
142
|
+
'plb-1 border-be border-separator items-stretch gap-1 sticky inline-start-12 app-drag min-is-0 layout-contain',
|
|
147
143
|
part === 'solo' ? soloInlinePadding : 'pli-1',
|
|
148
|
-
layoutMode === 'solo--fullscreen' &&
|
|
149
|
-
'opacity-0 border-transparent hover:border-separator hover:opacity-100 transition-[border-color,opacity]',
|
|
150
144
|
]}
|
|
151
|
-
data-plank-heading
|
|
152
145
|
>
|
|
153
146
|
{companions && isCompanionNode ? (
|
|
154
147
|
<div role='none' className='flex-1 min-is-0 overflow-x-auto scrollbar-thin flex gap-1'>
|
|
@@ -157,7 +150,7 @@ export const PlankHeading = memo(
|
|
|
157
150
|
key={id}
|
|
158
151
|
data-id={id}
|
|
159
152
|
icon={icon}
|
|
160
|
-
iconOnly={
|
|
153
|
+
iconOnly={node?.id !== id}
|
|
161
154
|
label={toLocalizedString(label, t)}
|
|
162
155
|
size={5}
|
|
163
156
|
variant={node?.id === id ? 'primary' : 'default'}
|
|
@@ -203,7 +196,7 @@ export const PlankHeading = memo(
|
|
|
203
196
|
) : (
|
|
204
197
|
<PlankControls
|
|
205
198
|
capabilities={capabilities}
|
|
206
|
-
|
|
199
|
+
isSolo={part === 'solo'}
|
|
207
200
|
close={part === 'complementary' ? 'minify-end' : true}
|
|
208
201
|
onClick={handlePlankAction}
|
|
209
202
|
/>
|
|
@@ -28,7 +28,7 @@ import { byPosition, type Position } from '@dxos/util';
|
|
|
28
28
|
import { ToggleComplementarySidebarButton } from './SidebarButton';
|
|
29
29
|
import { DeckCapabilities } from '../../capabilities';
|
|
30
30
|
import { DECK_PLUGIN } from '../../meta';
|
|
31
|
-
import { ATTENDABLE_PATH_SEPARATOR, DECK_COMPANION_TYPE
|
|
31
|
+
import { ATTENDABLE_PATH_SEPARATOR, DECK_COMPANION_TYPE } from '../../types';
|
|
32
32
|
import { layoutAppliesTopbar, useBreakpoints, useHoistStatusbar } from '../../util';
|
|
33
33
|
import { PlankContentError, PlankLoading } from '../Plank';
|
|
34
34
|
|
|
@@ -65,14 +65,13 @@ export const ComplementarySidebar = ({ current }: ComplementarySidebarProps) =>
|
|
|
65
65
|
const { t } = useTranslation(DECK_PLUGIN);
|
|
66
66
|
const { dispatchPromise: dispatch } = useIntentDispatcher();
|
|
67
67
|
const layout = useCapability(DeckCapabilities.MutableDeckState);
|
|
68
|
-
const layoutMode = getMode(layout.deck);
|
|
69
68
|
const breakpoint = useBreakpoints();
|
|
70
|
-
const topbar = layoutAppliesTopbar(breakpoint
|
|
71
|
-
const hoistStatusbar = useHoistStatusbar(breakpoint
|
|
69
|
+
const topbar = layoutAppliesTopbar(breakpoint);
|
|
70
|
+
const hoistStatusbar = useHoistStatusbar(breakpoint);
|
|
72
71
|
|
|
73
72
|
const companions = useDeckCompanions();
|
|
74
|
-
const activeCompanion = companions.find((companion) => getCompanionId(companion.id) === current);
|
|
75
|
-
const activeId =
|
|
73
|
+
const activeCompanion = companions.find((companion) => getCompanionId(companion.id) === current) ?? companions.at(0);
|
|
74
|
+
const activeId = getCompanionId(activeCompanion?.id ?? 'never');
|
|
76
75
|
const [internalValue, setInternalValue] = useState(activeId);
|
|
77
76
|
|
|
78
77
|
useEffect(() => {
|
|
@@ -102,14 +101,6 @@ export const ComplementarySidebar = ({ current }: ComplementarySidebarProps) =>
|
|
|
102
101
|
[activeCompanion?.id, activeCompanion?.data],
|
|
103
102
|
);
|
|
104
103
|
|
|
105
|
-
useEffect(() => {
|
|
106
|
-
if (!activeId) {
|
|
107
|
-
void dispatch(
|
|
108
|
-
createIntent(LayoutAction.UpdateComplementary, { part: 'complementary', options: { state: 'collapsed' } }),
|
|
109
|
-
);
|
|
110
|
-
}
|
|
111
|
-
}, [activeId, dispatch]);
|
|
112
|
-
|
|
113
104
|
return (
|
|
114
105
|
<Main.ComplementarySidebar
|
|
115
106
|
label={label}
|
|
@@ -154,22 +145,21 @@ export const ComplementarySidebar = ({ current }: ComplementarySidebarProps) =>
|
|
|
154
145
|
<ToggleComplementarySidebarButton />
|
|
155
146
|
</div>
|
|
156
147
|
</div>
|
|
157
|
-
{
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
))}
|
|
148
|
+
{companions.map((companion) => (
|
|
149
|
+
<Tabs.Tabpanel
|
|
150
|
+
key={getCompanionId(companion.id)}
|
|
151
|
+
value={getCompanionId(companion.id)}
|
|
152
|
+
classNames='absolute data-[state="inactive"]:-z-[1] inset-block-0 inline-start-0 is-[calc(100%-var(--r0-size))] lg:is-[--r1-size] grid grid-cols-1 grid-rows-[var(--rail-size)_1fr_min-content] pbs-[env(safe-area-inset-top)]'
|
|
153
|
+
{...(layout.complementarySidebarState !== 'expanded' && { inert: 'true' })}
|
|
154
|
+
>
|
|
155
|
+
<ComplementarySidebarPanel
|
|
156
|
+
companion={companion}
|
|
157
|
+
activeId={activeId}
|
|
158
|
+
data={data}
|
|
159
|
+
hoistStatusbar={hoistStatusbar}
|
|
160
|
+
/>
|
|
161
|
+
</Tabs.Tabpanel>
|
|
162
|
+
))}
|
|
173
163
|
</Tabs.Root>
|
|
174
164
|
</Main.ComplementarySidebar>
|
|
175
165
|
);
|
|
@@ -9,17 +9,15 @@ import { type Label, Main } from '@dxos/react-ui';
|
|
|
9
9
|
|
|
10
10
|
import { DeckCapabilities } from '../../capabilities';
|
|
11
11
|
import { DECK_PLUGIN } from '../../meta';
|
|
12
|
-
import { getMode } from '../../types';
|
|
13
12
|
import { layoutAppliesTopbar, useBreakpoints, useHoistStatusbar } from '../../util';
|
|
14
13
|
|
|
15
14
|
const label = ['sidebar title', { ns: DECK_PLUGIN }] satisfies Label;
|
|
16
15
|
|
|
17
16
|
export const Sidebar = () => {
|
|
18
|
-
const { popoverAnchorId, activeDeck: current
|
|
17
|
+
const { popoverAnchorId, activeDeck: current } = useCapability(DeckCapabilities.DeckState);
|
|
19
18
|
const breakpoint = useBreakpoints();
|
|
20
|
-
const
|
|
21
|
-
const
|
|
22
|
-
const hoistStatusbar = useHoistStatusbar(breakpoint, layoutMode);
|
|
19
|
+
const topbar = layoutAppliesTopbar(breakpoint);
|
|
20
|
+
const hoistStatusbar = useHoistStatusbar(breakpoint);
|
|
23
21
|
|
|
24
22
|
const navigationData = useMemo(
|
|
25
23
|
() => ({ popoverAnchorId, topbar, hoistStatusbar, current }),
|
package/src/translations.ts
CHANGED
|
@@ -45,8 +45,6 @@ export default [
|
|
|
45
45
|
'increment end label': 'Move to the right',
|
|
46
46
|
'show deck plank label': 'Return to deck',
|
|
47
47
|
'show solo plank label': 'Maximize',
|
|
48
|
-
'exit fullscreen label': 'Exit fullscreen',
|
|
49
|
-
'show fullscreen plank label': 'Fullscreen',
|
|
50
48
|
'close label': 'Close',
|
|
51
49
|
'minify label': 'Minify',
|
|
52
50
|
'open companion label': 'Open companion',
|
package/src/types.ts
CHANGED
|
@@ -4,7 +4,6 @@
|
|
|
4
4
|
|
|
5
5
|
import { LayoutAction } from '@dxos/app-framework';
|
|
6
6
|
import { S } from '@dxos/echo-schema';
|
|
7
|
-
import { type DeepReadonly } from '@dxos/util';
|
|
8
7
|
|
|
9
8
|
import { DECK_PLUGIN } from './meta';
|
|
10
9
|
|
|
@@ -62,13 +61,13 @@ export const defaultDeck: DeckState = {
|
|
|
62
61
|
companionFrameSizing: {},
|
|
63
62
|
};
|
|
64
63
|
|
|
65
|
-
const LayoutMode = S.Literal('deck', 'solo', '
|
|
64
|
+
const LayoutMode = S.Literal('deck', 'solo', 'fullscreen');
|
|
66
65
|
export type LayoutMode = S.Schema.Type<typeof LayoutMode>;
|
|
67
66
|
export const isLayoutMode = (value: any): value is LayoutMode => S.is(LayoutMode)(value);
|
|
68
67
|
|
|
69
|
-
export const getMode = (deck: DeckState
|
|
68
|
+
export const getMode = (deck: DeckState): LayoutMode => {
|
|
70
69
|
if (deck.solo) {
|
|
71
|
-
return deck.fullscreen ? '
|
|
70
|
+
return deck.fullscreen ? 'fullscreen' : 'solo';
|
|
72
71
|
}
|
|
73
72
|
|
|
74
73
|
return 'deck';
|
|
@@ -81,17 +80,16 @@ export const DeckPluginState = S.Struct({
|
|
|
81
80
|
complementarySidebarPanel: S.optional(S.String),
|
|
82
81
|
|
|
83
82
|
dialogOpen: S.Boolean,
|
|
84
|
-
dialogBlockAlign: S.optional(S.Literal('start', 'center', 'end')),
|
|
85
|
-
dialogType: S.optional(S.Literal('default', 'alert')),
|
|
86
83
|
/** Data to be passed to the dialog Surface. */
|
|
87
84
|
dialogContent: S.optional(S.Any),
|
|
85
|
+
dialogBlockAlign: S.optional(S.Literal('start', 'center', 'end')),
|
|
86
|
+
dialogType: S.optional(S.Literal('default', 'alert')),
|
|
88
87
|
|
|
89
88
|
popoverOpen: S.Boolean,
|
|
90
89
|
popoverSide: S.optional(S.Literal('top', 'right', 'bottom', 'left')),
|
|
91
|
-
popoverAnchor: S.optional(S.Any),
|
|
92
|
-
popoverAnchorId: S.optional(S.String),
|
|
93
90
|
/** Data to be passed to the popover Surface. */
|
|
94
91
|
popoverContent: S.optional(S.Any),
|
|
92
|
+
popoverAnchorId: S.optional(S.String),
|
|
95
93
|
|
|
96
94
|
toasts: S.mutable(S.Array(LayoutAction.Toast)),
|
|
97
95
|
currentUndoId: S.optional(S.String),
|
|
@@ -115,7 +113,6 @@ export namespace DeckAction {
|
|
|
115
113
|
S.Literal('close').annotations({ description: 'Close the plank.' }),
|
|
116
114
|
S.Literal('companion').annotations({ description: 'Open the companion plank.' }),
|
|
117
115
|
S.Literal('solo').annotations({ description: 'Solo the plank.' }),
|
|
118
|
-
S.Literal('solo--fullscreen').annotations({ description: 'Fullscreen the plank.' }),
|
|
119
116
|
S.Literal('increment-start').annotations({ description: 'Move the plank towards the start of the deck.' }),
|
|
120
117
|
S.Literal('increment-end').annotations({ description: 'Move the plank towards the end of the deck.' }),
|
|
121
118
|
);
|
|
@@ -2,12 +2,6 @@
|
|
|
2
2
|
// Copyright 2025 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
export const layoutAppliesTopbar = (breakpoint: string, layoutMode?: LayoutMode) => {
|
|
8
|
-
return (
|
|
9
|
-
document.body.getAttribute('data-platform') === 'win' &&
|
|
10
|
-
breakpoint === 'desktop' &&
|
|
11
|
-
layoutMode !== 'solo--fullscreen'
|
|
12
|
-
);
|
|
5
|
+
export const layoutAppliesTopbar = (breakpoint: string) => {
|
|
6
|
+
return document.body.getAttribute('data-platform') === 'win' && breakpoint === 'desktop';
|
|
13
7
|
};
|
|
@@ -8,18 +8,13 @@ import { Capabilities, useCapability } from '@dxos/app-framework';
|
|
|
8
8
|
import { useThemeContext } from '@dxos/react-ui';
|
|
9
9
|
|
|
10
10
|
import { DECK_PLUGIN } from '../meta';
|
|
11
|
-
import type { DeckSettingsProps
|
|
11
|
+
import type { DeckSettingsProps } from '../types';
|
|
12
12
|
|
|
13
|
-
export const useHoistStatusbar = (breakpoint: string
|
|
13
|
+
export const useHoistStatusbar = (breakpoint: string): boolean => {
|
|
14
14
|
const enableStatusbar = useCapability(Capabilities.SettingsStore).getStore<DeckSettingsProps>(DECK_PLUGIN)!.value
|
|
15
15
|
.enableStatusbar;
|
|
16
16
|
const { safeAreaPadding } = useThemeContext();
|
|
17
17
|
return useMemo(() => {
|
|
18
|
-
return
|
|
19
|
-
|
|
20
|
-
layoutMode !== 'solo--fullscreen' &&
|
|
21
|
-
!!enableStatusbar &&
|
|
22
|
-
safeAreaPadding?.bottom === 0
|
|
23
|
-
);
|
|
24
|
-
}, [enableStatusbar, breakpoint, safeAreaPadding?.bottom, layoutMode]);
|
|
18
|
+
return breakpoint === 'desktop' && !!enableStatusbar && safeAreaPadding?.bottom === 0;
|
|
19
|
+
}, [enableStatusbar, breakpoint, safeAreaPadding?.bottom]);
|
|
25
20
|
};
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/capabilities/check-app-scheme.ts"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport { Capabilities, contributes, type PluginsContext } from '@dxos/app-framework';\n\nimport { DECK_PLUGIN } from '../meta';\nimport { type DeckSettingsProps } from '../types';\n\nconst isSocket = !!(globalThis as any).__args;\n\n// TODO(mjamesderocher): Can we get this directly from Socket?\nconst appScheme = 'composer://';\n\n// TODO(mjamesderocher): Factor out as part of NavigationPlugin.\nconst checkAppScheme = (url: string) => {\n const iframe = document.createElement('iframe');\n iframe.style.display = 'none';\n document.body.appendChild(iframe);\n\n iframe.src = url + window.location.pathname.replace(/^\\/+/, '') + window.location.search;\n\n const timer = setTimeout(() => {\n document.body.removeChild(iframe);\n }, 3000);\n\n window.addEventListener('pagehide', (event) => {\n clearTimeout(timer);\n document.body.removeChild(iframe);\n });\n};\n\nexport default async (context: PluginsContext) => {\n const settings = context\n .requestCapability(Capabilities.SettingsStore)\n .getStore<DeckSettingsProps>(DECK_PLUGIN)?.value;\n if (!isSocket && settings?.enableNativeRedirect) {\n checkAppScheme(appScheme);\n }\n\n return contributes(Capabilities.Null, null);\n};\n"],
|
|
5
|
-
"mappings": ";;;;;AAIA,SAASA,cAAcC,mBAAwC;AAK/D,IAAMC,WAAW,CAAC,CAAEC,WAAmBC;AAGvC,IAAMC,YAAY;AAGlB,IAAMC,iBAAiB,CAACC,QAAAA;AACtB,QAAMC,SAASC,SAASC,cAAc,QAAA;AACtCF,SAAOG,MAAMC,UAAU;AACvBH,WAASI,KAAKC,YAAYN,MAAAA;AAE1BA,SAAOO,MAAMR,MAAMS,OAAOC,SAASC,SAASC,QAAQ,QAAQ,EAAA,IAAMH,OAAOC,SAASG;AAElF,QAAMC,QAAQC,WAAW,MAAA;AACvBb,aAASI,KAAKU,YAAYf,MAAAA;EAC5B,GAAG,GAAA;AAEHQ,SAAOQ,iBAAiB,YAAY,CAACC,UAAAA;AACnCC,iBAAaL,KAAAA;AACbZ,aAASI,KAAKU,YAAYf,MAAAA;EAC5B,CAAA;AACF;AAEA,IAAA,2BAAe,OAAOmB,YAAAA;AACpB,QAAMC,WAAWD,QACdE,kBAAkBC,aAAaC,aAAa,EAC5CC,SAA4BC,WAAAA,GAAcC;AAC7C,MAAI,CAAChC,YAAY0B,UAAUO,sBAAsB;AAC/C7B,mBAAeD,SAAAA;EACjB;AAEA,SAAO+B,YAAYN,aAAaO,MAAM,IAAA;AACxC;",
|
|
6
|
-
"names": ["Capabilities", "contributes", "isSocket", "globalThis", "__args", "appScheme", "checkAppScheme", "url", "iframe", "document", "createElement", "style", "display", "body", "appendChild", "src", "window", "location", "pathname", "replace", "search", "timer", "setTimeout", "removeChild", "addEventListener", "event", "clearTimeout", "context", "settings", "requestCapability", "Capabilities", "SettingsStore", "getStore", "DECK_PLUGIN", "value", "enableNativeRedirect", "contributes", "Null"]
|
|
7
|
-
}
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
// packages/plugins/plugin-deck/src/capabilities/index.ts
|
|
2
|
-
import { lazy } from "@dxos/app-framework";
|
|
3
|
-
var AppGraphBuilder = lazy(() => import("./app-graph-builder-VYZ4IWI3.mjs"));
|
|
4
|
-
var CheckAppScheme = lazy(() => import("./check-app-scheme-O7JPE4TM.mjs"));
|
|
5
|
-
var DeckSettings = lazy(() => import("./settings-6NU7CF2B.mjs"));
|
|
6
|
-
var DeckState = lazy(() => import("./state-Z6UY2Z3M.mjs"));
|
|
7
|
-
var LayoutIntentResolver = lazy(() => import("./intent-resolver-JKWXWUV6.mjs"));
|
|
8
|
-
var ReactRoot = lazy(() => import("./react-root-S6ZAKNZA.mjs"));
|
|
9
|
-
var ReactSurface = lazy(() => import("./react-surface-I7WZBOGM.mjs"));
|
|
10
|
-
var Tools = lazy(() => import("./tools-VDVQTJMD.mjs"));
|
|
11
|
-
var UrlHandler = lazy(() => import("./url-handler-3CARFXQK.mjs"));
|
|
12
|
-
|
|
13
|
-
export {
|
|
14
|
-
AppGraphBuilder,
|
|
15
|
-
CheckAppScheme,
|
|
16
|
-
DeckSettings,
|
|
17
|
-
DeckState,
|
|
18
|
-
LayoutIntentResolver,
|
|
19
|
-
ReactRoot,
|
|
20
|
-
ReactSurface,
|
|
21
|
-
Tools,
|
|
22
|
-
UrlHandler
|
|
23
|
-
};
|
|
24
|
-
//# sourceMappingURL=chunk-RBJ6DLAC.mjs.map
|