feat(grid): add drag-and-drop grid UI components

GridCell — droppable cell with hover/valid/invalid state
GridItem — draggable item with grip icon, visual feedback
GridToolbar — view toggle, auto-arrange, selected-item actions
InventoryGrid — DndContext wiring, R-key rotation, ResizeObserver
  cell sizing, drag overlay
StructureStorageView — client wrapper with grid/list mode toggle,
  action handlers, resource-to-GridItem mapping

src/components/frontend/storage/GridCell.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { useDroppable } from "@dnd-kit/core";
+import { cn } from "@/lib/utils";
+
+interface GridCellProps {
+  x: number;
+  y: number;
+  cellSize: number;
+  isOccupied: boolean;
+  isDropTarget: boolean;
+  isHovered: boolean;
+  isInvalidDrop: boolean;
+}
+
+export function GridCell({ x, y, cellSize, isOccupied, isDropTarget, isHovered, isInvalidDrop }: GridCellProps) {
+  const { setNodeRef } = useDroppable({
+    id: `cell-${x}-${y}`,
+    data: { x, y },
+  });
+
+  return (
+    <div
+      ref={setNodeRef}
+      className={cn(
+        "border border-border/30 transition-colors duration-75",
+        isHovered && !isInvalidDrop && "bg-green-500/25 border-green-500/50",
+        isHovered && isInvalidDrop && "bg-red-500/25 border-red-500/50",
+        !isHovered && isDropTarget && "bg-primary/5 border-primary/20",
+      )}
+      style={{ width: cellSize, height: cellSize }}
+    />
+  );
+}

src/components/frontend/storage/GridItem.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import { useRef, useCallback, useEffect } from "react";
+import { useDraggable } from "@dnd-kit/core";
+import { CSS } from "@dnd-kit/utilities";
+import { Resource } from "@/payload-types";
+import { getItemFootprint, type GridItem as GridItemType } from "@/lib/logistics";
+import { cn } from "@/lib/utils";
+import { GripVerticalIcon } from "lucide-react";
+
+interface GridItemProps {
+  item: GridItemType;
+  cellSize: number;
+  onSelect: (item: GridItemType) => void;
+  selected: boolean;
+}
+
+export function GridItemComponent({ item, cellSize, onSelect, selected }: GridItemProps) {
+  const resource = item.resource as Resource;
+  const { width, height } = getItemFootprint(resource, item.rotated);
+
+  const didDrag = useRef(false);
+
+  const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({
+    id: `grid-item-${item.id}`,
+    data: { item },
+  });
+
+  useEffect(() => {
+    if (isDragging) {
+      didDrag.current = true;
+    }
+  }, [isDragging]);
+
+  const handleClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (!didDrag.current) {
+        e.stopPropagation();
+        onSelect(item);
+      }
+      didDrag.current = false;
+    },
+    [item, onSelect],
+  );
+
+  const style: React.CSSProperties = {
+    position: "absolute",
+    left: item.gridX * cellSize,
+    top: item.gridY * cellSize,
+    width: width * cellSize - 2,
+    height: height * cellSize - 2,
+    zIndex: 10,
+    transition: isDragging ? "none" : "left 0.15s ease, top 0.15s ease",
+    transform: CSS.Translate.toString(transform),
+    opacity: isDragging ? 0 : 1,
+  };
+
+  const bgColor = resource.color ?? "oklch(0.269 0 0)";
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={cn(
+        "group rounded-md border cursor-grab active:cursor-grabbing select-none overflow-hidden",
+        "flex flex-col items-center justify-center gap-0.5",
+        "transition-shadow duration-150",
+        selected && "ring-2 ring-primary",
+        !selected && "hover:ring-1 hover:ring-primary/50",
+      )}
+      {...listeners}
+      {...attributes}
+      onClick={handleClick}
+      suppressHydrationWarning
+    >
+      <div
+        className="absolute inset-0 opacity-20"
+        style={{ backgroundColor: bgColor }}
+      />
+      <div className="relative flex flex-col items-center justify-center gap-0.5 p-1 w-full h-full">
+        {resource.icon && typeof resource.icon === "object" && "url" in resource.icon && (
+          <img
+            src={resource.icon.url ?? ""}
+            alt={resource.name}
+            className="size-6 object-contain opacity-80"
+          />
+        )}
+        <span className="text-[10px] leading-tight font-medium text-center text-foreground/90 line-clamp-2 px-0.5">
+          {resource.name}
+        </span>
+        {item.amount > 1 && (
+          <span
+            className="text-[9px] font-bold leading-none px-1 py-0.5 rounded-sm"
+            style={{ backgroundColor: bgColor, color: "white" }}
+          >
+            {item.amount.toLocaleString()}
+          </span>
+        )}
+      </div>
+      <div className="absolute top-0.5 right-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
+        <GripVerticalIcon className="size-3 text-foreground/50" />
+      </div>
+    </div>
+  );
+}

