kuinetic 0.2.1 → 0.2.3

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.
Files changed (64) hide show
  1. package/README.md +15 -8
  2. package/dist/esm/advanced/index.mjs +5 -5
  3. package/dist/esm/{chunk-U43BX5O2.mjs → chunk-FASAEQDR.mjs} +54 -7
  4. package/dist/esm/{chunk-BN2Y4UKB.mjs → chunk-FYMZW5N2.mjs} +2373 -541
  5. package/dist/esm/{chunk-RVTYN6NZ.mjs → chunk-MZQG2VMG.mjs} +208 -2
  6. package/dist/esm/core/index.mjs +21 -3
  7. package/dist/esm/effects/index.mjs +2 -2
  8. package/dist/esm/index.mjs +35 -4
  9. package/dist/esm/notes/index.mjs +1075 -0
  10. package/dist/kuinetic.advanced.js +63 -25
  11. package/dist/kuinetic.advanced.min.js +3 -3
  12. package/dist/kuinetic.all.js +2658 -538
  13. package/dist/kuinetic.all.min.js +2 -2
  14. package/dist/kuinetic.css +238 -65
  15. package/dist/kuinetic.js +2657 -537
  16. package/dist/kuinetic.min.css +1 -1
  17. package/dist/kuinetic.min.js +2 -2
  18. package/dist/kuinetic.notes.js +1 -0
  19. package/dist/types/3d/flattening.d.ts +8 -7
  20. package/dist/types/advanced/camera-3d.d.ts +0 -4
  21. package/dist/types/advanced/fluid-cursor.d.ts +0 -4
  22. package/dist/types/advanced/particles.d.ts +0 -4
  23. package/dist/types/advanced/scenes.d.ts +0 -4
  24. package/dist/types/browser/boot.d.ts +9 -4
  25. package/dist/types/core/activation.d.ts +11 -0
  26. package/dist/types/core/compile.d.ts +7 -0
  27. package/dist/types/core/deck-viewer.d.ts +87 -0
  28. package/dist/types/core/derived/types.d.ts +0 -1
  29. package/dist/types/core/describe.d.ts +174 -0
  30. package/dist/types/core/gesture.d.ts +16 -1
  31. package/dist/types/core/index.d.ts +6 -2
  32. package/dist/types/core/stagger.d.ts +1 -1
  33. package/dist/types/core/target.d.ts +28 -0
  34. package/dist/types/core/timing-contract.d.ts +61 -0
  35. package/dist/types/core/types.d.ts +59 -0
  36. package/dist/types/effects/auto-motion.d.ts +169 -0
  37. package/dist/types/effects/carousel/deck.d.ts +170 -0
  38. package/dist/types/effects/carousel/drag.d.ts +6 -0
  39. package/dist/types/effects/carousel/fit.d.ts +130 -0
  40. package/dist/types/effects/carousel/index.d.ts +6 -23
  41. package/dist/types/effects/carousel/stack.d.ts +77 -0
  42. package/dist/types/effects/catalog/interaction-reveal.d.ts +69 -9
  43. package/dist/types/effects/forms/primitives.d.ts +1 -2
  44. package/dist/types/effects/gestures/index.d.ts +3 -4
  45. package/dist/types/effects/shared.d.ts +3 -30
  46. package/dist/types/effects/step-index.d.ts +48 -10
  47. package/dist/types/effects/swipe-event.d.ts +75 -0
  48. package/dist/types/index.d.ts +26 -0
  49. package/dist/types/notes/catalog-core.d.ts +3 -0
  50. package/dist/types/notes/catalog.d.ts +3 -0
  51. package/dist/types/notes/index.d.ts +13 -0
  52. package/dist/types/notes/interaction-reveal.d.ts +3 -0
  53. package/dist/types/notes/interaction.d.ts +6 -0
  54. package/dist/types/notes/keys.d.ts +7 -0
  55. package/dist/types/notes/mechanics.d.ts +7 -0
  56. package/dist/types/notes/scroll-nav-forms.d.ts +6 -0
  57. package/dist/types/notes/shared.d.ts +6 -0
  58. package/dist/types/notes/showcase.d.ts +7 -0
  59. package/dist/types/notes/text.d.ts +3 -0
  60. package/dist/types/showcase/compare.d.ts +9 -0
  61. package/dist/types/showcase/index.d.ts +3 -0
  62. package/dist/types/showcase/lightbox.d.ts +23 -1
  63. package/dist/types/showcase/modal-shell.d.ts +11 -0
  64. package/package.json +10 -4
