@inkra/react 0.5.0 → 0.8.0

package/dist/inventory-grid/model.d.ts

@@ -0,0 +1,56 @@
+export interface InventoryCell {
+    x: number;
+    y: number;
+}
+export type InventoryRotation = 0 | 90 | 180 | 270;
+export interface InventoryItem {
+    /** Unique across all containers. */
+    id: string;
+    label?: string;
+    cells: readonly InventoryCell[];
+    position: InventoryCell;
+    rotation?: InventoryRotation;
+    disabled?: boolean;
+    rotatable?: boolean;
+}
+export interface InventoryContainer<Item extends InventoryItem = InventoryItem> {
+    id: string;
+    label?: string;
+    columns: number;
+    rows: number;
+    items: readonly Item[];
+    disabledCells?: readonly InventoryCell[];
+    disabled?: boolean;
+}
+export interface InventoryPlacement {
+    itemId: string;
+    containerId: string;
+    position: InventoryCell;
+    rotation: InventoryRotation;
+}
+export interface InventoryPlacementContext<Item extends InventoryItem = InventoryItem> {
+    item: Item;
+    source: InventoryContainer<Item>;
+    target: InventoryContainer<Item>;
+    placement: InventoryPlacement;
+    cells: readonly InventoryCell[];
+    containers: readonly InventoryContainer<Item>[];
+}
+export type InventoryPlacementRule<Item extends InventoryItem = InventoryItem> = (context: InventoryPlacementContext<Item>) => boolean;
+export type InventoryPlacementResult = {
+    valid: true;
+} | {
+    valid: false;
+    reason: 'missing' | 'disabled' | 'shape' | 'bounds' | 'blocked' | 'occupied' | 'rule';
+};
+export interface InventoryChangeDetails {
+    type: 'move' | 'transfer' | 'rotate';
+    from: InventoryPlacement;
+    to: InventoryPlacement;
+}
+/** Rotations retain the top-left occupied bounding-box anchor. */
+export declare function rotateInventoryCells(cells: readonly InventoryCell[], rotation?: InventoryRotation): InventoryCell[];
+export declare function assertInventoryContainers<Item extends InventoryItem>(containers: readonly InventoryContainer<Item>[]): void;
+export declare function validateInventoryPlacement<Item extends InventoryItem>(containers: readonly InventoryContainer<Item>[], placement: InventoryPlacement, canPlace?: InventoryPlacementRule<Item>): InventoryPlacementResult;
+/** A rejected move preserves the caller's reference and never removes an item. */
+export declare function projectInventoryMove<Item extends InventoryItem>(containers: readonly InventoryContainer<Item>[], placement: InventoryPlacement, canPlace?: InventoryPlacementRule<Item>): readonly InventoryContainer<Item>[];

package/dist/inventory-grid/model.js

