@dxos/plugin-stack 0.9.1-main.c7dcc2e112 → 0.9.1-staging.ee54ba693a

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 (88) hide show
  1. package/dist/lib/neutral/StackArticle-DDKRSUE7.mjs +199 -0
  2. package/dist/lib/neutral/StackArticle-DDKRSUE7.mjs.map +7 -0
  3. package/dist/lib/neutral/StackPlugin.mjs +4 -2
  4. package/dist/lib/neutral/StackPlugin.mjs.map +3 -3
  5. package/dist/lib/neutral/capabilities/index.mjs +3 -1
  6. package/dist/lib/neutral/capabilities/index.mjs.map +1 -1
  7. package/dist/lib/neutral/chunk-FDNICBZZ.mjs +18 -0
  8. package/dist/lib/neutral/chunk-FDNICBZZ.mjs.map +7 -0
  9. package/dist/lib/neutral/chunk-J5LGTIGS.mjs +10 -0
  10. package/dist/lib/neutral/chunk-J5LGTIGS.mjs.map +7 -0
  11. package/dist/lib/neutral/{chunk-CTWUHXK5.mjs → chunk-ZOIZTRMG.mjs} +3 -5
  12. package/dist/lib/neutral/chunk-ZOIZTRMG.mjs.map +7 -0
  13. package/dist/lib/neutral/components/index.mjs +188 -145
  14. package/dist/lib/neutral/components/index.mjs.map +4 -4
  15. package/dist/lib/neutral/containers/index.mjs +3 -1
  16. package/dist/lib/neutral/containers/index.mjs.map +1 -1
  17. package/dist/lib/neutral/index.mjs +5 -6
  18. package/dist/lib/neutral/meta.json +1 -1
  19. package/dist/lib/neutral/meta.mjs +2 -1
  20. package/dist/lib/neutral/plugin.mjs +2 -1
  21. package/dist/lib/neutral/plugin.mjs.map +1 -1
  22. package/dist/lib/neutral/{react-surface-MD3CVY2N.mjs → react-surface-IL4CW7ND.mjs} +3 -1
  23. package/dist/lib/neutral/{react-surface-MD3CVY2N.mjs.map → react-surface-IL4CW7ND.mjs.map} +1 -1
  24. package/dist/lib/neutral/translations.mjs +8 -6
  25. package/dist/lib/neutral/translations.mjs.map +3 -3
  26. package/dist/lib/neutral/types/index.mjs +4 -5
  27. package/dist/types/src/capabilities/react-surface.d.ts +1 -1
  28. package/dist/types/src/components/Stack/Stack.d.ts +67 -0
  29. package/dist/types/src/components/Stack/Stack.d.ts.map +1 -0
  30. package/dist/types/src/components/Stack/index.d.ts +2 -0
  31. package/dist/types/src/components/Stack/index.d.ts.map +1 -0
  32. package/dist/types/src/components/index.d.ts +1 -3
  33. package/dist/types/src/components/index.d.ts.map +1 -1
  34. package/dist/types/src/containers/StackArticle/StackArticle.d.ts +1 -2
  35. package/dist/types/src/containers/StackArticle/StackArticle.d.ts.map +1 -1
  36. package/dist/types/src/containers/StackArticle/StackArticle.stories.d.ts +7 -0
  37. package/dist/types/src/containers/StackArticle/StackArticle.stories.d.ts.map +1 -0
  38. package/dist/types/src/meta.d.ts +4 -0
  39. package/dist/types/src/meta.d.ts.map +1 -1
  40. package/dist/types/src/translations.d.ts +5 -16
  41. package/dist/types/src/translations.d.ts.map +1 -1
  42. package/dist/types/src/types/Stack.d.ts +6 -0
  43. package/dist/types/src/types/Stack.d.ts.map +1 -0
  44. package/dist/types/src/types/index.d.ts +1 -2
  45. package/dist/types/src/types/index.d.ts.map +1 -1
  46. package/dist/types/tsconfig.tsbuildinfo +1 -1
  47. package/dx.config.ts +2 -4
  48. package/package.json +33 -28
  49. package/src/StackPlugin.ts +2 -2
  50. package/src/components/Stack/Stack.tsx +319 -0
  51. package/src/components/{StackContext → Stack}/index.ts +1 -1
  52. package/src/components/index.ts +1 -3
  53. package/src/containers/StackArticle/StackArticle.stories.tsx +122 -0
  54. package/src/containers/StackArticle/StackArticle.tsx +180 -118
  55. package/src/translations.ts +5 -5
  56. package/src/types/Stack.ts +12 -0
  57. package/src/types/index.ts +1 -2
  58. package/dist/lib/neutral/StackArticle-SBM3FBJM.mjs +0 -124
  59. package/dist/lib/neutral/StackArticle-SBM3FBJM.mjs.map +0 -7
  60. package/dist/lib/neutral/chunk-CTWUHXK5.mjs.map +0 -7
  61. package/dist/lib/neutral/chunk-T4NSFSPH.mjs +0 -24
  62. package/dist/lib/neutral/chunk-T4NSFSPH.mjs.map +0 -7
  63. package/dist/types/src/components/StackContext/StackContext.d.ts +0 -11
  64. package/dist/types/src/components/StackContext/StackContext.d.ts.map +0 -1
  65. package/dist/types/src/components/StackContext/index.d.ts +0 -2
  66. package/dist/types/src/components/StackContext/index.d.ts.map +0 -1
  67. package/dist/types/src/components/StackSection/CaretDownUp.d.ts +0 -3
  68. package/dist/types/src/components/StackSection/CaretDownUp.d.ts.map +0 -1
  69. package/dist/types/src/components/StackSection/StackSection.d.ts +0 -5
  70. package/dist/types/src/components/StackSection/StackSection.d.ts.map +0 -1
  71. package/dist/types/src/components/StackSection/index.d.ts +0 -2
  72. package/dist/types/src/components/StackSection/index.d.ts.map +0 -1
  73. package/dist/types/src/components/StackSettings/StackSettings.d.ts +0 -6
  74. package/dist/types/src/components/StackSettings/StackSettings.d.ts.map +0 -1
  75. package/dist/types/src/components/StackSettings/index.d.ts +0 -2
  76. package/dist/types/src/components/StackSettings/index.d.ts.map +0 -1
  77. package/dist/types/src/types/stack.d.ts +0 -18
  78. package/dist/types/src/types/stack.d.ts.map +0 -1
  79. package/dist/types/src/types/types.d.ts +0 -44
  80. package/dist/types/src/types/types.d.ts.map +0 -1
  81. package/src/components/StackContext/StackContext.tsx +0 -25
  82. package/src/components/StackSection/CaretDownUp.tsx +0 -30
  83. package/src/components/StackSection/StackSection.tsx +0 -124
  84. package/src/components/StackSection/index.ts +0 -5
  85. package/src/components/StackSettings/StackSettings.tsx +0 -28
  86. package/src/components/StackSettings/index.ts +0 -5
  87. package/src/types/stack.ts +0 -26
  88. package/src/types/types.ts +0 -46
