@sharedex/ui 0.0.0-stage → 0.10.0

package/dist/carousel/layout/modifiers/pack.d.ts

@@ -0,0 +1,24 @@
+import type { SlotModifier } from "../types.js";
+export interface PackOptions {
+    /**
+     * Visible size of a card one step or more from the centre, as a fraction of
+     * the centre card (0..1). Default `0.4`.
+     */
+    readonly small?: number;
+}
+/** Visible size at `distance`: 1 at the centre, `small` from one step out, linear between. */
+export declare function packedSize(distance: number, small: number): number;
+/**
+ * Centre offset at `distance`, in units of the card's main size: the centre
+ * card at full size, every other card at `small`, all `gap` apart. Linear
+ * between whole distances, so two cards always keep the same gap while the
+ * incoming one grows and the outgoing one shrinks.
+ */
+export declare function packedOffset(distance: number, small: number, gap: number): number;
+/**
+ * Main-axis placement for looks whose cards change size (`expo`, `material`):
+ * cards sit by their **visible** size, the engine's gap apart, instead of a
+ * fixed pitch. The look itself then shrinks the cards to that size (scale or a
+ * clip). Reads `frame.axis` like `track()` and `converge()`.
+ */
+export declare function pack(options?: PackOptions): SlotModifier;

package/dist/carousel/layout/modifiers/pack.js

@@ -0,0 +1,35 @@
+/** Visible size at `distance`: 1 at the centre, `small` from one step out, linear between. */
+export function packedSize(distance, small) {
+    const a = Math.abs(distance);
+    return 1 - (1 - small) * (a < 1 ? a : 1);
+}
+/**
+ * Centre offset at `distance`, in units of the card's main size: the centre
+ * card at full size, every other card at `small`, all `gap` apart. Linear
+ * between whole distances, so two cards always keep the same gap while the
+ * incoming one grows and the outgoing one shrinks.
+ */
+export function packedOffset(distance, small, gap) {
+    const a = Math.abs(distance);
+    const first = 0.5 + gap + small / 2;
+    const offset = a <= 1 ? a * first : first + (a - 1) * (small + gap);
+    return distance < 0 ? -offset : offset;
+}
+/**
+ * Main-axis placement for looks whose cards change size (`expo`, `material`):
+ * cards sit by their **visible** size, the engine's gap apart, instead of a
+ * fixed pitch. The look itself then shrinks the cards to that size (scale or a
+ * clip). Reads `frame.axis` like `track()` and `converge()`.
+ */
+export function pack(options = {}) {
+    const small = options.small ?? 0.4;
+    return (buf, slot, frame) => {
+        const size = frame.slotMain;
+        const gap = size > 0 ? frame.gap / size : 0;
+        const main = frame.centerOffset + packedOffset(slot.distance, small, gap) * size;
+        if (frame.axis === "x")
+            buf.x = main;
+        else
+            buf.y = main;
+    };
+}

package/dist/carousel/layout/modifiers/place3d.d.ts

@@ -0,0 +1,54 @@
+import type { CarouselFrame, SlotFrameBuffer } from "../../engine/types.js";
+/** Where one card sits in the scene and how it is turned. */
+export interface Place3d {
+    /**
+     * The card's centre, px, measured from the camera: +x right, +y down, +z
+     * towards the viewer (CSS axes). On the main axis the camera is the viewport
+     * centre; on the cross axis it is the card's own centre line.
+     */
+    x: number;
+    y: number;
+    z: number;
+    /** The card's own turn, degrees, applied like CSS `rotateX() rotateY() rotateZ()`. */
+    rotateX: number;
+    rotateY: number;
+    rotateZ: number;
+    /** Uniform scale. 1 = the card's own size. */
+    scale: number;
+}
+/** The one camera every card is seen through. */
+export interface Camera3d {
+    /** Distance from the viewer to the scene, px (CSS `perspective`). */
+    readonly perspective: number;
+    /** The whole scene leans back by this many degrees (`rotateX`); negative looks down on it. Default 0. */
+    readonly tilt?: number;
+}
+/**
+ * Placement for 3D shapes (a barrel, a helix, a sphere): put the card's centre
+ * at a point of one shared scene, turned as asked, seen from one camera.
+ *
+ * There is no shared `preserve-3d` stage (the Track's animated opacity would
+ * flatten it), so each slot carries its own `perspective`. A per-slot
+ * perspective looks from the slot's transform origin, so the origin moves to
+ * the camera, on the main axis `centerOffset` px from the card's untransformed
+ * centre, and the translation is corrected for the turn now happening around
+ * that point: `t = point - scale · R · (centre - origin)`. Every card then
+ * projects as if one camera saw them all (`panorama()` does the same on x).
+ *
+ * The scene tilt rotates the point about the camera's horizontal line and is
+ * prepended to the card's turn; CSS applies `rotateX` first, so it folds into
+ * `rotateX`.
+ *
+ * Like `track()` this is a placement step and reads `frame.axis`, so it runs
+ * first in a layout. Pass a `Place3d` the layout reuses: no allocation per frame.
+ */
+export declare function place3d(buf: SlotFrameBuffer, frame: CarouselFrame, at: Place3d, camera: Camera3d): void;
+/**
+ * Add a turn to a card that is already placed, around the card's OWN centre.
+ *
+ * A layout built on `place3d` moved the transform origin to the camera, so a
+ * plain `buf.rotateY += deg` would swing the card around the viewport centre.
+ * This keeps the card's centre where it was: `t += S · (R_old − R_new) · (centre − origin)`.
+ * With the origin at the card's centre (every `track()` layout) the correction is 0.
+ */
+export declare function turnInPlace(buf: SlotFrameBuffer, frame: CarouselFrame, rotateX: number, rotateY: number): void;

