npm - @moonarc/core - Versions diffs - 0.1.0 - Mend

@moonarc/core 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (232) hide show

package/LICENSE +21 -0
package/README.md +39 -0
package/package.json +228 -0
package/src/components/Accordion.astro +110 -0
package/src/components/Accordion.meta.ts +33 -0
package/src/components/AnimatedBeam.astro +217 -0
package/src/components/AnimatedBeam.meta.ts +39 -0
package/src/components/AnimatedIcons.astro +193 -0
package/src/components/AnimatedIcons.meta.ts +34 -0
package/src/components/AnimatedList.astro +305 -0
package/src/components/AnimatedList.meta.ts +36 -0
package/src/components/AnimatedSelect.astro +227 -0
package/src/components/AnimatedSelect.meta.ts +38 -0
package/src/components/ArrowButton.astro +133 -0
package/src/components/ArrowButton.meta.ts +32 -0
package/src/components/Aurora.astro +188 -0
package/src/components/Aurora.meta.ts +36 -0
package/src/components/AvatarStack.astro +205 -0
package/src/components/AvatarStack.meta.ts +37 -0
package/src/components/BarGrow.astro +123 -0
package/src/components/BarGrow.meta.ts +42 -0
package/src/components/BorderBeam.astro +75 -0
package/src/components/BorderBeam.meta.ts +33 -0
package/src/components/BrowserFrame.astro +172 -0
package/src/components/BrowserFrame.meta.ts +36 -0
package/src/components/BubbleText.astro +90 -0
package/src/components/BubbleText.meta.ts +38 -0
package/src/components/CardStack.astro +79 -0
package/src/components/CardStack.meta.ts +33 -0
package/src/components/Carousel.astro +147 -0
package/src/components/Carousel.meta.ts +35 -0
package/src/components/CheckDraw.astro +159 -0
package/src/components/CheckDraw.meta.ts +37 -0
package/src/components/CircularText.astro +103 -0
package/src/components/CircularText.meta.ts +38 -0
package/src/components/CodeTabs.astro +213 -0
package/src/components/CodeTabs.meta.ts +36 -0
package/src/components/CommandPalette.astro +363 -0
package/src/components/CommandPalette.meta.ts +40 -0
package/src/components/Confetti.astro +143 -0
package/src/components/Confetti.meta.ts +40 -0
package/src/components/CopyButton.astro +189 -0
package/src/components/CopyButton.meta.ts +41 -0
package/src/components/CountUp.astro +134 -0
package/src/components/CountUp.meta.ts +40 -0
package/src/components/CountdownFlip.astro +244 -0
package/src/components/CountdownFlip.meta.ts +39 -0
package/src/components/CounterPreloader.astro +122 -0
package/src/components/CounterPreloader.meta.ts +34 -0
package/src/components/Cursor.astro +177 -0
package/src/components/Cursor.meta.ts +37 -0
package/src/components/CursorGrid.astro +113 -0
package/src/components/CursorGrid.meta.ts +37 -0
package/src/components/Curtain.astro +305 -0
package/src/components/Curtain.meta.ts +38 -0
package/src/components/Dialog.astro +156 -0
package/src/components/Dialog.meta.ts +37 -0
package/src/components/Dock.astro +193 -0
package/src/components/Dock.meta.ts +35 -0
package/src/components/DotPattern.astro +58 -0
package/src/components/DotPattern.meta.ts +32 -0
package/src/components/DottedMap.astro +153 -0
package/src/components/DottedMap.meta.ts +38 -0
package/src/components/Drawer.astro +196 -0
package/src/components/Drawer.meta.ts +35 -0
package/src/components/DynamicIsland.astro +122 -0
package/src/components/DynamicIsland.meta.ts +35 -0
package/src/components/FileTree.astro +207 -0
package/src/components/FileTree.meta.ts +34 -0
package/src/components/FilterGrid.astro +170 -0
package/src/components/FilterGrid.meta.ts +38 -0
package/src/components/FooterReveal.astro +54 -0
package/src/components/FooterReveal.meta.ts +31 -0
package/src/components/GlitchText.astro +145 -0
package/src/components/GlitchText.meta.ts +39 -0
package/src/components/Globe.astro +304 -0
package/src/components/Globe.meta.ts +41 -0
package/src/components/GlyphField.astro +363 -0
package/src/components/GlyphField.meta.ts +53 -0
package/src/components/GradientText.astro +63 -0
package/src/components/GradientText.meta.ts +35 -0
package/src/components/GridPattern.astro +55 -0
package/src/components/GridPattern.meta.ts +32 -0
package/src/components/HighlightMarker.astro +68 -0
package/src/components/HighlightMarker.meta.ts +37 -0
package/src/components/HorizontalScroll.astro +112 -0
package/src/components/HorizontalScroll.meta.ts +34 -0
package/src/components/HoverImageLinks.astro +219 -0
package/src/components/HoverImageLinks.meta.ts +34 -0
package/src/components/HoverVideo.astro +179 -0
package/src/components/HoverVideo.meta.ts +37 -0
package/src/components/ImageCompare.astro +212 -0
package/src/components/ImageCompare.meta.ts +39 -0
package/src/components/ImageTrail.astro +169 -0
package/src/components/ImageTrail.meta.ts +36 -0
package/src/components/Lightbox.astro +236 -0
package/src/components/Lightbox.meta.ts +40 -0
package/src/components/LinkPreview.astro +234 -0
package/src/components/LinkPreview.meta.ts +39 -0
package/src/components/LiquidGlass.astro +148 -0
package/src/components/LiquidGlass.meta.ts +37 -0
package/src/components/Magnetic.astro +92 -0
package/src/components/Magnetic.meta.ts +31 -0
package/src/components/Marquee.astro +165 -0
package/src/components/Marquee.meta.ts +38 -0
package/src/components/Meteors.astro +156 -0
package/src/components/Meteors.meta.ts +36 -0
package/src/components/Noise.astro +61 -0
package/src/components/Noise.meta.ts +33 -0
package/src/components/NumberFlow.astro +143 -0
package/src/components/NumberFlow.meta.ts +42 -0
package/src/components/Orb.astro +130 -0
package/src/components/Orb.meta.ts +39 -0
package/src/components/OrbitingCircles.astro +119 -0
package/src/components/OrbitingCircles.meta.ts +36 -0
package/src/components/OtpInput.astro +215 -0
package/src/components/OtpInput.meta.ts +42 -0
package/src/components/PageTransition.astro +121 -0
package/src/components/PageTransition.meta.ts +33 -0
package/src/components/Parallax.astro +69 -0
package/src/components/Parallax.meta.ts +32 -0
package/src/components/Particles.astro +210 -0
package/src/components/Particles.meta.ts +37 -0
package/src/components/PersistPlayer.astro +126 -0
package/src/components/PersistPlayer.meta.ts +35 -0
package/src/components/PhoneFrame.astro +161 -0
package/src/components/PhoneFrame.meta.ts +35 -0
package/src/components/PillNav.astro +170 -0
package/src/components/PillNav.meta.ts +37 -0
package/src/components/Popover.astro +95 -0
package/src/components/Popover.meta.ts +34 -0
package/src/components/PriceSwitch.astro +251 -0
package/src/components/PriceSwitch.meta.ts +41 -0
package/src/components/Probe.astro +84 -0
package/src/components/Progress.astro +165 -0
package/src/components/Progress.meta.ts +40 -0
package/src/components/ProgressiveBlur.astro +95 -0
package/src/components/ProgressiveBlur.meta.ts +36 -0
package/src/components/PromptInput.astro +273 -0
package/src/components/PromptInput.meta.ts +46 -0
package/src/components/ReadingToc.astro +153 -0
package/src/components/ReadingToc.meta.ts +34 -0
package/src/components/RetroGrid.astro +84 -0
package/src/components/RetroGrid.meta.ts +36 -0
package/src/components/Reveal.astro +292 -0
package/src/components/Reveal.meta.ts +48 -0
package/src/components/Ripple.astro +94 -0
package/src/components/Ripple.meta.ts +34 -0
package/src/components/RotatingText.astro +170 -0
package/src/components/RotatingText.meta.ts +35 -0
package/src/components/ScrollExpand.astro +90 -0
package/src/components/ScrollExpand.meta.ts +35 -0
package/src/components/ScrollProgress.astro +73 -0
package/src/components/ScrollProgress.meta.ts +32 -0
package/src/components/ScrollScrub.astro +96 -0
package/src/components/ScrollScrub.meta.ts +37 -0
package/src/components/ShimmerButton.astro +109 -0
package/src/components/ShimmerButton.meta.ts +37 -0
package/src/components/ShinyText.astro +72 -0
package/src/components/ShinyText.meta.ts +35 -0
package/src/components/Skeleton.astro +76 -0
package/src/components/Skeleton.meta.ts +32 -0
package/src/components/Sparkline.astro +168 -0
package/src/components/Sparkline.meta.ts +43 -0
package/src/components/Spinner.astro +79 -0
package/src/components/Spinner.meta.ts +33 -0
package/src/components/SplitFlap.astro +157 -0
package/src/components/SplitFlap.meta.ts +39 -0
package/src/components/SplitText.astro +208 -0
package/src/components/SplitText.meta.ts +50 -0
package/src/components/Spotlight.astro +92 -0
package/src/components/Spotlight.meta.ts +34 -0
package/src/components/StaggerMenu.astro +301 -0
package/src/components/StaggerMenu.meta.ts +39 -0
package/src/components/StatefulButton.astro +148 -0
package/src/components/StatefulButton.meta.ts +35 -0
package/src/components/StickyBanner.astro +168 -0
package/src/components/StickyBanner.meta.ts +45 -0
package/src/components/StickyReveal.astro +256 -0
package/src/components/StickyReveal.meta.ts +33 -0
package/src/components/StrokeDraw.astro +110 -0
package/src/components/StrokeDraw.meta.ts +43 -0
package/src/components/Switch.astro +165 -0
package/src/components/Switch.meta.ts +37 -0
package/src/components/Tabs.astro +194 -0
package/src/components/Tabs.meta.ts +47 -0
package/src/components/TextRoll.astro +78 -0
package/src/components/TextRoll.meta.ts +36 -0
package/src/components/TextScramble.astro +107 -0
package/src/components/TextScramble.meta.ts +35 -0
package/src/components/ThemeScript.astro +17 -0
package/src/components/ThemeToggle.astro +182 -0
package/src/components/ThemeToggle.meta.ts +34 -0
package/src/components/Tilt.astro +97 -0
package/src/components/Tilt.meta.ts +34 -0
package/src/components/Toast.astro +184 -0
package/src/components/Toast.meta.ts +33 -0
package/src/components/TracingBeam.astro +113 -0
package/src/components/TracingBeam.meta.ts +34 -0
package/src/components/Typewriter.astro +124 -0
package/src/components/Typewriter.meta.ts +39 -0
package/src/components/UnderlineHover.astro +61 -0
package/src/components/UnderlineHover.meta.ts +34 -0
package/src/components/VanishInput.astro +240 -0
package/src/components/VanishInput.meta.ts +41 -0
package/src/components/VideoDialog.astro +230 -0
package/src/components/VideoDialog.meta.ts +40 -0
package/src/components/WeightWave.astro +70 -0
package/src/components/WeightWave.meta.ts +36 -0
package/src/components/internal/DialogMorph.astro +97 -0
package/src/components/internal/PromptInputSubmitOnEnter.astro +32 -0
package/src/index.d.ts +43 -0
package/src/index.js +60 -0
package/src/lib/canvas.ts +124 -0
package/src/lib/confetti.ts +127 -0
package/src/lib/contrast.ts +116 -0
package/src/lib/form.ts +231 -0
package/src/lib/geo.ts +77 -0
package/src/lib/gsap.ts +58 -0
package/src/lib/land.ts +11 -0
package/src/lib/lenis.ts +112 -0
package/src/lib/meta.ts +79 -0
package/src/lib/morph.ts +74 -0
package/src/lib/reduced-motion-plugin.js +299 -0
package/src/lib/runtime.ts +215 -0
package/src/lib/support.ts +102 -0
package/src/lib/theme.ts +18 -0
package/src/lib/toast.ts +17 -0
package/src/styles/base.css +218 -0
package/src/styles/motion.css +43 -0
package/src/styles/theme.css +397 -0
package/src/styles/theme.tailwind.css +75 -0

