@wordpress/grid 0.1.0

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

@@ -0,0 +1,151 @@
+/**
+ * Internal dependencies
+ */
+import type { DragPreviewRenderProps, GridOverlayRenderProps, ResizeHandleRenderProps } from '../shared/types';
+/**
+ * Lanes layout item definition.
+ *
+ * Mirrors the public surface of `display: grid-lanes`: column span,
+ * an optional pinned lane, and an optional source order. Heights are
+ * content-driven; there is no `height` field. There is no `'fill'`
+ * (lanes pack their items by skyline; nothing is "left over").
+ * `'full'` is expressed by setting `width` to the lane count.
+ */
+export type DashboardLanesLayoutItem = {
+    /**
+     * Unique key that matches a child component key.
+     */
+    key: string;
+    /**
+     * Number of lanes this item spans (`grid-column: span N`). Clamped
+     * to the surface's lane count.
+     *
+     * @default 1
+     */
+    width?: number;
+    /**
+     * Pin the item to a specific 0-indexed lane. Pinned items are
+     * placed before auto items, so the auto flow runs around them.
+     * Out-of-range values (negative, or beyond `columns - width`) are
+     * clamped to the available range.
+     */
+    lane?: number;
+    /**
+     * Display order. Lower values render first. When omitted, the
+     * item falls back to its index in the `layout` array.
+     */
+    order?: number;
+};
+/**
+ * Props for `DashboardLanes`.
+ *
+ * `columns` and `minColumnWidth` compose as a layered model:
+ * - `columns` alone: fixed N lanes; tiles scale with the container.
+ * - `minColumnWidth` alone: lane count derives from container width,
+ *   floored by the per-tile minimum, down to 1.
+ * - Both together: `columns` caps the count, `minColumnWidth` enforces
+ *   a per-tile width floor that can reduce the count below the cap.
+ */
+export interface DashboardLanesProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children' | 'className' | 'style'> {
+    /**
+     * Array of layout items.
+     */
+    layout: DashboardLanesLayoutItem[];
+    /**
+     * Surface children. Each child must carry a `key` matching an
+     * entry in `layout`; children without a match render at the end
+     * of the surface without explicit placement and fall through the
+     * lanes auto-flow.
+     */
+    children: React.ReactNode;
+    /**
+     * Additional CSS class on the surface root.
+     */
+    className?: string;
+    /**
+     * Inline styles on the surface root. Merged underneath the
+     * surface's own layout styles, so `display` and
+     * `gridTemplateColumns` always win. 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;
+    /**
+     * `flow-tolerance` value in pixels. When two candidate lanes
+     * differ in baseline by no more than this, the earlier lane wins
+     * to preserve source order. Larger values keep tiles closer to
+     * reading order at the cost of bigger empty regions.
+     *
+     * @default 16
+     */
+    flowTolerance?: number;
+    /**
+     * Snap unit for the polyfill's `grid-row-start` / `grid-row-end:
+     * span N` math. Smaller values produce sharper placement at the
+     * cost of a larger implicit row count. Ignored on browsers with
+     * native `display: grid-lanes` support.
+     *
+     * @default 4
+     */
+    rowUnit?: number;
+    /**
+     * Whether the surface is in edit mode (drag-to-reorder, resize).
+     *
+     * @default false
+     */
+    editMode?: boolean;
+    /**
+     * Fired when the user commits a drag or resize.
+     */
+    onChangeLayout?: (newLayout: DashboardLanesLayoutItem[]) => void;
+    /**
+     * Fired continuously during a gesture with the in-progress
+     * layout. The committed result still emits via `onChangeLayout`.
+     */
+    onPreviewLayout?: (previewLayout: DashboardLanesLayoutItem[]) => void;
+    /**
+     * Override the default corner resize handle. See `DashboardGrid`
+     * for the full contract; on lanes the handle is horizontal-only
+     * because heights are content-driven.
+     */
+    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 (empty column tracks) with
+     * a custom component. Lanes are content-driven vertically, so no
+     * `rowHeight` or `rows` is supplied and the default visual paints
+     * columns only.
+     *
+     * The overlay only renders when `editMode` is true. When omitted,
+     * the package's default visual is used.
+     */
+    renderGridOverlay?: React.ComponentType<GridOverlayRenderProps>;
+    /**
+     * Target lane 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
+     * lane count derives from container width, floored by this value,
+     * down to 1.
+     */
+    minColumnWidth?: number;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/dashboard-lanes/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EACX,sBAAsB,EACtB,sBAAsB,EACtB,uBAAuB,EACvB,MAAM,iBAAiB,CAAC;AAEzB;;;;;;;;GAQG;AACH,MAAM,MAAM,wBAAwB,GAAG;IACtC;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IAEZ;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;;;;;;;GASG;AACH,MAAM,WAAW,mBAChB,SAAQ,IAAI,CACX,KAAK,CAAC,wBAAwB,CAAE,KAAK,CAAE,EACvC,UAAU,GAAG,WAAW,GAAG,OAAO,CAClC;IACD;;OAEG;IACH,MAAM,EAAE,wBAAwB,EAAE,CAAC;IAEnC;;;;;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;;;;;;;OAOG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,CAAE,SAAS,EAAE,wBAAwB,EAAE,KAAM,IAAI,CAAC;IAEnE;;;OAGG;IACH,eAAe,CAAC,EAAE,CAAE,aAAa,EAAE,wBAAwB,EAAE,KAAM,IAAI,CAAC;IAExE;;;;OAIG;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/use-lane-placement.d.ts

