@sharedex/ui 0.0.0-stage → 0.10.0

package/dist/carousel/layout/presets/expo.js

@@ -0,0 +1,25 @@
+import { composeLayout } from "../types.js";
+import { pack, packedSize } from "../modifiers/pack.js";
+/**
+ * An exhibition shelf: small cards stand side by side on one line and the
+ * active one opens to full size, pushing its neighbours aside. Cards are
+ * packed by their visible size (`pack()`), so the gap stays the same while one
+ * grows and the other shrinks, and they scale from their bottom edge.
+ */
+export function expo(options = {}) {
+    const small = options.small ?? 0.55;
+    const side = options.side ?? 3;
+    const dim = options.dim ?? 0.75;
+    return composeLayout("expo", pack({ small }), (buf, slot, frame) => {
+        const a = Math.abs(slot.distance);
+        buf.scaleX = buf.scaleY = packedSize(slot.distance, small);
+        // stand on the bottom edge (horizontal), or line up on the centre (vertical)
+        if (frame.axis === "x")
+            buf.originY = 1;
+        const shown = a <= side ? 1 : Math.max(0, side + 1 - a);
+        buf.opacity = (a < 1 ? 1 - (1 - dim) * a : dim) * shown;
+        buf.zIndex = 100 - Math.round(a * 10);
+        if (shown === 0)
+            buf.pointerEvents = "none";
+    });
+}

package/dist/carousel/layout/presets/expo.schema.d.ts

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

package/dist/carousel/layout/presets/expo.schema.js

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+export const EXPO_SCHEMA = defineSchema()({
+    id: "expo",
+    family: "carousel-layout",
+    factory: "expo",
+    fields: {
+        small: { kind: "number", label: "Neighbour size", min: 0.2, max: 1, step: 0.01, default: 0.55, help: "The cards beside the open one, as a share of it." },
+        side: { kind: "integer", label: "Neighbours shown", min: 1, max: 8, default: 3, help: "On each side; the next one fades out. More than 3 may need a larger mount buffer." },
+        dim: { kind: "number", label: "Neighbour opacity", min: 0, max: 1, step: 0.01, default: 0.75 },
+    },
+});

package/dist/carousel/layout/presets/fallAway.d.ts

@@ -0,0 +1,28 @@
+import { type CarouselLayout } from "../types.js";
+export interface FallAwayOptions {
+    /** How far a card drops per card from the focus, as a fraction of its height. Default `0.4`. */
+    readonly drop?: number;
+    /** Degrees it turns per card. Default `7.5`. */
+    readonly turn?: number;
+    /** Scale it loses per card. Default `0.2`. */
+    readonly shrink?: number;
+    /** Blur per card, px. Default `2`. */
+    readonly blur?: number;
+    /** Opacity it loses per card. Default `0.42`. */
+    readonly fade?: number;
+    /** How far it is pulled back towards the focus per card, as a fraction of its width. Default `0.17`. */
+    readonly pull?: number;
+    /** Past this many cards from the focus nothing changes any more. Default `2.4`. */
+    readonly cap?: number;
+    /** Fraction of the pitch removed between cards. Default `0`. */
+    readonly overlap?: number;
+}
+/**
+ * Cards that fall away as they leave: the focused card sits flat and sharp;
+ * the next ones hang lower, turned, smaller, blurred and fainter the further
+ * out they are, and the previous ones rise the same way on the other side. So
+ * a swipe lifts the outgoing card up and away while the incoming one rises
+ * from below into focus. Every term grows linearly with distance and stops at
+ * `cap`, where the card is fully faded.
+ */
+export declare function fallAway(options?: FallAwayOptions): CarouselLayout;

package/dist/carousel/layout/presets/fallAway.js