src/components/frontend/storage/GridToolbar.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  ShuffleIcon,
+  RotateCwIcon,
+  TrashIcon,
+  ScissorsIcon,
+  LayoutGridIcon,
+  ListIcon,
+} from "lucide-react";
+import { GridItem, getItemFootprint, getGridOccupancy } from "@/lib/logistics";
+import { Resource } from "@/payload-types";
+import { cn, pluralize } from "@/lib/utils";
+
+interface GridToolbarProps {
+  gridWidth: number;
+  gridHeight: number;
+  storedResources: GridItem[];
+  selectedItem: GridItem | null;
+  viewMode: "grid" | "list";
+  onViewModeChange: (mode: "grid" | "list") => void;
+  onAutoArrange: () => Promise<void>;
+  onRotate: (entryId: string) => Promise<void>;
+  onRemove: (entryId: string) => Promise<void>;
+  onSplit: (entryId: string, amount: number) => Promise<void>;
+}
+
+export function GridToolbar({
+  gridWidth,
+  gridHeight,
+  storedResources,
+  selectedItem,
+  viewMode,
+  onViewModeChange,
+  onAutoArrange,
+  onRotate,
+  onRemove,
+  onSplit,
+}: GridToolbarProps) {
+  const occupancy = getGridOccupancy(storedResources, gridWidth, gridHeight);
+  const res = selectedItem ? (selectedItem.resource as Resource) : null;
+  const fp = res ? getItemFootprint(res, selectedItem!.rotated) : null;
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Button variant="outline" size="sm" onClick={onAutoArrange}>
+            <ShuffleIcon className="size-3.5 mr-1" />
+            Auto-Arrange
+          </Button>
+        </div>
+
+        <div className="flex items-center gap-1">
+          <Button
+            variant={viewMode === "grid" ? "default" : "outline"}
+            size="sm"
+            onClick={() => onViewModeChange("grid")}
+          >
+            <LayoutGridIcon className="size-3.5" />
+          </Button>
+          <Button
+            variant={viewMode === "list" ? "default" : "outline"}
+            size="sm"
+            onClick={() => onViewModeChange("list")}
+          >
+            <ListIcon className="size-3.5" />
+          </Button>
+        </div>
+      </div>
+
+      {selectedItem && res && (
+        <div className="flex items-center gap-3 p-2 rounded-md border bg-muted/30 text-xs">
+          <div className="flex-1 min-w-0">
+            <div className="font-medium truncate">{res.name}</div>
+            <div className="text-muted-foreground">
+              {selectedItem.amount.toLocaleString()} {pluralize(selectedItem.amount, res.unitOfMeasure)}
+              {fp && ` · ${fp.width}x${fp.height}`}
+              {selectedItem.rotated && " · rotated"}
+            </div>
+          </div>
+          <div className="flex items-center gap-1">
+            {res.rotatable !== false && (
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => onRotate(selectedItem.id)}
+              >
+                <RotateCwIcon className="size-3.5" />
+              </Button>
+            )}
+            {res.stackable && selectedItem.amount > 1 && (
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => onSplit(selectedItem.id, Math.floor(selectedItem.amount / 2))}
+              >
+                <ScissorsIcon className="size-3.5" />
+              </Button>
+            )}
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => onRemove(selectedItem.id)}
+            >
+              <TrashIcon className="size-3.5" />
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/frontend/storage/InventoryGrid.tsx

