@spotpatch/runtime 1.12.0 → 1.13.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/{chunk-BXRMVHNT.js → chunk-ASRUAKA5.js} +1 -1
- package/dist/chunk-ASRUAKA5.js.map +1 -0
- package/dist/{chunk-7ES63LA7.js → chunk-P6X75LO5.js} +11 -1
- package/dist/chunk-P6X75LO5.js.map +1 -0
- package/dist/chunk-P7W3F4UA.js +115 -0
- package/dist/chunk-P7W3F4UA.js.map +1 -0
- package/dist/data-flow-panel.cjs +9 -0
- package/dist/data-flow-panel.cjs.map +1 -1
- package/dist/data-flow-panel.js +1 -1
- package/dist/external-handoff-panel.cjs +29 -9
- package/dist/external-handoff-panel.cjs.map +1 -1
- package/dist/external-handoff-panel.d.cts +3 -3
- package/dist/external-handoff-panel.d.ts +3 -3
- package/dist/external-handoff-panel.js +22 -11
- package/dist/external-handoff-panel.js.map +1 -1
- package/dist/index.cjs +1192 -274
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +1160 -351
- package/dist/index.js.map +1 -1
- package/dist/motion.cjs +1251 -0
- package/dist/motion.cjs.map +1 -0
- package/dist/motion.d.cts +79 -0
- package/dist/motion.d.ts +79 -0
- package/dist/motion.js +1092 -0
- package/dist/motion.js.map +1 -0
- package/package.json +17 -2
- package/dist/chunk-7ES63LA7.js.map +0 -1
- package/dist/chunk-BXRMVHNT.js.map +0 -1
package/dist/motion.cjs
ADDED
|
@@ -0,0 +1,1251 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/motion-entry.ts
|
|
21
|
+
var motion_entry_exports = {};
|
|
22
|
+
__export(motion_entry_exports, {
|
|
23
|
+
createExecutionIsland: () => createExecutionIsland,
|
|
24
|
+
createFloatingSurfaceMotionController: () => createFloatingSurfaceMotionController,
|
|
25
|
+
createFloatingSurfaceMotionStyles: () => createFloatingSurfaceMotionStyles,
|
|
26
|
+
getFloatingSurfaceMotionExtension: () => getFloatingSurfaceMotionExtension,
|
|
27
|
+
installFloatingSurfaceMotionExtension: () => installFloatingSurfaceMotionExtension,
|
|
28
|
+
registerFloatingSurfaceMotionExtension: () => registerFloatingSurfaceMotionExtension
|
|
29
|
+
});
|
|
30
|
+
module.exports = __toCommonJS(motion_entry_exports);
|
|
31
|
+
|
|
32
|
+
// src/ui/motion-controller.ts
|
|
33
|
+
var import_gsap = require("gsap");
|
|
34
|
+
var MOTION = Object.freeze({
|
|
35
|
+
contentMilliseconds: 220,
|
|
36
|
+
detailRevealDelaySeconds: 0.1,
|
|
37
|
+
detailRevealSeconds: 0.3,
|
|
38
|
+
detailRetireSeconds: 0.15,
|
|
39
|
+
dispatchSeconds: 0.54,
|
|
40
|
+
expandSeconds: 0.54,
|
|
41
|
+
morphSeconds: 0.48,
|
|
42
|
+
pressSeconds: 0.12,
|
|
43
|
+
revealSeconds: 0.26,
|
|
44
|
+
sceneRevealDelaySeconds: 0.06,
|
|
45
|
+
sweepSeconds: 0.68,
|
|
46
|
+
targetFeedbackDelaySeconds: 0.08,
|
|
47
|
+
targetFeedbackSeconds: 0.22
|
|
48
|
+
});
|
|
49
|
+
var ISLAND_SIZE = Object.freeze({
|
|
50
|
+
checkingWidth: 440,
|
|
51
|
+
compactHeight: 62,
|
|
52
|
+
dispatchingWidth: 448,
|
|
53
|
+
expandedHeight: 164,
|
|
54
|
+
expandedWidth: 520,
|
|
55
|
+
failedWidth: 440,
|
|
56
|
+
receivingWidth: 430,
|
|
57
|
+
runningWidth: 468,
|
|
58
|
+
successWidth: 356
|
|
59
|
+
});
|
|
60
|
+
function surfaceLayer(scene) {
|
|
61
|
+
if (scene === "pill" || scene === "capturing") return "pill";
|
|
62
|
+
if (scene === "planner") return "planner";
|
|
63
|
+
return "execution";
|
|
64
|
+
}
|
|
65
|
+
function setSceneVisibility(elements, projection) {
|
|
66
|
+
const pillActive = projection.scene === "pill" || projection.scene === "capturing";
|
|
67
|
+
const plannerActive = projection.scene === "planner";
|
|
68
|
+
const executionActive = !pillActive && !plannerActive;
|
|
69
|
+
elements.pill.hidden = !pillActive;
|
|
70
|
+
elements.pill.inert = !pillActive;
|
|
71
|
+
elements.planner.hidden = !plannerActive;
|
|
72
|
+
elements.planner.inert = !plannerActive;
|
|
73
|
+
elements.planner.setAttribute("aria-hidden", String(!plannerActive));
|
|
74
|
+
elements.execution.root.hidden = !executionActive;
|
|
75
|
+
elements.execution.root.inert = !executionActive;
|
|
76
|
+
elements.execution.root.setAttribute("aria-hidden", String(!executionActive));
|
|
77
|
+
return pillActive ? elements.pill : plannerActive ? elements.planner : elements.execution.root;
|
|
78
|
+
}
|
|
79
|
+
function supportsMotion(document) {
|
|
80
|
+
return document.defaultView?.matchMedia("(prefers-reduced-motion: reduce)").matches !== true;
|
|
81
|
+
}
|
|
82
|
+
function finiteRect(rect) {
|
|
83
|
+
return Number.isFinite(rect.left) && Number.isFinite(rect.top) && rect.width > 0 && rect.height > 0;
|
|
84
|
+
}
|
|
85
|
+
function geometryChanged(previous, next) {
|
|
86
|
+
return Math.abs(previous.left - next.left) > 0.5 || Math.abs(previous.top - next.top) > 0.5 || Math.abs(previous.width - next.width) > 0.5 || Math.abs(previous.height - next.height) > 0.5;
|
|
87
|
+
}
|
|
88
|
+
function visibleBorderRadius(value, rect) {
|
|
89
|
+
if (value === void 0 || value.length === 0) return "0px";
|
|
90
|
+
const radius = Number.parseFloat(value);
|
|
91
|
+
if (!Number.isFinite(radius) || !finiteRect(rect)) return value;
|
|
92
|
+
return `${String(Math.min(radius, rect.width / 2, rect.height / 2))}px`;
|
|
93
|
+
}
|
|
94
|
+
function compactIslandWidth(projection) {
|
|
95
|
+
if (projection.scene === "agent-charging") return ISLAND_SIZE.receivingWidth;
|
|
96
|
+
if (projection.scene === "handoff") return ISLAND_SIZE.dispatchingWidth;
|
|
97
|
+
if (projection.scene === "success") return ISLAND_SIZE.successWidth;
|
|
98
|
+
if (projection.scene === "failed") return ISLAND_SIZE.failedWidth;
|
|
99
|
+
if (projection.scene === "running" && projection.activity?.kind === "check") {
|
|
100
|
+
return ISLAND_SIZE.checkingWidth;
|
|
101
|
+
}
|
|
102
|
+
return ISLAND_SIZE.runningWidth;
|
|
103
|
+
}
|
|
104
|
+
function createFloatingSurfaceMotionStyles(document) {
|
|
105
|
+
const style = document.createElement("style");
|
|
106
|
+
style.textContent = `
|
|
107
|
+
.spotpatch-floating-surface {
|
|
108
|
+
--spotpatch-island-surface: #050608;
|
|
109
|
+
--spotpatch-island-primary: #f7f7fb;
|
|
110
|
+
--spotpatch-island-subtle: #5f646e;
|
|
111
|
+
--spotpatch-island-line: rgb(255 255 255 / 10%);
|
|
112
|
+
--spotpatch-island-violet: #8b67ff;
|
|
113
|
+
--spotpatch-island-cyan: #4dc8ff;
|
|
114
|
+
--spotpatch-island-mint: #59dcb6;
|
|
115
|
+
--spotpatch-island-error: #ef6f88;
|
|
116
|
+
--spotpatch-island-compact-height: ${String(ISLAND_SIZE.compactHeight)}px;
|
|
117
|
+
--spotpatch-island-compact-width: ${String(ISLAND_SIZE.runningWidth)}px;
|
|
118
|
+
--spotpatch-island-expanded-height: ${String(ISLAND_SIZE.expandedHeight)}px;
|
|
119
|
+
--spotpatch-island-expanded-width: ${String(ISLAND_SIZE.expandedWidth)}px;
|
|
120
|
+
--spotpatch-island-ease: cubic-bezier(.22, 1, .36, 1);
|
|
121
|
+
position: fixed;
|
|
122
|
+
box-sizing: border-box;
|
|
123
|
+
color-scheme: dark;
|
|
124
|
+
-webkit-font-smoothing: antialiased;
|
|
125
|
+
overflow: hidden;
|
|
126
|
+
border: 1px solid var(--spotpatch-island-line);
|
|
127
|
+
background:
|
|
128
|
+
linear-gradient(180deg, rgb(255 255 255 / 2.8%), transparent 24%),
|
|
129
|
+
rgb(5 6 8 / 98.8%);
|
|
130
|
+
box-shadow:
|
|
131
|
+
0 24px 60px rgb(13 17 28 / 18%),
|
|
132
|
+
0 3px 10px rgb(13 17 28 / 10%),
|
|
133
|
+
inset 0 1px rgb(255 255 255 / 6.5%),
|
|
134
|
+
inset 0 0 0 1px rgb(255 255 255 / 1.2%);
|
|
135
|
+
transform-origin: 100% 100%;
|
|
136
|
+
}
|
|
137
|
+
.spotpatch-floating-surface::before {
|
|
138
|
+
position: absolute;
|
|
139
|
+
z-index: 0;
|
|
140
|
+
inset: 0;
|
|
141
|
+
background:
|
|
142
|
+
radial-gradient(180px 70px at 0% 50%, rgb(139 103 255 / 7%), transparent 72%),
|
|
143
|
+
radial-gradient(180px 70px at 100% 50%, rgb(77 200 255 / 4.5%), transparent 72%);
|
|
144
|
+
content: "";
|
|
145
|
+
opacity: 0;
|
|
146
|
+
pointer-events: none;
|
|
147
|
+
}
|
|
148
|
+
.spotpatch-floating-surface[data-scene="pill"],
|
|
149
|
+
.spotpatch-floating-surface[data-scene="capturing"] {
|
|
150
|
+
width: max-content;
|
|
151
|
+
border-radius: 999px;
|
|
152
|
+
}
|
|
153
|
+
.spotpatch-floating-surface[data-scene="planner"] { border-radius: 18px; }
|
|
154
|
+
.spotpatch-floating-surface[data-scene="agent-charging"],
|
|
155
|
+
.spotpatch-floating-surface[data-scene="handoff"],
|
|
156
|
+
.spotpatch-floating-surface[data-scene="running"],
|
|
157
|
+
.spotpatch-floating-surface[data-scene="success"],
|
|
158
|
+
.spotpatch-floating-surface[data-scene="failed"] {
|
|
159
|
+
width: min(var(--spotpatch-island-compact-width), calc(100vw - 32px));
|
|
160
|
+
height: var(--spotpatch-island-compact-height);
|
|
161
|
+
max-width: calc(100vw - 32px);
|
|
162
|
+
border-radius: 31px;
|
|
163
|
+
}
|
|
164
|
+
.spotpatch-floating-surface[data-scene="agent-charging"]::before,
|
|
165
|
+
.spotpatch-floating-surface[data-scene="handoff"]::before,
|
|
166
|
+
.spotpatch-floating-surface[data-scene="running"]::before,
|
|
167
|
+
.spotpatch-floating-surface[data-scene="success"]::before,
|
|
168
|
+
.spotpatch-floating-surface[data-scene="failed"]::before { opacity: .82; }
|
|
169
|
+
.spotpatch-floating-surface:has(.spotpatch-execution-island[data-expanded="true"]) {
|
|
170
|
+
width: min(var(--spotpatch-island-expanded-width), calc(100vw - 32px));
|
|
171
|
+
height: min(var(--spotpatch-island-expanded-height), calc(100vh - 32px));
|
|
172
|
+
border-radius: 30px;
|
|
173
|
+
}
|
|
174
|
+
.spotpatch-floating-surface > .spotpatch-trigger,
|
|
175
|
+
.spotpatch-floating-surface > .spotpatch-dialog,
|
|
176
|
+
.spotpatch-floating-surface > .spotpatch-execution-island {
|
|
177
|
+
position: relative;
|
|
178
|
+
z-index: 1;
|
|
179
|
+
}
|
|
180
|
+
.spotpatch-floating-surface > .spotpatch-trigger {
|
|
181
|
+
display: inline-flex;
|
|
182
|
+
min-height: 44px;
|
|
183
|
+
align-items: center;
|
|
184
|
+
gap: 10px;
|
|
185
|
+
border: 0;
|
|
186
|
+
border-radius: 999px;
|
|
187
|
+
padding: 10px 17px;
|
|
188
|
+
color: #f8fafc;
|
|
189
|
+
background: transparent;
|
|
190
|
+
box-shadow: none;
|
|
191
|
+
cursor: pointer;
|
|
192
|
+
font-size: 14px;
|
|
193
|
+
font-weight: 650;
|
|
194
|
+
touch-action: none;
|
|
195
|
+
user-select: none;
|
|
196
|
+
}
|
|
197
|
+
.spotpatch-trigger::before {
|
|
198
|
+
width: 9px;
|
|
199
|
+
height: 9px;
|
|
200
|
+
border-radius: 999px;
|
|
201
|
+
background: var(--spotpatch-accent);
|
|
202
|
+
box-shadow: 0 0 0 4px rgb(99 102 241 / 10%);
|
|
203
|
+
content: "";
|
|
204
|
+
}
|
|
205
|
+
.spotpatch-trigger:hover { transform: translateY(-1px); }
|
|
206
|
+
.spotpatch-trigger[aria-pressed="true"] { background: rgb(139 123 255 / 14%); }
|
|
207
|
+
.spotpatch-trigger[aria-pressed="true"]::before {
|
|
208
|
+
animation: spotpatch-motion-pill-pulse 1.8s ease-in-out infinite;
|
|
209
|
+
}
|
|
210
|
+
.spotpatch-trigger[data-dragging="true"] {
|
|
211
|
+
cursor: grabbing;
|
|
212
|
+
transform: scale(.98);
|
|
213
|
+
}
|
|
214
|
+
.spotpatch-floating-surface .spotpatch-dialog { filter: none; }
|
|
215
|
+
.spotpatch-floating-surface .spotpatch-shell {
|
|
216
|
+
border: 0;
|
|
217
|
+
border-radius: 0;
|
|
218
|
+
background: transparent;
|
|
219
|
+
box-shadow: none;
|
|
220
|
+
}
|
|
221
|
+
.spotpatch-brand-name {
|
|
222
|
+
color: #fff;
|
|
223
|
+
font-size: 13.5px;
|
|
224
|
+
font-weight: 680;
|
|
225
|
+
letter-spacing: -.01em;
|
|
226
|
+
}
|
|
227
|
+
.spotpatch-brand-context {
|
|
228
|
+
color: #8e98aa;
|
|
229
|
+
font-size: 10.5px;
|
|
230
|
+
font-weight: 560;
|
|
231
|
+
letter-spacing: .02em;
|
|
232
|
+
}
|
|
233
|
+
.spotpatch-title {
|
|
234
|
+
margin: 0;
|
|
235
|
+
color: #fff;
|
|
236
|
+
font-size: 18px;
|
|
237
|
+
font-weight: 680;
|
|
238
|
+
letter-spacing: -.015em;
|
|
239
|
+
}
|
|
240
|
+
.spotpatch-subtitle {
|
|
241
|
+
max-width: 390px;
|
|
242
|
+
margin: 4px 0 0;
|
|
243
|
+
color: var(--spotpatch-text-secondary);
|
|
244
|
+
font-size: 12.5px;
|
|
245
|
+
line-height: 1.5;
|
|
246
|
+
}
|
|
247
|
+
.spotpatch-execution-island {
|
|
248
|
+
position: relative;
|
|
249
|
+
display: grid;
|
|
250
|
+
box-sizing: border-box;
|
|
251
|
+
width: 100%;
|
|
252
|
+
height: 100%;
|
|
253
|
+
grid-template-columns: auto minmax(0, 1fr) auto;
|
|
254
|
+
align-items: center;
|
|
255
|
+
gap: 12px;
|
|
256
|
+
overflow: hidden;
|
|
257
|
+
border: 0;
|
|
258
|
+
border-radius: inherit;
|
|
259
|
+
padding: 0 18px;
|
|
260
|
+
color: var(--spotpatch-island-primary);
|
|
261
|
+
background: transparent;
|
|
262
|
+
cursor: pointer;
|
|
263
|
+
text-align: left;
|
|
264
|
+
touch-action: none;
|
|
265
|
+
}
|
|
266
|
+
.spotpatch-execution-island[data-expanded="true"] {
|
|
267
|
+
min-height: var(--spotpatch-island-expanded-height);
|
|
268
|
+
grid-template-columns: auto minmax(0, 1fr) auto;
|
|
269
|
+
grid-template-rows: auto 1fr;
|
|
270
|
+
align-items: start;
|
|
271
|
+
row-gap: 16px;
|
|
272
|
+
border-radius: 30px;
|
|
273
|
+
padding: 18px 20px 16px;
|
|
274
|
+
}
|
|
275
|
+
.spotpatch-execution-mark {
|
|
276
|
+
display: grid;
|
|
277
|
+
width: 23px;
|
|
278
|
+
height: 23px;
|
|
279
|
+
flex: none;
|
|
280
|
+
place-items: center;
|
|
281
|
+
}
|
|
282
|
+
.spotpatch-execution-logo {
|
|
283
|
+
width: 22px;
|
|
284
|
+
height: 22px;
|
|
285
|
+
overflow: visible;
|
|
286
|
+
filter: drop-shadow(0 0 7px rgb(139 103 255 / 16%));
|
|
287
|
+
}
|
|
288
|
+
.spotpatch-execution-content {
|
|
289
|
+
display: flex;
|
|
290
|
+
min-width: 0;
|
|
291
|
+
align-items: baseline;
|
|
292
|
+
gap: 8px;
|
|
293
|
+
}
|
|
294
|
+
[data-expanded="true"] .spotpatch-execution-content {
|
|
295
|
+
display: grid;
|
|
296
|
+
gap: 4px;
|
|
297
|
+
}
|
|
298
|
+
.spotpatch-execution-headline-wrap,
|
|
299
|
+
.spotpatch-execution-action-wrap {
|
|
300
|
+
position: relative;
|
|
301
|
+
display: block;
|
|
302
|
+
min-width: 0;
|
|
303
|
+
}
|
|
304
|
+
.spotpatch-execution-headline,
|
|
305
|
+
.spotpatch-execution-headline-outgoing,
|
|
306
|
+
.spotpatch-execution-action,
|
|
307
|
+
.spotpatch-execution-action-outgoing {
|
|
308
|
+
display: block;
|
|
309
|
+
overflow: hidden;
|
|
310
|
+
text-overflow: ellipsis;
|
|
311
|
+
white-space: nowrap;
|
|
312
|
+
}
|
|
313
|
+
.spotpatch-execution-headline,
|
|
314
|
+
.spotpatch-execution-headline-outgoing {
|
|
315
|
+
color: var(--spotpatch-island-primary);
|
|
316
|
+
font-size: 15px;
|
|
317
|
+
font-weight: 690;
|
|
318
|
+
letter-spacing: -.018em;
|
|
319
|
+
line-height: 1.35;
|
|
320
|
+
}
|
|
321
|
+
.spotpatch-execution-action,
|
|
322
|
+
.spotpatch-execution-action-outgoing {
|
|
323
|
+
color: #696f79;
|
|
324
|
+
font-size: 11px;
|
|
325
|
+
font-weight: 400;
|
|
326
|
+
line-height: 1.35;
|
|
327
|
+
}
|
|
328
|
+
.spotpatch-execution-headline-outgoing,
|
|
329
|
+
.spotpatch-execution-action-outgoing {
|
|
330
|
+
position: absolute;
|
|
331
|
+
inset: 0;
|
|
332
|
+
opacity: 0;
|
|
333
|
+
pointer-events: none;
|
|
334
|
+
}
|
|
335
|
+
.spotpatch-execution-copy-changing .spotpatch-execution-headline,
|
|
336
|
+
.spotpatch-execution-copy-changing .spotpatch-execution-action {
|
|
337
|
+
animation: spotpatch-motion-copy-in ${String(MOTION.contentMilliseconds)}ms var(--spotpatch-island-ease) both;
|
|
338
|
+
}
|
|
339
|
+
.spotpatch-execution-copy-changing .spotpatch-execution-headline-outgoing,
|
|
340
|
+
.spotpatch-execution-copy-changing .spotpatch-execution-action-outgoing {
|
|
341
|
+
animation: spotpatch-motion-copy-out ${String(MOTION.contentMilliseconds)}ms ease-in both;
|
|
342
|
+
}
|
|
343
|
+
.spotpatch-execution-meta {
|
|
344
|
+
display: inline-flex;
|
|
345
|
+
align-items: center;
|
|
346
|
+
justify-content: flex-end;
|
|
347
|
+
gap: 10px;
|
|
348
|
+
flex: none;
|
|
349
|
+
color: #989da8;
|
|
350
|
+
font-size: 11px;
|
|
351
|
+
font-weight: 620;
|
|
352
|
+
white-space: nowrap;
|
|
353
|
+
}
|
|
354
|
+
.spotpatch-execution-meta-dot {
|
|
355
|
+
width: 6px;
|
|
356
|
+
height: 6px;
|
|
357
|
+
flex: none;
|
|
358
|
+
border-radius: 50%;
|
|
359
|
+
background: var(--spotpatch-island-violet);
|
|
360
|
+
box-shadow: 0 0 8px rgb(139 103 255 / 38%);
|
|
361
|
+
}
|
|
362
|
+
[data-execution-scene="agent-charging"] .spotpatch-execution-meta-dot,
|
|
363
|
+
[data-execution-scene="handoff"] .spotpatch-execution-meta-dot,
|
|
364
|
+
[data-execution-scene="running"] .spotpatch-execution-meta-dot {
|
|
365
|
+
animation: spotpatch-motion-status-breathe 1.8s ease-in-out infinite;
|
|
366
|
+
}
|
|
367
|
+
.spotpatch-execution-meta[data-tone="success"] .spotpatch-execution-meta-dot {
|
|
368
|
+
background: var(--spotpatch-island-mint);
|
|
369
|
+
box-shadow: 0 0 8px rgb(89 220 182 / 24%);
|
|
370
|
+
}
|
|
371
|
+
.spotpatch-execution-meta[data-tone="danger"] .spotpatch-execution-meta-dot {
|
|
372
|
+
background: var(--spotpatch-island-error);
|
|
373
|
+
box-shadow: 0 0 8px rgb(239 111 136 / 22%);
|
|
374
|
+
}
|
|
375
|
+
.spotpatch-execution-timer {
|
|
376
|
+
width: 34px;
|
|
377
|
+
color: #737985;
|
|
378
|
+
font: 400 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
379
|
+
text-align: right;
|
|
380
|
+
}
|
|
381
|
+
.spotpatch-execution-more {
|
|
382
|
+
display: grid;
|
|
383
|
+
width: 24px;
|
|
384
|
+
height: 24px;
|
|
385
|
+
padding: 0;
|
|
386
|
+
border: 0;
|
|
387
|
+
background: transparent;
|
|
388
|
+
color: #686e78;
|
|
389
|
+
font-size: 15px;
|
|
390
|
+
line-height: 1;
|
|
391
|
+
place-items: center;
|
|
392
|
+
}
|
|
393
|
+
[data-expanded="true"] .spotpatch-execution-meta-dot,
|
|
394
|
+
[data-expanded="true"] .spotpatch-execution-meta-label,
|
|
395
|
+
[data-expanded="true"] .spotpatch-execution-timer { display: none; }
|
|
396
|
+
[data-expanded="true"] .spotpatch-execution-more {
|
|
397
|
+
width: 28px;
|
|
398
|
+
height: 28px;
|
|
399
|
+
border-radius: 50%;
|
|
400
|
+
background: rgb(255 255 255 / 4.5%);
|
|
401
|
+
color: #828894;
|
|
402
|
+
}
|
|
403
|
+
.spotpatch-execution-recent {
|
|
404
|
+
position: absolute;
|
|
405
|
+
top: 62px;
|
|
406
|
+
right: 20px;
|
|
407
|
+
left: 20px;
|
|
408
|
+
display: grid;
|
|
409
|
+
margin-top: 0;
|
|
410
|
+
}
|
|
411
|
+
.spotpatch-execution-recent[hidden] { display: none; }
|
|
412
|
+
.spotpatch-execution-recent-item {
|
|
413
|
+
display: grid;
|
|
414
|
+
min-height: 28px;
|
|
415
|
+
grid-template-columns: 52px minmax(0, 1fr) auto;
|
|
416
|
+
align-items: center;
|
|
417
|
+
border-top: 1px solid rgb(255 255 255 / 5.5%);
|
|
418
|
+
}
|
|
419
|
+
.spotpatch-execution-recent-item:first-child { border-top: 0; }
|
|
420
|
+
.spotpatch-execution-recent-kind {
|
|
421
|
+
color: #666c76;
|
|
422
|
+
font: 600 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
423
|
+
text-transform: uppercase;
|
|
424
|
+
}
|
|
425
|
+
.spotpatch-execution-recent-detail {
|
|
426
|
+
overflow: hidden;
|
|
427
|
+
color: #b2b6bf;
|
|
428
|
+
font-size: 11px;
|
|
429
|
+
text-overflow: ellipsis;
|
|
430
|
+
white-space: nowrap;
|
|
431
|
+
}
|
|
432
|
+
.spotpatch-execution-recent-state {
|
|
433
|
+
color: #626974;
|
|
434
|
+
font: 500 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
435
|
+
}
|
|
436
|
+
.spotpatch-execution-recent-item[data-state="active"] .spotpatch-execution-recent-kind {
|
|
437
|
+
color: var(--spotpatch-island-violet);
|
|
438
|
+
}
|
|
439
|
+
.spotpatch-execution-recent-item[data-state="active"] .spotpatch-execution-recent-detail {
|
|
440
|
+
color: #f2f3f7;
|
|
441
|
+
}
|
|
442
|
+
.spotpatch-execution-recent-item[data-state="failure"] .spotpatch-execution-recent-kind {
|
|
443
|
+
color: var(--spotpatch-island-error);
|
|
444
|
+
}
|
|
445
|
+
.spotpatch-island-sweep {
|
|
446
|
+
position: absolute;
|
|
447
|
+
z-index: 2;
|
|
448
|
+
bottom: 0;
|
|
449
|
+
left: 44px;
|
|
450
|
+
width: 20%;
|
|
451
|
+
height: 1px;
|
|
452
|
+
border-radius: 999px;
|
|
453
|
+
background: linear-gradient(90deg, transparent, var(--spotpatch-island-violet), var(--spotpatch-island-cyan), transparent);
|
|
454
|
+
box-shadow: 0 0 7px rgb(139 103 255 / 18%);
|
|
455
|
+
opacity: 0;
|
|
456
|
+
pointer-events: none;
|
|
457
|
+
transform: translate3d(-160%, 0, 0);
|
|
458
|
+
}
|
|
459
|
+
@keyframes spotpatch-motion-copy-in {
|
|
460
|
+
from { opacity: 0; filter: blur(2px); transform: translate3d(0, 3px, 0); }
|
|
461
|
+
to { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0); }
|
|
462
|
+
}
|
|
463
|
+
@keyframes spotpatch-motion-copy-out {
|
|
464
|
+
from { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0); }
|
|
465
|
+
to { opacity: 0; filter: blur(2px); transform: translate3d(0, -3px, 0); }
|
|
466
|
+
}
|
|
467
|
+
@keyframes spotpatch-motion-status-breathe {
|
|
468
|
+
50% { opacity: .42; transform: scale(.82); }
|
|
469
|
+
}
|
|
470
|
+
@keyframes spotpatch-motion-pill-pulse {
|
|
471
|
+
50% { box-shadow: 0 0 0 6px rgb(99 102 241 / 5%); opacity: .72; }
|
|
472
|
+
}
|
|
473
|
+
.spotpatch-floating-surface[data-motion-paused="true"] .spotpatch-execution-meta-dot,
|
|
474
|
+
.spotpatch-floating-surface[data-motion-paused="true"] .spotpatch-trigger::before {
|
|
475
|
+
animation-play-state: paused;
|
|
476
|
+
}
|
|
477
|
+
@media (prefers-reduced-motion: reduce) {
|
|
478
|
+
.spotpatch-trigger::before,
|
|
479
|
+
.spotpatch-execution-meta-dot,
|
|
480
|
+
.spotpatch-execution-headline,
|
|
481
|
+
.spotpatch-execution-headline-outgoing,
|
|
482
|
+
.spotpatch-execution-action,
|
|
483
|
+
.spotpatch-execution-action-outgoing {
|
|
484
|
+
animation: none !important;
|
|
485
|
+
filter: none !important;
|
|
486
|
+
transform: none !important;
|
|
487
|
+
}
|
|
488
|
+
.spotpatch-island-sweep { display: none; }
|
|
489
|
+
}
|
|
490
|
+
@media (max-width: 520px) {
|
|
491
|
+
.spotpatch-execution-island {
|
|
492
|
+
grid-template-columns: auto minmax(0, 1fr) auto;
|
|
493
|
+
gap: 10px;
|
|
494
|
+
padding-right: 14px;
|
|
495
|
+
padding-left: 14px;
|
|
496
|
+
}
|
|
497
|
+
.spotpatch-execution-action-wrap { display: none; }
|
|
498
|
+
.spotpatch-execution-recent-item { grid-template-columns: 48px minmax(0, 1fr); }
|
|
499
|
+
.spotpatch-execution-recent-state { display: none; }
|
|
500
|
+
}
|
|
501
|
+
`;
|
|
502
|
+
return style;
|
|
503
|
+
}
|
|
504
|
+
function createFloatingSurfaceMotionController(document, elements, reconcile) {
|
|
505
|
+
let currentScene;
|
|
506
|
+
let currentActivityKey;
|
|
507
|
+
let morphTimeline;
|
|
508
|
+
let dispatchTimeline;
|
|
509
|
+
let pendingProjection;
|
|
510
|
+
let dispatchSource;
|
|
511
|
+
let dispatchTarget;
|
|
512
|
+
let disposed = false;
|
|
513
|
+
const handleVisibility = () => {
|
|
514
|
+
elements.surface.dataset.motionPaused = String(document.hidden);
|
|
515
|
+
};
|
|
516
|
+
document.addEventListener("visibilitychange", handleVisibility);
|
|
517
|
+
handleVisibility();
|
|
518
|
+
const morphElements = [
|
|
519
|
+
elements.surface,
|
|
520
|
+
elements.pill,
|
|
521
|
+
elements.planner,
|
|
522
|
+
elements.execution.root,
|
|
523
|
+
elements.execution.mark,
|
|
524
|
+
elements.execution.content,
|
|
525
|
+
elements.execution.meta,
|
|
526
|
+
elements.execution.recent
|
|
527
|
+
];
|
|
528
|
+
const sharedExecutionElements = [
|
|
529
|
+
elements.execution.mark,
|
|
530
|
+
elements.execution.content,
|
|
531
|
+
elements.execution.meta
|
|
532
|
+
];
|
|
533
|
+
function captureSurfaceLayout(includeSharedOffsets = false) {
|
|
534
|
+
const surfaceRect = elements.surface.getBoundingClientRect();
|
|
535
|
+
const computedRadius = document.defaultView?.getComputedStyle(elements.surface).borderRadius.trim();
|
|
536
|
+
const sharedOffsets = /* @__PURE__ */ new Map();
|
|
537
|
+
if (includeSharedOffsets && finiteRect(surfaceRect)) {
|
|
538
|
+
for (const element of sharedExecutionElements) {
|
|
539
|
+
const elementRect = element.getBoundingClientRect();
|
|
540
|
+
if (!finiteRect(elementRect)) continue;
|
|
541
|
+
sharedOffsets.set(
|
|
542
|
+
element,
|
|
543
|
+
Object.freeze({
|
|
544
|
+
x: elementRect.left - surfaceRect.left,
|
|
545
|
+
y: elementRect.top - surfaceRect.top
|
|
546
|
+
})
|
|
547
|
+
);
|
|
548
|
+
}
|
|
549
|
+
}
|
|
550
|
+
return Object.freeze({
|
|
551
|
+
geometry: Object.freeze({
|
|
552
|
+
borderRadius: visibleBorderRadius(computedRadius, surfaceRect),
|
|
553
|
+
rect: surfaceRect
|
|
554
|
+
}),
|
|
555
|
+
sharedOffsets
|
|
556
|
+
});
|
|
557
|
+
}
|
|
558
|
+
function syncRecentVisibility() {
|
|
559
|
+
elements.execution.recent.hidden = elements.execution.root.dataset.expanded !== "true";
|
|
560
|
+
}
|
|
561
|
+
function clearMorphProperties() {
|
|
562
|
+
import_gsap.gsap.set(morphElements, {
|
|
563
|
+
clearProps: "borderRadius,filter,height,opacity,transform,visibility,width,willChange"
|
|
564
|
+
});
|
|
565
|
+
delete elements.surface.dataset.motionMorphing;
|
|
566
|
+
syncRecentVisibility();
|
|
567
|
+
}
|
|
568
|
+
function clearMorph() {
|
|
569
|
+
morphTimeline?.kill();
|
|
570
|
+
morphTimeline = void 0;
|
|
571
|
+
import_gsap.gsap.killTweensOf(morphElements);
|
|
572
|
+
clearMorphProperties();
|
|
573
|
+
}
|
|
574
|
+
function interruptMorph(includeSharedOffsets = false) {
|
|
575
|
+
morphTimeline?.kill();
|
|
576
|
+
morphTimeline = void 0;
|
|
577
|
+
import_gsap.gsap.killTweensOf(morphElements);
|
|
578
|
+
const layout = captureSurfaceLayout(includeSharedOffsets);
|
|
579
|
+
clearMorphProperties();
|
|
580
|
+
return layout;
|
|
581
|
+
}
|
|
582
|
+
function clearDispatch() {
|
|
583
|
+
dispatchTimeline?.kill();
|
|
584
|
+
dispatchTimeline = void 0;
|
|
585
|
+
if (dispatchSource !== void 0) {
|
|
586
|
+
import_gsap.gsap.killTweensOf(dispatchSource);
|
|
587
|
+
import_gsap.gsap.set(dispatchSource, { clearProps: "filter,transform" });
|
|
588
|
+
dispatchSource = void 0;
|
|
589
|
+
}
|
|
590
|
+
if (dispatchTarget !== void 0) {
|
|
591
|
+
import_gsap.gsap.killTweensOf(dispatchTarget);
|
|
592
|
+
import_gsap.gsap.set(dispatchTarget, { clearProps: "boxShadow" });
|
|
593
|
+
dispatchTarget = void 0;
|
|
594
|
+
}
|
|
595
|
+
elements.surface.dataset.agentCharging = "false";
|
|
596
|
+
}
|
|
597
|
+
function completeDispatch() {
|
|
598
|
+
dispatchTimeline = void 0;
|
|
599
|
+
if (dispatchSource !== void 0) {
|
|
600
|
+
import_gsap.gsap.set(dispatchSource, { clearProps: "filter,transform" });
|
|
601
|
+
dispatchSource = void 0;
|
|
602
|
+
}
|
|
603
|
+
if (dispatchTarget !== void 0) {
|
|
604
|
+
import_gsap.gsap.set(dispatchTarget, { clearProps: "boxShadow" });
|
|
605
|
+
dispatchTarget = void 0;
|
|
606
|
+
}
|
|
607
|
+
elements.surface.dataset.agentCharging = "false";
|
|
608
|
+
}
|
|
609
|
+
function sweepOnce() {
|
|
610
|
+
if (!supportsMotion(document) || document.hidden) return;
|
|
611
|
+
import_gsap.gsap.killTweensOf(elements.execution.sweep);
|
|
612
|
+
import_gsap.gsap.fromTo(
|
|
613
|
+
elements.execution.sweep,
|
|
614
|
+
{ autoAlpha: 0, xPercent: -160 },
|
|
615
|
+
{
|
|
616
|
+
autoAlpha: 0.72,
|
|
617
|
+
xPercent: 620,
|
|
618
|
+
duration: MOTION.sweepSeconds,
|
|
619
|
+
ease: "power2.inOut",
|
|
620
|
+
onComplete: () => {
|
|
621
|
+
import_gsap.gsap.set(elements.execution.sweep, {
|
|
622
|
+
clearProps: "opacity,transform,visibility"
|
|
623
|
+
});
|
|
624
|
+
}
|
|
625
|
+
}
|
|
626
|
+
);
|
|
627
|
+
}
|
|
628
|
+
function animateGeometry(previous, next, activeScene, reveal, detailTransition) {
|
|
629
|
+
const geometryHasChanged = geometryChanged(previous.geometry.rect, next.geometry.rect) || previous.geometry.borderRadius !== next.geometry.borderRadius;
|
|
630
|
+
const sharedLayoutHasChanged = sharedExecutionElements.some((element) => {
|
|
631
|
+
const previousOffset = previous.sharedOffsets.get(element);
|
|
632
|
+
const nextOffset = next.sharedOffsets.get(element);
|
|
633
|
+
return previousOffset !== void 0 && nextOffset !== void 0 && (Math.abs(previousOffset.x - nextOffset.x) > 0.5 || Math.abs(previousOffset.y - nextOffset.y) > 0.5);
|
|
634
|
+
});
|
|
635
|
+
if (!supportsMotion(document) || !finiteRect(previous.geometry.rect) || !finiteRect(next.geometry.rect) || !geometryHasChanged && !sharedLayoutHasChanged && detailTransition === void 0) {
|
|
636
|
+
clearMorphProperties();
|
|
637
|
+
return;
|
|
638
|
+
}
|
|
639
|
+
const morphDuration = detailTransition === "expand" ? MOTION.expandSeconds : MOTION.morphSeconds;
|
|
640
|
+
elements.surface.dataset.motionMorphing = "true";
|
|
641
|
+
morphTimeline = import_gsap.gsap.timeline({
|
|
642
|
+
defaults: { overwrite: "auto" },
|
|
643
|
+
onComplete: () => {
|
|
644
|
+
clearMorphProperties();
|
|
645
|
+
reconcile();
|
|
646
|
+
morphTimeline = void 0;
|
|
647
|
+
}
|
|
648
|
+
});
|
|
649
|
+
if (geometryHasChanged) {
|
|
650
|
+
morphTimeline.fromTo(
|
|
651
|
+
elements.surface,
|
|
652
|
+
{
|
|
653
|
+
borderRadius: previous.geometry.borderRadius,
|
|
654
|
+
height: previous.geometry.rect.height,
|
|
655
|
+
width: previous.geometry.rect.width,
|
|
656
|
+
x: previous.geometry.rect.left - next.geometry.rect.left,
|
|
657
|
+
y: previous.geometry.rect.top - next.geometry.rect.top,
|
|
658
|
+
willChange: "width,height,transform"
|
|
659
|
+
},
|
|
660
|
+
{
|
|
661
|
+
borderRadius: next.geometry.borderRadius,
|
|
662
|
+
height: next.geometry.rect.height,
|
|
663
|
+
width: next.geometry.rect.width,
|
|
664
|
+
x: 0,
|
|
665
|
+
y: 0,
|
|
666
|
+
duration: morphDuration,
|
|
667
|
+
ease: "expo.inOut"
|
|
668
|
+
},
|
|
669
|
+
0
|
|
670
|
+
);
|
|
671
|
+
}
|
|
672
|
+
for (const element of sharedExecutionElements) {
|
|
673
|
+
const previousOffset = previous.sharedOffsets.get(element);
|
|
674
|
+
const nextOffset = next.sharedOffsets.get(element);
|
|
675
|
+
if (previousOffset === void 0 || nextOffset === void 0) continue;
|
|
676
|
+
const x = previousOffset.x - nextOffset.x;
|
|
677
|
+
const y = previousOffset.y - nextOffset.y;
|
|
678
|
+
if (Math.abs(x) <= 0.5 && Math.abs(y) <= 0.5) continue;
|
|
679
|
+
morphTimeline.fromTo(
|
|
680
|
+
element,
|
|
681
|
+
{ x, y, willChange: "transform" },
|
|
682
|
+
{
|
|
683
|
+
x: 0,
|
|
684
|
+
y: 0,
|
|
685
|
+
duration: morphDuration,
|
|
686
|
+
ease: "expo.inOut"
|
|
687
|
+
},
|
|
688
|
+
0
|
|
689
|
+
);
|
|
690
|
+
}
|
|
691
|
+
if (detailTransition === "expand") {
|
|
692
|
+
morphTimeline.fromTo(
|
|
693
|
+
elements.execution.recent,
|
|
694
|
+
{ autoAlpha: 0, filter: "blur(4px)", y: 6 },
|
|
695
|
+
{
|
|
696
|
+
autoAlpha: 1,
|
|
697
|
+
filter: "blur(0px)",
|
|
698
|
+
y: 0,
|
|
699
|
+
duration: MOTION.detailRevealSeconds,
|
|
700
|
+
ease: "power3.out"
|
|
701
|
+
},
|
|
702
|
+
MOTION.detailRevealDelaySeconds
|
|
703
|
+
);
|
|
704
|
+
} else if (detailTransition === "collapse") {
|
|
705
|
+
morphTimeline.fromTo(
|
|
706
|
+
elements.execution.recent,
|
|
707
|
+
{ autoAlpha: 1, filter: "blur(0px)", y: 0 },
|
|
708
|
+
{
|
|
709
|
+
autoAlpha: 0,
|
|
710
|
+
filter: "blur(3px)",
|
|
711
|
+
y: -4,
|
|
712
|
+
duration: MOTION.detailRetireSeconds,
|
|
713
|
+
ease: "power2.in"
|
|
714
|
+
},
|
|
715
|
+
0
|
|
716
|
+
);
|
|
717
|
+
}
|
|
718
|
+
if (reveal) {
|
|
719
|
+
morphTimeline.fromTo(
|
|
720
|
+
activeScene,
|
|
721
|
+
{ autoAlpha: 0, y: 4 },
|
|
722
|
+
{
|
|
723
|
+
autoAlpha: 1,
|
|
724
|
+
y: 0,
|
|
725
|
+
duration: MOTION.revealSeconds,
|
|
726
|
+
ease: "power2.out",
|
|
727
|
+
clearProps: "transform,opacity,visibility"
|
|
728
|
+
},
|
|
729
|
+
MOTION.sceneRevealDelaySeconds
|
|
730
|
+
);
|
|
731
|
+
}
|
|
732
|
+
}
|
|
733
|
+
function applyProjection(projection, renderContent) {
|
|
734
|
+
if (disposed) return;
|
|
735
|
+
const previousScene = currentScene;
|
|
736
|
+
const sceneChanged = previousScene !== projection.scene;
|
|
737
|
+
const layerChanged = previousScene === void 0 || surfaceLayer(previousScene) !== surfaceLayer(projection.scene);
|
|
738
|
+
const wasExpanded = elements.execution.root.dataset.expanded === "true";
|
|
739
|
+
const executionRemainsActive = previousScene !== void 0 && surfaceLayer(previousScene) === "execution" && surfaceLayer(projection.scene) === "execution";
|
|
740
|
+
const preserveInterruptedSharedLayout = executionRemainsActive && (wasExpanded || morphTimeline?.isActive() === true);
|
|
741
|
+
const previousGeometry = interruptMorph(preserveInterruptedSharedLayout);
|
|
742
|
+
const activityChanged = currentActivityKey !== projection.activity?.key;
|
|
743
|
+
elements.surface.dataset.scene = projection.scene;
|
|
744
|
+
elements.surface.dataset.tone = projection.tone;
|
|
745
|
+
elements.surface.style.setProperty(
|
|
746
|
+
"--spotpatch-island-compact-width",
|
|
747
|
+
`${String(compactIslandWidth(projection))}px`
|
|
748
|
+
);
|
|
749
|
+
renderContent();
|
|
750
|
+
const activeScene = setSceneVisibility(elements, projection);
|
|
751
|
+
const isExpanded = elements.execution.root.dataset.expanded === "true";
|
|
752
|
+
const detailTransition = executionRemainsActive && wasExpanded && !isExpanded ? "collapse" : void 0;
|
|
753
|
+
if (detailTransition === "collapse") {
|
|
754
|
+
elements.execution.recent.hidden = false;
|
|
755
|
+
}
|
|
756
|
+
reconcile();
|
|
757
|
+
const nextGeometry = captureSurfaceLayout(
|
|
758
|
+
preserveInterruptedSharedLayout || detailTransition !== void 0
|
|
759
|
+
);
|
|
760
|
+
currentScene = projection.scene;
|
|
761
|
+
currentActivityKey = projection.activity?.key;
|
|
762
|
+
animateGeometry(
|
|
763
|
+
previousGeometry,
|
|
764
|
+
nextGeometry,
|
|
765
|
+
activeScene,
|
|
766
|
+
layerChanged,
|
|
767
|
+
detailTransition
|
|
768
|
+
);
|
|
769
|
+
const executionActive = projection.scene === "handoff" || projection.scene === "running" || projection.scene === "success" || projection.scene === "failed";
|
|
770
|
+
if (executionActive && (sceneChanged || activityChanged)) sweepOnce();
|
|
771
|
+
}
|
|
772
|
+
function updateLayout(updateContent) {
|
|
773
|
+
if (disposed) return;
|
|
774
|
+
const wasExpanded = elements.execution.root.dataset.expanded === "true";
|
|
775
|
+
const previousGeometry = interruptMorph(true);
|
|
776
|
+
updateContent();
|
|
777
|
+
const isExpanded = elements.execution.root.dataset.expanded === "true";
|
|
778
|
+
const detailTransition = wasExpanded ? isExpanded ? void 0 : "collapse" : isExpanded ? "expand" : void 0;
|
|
779
|
+
if (detailTransition === "collapse") {
|
|
780
|
+
elements.execution.recent.hidden = false;
|
|
781
|
+
}
|
|
782
|
+
reconcile();
|
|
783
|
+
const nextGeometry = captureSurfaceLayout(true);
|
|
784
|
+
const activeScene = elements.execution.root.hidden ? elements.planner.hidden ? elements.pill : elements.planner : elements.execution.root;
|
|
785
|
+
animateGeometry(
|
|
786
|
+
previousGeometry,
|
|
787
|
+
nextGeometry,
|
|
788
|
+
activeScene,
|
|
789
|
+
false,
|
|
790
|
+
detailTransition
|
|
791
|
+
);
|
|
792
|
+
}
|
|
793
|
+
function cancel() {
|
|
794
|
+
pendingProjection = void 0;
|
|
795
|
+
clearMorph();
|
|
796
|
+
clearDispatch();
|
|
797
|
+
import_gsap.gsap.killTweensOf(elements.execution.sweep);
|
|
798
|
+
import_gsap.gsap.set(elements.execution.sweep, {
|
|
799
|
+
clearProps: "opacity,transform,visibility"
|
|
800
|
+
});
|
|
801
|
+
}
|
|
802
|
+
function render(projection, renderContent) {
|
|
803
|
+
if (disposed) return;
|
|
804
|
+
const dispatchActive = dispatchTimeline?.isActive() === true;
|
|
805
|
+
const leavesChargingScene = projection.scene !== "planner" && projection.scene !== "agent-charging";
|
|
806
|
+
if (dispatchActive && currentScene === "agent-charging" && leavesChargingScene) {
|
|
807
|
+
pendingProjection = Object.freeze({ projection, renderContent });
|
|
808
|
+
return;
|
|
809
|
+
}
|
|
810
|
+
if (dispatchActive && projection.scene !== "agent-charging") {
|
|
811
|
+
pendingProjection = void 0;
|
|
812
|
+
clearDispatch();
|
|
813
|
+
}
|
|
814
|
+
applyProjection(projection, renderContent);
|
|
815
|
+
}
|
|
816
|
+
function dispatch(source, target) {
|
|
817
|
+
if (disposed || dispatchTimeline?.isActive() === true) return;
|
|
818
|
+
if (!supportsMotion(document)) return;
|
|
819
|
+
clearDispatch();
|
|
820
|
+
dispatchSource = source;
|
|
821
|
+
dispatchTarget = target;
|
|
822
|
+
elements.surface.dataset.agentCharging = "true";
|
|
823
|
+
dispatchTimeline = import_gsap.gsap.timeline({
|
|
824
|
+
onComplete: () => {
|
|
825
|
+
const nextProjection = pendingProjection;
|
|
826
|
+
pendingProjection = void 0;
|
|
827
|
+
completeDispatch();
|
|
828
|
+
if (nextProjection !== void 0) {
|
|
829
|
+
applyProjection(nextProjection.projection, nextProjection.renderContent);
|
|
830
|
+
}
|
|
831
|
+
}
|
|
832
|
+
});
|
|
833
|
+
dispatchTimeline.fromTo(
|
|
834
|
+
source,
|
|
835
|
+
{ filter: "brightness(1)", scaleX: 1, scaleY: 1 },
|
|
836
|
+
{
|
|
837
|
+
filter: "brightness(1.06)",
|
|
838
|
+
scaleX: 0.995,
|
|
839
|
+
scaleY: 0.97,
|
|
840
|
+
duration: MOTION.pressSeconds,
|
|
841
|
+
ease: "power2.out",
|
|
842
|
+
yoyo: true,
|
|
843
|
+
repeat: 1,
|
|
844
|
+
clearProps: "filter,transform"
|
|
845
|
+
},
|
|
846
|
+
0
|
|
847
|
+
);
|
|
848
|
+
dispatchTimeline.fromTo(
|
|
849
|
+
target,
|
|
850
|
+
{ boxShadow: "0 0 0 rgb(100 120 255 / 0%)" },
|
|
851
|
+
{
|
|
852
|
+
boxShadow: "0 0 18px rgb(100 120 255 / 14%)",
|
|
853
|
+
duration: MOTION.targetFeedbackSeconds,
|
|
854
|
+
yoyo: true,
|
|
855
|
+
repeat: 1,
|
|
856
|
+
clearProps: "boxShadow"
|
|
857
|
+
},
|
|
858
|
+
MOTION.targetFeedbackDelaySeconds
|
|
859
|
+
);
|
|
860
|
+
dispatchTimeline.to({}, { duration: MOTION.dispatchSeconds }, 0);
|
|
861
|
+
}
|
|
862
|
+
return Object.freeze({
|
|
863
|
+
cancel,
|
|
864
|
+
dispatch,
|
|
865
|
+
render,
|
|
866
|
+
updateLayout,
|
|
867
|
+
dispose() {
|
|
868
|
+
if (disposed) return;
|
|
869
|
+
disposed = true;
|
|
870
|
+
cancel();
|
|
871
|
+
document.removeEventListener("visibilitychange", handleVisibility);
|
|
872
|
+
}
|
|
873
|
+
});
|
|
874
|
+
}
|
|
875
|
+
|
|
876
|
+
// src/ui/ui-constants.ts
|
|
877
|
+
var UI_MARKER_ATTRIBUTE = "data-spotpatch-ui";
|
|
878
|
+
var UI_Z_INDEX = Object.freeze({
|
|
879
|
+
highlight: 2147483646,
|
|
880
|
+
controls: 2147483647
|
|
881
|
+
});
|
|
882
|
+
var FLOATING_SURFACE_LAYOUT = Object.freeze({
|
|
883
|
+
compactInset: 8,
|
|
884
|
+
compactViewportWidth: 520,
|
|
885
|
+
desktopInset: 24,
|
|
886
|
+
dragActivationDistance: 6,
|
|
887
|
+
edgeSnapDistance: 20,
|
|
888
|
+
workbenchMaxHeight: 620,
|
|
889
|
+
workbenchMaxWidth: 460
|
|
890
|
+
});
|
|
891
|
+
|
|
892
|
+
// src/ui/dom.ts
|
|
893
|
+
function createMarkedElement(document, tagName) {
|
|
894
|
+
const element = document.createElement(tagName);
|
|
895
|
+
element.setAttribute(UI_MARKER_ATTRIBUTE, "");
|
|
896
|
+
return element;
|
|
897
|
+
}
|
|
898
|
+
function createButton(document, label, className = "") {
|
|
899
|
+
const button = createMarkedElement(document, "button");
|
|
900
|
+
button.type = "button";
|
|
901
|
+
button.className = className;
|
|
902
|
+
button.textContent = label;
|
|
903
|
+
return button;
|
|
904
|
+
}
|
|
905
|
+
|
|
906
|
+
// src/ui/brand-mark-content.ts
|
|
907
|
+
var BRAND_MARK_CONTENT = `
|
|
908
|
+
<defs>
|
|
909
|
+
<linearGradient id="locator-gradient" x1="76" y1="92" x2="436" y2="374" gradientUnits="userSpaceOnUse">
|
|
910
|
+
<stop offset="0" stop-color="#B61CFF" />
|
|
911
|
+
<stop offset="0.38" stop-color="#6D35FF" />
|
|
912
|
+
<stop offset="0.72" stop-color="#168EFF" />
|
|
913
|
+
<stop offset="1" stop-color="#00D9E9" />
|
|
914
|
+
</linearGradient>
|
|
915
|
+
<linearGradient id="left-code-gradient" x1="165" y1="166" x2="236" y2="258" gradientUnits="userSpaceOnUse">
|
|
916
|
+
<stop stop-color="#A51EFF" />
|
|
917
|
+
<stop offset="1" stop-color="#653BFF" />
|
|
918
|
+
</linearGradient>
|
|
919
|
+
<linearGradient id="right-code-gradient" x1="276" y1="166" x2="347" y2="258" gradientUnits="userSpaceOnUse">
|
|
920
|
+
<stop stop-color="#158DFF" />
|
|
921
|
+
<stop offset="1" stop-color="#00D8E9" />
|
|
922
|
+
</linearGradient>
|
|
923
|
+
<linearGradient id="bolt-gradient" x1="270" y1="111" x2="252" y2="365" gradientUnits="userSpaceOnUse">
|
|
924
|
+
<stop stop-color="#6840FF" />
|
|
925
|
+
<stop offset="0.48" stop-color="#257BFF" />
|
|
926
|
+
<stop offset="1" stop-color="#00CBEF" />
|
|
927
|
+
</linearGradient>
|
|
928
|
+
</defs>
|
|
929
|
+
<path
|
|
930
|
+
fill="url(#locator-gradient)"
|
|
931
|
+
fill-rule="evenodd"
|
|
932
|
+
clip-rule="evenodd"
|
|
933
|
+
d="M256 52C345.47 52 418 124.53 418 214C418 267.55 391.98 316.24 354.04 348.02L256 468L157.96 348.02C120.02 316.24 94 267.55 94 214C94 124.53 166.53 52 256 52ZM256 88C186.41 88 130 144.41 130 214C130 258.2 152.76 297.08 187.2 319.57L256 403.8L324.8 319.57C359.24 297.08 382 258.2 382 214C382 144.41 325.59 88 256 88Z"
|
|
934
|
+
/>
|
|
935
|
+
<rect x="238" y="20" width="36" height="84" rx="4" fill="url(#locator-gradient)" />
|
|
936
|
+
<rect x="62" y="196" width="84" height="36" rx="4" fill="url(#locator-gradient)" />
|
|
937
|
+
<rect x="366" y="196" width="84" height="36" rx="4" fill="url(#locator-gradient)" />
|
|
938
|
+
<path
|
|
939
|
+
d="M213.5 160L158 211.5L213.5 263L238 236.5L211 211.5L238 186.5L213.5 160Z"
|
|
940
|
+
fill="url(#left-code-gradient)"
|
|
941
|
+
/>
|
|
942
|
+
<path
|
|
943
|
+
d="M298.5 160L354 211.5L298.5 263L274 236.5L301 211.5L274 186.5L298.5 160Z"
|
|
944
|
+
fill="url(#right-code-gradient)"
|
|
945
|
+
/>
|
|
946
|
+
<path
|
|
947
|
+
d="M283 108L232 212L266 253L238 369L302 237L267 198L283 108Z"
|
|
948
|
+
fill="url(#bolt-gradient)"
|
|
949
|
+
/>
|
|
950
|
+
`;
|
|
951
|
+
|
|
952
|
+
// src/ui/brand-mark.ts
|
|
953
|
+
var SVG_NAMESPACE = "http://www.w3.org/2000/svg";
|
|
954
|
+
function resolveBrandMarkContent(override) {
|
|
955
|
+
if (override !== void 0) {
|
|
956
|
+
return { content: override, viewBox: "0 0 512 512" };
|
|
957
|
+
}
|
|
958
|
+
const injected = typeof __SPOTPATCH_BRAND_MARK_CONTENT__ === "string" ? __SPOTPATCH_BRAND_MARK_CONTENT__ : void 0;
|
|
959
|
+
if (typeof injected === "string") {
|
|
960
|
+
return { content: injected, viewBox: "0 0 512 512" };
|
|
961
|
+
}
|
|
962
|
+
return true ? { content: BRAND_MARK_CONTENT, viewBox: "0 0 512 512" } : { content: FALLBACK_BRAND_MARK_CONTENT, viewBox: "0 0 1 1" };
|
|
963
|
+
}
|
|
964
|
+
function svgElement(document, tagName, attributes) {
|
|
965
|
+
const element = document.createElementNS(SVG_NAMESPACE, tagName);
|
|
966
|
+
for (const [name, value] of Object.entries(attributes)) {
|
|
967
|
+
element.setAttribute(name, value);
|
|
968
|
+
}
|
|
969
|
+
return element;
|
|
970
|
+
}
|
|
971
|
+
function namespaceSvgIds(svg, prefix) {
|
|
972
|
+
const safePrefix = prefix.replace(/[^a-zA-Z0-9_-]/gu, "-");
|
|
973
|
+
const ids = /* @__PURE__ */ new Map();
|
|
974
|
+
for (const element of svg.querySelectorAll("[id]")) {
|
|
975
|
+
const id = element.id;
|
|
976
|
+
const namespacedId = `${safePrefix}-${id}`;
|
|
977
|
+
ids.set(id, namespacedId);
|
|
978
|
+
element.id = namespacedId;
|
|
979
|
+
}
|
|
980
|
+
for (const element of [svg, ...svg.querySelectorAll("*")]) {
|
|
981
|
+
for (const attribute of [...element.attributes]) {
|
|
982
|
+
let value = attribute.value;
|
|
983
|
+
for (const [id, namespacedId] of ids) {
|
|
984
|
+
value = value.replaceAll(`url(#${id})`, `url(#${namespacedId})`);
|
|
985
|
+
if (value === `#${id}`) value = `#${namespacedId}`;
|
|
986
|
+
}
|
|
987
|
+
if (value !== attribute.value) element.setAttribute(attribute.name, value);
|
|
988
|
+
}
|
|
989
|
+
}
|
|
990
|
+
}
|
|
991
|
+
function createBrandMark(document, content, idPrefix) {
|
|
992
|
+
const resolved = resolveBrandMarkContent(content);
|
|
993
|
+
const svg = svgElement(document, "svg", {
|
|
994
|
+
xmlns: SVG_NAMESPACE,
|
|
995
|
+
class: "spotpatch-brand-mark",
|
|
996
|
+
viewBox: resolved.viewBox,
|
|
997
|
+
"aria-hidden": "true",
|
|
998
|
+
focusable: "false"
|
|
999
|
+
});
|
|
1000
|
+
svg.innerHTML = resolved.content;
|
|
1001
|
+
if (idPrefix !== void 0) namespaceSvgIds(svg, idPrefix);
|
|
1002
|
+
return svg;
|
|
1003
|
+
}
|
|
1004
|
+
|
|
1005
|
+
// src/ui/execution-island.ts
|
|
1006
|
+
var TIMER_INTERVAL_MS = 1e3;
|
|
1007
|
+
function formatElapsed(milliseconds) {
|
|
1008
|
+
const totalSeconds = Math.max(0, Math.floor(milliseconds / TIMER_INTERVAL_MS));
|
|
1009
|
+
const seconds = totalSeconds % 60;
|
|
1010
|
+
const totalMinutes = Math.floor(totalSeconds / 60);
|
|
1011
|
+
const minutes = totalMinutes % 60;
|
|
1012
|
+
const hours = Math.floor(totalMinutes / 60);
|
|
1013
|
+
const twoDigits = (value) => String(value).padStart(2, "0");
|
|
1014
|
+
return hours > 0 ? `${twoDigits(hours)}:${twoDigits(minutes)}:${twoDigits(seconds)}` : `${twoDigits(totalMinutes)}:${twoDigits(seconds)}`;
|
|
1015
|
+
}
|
|
1016
|
+
function validTimestamp(value) {
|
|
1017
|
+
if (value === void 0) return void 0;
|
|
1018
|
+
const timestamp = Date.parse(value);
|
|
1019
|
+
return Number.isFinite(timestamp) ? timestamp : void 0;
|
|
1020
|
+
}
|
|
1021
|
+
function prefersReducedMotion(window) {
|
|
1022
|
+
const matchMedia = Reflect.get(window, "matchMedia");
|
|
1023
|
+
if (typeof matchMedia !== "function") return false;
|
|
1024
|
+
const result = Reflect.apply(matchMedia, window, [
|
|
1025
|
+
"(prefers-reduced-motion: reduce)"
|
|
1026
|
+
]);
|
|
1027
|
+
return typeof result === "object" && result !== null && "matches" in result && result.matches === true;
|
|
1028
|
+
}
|
|
1029
|
+
function createExecutionIsland(document, now = Date.now) {
|
|
1030
|
+
const window = document.defaultView;
|
|
1031
|
+
if (window === null) {
|
|
1032
|
+
throw new Error("SpotPatch Execution Island requires an associated window.");
|
|
1033
|
+
}
|
|
1034
|
+
const root = createButton(document, "", "spotpatch-execution-island");
|
|
1035
|
+
root.hidden = true;
|
|
1036
|
+
root.setAttribute("aria-hidden", "true");
|
|
1037
|
+
root.setAttribute("aria-expanded", "false");
|
|
1038
|
+
const logo = createBrandMark(
|
|
1039
|
+
document,
|
|
1040
|
+
BRAND_MARK_CONTENT,
|
|
1041
|
+
"spotpatch-execution-island"
|
|
1042
|
+
);
|
|
1043
|
+
logo.classList.add("spotpatch-execution-logo");
|
|
1044
|
+
const mark = createMarkedElement(document, "span");
|
|
1045
|
+
mark.className = "spotpatch-execution-mark";
|
|
1046
|
+
mark.append(logo);
|
|
1047
|
+
const content = createMarkedElement(document, "span");
|
|
1048
|
+
content.className = "spotpatch-execution-content";
|
|
1049
|
+
content.setAttribute("role", "status");
|
|
1050
|
+
content.setAttribute("aria-live", "polite");
|
|
1051
|
+
content.setAttribute("aria-atomic", "true");
|
|
1052
|
+
const headlineWrap = createMarkedElement(document, "span");
|
|
1053
|
+
headlineWrap.className = "spotpatch-execution-headline-wrap";
|
|
1054
|
+
const headline = createMarkedElement(document, "strong");
|
|
1055
|
+
headline.className = "spotpatch-execution-headline";
|
|
1056
|
+
const headlineOutgoing = createMarkedElement(document, "strong");
|
|
1057
|
+
headlineOutgoing.className = "spotpatch-execution-headline-outgoing";
|
|
1058
|
+
headlineOutgoing.setAttribute("aria-hidden", "true");
|
|
1059
|
+
headlineWrap.append(headlineOutgoing, headline);
|
|
1060
|
+
const actionWrap = createMarkedElement(document, "span");
|
|
1061
|
+
actionWrap.className = "spotpatch-execution-action-wrap";
|
|
1062
|
+
const action = createMarkedElement(document, "span");
|
|
1063
|
+
action.className = "spotpatch-execution-action";
|
|
1064
|
+
const actionOutgoing = createMarkedElement(document, "span");
|
|
1065
|
+
actionOutgoing.className = "spotpatch-execution-action-outgoing";
|
|
1066
|
+
actionOutgoing.setAttribute("aria-hidden", "true");
|
|
1067
|
+
actionWrap.append(actionOutgoing, action);
|
|
1068
|
+
const recent = createMarkedElement(document, "span");
|
|
1069
|
+
recent.className = "spotpatch-execution-recent";
|
|
1070
|
+
content.append(headlineWrap, actionWrap);
|
|
1071
|
+
const meta = createMarkedElement(document, "span");
|
|
1072
|
+
meta.className = "spotpatch-execution-meta";
|
|
1073
|
+
const metaDot = createMarkedElement(document, "span");
|
|
1074
|
+
metaDot.className = "spotpatch-execution-meta-dot";
|
|
1075
|
+
metaDot.setAttribute("aria-hidden", "true");
|
|
1076
|
+
const metaLabel = createMarkedElement(document, "span");
|
|
1077
|
+
metaLabel.className = "spotpatch-execution-meta-label";
|
|
1078
|
+
const timer = createMarkedElement(document, "span");
|
|
1079
|
+
timer.className = "spotpatch-execution-timer";
|
|
1080
|
+
timer.hidden = true;
|
|
1081
|
+
meta.append(metaDot, metaLabel, timer);
|
|
1082
|
+
const more = createMarkedElement(document, "span");
|
|
1083
|
+
more.className = "spotpatch-execution-more";
|
|
1084
|
+
more.textContent = "\u2022\u2022\u2022";
|
|
1085
|
+
more.setAttribute("aria-hidden", "true");
|
|
1086
|
+
meta.append(more);
|
|
1087
|
+
const sweep = createMarkedElement(document, "span");
|
|
1088
|
+
sweep.className = "spotpatch-island-sweep";
|
|
1089
|
+
sweep.setAttribute("aria-hidden", "true");
|
|
1090
|
+
root.append(mark, content, meta, recent, sweep);
|
|
1091
|
+
const elements = Object.freeze({
|
|
1092
|
+
action,
|
|
1093
|
+
actionOutgoing,
|
|
1094
|
+
content,
|
|
1095
|
+
headline,
|
|
1096
|
+
headlineOutgoing,
|
|
1097
|
+
logo,
|
|
1098
|
+
mark,
|
|
1099
|
+
meta,
|
|
1100
|
+
metaDot,
|
|
1101
|
+
metaLabel,
|
|
1102
|
+
more,
|
|
1103
|
+
recent,
|
|
1104
|
+
root,
|
|
1105
|
+
sweep,
|
|
1106
|
+
timer
|
|
1107
|
+
});
|
|
1108
|
+
let currentProjection;
|
|
1109
|
+
let expandable = false;
|
|
1110
|
+
let expanded = false;
|
|
1111
|
+
let timerHandle;
|
|
1112
|
+
let startedAt;
|
|
1113
|
+
let disposed = false;
|
|
1114
|
+
const updateExpandedState = () => {
|
|
1115
|
+
expanded = expandable && expanded;
|
|
1116
|
+
root.dataset.expandable = String(expandable);
|
|
1117
|
+
root.dataset.expanded = String(expanded);
|
|
1118
|
+
root.setAttribute("aria-expanded", String(expanded));
|
|
1119
|
+
more.textContent = expanded ? "\xD7" : "\u2022\u2022\u2022";
|
|
1120
|
+
recent.hidden = !expanded;
|
|
1121
|
+
};
|
|
1122
|
+
const animateCopyChange = (element, outgoing, value) => {
|
|
1123
|
+
if (element.textContent === value) return;
|
|
1124
|
+
outgoing.textContent = element.textContent;
|
|
1125
|
+
element.textContent = value;
|
|
1126
|
+
root.classList.remove("spotpatch-execution-copy-changing");
|
|
1127
|
+
if (!prefersReducedMotion(window)) {
|
|
1128
|
+
void root.offsetWidth;
|
|
1129
|
+
root.classList.add("spotpatch-execution-copy-changing");
|
|
1130
|
+
}
|
|
1131
|
+
};
|
|
1132
|
+
const syncProjectionCopy = (projection) => {
|
|
1133
|
+
const visibleHeadline = expanded ? projection.expandedHeadline ?? projection.headline : projection.headline;
|
|
1134
|
+
const visibleAction = expanded ? projection.expandedAction ?? projection.action : projection.action;
|
|
1135
|
+
animateCopyChange(headline, headlineOutgoing, visibleHeadline);
|
|
1136
|
+
animateCopyChange(action, actionOutgoing, visibleAction);
|
|
1137
|
+
root.setAttribute(
|
|
1138
|
+
"aria-label",
|
|
1139
|
+
[visibleHeadline, visibleAction, projection.meta].filter(Boolean).join(". ")
|
|
1140
|
+
);
|
|
1141
|
+
};
|
|
1142
|
+
const stopTimer = () => {
|
|
1143
|
+
if (timerHandle === void 0) return;
|
|
1144
|
+
window.clearInterval(timerHandle);
|
|
1145
|
+
timerHandle = void 0;
|
|
1146
|
+
};
|
|
1147
|
+
const updateTimer = () => {
|
|
1148
|
+
if (startedAt === void 0) return;
|
|
1149
|
+
timer.textContent = formatElapsed(now() - startedAt);
|
|
1150
|
+
};
|
|
1151
|
+
const startTimer = () => {
|
|
1152
|
+
if (timerHandle !== void 0 || startedAt === void 0 || document.hidden) {
|
|
1153
|
+
return;
|
|
1154
|
+
}
|
|
1155
|
+
updateTimer();
|
|
1156
|
+
timerHandle = window.setInterval(updateTimer, TIMER_INTERVAL_MS);
|
|
1157
|
+
};
|
|
1158
|
+
const syncTimer = (projection) => {
|
|
1159
|
+
stopTimer();
|
|
1160
|
+
startedAt = projection.scene === "running" ? validTimestamp(projection.startedAt) : void 0;
|
|
1161
|
+
const timed = startedAt !== void 0;
|
|
1162
|
+
timer.hidden = !timed;
|
|
1163
|
+
metaLabel.textContent = projection.meta;
|
|
1164
|
+
if (timed) startTimer();
|
|
1165
|
+
};
|
|
1166
|
+
const handleVisibility = () => {
|
|
1167
|
+
if (document.hidden) {
|
|
1168
|
+
stopTimer();
|
|
1169
|
+
} else if (currentProjection !== void 0) {
|
|
1170
|
+
syncTimer(currentProjection);
|
|
1171
|
+
}
|
|
1172
|
+
};
|
|
1173
|
+
document.addEventListener("visibilitychange", handleVisibility);
|
|
1174
|
+
return Object.freeze({
|
|
1175
|
+
canExpand: () => expandable,
|
|
1176
|
+
elements,
|
|
1177
|
+
isExpanded: () => expanded,
|
|
1178
|
+
root,
|
|
1179
|
+
setExpanded(nextExpanded) {
|
|
1180
|
+
expanded = nextExpanded;
|
|
1181
|
+
updateExpandedState();
|
|
1182
|
+
if (currentProjection !== void 0) syncProjectionCopy(currentProjection);
|
|
1183
|
+
},
|
|
1184
|
+
render(projection) {
|
|
1185
|
+
if (disposed) return;
|
|
1186
|
+
currentProjection = projection;
|
|
1187
|
+
root.dataset.executionScene = projection.scene;
|
|
1188
|
+
meta.dataset.tone = projection.tone;
|
|
1189
|
+
syncTimer(projection);
|
|
1190
|
+
recent.replaceChildren(
|
|
1191
|
+
...projection.recentActivities.slice(-3).map((item) => {
|
|
1192
|
+
const row = createMarkedElement(document, "span");
|
|
1193
|
+
row.className = "spotpatch-execution-recent-item";
|
|
1194
|
+
row.dataset.state = item.state;
|
|
1195
|
+
const kind = createMarkedElement(document, "span");
|
|
1196
|
+
kind.className = "spotpatch-execution-recent-kind";
|
|
1197
|
+
kind.textContent = item.kind;
|
|
1198
|
+
const detail = createMarkedElement(document, "span");
|
|
1199
|
+
detail.className = "spotpatch-execution-recent-detail";
|
|
1200
|
+
detail.textContent = item.detail ?? item.label;
|
|
1201
|
+
const state = createMarkedElement(document, "span");
|
|
1202
|
+
state.className = "spotpatch-execution-recent-state";
|
|
1203
|
+
state.textContent = item.state;
|
|
1204
|
+
row.append(kind, detail, state);
|
|
1205
|
+
return row;
|
|
1206
|
+
})
|
|
1207
|
+
);
|
|
1208
|
+
expandable = projection.recentActivities.length > 0;
|
|
1209
|
+
if (projection.scene === "success" || projection.scene === "failed") {
|
|
1210
|
+
expanded = false;
|
|
1211
|
+
}
|
|
1212
|
+
updateExpandedState();
|
|
1213
|
+
syncProjectionCopy(projection);
|
|
1214
|
+
},
|
|
1215
|
+
dispose() {
|
|
1216
|
+
if (disposed) return;
|
|
1217
|
+
disposed = true;
|
|
1218
|
+
stopTimer();
|
|
1219
|
+
document.removeEventListener("visibilitychange", handleVisibility);
|
|
1220
|
+
}
|
|
1221
|
+
});
|
|
1222
|
+
}
|
|
1223
|
+
|
|
1224
|
+
// src/ui/motion-extension-contract.ts
|
|
1225
|
+
var MOTION_EXTENSION_KEY = /* @__PURE__ */ Symbol.for("spotpatch.motion.v1");
|
|
1226
|
+
function registerFloatingSurfaceMotionExtension(extension) {
|
|
1227
|
+
globalThis[MOTION_EXTENSION_KEY] = extension;
|
|
1228
|
+
}
|
|
1229
|
+
function getFloatingSurfaceMotionExtension() {
|
|
1230
|
+
return globalThis[MOTION_EXTENSION_KEY];
|
|
1231
|
+
}
|
|
1232
|
+
|
|
1233
|
+
// src/motion-entry.ts
|
|
1234
|
+
var FLOATING_SURFACE_MOTION_EXTENSION = Object.freeze({
|
|
1235
|
+
createExecutionIsland,
|
|
1236
|
+
createController: createFloatingSurfaceMotionController,
|
|
1237
|
+
createStyles: createFloatingSurfaceMotionStyles
|
|
1238
|
+
});
|
|
1239
|
+
function installFloatingSurfaceMotionExtension() {
|
|
1240
|
+
registerFloatingSurfaceMotionExtension(FLOATING_SURFACE_MOTION_EXTENSION);
|
|
1241
|
+
}
|
|
1242
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
1243
|
+
0 && (module.exports = {
|
|
1244
|
+
createExecutionIsland,
|
|
1245
|
+
createFloatingSurfaceMotionController,
|
|
1246
|
+
createFloatingSurfaceMotionStyles,
|
|
1247
|
+
getFloatingSurfaceMotionExtension,
|
|
1248
|
+
installFloatingSurfaceMotionExtension,
|
|
1249
|
+
registerFloatingSurfaceMotionExtension
|
|
1250
|
+
});
|
|
1251
|
+
//# sourceMappingURL=motion.cjs.map
|