@bison-lab/payload-blocks 3.21.0 → 3.23.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 { 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.
+*
+* 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;--bl-kit-accent:var(--pink);--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,44 @@ 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 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 [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 +746,10 @@ 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");
+	const openIndex = openRow ? items.indexOf(openRow) : -1;
 	function add(blockType) {
 		const seed = blockType === "navLink" ? emptyLink() : emptyMega();
 		addFieldRow({
@@ -701,44 +824,36 @@ 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 (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) 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]);
-	return /* @__PURE__ */ jsxs("div", {
+	}, [
+		config.serverURL,
+		endpoint,
+		identityFallback
+	]);
+	const ctaHref = resolveAdminPreviewLink(cta, pages);
+	return /* @__PURE__ */ jsx(KitProvider, { children: /* @__PURE__ */ jsxs("div", {
 		className: "bl-nav-items field-type",
 		children: [
 			/* @__PURE__ */ jsx("style", {
@@ -751,188 +866,150 @@ 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(KindGlyph, { kind: row.blockType === "megaMenu" ? "megaMenu" : "navLink" }),
+								/* @__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(KindGlyph, { kind: "navLink" }),
+									label: "Link",
+									active: row.blockType === "navLink",
+									onClick: () => requestType("navLink")
+								}), /* @__PURE__ */ jsx(TypeCard, {
+									icon: /* @__PURE__ */ jsx(KindGlyph, { kind: "megaMenu" }),
+									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, {
+					variant: "outline",
+					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__ */ jsxs("div", {
 						className: "bl-nav-items__preview",
-						onClick: onPreviewClick,
-						children: /* @__PURE__ */ jsx(FloatingNavBlock, {
-							items: previewItems,
-							hideOnScroll: false,
-							breakpoint: "lg",
+						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 {
+									label: row.label,
+									href: mapped?.href ?? resolveAdminPreviewLink(row, pages) ?? void 0,
+									content: row.blockType === "megaMenu" ? true : mapped?.content,
+									items: mapped?.items
+								};
+							}),
+							lockup,
+							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)
+							}), 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)
+						})]
+					}), 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
 						})
-					}),
-					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."
-					})
-				]
+					}) : 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
+			] }),
+			/* @__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")
+				})] })
 			}),
-			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(ConfirmDialog, {
 				open: confirmSwitch,
 				title: "Switch to a plain link?",
@@ -943,311 +1020,837 @@ 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", {
+		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(PreviewChevron, {}) : null]
+				}, item.label))
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "bl-nav-items__preview-actions",
+				children: actions
+			})
+		]
 	});
+}
+const PREVIEW_MAX_WIDTH = {
+	narrow: "22rem",
+	standard: "42rem",
+	wide: "48rem"
 };
+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 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));
+	})));
+	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, columnIndex) => previewColumnTrack(liveWidths[columnIndex] ?? column.width)).join(" ") },
+			children: columns.map((column, columnIndex) => /* @__PURE__ */ jsx("div", {
+				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;
+						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__ */ 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(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__ */ jsx(CheckLabel, {
+					checked: Boolean(newTab.value),
+					disabled: readOnly,
+					onCheckedChange: (checked) => newTab.setValue(checked),
+					children: "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` });
 	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"
 			})
 		]
 	});
 }
-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, {
+						value: maxWidth.value ?? panel.maxWidth ?? "standard",
+						disabled: readOnly,
+						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(SelectItem, {
+								value: "standard",
+								children: "Standard"
+							}),
+							/* @__PURE__ */ jsx(SelectItem, {
+								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"
+			readOnly || columns.length >= 4 ? null : /* @__PURE__ */ jsx(Button, {
+				variant: "outline",
+				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, {
+				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(Field, { children: [/* @__PURE__ */ jsx(Label, { children: "Label" }), /* @__PURE__ */ jsx(FooterText, {
 								path: `${path}.${index}.panel.footer.overview.label`,
 								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, {
+							})] })
+						]
+					}), /* @__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(Field, { children: [/* @__PURE__ */ jsx(Label, { children: "Label" }), /* @__PURE__ */ jsx(FooterText, {
 								path: `${path}.${index}.panel.footer.cta.label`,
 								readOnly
-							})]
-						})
-					] })]
+							})] })
+						]
+					})]
 				})]
 			})
 		]
 	});
 }
+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 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` });
+	return /* @__PURE__ */ jsxs(Fold, {
+		title: label?.trim() || "Untitled",
+		tone: "dark",
+		actions: useRowActions({
+			index,
+			count,
+			path: arrayPath,
+			readOnly
+		}),
+		children: [
+			/* @__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(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 SectionEditor({ path, itemIndex, columnIndex, sectionIndex, section, readOnly, onChange }) {
-	const links = section.links ?? [];
-	return /* @__PURE__ */ jsxs("div", {
-		className: "bl-nav-items__section",
-		children: [
-			/* @__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
-					})
-				})]
-			}),
-			/* @__PURE__ */ jsxs(TypeCards, {
-				compact: true,
-				children: [/* @__PURE__ */ jsx(TypeCard, {
-					label: "Featured",
-					active: section.display === "featured",
+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` });
+	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}`;
+	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,
-					onClick: () => onChange({
-						...section,
-						display: "featured"
-					})
-				}), /* @__PURE__ */ jsx(TypeCard, {
-					label: "List",
-					active: section.display !== "featured",
+					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,
-					onClick: () => onChange({
-						...section,
-						display: "list"
-					})
-				})]
+					onCheckedChange: (checked) => divider.setValue(checked),
+					children: "Draw a line on the left"
+				}) : null]
 			}),
-			/* @__PURE__ */ jsxs("label", {
-				className: "bl-nav-items__check",
-				children: [/* @__PURE__ */ jsx("input", {
-					type: "checkbox",
-					checked: section.hideDescriptionsOnMobile !== false,
-					disabled: readOnly,
-					onChange: (event) => onChange({
-						...section,
-						hideDescriptionsOnMobile: event.target.checked
+			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"
+			})
+		] })
+	});
+}
+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";
+	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(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",
+								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__ */ jsx(CheckLabel, {
+						checked: (hideMobile.value ?? section.hideDescriptionsOnMobile) !== false,
+						disabled: readOnly,
+						onCheckedChange: (checked) => hideMobile.setValue(checked),
+						children: "Hide descriptions on mobile"
 					})
-				}), "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 ?? ""),
-						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}`,
-					readOnly
-				})]
+			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__add",
-				onClick: () => onChange({
-					...section,
-					links: [...links, {
-						label: "New link",
-						type: "page",
-						page: null,
-						href: null
-					}]
+			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{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;--bl-kit-accent:var(--pink);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:#121316;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-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%}
+.bl-nav-items__add-column{margin-top:12px}
+.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;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: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)}
+.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: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);box-shadow:0 10px 28px rgba(0,0,0,.28)}
+.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;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-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 .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-settings{display:grid;grid-template-columns:1fr;gap:10px;padding:10px;background:#101115;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:#d8dbe1}
+.bl-nav-items__header-cta .bl-nav-items__check{gap:16px}
+.bl-nav-items__header-cta-toggle{margin-bottom:20px}
+.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-settings{padding:10px 12px;border:1px solid var(--line);background:#0e0f13;border-radius:9px}
+.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;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{display:flex;flex-direction:column;gap:8px;margin:0 0 16px}
+.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}
+@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