package/dist/carousel/layout/modifiers/place3d.js

@@ -0,0 +1,102 @@
+const RAD = Math.PI / 180;
+/**
+ * Placement for 3D shapes (a barrel, a helix, a sphere): put the card's centre
+ * at a point of one shared scene, turned as asked, seen from one camera.
+ *
+ * There is no shared `preserve-3d` stage (the Track's animated opacity would
+ * flatten it), so each slot carries its own `perspective`. A per-slot
+ * perspective looks from the slot's transform origin, so the origin moves to
+ * the camera, on the main axis `centerOffset` px from the card's untransformed
+ * centre, and the translation is corrected for the turn now happening around
+ * that point: `t = point - scale · R · (centre - origin)`. Every card then
+ * projects as if one camera saw them all (`panorama()` does the same on x).
+ *
+ * The scene tilt rotates the point about the camera's horizontal line and is
+ * prepended to the card's turn; CSS applies `rotateX` first, so it folds into
+ * `rotateX`.
+ *
+ * Like `track()` this is a placement step and reads `frame.axis`, so it runs
+ * first in a layout. Pass a `Place3d` the layout reuses: no allocation per frame.
+ */
+export function place3d(buf, frame, at, camera) {
+    const tilt = camera.tilt ?? 0;
+    const t = tilt * RAD;
+    const ct = Math.cos(t);
+    const st = Math.sin(t);
+    const px = at.x;
+    const py = at.y * ct - at.z * st;
+    const pz = at.y * st + at.z * ct;
+    const ax = (at.rotateX + tilt) * RAD;
+    const ay = at.rotateY * RAD;
+    const az = at.rotateZ * RAD;
+    const cx = Math.cos(ax);
+    const sx = Math.sin(ax);
+    const cy = Math.cos(ay);
+    const sy = Math.sin(ay);
+    const cz = Math.cos(az);
+    const sz = Math.sin(az);
+    // centre - origin, in the card's box: the camera sits `o` px along the main axis
+    const o = frame.centerOffset;
+    const vx = frame.axis === "x" ? -o : 0;
+    const vy = frame.axis === "y" ? -o : 0;
+    // R · v, R = Rx · Ry · Rz (v.z is 0)
+    const x1 = cz * vx - sz * vy;
+    const y1 = sz * vx + cz * vy;
+    const x2 = cy * x1;
+    const z2 = -sy * x1;
+    const y3 = cx * y1 - sx * z2;
+    const z3 = sx * y1 + cx * z2;
+    const s = at.scale;
+    buf.perspective = camera.perspective;
+    buf.x = px - s * x2;
+    buf.y = py - s * y3;
+    buf.z = pz - s * z3;
+    buf.scaleX = s;
+    buf.scaleY = s;
+    buf.scaleZ = s;
+    buf.rotateX = at.rotateX + tilt;
+    buf.rotateY = at.rotateY;
+    buf.rotateZ = at.rotateZ;
+    const shift = frame.slotMain > 0 ? o / frame.slotMain : 0;
+    buf.originX = frame.axis === "x" ? 0.5 + shift : 0.5;
+    buf.originY = frame.axis === "y" ? 0.5 + shift : 0.5;
+}
+/** `S · Rx(a) · Ry(b) · Rz(c) · v` for the buffer's scale and the given turn (degrees); `v.z` is 0. */
+function turned(buf, a, b, c, vx, vy) {
+    const cx = Math.cos(a * RAD);
+    const sx = Math.sin(a * RAD);
+    const cy = Math.cos(b * RAD);
+    const sy = Math.sin(b * RAD);
+    const cz = Math.cos(c * RAD);
+    const sz = Math.sin(c * RAD);
+    const x1 = cz * vx - sz * vy;
+    const y1 = sz * vx + cz * vy;
+    const x2 = cy * x1;
+    const z2 = -sy * x1;
+    const y3 = cx * y1 - sx * z2;
+    const z3 = sx * y1 + cx * z2;
+    return [buf.scaleX * x2, buf.scaleY * y3, buf.scaleZ * z3];
+}
+/**
+ * Add a turn to a card that is already placed, around the card's OWN centre.
+ *
+ * A layout built on `place3d` moved the transform origin to the camera, so a
+ * plain `buf.rotateY += deg` would swing the card around the viewport centre.
+ * This keeps the card's centre where it was: `t += S · (R_old − R_new) · (centre − origin)`.
+ * With the origin at the card's centre (every `track()` layout) the correction is 0.
+ */
+export function turnInPlace(buf, frame, rotateX, rotateY) {
+    if (rotateX === 0 && rotateY === 0)
+        return;
+    const boxW = frame.axis === "x" ? frame.slotMain : frame.slotCross;
+    const boxH = frame.axis === "x" ? frame.slotCross : frame.slotMain;
+    const vx = (0.5 - buf.originX) * boxW;
+    const vy = (0.5 - buf.originY) * boxH;
+    const before = turned(buf, buf.rotateX, buf.rotateY, buf.rotateZ, vx, vy);
+    buf.rotateX += rotateX;
+    buf.rotateY += rotateY;
+    const after = turned(buf, buf.rotateX, buf.rotateY, buf.rotateZ, vx, vy);
+    buf.x += before[0] - after[0];
+    buf.y += before[1] - after[1];
+    buf.z += before[2] - after[2];
+}