@@ -1,183 +1,226 @@
1
- // src/components/StackContext/StackContext.tsx
2
- import { createContext, useContext } from "react";
3
- var StackContext = /* @__PURE__ */ createContext({
4
- attendableId: "",
5
- onCollapse: () => {
6
- },
7
- onNavigate: async () => {
8
- },
9
- onDelete: async () => {
10
- },
11
- onAdd: () => {
12
- }
13
- });
14
- var useStack = () => useContext(StackContext);
1
+ import "../chunk-J5LGTIGS.mjs";
15
2
 
16
- // src/components/StackSection/StackSection.tsx
17
- import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
18
- import React2, { useMemo, useState } from "react";
3
+ // src/components/Stack/Stack.tsx
4
+ import React, { createContext, forwardRef, useCallback, useContext, useMemo, useState } from "react";
19
5
  import { Surface } from "@dxos/app-framework/ui";
20
6
  import { Paths } from "@dxos/app-toolkit";
21
- import { AppSurface } from "@dxos/app-toolkit/ui";
22
- import { DropdownMenu, Icon, IconButton, useTranslation } from "@dxos/react-ui";
7
+ import { AppSurface, AttentionSigilButton } from "@dxos/app-toolkit/ui";
8
+ import { Obj } from "@dxos/echo";
9
+ import { DropdownMenu, Icon, ScrollArea, useTranslation } from "@dxos/react-ui";
23
10
  import { useAttentionAttributes } from "@dxos/react-ui-attention";
24
- import { StackItem } from "@dxos/react-ui-stack";
25
- import { getSize, mx } from "@dxos/ui-theme";
11
+ import { Mosaic } from "@dxos/react-ui-mosaic";
26
12
  import { meta } from "#meta";