@@ -0,0 +1,93 @@
+const key = ({ x, y }) => `${x},${y}`;
+const isCell = ({ x, y }) => Number.isSafeInteger(x) && Number.isSafeInteger(y);
+/** Rotations retain the top-left occupied bounding-box anchor. */
+export function rotateInventoryCells(cells, rotation = 0) {
+    if (!cells.length || cells.length > 4096 || !cells.every(isCell) || ![0, 90, 180, 270].includes(rotation))
+        return [];
+    const rotated = cells.map(({ x, y }) => rotation === 90 ? { x: -y, y: x }
+        : rotation === 180 ? { x: -x, y: -y } : rotation === 270 ? { x: y, y: -x } : { x, y });
+    const minX = Math.min(...rotated.map(cell => cell.x));
+    const minY = Math.min(...rotated.map(cell => cell.y));
+    return [...new Map(rotated.map(cell => {
+            const normalized = { x: cell.x - minX, y: cell.y - minY };
+            return [key(normalized), normalized];
+        })).values()].sort((a, b) => a.y - b.y || a.x - b.x);
+}
+export function assertInventoryContainers(containers) {
+    const containerIds = new Set();
+    const itemIds = new Set();
+    for (const container of containers) {
+        if (!container.id.trim())
+            throw new Error('InventoryGrid: container ids must not be empty.');
+        if (containerIds.has(container.id))
+            throw new Error(`InventoryGrid: duplicate container id "${container.id}".`);
+        containerIds.add(container.id);
+        if (!Number.isSafeInteger(container.columns) || !Number.isSafeInteger(container.rows)
+            || container.columns < 1 || container.rows < 1 || container.columns * container.rows > 4096) {
+            throw new Error('InventoryGrid: containers require positive integer dimensions and at most 4096 cells.');
+        }
+        const occupied = new Set((container.disabledCells ?? []).map(cell => {
+            if (!isCell(cell) || cell.x < 0 || cell.y < 0 || cell.x >= container.columns || cell.y >= container.rows) {
+                throw new Error('InventoryGrid: disabled cells must be inside their container.');
+            }
+            return key(cell);
+        }));
+        for (const item of container.items) {
+            if (!item.id.trim())
+                throw new Error('InventoryGrid: item ids must not be empty.');
+            if (itemIds.has(item.id))
+                throw new Error(`InventoryGrid: duplicate item id "${item.id}".`);
+            itemIds.add(item.id);
+            const cells = rotateInventoryCells(item.cells, item.rotation);
+            if (!cells.length || !isCell(item.position))
+                throw new Error(`InventoryGrid: invalid shape or position for "${item.id}".`);
+            for (const cell of cells) {
+                const x = cell.x + item.position.x;
+                const y = cell.y + item.position.y;
+                if (x < 0 || y < 0 || x >= container.columns || y >= container.rows || occupied.has(key({ x, y }))) {
+                    throw new Error(`InventoryGrid: overlapping, blocked or out-of-bounds item "${item.id}".`);
+                }
+                occupied.add(key({ x, y }));
+            }
+        }
+    }
+}
+export function validateInventoryPlacement(containers, placement, canPlace) {
+    const source = containers.find(container => container.items.some(item => item.id === placement.itemId));
+    const item = source?.items.find(entry => entry.id === placement.itemId);
+    const target = containers.find(container => container.id === placement.containerId);
+    if (!source || !item || !target)
+        return { valid: false, reason: 'missing' };
+    if (source.disabled || target.disabled || item.disabled || (item.rotatable === false && placement.rotation !== (item.rotation ?? 0)))
+        return { valid: false, reason: 'disabled' };
+    const shape = rotateInventoryCells(item.cells, placement.rotation);
+    if (!shape.length || !isCell(placement.position))
+        return { valid: false, reason: 'shape' };
+    const cells = shape.map(cell => ({ x: cell.x + placement.position.x, y: cell.y + placement.position.y }));
+    if (cells.some(cell => cell.x < 0 || cell.y < 0 || cell.x >= target.columns || cell.y >= target.rows))
+        return { valid: false, reason: 'bounds' };
+    const blocked = new Set(target.disabledCells?.map(key));
+    if (cells.some(cell => blocked.has(key(cell))))
+        return { valid: false, reason: 'blocked' };
+    const occupied = new Set(target.items.filter(entry => entry.id !== item.id).flatMap(entry => rotateInventoryCells(entry.cells, entry.rotation).map(cell => key({ x: cell.x + entry.position.x, y: cell.y + entry.position.y }))));
+    if (cells.some(cell => occupied.has(key(cell))))
+        return { valid: false, reason: 'occupied' };
+    if (canPlace && !canPlace({ item, source, target, placement, cells, containers }))
+        return { valid: false, reason: 'rule' };
+    return { valid: true };
+}
+/** A rejected move preserves the caller's reference and never removes an item. */
+export function projectInventoryMove(containers, placement, canPlace) {
+    if (!validateInventoryPlacement(containers, placement, canPlace).valid)
+        return containers;
+    const source = containers.find(container => container.items.some(item => item.id === placement.itemId));
+    const item = source.items.find(entry => entry.id === placement.itemId);
+    if (source.id === placement.containerId && item.position.x === placement.position.x && item.position.y === placement.position.y
+        && (item.rotation ?? 0) === placement.rotation)
+        return containers;
+    const moved = { ...item, position: { ...placement.position }, rotation: placement.rotation };
+    return containers.map(container => container.id === source.id && container.id === placement.containerId
+        ? { ...container, items: container.items.map(entry => entry.id === item.id ? moved : entry) }
+        : container.id === source.id ? { ...container, items: container.items.filter(entry => entry.id !== item.id) }
+            : container.id === placement.containerId ? { ...container, items: [...container.items, moved] } : container);
+}

package/dist/layout/GridBoard.d.ts

@@ -0,0 +1,22 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { Layout, LayoutItem } from 'react-grid-layout';
+export type GridBoardLayout = Layout;
+export type GridBoardLayoutItem = LayoutItem;
+export interface GridBoardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onChange'> {
+    layout?: GridBoardLayout;
+    defaultLayout?: GridBoardLayout;
+    onLayoutChange?: (layout: GridBoardLayout) => void;
+    columns?: number;
+    rowHeight?: number;
+    gap?: number;
+    draggable?: boolean;
+    resizable?: boolean;
+    disabled?: boolean;
+    /** Container width below which cards become a non-editable single column. 0 disables stacking. */
+    stackAt?: number;
+    compact?: 'vertical' | 'horizontal' | null;
+    getItemLabel?: (id: string) => string;
+    getActionLabel?: (action: 'move' | 'resize', id: string) => string;
+    children: (item: GridBoardLayoutItem) => ReactNode;
+}
+export declare function GridBoard({ layout, defaultLayout, onLayoutChange, columns, rowHeight, gap, draggable, resizable, disabled, stackAt, compact, getItemLabel, getActionLabel, children, className, style, ...props }: GridBoardProps): import("react").JSX.Element;