package/dist/carousel/layout/modifiers/scaleCurve.d.ts

@@ -0,0 +1,10 @@
+import type { SlotModifier } from "../types.js";
+export type ScaleTarget = "both" | "x" | "y";
+/**
+ * Interpolate a scale off `distance` along a keyframed curve.
+ *
+ * `useTransform(distance, [-2,-1,0,1,2], [0.8,0.9,1,0.9,0.8])` in 0.1.0, but
+ * evaluated inside the single per-slot write instead of as its own MotionValue
+ * with its own scheduler entry.
+ */
+export declare function scaleCurve(inputRange: readonly number[], outputRange: readonly number[], target?: ScaleTarget): SlotModifier;

package/dist/carousel/layout/modifiers/scaleCurve.js

@@ -0,0 +1,24 @@
+import { makeCurve } from "../curve.js";
+/**
+ * Interpolate a scale off `distance` along a keyframed curve.
+ *
+ * `useTransform(distance, [-2,-1,0,1,2], [0.8,0.9,1,0.9,0.8])` in 0.1.0, but
+ * evaluated inside the single per-slot write instead of as its own MotionValue
+ * with its own scheduler entry.
+ */
+export function scaleCurve(inputRange, outputRange, target = "y") {
+    const curve = makeCurve(inputRange, outputRange);
+    return (buf, slot) => {
+        const s = curve(slot.distance);
+        if (target === "both") {
+            buf.scaleX = s;
+            buf.scaleY = s;
+        }
+        else if (target === "x") {
+            buf.scaleX = s;
+        }
+        else {
+            buf.scaleY = s;
+        }
+    };
+}

package/dist/carousel/layout/modifiers/speed.d.ts

