@dxos/plugin-stack 0.7.4 → 0.7.5-main.9d26e3a

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 (43) hide show
  1. package/dist/lib/browser/StackMain-HSYQ5B3Y.mjs +295 -0
  2. package/dist/lib/browser/StackMain-HSYQ5B3Y.mjs.map +7 -0
  3. package/dist/lib/browser/index.mjs +28 -163
  4. package/dist/lib/browser/index.mjs.map +4 -4
  5. package/dist/lib/browser/meta.json +1 -1
  6. package/dist/lib/node/StackMain-AWN5MFZK.cjs +309 -0
  7. package/dist/lib/node/StackMain-AWN5MFZK.cjs.map +7 -0
  8. package/dist/lib/node/index.cjs +28 -161
  9. package/dist/lib/node/index.cjs.map +4 -4
  10. package/dist/lib/node/meta.json +1 -1
  11. package/dist/lib/node-esm/StackMain-EFCZCMIJ.mjs +296 -0
  12. package/dist/lib/node-esm/StackMain-EFCZCMIJ.mjs.map +7 -0
  13. package/dist/lib/node-esm/index.mjs +28 -163
  14. package/dist/lib/node-esm/index.mjs.map +4 -4
  15. package/dist/lib/node-esm/meta.json +1 -1
  16. package/dist/types/src/StackPlugin.d.ts.map +1 -1
  17. package/dist/types/src/components/StackMain.d.ts.map +1 -1
  18. package/dist/types/src/components/StackSection.d.ts.map +1 -1
  19. package/dist/types/src/components/index.d.ts +0 -1
  20. package/dist/types/src/components/index.d.ts.map +1 -1
  21. package/dist/types/src/types/stack.d.ts +6 -12
  22. package/dist/types/src/types/stack.d.ts.map +1 -1
  23. package/dist/types/src/types/types.d.ts +4 -16
  24. package/dist/types/src/types/types.d.ts.map +1 -1
  25. package/dist/types/tsconfig.tsbuildinfo +1 -0
  26. package/package.json +23 -23
  27. package/src/StackPlugin.tsx +26 -47
  28. package/src/components/StackMain.tsx +60 -69
  29. package/src/components/StackSection.tsx +2 -4
  30. package/src/components/index.ts +0 -1
  31. package/src/types/types.ts +3 -19
  32. package/dist/lib/browser/StackMain-4D4J4IRK.mjs +0 -391
  33. package/dist/lib/browser/StackMain-4D4J4IRK.mjs.map +0 -7
  34. package/dist/lib/node/StackMain-V7C55NCF.cjs +0 -403
  35. package/dist/lib/node/StackMain-V7C55NCF.cjs.map +0 -7
  36. package/dist/lib/node-esm/StackMain-5I43UWGF.mjs +0 -392
  37. package/dist/lib/node-esm/StackMain-5I43UWGF.mjs.map +0 -7
  38. package/dist/types/src/components/AddSection.d.ts +0 -6
  39. package/dist/types/src/components/AddSection.d.ts.map +0 -1
  40. package/dist/types/src/components/AddSectionDialog.d.ts +0 -14
  41. package/dist/types/src/components/AddSectionDialog.d.ts.map +0 -1
  42. package/src/components/AddSection.tsx +0 -102
  43. package/src/components/AddSectionDialog.tsx +0 -128