27
-
28
- // src/components/StackSection/CaretDownUp.tsx
29
- import React from "react";
30
- var CaretDownUp = ({ children, ...props }) => {
31
- return /* @__PURE__ */ React.createElement("svg", {
32
- xmlns: "http://www.w3.org/2000/svg",
33
- viewBox: "0 0 256 256",
34
- ...props
35
- }, /* @__PURE__ */ React.createElement("rect", {
36
- width: "256",
37
- height: "256",
38
- fill: "none"
39
- }), /* @__PURE__ */ React.createElement("polyline", {
40
- points: "80 224 128 176 176 224",
41
- fill: "none",
42
- stroke: "currentColor",
43
- strokeLinecap: "round",
44
- strokeLinejoin: "round",
45
- strokeWidth: "16"
46
- }), /* @__PURE__ */ React.createElement("polyline", {
47
- points: "80 32 128 80 176 32",
48
- fill: "none",
49
- stroke: "currentColor",
50
- strokeLinecap: "round",
51
- strokeLinejoin: "round",
52
- strokeWidth: "16"
53
- }), children);
13
+ var StackContext = /* @__PURE__ */ createContext(void 0);
14
+ var useStackContext = (consumer) => {
15
+ const context = useContext(StackContext);
16
+ if (!context) {
17
+ throw new Error(`\`${consumer}\` must be used within \`Stack.Root\`.`);
18
+ }
19
+ return context;
54
20
  };
55
-
56
- // src/components/StackSection/StackSection.tsx
57
- var sectionActionDimensions = "p-1 my-1 shrink-0 min-h-0 w-(--dx-rail-action) h-min";
58
- var StackSection = ({ id, view, object, metadata: { icon = "ph--circle-dashed--regular" } }) => {
21
+ var useStack = () => useStackContext("useStack");
22
+ var StackRoot = ({ id, eventHandler, children, attendableId, collapsed, onCollapse, onAdd, onMoveUp, onMoveDown, onDelete }) => {
23
+ const [viewport, setViewport] = useState(null);
24
+ const value = useMemo(() => ({
25
+ id,
26
+ eventHandler: eventHandler ?? {
27
+ id,
28
+ canDrop: () => false
29
+ },
30
+ viewport,
31
+ setViewport,
32
+ attendableId,
33
+ collapsed,
34
+ onCollapse,
35
+ onAdd,
36
+ onMoveUp,
37
+ onMoveDown,
38
+ onDelete
39
+ }), [
40
+ id,
41
+ eventHandler,
42
+ viewport,
43
+ attendableId,
44
+ collapsed,
45
+ onCollapse,
46
+ onAdd,
47
+ onMoveUp,
48
+ onMoveDown,
49
+ onDelete
50
+ ]);
51
+ return /* @__PURE__ */ React.createElement(StackContext.Provider, {
52
+ value
53
+ }, /* @__PURE__ */ React.createElement(Mosaic.Root, null, children));
54
+ };
55
+ StackRoot.displayName = "Stack.Root";
56
+ var StackContent = /* @__PURE__ */ forwardRef(({ children, ...props }, forwardedRef) => {
57
+ const { eventHandler, viewport } = useStackContext("Stack.Content");
58
+ return /* @__PURE__ */ React.createElement(Mosaic.Container, {
59
+ asChild: true,
60
+ orientation: "vertical",
61
+ autoScroll: viewport,
62
+ eventHandler
63
+ }, /* @__PURE__ */ React.createElement(ScrollArea.Root, {
64
+ ...props,
65
+ orientation: "vertical",
66
+ ref: forwardedRef
67
+ }, children));
68
+ });
69
+ StackContent.displayName = "Stack.Content";
70
+ var StackViewport = /* @__PURE__ */ forwardRef(({ classNames, children }, forwardedRef) => {
71
+ const { setViewport } = useStackContext("Stack.Viewport");
72
+ const setRefs = useCallback((element) => {
73
+ setViewport(element);
74
+ if (typeof forwardedRef === "function") {
75
+ forwardedRef(element);
76
+ } else if (forwardedRef) {
77
+ forwardedRef.current = element;
78
+ }
79
+ }, [
80
+ setViewport,
81
+ forwardedRef
82
+ ]);
83
+ return /* @__PURE__ */ React.createElement(ScrollArea.Viewport, {
84
+ classNames,
85
+ ref: setRefs
86
+ }, children);
87
+ });
88
+ StackViewport.displayName = "Stack.Viewport";
89
+ var DragHandleGlyph = () => /* @__PURE__ */ React.createElement("svg", {
90
+ width: 10,
91
+ height: 16,
92
+ viewBox: "0 0 10 16",
93
+ "aria-hidden": true,
94
+ className: "shrink-0 text-description"
95
+ }, [
96
+ 3,
97
+ 8,
98
+ 13
99
+ ].flatMap((cy) => [
100
+ 2.5,
101
+ 7.5
102
+ ].map((cx) => /* @__PURE__ */ React.createElement("circle", {
103
+ key: `${cx}-${cy}`,
104
+ cx,
105
+ cy,
106
+ r: 1.1,
107
+ fill: "currentColor"
108
+ }))));
109
+ var StackSection = ({ data, ...tileProps }) => {
110
+ const { id, object } = data;
59
111
  const { t } = useTranslation(meta.profile.key);
60
- const { attendableId: parentAttendableId, onNavigate, onAdd, onCollapse, onDelete } = useStack();
112
+ const { attendableId: parentAttendableId, collapsed, onAdd, onMoveUp, onMoveDown, onCollapse, onDelete } = useStack();
61
113
  const [optionsMenuOpen, setOptionsMenuOpen] = useState(false);
62
114
  const attendableId = Paths.getCollectionObjectPath(parentAttendableId, object.id);
63
115
  const attentionAttrs = useAttentionAttributes(attendableId);
64
- const stackItem = useMemo(() => ({
65
- id
66
- }), [
67
- id
68
- ]);
69
- const data = useMemo(() => ({
116
+ const surfaceData = useMemo(() => ({
70
117
  attendableId,
71
118
  subject: object
72
119
  }), [
73
120
  object,
74
121
  attendableId
75
122
  ]);
76
- return /* @__PURE__ */ React2.createElement(CollapsiblePrimitive.Root, {
77
- asChild: true,
78
- open: !view.collapsed,
79
- onOpenChange: (nextOpen) => onCollapse?.(id, !nextOpen)
80
- }, /* @__PURE__ */ React2.createElement(StackItem.Root, {
81
- item: stackItem,
82
- role: "section",
83
- ...attentionAttrs
84
- }, /* @__PURE__ */ React2.createElement(StackItem.Heading, {
85
- classNames: "dx-attention-surface"
86
- }, /* @__PURE__ */ React2.createElement("span", {
87
- className: "sr-only"
88
- }, view.title), /* @__PURE__ */ React2.createElement(StackItem.HeadingStickyContent, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Root, {
123
+ const isCollapsed = collapsed.has(id);
124
+ const icon = Obj.getIcon(object)?.icon ?? "ph--circle-dashed--regular";
125
+ const title = Obj.getLabel(object, {
126
+ fallback: "typename"
127
+ }) ?? t("untitled-section.title");
128
+ const rail = /* @__PURE__ */ React.createElement("div", {
129
+ className: "grid grid-rows-[min-content_1fr]"
130
+ }, /* @__PURE__ */ React.createElement("div", {
131
+ className: "p-1 bg-toolbar-surface"
132
+ }, /* @__PURE__ */ React.createElement(DropdownMenu.Root, {
89
133
  open: optionsMenuOpen,
90
134
  onOpenChange: setOptionsMenuOpen
91
- }, /* @__PURE__ */ React2.createElement(DropdownMenu.Trigger, {
135
+ }, /* @__PURE__ */ React.createElement(DropdownMenu.Trigger, {
92
136
  asChild: true
93
- }, /* @__PURE__ */ React2.createElement(StackItem.SigilButton, null, /* @__PURE__ */ React2.createElement(Icon, {
137
+ }, /* @__PURE__ */ React.createElement(AttentionSigilButton, {
138
+ size: "md",
139
+ attendableId
140
+ }, /* @__PURE__ */ React.createElement(Icon, {
94
141
  icon,
95
142
  classNames: "transition-opacity"
96
- }))), /* @__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, {
97
- onClick: () => onNavigate(id),
98
- "data-testid": "section.navigate-to"
99
- }, /* @__PURE__ */ React2.createElement(Icon, {
100
- icon: "ph--arrow-right--regular"
101
- }), /* @__PURE__ */ React2.createElement("span", {
143
+ }))), /* @__PURE__ */ React.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React.createElement(DropdownMenu.Content, null, /* @__PURE__ */ React.createElement(DropdownMenu.Viewport, null, isCollapsed ? /* @__PURE__ */ React.createElement(DropdownMenu.Item, {
144
+ onClick: () => onCollapse(id, false),
145
+ "data-testid": "section.expand"
146
+ }, /* @__PURE__ */ React.createElement(Icon, {
147
+ icon: "ph--arrows-out-line-vertical--regular"
148
+ }), /* @__PURE__ */ React.createElement("span", {
102
149
  className: "ms-2 grow"
103
- }, t("navigate-to-section.label"))) : /* @__PURE__ */ React2.createElement(CollapsiblePrimitive.Trigger, {
104
- asChild: true
105
- }, /* @__PURE__ */ React2.createElement(DropdownMenu.Item, null, /* @__PURE__ */ React2.createElement(CaretDownUp, {
106
- className: getSize(5)
107
- }), /* @__PURE__ */ React2.createElement("span", {
150
+ }, t("expand.label"))) : /* @__PURE__ */ React.createElement(DropdownMenu.Item, {
151
+ onClick: () => onCollapse(id, true),
152
+ "data-testid": "section.collapse"
153
+ }, /* @__PURE__ */ React.createElement(Icon, {
154
+ icon: "ph--arrows-in-line-vertical--regular"
155
+ }), /* @__PURE__ */ React.createElement("span", {
108
156
  className: "ms-2 grow"
109
- }, t("collapse.label")))), /* @__PURE__ */ React2.createElement(DropdownMenu.Item, {
110
- onClick: () => onAdd(id, "before"),
111
- "data-testid": "section.add-before"
112
- }, /* @__PURE__ */ React2.createElement(Icon, {
157
+ }, t("collapse.label"))), /* @__PURE__ */ React.createElement(DropdownMenu.Separator, null), /* @__PURE__ */ React.createElement(DropdownMenu.Item, {
158
+ onClick: () => onAdd(id),
159
+ "data-testid": "section.add"
160
+ }, /* @__PURE__ */ React.createElement(Icon, {
161
+ icon: "ph--plus--regular"
162
+ }), /* @__PURE__ */ React.createElement("span", {
163
+ className: "ms-2 grow"
164
+ }, t("add-section.label"))), /* @__PURE__ */ React.createElement(DropdownMenu.Item, {
165
+ onClick: () => onMoveUp(id),
166
+ "data-testid": "section.move-up"
167
+ }, /* @__PURE__ */ React.createElement(Icon, {
113
168
  icon: "ph--arrow-line-up--regular"
114
- }), /* @__PURE__ */ React2.createElement("span", {
169
+ }), /* @__PURE__ */ React.createElement("span", {
115
170
  className: "ms-2 grow"
116
- }, t("add-section-before.label"))), /* @__PURE__ */ React2.createElement(DropdownMenu.Item, {
117
- onClick: () => onAdd(id, "after"),
118
- "data-testid": "section.add-after"
119
- }, /* @__PURE__ */ React2.createElement(Icon, {
171
+ }, t("move-up.label"))), /* @__PURE__ */ React.createElement(DropdownMenu.Item, {
172
+ onClick: () => onMoveDown(id),
173
+ "data-testid": "section.move-down"
174
+ }, /* @__PURE__ */ React.createElement(Icon, {
120
175
  icon: "ph--arrow-line-down--regular"
121
- }), /* @__PURE__ */ React2.createElement("span", {
176
+ }), /* @__PURE__ */ React.createElement("span", {
122
177
  className: "ms-2 grow"
123
- }, t("add-section-after.label"))), /* @__PURE__ */ React2.createElement(DropdownMenu.Item, {
178
+ }, t("move-down.label"))), /* @__PURE__ */ React.createElement(DropdownMenu.Separator, null), /* @__PURE__ */ React.createElement(DropdownMenu.Item, {
124
179
  onClick: () => onDelete(id),
125
180
  "data-testid": "section.remove"
126
- }, /* @__PURE__ */ React2.createElement(Icon, {
181
+ }, /* @__PURE__ */ React.createElement(Icon, {
127
182
  icon: "ph--trash--regular"
128
- }), /* @__PURE__ */ React2.createElement("span", {
183
+ }), /* @__PURE__ */ React.createElement("span", {
129
184
  className: "ms-2 grow"
130
- }, t("remove-section.label")))), /* @__PURE__ */ React2.createElement(DropdownMenu.Arrow, null)))), view.collapsed ? /* @__PURE__ */ React2.createElement(CollapsiblePrimitive.Trigger, {
131
- asChild: true
132
- }, /* @__PURE__ */ React2.createElement(IconButton, {
133
- iconOnly: true,
134
- variant: "ghost",
135
- label: t("expand.label"),
136
- icon: "ph--caret-up-down--regular",
137
- classNames: sectionActionDimensions
138
- })) : /* @__PURE__ */ React2.createElement(IconButton, {
139
- iconOnly: true,
140
- variant: "ghost",
141
- onClick: () => onNavigate(id),
142
- label: t("navigate-to-section.label"),
143
- icon: "ph--arrow-right--regular",
144
- "data-testid": "section.navigate-to",
145
- classNames: sectionActionDimensions
146
- }))), /* @__PURE__ */ React2.createElement(CollapsiblePrimitive.Content, null, /* @__PURE__ */ React2.createElement(Surface.Surface, {
147
- type: AppSurface.Section,
185
+ }, t("remove-section.label")))), /* @__PURE__ */ React.createElement(DropdownMenu.Arrow, null))))), /* @__PURE__ */ React.createElement("div", {
186
+ className: "p-1"
187
+ }, /* @__PURE__ */ React.createElement(Mosaic.DragHandle, {
188
+ label: t("drag-handle.label"),
189
+ classNames: "p-1 min-h-0 w-(--dx-rail-item) h-(--dx-rail-item)",
190
+ testId: "section.drag-handle"
191
+ }, /* @__PURE__ */ React.createElement(DragHandleGlyph, null))));
192
+ return /* @__PURE__ */ React.createElement(Mosaic.Tile, {
193
+ ...tileProps,
148
194
  data,
149
- limit: 1,
150
- placeholder: /* @__PURE__ */ React2.createElement(React2.Fragment, null)
151
- })), view.collapsed && /* @__PURE__ */ React2.createElement(StackItem.Content, {
152
- classNames: "dx-attention-surface"
153
- }, /* @__PURE__ */ React2.createElement("h2", {
154
- className: mx("flex items-center p-4 font-medium")
155
- }, view.title))));
195
+ classNames: "grid grid-cols-[var(--dx-rail-action)_1fr] dx-attention-surface border border-subdued-separator"
196
+ }, /* @__PURE__ */ React.createElement("div", {
197
+ className: "border-e border-subdued-separator"
198
+ }, /* @__PURE__ */ React.createElement("div", {
199
+ className: "sticky top-0 flex flex-col items-center"
200
+ }, rail)), /* @__PURE__ */ React.createElement("div", {
201
+ ...attentionAttrs,
202
+ className: "min-w-0"
203
+ }, /* @__PURE__ */ React.createElement("span", {
204
+ className: "sr-only"
205
+ }, title), isCollapsed ? /* @__PURE__ */ React.createElement("div", {
206
+ className: "h-(--dx-toolbar-size) flex p-1"
207
+ }, /* @__PURE__ */ React.createElement("h2", {
208
+ className: "flex items-center font-medium"
209
+ }, title)) : /* @__PURE__ */ React.createElement(Surface.Surface, {
210
+ type: AppSurface.Section,
211
+ data: surfaceData,
212
+ limit: 1
213
+ })));
156
214
  };
