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/components/internal/DialogMorph.astro ADDED Viewed

@@ -0,0 +1,97 @@
+---
+/**
+ * The script half of `<Dialog morph>`, rendered only when the prop is set,
+ * so a plain Dialog stays at 0 B (measured on its own fixture: `Dialog.morph`).
+ * It intercepts the invoker click on every trigger that points at the
+ * dialog, the close form, Escape and the backdrop click, and runs each
+ * through lib/morph so the box grows from the trigger and returns to it.
+ * The styles below shape the shared-name group; the root cross-fade is in
+ * base.css under html[data-ma-vt].
+ */
+interface Props {
+  /** The dialog's id. */
+  for: string;
+}
+const { for: id } = Astro.props;
+---
+<span class="ma-dialog-morph" data-ma-dialog-morph={id} hidden></span>
+<style is:global>
+  @layer components {
+    /* the morphing box: both snapshots fill the group without distortion, so a thumbnail becomes an image, not a smear */
+    :where(:root)[data-ma-vt='morph']::view-transition-old(ma-morph),
+    :where(:root)[data-ma-vt='morph']::view-transition-new(ma-morph) {
+      block-size: 100%;
+      inline-size: 100%;
+      object-fit: cover;
+      overflow: clip;
+      animation-duration: var(--ma-duration);
+      animation-timing-function: var(--ma-ease-out);
+    }
+    :where(:root)[data-ma-vt='morph']::view-transition-group(ma-morph) {
+      animation-duration: var(--ma-duration);
+      animation-timing-function: var(--ma-ease);
+      z-index: 2;
+    }
+    /* while the library's transition runs, the dialog's own entrance and exit step aside: the transition is the motion.
+       The attribute on <html> is what outranks the Dialog's zero-specificity rules (the same :where() here lost to them on
+       order), and it scopes the step-aside to the transition, so without one (no support, reduced motion) the dialog
+       opens and closes as usual. */
+    :where(:root)[data-ma-vt] :where(.ma-dialog[data-morph]) {
+      transition: none;
+      scale: 1;
+      translate: 0 0;
+    }
+    :where(:root)[data-ma-vt] :where(.ma-dialog[data-morph])::backdrop {
+      transition: none;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      :where(:root)[data-ma-vt='morph']::view-transition-group(ma-morph) {
+        animation-duration: var(--ma-duration-fast);
+        animation-timing-function: linear;
+      }
+    }
+  }
+</style>
+<script>
+  import { onMount } from '../../lib/runtime';
+  import { morphClose, morphOpen } from '../../lib/morph';
+  onMount<HTMLElement>('[data-ma-dialog-morph]', (mark, { signal }) => {
+    const dialog = document.getElementById(mark.dataset.maDialogMorph!) as HTMLDialogElement | null;
+    if (!dialog) return;
+    // every trigger on the page that points at this dialog: the click is ours, the invoker's default is cancelled (and the polyfill honours defaultPrevented)
+    for (const t of document.querySelectorAll<HTMLElement>(`[commandfor="${dialog.id}"][command="show-modal"]`)) {
+      t.addEventListener(
+        'click',
+        (e) => {
+          e.preventDefault();
+          morphOpen(dialog, t);
+        },
+        { signal },
+      );
+    }
+    // Escape and the backdrop (closedby) arrive as a cancelable `cancel`; the close button is a form with method="dialog"
+    dialog.addEventListener(
+      'cancel',
+      (e) => {
+        e.preventDefault();
+        morphClose(dialog);
+      },
+      { signal },
+    );
+    dialog.addEventListener(
+      'submit',
+      (e) => {
+        const f = e.target as HTMLFormElement;
+        if (f.method === 'dialog') {
+          e.preventDefault();
+          morphClose(dialog);
+        }
+      },
+      { signal },
+    );
+  });
+</script>

package/src/components/internal/PromptInputSubmitOnEnter.astro ADDED Viewed

