@alfakit/react 0.0.0-stage → 0.1.0

package/dist/components/cms/live-preview-lazy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"live-preview-lazy.js","names":[],"sources":["../../../src/components/cms/live-preview-lazy.tsx"],"sourcesContent":["import type { CmsLivePreviewSchema } from '@alfakit/core'\nimport { lazyComponent } from '../../lib/lazy'\n\n/** The live preview; its code loads the first time a page editor is opened. */\nexport const CmsLivePreview = lazyComponent<{ component: CmsLivePreviewSchema }>(\n  () => import('./live-preview').then((module) => module.CmsLivePreview),\n  () => <div data-slot=\"cms-live-preview\" className=\"h-8\" aria-hidden=\"true\" />,\n)\n"],"mappings":";;;;AAIA,MAAa,iBAAiB,oBACtB,OAAO,oBAAiB,CAAC,MAAM,WAAW,OAAO,cAAc,SAC/D,oBAAC,OAAD;CAAK,aAAU;CAAmB,WAAU;CAAM,eAAY;AAAQ,CAAA,CAC9E"}

package/dist/components/cms/live-preview.js

@@ -0,0 +1,288 @@
+import { usePageSchema, usePanel, useT } from "../../context.js";
+import { cn } from "../../lib/utils.js";
+import { Badge } from "../ui/badge.js";
+import { Button } from "../ui/button.js";
+import { ActionList } from "../actions/action-list.js";
+import { useOptionalFormStore } from "../form/form-context.js";
+import { CMS_PREVIEW_DEVICES, CmsAutosave, callCmsAutosave, cmsPreviewFitsBeside, cmsPreviewOpensOnLoad, rememberedCmsPreview, reserveCmsPreviewSpace, resolveStickyOffset } from "@alfakit/core";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, CircleAlertIcon, EyeIcon, LoaderCircleIcon, Maximize2Icon, Minimize2Icon, MonitorIcon, SmartphoneIcon, TabletIcon, XIcon } from "lucide-react";
+//#region src/components/cms/live-preview.tsx
+/** Badge colours of the status (the server's `PageState` colours). */
+const STATUS_COLORS = {
+	gray: "border-border bg-muted text-foreground",
+	success: "border-emerald-600/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300",
+	warning: "border-amber-600/30 bg-amber-500/10 text-amber-700 dark:text-amber-300",
+	info: "border-sky-600/30 bg-sky-500/10 text-sky-700 dark:text-sky-300",
+	danger: "border-red-600/30 bg-red-500/10 text-red-700 dark:text-red-300"
+};
+const DEVICE_ICONS = {
+	desktop: MonitorIcon,
+	tablet: TabletIcon,
+	phone: SmartphoneIcon
+};
+const DEVICE_LABELS = {
+	desktop: "Desktop",
+	tablet: "Tablet",
+	phone: "Phone"
+};
+/**
+* The page editor's autosave status and live preview (schema type `CmsLivePreview`).
+* Changes are autosaved as a draft a moment after typing stops; the preview pane shows
+* the signed preview of that draft beside the form, full screen, or at tablet and phone
+* widths.
+*/
+function CmsLivePreview({ component }) {
+	const t = useT();
+	const form = useOptionalFormStore();
+	const page = usePageSchema();
+	const panel = usePanel();
+	const latest = useRef({
+		token: page?.token ?? "",
+		endpoint: panel?.endpoints?.pageCall ?? ""
+	});
+	const [snapshot, setSnapshot] = useState({
+		status: component.savedAt ? "saved" : "idle",
+		savedAt: component.savedAt ?? null,
+		previewUrl: component.previewUrl,
+		version: 0,
+		hasChanges: component.hasChanges ?? false
+	});
+	const [top, setTop] = useState("0px");
+	const actionContext = useMemo(() => ({
+		token: page?.token ?? "",
+		component: "page"
+	}), [page?.token]);
+	const [open, setOpenState] = useState(false);
+	const [fullScreen, setFullScreen] = useState(false);
+	const [overlay, setOverlay] = useState(false);
+	const expanded = fullScreen || overlay;
+	const [device, setDevice] = useState("desktop");
+	const root = useRef(null);
+	const autosaveRef = useRef(null);
+	const status = snapshot.hasChanges && component.changedStatus ? component.changedStatus : component.status;
+	useEffect(() => {
+		const frame = requestAnimationFrame(() => {
+			setTop(resolveStickyOffset(null));
+			if (component.previewUrl && cmsPreviewOpensOnLoad(root.current)) setOpenState(true);
+		});
+		return () => cancelAnimationFrame(frame);
+	}, [component.previewUrl]);
+	/** Open or collapse the pane, remembering the choice for the next visit. */
+	const setOpen = (next) => {
+		if (next) setOverlay(!cmsPreviewFitsBeside(root.current));
+		setOpenState(next);
+		rememberedCmsPreview(next ? "open" : "closed");
+	};
+	useEffect(() => {
+		latest.current = {
+			token: page?.token ?? "",
+			endpoint: panel?.endpoints?.pageCall ?? ""
+		};
+	});
+	useEffect(() => {
+		if (!form) return;
+		const autosave = new CmsAutosave({
+			debounce: component.debounce,
+			previewUrl: component.previewUrl,
+			savedAt: component.savedAt,
+			hasChanges: component.hasChanges,
+			save: (state) => callCmsAutosave(component.autosaveMethod, state, latest.current),
+			onChange: setSnapshot
+		});
+		autosaveRef.current = autosave;
+		let values = form.state.values;
+		const unsubscribe = form.subscribe((state) => {
+			if (state.values !== values) {
+				values = state.values;
+				autosave.schedule(state.values);
+			}
+		});
+		return () => {
+			unsubscribe();
+			autosave.flush().finally(() => autosave.dispose());
+		};
+	}, [
+		form,
+		component.autosaveMethod,
+		component.debounce,
+		component.previewUrl,
+		component.savedAt
+	]);
+	useEffect(() => {
+		if (!open) return;
+		const measure = () => setOverlay(!cmsPreviewFitsBeside(root.current));
+		measure();
+		window.addEventListener("resize", measure);
+		return () => window.removeEventListener("resize", measure);
+	}, [open]);
+	useEffect(() => {
+		if (!open || expanded) return;
+		return reserveCmsPreviewSpace(root.current, "min(50vw, 56rem)");
+	}, [open, expanded]);
+	useEffect(() => {
+		if (!open) return;
+		const onKey = (event) => {
+			if (event.key !== "Escape") return;
+			if (fullScreen && !overlay) setFullScreen(false);
+			else {
+				setOpenState(false);
+				rememberedCmsPreview("closed");
+			}
+		};
+		window.addEventListener("keydown", onKey);
+		return () => window.removeEventListener("keydown", onKey);
+	}, [
+		open,
+		fullScreen,
+		overlay
+	]);
+	const width = CMS_PREVIEW_DEVICES[device];
+	return /* @__PURE__ */ jsxs("div", {
+		ref: root,
+		"data-slot": "cms-live-preview",
+		style: { top },
+		className: "bg-background sticky z-20 flex flex-wrap items-center gap-x-4 gap-y-2 rounded-xl border px-3 py-2.5 shadow-sm",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-1 basis-64 flex-col gap-0.5",
+				children: [status && /* @__PURE__ */ jsxs("p", {
+					className: "flex flex-wrap items-center gap-x-2 gap-y-1 text-sm",
+					"data-slot": "cms-editor-status",
+					children: [/* @__PURE__ */ jsx(Badge, {
+						variant: "outline",
+						"data-color": status.color,
+						className: STATUS_COLORS[status.color] ?? "",
+						children: status.label
+					}), /* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground",
+						children: status.description
+					})]
+				}), /* @__PURE__ */ jsxs("p", {
+					className: "text-muted-foreground flex min-h-4 items-center gap-1.5 text-xs",
+					role: "status",
+					"aria-live": "polite",
+					children: [/* @__PURE__ */ jsx(StatusIcon, { status: snapshot.status }), statusLabel(snapshot.status, t)]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center gap-2",
+				children: [snapshot.previewUrl && /* @__PURE__ */ jsxs(Button, {
+					type: "button",
+					variant: open ? "secondary" : "outline",
+					size: "sm",
+					"aria-pressed": open,
+					title: t("cms.live_preview_help", {}, "See the page as visitors will, updated as you type."),
+					onClick: () => setOpen(!open),
+					"data-slot": "cms-live-preview-toggle",
+					children: [/* @__PURE__ */ jsx(EyeIcon, { "aria-hidden": "true" }), open ? t("cms.hide_preview", {}, "Hide preview") : t("cms.live_preview", {}, "Live preview")]
+				}), component.actions && component.actions.length > 0 && /* @__PURE__ */ jsx("div", {
+					onPointerDownCapture: () => void autosaveRef.current?.flush(),
+					children: /* @__PURE__ */ jsx(ActionList, {
+						actions: component.actions,
+						context: actionContext,
+						size: "sm"
+					})
+				})]
+			}),
+			open && snapshot.previewUrl && /* @__PURE__ */ jsxs("section", {
+				"aria-label": t("cms.live_preview", {}, "Live preview"),
+				"data-slot": "cms-live-preview-pane",
+				"data-full-screen": expanded || void 0,
+				style: { top: expanded ? "0px" : top },
+				className: cn("bg-background fixed end-0 bottom-0 z-50 flex flex-col border-s shadow-xl", expanded ? "inset-x-0 border-s-0" : "w-full lg:w-[min(50vw,56rem)]"),
+				children: [/* @__PURE__ */ jsxs("header", {
+					className: "flex items-center justify-between gap-2 border-b px-3 py-2",
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							className: "flex items-center gap-1",
+							role: "group",
+							"aria-label": t("cms.preview_width", {}, "Preview width"),
+							children: Object.keys(CMS_PREVIEW_DEVICES).map((name) => {
+								const DeviceIcon = DEVICE_ICONS[name];
+								return /* @__PURE__ */ jsxs(Button, {
+									type: "button",
+									variant: device === name ? "secondary" : "ghost",
+									size: "icon-sm",
+									"aria-pressed": device === name,
+									onClick: () => setDevice(name),
+									children: [/* @__PURE__ */ jsx(DeviceIcon, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", {
+										className: "sr-only",
+										children: t(`cms.device_${name}`, {}, DEVICE_LABELS[name])
+									})]
+								}, name);
+							})
+						}),
+						/* @__PURE__ */ jsx("p", {
+							className: "text-muted-foreground hidden truncate text-xs sm:block",
+							children: statusLabel(snapshot.status, t)
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-1",
+							children: [!overlay && /* @__PURE__ */ jsxs(Button, {
+								type: "button",
+								variant: "ghost",
+								size: "icon-sm",
+								"aria-pressed": fullScreen,
+								onClick: () => setFullScreen(!fullScreen),
+								children: [fullScreen ? /* @__PURE__ */ jsx(Minimize2Icon, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Maximize2Icon, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", {
+									className: "sr-only",
+									children: fullScreen ? t("cms.exit_full_screen", {}, "Exit full screen") : t("cms.full_screen", {}, "Full screen")
+								})]
+							}), /* @__PURE__ */ jsxs(Button, {
+								type: "button",
+								variant: "ghost",
+								size: "icon-sm",
+								onClick: () => setOpen(false),
+								children: [/* @__PURE__ */ jsx(XIcon, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", {
+									className: "sr-only",
+									children: t("cms.close_preview", {}, "Close preview")
+								})]
+							})]
+						})
+					]
+				}), /* @__PURE__ */ jsx("div", {
+					className: "bg-muted/40 flex flex-1 justify-center overflow-auto p-3",
+					children: /* @__PURE__ */ jsx("iframe", {
+						src: snapshot.previewUrl,
+						title: t("cms.preview_frame", {}, "Page preview"),
+						className: "bg-background h-full rounded-md border shadow-sm",
+						style: {
+							width: width === null ? "100%" : `${width}px`,
+							maxWidth: "100%"
+						}
+					}, snapshot.version)
+				})]
+			})
+		]
+	});
+}
+function StatusIcon({ status }) {
+	if (status === "saving") return /* @__PURE__ */ jsx(LoaderCircleIcon, {
+		className: "size-4 animate-spin",
+		"aria-hidden": "true"
+	});
+	if (status === "error") return /* @__PURE__ */ jsx(CircleAlertIcon, {
+		className: "text-destructive size-4",
+		"aria-hidden": "true"
+	});
+	if (status === "saved") return /* @__PURE__ */ jsx(CheckIcon, {
+		className: "size-4",
+		"aria-hidden": "true"
+	});
+	return null;
+}
+function statusLabel(status, t) {
+	switch (status) {
+		case "saving": return t("cms.saving", {}, "Saving…");
+		case "saved": return t("cms.saved", {}, "Draft saved automatically");
+		case "pending": return t("cms.unsaved", {}, "Unsaved changes");
+		case "error": return t("cms.save_failed", {}, "Your latest changes couldn't be saved. They will be tried again.");
+		default: return "";
+	}
+}
+//#endregion
+export { CmsLivePreview };
+
+//# sourceMappingURL=live-preview.js.map