@@ -0,0 +1,74 @@
+/**
+ * Logical item passed to the hook. The renderer is responsible for
+ * mounting a DOM node with `data-wp-grid-item-key={ item.key }` for each
+ * entry; the hook will measure that node and produce inline styles.
+ */
+export type LaneItemInput = {
+    key: string;
+    span?: number;
+    lane?: number;
+};
+export type UseLanePlacementInput = {
+    items: ReadonlyArray<LaneItemInput>;
+    lanes: number;
+    gap: number;
+    flowTolerance: number;
+    /**
+     * Snap unit for `grid-row-start` / `grid-row-end: span N` math.
+     * Smaller values produce sharper placement at the cost of more
+     * implicit rows. Defaults to 4 (px).
+     */
+    rowUnit?: number;
+};
+export type UseLanePlacementResult = {
+    /**
+     * Inline styles to apply to each item, keyed by item key. On
+     * native (`display: grid-lanes`), entries carry only
+     * `gridColumn: span N`; the browser handles row placement. While
+     * polyfilling, entries also carry explicit `grid-column-start` /
+     * `grid-row-*` values.
+     */
+    itemStyles: Map<string, React.CSSProperties>;
+    /**
+     * `false` when the host browser supports `display: grid-lanes`
+     * natively. The hook avoids mounting any observers in that case.
+     */
+    isPolyfilled: boolean;
+};
+/**
+ * Hook that measures item heights and resolves their placement when
+ * `display: grid-lanes` is unavailable, falling through to a no-op
+ * pass when the host browser supports the feature natively.
+ *
+ * Usage from the renderer:
+ *
+ * ```tsx
+ * const [ container, setContainer ] = useState< HTMLDivElement | null >( null );
+ * const { itemStyles } = useLanePlacement( container, {
+ *     items: layout,
+ *     lanes: columns,
+ *     gap: gapPx,
+ *     flowTolerance: 16,
+ * } );
+ *
+ * return (
+ *     <div ref={ setContainer } style={ { display: 'grid-lanes', ... } }>
+ *         { items.map( ( item ) => (
+ *             <div
+ *                 key={ item.key }
+ *                 data-wp-grid-item-key={ item.key }
+ *                 style={ itemStyles.get( item.key ) }
+ *             >
+ *                 { ... }
+ *             </div>
+ *         ) ) }
+ *     </div>
+ * );
+ * ```
+ *
+ * @param container HTMLElement (or null pre-mount) hosting the items.
+ * @param input     Logical items, lane count, gap, and tuning.
+ * @return Per-item styles plus the `isPolyfilled` flag.
+ */
+export declare function useLanePlacement(container: HTMLElement | null, input: UseLanePlacementInput): UseLanePlacementResult;
+//# sourceMappingURL=use-lane-placement.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-lane-placement.d.ts","sourceRoot":"","sources":["../../src/dashboard-lanes/use-lane-placement.ts"],"names":[],"mappings":"AA2BA;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IACnC,KAAK,EAAE,aAAa,CAAE,aAAa,CAAE,CAAC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,aAAa,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACpC;;;;;;OAMG;IACH,UAAU,EAAE,GAAG,CAAE,MAAM,EAAE,KAAK,CAAC,aAAa,CAAE,CAAC;IAE/C;;;OAGG;IACH,YAAY,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,wBAAgB,gBAAgB,CAC/B,SAAS,EAAE,WAAW,GAAG,IAAI,EAC7B,KAAK,EAAE,qBAAqB,GAC1B,sBAAsB,CA8MxB"}