@@ -1,392 +0,0 @@
1
- import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
2
- import {
3
- STACK_PLUGIN
4
- } from "./chunk-JEQMG2E2.mjs";
5
- import {
6
- StackViewType
7
- } from "./chunk-3ZYHKSIS.mjs";
8
-
9
- // packages/plugins/plugin-stack/src/components/StackMain.tsx
10
- import { Plus } from "@phosphor-icons/react";
11
- import React4, { useEffect, useMemo, useState as useState2 } from "react";
12
- import { LayoutAction, NavigationAction, parseMetadataResolverPlugin, useIntentDispatcher as useIntentDispatcher2, useResolvePlugin } from "@dxos/app-framework";
13
- import { create, getType, fullyQualifiedId } from "@dxos/client/echo";
14
- import { useGraph } from "@dxos/plugin-graph";
15
- import { SpaceAction } from "@dxos/plugin-space";
16
- import { Button, toLocalizedString as toLocalizedString2, useTranslation as useTranslation3 } from "@dxos/react-ui";
17
- import { AttentionProvider } from "@dxos/react-ui-attention";
18
- import { Stack } from "@dxos/react-ui-stack";
19
- import { nonNullable } from "@dxos/util";
20
-
21
- // packages/plugins/plugin-stack/src/components/AddSection.tsx
22
- import { useArrowNavigationGroup } from "@fluentui/react-tabster";
23
- import React, { useCallback } from "react";
24
- import { usePlugin, useIntentDispatcher } from "@dxos/app-framework";
25
- import { toLocalizedString, useTranslation } from "@dxos/react-ui";
26
- import { getSize, mx } from "@dxos/react-ui-theme";
27
- var CreatorTile = ({ Icon: Icon2, label, testId, handleAdd }) => {
28
- const onClick = useCallback((_) => handleAdd(), [
29
- handleAdd
30
- ]);
31
- const onKeyDown = useCallback((event) => {
32
- if (event.key === "Enter" || event.key === " ") {
33
- event.preventDefault();
34
- handleAdd();
35
- }
36
- }, [
37
- handleAdd
38
- ]);
39
- return /* @__PURE__ */ React.createElement("div", {
40
- role: "button",
41
- "aria-label": label,
42
- tabIndex: 0,
43
- className: mx("flex items-center w-[10rem] h-16 overflow-hidden", "border rounded-md border-separator shadow-sm hover:bg-hoverSurface cursor-pointer"),
44
- onClick,
45
- onKeyDown,
46
- "data-testid": testId
47
- }, /* @__PURE__ */ React.createElement("div", {
48
- className: "flex h-full w-12 items-center justify-center bg-scrim shrink-0 border-r border-separator"
49
- }, /* @__PURE__ */ React.createElement(Icon2, {
50
- weight: "thin",
51
- className: getSize(6)
52
- })), /* @__PURE__ */ React.createElement("div", {
53
- className: "overflow-hidden items-center p-2 px-3"
54
- }, /* @__PURE__ */ React.createElement("span", {
55
- className: "capitalize"
56
- }, label)));
57
- };
58
- var AddSection = ({ collection }) => {
59
- const domAttributes = useArrowNavigationGroup({
60
- axis: "grid"
61
- });
62
- const dispatch = useIntentDispatcher();
63
- const { t } = useTranslation(STACK_PLUGIN);
64
- const stackPlugin = usePlugin(STACK_PLUGIN);
65
- const stackCreators = stackPlugin?.provides?.stack.creators ?? [];
66
- const handleAdd = useCallback(async (creator) => {
67
- const { data: section } = await dispatch(creator.intent) ?? {};
68
- collection.objects = [
69
- section
70
- ];
71
- const stack = collection.views[StackViewType.typename];
72
- if (stack) {
73
- stack.sections[section.id] = {};
74
- }
75
- }, [
76
- collection,
77
- dispatch
78
- ]);
79
- if (stackCreators.length === 0) {
80
- return null;
81
- }
82
- return /* @__PURE__ */ React.createElement("div", {
83
- ...domAttributes,
84
- role: "none",
85
- className: "flex flex-wrap items-center p-8 gap-4"
86
- }, stackCreators.map((creator) => {
87
- const { id, type, icon, testId } = creator;
88
- return /* @__PURE__ */ React.createElement(CreatorTile, {
89
- key: id,
90
- label: toLocalizedString(type, t),
91
- testId,
92
- Icon: icon,
93
- handleAdd: () => handleAdd(creator)
94
- });
95
- }));
96
- };
97
-
98
- // packages/plugins/plugin-stack/src/components/StackContext.tsx
99
- import { createContext, useContext } from "react";
100
- var StackContext = /* @__PURE__ */ createContext({
101
- onCollapse: () => {
102
- },
103
- onNavigate: async () => {
104
- },
105
- onDelete: async () => {
106
- },
107
- onAdd: () => {
108
- }
109
- });
110
- var useStack = () => useContext(StackContext);
111
-
112
- // packages/plugins/plugin-stack/src/components/StackSection.tsx
113
- import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
114
- import React3, { useState } from "react";
115
- import { Surface } from "@dxos/app-framework";
116
- import { DropdownMenu, Icon, useTranslation as useTranslation2, IconButton } from "@dxos/react-ui";
117
- import { useAttendableAttributes } from "@dxos/react-ui-attention";
118
- import { StackItem } from "@dxos/react-ui-stack";
119
- import { mx as mx2, getSize as getSize2, textBlockWidth } from "@dxos/react-ui-theme";
120
-
121
- // packages/plugins/plugin-stack/src/components/CaretDownUp.tsx
122
- import React2 from "react";
123
- var CaretDownUp = ({ children, ...props }) => {
124
- return /* @__PURE__ */ React2.createElement("svg", {
125
- xmlns: "http://www.w3.org/2000/svg",
126
- viewBox: "0 0 256 256",
127
- ...props
128
- }, /* @__PURE__ */ React2.createElement("rect", {
129
- width: "256",
130
- height: "256",
131
- fill: "none"
132
- }), /* @__PURE__ */ React2.createElement("polyline", {
133
- points: "80 224 128 176 176 224",
134
- fill: "none",
135
- stroke: "currentColor",
136
- strokeLinecap: "round",
137
- strokeLinejoin: "round",
138
- strokeWidth: "16"
139
- }), /* @__PURE__ */ React2.createElement("polyline", {
140
- points: "80 32 128 80 176 32",
141
- fill: "none",
142
- stroke: "currentColor",
143
- strokeLinecap: "round",
144
- strokeLinejoin: "round",
145
- strokeWidth: "16"
146
- }), children);
147
- };
148
-
149
- // packages/plugins/plugin-stack/src/components/StackSection.tsx
150
- var sectionActionDimensions = "m-1 p-1 shrink-0 min-bs-0 is-[--rail-action] bs-min";
151
- var StackSection = ({ id, view, object, metadata: { icon = "ph--placeholder--regular" } }) => {
152
- const { t } = useTranslation2(STACK_PLUGIN);
153
- const { onNavigate, onAdd, onCollapse, onDelete } = useStack();
154
- const [optionsMenuOpen, setOptionsMenuOpen] = useState(false);
155
- const attendableAttrs = useAttendableAttributes(id);
156
- return /* @__PURE__ */ React3.createElement(CollapsiblePrimitive.Root, {
157
- asChild: true,
158
- open: !view.collapsed,
159
- onOpenChange: (nextOpen) => onCollapse?.(id, !nextOpen)
160
- }, /* @__PURE__ */ React3.createElement(StackItem.Root, {
161
- item: {
162
- id
163
- },
164
- role: "section",
165
- ...attendableAttrs,
166
- classNames: "border-be border-separator"
167
- }, /* @__PURE__ */ React3.createElement(StackItem.Heading, {
168
- classNames: "attention-surface border-ie !border-separator"
169
- }, /* @__PURE__ */ React3.createElement("span", {
170
- className: "sr-only"
171
- }, view.title), /* @__PURE__ */ React3.createElement("div", {
172
- role: "none",
173
- className: "sticky -block-start-px bg-[--sticky-bg]"
174
- }, /* @__PURE__ */ React3.createElement(DropdownMenu.Root, {
175
- open: optionsMenuOpen,
176
- onOpenChange: setOptionsMenuOpen
177
- }, /* @__PURE__ */ React3.createElement(DropdownMenu.Trigger, {
178
- asChild: true
179
- }, /* @__PURE__ */ React3.createElement(StackItem.SigilButton, null, /* @__PURE__ */ React3.createElement(Icon, {
180
- icon,
181
- size: 5,
182
- classNames: "transition-opacity"
183
- }))), /* @__PURE__ */ React3.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React3.createElement(DropdownMenu.Content, {
184
- style: {
185
- zIndex: 70
186
- }
187
- }, /* @__PURE__ */ React3.createElement(DropdownMenu.Viewport, null, view.collapsed ? /* @__PURE__ */ React3.createElement(DropdownMenu.Item, {
188
- onClick: () => onNavigate(id),
189
- "data-testid": "section.navigate-to"
190
- }, /* @__PURE__ */ React3.createElement(Icon, {
191
- icon: "ph--arrow-square-out--regular",
192
- size: 5
193
- }), /* @__PURE__ */ React3.createElement("span", {
194
- className: "mis-2 grow"
195
- }, t("navigate to section label"))) : /* @__PURE__ */ React3.createElement(CollapsiblePrimitive.Trigger, {
196
- asChild: true
197
- }, /* @__PURE__ */ React3.createElement(DropdownMenu.Item, null, /* @__PURE__ */ React3.createElement(CaretDownUp, {
198
- className: getSize2(5)
199
- }), /* @__PURE__ */ React3.createElement("span", {
200
- className: "mis-2 grow"
201
- }, t("collapse label")))), /* @__PURE__ */ React3.createElement(DropdownMenu.Item, {
202
- onClick: () => onAdd(id, "before"),
203
- "data-testid": "section.add-before"
204
- }, /* @__PURE__ */ React3.createElement(Icon, {
205
- icon: "ph--arrow-line-up--regular",
206
- size: 5
207
- }), /* @__PURE__ */ React3.createElement("span", {
208
- className: "mis-2 grow"
209
- }, t("add section before label"))), /* @__PURE__ */ React3.createElement(DropdownMenu.Item, {
210
- onClick: () => onAdd(id, "after"),
211
- "data-testid": "section.add-after"
212
- }, /* @__PURE__ */ React3.createElement(Icon, {
213
- icon: "ph--arrow-line-down--regular",
214
- size: 5
215
- }), /* @__PURE__ */ React3.createElement("span", {
216
- className: "mis-2 grow"
217
- }, t("add section after label"))), /* @__PURE__ */ React3.createElement(DropdownMenu.Item, {
218
- onClick: () => onDelete(id),
219
- "data-testid": "section.remove"
220
- }, /* @__PURE__ */ React3.createElement(Icon, {
221
- icon: "ph--trash--regular",
222
- size: 5
223
- }), /* @__PURE__ */ React3.createElement("span", {
224
- className: "mis-2 grow"
225
- }, t("remove section label")))), /* @__PURE__ */ React3.createElement(DropdownMenu.Arrow, null)))), view.collapsed ? /* @__PURE__ */ React3.createElement(CollapsiblePrimitive.Trigger, {
226
- asChild: true
227
- }, /* @__PURE__ */ React3.createElement(IconButton, {
228
- iconOnly: true,
229
- tooltipZIndex: "70",
230
- variant: "ghost",
231
- label: t("expand label"),
232
- icon: "ph--caret-up-down--regular",
233
- classNames: sectionActionDimensions
234
- })) : /* @__PURE__ */ React3.createElement(IconButton, {
235
- iconOnly: true,
236
- tooltipZIndex: "70",
237
- variant: "ghost",
238
- onClick: () => onNavigate(id),
239
- label: t("navigate to section label"),
240
- icon: "ph--arrow-square-out--regular",
241
- "data-testid": "section.navigate-to",
242
- classNames: sectionActionDimensions
243
- }))), /* @__PURE__ */ React3.createElement(CollapsiblePrimitive.Content, null, /* @__PURE__ */ React3.createElement(Surface, {
244
- role: "section",
245
- data: {
246
- object
247
- },
248
- limit: 1,
249
- placeholder: /* @__PURE__ */ React3.createElement(React3.Fragment, null)
250
- })), view.collapsed && /* @__PURE__ */ React3.createElement(StackItem.Content, {
251
- toolbar: false,
252
- classNames: "attention-surface"
253
- }, /* @__PURE__ */ React3.createElement("h2", {
254
- className: mx2("flex items-center p-4 font-medium is-full", textBlockWidth)
255
- }, view.title))));
256
- };
257
-
258
- // packages/plugins/plugin-stack/src/components/StackMain.tsx
259
- var StackMain = ({ id, collection }) => {
260
- const dispatch = useIntentDispatcher2();
261
- const { graph } = useGraph();
262
- const { t } = useTranslation3(STACK_PLUGIN);
263
- const metadataPlugin = useResolvePlugin(parseMetadataResolverPlugin);
264
- const defaultStack = useMemo(() => create(StackViewType, {
265
- sections: {}
266
- }), [
267
- collection
268
- ]);
269
- const stack = collection.views[StackViewType.typename] ?? defaultStack;
270
- const [collapsedSections, setCollapsedSections] = useState2({});
271
- useEffect(() => {
272
- if (!collection.views[StackViewType.typename]) {
273
- collection.views[StackViewType.typename] = stack;
274
- }
275
- }, [
276
- collection,
277
- stack
278
- ]);
279
- const items = collection.objects.filter(nonNullable).map((object) => {
280
- const metadata = metadataPlugin?.provides.metadata.resolver(getType(object)?.objectId ?? "never");
281
- const view = {
282
- ...stack.sections[object.id],
283
- collapsed: collapsedSections[fullyQualifiedId(object)],
284
- title: object?.title ?? toLocalizedString2(graph.findNode(fullyQualifiedId(object))?.properties.label, t)
285
- };
286
- return {
287
- id: fullyQualifiedId(object),
288
- object,
289
- metadata,
290
- view
291
- };
292
- }) ?? [];
293
- const handleDelete = async (id2) => {
294
- const index = collection.objects.filter(nonNullable).findIndex((section) => fullyQualifiedId(section) === id2);
295
- if (index >= 0) {
296
- await dispatch({
297
- action: SpaceAction.REMOVE_OBJECTS,
298
- data: {
299
- objects: [
300
- collection.objects[index]
301
- ],
302
- collection
303
- }
304
- });
305
- }
306
- };
307
- const handleAdd = (id2, position) => {
308
- void dispatch?.({
309
- action: LayoutAction.SET_LAYOUT,
310
- data: {
311
- element: "dialog",
312
- component: `${STACK_PLUGIN}/AddSectionDialog`,
313
- subject: {
314
- path: id2,
315
- position,
316
- collection
317
- }
318
- }
319
- });
320
- };
321
- const handleNavigate = async (id2) => {
322
- await dispatch([
323
- {
324
- action: NavigationAction.OPEN,
325
- data: {
326
- activeParts: {
327
- main: [
328
- id2
329
- ]
330
- }
331
- }
332
- },
333
- {
334
- action: LayoutAction.SCROLL_INTO_VIEW,
335
- data: {
336
- id: id2
337
- }
338
- }
339
- ]);
340
- };
341
- const handleCollapse = (id2, collapsed) => {
342
- setCollapsedSections((prev) => ({
343
- ...prev,
344
- [id2]: collapsed
345
- }));
346
- };
347
- return /* @__PURE__ */ React4.createElement(AttentionProvider, {
348
- id
349
- }, /* @__PURE__ */ React4.createElement(StackContext.Provider, {
350
- value: {
351
- onCollapse: handleCollapse,
352
- onNavigate: handleNavigate,
353
- onDelete: handleDelete,
354
- onAdd: handleAdd
355
- }
356
- }, /* @__PURE__ */ React4.createElement(Stack, {
357
- orientation: "vertical",
358
- size: "intrinsic",
359
- separators: false,
360
- id,
361
- "data-testid": "main.stack"
362
- }, items.map((item) => /* @__PURE__ */ React4.createElement(StackSection, {
363
- key: item.id,
364
- ...item
365
- }))), items.length === 0 ? /* @__PURE__ */ React4.createElement(AddSection, {
366
- collection
367
- }) : /* @__PURE__ */ React4.createElement("div", {
368
- role: "none",
369
- className: "flex mlb-2 pli-2 justify-center"
370
- }, /* @__PURE__ */ React4.createElement(Button, {
371
- "data-testid": "stack.createSection",
372
- classNames: "gap-2",
373
- onClick: () => dispatch?.({
374
- action: LayoutAction.SET_LAYOUT,
375
- data: {
376
- element: "dialog",
377
- component: "dxos.org/plugin/stack/AddSectionDialog",
378
- subject: {
379
- position: "afterAll",
380
- collection
381
- }
382
- }
383
- })
384
- }, /* @__PURE__ */ React4.createElement(Plus, null), /* @__PURE__ */ React4.createElement("span", {
385
- className: "sr-only"
386
- }, t("add section label"))))));
387
- };
388
- var StackMain_default = StackMain;
389
- export {
390
- StackMain_default as default
391
- };
392
- //# sourceMappingURL=StackMain-5I43UWGF.mjs.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../src/components/StackMain.tsx", "../../../src/components/AddSection.tsx", "../../../src/components/StackContext.tsx", "../../../src/components/StackSection.tsx", "../../../src/components/CaretDownUp.tsx"],
4
- "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { Plus } from '@phosphor-icons/react';\nimport React, { useEffect, useMemo, useState } from 'react';\n\nimport {\n LayoutAction,\n NavigationAction,\n parseMetadataResolverPlugin,\n useIntentDispatcher,\n useResolvePlugin,\n} from '@dxos/app-framework';\nimport { create, getType, fullyQualifiedId } from '@dxos/client/echo';\nimport { useGraph } from '@dxos/plugin-graph';\nimport { SpaceAction } from '@dxos/plugin-space';\nimport { type CollectionType } from '@dxos/plugin-space/types';\nimport { Button, toLocalizedString, useTranslation } from '@dxos/react-ui';\nimport { AttentionProvider } from '@dxos/react-ui-attention';\nimport { Stack } from '@dxos/react-ui-stack';\nimport { nonNullable } from '@dxos/util';\n\nimport { AddSection } from './AddSection';\nimport { StackContext } from './StackContext';\nimport { StackSection } from './StackSection';\nimport { STACK_PLUGIN } from '../meta';\nimport {\n StackViewType,\n type CollapsedSections,\n type StackSectionMetadata,\n type StackSectionView,\n type StackSectionItem,\n type AddSectionPosition,\n} from '../types';\n\ntype StackMainProps = {\n id: string;\n collection: CollectionType;\n};\n\nconst StackMain = ({ id, collection }: StackMainProps) => {\n const dispatch = useIntentDispatcher();\n const { graph } = useGraph();\n const { t } = useTranslation(STACK_PLUGIN);\n const metadataPlugin = useResolvePlugin(parseMetadataResolverPlugin);\n const defaultStack = useMemo(() => create(StackViewType, { sections: {} }), [collection]);\n const stack = (collection.views[StackViewType.typename] as StackViewType) ?? defaultStack;\n const [collapsedSections, setCollapsedSections] = useState<CollapsedSections>({});\n\n useEffect(() => {\n if (!collection.views[StackViewType.typename]) {\n collection.views[StackViewType.typename] = stack;\n }\n }, [collection, stack]);\n\n const items =\n collection.objects\n // TODO(wittjosiah): Should the database handle this differently?\n // TODO(wittjosiah): Render placeholders for missing objects so they can be removed from the stack?\n .filter(nonNullable)\n .map((object) => {\n const metadata = metadataPlugin?.provides.metadata.resolver(\n getType(object)?.objectId ?? 'never',\n ) as StackSectionMetadata;\n const view = {\n ...stack.sections[object.id],\n collapsed: collapsedSections[fullyQualifiedId(object)],\n title:\n (object as any)?.title ?? toLocalizedString(graph.findNode(fullyQualifiedId(object))?.properties.label, t),\n } as StackSectionView;\n return { id: fullyQualifiedId(object), object, metadata, view } satisfies StackSectionItem;\n }) ?? [];\n\n const handleDelete = async (id: string) => {\n const index = collection.objects.filter(nonNullable).findIndex((section) => fullyQualifiedId(section) === id);\n if (index >= 0) {\n await dispatch({\n action: SpaceAction.REMOVE_OBJECTS,\n data: { objects: [collection.objects[index]], collection },\n });\n\n // TODO(wittjosiah): The section should also be removed, but needs to be restored if the action is undone.\n // delete stack.sections[Path.last(path)];\n }\n };\n\n const handleAdd = (id: string, position: AddSectionPosition) => {\n void dispatch?.({\n action: LayoutAction.SET_LAYOUT,\n data: {\n element: 'dialog',\n component: `${STACK_PLUGIN}/AddSectionDialog`,\n subject: { path: id, position, collection },\n },\n });\n };\n\n const handleNavigate = async (id: string) => {\n await dispatch([\n {\n action: NavigationAction.OPEN,\n data: { activeParts: { main: [id] } },\n },\n {\n action: LayoutAction.SCROLL_INTO_VIEW,\n data: { id },\n },\n ]);\n };\n\n const handleCollapse = (id: string, collapsed: boolean) => {\n setCollapsedSections((prev) => ({ ...prev, [id]: collapsed }));\n };\n\n return (\n <AttentionProvider id={id}>\n <StackContext.Provider\n value={{\n onCollapse: handleCollapse,\n onNavigate: handleNavigate,\n onDelete: handleDelete,\n onAdd: handleAdd,\n }}\n >\n <Stack orientation='vertical' size='intrinsic' separators={false} id={id} data-testid='main.stack'>\n {items.map((item) => (\n <StackSection key={item.id} {...item} />\n ))}\n </Stack>\n\n {items.length === 0 ? (\n <AddSection collection={collection} />\n ) : (\n <div role='none' className='flex mlb-2 pli-2 justify-center'>\n <Button\n data-testid='stack.createSection'\n classNames='gap-2'\n onClick={() =>\n dispatch?.({\n action: LayoutAction.SET_LAYOUT,\n data: {\n element: 'dialog',\n component: 'dxos.org/plugin/stack/AddSectionDialog',\n subject: { position: 'afterAll', collection },\n },\n })\n }\n >\n <Plus />\n <span className='sr-only'>{t('add section label')}</span>\n </Button>\n </div>\n )}\n </StackContext.Provider>\n </AttentionProvider>\n );\n};\n\nexport default StackMain;\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { type IconProps } from '@phosphor-icons/react';\nimport React, { type FC, type KeyboardEvent, type MouseEvent, useCallback } from 'react';\n\nimport { usePlugin, useIntentDispatcher } from '@dxos/app-framework';\nimport { type CollectionType } from '@dxos/plugin-space/types';\nimport { toLocalizedString, useTranslation } from '@dxos/react-ui';\nimport { getSize, mx } from '@dxos/react-ui-theme';\n\nimport { STACK_PLUGIN } from '../meta';\nimport { StackViewType, type StackSectionCreator, type StackPluginProvides } from '../types';\n\nconst CreatorTile = ({\n Icon,\n label,\n testId,\n handleAdd,\n}: {\n Icon: FC<IconProps>;\n testId: string;\n label: string;\n handleAdd: () => void;\n}) => {\n const onClick = useCallback((_: MouseEvent<HTMLDivElement>) => handleAdd(), [handleAdd]);\n const onKeyDown = useCallback(\n (event: KeyboardEvent<HTMLDivElement>) => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n handleAdd();\n }\n },\n [handleAdd],\n );\n\n return (\n <div\n role='button'\n aria-label={label}\n tabIndex={0}\n className={mx(\n 'flex items-center w-[10rem] h-16 overflow-hidden',\n 'border rounded-md border-separator shadow-sm hover:bg-hoverSurface cursor-pointer',\n )}\n onClick={onClick}\n onKeyDown={onKeyDown}\n data-testid={testId}\n >\n <div className='flex h-full w-12 items-center justify-center bg-scrim shrink-0 border-r border-separator'>\n <Icon weight='thin' className={getSize(6)} />\n </div>\n <div className='overflow-hidden items-center p-2 px-3'>\n <span className='capitalize'>{label}</span>\n </div>\n </div>\n );\n};\n\nexport const AddSection = ({ collection }: { collection: CollectionType }) => {\n const domAttributes = useArrowNavigationGroup({ axis: 'grid' });\n const dispatch = useIntentDispatcher();\n const { t } = useTranslation(STACK_PLUGIN);\n\n const stackPlugin = usePlugin<StackPluginProvides>(STACK_PLUGIN);\n const stackCreators = stackPlugin?.provides?.stack.creators ?? [];\n\n const handleAdd = useCallback(\n async (creator: StackSectionCreator) => {\n const { data: section } = (await dispatch(creator.intent)) ?? {};\n collection.objects = [section];\n const stack = collection.views[StackViewType.typename];\n if (stack) {\n stack.sections[section.id] = {};\n }\n },\n [collection, dispatch],\n );\n\n if (stackCreators.length === 0) {\n return null;\n }\n\n return (\n <div {...domAttributes} role='none' className='flex flex-wrap items-center p-8 gap-4'>\n {stackCreators.map((creator) => {\n const { id, type, icon, testId } = creator;\n return (\n <CreatorTile\n key={id}\n label={toLocalizedString(type, t)}\n testId={testId}\n Icon={icon}\n handleAdd={() => handleAdd(creator)}\n />\n );\n })}\n </div>\n );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { createContext, useContext } from 'react';\n\nimport { type AddSectionPosition } from '../types';\n\nexport type StackContextValue = {\n onCollapse: (id: string, collapsed: boolean) => void;\n onNavigate: (id: string) => Promise<void>;\n onDelete: (id: string) => Promise<void>;\n onAdd: (id: string, position: AddSectionPosition) => void;\n};\n\nexport const StackContext = createContext<StackContextValue>({\n onCollapse: () => {},\n onNavigate: async () => {},\n onDelete: async () => {},\n onAdd: () => {},\n});\n\nexport const useStack = () => useContext(StackContext);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport * as CollapsiblePrimitive from '@radix-ui/react-collapsible';\nimport React, { useState } from 'react';\n\nimport { Surface } from '@dxos/app-framework';\nimport { DropdownMenu, Icon, useTranslation, IconButton } from '@dxos/react-ui';\nimport { useAttendableAttributes } from '@dxos/react-ui-attention';\nimport { StackItem } from '@dxos/react-ui-stack';\nimport { mx, getSize, textBlockWidth } from '@dxos/react-ui-theme';\n\nimport { CaretDownUp } from './CaretDownUp';\nimport { useStack } from './StackContext';\nimport { STACK_PLUGIN } from '../meta';\nimport { type StackSectionItem } from '../types';\n\nconst sectionActionDimensions = 'm-1 p-1 shrink-0 min-bs-0 is-[--rail-action] bs-min';\n\nexport const StackSection = ({\n id,\n view,\n object,\n metadata: { icon = 'ph--placeholder--regular' },\n}: StackSectionItem) => {\n const { t } = useTranslation(STACK_PLUGIN);\n const { onNavigate, onAdd, onCollapse, onDelete } = useStack();\n const [optionsMenuOpen, setOptionsMenuOpen] = useState(false);\n const attendableAttrs = useAttendableAttributes(id);\n\n return (\n <CollapsiblePrimitive.Root asChild open={!view.collapsed} onOpenChange={(nextOpen) => onCollapse?.(id, !nextOpen)}>\n <StackItem.Root item={{ id }} role='section' {...attendableAttrs} classNames='border-be border-separator'>\n <StackItem.Heading classNames='attention-surface border-ie !border-separator'>\n <span className='sr-only'>{view.title}</span>\n <div role='none' className='sticky -block-start-px bg-[--sticky-bg]'>\n <DropdownMenu.Root\n {...{\n open: optionsMenuOpen,\n onOpenChange: setOptionsMenuOpen,\n }}\n >\n <DropdownMenu.Trigger asChild>\n <StackItem.SigilButton>\n <Icon icon={icon} size={5} classNames='transition-opacity' />\n </StackItem.SigilButton>\n </DropdownMenu.Trigger>\n <DropdownMenu.Portal>\n <DropdownMenu.Content style={{ zIndex: 70 }}>\n <DropdownMenu.Viewport>\n {view.collapsed ? (\n <DropdownMenu.Item onClick={() => onNavigate(id)} data-testid='section.navigate-to'>\n <Icon icon='ph--arrow-square-out--regular' size={5} />\n <span className='mis-2 grow'>{t('navigate to section label')}</span>\n </DropdownMenu.Item>\n ) : (\n <CollapsiblePrimitive.Trigger asChild>\n <DropdownMenu.Item>\n <CaretDownUp className={getSize(5)} />\n <span className='mis-2 grow'>{t('collapse label')}</span>\n </DropdownMenu.Item>\n </CollapsiblePrimitive.Trigger>\n )}\n <DropdownMenu.Item onClick={() => onAdd(id, 'before')} data-testid='section.add-before'>\n <Icon icon='ph--arrow-line-up--regular' size={5} />\n <span className='mis-2 grow'>{t('add section before label')}</span>\n </DropdownMenu.Item>\n <DropdownMenu.Item onClick={() => onAdd(id, 'after')} data-testid='section.add-after'>\n <Icon icon='ph--arrow-line-down--regular' size={5} />\n <span className='mis-2 grow'>{t('add section after label')}</span>\n </DropdownMenu.Item>\n <DropdownMenu.Item onClick={() => onDelete(id)} data-testid='section.remove'>\n <Icon icon='ph--trash--regular' size={5} />\n <span className='mis-2 grow'>{t('remove section label')}</span>\n </DropdownMenu.Item>\n </DropdownMenu.Viewport>\n <DropdownMenu.Arrow />\n </DropdownMenu.Content>\n </DropdownMenu.Portal>\n </DropdownMenu.Root>\n {view.collapsed ? (\n <CollapsiblePrimitive.Trigger asChild>\n <IconButton\n iconOnly\n tooltipZIndex='70'\n variant='ghost'\n label={t('expand label')}\n icon='ph--caret-up-down--regular'\n classNames={sectionActionDimensions}\n />\n </CollapsiblePrimitive.Trigger>\n ) : (\n <IconButton\n iconOnly\n tooltipZIndex='70'\n variant='ghost'\n onClick={() => onNavigate(id)}\n label={t('navigate to section label')}\n icon='ph--arrow-square-out--regular'\n data-testid='section.navigate-to'\n classNames={sectionActionDimensions}\n />\n )}\n </div>\n </StackItem.Heading>\n <CollapsiblePrimitive.Content>\n <Surface role='section' data={{ object }} limit={1} placeholder={<></>} />\n </CollapsiblePrimitive.Content>\n {view.collapsed && (\n <StackItem.Content toolbar={false} classNames='attention-surface'>\n <h2 className={mx('flex items-center p-4 font-medium is-full', textBlockWidth)}>{view.title}</h2>\n </StackItem.Content>\n )}\n </StackItem.Root>\n </CollapsiblePrimitive.Root>\n );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { type ComponentPropsWithoutRef } from 'react';\n\nexport const CaretDownUp = ({ children, ...props }: ComponentPropsWithoutRef<'svg'>) => {\n return (\n <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' {...props}>\n <rect width='256' height='256' fill='none' />\n <polyline\n points='80 224 128 176 176 224'\n fill='none'\n stroke='currentColor'\n strokeLinecap='round'\n strokeLinejoin='round'\n strokeWidth='16'\n />\n <polyline\n points='80 32 128 80 176 32'\n fill='none'\n stroke='currentColor'\n strokeLinecap='round'\n strokeLinejoin='round'\n strokeWidth='16'\n />\n {children}\n </svg>\n );\n};\n"],
5
- "mappings": ";;;;;;;;;AAIA,SAASA,YAAY;AACrB,OAAOC,UAASC,WAAWC,SAASC,YAAAA,iBAAgB;AAEpD,SACEC,cACAC,kBACAC,6BACAC,uBAAAA,sBACAC,wBACK;AACP,SAASC,QAAQC,SAASC,wBAAwB;AAClD,SAASC,gBAAgB;AACzB,SAASC,mBAAmB;AAE5B,SAASC,QAAQC,qBAAAA,oBAAmBC,kBAAAA,uBAAsB;AAC1D,SAASC,yBAAyB;AAClC,SAASC,aAAa;AACtB,SAASC,mBAAmB;;;ACjB5B,SAASC,+BAA+B;AAExC,OAAOC,SAAuDC,mBAAmB;AAEjF,SAASC,WAAWC,2BAA2B;AAE/C,SAASC,mBAAmBC,sBAAsB;AAClD,SAASC,SAASC,UAAU;AAK5B,IAAMC,cAAc,CAAC,EACnBC,MAAAA,OACAC,OACAC,QACAC,UAAS,MAMV;AACC,QAAMC,UAAUC,YAAY,CAACC,MAAkCH,UAAAA,GAAa;IAACA;GAAU;AACvF,QAAMI,YAAYF,YAChB,CAACG,UAAAA;AACC,QAAIA,MAAMC,QAAQ,WAAWD,MAAMC,QAAQ,KAAK;AAC9CD,YAAME,eAAc;AACpBP,gBAAAA;IACF;EACF,GACA;IAACA;GAAU;AAGb,SACE,sBAAA,cAACQ,OAAAA;IACCC,MAAK;IACLC,cAAYZ;IACZa,UAAU;IACVC,WAAWC,GACT,oDACA,mFAAA;IAEFZ;IACAG;IACAU,eAAaf;KAEb,sBAAA,cAACS,OAAAA;IAAII,WAAU;KACb,sBAAA,cAACf,OAAAA;IAAKkB,QAAO;IAAOH,WAAWI,QAAQ,CAAA;OAEzC,sBAAA,cAACR,OAAAA;IAAII,WAAU;KACb,sBAAA,cAACK,QAAAA;IAAKL,WAAU;KAAcd,KAAAA,CAAAA,CAAAA;AAItC;AAEO,IAAMoB,aAAa,CAAC,EAAEC,WAAU,MAAkC;AACvE,QAAMC,gBAAgBC,wBAAwB;IAAEC,MAAM;EAAO,CAAA;AAC7D,QAAMC,WAAWC,oBAAAA;AACjB,QAAM,EAAEC,EAAC,IAAKC,eAAeC,YAAAA;AAE7B,QAAMC,cAAcC,UAA+BF,YAAAA;AACnD,QAAMG,gBAAgBF,aAAaG,UAAUC,MAAMC,YAAY,CAAA;AAE/D,QAAMjC,YAAYE,YAChB,OAAOgC,YAAAA;AACL,UAAM,EAAEC,MAAMC,QAAO,IAAM,MAAMb,SAASW,QAAQG,MAAM,KAAM,CAAC;AAC/DlB,eAAWmB,UAAU;MAACF;;AACtB,UAAMJ,QAAQb,WAAWoB,MAAMC,cAAcC,QAAQ;AACrD,QAAIT,OAAO;AACTA,YAAMU,SAASN,QAAQO,EAAE,IAAI,CAAC;IAChC;EACF,GACA;IAACxB;IAAYI;GAAS;AAGxB,MAAIO,cAAcc,WAAW,GAAG;AAC9B,WAAO;EACT;AAEA,SACE,sBAAA,cAACpC,OAAAA;IAAK,GAAGY;IAAeX,MAAK;IAAOG,WAAU;KAC3CkB,cAAce,IAAI,CAACX,YAAAA;AAClB,UAAM,EAAES,IAAIG,MAAMC,MAAMhD,OAAM,IAAKmC;AACnC,WACE,sBAAA,cAACtC,aAAAA;MACCU,KAAKqC;MACL7C,OAAOkD,kBAAkBF,MAAMrB,CAAAA;MAC/B1B;MACAF,MAAMkD;MACN/C,WAAW,MAAMA,UAAUkC,OAAAA;;EAGjC,CAAA,CAAA;AAGN;;;ACjGA,SAASe,eAAeC,kBAAkB;AAWnC,IAAMC,eAAeC,8BAAiC;EAC3DC,YAAY,MAAA;EAAO;EACnBC,YAAY,YAAA;EAAa;EACzBC,UAAU,YAAA;EAAa;EACvBC,OAAO,MAAA;EAAO;AAChB,CAAA;AAEO,IAAMC,WAAW,MAAMC,WAAWP,YAAAA;;;AClBzC,YAAYQ,0BAA0B;AACtC,OAAOC,UAASC,gBAAgB;AAEhC,SAASC,eAAe;AACxB,SAASC,cAAcC,MAAMC,kBAAAA,iBAAgBC,kBAAkB;AAC/D,SAASC,+BAA+B;AACxC,SAASC,iBAAiB;AAC1B,SAASC,MAAAA,KAAIC,WAAAA,UAASC,sBAAsB;;;ACP5C,OAAOC,YAA8C;AAE9C,IAAMC,cAAc,CAAC,EAAEC,UAAU,GAAGC,MAAAA,MAAwC;AACjF,SACE,gBAAAC,OAAA,cAACC,OAAAA;IAAIC,OAAM;IAA6BC,SAAQ;IAAe,GAAGJ;KAChE,gBAAAC,OAAA,cAACI,QAAAA;IAAKC,OAAM;IAAMC,QAAO;IAAMC,MAAK;MACpC,gBAAAP,OAAA,cAACQ,YAAAA;IACCC,QAAO;IACPF,MAAK;IACLG,QAAO;IACPC,eAAc;IACdC,gBAAe;IACfC,aAAY;MAEd,gBAAAb,OAAA,cAACQ,YAAAA;IACCC,QAAO;IACPF,MAAK;IACLG,QAAO;IACPC,eAAc;IACdC,gBAAe;IACfC,aAAY;MAEbf,QAAAA;AAGP;;;ADXA,IAAMgB,0BAA0B;AAEzB,IAAMC,eAAe,CAAC,EAC3BC,IACAC,MACAC,QACAC,UAAU,EAAEC,OAAO,2BAA0B,EAAE,MAC9B;AACjB,QAAM,EAAEC,EAAC,IAAKC,gBAAeC,YAAAA;AAC7B,QAAM,EAAEC,YAAYC,OAAOC,YAAYC,SAAQ,IAAKC,SAAAA;AACpD,QAAM,CAACC,iBAAiBC,kBAAAA,IAAsBC,SAAS,KAAA;AACvD,QAAMC,kBAAkBC,wBAAwBjB,EAAAA;AAEhD,SACE,gBAAAkB,OAAA,cAAsBC,2BAAI;IAACC,SAAAA;IAAQC,MAAM,CAACpB,KAAKqB;IAAWC,cAAc,CAACC,aAAad,aAAaV,IAAI,CAACwB,QAAAA;KACtG,gBAAAN,OAAA,cAACO,UAAUN,MAAI;IAACO,MAAM;MAAE1B;IAAG;IAAG2B,MAAK;IAAW,GAAGX;IAAiBY,YAAW;KAC3E,gBAAAV,OAAA,cAACO,UAAUI,SAAO;IAACD,YAAW;KAC5B,gBAAAV,OAAA,cAACY,QAAAA;IAAKC,WAAU;KAAW9B,KAAK+B,KAAK,GACrC,gBAAAd,OAAA,cAACe,OAAAA;IAAIN,MAAK;IAAOI,WAAU;KACzB,gBAAAb,OAAA,cAACgB,aAAaf,MACR;IACFE,MAAMR;IACNU,cAAcT;EAChB,GAEA,gBAAAI,OAAA,cAACgB,aAAaC,SAAO;IAACf,SAAAA;KACpB,gBAAAF,OAAA,cAACO,UAAUW,aAAW,MACpB,gBAAAlB,OAAA,cAACmB,MAAAA;IAAKjC;IAAYkC,MAAM;IAAGV,YAAW;QAG1C,gBAAAV,OAAA,cAACgB,aAAaK,QAAM,MAClB,gBAAArB,OAAA,cAACgB,aAAaM,SAAO;IAACC,OAAO;MAAEC,QAAQ;IAAG;KACxC,gBAAAxB,OAAA,cAACgB,aAAaS,UAAQ,MACnB1C,KAAKqB,YACJ,gBAAAJ,OAAA,cAACgB,aAAaU,MAAI;IAACC,SAAS,MAAMrC,WAAWR,EAAAA;IAAK8C,eAAY;KAC5D,gBAAA5B,OAAA,cAACmB,MAAAA;IAAKjC,MAAK;IAAgCkC,MAAM;MACjD,gBAAApB,OAAA,cAACY,QAAAA;IAAKC,WAAU;KAAc1B,EAAE,2BAAA,CAAA,CAAA,IAGlC,gBAAAa,OAAA,cAAsBiB,8BAAO;IAACf,SAAAA;KAC5B,gBAAAF,OAAA,cAACgB,aAAaU,MAAI,MAChB,gBAAA1B,OAAA,cAAC6B,aAAAA;IAAYhB,WAAWiB,SAAQ,CAAA;MAChC,gBAAA9B,OAAA,cAACY,QAAAA;IAAKC,WAAU;KAAc1B,EAAE,gBAAA,CAAA,CAAA,CAAA,GAItC,gBAAAa,OAAA,cAACgB,aAAaU,MAAI;IAACC,SAAS,MAAMpC,MAAMT,IAAI,QAAA;IAAW8C,eAAY;KACjE,gBAAA5B,OAAA,cAACmB,MAAAA;IAAKjC,MAAK;IAA6BkC,MAAM;MAC9C,gBAAApB,OAAA,cAACY,QAAAA;IAAKC,WAAU;KAAc1B,EAAE,0BAAA,CAAA,CAAA,GAElC,gBAAAa,OAAA,cAACgB,aAAaU,MAAI;IAACC,SAAS,MAAMpC,MAAMT,IAAI,OAAA;IAAU8C,eAAY;KAChE,gBAAA5B,OAAA,cAACmB,MAAAA;IAAKjC,MAAK;IAA+BkC,MAAM;MAChD,gBAAApB,OAAA,cAACY,QAAAA;IAAKC,WAAU;KAAc1B,EAAE,yBAAA,CAAA,CAAA,GAElC,gBAAAa,OAAA,cAACgB,aAAaU,MAAI;IAACC,SAAS,MAAMlC,SAASX,EAAAA;IAAK8C,eAAY;KAC1D,gBAAA5B,OAAA,cAACmB,MAAAA;IAAKjC,MAAK;IAAqBkC,MAAM;MACtC,gBAAApB,OAAA,cAACY,QAAAA;IAAKC,WAAU;KAAc1B,EAAE,sBAAA,CAAA,CAAA,CAAA,GAGpC,gBAAAa,OAAA,cAACgB,aAAae,OAAK,IAAA,CAAA,CAAA,CAAA,GAIxBhD,KAAKqB,YACJ,gBAAAJ,OAAA,cAAsBiB,8BAAO;IAACf,SAAAA;KAC5B,gBAAAF,OAAA,cAACgC,YAAAA;IACCC,UAAAA;IACAC,eAAc;IACdC,SAAQ;IACRC,OAAOjD,EAAE,cAAA;IACTD,MAAK;IACLwB,YAAY9B;QAIhB,gBAAAoB,OAAA,cAACgC,YAAAA;IACCC,UAAAA;IACAC,eAAc;IACdC,SAAQ;IACRR,SAAS,MAAMrC,WAAWR,EAAAA;IAC1BsD,OAAOjD,EAAE,2BAAA;IACTD,MAAK;IACL0C,eAAY;IACZlB,YAAY9B;QAKpB,gBAAAoB,OAAA,cAAsBsB,8BAAO,MAC3B,gBAAAtB,OAAA,cAACqC,SAAAA;IAAQ5B,MAAK;IAAU6B,MAAM;MAAEtD;IAAO;IAAGuD,OAAO;IAAGC,aAAa,gBAAAxC,OAAA,cAAAA,OAAA,UAAA,IAAA;OAElEjB,KAAKqB,aACJ,gBAAAJ,OAAA,cAACO,UAAUe,SAAO;IAACmB,SAAS;IAAO/B,YAAW;KAC5C,gBAAAV,OAAA,cAAC0C,MAAAA;IAAG7B,WAAW8B,IAAG,6CAA6CC,cAAAA;KAAkB7D,KAAK+B,KAAK,CAAA,CAAA,CAAA;AAMvG;;;AH5EA,IAAM+B,YAAY,CAAC,EAAEC,IAAIC,WAAU,MAAkB;AACnD,QAAMC,WAAWC,qBAAAA;AACjB,QAAM,EAAEC,MAAK,IAAKC,SAAAA;AAClB,QAAM,EAAEC,EAAC,IAAKC,gBAAeC,YAAAA;AAC7B,QAAMC,iBAAiBC,iBAAiBC,2BAAAA;AACxC,QAAMC,eAAeC,QAAQ,MAAMC,OAAOC,eAAe;IAAEC,UAAU,CAAC;EAAE,CAAA,GAAI;IAACf;GAAW;AACxF,QAAMgB,QAAShB,WAAWiB,MAAMH,cAAcI,QAAQ,KAAuBP;AAC7E,QAAM,CAACQ,mBAAmBC,oBAAAA,IAAwBC,UAA4B,CAAC,CAAA;AAE/EC,YAAU,MAAA;AACR,QAAI,CAACtB,WAAWiB,MAAMH,cAAcI,QAAQ,GAAG;AAC7ClB,iBAAWiB,MAAMH,cAAcI,QAAQ,IAAIF;IAC7C;EACF,GAAG;IAAChB;IAAYgB;GAAM;AAEtB,QAAMO,QACJvB,WAAWwB,QAGRC,OAAOC,WAAAA,EACPC,IAAI,CAACC,WAAAA;AACJ,UAAMC,WAAWrB,gBAAgBsB,SAASD,SAASE,SACjDC,QAAQJ,MAAAA,GAASK,YAAY,OAAA;AAE/B,UAAMC,OAAO;MACX,GAAGlB,MAAMD,SAASa,OAAO7B,EAAE;MAC3BoC,WAAWhB,kBAAkBiB,iBAAiBR,MAAAA,CAAAA;MAC9CS,OACGT,QAAgBS,SAASC,mBAAkBnC,MAAMoC,SAASH,iBAAiBR,MAAAA,CAAAA,GAAUY,WAAWC,OAAOpC,CAAAA;IAC5G;AACA,WAAO;MAAEN,IAAIqC,iBAAiBR,MAAAA;MAASA;MAAQC;MAAUK;IAAK;EAChE,CAAA,KAAM,CAAA;AAEV,QAAMQ,eAAe,OAAO3C,QAAAA;AAC1B,UAAM4C,QAAQ3C,WAAWwB,QAAQC,OAAOC,WAAAA,EAAakB,UAAU,CAACC,YAAYT,iBAAiBS,OAAAA,MAAa9C,GAAAA;AAC1G,QAAI4C,SAAS,GAAG;AACd,YAAM1C,SAAS;QACb6C,QAAQC,YAAYC;QACpBC,MAAM;UAAEzB,SAAS;YAACxB,WAAWwB,QAAQmB,KAAAA;;UAAS3C;QAAW;MAC3D,CAAA;IAIF;EACF;AAEA,QAAMkD,YAAY,CAACnD,KAAYoD,aAAAA;AAC7B,SAAKlD,WAAW;MACd6C,QAAQM,aAAaC;MACrBJ,MAAM;QACJK,SAAS;QACTC,WAAW,GAAGhD,YAAAA;QACdiD,SAAS;UAAEC,MAAM1D;UAAIoD;UAAUnD;QAAW;MAC5C;IACF,CAAA;EACF;AAEA,QAAM0D,iBAAiB,OAAO3D,QAAAA;AAC5B,UAAME,SAAS;MACb;QACE6C,QAAQa,iBAAiBC;QACzBX,MAAM;UAAEY,aAAa;YAAEC,MAAM;cAAC/D;;UAAI;QAAE;MACtC;MACA;QACE+C,QAAQM,aAAaW;QACrBd,MAAM;UAAElD,IAAAA;QAAG;MACb;KACD;EACH;AAEA,QAAMiE,iBAAiB,CAACjE,KAAYoC,cAAAA;AAClCf,yBAAqB,CAAC6C,UAAU;MAAE,GAAGA;MAAM,CAAClE,GAAAA,GAAKoC;IAAU,EAAA;EAC7D;AAEA,SACE,gBAAA+B,OAAA,cAACC,mBAAAA;IAAkBpE;KACjB,gBAAAmE,OAAA,cAACE,aAAaC,UAAQ;IACpBC,OAAO;MACLC,YAAYP;MACZQ,YAAYd;MACZe,UAAU/B;MACVgC,OAAOxB;IACT;KAEA,gBAAAgB,OAAA,cAACS,OAAAA;IAAMC,aAAY;IAAWC,MAAK;IAAYC,YAAY;IAAO/E;IAAQgF,eAAY;KACnFxD,MAAMI,IAAI,CAACqD,SACV,gBAAAd,OAAA,cAACe,cAAAA;IAAaC,KAAKF,KAAKjF;IAAK,GAAGiF;QAInCzD,MAAM4D,WAAW,IAChB,gBAAAjB,OAAA,cAACkB,YAAAA;IAAWpF;OAEZ,gBAAAkE,OAAA,cAACmB,OAAAA;IAAIC,MAAK;IAAOC,WAAU;KACzB,gBAAArB,OAAA,cAACsB,QAAAA;IACCT,eAAY;IACZU,YAAW;IACXC,SAAS,MACPzF,WAAW;MACT6C,QAAQM,aAAaC;MACrBJ,MAAM;QACJK,SAAS;QACTC,WAAW;QACXC,SAAS;UAAEL,UAAU;UAAYnD;QAAW;MAC9C;IACF,CAAA;KAGF,gBAAAkE,OAAA,cAACyB,MAAAA,IAAAA,GACD,gBAAAzB,OAAA,cAAC0B,QAAAA;IAAKL,WAAU;KAAWlF,EAAE,mBAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAO3C;AAEA,IAAA,oBAAeP;",
6
- "names": ["Plus", "React", "useEffect", "useMemo", "useState", "LayoutAction", "NavigationAction", "parseMetadataResolverPlugin", "useIntentDispatcher", "useResolvePlugin", "create", "getType", "fullyQualifiedId", "useGraph", "SpaceAction", "Button", "toLocalizedString", "useTranslation", "AttentionProvider", "Stack", "nonNullable", "useArrowNavigationGroup", "React", "useCallback", "usePlugin", "useIntentDispatcher", "toLocalizedString", "useTranslation", "getSize", "mx", "CreatorTile", "Icon", "label", "testId", "handleAdd", "onClick", "useCallback", "_", "onKeyDown", "event", "key", "preventDefault", "div", "role", "aria-label", "tabIndex", "className", "mx", "data-testid", "weight", "getSize", "span", "AddSection", "collection", "domAttributes", "useArrowNavigationGroup", "axis", "dispatch", "useIntentDispatcher", "t", "useTranslation", "STACK_PLUGIN", "stackPlugin", "usePlugin", "stackCreators", "provides", "stack", "creators", "creator", "data", "section", "intent", "objects", "views", "StackViewType", "typename", "sections", "id", "length", "map", "type", "icon", "toLocalizedString", "createContext", "useContext", "StackContext", "createContext", "onCollapse", "onNavigate", "onDelete", "onAdd", "useStack", "useContext", "CollapsiblePrimitive", "React", "useState", "Surface", "DropdownMenu", "Icon", "useTranslation", "IconButton", "useAttendableAttributes", "StackItem", "mx", "getSize", "textBlockWidth", "React", "CaretDownUp", "children", "props", "React", "svg", "xmlns", "viewBox", "rect", "width", "height", "fill", "polyline", "points", "stroke", "strokeLinecap", "strokeLinejoin", "strokeWidth", "sectionActionDimensions", "StackSection", "id", "view", "object", "metadata", "icon", "t", "useTranslation", "STACK_PLUGIN", "onNavigate", "onAdd", "onCollapse", "onDelete", "useStack", "optionsMenuOpen", "setOptionsMenuOpen", "useState", "attendableAttrs", "useAttendableAttributes", "React", "Root", "asChild", "open", "collapsed", "onOpenChange", "nextOpen", "StackItem", "item", "role", "classNames", "Heading", "span", "className", "title", "div", "DropdownMenu", "Trigger", "SigilButton", "Icon", "size", "Portal", "Content", "style", "zIndex", "Viewport", "Item", "onClick", "data-testid", "CaretDownUp", "getSize", "Arrow", "IconButton", "iconOnly", "tooltipZIndex", "variant", "label", "Surface", "data", "limit", "placeholder", "toolbar", "h2", "mx", "textBlockWidth", "StackMain", "id", "collection", "dispatch", "useIntentDispatcher", "graph", "useGraph", "t", "useTranslation", "STACK_PLUGIN", "metadataPlugin", "useResolvePlugin", "parseMetadataResolverPlugin", "defaultStack", "useMemo", "create", "StackViewType", "sections", "stack", "views", "typename", "collapsedSections", "setCollapsedSections", "useState", "useEffect", "items", "objects", "filter", "nonNullable", "map", "object", "metadata", "provides", "resolver", "getType", "objectId", "view", "collapsed", "fullyQualifiedId", "title", "toLocalizedString", "findNode", "properties", "label", "handleDelete", "index", "findIndex", "section", "action", "SpaceAction", "REMOVE_OBJECTS", "data", "handleAdd", "position", "LayoutAction", "SET_LAYOUT", "element", "component", "subject", "path", "handleNavigate", "NavigationAction", "OPEN", "activeParts", "main", "SCROLL_INTO_VIEW", "handleCollapse", "prev", "React", "AttentionProvider", "StackContext", "Provider", "value", "onCollapse", "onNavigate", "onDelete", "onAdd", "Stack", "orientation", "size", "separators", "data-testid", "item", "StackSection", "key", "length", "AddSection", "div", "role", "className", "Button", "classNames", "onClick", "Plus", "span"]
7
- }
@@ -1,6 +0,0 @@
1
- import React from 'react';
2
- import { type CollectionType } from '@dxos/plugin-space/types';
3
- export declare const AddSection: ({ collection }: {
4
- collection: CollectionType;
5
- }) => React.JSX.Element | null;
6
- //# sourceMappingURL=AddSection.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AddSection.d.ts","sourceRoot":"","sources":["../../../../src/components/AddSection.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAoE,MAAM,OAAO,CAAC;AAGzF,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAoD/D,eAAO,MAAM,UAAU,mBAAoB;IAAE,UAAU,EAAE,cAAc,CAAA;CAAE,6BAwCxE,CAAC"}
@@ -1,14 +0,0 @@
1
- import React from 'react';
2
- import { type CollectionType } from '@dxos/plugin-space/types';
3
- import { type AddSectionPosition } from '../types';
4
- type AddSectionDialogProps = {
5
- path?: string;
6
- position: AddSectionPosition;
7
- collection: CollectionType;
8
- };
9
- export declare const dataHasAddSectionDialogProps: (data: any) => data is {
10
- subject: AddSectionDialogProps;
11
- };
12
- export declare const AddSectionDialog: ({ path, position, collection }: AddSectionDialogProps) => React.JSX.Element;
13
- export {};
14
- //# sourceMappingURL=AddSectionDialog.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AddSectionDialog.d.ts","sourceRoot":"","sources":["../../../../src/components/AddSectionDialog.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAK7D,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAQ/D,OAAO,EAA2C,KAAK,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAE5F,KAAK,qBAAqB,GAAG;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,kBAAkB,CAAC;IAAC,UAAU,EAAE,cAAc,CAAA;CAAE,CAAC;AAEzG,eAAO,MAAM,4BAA4B,SAAU,GAAG,KAAG,IAAI,IAAI;IAAE,OAAO,EAAE,qBAAqB,CAAA;CAShG,CAAC;AAEF,eAAO,MAAM,gBAAgB,mCAAoC,qBAAqB,sBA8FrF,CAAC"}
@@ -1,102 +0,0 @@
1
- //
2
- // Copyright 2024 DXOS.org
3
- //
4
-
5
- import { useArrowNavigationGroup } from '@fluentui/react-tabster';
6
- import { type IconProps } from '@phosphor-icons/react';
7
- import React, { type FC, type KeyboardEvent, type MouseEvent, useCallback } from 'react';
8
-
9
- import { usePlugin, useIntentDispatcher } from '@dxos/app-framework';
10
- import { type CollectionType } from '@dxos/plugin-space/types';
11
- import { toLocalizedString, useTranslation } from '@dxos/react-ui';
12
- import { getSize, mx } from '@dxos/react-ui-theme';
13
-
14
- import { STACK_PLUGIN } from '../meta';
15
- import { StackViewType, type StackSectionCreator, type StackPluginProvides } from '../types';
16
-
17
- const CreatorTile = ({
18
- Icon,
19
- label,
20
- testId,
21
- handleAdd,
22
- }: {
23
- Icon: FC<IconProps>;
24
- testId: string;
25
- label: string;
26
- handleAdd: () => void;
27
- }) => {
28
- const onClick = useCallback((_: MouseEvent<HTMLDivElement>) => handleAdd(), [handleAdd]);
29
- const onKeyDown = useCallback(
30
- (event: KeyboardEvent<HTMLDivElement>) => {
31
- if (event.key === 'Enter' || event.key === ' ') {
32
- event.preventDefault();
33
- handleAdd();
34
- }
35
- },
36
- [handleAdd],
37
- );
38
-
39
- return (
40
- <div
41
- role='button'
42
- aria-label={label}
43
- tabIndex={0}
44
- className={mx(
45
- 'flex items-center w-[10rem] h-16 overflow-hidden',
46
- 'border rounded-md border-separator shadow-sm hover:bg-hoverSurface cursor-pointer',
47
- )}
48
- onClick={onClick}
49
- onKeyDown={onKeyDown}
50
- data-testid={testId}
51
- >
52
- <div className='flex h-full w-12 items-center justify-center bg-scrim shrink-0 border-r border-separator'>
53
- <Icon weight='thin' className={getSize(6)} />
54
- </div>
55
- <div className='overflow-hidden items-center p-2 px-3'>
56
- <span className='capitalize'>{label}</span>
57
- </div>
58
- </div>
59
- );
60
- };
61
-
62
- export const AddSection = ({ collection }: { collection: CollectionType }) => {
63
- const domAttributes = useArrowNavigationGroup({ axis: 'grid' });
64
- const dispatch = useIntentDispatcher();
65
- const { t } = useTranslation(STACK_PLUGIN);
66
-
67
- const stackPlugin = usePlugin<StackPluginProvides>(STACK_PLUGIN);
68
- const stackCreators = stackPlugin?.provides?.stack.creators ?? [];
69
-
70
- const handleAdd = useCallback(
71
- async (creator: StackSectionCreator) => {
72
- const { data: section } = (await dispatch(creator.intent)) ?? {};
73
- collection.objects = [section];
74
- const stack = collection.views[StackViewType.typename];
75
- if (stack) {
76
- stack.sections[section.id] = {};
77
- }
78
- },
79
- [collection, dispatch],
80
- );
81
-
82
- if (stackCreators.length === 0) {
83
- return null;
84
- }
85
-
86
- return (
87
- <div {...domAttributes} role='none' className='flex flex-wrap items-center p-8 gap-4'>
88
- {stackCreators.map((creator) => {
89
- const { id, type, icon, testId } = creator;
90
- return (
91
- <CreatorTile
92
- key={id}
93
- label={toLocalizedString(type, t)}
94
- testId={testId}
95
- Icon={icon}
96
- handleAdd={() => handleAdd(creator)}
97
- />
98
- );
99
- })}
100
- </div>
101
- );
102
- };