@wordpress/grid 0.1.0

package/build-types/dashboard-grid/types.d.ts

@@ -0,0 +1,232 @@
+/**
+ * Internal dependencies
+ */
+import type { DragPreviewRenderProps, GridOverlayRenderProps, ResizeDelta, ResizeHandleRenderProps } from '../shared/types';
+import type { ResizeSnapSize } from '../shared/resize-snap';
+/**
+ * Dashboard grid layout item definition.
+ *
+ * `width` accepts either a numeric column span or a discriminated string:
+ * - `number` spans that many columns (clamped to the grid's column count).
+ * - `'fill'` spans the remaining columns in the current row.
+ * - `'full'` spans all columns (`grid-column: 1 / -1`).
+ */
+export type DashboardGridLayoutItem = {
+    /**
+     * Unique key that matches a child component key.
+     */
+    key: string;
+    /**
+     * Number of columns this item spans, or a string discriminator
+     * (`'fill'` or `'full'`).
+     */
+    width?: number | 'fill' | 'full';
+    /**
+     * Number of rows this item spans.
+     *
+     * @default 1
+     */
+    height?: number;
+    /**
+     * Display order for the item. Lower values render first. When
+     * omitted, the item falls back to its index in the `layout` array.
+     */
+    order?: number;
+};
+/**
+ * Props for the internal `<GridItem />` wrapper.
+ */
+export type GridItemProps = {
+    /**
+     * The layout item containing grid positioning information.
+     */
+    item: DashboardGridLayoutItem;
+    /**
+     * The maximum number of columns in the grid.
+     */
+    maxColumns: number;
+    /**
+     * Whether drag and resize interactions are disabled.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the item can be resized vertically. Disabled when the
+     * grid uses `rowHeight: 'auto'`, where row height is driven by
+     * content rather than by the user.
+     *
+     * @default true
+     */
+    verticalResizable?: boolean;
+    /**
+     * Whether any tile in the grid is currently being dragged or
+     * resized. Drives the drag activator cursor.
+     *
+     * @default false
+     */
+    interacting?: boolean;
+    /**
+     * Whether a tile drag is in progress. Mutes each tile's
+     * `actionableArea` with `inert` so hovers on other tiles' controls
+     * do not steal the gesture.
+     *
+     * @default false
+     */
+    dragging?: boolean;
+    /**
+     * The content to be displayed within the grid item.
+     */
+    children: React.ReactNode;
+    /**
+     * Content rendered above the draggable area that stays interactive
+     * in edit mode, typically action buttons, menus, or links. While
+     * a tile drag is in progress, this content is set `inert` so hovers
+     * on other tiles can't steal the gesture. During resize, visibility
+     * is controlled by grid-level CSS hooks.
+     */
+    actionableArea?: React.ReactNode;
+    /**
+     * Callback fired while the item is being resized. Receives the
+     * item's `key` plus the cursor offset from the gesture start in
+     * pixels. The grid derives snapped spans from the delta and passes
+     * them back through `resizeSnapPreview`.
+     */
+    onResize: (id: string, delta: ResizeDelta) => void;
+    /**
+     * Snapped grid size in pixels for the resize-preview outline. The
+     * tile content resizes continuously with the cursor; this outline
+     * shows the span the layout will commit to on release.
+     */
+    resizeSnapPreview?: ResizeSnapSize | null;
+    /**
+     * Minimum tile width while resizing, in pixels (one column track).
+     */
+    minResizeWidthPx: number;
+    /**
+     * Minimum tile height while resizing, in pixels (one row track).
+     * Omitted when vertical resize is disabled.
+     */
+    minResizeHeightPx?: number;
+    /**
+     * Callback fired when the resize gesture ends.
+     */
+    onResizeEnd: () => void;
+    /**
+     * Component forwarded to `<ResizeHandle />` to override the default
+     * corner triangle. See `DashboardGridProps.renderResizeHandle`.
+     */
+    renderResizeHandle?: React.ComponentType<ResizeHandleRenderProps>;
+};
+/**
+ * Props for `DashboardGrid`. Extends the standard div props so consumers
+ * can pass `id`, `aria-*`, `data-*`, event handlers, etc., directly on
+ * the grid root.
+ *
+ * `columns` and `minColumnWidth` compose as a layered model:
+ * - `columns` alone: fixed N columns; each tile scales with the container.
+ * - `minColumnWidth` alone: column count derives from container width,
+ *   floored by the per-tile minimum, down to 1 column.
+ * - Both together: `columns` caps the count, `minColumnWidth` enforces a
+ *   per-tile width floor that can reduce the count below the cap on
+ *   narrow containers ("up to N columns, but never narrower than W px").
+ */
+export interface DashboardGridProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children' | 'className' | 'style'> {
+    /**
+     * Array of layout items.
+     */
+    layout: DashboardGridLayoutItem[];
+    /**
+     * Grid children. Each child must carry a `key` that matches an
+     * entry in `layout`; children without a match render at the end
+     * of the grid without explicit placement and fall through CSS
+     * Grid's auto-flow.
+     */
+    children: React.ReactNode;
+    /**
+     * Additional CSS class on the grid root.
+     */
+    className?: string;
+    /**
+     * Inline styles applied to the grid root. Merged underneath the
+     * grid's own layout styles, so the layout (`gridTemplateColumns`,
+     * `gridAutoRows`) always wins. The gap between tiles is owned by
+     * the design-system gap token and is not configurable per
+     * instance; override it via a theme or density change.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Height of each row in pixels, or `'auto'` to let the tallest
+     * tile in the row size it.
+     *
+     * @default 'auto'
+     */
+    rowHeight?: number | 'auto';
+    /**
+     * Whether the grid is in edit mode (allows dragging and
+     * repositioning items).
+     *
+     * @default false
+     */
+    editMode?: boolean;
+    /**
+     * Callback fired when the user commits a drag or resize. Receives
+     * the resulting layout.
+     */
+    onChangeLayout?: (newLayout: DashboardGridLayoutItem[]) => void;
+    /**
+     * Callback fired continuously during a drag or resize interaction
+     * with the in-progress layout. Useful for live feedback in the
+     * surface (e.g., displaying the current width/position). The final
+     * committed layout is still emitted via `onChangeLayout`.
+     */
+    onPreviewLayout?: (previewLayout: DashboardGridLayoutItem[]) => void;
+    /**
+     * Override the default corner-triangle resize handle with a custom
+     * component. The grid still owns the gesture (dnd-kit `<DndContext>`,
+     * throttled delta loop) and passes the wiring to the consumer:
+     * spread `listeners` and `attributes` and assign `ref` on the
+     * element that should receive the gesture. Use `disabled` and
+     * `verticalResizable` to adapt the visual to context.
+     */
+    renderResizeHandle?: React.ComponentType<ResizeHandleRenderProps>;
+    /**
+     * Custom wrapper for the dragged-clone visual mounted inside
+     * `<DragOverlay>`. The surface always wraps the clone with a thin
+     * functional frame (lift scale, grabbing cursor, pointer pass-
+     * through) and mounts this component inside it; the consumer
+     * owns the visual chrome (shadow, radius, padding).
+     *
+     * When omitted, the cloned children render directly inside the
+     * functional frame so any chrome the consumer applied to the
+     * persistent tile carries through unchanged.
+     *
+     * Token-only adjustments (lift scale, placeholder opacity,
+     * outline color, placeholder radius) flow through CSS custom
+     * properties documented in the README.
+     */
+    renderDragPreview?: React.ComponentType<DragPreviewRenderProps>;
+    /**
+     * Override the default edit-mode overlay (row-marker tiles per
+     * column) with a custom component. The grid supplies the resolved
+     * column count, row height, and row count; the consumer is
+     * responsible for the visual.
+     *
+     * The overlay only renders when `editMode` is true. When omitted,
+     * the package's default visual is used.
+     */
+    renderGridOverlay?: React.ComponentType<GridOverlayRenderProps>;
+    /**
+     * Target column count, used as a cap. Defaults to six when neither
+     * `columns` nor `minColumnWidth` is set; with `minColumnWidth` set
+     * it can resolve lower on narrow containers.
+     */
+    columns?: number;
+    /**
+     * Per-tile minimum width in pixels. Enables responsive mode: the
+     * column count derives from container width, floored by this value,
+     * down to 1.
+     */
+    minColumnWidth?: number;
+}
+//# sourceMappingURL=types.d.ts.map