@@ -0,0 +1,32 @@
+---
+/**
+ * The script half of `<PromptInput submitOnEnter>`, rendered only when the
+ * prop is set, so a plain PromptInput stays at 0 B (measured on its own
+ * fixture: `PromptInput.submitOnEnter`). Enter submits through
+ * form.requestSubmit(), so required and the host's submit handler still
+ * run; Shift+Enter is a newline; nothing happens while an IME is composing
+ * (isComposing, or the legacy keyCode 229), so a Japanese or Chinese
+ * reader's Enter confirms the candidate instead of sending the message.
+ */
+---
+<span class="ma-prompt-enter" data-ma-prompt-enter hidden></span>
+<script>
+  import { onMount } from '../../lib/runtime';
+  onMount<HTMLElement>('[data-ma-prompt-enter]', (mark, { signal }) => {
+    const form = mark.closest('form');
+    const area = form?.querySelector('textarea');
+    if (!form || !area) return;
+    area.addEventListener(
+      'keydown',
+      (e) => {
+        if (e.key !== 'Enter' || e.shiftKey || e.isComposing || e.keyCode === 229) return;
+        e.preventDefault();
+        if (!form.hasAttribute('data-pending')) form.requestSubmit();
+      },
+      { signal },
+    );
+  });
+</script>

package/src/index.d.ts ADDED Viewed

@@ -0,0 +1,43 @@
+import type { AstroIntegration } from 'astro';
+export interface MoonarcOptions {
+  /**
+   * Inject `@moonarc/core/styles/base.css` (theme-aware tokens) into every
+   * page. Set to `false` and import the stylesheet yourself to control order.
+   * @default true
+   */
+  injectStyles?: boolean;
+  /**
+   * Inject a tiny inline script that sets `data-ma-js` on `<html>` before paint,
+   * and again after every `<ClientRouter />` swap. Entrance effects hide content
+   * only behind that attribute, so pages without JS stay readable. Disable it
+   * and inline `gateScript` yourself if you manage head scripts.
+   * @default true
+   */
+  jsGate?: boolean;
+  /**
+   * Add `@moonarc/core` to `vite.ssr.noExternal`. Not needed on Astro 5–7;
+   * kept as an escape hatch for setups that externalise `.astro` files.
+   * @default false
+   */
+  noExternal?: boolean;
+  /**
+   * Mirror every `@media (prefers-reduced-motion: reduce)` rule — the
+   * components', Tailwind's `motion-reduce:` utilities, your own — to
+   * `html[data-ma-motion='reduce']` at build time, so a page can offer a
+   * reduced-motion switch that previews exactly what the media query does.
+   * The runtime's `prefersReducedMotion()` reads the attribute too. Costs a
+   * few percent of CSS, no JavaScript.
+   * @default false
+   */
+  motionAttribute?: boolean;
+}
+/**
+ * The text of the gate `jsGate` injects: sets `data-ma-js` on `<html>` now and
+ * on every `astro:after-swap` (the router replaces `<html>`'s attributes and
+ * does not re-run an inline script it has already run).
+ */
+export declare const gateScript: string;
+export default function moonarc(options?: MoonarcOptions): AstroIntegration;

package/src/index.js ADDED Viewed