@@ -0,0 +1,45 @@
+import { composeLayout } from "../types.js";
+import { track } from "../modifiers/track.js";
+/**
+ * Cards that fall away as they leave: the focused card sits flat and sharp;
+ * the next ones hang lower, turned, smaller, blurred and fainter the further
+ * out they are, and the previous ones rise the same way on the other side. So
+ * a swipe lifts the outgoing card up and away while the incoming one rises
+ * from below into focus. Every term grows linearly with distance and stops at
+ * `cap`, where the card is fully faded.
+ */
+export function fallAway(options = {}) {
+    const drop = options.drop ?? 0.4;
+    const turn = options.turn ?? 7.5;
+    const shrink = options.shrink ?? 0.2;
+    const blur = options.blur ?? 2;
+    const fade = options.fade ?? 0.42;
+    const pull = options.pull ?? 0.17;
+    const cap = options.cap ?? 2.4;
+    return composeLayout("fallAway", track({ overlap: options.overlap ?? 0 }), (buf, slot, frame) => {
+        const k = Math.max(-cap, Math.min(cap, slot.distance));
+        const a = Math.abs(k);
+        const back = -pull * k * frame.slotMain;
+        const down = drop * k * frame.slotCross;
+        if (frame.axis === "x") {
+            buf.x += back;
+            buf.y += down;
+        }
+        else {
+            buf.y += back;
+            buf.x += down;
+        }
+        const s = Math.max(0, 1 - shrink * a);
+        buf.scaleX = s;
+        buf.scaleY = s;
+        buf.rotateZ = turn * k;
+        const opacity = Math.max(0, 1 - fade * a);
+        buf.opacity = opacity;
+        if (opacity === 0)
+            buf.pointerEvents = "none";
+        const px = blur * a;
+        if (px > 0.01)
+            buf.filter = `blur(${px.toFixed(2)}px)`;
+        buf.zIndex = 100 - Math.round(a * 10);
+    });
+}

package/dist/carousel/layout/presets/fallAway.schema.d.ts

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

package/dist/carousel/layout/presets/fallAway.schema.js

@@ -0,0 +1,16 @@
+import { defineSchema } from "../../../schema/define.js";
+export const FALL_AWAY_SCHEMA = defineSchema()({
+    id: "fallAway",
+    family: "carousel-layout",
+    factory: "fallAway",
+    fields: {
+        drop: { kind: "number", label: "Drop", min: 0, max: 1.5, step: 0.01, default: 0.4, help: "Per card from the focus, as a share of its height." },
+        turn: { kind: "number", label: "Turn", min: 0, max: 30, step: 0.5, unit: "°", default: 7.5, help: "Per card." },
+        shrink: { kind: "number", label: "Shrink", min: 0, max: 0.5, step: 0.01, default: 0.2, help: "Scale lost per card." },
+        blur: { kind: "number", label: "Blur", min: 0, max: 10, step: 0.5, unit: "px", default: 2, help: "Per card." },
+        fade: { kind: "number", label: "Fade", min: 0, max: 1, step: 0.01, default: 0.42, help: "Opacity lost per card." },
+        pull: { kind: "number", label: "Pull in", min: 0, max: 0.6, step: 0.01, default: 0.17, help: "Towards the focus, per card, as a share of its width." },
+        cap: { kind: "number", label: "Stops changing at", min: 1, max: 5, step: 0.1, default: 2.4, help: "Cards from the focus.", advanced: true },
+        overlap: { kind: "number", label: "Overlap", min: 0, max: 0.6, step: 0.01, default: 0, advanced: true },
+    },
+});

package/dist/carousel/layout/presets/fan.d.ts

@@ -0,0 +1,17 @@
+import { type CarouselLayout } from "../types.js";
+export interface FanOptions {
+    /** Fraction of pitch removed so cards overlap. Default `0.4`. */
+    readonly overlap?: number;
+    /** Degrees of tilt added per slot away from centre. Default `7`. */
+    readonly angle?: number;
+    /** Pixels the edges rise per slot away from centre. Default `26`. */
+    readonly lift?: number;
+    /** `transform-origin` Y -- the pivot the cards rotate around, below the deck. Default `1.6`. */
+    readonly pivot?: number;
+}
+/**
+ * A hand of cards: each one tilts around a pivot below the deck, so the row
+ * bows into an arc and the edges rise. 2D only -- no `perspective`, no `z`, so
+ * `serializeTransform` keeps it on the cheap `matrix()` path.
+ */
+export declare function fan(options?: FanOptions): CarouselLayout;