package/build-types/index.d.ts

@@ -0,0 +1,6 @@
+export { DashboardGrid } from './dashboard-grid';
+export { DashboardLanes } from './dashboard-lanes';
+export type { DashboardGridLayoutItem, DashboardGridProps, } from './dashboard-grid/types';
+export type { DashboardLanesLayoutItem, DashboardLanesProps, } from './dashboard-lanes/types';
+export type { DragPreviewRenderProps, GridOverlayRenderProps, ResizeDelta, ResizeHandleRenderProps, } from './shared/types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD,YAAY,EACX,uBAAuB,EACvB,kBAAkB,GAClB,MAAM,wBAAwB,CAAC;AAChC,YAAY,EACX,wBAAwB,EACxB,mBAAmB,GACnB,MAAM,yBAAyB,CAAC;AACjC,YAAY,EACX,sBAAsB,EACtB,sBAAsB,EACtB,WAAW,EACX,uBAAuB,GACvB,MAAM,gBAAgB,CAAC"}

package/build-types/shared/drag-overlay-drop-animation.d.ts

@@ -0,0 +1,13 @@
+import type { DropAnimation } from '@dnd-kit/core';
+/** Matches `--wpds-motion-duration-md` on the drag preview frame exit. */
+export declare const DROP_ANIMATION_DURATION_MS = 200;
+/**
+ * Composes @dnd-kit/core’s default overlay drop translation with preview
+ * exit keyframes (via side effects). When the pointer never moves, @dnd-kit
+ * skips the drop animation and these side effects do not run.
+ *
+ * @param dragPreviewFrameClassName Hashed class for `.drag-preview-frame`.
+ * @param exitingFrameClassName     Hashed class for the exit state.
+ */
+export declare function createDashboardDragDropAnimation(dragPreviewFrameClassName: string, exitingFrameClassName: string): DropAnimation;
+//# sourceMappingURL=drag-overlay-drop-animation.d.ts.map

package/build-types/shared/drag-overlay-drop-animation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drag-overlay-drop-animation.d.ts","sourceRoot":"","sources":["../../src/shared/drag-overlay-drop-animation.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEnD,0EAA0E;AAC1E,eAAO,MAAM,0BAA0B,MAAM,CAAC;AAK9C;;;;;;;GAOG;AACH,wBAAgB,gCAAgC,CAC/C,yBAAyB,EAAE,MAAM,EACjC,qBAAqB,EAAE,MAAM,GAC3B,aAAa,CAuCf"}

package/build-types/shared/grid-item-key.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Data attribute grid tiles declare so layout-shift animation can map
+ * measured DOM nodes back to logical item keys.
+ */
+export declare const GRID_ITEM_DATA_KEY = "data-wp-grid-item-key";
+//# sourceMappingURL=grid-item-key.d.ts.map

package/build-types/shared/grid-item-key.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-item-key.d.ts","sourceRoot":"","sources":["../../src/shared/grid-item-key.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,kBAAkB,0BAA0B,CAAC"}

