@rivetjs/cdk 0.0.0-stage → 0.1.0-alpha.0

package/masonry/flip.d.ts

@@ -0,0 +1,27 @@
+import { stopFlip, type FlipDriver } from "../flip/index.js";
+import type { Key, Rect } from "./layout.js";
+export { stopFlip };
+export interface MotionOptions {
+    /** Motion1D base duration (embla units, default 25). */
+    duration?: number;
+    /** Motion1D friction (default 0.68). */
+    friction?: number;
+}
+/** Item boxes (start-edge x) relative to the grid, by key. */
+export type Boxes = Map<Key, Rect>;
+/** Whether relayouts animate here (`motion` prop, reduced-motion preference). */
+export declare const motionAllowed: (motion: boolean | MotionOptions | FlipDriver | undefined) => boolean;
+/** The grid's direct items. */
+export declare function gridItems(grid: HTMLElement): HTMLElement[];
+/** Visual boxes of the items whose relayout animation is still running (start-edge x, grid-relative); empty otherwise. */
+export declare function animatingBoxes(grid: HTMLElement, rtl: boolean): Boxes;
+/** Read phase: the current (visual) boxes of every item, start-edge x, relative to the grid. */
+export declare function captureBoxes(grid: HTMLElement, rtl: boolean): {
+    boxes: Boxes;
+    width: number;
+};
+/**
+ * Write phase: animate every item from `before` to `after` (start-edge boxes relative to the grid). `viewport` = the
+ * visible band of the grid in grid coordinates (items outside it before and after jump).
+ */
+export declare function playFlip(grid: HTMLElement, before: Boxes, after: Boxes, rtl: boolean, viewport: [number, number], options?: MotionOptions | FlipDriver, finalOf?: (key: Key) => Readonly<Record<string, string>> | undefined): void;

package/masonry/flip.js

@@ -0,0 +1,61 @@
+// Rivet-authored (not a port): animated relayout of `@rivetjs/cdk/masonry` over the shared FLIP core (`../flip`). When
+// the layout changes on the client (an item grows / shrinks, items reorder), the items that moved start at their old
+// box and travel to the new one on the house motion (or the `motion` prop's `FlipDriver`):
+// - First: BEFORE the new styles land; server-placed grids take it from the previous geometry (one grid rect read,
+//   `animatingBoxes` for items still moving), measured grids read every item once (`captureBoxes`);
+// - Last: the new boxes come from the pure geometry (no read after the writes);
+// - Invert + Play: `../flip` `playFlip` (the grown item animates its size, neighbours slide); on settle the overrides
+//   go away and the CSS geometry stays.
+// This adapter maps item keys (`data-key`) to elements. `prefers-reduced-motion: reduce` or `motion={false}` skip it.
+import { animatingBoxes as boxesOf, flipAllowed, motion1dDriver, playFlip as play, stopFlip } from "../flip/index.js";
+export { stopFlip };
+const keyOf = (el) => {
+    const raw = el.getAttribute("data-key");
+    return el.getAttribute("data-key-type") === "number" ? Number(raw) : raw;
+};
+/** Whether relayouts animate here (`motion` prop, reduced-motion preference). */
+export const motionAllowed = flipAllowed;
+/** The grid's direct items. */
+export function gridItems(grid) {
+    const out = [];
+    for (const el of grid.children)
+        if (el.hasAttribute?.("data-rv-item"))
+            out.push(el);
+    return out;
+}
+const byKey = (boxes) => {
+    const out = new Map();
+    for (const [el, box] of boxes)
+        out.set(keyOf(el), box);
+    return out;
+};
+/** Visual boxes of the items whose relayout animation is still running (start-edge x, grid-relative); empty otherwise. */
+export function animatingBoxes(grid, rtl) {
+    return byKey(boxesOf(grid, rtl));
+}
+/** Read phase: the current (visual) boxes of every item, start-edge x, relative to the grid. */
+export function captureBoxes(grid, rtl) {
+    const g = grid.getBoundingClientRect();
+    const boxes = new Map();
+    for (const el of gridItems(grid)) {
+        const r = el.getBoundingClientRect();
+        boxes.set(keyOf(el), { x: rtl ? g.right - r.right : r.left - g.left, y: r.top - g.top, width: r.width, height: r.height });
+    }
+    return { boxes, width: g.width };
+}
+/**
+ * Write phase: animate every item from `before` to `after` (start-edge boxes relative to the grid). `viewport` = the
+ * visible band of the grid in grid coordinates (items outside it before and after jump).
+ */
+export function playFlip(grid, before, after, rtl, viewport, options, finalOf) {
+    const items = [];
+    for (const el of gridItems(grid)) {
+        const key = keyOf(el);
+        const from = before.get(key);
+        const to = after.get(key);
+        if (from && to)
+            items.push({ el, from, to, final: finalOf && (() => finalOf(key)) });
+    }
+    const driver = options && "play" in options ? options : motion1dDriver(options);
+    play(grid, items, { viewport, rtl, driver });
+}