package/dist/components/cms/live-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"live-preview.js","names":[],"sources":["../../../src/components/cms/live-preview.tsx"],"sourcesContent":["import {\n  CMS_PREVIEW_DEVICES,\n  CmsAutosave,\n  callCmsAutosave,\n  cmsPreviewFitsBeside,\n  cmsPreviewOpensOnLoad,\n  rememberedCmsPreview,\n  reserveCmsPreviewSpace,\n  resolveStickyOffset,\n  type CmsAutosaveSnapshot,\n  type CmsLivePreviewSchema,\n  type CmsPreviewDevice,\n} from '@alfakit/core'\nimport {\n  CheckIcon,\n  CircleAlertIcon,\n  EyeIcon,\n  LoaderCircleIcon,\n  Maximize2Icon,\n  Minimize2Icon,\n  MonitorIcon,\n  SmartphoneIcon,\n  TabletIcon,\n  XIcon,\n} from 'lucide-react'\nimport { useEffect, useMemo, useRef, useState } from 'react'\nimport { usePageSchema, usePanel, useT } from '../../context'\nimport { cn } from '../../lib/utils'\nimport { ActionList } from '../actions/action-list'\nimport { useOptionalFormStore } from '../form/form-context'\nimport { Badge } from '../ui/badge'\nimport { Button } from '../ui/button'\n\n/** Badge colours of the status (the server's `PageState` colours). */\nconst STATUS_COLORS: Record<string, string> = {\n  gray: 'border-border bg-muted text-foreground',\n  success: 'border-emerald-600/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300',\n  warning: 'border-amber-600/30 bg-amber-500/10 text-amber-700 dark:text-amber-300',\n  info: 'border-sky-600/30 bg-sky-500/10 text-sky-700 dark:text-sky-300',\n  danger: 'border-red-600/30 bg-red-500/10 text-red-700 dark:text-red-300',\n}\n\nconst DEVICE_ICONS = { desktop: MonitorIcon, tablet: TabletIcon, phone: SmartphoneIcon }\nconst DEVICE_LABELS = { desktop: 'Desktop', tablet: 'Tablet', phone: 'Phone' }\n\n/**\n * The page editor's autosave status and live preview (schema type `CmsLivePreview`).\n * Changes are autosaved as a draft a moment after typing stops; the preview pane shows\n * the signed preview of that draft beside the form, full screen, or at tablet and phone\n * widths.\n */\nexport function CmsLivePreview({ component }: { component: CmsLivePreviewSchema }) {\n  const t = useT()\n  const form = useOptionalFormStore()\n  const page = usePageSchema()\n  const panel = usePanel()\n  const latest = useRef({ token: page?.token ?? '', endpoint: panel?.endpoints?.pageCall ?? '' })\n  const [snapshot, setSnapshot] = useState<CmsAutosaveSnapshot>({\n    status: component.savedAt ? 'saved' : 'idle',\n    savedAt: component.savedAt ?? null,\n    previewUrl: component.previewUrl,\n    version: 0,\n    hasChanges: component.hasChanges ?? false,\n  })\n  const [top, setTop] = useState('0px')\n  const actionContext = useMemo(\n    () => ({ token: page?.token ?? '', component: 'page' }),\n    [page?.token],\n  )\n\n  const [open, setOpenState] = useState(false)\n  const [fullScreen, setFullScreen] = useState(false)\n  // Too narrow for the form beside the pane (e.g. 1280px with the sidebar): full-screen overlay.\n  const [overlay, setOverlay] = useState(false)\n  const expanded = fullScreen || overlay\n  const [device, setDevice] = useState<CmsPreviewDevice>('desktop')\n  const root = useRef<HTMLDivElement>(null)\n  const autosaveRef = useRef<CmsAutosave | null>(null)\n  const status =\n    snapshot.hasChanges && component.changedStatus ? component.changedStatus : component.status\n\n  // Measured in the browser after mounting: stick right under the panel's topbar when it\n  // sticks too, and open the pane beside the form on wide screens (the viewer's last\n  // choice wins).\n  useEffect(() => {\n    const frame = requestAnimationFrame(() => {\n      setTop(resolveStickyOffset(null))\n      if (component.previewUrl && cmsPreviewOpensOnLoad(root.current)) setOpenState(true)\n    })\n\n    return () => cancelAnimationFrame(frame)\n  }, [component.previewUrl])\n\n  /** Open or collapse the pane, remembering the choice for the next visit. */\n  const setOpen = (next: boolean) => {\n    // Decided in the same render as opening, so the form never makes room for nothing.\n    if (next) setOverlay(!cmsPreviewFitsBeside(root.current))\n    setOpenState(next)\n    rememberedCmsPreview(next ? 'open' : 'closed')\n  }\n\n  useEffect(() => {\n    latest.current = { token: page?.token ?? '', endpoint: panel?.endpoints?.pageCall ?? '' }\n  })\n\n  useEffect(() => {\n    if (!form) return\n\n    const autosave = new CmsAutosave({\n      debounce: component.debounce,\n      previewUrl: component.previewUrl,\n      savedAt: component.savedAt,\n      hasChanges: component.hasChanges,\n      save: (state) => callCmsAutosave(component.autosaveMethod, state, latest.current),\n      onChange: setSnapshot,\n    })\n\n    autosaveRef.current = autosave\n    let values = form.state.values\n    const unsubscribe = form.subscribe((state) => {\n      if (state.values !== values) {\n        values = state.values\n        autosave.schedule(state.values)\n      }\n    })\n\n    return () => {\n      unsubscribe()\n      void autosave.flush().finally(() => autosave.dispose())\n    }\n  }, [form, component.autosaveMethod, component.debounce, component.previewUrl, component.savedAt])\n\n  // Measure whether the pane fits beside the form while it is open, and again on resize.\n  useEffect(() => {\n    if (!open) return\n\n    const measure = () => setOverlay(!cmsPreviewFitsBeside(root.current))\n    measure()\n    window.addEventListener('resize', measure)\n\n    return () => window.removeEventListener('resize', measure)\n  }, [open])\n\n  // Side by side, the form makes room for the pane.\n  useEffect(() => {\n    if (!open || expanded) return\n\n    return reserveCmsPreviewSpace(root.current, 'min(50vw, 56rem)')\n  }, [open, expanded])\n\n  useEffect(() => {\n    if (!open) return\n\n    const onKey = (event: KeyboardEvent) => {\n      if (event.key !== 'Escape') return\n      if (fullScreen && !overlay) setFullScreen(false)\n      else {\n        setOpenState(false)\n        rememberedCmsPreview('closed')\n      }\n    }\n\n    window.addEventListener('keydown', onKey)\n\n    return () => window.removeEventListener('keydown', onKey)\n  }, [open, fullScreen, overlay])\n\n  const width = CMS_PREVIEW_DEVICES[device]\n\n  return (\n    <div\n      ref={root}\n      data-slot=\"cms-live-preview\"\n      style={{ top }}\n      className=\"bg-background sticky z-20 flex flex-wrap items-center gap-x-4 gap-y-2 rounded-xl border px-3 py-2.5 shadow-sm\"\n    >\n      <div className=\"flex min-w-0 flex-1 basis-64 flex-col gap-0.5\">\n        {status && (\n          <p\n            className=\"flex flex-wrap items-center gap-x-2 gap-y-1 text-sm\"\n            data-slot=\"cms-editor-status\"\n          >\n            <Badge\n              variant=\"outline\"\n              data-color={status.color}\n              className={STATUS_COLORS[status.color] ?? ''}\n            >\n              {status.label}\n            </Badge>\n            <span className=\"text-muted-foreground\">{status.description}</span>\n          </p>\n        )}\n        <p\n          className=\"text-muted-foreground flex min-h-4 items-center gap-1.5 text-xs\"\n          role=\"status\"\n          aria-live=\"polite\"\n        >\n          <StatusIcon status={snapshot.status} />\n          {statusLabel(snapshot.status, t)}\n        </p>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        {snapshot.previewUrl && (\n          <Button\n            type=\"button\"\n            variant={open ? 'secondary' : 'outline'}\n            size=\"sm\"\n            aria-pressed={open}\n            title={t(\n              'cms.live_preview_help',\n              {},\n              'See the page as visitors will, updated as you type.',\n            )}\n            onClick={() => setOpen(!open)}\n            data-slot=\"cms-live-preview-toggle\"\n          >\n            <EyeIcon aria-hidden=\"true\" />\n            {open\n              ? t('cms.hide_preview', {}, 'Hide preview')\n              : t('cms.live_preview', {}, 'Live preview')}\n          </Button>\n        )}\n        {component.actions && component.actions.length > 0 && (\n          <div onPointerDownCapture={() => void autosaveRef.current?.flush()}>\n            <ActionList actions={component.actions} context={actionContext} size=\"sm\" />\n          </div>\n        )}\n      </div>\n      {open && snapshot.previewUrl && (\n        <section\n          aria-label={t('cms.live_preview', {}, 'Live preview')}\n          data-slot=\"cms-live-preview-pane\"\n          data-full-screen={expanded || undefined}\n          // Beside the form it starts below the sticky topbar, keeping the topbar usable.\n          style={{ top: expanded ? '0px' : top }}\n          className={cn(\n            'bg-background fixed end-0 bottom-0 z-50 flex flex-col border-s shadow-xl',\n            expanded ? 'inset-x-0 border-s-0' : 'w-full lg:w-[min(50vw,56rem)]',\n          )}\n        >\n          <header className=\"flex items-center justify-between gap-2 border-b px-3 py-2\">\n            <div\n              className=\"flex items-center gap-1\"\n              role=\"group\"\n              aria-label={t('cms.preview_width', {}, 'Preview width')}\n            >\n              {(Object.keys(CMS_PREVIEW_DEVICES) as CmsPreviewDevice[]).map((name) => {\n                const DeviceIcon = DEVICE_ICONS[name]\n\n                return (\n                  <Button\n                    key={name}\n                    type=\"button\"\n                    variant={device === name ? 'secondary' : 'ghost'}\n                    size=\"icon-sm\"\n                    aria-pressed={device === name}\n                    onClick={() => setDevice(name)}\n                  >\n                    <DeviceIcon aria-hidden=\"true\" />\n                    <span className=\"sr-only\">\n                      {t(`cms.device_${name}`, {}, DEVICE_LABELS[name])}\n                    </span>\n                  </Button>\n                )\n              })}\n            </div>\n            <p className=\"text-muted-foreground hidden truncate text-xs sm:block\">\n              {statusLabel(snapshot.status, t)}\n            </p>\n            <div className=\"flex items-center gap-1\">\n              {!overlay && (\n                <Button\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  aria-pressed={fullScreen}\n                  onClick={() => setFullScreen(!fullScreen)}\n                >\n                  {fullScreen ? (\n                    <Minimize2Icon aria-hidden=\"true\" />\n                  ) : (\n                    <Maximize2Icon aria-hidden=\"true\" />\n                  )}\n                  <span className=\"sr-only\">\n                    {fullScreen\n                      ? t('cms.exit_full_screen', {}, 'Exit full screen')\n                      : t('cms.full_screen', {}, 'Full screen')}\n                  </span>\n                </Button>\n              )}\n              <Button type=\"button\" variant=\"ghost\" size=\"icon-sm\" onClick={() => setOpen(false)}>\n                <XIcon aria-hidden=\"true\" />\n                <span className=\"sr-only\">{t('cms.close_preview', {}, 'Close preview')}</span>\n              </Button>\n            </div>\n          </header>\n          <div className=\"bg-muted/40 flex flex-1 justify-center overflow-auto p-3\">\n            <iframe\n              key={snapshot.version}\n              src={snapshot.previewUrl}\n              title={t('cms.preview_frame', {}, 'Page preview')}\n              className=\"bg-background h-full rounded-md border shadow-sm\"\n              style={{ width: width === null ? '100%' : `${width}px`, maxWidth: '100%' }}\n            />\n          </div>\n        </section>\n      )}\n    </div>\n  )\n}\n\nfunction StatusIcon({ status }: { status: CmsAutosaveSnapshot['status'] }) {\n  if (status === 'saving')\n    return <LoaderCircleIcon className=\"size-4 animate-spin\" aria-hidden=\"true\" />\n  if (status === 'error')\n    return <CircleAlertIcon className=\"text-destructive size-4\" aria-hidden=\"true\" />\n  if (status === 'saved') return <CheckIcon className=\"size-4\" aria-hidden=\"true\" />\n\n  return null\n}\n\nfunction statusLabel(status: CmsAutosaveSnapshot['status'], t: ReturnType<typeof useT>): string {\n  switch (status) {\n    case 'saving':\n      return t('cms.saving', {}, 'Saving…')\n    case 'saved':\n      return t('cms.saved', {}, 'Draft saved automatically')\n    case 'pending':\n      return t('cms.unsaved', {}, 'Unsaved changes')\n    case 'error':\n      return t(\n        'cms.save_failed',\n        {},\n        \"Your latest changes couldn't be saved. They will be tried again.\",\n      )\n    default:\n      return ''\n  }\n}\n"],"mappings":";;;;;;;;;;;;AAkCA,MAAM,gBAAwC;CAC5C,MAAM;CACN,SAAS;CACT,SAAS;CACT,MAAM;CACN,QAAQ;AACV;AAEA,MAAM,eAAe;CAAE,SAAS;CAAa,QAAQ;CAAY,OAAO;AAAe;AACvF,MAAM,gBAAgB;CAAE,SAAS;CAAW,QAAQ;CAAU,OAAO;AAAQ;;;;;;;AAQ7E,SAAgB,eAAe,EAAE,aAAkD;CACjF,MAAM,IAAI,KAAK;CACf,MAAM,OAAO,qBAAqB;CAClC,MAAM,OAAO,cAAc;CAC3B,MAAM,QAAQ,SAAS;CACvB,MAAM,SAAS,OAAO;EAAE,OAAO,MAAM,SAAS;EAAI,UAAU,OAAO,WAAW,YAAY;CAAG,CAAC;CAC9F,MAAM,CAAC,UAAU,eAAe,SAA8B;EAC5D,QAAQ,UAAU,UAAU,UAAU;EACtC,SAAS,UAAU,WAAW;EAC9B,YAAY,UAAU;EACtB,SAAS;EACT,YAAY,UAAU,cAAc;CACtC,CAAC;CACD,MAAM,CAAC,KAAK,UAAU,SAAS,KAAK;CACpC,MAAM,gBAAgB,eACb;EAAE,OAAO,MAAM,SAAS;EAAI,WAAW;CAAO,IACrD,CAAC,MAAM,KAAK,CACd;CAEA,MAAM,CAAC,MAAM,gBAAgB,SAAS,KAAK;CAC3C,MAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;CAElD,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,MAAM,WAAW,cAAc;CAC/B,MAAM,CAAC,QAAQ,aAAa,SAA2B,SAAS;CAChE,MAAM,OAAO,OAAuB,IAAI;CACxC,MAAM,cAAc,OAA2B,IAAI;CACnD,MAAM,SACJ,SAAS,cAAc,UAAU,gBAAgB,UAAU,gBAAgB,UAAU;CAKvF,gBAAgB;EACd,MAAM,QAAQ,4BAA4B;GACxC,OAAO,oBAAoB,IAAI,CAAC;GAChC,IAAI,UAAU,cAAc,sBAAsB,KAAK,OAAO,GAAG,aAAa,IAAI;EACpF,CAAC;EAED,aAAa,qBAAqB,KAAK;CACzC,GAAG,CAAC,UAAU,UAAU,CAAC;;CAGzB,MAAM,WAAW,SAAkB;EAEjC,IAAI,MAAM,WAAW,CAAC,qBAAqB,KAAK,OAAO,CAAC;EACxD,aAAa,IAAI;EACjB,qBAAqB,OAAO,SAAS,QAAQ;CAC/C;CAEA,gBAAgB;EACd,OAAO,UAAU;GAAE,OAAO,MAAM,SAAS;GAAI,UAAU,OAAO,WAAW,YAAY;EAAG;CAC1F,CAAC;CAED,gBAAgB;EACd,IAAI,CAAC,MAAM;EAEX,MAAM,WAAW,IAAI,YAAY;GAC/B,UAAU,UAAU;GACpB,YAAY,UAAU;GACtB,SAAS,UAAU;GACnB,YAAY,UAAU;GACtB,OAAO,UAAU,gBAAgB,UAAU,gBAAgB,OAAO,OAAO,OAAO;GAChF,UAAU;EACZ,CAAC;EAED,YAAY,UAAU;EACtB,IAAI,SAAS,KAAK,MAAM;EACxB,MAAM,cAAc,KAAK,WAAW,UAAU;GAC5C,IAAI,MAAM,WAAW,QAAQ;IAC3B,SAAS,MAAM;IACf,SAAS,SAAS,MAAM,MAAM;GAChC;EACF,CAAC;EAED,aAAa;GACX,YAAY;GACZ,SAAc,MAAM,CAAC,CAAC,cAAc,SAAS,QAAQ,CAAC;EACxD;CACF,GAAG;EAAC;EAAM,UAAU;EAAgB,UAAU;EAAU,UAAU;EAAY,UAAU;CAAO,CAAC;CAGhG,gBAAgB;EACd,IAAI,CAAC,MAAM;EAEX,MAAM,gBAAgB,WAAW,CAAC,qBAAqB,KAAK,OAAO,CAAC;EACpE,QAAQ;EACR,OAAO,iBAAiB,UAAU,OAAO;EAEzC,aAAa,OAAO,oBAAoB,UAAU,OAAO;CAC3D,GAAG,CAAC,IAAI,CAAC;CAGT,gBAAgB;EACd,IAAI,CAAC,QAAQ,UAAU;EAEvB,OAAO,uBAAuB,KAAK,SAAS,kBAAkB;CAChE,GAAG,CAAC,MAAM,QAAQ,CAAC;CAEnB,gBAAgB;EACd,IAAI,CAAC,MAAM;EAEX,MAAM,SAAS,UAAyB;GACtC,IAAI,MAAM,QAAQ,UAAU;GAC5B,IAAI,cAAc,CAAC,SAAS,cAAc,KAAK;QAC1C;IACH,aAAa,KAAK;IAClB,qBAAqB,QAAQ;GAC/B;EACF;EAEA,OAAO,iBAAiB,WAAW,KAAK;EAExC,aAAa,OAAO,oBAAoB,WAAW,KAAK;CAC1D,GAAG;EAAC;EAAM;EAAY;CAAO,CAAC;CAE9B,MAAM,QAAQ,oBAAoB;CAElC,OACE,qBAAC,OAAD;EACE,KAAK;EACL,aAAU;EACV,OAAO,EAAE,IAAI;EACb,WAAU;EAJZ,UAAA;GAME,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,UACC,qBAAC,KAAD;KACE,WAAU;KACV,aAAU;KAFZ,UAAA,CAIE,oBAAC,OAAD;MACE,SAAQ;MACR,cAAY,OAAO;MACnB,WAAW,cAAc,OAAO,UAAU;MAEzC,UAAA,OAAO;KACH,CAAA,GACP,oBAAC,QAAD;MAAM,WAAU;MAAyB,UAAA,OAAO;KAAkB,CAAA,CACjE;IAEL,CAAA,GAAA,qBAAC,KAAD;KACE,WAAU;KACV,MAAK;KACL,aAAU;KAHZ,UAAA,CAKE,oBAAC,YAAD,EAAY,QAAQ,SAAS,OAAS,CAAA,GACrC,YAAY,SAAS,QAAQ,CAAC,CAC9B;IACA,CAAA,CAAA;;GACL,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,SAAS,cACR,qBAAC,QAAD;KACE,MAAK;KACL,SAAS,OAAO,cAAc;KAC9B,MAAK;KACL,gBAAc;KACd,OAAO,EACL,yBACA,CAAC,GACD,qDACF;KACA,eAAe,QAAQ,CAAC,IAAI;KAC5B,aAAU;KAXZ,UAAA,CAaE,oBAAC,SAAD,EAAS,eAAY,OAAQ,CAAA,GAC5B,OACG,EAAE,oBAAoB,CAAC,GAAG,cAAc,IACxC,EAAE,oBAAoB,CAAC,GAAG,cAAc,CACtC;IAET,CAAA,GAAA,UAAU,WAAW,UAAU,QAAQ,SAAS,KAC/C,oBAAC,OAAD;KAAK,4BAA4B,KAAK,YAAY,SAAS,MAAM;KAC/D,UAAA,oBAAC,YAAD;MAAY,SAAS,UAAU;MAAS,SAAS;MAAe,MAAK;KAAM,CAAA;IACxE,CAAA,CAEJ;;GACJ,QAAQ,SAAS,cAChB,qBAAC,WAAD;IACE,cAAY,EAAE,oBAAoB,CAAC,GAAG,cAAc;IACpD,aAAU;IACV,oBAAkB,YAAY,KAAA;IAE9B,OAAO,EAAE,KAAK,WAAW,QAAQ,IAAI;IACrC,WAAW,GACT,4EACA,WAAW,yBAAyB,+BACtC;IATF,UAAA,CAWE,qBAAC,UAAD;KAAQ,WAAU;KAAlB,UAAA;MACE,oBAAC,OAAD;OACE,WAAU;OACV,MAAK;OACL,cAAY,EAAE,qBAAqB,CAAC,GAAG,eAAe;OAEpD,UAAA,OAAO,KAAK,mBAAmB,CAAC,CAAwB,KAAK,SAAS;QACtE,MAAM,aAAa,aAAa;QAEhC,OACE,qBAAC,QAAD;SAEE,MAAK;SACL,SAAS,WAAW,OAAO,cAAc;SACzC,MAAK;SACL,gBAAc,WAAW;SACzB,eAAe,UAAU,IAAI;SAN/B,UAAA,CAQE,oBAAC,YAAD,EAAY,eAAY,OAAQ,CAAA,GAChC,oBAAC,QAAD;UAAM,WAAU;UACb,UAAA,EAAE,cAAc,QAAQ,CAAC,GAAG,cAAc,KAAK;SAC5C,CAAA,CACA;QAXD,GAAA,IAWC;OAEZ,CAAC;MACE,CAAA;MACL,oBAAC,KAAD;OAAG,WAAU;OACV,UAAA,YAAY,SAAS,QAAQ,CAAC;MAC9B,CAAA;MACH,qBAAC,OAAD;OAAK,WAAU;OAAf,UAAA,CACG,CAAC,WACA,qBAAC,QAAD;QACE,MAAK;QACL,SAAQ;QACR,MAAK;QACL,gBAAc;QACd,eAAe,cAAc,CAAC,UAAU;QAL1C,UAAA,CAOG,aACC,oBAAC,eAAD,EAAe,eAAY,OAAQ,CAAA,IAEnC,oBAAC,eAAD,EAAe,eAAY,OAAQ,CAAA,GAErC,oBAAC,QAAD;SAAM,WAAU;SACb,UAAA,aACG,EAAE,wBAAwB,CAAC,GAAG,kBAAkB,IAChD,EAAE,mBAAmB,CAAC,GAAG,aAAa;QACtC,CAAA,CACA;OAEV,CAAA,GAAA,qBAAC,QAAD;QAAQ,MAAK;QAAS,SAAQ;QAAQ,MAAK;QAAU,eAAe,QAAQ,KAAK;QAAjF,UAAA,CACE,oBAAC,OAAD,EAAO,eAAY,OAAQ,CAAA,GAC3B,oBAAC,QAAD;SAAM,WAAU;SAAW,UAAA,EAAE,qBAAqB,CAAC,GAAG,eAAe;QAAQ,CAAA,CACvE;OACL,CAAA,CAAA;;KACC;IACR,CAAA,GAAA,oBAAC,OAAD;KAAK,WAAU;KACb,UAAA,oBAAC,UAAD;MAEE,KAAK,SAAS;MACd,OAAO,EAAE,qBAAqB,CAAC,GAAG,cAAc;MAChD,WAAU;MACV,OAAO;OAAE,OAAO,UAAU,OAAO,SAAS,GAAG,MAAM;OAAK,UAAU;MAAO;KAC1E,GALM,SAAS,OAKf;IACE,CAAA,CACE;;EAER;;AAET;AAEA,SAAS,WAAW,EAAE,UAAqD;CACzE,IAAI,WAAW,UACb,OAAO,oBAAC,kBAAD;EAAkB,WAAU;EAAsB,eAAY;CAAQ,CAAA;CAC/E,IAAI,WAAW,SACb,OAAO,oBAAC,iBAAD;EAAiB,WAAU;EAA0B,eAAY;CAAQ,CAAA;CAClF,IAAI,WAAW,SAAS,OAAO,oBAAC,WAAD;EAAW,WAAU;EAAS,eAAY;CAAQ,CAAA;CAEjF,OAAO;AACT;AAEA,SAAS,YAAY,QAAuC,GAAoC;CAC9F,QAAQ,QAAR;EACE,KAAK,UACH,OAAO,EAAE,cAAc,CAAC,GAAG,SAAS;EACtC,KAAK,SACH,OAAO,EAAE,aAAa,CAAC,GAAG,2BAA2B;EACvD,KAAK,WACH,OAAO,EAAE,eAAe,CAAC,GAAG,iBAAiB;EAC/C,KAAK,SACH,OAAO,EACL,mBACA,CAAC,GACD,kEACF;EACF,SACE,OAAO;CACX;AACF"}