package/build-types/shared/grid-overlay.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Internal dependencies
+ */
+import type { GridOverlayRenderProps } from './types';
+/**
+ * Default edit-mode overlay: one column per track, each holding `rows`
+ * row-marker tiles when `rowHeight` is uniform. Used by both surfaces
+ * and replaceable via `renderGridOverlay`. Reveals with a diagonal
+ * wave on activate and releases paint cost while inactive.
+ *
+ * @param props           Render props supplied by the surface.
+ * @param props.columns   Column tracks to mirror.
+ * @param props.rowHeight Uniform row height in pixels; omitted for
+ *                        content-sized rows, which skip row markers.
+ * @param props.rows      Row tracks per column; omitted when unknown.
+ * @param props.isActive  When `false`, the overlay fades out.
+ */
+export declare function GridOverlay({ columns, rowHeight, rows, isActive }: GridOverlayRenderProps): import("react").JSX.Element;
+//# sourceMappingURL=grid-overlay.d.ts.map

package/build-types/shared/grid-overlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-overlay.d.ts","sourceRoot":"","sources":["../../src/shared/grid-overlay.tsx"],"names":[],"mappings":"AAUA;;GAEG;AACH,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAGtD;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAE,EAC5B,OAAO,EACP,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,EAAE,sBAAsB,+BA0DxB"}

package/build-types/shared/item-exit-overlay.d.ts

@@ -0,0 +1,20 @@
+import type { RectSnapshot } from './use-layout-shift-animation';
+export type ItemExitOverlayRect = Pick<RectSnapshot, 'left' | 'top' | 'width' | 'height'>;
+export type ItemExitOverlayProps = {
+    itemKey: string;
+    rect: ItemExitOverlayRect;
+    children: React.ReactNode;
+    onAnimationEnd: () => void;
+};
+/**
+ * Ghost tile shown at the removed item's last position while siblings
+ * reflow. Not a sortable grid cell — only visual exit feedback.
+ *
+ * @param root0                Component props.
+ * @param root0.itemKey        Layout key of the removed tile.
+ * @param root0.rect           Last bounds relative to the grid surface.
+ * @param root0.children       Cached tile content to render in the ghost.
+ * @param root0.onAnimationEnd Called when the exit animation finishes.
+ */
+export declare function ItemExitOverlay({ itemKey, rect, children, onAnimationEnd }: ItemExitOverlayProps): import("react").JSX.Element;
+//# sourceMappingURL=item-exit-overlay.d.ts.map

package/build-types/shared/item-exit-overlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"item-exit-overlay.d.ts","sourceRoot":"","sources":["../../src/shared/item-exit-overlay.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAEjE,MAAM,MAAM,mBAAmB,GAAG,IAAI,CACrC,YAAY,EACZ,MAAM,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,CACnC,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IAClC,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,mBAAmB,CAAC;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,cAAc,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAEF;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAAE,EAChC,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,cAAc,EACd,EAAE,oBAAoB,+BAsBtB"}

package/build-types/shared/resize-handle.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Internal dependencies
+ */
+import type { ResizeHandleProps } from './types';
+/**
+ * Renders a corner resize handle inside an isolated `<DndContext>`.
+ * Reports the cursor offset since the gesture started (in pixels)
+ * via `onResize`, throttled to one animation frame so the grid
+ * commit loop runs at most once per paint.
+ *
+ * Auto-scroll is enabled with a tight trigger zone and a low
+ * acceleration so a resize gesture near the viewport edge scrolls
+ * the page only when the user deliberately pushes against the very
+ * edge, and even then at a pace the user can interrupt by releasing.
+ * Default tuning would otherwise produce a runaway loop where the
+ * page scrolls fast, dnd-kit's document-coordinate `delta` inflates
+ * with the scroll, and the tile keeps growing without further user
+ * input.
+ *
+ * @param props Component props.
+ */
+export default function ResizeHandleWrapper(props: ResizeHandleProps): import("react").JSX.Element;
+//# sourceMappingURL=resize-handle.d.ts.map

package/build-types/shared/resize-handle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resize-handle.d.ts","sourceRoot":"","sources":["../../src/shared/resize-handle.tsx"],"names":[],"mappings":"AAaA;;GAEG;AACH,OAAO,KAAK,EAAe,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAsF9D;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAE,KAAK,EAAE,iBAAiB,+BA2CpE"}

package/build-types/shared/resize-snap.d.ts

