@inkra/react 0.6.0 → 0.9.0

package/dist/inventory-grid/index.js

@@ -0,0 +1,215 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { DndContext, DragOverlay, KeyboardSensor, MouseSensor, TouchSensor, pointerWithin, rectIntersection, useDraggable, useDroppable, useSensor, useSensors } from '@dnd-kit/core';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { __iconData as rotateIconData } from 'lucide-react/dist/esm/icons/rotate-cw.mjs';
+import { Button } from '../Button.js';
+import { PencilIcon } from '../PencilIcon.js';
+import { PencilLine } from '../PencilLine.js';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+import { useInkraLocale } from '../i18n/index.js';
+import { PortalThemeBridge, PortalThemeProvider, usePortalTriggerRef } from '../overlay/themeBridge.js';
+import { assertInventoryContainers, projectInventoryMove, rotateInventoryCells, validateInventoryPlacement } from './model.js';
+import { inventoryOutline } from './outline.js';
+export { assertInventoryContainers, projectInventoryMove, rotateInventoryCells, validateInventoryPlacement } from './model.js';
+const rotateIcon = rotateIconData.node.map(([, attributes]) => ({ d: String(attributes.d) }));
+const boardId = (id) => `inkra-inventory-board:${id}`;
+const itemId = (id) => `inkra-inventory-item:${id}`;
+const bounds = (cells) => ({ width: Math.max(...cells.map(cell => cell.x)) + 1, height: Math.max(...cells.map(cell => cell.y)) + 1 });
+const collisionDetection = args => args.pointerCoordinates ? pointerWithin(args) : rectIntersection(args);
+function Shape({ cells, size, seed, children }) {
+    const outline = useMemo(() => inventoryOutline(cells, size), [cells, size]);
+    const box = bounds(cells);
+    return _jsxs(_Fragment, { children: [_jsxs("span", { className: "inkra-inventory-grid__shape", "aria-hidden": "true", style: { width: box.width * size, height: box.height * size }, children: [_jsx(PencilSurface, { as: "span", variant: "full", seed: seed, className: "inkra-inventory-grid__shape-fill", style: { clipPath: `path("${outline.path}")` }, children: _jsx(PencilSurface, { as: "span", variant: "selection", seed: `${seed}-wash`, className: "inkra-inventory-grid__shape-wash" }) }), _jsx("svg", { className: "inkra-inventory-grid__shape-fallback", width: "100%", height: "100%", children: _jsx("path", { d: outline.path, fill: "none", stroke: "currentColor" }) }), outline.segments.map(({ start, end }, index) => {
+                        const vertical = start.x === end.x;
+                        const style = { left: Math.min(start.x, end.x) - (vertical ? 4 : 1),
+                            top: Math.min(start.y, end.y) - (vertical ? 1 : 4),
+                            width: vertical ? 8 : Math.abs(end.x - start.x) + 2,
+                            height: vertical ? Math.abs(end.y - start.y) + 2 : 8 };
+                        return _jsx(PencilLine, { orientation: vertical ? 'vertical' : 'horizontal', seed: `${seed}-edge-${index}`, className: "inkra-inventory-grid__shape-edge", style: style }, index);
+                    })] }), cells.map((cell, index) => _jsx("span", { className: "inkra-inventory-grid__cell", style: { left: cell.x * size, top: cell.y * size, width: size, height: size }, children: index === 0 && _jsx("span", { className: "inkra-inventory-grid__item-content", children: children }) }, `${cell.x}:${cell.y}`))] });
+}
+function ItemView({ item, container, size, disabled, selected, onSelect, onRotate, renderItem, getItemLabel, allowRotation }) {
+    const { attributes, listeners, setNodeRef, isDragging } = useDraggable({ id: itemId(item.id), disabled,
+        data: { itemId: item.id, containerId: container.id } });
+    const cells = rotateInventoryCells(item.cells, item.rotation);
+    const box = bounds(cells);
+    return _jsx("div", { ...attributes, ...listeners, ref: setNodeRef, role: "button", tabIndex: disabled ? -1 : 0, "aria-label": getItemLabel(item), title: getItemLabel(item), "aria-disabled": disabled || undefined, className: "inkra-inventory-grid__item", "data-inventory-item": item.id, "data-selected": selected || undefined, "data-dragging": isDragging || undefined, "data-disabled": disabled || undefined, "data-rotation": item.rotation ?? 0, style: { left: item.position.x * size, top: item.position.y * size, width: box.width * size, height: box.height * size }, onFocus: () => onSelect(item.id), onClick: () => { if (!disabled)
+            onSelect(item.id); }, onKeyDown: event => {
+            if (!isDragging && allowRotation && !disabled && event.key.toLowerCase() === 'r') {
+                event.preventDefault();
+                onRotate(item.id);
+            }
+            else
+                listeners?.onKeyDown?.(event);
+        }, children: _jsx(Shape, { cells: cells, size: size, seed: item.id, children: renderItem(item, { selected, dragging: isDragging, rotation: item.rotation ?? 0, overlay: false }) }) });
+}
+function ContainerView({ container, size, disabled, selectedId, onSelect, onRotate, renderItem, getItemLabel, allowRotation, projection, activeItem, valid, rotateLabel }) {
+    const { setNodeRef } = useDroppable({ id: boardId(container.id), disabled: disabled || container.disabled,
+        data: { containerId: container.id, columns: container.columns, rows: container.rows } });
+    const selected = container.items.find(item => item.id === selectedId);
+    const projectedCells = projection && activeItem ? rotateInventoryCells(activeItem.cells, projection.rotation) : [];
+    return _jsxs("section", { className: "inkra-inventory-grid__container", "aria-label": container.label ?? container.id, "data-disabled": container.disabled || undefined, children: [_jsxs("div", { className: "inkra-inventory-grid__header", children: [_jsx(PencilText, { children: container.label ?? container.id }), allowRotation && _jsx(Button, { variant: "ghost", size: "icon", "aria-label": rotateLabel, title: rotateLabel, disabled: disabled || container.disabled || !selected || selected.disabled || selected.rotatable === false, onClick: () => { if (selected)
+                            onRotate(selected.id); }, children: _jsx(PencilIcon, { paths: rotateIcon, size: 24 }) })] }), _jsx("div", { className: "inkra-inventory-grid__scroll", tabIndex: 0, role: "region", "aria-label": container.label ?? container.id, children: _jsxs("div", { ref: setNodeRef, className: "inkra-inventory-grid__board", "data-inventory-container": container.id, style: { width: container.columns * size, height: container.rows * size }, children: [_jsxs("div", { className: "inkra-inventory-grid__lines", "aria-hidden": "true", children: [Array.from({ length: container.columns + 1 }, (_, index) => _jsx(PencilLine, { orientation: "vertical", seed: `${container.id}-x${index}`, style: { left: index * size - 4, top: -1, width: 8, height: container.rows * size + 2 } }, `x${index}`)), Array.from({ length: container.rows + 1 }, (_, index) => _jsx(PencilLine, { seed: `${container.id}-y${index}`, style: { top: index * size - 4, left: -1, height: 8, width: container.columns * size + 2 } }, `y${index}`))] }), container.disabledCells?.map(cell => _jsx("span", { "aria-hidden": "true", className: "inkra-inventory-grid__blocked", style: { left: cell.x * size, top: cell.y * size, width: size, height: size }, children: _jsx(PencilIcon, { size: 24, paths: [{ d: 'M5 5l14 14M19 5L5 19' }] }) }, `${cell.x}:${cell.y}`)), container.items.map(item => _jsx(ItemView, { item: item, container: container, size: size, disabled: disabled || Boolean(container.disabled) || Boolean(item.disabled), selected: selectedId === item.id, onSelect: onSelect, onRotate: onRotate, renderItem: renderItem, getItemLabel: getItemLabel, allowRotation: allowRotation }, item.id)), projection && projection.containerId === container.id && _jsx("div", { "aria-hidden": "true", className: "inkra-inventory-grid__preview", "data-valid": valid, style: { left: projection.position.x * size, top: projection.position.y * size }, children: _jsx(Shape, { cells: projectedCells, size: size, seed: "inventory-preview" }) })] }) })] });
+}
+export function InventoryGrid(props) {
+    return _jsx(PortalThemeProvider, { children: _jsx(InventoryGridContent, { ...props }) });
+}
+function InventoryGridContent({ containers, onChange, canPlace, renderItem = item => _jsx(PencilText, { children: item.label ?? item.id }), getItemLabel = item => item.label ?? item.id, cellSize = 48, disabled = false, readOnly = false, allowRotation = true, labels: suppliedLabels, className, 'aria-label': ariaLabel }) {
+    useMemo(() => assertInventoryContainers(containers), [containers]);
+    const { t } = useInkraLocale();
+    const labels = {
+        instructions: t('inventoryGrid.instructions'), rotate: t('inventoryGrid.rotate'),
+        pickedUp: (item) => t('inventoryGrid.pickedUp', { item }),
+        position: (item, container, column, row, rotation) => t('inventoryGrid.position', { item, container, column, row, rotation }),
+        invalid: t('inventoryGrid.invalid'), requested: (item) => t('inventoryGrid.requested', { item }),
+        cancelled: (item) => t('inventoryGrid.cancelled', { item }), ...suppliedLabels,
+    };
+    const size = Number.isFinite(cellSize) ? Math.max(44, Math.min(128, cellSize)) : 48;
+    const [activeId, setActiveId] = useState(null);
+    const [selectedId, setSelectedId] = useState(null);
+    const [projection, setProjection] = useState(null);
+    const [announcement, setAnnouncement] = useState('');
+    const rotationRef = useRef(0);
+    const eventRef = useRef(null);
+    const projectionRef = useRef(null);
+    const rootRef = useRef(null);
+    const captureRoot = usePortalTriggerRef(rootRef);
+    const overlayScale = useRef({ x: 1, y: 1 });
+    const activeItem = containers.flatMap(container => container.items).find(item => item.id === activeId);
+    const unavailable = disabled || readOnly;
+    const valid = projection !== null && !unavailable && validateInventoryPlacement(containers, projection, canPlace).valid;
+    useEffect(() => {
+        if (activeId && (unavailable || !activeItem || activeItem.disabled || containers.find(container => container.items.some(item => item.id === activeId))?.disabled)) {
+            // End the mature sensor through its cancellation event before hiding the drag.
+            // Unmounting DndContext alone does not detach an active document sensor.
+            const document = rootRef.current?.ownerDocument;
+            const KeyboardEvent = document?.defaultView?.KeyboardEvent;
+            if (document && KeyboardEvent)
+                document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', code: 'Escape', cancelable: true }));
+            reset();
+        }
+        if (selectedId && !containers.some(container => container.items.some(item => item.id === selectedId)))
+            setSelectedId(null);
+    }, [activeId, activeItem, containers, selectedId, unavailable]);
+    const coordinates = (event, { currentCoordinates, context }) => {
+        const target = context.over?.data.current;
+        const rectangle = context.over?.rect;
+        const stepX = rectangle && target?.columns ? rectangle.width / target.columns : size;
+        const stepY = rectangle && target?.rows ? rectangle.height / target.rows : size;
+        const directions = {
+            ArrowRight: { x: stepX, y: 0 }, ArrowLeft: { x: -stepX, y: 0 }, ArrowDown: { x: 0, y: stepY }, ArrowUp: { x: 0, y: -stepY },
+        };
+        if (directions[event.code]) {
+            event.preventDefault();
+            return { x: currentCoordinates.x + directions[event.code].x, y: currentCoordinates.y + directions[event.code].y };
+        }
+        if (event.code === 'PageDown' || event.code === 'PageUp') {
+            event.preventDefault();
+            const available = containers.filter(container => !container.disabled);
+            const index = available.findIndex(container => container.id === target?.containerId);
+            const next = available[(index + (event.code === 'PageDown' ? 1 : -1) + available.length) % available.length];
+            const nextRect = next && context.droppableRects.get(boardId(next.id));
+            const currentRect = context.collisionRect;
+            if (nextRect && currentRect)
+                return { x: currentCoordinates.x + nextRect.left - currentRect.left, y: currentCoordinates.y + nextRect.top - currentRect.top };
+        }
+        return undefined;
+    };
+    const sensors = useSensors(useSensor(MouseSensor, { activationConstraint: { distance: 6 } }), useSensor(TouchSensor, { activationConstraint: { delay: 180, tolerance: 8 } }), useSensor(KeyboardSensor, { coordinateGetter: coordinates }));
+    function updateProjection(event) {
+        eventRef.current = event;
+        const targetId = event.over?.data.current?.containerId;
+        const target = containers.find(container => container.id === targetId);
+        const initial = event.active.rect.current.initial;
+        const id = event.active.data.current?.itemId;
+        if (!target || !initial || !id || !event.over) {
+            projectionRef.current = null;
+            setProjection(null);
+            return;
+        }
+        const next = { itemId: id, containerId: target.id, rotation: rotationRef.current,
+            position: { x: Math.round((initial.left + event.delta.x - event.over.rect.left) / (event.over.rect.width / target.columns)),
+                y: Math.round((initial.top + event.delta.y - event.over.rect.top) / (event.over.rect.height / target.rows)) } };
+        projectionRef.current = next;
+        setProjection(next);
+        const item = containers.flatMap(container => container.items).find(entry => entry.id === id);
+        if (item)
+            setAnnouncement(`${labels.position(getItemLabel(item), target.label ?? target.id, next.position.x + 1, next.position.y + 1, next.rotation)}${validateInventoryPlacement(containers, next, canPlace).valid ? '' : ` ${labels.invalid}`}`);
+    }
+    function reset() { setActiveId(null); setProjection(null); projectionRef.current = null; eventRef.current = null; }
+    function commit(next) {
+        if (unavailable)
+            return;
+        const source = containers.find(container => container.items.some(item => item.id === next.itemId));
+        const item = source?.items.find(entry => entry.id === next.itemId);
+        const updated = projectInventoryMove(containers, next, canPlace);
+        if (!source || !item || !validateInventoryPlacement(containers, next, canPlace).valid) {
+            setAnnouncement(labels.invalid);
+            return;
+        }
+        if (updated === containers) {
+            setAnnouncement(labels.position(getItemLabel(item), source.label ?? source.id, item.position.x + 1, item.position.y + 1, item.rotation ?? 0));
+            return;
+        }
+        const from = { itemId: item.id, containerId: source.id, position: { ...item.position }, rotation: item.rotation ?? 0 };
+        onChange(updated, { from, to: next, type: from.containerId !== next.containerId ? 'transfer' : from.rotation !== next.rotation ? 'rotate' : 'move' });
+        setAnnouncement(labels.requested(getItemLabel(item)));
+        requestAnimationFrame(() => {
+            const node = Array.from(rootRef.current?.querySelectorAll('[data-inventory-item]') ?? []).find(element => element.dataset.inventoryItem === item.id);
+            node?.focus({ preventScroll: true });
+        });
+    }
+    function rotate(id) {
+        if (!allowRotation || unavailable)
+            return;
+        const source = containers.find(container => container.items.some(item => item.id === id));
+        const item = source?.items.find(entry => entry.id === id);
+        if (!item || !source || item.disabled || item.rotatable === false || source.disabled)
+            return;
+        const rotation = (((activeId === id ? rotationRef.current : item.rotation ?? 0) + 90) % 360);
+        if (activeId === id) {
+            rotationRef.current = rotation;
+            if (eventRef.current)
+                updateProjection(eventRef.current);
+            else {
+                const next = { ...(projectionRef.current ?? { itemId: id, containerId: source.id, position: item.position }), rotation };
+                projectionRef.current = next;
+                setProjection(next);
+            }
+        }
+        else
+            commit({ itemId: id, containerId: source.id, position: item.position, rotation });
+    }
+    return _jsxs(DndContext, { sensors: sensors, collisionDetection: collisionDetection, accessibility: { screenReaderInstructions: { draggable: labels.instructions }, announcements: {
+                onDragStart: () => undefined, onDragOver: () => undefined, onDragEnd: () => undefined, onDragCancel: () => undefined,
+            } }, onDragStart: event => {
+            const id = event.active.data.current?.itemId;
+            const item = containers.flatMap(container => container.items).find(entry => entry.id === id);
+            if (!item || unavailable)
+                return;
+            const node = Array.from(rootRef.current?.querySelectorAll('[data-inventory-item]') ?? []).find(element => element.dataset.inventoryItem === id);
+            const rect = node?.getBoundingClientRect();
+            // The portal is outside any ancestor transform; keep the pickup's visual size.
+            overlayScale.current = { x: rect && node?.offsetWidth ? rect.width / node.offsetWidth : 1,
+                y: rect && node?.offsetHeight ? rect.height / node.offsetHeight : 1 };
+            rotationRef.current = item.rotation ?? 0;
+            setActiveId(id);
+            setSelectedId(id);
+            setAnnouncement(labels.pickedUp(getItemLabel(item)));
+            const container = containers.find(entry => entry.items.some(value => value.id === id));
+            const initial = { itemId: id, containerId: container.id, position: item.position, rotation: item.rotation ?? 0 };
+            projectionRef.current = initial;
+            setProjection(initial);
+        }, onDragMove: updateProjection, onDragOver: updateProjection, onDragEnd: event => { updateProjection(event); const next = projectionRef.current; if (next)
+            commit(next);
+        else if (activeItem)
+            setAnnouncement(labels.cancelled(getItemLabel(activeItem))); reset(); }, onDragCancel: () => { if (activeItem)
+            setAnnouncement(labels.cancelled(getItemLabel(activeItem))); reset(); }, children: [_jsxs("div", { className: ['inkra-inventory-grid', className].filter(Boolean).join(' '), ref: captureRoot, role: "group", "aria-label": ariaLabel, "data-readonly": readOnly || undefined, "data-disabled": disabled || undefined, onKeyDownCapture: event => { if (activeId && event.key.toLowerCase() === 'r') {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    rotate(activeId);
+                } }, children: [containers.map(container => _jsx(ContainerView, { container: container, size: size, disabled: unavailable, selectedId: selectedId, onSelect: setSelectedId, onRotate: rotate, renderItem: renderItem, getItemLabel: getItemLabel, allowRotation: allowRotation, projection: projection, activeItem: activeItem, valid: valid, rotateLabel: labels.rotate }, container.id)), _jsx("span", { className: "inkra-inventory-grid__announcement", role: "status", "aria-live": "polite", "aria-atomic": "true", children: announcement })] }), rootRef.current && createPortal(_jsx(PortalThemeBridge, { children: _jsx(DragOverlay, { dropAnimation: null, children: activeItem && _jsx("div", { className: "inkra-inventory-grid__overlay", "aria-hidden": "true", style: { width: bounds(rotateInventoryCells(activeItem.cells, rotationRef.current)).width * size, height: bounds(rotateInventoryCells(activeItem.cells, rotationRef.current)).height * size,
+                            transform: `scale(${overlayScale.current.x}, ${overlayScale.current.y})`, transformOrigin: '0 0' }, children: _jsx(Shape, { cells: rotateInventoryCells(activeItem.cells, rotationRef.current), size: size, seed: activeItem.id, children: renderItem(activeItem, { selected: true, dragging: true, rotation: rotationRef.current, overlay: true }) }) }) }) }), rootRef.current.ownerDocument.body)] });
+}

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/inventory-grid/outline.d.ts