@@ -0,0 +1,37 @@
+import type { SlotModifier } from "../types.js";
+export interface SpeedWaveOptions {
+    /** Height of the wave at full speed, px, across the track. Default `60`. */
+    readonly height?: number;
+    /** Cards from one crest to the next. Default `4`. */
+    readonly length?: number;
+    /** Speed (cards a second) at which the wave reaches its full height. Default `4`. */
+    readonly full?: number;
+}
+export interface SpeedTiltOptions {
+    /** Degrees of lean per card-a-second of speed. Default `8`. */
+    readonly lean?: number;
+    /** The most a card leans, degrees. Default `35`. */
+    readonly max?: number;
+    /** Perspective for cards that have none (a flat layout), px. Default `1000`. */
+    readonly perspective?: number;
+}
+/**
+ * A wave across the track that only exists while the carousel moves: each
+ * card bobs to the side on a sine that travels along the cards, its height
+ * growing with the speed, and the row straightens as it slows. Add it to any
+ * preset with `modify(preset, speedWave())`, which also drops it under reduced
+ * motion.
+ *
+ * Pure like every modifier: the height reads `frame.velocity`, the phase reads
+ * `slot.index + frame.position`, so the wave runs along the cards as they
+ * move. At `mode` idle it is exactly 0.
+ */
+export declare function speedWave(options?: SpeedWaveOptions): SlotModifier;
+/**
+ * Every card leans by the same angle while the carousel moves, as if pushed
+ * by the motion, and straightens as it slows: `rotateY` on a horizontal
+ * carousel (`rotateX` on a vertical one), proportional to the speed, capped at
+ * `max`. Each card turns around its own centre, also on 3D shapes (`barrel`,
+ * `helix` …). Add it with `modify(preset, speedTilt())`; exactly 0 at rest.
+ */
+export declare function speedTilt(options?: SpeedTiltOptions): SlotModifier;

package/dist/carousel/layout/modifiers/speed.js

@@ -0,0 +1,52 @@
+import { turnInPlace } from "./place3d.js";
+/**
+ * A wave across the track that only exists while the carousel moves: each
+ * card bobs to the side on a sine that travels along the cards, its height
+ * growing with the speed, and the row straightens as it slows. Add it to any
+ * preset with `modify(preset, speedWave())`, which also drops it under reduced
+ * motion.
+ *
+ * Pure like every modifier: the height reads `frame.velocity`, the phase reads
+ * `slot.index + frame.position`, so the wave runs along the cards as they
+ * move. At `mode` idle it is exactly 0.
+ */
+export function speedWave(options = {}) {
+    const height = options.height ?? 60;
+    const length = Math.max(options.length ?? 4, 0.001);
+    const full = Math.max(options.full ?? 4, 0.001);
+    return (buf, slot, frame) => {
+        if (frame.mode === "idle" || frame.velocity === 0)
+            return;
+        const amount = height * Math.min(1, Math.abs(frame.velocity) / full);
+        const offset = amount * Math.sin((2 * Math.PI * (slot.index + frame.position)) / length);
+        if (frame.axis === "x")
+            buf.y += offset;
+        else
+            buf.x += offset;
+    };
+}
+/**
+ * Every card leans by the same angle while the carousel moves, as if pushed
+ * by the motion, and straightens as it slows: `rotateY` on a horizontal
+ * carousel (`rotateX` on a vertical one), proportional to the speed, capped at
+ * `max`. Each card turns around its own centre, also on 3D shapes (`barrel`,
+ * `helix` …). Add it with `modify(preset, speedTilt())`; exactly 0 at rest.
+ */
+export function speedTilt(options = {}) {
+    const lean = options.lean ?? 8;
+    const max = options.max ?? 35;
+    const perspective = options.perspective ?? 1000;
+    return (buf, _slot, frame) => {
+        if (frame.mode === "idle" || frame.velocity === 0)
+            return;
+        const deg = Math.max(-max, Math.min(max, frame.velocity * lean));
+        if (deg === 0)
+            return;
+        if (buf.perspective === 0)
+            buf.perspective = perspective;
+        if (frame.axis === "x")
+            turnInPlace(buf, frame, 0, deg);
+        else
+            turnInPlace(buf, frame, -deg, 0);
+    };
+}

package/dist/carousel/layout/modifiers/speed.schema.d.ts

@@ -0,0 +1,2 @@
+export declare const SPEED_WAVE_SCHEMA: import("../../../schema/types.js").Schema;
+export declare const SPEED_TILT_SCHEMA: import("../../../schema/types.js").Schema;

package/dist/carousel/layout/modifiers/speed.schema.js

