fancy-ui-svelte 0.14.0 → 0.15.0

package/README.md

@@ -4,12 +4,14 @@
 
 # fancy-ui
 
-Beautiful animation and UI components for **Svelte 5**.
+Animated UI components for **Svelte 5**, **React** and **Vue 3**, styled with Tailwind CSS v4.
 
-![Svelte 5](https://img.shields.io/badge/Svelte-5-FF3E00?logo=svelte&logoColor=white)
+[![npm fancy-ui-svelte](https://img.shields.io/npm/v/fancy-ui-svelte?label=fancy-ui-svelte&color=FF3E00)](https://www.npmjs.com/package/fancy-ui-svelte)
+[![npm fancy-ui-react](https://img.shields.io/npm/v/fancy-ui-react?label=fancy-ui-react&color=149ECA)](https://www.npmjs.com/package/fancy-ui-react)
+[![npm fancy-ui-vue](https://img.shields.io/npm/v/fancy-ui-vue?label=fancy-ui-vue&color=42B883)](https://www.npmjs.com/package/fancy-ui-vue)
 ![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-4-06B6D4?logo=tailwindcss&logoColor=white)
 ![TypeScript](https://img.shields.io/badge/TypeScript-5-3178C6?logo=typescript&logoColor=white)
-![Components](https://img.shields.io/badge/Components-145-8B5CF6)
+![Components](https://img.shields.io/badge/Components-146-8B5CF6)
 ![MIT License](https://img.shields.io/badge/License-MIT-green)
 
 <p align="center">
@@ -23,23 +25,31 @@ Beautiful animation and UI components for **Svelte 5**.
 
 <p align="center">
   <a href="https://fancy-ui.rama.app">
-    <img src=".github/fancyui-readme.png" alt="FancyUI preview" width="800" />
+    <img src=".github/fancyui-reel.webp" alt="fancy-ui in motion: an HDR fluid cursor painting over the title, fireworks launched from a gradient button, a datamosh page transition, a before/after slider split by a blade of light and a rainbow-beam button" width="800" />
   </a>
 </p>
 
 <p align="center">
-  <a href="https://fancy-ui.rama.app"><strong>Live Demo</strong></a>
+  <a href="https://fancy-ui.rama.app"><strong>Live Demo &amp; Docs</strong></a>
+  &nbsp;·&nbsp;
+  <a href="https://fancy-ui.rama.app/docs/components">Browse components</a>
+  &nbsp;·&nbsp;
+  <a href="./react/README.md">React package</a>
+  &nbsp;·&nbsp;
+  <a href="./vue/README.md">Vue package</a>
 </p>
 
 ## Features
 
-- **Svelte 5 Runes** &mdash; Built with `$state`, `$derived`, `$effect`, and `$props`
-- **Tailwind CSS 4** &mdash; Utility-first styling with theme tokens
-- **TypeScript** &mdash; Fully typed props and events
-- **145 Components** &mdash; Core primitives (forms, navigation, overlays) alongside buttons, text animations, backgrounds, effects and a micro-interactions collection
-- **Dark Mode** &mdash; All components support light and dark themes
-- **Opt-in Sound** &mdash; Eleven synthesised interface cues, a `SoundToggle` switch and a `soundFeedback` action; silent until the user turns it on
-- **Tested** &mdash; 3,700+ unit tests with Vitest and Testing Library
+- **146 components** &mdash; core primitives (forms, navigation, overlays) alongside buttons, text animations, backgrounds, cursors, AI/chat building blocks and a micro-interactions collection
+- **Motion that feels physical** &mdash; beams of light, liquid-metal and neon borders, a physical flip card, a before/after slider with a motion trail, a datamosh page transition; springs and WebGL where they earn their keep
+- **Svelte 5 runes** &mdash; built with `$state`, `$derived`, `$effect` and `$props`; snippets, no legacy syntax
+- **React and Vue editions** &mdash; [`fancy-ui-react`](./react/README.md) (React 18 and 19) and [`fancy-ui-vue`](./vue/README.md) (Vue 3.5+) ship the same components under the same names, ported from the Svelte source and kept at parity by CI
+- **Tailwind CSS v4** &mdash; one CSS import, theme tokens, light and dark themes
+- **Accessible and SSR-safe** &mdash; keyboard support where it applies, `prefers-reduced-motion` respected, canvas and WebGL work deferred to mount
+- **Opt-in sound** &mdash; eleven synthesised interface cues, a `SoundToggle` switch and a `soundFeedback` action; silent until the user turns it on
+- **AI-ready docs** &mdash; `llms.txt`, a Markdown page per component and a JSON registry, so coding agents use the library correctly
+- **Tested** &mdash; 4,500+ unit tests with Vitest and Testing Library
 
 ## Quick Start
 
@@ -49,12 +59,6 @@ Beautiful animation and UI components for **Svelte 5**.
 npm install fancy-ui-svelte
 ```
 
-Then import any component:
-
-```ts
-import { Marquee, BorderBeam, Confetti } from "fancy-ui-svelte";
-```
-
 Add the Tailwind integration to your app's CSS (e.g. `src/app.css`):
 
 ```css
@@ -64,6 +68,19 @@ Add the Tailwind integration to your app's CSS (e.g. `src/app.css`):
 
 This single import tells Tailwind v4 to scan the library's components so all utility classes are generated automatically. No manual `@source` path needed.
 
+Then import any component:
+
+```svelte
+<script lang="ts">
+	import { RainbowButton, BorderBeam } from "fancy-ui-svelte";
+</script>
+
+<div class="relative overflow-hidden rounded-xl border p-8">
+	<RainbowButton>Get started</RainbowButton>
+	<BorderBeam />
+</div>
+```
+
 <details>
 <summary>Alternative: manual @source (without the CSS import)</summary>
 
@@ -91,12 +108,62 @@ pnpm install
 pnpm dev
 ```
 
+### React
+
+```bash
+npm install fancy-ui-react
+```
+
+```css
+/* app.css */
+@import "tailwindcss";
+@import "fancy-ui-react/tailwind.css";
+```
+
+```tsx
+import "fancy-ui-react/styles.css";
+import { RainbowButton } from "fancy-ui-react";
+
+export function Hero() {
+	return <RainbowButton>Get started</RainbowButton>;
+}
+```
+
+Props keep their Svelte names; `class` becomes `className` and snippets become `ReactNode`. Setup details and the few deliberate differences are in the [React package README](./react/README.md).
+
+### Vue
+
+```bash
+npm install fancy-ui-vue
+```
+
+```css
+/* app.css */
+@import "tailwindcss";
+@import "fancy-ui-vue/tailwind.css";
+@import "fancy-ui-vue/styles.css";
+```
+
+```vue
+<script setup lang="ts">
+import { RainbowButton } from "fancy-ui-vue";
+</script>
+
+<template>
+	<RainbowButton>Get started</RainbowButton>
+</template>
+```
+
+Props keep their Svelte names; snippets become named slots and every bindable prop is a `v-model:<name>`. Details and the deliberate differences are in the [Vue package README](./vue/README.md).
+
 ## Using with AI agents (Claude Code, Cursor, Copilot)
 
-The docs site serves LLM-friendly documentation following the [llms.txt](https://llmstxt.org) convention:
+The docs site serves documentation built for coding agents, following the [llms.txt](https://llmstxt.org) convention:
 
-- [fancy-ui.rama.app/llms.txt](https://fancy-ui.rama.app/llms.txt) — setup guide, usage rules, and component index
-- [fancy-ui.rama.app/llms-full.txt](https://fancy-ui.rama.app/llms-full.txt) — full reference with every component's props
+- [fancy-ui.rama.app/llms.txt](https://fancy-ui.rama.app/llms.txt) — setup guide, usage rules, and an index of every component
+- [fancy-ui.rama.app/llms-full.txt](https://fancy-ui.rama.app/llms-full.txt) — full reference: import, props and a working example per component
+- `https://fancy-ui.rama.app/docs/components/<slug>.md` — one component as Markdown, with every docs example (e.g. [compare.md](https://fancy-ui.rama.app/docs/components/compare.md)); each docs page also has a **Copy as Markdown** button
+- [fancy-ui.rama.app/registry.json](https://fancy-ui.rama.app/registry.json) — every component as JSON: import names (Svelte and React), props, snippets, links
 
 To make your coding agent use fancy-ui correctly, add this to your project's `CLAUDE.md`, `AGENTS.md`, or `.cursorrules`:
 
@@ -104,7 +171,8 @@ To make your coding agent use fancy-ui correctly, add this to your project's `CL
 ## UI components
 
 Use fancy-ui-svelte (Svelte 5 + Tailwind CSS v4) for animated UI components.
-Full component and props reference: https://fancy-ui.rama.app/llms-full.txt
+Setup and rules: https://fancy-ui.rama.app/llms.txt
+One component (props + examples): https://fancy-ui.rama.app/docs/components/<slug>.md
 Key rules: overlay/effect components (BorderBeam, GlowBorder, backgrounds, ...)
 need a parent with `relative overflow-hidden`; cursor effects (FluidCursor,
 SmoothCursor) mount once in the root +layout.svelte; Svelte 5 syntax only.
@@ -115,8 +183,10 @@ SmoothCursor) mount once in the root +layout.svelte; Svelte 5 syntax only.
 ```bash
 pnpm dev             # Start dev server
 pnpm check           # Run Svelte type checker
-pnpm check:registry  # Verify component registry parity (CI gate)
-pnpm check:i18n      # Verify i18n message catalog parity (CI gate)
+pnpm check:registry  # Component folders = registry entries = barrel exports (CI gate)
+pnpm check:i18n      # i18n message catalog parity (CI gate)
+pnpm check:props     # Every Svelte prop has a React and a Vue counterpart (CI gate)
+pnpm check:cores     # Shared framework-free engines are byte-identical in the three packages (CI gate)
 pnpm test            # Run tests
 pnpm test:watch      # Run tests in watch mode
 pnpm build           # Production build
@@ -138,29 +208,35 @@ src/
 │   │   │   └── README.md
 │   │   ├── registry.ts    # Component registry & metadata
 │   │   └── index.ts       # Barrel exports
-│   └── components/ui/     # shadcn-svelte primitives
+│   └── components/docs/examples/<slug>/   # Docs examples, listed in examples/registry.ts
 └── routes/
     ├── +page.svelte       # Home page
     └── docs/              # Docs site (registry-driven component pages)
         └── components/[slug]/+page.svelte
 
-tests/
-└── e2e/                   # Playwright end-to-end tests
+react/                     # fancy-ui-react: the React edition (own package, same components)
+vue/                       # fancy-ui-vue: the Vue edition (own package, same components)
+shared-cores.json          # Manifest of the framework-free engines the three packages share byte for byte
+scripts/                   # Repo gates (registry, i18n, prop parity, shared cores)
+examples/                  # Consumer apps built in CI: next-app, react-demo, nuxt-app
+tests/e2e/                 # Playwright end-to-end tests for the docs site
 ```
 
 Component tests are colocated with their component (see `RainbowButton.test.ts` above); there is no separate top-level unit-test directory.
 
 ## Contributing
 
-Contributions are welcome! 145 components and counting — PRs for new components, bug fixes, and improvements are appreciated.
+Contributions are welcome! 146 components and counting — PRs for new components, bug fixes, and improvements are appreciated.
 
 ### Adding a new component
 
-1. Create the component folder under `src/lib/fancy-ui/`
-2. Implement the component in idiomatic Svelte 5
-3. Add a docs example under `src/lib/components/docs/examples/<slug>/` (`BasicUsage.svelte`)
-4. Register it in `src/lib/fancy-ui/registry.ts`
-5. Export it from `src/lib/fancy-ui/index.ts`
+1. Copy `src/lib/fancy-ui/_template/` to `src/lib/fancy-ui/<slug>/` and implement the component in idiomatic Svelte 5, with its colocated `<Name>.test.ts`
+2. Register it in `src/lib/fancy-ui/registry.ts` and export it from `src/lib/fancy-ui/index.ts`
+3. Add docs examples under `src/lib/components/docs/examples/<slug>/` and list them in `src/lib/components/docs/examples/registry.ts`
+4. Port it to React (`react/src/components/<slug>/`) and Vue (`vue/src/components/<slug>/`) following `react/PORTING.md` and `vue/PORTING.md` — CI fails on a missing port or a missing prop
+5. Add a changeset (`pnpm changeset`)
+
+The full walkthrough is in [CONTRIBUTING.md](./CONTRIBUTING.md).
 
 ## Tech Stack
 
@@ -171,7 +247,6 @@ Contributions are welcome! 145 components and counting — PRs for new component
 | [Tailwind CSS](https://tailwindcss.com)      | 4       | Styling             |
 | [TypeScript](https://www.typescriptlang.org) | 5       | Type safety         |
 | [Vitest](https://vitest.dev)                 | 4       | Testing             |
-| [bits-ui](https://bits-ui.com)               | 2       | Headless primitives |
 | [GSAP](https://gsap.com)                     | 3       | Advanced animations |
 
 ## Credits

package/dist/fancy-ui/_internals/anchor-position.d.ts

@@ -1,4 +1,3 @@
-import type { Action } from "svelte/action";
 export type Side = "top" | "bottom" | "left" | "right";
 export type Align = "start" | "center" | "end";
 export interface ComputePositionOptions {
@@ -69,4 +68,15 @@ export interface AnchorPositionOptions {
  *
  * SSR-safe: does nothing when `window` is unavailable.
  */
-export declare const anchorPosition: Action<HTMLElement, AnchorPositionOptions>;
+/**
+ * Structural stand-in for the framework's action type. This module is a shared
+ * core (identical bytes in every framework package, gated by shared-cores.json at
+ * the repo root), so it must not import framework types; the shape below is what
+ * every framework's action/attach contract expects.
+ */
+type AnchorPositionAction = (node: HTMLElement, opts: AnchorPositionOptions) => {
+    update?: (opts: AnchorPositionOptions) => void;
+    destroy?: () => void;
+} | void;
+export declare const anchorPosition: AnchorPositionAction;
+export {};

package/dist/fancy-ui/_internals/anchor-position.js

@@ -125,14 +125,6 @@ export function computePosition(anchor, floating, opts = {}) {
         align: resolveAlign(resolvedSide, anchor, floating, clampedX, clampedY, align),
     };
 }
-/**
- * Svelte action that positions `node` with `position: fixed` against a live
- * anchor element, using `computePosition`. Recomputes on scroll and resize
- * (passive, capturing listeners so nested scroll containers are caught too)
- * and cleans up its listeners on destroy.
- *
- * SSR-safe: does nothing when `window` is unavailable.
- */
 export const anchorPosition = (node, opts) => {
     if (typeof window === "undefined") {
         return {};
@@ -144,13 +136,36 @@ export const anchorPosition = (node, opts) => {
     // placement always fire.
     let reportedSide = null;
     let reportedAlign = null;
+    /**
+     * The floating element's size as LAID OUT, never as PAINTED.
+     *
+     * `getBoundingClientRect()` reports the box AFTER transforms, and every
+     * anchored surface in this package is mid-entrance the first time this
+     * runs: the presence transition pins `transform: scale(0.92)` on the
+     * panel before this action's `update()` first fires. Measuring the
+     * painted box would size the panel 8% small, place it that much off its
+     * anchor, and leave it there — the entrance settles and nothing
+     * recomputes.
+     *
+     * `offsetWidth`/`offsetHeight` are layout metrics: a transform does not
+     * touch them. Zero means there is no layout box to read — a detached
+     * node, a `display: none` ancestor, or jsdom, where every element
+     * measures zero — so the rect answers for that case, and the two agree
+     * everywhere else.
+     */
+    function measureFloating() {
+        const rect = node.getBoundingClientRect();
+        return {
+            width: node.offsetWidth || rect.width,
+            height: node.offsetHeight || rect.height,
+        };
+    }
     function update() {
         const anchorEl = options.anchor();
         if (!anchorEl)
             return;
         const anchorRect = anchorEl.getBoundingClientRect();
-        const floatingRect = node.getBoundingClientRect();
-        const { x, y, side, align } = computePosition(anchorRect, { width: floatingRect.width, height: floatingRect.height }, {
+        const { x, y, side, align } = computePosition(anchorRect, measureFloating(), {
             side: options.side,
             align: options.align,
             offset: options.offset,
@@ -188,6 +203,16 @@ export const anchorPosition = (node, opts) => {
         destroy() {
             window.removeEventListener("scroll", update, { capture: true });
             window.removeEventListener("resize", update);
+            // Strips the inline position this action wrote. Unobservable in
+            // the common case, where destroy runs only as the node itself is
+            // removed, but this action is public and a caller that reuses the
+            // node past `destroy()` (or a future non-destroying disable path)
+            // should not find it frozen at stale fixed coordinates. Matches
+            // `attachAnchorPosition`'s `reset()` and the sibling `float`
+            // action, which already promises to strip the node's own styles.
+            node.style.position = "";
+            node.style.left = "";
+            node.style.top = "";
         },
     };
 };

package/dist/fancy-ui/_internals/autoscroll.d.ts

@@ -8,7 +8,11 @@
  * every scroll event. There is no programmatic-scroll flag to get out of sync:
  * whatever the scrollbar says is the truth.
  */
-import type { ActionReturn } from "svelte/action";
+/** Structural stand-in for Svelte's `ActionReturn`, framework-free. */
+interface ActionReturn<Params> {
+    update?: (params: Params) => void;
+    destroy?: () => void;
+}
 export interface AutoscrollOptions {
     /** Set to false to release the container and disconnect every listener. */
     enabled?: boolean;
@@ -28,3 +32,4 @@ export interface AutoscrollOptions {
 /** Jump a container to its bottom. Smooth by default. */
 export declare function scrollToBottom(node: HTMLElement, behavior?: ScrollBehavior): void;
 export declare function autoscroll(node: HTMLElement, opts?: AutoscrollOptions): ActionReturn<AutoscrollOptions>;
+export {};

package/dist/fancy-ui/_internals/diff.js

@@ -30,11 +30,13 @@ function gitHeaderPaths(line) {
     const rest = line.slice(GIT_HEADER.length);
     // Greedy on purpose: a path may itself contain " b/".
     const paired = /^a\/(.*) b\/(.*)$/.exec(rest);
+    // Both groups exist whenever the pattern matched at all.
     if (paired)
         return [cleanPath(paired[1], false), cleanPath(paired[2], false)];
     const parts = rest.split(" ");
     if (parts.length < 2)
         return [null, null];
+    // `parts[0]` exists: the length check on the line above passed.
     return [cleanPath(parts[0], true), cleanPath(parts.slice(1).join(" "), true)];
 }
 function openFile(state) {

package/dist/fancy-ui/_internals/dismissable.d.ts

@@ -1,4 +1,7 @@
-import type { Action } from "svelte/action";
+type DismissableAction<P> = (node: HTMLElement, params: P) => {
+    update?(params: P): void;
+    destroy?(): void;
+} | void;
 export interface DismissableOptions {
     /** Called when the node should be dismissed. */
     onDismiss: () => void;
@@ -25,4 +28,7 @@ export interface DismissableOptions {
      */
     active?: () => boolean;
 }
-export declare const dismissable: Action<HTMLElement, DismissableOptions>;
+export declare const dismissable: DismissableAction<DismissableOptions>;
+/** Test-only. Not exported from index.ts. */
+export declare function __dismissableLayerCount(): number;
+export {};

package/dist/fancy-ui/_internals/dismissable.js

@@ -20,8 +20,10 @@ export const dismissable = (node, opts) => {
     // the top is the one that owns the interaction.
     function isTopLayer() {
         for (let i = layers.length - 1; i >= 0; i -= 1) {
-            if (layers[i].isActive())
-                return layers[i].node === node;
+            // In range by the loop bounds; spelled out for index-access strictness.
+            const candidate = layers[i];
+            if (candidate.isActive())
+                return candidate.node === node;
         }
         return false;
     }
@@ -78,3 +80,7 @@ export const dismissable = (node, opts) => {
         },
     };
 };
+/** Test-only. Not exported from index.ts. */
+export function __dismissableLayerCount() {
+    return layers.length;
+}

package/dist/fancy-ui/_internals/float.d.ts

@@ -5,7 +5,10 @@
  * (menu, popover, completion list) to an anchor. The anchor can be a real
  * element or a virtual rect, which is how a caret-following menu is placed.
  */
-import type { ActionReturn } from "svelte/action";
+interface FloatActionReturn {
+    update?(options: FloatOptions): void;
+    destroy?(): void;
+}
 export type FloatPlacement = "top" | "bottom" | "top-start" | "bottom-start" | "top-end" | "bottom-end";
 export interface FloatRect {
     x: number;
@@ -43,4 +46,5 @@ export declare function computeFloatPosition(anchor: FloatRect, float: FloatSize
     left: number;
     placement: FloatPlacement;
 };
-export declare function float(node: HTMLElement, opts: FloatOptions): ActionReturn<FloatOptions>;
+export declare function float(node: HTMLElement, opts: FloatOptions): FloatActionReturn;
+export {};

package/dist/fancy-ui/_internals/focus-trap.d.ts

@@ -1,4 +1,3 @@
-import type { Action } from "svelte/action";
 export interface FocusTrapOptions {
     /** Element to focus when the trap activates. Defaults to the first focusable descendant of node. */
     initialFocus?: HTMLElement | null;
@@ -51,4 +50,15 @@ export interface FocusTrapOptions {
      */
     onActivate?: (returnFocusNow: () => void, rearm: () => void) => void;
 }
-export declare const focusTrap: Action<HTMLElement, FocusTrapOptions | undefined>;
+/**
+ * Structural stand-in for the framework's action type. This module is a shared
+ * core (identical bytes in every framework package, gated by shared-cores.json at
+ * the repo root), so it must not import framework types; the shape below is what
+ * every framework's action/attach contract expects.
+ */
+type FocusTrapAction = (node: HTMLElement, opts?: FocusTrapOptions) => {
+    update?: (opts: FocusTrapOptions) => void;
+    destroy?: () => void;
+} | void;
+export declare const focusTrap: FocusTrapAction;
+export {};

package/dist/fancy-ui/_internals/focus-trap.js

@@ -27,21 +27,42 @@
 // regardless of how the framework schedules effects across a parent/child
 // pair, which is what actually avoids this. `dialog/DialogSurface.svelte`
 // is the reference example.
+// Every branch carries the `tabindex="-1"` exclusion, not just the generic
+// `[tabindex]` one: a native control removed from the tab order is skipped by
+// the browser's own Tab, so counting it as the first/last tabbable item lets
+// Tab from its neighbour go uncaught and walk straight out of the trap.
 const FOCUSABLE_SELECTOR = [
     "button:not([disabled])",
     "[href]:not([disabled])",
     "input:not([disabled])",
     "select:not([disabled])",
     "textarea:not([disabled])",
-    '[tabindex]:not([tabindex="-1"]):not([disabled])',
-].join(", ");
+    "[tabindex]:not([disabled])",
+]
+    .map((selector) => `${selector}:not([tabindex="-1"])`)
+    .join(", ");
 function isVisible(el) {
     // offsetParent/getClientRects are unusable under jsdom, so rely on the
     // hidden attribute and computed styles, which jsdom does implement.
     if (el.hidden || el.closest("[hidden]") !== null)
         return false;
-    const style = getComputedStyle(el);
-    return style.display !== "none" && style.visibility !== "hidden";
+    // `visibility` INHERITS, so the element's own computed value already
+    // accounts for a hidden ancestor — and, just as importantly, for a
+    // descendant that opts back in with `visibility: visible`, which really is
+    // focusable and must not be filtered out.
+    if (getComputedStyle(el).visibility === "hidden")
+        return false;
+    // `display` does NOT inherit: a control inside a `display: none` ancestor
+    // still computes its own `display` as `block`/`inline` and looks perfectly
+    // visible in isolation, while the whole subtree is absent from the layout
+    // tree and `.focus()` on it is a silent no-op. Treating it as focusable
+    // let the trap "focus" a control that never took focus — leaving focus
+    // outside the modal, which is the one thing this action exists to prevent.
+    for (let node = el; node; node = node.parentElement) {
+        if (getComputedStyle(node).display === "none")
+            return false;
+    }
+    return true;
 }
 function getFocusableElements(node) {
     return Array.from(node.querySelectorAll(FOCUSABLE_SELECTOR)).filter(isVisible);
@@ -165,6 +186,9 @@ export const focusTrap = (node, opts = {}) => {
         }
         const first = focusable[0];
         const last = focusable[focusable.length - 1];
+        // The length check above guarantees both; spelled out for index-access strictness.
+        if (!first || !last)
+            return;
         const active = document.activeElement;
         if (event.shiftKey) {
             if (active === first || !node.contains(active)) {

package/dist/fancy-ui/_internals/host.js

@@ -36,7 +36,8 @@ export function hostOf(url) {
         if (!match)
             return "";
         // Whatever is left has to look like a host, or we are just echoing the
-        // path of a relative link back at the reader.
+        // path of a relative link back at the reader. Group 1 exists: `match`
+        // was checked truthy on the line above and the pattern has one group.
         const host = match[1].split("@").pop();
         return host.includes(".") ? stripWww(host) : "";
     }

package/dist/fancy-ui/_internals/listbox.svelte.js

@@ -77,8 +77,24 @@ export function createListbox(options) {
         // `setActive(index)` call carries no implied direction to hunt a
         // substitute in, so the safe answer is to do nothing rather than
         // guess one.
-        if (index !== -1 && !isEnabled(index))
-            return;
+        //
+        // Bounds come first, before `enabled` is consulted at all: an index
+        // outside `0..count()-1` names no option, so there is nothing for a
+        // caller-supplied `enabled(index)` to answer about — it would be asked
+        // about a row that does not exist, and a permissive predicate (the
+        // default `?? true`) would wave it straight through to
+        // `commitActive`. Publishing it puts an option id with no matching
+        // row in `aria-activedescendant`, which a screen reader reads as a
+        // dangling reference. `move`, `moveToEdge` and `typeahead` are all
+        // bounded by `count()` already; `setActive` is the one way in that
+        // takes an index from outside the module.
+        if (index !== -1) {
+            const count = options.count();
+            if (index < 0 || index >= count)
+                return;
+            if (!isEnabled(index))
+                return;
+        }
         commitActive(index);
     }
     function move(delta) {

package/dist/fancy-ui/_internals/markdown.d.ts

@@ -12,6 +12,11 @@
  *
  * Every entry point is total: it returns a value for any input, including
  * half-written markdown from a stream.
+ *
+ * The non-null assertions below are all of one kind: an index read inside a
+ * loop already bounded by `i < lines.length` / `i < src.length`, or a capture
+ * group of a regex whose match was checked truthy on the line above. Every
+ * invariant is visible next to the assertion that relies on it.
  */
 export type InlineToken = {
     type: "text";

package/dist/fancy-ui/_internals/markdown.js

@@ -12,6 +12,11 @@
  *
  * Every entry point is total: it returns a value for any input, including
  * half-written markdown from a stream.
+ *
+ * The non-null assertions below are all of one kind: an index read inside a
+ * loop already bounded by `i < lines.length` / `i < src.length`, or a capture
+ * group of a regex whose match was checked truthy on the line above. Every
+ * invariant is visible next to the assertion that relies on it.
  */
 const ALLOWED_SCHEMES = new Set(["http", "https", "mailto"]);
 const ESCAPABLE = "\\`*_{}[]()#+-.!>~|";

package/dist/fancy-ui/_internals/motion/anchored.d.ts

@@ -31,7 +31,6 @@
  * SSR: nothing here touches `window` at module scope. `prefersReducedMotion()`
  * does, but a transition function's body only ever runs in the browser.
  */
-import type { TransitionConfig } from "svelte/transition";
 import type { Side, Align } from "../anchor-position.js";
 /** Params for `anchored`. Every field is optional; the defaults ARE the
  * anchored rung, so `in:anchored={{ side: resolvedSide }}` is the whole
@@ -75,6 +74,15 @@ export interface AnchoredParams {
  */
 export declare function prefersReducedMotion(): boolean;
 export declare function originFor(side: Side, align?: Align): string;
+/** Structural stand-in for `svelte/transition`'s `TransitionConfig`, so this
+ * file has no framework import. Shape-compatible with the real type. */
+export interface TransitionConfig {
+    delay?: number;
+    duration?: number;
+    easing?: (t: number) => number;
+    css?: (t: number, u: number) => string;
+    tick?: (t: number, u: number) => void;
+}
 /**
  * A css-only, direction-aware Svelte transition for an anchored floating
  * surface. Entrance: `JS_EASINGS.out` over `DURATIONS.fast`, growing from

package/dist/fancy-ui/_internals/motion/in-view.d.ts

@@ -8,7 +8,12 @@
  * this is the single, parameterized version those four independently
  * reinvented, written once for the ten components that need it here.
  */
-import type { Action } from "svelte/action";
+/** Structural stand-in for `svelte/action`'s `Action` type, kept
+ * framework-free so this core has no runtime or type import from svelte. */
+type ActionLike<Node extends Element, Params> = (node: Node, params: Params) => {
+    update?(params: Params): void;
+    destroy?(): void;
+} | void;
 export interface InViewOptions {
     /** Disconnect after the first time the node becomes visible. Default true. */
     once?: boolean;
@@ -21,4 +26,5 @@ export interface InViewOptions {
     /** Called with the current intersecting state on every observer callback. */
     onChange: (inView: boolean, entry?: IntersectionObserverEntry) => void;
 }
-export declare const inView: Action<Element, InViewOptions>;
+export declare const inView: ActionLike<Element, InViewOptions>;
+export {};

package/dist/fancy-ui/_internals/motion/presets.d.ts

@@ -1,15 +1,15 @@
 /**
  * The single source of preset GEOMETRY for the motion family — what moves,
  * and how far, for each named look. Two consumers read this table for two
- * different purposes: Reveal's CSS (hand-written `<style>` rules keyed on
+ * different purposes: Reveal's CSS (hand-written rules keyed on
  * `data-preset`, built to match this table by hand) and `transitions.ts`'s
- * `preset()` (which reads this table directly at runtime to build a Svelte
- * `TransitionConfig`). Keeping the numbers in exactly one place is the
+ * `preset()` (which reads this table directly at runtime to build a
+ * `TransitionSpec`). Keeping the numbers in exactly one place is the
  * whole point of this file existing separately from `transitions.ts` — a
  * geometry change here is the one edit that keeps both in sync in theory,
- * even though Reveal's CSS side still has to be updated by hand (this repo
- * ships no shared runtime stylesheet; see `tokens.ts`'s header comment for
- * the same caveat applied to durations/easings).
+ * even though Reveal's CSS side still has to be updated by hand (this
+ * package ships no shared runtime stylesheet for motion; see `tokens.ts`'s
+ * header comment for the same caveat applied to durations/easings).
  */
 export type PresetName = "fade" | "fade-up" | "fade-down" | "fade-left" | "fade-right" | "scale" | "blur" | "zoom";
 /** Reveal never offers `blur`/`zoom` — a per-child `filter` is expensive