@kadal/deck 0.0.0-stage → 0.1.0

package/dist/compiler/split.js

@@ -0,0 +1,195 @@
+import YAML from "yaml";
+//#region src/compiler/split.ts
+const HORIZONTAL = /^---\s*$/;
+const VERTICAL = /^----+\s*$/;
+const FRONTMATTER_LINE = /^\s*[A-Za-z_][\w.-]*\s*:(\s|$)/;
+const NOTES = /<Notes(?:\s[^>]*)?>([\s\S]*?)<\/Notes>/g;
+/** True when every non-empty line of `lines` could be a YAML mapping line or a continuation. */
+function looksLikeYaml(lines) {
+	let any = false;
+	for (const line of lines) {
+		if (!line.trim()) continue;
+		if (/^\s+/.test(line) || /^\s*-\s/.test(line) || /^\s*#/.test(line)) continue;
+		if (!FRONTMATTER_LINE.test(line)) return false;
+		any = true;
+	}
+	return any;
+}
+function parseYaml(text, where) {
+	const value = YAML.parse(text);
+	if (value === null || value === void 0) return {};
+	if (typeof value !== "object" || Array.isArray(value)) throw new Error(`${where}: frontmatter must be a YAML mapping`);
+	return value;
+}
+/**
+* Cut the text at separators, taking fenced frontmatter as it goes. After a separator at line i,
+* if the lines up to the next `---` read as YAML, they are that piece's frontmatter and the closing
+* fence is consumed rather than treated as another separator. The head piece works the same way
+* when the file opens with a fence. Fenced code is never cut.
+*/
+function cut(text) {
+	const lines = text.split(/\r?\n/);
+	const pieces = [];
+	let inFence = false;
+	let fence = "";
+	/** Try to read a fenced YAML block starting at `from` (the line after an opening fence). */
+	const frontmatterAt = (from) => {
+		let close = -1;
+		for (let k = from; k < lines.length; k++) {
+			const l = lines[k];
+			if (HORIZONTAL.test(l)) {
+				close = k;
+				break;
+			}
+			if (VERTICAL.test(l)) return null;
+		}
+		if (close === -1) return null;
+		const block = lines.slice(from, close);
+		if (!looksLikeYaml(block)) return null;
+		return {
+			yaml: block.join("\n"),
+			next: close + 1
+		};
+	};
+	let i = 0;
+	let firstContent = 0;
+	while (firstContent < lines.length && !lines[firstContent].trim()) firstContent++;
+	let head = {
+		vertical: false,
+		frontmatter: null,
+		lines: [],
+		line: 1
+	};
+	if (firstContent < lines.length && HORIZONTAL.test(lines[firstContent])) {
+		const fm = frontmatterAt(firstContent + 1);
+		if (fm) {
+			head = {
+				vertical: false,
+				frontmatter: fm.yaml,
+				lines: [],
+				line: fm.next + 1
+			};
+			i = fm.next;
+		}
+	}
+	pieces.push(head);
+	for (; i < lines.length; i++) {
+		const line = lines[i];
+		const fenceMatch = /^\s*(`{3,}|~{3,})/.exec(line);
+		if (fenceMatch) {
+			const mark = fenceMatch[1];
+			if (!inFence) {
+				inFence = true;
+				fence = mark;
+			} else if (mark[0] === fence[0] && mark.length >= fence.length) inFence = false;
+		}
+		if (!inFence && (HORIZONTAL.test(line) || VERTICAL.test(line))) {
+			const vertical = VERTICAL.test(line);
+			const fm = frontmatterAt(i + 1);
+			if (fm) {
+				pieces.push({
+					vertical,
+					frontmatter: fm.yaml,
+					lines: [],
+					line: fm.next + 1
+				});
+				i = fm.next - 1;
+			} else pieces.push({
+				vertical,
+				frontmatter: null,
+				lines: [],
+				line: i + 2
+			});
+			continue;
+		}
+		pieces[pieces.length - 1].lines.push(line);
+	}
+	return pieces;
+}
+function extractNotes(content) {
+	const notes = [];
+	return {
+		content: content.replace(NOTES, (_m, inner) => {
+			notes.push(inner.trim());
+			return "";
+		}),
+		notes: notes.length ? notes.join("\n\n") : null
+	};
+}
+/**
+* Split a deck file into slides. Includes (`src:`) are expanded in place; a piece that is only
+* frontmatter with a `src` contributes the included file's slides, with the included file's own
+* headmatter and the piece's remaining frontmatter merged into the first of them.
+*/
+function splitDeck(text, options) {
+	const pieces = cut(text);
+	const head = pieces[0];
+	const headmatter = head.frontmatter ? parseYaml(head.frontmatter, `${options.file}:1`) : {};
+	const slides = [];
+	let h = -1;
+	let v = 0;
+	const push = (content, frontmatter, vertical, source) => {
+		if (vertical && h >= 0) v++;
+		else {
+			h++;
+			v = 0;
+		}
+		const { content: body, notes } = extractNotes(content);
+		slides.push({
+			index: slides.length,
+			h,
+			v,
+			frontmatter,
+			content: body.trim(),
+			notes,
+			source
+		});
+	};
+	pieces.forEach((piece, i) => {
+		const where = `${options.file}:${piece.line}`;
+		const frontmatter = i === 0 ? { ...headmatter } : !piece.frontmatter ? {} : parseYaml(piece.frontmatter, where);
+		const content = piece.lines.join("\n");
+		const blank = !content.trim();
+		if (typeof frontmatter.src === "string") {
+			const { src, ...merge } = frontmatter;
+			const included = options.resolveInclude?.(src, options.file);
+			if (!included) throw new Error(`${where}: cannot include "${src}"`);
+			const inner = splitDeck(included.text, {
+				...options,
+				file: included.file
+			});
+			inner.slides.forEach((s, j) => {
+				push(s.content + (s.notes ? `\n\n<Notes>${s.notes}</Notes>` : ""), j === 0 ? {
+					...inner.headmatter,
+					...s.frontmatter,
+					...merge
+				} : s.frontmatter, j === 0 ? piece.vertical : s.v > 0, s.source);
+			});
+			return;
+		}
+		if (blank && (i === 0 || !Object.keys(frontmatter).length)) return;
+		push(content, frontmatter, piece.vertical, {
+			file: options.file,
+			line: piece.line
+		});
+	});
+	return {
+		headmatter,
+		slides
+	};
+}
+/** The title a slide reports to the table of contents: frontmatter `title`, else its first heading. */
+function titleOf(slide) {
+	if (typeof slide.frontmatter.title === "string") return slide.frontmatter.title;
+	const m = /^\s*#{1,6}\s+(.+?)\s*#*\s*$/m.exec(slide.content);
+	if (!m) return null;
+	return m[1].replace(/[*_`~]/g, "").replace(/<[^>]+>/g, "").trim() || null;
+}
+/** The level of the title, for the table of contents: frontmatter `level`, else the heading depth. */
+function levelOf(slide) {
+	if (typeof slide.frontmatter.level === "number") return slide.frontmatter.level;
+	const m = /^\s*(#{1,6})\s+/m.exec(slide.content);
+	return m ? m[1].length : 1;
+}
+//#endregion
+export { levelOf, splitDeck, titleOf };

package/dist/components/Background.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+//#region src/components/Background.d.ts
+/**
+ * A component background inside a slide — the RLA deck's pattern of an absolutely positioned
+ * animated layer under the content. `<Background name="aurora" />` picks a registered one;
+ * children make a custom one.
+ */
+export declare function Background({ name, children, opacity, className, ...props }: {
+  name?: string;
+  children?: ReactNode;
+  opacity?: number;
+  className?: string;
+  [key: string]: unknown;
+}): import("react").JSX.Element;
+//#endregion

package/dist/components/Background.js

@@ -0,0 +1,24 @@
+import { useSlide } from "../react/context.js";
+import { backgroundComponent } from "../react/Backgrounds.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Background.tsx
+/**
+* A component background inside a slide — the RLA deck's pattern of an absolutely positioned
+* animated layer under the content. `<Background name="aurora" />` picks a registered one;
+* children make a custom one.
+*/
+function Background({ name, children, opacity = 1, className, ...props }) {
+	const slide = useSlide();
+	const Comp = name ? backgroundComponent(name) : null;
+	return /* @__PURE__ */ jsx("div", {
+		className: ["deck-slide-background", className].filter(Boolean).join(" "),
+		style: { opacity },
+		"aria-hidden": true,
+		children: Comp ? /* @__PURE__ */ jsx(Comp, {
+			...props,
+			active: slide.active
+		}) : children
+	});
+}
+//#endregion
+export { Background };

package/dist/components/Click.d.ts

@@ -0,0 +1,54 @@
+import { ClickAt } from "../core/clicks.js";
+import { ElementType, ReactNode } from "react";
+//#region src/components/Click.d.ts
+/**
+ * Click-driven reveals. `<Click>` is Slidev's v-click and reveal.js's fragment in one: it registers
+ * a step and shows its children from that step on (or hides them, with `hide`). `effect` names the
+ * reveal.js fragment styles — fade-in (default), fade-up/down/left/right, fade-out, grow, shrink,
+ * strike, highlight-red/green/blue, highlight-current-*, semi-fade-out, current-visible,
+ * fade-in-then-out, fade-in-then-semi-out — and any custom class the theme defines.
+ */
+export type ClickEffect = "fade-in" | "fade-out" | "fade-up" | "fade-down" | "fade-left" | "fade-right" | "fade-in-then-out" | "fade-in-then-semi-out" | "current-visible" | "grow" | "shrink" | "strike" | "semi-fade-out" | "highlight-red" | "highlight-green" | "highlight-blue" | "highlight-current-red" | "highlight-current-green" | "highlight-current-blue" | (string & {});
+export interface ClickProps {
+  at?: ClickAt;
+  hide?: boolean;
+  effect?: ClickEffect;
+  /** The element to render; a `span` for inline text, `div` by default. */
+  as?: ElementType;
+  className?: string;
+  style?: React.CSSProperties;
+  children?: ReactNode;
+  [key: string]: unknown;
+}
+export declare function Click({ at, hide, effect, as, className, style, children, ...rest }: ClickProps): import("react").JSX.Element;
+/** reveal.js spelling. */
+export declare const Fragment: typeof Click;
+/** Shows with the previous click rather than one after it. */
+export declare function After(props: Omit<ClickProps, "at">): import("react").JSX.Element;
+export interface ClicksProps {
+  /** Reveal this many items per click. */
+  every?: number;
+  /** How deep nested lists take part; 1 means only the outer list. */
+  depth?: number;
+  effect?: ClickEffect;
+  children?: ReactNode;
+}
+export declare function Clicks({ every, depth, effect, children }: ClicksProps): import("react").JSX.Element;
+/** The `li` mapping: a plain list item, or a click step when inside `<Clicks>`. */
+export declare function Li({ children, ...rest }: {
+  children?: ReactNode;
+  [key: string]: unknown;
+}): import("react").JSX.Element;
+/** Lists keep their markup. `<Clicks>` recognises these two by identity, so it leaves them to
+ * step their own items; the class is for the stylesheet. */
+export declare function Ul(props: {
+  children?: ReactNode;
+  className?: string;
+  [key: string]: unknown;
+}): import("react").JSX.Element;
+export declare function Ol(props: {
+  children?: ReactNode;
+  className?: string;
+  [key: string]: unknown;
+}): import("react").JSX.Element;
+//#endregion

package/dist/components/Click.js

@@ -0,0 +1,129 @@
+import { useClick } from "../react/hooks.js";
+import { Children, createContext, isValidElement, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Click.tsx
+function Click({ at, hide, effect = "fade-in", as, className, style, children, ...rest }) {
+	const { shown, current, range, click } = useClick({
+		at,
+		hide
+	});
+	const Tag = as ?? "div";
+	const past = click > range.start;
+	return /* @__PURE__ */ jsx(Tag, {
+		...rest,
+		className: [
+			"deck-click",
+			`effect-${effect}`,
+			shown ? "is-shown" : "is-hidden",
+			current ? "is-current" : "",
+			past ? "is-past" : "",
+			className
+		].filter(Boolean).join(" "),
+		style,
+		"data-click-at": range.start,
+		"aria-hidden": shown ? void 0 : true,
+		children
+	});
+}
+/** reveal.js spelling. */
+const Fragment$1 = Click;
+/** Shows with the previous click rather than one after it. */
+function After(props) {
+	return /* @__PURE__ */ jsx(Click, {
+		...props,
+		at: "+0"
+	});
+}
+const ClicksContext = createContext(null);
+/**
+* Reveal each child in turn. Wrap a Markdown list to step through its items (the `li` mapping
+* registers itself when inside a `<Clicks>`), or any elements to step through them.
+*/
+/**
+* Does this child step its own items, so `<Clicks>` must leave it alone?
+*
+* A Markdown list does: the `li` mapping below turns each item into a click while it is inside a
+* `<Clicks>`. Wrapping the list as well spends a click on the list as a whole and lands every item
+* one step late — which puts the notes' `[click]` markers, the presenter's step count and any
+* `<Click at={n}>` later on the slide out of step with what the audience sees.
+*
+* MDX maps `ul` to `Ul` (`export { Ul as ul }` in components/index.ts), so what arrives here has
+* that component as its type and no className of its own — the class exists only once `Ul` has
+* rendered, which is why the className test alone could never see it.
+*/
+function stepsItsOwnItems(child) {
+	if (!isValidElement(child)) return false;
+	const type = child.type;
+	if (type === Ul || type === Ol) return true;
+	if (type === "ul" || type === "ol") return true;
+	return !!child.props?.className?.includes?.("deck-list");
+}
+function Clicks({ every = 1, depth = 1, effect = "fade-in", children }) {
+	const items = Children.toArray(children);
+	const listLike = items.some(stepsItsOwnItems);
+	return /* @__PURE__ */ jsx(ClicksContext.Provider, {
+		value: {
+			every,
+			depth,
+			level: 0,
+			effect
+		},
+		children: listLike ? children : items.map((child, i) => isValidElement(child) ? /* @__PURE__ */ jsx(Click, {
+			at: i % every === 0 ? void 0 : "+0",
+			effect,
+			children: child
+		}, i) : child)
+	});
+}
+/** The `li` mapping: a plain list item, or a click step when inside `<Clicks>`. */
+function Li({ children, ...rest }) {
+	const scope = useContext(ClicksContext);
+	if (!scope || scope.level >= scope.depth) return /* @__PURE__ */ jsx("li", {
+		...rest,
+		children
+	});
+	return /* @__PURE__ */ jsx(ClicksContext.Provider, {
+		value: {
+			...scope,
+			level: scope.level + 1
+		},
+		children: /* @__PURE__ */ jsx(ClickLi, {
+			scope,
+			...rest,
+			children
+		})
+	});
+}
+let liCounter = 0;
+function ClickLi({ scope, children, ...rest }) {
+	const at = liCounter++ % scope.every === 0 ? void 0 : "+0";
+	const { shown, current, range, click } = useClick({ at });
+	return /* @__PURE__ */ jsx("li", {
+		...rest,
+		className: [
+			"deck-click",
+			`effect-${scope.effect}`,
+			shown ? "is-shown" : "is-hidden",
+			current ? "is-current" : "",
+			click > range.start ? "is-past" : ""
+		].filter(Boolean).join(" "),
+		"data-click-at": range.start,
+		children
+	});
+}
+/** Lists keep their markup. `<Clicks>` recognises these two by identity, so it leaves them to
+* step their own items; the class is for the stylesheet. */
+function Ul(props) {
+	return /* @__PURE__ */ jsx("ul", {
+		...props,
+		className: ["deck-list", props.className].filter(Boolean).join(" ")
+	});
+}
+function Ol(props) {
+	return /* @__PURE__ */ jsx("ol", {
+		...props,
+		className: ["deck-list", props.className].filter(Boolean).join(" ")
+	});
+}
+//#endregion
+export { After, Click, Clicks, Fragment$1 as Fragment, Li, Ol, Ul, stepsItsOwnItems };

package/dist/components/Code.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from "react";
+//#region src/components/Code.d.ts
+/**
+ * The `pre` mapping: a code block highlighted at build time, with the fence meta carried in data
+ * attributes. `{2-3|5|all}` reserves one click per step after the first and lights the lines of
+ * the current step; `{lines:true}` numbers lines; `[title]` adds a title bar; `{maxHeight}` scrolls;
+ * `{hide|…}` keeps the block hidden until its first click.
+ */
+export interface CodeProps {
+  children?: ReactNode;
+  className?: string;
+  "data-steps"?: string;
+  "data-lines"?: string;
+  "data-start"?: string;
+  "data-title"?: string;
+  "data-max-height"?: string;
+  "data-hide-until-step"?: string;
+  "data-lang"?: string;
+  "data-total"?: string;
+  [key: string]: unknown;
+}
+export declare function Code(props: CodeProps): import("react").JSX.Element;
+/** Shiki Magic Move: the precomputed steps from the plugin, morphing on each click. */
+export declare function MagicMove({ block }: {
+  block: number;
+}): import("react").JSX.Element;
+//#endregion

package/dist/components/Code.js

@@ -0,0 +1,124 @@
+import { useSlide } from "../react/context.js";
+import { useClick, useUi } from "../react/hooks.js";
+import { deserialiseSteps } from "../compiler/code-meta.js";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ShikiMagicMovePrecompiled } from "shiki-magic-move/react";
+//#region src/components/Code.tsx
+function Code(props) {
+	const { children, className, "data-steps": stepsAttr, "data-lines": linesAttr, "data-start": startAttr, "data-title": title, "data-max-height": maxHeight, "data-hide-until-step": hideUntil, "data-lang": lang, "data-total": total, ...rest } = props;
+	const steps = useMemo(() => stepsAttr ? deserialiseSteps(stepsAttr) : null, [stepsAttr]);
+	const clickCount = (steps ? steps.length - 1 : 0) + (hideUntil ? 1 : 0);
+	const { range, click } = useClick(clickCount > 0 ? { span: clickCount } : { at: 0 });
+	const pre = useRef(null);
+	const [copied, setCopied] = useState(false);
+	const rel = clickCount > 0 ? Math.min(clickCount, Math.max(0, click - range.start + 1)) : 0;
+	const hidden = !!hideUntil && rel < 1;
+	const stepIndex = steps ? Math.min(steps.length - 1, Math.max(0, hideUntil ? rel - 1 : rel)) : -1;
+	const active = steps && stepIndex >= 0 ? steps[stepIndex] : null;
+	useEffect(() => {
+		const el = pre.current;
+		if (!el) return;
+		for (const line of el.querySelectorAll(".line")) {
+			const n = Number(line.dataset.line);
+			const on = active === null ? true : active.has(n);
+			line.classList.toggle("is-active", !!steps && on && active !== null);
+			line.classList.toggle("is-dim", !!steps && active !== null && !on);
+		}
+	}, [
+		active,
+		steps,
+		children
+	]);
+	const copy = async () => {
+		try {
+			await navigator.clipboard.writeText(pre.current?.innerText ?? "");
+			setCopied(true);
+			setTimeout(() => setCopied(false), 1200);
+		} catch {}
+	};
+	const start = Number(startAttr ?? 1);
+	return /* @__PURE__ */ jsxs("div", {
+		className: [
+			"deck-code-block",
+			hidden ? "is-hidden" : "",
+			title ? "has-title" : ""
+		].filter(Boolean).join(" "),
+		"data-lang": lang ?? "text",
+		children: [
+			title ? /* @__PURE__ */ jsxs("div", {
+				className: "deck-code-title",
+				children: [/* @__PURE__ */ jsx("span", { className: "deck-code-title-dot" }), /* @__PURE__ */ jsx("span", { children: title })]
+			}) : null,
+			/* @__PURE__ */ jsx("pre", {
+				ref: pre,
+				...rest,
+				className: [
+					"deck-code",
+					"shiki",
+					linesAttr === "true" ? "has-lines" : "",
+					className
+				].filter(Boolean).join(" "),
+				style: {
+					...maxHeight ? {
+						maxHeight,
+						overflow: "auto"
+					} : null,
+					counterReset: `line ${start - 1}`
+				},
+				"data-total": total || void 0,
+				children
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "deck-code-copy",
+				onClick: copy,
+				"aria-label": "Copy code",
+				children: copied ? "Copied" : "Copy"
+			})
+		]
+	});
+}
+/** Shiki Magic Move: the precomputed steps from the plugin, morphing on each click. */
+function MagicMove({ block }) {
+	const slide = useSlide();
+	const scheme = useUi((s) => s.colorScheme);
+	const data = slide.magic?.[block] ?? null;
+	const count = data ? Math.max(0, data.steps.length - 1) : 0;
+	const atOption = data?.options.at;
+	const { range, click } = useClick(count > 0 ? {
+		span: count,
+		at: atOption !== void 0 ? Number(atOption) : void 0
+	} : { at: 0 });
+	if (!data) return /* @__PURE__ */ jsx("pre", {
+		className: "deck-code",
+		children: "Magic move block missing"
+	});
+	const step = count > 0 ? Math.min(count, Math.max(0, click - range.start + 1)) : 0;
+	const steps = data.steps.map((s) => scheme === "dark" ? s.tokens.dark : s.tokens.light);
+	const duration = data.options.duration ? Number(data.options.duration) : void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: [
+			"deck-code-block",
+			"is-magic",
+			data.title ? "has-title" : ""
+		].filter(Boolean).join(" "),
+		children: [data.title ? /* @__PURE__ */ jsxs("div", {
+			className: "deck-code-title",
+			children: [/* @__PURE__ */ jsx("span", { className: "deck-code-title-dot" }), /* @__PURE__ */ jsx("span", { children: data.title })]
+		}) : null, /* @__PURE__ */ jsx("div", {
+			className: "deck-code shiki-magic-move-wrap",
+			children: /* @__PURE__ */ jsx(ShikiMagicMovePrecompiled, {
+				steps,
+				step,
+				animate: slide.active,
+				options: {
+					duration,
+					lineNumbers: data.steps[step]?.lines
+				}
+			})
+		})]
+	});
+}
+//#endregion
+export { Code, MagicMove };