package/dist/carousel/layout/presets/fan.js

@@ -0,0 +1,20 @@
+import { composeLayout } from "../types.js";
+import { track } from "../modifiers/track.js";
+import { curve } from "../modifiers/curve.js";
+const SPREAD = [-3, -2, -1, 0, 1, 2, 3];
+/**
+ * A hand of cards: each one tilts around a pivot below the deck, so the row
+ * bows into an arc and the edges rise. 2D only -- no `perspective`, no `z`, so
+ * `serializeTransform` keeps it on the cheap `matrix()` path.
+ */
+export function fan(options = {}) {
+    const overlap = options.overlap ?? 0.4;
+    const a = options.angle ?? 7;
+    const l = options.lift ?? 26;
+    const pivot = options.pivot ?? 1.6;
+    return composeLayout("fan", track({ overlap }), curve("rotateZ", SPREAD, [3 * a, 2 * a, a, 0, -a, -2 * a, -3 * a]), curve("y", SPREAD, [3 * l, 2 * l, l, 0, l, 2 * l, 3 * l]), (buf, slot) => {
+        buf.originY = pivot;
+        buf.zIndex = 50 - Math.round(Math.abs(slot.distance) * 10);
+        buf.opacity = Math.max(1 - Math.abs(slot.distance) * 0.12, 0.4);
+    });
+}

package/dist/carousel/layout/presets/fan.schema.d.ts

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

package/dist/carousel/layout/presets/fan.schema.js

@@ -0,0 +1,12 @@
+import { defineSchema } from "../../../schema/define.js";
+export const FAN_SCHEMA = defineSchema()({
+    id: "fan",
+    family: "carousel-layout",
+    factory: "fan",
+    fields: {
+        overlap: { kind: "number", label: "Overlap", min: 0, max: 0.9, step: 0.01, default: 0.4, help: "Share of a card's step removed, so cards overlap." },
+        angle: { kind: "number", label: "Tilt", min: 0, max: 25, step: 0.5, unit: "°", default: 7, help: "Added per card away from the focus." },
+        lift: { kind: "number", label: "Rise", min: 0, max: 80, step: 1, unit: "px", default: 26, help: "How far the edges rise, per card away from the focus." },
+        pivot: { kind: "number", label: "Pivot", min: 0.5, max: 4, step: 0.05, default: 1.6, help: "Where the cards turn around, in card heights from the top: further down, a flatter arc.", advanced: true },
+    },
+});

package/dist/carousel/layout/presets/helix.d.ts

@@ -0,0 +1,32 @@
+import { type CarouselLayout } from "../types.js";
+export interface HelixOptions {
+    /** Cards in one full turn. Default `10`. */
+    readonly perTurn?: number;
+    /** How far each card moves along the axis, as a fraction of a card's length. Default `0.25`. */
+    readonly drop?: number;
+    /** Radius, px. Default: neighbours one card-width-plus-gap apart around the turn. */
+    readonly radius?: number;
+    /** Distance from the viewer, px (CSS `perspective`). Default `1200`. */
+    readonly perspective?: number;
+    /**
+     * `"show"`: the far side of the spiral stays visible, seen from behind.
+     * `"hide"`: cards fade out as they turn away (70° to 90°). Default `"show"`.
+     */
+    readonly back?: "hide" | "show";
+    /**
+     * Cards shown on each side of the focus; further ones fade out. Never more
+     * than half the items, so no item shows twice. Default: one full turn (`perTurn`).
+     */
+    readonly visible?: number;
+}
+/**
+ * A spiral staircase of cards: each one turns a step further around the axis
+ * and moves a little along it. Vertical carousels (`engine.axis: "y"`, the
+ * classic helix) wind around a vertical axis; horizontal ones become a
+ * corkscrew around a horizontal axis.
+ *
+ * The spiral never closes, so the usual open ring and looping apply; `reach`
+ * mounts `visible` cards each side, since the viewport maths only counts a
+ * flat row.
+ */
+export declare function helix(options?: HelixOptions): CarouselLayout;

package/dist/carousel/layout/presets/helix.js