package/dist/components/cms/menu.d.ts

@@ -0,0 +1,24 @@
+import { CmsMenuItemSchema, CmsMenuSchema, CmsSiteSchema } from "@alfakit/core";
+import { ReactNode } from "react";
+//#region src/components/cms/menu.d.ts
+/** Nested items as plain lists (the mobile menu and the footer). */
+export declare function CmsMenuList({ items, className, itemClassName }: {
+  items: CmsMenuItemSchema[];
+  className?: string;
+  itemClassName?: string;
+}): import("react").JSX.Element;
+/** Links to the page in the site's other languages. */
+export declare function CmsLanguageSwitcher({ site, className }: {
+  site: CmsSiteSchema;
+  className?: string;
+}): import("react").JSX.Element | null;
+/**
+ * The header navigation: items in a row from `md`, a disclosure menu below it. Items
+ * with children get a submenu button (Escape or a click outside closes it).
+ */
+export declare function CmsNav({ menu, children }: {
+  menu: CmsMenuSchema | null | undefined;
+  children?: ReactNode;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=menu.d.ts.map

package/dist/components/cms/menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.d.ts","names":[],"sources":["../../../src/components/cms/menu.tsx"],"mappings":";;;;wBAmHgB,cACd,OACA,WACA;EAEA,OAAO;EACP;EACA;oBACD,IAAA;;wBAoBe,sBACd,MACA;EAEA,MAAM;EACN;oBACD,IAAA;;;;;wBAkCe,SACd,MACA;EAEA,MAAM;EACN,WAAW;oBACZ,IAAA"}

package/dist/components/cms/menu.js

@@ -0,0 +1,181 @@
+import { cn } from "../../lib/utils.js";
+import { Button } from "../ui/button.js";
+import { useCms } from "./context.js";
+import { cmsLinkRel } from "@alfakit/core";
+import { useEffect, useId, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon, MenuIcon, XIcon } from "lucide-react";
+//#region src/components/cms/menu.tsx
+function ItemLink({ item, className }) {
+	const { t } = useCms();
+	if (!item.url) return /* @__PURE__ */ jsx("span", {
+		className,
+		children: item.label
+	});
+	return /* @__PURE__ */ jsxs("a", {
+		href: item.url,
+		target: item.newTab ? "_blank" : void 0,
+		rel: cmsLinkRel(item.newTab),
+		"aria-current": item.current ? "page" : void 0,
+		"data-active": item.active || void 0,
+		className,
+		children: [item.label, item.newTab && /* @__PURE__ */ jsxs("span", {
+			className: "sr-only",
+			children: [" ", t("cms.new_tab", {}, "(opens in a new tab)")]
+		})]
+	});
+}
+const linkClass = "hover:text-foreground focus-visible:ring-ring/50 rounded-md px-3 py-2 text-sm font-medium outline-none focus-visible:ring-[3px] data-[active]:text-foreground text-muted-foreground aria-[current=page]:text-foreground";
+/** A top-level item with a submenu: the link plus a disclosure button for its children. */
+function DropdownItem({ item }) {
+	const { t } = useCms();
+	const [open, setOpen] = useState(false);
+	const id = useId();
+	const ref = useRef(null);
+	useEffect(() => {
+		if (!open) return;
+		const close = (event) => {
+			if (ref.current && event.target instanceof Node && !ref.current.contains(event.target)) setOpen(false);
+		};
+		document.addEventListener("mousedown", close);
+		document.addEventListener("focusin", close);
+		return () => {
+			document.removeEventListener("mousedown", close);
+			document.removeEventListener("focusin", close);
+		};
+	}, [open]);
+	return /* @__PURE__ */ jsxs("li", {
+		ref,
+		className: "relative flex items-center",
+		onKeyDown: (event) => {
+			if (event.key === "Escape" && open) {
+				setOpen(false);
+				ref.current?.querySelector("button")?.focus();
+			}
+		},
+		children: [
+			/* @__PURE__ */ jsx(ItemLink, {
+				item,
+				className: linkClass
+			}),
+			/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				className: "text-muted-foreground hover:text-foreground focus-visible:ring-ring/50 -ms-2 rounded-md p-1.5 outline-none focus-visible:ring-[3px]",
+				"aria-expanded": open,
+				"aria-controls": id,
+				onClick: () => setOpen(!open),
+				children: [/* @__PURE__ */ jsx(ChevronDownIcon, {
+					className: cn("size-4 transition-transform", open && "rotate-180"),
+					"aria-hidden": "true"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: t("cms.toggle_submenu", { label: item.label }, `Show the ${item.label} submenu`)
+				})]
+			}),
+			/* @__PURE__ */ jsx("ul", {
+				id,
+				hidden: !open,
+				className: "bg-popover text-popover-foreground absolute start-0 top-full z-40 mt-1 min-w-52 rounded-lg border p-1 shadow-md",
+				children: item.children.map((child) => /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx(ItemLink, {
+					item: child,
+					className: cn(linkClass, "block")
+				}), child.children.length > 0 && /* @__PURE__ */ jsx("ul", {
+					className: "ms-3 border-s ps-1",
+					children: child.children.map((grandchild) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(ItemLink, {
+						item: grandchild,
+						className: cn(linkClass, "block")
+					}) }, grandchild.id))
+				})] }, child.id))
+			})
+		]
+	});
+}
+/** Nested items as plain lists (the mobile menu and the footer). */
+function CmsMenuList({ items, className, itemClassName }) {
+	return /* @__PURE__ */ jsx("ul", {
+		className,
+		children: items.map((item) => /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx(ItemLink, {
+			item,
+			className: cn(linkClass, "block", itemClassName)
+		}), item.children.length > 0 && /* @__PURE__ */ jsx(CmsMenuList, {
+			items: item.children,
+			className: "ms-3 border-s ps-2",
+			itemClassName
+		})] }, item.id))
+	});
+}
+/** Links to the page in the site's other languages. */
+function CmsLanguageSwitcher({ site, className }) {
+	const { t } = useCms();
+	if (site.locales.length < 2) return null;
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": t("cms.language", {}, "Language"),
+		className,
+		"data-slot": "cms-language-switcher",
+		children: /* @__PURE__ */ jsx("ul", {
+			className: "flex flex-wrap items-center gap-1",
+			children: site.locales.map((locale) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", {
+				href: locale.url,
+				hrefLang: locale.code,
+				lang: locale.code,
+				"aria-current": locale.current ? "true" : void 0,
+				className: cn(linkClass, "px-2 py-1 uppercase"),
+				children: locale.label
+			}) }, locale.code))
+		})
+	});
+}
+/**
+* The header navigation: items in a row from `md`, a disclosure menu below it. Items
+* with children get a submenu button (Escape or a click outside closes it).
+*/
+function CmsNav({ menu, children }) {
+	const { t } = useCms();
+	const [open, setOpen] = useState(false);
+	const id = useId();
+	if (!menu || menu.items.length === 0) return /* @__PURE__ */ jsx(Fragment$1, { children });
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx("nav", {
+			"aria-label": t("cms.main_navigation", {}, "Main navigation"),
+			className: "hidden md:block",
+			"data-slot": "cms-nav",
+			children: /* @__PURE__ */ jsx("ul", {
+				className: "flex items-center gap-1",
+				children: menu.items.map((item) => item.children.length > 0 ? /* @__PURE__ */ jsx(DropdownItem, { item }, item.id) : /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(ItemLink, {
+					item,
+					className: linkClass
+				}) }, item.id))
+			})
+		}),
+		children,
+		/* @__PURE__ */ jsxs(Button, {
+			type: "button",
+			variant: "ghost",
+			size: "icon",
+			className: "md:hidden",
+			"aria-expanded": open,
+			"aria-controls": id,
+			onClick: () => setOpen(!open),
+			children: [open ? /* @__PURE__ */ jsx(XIcon, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(MenuIcon, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: open ? t("cms.close_menu", {}, "Close menu") : t("cms.open_menu", {}, "Open menu")
+			})]
+		}),
+		/* @__PURE__ */ jsx("nav", {
+			id,
+			hidden: !open,
+			"aria-label": t("cms.main_navigation", {}, "Main navigation"),
+			className: "bg-background absolute inset-x-0 top-full z-40 border-b px-4 pb-4 shadow-sm md:hidden",
+			"data-slot": "cms-mobile-nav",
+			children: /* @__PURE__ */ jsx(CmsMenuList, {
+				items: menu.items,
+				className: "flex flex-col gap-1 pt-2",
+				itemClassName: "py-2.5 text-base"
+			})
+		})
+	] });
+}
+//#endregion
+export { CmsLanguageSwitcher, CmsMenuList, CmsNav };
+
+//# sourceMappingURL=menu.js.map

