@dxos/react-ui-attention 0.10.0 → 0.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lib/chunk-ViewStateProvider.mjs +308 -0
- package/dist/lib/chunk-ViewStateProvider.mjs.map +1 -0
- package/dist/lib/chunk-types.mjs +351 -0
- package/dist/lib/chunk-types.mjs.map +1 -0
- package/dist/lib/index.mjs +149 -0
- package/dist/lib/index.mjs.map +1 -0
- package/dist/lib/testing.mjs +20 -0
- package/dist/lib/testing.mjs.map +1 -0
- package/dist/lib/types.mjs +2 -0
- package/dist/types/src/components/AttentionProvider/AttentionProvider.d.ts +2 -15
- package/dist/types/src/components/AttentionProvider/AttentionProvider.d.ts.map +1 -1
- package/dist/types/src/components/AttentionProvider/attention-context.d.ts +20 -0
- package/dist/types/src/components/AttentionProvider/attention-context.d.ts.map +1 -0
- package/dist/types/src/components/AttentionProvider/index.d.ts +1 -0
- package/dist/types/src/components/AttentionProvider/index.d.ts.map +1 -1
- package/dist/types/src/components/ViewStateProvider/ViewStateProvider.d.ts +2 -26
- package/dist/types/src/components/ViewStateProvider/ViewStateProvider.d.ts.map +1 -1
- package/dist/types/src/components/ViewStateProvider/index.d.ts +1 -0
- package/dist/types/src/components/ViewStateProvider/index.d.ts.map +1 -1
- package/dist/types/src/components/ViewStateProvider/view-state-hooks.d.ts +32 -0
- package/dist/types/src/components/ViewStateProvider/view-state-hooks.d.ts.map +1 -0
- package/dist/types/src/core/backends.d.ts +24 -0
- package/dist/types/src/core/backends.d.ts.map +1 -0
- package/dist/types/src/core/backends.test.d.ts.map +1 -0
- package/dist/types/src/core/index.d.ts +2 -0
- package/dist/types/src/core/index.d.ts.map +1 -0
- package/dist/types/src/hooks/index.d.ts +2 -0
- package/dist/types/src/hooks/index.d.ts.map +1 -0
- package/dist/types/src/hooks/useArticleKeyboardNavigation.d.ts.map +1 -0
- package/dist/types/src/hooks/useArticleKeyboardNavigation.test.d.ts.map +1 -0
- package/dist/types/src/index.d.ts +3 -4
- package/dist/types/src/index.d.ts.map +1 -1
- package/dist/types/src/{attention.d.ts → types/Attention.d.ts} +13 -2
- package/dist/types/src/types/Attention.d.ts.map +1 -0
- package/dist/types/src/types/Attention.test.d.ts +2 -0
- package/dist/types/src/types/Attention.test.d.ts.map +1 -0
- package/dist/types/src/{selection.d.ts → types/Selection.d.ts} +12 -10
- package/dist/types/src/types/Selection.d.ts.map +1 -0
- package/dist/types/src/types/Selection.test.d.ts +2 -0
- package/dist/types/src/types/Selection.test.d.ts.map +1 -0
- package/dist/types/src/types/ViewState.d.ts +66 -0
- package/dist/types/src/types/ViewState.d.ts.map +1 -0
- package/dist/types/src/types/ViewState.test.d.ts +2 -0
- package/dist/types/src/types/ViewState.test.d.ts.map +1 -0
- package/dist/types/src/types/index.d.ts +3 -3
- package/dist/types/src/types/index.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +18 -20
- package/src/components/AttentionProvider/AttentionProvider.stories.tsx +1 -1
- package/src/components/AttentionProvider/AttentionProvider.tsx +4 -86
- package/src/components/AttentionProvider/attention-context.ts +81 -0
- package/src/components/AttentionProvider/index.ts +2 -0
- package/src/components/ViewStateProvider/ViewStateProvider.test.tsx +7 -5
- package/src/components/ViewStateProvider/ViewStateProvider.tsx +6 -110
- package/src/components/ViewStateProvider/index.ts +9 -0
- package/src/components/ViewStateProvider/view-state-hooks.ts +115 -0
- package/src/{view-state → core}/backends.test.ts +5 -5
- package/src/{view-state → core}/backends.ts +24 -17
- package/src/{view-state → core}/index.ts +0 -1
- package/src/hooks/index.ts +5 -0
- package/src/{useArticleKeyboardNavigation.ts → hooks/useArticleKeyboardNavigation.ts} +1 -1
- package/src/index.ts +3 -4
- package/src/testing/decorators/withAttention.ts +2 -2
- package/src/{attention.test.ts → types/Attention.test.ts} +2 -2
- package/src/{attention.ts → types/Attention.ts} +17 -2
- package/src/types/Selection.test.ts +100 -0
- package/src/{selection.ts → types/Selection.ts} +27 -17
- package/src/{view-state/view-state.test.ts → types/ViewState.test.ts} +6 -6
- package/src/types/ViewState.ts +101 -0
- package/src/types/index.ts +8 -7
- package/dist/lib/browser/chunk-4HYAJ4IO.mjs +0 -434
- package/dist/lib/browser/chunk-4HYAJ4IO.mjs.map +0 -7
- package/dist/lib/browser/chunk-I4FDY4AZ.mjs +0 -236
- package/dist/lib/browser/chunk-I4FDY4AZ.mjs.map +0 -7
- package/dist/lib/browser/index.mjs +0 -218
- package/dist/lib/browser/index.mjs.map +0 -7
- package/dist/lib/browser/meta.json +0 -1
- package/dist/lib/browser/testing/index.mjs +0 -30
- package/dist/lib/browser/testing/index.mjs.map +0 -7
- package/dist/lib/browser/types/index.mjs +0 -43
- package/dist/lib/browser/types/index.mjs.map +0 -7
- package/dist/lib/node-esm/chunk-DLBZMHST.mjs +0 -237
- package/dist/lib/node-esm/chunk-DLBZMHST.mjs.map +0 -7
- package/dist/lib/node-esm/chunk-HWN7KJDX.mjs +0 -436
- package/dist/lib/node-esm/chunk-HWN7KJDX.mjs.map +0 -7
- package/dist/lib/node-esm/index.mjs +0 -219
- package/dist/lib/node-esm/index.mjs.map +0 -7
- package/dist/lib/node-esm/meta.json +0 -1
- package/dist/lib/node-esm/testing/index.mjs +0 -31
- package/dist/lib/node-esm/testing/index.mjs.map +0 -7
- package/dist/lib/node-esm/types/index.mjs +0 -44
- package/dist/lib/node-esm/types/index.mjs.map +0 -7
- package/dist/types/src/attention.d.ts.map +0 -1
- package/dist/types/src/attention.test.d.ts +0 -2
- package/dist/types/src/attention.test.d.ts.map +0 -1
- package/dist/types/src/selection.d.ts.map +0 -1
- package/dist/types/src/selection.test.d.ts +0 -2
- package/dist/types/src/selection.test.d.ts.map +0 -1
- package/dist/types/src/useArticleKeyboardNavigation.d.ts.map +0 -1
- package/dist/types/src/useArticleKeyboardNavigation.test.d.ts.map +0 -1
- package/dist/types/src/view-state/backends.d.ts +0 -24
- package/dist/types/src/view-state/backends.d.ts.map +0 -1
- package/dist/types/src/view-state/backends.test.d.ts.map +0 -1
- package/dist/types/src/view-state/index.d.ts +0 -3
- package/dist/types/src/view-state/index.d.ts.map +0 -1
- package/dist/types/src/view-state/view-state.d.ts +0 -54
- package/dist/types/src/view-state/view-state.d.ts.map +0 -1
- package/dist/types/src/view-state/view-state.test.d.ts +0 -2
- package/dist/types/src/view-state/view-state.test.d.ts.map +0 -1
- package/src/selection.test.ts +0 -67
- package/src/view-state/view-state.ts +0 -91
- /package/dist/types/src/{view-state → core}/backends.test.d.ts +0 -0
- /package/dist/types/src/{useArticleKeyboardNavigation.d.ts → hooks/useArticleKeyboardNavigation.d.ts} +0 -0
- /package/dist/types/src/{useArticleKeyboardNavigation.test.d.ts → hooks/useArticleKeyboardNavigation.test.d.ts} +0 -0
- /package/src/{useArticleKeyboardNavigation.test.ts → hooks/useArticleKeyboardNavigation.test.ts} +0 -0
|
@@ -0,0 +1,351 @@
|
|
|
1
|
+
import { Atom } from "@effect-atom/atom";
|
|
2
|
+
import * as Match from "effect/Match";
|
|
3
|
+
import * as Schema from "effect/Schema";
|
|
4
|
+
//#region \0rolldown/runtime.js
|
|
5
|
+
var __defProp = Object.defineProperty;
|
|
6
|
+
var __exportAll = (all, no_symbols) => {
|
|
7
|
+
let target = {};
|
|
8
|
+
for (var name in all) __defProp(target, name, {
|
|
9
|
+
get: all[name],
|
|
10
|
+
enumerable: true
|
|
11
|
+
});
|
|
12
|
+
if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
|
|
13
|
+
return target;
|
|
14
|
+
};
|
|
15
|
+
//#endregion
|
|
16
|
+
//#region src/types/Attention.ts
|
|
17
|
+
var Attention_exports = /* @__PURE__ */ __exportAll({
|
|
18
|
+
ATTENDABLE_ATTRIBUTE: () => ATTENDABLE_ATTRIBUTE,
|
|
19
|
+
ATTENDABLE_SELECTOR: () => ATTENDABLE_SELECTOR,
|
|
20
|
+
AttentionManager: () => AttentionManager,
|
|
21
|
+
expandAttendableId: () => expandAttendableId,
|
|
22
|
+
getAttendables: () => getAttendables,
|
|
23
|
+
getLinkedVariant: () => getLinkedVariant,
|
|
24
|
+
getParentId: () => getParentId,
|
|
25
|
+
getRootAttendableId: () => getRootAttendableId,
|
|
26
|
+
getSegmentId: () => getSegmentId,
|
|
27
|
+
isLinkedSegment: () => isLinkedSegment,
|
|
28
|
+
linkedSegment: () => linkedSegment
|
|
29
|
+
});
|
|
30
|
+
/**
|
|
31
|
+
* Manages attention state for an application.
|
|
32
|
+
* Attention keys are slash-qualified graph IDs; ancestry is derived from progressive prefixes.
|
|
33
|
+
*/
|
|
34
|
+
var AttentionManager = class {
|
|
35
|
+
_registry;
|
|
36
|
+
_map = /* @__PURE__ */ new Map();
|
|
37
|
+
_currentAtom;
|
|
38
|
+
constructor(_registry, initial = []) {
|
|
39
|
+
this._registry = _registry;
|
|
40
|
+
this._currentAtom = Atom.make([]).pipe(Atom.keepAlive);
|
|
41
|
+
if (initial.length > 0) this.update(initial);
|
|
42
|
+
}
|
|
43
|
+
/**
|
|
44
|
+
* Atom for the currently attended element IDs.
|
|
45
|
+
*/
|
|
46
|
+
get current() {
|
|
47
|
+
return this._currentAtom;
|
|
48
|
+
}
|
|
49
|
+
/**
|
|
50
|
+
* Gets the currently attended element IDs.
|
|
51
|
+
*/
|
|
52
|
+
getCurrent() {
|
|
53
|
+
return this._registry.get(this._currentAtom);
|
|
54
|
+
}
|
|
55
|
+
/**
|
|
56
|
+
* Subscribe to changes in the current attention IDs.
|
|
57
|
+
*/
|
|
58
|
+
subscribeCurrent(cb) {
|
|
59
|
+
this._registry.get(this._currentAtom);
|
|
60
|
+
return this._registry.subscribe(this._currentAtom, () => {
|
|
61
|
+
cb(this._registry.get(this._currentAtom));
|
|
62
|
+
});
|
|
63
|
+
}
|
|
64
|
+
/**
|
|
65
|
+
* All tracked qualified IDs.
|
|
66
|
+
*/
|
|
67
|
+
keys() {
|
|
68
|
+
return Array.from(this._map.keys());
|
|
69
|
+
}
|
|
70
|
+
/**
|
|
71
|
+
* Get the attention state for a given qualified ID.
|
|
72
|
+
*/
|
|
73
|
+
get(id) {
|
|
74
|
+
const atom = this._getAtom(id);
|
|
75
|
+
return this._registry.get(atom);
|
|
76
|
+
}
|
|
77
|
+
/**
|
|
78
|
+
* Subscribe to changes in the attention state for a given qualified ID.
|
|
79
|
+
*/
|
|
80
|
+
subscribe(id, cb) {
|
|
81
|
+
const atom = this._getAtom(id);
|
|
82
|
+
this._registry.get(atom);
|
|
83
|
+
return this._registry.subscribe(atom, () => {
|
|
84
|
+
cb(this._registry.get(atom));
|
|
85
|
+
});
|
|
86
|
+
}
|
|
87
|
+
_getAtom(id) {
|
|
88
|
+
const existing = this._map.get(id);
|
|
89
|
+
if (existing) return existing;
|
|
90
|
+
const newAtom = Atom.make({
|
|
91
|
+
hasAttention: false,
|
|
92
|
+
isAncestor: false,
|
|
93
|
+
isRelated: false
|
|
94
|
+
}).pipe(Atom.keepAlive);
|
|
95
|
+
this._map.set(id, newAtom);
|
|
96
|
+
return newAtom;
|
|
97
|
+
}
|
|
98
|
+
/**
|
|
99
|
+
* Update the currently attended element.
|
|
100
|
+
* Takes the array of qualified IDs collected from the DOM; the first element is the primary attended item.
|
|
101
|
+
* Ancestry is derived from the progressive prefixes of the primary ID.
|
|
102
|
+
* Relatedness is derived from the segment ID: any tracked key whose last `/` segment matches the
|
|
103
|
+
* attended ID's segment ID is marked `isRelated`. Additionally, if the primary ID is a linked segment
|
|
104
|
+
* (starts with `~`), its immediate parent gets `isRelated` alongside `isAncestor`.
|
|
105
|
+
*
|
|
106
|
+
* @internal
|
|
107
|
+
*/
|
|
108
|
+
update(nextIds) {
|
|
109
|
+
const primaryId = nextIds[0];
|
|
110
|
+
if (!primaryId) return;
|
|
111
|
+
const prevPrimaryId = this.getCurrent()[0];
|
|
112
|
+
if (prevPrimaryId) {
|
|
113
|
+
const prevPrefixes = expandAttendableId(prevPrimaryId);
|
|
114
|
+
for (const prefix of prevPrefixes) this._set(prefix, {});
|
|
115
|
+
const prevSegmentId = getSegmentId(prevPrimaryId);
|
|
116
|
+
for (const key of this.keys()) if (getSegmentId(key) === prevSegmentId) this._set(key, {});
|
|
117
|
+
}
|
|
118
|
+
this._registry.set(this._currentAtom, nextIds);
|
|
119
|
+
const prefixes = expandAttendableId(primaryId);
|
|
120
|
+
const prefixSet = new Set(prefixes);
|
|
121
|
+
const linkedParent = isLinkedSegment(primaryId) ? getParentId(primaryId) : void 0;
|
|
122
|
+
for (const prefix of prefixes) if (prefix === primaryId) this._set(prefix, { hasAttention: true });
|
|
123
|
+
else if (prefix === linkedParent) this._set(prefix, {
|
|
124
|
+
isAncestor: true,
|
|
125
|
+
isRelated: true
|
|
126
|
+
});
|
|
127
|
+
else this._set(prefix, { isAncestor: true });
|
|
128
|
+
const segmentId = getSegmentId(primaryId);
|
|
129
|
+
for (const key of this.keys()) if (!prefixSet.has(key) && getSegmentId(key) === segmentId) this._set(key, { isRelated: true });
|
|
130
|
+
}
|
|
131
|
+
_set(id, attention) {
|
|
132
|
+
const atom = this._getAtom(id);
|
|
133
|
+
this._registry.set(atom, {
|
|
134
|
+
hasAttention: attention.hasAttention ?? false,
|
|
135
|
+
isAncestor: attention.isAncestor ?? false,
|
|
136
|
+
isRelated: attention.isRelated ?? false
|
|
137
|
+
});
|
|
138
|
+
}
|
|
139
|
+
};
|
|
140
|
+
/** The attribute marking an element as attendable, carrying its qualified id. */
|
|
141
|
+
var ATTENDABLE_ATTRIBUTE = "data-attendable-id";
|
|
142
|
+
/** Selector matching any attendable element. */
|
|
143
|
+
var ATTENDABLE_SELECTOR = `[${ATTENDABLE_ATTRIBUTE}]`;
|
|
144
|
+
/**
|
|
145
|
+
* Accumulates all attendable IDs between the element provided and the root, inclusive.
|
|
146
|
+
* Each `data-attendable-id` value is treated as a single qualified ID (no splitting).
|
|
147
|
+
*/
|
|
148
|
+
var getAttendables = (selector, cursor, acc = []) => {
|
|
149
|
+
const closestAttendable = cursor.closest(selector);
|
|
150
|
+
if (closestAttendable) {
|
|
151
|
+
const attendableId = closestAttendable.getAttribute(ATTENDABLE_ATTRIBUTE);
|
|
152
|
+
if (!attendableId) {
|
|
153
|
+
const trigger = document.querySelector(`[aria-controls="${closestAttendable.getAttribute("id")}"]`);
|
|
154
|
+
if (!trigger) return acc;
|
|
155
|
+
else return getAttendables(selector, trigger, acc);
|
|
156
|
+
} else {
|
|
157
|
+
acc.push(attendableId);
|
|
158
|
+
return !closestAttendable.parentElement ? acc : getAttendables(selector, closestAttendable.parentElement, acc);
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
return [...new Set(acc)];
|
|
162
|
+
};
|
|
163
|
+
/**
|
|
164
|
+
* The outermost attendable ancestor of `element` — the root of any nested attendables (e.g. a section
|
|
165
|
+
* within a stack). Structural (real DOM ancestry), so it is independent of what currently has attention.
|
|
166
|
+
* Resolve it from an in-DOM element: a portaled subtree (a menu, a popover) is not under its own
|
|
167
|
+
* attendable, so walk from the trigger or anchor instead.
|
|
168
|
+
*/
|
|
169
|
+
var getRootAttendableId = (element) => getAttendables(ATTENDABLE_SELECTOR, element).at(-1);
|
|
170
|
+
/**
|
|
171
|
+
* Prefix for linked segments. A linked segment's attention state is shared with its parent:
|
|
172
|
+
* when a linked node has attention, the parent is marked as both ancestor and related.
|
|
173
|
+
*/
|
|
174
|
+
var LINKED_PREFIX = "~";
|
|
175
|
+
/**
|
|
176
|
+
* Decompose a qualified graph ID into progressive prefixes for ancestry tracking.
|
|
177
|
+
* e.g. `root/a/b/c` yields `['root', 'root/a', 'root/a/b', 'root/a/b/c']`.
|
|
178
|
+
*/
|
|
179
|
+
var expandAttendableId = (qualifiedId) => {
|
|
180
|
+
const segments = qualifiedId.split("/");
|
|
181
|
+
return segments.map((_, index) => segments.slice(0, index + 1).join("/"));
|
|
182
|
+
};
|
|
183
|
+
/**
|
|
184
|
+
* Whether the last segment of a qualified ID is a linked segment (starts with `~`).
|
|
185
|
+
* Linked segments share their attention state with the parent node.
|
|
186
|
+
*/
|
|
187
|
+
var isLinkedSegment = (qualifiedId) => {
|
|
188
|
+
return (qualifiedId.split("/").pop() ?? "").startsWith(LINKED_PREFIX);
|
|
189
|
+
};
|
|
190
|
+
/**
|
|
191
|
+
* Build a linked segment ID from a variant name (e.g., `'settings'` -> `'~settings'`).
|
|
192
|
+
* Nodes identified by linked segments share their attention state with the parent node.
|
|
193
|
+
*/
|
|
194
|
+
var linkedSegment = (variant) => `${LINKED_PREFIX}${variant}`;
|
|
195
|
+
/**
|
|
196
|
+
* Extract the variant name from the last segment of a qualified ID, stripping the linked prefix.
|
|
197
|
+
* e.g. `'root/space/obj/~settings'` -> `'settings'`.
|
|
198
|
+
* If the segment is not linked (no `~` prefix), returns the segment as-is.
|
|
199
|
+
*/
|
|
200
|
+
var getLinkedVariant = (qualifiedId) => {
|
|
201
|
+
const lastSegment = qualifiedId.split("/").pop() ?? "";
|
|
202
|
+
return lastSegment.startsWith(LINKED_PREFIX) ? lastSegment.slice(1) : lastSegment;
|
|
203
|
+
};
|
|
204
|
+
/**
|
|
205
|
+
* Get the parent qualified ID (everything before the last `/` segment).
|
|
206
|
+
*/
|
|
207
|
+
var getParentId = (qualifiedId) => {
|
|
208
|
+
if (!qualifiedId) return;
|
|
209
|
+
const lastSlash = qualifiedId.lastIndexOf("/");
|
|
210
|
+
return lastSlash > 0 ? qualifiedId.slice(0, lastSlash) : void 0;
|
|
211
|
+
};
|
|
212
|
+
/**
|
|
213
|
+
* Extract the segment ID (last segment) of a qualified ID.
|
|
214
|
+
*/
|
|
215
|
+
var getSegmentId = (qualifiedId) => {
|
|
216
|
+
return qualifiedId.split("/").pop() ?? qualifiedId;
|
|
217
|
+
};
|
|
218
|
+
//#endregion
|
|
219
|
+
//#region src/types/ViewState.ts
|
|
220
|
+
var ViewState_exports = /* @__PURE__ */ __exportAll({
|
|
221
|
+
Manager: () => Manager,
|
|
222
|
+
define: () => define
|
|
223
|
+
});
|
|
224
|
+
/**
|
|
225
|
+
* Identity helper that pins the value type from the schema while keeping the literal `key`/`backend`.
|
|
226
|
+
* Declares an aspect of per-context UI state (selection, scroll, view mode, split) read/written via
|
|
227
|
+
* {@link Manager} — through `useViewState`/`useViewStateActions` in React or the
|
|
228
|
+
* `AttentionCapabilities.ViewState` capability in operations. Durability is the `backend`'s: `local`
|
|
229
|
+
* survives reloads (best-effort — degrades to in-memory when storage is blocked), `memory` is
|
|
230
|
+
* session-only.
|
|
231
|
+
*
|
|
232
|
+
* @idiom org.dxos.react-ui-attention.viewState
|
|
233
|
+
* applies: Holding per-context UI state (selection, view mode, scroll, split) that survives navigation (and reloads with the `local` backend)
|
|
234
|
+
* instead-of: ad-hoc `useState` that resets on remount, or stuffing per-context state into the plugin Settings store
|
|
235
|
+
* uses: {@link define}, {@link Manager}
|
|
236
|
+
* related: org.dxos.effect.kvsStore
|
|
237
|
+
*/
|
|
238
|
+
var define = (def) => def;
|
|
239
|
+
/**
|
|
240
|
+
* Routes per-context UI state to the backend declared by each aspect. Reads/writes go through the
|
|
241
|
+
* effect-atom registry so React hooks and graph atoms observe changes uniformly.
|
|
242
|
+
*/
|
|
243
|
+
var Manager = class {
|
|
244
|
+
#registry;
|
|
245
|
+
#backends;
|
|
246
|
+
constructor({ registry, backends }) {
|
|
247
|
+
this.#registry = registry;
|
|
248
|
+
this.#backends = backends;
|
|
249
|
+
}
|
|
250
|
+
/** Reactive atom for `(aspect, contextId)`; pass to `registry.get` inside derived atoms/hooks. */
|
|
251
|
+
atom(aspect, contextId) {
|
|
252
|
+
return this.#backends[aspect.backend].atom(aspect, contextId);
|
|
253
|
+
}
|
|
254
|
+
get(aspect, contextId) {
|
|
255
|
+
return this.#registry.get(this.atom(aspect, contextId));
|
|
256
|
+
}
|
|
257
|
+
set(aspect, contextId, value) {
|
|
258
|
+
const backend = this.#backends[aspect.backend];
|
|
259
|
+
this.#registry.set(backend.atom(aspect, contextId), value);
|
|
260
|
+
backend.persist?.(aspect, contextId, value);
|
|
261
|
+
}
|
|
262
|
+
update(aspect, contextId, fn) {
|
|
263
|
+
this.set(aspect, contextId, fn(this.get(aspect, contextId)));
|
|
264
|
+
}
|
|
265
|
+
subscribe(aspect, contextId, cb) {
|
|
266
|
+
const atom = this.atom(aspect, contextId);
|
|
267
|
+
return this.#registry.subscribe(atom, () => cb(this.#registry.get(atom)));
|
|
268
|
+
}
|
|
269
|
+
contexts(aspect) {
|
|
270
|
+
return this.#backends[aspect.backend].contexts(aspect);
|
|
271
|
+
}
|
|
272
|
+
};
|
|
273
|
+
//#endregion
|
|
274
|
+
//#region src/types/Selection.ts
|
|
275
|
+
var Selection_exports = /* @__PURE__ */ __exportAll({
|
|
276
|
+
Selection: () => Selection,
|
|
277
|
+
aspect: () => aspect,
|
|
278
|
+
defaultValue: () => defaultValue,
|
|
279
|
+
getValue: () => getValue,
|
|
280
|
+
resolve: () => resolve,
|
|
281
|
+
toAnchors: () => toAnchors,
|
|
282
|
+
toggle: () => toggle
|
|
283
|
+
});
|
|
284
|
+
var Selection = Schema.Union(Schema.Struct({
|
|
285
|
+
mode: Schema.Literal("single"),
|
|
286
|
+
id: Schema.optional(Schema.String)
|
|
287
|
+
}).pipe(Schema.mutable), Schema.Struct({
|
|
288
|
+
mode: Schema.Literal("multi"),
|
|
289
|
+
ids: Schema.Array(Schema.String).pipe(Schema.mutable)
|
|
290
|
+
}).pipe(Schema.mutable), Schema.Struct({
|
|
291
|
+
mode: Schema.Literal("range"),
|
|
292
|
+
from: Schema.optional(Schema.String),
|
|
293
|
+
to: Schema.optional(Schema.String)
|
|
294
|
+
}).pipe(Schema.mutable), Schema.Struct({
|
|
295
|
+
mode: Schema.Literal("multi-range"),
|
|
296
|
+
ranges: Schema.Array(Schema.Struct({
|
|
297
|
+
from: Schema.String,
|
|
298
|
+
to: Schema.String
|
|
299
|
+
})).pipe(Schema.mutable)
|
|
300
|
+
}).pipe(Schema.mutable)).pipe(Schema.mutable);
|
|
301
|
+
var defaultValue = Match.type().pipe(Match.withReturnType(), Match.when("single", () => ({ mode: "single" })), Match.when("multi", () => ({
|
|
302
|
+
mode: "multi",
|
|
303
|
+
ids: []
|
|
304
|
+
})), Match.when("range", () => ({ mode: "range" })), Match.when("multi-range", () => ({
|
|
305
|
+
mode: "multi-range",
|
|
306
|
+
ranges: []
|
|
307
|
+
})), Match.exhaustive);
|
|
308
|
+
/** Selection state for a context, stored in memory (ephemeral, per-device session). */
|
|
309
|
+
var aspect = define({
|
|
310
|
+
key: "selection",
|
|
311
|
+
backend: "memory",
|
|
312
|
+
schema: Selection,
|
|
313
|
+
defaultValue: () => ({
|
|
314
|
+
mode: "multi",
|
|
315
|
+
ids: []
|
|
316
|
+
})
|
|
317
|
+
});
|
|
318
|
+
/**
|
|
319
|
+
* Extract the typed result for `mode` from a stored selection value, returning the requested
|
|
320
|
+
* mode's default when the stored value is absent or holds a different mode.
|
|
321
|
+
*/
|
|
322
|
+
var resolve = (selection, mode) => {
|
|
323
|
+
const value = selection?.mode === mode ? selection : defaultValue(mode);
|
|
324
|
+
return Match.type().pipe(Match.when({ mode: "single" }, (s) => s.id), Match.when({ mode: "multi" }, (s) => s.ids), Match.when({ mode: "range" }, (s) => s.from && s.to ? {
|
|
325
|
+
from: s.from,
|
|
326
|
+
to: s.to
|
|
327
|
+
} : void 0), Match.when({ mode: "multi-range" }, (s) => s.ranges), Match.exhaustive)(value);
|
|
328
|
+
};
|
|
329
|
+
/** Toggle `id` within a multi selection; resets to a multi selection if the current value differs. */
|
|
330
|
+
var toggle = (selection, id) => {
|
|
331
|
+
const ids = selection?.mode === "multi" ? selection.ids : [];
|
|
332
|
+
return {
|
|
333
|
+
mode: "multi",
|
|
334
|
+
ids: ids.includes(id) ? ids.filter((existing) => existing !== id) : [...ids, id]
|
|
335
|
+
};
|
|
336
|
+
};
|
|
337
|
+
/** Anchor strings for a selection: ids for single/multi modes, `"${from}:${to}"` cursor pairs for range modes. */
|
|
338
|
+
var toAnchors = (selection) => selection == null ? [] : Match.type().pipe(Match.when({ mode: "single" }, (value) => value.id ? [value.id] : []), Match.when({ mode: "multi" }, (value) => [...value.ids]), Match.when({ mode: "range" }, (value) => value.from && value.to ? [`${value.from}:${value.to}`] : []), Match.when({ mode: "multi-range" }, (value) => value.ranges.map((range) => `${range.from}:${range.to}`)), Match.exhaustive)(selection);
|
|
339
|
+
/** Union of all multi-selected ids across every selection context, plus an optional explicit id. */
|
|
340
|
+
var getValue = (manager, contextId) => {
|
|
341
|
+
const ids = new Set(contextId ? [contextId] : []);
|
|
342
|
+
for (const context of manager.contexts(aspect)) {
|
|
343
|
+
const selection = manager.get(aspect, context);
|
|
344
|
+
if (selection.mode === "multi") for (const id of selection.ids) ids.add(id);
|
|
345
|
+
}
|
|
346
|
+
return ids;
|
|
347
|
+
};
|
|
348
|
+
//#endregion
|
|
349
|
+
export { Manager as a, ATTENDABLE_SELECTOR as c, getAttendables as d, toggle as i, AttentionManager as l, aspect as n, ViewState_exports as o, resolve as r, ATTENDABLE_ATTRIBUTE as s, Selection_exports as t, Attention_exports as u };
|
|
350
|
+
|
|
351
|
+
//# sourceMappingURL=chunk-types.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"chunk-types.mjs","names":[],"sources":["../../src/types/Attention.ts","../../src/types/ViewState.ts","../../src/types/Selection.ts"],"sourcesContent":["//\n// Copyright 2024 DXOS.org\n//\n\nimport { Atom, type Registry } from '@effect-atom/atom';\n\nexport type Attention = {\n hasAttention: boolean;\n isAncestor: boolean;\n isRelated: boolean;\n};\n\n/**\n * Manages attention state for an application.\n * Attention keys are slash-qualified graph IDs; ancestry is derived from progressive prefixes.\n */\nexport class AttentionManager {\n private readonly _map = new Map<string, Atom.Writable<Attention>>();\n private readonly _currentAtom: Atom.Writable<string[]>;\n\n constructor(\n private readonly _registry: Registry.Registry,\n initial: string[] = [],\n ) {\n this._currentAtom = Atom.make<string[]>([]).pipe(Atom.keepAlive);\n if (initial.length > 0) {\n this.update(initial);\n }\n }\n\n /**\n * Atom for the currently attended element IDs.\n */\n get current(): Atom.Atom<string[]> {\n return this._currentAtom;\n }\n\n /**\n * Gets the currently attended element IDs.\n */\n getCurrent(): readonly string[] {\n return this._registry.get(this._currentAtom);\n }\n\n /**\n * Subscribe to changes in the current attention IDs.\n */\n subscribeCurrent(cb: (current: readonly string[]) => void): () => void {\n this._registry.get(this._currentAtom);\n return this._registry.subscribe(this._currentAtom, () => {\n cb(this._registry.get(this._currentAtom));\n });\n }\n\n /**\n * All tracked qualified IDs.\n */\n keys(): string[] {\n return Array.from(this._map.keys());\n }\n\n /**\n * Get the attention state for a given qualified ID.\n */\n get(id: string): Attention {\n const atom = this._getAtom(id);\n return this._registry.get(atom);\n }\n\n /**\n * Subscribe to changes in the attention state for a given qualified ID.\n */\n subscribe(id: string, cb: (attention: Attention) => void): () => void {\n const atom = this._getAtom(id);\n this._registry.get(atom);\n return this._registry.subscribe(atom, () => {\n cb(this._registry.get(atom));\n });\n }\n\n private _getAtom(id: string): Atom.Writable<Attention> {\n const existing = this._map.get(id);\n if (existing) {\n return existing;\n }\n\n const newAtom = Atom.make<Attention>({ hasAttention: false, isAncestor: false, isRelated: false }).pipe(\n Atom.keepAlive,\n );\n this._map.set(id, newAtom);\n return newAtom;\n }\n\n /**\n * Update the currently attended element.\n * Takes the array of qualified IDs collected from the DOM; the first element is the primary attended item.\n * Ancestry is derived from the progressive prefixes of the primary ID.\n * Relatedness is derived from the segment ID: any tracked key whose last `/` segment matches the\n * attended ID's segment ID is marked `isRelated`. Additionally, if the primary ID is a linked segment\n * (starts with `~`), its immediate parent gets `isRelated` alongside `isAncestor`.\n *\n * @internal\n */\n update(nextIds: string[]): void {\n const primaryId = nextIds[0];\n if (!primaryId) {\n return;\n }\n\n const currentIds = this.getCurrent();\n const prevPrimaryId = currentIds[0];\n // Clear previous attention state: ancestors, primary, and related keys.\n if (prevPrimaryId) {\n const prevPrefixes = expandAttendableId(prevPrimaryId);\n for (const prefix of prevPrefixes) {\n this._set(prefix, {});\n }\n const prevSegmentId = getSegmentId(prevPrimaryId);\n for (const key of this.keys()) {\n if (getSegmentId(key) === prevSegmentId) {\n this._set(key, {});\n }\n }\n }\n\n this._registry.set(this._currentAtom, nextIds);\n\n // Set ancestors and primary.\n const prefixes = expandAttendableId(primaryId);\n const prefixSet = new Set(prefixes);\n const linkedParent = isLinkedSegment(primaryId) ? getParentId(primaryId) : undefined;\n\n for (const prefix of prefixes) {\n if (prefix === primaryId) {\n this._set(prefix, { hasAttention: true });\n } else if (prefix === linkedParent) {\n this._set(prefix, { isAncestor: true, isRelated: true });\n } else {\n this._set(prefix, { isAncestor: true });\n }\n }\n\n // Set related keys: any tracked key sharing the same segment ID.\n const segmentId = getSegmentId(primaryId);\n for (const key of this.keys()) {\n if (!prefixSet.has(key) && getSegmentId(key) === segmentId) {\n this._set(key, { isRelated: true });\n }\n }\n }\n\n private _set(id: string, attention: Partial<Attention>): void {\n const atom = this._getAtom(id);\n this._registry.set(atom, {\n hasAttention: attention.hasAttention ?? false,\n isAncestor: attention.isAncestor ?? false,\n isRelated: attention.isRelated ?? false,\n });\n }\n}\n\n/** The attribute marking an element as attendable, carrying its qualified id. */\nexport const ATTENDABLE_ATTRIBUTE = 'data-attendable-id';\n\n/** Selector matching any attendable element. */\nexport const ATTENDABLE_SELECTOR = `[${ATTENDABLE_ATTRIBUTE}]`;\n\n/**\n * Accumulates all attendable IDs between the element provided and the root, inclusive.\n * Each `data-attendable-id` value is treated as a single qualified ID (no splitting).\n */\nexport const getAttendables = (selector: string, cursor: Element, acc: string[] = []): string[] => {\n // Find the closest element with `data-attendable-id`, if any; start from cursor and move up the DOM tree.\n const closestAttendable = cursor.closest(selector);\n if (closestAttendable) {\n const attendableId = closestAttendable.getAttribute(ATTENDABLE_ATTRIBUTE);\n if (!attendableId) {\n // This has an id of an aria-controls elsewhere on the page, move cursor to that trigger.\n const trigger = document.querySelector(`[aria-controls=\"${closestAttendable.getAttribute('id')}\"]`);\n if (!trigger) {\n return acc;\n } else {\n return getAttendables(selector, trigger, acc);\n }\n } else {\n acc.push(attendableId);\n return !closestAttendable.parentElement ? acc : getAttendables(selector, closestAttendable.parentElement, acc);\n }\n }\n\n return [...new Set(acc)];\n};\n\n/**\n * The outermost attendable ancestor of `element` — the root of any nested attendables (e.g. a section\n * within a stack). Structural (real DOM ancestry), so it is independent of what currently has attention.\n * Resolve it from an in-DOM element: a portaled subtree (a menu, a popover) is not under its own\n * attendable, so walk from the trigger or anchor instead.\n */\nexport const getRootAttendableId = (element: Element): string | undefined =>\n getAttendables(ATTENDABLE_SELECTOR, element).at(-1);\n\nexport type AttendableId = { attendableId?: string };\n\nexport type Related = { related?: boolean };\n\n/**\n * Prefix for linked segments. A linked segment's attention state is shared with its parent:\n * when a linked node has attention, the parent is marked as both ancestor and related.\n */\nconst LINKED_PREFIX = '~';\n\n/**\n * Decompose a qualified graph ID into progressive prefixes for ancestry tracking.\n * e.g. `root/a/b/c` yields `['root', 'root/a', 'root/a/b', 'root/a/b/c']`.\n */\nexport const expandAttendableId = (qualifiedId: string): string[] => {\n const segments = qualifiedId.split('/');\n return segments.map((_, index) => segments.slice(0, index + 1).join('/'));\n};\n\n/**\n * Whether the last segment of a qualified ID is a linked segment (starts with `~`).\n * Linked segments share their attention state with the parent node.\n */\nexport const isLinkedSegment = (qualifiedId: string): boolean => {\n const lastSegment = qualifiedId.split('/').pop() ?? '';\n return lastSegment.startsWith(LINKED_PREFIX);\n};\n\n/**\n * Build a linked segment ID from a variant name (e.g., `'settings'` -> `'~settings'`).\n * Nodes identified by linked segments share their attention state with the parent node.\n */\nexport const linkedSegment = (variant: string): string => `${LINKED_PREFIX}${variant}`;\n\n/**\n * Extract the variant name from the last segment of a qualified ID, stripping the linked prefix.\n * e.g. `'root/space/obj/~settings'` -> `'settings'`.\n * If the segment is not linked (no `~` prefix), returns the segment as-is.\n */\nexport const getLinkedVariant = (qualifiedId: string): string => {\n const lastSegment = qualifiedId.split('/').pop() ?? '';\n return lastSegment.startsWith(LINKED_PREFIX) ? lastSegment.slice(LINKED_PREFIX.length) : lastSegment;\n};\n\n/**\n * Get the parent qualified ID (everything before the last `/` segment).\n */\nexport const getParentId = (qualifiedId: string | undefined): string | undefined => {\n if (!qualifiedId) {\n return undefined;\n }\n\n const lastSlash = qualifiedId.lastIndexOf('/');\n return lastSlash > 0 ? qualifiedId.slice(0, lastSlash) : undefined;\n};\n\n/**\n * Extract the segment ID (last segment) of a qualified ID.\n */\nexport const getSegmentId = (qualifiedId: string): string => {\n return qualifiedId.split('/').pop() ?? qualifiedId;\n};\n","//\n// Copyright 2026 DXOS.org\n//\n\nimport { type Atom, type Registry } from '@effect-atom/atom';\nimport type * as Schema from 'effect/Schema';\n\n/**\n * Persistence backend identifier. `personal` (ECHO/personal-space) is reserved for a future backend.\n */\nexport type BackendName = 'memory' | 'local';\n\n/**\n * Declares a kind of per-context UI state. The value type `T` and its persisted wire type `Encoded`\n * are inferred from the schema; `Encoded` defaults to `T` for the common no-transform case.\n */\nexport interface Aspect<T, Encoded = T> {\n readonly key: string;\n readonly backend: BackendName;\n readonly schema: Schema.Schema<T, Encoded>;\n readonly defaultValue: () => T;\n}\n\n/**\n * Identity helper that pins the value type from the schema while keeping the literal `key`/`backend`.\n * Declares an aspect of per-context UI state (selection, scroll, view mode, split) read/written via\n * {@link Manager} — through `useViewState`/`useViewStateActions` in React or the\n * `AttentionCapabilities.ViewState` capability in operations. Durability is the `backend`'s: `local`\n * survives reloads (best-effort — degrades to in-memory when storage is blocked), `memory` is\n * session-only.\n *\n * @idiom org.dxos.react-ui-attention.viewState\n * applies: Holding per-context UI state (selection, view mode, scroll, split) that survives navigation (and reloads with the `local` backend)\n * instead-of: ad-hoc `useState` that resets on remount, or stuffing per-context state into the plugin Settings store\n * uses: {@link define}, {@link Manager}\n * related: org.dxos.effect.kvsStore\n */\nexport const define = <T, Encoded = T>(def: Aspect<T, Encoded>): Aspect<T, Encoded> => def;\n\n/**\n * A backend produces a reactive, writable atom for each `(aspect, contextId)` pair. Backends may\n * hydrate asynchronously (an ECHO backend would), yielding `aspect.defaultValue()` until loaded;\n * the memory and local backends resolve synchronously.\n */\nexport interface Backend {\n /** Stable atom for the pair; created (and seeded) on first access, cached thereafter. */\n atom: <T, Encoded>(aspect: Aspect<T, Encoded>, contextId: string) => Atom.Writable<T>;\n /** Persist a value after the atom is updated. No-op for in-memory backends. */\n persist?: <T, Encoded>(aspect: Aspect<T, Encoded>, contextId: string, value: T) => void;\n /** Context ids that currently hold a value for the aspect. */\n contexts: <T, Encoded>(aspect: Aspect<T, Encoded>) => string[];\n /** Release listeners/timers (used by tests; app-lifetime managers do not call this). */\n dispose?: () => void;\n}\n\nexport interface ManagerOptions {\n readonly registry: Registry.Registry;\n readonly backends: Record<BackendName, Backend>;\n}\n\n/**\n * Routes per-context UI state to the backend declared by each aspect. Reads/writes go through the\n * effect-atom registry so React hooks and graph atoms observe changes uniformly.\n */\nexport class Manager {\n readonly #registry: Registry.Registry;\n readonly #backends: Record<BackendName, Backend>;\n\n constructor({ registry, backends }: ManagerOptions) {\n this.#registry = registry;\n this.#backends = backends;\n }\n\n /** Reactive atom for `(aspect, contextId)`; pass to `registry.get` inside derived atoms/hooks. */\n atom<T, Encoded>(aspect: Aspect<T, Encoded>, contextId: string): Atom.Writable<T> {\n return this.#backends[aspect.backend].atom(aspect, contextId);\n }\n\n get<T, Encoded>(aspect: Aspect<T, Encoded>, contextId: string): T {\n return this.#registry.get(this.atom(aspect, contextId));\n }\n\n set<T, Encoded>(aspect: Aspect<T, Encoded>, contextId: string, value: T): void {\n const backend = this.#backends[aspect.backend];\n this.#registry.set(backend.atom(aspect, contextId), value);\n backend.persist?.(aspect, contextId, value);\n }\n\n update<T, Encoded>(aspect: Aspect<T, Encoded>, contextId: string, fn: (prev: T) => T): void {\n this.set(aspect, contextId, fn(this.get(aspect, contextId)));\n }\n\n subscribe<T, Encoded>(aspect: Aspect<T, Encoded>, contextId: string, cb: (value: T) => void): () => void {\n const atom = this.atom(aspect, contextId);\n return this.#registry.subscribe(atom, () => cb(this.#registry.get(atom)));\n }\n\n contexts<T, Encoded>(aspect: Aspect<T, Encoded>): string[] {\n return this.#backends[aspect.backend].contexts(aspect);\n }\n}\n","//\n// Copyright 2025 DXOS.org\n//\n\nimport * as Match from 'effect/Match';\nimport * as Schema from 'effect/Schema';\n\nimport { type Aspect, type Manager, define } from './ViewState';\n\nexport type SelectionMode = 'single' | 'multi' | 'range' | 'multi-range';\n\nexport const Selection = Schema.Union(\n Schema.Struct({\n mode: Schema.Literal('single'),\n id: Schema.optional(Schema.String),\n }).pipe(Schema.mutable),\n Schema.Struct({\n mode: Schema.Literal('multi'),\n ids: Schema.Array(Schema.String).pipe(Schema.mutable),\n }).pipe(Schema.mutable),\n Schema.Struct({\n mode: Schema.Literal('range'),\n from: Schema.optional(Schema.String),\n to: Schema.optional(Schema.String),\n }).pipe(Schema.mutable),\n Schema.Struct({\n mode: Schema.Literal('multi-range'),\n ranges: Schema.Array(Schema.Struct({ from: Schema.String, to: Schema.String })).pipe(Schema.mutable),\n }).pipe(Schema.mutable),\n).pipe(Schema.mutable);\n\nexport type Selection = Schema.Schema.Type<typeof Selection>;\n\nexport const defaultValue = Match.type<SelectionMode>().pipe(\n Match.withReturnType<Selection>(),\n Match.when('single', () => ({ mode: 'single' })),\n Match.when('multi', () => ({ mode: 'multi', ids: [] })),\n Match.when('range', () => ({ mode: 'range' })),\n Match.when('multi-range', () => ({ mode: 'multi-range', ranges: [] })),\n Match.exhaustive,\n);\n\nexport type Result<T extends SelectionMode> = T extends 'single'\n ? string | undefined\n : T extends 'multi'\n ? string[]\n : T extends 'range'\n ? { from: string; to: string } | undefined\n : T extends 'multi-range'\n ? { from: string; to: string }[]\n : never;\n\n/** Selection state for a context, stored in memory (ephemeral, per-device session). */\nexport const aspect: Aspect<Selection> = define<Selection>({\n key: 'selection',\n backend: 'memory',\n schema: Selection,\n defaultValue: () => ({ mode: 'multi', ids: [] }),\n});\n\n/**\n * Extract the typed result for `mode` from a stored selection value, returning the requested\n * mode's default when the stored value is absent or holds a different mode.\n */\nexport const resolve = <T extends SelectionMode>(selection: Selection | undefined, mode: T): Result<T> => {\n const value = selection?.mode === mode ? selection : defaultValue(mode);\n // Cast required because TypeScript cannot relate the `Match` result to the generic `T`.\n return Match.type<Selection>().pipe(\n Match.when({ mode: 'single' }, (s) => s.id),\n Match.when({ mode: 'multi' }, (s) => s.ids),\n Match.when({ mode: 'range' }, (s) => (s.from && s.to ? { from: s.from, to: s.to } : undefined)),\n Match.when({ mode: 'multi-range' }, (s) => s.ranges),\n Match.exhaustive,\n )(value) as Result<T>;\n};\n\n/** Toggle `id` within a multi selection; resets to a multi selection if the current value differs. */\nexport const toggle = (selection: Selection | undefined, id: string): Selection => {\n const ids = selection?.mode === 'multi' ? selection.ids : [];\n return { mode: 'multi', ids: ids.includes(id) ? ids.filter((existing) => existing !== id) : [...ids, id] };\n};\n\n/** Anchor strings for a selection: ids for single/multi modes, `\"${from}:${to}\"` cursor pairs for range modes. */\nexport const toAnchors = (selection: Selection | undefined): string[] =>\n selection == null\n ? []\n : Match.type<Selection>().pipe(\n Match.when({ mode: 'single' }, (value) => (value.id ? [value.id] : [])),\n Match.when({ mode: 'multi' }, (value) => [...value.ids]),\n Match.when({ mode: 'range' }, (value) => (value.from && value.to ? [`${value.from}:${value.to}`] : [])),\n Match.when({ mode: 'multi-range' }, (value) => value.ranges.map((range) => `${range.from}:${range.to}`)),\n Match.exhaustive,\n )(selection);\n\n/** Union of all multi-selected ids across every selection context, plus an optional explicit id. */\nexport const getValue = (manager: Manager, contextId?: string): Set<string> => {\n const ids = new Set<string>(contextId ? [contextId] : []);\n for (const context of manager.contexts(aspect)) {\n const selection = manager.get(aspect, context);\n if (selection.mode === 'multi') {\n for (const id of selection.ids) {\n ids.add(id);\n }\n }\n }\n\n return ids;\n};\n"],"mappings":"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"}
|
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
import { o as ViewState_exports, t as Selection_exports, u as Attention_exports } from "./chunk-types.mjs";
|
|
2
|
+
import { a as useManager, c as useSelectionActions, d as AttendableContainer, f as RootAttentionProvider, g as useAttentionContext, h as useAttentionAttributes, i as createDefaultBackends, l as useViewState, m as useAttention, n as LocalBackend, o as useManagerOptional, p as useAttended, r as MemoryBackend, s as useSelection, t as ViewStateProvider, u as useViewStateActions } from "./chunk-ViewStateProvider.mjs";
|
|
3
|
+
import { forwardRef, useEffect, useMemo } from "react";
|
|
4
|
+
import { Icon } from "@dxos/react-ui";
|
|
5
|
+
import { mx } from "@dxos/ui-theme";
|
|
6
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
+
import { Keyboard, nestKeyboardContext } from "@dxos/keyboard";
|
|
8
|
+
//#region src/components/AttentionGlyph/AttentionGlyph.tsx
|
|
9
|
+
var attentionGlyphStyles = mx("inline-block rounded-xs w-3 h-3 bg-transparent text-accent-text transition-colors", "[[data-contains-attended=true]_&]:bg-attention-contains", "[[data-attention=true]_&]:bg-accent-bg", "[[data-attention=true]_&]:text-accent-fg", "[[aria-current][data-attention=true]_&]:bg-accent-bg", "[[aria-current][data-attention=true]_&]:text-accent-fg", "[[aria-selected=\"true\"][data-attention=true]_&]:bg-accent-bg", "[[aria-selected=\"true\"][data-attention=true]_&]:text-accent-fg");
|
|
10
|
+
var presenceIconStyles = mx("w-3 h-3");
|
|
11
|
+
var PresenceOne = () => {
|
|
12
|
+
return /* @__PURE__ */ jsx("svg", {
|
|
13
|
+
width: "12",
|
|
14
|
+
height: "12",
|
|
15
|
+
viewBox: "0 0 12 12",
|
|
16
|
+
className: presenceIconStyles,
|
|
17
|
+
fill: "none",
|
|
18
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
19
|
+
children: /* @__PURE__ */ jsx("circle", {
|
|
20
|
+
cx: "6",
|
|
21
|
+
cy: "6",
|
|
22
|
+
r: "2.5",
|
|
23
|
+
fill: "currentColor"
|
|
24
|
+
})
|
|
25
|
+
});
|
|
26
|
+
};
|
|
27
|
+
var PresenceMany = () => {
|
|
28
|
+
return /* @__PURE__ */ jsxs("svg", {
|
|
29
|
+
width: "12",
|
|
30
|
+
height: "12",
|
|
31
|
+
viewBox: "0 0 12 12",
|
|
32
|
+
className: presenceIconStyles,
|
|
33
|
+
fill: "none",
|
|
34
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
35
|
+
children: [/* @__PURE__ */ jsx("path", {
|
|
36
|
+
d: "M6.75 8.27311C7.38815 7.72296 7.79212 6.90866 7.79212 6C7.79212 5.09134 7.38815 4.27704 6.75 3.72689C7.06722 3.58122 7.42019 3.5 7.79212 3.5C9.17283 3.5 10.2921 4.61929 10.2921 6C10.2921 7.38071 9.17283 8.5 7.79212 8.5C7.42019 8.5 7.06723 8.41878 6.75 8.27311Z",
|
|
37
|
+
fill: "currentColor"
|
|
38
|
+
}), /* @__PURE__ */ jsx("circle", {
|
|
39
|
+
cx: "4.25",
|
|
40
|
+
cy: "6",
|
|
41
|
+
r: "2.5",
|
|
42
|
+
fill: "currentColor"
|
|
43
|
+
})]
|
|
44
|
+
});
|
|
45
|
+
};
|
|
46
|
+
var Syncing = () => {
|
|
47
|
+
return /* @__PURE__ */ jsx("div", {
|
|
48
|
+
role: "status",
|
|
49
|
+
className: "flex items-center",
|
|
50
|
+
children: /* @__PURE__ */ jsx(Icon, {
|
|
51
|
+
icon: "ph--circle-notch--bold",
|
|
52
|
+
size: 3,
|
|
53
|
+
style: useMemo(() => ({ animationDelay: `-${Date.now() % 2e3}ms` }), []),
|
|
54
|
+
classNames: "text-subdued animate-[spin_2s_linear_infinite]"
|
|
55
|
+
})
|
|
56
|
+
});
|
|
57
|
+
};
|
|
58
|
+
var AttentionGlyph = forwardRef(({ presence, attended, syncing, containsAttended, classNames, ...props }, forwardedRef) => {
|
|
59
|
+
const icon = syncing ? /* @__PURE__ */ jsx(Syncing, {}) : presence === "many" ? /* @__PURE__ */ jsx(PresenceMany, {}) : presence === "one" ? /* @__PURE__ */ jsx(PresenceOne, {}) : null;
|
|
60
|
+
return /* @__PURE__ */ jsx("div", {
|
|
61
|
+
className: "flex group",
|
|
62
|
+
"data-attention": attended,
|
|
63
|
+
"data-contains-attended": containsAttended,
|
|
64
|
+
children: /* @__PURE__ */ jsx("span", {
|
|
65
|
+
...props,
|
|
66
|
+
className: mx(attentionGlyphStyles, classNames),
|
|
67
|
+
ref: forwardedRef,
|
|
68
|
+
children: icon
|
|
69
|
+
})
|
|
70
|
+
});
|
|
71
|
+
});
|
|
72
|
+
//#endregion
|
|
73
|
+
//#region src/hooks/useArticleKeyboardNavigation.ts
|
|
74
|
+
/**
|
|
75
|
+
* Compute the id to select after pressing 'j' (delta = 1) or 'k' (delta = -1).
|
|
76
|
+
* Clamps at the list ends — pressing 'j' on the last item keeps the last item
|
|
77
|
+
* selected (vim-style), and 'k' on the first item keeps the first.
|
|
78
|
+
*
|
|
79
|
+
* When no current selection exists, returns the first id (for delta = 1) or the
|
|
80
|
+
* last id (for delta = -1) so the user can enter the list with either key.
|
|
81
|
+
*/
|
|
82
|
+
var advance = ({ ids, currentId, delta }) => {
|
|
83
|
+
if (ids.length === 0) return;
|
|
84
|
+
const idx = currentId ? ids.indexOf(currentId) : -1;
|
|
85
|
+
if (idx === -1) return delta === 1 ? ids[0] : ids[ids.length - 1];
|
|
86
|
+
return ids[Math.max(0, Math.min(ids.length - 1, idx + delta))];
|
|
87
|
+
};
|
|
88
|
+
/**
|
|
89
|
+
* Wire 'j' (next) and 'k' (previous) keyboard shortcuts for an article that
|
|
90
|
+
* navigates a list of items (e.g., messages, events). Bindings are scoped to
|
|
91
|
+
* the article's keyboard context so they only fire while the article has attention.
|
|
92
|
+
*
|
|
93
|
+
* Pass the items directly; ids are derived via `getId` (defaults to `item.id`).
|
|
94
|
+
* Clamps at list boundaries. Active only when the article is attended.
|
|
95
|
+
*/
|
|
96
|
+
var useArticleKeyboardNavigation = ({ articleId, items, currentId, getId, onSelect }) => {
|
|
97
|
+
const { hasAttention } = useAttention(articleId);
|
|
98
|
+
const ids = useMemo(() => items.map((item) => getId ? getId(item) : item.id), [items, getId]);
|
|
99
|
+
useEffect(() => {
|
|
100
|
+
if (!hasAttention) return;
|
|
101
|
+
const contextPath = nestKeyboardContext(articleId);
|
|
102
|
+
const context = Keyboard.singleton.getContext(contextPath);
|
|
103
|
+
const prevContext = Keyboard.singleton.getCurrentContext();
|
|
104
|
+
Keyboard.singleton.setCurrentContext(contextPath);
|
|
105
|
+
const nextBinding = {
|
|
106
|
+
shortcut: "j",
|
|
107
|
+
handler: () => {
|
|
108
|
+
const target = advance({
|
|
109
|
+
ids,
|
|
110
|
+
currentId,
|
|
111
|
+
delta: 1
|
|
112
|
+
});
|
|
113
|
+
if (target !== void 0) onSelect(target);
|
|
114
|
+
},
|
|
115
|
+
data: "Next item",
|
|
116
|
+
disableInput: true
|
|
117
|
+
};
|
|
118
|
+
const prevBinding = {
|
|
119
|
+
shortcut: "k",
|
|
120
|
+
handler: () => {
|
|
121
|
+
const target = advance({
|
|
122
|
+
ids,
|
|
123
|
+
currentId,
|
|
124
|
+
delta: -1
|
|
125
|
+
});
|
|
126
|
+
if (target !== void 0) onSelect(target);
|
|
127
|
+
},
|
|
128
|
+
data: "Previous item",
|
|
129
|
+
disableInput: true
|
|
130
|
+
};
|
|
131
|
+
context.bind(nextBinding);
|
|
132
|
+
context.bind(prevBinding);
|
|
133
|
+
return () => {
|
|
134
|
+
context.unbind("j");
|
|
135
|
+
context.unbind("k");
|
|
136
|
+
if (Keyboard.singleton.getCurrentContext() === contextPath) Keyboard.singleton.setCurrentContext(prevContext);
|
|
137
|
+
};
|
|
138
|
+
}, [
|
|
139
|
+
articleId,
|
|
140
|
+
ids,
|
|
141
|
+
currentId,
|
|
142
|
+
onSelect,
|
|
143
|
+
hasAttention
|
|
144
|
+
]);
|
|
145
|
+
};
|
|
146
|
+
//#endregion
|
|
147
|
+
export { AttendableContainer, Attention_exports as Attention, AttentionGlyph, LocalBackend, MemoryBackend, RootAttentionProvider, Selection_exports as Selection, Syncing, ViewState_exports as ViewState, ViewStateProvider, advance, createDefaultBackends, useArticleKeyboardNavigation, useAttended, useAttention, useAttentionAttributes, useAttentionContext, useManager, useManagerOptional, useSelection, useSelectionActions, useViewState, useViewStateActions };
|
|
148
|
+
|
|
149
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.mjs","names":[],"sources":["../../src/components/AttentionGlyph/AttentionGlyph.tsx","../../src/hooks/useArticleKeyboardNavigation.ts"],"sourcesContent":["//\n// Copyright 2024 DXOS.org\n//\n\nimport { type Primitive } from '@radix-ui/react-primitive';\nimport React, { type ComponentPropsWithRef, type CSSProperties, forwardRef, useMemo } from 'react';\n\nimport { Icon, type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/ui-theme';\n\nconst attentionGlyphStyles = mx(\n 'inline-block rounded-xs w-3 h-3 bg-transparent text-accent-text transition-colors',\n '[[data-contains-attended=true]_&]:bg-attention-contains',\n '[[data-attention=true]_&]:bg-accent-bg',\n '[[data-attention=true]_&]:text-accent-fg',\n '[[aria-current][data-attention=true]_&]:bg-accent-bg',\n '[[aria-current][data-attention=true]_&]:text-accent-fg',\n '[[aria-selected=\"true\"][data-attention=true]_&]:bg-accent-bg',\n '[[aria-selected=\"true\"][data-attention=true]_&]:text-accent-fg',\n);\n\nconst presenceIconStyles = mx('w-3 h-3');\n\nconst PresenceOne = () => {\n return (\n <svg\n width='12'\n height='12'\n viewBox='0 0 12 12'\n className={presenceIconStyles}\n fill='none'\n xmlns='http://www.w3.org/2000/svg'\n >\n <circle cx='6' cy='6' r='2.5' fill='currentColor' />\n </svg>\n );\n};\n\nconst PresenceMany = () => {\n return (\n <svg\n width='12'\n height='12'\n viewBox='0 0 12 12'\n className={presenceIconStyles}\n fill='none'\n xmlns='http://www.w3.org/2000/svg'\n >\n <path\n d='M6.75 8.27311C7.38815 7.72296 7.79212 6.90866 7.79212 6C7.79212 5.09134 7.38815 4.27704 6.75 3.72689C7.06722 3.58122 7.42019 3.5 7.79212 3.5C9.17283 3.5 10.2921 4.61929 10.2921 6C10.2921 7.38071 9.17283 8.5 7.79212 8.5C7.42019 8.5 7.06723 8.41878 6.75 8.27311Z'\n fill='currentColor'\n />\n <circle cx='4.25' cy='6' r='2.5' fill='currentColor' />\n </svg>\n );\n};\n\nexport const Syncing = () => {\n const animationProps = useMemo<CSSProperties>(\n () => ({\n // Synchronize animations.\n animationDelay: `-${Date.now() % 2_000}ms`,\n }),\n [],\n );\n\n return (\n <div role='status' className='flex items-center'>\n <Icon\n icon='ph--circle-notch--bold'\n size={3}\n style={animationProps}\n classNames='text-subdued animate-[spin_2s_linear_infinite]'\n />\n </div>\n );\n};\n\nexport type AttentionGlyphProps = {\n attended?: boolean;\n containsAttended?: boolean;\n syncing?: boolean;\n presence?: 'none' | 'one' | 'many';\n} & ThemedClassName<Omit<ComponentPropsWithRef<typeof Primitive.span>, 'children'>>;\n\nexport const AttentionGlyph = forwardRef<HTMLSpanElement, AttentionGlyphProps>(\n ({ presence, attended, syncing, containsAttended, classNames, ...props }, forwardedRef) => {\n const icon = syncing ? (\n <Syncing />\n ) : presence === 'many' ? (\n <PresenceMany />\n ) : presence === 'one' ? (\n <PresenceOne />\n ) : null;\n\n return (\n <div className='flex group' data-attention={attended} data-contains-attended={containsAttended}>\n <span {...props} className={mx(attentionGlyphStyles, classNames)} ref={forwardedRef}>\n {icon}\n </span>\n </div>\n );\n },\n);\n","//\n// Copyright 2026 DXOS.org\n//\n\nimport { useEffect, useMemo } from 'react';\n\nimport { Keyboard, nestKeyboardContext } from '@dxos/keyboard';\n\nimport { useAttention } from '../components';\n\n/**\n * Compute the id to select after pressing 'j' (delta = 1) or 'k' (delta = -1).\n * Clamps at the list ends — pressing 'j' on the last item keeps the last item\n * selected (vim-style), and 'k' on the first item keeps the first.\n *\n * When no current selection exists, returns the first id (for delta = 1) or the\n * last id (for delta = -1) so the user can enter the list with either key.\n */\nexport const advance = ({\n ids,\n currentId,\n delta,\n}: {\n ids: readonly string[];\n currentId: string | undefined;\n delta: 1 | -1;\n}): string | undefined => {\n if (ids.length === 0) {\n return undefined;\n }\n\n const idx = currentId ? ids.indexOf(currentId) : -1;\n if (idx === -1) {\n return delta === 1 ? ids[0] : ids[ids.length - 1];\n }\n\n const next = Math.max(0, Math.min(ids.length - 1, idx + delta));\n return ids[next];\n};\n\nexport type UseArticleKeyboardNavigationOptions<T> = {\n /** Stable id for the article (used as the keyboard context path). */\n articleId: string;\n /** Ordered list of selectable items as they appear in the article. */\n items: readonly T[];\n /** Currently-selected id, if any. */\n currentId: string | undefined;\n /** Extracts the id from an item. Defaults to `item.id`. */\n getId?: (item: T) => string;\n /** Called with the id to select when the user presses 'j' or 'k'. */\n onSelect: (id: string) => void;\n};\n\n/**\n * Wire 'j' (next) and 'k' (previous) keyboard shortcuts for an article that\n * navigates a list of items (e.g., messages, events). Bindings are scoped to\n * the article's keyboard context so they only fire while the article has attention.\n *\n * Pass the items directly; ids are derived via `getId` (defaults to `item.id`).\n * Clamps at list boundaries. Active only when the article is attended.\n */\nexport const useArticleKeyboardNavigation: {\n <T extends { id: string }>(options: UseArticleKeyboardNavigationOptions<T>): void;\n <T>(options: UseArticleKeyboardNavigationOptions<T> & { getId: (item: T) => string }): void;\n} = <T>({ articleId, items, currentId, getId, onSelect }: UseArticleKeyboardNavigationOptions<T>): void => {\n const { hasAttention } = useAttention(articleId);\n\n // `getId` is optional only when `T extends { id: string }` (enforced by the overloads above),\n // so the fallback is sound; the cast bridges the generic erased by the implementation signature.\n const ids = useMemo(() => items.map((item) => (getId ? getId(item) : (item as { id: string }).id)), [items, getId]);\n\n useEffect(() => {\n if (!hasAttention) {\n return;\n }\n\n const contextPath = nestKeyboardContext(articleId);\n const context = Keyboard.singleton.getContext(contextPath);\n const prevContext = Keyboard.singleton.getCurrentContext();\n Keyboard.singleton.setCurrentContext(contextPath);\n\n const nextBinding = {\n shortcut: 'j',\n handler: () => {\n const target = advance({ ids, currentId, delta: 1 });\n if (target !== undefined) {\n onSelect(target);\n }\n },\n data: 'Next item',\n disableInput: true,\n };\n const prevBinding = {\n shortcut: 'k',\n handler: () => {\n const target = advance({ ids, currentId, delta: -1 });\n if (target !== undefined) {\n onSelect(target);\n }\n },\n data: 'Previous item',\n disableInput: true,\n };\n\n context.bind(nextBinding);\n context.bind(prevBinding);\n\n return () => {\n context.unbind('j');\n context.unbind('k');\n // Restore the prior context if we were the ones who set it.\n if (Keyboard.singleton.getCurrentContext() === contextPath) {\n Keyboard.singleton.setCurrentContext(prevContext);\n }\n };\n }, [articleId, ids, currentId, onSelect, hasAttention]);\n};\n"],"mappings":"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"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { l as AttentionManager } from "./chunk-types.mjs";
|
|
2
|
+
import { f as RootAttentionProvider, t as ViewStateProvider } from "./chunk-ViewStateProvider.mjs";
|
|
3
|
+
import { createElement, useMemo } from "react";
|
|
4
|
+
import { Registry, RegistryContext } from "@effect-atom/atom-react";
|
|
5
|
+
//#region src/testing/decorators/withAttention.ts
|
|
6
|
+
/**
|
|
7
|
+
* Storybook decorator that provides attention context.
|
|
8
|
+
* @param initialAttendedId Optional ID to set as initially attended.
|
|
9
|
+
*/
|
|
10
|
+
var withAttention = (initialAttendedId) => {
|
|
11
|
+
return (Story) => {
|
|
12
|
+
const registry = useMemo(() => Registry.make(), []);
|
|
13
|
+
const attention = useMemo(() => initialAttendedId ? new AttentionManager(registry, [initialAttendedId]) : void 0, [registry]);
|
|
14
|
+
return createElement(RegistryContext.Provider, { value: registry }, createElement(RootAttentionProvider, { attention }, createElement(ViewStateProvider, {}, createElement(Story))));
|
|
15
|
+
};
|
|
16
|
+
};
|
|
17
|
+
//#endregion
|
|
18
|
+
export { withAttention };
|
|
19
|
+
|
|
20
|
+
//# sourceMappingURL=testing.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"testing.mjs","names":[],"sources":["../../src/testing/decorators/withAttention.ts"],"sourcesContent":["//\n// Copyright 2024 DXOS.org\n//\n\nimport { Registry, RegistryContext } from '@effect-atom/atom-react';\nimport { type Decorator } from '@storybook/react';\nimport { createElement, useMemo } from 'react';\n\nimport { RootAttentionProvider, ViewStateProvider } from '../../components';\nimport { Attention } from '../../types';\n\n/**\n * Storybook decorator that provides attention context.\n * @param initialAttendedId Optional ID to set as initially attended.\n */\nexport const withAttention = (initialAttendedId?: string): Decorator => {\n return (Story) => {\n const registry = useMemo(() => Registry.make(), []);\n const attention = useMemo(\n () => (initialAttendedId ? new Attention.AttentionManager(registry, [initialAttendedId]) : undefined),\n [registry],\n );\n\n return createElement(\n RegistryContext.Provider,\n { value: registry },\n createElement(RootAttentionProvider, { attention }, createElement(ViewStateProvider, {}, createElement(Story))),\n );\n };\n};\n"],"mappings":";;;;;;;;;AAeA,IAAa,iBAAiB,sBAA0C;CACtE,QAAQ,UAAU;EAChB,MAAM,WAAW,cAAc,SAAS,KAAK,GAAG,CAAC,CAAC;EAClD,MAAM,YAAY,cACT,oBAAoB,IAAI,iBAA2B,UAAU,CAAC,iBAAiB,CAAC,IAAI,KAAA,GAC3F,CAAC,QAAQ,CACX;EAEA,OAAO,cACL,gBAAgB,UAChB,EAAE,OAAO,SAAS,GAClB,cAAc,uBAAuB,EAAE,UAAU,GAAG,cAAc,mBAAmB,CAAC,GAAG,cAAc,KAAK,CAAC,CAAC,CAChH;CACF;AACF"}
|
|
@@ -1,19 +1,6 @@
|
|
|
1
1
|
import React, { type ComponentPropsWithRef, type PropsWithChildren } from 'react';
|
|
2
2
|
import { type ThemedClassName } from '@dxos/react-ui';
|
|
3
|
-
import {
|
|
4
|
-
type AttentionContextValue = {
|
|
5
|
-
attention: AttentionManager;
|
|
6
|
-
};
|
|
7
|
-
declare const useAttentionContext: (consumerName: string) => AttentionContextValue;
|
|
8
|
-
/**
|
|
9
|
-
* Subscribe to the attention state for a qualified graph ID.
|
|
10
|
-
*/
|
|
11
|
-
declare const useAttention: (attendableId?: string) => Attention;
|
|
12
|
-
declare const useAttended: () => readonly string[];
|
|
13
|
-
/**
|
|
14
|
-
* Computes HTML element attributes to apply so the attention system can detect changes.
|
|
15
|
-
*/
|
|
16
|
-
declare const useAttentionAttributes: (attendableId?: string) => Record<string, string | undefined>;
|
|
3
|
+
import { AttentionManager } from '../../types/Attention';
|
|
17
4
|
type RootAttentionProviderProps = PropsWithChildren<{
|
|
18
5
|
attention?: AttentionManager;
|
|
19
6
|
onChange?: (nextAttended: string[]) => void;
|
|
@@ -30,5 +17,5 @@ export type AttendableContainerProps = ThemedClassName<ComponentPropsWithRef<'di
|
|
|
30
17
|
* or the rare cases where an attendable entity is rendered outside of either of those plugins.
|
|
31
18
|
*/
|
|
32
19
|
declare const AttendableContainer: React.ForwardRefExoticComponent<Omit<AttendableContainerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
33
|
-
export { AttendableContainer, RootAttentionProvider
|
|
20
|
+
export { AttendableContainer, RootAttentionProvider };
|
|
34
21
|
//# sourceMappingURL=AttentionProvider.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AttentionProvider.d.ts","sourceRoot":"","sources":["../../../../../src/components/AttentionProvider/AttentionProvider.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"AttentionProvider.d.ts","sourceRoot":"","sources":["../../../../../src/components/AttentionProvider/AttentionProvider.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,EACZ,KAAK,qBAAqB,EAE1B,KAAK,iBAAiB,EAIvB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGtD,OAAO,EAAuB,gBAAgB,EAAkB,MAAM,uBAAuB,CAAC;AAG9F,KAAK,0BAA0B,GAAG,iBAAiB,CAAC;IAClD,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,QAAQ,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC7C,CAAC,CAAC;AAEH,QAAA,MAAM,qBAAqB,sDAAuD,0BAA0B,sBAmC3G,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,eAAe,CACpD,qBAAqB,CAAC,KAAK,CAAC,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CACjE,CAAC;AAEF;;;;;GAKG;AACH,QAAA,MAAM,mBAAmB,8GAexB,CAAC;AAEF,OAAO,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,CAAC"}
|