@steppy/player 0.0.0-stage → 0.4.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/LICENSE +202 -0
- package/NOTICE +9 -0
- package/README.md +190 -2
- package/THIRD_PARTY_LICENSES.txt +158 -0
- package/dist/steppy-cursor-legacy.js +2 -0
- package/dist/steppy-cursor-legacy.js.map +1 -0
- package/dist/steppy-player.js +5419 -0
- package/dist/steppy-player.js.map +1 -0
- package/dist/steppy-tour.js +2164 -0
- package/dist/steppy-tour.js.map +1 -0
- package/dist/steppy-video.js +472 -0
- package/dist/steppy-video.js.map +1 -0
- package/dist/types/cursor/animator.d.ts +135 -0
- package/dist/types/cursor/types.d.ts +61 -0
- package/dist/types/i18n/ui-strings.d.ts +48 -0
- package/dist/types/index.d.ts +10 -0
- package/dist/types/interaction/positioning.d.ts +22 -0
- package/dist/types/manifest/content.d.ts +24 -0
- package/dist/types/manifest/index.d.ts +3 -0
- package/dist/types/manifest/parse.d.ts +23 -0
- package/dist/types/manifest/schema.d.ts +2895 -0
- package/dist/types/steppy-guide.d.ts +195 -0
- package/dist/types/templates/base-styles.d.ts +15 -0
- package/dist/types/templates/controls.d.ts +17 -0
- package/dist/types/templates/index.d.ts +23 -0
- package/dist/types/templates/inline.d.ts +10 -0
- package/dist/types/templates/overlay.d.ts +10 -0
- package/dist/types/templates/sidebar.d.ts +19 -0
- package/dist/types/templates/types.d.ts +76 -0
- package/dist/types/tour/api.d.ts +54 -0
- package/dist/types/tour/contract.d.ts +54 -0
- package/dist/types/tour/dom.d.ts +43 -0
- package/dist/types/tour/engine.d.ts +157 -0
- package/dist/types/tour/events.d.ts +42 -0
- package/dist/types/tour/host.d.ts +153 -0
- package/dist/types/tour/index.d.ts +15 -0
- package/dist/types/tour/layer.d.ts +16 -0
- package/dist/types/tour/loader.d.ts +70 -0
- package/dist/types/tour/resolver.d.ts +30 -0
- package/dist/types/tour/routes.d.ts +40 -0
- package/dist/types/tour/signature.d.ts +16 -0
- package/dist/types/tour/storage.d.ts +28 -0
- package/dist/types/tour/strings.d.ts +42 -0
- package/dist/types/tour/styles.d.ts +13 -0
- package/dist/types/tour/templates.d.ts +47 -0
- package/dist/types/tour/tracker.d.ts +45 -0
- package/dist/types/tour/triggers.d.ts +52 -0
- package/dist/types/tour/validate.d.ts +82 -0
- package/dist/types/ui/markdown.d.ts +58 -0
- package/dist/types/ui/names.d.ts +18 -0
- package/dist/types/ui/placement.d.ts +59 -0
- package/dist/types/ui/strings.d.ts +31 -0
- package/dist/types/ui/tokens.d.ts +57 -0
- package/package.json +70 -4
- package/schema/README.md +19 -0
- package/schema/guide.schema.json +427 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,202 @@
|
|
|
1
|
+
|
|
2
|
+
Apache License
|
|
3
|
+
Version 2.0, January 2004
|
|
4
|
+
http://www.apache.org/licenses/
|
|
5
|
+
|
|
6
|
+
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
|
7
|
+
|
|
8
|
+
1. Definitions.
|
|
9
|
+
|
|
10
|
+
"License" shall mean the terms and conditions for use, reproduction,
|
|
11
|
+
and distribution as defined by Sections 1 through 9 of this document.
|
|
12
|
+
|
|
13
|
+
"Licensor" shall mean the copyright owner or entity authorized by
|
|
14
|
+
the copyright owner that is granting the License.
|
|
15
|
+
|
|
16
|
+
"Legal Entity" shall mean the union of the acting entity and all
|
|
17
|
+
other entities that control, are controlled by, or are under common
|
|
18
|
+
control with that entity. For the purposes of this definition,
|
|
19
|
+
"control" means (i) the power, direct or indirect, to cause the
|
|
20
|
+
direction or management of such entity, whether by contract or
|
|
21
|
+
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
|
22
|
+
outstanding shares, or (iii) beneficial ownership of such entity.
|
|
23
|
+
|
|
24
|
+
"You" (or "Your") shall mean an individual or Legal Entity
|
|
25
|
+
exercising permissions granted by this License.
|
|
26
|
+
|
|
27
|
+
"Source" form shall mean the preferred form for making modifications,
|
|
28
|
+
including but not limited to software source code, documentation
|
|
29
|
+
source, and configuration files.
|
|
30
|
+
|
|
31
|
+
"Object" form shall mean any form resulting from mechanical
|
|
32
|
+
transformation or translation of a Source form, including but
|
|
33
|
+
not limited to compiled object code, generated documentation,
|
|
34
|
+
and conversions to other media types.
|
|
35
|
+
|
|
36
|
+
"Work" shall mean the work of authorship, whether in Source or
|
|
37
|
+
Object form, made available under the License, as indicated by a
|
|
38
|
+
copyright notice that is included in or attached to the work
|
|
39
|
+
(an example is provided in the Appendix below).
|
|
40
|
+
|
|
41
|
+
"Derivative Works" shall mean any work, whether in Source or Object
|
|
42
|
+
form, that is based on (or derived from) the Work and for which the
|
|
43
|
+
editorial revisions, annotations, elaborations, or other modifications
|
|
44
|
+
represent, as a whole, an original work of authorship. For the purposes
|
|
45
|
+
of this License, Derivative Works shall not include works that remain
|
|
46
|
+
separable from, or merely link (or bind by name) to the interfaces of,
|
|
47
|
+
the Work and Derivative Works thereof.
|
|
48
|
+
|
|
49
|
+
"Contribution" shall mean any work of authorship, including
|
|
50
|
+
the original version of the Work and any modifications or additions
|
|
51
|
+
to that Work or Derivative Works thereof, that is intentionally
|
|
52
|
+
submitted to Licensor for inclusion in the Work by the copyright owner
|
|
53
|
+
or by an individual or Legal Entity authorized to submit on behalf of
|
|
54
|
+
the copyright owner. For the purposes of this definition, "submitted"
|
|
55
|
+
means any form of electronic, verbal, or written communication sent
|
|
56
|
+
to the Licensor or its representatives, including but not limited to
|
|
57
|
+
communication on electronic mailing lists, source code control systems,
|
|
58
|
+
and issue tracking systems that are managed by, or on behalf of, the
|
|
59
|
+
Licensor for the purpose of discussing and improving the Work, but
|
|
60
|
+
excluding communication that is conspicuously marked or otherwise
|
|
61
|
+
designated in writing by the copyright owner as "Not a Contribution."
|
|
62
|
+
|
|
63
|
+
"Contributor" shall mean Licensor and any individual or Legal Entity
|
|
64
|
+
on behalf of whom a Contribution has been received by Licensor and
|
|
65
|
+
subsequently incorporated within the Work.
|
|
66
|
+
|
|
67
|
+
2. Grant of Copyright License. Subject to the terms and conditions of
|
|
68
|
+
this License, each Contributor hereby grants to You a perpetual,
|
|
69
|
+
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
|
70
|
+
copyright license to reproduce, prepare Derivative Works of,
|
|
71
|
+
publicly display, publicly perform, sublicense, and distribute the
|
|
72
|
+
Work and such Derivative Works in Source or Object form.
|
|
73
|
+
|
|
74
|
+
3. Grant of Patent License. Subject to the terms and conditions of
|
|
75
|
+
this License, each Contributor hereby grants to You a perpetual,
|
|
76
|
+
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
|
77
|
+
(except as stated in this section) patent license to make, have made,
|
|
78
|
+
use, offer to sell, sell, import, and otherwise transfer the Work,
|
|
79
|
+
where such license applies only to those patent claims licensable
|
|
80
|
+
by such Contributor that are necessarily infringed by their
|
|
81
|
+
Contribution(s) alone or by combination of their Contribution(s)
|
|
82
|
+
with the Work to which such Contribution(s) was submitted. If You
|
|
83
|
+
institute patent litigation against any entity (including a
|
|
84
|
+
cross-claim or counterclaim in a lawsuit) alleging that the Work
|
|
85
|
+
or a Contribution incorporated within the Work constitutes direct
|
|
86
|
+
or contributory patent infringement, then any patent licenses
|
|
87
|
+
granted to You under this License for that Work shall terminate
|
|
88
|
+
as of the date such litigation is filed.
|
|
89
|
+
|
|
90
|
+
4. Redistribution. You may reproduce and distribute copies of the
|
|
91
|
+
Work or Derivative Works thereof in any medium, with or without
|
|
92
|
+
modifications, and in Source or Object form, provided that You
|
|
93
|
+
meet the following conditions:
|
|
94
|
+
|
|
95
|
+
(a) You must give any other recipients of the Work or
|
|
96
|
+
Derivative Works a copy of this License; and
|
|
97
|
+
|
|
98
|
+
(b) You must cause any modified files to carry prominent notices
|
|
99
|
+
stating that You changed the files; and
|
|
100
|
+
|
|
101
|
+
(c) You must retain, in the Source form of any Derivative Works
|
|
102
|
+
that You distribute, all copyright, patent, trademark, and
|
|
103
|
+
attribution notices from the Source form of the Work,
|
|
104
|
+
excluding those notices that do not pertain to any part of
|
|
105
|
+
the Derivative Works; and
|
|
106
|
+
|
|
107
|
+
(d) If the Work includes a "NOTICE" text file as part of its
|
|
108
|
+
distribution, then any Derivative Works that You distribute must
|
|
109
|
+
include a readable copy of the attribution notices contained
|
|
110
|
+
within such NOTICE file, excluding those notices that do not
|
|
111
|
+
pertain to any part of the Derivative Works, in at least one
|
|
112
|
+
of the following places: within a NOTICE text file distributed
|
|
113
|
+
as part of the Derivative Works; within the Source form or
|
|
114
|
+
documentation, if provided along with the Derivative Works; or,
|
|
115
|
+
within a display generated by the Derivative Works, if and
|
|
116
|
+
wherever such third-party notices normally appear. The contents
|
|
117
|
+
of the NOTICE file are for informational purposes only and
|
|
118
|
+
do not modify the License. You may add Your own attribution
|
|
119
|
+
notices within Derivative Works that You distribute, alongside
|
|
120
|
+
or as an addendum to the NOTICE text from the Work, provided
|
|
121
|
+
that such additional attribution notices cannot be construed
|
|
122
|
+
as modifying the License.
|
|
123
|
+
|
|
124
|
+
You may add Your own copyright statement to Your modifications and
|
|
125
|
+
may provide additional or different license terms and conditions
|
|
126
|
+
for use, reproduction, or distribution of Your modifications, or
|
|
127
|
+
for any such Derivative Works as a whole, provided Your use,
|
|
128
|
+
reproduction, and distribution of the Work otherwise complies with
|
|
129
|
+
the conditions stated in this License.
|
|
130
|
+
|
|
131
|
+
5. Submission of Contributions. Unless You explicitly state otherwise,
|
|
132
|
+
any Contribution intentionally submitted for inclusion in the Work
|
|
133
|
+
by You to the Licensor shall be under the terms and conditions of
|
|
134
|
+
this License, without any additional terms or conditions.
|
|
135
|
+
Notwithstanding the above, nothing herein shall supersede or modify
|
|
136
|
+
the terms of any separate license agreement you may have executed
|
|
137
|
+
with Licensor regarding such Contributions.
|
|
138
|
+
|
|
139
|
+
6. Trademarks. This License does not grant permission to use the trade
|
|
140
|
+
names, trademarks, service marks, or product names of the Licensor,
|
|
141
|
+
except as required for reasonable and customary use in describing the
|
|
142
|
+
origin of the Work and reproducing the content of the NOTICE file.
|
|
143
|
+
|
|
144
|
+
7. Disclaimer of Warranty. Unless required by applicable law or
|
|
145
|
+
agreed to in writing, Licensor provides the Work (and each
|
|
146
|
+
Contributor provides its Contributions) on an "AS IS" BASIS,
|
|
147
|
+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
|
148
|
+
implied, including, without limitation, any warranties or conditions
|
|
149
|
+
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
|
150
|
+
PARTICULAR PURPOSE. You are solely responsible for determining the
|
|
151
|
+
appropriateness of using or redistributing the Work and assume any
|
|
152
|
+
risks associated with Your exercise of permissions under this License.
|
|
153
|
+
|
|
154
|
+
8. Limitation of Liability. In no event and under no legal theory,
|
|
155
|
+
whether in tort (including negligence), contract, or otherwise,
|
|
156
|
+
unless required by applicable law (such as deliberate and grossly
|
|
157
|
+
negligent acts) or agreed to in writing, shall any Contributor be
|
|
158
|
+
liable to You for damages, including any direct, indirect, special,
|
|
159
|
+
incidental, or consequential damages of any character arising as a
|
|
160
|
+
result of this License or out of the use or inability to use the
|
|
161
|
+
Work (including but not limited to damages for loss of goodwill,
|
|
162
|
+
work stoppage, computer failure or malfunction, or any and all
|
|
163
|
+
other commercial damages or losses), even if such Contributor
|
|
164
|
+
has been advised of the possibility of such damages.
|
|
165
|
+
|
|
166
|
+
9. Accepting Warranty or Additional Liability. While redistributing
|
|
167
|
+
the Work or Derivative Works thereof, You may choose to offer,
|
|
168
|
+
and charge a fee for, acceptance of support, warranty, indemnity,
|
|
169
|
+
or other liability obligations and/or rights consistent with this
|
|
170
|
+
License. However, in accepting such obligations, You may act only
|
|
171
|
+
on Your own behalf and on Your sole responsibility, not on behalf
|
|
172
|
+
of any other Contributor, and only if You agree to indemnify,
|
|
173
|
+
defend, and hold each Contributor harmless for any liability
|
|
174
|
+
incurred by, or claims asserted against, such Contributor by reason
|
|
175
|
+
of your accepting any such warranty or additional liability.
|
|
176
|
+
|
|
177
|
+
END OF TERMS AND CONDITIONS
|
|
178
|
+
|
|
179
|
+
APPENDIX: How to apply the Apache License to your work.
|
|
180
|
+
|
|
181
|
+
To apply the Apache License to your work, attach the following
|
|
182
|
+
boilerplate notice, with the fields enclosed by brackets "[]"
|
|
183
|
+
replaced with your own identifying information. (Don't include
|
|
184
|
+
the brackets!) The text should be enclosed in the appropriate
|
|
185
|
+
comment syntax for the file format. We also recommend that a
|
|
186
|
+
file or class name and description of purpose be included on the
|
|
187
|
+
same "printed page" as the copyright notice for easier
|
|
188
|
+
identification within third-party archives.
|
|
189
|
+
|
|
190
|
+
Copyright [yyyy] [name of copyright owner]
|
|
191
|
+
|
|
192
|
+
Licensed under the Apache License, Version 2.0 (the "License");
|
|
193
|
+
you may not use this file except in compliance with the License.
|
|
194
|
+
You may obtain a copy of the License at
|
|
195
|
+
|
|
196
|
+
http://www.apache.org/licenses/LICENSE-2.0
|
|
197
|
+
|
|
198
|
+
Unless required by applicable law or agreed to in writing, software
|
|
199
|
+
distributed under the License is distributed on an "AS IS" BASIS,
|
|
200
|
+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
201
|
+
See the License for the specific language governing permissions and
|
|
202
|
+
limitations under the License.
|
package/NOTICE
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
Steppy player (@steppy/player)
|
|
2
|
+
Copyright 2026 The Steppy Authors
|
|
3
|
+
|
|
4
|
+
This package is licensed under the Apache License, Version 2.0 (see LICENSE).
|
|
5
|
+
|
|
6
|
+
Its bundles in dist/ include Lit (BSD-3-Clause, Copyright Google LLC);
|
|
7
|
+
steppy-player.js and steppy-video.js also include Zod (MIT, Copyright
|
|
8
|
+
Colin McDonnell), and steppy-tour.js includes Lit only. Their full license
|
|
9
|
+
texts are in THIRD_PARTY_LICENSES.txt.
|
package/README.md
CHANGED
|
@@ -1,3 +1,191 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @steppy/player
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
The Lit `<steppy-guide>` web component that renders interactive guide manifests
|
|
4
|
+
(`guide.json`), plus the shared cursor animator — and the in-app tour overlay
|
|
5
|
+
`<steppy-tour-host>` (the `./tour` entry). Framework-agnostic, fully offline,
|
|
6
|
+
no CDN.
|
|
7
|
+
|
|
8
|
+
```bash
|
|
9
|
+
npm install @steppy/player
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
The guide player is the package's main entry; the tour overlay is
|
|
13
|
+
`@steppy/player/tour`.
|
|
14
|
+
|
|
15
|
+
## Development
|
|
16
|
+
|
|
17
|
+
- `npm run build` — four bundles: the guide player ESM bundle
|
|
18
|
+
(`dist/steppy-player.js`), the legacy cursor IIFE
|
|
19
|
+
(`dist/steppy-cursor-legacy.js`), the video renderer IIFE
|
|
20
|
+
(`dist/steppy-video.js`), and the tour overlay (`dist/steppy-tour.js` with
|
|
21
|
+
declarations in `dist/types/`), plus the JSON Schema. Re-vendor the first three
|
|
22
|
+
into `src/steppy/_player_bundle/` after changing `src/` (CI checks them byte
|
|
23
|
+
for byte and does it on release); the tour overlay is never vendored.
|
|
24
|
+
- `npm run size:tour` — the tour overlay's size budget (min + gzip).
|
|
25
|
+
- `npm run check:pack` — publish-readiness: every file `package.json` points at
|
|
26
|
+
(`main`, `types`, `exports`, `typesVersions`) is in what `npm pack` would ship,
|
|
27
|
+
and nothing from `src/` or `test/` is. `prepack` builds the package. Declarations for the guide entry and for
|
|
28
|
+
`./tour` come from `tsc -p tsconfig.types.json` (`npm run build:types`).
|
|
29
|
+
- `npm test` — Vitest (schema, animator, positioning, component, templates,
|
|
30
|
+
Python↔TS bridge, the shared `src/ui/` modules, the tour overlay).
|
|
31
|
+
- `npm run typecheck` — `tsc --noEmit`.
|
|
32
|
+
- Dev harness: `dist/` built, then open `dev/index.html`.
|
|
33
|
+
|
|
34
|
+
## Presentation templates
|
|
35
|
+
|
|
36
|
+
The engine (step state, cursor animation, target highlighting, i18n,
|
|
37
|
+
navigation, keyboard, locale/layout switching) is one thing; how a step is
|
|
38
|
+
*presented* is another. Presentation is a swappable **template** — one of
|
|
39
|
+
**`overlay`** (default: full-bleed preview + floating callout pinned to the
|
|
40
|
+
target), **`sidebar`** (left rail with a vertical step timeline + the current
|
|
41
|
+
step's description), or **`inline`** (slim bottom caption bar). All three render
|
|
42
|
+
the same engine state; only the chrome differs.
|
|
43
|
+
|
|
44
|
+
### The `template` attribute + resolution order
|
|
45
|
+
|
|
46
|
+
`template` is a runtime-switchable, persisted viewer setting:
|
|
47
|
+
|
|
48
|
+
```html
|
|
49
|
+
<steppy-guide src="./guide.json" template="sidebar"></steppy-guide>
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
The effective template is resolved (highest precedence first):
|
|
53
|
+
|
|
54
|
+
1. the explicit `template` attribute/property,
|
|
55
|
+
2. the persisted choice in `localStorage['steppy:active-template']`,
|
|
56
|
+
3. the manifest's top-level `defaultTemplate` (the per-guide default),
|
|
57
|
+
4. `'overlay'`.
|
|
58
|
+
|
|
59
|
+
Switching templates (via the built-in segmented control or by setting the
|
|
60
|
+
attribute) preserves the current step, locale, layout, and highlight — it is a
|
|
61
|
+
pure re-render of engine state, never a reset. The choice is persisted; an
|
|
62
|
+
explicit attribute or the switcher persists, the initial resolution does not.
|
|
63
|
+
|
|
64
|
+
### Per-guide default (`defaultTemplate`)
|
|
65
|
+
|
|
66
|
+
Authored in the build config, not hardcoded in the component:
|
|
67
|
+
|
|
68
|
+
```ts
|
|
69
|
+
// steppy.guide.config.ts
|
|
70
|
+
defineGuideConfig({
|
|
71
|
+
defaultTemplate: 'sidebar', // project-wide default
|
|
72
|
+
guides: [
|
|
73
|
+
{ slug: 'onboarding', /* … */ template: 'inline' }, // per-guide override
|
|
74
|
+
],
|
|
75
|
+
});
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
`steppy build` resolves `entry.template || config.defaultTemplate || 'overlay'`
|
|
79
|
+
and emits it as the manifest's `defaultTemplate`; it is also set as the initial
|
|
80
|
+
`template` attribute on the generated host's `<steppy-guide>`.
|
|
81
|
+
|
|
82
|
+
### Engine → template API contract
|
|
83
|
+
|
|
84
|
+
Templates are pure functions in `src/templates/{overlay,sidebar,inline}.ts`,
|
|
85
|
+
each exporting `render(ctx: TemplateContext): TemplateResult` and a `styles`
|
|
86
|
+
`CSSResult`. The component (`steppy-guide.ts`) owns all state and builds an
|
|
87
|
+
immutable `TemplateContext` (`src/templates/types.ts`) per render:
|
|
88
|
+
|
|
89
|
+
- `steps: StepView[]` — the full ordered list, each with `index`, localized
|
|
90
|
+
`title` / `description` / `subLabel`, `status` (`completed|current|upcoming`),
|
|
91
|
+
and `reachable` (the `goTo` gate);
|
|
92
|
+
- `currentIndex`, `total`, `durationLabel`, `guideTitle`, `locale`, `ui`;
|
|
93
|
+
- `waitingForInput`, `completed`;
|
|
94
|
+
- nav callbacks (`onNext`/`onPrev`/`onRestart`/`onGoTo`) + precomputed
|
|
95
|
+
`prevDisabled`/`nextDisabled` so templates never re-implement gates;
|
|
96
|
+
- switcher data + handlers (`locales`/`layouts`/`templates`, `onLocaleChange`/
|
|
97
|
+
`onLayoutChange`/`onTemplateChange`);
|
|
98
|
+
- `renderStage()` — a thunk returning the live stage subtree (screenshot +
|
|
99
|
+
cursor/ripple/kbd + hotspot + miss-toast), shared verbatim so the refs and
|
|
100
|
+
handlers stay bound to the component.
|
|
101
|
+
|
|
102
|
+
To add a template: add a module, register it in `src/templates/index.ts`
|
|
103
|
+
(`TEMPLATES` + `ALL_TEMPLATES`), and extend `TEMPLATE_MODES` in
|
|
104
|
+
`manifest/schema.ts` (the `.strict()` schema rejects unknown ids).
|
|
105
|
+
|
|
106
|
+
**Stage re-mount invariant:** switching templates swaps the whole top-level
|
|
107
|
+
template, so Lit recreates the `.steppy-stage` element. `updated()` detects the
|
|
108
|
+
new element identity and calls `_reattachStage` — re-pointing the `CursorAnimator`
|
|
109
|
+
(via `animator.setStage`) and the `ResizeObserver`, then recomputing the hotspot
|
|
110
|
+
— without touching step state, so an in-flight animation survives the switch.
|
|
111
|
+
|
|
112
|
+
### Adding a chrome string
|
|
113
|
+
|
|
114
|
+
UI chrome strings live in `src/i18n/ui-strings.ts`: add the key to the
|
|
115
|
+
`UiStrings` interface and a value to **every** locale in `DEFAULT_UI_STRINGS`
|
|
116
|
+
(`en`, `fr`, `nl`, `de`). Use `format(ui.key, vars)` for `{placeholder}`
|
|
117
|
+
interpolation. Hosts can override per-locale via the `uiStrings` property. A
|
|
118
|
+
regional locale falls back to its base language (`fr-BE` reads `fr`), then to
|
|
119
|
+
English. `next` and `progress` come from `CHROME_STRINGS` in `src/ui/strings.ts`,
|
|
120
|
+
shared with the tour overlay.
|
|
121
|
+
|
|
122
|
+
### Design tokens
|
|
123
|
+
|
|
124
|
+
The warm palette (cream surfaces, near-black text, rust-orange accent, green
|
|
125
|
+
completed) and the serif/sans/mono type scale are CSS custom properties on
|
|
126
|
+
`:host` in `src/templates/base-styles.ts` (system font stacks only — no web
|
|
127
|
+
fonts). Override any `--steppy-*` variable from the host to re-theme. Animations
|
|
128
|
+
respect `prefers-reduced-motion`.
|
|
129
|
+
|
|
130
|
+
The `sidebar` template adds four **layout** tokens (declared inline in
|
|
131
|
+
`src/templates/sidebar.ts`, not on `:host`, since they mean nothing to the other
|
|
132
|
+
templates). Everything the rail cap touches is a token, because the shadow DOM
|
|
133
|
+
has no `part=` attributes — a host that cannot live with a default has no other
|
|
134
|
+
way in, and finding that out costs a release:
|
|
135
|
+
|
|
136
|
+
| Token | Default | What it does |
|
|
137
|
+
|---|---|---|
|
|
138
|
+
| `--steppy-rail-width` | `340px` | Left rail width; the rest of the row is the preview |
|
|
139
|
+
| `--steppy-rail-max-height` | `calc(100vh - 32px)` | Rail cap; the timeline scrolls inside it |
|
|
140
|
+
| `--steppy-sidebar-offset` | `16px` | `top` for the sticky rail |
|
|
141
|
+
| `--steppy-rail-max-height-narrow` | `60vh` | Rail cap once collapsed to one column (≤640px) |
|
|
142
|
+
|
|
143
|
+
**An embedded host should override `--steppy-rail-max-height`.** The `100vh`
|
|
144
|
+
default assumes the player owns the viewport, which is true for the static
|
|
145
|
+
target's `interactive.html` and false for the Angular target, where the host's
|
|
146
|
+
own header and nav sit above the component — there `calc(100vh - <chrome>)` is
|
|
147
|
+
the correct value and only the host knows it.
|
|
148
|
+
|
|
149
|
+
## In-app tour overlay (`./tour`)
|
|
150
|
+
|
|
151
|
+
`import '@steppy/player/tour'` registers `<steppy-tour-host>` (once, even
|
|
152
|
+
when two copies of the bundle load) and exports its types, the contract values
|
|
153
|
+
(`TOUR_EVENTS`, `TOUR_PARTS`, `ADVANCE_KINDS`, …) and the validators. The user
|
|
154
|
+
documentation — host API, events, theming, CSP — is `docs/tours.md` at the
|
|
155
|
+
repository root.
|
|
156
|
+
|
|
157
|
+
Layout of the code:
|
|
158
|
+
|
|
159
|
+
- `src/ui/` is shared with the guide player: design tokens (`tokens.ts`, which
|
|
160
|
+
`templates/base-styles.ts` interpolates — the guide's stylesheet hash is pinned
|
|
161
|
+
by `test/ui/guide-styles-stable.test.ts`), chrome strings and the locale lookup
|
|
162
|
+
(`strings.ts`), the inline Markdown renderer with its link policy
|
|
163
|
+
(`markdown.ts`), `placeTooltip` (`placement.ts`) and the product names
|
|
164
|
+
(`names.ts`). It never registers an element and never imports zod.
|
|
165
|
+
- `src/tour/engine.ts` is a pure reducer: `reduce(state, event)` returns the next
|
|
166
|
+
state and the effects to run. `host.ts` interprets the effects through DOM
|
|
167
|
+
adapters — `loader`, `resolver`, `triggers`, `tracker`, `layer`, `storage` —
|
|
168
|
+
and `dom.ts` is the seam tests swap (`SteppyTourHost.dom`): happy-dom has no
|
|
169
|
+
layout, no popover API and a requestAnimationFrame outside fake timers, so
|
|
170
|
+
`test/tour/helpers.ts` provides a stub DOM with settable rects and a manual
|
|
171
|
+
scheduler.
|
|
172
|
+
- `src/tour/validate.ts` is the security boundary: every manifest and tour file
|
|
173
|
+
is validated whole, by hand (no zod, for size). It runs the same golden cases
|
|
174
|
+
as the Python producer (`contracts/fixtures/tours/cases.json`).
|
|
175
|
+
- Geometry is written through CSSOM custom properties only — no `style=` binding
|
|
176
|
+
and no `styleMap` — so the overlay runs under a strict CSP;
|
|
177
|
+
`test/tour/boundaries.test.ts` enforces that and the import boundary.
|
|
178
|
+
- Real browser behaviour (top layer, hit-testing, focus, keyboard, remote loading
|
|
179
|
+
with CORS and SRI) is covered by the opt-in Python suites in
|
|
180
|
+
`tests/integration/test_tour_*_it.py` against `fixtures/tour-demo/`.
|
|
181
|
+
|
|
182
|
+
Every chrome string the overlay shows exists in `en`, `fr`, `nl` and `de`
|
|
183
|
+
(`src/tour/strings.ts`); add a key to all four. Adding a *language* means
|
|
184
|
+
adding it to `CHROME_STRING_LOCALES` in `src/tour/contract.ts` **and**
|
|
185
|
+
`src/steppy/tour_spec.py` (the compiler warns `chrome-strings-missing` for
|
|
186
|
+
every other tour language) and checking `npm run size:tour`. The layer carries
|
|
187
|
+
the tour file's `lang` and `dir` (`textDir` in `strings.ts`), so the bubble's
|
|
188
|
+
inner layout uses logical properties only — `test/tour/small-modules.test.ts`
|
|
189
|
+
rejects a physical `margin-left/right`. A running tour reloads when the host's
|
|
190
|
+
`locale` (else `<html lang>`) changes; see `_swapLocale` in `host.ts`. Unlike the
|
|
191
|
+
guide player, the overlay exposes `part=` attributes for `::part()` styling.
|
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
Third-party software bundled in the Steppy player bundles
|
|
2
|
+
(steppy-player.js, steppy-video.js). steppy-cursor-legacy.js bundles none.
|
|
3
|
+
|
|
4
|
+
================================================================================
|
|
5
|
+
lit 3.3.3
|
|
6
|
+
================================================================================
|
|
7
|
+
|
|
8
|
+
BSD 3-Clause License
|
|
9
|
+
|
|
10
|
+
Copyright (c) 2017 Google LLC. All rights reserved.
|
|
11
|
+
|
|
12
|
+
Redistribution and use in source and binary forms, with or without
|
|
13
|
+
modification, are permitted provided that the following conditions are met:
|
|
14
|
+
|
|
15
|
+
1. Redistributions of source code must retain the above copyright notice, this
|
|
16
|
+
list of conditions and the following disclaimer.
|
|
17
|
+
|
|
18
|
+
2. Redistributions in binary form must reproduce the above copyright notice,
|
|
19
|
+
this list of conditions and the following disclaimer in the documentation
|
|
20
|
+
and/or other materials provided with the distribution.
|
|
21
|
+
|
|
22
|
+
3. Neither the name of the copyright holder nor the names of its
|
|
23
|
+
contributors may be used to endorse or promote products derived from
|
|
24
|
+
this software without specific prior written permission.
|
|
25
|
+
|
|
26
|
+
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
|
|
27
|
+
AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
|
|
28
|
+
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
|
|
29
|
+
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
|
|
30
|
+
FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
|
|
31
|
+
DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
|
|
32
|
+
SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
|
|
33
|
+
CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
|
|
34
|
+
OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
|
|
35
|
+
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
|
36
|
+
================================================================================
|
|
37
|
+
lit-html 3.3.3
|
|
38
|
+
================================================================================
|
|
39
|
+
|
|
40
|
+
BSD 3-Clause License
|
|
41
|
+
|
|
42
|
+
Copyright (c) 2017 Google LLC. All rights reserved.
|
|
43
|
+
|
|
44
|
+
Redistribution and use in source and binary forms, with or without
|
|
45
|
+
modification, are permitted provided that the following conditions are met:
|
|
46
|
+
|
|
47
|
+
1. Redistributions of source code must retain the above copyright notice, this
|
|
48
|
+
list of conditions and the following disclaimer.
|
|
49
|
+
|
|
50
|
+
2. Redistributions in binary form must reproduce the above copyright notice,
|
|
51
|
+
this list of conditions and the following disclaimer in the documentation
|
|
52
|
+
and/or other materials provided with the distribution.
|
|
53
|
+
|
|
54
|
+
3. Neither the name of the copyright holder nor the names of its
|
|
55
|
+
contributors may be used to endorse or promote products derived from
|
|
56
|
+
this software without specific prior written permission.
|
|
57
|
+
|
|
58
|
+
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
|
|
59
|
+
AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
|
|
60
|
+
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
|
|
61
|
+
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
|
|
62
|
+
FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
|
|
63
|
+
DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
|
|
64
|
+
SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
|
|
65
|
+
CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
|
|
66
|
+
OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
|
|
67
|
+
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
|
68
|
+
|
|
69
|
+
================================================================================
|
|
70
|
+
lit-element 4.2.2
|
|
71
|
+
================================================================================
|
|
72
|
+
|
|
73
|
+
BSD 3-Clause License
|
|
74
|
+
|
|
75
|
+
Copyright (c) 2017 Google LLC. All rights reserved.
|
|
76
|
+
|
|
77
|
+
Redistribution and use in source and binary forms, with or without
|
|
78
|
+
modification, are permitted provided that the following conditions are met:
|
|
79
|
+
|
|
80
|
+
1. Redistributions of source code must retain the above copyright notice, this
|
|
81
|
+
list of conditions and the following disclaimer.
|
|
82
|
+
|
|
83
|
+
2. Redistributions in binary form must reproduce the above copyright notice,
|
|
84
|
+
this list of conditions and the following disclaimer in the documentation
|
|
85
|
+
and/or other materials provided with the distribution.
|
|
86
|
+
|
|
87
|
+
3. Neither the name of the copyright holder nor the names of its
|
|
88
|
+
contributors may be used to endorse or promote products derived from
|
|
89
|
+
this software without specific prior written permission.
|
|
90
|
+
|
|
91
|
+
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
|
|
92
|
+
AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
|
|
93
|
+
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
|
|
94
|
+
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
|
|
95
|
+
FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
|
|
96
|
+
DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
|
|
97
|
+
SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
|
|
98
|
+
CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
|
|
99
|
+
OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
|
|
100
|
+
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
|
101
|
+
================================================================================
|
|
102
|
+
@lit/reactive-element 2.1.2
|
|
103
|
+
================================================================================
|
|
104
|
+
|
|
105
|
+
BSD 3-Clause License
|
|
106
|
+
|
|
107
|
+
Copyright (c) 2017 Google LLC. All rights reserved.
|
|
108
|
+
|
|
109
|
+
Redistribution and use in source and binary forms, with or without
|
|
110
|
+
modification, are permitted provided that the following conditions are met:
|
|
111
|
+
|
|
112
|
+
1. Redistributions of source code must retain the above copyright notice, this
|
|
113
|
+
list of conditions and the following disclaimer.
|
|
114
|
+
|
|
115
|
+
2. Redistributions in binary form must reproduce the above copyright notice,
|
|
116
|
+
this list of conditions and the following disclaimer in the documentation
|
|
117
|
+
and/or other materials provided with the distribution.
|
|
118
|
+
|
|
119
|
+
3. Neither the name of the copyright holder nor the names of its
|
|
120
|
+
contributors may be used to endorse or promote products derived from
|
|
121
|
+
this software without specific prior written permission.
|
|
122
|
+
|
|
123
|
+
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
|
|
124
|
+
AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
|
|
125
|
+
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
|
|
126
|
+
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
|
|
127
|
+
FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
|
|
128
|
+
DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
|
|
129
|
+
SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
|
|
130
|
+
CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
|
|
131
|
+
OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
|
|
132
|
+
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
|
133
|
+
================================================================================
|
|
134
|
+
zod 3.25.76
|
|
135
|
+
================================================================================
|
|
136
|
+
|
|
137
|
+
MIT License
|
|
138
|
+
|
|
139
|
+
Copyright (c) 2025 Colin McDonnell
|
|
140
|
+
|
|
141
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
142
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
143
|
+
in the Software without restriction, including without limitation the rights
|
|
144
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
145
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
146
|
+
furnished to do so, subject to the following conditions:
|
|
147
|
+
|
|
148
|
+
The above copyright notice and this permission notice shall be included in all
|
|
149
|
+
copies or substantial portions of the Software.
|
|
150
|
+
|
|
151
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
152
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
153
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
154
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
155
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
156
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
157
|
+
SOFTWARE.
|
|
158
|
+
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
(function(){"use strict";const w={pre_action_ms:200,action_ms:300,post_action_ms:150,travel_speed_px_per_ms:1.5},h=n=>new Promise(t=>setTimeout(t,Math.max(0,n)));function E(n){return n*n*(3-2*n)}function y(n,t){if(!t||!t.width||!t.height)return null;const e=n.getBoundingClientRect();return!e.width||!e.height?null:{sx:e.width/t.width,sy:e.height/t.height}}function f(n,t){return{x:n.x*t.sx,y:n.y*t.sy,width:n.width*t.sx,height:n.height*t.sy}}function T(n){return{x:n.x+n.width/2,y:n.y+n.height/2}}function m(n,t,e){if(!n)return null;const s=y(t,e);return s?T(f(n,s)):null}function v(n,t,e){const s=t.x-n.x,i=t.y-n.y,a=Math.hypot(s,i);return Math.max(150,a/(e||1.5))}function P(n,t){const e=t.x-n.x,s=t.y-n.y,i=Math.hypot(e,s);if(!i)return{x:n.x,y:n.y};const a=(n.x+t.x)/2,o=(n.y+t.y)/2,r=-s/i,c=e/i;return{x:a+r*i*.15,y:o+c*i*.15}}class d{constructor(t){var e;this.cursorEl=null,this.rippleEl=null,this.kbdEl=null,this.imgEl=null,this.currentPos={x:8,y:8},this.aborted=!1,this.stage=t.stage,this.timings={...w,...(e=t.timings)!=null?e:{}},this.onPhaseChange=t.onPhaseChange,this.refreshDom()}setTimings(t){this.timings={...this.timings,...t}}setStage(t){this.stage=t,this.refreshDom()}abort(){this.aborted=!0}hide(){var t;this.cursorEl&&this.cursorEl.classList.remove("visible"),this.kbdEl&&this.kbdEl.classList.remove("visible"),(t=this.onPhaseChange)==null||t.call(this,"idle")}refreshDom(){this.cursorEl=this.stage.querySelector(".steppy-cursor"),this.rippleEl=this.stage.querySelector(".steppy-ripple"),this.kbdEl=this.stage.querySelector(".steppy-kbd"),this.imgEl=this.stage.querySelector("img")}static normalizeTargets(t){if(!t)return[];if(t.kind==="type-multi")return t.targets.map(i=>({bbox:i.bbox,value:i.value,selector:i.selector,kind:"type"}));const e=t.target,s=t.kind==="type"?t.value:void 0;return[{bbox:e.bbox,value:s,selector:e.selector,kind:t.kind==="click"?"click":t.kind==="hover"?"hover":"type"}]}async waitImageReady(){const t=this.imgEl;t&&(t.complete&&t.naturalWidth||await new Promise(e=>{const s=()=>e();t.addEventListener("load",s,{once:!0}),t.addEventListener("error",s,{once:!0})}))}async animateFrame(t){if(this.aborted=!1,this.refreshDom(),!this.cursorEl)return;if(!t.cursor){this.hide();return}await this.waitImageReady();const e=d.normalizeTargets(t.cursor);this.currentPos={x:8,y:8},this.cursorEl.classList.add("visible");for(let s=0;s<e.length;s++){if(this.aborted||(await this.travelToTargetIndex(t,e,s),this.aborted)||(await this.playTargetActionIndex(t,e,s),this.aborted))return;await h(this.timings.post_action_ms)}}async travelToTarget(t,e){if(this.aborted=!1,this.refreshDom(),!this.cursorEl)return;if(!t.cursor){this.hide();return}await this.waitImageReady();const s=d.normalizeTargets(t.cursor);this.cursorEl.classList.add("visible"),await this.travelToTargetIndex(t,s,e)}async playTargetAction(t,e){if(this.aborted=!1,this.refreshDom(),!t.cursor)return;const s=d.normalizeTargets(t.cursor);await this.playTargetActionIndex(t,s,e),!this.aborted&&await h(this.timings.post_action_ms)}computeDisplayRect(t,e){const s=this.imgEl;if(!s||!t)return null;const i=y(s,e);return i?f(t,i):null}async travelToTargetIndex(t,e,s){var r,c;const i=e[s],a=this.cursorEl;if(!i||!a)return;const o=m(i.bbox,this.imgEl,t.viewport);o&&((r=this.onPhaseChange)==null||r.call(this,"travel",i),await this.travelTo(a,this.currentPos,o),this.currentPos=o,(c=this.onPhaseChange)==null||c.call(this,"pre-action",i),a.classList.remove("pulse"),a.offsetWidth,a.classList.add("pulse"),await h(this.timings.pre_action_ms),a.classList.remove("pulse"))}async playTargetActionIndex(t,e,s){var o,r;const i=e[s];if(!i)return;const a=m(i.bbox,this.imgEl,t.viewport)||this.currentPos;(o=this.onPhaseChange)==null||o.call(this,"action",i),i.kind==="click"?(this.rippleEl&&this.fireClick(this.rippleEl,a),await h(this.timings.action_ms)):i.kind==="type"?this.kbdEl&&await this.typeValue(this.kbdEl,a,i.value):await h(this.timings.action_ms),(r=this.onPhaseChange)==null||r.call(this,"post-action",i)}async travelTo(t,e,s){const i=v(e,s,this.timings.travel_speed_px_per_ms),a=P(e,s);return new Promise(o=>{const r=performance.now(),c=u=>{if(this.aborted){o();return}const g=Math.min(1,(u-r)/i),l=E(g),b=(1-l)*(1-l)*e.x+2*(1-l)*l*a.x+l*l*s.x,I=(1-l)*(1-l)*e.y+2*(1-l)*l*a.y+l*l*s.y;t.style.left=`${b}px`,t.style.top=`${I}px`,g<1?requestAnimationFrame(c):o()};requestAnimationFrame(c)})}fireClick(t,e){t.style.left=`${e.x}px`,t.style.top=`${e.y}px`,t.classList.remove("fire"),t.offsetWidth,t.classList.add("fire")}async typeValue(t,e,s){var o;t.style.left=`${e.x+16}px`,t.style.top=`${e.y+16}px`,t.textContent="",t.classList.add("visible");const i=(s!=null?s:"").split(""),a=i.length?this.timings.action_ms/i.length:this.timings.action_ms;for(const r of i){if(this.aborted)break;t.textContent=((o=t.textContent)!=null?o:"")+r,await h(a)}await h(80),t.classList.remove("visible")}}function S(n,t,e,s){var o;if(!t)return Promise.resolve();const i=Array.from(n.querySelectorAll(".steppy-stage")),a=(o=t.frames)!=null?o:[];return(async()=>{for(let r=0;r<i.length;r++){const c=i[r],u=a[r];if(!u)continue;const g=new d({stage:c,timings:e});s==null||s.push(g),await g.animateFrame(u)}})()}function p(n,t,e){const s=Array.from(n.querySelectorAll(".steppy-step")),i=[],a=r=>{const c=r.dataset.stepIndex,u=c!==void 0?parseInt(c,10)-1:-1;return S(r,u>=0?t[u]:void 0,e,i)};let o=null;return"IntersectionObserver"in window?(o=new IntersectionObserver(r=>{r.forEach(c=>{c.isIntersecting&&(o.unobserve(c.target),a(c.target))})},{threshold:.5}),s.forEach(r=>o.observe(r))):(async()=>{for(const r of s)await a(r)})(),function(){o&&o.disconnect(),i.forEach(c=>c.abort())}}function x(){var n;p(document,(n=window.__STEPPY_STEPS__)!=null?n:[],window.__STEPPY_TIMINGS__)}window.__STEPPY_CURSOR__={mount:p,init:x};function _(){!window.__STEPPY_STEPS__&&!window.__STEPPY_STEPS_BY_LAYOUT__||x()}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",_):_()})();
|
|
2
|
+
//# sourceMappingURL=steppy-cursor-legacy.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"steppy-cursor-legacy.js","sources":["../src/cursor/types.ts","../src/cursor/animator.ts","../src/cursor/legacy-iife.ts"],"sourcesContent":["/**\n * Cursor data shapes — shared by the Lit player, the legacy IIFE bundle, and\n * the manifest validator. Kept dependency-free (no Zod) so the legacy IIFE\n * stays a tiny standalone bundle.\n *\n * The manifest schema in ``../manifest/schema.ts`` produces types that are\n * structurally identical to these — by design.\n */\n\nexport interface Bbox {\n x: number;\n y: number;\n width: number;\n height: number;\n}\n\nexport interface Viewport {\n width: number;\n height: number;\n}\n\nexport interface SingleTarget {\n selector?: string;\n bbox: Bbox;\n}\n\nexport interface MultiTarget extends SingleTarget {\n value?: string;\n}\n\nexport type CursorBehavior =\n | { kind: 'click'; target: SingleTarget }\n | { kind: 'hover'; target: SingleTarget }\n | { kind: 'type'; target: SingleTarget; value?: string }\n | { kind: 'type-multi'; targets: MultiTarget[] };\n\nexport interface CursorTimings {\n pre_action_ms: number;\n action_ms: number;\n post_action_ms: number;\n travel_speed_px_per_ms: number;\n}\n\nexport const DEFAULT_TIMINGS: CursorTimings = {\n pre_action_ms: 200,\n action_ms: 300,\n post_action_ms: 150,\n travel_speed_px_per_ms: 1.5,\n};\n\nexport interface AnimatorFrame {\n cursor: CursorBehavior | null;\n viewport: Viewport | null;\n}\n\n/** A scaled, displayed-space rect derived from a bbox + image size + viewport. */\nexport interface DisplayRect {\n x: number;\n y: number;\n width: number;\n height: number;\n}\n\nexport interface DisplayScale {\n sx: number;\n sy: number;\n}\n","/**\n * Cursor animation — canonical TS port of the inline JS that previously lived\n * in ``templates/static/cursor.js.j2`` and ``templates/guide.html.j2``. Both\n * the new ``<steppy-guide>`` Lit element and the legacy stepbystep templates\n * consume this module (the latter via ``legacy-iife.ts``).\n *\n * Two animation modes are supported off the same primitives:\n *\n * - **Full frame** (stepbystep): ``animateFrame(frame)`` walks every target in\n * the frame and runs travel → pre-action → action → post-action without\n * pause. Matches the historical behavior of the inline JS.\n * - **Interactive** (the new player): ``travelToTarget`` /\n * ``playTargetAction`` split the sequence so the player can wait for the\n * user to click a hotspot between phases.\n *\n * The animator owns the cursor / ripple / kbd DOM elements (it does not\n * create them — the host provides them via ``opts.stage`` and the elements\n * inside that stage). Coordinates are scaled at animation time from the\n * frame's capture-space viewport to the displayed image size; this is the\n * single point where capture-space → display-space conversion happens.\n */\n\nimport {\n AnimatorFrame,\n Bbox,\n CursorBehavior,\n CursorTimings,\n DEFAULT_TIMINGS,\n DisplayRect,\n DisplayScale,\n MultiTarget,\n SingleTarget,\n Viewport,\n} from './types.js';\n\nexport type TargetKind = 'click' | 'hover' | 'type';\n\nexport interface NormalizedTarget {\n bbox: Bbox;\n value?: string;\n selector?: string;\n kind: TargetKind;\n}\n\nconst sleep = (ms: number): Promise<void> =>\n new Promise((resolve) => setTimeout(resolve, Math.max(0, ms)));\n\nexport function easeInOut(t: number): number {\n // Smoothstep — symmetric S-curve, matches the legacy inline JS.\n return t * t * (3 - 2 * t);\n}\n\nexport function getDisplayScale(\n img: HTMLElement,\n viewport: Viewport | null | undefined,\n): DisplayScale | null {\n if (!viewport || !viewport.width || !viewport.height) return null;\n const rect = img.getBoundingClientRect();\n if (!rect.width || !rect.height) return null;\n return { sx: rect.width / viewport.width, sy: rect.height / viewport.height };\n}\n\nexport function scaleRect(bbox: Bbox, scale: DisplayScale): DisplayRect {\n return {\n x: bbox.x * scale.sx,\n y: bbox.y * scale.sy,\n width: bbox.width * scale.sx,\n height: bbox.height * scale.sy,\n };\n}\n\nexport function rectCenter(rect: DisplayRect): { x: number; y: number } {\n return { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 };\n}\n\n/**\n * Legacy entry point preserved verbatim for the IIFE bundle: capture-space\n * bbox + image + viewport → display-space center point.\n */\nexport function scaleBbox(\n bbox: Bbox | null | undefined,\n img: HTMLElement,\n viewport: Viewport | null | undefined,\n): { x: number; y: number } | null {\n if (!bbox) return null;\n const scale = getDisplayScale(img, viewport);\n if (!scale) return null;\n return rectCenter(scaleRect(bbox, scale));\n}\n\n/**\n * Quadratic-Bezier travel duration. Pulled out so it's unit-testable\n * without DOM. ``speed`` is in capture-space px per ms.\n */\nexport function travelDuration(\n from: { x: number; y: number },\n to: { x: number; y: number },\n speed: number,\n): number {\n const dx = to.x - from.x;\n const dy = to.y - from.y;\n const dist = Math.hypot(dx, dy);\n return Math.max(150, dist / (speed || 1.5));\n}\n\n/**\n * Compute a quadratic-Bezier control point offset 15% perpendicular to the\n * straight line between ``from`` and ``to``. Same formula the inline JS uses.\n */\nexport function bezierControlPoint(\n from: { x: number; y: number },\n to: { x: number; y: number },\n): { x: number; y: number } {\n const dx = to.x - from.x;\n const dy = to.y - from.y;\n const dist = Math.hypot(dx, dy);\n if (!dist) return { x: from.x, y: from.y };\n const mx = (from.x + to.x) / 2;\n const my = (from.y + to.y) / 2;\n const nx = -dy / dist;\n const ny = dx / dist;\n return { x: mx + nx * dist * 0.15, y: my + ny * dist * 0.15 };\n}\n\nexport interface AnimatorOptions {\n /** The stage element. Must contain ``.steppy-cursor``, ``.steppy-ripple``,\n * ``.steppy-kbd`` descendants and a single ``img`` (the screenshot). */\n stage: HTMLElement;\n timings?: Partial<CursorTimings>;\n /** Hook called when the cursor moves to or fires on a target. Used by the\n * Lit player to broadcast progress events. */\n onPhaseChange?: (phase: 'travel' | 'pre-action' | 'action' | 'post-action' | 'idle', target?: NormalizedTarget) => void;\n}\n\nexport class CursorAnimator {\n private stage: HTMLElement;\n private timings: CursorTimings;\n private onPhaseChange: AnimatorOptions['onPhaseChange'];\n private cursorEl: HTMLElement | null = null;\n private rippleEl: HTMLElement | null = null;\n private kbdEl: HTMLElement | null = null;\n private imgEl: HTMLElement | null = null;\n private currentPos: { x: number; y: number } = { x: 8, y: 8 };\n private aborted = false;\n\n constructor(opts: AnimatorOptions) {\n this.stage = opts.stage;\n this.timings = { ...DEFAULT_TIMINGS, ...(opts.timings ?? {}) };\n this.onPhaseChange = opts.onPhaseChange;\n this.refreshDom();\n }\n\n setTimings(t: Partial<CursorTimings>): void {\n this.timings = { ...this.timings, ...t };\n }\n\n /** Re-point the animator at a (possibly relocated) stage element and re-read\n * its children. Needed when a host re-mounts the stage subtree — e.g. the\n * Lit player switching presentation templates moves ``.steppy-stage`` to a\n * new DOM position, and the cached ``stage`` ref would otherwise go stale. */\n setStage(stage: HTMLElement): void {\n this.stage = stage;\n this.refreshDom();\n }\n\n abort(): void {\n this.aborted = true;\n }\n\n hide(): void {\n if (this.cursorEl) this.cursorEl.classList.remove('visible');\n if (this.kbdEl) this.kbdEl.classList.remove('visible');\n this.onPhaseChange?.('idle');\n }\n\n /** Re-read stage children. Call after the stage's DOM has been re-rendered. */\n refreshDom(): void {\n this.cursorEl = this.stage.querySelector<HTMLElement>('.steppy-cursor');\n this.rippleEl = this.stage.querySelector<HTMLElement>('.steppy-ripple');\n this.kbdEl = this.stage.querySelector<HTMLElement>('.steppy-kbd');\n this.imgEl = this.stage.querySelector<HTMLImageElement>('img');\n }\n\n /**\n * Normalize a frame's cursor behavior into an ordered list of targets.\n * ``type-multi`` expands into N targets of kind ``type``; single-target\n * variants produce a single entry. Returns ``[]`` when there's nothing to\n * animate (cursor is null or no targets).\n */\n static normalizeTargets(behavior: CursorBehavior | null): NormalizedTarget[] {\n if (!behavior) return [];\n if (behavior.kind === 'type-multi') {\n return behavior.targets.map(\n (t: MultiTarget): NormalizedTarget => ({\n bbox: t.bbox,\n value: t.value,\n selector: t.selector,\n kind: 'type',\n }),\n );\n }\n const tgt = behavior.target as SingleTarget;\n const value = behavior.kind === 'type' ? behavior.value : undefined;\n return [\n {\n bbox: tgt.bbox,\n value,\n selector: tgt.selector,\n kind: behavior.kind === 'click' ? 'click' : behavior.kind === 'hover' ? 'hover' : 'type',\n },\n ];\n }\n\n /** Wait for the screenshot ``<img>`` to be ready (load or error). */\n async waitImageReady(): Promise<void> {\n const img = this.imgEl as HTMLImageElement | null;\n if (!img) return;\n if (img.complete && img.naturalWidth) return;\n await new Promise<void>((resolve) => {\n const done = () => resolve();\n img.addEventListener('load', done, { once: true });\n img.addEventListener('error', done, { once: true });\n });\n }\n\n /**\n * Full sequence over every target in ``frame.cursor`` — historical\n * stepbystep behavior. No user interaction.\n */\n async animateFrame(frame: AnimatorFrame): Promise<void> {\n this.aborted = false;\n this.refreshDom();\n if (!this.cursorEl) return;\n if (!frame.cursor) {\n this.hide();\n return;\n }\n await this.waitImageReady();\n const targets = CursorAnimator.normalizeTargets(frame.cursor);\n this.currentPos = { x: 8, y: 8 };\n this.cursorEl.classList.add('visible');\n for (let i = 0; i < targets.length; i++) {\n if (this.aborted) return;\n await this.travelToTargetIndex(frame, targets, i);\n if (this.aborted) return;\n await this.playTargetActionIndex(frame, targets, i);\n if (this.aborted) return;\n await sleep(this.timings.post_action_ms);\n }\n }\n\n /**\n * Interactive mode: move the cursor to ``targetIndex`` and pulse it. Caller\n * waits for user input before invoking ``playTargetAction``.\n */\n async travelToTarget(frame: AnimatorFrame, targetIndex: number): Promise<void> {\n this.aborted = false;\n this.refreshDom();\n if (!this.cursorEl) return;\n if (!frame.cursor) {\n this.hide();\n return;\n }\n await this.waitImageReady();\n const targets = CursorAnimator.normalizeTargets(frame.cursor);\n this.cursorEl.classList.add('visible');\n await this.travelToTargetIndex(frame, targets, targetIndex);\n }\n\n /**\n * Interactive mode: run the action animation for ``targetIndex`` and the\n * post-action settling beat.\n */\n async playTargetAction(frame: AnimatorFrame, targetIndex: number): Promise<void> {\n this.aborted = false;\n this.refreshDom();\n if (!frame.cursor) return;\n const targets = CursorAnimator.normalizeTargets(frame.cursor);\n await this.playTargetActionIndex(frame, targets, targetIndex);\n if (this.aborted) return;\n await sleep(this.timings.post_action_ms);\n }\n\n /**\n * Pure helper: project a capture-space bbox into the displayed coordinate\n * space. Returns ``null`` when the image hasn't laid out yet. Exposed so\n * the Lit player can place hotspots without duplicating the math.\n */\n computeDisplayRect(bbox: Bbox | null | undefined, viewport: Viewport | null | undefined): DisplayRect | null {\n const img = this.imgEl;\n if (!img || !bbox) return null;\n const scale = getDisplayScale(img, viewport);\n if (!scale) return null;\n return scaleRect(bbox, scale);\n }\n\n // ── Internal building blocks ───────────────────────────────────────────\n\n private async travelToTargetIndex(\n frame: AnimatorFrame,\n targets: NormalizedTarget[],\n index: number,\n ): Promise<void> {\n const tgt = targets[index];\n const cursor = this.cursorEl;\n if (!tgt || !cursor) return;\n const center = scaleBbox(tgt.bbox, this.imgEl!, frame.viewport);\n if (!center) return;\n\n this.onPhaseChange?.('travel', tgt);\n await this.travelTo(cursor, this.currentPos, center);\n this.currentPos = center;\n\n this.onPhaseChange?.('pre-action', tgt);\n // Pulse: drop the class, force reflow to restart the animation, re-add.\n cursor.classList.remove('pulse');\n void cursor.offsetWidth;\n cursor.classList.add('pulse');\n await sleep(this.timings.pre_action_ms);\n cursor.classList.remove('pulse');\n }\n\n private async playTargetActionIndex(\n frame: AnimatorFrame,\n targets: NormalizedTarget[],\n index: number,\n ): Promise<void> {\n const tgt = targets[index];\n if (!tgt) return;\n const center = scaleBbox(tgt.bbox, this.imgEl!, frame.viewport) || this.currentPos;\n this.onPhaseChange?.('action', tgt);\n if (tgt.kind === 'click') {\n if (this.rippleEl) this.fireClick(this.rippleEl, center);\n await sleep(this.timings.action_ms);\n } else if (tgt.kind === 'type') {\n if (this.kbdEl) await this.typeValue(this.kbdEl, center, tgt.value);\n } else {\n // hover: linger\n await sleep(this.timings.action_ms);\n }\n this.onPhaseChange?.('post-action', tgt);\n }\n\n private async travelTo(\n cursor: HTMLElement,\n from: { x: number; y: number },\n to: { x: number; y: number },\n ): Promise<void> {\n const duration = travelDuration(from, to, this.timings.travel_speed_px_per_ms);\n const cp = bezierControlPoint(from, to);\n return new Promise<void>((resolve) => {\n const start = performance.now();\n const frame = (now: number) => {\n if (this.aborted) {\n resolve();\n return;\n }\n const raw = Math.min(1, (now - start) / duration);\n const t = easeInOut(raw);\n const x = (1 - t) * (1 - t) * from.x + 2 * (1 - t) * t * cp.x + t * t * to.x;\n const y = (1 - t) * (1 - t) * from.y + 2 * (1 - t) * t * cp.y + t * t * to.y;\n cursor.style.left = `${x}px`;\n cursor.style.top = `${y}px`;\n if (raw < 1) requestAnimationFrame(frame);\n else resolve();\n };\n requestAnimationFrame(frame);\n });\n }\n\n private fireClick(ripple: HTMLElement, to: { x: number; y: number }): void {\n ripple.style.left = `${to.x}px`;\n ripple.style.top = `${to.y}px`;\n ripple.classList.remove('fire');\n void ripple.offsetWidth;\n ripple.classList.add('fire');\n }\n\n private async typeValue(\n kbd: HTMLElement,\n to: { x: number; y: number },\n value: string | undefined,\n ): Promise<void> {\n kbd.style.left = `${to.x + 16}px`;\n kbd.style.top = `${to.y + 16}px`;\n kbd.textContent = '';\n kbd.classList.add('visible');\n const chars = (value ?? '').split('');\n const per = chars.length ? this.timings.action_ms / chars.length : this.timings.action_ms;\n for (const ch of chars) {\n if (this.aborted) break;\n kbd.textContent = (kbd.textContent ?? '') + ch;\n await sleep(per);\n }\n await sleep(80);\n kbd.classList.remove('visible');\n }\n}\n","/**\n * Legacy IIFE — drop-in replacement for the inline JS that previously lived\n * in [templates/static/cursor.js.j2](../../../../templates/static/cursor.js.j2)\n * and the cursor block of [templates/guide.html.j2](../../../../templates/guide.html.j2).\n *\n * Reads ``window.__STEPPY_STEPS__`` (per-step frame data) and\n * ``window.__STEPPY_TIMINGS__`` (cursor timing overrides), then animates each\n * step's cursor when its ``.steppy-step`` section scrolls into view. This is\n * the exact contract those Jinja templates already produce; making them\n * include this bundle replaces ~175 lines of duplicated JS with a single\n * built artifact.\n *\n * Two consumers:\n *\n * - **Static / standalone HTML** (``cursor.js.j2`` / ``guide.html.j2``): the\n * page sets the ``__STEPPY_STEPS__`` globals before the bundle loads, so the\n * bundle auto-inits on DOM-ready over the whole document.\n * - **Angular host** (``angular/component.ts.j2``): there are no globals and\n * the guide HTML is injected via ``[innerHTML]`` *after* DOM-ready (and\n * re-injected on locale/layout/mode change). The bundle never auto-inits in\n * that case; instead it exposes ``window.__STEPPY_CURSOR__.mount(root, steps,\n * timings)`` so the component can (re)drive the cursor over its own subtree\n * each time the DOM is swapped. ``mount`` returns a disposer that disconnects\n * the observer and aborts any in-flight animation.\n *\n * Output format: IIFE bundle. Vite builds this via ``vite.iife.config.ts``.\n */\n\nimport type { CursorTimings } from './types.js';\nimport { CursorAnimator } from './animator.js';\n\ninterface LegacyFrame {\n screenshot: string;\n viewport: { width: number; height: number } | null;\n cursor: Parameters<CursorAnimator['animateFrame']>[0]['cursor'];\n}\n\ninterface LegacyStep {\n index: number;\n frames: LegacyFrame[];\n}\n\ntype LegacyTimings = Partial<CursorTimings> | undefined;\n\ninterface SteppyCursorApi {\n /** Drive the cursor over every ``.steppy-step`` under ``root``, animating\n * each step as it scrolls into view. Returns a disposer. */\n mount(root: ParentNode, steps: LegacyStep[], timings?: LegacyTimings): () => void;\n /** Auto-init entry point used by the static/standalone templates (reads the\n * ``window.__STEPPY_STEPS__`` globals and mounts over ``document``). */\n init(): void;\n}\n\ndeclare global {\n interface Window {\n __STEPPY_STEPS__?: LegacyStep[];\n __STEPPY_STEPS_BY_LAYOUT__?: Record<string, LegacyStep[]>;\n __STEPPY_TIMINGS__?: Partial<CursorTimings>;\n __STEPPY_CURSOR__?: SteppyCursorApi;\n }\n}\n\nfunction animateStep(\n section: Element,\n step: LegacyStep | undefined,\n timings: LegacyTimings,\n animators?: CursorAnimator[],\n): Promise<void> {\n if (!step) return Promise.resolve();\n const stages = Array.from(section.querySelectorAll<HTMLElement>('.steppy-stage'));\n const frames = step.frames ?? [];\n return (async () => {\n for (let i = 0; i < stages.length; i++) {\n const stage = stages[i]!;\n const frame = frames[i];\n if (!frame) continue;\n const animator = new CursorAnimator({ stage, timings });\n animators?.push(animator);\n await animator.animateFrame(frame);\n }\n })();\n}\n\n/**\n * Drive the cursor over a subtree. Used directly by the Angular host (which\n * passes its component root and the per-(locale, layout) step data) and\n * indirectly by ``init`` for the static templates (which pass ``document`` and\n * the ``window.__STEPPY_STEPS__`` globals).\n */\nfunction mount(root: ParentNode, steps: LegacyStep[], timings?: LegacyTimings): () => void {\n const sections = Array.from(root.querySelectorAll<HTMLElement>('.steppy-step'));\n const animators: CursorAnimator[] = [];\n\n const runSection = (section: HTMLElement): Promise<void> => {\n const idxAttr = section.dataset.stepIndex;\n const idx = idxAttr !== undefined ? parseInt(idxAttr, 10) - 1 : -1;\n return animateStep(section, idx >= 0 ? steps[idx] : undefined, timings, animators);\n };\n\n let io: IntersectionObserver | null = null;\n if (!('IntersectionObserver' in window)) {\n // Fallback: animate every section sequentially.\n void (async () => {\n for (const section of sections) await runSection(section);\n })();\n } else {\n io = new IntersectionObserver(\n (entries) => {\n entries.forEach((entry) => {\n if (!entry.isIntersecting) return;\n io!.unobserve(entry.target);\n void runSection(entry.target as HTMLElement);\n });\n },\n { threshold: 0.5 },\n );\n sections.forEach((section) => io!.observe(section));\n }\n\n return function dispose(): void {\n if (io) io.disconnect();\n animators.forEach((a) => a.abort());\n };\n}\n\nfunction init(): void {\n mount(document, window.__STEPPY_STEPS__ ?? [], window.__STEPPY_TIMINGS__);\n}\n\n// Expose the programmatic API so SPA hosts (Angular) can (re)drive the cursor\n// over content injected after page load. Harmless for the static templates.\nwindow.__STEPPY_CURSOR__ = { mount, init };\n\n// Auto-init only when the page pre-declared the step globals (static /\n// standalone HTML). In an SPA the globals are absent and the host calls\n// ``mount`` explicitly after each render, so auto-init would be a no-op anyway\n// — guarding here avoids spinning up a stray document-wide observer.\nfunction autoInit(): void {\n if (!window.__STEPPY_STEPS__ && !window.__STEPPY_STEPS_BY_LAYOUT__) return;\n init();\n}\n\nif (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', autoInit);\n} else {\n autoInit();\n}\n"],"names":["DEFAULT_TIMINGS","sleep","ms","resolve","easeInOut","t","getDisplayScale","img","viewport","rect","scaleRect","bbox","scale","rectCenter","scaleBbox","travelDuration","from","to","speed","dx","dy","dist","bezierControlPoint","mx","my","nx","ny","CursorAnimator","opts","_a","stage","behavior","tgt","value","done","frame","targets","i","targetIndex","index","cursor","center","_b","duration","cp","start","now","raw","x","y","ripple","kbd","chars","per","ch","animateStep","section","step","timings","animators","stages","frames","animator","mount","root","steps","sections","runSection","idxAttr","idx","io","entries","entry","a","init","autoInit"],"mappings":"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"}
|