@@ -0,0 +1,60 @@
+/**
+ * @moonarc/core — Astro integration.
+ *
+ * Plain JS on purpose: this file is evaluated while Astro loads the consumer's
+ * config, before any Vite transform exists. Types live in ./index.d.ts.
+ */
+import { reducedMotionMirror } from './lib/reduced-motion-plugin.js';
+const PKG = '@moonarc/core';
+/**
+ * The head gate `jsGate` injects: `data-ma-js` on <html> now and after every
+ * ClientRouter swap (`dataset.maJs` is that attribute). f() sets it and returns
+ * 1, which is also the capture flag: the router dispatches astro:after-swap on
+ * document without bubbling, so a window listener hears it only while
+ * capturing, and then ahead of every listener on document. Exported so a
+ * layout that sets `jsGate: false` can inline the same text.
+ */
+export const gateScript = `(f=>addEventListener('astro:after-swap',f,f()))(()=>document.documentElement.dataset.maJs=1)`;
+/**
+ * @param {import('./index.js').MoonarcOptions} [options]
+ * @returns {import('astro').AstroIntegration}
+ */
+export default function moonarc(options = {}) {
+  const { injectStyles = true, jsGate = true, noExternal = false, motionAttribute = false } = options;
+  return {
+    name: 'moonarc',
+    hooks: {
+      'astro:config:setup': ({ injectScript, updateConfig }) => {
+        // Theme + motion tokens on every page, resolved and bundled by Vite.
+        if (injectStyles) {
+          injectScript('page-ssr', `import '${PKG}/styles/base.css';`);
+        }
+        // Entrance effects (Reveal, …) hide content only under html[data-ma-js],
+        // so server HTML stays readable when JS never runs. Set before paint,
+        // and again after every ClientRouter swap: the router replaces <html>'s
+        // attributes with the next page's and never re-runs this script (same
+        // text), so a session that landed on a page without a Moonarc script,
+        // and so without the runtime's carry-over, lost the gate for good.
+        if (jsGate) {
+          injectScript('head-inline', gateScript);
+        }
+        // Phase 0 consumer checks established that Astro 5–7 compile .astro
+        // files from node_modules without this. It stays as an escape hatch
+        // for exotic setups (see docs/integration).
+        if (noExternal) {
+          updateConfig({ vite: { ssr: { noExternal: [PKG] } } });
+        }
+        // Mirror every reduced-motion rule to html[data-ma-motion='reduce'] at
+        // build, so a page can offer a switch that previews the media query.
+        if (motionAttribute) {
+          updateConfig({ vite: { plugins: [reducedMotionMirror()] } });
+        }
+      },
+    },
+  };
+}

package/src/lib/canvas.ts ADDED Viewed