package/src/lib/morph.ts ADDED Viewed

@@ -0,0 +1,74 @@
+/**
+ * @moonarc/core/morph — same-document view transitions, once.
+ *
+ *   vt(update, kind)         document.startViewTransition around `update`,
+ *                            with <html data-ma-vt="kind"> for the duration so
+ *                            base.css can give the root snapshots a plain
+ *                            cross-fade on the tokens (and Curtain's iris never
+ *                            answers a morph). No view transitions, or reduced
+ *                            motion → `update()` runs at once. Resolves when
+ *                            the transition has finished, or right away.
+ *   morphOpen(dialog, from)  showModal() inside a view transition where `from`
+ *                            (the trigger, a thumbnail) carries the name
+ *                            `ma-morph` in the old state and the dialog carries
+ *                            it in the new one — the browser draws the box
+ *                            growing from one to the other
+ *   morphClose(dialog)       the reverse, back to the last target
+ *   target(dialog, el)       change where the dialog returns to (a lightbox
+ *                            that moved to another image)
+ *
+ * The name is set and removed around each transition, so nothing on the page
+ * carries a view-transition-name between them and a ClientRouter swap sees
+ * nothing of it. Zero dependencies.
+ */
+type VTDoc = Document & { startViewTransition?: (cb: () => void) => { finished: Promise<void> } };
+const NAME = 'ma-morph';
+const back = new WeakMap<Element, Element>();
+/** Reduced motion: the OS setting, or the page's own switch (html[data-ma-motion='reduce'], the runtime's contract and the value the CSS mirror matches). */
+const still = () => matchMedia('(prefers-reduced-motion: reduce)').matches || document.documentElement.dataset['maMotion'] == 'reduce';
+export function vt(update: () => void, kind = 'morph'): Promise<void> {
+  const doc = document as VTDoc;
+  const html = document.documentElement;
+  if (!doc.startViewTransition || still() || html.hasAttribute('data-ma-vt')) {
+    update();
+    return Promise.resolve();
+  }
+  html.setAttribute('data-ma-vt', kind);
+  return doc.startViewTransition(update).finished.catch(() => {}).finally(() => html.removeAttribute('data-ma-vt'));
+}
+const name = (el: Element | undefined | null, on: boolean) => el && ((el as HTMLElement).style.viewTransitionName = on ? NAME : '');
+export function target(dialog: Element, el: Element): void {
+  back.set(dialog, el);
+}
+export function morphOpen(dialog: HTMLDialogElement, from: Element): Promise<void> {
+  if (dialog.open) return Promise.resolve();
+  back.set(dialog, from);
+  name(from, true);
+  return vt(() => {
+    name(from, false);
+    name(dialog, true);
+    dialog.showModal();
+  }).then(() => {
+    name(dialog, false);
+  });
+}
+export function morphClose(dialog: HTMLDialogElement): Promise<void> {
+  if (!dialog.open) return Promise.resolve();
+  const to = back.get(dialog);
+  name(dialog, true);
+  return vt(() => {
+    name(dialog, false);
+    name(to, true);
+    dialog.close();
+  }).then(() => {
+    name(to, false);
+  });
+}

