motion-brew 0.0.0-stage → 0.1.0

package/dist/components/context-menu/context-menu.d.ts

@@ -0,0 +1,59 @@
+/**
+ * ContextMenu
+ *
+ * Trigger: right click (plus long press and keys). Wraps any content; right
+ * clicking it (or a long press on touch, or Shift F10) opens a white menu at
+ * the pointer that springs out of that corner while its rows rise in. A soft
+ * gray pill glides between rows and each row's animated icon plays while it
+ * is hovered. Rows can show a shortcut, open a submenu that slides out beside
+ * them, roll to a done state in place (Copy link becomes Link copied with a
+ * check before the menu closes), or ask twice before a destructive action
+ * (Delete rolls to Click again to delete on a red tint). After a choice a
+ * small pill with a check confirms what happened. The arrow keys move through
+ * rows, Right and Left open and close the submenu, Enter chooses, and Escape
+ * or a click outside closes it. Reduced motion keeps the states without
+ * movement.
+ *
+ * Engine: motion/react (AnimatePresence for the menus and the toast,
+ * staggered variants, a layoutId hover pill, rolling labels) with animated
+ * icons from lucide-animated (MIT), vendored in src/icons.
+ */
+import * as React from "react";
+/** Any icon that can be told to play. The vendored animated icons all fit. */
+export type MenuIcon = React.ComponentType<{
+    active?: boolean;
+    className?: string;
+}>;
+export type ContextMenuItem = {
+    separator: true;
+} | {
+    id: string;
+    label: string;
+    icon?: MenuIcon;
+    /** Shown on the right, like "⌘C". */
+    shortcut?: string;
+    /** A nested menu that opens beside this row. */
+    items?: ContextMenuItem[];
+    /** Red tinted, for destructive actions. */
+    danger?: boolean;
+    /** Ask twice: the first press rolls the label to this. */
+    confirm?: string;
+    /** Roll to this label and icon in place before closing. */
+    done?: {
+        label: string;
+        icon?: MenuIcon;
+    };
+    /** Text for the small pill shown after it runs. */
+    feedback?: string;
+    onSelect?: () => void;
+};
+export interface ContextMenuProps {
+    /** The rows. Default a set of file actions. */
+    items?: ContextMenuItem[];
+    /** The area that opens the menu. Default a small file card. */
+    children?: React.ReactNode;
+    /** Accessible name for the area. Default `"File, right click for actions"`. */
+    label?: string;
+    className?: string;
+}
+export declare const ContextMenu: React.ForwardRefExoticComponent<ContextMenuProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/context-menu/index.d.ts

@@ -0,0 +1 @@
+export { ContextMenu, type ContextMenuProps, type ContextMenuItem, type MenuIcon, } from "./context-menu";

package/dist/components/contour-feature-card/contour-feature-card.d.ts