@@ -0,0 +1,124 @@
+/**
+ * @moonarc/core/canvas — the shared half of every canvas component
+ * (Particles, Globe, Confetti, and yours). A canvas is the one place the
+ * library cannot let CSS do the moving, so the rules that keep a CSS
+ * component cheap are written here once:
+ *
+ *   fit(canvas, host, signal, onSize)   size from a ResizeObserver, DPR capped at 2,
+ *                                       the context pre-scaled — never the resize event
+ *   loop(frame, signal)                 a requestAnimationFrame loop with wake()/sleep():
+ *                                       it never runs in a hidden tab
+ *   visible(host, signal, cb)           IntersectionObserver → cb(true|false); pair it with
+ *                                       loop so an off-screen canvas costs nothing
+ *   onTheme(signal, cb)                 data-theme / class / data-ma-motion on <html>, the OS
+ *                                       scheme or the OS reduced-motion setting changed — re-read
+ *                                       colours, re-decide the loop
+ *                                       (ThemeScript's contract; the page's reduced-motion switch)
+ *   colors(el)                          five theme-resolved colours: the element's `color`
+ *                                       and four border colours, which a component's CSS
+ *                                       maps its tokens onto (rgb strings a 2D context takes)
+ *   num(el, name, fallback)             a unitless custom property as a number — physics
+ *                                       constants live in CSS, not in the script
+ *   ms(el, name, fallback)              a duration token in milliseconds (`450ms` or `1.39s`)
+ *
+ * Everything is released through the AbortSignal the runtime hands a mount.
+ * Zero dependencies; ~1 kB.
+ */
+export type Frame = (t: number, dt: number) => void;
+export interface Loop {
+  wake(): void;
+  sleep(): void;
+  /** Draw one frame now without starting the loop (reduced motion, theme change). */
+  once(): void;
+}
+/** Cap the device pixel ratio: 3× canvases cost nine times the paint of 1× for no visible gain in a dot field. */
+export const dpr = (): number => Math.min(2, window.devicePixelRatio || 1);
+export function fit(canvas: HTMLCanvasElement, host: Element, signal: AbortSignal, onSize: (w: number, h: number, ctx: CanvasRenderingContext2D) => void): void {
+  const ctx = canvas.getContext('2d')!;
+  const apply = () => {
+    const r = host.getBoundingClientRect();
+    const w = Math.max(1, Math.round(r.width));
+    const h = Math.max(1, Math.round(r.height));
+    const k = dpr();
+    canvas.width = w * k;
+    canvas.height = h * k;
+    ctx.setTransform(k, 0, 0, k, 0, 0);
+    onSize(w, h, ctx);
+  };
+  const ro = new ResizeObserver(apply);
+  ro.observe(host);
+  signal.addEventListener('abort', () => ro.disconnect());
+  apply();
+}
+export function loop(frame: Frame, signal: AbortSignal): Loop {
+  let raf = 0;
+  let last = 0;
+  let want = false;
+  const tick = (t: number) => {
+    raf = 0;
+    if (!want || document.hidden) return;
+    frame(t, last ? Math.min(t - last, 100) : 0);
+    last = t;
+    raf = requestAnimationFrame(tick);
+  };
+  const l: Loop = {
+    wake() {
+      want = true;
+      if (!raf && !document.hidden) {
+        last = 0;
+        raf = requestAnimationFrame(tick);
+      }
+    },
+    sleep() {
+      want = false;
+      cancelAnimationFrame(raf);
+      raf = 0;
+    },
+    once() {
+      frame(performance.now(), 0);
+    },
+  };
+  // Hiding cancels nothing: a hidden tab runs no frames, and the one still queued either fires on return or, where
+  // an engine runs it while hidden, finds document.hidden and clears raf. Cancelling it here left raf holding a dead
+  // id, and wake() on return then saw a frame pending and never asked for one: the canvas froze after a tab switch.
+  document.addEventListener('visibilitychange', () => want && l.wake(), { signal });
+  signal.addEventListener('abort', l.sleep);
+  return l;
+}
+export function visible(host: Element, signal: AbortSignal, cb: (on: boolean) => void): void {
+  const io = new IntersectionObserver(([e]) => cb(!!e?.isIntersecting));
+  io.observe(host);
+  signal.addEventListener('abort', () => io.disconnect());
+}
+export function onTheme(signal: AbortSignal, cb: () => void): void {
+  const mo = new MutationObserver(cb);
+  mo.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme', 'class', 'data-ma-motion'] });
+  matchMedia('(prefers-color-scheme: dark)').addEventListener('change', cb, { signal });
+  // reduced motion turned on or off in the OS while the page is open: a running loop stops (or starts) without a reload
+  matchMedia('(prefers-reduced-motion: reduce)').addEventListener('change', cb, { signal });
+  signal.addEventListener('abort', () => mo.disconnect());
+}
+/** `color`, then border top / right / bottom / left — resolved by the engine to rgb, so tokens, color-mix() and oklch() all arrive as something the context can paint. */
+export function colors(el: Element): [string, string, string, string, string] {
+  const s = getComputedStyle(el);
+  return [s.color, s.borderTopColor, s.borderRightColor, s.borderBottomColor, s.borderLeftColor];
+}
+export function num(el: Element, name: string, fallback: number): number {
+  const v = parseFloat(getComputedStyle(el).getPropertyValue(name));
+  return Number.isFinite(v) ? v : fallback;
+}
+export function ms(el: Element, name: string, fallback: number): number {
+  const v = getComputedStyle(el).getPropertyValue(name).trim();
+  const n = parseFloat(v);
+  return Number.isFinite(n) ? (v.endsWith('ms') ? n : n * 1000) : fallback;
+}

package/src/lib/confetti.ts ADDED Viewed