package/dist/layout/GridBoard.js

@@ -0,0 +1,113 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { GridItem, useContainerWidth, useGridLayout } from 'react-grid-layout';
+import { cloneLayout, correctBounds, getCompactor, moveElement } from 'react-grid-layout/core';
+import { __iconData as moveIcon } from 'lucide-react/dist/esm/icons/move.mjs';
+import { __iconData as resizeIcon } from 'lucide-react/dist/esm/icons/move-diagonal-2.mjs';
+import { PencilIcon } from '../PencilIcon.js';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+import { useInkraLocale } from '../i18n/index.js';
+const paths = (icon) => icon.node.flatMap(([tag, attrs]) => tag === 'path' && typeof attrs.d === 'string' ? [{ d: attrs.d }] : []);
+const movePaths = paths(moveIcon);
+const resizePaths = paths(resizeIcon);
+const same = (a, b) => a.length === b.length && a.every((item, index) => {
+    const other = b[index];
+    return other && item.i === other.i && item.x === other.x && item.y === other.y && item.w === other.w && item.h === other.h;
+});
+const sameConfiguration = (a, b) => same(a, b) && a.every((item, index) => {
+    const other = b[index];
+    return ['minW', 'minH', 'maxW', 'maxH', 'isDraggable', 'isResizable', 'isBounded'].every(key => item[key] === other[key])
+        && Boolean(item.static) === Boolean(other.static)
+        && item.constraints === other.constraints
+        && (item.resizeHandles ?? []).join(',') === (other.resizeHandles ?? []).join(',');
+});
+function validateBoardLayout(value) {
+    if (!Array.isArray(value))
+        throw new TypeError('Grid.Board layout must be an array.');
+    const ids = new Set();
+    for (const item of value) {
+        if (!item || typeof item.i !== 'string' || !item.i.trim() || ids.has(item.i)) {
+            throw new TypeError('Grid.Board layout items must have unique, non-empty string ids (i).');
+        }
+        ids.add(item.i);
+        for (const key of ['x', 'y', 'w', 'h']) {
+            const minimum = key === 'w' || key === 'h' ? 1 : 0;
+            if (!Number.isSafeInteger(item[key]) || item[key] < minimum) {
+                throw new RangeError(`Grid.Board item "${item.i}" ${key} must be a finite integer >= ${minimum}.`);
+            }
+        }
+        for (const key of ['minW', 'minH', 'maxW', 'maxH']) {
+            const size = item[key];
+            if (size !== undefined && !(key.startsWith('max') && size === Infinity) && (!Number.isSafeInteger(size) || size < 1)) {
+                throw new RangeError(`Grid.Board item "${item.i}" ${key} must be a positive integer (or Infinity for a maximum).`);
+            }
+        }
+        if ((item.minW ?? 1) > (item.maxW ?? Infinity) || (item.minH ?? 1) > (item.maxH ?? Infinity)) {
+            throw new RangeError(`Grid.Board item "${item.i}" minimum size cannot exceed its maximum.`);
+        }
+    }
+}
+export function GridBoard({ layout, defaultLayout = [], onLayoutChange, columns = 12, rowHeight = 48, gap = 12, draggable = true, resizable = true, disabled = false, stackAt = 480, compact = 'vertical', getItemLabel = id => id, getActionLabel, children, className, style, ...props }) {
+    const { t } = useInkraLocale();
+    const [local, setLocal] = useState(defaultLayout);
+    const current = layout ?? local;
+    const cols = Number.isFinite(columns) ? Math.max(1, Math.min(48, Math.trunc(columns) || 12)) : 12;
+    const height = Number.isFinite(rowHeight) ? Math.max(24, rowHeight) : 48;
+    const spacing = Number.isFinite(gap) ? Math.max(0, gap) : 12;
+    const { width, mounted, containerRef } = useContainerWidth({ initialWidth: 800 });
+    const stacked = mounted && stackAt > 0 && width < stackAt;
+    const compactor = getCompactor(compact);
+    const resolved = useMemo(() => {
+        validateBoardLayout(current);
+        return compactor.compact(correctBounds(cloneLayout(current), { cols }), cols);
+    }, [current, cols, compactor]);
+    const engine = useGridLayout({ layout: resolved, cols, compactor });
+    const pending = useRef(false);
+    const latest = useRef({ current, layout, onLayoutChange });
+    latest.current = { current: resolved, layout, onLayoutChange };
+    useEffect(() => {
+        if (engine.isInteracting || !pending.current)
+            return;
+        pending.current = false;
+        const state = latest.current;
+        if (!same(engine.layout, state.current)) {
+            const next = cloneLayout(engine.layout);
+            if (state.layout === undefined)
+                setLocal(next);
+            state.onLayoutChange?.(next);
+        }
+        // Controlled values are requests, including when the owner rejects an update.
+        if (state.layout !== undefined)
+            engine.setLayout(state.current);
+    }, [engine.layout, engine.isInteracting, engine.setLayout]);
+    useEffect(() => {
+        if (!engine.isInteracting && !pending.current && !sameConfiguration(resolved, engine.layout))
+            engine.setLayout(resolved);
+    }, [resolved, engine.layout, engine.isInteracting, engine.setLayout]);
+    const actionLabel = (action, id) => getActionLabel?.(action, id)
+        ?? `${t(action === 'move' ? 'sortable.handle' : 'resizable.label')}: ${getItemLabel(id)}`;
+    const keyAdjust = (event, item, resize) => {
+        const delta = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], ArrowDown: [0, 1] }[event.key];
+        if (!delta || disabled || stacked || item.static || (resize ? !resizable || item.isResizable === false : !draggable || item.isDraggable === false))
+            return;
+        event.preventDefault();
+        pending.current = true;
+        const [dx, dy] = delta;
+        if (resize) {
+            const w = Math.min(item.maxW ?? cols, cols - item.x, Math.max(item.minW ?? 1, item.w + dx));
+            const h = Math.min(item.maxH ?? Infinity, Math.max(item.minH ?? 1, item.h + dy));
+            engine.onResizeStop(item.i, w, h);
+        }
+        else {
+            const next = cloneLayout(engine.layout);
+            const target = next.find(value => value.i === item.i);
+            engine.setLayout(moveElement(next, target, Math.max(0, Math.min(cols - item.w, item.x + dx)), Math.max(0, item.y + dy), true, false, compact, cols));
+        }
+    };
+    return _jsx("div", { ...props, ref: containerRef, className: ['inkra-grid-board', className].filter(Boolean).join(' '), "data-stacked": stacked || undefined, style: { '--inkra-grid-board-gap': `${spacing}px`, ...style }, children: _jsx("div", { className: "inkra-grid-board__canvas", style: { height: stacked ? undefined : Math.max(0, engine.containerHeight * (height + spacing) - spacing) }, children: engine.layout.map(item => {
+                const canMove = draggable && !disabled && !stacked && !item.static && item.isDraggable !== false;
+                const canResize = resizable && !disabled && !stacked && !item.static && item.isResizable !== false;
+                return _jsx(GridItem, { ...item, cols: cols, containerWidth: width, rowHeight: height, margin: [spacing, spacing], containerPadding: [0, 0], maxRows: Infinity, isBounded: false, isDraggable: canMove, isResizable: canResize, allowMobileScroll: true, dragThreshold: 4, handle: ".inkra-grid-board__move", cancel: ".inkra-grid-board__content", resizeHandles: ['se'], className: "inkra-grid-board__item", usePercentages: !mounted, useCSSTransforms: mounted, onDragStart: (id, x, y) => { pending.current = true; engine.onDragStart(id, x, y); }, onDrag: engine.onDrag, onDragStop: engine.onDragStop, onResizeStart: id => { pending.current = true; engine.onResizeStart(id); }, onResize: (id, w, h) => engine.onResize(id, w, h), onResizeStop: engine.onResizeStop, resizeHandle: (axis, ref) => _jsxs("button", { ref: ref, type: "button", className: `react-resizable-handle react-resizable-handle-${axis} inkra-grid-board__resize`, disabled: !canResize, tabIndex: canResize ? 0 : -1, "aria-label": actionLabel('resize', item.i), onKeyDown: event => keyAdjust(event, item, true), children: [_jsx(PencilSurface, { as: "span", variant: "outline", "aria-hidden": "true", className: "inkra-grid-board__focus" }), _jsx(PencilIcon, { paths: resizePaths, size: 18 })] }), children: _jsx("div", { "data-grid-item": item.i, children: _jsxs(PencilSurface, { variant: "paper", className: "inkra-grid-board__surface", children: [_jsxs("header", { className: "inkra-grid-board__header", children: [_jsx(PencilText, { className: "inkra-grid-board__title", children: getItemLabel(item.i) }), canMove && _jsxs("button", { type: "button", className: "inkra-grid-board__move", "aria-label": actionLabel('move', item.i), onKeyDown: event => keyAdjust(event, item, false), children: [_jsx(PencilSurface, { as: "span", variant: "outline", "aria-hidden": "true", className: "inkra-grid-board__focus" }), _jsx(PencilIcon, { paths: movePaths, size: 18 })] })] }), _jsx("div", { className: "inkra-grid-board__content", children: children(item) })] }) }) }, item.i);
+            }) }) });
+}

