motion-brew 0.0.0-stage → 0.1.0

package/dist/components/payment-form/payment-form.d.ts

@@ -0,0 +1,54 @@
+/**
+ * PaymentForm
+ *
+ * Trigger: type (plus focus and press). A white card for adding a payment
+ * card. Every field is a soft gray pill with a label that floats up on focus,
+ * and one ink focus ring glides from field to field as you move through the
+ * form; each field's icon gives the same quick pop and tilt when it takes
+ * focus. The card number groups itself as you type and the card network logo
+ * rolls in when the number is recognised. The expiry adds its own slash.
+ * Valid fields draw a light check; a field left wrong shakes once and rolls
+ * in a hint. A spring switch saves the card. The button stays muted until the
+ * form is complete, its lock shackle snapping shut when it is ready; a press
+ * runs a spinner, then the button turns green and draws a check. Then the
+ * whole card becomes a confirmation in the style of VerifyFlow: the green seal
+ * spins in, draws its check and bursts sparks, a pill shows the card's logo,
+ * last four and expiry, and Add another and Continue sit side by side. When
+ * the card scrolls into view, the title, fields, switch and button rise out of
+ * a soft blur one after another; Add another blurs the confirmation away and plays the
+ * same rise back into a fresh form with the cursor in the number field. Errors and results are announced, and reduced motion
+ * swaps the movement for fades.
+ *
+ * Engine: motion/react for the fields, focus ring, switch, button and
+ * confirmation layout; gsap + @gsap/react for the seal (scoped with
+ * useGSAP).
+ */
+import * as React from "react";
+export interface PaymentDetails {
+    number: string;
+    name: string;
+    expiry: string;
+    cvc: string;
+    brand: string | null;
+    save: boolean;
+}
+export interface PaymentFormProps {
+    /** Card title. Default `"Payment details"`. */
+    title?: string;
+    /** Line under the title. */
+    subtitle?: string;
+    /** Button label. Default `"Save card"`. */
+    cta?: string;
+    /** Button label once saved. Default `"Card saved"`. */
+    doneLabel?: string;
+    /** Whether the save switch starts on. Default `true`. */
+    defaultSave?: boolean;
+    /** Confirmation button label. Default `"Continue to checkout"`. */
+    continueLabel?: string;
+    /** Called by the confirmation's continue button. */
+    onContinue?: () => void;
+    /** Called on submit. Return a promise to hold the spinner until it settles; a rejection returns to the form. */
+    onSubmit?: (details: PaymentDetails) => void | Promise<unknown>;
+    className?: string;
+}
+export declare const PaymentForm: React.ForwardRefExoticComponent<PaymentFormProps & React.RefAttributes<HTMLFormElement>>;

package/dist/components/pill-tabs/index.d.ts

@@ -0,0 +1 @@
+export { PillTabs, type PillTabsProps, type PillTab } from "./pill-tabs";

package/dist/components/pill-tabs/pill-tabs.d.ts

@@ -0,0 +1,39 @@
+/**
+ * PillTabs
+ *
+ * Trigger: press. Tabs on a tinted track with a white pill that slides to the
+ * active tab like a rubber band. The leading edge darts ahead; the trailing edge
+ * holds back, then follows on a looser spring, so the pill stretches long and
+ * thins, then settles with just a hint of give. A horizontal motion blur, scaled by its speed, smears it
+ * mid-travel and clears at rest. The rounded ends never distort: the pill is two
+ * caps and a flat middle that scales. Arrow keys, Home and End move between
+ * tabs. Reduced motion jumps the pill with no stretch or blur.
+ *
+ * Engine: motion/react (two spring-driven edge motion values, transform-only
+ * pill parts, useVelocity feeding an SVG horizontal blur).
+ */
+import * as React from "react";
+export interface PillTab {
+    id: string;
+    label: string;
+    /** Small count shown after the label. */
+    badge?: number;
+}
+export interface PillTabsProps {
+    /** Tabs, left to right. Default inbox, mentions, saved. */
+    tabs?: PillTab[];
+    /** Active tab id when uncontrolled. Default the first. */
+    defaultValue?: string;
+    /** Active tab id when controlled. */
+    value?: string;
+    /** Called with the new tab id. */
+    onValueChange?: (id: string) => void;
+    /** How rubbery the slide is, 0 (rigid) to 1 (very stretchy). Default `0.45`. */
+    stretch?: number;
+    /** Strongest horizontal blur mid-flight, in px. `0` turns it off. Default `7.5`. */
+    blur?: number;
+    /** Accessible name for the tab list. Default `"Sections"`. */
+    label?: string;
+    className?: string;
+}
+export declare const PillTabs: React.ForwardRefExoticComponent<PillTabsProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/pixel-blast/index.d.ts