package/build-types/dashboard-grid/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/dashboard-grid/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EACX,sBAAsB,EACtB,sBAAsB,EACtB,WAAW,EACX,uBAAuB,EACvB,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAE5D;;;;;;;GAOG;AACH,MAAM,MAAM,uBAAuB,GAAG;IACrC;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IAEZ;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAEjC;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG;IAC3B;;OAEG;IACH,IAAI,EAAE,uBAAuB,CAAC;IAE9B;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEjC;;;;;OAKG;IACH,QAAQ,EAAE,CAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,KAAM,IAAI,CAAC;IAErD;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IAE1C;;OAEG;IACH,gBAAgB,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;OAEG;IACH,WAAW,EAAE,MAAM,IAAI,CAAC;IAExB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAE,uBAAuB,CAAE,CAAC;CACpE,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,kBAChB,SAAQ,IAAI,CACX,KAAK,CAAC,wBAAwB,CAAE,KAAK,CAAE,EACvC,UAAU,GAAG,WAAW,GAAG,OAAO,CAClC;IACD;;OAEG;IACH,MAAM,EAAE,uBAAuB,EAAE,CAAC;IAElC;;;;;OAKG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAE5B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE5B;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAE,SAAS,EAAE,uBAAuB,EAAE,KAAM,IAAI,CAAC;IAElE;;;;;OAKG;IACH,eAAe,CAAC,EAAE,CAAE,aAAa,EAAE,uBAAuB,EAAE,KAAM,IAAI,CAAC;IAEvE;;;;;;;OAOG;IACH,kBAAkB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAE,uBAAuB,CAAE,CAAC;IAEpE;;;;;;;;;;;;;;OAcG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAE,sBAAsB,CAAE,CAAC;IAElE;;;;;;;;OAQG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAE,sBAAsB,CAAE,CAAC;IAElE;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACxB"}

