@dxos/plugin-stack 0.8.2-main.fbd8ed0 → 0.8.2-staging.4d6ad0f

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 (33) hide show
  1. package/dist/lib/browser/StackMain-RIX67KLY.mjs +315 -0
  2. package/dist/lib/{node-esm/StackMain-HAQNUG2W.mjs.map → browser/StackMain-RIX67KLY.mjs.map} +1 -1
  3. package/dist/lib/browser/index.mjs +10 -38
  4. package/dist/lib/browser/index.mjs.map +4 -4
  5. package/dist/lib/browser/meta.json +1 -1
  6. package/dist/lib/browser/react-surface-ED2DI7B5.mjs +46 -0
  7. package/dist/lib/browser/react-surface-ED2DI7B5.mjs.map +7 -0
  8. package/dist/lib/node/StackMain-4DMJWHZ3.cjs +329 -0
  9. package/dist/lib/node/{StackMain-ZTTXMOHM.cjs.map → StackMain-4DMJWHZ3.cjs.map} +1 -1
  10. package/dist/lib/node/index.cjs +4 -28
  11. package/dist/lib/node/index.cjs.map +4 -4
  12. package/dist/lib/node/meta.json +1 -1
  13. package/dist/lib/node/react-surface-L52YERMX.cjs +64 -0
  14. package/dist/lib/node/react-surface-L52YERMX.cjs.map +7 -0
  15. package/dist/lib/node-esm/StackMain-7FHYHLK6.mjs +316 -0
  16. package/dist/lib/{browser/StackMain-FRVJIEZU.mjs.map → node-esm/StackMain-7FHYHLK6.mjs.map} +1 -1
  17. package/dist/lib/node-esm/index.mjs +10 -38
  18. package/dist/lib/node-esm/index.mjs.map +4 -4
  19. package/dist/lib/node-esm/meta.json +1 -1
  20. package/dist/lib/node-esm/react-surface-6WUOGQY6.mjs +47 -0
  21. package/dist/lib/node-esm/react-surface-6WUOGQY6.mjs.map +7 -0
  22. package/dist/types/src/StackPlugin.d.ts.map +1 -1
  23. package/dist/types/src/capabilities/index.d.ts +2 -0
  24. package/dist/types/src/capabilities/index.d.ts.map +1 -0
  25. package/dist/types/src/capabilities/react-surface.d.ts +4 -0
  26. package/dist/types/src/capabilities/react-surface.d.ts.map +1 -0
  27. package/package.json +25 -24
  28. package/src/{StackPlugin.tsx → StackPlugin.ts} +5 -28
  29. package/src/capabilities/index.ts +7 -0
  30. package/src/capabilities/react-surface.tsx +33 -0
  31. package/dist/lib/browser/StackMain-FRVJIEZU.mjs +0 -297
  32. package/dist/lib/node/StackMain-ZTTXMOHM.cjs +0 -311
  33. package/dist/lib/node-esm/StackMain-HAQNUG2W.mjs +0 -298