@@ -1,5 +1,7 @@
1
1
  import {
2
+ ALL_TIMING_TOKENS,
2
3
  ATTR,
4
+ BREAKPOINT_NAMES,
3
5
  KUI_EVENT,
4
6
  Registry,
5
7
  SEGMENT_HOIST_KEYS,
@@ -13,6 +15,7 @@ import {
13
15
  createRootResolver,
14
16
  createScrollScheduler,
15
17
  cssEasingValue,
18
+ decimalNumber,
16
19
  directionValue,
17
20
  emitLifecycle,
18
21
  gateMatches,
@@ -37,11 +40,13 @@ import {
37
40
  splitTopLevel,
38
41
  startKindOf,
39
42
  suggest,
43
+ timingContractOf,
40
44
  timingProperty,
41
45
  toMilliseconds,
46
+ validate,
42
47
  warnAboutActivation,
43
48
  warnAboutToggleActions
44
- } from "./chunk-U43BX5O2.mjs";
49
+ } from "./chunk-FASAEQDR.mjs";
45
50
  import {
46
51
  createLedgerSet
47
52
  } from "./chunk-AEQGC2KM.mjs";
@@ -900,6 +905,7 @@ function emptyPlan(unknown, warnings) {
900
905
  unknown,
901
906
  reducedMotion: "shorten",
902
907
  supportedActivations: [],
908
+ activationClaims: [],
903
909
  supportedTimelines: [],
904
910
  channels: [],
905
911
  warnings
@@ -1033,6 +1039,10 @@ function buildPlan(entries, timeline, unknown, warnings) {
1033
1039
  plan.fxNames.push(preset.name);
1034
1040
  plan.reducedMotion = strictestPolicy(plan.reducedMotion, primitive.reducedMotion);
1035
1041
  activations = intersect(activations, primitive.supportedActivations);
1042
+ plan.activationClaims.push({
1043
+ supported: primitive.supportedActivations,
1044
+ entrance: phaseOf(entry) === "entrance"
1045
+ });
1036
1046
  timelines = intersect(timelines, primitive.supportedTimelines);
1037
1047
  for (const channel of channelsFor(entry)) channels.add(channel);
1038
1048
  warnUnsupportedTimeline(preset.name, primitive.supportedTimelines, timeline, warnings);
@@ -2533,6 +2543,7 @@ var Animator = class {
2533
2543
  el,
2534
2544
  spec: resolveActivationSpec(config.activation),
2535
2545
  supported: plan.supportedActivations,
2546
+ claims: plan.activationClaims,
2536
2547
  reporter: this.reporter
2537
2548
  });
2538
2549
  return config.activation;
@@ -3436,11 +3447,206 @@ function runQuietly(cleanup) {
3436
3447
  }
3437
3448
  }
3438
3449
 
3450
+ // src/core/describe.ts
3451
+ var POSITIONAL = [
3452
+ { slot: "duration", accepts: "time" },
3453
+ { slot: "delay", accepts: "time" },
3454
+ { slot: "ease", accepts: "easing" }
3455
+ ];
3456
+ function describeEffect(registry, name, notes = {}) {
3457
+ const resolved = registry.resolve(name);
3458
+ if (!resolved) return void 0;
3459
+ const { preset, primitive } = resolved;
3460
+ const declared = primitive.parameters;
3461
+ const contract = timingContractOf(primitive);
3462
+ const honours = contract ? contract.honours ?? [] : ALL_TIMING_TOKENS;
3463
+ const positionalOrder = POSITIONAL.map((slot) => ({
3464
+ ...slot,
3465
+ ...Object.hasOwn(declared, slot.slot) ? { param: slot.slot } : {},
3466
+ honoured: honours.includes(slot.slot)
3467
+ }));
3468
+ const params = Object.entries(declared).map(([param, spec]) => {
3469
+ const override = preset.params?.[param];
3470
+ const note = findNote(spec.note, notes, [preset.name, primitive.id, "*"], param);
3471
+ return {
3472
+ name: param,
3473
+ type: spec.type,
3474
+ default: override ?? spec.default,
3475
+ presetDefault: override !== void 0,
3476
+ required: note?.required === true,
3477
+ spellings: spellingsFor(spec, override ?? spec.default),
3478
+ ...optionalFields(spec, param, note)
3479
+ };
3480
+ });
3481
+ const described = {
3482
+ name: preset.name,
3483
+ primitive: primitive.id,
3484
+ renderer: primitive.renderer,
3485
+ params,
3486
+ positionalOrder
3487
+ };
3488
+ if (contract && honours.length < ALL_TIMING_TOKENS.length) described.unhonouredBecause = contract.because;
3489
+ return described;
3490
+ }
3491
+ function optionalFields(spec, param, note) {
3492
+ const out = {};
3493
+ if (spec.keywords) out.keywords = spec.keywords;
3494
+ if (spec.minimum !== void 0) out.minimum = spec.minimum;
3495
+ if (spec.maximum !== void 0) out.maximum = spec.maximum;
3496
+ if (spec.integer) out.integer = true;
3497
+ const index = POSITIONAL.findIndex((slot) => slot.slot === param);
3498
+ if (index >= 0) out.positionalIndex = index;
3499
+ if (note) out.note = note.why;
3500
+ if (note?.whenOmitted) out.whenOmitted = note.whenOmitted;
3501
+ return out;
3502
+ }
3503
+ function describeAttribute(registry, value, notes = {}) {
3504
+ return describeSpecs(registry, parse(value).specs, notes);
3505
+ }
3506
+ function describeElementAttribute(registry, value, notes = {}) {
3507
+ const parsed = parse(value);
3508
+ const written = {};
3509
+ for (const [field, key] of Object.entries(ELEMENT_KEYS)) {
3510
+ const set = parsed[field];
3511
+ if (set !== void 0) written[key.key] = set;
3512
+ }
3513
+ return { steps: describeSpecs(registry, parsed.specs, notes), keys: describeKeys(notes), written };
3514
+ }
3515
+ function describeKeys(notes = {}) {
3516
+ const element = Object.values(ELEMENT_KEYS).map((key) => keyRow(key, "element", notes));
3517
+ return [...element, ...STEP_KEY_LIST.map((key) => keyRow(key, "step", notes))];
3518
+ }
3519
+ function describeSpecs(registry, specs, notes) {
3520
+ return specs.map((spec) => {
3521
+ const written = { written: writtenArgs(spec), writtenKeys: writtenStepKeys(spec) };
3522
+ const described = describeEffect(registry, spec.name, notes);
3523
+ if (described) return { ...described, ...written };
3524
+ const suggestion = suggest(spec.name, registry.names());
3525
+ const unknown = suggestion ? { name: spec.name, unknown: true, suggestion } : { name: spec.name, unknown: true };
3526
+ return { ...unknown, ...written };
3527
+ });
3528
+ }
3529
+ function writtenArgs(spec) {
3530
+ const written = { ...spec.params };
3531
+ if (spec.duration !== void 0) written.duration = spec.duration;
3532
+ if (spec.delay !== void 0) written.delay = spec.delay;
3533
+ if (spec.easing !== void 0) written.ease = spec.easing;
3534
+ return written;
3535
+ }
3536
+ function writtenStepKeys(spec) {
3537
+ const written = {};
3538
+ if (spec.at !== void 0) written.at = spec.at;
3539
+ Object.assign(written, spec.gate);
3540
+ if (spec.repeat !== void 0) written.repeat = spec.repeat;
3541
+ if (spec.yoyo !== void 0) written.yoyo = String(spec.yoyo);
3542
+ for (const [field, value] of Object.entries(spec.hoists ?? {})) {
3543
+ written[ELEMENT_KEYS[field].key] = value;
3544
+ }
3545
+ return written;
3546
+ }
3547
+ var KEY_NOTE_OWNER = "data-kui";
3548
+ function keyRow(key, scope, notes) {
3549
+ const note = findNote(void 0, notes, [KEY_NOTE_OWNER], key.key);
3550
+ const row = {
3551
+ name: key.key,
3552
+ type: key.type,
3553
+ default: key.default,
3554
+ presetDefault: false,
3555
+ required: false,
3556
+ spellings: [...key.spellings],
3557
+ scope
3558
+ };
3559
+ if (key.keywords) row.keywords = key.keywords;
3560
+ if (note) row.note = note.why;
3561
+ if (note?.whenOmitted) row.whenOmitted = note.whenOmitted;
3562
+ return row;
3563
+ }
3564
+ var TIMELINES2 = Object.keys({ time: 0, view: 0, scroll: 0, pointer: 0, pin: 0 });
3565
+ var RM_POLICIES = Object.keys({ shorten: 0, crossfade: 0, disable: 0 });
3566
+ var ELEMENT_KEYS = {
3567
+ activation: { key: "on", type: "text", default: "", spellings: ["enter", "load", "hover", "click", "hover/unhover"] },
3568
+ actions: { key: "actions", type: "text", default: "", spellings: ["play/pause/resume/reset", "play/none/none/reset"] },
3569
+ timeline: { key: "timeline", type: "keyword", default: "", spellings: TIMELINES2, keywords: TIMELINES2 },
3570
+ threshold: { key: "threshold", type: "percentage", default: "", spellings: ["0%", "25%"] },
3571
+ cascade: { key: "cascade", type: "time", default: "", spellings: ["90ms", "0.09s"] },
3572
+ spread: { key: "spread", type: "time", default: "", spellings: ["600ms", "0.6s"] },
3573
+ order: { key: "order", type: "text", default: "", spellings: ["start", "end", "center", "edges", "random", "3"] },
3574
+ cols: { key: "cols", type: "text", default: "", spellings: ["auto", "4"] },
3575
+ along: { key: "along", type: "keyword", default: "", spellings: ["x", "y"], keywords: ["x", "y"] },
3576
+ rm: { key: "rm", type: "keyword", default: "", spellings: RM_POLICIES, keywords: RM_POLICIES },
3577
+ func: { key: "func", type: "text", default: "", spellings: ["onRevealDone"] }
3578
+ };
3579
+ var gateKey = (key) => ({
3580
+ key,
3581
+ type: "keyword",
3582
+ default: "",
3583
+ spellings: BREAKPOINT_NAMES,
3584
+ keywords: BREAKPOINT_NAMES
3585
+ });
3586
+ var STEP_KEYS = {
3587
+ at: { key: "at", type: "text", default: "", spellings: ["after", "with", "-200ms", "with+100ms"] },
3588
+ gate: { above: gateKey("above"), below: gateKey("below"), wide: gateKey("wide"), narrow: gateKey("narrow") },
3589
+ repeat: { key: "repeat", type: "text", default: "", spellings: ["infinite", "3"] },
3590
+ yoyo: { key: "yoyo", type: "keyword", default: "", spellings: ["true", "false"], keywords: ["true", "false"] }
3591
+ };
3592
+ var STEP_KEY_LIST = Object.values(STEP_KEYS).flatMap(
3593
+ (entry) => "key" in entry ? [entry] : Object.values(entry)
3594
+ );
3595
+ function findNote(inline, notes, owners, param) {
3596
+ const key = owners.map((owner) => `${owner}.${param}`).find((k) => Object.hasOwn(notes, k));
3597
+ const note = inline ?? (key === void 0 ? void 0 : notes[key]);
3598
+ if (note === void 0) return void 0;
3599
+ return typeof note === "string" ? { why: note } : note;
3600
+ }
3601
+ var NUMBER = /^-?(?:\d+(?:\.\d+)?|\.\d+)/;
3602
+ function spellingsFor(spec, fallback = spec.default) {
3603
+ const value = validate(fallback, spec).ok ? fallback.trim() : "";
3604
+ return EXAMPLES[spec.type](value, spec.keywords ?? []);
3605
+ }
3606
+ var EXAMPLES = {
3607
+ angle: (value) => angleForms(value),
3608
+ "angle|keyword": (value, keywords) => [...angleForms(keywords.includes(value) ? "" : value), ...keywords],
3609
+ keyword: (_, keywords) => [...keywords],
3610
+ time: timeForms,
3611
+ number: (value) => [value || "1"],
3612
+ percentage: (value) => [value || "50%"],
3613
+ "number|percentage": alphaForms,
3614
+ length: (value) => [value || "24px", "calc(1rem + 4px)"],
3615
+ "length|percentage": (value) => [value || "24px", "50%"],
3616
+ color: (value) => [value || "#e4f222", "rgb(228 242 34)", "currentcolor"],
3617
+ easing: (value) => [value || "ease-out", "linear", "cubic-bezier(.2, .8, .2, 1)", "spring"],
3618
+ path: () => ["M0,0L100,0"],
3619
+ text: () => []
3620
+ };
3621
+ function angleForms(value) {
3622
+ const n = NUMBER.exec(value)?.[0];
3623
+ const degrees = value.endsWith("deg") || /^-?[\d.]+d?$/.test(value);
3624
+ const base = degrees && n ? n : "45";
3625
+ const forms = [base, `${base}d`, `${base}deg`];
3626
+ return degrees || !value ? forms : [value, ...forms];
3627
+ }
3628
+ function timeForms(value) {
3629
+ const n = NUMBER.exec(value)?.[0];
3630
+ if (!n) return ["600ms", "0.6s"];
3631
+ return value.endsWith("ms") ? [value, `${decimalNumber(n, -3)}s`] : [value, `${decimalNumber(n, 3)}ms`];
3632
+ }
3633
+ function alphaForms(value) {
3634
+ const n = NUMBER.exec(value)?.[0];
3635
+ if (!n) return ["0.5", "50%"];
3636
+ return value.endsWith("%") ? [`${decimalNumber(n, -2)}`, value] : [value, `${decimalNumber(n, 2)}%`];
3637
+ }
3638
+
3439
3639
  export {
3440
3640
  detect,
3441
3641
  consoleReporter,
3442
3642
  silentReporter,
3443
3643
  collectingReporter,
3444
3644
  Animator,
3445
- createAnimator
3645
+ createAnimator,
3646
+ describeEffect,
3647
+ describeAttribute,
3648
+ describeElementAttribute,
3649
+ describeKeys,
3650
+ KEY_NOTE_OWNER,
3651
+ spellingsFor
3446
3652
  };
@@ -1,41 +1,59 @@
1
1
  import {
2
2
  Animator,
3
+ KEY_NOTE_OWNER,
3
4
  collectingReporter,
4
5
  consoleReporter,
5
6
  createAnimator,
7
+ describeAttribute,
8
+ describeEffect,
9
+ describeElementAttribute,
10
+ describeKeys,
6
11
  detect,
7
- silentReporter
8
- } from "../chunk-RVTYN6NZ.mjs";
12
+ silentReporter,
13
+ spellingsFor
14
+ } from "../chunk-MZQG2VMG.mjs";
9
15
  import {
10
16
  ATTR,
11
17
  CHANNEL,
12
18
  KUI_EVENT,
13
19
  Registry,
20
+ SUBTREE_CHANNEL,
21
+ attributeChannel,
14
22
  control,
15
23
  createActivationBinder,
16
24
  inertInstance,
17
25
  play,
18
26
  resolveActivationSpec,
19
27
  resolveTargets,
28
+ timingContractOf,
20
29
  toAttributeValue
21
- } from "../chunk-U43BX5O2.mjs";
30
+ } from "../chunk-FASAEQDR.mjs";
22
31
  import "../chunk-AEQGC2KM.mjs";