@@ -0,0 +1,62 @@
+import { composeLayout } from "../types.js";
+import { place3d } from "../modifiers/place3d.js";
+const RAD = Math.PI / 180;
+const FADE_FROM = 70 * RAD;
+const GONE_AT = 90 * RAD;
+/**
+ * A spiral staircase of cards: each one turns a step further around the axis
+ * and moves a little along it. Vertical carousels (`engine.axis: "y"`, the
+ * classic helix) wind around a vertical axis; horizontal ones become a
+ * corkscrew around a horizontal axis.
+ *
+ * The spiral never closes, so the usual open ring and looping apply; `reach`
+ * mounts `visible` cards each side, since the viewport maths only counts a
+ * flat row.
+ */
+export function helix(options = {}) {
+    const perTurn = Math.max(options.perTurn ?? 10, 1);
+    const step = (2 * Math.PI) / perTurn;
+    const drop = options.drop ?? 0.25;
+    const hide = (options.back ?? "show") === "hide";
+    const visible = options.visible ?? perTurn;
+    const camera = { perspective: options.perspective ?? 1200 };
+    const at = { x: 0, y: 0, z: 0, rotateX: 0, rotateY: 0, rotateZ: 0, scale: 1 };
+    const layout = composeLayout("helix", (buf, slot, frame) => {
+        const d = slot.distance;
+        const radius = options.radius ?? (frame.slotCross + frame.gap) / step;
+        const phi = d * step;
+        const sin = Math.sin(phi);
+        const cos = Math.cos(phi);
+        const along = d * drop * frame.slotMain;
+        at.z = radius * (cos - 1);
+        if (frame.axis === "y") {
+            at.x = radius * sin;
+            at.y = along;
+            at.rotateX = 0;
+            at.rotateY = phi / RAD;
+        }
+        else {
+            at.x = along;
+            at.y = radius * sin;
+            at.rotateX = -phi / RAD;
+            at.rotateY = 0;
+        }
+        place3d(buf, frame, at, camera);
+        buf.zIndex = Math.round(1000 + 100 * cos - Math.abs(d));
+        // never more than half the ring each side: with few items a wider spiral
+        // would show the same item twice
+        const shown = Math.min(visible, frame.count / 2 - 0.5);
+        let opacity = Math.min(1, Math.max(0, shown + 0.5 - Math.abs(d)));
+        if (hide) {
+            const turned = Math.abs(Math.atan2(sin, cos));
+            if (turned >= GONE_AT)
+                opacity = 0;
+            else if (turned > FADE_FROM)
+                opacity *= (GONE_AT - turned) / (GONE_AT - FADE_FROM);
+        }
+        buf.opacity = opacity;
+        if (opacity === 0)
+            buf.pointerEvents = "none";
+    });
+    return { ...layout, reach: visible };
+}

package/dist/carousel/layout/presets/helix.schema.d.ts

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

package/dist/carousel/layout/presets/helix.schema.js

@@ -0,0 +1,14 @@
+import { defineSchema } from "../../../schema/define.js";
+export const HELIX_SCHEMA = defineSchema()({
+    id: "helix",
+    family: "carousel-layout",
+    factory: "helix",
+    fields: {
+        perTurn: { kind: "integer", label: "Cards per turn", min: 3, max: 24, default: 10 },
+        drop: { kind: "number", label: "Drop per card", min: 0, max: 1, step: 0.01, default: 0.25, help: "Along the axis, as a share of a card's length." },
+        radius: { kind: "number", label: "Radius", min: 100, max: 2000, step: 10, unit: "px", autoValue: 400, autoNote: "neighbours one card apart", advanced: true },
+        perspective: { kind: "number", label: "Perspective", min: 300, max: 4000, step: 50, unit: "px", default: 1200, advanced: true },
+        back: { kind: "choice", label: "Far side", values: ["show", "hide"], labels: { show: "Seen from behind", hide: "Hidden" }, default: "show" },
+        visible: { kind: "integer", label: "Cards shown", min: 1, max: 24, autoValue: 10, autoNote: "one full turn", help: "On each side of the focus; never more than half the cards." },
+    },
+});