@@ -0,0 +1,21 @@
+import { defineSchema } from "../../../schema/define.js";
+export const SPEED_WAVE_SCHEMA = defineSchema()({
+    id: "speedWave",
+    family: "carousel-modifier",
+    factory: "speedWave",
+    fields: {
+        height: { kind: "number", label: "Height", min: 0, max: 200, step: 1, unit: "px", default: 60, help: "At full speed, across the track." },
+        length: { kind: "number", label: "Wavelength", min: 1, max: 12, step: 0.5, default: 4, help: "Cards from one crest to the next." },
+        full: { kind: "number", label: "Full at", min: 0.5, max: 20, step: 0.5, default: 4, help: "Speed (cards a second) at which the wave reaches its full height." },
+    },
+});
+export const SPEED_TILT_SCHEMA = defineSchema()({
+    id: "speedTilt",
+    family: "carousel-modifier",
+    factory: "speedTilt",
+    fields: {
+        lean: { kind: "number", label: "Lean", min: 0, max: 30, step: 0.5, unit: "°", default: 8, help: "Per card a second of speed." },
+        max: { kind: "number", label: "Most lean", min: 0, max: 80, step: 1, unit: "°", default: 35 },
+        perspective: { kind: "number", label: "Perspective", min: 300, max: 4000, step: 50, unit: "px", default: 1000, help: "For flat layouts; 3D shapes keep their own.", advanced: true },
+    },
+});

package/dist/carousel/layout/modifiers/stack.d.ts

@@ -0,0 +1,30 @@
+import type { SlotModifier } from "../types.js";
+export interface StackOptions {
+    /**
+     * Which card of a moving pair paints on top.
+     *
+     * - `"incoming"` (default): the card coming in covers the one leaving (wipes, push).
+     * - `"outgoing"`: the card leaving stays on top and uncovers the next (tinder, card stacks).
+     * - `"nearest"`: whichever is closer to the centre; on a tie the outgoing one.
+     */
+    readonly order?: "incoming" | "outgoing" | "nearest";
+    /**
+     * How many upcoming cards (distance ≥ 1) stay visible behind the moving pair.
+     * Default `0`: only the card at rest, or the two cards of a transition, show.
+     */
+    readonly ahead?: number;
+}
+/**
+ * Placement for the one-card stage: every slot sits on the centre, on top of
+ * each other. The third placement modifier, next to `track()` and `converge()`,
+ * and like them the only part of its chain that reads `frame.axis`.
+ *
+ * A slot is visible only while `-1 < distance < 1 + ahead`; the rest get
+ * opacity 0 and no pointer events, so the mounted buffer slots never show.
+ * Only the card nearest the centre takes pointer events.
+ *
+ * Moving forward, the next card's distance goes 1 → 0 while the current one's
+ * goes 0 → -1. Moving back plays the same thing in reverse, which is exactly
+ * what a drag that changes its mind should look like.
+ */
+export declare function stack(options?: StackOptions): SlotModifier;

package/dist/carousel/layout/modifiers/stack.js

@@ -0,0 +1,40 @@
+/**
+ * Placement for the one-card stage: every slot sits on the centre, on top of
+ * each other. The third placement modifier, next to `track()` and `converge()`,
+ * and like them the only part of its chain that reads `frame.axis`.
+ *
+ * A slot is visible only while `-1 < distance < 1 + ahead`; the rest get
+ * opacity 0 and no pointer events, so the mounted buffer slots never show.
+ * Only the card nearest the centre takes pointer events.
+ *
+ * Moving forward, the next card's distance goes 1 → 0 while the current one's
+ * goes 0 → -1. Moving back plays the same thing in reverse, which is exactly
+ * what a drag that changes its mind should look like.
+ */
+export function stack(options = {}) {
+    const order = options.order ?? "incoming";
+    const ahead = options.ahead ?? 0;
+    return (buf, slot, frame) => {
+        if (frame.axis === "x")
+            buf.x = frame.centerOffset;
+        else
+            buf.y = frame.centerOffset;
+        const d = slot.distance;
+        const abs = Math.abs(d);
+        if (d <= -1 || d >= 1 + ahead) {
+            buf.opacity = 0;
+            buf.zIndex = 0;
+            buf.pointerEvents = "none";
+            return;
+        }
+        // Steps of a tenth keep integer z-indices apart at every fractional distance.
+        const tenths = Math.round(d * 10);
+        if (order === "incoming")
+            buf.zIndex = 100 + tenths;
+        else if (order === "outgoing")
+            buf.zIndex = 100 - tenths;
+        else
+            buf.zIndex = 100 - Math.round(abs * 10) * 2 + (d < 0 ? 1 : 0);
+        buf.pointerEvents = abs < 0.5 ? "auto" : "none";
+    };
+}

package/dist/carousel/layout/modifiers/track.d.ts