23
32
  export {
24
33
  ATTR,
25
34
  Animator,
26
35
  CHANNEL,
36
+ KEY_NOTE_OWNER,
27
37
  KUI_EVENT,
28
38
  Registry,
39
+ SUBTREE_CHANNEL,
40
+ attributeChannel,
29
41
  collectingReporter,
30
42
  consoleReporter,
31
43
  control,
32
44
  createActivationBinder,
33
45
  createAnimator,
46
+ describeAttribute,
47
+ describeEffect,
48
+ describeElementAttribute,
49
+ describeKeys,
34
50
  detect,
35
51
  inertInstance,
36
52
  play,
37
53
  resolveActivationSpec,
38
54
  resolveTargets,
39
55
  silentReporter,
56
+ spellingsFor,
57
+ timingContractOf,
40
58
  toAttributeValue
41
59
  };
@@ -17,8 +17,8 @@ import {
17
17
  registerThreeD,
18
18
  registerTween,
19
19
  registerViewTransitions
20
- } from "../chunk-BN2Y4UKB.mjs";
21
- import "../chunk-U43BX5O2.mjs";
20
+ } from "../chunk-FYMZW5N2.mjs";
21
+ import "../chunk-FASAEQDR.mjs";
22
22
  import "../chunk-AEQGC2KM.mjs";
