vireuikit 0.6.0 → 0.8.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/README.md +106 -4
- package/dist/chunk-VY5MD3CX.js +684 -0
- package/dist/chunk-VY5MD3CX.js.map +1 -0
- package/dist/context-DQaAcRq-.d.cts +104 -0
- package/dist/context-DQaAcRq-.d.ts +104 -0
- package/dist/index.cjs +751 -151
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +533 -98
- package/dist/index.d.ts +533 -98
- package/dist/index.js +250 -1
- package/dist/index.js.map +1 -1
- package/dist/web.cjs +1347 -83
- package/dist/web.cjs.map +1 -1
- package/dist/web.d.cts +39 -3
- package/dist/web.d.ts +39 -3
- package/dist/web.js +924 -37
- package/dist/web.js.map +1 -1
- package/package.json +1 -1
- package/dist/a11y-D3SS74I3.d.cts +0 -25
- package/dist/a11y-D3SS74I3.d.ts +0 -25
- package/dist/chunk-I3BD3XGC.js +0 -392
- package/dist/chunk-I3BD3XGC.js.map +0 -1
|
@@ -0,0 +1,684 @@
|
|
|
1
|
+
import { halfMinDp, concentricRadius, activeMaterial, applyAccessibility, resolveOptics, VIREGLASS_SHEET_MATERIAL } from 'vireglass';
|
|
2
|
+
|
|
3
|
+
// src/kit/a11y.ts
|
|
4
|
+
var A11Y_NONE = {
|
|
5
|
+
reduceTransparency: false,
|
|
6
|
+
increaseContrast: false,
|
|
7
|
+
reduceMotion: false
|
|
8
|
+
};
|
|
9
|
+
function resolveA11y(system, override = {}) {
|
|
10
|
+
return {
|
|
11
|
+
reduceTransparency: override.reduceTransparency ?? system.reduceTransparency,
|
|
12
|
+
increaseContrast: override.increaseContrast ?? system.increaseContrast,
|
|
13
|
+
reduceMotion: override.reduceMotion ?? system.reduceMotion
|
|
14
|
+
};
|
|
15
|
+
}
|
|
16
|
+
function presentationFor(mode, wantsGlass) {
|
|
17
|
+
return {
|
|
18
|
+
glass: wantsGlass,
|
|
19
|
+
frost: wantsGlass && mode.reduceTransparency,
|
|
20
|
+
surface: wantsGlass ? "glass" : "plain",
|
|
21
|
+
contrastBorder: mode.increaseContrast,
|
|
22
|
+
instantSprings: mode.reduceMotion
|
|
23
|
+
};
|
|
24
|
+
}
|
|
25
|
+
function sameA11y(a, b) {
|
|
26
|
+
return a.reduceTransparency === b.reduceTransparency && a.increaseContrast === b.increaseContrast && a.reduceMotion === b.reduceMotion;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
// src/kit/geometry.ts
|
|
30
|
+
function intersectRect(a, b) {
|
|
31
|
+
const x = Math.max(a.x, b.x);
|
|
32
|
+
const y = Math.max(a.y, b.y);
|
|
33
|
+
const right = Math.min(a.x + a.width, b.x + b.width);
|
|
34
|
+
const bottom = Math.min(a.y + a.height, b.y + b.height);
|
|
35
|
+
return right > x && bottom > y ? { x, y, width: right - x, height: bottom - y } : null;
|
|
36
|
+
}
|
|
37
|
+
function rectContains(outer, inner, tolerance = 0) {
|
|
38
|
+
return inner.x >= outer.x - tolerance && inner.y >= outer.y - tolerance && inner.x + inner.width <= outer.x + outer.width + tolerance && inner.y + inner.height <= outer.y + outer.height + tolerance;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
// src/kit/adaptive/context.ts
|
|
42
|
+
var INPUT_TOUCH = { primary: "coarse", anyCoarse: true, hover: false, keyboard: false };
|
|
43
|
+
var INPUT_POINTER = { primary: "fine", anyCoarse: false, hover: true, keyboard: true };
|
|
44
|
+
var INPUT_MIXED = { primary: "fine", anyCoarse: true, hover: true, keyboard: true };
|
|
45
|
+
var INPUT_TABLET_KEYBOARD = { primary: "coarse", anyCoarse: true, hover: true, keyboard: true };
|
|
46
|
+
var POSTURE_FLAT = { kind: "flat" };
|
|
47
|
+
function adaptiveContext(partial) {
|
|
48
|
+
return {
|
|
49
|
+
window: partial.window,
|
|
50
|
+
input: partial.input ?? INPUT_POINTER,
|
|
51
|
+
posture: partial.posture ?? POSTURE_FLAT,
|
|
52
|
+
reduceMotion: partial.reduceMotion ?? false
|
|
53
|
+
};
|
|
54
|
+
}
|
|
55
|
+
function halfOpen(kind, window, options = {}) {
|
|
56
|
+
const band = Math.max(options.band ?? 0, 0);
|
|
57
|
+
const span = kind === "tabletop" ? window.height : window.width;
|
|
58
|
+
const at = options.at ?? span / 2;
|
|
59
|
+
const start = at - band / 2;
|
|
60
|
+
const bounds = kind === "tabletop" ? { x: 0, y: start, width: window.width, height: band } : { x: start, y: 0, width: band, height: window.height };
|
|
61
|
+
return { kind, fold: { bounds, occluding: options.occluding ?? band > 0 } };
|
|
62
|
+
}
|
|
63
|
+
function windowSegments(ctx) {
|
|
64
|
+
const { width, height } = ctx.window;
|
|
65
|
+
const whole = { x: 0, y: 0, width, height };
|
|
66
|
+
if (ctx.posture.kind === "flat") return [whole];
|
|
67
|
+
const { bounds, occluding } = ctx.posture.fold;
|
|
68
|
+
const tabletop = ctx.posture.kind === "tabletop";
|
|
69
|
+
const span = tabletop ? height : width;
|
|
70
|
+
const lo = Math.min(Math.max(tabletop ? bounds.y : bounds.x, 0), span);
|
|
71
|
+
const hi = Math.min(Math.max(lo + (tabletop ? bounds.height : bounds.width), lo), span);
|
|
72
|
+
const end = occluding ? lo : (lo + hi) / 2;
|
|
73
|
+
const start = occluding ? hi : (lo + hi) / 2;
|
|
74
|
+
const parts = tabletop ? [
|
|
75
|
+
{ x: 0, y: 0, width, height: end },
|
|
76
|
+
{ x: 0, y: start, width, height: height - start }
|
|
77
|
+
] : [
|
|
78
|
+
{ x: 0, y: 0, width: end, height },
|
|
79
|
+
{ x: start, y: 0, width: width - start, height }
|
|
80
|
+
];
|
|
81
|
+
const kept = parts.filter((r) => r.width > 0 && r.height > 0);
|
|
82
|
+
return kept.length ? kept : [whole];
|
|
83
|
+
}
|
|
84
|
+
function postureFromSegments(window, segments) {
|
|
85
|
+
if (segments.length !== 2) return POSTURE_FLAT;
|
|
86
|
+
const [a, b] = [...segments].sort((p, q) => p.x - q.x || p.y - q.y);
|
|
87
|
+
const gapX = b.x - (a.x + a.width);
|
|
88
|
+
if (gapX >= 0 && a.y < b.y + b.height && b.y < a.y + a.height) {
|
|
89
|
+
return { kind: "book", fold: { bounds: { x: a.x + a.width, y: 0, width: gapX, height: window.height }, occluding: gapX > 0 } };
|
|
90
|
+
}
|
|
91
|
+
const [top, bottom] = [...segments].sort((p, q) => p.y - q.y);
|
|
92
|
+
const gapY = bottom.y - (top.y + top.height);
|
|
93
|
+
if (gapY >= 0) {
|
|
94
|
+
return { kind: "tabletop", fold: { bounds: { x: 0, y: top.y + top.height, width: window.width, height: gapY }, occluding: gapY > 0 } };
|
|
95
|
+
}
|
|
96
|
+
return POSTURE_FLAT;
|
|
97
|
+
}
|
|
98
|
+
var area = (r) => r ? r.width * r.height : 0;
|
|
99
|
+
function segmentOf(box, segments) {
|
|
100
|
+
const cx = box.x + box.width / 2;
|
|
101
|
+
const cy = box.y + box.height / 2;
|
|
102
|
+
const holding = segments.find((s) => cx >= s.x && cx < s.x + s.width && cy >= s.y && cy < s.y + s.height);
|
|
103
|
+
if (holding) return holding;
|
|
104
|
+
let best;
|
|
105
|
+
let most = 0;
|
|
106
|
+
for (const s of segments) {
|
|
107
|
+
const overlap = area(intersectRect(s, box));
|
|
108
|
+
if (overlap > most) {
|
|
109
|
+
most = overlap;
|
|
110
|
+
best = s;
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
if (best) return best;
|
|
114
|
+
let nearest;
|
|
115
|
+
let distance = Number.POSITIVE_INFINITY;
|
|
116
|
+
for (const s of segments) {
|
|
117
|
+
const d = Math.hypot(s.x + s.width / 2 - cx, s.y + s.height / 2 - cy);
|
|
118
|
+
if (d < distance) {
|
|
119
|
+
distance = d;
|
|
120
|
+
nearest = s;
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
return nearest;
|
|
124
|
+
}
|
|
125
|
+
function surfaceRegion(ctx, source) {
|
|
126
|
+
const segments = windowSegments(ctx);
|
|
127
|
+
if (source) return segmentOf(source, segments) ?? segments[0];
|
|
128
|
+
return segments.reduce((best, s) => area(s) > area(best) ? s : best, segments[0]);
|
|
129
|
+
}
|
|
130
|
+
function stepSpring(s, dt, response, damping, instant = false) {
|
|
131
|
+
if (instant) {
|
|
132
|
+
const moved = s.x !== s.target || s.v !== 0;
|
|
133
|
+
s.x = s.target;
|
|
134
|
+
s.v = 0;
|
|
135
|
+
return moved;
|
|
136
|
+
}
|
|
137
|
+
const stiffness = (2 * Math.PI / response) ** 2;
|
|
138
|
+
const friction = 4 * Math.PI * damping / response;
|
|
139
|
+
const h = 1 / 240;
|
|
140
|
+
for (let left = Math.min(dt, 0.05); left > 0; left -= h) {
|
|
141
|
+
const step = Math.min(left, h);
|
|
142
|
+
s.v += (stiffness * (s.target - s.x) - friction * s.v) * step;
|
|
143
|
+
s.x += s.v * step;
|
|
144
|
+
}
|
|
145
|
+
if (Math.abs(s.target - s.x) < 1e-3 && Math.abs(s.v) < 0.01) {
|
|
146
|
+
s.x = s.target;
|
|
147
|
+
s.v = 0;
|
|
148
|
+
return false;
|
|
149
|
+
}
|
|
150
|
+
return true;
|
|
151
|
+
}
|
|
152
|
+
var smoothstep = (e0, e1, x) => {
|
|
153
|
+
const t = Math.min(Math.max((x - e0) / (e1 - e0), 0), 1);
|
|
154
|
+
return t * t * (3 - 2 * t);
|
|
155
|
+
};
|
|
156
|
+
var mix = (a, b, t) => a + (b - a) * t;
|
|
157
|
+
var DROP_DIAMETER = 1.1;
|
|
158
|
+
var DROP_LIFT = 0.5;
|
|
159
|
+
var NECK_GAIN = 0.3;
|
|
160
|
+
var NECK_RAMP = 4;
|
|
161
|
+
var CORNER_EASE_START = 0.55;
|
|
162
|
+
var INK_OUT_END = 0.4;
|
|
163
|
+
var INK_IN_START = 0.9;
|
|
164
|
+
var INK_IN_END = 1;
|
|
165
|
+
function growthInk(phase) {
|
|
166
|
+
const a = Math.min(Math.max(phase.shrink, 0), 1);
|
|
167
|
+
const b = Math.max(phase.grow, 0);
|
|
168
|
+
return {
|
|
169
|
+
outgoing: 1 - smoothstep(0, INK_OUT_END, a),
|
|
170
|
+
incoming: smoothstep(INK_IN_START, INK_IN_END, b)
|
|
171
|
+
};
|
|
172
|
+
}
|
|
173
|
+
function largerOf(a, b) {
|
|
174
|
+
return halfMinDp(a.geometry) >= halfMinDp(b.geometry) ? { main: a, other: b } : { main: b, other: a };
|
|
175
|
+
}
|
|
176
|
+
function growthFrame(source, target, anchor, phase) {
|
|
177
|
+
const dx = target.center.x - source.center.x;
|
|
178
|
+
const dy = target.center.y - source.center.y;
|
|
179
|
+
const len = Math.hypot(dx, dy) || 1;
|
|
180
|
+
const sourceSize = halfMinDp(source.geometry) * 2;
|
|
181
|
+
const lift = DROP_LIFT * sourceSize;
|
|
182
|
+
const drop = {
|
|
183
|
+
x: source.center.x + dx / len * lift,
|
|
184
|
+
y: source.center.y + dy / len * lift
|
|
185
|
+
};
|
|
186
|
+
const a = Math.min(Math.max(phase.shrink, 0), 1);
|
|
187
|
+
const b = Math.max(phase.grow, 0);
|
|
188
|
+
const keep = Math.max(1 - b, 0);
|
|
189
|
+
const d = DROP_DIAMETER * sourceSize;
|
|
190
|
+
const shrunkGeometry = {
|
|
191
|
+
width: mix(source.geometry.width, 0.6 * d, a) * keep,
|
|
192
|
+
height: mix(source.geometry.height, 0.6 * d, a) * keep,
|
|
193
|
+
cornerRadius: 0
|
|
194
|
+
};
|
|
195
|
+
shrunkGeometry.cornerRadius = Math.min(
|
|
196
|
+
mix(source.geometry.cornerRadius, halfMinDp(shrunkGeometry), a),
|
|
197
|
+
halfMinDp(shrunkGeometry)
|
|
198
|
+
);
|
|
199
|
+
const shrunk = {
|
|
200
|
+
geometry: shrunkGeometry,
|
|
201
|
+
center: { x: mix(source.center.x, drop.x, a), y: mix(source.center.y, drop.y, a) }
|
|
202
|
+
};
|
|
203
|
+
const seed = d * Math.sqrt(a);
|
|
204
|
+
const cornerX = Math.sign(anchor.x - source.center.x);
|
|
205
|
+
const cornerY = Math.sign(anchor.y - source.center.y);
|
|
206
|
+
const edgeX = mix(drop.x + cornerX * (seed / 2), anchor.x, Math.min(b, 1));
|
|
207
|
+
const edgeY = mix(drop.y + cornerY * (seed / 2), anchor.y, Math.min(b, 1));
|
|
208
|
+
const width = mix(seed, target.geometry.width, b);
|
|
209
|
+
const height = mix(seed, target.geometry.height, b);
|
|
210
|
+
const grownGeometry = { width, height, cornerRadius: 0 };
|
|
211
|
+
grownGeometry.cornerRadius = Math.min(
|
|
212
|
+
mix(halfMinDp(grownGeometry), target.geometry.cornerRadius, smoothstep(CORNER_EASE_START, 1, b)),
|
|
213
|
+
halfMinDp(grownGeometry)
|
|
214
|
+
);
|
|
215
|
+
const grown = {
|
|
216
|
+
geometry: grownGeometry,
|
|
217
|
+
center: { x: edgeX - cornerX * (width / 2), y: edgeY - cornerY * (height / 2) }
|
|
218
|
+
};
|
|
219
|
+
const { main, other } = largerOf(grown, shrunk);
|
|
220
|
+
const neck = NECK_GAIN * sourceSize * Math.min(a * NECK_RAMP, 1) * keep;
|
|
221
|
+
const united = neck > 0.01 && other.geometry.width > 0.5 && other.geometry.height > 0.5;
|
|
222
|
+
return {
|
|
223
|
+
body: main,
|
|
224
|
+
grown,
|
|
225
|
+
merge: united ? {
|
|
226
|
+
offsetX: other.center.x - main.center.x,
|
|
227
|
+
offsetY: other.center.y - main.center.y,
|
|
228
|
+
width: other.geometry.width,
|
|
229
|
+
height: other.geometry.height,
|
|
230
|
+
cornerRadius: other.geometry.cornerRadius,
|
|
231
|
+
smoothing: neck
|
|
232
|
+
} : void 0,
|
|
233
|
+
ink: growthInk(phase)
|
|
234
|
+
};
|
|
235
|
+
}
|
|
236
|
+
var createGrowthState = () => ({
|
|
237
|
+
shrink: { x: 0, v: 0, target: 0 },
|
|
238
|
+
grow: { x: 0, v: 0, target: 0 }
|
|
239
|
+
});
|
|
240
|
+
var growthPhase = (state) => ({
|
|
241
|
+
shrink: state.shrink.x,
|
|
242
|
+
grow: state.grow.x
|
|
243
|
+
});
|
|
244
|
+
var DEFAULT_GROWTH_TIMING = {
|
|
245
|
+
shrinkOpen: 0.21,
|
|
246
|
+
shrinkClose: 0.14,
|
|
247
|
+
growOpen: 0.38,
|
|
248
|
+
growClose: 0.4,
|
|
249
|
+
growDampingOpen: 0.72
|
|
250
|
+
};
|
|
251
|
+
var GROW_DAMPING_CLOSE = 1;
|
|
252
|
+
var SHRINK_DAMPING = 1;
|
|
253
|
+
var GROW_STARTS_AT = 0.8;
|
|
254
|
+
var SHRINK_RETURNS_AT = 0.12;
|
|
255
|
+
function stepGrowth(state, dt, open, reduceMotion = false, timing = DEFAULT_GROWTH_TIMING) {
|
|
256
|
+
const { shrink, grow } = state;
|
|
257
|
+
if (reduceMotion) {
|
|
258
|
+
shrink.target = open ? 1 : 0;
|
|
259
|
+
grow.target = open ? 1 : 0;
|
|
260
|
+
} else if (open) {
|
|
261
|
+
shrink.target = 1;
|
|
262
|
+
if (shrink.x > GROW_STARTS_AT) grow.target = 1;
|
|
263
|
+
} else {
|
|
264
|
+
grow.target = 0;
|
|
265
|
+
if (grow.x < SHRINK_RETURNS_AT) shrink.target = 0;
|
|
266
|
+
}
|
|
267
|
+
const movedShrink = stepSpring(
|
|
268
|
+
shrink,
|
|
269
|
+
dt,
|
|
270
|
+
open ? timing.shrinkOpen : timing.shrinkClose,
|
|
271
|
+
SHRINK_DAMPING,
|
|
272
|
+
reduceMotion
|
|
273
|
+
);
|
|
274
|
+
const movedGrow = stepSpring(
|
|
275
|
+
grow,
|
|
276
|
+
dt,
|
|
277
|
+
open ? timing.growOpen : timing.growClose,
|
|
278
|
+
open ? timing.growDampingOpen : GROW_DAMPING_CLOSE,
|
|
279
|
+
reduceMotion
|
|
280
|
+
);
|
|
281
|
+
return movedShrink || movedGrow;
|
|
282
|
+
}
|
|
283
|
+
var CONTROL_SIZES = ["touch", "small", "medium", "large", "xlarge"];
|
|
284
|
+
var MIN_TOUCH_TARGET_DP = 44;
|
|
285
|
+
var MIN_POINTER_TARGET_DP = 24;
|
|
286
|
+
var capsule = (height, paddingX) => ({
|
|
287
|
+
height,
|
|
288
|
+
paddingX,
|
|
289
|
+
icon: Math.round(height / 2),
|
|
290
|
+
radius: height / 2,
|
|
291
|
+
shape: "capsule"
|
|
292
|
+
});
|
|
293
|
+
var rounded = (height, paddingX) => ({
|
|
294
|
+
height,
|
|
295
|
+
paddingX,
|
|
296
|
+
icon: Math.round(height / 2),
|
|
297
|
+
radius: height / 4,
|
|
298
|
+
shape: "rounded"
|
|
299
|
+
});
|
|
300
|
+
var BUTTON_SIZES = {
|
|
301
|
+
touch: capsule(44, 20),
|
|
302
|
+
small: rounded(24, 10),
|
|
303
|
+
medium: rounded(32, 14),
|
|
304
|
+
large: capsule(40, 18),
|
|
305
|
+
xlarge: capsule(48, 22)
|
|
306
|
+
};
|
|
307
|
+
function iconButtonSize(size) {
|
|
308
|
+
const spec = BUTTON_SIZES[size];
|
|
309
|
+
return { ...spec, width: spec.height, paddingX: 0 };
|
|
310
|
+
}
|
|
311
|
+
var MENU_PADDING = 0.3;
|
|
312
|
+
function menuSize(size) {
|
|
313
|
+
const spec = BUTTON_SIZES[size];
|
|
314
|
+
const padding = Math.round(spec.height * MENU_PADDING);
|
|
315
|
+
return {
|
|
316
|
+
row: spec.height,
|
|
317
|
+
padding,
|
|
318
|
+
itemRadius: spec.radius,
|
|
319
|
+
radius: spec.radius + padding,
|
|
320
|
+
icon: spec.icon,
|
|
321
|
+
labelPad: spec.paddingX
|
|
322
|
+
};
|
|
323
|
+
}
|
|
324
|
+
function nestedRadius(outerRadius, inset, minimum = 0) {
|
|
325
|
+
return concentricRadius(outerRadius, inset, minimum);
|
|
326
|
+
}
|
|
327
|
+
function defaultSize(input) {
|
|
328
|
+
return input.touch ? "touch" : "medium";
|
|
329
|
+
}
|
|
330
|
+
function hitSlop(bodyDp, minTargetDp) {
|
|
331
|
+
return bodyDp >= minTargetDp ? 0 : (minTargetDp - bodyDp) / 2;
|
|
332
|
+
}
|
|
333
|
+
function minTarget(input) {
|
|
334
|
+
return input.touch ? MIN_TOUCH_TARGET_DP : MIN_POINTER_TARGET_DP;
|
|
335
|
+
}
|
|
336
|
+
|
|
337
|
+
// src/kit/adaptive/input.ts
|
|
338
|
+
function sizeTier(input) {
|
|
339
|
+
return defaultSize({ touch: input.primary === "coarse" });
|
|
340
|
+
}
|
|
341
|
+
function hitTarget(input) {
|
|
342
|
+
return minTarget({ touch: input.anyCoarse });
|
|
343
|
+
}
|
|
344
|
+
function hoversWith(pointerType) {
|
|
345
|
+
return pointerType !== "touch";
|
|
346
|
+
}
|
|
347
|
+
var ATOM_AT_REST = {
|
|
348
|
+
pressed: 0,
|
|
349
|
+
hovered: 0,
|
|
350
|
+
selected: 0,
|
|
351
|
+
disabled: false
|
|
352
|
+
};
|
|
353
|
+
function atomLift(kind) {
|
|
354
|
+
switch (kind) {
|
|
355
|
+
case "iconButton":
|
|
356
|
+
case "switch":
|
|
357
|
+
case "slider":
|
|
358
|
+
return 1;
|
|
359
|
+
default:
|
|
360
|
+
return 0;
|
|
361
|
+
}
|
|
362
|
+
}
|
|
363
|
+
var DISABLED_PRESENCE = 0.25;
|
|
364
|
+
var HOVER_GAIN = 0.35;
|
|
365
|
+
function activation(state) {
|
|
366
|
+
if (state.disabled) return 0;
|
|
367
|
+
const clamp2 = (v) => v < 0 ? 0 : v > 1 ? 1 : v;
|
|
368
|
+
return Math.max(clamp2(state.selected), clamp2(state.pressed), clamp2(state.hovered) * HOVER_GAIN);
|
|
369
|
+
}
|
|
370
|
+
function atomMaterial(base, kind, state = ATOM_AT_REST) {
|
|
371
|
+
const out = activeMaterial(base, activation(state));
|
|
372
|
+
if (!state.disabled) return out;
|
|
373
|
+
return { ...out, presence: out.presence * DISABLED_PRESENCE };
|
|
374
|
+
}
|
|
375
|
+
function atomAtRest(state) {
|
|
376
|
+
return state.pressed === 0 && state.hovered === 0 && state.selected === 0 && state.disabled === false;
|
|
377
|
+
}
|
|
378
|
+
var REST_BODY = { alpha: 0.25, white: 0.15, lift: 0.1 };
|
|
379
|
+
var PRESSED_BODY = { alpha: 0.34, white: 0.35, lift: 0 };
|
|
380
|
+
var FROST_LIFT = 0.26;
|
|
381
|
+
function atomBody(base, state = ATOM_AT_REST, frost = false) {
|
|
382
|
+
const on = activation(state);
|
|
383
|
+
const mix2 = (key) => REST_BODY[key] + (PRESSED_BODY[key] - REST_BODY[key]) * on;
|
|
384
|
+
let alpha = mix2("alpha");
|
|
385
|
+
let white = mix2("white");
|
|
386
|
+
let lift = mix2("lift");
|
|
387
|
+
if (state.disabled) alpha *= DISABLED_PRESENCE;
|
|
388
|
+
if (frost) {
|
|
389
|
+
const density = applyAccessibility(resolveOptics(base), {
|
|
390
|
+
reduceTransparency: true,
|
|
391
|
+
increaseContrast: false,
|
|
392
|
+
reduceMotion: false
|
|
393
|
+
}).bodyDensity;
|
|
394
|
+
alpha = Math.max(alpha, density);
|
|
395
|
+
white = 0;
|
|
396
|
+
lift = FROST_LIFT;
|
|
397
|
+
}
|
|
398
|
+
return { alpha, white, lift };
|
|
399
|
+
}
|
|
400
|
+
|
|
401
|
+
// src/kit/behavior/focus.ts
|
|
402
|
+
function stepFocus(event) {
|
|
403
|
+
return event.type === "focus" && event.visible;
|
|
404
|
+
}
|
|
405
|
+
|
|
406
|
+
// src/kit/behavior/hover.ts
|
|
407
|
+
function stepHover(event, canHover) {
|
|
408
|
+
return canHover && event.type === "enter";
|
|
409
|
+
}
|
|
410
|
+
|
|
411
|
+
// src/kit/behavior/press.ts
|
|
412
|
+
var PRESS_IDLE = { by: null };
|
|
413
|
+
function stepPress(state, event, enabled2) {
|
|
414
|
+
switch (event.type) {
|
|
415
|
+
case "down":
|
|
416
|
+
if (!enabled2 || state.by !== null) return { state, activated: false };
|
|
417
|
+
return { state: { by: event.source }, activated: false };
|
|
418
|
+
case "up":
|
|
419
|
+
if (state.by !== event.source) return { state, activated: false };
|
|
420
|
+
return { state: PRESS_IDLE, activated: enabled2 };
|
|
421
|
+
case "cancel":
|
|
422
|
+
return { state: PRESS_IDLE, activated: false };
|
|
423
|
+
case "leave":
|
|
424
|
+
return state.by === "pointer" ? { state: PRESS_IDLE, activated: false } : { state, activated: false };
|
|
425
|
+
}
|
|
426
|
+
}
|
|
427
|
+
|
|
428
|
+
// src/kit/behavior/control.ts
|
|
429
|
+
var TOUCH_INPUT = { hover: false };
|
|
430
|
+
var POINTER_INPUT = { hover: true };
|
|
431
|
+
var CONTROL_IDLE = {
|
|
432
|
+
press: PRESS_IDLE,
|
|
433
|
+
hovered: false,
|
|
434
|
+
focused: false,
|
|
435
|
+
disabled: false
|
|
436
|
+
};
|
|
437
|
+
function stepControl(state, event, caps) {
|
|
438
|
+
switch (event.type) {
|
|
439
|
+
case "down":
|
|
440
|
+
case "up":
|
|
441
|
+
case "cancel": {
|
|
442
|
+
const next = stepPress(state.press, event, !state.disabled);
|
|
443
|
+
return { state: { ...state, press: next.state }, activated: next.activated };
|
|
444
|
+
}
|
|
445
|
+
case "leave": {
|
|
446
|
+
const next = stepPress(state.press, event, !state.disabled);
|
|
447
|
+
return { state: { ...state, press: next.state, hovered: false }, activated: false };
|
|
448
|
+
}
|
|
449
|
+
case "enter":
|
|
450
|
+
return {
|
|
451
|
+
state: { ...state, hovered: !state.disabled && stepHover(event, caps.hover) },
|
|
452
|
+
activated: false
|
|
453
|
+
};
|
|
454
|
+
case "focus":
|
|
455
|
+
case "blur": {
|
|
456
|
+
const press = event.type === "blur" && state.press.by === "keyboard" ? PRESS_IDLE : state.press;
|
|
457
|
+
return {
|
|
458
|
+
state: { ...state, press, focused: !state.disabled && stepFocus(event) },
|
|
459
|
+
activated: false
|
|
460
|
+
};
|
|
461
|
+
}
|
|
462
|
+
case "disable":
|
|
463
|
+
return {
|
|
464
|
+
state: event.disabled ? { press: PRESS_IDLE, hovered: false, focused: false, disabled: true } : { ...state, disabled: false },
|
|
465
|
+
activated: false
|
|
466
|
+
};
|
|
467
|
+
}
|
|
468
|
+
}
|
|
469
|
+
function controlTargets(state) {
|
|
470
|
+
return {
|
|
471
|
+
pressed: state.press.by !== null ? 1 : 0,
|
|
472
|
+
hovered: state.hovered ? 1 : 0,
|
|
473
|
+
focus: state.focused ? 1 : 0,
|
|
474
|
+
disabled: state.disabled
|
|
475
|
+
};
|
|
476
|
+
}
|
|
477
|
+
|
|
478
|
+
// src/kit/behavior/visual.ts
|
|
479
|
+
var createControlVisual = () => ({
|
|
480
|
+
pressed: { x: 0, v: 0, target: 0 },
|
|
481
|
+
hovered: { x: 0, v: 0, target: 0 },
|
|
482
|
+
focus: { x: 0, v: 0, target: 0 }
|
|
483
|
+
});
|
|
484
|
+
var PRESS = { response: 0.18, damping: 0.78 };
|
|
485
|
+
var HOVER = { response: 0.22, damping: 1 };
|
|
486
|
+
var FOCUS = { response: 0.16, damping: 1 };
|
|
487
|
+
function stepControlVisual(visual, dt, state, instant = false) {
|
|
488
|
+
const t = controlTargets(state);
|
|
489
|
+
visual.pressed.target = t.pressed;
|
|
490
|
+
visual.hovered.target = t.hovered;
|
|
491
|
+
visual.focus.target = t.focus;
|
|
492
|
+
const a = stepSpring(visual.pressed, dt, PRESS.response, PRESS.damping, instant);
|
|
493
|
+
const b = stepSpring(visual.hovered, dt, HOVER.response, HOVER.damping, instant);
|
|
494
|
+
const c = stepSpring(visual.focus, dt, FOCUS.response, FOCUS.damping, instant);
|
|
495
|
+
return a || b || c;
|
|
496
|
+
}
|
|
497
|
+
function visualAtomState(visual, state) {
|
|
498
|
+
return {
|
|
499
|
+
pressed: visual.pressed.x,
|
|
500
|
+
hovered: visual.hovered.x,
|
|
501
|
+
selected: 0,
|
|
502
|
+
disabled: state.disabled
|
|
503
|
+
};
|
|
504
|
+
}
|
|
505
|
+
function settleControlVisual(visual, state) {
|
|
506
|
+
stepControlVisual(visual, 0, state, true);
|
|
507
|
+
}
|
|
508
|
+
var MENU_CLOSED = { open: false, active: -1, typed: "", typedAt: Number.NEGATIVE_INFINITY };
|
|
509
|
+
var TYPEAHEAD_SECONDS = 0.5;
|
|
510
|
+
var exists = (items, i) => i >= 0 && i < items.length;
|
|
511
|
+
var enabled = (items, i) => exists(items, i) && !items[i].disabled;
|
|
512
|
+
var reachable = (items, i) => exists(items, i) && (items[i].focusable ?? !items[i].disabled);
|
|
513
|
+
function seek(items, from, step) {
|
|
514
|
+
const n = items.length;
|
|
515
|
+
for (let k = 1; k <= n; k += 1) {
|
|
516
|
+
const i = ((from + step * k) % n + n) % n;
|
|
517
|
+
if (reachable(items, i)) return i;
|
|
518
|
+
}
|
|
519
|
+
return -1;
|
|
520
|
+
}
|
|
521
|
+
var first = (items) => seek(items, -1, 1);
|
|
522
|
+
var last = (items) => seek(items, items.length, -1);
|
|
523
|
+
var toItem = (index) => index < 0 ? { to: "menu" } : { to: "item", index };
|
|
524
|
+
function typeahead(state, items, key, at) {
|
|
525
|
+
const fresh = at - state.typedAt > TYPEAHEAD_SECONDS;
|
|
526
|
+
const typed = (fresh ? "" : state.typed) + key.toLowerCase();
|
|
527
|
+
const repeated = typed.length > 1 && [...typed].every((c) => c === typed[0]);
|
|
528
|
+
const needle = repeated ? typed[0] : typed;
|
|
529
|
+
const start = needle.length > 1 ? state.active - 1 : state.active;
|
|
530
|
+
const n = items.length;
|
|
531
|
+
for (let k = 1; k <= n; k += 1) {
|
|
532
|
+
const i = ((start + k) % n + n) % n;
|
|
533
|
+
if (reachable(items, i) && items[i].label.trim().toLowerCase().startsWith(needle)) {
|
|
534
|
+
return { state: { ...state, active: i, typed, typedAt: at }, focus: { to: "item", index: i }, chosen: null };
|
|
535
|
+
}
|
|
536
|
+
}
|
|
537
|
+
return { state: { ...state, typed, typedAt: at }, focus: { to: "stay" }, chosen: null };
|
|
538
|
+
}
|
|
539
|
+
function stepMenu(state, event, items) {
|
|
540
|
+
const stay = { state, focus: { to: "stay" }, chosen: null };
|
|
541
|
+
if (event.type === "open") {
|
|
542
|
+
const active = event.focus === "first" ? first(items) : event.focus === "last" ? last(items) : -1;
|
|
543
|
+
return { state: { ...MENU_CLOSED, open: true, active }, focus: toItem(active), chosen: null };
|
|
544
|
+
}
|
|
545
|
+
if (!state.open) return stay;
|
|
546
|
+
switch (event.type) {
|
|
547
|
+
case "move": {
|
|
548
|
+
const active = event.to === "first" ? first(items) : event.to === "last" ? last(items) : seek(items, state.active < 0 && event.to === "previous" ? items.length : state.active, event.to === "next" ? 1 : -1);
|
|
549
|
+
if (active < 0) return stay;
|
|
550
|
+
return { state: { ...state, active, typed: "" }, focus: { to: "item", index: active }, chosen: null };
|
|
551
|
+
}
|
|
552
|
+
case "point":
|
|
553
|
+
if (!reachable(items, event.index) || event.index === state.active) return stay;
|
|
554
|
+
return { state: { ...state, active: event.index, typed: "" }, focus: { to: "item", index: event.index }, chosen: null };
|
|
555
|
+
case "type":
|
|
556
|
+
return typeahead(state, items, event.key, event.at);
|
|
557
|
+
case "choose":
|
|
558
|
+
if (!enabled(items, event.index)) return stay;
|
|
559
|
+
return { state: MENU_CLOSED, focus: { to: "trigger" }, chosen: event.index };
|
|
560
|
+
case "dismiss":
|
|
561
|
+
return { state: MENU_CLOSED, focus: event.reason === "outside" ? { to: "none" } : { to: "trigger" }, chosen: null };
|
|
562
|
+
}
|
|
563
|
+
}
|
|
564
|
+
var MENU_CORNERS = {
|
|
565
|
+
"top-left": { x: -1, y: -1 },
|
|
566
|
+
"top-right": { x: 1, y: -1 },
|
|
567
|
+
"bottom-left": { x: -1, y: 1 },
|
|
568
|
+
"bottom-right": { x: 1, y: 1 }
|
|
569
|
+
};
|
|
570
|
+
function menuCorner(trigger, region) {
|
|
571
|
+
const x0 = region.x ?? 0;
|
|
572
|
+
const y0 = region.y ?? 0;
|
|
573
|
+
return {
|
|
574
|
+
x: trigger.x + trigger.width / 2 <= x0 + region.width / 2 ? -1 : 1,
|
|
575
|
+
y: trigger.y + trigger.height / 2 <= y0 + region.height / 2 ? -1 : 1
|
|
576
|
+
};
|
|
577
|
+
}
|
|
578
|
+
function along(start, length, size, side) {
|
|
579
|
+
return side < 0 ? start : start + length - size;
|
|
580
|
+
}
|
|
581
|
+
function fits(at, size, lo, hi, margin) {
|
|
582
|
+
return at >= lo + margin && at + size <= hi - margin;
|
|
583
|
+
}
|
|
584
|
+
var clamp = (v, lo, hi) => Math.min(Math.max(v, lo), Math.max(lo, hi));
|
|
585
|
+
function menuPlacement(trigger, menu, region, options = {}) {
|
|
586
|
+
const margin = options.margin ?? 8;
|
|
587
|
+
const x0 = region.x ?? 0;
|
|
588
|
+
const y0 = region.y ?? 0;
|
|
589
|
+
const x1 = x0 + region.width;
|
|
590
|
+
const y1 = y0 + region.height;
|
|
591
|
+
const width = Math.max(0, Math.min(menu.width, region.width - 2 * margin));
|
|
592
|
+
const height = Math.max(0, Math.min(menu.height, region.height - 2 * margin));
|
|
593
|
+
const corner = { ...options.corner ?? menuCorner(trigger, region) };
|
|
594
|
+
let x = along(trigger.x, trigger.width, width, corner.x);
|
|
595
|
+
let y = along(trigger.y, trigger.height, height, corner.y);
|
|
596
|
+
if (!options.corner) {
|
|
597
|
+
const fx = along(trigger.x, trigger.width, width, corner.x === -1 ? 1 : -1);
|
|
598
|
+
if (!fits(x, width, x0, x1, margin) && fits(fx, width, x0, x1, margin)) {
|
|
599
|
+
corner.x = corner.x === -1 ? 1 : -1;
|
|
600
|
+
x = fx;
|
|
601
|
+
}
|
|
602
|
+
const fy = along(trigger.y, trigger.height, height, corner.y === -1 ? 1 : -1);
|
|
603
|
+
if (!fits(y, height, y0, y1, margin) && fits(fy, height, y0, y1, margin)) {
|
|
604
|
+
corner.y = corner.y === -1 ? 1 : -1;
|
|
605
|
+
y = fy;
|
|
606
|
+
}
|
|
607
|
+
}
|
|
608
|
+
x = clamp(x, x0 + margin, x1 - margin - width);
|
|
609
|
+
y = clamp(y, y0 + margin, y1 - margin - height);
|
|
610
|
+
const rect = { x, y, width, height };
|
|
611
|
+
return {
|
|
612
|
+
rect,
|
|
613
|
+
corner,
|
|
614
|
+
anchor: { x: corner.x < 0 ? x : x + width, y: corner.y < 0 ? y : y + height }
|
|
615
|
+
};
|
|
616
|
+
}
|
|
617
|
+
var center = (r) => ({ x: r.x + r.width / 2, y: r.y + r.height / 2 });
|
|
618
|
+
function menuActivity(phase) {
|
|
619
|
+
const shrink = Math.min(Math.max(phase.shrink, 0), 1);
|
|
620
|
+
const grow = Math.min(Math.max(phase.grow, 0), 1);
|
|
621
|
+
return shrink * (1 - grow);
|
|
622
|
+
}
|
|
623
|
+
function menuSurfaceFrame(trigger, menu, anchor, phase, bounds) {
|
|
624
|
+
const frame = growthFrame(
|
|
625
|
+
{ geometry: { width: trigger.width, height: trigger.height, cornerRadius: trigger.radius }, center: center(trigger) },
|
|
626
|
+
{ geometry: { width: menu.width, height: menu.height, cornerRadius: menu.radius }, center: center(menu) },
|
|
627
|
+
anchor,
|
|
628
|
+
phase
|
|
629
|
+
);
|
|
630
|
+
const { geometry, center: c } = frame.body;
|
|
631
|
+
let box = {
|
|
632
|
+
x: c.x - geometry.width / 2,
|
|
633
|
+
y: c.y - geometry.height / 2,
|
|
634
|
+
width: geometry.width,
|
|
635
|
+
height: geometry.height,
|
|
636
|
+
radius: geometry.cornerRadius
|
|
637
|
+
};
|
|
638
|
+
let morph = frame.merge;
|
|
639
|
+
const held = bounds ? intersectRect(box, bounds) : null;
|
|
640
|
+
if (held && (held.width < box.width || held.height < box.height)) {
|
|
641
|
+
const was = center(box);
|
|
642
|
+
const now = center(held);
|
|
643
|
+
box = { ...held, radius: Math.min(box.radius, held.width / 2, held.height / 2) };
|
|
644
|
+
if (morph) morph = { ...morph, offsetX: morph.offsetX + was.x - now.x, offsetY: morph.offsetY + was.y - now.y };
|
|
645
|
+
}
|
|
646
|
+
return {
|
|
647
|
+
box,
|
|
648
|
+
morph,
|
|
649
|
+
content: { x: menu.x - box.x, y: menu.y - box.y },
|
|
650
|
+
ink: frame.ink,
|
|
651
|
+
activity: menuActivity(phase)
|
|
652
|
+
};
|
|
653
|
+
}
|
|
654
|
+
function menuGlass(base) {
|
|
655
|
+
return { ...base, roughness: Math.max(base.roughness, VIREGLASS_SHEET_MATERIAL.roughness) };
|
|
656
|
+
}
|
|
657
|
+
function menuMaterial(base, activity) {
|
|
658
|
+
return atomMaterial(menuGlass(base), "menu", { ...ATOM_AT_REST, pressed: activity });
|
|
659
|
+
}
|
|
660
|
+
var MENU_DROP_BODY = { alpha: 0.9, white: 0.1, lift: 0.2 };
|
|
661
|
+
function menuBody(base, activity, frost = false) {
|
|
662
|
+
const rest = atomBody(base, ATOM_AT_REST, frost);
|
|
663
|
+
if (frost) return rest;
|
|
664
|
+
const k = Math.min(Math.max(activity, 0), 1);
|
|
665
|
+
const mix2 = (key) => rest[key] + (MENU_DROP_BODY[key] - rest[key]) * k;
|
|
666
|
+
return { alpha: mix2("alpha"), white: mix2("white"), lift: mix2("lift") };
|
|
667
|
+
}
|
|
668
|
+
var MENU_ITEM_FILL = { active: 0.1, pressed: 0.18 };
|
|
669
|
+
function menuItemFill(state) {
|
|
670
|
+
if (state.disabled) return 0;
|
|
671
|
+
if (state.pressed) return MENU_ITEM_FILL.pressed;
|
|
672
|
+
return state.active ? MENU_ITEM_FILL.active : 0;
|
|
673
|
+
}
|
|
674
|
+
|
|
675
|
+
// src/kit/response.ts
|
|
676
|
+
var LIFTING = { grow: 0.18, defocus: 1.6 };
|
|
677
|
+
var SINKING = { grow: 0.06, defocus: 1 };
|
|
678
|
+
function pressResponse(kind) {
|
|
679
|
+
return atomLift(kind) === 1 ? LIFTING : SINKING;
|
|
680
|
+
}
|
|
681
|
+
|
|
682
|
+
export { A11Y_NONE, ATOM_AT_REST, BUTTON_SIZES, CONTROL_IDLE, CONTROL_SIZES, DEFAULT_GROWTH_TIMING, INPUT_MIXED, INPUT_POINTER, INPUT_TABLET_KEYBOARD, INPUT_TOUCH, MENU_CLOSED, MENU_CORNERS, MENU_DROP_BODY, MENU_ITEM_FILL, MIN_POINTER_TARGET_DP, MIN_TOUCH_TARGET_DP, POINTER_INPUT, POSTURE_FLAT, PRESS_IDLE, TOUCH_INPUT, TYPEAHEAD_SECONDS, adaptiveContext, atomAtRest, atomBody, atomLift, atomMaterial, controlTargets, createControlVisual, createGrowthState, defaultSize, growthFrame, growthInk, growthPhase, halfOpen, hitSlop, hitTarget, hoversWith, iconButtonSize, intersectRect, menuActivity, menuBody, menuCorner, menuGlass, menuItemFill, menuMaterial, menuPlacement, menuSize, menuSurfaceFrame, minTarget, nestedRadius, postureFromSegments, presentationFor, pressResponse, rectContains, resolveA11y, sameA11y, segmentOf, settleControlVisual, sizeTier, smoothstep, stepControl, stepControlVisual, stepFocus, stepGrowth, stepHover, stepMenu, stepPress, stepSpring, surfaceRegion, visualAtomState, windowSegments };
|
|
683
|
+
//# sourceMappingURL=chunk-VY5MD3CX.js.map
|
|
684
|
+
//# sourceMappingURL=chunk-VY5MD3CX.js.map
|