package/build-types/dashboard-lanes/index.d.ts

@@ -0,0 +1,40 @@
+import type { DashboardLanesProps } from './types';
+/**
+ * Masonry-style surface aligned with `display: grid-lanes`. Items
+ * declare a column span; heights are driven by content; placement
+ * follows the source-ordered, shortest-lane algorithm with
+ * `flow-tolerance` tiebreaking.
+ *
+ * On browsers that support `display: grid-lanes` natively, the
+ * component emits the spec's CSS and lets the engine handle layout.
+ * Otherwise, `useLanePlacement` measures item heights and assigns
+ * explicit `grid-column-start` / `grid-row-start` values that
+ * approximate the same result inside CSS Grid.
+ *
+ * Each child's `key` must match an entry in the `layout` array;
+ * children without a match render at the end of the surface without
+ * explicit placement and fall through the lanes auto-flow.
+ *
+ * @example
+ * ```jsx
+ * <DashboardLanes
+ *     layout={ [
+ *         { key: 'a' },
+ *         { key: 'b', width: 2 },
+ *         { key: 'c' },
+ *     ] }
+ *     columns={ 3 }
+ *     editMode
+ *     onChangeLayout={ setLayout }
+ * >
+ *     <Tile key="a">A</Tile>
+ *     <Tile key="b">B</Tile>
+ *     <Tile key="c">C</Tile>
+ * </DashboardLanes>
+ * ```
+ *
+ * @param props Component props.
+ * @param ref   Forwarded to the surface's root `<div>`.
+ */
+export declare const DashboardLanes: import("react").ForwardRefExoticComponent<DashboardLanesProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=index.d.ts.map

package/build-types/dashboard-lanes/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/dashboard-lanes/index.tsx"],"names":[],"mappings":"AAiDA,OAAO,KAAK,EAA4B,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAyB7E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,eAAO,MAAM,cAAc,gHAqgB1B,CAAC"}