@@ -0,0 +1,41 @@
+import type { ResizeDelta } from './types';
+/**
+ * Pixel dimensions for the snapped resize preview outline.
+ */
+export type ResizeSnapSize = {
+    widthPx: number;
+    /** When `null`, the preview spans the item's content height (lanes). */
+    heightPx: number | null;
+};
+/**
+ * Clamps a resize delta so the tile cannot shrink below the given
+ * minimum width (and height when provided).
+ *
+ * @param delta              Cursor offset from the gesture start in pixels.
+ * @param initialSize        Size captured at gesture start.
+ * @param initialSize.width  Initial width in pixels.
+ * @param initialSize.height Initial height in pixels.
+ * @param minSize            Minimum tile size in pixels.
+ * @param minSize.width      Minimum width in pixels.
+ * @param minSize.height     Minimum height in pixels, when vertical resize applies.
+ */
+export declare function clampResizeDelta(delta: ResizeDelta, initialSize: {
+    width: number;
+    height: number;
+}, minSize: {
+    width: number;
+    height?: number;
+}): ResizeDelta;
+/**
+ * Converts grid spans to pixel width/height for the resize-preview
+ * outline, using the same track math the surface uses for placement.
+ *
+ * @param columnSpan  Number of columns the snap target spans.
+ * @param rowSpan     Number of rows the snap target spans.
+ * @param columnWidth Width of one column track in pixels.
+ * @param gapPx       Gap between tracks in pixels.
+ * @param rowHeightPx Row track height in pixels, or `null` when rows
+ *                    are content-sized.
+ */
+export declare function gridSpanToPixelSize(columnSpan: number, rowSpan: number, columnWidth: number, gapPx: number, rowHeightPx: number | null): ResizeSnapSize;
+//# sourceMappingURL=resize-snap.d.ts.map

package/build-types/shared/resize-snap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resize-snap.d.ts","sourceRoot":"","sources":["../../src/shared/resize-snap.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,wEAAwE;IACxE,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;CACxB,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,wBAAgB,gBAAgB,CAC/B,KAAK,EAAE,WAAW,EAClB,WAAW,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,EAC9C,OAAO,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,GACzC,WAAW,CASb;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,mBAAmB,CAClC,UAAU,EAAE,MAAM,EAClB,OAAO,EAAE,MAAM,EACf,WAAW,EAAE,MAAM,EACnB,KAAK,EAAE,MAAM,EACb,WAAW,EAAE,MAAM,GAAG,IAAI,GACxB,cAAc,CAOhB"}

package/build-types/shared/types.d.ts

