@prestyj/cli 5.28.1 → 5.29.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.
Files changed (316) hide show
  1. package/assets/motion/bin/contact-sheet.mjs +9 -3
  2. package/assets/motion/bin/cues.mjs +337 -0
  3. package/assets/motion/bin/library.mjs +53 -10
  4. package/assets/motion/bin/motion-blur.mjs +943 -0
  5. package/assets/motion/bin/motion-check.mjs +354 -3
  6. package/assets/motion/bin/music-fit.mjs +436 -0
  7. package/assets/motion/bin/pdf-extract.mjs +22 -10
  8. package/assets/motion/bin/reference-study.mjs +346 -0
  9. package/assets/motion/bin/score-synth.mjs +1052 -93
  10. package/assets/motion/library/README.md +50 -14
  11. package/assets/motion/library/kit/moves.js +1981 -0
  12. package/assets/motion/library/library.json +232 -0
  13. package/assets/motion/library/pieces/camera-rig/meta.json +13 -0
  14. package/assets/motion/library/pieces/camera-rig/piece.html +153 -0
  15. package/assets/motion/library/pieces/camera-rig/preview.jpg +0 -0
  16. package/assets/motion/library/pieces/chain-knock/meta.json +13 -0
  17. package/assets/motion/library/pieces/chain-knock/piece.html +195 -0
  18. package/assets/motion/library/pieces/chain-knock/preview.jpg +0 -0
  19. package/assets/motion/library/pieces/gather-to-logo/meta.json +13 -0
  20. package/assets/motion/library/pieces/gather-to-logo/piece.html +159 -0
  21. package/assets/motion/library/pieces/gather-to-logo/preview.jpg +0 -0
  22. package/assets/motion/library/pieces/morph-carry/meta.json +13 -0
  23. package/assets/motion/library/pieces/morph-carry/piece.html +173 -0
  24. package/assets/motion/library/pieces/morph-carry/preview.jpg +0 -0
  25. package/assets/motion/library/pieces/one-shape-journey/meta.json +13 -0
  26. package/assets/motion/library/pieces/one-shape-journey/piece.html +195 -0
  27. package/assets/motion/library/pieces/one-shape-journey/preview.jpg +0 -0
  28. package/assets/motion/library/pieces/open-from-subject/meta.json +13 -0
  29. package/assets/motion/library/pieces/open-from-subject/piece.html +168 -0
  30. package/assets/motion/library/pieces/open-from-subject/preview.jpg +0 -0
  31. package/assets/motion/library/pieces/request-to-result/meta.json +13 -0
  32. package/assets/motion/library/pieces/request-to-result/piece.html +212 -0
  33. package/assets/motion/library/pieces/request-to-result/preview.jpg +0 -0
  34. package/assets/motion/library/pieces/scale-dive/meta.json +13 -0
  35. package/assets/motion/library/pieces/scale-dive/piece.html +321 -0
  36. package/assets/motion/library/pieces/scale-dive/preview.jpg +0 -0
  37. package/assets/motion/library/pieces/screen-replica-steps/meta.json +13 -0
  38. package/assets/motion/library/pieces/screen-replica-steps/piece.html +366 -0
  39. package/assets/motion/library/pieces/screen-replica-steps/preview.jpg +0 -0
  40. package/assets/motion/library/pieces/zoom-into-card/meta.json +13 -0
  41. package/assets/motion/library/pieces/zoom-into-card/piece.html +179 -0
  42. package/assets/motion/library/pieces/zoom-into-card/preview.jpg +0 -0
  43. package/assets/motion/library/sheets/diagram.jpg +0 -0
  44. package/assets/motion/library/sheets/frame.jpg +0 -0
  45. package/assets/motion/library/sheets/transition.jpg +0 -0
  46. package/assets/motion/library/sheets/ui.jpg +0 -0
  47. package/assets/motion/references/build-sheet.md +206 -0
  48. package/assets/motion/references/runtime/determinism-rules.md +1 -1
  49. package/assets/motion/references/runtime/gsap-easing-and-stagger.md +29 -29
  50. package/assets/motion/references/runtime/inputs-and-assets.md +7 -12
  51. package/assets/motion/references/runtime/lint-validate-inspect.md +3 -3
  52. package/assets/motion/references/runtime/minimal-composition.md +1 -1
  53. package/assets/motion/references/runtime/preview-render.md +3 -3
  54. package/assets/motion/skills/app-walkthrough/SKILL.md +66 -0
  55. package/assets/motion/skills/before-after/SKILL.md +53 -0
  56. package/assets/motion/skills/brand-kit/SKILL.md +3 -3
  57. package/assets/motion/skills/dev-tool-video/SKILL.md +57 -0
  58. package/assets/motion/skills/launch-video/SKILL.md +62 -0
  59. package/assets/motion/skills/match-reference/SKILL.md +58 -0
  60. package/assets/motion/skills/motion/SKILL.md +78 -85
  61. package/assets/motion/skills/source-ingest/SKILL.md +17 -6
  62. package/assets/motion/skills/website-video/SKILL.md +59 -0
  63. package/assets/skills/bulletproof/SKILL.md +36 -11
  64. package/assets/skills/bulletproof/references/agent-surface.md +19 -9
  65. package/assets/skills/bulletproof/references/audit-protocol.md +20 -5
  66. package/assets/skills/bulletproof/references/platform-playbooks.md +5 -4
  67. package/assets/skills/bulletproof/references/provenance.md +26 -1
  68. package/assets/skills/bulletproof/references/secure-defaults.md +6 -5
  69. package/assets/skills/bulletproof/references/supply-chain.md +21 -17
  70. package/assets/skills/bulletproof/references/threat-landscape.md +28 -26
  71. package/assets/skills/bulletproof/references/verification.md +2 -0
  72. package/assets/skills/clarify/SKILL.md +25 -16
  73. package/assets/skills/code-review/SKILL.md +71 -13
  74. package/assets/skills/code-review/references/agent-diffs.md +27 -0
  75. package/assets/skills/code-review/references/tests.md +19 -0
  76. package/assets/skills/compliance-guard/SKILL.md +20 -5
  77. package/assets/skills/compliance-guard/references/artifacts.md +1 -1
  78. package/assets/skills/compliance-guard/references/eu-uk.md +16 -16
  79. package/assets/skills/compliance-guard/references/lawsuit-vectors.md +5 -5
  80. package/assets/skills/compliance-guard/references/provenance.md +41 -2
  81. package/assets/skills/compliance-guard/references/sector-gates.md +3 -3
  82. package/assets/skills/compliance-guard/references/security-baseline.md +2 -2
  83. package/assets/skills/compliance-guard/references/trigger-map.md +5 -5
  84. package/assets/skills/compliance-guard/references/us.md +27 -21
  85. package/assets/skills/durable/SKILL.md +87 -79
  86. package/assets/skills/durable/references/agent-db-safety.md +69 -0
  87. package/assets/skills/durable/references/backups-and-runtime.md +19 -12
  88. package/assets/skills/durable/references/migrations-and-schema.md +13 -6
  89. package/assets/skills/evidence-led-ui/SKILL.md +69 -127
  90. package/assets/skills/evidence-led-ui/references/anti-defaults.md +107 -208
  91. package/assets/skills/evidence-led-ui/references/direction.md +124 -0
  92. package/assets/skills/evidence-led-ui/references/production-contract.md +8 -0
  93. package/assets/skills/evidence-led-ui/references/provenance.md +24 -1
  94. package/assets/skills/lean/SKILL.md +90 -71
  95. package/assets/skills/lean/references/memory-and-processes.md +3 -2
  96. package/assets/skills/lean/references/playbooks.md +37 -12
  97. package/assets/skills/refactoring/SKILL.md +24 -3
  98. package/assets/skills/refactoring/references/agent-pitfalls.md +4 -1
  99. package/assets/skills/refactoring/references/legacy.md +21 -0
  100. package/assets/skills/root-cause/SKILL.md +20 -10
  101. package/assets/skills/shared-language/SKILL.md +16 -14
  102. package/assets/skills/tdd/SKILL.md +27 -15
  103. package/dist/app-sidecar.js +203 -47
  104. package/dist/app-sidecar.js.map +1 -1
  105. package/dist/cli.js +17 -26
  106. package/dist/cli.js.map +1 -1
  107. package/dist/core/acceptance-checks.d.ts +48 -0
  108. package/dist/core/acceptance-checks.js +144 -0
  109. package/dist/core/acceptance-checks.js.map +1 -0
  110. package/dist/core/agent-session.d.ts +106 -72
  111. package/dist/core/agent-session.js +539 -399
  112. package/dist/core/agent-session.js.map +1 -1
  113. package/dist/core/agents.d.ts +6 -5
  114. package/dist/core/agents.js.map +1 -1
  115. package/dist/core/ask-user.d.ts +90 -8
  116. package/dist/core/ask-user.js +124 -13
  117. package/dist/core/ask-user.js.map +1 -1
  118. package/dist/core/bundled-agents.js +1 -3
  119. package/dist/core/bundled-agents.js.map +1 -1
  120. package/dist/core/cache-diagnostics.d.ts +68 -0
  121. package/dist/core/cache-diagnostics.js +196 -0
  122. package/dist/core/cache-diagnostics.js.map +1 -0
  123. package/dist/core/cache-expiry.d.ts +87 -0
  124. package/dist/core/cache-expiry.js +111 -0
  125. package/dist/core/cache-expiry.js.map +1 -0
  126. package/dist/core/compaction/compactor.js +78 -48
  127. package/dist/core/compaction/compactor.js.map +1 -1
  128. package/dist/core/compaction/plan-step-policy.d.ts +46 -0
  129. package/dist/core/compaction/plan-step-policy.js +57 -0
  130. package/dist/core/compaction/plan-step-policy.js.map +1 -0
  131. package/dist/core/destructive-git-guard.d.ts +90 -0
  132. package/dist/core/destructive-git-guard.js +871 -0
  133. package/dist/core/destructive-git-guard.js.map +1 -0
  134. package/dist/core/event-bus.d.ts +3 -0
  135. package/dist/core/event-bus.js +5 -0
  136. package/dist/core/event-bus.js.map +1 -1
  137. package/dist/core/injection-detect.d.ts +38 -0
  138. package/dist/core/injection-detect.js +232 -0
  139. package/dist/core/injection-detect.js.map +1 -0
  140. package/dist/core/keep-awake.d.ts +88 -0
  141. package/dist/core/keep-awake.js +251 -0
  142. package/dist/core/keep-awake.js.map +1 -0
  143. package/dist/core/mcp/client.d.ts +72 -0
  144. package/dist/core/mcp/client.js +264 -41
  145. package/dist/core/mcp/client.js.map +1 -1
  146. package/dist/core/mcp/content.js +6 -2
  147. package/dist/core/mcp/content.js.map +1 -1
  148. package/dist/core/mcp/store.d.ts +6 -1
  149. package/dist/core/mcp/store.js +12 -1
  150. package/dist/core/mcp/store.js.map +1 -1
  151. package/dist/core/mcp/types.d.ts +18 -0
  152. package/dist/core/model-unavailable.d.ts +14 -0
  153. package/dist/core/model-unavailable.js +23 -0
  154. package/dist/core/model-unavailable.js.map +1 -0
  155. package/dist/core/node-debugger.d.ts +148 -0
  156. package/dist/core/node-debugger.js +642 -0
  157. package/dist/core/node-debugger.js.map +1 -0
  158. package/dist/core/package-threats.d.ts +18 -0
  159. package/dist/core/package-threats.js +168 -0
  160. package/dist/core/package-threats.js.map +1 -0
  161. package/dist/core/persistent-shell.d.ts +58 -6
  162. package/dist/core/persistent-shell.js +331 -49
  163. package/dist/core/persistent-shell.js.map +1 -1
  164. package/dist/core/process-manager.d.ts +14 -0
  165. package/dist/core/process-manager.js +61 -0
  166. package/dist/core/process-manager.js.map +1 -1
  167. package/dist/core/progress/git-xp.js +8 -14
  168. package/dist/core/progress/git-xp.js.map +1 -1
  169. package/dist/core/session-history.d.ts +12 -0
  170. package/dist/core/session-history.js +27 -0
  171. package/dist/core/session-history.js.map +1 -1
  172. package/dist/core/session-manager.d.ts +13 -1
  173. package/dist/core/session-manager.js +38 -18
  174. package/dist/core/session-manager.js.map +1 -1
  175. package/dist/core/session-summary-index.d.ts +37 -0
  176. package/dist/core/session-summary-index.js +172 -0
  177. package/dist/core/session-summary-index.js.map +1 -0
  178. package/dist/core/settings-manager.d.ts +2 -0
  179. package/dist/core/settings-manager.js +10 -0
  180. package/dist/core/settings-manager.js.map +1 -1
  181. package/dist/core/shell-threats-popular-packages.d.ts +11 -0
  182. package/dist/core/shell-threats-popular-packages.js +675 -0
  183. package/dist/core/shell-threats-popular-packages.js.map +1 -0
  184. package/dist/core/shell-threats.d.ts +8 -0
  185. package/dist/core/shell-threats.js +186 -0
  186. package/dist/core/shell-threats.js.map +1 -0
  187. package/dist/core/skills.js +3 -1
  188. package/dist/core/skills.js.map +1 -1
  189. package/dist/core/stream-rules.d.ts +30 -0
  190. package/dist/core/stream-rules.js +151 -0
  191. package/dist/core/stream-rules.js.map +1 -0
  192. package/dist/core/subagent-manager.d.ts +20 -5
  193. package/dist/core/subagent-manager.js +22 -8
  194. package/dist/core/subagent-manager.js.map +1 -1
  195. package/dist/core/subagent-receipt.d.ts +54 -0
  196. package/dist/core/subagent-receipt.js +276 -0
  197. package/dist/core/subagent-receipt.js.map +1 -0
  198. package/dist/core/subagent-turn-record.d.ts +2 -0
  199. package/dist/core/subagent-turn-record.js.map +1 -1
  200. package/dist/core/test-impact.d.ts +73 -0
  201. package/dist/core/test-impact.js +467 -0
  202. package/dist/core/test-impact.js.map +1 -0
  203. package/dist/core/thinking-level.d.ts +1 -1
  204. package/dist/core/thinking-level.js +1 -1
  205. package/dist/core/thinking-level.js.map +1 -1
  206. package/dist/core/verification-gate.d.ts +2 -0
  207. package/dist/core/verification-gate.js +4 -0
  208. package/dist/core/verification-gate.js.map +1 -1
  209. package/dist/core/verification-snapshot.js +3 -5
  210. package/dist/core/verification-snapshot.js.map +1 -1
  211. package/dist/core/workspace-guard.d.ts +18 -7
  212. package/dist/core/workspace-guard.js +227 -60
  213. package/dist/core/workspace-guard.js.map +1 -1
  214. package/dist/interactive.js +2 -1
  215. package/dist/interactive.js.map +1 -1
  216. package/dist/modes/subagent-worker-mode.js +34 -6
  217. package/dist/modes/subagent-worker-mode.js.map +1 -1
  218. package/dist/motion-agent/motion-agent.d.ts +6 -2
  219. package/dist/motion-agent/motion-agent.js +5 -7
  220. package/dist/motion-agent/motion-agent.js.map +1 -1
  221. package/dist/motion-agent/motion-prompt.d.ts +1 -1
  222. package/dist/motion-agent/motion-prompt.js +14 -19
  223. package/dist/motion-agent/motion-prompt.js.map +1 -1
  224. package/dist/motion-agent/motion-review.d.ts +10 -3
  225. package/dist/motion-agent/motion-review.js +15 -7
  226. package/dist/motion-agent/motion-review.js.map +1 -1
  227. package/dist/motion-agent/motion-studio-context.js +1 -1
  228. package/dist/motion-agent/motion-studio-context.js.map +1 -1
  229. package/dist/system-prompt.js +3 -1
  230. package/dist/system-prompt.js.map +1 -1
  231. package/dist/test-support/keep-alive.d.ts +14 -0
  232. package/dist/test-support/keep-alive.js +17 -0
  233. package/dist/test-support/keep-alive.js.map +1 -0
  234. package/dist/tools/ask-user.js +3 -3
  235. package/dist/tools/ask-user.js.map +1 -1
  236. package/dist/tools/bash-read-evidence.d.ts +10 -0
  237. package/dist/tools/bash-read-evidence.js +133 -0
  238. package/dist/tools/bash-read-evidence.js.map +1 -0
  239. package/dist/tools/bash.d.ts +10 -1
  240. package/dist/tools/bash.js +115 -7
  241. package/dist/tools/bash.js.map +1 -1
  242. package/dist/tools/debug.d.ts +54 -0
  243. package/dist/tools/debug.js +233 -0
  244. package/dist/tools/debug.js.map +1 -0
  245. package/dist/tools/edit.js +12 -4
  246. package/dist/tools/edit.js.map +1 -1
  247. package/dist/tools/goals.d.ts +1 -1
  248. package/dist/tools/index.d.ts +19 -2
  249. package/dist/tools/index.js +47 -7
  250. package/dist/tools/index.js.map +1 -1
  251. package/dist/tools/prompt-hints.js +2 -0
  252. package/dist/tools/prompt-hints.js.map +1 -1
  253. package/dist/tools/read-tracker.d.ts +5 -0
  254. package/dist/tools/read-tracker.js +19 -9
  255. package/dist/tools/read-tracker.js.map +1 -1
  256. package/dist/tools/read.js +3 -2
  257. package/dist/tools/read.js.map +1 -1
  258. package/dist/tools/skill.js +5 -0
  259. package/dist/tools/skill.js.map +1 -1
  260. package/dist/tools/subagent-control.js +44 -8
  261. package/dist/tools/subagent-control.js.map +1 -1
  262. package/dist/tools/subagent-shared.d.ts +29 -8
  263. package/dist/tools/subagent-shared.js +45 -14
  264. package/dist/tools/subagent-shared.js.map +1 -1
  265. package/dist/tools/subagent.d.ts +8 -2
  266. package/dist/tools/subagent.js +28 -10
  267. package/dist/tools/subagent.js.map +1 -1
  268. package/dist/tools/task-output.js +3 -2
  269. package/dist/tools/task-output.js.map +1 -1
  270. package/dist/tools/task-send.d.ts +1 -1
  271. package/dist/tools/task-send.js +15 -1
  272. package/dist/tools/task-send.js.map +1 -1
  273. package/dist/tools/tool-tiers.d.ts +2 -2
  274. package/dist/tools/tool-tiers.js +3 -2
  275. package/dist/tools/tool-tiers.js.map +1 -1
  276. package/dist/tools/truncate.d.ts +21 -0
  277. package/dist/tools/truncate.js +187 -0
  278. package/dist/tools/truncate.js.map +1 -1
  279. package/dist/tools/ui-adopt.js +2 -0
  280. package/dist/tools/ui-adopt.js.map +1 -1
  281. package/dist/ui/App.d.ts +0 -4
  282. package/dist/ui/App.js +5 -28
  283. package/dist/ui/App.js.map +1 -1
  284. package/dist/ui/components/ActivityIndicator.js +1 -0
  285. package/dist/ui/components/ActivityIndicator.js.map +1 -1
  286. package/dist/ui/hooks/useAgentLoop.d.ts +1 -8
  287. package/dist/ui/hooks/useAgentLoop.js +1 -119
  288. package/dist/ui/hooks/useAgentLoop.js.map +1 -1
  289. package/dist/ui/render.d.ts +0 -4
  290. package/dist/ui/render.js +0 -2
  291. package/dist/ui/render.js.map +1 -1
  292. package/dist/utils/git.d.ts +77 -0
  293. package/dist/utils/git.js +285 -21
  294. package/dist/utils/git.js.map +1 -1
  295. package/dist/utils/github-ci.js +2 -1
  296. package/dist/utils/github-ci.js.map +1 -1
  297. package/dist/utils/github.js +11 -9
  298. package/dist/utils/github.js.map +1 -1
  299. package/dist/utils/image.d.ts +14 -0
  300. package/dist/utils/image.js +16 -0
  301. package/dist/utils/image.js.map +1 -1
  302. package/dist/utils/process.d.ts +20 -0
  303. package/dist/utils/process.js +98 -0
  304. package/dist/utils/process.js.map +1 -1
  305. package/package.json +5 -5
  306. package/assets/motion/references/motion-language.md +0 -128
  307. package/assets/motion/skills/video-qa/SKILL.md +0 -89
  308. package/dist/core/ideal-review-subagent.d.ts +0 -56
  309. package/dist/core/ideal-review-subagent.js +0 -112
  310. package/dist/core/ideal-review-subagent.js.map +0 -1
  311. package/dist/core/ideal-review.d.ts +0 -82
  312. package/dist/core/ideal-review.js +0 -242
  313. package/dist/core/ideal-review.js.map +0 -1
  314. package/dist/motion-agent/motion-check-tool.d.ts +0 -35
  315. package/dist/motion-agent/motion-check-tool.js +0 -514
  316. package/dist/motion-agent/motion-check-tool.js.map +0 -1