package/build-types/dashboard-lanes/lane-placement.d.ts

@@ -0,0 +1,126 @@
+/**
+ * Lane placement algorithm for `display: grid-lanes` polyfill.
+ *
+ * Implements the source-ordered, shortest-lane placement described in
+ * https://webkit.org/blog/17660/introducing-css-grid-lanes/.
+ *
+ * The skyline + tolerance core is adapted from the CSS Grid Lanes
+ * Polyfill by Simon Willison (MIT,
+ * https://tools.simonwillison.net/grid-lanes-polyfill.js). The rest
+ * of this module is a pure function suitable for unit testing in
+ * isolation from any DOM.
+ *
+ * Concepts:
+ * - "Lane" is the cross-axis track: a column in waterfall mode, a row
+ *   in brick mode. The algorithm is axis-agnostic; the renderer maps
+ *   the chosen lane index plus offset to `grid-column-start` /
+ *   `grid-row-start` (or vice versa).
+ * - Items are placed in source order. Explicit-lane items are placed
+ *   first so auto-placed items can flow around them.
+ * - `flowTolerance` is a length: when two candidate lanes differ in
+ *   baseline by no more than this, the earlier lane wins (preserves
+ *   reading order).
+ */
+/**
+ * A single item to place. Heights are pre-measured by the caller.
+ */
+export type LanePlacementItem = {
+    /**
+     * Stable identity. Returned in the result map.
+     */
+    key: string;
+    /**
+     * Number of contiguous lanes this item occupies. Clamped to
+     * `[ 1, lanes ]` by the algorithm.
+     */
+    span: number;
+    /**
+     * Measured cross-axis size (typically pixels). The algorithm only
+     * adds and compares heights; the unit is whatever the caller uses,
+     * as long as `gap` and `flowTolerance` use the same one.
+     */
+    height: number;
+    /**
+     * Explicit 0-indexed starting lane. When set, the item bypasses
+     * the skyline lookup and is placed at this lane regardless of
+     * source order. Out-of-range values are clamped.
+     */
+    lane?: number;
+};
+/**
+ * Algorithm input.
+ */
+export type LanePlacementInput = {
+    /**
+     * Items in source order.
+     */
+    items: ReadonlyArray<LanePlacementItem>;
+    /**
+     * Total number of lanes. Clamped to `>= 1`.
+     */
+    lanes: number;
+    /**
+     * Gap between items in the same lane. Same unit as `height`.
+     */
+    gap: number;
+    /**
+     * Tolerance for source-order tiebreaking. When two candidate
+     * lanes have baselines within this amount, the earlier lane wins.
+     * Defaults to `0` if a negative value is passed.
+     */
+    flowTolerance: number;
+};
+/**
+ * Resolved position for a single item.
+ */
+export type LanePlacement = {
+    /**
+     * Mirrors the input key.
+     */
+    key: string;
+    /**
+     * 0-indexed starting lane. The renderer adds 1 for
+     * `grid-column-start`.
+     */
+    lane: number;
+    /**
+     * Cross-axis offset from the container's start edge, in the same
+     * unit as the input heights. Use as the item's start position
+     * (e.g. `top`, or `grid-row-start` after dividing by a row unit).
+     */
+    top: number;
+    /**
+     * Effective span after clamping. Useful for the renderer when the
+     * input span exceeded the lane count.
+     */
+    span: number;
+};
+/**
+ * Algorithm output.
+ */
+export type LanePlacementResult = {
+    /**
+     * Per-key placement. Insertion-ordered: the first iteration yields
+     * the explicit items in source order, then the auto items in
+     * source order.
+     */
+    placements: Map<string, LanePlacement>;
+    /**
+     * Sum of the tallest lane after all items are placed. The renderer
+     * applies this as the container's intrinsic height.
+     */
+    totalHeight: number;
+};
+/**
+ * Places all items into a fixed lane count using the grid-lanes
+ * algorithm: explicit items first, then auto items chosen by the
+ * shortest-lane skyline with a tolerance for source order.
+ *
+ * Pure: no DOM access, no mutation of inputs. Safe to call from a
+ * worker or during SSR.
+ *
+ * @param input Items, lane count, gap, and tolerance.
+ * @return Per-key placements plus the resulting total height.
+ */
+export declare function computeLanePlacements(input: LanePlacementInput): LanePlacementResult;
+//# sourceMappingURL=lane-placement.d.ts.map