package/masonry/geometry.d.ts

@@ -0,0 +1,44 @@
+/** Number → shortest CSS form (4 decimals). */
+export declare const num: (x: number) => string;
+/**
+ * Item boxes of one breakpoint. Item i: start edge `x[2i]·u + x[2i+1]`, width / height / top likewise; `topMore[i]` /
+ * `heightMore[i]` hold extra `[k, c, k, c, …]` terms (the value is the max of all its terms); `ratio[i] > 0` means
+ * height = width / ratio exactly (written as CSS `aspect-ratio`); `extent` = content height terms (max).
+ */
+export interface Geometry {
+    count: number;
+    x: Float64Array;
+    width: Float64Array;
+    height: Float64Array;
+    top: Float64Array;
+    topMore: (Float64Array | null)[] | null;
+    heightMore: (Float64Array | null)[] | null;
+    ratio: Float64Array;
+    extent: Float64Array;
+}
+export declare function emptyGeometry(count: number): Geometry;
+export interface Rect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/** Pixel rects (x from the start edge) of a geometry at unit `u`. */
+export declare function rectsAt(g: Geometry, u: number): Rect[];
+/** Content height of a geometry at unit `u`. */
+export declare function extentAt(g: Geometry, u: number): number;
+/**
+ * Union of term sets `[k, c, …]` without the terms dominated over `[lo, hi]` (≤ another term at both ends: then ≤ it on
+ * the whole range). The max of what is left equals the max of the inputs on the range.
+ */
+export declare function pruneTerms(terms: readonly number[], lo: number, hi: number): number[];
+/** `k·u + c` px at breakpoint b as a CSS term (several breakpoints: masked, so it is ≈ −1e9 px outside b's range). */
+export declare function linear(k: number, c: number, b: number, single: boolean): string;
+/**
+ * Inline style of item i placed by `geometries` (one per breakpoint): absolute `top` / `inset-inline-start`, `width`
+ * (`var(--rv-mw)` when it is one column everywhere) and `height` (CSS `aspect-ratio` when it is width / ratio in every
+ * breakpoint). Frozen: the runtime writes a frozen style object as one validated `cssText`.
+ */
+export declare function geometryStyle(geometries: readonly Geometry[], i: number): Record<string, string>;
+/** Grid height (content extent) across breakpoints. */
+export declare function geometryHeight(geometries: readonly Geometry[]): string;

package/masonry/geometry.js

