@luna-park/plugin-motion 1.2.0 → 1.4.0

package/dist/index.js

@@ -1,5 +1,5 @@
-(function(){try{if(typeof document<`u`){var e=document.createElement(`style`);e.appendChild(document.createTextNode(`.motion-card[data-v-0dfc3339]{gap:var(--length-xxs);background:var(--color-background-dark);padding:var(--length-xs);border-radius:var(--length-radius-s);flex-direction:column;display:flex}.motion-card .header[data-v-0dfc3339]{font-size:var(--font-size-xs);color:var(--color-content-lite);align-items:center;gap:var(--length-xxs);display:flex}.motion-card .header .title[data-v-0dfc3339]{align-items:center;gap:var(--length-xxs);flex:1;display:flex}.motion-card .header .title .icon[data-v-0dfc3339]{font-size:var(--font-icon-xxs);color:var(--color-content-liter)}.motion-card .header .title .hint[data-v-0dfc3339]{color:var(--color-content-litest)}.motion-panel[data-v-bd5f3bea]{flex-direction:column;display:flex}.motion-panel .cards[data-v-bd5f3bea]{margin:var(--length-xs);gap:var(--length-xs);flex-direction:column;display:flex}.motion-panel .option[data-v-bd5f3bea]{align-items:center;gap:var(--length-xs);display:flex}.motion-panel .option .label[data-v-bd5f3bea]{width:48px;font-size:var(--font-size-xs);color:var(--color-content-liter)}.motion-panel .option .input[data-v-bd5f3bea]{flex:1}.motion-panel .curve[data-v-bd5f3bea]{width:16px;height:16px}.motion-panel .curve polyline[data-v-bd5f3bea]{fill:none;stroke:currentColor;stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round}/*$vite$:1*/`)),document.head.appendChild(e)}}catch(e){console.error(`vite-plugin-css-injected-by-js`,e)}})();
-import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s as ee, t as te } from "./runtime-_rbH5H1J.js";
+(function(){try{if(typeof document<`u`){var e=document.createElement(`style`);e.appendChild(document.createTextNode(`.motion-card[data-v-0dfc3339]{gap:var(--length-xxs);background:var(--color-background-dark);padding:var(--length-xs);border-radius:var(--length-radius-s);flex-direction:column;display:flex}.motion-card .header[data-v-0dfc3339]{font-size:var(--font-size-xs);color:var(--color-content-lite);align-items:center;gap:var(--length-xxs);display:flex}.motion-card .header .title[data-v-0dfc3339]{align-items:center;gap:var(--length-xxs);flex:1;display:flex}.motion-card .header .title .icon[data-v-0dfc3339]{font-size:var(--font-icon-xxs);color:var(--color-content-liter)}.motion-card .header .title .hint[data-v-0dfc3339]{color:var(--color-content-litest)}.motion-panel[data-v-a6164aab]{flex-direction:column;display:flex}.motion-panel .cards[data-v-a6164aab]{margin:var(--length-xs);gap:var(--length-xs);flex-direction:column;display:flex}.motion-panel .option[data-v-a6164aab]{align-items:center;gap:var(--length-xs);display:flex}.motion-panel .option .label[data-v-a6164aab]{width:48px;font-size:var(--font-size-xs);color:var(--color-content-liter)}.motion-panel .option .input[data-v-a6164aab]{flex:1}.motion-panel .curve[data-v-a6164aab]{width:16px;height:16px}.motion-panel .curve polyline[data-v-a6164aab]{fill:none;stroke:currentColor;stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round}/*$vite$:1*/`)),document.head.appendChild(e)}}catch(e){console.error(`vite-plugin-css-injected-by-js`,e)}})();
+import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s as ee, t as te } from "./runtime-cHamDyz2.js";
 import { Fragment as ne, computed as re, createBlock as ie, createCommentVNode as ae, createElementBlock as oe, createElementVNode as se, createSlots as ce, createTextVNode as le, createVNode as ue, defineComponent as de, markRaw as fe, openBlock as pe, ref as me, renderList as he, renderSlot as ge, toDisplayString as _e, unref as s, watch as ve, withCtx as ye } from "vue";
 import { LIcon as be, LInput as xe, LSegmented as Se } from "@luna-park/design";
 //#region \0rolldown/runtime.js
@@ -3234,7 +3234,7 @@ function Ld(e) {
 }
 //#endregion
 //#region src/llm.md?raw