@@ -0,0 +1 @@
+export { PixelBlast, type PixelBlastProps, type PixelBlastShape } from "./pixel-blast";

package/dist/components/pixel-blast/pixel-blast.d.ts

@@ -0,0 +1,41 @@
+/**
+ * PixelBlast
+ *
+ * Trigger: hover and press (plus in view). A background of dithered pixel
+ * clouds. A few soft cloud bodies wander the whole area on slow looping
+ * paths, their edges torn by noise, drawn through an ordered (Bayer) dither as
+ * a grid of dots that grow and shrink in steps; every dot shimmers on its own
+ * beat, and an optional perspective floor of dots rolls toward you along the
+ * bottom. The pointer lights the pixels up around it, a press sends a ripple
+ * ring out through the field, and while the pointer is away a ripple rises on
+ * its own now and then. On the way in the pixels spread out from the centre
+ * behind a bright edge. 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 type PixelBlastShape = "square" | "circle" | "diamond";
+export interface PixelBlastProps {
+    /** Pixel colour. Default `"#252528"`. */
+    color?: string;
+    /** Grid cell in px; the largest dot fills most of a cell. Default `6`. */
+    cellSize?: number;
+    /** Dot shape. Default `"square"`. */
+    shape?: PixelBlastShape;
+    /** Drift and shimmer speed; `2` is twice as fast. Default `1`. */
+    speed?: number;
+    /** How much of the area the clouds cover; `2` makes each cloud twice as wide. Default `1.4`. */
+    coverage?: number;
+    /** How heavy the clouds are: higher fills them with bigger, bolder dots. Default `0.8`. */
+    density?: number;
+    /** Draw the perspective floor of dots along the bottom. Default `false`. */
+    floor?: boolean;
+    /** Light up under the pointer and ripple on press. Default `true`. */
+    interactive?: boolean;
+    /** Content laid over the field. */
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare const PixelBlast: React.ForwardRefExoticComponent<PixelBlastProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+export { PixelFeatureCard, type PixelFeatureCardProps, type PixelShape, } from "./pixel-feature-card";

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