@@ -0,0 +1,184 @@
+// Rivet-authored (not a port): the shared geometry of `@rivetjs/cdk/masonry` — every layout (masonry columns, justified
+// rows, Bento tiles) produces, per breakpoint, item boxes whose edges are LINEAR in the breakpoint's unit `u` (the
+// column width; justified rows: the container width), `k·u + c` px. A top can be the max of several such terms (an
+// item spanning columns sits under the lowest of them; a stretched last tile reaches the tallest column). That is what
+// makes the server CSS exact at any container width of a breakpoint (`max()` of masked terms, see `gridVars`), and what
+// the client evaluates at a width (`rectsAt`) for keyboard geometry, FLIP animation and tests. Pure, DOM-free.
+/** Number → shortest CSS form (4 decimals). */
+export const num = (x) => String(Math.round(x * 1e4) / 1e4);
+export function emptyGeometry(count) {
+    return {
+        count,
+        x: new Float64Array(count * 2),
+        width: new Float64Array(count * 2),
+        height: new Float64Array(count * 2),
+        top: new Float64Array(count * 2),
+        topMore: null,
+        heightMore: null,
+        ratio: new Float64Array(count),
+        extent: new Float64Array(0),
+    };
+}
+const maxAt = (base, i, more, u) => {
+    let v = base[2 * i] * u + base[2 * i + 1];
+    if (more)
+        for (let t = 0; t < more.length; t += 2)
+            v = Math.max(v, more[t] * u + more[t + 1]);
+    return v;
+};
+/** Pixel rects (x from the start edge) of a geometry at unit `u`. */
+export function rectsAt(g, u) {
+    const out = new Array(g.count);
+    for (let i = 0; i < g.count; i++)
+        out[i] = {
+            x: g.x[2 * i] * u + g.x[2 * i + 1],
+            y: maxAt(g.top, i, g.topMore?.[i], u),
+            width: g.width[2 * i] * u + g.width[2 * i + 1],
+            height: maxAt(g.height, i, g.heightMore?.[i], u),
+        };
+    return out;
+}
+/** Content height of a geometry at unit `u`. */
+export function extentAt(g, u) {
+    let h = 0;
+    for (let t = 0; t < g.extent.length; t += 2)
+        h = Math.max(h, g.extent[t] * u + g.extent[t + 1]);
+    return h;
+}
+// ---------------------------------------------------------------------------------------------------------------
+// Term sets (max of linear functions over a unit range)
+// ---------------------------------------------------------------------------------------------------------------
+/**
+ * Union of term sets `[k, c, …]` without the terms dominated over `[lo, hi]` (≤ another term at both ends: then ≤ it on
+ * the whole range). The max of what is left equals the max of the inputs on the range.
+ */
+export function pruneTerms(terms, lo, hi) {
+    const n = terms.length / 2;
+    if (n <= 1)
+        return terms.slice();
+    const keep = [];
+    for (let a = 0; a < n; a++) {
+        const ka = terms[2 * a];
+        const ca = terms[2 * a + 1];
+        const la = ka * lo + ca;
+        const ha = ka * hi + ca;
+        let dominated = false;
+        for (let b = 0; b < n && !dominated; b++) {
+            if (b === a)
+                continue;
+            const kb = terms[2 * b];
+            const cb = terms[2 * b + 1];
+            const lb = kb * lo + cb;
+            const hb = kb * hi + cb;
+            // Strictly below somewhere and not above anywhere; exact duplicates keep the first.
+            if (lb >= la - 1e-9 && hb >= ha - 1e-9 && (lb > la + 1e-9 || hb > ha + 1e-9 || b < a))
+                dominated = true;
+        }
+        if (!dominated)
+            keep.push(ka, ca);
+    }
+    return keep;
+}
+// ---------------------------------------------------------------------------------------------------------------
+// CSS (inline, exact at any container width)
+// ---------------------------------------------------------------------------------------------------------------
+/** `k·u + c` px at breakpoint b as a CSS term (several breakpoints: masked, so it is ≈ −1e9 px outside b's range). */
+export function linear(k, c, b, single) {
+    if (Math.abs(k) < 1e-12) {
+        // Geometry is never negative: an unmasked 0 is a lower bound in every breakpoint.
+        if (Math.abs(c) < 1e-9)
+            return "0px";
+        return single ? `${num(c)}px` : `calc(${num(c)}px - var(--rv-m${b}))`;
+    }
+    // Negative slope: the masked unit (≈ −1e9 px outside b) would turn the term huge and positive; use the unmasked
+    // unit (`--rv-w + --rv-m`) and subtract the mask from the constant instead.
+    if (k < 0 && !single)
+        return `calc(${num(k)} * (var(--rv-w${b}) + var(--rv-m${b})) ${c < 0 ? "-" : "+"} ${num(Math.abs(c))}px - var(--rv-m${b}))`;
+    const kw = Math.abs(k - 1) < 1e-12 ? `var(--rv-w${b})` : `${num(k)} * var(--rv-w${b})`;
+    if (Math.abs(c) < 1e-9)
+        return single && Math.abs(k - 1) < 1e-12 ? `var(--rv-w${b})` : `calc(${kw})`;
+    return `calc(${kw} ${c < 0 ? "-" : "+"} ${num(Math.abs(c))}px)`;
+}
+/** One value across breakpoints from per-breakpoint term lists: a term, or `max()` of every (masked) term. */
+function across(perBreakpoint) {
+    const all = [];
+    for (const terms of perBreakpoint)
+        for (const t of terms)
+            all.push(t);
+    if (all.length === 1)
+        return all[0];
+    if (all.every((t) => t === "0px"))
+        return "0px";
+    return `max(${all.join(", ")})`;
+}
+const termsOf = (base, i, more, b, single) => {
+    const out = [linear(base[2 * i], base[2 * i + 1], b, single)];
+    if (more)
+        for (let t = 0; t < more.length; t += 2)
+            out.push(linear(more[t], more[t + 1], b, single));
+    return out;
+};
+/**
+ * Inline style of item i placed by `geometries` (one per breakpoint): absolute `top` / `inset-inline-start`, `width`
+ * (`var(--rv-mw)` when it is one column everywhere) and `height` (CSS `aspect-ratio` when it is width / ratio in every
+ * breakpoint). Frozen: the runtime writes a frozen style object as one validated `cssText`.
+ */
+export function geometryStyle(geometries, i) {
+    const single = geometries.length === 1;
+    const top = [];
+    const left = [];
+    const width = [];
+    const height = [];
+    let unitWidth = true;
+    let ratio = geometries[0].ratio[i];
+    for (let b = 0; b < geometries.length; b++) {
+        const g = geometries[b];
+        top.push(termsOf(g.top, i, g.topMore?.[i], b, single));
+        left.push([linear(g.x[2 * i], g.x[2 * i + 1], b, single)]);
+        const wk = g.width[2 * i];
+        const wc = g.width[2 * i + 1];
+        if (Math.abs(wk - 1) > 1e-12 || Math.abs(wc) > 1e-9)
+            unitWidth = false;
+        width.push([linear(wk, wc, b, single)]);
+        height.push(termsOf(g.height, i, g.heightMore?.[i], b, single));
+        if (!(g.ratio[i] > 0) || Math.abs(g.ratio[i] - ratio) > 1e-9)
+            ratio = 0;
+    }
+    const style = {
+        position: "absolute",
+        "box-sizing": "border-box",
+        top: across(top),
+        "inset-inline-start": across(left),
+        width: unitWidth ? "var(--rv-mw)" : across(width),
+    };
+    if (ratio > 0)
+        style["aspect-ratio"] = num(ratio);
+    else {
+        // One column everywhere with the same `k·u + c` height in every breakpoint: one term over the active width.
+        const g0 = geometries[0];
+        const hk = g0.height[2 * i];
+        const hc = g0.height[2 * i + 1];
+        const same = unitWidth && geometries.every((g) => !g.heightMore?.[i] && Math.abs(g.height[2 * i] - hk) < 1e-12 && Math.abs(g.height[2 * i + 1] - hc) < 1e-9);
+        if (same && geometries.length > 1 && Math.abs(hk) > 1e-12) {
+            const kw = Math.abs(hk - 1) < 1e-12 ? "var(--rv-mw)" : `${num(hk)} * var(--rv-mw)`;
+            style.height = Math.abs(hc) < 1e-9 ? `calc(${kw})` : `calc(${kw} ${hc < 0 ? "-" : "+"} ${num(Math.abs(hc))}px)`;
+        }
+        else
+            style.height = across(height);
+    }
+    return Object.freeze(style);
+}
+/** Grid height (content extent) across breakpoints. */
+export function geometryHeight(geometries) {
+    const single = geometries.length === 1;
+    const terms = [];
+    geometries.forEach((g, b) => {
+        for (let t = 0; t < g.extent.length; t += 2)
+            terms.push(linear(g.extent[t], g.extent[t + 1], b, single));
+    });
+    if (!terms.length)
+        return "0px";
+    if (terms.length === 1)
+        return terms[0];
+    return `max(0px, ${terms.join(", ")})`;
+}