23
23
  export {
24
24
  COMBOS,
@@ -1,30 +1,39 @@
1
1
  import {
2
2
  Animator,
3
+ KEY_NOTE_OWNER,
3
4
  collectingReporter,
4
5
  consoleReporter,
5
6
  createAnimator,
7
+ describeAttribute,
8
+ describeEffect,
9
+ describeElementAttribute,
10
+ describeKeys,
6
11
  detect,
7
- silentReporter
8
- } from "./chunk-RVTYN6NZ.mjs";
12
+ silentReporter,
13
+ spellingsFor
14
+ } from "./chunk-MZQG2VMG.mjs";
9
15
  import {
10
16
  COMBOS,
11
17
  PRESETS,
12
18
  PRIMITIVES,
13
19
  createRegistry
14
- } from "./chunk-BN2Y4UKB.mjs";
20
+ } from "./chunk-FYMZW5N2.mjs";
15
21
  import {
16
22
  ATTR,
17
23
  CHANNEL,
18
24
  KUI_EVENT,
19
25
  Registry,
26
+ SUBTREE_CHANNEL,
27
+ attributeChannel,
20
28
  control,
21
29
  createActivationBinder,
22
30
  inertInstance,
23
31
  play,
24
32
  resolveActivationSpec,
25
33
  resolveTargets,
34
+ timingContractOf,
26
35
  toAttributeValue
27
- } from "./chunk-U43BX5O2.mjs";
36
+ } from "./chunk-FASAEQDR.mjs";
28
37
  import "./chunk-AEQGC2KM.mjs";
