kuinetic 0.2.1 → 0.2.3

package/dist/esm/notes/index.mjs

@@ -0,0 +1,1075 @@
+// src/notes/catalog.ts
+var CATALOG_NOTES = {
+  "ambient-float.duration": "How long one full up-and-down drift takes, repeating forever.",
+  "ambient-float.distance": "How far the element drifts up and down.",
+  "ambient-gradient.duration": "How long one full colour drift takes, repeating forever.",
+  "ambient-gradient.from": {
+    why: "The first colour of the gradient.",
+    whenOmitted: "Uses the effect\u2019s built-in colours."
+  },
+  "ambient-gradient.to": {
+    why: "The second colour of the gradient.",
+    whenOmitted: "Uses the effect\u2019s built-in colours."
+  },
+  "ambient-gradient-ring.duration": "How long the colours take to travel once around the edge.",
+  "ambient-gradient-ring.from": {
+    why: "The first colour of the glowing edge.",
+    whenOmitted: "Uses the effect\u2019s built-in colours."
+  },
+  "ambient-gradient-ring.to": {
+    why: "The second colour of the glowing edge.",
+    whenOmitted: "Uses the effect\u2019s built-in colours."
+  },
+  "ambient-orbit.duration": "How long one full turn takes, repeating forever.",
+  "ambient-orbit.angle": "How far it turns each cycle; 360deg is one full circle.",
+  "ambient-pulse.duration": "How long one swell-and-shrink beat takes, repeating forever.",
+  "ambient-pulse.scale": "How big it swells at the peak; 1.15 is 15% larger.",
+  "ambient-tint.duration": "How long one full drift of the pattern takes, repeating forever.",
+  "ambient-tint.from": {
+    why: "The colour of the pattern or glow.",
+    whenOmitted: "Uses the effect\u2019s built-in colour, or the text colour."
+  },
+  "background-media.src": {
+    why: "The picture or video file to fill the background with.",
+    required: true
+  },
+  "background-media.poster": {
+    why: "A still picture shown while the video loads, so the background is never blank.",
+    whenOmitted: "The background stays empty until the first video frame arrives."
+  },
+  "background-media.fit": "Cover crops the media to fill the box; contain shows all of it.",
+  "background-media.focus": "Which part of the picture stays visible when it gets cropped.",
+  "background-media.overlay": {
+    why: "A colour laid over the media, so text on top stays readable.",
+    whenOmitted: "No overlay; the media shows at full strength."
+  },
+  "background-media.overlay-opacity": "How strongly the overlay colour covers the media.",
+  "background-media.autoplay": {
+    why: "When a video plays: only while on screen, always, or never."
+  },
+  "background-media.rate": "Video speed; 1 is normal, 0.5 is half speed, up to 4.",
+  "background-media.loop": "Whether the video starts over when it ends.",
+  "glass.blur": "How much the content behind the panel is blurred.",
+  "glass.saturate": "How vivid the colours behind the panel look; 1 leaves them unchanged.",
+  "glass.opacity": "How strongly the panel\u2019s tint shows over the blurred background.",
+  "glass.tint": {
+    why: "The colour of the frosted glass itself.",
+    whenOmitted: "White-ish glass that follows the page\u2019s colour scheme."
+  },
+  "glass.rim": {
+    why: "The colour of the thin edge line, which also colours the top highlight.",
+    whenOmitted: "A faint white edge."
+  },
+  "glass.rim-width": "How thick the thin edge line is.",
+  "glass.sheen": "How bright the soft highlight across the top is; 0 removes it.",
+  "glass.radius": {
+    why: "How rounded the corners are; a very large value makes a pill.",
+    whenOmitted: "Rounded corners of 16px, unless the page sets its own."
+  },
+  "media-blur-up.distance": "How far the image rises into place as it sharpens.",
+  "media-blur-up.blur": "How blurry the image starts before it sharpens.",
+  "media-ken-burns.distance": "How far the image pans while it zooms, right and a little up; negative pans the other way.",
+  "media-ken-burns.scale": "How far the image zooms; 1.12 is 12% bigger at the zoomed-in end.",
+  "media-lightbox.scale": "The size it starts at before growing to full size.",
+  "media-parallax-frame.distance": "How far the image shifts as the page scrolls.",
+  "rotate-static.angle": {
+    why: "How far to tilt the element, held still.",
+    whenOmitted: "No tilt; the element keeps its own rotation."
+  },
+  "slat-assemble.slats": "How many strips the picture is cut into, from 2 to 24.",
+  "slat-assemble.axis": "Cut the picture into vertical or horizontal strips.",
+  "slat-assemble.angle": {
+    why: "Cut the strips at any angle instead; 0deg is vertical, 90deg is horizontal.",
+    whenOmitted: "Follows the axis setting."
+  },
+  "slat-assemble.from": {
+    why: "Which strips land first: alternating ends, start, end, outside-in, or scattered."
+  },
+  "slat-assemble.fold": {
+    why: "Strips flip in like hinged panels instead of sliding in.",
+    whenOmitted: "Off: strips slide in."
+  },
+  "slat-assemble.duration": "How long each strip takes to land, not the whole run.",
+  "view-morph.name": {
+    why: "The shared name that pairs this element with its twin on the other view.",
+    whenOmitted: "Uses the element\u2019s own id, so it needs one."
+  },
+  "view-swap.controls": {
+    why: "Which element this control opens and closes, by selector like #panel.",
+    whenOmitted: "Uses the element named by the control\u2019s aria-controls."
+  },
+  "view-swap.attribute": {
+    why: "The marker added or removed on that element each time the control is clicked.",
+    whenOmitted: "Uses data-open."
+  },
+  "view-swap.type": {
+    why: "Names the transition motion to run, like kui-page-slide; a browser without that feature cross-fades.",
+    whenOmitted: "The browser\u2019s default cross-fade, or an instant swap where view transitions are missing."
+  }
+};
+
+// src/notes/catalog-core.ts
+var SCROLL_LINKED = [
+  "desaturate",
+  "parallax",
+  "parallax-rotate",
+  "parallax-scale",
+  "progress",
+  "progress-stroke",
+  "scroll-fade",
+  "skew"
+];
+var SCROLL_LINKED_TIMING = Object.fromEntries(
+  SCROLL_LINKED.flatMap((id) => [
+    [`${id}.duration`, "Scrolling sets the pace; this counts only next to delay, or as a clock where scroll-linking isn't supported."],
+    [`${id}.delay`, "Not a clock wait: it starts the motion later in the scroll range, in proportion to duration."],
+    [`${id}.stagger`, {
+      why: "Starts each item a little later in the scroll range, so a group moves one after another.",
+      whenOmitted: "Every item moves together, unless a parent sets a stagger."
+    }]
+  ])
+);
+var CATALOG_CORE_NOTES = {
+  ...SCROLL_LINKED_TIMING,
+  "desaturate.from": "How grey the element is at the start of the scroll range.",
+  "desaturate.to": "How grey the element is at the end of the scroll range.",
+  "feedback-burst.scale": "How much the element swells at the peak of the pop.",
+  "feedback-burst.distance": "How far the confetti flies, as a size or a share of the element.",
+  "feedback-burst.fan": "How wide the confetti spreads sideways; 0 is a narrow fountain.",
+  "feedback-burst.size": "How big each confetti speck is.",
+  "feedback-burst.spill": "How far past the element the confetti is allowed to show.",
+  "feedback-burst.color1": { why: "Colour of the first confetti speck.", whenOmitted: "The page's own --kui-c1 if set, else a pink-red." },
+  "feedback-burst.color2": { why: "Colour of the second confetti speck.", whenOmitted: "The page's own --kui-c2 if set, else amber." },
+  "feedback-burst.color3": { why: "Colour of the third confetti speck.", whenOmitted: "The page's own --kui-c3 if set, else green." },
+  "feedback-burst.color4": { why: "Colour of the fourth confetti speck.", whenOmitted: "The page's own --kui-c4 if set, else blue." },
+  "feedback-burst.color5": { why: "Colour of the fifth confetti speck.", whenOmitted: "The page's own --kui-c5 if set, else purple." },
+  "feedback-confirm.duration": "How long the confirmation takes in total, fade in, hold and fade out.",
+  "feedback-dot-pulse.duration": "How long one full pulse of the dots takes, repeating forever.",
+  "feedback-dot-pulse.dotSize": "How big each of the three dots is.",
+  "feedback-heart-burst.scale": "How much the heart swells at the peak of the pop.",
+  "feedback-pop.scale": "How much the element swells at the peak of the pop.",
+  "feedback-progress-track.duration": "How long the bar takes to sweep across once, repeating forever.",
+  "feedback-pull.distance": "How far the element is pulled down before it springs back.",
+  "feedback-ripple.extent": "How many times larger the ripple grows than the element.",
+  "feedback-ripple.color": { why: "Colour of the ripple disc.", whenOmitted: "Uses the element's own text colour." },
+  "feedback-ripple.strength": "How solid the ripple looks at its brightest, from 0 to 1.",
+  "feedback-ripple.startScale": "How big the ripple begins, as a share of the element.",
+  "feedback-shimmer.duration": "How long one sweep of light takes, repeating forever.",
+  "feedback-spin.duration": "How long one full turn takes, repeating forever.",
+  "feedback-toast.distance": "How far the toast slides as it enters or leaves.",
+  "flip-3d.angle": "How far turned away the element starts, before it flips flat.",
+  "flip-3d.perspective": "How strong the 3D depth looks; smaller is more dramatic.",
+  "parallax.distance": "How far the element drifts against the scroll.",
+  "parallax-rotate.angle": "How far the element has turned by the end of the scroll range.",
+  "parallax-rotate.from": "How far turned the element is at the start of the scroll range.",
+  "parallax-scale.scale": "How big the element is at the end of the scroll range.",
+  "parallax-scale.from": "How big the element is at the start of the scroll range.",
+  "progress-stroke.length": {
+    why: "The total length of the line being drawn, so it draws exactly to the end.",
+    whenOmitted: "Assumes a path length of 100."
+  },
+  "reveal.distance": "How far the element travels while it appears.",
+  "reveal.opacity": "How see-through the element is when it starts; 0 is invisible.",
+  "reveal-blur.distance": "How far the element travels while it appears.",
+  "reveal-blur.opacity": "How see-through the element is when it starts; 0 is invisible.",
+  "reveal-blur.blur": "How blurry the element is when it starts.",
+  "roll.distance": "How far the element travels while it rolls in.",
+  "roll.angle": "How far turned the element starts before it rolls upright.",
+  "scale-move.distance": "How far the element travels while it grows in.",
+  "scale-move.scale": "How small the element starts before it grows to full size.",
+  "scroll-fade.opacity": "How see-through the element is at the start of the scroll range."
+};
+
+// src/notes/interaction.ts
+var INTERACTION_NOTES = {
+  "anchored-preview.distance": "How far the preview travels as it pops in.",
+  "anchored-preview.gap": "How much space is left between the preview and what it points at.",
+  "anchored-preview.scale": "How small the preview starts before it grows to full size.",
+  "anchored-preview.color": {
+    why: "Text colour of the preview.",
+    whenOmitted: "Keeps the surrounding text colour."
+  },
+  "anchored-preview.bg-color": {
+    why: "Background colour of the preview.",
+    whenOmitted: "No background, so a picture or your own styling shows as it is."
+  },
+  "anchored-preview.radius": {
+    why: "How rounded the preview corners are.",
+    whenOmitted: "Square corners."
+  },
+  "anchored-preview.place": {
+    why: "Which side the preview sits on, or auto to flip to the other side when there is no room."
+  },
+  "anchored-preview.tease": {
+    why: "Show the preview once by itself on arrival, so people know it is there.",
+    whenOmitted: "Off: the preview only shows on hover or focus."
+  },
+  "anchored-preview.target": {
+    why: "Which child is the preview, when it is not marked with data-kui-preview.",
+    whenOmitted: "Uses the child marked data-kui-preview."
+  },
+  "beam-border.duration": "How long one full lap of the light around the border takes.",
+  "beam-border.delay": "How long the pointer waits before the light starts circling.",
+  "beam-border.color": {
+    why: "Colour of the travelling light.",
+    whenOmitted: "A four-colour rainbow."
+  },
+  "beam-border.outset": {
+    why: "Pushes the ring outward, to sit over a border the element already has.",
+    whenOmitted: "The ring sits just inside any existing border."
+  },
+  "beam-border.arc": "How much of the ring is lit: a short dash or a nearly full ring.",
+  "beam-border.softness": "How gradually the light fades in at its leading edge.",
+  "beam-border-auto.duration": "How long one full lap of the light around the border takes.",
+  "beam-border-auto.color": {
+    why: "Colour of the travelling light.",
+    whenOmitted: "A four-colour rainbow."
+  },
+  "beam-border-auto.outset": {
+    why: "Pushes the ring outward, to sit over a border the element already has.",
+    whenOmitted: "The ring sits just inside any existing border."
+  },
+  "beam-border-auto.arc": "How much of the ring is lit: a short dash or a nearly full ring.",
+  "beam-border-auto.softness": "How gradually the light fades in at its leading edge.",
+  "border-draw.color": {
+    why: "Colour of the border that draws itself.",
+    whenOmitted: "Uses the page accent colour."
+  },
+  "border-draw.width": "How thick the drawn border is.",
+  "border-draw.outset": {
+    why: "Pushes the drawn border outward, to sit over a border the element already has.",
+    whenOmitted: "0px: the line sits at the element edge."
+  },
+  "border-glow.color": {
+    why: "Colour of the glowing outline.",
+    whenOmitted: "Uses the page accent colour."
+  },
+  "cursor-follow.stiffness": "Higher snaps the dot to the pointer faster; lower feels looser.",
+  "cursor-follow.damping": "Higher stops the dot wobbling sooner; lower lets it overshoot.",
+  "cursor-follow.mass": "Higher makes the dot feel heavier and slower to start and stop.",
+  "cursor-follow.label": {
+    why: "Text shown inside the dot that follows the pointer.",
+    whenOmitted: "The dot has no text."
+  },
+  "cursor-invert.stiffness": "Higher snaps the dot to the pointer faster; lower feels looser.",
+  "cursor-invert.damping": "Higher stops the dot wobbling sooner; lower lets it overshoot.",
+  "cursor-invert.mass": "Higher makes the dot feel heavier and slower to start and stop.",
+  "cursor-invert.label": {
+    why: "Text shown inside the dot that follows the pointer.",
+    whenOmitted: "The dot has no text."
+  },
+  "cursor-label.stiffness": "Higher snaps the dot to the pointer faster; lower feels looser.",
+  "cursor-label.damping": "Higher stops the dot wobbling sooner; lower lets it overshoot.",
+  "cursor-label.mass": "Higher makes the dot feel heavier and slower to start and stop.",
+  "cursor-label.label": {
+    why: "Text shown inside the dot that follows the pointer.",
+    whenOmitted: "The dot has no text."
+  },
+  "cursor-lag.stiffness": "Higher snaps the dot to the pointer faster; lower feels looser.",
+  "cursor-lag.damping": "Higher stops the dot wobbling sooner; lower lets it overshoot.",
+  "cursor-lag.mass": "Higher makes the dot feel heavier and slower to start and stop.",
+  "cursor-lag.label": {
+    why: "Text shown inside the dot that follows the pointer.",
+    whenOmitted: "The dot has no text."
+  },
+  "group-dim.delay": "How long the pointer rests before the others dim, so passing over does not flicker.",
+  "group-dim.opacity": "How faded the other items get; lower is dimmer.",
+  "icon-spin.duration": "How long one full turn of the icon takes.",
+  "label-swap.distance": {
+    why: "How far each label slides as it swaps; 100% is a full label height."
+  },
+  "lift.distance": "How far the element rises on hover.",
+  "lift-shadow.distance": "How far the element rises on hover.",
+  "pop.scale": "How much bigger the element grows on hover; 1 is no change.",
+  "press.delay": "How long to hold before the press shows.",
+  "press.scale": "How small the element shrinks while pressed; 1 is no change.",
+  "press.depth": "How far the shadow sinks in while pressed, to look pushed down.",
+  "press.color": {
+    why: "Colour of the shadow that shows while pressed.",
+    whenOmitted: "A soft dark shadow."
+  },
+  "proximity-glow.color": {
+    why: "Colour of the glow on the edge nearest the pointer.",
+    whenOmitted: "Uses the page accent colour."
+  },
+  "proximity-glow.radius": "How far from the pointer the glow reaches before it fades out.",
+  "proximity-glow.width": "How thick the glowing edge line is.",
+  "proximity-glow.outset": {
+    why: "Pushes the glowing edge outward, to sit over a border the element already has.",
+    whenOmitted: "0px: the line sits at the element edge."
+  },
+  "search-expand.collapsed": "How wide the search box is while resting.",
+  "search-expand.width": "How wide the search box grows to when opened.",
+  "shine-sweep.color": {
+    why: "Colour of the shiny band that sweeps across.",
+    whenOmitted: "A soft translucent white."
+  },
+  "shine-sweep.angle": "The tilt of the shiny band as it crosses.",
+  "shine-sweep.width": "How wide the shiny band is, as a share of the element.",
+  "tilt-3d.maxAngle": "The most it tilts, in degrees, with the pointer at its edge; mouse or trackpad only.",
+  "tilt-3d.perspective": "How strong the 3D depth looks; a smaller distance looks more dramatic.",
+  "tilt-parallax.strength": 'Pixels a data-depth="1" layer shifts with the pointer at the edge; other depths scale it.',
+  "underline-center.color": {
+    why: "Colour of the underline.",
+    whenOmitted: "Uses the text colour."
+  },
+  "underline-slide.color": {
+    why: "Colour of the underline.",
+    whenOmitted: "Uses the text colour."
+  }
+};
+
+// src/notes/interaction-reveal.ts
+var INTERACTION_REVEAL_NOTES = {
+  "hover-intent.duration": "How long the hint takes to fade in once it shows.",
+  "hover-intent.delay": "How long the pointer must rest first, so a mouse just passing over doesn't pop the hint.",
+  "hover-intent.ease": "The speed curve of the hint fading in.",
+  "hover-intent.distance": "How far the hint rises as it appears.",
+  "hover-intent.color": "Text colour of the hint card.",
+  "hover-intent.bg-color": "Background colour of the hint card.",
+  "hover-intent.radius": "How rounded the hint card corners are.",
+  "hover-intent.place": {
+    why: "Where the hint sits: above, below, or flip below when there is no room above."
+  },
+  "hover-intent.tease": {
+    why: "Show the hint once by itself on arrival, so people know it is there.",
+    whenOmitted: "Off: the hint only shows on hover or focus."
+  },
+  "hover-intent.target": {
+    why: "Which child is the hint, when it is not marked with data-kui-hint.",
+    whenOmitted: "Uses the child marked data-kui-hint."
+  }
+};
+
+// src/notes/keys.ts
+var KEY_NOTES = {
+  "data-kui.on": {
+    why: "What starts it: scrolling into view, a hover, a click, or any event name.",
+    whenOmitted: "Each effect picks: most start in view, hover and drag ones are ready on load."
+  },
+  "data-kui.actions": {
+    why: "What to do each time it scrolls in, out, back in and back out.",
+    whenOmitted: "It plays on the way in and nothing else."
+  },
+  "data-kui.timeline": {
+    why: "What drives it: the clock, or the scroll position so it moves as you scroll.",
+    whenOmitted: "It plays over time, at its own speed."
+  },
+  "data-kui.threshold": {
+    why: "How much of the element must be in view before it starts.",
+    whenOmitted: "It starts as soon as any part of it shows."
+  },
+  "data-kui.cascade": {
+    why: "Extra wait for each child, so they arrive one after another.",
+    whenOmitted: "The children all start together."
+  },
+  "data-kui.spread": {
+    why: "Total time for all children to start, however many there are.",
+    whenOmitted: "The children all start together, unless cascade sets a step."
+  },
+  "data-kui.order": {
+    why: "Which child goes first: start, end, center, edges, random or a position.",
+    whenOmitted: "The first child goes first."
+  },
+  "data-kui.cols": {
+    why: "How many columns the children sit in, so order can mean a cell in a grid.",
+    whenOmitted: "The children are treated as one line, in page order."
+  },
+  "data-kui.along": {
+    why: "Keep a grid stagger to one direction: across (x) or down (y).",
+    whenOmitted: "The wave spreads both ways."
+  },
+  "data-kui.rm": {
+    why: "What to do for visitors who ask for less motion: shorten, fade, or skip it.",
+    whenOmitted: "The effects choose, and the strictest choice wins."
+  },
+  "data-kui.func": {
+    why: "The name of a page function to call when the effects finish.",
+    whenOmitted: "Nothing is called."
+  },
+  "data-kui.at": {
+    why: "Start this step relative to the one before: with it, after it, or a time off.",
+    whenOmitted: "It starts at the same moment as the other steps."
+  },
+  "data-kui.above": {
+    why: "Only run this step when the screen is at least this wide.",
+    whenOmitted: "It runs at every screen width."
+  },
+  "data-kui.below": {
+    why: "Only run this step when the screen is narrower than this.",
+    whenOmitted: "It runs at every screen width."
+  },
+  "data-kui.wide": {
+    why: "Only run this step when its container is at least this wide.",
+    whenOmitted: "It runs at every container width."
+  },
+  "data-kui.narrow": {
+    why: "Only run this step when its container is narrower than this.",
+    whenOmitted: "It runs at every container width."
+  },
+  "data-kui.repeat": {
+    why: "How many times this step plays, or infinite to keep going.",
+    whenOmitted: "It plays once."
+  },
+  "data-kui.yoyo": {
+    why: "Play every other repeat backwards, so it swings back and forth.",
+    whenOmitted: "Every repeat plays forwards."
+  }
+};
+
+// src/notes/mechanics.ts
+var MECHANICS_NOTES = {
+  "auto-height.attribute": {
+    why: "Which attribute changing tells the panel it opened or closed, so it can animate its height.",
+    whenOmitted: "Watches data-open."
+  },
+  "bar.from": "How wide the bar starts, growing from its left edge: 0 is empty, 1 is full width.",
+  "bar-grow.from": "How short the bar starts, growing up from its base: 0 is flat, 1 is full height.",
+  "blur.blur": "How blurry it is at its blurriest, before sharpening or after fading out.",
+  "card-toggle.delay": "Wait this long before turning to the back; turning back to the front is never delayed.",
+  "card-toggle.perspective": "How deep the 3D looks as the card turns; smaller is more dramatic.",
+  "card-toggle.trigger": {
+    why: "What turns the card: a click, a hover, a hover that stays turned, or a hover that flips each time.",
+    whenOmitted: "Click."
+  },
+  "draggable.stiffness": "How firmly it springs toward where it is headed; higher snaps harder.",
+  "draggable.damping": "How quickly the spring wobble dies out; lower wobbles longer.",
+  "draggable.mass": "How heavy it feels; higher is slower and swingier.",
+  "draggable.axis": "Limit dragging to sideways only, up and down only, or both.",
+  "draggable.bounds": {
+    why: "The furthest, in pixels, it can be pulled from its start; it gets stiffer near the limit.",
+    whenOmitted: "No limit."
+  },
+  "draggable.return": {
+    why: "Spring back to the starting spot when you let go.",
+    whenOmitted: "Off: it stays where you drop it."
+  },
+  "draggable.inertia": {
+    why: "Keep gliding after you let go, carrying the speed of your flick.",
+    whenOmitted: "Off: it stops exactly where you released it."
+  },
+  "draggable.resistance": "How stiff it feels near the limit, from 0 to 1; lower is harder to stretch. Needs bounds.",
+  "draggable.momentum": "How far a flick carries it past the release point. Needs inertia, and does nothing with return.",
+  "flip-container.scale": {
+    why: "Also stretch items that change size as they move, instead of only sliding them.",
+    whenOmitted: "Off: items only slide into place."
+  },
+  "grid-to-list.scale": {
+    why: "Also stretch items that change size as they move, instead of only sliding them.",
+    whenOmitted: "On for this name, since every item changes shape between grid and list."
+  },
+  "expand-to-modal.scale": {
+    why: "Also stretch items that change size as they move, instead of only sliding them.",
+    whenOmitted: "On for this name, since the item grows into the modal."
+  },
+  "flip-face.angle": "How far the face turns, in degrees; 180deg is a full flip.",
+  "flip-face.perspective": "How deep the 3D looks while turning; smaller is more dramatic.",
+  "flip-indicator.follow": {
+    why: "Which element the indicator slides to, such as the active tab; the first match on the page.",
+    whenOmitted: "Nothing to follow, so the indicator stays put.",
+    required: true
+  },
+  "flip-indicator.attribute": {
+    why: "Which attribute changing tells it the active item has moved.",
+    whenOmitted: "Watches aria-selected."
+  },
+  "icon-toggle.delay": "Wait this long before opening; closing is never delayed.",
+  "magnetic.stiffness": "How firmly it springs toward the pointer; higher follows tighter.",
+  "magnetic.damping": "How quickly the spring wobble dies out; lower wobbles longer.",
+  "magnetic.mass": "How heavy it feels; higher is slower and swingier.",
+  "magnetic.radius": "How close the pointer must come, in pixels, before it starts drifting toward it.",
+  "magnetic.strength": "How much of the pointer distance it follows; higher drifts further.",
+  "motion-path.path": {
+    why: "The route it travels, drawn as SVG path data.",
+    whenOmitted: "The name's own route; plain motion-path uses a straight 120 pixel line to the right."
+  },
+  "motion-path.rotate": {
+    why: "Turn to face the way it travels (auto), the reverse way, or hold a fixed angle.",
+    whenOmitted: "Keeps its own orientation."
+  },
+  "motion-path.anchor": {
+    why: "Which point of the element rides the path; use center when it turns to follow.",
+    whenOmitted: "Its top-left corner."
+  },
+  "motion-path.from": "Where along the path it starts, as a percentage of the length.",
+  "motion-path.to": "Where along the path it stops, as a percentage of the length.",
+  "page-reveal.distance": "How far the page slides as it fades in. Only the slide version moves.",
+  "page-fade.distance": "Does nothing here: page-fade only fades. Use page-slide to move as well.",
+  "path-draw.length": {
+    why: "The total length of the line, so it draws fully; match it to your shape.",
+    whenOmitted: "Assumes 100."
+  },
+  "path-morph.from": {
+    why: "The starting shape, as SVG path data.",
+    whenOmitted: "Uses the path's own shape."
+  },
+  "path-morph.to": {
+    why: "The shape it morphs into, as SVG path data.",
+    whenOmitted: "Nothing to morph into: a warning, and the shape never changes.",
+    required: true
+  },
+  "path-morph.delay": "Wait this long after the pointer arrives before morphing; moving away is never delayed.",
+  "pressable.duration": "How long you must hold before it counts as a press.",
+  "rotate.angle": "How far it is turned at the start, before straightening up.",
+  "scale.scale": "How small it starts before growing to full size; 1 means no size change.",
+  "skew.from": "The tilt at the start of the scroll range.",
+  "skew.to": "The tilt at the end of the scroll range.",
+  "swipeable.axis": "Only count sideways swipes, only up and down swipes, or both.",
+  "swipeable.velocity": "How fast a flick must be, in pixels per second, to count as a swipe.",
+  "tween.x": "How far it slides sideways by the end; a quoted list like x:'0,100,40' passes through each.",
+  "tween.y": "How far it slides up or down by the end; a quoted list like y:'0,-60,0' passes through each.",
+  "tween.z": "How far it moves toward or away from you by the end.",
+  "tween.rotate": "How far it has turned by the end; a quoted list like rotate:'0,90,45' passes through each.",
+  "tween.scale": "How big it is by the end; 2 is double. A quoted list like scale:'1,1.2,1' passes through each.",
+  "tween.scale-x": "How wide it is by the end, separate from its height.",
+  "tween.scale-y": "How tall it is by the end, separate from its width.",
+  "tween.opacity": "How see-through it is by the end; 0 is invisible. A quoted list like opacity:'1,0,1' steps through each.",
+  "tween.blur": "How blurry it is by the end.",
+  "tween.brightness": "How bright it is by the end; 1 is normal, 0 is black.",
+  "tween.saturate": "How vivid the colours are by the end; 0 is grey.",
+  "tween.grayscale": "How grey it is by the end; 1 is fully black and white.",
+  "tween.contrast": "How strong the light and dark difference is by the end.",
+  "tween.hue-rotate": "How far its colours have shifted around the colour wheel by the end.",
+  "tween.invert": "How inverted its colours are by the end; 1 is fully flipped.",
+  "tween.sepia": "How much of an old-photo brown tone it has by the end.",
+  "tween.color": "The text colour it fades to.",
+  "tween.background-color": "The background colour it fades to.",
+  "tween.translate-ease": {
+    why: "Speed curve for just the sliding part.",
+    whenOmitted: "Uses the main speed curve."
+  },
+  "tween.rotate-ease": {
+    why: "Speed curve for just the turning part.",
+    whenOmitted: "Uses the main speed curve."
+  },
+  "tween.scale-ease": {
+    why: "Speed curve for just the resizing part.",
+    whenOmitted: "Uses the main speed curve."
+  },
+  "tween.opacity-ease": {
+    why: "Speed curve for just the fading part.",
+    whenOmitted: "Uses the main speed curve."
+  },
+  "tween.filter-ease": {
+    why: "Speed curve for just the blur and colour-effect part.",
+    whenOmitted: "Uses the main speed curve."
+  },
+  "tween.color-ease": {
+    why: "Speed curve for just the text colour change.",
+    whenOmitted: "Uses the main speed curve."
+  },
+  "tween.background-ease": {
+    why: "Speed curve for just the background colour change.",
+    whenOmitted: "Uses the main speed curve."
+  },
+  "tween-from.x": "How far sideways it starts, then slides back; a quoted list like x:'80,-20,0' passes through each.",
+  "tween-from.y": "How far up or down it starts, then slides back; a quoted list like y:'40,-10,0' passes through each.",
+  "tween-from.z": "How far toward or away from you it starts, then settles back.",
+  "tween-from.rotate": "How far it is turned at the start, before straightening up.",
+  "tween-from.scale": "How big it starts; 0.5 is half size, growing to normal.",
+  "tween-from.scale-x": "How wide it starts, separate from its height.",
+  "tween-from.scale-y": "How tall it starts, separate from its width.",
+  "tween-from.opacity": "How see-through it starts; 0 is invisible, fading in.",
+  "tween-from.blur": "How blurry it starts, sharpening to normal.",
+  "tween-from.brightness": "How bright it starts; 1 is normal, 0 is black.",
+  "tween-from.saturate": "How vivid the colours start; 0 is grey.",
+  "tween-from.grayscale": "How grey it starts; 1 is fully black and white.",
+  "tween-from.contrast": "How strong the light and dark difference starts.",
+  "tween-from.hue-rotate": "How far its colours start shifted around the colour wheel.",
+  "tween-from.invert": "How inverted its colours start; 1 is fully flipped.",
+  "tween-from.sepia": "How much of an old-photo brown tone it starts with.",
+  "tween-from.color": "The text colour it starts as, fading to its normal colour.",
+  "tween-from.background-color": "The background colour it starts as, fading to its normal one.",
+  "tween-from.translate-ease": {
+    why: "Speed curve for just the sliding part.",
+    whenOmitted: "Uses the main speed curve."
+  },
+  "tween-from.rotate-ease": {
+    why: "Speed curve for just the turning part.",
+    whenOmitted: "Uses the main speed curve."
+  },
+  "tween-from.scale-ease": {
+    why: "Speed curve for just the resizing part.",
+    whenOmitted: "Uses the main speed curve."
+  },
+  "tween-from.opacity-ease": {
+    why: "Speed curve for just the fading part.",
+    whenOmitted: "Uses the main speed curve."
+  },
+  "tween-from.filter-ease": {
+    why: "Speed curve for just the blur and colour-effect part.",
+    whenOmitted: "Uses the main speed curve."
+  },
+  "tween-from.color-ease": {
+    why: "Speed curve for just the text colour change.",
+    whenOmitted: "Uses the main speed curve."
+  },
+  "tween-from.background-ease": {
+    why: "Speed curve for just the background colour change.",
+    whenOmitted: "Uses the main speed curve."
+  }
+};
+
+// src/notes/scroll-nav-forms.ts
+var SCROLL_NAV_FORMS_NOTES = {
+  "back-to-top-fade.offset": "How far down the page you scroll, in pixels, before the button appears.",
+  "header-hide-on-scroll.offset": {
+    why: "Smallest scroll movement that counts, so tiny jitters do not hide or show the header."
+  },
+  "header-shrink.offset": "How far down the page you scroll, in pixels, before the header is fully shrunk.",
+  "horizontal-track.distance": "How much vertical scrolling it takes to slide the row all the way across.",
+  "horizontal-track.travel": {
+    why: "How far the row slides sideways in total, if you do not want it measured.",
+    whenOmitted: "Measured from how much wider the row is than its window."
+  },
+  "horizontal-track.target": {
+    why: "Which element is the sliding row; naming it lets the effect build the pinned window for you.",
+    whenOmitted: "The element itself is the row, and you provide the pinned window."
+  },
+  "horizontal-track.scope": {
+    why: "Whether the row is looked for only inside this element or anywhere on the page.",
+    whenOmitted: "Looks only inside this element."
+  },
+  "horizontal-track.offset-top": {
+    why: "Gap left at the top while the row is held, such as for a fixed header. Only works with target.",
+    whenOmitted: "Uses the page-wide pin gap, or none."
+  },
+  "media-scrub.distance": "How much scrolling it takes to play the frames or video from start to end.",
+  "media-scrub.offset-top": {
+    why: "Gap left at the top while the media is held, such as for a fixed header. Only works with spacer.",
+    whenOmitted: "Uses the page-wide pin gap, or none."
+  },
+  "media-scrub.spacer": {
+    why: "Let the effect hold the media in place and reserve the scroll room, so no wrapper is needed.",
+    whenOmitted: "Off: your page positions the media and provides the scroll room."
+  },
+  "media-scrub.frames": {
+    why: "How many numbered images the picture sequence has.",
+    whenOmitted: "Counts as one frame. Ignored when target is set."
+  },
+  "media-scrub.src": {
+    why: "Address of the numbered images, with {i} standing in for the frame number.",
+    whenOmitted: "No images are swapped; a video still plays with scroll."
+  },
+  "media-scrub.target": {
+    why: "Which elements are the frames, shown one at a time as you scroll.",
+    whenOmitted: "Swaps the picture address (src) or scrubs this element if it is a video."
+  },
+  "media-scrub.scope": {
+    why: "Whether the frames are looked for only inside this element or anywhere on the page.",
+    whenOmitted: "Looks anywhere on the page."
+  },
+  "pin.distance": "How much scrolling the element stays held in place for.",
+  "pin.offset-top": {
+    why: "Gap left above the held element, such as for a fixed header.",
+    whenOmitted: "Uses the page-wide pin gap, or none."
+  },
+  "pin.spacer": {
+    why: "Add blank scroll room under the element so it can stay held for the full distance.",
+    whenOmitted: "Off: it only holds while its own parent is still on screen."
+  },
+  "radio-fill.scale": "Makes the filled dot inside the radio button bigger or smaller.",
+  "range-fill.duration": "No visible effect; the fill timing is fixed in the stylesheet.",
+  "range-fill.delay": "No visible effect; the fill timing is fixed in the stylesheet.",
+  "range-fill.ease": "No visible effect; the fill timing is fixed in the stylesheet.",
+  "scroll-progress.distance": "How much scrolling it takes to go from 0 to 100 percent.",
+  "scroll-progress.steps": {
+    why: "Split the scroll into this many numbered steps your styles can react to.",
+    whenOmitted: "0: only a smooth progress value is published, no steps."
+  },
+  "scroll-progress.target": {
+    why: "Which elements get marked as before, active or after as the steps advance. Needs steps.",
+    whenOmitted: "No elements are marked; only the step number is published."
+  },
+  "scroll-progress.scope": {
+    why: "Whether the marked elements are looked for only inside this element or anywhere on the page.",
+    whenOmitted: "Looks anywhere on the page."
+  },
+  "scroll-snap.axis": "Whether scrolling snaps sideways (x) or up and down (y).",
+  "scroll-snap.strictness": "Whether it always snaps (mandatory) or only when you stop close to an item.",
+  "scroll-snap.align": "Which edge of each item lines up with the scroll area when it snaps.",
+  "scroll-snap.target": {
+    why: "Which elements are the snap items; naming them also makes this element the scroll area.",
+    whenOmitted: "Uses its direct children and leaves the scrolling to your page."
+  },
+  "scroll-snap.scope": {
+    why: "Whether the snap items are looked for only inside this element or anywhere on the page.",
+    whenOmitted: "Looks only inside this element."
+  },
+  "scroll-spy.distance": {
+    why: "How much scrolling this section counts as being the current one.",
+    whenOmitted: "One screen height. Ignored when sections is set."
+  },
+  "scroll-spy.target": {
+    why: "Which menu link to highlight; with sections, each link is matched to a section by its #href.",
+    whenOmitted: "No link is highlighted."
+  },
+  "scroll-spy.scope": {
+    why: "Whether the links are looked for only inside this element or anywhere on the page.",
+    whenOmitted: "Anywhere on the page for one section, inside this element when sections is set."
+  },
+  "scroll-spy.sections": {
+    why: "Which elements are the sections, so one setup on a shared parent can track them all.",
+    whenOmitted: "Each section carries its own setup instead."
+  },
+  "scroll-spy.offset-top": {
+    why: "Gap at the top of the screen, such as a fixed header, before a section counts as current.",
+    whenOmitted: "None. Only works when sections is set."
+  },
+  "smooth-scroll.behavior": "Whether jumping to a link glides (smooth) or lands instantly (auto).",
+  "strength-meter.duration": "No visible effect; the meter fade timing is fixed in the stylesheet.",
+  "strength-meter.delay": "No visible effect; the meter fade timing is fixed in the stylesheet.",
+  "strength-meter.ease": "No visible effect; the meter fade timing is fixed in the stylesheet.",
+  "submit-flow.duration": "No visible effect; the stage timing is set by load and hold instead.",
+  "submit-flow.delay": "No visible effect; the stage timing is set by load and hold instead.",
+  "submit-flow.ease": "No visible effect; the stage timing is set by load and hold instead.",
+  "submit-flow.load": "How long the spinner shows after a click, before the button shows done.",
+  "submit-flow.hold": "How long the done state stays before the button goes back to normal.",
+  "toggle-morph.scale": "Makes the whole toggle switch bigger or smaller."
+};
+
+// src/notes/shared.ts
+var SHARED_NOTES = {
+  "*.duration": "How long the motion takes from start to finish.",
+  "*.delay": "Wait this long after the trigger before starting.",
+  "*.ease": "The speed curve: slow start, slow finish, or a bounce.",
+  "*.stagger": {
+    why: "Extra wait per item, so a group arrives one after another.",
+    whenOmitted: "Every item starts at once, unless a parent sets a stagger."
+  }
+};
+
+// src/notes/showcase.ts
+var SHOWCASE_NOTES = {
+  "compare.position": "Where the divider starts between two images, as a share of the width.",
+  "compare.positions": {
+    why: "Where each divider starts when comparing three or more images, as one quoted list.",
+    whenOmitted: "Dividers are spaced evenly."
+  },
+  "compare.axis": "Whether the divider moves left-right or up-down.",
+  "compare.autoplay": {
+    why: "Makes the divider sweep back and forth by itself, until someone grabs it.",
+    whenOmitted: "Never: the divider stays put until dragged."
+  },
+  "compare.duration": "How long one sweep of the divider takes, edge to edge. Only used with autoplay.",
+  "compare.reverse": "Start the sweep toward the other edge first. Only used with autoplay.",
+  "compare.loop": {
+    why: "Keep sweeping back and forth until someone takes the handle. Only used with autoplay.",
+    whenOmitted: "Off: it sweeps once and stops."
+  },
+  "device-frame.kind": "Which device the content is framed in: browser window, phone, tablet or laptop.",
+  "device-frame.color": "Colour of the device body around the screen.",
+  "device-frame.radius": {
+    why: "How rounded the outer corners of the device are.",
+    whenOmitted: "Each device keeps its own natural corner size."
+  },
+  "device-frame.screen-radius": {
+    why: "How rounded the corners of the screen inside the device are.",
+    whenOmitted: "The screen follows the outer corners, less the bezel, and is always at least a little rounded."
+  },
+  "hotspots.target": {
+    why: "Which elements are the notes, one marker each.",
+    whenOmitted: "Uses the items of the list directly inside it."
+  },
+  "hotspots.marker": "Whether each marker shows its number or is a plain dot.",
+  "hotspots.scope": {
+    why: "Whether the notes are looked for inside this element or anywhere on the page.",
+    whenOmitted: "Looks only inside this element."
+  },
+  "lightbox.media": "What opens in the viewer: pictures, videos, or a mix of both.",
+  "lightbox.target": {
+    why: "Which elements open the viewer when clicked.",
+    whenOmitted: "Uses the links (and pictures) inside it."
+  },
+  "lightbox.scope": {
+    why: "Whether the clickable items are looked for inside this element or anywhere on the page.",
+    whenOmitted: "Looks only inside this element."
+  },
+  "lightbox.scale": "How small the picture starts as it grows into the viewer; 1 means no zoom.",
+  "lightbox.loop": {
+    why: "Whether the arrows wrap from the last item back to the first.",
+    whenOmitted: "On: it wraps around."
+  },
+  "lightbox.aspect": {
+    why: "Forces the video frame to a wide, tall or square shape.",
+    whenOmitted: "Tall for a YouTube Shorts link, wide for every other video."
+  },
+  "lightbox.caption": "Where the line under each item comes from, or none to hide it.",
+  "scroll-story.target": {
+    why: "Which elements are the pictures or clips that change as you scroll.",
+    whenOmitted: "Uses the children of its first child."
+  },
+  "scroll-story.sections": {
+    why: "Which elements are the text steps you scroll through.",
+    whenOmitted: "Uses the children of its last child."
+  },
+  "scroll-story.offset-top": "How far down the screen a step must reach before it counts as current.",
+  "scroll-story.side": "Which side of the screen the pinned pictures sit on.",
+  "slideshow.target": {
+    why: "Which elements are the slides.",
+    whenOmitted: "Uses the items of the list directly inside it."
+  },
+  "slideshow.scope": {
+    why: "Whether the slides are looked for inside this element or anywhere on the page.",
+    whenOmitted: "Looks only inside this element."
+  },
+  "slideshow.next": {
+    why: "Your own next button, looked for inside first, then on the page. Replaces the built-in controls.",
+    whenOmitted: "Uses the built-in controls instead."
+  },
+  "slideshow.prev": {
+    why: "Your own previous button, looked for inside first, then on the page. Replaces the built-in controls.",
+    whenOmitted: "Uses the built-in controls instead."
+  },
+  "slideshow.jump": {
+    why: "Your own buttons, each jumping to the slide at its position. Replaces the built-in controls.",
+    whenOmitted: "Uses the built-in controls instead."
+  },
+  "slideshow.controls": "Which built-in controls appear: dots, arrows, both, or none. Ignored once next, prev or jump is set.",
+  "slideshow.autoplay": {
+    why: "How long each slide shows before moving on by itself; 2s at least.",
+    whenOmitted: "Off. It also stays off with controls:none or your own next, prev or jump buttons."
+  },
+  "slideshow.transition": "Whether slides cross-fade or slide sideways.",
+  "slideshow.swipe": "Whether a left or right swipe changes the slide.",
+  "slideshow.mute": {
+    why: "Your own button, inside the slideshow, that mutes and unmutes the video on the current slide.",
+    whenOmitted: "No mute button."
+  },
+  "slow-mo.rate": "How slow motion runs; 0.25 plays at a quarter of normal speed.",
+  "slow-mo.controls": "Whether a toggle button is added, or slow motion is just always on.",
+  "spatial-ring.grab": "Whether people can drag the ring with a finger or mouse.",
+  "spatial-ring.travel": "How many pixels of dragging move the ring by one card.",
+  "spatial-ring.target": {
+    why: "Which elements are the cards.",
+    whenOmitted: "Uses its direct children."
+  },
+  "spatial-ring.next": {
+    why: "Your own button that turns the ring to the next card, looked for inside first, then on the page.",
+    whenOmitted: "No button; use drag, keys or autoplay."
+  },
+  "spatial-ring.prev": {
+    why: "Your own button that turns the ring back a card, looked for inside first, then on the page.",
+    whenOmitted: "No button; use drag, keys or autoplay."
+  },
+  "spatial-ring.jump": {
+    why: "Your own buttons, each turning the ring to the card at its position; inside first, then the page.",
+    whenOmitted: "No jump buttons."
+  },
+  "spatial-ring.pause": {
+    why: "Your own button that pauses and resumes spin or autoplay, looked for inside first, then the page.",
+    whenOmitted: "No pause button; hovering still pauses."
+  },
+  "spatial-ring.hover": {
+    why: "Whether resting the mouse on the ring pauses spin or autoplay. none keeps it moving.",
+    whenOmitted: "Hovering pauses it. Keyboard focus and the pause button always pause."
+  },
+  "spatial-ring.spin": {
+    why: "Turns the ring slowly all the time; this is the time for one full turn.",
+    whenOmitted: "Off: the ring moves only when asked. A negative time turns it backwards."
+  },
+  "spatial-ring.autoplay": {
+    why: "How long the ring rests on each card before turning to the next; 2s at least.",
+    whenOmitted: "Off. If spin is also set, spin wins."
+  },
+  "spatial-ring.lightbox": {
+    why: "Clicking a card opens all the cards in a full-screen viewer.",
+    whenOmitted: "Off: clicks do nothing special."
+  },
+  "spatial-ring.scope": {
+    why: "Whether the cards are looked for inside this element or anywhere on the page.",
+    whenOmitted: "Looks only inside this element."
+  },
+  "spatial-ring.tilt": "How far the camera looks down on the ring; negative looks up from below.",
+  "spatial-ring.arc": "How much of a full circle the cards spread over; less makes a curved slice.",
+  "spatial-ring.radius": {
+    why: "How wide the ring is; a bigger ring spaces cards further apart.",
+    whenOmitted: "Sized from the card width so neighbours just fit. Shrinks if it would overflow the page."
+  },
+  "spatial-ring.gap": "Breathing room between neighbouring cards when the ring size is worked out for you.",
+  "spatial-ring.perspective": "How close the camera is; smaller values make the 3D look more dramatic.",
+  "spatial-ring.facing": "Whether cards turn outward with the ring or always face you so text stays readable.",
+  "spatial-ring.plane": "Whether the ring turns toward you in depth, or lies flat like a clock face.",
+  "spatial-stack.grab": "Whether people can drag the stack with a finger or mouse.",
+  "spatial-stack.travel": "How many pixels of dragging move the stack by one card.",
+  "spatial-stack.target": {
+    why: "Which elements are the cards.",
+    whenOmitted: "Uses its direct children."
+  },
+  "spatial-stack.next": {
+    why: "Your own button that brings up the next card, looked for inside first, then on the page.",
+    whenOmitted: "No button; use drag, keys or autoplay."
+  },
+  "spatial-stack.prev": {
+    why: "Your own button that brings back the previous card, looked for inside first, then on the page.",
+    whenOmitted: "No button; use drag, keys or autoplay."
+  },
+  "spatial-stack.jump": {
+    why: "Your own buttons, each bringing up the card at its position; inside first, then the page.",
+    whenOmitted: "No jump buttons."
+  },
+  "spatial-stack.pause": {
+    why: "Your own button that pauses and resumes spin or autoplay, looked for inside first, then the page.",
+    whenOmitted: "No pause button; hovering still pauses."
+  },
+  "spatial-stack.hover": {
+    why: "Whether resting the mouse on the stack pauses spin or autoplay. none keeps it moving.",
+    whenOmitted: "Hovering pauses it. Keyboard focus and the pause button always pause."
+  },
+  "spatial-stack.spin": {
+    why: "Cycles the cards slowly all the time; this is the time for one full pass.",
+    whenOmitted: "Off: the stack moves only when asked. A negative time runs it backwards."
+  },
+  "spatial-stack.autoplay": {
+    why: "How long the front card rests before the next comes up; 2s at least.",
+    whenOmitted: "Off. If spin is also set, spin wins."
+  },
+  "spatial-stack.lightbox": {
+    why: "Clicking a card opens all the cards in a full-screen viewer.",
+    whenOmitted: "Off: clicks do nothing special."
+  },
+  "spatial-stack.scope": {
+    why: "Whether the cards are looked for inside this element or anywhere on the page.",
+    whenOmitted: "Looks only inside this element."
+  },
+  "spatial-stack.shift": "How far each card behind steps sideways; negative steps left.",
+  "spatial-stack.rise": "How far each card behind steps up; negative steps down.",
+  "spatial-stack.shrink": "How much smaller each card behind gets, per place back.",
+  "spatial-stack.blur": "How much blurrier each card behind gets, per place back.",
+  "spatial-stack.fade": "How much fainter each card behind gets, per place back.",
+  "spatial-stack.depth": "How many cards show behind the front one; the rest wait hidden.",
+  "step-progress.duration": "Passed to your slide styles; autoplay also waits this long after someone moves it.",
+  "step-progress.delay": "Passed to your slide styles to use as a start wait; the library adds no pause itself.",
+  "step-progress.ease": "Passed to your slide styles to use as their speed curve.",
+  "step-progress.steps": {
+    why: "The number of steps, for when the elements cannot tell it.",
+    whenOmitted: "Counts the step elements itself."
+  },
+  "step-progress.target": {
+    why: "Which elements are the steps.",
+    whenOmitted: "Uses its direct children."
+  },
+  "step-progress.next": {
+    why: "Your own button that moves to the next step, looked for inside first, then on the page.",
+    whenOmitted: "With no next, prev, jump or pause, a click on it moves on, unless lightbox is on."
+  },
+  "step-progress.prev": {
+    why: "Your own button that moves to the previous step, looked for inside first, then on the page.",
+    whenOmitted: "With no next, prev, jump or pause, a click on it moves on, unless lightbox is on."
+  },
+  "step-progress.jump": {
+    why: "Your own buttons, each moving to the step at its position; inside first, then the page.",
+    whenOmitted: "With no next, prev, jump or pause, a click on it moves on, unless lightbox is on."
+  },
+  "step-progress.peek": "How far, as a share of a slide, your slide styles push neighbours sideways.",
+  "step-progress.rest": "How large your slide styles draw the non-current slides, where 1 is full size.",
+  "step-progress.main": "How large your slide styles draw the current slide, where 1 is full size.",
+  "step-progress.autoplay": {
+    why: "How long each step shows before moving on by itself; 2s at least.",
+    whenOmitted: "Off: steps change only when someone asks."
+  },
+  "step-progress.pause": {
+    why: "Your own button that pauses and resumes autoplay, looked for inside first, then on the page.",
+    whenOmitted: "No pause button; hovering still pauses."
+  },
+  "step-progress.hover": {
+    why: "Whether resting the mouse on the deck pauses autoplay. none keeps it moving.",
+    whenOmitted: "Hovering pauses it. Keyboard focus and the pause button always pause."
+  },
+  "step-progress.lightbox": {
+    why: "Clicking a slide opens all the slides in a full-screen viewer.",
+    whenOmitted: "Off: clicking a slide moves to the next one."
+  },
+  "step-progress.scope": {
+    why: "Whether the steps named by target are looked for inside this element or anywhere on the page.",
+    whenOmitted: "Looks anywhere on the page, except under the carousel name, which looks inside."
+  }
+};
+
+// src/notes/text.ts
+var TEXT_NOTES = {
+  "count.from": "The number the counter starts at.",
+  "count.to": "The number the counter ends on.",
+  "count.decimals": "How many digits to show after the decimal point; ignored by compact, which shows at most one.",
+  "count.format": {
+    why: "How the number is written: plain, as money, as a percent, or shortened like 1.2K.",
+    whenOmitted: "Plain number. Percent expects a fraction, so 0.82 shows 82%."
+  },
+  "count.currency": {
+    why: "The three-letter currency code used when the format is currency.",
+    whenOmitted: "US dollars."
+  },
+  "count-odometer.from": "The number the rolling digits start at; whole numbers from 0 up, so -5 counts as 0.",
+  "count-odometer.to": "The number the rolling digits land on; whole numbers from 0 up, so 2.5 rounds to 3.",
+  "drop-open.distance": "How far the element drops down into place as it opens.",
+  "meter-bar.from": {
+    why: "How full the bar is when it starts, from 0 (empty) to 1 (full).",
+    whenOmitted: "Starts empty and grows to its full width."
+  },
+  "pop-open.scale": "How small the element starts, where 1 is full size.",
+  "scale-open.scale": "How small the element starts, where 1 is full size.",
+  "scramble-text.step": {
+    why: "How long each scramble flicker lasts; ignored when a total duration is given.",
+    whenOmitted: "40ms per flicker, so longer text takes longer to resolve."
+  },
+  "scramble-text.revealEvery": "How many flickers pass before the next letter locks in.",
+  "scramble-text.charset": "Which characters the unsolved letters flicker through.",
+  "slide-open-down.distance": "How far the element slides in from above.",
+  "slide-open-up.distance": "How far the element slides in from below.",
+  "split-text.stagger": "Wait between each piece, so letters or words arrive one by one.",
+  "split-text.unit": "What the text is cut into: single letters, whole words, or lines.",
+  "split-text.direction": "How each piece arrives: fade, slide up, slide down, or rise from a mask.",
+  "split-text-motion.stagger": "Offset between neighbouring letters, which shapes the wave or jitter.",
+  "split-text-motion.motion": "The style of letter movement: a smooth wave or a nervous jitter.",
+  "text-3d-extrude.angle": "How far the text is turned at the start before it straightens; negative turns it anticlockwise.",
+  "text-3d-extrude.distance": "How far below its place the text starts before it rises in.",
+  "text-gradient-sweep.color": {
+    why: "The colour of the glowing band that sweeps across the text.",
+    whenOmitted: "Uses the text's own colour."
+  },
+  "text-marquee.duration": "How long one full trip of the scrolling text takes; longer is slower.",
+  "text-shimmer.duration": "How long one shimmer pass takes before the next one starts.",
+  "text-sweep.color": {
+    why: "The colour of the highlight bar or underline.",
+    whenOmitted: "Uses the text's own colour; the highlight preset uses gold."
+  },
+  "typewriter.step": "How long each typed letter takes; ignored when a total duration is given.",
+  "typewriter.loop": {
+    why: "Delete the text and type it again, over and over.",
+    whenOmitted: "Off: it types once and stops."
+  },
+  "var-axis.axis": {
+    why: "The four-character name of the font setting to animate, letters or digits, case exact: wght, GRAD.",
+    whenOmitted: "Animates weight (wght); a font without that setting does not move."
+  },
+  "var-axis.from": "The value of the font setting at the start.",
+  "var-axis.to": "The value of the font setting at the end.",
+  "var-slant.from": "How far the letters lean at the start.",
+  "var-slant.to": "How far the letters lean at the end.",
+  "var-weight.from": "How bold the text is at the start, from thin (100) up.",
+  "var-weight.to": "How bold the text is at the end, up to extra heavy (900).",
+  "var-width.from": "How wide the letters are at the start; 100% is normal.",
+  "var-width.to": "How wide the letters are at the end; 100% is normal.",
+  "word-cycler.words": {
+    why: 'The words to cycle through, separated by | and quoted, like "fast|simple|bold".',
+    required: true
+  },
+  "word-cycler.interval": "How long each word stays before the next one swaps in."
+};
+
+// src/notes/index.ts
+var PARAM_NOTES = {
+  ...SHARED_NOTES,
+  ...CATALOG_CORE_NOTES,
+  ...CATALOG_NOTES,
+  ...INTERACTION_NOTES,
+  ...INTERACTION_REVEAL_NOTES,
+  ...TEXT_NOTES,
+  ...SCROLL_NAV_FORMS_NOTES,
+  ...MECHANICS_NOTES,
+  ...SHOWCASE_NOTES,
+  ...KEY_NOTES
+};
+export {
+  PARAM_NOTES
+};