157
-
158
- // src/components/StackSettings/StackSettings.tsx
159
- import React3 from "react";
160
- import { Input, useTranslation as useTranslation2 } from "@dxos/react-ui";
161
- import { Settings as SettingsForm } from "@dxos/react-ui-form";
162
- import { meta as meta2 } from "#meta";
163
- var StackSettings = ({ settings }) => {
164
- const { t } = useTranslation2(meta2.profile.key);
165
- return /* @__PURE__ */ React3.createElement(SettingsForm.Viewport, null, /* @__PURE__ */ React3.createElement(SettingsForm.Section, {
166
- title: t("settings.title", {
167
- ns: meta2.profile.key
168
- })
169
- }, /* @__PURE__ */ React3.createElement(SettingsForm.Item, {
170
- title: t("settings.separation.label"),
171
- description: t("settings.separation.description")
172
- }, /* @__PURE__ */ React3.createElement(Input.Switch, {
173
- checked: settings.separation,
174
- onCheckedChange: (checked) => settings.separation = !!checked
175
- }))));
215
+ StackSection.displayName = "Stack.Section";
216
+ var Stack = {
217
+ Root: StackRoot,
218
+ Content: StackContent,
219
+ Viewport: StackViewport,
220
+ Section: StackSection
176
221
  };
177
222
  export {
178
- StackContext,
179
- StackSection,
180
- StackSettings,
223
+ Stack,
181
224
  useStack
182
225
  };
183
226
  //# sourceMappingURL=index.mjs.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../src/components/StackContext/StackContext.tsx", "../../../../src/components/StackSection/StackSection.tsx", "../../../../src/components/StackSection/CaretDownUp.tsx", "../../../../src/components/StackSettings/StackSettings.tsx"],
4
- "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { createContext, useContext } from 'react';\n\nimport { type AddSectionPosition } from '#types';\n\nexport type StackContextValue = {\n attendableId: string;\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 attendableId: '',\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, { useMemo, useState } from 'react';\n\nimport { Surface } from '@dxos/app-framework/ui';\nimport { Paths } from '@dxos/app-toolkit';\nimport { AppSurface } from '@dxos/app-toolkit/ui';\nimport { DropdownMenu, Icon, IconButton, useTranslation } from '@dxos/react-ui';\nimport { useAttentionAttributes } from '@dxos/react-ui-attention';\nimport { StackItem } from '@dxos/react-ui-stack';\nimport { getSize, mx } from '@dxos/ui-theme';\n\nimport { meta } from '#meta';\nimport { type StackSectionItem } from '#types';\n\nimport { useStack } from '../StackContext';\nimport { CaretDownUp } from './CaretDownUp';\n\nconst sectionActionDimensions = 'p-1 my-1 shrink-0 min-h-0 w-(--dx-rail-action) h-min';\n\nexport type StackSectionProps = StackSectionItem;\n\nexport const StackSection = ({\n id,\n view,\n object,\n metadata: { icon = 'ph--circle-dashed--regular' },\n}: StackSectionProps) => {\n const { t } = useTranslation(meta.profile.key);\n const { attendableId: parentAttendableId, onNavigate, onAdd, onCollapse, onDelete } = useStack();\n const [optionsMenuOpen, setOptionsMenuOpen] = useState(false);\n const attendableId = Paths.getCollectionObjectPath(parentAttendableId, object.id);\n const attentionAttrs = useAttentionAttributes(attendableId);\n const stackItem = useMemo(() => ({ id }), [id]);\n const data = useMemo(() => ({ attendableId, subject: object }), [object, attendableId]);\n\n return (\n <CollapsiblePrimitive.Root asChild open={!view.collapsed} onOpenChange={(nextOpen) => onCollapse?.(id, !nextOpen)}>\n <StackItem.Root item={stackItem} role='section' {...attentionAttrs}>\n <StackItem.Heading classNames='dx-attention-surface'>\n <span className='sr-only'>{view.title}</span>\n <StackItem.HeadingStickyContent>\n <DropdownMenu.Root\n {...{\n open: optionsMenuOpen,\n onOpenChange: setOptionsMenuOpen,\n }}\n >\n <DropdownMenu.Trigger asChild>\n <StackItem.SigilButton>\n <Icon icon={icon} classNames='transition-opacity' />\n </StackItem.SigilButton>\n </DropdownMenu.Trigger>\n <DropdownMenu.Portal>\n <DropdownMenu.Content>\n <DropdownMenu.Viewport>\n {view.collapsed ? (\n <DropdownMenu.Item onClick={() => onNavigate(id)} data-testid='section.navigate-to'>\n <Icon icon='ph--arrow-right--regular' />\n <span className='ms-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='ms-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' />\n <span className='ms-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' />\n <span className='ms-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' />\n <span className='ms-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 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 variant='ghost'\n onClick={() => onNavigate(id)}\n label={t('navigate-to-section.label')}\n icon='ph--arrow-right--regular'\n data-testid='section.navigate-to'\n classNames={sectionActionDimensions}\n />\n )}\n </StackItem.HeadingStickyContent>\n </StackItem.Heading>\n <CollapsiblePrimitive.Content>\n <Surface.Surface type={AppSurface.Section} data={data} limit={1} placeholder={<></>} />\n </CollapsiblePrimitive.Content>\n {view.collapsed && (\n <StackItem.Content classNames='dx-attention-surface'>\n <h2 className={mx('flex items-center p-4 font-medium')}>{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", "//\n// Copyright 2023 DXOS.org\n//\n\nimport React from 'react';\n\nimport { Input, useTranslation } from '@dxos/react-ui';\nimport { Settings as SettingsForm } from '@dxos/react-ui-form';\n\nimport { meta } from '#meta';\nimport { type StackSettingsProps } from '#types';\n\nexport const StackSettings = ({ settings }: { settings: StackSettingsProps }) => {\n const { t } = useTranslation(meta.profile.key);\n\n return (\n <SettingsForm.Viewport>\n <SettingsForm.Section title={t('settings.title', { ns: meta.profile.key })}>\n <SettingsForm.Item title={t('settings.separation.label')} description={t('settings.separation.description')}>\n <Input.Switch\n checked={settings.separation}\n onCheckedChange={(checked) => (settings.separation = !!checked)}\n />\n </SettingsForm.Item>\n </SettingsForm.Section>\n </SettingsForm.Viewport>\n );\n};\n"],
5
- "mappings": "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",
6
- "names": ["createContext", "useContext", "StackContext", "attendableId", "onCollapse", "onNavigate", "onDelete", "onAdd", "useStack", "CollapsiblePrimitive", "React", "useMemo", "useState", "Surface", "Paths", "AppSurface", "DropdownMenu", "Icon", "IconButton", "useTranslation", "useAttentionAttributes", "StackItem", "getSize", "mx", "meta", "React", "CaretDownUp", "children", "props", "svg", "xmlns", "viewBox", "rect", "width", "height", "fill", "polyline", "points", "stroke", "strokeLinecap", "strokeLinejoin", "strokeWidth", "sectionActionDimensions", "StackSection", "id", "view", "object", "metadata", "icon", "t", "useTranslation", "meta", "profile", "key", "attendableId", "parentAttendableId", "onNavigate", "onAdd", "onCollapse", "onDelete", "useStack", "optionsMenuOpen", "setOptionsMenuOpen", "useState", "Paths", "getCollectionObjectPath", "attentionAttrs", "useAttentionAttributes", "stackItem", "useMemo", "data", "subject", "React", "Root", "asChild", "open", "collapsed", "onOpenChange", "nextOpen", "StackItem", "item", "role", "Heading", "classNames", "span", "className", "title", "HeadingStickyContent", "DropdownMenu", "Trigger", "SigilButton", "Icon", "Portal", "Content", "Viewport", "Item", "onClick", "data-testid", "CaretDownUp", "getSize", "Arrow", "IconButton", "iconOnly", "variant", "label", "Surface", "type", "AppSurface", "Section", "limit", "placeholder", "h2", "mx", "React", "Input", "useTranslation", "Settings", "SettingsForm", "meta", "StackSettings", "settings", "t", "profile", "key", "Viewport", "Section", "title", "ns", "Item", "description", "Switch", "checked", "separation", "onCheckedChange"]
3
+ "sources": ["../../../../src/components/Stack/Stack.tsx"],
4
+ "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport React, {\n type ComponentPropsWithoutRef,\n type ForwardedRef,\n type PropsWithChildren,\n createContext,\n forwardRef,\n useCallback,\n useContext,\n useMemo,\n useState,\n} from 'react';\n\nimport { Surface } from '@dxos/app-framework/ui';\nimport { Paths } from '@dxos/app-toolkit';\nimport { AppSurface, AttentionSigilButton } from '@dxos/app-toolkit/ui';\nimport { Obj } from '@dxos/echo';\nimport {\n DropdownMenu,\n Icon,\n ScrollArea,\n ScrollAreaRootProps,\n type ThemedClassName,\n useTranslation,\n} from '@dxos/react-ui';\nimport { useAttentionAttributes } from '@dxos/react-ui-attention';\nimport { Mosaic, type MosaicEventHandler, type MosaicTileProps } from '@dxos/react-ui-mosaic';\n\nimport { meta } from '#meta';\n\n//\n// Types\n//\n\nexport type StackSectionItem = {\n id: string;\n object: Obj.Unknown;\n};\n\n//\n// Context\n//\n\n/** Section-level callbacks consumed by stack sections. */\nexport type StackContextValue = {\n attendableId: string;\n /** Ids of sections that are currently collapsed. */\n collapsed: ReadonlySet<string>;\n onCollapse: (id: string, collapsed: boolean) => void;\n /** Add a new section immediately after the given section. */\n onAdd: (id: string) => void;\n onMoveUp: (id: string) => void;\n onMoveDown: (id: string) => void;\n onDelete: (id: string) => void;\n};\n\ntype StackContextType = StackContextValue & {\n /** Container id used to scope Mosaic drag/drop. */\n id: string;\n eventHandler: MosaicEventHandler;\n /** Scroll viewport element; threaded to the Mosaic container for autoscroll. */\n viewport: HTMLElement | null;\n setViewport: (element: HTMLElement | null) => void;\n};\n\nconst StackContext = createContext<StackContextType | undefined>(undefined);\n\nconst useStackContext = (consumer: string): StackContextType => {\n const context = useContext(StackContext);\n if (!context) {\n throw new Error(`\\`${consumer}\\` must be used within \\`Stack.Root\\`.`);\n }\n return context;\n};\n\n/** Section-level callbacks consumed by stack sections. */\nexport const useStack = (): StackContextValue => useStackContext('useStack');\n\n//\n// Root\n//\n\ntype StackRootProps = PropsWithChildren<\n StackContextValue & {\n /** Container id used to scope Mosaic drag/drop. */\n id: string;\n /** Drag/drop event handler; defaults to a read-only (no-drop) handler. */\n eventHandler?: MosaicEventHandler;\n }\n>;\n\nconst StackRoot = ({\n id,\n eventHandler,\n children,\n attendableId,\n collapsed,\n onCollapse,\n onAdd,\n onMoveUp,\n onMoveDown,\n onDelete,\n}: StackRootProps) => {\n const [viewport, setViewport] = useState<HTMLElement | null>(null);\n const value = useMemo<StackContextType>(\n () => ({\n id,\n eventHandler: eventHandler ?? { id, canDrop: () => false },\n viewport,\n setViewport,\n attendableId,\n collapsed,\n onCollapse,\n onAdd,\n onMoveUp,\n onMoveDown,\n onDelete,\n }),\n [id, eventHandler, viewport, attendableId, collapsed, onCollapse, onAdd, onMoveUp, onMoveDown, onDelete],\n );\n\n return (\n <StackContext.Provider value={value}>\n <Mosaic.Root>{children}</Mosaic.Root>\n </StackContext.Provider>\n );\n};\n\nStackRoot.displayName = 'Stack.Root';\n\n//\n// Content\n//\n\ntype StackContentProps = ThemedClassName<\n ComponentPropsWithoutRef<'div'> & Pick<ScrollAreaRootProps, 'centered' | 'thin' | 'padding'>\n>;\n\nconst StackContent = forwardRef<HTMLDivElement, StackContentProps>(({ children, ...props }, forwardedRef) => {\n const { eventHandler, viewport } = useStackContext('Stack.Content');\n return (\n <Mosaic.Container asChild orientation='vertical' autoScroll={viewport} eventHandler={eventHandler}>\n <ScrollArea.Root {...props} orientation='vertical' ref={forwardedRef}>\n {children}\n </ScrollArea.Root>\n </Mosaic.Container>\n );\n});\n\nStackContent.displayName = 'Stack.Content';\n\n//\n// Viewport\n//\n\ntype StackViewportProps = ThemedClassName<PropsWithChildren>;\n\nconst StackViewport = forwardRef<HTMLDivElement, StackViewportProps>(\n ({ classNames, children }, forwardedRef: ForwardedRef<HTMLDivElement>) => {\n const { setViewport } = useStackContext('Stack.Viewport');\n // Capture the viewport element for autoscroll while still honouring a forwarded ref.\n const setRefs = useCallback(\n (element: HTMLDivElement | null) => {\n setViewport(element);\n if (typeof forwardedRef === 'function') {\n forwardedRef(element);\n } else if (forwardedRef) {\n forwardedRef.current = element;\n }\n },\n [setViewport, forwardedRef],\n );\n\n return (\n <ScrollArea.Viewport classNames={classNames} ref={setRefs}>\n {children}\n </ScrollArea.Viewport>\n );\n },\n);\n\nStackViewport.displayName = 'Stack.Viewport';\n\n//\n// Section\n//\n\ntype StackSectionProps = MosaicTileProps<StackSectionItem>;\n\n/**\n * A stack section rendered as a Mosaic tile: a 40px left rail (drag handle + section menu) beside the\n * main content area, which renders the object's content surface (or its title when collapsed). The\n * rail sticks to the top of the scroll viewport while the section is in view.\n */\n// TODO(burdon): All sections are intrinsic (content-sized) for now. Extrinsic content (e.g. a sketch\n// with no intrinsic height) should later get a Mosaic-native resizable height affordance.\n\n// Inline grip glyph for the drag preview. The native drag image does not rasterize external SVG sprite\n// `<use>` icons (e.g. `@dxos/react-ui` `Icon`), so the preview uses plain inline SVG circles instead.\nconst DragHandleGlyph = () => (\n <svg width={10} height={16} viewBox='0 0 10 16' aria-hidden className='shrink-0 text-description'>\n {[3, 8, 13].flatMap((cy) =>\n [2.5, 7.5].map((cx) => <circle key={`${cx}-${cy}`} cx={cx} cy={cy} r={1.1} fill='currentColor' />),\n )}\n </svg>\n);\n\nconst StackSection = ({ data, ...tileProps }: StackSectionProps) => {\n const { id, object } = data;\n const { t } = useTranslation(meta.profile.key);\n const { attendableId: parentAttendableId, collapsed, onAdd, onMoveUp, onMoveDown, onCollapse, onDelete } = useStack();\n const [optionsMenuOpen, setOptionsMenuOpen] = useState(false);\n const attendableId = Paths.getCollectionObjectPath(parentAttendableId, object.id);\n const attentionAttrs = useAttentionAttributes(attendableId);\n const surfaceData = useMemo(() => ({ attendableId, subject: object }), [object, attendableId]);\n const isCollapsed = collapsed.has(id);\n const icon = Obj.getIcon(object)?.icon ?? 'ph--circle-dashed--regular';\n const title = Obj.getLabel(object, { fallback: 'typename' }) ?? t('untitled-section.title');\n\n const rail = (\n <div className='grid grid-rows-[min-content_1fr]'>\n <div className='p-1 bg-toolbar-surface'>\n <DropdownMenu.Root open={optionsMenuOpen} onOpenChange={setOptionsMenuOpen}>\n <DropdownMenu.Trigger asChild>\n <AttentionSigilButton size='md' attendableId={attendableId}>\n <Icon icon={icon} classNames='transition-opacity' />\n </AttentionSigilButton>\n </DropdownMenu.Trigger>\n <DropdownMenu.Portal>\n <DropdownMenu.Content>\n <DropdownMenu.Viewport>\n {isCollapsed ? (\n <DropdownMenu.Item onClick={() => onCollapse(id, false)} data-testid='section.expand'>\n <Icon icon='ph--arrows-out-line-vertical--regular' />\n <span className='ms-2 grow'>{t('expand.label')}</span>\n </DropdownMenu.Item>\n ) : (\n <DropdownMenu.Item onClick={() => onCollapse(id, true)} data-testid='section.collapse'>\n <Icon icon='ph--arrows-in-line-vertical--regular' />\n <span className='ms-2 grow'>{t('collapse.label')}</span>\n </DropdownMenu.Item>\n )}\n <DropdownMenu.Separator />\n <DropdownMenu.Item onClick={() => onAdd(id)} data-testid='section.add'>\n <Icon icon='ph--plus--regular' />\n <span className='ms-2 grow'>{t('add-section.label')}</span>\n </DropdownMenu.Item>\n <DropdownMenu.Item onClick={() => onMoveUp(id)} data-testid='section.move-up'>\n <Icon icon='ph--arrow-line-up--regular' />\n <span className='ms-2 grow'>{t('move-up.label')}</span>\n </DropdownMenu.Item>\n <DropdownMenu.Item onClick={() => onMoveDown(id)} data-testid='section.move-down'>\n <Icon icon='ph--arrow-line-down--regular' />\n <span className='ms-2 grow'>{t('move-down.label')}</span>\n </DropdownMenu.Item>\n <DropdownMenu.Separator />\n <DropdownMenu.Item onClick={() => onDelete(id)} data-testid='section.remove'>\n <Icon icon='ph--trash--regular' />\n <span className='ms-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 </div>\n <div className='p-1'>\n {/* Inline glyph (not a sprite `Icon`) so the handle stays visible in the tile's native drag image. */}\n <Mosaic.DragHandle\n label={t('drag-handle.label')}\n classNames='p-1 min-h-0 w-(--dx-rail-item) h-(--dx-rail-item)'\n testId='section.drag-handle'\n >\n <DragHandleGlyph />\n </Mosaic.DragHandle>\n </div>\n </div>\n );\n\n return (\n <Mosaic.Tile\n {...tileProps}\n data={data}\n classNames='grid grid-cols-[var(--dx-rail-action)_1fr] dx-attention-surface border border-subdued-separator'\n >\n <div className='border-e border-subdued-separator'>\n <div className='sticky top-0 flex flex-col items-center'>{rail}</div>\n </div>\n <div {...attentionAttrs} className='min-w-0'>\n <span className='sr-only'>{title}</span>\n {isCollapsed ? (\n <div className='h-(--dx-toolbar-size) flex p-1'>\n <h2 className='flex items-center font-medium'>{title}</h2>\n </div>\n ) : (\n <Surface.Surface type={AppSurface.Section} data={surfaceData} limit={1} />\n )}\n </div>\n </Mosaic.Tile>\n );\n};\n\nStackSection.displayName = 'Stack.Section';\n\n//\n// Stack\n//\n\nexport const Stack = {\n Root: StackRoot,\n Content: StackContent,\n Viewport: StackViewport,\n Section: StackSection,\n};\n\nexport type { StackContentProps, StackRootProps, StackSectionProps, StackViewportProps };\n"],
5
+ "mappings": "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",
6
+ "names": ["React", "createContext", "forwardRef", "useCallback", "useContext", "useMemo", "useState", "Surface", "Paths", "AppSurface", "AttentionSigilButton", "Obj", "DropdownMenu", "Icon", "ScrollArea", "useTranslation", "useAttentionAttributes", "Mosaic", "meta", "StackContext", "undefined", "useStackContext", "consumer", "context", "Error", "useStack", "StackRoot", "id", "eventHandler", "children", "attendableId", "collapsed", "onCollapse", "onAdd", "onMoveUp", "onMoveDown", "onDelete", "viewport", "setViewport", "value", "canDrop", "Provider", "Root", "displayName", "StackContent", "props", "forwardedRef", "Container", "asChild", "orientation", "autoScroll", "ref", "StackViewport", "classNames", "setRefs", "element", "current", "Viewport", "DragHandleGlyph", "svg", "width", "height", "viewBox", "aria-hidden", "className", "flatMap", "cy", "map", "cx", "circle", "key", "r", "fill", "StackSection", "data", "tileProps", "object", "t", "profile", "parentAttendableId", "optionsMenuOpen", "setOptionsMenuOpen", "getCollectionObjectPath", "attentionAttrs", "surfaceData", "subject", "isCollapsed", "has", "icon", "getIcon", "title", "getLabel", "fallback", "rail", "div", "open", "onOpenChange", "Trigger", "size", "Portal", "Content", "Item", "onClick", "data-testid", "span", "Separator", "Arrow", "DragHandle", "label", "testId", "Tile", "h2", "type", "Section", "limit", "Stack"]
7
7
  }