package/dist/components/Motion.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from "react";
+import { TargetAndTransition } from "motion/react";
+//#region src/components/Motion.d.ts
+/**
+ * Slidev's `v-motion`, in React: `initial` before the slide (or click) arrives, `enter` when it
+ * does, `leave` when it goes, plus `click-N` variants that apply from click N on. Backed by the
+ * motion library, so any animatable property works.
+ */
+export interface MotionProps {
+  initial?: TargetAndTransition;
+  enter?: TargetAndTransition;
+  leave?: TargetAndTransition;
+  /** Apply from a click on: `{ "click-1": { x: 40 }, "click-2": { y: 60 } }`. */
+  clicks?: Record<string, TargetAndTransition>;
+  /** Tie the whole thing to a click step (like `v-click` + `v-motion`). */
+  at?: number | string;
+  transition?: TargetAndTransition["transition"];
+  className?: string;
+  style?: React.CSSProperties;
+  children?: ReactNode;
+  as?: "div" | "span" | "p" | "li" | "h1" | "h2" | "h3" | "img";
+  [key: string]: unknown;
+}
+export declare function Motion({ initial, enter, leave, clicks, at, transition, className, style, children, as, ...rest }: MotionProps): import("react").JSX.Element;
+//#endregion

package/dist/components/Motion.js