@@ -1,298 +0,0 @@
1
- import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
2
- import {
3
- STACK_PLUGIN
4
- } from "./chunk-YW7WYA4H.mjs";
5
- import {
6
- StackViewType
7
- } from "./chunk-3R62SZZT.mjs";
8
-
9
- // packages/plugins/plugin-stack/src/components/StackMain.tsx
10
- import { Plus } from "@phosphor-icons/react";
11
- import { Option } from "effect";
12
- import React3, { useCallback, useEffect, useMemo, useState as useState2 } from "react";
13
- import { Capabilities, createIntent, LayoutAction, useAppGraph, useCapabilities, useIntentDispatcher } from "@dxos/app-framework";
14
- import { fullyQualifiedId, getTypename, isLiveObject, live, makeRef } from "@dxos/client/echo";
15
- import { SpaceAction } from "@dxos/plugin-space/types";
16
- import { Button, toLocalizedString, useTranslation as useTranslation2 } from "@dxos/react-ui";
17
- import { AttentionProvider } from "@dxos/react-ui-attention";
18
- import { Stack } from "@dxos/react-ui-stack";
19
- import { isNonNullable } from "@dxos/util";
20
-
21
- // packages/plugins/plugin-stack/src/components/StackContext.tsx
22
- import { createContext, useContext } from "react";
23
- var StackContext = /* @__PURE__ */ createContext({
24
- onCollapse: () => {
25
- },
26
- onNavigate: async () => {
27
- },
28
- onDelete: async () => {
29
- },
30
- onAdd: () => {
31
- }
32
- });
33
- var useStack = () => useContext(StackContext);
34
-
35
- // packages/plugins/plugin-stack/src/components/StackSection.tsx
36
- import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
37
- import React2, { useState } from "react";
38
- import { Surface } from "@dxos/app-framework";
39
- import { DropdownMenu, Icon, useTranslation, IconButton } from "@dxos/react-ui";
40
- import { useAttendableAttributes } from "@dxos/react-ui-attention";
41
- import { StackItem } from "@dxos/react-ui-stack";
42
- import { mx, getSize, textBlockWidth } from "@dxos/react-ui-theme";
43
-
44
- // packages/plugins/plugin-stack/src/components/CaretDownUp.tsx
45
- import React from "react";
46
- var CaretDownUp = ({ children, ...props }) => {
47
- return /* @__PURE__ */ React.createElement("svg", {
48
- xmlns: "http://www.w3.org/2000/svg",
49
- viewBox: "0 0 256 256",
50
- ...props
51
- }, /* @__PURE__ */ React.createElement("rect", {
52
- width: "256",
53
- height: "256",
54
- fill: "none"
55
- }), /* @__PURE__ */ React.createElement("polyline", {
56
- points: "80 224 128 176 176 224",
57
- fill: "none",
58
- stroke: "currentColor",
59
- strokeLinecap: "round",
60
- strokeLinejoin: "round",
61
- strokeWidth: "16"
62
- }), /* @__PURE__ */ React.createElement("polyline", {
63
- points: "80 32 128 80 176 32",
64
- fill: "none",
65
- stroke: "currentColor",
66
- strokeLinecap: "round",
67
- strokeLinejoin: "round",
68
- strokeWidth: "16"
69
- }), children);
70
- };
71
-
72
- // packages/plugins/plugin-stack/src/components/StackSection.tsx
73
- var sectionActionDimensions = "p-1 mlb-1 shrink-0 min-bs-0 is-[--rail-action] bs-min";
74
- var StackSection = ({ id, view, object, metadata: { icon = "ph--placeholder--regular" } }) => {
75
- const { t } = useTranslation(STACK_PLUGIN);
76
- const { onNavigate, onAdd, onCollapse, onDelete } = useStack();
77
- const [optionsMenuOpen, setOptionsMenuOpen] = useState(false);
78
- const attendableAttrs = useAttendableAttributes(id);
79
- return /* @__PURE__ */ React2.createElement(CollapsiblePrimitive.Root, {
80
- asChild: true,
81
- open: !view.collapsed,
82
- onOpenChange: (nextOpen) => onCollapse?.(id, !nextOpen)
83
- }, /* @__PURE__ */ React2.createElement(StackItem.Root, {
84
- item: {
85
- id
86
- },
87
- role: "section",
88
- ...attendableAttrs,
89
- classNames: "border-be border-separator"
90
- }, /* @__PURE__ */ React2.createElement(StackItem.Heading, {
91
- classNames: "attention-surface border-ie !border-separator"
92
- }, /* @__PURE__ */ React2.createElement("span", {
93
- className: "sr-only"
94
- }, view.title), /* @__PURE__ */ React2.createElement("div", {
95
- role: "none",
96
- className: "sticky -block-start-px bg-[--sticky-bg] p-1 is-full"
97
- }, /* @__PURE__ */ React2.createElement(DropdownMenu.Root, {
98
- open: optionsMenuOpen,
99
- onOpenChange: setOptionsMenuOpen
100
- }, /* @__PURE__ */ React2.createElement(DropdownMenu.Trigger, {
101
- asChild: true
102
- }, /* @__PURE__ */ React2.createElement(StackItem.SigilButton, null, /* @__PURE__ */ React2.createElement(Icon, {
103
- icon,
104
- size: 5,
105
- classNames: "transition-opacity"
106
- }))), /* @__PURE__ */ React2.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Content, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Viewport, null, view.collapsed ? /* @__PURE__ */ React2.createElement(DropdownMenu.Item, {
107
- onClick: () => onNavigate(id),
108
- "data-testid": "section.navigate-to"
109
- }, /* @__PURE__ */ React2.createElement(Icon, {
110
- icon: "ph--arrow-right--regular",
111
- size: 5
112
- }), /* @__PURE__ */ React2.createElement("span", {
113
- className: "mis-2 grow"
114
- }, t("navigate to section label"))) : /* @__PURE__ */ React2.createElement(CollapsiblePrimitive.Trigger, {
115
- asChild: true
116
- }, /* @__PURE__ */ React2.createElement(DropdownMenu.Item, null, /* @__PURE__ */ React2.createElement(CaretDownUp, {
117
- className: getSize(5)
118
- }), /* @__PURE__ */ React2.createElement("span", {
119
- className: "mis-2 grow"
120
- }, t("collapse label")))), /* @__PURE__ */ React2.createElement(DropdownMenu.Item, {
121
- onClick: () => onAdd(id, "before"),
122
- "data-testid": "section.add-before"
123
- }, /* @__PURE__ */ React2.createElement(Icon, {
124
- icon: "ph--arrow-line-up--regular",
125
- size: 5
126
- }), /* @__PURE__ */ React2.createElement("span", {
127
- className: "mis-2 grow"
128
- }, t("add section before label"))), /* @__PURE__ */ React2.createElement(DropdownMenu.Item, {
129
- onClick: () => onAdd(id, "after"),
130
- "data-testid": "section.add-after"
131
- }, /* @__PURE__ */ React2.createElement(Icon, {
132
- icon: "ph--arrow-line-down--regular",
133
- size: 5
134
- }), /* @__PURE__ */ React2.createElement("span", {
135
- className: "mis-2 grow"
136
- }, t("add section after label"))), /* @__PURE__ */ React2.createElement(DropdownMenu.Item, {
137
- onClick: () => onDelete(id),
138
- "data-testid": "section.remove"
139
- }, /* @__PURE__ */ React2.createElement(Icon, {
140
- icon: "ph--trash--regular",
141
- size: 5
142
- }), /* @__PURE__ */ React2.createElement("span", {
143
- className: "mis-2 grow"
144
- }, t("remove section label")))), /* @__PURE__ */ React2.createElement(DropdownMenu.Arrow, null)))), view.collapsed ? /* @__PURE__ */ React2.createElement(CollapsiblePrimitive.Trigger, {
145
- asChild: true
146
- }, /* @__PURE__ */ React2.createElement(IconButton, {
147
- iconOnly: true,
148
- variant: "ghost",
149
- label: t("expand label"),
150
- icon: "ph--caret-up-down--regular",
151
- classNames: sectionActionDimensions
152
- })) : /* @__PURE__ */ React2.createElement(IconButton, {
153
- iconOnly: true,
154
- variant: "ghost",
155
- onClick: () => onNavigate(id),
156
- label: t("navigate to section label"),
157
- icon: "ph--arrow-right--regular",
158
- "data-testid": "section.navigate-to",
159
- classNames: sectionActionDimensions
160
- }))), /* @__PURE__ */ React2.createElement(CollapsiblePrimitive.Content, null, /* @__PURE__ */ React2.createElement(Surface, {
161
- role: "section",
162
- data: {
163
- subject: object
164
- },
165
- limit: 1,
166
- placeholder: /* @__PURE__ */ React2.createElement(React2.Fragment, null)
167
- })), view.collapsed && /* @__PURE__ */ React2.createElement(StackItem.Content, {
168
- classNames: "attention-surface"
169
- }, /* @__PURE__ */ React2.createElement("h2", {
170
- className: mx("flex items-center p-4 font-medium", textBlockWidth)
171
- }, view.title))));
172
- };
173
-
174
- // packages/plugins/plugin-stack/src/components/StackMain.tsx
175
- var StackMain = ({ id, collection }) => {
176
- const { dispatchPromise: dispatch } = useIntentDispatcher();
177
- const { graph } = useAppGraph();
178
- const { t } = useTranslation2(STACK_PLUGIN);
179
- const allMetadata = useCapabilities(Capabilities.Metadata);
180
- const defaultStack = useMemo(() => live(StackViewType, {
181
- sections: {}
182
- }), [
183
- collection
184
- ]);
185
- const stack = collection.views[StackViewType.typename]?.target ?? defaultStack;
186
- const [collapsedSections, setCollapsedSections] = useState2({});
187
- useEffect(() => {
188
- if (!collection.views[StackViewType.typename]) {
189
- collection.views[StackViewType.typename] = makeRef(stack);
190
- }
191
- }, [
192
- collection,
193
- stack
194
- ]);
195
- const items = collection.objects.map((object) => object.target).filter(isNonNullable).map((object) => {
196
- const metadata = allMetadata.find((m) => m.id === (getTypename(object) ?? "never"))?.metadata;
197
- const view = {
198
- ...stack.sections[object.id],
199
- collapsed: collapsedSections[fullyQualifiedId(object)],
200
- title: object?.title ?? // TODO(wittjosiah): `getNode` is not reactive.
201
- toLocalizedString(graph.getNode(fullyQualifiedId(object)).pipe(Option.getOrNull)?.properties.label, t)
202
- };
203
- return {
204
- id: fullyQualifiedId(object),
205
- object,
206
- metadata,
207
- view
208
- };
209
- }) ?? [];
210
- const handleDelete = useCallback(async (id2) => {
211
- const index = collection.objects.map((object2) => object2.target).filter(isNonNullable).findIndex((section) => fullyQualifiedId(section) === id2);
212
- const object = collection.objects[index].target;
213
- if (isLiveObject(object)) {
214
- await dispatch(createIntent(SpaceAction.RemoveObjects, {
215
- objects: [
216
- object
217
- ],
218
- target: collection
219
- }));
220
- }
221
- }, [
222
- collection,
223
- dispatch
224
- ]);
225
- const handleAdd = useCallback(async (id2, position) => {
226
- await dispatch?.(
227
- // TODO(wittjosiah): Use object creation dialog.
228
- createIntent(LayoutAction.UpdateDialog, {
229
- part: "dialog",
230
- subject: `${STACK_PLUGIN}/AddSectionDialog`,
231
- options: {
232
- blockAlign: "start",
233
- props: {
234
- path: id2,
235
- position,
236
- collection
237
- }
238
- }
239
- })
240
- );
241
- }, [
242
- collection,
243
- dispatch
244
- ]);
245
- const handleNavigate = useCallback(async (id2) => {
246
- await dispatch(createIntent(LayoutAction.Open, {
247
- part: "main",
248
- subject: [
249
- id2
250
- ]
251
- }));
252
- }, [
253
- dispatch
254
- ]);
255
- const handleCollapse = useCallback((id2, collapsed) => setCollapsedSections((prev) => ({
256
- ...prev,
257
- [id2]: collapsed
258
- })), []);
259
- const handleAddSection = useCallback(() => dispatch?.(createIntent(SpaceAction.OpenCreateObject, {
260
- target: collection,
261
- navigable: false
262
- })), [
263
- collection,
264
- dispatch
265
- ]);
266
- return /* @__PURE__ */ React3.createElement(AttentionProvider, {
267
- id
268
- }, /* @__PURE__ */ React3.createElement(StackContext.Provider, {
269
- value: {
270
- onCollapse: handleCollapse,
271
- onNavigate: handleNavigate,
272
- onDelete: handleDelete,
273
- onAdd: handleAdd
274
- }
275
- }, /* @__PURE__ */ React3.createElement(Stack, {
276
- orientation: "vertical",
277
- size: "intrinsic",
278
- id,
279
- "data-testid": "main.stack"
280
- }, items.map((item) => /* @__PURE__ */ React3.createElement(StackSection, {
281
- key: item.id,
282
- ...item
283
- }))), /* @__PURE__ */ React3.createElement("div", {
284
- role: "none",
285
- className: "flex mlb-2 pli-2 justify-center"
286
- }, /* @__PURE__ */ React3.createElement(Button, {
287
- "data-testid": "stack.createSection",
288
- classNames: "gap-2",
289
- onClick: handleAddSection
290
- }, /* @__PURE__ */ React3.createElement(Plus, null), /* @__PURE__ */ React3.createElement("span", {
291
- className: "sr-only"
292
- }, t("add section label"))))));
293
- };
294
- var StackMain_default = StackMain;
295
- export {
296
- StackMain_default as default
297
- };
298
- //# sourceMappingURL=StackMain-HAQNUG2W.mjs.map