@bison-lab/payload-blocks 3.22.0 → 3.24.0

package/dist/admin.mjs

@@ -2,27 +2,27 @@
 import "./link-32261jXB.mjs";
 import { a as linkTypeOf, n as headerItemsFromBlocks, o as resolveAdminPreviewLink } from "./header-CTMSB4C0.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { ArrayField, DefaultEditView, FieldDescription, FieldError, FieldLabel, FieldPathContext, toast, useConfig, useField, useFieldPath, useForm, useTranslation } from "@payloadcms/ui";
+import { ArrayField, DefaultEditView, FieldDescription, FieldError, FieldLabel, FieldPathContext, toast, useConfig, useField, useFieldPath, useForm, useTheme, useTranslation } from "@payloadcms/ui";
 import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
-import { Canvas, ConfirmDialog, ItemRail, LinkGlyph, MainHead, MegaGlyph, RailSlot, TypeCard, TypeCards } from "@bison-lab/admin-ui";
+import { Button, Canvas, Checkbox, ConfirmDialog, Dialog, Field, Fold, Input, ItemRail, Kicker, KindGlyph, KitProvider, Label, MainHead, RailSlot, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Stack, Textarea, TypeCard, TypeCards } from "@bison-lab/admin-ui";
 import { resolveThemeIdentity, themeHeadFromDoc } from "@bison-lab/payload-core/theme";
 //#region src/admin/workspace-css.ts
 /**
 * Payload Edit View → mockup workspace. Scoped to the document that
 * opted in (Header first). Theme, Pages, and other collections stay
-* Payload's form. Hex is the approved mockup, not Payload elevation.
+* Payload's form. Surfaces follow Payload elevation so Light / Dark
+* match the admin header toggle.
 *
 * A second kit editor reuses this file by opting into the same view;
 * do not copy Header selectors into that editor.
 */
 const ADMIN_WORKSPACE_CSS = `
 .global-edit--navigation{
-  --bg:#0f1012;--panel:#141518;--panel2:#1b1d22;--panel3:#22252b;--line:#30333b;--line2:#444854;
-  --text:#f6f7f9;--muted:#989daa;--muted2:#727887;--pink:#e60088;--pink2:#ff2da5;--danger:#ff8aa9;
-  --theme-elevation-0:var(--panel);--theme-elevation-50:var(--panel2);--theme-elevation-100:var(--panel3);
-  --theme-elevation-150:var(--line);--theme-elevation-250:var(--line2);--theme-elevation-500:var(--muted);
-  --theme-elevation-800:var(--text);--theme-input-bg:#1d1f24;--theme-bg:var(--bg);--theme-text:var(--text);
-  --brand-primary:var(--pink);
+  --bg:var(--theme-bg,var(--theme-elevation-0));--panel:var(--theme-elevation-50);--panel2:var(--theme-elevation-100);--panel3:var(--theme-elevation-150);
+  --line:var(--theme-elevation-150);--line2:var(--theme-elevation-250);
+  --text:var(--theme-text,var(--theme-elevation-800));--muted:var(--theme-elevation-500);--muted2:var(--theme-elevation-400,var(--theme-elevation-500));
+  --pink:var(--bl-kit-accent,#e60088);--pink2:#ff2da5;--danger:#ff8aa9;
+  --brand-primary:var(--bl-kit-accent,var(--pink));
   --gutter-h:0;--main-gutter-h-left:0;--main-gutter-h-right:0;
   --sidebar-gutter-h-left:0;--sidebar-gutter-h-right:0;
   background:var(--bg);color:var(--text);
@@ -700,14 +700,29 @@ const NavItemsField = ({ field, path, readOnly }) => {
 	const fromPath = getDataByPath?.(path);
 	const items = Array.isArray(fromPath) ? fromPath : Array.isArray(itemsField.value) ? itemsField.value : [];
 	const ctaPath = ctaPathFromItems(path);
-	const cta = useField({ path: ctaPath }).value ?? {};
+	const ctaField = useField({ path: ctaPath });
+	const ctaEnabled = useField({ path: `${ctaPath}.enabled` });
+	const ctaLabel = useField({ path: `${ctaPath}.label` });
+	const ctaPage = useField({ path: `${ctaPath}.page` });
+	const ctaHrefField = useField({ path: `${ctaPath}.href` });
+	const ctaType = useField({ path: `${ctaPath}.type` });
+	const ctaSnapshot = ctaField.value ?? {};
+	const cta = {
+		...ctaSnapshot,
+		enabled: ctaEnabled.value ?? ctaSnapshot.enabled,
+		label: ctaLabel.value ?? ctaSnapshot.label,
+		page: ctaPage.value ?? ctaSnapshot.page,
+		href: ctaHrefField.value ?? ctaSnapshot.href,
+		type: ctaType.value ?? ctaSnapshot.type
+	};
 	const ctaOn = cta.enabled !== false && Boolean(cta.label || cta.page || cta.href || cta.enabled);
 	const { config } = useConfig();
 	const endpoint = `${config.serverURL}${config.routes.api}`;
 	const [selected, setSelected] = useState(0);
 	const [adding, setAdding] = useState(false);
 	const [confirmSwitch, setConfirmSwitch] = useState(false);
-	const [previewDark, setPreviewDark] = useState(true);
+	const { theme, setTheme } = useTheme();
+	const previewDark = theme === "dark";
 	const identityFallback = identityFallbackFromConfig(config);
 	useEffect(() => {
 		if (selected >= items.length) setSelected(Math.max(0, items.length - 1));
@@ -735,6 +750,7 @@ const NavItemsField = ({ field, path, readOnly }) => {
 	const [hoverItem, setHoverItem] = useState(null);
 	const openItem = hoverItem && items.some((row) => row.label === hoverItem && row.blockType === "megaMenu") ? hoverItem : void 0;
 	const openRow = items.find((row) => row.label === openItem && row.blockType === "megaMenu");
+	const openIndex = openRow ? items.indexOf(openRow) : -1;
 	function add(blockType) {
 		const seed = blockType === "navLink" ? emptyLink() : emptyMega();
 		addFieldRow({
@@ -811,7 +827,8 @@ const NavItemsField = ({ field, path, readOnly }) => {
 	}
 	function onPreviewClick(event) {
 		const target = event.target;
-		const label = target.closest("[data-preview-item]")?.getAttribute("data-preview-item") ?? items.find((row) => row.label && target.textContent?.includes(row.label))?.label;
+		if (target.closest("a[href]")) event.preventDefault();
+		const label = target.closest("[data-preview-item]")?.getAttribute("data-preview-item");
 		if (!label) return;
 		const index = items.findIndex((row) => row.label === label);
 		if (index >= 0) {
@@ -837,7 +854,7 @@ const NavItemsField = ({ field, path, readOnly }) => {
 		identityFallback
 	]);
 	const ctaHref = resolveAdminPreviewLink(cta, pages);
-	return /* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsx(KitProvider, { children: /* @__PURE__ */ jsxs("div", {
 		className: "bl-nav-items field-type",
 		children: [
 			/* @__PURE__ */ jsx("style", {
@@ -860,12 +877,7 @@ const NavItemsField = ({ field, path, readOnly }) => {
 						children: [/* @__PURE__ */ jsxs("div", {
 							className: "bl-nav-items__rail-row",
 							children: [
-								/* @__PURE__ */ jsx("span", {
-									className: "bl-nav-items__badge",
-									"data-kind": row.blockType,
-									"aria-hidden": true,
-									children: row.blockType === "megaMenu" ? /* @__PURE__ */ jsx(MegaGlyph, {}) : /* @__PURE__ */ jsx(LinkGlyph, {})
-								}),
+								/* @__PURE__ */ jsx(KindGlyph, { kind: row.blockType === "megaMenu" ? "megaMenu" : "navLink" }),
 								/* @__PURE__ */ jsx("button", {
 									type: "button",
 									className: "bl-nav-items__rail-label",
@@ -885,12 +897,12 @@ const NavItemsField = ({ field, path, readOnly }) => {
 							children: [/* @__PURE__ */ jsxs(TypeCards, {
 								compact: true,
 								children: [/* @__PURE__ */ jsx(TypeCard, {
-									icon: /* @__PURE__ */ jsx(LinkGlyph, {}),
+									icon: /* @__PURE__ */ jsx(KindGlyph, { kind: "navLink" }),
 									label: "Link",
 									active: row.blockType === "navLink",
 									onClick: () => requestType("navLink")
 								}), /* @__PURE__ */ jsx(TypeCard, {
-									icon: /* @__PURE__ */ jsx(MegaGlyph, {}),
+									icon: /* @__PURE__ */ jsx(KindGlyph, { kind: "megaMenu" }),
 									label: "Mega",
 									active: row.blockType === "megaMenu",
 									onClick: () => requestType("megaMenu")
@@ -902,8 +914,8 @@ const NavItemsField = ({ field, path, readOnly }) => {
 							})]
 						}) : null]
 					}, String(row.id ?? index)))
-				}), readOnly ? null : /* @__PURE__ */ jsx("button", {
-					type: "button",
+				}), readOnly ? null : /* @__PURE__ */ jsx(Button, {
+					variant: "outline",
 					className: "bl-nav-items__add",
 					onClick: () => setAdding(true),
 					children: "Add item"
@@ -933,9 +945,9 @@ const NavItemsField = ({ field, path, readOnly }) => {
 						if (next instanceof Node && event.currentTarget.contains(next)) return;
 						setHoverItem(null);
 					},
-					children: [/* @__PURE__ */ jsx("div", {
+					children: [/* @__PURE__ */ jsxs("div", {
 						className: "bl-nav-items__preview",
-						children: /* @__PURE__ */ jsx(PreviewNav, {
+						children: [/* @__PURE__ */ jsx(Kicker, { children: "This is just a preview" }), /* @__PURE__ */ jsx(PreviewNav, {
 							items: items.filter((row) => row.label).map((row) => {
 								const mapped = previewItems.find((item) => item.label === row.label);
 								return {
@@ -946,10 +958,13 @@ const NavItemsField = ({ field, path, readOnly }) => {
 								};
 							}),
 							lockup,
-							onLockupError: () => setLockup(null),
+							onLockupError: () => {
+								const next = lockupSrc(identityFallback?.lockup, config.serverURL);
+								setLockup((current) => current?.url === next?.url ? null : next);
+							},
 							actions: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(PreviewThemeToggle, {
 								dark: previewDark,
-								onToggle: () => setPreviewDark((next) => !next)
+								onToggle: () => setTheme(previewDark ? "light" : "dark")
 							}), ctaOn && ctaHref && cta.label ? /* @__PURE__ */ jsx("a", {
 								href: ctaHref,
 								className: "bl-nav-items__preview-cta",
@@ -957,12 +972,14 @@ const NavItemsField = ({ field, path, readOnly }) => {
 							}) : null] }),
 							openItem,
 							onItemEnter: (label) => setHoverItem(label)
-						})
+						})]
 					}), openRow ? /* @__PURE__ */ jsx("div", {
 						className: "bl-nav-items__preview-stage",
 						"data-testid": "nav-items-preview-mega",
 						onMouseEnter: () => openItem && setHoverItem(openItem),
 						children: /* @__PURE__ */ jsx(PreviewMega, {
+							path,
+							index: openIndex,
 							row: openRow,
 							pages
 						})
@@ -978,37 +995,22 @@ const NavItemsField = ({ field, path, readOnly }) => {
 					children: "Add a link or a mega menu to start the header."
 				}) : null
 			] }),
-			adding ? /* @__PURE__ */ jsx("div", {
-				className: "bl-nav-kit__modal",
-				role: "dialog",
-				"aria-labelledby": "bl-nav-add-title",
-				children: /* @__PURE__ */ jsxs("div", {
-					className: "bl-nav-kit__modal-card",
-					children: [
-						/* @__PURE__ */ jsx("h2", {
-							id: "bl-nav-add-title",
-							children: "Add menu item"
-						}),
-						/* @__PURE__ */ jsxs(TypeCards, { children: [/* @__PURE__ */ jsx(TypeCard, {
-							icon: /* @__PURE__ */ jsx(LinkGlyph, {}),
-							label: "Plain link",
-							description: "A bar item that goes to a page or URL.",
-							onClick: () => add("navLink")
-						}), /* @__PURE__ */ jsx(TypeCard, {
-							icon: /* @__PURE__ */ jsx(MegaGlyph, {}),
-							label: "Mega menu",
-							description: "A dropdown of columns, sections, and an optional footer.",
-							onClick: () => add("megaMenu")
-						})] }),
-						/* @__PURE__ */ jsx("button", {
-							type: "button",
-							className: "bl-nav-items__add",
-							onClick: () => setAdding(false),
-							children: "Cancel"
-						})
-					]
-				})
-			}) : null,
+			/* @__PURE__ */ jsx(Dialog, {
+				open: adding,
+				title: "Add menu item",
+				onCancel: () => setAdding(false),
+				children: /* @__PURE__ */ jsxs(TypeCards, { children: [/* @__PURE__ */ jsx(TypeCard, {
+					icon: /* @__PURE__ */ jsx(KindGlyph, { kind: "navLink" }),
+					label: "Plain link",
+					description: "A bar item that goes to a page or URL.",
+					onClick: () => add("navLink")
+				}), /* @__PURE__ */ jsx(TypeCard, {
+					icon: /* @__PURE__ */ jsx(KindGlyph, { kind: "megaMenu" }),
+					label: "Mega menu",
+					description: "A dropdown of columns, sections, and an optional footer.",
+					onClick: () => add("megaMenu")
+				})] })
+			}),
 			/* @__PURE__ */ jsx(ConfirmDialog, {
 				open: confirmSwitch,
 				title: "Switch to a plain link?",
@@ -1019,7 +1021,7 @@ const NavItemsField = ({ field, path, readOnly }) => {
 				children: "This drops the columns, sections, and footer. The label and destination stay."
 			})
 		]
-	});
+	}) });
 };
 function PreviewThemeToggle({ dark, onToggle }) {
 	return /* @__PURE__ */ jsx("button", {
@@ -1088,10 +1090,7 @@ function PreviewNav({ items, lockup, onLockupError, actions, openItem, onItemEnt
 					"data-href": item.href ?? "",
 					"aria-label": `Preview ${item.label}`,
 					onMouseEnter: () => onItemEnter?.(item.label),
-					children: [item.label, item.content || item.items?.length ? /* @__PURE__ */ jsx("span", {
-						"aria-hidden": true,
-						children: openItem === item.label ? " ⌃" : " ▾"
-					}) : null]
+					children: [item.label, item.content || item.items?.length ? /* @__PURE__ */ jsx(PreviewChevron, {}) : null]
 				}, item.label))
 			}),
 			/* @__PURE__ */ jsx("div", {
@@ -1106,10 +1105,42 @@ const PREVIEW_MAX_WIDTH = {
 	standard: "42rem",
 	wide: "48rem"
 };
-function PreviewMega({ row, pages }) {
+const PREVIEW_TRACKS = {
+	"25": 3,
+	"33": 4,
+	"50": 6,
+	"66": 8,
+	"75": 9,
+	"100": 12
+};
+function previewColumnTrack(width) {
+	const key = String(width ?? "100");
+	return `minmax(0, ${PREVIEW_TRACKS[key] ?? Math.max(1, Number(key) || 1)}fr)`;
+}
+function PreviewMega({ path, index, row, pages }) {
 	const panel = row.panel;
 	const columns = panel?.columns ?? [];
-	const maxWidth = PREVIEW_MAX_WIDTH[panel?.maxWidth ?? "standard"] ?? PREVIEW_MAX_WIDTH.standard;
+	const maxWidthField = useField({ path: `${path}.${index}.panel.maxWidth` });
+	const width0 = useField({ path: `${path}.${index}.panel.columns.0.width` });
+	const width1 = useField({ path: `${path}.${index}.panel.columns.1.width` });
+	const width2 = useField({ path: `${path}.${index}.panel.columns.2.width` });
+	const width3 = useField({ path: `${path}.${index}.panel.columns.3.width` });
+	const divider1 = useField({ path: `${path}.${index}.panel.columns.1.divider` });
+	const divider2 = useField({ path: `${path}.${index}.panel.columns.2.divider` });
+	const divider3 = useField({ path: `${path}.${index}.panel.columns.3.divider` });
+	const liveWidths = [
+		width0.value,
+		width1.value,
+		width2.value,
+		width3.value
+	];
+	const liveDividers = [
+		void 0,
+		divider1.value,
+		divider2.value,
+		divider3.value
+	];
+	const maxWidth = PREVIEW_MAX_WIDTH[maxWidthField.value ?? panel?.maxWidth ?? "standard"] ?? PREVIEW_MAX_WIDTH.standard;
 	const complete = columns.some((column) => (column.sections ?? []).some((section) => (section.links ?? []).some((link) => {
 		const item = link;
 		return Boolean(item.label && resolveAdminPreviewLink(item, pages));
@@ -1124,9 +1155,9 @@ function PreviewMega({ row, pages }) {
 		style: { maxWidth },
 		children: [complete ? /* @__PURE__ */ jsx("div", {
 			className: "bl-nav-items__preview-columns",
-			style: { gridTemplateColumns: columns.map((column) => `${Math.max(1, Number(column.width) || 1)}fr`).join(" ") },
+			style: { gridTemplateColumns: columns.map((column, columnIndex) => previewColumnTrack(liveWidths[columnIndex] ?? column.width)).join(" ") },
 			children: columns.map((column, columnIndex) => /* @__PURE__ */ jsx("div", {
-				className: columnIndex > 0 && column.divider ? "bl-nav-items__preview-col has-border" : "bl-nav-items__preview-col",
+				className: columnIndex > 0 && Boolean(liveDividers[columnIndex] ?? column.divider) ? "bl-nav-items__preview-col has-border" : "bl-nav-items__preview-col",
 				children: (column.sections ?? []).map((section, sectionIndex) => {
 					const links = (section.links ?? []).flatMap((link, linkIndex) => {
 						const item = link;
@@ -1190,45 +1221,37 @@ function HeaderCta({ path, readOnly }) {
 				className: "bl-nav-items__header-cta-head",
 				children: /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", { children: "Header button" }), /* @__PURE__ */ jsx("p", { children: "The pill on the right of the bar." })] })
 			}),
-			/* @__PURE__ */ jsxs("label", {
-				className: "bl-nav-items__check bl-nav-items__header-cta-toggle",
-				children: [/* @__PURE__ */ jsx("input", {
-					type: "checkbox",
-					checked: on,
-					disabled: readOnly,
-					onChange: (event) => setEnabled(event.target.checked)
-				}), "Show Header button"]
+			/* @__PURE__ */ jsx(CheckLabel, {
+				className: "bl-nav-items__header-cta-toggle",
+				checked: on,
+				disabled: readOnly,
+				onCheckedChange: setEnabled,
+				children: "Show Header button"
 			}),
 			on ? /* @__PURE__ */ jsxs(Fragment, { children: [
-				/* @__PURE__ */ jsxs("label", {
-					className: "bl-nav-items__field",
-					children: [/* @__PURE__ */ jsxs("span", { children: [
-						"Label",
-						" ",
-						/* @__PURE__ */ jsx("span", {
-							className: "bl-nav-items__req",
-							"aria-hidden": true,
-							children: "*"
-						})
-					] }), /* @__PURE__ */ jsx("input", {
-						value: label.value ?? "",
-						disabled: readOnly,
-						onChange: (event) => label.setValue(event.target.value)
-					})]
-				}),
+				/* @__PURE__ */ jsxs(Field, { children: [/* @__PURE__ */ jsxs(Label, { children: [
+					"Label",
+					" ",
+					/* @__PURE__ */ jsx("span", {
+						className: "bl-nav-items__req",
+						"aria-hidden": true,
+						children: "*"
+					})
+				] }), /* @__PURE__ */ jsx(Input, {
+					value: label.value ?? "",
+					disabled: readOnly,
+					onChange: (event) => label.setValue(event.target.value)
+				})] }),
 				/* @__PURE__ */ jsx(ComposedLinkField, {
 					path: `${path}._index-0`,
 					parentPath: path,
 					readOnly
 				}),
-				/* @__PURE__ */ jsxs("label", {
-					className: "bl-nav-items__check",
-					children: [/* @__PURE__ */ jsx("input", {
-						type: "checkbox",
-						checked: Boolean(newTab.value),
-						disabled: readOnly,
-						onChange: (event) => newTab.setValue(event.target.checked)
-					}), "Open in a new tab"]
+				/* @__PURE__ */ jsx(CheckLabel, {
+					checked: Boolean(newTab.value),
+					disabled: readOnly,
+					onCheckedChange: (checked) => newTab.setValue(checked),
+					children: "Open in a new tab"
 				})
 			] }) : null,
 			/* @__PURE__ */ jsx(FieldError, {
@@ -1245,27 +1268,21 @@ function ItemBasics({ path, index, readOnly }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "bl-nav-items__basics",
 		children: [
-			/* @__PURE__ */ jsxs("label", {
-				className: "bl-nav-items__field",
-				children: [/* @__PURE__ */ jsx("span", { children: "Label" }), /* @__PURE__ */ jsx("input", {
-					value: label.value ?? "",
-					disabled: readOnly,
-					onChange: (event) => label.setValue(event.target.value)
-				})]
-			}),
+			/* @__PURE__ */ jsxs(Field, { children: [/* @__PURE__ */ jsx(Label, { children: "Label" }), /* @__PURE__ */ jsx(Input, {
+				value: label.value ?? "",
+				disabled: readOnly,
+				onChange: (event) => label.setValue(event.target.value)
+			})] }),
 			/* @__PURE__ */ jsx(ComposedLinkField, {
 				path: `${path}.${index}._index-0`,
 				parentPath: `${path}.${index}`,
 				readOnly
 			}),
-			/* @__PURE__ */ jsxs("label", {
-				className: "bl-nav-items__check",
-				children: [/* @__PURE__ */ jsx("input", {
-					type: "checkbox",
-					checked: Boolean(newTab.value),
-					disabled: readOnly,
-					onChange: (event) => newTab.setValue(event.target.checked)
-				}), "Open in a new tab"]
+			/* @__PURE__ */ jsx(CheckLabel, {
+				checked: Boolean(newTab.value),
+				disabled: readOnly,
+				onCheckedChange: (checked) => newTab.setValue(checked),
+				children: "Open in a new tab"
 			})
 		]
 	});
@@ -1283,25 +1300,27 @@ function MegaEditor({ path, index, panel, readOnly }) {
 				className: "bl-nav-items__builder-head",
 				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h2", { children: "Menu content" }), /* @__PURE__ */ jsx("p", { children: "Set each column’s width here. The header preview is what shows the live layout." })] }), /* @__PURE__ */ jsxs("label", {
 					className: "bl-nav-items__tool",
-					children: ["Panel width", /* @__PURE__ */ jsxs("select", {
-						"aria-label": "Panel width",
+					children: ["Panel width", /* @__PURE__ */ jsxs(Select, {
 						value: maxWidth.value ?? panel.maxWidth ?? "standard",
 						disabled: readOnly,
-						onChange: (event) => maxWidth.setValue(event.target.value),
-						children: [
-							/* @__PURE__ */ jsx("option", {
+						onValueChange: (value) => maxWidth.setValue(value),
+						children: [/* @__PURE__ */ jsx(SelectTrigger, {
+							"aria-label": "Panel width",
+							children: /* @__PURE__ */ jsx(SelectValue, {})
+						}), /* @__PURE__ */ jsxs(SelectContent, { children: [
+							/* @__PURE__ */ jsx(SelectItem, {
 								value: "narrow",
 								children: "Narrow"
 							}),
-							/* @__PURE__ */ jsx("option", {
+							/* @__PURE__ */ jsx(SelectItem, {
 								value: "standard",
 								children: "Standard"
 							}),
-							/* @__PURE__ */ jsx("option", {
+							/* @__PURE__ */ jsx(SelectItem, {
 								value: "wide",
 								children: "Wide"
 							})
-						]
+						] })]
 					})]
 				})]
 			}),
@@ -1318,8 +1337,8 @@ function MegaEditor({ path, index, panel, readOnly }) {
 					columnCount: columns.length
 				}, columnIndex))
 			}),
-			readOnly || columns.length >= 4 ? null : /* @__PURE__ */ jsx("button", {
-				type: "button",
+			readOnly || columns.length >= 4 ? null : /* @__PURE__ */ jsx(Button, {
+				variant: "outline",
 				className: "bl-nav-items__add-column",
 				onClick: () => {
 					addFieldRow({
@@ -1374,13 +1393,10 @@ function MegaEditor({ path, index, panel, readOnly }) {
 								parentPath: `${path}.${index}.panel.footer.overview`,
 								readOnly
 							}),
-							/* @__PURE__ */ jsxs("label", {
-								className: "bl-nav-items__field",
-								children: [/* @__PURE__ */ jsx("span", { children: "Label" }), /* @__PURE__ */ jsx(FooterText, {
-									path: `${path}.${index}.panel.footer.overview.label`,
-									readOnly
-								})]
-							})
+							/* @__PURE__ */ jsxs(Field, { children: [/* @__PURE__ */ jsx(Label, { children: "Label" }), /* @__PURE__ */ jsx(FooterText, {
+								path: `${path}.${index}.panel.footer.overview.label`,
+								readOnly
+							})] })
 						]
 					}), /* @__PURE__ */ jsxs("div", {
 						className: "bl-nav-items__footer-card",
@@ -1391,13 +1407,10 @@ function MegaEditor({ path, index, panel, readOnly }) {
 								parentPath: `${path}.${index}.panel.footer.cta`,
 								readOnly
 							}),
-							/* @__PURE__ */ jsxs("label", {
-								className: "bl-nav-items__field",
-								children: [/* @__PURE__ */ jsx("span", { children: "Label" }), /* @__PURE__ */ jsx(FooterText, {
-									path: `${path}.${index}.panel.footer.cta.label`,
-									readOnly
-								})]
-							})
+							/* @__PURE__ */ jsxs(Field, { children: [/* @__PURE__ */ jsx(Label, { children: "Label" }), /* @__PURE__ */ jsx(FooterText, {
+								path: `${path}.${index}.panel.footer.cta.label`,
+								readOnly
+							})] })
 						]
 					})]
 				})]
@@ -1462,63 +1475,112 @@ function RowMenu({ label, index, count, path, allowRemove = true, onMoved }) {
 		}) : null]
 	});
 }
+function useRowActions({ index, count, path, allowRemove = true, onMoved, readOnly }) {
+	const { moveFieldRow, removeFieldRow } = useForm();
+	if (readOnly) return void 0;
+	const actions = [{
+		label: "Move up",
+		disabled: index === 0,
+		onClick: () => {
+			moveFieldRow({
+				path,
+				moveFromIndex: index,
+				moveToIndex: index - 1
+			});
+			onMoved?.(index - 1);
+		}
+	}, {
+		label: "Move down",
+		disabled: index === count - 1,
+		onClick: () => {
+			moveFieldRow({
+				path,
+				moveFromIndex: index,
+				moveToIndex: index + 1
+			});
+			onMoved?.(index + 1);
+		}
+	}];
+	if (allowRemove) actions.push({
+		label: "Delete",
+		danger: true,
+		onClick: () => removeFieldRow({
+			path,
+			rowIndex: index
+		})
+	});
+	return actions;
+}
 function MegaLinkEditor({ path, arrayPath, index, count, label, readOnly }) {
 	const description = useField({ path: `${path}.description` });
 	const newTab = useField({ path: `${path}.newTab` });
-	const name = label?.trim() || "Untitled";
-	return /* @__PURE__ */ jsxs("div", {
-		className: "bl-nav-items__link",
+	return /* @__PURE__ */ jsxs(Fold, {
+		title: label?.trim() || "Untitled",
+		tone: "dark",
+		actions: useRowActions({
+			index,
+			count,
+			path: arrayPath,
+			readOnly
+		}),
 		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "bl-nav-items__link-head",
-				children: [/* @__PURE__ */ jsx("strong", { children: name }), readOnly ? null : /* @__PURE__ */ jsx(RowMenu, {
-					label: name,
-					index,
-					count,
-					path: arrayPath
-				})]
-			}),
-			/* @__PURE__ */ jsxs("label", {
-				className: "bl-nav-items__field",
-				children: [/* @__PURE__ */ jsx("span", { children: "Label" }), /* @__PURE__ */ jsx(FooterText, {
-					path: `${path}.label`,
-					readOnly
-				})]
-			}),
+			/* @__PURE__ */ jsxs(Field, { children: [/* @__PURE__ */ jsx(Label, { children: "Label" }), /* @__PURE__ */ jsx(FooterText, {
+				path: `${path}.label`,
+				readOnly
+			})] }),
 			/* @__PURE__ */ jsx(ComposedLinkField, {
 				path: `${path}._index-0`,
 				parentPath: path,
 				readOnly
 			}),
-			/* @__PURE__ */ jsxs("label", {
-				className: "bl-nav-items__field",
-				children: [/* @__PURE__ */ jsx("span", { children: "Description" }), /* @__PURE__ */ jsx("textarea", {
-					value: description.value ?? "",
-					disabled: readOnly,
-					rows: 2,
-					onChange: (event) => description.setValue(event.target.value)
-				})]
-			}),
-			/* @__PURE__ */ jsxs("label", {
-				className: "bl-nav-items__check",
-				children: [/* @__PURE__ */ jsx("input", {
-					type: "checkbox",
-					checked: Boolean(newTab.value),
-					disabled: readOnly,
-					onChange: (event) => newTab.setValue(event.target.checked)
-				}), "Open in a new tab"]
+			/* @__PURE__ */ jsxs(Field, { children: [/* @__PURE__ */ jsx(Label, { children: "Description" }), /* @__PURE__ */ jsx(Textarea, {
+				value: description.value ?? "",
+				disabled: readOnly,
+				rows: 2,
+				onChange: (event) => description.setValue(event.target.value)
+			})] }),
+			/* @__PURE__ */ jsx(CheckLabel, {
+				checked: Boolean(newTab.value),
+				disabled: readOnly,
+				onCheckedChange: (checked) => newTab.setValue(checked),
+				children: "Open in a new tab"
 			})
 		]
 	});
 }
 function FooterText({ path, readOnly }) {
 	const field = useField({ path });
-	return /* @__PURE__ */ jsx("input", {
+	return /* @__PURE__ */ jsx(Input, {
 		value: field.value ?? "",
 		disabled: readOnly,
 		onChange: (event) => field.setValue(event.target.value)
 	});
 }
+function PreviewChevron() {
+	return /* @__PURE__ */ jsx("svg", {
+		className: "bl-nav-items__preview-chevron",
+		viewBox: "0 0 24 24",
+		width: "12",
+		height: "12",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": true,
+		children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+	});
+}
+function CheckLabel({ checked, disabled, onCheckedChange, children, className }) {
+	return /* @__PURE__ */ jsxs("label", {
+		className: ["bl-nav-items__check", className].filter(Boolean).join(" "),
+		children: [/* @__PURE__ */ jsx(Checkbox, {
+			checked,
+			disabled,
+			onCheckedChange: (value) => onCheckedChange(value === true)
+		}), children]
+	});
+}
 function ColumnEditor({ path, itemIndex, columnIndex, column, readOnly, columnCount }) {
 	const { addFieldRow } = useForm();
 	const width = useField({ path: `${path}.${itemIndex}.panel.columns.${columnIndex}.width` });
@@ -1527,82 +1589,73 @@ function ColumnEditor({ path, itemIndex, columnIndex, column, readOnly, columnCo
 	const sectionsPath = `${path}.${itemIndex}.panel.columns.${columnIndex}.sections`;
 	const sections = column.sections ?? [];
 	const columnName = `Column ${columnIndex + 1}`;
-	return /* @__PURE__ */ jsxs("section", {
-		className: "bl-nav-items__column",
-		role: "group",
-		"aria-label": columnName,
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "bl-nav-items__column-head",
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "bl-nav-items__column-title",
-				children: [
-					columnName,
-					" ",
-					/* @__PURE__ */ jsxs("span", {
-						className: "bl-nav-items__width-pill",
-						children: [width.value ?? column.width ?? "100", "%"]
-					})
-				]
-			}), readOnly ? null : /* @__PURE__ */ jsx(RowMenu, {
-				label: columnName,
-				index: columnIndex,
-				count: columnCount,
-				path: columnsPath,
-				allowRemove: columnCount > 1
-			})]
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "bl-nav-items__column-body",
-			children: [
-				/* @__PURE__ */ jsxs("div", {
-					className: columnIndex === 0 ? "bl-nav-items__column-settings is-first" : "bl-nav-items__column-settings",
-					children: [/* @__PURE__ */ jsxs("label", { children: ["Width", /* @__PURE__ */ jsx("select", {
-						value: width.value ?? column.width ?? "100",
-						disabled: readOnly,
-						onChange: (event) => width.setValue(event.target.value),
-						children: WIDTHS.map((option) => /* @__PURE__ */ jsxs("option", {
-							value: option,
-							children: [option, "%"]
-						}, option))
-					})] }), columnIndex > 0 ? /* @__PURE__ */ jsxs("label", {
-						className: "bl-nav-items__check",
-						children: [/* @__PURE__ */ jsx("input", {
-							type: "checkbox",
-							checked: Boolean(divider.value ?? column.divider),
-							disabled: readOnly,
-							onChange: (event) => divider.setValue(event.target.checked)
-						}), "Draw a line on the left"]
-					}) : null]
-				}),
-				sections.map((section, sectionIndex) => /* @__PURE__ */ jsx(SectionEditor, {
-					path,
-					itemIndex,
-					columnIndex,
-					sectionIndex,
-					section,
-					readOnly,
-					sectionCount: sections.length
-				}, sectionIndex)),
-				readOnly || sections.length >= 8 ? null : /* @__PURE__ */ jsx("button", {
-					type: "button",
-					className: "bl-nav-items__add-section",
-					onClick: () => addFieldRow({
-						path: sectionsPath,
-						schemaPath: sectionsPath,
-						subFieldState: {
-							display: {
-								value: "list",
-								valid: true
-							},
-							hideDescriptionsOnMobile: {
-								value: true,
-								valid: true
-							}
+	const actions = useRowActions({
+		index: columnIndex,
+		count: columnCount,
+		path: columnsPath,
+		allowRemove: columnCount > 1,
+		readOnly
+	});
+	return /* @__PURE__ */ jsx(Fold, {
+		title: columnName,
+		tone: "light",
+		badge: `${width.value ?? column.width ?? "100"}%`,
+		meta: (open) => open ? null : /* @__PURE__ */ jsxs("small", { children: [
+			sections.length,
+			" ",
+			sections.length === 1 ? "section" : "sections"
+		] }),
+		actions,
+		children: /* @__PURE__ */ jsxs(Stack, { children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "bl-nav-items__column-settings",
+				children: [/* @__PURE__ */ jsxs(Field, { children: [/* @__PURE__ */ jsx(Label, { children: "Width" }), /* @__PURE__ */ jsxs(Select, {
+					value: width.value ?? column.width ?? "100",
+					disabled: readOnly,
+					onValueChange: (value) => width.setValue(value),
+					children: [/* @__PURE__ */ jsx(SelectTrigger, {
+						"aria-label": "Width",
+						children: /* @__PURE__ */ jsx(SelectValue, {})
+					}), /* @__PURE__ */ jsx(SelectContent, { children: WIDTHS.map((option) => /* @__PURE__ */ jsxs(SelectItem, {
+						value: option,
+						children: [option, "%"]
+					}, option)) })]
+				})] }), columnIndex > 0 ? /* @__PURE__ */ jsx(CheckLabel, {
+					checked: Boolean(divider.value ?? column.divider),
+					disabled: readOnly,
+					onCheckedChange: (checked) => divider.setValue(checked),
+					children: "Draw a line on the left"
+				}) : null]
+			}),
+			sections.map((section, sectionIndex) => /* @__PURE__ */ jsx(SectionEditor, {
+				path,
+				itemIndex,
+				columnIndex,
+				sectionIndex,
+				section,
+				readOnly,
+				sectionCount: sections.length
+			}, sectionIndex)),
+			readOnly || sections.length >= 8 ? null : /* @__PURE__ */ jsx(Button, {
+				variant: "outline",
+				className: "bl-nav-items__add-section",
+				onClick: () => addFieldRow({
+					path: sectionsPath,
+					schemaPath: sectionsPath,
+					subFieldState: {
+						display: {
+							value: "list",
+							valid: true
+						},
+						hideDescriptionsOnMobile: {
+							value: true,
+							valid: true
 						}
-					}),
-					children: "＋ Add section to this column"
-				})
-			]
-		})]
+					}
+				}),
+				children: "＋ Add section to this column"
+			})
+		] })
 	});
 }
 function SectionEditor({ path, itemIndex, columnIndex, sectionIndex, section, readOnly, sectionCount }) {
@@ -1614,34 +1667,33 @@ function SectionEditor({ path, itemIndex, columnIndex, sectionIndex, section, re
 	const hideMobile = useField({ path: `${base}.hideDescriptionsOnMobile` });
 	const links = section.links ?? [];
 	const featured = (display.value ?? section.display) === "featured";
-	const sectionName = eyebrow.value || section.eyebrow || "Untitled section";
-	return /* @__PURE__ */ jsxs("div", {
-		className: "bl-nav-items__section",
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "bl-nav-items__section-head",
-				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("strong", { children: sectionName }), /* @__PURE__ */ jsx("small", { children: featured ? "featured" : "list" })] }), readOnly ? null : /* @__PURE__ */ jsx(RowMenu, {
-					label: sectionName,
-					index: sectionIndex,
-					count: sectionCount,
-					path: sectionsPath
-				})]
-			}),
+	return /* @__PURE__ */ jsx(Fold, {
+		title: eyebrow.value || section.eyebrow || "Untitled section",
+		tone: "dark",
+		meta: (open) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("small", { children: featured ? "featured" : "list" }), open ? null : /* @__PURE__ */ jsxs("small", { children: [
+			links.length,
+			" ",
+			links.length === 1 ? "link" : "links"
+		] })] }),
+		actions: useRowActions({
+			index: sectionIndex,
+			count: sectionCount,
+			path: sectionsPath,
+			readOnly
+		}),
+		children: /* @__PURE__ */ jsxs(Stack, { children: [
 			/* @__PURE__ */ jsxs("div", {
 				className: "bl-nav-items__section-settings",
 				children: [
-					/* @__PURE__ */ jsxs("label", {
-						className: "bl-nav-items__field",
-						children: [/* @__PURE__ */ jsx("span", { children: "Eyebrow" }), /* @__PURE__ */ jsx("input", {
-							value: eyebrow.value ?? section.eyebrow ?? "",
-							disabled: readOnly,
-							placeholder: "Optional heading",
-							onChange: (event) => eyebrow.setValue(event.target.value)
-						})]
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						className: "bl-nav-items__field",
-						children: [/* @__PURE__ */ jsx("span", { children: "Display" }), /* @__PURE__ */ jsxs("div", {
+					/* @__PURE__ */ jsxs(Field, { children: [/* @__PURE__ */ jsx(Label, { children: "Eyebrow" }), /* @__PURE__ */ jsx(Input, {
+						value: eyebrow.value ?? section.eyebrow ?? "",
+						disabled: readOnly,
+						placeholder: "Optional heading",
+						onChange: (event) => eyebrow.setValue(event.target.value)
+					})] }),
+					/* @__PURE__ */ jsxs(Field, {
+						as: "div",
+						children: [/* @__PURE__ */ jsx(Label, { children: "Display" }), /* @__PURE__ */ jsxs("div", {
 							className: "bl-nav-items__seg",
 							children: [/* @__PURE__ */ jsx("button", {
 								type: "button",
@@ -1658,56 +1710,50 @@ function SectionEditor({ path, itemIndex, columnIndex, sectionIndex, section, re
 							})]
 						})]
 					}),
-					/* @__PURE__ */ jsxs("label", {
-						className: "bl-nav-items__check",
-						children: [/* @__PURE__ */ jsx("input", {
-							type: "checkbox",
-							checked: (hideMobile.value ?? section.hideDescriptionsOnMobile) !== false,
-							disabled: readOnly,
-							onChange: (event) => hideMobile.setValue(event.target.checked)
-						}), "Hide descriptions on mobile"]
+					/* @__PURE__ */ jsx(CheckLabel, {
+						checked: (hideMobile.value ?? section.hideDescriptionsOnMobile) !== false,
+						disabled: readOnly,
+						onCheckedChange: (checked) => hideMobile.setValue(checked),
+						children: "Hide descriptions on mobile"
 					})
 				]
 			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "bl-nav-items__links",
-				children: [links.map((link, linkIndex) => /* @__PURE__ */ jsx(MegaLinkEditor, {
-					path: `${base}.links.${linkIndex}`,
-					arrayPath: `${base}.links`,
-					index: linkIndex,
-					count: links.length,
-					label: link.label,
-					readOnly
-				}, linkIndex)), readOnly ? null : /* @__PURE__ */ jsx("button", {
-					type: "button",
-					className: "bl-nav-items__inline-add",
-					onClick: () => addFieldRow({
-						path: `${base}.links`,
-						schemaPath: `${base}.links`,
-						subFieldState: {
-							label: {
-								value: "New link",
-								valid: true
-							},
-							type: {
-								value: "page",
-								valid: true
-							}
+			links.map((link, linkIndex) => /* @__PURE__ */ jsx(MegaLinkEditor, {
+				path: `${base}.links.${linkIndex}`,
+				arrayPath: `${base}.links`,
+				index: linkIndex,
+				count: links.length,
+				label: link.label,
+				readOnly
+			}, linkIndex)),
+			readOnly ? null : /* @__PURE__ */ jsx(Button, {
+				variant: "outline",
+				className: "bl-nav-items__inline-add",
+				onClick: () => addFieldRow({
+					path: `${base}.links`,
+					schemaPath: `${base}.links`,
+					subFieldState: {
+						label: {
+							value: "New link",
+							valid: true
+						},
+						type: {
+							value: "page",
+							valid: true
 						}
-					}),
-					children: "＋ Add link"
-				})]
+					}
+				}),
+				children: "＋ Add link"
 			})
-		]
+		] })
 	});
 }
 const CSS = `
