foldkit-primitives 0.10.2 → 0.12.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 +2 -1
- package/dist/device/index.d.mts.map +1 -1
- package/dist/device/index.mjs.map +1 -1
- package/dist/dom/index.d.mts +469 -2
- package/dist/dom/index.d.mts.map +1 -1
- package/dist/dom/index.mjs +1086 -2
- package/dist/dom/index.mjs.map +1 -1
- package/dist/{editable-text-Dvm-Fuqs.d.mts → editable-text-1D31qthY.d.mts} +12 -4
- package/dist/{editable-text-Dvm-Fuqs.d.mts.map → editable-text-1D31qthY.d.mts.map} +1 -1
- package/dist/{follow-tab-stop-Ci1tqAIW.mjs → follow-tab-stop-Caog2qg1.mjs} +53 -12
- package/dist/follow-tab-stop-Caog2qg1.mjs.map +1 -0
- package/dist/index.d.mts +3 -3
- package/dist/index.mjs +3 -3
- package/dist/interaction/index.d.mts +1 -1
- package/dist/interaction/index.mjs +1 -1
- package/dist/net/index.d.mts.map +1 -1
- package/dist/net/index.mjs.map +1 -1
- package/package.json +3 -3
- package/dist/follow-tab-stop-Ci1tqAIW.mjs.map +0 -1
package/dist/dom/index.d.mts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { A as
|
|
1
|
+
import { A as Moved, C as TargetPressed, D as Move, E as Fact, M as ScrollLock, N as FocusScope, O as MoveEnded, P as tabbableWithin, S as TargetHovered, T as targetOf, _ as HOLD_TO_DRAG_MS, a as TextEdited, b as zoneOf, c as DRAG_THRESHOLD, d as DragFact, f as DragPlace, g as HOLD_SLOP, h as DraggedOver, i as TextCommitted, j as HideOutside, k as MoveStarted, l as DragCancelled, m as DragZone, n as EditableText, o as TextFact, p as DragStarted, r as TextCancelled, s as textOf, t as EditAsked, u as DragDropped, v as PointerDrag, w as Targets, x as TargetFact, y as boxOf } from "../editable-text-1D31qthY.mjs";
|
|
2
2
|
import { Schema, Stream } from "effect";
|
|
3
3
|
import * as Mount from "foldkit/mount";
|
|
4
4
|
import { Url } from "foldkit/url";
|
|
@@ -199,5 +199,472 @@ export declare const keepScroll: (options?: KeepScrollOptions) => Stream.Stream<
|
|
|
199
199
|
*/
|
|
200
200
|
export declare const pointedLinks: () => Stream.Stream<Url>;
|
|
201
201
|
//#endregion
|
|
202
|
-
|
|
202
|
+
//#region src/dom/fluid-hover.d.ts
|
|
203
|
+
/** The custom properties `FluidHover` writes on its container for a highlight named `name`. */
|
|
204
|
+
export declare const fluidHovered: (name: string) => {
|
|
205
|
+
readonly x: `--fk-${string}-x`;
|
|
206
|
+
readonly y: `--fk-${string}-y`;
|
|
207
|
+
readonly w: `--fk-${string}-w`;
|
|
208
|
+
readonly h: `--fk-${string}-h`;
|
|
209
|
+
/** `1` while an item is highlighted, `0` once the pointer and focus have left. */
|
|
210
|
+
readonly shown: `--fk-${string}-shown`;
|
|
211
|
+
/**
|
|
212
|
+
* `0` for the frame the highlight appears in, then `1`: a highlight's
|
|
213
|
+
* movement scales its duration by it, so it appears on its item rather
|
|
214
|
+
* than sliding in from where it last was.
|
|
215
|
+
*/
|
|
216
|
+
readonly moving: `--fk-${string}-moving`;
|
|
217
|
+
};
|
|
218
|
+
/**
|
|
219
|
+
* The attribute `FluidHover` sets on its container, to the highlight's name,
|
|
220
|
+
* while it runs: a stylist draws the highlight, and drops each item's own
|
|
221
|
+
* hover, only under it.
|
|
222
|
+
*/
|
|
223
|
+
export declare const FLUID_HOVER_ATTRIBUTE = "data-fluid-hover";
|
|
224
|
+
/** The attribute that names, inside an item, the control a press in a gap reaches. */
|
|
225
|
+
export declare const FLUID_PRESS_ATTRIBUTE = "data-fluid-press";
|
|
226
|
+
/** The attribute on the item the highlight is shown on, for what CSS draws beside it. */
|
|
227
|
+
export declare const FLUID_LIT_ATTRIBUTE = "data-fluid-lit";
|
|
228
|
+
declare const Axis: Schema.Literals<readonly ["x", "y", "xy"]>;
|
|
229
|
+
export type FluidAxis = typeof Axis.Type;
|
|
230
|
+
/**
|
|
231
|
+
* One highlight that follows the pointer across a container's items, as a
|
|
232
|
+
* Mount, with no Message and no Model: which item the pointer is nearest is
|
|
233
|
+
* presentation, known to the DOM and to no transition.
|
|
234
|
+
*
|
|
235
|
+
* The item nearest the pointer is the one highlighted, so the pointer in a gap
|
|
236
|
+
* between two items still points at one, and the highlight moves from item to
|
|
237
|
+
* item instead of blinking off between them. On the `y` axis nearness is read
|
|
238
|
+
* vertically (a list), on `x` horizontally (a strip), on `xy` both (a grid). A
|
|
239
|
+
* disabled item (`aria-disabled="true"`, `data-disabled`, `:disabled`) is never
|
|
240
|
+
* highlighted. An item reached by the keyboard (`:focus-visible`) is
|
|
241
|
+
* highlighted too; a touch highlights nothing, since there is no pointer to
|
|
242
|
+
* follow before the press.
|
|
243
|
+
*
|
|
244
|
+
* The container gets `--fk-<name>-x`, `-y`, `-w` and `-h` in pixels, relative
|
|
245
|
+
* to its scroll box like `Measure`'s, and `-shown` and `-moving` (see
|
|
246
|
+
* `fluidHovered`); a view draws the highlight as an absolutely placed child
|
|
247
|
+
* that reads them. With `gapClick`, a click in a gap presses the highlighted
|
|
248
|
+
* item: its descendant marked `data-fluid-press`, or the item itself; with
|
|
249
|
+
* `gapReach` too, only a click within that many pixels of it, as a grid of
|
|
250
|
+
* cards with wide gutters wants (Fluid Functionalism's uses 16). A popup
|
|
251
|
+
* measured before it has a layout box keeps its last complete place, and
|
|
252
|
+
* tries again for three frames, rather than drawing the highlight at zero.
|
|
253
|
+
* The item the highlight is shown on carries `data-fluid-lit`, so a style
|
|
254
|
+
* can change what sits beside it (a table hides the lines around the lit
|
|
255
|
+
* row).
|
|
256
|
+
*
|
|
257
|
+
* `follows` names the item the highlight sits on while the pointer is not
|
|
258
|
+
* moving it: a menu marks the row its keys reach (`[data-active]`), and the
|
|
259
|
+
* highlight goes there whenever that mark moves, so the keys and the pointer
|
|
260
|
+
* light the same one. `from` names the item a fresh highlight grows out of,
|
|
261
|
+
* as a tab's hover leaves the chosen tab. A highlight always fades where it
|
|
262
|
+
* is: once the pointer leaves, nothing should move. It stays only for an item
|
|
263
|
+
* the keyboard reached (`:focus-visible`), not one a click focused.
|
|
264
|
+
*/
|
|
265
|
+
export declare const FluidHover: Mount.MountDefinitionWithArgs<"FluidHover", {
|
|
266
|
+
/** The highlight's name, which names the custom properties. */
|
|
267
|
+
name: Schema.String;
|
|
268
|
+
/** The selector of an item within the container. */
|
|
269
|
+
item: Schema.String;
|
|
270
|
+
axis: Schema.Literals<readonly ["x", "y", "xy"]>;
|
|
271
|
+
gapClick: Schema.Boolean;
|
|
272
|
+
/** How far from the highlighted item, in pixels, a click in a gap still presses it. */
|
|
273
|
+
gapReach: Schema.optional<Schema.Number>;
|
|
274
|
+
/** The selector of the item the highlight sits on while the pointer is not moving it. */
|
|
275
|
+
follows: Schema.optional<Schema.String>;
|
|
276
|
+
/** The selector of the item a fresh highlight grows out of. */
|
|
277
|
+
from: Schema.optional<Schema.String>;
|
|
278
|
+
}, never>;
|
|
279
|
+
//#endregion
|
|
280
|
+
//#region src/dom/keyboard-inset.d.ts
|
|
281
|
+
/**
|
|
282
|
+
* The custom property `KeyboardInset` writes on its element: how much of the layout
|
|
283
|
+
* viewport's bottom the on-screen keyboard (or anything else the visual viewport leaves
|
|
284
|
+
* out) covers, in pixels.
|
|
285
|
+
*/
|
|
286
|
+
export declare const KEYBOARD_INSET = "--fk-keyboard-inset";
|
|
287
|
+
/**
|
|
288
|
+
* The part of the layout viewport's height below the visual viewport: what the on-screen
|
|
289
|
+
* keyboard covers. Rounded down, since a fraction of a pixel of zoom is no keyboard.
|
|
290
|
+
*/
|
|
291
|
+
export declare const keyboardInset: (view: {
|
|
292
|
+
readonly innerHeight: number;
|
|
293
|
+
readonly visualViewport: {
|
|
294
|
+
readonly height: number;
|
|
295
|
+
readonly offsetTop: number;
|
|
296
|
+
} | null;
|
|
297
|
+
}) => number;
|
|
298
|
+
/**
|
|
299
|
+
* The on-screen keyboard's height as a Mount, with no Message and no Model: where it is
|
|
300
|
+
* is the browser's. iOS Safari, and Chrome on Android unless the page asks otherwise,
|
|
301
|
+
* leave the layout viewport as it is when the keyboard opens, so a panel fixed to the
|
|
302
|
+
* screen keeps its height and its bottom under the keys. This writes `KEYBOARD_INSET` on
|
|
303
|
+
* the element, from the visual viewport's size and scroll, for a style to pad or shrink by
|
|
304
|
+
* (`var(--fk-keyboard-inset, 0px)`), and removes it when the element goes. Where there is
|
|
305
|
+
* no visual viewport it writes nothing.
|
|
306
|
+
*/
|
|
307
|
+
export declare const KeyboardInset: Mount.MountDefinitionWithArgs<"KeyboardInset", {}, never>;
|
|
308
|
+
//#endregion
|
|
309
|
+
//#region src/dom/scroll-bars.d.ts
|
|
310
|
+
/**
|
|
311
|
+
* The attribute that marks a bar beside a scroller `ScrollBars` runs on, set
|
|
312
|
+
* to the axis it shows: `block` (the up-and-down bar) or `inline`.
|
|
313
|
+
*/
|
|
314
|
+
export declare const SCROLL_BAR_ATTRIBUTE = "data-scroll-bar";
|
|
315
|
+
/**
|
|
316
|
+
* The attribute `ScrollBars` sets on its scroller while it draws the bars, so a
|
|
317
|
+
* style hides the native bar only then: with no Mount running (a coarse
|
|
318
|
+
* pointer, a page not yet hydrated) the browser's bar stays.
|
|
319
|
+
*/
|
|
320
|
+
export declare const SCROLL_OVERLAID_ATTRIBUTE = "data-scroll-overlaid";
|
|
321
|
+
/**
|
|
322
|
+
* The custom properties `ScrollBars` writes on each bar, in pixels, for its
|
|
323
|
+
* thumb to read: how far along the bar the thumb starts, and how long it is.
|
|
324
|
+
* Physical: an inline bar's offset is from its left edge in either direction.
|
|
325
|
+
*/
|
|
326
|
+
export declare const scrollThumb: {
|
|
327
|
+
readonly offset: '--fk-scroll-thumb-offset';
|
|
328
|
+
readonly size: '--fk-scroll-thumb-size';
|
|
329
|
+
};
|
|
330
|
+
/**
|
|
331
|
+
* An overlay scrollbar as a Mount, with no Message and no Model: where a
|
|
332
|
+
* scroller is scrolled is the browser's, and the bar only shows it.
|
|
333
|
+
*
|
|
334
|
+
* It runs on the scroller (or on an element holding it, named by `scroller`,
|
|
335
|
+
* when the scroller carries another Mount) and drives the bars drawn beside
|
|
336
|
+
* it: the scroller's parent's children marked `data-scroll-bar` (`block` or
|
|
337
|
+
* `inline`), which a style lays over the scroller's edge. Each bar gets `data-scrollable` while its axis has
|
|
338
|
+
* more to scroll, `data-shown` while the scroller scrolls or the pointer moves
|
|
339
|
+
* over it, until `idle` milliseconds pass with neither (or longer, while the
|
|
340
|
+
* pointer rests on a bar), and `data-dragging` while its thumb is dragged; and
|
|
341
|
+
* `--fk-scroll-thumb-offset` and `-size` (see `scrollThumb`). Pressing a bar
|
|
342
|
+
* off its thumb moves the thumb there, then drags it.
|
|
343
|
+
*
|
|
344
|
+
* It does nothing where the primary pointer is coarse or cannot hover, decided
|
|
345
|
+
* when it mounts: touch keeps the browser's bar and its physics. Otherwise the
|
|
346
|
+
* scroller gets `data-scroll-overlaid`, for a style to hide the native bar.
|
|
347
|
+
* How the bar looks, rests, widens and fades is the style's.
|
|
348
|
+
*/
|
|
349
|
+
export declare const ScrollBars: Mount.MountDefinitionWithArgs<"ScrollBars", {
|
|
350
|
+
/** How long, in milliseconds, the bars stay after the last scroll or move. Default 600. */
|
|
351
|
+
idle: Schema.optional<Schema.Number>;
|
|
352
|
+
/**
|
|
353
|
+
* The scroller, as a selector within the element, when it cannot hold this
|
|
354
|
+
* Mount itself (another component's, with a Mount of its own); looked for
|
|
355
|
+
* once, when it mounts. Default: the element is the scroller.
|
|
356
|
+
*/
|
|
357
|
+
scroller: Schema.optional<Schema.String>;
|
|
358
|
+
}, never>;
|
|
359
|
+
//#endregion
|
|
360
|
+
//#region src/dom/swipe.d.ts
|
|
361
|
+
export declare const SwipeStarted: Schema.TaggedStruct<"SwipeStarted", {
|
|
362
|
+
readonly pointerId: Schema.Number;
|
|
363
|
+
readonly pointerType: Schema.String;
|
|
364
|
+
/** The border box of what `measure` names (the element itself by default), as the swipe starts. */
|
|
365
|
+
readonly width: Schema.Number;
|
|
366
|
+
readonly height: Schema.Number;
|
|
367
|
+
}>;
|
|
368
|
+
export type SwipeStarted = typeof SwipeStarted.Type;
|
|
369
|
+
export declare const Swiped: Schema.TaggedStruct<"Swiped", {
|
|
370
|
+
readonly pointerId: Schema.Number;
|
|
371
|
+
/** From where the pointer went down, in CSS pixels. */
|
|
372
|
+
readonly deltaX: Schema.Number;
|
|
373
|
+
readonly deltaY: Schema.Number;
|
|
374
|
+
}>;
|
|
375
|
+
export type Swiped = typeof Swiped.Type;
|
|
376
|
+
export declare const SwipeEnded: Schema.TaggedStruct<"SwipeEnded", {
|
|
377
|
+
readonly pointerId: Schema.Number;
|
|
378
|
+
/** From where the pointer went down to where it came up, in CSS pixels. */
|
|
379
|
+
readonly deltaX: Schema.Number;
|
|
380
|
+
readonly deltaY: Schema.Number;
|
|
381
|
+
/**
|
|
382
|
+
* How fast the pointer was moving as it came up, in pixels a millisecond,
|
|
383
|
+
* over the last `SWIPE_WINDOW` milliseconds: 0 when it rested there first.
|
|
384
|
+
*/
|
|
385
|
+
readonly velocityX: Schema.Number;
|
|
386
|
+
readonly velocityY: Schema.Number;
|
|
387
|
+
/** `false` when the pointer was cancelled or capture was lost. */
|
|
388
|
+
readonly completed: Schema.Boolean;
|
|
389
|
+
}>;
|
|
390
|
+
export type SwipeEnded = typeof SwipeEnded.Type;
|
|
391
|
+
export type SwipeFact = SwipeStarted | Swiped | SwipeEnded;
|
|
392
|
+
/** How far back, in milliseconds, the release velocity looks. */
|
|
393
|
+
export declare const SWIPE_WINDOW = 100;
|
|
394
|
+
interface Sample {
|
|
395
|
+
readonly at: number;
|
|
396
|
+
readonly x: number;
|
|
397
|
+
readonly y: number;
|
|
398
|
+
}
|
|
399
|
+
/**
|
|
400
|
+
* The velocity of the samples within `SWIPE_WINDOW` of the last: the way
|
|
401
|
+
* from the oldest of them to the last over the time between. A pointer that
|
|
402
|
+
* came to rest before the last sample has no recent way to measure, so 0.
|
|
403
|
+
*/
|
|
404
|
+
export declare const velocityOf: (samples: ReadonlyArray<Sample>) => {
|
|
405
|
+
x: number;
|
|
406
|
+
y: number;
|
|
407
|
+
};
|
|
408
|
+
/**
|
|
409
|
+
* `Move` with the speed of its release, for a gesture that a flick ends
|
|
410
|
+
* (a sheet dragged to dismiss, a card swiped away): a primary-button pointer
|
|
411
|
+
* down captures the pointer, each move reports the delta from where it
|
|
412
|
+
* started, and up reports the last delta with the velocity over the last
|
|
413
|
+
* `SWIPE_WINDOW` milliseconds, by the events' own time stamps. Cancel or
|
|
414
|
+
* lost capture ends it incomplete. The start reports the size of what is
|
|
415
|
+
* moved, so a distance can be read as a share of it. What a delta or a speed
|
|
416
|
+
* means is the parent's `update`. Capture is released with the Mount.
|
|
417
|
+
*/
|
|
418
|
+
export declare const Swipe: Mount.MountDefinitionWithArgs<"Swipe", {
|
|
419
|
+
/**
|
|
420
|
+
* The nearest ancestor matching this selector is measured as the swipe
|
|
421
|
+
* starts, for what the swipe moves (a sheet's panel, dragged by its
|
|
422
|
+
* handle). Default: the element itself.
|
|
423
|
+
*/
|
|
424
|
+
measure: Schema.optional<Schema.String>;
|
|
425
|
+
}, {
|
|
426
|
+
readonly _tag: "SwipeStarted";
|
|
427
|
+
readonly pointerId: number;
|
|
428
|
+
readonly pointerType: string;
|
|
429
|
+
readonly width: number;
|
|
430
|
+
readonly height: number;
|
|
431
|
+
} | {
|
|
432
|
+
readonly _tag: "Swiped";
|
|
433
|
+
readonly pointerId: number;
|
|
434
|
+
readonly deltaX: number;
|
|
435
|
+
readonly deltaY: number;
|
|
436
|
+
} | {
|
|
437
|
+
readonly _tag: "SwipeEnded";
|
|
438
|
+
readonly pointerId: number;
|
|
439
|
+
readonly deltaX: number;
|
|
440
|
+
readonly deltaY: number;
|
|
441
|
+
readonly velocityX: number;
|
|
442
|
+
readonly velocityY: number;
|
|
443
|
+
readonly completed: boolean;
|
|
444
|
+
}>;
|
|
445
|
+
//#endregion
|
|
446
|
+
//#region src/dom/scroll-settle.d.ts
|
|
447
|
+
export declare const ScrollSettled: Schema.TaggedStruct<"ScrollSettled", {
|
|
448
|
+
/** The item whose start lies nearest the scroller's start, from 0. */
|
|
449
|
+
readonly index: Schema.Number;
|
|
450
|
+
}>;
|
|
451
|
+
export type ScrollSettled = typeof ScrollSettled.Type;
|
|
452
|
+
/** How long a scroll must be still to count as settled, where `scrollend` is missing. */
|
|
453
|
+
export declare const SETTLE_QUIET = 120;
|
|
454
|
+
/**
|
|
455
|
+
* Hears a scroller come to rest, as a Mount: after a swipe, a fling, a
|
|
456
|
+
* trackpad or a scroll a Command made, it reports which of its items starts
|
|
457
|
+
* nearest its own start (inside its `scroll-padding`), the start being the
|
|
458
|
+
* right edge right to left. A snapping carousel reads it as the slide shown.
|
|
459
|
+
*
|
|
460
|
+
* At insert it first scrolls, at once, to item `start` (the Mount's args are
|
|
461
|
+
* read only then, so this is where a redrawn or restored scroller begins),
|
|
462
|
+
* and reports where it lies, since a scroller drawn already at rest sends no
|
|
463
|
+
* `scrollend`. It listens for `scrollend` where the browser has it, and
|
|
464
|
+
* otherwise for a scroll that is quiet for `SETTLE_QUIET` milliseconds.
|
|
465
|
+
*/
|
|
466
|
+
export declare const ScrollSettle: Mount.MountDefinitionWithArgs<"ScrollSettle", {
|
|
467
|
+
/** Which children are the items; default every child. */
|
|
468
|
+
item: Schema.optional<Schema.String>;
|
|
469
|
+
/** Default `inline`, the row a carousel scrolls along. */
|
|
470
|
+
axis: Schema.optional<Schema.Literals<readonly ["inline", "block"]>>;
|
|
471
|
+
/** The item to scroll to at insert; default the first, which needs no scroll. */
|
|
472
|
+
start: Schema.optional<Schema.Number>;
|
|
473
|
+
}, {
|
|
474
|
+
readonly _tag: "ScrollSettled";
|
|
475
|
+
readonly index: number;
|
|
476
|
+
}>;
|
|
477
|
+
//#endregion
|
|
478
|
+
//#region src/dom/pointer-position.d.ts
|
|
479
|
+
/**
|
|
480
|
+
* A place in an element's padding box, in CSS pixels from its top left
|
|
481
|
+
* corner, and the pointer's pressure there (0 to 1; a mouse reads 0.5 while
|
|
482
|
+
* a button is down). A captured pointer can be outside the box, so `x` and
|
|
483
|
+
* `y` can be negative or past its size.
|
|
484
|
+
*/
|
|
485
|
+
export declare const PointerPoint: Schema.Struct<{
|
|
486
|
+
readonly x: Schema.Number;
|
|
487
|
+
readonly y: Schema.Number;
|
|
488
|
+
readonly pressure: Schema.Number;
|
|
489
|
+
}>;
|
|
490
|
+
export type PointerPoint = typeof PointerPoint.Type;
|
|
491
|
+
export declare const PointerPressed: Schema.TaggedStruct<"PointerPressed", {
|
|
492
|
+
readonly width: Schema.Number;
|
|
493
|
+
readonly height: Schema.Number;
|
|
494
|
+
readonly point: Schema.Struct<{
|
|
495
|
+
readonly x: Schema.Number;
|
|
496
|
+
readonly y: Schema.Number;
|
|
497
|
+
readonly pressure: Schema.Number;
|
|
498
|
+
}>;
|
|
499
|
+
/** `mouse`, `pen` or `touch`, as the browser names it. */
|
|
500
|
+
readonly pointerType: Schema.String;
|
|
501
|
+
}>;
|
|
502
|
+
export type PointerPressed = typeof PointerPressed.Type;
|
|
503
|
+
export declare const PointerMoved: Schema.TaggedStruct<"PointerMoved", {
|
|
504
|
+
readonly width: Schema.Number;
|
|
505
|
+
readonly height: Schema.Number;
|
|
506
|
+
/** Where the pointer is now. */
|
|
507
|
+
readonly point: Schema.Struct<{
|
|
508
|
+
readonly x: Schema.Number;
|
|
509
|
+
readonly y: Schema.Number;
|
|
510
|
+
readonly pressure: Schema.Number;
|
|
511
|
+
}>;
|
|
512
|
+
/**
|
|
513
|
+
* Every place it passed since the last move, ending with `point`: the
|
|
514
|
+
* browser's coalesced events, so a fast stroke keeps its curve. Just
|
|
515
|
+
* `point` where the browser coalesces none.
|
|
516
|
+
*/
|
|
517
|
+
readonly points: Schema.$Array<Schema.Struct<{
|
|
518
|
+
readonly x: Schema.Number;
|
|
519
|
+
readonly y: Schema.Number;
|
|
520
|
+
readonly pressure: Schema.Number;
|
|
521
|
+
}>>;
|
|
522
|
+
}>;
|
|
523
|
+
export type PointerMoved = typeof PointerMoved.Type;
|
|
524
|
+
export declare const PointerReleased: Schema.TaggedStruct<"PointerReleased", {
|
|
525
|
+
/** `false` when the pointer was cancelled, lost its capture, or pressed again unreleased. */
|
|
526
|
+
readonly completed: Schema.Boolean;
|
|
527
|
+
}>;
|
|
528
|
+
export type PointerReleased = typeof PointerReleased.Type;
|
|
529
|
+
export type PointerFact = PointerPressed | PointerMoved | PointerReleased;
|
|
530
|
+
interface Sides {
|
|
531
|
+
readonly top: number;
|
|
532
|
+
readonly right: number;
|
|
533
|
+
readonly bottom: number;
|
|
534
|
+
readonly left: number;
|
|
535
|
+
}
|
|
536
|
+
export interface Rect {
|
|
537
|
+
readonly left: number;
|
|
538
|
+
readonly top: number;
|
|
539
|
+
readonly width: number;
|
|
540
|
+
readonly height: number;
|
|
541
|
+
}
|
|
542
|
+
/**
|
|
543
|
+
* The padding box of an element whose border box is `rect`: inside its
|
|
544
|
+
* border, padding included. An absolutely positioned child (a thumb, a
|
|
545
|
+
* stroke) is laid out against it, so a place read here is where that child
|
|
546
|
+
* sits, whatever padding a stylist adds.
|
|
547
|
+
*/
|
|
548
|
+
export declare const paddingBoxOf: (layout: {
|
|
549
|
+
readonly rect: Rect;
|
|
550
|
+
readonly border: Sides;
|
|
551
|
+
}) => Rect;
|
|
552
|
+
/**
|
|
553
|
+
* An element's padding box now, in the viewport, as `PointerPosition`
|
|
554
|
+
* measures it: for a size kept beside its places, which a `ResizeObserver`'s
|
|
555
|
+
* content box does not match once the element has padding. Read from the
|
|
556
|
+
* bounding rectangle and the computed border, since `clientWidth` and
|
|
557
|
+
* `clientLeft` round to whole pixels.
|
|
558
|
+
*/
|
|
559
|
+
export declare const measurePaddingBox: (element: Element) => Rect;
|
|
560
|
+
/**
|
|
561
|
+
* Where one pointer is inside an element, as a Mount, for a surface the
|
|
562
|
+
* pointer draws on or points into (a color area, a dial, a signature pad): a
|
|
563
|
+
* primary press, each move until the release, and the release, each with
|
|
564
|
+
* the place in the element's padding box and the box's size. The box is
|
|
565
|
+
* measured at each event, so an element that moved or resized is followed.
|
|
566
|
+
* Coordinates are raw, left to right and top down whatever the direction:
|
|
567
|
+
* what a place means (a share, an angle, a reading direction) is the parent's.
|
|
568
|
+
*
|
|
569
|
+
* The pointer is captured from press to release, so a drag that leaves the
|
|
570
|
+
* element is still heard, and the moves and the release are listened to only
|
|
571
|
+
* meanwhile. A press keeps the browser's own focus and text selection away,
|
|
572
|
+
* and a second pointer while one is down is ignored.
|
|
573
|
+
*/
|
|
574
|
+
export declare const PointerPosition: Mount.MountDefinitionWithArgs<"PointerPosition", {
|
|
575
|
+
/**
|
|
576
|
+
* A descendant to focus on a press, found by this selector (a thumb), so
|
|
577
|
+
* the keys go on from where the pointer left it.
|
|
578
|
+
*/
|
|
579
|
+
focus: Schema.optionalKey<Schema.String>;
|
|
580
|
+
}, {
|
|
581
|
+
readonly _tag: "PointerPressed";
|
|
582
|
+
readonly width: number;
|
|
583
|
+
readonly height: number;
|
|
584
|
+
readonly point: {
|
|
585
|
+
readonly x: number;
|
|
586
|
+
readonly y: number;
|
|
587
|
+
readonly pressure: number;
|
|
588
|
+
};
|
|
589
|
+
readonly pointerType: string;
|
|
590
|
+
} | {
|
|
591
|
+
readonly _tag: "PointerMoved";
|
|
592
|
+
readonly width: number;
|
|
593
|
+
readonly height: number;
|
|
594
|
+
readonly point: {
|
|
595
|
+
readonly x: number;
|
|
596
|
+
readonly y: number;
|
|
597
|
+
readonly pressure: number;
|
|
598
|
+
};
|
|
599
|
+
readonly points: readonly {
|
|
600
|
+
readonly x: number;
|
|
601
|
+
readonly y: number;
|
|
602
|
+
readonly pressure: number;
|
|
603
|
+
}[];
|
|
604
|
+
} | {
|
|
605
|
+
readonly _tag: "PointerReleased";
|
|
606
|
+
readonly completed: boolean;
|
|
607
|
+
}>;
|
|
608
|
+
//#endregion
|
|
609
|
+
//#region src/dom/track-box.d.ts
|
|
610
|
+
/** The attribute on the mounted element naming the element `TrackBox` follows, by id. */
|
|
611
|
+
export declare const TRACK_TARGET_ATTRIBUTE = "data-target";
|
|
612
|
+
/** The custom properties `TrackBox` writes for `name`, as `measured` names `Measure`'s. */
|
|
613
|
+
export declare const trackedBox: (name: string) => {
|
|
614
|
+
readonly x: `--fk-${string}-x`;
|
|
615
|
+
readonly y: `--fk-${string}-y`;
|
|
616
|
+
readonly w: `--fk-${string}-w`;
|
|
617
|
+
readonly h: `--fk-${string}-h`;
|
|
618
|
+
readonly radius: `--fk-${string}-radius`;
|
|
619
|
+
};
|
|
620
|
+
/** Sent as the followed element changes: its id, and whether it is on the page. */
|
|
621
|
+
export declare const TrackedTarget: Schema.TaggedStruct<"TrackedTarget", {
|
|
622
|
+
readonly target: Schema.String;
|
|
623
|
+
readonly found: Schema.Boolean;
|
|
624
|
+
}>;
|
|
625
|
+
export type TrackedTarget = typeof TrackedTarget.Type;
|
|
626
|
+
/**
|
|
627
|
+
* The radius a box of `width` by `height` draws for a computed
|
|
628
|
+
* `border-top-left-radius` of `value` (`8px`, `50%`, `8px 4px`): its
|
|
629
|
+
* horizontal length in pixels, a share of the width for a percentage, and
|
|
630
|
+
* never more than half the shorter side, where the browser stops it.
|
|
631
|
+
*/
|
|
632
|
+
export declare const cornerRadius: (value: string, width: number, height: number) => number;
|
|
633
|
+
/**
|
|
634
|
+
* Follows another element's box, as a Mount: the element whose id is the
|
|
635
|
+
* mounted element's `data-target` (`TRACK_TARGET_ATTRIBUTE`). Its box in
|
|
636
|
+
* viewport pixels is written on the mounted element as `--fk-<name>-x`,
|
|
637
|
+
* `-y`, `-w` and `-h`, and with `radius`, its top left corner's radius as
|
|
638
|
+
* `--fk-<name>-radius` (`cornerRadius`), so a fixed overlay drawn from them
|
|
639
|
+
* (a tour's cutout, a coach mark's ring) sits over it. While nothing is
|
|
640
|
+
* followed they are removed, so a stylist's fallbacks apply.
|
|
641
|
+
*
|
|
642
|
+
* The box is read again on a scroll anywhere (heard on the way down, since
|
|
643
|
+
* `scroll` does not bubble), a window resize, the followed element's own
|
|
644
|
+
* resize, and any change to the document's elements, which is also how a
|
|
645
|
+
* target drawn anew under the same id is found. `data-target` is read again
|
|
646
|
+
* whenever it changes, so one element can glide from target to target
|
|
647
|
+
* without being drawn again, which a Mount's args, read once, could not do.
|
|
648
|
+
* What moves the target by any other way (a stylesheet added) is seen at the
|
|
649
|
+
* next of these.
|
|
650
|
+
*
|
|
651
|
+
* Whether a target is on the page is the parent's to act on (a tour shows
|
|
652
|
+
* the step in the middle instead), so each change of the target or of
|
|
653
|
+
* whether it is found sends `TrackedTarget`, starting with the first one.
|
|
654
|
+
* Since it sends a Message, a component may draw it by default: a Scene test
|
|
655
|
+
* resolves it with what the parent maps it to. An empty `data-target` follows
|
|
656
|
+
* nothing and sends nothing.
|
|
657
|
+
*/
|
|
658
|
+
export declare const TrackBox: Mount.MountDefinitionWithArgs<"TrackBox", {
|
|
659
|
+
/** The custom properties' prefix: `tour` writes `--fk-tour-x`. */
|
|
660
|
+
name: Schema.String;
|
|
661
|
+
/** Whether to write the target's corner radius too; it reads the target's computed style. */
|
|
662
|
+
radius: Schema.optional<Schema.Boolean>;
|
|
663
|
+
}, {
|
|
664
|
+
readonly _tag: "TrackedTarget";
|
|
665
|
+
readonly target: string;
|
|
666
|
+
readonly found: boolean;
|
|
667
|
+
}>;
|
|
668
|
+
//#endregion
|
|
669
|
+
export { DRAG_THRESHOLD, DragCancelled, DragDropped, DragFact, DragPlace, DragStarted, DragZone, DraggedOver, EditAsked, EditableText, Fact, FocusScope, HOLD_SLOP, HOLD_TO_DRAG_MS, HideOutside, Move, MoveEnded, MoveStarted, Moved, PointerDrag, ScrollLock, TargetFact, TargetHovered, TargetPressed, Targets, TextCancelled, TextCommitted, TextEdited, TextFact, boxOf, tabbableWithin, targetOf, textOf, zoneOf };
|
|
203
670
|
//# sourceMappingURL=index.d.mts.map
|
package/dist/dom/index.d.mts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.mts","names":[],"sources":["../../src/dom/autofocus.ts","../../src/dom/clipboard.ts","../../src/dom/input-mask.ts","../../src/dom/keep-in-view.ts","../../src/dom/script-loader.ts","../../src/dom/share.ts","../../src/dom/measure.ts","../../src/dom/follow-tab-stop.ts","../../src/dom/scroll.ts","../../src/dom/pointed-links.ts"],"mappings":";;;;;;qBAGa,SAAO,OAAA;YACR,iBAAiB,QAAQ;;;;;;;;qBASxB,WAAS,MAAA;;;;;qBCJT,4CAAgB;;;IAEb,SAAO,OAAA;;;YAEX,0BAA0B,iBAAiB;qBAE1C,gDAAoB;;IACvB,MAAI,OAAA;;;IACE,SAAO,OAAA;;;YAEX,8BAA8B,qBAAqB;;;;;;qBAUlD,WAAQ,iBAAmB,QAAQ;;;;;qBAsBnC,gBAAe,QAAQ;;;;qBC/CvB,OAAK,OAAA;;;;YAIN,eAAe,MAAM;;;;;;;qBAiCpB,YAAS,eACP;WAED;WAAyB;;;;;;;;;;;qBA6C1B,WAAS,MAAA;WAAT,OAAA;;;;;;;;;;;;;;;;;qBC7EA,YAAU,MAAA;;YAAV,OAAA;;;;qBCDA,yCAAa;;;IAEV,SAAO,OAAA;;;YAEX,uBAAuB,cAAc;;qBASpC,aAAU,gBAAkB,QAAQ;;;qBCbpC,WAAS,OAAA;;;;;YAKV,mBAAmB,UAAU;qBAE5B,wCAAY;;;;IAGR,SAAO,OAAA;;;YAEZ,sBAAsB,aAAa;;qBAUlC,QAAK,MAAU,cAAY,QAAQ;;;;qBC7BnC,WAAQ;WAEjB;WACA;WACA;WACA;WACA;;;;;;;;;;;;;;;;;;;;;qBAsBS,SAAO,MAAA;;;;;;;;;;;;;;qBCrBP,eAAa,MAAA;;;;iBCuBT;;WAEN;;WAEA;;;;;WAKA;;;;;;;;qBAuHE,aAAU,UAAa,sBAAyB,OAAO;;;;;;;;;;qBCvJvD,oBAAmB,OAAO,OAAO"}
|
|
1
|
+
{"version":3,"file":"index.d.mts","names":[],"sources":["../../src/dom/autofocus.ts","../../src/dom/clipboard.ts","../../src/dom/input-mask.ts","../../src/dom/keep-in-view.ts","../../src/dom/script-loader.ts","../../src/dom/share.ts","../../src/dom/measure.ts","../../src/dom/follow-tab-stop.ts","../../src/dom/scroll.ts","../../src/dom/pointed-links.ts","../../src/dom/fluid-hover.ts","../../src/dom/keyboard-inset.ts","../../src/dom/scroll-bars.ts","../../src/dom/swipe.ts","../../src/dom/scroll-settle.ts","../../src/dom/pointer-position.ts","../../src/dom/track-box.ts"],"mappings":"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"}
|