@bison-lab/payload-blocks 3.21.0 → 3.22.0

package/dist/admin.mjs

@@ -1,12 +1,114 @@
 "use client";
 import "./link-32261jXB.mjs";
-import { a as linkTypeOf, n as headerItemsFromBlocks, o as resolveAdminPreviewLink } from "./header-CV7K-3yB.mjs";
+import { a as linkTypeOf, n as headerItemsFromBlocks, o as resolveAdminPreviewLink } from "./header-CTMSB4C0.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { FloatingNavBlock } from "@bison-lab/ui";
-import { ArrayField, 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, useTranslation } from "@payloadcms/ui";
 import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
-import { ConfirmDialog, LinkGlyph, MegaGlyph, TypeCard, TypeCards } from "@bison-lab/admin-ui";
-import { themeHeadFromDoc } from "@bison-lab/payload-core/theme";
+import { Canvas, ConfirmDialog, ItemRail, LinkGlyph, MainHead, MegaGlyph, RailSlot, 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.
+*
+* 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);
+  --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);
+  display:flex;flex-direction:column;flex:1;min-height:0;height:auto;
+  overflow:hidden;
+}
+/* Own the viewport with flex. The edit view already sits under
+   AppHeader inside the wrap; a viewport height here pushes the
+   Header button past the fold. */
+.template-default:has(.global-edit--navigation){
+  height:100dvh;max-height:100dvh;min-height:0;overflow:hidden;
+}
+.template-default:has(.global-edit--navigation) .template-default__wrap{
+  display:flex;flex-direction:column;min-height:0;height:100%;overflow:hidden;
+}
+.template-default:has(.global-edit--navigation) .app-header{
+  flex:none;
+}
+.global-edit--navigation form,.global-edit--navigation .gutter--left,.global-edit--navigation .gutter--right{
+  padding:0;margin:0;
+}
+.global-edit--navigation form{
+  flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;height:100%;
+}
+/* Payload's main pane is content-sized. Stretch it — and only the kit
+   field — so the rail and canvas reach the bottom of the browser.
+   Do not flex every .field-type: hidden cta/bar siblings would steal
+   height, and height:100% beats a viewport min-height on .bl-nav-items. */
+.global-edit--navigation .doc-controls + div,
+.global-edit--navigation .doc-controls + div > div,
+.global-edit--navigation .document-fields,
+.global-edit--navigation .document-fields__main,
+.global-edit--navigation .document-fields__edit,
+.global-edit--navigation .document-fields__fields,
+.global-edit--navigation .render-fields:has(.bl-nav-items),
+.global-edit--navigation .group-field:has(.bl-nav-items),
+.global-edit--navigation .group-field:has(.bl-nav-items) .group-field__wrap{
+  display:flex;flex-direction:column;flex:1;min-height:0;height:100%;
+  overflow:hidden;padding:0;margin:0;border:0;max-width:none;width:100%;
+}
+.global-edit--navigation .render-fields:has(.bl-nav-items){gap:0}
+.global-edit--navigation .field-label,.global-edit--navigation .field-label__label,
+.global-edit--navigation .field-description,.global-edit--navigation .field__description,
+.global-edit--navigation .group-field__title,.global-edit--navigation .tabs-field{display:none}
+.global-edit--navigation .bl-nav-items .field-label,.global-edit--navigation .bl-nav-items .field-label__label{display:block}
+.global-edit--navigation .live-preview,.global-edit--navigation .live-preview-window,
+.global-edit--navigation [class*="LivePreview"]{display:none !important}
+.global-edit--navigation .doc-header{
+  background:var(--bg);border-bottom:1px solid var(--line);padding:10px 24px;min-height:0;flex:none;
+}
+.global-edit--navigation .doc-controls{
+  background:var(--bg);border-bottom:1px solid var(--line);padding:12px;min-height:0;
+  flex:none;position:sticky;top:0;z-index:6;
+}
+.global-edit--navigation .doc-controls:before,.global-edit--navigation .doc-controls:after{
+  display:none;content:none;backdrop-filter:none;
+}
+.global-edit--navigation .doc-controls__wrapper{height:auto;min-height:0}
+.global-edit--navigation .doc-controls__content{padding:0}
+.global-edit--navigation .doc-controls__controls-wrapper{background:var(--bg);border-top-color:var(--line)}
+.global-edit--navigation .doc-header__title,.global-edit--navigation .doc-controls .doc-title{font-size:16px;font-weight:700;color:var(--text)}
+.global-edit--navigation .btn--style-primary,.global-edit--navigation .btn.btn--style-primary{
+  background:var(--pink);border-color:var(--pink);color:#fff;
+}
+.global-edit--navigation .bl-nav-items{
+  display:grid;grid-template-columns:300px minmax(0,1fr);
+  grid-template-rows:minmax(0,1fr);
+  flex:1;min-height:0;height:100%;overflow:hidden;align-self:stretch;
+}
+@media(max-width:1280px){.global-edit--navigation .bl-nav-items{grid-template-columns:250px minmax(0,1fr)}}
+@media(max-width:850px){.global-edit--navigation .bl-nav-items{grid-template-columns:1fr}}
+`;
+//#endregion
+//#region src/admin/admin-workspace.tsx
+/**
+* Wraps Payload's DefaultEditView so Header (and later kit editors)
+* become the mockup workspace. Does not mount a second Form.
+*/
+function AdminWorkspace(props) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("style", {
+		href: "bl-admin-workspace",
+		precedence: "high",
+		children: ADMIN_WORKSPACE_CSS
+	}), /* @__PURE__ */ jsx(DefaultEditView, { ...props })] });
+}
+//#endregion
 //#region src/admin/link-field.tsx
 /**
 * The link picker: one box in place of a link's `type`, `page` and `href`.
@@ -536,7 +638,17 @@ const THEME_SEED = {
 };
 const THEME_SCOPE = ".bl-nav-items";
 function scopeThemeCss(css) {
-	return css.replace(/:root/g, THEME_SCOPE).replace(/\[data-theme="dark"\]/g, `${THEME_SCOPE}[data-theme="dark"]`);
+	return css.replace(/:root/g, THEME_SCOPE).replace(/\[data-theme="dark"\]/g, `${THEME_SCOPE}[data-theme="dark"], ${THEME_SCOPE} [data-theme="dark"]`);
+}
+function identityFallbackFromConfig(config) {
+	return config.globals?.find((global) => global.slug === "theme")?.admin?.custom?.identityFallback;
+}
+function lockupSrc(asset, serverURL) {
+	if (!asset?.url) return null;
+	return {
+		url: /^https?:\/\//.test(asset.url) || asset.url.startsWith("/") ? asset.url : `${serverURL}/${asset.url}`,
+		alt: asset.alt
+	};
 }
 function pageIdOf(value) {
 	if (value == null) return null;
@@ -546,12 +658,16 @@ function pageIdOf(value) {
 	}
 	return String(value);
 }
-function collectPageIds(items) {
+function ctaPathFromItems(itemsPath) {
+	return itemsPath.endsWith(".items") ? `${itemsPath.slice(0, -6)}.cta` : "header.cta";
+}
+function collectPageIds(items, extra) {
 	const ids = /* @__PURE__ */ new Set();
 	const take = (link) => {
 		const id = pageIdOf(link?.page);
 		if (id) ids.add(id);
 	};
+	take(extra);
 	for (const row of items) {
 		take(row);
 		const panel = row.panel;
@@ -575,40 +691,30 @@ function ComposedLinkField({ path, parentPath, readOnly }) {
 	});
 }
 const NavItemsField = ({ field, path, readOnly }) => {
-	const itemsField = useField({ path });
-	const items = Array.isArray(itemsField.value) ? itemsField.value : [];
-	const { addFieldRow, replaceFieldRow, removeFieldRow, moveFieldRow } = useForm();
+	const itemsField = useField({
+		path,
+		hasRows: true
+	});
+	const { addFieldRow, replaceFieldRow, getDataByPath } = useForm();
+	Array.isArray(itemsField.rows) ? itemsField.rows.length : itemsField.value;
+	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 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 [menu, setMenu] = useState(null);
-	const [atTop, setAtTop] = useState(true);
-	const sentinel = useRef(null);
+	const [previewDark, setPreviewDark] = useState(true);
+	const identityFallback = identityFallbackFromConfig(config);
 	useEffect(() => {
 		if (selected >= items.length) setSelected(Math.max(0, items.length - 1));
 	}, [items.length, selected]);
-	useEffect(() => {
-		const el = sentinel.current;
-		if (!el) return;
-		const leave = () => setAtTop(false);
-		const enter = () => setAtTop(true);
-		el.addEventListener("nav-items-preview-leave", leave);
-		el.addEventListener("nav-items-preview-enter", enter);
-		const io = new IntersectionObserver(([entry]) => {
-			if (entry) setAtTop(entry.isIntersecting);
-		});
-		io.observe(el);
-		return () => {
-			el.removeEventListener("nav-items-preview-leave", leave);
-			el.removeEventListener("nav-items-preview-enter", enter);
-			io.disconnect();
-		};
-	}, []);
 	const current = items[selected];
 	const [pages, setPages] = useState(() => /* @__PURE__ */ new Map());
-	const pageIds = useMemo(() => collectPageIds(items).sort().join(","), [items]);
+	const pageIds = useMemo(() => collectPageIds(items, cta).sort().join(","), [items, cta]);
 	useEffect(() => {
 		const ids = pageIds ? pageIds.split(",") : [];
 		if (ids.length === 0) return;
@@ -626,7 +732,9 @@ const NavItemsField = ({ field, path, readOnly }) => {
 		};
 	}, [pageIds, endpoint]);
 	const previewItems = useMemo(() => headerItemsFromBlocks(items, { resolveLink: (link) => resolveAdminPreviewLink(link, pages) }), [items, pages]);
-	const openItem = atTop && current?.blockType === "megaMenu" && current.label ? current.label : void 0;
+	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");
 	function add(blockType) {
 		const seed = blockType === "navLink" ? emptyLink() : emptyMega();
 		addFieldRow({
@@ -701,43 +809,34 @@ const NavItemsField = ({ field, path, readOnly }) => {
 		}
 		switchToMega();
 	}
-	function setRow(name, value) {
-		itemsField.setValue(items.map((row, i) => i === selected ? {
-			...row,
-			[name]: value
-		} : row));
-	}
-	function setPanel(patch) {
-		if (current?.blockType !== "megaMenu") return;
-		setRow("panel", {
-			...current.panel ?? emptyPanel(),
-			...patch
-		});
-	}
-	function setColumns(columns) {
-		setPanel({ columns: columns.map((column, i) => i === 0 ? {
-			...column,
-			divider: false
-		} : column) });
-	}
 	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 (!label) return;
 		const index = items.findIndex((row) => row.label === label);
-		if (index >= 0) setSelected(index);
+		if (index >= 0) {
+			setSelected(index);
+			setHoverItem(label);
+		}
 	}
 	const [themeCss, setThemeCss] = useState("");
+	const [lockup, setLockup] = useState(() => lockupSrc(identityFallback?.lockup, config.serverURL));
 	useEffect(() => {
 		let cancelled = false;
 		fetch(`${endpoint}/globals/theme?depth=1`, { credentials: "include" }).then((response) => response.ok ? response.json() : null).then((doc) => {
-			if (cancelled || !doc) return;
-			setThemeCss(scopeThemeCss(themeHeadFromDoc(doc, THEME_SEED).css));
+			if (cancelled) return;
+			if (doc) setThemeCss(scopeThemeCss(themeHeadFromDoc(doc, THEME_SEED).css));
+			setLockup(lockupSrc(resolveThemeIdentity(doc, identityFallback).lockup, config.serverURL));
 		}).catch(() => void 0);
 		return () => {
 			cancelled = true;
 		};
-	}, [endpoint]);
+	}, [
+		config.serverURL,
+		endpoint,
+		identityFallback
+	]);
+	const ctaHref = resolveAdminPreviewLink(cta, pages);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "bl-nav-items field-type",
 		children: [
@@ -751,157 +850,134 @@ const NavItemsField = ({ field, path, readOnly }) => {
 				precedence: "default",
 				children: themeCss
 			}) : null,
-			/* @__PURE__ */ jsxs("aside", {
-				className: "bl-nav-items__rail",
-				children: [
-					/* @__PURE__ */ jsxs("div", {
-						className: "bl-nav-items__rail-head",
-						children: [/* @__PURE__ */ jsx("p", {
-							className: "bl-nav-items__kicker",
-							children: "Header navigation"
-						}), /* @__PURE__ */ jsx("h2", { children: "Menu items" })]
-					}),
-					/* @__PURE__ */ jsx("ul", {
-						className: "bl-nav-items__list",
-						"aria-label": "Menu items",
-						children: items.map((row, index) => /* @__PURE__ */ jsxs("li", {
-							"data-selected": index === selected ? "true" : "false",
-							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("button", {
-										type: "button",
-										className: "bl-nav-items__rail-label",
-										onClick: () => setSelected(index),
-										children: row.label || "Untitled"
-									}),
-									readOnly ? null : /* @__PURE__ */ jsxs("div", {
-										className: "bl-nav-items__menu",
-										children: [/* @__PURE__ */ jsx("button", {
-											type: "button",
-											"aria-label": `${row.label || "Item"} actions`,
-											onClick: () => setMenu(menu === index ? null : index),
-											children: "⋯"
-										}), menu === index ? /* @__PURE__ */ jsxs("div", {
-											className: "bl-nav-items__menu-pop",
-											children: [
-												/* @__PURE__ */ jsx("button", {
-													type: "button",
-													disabled: index === 0,
-													onClick: () => {
-														moveFieldRow({
-															path,
-															moveFromIndex: index,
-															moveToIndex: index - 1
-														});
-														setSelected(index - 1);
-														setMenu(null);
-													},
-													children: "Move up"
-												}),
-												/* @__PURE__ */ jsx("button", {
-													type: "button",
-													disabled: index === items.length - 1,
-													onClick: () => {
-														moveFieldRow({
-															path,
-															moveFromIndex: index,
-															moveToIndex: index + 1
-														});
-														setSelected(index + 1);
-														setMenu(null);
-													},
-													children: "Move down"
-												}),
-												/* @__PURE__ */ jsx("button", {
-													type: "button",
-													className: "bl-nav-kit__danger",
-													onClick: () => {
-														removeFieldRow({
-															path,
-															rowIndex: index
-														});
-														setMenu(null);
-													},
-													children: "Delete"
-												})
-											]
-										}) : null]
-									})
-								]
-							}), index === selected ? /* @__PURE__ */ jsxs("div", {
-								className: "bl-nav-items__rail-edit",
-								children: [/* @__PURE__ */ jsxs(TypeCards, {
-									compact: true,
-									children: [/* @__PURE__ */ jsx(TypeCard, {
-										icon: /* @__PURE__ */ jsx(LinkGlyph, {}),
-										label: "Link",
-										onClick: () => requestType("navLink")
-									}), /* @__PURE__ */ jsx(TypeCard, {
-										icon: /* @__PURE__ */ jsx(MegaGlyph, {}),
-										label: "Mega",
-										onClick: () => requestType("megaMenu")
-									})]
-								}), /* @__PURE__ */ jsx(ItemBasics, {
-									path,
+			/* @__PURE__ */ jsxs(ItemRail, { children: [/* @__PURE__ */ jsxs("div", {
+				className: "bl-nav-items__rail-body",
+				children: [/* @__PURE__ */ jsx("ul", {
+					className: "bl-nav-items__list",
+					"aria-label": "Menu items",
+					children: items.map((row, index) => /* @__PURE__ */ jsxs("li", {
+						"data-selected": index === selected ? "true" : "false",
+						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("button", {
+									type: "button",
+									className: "bl-nav-items__rail-label",
+									onClick: () => setSelected(index),
+									children: row.label || "Untitled"
+								}),
+								readOnly ? null : /* @__PURE__ */ jsx(RowMenu, {
+									label: row.label || "Item",
 									index,
-									readOnly
+									count: items.length,
+									path,
+									onMoved: (to) => setSelected(to)
+								})
+							]
+						}), index === selected ? /* @__PURE__ */ jsxs("div", {
+							className: "bl-nav-items__rail-edit",
+							children: [/* @__PURE__ */ jsxs(TypeCards, {
+								compact: true,
+								children: [/* @__PURE__ */ jsx(TypeCard, {
+									icon: /* @__PURE__ */ jsx(LinkGlyph, {}),
+									label: "Link",
+									active: row.blockType === "navLink",
+									onClick: () => requestType("navLink")
+								}), /* @__PURE__ */ jsx(TypeCard, {
+									icon: /* @__PURE__ */ jsx(MegaGlyph, {}),
+									label: "Mega",
+									active: row.blockType === "megaMenu",
+									onClick: () => requestType("megaMenu")
 								})]
-							}) : null]
-						}, String(row.id ?? index)))
-					}),
-					readOnly ? null : /* @__PURE__ */ jsx("button", {
-						type: "button",
-						className: "bl-nav-items__add",
-						onClick: () => setAdding(true),
-						children: "Add item"
-					})
-				]
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "bl-nav-items__main",
-				children: [
-					/* @__PURE__ */ jsx("div", {
-						className: "bl-nav-items__sentinel",
-						"data-testid": "nav-items-preview-sentinel",
-						ref: sentinel,
-						"aria-hidden": true
-					}),
-					/* @__PURE__ */ jsx("div", {
-						"data-preview-chrome": true,
-						"data-sticky": "true",
+							}), /* @__PURE__ */ jsx(ItemBasics, {
+								path,
+								index,
+								readOnly
+							})]
+						}) : null]
+					}, String(row.id ?? index)))
+				}), readOnly ? null : /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "bl-nav-items__add",
+					onClick: () => setAdding(true),
+					children: "Add item"
+				})]
+			}), /* @__PURE__ */ jsx(RailSlot, { children: /* @__PURE__ */ jsx(HeaderCta, {
+				path: ctaPath,
+				readOnly
+			}) })] }),
+			/* @__PURE__ */ jsxs(Canvas, { children: [
+				current?.blockType === "megaMenu" ? /* @__PURE__ */ jsx(MainHead, {
+					kicker: "Editing mega menu",
+					title: current.label || "Menu items",
+					description: "Configure the dropdown layout, sections, links, and footer."
+				}) : items.length === 0 ? /* @__PURE__ */ jsx(MainHead, {
+					kicker: "Header",
+					title: "Menu items",
+					description: "Add a link or a mega menu to start the header."
+				}) : null,
+				/* @__PURE__ */ jsxs("div", {
+					className: "bl-nav-items__preview-block",
+					"data-preview-chrome": true,
+					"data-sticky": "true",
+					"data-theme": previewDark ? "dark" : "light",
+					onClick: onPreviewClick,
+					onMouseLeave: (event) => {
+						const next = event.relatedTarget;
+						if (next instanceof Node && event.currentTarget.contains(next)) return;
+						setHoverItem(null);
+					},
+					children: [/* @__PURE__ */ jsx("div", {
 						className: "bl-nav-items__preview",
-						onClick: onPreviewClick,
-						children: /* @__PURE__ */ jsx(FloatingNavBlock, {
-							items: previewItems,
-							hideOnScroll: false,
-							breakpoint: "lg",
+						children: /* @__PURE__ */ jsx(PreviewNav, {
+							items: items.filter((row) => row.label).map((row) => {
+								const mapped = previewItems.find((item) => item.label === row.label);
+								return {
+									label: row.label,
+									href: mapped?.href ?? resolveAdminPreviewLink(row, pages) ?? void 0,
+									content: row.blockType === "megaMenu" ? true : mapped?.content,
+									items: mapped?.items
+								};
+							}),
+							lockup,
+							onLockupError: () => setLockup(null),
+							actions: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(PreviewThemeToggle, {
+								dark: previewDark,
+								onToggle: () => setPreviewDark((next) => !next)
+							}), ctaOn && ctaHref && cta.label ? /* @__PURE__ */ jsx("a", {
+								href: ctaHref,
+								className: "bl-nav-items__preview-cta",
+								children: cta.label
+							}) : null] }),
 							openItem,
-							className: "bl-nav-items__bar"
+							onItemEnter: (label) => setHoverItem(label)
 						})
-					}),
-					current?.blockType === "megaMenu" ? /* @__PURE__ */ jsx(MegaEditor, {
-						path,
-						index: selected,
-						panel: current.panel ?? emptyPanel(),
-						readOnly: Boolean(readOnly),
-						onColumns: setColumns,
-						onPanel: setPanel
-					}) : current ? /* @__PURE__ */ jsx("p", {
-						className: "bl-nav-items__empty",
-						children: "A plain link is edited in the rail: label, destination, and new tab."
-					}) : /* @__PURE__ */ jsx("p", {
-						className: "bl-nav-items__empty",
-						children: "Add a link or a mega menu to start the header."
-					})
-				]
-			}),
+					}), openRow ? /* @__PURE__ */ jsx("div", {
+						className: "bl-nav-items__preview-stage",
+						"data-testid": "nav-items-preview-mega",
+						onMouseEnter: () => openItem && setHoverItem(openItem),
+						children: /* @__PURE__ */ jsx(PreviewMega, {
+							row: openRow,
+							pages
+						})
+					}) : null]
+				}),
+				current?.blockType === "megaMenu" ? /* @__PURE__ */ jsx(MegaEditor, {
+					path,
+					index: selected,
+					panel: current.panel ?? emptyPanel(),
+					readOnly: Boolean(readOnly)
+				}) : items.length === 0 ? /* @__PURE__ */ jsx("p", {
+					className: "bl-nav-items__empty",
+					children: "Add a link or a mega menu to start the header."
+				}) : null
+			] }),
 			adding ? /* @__PURE__ */ jsx("div", {
 				className: "bl-nav-kit__modal",
 				role: "dialog",
@@ -945,6 +1021,224 @@ const NavItemsField = ({ field, path, readOnly }) => {
 		]
 	});
 };
+function PreviewThemeToggle({ dark, onToggle }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: "bl-nav-items__preview-theme",
+		"aria-label": dark ? "Switch to light mode" : "Switch to dark mode",
+		onClick: (event) => {
+			event.stopPropagation();
+			onToggle();
+		},
+		children: dark ? /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 24 24",
+			width: "18",
+			height: "18",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			"aria-hidden": true,
+			children: /* @__PURE__ */ jsx("path", { d: "M21 14.5A8.5 8.5 0 1 1 9.5 3 7 7 0 0 0 21 14.5z" })
+		}) : /* @__PURE__ */ jsxs("svg", {
+			viewBox: "0 0 24 24",
+			width: "18",
+			height: "18",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			"aria-hidden": true,
+			children: [/* @__PURE__ */ jsx("circle", {
+				cx: "12",
+				cy: "12",
+				r: "4"
+			}), /* @__PURE__ */ jsx("path", { d: "M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M18.4 5.6 17 7M7 17l-1.4 1.4" })]
+		})
+	});
+}
+/**
+* Kit island, not `FloatingNavBlock`. Payload admin does not load the
+* site Tailwind preset or `BisonProvider`; the live block (and
+* `ThemeToggle`) throw or render unstyled there. Theme Identity still
+* comes from `/api/globals/theme`. The public header stays
+* `headerFromNavigation` → `FloatingNavBlock` (SPI-99).
+*/
+function PreviewNav({ items, lockup, onLockupError, actions, openItem, onItemEnter }) {
+	return /* @__PURE__ */ jsxs("nav", {
+		"aria-label": "Main",
+		className: "bl-nav-items__preview-nav",
+		"data-open-item": openItem ?? "",
+		"data-has-logo": lockup ? "yes" : "no",
+		"data-has-actions": actions ? "yes" : "no",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "bl-nav-items__preview-logo",
+				children: lockup ? /* @__PURE__ */ jsx("img", {
+					src: lockup.url,
+					alt: lockup.alt,
+					height: 20,
+					onError: onLockupError
+				}) : null
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "bl-nav-items__preview-links",
+				children: items.map((item) => /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					className: openItem === item.label ? "bl-nav-items__preview-link is-open" : "bl-nav-items__preview-link",
+					"data-preview-item": item.label,
+					"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]
+				}, item.label))
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "bl-nav-items__preview-actions",
+				children: actions
+			})
+		]
+	});
+}
+const PREVIEW_MAX_WIDTH = {
+	narrow: "22rem",
+	standard: "42rem",
+	wide: "48rem"
+};
+function PreviewMega({ row, pages }) {
+	const panel = row.panel;
+	const columns = panel?.columns ?? [];
+	const maxWidth = PREVIEW_MAX_WIDTH[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));
+	})));
+	const overview = panel?.footer?.overview;
+	const cta = panel?.footer?.cta;
+	const overviewHref = overview ? resolveAdminPreviewLink(overview, pages) : null;
+	const ctaHref = cta ? resolveAdminPreviewLink(cta, pages) : null;
+	const showFooter = Boolean(overview?.label && overviewHref || cta?.label && ctaHref);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "bl-nav-items__mega-preview",
+		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(" ") },
+			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",
+				children: (column.sections ?? []).map((section, sectionIndex) => {
+					const links = (section.links ?? []).flatMap((link, linkIndex) => {
+						const item = link;
+						const href = resolveAdminPreviewLink(item, pages);
+						if (!item.label || !href) return [];
+						const featured = section.display === "featured";
+						return [/* @__PURE__ */ jsx("div", {
+							className: featured ? "bl-nav-items__preview-featured" : "bl-nav-items__preview-list-row",
+							children: featured ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+								className: "title",
+								children: item.label
+							}), item.description ? /* @__PURE__ */ jsx("small", { children: item.description }) : null] }) : /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("strong", { children: item.label }), item.description ? /* @__PURE__ */ jsx("small", { children: item.description }) : null] })
+						}, `${sectionIndex}-${linkIndex}`)];
+					});
+					return /* @__PURE__ */ jsxs("div", { children: [section.eyebrow ? /* @__PURE__ */ jsx("div", {
+						className: "bl-nav-items__preview-eyebrow",
+						children: section.eyebrow
+					}) : null, links.length ? links : /* @__PURE__ */ jsx("div", {
+						className: "bl-nav-items__preview-empty",
+						children: "Empty section"
+					})] }, sectionIndex);
+				})
+			}, columnIndex))
+		}) : /* @__PURE__ */ jsx("div", {
+			className: "bl-nav-items__preview-empty",
+			children: "No complete links in this menu yet."
+		}), showFooter ? /* @__PURE__ */ jsxs("div", {
+			className: "bl-nav-items__preview-footer",
+			children: [overview?.label && overviewHref ? /* @__PURE__ */ jsx("a", {
+				href: overviewHref,
+				children: overview.label
+			}) : /* @__PURE__ */ jsx("span", {}), cta?.label && ctaHref ? /* @__PURE__ */ jsx("span", {
+				className: "cta",
+				children: cta.label
+			}) : null]
+		}) : null]
+	});
+}
+function HeaderCta({ path, readOnly }) {
+	const group = useField({ path });
+	const enabled = useField({ path: `${path}.enabled` });
+	const label = useField({ path: `${path}.label` });
+	const page = useField({ path: `${path}.page` });
+	const href = useField({ path: `${path}.href` });
+	const newTab = useField({ path: `${path}.newTab` });
+	const on = enabled.value === true || enabled.value !== false && Boolean(label.value || page.value || href.value);
+	function setEnabled(next) {
+		enabled.setValue(next);
+		if (!next) {
+			label.setValue("");
+			page.setValue(null);
+			href.setValue(null);
+			newTab.setValue(false);
+		}
+	}
+	return /* @__PURE__ */ jsxs("fieldset", {
+		className: "bl-nav-items__header-cta",
+		"aria-label": "Header button",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				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"]
+			}),
+			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__ */ 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"]
+				})
+			] }) : null,
+			/* @__PURE__ */ jsx(FieldError, {
+				path: group.path,
+				showError: group.showError,
+				message: group.errorMessage
+			})
+		]
+	});
+}
 function ItemBasics({ path, index, readOnly }) {
 	const label = useField({ path: `${path}.${index}.label` });
 	const newTab = useField({ path: `${path}.${index}.newTab` });
@@ -976,278 +1270,562 @@ function ItemBasics({ path, index, readOnly }) {
 		]
 	});
 }
-function MegaEditor({ path, index, panel, readOnly, onColumns, onPanel }) {
+function MegaEditor({ path, index, panel, readOnly }) {
+	const { addFieldRow } = useForm();
 	const columns = panel.columns ?? [];
 	const columnsError = useField({ path: `${path}.${index}.panel.columns` });
+	const columnsPath = `${path}.${index}.panel.columns`;
+	const maxWidth = useField({ path: `${path}.${index}.panel.maxWidth` });
 	return /* @__PURE__ */ jsxs("div", {
 		className: "bl-nav-items__mega",
 		children: [
-			/* @__PURE__ */ jsxs("label", {
-				className: "bl-nav-items__field",
-				children: [/* @__PURE__ */ jsx("span", { children: "Dropdown width" }), /* @__PURE__ */ jsxs("select", {
-					value: panel.maxWidth ?? "standard",
-					disabled: readOnly,
-					onChange: (event) => onPanel({ maxWidth: event.target.value }),
-					children: [
-						/* @__PURE__ */ jsx("option", {
-							value: "narrow",
-							children: "Narrow"
-						}),
-						/* @__PURE__ */ jsx("option", {
-							value: "standard",
-							children: "Standard"
-						}),
-						/* @__PURE__ */ jsx("option", {
-							value: "wide",
-							children: "Wide"
-						})
-					]
+			/* @__PURE__ */ jsxs("div", {
+				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",
+						value: maxWidth.value ?? panel.maxWidth ?? "standard",
+						disabled: readOnly,
+						onChange: (event) => maxWidth.setValue(event.target.value),
+						children: [
+							/* @__PURE__ */ jsx("option", {
+								value: "narrow",
+								children: "Narrow"
+							}),
+							/* @__PURE__ */ jsx("option", {
+								value: "standard",
+								children: "Standard"
+							}),
+							/* @__PURE__ */ jsx("option", {
+								value: "wide",
+								children: "Wide"
+							})
+						]
+					})]
 				})]
 			}),
 			/* @__PURE__ */ jsx("div", {
 				className: "bl-nav-items__columns",
 				"data-testid": "nav-items-columns",
 				style: { gridTemplateColumns: "repeat(2, minmax(0, 1fr))" },
-				children: columns.map((column, columnIndex) => /* @__PURE__ */ jsxs("fieldset", {
-					className: "bl-nav-items__column",
-					"aria-label": `Column ${columnIndex + 1}`,
-					children: [
-						/* @__PURE__ */ jsxs("legend", { children: ["Column ", columnIndex + 1] }),
-						/* @__PURE__ */ jsxs("div", {
-							className: "bl-nav-items__column-settings",
-							children: [/* @__PURE__ */ jsxs("label", {
-								className: "bl-nav-items__field",
-								children: [/* @__PURE__ */ jsx("span", { children: "Width" }), /* @__PURE__ */ jsx("select", {
-									value: column.width ?? "100",
-									disabled: readOnly,
-									onChange: (event) => onColumns(columns.map((row, i) => i === columnIndex ? {
-										...row,
-										width: event.target.value
-									} : row)),
-									children: WIDTHS.map((width) => /* @__PURE__ */ jsxs("option", {
-										value: width,
-										children: [width, "%"]
-									}, width))
-								})]
-							}), columnIndex > 0 ? /* @__PURE__ */ jsxs("label", {
-								className: "bl-nav-items__check",
-								children: [/* @__PURE__ */ jsx("input", {
-									type: "checkbox",
-									checked: Boolean(column.divider),
-									disabled: readOnly,
-									onChange: (event) => onColumns(columns.map((row, i) => i === columnIndex ? {
-										...row,
-										divider: event.target.checked
-									} : row))
-								}), "Draw a line on the left of this column"]
-							}) : null]
-						}),
-						(column.sections ?? []).map((section, sectionIndex) => /* @__PURE__ */ jsx(SectionEditor, {
-							path,
-							itemIndex: index,
-							columnIndex,
-							sectionIndex,
-							section,
-							readOnly,
-							onChange: (next) => onColumns(columns.map((row, i) => i === columnIndex ? {
-								...row,
-								sections: (row.sections ?? []).map((entry, j) => j === sectionIndex ? next : entry)
-							} : row))
-						}, sectionIndex)),
-						readOnly || (column.sections?.length ?? 0) >= 8 ? null : /* @__PURE__ */ jsx("button", {
-							type: "button",
-							className: "bl-nav-items__add",
-							onClick: () => onColumns(columns.map((row, i) => i === columnIndex ? {
-								...row,
-								sections: [...row.sections ?? [], emptySection()]
-							} : row)),
-							children: "Add section"
-						})
-					]
+				children: columns.map((column, columnIndex) => /* @__PURE__ */ jsx(ColumnEditor, {
+					path,
+					itemIndex: index,
+					columnIndex,
+					column,
+					readOnly,
+					columnCount: columns.length
 				}, columnIndex))
 			}),
 			readOnly || columns.length >= 4 ? null : /* @__PURE__ */ jsx("button", {
 				type: "button",
-				className: "bl-nav-items__add",
-				onClick: () => onColumns([...columns, {
-					...emptyColumn(),
-					width: "25"
-				}]),
-				children: "Add column"
+				className: "bl-nav-items__add-column",
+				onClick: () => {
+					addFieldRow({
+						path: columnsPath,
+						schemaPath: columnsPath,
+						subFieldState: {
+							width: {
+								value: "25",
+								valid: true
+							},
+							divider: {
+								value: true,
+								valid: true
+							}
+						}
+					});
+					addFieldRow({
+						path: `${columnsPath}.${columns.length}.sections`,
+						schemaPath: `${columnsPath}.${columns.length}.sections`,
+						subFieldState: {
+							display: {
+								value: "list",
+								valid: true
+							},
+							hideDescriptionsOnMobile: {
+								value: true,
+								valid: true
+							}
+						}
+					});
+				},
+				children: "＋ Add column"
 			}),
 			/* @__PURE__ */ jsx(FieldError, {
 				path: columnsError.path,
 				showError: columnsError.showError,
 				message: columnsError.errorMessage
 			}),
-			/* @__PURE__ */ jsxs("div", {
+			/* @__PURE__ */ jsxs("section", {
 				className: "bl-nav-items__footer",
-				children: [/* @__PURE__ */ jsx("h3", { children: "Footer" }), /* @__PURE__ */ jsxs("div", {
-					className: "bl-nav-items__footer-grid",
-					children: [/* @__PURE__ */ jsxs("div", { children: [
-						/* @__PURE__ */ jsx("h4", { children: "Overview link" }),
-						/* @__PURE__ */ jsx(ComposedLinkField, {
-							path: `${path}.${index}.panel.footer.overview._index-0`,
-							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`,
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "bl-nav-items__footer-head",
+					children: /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", { children: "Footer" }), /* @__PURE__ */ jsx("p", { children: "Optional links displayed below the menu columns. The overview is the section’s own landing page so it stays reachable from the bar." })] })
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "bl-nav-items__footer-body",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "bl-nav-items__footer-card",
+						children: [
+							/* @__PURE__ */ jsx("h4", { children: "Overview link" }),
+							/* @__PURE__ */ jsx(ComposedLinkField, {
+								path: `${path}.${index}.panel.footer.overview._index-0`,
+								parentPath: `${path}.${index}.panel.footer.overview`,
 								readOnly
-							})]
-						})
-					] }), /* @__PURE__ */ jsxs("div", { children: [
-						/* @__PURE__ */ jsx("h4", { children: "Call to action" }),
-						/* @__PURE__ */ jsx(ComposedLinkField, {
-							path: `${path}.${index}.panel.footer.cta._index-0`,
-							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`,
+							}),
+							/* @__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("div", {
+						className: "bl-nav-items__footer-card",
+						children: [
+							/* @__PURE__ */ jsx("h4", { children: "Call to action" }),
+							/* @__PURE__ */ jsx(ComposedLinkField, {
+								path: `${path}.${index}.panel.footer.cta._index-0`,
+								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
+								})]
+							})
+						]
+					})]
 				})]
 			})
 		]
 	});
 }
-function FooterText({ path, readOnly }) {
-	const field = useField({ path });
-	return /* @__PURE__ */ jsx("input", {
-		value: field.value ?? "",
-		disabled: readOnly,
-		onChange: (event) => field.setValue(event.target.value)
+function RowMenu({ label, index, count, path, allowRemove = true, onMoved }) {
+	const [open, setOpen] = useState(false);
+	const { moveFieldRow, removeFieldRow } = useForm();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "bl-nav-items__menu",
+		children: [/* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": `${label} actions`,
+			onClick: () => setOpen((next) => !next),
+			children: "⋯"
+		}), open ? /* @__PURE__ */ jsxs("div", {
+			className: "bl-nav-items__menu-pop",
+			children: [
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					disabled: index === 0,
+					onClick: () => {
+						moveFieldRow({
+							path,
+							moveFromIndex: index,
+							moveToIndex: index - 1
+						});
+						onMoved?.(index - 1);
+						setOpen(false);
+					},
+					children: "Move up"
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					disabled: index === count - 1,
+					onClick: () => {
+						moveFieldRow({
+							path,
+							moveFromIndex: index,
+							moveToIndex: index + 1
+						});
+						onMoved?.(index + 1);
+						setOpen(false);
+					},
+					children: "Move down"
+				}),
+				allowRemove ? /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "bl-nav-kit__danger",
+					onClick: () => {
+						removeFieldRow({
+							path,
+							rowIndex: index
+						});
+						setOpen(false);
+					},
+					children: "Delete"
+				}) : null
+			]
+		}) : null]
 	});
 }
-function SectionEditor({ path, itemIndex, columnIndex, sectionIndex, section, readOnly, onChange }) {
-	const links = section.links ?? [];
+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__section",
+		className: "bl-nav-items__link",
 		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: "Eyebrow" }), /* @__PURE__ */ jsx("input", {
-					value: section.eyebrow ?? "",
-					disabled: readOnly,
-					onChange: (event) => onChange({
-						...section,
-						eyebrow: event.target.value
-					})
+				children: [/* @__PURE__ */ jsx("span", { children: "Label" }), /* @__PURE__ */ jsx(FooterText, {
+					path: `${path}.label`,
+					readOnly
 				})]
 			}),
-			/* @__PURE__ */ jsxs(TypeCards, {
-				compact: true,
-				children: [/* @__PURE__ */ jsx(TypeCard, {
-					label: "Featured",
-					active: section.display === "featured",
-					disabled: readOnly,
-					onClick: () => onChange({
-						...section,
-						display: "featured"
-					})
-				}), /* @__PURE__ */ jsx(TypeCard, {
-					label: "List",
-					active: section.display !== "featured",
+			/* @__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,
-					onClick: () => onChange({
-						...section,
-						display: "list"
-					})
+					rows: 2,
+					onChange: (event) => description.setValue(event.target.value)
 				})]
 			}),
 			/* @__PURE__ */ jsxs("label", {
 				className: "bl-nav-items__check",
 				children: [/* @__PURE__ */ jsx("input", {
 					type: "checkbox",
-					checked: section.hideDescriptionsOnMobile !== false,
+					checked: Boolean(newTab.value),
 					disabled: readOnly,
-					onChange: (event) => onChange({
-						...section,
-						hideDescriptionsOnMobile: event.target.checked
+					onChange: (event) => newTab.setValue(event.target.checked)
+				}), "Open in a new tab"]
+			})
+		]
+	});
+}
+function FooterText({ path, readOnly }) {
+	const field = useField({ path });
+	return /* @__PURE__ */ jsx("input", {
+		value: field.value ?? "",
+		disabled: readOnly,
+		onChange: (event) => field.setValue(event.target.value)
+	});
+}
+function ColumnEditor({ path, itemIndex, columnIndex, column, readOnly, columnCount }) {
+	const { addFieldRow } = useForm();
+	const width = useField({ path: `${path}.${itemIndex}.panel.columns.${columnIndex}.width` });
+	const divider = useField({ path: `${path}.${itemIndex}.panel.columns.${columnIndex}.divider` });
+	const columnsPath = `${path}.${itemIndex}.panel.columns`;
+	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", "%"]
 					})
-				}), "Hide descriptions on mobile"]
-			}),
-			links.map((link, linkIndex) => /* @__PURE__ */ jsxs("div", {
-				className: "bl-nav-items__link",
-				children: [/* @__PURE__ */ jsxs("label", {
-					className: "bl-nav-items__field",
-					children: [/* @__PURE__ */ jsx("span", { children: "Label" }), /* @__PURE__ */ jsx("input", {
-						value: String(link.label ?? ""),
+				]
+			}), 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) => onChange({
-							...section,
-							links: links.map((row, i) => i === linkIndex ? {
-								...row,
-								label: event.target.value
-							} : row)
-						})
-					})]
-				}), /* @__PURE__ */ jsx(ComposedLinkField, {
-					path: `${path}.${itemIndex}.panel.columns.${columnIndex}.sections.${sectionIndex}.links.${linkIndex}._index-0`,
-					parentPath: `${path}.${itemIndex}.panel.columns.${columnIndex}.sections.${sectionIndex}.links.${linkIndex}`,
+						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
+							}
+						}
+					}),
+					children: "＋ Add section to this column"
+				})
+			]
+		})]
+	});
+}
+function SectionEditor({ path, itemIndex, columnIndex, sectionIndex, section, readOnly, sectionCount }) {
+	const { addFieldRow } = useForm();
+	const base = `${path}.${itemIndex}.panel.columns.${columnIndex}.sections.${sectionIndex}`;
+	const sectionsPath = `${path}.${itemIndex}.panel.columns.${columnIndex}.sections`;
+	const display = useField({ path: `${base}.display` });
+	const eyebrow = useField({ path: `${base}.eyebrow` });
+	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
+				})]
+			}),
+			/* @__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", {
+							className: "bl-nav-items__seg",
+							children: [/* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: featured ? "is-active" : void 0,
+								disabled: readOnly,
+								onClick: () => display.setValue("featured"),
+								children: "Featured"
+							}), /* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: !featured ? "is-active" : void 0,
+								disabled: readOnly,
+								onClick: () => display.setValue("list"),
+								children: "List"
+							})]
+						})]
+					}),
+					/* @__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__ */ 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
+							}
+						}
+					}),
+					children: "＋ Add link"
 				})]
-			}, linkIndex)),
-			readOnly ? null : /* @__PURE__ */ jsx("button", {
-				type: "button",
-				className: "bl-nav-items__add",
-				onClick: () => onChange({
-					...section,
-					links: [...links, {
-						label: "New link",
-						type: "page",
-						page: null,
-						href: null
-					}]
-				}),
-				children: "Add link"
 			})
 		]
 	});
 }
 const CSS = `
-.bl-nav-items{display:grid;grid-template-columns:minmax(16rem,20rem) minmax(0,1fr);gap:0;border:1px solid var(--theme-elevation-150);border-radius:var(--style-radius-s);background:var(--theme-elevation-0);color:var(--theme-elevation-800);font-family:var(--font-body)}
-.bl-nav-items__rail{border-right:1px solid var(--theme-elevation-150);padding:1rem;min-width:0}
-.bl-nav-items__rail-head h2{margin:.15rem 0 0;font-size:14px}
-.bl-nav-items__kicker{margin:0;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--theme-elevation-500)}
+.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__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-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}
+.bl-nav-items__header-cta-head p{margin:3px 0 0;color:var(--muted);font-size:12px}
+.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:8px;margin:.4rem 0}
-.bl-nav-items__list li[data-selected="true"]{border-color:var(--theme-elevation-250);background:var(--theme-elevation-50)}
-.bl-nav-items__rail-row{display:grid;grid-template-columns:28px 1fr auto;gap:.5rem;align-items:center;padding:.5rem}
+.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__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:var(--theme-elevation-100);color:var(--theme-elevation-600)}
-.bl-nav-items__badge[data-kind="megaMenu"]{background:color-mix(in srgb,var(--brand-primary,var(--theme-success-500)) 16%,var(--theme-elevation-50));color:var(--brand-primary,var(--theme-success-500))}
-.bl-nav-items__rail-edit{padding:0 .6rem .75rem}
-.bl-nav-items__add{width:100%;margin-top:.6rem;border:1px dashed var(--theme-elevation-250);background:transparent;border-radius:8px;padding:.65rem;color:var(--theme-elevation-700);cursor:pointer}
-.bl-nav-items__main{min-width:0;padding:1rem 1.25rem 2rem}
-.bl-nav-items__sentinel{height:1px}
-.bl-nav-items__preview{position:sticky;top:0;z-index:5;background:var(--theme-elevation-0);padding:.75rem 0 1rem}
-.bl-nav-items__bar{position:relative !important;inset:auto !important;pointer-events:auto !important;transform:none !important}
-.bl-nav-items__columns{display:grid;gap:.75rem;align-items:start}
-.bl-nav-items__column{border:1px solid var(--theme-elevation-150);border-radius:10px;padding:.75rem;margin:0;min-width:0}
-.bl-nav-items__column legend{font-weight:700;padding:0 .25rem}
-.bl-nav-items__column-settings{display:grid;grid-template-columns:1fr auto;gap:.6rem;align-items:end;margin-bottom:.75rem}
-.bl-nav-items__field{display:flex;flex-direction:column;gap:.35rem;font-size:12px;font-weight:700;margin:.5rem 0}
-.bl-nav-items__field input,.bl-nav-items__field select{font:inherit;font-weight:400;padding:.5rem .6rem;border:1px solid var(--theme-elevation-150);border-radius:var(--style-radius-s);background:var(--theme-input-bg);color:inherit}
-.bl-nav-items__check{display:flex;align-items:center;gap:.5rem;font-size:13px;font-weight:500}
-.bl-nav-items__section,.bl-nav-items__link{border:1px solid var(--theme-elevation-100);border-radius:8px;padding:.6rem;margin:.5rem 0}
-.bl-nav-items__footer{margin-top:1.25rem;border:1px solid var(--theme-elevation-150);border-radius:10px;padding:1rem}
-.bl-nav-items__footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
-.bl-nav-items__empty{color:var(--theme-elevation-500)}
+.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__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-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 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-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)}
+.bl-nav-items__preview-block[data-theme="light"] .bl-nav-items__preview-nav{background:rgba(255,255,255,.92);border-color:#d8dbe2}
+.bl-nav-items__preview-block[data-theme="light"] .bl-nav-items__preview-link{color:#1b1d22}
+.bl-nav-items__preview-block[data-theme="light"] .bl-nav-items__preview-link.is-open{background:#eceef2}
+.bl-nav-items__preview-block[data-theme="light"] .bl-nav-items__preview-theme{color:#1b1d22}
+.bl-nav-items__preview-block[data-theme="light"] .bl-nav-items__preview-theme:hover{background:#eceef2}
+.bl-nav-items__preview-block[data-theme="light"] .bl-nav-items__mega-preview{background:#fff;color:#1b1d22}
+.bl-nav-items__preview-block[data-theme="light"] .bl-nav-items__preview-footer{background:#f4f5f7}
+.bl-nav-items__preview-stage{position:absolute;left:0;right:0;top:100%;z-index:21;padding:8px 0 0;pointer-events:auto}
+.bl-nav-items__mega-preview{margin:0 auto;background:#18191d;border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 32px rgba(0,0,0,.4);overflow:hidden}
+.bl-nav-items__preview-columns{display:grid;gap:24px;padding:16px}
+.bl-nav-items__preview-col{padding:0;min-width:0}
+.bl-nav-items__preview-col.has-border{border-left:1px solid var(--line);padding-left:24px}
+.bl-nav-items__preview-eyebrow{font-size:12px;font-weight:650;color:#afb3bd;text-transform:uppercase;letter-spacing:.04em;margin:0 8px 8px}
+.bl-nav-items__preview-list-row{display:flex;gap:12px;align-items:flex-start;padding:8px}
+.bl-nav-items__preview-list-row strong{display:block}
+.bl-nav-items__preview-list-row small,.bl-nav-items__preview-featured small{display:block;color:#aeb2bc;margin-top:2px}
+.bl-nav-items__preview-featured{padding:12px}
+.bl-nav-items__preview-featured .title{font-size:16px;font-weight:650}
+.bl-nav-items__preview-empty{color:var(--muted);font-size:13px;padding:28px;text-align:center}
+.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-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-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-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__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__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__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 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:1.4rem;z-index:6;min-width:8rem;padding:.2rem;border:1px solid var(--theme-elevation-150);border-radius:8px;background:var(--theme-elevation-0);box-shadow:0 8px 24px var(--theme-overlay)}
-.bl-nav-items__menu-pop button{display:block;width:100%;text-align:left;border:0;background:transparent;padding:.4rem .5rem;border-radius:6px;color:inherit;cursor:pointer}
-@media(max-width:800px){.bl-nav-items{grid-template-columns:1fr}.bl-nav-items__footer-grid,.bl-nav-items__columns{grid-template-columns:minmax(0,1fr) !important}}
+.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 .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__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}}
 `;
 //#endregion
-export { LinkField, MinRowsArrayField, NavItemsField };
+export { AdminWorkspace, LinkField, MinRowsArrayField, NavItemsField };
 
 //# sourceMappingURL=admin.mjs.map