-.bl-nav-items{--bg:#0f1012;--panel:#141518;--panel2:#1b1d22;--line:#30333b;--line2:#444854;--text:#f6f7f9;--muted:#989daa;--pink:#e60088;display:grid;grid-template-columns:300px minmax(0,1fr);grid-template-rows:minmax(0,1fr);min-height:0;background:var(--bg);color:var(--text);font:14px/1.45 Inter,ui-sans-serif,system-ui,sans-serif}
-.bl-nav-items button,.bl-nav-items input,.bl-nav-items select,.bl-nav-items textarea{font:inherit;color:inherit}
-.bl-workspace__rail{border-right:1px solid var(--line);background:#121316;min-width:0;min-height:0;height:100%;display:flex;flex-direction:column;overflow:hidden}
-.bl-nav-items__kicker,.bl-workspace__kicker{margin:0;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:800}
+.bl-nav-items{--bg:var(--theme-bg,var(--theme-elevation-0,#fff));--panel:var(--theme-elevation-50,#f4f4f5);--panel2:var(--theme-elevation-100,#e4e4e7);--line:var(--theme-elevation-150,#e4e4e7);--line2:var(--theme-elevation-250,#d4d4d8);--text:var(--theme-text,var(--theme-elevation-800,#18181b));--muted:var(--theme-elevation-500,#71717a);--pink:var(--bl-kit-accent,#e60088);display:grid;grid-template-columns:300px minmax(0,1fr);grid-template-rows:minmax(0,1fr);min-height:0;background:var(--bg);color:var(--text);font:14px/1.45 Inter,ui-sans-serif,system-ui,sans-serif}
+.bl-nav-items button:not([class*="bl-nav-kit"]),.bl-nav-items input:not([class*="bl-nav-kit"]),.bl-nav-items select:not([class*="bl-nav-kit"]),.bl-nav-items textarea:not([class*="bl-nav-kit"]){font:inherit;color:inherit}
+.bl-workspace__rail{border-right:1px solid var(--line);background:var(--theme-elevation-50,var(--panel));min-width:0;min-height:0;height:100%;display:flex;flex-direction:column;overflow:hidden}
 .bl-nav-items__rail-body{padding:12px;flex:1;min-height:0;overflow:auto}
-.bl-workspace__rail-slot{flex:none;min-height:0;max-height:100%;overflow:auto;border-top:1px solid var(--line);background:#101115;padding:14px 12px 16px}
+.bl-workspace__rail-slot{flex:none;min-height:0;max-height:100%;overflow:auto;border-top:1px solid var(--line);background:var(--theme-elevation-0,var(--bg));padding:14px 12px 16px}
 .bl-nav-items__header-cta{margin:0;padding:0;border:0;min-width:0}
 .bl-nav-items__header-cta-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}
 .bl-nav-items__header-cta-head h3{margin:0;font-size:14px}
@@ -1715,22 +1761,20 @@ const CSS = `
 .bl-nav-items__req{color:var(--pink)}
 .bl-nav-items__list{list-style:none;margin:0;padding:0}
 .bl-nav-items__list li{border:1px solid transparent;border-radius:9px;margin-bottom:7px}
-.bl-nav-items__list li[data-selected="true"]{border-color:#414550;background:#1b1d22}
+.bl-nav-items__list li[data-selected="true"]{border-color:var(--line2);background:var(--theme-elevation-100,var(--panel2))}
 .bl-nav-items__rail-row{display:grid;grid-template-columns:20px 1fr auto;gap:8px;align-items:center;padding:6px 8px}
 .bl-nav-items__rail-label{border:0;background:transparent;text-align:left;font:inherit;font-weight:650;color:inherit;cursor:pointer;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-.bl-nav-items__badge{width:28px;height:28px;display:grid;place-items:center;border-radius:7px;background:#292c33;color:#c9ccd4}
-.bl-nav-items__badge[data-kind="megaMenu"]{background:#32142a;color:#ff91ce}
+.bl-nav-items__badge{width:28px;height:28px;display:grid;place-items:center;border-radius:7px;background:var(--theme-elevation-150,var(--line));color:var(--theme-elevation-800,var(--text))}
+.bl-nav-items__badge[data-kind="megaMenu"]{background:color-mix(in srgb,var(--pink) 22%,var(--theme-elevation-0,var(--bg)));color:var(--pink)}
 .bl-nav-items__rail-edit{display:block;border-top:1px solid var(--line);padding:10px}
-.bl-nav-items__add,.bl-nav-items__add-section,.bl-nav-items__add-column,.bl-nav-items__inline-add{width:100%;border:1px dashed #3a3e47;background:transparent;border-radius:9px;padding:10px;color:#c6cad2;cursor:pointer}
-.bl-nav-items__add:hover,.bl-nav-items__add-section:hover,.bl-nav-items__add-column:hover,.bl-nav-items__inline-add:hover{border-color:var(--pink);color:#fff}
+.bl-nav-items__add,.bl-nav-items__add-section,.bl-nav-items__add-column,.bl-nav-items__inline-add{width:100%}
 .bl-nav-items__add-column{margin-top:12px}
-.bl-nav-items__inline-add{border-width:1px 0 0;border-radius:0;text-align:left}
 .bl-workspace__canvas{min-width:0;min-height:0;height:100%;overflow:auto;padding:0 28px 44px;max-width:1250px;margin:0 auto;width:100%}
-.bl-workspace__main-head{padding:18px 0 14px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:flex-start}
+.bl-workspace__main-head{padding:18px 0 14px;display:flex;justify-content:space-between;align-items:flex-start}
 .bl-workspace__main-head h1{font-size:20px;margin:2px 0 4px}
 .bl-workspace__main-head p{margin:0;color:var(--muted)}
 .bl-nav-items__preview-block{position:sticky;top:0;z-index:20;background:transparent;padding:0;overflow:visible}
-.bl-nav-items__preview{padding:12px 0 0}
+.bl-nav-items__preview{padding:16px;display:flex;flex-direction:column;gap:16px;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:visible}
 .bl-nav-items__preview-theme{border:0;background:transparent;color:inherit;width:36px;height:36px;display:grid;place-items:center;border-radius:8px;cursor:pointer;flex:none}
 .bl-nav-items__preview-theme:hover{background:#24242b}
 .bl-nav-items__preview-block[data-theme="dark"] .bl-nav-items__preview-logo img{filter:invert(1) hue-rotate(180deg)}
@@ -1756,72 +1800,54 @@ const CSS = `
 .bl-nav-items__preview-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:#1f2126;border-top:1px solid var(--line)}
 .bl-nav-items__preview-footer a{color:var(--pink2,#ff2da5);text-decoration:underline;text-underline-offset:2px;font-weight:650;font-size:13px}
 .bl-nav-items__preview-footer .cta{background:var(--pink);padding:8px 12px;border-radius:8px;color:#fff;font-weight:650;font-size:13px}
-.bl-nav-items__preview-nav{display:flex;align-items:center;gap:24px;padding:12px 16px 12px 20px;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:rgba(20,21,24,.85);box-shadow:0 10px 28px rgba(0,0,0,.28)}
-.bl-nav-items__preview-logo{flex:1;min-width:0;display:flex;align-items:center}
+.bl-nav-items__preview-nav{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:24px;padding:12px 16px 12px 20px;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:rgba(20,21,24,.85)}
+.bl-nav-items__preview-logo{justify-self:start;min-width:0;display:flex;align-items:center}
 .bl-nav-items__preview-logo img{height:20px;width:auto;display:block}
-.bl-nav-items__preview-links{display:flex;align-items:center;gap:4px;flex:none}
-.bl-nav-items__preview-link{color:#d7dae0;background:none;border:0;padding:8px 12px;border-radius:8px;font-weight:550;cursor:pointer;white-space:nowrap}
+.bl-nav-items__preview-links{display:flex;align-items:center;justify-content:center;gap:4px;min-width:0}
+.bl-nav-items__preview-link{display:inline-flex;align-items:center;gap:4px;color:#d7dae0;background:none;border:0;padding:8px 12px;border-radius:8px;font-weight:550;cursor:pointer;white-space:nowrap}
 .bl-nav-items__preview-link.is-open{background:#24242b}
-.bl-nav-items__preview-actions{flex:1;min-width:0;display:flex;align-items:center;justify-content:flex-end;gap:8px}
+.bl-nav-items__preview-chevron{flex:none;width:12px;height:12px;transition:transform .2s}
+.bl-nav-items__preview-link.is-open .bl-nav-items__preview-chevron{transform:rotate(180deg)}
+.bl-nav-items__preview-actions{justify-self:end;display:flex;align-items:center;justify-content:flex-end;gap:8px}
 .bl-nav-items__preview-cta{flex:none;background:var(--pink);border:0;border-radius:8px;color:#fff;font-weight:650;font-size:13px;padding:8px 12px;white-space:nowrap;text-decoration:none}
 .bl-nav-items__builder-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:26px 0 10px}
 .bl-nav-items__builder-head h2{font-size:18px;margin:0}
 .bl-nav-items__builder-head p{margin:3px 0 0;color:var(--muted);font-size:13px}
 .bl-nav-items__builder-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
 .bl-nav-items__tool{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px}
-.bl-nav-items__tool select{width:auto;min-width:160px;padding:8px 30px 8px 10px;background:#1d1f24;border:1px solid #3a3d46;border-radius:8px;color:#fff}
+.bl-nav-items__tool .bl-nav-kit__select-trigger{width:auto;min-width:160px}
 .bl-nav-items__columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
 .bl-nav-items__columns:has(> :only-child){grid-template-columns:minmax(0,1fr)}
-.bl-nav-items__column{border:1px solid var(--line2);background:var(--panel);border-radius:12px;overflow:visible;margin:0;min-width:0;padding:0}
-.bl-nav-items__column-head{padding:12px 14px;background:#1b1d22;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px}
-.bl-nav-items__column-title{display:flex;align-items:center;gap:8px;font-weight:700}
-.bl-nav-items__width-pill{font-size:11px;color:#c2c5cc;background:#292c33;border-radius:999px;padding:3px 8px}
-.bl-nav-items__column-body{padding:12px}
-.bl-nav-items__column-settings{display:grid;grid-template-columns:1fr 1fr;column-gap:10px;row-gap:7px;margin-bottom:12px;padding:10px;background:#101115;border:1px solid var(--line);border-radius:9px;align-items:center}
-.bl-nav-items__column-settings.is-first{grid-template-columns:1fr}
-.bl-nav-items__column-settings > label:not(.bl-nav-items__check){display:block;font-size:12px;font-weight:700}
-.bl-nav-items__column-settings select{width:100%;background:#1d1f24;border:1px solid #3a3d46;border-radius:8px;color:#fff;padding:10px 11px;margin-top:7px}
-.bl-nav-items__field{display:block;font-size:12px;font-weight:700;margin:0 0 13px}
-.bl-nav-items__field > span{display:block;margin-bottom:7px}
-.bl-nav-items__field input,.bl-nav-items__field select,.bl-nav-items__field textarea{width:100%;font:inherit;font-weight:400;padding:10px 11px;border:1px solid #3a3d46;border-radius:8px;background:#1d1f24;color:#fff;outline:none}
-.bl-nav-items__check{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:500;color:#d8dbe1}
+.bl-nav-items__column-settings{display:grid;grid-template-columns:1fr;gap:10px;padding:10px;background:var(--theme-elevation-50,var(--panel));border:1px solid var(--line);border-radius:9px;align-items:center}
+.bl-nav-items__column-settings .bl-nav-kit__field{margin:0}
+.bl-nav-items__column-settings .bl-nav-kit__select-trigger{width:100%}
+.bl-nav-items__check{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:500;color:var(--text)}
 .bl-nav-items__header-cta .bl-nav-items__check{gap:16px}
 .bl-nav-items__header-cta-toggle{margin-bottom:20px}
-.bl-nav-items__check input{accent-color:var(--pink);margin:0;flex:none}
 .bl-nav-items__seg{display:grid;grid-template-columns:1fr 1fr;gap:6px}
-.bl-nav-items__seg button{border:1px solid var(--line2);background:#15171b;border-radius:7px;padding:8px 6px;font-size:12px;color:inherit;cursor:pointer}
-.bl-nav-items__seg button.is-active{border-color:var(--pink);background:#261722}
-.bl-nav-items__section{border:1px solid var(--line);background:#111216;border-radius:10px;margin-bottom:10px}
-.bl-nav-items__section-head{padding:11px 12px;display:flex;justify-content:space-between;align-items:center;gap:8px;border-bottom:1px solid var(--line)}
-.bl-nav-items__section-head strong{font-size:13px}
-.bl-nav-items__section-head small{color:var(--muted);margin-left:6px}
-.bl-nav-items__section-settings{padding:10px 12px;border-bottom:1px solid var(--line);background:#0e0f13}
-.bl-nav-items__links{padding:8px}
-.bl-nav-items__link{border:1px solid var(--line);background:#111216;border-radius:7px;padding:0 10px 12px;margin:.5rem 0}
-.bl-nav-items__link-head{margin:0 -10px 8px;padding:11px 12px;display:flex;justify-content:space-between;align-items:center;gap:8px;border-bottom:1px solid var(--line)}
-.bl-nav-items__link-head strong{font-size:13px}
-.bl-nav-items__footer,.bl-nav-items__panel{margin-top:18px;border:1px solid var(--line2);background:#141518;border-radius:12px;overflow:hidden}
+.bl-nav-items__seg button{border:1px solid var(--line2);background:var(--theme-elevation-50,var(--panel));border-radius:7px;padding:8px 6px;font-size:12px;color:inherit;cursor:pointer}
+.bl-nav-items__seg button.is-active{border-color:var(--pink);background:color-mix(in srgb,var(--pink) 16%,var(--theme-elevation-0,var(--bg)))}
+.bl-nav-items__section-settings{padding:10px 12px;border:1px solid var(--line);background:var(--theme-elevation-50,var(--panel));border-radius:9px}
+.bl-nav-items__footer,.bl-nav-items__panel{margin-top:18px;border:1px solid var(--line2);background:var(--theme-elevation-50,var(--panel));border-radius:12px;overflow:hidden}
 .bl-nav-items__footer-head,.bl-nav-items__panel-head{display:flex;align-items:flex-start;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line);gap:12px}
 .bl-nav-items__footer-head h3,.bl-nav-items__panel-head h3{margin:0;font-size:16px}
 .bl-nav-items__footer-head p,.bl-nav-items__panel-head p{margin:3px 0 0;color:var(--muted);font-size:12px}
 .bl-nav-items__footer-body,.bl-nav-items__panel-body{padding:14px 16px}
 .bl-nav-items__footer-body{display:grid;grid-template-columns:1fr 1fr;gap:14px}
-.bl-nav-items__footer-card{background:#101115;border:1px solid var(--line);border-radius:10px;padding:14px}
+.bl-nav-items__footer-card{background:var(--theme-elevation-0,var(--bg));border:1px solid var(--line);border-radius:10px;padding:14px}
 .bl-nav-items__footer-card h4{margin:0 0 12px;font-size:14px}
 .bl-nav-items__panel-body{max-width:480px}
 .bl-nav-items__empty{color:var(--muted);font-size:13px;padding:28px;text-align:center}
 .bl-nav-items__menu{position:relative}
 .bl-nav-items__menu > button{border:0;background:transparent;color:inherit;cursor:pointer}
-.bl-nav-items__menu-pop{position:absolute;right:0;top:34px;z-index:12;min-width:140px;padding:4px;border:1px solid var(--line2);border-radius:8px;background:#1b1d22}
-.bl-nav-items__menu-pop button{display:block;width:100%;text-align:left;border:0;background:transparent;padding:7px 8px;border-radius:6px;color:#d8dbe1;cursor:pointer}
-.bl-nav-items .field-label,.bl-nav-items .field-label__label{display:block !important;font-size:12px;font-weight:700;margin:0 0 7px;color:var(--text)}
+.bl-nav-items__menu-pop{position:absolute;right:0;top:34px;z-index:12;min-width:140px;padding:4px;border:1px solid var(--line2);border-radius:8px;background:var(--theme-elevation-50,var(--panel))}
+.bl-nav-items__menu-pop button{display:block;width:100%;text-align:left;border:0;background:transparent;padding:7px 8px;border-radius:6px;color:var(--text);cursor:pointer}
+.bl-nav-items .field-label,.bl-nav-items .field-label__label{display:block !important;margin:0;padding:0;font:12px/1.2 Inter,ui-sans-serif,system-ui,sans-serif;font-weight:700;color:inherit}
 .bl-nav-items .field-description,.bl-nav-items .field__description{display:none !important}
-.bl-nav-items .bl-link-field{margin:0 0 13px}
-.bl-nav-items .bl-link-field__control{background:#1d1f24;border:1px solid #3a3d46;border-radius:8px;min-height:auto;padding:8px 10px;color:#fff;box-shadow:none}
-.bl-nav-items .bl-link-field__kind{background:#292c33;color:#c9ccd4;border-radius:999px;padding:3px 7px}
+.bl-nav-items .bl-link-field{display:flex;flex-direction:column;gap:8px;margin:0 0 16px}
+.bl-nav-items .bl-link-field__control{background:var(--theme-input-bg,var(--theme-elevation-0,#fff));border:1px solid var(--theme-elevation-250,var(--line2));border-radius:8px;min-height:auto;padding:8px 10px;color:var(--text);box-shadow:none}
+.bl-nav-items .bl-link-field__kind{background:var(--theme-elevation-150,var(--line));color:var(--theme-elevation-800,var(--text));border-radius:999px;padding:3px 7px}
 .bl-nav-items .bl-link-field__kind:first-letter{text-transform:uppercase}
-.bl-nav-kit__modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:rgba(0,0,0,.62)}
-.bl-nav-kit__modal-card{width:min(36rem,calc(100vw - 2rem));background:#15161a;border:1px solid #343741;border-radius:14px;padding:1.25rem;color:var(--text)}
 @media(max-width:1280px){.bl-nav-items{grid-template-columns:250px minmax(0,1fr)}}
 @media(max-width:850px){.bl-nav-items{grid-template-columns:1fr}.bl-nav-items__footer-body,.bl-nav-items__columns,.bl-nav-items__columns:has(> :only-child){grid-template-columns:minmax(0,1fr) !important}}
 `;