@@ -0,0 +1,127 @@
+/**
+ * confetti(options?) — a burst of paper from a point, on one fixed canvas that
+ * exists only while pieces are in the air. The `<Confetti />` component wires
+ * this to a load, a click or an `ma:confetti` event on document; call it
+ * directly from your own handler.
+ *
+ * Physics constants are custom properties on :root (the component's stylesheet
+ * declares them per preset; without it the defaults below apply):
+ *   --ma-confetti-gravity   px/frame² at 60 fps, pulls the pieces down
+ *   --ma-confetti-drag      velocity kept per frame, 0–1
+ *   --ma-confetti-velocity  launch speed in px/frame
+ *   --ma-confetti-spread    launch cone in degrees
+ *   --ma-confetti-flutter   how fast a piece rocks as it falls
+ * Bursts share the canvas; the last piece off screen removes it. Nothing fires
+ * under prefers-reduced-motion (or the page's data-ma-motion switch).
+ */
+import { loop, num, type Loop } from './canvas';
+import { prefersReducedMotion } from './runtime';
+export interface ConfettiOptions {
+  /** Pieces per burst. */
+  count?: number;
+  /**
+   * Literal colours (hex, rgb(), oklch()); the burst cycles through them. var() is not resolved by the canvas — for
+   * tokens use CSS on .ma-confetti (the component reads its computed colours), or pass getComputedStyle(el).color.
+   */
+  colors?: string[];
+  /** Launch point in viewport px; default the centre. */
+  origin?: { x: number; y: number };
+  /** Launch direction in degrees, 0 = up, 90 = right. */
+  angle?: number;
+  /** Launch cone in degrees; overrides the token. */
+  spread?: number;
+  /** Launch speed in px/frame; overrides the token. */
+  velocity?: number;
+}
+interface Piece {
+  x: number;
+  y: number;
+  vx: number;
+  vy: number;
+  w: number;
+  h: number;
+  a: number;
+  va: number;
+  f: number;
+  c: string;
+}
+let canvas: HTMLCanvasElement | null = null;
+let ctx: CanvasRenderingContext2D;
+let pieces: Piece[] = [];
+let run: Loop | null = null;
+let abort: AbortController | null = null;
+function teardown(): void {
+  abort?.abort();
+  canvas?.remove();
+  canvas = null;
+  run = null;
+  pieces = [];
+}
+function frame(): void {
+  if (!canvas) return;
+  const w = innerWidth;
+  const h = innerHeight;
+  const k = Math.min(2, devicePixelRatio || 1);
+  if (canvas.width !== w * k || canvas.height !== h * k) {
+    canvas.width = w * k;
+    canvas.height = h * k;
+  }
+  ctx.setTransform(k, 0, 0, k, 0, 0);
+  ctx.clearRect(0, 0, w, h);
+  const root = document.documentElement;
+  const g = num(root, '--ma-confetti-gravity', 0.22);
+  const drag = num(root, '--ma-confetti-drag', 0.985);
+  const fl = num(root, '--ma-confetti-flutter', 0.12);
+  pieces = pieces.filter((p) => {
+    p.vy += g;
+    p.vx *= drag;
+    p.vy *= drag;
+    p.x += p.vx;
+    p.y += p.vy;
+    p.a += p.va;
+    p.f += fl;
+    ctx.save();
+    ctx.translate(p.x, p.y);
+    ctx.rotate(p.a);
+    ctx.scale(1, Math.cos(p.f));
+    ctx.fillStyle = p.c;
+    ctx.fillRect(-p.w / 2, -p.h / 2, p.w, p.h);
+    ctx.restore();
+    return p.y < h + 40 && p.x > -40 && p.x < w + 40;
+  });
+  if (pieces.length === 0) teardown();
+}
+export function confetti(options: ConfettiOptions = {}): void {
+  if (prefersReducedMotion()) return;
+  const root = document.documentElement;
+  const count = options.count ?? 120;
+  const colors = options.colors?.length ? options.colors : ['#f5a524', '#e4572e', '#3a9a5b', '#4c7dff', '#c94ad3'];
+  const ox = options.origin?.x ?? innerWidth / 2;
+  const oy = options.origin?.y ?? innerHeight / 2;
+  const spread = ((options.spread ?? num(root, '--ma-confetti-spread', 70)) * Math.PI) / 180;
+  const v = options.velocity ?? num(root, '--ma-confetti-velocity', 14);
+  const dir = ((options.angle ?? 0) * Math.PI) / 180;
+  for (let i = 0; i < count; i++) {
+    const a = dir + (Math.random() - 0.5) * spread;
+    const s = v * (0.5 + Math.random());
+    pieces.push({ x: ox, y: oy, vx: Math.sin(a) * s, vy: -Math.cos(a) * s, w: 6 + Math.random() * 6, h: 4 + Math.random() * 8, a: Math.random() * Math.PI, va: (Math.random() - 0.5) * 0.3, f: Math.random() * Math.PI, c: colors[i % colors.length]! });
+  }
+  if (!canvas) {
+    canvas = document.createElement('canvas');
+    canvas.setAttribute('aria-hidden', 'true');
+    canvas.style.cssText = 'position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:2147483647';
+    ctx = canvas.getContext('2d')!;
+    document.body.append(canvas);
+    abort = new AbortController();
+    run = loop(frame, abort.signal);
+    // a navigation mid-burst takes the canvas with it; a new page starts clean
+    document.addEventListener('astro:before-swap', teardown, { signal: abort.signal });
+  }
+  run!.wake();
+}

