@morphika/andami 0.5.5 → 0.5.7
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/app/admin/layout.tsx +142 -98
- package/components/builder/ColumnDragOverlay.tsx +4 -4
- package/components/builder/CoverSectionCanvas.tsx +3 -3
- package/components/builder/InsertionLines.tsx +3 -3
- package/components/builder/SectionV2Canvas.tsx +3 -3
- package/components/builder/SectionV2Column.tsx +20 -20
- package/components/builder/live-preview/drag-utils.tsx +5 -3
- package/components/builder/settings-panel/SectionV2Settings.tsx +3 -3
- package/lib/builder/constants.ts +5 -3
- package/lib/version.ts +1 -1
- package/package.json +1 -1
package/app/admin/layout.tsx
CHANGED
|
@@ -50,149 +50,189 @@ function Tooltip({ children }: { children: React.ReactNode }) {
|
|
|
50
50
|
}
|
|
51
51
|
|
|
52
52
|
// ============================================
|
|
53
|
-
// Andami Mark —
|
|
53
|
+
// Andami Mark — three-line scaffolding mark
|
|
54
54
|
// ============================================
|
|
55
55
|
|
|
56
56
|
function AndamiMark({ size = 30 }: { size?: number }) {
|
|
57
|
-
// viewBox
|
|
58
|
-
//
|
|
59
|
-
//
|
|
57
|
+
// viewBox tightened from the source 0 0 128 128 to the content bbox
|
|
58
|
+
// (incl. stroke caps), centered on the visual centroid (63.5, 60.5),
|
|
59
|
+
// so the mark fills the white tile without empty padding.
|
|
60
60
|
return (
|
|
61
61
|
<svg
|
|
62
62
|
width={size}
|
|
63
63
|
height={size}
|
|
64
|
-
viewBox="
|
|
64
|
+
viewBox="7.5 4.5 112 112"
|
|
65
65
|
xmlns="http://www.w3.org/2000/svg"
|
|
66
|
+
fill="none"
|
|
67
|
+
stroke="#1E2025"
|
|
68
|
+
strokeWidth={10}
|
|
69
|
+
strokeLinecap="round"
|
|
70
|
+
strokeLinejoin="round"
|
|
66
71
|
aria-hidden
|
|
67
72
|
>
|
|
68
|
-
<
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
/>
|
|
72
|
-
<path
|
|
73
|
-
fill="#1E2025"
|
|
74
|
-
d="M227.2,185.8h-39.6c-3.1,0-5.7,2.6-5.7,5.7v39.6c0,3.1,2.6,5.7,5.7,5.7h39.6c3.1,0,5.7-2.6,5.7-5.7v-39.6 C232.9,188.4,230.3,185.8,227.2,185.8z"
|
|
75
|
-
/>
|
|
76
|
-
<path
|
|
77
|
-
fill="#1E2025"
|
|
78
|
-
d="M311.4,231.1v-39.6c0-3.1-2.6-5.7-5.7-5.7h-39.6c-3.1,0-5.7,2.6-5.7,5.7v39.6c0,3.1,2.6,5.7,5.7,5.7h39.6 C308.8,236.8,311.4,234.3,311.4,231.1z"
|
|
79
|
-
/>
|
|
80
|
-
<path
|
|
81
|
-
fill="#1E2025"
|
|
82
|
-
d="M332.7,258.4h-41.3c-3.3,0-6,2.7-6,6v94.7c0,3.3,2.7,6,6,6h41.3c3.3,0,6-2.7,6-6v-94.7 C338.7,261.1,336,258.4,332.7,258.4z"
|
|
83
|
-
/>
|
|
84
|
-
<path
|
|
85
|
-
fill="#1E2025"
|
|
86
|
-
d="M208.1,258.4h-41.3c-3.3,0-6,2.7-6,6v94.7c0,3.3,2.7,6,6,6h41.3c3.3,0,6-2.7,6-6v-94.7 C214.2,261.1,211.5,258.4,208.1,258.4z"
|
|
87
|
-
/>
|
|
73
|
+
<line x1="16.5" y1="108.5" x2="63.5" y2="12.5" />
|
|
74
|
+
<line x1="110.5" y1="108.5" x2="63.5" y2="12.5" />
|
|
75
|
+
<line x1="84.5" y1="108.5" x2="37.5" y2="12.5" />
|
|
88
76
|
</svg>
|
|
89
77
|
);
|
|
90
78
|
}
|
|
91
79
|
|
|
92
80
|
// ============================================
|
|
93
|
-
// Icon Component —
|
|
81
|
+
// Icon Component — inlined from docs/Design/svg/*.svg
|
|
94
82
|
// ============================================
|
|
83
|
+
// Source SVGs live at docs/Design/svg/ as outline/filled pairs so the design
|
|
84
|
+
// files are editable in Illustrator/Figma. Each section icon has two states:
|
|
85
|
+
// outline (default) + filled (when the section is active). Footer links that
|
|
86
|
+
// don't represent a section (View Site, Log out) only have a single variant.
|
|
87
|
+
// The runtime renders inline JSX (the framework has no public/ folder), so
|
|
88
|
+
// edits to the .svg need to be hand-synced into the switch below.
|
|
95
89
|
|
|
96
|
-
function NavIcon({ icon }: { icon: string }) {
|
|
97
|
-
const size =
|
|
90
|
+
function NavIcon({ icon, active = false }: { icon: string; active?: boolean }) {
|
|
91
|
+
const size = 28;
|
|
92
|
+
const svgProps = {
|
|
93
|
+
width: size,
|
|
94
|
+
height: size,
|
|
95
|
+
viewBox: "0 0 46 46",
|
|
96
|
+
fill: "currentColor" as const,
|
|
97
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
98
|
+
"aria-hidden": true,
|
|
99
|
+
};
|
|
98
100
|
switch (icon) {
|
|
99
101
|
case "file":
|
|
100
|
-
//
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
<path d="
|
|
109
|
-
<path d="M14 13l1 2l-1 2" />
|
|
102
|
+
// Pages — "new page" / "new page_outline".
|
|
103
|
+
return active ? (
|
|
104
|
+
<svg {...svgProps}>
|
|
105
|
+
<path d="M23,6.6l0.2,0c0.8,0.1,1.3,0.7,1.4,1.4l0,0.2v6.6l0,0.2c0.1,1.6,1.4,2.9,3,3l0.3,0h6.6l0.2,0c0.8,0.1,1.3,0.7,1.4,1.4l0,0.2v14.8c0,2.6-2,4.8-4.6,4.9l-0.3,0H14.8c-2.6,0-4.8-2-4.9-4.6l0-0.3v-23c0-2.6,2-4.8,4.6-4.9l0.3,0C14.8,6.6,23,6.6,23,6.6z" />
|
|
106
|
+
<path d="M33.7,15h-5.2c-0.4,0-0.8-0.3-0.8-0.8l0-5.2c0-0.7,0.8-1,1.3-0.5l5.2,5.2C34.7,14.1,34.4,15,33.7,15z" />
|
|
107
|
+
</svg>
|
|
108
|
+
) : (
|
|
109
|
+
<svg {...svgProps}>
|
|
110
|
+
<path d="M36,15.7c-0.1-0.2-0.2-0.3-0.3-0.4l-8.5-8.5c-0.1-0.1-0.2-0.2-0.4-0.3c-0.1-0.1-0.3-0.1-0.5-0.1H14.5c-2.6,0-4.6,2.1-4.6,4.6v23.8c0,2.6,2.1,4.6,4.6,4.6h17c2.6,0,4.6-2.1,4.6-4.6V16.2C36.1,16,36.1,15.9,36,15.7z M27.6,10.7l4.3,4.3h-3.8c-0.3,0-0.5-0.2-0.5-0.5V10.7z M31.5,37h-17c-1.2,0-2.2-1-2.2-2.2V11.1c0-1.2,1-2.2,2.2-2.2h10.6v5.6c0,1.6,1.3,2.9,2.9,2.9h5.6v17.4C33.6,36.1,32.7,37,31.5,37z" />
|
|
110
111
|
</svg>
|
|
111
112
|
);
|
|
112
113
|
case "film":
|
|
113
|
-
//
|
|
114
|
-
return (
|
|
115
|
-
<svg
|
|
116
|
-
<path d="
|
|
117
|
-
<path d="
|
|
118
|
-
|
|
114
|
+
// Projects — "project" / "project_outline".
|
|
115
|
+
return active ? (
|
|
116
|
+
<svg {...svgProps}>
|
|
117
|
+
<path d="M33.7,15h-5.2c-0.4,0-0.8-0.3-0.8-0.8l0-5.2c0-0.7,0.8-1,1.3-0.5l5.2,5.2C34.7,14.1,34.4,15,33.7,15z" />
|
|
118
|
+
<path d="M36.1,19.5c-0.1-0.8-0.7-1.3-1.4-1.4l-0.2,0h-6.6l-0.3,0c-1.6-0.1-2.9-1.4-3-3l0-0.2V8.2l0-0.2c-0.1-0.8-0.7-1.3-1.4-1.4l-0.2,0h-8.2l-0.3,0c-2.6,0.2-4.6,2.3-4.6,4.9v23l0,0.3c0.2,2.6,2.3,4.6,4.9,4.6h16.4l0.3,0c2.6-0.2,4.6-2.3,4.6-4.9V19.7L36.1,19.5z M16.4,24.3l-0.2-0.2c-1.1-1.2-1-3.1,0.2-4.2c1.2-1.2,3.2-1.2,4.4,0l0.7,0.7L17.1,25L16.4,24.3z M29.5,32c0,0.6-0.4,1-1,1h-3c-0.3,0-0.5-0.1-0.7-0.3l-6.3-6.3l4.4-4.4l6.3,6.3c0.2,0.2,0.3,0.4,0.3,0.7V32z" />
|
|
119
|
+
</svg>
|
|
120
|
+
) : (
|
|
121
|
+
<svg {...svgProps}>
|
|
122
|
+
<path d="M36,15.7c-0.1-0.2-0.2-0.3-0.3-0.4l-8.5-8.5c-0.1-0.1-0.2-0.2-0.4-0.3c-0.1-0.1-0.3-0.1-0.5-0.1H14.5c-2.6,0-4.6,2.1-4.6,4.6v23.8c0,2.6,2.1,4.6,4.6,4.6h17c2.6,0,4.6-2.1,4.6-4.6V16.2C36.1,16,36.1,15.9,36,15.7z M27.6,10.7l4.3,4.3h-3.8c-0.3,0-0.5-0.2-0.5-0.5V10.7z M33.6,34.9c0,1.2-1,2.2-2.2,2.2h-17c-1.2,0-2.2-1-2.2-2.2V11.1c0-1.2,1-2.2,2.2-2.2h10.6v5.6c0,1.6,1.3,2.9,2.9,2.9h5.6V34.9z" />
|
|
123
|
+
<path d="M30.2,25.5L24.7,20l0,0l-1.6-1.6c-1.7-1.7-4.5-1.7-6.1,0c-1.6,1.6-1.7,4.2-0.2,5.9l0.1,0.1l0,0l7.2,7.2c0.4,0.4,1,0.7,1.6,0.7h3c1.2,0,2.2-1,2.2-2.2v-3C30.9,26.5,30.6,25.9,30.2,25.5z M21.2,20l-2.6,2.6c-0.5-0.7-0.5-1.8,0.2-2.4c0.3-0.3,0.8-0.5,1.3-0.5C20.5,19.7,20.9,19.8,21.2,20z M28.4,27.2v2.6h-2.6l-5.3-5.3l2.6-2.6L28.4,27.2z" />
|
|
119
124
|
</svg>
|
|
120
125
|
);
|
|
121
126
|
case "palette":
|
|
122
|
-
//
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
<path
|
|
127
|
-
<path d="
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
127
|
+
// Customize — "customization" / "customization_outline".
|
|
128
|
+
return active ? (
|
|
129
|
+
<svg {...svgProps}>
|
|
130
|
+
<path d="M39.7,29.1c0-1.7-1.4-3-3.1-3h-1.8L21.3,39.5h15.4c1.7,0,3.1-1.4,3.1-3V29.1z" />
|
|
131
|
+
<path d="M19.9,9.5c0-1.7-1.4-3-3.1-3H9.4c-1.7,0-3.1,1.4-3.1,3v23.3c0,3.7,3,6.7,6.8,6.7c3.7,0,6.8-3,6.8-6.7V9.5z M13.1,35.9c-1.4,0-2.5-1.1-2.5-2.5c0-1.4,1.1-2.5,2.5-2.5c1.4,0,2.5,1.1,2.5,2.5C15.6,34.8,14.5,35.9,13.1,35.9z" />
|
|
132
|
+
<path d="M34.5,17.3l-5.7-5.6c-1.2-1.2-3.4-1.2-4.7,0L22.7,13v20.5l11.7-11.6c0.6-0.6,1-1.4,1-2.3C35.4,18.7,35.1,17.9,34.5,17.3z" />
|
|
133
|
+
</svg>
|
|
134
|
+
) : (
|
|
135
|
+
<svg {...svgProps}>
|
|
136
|
+
<path d="M6.5,11.1v20.4c0,4.4,3.6,8,8,8h20.4c2.5,0,4.6-2.1,4.6-4.6v-6.8c0-2.5-2.1-4.6-4.6-4.6h-1l1.3-1.3c1.8-1.8,1.8-4.7,0-6.5l-4.8-4.8c-0.9-0.9-2-1.4-3.3-1.4c-1.2,0-2.4,0.5-3.3,1.4l-1.3,1.3v-1.1c0-2.5-2.1-4.6-4.6-4.6h-6.8C8.6,6.5,6.5,8.6,6.5,11.1z M33.4,20.5L22.5,31.4V15.6l3-3c0.8-0.8,2.3-0.8,3.1,0l4.8,4.8C34.3,18.2,34.3,19.6,33.4,20.5z M34.9,37.1H20.3l11.2-11.2h3.5c1.2,0,2.2,1,2.2,2.2v6.8C37.1,36.1,36.1,37.1,34.9,37.1z M8.9,11.1c0-1.2,1-2.2,2.2-2.2h6.8c1.2,0,2.2,1,2.2,2.2v20.4c0,3.1-2.5,5.6-5.6,5.6c-3.1,0-5.6-2.5-5.6-5.6V11.1z" />
|
|
137
|
+
<path d="M14.5,30.3c0.7,0,1.2,0.6,1.2,1.2c0,0.7-0.5,1.2-1.2,1.2s-1.2-0.5-1.2-1.2v0C13.3,30.8,13.8,30.3,14.5,30.3z" />
|
|
131
138
|
</svg>
|
|
132
139
|
);
|
|
133
140
|
case "nav":
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
<
|
|
138
|
-
<
|
|
141
|
+
// Navigation — "navigation" / "navigation_outline".
|
|
142
|
+
return active ? (
|
|
143
|
+
<svg {...svgProps}>
|
|
144
|
+
<path d="M34,7.9H12c-1.5,0-2.7,1.2-2.7,2.7v0.8c0,1.5,1.2,2.7,2.7,2.7h22c1.5,0,2.7-1.2,2.7-2.7v-0.8C36.7,9.1,35.5,7.9,34,7.9z" />
|
|
145
|
+
<path d="M34,19.9H12c-1.5,0-2.7,1.2-2.7,2.7v0.8c0,1.5,1.2,2.7,2.7,2.7h22c1.5,0,2.7-1.2,2.7-2.7v-0.8C36.7,21.1,35.5,19.9,34,19.9z" />
|
|
146
|
+
<path d="M34,31.9H12c-1.5,0-2.7,1.2-2.7,2.7v0.8c0,1.5,1.2,2.7,2.7,2.7h22c1.5,0,2.7-1.2,2.7-2.7v-0.8C36.7,33.1,35.5,31.9,34,31.9z" />
|
|
139
147
|
</svg>
|
|
140
|
-
)
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
<
|
|
145
|
-
<path d="M4 6v6c0 1.7 3.6 3 8 3s8-1.3 8-3V6" />
|
|
146
|
-
<path d="M4 12v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6" />
|
|
148
|
+
) : (
|
|
149
|
+
<svg {...svgProps}>
|
|
150
|
+
<path d="M33,6.5H13c-2.1,0-3.9,1.7-3.9,3.9v0.4c0,2.1,1.7,3.9,3.9,3.9H33c2.1,0,3.9-1.7,3.9-3.9v-0.4C36.8,8.2,35.1,6.5,33,6.5z M34.4,10.8c0,0.8-0.6,1.4-1.4,1.4H13c-0.8,0-1.4-0.6-1.4-1.4v-0.4c0-0.8,0.6-1.4,1.4-1.4H33c0.8,0,1.4,0.6,1.4,1.4V10.8z" />
|
|
151
|
+
<path d="M33,18.4H13c-2.1,0-3.9,1.7-3.9,3.9v0.4c0,2.1,1.7,3.9,3.9,3.9H33c2.1,0,3.9-1.7,3.9-3.9v-0.4C36.8,20.2,35.1,18.4,33,18.4z M34.4,22.7c0,0.8-0.6,1.4-1.4,1.4H13c-0.8,0-1.4-0.6-1.4-1.4v-0.4c0-0.8,0.6-1.4,1.4-1.4H33c0.8,0,1.4,0.6,1.4,1.4V22.7z" />
|
|
152
|
+
<path d="M33,31.3H13c-2.1,0-3.9,1.7-3.9,3.9v0.4c0,2.1,1.7,3.9,3.9,3.9H33c2.1,0,3.9-1.7,3.9-3.9v-0.4C36.8,33.1,35.1,31.3,33,31.3z M34.4,35.6c0,0.8-0.6,1.4-1.4,1.4H13c-0.8,0-1.4-0.6-1.4-1.4v-0.4c0-0.8,0.6-1.4,1.4-1.4H33c0.8,0,1.4,0.6,1.4,1.4V35.6z" />
|
|
147
153
|
</svg>
|
|
148
154
|
);
|
|
149
155
|
case "harddisk":
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
<path d="
|
|
154
|
-
<
|
|
155
|
-
|
|
156
|
+
// Storage — "storage" / "storage_outline".
|
|
157
|
+
return active ? (
|
|
158
|
+
<svg {...svgProps}>
|
|
159
|
+
<path d="M8,25.6H38c0.7,0,1.3-0.7,1.1-1.3L35.5,11c-0.4-1.4-1.7-2.3-3.2-2.3H13.7c-1.5,0-2.8,1-3.2,2.3L6.9,24.3C6.8,25,7.3,25.6,8,25.6z" />
|
|
160
|
+
<path d="M37.5,28h-29c-1.1,0-2,0.9-2,2v5.2c0,1.2,0.9,2.1,2.1,2.1h28.8c1.2,0,2.1-0.9,2.1-2.1V30C39.5,28.9,38.6,28,37.5,28z M18.1,33.3c0,0.5-0.4,0.9-0.9,0.9h-7.1c-0.5,0-0.9-0.4-0.9-0.9v-1.4c0-0.5,0.4-0.9,0.9-0.9h7.1c0.5,0,0.9,0.4,0.9,0.9V33.3z M30.3,34.2c-0.9,0-1.6-0.7-1.6-1.6s0.7-1.6,1.6-1.6s1.6,0.7,1.6,1.6S31.1,34.2,30.3,34.2z M35.4,34.2c-0.9,0-1.6-0.7-1.6-1.6s0.7-1.6,1.6-1.6s1.6,0.7,1.6,1.6S36.2,34.2,35.4,34.2z" />
|
|
161
|
+
</svg>
|
|
162
|
+
) : (
|
|
163
|
+
<svg {...svgProps}>
|
|
164
|
+
<path d="M9.1,25.7h27.8c0.7,0,1.4-0.3,1.8-0.9c0.4-0.5,0.5-1.2,0.4-1.8l-3.3-12.3c-0.5-1.8-2.2-3-4.1-3H14.4c-1.9,0-3.6,1.2-4.1,3L6.9,23c-0.2,0.6,0,1.3,0.4,1.8C7.7,25.3,8.4,25.7,9.1,25.7z M12.5,11.2c0.2-0.8,1-1.3,1.9-1.3h17.3c0.9,0,1.6,0.5,1.9,1.3l3.3,12.1H9.3L12.5,11.2z" />
|
|
165
|
+
<path d="M36.5,27.5h-27c-1.7,0-3,1.3-3,3v4.8c0,1.7,1.4,3.1,3.1,3.1h26.8c1.7,0,3.1-1.4,3.1-3.1v-4.8C39.5,28.8,38.2,27.5,36.5,27.5z M37.2,35.3c0,0.4-0.4,0.8-0.8,0.8H9.6c-0.4,0-0.8-0.4-0.8-0.8v-4.8c0-0.4,0.3-0.7,0.7-0.7h27c0.4,0,0.7,0.3,0.7,0.7V35.3z" />
|
|
166
|
+
<circle cx="34.6" cy="32.9" r="0.9" />
|
|
167
|
+
<circle cx="30.9" cy="32.9" r="0.9" />
|
|
168
|
+
<path d="M19.3,31.9h-8.5c-0.2,0-0.4,0.2-0.4,0.4v1c0,0.2,0.2,0.4,0.4,0.4h8.5c0.2,0,0.4-0.2,0.4-0.4v-1C19.7,32.1,19.6,31.9,19.3,31.9z" />
|
|
169
|
+
</svg>
|
|
170
|
+
);
|
|
171
|
+
case "database":
|
|
172
|
+
// Database — "database" / "database_outline".
|
|
173
|
+
return active ? (
|
|
174
|
+
<svg {...svgProps}>
|
|
175
|
+
<path d="M8.2,29.1v3.7c0,4.1,6.7,6.6,14.8,6.6l0.5,0c7.9-0.1,14.3-2.6,14.3-6.6v-3.7c-3.2,2.5-8.6,3.7-14.8,3.7C16.8,32.9,11.4,31.6,8.2,29.1z" />
|
|
176
|
+
<path d="M8.2,19.3V23l0,0.2l0,0.2c0.3,3.9,6.9,6.2,14.8,6.2c8.1,0,14.8-2.5,14.8-6.6v-3.7C34.5,21.8,29.2,23,23,23C16.8,23,11.4,21.7,8.2,19.3z" />
|
|
177
|
+
<path d="M23,19.7c8.1,0,14.8-2.5,14.8-6.6l0-0.3c0-0.4-0.2-0.8-0.3-1.2l-0.1-0.2c-0.1-0.1-0.1-0.2-0.2-0.3L37,10.8c-0.3-0.4-0.7-0.8-1.1-1.1c-0.2-0.1-0.3-0.2-0.5-0.4c-0.5-0.3-1-0.6-1.6-0.9l-0.3-0.1C33,8.1,32.6,8,32.1,7.8l-0.1,0l-0.7-0.2c-0.8-0.2-1.7-0.4-2.6-0.6l-0.8-0.1c-1.5-0.2-3.2-0.3-4.9-0.3l-0.5,0C14.8,6.7,8.6,9,8.2,12.8l0,0.2l0,0.2c0,0.1,0,0.2,0,0.3C8.6,17.4,15.1,19.7,23,19.7z" />
|
|
178
|
+
</svg>
|
|
179
|
+
) : (
|
|
180
|
+
<svg {...svgProps}>
|
|
181
|
+
<path d="M23,6.5c-7.4,0-14.8,2.2-14.8,6.3V23v10.2c0,4.2,7.4,6.3,14.8,6.3s14.8-2.2,14.8-6.3V23V12.8C37.8,8.7,30.4,6.5,23,6.5z M35.3,23c0,1.6-4.8,3.8-12.3,3.8S10.7,24.6,10.7,23v-6.5c2.8,1.7,7.6,2.7,12.3,2.7s9.5-0.9,12.3-2.7V23z M23,9c7.5,0,12.3,2.3,12.3,3.8s-4.8,3.8-12.3,3.8s-12.3-2.3-12.3-3.8S15.5,9,23,9z M23,37c-7.5,0-12.3-2.3-12.3-3.8v-6.5c2.8,1.7,7.6,2.7,12.3,2.7s9.5-0.9,12.3-2.7v6.5C35.3,34.7,30.5,37,23,37z" />
|
|
156
182
|
</svg>
|
|
157
183
|
);
|
|
158
184
|
case "code":
|
|
159
|
-
//
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
185
|
+
// Metadata — "metadata" / "metadata_outline" (a tag with a hole).
|
|
186
|
+
return active ? (
|
|
187
|
+
<svg {...svgProps}>
|
|
188
|
+
<path d="M21.6,6.5c1.3,0,2.6,0.5,3.5,1.5l12.7,12.7c2.2,2.2,2.2,5.8,0,8l-9.2,9.2c-2.2,2.2-5.8,2.2-8,0L7.9,25.1c-0.9-0.9-1.5-2.2-1.5-3.5v-8.5c0-3.6,3-6.6,6.6-6.6l0,0L21.6,6.5z M15.6,12.3c-1.7,0-3.2,1.3-3.3,3.1l0,0.2c0,1.8,1.5,3.3,3.3,3.3s3.3-1.5,3.3-3.3S17.4,12.3,15.6,12.3" />
|
|
189
|
+
</svg>
|
|
190
|
+
) : (
|
|
191
|
+
<svg {...svgProps}>
|
|
192
|
+
<path d="M15.4,12.4c-1.6,0-2.9,1.3-2.9,2.9c0,1.6,1.3,2.9,2.9,2.9s2.9-1.3,2.9-2.9C18.3,13.7,17,12.4,15.4,12.4z" />
|
|
193
|
+
<path d="M38,20.9L24.9,7.8c-0.9-0.9-2-1.4-3.3-1.4h-8.8c-3.5,0-6.3,2.8-6.3,6.3v8.8c0,1.2,0.5,2.4,1.4,3.3L20.9,38c1,1,2.3,1.6,3.8,1.6c1.4,0,2.8-0.6,3.8-1.6l9.5-9.5C40,26.4,40,23,38,20.9z M36.2,26.7l-9.5,9.5c-1.1,1.1-2.9,1.1-4,0L9.6,23.1C9.2,22.7,9,22.2,9,21.6v-8.8C9,10.7,10.7,9,12.8,9h8.8c0.6,0,1.1,0.2,1.5,0.6l13.1,13.1C37.3,23.8,37.3,25.6,36.2,26.7z" />
|
|
166
194
|
</svg>
|
|
167
195
|
);
|
|
168
196
|
case "cloud-download":
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
<path d="
|
|
173
|
-
<path d="
|
|
197
|
+
// Backups — "backup" / "backup_outline".
|
|
198
|
+
return active ? (
|
|
199
|
+
<svg {...svgProps}>
|
|
200
|
+
<path d="M39.4,24.9c-0.2-3.4-2.9-6.2-6.3-6.4l-0.1,0l0-0.3c-0.1-2.5-1.3-4.8-3.4-6.5C27,9.6,23.4,9,20.1,10h0l-0.4,0.1C17.1,11,15,12.9,14,15.4l-0.1,0.3l-0.2,0c-4,0.6-7.1,4-7.1,8.1l0,0.3c0.2,4.3,3.7,7.7,8.1,7.9l0.1,0l0,0c-0.7-0.7-1.1-1.6-1.1-2.5c0-1,0.4-1.9,1.1-2.5c1.3-1.3,3.5-1.4,4.9-0.2v-2.8c0-1.9,1.6-3.5,3.5-3.5h0.2c1.9,0,3.5,1.6,3.5,3.5v2.8c1.2-1,2.8-1.1,4.1-0.4c1,0.6,1.6,1.5,1.7,2.6c0.1,1.1-0.2,2.2-1,3l-0.1,0.1h1.2l0.3,0c3.5-0.2,6.4-3.1,6.4-6.7L39.4,24.9z" />
|
|
201
|
+
<path d="M29.8,28.2c-0.5-0.3-1.2-0.2-1.7,0.3L24.6,32v-8.1c0-0.7-0.6-1.2-1.2-1.2h-0.2c-0.7,0-1.2,0.6-1.2,1.2V32l-3.6-3.6c-0.5-0.5-1.4-0.5-1.9,0C16.1,28.7,16,29,16,29.3c0,0.3,0.1,0.7,0.4,0.9l5.9,5.8c0.1,0.1,0.1,0.1,0.2,0.2c0,0,0,0,0.1,0c0.1,0,0.1,0.1,0.2,0.1c0,0,0.1,0,0.1,0c0.1,0,0.1,0,0.2,0c0.1,0,0.2,0,0.3,0c0.1,0,0.2,0,0.3,0c0.1,0,0.1,0,0.2,0c0,0,0.1,0,0.1,0c0.1,0,0.1-0.1,0.2-0.1c0,0,0,0,0.1,0c0.1,0,0.1-0.1,0.2-0.2l5.9-5.8C30.7,29.7,30.6,28.7,29.8,28.2z" />
|
|
202
|
+
</svg>
|
|
203
|
+
) : (
|
|
204
|
+
<svg {...svgProps}>
|
|
205
|
+
<path d="M29.8,28.3c-0.5-0.3-1.2-0.2-1.7,0.3l-3.6,3.5v-8.1c0-0.7-0.6-1.2-1.2-1.2h-0.2c-0.7,0-1.2,0.6-1.2,1.2v8.1l-3.6-3.6c-0.5-0.5-1.4-0.5-1.9,0c-0.3,0.3-0.4,0.6-0.4,0.9c0,0.3,0.1,0.7,0.4,0.9l5.9,5.8c0.1,0.1,0.1,0.1,0.2,0.2c0,0,0,0,0.1,0c0.1,0,0.1,0.1,0.2,0.1c0,0,0.1,0,0.1,0c0.1,0,0.1,0,0.2,0c0.1,0,0.2,0,0.3,0c0.1,0,0.2,0,0.3,0c0.1,0,0.1,0,0.2,0c0,0,0.1,0,0.1,0c0.1,0,0.1-0.1,0.2-0.1c0,0,0,0,0.1,0c0.1,0,0.1-0.1,0.2-0.2l5.9-5.8C30.7,29.7,30.6,28.7,29.8,28.3z" />
|
|
206
|
+
<path d="M33,18.7h-0.2c0.1-2.7-1.1-5.3-3.3-7c-2.6-2.1-6.2-2.7-9.4-1.7c-3,0.9-5.3,3.1-6.2,5.8c-4.2,0.4-7.4,3.9-7.4,8c0,4,3,7.3,6.9,7.9c0.5,0.1,0.9-0.5,0.6-0.9c-0.4-0.6-0.9-1.3-1.1-1.5c-0.1-0.1-0.2-0.2-0.3-0.2c-2.2-0.8-3.8-2.9-3.8-5.3c0-3.1,2.7-5.7,6-5.7c0.6,0,1-0.4,1.1-0.9c0.5-2.3,2.4-4.2,4.8-4.9c2.5-0.8,5.3-0.3,7.3,1.3c1.9,1.5,2.8,3.9,2.3,6.1c-0.1,0.3,0,0.7,0.2,1s0.6,0.4,0.9,0.4H33c2.3,0,4.1,1.9,4.1,4.2c0,2.2-1.7,4-3.8,4.1c-0.2,0-0.4,0.1-0.5,0.3l-1.3,2.1H33c3.6,0,6.5-2.9,6.5-6.5C39.5,21.6,36.6,18.7,33,18.7z" />
|
|
174
207
|
</svg>
|
|
175
208
|
);
|
|
176
209
|
case "setup":
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
210
|
+
// Setup Wizard — "wizard" / "wizard_outline".
|
|
211
|
+
return active ? (
|
|
212
|
+
<svg {...svgProps}>
|
|
213
|
+
<path d="M27.4,9.9c0.2,0.6,0.8,1,1.4,0.9c0.1,0,0.2-0.1,0.3-0.1c4-2.5,8.6,2.2,6.2,6.2c-0.3,0.6-0.2,1.3,0.4,1.6c0.1,0.1,0.2,0.1,0.3,0.1c4.6,1.1,4.6,7.6,0,8.7c-0.6,0.2-1,0.8-0.9,1.4c0,0.1,0.1,0.2,0.1,0.3c2.5,4-2.2,8.6-6.2,6.2c-0.6-0.3-1.3-0.2-1.6,0.4c-0.1,0.1-0.1,0.2-0.1,0.3c-1.1,4.6-7.6,4.6-8.7,0c-0.2-0.6-0.8-1-1.4-0.9c-0.1,0-0.2,0.1-0.3,0.1c-4,2.5-8.6-2.2-6.2-6.2c0.3-0.6,0.2-1.3-0.4-1.6c-0.1-0.1-0.2-0.1-0.3-0.1c-4.6-1.1-4.6-7.6,0-8.7c0.6-0.2,1-0.8,0.9-1.4c0-0.1-0.1-0.2-0.1-0.3c-2.5-4,2.2-8.6,6.2-6.2c0.6,0.3,1.3,0.2,1.6-0.4c0.1-0.1,0.1-0.2,0.1-0.3C19.7,5.4,26.3,5.4,27.4,9.9z M23,18.1c-2.7,0-4.9,2.2-4.9,4.9s2.2,4.9,4.9,4.9s4.9-2.2,4.9-4.9S25.7,18.1,23,18.1" />
|
|
214
|
+
</svg>
|
|
215
|
+
) : (
|
|
216
|
+
<svg {...svgProps}>
|
|
217
|
+
<path d="M36.3,19c-0.2,0-0.3-0.1-0.5-0.2c-0.4-0.2-0.7-0.6-0.8-1.1c-0.1-0.4,0-0.9,0.2-1.3c1-1.7,0.8-3.7-0.6-5.1c-1.4-1.4-3.4-1.6-5.1-0.6c-0.1,0.1-0.3,0.2-0.5,0.2c-0.4,0.1-0.9,0-1.3-0.2c-0.4-0.2-0.7-0.6-0.8-1.1c-0.5-1.9-2.1-3.2-4-3.2c-2,0-3.6,1.3-4,3.2c-0.1,0.5-0.5,1-1,1.2c-0.5,0.2-1.1,0.2-1.5-0.1c-1.7-1-3.7-0.8-5.1,0.6c-1.4,1.4-1.6,3.4-0.6,5.1c0.1,0.2,0.2,0.3,0.2,0.5c0.2,0.9-0.3,1.8-1.3,2.1c-1.9,0.5-3.2,2.1-3.2,4c0,2,1.3,3.6,3.2,4c0.2,0,0.3,0.1,0.5,0.2c0.8,0.5,1.1,1.5,0.6,2.3c-1,1.7-0.8,3.7,0.6,5.1c1.4,1.4,3.4,1.6,5.1,0.6c0.2-0.1,0.3-0.2,0.5-0.2c0.9-0.2,1.8,0.3,2.1,1.3c0.5,1.9,2.1,3.2,4,3.2s3.6-1.3,4-3.2c0-0.2,0.1-0.3,0.2-0.5c0.2-0.4,0.6-0.7,1.1-0.8c0.4-0.1,0.9,0,1.3,0.2c1.7,1,3.7,0.8,5.1-0.6c1.4-1.4,1.6-3.4,0.6-5.1c-0.1-0.2-0.2-0.3-0.2-0.5c-0.1-0.4,0-0.9,0.2-1.3c0.2-0.4,0.6-0.7,1.1-0.8c1.9-0.5,3.2-2.1,3.2-4C39.5,21,38.2,19.4,36.3,19z M35.8,24.7c-1.1,0.3-2,0.9-2.6,1.9c-0.6,0.9-0.8,2.1-0.5,3.1c0.1,0.4,0.3,0.8,0.5,1.2c0.5,0.8,0.2,1.6-0.3,2.1c-0.5,0.5-1.2,0.8-2.1,0.3c-0.9-0.6-2.1-0.7-3.1-0.5c-1.1,0.3-2,0.9-2.6,1.9c-0.2,0.4-0.4,0.8-0.5,1.2c-0.2,1-1,1.3-1.7,1.3s-1.4-0.3-1.7-1.3c-0.5-1.9-2.2-3.2-4-3.2c-0.3,0-0.7,0-1,0.1c-0.4,0.1-0.8,0.3-1.2,0.5c-0.8,0.5-1.6,0.2-2.1-0.3c-0.5-0.5-0.8-1.2-0.3-2.1c1.2-2,0.6-4.5-1.4-5.7c-0.4-0.2-0.8-0.4-1.2-0.5c-1-0.2-1.3-1-1.3-1.7c0-0.6,0.3-1.4,1.3-1.7c2.2-0.5,3.6-2.8,3.1-5c-0.1-0.4-0.3-0.8-0.5-1.2c-0.5-0.8-0.2-1.6,0.3-2.1c0.5-0.5,1.2-0.8,2.1-0.3c1.1,0.7,2.5,0.8,3.7,0.3c1.2-0.5,2.1-1.6,2.4-2.9c0,0,0,0,0,0c0.2-1,1-1.3,1.7-1.3s1.4,0.3,1.7,1.3c0.5,2.2,2.8,3.6,5,3.1c0.4-0.1,0.8-0.3,1.2-0.5c0.8-0.5,1.6-0.2,2.1,0.3c0.5,0.5,0.8,1.2,0.3,2.1c-0.6,0.9-0.8,2.1-0.5,3.1c0.3,1.1,0.9,2,1.9,2.6c0.4,0.2,0.8,0.4,1.2,0.5c1,0.2,1.3,1,1.3,1.7C37.1,23.6,36.7,24.4,35.8,24.7z" />
|
|
218
|
+
<path d="M23,16.7c-3.5,0-6.3,2.8-6.3,6.3s2.8,6.3,6.3,6.3s6.3-2.8,6.3-6.3S26.5,16.7,23,16.7z M23,26.9c-2.1,0-3.9-1.7-3.9-3.9s1.7-3.9,3.9-3.9s3.9,1.7,3.9,3.9S25.1,26.9,23,26.9z" />
|
|
180
219
|
</svg>
|
|
181
220
|
);
|
|
182
221
|
case "view":
|
|
222
|
+
// View Site — outline only ("view_site"); opens the public site in a
|
|
223
|
+
// new tab, no admin route to highlight.
|
|
183
224
|
return (
|
|
184
|
-
<svg
|
|
185
|
-
<path d="
|
|
186
|
-
<path d="
|
|
187
|
-
<path d="M21 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5" />
|
|
225
|
+
<svg {...svgProps}>
|
|
226
|
+
<path d="M39.4,17.3l-0.1-10l-0.2-0.3c0,0-0.1-0.1-0.1-0.1l-0.4-0.3l-0.6-0.1h-9.4c-0.8,0-1.4,0.6-1.4,1.4s0.6,1.4,1.4,1.4h6.1L20.1,23.9c-0.5,0.5-0.5,1.4,0,1.9c0.5,0.5,1.4,0.6,1.9,0l14.6-14.6v6.1c0,0.8,0.6,1.4,1.4,1.4C38.8,18.7,39.4,18.1,39.4,17.3z" />
|
|
227
|
+
<path d="M23,10.3H11.7c-2.8,0-5.1,2.3-5.1,5.1v18.8c0,2.8,2.3,5.1,5.1,5.1h18.8c2.8,0,5.1-2.3,5.1-5.1V23c0-0.8-0.6-1.4-1.4-1.4c-0.8,0-1.4,0.6-1.4,1.4v11.3c0,1.3-1.1,2.4-2.4,2.4H11.7c-1.3,0-2.4-1.1-2.4-2.4V15.5c0-1.3,1.1-2.4,2.4-2.4H23c0.8,0,1.4-0.6,1.4-1.4S23.8,10.3,23,10.3z" />
|
|
188
228
|
</svg>
|
|
189
229
|
);
|
|
190
230
|
case "logout":
|
|
231
|
+
// Log out — outline only ("exit"); button only, no admin route.
|
|
191
232
|
return (
|
|
192
|
-
<svg
|
|
193
|
-
<path d="
|
|
194
|
-
<
|
|
195
|
-
<line x1="21" y1="12" x2="9" y2="12" />
|
|
233
|
+
<svg {...svgProps}>
|
|
234
|
+
<path d="M39.2,22.6l-0.1-0.4l-0.3-0.5l-5.3-5.3c-0.5-0.5-1.4-0.5-1.9,0c-0.5,0.5-0.5,1.4,0,1.9l3,3l-18.6,0c-0.7,0-1.3,0.6-1.3,1.3c0,0.7,0.6,1.3,1.3,1.4h18.6l-3,3c-0.5,0.5-0.5,1.4,0,1.9c0.3,0.3,0.6,0.4,1,0.4c0.3,0,0.7-0.1,1-0.4l5.6-5.7l0.1-0.4C39.2,22.8,39.2,22.7,39.2,22.6z" />
|
|
235
|
+
<path d="M38.2,30c-0.7,0-1.3,0.6-1.3,1.3v2.5c0,1.7-1.4,3-3,3l-21.7,0c-1.7,0-3-1.3-3-3V12.2c0-1.7,1.4-3,3-3l21.7,0c1.7,0,3,1.3,3,3v2.5c0,0.7,0.6,1.3,1.3,1.3c0.7,0,1.3-0.6,1.3-1.3v-2.5c0-3.1-2.5-5.6-5.7-5.6H12.2c-0.4,0-0.8,0-1.1,0.1c-2.6,0.5-4.5,2.9-4.5,5.5v21.6c0,2.3,1.4,4.3,3.5,5.2c0.7,0.3,1.4,0.4,2.2,0.4h21.7c3.1,0,5.7-2.5,5.7-5.6v-2.5C39.5,30.6,38.9,30,38.2,30z" />
|
|
196
236
|
</svg>
|
|
197
237
|
);
|
|
198
238
|
default:
|
|
@@ -245,7 +285,7 @@ export default function AdminLayout({
|
|
|
245
285
|
}`}
|
|
246
286
|
aria-label={link.label}
|
|
247
287
|
>
|
|
248
|
-
<NavIcon icon={link.icon} />
|
|
288
|
+
<NavIcon icon={link.icon} active={isActive} />
|
|
249
289
|
<Tooltip>{link.label}</Tooltip>
|
|
250
290
|
</Link>
|
|
251
291
|
);
|
|
@@ -265,7 +305,7 @@ export default function AdminLayout({
|
|
|
265
305
|
className={`${tileBase} bg-white`}
|
|
266
306
|
aria-label={`Morphika Andami v${ANDAMI_VERSION}`}
|
|
267
307
|
>
|
|
268
|
-
<AndamiMark size={
|
|
308
|
+
<AndamiMark size={24} />
|
|
269
309
|
<Tooltip>
|
|
270
310
|
Morphika Andami
|
|
271
311
|
<span className="ml-1.5 text-white/55">v{ANDAMI_VERSION}</span>
|
|
@@ -288,10 +328,14 @@ export default function AdminLayout({
|
|
|
288
328
|
|
|
289
329
|
<Link
|
|
290
330
|
href="/admin/setup"
|
|
291
|
-
className={`${tileBase}
|
|
331
|
+
className={`${tileBase} ${
|
|
332
|
+
isLinkActive("/admin/setup")
|
|
333
|
+
? "bg-[#3580f9] text-white"
|
|
334
|
+
: "text-white/55 hover:bg-white/[0.06] hover:text-white"
|
|
335
|
+
}`}
|
|
292
336
|
aria-label="Setup Wizard"
|
|
293
337
|
>
|
|
294
|
-
<NavIcon icon="setup" />
|
|
338
|
+
<NavIcon icon="setup" active={isLinkActive("/admin/setup")} />
|
|
295
339
|
<Tooltip>Setup Wizard</Tooltip>
|
|
296
340
|
</Link>
|
|
297
341
|
|
|
@@ -5,7 +5,7 @@ import { createPortal } from "react-dom";
|
|
|
5
5
|
import { useBuilderStore } from "../../lib/builder/store";
|
|
6
6
|
import type { PageSectionV2, CoverSection, SectionColumn } from "../../lib/sanity/types";
|
|
7
7
|
import { isPageSectionV2, isCoverSection } from "../../lib/sanity/types";
|
|
8
|
-
import {
|
|
8
|
+
import { BUILDER_YELLOW } from "../../lib/builder/constants";
|
|
9
9
|
|
|
10
10
|
/** Color used when the current drop target is invalid (cross-section
|
|
11
11
|
* swap, or a target that is not V2/Cover). Red 500 with compatible
|
|
@@ -57,9 +57,9 @@ const ColumnDragOverlay = memo(function ColumnDragOverlay({
|
|
|
57
57
|
|
|
58
58
|
const blockCount = (col.blocks || []).length;
|
|
59
59
|
|
|
60
|
-
// Pick accent based on drop validity.
|
|
61
|
-
const accentColor = isValidDrop ?
|
|
62
|
-
const accentRgb = isValidDrop ? "
|
|
60
|
+
// Pick accent based on drop validity. Column drag = BUILDER_YELLOW.
|
|
61
|
+
const accentColor = isValidDrop ? BUILDER_YELLOW : INVALID_RED;
|
|
62
|
+
const accentRgb = isValidDrop ? "214, 137, 0" : INVALID_RED_RGB;
|
|
63
63
|
|
|
64
64
|
const overlay = (
|
|
65
65
|
<div
|
|
@@ -329,9 +329,9 @@ export default function CoverSectionCanvas({
|
|
|
329
329
|
className="rounded-full text-[10px] font-medium transition-all hover:scale-105"
|
|
330
330
|
style={{
|
|
331
331
|
padding: "5px 16px",
|
|
332
|
-
background: `rgba(
|
|
333
|
-
color: "#
|
|
334
|
-
border: "1.5px dashed rgba(
|
|
332
|
+
background: `rgba(214, 137, 0, 0.10)`,
|
|
333
|
+
color: "#d68900",
|
|
334
|
+
border: "1.5px dashed rgba(214, 137, 0, 0.4)",
|
|
335
335
|
opacity: isSectionHovered ? 1 : 0,
|
|
336
336
|
pointerEvents: isSectionHovered ? "auto" : "none",
|
|
337
337
|
transition: "opacity 150ms",
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
import { useMemo, memo } from "react";
|
|
4
4
|
import type { CascadeColumn } from "../../lib/builder/cascade-helpers";
|
|
5
5
|
import type { DropTarget } from "./hooks/useColumnDrag";
|
|
6
|
-
import {
|
|
6
|
+
import { BUILDER_YELLOW } from "../../lib/builder/constants";
|
|
7
7
|
|
|
8
8
|
// ============================================
|
|
9
9
|
// InsertionLines — Visual insertion indicators between adjacent columns
|
|
@@ -154,7 +154,7 @@ export const InsertionLines = memo(function InsertionLines({
|
|
|
154
154
|
bottom: 4,
|
|
155
155
|
width: isActive ? 4 : 0,
|
|
156
156
|
transform: "translateX(-50%)",
|
|
157
|
-
background:
|
|
157
|
+
background: BUILDER_YELLOW,
|
|
158
158
|
borderRadius: 2,
|
|
159
159
|
transition: "width 100ms ease-out, opacity 100ms ease-out",
|
|
160
160
|
opacity: isActive ? 1 : 0,
|
|
@@ -171,7 +171,7 @@ export const InsertionLines = memo(function InsertionLines({
|
|
|
171
171
|
width: 14,
|
|
172
172
|
height: 14,
|
|
173
173
|
borderRadius: "50%",
|
|
174
|
-
background:
|
|
174
|
+
background: BUILDER_YELLOW,
|
|
175
175
|
border: "2px solid white",
|
|
176
176
|
boxShadow: "0 1px 4px rgba(53, 128, 249, 0.4)",
|
|
177
177
|
display: "flex",
|
|
@@ -306,11 +306,11 @@ export default function SectionV2Canvas({
|
|
|
306
306
|
}}
|
|
307
307
|
className={`rounded-lg border-2 border-dashed text-xs font-medium transition-all flex items-center justify-center cursor-pointer ${
|
|
308
308
|
isGapTarget
|
|
309
|
-
? "border-
|
|
309
|
+
? "border-[#d68900] text-[#d68900] bg-[#d68900]/10 opacity-100"
|
|
310
310
|
: showAsDropTarget
|
|
311
|
-
? "border-
|
|
311
|
+
? "border-[#d68900]/40 text-[#d68900]/60 bg-[#d68900]/5 opacity-100"
|
|
312
312
|
: isSectionHovered
|
|
313
|
-
? "border-[#
|
|
313
|
+
? "border-[#d68900]/25 text-[#d68900]/50 hover:text-[#d68900] hover:border-[#d68900]/60 hover:bg-[#d68900]/5 opacity-100"
|
|
314
314
|
: "border-transparent text-transparent opacity-0 pointer-events-none"
|
|
315
315
|
}`}
|
|
316
316
|
>
|
|
@@ -15,7 +15,7 @@ import {
|
|
|
15
15
|
getBorderStyles,
|
|
16
16
|
} from "../../lib/builder/layout-styles";
|
|
17
17
|
import { isSectionBlockType } from "../../lib/builder/types";
|
|
18
|
-
import {
|
|
18
|
+
import { BUILDER_YELLOW, BUILDER_YELLOW_LIGHT } from "../../lib/builder/constants";
|
|
19
19
|
import { BubbleTooltip, CloseIcon, DragDropIcon } from "./BubbleIcons";
|
|
20
20
|
|
|
21
21
|
// ============================================
|
|
@@ -89,17 +89,17 @@ function ResizeHandle({
|
|
|
89
89
|
height: isActive ? 16 : isHoveredEdge ? 56 : showChrome ? 56 : 32,
|
|
90
90
|
borderRadius: isActive ? "50%" : 999,
|
|
91
91
|
backgroundColor: isActive
|
|
92
|
-
? "rgba(
|
|
92
|
+
? "rgba(214, 137, 0, 0.9)"
|
|
93
93
|
: isHoveredEdge
|
|
94
|
-
? "rgba(
|
|
94
|
+
? "rgba(214, 137, 0, 0.7)"
|
|
95
95
|
: showChrome
|
|
96
|
-
? "rgba(
|
|
97
|
-
: "rgba(
|
|
96
|
+
? "rgba(214, 137, 0, 0.5)"
|
|
97
|
+
: "rgba(214, 137, 0, 0.2)",
|
|
98
98
|
transition: "width 150ms ease-out, height 150ms ease-out, border-radius 150ms ease-out, background-color 150ms, box-shadow 150ms",
|
|
99
99
|
boxShadow: isActive
|
|
100
|
-
? "0 0 10px rgba(
|
|
100
|
+
? "0 0 10px rgba(214, 137, 0, 0.5)"
|
|
101
101
|
: isHoveredEdge
|
|
102
|
-
? "0 0 6px rgba(
|
|
102
|
+
? "0 0 6px rgba(214, 137, 0, 0.2)"
|
|
103
103
|
: undefined,
|
|
104
104
|
}}
|
|
105
105
|
/>
|
|
@@ -304,15 +304,15 @@ export default function SectionV2Column({
|
|
|
304
304
|
style={{
|
|
305
305
|
transition: "box-shadow 150ms",
|
|
306
306
|
...(isSwapTarget
|
|
307
|
-
? { boxShadow: `inset 0 0 0 2px ${
|
|
307
|
+
? { boxShadow: `inset 0 0 0 2px ${BUILDER_YELLOW}`, background: "rgba(214, 137, 0, 0.08)" }
|
|
308
308
|
: isBlockOver
|
|
309
|
-
? { boxShadow: `inset 0 0 0 2px ${
|
|
309
|
+
? { boxShadow: `inset 0 0 0 2px ${BUILDER_YELLOW}` }
|
|
310
310
|
: isSelected
|
|
311
|
-
? { boxShadow: `inset 0 0 0 2px rgba(
|
|
311
|
+
? { boxShadow: `inset 0 0 0 2px rgba(214, 137, 0, 0.6)` }
|
|
312
312
|
: isHovered
|
|
313
|
-
? { boxShadow: `inset 0 0 0 1.5px rgba(
|
|
313
|
+
? { boxShadow: `inset 0 0 0 1.5px rgba(214, 137, 0, 0.5)` }
|
|
314
314
|
: showFaintOutline
|
|
315
|
-
? { boxShadow: `inset 0 0 0 1px rgba(
|
|
315
|
+
? { boxShadow: `inset 0 0 0 1px rgba(214, 137, 0, 0.2)`, borderRadius: 4 }
|
|
316
316
|
: undefined),
|
|
317
317
|
}}
|
|
318
318
|
/>
|
|
@@ -383,14 +383,14 @@ export default function SectionV2Column({
|
|
|
383
383
|
<div
|
|
384
384
|
className="flex items-center rounded-[5px]"
|
|
385
385
|
style={{
|
|
386
|
-
background:
|
|
387
|
-
border:
|
|
386
|
+
background: BUILDER_YELLOW_LIGHT,
|
|
387
|
+
border: `1.5px solid ${BUILDER_YELLOW}`,
|
|
388
388
|
}}
|
|
389
389
|
>
|
|
390
390
|
{/* Drag handle — starts a column drag via @dnd-kit, selects on click */}
|
|
391
391
|
<button
|
|
392
392
|
type="button"
|
|
393
|
-
className="group/bb relative text-[#
|
|
393
|
+
className="group/bb relative text-[#d68900] hover:bg-[#d68900]/15 transition-colors px-1.5 py-1 flex items-center justify-center cursor-grab active:cursor-grabbing rounded-l-[3px]"
|
|
394
394
|
aria-label="Move column"
|
|
395
395
|
onMouseDown={(e) => {
|
|
396
396
|
e.stopPropagation();
|
|
@@ -404,22 +404,22 @@ export default function SectionV2Column({
|
|
|
404
404
|
<DragDropIcon size={14} />
|
|
405
405
|
<BubbleTooltip>Drag to move</BubbleTooltip>
|
|
406
406
|
</button>
|
|
407
|
-
<div className="w-px self-stretch my-1" style={{ background:
|
|
407
|
+
<div className="w-px self-stretch my-1" style={{ background: BUILDER_YELLOW }} />
|
|
408
408
|
{/* Label — clicking selects the column */}
|
|
409
409
|
<button
|
|
410
410
|
type="button"
|
|
411
411
|
onClick={(e) => { e.stopPropagation(); onSelect(); }}
|
|
412
|
-
className="text-[11px] px-2 py-0.5 font-medium hover:bg-[#
|
|
413
|
-
style={{ color:
|
|
412
|
+
className="text-[11px] px-2 py-0.5 font-medium hover:bg-[#d68900]/15 transition-colors"
|
|
413
|
+
style={{ color: BUILDER_YELLOW }}
|
|
414
414
|
aria-label="Select column"
|
|
415
415
|
>
|
|
416
416
|
Col
|
|
417
417
|
</button>
|
|
418
|
-
<div className="w-px self-stretch my-1" style={{ background:
|
|
418
|
+
<div className="w-px self-stretch my-1" style={{ background: BUILDER_YELLOW }} />
|
|
419
419
|
{/* Delete */}
|
|
420
420
|
<button
|
|
421
421
|
onClick={handleDelete}
|
|
422
|
-
className="group/bb relative text-[#
|
|
422
|
+
className="group/bb relative text-[#d68900] hover:text-red-500 hover:bg-red-500/10 transition-colors px-1.5 py-1 flex items-center justify-center rounded-r-[3px]"
|
|
423
423
|
aria-label="Delete column"
|
|
424
424
|
>
|
|
425
425
|
<CloseIcon size={14} />
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
* Session 162: Extracted from LiveProjectGridPreview.tsx (Phase B1).
|
|
8
8
|
*/
|
|
9
9
|
|
|
10
|
-
import {
|
|
10
|
+
import { BUILDER_BLOCK } from "../../../lib/builder/constants";
|
|
11
11
|
import type { MasonryOutput } from "../../../lib/builder/masonry";
|
|
12
12
|
|
|
13
13
|
// ─── Constants ───────────────────────────────────────────────────────
|
|
@@ -15,8 +15,10 @@ import type { MasonryOutput } from "../../../lib/builder/masonry";
|
|
|
15
15
|
export const HOLD_DELAY = 150; // ms before card-body drag activates
|
|
16
16
|
export const MOVE_THRESHOLD_SQ = 9; // 3px² — grabbed → dragging
|
|
17
17
|
export const CANCEL_DURATION = 200; // ms — cancel fly-back animation
|
|
18
|
-
|
|
19
|
-
|
|
18
|
+
// Project-card DnD chrome inside `projectGridBlock` — semantic is block-level
|
|
19
|
+
// (card reorder within a block), so tracks BUILDER_BLOCK, not BUILDER_YELLOW.
|
|
20
|
+
export const ADMIN_BLUE = BUILDER_BLOCK;
|
|
21
|
+
export const DROP_BLUE = BUILDER_BLOCK;
|
|
20
22
|
|
|
21
23
|
// ─── Types ───────────────────────────────────────────────────────────
|
|
22
24
|
|
|
@@ -142,15 +142,15 @@ function PresetGrid({ section }: { section: PageSectionV2 }) {
|
|
|
142
142
|
{/* + Add Column button */}
|
|
143
143
|
<button
|
|
144
144
|
onClick={handleAddColumn}
|
|
145
|
-
className="group/bb relative flex flex-col items-center gap-1 p-2 rounded-lg border border-dashed border-neutral-300 transition-all hover:border-[#
|
|
145
|
+
className="group/bb relative flex flex-col items-center gap-1 p-2 rounded-lg border border-dashed border-neutral-300 transition-all hover:border-[#d68900] hover:bg-[#d68900]/5 group"
|
|
146
146
|
aria-label="Add a column (fills first gap, or adds new row below)"
|
|
147
147
|
>
|
|
148
148
|
<div className="flex items-center justify-center w-full h-4">
|
|
149
|
-
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" className="text-neutral-400 group-hover:text-[#
|
|
149
|
+
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" className="text-neutral-400 group-hover:text-[#d68900] transition-colors">
|
|
150
150
|
<path d="M12 5v14M5 12h14" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
|
|
151
151
|
</svg>
|
|
152
152
|
</div>
|
|
153
|
-
<span className="text-[9px] font-medium text-neutral-400 group-hover:text-[#
|
|
153
|
+
<span className="text-[9px] font-medium text-neutral-400 group-hover:text-[#d68900] transition-colors">
|
|
154
154
|
Add Col
|
|
155
155
|
</span>
|
|
156
156
|
<BubbleTooltip>Add a column (fills first gap, or adds new row below)</BubbleTooltip>
|
package/lib/builder/constants.ts
CHANGED
|
@@ -72,9 +72,11 @@ export const ADMIN_ERROR_DARK = "#d42f1a";
|
|
|
72
72
|
// while the delete inside a block toolbar is BLUE too (inside the block
|
|
73
73
|
// pill, on hover it flashes red as a destructive cue).
|
|
74
74
|
|
|
75
|
-
export const BUILDER_BLUE = "#3580f9"; //
|
|
76
|
-
export const
|
|
77
|
-
export const
|
|
75
|
+
export const BUILDER_BLUE = "#3580f9"; // Admin accent / generic blue (admin chrome, inputs, focus rings)
|
|
76
|
+
export const BUILDER_YELLOW = "#d68900"; // Columns (dark — strokes, borders, pill text)
|
|
77
|
+
export const BUILDER_YELLOW_LIGHT = "#fffcc2"; // Columns (light — pill background)
|
|
78
|
+
export const BUILDER_BLOCK = "#3580f9"; // Blocks (shares the blue hue; distinct semantic from columns)
|
|
79
|
+
export const BUILDER_VIOLET = "#7500d5"; // Sections (incl. Custom, Cover, Parallax)
|
|
78
80
|
export const BUILDER_GREEN = "#22c55e"; // Success / confirmation cues (e.g. R2 asset check)
|
|
79
81
|
|
|
80
82
|
/**
|
package/lib/version.ts
CHANGED
package/package.json
CHANGED