package/build-types/dashboard-lanes/lane-placement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lane-placement.d.ts","sourceRoot":"","sources":["../../src/dashboard-lanes/lane-placement.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC/B;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IAEZ;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;;;OAIG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAChC;;OAEG;IACH,KAAK,EAAE,aAAa,CAAE,iBAAiB,CAAE,CAAC;IAE1C;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IAEZ;;;;OAIG;IACH,aAAa,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG;IAC3B;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IAEZ;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;;;OAIG;IACH,GAAG,EAAE,MAAM,CAAC;IAEZ;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;CACb,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG;IACjC;;;;OAIG;IACH,UAAU,EAAE,GAAG,CAAE,MAAM,EAAE,aAAa,CAAE,CAAC;IAEzC;;;OAGG;IACH,WAAW,EAAE,MAAM,CAAC;CACpB,CAAC;AA8BF;;;;;;;;;;GAUG;AACH,wBAAgB,qBAAqB,CACpC,KAAK,EAAE,kBAAkB,GACvB,mBAAmB,CA2ErB"}

package/build-types/dashboard-lanes/lanes-item.d.ts

@@ -0,0 +1,52 @@
+import { type ResizeSnapSize } from '../shared/resize-snap';
+import type { ResizeDelta, ResizeHandleRenderProps } from '../shared/types';
+/**
+ * Props for the internal `<LanesItem />` wrapper.
+ */
+export type LanesItemProps = {
+    /**
+     * Item key. Forwarded to dnd-kit and emitted as the
+     * `data-wp-grid-item-key` attribute the hook reads to map measured DOM
+     * nodes back to logical items.
+     */
+    itemKey: string;
+    /**
+     * Inline placement style produced by `useLanePlacement`. On native
+     * (`display: grid-lanes`), only `gridColumn: span N`. While
+     * polyfilling, also `gridColumnStart` / `gridRowStart` /
+     * `gridRowEnd: span N`.
+     */
+    placementStyle: React.CSSProperties;
+    /**
+     * Whether drag and resize interactions are disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Whether any tile in the surface is currently being dragged or
+     * resized. Drives the drag activator cursor.
+     */
+    interacting?: boolean;
+    /**
+     * Whether a tile drag is in progress. Mutes each tile's
+     * `actionableArea` with `inert` so hovers on other tiles' controls
+     * do not steal the gesture.
+     *
+     * @default false
+     */
+    dragging?: boolean;
+    children: React.ReactNode;
+    actionableArea?: React.ReactNode;
+    onResize: (id: string, delta: ResizeDelta) => void;
+    /**
+     * Snapped column span in pixels for the resize-preview outline.
+     */
+    resizeSnapPreview?: ResizeSnapSize | null;
+    /**
+     * Minimum tile width while resizing, in pixels (one column track).
+     */
+    minResizeWidthPx: number;
+    onResizeEnd: () => void;
+    renderResizeHandle?: React.ComponentType<ResizeHandleRenderProps>;
+};
+export declare function LanesItem({ itemKey, placementStyle, disabled, interacting, children, actionableArea, onResize, onResizeEnd, resizeSnapPreview, minResizeWidthPx, renderResizeHandle, dragging }: LanesItemProps): import("react").JSX.Element;
+//# sourceMappingURL=lanes-item.d.ts.map