@@ -0,0 +1,9 @@
+import type { InventoryCell } from './model.js';
+/** Trace occupied-cell boundaries, keeping holes and disconnected islands separate. */
+export declare function inventoryOutline(cells: readonly InventoryCell[], size: number, inset?: number): {
+    path: string;
+    segments: {
+        start: InventoryCell;
+        end: InventoryCell;
+    }[];
+};

package/dist/inventory-grid/outline.js

@@ -0,0 +1,54 @@
+const key = ({ x, y }) => `${x}:${y}`;
+/** Trace occupied-cell boundaries, keeping holes and disconnected islands separate. */
+export function inventoryOutline(cells, size, inset = 3) {
+    const occupied = new Set(cells.map(key));
+    const outgoing = new Map();
+    const remaining = new Set();
+    function edge(start, end, direction) {
+        const value = { start, end, direction };
+        outgoing.set(key(start), [...(outgoing.get(key(start)) ?? []), value]);
+        remaining.add(value);
+    }
+    for (const { x, y } of cells) {
+        if (!occupied.has(key({ x, y: y - 1 })))
+            edge({ x, y }, { x: x + 1, y }, 0);
+        if (!occupied.has(key({ x: x + 1, y })))
+            edge({ x: x + 1, y }, { x: x + 1, y: y + 1 }, 1);
+        if (!occupied.has(key({ x, y: y + 1 })))
+            edge({ x: x + 1, y: y + 1 }, { x, y: y + 1 }, 2);
+        if (!occupied.has(key({ x: x - 1, y })))
+            edge({ x, y: y + 1 }, { x, y }, 3);
+    }
+    const contours = [];
+    const turnPriority = [1, 0, 3, 2];
+    while (remaining.size) {
+        const first = remaining.values().next().value;
+        const loop = [];
+        let current = first;
+        while (current) {
+            loop.push(current);
+            remaining.delete(current);
+            if (key(current.end) === key(first.start))
+                break;
+            const direction = current.direction;
+            // At a diagonal contact, follow the same occupied island instead of bridging it.
+            current = (outgoing.get(key(current.end)) ?? [])
+                .filter(candidate => remaining.has(candidate))
+                .sort((a, b) => turnPriority.indexOf((a.direction - direction + 4) % 4)
+                - turnPriority.indexOf((b.direction - direction + 4) % 4))[0];
+        }
+        const corners = loop.filter((value, index) => value.direction !== loop[(index + loop.length - 1) % loop.length].direction);
+        contours.push(corners.map((value, index) => {
+            const previous = corners[(index + corners.length - 1) % corners.length];
+            const normal = (direction) => [{ x: 0, y: 1 }, { x: -1, y: 0 }, { x: 0, y: -1 }, { x: 1, y: 0 }][direction];
+            const before = normal(previous.direction);
+            const after = normal(value.direction);
+            return { x: value.start.x * size + (before.x + after.x) * inset,
+                y: value.start.y * size + (before.y + after.y) * inset };
+        }));
+    }
+    return {
+        path: contours.map(points => `M${points.map(point => `${point.x},${point.y}`).join('L')}Z`).join(''),
+        segments: contours.flatMap(points => points.map((start, index) => ({ start, end: points[(index + 1) % points.length] }))),
+    };
+}

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>>;