-var Rd = "# Motion plugin\n\nAnimates any layout element. Set its fields as `plugin.motion.<field>` attributes, with `:` for numbers, booleans, objects and bindings: `<div plugin.motion.preset=\"slide-up\" plugin.motion.trigger=\"visible\" :plugin.motion.duration=\"800\" />`.\n\n## Presets\n- Enter, from a start state to the element's normal look: `fade`, `slide-up`, `slide-down`, `slide-left`, `slide-right`, `zoom`, `blur`, `count` (counts the first number in the text from `countFrom` up to its value).\n- Emphasis, from the normal look to a target: `grow`, `shrink`, `lift`, `tilt`.\n- Ambient, looping forever: `pulse`, `float`, `spin`, `shake`, `blink`, `wiggle`.\n- `custom`: animates from `from` to `to`, both objects with `x`, `y` (px), `scale`, `rotate` (degrees), `opacity` and `blur` (px). Missing keys use the normal look (`x: 0, y: 0, scale: 1, rotate: 0, opacity: 1, blur: 0`). `from`/`to` are ignored by other presets.\n\n## Triggers\n- `mount` (default): plays when the element is mounted.\n- `visible`: plays once, the first time the element enters the screen.\n- `scroll`: progress follows the scroll position. `scrollAnchor` (`top`/`center`), `scrollTarget` (screen % where it ends, default 50) and `scrollMode` (`stop`, `continue`, `hold`) tune it.\n- `hover`, `press`, `focus`: plays forward on enter and backward on leave.\n- `state`: follows the `state` boolean, e.g. `:plugin.motion.state=\"menuOpen\"`. The first value is applied instantly (`true` shows the end, `false` the start); later changes play forward (`true`) or backward (`false`).\n\n## Timing\n- `duration` and `delay` are in milliseconds. `duration` defaults to the plugin setting (600 ms), `delay` to 0.\n- `loop`: extra repetitions. `0` plays once, `-1` repeats forever. Without it, ambient presets loop forever and the others play once.\n- `alternate`: plays every other repetition backward.\n- `ease`: `linear`, `outQuad`, `outCubic`, `outExpo` (default), `inOutSine`, `outBack`, `outElastic`, `outBounce`.\n- `stagger` (ms) plays the children one after another, from `staggerFrom` (`first`, `center`, `last`, `random`). Sibling elements with the same settings are staggered together.\n- `split` (`chars`, `words`, `lines`) splits the text and staggers the pieces. It rewrites the element's text, so only use it on static text.\n\n## Notes\n- Motion sets inline `transform`, `opacity` and `filter` styles, and turns `inline` targets into `inline-block`.\n- When the visitor prefers reduced motion (plugin setting `reducedMotion: \"reduce\"`), animations finish instantly and looping or scroll animations are skipped.\n- The Motion panel's Replay button replays the selected element's animation in the editor. It does not rerun the page's logic or reset its variables; reopen the page for that.\n- To replay an animation from logic, prefer the `state` trigger and toggle its variable, instead of hiding and showing the element.\n", zd = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='utf-8'?%3e%3c!--%20Generator:%20Adobe%20Illustrator%2027.5.0,%20SVG%20Export%20Plug-In%20.%20SVG%20Version:%206.00%20Build%200)%20--%3e%3csvg%20version='1.1'%20id='Calque_1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20x='0px'%20y='0px'%20viewBox='0%200%20100%20100'%20style='enable-background:new%200%200%20100%20100;'%20xml:space='preserve'%3e%3cstyle%20type='text/css'%3e%20.st0{clip-path:url(%23SVGID_00000047022933307920725830000016124621795394122405_);fill:url(%23SVGID_00000173862278939040857730000006968173594089226137_);}%20%3c/style%3e%3cg%3e%3cdefs%3e%3cpath%20id='SVGID_1_'%20d='M90.2,51c0,1.8-0.2,3.7-0.5,5.5c-0.2,1.3-1.9,1.9-2.8,0.9L69,39.4C58.5,29,41.5,29,31.1,39.4L13.1,57.4%20c-1,1-2.6,0.4-2.8-0.9c-3.7-22,12.3-43.9,34.9-46.4C69.2,7,91,26.8,90.2,51z%20M55.7,44.4c-3.6-1.5-7.7-1.5-11.3,0%20c-0.6,0.3-1,0.9-1,1.6v42.2c0,0.8,0.6,1.6,1.5,1.7c3.5,0.5,7,0.5,10.5,0c0.8-0.1,1.5-0.8,1.5-1.7V46%20C56.7,45.3,56.3,44.7,55.7,44.4z%20M83.2,70.3c-3.2-3.2-8.2-8.2-11.9-11.9c-1.1-1.1-2.9-0.3-2.9,1.2v23.3c0,1.3,1.4,2.1,2.5,1.4%20c4.9-3,9.2-7.1,12.4-11.9C83.9,71.7,83.8,70.8,83.2,70.3z%20M28.7,58.4C25,62.1,20,67.1,16.8,70.3c-0.6,0.6-0.6,1.5-0.2,2.1%20c3.2,4.8,7.5,8.9,12.4,11.9c1.1,0.7,2.5-0.1,2.5-1.4V59.5C31.6,58,29.8,57.3,28.7,58.4z'/%3e%3c/defs%3e%3cclipPath%20id='SVGID_00000176734456353677071660000015084933141304141444_'%3e%3cuse%20xlink:href='%23SVGID_1_'%20style='overflow:visible;'/%3e%3c/clipPath%3e%3cradialGradient%20id='SVGID_00000019658959786127304010000007409785301083503023_'%20cx='-322.5985'%20cy='231.969'%20r='47.68'%20fx='-327.6757'%20fy='225.8638'%20gradientTransform='matrix(0.7606%200%200%200.7606%20295.3712%20-126.4447)'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20offset='0'%20style='stop-color:%23187BFF'/%3e%3cstop%20offset='1'%20style='stop-color:%230066F1'/%3e%3c/radialGradient%3e%3crect%20x='9.8'%20y='9.8'%20style='clip-path:url(%23SVGID_00000176734456353677071660000015084933141304141444_);fill:url(%23SVGID_00000019658959786127304010000007409785301083503023_);'%20width='80.4'%20height='80.4'/%3e%3c/g%3e%3c/svg%3e", Bd = {
+var Rd = "# Motion plugin\n\nAnimates any layout element. Set its fields as `plugin.motion.<field>` attributes, with `:` for numbers, booleans, objects and bindings: `<div plugin.motion.preset=\"slide-up\" plugin.motion.trigger=\"visible\" :plugin.motion.duration=\"800\" />`.\n\n## Presets\n- Enter, from a start state to the element's normal look: `fade`, `slide-up`, `slide-down`, `slide-left`, `slide-right`, `zoom`, `blur`, `count` (counts the first number in the text from `countFrom` up to its value).\n- Emphasis, from the normal look to a target: `grow`, `shrink`, `lift`, `tilt`.\n- Ambient, looping forever: `pulse`, `float`, `spin`, `shake`, `blink`, `wiggle`, `marquee`.\n- `custom`: animates from `from` to `to`, both objects with `x`, `y` (px), `scale`, `scaleX`, `scaleY`, `rotate` (degrees), `opacity` and `blur` (px). Missing keys use the normal look (`x: 0, y: 0, scale: 1, scaleX: 1, scaleY: 1, rotate: 0, opacity: 1, blur: 0`). `from`/`to` are ignored by other presets.\n- `keyframes` adds evenly spaced steps between `from` and `to` of a `custom` preset, as an array of the same objects. A jelly squash on hover: `plugin.motion.preset=\"custom\" plugin.motion.trigger=\"hover\" :plugin.motion.keyframes=\"[{scaleX:1.08,scaleY:0.92},{scaleX:0.94,scaleY:1.06},{scaleX:1.03,scaleY:0.97}]\" :plugin.motion.duration=\"520\"`. A wiggle that ends where it started: `:plugin.motion.keyframes=\"[{rotate:-3},{rotate:3}]\"`.\n- `marquee` scrolls the children of a row sideways forever, for tickers and logo strips. Put it on a flex row (`display:flex`) inside a parent with `overflow:hidden`, and list the items once: Motion repeats them, hides the copies from screen readers and loops seamlessly, `gap` included. `duration` is the time of one pass (default 20000 ms).\n\n## Triggers\n- `mount` (default): plays when the element is mounted.\n- `visible`: plays once, the first time the element enters the screen.\n- `scroll`: progress follows the scroll position. `scrollAnchor` (`top`/`center`), `scrollTarget` (screen % where it ends, default 50) and `scrollMode` (`stop`, `continue`, `hold`) tune it.\n- `hover`, `press`, `focus`: plays forward on enter and backward on leave.\n- `state`: follows the `state` boolean, e.g. `:plugin.motion.state=\"menuOpen\"`. The first value is applied instantly (`true` shows the end, `false` the start); later changes play forward (`true`) or backward (`false`).\n\n## Timing\n- `duration` and `delay` are in milliseconds. `duration` defaults to the plugin setting (600 ms), `delay` to 0.\n- `loop`: extra repetitions. `0` plays once, `-1` repeats forever. Without it, ambient presets loop forever and the others play once.\n- `alternate`: plays every other repetition backward.\n- `ease`: `linear`, `outQuad`, `outCubic`, `outExpo` (default), `inOutSine`, `outBack`, `outElastic`, `outBounce`.\n- `stepped`: plays in that many jumps instead of a smooth move, like CSS `steps()`. `:plugin.motion.stepped=\"2\"` with `alternate` and `loop` makes a two-frame wobble.\n- `stagger` (ms) plays the children one after another, from `staggerFrom` (`first`, `center`, `last`, `random`). Sibling elements with the same settings are staggered together.\n- `split` (`chars`, `words`, `lines`) splits the text and staggers the pieces. It rewrites the element's text, so only use it on static text.\n\n## Loops and interaction states\n- Use Motion for looping decoration instead of `@keyframes` in `.inject/style.css`. Ambient presets cover the common loops: a blinking light is `plugin.motion.preset=\"blink\"`, a bobbing mascot `float`, a breathing badge `pulse`.\n- Any other two-state loop is a `custom` preset with `loop` and `alternate`: `plugin.motion.preset=\"custom\" :plugin.motion.to=\"{scale:0.55,rotate:45}\" :plugin.motion.loop=\"-1\" :plugin.motion.alternate=\"true\" plugin.motion.ease=\"inOutSine\" :plugin.motion.duration=\"1300\"`. `duration` is one direction, so a 2.6 s CSS cycle is 1300 ms. Without `alternate` the loop restarts from the start, which suits a one-way slide with `ease=\"linear\"`.\n- Offset identical loops with `delay` so they do not move in unison.\n- Hover, press and focus feedback that moves, scales or rotates the element uses the `hover`, `press` and `focus` triggers, e.g. `plugin.motion.preset=\"shrink\" plugin.motion.trigger=\"press\"`. Feedback that changes colours, shadows or outlines uses the layout's own `style:hover`, `style:active` and `style:focus-visible` states, never a `data-*` attribute styled from global CSS.\n- Keep `@keyframes` in `.inject/style.css` only for properties Motion does not animate (colours, shadows, clip paths). Multi-step moves use `keyframes`, stepped timing uses `stepped`, tickers use `marquee`.\n\n## Plugin settings\n- `anchorScroll` makes links to a section (`href=\"#pricing\"`) scroll smoothly, and `anchorOffset` (px) keeps that much space above the section, e.g. the height of a sticky header. Turn it on instead of writing `scroll-behavior` and `scroll-margin-top` in `.inject/style.css`. It follows `reducedMotion` and works with `smoothScroll`.\n- `smoothScroll` adds inertia to the whole page scroll (`smoothScrollLerp` tunes it).\n\n## Notes\n- Motion sets inline `transform`, `opacity` and `filter` styles, and turns `inline` targets into `inline-block`.\n- When the visitor prefers reduced motion (plugin setting `reducedMotion: \"reduce\"`), animations finish instantly and looping or scroll animations are skipped.\n- The Motion panel's Replay button replays the selected element's animation in the editor. It does not rerun the page's logic or reset its variables; reopen the page for that.\n- To replay an animation from logic, prefer the `state` trigger and toggle its variable, instead of hiding and showing the element.\n", zd = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='utf-8'?%3e%3c!--%20Generator:%20Adobe%20Illustrator%2027.5.0,%20SVG%20Export%20Plug-In%20.%20SVG%20Version:%206.00%20Build%200)%20--%3e%3csvg%20version='1.1'%20id='Calque_1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20x='0px'%20y='0px'%20viewBox='0%200%20100%20100'%20style='enable-background:new%200%200%20100%20100;'%20xml:space='preserve'%3e%3cstyle%20type='text/css'%3e%20.st0{clip-path:url(%23SVGID_00000047022933307920725830000016124621795394122405_);fill:url(%23SVGID_00000173862278939040857730000006968173594089226137_);}%20%3c/style%3e%3cg%3e%3cdefs%3e%3cpath%20id='SVGID_1_'%20d='M90.2,51c0,1.8-0.2,3.7-0.5,5.5c-0.2,1.3-1.9,1.9-2.8,0.9L69,39.4C58.5,29,41.5,29,31.1,39.4L13.1,57.4%20c-1,1-2.6,0.4-2.8-0.9c-3.7-22,12.3-43.9,34.9-46.4C69.2,7,91,26.8,90.2,51z%20M55.7,44.4c-3.6-1.5-7.7-1.5-11.3,0%20c-0.6,0.3-1,0.9-1,1.6v42.2c0,0.8,0.6,1.6,1.5,1.7c3.5,0.5,7,0.5,10.5,0c0.8-0.1,1.5-0.8,1.5-1.7V46%20C56.7,45.3,56.3,44.7,55.7,44.4z%20M83.2,70.3c-3.2-3.2-8.2-8.2-11.9-11.9c-1.1-1.1-2.9-0.3-2.9,1.2v23.3c0,1.3,1.4,2.1,2.5,1.4%20c4.9-3,9.2-7.1,12.4-11.9C83.9,71.7,83.8,70.8,83.2,70.3z%20M28.7,58.4C25,62.1,20,67.1,16.8,70.3c-0.6,0.6-0.6,1.5-0.2,2.1%20c3.2,4.8,7.5,8.9,12.4,11.9c1.1,0.7,2.5-0.1,2.5-1.4V59.5C31.6,58,29.8,57.3,28.7,58.4z'/%3e%3c/defs%3e%3cclipPath%20id='SVGID_00000176734456353677071660000015084933141304141444_'%3e%3cuse%20xlink:href='%23SVGID_1_'%20style='overflow:visible;'/%3e%3c/clipPath%3e%3cradialGradient%20id='SVGID_00000019658959786127304010000007409785301083503023_'%20cx='-322.5985'%20cy='231.969'%20r='47.68'%20fx='-327.6757'%20fy='225.8638'%20gradientTransform='matrix(0.7606%200%200%200.7606%20295.3712%20-126.4447)'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20offset='0'%20style='stop-color:%23187BFF'/%3e%3cstop%20offset='1'%20style='stop-color:%230066F1'/%3e%3c/radialGradient%3e%3crect%20x='9.8'%20y='9.8'%20style='clip-path:url(%23SVGID_00000176734456353677071660000015084933141304141444_);fill:url(%23SVGID_00000019658959786127304010000007409785301083503023_);'%20width='80.4'%20height='80.4'/%3e%3c/g%3e%3c/svg%3e", Bd = {
 	prefix: "fas",
 	iconName: "down-left-and-up-right-to-center",
 	icon: [
@@ -3603,6 +3603,16 @@ var Rd = "# Motion plugin\n\nAnimates any layout element. Set its fields as `plu
 		"M448 96c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 320c0 17.7 14.3 32 32 32s32-14.3 32-32l0-320zM310.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L210.7 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l178.7 0-73.4 73.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l128-128z"
 	]
 }, Cf = {
+	prefix: "fas",
+	iconName: "angles-left",
+	icon: [
+		512,
+		512,
+		[171, "angle-double-left"],
+		"f100",
+		"M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160zm352-160l-160 160c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L301.3 256 438.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0z"
+	]
+}, wf = {
 	prefix: "fas",
 	iconName: "arrow-up-from-line",
 	icon: [
@@ -3612,7 +3622,7 @@ var Rd = "# Motion plugin\n\nAnimates any layout element. Set its fields as `plu
 		"f342",
 		"M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.3l0 66.7 0 112c0 17.7 14.3 32 32 32s32-14.3 32-32l0-112 0-66.7 73.4 73.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-128-128zM32 416c-17.7 0-32 14.3-32 32s14.3 32 32 32l320 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L32 416z"
 	]
-}, wf = {
+}, Tf = {
 	prefix: "fas",
 	iconName: "up-right-and-down-left-from-center",
 	icon: [
@@ -3622,10 +3632,10 @@ var Rd = "# Motion plugin\n\nAnimates any layout element. Set its fields as `plu
 		"f424",
 		"M344 0L488 0c13.3 0 24 10.7 24 24l0 144c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-39-39-87 87c-9.4 9.4-24.6 9.4-33.9 0l-32-32c-9.4-9.4-9.4-24.6 0-33.9l87-87L327 41c-6.9-6.9-8.9-17.2-5.2-26.2S334.3 0 344 0zM168 512L24 512c-13.3 0-24-10.7-24-24L0 344c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2l39 39 87-87c9.4-9.4 24.6-9.4 33.9 0l32 32c9.4 9.4 9.4 24.6 0 33.9l-87 87 39 39c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8z"
 	]
-}, Tf = { class: "motion-card" }, Ef = { class: "header" }, Df = { class: "title" }, Of = {
+}, Ef = { class: "motion-card" }, Df = { class: "header" }, Of = { class: "title" }, kf = {
 	key: 0,
 	class: "hint"
-}, kf = /*@__PURE__*/ de({
+}, Af = /*@__PURE__*/ de({
 	__name: "LMotionCard",
 	props: {
 		hint: {},
@@ -3633,23 +3643,23 @@ var Rd = "# Motion plugin\n\nAnimates any layout element. Set its fields as `plu
 		title: {}
 	},
 	setup(e) {
-		return (t, n) => (pe(), oe("div", Tf, [se("div", Ef, [se("div", Df, [
+		return (t, n) => (pe(), oe("div", Ef, [se("div", Df, [se("div", Of, [
 			ue(s(be), {
 				class: "icon",
 				icon: e.icon
 			}, null, 8, ["icon"]),
 			le(" " + _e(e.title) + " ", 1),
-			e.hint ? (pe(), oe("span", Of, _e(e.hint), 1)) : ae("", !0)
+			e.hint ? (pe(), oe("span", kf, _e(e.hint), 1)) : ae("", !0)
 		]), ge(t.$slots, "header", {}, void 0, !0)]), ge(t.$slots, "default", {}, void 0, !0)]));
 	}
-}), Af = (e, t) => {
+}), jf = (e, t) => {
 	let n = e.__vccOpts || e;
 	for (let [e, r] of t) n[e] = r;
 	return n;
-}, jf = /*#__PURE__*/ Af(kf, [["__scopeId", "data-v-0dfc3339"]]), Mf = { class: "motion-panel" }, Nf = { class: "cards" }, Pf = { class: "option" }, Ff = { class: "option" }, If = { class: "option" }, Lf = {
+}, Mf = /*#__PURE__*/ jf(Af, [["__scopeId", "data-v-0dfc3339"]]), Nf = { class: "motion-panel" }, Pf = { class: "cards" }, Ff = { class: "option" }, If = { class: "option" }, Lf = { class: "option" }, Rf = {
 	class: "curve",
 	viewBox: "0 0 24 24"
-}, Rf = ["points"], zf = /*#__PURE__*/ Af(/* @__PURE__ */ de({
+}, zf = ["points"], Bf = /*#__PURE__*/ jf(/* @__PURE__ */ de({
 	__name: "LMotionPanel",
 	props: {
 		getElements: { type: Function },
@@ -3664,8 +3674,9 @@ var Rd = "# Motion plugin\n\nAnimates any layout element. Set its fields as `plu
 			count: lf,
 			fade: bf,
 			float: Ud,
-			grow: wf,
-			lift: Cf,
+			grow: Tf,
+			lift: wf,
+			marquee: Cf,
 			pulse: Zd,
 			shake: nf,
 			shrink: Bd,
@@ -3680,113 +3691,113 @@ var Rd = "# Motion plugin\n\nAnimates any layout element. Set its fields as `plu
 		}, le = [
 			{
 				icon: { icon: vf },
-				id: "mount",
 				label: "",
-				title: "On mount"
+				title: "On mount",
+				value: "mount"
 			},
 			{
 				icon: { icon: sf },
-				id: "visible",
 				label: "",
-				title: "When visible"
+				title: "When visible",
+				value: "visible"
 			},
 			{
 				icon: { icon: ef },
-				id: "scroll",
 				label: "",
-				title: "Synced with scroll"
+				title: "Synced with scroll",
+				value: "scroll"
 			},
 			{
 				icon: { icon: Yd },
-				id: "hover",
 				label: "",
-				title: "On hover"
+				title: "On hover",
+				value: "hover"
 			},
 			{
 				icon: { icon: cf },
-				id: "press",
 				label: "",
-				title: "On press"
+				title: "On press",
+				value: "press"
 			},
 			{
 				icon: { icon: Gd },
-				id: "focus",
 				label: "",
-				title: "On focus"
+				title: "On focus",
+				value: "focus"
 			},
 			{
 				icon: { icon: Qd },
-				id: "state",
 				label: "",
-				title: "From a state"
+				title: "From a state",
+				value: "state"
 			}
 		], de = [
 			{
 				icon: { icon: Xd },
-				id: "enter",
 				label: "",
-				title: "Enter"
+				title: "Enter",
+				value: "enter"
 			},
 			{
 				icon: { icon: Wd },
-				id: "emphasis",
 				label: "",
-				title: "Emphasis"
+				title: "Emphasis",
+				value: "emphasis"
 			},
 			{
 				icon: { icon: Jd },
-				id: "ambient",
 				label: "",
-				title: "Ambient"
+				title: "Ambient",
+				value: "ambient"
 			},
 			{
 				icon: { icon: df },
-				id: "custom",
 				label: "",
-				title: "Custom from/to"
+				title: "Custom from/to",
+				value: "custom"
 			}
 		], fe = [{
 			icon: { icon: Kd },
-			id: "top",
 			label: "",
-			title: "Top edge of the element"
+			title: "Top edge of the element",
+			value: "top"
 		}, {
 			icon: { icon: tf },
-			id: "center",
 			label: "",
-			title: "Center of the element"
+			title: "Center of the element",
+			value: "center"
 		}], ge = [
 			{
 				icon: { icon: Sf },
-				id: "stop",
 				label: "",
-				title: "Stop at target"
+				title: "Stop at target",
+				value: "stop"
 			},
 			{
 				icon: { icon: ff },
-				id: "continue",
 				label: "",
-				title: "Continue past target"
+				title: "Continue past target",
+				value: "continue"
 			},
 			{
 				icon: { icon: hf },
-				id: "hold",
 				label: "",
-				title: "Hold between target and 100 − target, then reverse"
+				title: "Hold between target and 100 − target, then reverse",
+				value: "hold"
 			}
 		], _e = o.map((e) => ({
-			id: e,
 			label: "",
-			title: e
+			title: e,
+			value: e
 		})), be = me(we(i.modelValue.preset));
 		ve(() => i.modelValue.preset, (e) => {
 			be.value = we(e);
 		});
 		let Ce = re(() => Object.entries(a).filter(([, e]) => e.category === be.value).map(([e]) => ({
 			icon: { icon: te[e] },
-			id: e,
 			label: "",
-			title: Te(e)
+			title: Te(e),
+			value: e
 		})));
 		function we(e) {
 			return e === "custom" ? "custom" : a[e]?.category ?? "enter";
@@ -3812,9 +3823,9 @@ var Rd = "# Motion plugin\n\nAnimates any layout element. Set its fields as `plu
 				return `${3 + r * 18},${17 - n(r) * 10}`;
 			}).join(" ");
 		}
-		return (n, r) => (pe(), oe("div", Mf, [se("div", Nf, [
-			ue(jf, {
-				hint: le.find((e) => e.id === t.modelValue.trigger)?.title,
+		return (n, r) => (pe(), oe("div", Nf, [se("div", Pf, [
+			ue(Mf, {
+				hint: le.find((e) => e.value === t.modelValue.trigger)?.title,
 				icon: s(mf),
 				title: "Trigger"
 			}, {
@@ -3825,19 +3836,19 @@ var Rd = "# Motion plugin\n\nAnimates any layout element. Set its fields as `plu
 					wide: "",
 					"onUpdate:modelValue": r[0] ||= (e) => l("trigger", e)
 				}, null, 8, ["model-value"]), t.modelValue.trigger === "scroll" ? (pe(), oe(ne, { key: 0 }, [
-					se("div", Pf, [r[7] ||= se("span", { class: "label" }, "Anchor", -1), ue(s(Se), {
+					se("div", Ff, [r[7] ||= se("span", { class: "label" }, "Anchor", -1), ue(s(Se), {
 						"model-value": t.modelValue.scrollAnchor ?? "top",
 						options: fe,
 						small: "",
 						"onUpdate:modelValue": r[1] ||= (e) => l("scrollAnchor", e)
 					}, null, 8, ["model-value"])]),
-					se("div", Ff, [r[8] ||= se("span", { class: "label" }, "Mode", -1), ue(s(Se), {
+					se("div", If, [r[8] ||= se("span", { class: "label" }, "Mode", -1), ue(s(Se), {
 						"model-value": t.modelValue.scrollMode ?? "stop",
 						options: ge,
 						small: "",
 						"onUpdate:modelValue": r[2] ||= (e) => l("scrollMode", e)
 					}, null, 8, ["model-value"])]),
-					se("div", If, [r[9] ||= se("span", { class: "label" }, "Target", -1), ue(s(xe), {
+					se("div", Lf, [r[9] ||= se("span", { class: "label" }, "Target", -1), ue(s(xe), {
 						class: "input",
 						"model-value": t.modelValue.scrollTarget ?? 50,
 						options: {
@@ -3853,7 +3864,7 @@ var Rd = "# Motion plugin\n\nAnimates any layout element. Set its fields as `plu
 				], 64)) : ae("", !0)]),
 				_: 1
 			}, 8, ["hint", "icon"]),
-			ue(jf, {
+			ue(Mf, {
 				hint: Te(t.modelValue.preset),
 				icon: s(qd),
 				title: "Animation"
@@ -3874,7 +3885,7 @@ var Rd = "# Motion plugin\n\nAnimates any layout element. Set its fields as `plu
 				}, null, 8, ["model-value", "options"]))]),
 				_: 1
 			}, 8, ["hint", "icon"]),
-			ue(jf, {
+			ue(Mf, {
 				hint: t.modelValue.ease ?? `${s(e).ease} (default)`,
 				icon: s(af),
 				title: "Easing"
@@ -3887,15 +3898,15 @@ var Rd = "# Motion plugin\n\nAnimates any layout element. Set its fields as `plu
 					"onUpdate:modelValue": r[6] ||= (e) => l("ease", e)
 				}, ce({ _: 2 }, [he(s(o), (e) => ({
 					name: e,
-					fn: ye(() => [(pe(), oe("svg", Lf, [se("polyline", { points: Ee(e) }, null, 8, Rf)]))])
+					fn: ye(() => [(pe(), oe("svg", Rf, [se("polyline", { points: Ee(e) }, null, 8, zf)]))])
 				}))]), 1032, ["model-value", "options"])]),
 				_: 1
 			}, 8, ["hint", "icon"])
 		])]));
 	}
-}), [["__scopeId", "data-v-bd5f3bea"]]), Bf = {
+}), [["__scopeId", "data-v-a6164aab"]]), Vf = {
 	name: "@luna-park/plugin-motion",
-	version: "1.2.0",
+	version: "1.4.0",
 	private: !1,
 	description: "Motion plugin for Luna Park.",
 	keywords: [
@@ -3932,7 +3943,7 @@ var Rd = "# Motion plugin\n\nAnimates any layout element. Set its fields as `plu
 	},
 	devDependencies: {
 		"@fortawesome/pro-solid-svg-icons": "link:..\\..\\@fortawesome\\pro-solid-svg-icons",
-		"@luna-park/design": "^1.5.0",
+		"@luna-park/design": "^1.6.0",
 		"@luna-park/eslint-config": "^1.3.0",
 		"@luna-park/plugin": "^1.8.0",
 		"@types/node": "^26.6.3",
@@ -3947,10 +3958,10 @@ var Rd = "# Motion plugin\n\nAnimates any layout element. Set its fields as `plu
 		"vue-tsc": "^3.3.11"
 	},
 	peerDependencies: {
-		"@luna-park/design": "^1.4.0",
+		"@luna-park/design": "^1.6.0",
 		vue: "^3.5.24"
 	}
-}, Vf = [
+}, Hf = [
 	"mount",
 	"visible",
 	"scroll",
@@ -3958,46 +3969,57 @@ var Rd = "# Motion plugin\n\nAnimates any layout element. Set its fields as `plu
 	"press",
 	"focus",
 	"state"
-];
-function Hf(e) {
-	return l.object({
-		blur: l.number({
-			default: 0,
-			name: "Blur",
-			options: { suffix: "px" }
-		}),
-		opacity: l.number({
-			default: 1,
-			name: "Opacity"
-		}),
-		rotate: l.number({
-			default: 0,
-			name: "Rotate (deg)"
-		}),
-		scale: l.number({
-			default: 1,
-			name: "Scale"
-		}),
-		x: l.number({
-			default: 0,
-			name: "X",
-			options: { suffix: "px" }
-		}),
-		y: l.number({
-			default: 0,
-			name: "Y",
-			options: { suffix: "px" }
-		})
-	}, {
+], Uf = {
+	blur: l.number({
+		default: 0,
+		name: "Blur",
+		options: { suffix: "px" }
+	}),
+	opacity: l.number({
+		default: 1,
+		name: "Opacity"
+	}),
+	rotate: l.number({
+		default: 0,
+		name: "Rotate (deg)"
+	}),
+	scale: l.number({
+		default: 1,
+		name: "Scale"
+	}),
+	scaleX: l.number({
+		default: 1,
+		name: "Scale X"
+	}),
+	scaleY: l.number({
+		default: 1,
+		name: "Scale Y"
+	}),
+	x: l.number({
+		default: 0,
+		name: "X",
+		options: { suffix: "px" }
+	}),
+	y: l.number({
+		default: 0,
+		name: "Y",
+		options: { suffix: "px" }
+	})
+};
+function Wf(e) {
+	return e.preset !== "custom";
+}
+function Gf(e) {
+	return l.object(Uf, {
 		name: e,
-		options: { hidden: (e) => e.preset !== "custom" }
+		options: { hidden: Wf }
 	});
 }
-var Uf = {
-	component: fe(zf),
+var Kf = {
+	component: fe(Bf),
 	directive: {
 		build: {
-			from: `${Bf.name}/runtime`,
+			from: `${Vf.name}/runtime`,
 			name: "vMotion"
 		},
 		value: t
@@ -4040,7 +4062,14 @@ var Uf = {
 			optional: !0,
 			options: { hidden: !0 }
 		}),
-		from: Hf("From"),
+		from: Gf("From"),
+		keyframes: l.array(l.object(Uf, { name: "Step" }), {
+			default: [],
+			description: "Steps played between From and To, evenly spaced",
+			name: "Keyframes",
+			optional: !0,
+			options: { hidden: Wf }
+		}),
 		loop: l.number({
 			default: -1,
 			description: "-1 = infinite",
@@ -4113,37 +4142,54 @@ var Uf = {
 			name: "State",
 			options: { hidden: (e) => e.trigger !== "state" }
 		}),
-		to: Hf("To"),
+		stepped: l.number({
+			default: 2,
+			description: "Jumps through this many frames instead of moving smoothly",
+			name: "Stepped",
+			optional: !0
+		}),
+		to: Gf("To"),
 		trigger: l.string({
 			default: "mount",
-			enum: Vf,
+			enum: Hf,
 			name: "Trigger",
 			options: { hidden: !0 }
 		})
 	}
-}, Wf = l.object({
+}, qf = l.object({
+	anchorOffset: l.number({
+		default: 0,
+		description: "Space kept above a section reached from a link, e.g. the height of a sticky header.",
+		name: "Anchor offset",
+		options: { suffix: "px" }
+	}),
+	anchorScroll: l.boolean({
+		default: !1,
+		description: "Links to a section of the page (#pricing) scroll to it smoothly.",
+		name: "Smooth anchor links"
+	}),
 	duration: l.number({
-		name: "Default duration (ms)",
-		default: 600
+		default: 600,
+		name: "Default duration (ms)"
 	}),
 	ease: l.string({
-		name: "Default easing",
 		default: "outExpo",
-		enum: o
+		enum: o,
+		name: "Default easing"
 	}),
 	reducedMotion: l.string({
-		name: "Reduced motion",
 		default: "reduce",
-		enum: ["reduce", "ignore"]
+		enum: ["reduce", "ignore"],
+		name: "Reduced motion"
 	}),
 	smoothScroll: l.boolean({
-		name: "Smooth scroll",
-		default: !1
+		default: !1,
+		name: "Smooth scroll"
 	}),
 	smoothScrollLerp: l.number({
-		name: "Smooth scroll intensity",
 		default: .1,
 		description: "Lower is smoother.",
+		name: "Smooth scroll intensity",
 		options: {
 			clamp: !0,
 			max: 1,
@@ -4151,10 +4197,10 @@ var Uf = {
 			step: .01
 		}
 	})
-}), Gf = n(!0);
-function Kf({ config: e, mode: t }) {
+}), Jf = n(!0);
+function Yf({ config: e, mode: t }) {
 	if (t === "editor") return {
-		component: Gf,
+		component: Jf,
 		name: "MotionScroll"
 	};
 	if (e.smoothScroll) return {
@@ -4163,38 +4209,46 @@ function Kf({ config: e, mode: t }) {
 		name: "MotionScroll"
 	};
 }
-function qf({ config: e }) {
+function Xf({ config: e, mode: t }) {
+	if (t === "editor" || !e.anchorScroll) return "";
+	let n = `[id] { scroll-margin-top: ${e.anchorOffset}px; }`;
+	if (e.smoothScroll) return n;
+	let r = "html { scroll-behavior: smooth; }";
+	return `${n} ${e.reducedMotion === "reduce" ? `@media (prefers-reduced-motion: no-preference) { ${r} }` : r}`;
+}
+function Zf({ config: e }) {
 	i(e);
 }
-var Jf = Ld({
-	id: "motion",
-	name: "Motion",
-	description: "Animate elements with anime.js.",
-	llm: Rd,
+var Qf = Ld({
 	build: {
 		frontImports: [{
-			name: Bf.name,
-			version: Bf.version
+			name: Vf.name,
+			version: Vf.version
 		}],
 		injections: ({ config: e }) => ({
-			[Jl.AppImport]: `import { MotionScroll } from "${Bf.name}/runtime";`,
+			[Jl.AppImport]: `import { MotionScroll } from "${Vf.name}/runtime";`,
 			[Jl.AppBody]: "app.component(\"MotionScroll\", MotionScroll);",
 			[Jl.AppSetup]: `
-import { configureMotion } from "${Bf.name}/runtime";
+import { configureMotion } from "${Vf.name}/runtime";
 configureMotion(${JSON.stringify(e)});
 `
 		})
 	},
-	config: Wf,
+	config: qf,
+	description: "Animate elements with anime.js.",
 	editor: {
-		panel: { element: [Uf] },
-		wrapper: Kf
+		panel: { element: [Kf] },
+		wrapper: Yf
 	},
 	icon: zd,
+	id: "motion",
+	inject: { css: Xf },
 	lifecycle: {
-		mount: qf,
-		update: qf
-	}
+		mount: Zf,
+		update: Zf
+	},
+	llm: Rd,
+	name: "Motion"
 });
 //#endregion
-export { Jf as default };
+export { Qf as default };