package/dist/carousel/layout/presets/material.d.ts

@@ -0,0 +1,19 @@
+import { type CarouselLayout } from "../types.js";
+export interface MaterialOptions {
+    /** Visible width of the cards beside the large one, as a fraction of it. Default `0.25`. */
+    readonly small?: number;
+    /** Neighbours shown on each side; the next one fades out. Default `4`. */
+    readonly side?: number;
+    /** Corner radius of the visible part, px. Default `24`. */
+    readonly radius?: number;
+}
+/**
+ * The Material You (Material 3) hero carousel: one large card in the middle,
+ * narrow strips of its neighbours beside it. The neighbours are not squashed:
+ * a clip-path narrows the window onto them (the layout's `transition` CSS,
+ * from `--sx-distance`), and `pack()` places every card by its visible width,
+ * so the gaps stay even while one strip opens into the large card.
+ * Horizontal only. Under reduced motion (the clip CSS is off) the cards scale
+ * to the same widths instead, so they never overlap.
+ */
+export declare function material(options?: MaterialOptions): CarouselLayout;

package/dist/carousel/layout/presets/material.js

@@ -0,0 +1,50 @@
+import { composeAxialLayout } from "../types.js";
+import { pack, packedSize } from "../modifiers/pack.js";
+// The visible part: the card clipped from both sides by how far it sits from
+// the centre (|d| capped at 1), so the content keeps its size and stays
+// centred while the window onto it narrows. Reads the --sx-distance every slot
+// already carries; no JavaScript per frame.
+const MATERIAL_CSS = `@layer components {
+  :where([data-sx-tr="material"]) {
+    --sx-tr-k: min(max(var(--sx-distance, 0), calc(-1 * var(--sx-distance, 0))), 1);
+    clip-path: inset(0 calc(var(--sx-tr-k) * (1 - var(--sx-tr-small)) * 50%) round var(--sx-tr-radius));
+  }
+}`;
+/**
+ * The Material You (Material 3) hero carousel: one large card in the middle,
+ * narrow strips of its neighbours beside it. The neighbours are not squashed:
+ * a clip-path narrows the window onto them (the layout's `transition` CSS,
+ * from `--sx-distance`), and `pack()` places every card by its visible width,
+ * so the gaps stay even while one strip opens into the large card.
+ * Horizontal only. Under reduced motion (the clip CSS is off) the cards scale
+ * to the same widths instead, so they never overlap.
+ */
+export function material(options = {}) {
+    const small = options.small ?? 0.25;
+    const side = options.side ?? 4;
+    const radius = options.radius ?? 24;
+    const fadeOut = (a) => (a <= side ? 1 : Math.max(0, side + 1 - a));
+    const placement = pack({ small });
+    const layout = composeAxialLayout("material", "x", placement, (buf, slot) => {
+        const a = Math.abs(slot.distance);
+        buf.opacity = fadeOut(a);
+        buf.zIndex = 100 - Math.round(a * 10);
+        if (buf.opacity === 0)
+            buf.pointerEvents = "none";
+    });
+    const reduced = composeAxialLayout("material-reduced", "x", placement, (buf, slot) => {
+        const a = Math.abs(slot.distance);
+        buf.scaleX = buf.scaleY = packedSize(slot.distance, small);
+        buf.opacity = fadeOut(a);
+        if (buf.opacity === 0)
+            buf.pointerEvents = "none";
+    });
+    const transition = {
+        id: "material",
+        tier: "all",
+        css: MATERIAL_CSS,
+        vars: { "--sx-tr-small": small, "--sx-tr-radius": `${radius}px` },
+        nodes: [],
+    };
+    return { ...layout, reduced, transition };
+}

package/dist/carousel/layout/presets/material.schema.d.ts

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

package/dist/carousel/layout/presets/material.schema.js

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+export const MATERIAL_SCHEMA = defineSchema()({
+    id: "material",
+    family: "carousel-layout",
+    factory: "material",
+    fields: {
+        small: { kind: "number", label: "Strip width", min: 0.1, max: 0.8, step: 0.01, default: 0.25, help: "The visible width of the cards beside the large one, as a share of it." },
+        side: { kind: "integer", label: "Strips shown", min: 1, max: 8, default: 4, help: "On each side; the next one fades out." },
+        radius: { kind: "number", label: "Corner radius", min: 0, max: 64, step: 1, unit: "px", default: 24 },
+    },
+});