package/src/lib/reduced-motion-plugin.js ADDED Viewed

@@ -0,0 +1,299 @@
+/**
+ * Vite plugin — mirror every `@media (prefers-reduced-motion: reduce)` block
+ * into the same rules scoped under `[data-ma-motion='reduce']`, so a page can
+ * offer a reduced-motion switch that previews exactly what the media query
+ * does, without duplicating a line in any component. Runs on the compiled
+ * CSS of every stylesheet and <style> block (Tailwind's `motion-reduce:`
+ * utilities included); costs a few percent of CSS and no JavaScript.
+ *
+ * What counts as a reduced-motion block: a media query list with at least one
+ * query that requires `(prefers-reduced-motion: reduce)` or the boolean
+ * `(prefers-reduced-motion)`, alone or joined by `and` (`(hover: none),
+ * (prefers-reduced-motion: reduce)` or `screen and (prefers-reduced-motion)`).
+ * The mirror keeps what the rest of such a query asks for: `@media (hover:
+ * none) { … }` for the second example's sibling, nothing for a query that was
+ * the feature alone. A negated query is not mirrored, and neither is a
+ * `(prefers-reduced-motion: no-preference)` block: the switch cannot turn off
+ * what that block turns on without a selector of its own.
+ *
+ * The attribute goes inside `:where()`, so a mirrored rule has the same
+ * specificity as the rule it copies and the cascade picks between them as the
+ * media query would. A copied selector reaches what is inside the root
+ * (`:where([…]) .a`), or the root itself when it starts with `html`, `:root`
+ * or `::view-transition`; one that matches <html> another way (`*`, a class
+ * set on <html>) misses <html> under the switch. `@keyframes` inside a block
+ * are copied under a prefixed name, and the mirrored rules point at the copy:
+ * copied as they are, they would redefine the name for every visitor, switch
+ * or not. The one thing the switch cannot preview is a rule outside the block
+ * that uses a name the block redefines; it keeps the original keyframes under
+ * the switch.
+ *
+ * Enabled by `moonarc({ motionAttribute: true })`. The runtime's
+ * prefersReducedMotion() reads the same attribute, so scripts follow too.
+ *
+ * Plain JS on purpose: imported by the integration while Astro loads the
+ * config, before any transform exists.
+ */
+const ATTR = "[data-ma-motion='reduce']";
+const WHERE = `:where(${ATTR})`;
+const KEYFRAMES = 'ma-rm-';
+/** The feature itself, as one parenthesised term of a query. */
+const FEATURE = /^\(\s*prefers-reduced-motion\s*(?::\s*reduce\s*)?\)$/i;
+/** Group rules whose rules are mirrored one by one; `@scope` gets the attribute on its root, and any other at-rule in a block is left to the media query. */
+const GROUP = /^@(media|supports|container|layer|starting-style)\b/i;
+/** The file types Vite hands to plugins as compiled CSS, and Astro's and Vue's style blocks. */
+const STYLE = /\.(?:css|less|sass|scss|styl|stylus|pcss|postcss|sss)(?:\?|$)|lang\.(?:css|less|sass|scss|styl|stylus|pcss|postcss|sss)\b|type=style/;
+/** Index just past the comment, string or escape that starts at `i`, or `i` itself. */
+function skip(css, i) {
+  const c = css[i];
+  // an escaped character is part of a name, never a quote or a brace: Tailwind writes `content-['']` as `.content-\[\'\'\]`
+  if (c === '\\') return i + 2;
+  if (c === '/' && css[i + 1] === '*') {
+    const end = css.indexOf('*/', i + 2);
+    return end < 0 ? css.length : end + 2;
+  }
+  if (c === '"' || c === "'") {
+    for (let j = i + 1; j < css.length; j++) {
+      if (css[j] === '\\') j++;
+      else if (css[j] === c || css[j] === '\n') return j + 1;
+    }
+    return css.length;
+  }
+  return i;
+}
+/** Index of the `}` that closes the block opened at `open`, or -1. Strings and comments are skipped. */
+function blockEnd(css, open) {
+  let depth = 0;
+  for (let i = open; i < css.length; i++) {
+    const next = skip(css, i);
+    if (next !== i) {
+      i = next - 1;
+      continue;
+    }
+    const c = css[i];
+    if (c === '{') depth++;
+    else if (c === '}' && --depth === 0) return i;
+  }
+  return -1;
+}
+const uncomment = (s) => s.replace(/\/\*[\s\S]*?\*\//g, ' ').trim();
+/** Split on `sep` outside parentheses, brackets, strings and comments. */
+function splitTop(list, sep = ',') {
+  const out = [];
+  let depth = 0;
+  let from = 0;
+  for (let i = 0; i < list.length; i++) {
+    const next = skip(list, i);
+    if (next !== i) {
+      i = next - 1;
+      continue;
+    }
+    const c = list[i];
+    if (c === '(' || c === '[') depth++;
+    else if (c === ')' || c === ']') depth--;
+    else if (c === sep && depth === 0) {
+      out.push(list.slice(from, i));
+      from = i + 1;
+    }
+  }
+  out.push(list.slice(from));
+  return out;
+}
+/** A media query as its top-level terms: `screen and (a: b)` → ['screen', 'and', '(a: b)']. */
+const terms = (query) => splitTop(query.replace(/\s+/g, ' ').trim(), ' ').filter(Boolean);
+/**
+ * For a `@media` prelude, the conditions the mirror keeps: one per query that
+ * requires reduced motion, '' where that query asked for nothing else. Null
+ * when no query does.
+ */
+function conditions(prelude) {
+  const out = [];
+  const and = (w) => /^and$/i.test(w ?? '');
+  for (const query of splitTop(prelude.replace(/^@media/i, ''))) {
+    const t = terms(query);
+    if (t.some((w) => /^not$/i.test(w))) continue;
+    // `a or b` (level 4) is two queries; in `a and b` every term but the feature stays
+    const sides = [[]];
+    for (const w of t) {
+      if (/^or$/i.test(w)) sides.push([]);
+      else sides[sides.length - 1].push(w);
+    }
+    for (const side of sides) {
+      const k = side.findIndex((w) => FEATURE.test(w));
+      if (k < 0) continue;
+      if (and(side[k - 1])) side.splice(k - 1, 2);
+      else side.splice(k, and(side[k + 1]) ? 2 : 1);
+      out.push(side.join(' ').replace(/^(only )?all$/i, ''));
+    }
+  }
+  return out.length ? out : null;
+}
+function prefix(selector) {
+  const s = selector.trim();
+  if (!s) return s;
+  if (/^(html|:root)(?![\w-])/i.test(s)) return s.replace(/^(html|:root)/i, `$1${WHERE}`);
+  // `:where(:root…)::view-transition-*(…)` — a component's zero-specificity root rule (Curtain); the attribute goes on the root inside the :where()
+  if (/^:where\((html|:root)(?![\w-])/i.test(s)) return s.replace(/^:where\((html|:root)/i, `:where($1${ATTR}`);
+  // a pseudo-element of the root itself (Astro's `::view-transition-group(*)`): on the root, not on an ancestor it does not have
+  if (s.startsWith('::view-transition')) return WHERE + s;
+  return `${WHERE} ${s}`;
+}
+/**
+ * `@scope (a, b) to (c)` with the attribute on each start selector: a scoped rule is relative to its root (`img` is
+ * `:scope img`), so the root is what has to sit under the switch. Null for a bare `@scope`, whose root is a <style>'s parent.
+ */
+function scoped(prelude) {
+  const open = /^@scope\s*\(/i.exec(prelude);
+  if (!open) return null;
+  let depth = 0;
+  for (let i = open[0].length - 1; i < prelude.length; i++) {
+    const next = skip(prelude, i);
+    if (next !== i) {
+      i = next - 1;
+      continue;
+    }
+    if (prelude[i] === '(') depth++;
+    else if (prelude[i] === ')' && --depth === 0) return `@scope (${splitTop(prelude.slice(open[0].length, i)).map(prefix).join(',')})${prelude.slice(i + 1)}`;
+  }
+  return null;
+}
+/** Point `animation` and `animation-name` in a declaration block at the renamed keyframes. */
+function renameIn(decls, names) {
+  if (!names.size) return decls;
+  return decls.replace(/(animation(?:-name)?\s*:)([^;{}]*)/gi, (_, prop, value) => {
+    for (const n of names) value = value.replace(new RegExp(`(^|[\\s,])${n.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}(?=[\\s,!;]|$)`, 'g'), `$1${KEYFRAMES}${n}`);
+    return prop + value;
+  });
+}
+/** The @keyframes names a block defines, at any depth. */
+function keyframesIn(css) {
+  const names = new Set();
+  for (const m of uncomment(css).matchAll(/@(?:-webkit-)?keyframes\s+([^\s{]+)\s*\{/gi)) names.add(m[1].replace(/^(['"])(.*)\1$/, '$2'));
+  return names;
+}
+/** The rules of a media block, selectors prefixed, nested group rules kept, keyframes renamed. */
+function mirror(body, names) {
+  let out = '';
+  let i = 0;
+  while (i < body.length) {
+    // the next `{` or `;` outside strings and comments: a rule or a statement
+    let j = i;
+    while (j < body.length) {
+      const next = skip(body, j);
+      if (next !== j) j = next;
+      else if (body[j] === '{' || body[j] === ';') break;
+      else j++;
+    }
+    if (j >= body.length) break;
+    if (body[j] === ';') {
+      i = j + 1; // a statement (`@import`, `@layer a, b;`) is the media query's alone
+      continue;
+    }
+    const prelude = uncomment(body.slice(i, j));
+    const close = blockEnd(body, j);
+    if (close < 0) break;
+    const inner = body.slice(j + 1, close);
+    if (/^@(-webkit-)?keyframes\b/i.test(prelude)) {
+      out += prelude.replace(/(keyframes\s+)(['"]?)/i, `$1$2${KEYFRAMES}`) + `{${inner}}`;
+    } else if (/^@scope\b/i.test(prelude)) {
+      const start = scoped(prelude);
+      if (start) out += `${start}{${renameIn(inner, names)}}`;
+    } else if (GROUP.test(prelude)) {
+      out += `${prelude}{${mirror(inner, names)}}`;
+    } else if (prelude && !prelude.startsWith('@')) {
+      out += `${splitTop(prelude).map(prefix).join(',')}{${renameIn(inner, names)}}`;
+    }
+    i = close + 1;
+  }
+  return out;
+}
+/** Rewrite one stylesheet: every reduced-motion block is followed by its attribute-scoped mirror. */
+export function mirrorReducedMotion(css) {
+  if (!/prefers-reduced-motion/i.test(css)) return css;
+  const inserts = [];
+  // one pass over the sheet: `from` is where the current prelude began, `rules` how many style rules enclose it
+  const stack = [];
+  let from = 0;
+  for (let i = 0; i < css.length; i++) {
+    const next = skip(css, i);
+    if (next !== i) {
+      i = next - 1;
+      continue;
+    }
+    const c = css[i];
+    if (c === ';') from = i + 1;
+    else if (c === '}') {
+      stack.pop();
+      from = i + 1;
+    } else if (c === '{') {
+      const prelude = uncomment(css.slice(from, i));
+      const kept = /^@media\b/i.test(prelude) ? conditions(prelude) : null;
+      if (kept) {
+        const close = blockEnd(css, i);
+        if (close < 0) break;
+        const body = css.slice(i + 1, close);
+        // nested in a style rule (CSS nesting), the block holds declarations: the mirror is `:where([…]) &` around them
+        const inRule = stack.some((p) => !p.startsWith('@'));
+        const rules = inRule ? `${WHERE} &{${body}}` : mirror(body, keyframesIn(body));
+        const wrapped = kept.includes('') ? rules : `@media ${kept.join(', ')}{${rules}}`;
+        if (rules) inserts.push([close + 1, wrapped]);
+        i = close;
+        from = close + 1;
+        continue;
+      }
+      stack.push(prelude);
+      from = i + 1;
+    } else if (c === '(') {
+      // a parenthesised run (`url(…;…)`, `:is(…)`, a media feature) holds no rule boundary
+      let depth = 0;
+      let j = i;
+      for (; j < css.length; j++) {
+        const n = skip(css, j);
+        if (n !== j) {
+          j = n - 1;
+          continue;
+        }
+        if (css[j] === '(') depth++;
+        else if (css[j] === ')' && --depth === 0) break;
+      }
+      i = j;
+    }
+  }
+  if (!inserts.length) return css;
+  let out = '';
+  let last = 0;
+  for (const [at, text] of inserts) {
+    out += css.slice(last, at) + text;
+    last = at;
+  }
+  return out + css.slice(last);
+}
+/** @returns {import('vite').Plugin} */
+export function reducedMotionMirror() {
+  return {
+    name: 'moonarc:reduced-motion-mirror',
+    transform(code, id) {
+      // `?raw` and `?url` are not stylesheets: Vite has already turned the file into a JS module exporting its text or
+      // its URL, and a raw import promises the file as written (the site's registry ships base.css to buyers that way).
+      if (/[?&](?:raw|url)\b/.test(id)) return;
+      // .scss, .less, .styl and the rest arrive here compiled: Vite's CSS plugin runs before a plugin without `enforce`
+      if (!STYLE.test(id) || !/prefers-reduced-motion/i.test(code)) return;
+      const out = mirrorReducedMotion(code);
+      return out === code ? undefined : { code: out, map: null };
+    },
+  };
+}

package/src/lib/runtime.ts ADDED Viewed

@@ -0,0 +1,215 @@
+/**
+ * @moonarc/core/runtime — the lifecycle substrate.
+ *
+ * Astro bundles a component's <script> once per page and never re-runs it
+ * after a <ClientRouter /> navigation; on pages without the router the
+ * `astro:*` events do not exist at all; `astro:page-load` itself could be
+ * skipped or doubled on back/forward before Astro 5.5.0
+ * (withastro/astro#12858), and is lost entirely by an interrupted navigation.
+ * This module owns that problem once, so components and consumer scripts
+ * never re-derive it:
+ *
+ *   onMount(selector, setup)  bind every matching element now and after every
+ *                             navigation — each element exactly once; cleanup
+ *                             runs on astro:before-swap
+ *   onPage(setup)             one setup per page view, same lifecycle
+ *   prefersReducedMotion()    read once, kept current
+ *   refresh()                 bind elements you injected yourself, and release
+ *                             the ones you took out of the page
+ *
+ * Register from a layout or a component, not from each page: every page
+ * script is its own module and would add its own registration.
+ *
+ * Zero dependencies.
+ */
+export type Cleanup = () => void;
+export interface MountContext {
+  /** Aborted when the binding is torn down — pass it to addEventListener. */
+  signal: AbortSignal;
+  /** prefers-reduced-motion at bind time; call prefersReducedMotion() for a live read. */
+  reducedMotion: boolean;
+}
+export type MountSetup<E extends Element> = (el: E, ctx: MountContext) => Cleanup | void;
+export type PageSetup = (ctx: MountContext) => Cleanup | void;
+interface Binding {
+  abort: AbortController;
+  cleanup?: Cleanup;
+}
+interface Mount {
+  selector: string;
+  root: ParentNode;
+  setup: MountSetup<Element>;
+  bound: Map<Element, Binding>;
+}
+interface Page {
+  setup: PageSetup;
+  active: Binding | null;
+}
+const mounts = new Set<Mount>();
+const pages = new Set<Page>();
+let reduced: boolean | null = null;
+export function prefersReducedMotion(): boolean {
+  if (reduced === null) {
+    const mq = matchMedia('(prefers-reduced-motion: reduce)');
+    reduced = mq.matches;
+    mq.addEventListener('change', (e) => {
+      reduced = e.matches;
+    });
+  }
+  // html[data-ma-motion='reduce'] is the page's own switch (see the integration's motionAttribute option); the CSS
+  // mirror matches that value only, so any other value reads as no switch here too
+  return reduced || document.documentElement.dataset['maMotion'] == 'reduce';
+}
+/**
+ * One element must not take the page down with it. Every pass over the
+ * registry is a loop over independent components, so a setup or a cleanup
+ * that throws — a missing element, a null assertion, a third-party script —
+ * is reported and the rest of the page still binds. The guard sits around
+ * each element, not each registration: a Reveal whose setup threw on its first
+ * element used to leave every later one hidden, and on the first pass the
+ * throw also escaped onMount() and stopped the module that called it. That is
+ * the failure that reads as "it works after I refresh".
+ */
+function guard(step?: () => void): void {
+  try {
+    step?.();
+  } catch (error) {
+    console.error('[moonarc]', error);
+  }
+}
+/** Run one setup under its own AbortController, recorded by `keep` first so a setup that calls refresh() is not bound twice. */
+function begin(keep: (binding: Binding) => void, setup: PageSetup): void {
+  const binding: Binding = { abort: new AbortController() };
+  keep(binding);
+  guard(() => {
+    const cleanup = setup({ signal: binding.abort.signal, reducedMotion: prefersReducedMotion() });
+    if (typeof cleanup === 'function') binding.cleanup = cleanup;
+  });
+}
+function release(binding: Binding): void {
+  binding.abort.abort();
+  guard(binding.cleanup);
+}
+function bind(m: Mount): void {
+  // an element that has left its root since the last pass (replaced by a script, a Replay clone) is released now,
+  // not at the next swap: its listeners, observers and contexts go with it. Its root, not the page: a root that is not
+  // in the document yet keeps what it holds.
+  for (const [el, binding] of m.bound) if (!(m.root as Node).contains(el)) m.bound.delete(el), release(binding);
+  for (const el of m.root.querySelectorAll(m.selector)) {
+    if (!m.bound.has(el)) begin((binding) => m.bound.set(el, binding), (ctx) => m.setup(el, ctx));
+  }
+}
+function unbind(m: Mount): void {
+  for (const binding of m.bound.values()) release(binding);
+  m.bound.clear();
+}
+function start(p: Page): void {
+  // one run per page view, however many times page-load fires
+  if (!p.active) begin((binding) => (p.active = binding), p.setup);
+}
+function stop(p: Page): void {
+  const binding = p.active;
+  if (!binding) return;
+  p.active = null;
+  release(binding);
+}
+/** Bind every registered selector and page setup. Runs automatically; call it after injecting DOM yourself, or after taking bound elements out. */
+export function refresh(): void {
+  // bind() throws only for a selector that is not one, and that registration is skipped, not the rest
+  for (const m of mounts) guard(() => bind(m));
+  for (const p of pages) start(p);
+}
+function teardown(): void {
+  for (const p of pages) stop(p);
+  for (const m of mounts) unbind(m);
+}
+/**
+ * `html[data-ma-js]` is the gate entrance effects hide behind, set before
+ * paint by the integration's head script. ClientRouter replaces <html>
+ * attributes on every swap; the head script sets it again on after-swap, and
+ * the runtime carries it across too, for a layout that still inlines the
+ * older one-line gate: recorded before the swap, restored after it and before
+ * paint.
+ */
+let hadGate = false;
+const GATE = 'data-ma-js';
+let listening = false;
+function listen(): void {
+  if (listening) return;
+  listening = true;
+  document.addEventListener('astro:page-load', refresh);
+  document.addEventListener('astro:before-swap', () => {
+    hadGate = document.documentElement.hasAttribute(GATE);
+    teardown();
+  });
+  document.addEventListener('astro:after-swap', () => {
+    if (hadGate) document.documentElement.setAttribute(GATE, '');
+    // and bind here, not only on astro:page-load. The router fires page-load
+    // from the promise that waits for the new page's scripts to load; a
+    // navigation interrupted after its swap leaves that promise unsettled and
+    // the view it swapped in never gets its page-load at all (the swap does
+    // fire, once, every time). A page bound only there sits inert until a
+    // reload. Binding is idempotent, so the pair costs one no-op pass, and the
+    // router has already awaited the new stylesheets before the swap, so
+    // anything that measures here measures a laid-out page.
+    refresh();
+  });
+}
+function ready(fn: () => void): void {
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', fn, { once: true });
+  else fn();
+}
+/**
+ * Bind `setup` to every element matching `selector` — now, and again after
+ * every ClientRouter navigation. Each element is bound once. Returns an
+ * unregister function.
+ */
+export function onMount<E extends Element = HTMLElement>(
+  selector: string,
+  setup: MountSetup<E>,
+  options: { root?: ParentNode } = {},
+): Cleanup {
+  const m: Mount = { selector, root: options.root ?? document, setup: setup as MountSetup<Element>, bound: new Map() };
+  mounts.add(m);
+  listen();
+  ready(() => bind(m));
+  return () => {
+    unbind(m);
+    mounts.delete(m);
+  };
+}
+/**
+ * Run `setup` once per page view — now, and again after every navigation —
+ * and its cleanup before the next swap. Returns an unregister function.
+ */
+export function onPage(setup: PageSetup): Cleanup {
+  const p: Page = { setup, active: null };
+  pages.add(p);
+  listen();
+  ready(() => start(p));
+  return () => {
+    stop(p);
+    pages.delete(p);
+  };
+}