@@ -0,0 +1,21 @@
+import type { SlotModifier } from "../types.js";
+export interface TrackOptions {
+    /**
+     * Fraction of the pitch to remove, 0..1. 0 lays cards edge to edge at their
+     * measured pitch; 0.35 pulls them 35% closer so they overlap, which is what
+     * deck / coverflow / fan want.
+     */
+    readonly overlap?: number;
+}
+/**
+ * Main-axis placement. Every layout starts here.
+ *
+ * This is the one modifier that reads `frame.axis`, which is why "vertical" is
+ * not a preset: `axis="y"` reroutes the same number into `buf.y` and every
+ * layout composes with it unchanged.
+ *
+ * Position is absolute, never accumulated -- a slot's offset is a pure function
+ * of its own distance, so there is no drift to correct and no ring width to
+ * measure.
+ */
+export declare function track(options?: TrackOptions): SlotModifier;

package/dist/carousel/layout/modifiers/track.js

@@ -0,0 +1,22 @@
+/**
+ * Main-axis placement. Every layout starts here.
+ *
+ * This is the one modifier that reads `frame.axis`, which is why "vertical" is
+ * not a preset: `axis="y"` reroutes the same number into `buf.y` and every
+ * layout composes with it unchanged.
+ *
+ * Position is absolute, never accumulated -- a slot's offset is a pure function
+ * of its own distance, so there is no drift to correct and no ring width to
+ * measure.
+ */
+export function track(options = {}) {
+    const overlap = options.overlap ?? 0;
+    const factor = 1 - overlap;
+    return (buf, slot, frame) => {
+        const main = frame.centerOffset + slot.distance * frame.pitch * factor;
+        if (frame.axis === "x")
+            buf.x = main;
+        else
+            buf.y = main;
+    };
+}

package/dist/carousel/layout/open.d.ts

@@ -0,0 +1,67 @@
+import { type CarouselLayout } from "./types.js";
+export interface OpenView {
+    readonly kind: "inline" | "detail" | "panel";
+    /** The layout while a card is open, built from the carousel's own. The same object for the same base. */
+    layout(base: CarouselLayout): CarouselLayout;
+    /** Share of the viewport's main axis the panel takes (`panel` view only, else 0). */
+    readonly panel: number;
+    /** Close after this many px of page scroll while open. 0 = never. */
+    readonly closeOnScroll: number;
+}
+export interface InlineOptions {
+    /** Scale of the open card. Default `1.5`. */
+    readonly size?: number;
+    /** Extra px between the open card and its neighbours. Default `24`. */
+    readonly room?: number;
+    /** Close after this many px of page scroll. Default `0` (never). */
+    readonly closeOnScroll?: number;
+}
+export interface DetailOptions {
+    /** Scale of the thumbnails. Default `0.49`. */
+    readonly strip?: number;
+    /** px between thumbnails. Default `12`. */
+    readonly gap?: number;
+    /** Share of the free space the open card may fill. Default `0.9`. */
+    readonly fit?: number;
+    /** px around the strip. Default `16`. */
+    readonly margin?: number;
+    /** Thumbnails mounted on each side. Default `8`. */
+    readonly reach?: number;
+    /** Close after this many px of page scroll. Default `0` (never). */
+    readonly closeOnScroll?: number;
+}
+export interface PanelOptions extends DetailOptions {
+    /** Share of the viewport's main axis the panel takes, at the end side. Default `0.42`. */
+    readonly panel?: number;
+}
+/**
+ * The open card grows in place (`size`) and its neighbours step aside to make
+ * room; the carousel's own layout stays. Best on flat layouts: the growth is a
+ * scale around the card's transform origin.
+ */
+declare function inline(options?: InlineOptions): OpenView;
+/**
+ * The open card fills a large box; every other card shrinks into a strip of
+ * thumbnails along the far edge (the bottom on a horizontal carousel). Give the
+ * viewport room for both: its height, not one card's.
+ */
+declare function detail(options?: DetailOptions): OpenView;
+/**
+ * Like `detail`, with the open card moved towards the start to leave `panel`
+ * of the width for `<Carousel.Panel>`, the consumer's text about the card.
+ */
+declare function panel(options?: PanelOptions): OpenView;
+/**
+ * How a carousel shows an open card, for `engine.open`:
+ *
+ * ```ts
+ * config={{ engine: { open: openView.detail() } }}
+ * // in a card: onClick={() => engine.open(itemIndex)}; Esc or engine.close() closes
+ * ```
+ */
+export declare const openView: {
+    readonly inline: typeof inline;
+    readonly detail: typeof detail;
+    readonly panel: typeof panel;
+};
+export {};