29
38
 
30
39
  // src/index.ts
@@ -32,15 +41,28 @@ function kuinetic(options = {}) {
32
41
  return new Animator({ registry: createRegistry(), ...options });
33
42
  }
34
43
  var src_default = kuinetic;
44
+ var catalog;
45
+ function describe(name, options = {}) {
46
+ return describeEffect(options.registry ?? (catalog ??= createRegistry()), name, options.notes);
47
+ }
48
+ function describeSteps(value, options = {}) {
49
+ return describeAttribute(options.registry ?? (catalog ??= createRegistry()), value, options.notes);
50
+ }
51
+ function describeElement(value, options = {}) {
52
+ return describeElementAttribute(options.registry ?? (catalog ??= createRegistry()), value, options.notes);
53
+ }
35
54
  export {
36
55
  ATTR,
37
56
  Animator,
38
57
  CHANNEL,
39
58
  COMBOS,
59
+ KEY_NOTE_OWNER,
40
60
  KUI_EVENT,
41
61
  PRESETS,
42
62
  PRIMITIVES,
43
63
  Registry,
64
+ SUBTREE_CHANNEL,
65
+ attributeChannel,
44
66
  collectingReporter,
45
67
  consoleReporter,
46
68
  control,
@@ -48,6 +70,13 @@ export {
48
70
  createAnimator,
49
71
  createRegistry,
50
72
  src_default as default,
73
+ describe,
74
+ describeAttribute,
75
+ describeEffect,
76
+ describeElement,
77
+ describeElementAttribute,
78
+ describeKeys,
79
+ describeSteps,
51
80
  detect,
52
81
  inertInstance,
53
82
  kuinetic,
@@ -55,5 +84,7 @@ export {
55
84
  resolveActivationSpec,
56
85
  resolveTargets,
57
86
  silentReporter,
87
+ spellingsFor,
88
+ timingContractOf,
58
89
  toAttributeValue
59
90
  };