package/build-types/dashboard-lanes/lanes-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lanes-item.d.ts","sourceRoot":"","sources":["../../src/dashboard-lanes/lanes-item.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAoB,KAAK,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAE9E,OAAO,KAAK,EAAE,WAAW,EAAE,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;AAgB5E;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG;IAC5B;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;;;;OAKG;IACH,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC;IAEpC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEjC,QAAQ,EAAE,CAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,KAAM,IAAI,CAAC;IAErD;;OAEG;IACH,iBAAiB,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IAE1C;;OAEG;IACH,gBAAgB,EAAE,MAAM,CAAC;IAEzB,WAAW,EAAE,MAAM,IAAI,CAAC;IAExB,kBAAkB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAE,uBAAuB,CAAE,CAAC;CACpE,CAAC;AAEF,wBAAgB,SAAS,CAAE,EAC1B,OAAO,EACP,cAAc,EACd,QAAgB,EAChB,WAAmB,EACnB,QAAQ,EACR,cAAqB,EACrB,QAAQ,EACR,WAAW,EACX,iBAAwB,EACxB,gBAAgB,EAChB,kBAAkB,EAClB,QAAgB,EAChB,EAAE,cAAc,+BA+HhB"}

package/build-types/dashboard-lanes/stories/index.story.d.ts

@@ -0,0 +1,64 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryObj } from '@storybook/react-vite';
+/**
+ * Internal dependencies
+ */
+import { DashboardLanes } from '..';
+declare const meta: Meta<typeof DashboardLanes>;
+export default meta;
+type Story = StoryObj<typeof DashboardLanes>;
+/**
+ * Mixed-height tiles in a fixed lane count. Items pack from
+ * left-to-right by source order, falling into whichever lane has
+ * the lowest baseline at the moment of placement.
+ */
+export declare const Default: Story;
+/**
+ * Responsive lane count: derived from container width using
+ * `minColumnWidth` as the per-lane lower bound. Resize the preview
+ * frame to see the lane count adapt.
+ */
+export declare const Responsive: Story;
+/**
+ * Layered configuration: `columns` caps the lane count and
+ * `minColumnWidth` enforces a per-tile width floor. The surface
+ * renders up to `columns` lanes on wide containers and reduces the
+ * count on narrow ones whenever fitting all of them would push
+ * tiles below `minColumnWidth`.
+ */
+export declare const Layered: Story;
+/**
+ * Items with `width: 2` span two lanes. The skyline picks a span
+ * position that minimizes the resulting baseline across spanned
+ * lanes.
+ */
+export declare const Spanning: Story;
+/**
+ * Edit mode: drag to reorder, resize from the bottom-right corner
+ * (horizontal only — heights are content-driven). Drop commits the
+ * new layout via `onChangeLayout`.
+ *
+ * While `editMode` is on, `<DashboardLanes />` paints its default
+ * overlay behind the tiles to mark the lane tracks. Lanes paint
+ * columns only — there are no row markers because heights are
+ * content-driven.
+ *
+ * Theme the default look in place via `--wp-grid-overlay-tile-bg`,
+ * or replace the visual wholesale
+ * by passing `renderGridOverlay`. See the `Custom Grid Overlay`
+ * story below for a full override example.
+ */
+export declare const EditMode: Story;
+/**
+ * Replaces the surface's default edit-mode overlay with a custom
+ * visual through the `renderGridOverlay` prop. The same contract as
+ * `<DashboardGrid />`'s override path, with `rowHeight` omitted from
+ * the render props because lanes are content-driven vertically.
+ *
+ * Pass `renderGridOverlay={ () => null }` to suppress the overlay
+ * entirely while keeping `editMode` interactions on.
+ */
+export declare const CustomGridOverlayStory: Story;
+//# sourceMappingURL=index.story.d.ts.map

package/build-types/dashboard-lanes/stories/index.story.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/dashboard-lanes/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAO5D;;GAEG;AACH,OAAO,EAAE,cAAc,EAAE,MAAM,IAAI,CAAC;AAIpC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,cAAc,CA6CtC,CAAC;eACa,IAAI;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,cAAc,CAAE,CAAC;AAkF/C;;;;GAIG;AACH,eAAO,MAAM,OAAO,EAAE,KAwCrB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,UAAU,EAAE,KAoBxB,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,OAAO,EAAE,KAqBrB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,QAAQ,EAAE,KA0BtB,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,QAAQ,EAAE,KAuEtB,CAAC;AAkEF;;;;;;;;GAQG;AACH,eAAO,MAAM,sBAAsB,EAAE,KAwEpC,CAAC"}