package/dist/layout/GridResizable.d.ts

@@ -0,0 +1,31 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { ResizableLayout, ResizablePanelProps } from '../resizable/index.js';
+export interface GridTrack {
+    id: string;
+    minSize?: ResizablePanelProps['minSize'];
+    maxSize?: ResizablePanelProps['maxSize'];
+}
+export interface GridResizableProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    columns: readonly GridTrack[];
+    rows: readonly GridTrack[];
+    columnSizes?: ResizableLayout;
+    defaultColumnSizes?: ResizableLayout;
+    rowSizes?: ResizableLayout;
+    defaultRowSizes?: ResizableLayout;
+    onColumnSizesChange?: (sizes: ResizableLayout) => void;
+    onRowSizesChange?: (sizes: ResizableLayout) => void;
+    onColumnSizesCommit?: (sizes: ResizableLayout) => void;
+    onRowSizesCommit?: (sizes: ResizableLayout) => void;
+    resizeColumns?: boolean;
+    resizeRows?: boolean;
+    disabled?: boolean;
+    getHandleLabel?: (axis: 'column' | 'row', before: string, after: string) => string;
+    children: (cell: {
+        row: string;
+        column: string;
+        rowIndex: number;
+        columnIndex: number;
+    }) => ReactNode;
+}
+/** Shared column sizes keep every row aligned; the existing Resizable engine owns all gestures. */
+export declare const GridResizable: import("react").ForwardRefExoticComponent<GridResizableProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/layout/GridResizable.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, forwardRef, useId, useState } from 'react';
+import { Resizable } from '../resizable/index.js';
+const equal = (a, b) => Object.keys(a).length === Object.keys(b).length
+    && Object.keys(a).every(key => Math.abs(a[key] - (b[key] ?? -1)) < 0.001);
+const even = (tracks) => Object.fromEntries(tracks.map(track => [track.id, 100 / tracks.length]));
+const scoped = (layout, prefix) => Object.fromEntries(Object.entries(layout).map(([key, value]) => [`${prefix}${key}`, value]));
+const unscoped = (layout, prefix) => Object.fromEntries(Object.entries(layout).map(([key, value]) => [key.slice(prefix.length), value]));
+/** Shared column sizes keep every row aligned; the existing Resizable engine owns all gestures. */
+export const GridResizable = forwardRef(function GridResizable({ columns, rows, columnSizes, defaultColumnSizes, rowSizes, defaultRowSizes, onColumnSizesChange, onRowSizesChange, onColumnSizesCommit, onRowSizesCommit, resizeColumns = true, resizeRows = true, disabled = false, getHandleLabel, className, children, ...props }, ref) {
+    const id = useId();
+    const [localColumns, setColumns] = useState(() => defaultColumnSizes ?? even(columns));
+    const [localRows, setRows] = useState(() => defaultRowSizes ?? even(rows));
+    const currentColumns = columnSizes ?? localColumns;
+    const currentRows = rowSizes ?? localRows;
+    const rowPrefix = `${id}-row-`;
+    const changeColumns = (next) => {
+        if (equal(next, currentColumns))
+            return;
+        if (columnSizes === undefined)
+            setColumns(next);
+        onColumnSizesChange?.(next);
+    };
+    const changeRows = (next) => {
+        if (equal(next, currentRows))
+            return;
+        if (rowSizes === undefined)
+            setRows(next);
+        onRowSizesChange?.(next);
+    };
+    return _jsx("div", { ...props, ref: ref, className: ['inkra-grid-resizable', className].filter(Boolean).join(' '), children: _jsx(Resizable.Root, { id: `${id}-rows`, orientation: "vertical", disabled: disabled || !resizeRows, layout: scoped(currentRows, rowPrefix), onLayoutChange: next => changeRows(unscoped(next, rowPrefix)), onLayoutCommit: next => onRowSizesCommit?.(unscoped(next, rowPrefix)), children: rows.map((row, rowIndex) => {
+                const columnPrefix = `${id}-${row.id}-column-`;
+                return _jsxs(Fragment, { children: [rowIndex > 0 && _jsx(Resizable.Handle, { label: getHandleLabel?.('row', rows[rowIndex - 1].id, row.id) }), _jsx(Resizable.Panel, { ...row, id: `${rowPrefix}${row.id}`, children: _jsx(Resizable.Root, { id: `${id}-${row.id}-columns`, disabled: disabled || !resizeColumns, layout: scoped(currentColumns, columnPrefix), onLayoutChange: next => changeColumns(unscoped(next, columnPrefix)), onLayoutCommit: next => onColumnSizesCommit?.(unscoped(next, columnPrefix)), children: columns.map((column, columnIndex) => _jsxs(Fragment, { children: [columnIndex > 0 && _jsx(Resizable.Handle, { label: getHandleLabel?.('column', columns[columnIndex - 1].id, column.id) }), _jsx(Resizable.Panel, { ...column, id: `${columnPrefix}${column.id}`, children: _jsx("div", { className: "inkra-grid-resizable__cell", children: children({ row: row.id, column: column.id, rowIndex, columnIndex }) }) })] }, column.id)) }) })] }, row.id);
+            }) }) });
+});