@@ -0,0 +1,45 @@
+import { useSlide } from "../react/context.js";
+import { useClick } from "../react/hooks.js";
+import { jsx } from "react/jsx-runtime";
+import { motion } from "motion/react";
+//#region src/components/Motion.tsx
+function Motion({ initial = {
+	opacity: 0,
+	y: 24
+}, enter = {
+	opacity: 1,
+	y: 0
+}, leave, clicks = {}, at, transition, className, style, children, as = "div", ...rest }) {
+	const slide = useSlide();
+	const step = useClick(at !== void 0 ? { at } : { at: "+0" });
+	const gated = at !== void 0;
+	const on = slide.active && (!gated || step.shown);
+	let target = on ? { ...enter } : { ...initial };
+	if (on) for (const [key, value] of Object.entries(clicks)) {
+		const m = /^click-(\d+)(?:-(\d+))?$/.exec(key);
+		if (!m) continue;
+		const from = Number(m[1]);
+		const to = m[2] ? Number(m[2]) : Number.POSITIVE_INFINITY;
+		if (slide.click >= from && slide.click < to) target = {
+			...target,
+			...value
+		};
+	}
+	const Tag = motion[as] ?? motion.div;
+	return /* @__PURE__ */ jsx(Tag, {
+		className: ["deck-motion", className].filter(Boolean).join(" "),
+		style,
+		initial,
+		animate: target,
+		exit: leave,
+		transition: transition ?? {
+			type: "spring",
+			stiffness: 260,
+			damping: 26
+		},
+		...rest,
+		children
+	});
+}
+//#endregion
+export { Motion };