@@ -1,6 +1,8 @@
1
+ import "../chunk-J5LGTIGS.mjs";
2
+
1
3
  // src/containers/index.ts
2
4
  import { lazy } from "react";
3
- var StackArticle = lazy(() => import("../StackArticle-SBM3FBJM.mjs"));
5
+ var StackArticle = lazy(() => import("../StackArticle-DDKRSUE7.mjs"));
4
6
  export {
5
7
  StackArticle
6
8
  };
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/containers/index.ts"],
4
4
  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type ComponentType, lazy } from 'react';\n\nexport const StackArticle: ComponentType<any> = lazy(() => import('./StackArticle'));\n"],
5
- "mappings": ";AAIA,SAA6BA,YAAY;AAElC,IAAMC,eAAmCD,KAAK,MAAM,OAAO,8BAAA,CAAA;",
5
+ "mappings": ";;;AAIA,SAA6BA,YAAY;AAElC,IAAMC,eAAmCD,KAAK,MAAM,OAAO,8BAAA,CAAA;",
6
6
  "names": ["lazy", "StackArticle"]
7
7
  }
@@ -1,15 +1,14 @@
1
1
  import {
2
- SectionSchema,
3
- StackViewType
4
- } from "./chunk-T4NSFSPH.mjs";
2
+ Stack_exports
3
+ } from "./chunk-FDNICBZZ.mjs";
5
4
  import {
6
5
  SECTION_IDENTIFIER,
7
6
  meta
8
- } from "./chunk-CTWUHXK5.mjs";
7
+ } from "./chunk-ZOIZTRMG.mjs";
8
+ import "./chunk-J5LGTIGS.mjs";
9
9
  export {
10
10
  SECTION_IDENTIFIER,
11
- SectionSchema,
12
- StackViewType,
11
+ Stack_exports as Stack,
13
12
  meta
14
13
  };
15
14
  //# sourceMappingURL=index.mjs.map