package/dist/layout/index.d.ts

@@ -1,4 +1,11 @@
-import type { CSSProperties, HTMLAttributes } from 'react';
+import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';
+import { GridBoard } from './GridBoard.js';
+import { type LayoutSwipeNavigation } from './swipeNavigation.js';
+export type { LayoutSwipeNavigation } from './swipeNavigation.js';
+export { GridResizable } from './GridResizable.js';
+export type { GridResizableProps, GridTrack } from './GridResizable.js';
+export { GridBoard } from './GridBoard.js';
+export type { GridBoardProps, GridBoardLayout, GridBoardLayoutItem } from './GridBoard.js';
 export type LayoutSpace = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16;
 export type LayoutElement = 'div' | 'section' | 'article' | 'nav' | 'header' | 'footer' | 'main' | 'aside' | 'ul' | 'ol' | 'li';
 export type LayoutAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
@@ -30,7 +37,10 @@ export interface GridProps extends LayoutElementProps {
     columnGap?: LayoutSpace;
     align?: LayoutAlign;
 }
-export declare const Grid: import("react").ForwardRefExoticComponent<GridProps & import("react").RefAttributes<HTMLElement>>;
+export declare const Grid: import("react").ForwardRefExoticComponent<GridProps & import("react").RefAttributes<HTMLElement>> & {
+    Resizable: import("react").ForwardRefExoticComponent<import("./GridResizable.js").GridResizableProps & import("react").RefAttributes<HTMLDivElement>>;
+    Board: typeof GridBoard;
+};
 export interface ContainerProps extends LayoutElementProps {
     size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
     padding?: LayoutSpace;
@@ -40,6 +50,8 @@ export declare const Container: import("react").ForwardRefExoticComponent<Contai
 export interface LayoutProps extends LayoutElementProps {
     gap?: LayoutSpace;
     collapseAt?: 'sm' | 'md' | 'never';
+    sidebarWidth?: CSSProperties['width'];
+    swipeNavigation?: LayoutSwipeNavigation;
 }
 export interface LayoutBodyProps extends LayoutElementProps {
     gap?: LayoutSpace;
@@ -51,13 +63,16 @@ export interface LayoutRegionProps extends LayoutElementProps {
 export interface LayoutSidebarProps extends LayoutRegionProps {
     width?: CSSProperties['width'];
 }
+export interface LayoutHeaderProps extends LayoutRegionProps {
+    sidebar?: ReactNode;
+    sidebarDivided?: boolean;
+}
 export type LayoutContentProps = Omit<LayoutRegionProps, 'divided'>;
 export declare const Layout: Readonly<{
     Root: import("react").ForwardRefExoticComponent<LayoutProps & import("react").RefAttributes<HTMLElement>>;
-    Header: import("react").ForwardRefExoticComponent<LayoutRegionProps & import("react").RefAttributes<HTMLElement>>;
+    Header: import("react").ForwardRefExoticComponent<LayoutHeaderProps & import("react").RefAttributes<HTMLElement>>;
     Body: import("react").ForwardRefExoticComponent<LayoutBodyProps & import("react").RefAttributes<HTMLElement>>;
     Sidebar: import("react").ForwardRefExoticComponent<LayoutSidebarProps & import("react").RefAttributes<HTMLElement>>;
     Content: import("react").ForwardRefExoticComponent<LayoutContentProps & import("react").RefAttributes<HTMLElement>>;
     Footer: import("react").ForwardRefExoticComponent<LayoutRegionProps & import("react").RefAttributes<HTMLElement>>;
 }>;
-export {};

package/dist/layout/index.js

@@ -1,6 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { createElement, forwardRef } from 'react';
+import { createContext, createElement, forwardRef, useContext, useRef } from 'react';
 import { PencilLine } from '../PencilLine.js';
+import { GridResizable } from './GridResizable.js';
+import { GridBoard } from './GridBoard.js';
+import { useBrowserLayoutEffect } from '../internal/useBrowserLayoutEffect.js';
+import { createLayoutSwipeNavigation } from './swipeNavigation.js';
+export { GridResizable } from './GridResizable.js';
+export { GridBoard } from './GridBoard.js';
 const Box = forwardRef(function Box({ as = 'div', ...props }, ref) {
     return createElement(as, { ...props, ref });
 });
@@ -17,7 +23,7 @@ export const Stack = forwardRef(function Stack({ direction = 'column', className
     return _jsx(Flex, { ...props, ref: ref, direction: direction, className: classes('inkra-stack', className) });
 });
 const columnCount = (value, fallback) => value === undefined || !Number.isFinite(value) ? fallback : Math.min(12, Math.max(1, Math.trunc(value)));
-export const Grid = forwardRef(function Grid({ as: Element = 'div', columns = 1, gap = 3, rowGap = gap, columnGap = gap, align = 'stretch', className, style, ...props }, ref) {
+const GridRoot = forwardRef(function Grid({ as: Element = 'div', columns = 1, gap = 3, rowGap = gap, columnGap = gap, align = 'stretch', className, style, ...props }, ref) {
     const responsive = typeof columns === 'number' ? { base: columns } : columns;
     const base = columnCount(responsive.base, 1);
     const sm = columnCount(responsive.sm, base);
@@ -29,29 +35,59 @@ export const Grid = forwardRef(function Grid({ as: Element = 'div', columns = 1,
     };
     return _jsx(Box, { as: Element, ...props, ref: ref, className: classes('inkra-grid', className), style: resolvedStyle });
 });
+export const Grid = /* @__PURE__ */ Object.assign(GridRoot, { Resizable: GridResizable, Board: GridBoard });
 const containerWidths = { sm: '640px', md: '768px', lg: '1024px', xl: '1280px', full: 'none' };
 export const Container = forwardRef(function Container({ as: Element = 'div', size = 'lg', padding = 5, centered = true, className, style, ...props }, ref) {
     return _jsx(Box, { as: Element, ...props, ref: ref, className: classes('inkra-container', className), style: { maxWidth: containerWidths[size], paddingInline: space(padding),
             marginInline: centered ? 'auto' : 0, ...style } });
 });
-const LayoutRoot = forwardRef(function LayoutRoot({ as: Element = 'div', gap = 0, collapseAt = 'sm', className, style, ...props }, ref) {
-    return _jsx(Box, { as: Element, ...props, ref: ref, className: classes('inkra-layout', className), "data-collapse-at": collapseAt, style: { gap: space(gap), ...style } });
+const LayoutColumnContext = createContext(false);
+const normalizeSidebarWidth = (width = 240) => typeof width === 'number' ? (Number.isFinite(width) ? Math.max(0, width) : 240) : width;
+const isCollapsedWidth = (width) => width === 0 || (typeof width === 'string' && /^0(?:\.0+)?(?:[a-z]+|%)?$/i.test(width.trim()));
+const LayoutRoot = forwardRef(function LayoutRoot({ as: Element = 'div', gap = 0, collapseAt = 'sm', sidebarWidth = 240, className, style, swipeNavigation, onTouchStart, ...props }, ref) {
+    const sharedWidth = normalizeSidebarWidth(sidebarWidth);
+    const resolvedStyle = {
+        '--inkra-layout-shared-sidebar-width': typeof sharedWidth === 'number' ? `${sharedWidth}px` : sharedWidth,
+        gap: space(gap), ...style,
+    };
+    const options = useRef(swipeNavigation);
+    const gesture = useRef(null);
+    if (!gesture.current)
+        gesture.current = createLayoutSwipeNavigation(() => options.current);
+    useBrowserLayoutEffect(() => { options.current = swipeNavigation; });
+    useBrowserLayoutEffect(() => { gesture.current?.cancel(); }, [swipeNavigation?.enabled, swipeNavigation?.open, swipeNavigation?.side, swipeNavigation?.edgeWidth, swipeNavigation?.threshold]);
+    useBrowserLayoutEffect(() => () => gesture.current?.dispose(), []);
+    return _jsx(LayoutColumnContext.Provider, { value: isCollapsedWidth(sharedWidth), children: _jsx(Box, { as: Element, ...props, ref: ref, className: classes('inkra-layout', className), onTouchStart: event => {
+                onTouchStart?.(event);
+                if (!event.defaultPrevented)
+                    gesture.current?.start(event.nativeEvent, event.currentTarget);
+            }, "data-collapse-at": collapseAt, style: resolvedStyle }) });
 });
 const LayoutBody = forwardRef(function LayoutBody({ as: Element = 'div', gap = 0, className, style, ...props }, ref) {
     return _jsx(Box, { as: Element, ...props, ref: ref, className: classes('inkra-layout__body', className), style: { gap: space(gap), ...style } });
 });
-const LayoutHeader = forwardRef(function LayoutHeader({ as: Element = 'header', padding = 5, divided = false, className, style, children, ...props }, ref) {
-    return _jsxs(Box, { as: Element, ...props, ref: ref, className: classes('inkra-layout__header', className), style: { padding: space(padding), ...style }, children: [children, divided && _jsx(PencilLine, { className: "inkra-layout__divider" })] });
+const LayoutHeader = forwardRef(function LayoutHeader({ as: Element = 'header', padding = 5, divided = false, sidebar, sidebarDivided = false, className, style, children, ...props }, ref) {
+    const collapsed = useContext(LayoutColumnContext);
+    const split = sidebar !== undefined && sidebar !== null && typeof sidebar !== 'boolean';
+    const resolvedStyle = {
+        '--inkra-layout-header-padding': space(padding),
+        padding: split ? 0 : space(padding), ...style,
+    };
+    return _jsxs(Box, { as: Element, ...props, ref: ref, className: classes('inkra-layout__header', className), "data-shared-sidebar": split || undefined, style: resolvedStyle, children: [split ? _jsxs(_Fragment, { children: [_jsxs("div", { className: "inkra-layout__header-sidebar", hidden: collapsed, inert: collapsed || undefined, "aria-hidden": collapsed || undefined, children: [sidebar, sidebarDivided && _jsx(PencilLine, { className: "inkra-layout__header-sidebar-divider", orientation: "vertical" })] }), _jsx("div", { className: "inkra-layout__header-content", children: children })] }) : children, divided && _jsx(PencilLine, { className: "inkra-layout__divider" })] });
 });
 const LayoutFooter = forwardRef(function LayoutFooter({ as: Element = 'footer', padding = 5, divided = false, className, style, children, ...props }, ref) {
     return _jsxs(Box, { as: Element, ...props, ref: ref, className: classes('inkra-layout__footer', className), style: { padding: space(padding), ...style }, children: [divided && _jsx(PencilLine, { className: "inkra-layout__divider" }), children] });
 });
-const LayoutSidebar = forwardRef(function LayoutSidebar({ as: Element = 'aside', width = 240, padding = 5, divided = false, className, style, children, ...props }, ref) {
+const LayoutSidebar = forwardRef(function LayoutSidebar({ as: Element = 'aside', width, padding = 5, divided = false, className, style, children, hidden, inert, ...props }, ref) {
+    const sharedCollapsed = useContext(LayoutColumnContext);
+    const resolvedWidth = width === undefined ? undefined : normalizeSidebarWidth(width);
+    const collapsed = resolvedWidth === undefined ? sharedCollapsed : isCollapsedWidth(resolvedWidth);
     const resolvedStyle = {
-        '--inkra-layout-sidebar-width': typeof width === 'number' ? `${width}px` : width,
+        '--inkra-layout-sidebar-width': resolvedWidth === undefined ? 'var(--inkra-layout-shared-sidebar-width, 240px)'
+            : typeof resolvedWidth === 'number' ? `${resolvedWidth}px` : resolvedWidth,
         padding: space(padding), ...style,
     };
-    return _jsxs(Box, { as: Element, ...props, ref: ref, className: classes('inkra-layout__sidebar', className), style: resolvedStyle, children: [children, divided && _jsxs(_Fragment, { children: [_jsx(PencilLine, { className: "inkra-layout__sidebar-divider", orientation: "vertical" }), _jsx(PencilLine, { className: "inkra-layout__sidebar-divider-mobile" })] })] });
+    return _jsxs(Box, { as: Element, ...props, ref: ref, hidden: collapsed || hidden, inert: collapsed || inert, "aria-hidden": collapsed ? true : props['aria-hidden'], className: classes('inkra-layout__sidebar', className), style: resolvedStyle, children: [children, divided && _jsxs(_Fragment, { children: [_jsx(PencilLine, { className: "inkra-layout__sidebar-divider", orientation: "vertical" }), _jsx(PencilLine, { className: "inkra-layout__sidebar-divider-mobile" })] })] });
 });
 const LayoutContent = forwardRef(function LayoutContent({ as: Element = 'div', padding = 5, className, style, ...props }, ref) {
     return _jsx(Box, { as: Element, ...props, ref: ref, className: classes('inkra-layout__content', className), style: { padding: space(padding), ...style } });

package/dist/layout/swipeNavigation.d.ts

@@ -0,0 +1,15 @@
+export interface LayoutSwipeNavigation {
+    enabled?: boolean;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    side?: 'start' | 'end';
+    /** Opening starts within this many local CSS pixels of the sidebar edge. */
+    edgeWidth?: number;
+    /** Minimum horizontal travel before release commits the gesture. */
+    threshold?: number;
+}
+export declare function createLayoutSwipeNavigation(read: () => LayoutSwipeNavigation | undefined): {
+    start: (event: TouchEvent, root: HTMLElement) => void;
+    cancel: () => void;
+    dispose: () => void;
+};