@@ -0,0 +1,43 @@
+/**
+ * PixelFeatureCard
+ *
+ * Trigger: hover and press (plus in view). A product feature card: a phone
+ * with a small app screen stands in front of a field of dithered pixel clouds.
+ * The clouds are a few soft bodies that wander the whole card on slow looping
+ * paths, their edges torn by noise, drawn through an ordered (Bayer) dither as
+ * a grid of dots that grow and shrink in steps; every dot shimmers on
+ * its own beat, and a perspective floor of dots rolls toward you along the
+ * bottom. The pointer lights the pixels up around it, a press sends a ripple
+ * ring out through the field, and while the pointer is away a ripple rises on
+ * its own now and then. The phone floats in when the card scrolls into view
+ * and tilts toward the pointer on springs, and the screen inside builds itself
+ * up: the score counts, bars grow and rows slide in. On the way in the card
+ * rises and the pixels spread out from the centre behind a bright edge. Reduced motion draws a single still
+ * frame and keeps the phone flat.
+ *
+ * Engine: motion/react (springs for the phone tilt and entrance, staggered
+ * screen reveals, a counting motion value) with a canvas 2D field on one
+ * requestAnimationFrame loop that pauses off screen.
+ */
+import * as React from "react";
+export type PixelShape = "square" | "circle" | "diamond";
+export interface PixelFeatureCardProps {
+    /** Pixel colour, also the accent on the default screen. Default `"#252528"`. */
+    color?: string;
+    /** Grid cell in px; the largest dot fills most of a cell. Default `6`. */
+    cellSize?: number;
+    /** Dot shape. Default `"square"`. */
+    shape?: PixelShape;
+    /** Drift and shimmer speed; `2` is twice as fast. Default `1`. */
+    speed?: number;
+    /** How much of the card the clouds cover; `2` makes each cloud twice as wide. Default `1.4`. */
+    coverage?: number;
+    /** How heavy the clouds are: higher fills them with bigger, bolder dots. Default `0.8`. */
+    density?: number;
+    /** Draw the perspective floor of dots along the bottom. Default `false`. */
+    floor?: boolean;
+    /** What the phone shows. Default a small health app screen. */
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare const PixelFeatureCard: React.ForwardRefExoticComponent<PixelFeatureCardProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/pixel-scroll/index.d.ts

@@ -0,0 +1 @@
+export { PixelScroll, type PixelScrollProps, type PixelDirection, type PixelPattern, type PixelEasing } from "./pixel-scroll";

package/dist/components/pixel-scroll/pixel-scroll.d.ts

@@ -0,0 +1,64 @@
+/**
+ * PixelScroll
+ *
+ * Trigger: scroll. A scroll-driven pixel transition. A tall track scrolls past
+ * a sticky stage, and as it does a grid of pixels flips from state A to state
+ * B. Colors mode goes from one color to another, with optional accent pixels
+ * flickering in the moving band; two-layer mode goes from image A to image B.
+ * Direction sets where the flip starts (top, bottom, left, right, center out or
+ * in), pattern breaks up the front (random, checker, diagonal, wave, spiral,
+ * radial) and intensity sets how much the pattern wins over the direction.
+ * Easing shapes the timing and End At sets how far through the scroll the
+ * transition finishes. Pixels that have settled fill their gaps, so the result
+ * is seamless; the grid only shows along the moving front. Scrolling is the
+ * user's own input, so it runs under reduced motion too.
+ *
+ * Engine: motion/react (useScroll for progress; one canvas redrawn only when the
+ * progress changes).
+ */
+import * as React from "react";
+export type PixelDirection = "top-bottom" | "bottom-top" | "left-right" | "right-left" | "center-out" | "center-in";
+export type PixelPattern = "random" | "checker" | "diagonal" | "wave" | "spiral" | "radial";
+export type PixelEasing = "linear" | "ease-in" | "ease-out" | "ease-in-out" | "expo-out";
+export interface PixelScrollProps {
+    /** `"colors"` flips color A to color B; `"layers"` flips image A to image B. Default `"colors"`. */
+    mode?: "colors" | "layers";
+    /** Start color (colors mode). Default the light card gray. */
+    from?: string;
+    /** End color (colors mode). Default ink. */
+    to?: string;
+    /** Start image (layers mode). */
+    layerA?: string;
+    /** End image (layers mode). */
+    layerB?: string;
+    /** Pixel size, px. Default `16`. */
+    pixelSize?: number;
+    /** Gap between pixels along the moving front, px. Default `0`. */
+    gap?: number;
+    /** How much of the transition already shows before any scrolling, 0 to 0.5, so there is a hint of it at rest. Default `0.08`. */
+    startAt?: number;
+    /** How far through the scroll the transition finishes, 0.1 to 1. Default `0.8`. */
+    endAt?: number;
+    /** Where the flip starts. Default `"bottom-top"`. */
+    direction?: PixelDirection;
+    /** How the front is broken up. Default `"random"`. */
+    pattern?: PixelPattern;
+    /** How strongly the pattern shifts each pixel's timing, 0 to 1. Default `0.45`. */
+    intensity?: number;
+    /** Timing curve. Default `"ease-in-out"`. */
+    easing?: PixelEasing;
+    /** Share of pixels in the moving band that flash an accent, 0 to 1. Default `0.25`. */
+    accentShare?: number;
+    /** Up to four accent colors. */
+    accents?: string[];
+    /** Scroll length in screens (or container heights). Default `3`. */
+    length?: number;
+    /** Scroll inside this element instead of the page. */
+    container?: React.RefObject<HTMLElement | null>;
+    /** Content laid over the stage. */
+    children?: React.ReactNode;
+    /** Describes the visual for screen readers. Leave empty if it is decorative. */
+    label?: string;
+    className?: string;
+}
+export declare const PixelScroll: React.ForwardRefExoticComponent<PixelScrollProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+export { PricingCard, type PricingCardProps, type PricingPlan, type PricingFeature, type PricingIcon } from "./pricing-card";

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

@@ -0,0 +1,60 @@
+/**
+ * PricingCard
+ *
+ * Trigger: hover (plus press and in view). One plan as a white card resting in
+ * a soft grey shell, like a print in a mount, with a label strip along the top
+ * of the shell. Hover or focus the card and the shell warms with a slowly
+ * drifting pastel gradient, the card lifts, the strip rolls up from below to a
+ * quiet "Recommended for you" with a sparkle, the plan icon plays and the
+ * button turns ink; leaving lets it all settle back. A small Yearly switch sits
+ * beside the price: flip it and the knob slides, a saving chip pops in, the
+ * price rolls like an odometer and the billing line blurs to match. Each
+ * feature's icon plays when you point at its row. When the card scrolls into
+ * view the shell rises in, the white card settles into it, the plan icon plays
+ * once and the features follow in a short cascade. Reduced motion keeps every
+ * state without movement.
+ *
+ * Engine: motion/react (springs for the lift, knob and digit columns, a
+ * looping gradient drift, AnimatePresence for the rolling strip and billing
+ * line, staggered in view entrances).
+ */
+import * as React from "react";
+/** An icon that takes className, strokeWidth and an `active` flag, like the animated icons. */
+export type PricingIcon = React.ComponentType<{
+    className?: string;
+    strokeWidth?: number;
+    active?: boolean;
+}>;
+export interface PricingFeature {
+    title: string;
+    /** A short line under the title. */
+    detail?: string;
+    icon?: PricingIcon;
+}
+export interface PricingPlan {
+    name: string;
+    /** The label strip along the top of the shell. */
+    label: string;
+    /** One line under the name. */
+    blurb: string;
+    /** Price per month when billed monthly. */
+    monthly: number;
+    /** Price per month when billed yearly. */
+    yearly: number;
+    features: PricingFeature[];
+    cta: string;
+    /** A small line under the button. */
+    footnote?: string;
+    icon?: PricingIcon;
+}
+export interface PricingCardProps {
+    plan?: PricingPlan;
+    /** Billing shown first. Default `"monthly"`. */
+    defaultBilling?: "monthly" | "yearly";
+    /** What the strip rolls to on hover. Default `"Recommended for you"`. */
+    note?: string;
+    /** Called by the button. */
+    onSelect?: (billing: "monthly" | "yearly") => void;
+    className?: string;
+}
+export declare const PricingCard: React.ForwardRefExoticComponent<PricingCardProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+export { PrismCarousel, type PrismCarouselProps, type PrismCard } from "./prism-carousel";

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

@@ -0,0 +1,54 @@
+/**
+ * PrismCarousel
+ *
+ * Trigger: drag (plus press, wheel and keys). An endless loop of cards (images,
+ * or metric cards) circling slowly through a soft stage that fills its
+ * container, with a liquid glass lens at each edge. The lenses are frosted,
+ * magnifying strips that blur and over saturate whatever passes beneath them,
+ * so a card's colours bloom as it slides into the glass. They behave like a
+ * magnetic field: as a card nears an edge the lens swells out to meet it.
+ * Inside the glass a card pivots on its inner edge so its outer top and bottom
+ * corners flare out, stretched toward the edge, and it eases back to its
+ * perfect flat shape before it comes out; the same on both sides. An optional
+ * flip turns each card over as it leaves the right glass and enters the left. The row
+ * drifts on its own at a set speed; hover slows it to a crawl, and dragging,
+ * scrolling sideways, tapping a side card, the arrow keys or the dots take
+ * over, snapping to a card, until it eases back in a couple of seconds later.
+ * Reduced motion keeps the layout without the movement.
+ *
+ * Engine: motion/react (one track motion value that the drift, drag and
+ * springs all move, and that every card and both lenses derive their bend,
+ * stretch, colour, swell and turns from).
+ */
+import * as React from "react";
+export interface PrismCard {
+    label: string;
+    /** An image fills the card; without one it shows the metric below. */
+    image?: string;
+    /** The headline number, for metric cards. */
+    value?: number;
+    /** Text after the number, like "%" or " ms". */
+    suffix?: string;
+    /** Decimal places for the number. */
+    decimals?: number;
+    caption?: string;
+    /** Two colours for a metric card's glowing orb. */
+    hues?: [string, string];
+}
+export interface PrismCarouselProps {
+    cards?: PrismCard[];
+    /** Card shown first. Default the second. */
+    defaultIndex?: number;
+    /** Flip each card over as it leaves the right glass and enters the left. Default `false`. */
+    flip?: boolean;
+    /** Circle slowly on its own, resting after a touch. Default `true`. */
+    autoplay?: boolean;
+    /** How fast the row circles on its own, in px per second. Default `80`. */
+    speed?: number;
+    /** Blur of the edge glass in px. Default `26`. */
+    blur?: number;
+    /** How much the edge glass saturates what passes under it. Default `2.9`. */
+    saturation?: number;
+    className?: string;
+}
+export declare const PrismCarousel: React.ForwardRefExoticComponent<PrismCarouselProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/prism-flow/index.d.ts

@@ -0,0 +1 @@
+export { PrismFlow, type PrismFlowProps } from "./prism-flow";

package/dist/components/prism-flow/prism-flow.d.ts

@@ -0,0 +1,41 @@
+/**
+ * PrismFlow
+ *
+ * Trigger: hover (plus a timeline). A dark background crossed by a soft band
+ * of light that bends and drifts like a ribbon caught in slow air. Its edges
+ * split into colour the way light does through a prism: a bright near white
+ * core fades out through your four colours on either side, under a wide glow.
+ * A fainter echo band trails behind it. The ribbon leans toward the pointer
+ * and settles back when it leaves. Fine film grain keeps the gradients smooth.
+ * Anything you place inside sits on top. It pauses off screen and in a hidden
+ * tab, and reduced motion holds one still frame.
+ *
+ * Engine: a WebGL fragment shader (a domain warped curve, a spectral spread of
+ * gaussian bands and a filmic tone curve) on requestAnimationFrame.
+ */
+import * as React from "react";
+export interface PrismFlowProps {
+    /** Four colours from one edge of the band to the other; the core between them is near white. Default an ember ramp. */
+    colors?: [string, string, string, string];
+    /** The background the light sits on. Default `"#050507"`. */
+    background?: string;
+    /** Drift speed, 0 (still) to 5. Default `2.7`. */
+    speed?: number;
+    /** Width of the band, 0.2 to 5. Default `2.75`. */
+    width?: number;
+    /** How far the colours fan out from the core, 0 to 4. Default `1.45`. */
+    spread?: number;
+    /** How much the band curls and folds, 0 to 2.5. Default `1`. */
+    warp?: number;
+    /** Overall brightness, 0.2 to 4. Default `2.25`. */
+    intensity?: number;
+    /** Film grain, 0 to 2.5. Default `1.75`. */
+    grain?: number;
+    /** Show the fainter echo band. Default `true`. */
+    echo?: boolean;
+    /** The light leans toward the pointer. Default `true`. */
+    interactive?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare const PrismFlow: React.ForwardRefExoticComponent<PrismFlowProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/privacy-banner/index.d.ts

@@ -0,0 +1 @@
+export { PrivacyBanner, type PrivacyBannerProps, type CookieKind, type CookieChoices, } from "./privacy-banner";

package/dist/components/privacy-banner/privacy-banner.d.ts

@@ -0,0 +1,41 @@
+/**
+ * PrivacyBanner
+ *
+ * Trigger: press (plus hover and in view). A white cookie consent card. It
+ * rises in from below while its outline cookie rolls in and settles; hovering
+ * the cookie makes its chips hop and takes a bite out of it. Three actions sit
+ * at the bottom: Customize, Reject all and an ink Accept all whose arrow slides
+ * through on hover. Customize grows the card on a spring to show a switch for
+ * each kind of cookie (essential stays on), and its button becomes Save
+ * choices. Any choice turns the whole card into a short confirmation: a check
+ * draws itself in a circle, the title rolls to what was chosen, and a small
+ * link opens the settings again. Reduced motion keeps the states without
+ * movement.
+ *
+ * Engine: motion/react (a layout animation for the card's height,
+ * AnimatePresence for the panel and the confirmation, springs for the
+ * switches, pathLength for the check, variants on the cookie's SVG parts).
+ */
+import * as React from "react";
+export interface CookieKind {
+    id: string;
+    label: string;
+    description: string;
+    /** Always on and cannot be switched off. */
+    required?: boolean;
+}
+export type CookieChoices = Record<string, boolean>;
+export interface PrivacyBannerProps {
+    title?: string;
+    description?: React.ReactNode;
+    /** The kinds of cookie shown under Customize. Default essential, analytics, marketing. */
+    kinds?: CookieKind[];
+    /** Called with every kind switched on. */
+    onAccept?: (choices: CookieChoices) => void;
+    /** Called with only the required kinds on. */
+    onReject?: (choices: CookieChoices) => void;
+    /** Called with the switches as set under Customize. */
+    onSave?: (choices: CookieChoices) => void;
+    className?: string;
+}
+export declare const PrivacyBanner: React.ForwardRefExoticComponent<PrivacyBannerProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+export { ProfileCard, type ProfileCardProps, type ProfileStat } from "./profile-card";

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

@@ -0,0 +1,52 @@
+/**
+ * ProfileCard
+ *
+ * Trigger: in view, then hover, press and keys. A white profile card for a
+ * creator. Its cover is a soft aurora of pastel colour that drifts on its own
+ * and, on hover, flows toward the pointer like liquid. When the card scrolls into view it rises in, the avatar
+ * pops over the cover with a breathing online dot, the name, role and skill
+ * chips follow one after another and the stats count up. Press "+3" and more
+ * skills spring open. Follow morphs into Following with a check and the
+ * follower count ticks up; the round buttons play their icons on hover and
+ * the bookmark fills with a pop when saved. Reduced motion keeps everything
+ * still and shows every state at once.
+ *
+ * Engine: motion/react (springs on motion values for the flowing cover, looping keyframes for the drift, layout animations for the chips and
+ * the follow button, motion values counting the stats) with animated icons
+ * from lucide-animated (MIT), vendored in src/icons.
+ */
+import * as React from "react";
+export interface ProfileStat {
+    label: string;
+    value: number;
+    /** Decimal places. Default `0`. */
+    decimals?: number;
+    /** Shorten thousands to "12.4k". Default `false`. */
+    compact?: boolean;
+}
+export interface ProfileCardProps {
+    name?: string;
+    role?: string;
+    /** City or place, shown with a pin. Pass `null` to hide it. */
+    location?: string | null;
+    bio?: string;
+    /** Portrait URL. */
+    avatar?: string;
+    /** Shows a verified badge by the name. Default `true`. */
+    verified?: boolean;
+    /** The status on the cover, as in `"Available"`. Pass `null` to hide it. */
+    status?: string | null;
+    /** Skill chips; the first three show, the rest open from a "+n" chip. */
+    skills?: string[];
+    /** Three numbers. The first one counts followers and ticks up on Follow. */
+    stats?: ProfileStat[];
+    /** Pastel colours for the cover's aurora, three of them. */
+    cover?: [string, string, string];
+    /** Following at first. Default `false`. */
+    defaultFollowing?: boolean;
+    onFollowChange?: (following: boolean) => void;
+    onMessage?: () => void;
+    onSaveChange?: (saved: boolean) => void;
+    className?: string;
+}
+export declare const ProfileCard: React.ForwardRefExoticComponent<ProfileCardProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+export { ProfileMenu, type ProfileMenuProps, type ProfileMenuItem, type ProfileIcon, type ProfileTheme, } from "./profile-menu";

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

@@ -0,0 +1,43 @@
+/**
+ * ProfileMenu
+ *
+ * Trigger: hover and press (plus keys and in view). A white profile menu card:
+ * a header with avatar, name and email, groups of rows, an appearance switch and
+ * log out. When it scrolls into view the card rises in and its rows follow
+ * one after another. A soft gray pill glides between rows under the pointer,
+ * and every row's animated icon plays while its row is hovered: the house,
+ * the folder, the people, the envelope, the card and the pulse line each have
+ * their own move. Thin lines run edge to edge between the groups. In the
+ * Appearance switch a white pill slides to the choice and the chosen icon
+ * plays, and the card itself turns dark for Dark, or follows the device for
+ * System, fading between the two. Log out plays its door. The arrow keys move through the rows.
+ * Reduced motion keeps the states without movement.
+ *
+ * Engine: motion/react (staggered variants for the entrance, layoutId pills
+ * for the hover and the theme switch) with animated icons from
+ * lucide-animated (MIT), vendored in src/icons.
+ */
+import * as React from "react";
+export type ProfileTheme = "light" | "dark" | "system";
+export type ProfileIcon = "home" | "folder" | "users" | "mail" | "card" | "activity" | "palette" | "heart" | "pin" | "bell" | "clock";
+export interface ProfileMenuItem {
+    label: string;
+    /** One of the built in animated icons. */
+    icon: ProfileIcon;
+    /** A small count on the right, like unread messages. */
+    badge?: number;
+    onSelect?: () => void;
+}
+export interface ProfileMenuProps {
+    name?: string;
+    email?: string;
+    avatar?: string;
+    /** Groups of rows, split by a thin line. Default two groups of three. */
+    groups?: ProfileMenuItem[][];
+    theme?: ProfileTheme;
+    defaultTheme?: ProfileTheme;
+    onThemeChange?: (theme: ProfileTheme) => void;
+    onSignOut?: () => void;
+    className?: string;
+}
+export declare const ProfileMenu: React.ForwardRefExoticComponent<ProfileMenuProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/project-index/index.d.ts

@@ -0,0 +1 @@
+export { ProjectIndex, type ProjectIndexProps, type ProjectItem, type ProjectEffect, } from "./project-index";

package/dist/components/project-index/project-index.d.ts

@@ -0,0 +1,65 @@
+/**
+ * ProjectIndex
+ *
+ * Trigger: hover or press (plus keys, in view and an optional timeline). An
+ * editorial project index: a numbered list of projects beside a large image
+ * panel. Pointing at a project (or selecting it, or arrowing to it) brings
+ * its photograph into focus through a WebGL transition you choose: Pixel
+ * (the image breaks into blocks and resolves into the next), Grain (a
+ * speckled dissolve through film grain), Gradient (a soft diagonal wipe
+ * with a band of light) or Mirror (the next image opens from the centre
+ * while the last one folds outward over a bright seam). The active row
+ * gets a gliding soft highlight, its title slides in a touch and an arrow
+ * springs in; the panel's caption and title roll to match, and the photo
+ * leans gently with the pointer. One press on a row or on the panel's
+ * button opens the project. Autoplay can cycle through the list with a thin
+ * progress line, pausing while you are on it. Reduced motion swaps the
+ * images with a quick fade.
+ *
+ * Engine: a WebGL fragment shader for the transitions (a GSAP tween drives
+ * the progress, the GSAP ticker draws), motion/react for the list and
+ * caption.
+ */
+import * as React from "react";
+export interface ProjectItem {
+    title: string;
+    /** A short line under the title, like "Residential, 2026". */
+    meta?: string;
+    /** Image URL. Must allow cross origin use (CORS) to be drawn in WebGL. */
+    image: string;
+    /** Describes the image for screen readers. Defaults to the title. */
+    alt?: string;
+    /** Opens on a single press. */
+    href?: string;
+}
+export type ProjectEffect = "pixel" | "grain" | "gradient" | "mirror";
+export interface ProjectIndexProps {
+    projects?: ProjectItem[];
+    /** The small heading above the list. Default `"Selected projects"`. */
+    eyebrow?: string;
+    /** The image transition. Default `"pixel"`. */
+    effect?: ProjectEffect;
+    /** Transition length in seconds. Default `0.9`. */
+    duration?: number;
+    /** How strong the effect is, 0 to 1. Default `0.6`. */
+    intensity?: number;
+    /** Bring a project into focus on hover, or only when it is pressed. Default `"hover"`. */
+    select?: "hover" | "click";
+    /** Which side the image sits on (on wide cards). Default `"right"`. */
+    imageSide?: "left" | "right";
+    /** Show the 01, 02 numbers. Default `true`. */
+    numbers?: boolean;
+    /** Show each project's meta line. Default `true`. */
+    meta?: boolean;
+    /** Cycle through the projects on its own, pausing while you are on it. Default `false`. */
+    autoplay?: boolean;
+    /** Seconds per project while autoplaying. Default `4`. */
+    interval?: number;
+    /** How far the photo leans with the pointer, 0 to 1. Default `0.5`. */
+    parallax?: number;
+    defaultIndex?: number;
+    /** Called when a project is opened (a press on its row or the panel's button). */
+    onOpen?: (project: ProjectItem, index: number) => void;
+    className?: string;
+}
+export declare const ProjectIndex: React.ForwardRefExoticComponent<ProjectIndexProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/prompt-input/index.d.ts

@@ -0,0 +1 @@
+export { PromptInput, type PromptInputProps, type PromptModel, type PromptSubmit, } from "./prompt-input";