@@ -0,0 +1,344 @@
+"use client";
+
+import { useState, useCallback, useMemo, useRef, useEffect } from "react";
+import {
+  DndContext,
+  DragOverlay,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  type DragStartEvent,
+  type DragMoveEvent,
+  type DragEndEvent,
+} from "@dnd-kit/core";
+import { GameStructure, Structure, Resource } from "@/payload-types";
+import {
+  getItemFootprint,
+  isValidPlacement,
+  getGridOccupancy,
+  type GridItem,
+} from "@/lib/logistics";
+import { GridItemComponent } from "./GridItem";
+import { GridCell } from "./GridCell";
+
+function DragOverlayContent({ item, cellSize, rotated }: { item: GridItem; cellSize: number; rotated?: boolean }) {
+  const resource = item.resource as Resource;
+  const effective = rotated ?? item.rotated;
+  const { width, height } = getItemFootprint(resource, effective);
+  const bgColor = resource.color ?? "oklch(0.269 0 0)";
+
+  return (
+    <div
+      style={{
+        width: width * cellSize - 2,
+        height: height * cellSize - 2,
+      }}
+      className="relative rounded-md border border-primary/50 shadow-xl ring-2 ring-primary/50 select-none overflow-hidden flex flex-col items-center justify-center gap-0.5"
+    >
+      <div className="absolute inset-0 opacity-20" style={{ backgroundColor: bgColor }} />
+      <div className="relative flex flex-col items-center justify-center gap-0.5 p-1 w-full h-full">
+        {resource.icon && typeof resource.icon === "object" && "url" in resource.icon && (
+          <img
+            src={resource.icon.url ?? ""}
+            alt={resource.name}
+            className="size-6 object-contain opacity-80"
+          />
+        )}
+        <span className="text-[10px] leading-tight font-medium text-center text-foreground/90 line-clamp-2 px-0.5">
+          {resource.name}
+        </span>
+        {item.amount > 1 && (
+          <span
+            className="text-[9px] font-bold leading-none px-1 py-0.5 rounded-sm"
+            style={{ backgroundColor: bgColor, color: "white" }}
+          >
+            {item.amount.toLocaleString()}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function findMergeTarget(items: GridItem[], dragged: GridItem, targetX: number, targetY: number, rotated?: boolean): GridItem | null {
+  const effective = rotated ?? dragged.rotated;
+  const fp = getItemFootprint(dragged.resource as Resource, effective);
+  const targetCells = new Set<string>();
+  for (let dx = 0; dx < fp.width; dx++) {
+    for (let dy = 0; dy < fp.height; dy++) {
+      targetCells.add(`${targetX + dx},${targetY + dy}`);
+    }
+  }
+  for (const other of items) {
+    if (other.id === dragged.id) continue;
+    if (other.resourceId !== dragged.resourceId) continue;
+    const otherFp = getItemFootprint(other.resource as Resource, other.rotated);
+    for (let dx = 0; dx < otherFp.width; dx++) {
+      for (let dy = 0; dy < otherFp.height; dy++) {
+        if (targetCells.has(`${other.gridX + dx},${other.gridY + dy}`)) {
+          return other;
+        }
+      }
+    }
+  }
+  return null;
+}
+
+interface InventoryGridProps {
+  structure: GameStructure & { type: Structure };
+  storedResources: GridItem[];
+  onMoveItem: (entryId: string, gridX: number, gridY: number, rotated?: boolean) => Promise<void>;
+  onMergeStacks: (sourceId: string, targetId: string) => Promise<void>;
+  onRotateItem: (entryId: string) => Promise<void>;
+  onRemoveItem: (entryId: string) => Promise<void>;
+  onSelectItem: (item: GridItem | null) => void;
+  selectedItem: GridItem | null;
+}
+
+export function InventoryGrid({
+  structure,
+  storedResources,
+  onMoveItem,
+  onMergeStacks,
+  onRotateItem,
+  onRemoveItem,
+  onSelectItem,
+  selectedItem,
+}: InventoryGridProps) {
+  const [activeItem, setActiveItem] = useState<GridItem | null>(null);
+  const [hoverPosition, setHoverPosition] = useState<{ x: number; y: number } | null>(null);
+  const [pendingRotated, setPendingRotated] = useState(false);
+  const [cellSize, setCellSize] = useState(48);
+  const gridRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const gridWidth = structure.type.xSize ?? 1;
+  const gridHeight = structure.type.ySize ?? 1;
+
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const w = entry.contentRect.width;
+        const computed = Math.floor(w / gridWidth);
+        setCellSize(Math.max(32, Math.min(computed, 80)));
+      }
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [gridWidth]);
+
+  useEffect(() => {
+    if (!activeItem) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "r" || e.key === "R") {
+        e.preventDefault();
+        setPendingRotated((v) => !v);
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [activeItem]);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: { distance: 5 },
+    }),
+  );
+
+  const occupiedCells = useMemo(() => {
+    const cells = new Set<string>();
+    for (const item of storedResources) {
+      const fp = getItemFootprint(item.resource as Resource, item.rotated);
+      for (let dx = 0; dx < fp.width; dx++) {
+        for (let dy = 0; dy < fp.height; dy++) {
+          cells.add(`${item.gridX + dx},${item.gridY + dy}`);
+        }
+      }
+    }
+    return cells;
+  }, [storedResources]);
+
+  const occupancy = getGridOccupancy(storedResources, gridWidth, gridHeight);
+
+  const hoverInfo = useMemo(() => {
+    if (!hoverPosition || !activeItem) return null;
+    const res = activeItem.resource as Resource;
+    const fp = getItemFootprint(res, pendingRotated);
+    const cells = new Set<string>();
+    for (let dx = 0; dx < fp.width; dx++) {
+      for (let dy = 0; dy < fp.height; dy++) {
+        cells.add(`${hoverPosition.x + dx},${hoverPosition.y + dy}`);
+      }
+    }
+    const mergeTarget = findMergeTarget(storedResources, activeItem, hoverPosition.x, hoverPosition.y, pendingRotated);
+    const valid = mergeTarget !== null || isValidPlacement(
+      storedResources,
+      activeItem.id,
+      hoverPosition.x,
+      hoverPosition.y,
+      fp.width,
+      fp.height,
+      gridWidth,
+      gridHeight,
+    );
+    return { cells, valid };
+  }, [hoverPosition, activeItem, storedResources, gridWidth, gridHeight, pendingRotated]);
+
+  const handleDragStart = useCallback(
+    (event: DragStartEvent) => {
+      const data = event.active.data.current;
+      if (data?.item) {
+        const item = data.item as GridItem;
+        setActiveItem(item);
+        setPendingRotated(item.rotated ?? false);
+      }
+      setHoverPosition(null);
+    },
+    [],
+  );
+
+  const handleDragMove = useCallback(
+    (event: DragMoveEvent) => {
+      const { activatorEvent, delta } = event;
+      const gridEl = gridRef.current;
+      if (!gridEl) return;
+      const rect = gridEl.getBoundingClientRect();
+      if (!("clientX" in activatorEvent)) return;
+      const px = (activatorEvent as PointerEvent).clientX + delta.x;
+      const py = (activatorEvent as PointerEvent).clientY + delta.y;
+      const x = Math.floor((px - rect.left) / cellSize);
+      const y = Math.floor((py - rect.top) / cellSize);
+      if (x < 0 || y < 0 || x >= gridWidth || y >= gridHeight) {
+        setHoverPosition(null);
+        return;
+      }
+      setHoverPosition({ x, y });
+    },
+    [gridWidth, gridHeight, cellSize],
+  );
+
+  const handleDragEnd = useCallback(
+    async (event: DragEndEvent) => {
+      setActiveItem(null);
+      setHoverPosition(null);
+      const { active, activatorEvent, delta } = event;
+
+      const item = active.data.current?.item as GridItem | undefined;
+      if (!item) return;
+
+      const gridEl = gridRef.current;
+      if (!gridEl) return;
+
+      const rect = gridEl.getBoundingClientRect();
+      if (!("clientX" in activatorEvent)) return;
+      const px = (activatorEvent as PointerEvent).clientX + delta.x;
+      const py = (activatorEvent as PointerEvent).clientY + delta.y;
+
+      const targetX = Math.floor((px - rect.left) / cellSize);
+      const targetY = Math.floor((py - rect.top) / cellSize);
+
+      if (targetX < 0 || targetY < 0 || targetX >= gridWidth || targetY >= gridHeight) return;
+      if (targetX === item.gridX && targetY === item.gridY) {
+        if (pendingRotated === item.rotated) return;
+        await onMoveItem(item.id, targetX, targetY, pendingRotated);
+        return;
+      }
+
+      const mergeTarget = findMergeTarget(storedResources, item, targetX, targetY, pendingRotated);
+      if (mergeTarget) {
+        await onMergeStacks(item.id, mergeTarget.id);
+        return;
+      }
+
+      const res = item.resource as Resource;
+      const fp = getItemFootprint(res, pendingRotated);
+      const valid = isValidPlacement(
+        storedResources,
+        item.id,
+        targetX,
+        targetY,
+        fp.width,
+        fp.height,
+        gridWidth,
+        gridHeight,
+      );
+
+      if (valid) {
+        await onMoveItem(item.id, targetX, targetY, pendingRotated);
+      }
+    },
+    [storedResources, gridWidth, gridHeight, onMoveItem, onMergeStacks, cellSize, pendingRotated],
+  );
+
+  const handleBackgroundClick = useCallback(() => {
+    onSelectItem(null);
+  }, [onSelectItem]);
+
+  return (
+      <DndContext
+        sensors={sensors}
+        onDragStart={handleDragStart}
+        onDragMove={handleDragMove}
+        onDragEnd={handleDragEnd}
+      >
+        <div className="flex flex-col gap-3">
+        <div ref={containerRef} className="rounded-lg border bg-muted/20 p-2">
+          <div
+            ref={gridRef}
+            className="relative grid"
+            style={{
+              gridTemplateColumns: `repeat(${gridWidth}, ${cellSize}px)`,
+              gridTemplateRows: `repeat(${gridHeight}, ${cellSize}px)`,
+            }}
+            onClick={handleBackgroundClick}
+          >
+            {Array.from({ length: gridHeight }, (_, y) =>
+              Array.from({ length: gridWidth }, (_, x) => {
+                const key = `${x},${y}`;
+                return (
+                  <GridCell
+                    key={key}
+                    x={x}
+                    y={y}
+                    cellSize={cellSize}
+                    isOccupied={occupiedCells.has(key)}
+                    isDropTarget={!!activeItem}
+                    isHovered={hoverInfo !== null && hoverInfo.cells.has(key)}
+                    isInvalidDrop={hoverInfo !== null && !hoverInfo.valid}
+                  />
+                );
+              }),
+            )}
+
+            {storedResources.map((item) => (
+              <GridItemComponent
+                key={item.id}
+                item={item}
+                cellSize={cellSize}
+                onSelect={onSelectItem}
+                selected={selectedItem?.id === item.id}
+              />
+            ))}
+          </div>
+          </div>
+
+        <div className="flex items-center justify-between text-xs text-muted-foreground">
+          <span>
+            {occupancy.used} / {occupancy.total} cells used
+          </span>
+          <span>
+            {gridWidth} x {gridHeight}
+          </span>
+        </div>
+      </div>
+
+      <DragOverlay dropAnimation={null}>
+        {activeItem && (
+          <DragOverlayContent item={activeItem} cellSize={cellSize} rotated={pendingRotated} />
+        )}
+      </DragOverlay>
+    </DndContext>
+  );
+}