package/masonry/index.d.ts

@@ -0,0 +1,153 @@
+import { type Signal } from "@rivetjs/reactivity";
+import { type DOMValue } from "@rivetjs/runtime/dom";
+import type { Content } from "@rivetjs/runtime/jsx-runtime";
+import { type GlobalDOMAttributes } from "../utils/dom-props.js";
+import { type MotionOptions } from "./flip.js";
+import type { FlipDriver } from "../flip/index.js";
+import { type JustifiedLastRow } from "./justified.js";
+import { type MasonryHandle, type Selection, type SelectionBehavior, type SelectionMode } from "./behaviour.js";
+import { type BentoPack, type BentoRowHeight, type Columns, type Gap, type Key, type Responsive } from "./layout.js";
+export * from "./layout.js";
+export * from "./geometry.js";
+export { placeJustified, placeJustifiedRun, type JustifiedLastRow, type JustifiedOptions, type JustifiedRun } from "./justified.js";
+export { captureBoxes, playFlip, stopFlip, motionAllowed, type Boxes, type MotionOptions } from "./flip.js";
+export type { FlipDriver } from "../flip/index.js";
+export { masonryPosition, masonryRelayout, masonryScrollTo, reflowMeasured, relayoutMeasured, watchMeasured, type MasonryHandle, type MeasureOptions, } from "./behaviour.js";
+export { MasonryLayout, type MasonryLayoutOptions } from "./masonry-layout.js";
+export type { MasonryContext, Selection, SelectionBehavior, SelectionMode } from "./behaviour.js";
+type MaybeAccessor<T> = T | (() => T);
+/** A `{ current }` holder or a callback (like resizable's `groupRef`). */
+export type ImperativeRef<H> = {
+    current: H | null;
+} | ((handle: H | null) => void);
+/** What the item renderer and `itemClass` functions get (accessors: read them in bindings). */
+export interface MasonryItemState {
+    key: Key;
+    /** Position in `items` (reading order). */
+    index: () => number;
+    isSelected: () => boolean;
+    isDisabled: () => boolean;
+}
+/** Props shared by `Masonry` and `Bento`. Global DOM attributes go to the root element. */
+export interface MasonryBaseProps<T> extends GlobalDOMAttributes<HTMLDivElement> {
+    /** The items (reading order). A Signal / accessor updates the layout in place. */
+    items: MaybeAccessor<readonly T[]>;
+    /** Item content: `(item, state) => …` (rendered inside the item element; read `state` accessors in bindings). */
+    children: (item: T, state: MasonryItemState) => Content;
+    /** Unique item key (default `item.id`, then `item.key`, then the index). Read once at mount: keys identify the rendered rows; a new reader would re-key every row. */
+    getKey?: ((item: T, index: number) => Key) | undefined;
+    /** Column count: a number or a container-width map (`{ 0: 2, 640: 3, 1024: 4 }`, the default). Live. */
+    columns?: Columns | undefined;
+    /** Derive the columns from a minimum item width instead (`n·min + (n − 1)·gap` px per column count). Live. */
+    minItemWidth?: number | undefined;
+    /** Upper bound of the column count with `minItemWidth`. Default 4. Live. */
+    maxColumns?: number | undefined;
+    /** Gap between items in px: one value or `[column, row]`, or a container-width map of those. Default 16. Live. */
+    /**
+     * Root max width in px (`max-width` on the root). Bounds the last breakpoint's width range, so justified / mixed geometry terms stay exact
+     * up to it (and `masonrySizes` can cap image widths). Live.
+     */
+    maxWidth?: number | undefined;
+    gap?: Responsive<Gap> | undefined;
+    /** Animated relayout when items move on the client (span / size / order changes): house motion (embla), or a `FlipDriver` (`@rivetjs/cdk/flip`). `false` = jump; reduced motion always jumps. Live (read when a relayout plays). */
+    motion?: boolean | MotionOptions | FlipDriver | undefined;
+    /** Imperative handle: `relayout()`, `scrollToItem(key)`, `getPosition(key)` (also available as DOM functions for resumed handlers). */
+    handleRef?: ImperativeRef<MasonryHandle> | undefined;
+    selectionMode?: SelectionMode | undefined;
+    /** `"toggle"` (default): clicks toggle; `"replace"`: clicks replace, Ctrl / Cmd toggles, double click = action. Read once at mount: picks the pointer handlers wired at mount. */
+    selectionBehavior?: SelectionBehavior | undefined;
+    /** Selected keys: value, two-way Signal or accessor. */
+    selectedKeys?: Selection | Signal<Selection> | (() => Selection) | undefined;
+    defaultSelectedKeys?: Selection | undefined;
+    onSelectionChange?: ((keys: Selection) => void) | undefined;
+    /** Keys that cannot be focused by arrow keys, selected or actioned. */
+    disabledKeys?: MaybeAccessor<Iterable<Key> | undefined>;
+    disallowEmptySelection?: boolean | undefined;
+    /** Item action (Enter, click when nothing is selectable / selected, double click with `replace`). */
+    onAction?: ((key: Key) => void) | undefined;
+    /** Called when the end of the items scrolls into view (IntersectionObserver sentinel / virtualizer). */
+    onLoadMore?: (() => void) | undefined;
+    /** Whether more items are loading (shows `renderLoader`). */
+    isLoading?: MaybeAccessor<boolean | undefined>;
+    /** Loader content under the items while `isLoading`. */
+    renderLoader?: (() => Content) | undefined;
+    /** Content when there are no items. */
+    renderEmptyState?: (() => Content) | undefined;
+    /** `"grid"` (default: arrow keys, selection) or `"list"` (`role="list"`, tab through item content only). Read once at mount: structural (roles + keyboard model of the rendered tree). */
+    semantics?: "grid" | "list" | undefined;
+    id?: string | undefined;
+    "aria-label"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+    "aria-describedby"?: string | undefined;
+    /** Root class (default `rv-Masonry` / `rv-Bento`). */
+    class?: string | undefined;
+    style?: Record<string, string | number | undefined> | undefined;
+    /** Grid element class (default `rv-Masonry-grid` / `rv-Bento-grid`). */
+    gridClass?: string | undefined;
+    /** Item element class (default `rv-Masonry-item` / `rv-Bento-item`; a value replaces it), or a function of the item state. */
+    itemClass?: string | ((state: MasonryItemState) => string | undefined) | undefined;
+    /** Loader element class (default `rv-Masonry-loader` / `rv-Bento-loader`). */
+    loaderClass?: string | undefined;
+    /** Empty-state row class (default `rv-<Masonry|Bento>-empty`). */
+    emptyClass?: string | undefined;
+}
+export interface MasonryProps<T> extends MasonryBaseProps<T> {
+    /** Aspect ratio (width / height) of an item; `null` = unknown (default: `item.aspectRatio`, else `width / height` — `?image` results qualify). May return a Signal / accessor (live). */
+    getAspectRatio?: ((item: T) => MaybeAccessor<number | null | undefined>) | undefined;
+    /** Fixed height in px of an item that has no ratio (text cards; default `item.height` when the item has no `width` / `aspectRatio`). Live like `getAspectRatio`. */
+    getItemHeight?: ((item: T) => MaybeAccessor<number | null | undefined>) | undefined;
+    /** Columns an item spans (number or breakpoint map; justified rows: a width weight). Default `item.span`, 1. Live: a Signal / accessor relayouts (animated). */
+    getSpan?: ((item: T) => MaybeAccessor<Responsive<number> | null | undefined>) | undefined;
+    /** px added to every item's ratio height (a caption row under each image). Live. */
+    extraItemHeight?: number | undefined;
+    /**
+     * `"auto"` (default): server-placed when every item's size is known, a known leading run server-placed + the rest
+     * measured, else measured; `"exact"`; `"measure"`; `"justified"` (rows that fill the width, Flickr justified-layout).
+     * Read once at mount: structural (server-placed vs measured DOM, observers); switching would re-create every row.
+     */
+    layout?: "auto" | "exact" | "measure" | "justified" | undefined;
+    /** Columns: `"both"` stretches each column's last item to the tallest column (flush bottom; images `object-fit: cover`). Live. */
+    fit?: "none" | "both" | undefined;
+    /** Justified: target row height in px (number or container-width map; keys split breakpoints). Default 240. Live. */
+    rowHeight?: Responsive<number> | undefined;
+    /** Justified: rows may vary ± rowHeight · tolerance. Default 0.25 (also spaces the width splits: geometric ratio (1 + t) / (1 − t)). Live. */
+    rowHeightTolerance?: number | undefined;
+    /** Justified: edge-case bounds (default 0.5× / 2× rowHeight; beyond them items crop). Live. */
+    minRowHeight?: number | undefined;
+    maxRowHeight?: number | undefined;
+    /** Justified: last row `"fill"` (default: rebalanced, flush on both axes), `"justify"`, `"left"`, `"center"`. `"fill"` falls back to `"left"` when no rebalance fits the height bounds. Live. */
+    lastRow?: JustifiedLastRow | undefined;
+    /** Container width the greedy compares columns at (default: the middle of each breakpoint's range). Live. */
+    referenceWidth?: number | undefined;
+    /** Render only the items in view (cdk `Virtualizer` + `MasonryLayout`). Read once at mount (structural), and so are the layout options of the virtual layout object. */
+    virtualize?: boolean | undefined;
+    /** Scroller height when virtualized (CSS length or px). Default 600. */
+    height?: number | string | undefined;
+    /** Viewport size of the server-rendered window when virtualized (match the scroller). Default 800 × 600. */
+    initialSize?: {
+        width: number;
+        height: number;
+    } | undefined;
+}
+export interface BentoProps<T> extends MasonryBaseProps<T> {
+    /** Columns a tile spans: number or breakpoint map (default `item.colSpan`, 1); clamped to the column count. */
+    getColSpan?: ((item: T) => Responsive<number> | null | undefined) | undefined;
+    /** Rows a tile spans: number or breakpoint map (default `item.rowSpan`, 1). */
+    getRowSpan?: ((item: T) => Responsive<number> | null | undefined) | undefined;
+    /** Row height: px (default 160), `{ aspectRatio }` (column width / ratio), or `"auto"` (native CSS grid rows). Live, except switching to / from `"auto"` (read once at mount: native grid vs placed tiles). */
+    rowHeight?: BentoRowHeight | undefined;
+    /** `"dense"` (default: first fit, fills holes) or `"skyline"` (lowest drop, no backfill). Live. */
+    pack?: BentoPack | undefined;
+}
+/**
+ * Masonry: items flow into the shortest column (Pinterest-style), or into justified rows (`layout="justified"`). Sizes
+ * known (aspect ratios, `?image` width / height, fixed heights) → the server lays out (exact inline CSS at any width,
+ * zero CLS, no client JS); unknown sizes → measured in the browser (a known leading run stays server-placed).
+ */
+export declare function Masonry<T>(props: MasonryProps<T>): DOMValue;
+/**
+ * Bento: tiles with column / row spans on a uniform grid, packed on the server (`dense` fills holes like CSS
+ * `grid-auto-flow: dense`; `skyline` keeps rows in reading order). Fixed or aspect row heights are exact inline CSS at
+ * any width; `rowHeight="auto"` uses the browser's own CSS grid (content-sized rows).
+ */
+export declare function Bento<T>(props: BentoProps<T>): DOMValue;