@@ -0,0 +1,144 @@
+/**
+ * External dependencies
+ */
+import type { useDraggable } from '@dnd-kit/core';
+type DraggableBindings = ReturnType<typeof useDraggable>;
+/**
+ * Cursor offset reported by the resize handle, in pixels relative to
+ * the gesture start. Width and height are independent so the surface
+ * can step columns and rows separately.
+ */
+export type ResizeDelta = {
+    width: number;
+    height: number;
+};
+/**
+ * Props received by a custom resize handle component. Spread `listeners`
+ * and `attributes` onto the element that should respond to the gesture,
+ * and assign `ref` to the same element so dnd-kit can track it.
+ */
+export interface ResizeHandleRenderProps {
+    /**
+     * Ref callback to attach to the gesture-bearing element.
+     */
+    ref: DraggableBindings['setNodeRef'];
+    /**
+     * Pointer/keyboard event listeners that initiate the drag.
+     */
+    listeners: DraggableBindings['listeners'];
+    /**
+     * Accessibility and dnd-kit attributes (role, aria-*, tabIndex…).
+     */
+    attributes: DraggableBindings['attributes'];
+    /**
+     * Whether vertical resizing is allowed for this tile. Useful for
+     * adapting the cursor or visual cue.
+     */
+    verticalResizable: boolean;
+    /**
+     * True while the user is actively dragging this handle. Use it to
+     * swap colors, icons, or transforms during the gesture.
+     */
+    isResizing: boolean;
+    /**
+     * Owning item's `key`. Available so consumers can render per-tile
+     * content if needed.
+     */
+    itemId?: string;
+}
+/**
+ * Props received by a custom drag-preview component. The surface mounts
+ * the component inside `<DragOverlay>` and supplies the active tile's
+ * cloned children plus its `key`. The component is responsible for the
+ * visual chrome of the dragged clone (shadow, radius, padding); the
+ * surface keeps a thin functional wrapper around it that owns the lift
+ * cue, the cursor, and pointer pass-through during the gesture.
+ */
+export interface DragPreviewRenderProps {
+    /**
+     * The cloned tile content the surface mounts inside the
+     * `<DragOverlay>` portal. Render it where the visual wrapper
+     * expects the tile body.
+     */
+    children: React.ReactNode;
+    /**
+     * Owning tile's `key`. Useful when the visual chrome needs to
+     * vary by which tile is being dragged.
+     */
+    itemId: string;
+}
+/**
+ * Props received by a custom grid overlay component. The overlay
+ * paints behind the tiles in edit mode to visualize the column tracks
+ * and (when `rowHeight` is defined) the row tracks. Receives a
+ * snapshot of the surface's resolved layout parameters so the visual
+ * can reproduce the tracks pixel-accurately without re-deriving them.
+ *
+ * Reused by both `DashboardGrid` and `DashboardLanes`: lanes pass no
+ * `rowHeight` because heights are content-driven.
+ */
+export interface GridOverlayRenderProps {
+    /**
+     * Number of column tracks in the active surface. In responsive
+     * mode (`minColumnWidth`), this is the count derived from the
+     * container width, not the prop value.
+     */
+    columns: number;
+    /**
+     * Row height in pixels for surfaces with uniform rows. Omitted on
+     * surfaces with content-driven heights (lanes) or when row height
+     * is `'auto'`; in those cases row markers are omitted.
+     */
+    rowHeight?: number;
+    /**
+     * Number of row tracks to mirror in each column. Derived from the
+     * grid container height when `rowHeight` is numeric; omitted when
+     * row height is unknown.
+     */
+    rows?: number;
+    /**
+     * Whether the overlay should be visible. Surfaces render the
+     * overlay even when `false` so the implementation can transition
+     * opacity in and out; while `false`, the overlay must hide itself
+     * (and ideally release paint cost via `visibility: hidden` or an
+     * equivalent).
+     */
+    isActive: boolean;
+}
+/**
+ * Props for the internal `<ResizeHandle />` wrapper.
+ */
+export interface ResizeHandleProps {
+    /**
+     * Owning item's `key`. Forwarded as `data.itemId` on the draggable
+     * so the parent can correlate the gesture with a tile if needed.
+     */
+    itemId?: string;
+    /**
+     * Whether the handle should track vertical movement. When false,
+     * the handle still appears but only emits horizontal deltas, and
+     * the cursor is constrained to the column resize axis.
+     *
+     * @default true
+     */
+    verticalResizable?: boolean;
+    /**
+     * Callback fired while the handle is being dragged. Receives the
+     * cursor offset from the gesture start in pixels.
+     */
+    onResize?: (delta: ResizeDelta) => void;
+    /**
+     * Callback fired when the gesture ends.
+     */
+    onResizeEnd?: () => void;
+    /**
+     * Component that overrides the default corner triangle with a
+     * custom element. Receives gesture wiring (`ref`, `listeners`,
+     * `attributes`) plus context. The surface keeps ownership of the
+     * `<DndContext>` and the throttled delta loop; consumers are only
+     * responsible for the visual.
+     */
+    renderResizeHandle?: React.ComponentType<ResizeHandleRenderProps>;
+}
+export {};
+//# sourceMappingURL=types.d.ts.map

