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/Curtain.astro ADDED Viewed

@@ -0,0 +1,305 @@
+---
+/**
+ * Curtain — a full-viewport wipe between two pages. Where PageTransition
+ * animates a region, Curtain owns the root: it animates the browser's own
+ * ::view-transition-old(root) / -new(root) with a clip-path (iris, doors,
+ * shutter, diagonal) or a mask (blinds, stagger, pixels), so the new page
+ * comes in through a shape while the old one stays put beneath it. Back
+ * navigation plays the shape in reverse on the leaving page. `title` is a
+ * real panel with a view-transition-name that carries the next page's title
+ * across the swap, and only across a swap: a same-document transition the
+ * library runs (html[data-ma-vt]) leaves it out. One element in the layout;
+ * the mode is a prop and lives in the DOM, so :has() on the root selects the
+ * rules — nothing global.
+ * The only script is the iris origin: the last pointer-down, written on
+ * <html> and rewritten after every swap.
+ */
+import type { HTMLAttributes } from 'astro/types';
+type Mode = 'iris' | 'blinds' | 'shutter' | 'doors' | 'pixels' | 'stagger' | 'diagonal' | 'title';
+interface Props extends HTMLAttributes<'div'> {
+  /** The shape. */
+  mode?: Mode;
+  /** The page's title, for `title` mode: shown on the panel while it covers the swap. */
+  title?: string;
+  /** Duration in ms. Unset: the preset's --ma-dur-gentle (title: --ma-dur-ambient). */
+  duration?: number;
+  /** Panel colours for `title` mode. */
+  color?: string;
+  textColor?: string;
+}
+const { mode = 'iris', title, duration, color, textColor, class: className, style, ...rest } = Astro.props;
+const vars = [color && `--ma-curtain-color:${color}`, textColor && `--ma-curtain-text:${textColor}`, typeof style === 'string' ? style : ''].filter(Boolean).join(';');
+---
+<div class:list={['ma-curtain', className]} data-mode={mode} data-duration={duration} aria-hidden="true" style={vars || undefined} {...rest}>
+  {title && <div class="ma-curtain__panel">{title}</div>}
+</div>
+<style is:global>
+  @property --ma-curtain-f {
+    syntax: '<percentage>';
+    inherits: false;
+    initial-value: 0%;
+  }
+  @property --ma-curtain-px {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: 0px;
+  }
+  @layer components {
+    :where(.ma-curtain) {
+      display: none;
+    }
+    /* title: the panel lives on the page, fully clipped, so its snapshot exists for the transition */
+    :where(.ma-curtain[data-mode='title']) {
+      display: block;
+      position: fixed;
+      inset: 0;
+      z-index: 2147483000;
+      pointer-events: none;
+      clip-path: inset(0 0 100% 0);
+    }
+    /* named for page swaps only: inline, the name also put the full-screen panel into every same-document transition the
+       library runs (a morphing dialog, FilterGrid), and the title swept across the page */
+    :where(:root:not([data-ma-vt]) .ma-curtain__panel) {
+      view-transition-name: ma-curtain-title;
+    }
+    :where(.ma-curtain__panel) {
+      position: absolute;
+      inset: 0;
+      display: grid;
+      place-items: center;
+      padding: 6vmin;
+      /* the panel is the page's own surface, laid over Canvas so a translucent token never lets the old page through */
+      background: linear-gradient(var(--ma-curtain-color, var(--ma-panel)), var(--ma-curtain-color, var(--ma-panel))), Canvas;
+      color: var(--ma-curtain-text, var(--ma-ink));
+      font-size: clamp(2rem, 6vw, 5rem);
+      font-weight: 700;
+      letter-spacing: -0.03em;
+      line-height: 1.05;
+      text-align: center;
+      text-wrap: balance;
+    }
+    /* The shape layer: the new page on the way forward, the old page on the way back. The other one holds still. */
+    :where(:root:not([data-astro-transition='back']):has(.ma-curtain:not([data-mode='title'])))::view-transition-old(root),
+    :where(:root[data-astro-transition='back']:has(.ma-curtain:not([data-mode='title'])))::view-transition-new(root) {
+      animation: none;
+      mix-blend-mode: normal;
+    }
+    :where(:root:not([data-astro-transition='back']):has(.ma-curtain:not([data-mode='title'])))::view-transition-new(root),
+    :where(:root[data-astro-transition='back']:has(.ma-curtain:not([data-mode='title'])))::view-transition-old(root) {
+      animation-duration: var(--ma-curtain-dur, var(--ma-dur-gentle));
+      animation-timing-function: var(--ma-ease-out);
+      animation-fill-mode: both;
+      mix-blend-mode: normal;
+    }
+    :where(:root[data-astro-transition='back']:has(.ma-curtain:not([data-mode='title'])))::view-transition-old(root) {
+      z-index: 1;
+      animation-direction: reverse;
+      animation-timing-function: var(--ma-ease-in);
+    }
+    :where(:root:not([data-astro-transition='back']):has(.ma-curtain[data-mode='iris']))::view-transition-new(root),
+    :where(:root[data-astro-transition='back']:has(.ma-curtain[data-mode='iris']))::view-transition-old(root) {
+      animation-name: ma-curtain-iris;
+    }
+    :where(:root:not([data-astro-transition='back']):has(.ma-curtain[data-mode='doors']))::view-transition-new(root),
+    :where(:root[data-astro-transition='back']:has(.ma-curtain[data-mode='doors']))::view-transition-old(root) {
+      animation-name: ma-curtain-doors;
+    }
+    :where(:root:not([data-astro-transition='back']):has(.ma-curtain[data-mode='shutter']))::view-transition-new(root),
+    :where(:root[data-astro-transition='back']:has(.ma-curtain[data-mode='shutter']))::view-transition-old(root) {
+      animation-name: ma-curtain-shutter;
+    }
+    :where(:root:not([data-astro-transition='back']):has(.ma-curtain[data-mode='diagonal']))::view-transition-new(root),
+    :where(:root[data-astro-transition='back']:has(.ma-curtain[data-mode='diagonal']))::view-transition-old(root) {
+      animation-name: ma-curtain-diagonal;
+    }
+    /* blinds: eight slats whose filled part grows; the gradient reads the animated registered property */
+    :where(:root:not([data-astro-transition='back']):has(.ma-curtain[data-mode='blinds']))::view-transition-new(root),
+    :where(:root[data-astro-transition='back']:has(.ma-curtain[data-mode='blinds']))::view-transition-old(root) {
+      animation-name: ma-curtain-blinds;
+      mask-image: repeating-linear-gradient(#000 0 var(--ma-curtain-f), transparent 0 12.5%);
+    }
+    /* stagger: eight columns, one after another */
+    :where(:root:not([data-astro-transition='back']):has(.ma-curtain[data-mode='stagger']))::view-transition-new(root),
+    :where(:root[data-astro-transition='back']:has(.ma-curtain[data-mode='stagger']))::view-transition-old(root) {
+      animation-name: ma-curtain-stagger;
+      animation-timing-function: steps(8, end);
+      mask-image: linear-gradient(#000 0 0);
+      mask-repeat: no-repeat;
+    }
+    /* pixels: a grid of squares growing in six steps — two gradients intersected, one per axis */
+    :where(:root:not([data-astro-transition='back']):has(.ma-curtain[data-mode='pixels']))::view-transition-new(root),
+    :where(:root[data-astro-transition='back']:has(.ma-curtain[data-mode='pixels']))::view-transition-old(root) {
+      animation-name: ma-curtain-pixels;
+      animation-timing-function: steps(6, end);
+      mask-image:
+        linear-gradient(90deg, transparent calc(50% - var(--ma-curtain-px) / 2), #000 0 calc(50% + var(--ma-curtain-px) / 2), transparent 0),
+        linear-gradient(transparent calc(50% - var(--ma-curtain-px) / 2), #000 0 calc(50% + var(--ma-curtain-px) / 2), transparent 0);
+      mask-size: 6vmin 6vmin;
+      mask-composite: intersect;
+    }
+    /* title: the old page holds, the panel rises with the next title, the new page is there when it leaves */
+    :where(:root:has(.ma-curtain[data-mode='title']))::view-transition-old(root) {
+      animation: ma-curtain-cut-old var(--ma-curtain-dur, var(--ma-dur-ambient)) linear both;
+      mix-blend-mode: normal;
+    }
+    :where(:root:has(.ma-curtain[data-mode='title']))::view-transition-new(root) {
+      animation: ma-curtain-cut-new var(--ma-curtain-dur, var(--ma-dur-ambient)) linear both;
+      mix-blend-mode: normal;
+    }
+    :where(:root:has(.ma-curtain[data-mode='title']))::view-transition-group(ma-curtain-title) {
+      z-index: 2;
+      animation: ma-curtain-title var(--ma-curtain-dur, var(--ma-dur-ambient)) var(--ma-ease-in-out) both;
+    }
+    :where(:root:has(.ma-curtain[data-mode='title']))::view-transition-old(ma-curtain-title) {
+      display: none;
+    }
+    :where(:root:has(.ma-curtain[data-mode='title']))::view-transition-new(ma-curtain-title) {
+      animation: none;
+      mix-blend-mode: normal;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      :where(:root:has(.ma-curtain))::view-transition-old(root),
+      :where(:root:has(.ma-curtain))::view-transition-new(root),
+      :where(:root:has(.ma-curtain))::view-transition-group(ma-curtain-title),
+      :where(:root:has(.ma-curtain))::view-transition-new(ma-curtain-title) {
+        animation: none;
+        mask-image: none;
+        clip-path: none;
+      }
+      :where(:root:has(.ma-curtain))::view-transition-old(root),
+      :where(:root:has(.ma-curtain))::view-transition-group(ma-curtain-title) {
+        display: none;
+      }
+    }
+  }
+  @keyframes ma-curtain-iris {
+    from {
+      clip-path: circle(0 at var(--ma-curtain-x, 50%) var(--ma-curtain-y, 50%));
+    }
+    to {
+      clip-path: circle(150% at var(--ma-curtain-x, 50%) var(--ma-curtain-y, 50%));
+    }
+  }
+  @keyframes ma-curtain-doors {
+    from {
+      clip-path: inset(0 50%);
+    }
+    to {
+      clip-path: inset(0 0);
+    }
+  }
+  @keyframes ma-curtain-shutter {
+    from {
+      clip-path: inset(0 0 100% 0);
+    }
+    to {
+      clip-path: inset(0 0 0 0);
+    }
+  }
+  @keyframes ma-curtain-diagonal {
+    from {
+      clip-path: polygon(0 0, 0 0, 0 0);
+    }
+    to {
+      clip-path: polygon(0 0, 200% 0, 0 200%);
+    }
+  }
+  @keyframes ma-curtain-blinds {
+    from {
+      --ma-curtain-f: 0%;
+    }
+    to {
+      --ma-curtain-f: 12.5%;
+    }
+  }
+  @keyframes ma-curtain-stagger {
+    from {
+      mask-size: 0% 100%;
+    }
+    to {
+      mask-size: 100% 100%;
+    }
+  }
+  @keyframes ma-curtain-pixels {
+    from {
+      --ma-curtain-px: 0px;
+    }
+    to {
+      --ma-curtain-px: 6vmin;
+    }
+  }
+  @keyframes ma-curtain-cut-old {
+    0%,
+    49.9% {
+      opacity: 1;
+    }
+    50%,
+    100% {
+      opacity: 0;
+    }
+  }
+  @keyframes ma-curtain-cut-new {
+    0%,
+    49.9% {
+      opacity: 0;
+    }
+    50%,
+    100% {
+      opacity: 1;
+    }
+  }
+  @keyframes ma-curtain-title {
+    from {
+      transform: translateY(100%);
+    }
+    38%,
+    62% {
+      transform: translateY(0);
+    }
+    to {
+      transform: translateY(-100%);
+    }
+  }
+</style>
+<script>
+  // The iris opens from the last pointer-down. The point is written on <html>, because the
+  // view-transition pseudo-elements inherit from it, and written again after every swap,
+  // because the router replaces <html>'s attributes. Back/forward opens from the centre.
+  // The curtain's duration prop rides along the same way.
+  let x = '50%';
+  let y = '50%';
+  const write = () => {
+    const s = document.documentElement.style;
+    s.setProperty('--ma-curtain-x', x);
+    s.setProperty('--ma-curtain-y', y);
+    const d = document.querySelector<HTMLElement>('.ma-curtain')?.dataset.duration;
+    if (d) s.setProperty('--ma-curtain-dur', `${d}ms`);
+    else s.removeProperty('--ma-curtain-dur');
+  };
+  document.addEventListener(
+    'pointerdown',
+    (e) => {
+      x = `${e.clientX}px`;
+      y = `${e.clientY}px`;
+      write();
+    },
+    { passive: true },
+  );
+  addEventListener('popstate', () => {
+    x = y = '50%';
+    write();
+  });
+  document.addEventListener('astro:after-swap', write);
+  write();
+</script>

package/src/components/Curtain.meta.ts ADDED Viewed

@@ -0,0 +1,38 @@
+import type { ComponentMeta } from '../lib/meta';
+export default {
+  name: 'Curtain',
+  slug: 'curtain',
+  title: 'Curtain',
+  description:
+    'A full-viewport wipe between pages: the next page opens through an iris from where you clicked, or through blinds, a shutter, doors, pixels, staggered columns, a diagonal, or a title panel that carries the next page\'s name. It animates the browser\'s own root view-transition snapshots with clip-path and mask, on Astro\'s router; back plays the shape in reverse. The only script is the click point.',
+  summary: 'A full-screen page transition: the next page opens through an iris from the click, or through blinds, doors or pixels.',
+  category: 'transition',
+  tier: 'B',
+  trigger: ['click'],
+  support: { baseline: 'newly', needs: ['view-transitions', 'has', 'clip-path', 'mask-image', 'mask-composite', 'property'], fallback: 'an instant swap between pages' },
+  readout: '<Curtain mode="iris">',
+  usage: `---\n// in the layout, once, on every page\n---\n<Curtain mode="iris" />\n\n<Curtain mode="title" title={Astro.props.title} />`,
+  props: [
+    { name: 'mode', type: "'iris' | 'blinds' | 'shutter' | 'doors' | 'pixels' | 'stagger' | 'diagonal' | 'title'", default: "'iris'", description: 'The shape. The destination page\'s mode plays, because the new document\'s CSS styles the transition.' },
+    { name: 'title', type: 'string', description: 'For title mode: the page\'s title, shown on the panel while it covers the swap. Give every page its own.' },
+    { name: 'duration', type: 'number', default: 'preset (760; title 1390)', description: 'Duration in ms. Unset, the preset\'s --ma-dur-gentle; title mode uses --ma-dur-ambient for its three beats.' },
+    { name: 'color', type: 'string', default: 'var(--ma-panel)', description: 'Panel colour in title mode: the page surface by default, over an opaque Canvas layer.' },
+    { name: 'textColor', type: 'string', default: 'var(--ma-ink)', description: 'Panel text colour in title mode.' },
+  ],
+  reducedMotion: 'Astro\'s router skips view transitions under the OS setting; under the site\'s switch the snapshots are cut without a shape.',
+  clientRouter: 'This is the ClientRouter: Curtain has no effect without it. The click-point script listens once on the document and rewrites the origin after every swap.',
+  craft: [
+    'Curtain owns the root and PageTransition owns regions: a named region on the same page is captured separately and keeps its own preset, and the curtain wipes everything else. Use both; never two curtains.',
+    'The old page holds still and the new one comes in through the shape. The default cross-fade is replaced (animation: none on the old snapshot, mix-blend-mode: normal on both), because a fade under a wipe looks muddy.',
+    'The mode is read with :root:has(.ma-curtain[data-mode]) on the destination page, so a page decides how it is entered. An editorial page can open with a title while the shop uses an iris.',
+    'The iris starts at the last pointer-down: one document listener, two custom properties on <html>, rewritten after the swap because the router replaces the root\'s attributes. Back and forward open from the centre.',
+    'Blinds and pixels animate a registered custom property that a mask gradient reads, so the mask is re-rasterised on each frame. Eight stripes or a grid of squares are cheap to rasterise, and pixels use steps(6) because pixels do not tween.',
+    'Back plays the same keyframes reversed on the leaving page, above the arriving one, so going back looks like the forward move undone.',
+    'The title panel is a real element on every page, clipped away in normal life; its snapshot is what the browser slides across, so the title is the next page\'s own, not a copy the script knows about.',
+  ],
+  related: ['page-transition', 'persist-player', 'reveal'],
+  intents: ['page curtain transition', 'iris page transition', 'full screen wipe between pages', 'view transition root clip-path', 'blinds page transition', 'pixel page transition astro'],
+  replaces: ['page-transition examples (motion.dev)', 'curtain / pixel transitions (Codrops)', 'Barba.js and Swup transitions'],
+  fixture: { props: { mode: 'iris' }, expect: 'class="ma-curtain"' },
+} satisfies ComponentMeta;

package/src/components/Dialog.astro ADDED Viewed

@@ -0,0 +1,156 @@
+---
+/**
+ * Dialog — a native modal that opens and closes with motion, zero JS.
+ *
+ * The trigger is a button with the invoker `command="show-modal"`; closing
+ * is a form with method="dialog", which every browser has. Motion is
+ * @starting-style in, transition-behavior: allow-discrete out, so display
+ * and the top layer wait for the exit to finish. `polyfill` adds an inline
+ * click handler (403 B raw) for browsers that predate invoker commands. `morph`
+ * renders one internal component with a measured script (lib/morph): the
+ * box grows out of its trigger on a same-document view transition and
+ * returns to it on close; the default stays at 0 B.
+ */
+import type { HTMLAttributes } from 'astro/types';
+import DialogMorph from './internal/DialogMorph.astro';
+interface Props extends HTMLAttributes<'dialog'> {
+  /** Element id; the trigger points at it. */
+  id: string;
+  /** Trigger label; or use the `trigger` slot. */
+  label?: string;
+  /** Close on backdrop click or Escape (closedby="any"). */
+  dismiss?: boolean;
+  /** Show the close button. */
+  close?: boolean;
+  /** Accessible name of the close button. */
+  closeLabel?: string;
+  /** Add the inline click handler for browsers without invoker commands. */
+  polyfill?: boolean;
+  /** Grow out of the trigger and back into it on a same-document view transition (adds the measured morph script; without view transitions or under reduced motion it opens and closes as usual). */
+  morph?: boolean;
+}
+const { id, label = 'Open', dismiss = true, close = true, closeLabel = 'Close', polyfill = false, morph = false, class: className, ...rest } = Astro.props;
+const triggerAttrs = { command: 'show-modal', commandfor: id };
+const dialogAttrs = dismiss ? { closedby: 'any' as const } : {};
+---
+{Astro.slots.has('trigger') ? <slot name="trigger" /> : <button type="button" class="ma-dialog__trigger" {...triggerAttrs}>{label}</button>}
+<dialog id={id} class:list={['ma-dialog', className]} data-morph={morph ? '' : undefined} {...dialogAttrs} {...rest}>
+  <div class="ma-dialog__panel">
+    <slot />
+    {close && (
+      <form method="dialog" class="ma-dialog__close">
+        <button type="submit" aria-label={closeLabel}>
+          <svg aria-hidden="true" viewBox="0 0 16 16" width="16" height="16"><path d="M4 4l8 8M12 4l-8 8" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" /></svg>
+        </button>
+      </form>
+    )}
+  </div>
+</dialog>
+{morph && <DialogMorph for={id} />}
+{polyfill && <script is:inline>window.__maCmd||(window.__maCmd=1,document.addEventListener('click',function(e){if('command'in HTMLButtonElement.prototype||e.defaultPrevented)return;var b=e.target.closest('[commandfor]');if(!b)return;var d=document.getElementById(b.getAttribute('commandfor'));if(!d)return;var c=b.getAttribute('command');c==='show-modal'?d.showModal():c==='close'?d.close():c==='toggle-popover'?d.togglePopover():0}))</script>}
+<style is:global>
+  @layer components {
+    :where(.ma-dialog) {
+      inset: 0;
+      margin: auto;
+      max-width: min(32rem, calc(100vw - 2rem));
+      border: 1px solid var(--ma-edge);
+      border-radius: 1rem;
+      padding: 0;
+      background: var(--ma-panel);
+      color: inherit;
+      box-shadow: 0 24px 64px -24px rgb(0 0 0 / 0.4);
+      opacity: 0;
+      scale: 0.96;
+      translate: 0 var(--ma-travel-hover, 4px);
+      transition:
+        opacity var(--ma-duration-fast) var(--ma-ease-out),
+        scale var(--ma-duration-fast) var(--ma-ease-out),
+        translate var(--ma-duration-fast) var(--ma-ease-out),
+        display var(--ma-duration-fast) allow-discrete,
+        overlay var(--ma-duration-fast) allow-discrete;
+    }
+    :where(.ma-dialog[open]) {
+      opacity: 1;
+      scale: 1;
+      translate: 0 0;
+      transition-duration: var(--ma-duration);
+      transition-timing-function: var(--ma-ease);
+    }
+    @starting-style {
+      :where(.ma-dialog[open]) {
+        opacity: 0;
+        scale: 0.96;
+        translate: 0 var(--ma-travel-enter, 24px);
+      }
+    }
+    :where(.ma-dialog)::backdrop {
+      background: var(--ma-scrim);
+      backdrop-filter: blur(6px);
+      opacity: 0;
+      transition:
+        opacity var(--ma-duration-fast) var(--ma-ease-out),
+        display var(--ma-duration-fast) allow-discrete,
+        overlay var(--ma-duration-fast) allow-discrete;
+    }
+    :where(.ma-dialog[open])::backdrop {
+      opacity: 1;
+      transition-duration: var(--ma-duration);
+    }
+    @starting-style {
+      :where(.ma-dialog[open])::backdrop {
+        opacity: 0;
+      }
+    }
+    :where(.ma-dialog__panel) {
+      position: relative;
+      padding: 1.5rem;
+    }
+    /* the close button's corner stays clear: a first line that runs the width of the panel ends before it */
+    :where(.ma-dialog__panel:has(> .ma-dialog__close)) {
+      padding-inline-end: 3.25rem;
+    }
+    :where(.ma-dialog__close) {
+      position: absolute;
+      inset-block-start: 0.75rem;
+      inset-inline-end: 0.75rem;
+    }
+    /* a plain button with no page reset under it: no UA border, background, padding or font */
+    :where(.ma-dialog__close button) {
+      display: grid;
+      place-items: center;
+      width: 2rem;
+      height: 2rem;
+      padding: 0;
+      border: 0;
+      border-radius: 999px;
+      background: none;
+      color: inherit;
+      font: inherit;
+      cursor: pointer;
+      opacity: 0.6;
+      transition: opacity var(--ma-duration-fast) var(--ma-ease-out), background-color var(--ma-duration-fast) var(--ma-ease-out);
+    }
+    :where(.ma-dialog__close button:hover) {
+      opacity: 1;
+      background: var(--ma-edge);
+    }
+    :where(.ma-dialog__trigger) {
+      cursor: pointer;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      :where(.ma-dialog),
+      :where(.ma-dialog[open]),
+      :where(.ma-dialog)::backdrop {
+        scale: 1;
+        translate: 0 0;
+        transition-duration: var(--ma-duration-fast);
+        transition-timing-function: linear;
+      }
+    }
+  }
+</style>

package/src/components/Dialog.meta.ts ADDED Viewed

@@ -0,0 +1,37 @@
+import type { ComponentMeta } from '../lib/meta';
+export default {
+  name: 'Dialog',
+  slug: 'dialog',
+  title: 'Dialog',
+  description: 'A native modal that scales in over a blurred backdrop and scales out again, closes on Escape, the close button or a backdrop click, and traps focus, all handled by the browser. Zero JavaScript: the trigger uses the invoker command attribute; the exit is transition-behavior: allow-discrete.',
+  summary: 'A native modal dialog that scales in over a blurred backdrop, closes on Escape or a backdrop click, and traps focus.',
+  category: 'ui',
+  tier: 'A',
+  trigger: ['click'],
+  support: { baseline: 'newly', needs: ['command', 'starting-style', 'allow-discrete', 'dialog'], fallback: 'without invoker commands the trigger needs polyfill (an inline handler of 403 B raw); without @starting-style and allow-discrete the modal opens and closes without motion; without closedby (Safari) a backdrop click does nothing, and Escape and the close button still close it' },
+  readout: '<Dialog command="show-modal">',
+  usage: `<Dialog id="terms" label="Read the terms">\n  <h2>Terms</h2>\n  <p>Short.</p>\n</Dialog>\n\n<Dialog id="custom" polyfill>\n  <button slot="trigger" type="button" command="show-modal" commandfor="custom">Any trigger</button>\n  <p>Contents.</p>\n</Dialog>\n\n<!-- grows out of its trigger on a view transition -->\n<Dialog id="card" morph label="Open the card">\n  <p>The box you clicked is the box that opened.</p>\n</Dialog>`,
+  props: [
+    { name: 'id', type: 'string', description: 'Dialog id; the trigger points at it.' },
+    { name: 'label', type: 'string', default: "'Open'", description: 'Trigger label. Use the trigger slot for custom markup (give it command="show-modal" commandfor={id}).' },
+    { name: 'dismiss', type: 'boolean', default: 'true', description: 'Close on backdrop click, via closedby="any" (Chrome 134, Firefox 141; not in Safari yet).' },
+    { name: 'close', type: 'boolean', default: 'true', description: 'Render the close button (a form with method="dialog"). The panel keeps its inline-end corner clear for it.' },
+    { name: 'closeLabel', type: 'string', default: "'Close'", description: 'Accessible name of the close button.' },
+    { name: 'polyfill', type: 'boolean', default: 'false', description: 'Inline a click handler (403 B raw) for browsers without invoker commands (Safari < 26.2, Firefox < 144). It is document-level: one per page covers every Dialog, Drawer and Popover trigger.' },
+    { name: 'morph', type: 'boolean', default: 'false', description: 'Grow out of the trigger and return to it on a same-document view transition. Adds the measured morph script (see the Dialog.morph budget); without view transitions or under reduced motion the dialog opens and closes as usual. Lightbox and VideoDialog build on it.' },
+  ],
+  reducedMotion: 'Opens and closes with a 150 ms crossfade; no scale, no travel. With morph, the view transition is skipped and the dialog opens as usual.',
+  clientRouter: 'Native; nothing to rebind. A dialog open during navigation is closed with the page. The morph script binds through the shared runtime and sets its view-transition-name only for the duration of a transition, so the router never sees it.',
+  craft: [
+    'Enter uses the preset spring at the preset duration; exit is 150 ms ease-out, because exits are always faster than entrances.',
+    'display and overlay transition with allow-discrete so the element leaves the top layer only after the fade completes.',
+    'The close button is a form with method="dialog": that closes a dialog in every browser that has one, no command attribute needed. It sits at the inline end (the left in a right-to-left page), and the panel pads that side so text never runs under it.',
+    'The panel has a theme-aware background and a 24 px shadow; the backdrop blurs 6 px so the page recedes without going black.',
+    'morph is an optional prop that carries a script: it is rendered as an internal component only when set, so the default measures 0 B and the variant is measured separately. The trigger and the dialog share one view-transition-name for one transition each way; the root gets a plain cross-fade on the tokens through html[data-ma-vt], which also keeps a Curtain on the same page from opening its iris.',
+  ],
+  related: ['popover', 'drawer', 'accordion'],
+  intents: ['modal dialog', 'animated modal', 'dialog open close animation', 'native dialog astro', 'modal without javascript'],
+  replaces: ['Dialog (Radix / shadcn)', 'Modal (Aceternity)', 'AnimatedModal (Aceternity)'],
+  fixture: { props: { id: 'ma-fixture-dialog', label: 'Fixture content for Dialog' }, expect: 'Fixture content for Dialog', variants: { morph: { props: { morph: true }, expect: 'data-ma-dialog-morph' } } },
+} satisfies ComponentMeta;