package/src/lib/contrast.ts ADDED Viewed

@@ -0,0 +1,116 @@
+/**
+ * Build-time contrast for highlighted code. `readableCode()` is a Shiki transformer (pass it to Astro's <Code
+ * transformers>, or to markdown.shikiConfig.transformers) that moves every token colour's OKLCH lightness — hue kept,
+ * chroma kept unless sRGB cannot hold it — just far enough to read at `ratio` against the ground it is shown on. A colour
+ * that already passes is untouched, so a theme keeps its look and only its faint greys, reds and oranges get firmer.
+ * Any theme becomes AA; nothing runs in the browser.
+ *
+ * Grounds: `light` and `dark` (the `--shiki-light` / `--shiki-dark` variables of a dual theme) default to a light and a
+ * dark panel a little heavier than the library's own, so a block stays AA on a tinted surface too. A single theme's
+ * `color` is read against the background the theme paints on its <pre>.
+ */
+type Rgb = [number, number, number];
+interface HastNode {
+  type: string;
+  tagName?: string;
+  properties?: Record<string, unknown>;
+  children?: HastNode[];
+}
+export interface ReadableCodeOptions {
+  /** Minimum WCAG 2 ratio. */
+  ratio?: number;
+  /** Ground per theme key (`light`, `dark`, `color`, or a custom key of `themes`), as #rrggbb. */
+  grounds?: Record<string, string>;
+}
+const GROUNDS: Record<string, string> = { light: '#eceff1', dark: '#2a2f33' };
+const toLin = (c: number) => (c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4);
+const fromLin = (c: number) => (c <= 0.0031308 ? 12.92 * c : 1.055 * c ** (1 / 2.4) - 0.055);
+const lum = ([r, g, b]: Rgb) => 0.2126 * toLin(r) + 0.7152 * toLin(g) + 0.0722 * toLin(b);
+const ratioOf = (a: Rgb, b: Rgb) => { const x = lum(a), y = lum(b); return (Math.max(x, y) + 0.05) / (Math.min(x, y) + 0.05); };
+function parseHex(hex: string): { rgb: Rgb; alpha: string } | null {
+  let h = hex.slice(1);
+  if (h.length === 3 || h.length === 4) h = [...h].map((c) => c + c).join('');
+  if (h.length !== 6 && h.length !== 8) return null;
+  const n = (i: number) => parseInt(h.slice(i, i + 2), 16) / 255;
+  return { rgb: [n(0), n(2), n(4)], alpha: h.slice(6) };
+}
+const toHex = (rgb: Rgb) => '#' + rgb.map((c) => Math.round(Math.min(1, Math.max(0, c)) * 255).toString(16).padStart(2, '0')).join('');
+function toOklch([r, g, b]: Rgb): Rgb {
+  const [lr, lg, lb] = [toLin(r), toLin(g), toLin(b)];
+  const l = Math.cbrt(0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb);
+  const m = Math.cbrt(0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb);
+  const s = Math.cbrt(0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb);
+  const L = 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s;
+  const A = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s;
+  const B = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s;
+  return [L, Math.hypot(A, B), Math.atan2(B, A)];
+}
+function fromOklch(L: number, C: number, h: number): Rgb | null {
+  const A = C * Math.cos(h), B = C * Math.sin(h);
+  const l = (L + 0.3963377774 * A + 0.2158037573 * B) ** 3;
+  const m = (L - 0.1055613458 * A - 0.0638541728 * B) ** 3;
+  const s = (L - 0.0894841775 * A - 1.291485548 * B) ** 3;
+  const lin = [4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s, -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s, -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s];
+  if (lin.some((c) => c < -1e-4 || c > 1 + 1e-4)) return null;
+  return lin.map((c) => fromLin(Math.min(1, Math.max(0, c)))) as Rgb;
+}
+/** The colour at lightness L with this hue, and as much of chroma C as sRGB can hold. */
+function inGamut(L: number, C: number, h: number): Rgb {
+  const direct = fromOklch(L, C, h);
+  if (direct) return direct;
+  let lo = 0, hi = C;
+  for (let i = 0; i < 16; i++) { const mid = (lo + hi) / 2; if (fromOklch(L, mid, h)) lo = mid; else hi = mid; }
+  return fromOklch(L, lo, h) ?? [L, L, L];
+}
+/** `fg` moved in OKLCH lightness until it reads at `ratio` on `ground`; unchanged when it already does. */
+export function readable(fg: string, ground: string, ratio = 4.5): string {
+  const f = parseHex(fg), g = parseHex(ground);
+  if (!f || !g || ratioOf(f.rgb, g.rgb) >= ratio) return fg;
+  const [L, C, h] = toOklch(f.rgb);
+  const darken = lum(g.rgb) > 0.18;
+  // lightness is monotonic in the ratio on either side of the ground: bisect between the colour and black or white
+  let near = L, far = darken ? 0 : 1;
+  for (let i = 0; i < 24; i++) {
+    const mid = (near + far) / 2;
+    if (ratioOf(inGamut(mid, C, h), g.rgb) >= ratio) far = mid; else near = mid;
+  }
+  let out = toHex(inGamut(far, C, h));
+  // 8-bit rounding can land a hair under; step until it clears
+  for (let i = 0; i < 8 && ratioOf(parseHex(out)!.rgb, g.rgb) < ratio; i++) {
+    far += darken ? -0.005 : 0.005;
+    out = toHex(inGamut(far, C, h));
+  }
+  return out + f.alpha;
+}
+const COLOR = /(^|;)(\s*)(color|--shiki-[a-zA-Z0-9]+)(\s*:\s*)(#[0-9a-fA-F]{3,8})\b/g;
+export function readableCode({ ratio = 4.5, grounds = {} }: ReadableCodeOptions = {}) {
+  const ground = (key: string, pre: string | undefined) => grounds[key] ?? (key === 'color' ? pre : GROUNDS[key]);
+  const fix = (style: string, pre: string | undefined) =>
+    style.replace(COLOR, (m, sep: string, sp: string, prop: string, colon: string, hex: string) => {
+      const g = ground(prop === 'color' ? 'color' : prop.slice('--shiki-'.length), pre);
+      return g ? `${sep}${sp}${prop}${colon}${readable(hex, g, ratio)}` : m;
+    });
+  const walk = (node: HastNode, pre: string | undefined) => {
+    const style = node.properties?.['style'];
+    if (typeof style === 'string') node.properties!['style'] = fix(style, pre);
+    node.children?.forEach((c) => walk(c, pre));
+  };
+  return {
+    name: 'moonarc:readable-code',
+    root(root: HastNode) {
+      const find = (n: HastNode): HastNode | undefined => (n.tagName === 'pre' ? n : n.children?.map(find).find(Boolean));
+      const style = find(root)?.properties?.['style'];
+      const pre = typeof style === 'string' ? /background-color\s*:\s*(#[0-9a-fA-F]{3,8})/.exec(style)?.[1] : undefined;
+      walk(root, pre);
+    },
+  };
+}