package/dist/carousel/layout/presets/panorama.d.ts

@@ -0,0 +1,28 @@
+import { type CarouselLayout } from "../types.js";
+export interface PanoramaOptions {
+    /** Degrees of the curve between one card and the next. Default `28`. */
+    readonly angle?: number;
+    /** Per-slot perspective, px: how far the viewer stands from the centre card. Default `1100`. */
+    readonly perspective?: number;
+    /** Fraction of pitch removed. Default `0`. */
+    readonly overlap?: number;
+}
+/**
+ * A curved strip seen from inside, like a panoramic photo wall: the cards
+ * stand on an arc that bends towards you, each one facing the arc's centre,
+ * so the outer cards come closer, look bigger and turn in.
+ *
+ * `track()` lays the strip out flat; the next step bends it onto a circle of
+ * radius `pitch / angle` (the arc length between two cards stays one pitch).
+ * Cards past 60° fade out and past 80° are hidden. The whole arc then moves
+ * back until the card at the viewport's edge is at its normal size (at most
+ * as far as a card at 60°): a nearer card is taller than the viewport, which
+ * would cut off its slanted top and bottom and flatten the curve.
+ *
+ * Every slot carries its own `perspective`, whose vanishing point is the
+ * slot's transform origin. The origin is moved to the viewport centre so all
+ * cards share one vanishing point, and the translation is corrected for the
+ * rotation now turning around that point instead of the card's centre.
+ * Horizontal only.
+ */
+export declare function panorama(options?: PanoramaOptions): CarouselLayout;

package/dist/carousel/layout/presets/panorama.js

@@ -0,0 +1,57 @@
+import { composeAxialLayout } from "../types.js";
+import { track } from "../modifiers/track.js";
+const DEG = 180 / Math.PI;
+/**
+ * A curved strip seen from inside, like a panoramic photo wall: the cards
+ * stand on an arc that bends towards you, each one facing the arc's centre,
+ * so the outer cards come closer, look bigger and turn in.
+ *
+ * `track()` lays the strip out flat; the next step bends it onto a circle of
+ * radius `pitch / angle` (the arc length between two cards stays one pitch).
+ * Cards past 60° fade out and past 80° are hidden. The whole arc then moves
+ * back until the card at the viewport's edge is at its normal size (at most
+ * as far as a card at 60°): a nearer card is taller than the viewport, which
+ * would cut off its slanted top and bottom and flatten the curve.
+ *
+ * Every slot carries its own `perspective`, whose vanishing point is the
+ * slot's transform origin. The origin is moved to the viewport centre so all
+ * cards share one vanishing point, and the translation is corrected for the
+ * rotation now turning around that point instead of the card's centre.
+ * Horizontal only.
+ */
+export function panorama(options = {}) {
+    const step = (options.angle ?? 28) / DEG;
+    const perspective = options.perspective ?? 1100;
+    const overlap = options.overlap ?? 0;
+    const fadeFrom = 60 / DEG;
+    const hideAt = 80 / DEG;
+    return composeAxialLayout("panorama", "x", track({ overlap }), (buf, _slot, frame) => {
+        const pitch = frame.pitch * (1 - overlap);
+        if (pitch <= 0 || frame.slotMain <= 0)
+            return;
+        const radius = pitch / step;
+        const edge = Math.asin(Math.min(1, frame.viewportMain / 2 / radius));
+        const back = radius * (1 - Math.cos(Math.min(edge, fadeFrom)));
+        const phi = (buf.x - frame.centerOffset) / radius;
+        const a = Math.abs(phi);
+        if (a >= hideAt) {
+            buf.opacity = 0;
+            buf.pointerEvents = "none";
+            return;
+        }
+        const sin = Math.sin(phi);
+        const cos = Math.cos(phi);
+        // the card's centre on the arc: x along the screen, z towards the viewer
+        const x = radius * sin;
+        const z = radius * (1 - cos);
+        // origin at the viewport centre, `o` px right of the card's own centre
+        const o = frame.centerOffset;
+        buf.originX = 0.5 + o / frame.slotMain;
+        buf.perspective = perspective;
+        buf.rotateY = -phi * DEG;
+        buf.x = frame.centerOffset + x - o * (1 - cos);
+        buf.z = z - back + o * sin;
+        buf.zIndex = 100 - Math.round(a * DEG);
+        buf.opacity = a <= fadeFrom ? 1 : (hideAt - a) / (hideAt - fadeFrom);
+    });
+}