package/build-types/shared/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/shared/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAKlD,KAAK,iBAAiB,GAAG,UAAU,CAAE,OAAO,YAAY,CAAE,CAAC;AAE3D;;;;GAIG;AACH,MAAM,MAAM,WAAW,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;;GAIG;AACH,MAAM,WAAW,uBAAuB;IACvC;;OAEG;IACH,GAAG,EAAE,iBAAiB,CAAE,YAAY,CAAE,CAAC;IAEvC;;OAEG;IACH,SAAS,EAAE,iBAAiB,CAAE,WAAW,CAAE,CAAC;IAE5C;;OAEG;IACH,UAAU,EAAE,iBAAiB,CAAE,YAAY,CAAE,CAAC;IAE9C;;;OAGG;IACH,iBAAiB,EAAE,OAAO,CAAC;IAE3B;;;OAGG;IACH,UAAU,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,sBAAsB;IACtC;;;;OAIG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;;OAGG;IACH,MAAM,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;GASG;AACH,MAAM,WAAW,sBAAsB;IACtC;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;;;;OAMG;IACH,QAAQ,EAAE,OAAO,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IACjC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAE,KAAK,EAAE,WAAW,KAAM,IAAI,CAAC;IAE1C;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IAEzB;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAE,uBAAuB,CAAE,CAAC;CACpE"}

package/build-types/shared/use-item-exit-animation.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Internal dependencies
+ */
+import type { ItemExitOverlayRect } from './item-exit-overlay';
+import type { RectSnapshot } from './use-layout-shift-animation';
+export type ExitingGridItem = {
+    key: string;
+    rect: ItemExitOverlayRect;
+    child: React.ReactElement;
+};
+type UseItemExitAnimationOptions = {
+    container: HTMLElement | null;
+    enabled: boolean;
+    layoutKeys: ReadonlySet<string>;
+    getPositionsBeforeLastChange: () => ReadonlyMap<string, RectSnapshot> | null;
+    childrenCacheRef: React.MutableRefObject<Map<string, React.ReactElement>>;
+};
+type UseItemExitAnimationResult = {
+    exitingItems: ExitingGridItem[];
+    hasExitingItems: boolean;
+    clearExitingItem: (key: string) => void;
+};
+/**
+ * When `layout` loses keys in edit mode, keeps a short-lived overlay at
+ * the removed tile's last position (scale + fade) while siblings FLIP.
+ *
+ * @param root0                              Hook options.
+ * @param root0.container                    Surface root that contains grid tiles.
+ * @param root0.enabled                      When false, exiting state is cleared.
+ * @param root0.layoutKeys                   Keys in the committed `layout` prop.
+ * @param root0.getPositionsBeforeLastChange Container-relative rects before the latest layout commit.
+ * @param root0.childrenCacheRef             Last rendered children keyed by tile id.
+ * @return Exiting overlays and a callback to dismiss one by key.
+ */
+export declare function useItemExitAnimation({ container, enabled, layoutKeys, getPositionsBeforeLastChange, childrenCacheRef }: UseItemExitAnimationOptions): UseItemExitAnimationResult;
+export {};
+//# sourceMappingURL=use-item-exit-animation.d.ts.map

package/build-types/shared/use-item-exit-animation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-item-exit-animation.d.ts","sourceRoot":"","sources":["../../src/shared/use-item-exit-animation.ts"],"names":[],"mappings":"AAUA;;GAEG;AACH,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AASjE,MAAM,MAAM,eAAe,GAAG;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,mBAAmB,CAAC;IAC1B,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC;CAC1B,CAAC;AAEF,KAAK,2BAA2B,GAAG;IAClC,SAAS,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,WAAW,CAAE,MAAM,CAAE,CAAC;IAClC,4BAA4B,EAAE,MAAM,WAAW,CAC9C,MAAM,EACN,YAAY,CACZ,GAAG,IAAI,CAAC;IACT,gBAAgB,EAAE,KAAK,CAAC,gBAAgB,CACvC,GAAG,CAAE,MAAM,EAAE,KAAK,CAAC,YAAY,CAAE,CACjC,CAAC;CACF,CAAC;AAEF,KAAK,0BAA0B,GAAG;IACjC,YAAY,EAAE,eAAe,EAAE,CAAC;IAChC,eAAe,EAAE,OAAO,CAAC;IACzB,gBAAgB,EAAE,CAAE,GAAG,EAAE,MAAM,KAAM,IAAI,CAAC;CAC1C,CAAC;AASF;;;;;;;;;;;GAWG;AACH,wBAAgB,oBAAoB,CAAE,EACrC,SAAS,EACT,OAAO,EACP,UAAU,EACV,4BAA4B,EAC5B,gBAAgB,EAChB,EAAE,2BAA2B,GAAI,0BAA0B,CA6H3D"}