Card Tree

1"use client";
2 
3import {
4  forwardRef,
5  useCallback,
6  useEffect,
7  useImperativeHandle,
8  useMemo,
9  useReducer,
10  useRef,
11  useState,
12} from "react";
13import {
14  DndContext,
15  type DragEndEvent,
16  type DragStartEvent,
17} from "@dnd-kit/core";
18import {
19  SortableContext,
20  verticalListSortingStrategy,
21} from "@dnd-kit/sortable";
22import { cn } from "@/lib/utils";
23import type {
24  CardAddedEvent,
25  CardDuplicatedEvent,
26  CardMovedEvent,
27  CardRemovedEvent,
28  CardRenamedEvent,
29  CustomPredefinedKey,
30  EffectivePermissions,
31  FieldAddedEvent,
32  FieldEditedEvent,
33  FieldRemovedEvent,
34  LevelStyle,
35  MetaAddedEvent,
36  MetaChangedEvent,
37  MetaRemovedEvent,
38  PredefinedAddedEvent,
39  PredefinedEditedEvent,
40  PredefinedKey,
41  PredefinedRemovedEvent,
42  CardTreeHandle,
43  CardTreeJsonNode,
44  CardTreeProps,
45  SearchMatch,
46  SearchOptions,
47} from "./types";
48import { parseInput, type ParseError, type ParsedCardTree } from "./lib/parse";
49import { serializeTree, treeToJsonNode } from "./lib/serialize";
50import {
51  createInitialState,
52  findAncestorIds,
53  findCard,
54  findParentId,
55  reducer,
56  visibleIdsInOrder,
57  type DefaultCollapsed,
58  type CardTreeAction,
59  type CardTreePredefinedEntry,
60  type CardTreeState,
61} from "./lib/reducer";
62import {
63  validateCardRename,
64  validateCardRemove,
65  validateFieldAdd,
66  validateFieldEditKey,
67  validateFieldEditValue,
68  validateMetaAdd,
69  validateMetaEdit,
70  validatePredefinedShape,
71} from "./lib/validate-edit";
72import {
73  runHostValidators,
74  type AnyChangeEvent,
75  type ValidatorKey,
76} from "./lib/validators";
77import type { FlatFieldType } from "./lib/infer-type";
78import { useTreeKeyboard } from "./hooks/use-tree-keyboard";
79import { useEditMode } from "./hooks/use-edit-mode";
80import { isDirty as isDirtySelector } from "./hooks/use-dirty";
81import { usePermissions } from "./hooks/use-permissions";
82import { useDndSensors, collisionStrategy } from "./hooks/use-dnd-config";
83import { useSearch } from "./hooks/use-search";
84import { useUndo } from "./hooks/use-undo";
85import { Card, type CardConfig, type EditDispatchers, type EditValidators } from "./parts/card";
86import { EmptyTreePlaceholder } from "./parts/empty-tree";
87 
88/* ───────── default level styles ───────── */
89 
90const DEFAULT_LEVEL_STYLES: LevelStyle[] = [
91  { containerClassName: "rounded-xl border border-border bg-card px-3 py-3 shadow-sm" },
92  { containerClassName: "rounded-lg border border-border bg-muted/30 px-3 py-2.5" },
93// … truncated