package/dist/components/cms/menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.js","names":[],"sources":["../../../src/components/cms/menu.tsx"],"sourcesContent":["import {\n  cmsLinkRel,\n  type CmsMenuItemSchema,\n  type CmsMenuSchema,\n  type CmsSiteSchema,\n} from '@alfakit/core'\nimport { ChevronDownIcon, MenuIcon, XIcon } from 'lucide-react'\nimport { useEffect, useId, useRef, useState, type ReactNode } from 'react'\nimport { cn } from '../../lib/utils'\nimport { Button } from '../ui/button'\nimport { useCms } from './context'\n\nfunction ItemLink({ item, className }: { item: CmsMenuItemSchema; className?: string }) {\n  const { t } = useCms()\n\n  if (!item.url) {\n    return <span className={className}>{item.label}</span>\n  }\n\n  return (\n    <a\n      href={item.url}\n      target={item.newTab ? '_blank' : undefined}\n      rel={cmsLinkRel(item.newTab)}\n      aria-current={item.current ? 'page' : undefined}\n      data-active={item.active || undefined}\n      className={className}\n    >\n      {item.label}\n      {item.newTab && (\n        <span className=\"sr-only\"> {t('cms.new_tab', {}, '(opens in a new tab)')}</span>\n      )}\n    </a>\n  )\n}\n\nconst linkClass =\n  'hover:text-foreground focus-visible:ring-ring/50 rounded-md px-3 py-2 text-sm font-medium outline-none focus-visible:ring-[3px] data-[active]:text-foreground text-muted-foreground aria-[current=page]:text-foreground'\n\n/** A top-level item with a submenu: the link plus a disclosure button for its children. */\nfunction DropdownItem({ item }: { item: CmsMenuItemSchema }) {\n  const { t } = useCms()\n  const [open, setOpen] = useState(false)\n  const id = useId()\n  const ref = useRef<HTMLLIElement>(null)\n\n  useEffect(() => {\n    if (!open) return\n\n    const close = (event: MouseEvent | FocusEvent) => {\n      if (ref.current && event.target instanceof Node && !ref.current.contains(event.target))\n        setOpen(false)\n    }\n\n    document.addEventListener('mousedown', close)\n    document.addEventListener('focusin', close)\n\n    return () => {\n      document.removeEventListener('mousedown', close)\n      document.removeEventListener('focusin', close)\n    }\n  }, [open])\n\n  return (\n    <li\n      ref={ref}\n      className=\"relative flex items-center\"\n      onKeyDown={(event) => {\n        if (event.key === 'Escape' && open) {\n          setOpen(false)\n          ref.current?.querySelector<HTMLButtonElement>('button')?.focus()\n        }\n      }}\n    >\n      <ItemLink item={item} className={linkClass} />\n      <button\n        type=\"button\"\n        className=\"text-muted-foreground hover:text-foreground focus-visible:ring-ring/50 -ms-2 rounded-md p-1.5 outline-none focus-visible:ring-[3px]\"\n        aria-expanded={open}\n        aria-controls={id}\n        onClick={() => setOpen(!open)}\n      >\n        <ChevronDownIcon\n          className={cn('size-4 transition-transform', open && 'rotate-180')}\n          aria-hidden=\"true\"\n        />\n        <span className=\"sr-only\">\n          {t('cms.toggle_submenu', { label: item.label }, `Show the ${item.label} submenu`)}\n        </span>\n      </button>\n      <ul\n        id={id}\n        hidden={!open}\n        className=\"bg-popover text-popover-foreground absolute start-0 top-full z-40 mt-1 min-w-52 rounded-lg border p-1 shadow-md\"\n      >\n        {item.children.map((child) => (\n          <li key={child.id}>\n            <ItemLink item={child} className={cn(linkClass, 'block')} />\n            {child.children.length > 0 && (\n              <ul className=\"ms-3 border-s ps-1\">\n                {child.children.map((grandchild) => (\n                  <li key={grandchild.id}>\n                    <ItemLink item={grandchild} className={cn(linkClass, 'block')} />\n                  </li>\n                ))}\n              </ul>\n            )}\n          </li>\n        ))}\n      </ul>\n    </li>\n  )\n}\n\n/** Nested items as plain lists (the mobile menu and the footer). */\nexport function CmsMenuList({\n  items,\n  className,\n  itemClassName,\n}: {\n  items: CmsMenuItemSchema[]\n  className?: string\n  itemClassName?: string\n}) {\n  return (\n    <ul className={className}>\n      {items.map((item) => (\n        <li key={item.id}>\n          <ItemLink item={item} className={cn(linkClass, 'block', itemClassName)} />\n          {item.children.length > 0 && (\n            <CmsMenuList\n              items={item.children}\n              className=\"ms-3 border-s ps-2\"\n              itemClassName={itemClassName}\n            />\n          )}\n        </li>\n      ))}\n    </ul>\n  )\n}\n\n/** Links to the page in the site's other languages. */\nexport function CmsLanguageSwitcher({\n  site,\n  className,\n}: {\n  site: CmsSiteSchema\n  className?: string\n}) {\n  const { t } = useCms()\n\n  if (site.locales.length < 2) return null\n\n  return (\n    <nav\n      aria-label={t('cms.language', {}, 'Language')}\n      className={className}\n      data-slot=\"cms-language-switcher\"\n    >\n      <ul className=\"flex flex-wrap items-center gap-1\">\n        {site.locales.map((locale) => (\n          <li key={locale.code}>\n            <a\n              href={locale.url}\n              hrefLang={locale.code}\n              lang={locale.code}\n              aria-current={locale.current ? 'true' : undefined}\n              className={cn(linkClass, 'px-2 py-1 uppercase')}\n            >\n              {locale.label}\n            </a>\n          </li>\n        ))}\n      </ul>\n    </nav>\n  )\n}\n\n/**\n * The header navigation: items in a row from `md`, a disclosure menu below it. Items\n * with children get a submenu button (Escape or a click outside closes it).\n */\nexport function CmsNav({\n  menu,\n  children,\n}: {\n  menu: CmsMenuSchema | null | undefined\n  children?: ReactNode\n}) {\n  const { t } = useCms()\n  const [open, setOpen] = useState(false)\n  const id = useId()\n\n  if (!menu || menu.items.length === 0) return <>{children}</>\n\n  return (\n    <>\n      <nav\n        aria-label={t('cms.main_navigation', {}, 'Main navigation')}\n        className=\"hidden md:block\"\n        data-slot=\"cms-nav\"\n      >\n        <ul className=\"flex items-center gap-1\">\n          {menu.items.map((item) =>\n            item.children.length > 0 ? (\n              <DropdownItem key={item.id} item={item} />\n            ) : (\n              <li key={item.id}>\n                <ItemLink item={item} className={linkClass} />\n              </li>\n            ),\n          )}\n        </ul>\n      </nav>\n      {children}\n      <Button\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"icon\"\n        className=\"md:hidden\"\n        aria-expanded={open}\n        aria-controls={id}\n        onClick={() => setOpen(!open)}\n      >\n        {open ? <XIcon aria-hidden=\"true\" /> : <MenuIcon aria-hidden=\"true\" />}\n        <span className=\"sr-only\">\n          {open ? t('cms.close_menu', {}, 'Close menu') : t('cms.open_menu', {}, 'Open menu')}\n        </span>\n      </Button>\n      <nav\n        id={id}\n        hidden={!open}\n        aria-label={t('cms.main_navigation', {}, 'Main navigation')}\n        className=\"bg-background absolute inset-x-0 top-full z-40 border-b px-4 pb-4 shadow-sm md:hidden\"\n        data-slot=\"cms-mobile-nav\"\n      >\n        <CmsMenuList\n          items={menu.items}\n          className=\"flex flex-col gap-1 pt-2\"\n          itemClassName=\"py-2.5 text-base\"\n        />\n      </nav>\n    </>\n  )\n}\n"],"mappings":"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"}

package/dist/components/cms/page.d.ts

@@ -0,0 +1,27 @@
+import { AnyComponent } from "../../context.js";
+import { CmsPageProps, CmsPayload } from "@alfakit/core";
+//#region src/components/cms/page.d.ts
+/** The site header: the site name, the `main` menu and the language links. */
+export declare function CmsHeader({ cms }: {
+  cms: CmsPayload;
+}): import("react").JSX.Element;
+/** The site footer: the `footer` menu and the site name. */
+export declare function CmsFooter({ cms }: {
+  cms: CmsPayload;
+}): import("react").JSX.Element;
+/**
+ * The `Alfakit/CmsPage` Inertia page (public CMS pages and previews). Register it in your
+ * public site's Inertia app:
+ *
+ * ```tsx
+ * createAlfakit({ pages: { 'Alfakit/CmsPage': CmsPage } })
+ * ```
+ *
+ * Replace the header or footer with `cms:header` / `cms:footer` registry components, a
+ * block with `cms:block:{type}`, or build your own page from `CmsBlocks` and `CmsHead`.
+ */
+export declare function CmsPage({ cms: cmsProp, components }: Partial<CmsPageProps> & {
+  components?: Record<string, AnyComponent>;
+}): import("react").JSX.Element | null;
+//#endregion
+//# sourceMappingURL=page.d.ts.map

package/dist/components/cms/page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page.d.ts","names":[],"sources":["../../../src/components/cms/page.tsx"],"mappings":";;;;wBAiCgB,YAAY;EAAS,KAAK;oBAAY,IAAA;;wBAwBtC,YAAY;EAAS,KAAK;oBAAY,IAAA;;;;;;;;;;;;wBAgItC,UACd,KAAK,SACL,cACC,QAAQ;EAAkB,aAAa,eAAe;oBAAe,IAAA"}