package/dist/carousel/layout/presets/panorama.schema.d.ts

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

package/dist/carousel/layout/presets/panorama.schema.js

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+export const PANORAMA_SCHEMA = defineSchema()({
+    id: "panorama",
+    family: "carousel-layout",
+    factory: "panorama",
+    fields: {
+        angle: { kind: "number", label: "Curve", min: 5, max: 60, step: 1, unit: "°", default: 28, help: "How much the strip bends between one card and the next." },
+        perspective: { kind: "number", label: "Perspective", min: 300, max: 4000, step: 50, unit: "px", default: 1100, help: "How far the viewer stands from the centre card." },
+        overlap: { kind: "number", label: "Overlap", min: 0, max: 0.6, step: 0.01, default: 0, advanced: true },
+    },
+});

package/dist/carousel/layout/presets/ring.d.ts

@@ -0,0 +1,33 @@
+import { type CarouselLayout } from "../types.js";
+export interface RingOptions {
+    /**
+     * Degrees between neighbours. Default: 360 / the number of cards, a full
+     * dial that turns forever. Set it for an open arc; cards past 90° then fade.
+     */
+    readonly angle?: number;
+    /** Radius, px. Default: neighbours one pitch apart along the circle. */
+    readonly radius?: number;
+    /** Keep every card upright instead of turning it with the circle. Default `false`. */
+    readonly upright?: boolean;
+    /**
+     * Bend the other way. Default `false`: the circle's centre sits below the
+     * focus (a dial, the sides fall away). `true`: above it (a smile, the sides rise).
+     * On a vertical carousel the centre sits to the left, or to the right with `flip`.
+     */
+    readonly flip?: boolean;
+    /** Lean the dial back by this many degrees (needs depth, so it adds perspective). Default `0`. */
+    readonly tilt?: number;
+    /** Distance from the viewer, px, used only with `tilt`. Default `1200`. */
+    readonly perspective?: number;
+}
+/**
+ * Cards around a flat circle, like the numbers on a clock: the focused card on
+ * top, the others following the circle and turned with it (each one points
+ * away from the centre). 2D unless `tilt` is set, so it stays on the cheap
+ * `matrix()` path.
+ *
+ * With no `angle` the cards close into a full dial (`ring: "closed"`), every
+ * card mounted. A dial is about as tall as it is wide: give the viewport room
+ * below the cards (above them with `flip`).
+ */
+export declare function ring(options?: RingOptions): CarouselLayout;

package/dist/carousel/layout/presets/ring.js