@@ -0,0 +1,36 @@
+/**
+ * ContourFeatureCard
+ *
+ * Trigger: hover and press (plus in view). A product feature card: a browser
+ * window with a small dashboard rises in front of a live topographic map.
+ * The map is drifting noise traced into contour lines (marching squares),
+ * with every fourth line a little heavier like the index lines on a real map.
+ * The pointer raises a soft hill, so the lines bend and crowd around it and
+ * light up near it; a press sends a ring of a wave out through the terrain,
+ * and while the pointer is away one rises on its own now and then. On the way
+ * in the card rises, the lines spread out from the centre and the window
+ * slides up and tilts toward the pointer, while its dashboard builds itself:
+ * the figures count, the chart draws its line and the rows slide in. Reduced
+ * motion draws one still frame and keeps the window flat.
+ *
+ * Engine: motion/react (springs for the window, pathLength for the chart,
+ * counting motion values) with a canvas 2D contour field on one
+ * requestAnimationFrame loop that pauses off screen.
+ */
+import * as React from "react";
+export interface ContourFeatureCardProps {
+    /** Line colour. Default `"#242423"`. */
+    color?: string;
+    /** How many contour levels to trace; more means tighter lines. Default `14`. */
+    lines?: number;
+    /** Size of the hills and valleys; higher zooms out. Default `1`. */
+    scale?: number;
+    /** Drift speed; `2` is twice as fast. Default `1`. */
+    speed?: number;
+    /** How high the pointer's hill rises. Default `1`. */
+    lift?: number;
+    /** What the window shows. Default a small analytics dashboard. */
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare const ContourFeatureCard: React.ForwardRefExoticComponent<ContourFeatureCardProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/contour-feature-card/index.d.ts

@@ -0,0 +1 @@
+export { ContourFeatureCard, type ContourFeatureCardProps, } from "./contour-feature-card";

package/dist/components/contour-lines/contour-lines.d.ts

@@ -0,0 +1,34 @@
+/**
+ * ContourLines
+ *
+ * Trigger: hover and press (plus in view). A background of live topographic
+ * contour lines. Drifting noise is traced into contour lines with marching
+ * squares, every fourth line a little heavier like the index lines on a real
+ * map. The pointer raises a soft hill, so the lines bend and crowd around it
+ * and light up near it; a press sends a ring of a wave out through the
+ * terrain, and while the pointer is away one rises on its own now and then.
+ * On the way in the lines spread out from the centre. Put anything on top as
+ * children. Reduced motion draws a single still frame.
+ *
+ * Engine: canvas 2D on one requestAnimationFrame loop that pauses off screen,
+ * with motion/react's useInView for the entrance.
+ */
+import * as React from "react";
+export interface ContourLinesProps {
+    /** Line colour. Default `"#242423"`. */
+    color?: string;
+    /** How many contour levels to trace; more means tighter lines. Default `14`. */
+    lines?: number;
+    /** Size of the hills and valleys; higher zooms out. Default `1`. */
+    scale?: number;
+    /** Drift speed; `2` is twice as fast. Default `1`. */
+    speed?: number;
+    /** How high the pointer's hill rises. Default `1`. */
+    lift?: number;
+    /** Raise a hill under the pointer and send waves on press. Default `true`. */
+    interactive?: boolean;
+    /** Content laid over the lines. */
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare const ContourLines: React.ForwardRefExoticComponent<ContourLinesProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/contour-lines/index.d.ts

@@ -0,0 +1 @@
+export { ContourLines, type ContourLinesProps } from "./contour-lines";

package/dist/components/decay-card/decay-card.d.ts

@@ -0,0 +1,44 @@
+/**
+ * DecayCard
+ *
+ * Trigger: hover. A full-bleed image card with its text laid over the
+ * picture. When the pointer comes onto it, the picture decays from the inside
+ * out: a hole opens right where the pointer entered and eats outward, its rim
+ * torn and eroded, with chunks bitten out just past the edge and fine specks
+ * sprayed beyond it, spreading until it has eaten the whole card and a second
+ * picture shows through, easing in from a slight zoom. While it spreads the
+ * rim keeps crawling and the hole drifts after the pointer.
+ * Leaving lets the first picture grow back over the hole until it is whole
+ * again. The card also sits in 3D: it leans toward the pointer and lifts a
+ * touch, a soft glare slides across it and the text drifts against the lean
+ * for depth. The text stays crisp on top. Reduced motion shows the plain
+ * picture, flat.
+ *
+ * Engine: canvas 2D. The picture is drawn each frame and a rounded hole with
+ * a noisy, gritty outline and scattered flecks is cut out of it with
+ * destination-out, in one requestAnimationFrame loop that rests once the
+ * picture is whole; motion/react eases the text in.
+ */
+import * as React from "react";
+export interface DecayCardProps {
+    /** The picture. */
+    src?: string;
+    /** The picture the decay reveals underneath. */
+    revealSrc?: string;
+    /** Small label in the top corner. Default `"Field notes"`. */
+    tag?: string;
+    /** Title over the picture. Default `"Nothing stays"`. */
+    title?: string;
+    /** Line under the title. */
+    subtitle?: string;
+    /** How far the decay eats, as a share of the card. Above about 1.5 it takes the whole card. Default `1.6`. */
+    depth?: number;
+    /** Speed of the decay and the mending. Default `1`. */
+    speed?: number;
+    /** How far the card leans toward the pointer, in degrees. `0` keeps it flat. Default `8`. */
+    tilt?: number;
+    /** A soft glare that follows the pointer across the card. Default `true`. */
+    glare?: boolean;
+    className?: string;
+}
+export declare const DecayCard: React.ForwardRefExoticComponent<DecayCardProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/decay-card/index.d.ts

@@ -0,0 +1 @@
+export { DecayCard, type DecayCardProps } from "./decay-card";

package/dist/components/deploy-streak/deploy-streak.d.ts

@@ -0,0 +1,30 @@
+/**
+ * DeployStreak
+ *
+ * Trigger: in view, then hover. A white card for a team's shipping streak: a
+ * title with an animated flame, a big count of days in a row with a deploy
+ * and a grid of dots, one per day. When the card scrolls into view the dots
+ * pop in as a diagonal wave, days that shipped filling in green, while the
+ * count runs up on odometer wheels; today's dot breathes a soft ring.
+ * Hovering a dot lifts it and names the day in a small ink tooltip; hovering
+ * the card lights the flame. Reduced motion shows the final state at once.
+ *
+ * Engine: motion/react (a counting motion value, staggered springs for the
+ * dots, AnimatePresence for the tooltip) with an animated flame from
+ * lucide-animated (MIT), vendored in src/icons.
+ */
+import * as React from "react";
+export interface DeployStreakProps {
+    /** Title. Default `"Deploys"`. */
+    title?: string;
+    /** One entry per day, oldest first; true is a day that shipped. The last day is today. Default 70 days. */
+    days?: boolean[];
+    /** Days per row. Default `14`. */
+    columns?: number;
+    /** Colour of days that shipped. Default `"#269a5a"`. */
+    color?: string;
+    /** Date of the last day, for the tooltips. Default today. */
+    today?: Date;
+    className?: string;
+}
+export declare const DeployStreak: React.ForwardRefExoticComponent<DeployStreakProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/deploy-streak/index.d.ts

@@ -0,0 +1 @@
+export { DeployStreak, type DeployStreakProps } from "./deploy-streak";

package/dist/components/depth-carousel/depth-carousel.d.ts

@@ -0,0 +1,42 @@
+/**
+ * DepthCarousel
+ *
+ * Trigger: hover, drag and scroll. A stack of cards receding into depth along
+ * a diagonal, each turned a little toward the viewer. It drifts slowly on its
+ * own; scroll, drag or the arrow keys glide it through the stack with
+ * momentum, and fast moves smear with a motion blur along the diagonal.
+ * Hovering a card pulls it up out of the stack and toward you: it draws in
+ * front of the others fully solid, turns to face you square on and tilts
+ * toward the cursor in perspective with a plastic shine (a hot spot that
+ * follows the cursor, a sheen band that slides as it tilts and a bright
+ * laminated edge), while every other card stays solid but
+ * sinks out of focus.
+ * The stack climbs up or down the frame, set by `direction`; changing it
+ * eases the whole stack across.
+ * The stack runs off both corners of the frame and loops forever, wrapping
+ * round out of sight. Reduced
+ * motion stops the drift, the blur and the tilt.
+ *
+ * Engine: motion/react (springs for the hover lift, tilt and shine) with one
+ * requestAnimationFrame loop placing the cards and driving the SVG motion
+ * blur.
+ */
+import * as React from "react";
+export interface DepthCarouselItem {
+    src: string;
+    title: string;
+}
+export interface DepthCarouselProps {
+    /** Cards in the stack. Default twelve photos. */
+    items?: DepthCarouselItem[];
+    /** Which way the stack climbs. Default `"up"`. */
+    direction?: "up" | "down";
+    /** Cards per second the stack drifts on its own. `0` holds it still. Default `0.18`. */
+    drift?: number;
+    /** Strength of the motion blur, 0 to 2. Default `1`. */
+    blur?: number;
+    /** Accessible name. Default `"Photo stack"`. */
+    label?: string;
+    className?: string;
+}
+export declare const DepthCarousel: React.ForwardRefExoticComponent<DepthCarouselProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/depth-carousel/index.d.ts

@@ -0,0 +1 @@
+export { DepthCarousel, type DepthCarouselProps, type DepthCarouselItem, } from "./depth-carousel";

package/dist/components/device-traffic/device-traffic.d.ts

@@ -0,0 +1,59 @@
+/**
+ * DeviceTraffic
+ *
+ * Trigger: in view, then hover, plus a live timeline. A white traffic card:
+ * a light gray header with an icon tile, a title and a line of copy, then a
+ * white panel overlapping it with the total visitors on rolling digits and a column per device
+ * (desktop, tablet, mobile). Each column has a tall gauge that fills to the
+ * device's share. When the card scrolls into view the gauges fill one after
+ * another while the numbers roll up from zero. While live, new visits arrive
+ * every few seconds: the total rolls on, a small "+n" floats up by the Live chip, the
+ * shares drift and the gauges settle to their new levels on a spring.
+ * Pointing at a column (or focusing it) dims the others, tilts its device
+ * icon into play and swaps its change for the visitor count. Live updates
+ * pause off screen and in a hidden tab. Reduced motion keeps the numbers
+ * current without movement.
+ *
+ * Engine: motion/react (gauge fills sliding up on springs, spring digit columns,
+ * AnimatePresence for the swaps and the "+n") with animated icons from
+ * lucide-animated (MIT), vendored in src/icons.
+ */
+import * as React from "react";
+export type DeviceKind = "desktop" | "tablet" | "mobile";
+export interface DeviceTrafficDevice {
+    name: string;
+    kind: DeviceKind;
+    /** Share of visitors, in percent. Shares are scaled to add up to 100. */
+    share: number;
+    /** Change against the last period, in percent. */
+    change: number;
+    /** Gauge color. Defaults follow the card's palette. */
+    color?: string;
+}
+export interface DeviceTrafficProps {
+    /** Title in the shell. Default `"Traffic by device"`. */
+    title?: React.ReactNode;
+    /** Line under the title. */
+    description?: React.ReactNode;
+    /** Label over the total. Default `"Total visitors"`. */
+    label?: string;
+    /** Visitors at the start. Default `237456`. */
+    total?: number;
+    /** Change of the total against the last period, in percent. Default `-1.4`. */
+    change?: number;
+    devices?: DeviceTrafficDevice[];
+    /** New visits arrive every few seconds. Default true. */
+    live?: boolean;
+    /** Seconds between live updates. Default `2.6`. */
+    interval?: number;
+    /** Gauge colors, one per device, used when a device has no color of its own. */
+    colors?: string[];
+    /** Called by the Report button. Leave out to hide it. */
+    onReport?: () => void;
+    /** Locale for numbers. Default `"en-US"`. */
+    locale?: string;
+    /** Show the gray header band with the icon, title and copy. Default true; false leaves just the chart. */
+    header?: boolean;
+    className?: string;
+}
+export declare const DeviceTraffic: React.ForwardRefExoticComponent<DeviceTrafficProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/device-traffic/index.d.ts

@@ -0,0 +1 @@
+export { DeviceTraffic, type DeviceTrafficProps, type DeviceTrafficDevice, type DeviceKind, } from "./device-traffic";

package/dist/components/download-button/download-button.d.ts

@@ -0,0 +1,36 @@
+/**
+ * DownloadButton
+ *
+ * Trigger: press (plus hover). An ink pill that shows a download from start
+ * to finish. The icon is a page with a folded corner and an arrow on it; on
+ * hover the arrow eases down a touch. A press sets the arrow floating on a
+ * slow, even bob while the page fills from the bottom like liquid, its
+ * surface rolling gently sideways and rising in step with the progress. A
+ * lighter fill sweeps across the button behind a softly waving edge, the
+ * label rolls to Downloading and a percentage counts up in uneven bursts the
+ * way real downloads do. At the end the arrow settles and shrinks away, the
+ * corner gives a little flip, a check draws on the page, the button turns
+ * green and the label rolls to Downloaded with the file size. Pressing again
+ * resets it. Progress is announced at the start and end, and reduced motion
+ * keeps the fills but drops the bob and the rolling surface.
+ *
+ * Engine: gsap + @gsap/react (one timeline per download for the fill, the
+ * percentage and the icon, scoped with useGSAP), with motion/react for the
+ * rolling label.
+ */
+import * as React from "react";
+export interface DownloadButtonProps {
+    /** Label at rest. Default `"Download"`. */
+    label?: string;
+    /** File size shown once done. Default `"4.2 MB"`. */
+    size?: string;
+    /** Seconds the demo download takes. Default `2.6`. */
+    duration?: number;
+    /**
+     * Called on press. Return a promise to hold the fill near the end until it
+     * settles; a rejection resets the button.
+     */
+    onDownload?: () => void | Promise<unknown>;
+    className?: string;
+}
+export declare const DownloadButton: React.ForwardRefExoticComponent<DownloadButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/download-button/index.d.ts

@@ -0,0 +1 @@
+export { DownloadButton, type DownloadButtonProps } from "./download-button";

package/dist/components/event-card/event-card.d.ts

@@ -0,0 +1,55 @@
+/**
+ * EventCard
+ *
+ * Trigger: hover and press (plus in view). A minimal white card with the
+ * details of one event: a small kind line over the title, then the date and
+ * a time whose clock hands sweep round to the start when the card comes into
+ * view. Guests sit in a stack that fans out on hover with a name under each
+ * face, and the dashed plus adds a guest who pops in while the counts roll.
+ * The description fades out under its last line and Show more unfolds the
+ * rest. The action row pairs an ink Join button, whose arrow slides through
+ * on hover, with round tools drawn in GSAP: the copy sheets slide apart and
+ * swap to a check, the pencil rocks and draws a line, and the bin lifts its
+ * lid, then widens into a red Delete pill to confirm and leaves an Undo row.
+ * Everything rises in one row after another when the card scrolls into view.
+ * Reduced motion swaps the movement for fades.
+ *
+ * Engine: motion/react for the layout, stack, counts and states; gsap +
+ * @gsap/react for the icon drawings (scoped with useGSAP).
+ */
+import * as React from "react";
+export interface EventGuest {
+    name: string;
+    /** Photo URL. Without one, initials on a soft disc. */
+    avatar?: string;
+    /** Whether they said yes. Default `true`. */
+    going?: boolean;
+}
+export interface EventCardProps {
+    /** Event title. Default `"Product demo"`. */
+    title?: string;
+    /** When it starts. Default a Friday at 1:30 PM. */
+    start?: Date;
+    /** When it ends. Default two hours after the start. */
+    end?: Date;
+    /** People invited. Default six guests, one still to answer. */
+    guests?: EventGuest[];
+    /** What the event is about. Each string is a paragraph. */
+    about?: string[];
+    /** Locale for the date and time. Default `"en-US"`. */
+    locale?: string;
+    /** Called by the pencil. */
+    onEdit?: () => void;
+    /** Called once delete is confirmed. */
+    onDelete?: () => void;
+    /** Called by the plus. Default adds a sample guest so the stack can be tried. */
+    onInvite?: () => void;
+    /** What kind of event it is, shown as a tag. Default `"Video call"`. */
+    kind?: string;
+    /** Main button label. Default `"Join call"`. */
+    cta?: string;
+    /** Called by the main button. */
+    onJoin?: () => void;
+    className?: string;
+}
+export declare const EventCard: React.ForwardRefExoticComponent<EventCardProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/event-card/index.d.ts

@@ -0,0 +1 @@
+export { EventCard, type EventCardProps, type EventGuest } from "./event-card";

package/dist/components/file-drop/file-drop.d.ts

@@ -0,0 +1,46 @@
+/**
+ * FileDrop
+ *
+ * Trigger: drag (plus press). A white upload card with a drop zone. Drag files
+ * over it and the dashed border starts marching, the zone swells a touch, the
+ * cloud lifts and the line rolls to "Release to upload". Drop them and a ripple
+ * spreads from where they fell while the cloud gulps them down; the files
+ * slide into the list one after another. Each thumbnail develops like a photo,
+ * blurred and grey at first and sharpening as it uploads, while a slider runs
+ * along its track: an ink fill with a light sheen gliding through it and a
+ * round knob riding its tip, beside a rolling percent. Meanwhile a thin arc
+ * circles the cloud and the zone counts the files in flight. When a file
+ * finishes the track tucks away, a soft green wash sweeps the row, a faint
+ * green glow rises from the card's bottom edge to about halfway and fades, the
+ * thumbnail pops and a green check draws itself. Hover a finished row and the
+ * check turns into a bin. Deleting (or cancelling) breaks the row: a hairline
+ * crack draws down it and it shivers, then the two halves and a few small
+ * flakes become free pieces with a little physics, pushed outward and up with
+ * a spin, falling under gravity with air drag, lifting a shadow as they go and
+ * fading, while the list closes the gap. Files of the wrong type or too large shake and say why. Images
+ * dragged in from a web page arrive as links and are fetched into files. A
+ * ref's `add` takes files from anywhere else.
+ * Reduced motion keeps every state without movement.
+ *
+ * Engine: motion/react (springs and keyframes for the zone, ripple, glow and rows,
+ * motion values driving each slider, percent and developing thumbnail,
+ * AnimatePresence for the rows and the done check), with GSAP for the break:
+ * a timeline for the crack and shiver, then a ticker stepping the falling pieces.
+ */
+import * as React from "react";
+export interface FileDropHandle {
+    /** Add files as if they were dropped. */
+    add: (files: File[]) => void;
+}
+export interface FileDropProps {
+    /** Accepted MIME types. Default PNG, JPEG and GIF. */
+    accept?: string[];
+    /** Largest file in bytes. Default 10 MB. */
+    maxSize?: number;
+    /** Your upload. Call `progress` with 0 to 1 as it goes. Default: a simulated upload. */
+    upload?: (file: File, progress: (p: number) => void) => Promise<void>;
+    /** Called each time a file finishes uploading. */
+    onUploaded?: (file: File) => void;
+    className?: string;
+}
+export declare const FileDrop: React.ForwardRefExoticComponent<FileDropProps & React.RefAttributes<FileDropHandle>>;

package/dist/components/file-drop/index.d.ts

@@ -0,0 +1 @@
+export { FileDrop, type FileDropProps, type FileDropHandle } from "./file-drop";

package/dist/components/flip-words/flip-words.d.ts

@@ -0,0 +1,26 @@
+/**
+ * FlipWords
+ *
+ * Trigger: timeline. One word in a sentence flips to the next on a loop. The
+ * outgoing word tips away while the incoming one flips up letter by letter in
+ * 3D, and the sentence reflows smoothly as the word's width changes. Screen
+ * readers hear the whole list once. Reduced motion swaps words without motion.
+ *
+ * Engine: motion/react (AnimatePresence with per-letter stagger, layout on the
+ * word slot for the width change).
+ */
+import * as React from "react";
+export interface FlipWordsProps {
+    /** Text before the changing word. Default `"Build"`. */
+    before?: string;
+    /** Words to cycle through. Default `["playful", "precise", "fearless"]`. */
+    words?: string[];
+    /** Text after the changing word. Default `"interfaces"`. */
+    after?: string;
+    /** Milliseconds each word stays. Default `2400`. */
+    interval?: number;
+    /** Classes for the changing word. Default a violet tone. */
+    wordClassName?: string;
+    className?: string;
+}
+export declare const FlipWords: React.ForwardRefExoticComponent<FlipWordsProps & React.RefAttributes<HTMLParagraphElement>>;

package/dist/components/flip-words/index.d.ts

@@ -0,0 +1 @@
+export { FlipWords, type FlipWordsProps } from "./flip-words";

package/dist/components/flux-card/flux-card.d.ts

@@ -0,0 +1,56 @@
+/**
+ * FluxCard
+ *
+ * Trigger: in view and timeline, plus hover and press. A feature card on a
+ * pixelated gradient: the colour flows underneath, but it is drawn as a grid
+ * of small rounded squares, stepped into a few shades and dithered between
+ * them like an old screen. The pointer carries a negative magnetic field:
+ * squares near it shrink away to nothing and the colour is pushed outward,
+ * so a clear hole follows the pointer with a crowded, brighter rim around it.
+ * A press sends a shock wave through the grid. In front, a frosted focus
+ * timer counts down inside a shield, and notification pills drift in from
+ * the edges, hit the shield and get pushed back out; each one that bounces
+ * off makes the shield pulse, ripples the grid where it hit and adds to the
+ * held back count. The pills are repelled by the pointer too. Everything
+ * pauses off screen and in a hidden tab. Reduced motion keeps a still frame
+ * with the pills resting around the timer.
+ *
+ * Engine: motion/react (entrances, the shield pulse, rolling numbers) and a
+ * WebGL fragment shader (flow noise, Bayer dithering, the repelling field and
+ * press waves), with a small spring simulation for the pills, all on one
+ * requestAnimationFrame loop that runs only while the card is visible.
+ */
+import * as React from "react";
+export type FluxPingIcon = "message" | "calendar" | "mail" | "bell" | "receipt";
+export interface FluxPing {
+    label: string;
+    icon: FluxPingIcon;
+}
+export interface FluxCardProps {
+    /** Card title. Default `"Keep the noise out"`. */
+    title?: React.ReactNode;
+    /** Line under the title. */
+    description?: React.ReactNode;
+    /** The label inside the timer. Default `"Deep work"`. */
+    label?: string;
+    /** Length of the focus block in minutes. Default `25`. */
+    minutes?: number;
+    /** Notifications that drift in and bounce off. Up to six are used. */
+    pings?: FluxPing[];
+    /** Four colours for the main flow, deepest first. Default an ember ramp. */
+    colors?: [string, string, string, string];
+    /** A second colour dithered into the lower right. Default `"#5b5bff"`. */
+    accent?: string;
+    /** Size of each square in px, 6 to 24. Default `10`. */
+    pixel?: number;
+    /** How much the shades are dithered into each other, 0 to 1. Default `0.6`. */
+    dither?: number;
+    /** Strength of the repelling field around the pointer, 0 to 1. Default `0.8`. */
+    field?: number;
+    /** Reach of the field in px. Default `110`. */
+    radius?: number;
+    /** Flow speed, 0 (still) to 2. Default `0.6`. */
+    speed?: number;
+    className?: string;
+}
+export declare const FluxCard: React.ForwardRefExoticComponent<FluxCardProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/flux-card/index.d.ts

@@ -0,0 +1 @@
+export { FluxCard, type FluxCardProps, type FluxPing, type FluxPingIcon, } from "./flux-card";

package/dist/components/fuse-button/fuse-button.d.ts

@@ -0,0 +1,75 @@
+/**
+ * FuseButton
+ *
+ * Trigger: press, then a timed undo. Pressing the action swaps the label for a
+ * ghost Undo button inside the same shell, held open by a burning fuse. The
+ * fuse is the button's own outline: it burns back around the edge with embers
+ * drifting off the burning end. Undo before it runs out to roll back; let it
+ * burn and the action sticks, shown by a brief done label with a check. The
+ * fuse keeps burning under the pointer and only stops, rewinding, when Undo is
+ * pressed. Focus moves to Undo, and Escape undoes. Both states share one size,
+ * and only transform and opacity animate.
+ *
+ * Engine: motion/react (one motion value drives the outline and the embers,
+ * AnimatePresence for the state swap, pathLength for the outline).
+ */
+import * as React from "react";
+declare const SIZES: {
+    readonly sm: {
+        readonly box: "h-9 text-[12px]";
+        readonly pad: "px-4";
+        readonly inset: 3;
+    };
+    readonly md: {
+        readonly box: "h-11 text-sm";
+        readonly pad: "px-5";
+        readonly inset: 4;
+    };
+    readonly lg: {
+        readonly box: "h-14 text-base";
+        readonly pad: "px-6";
+        readonly inset: 6;
+    };
+};
+export interface FuseButtonProps {
+    /** Action label. Default `"Archive"`. */
+    children?: React.ReactNode;
+    /** Icon before the action label. Default an archive icon. Pass `null` for none. */
+    icon?: React.ReactNode;
+    /** Label shown with a check once the fuse runs out. Default `"Archived"`. */
+    doneLabel?: React.ReactNode;
+    /** Undo button label. Default `"Undo"`. */
+    undoLabel?: React.ReactNode;
+    /** Height and padding preset. Default `"md"`. */
+    size?: keyof typeof SIZES;
+    /** Corner radius in px. Default fully rounded. */
+    radius?: number;
+    /** Text color, any CSS color. Default near-black (near-white in dark mode). */
+    textColor?: string;
+    /** Background color, any CSS color. Default white (dark grey in dark mode). */
+    background?: string;
+    /** Fuse and ember color. Default `"#f5a524"`. */
+    fuseColor?: string;
+    /** How long the undo window (the fuse) lasts, in ms. Default `4000`. */
+    duration?: number;
+    /** Fuse stroke width in px. Default `2.5`. */
+    fuseThickness?: number;
+    /** Length of the swap between states, in ms. Default `320`. */
+    crossfade?: number;
+    /** Fire `onCommit` right away on `"press"` (optimistic) or when the `"fuse"` runs out. Default `"press"`. */
+    commitOn?: "press" | "fuse";
+    /** When the fuse runs out, `"reset"` back to the action or `"stay"` done. Default `"reset"`. */
+    afterFuse?: "reset" | "stay";
+    /** How long the done state shows before a reset, in ms. Default `1600`. */
+    resetAfter?: number;
+    /** Pause the fuse while the pointer is over the button. Off by default: the fuse only stops when Undo is pressed. */
+    pauseOnHover?: boolean;
+    /** Called when the action applies. Timing follows `commitOn`. */
+    onCommit?: () => void;
+    /** Called when Undo is pressed before the fuse runs out. */
+    onUndo?: () => void;
+    disabled?: boolean;
+    className?: string;
+}
+export declare const FuseButton: React.ForwardRefExoticComponent<FuseButtonProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/fuse-button/index.d.ts

@@ -0,0 +1 @@
+export { FuseButton, type FuseButtonProps } from "./fuse-button";