Kitchen sink

1"use client";
2 
3import {
4  DndGrid,
5  type DndGrid as DndGridHandle,
6  type Layout,
7  type LayoutItem,
8} from "@dnd-grid/react";
9import {
10  DndContext,
11  type DragEndEvent,
12  type DragMoveEvent,
13  DragOverlay,
14  type DragStartEvent,
15  KeyboardSensor,
16  MouseSensor,
17  TouchSensor,
18  useDraggable,
19  useSensor,
20  useSensors,
21} from "@dnd-kit/core";
22import { useCallback, useMemo, useRef, useState } from "react";
23 
24interface PaletteItem {
25  id: string;
26  title: string;
27  w: number;
28  h: number;
29}
30 
31interface GridItem {
32  id: string;
33  title: string;
34  w: number;
35  h: number;
36  x: number;
37  y: number;
38}
39 
40const paletteItems: PaletteItem[] = [
41  { id: "text", title: "Text", w: 4, h: 4 },
42  { id: "media", title: "Media", w: 4, h: 3 },
43  { id: "cta", title: "CTA", w: 2, h: 2 },
44  { id: "quote", title: "Quote", w: 3, h: 3 },
45];
46 
47const initialItems: GridItem[] = [
48  { id: "a", title: "Text", x: 0, y: 0, w: 4, h: 4 },
49  { id: "b", title: "Media", x: 0, y: 4, w: 2, h: 3 },
50  { id: "c", title: "CTA", x: 2, y: 4, w: 2, h: 2 },
51  { id: "d", title: "Quote", x: 0, y: 7, w: 4, h: 3 },
52];
53 
54const findEmptyPosition = ({
55  layouts,
56  newItemWidth,
57  newItemHeight,
58  gridWidth,
59  gridHeight,
60}: {
61  layouts: Layout;
62  newItemWidth: number;
63  newItemHeight: number;
64  gridWidth: number;
65  gridHeight: number;
66  // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: Grid space finding algorithm requires nested loops
67}): { x: number; y: number } => {
68  const grid = Array.from({ length: gridHeight }, () =>
69    Array.from({ length: gridWidth }, () => false)
70  );
71 
72  for (const item of layouts) {
73    for (let x = item.x; x < item.x + item.w; x += 1) {
74      for (let y = item.y; y < item.y + item.h; y += 1) {
75        if (grid[y] && grid[y][x] !== undefined) {
76          grid[y][x] = true;
77        }
78      }
79    }
80  }
81 
82  for (let y = 0; y <= gridHeight - newItemHeight; y += 1) {
83    for (let x = 0; x <= gridWidth - newItemWidth; x += 1) {
84      let hasSpace = true;
85 
86      for (let dx = 0; dx < newItemWidth; dx += 1) {
87        for (let dy = 0; dy < newItemHeight; dy += 1) {
88          if (grid[y + dy][x + dx]) {
89            hasSpace = false;
90            break;
91          }
92        }
93        if (!hasSpace) {
94          break;
95        }
96      }
97 
98      if (hasSpace) {
99        return { x, y };
100      }
101    }
102  }
103 
104  return { x: 0, y: Number.POSITIVE_INFINITY };
105};
106 
107const getSm = ({
108  layouts,
109  selectedBlockId,
110  currentBlock,
111}: {
112  layouts: Layout;
113  selectedBlockId?: string | null;
114// … truncated