@bison-lab/payload-blocks 3.5.0 → 3.20.0

package/dist/admin.mjs

@@ -1,8 +1,12 @@
 "use client";
-import { t as linkTypeOf } from "./link-CnwLtm47.mjs";
+import "./link-32261jXB.mjs";
+import { a as resolveAdminPreviewLink, i as linkTypeOf, t as headerItemsFromBlocks } from "./header-CznT9Uwv.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { ArrayField, FieldDescription, FieldError, FieldLabel, toast, useConfig, useField, useFieldPath, useTranslation } from "@payloadcms/ui";
+import { FloatingNavBlock } from "@bison-lab/ui";
+import { ArrayField, 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";
 //#region src/admin/link-field.tsx
 /**
 * The link picker: one box in place of a link's `type`, `page` and `href`.
@@ -239,7 +243,7 @@ const LinkField = ({ field, path, readOnly }) => {
 			/* @__PURE__ */ jsx("style", {
 				href: "bl-link-field",
 				precedence: "default",
-				children: CSS
+				children: CSS$1
 			}),
 			/* @__PURE__ */ jsx(FieldLabel, {
 				htmlFor: inputId,
@@ -341,7 +345,7 @@ const LinkField = ({ field, path, readOnly }) => {
 	});
 };
 /** Theme variables only: a literal colour would be right in one theme and wrong in the other. */
-const CSS = `
+const CSS$1 = `
 .bl-link-field__control{position:relative;display:flex;align-items:center;gap:calc(var(--base) * .4);min-height:calc(var(--base) * 2);padding:calc(var(--base) * .25) calc(var(--base) * .6);border:1px solid var(--theme-elevation-150);border-radius:var(--style-radius-s);background:var(--theme-input-bg);color:var(--theme-elevation-800);font-family:var(--font-body)}
 .bl-link-field__control:focus-within{border-color:var(--theme-elevation-400);box-shadow:0 0 0 1px var(--theme-elevation-400)}
 .bl-link-field__input{flex:1;min-width:0;border:0;background:transparent;color:inherit;font:inherit;outline:none}
@@ -435,6 +439,815 @@ function staticLabel(label, language) {
 	}
 }
 //#endregion