package/assets/motion/library/pieces/screen-replica-steps/piece.html ADDED
@@ -0,0 +1,366 @@
1
+ <!doctype html>
2
+ <!--
3
+ screen-replica-steps: a real app screen rebuilt as HTML and walked through
4
+ step by step (move kit): default -> dropdown open -> option chosen ->
5
+ saved toast. A cursor presses real element centres; the camera takes one
6
+ close-up per step, follows the cursor between them, and widens at the end.
7
+
8
+ THE METHOD (swap in your own screenshot):
9
+ 1. Replica root = the screenshot's own pixel size (REPLICA_W x REPLICA_H;
10
+ a Retina capture halved). Every element is position:absolute at its
11
+ measured left/top/width/height in screenshot px. Replace the .rs-*
12
+ elements with yours; keep class hooks for the ones the script drives.
13
+ 2. The root is scaled as a whole (FIT, computed to fill 1080 tall) into
14
+ the world layer. Never resize elements to fit; scale the root.
15
+ 3. Every state is one pure function, setState(t), of timeline time,
16
+ driven by kit.drive: it reads the press times and sets the menu,
17
+ hover, chosen value, button press and toast. Any frame seeks exactly.
18
+ 4. The cursor lives inside the replica (replica px) and travels to real
19
+ element centres (kit.cursorPath stops with { el }). Its returned press
20
+ times time the states, so retiming the cursor retimes everything.
21
+ 5. The camera gets one close-up per step (ZOOM_STEP), keyed to the
22
+ cursor's legs (kit.cursorPlan) so it follows the hand, then widens.
23
+ Readable size = font px x FIT x zoom; aim for >= ~32px on screen.
24
+ Needs the move kit: `library.mjs add` installs it; put its <script> in the
25
+ root head after GSAP.
26
+ Params (script top): REPLICA_W / REPLICA_H, CURSOR_AT (cursor starts),
27
+ CURSOR_FROM (replica px), HOLD (pause after each press), ZOOM_STEP,
28
+ WIDEN_AT, CHOICE (index of the option picked).
29
+ -->
30
+ <html lang="en">
31
+ <head>
32
+ <meta charset="UTF-8" />
33
+ <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
34
+ </head>
35
+ <body>
36
+ <div
37
+ id="screen-replica-steps-root"
38
+ data-composition-id="screen-replica-steps"
39
+ data-start="0"
40
+ data-duration="8"
41
+ data-width="1920"
42
+ data-height="1080"
43
+ >
44
+ <style>
45
+ [data-composition-id="screen-replica-steps"] {
46
+ position: absolute;
47
+ inset: 0;
48
+ overflow: hidden;
49
+ color: var(--ink, #111);
50
+ font-family: var(--text, sans-serif);
51
+ }
52
+ [data-composition-id="screen-replica-steps"] .rs-world {
53
+ position: absolute;
54
+ left: 0;
55
+ top: 0;
56
+ width: 1920px;
57
+ height: 1080px;
58
+ }
59
+ /* The replica: screenshot px, scaled as a whole. */
60
+ [data-composition-id="screen-replica-steps"] .rs-replica {
61
+ position: absolute;
62
+ left: 0;
63
+ top: 0;
64
+ width: 1440px;
65
+ height: 900px;
66
+ transform-origin: 0 0;
67
+ overflow: hidden;
68
+ border-radius: 14px;
69
+ background: color-mix(in srgb, var(--field, #fff) 94%, var(--ink, #111));
70
+ border: 1px solid var(--line, rgba(0, 0, 0, 0.16));
71
+ box-sizing: border-box;
72
+ font-size: 17px;
73
+ }
74
+ [data-composition-id="screen-replica-steps"] .rs-replica > * {
75
+ position: absolute;
76
+ box-sizing: border-box;
77
+ }
78
+ [data-composition-id="screen-replica-steps"] .rs-top {
79
+ left: 0;
80
+ top: 0;
81
+ width: 1440px;
82
+ height: 60px;
83
+ border-bottom: 1px solid var(--line, rgba(0, 0, 0, 0.16));
84
+ display: flex;
85
+ align-items: center;
86
+ padding: 0 28px;
87
+ gap: 12px;
88
+ font-weight: 600;
89
+ font-size: 19px;
90
+ }
91
+ [data-composition-id="screen-replica-steps"] .rs-logo {
92
+ width: 26px;
93
+ height: 26px;
94
+ border-radius: 7px;
95
+ background: var(--ink, #111);
96
+ }
97
+ [data-composition-id="screen-replica-steps"] .rs-side {
98
+ left: 0;
99
+ top: 60px;
100
+ width: 240px;
101
+ height: 840px;
102
+ border-right: 1px solid var(--line, rgba(0, 0, 0, 0.16));
103
+ padding: 24px 16px;
104
+ display: flex;
105
+ flex-direction: column;
106
+ gap: 6px;
107
+ color: var(--muted, #666);
108
+ }
109
+ [data-composition-id="screen-replica-steps"] .rs-side div {
110
+ padding: 9px 12px;
111
+ border-radius: 8px;
112
+ }
113
+ [data-composition-id="screen-replica-steps"] .rs-side .on {
114
+ color: var(--ink, #111);
115
+ font-weight: 600;
116
+ background: color-mix(in srgb, var(--ink, #111) 7%, transparent);
117
+ }
118
+ [data-composition-id="screen-replica-steps"] .rs-title {
119
+ left: 300px;
120
+ top: 96px;
121
+ font-size: 32px;
122
+ font-weight: 700;
123
+ letter-spacing: -0.01em;
124
+ }
125
+ [data-composition-id="screen-replica-steps"] .rs-desc {
126
+ left: 300px;
127
+ top: 144px;
128
+ color: var(--muted, #666);
129
+ }
130
+ [data-composition-id="screen-replica-steps"] .rs-label {
131
+ font-weight: 600;
132
+ font-size: 16px;
133
+ }
134
+ [data-composition-id="screen-replica-steps"] .rs-input {
135
+ border-radius: 9px;
136
+ border: 1.5px solid var(--line, rgba(0, 0, 0, 0.2));
137
+ background: var(--field, #fff);
138
+ display: flex;
139
+ align-items: center;
140
+ padding: 0 16px;
141
+ }
142
+ [data-composition-id="screen-replica-steps"] .rs-select {
143
+ left: 300px;
144
+ top: 236px;
145
+ width: 420px;
146
+ height: 50px;
147
+ justify-content: space-between;
148
+ }
149
+ [data-composition-id="screen-replica-steps"] .rs-select.focus {
150
+ border-color: var(--accent, #2f5bff);
151
+ box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent, #2f5bff) 22%, transparent);
152
+ }
153
+ [data-composition-id="screen-replica-steps"] .rs-menu {
154
+ left: 300px;
155
+ top: 294px;
156
+ width: 420px;
157
+ height: 212px;
158
+ padding: 6px;
159
+ border-radius: 10px;
160
+ background: var(--field, #fff);
161
+ border: 1px solid var(--line, rgba(0, 0, 0, 0.18));
162
+ box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.35);
163
+ transform-origin: 50% 0;
164
+ z-index: 2;
165
+ }
166
+ [data-composition-id="screen-replica-steps"] .rs-opt {
167
+ position: absolute;
168
+ left: 6px;
169
+ width: 406px;
170
+ height: 48px;
171
+ display: flex;
172
+ align-items: center;
173
+ padding: 0 14px;
174
+ border-radius: 7px;
175
+ box-sizing: border-box;
176
+ }
177
+ [data-composition-id="screen-replica-steps"] .rs-opt.hover {
178
+ background: color-mix(in srgb, var(--accent, #2f5bff) 16%, transparent);
179
+ }
180
+ [data-composition-id="screen-replica-steps"] .rs-btn {
181
+ height: 48px;
182
+ border-radius: 9px;
183
+ display: grid;
184
+ place-items: center;
185
+ font-weight: 600;
186
+ }
187
+ [data-composition-id="screen-replica-steps"] .rs-save {
188
+ left: 300px;
189
+ top: 520px;
190
+ width: 150px;
191
+ background: var(--accent, #2f5bff);
192
+ color: var(--field, #fff);
193
+ }
194
+ [data-composition-id="screen-replica-steps"] .rs-cancel {
195
+ left: 466px;
196
+ top: 520px;
197
+ width: 120px;
198
+ border: 1.5px solid var(--line, rgba(0, 0, 0, 0.2));
199
+ }
200
+ [data-composition-id="screen-replica-steps"] .rs-toast {
201
+ left: 300px;
202
+ top: 620px;
203
+ width: 420px;
204
+ height: 60px;
205
+ border-radius: 10px;
206
+ background: var(--ink, #111);
207
+ color: var(--field, #fff);
208
+ display: flex;
209
+ align-items: center;
210
+ gap: 12px;
211
+ padding: 0 18px;
212
+ font-weight: 600;
213
+ opacity: 0;
214
+ }
215
+ [data-composition-id="screen-replica-steps"] .rs-cursor {
216
+ left: 0;
217
+ top: 0;
218
+ width: 30px;
219
+ height: 30px;
220
+ z-index: 5;
221
+ filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
222
+ }
223
+ </style>
224
+ <div class="rs-world">
225
+ <div class="rs-replica">
226
+ <!-- edit: replica elements, each at its screenshot position (px) -->
227
+ <div class="rs-top"><span class="rs-logo"></span>Harbor</div>
228
+ <div class="rs-side">
229
+ <div>Home</div>
230
+ <div>Projects</div>
231
+ <div>Members</div>
232
+ <div class="on">Settings</div>
233
+ <div>Billing</div>
234
+ </div>
235
+ <div class="rs-title">Workspace settings</div>
236
+ <div class="rs-desc">Choose where your workspace data is stored.</div>
237
+ <div class="rs-label" style="left: 300px; top: 206px">Data region</div>
238
+ <div class="rs-input rs-select">
239
+ <span class="rs-value">United States (Virginia)</span>
240
+ <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6" /></svg>
241
+ </div>
242
+ <div class="rs-label" data-layout-allow-occlusion data-layout-allow-overlap style="left: 300px; top: 330px">Retention</div>
243
+ <div class="rs-input" data-layout-allow-occlusion data-layout-allow-overlap style="left: 300px; top: 360px; width: 420px; height: 50px">90 days</div>
244
+ <div class="rs-label" data-layout-allow-occlusion data-layout-allow-overlap style="left: 300px; top: 430px">Backups</div>
245
+ <div class="rs-desc" data-layout-allow-occlusion data-layout-allow-overlap style="left: 300px; top: 458px">Daily, kept for 30 days</div>
246
+ <div class="rs-btn rs-save">Save changes</div>
247
+ <div class="rs-btn rs-cancel">Cancel</div>
248
+ <div class="rs-menu" data-layout-allow-occlusion data-layout-allow-overlap>
249
+ <!-- edit: dropdown options (top = 6 + 50 * i) -->
250
+ <div class="rs-opt" style="top: 6px">United States (Virginia)</div>
251
+ <div class="rs-opt" style="top: 56px">Canada (Montréal)</div>
252
+ <div class="rs-opt" style="top: 106px">Europe (Frankfurt)</div>
253
+ <div class="rs-opt" style="top: 156px">Asia Pacific (Tokyo)</div>
254
+ </div>
255
+ <div class="rs-toast">
256
+ <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="var(--field, #fff)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path class="rs-check" d="M20 6L9 17l-5-5" /></svg>
257
+ <!-- edit: toast copy -->
258
+ <span>Settings saved · Region updated</span>
259
+ </div>
260
+ <svg class="rs-cursor" viewBox="0 0 28 28">
261
+ <path d="M5 3.2v19.6c0 .8 1 1.2 1.5.6l4.6-5.1 3.4 7.6c.3.6 1 .9 1.6.6l2.3-1c.6-.3.9-1 .6-1.6l-3.4-7.5h6.8c.8 0 1.2-1 .6-1.6L6.5 2.6C6 2.1 5 2.4 5 3.2z" fill="var(--ink, #111)" stroke="var(--field, #fff)" stroke-width="1.6" stroke-linejoin="round" />
262
+ </svg>
263
+ </div>
264
+ </div>
265
+ </div>
266
+ <script>
267
+ (function () {
268
+ const REPLICA_W = 1440;
269
+ const REPLICA_H = 900;
270
+ const CURSOR_AT = 0.7;
271
+ const CURSOR_FROM = { x: 980, y: 640 };
272
+ const HOLD = 0.75;
273
+ const ZOOM_STEP = 2.2;
274
+ const WIDEN_AT = 6.1;
275
+ const CHOICE = 2;
276
+ const DURATION = 8;
277
+
278
+ const kit = window.GGMotionKit;
279
+ const root = document.querySelector('[data-composition-id="screen-replica-steps"]');
280
+ const world = root.querySelector(".rs-world");
281
+ const replica = root.querySelector(".rs-replica");
282
+ const select = root.querySelector(".rs-select");
283
+ const value = root.querySelector(".rs-value");
284
+ const menu = root.querySelector(".rs-menu");
285
+ const opts = [...root.querySelectorAll(".rs-opt")];
286
+ const save = root.querySelector(".rs-save");
287
+ const toast = root.querySelector(".rs-toast");
288
+ const cursor = root.querySelector(".rs-cursor");
289
+ const tl = gsap.timeline({ paused: true });
290
+
291
+ // 1-2. Scale the replica as a whole to fill the frame height, centred.
292
+ const FIT = Math.min(1920 / REPLICA_W, 1080 / REPLICA_H);
293
+ const OX = (1920 - REPLICA_W * FIT) / 2;
294
+ const OY = (1080 - REPLICA_H * FIT) / 2;
295
+ replica.style.width = `${REPLICA_W}px`;
296
+ replica.style.height = `${REPLICA_H}px`;
297
+ replica.style.left = `${OX}px`;
298
+ replica.style.top = `${OY}px`;
299
+ replica.style.transform = `scale(${FIT})`;
300
+ const toWorld = (p) => ({ x: OX + p.x * FIT, y: OY + p.y * FIT });
301
+
302
+ // 4. The cursor: real element centres, in replica px.
303
+ const STOPS = [
304
+ { ...CURSOR_FROM },
305
+ { el: select, click: true, hold: HOLD },
306
+ { el: opts[CHOICE], click: true, hold: HOLD },
307
+ { el: save, click: true, hold: HOLD + 0.4 },
308
+ { x: 560, y: 600, duration: 0.6 },
309
+ ];
310
+ const cplan = kit.cursorPlan(STOPS, { space: replica });
311
+ const path = kit.cursorPath(tl, cursor, CURSOR_AT, STOPS, { space: replica });
312
+ const [P_OPEN, P_PICK, P_SAVE] = path.presses;
313
+ tl.fromTo(cursor, { opacity: 0 }, { opacity: 1, duration: 0.25 }, CURSOR_AT - 0.1);
314
+
315
+ // 3. Every UI state as a pure function of timeline time.
316
+ const chosen = opts[CHOICE].textContent;
317
+ const original = value.textContent;
318
+ const clamp01 = (v) => Math.min(1, Math.max(0, v));
319
+ function setState(t) {
320
+ const open = t >= P_OPEN && t < P_PICK + 0.12;
321
+ const openP = kit.ease.snap(clamp01((t - P_OPEN) / 0.22));
322
+ select.classList.toggle("focus", t >= P_OPEN - 0.25 && t < P_PICK + 0.3);
323
+ menu.style.opacity = open ? String(openP) : "0";
324
+ menu.style.transform = `scaleY(${open ? 0.92 + 0.08 * openP : 0.92})`;
325
+ opts.forEach((o, i) => o.classList.toggle("hover", i === CHOICE && t >= P_PICK - 0.35 && t < P_PICK + 0.12));
326
+ value.textContent = t >= P_PICK ? chosen : original;
327
+ const press = t >= P_SAVE && t < P_SAVE + 0.16 ? 0.95 : 1;
328
+ save.style.transform = `scale(${press})`;
329
+ const tp = kit.ease.snap(clamp01((t - P_SAVE - 0.15) / 0.45));
330
+ toast.style.opacity = String(tp);
331
+ toast.style.transform = `translateY(${(1 - tp) * 24}px)`;
332
+ }
333
+ kit.drive(tl, 0, DURATION, setState);
334
+ const check = root.querySelector(".rs-check");
335
+ tl.fromTo(check, { opacity: 0 }, { opacity: 1, duration: 0.01 }, P_SAVE + 0.3);
336
+ kit.tick(tl, check, P_SAVE + 0.3, { duration: 0.35 });
337
+
338
+ // 5. One close-up per step, keyed to the cursor's legs; widen at the end.
339
+ const legStart = (i) => CURSOR_AT + cplan.legs[i].start;
340
+ const legDur = (i) => cplan.legs[i].duration + 0.15;
341
+ const c = (el) => toWorld(kit.centerOf(el, replica));
342
+ const sel = c(select);
343
+ const opt = c(opts[CHOICE]);
344
+ const sv = c(save);
345
+ const ts = c(toast);
346
+ const KEYS = [
347
+ { x: 960, y: 540, zoom: 1 },
348
+ { at: legStart(0), x: sel.x + 60, y: (sel.y + opt.y) / 2, zoom: ZOOM_STEP * 0.95, move: "travel", duration: legDur(0) },
349
+ { at: legStart(1), x: opt.x + 60, y: (sel.y + opt.y) / 2 + 10, zoom: ZOOM_STEP * 0.95, move: "travel", duration: legDur(1) },
350
+ { at: legStart(2), x: sv.x + 120, y: sv.y, zoom: ZOOM_STEP, move: "travel", duration: legDur(2) },
351
+ { at: P_SAVE + 0.1, x: ts.x, y: (sv.y + ts.y) / 2, zoom: ZOOM_STEP * 0.9, move: "glide", duration: 0.7 },
352
+ { at: WIDEN_AT, x: 960, y: 540, zoom: 1, move: "glide", duration: 1.1 },
353
+ ];
354
+ kit.camera(tl, world, KEYS, {
355
+ duration: DURATION,
356
+ handheld: { amp: 4, rotate: 0.08, seed: 3 },
357
+ rests: [[WIDEN_AT + 1.1, DURATION]],
358
+ });
359
+ tl.to({}, { duration: Math.max(0, DURATION - tl.duration()) });
360
+
361
+ window.__timelines = window.__timelines || {};
362
+ window.__timelines["screen-replica-steps"] = tl;
363
+ })();
364
+ </script>
365
+ </body>
366
+ </html>
package/assets/motion/library/pieces/zoom-into-card/meta.json ADDED
@@ -0,0 +1,13 @@
1
+ {
2
+ "id": "zoom-into-card",
3
+ "name": "Zoom into card",
4
+ "kind": "transition",
5
+ "description": "Six cards pop in, one is picked and the camera pushes straight through it until its fill becomes the next scene, where a title drops in. Edit the card names, TARGET, and the next scene's kicker and title.",
6
+ "tags": ["handoff", "continuous", "kit", "zoom", "dive", "camera", "cards", "grid"],
7
+ "fonts": [],
8
+ "duration": 5,
9
+ "previewAt": 1.9,
10
+ "license": "original",
11
+ "requires": ["kit"],
12
+ "previewLook": "swiss-grid"
13
+ }
package/assets/motion/library/pieces/zoom-into-card/piece.html ADDED
@@ -0,0 +1,179 @@
1
+ <!doctype html>
2
+ <!--
3
+ zoom-into-card: six cards pop in on a world layer; one card is picked
4
+ (it takes the next scene's colour and its words clear), then the camera
5
+ pushes straight through it until its fill is the whole frame, and that
6
+ fill is the next scene: a title drops in on it. The dived card and the
7
+ next scene share one colour (--ink), so the handoff has no seam.
8
+ Needs the move kit: `library.mjs add` installs it; put its <script> in the
9
+ root head after GSAP.
10
+ Params (script top): TARGET (index 0-5 of the card to dive into), POP_AT /
11
+ POP_STAGGER (cards arrive), PICK_AT (target highlights), DIVE_AT /
12
+ DIVE_DUR / DIVE_ZOOM (the push), TITLE_DELAY (dive end -> title).
13
+ -->
14
+ <html lang="en">
15
+ <head>
16
+ <meta charset="UTF-8" />
17
+ <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
18
+ </head>
19
+ <body>
20
+ <div
21
+ id="zoom-into-card-root"
22
+ data-composition-id="zoom-into-card"
23
+ data-start="0"
24
+ data-duration="5"
25
+ data-width="1920"
26
+ data-height="1080"
27
+ >
28
+ <style>
29
+ [data-composition-id="zoom-into-card"] {
30
+ position: absolute;
31
+ inset: 0;
32
+ overflow: hidden;
33
+ color: var(--ink, #111);
34
+ font-family: var(--text, sans-serif);
35
+ }
36
+ [data-composition-id="zoom-into-card"] .zc-world {
37
+ position: absolute;
38
+ left: 0;
39
+ top: 0;
40
+ width: 1920px;
41
+ height: 1080px;
42
+ }
43
+ [data-composition-id="zoom-into-card"] .zc-grid {
44
+ position: absolute;
45
+ left: 210px;
46
+ top: 230px;
47
+ display: grid;
48
+ grid-template-columns: repeat(3, 460px);
49
+ grid-template-rows: repeat(2, 280px);
50
+ gap: 60px;
51
+ }
52
+ [data-composition-id="zoom-into-card"] .zc-card {
53
+ position: relative;
54
+ box-sizing: border-box;
55
+ padding: 34px 38px;
56
+ border-radius: var(--radius, 18px);
57
+ background: var(--field, #fff);
58
+ border: 2px solid var(--line, rgba(0, 0, 0, 0.18));
59
+ display: flex;
60
+ flex-direction: column;
61
+ justify-content: space-between;
62
+ }
63
+ [data-composition-id="zoom-into-card"] .zc-fill {
64
+ position: absolute;
65
+ inset: -2px;
66
+ border-radius: inherit;
67
+ background: var(--ink, #111);
68
+ opacity: 0;
69
+ }
70
+ [data-composition-id="zoom-into-card"] .zc-num {
71
+ position: relative;
72
+ font-family: var(--mono, monospace);
73
+ font-size: 24px;
74
+ letter-spacing: 0.08em;
75
+ color: var(--muted, #666);
76
+ }
77
+ [data-composition-id="zoom-into-card"] .zc-name {
78
+ position: relative;
79
+ font-family: var(--display, sans-serif);
80
+ font-weight: var(--display-weight, 700);
81
+ font-stretch: var(--display-stretch, 100%);
82
+ letter-spacing: var(--display-tracking, -0.02em);
83
+ font-size: 54px;
84
+ line-height: 1;
85
+ }
86
+ [data-composition-id="zoom-into-card"] .zc-next {
87
+ position: absolute;
88
+ inset: 0;
89
+ background: var(--ink, #111);
90
+ color: var(--field, #fff);
91
+ display: flex;
92
+ flex-direction: column;
93
+ align-items: center;
94
+ justify-content: center;
95
+ gap: 36px;
96
+ }
97
+ [data-composition-id="zoom-into-card"] .zc-kicker {
98
+ font-family: var(--mono, monospace);
99
+ font-size: 28px;
100
+ letter-spacing: 0.12em;
101
+ text-transform: uppercase;
102
+ opacity: 0;
103
+ }
104
+ [data-composition-id="zoom-into-card"] .zc-title {
105
+ font-family: var(--display, sans-serif);
106
+ font-weight: var(--display-weight, 700);
107
+ font-stretch: var(--display-stretch, 100%);
108
+ letter-spacing: var(--display-tracking, -0.02em);
109
+ font-size: 170px;
110
+ line-height: 1;
111
+ white-space: nowrap;
112
+ }
113
+ </style>
114
+ <div class="zc-world">
115
+ <div class="zc-grid">
116
+ <!-- edit: the six cards (number + name); the dived one is picked by TARGET -->
117
+ <div class="zc-card"><div class="zc-num">01</div><div class="zc-name">Plan</div></div>
118
+ <div class="zc-card"><div class="zc-num">02</div><div class="zc-name">Draft</div></div>
119
+ <div class="zc-card"><div class="zc-num">03</div><div class="zc-name">Review</div></div>
120
+ <div class="zc-card"><div class="zc-num">04</div><div class="zc-name">Test</div></div>
121
+ <div class="zc-card"><div class="zc-num">05</div><div class="zc-name">Launch</div></div>
122
+ <div class="zc-card"><div class="zc-num">06</div><div class="zc-name">Learn</div></div>
123
+ </div>
124
+ </div>
125
+ <div class="zc-next">
126
+ <!-- edit: next scene kicker and title -->
127
+ <div class="zc-kicker">Step 05</div>
128
+ <div class="zc-title">Launch</div>
129
+ </div>
130
+ </div>
131
+ <script>
132
+ (function () {
133
+ const TARGET = 4;
134
+ const POP_AT = 0.15;
135
+ const POP_STAGGER = 0.08;
136
+ const PICK_AT = 1.2;
137
+ const DIVE_AT = 2.0;
138
+ const DIVE_DUR = 0.95;
139
+ const DIVE_ZOOM = 14;
140
+ const TITLE_DELAY = 0.1;
141
+
142
+ const kit = window.GGMotionKit;
143
+ const root = document.querySelector('[data-composition-id="zoom-into-card"]');
144
+ const world = root.querySelector(".zc-world");
145
+ const cards = [...root.querySelectorAll(".zc-card")];
146
+ const next = root.querySelector(".zc-next");
147
+ const kicker = root.querySelector(".zc-kicker");
148
+ const title = root.querySelector(".zc-title");
149
+ const target = cards[TARGET];
150
+ const tl = gsap.timeline({ paused: true });
151
+
152
+ // A fill layer under the target's words: same colour as the next scene.
153
+ const fill = document.createElement("div");
154
+ fill.className = "zc-fill";
155
+ target.insertBefore(fill, target.firstChild);
156
+ const words = target.querySelectorAll(".zc-num, .zc-name");
157
+
158
+ cards.forEach((card, i) => kit.pop(tl, card, POP_AT + i * POP_STAGGER, { spring: "snappy", from: 0.6 }));
159
+
160
+ // Pick: the target fills with the next scene's colour, the rest step back.
161
+ tl.to(fill, { opacity: 1, duration: 0.3, ease: "power2.out" }, PICK_AT);
162
+ tl.set(words, { color: "var(--field, #fff)" }, PICK_AT + 0.12);
163
+ tl.to(target, { scale: 1.05, duration: 0.5, ease: kit.ease.whip }, PICK_AT);
164
+ tl.to(cards.filter((c) => c !== target), { opacity: 0.45, duration: 0.4, ease: "none" }, PICK_AT);
165
+ tl.to(words, { opacity: 0, y: -10, duration: 0.22, ease: "power2.in", stagger: 0.04 }, DIVE_AT - 0.28);
166
+
167
+ // Push through the card's centre; its fill becomes the next scene.
168
+ const c = kit.centerOf(target, world);
169
+ const end = kit.diveThrough(tl, world, DIVE_AT, { x: c.x, y: c.y, zoom: DIVE_ZOOM, duration: DIVE_DUR, next });
170
+
171
+ kit.dropLetters(tl, title, end + TITLE_DELAY, { height: 220, stagger: 0.05 });
172
+ tl.fromTo(kicker, { opacity: 0, y: 14 }, { opacity: 0.75, y: 0, duration: 0.4, ease: kit.ease.snap }, end + TITLE_DELAY + 0.35);
173
+
174
+ window.__timelines = window.__timelines || {};
175
+ window.__timelines["zoom-into-card"] = tl;
176
+ })();
177
+ </script>
178
+ </body>
179
+ </html>
package/assets/motion/library/sheets/ui.jpg CHANGED
Binary file