src/components/frontend/storage/StructureStorageView.tsx

@@ -0,0 +1,144 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import { useRouter } from "next/navigation";
+import { GameStructure, Structure, Resource } from "@/payload-types";
+import { InventoryGrid } from "./InventoryGrid";
+import { GridToolbar } from "./GridToolbar";
+import { ResourceList } from "./ResourceList";
+import { type GridItem } from "@/lib/logistics";
+import {
+  moveGridItem,
+  mergeGridStacks,
+  rotateGridItem,
+  removeGridItem,
+  splitGridStack,
+  autoArrangeGrid,
+} from "@/app/(frontend)/logistics/structures/actions";
+
+interface StructureStorageViewProps {
+  structure: GameStructure & { type: Structure };
+}
+
+export function StructureStorageView({ structure }: StructureStorageViewProps) {
+  const router = useRouter();
+  const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
+  const [selectedItem, setSelectedItem] = useState<GridItem | null>(null);
+
+  const storedRaw = structure.storedResources ?? [];
+  const gridWidth = structure.type.xSize ?? 0;
+  const gridHeight = structure.type.ySize ?? 0;
+  const hasGrid = gridWidth > 0 && gridHeight > 0;
+
+  const storedResources: GridItem[] = storedRaw
+    .filter((entry) => {
+      const res = entry.resource as Resource;
+      return res && typeof res === "object" && "id" in res;
+    })
+    .map((entry) => ({
+      id: entry.id ?? `${(entry.resource as Resource).id}-${entry.gridX}-${entry.gridY}`,
+      resourceId: (entry.resource as Resource).id,
+      amount: entry.amount,
+      gridX: entry.gridX ?? 0,
+      gridY: entry.gridY ?? 0,
+      rotated: entry.rotated ?? false,
+      resource: entry.resource as Resource,
+    }));
+
+  const refresh = useCallback(() => {
+    router.refresh();
+  }, [router]);
+
+  const handleMoveItem = useCallback(
+    async (entryId: string, gridX: number, gridY: number, rotated?: boolean) => {
+      const result = await moveGridItem(structure.id, entryId, gridX, gridY, rotated);
+      if (result.success) refresh();
+    },
+    [structure.id, refresh],
+  );
+
+  const handleMergeStacks = useCallback(
+    async (sourceId: string, targetId: string) => {
+      const result = await mergeGridStacks(structure.id, sourceId, targetId);
+      if (result.success) refresh();
+    },
+    [structure.id, refresh],
+  );
+
+  const handleRotateItem = useCallback(
+    async (entryId: string) => {
+      const result = await rotateGridItem(structure.id, entryId);
+      if (result.success) refresh();
+    },
+    [structure.id, refresh],
+  );
+
+  const handleRemoveItem = useCallback(
+    async (entryId: string) => {
+      const result = await removeGridItem(structure.id, entryId);
+      if (result.success) {
+        setSelectedItem(null);
+        refresh();
+      }
+    },
+    [structure.id, refresh],
+  );
+
+  const handleSplitStack = useCallback(
+    async (entryId: string, amount: number) => {
+      const result = await splitGridStack(structure.id, entryId, amount);
+      if (result.success) refresh();
+    },
+    [structure.id, refresh],
+  );
+
+  const handleAutoArrange = useCallback(async () => {
+    const result = await autoArrangeGrid(structure.id);
+    if (result.success) refresh();
+  }, [structure.id, refresh]);
+
+  if (!hasGrid) {
+    return (
+      <ResourceList
+        storedResources={structure.storedResources ?? []}
+        maxCapacityMass={structure.type.maxCapacityMass ?? null}
+      />
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      <GridToolbar
+        gridWidth={gridWidth}
+        gridHeight={gridHeight}
+        storedResources={storedResources}
+        selectedItem={selectedItem}
+        viewMode={viewMode}
+        onViewModeChange={setViewMode}
+        onAutoArrange={handleAutoArrange}
+        onRotate={handleRotateItem}
+        onRemove={handleRemoveItem}
+        onSplit={handleSplitStack}
+      />
+
+      {viewMode === "grid" ? (
+        <InventoryGrid
+          structure={structure}
+          storedResources={storedResources}
+          onMoveItem={handleMoveItem}
+          onMergeStacks={handleMergeStacks}
+          onRotateItem={handleRotateItem}
+          onRemoveItem={handleRemoveItem}
+          onSelectItem={setSelectedItem}
+          selectedItem={selectedItem}
+        />
+      ) : (
+        <ResourceList
+          storedResources={structure.storedResources ?? []}
+          maxCapacityMass={structure.type.maxCapacityMass ?? null}
+        />
+      )}
+
+    </div>
+  );
+}