-export { LinkField, MinRowsArrayField };
+//#region src/admin/nav-items-field.tsx
+const WIDTHS = [
+	"25",
+	"33",
+	"50",
+	"66",
+	"75",
+	"100"
+];
+const LINK_ROW = {
+	type: "row",
+	fields: [
+		{
+			name: "type",
+			type: "radio"
+		},
+		{
+			name: "page",
+			type: "relationship",
+			relationTo: "pages"
+		},
+		{
+			name: "href",
+			type: "text"
+		}
+	]
+};
+const emptySection = () => ({
+	display: "list",
+	hideDescriptionsOnMobile: true,
+	links: []
+});
+const emptyColumn = () => ({
+	width: "100",
+	divider: false,
+	sections: [emptySection()]
+});
+const emptyPanel = () => ({
+	maxWidth: "standard",
+	columns: [emptyColumn()],
+	footer: {
+		overview: {},
+		cta: {}
+	}
+});
+const emptyLink = () => ({
+	blockType: "navLink",
+	label: "New item",
+	type: "page",
+	page: null,
+	href: null,
+	newTab: false
+});
+const emptyMega = () => ({
+	blockType: "megaMenu",
+	label: "New item",
+	type: "page",
+	page: null,
+	href: null,
+	newTab: false,
+	panel: emptyPanel()
+});
+function destinationOf(row) {
+	return {
+		type: row.type,
+		page: row.page,
+		href: row.href,
+		newTab: row.newTab,
+		label: row.label
+	};
+}
+/** Missing Theme fields so `themeHeadFromDoc` can run; the fetched document wins. */
+const THEME_SEED = {
+	brandPrimary: "#1e3a5f",
+	brandSecondary: "#2d9d6e",
+	brandAccent: "#e89b20",
+	brandHighlight: "#7c3aed",
+	brandSuccess: "#22c55e",
+	brandDestructive: "#b91c1c",
+	greyScale: "slate",
+	darkSelector: "[data-theme=\"dark\"]",
+	defaultTheme: "system",
+	radius: "rounded",
+	shadow: "subtle",
+	motion: "smooth",
+	density: "default",
+	fontBody: "inter",
+	fontHeading: "playfair-display",
+	fontWeights: {
+		normal: 400,
+		medium: 500,
+		semibold: 600,
+		bold: 700
+	}
+};
+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"]`);
+}
+function pageIdOf(value) {
+	if (value == null) return null;
+	if (typeof value === "object") {
+		const id = value.id;
+		return id == null ? null : String(id);
+	}
+	return String(value);
+}
+function collectPageIds(items) {
+	const ids = /* @__PURE__ */ new Set();
+	const take = (link) => {
+		const id = pageIdOf(link?.page);
+		if (id) ids.add(id);
+	};
+	for (const row of items) {
+		take(row);
+		const panel = row.panel;
+		take(panel?.footer?.overview);
+		take(panel?.footer?.cta);
+		for (const column of panel?.columns ?? []) for (const section of column.sections ?? []) for (const link of section.links ?? []) take(link);
+	}
+	return [...ids];
+}
+function ComposedLinkField({ path, parentPath, readOnly }) {
+	return /* @__PURE__ */ jsx(FieldPathContext.Provider, {
+		value: path,
+		children: /* @__PURE__ */ jsx(LinkField, {
+			field: LINK_ROW,
+			path,
+			parentPath,
+			indexPath: "0",
+			schemaPath: path,
+			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 { 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);
+	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]);
+	useEffect(() => {
+		const ids = pageIds ? pageIds.split(",") : [];
+		if (ids.length === 0) return;
+		let cancelled = false;
+		Promise.all(ids.map((id) => fetch(`${endpoint}/pages/${id}?depth=0`, { credentials: "include" }).then((response) => response.ok ? response.json() : null))).then((docs) => {
+			if (cancelled) return;
+			setPages(() => {
+				const next = /* @__PURE__ */ new Map();
+				for (const doc of docs) if (doc?.id != null) next.set(String(doc.id), doc);
+				return next;
+			});
+		}).catch(() => void 0);
+		return () => {
+			cancelled = true;
+		};
+	}, [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;
+	function add(blockType) {
+		const seed = blockType === "navLink" ? emptyLink() : emptyMega();
+		addFieldRow({
+			path,
+			schemaPath: path,
+			blockType,
+			subFieldState: Object.fromEntries(Object.entries(seed).filter(([key]) => key !== "blockType").map(([key, value]) => [key, {
+				value,
+				valid: true,
+				initialValue: value
+			}]))
+		});
+		setSelected(items.length);
+		setAdding(false);
+	}
+	function switchToLink() {
+		if (!current) return;
+		replaceFieldRow({
+			path,
+			schemaPath: path,
+			rowIndex: selected,
+			blockType: "navLink",
+			subFieldState: {
+				label: {
+					value: current.label,
+					valid: true
+				},
+				type: {
+					value: current.type,
+					valid: true
+				},
+				page: {
+					value: current.page,
+					valid: true
+				},
+				href: {
+					value: current.href,
+					valid: true
+				},
+				newTab: {
+					value: current.newTab,
+					valid: true
+				}
+			}
+		});
+		setConfirmSwitch(false);
+	}
+	function switchToMega() {
+		if (!current) return;
+		replaceFieldRow({
+			path,
+			schemaPath: path,
+			rowIndex: selected,
+			blockType: "megaMenu",
+			subFieldState: {
+				...Object.fromEntries(Object.entries(destinationOf(current)).map(([key, value]) => [key, {
+					value,
+					valid: true
+				}])),
+				panel: {
+					value: emptyPanel(),
+					valid: true
+				}
+			}
+		});
+	}
+	function requestType(next) {
+		if (!current || current.blockType === next) return;
+		if (current.blockType === "megaMenu" && next === "navLink") {
+			setConfirmSwitch(true);
+			return;
+		}
+		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);
+	}
+	const [themeCss, setThemeCss] = useState("");
+	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));
+		}).catch(() => void 0);
+		return () => {
+			cancelled = true;
+		};
+	}, [endpoint]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "bl-nav-items field-type",
+		children: [
+			/* @__PURE__ */ jsx("style", {
+				href: "bl-nav-items",
+				precedence: "default",
+				children: CSS
+			}),
+			themeCss ? /* @__PURE__ */ jsx("style", {
+				href: "bl-nav-items-theme",
+				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,
+									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__ */ 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",
+						className: "bl-nav-items__preview",
+						onClick: onPreviewClick,
+						children: /* @__PURE__ */ jsx(FloatingNavBlock, {
+							items: previewItems,
+							hideOnScroll: false,
+							breakpoint: "lg",
+							openItem,
+							className: "bl-nav-items__bar"
+						})
+					}),
+					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."
+					})
+				]
+			}),
+			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?",
+				cancelLabel: "Keep mega menu",
+				confirmLabel: "Switch to link",
+				onCancel: () => setConfirmSwitch(false),
+				onConfirm: switchToLink,
+				children: "This drops the columns, sections, and footer. The label and destination stay."
+			})
+		]
+	});
+};
+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__ */ 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"]
+			})
+		]
+	});
+}
+function MegaEditor({ path, index, panel, readOnly, onColumns, onPanel }) {
+	const columns = panel.columns ?? [];
+	const columnsError = useField({ path: `${path}.${index}.panel.columns` });
+	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__ */ 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"
+						})
+					]
+				}, 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"
+			}),
+			/* @__PURE__ */ jsx(FieldError, {
+				path: columnsError.path,
+				showError: columnsError.showError,
+				message: columnsError.errorMessage
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				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`,
+								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`,
+								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 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",
+					disabled: readOnly,
+					onClick: () => onChange({
+						...section,
+						display: "featured"
+					})
+				}), /* @__PURE__ */ jsx(TypeCard, {
+					label: "List",
+					active: section.display !== "featured",
+					disabled: readOnly,
+					onClick: () => onChange({
+						...section,
+						display: "list"
+					})
+				})]
+			}),
+			/* @__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
+					})
+				}), "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
+				})]
+			}, 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__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__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__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}}
+`;
+//#endregion
+export { LinkField, MinRowsArrayField, NavItemsField };
 
 //# sourceMappingURL=admin.mjs.map