@morphika/andami 0.1.8 → 0.1.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -0
- package/components/builder/SettingsPanel.tsx +29 -543
- package/components/builder/live-preview/GhostCard.tsx +84 -0
- package/components/builder/live-preview/LiveProjectGridPreview.tsx +294 -1010
- package/components/builder/live-preview/ProjectCardWrapper.tsx +291 -0
- package/components/builder/live-preview/drag-utils.tsx +89 -0
- package/components/builder/live-preview/useDragReorder.ts +370 -0
- package/components/builder/settings-panel/AnimationTab.tsx +152 -0
- package/components/builder/settings-panel/CardEntranceSection.tsx +114 -0
- package/components/builder/settings-panel/ColumnV2AnimationTab.tsx +32 -0
- package/components/builder/settings-panel/CustomSectionSettings.tsx +150 -0
- package/components/builder/settings-panel/index.ts +6 -0
- package/components/builder/settings-panel/useSettingsPanelSelection.ts +184 -0
- package/lib/builder/serializer/migrations.ts +107 -0
- package/lib/builder/serializer/normalizers.ts +278 -0
- package/lib/builder/serializer/serializers.ts +393 -0
- package/lib/builder/serializer/shared.ts +102 -0
- package/lib/builder/serializer.ts +11 -846
- package/package.json +9 -9
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* GhostCard — Floating card that follows the cursor during drag.
|
|
5
|
+
* Portaled to document.body by the parent to escape canvas CSS transforms.
|
|
6
|
+
*
|
|
7
|
+
* Session 162: Extracted from LiveProjectGridPreview.tsx (Phase B3).
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
import { ProjectGridCard } from "./shared";
|
|
11
|
+
import { ADMIN_BLUE, CANCEL_DURATION, CrossArrowIcon, type DragState } from "./drag-utils";
|
|
12
|
+
import type { ProjectGridItem } from "../../../lib/sanity/types";
|
|
13
|
+
|
|
14
|
+
export default function GhostCard({
|
|
15
|
+
item,
|
|
16
|
+
thumbMap,
|
|
17
|
+
borderRadius,
|
|
18
|
+
dragState,
|
|
19
|
+
}: {
|
|
20
|
+
item: ProjectGridItem;
|
|
21
|
+
thumbMap: Map<string, string | undefined>;
|
|
22
|
+
borderRadius: number;
|
|
23
|
+
dragState: DragState;
|
|
24
|
+
}) {
|
|
25
|
+
const isCancelling = dragState.phase === "cancelling";
|
|
26
|
+
return (
|
|
27
|
+
<div
|
|
28
|
+
style={{
|
|
29
|
+
position: "fixed",
|
|
30
|
+
left: dragState.mouseX - dragState.offsetX,
|
|
31
|
+
top: dragState.mouseY - dragState.offsetY,
|
|
32
|
+
width: dragState.cardWidth,
|
|
33
|
+
height: dragState.cardHeight,
|
|
34
|
+
zIndex: 9999,
|
|
35
|
+
pointerEvents: "none",
|
|
36
|
+
borderRadius: borderRadius > 0 ? borderRadius : 8,
|
|
37
|
+
overflow: "hidden",
|
|
38
|
+
transform: isCancelling ? "scale(1)" : "scale(1.03)",
|
|
39
|
+
outline: `2px solid ${ADMIN_BLUE}`,
|
|
40
|
+
outlineOffset: -2,
|
|
41
|
+
boxShadow: isCancelling
|
|
42
|
+
? "0 4px 16px rgba(0,0,0,0.15)"
|
|
43
|
+
: "0 16px 48px rgba(0,0,0,0.3)",
|
|
44
|
+
transition: isCancelling
|
|
45
|
+
? `left ${CANCEL_DURATION}ms ease, top ${CANCEL_DURATION}ms ease, transform ${CANCEL_DURATION}ms ease, box-shadow ${CANCEL_DURATION}ms ease`
|
|
46
|
+
: undefined,
|
|
47
|
+
}}
|
|
48
|
+
>
|
|
49
|
+
<ProjectGridCard
|
|
50
|
+
slug={item.project_slug}
|
|
51
|
+
thumbPath={thumbMap.get(item.project_slug)}
|
|
52
|
+
customThumb={item.custom_thumbnail}
|
|
53
|
+
borderRadius={borderRadius > 0 ? String(borderRadius) : undefined}
|
|
54
|
+
style={{ width: "100%", height: "100%" }}
|
|
55
|
+
/>
|
|
56
|
+
{/* Centered cross-arrow icon */}
|
|
57
|
+
<div
|
|
58
|
+
style={{
|
|
59
|
+
position: "absolute",
|
|
60
|
+
inset: 0,
|
|
61
|
+
display: "flex",
|
|
62
|
+
alignItems: "center",
|
|
63
|
+
justifyContent: "center",
|
|
64
|
+
pointerEvents: "none",
|
|
65
|
+
}}
|
|
66
|
+
>
|
|
67
|
+
<div
|
|
68
|
+
style={{
|
|
69
|
+
width: 40,
|
|
70
|
+
height: 40,
|
|
71
|
+
borderRadius: "50%",
|
|
72
|
+
backgroundColor: "rgba(255,255,255,0.92)",
|
|
73
|
+
display: "flex",
|
|
74
|
+
alignItems: "center",
|
|
75
|
+
justifyContent: "center",
|
|
76
|
+
boxShadow: "0 2px 12px rgba(0,0,0,0.2)",
|
|
77
|
+
}}
|
|
78
|
+
>
|
|
79
|
+
<CrossArrowIcon size={20} color="#333" />
|
|
80
|
+
</div>
|
|
81
|
+
</div>
|
|
82
|
+
</div>
|
|
83
|
+
);
|
|
84
|
+
}
|