@@ -0,0 +1,58 @@
+import { composeLayout } from "../types.js";
+import { place3d } from "../modifiers/place3d.js";
+const RAD = Math.PI / 180;
+const FADE_FROM = 70 * RAD;
+const GONE_AT = 90 * RAD;
+/**
+ * Cards around a flat circle, like the numbers on a clock: the focused card on
+ * top, the others following the circle and turned with it (each one points
+ * away from the centre). 2D unless `tilt` is set, so it stays on the cheap
+ * `matrix()` path.
+ *
+ * With no `angle` the cards close into a full dial (`ring: "closed"`), every
+ * card mounted. A dial is about as tall as it is wide: give the viewport room
+ * below the cards (above them with `flip`).
+ */
+export function ring(options = {}) {
+    const fixed = options.angle === undefined ? undefined : options.angle * RAD;
+    const side = options.flip ? -1 : 1;
+    const upright = options.upright ?? false;
+    const tilt = options.tilt ?? 0;
+    const camera = tilt === 0 ? { perspective: 0 } : { perspective: options.perspective ?? 1200, tilt };
+    const at = { x: 0, y: 0, z: 0, rotateX: 0, rotateY: 0, rotateZ: 0, scale: 1 };
+    const layout = composeLayout("ring", (buf, slot, frame) => {
+        const step = fixed ?? (2 * Math.PI) / Math.max(frame.count, 1);
+        const radius = options.radius ?? frame.pitch / step;
+        const phi = slot.distance * step;
+        const sin = Math.sin(phi);
+        const cos = Math.cos(phi);
+        const along = radius * sin;
+        const away = side * radius * (1 - cos);
+        if (frame.axis === "x") {
+            at.x = along;
+            at.y = away;
+        }
+        else {
+            at.x = -away;
+            at.y = along;
+        }
+        // the same angle in (-180°, 180°]: a card one turn round writes the same numbers
+        const wrapped = Math.atan2(sin, cos);
+        at.rotateZ = upright ? 0 : (side * wrapped) / RAD;
+        place3d(buf, frame, at, camera);
+        buf.zIndex = Math.round(100 + 100 * cos);
+        if (fixed === undefined)
+            return;
+        const turned = Math.abs(wrapped);
+        if (turned >= GONE_AT) {
+            buf.opacity = 0;
+            buf.pointerEvents = "none";
+        }
+        else if (turned > FADE_FROM) {
+            buf.opacity = (GONE_AT - turned) / (GONE_AT - FADE_FROM);
+        }
+    });
+    if (options.angle === undefined)
+        return { ...layout, ring: "closed", reach: Infinity };
+    return { ...layout, reach: Math.ceil(90 / Math.max(Math.abs(options.angle), 1)) + 1 };
+}

package/dist/carousel/layout/presets/ring.schema.d.ts

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

package/dist/carousel/layout/presets/ring.schema.js

@@ -0,0 +1,17 @@
+import { defineSchema } from "../../../schema/define.js";
+export const RING_SCHEMA = defineSchema()({
+    id: "ring",
+    family: "carousel-layout",
+    factory: "ring",
+    fields: {
+        angle: {
+            kind: "number", label: "Angle between cards", min: 5, max: 90, step: 1, unit: "°", autoValue: 30,
+            autoNote: "a full dial of all the cards", help: "Set it for an open arc; cards past 90° fade out.",
+        },
+        radius: { kind: "number", label: "Radius", min: 100, max: 2000, step: 10, unit: "px", autoValue: 500, autoNote: "neighbours one card apart", advanced: true },
+        upright: { kind: "boolean", label: "Keep cards upright", default: false },
+        flip: { kind: "boolean", label: "Bend the other way", default: false, help: "Off: a dial, the sides fall away. On: a smile, the sides rise." },
+        tilt: { kind: "number", label: "Lean back", min: -60, max: 60, step: 1, unit: "°", default: 0, help: "Adds depth (and a perspective)." },
+        perspective: { kind: "number", label: "Perspective", min: 300, max: 4000, step: 50, unit: "px", default: 1200, help: "Only with a lean.", advanced: true },
+    },
+});

package/dist/carousel/layout/presets/scale.d.ts

@@ -0,0 +1,18 @@
+import { type CarouselLayout } from "../types.js";
+import type { ScaleTarget } from "../modifiers/scaleCurve.js";
+export interface ScaleOptions {
+    /** Scale of a card `falloff` slots from centre. Default `0.7`. */
+    readonly min?: number;
+    /** Distance at which `min` is reached; closer cards interpolate. Default `2`. */
+    readonly falloff?: number;
+    /** Fraction of pitch removed. Default `0` (cards keep their measured gap). */
+    readonly overlap?: number;
+    /** Which axes to scale. Default `"both"`. */
+    readonly target?: ScaleTarget;
+}
+/**
+ * The plain one: cards stay in a row, the centre card is full size and every
+ * other card is smaller the further out it sits. A touch of dimming with it so
+ * the row reads as having depth.
+ */
+export declare function scale(options?: ScaleOptions): CarouselLayout;