fancy-ui-svelte 0.9.1 → 0.10.0

package/README.md

@@ -1,3 +1,7 @@
+<p align="center">
+  <img src=".github/logo.png" alt="FancyUI" width="88" height="88" />
+</p>
+
 # fancy-ui
 
 Beautiful animation and UI components for **Svelte 5**.
@@ -5,7 +9,7 @@ Beautiful animation and UI components for **Svelte 5**.
 ![Svelte 5](https://img.shields.io/badge/Svelte-5-FF3E00?logo=svelte&logoColor=white)
 ![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-61-8B5CF6)
+![Components](https://img.shields.io/badge/Components-132-8B5CF6)
 ![MIT License](https://img.shields.io/badge/License-MIT-green)
 
 <p align="center">
@@ -32,107 +36,9 @@ Beautiful animation and UI components for **Svelte 5**.
 - **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
-- **61 Components** &mdash; Buttons, text animations, backgrounds, effects, and more
+- **132 Components** &mdash; Core primitives (forms, navigation, overlays) alongside buttons, text animations, backgrounds and effects
 - **Dark Mode** &mdash; All components support light and dark themes
-- **Tested** &mdash; 600+ unit tests with Vitest and Testing Library
-
-## Components
-
-### Buttons
-
-| Component              | Description                              | Demo                                                                       |
-| ---------------------- | ---------------------------------------- | -------------------------------------------------------------------------- |
-| RainbowButton          | Animated rainbow gradient border effect  | [Demo](https://fancy-ui.rama.app/docs/components/rainbow-button)           |
-| RippleButton           | Ripple click effect                      | [Demo](https://fancy-ui.rama.app/docs/components/ripple-button)            |
-| ShimmerButton          | Rotating conic-gradient shimmer border   | [Demo](https://fancy-ui.rama.app/docs/components/shimmer-button)           |
-| GradientButton         | Rotating conic-gradient rainbow border   | [Demo](https://fancy-ui.rama.app/docs/components/gradient-button)          |
-| InteractiveHoverButton | Hover effect revealing alternate content | [Demo](https://fancy-ui.rama.app/docs/components/interactive-hover-button) |
-
-### Cards
-
-| Component           | Description                                                         | Demo                                                                    |
-| ------------------- | ------------------------------------------------------------------- | ----------------------------------------------------------------------- |
-| AppleCardCarousel   | Horizontal card carousel with spring-animated full-screen expansion | [Demo](https://fancy-ui.rama.app/docs/components/apple-card-carousel)   |
-| Card3D              | 3D tilt card with mouse tracking                                    | [Demo](https://fancy-ui.rama.app/docs/components/card-3d)               |
-| CardSpotlight       | Spotlight effect following mouse                                    | [Demo](https://fancy-ui.rama.app/docs/components/card-spotlight)        |
-| DirectionAwareHover | Overlay slides in from mouse entry direction                        | [Demo](https://fancy-ui.rama.app/docs/components/direction-aware-hover) |
-| FlipCard            | Two-sided card with flip animation                                  | [Demo](https://fancy-ui.rama.app/docs/components/flip-card)             |
-| GlareCard           | Glare reflection effect on hover                                    | [Demo](https://fancy-ui.rama.app/docs/components/glare-card)            |
-| TextRevealCard      | Text reveal on hover                                                | [Demo](https://fancy-ui.rama.app/docs/components/text-reveal-card)      |
-
-### Text & Typography
-
-| Component          | Description                                                                    | Demo                                                                   |
-| ------------------ | ------------------------------------------------------------------------------ | ---------------------------------------------------------------------- |
-| BlurReveal         | Scroll-triggered blur-to-clear reveal                                          | [Demo](https://fancy-ui.rama.app/docs/components/blur-reveal)          |
-| BoxReveal          | Sliding colored box reveal animation                                           | [Demo](https://fancy-ui.rama.app/docs/components/box-reveal)           |
-| ColourfulText      | Per-character color animation                                                  | [Demo](https://fancy-ui.rama.app/docs/components/colourful-text)       |
-| ContainerTextFlip  | Text flipping inside a container                                               | [Demo](https://fancy-ui.rama.app/docs/components/container-text-flip)  |
-| DisplacementText   | 3D text with WebGL displacement that follows the cursor using Three.js shaders | [Demo](https://fancy-ui.rama.app/docs/components/displacement-text)    |
-| EditorialEngine    | Live magazine layout with multi-column text flowing around draggable orbs      | [Demo](https://fancy-ui.rama.app/docs/components/editorial-engine)     |
-| FlipWords          | Cycling word animation with per-letter effects                                 | [Demo](https://fancy-ui.rama.app/docs/components/flip-words)           |
-| HyperText          | Character scramble on hover                                                    | [Demo](https://fancy-ui.rama.app/docs/components/hyper-text)           |
-| LetterPullup       | Staggered letter pull-up animation                                             | [Demo](https://fancy-ui.rama.app/docs/components/letter-pullup)        |
-| LineReveal         | Staggered line-by-line text reveal                                             | [Demo](https://fancy-ui.rama.app/docs/components/line-reveal)          |
-| LineShadowText     | Text with animated line shadow                                                 | [Demo](https://fancy-ui.rama.app/docs/components/line-shadow-text)     |
-| LiquidText         | Big text that liquefies along the cursor's path via a WebGL fluid solver       | [Demo](https://fancy-ui.rama.app/docs/components/liquid-text)          |
-| NumberTicker       | Animated number counter with easing                                            | [Demo](https://fancy-ui.rama.app/docs/components/number-ticker)        |
-| SparklesText       | Animated SVG sparkle stars overlay                                             | [Demo](https://fancy-ui.rama.app/docs/components/sparkles-text)        |
-| TerminalText       | Terminal-style text streamer with blinking cursor and glitch effect            | [Demo](https://fancy-ui.rama.app/docs/components/terminal-text)        |
-| TextGenerateEffect | Word-by-word text generation effect                                            | [Demo](https://fancy-ui.rama.app/docs/components/text-generate-effect) |
-
-### Backgrounds
-
-| Component              | Description                                                                 | Demo                                                                       |
-| ---------------------- | --------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
-| FallingStarsBg         | Canvas 3D starfield with motion trails                                      | [Demo](https://fancy-ui.rama.app/docs/components/bg-falling-stars)         |
-| FlickeringGrid         | Canvas grid with flickering opacity                                         | [Demo](https://fancy-ui.rama.app/docs/components/flickering-grid)          |
-| InteractiveGridPattern | SVG grid with hover highlights                                              | [Demo](https://fancy-ui.rama.app/docs/components/interactive-grid-pattern) |
-| MatrixRain             | Canvas-based falling glyph rain with configurable color, speed, and density | [Demo](https://fancy-ui.rama.app/docs/components/matrix-rain)              |
-| StarsBackground        | Starfield with parallax mouse tracking                                      | [Demo](https://fancy-ui.rama.app/docs/components/bg-stars)                 |
-
-### Effects & Animations
-
-| Component        | Description                                                    | Demo                                                                 |
-| ---------------- | -------------------------------------------------------------- | -------------------------------------------------------------------- |
-| AnimatedBeam     | SVG beams connecting elements                                  | [Demo](https://fancy-ui.rama.app/docs/components/animated-beam)      |
-| BorderBeam       | Beam effect traveling around borders                           | [Demo](https://fancy-ui.rama.app/docs/components/border-beam)        |
-| Confetti         | Configurable confetti burst                                    | [Demo](https://fancy-ui.rama.app/docs/components/confetti)           |
-| FluidCursor      | WebGL fluid simulation following cursor                        | [Demo](https://fancy-ui.rama.app/docs/components/fluid-cursor)       |
-| FrostedGlass     | Frosted glass surface with organic turbulence-noise refraction | [Demo](https://fancy-ui.rama.app/docs/components/frosted-glass)      |
-| GlowBorder       | Animated glowing border with gradients                         | [Demo](https://fancy-ui.rama.app/docs/components/glow-border)        |
-| GlowingEffect    | Glowing highlight on hover                                     | [Demo](https://fancy-ui.rama.app/docs/components/glowing-effect)     |
-| ImageTrailCursor | Cursor-following image trail (8 variants)                      | [Demo](https://fancy-ui.rama.app/docs/components/image-trail-cursor) |
-| LiquidGlass      | Liquid glass morphism effect                                   | [Demo](https://fancy-ui.rama.app/docs/components/liquid-glass)       |
-| Meteors          | Animated meteor shower effect                                  | [Demo](https://fancy-ui.rama.app/docs/components/meteors)            |
-| NeonBorder       | Dual-color neon glow border                                    | [Demo](https://fancy-ui.rama.app/docs/components/neon-border)        |
-| Ripple           | Expanding ripple rings                                         | [Demo](https://fancy-ui.rama.app/docs/components/ripple)             |
-| SmoothCursor     | Smooth lagging cursor follower                                 | [Demo](https://fancy-ui.rama.app/docs/components/smooth-cursor)      |
-| Sparkles         | Particle sparkle canvas                                        | [Demo](https://fancy-ui.rama.app/docs/components/sparkles)           |
-| TracingBeam      | Scroll-driven tracing beam                                     | [Demo](https://fancy-ui.rama.app/docs/components/tracing-beam)       |
-
-### Layout
-
-| Component       | Description                                   | Demo                                                               |
-| --------------- | --------------------------------------------- | ------------------------------------------------------------------ |
-| BentoGrid       | Bento-style responsive grid layout            | [Demo](https://fancy-ui.rama.app/docs/components/bento-grid)       |
-| Book            | 3D book flip animation                        | [Demo](https://fancy-ui.rama.app/docs/components/book)             |
-| ContainerScroll | 3D scroll perspective container               | [Demo](https://fancy-ui.rama.app/docs/components/container-scroll) |
-| Focus           | Focus-expand card layout                      | [Demo](https://fancy-ui.rama.app/docs/components/focus)            |
-| Marquee         | Infinite scrolling for text, images, or cards | [Demo](https://fancy-ui.rama.app/docs/components/marquee)          |
-
-### Navigation & Display
-
-| Component            | Description                                                             | Demo                                                                    |
-| -------------------- | ----------------------------------------------------------------------- | ----------------------------------------------------------------------- |
-| AnimatedTestimonials | Testimonial carousel with smooth slide animations and optional autoplay | [Demo](https://fancy-ui.rama.app/docs/components/animated-testimonials) |
-| AnimatedTooltip      | Avatar row with mouse-following tooltips                                | [Demo](https://fancy-ui.rama.app/docs/components/animated-tooltip)      |
-| Compare              | Before/after image comparison slider                                    | [Demo](https://fancy-ui.rama.app/docs/components/compare)               |
-| Dock                 | Icon dock where items magnify as the cursor approaches                  | [Demo](https://fancy-ui.rama.app/docs/components/dock)                  |
-| LineHoverLink        | Link with 11 animated underline hover effects, pure CSS                 | [Demo](https://fancy-ui.rama.app/docs/components/line-hover-link)       |
-| LogoCloud            | Marquee, grid, and icon logo layouts                                    | [Demo](https://fancy-ui.rama.app/docs/components/logo-cloud)            |
-| NoiseReveal          | WebGL image reveal with a Perlin-noise dissolve mask                    | [Demo](https://fancy-ui.rama.app/docs/components/noise-reveal)          |
-| Timeline             | Vertical timeline with scroll-driven progress                           | [Demo](https://fancy-ui.rama.app/docs/components/timeline)              |
+- **Tested** &mdash; 2,900+ unit tests with Vitest and Testing Library
 
 ## Quick Start
 
@@ -245,7 +151,7 @@ Component tests are colocated with their component (see `RainbowButton.test.ts`
 
 ## Contributing
 
-Contributions are welcome! 61 components and counting — PRs for new components, bug fixes, and improvements are appreciated.
+Contributions are welcome! 132 components and counting — PRs for new components, bug fixes, and improvements are appreciated.
 
 ### Adding a new component
 

package/dist/fancy-ui/_internals/FieldConsumer.test.svelte

@@ -0,0 +1,25 @@
+<!--
+  Test-only rig: a stand-in for "any control in this wave". It calls
+  getField() the same way a real one would and dumps the result onto its own
+  attributes so a test can read it back — proving `undefined` outside a
+  provider, and the exact object a provider published inside one. Not
+  exported from index.ts, and not collected by Vitest (the run includes
+  `*.test.ts` only).
+-->
+<script lang="ts">
+	import { getField } from "./field.svelte.js";
+
+	const field = getField();
+</script>
+
+<div
+	data-testid="consumer"
+	data-has-field={field !== undefined}
+	data-control-id={field?.controlId}
+	data-label-id={field?.labelId}
+	data-described-by={field?.describedBy}
+	data-invalid={field?.invalid}
+	data-valid={field?.valid}
+	data-required={field?.required}
+	data-disabled={field?.disabled}
+></div>

package/dist/fancy-ui/_internals/FieldConsumer.test.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const FieldConsumer: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type FieldConsumer = InstanceType<typeof FieldConsumer>;
+export default FieldConsumer;

package/dist/fancy-ui/_internals/FieldHarness.test.svelte

@@ -0,0 +1,37 @@
+<!--
+  Test-only rig: publishes `field` under FIELD_KEY when given, then renders a
+  FieldConsumer beneath it. `setContext`/`getContext` only resolve through a
+  real component tree, so proving getField() sees a provider's value — and
+  sees nothing at all with no `field` prop — needs two real component
+  instances rather than a raw snippet. Not exported from index.ts, and not
+  collected by Vitest (the run includes `*.test.ts` only).
+-->
+<script lang="ts">
+	import { setContext, untrack } from "svelte";
+	import { FIELD_KEY, type FieldContext } from "./field.svelte.js";
+	import FieldConsumer from "./FieldConsumer.test.svelte";
+
+	interface Props {
+		/** Omit to render the consumer with no provider above it at all. */
+		field?: FieldContext;
+	}
+
+	let { field }: Props = $props();
+
+	// setContext must run synchronously during this component's own
+	// initialization, never inside an effect — so this deliberately reads
+	// `field` exactly once, capturing whatever the harness was mounted with.
+	// Publishing `undefined` explicitly is indistinguishable from publishing
+	// nothing at all: getField() reads back `undefined` from the context map
+	// either way, which is exactly the "no provider" case this harness needs
+	// to produce. Wrapped in `untrack` so the compiler's
+	// `state_referenced_locally` warning — which exists to catch a *reactive*
+	// read that silently only fires once — doesn't fire on a read that is
+	// deliberately one-shot.
+	setContext(
+		FIELD_KEY,
+		untrack(() => field)
+	);
+</script>
+
+<FieldConsumer />

package/dist/fancy-ui/_internals/FieldHarness.test.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type FieldContext } from "./field.svelte.js";
+interface Props {
+    /** Omit to render the consumer with no provider above it at all. */
+    field?: FieldContext;
+}
+declare const FieldHarness: import("svelte").Component<Props, {}, "">;
+type FieldHarness = ReturnType<typeof FieldHarness>;
+export default FieldHarness;

package/dist/fancy-ui/_internals/Markdown.svelte

@@ -0,0 +1,227 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { BlockToken } from "./markdown.js";
+
+	export interface MarkdownProps {
+		/** Markdown source. Safe to update on every streamed chunk. */
+		text?: string;
+		class?: string;
+		/**
+		 * Already-parsed blocks, used when the component renders itself for a
+		 * blockquote. Consumers pass `text`.
+		 */
+		blocks?: BlockToken[];
+		/**
+		 * Rendered inline at the very end of the document — a streaming caret, say.
+		 * Every block here is block-level, so a caret placed after the component
+		 * would sit on its own line instead of trailing the last character; this
+		 * puts it inside the last paragraph, heading or list item instead. A
+		 * document ending in code, a table, a rule, or nothing at all has no inline
+		 * tail to hold it, and drops it.
+		 */
+		trailingCursor?: Snippet;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "../../utils.js";
+	import { parseMarkdown } from "./markdown.js";
+	import MarkdownInline from "./MarkdownInline.svelte";
+	import Self from "./Markdown.svelte";
+
+	let { text = "", class: className, blocks, trailingCursor }: MarkdownProps = $props();
+
+	let nodes = $derived(blocks ?? parseMarkdown(text));
+	let lastIndex = $derived(nodes.length - 1);
+</script>
+
+<div class={cn("ft-md", className)}>
+	{#each nodes as block, index}
+		{@const cursor = index === lastIndex ? trailingCursor : undefined}
+		{#if block.type === "paragraph"}
+			<p class="ft-md-p">
+				<MarkdownInline tokens={block.children} />{#if cursor}{@render cursor()}{/if}
+			</p>
+		{:else if block.type === "heading"}
+			<svelte:element this={`h${block.depth}`} class="ft-md-h" data-depth={block.depth}
+				><MarkdownInline
+					tokens={block.children}
+				/>{#if cursor}{@render cursor()}{/if}</svelte:element
+			>
+		{:else if block.type === "code"}
+			<pre class="ft-md-pre" data-lang={block.lang || null}><code>{block.text}</code></pre>
+		{:else if block.type === "list"}
+			{#if block.ordered}
+				<ol class="ft-md-ol" start={block.start}>
+					{#each block.items as item, itemIndex}
+						<li>
+							<MarkdownInline
+								tokens={item}
+							/>{#if cursor && itemIndex === block.items.length - 1}{@render cursor()}{/if}
+						</li>
+					{/each}
+				</ol>
+			{:else}
+				<ul class="ft-md-ul">
+					{#each block.items as item, itemIndex}
+						<li>
+							<MarkdownInline
+								tokens={item}
+							/>{#if cursor && itemIndex === block.items.length - 1}{@render cursor()}{/if}
+						</li>
+					{/each}
+				</ul>
+			{/if}
+		{:else if block.type === "blockquote"}
+			<blockquote class="ft-md-quote">
+				<Self blocks={block.children} trailingCursor={cursor} />
+			</blockquote>
+		{:else if block.type === "table"}
+			<div class="ft-md-table-scroll">
+				<table class="ft-md-table">
+					<thead>
+						<tr>
+							{#each block.header as cell, i}
+								<th style:text-align={block.align[i] ?? undefined}>
+									<MarkdownInline tokens={cell} />
+								</th>
+							{/each}
+						</tr>
+					</thead>
+					<tbody>
+						{#each block.rows as row}
+							<tr>
+								{#each row as cell, i}
+									<td style:text-align={block.align[i] ?? undefined}>
+										<MarkdownInline tokens={cell} />
+									</td>
+								{/each}
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			</div>
+		{:else if block.type === "hr"}
+			<hr class="ft-md-hr" />
+		{/if}
+	{/each}
+</div>
+
+<style>
+	/*
+	 * Typographic normalization, not a theme. Rendered markdown has to stay
+	 * legible in a host app whose reset has stripped list markers and heading
+	 * scale, so these defaults restore structure and nothing else — no palette,
+	 * no font stack, no spacing opinions beyond the flow rhythm. Every value the
+	 * host is likely to disagree with reads from a custom property first, and
+	 * colours are mixed from `currentColor` so a dark surface needs no override.
+	 *
+	 * Styles are scoped. The blockquote branch renders this same component
+	 * recursively, and a recursive instance is still this component class, so it
+	 * carries the same scoping class and inherits every rule below — no :global
+	 * escape needed. Inline marks (code spans, links, emphasis) belong to
+	 * MarkdownInline and are styled there.
+	 */
+
+	.ft-md {
+		line-height: 1.6;
+	}
+
+	/* One rhythm for every block, whatever margins the UA or reset supplies. */
+	.ft-md > * {
+		margin: 0;
+	}
+
+	.ft-md > * + * {
+		margin-block-start: 0.75em;
+	}
+
+	.ft-md > * + .ft-md-h {
+		margin-block-start: 1.25em;
+	}
+
+	.ft-md > * + .ft-md-hr,
+	.ft-md > .ft-md-hr + * {
+		margin-block-start: 1em;
+	}
+
+	.ft-md-h {
+		font-weight: 600;
+		line-height: 1.25;
+	}
+
+	.ft-md-h[data-depth="1"] {
+		font-size: 1.5em;
+	}
+
+	.ft-md-h[data-depth="2"] {
+		font-size: 1.3em;
+	}
+
+	.ft-md-h[data-depth="3"] {
+		font-size: 1.15em;
+	}
+
+	.ft-md-h[data-depth="4"] {
+		font-size: 1.05em;
+	}
+
+	.ft-md-h[data-depth="5"] {
+		font-size: 1em;
+	}
+
+	.ft-md-h[data-depth="6"] {
+		font-size: 0.95em;
+	}
+
+	.ft-md-ul {
+		list-style: disc;
+		padding-inline-start: 1.5em;
+	}
+
+	.ft-md-ol {
+		list-style: decimal;
+		padding-inline-start: 1.5em;
+	}
+
+	.ft-md-quote {
+		border-inline-start: 3px solid
+			var(--ft-md-quote-border, color-mix(in oklab, currentColor 25%, transparent));
+		padding-inline-start: 0.75em;
+		color: var(--ft-md-quote-color, color-mix(in oklab, currentColor 75%, transparent));
+	}
+
+	.ft-md-pre {
+		background: var(--ft-md-code-bg, color-mix(in oklab, currentColor 8%, transparent));
+		border-radius: 6px;
+		padding: 0.75em 1em;
+		overflow-x: auto;
+		font-size: 0.9em;
+		line-height: 1.5;
+	}
+
+	/* The wrapper scrolls so a wide table never widens the whole message. */
+	.ft-md-table-scroll {
+		overflow-x: auto;
+	}
+
+	.ft-md-table {
+		border-collapse: collapse;
+	}
+
+	.ft-md-table th,
+	.ft-md-table td {
+		border: 1px solid var(--ft-md-border, color-mix(in oklab, currentColor 15%, transparent));
+		padding: 0.35em 0.6em;
+	}
+
+	.ft-md-table th {
+		font-weight: 600;
+	}
+
+	.ft-md-hr {
+		border: 0;
+		border-block-start: 1px solid
+			var(--ft-md-border, color-mix(in oklab, currentColor 15%, transparent));
+	}
+</style>

package/dist/fancy-ui/_internals/Markdown.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { Snippet } from "svelte";
+import type { BlockToken } from "./markdown.js";
+export interface MarkdownProps {
+    /** Markdown source. Safe to update on every streamed chunk. */
+    text?: string;
+    class?: string;
+    /**
+     * Already-parsed blocks, used when the component renders itself for a
+     * blockquote. Consumers pass `text`.
+     */
+    blocks?: BlockToken[];
+    /**
+     * Rendered inline at the very end of the document — a streaming caret, say.
+     * Every block here is block-level, so a caret placed after the component
+     * would sit on its own line instead of trailing the last character; this
+     * puts it inside the last paragraph, heading or list item instead. A
+     * document ending in code, a table, a rule, or nothing at all has no inline
+     * tail to hold it, and drops it.
+     */
+    trailingCursor?: Snippet;
+}
+declare const Markdown: import("svelte").Component<MarkdownProps, {}, "">;
+type Markdown = ReturnType<typeof Markdown>;
+export default Markdown;

package/dist/fancy-ui/_internals/MarkdownInline.svelte

@@ -0,0 +1,56 @@
+<script lang="ts" module>
+	import type { InlineToken } from "./markdown.js";
+
+	export interface MarkdownInlineProps {
+		tokens: InlineToken[];
+	}
+</script>
+
+<script lang="ts">
+	import Self from "./MarkdownInline.svelte";
+
+	let { tokens }: MarkdownInlineProps = $props();
+</script>
+
+<!--
+	Whitespace between the branches below would show up in the rendered text, so
+	the markup stays tightly packed.
+-->
+{#each tokens as token}{#if token.type === "text"}{token.text}{:else if token.type === "code"}<code
+			class="ft-md-code">{token.text}</code
+		>{:else if token.type === "strong"}<strong><Self tokens={token.children} /></strong
+		>{:else if token.type === "em"}<em><Self tokens={token.children} /></em
+		>{:else if token.type === "del"}<del><Self tokens={token.children} /></del
+		>{:else if token.type === "link" && token.href !== null}<a
+			class="ft-md-link"
+			href={token.href}
+			rel="noopener noreferrer nofollow ugc"
+			target="_blank"><Self tokens={token.children} /></a
+		>{:else}<Self tokens={token.children} />{/if}{/each}
+
+<style>
+	/*
+	 * The inline half of the markdown defaults; block elements are styled in
+	 * Markdown.svelte. Both marks below go invisible under a reset that strips
+	 * link underlines and code backgrounds, which is what makes them worth
+	 * shipping. Colours mix from `currentColor` so they follow the surface, and
+	 * both read from a custom property first so a host can restyle them.
+	 */
+
+	.ft-md-code {
+		background: var(--ft-md-code-bg, color-mix(in oklab, currentColor 8%, transparent));
+		border-radius: 4px;
+		padding: 0.1em 0.35em;
+		font-size: 0.9em;
+	}
+
+	.ft-md-link {
+		color: var(--ft-md-link, inherit);
+		text-decoration: underline;
+		text-underline-offset: 2px;
+	}
+
+	.ft-md-link:hover {
+		opacity: 0.8;
+	}
+</style>

package/dist/fancy-ui/_internals/MarkdownInline.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { InlineToken } from "./markdown.js";
+export interface MarkdownInlineProps {
+    tokens: InlineToken[];
+}
+declare const MarkdownInline: import("svelte").Component<MarkdownInlineProps, {}, "">;
+type MarkdownInline = ReturnType<typeof MarkdownInline>;
+export default MarkdownInline;

package/dist/fancy-ui/_internals/StreamText.svelte

@@ -0,0 +1,64 @@
+<script lang="ts" module>
+	/**
+	 * Props for StreamText
+	 */
+	export interface StreamTextProps {
+		/** The whole text so far. Hand over a longer string to stream more in. */
+		text: string;
+		/** How long a newly arrived chunk stays tinted, in ms. */
+		settleMs?: number;
+		/** Additional CSS classes */
+		class?: string;
+	}
+</script>
+
+<script lang="ts">
+	import { onDestroy, untrack } from "svelte";
+	import { cn } from "../../utils.js";
+	import { createTextStream } from "./stream-text.svelte.js";
+
+	let { text, settleMs = 350, class: className }: StreamTextProps = $props();
+
+	// Built once, with the initial text already settled: the server renders the
+	// whole string as a single plain span and only later growth animates. Reading
+	// the text here is meant to capture its first value, hence the untrack —
+	// `settleMs` goes in as a getter so a later duration reaches later chunks
+	// instead of leaving them on the mount-time timeout the CSS no longer matches.
+	const stream = untrack(() => createTextStream(text, { settleMs: () => settleMs }));
+
+	// The first run pushes the text the stream was built from, which is a no-op.
+	$effect(() => {
+		stream.push(text);
+	});
+
+	onDestroy(() => stream.destroy());
+</script>
+
+<span class={cn("ft-stream", className)} style="white-space: pre-wrap; --ft-settle: {settleMs}ms"
+	>{#each stream.segments as segment (segment.id)}<span class:ft-fresh={segment.fresh}
+			>{segment.text}</span
+		>{/each}</span
+>
+
+<style>
+	/*
+	 * Reduced motion gets plain text at its final colour: with the whole rule
+	 * behind the query there is no animation to shorten or fall back from.
+	 */
+	@media (prefers-reduced-motion: no-preference) {
+		.ft-fresh {
+			animation: ft-tint var(--ft-settle, 350ms) ease-out;
+		}
+
+		@keyframes ft-tint {
+			from {
+				color: var(--ft-tint-color, oklch(0.65 0.15 250));
+				opacity: 0.6;
+			}
+			to {
+				color: inherit;
+				opacity: 1;
+			}
+		}
+	}
+</style>

package/dist/fancy-ui/_internals/StreamText.svelte.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Props for StreamText
+ */
+export interface StreamTextProps {
+    /** The whole text so far. Hand over a longer string to stream more in. */
+    text: string;
+    /** How long a newly arrived chunk stays tinted, in ms. */
+    settleMs?: number;
+    /** Additional CSS classes */
+    class?: string;
+}
+declare const StreamText: import("svelte").Component<StreamTextProps, {}, "">;
+type StreamText = ReturnType<typeof StreamText>;
+export default StreamText;

package/dist/fancy-ui/_internals/StreamText.test.d.ts

@@ -0,0 +1 @@
+export {};