transitions-refine 0.1.0

package/.agents/skills/transitions-dev/06-modal.md

@@ -0,0 +1,94 @@
+# Modal open / close
+
+## When to use
+
+Modal dialogs and full-overlay surfaces that scale up from center. Use when the surface is conceptually "on top of" the page rather than anchored to a trigger.
+
+## HTML usage
+
+```html
+<div class="t-modal" role="dialog">…</div>
+```
+
+State:
+  - Add `.is-open` to open (scales up from --modal-scale).
+  - On close, swap `.is-open` for `.is-closing`, then remove
+    `.is-closing` after --modal-close-dur.
+
+## Tunable variables
+
+| Variable | Default | Notes |
+| --- | --- | --- |
+| `--modal-open-dur` | `250ms` | sourced from `--p7-open-dur` |
+| `--modal-close-dur` | `150ms` | sourced from `--p7-close-dur` |
+| `--modal-scale` | `0.96` | sourced from `--p7-scale` |
+| `--modal-scale-close` | `0.96` | sourced from `--p7-scale-close` |
+| `--modal-ease` | `cubic-bezier(0.22, 1, 0.36, 1)` | sourced from `--p7-ease` |
+
+The `:root` defaults below match the live tuning on [transitions.dev](https://transitions.dev). Drop them into your global stylesheet once — every transition in this skill reads from semantic names like these, so multiple transitions can share a single `:root` block.
+
+```css
+:root {
+  --modal-open-dur: 250ms;
+  --modal-close-dur: 150ms;
+  --modal-scale: 0.96;
+  --modal-scale-close: 0.96;
+  --modal-ease: cubic-bezier(0.22, 1, 0.36, 1);
+}
+```
+
+## CSS
+
+```css
+.t-modal {
+  transform-origin: center;
+  transform: scale(var(--modal-scale));
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    transform var(--modal-open-dur) var(--modal-ease),
+    opacity   var(--modal-open-dur) var(--modal-ease);
+  will-change: transform, opacity;
+}
+.t-modal.is-open {
+  transform: scale(1);
+  opacity: 1;
+  pointer-events: auto;
+}
+.t-modal.is-closing {
+  transform: scale(var(--modal-scale-close));
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    transform var(--modal-close-dur) var(--modal-ease),
+    opacity   var(--modal-close-dur) var(--modal-ease);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .t-modal { transition: none !important; }
+}
+```
+
+The `@media (prefers-reduced-motion: reduce)` guard at the bottom of the snippet is required — keep it. It zeroes the transition for users who have asked for less motion at the OS level.
+
+## JavaScript orchestration
+
+```js
+// Same close-then-cleanup pattern as the dropdown — modals scale from
+// --modal-scale up to 1, then on close dip to --modal-scale-close.
+const modal = document.querySelector(".t-modal");
+const closeMs = parseFloat(
+  getComputedStyle(document.documentElement).getPropertyValue("--modal-close-dur")
+) || 150;
+
+function openModal() {
+  modal.classList.remove("is-closing");
+  modal.classList.add("is-open");
+}
+function closeModal() {
+  modal.classList.remove("is-open");
+  modal.classList.add("is-closing");
+  setTimeout(() => modal.classList.remove("is-closing"), closeMs);
+}
+```
+

package/.agents/skills/transitions-dev/07-panel-reveal.md

@@ -0,0 +1,81 @@
+# Panel reveal
+
+## When to use
+
+A panel that slides into view inside an existing container — e.g. detail panel inside a card, expanding section. Combines a short translate, opacity, and a 2px cross-blur so a half-height travel still reads as a full open.
+
+## HTML usage
+
+```html
+<div class="t-panel-slide" data-open="false">
+  <!-- your panel contents -->
+</div>
+```
+
+The panel slides on the Y axis, fades opacity 0 ↔ 1,
+and cross-blurs --panel-blur ↔ 0, all on the same
+duration / ease so a shorter travel (e.g. 50% of the
+panel height) still reads as a full open / close.
+Wrap it in your own container with `overflow: hidden`
+if you want the closed state fully clipped. Set
+--panel-translate-y to the travel distance (e.g. half
+the panel's own height).
+
+## Tunable variables
+
+| Variable | Default | Notes |
+| --- | --- | --- |
+| `--panel-open-dur` | `400ms` | sourced from `--p3-open-dur` |
+| `--panel-close-dur` | `350ms` | sourced from `--p3-close-dur` |
+| `--panel-translate-y` | `100px` | sourced from `--p3-translate-y` |
+| `--panel-blur` | `2px` | sourced from `--p3-blur` |
+| `--panel-ease` | `cubic-bezier(0.22, 1, 0.36, 1)` | sourced from `--p3-ease` |
+
+The `:root` defaults below match the live tuning on [transitions.dev](https://transitions.dev). Drop them into your global stylesheet once — every transition in this skill reads from semantic names like these, so multiple transitions can share a single `:root` block.
+
+```css
+:root {
+  --panel-open-dur: 400ms;
+  --panel-close-dur: 350ms;
+  --panel-translate-y: 100px;
+  --panel-blur: 2px;
+  --panel-ease: cubic-bezier(0.22, 1, 0.36, 1);
+}
+```
+
+## CSS
+
+```css
+.t-panel-slide {
+  transform: translateY(var(--panel-translate-y));
+  opacity: 0;
+  filter: blur(var(--panel-blur));
+  pointer-events: none;
+  transition:
+    transform var(--panel-close-dur) var(--panel-ease),
+    opacity   var(--panel-close-dur) var(--panel-ease),
+    filter    var(--panel-close-dur) var(--panel-ease);
+  will-change: transform, opacity, filter;
+}
+.t-panel-slide[data-open="true"] {
+  transform: translateY(0);
+  opacity: 1;
+  filter: blur(0);
+  pointer-events: auto;
+  transition:
+    transform var(--panel-open-dur) var(--panel-ease),
+    opacity   var(--panel-open-dur) var(--panel-ease),
+    filter    var(--panel-open-dur) var(--panel-ease);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .t-panel-slide { transition: none !important; }
+}
+```
+
+The `@media (prefers-reduced-motion: reduce)` guard at the bottom of the snippet is required — keep it. It zeroes the transition for users who have asked for less motion at the OS level.
+
+## JavaScript orchestration
+
+None — pure CSS. Toggle the documented HTML attributes or class names from whatever already drives state in your app.
+

package/.agents/skills/transitions-dev/08-page-side-by-side.md

@@ -0,0 +1,100 @@
+# Page side-by-side
+
+## When to use
+
+Sliding between two full pages or screens that live side-by-side: list ↔ detail, step 1 ↔ step 2 in a wizard. Page 1 exits left, page 2 exits right.
+
+## HTML usage
+
+```html
+<div class="t-page-slide" data-page="1">
+  <section class="t-page" data-page-id="1">…</section>
+  <section class="t-page" data-page-id="2">…</section>
+</div>
+```
+
+State: set data-page="1" or "2" on .t-page-slide.
+Page 1 exits to the left, page 2 exits to the right.
+--page-exit-enabled (0/1) disables the outgoing slide.
+
+## Tunable variables
+
+| Variable | Default | Notes |
+| --- | --- | --- |
+| `--page-slide-dur` | `250ms` | sourced from `--p8-slide-dur` |
+| `--page-fade-dur` | `250ms` | sourced from `--p8-fade-dur` |
+| `--page-slide-distance` | `8px` | sourced from `--p8-distance` |
+| `--page-blur` | `3px` | sourced from `--p8-blur` |
+| `--page-stagger` | `0ms` | sourced from `--p8-stagger` |
+| `--page-exit-enabled` | `1` | sourced from `--p8-exit-enabled` |
+| `--page-slide-ease` | `cubic-bezier(0.22, 1, 0.36, 1)` | sourced from `--p8-slide-ease` |
+| `--page-fade-ease` | `cubic-bezier(0.22, 1, 0.36, 1)` | sourced from `--p8-fade-ease` |
+
+The `:root` defaults below match the live tuning on [transitions.dev](https://transitions.dev). Drop them into your global stylesheet once — every transition in this skill reads from semantic names like these, so multiple transitions can share a single `:root` block.
+
+```css
+:root {
+  --page-slide-dur: 250ms;
+  --page-fade-dur: 250ms;
+  --page-slide-distance: 8px;
+  --page-blur: 3px;
+  --page-stagger: 0ms;
+  --page-exit-enabled: 1;
+  --page-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  --page-fade-ease: cubic-bezier(0.22, 1, 0.36, 1);
+}
+```
+
+## CSS
+
+```css
+.t-page-slide {
+  position: relative;
+}
+.t-page-slide .t-page[data-page-id="1"] {
+  --t-page-from-x: calc(var(--page-slide-distance) * -1);
+}
+.t-page-slide .t-page[data-page-id="2"] {
+  --t-page-from-x: var(--page-slide-distance);
+}
+.t-page-slide .t-page {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateX(calc(var(--t-page-from-x, 0px) * var(--page-exit-enabled)));
+  filter: blur(calc(var(--page-blur) * var(--page-exit-enabled)));
+  transition:
+    opacity   var(--page-fade-dur)  var(--page-fade-ease),
+    transform var(--page-slide-dur) var(--page-slide-ease),
+    filter    var(--page-slide-dur) var(--page-slide-ease);
+  will-change: opacity, transform, filter;
+}
+.t-page-slide[data-page="1"] .t-page[data-page-id="1"],
+.t-page-slide[data-page="2"] .t-page[data-page-id="2"] {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateX(0);
+  filter: blur(0);
+  transition-delay: var(--page-stagger);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .t-page-slide .t-page { transition: none !important; }
+}
+```
+
+The `@media (prefers-reduced-motion: reduce)` guard at the bottom of the snippet is required — keep it. It zeroes the transition for users who have asked for less motion at the OS level.
+
+## JavaScript orchestration
+
+```js
+// Flip data-page on the container — the CSS handles the rest.
+// Set --page-exit-enabled: 0 on the container if you want pages to
+// fade without sliding (useful on first paint).
+const slider = document.querySelector(".t-page-slide");
+function showPage(n) {
+  slider.setAttribute("data-page", String(n));
+}
+```
+

package/.agents/skills/transitions-dev/09-icon-swap.md

@@ -0,0 +1,78 @@
+# Icon swap
+
+## When to use
+
+Cross-fading two icons in the same slot — hamburger ↔ close, sun ↔ moon, play ↔ pause, expand ↔ collapse. Both icons stay in the DOM stacked in the same grid cell.
+
+## HTML usage
+
+```html
+<div class="t-icon-swap" data-state="a">
+  <span class="t-icon" data-icon="a">…</span>
+  <span class="t-icon" data-icon="b">…</span>
+</div>
+```
+
+State: set data-state="a" or "b" on .t-icon-swap.
+The matching .t-icon fades in; the other fades out with blur
+and scale.
+
+## Tunable variables
+
+| Variable | Default | Notes |
+| --- | --- | --- |
+| `--icon-swap-dur` | `250ms` | sourced from `--p5-dur` |
+| `--icon-swap-blur` | `2px` | sourced from `--p5-blur` |
+| `--icon-swap-start-scale` | `0.25` | sourced from `--p5-start-scale` |
+| `--icon-swap-ease` | `ease-in-out` | sourced from `--p5-ease` |
+
+The `:root` defaults below match the live tuning on [transitions.dev](https://transitions.dev). Drop them into your global stylesheet once — every transition in this skill reads from semantic names like these, so multiple transitions can share a single `:root` block.
+
+```css
+:root {
+  --icon-swap-dur: 250ms;
+  --icon-swap-blur: 2px;
+  --icon-swap-start-scale: 0.25;
+  --icon-swap-ease: ease-in-out;
+}
+```
+
+## CSS
+
+```css
+.t-icon-swap {
+  position: relative;
+  display: inline-grid;
+}
+.t-icon-swap .t-icon {
+  grid-area: 1 / 1;
+  transition:
+    opacity   var(--icon-swap-dur) var(--icon-swap-ease),
+    filter    var(--icon-swap-dur) var(--icon-swap-ease),
+    transform var(--icon-swap-dur) var(--icon-swap-ease);
+  will-change: opacity, filter, transform;
+}
+.t-icon-swap[data-state="a"] .t-icon[data-icon="a"],
+.t-icon-swap[data-state="b"] .t-icon[data-icon="b"] {
+  opacity: 1;
+  filter: blur(0);
+  transform: scale(1);
+}
+.t-icon-swap[data-state="a"] .t-icon[data-icon="b"],
+.t-icon-swap[data-state="b"] .t-icon[data-icon="a"] {
+  opacity: 0;
+  filter: blur(var(--icon-swap-blur));
+  transform: scale(var(--icon-swap-start-scale));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .t-icon-swap .t-icon { transition: none !important; }
+}
+```
+
+The `@media (prefers-reduced-motion: reduce)` guard at the bottom of the snippet is required — keep it. It zeroes the transition for users who have asked for less motion at the OS level.
+
+## JavaScript orchestration
+
+None — pure CSS. Toggle the documented HTML attributes or class names from whatever already drives state in your app.
+

package/.agents/skills/transitions-dev/10-success-check.md

@@ -0,0 +1,169 @@
+# Success check
+
+## When to use
+
+Confirming a completed action — payment processed, file uploaded, message sent, form saved. The icon fades in, rotates upright, settles with a Y-bob, and (for SVG icons) draws its path stroke. Use whenever a status changes from "pending / unknown" to "success" and you want the moment to feel earned rather than instantaneous.
+
+The snippet covers the **appear transition only** — bring your own hide behavior (e.g. unmount, opacity:0, or a custom exit). This is intentional: success states are usually persistent, and a soft fade-out is rarely worth the extra DOM/JS surface.
+
+## HTML usage
+
+```html
+<!-- Wrap your icon (SVG, image, anything) in .t-success-check.
+     The wrapper drives fade + rotate + blur + Y-bob; if your
+     icon is an SVG <path>, it gets the stroke-draw animation.
+     Bring your own icon size / colors. -->
+<span class="t-success-check" data-state="out" aria-hidden="true">
+  <svg viewBox="0 0 48 48" fill="none">
+    <!-- your icon path(s) here -->
+  </svg>
+</span>
+```
+
+Trigger:
+  - Cold load is data-state="out" (opacity 0; no animation).
+  - Show: set data-state="in" (fade + rotate + blur + Y-bob
+    + path draw run in parallel).
+
+Snippet covers the appear transition only — bring your own
+hide behavior (e.g. unmount, opacity:0, or a custom exit).
+
+## Tunable variables
+
+| Variable | Default | Notes |
+| --- | --- | --- |
+| `--check-opacity-dur` | `500ms` | sourced from `--p10-opacity-dur` |
+| `--check-rotate-dur` | `500ms` | sourced from `--p10-rotate-dur` |
+| `--check-rotate-from` | `80deg` | sourced from `--p10-rotate-from` |
+| `--check-bob-dur` | `500ms` | sourced from `--p10-bob-dur` |
+| `--check-y-amount` | `40px` | sourced from `--p10-y-amount` |
+| `--check-blur-dur` | `500ms` | sourced from `--p10-blur-dur` |
+| `--check-blur-from` | `10px` | sourced from `--p10-blur-from` |
+| `--check-path-dur` | `500ms` | sourced from `--p10-path-dur` |
+| `--check-path-delay` | `80ms` | sourced from `--p10-path-delay` |
+| `--check-ease-out` | `cubic-bezier(0.22, 1, 0.36, 1)` | sourced from `--p10-ease-out` |
+| `--check-ease-opacity` | `cubic-bezier(0.22, 1, 0.36, 1)` | sourced from `--p10-ease-opacity` |
+| `--check-ease-rotate` | `cubic-bezier(0.22, 1, 0.36, 1)` | sourced from `--p10-ease-rotate` |
+| `--check-ease-bob` | `cubic-bezier(0.34, 1.35, 0.64, 1)` | sourced from `--p10-ease-bob` |
+| `--check-ease-path` | `cubic-bezier(0.22, 1, 0.36, 1)` | sourced from `--p10-ease-path` |
+
+The `:root` defaults below match the live tuning on [transitions.dev](https://transitions.dev). Drop them into your global stylesheet once — every transition in this skill reads from semantic names like these, so multiple transitions can share a single `:root` block.
+
+```css
+:root {
+  --check-opacity-dur: 500ms;
+  --check-rotate-dur: 500ms;
+  --check-rotate-from: 80deg;
+  --check-bob-dur: 500ms;
+  --check-y-amount: 40px;
+  --check-blur-dur: 500ms;
+  --check-blur-from: 10px;
+  --check-path-dur: 500ms;
+  --check-path-delay: 80ms;
+  --check-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
+  --check-ease-opacity: cubic-bezier(0.22, 1, 0.36, 1);
+  --check-ease-rotate: cubic-bezier(0.22, 1, 0.36, 1);
+  --check-ease-bob: cubic-bezier(0.34, 1.35, 0.64, 1);
+  --check-ease-path: cubic-bezier(0.22, 1, 0.36, 1);
+}
+```
+
+## CSS
+
+```css
+/* Wrapper drives the appear animation; it doesn't own any
+   sizing or color so you can drop in any icon. */
+.t-success-check {
+  display: inline-block;
+  transform-origin: center;
+  opacity: 0;
+  will-change: transform, opacity, filter;
+}
+/* overflow: visible keeps the stroke from clipping while it
+   draws; display: block kills the inline whitespace under SVGs. */
+.t-success-check svg { display: block; overflow: visible; }
+/* Stroke-draw setup. Replace 20 with the result of
+   path.getTotalLength() for your path; round caps mean any
+   sub-pixel overshoot is invisible. */
+.t-success-check svg path {
+  stroke-dasharray: 20;
+  stroke-dashoffset: 20;
+}
+
+.t-success-check[data-state="in"] {
+  animation:
+    t-check-fade   var(--check-opacity-dur) var(--check-ease-opacity) forwards,
+    t-check-rotate var(--check-rotate-dur)  var(--check-ease-rotate)  forwards,
+    t-check-blur   var(--check-blur-dur)    var(--check-ease-out)     forwards,
+    t-check-bob    var(--check-bob-dur)     var(--check-ease-bob)     forwards;
+}
+.t-success-check[data-state="in"] svg path {
+  animation: t-check-draw var(--check-path-dur) var(--check-ease-path) var(--check-path-delay, 0ms) forwards;
+}
+
+@keyframes t-check-fade { from { opacity: 0; } to { opacity: 1; } }
+@keyframes t-check-rotate {
+  from { transform: rotate(var(--check-rotate-from)); }
+  to   { transform: rotate(0deg); }
+}
+@keyframes t-check-blur {
+  from { filter: blur(var(--check-blur-from)); }
+  to   { filter: blur(0); }
+}
+@keyframes t-check-bob {
+  from { translate: 0 var(--check-y-amount); }
+  to   { translate: 0 0; }
+}
+@keyframes t-check-draw { to { stroke-dashoffset: 0; } }
+
+@media (prefers-reduced-motion: reduce) {
+  .t-success-check { animation: none !important; opacity: 1; }
+  .t-success-check svg path { animation: none !important; stroke-dashoffset: 0 !important; }
+}
+```
+
+The `@media (prefers-reduced-motion: reduce)` guard at the bottom of the snippet is required — keep it. It zeroes the transition for users who have asked for less motion at the OS level.
+
+## JavaScript orchestration
+
+```js
+// Cold-load → "out" (no animation). On show, flip to "in".
+// Replay-on-retrigger: reset to "out", force a reflow, then flip
+// back to "in" so the keyframes restart from offset 0.
+const check = document.querySelector(".t-success-check");
+
+function showCheck() {
+  check.setAttribute("data-state", "out");
+  void check.offsetWidth; // force reflow so keyframes restart
+  check.setAttribute("data-state", "in");
+}
+
+// If the icon is mounted unconditionally and only shown after some
+// event (e.g. await save()), the simpler form is enough:
+//   check.setAttribute("data-state", "in");
+// The reflow trick only matters when you replay the appear from
+// an already-visible state.
+```
+
+### Calibrating `stroke-dasharray` for your path
+
+The CSS hardcodes `stroke-dasharray: 20` as a placeholder. For a clean draw, replace 20 with the actual length of **your** path (in user units), measured once with `path.getTotalLength()`. Two ways to do it:
+
+1. **Static (recommended)** — measure the path in the browser console once, then paste the rounded-up integer into the CSS:
+
+   ```js
+   document.querySelector(".t-success-check svg path").getTotalLength()
+   // → 19.42 → use stroke-dasharray: 20 (round up by 1px for safety)
+   ```
+
+2. **Dynamic** — measure on mount and set both properties inline. Use this when paths vary per-render:
+
+   ```js
+   const path = wrapper.querySelector("svg path");
+   const len = Math.ceil(path.getTotalLength());
+   path.style.strokeDasharray = String(len);
+   path.style.strokeDashoffset = String(len);
+   ```
+
+If the dasharray is too short the stroke pre-reveals before the animation starts; too long and the path appears to draw past its end before fading in. Round up by 1px to absorb sub-pixel float jitter.
+