@threadlabs/looma 0.1.16 → 0.1.17
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/{chunk-SVINNT3E.js → chunk-OY4D3W4U.js} +29 -29
- package/dist/{chunk-G53JEAQK.js → chunk-SZJQ3NPX.js} +6 -3
- package/dist/chunk-YHXJC5M5.js +341 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/looma.cjs.js +1 -1
- package/dist/cjs/{manager-BOpVXb92.js → manager-C9j3HZay.js} +5 -2
- package/dist/cjs/positioning-i0WrCAdF.js +384 -0
- package/dist/cjs/ui-affordance-scope.cjs.entry.js +3 -113
- package/dist/cjs/ui-context-menu.cjs.entry.js +40 -5
- package/dist/cjs/ui-dialog.cjs.entry.js +1 -1
- package/dist/cjs/ui-menu.cjs.entry.js +83 -2
- package/dist/cjs/ui-popover.cjs.entry.js +43 -3
- package/dist/cjs/ui-toast-region.cjs.entry.js +17 -2
- package/dist/cjs/ui-tooltip.cjs.entry.js +95 -27
- package/dist/cjs/ui-tree-item.cjs.entry.js +1 -1
- package/dist/collection/components/ui-context-menu/ui-context-menu.css +17 -4
- package/dist/collection/components/ui-context-menu/ui-context-menu.js +38 -3
- package/dist/collection/components/ui-menu/ui-menu.css +39 -0
- package/dist/collection/components/ui-menu/ui-menu.js +128 -1
- package/dist/collection/components/ui-popover/ui-popover.css +31 -0
- package/dist/collection/components/ui-popover/ui-popover.js +87 -1
- package/dist/collection/components/ui-toast-region/ui-toast-region.css +6 -0
- package/dist/collection/components/ui-toast-region/ui-toast-region.js +16 -1
- package/dist/collection/components/ui-tooltip/ui-tooltip.css +20 -0
- package/dist/collection/components/ui-tooltip/ui-tooltip.js +160 -25
- package/dist/collection/components/ui-tree-item/ui-tree-item.css +10 -6
- package/dist/collection/input-modality.js +24 -0
- package/dist/collection/overlay/manager.js +5 -2
- package/dist/collection/overlay/positioning.js +246 -0
- package/dist/components/p-CEYIKqYc.js +1 -0
- package/dist/components/p-DOulVJT7.js +1 -0
- package/dist/components/p-PM9a74r7.js +1 -0
- package/dist/components/ui-affordance-scope.js +1 -1
- package/dist/components/ui-context-menu.js +1 -1
- package/dist/components/ui-dialog.js +1 -1
- package/dist/components/ui-menu.js +1 -1
- package/dist/components/ui-popover.js +1 -1
- package/dist/components/ui-toast-region.js +1 -1
- package/dist/components/ui-tooltip.js +1 -1
- package/dist/components/ui-tree-item.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/looma.js +1 -1
- package/dist/esm/{manager-CR7f2MQC.js → manager-PM9a74r7.js} +5 -2
- package/dist/esm/positioning-Bu0dmLBE.js +379 -0
- package/dist/esm/ui-affordance-scope.entry.js +1 -111
- package/dist/esm/ui-context-menu.entry.js +40 -5
- package/dist/esm/ui-dialog.entry.js +1 -1
- package/dist/esm/ui-menu.entry.js +83 -2
- package/dist/esm/ui-popover.entry.js +43 -3
- package/dist/esm/ui-toast-region.entry.js +17 -2
- package/dist/esm/ui-tooltip.entry.js +95 -27
- package/dist/esm/ui-tree-item.entry.js +1 -1
- package/dist/index.cjs +776 -59
- package/dist/index.d.cts +44 -1
- package/dist/index.d.ts +44 -1
- package/dist/index.js +235 -4
- package/dist/looma/looma.esm.js +1 -1
- package/dist/looma/{p-c6721aba.entry.js → p-11083743.entry.js} +1 -1
- package/dist/looma/p-1674cda4.entry.js +1 -0
- package/dist/looma/p-2e6f791e.entry.js +1 -0
- package/dist/looma/p-54c41576.entry.js +1 -0
- package/dist/looma/p-9194a99d.entry.js +1 -0
- package/dist/looma/p-Bu0dmLBE.js +1 -0
- package/dist/looma/p-PM9a74r7.js +1 -0
- package/dist/looma/p-ba01f45d.entry.js +1 -0
- package/dist/looma/p-caa8fc7b.entry.js +1 -0
- package/dist/looma/{p-ef9ca2ed.entry.js → p-d01960c2.entry.js} +2 -2
- package/dist/types/components/ui-context-menu/ui-context-menu.d.ts +3 -0
- package/dist/types/components/ui-menu/ui-menu.d.ts +13 -0
- package/dist/types/components/ui-popover/ui-popover.d.ts +9 -0
- package/dist/types/components/ui-toast-region/ui-toast-region.d.ts +2 -0
- package/dist/types/components/ui-tooltip/ui-tooltip.d.ts +16 -1
- package/dist/types/components.d.ts +71 -0
- package/dist/types/input-modality.d.ts +6 -0
- package/dist/types/overlay/manager.d.ts +3 -0
- package/dist/types/overlay/positioning.d.ts +33 -0
- package/dist/ui-affordance-scope.entry-X7DTKJGL.js +54 -0
- package/dist/{ui-avatar-group.entry-DQDP325O.js → ui-avatar-group.entry-MC34FKAN.js} +1 -1
- package/dist/{ui-avatar.entry-WYIDMOFE.js → ui-avatar.entry-OKRQWTQV.js} +1 -1
- package/dist/{ui-badge.entry-VGHXPEDT.js → ui-badge.entry-RI7JB7KV.js} +1 -1
- package/dist/{ui-button.entry-LKPLOJ22.js → ui-button.entry-PFO5TTPN.js} +1 -1
- package/dist/{ui-checkbox.entry-J74HEA22.js → ui-checkbox.entry-UHFWVISP.js} +1 -1
- package/dist/{ui-context-menu.entry-MQM2FCLI.js → ui-context-menu.entry-AIXB6U5D.js} +40 -6
- package/dist/{ui-dialog.entry-DQMMDO4Z.js → ui-dialog.entry-LPREQH2T.js} +2 -2
- package/dist/{ui-disclosure.entry-ONF7UZDC.js → ui-disclosure.entry-7XCUIYVZ.js} +1 -1
- package/dist/{ui-floating-action-button.entry-FKTGVC5T.js → ui-floating-action-button.entry-5PNIMUAW.js} +1 -1
- package/dist/{ui-form-field.entry-M3ISWQNU.js → ui-form-field.entry-77YW46SM.js} +1 -1
- package/dist/{ui-icon-button.entry-AWFIQUHM.js → ui-icon-button.entry-4AD6ALPQ.js} +1 -1
- package/dist/{ui-input.entry-JZ6RETMT.js → ui-input.entry-E7E6QDTV.js} +1 -1
- package/dist/{ui-menu-item.entry-5MFR5LFL.js → ui-menu-item.entry-H3HFLUB6.js} +1 -1
- package/dist/ui-menu.entry-UAKZU4HG.js +184 -0
- package/dist/{ui-popover.entry-ELCMKO6Y.js → ui-popover.entry-GVQKX26B.js} +46 -4
- package/dist/{ui-radio-group.entry-RJHUPPEM.js → ui-radio-group.entry-MNSR6UEE.js} +1 -1
- package/dist/{ui-radio.entry-3VRDPOY4.js → ui-radio.entry-6D4WTI5E.js} +1 -1
- package/dist/{ui-search-result-row.entry-J34YPAV7.js → ui-search-result-row.entry-J2TILUH2.js} +1 -1
- package/dist/{ui-search-shell.entry-IJ4UUP27.js → ui-search-shell.entry-FSWHEZQF.js} +1 -1
- package/dist/{ui-select.entry-C6YD3HQ5.js → ui-select.entry-JRCYYNNW.js} +1 -1
- package/dist/{ui-switch.entry-UZDF5QTI.js → ui-switch.entry-YZWMNRP2.js} +1 -1
- package/dist/{ui-tabs.entry-YRAKWOMR.js → ui-tabs.entry-F2Y344JY.js} +1 -1
- package/dist/{ui-textarea.entry-JLDKFT3K.js → ui-textarea.entry-3EZCUUAK.js} +1 -1
- package/dist/{ui-toast-region.entry-GC7C7KXF.js → ui-toast-region.entry-BTV4AW3I.js} +20 -3
- package/dist/ui-tooltip.entry-U644CF5U.js +214 -0
- package/dist/{ui-top-bar.entry-5W5UA5KV.js → ui-top-bar.entry-FGGOREQR.js} +1 -1
- package/dist/{ui-tree-item.entry-3LM7IXIK.js → ui-tree-item.entry-XVMHEONY.js} +2 -2
- package/dist/{ui-tree.entry-X4FU42A6.js → ui-tree.entry-4R7DYGAM.js} +1 -1
- package/editor.css +3 -4
- package/package.json +1 -1
- package/tokens.css +14 -2
- package/vue/editor/index.js +62 -51
- package/dist/components/p-CR7f2MQC.js +0 -1
- package/dist/components/p-QiwSQmKJ.js +0 -1
- package/dist/looma/p-2ae73d5b.entry.js +0 -1
- package/dist/looma/p-3ac2e0d4.entry.js +0 -1
- package/dist/looma/p-65c25c94.entry.js +0 -1
- package/dist/looma/p-8c09c724.entry.js +0 -1
- package/dist/looma/p-95cd639d.entry.js +0 -1
- package/dist/looma/p-96f73d07.entry.js +0 -1
- package/dist/looma/p-CR7f2MQC.js +0 -1
- package/dist/ui-affordance-scope.entry-PFP2TDKO.js +0 -145
- package/dist/ui-menu.entry-IOEIDATQ.js +0 -98
- package/dist/ui-tooltip.entry-F26XDTYX.js +0 -145
|
@@ -0,0 +1,379 @@
|
|
|
1
|
+
const DEFAULT_AFFORDANCE_NEAR_RADIUS = 16;
|
|
2
|
+
let anchorSequence = 0;
|
|
3
|
+
const anchorBindings = new WeakMap();
|
|
4
|
+
function bindAnchorName(anchor, name) {
|
|
5
|
+
const binding = anchorBindings.get(anchor) ?? {
|
|
6
|
+
original: anchor.style.getPropertyValue("anchor-name"),
|
|
7
|
+
names: new Set(),
|
|
8
|
+
};
|
|
9
|
+
binding.names.add(name);
|
|
10
|
+
anchorBindings.set(anchor, binding);
|
|
11
|
+
const values = [binding.original, ...binding.names].filter(Boolean);
|
|
12
|
+
anchor.style.setProperty("anchor-name", values.join(", "));
|
|
13
|
+
}
|
|
14
|
+
function unbindAnchorName(anchor, name) {
|
|
15
|
+
const binding = anchorBindings.get(anchor);
|
|
16
|
+
if (!binding)
|
|
17
|
+
return;
|
|
18
|
+
binding.names.delete(name);
|
|
19
|
+
if (binding.names.size) {
|
|
20
|
+
const values = [binding.original, ...binding.names].filter(Boolean);
|
|
21
|
+
anchor.style.setProperty("anchor-name", values.join(", "));
|
|
22
|
+
return;
|
|
23
|
+
}
|
|
24
|
+
if (binding.original)
|
|
25
|
+
anchor.style.setProperty("anchor-name", binding.original);
|
|
26
|
+
else
|
|
27
|
+
anchor.style.removeProperty("anchor-name");
|
|
28
|
+
anchorBindings.delete(anchor);
|
|
29
|
+
}
|
|
30
|
+
function supportsAnchorPositioning(owner) {
|
|
31
|
+
const css = owner.CSS;
|
|
32
|
+
return typeof css?.supports === "function"
|
|
33
|
+
&& css.supports("anchor-name: --ui-anchor-test")
|
|
34
|
+
&& css.supports("position-anchor: --ui-anchor-test")
|
|
35
|
+
&& css.supports("top: anchor(bottom)");
|
|
36
|
+
}
|
|
37
|
+
function topLayerOpen(surface) {
|
|
38
|
+
try {
|
|
39
|
+
return surface.matches(":popover-open");
|
|
40
|
+
}
|
|
41
|
+
catch {
|
|
42
|
+
return !surface.hidden;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
function showInTopLayer(surface) {
|
|
46
|
+
surface.setAttribute("popover", "manual");
|
|
47
|
+
surface.hidden = false;
|
|
48
|
+
if (typeof surface.showPopover === "function" && !topLayerOpen(surface)) {
|
|
49
|
+
try {
|
|
50
|
+
surface.showPopover();
|
|
51
|
+
}
|
|
52
|
+
catch {
|
|
53
|
+
// A disconnected or already-transitioning surface still receives the
|
|
54
|
+
// fixed-position fallback below and will be retried on the next sync.
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
function hideFromTopLayer(surface) {
|
|
59
|
+
if (typeof surface.hidePopover === "function" && topLayerOpen(surface)) {
|
|
60
|
+
try {
|
|
61
|
+
surface.hidePopover();
|
|
62
|
+
}
|
|
63
|
+
catch {
|
|
64
|
+
// The surface may have been disconnected between state and DOM updates.
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
surface.hidden = true;
|
|
68
|
+
}
|
|
69
|
+
/**
|
|
70
|
+
* Places unanchored floating UI, such as a toast region, in the browser top
|
|
71
|
+
* layer. Its viewport position remains CSS-owned; the controller only provides
|
|
72
|
+
* the native Popover API boundary and its no-Popover fallback.
|
|
73
|
+
*/
|
|
74
|
+
function createViewportSurface(surface) {
|
|
75
|
+
surface.setAttribute("popover", "manual");
|
|
76
|
+
surface.dataset.uiPositioning = "viewport";
|
|
77
|
+
return {
|
|
78
|
+
show() {
|
|
79
|
+
showInTopLayer(surface);
|
|
80
|
+
},
|
|
81
|
+
hide() {
|
|
82
|
+
hideFromTopLayer(surface);
|
|
83
|
+
},
|
|
84
|
+
destroy() {
|
|
85
|
+
hideFromTopLayer(surface);
|
|
86
|
+
},
|
|
87
|
+
};
|
|
88
|
+
}
|
|
89
|
+
function fallbackPosition(surface, anchor, placement, gap, viewportGap) {
|
|
90
|
+
const owner = surface.ownerDocument.defaultView ?? window;
|
|
91
|
+
const viewport = getVisualViewportRect(owner);
|
|
92
|
+
const rect = surface.getBoundingClientRect();
|
|
93
|
+
const preferTop = placement.startsWith("top");
|
|
94
|
+
const preferEnd = placement.endsWith("end");
|
|
95
|
+
const spaceBelow = viewport.bottom - anchor.bottom - viewportGap;
|
|
96
|
+
const spaceAbove = anchor.top - viewport.top - viewportGap;
|
|
97
|
+
const useTop = preferTop
|
|
98
|
+
? !(spaceAbove < rect.height + gap && spaceBelow > spaceAbove)
|
|
99
|
+
: spaceBelow < rect.height + gap && spaceAbove > spaceBelow;
|
|
100
|
+
const unclampedTop = useTop
|
|
101
|
+
? anchor.top - rect.height - gap
|
|
102
|
+
: anchor.bottom + gap;
|
|
103
|
+
const unclampedLeft = preferEnd
|
|
104
|
+
? anchor.right - rect.width
|
|
105
|
+
: anchor.left;
|
|
106
|
+
const shifted = clampRectToViewport({
|
|
107
|
+
left: unclampedLeft,
|
|
108
|
+
top: unclampedTop,
|
|
109
|
+
width: rect.width,
|
|
110
|
+
height: rect.height,
|
|
111
|
+
}, viewport, viewportGap);
|
|
112
|
+
surface.style.left = `${Math.round(unclampedLeft + shifted.x)}px`;
|
|
113
|
+
surface.style.top = `${Math.round(unclampedTop + shifted.y)}px`;
|
|
114
|
+
surface.style.right = "auto";
|
|
115
|
+
surface.style.bottom = "auto";
|
|
116
|
+
}
|
|
117
|
+
/**
|
|
118
|
+
* One lightweight positioning controller for Looma floating UI. Native
|
|
119
|
+
* Popover provides the top layer and CSS Anchor Positioning follows a named
|
|
120
|
+
* element. Browsers without Anchor Positioning use the same flip/shift
|
|
121
|
+
* geometry through scroll/resize listeners that exist only while open.
|
|
122
|
+
*/
|
|
123
|
+
function createAnchoredSurface(surface, options = {}) {
|
|
124
|
+
const owner = surface.ownerDocument.defaultView ?? window;
|
|
125
|
+
const placement = options.placement ?? "bottom-start";
|
|
126
|
+
const gap = Math.max(0, options.gap ?? 4);
|
|
127
|
+
const viewportGap = Math.max(0, options.viewportGap ?? 8);
|
|
128
|
+
const nativeAnchor = supportsAnchorPositioning(owner);
|
|
129
|
+
const anchorName = `--ui-anchor-${++anchorSequence}`;
|
|
130
|
+
let anchor = options.anchor ?? null;
|
|
131
|
+
let point = null;
|
|
132
|
+
let open = false;
|
|
133
|
+
let frame = null;
|
|
134
|
+
let listenerAbort = null;
|
|
135
|
+
surface.setAttribute("popover", "manual");
|
|
136
|
+
surface.dataset.uiPositioning = nativeAnchor ? "anchor" : "fallback";
|
|
137
|
+
surface.style.position = "fixed";
|
|
138
|
+
surface.style.margin = "0";
|
|
139
|
+
const bindAnchor = (next) => {
|
|
140
|
+
if (anchor)
|
|
141
|
+
unbindAnchorName(anchor, anchorName);
|
|
142
|
+
anchor = next;
|
|
143
|
+
if (!anchor) {
|
|
144
|
+
surface.style.removeProperty("position-anchor");
|
|
145
|
+
return;
|
|
146
|
+
}
|
|
147
|
+
bindAnchorName(anchor, anchorName);
|
|
148
|
+
surface.style.setProperty("position-anchor", anchorName);
|
|
149
|
+
};
|
|
150
|
+
const positionNative = () => {
|
|
151
|
+
const blockEnd = placement.startsWith("bottom");
|
|
152
|
+
const inlineEnd = placement.endsWith("end");
|
|
153
|
+
surface.style.top = blockEnd ? `calc(anchor(bottom) + ${gap}px)` : "auto";
|
|
154
|
+
surface.style.bottom = blockEnd ? "auto" : `calc(anchor(top) + ${gap}px)`;
|
|
155
|
+
surface.style.left = inlineEnd ? "auto" : "anchor(left)";
|
|
156
|
+
surface.style.right = inlineEnd ? "anchor(right)" : "auto";
|
|
157
|
+
surface.style.setProperty("position-try-fallbacks", "flip-block, flip-inline");
|
|
158
|
+
};
|
|
159
|
+
const position = () => {
|
|
160
|
+
frame = null;
|
|
161
|
+
if (!open)
|
|
162
|
+
return;
|
|
163
|
+
if (point) {
|
|
164
|
+
fallbackPosition(surface, {
|
|
165
|
+
left: point.x,
|
|
166
|
+
right: point.x,
|
|
167
|
+
top: point.y,
|
|
168
|
+
bottom: point.y}, "bottom-start", gap, viewportGap);
|
|
169
|
+
return;
|
|
170
|
+
}
|
|
171
|
+
if (!anchor)
|
|
172
|
+
return;
|
|
173
|
+
if (nativeAnchor)
|
|
174
|
+
positionNative();
|
|
175
|
+
else
|
|
176
|
+
fallbackPosition(surface, anchor.getBoundingClientRect(), placement, gap, viewportGap);
|
|
177
|
+
};
|
|
178
|
+
const schedule = () => {
|
|
179
|
+
if (!open || frame !== null)
|
|
180
|
+
return;
|
|
181
|
+
frame = owner.requestAnimationFrame(position);
|
|
182
|
+
};
|
|
183
|
+
const syncFallbackListeners = () => {
|
|
184
|
+
const needsListeners = open && (point !== null || !nativeAnchor);
|
|
185
|
+
if (!needsListeners) {
|
|
186
|
+
listenerAbort?.abort();
|
|
187
|
+
listenerAbort = null;
|
|
188
|
+
return;
|
|
189
|
+
}
|
|
190
|
+
if (listenerAbort)
|
|
191
|
+
return;
|
|
192
|
+
listenerAbort = new AbortController();
|
|
193
|
+
const signal = listenerAbort.signal;
|
|
194
|
+
owner.addEventListener("resize", schedule, { passive: true, signal });
|
|
195
|
+
owner.addEventListener("scroll", schedule, { passive: true, capture: true, signal });
|
|
196
|
+
owner.visualViewport?.addEventListener("resize", schedule, { passive: true, signal });
|
|
197
|
+
owner.visualViewport?.addEventListener("scroll", schedule, { passive: true, signal });
|
|
198
|
+
};
|
|
199
|
+
bindAnchor(anchor);
|
|
200
|
+
return {
|
|
201
|
+
setAnchor(next) {
|
|
202
|
+
point = null;
|
|
203
|
+
bindAnchor(next);
|
|
204
|
+
syncFallbackListeners();
|
|
205
|
+
schedule();
|
|
206
|
+
},
|
|
207
|
+
show() {
|
|
208
|
+
point = null;
|
|
209
|
+
open = true;
|
|
210
|
+
syncFallbackListeners();
|
|
211
|
+
showInTopLayer(surface);
|
|
212
|
+
position();
|
|
213
|
+
},
|
|
214
|
+
showAtPoint(nextPoint) {
|
|
215
|
+
point = nextPoint;
|
|
216
|
+
open = true;
|
|
217
|
+
syncFallbackListeners();
|
|
218
|
+
showInTopLayer(surface);
|
|
219
|
+
position();
|
|
220
|
+
},
|
|
221
|
+
hide() {
|
|
222
|
+
open = false;
|
|
223
|
+
point = null;
|
|
224
|
+
syncFallbackListeners();
|
|
225
|
+
if (frame !== null)
|
|
226
|
+
owner.cancelAnimationFrame(frame);
|
|
227
|
+
frame = null;
|
|
228
|
+
hideFromTopLayer(surface);
|
|
229
|
+
},
|
|
230
|
+
refresh: schedule,
|
|
231
|
+
destroy() {
|
|
232
|
+
open = false;
|
|
233
|
+
listenerAbort?.abort();
|
|
234
|
+
listenerAbort = null;
|
|
235
|
+
if (frame !== null)
|
|
236
|
+
owner.cancelAnimationFrame(frame);
|
|
237
|
+
frame = null;
|
|
238
|
+
hideFromTopLayer(surface);
|
|
239
|
+
bindAnchor(null);
|
|
240
|
+
},
|
|
241
|
+
};
|
|
242
|
+
}
|
|
243
|
+
function getVisualViewportRect(owner = window) {
|
|
244
|
+
const viewport = owner.visualViewport;
|
|
245
|
+
const left = viewport?.offsetLeft ?? 0;
|
|
246
|
+
const top = viewport?.offsetTop ?? 0;
|
|
247
|
+
const width = viewport?.width ?? owner.innerWidth;
|
|
248
|
+
const height = viewport?.height ?? owner.innerHeight;
|
|
249
|
+
return {
|
|
250
|
+
left,
|
|
251
|
+
top,
|
|
252
|
+
right: left + width,
|
|
253
|
+
bottom: top + height,
|
|
254
|
+
width,
|
|
255
|
+
height,
|
|
256
|
+
};
|
|
257
|
+
}
|
|
258
|
+
function clampRectToViewport(rect, viewport = getVisualViewportRect(), gutter = 0) {
|
|
259
|
+
const availableWidth = Math.max(0, viewport.width - (gutter * 2));
|
|
260
|
+
const availableHeight = Math.max(0, viewport.height - (gutter * 2));
|
|
261
|
+
const targetLeft = rect.width > availableWidth
|
|
262
|
+
? viewport.left + gutter
|
|
263
|
+
: Math.min(Math.max(rect.left, viewport.left + gutter), viewport.right - gutter - rect.width);
|
|
264
|
+
const targetTop = rect.height > availableHeight
|
|
265
|
+
? viewport.top + gutter
|
|
266
|
+
: Math.min(Math.max(rect.top, viewport.top + gutter), viewport.bottom - gutter - rect.height);
|
|
267
|
+
return { x: targetLeft - rect.left, y: targetTop - rect.top };
|
|
268
|
+
}
|
|
269
|
+
function distanceFromPointToRect(point, rect) {
|
|
270
|
+
const dx = Math.max(rect.left - point.x, 0, point.x - rect.right);
|
|
271
|
+
const dy = Math.max(rect.top - point.y, 0, point.y - rect.bottom);
|
|
272
|
+
return Math.hypot(dx, dy);
|
|
273
|
+
}
|
|
274
|
+
/**
|
|
275
|
+
* Coordinates anticipatory UI within one interaction scope.
|
|
276
|
+
*
|
|
277
|
+
* The coordinator deliberately owns one pointer listener and one animation-frame
|
|
278
|
+
* update for the whole scope. Anchors remain the only hit-testable controls; the
|
|
279
|
+
* reflected state is presentation-only, so overlapping near regions do not steal
|
|
280
|
+
* pointer input from each other or from surrounding content.
|
|
281
|
+
*/
|
|
282
|
+
function createProximityCoordinator(scope, options = {}) {
|
|
283
|
+
const owner = scope.ownerDocument.defaultView ?? window;
|
|
284
|
+
const pointerTarget = options.pointerTarget ?? scope;
|
|
285
|
+
const anchorSelector = options.anchorSelector ?? "[data-ui-affordance]";
|
|
286
|
+
const configuredRadius = options.nearRadius ?? DEFAULT_AFFORDANCE_NEAR_RADIUS;
|
|
287
|
+
const nearRadius = Number.isFinite(configuredRadius)
|
|
288
|
+
? Math.max(0, configuredRadius)
|
|
289
|
+
: DEFAULT_AFFORDANCE_NEAR_RADIUS;
|
|
290
|
+
const abort = new AbortController();
|
|
291
|
+
let anchors = [];
|
|
292
|
+
let frame = null;
|
|
293
|
+
let point = null;
|
|
294
|
+
let geometryDirty = false;
|
|
295
|
+
const clear = () => {
|
|
296
|
+
for (const { element } of anchors) {
|
|
297
|
+
if (element.hasAttribute("data-ui-proximity")) {
|
|
298
|
+
element.removeAttribute("data-ui-proximity");
|
|
299
|
+
}
|
|
300
|
+
}
|
|
301
|
+
if (scope.hasAttribute("data-ui-interaction")) {
|
|
302
|
+
scope.removeAttribute("data-ui-interaction");
|
|
303
|
+
}
|
|
304
|
+
};
|
|
305
|
+
const measure = () => {
|
|
306
|
+
anchors = Array.from(scope.querySelectorAll(anchorSelector))
|
|
307
|
+
.filter((element) => !element.hasAttribute("disabled") && element.getAttribute("aria-disabled") !== "true")
|
|
308
|
+
.map((element) => ({ element, rect: element.getBoundingClientRect() }));
|
|
309
|
+
geometryDirty = false;
|
|
310
|
+
};
|
|
311
|
+
const update = () => {
|
|
312
|
+
frame = null;
|
|
313
|
+
if (geometryDirty)
|
|
314
|
+
measure();
|
|
315
|
+
if (!point) {
|
|
316
|
+
clear();
|
|
317
|
+
return;
|
|
318
|
+
}
|
|
319
|
+
let engaged = false;
|
|
320
|
+
for (const anchor of anchors) {
|
|
321
|
+
const near = distanceFromPointToRect(point, anchor.rect) <= nearRadius;
|
|
322
|
+
if (near && anchor.element.getAttribute("data-ui-proximity") !== "near") {
|
|
323
|
+
anchor.element.setAttribute("data-ui-proximity", "near");
|
|
324
|
+
}
|
|
325
|
+
else if (!near && anchor.element.hasAttribute("data-ui-proximity")) {
|
|
326
|
+
anchor.element.removeAttribute("data-ui-proximity");
|
|
327
|
+
}
|
|
328
|
+
engaged ||= near;
|
|
329
|
+
}
|
|
330
|
+
if (engaged && scope.getAttribute("data-ui-interaction") !== "engaged") {
|
|
331
|
+
scope.setAttribute("data-ui-interaction", "engaged");
|
|
332
|
+
}
|
|
333
|
+
else if (!engaged && scope.hasAttribute("data-ui-interaction")) {
|
|
334
|
+
scope.removeAttribute("data-ui-interaction");
|
|
335
|
+
}
|
|
336
|
+
};
|
|
337
|
+
const schedule = () => {
|
|
338
|
+
if (frame !== null)
|
|
339
|
+
return;
|
|
340
|
+
frame = owner.requestAnimationFrame(update);
|
|
341
|
+
};
|
|
342
|
+
const onPointerMove = (event) => {
|
|
343
|
+
const pointer = event;
|
|
344
|
+
if (pointer.pointerType === "touch") {
|
|
345
|
+
point = null;
|
|
346
|
+
}
|
|
347
|
+
else {
|
|
348
|
+
point = { x: pointer.clientX, y: pointer.clientY };
|
|
349
|
+
}
|
|
350
|
+
schedule();
|
|
351
|
+
};
|
|
352
|
+
const invalidate = () => {
|
|
353
|
+
geometryDirty = true;
|
|
354
|
+
schedule();
|
|
355
|
+
};
|
|
356
|
+
pointerTarget.addEventListener("pointermove", onPointerMove, {
|
|
357
|
+
passive: true,
|
|
358
|
+
signal: abort.signal,
|
|
359
|
+
});
|
|
360
|
+
owner.addEventListener("resize", invalidate, { passive: true, signal: abort.signal });
|
|
361
|
+
owner.addEventListener("scroll", invalidate, { passive: true, capture: true, signal: abort.signal });
|
|
362
|
+
owner.visualViewport?.addEventListener("resize", invalidate, { passive: true, signal: abort.signal });
|
|
363
|
+
owner.visualViewport?.addEventListener("scroll", invalidate, { passive: true, signal: abort.signal });
|
|
364
|
+
measure();
|
|
365
|
+
return {
|
|
366
|
+
refresh: invalidate,
|
|
367
|
+
destroy() {
|
|
368
|
+
abort.abort();
|
|
369
|
+
if (frame !== null)
|
|
370
|
+
owner.cancelAnimationFrame(frame);
|
|
371
|
+
frame = null;
|
|
372
|
+
point = null;
|
|
373
|
+
clear();
|
|
374
|
+
anchors = [];
|
|
375
|
+
},
|
|
376
|
+
};
|
|
377
|
+
}
|
|
378
|
+
|
|
379
|
+
export { DEFAULT_AFFORDANCE_NEAR_RADIUS as D, createAnchoredSurface as a, createViewportSurface as b, createProximityCoordinator as c };
|
|
@@ -1,115 +1,5 @@
|
|
|
1
1
|
import { r as registerInstance, g as getElement, h, H as Host } from './index-CEeiinfk.js';
|
|
2
|
-
|
|
3
|
-
const DEFAULT_AFFORDANCE_NEAR_RADIUS = 16;
|
|
4
|
-
function distanceFromPointToRect(point, rect) {
|
|
5
|
-
const dx = Math.max(rect.left - point.x, 0, point.x - rect.right);
|
|
6
|
-
const dy = Math.max(rect.top - point.y, 0, point.y - rect.bottom);
|
|
7
|
-
return Math.hypot(dx, dy);
|
|
8
|
-
}
|
|
9
|
-
/**
|
|
10
|
-
* Coordinates anticipatory UI within one interaction scope.
|
|
11
|
-
*
|
|
12
|
-
* The coordinator deliberately owns one pointer listener and one animation-frame
|
|
13
|
-
* update for the whole scope. Anchors remain the only hit-testable controls; the
|
|
14
|
-
* reflected state is presentation-only, so overlapping near regions do not steal
|
|
15
|
-
* pointer input from each other or from surrounding content.
|
|
16
|
-
*/
|
|
17
|
-
function createProximityCoordinator(scope, options = {}) {
|
|
18
|
-
const owner = scope.ownerDocument.defaultView ?? window;
|
|
19
|
-
const pointerTarget = options.pointerTarget ?? scope;
|
|
20
|
-
const anchorSelector = options.anchorSelector ?? "[data-ui-affordance]";
|
|
21
|
-
const configuredRadius = options.nearRadius ?? DEFAULT_AFFORDANCE_NEAR_RADIUS;
|
|
22
|
-
const nearRadius = Number.isFinite(configuredRadius)
|
|
23
|
-
? Math.max(0, configuredRadius)
|
|
24
|
-
: DEFAULT_AFFORDANCE_NEAR_RADIUS;
|
|
25
|
-
const abort = new AbortController();
|
|
26
|
-
let anchors = [];
|
|
27
|
-
let frame = null;
|
|
28
|
-
let point = null;
|
|
29
|
-
let geometryDirty = false;
|
|
30
|
-
const clear = () => {
|
|
31
|
-
for (const { element } of anchors) {
|
|
32
|
-
if (element.hasAttribute("data-ui-proximity")) {
|
|
33
|
-
element.removeAttribute("data-ui-proximity");
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
if (scope.hasAttribute("data-ui-interaction")) {
|
|
37
|
-
scope.removeAttribute("data-ui-interaction");
|
|
38
|
-
}
|
|
39
|
-
};
|
|
40
|
-
const measure = () => {
|
|
41
|
-
anchors = Array.from(scope.querySelectorAll(anchorSelector))
|
|
42
|
-
.filter((element) => !element.hasAttribute("disabled") && element.getAttribute("aria-disabled") !== "true")
|
|
43
|
-
.map((element) => ({ element, rect: element.getBoundingClientRect() }));
|
|
44
|
-
geometryDirty = false;
|
|
45
|
-
};
|
|
46
|
-
const update = () => {
|
|
47
|
-
frame = null;
|
|
48
|
-
if (geometryDirty)
|
|
49
|
-
measure();
|
|
50
|
-
if (!point) {
|
|
51
|
-
clear();
|
|
52
|
-
return;
|
|
53
|
-
}
|
|
54
|
-
let engaged = false;
|
|
55
|
-
for (const anchor of anchors) {
|
|
56
|
-
const near = distanceFromPointToRect(point, anchor.rect) <= nearRadius;
|
|
57
|
-
if (near && anchor.element.getAttribute("data-ui-proximity") !== "near") {
|
|
58
|
-
anchor.element.setAttribute("data-ui-proximity", "near");
|
|
59
|
-
}
|
|
60
|
-
else if (!near && anchor.element.hasAttribute("data-ui-proximity")) {
|
|
61
|
-
anchor.element.removeAttribute("data-ui-proximity");
|
|
62
|
-
}
|
|
63
|
-
engaged ||= near;
|
|
64
|
-
}
|
|
65
|
-
if (engaged && scope.getAttribute("data-ui-interaction") !== "engaged") {
|
|
66
|
-
scope.setAttribute("data-ui-interaction", "engaged");
|
|
67
|
-
}
|
|
68
|
-
else if (!engaged && scope.hasAttribute("data-ui-interaction")) {
|
|
69
|
-
scope.removeAttribute("data-ui-interaction");
|
|
70
|
-
}
|
|
71
|
-
};
|
|
72
|
-
const schedule = () => {
|
|
73
|
-
if (frame !== null)
|
|
74
|
-
return;
|
|
75
|
-
frame = owner.requestAnimationFrame(update);
|
|
76
|
-
};
|
|
77
|
-
const onPointerMove = (event) => {
|
|
78
|
-
const pointer = event;
|
|
79
|
-
if (pointer.pointerType === "touch") {
|
|
80
|
-
point = null;
|
|
81
|
-
}
|
|
82
|
-
else {
|
|
83
|
-
point = { x: pointer.clientX, y: pointer.clientY };
|
|
84
|
-
}
|
|
85
|
-
schedule();
|
|
86
|
-
};
|
|
87
|
-
const invalidate = () => {
|
|
88
|
-
geometryDirty = true;
|
|
89
|
-
schedule();
|
|
90
|
-
};
|
|
91
|
-
pointerTarget.addEventListener("pointermove", onPointerMove, {
|
|
92
|
-
passive: true,
|
|
93
|
-
signal: abort.signal,
|
|
94
|
-
});
|
|
95
|
-
owner.addEventListener("resize", invalidate, { passive: true, signal: abort.signal });
|
|
96
|
-
owner.addEventListener("scroll", invalidate, { passive: true, capture: true, signal: abort.signal });
|
|
97
|
-
owner.visualViewport?.addEventListener("resize", invalidate, { passive: true, signal: abort.signal });
|
|
98
|
-
owner.visualViewport?.addEventListener("scroll", invalidate, { passive: true, signal: abort.signal });
|
|
99
|
-
measure();
|
|
100
|
-
return {
|
|
101
|
-
refresh: invalidate,
|
|
102
|
-
destroy() {
|
|
103
|
-
abort.abort();
|
|
104
|
-
if (frame !== null)
|
|
105
|
-
owner.cancelAnimationFrame(frame);
|
|
106
|
-
frame = null;
|
|
107
|
-
point = null;
|
|
108
|
-
clear();
|
|
109
|
-
anchors = [];
|
|
110
|
-
},
|
|
111
|
-
};
|
|
112
|
-
}
|
|
2
|
+
import { D as DEFAULT_AFFORDANCE_NEAR_RADIUS, c as createProximityCoordinator } from './positioning-Bu0dmLBE.js';
|
|
113
3
|
|
|
114
4
|
const uiAffordanceScopeCss = () => `:host{display:contents;--ui-affordance-scope-engaged:0}:host([data-ui-interaction='engaged']){--ui-affordance-scope-engaged:1}`;
|
|
115
5
|
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { r as registerInstance, g as getElement, h, H as Host } from './index-CEeiinfk.js';
|
|
2
|
-
import { o as openOverlay, c as closeOverlay, r as requestTopOverlayClose } from './manager-
|
|
2
|
+
import { o as openOverlay, c as closeOverlay, r as requestTopOverlayClose } from './manager-PM9a74r7.js';
|
|
3
3
|
import { d as dispatchDetail } from './events-JwSoedEO.js';
|
|
4
|
+
import { a as createAnchoredSurface } from './positioning-Bu0dmLBE.js';
|
|
4
5
|
|
|
5
|
-
const uiContextMenuCss = () => `:host{display:contents}.menu{position:fixed;z-index:var(--ui-z-overlay, 1000);min-width:12rem}.menu
|
|
6
|
+
const uiContextMenuCss = () => `:host{display:contents}.menu{position:fixed;inset:auto;margin:0;z-index:var(--ui-z-overlay, 1000);min-width:12rem;opacity:0;transform:translateY(-4px) scale(0.99);transition:opacity var(--ui-motion-fast) var(--ui-motion-ease), transform var(--ui-motion-fast) var(--ui-motion-ease), display var(--ui-motion-fast) allow-discrete, overlay var(--ui-motion-fast) allow-discrete}.menu:popover-open{opacity:1;transform:translateY(0) scale(1)}@starting-style{.menu:popover-open{opacity:0;transform:translateY(-4px) scale(0.99)}}.menu[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){.menu{transition:none}}`;
|
|
6
7
|
|
|
7
8
|
const UIContextMenu = class {
|
|
8
9
|
constructor(hostRef) {
|
|
@@ -21,6 +22,8 @@ const UIContextMenu = class {
|
|
|
21
22
|
contextTarget = null;
|
|
22
23
|
pointerX = 0;
|
|
23
24
|
pointerY = 0;
|
|
25
|
+
pointPositioned = false;
|
|
26
|
+
surface = null;
|
|
24
27
|
syncFromProp() {
|
|
25
28
|
this.internalOpen = this.open;
|
|
26
29
|
}
|
|
@@ -31,6 +34,12 @@ const UIContextMenu = class {
|
|
|
31
34
|
syncOverlay() {
|
|
32
35
|
this.syncTriggerState();
|
|
33
36
|
if (this.internalOpen) {
|
|
37
|
+
if (this.pointPositioned) {
|
|
38
|
+
this.surface?.showAtPoint({ x: this.pointerX, y: this.pointerY });
|
|
39
|
+
}
|
|
40
|
+
else {
|
|
41
|
+
this.surface?.show();
|
|
42
|
+
}
|
|
34
43
|
openOverlay({
|
|
35
44
|
id: this.overlayId,
|
|
36
45
|
modal: false,
|
|
@@ -40,6 +49,7 @@ const UIContextMenu = class {
|
|
|
40
49
|
});
|
|
41
50
|
}
|
|
42
51
|
else {
|
|
52
|
+
this.surface?.hide();
|
|
43
53
|
closeOverlay(this.overlayId);
|
|
44
54
|
}
|
|
45
55
|
}
|
|
@@ -48,18 +58,33 @@ const UIContextMenu = class {
|
|
|
48
58
|
this.internalOpen = this.internalOpen || this.defaultOpen;
|
|
49
59
|
this.resolveTargets();
|
|
50
60
|
this.attachTargetListeners();
|
|
61
|
+
this.setupSurface();
|
|
51
62
|
this.syncTriggerState();
|
|
52
63
|
this.syncOverlay();
|
|
53
64
|
}
|
|
54
65
|
componentDidUpdate() {
|
|
55
66
|
this.resolveTargets();
|
|
56
67
|
this.attachTargetListeners();
|
|
68
|
+
if (!this.pointPositioned)
|
|
69
|
+
this.surface?.setAnchor(this.trigger);
|
|
57
70
|
this.syncTriggerState();
|
|
58
71
|
}
|
|
59
72
|
disconnectedCallback() {
|
|
60
73
|
this.detachTargetListeners();
|
|
74
|
+
this.surface?.destroy();
|
|
75
|
+
this.surface = null;
|
|
61
76
|
closeOverlay(this.overlayId);
|
|
62
77
|
}
|
|
78
|
+
setupSurface() {
|
|
79
|
+
const menu = this.host.shadowRoot?.querySelector('.menu');
|
|
80
|
+
if (!menu)
|
|
81
|
+
return;
|
|
82
|
+
this.surface?.destroy();
|
|
83
|
+
this.surface = createAnchoredSurface(menu, {
|
|
84
|
+
anchor: this.trigger,
|
|
85
|
+
placement: 'bottom-start',
|
|
86
|
+
});
|
|
87
|
+
}
|
|
63
88
|
resolveTargets() {
|
|
64
89
|
const previousTrigger = this.trigger;
|
|
65
90
|
const previousContextTarget = this.contextTarget;
|
|
@@ -99,6 +124,10 @@ const UIContextMenu = class {
|
|
|
99
124
|
openMenu(x, y, trigger) {
|
|
100
125
|
this.pointerX = x;
|
|
101
126
|
this.pointerY = y;
|
|
127
|
+
this.pointPositioned = true;
|
|
128
|
+
// Context-click can reposition an already-open trigger menu, so do not
|
|
129
|
+
// depend on a state transition to run the positioning controller.
|
|
130
|
+
this.surface?.showAtPoint({ x, y });
|
|
102
131
|
this.internalOpen = true;
|
|
103
132
|
dispatchDetail(this.host, 'open', {
|
|
104
133
|
open: true,
|
|
@@ -110,8 +139,14 @@ const UIContextMenu = class {
|
|
|
110
139
|
openFromTrigger(trigger) {
|
|
111
140
|
if (!this.trigger)
|
|
112
141
|
return;
|
|
113
|
-
|
|
114
|
-
this.
|
|
142
|
+
this.pointPositioned = false;
|
|
143
|
+
this.internalOpen = true;
|
|
144
|
+
dispatchDetail(this.host, 'open', {
|
|
145
|
+
open: true,
|
|
146
|
+
reason: 'action',
|
|
147
|
+
trigger,
|
|
148
|
+
});
|
|
149
|
+
this.focusFirstItem();
|
|
115
150
|
}
|
|
116
151
|
closeMenu(reason, trigger, returnFocus = true) {
|
|
117
152
|
if (!this.internalOpen)
|
|
@@ -180,7 +215,7 @@ const UIContextMenu = class {
|
|
|
180
215
|
this.closeMenu('action', 'pointer');
|
|
181
216
|
};
|
|
182
217
|
render() {
|
|
183
|
-
return (h(Host, { key: '
|
|
218
|
+
return (h(Host, { key: 'aee76fad23434fb3cdaf885c698f62237c2a9468', "data-open": this.internalOpen ? '' : undefined, onKeyDown: this.onKeydown, onClick: this.onItemClick }, h("slot", { key: 'da047f870b7a93f1acbba5fa1628b5cb66139d99', name: "trigger" }), h("div", { key: '388a473ac7fb626a20d0feda14f0d8dd16f6ab94', class: "menu", "data-open": this.internalOpen ? '' : undefined }, h("ui-menu", { key: '67ca5c05ff40d2dd1d5f17a8634636503f98c02d', open: this.internalOpen }, h("slot", { key: 'b7c7dfac4342afa1df67459e94de7ac7dca4a251' })))));
|
|
184
219
|
}
|
|
185
220
|
static get watchers() { return {
|
|
186
221
|
"open": [{
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { r as registerInstance, g as getElement, h, H as Host } from './index-CEeiinfk.js';
|
|
2
|
-
import { o as openOverlay, c as closeOverlay, r as requestTopOverlayClose } from './manager-
|
|
2
|
+
import { o as openOverlay, c as closeOverlay, r as requestTopOverlayClose } from './manager-PM9a74r7.js';
|
|
3
3
|
import { d as dispatchDetail } from './events-JwSoedEO.js';
|
|
4
4
|
|
|
5
5
|
const uiDialogCss = () => `:host{display:block}:host:not([data-open]){display:none}:host dialog{--ui-dialog-duration:var(--ui-motion-base);--ui-dialog-viewport-gap:var(--ui-space-4, 1rem);position:fixed;inset:0;inline-size:min( calc(100% - (var(--ui-dialog-viewport-gap) * 2)), var(--ui-dialog-max-width, 440px) );max-inline-size:none;max-block-size:calc(100dvh - (var(--ui-dialog-viewport-gap) * 2));margin:auto;padding:var(--ui-space-4);overflow:auto;background:var(--ui-surface-elevated);border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-dialog);box-shadow:var(--ui-shadow-dialog);visibility:hidden;pointer-events:none;opacity:0;transform:scale(0.96);transition:opacity var(--ui-dialog-duration) var(--ui-motion-ease), transform var(--ui-dialog-duration) var(--ui-motion-ease), visibility var(--ui-dialog-duration), display var(--ui-dialog-duration) var(--ui-motion-ease) allow-discrete, overlay var(--ui-dialog-duration) var(--ui-motion-ease) allow-discrete}:host dialog[open]{visibility:visible;pointer-events:auto;opacity:1;transform:scale(1);animation:ui-dialog-enter var(--ui-dialog-duration) var(--ui-motion-ease)}@keyframes ui-dialog-enter{from{opacity:0;transform:scale(0.96)}}:host dialog::backdrop{background-color:transparent;transition:background-color var(--ui-dialog-duration) var(--ui-motion-ease), display var(--ui-dialog-duration) var(--ui-motion-ease) allow-discrete, overlay var(--ui-dialog-duration) var(--ui-motion-ease) allow-discrete}:host dialog[open]::backdrop{background-color:var(--ui-overlay-backdrop);animation:ui-dialog-backdrop-enter var(--ui-dialog-duration) var(--ui-motion-ease)}@keyframes ui-dialog-backdrop-enter{from{background-color:transparent}}`;
|