@alfakit/vue 0.0.0-stage → 0.1.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"LivePreview.js","names":["_sfc_main","LivePreview_vue_vue_type_script_setup_true_lang_default","LivePreview_default"],"sources":["../../../src/components/cms/LivePreview.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  CMS_PREVIEW_DEVICES,\n  CmsAutosave,\n  callCmsAutosave,\n  cmsPreviewFitsBeside,\n  cmsPreviewOpensOnLoad,\n  rememberedCmsPreview,\n  resolveStickyOffset,\n  reserveCmsPreviewSpace,\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/vue'\nimport { computed, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue'\nimport { usePageSchema, usePanel, useT } from '../../context'\nimport { cn } from '../../lib/utils'\nimport { useOptionalFormStore } from '../form/form-context'\nimport ActionList from '../actions/ActionList.vue'\nimport Badge from '../ui/Badge.vue'\nimport Button from '../ui/Button.vue'\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 */\nconst props = defineProps<{ component: CmsLivePreviewSchema }>()\n\nconst t = useT()\nconst form = useOptionalFormStore()\nconst page = usePageSchema()\nconst panel = usePanel()\nconst root = ref<HTMLElement | null>(null)\nconst open = ref(false)\nconst fullScreen = ref(false)\n// Too narrow for the form beside the pane (e.g. 1280px with the sidebar): full-screen overlay.\nconst overlay = ref(false)\nconst expanded = computed(() => fullScreen.value || overlay.value)\nconst device = ref<CmsPreviewDevice>('desktop')\nconst snapshot = shallowRef<CmsAutosaveSnapshot>({\n  status: props.component.savedAt ? 'saved' : 'idle',\n  savedAt: props.component.savedAt ?? null,\n  previewUrl: props.component.previewUrl,\n  version: 0,\n  hasChanges: props.component.hasChanges ?? false,\n})\nconst top = ref('0px')\nconst actionContext = computed(() => ({ token: page.value?.token ?? '', component: 'page' }))\nconst status = computed(() =>\n  snapshot.value.hasChanges && props.component.changedStatus\n    ? props.component.changedStatus\n    : props.component.status,\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 devices = Object.keys(CMS_PREVIEW_DEVICES) as CmsPreviewDevice[]\nconst icons = { desktop: MonitorIcon, tablet: TabletIcon, phone: SmartphoneIcon }\nconst labels = { desktop: 'Desktop', tablet: 'Tablet', phone: 'Phone' }\nconst width = computed(() => CMS_PREVIEW_DEVICES[device.value])\n\nconst statusLabel = computed(() => {\n  switch (snapshot.value.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\nlet autosave: CmsAutosave | null = null\nlet unsubscribe: (() => void) | null = null\nlet release: () => void = () => {}\n\nfunction onKey(event: KeyboardEvent) {\n  if (event.key !== 'Escape' || !open.value) return\n  if (fullScreen.value && !overlay.value) fullScreen.value = false\n  else setOpen(false)\n}\n\n/** Open or collapse the pane, remembering the choice for the next visit. */\nfunction setOpen(next: boolean) {\n  open.value = next\n  rememberedCmsPreview(next ? 'open' : 'closed')\n}\n\nfunction measure() {\n  if (open.value) overlay.value = !cmsPreviewFitsBeside(root.value)\n}\n\nonMounted(() => {\n  window.addEventListener('keydown', onKey)\n  window.addEventListener('resize', measure)\n  // Stick right under the panel's topbar when it sticks too.\n  top.value = resolveStickyOffset(null)\n  // Wide screens open the pane beside the form; the viewer's last choice wins.\n  if (props.component.previewUrl && cmsPreviewOpensOnLoad(root.value)) open.value = true\n\n  if (!form) return\n\n  autosave = new CmsAutosave({\n    debounce: props.component.debounce,\n    previewUrl: props.component.previewUrl,\n    savedAt: props.component.savedAt,\n    hasChanges: props.component.hasChanges,\n    save: (state) =>\n      callCmsAutosave(props.component.autosaveMethod, state, {\n        token: page.value?.token ?? '',\n        endpoint: panel.value?.endpoints?.pageCall ?? '',\n      }),\n    onChange: (next) => (snapshot.value = next),\n  })\n\n  let values = form.state.values\n  unsubscribe = form.subscribe((state) => {\n    if (state.values !== values) {\n      values = state.values\n      autosave?.schedule(state.values)\n    }\n  })\n})\n\n// Side by side, the form makes room for the pane.\nwatch(open, measure)\nwatch([open, expanded], ([isOpen, isFull]) => {\n  release()\n  release = isOpen && !isFull ? reserveCmsPreviewSpace(root.value, 'min(50vw, 56rem)') : () => {}\n})\n\nonBeforeUnmount(() => {\n  window.removeEventListener('keydown', onKey)\n  window.removeEventListener('resize', measure)\n  unsubscribe?.()\n  release()\n  const current = autosave\n  void current?.flush().finally(() => current.dispose())\n})\n</script>\n\n<template>\n  <div\n    ref=\"root\"\n    data-slot=\"cms-live-preview\"\n    :style=\"{ top }\"\n    class=\"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 class=\"flex min-w-0 flex-1 basis-64 flex-col gap-0.5\">\n      <p\n        v-if=\"status\"\n        class=\"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          :class=\"STATUS_COLORS[status.color] ?? ''\"\n          >{{ status.label }}</Badge\n        >\n        <span class=\"text-muted-foreground\">{{ status.description }}</span>\n      </p>\n      <p\n        class=\"text-muted-foreground flex min-h-4 items-center gap-1.5 text-xs\"\n        role=\"status\"\n        aria-live=\"polite\"\n      >\n        <LoaderCircleIcon\n          v-if=\"snapshot.status === 'saving'\"\n          class=\"size-4 animate-spin\"\n          aria-hidden=\"true\"\n        />\n        <CircleAlertIcon\n          v-else-if=\"snapshot.status === 'error'\"\n          class=\"text-destructive size-4\"\n          aria-hidden=\"true\"\n        />\n        <CheckIcon v-else-if=\"snapshot.status === 'saved'\" class=\"size-4\" aria-hidden=\"true\" />\n        {{ statusLabel }}\n      </p>\n    </div>\n    <div class=\"flex flex-wrap items-center gap-2\">\n      <Button\n        v-if=\"snapshot.previewUrl\"\n        type=\"button\"\n        :variant=\"open ? 'secondary' : 'outline'\"\n        size=\"sm\"\n        :aria-pressed=\"open\"\n        :title=\"\n          t('cms.live_preview_help', {}, 'See the page as visitors will, updated as you type.')\n        \"\n        data-slot=\"cms-live-preview-toggle\"\n        @click=\"setOpen(!open)\"\n      >\n        <EyeIcon aria-hidden=\"true\" />\n        {{\n          open\n            ? t('cms.hide_preview', {}, 'Hide preview')\n            : t('cms.live_preview', {}, 'Live preview')\n        }}\n      </Button>\n      <div v-if=\"props.component.actions?.length\" @pointerdown.capture=\"autosave?.flush()\">\n        <ActionList :actions=\"props.component.actions\" :context=\"actionContext\" size=\"sm\" />\n      </div>\n    </div>\n    <section\n      v-if=\"open && snapshot.previewUrl\"\n      :aria-label=\"t('cms.live_preview', {}, 'Live preview')\"\n      data-slot=\"cms-live-preview-pane\"\n      :data-full-screen=\"expanded || undefined\"\n      :style=\"{ top: expanded ? '0px' : top }\"\n      :class=\"\n        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    >\n      <header class=\"flex items-center justify-between gap-2 border-b px-3 py-2\">\n        <div\n          class=\"flex items-center gap-1\"\n          role=\"group\"\n          :aria-label=\"t('cms.preview_width', {}, 'Preview width')\"\n        >\n          <Button\n            v-for=\"name in devices\"\n            :key=\"name\"\n            type=\"button\"\n            :variant=\"device === name ? 'secondary' : 'ghost'\"\n            size=\"icon-sm\"\n            :aria-pressed=\"device === name\"\n            @click=\"device = name\"\n          >\n            <component :is=\"icons[name]\" aria-hidden=\"true\" />\n            <span class=\"sr-only\">{{ t(`cms.device_${name}`, {}, labels[name]) }}</span>\n          </Button>\n        </div>\n        <p class=\"text-muted-foreground hidden truncate text-xs sm:block\">{{ statusLabel }}</p>\n        <div class=\"flex items-center gap-1\">\n          <Button\n            v-if=\"!overlay\"\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            :aria-pressed=\"fullScreen\"\n            @click=\"fullScreen = !fullScreen\"\n          >\n            <Minimize2Icon v-if=\"fullScreen\" aria-hidden=\"true\" />\n            <Maximize2Icon v-else aria-hidden=\"true\" />\n            <span class=\"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          <Button type=\"button\" variant=\"ghost\" size=\"icon-sm\" @click=\"setOpen(false)\">\n            <XIcon aria-hidden=\"true\" />\n            <span class=\"sr-only\">{{ t('cms.close_preview', {}, 'Close preview') }}</span>\n          </Button>\n        </div>\n      </header>\n      <div class=\"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          class=\"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  </div>\n</template>\n"],"mappings":""}

package/dist/components/cms/LivePreview.vue.d.ts

@@ -0,0 +1,13 @@
+import { type CmsLivePreviewSchema } from '@alfakit/core';
+/**
+ * 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.
+ */
+type __VLS_Props = {
+    component: CmsLivePreviewSchema;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=LivePreview.vue.d.ts.map

package/dist/components/cms/LivePreview.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LivePreview.vue.d.ts","sourceRoot":"","sources":["../../../src/components/cms/LivePreview.vue"],"names":[],"mappings":"AA+SA,OAAO,EAUL,KAAK,oBAAoB,EAE1B,MAAM,eAAe,CAAA;AAqBtB;;;;;GAKG;AACH,KAAK,WAAW,GAAG;IAAE,SAAS,EAAE,oBAAoB,CAAA;CAAE,CAAC;;AA8kBvD,wBAMG"}

package/dist/components/cms/LivePreview.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,207 @@
+import { usePageSchema as e, usePanel as t, useT as ee } from "../../context.js";
+import { cn as te } from "../../lib/utils.js";
+import ne from "../ui/Badge2.js";
+import n from "../ui/Button2.js";
+import re from "../actions/ActionList.js";
+import { useOptionalFormStore as r } from "../form/form-context.js";
+import { CMS_PREVIEW_DEVICES as i, CmsAutosave as ie, callCmsAutosave as ae, cmsPreviewFitsBeside as oe, cmsPreviewOpensOnLoad as se, rememberedCmsPreview as ce, reserveCmsPreviewSpace as le, resolveStickyOffset as ue } from "@alfakit/core";
+import { Fragment as de, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, normalizeClass as p, normalizeStyle as m, onBeforeUnmount as fe, onMounted as pe, openBlock as h, ref as g, renderList as me, resolveDynamicComponent as he, shallowRef as ge, toDisplayString as _, unref as v, watch as y, withCtx as b } from "vue";
+import { CheckIcon as _e, CircleAlertIcon as ve, EyeIcon as ye, LoaderCircleIcon as be, Maximize2Icon as xe, Minimize2Icon as x, MonitorIcon as S, SmartphoneIcon as C, TabletIcon as w, XIcon as T } from "@lucide/vue";
+//#region src/components/cms/LivePreview.vue?vue&type=script&setup=true&lang.ts
+var E = { class: "flex min-w-0 flex-1 basis-64 flex-col gap-0.5" }, D = {
+	key: 0,
+	class: "flex flex-wrap items-center gap-x-2 gap-y-1 text-sm",
+	"data-slot": "cms-editor-status"
+}, O = { class: "text-muted-foreground" }, k = {
+	class: "text-muted-foreground flex min-h-4 items-center gap-1.5 text-xs",
+	role: "status",
+	"aria-live": "polite"
+}, A = { class: "flex flex-wrap items-center gap-2" }, j = ["aria-label", "data-full-screen"], M = { class: "flex items-center justify-between gap-2 border-b px-3 py-2" }, Se = ["aria-label"], Ce = { class: "sr-only" }, we = { class: "text-muted-foreground hidden truncate text-xs sm:block" }, Te = { class: "flex items-center gap-1" }, Ee = { class: "sr-only" }, De = { class: "sr-only" }, Oe = { class: "bg-muted/40 flex flex-1 justify-center overflow-auto p-3" }, ke = ["src", "title"], N = /*@__PURE__*/ f({
+	__name: "LivePreview",
+	props: { component: {} },
+	setup(f) {
+		let N = f, P = ee(), F = r(), I = e(), Ae = t(), L = g(null), R = g(!1), z = g(!1), B = g(!1), V = a(() => z.value || B.value), H = g("desktop"), U = ge({
+			status: N.component.savedAt ? "saved" : "idle",
+			savedAt: N.component.savedAt ?? null,
+			previewUrl: N.component.previewUrl,
+			version: 0,
+			hasChanges: N.component.hasChanges ?? !1
+		}), W = g("0px"), je = a(() => ({
+			token: I.value?.token ?? "",
+			component: "page"
+		})), G = a(() => U.value.hasChanges && N.component.changedStatus ? N.component.changedStatus : N.component.status), Me = {
+			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"
+		}, Ne = Object.keys(i), Pe = {
+			desktop: S,
+			tablet: w,
+			phone: C
+		}, Fe = {
+			desktop: "Desktop",
+			tablet: "Tablet",
+			phone: "Phone"
+		}, K = a(() => i[H.value]), q = a(() => {
+			switch (U.value.status) {
+				case "saving": return P("cms.saving", {}, "Saving…");
+				case "saved": return P("cms.saved", {}, "Draft saved automatically");
+				case "pending": return P("cms.unsaved", {}, "Unsaved changes");
+				case "error": return P("cms.save_failed", {}, "Your latest changes couldn't be saved. They will be tried again.");
+				default: return "";
+			}
+		}), J = null, Y = null, X = () => {};
+		function Z(e) {
+			e.key === "Escape" && R.value && (z.value && !B.value ? z.value = !1 : Q(!1));
+		}
+		function Q(e) {
+			R.value = e, ce(e ? "open" : "closed");
+		}
+		function $() {
+			R.value && (B.value = !oe(L.value));
+		}
+		return pe(() => {
+			if (window.addEventListener("keydown", Z), window.addEventListener("resize", $), W.value = ue(null), N.component.previewUrl && se(L.value) && (R.value = !0), !F) return;
+			J = new ie({
+				debounce: N.component.debounce,
+				previewUrl: N.component.previewUrl,
+				savedAt: N.component.savedAt,
+				hasChanges: N.component.hasChanges,
+				save: (e) => ae(N.component.autosaveMethod, e, {
+					token: I.value?.token ?? "",
+					endpoint: Ae.value?.endpoints?.pageCall ?? ""
+				}),
+				onChange: (e) => U.value = e
+			});
+			let e = F.state.values;
+			Y = F.subscribe((t) => {
+				t.values !== e && (e = t.values, J?.schedule(t.values));
+			});
+		}), y(R, $), y([R, V], ([e, t]) => {
+			X(), X = e && !t ? le(L.value, "min(50vw, 56rem)") : () => {};
+		}), fe(() => {
+			window.removeEventListener("keydown", Z), window.removeEventListener("resize", $), Y?.(), X();
+			let e = J;
+			e?.flush().finally(() => e.dispose());
+		}), (e, t) => (h(), c("div", {
+			ref_key: "root",
+			ref: L,
+			"data-slot": "cms-live-preview",
+			style: m({ top: W.value }),
+			class: "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"
+		}, [
+			l("div", E, [G.value ? (h(), c("p", D, [d(ne, {
+				variant: "outline",
+				"data-color": G.value.color,
+				class: p(Me[G.value.color] ?? "")
+			}, {
+				default: b(() => [u(_(G.value.label), 1)]),
+				_: 1
+			}, 8, ["data-color", "class"]), l("span", O, _(G.value.description), 1)])) : s("", !0), l("p", k, [U.value.status === "saving" ? (h(), o(v(be), {
+				key: 0,
+				class: "size-4 animate-spin",
+				"aria-hidden": "true"
+			})) : U.value.status === "error" ? (h(), o(v(ve), {
+				key: 1,
+				class: "text-destructive size-4",
+				"aria-hidden": "true"
+			})) : U.value.status === "saved" ? (h(), o(v(_e), {
+				key: 2,
+				class: "size-4",
+				"aria-hidden": "true"
+			})) : s("", !0), u(" " + _(q.value), 1)])]),
+			l("div", A, [U.value.previewUrl ? (h(), o(n, {
+				key: 0,
+				type: "button",
+				variant: R.value ? "secondary" : "outline",
+				size: "sm",
+				"aria-pressed": R.value,
+				title: v(P)("cms.live_preview_help", {}, "See the page as visitors will, updated as you type."),
+				"data-slot": "cms-live-preview-toggle",
+				onClick: t[0] ||= (e) => Q(!R.value)
+			}, {
+				default: b(() => [d(v(ye), { "aria-hidden": "true" }), u(" " + _(R.value ? v(P)("cms.hide_preview", {}, "Hide preview") : v(P)("cms.live_preview", {}, "Live preview")), 1)]),
+				_: 1
+			}, 8, [
+				"variant",
+				"aria-pressed",
+				"title"
+			])) : s("", !0), N.component.actions?.length ? (h(), c("div", {
+				key: 1,
+				onPointerdownCapture: t[1] ||= (e) => v(J)?.flush()
+			}, [d(re, {
+				actions: N.component.actions,
+				context: je.value,
+				size: "sm"
+			}, null, 8, ["actions", "context"])], 32)) : s("", !0)]),
+			R.value && U.value.previewUrl ? (h(), c("section", {
+				key: 0,
+				"aria-label": v(P)("cms.live_preview", {}, "Live preview"),
+				"data-slot": "cms-live-preview-pane",
+				"data-full-screen": V.value || void 0,
+				style: m({ top: V.value ? "0px" : W.value }),
+				class: p(v(te)("bg-background fixed end-0 bottom-0 z-50 flex flex-col border-s shadow-xl", V.value ? "inset-x-0 border-s-0" : "w-full lg:w-[min(50vw,56rem)]"))
+			}, [l("header", M, [
+				l("div", {
+					class: "flex items-center gap-1",
+					role: "group",
+					"aria-label": v(P)("cms.preview_width", {}, "Preview width")
+				}, [(h(!0), c(de, null, me(v(Ne), (e) => (h(), o(n, {
+					key: e,
+					type: "button",
+					variant: H.value === e ? "secondary" : "ghost",
+					size: "icon-sm",
+					"aria-pressed": H.value === e,
+					onClick: (t) => H.value = e
+				}, {
+					default: b(() => [(h(), o(he(Pe[e]), { "aria-hidden": "true" })), l("span", Ce, _(v(P)(`cms.device_${e}`, {}, Fe[e])), 1)]),
+					_: 2
+				}, 1032, [
+					"variant",
+					"aria-pressed",
+					"onClick"
+				]))), 128))], 8, Se),
+				l("p", we, _(q.value), 1),
+				l("div", Te, [B.value ? s("", !0) : (h(), o(n, {
+					key: 0,
+					type: "button",
+					variant: "ghost",
+					size: "icon-sm",
+					"aria-pressed": z.value,
+					onClick: t[2] ||= (e) => z.value = !z.value
+				}, {
+					default: b(() => [z.value ? (h(), o(v(x), {
+						key: 0,
+						"aria-hidden": "true"
+					})) : (h(), o(v(xe), {
+						key: 1,
+						"aria-hidden": "true"
+					})), l("span", Ee, _(z.value ? v(P)("cms.exit_full_screen", {}, "Exit full screen") : v(P)("cms.full_screen", {}, "Full screen")), 1)]),
+					_: 1
+				}, 8, ["aria-pressed"])), d(n, {
+					type: "button",
+					variant: "ghost",
+					size: "icon-sm",
+					onClick: t[3] ||= (e) => Q(!1)
+				}, {
+					default: b(() => [d(v(T), { "aria-hidden": "true" }), l("span", De, _(v(P)("cms.close_preview", {}, "Close preview")), 1)]),
+					_: 1
+				})])
+			]), l("div", Oe, [(h(), c("iframe", {
+				key: U.value.version,
+				src: U.value.previewUrl,
+				title: v(P)("cms.preview_frame", {}, "Page preview"),
+				class: "bg-background h-full rounded-md border shadow-sm",
+				style: m({
+					width: K.value === null ? "100%" : `${K.value}px`,
+					maxWidth: "100%"
+				})
+			}, null, 12, ke))])], 14, j)) : s("", !0)
+		], 4));
+	}
+});
+//#endregion
+export { N as default };
+
+//# sourceMappingURL=LivePreview.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/cms/LivePreview.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LivePreview.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeStyle","_createElementVNode","_createVNode","Badge","_normalizeClass","_withCtx","_createTextVNode","_toDisplayString","_createCommentVNode","_createBlock","_unref","Button","ActionList","_Fragment","_renderList","_resolveDynamicComponent","Badge_default","Button_default","ActionList_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12","_hoisted_13","_hoisted_14","_hoisted_15","LivePreview_vue_vue_type_script_setup_true_lang_default","props","__props","t","useT","form","useOptionalFormStore","page","usePageSchema","panel","usePanel","root","ref","open","fullScreen","overlay","expanded","computed","device","snapshot","shallowRef","top","actionContext","status","STATUS_COLORS","devices","CMS_PREVIEW_DEVICES","icons","MonitorIcon","TabletIcon","SmartphoneIcon","labels","width","statusLabel","autosave","unsubscribe","release","onKey","event","setOpen","next","rememberedCmsPreview","measure","cmsPreviewFitsBeside","onMounted","resolveStickyOffset","cmsPreviewOpensOnLoad","CmsAutosave","callCmsAutosave","state","values","watch","isOpen","isFull","reserveCmsPreviewSpace","onBeforeUnmount","current","openBlock","createElementBlock","normalizeStyle","createElementVNode","createVNode","normalizeClass","withCtx","createTextVNode","toDisplayString","createCommentVNode","createBlock","unref","LoaderCircleIcon","CircleAlertIcon","CheckIcon","_cache","EyeIcon","cn","Fragment","renderList","name","resolveDynamicComponent","Minimize2Icon","Maximize2Icon","XIcon"],"sources":["../../../src/components/cms/LivePreview.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  CMS_PREVIEW_DEVICES,\n  CmsAutosave,\n  callCmsAutosave,\n  cmsPreviewFitsBeside,\n  cmsPreviewOpensOnLoad,\n  rememberedCmsPreview,\n  resolveStickyOffset,\n  reserveCmsPreviewSpace,\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/vue'\nimport { computed, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue'\nimport { usePageSchema, usePanel, useT } from '../../context'\nimport { cn } from '../../lib/utils'\nimport { useOptionalFormStore } from '../form/form-context'\nimport ActionList from '../actions/ActionList.vue'\nimport Badge from '../ui/Badge.vue'\nimport Button from '../ui/Button.vue'\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 */\nconst props = defineProps<{ component: CmsLivePreviewSchema }>()\n\nconst t = useT()\nconst form = useOptionalFormStore()\nconst page = usePageSchema()\nconst panel = usePanel()\nconst root = ref<HTMLElement | null>(null)\nconst open = ref(false)\nconst fullScreen = ref(false)\n// Too narrow for the form beside the pane (e.g. 1280px with the sidebar): full-screen overlay.\nconst overlay = ref(false)\nconst expanded = computed(() => fullScreen.value || overlay.value)\nconst device = ref<CmsPreviewDevice>('desktop')\nconst snapshot = shallowRef<CmsAutosaveSnapshot>({\n  status: props.component.savedAt ? 'saved' : 'idle',\n  savedAt: props.component.savedAt ?? null,\n  previewUrl: props.component.previewUrl,\n  version: 0,\n  hasChanges: props.component.hasChanges ?? false,\n})\nconst top = ref('0px')\nconst actionContext = computed(() => ({ token: page.value?.token ?? '', component: 'page' }))\nconst status = computed(() =>\n  snapshot.value.hasChanges && props.component.changedStatus\n    ? props.component.changedStatus\n    : props.component.status,\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 devices = Object.keys(CMS_PREVIEW_DEVICES) as CmsPreviewDevice[]\nconst icons = { desktop: MonitorIcon, tablet: TabletIcon, phone: SmartphoneIcon }\nconst labels = { desktop: 'Desktop', tablet: 'Tablet', phone: 'Phone' }\nconst width = computed(() => CMS_PREVIEW_DEVICES[device.value])\n\nconst statusLabel = computed(() => {\n  switch (snapshot.value.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\nlet autosave: CmsAutosave | null = null\nlet unsubscribe: (() => void) | null = null\nlet release: () => void = () => {}\n\nfunction onKey(event: KeyboardEvent) {\n  if (event.key !== 'Escape' || !open.value) return\n  if (fullScreen.value && !overlay.value) fullScreen.value = false\n  else setOpen(false)\n}\n\n/** Open or collapse the pane, remembering the choice for the next visit. */\nfunction setOpen(next: boolean) {\n  open.value = next\n  rememberedCmsPreview(next ? 'open' : 'closed')\n}\n\nfunction measure() {\n  if (open.value) overlay.value = !cmsPreviewFitsBeside(root.value)\n}\n\nonMounted(() => {\n  window.addEventListener('keydown', onKey)\n  window.addEventListener('resize', measure)\n  // Stick right under the panel's topbar when it sticks too.\n  top.value = resolveStickyOffset(null)\n  // Wide screens open the pane beside the form; the viewer's last choice wins.\n  if (props.component.previewUrl && cmsPreviewOpensOnLoad(root.value)) open.value = true\n\n  if (!form) return\n\n  autosave = new CmsAutosave({\n    debounce: props.component.debounce,\n    previewUrl: props.component.previewUrl,\n    savedAt: props.component.savedAt,\n    hasChanges: props.component.hasChanges,\n    save: (state) =>\n      callCmsAutosave(props.component.autosaveMethod, state, {\n        token: page.value?.token ?? '',\n        endpoint: panel.value?.endpoints?.pageCall ?? '',\n      }),\n    onChange: (next) => (snapshot.value = next),\n  })\n\n  let values = form.state.values\n  unsubscribe = form.subscribe((state) => {\n    if (state.values !== values) {\n      values = state.values\n      autosave?.schedule(state.values)\n    }\n  })\n})\n\n// Side by side, the form makes room for the pane.\nwatch(open, measure)\nwatch([open, expanded], ([isOpen, isFull]) => {\n  release()\n  release = isOpen && !isFull ? reserveCmsPreviewSpace(root.value, 'min(50vw, 56rem)') : () => {}\n})\n\nonBeforeUnmount(() => {\n  window.removeEventListener('keydown', onKey)\n  window.removeEventListener('resize', measure)\n  unsubscribe?.()\n  release()\n  const current = autosave\n  void current?.flush().finally(() => current.dispose())\n})\n</script>\n\n<template>\n  <div\n    ref=\"root\"\n    data-slot=\"cms-live-preview\"\n    :style=\"{ top }\"\n    class=\"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 class=\"flex min-w-0 flex-1 basis-64 flex-col gap-0.5\">\n      <p\n        v-if=\"status\"\n        class=\"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          :class=\"STATUS_COLORS[status.color] ?? ''\"\n          >{{ status.label }}</Badge\n        >\n        <span class=\"text-muted-foreground\">{{ status.description }}</span>\n      </p>\n      <p\n        class=\"text-muted-foreground flex min-h-4 items-center gap-1.5 text-xs\"\n        role=\"status\"\n        aria-live=\"polite\"\n      >\n        <LoaderCircleIcon\n          v-if=\"snapshot.status === 'saving'\"\n          class=\"size-4 animate-spin\"\n          aria-hidden=\"true\"\n        />\n        <CircleAlertIcon\n          v-else-if=\"snapshot.status === 'error'\"\n          class=\"text-destructive size-4\"\n          aria-hidden=\"true\"\n        />\n        <CheckIcon v-else-if=\"snapshot.status === 'saved'\" class=\"size-4\" aria-hidden=\"true\" />\n        {{ statusLabel }}\n      </p>\n    </div>\n    <div class=\"flex flex-wrap items-center gap-2\">\n      <Button\n        v-if=\"snapshot.previewUrl\"\n        type=\"button\"\n        :variant=\"open ? 'secondary' : 'outline'\"\n        size=\"sm\"\n        :aria-pressed=\"open\"\n        :title=\"\n          t('cms.live_preview_help', {}, 'See the page as visitors will, updated as you type.')\n        \"\n        data-slot=\"cms-live-preview-toggle\"\n        @click=\"setOpen(!open)\"\n      >\n        <EyeIcon aria-hidden=\"true\" />\n        {{\n          open\n            ? t('cms.hide_preview', {}, 'Hide preview')\n            : t('cms.live_preview', {}, 'Live preview')\n        }}\n      </Button>\n      <div v-if=\"props.component.actions?.length\" @pointerdown.capture=\"autosave?.flush()\">\n        <ActionList :actions=\"props.component.actions\" :context=\"actionContext\" size=\"sm\" />\n      </div>\n    </div>\n    <section\n      v-if=\"open && snapshot.previewUrl\"\n      :aria-label=\"t('cms.live_preview', {}, 'Live preview')\"\n      data-slot=\"cms-live-preview-pane\"\n      :data-full-screen=\"expanded || undefined\"\n      :style=\"{ top: expanded ? '0px' : top }\"\n      :class=\"\n        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    >\n      <header class=\"flex items-center justify-between gap-2 border-b px-3 py-2\">\n        <div\n          class=\"flex items-center gap-1\"\n          role=\"group\"\n          :aria-label=\"t('cms.preview_width', {}, 'Preview width')\"\n        >\n          <Button\n            v-for=\"name in devices\"\n            :key=\"name\"\n            type=\"button\"\n            :variant=\"device === name ? 'secondary' : 'ghost'\"\n            size=\"icon-sm\"\n            :aria-pressed=\"device === name\"\n            @click=\"device = name\"\n          >\n            <component :is=\"icons[name]\" aria-hidden=\"true\" />\n            <span class=\"sr-only\">{{ t(`cms.device_${name}`, {}, labels[name]) }}</span>\n          </Button>\n        </div>\n        <p class=\"text-muted-foreground hidden truncate text-xs sm:block\">{{ statusLabel }}</p>\n        <div class=\"flex items-center gap-1\">\n          <Button\n            v-if=\"!overlay\"\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            :aria-pressed=\"fullScreen\"\n            @click=\"fullScreen = !fullScreen\"\n          >\n            <Minimize2Icon v-if=\"fullScreen\" aria-hidden=\"true\" />\n            <Maximize2Icon v-else aria-hidden=\"true\" />\n            <span class=\"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          <Button type=\"button\" variant=\"ghost\" size=\"icon-sm\" @click=\"setOpen(false)\">\n            <XIcon aria-hidden=\"true\" />\n            <span class=\"sr-only\">{{ t('cms.close_preview', {}, 'Close preview') }}</span>\n          </Button>\n        </div>\n      </header>\n      <div class=\"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          class=\"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  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/cms/LivePreviewSkeleton.js

@@ -0,0 +1,16 @@
+import e from "../../_virtual/_plugin-vue_export-helper.js";
+import { createElementBlock as t, openBlock as n } from "vue";
+//#region src/components/cms/LivePreviewSkeleton.vue
+var r = {}, i = {
+	"data-slot": "cms-live-preview",
+	class: "h-8",
+	"aria-hidden": "true"
+};
+function a(e, r) {
+	return n(), t("div", i);
+}
+var o = /*#__PURE__*/ e(r, [["render", a]]);
+//#endregion
+export { o as default };
+
+//# sourceMappingURL=LivePreviewSkeleton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LivePreviewSkeleton.js","names":["_openBlock","_createElementBlock","_plugin_vue_export_helper_default","_sfc_main","_hoisted_1","_sfc_render","openBlock","createElementBlock","LivePreviewSkeleton_default"],"sources":["../../../src/components/cms/LivePreviewSkeleton.vue"],"sourcesContent":["<template>\n  <div data-slot=\"cms-live-preview\" class=\"h-8\" aria-hidden=\"true\" />\n</template>\n"],"mappings":";;;;CACO,aAAU;CAAmB,OAAM;CAAM,eAAY;;;CAA1D,OAAAA,EAAA,GAAAC,EAAmE,OAAnEG,CAAmE"}

package/dist/components/cms/LivePreviewSkeleton.vue.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;
+//# sourceMappingURL=LivePreviewSkeleton.vue.d.ts.map

package/dist/components/cms/LivePreviewSkeleton.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LivePreviewSkeleton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/cms/LivePreviewSkeleton.vue"],"names":[],"mappings":";AAqCA,wBAKG"}

package/dist/components/cms/RichTextBlock.js

@@ -0,0 +1,7 @@
+import e from "./RichTextBlock.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/cms/RichTextBlock.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=RichTextBlock.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextBlock.js","names":["_sfc_main","RichTextBlock_vue_vue_type_script_setup_true_lang_default","RichTextBlock_default"],"sources":["../../../src/components/cms/RichTextBlock.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { cmsWidthClass, type CmsBlockSchema, type CmsRichTextBlockData } from '@alfakit/core'\nimport { cn } from '../../lib/utils'\nimport { useSectionClass } from './context'\n\nconst props = defineProps<{\n  block: CmsBlockSchema<CmsRichTextBlockData>\n  data: CmsRichTextBlockData\n}>()\n\nconst sectionClass = useSectionClass('py-8 sm:py-10')\n</script>\n\n<template>\n  <section data-slot=\"cms-rich-text\" :class=\"sectionClass\">\n    <!-- eslint-disable-next-line vue/no-v-html -- sanitised on the server (Html::sanitize) -->\n    <div :class=\"cn('alfakit-prose', cmsWidthClass(props.data.width))\" v-html=\"props.data.html\" />\n  </section>\n</template>\n"],"mappings":""}

package/dist/components/cms/RichTextBlock.vue.d.ts

@@ -0,0 +1,8 @@
+import { type CmsBlockSchema, type CmsRichTextBlockData } from '@alfakit/core';
+type __VLS_Props = {
+    block: CmsBlockSchema<CmsRichTextBlockData>;
+    data: CmsRichTextBlockData;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=RichTextBlock.vue.d.ts.map

package/dist/components/cms/RichTextBlock.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextBlock.vue.d.ts","sourceRoot":"","sources":["../../../src/components/cms/RichTextBlock.vue"],"names":[],"mappings":"AAqBA,OAAO,EAAiB,KAAK,cAAc,EAAE,KAAK,oBAAoB,EAAE,MAAM,eAAe,CAAA;AAI7F,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,cAAc,CAAC,oBAAoB,CAAC,CAAA;IAC3C,IAAI,EAAE,oBAAoB,CAAA;CAC3B,CAAC;;AA2CF,wBAMG"}

package/dist/components/cms/RichTextBlock.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,26 @@
+import { cn as e } from "../../lib/utils.js";
+import { useSectionClass as t } from "./context.js";
+import { cmsWidthClass as n } from "@alfakit/core";
+import { createElementBlock as r, createElementVNode as i, defineComponent as a, normalizeClass as o, openBlock as s, unref as c } from "vue";
+//#region src/components/cms/RichTextBlock.vue?vue&type=script&setup=true&lang.ts
+var l = ["innerHTML"], u = /*@__PURE__*/ a({
+	__name: "RichTextBlock",
+	props: {
+		block: {},
+		data: {}
+	},
+	setup(a) {
+		let u = a, d = t("py-8 sm:py-10");
+		return (t, a) => (s(), r("section", {
+			"data-slot": "cms-rich-text",
+			class: o(c(d))
+		}, [i("div", {
+			class: o(c(e)("alfakit-prose", c(n)(u.data.width))),
+			innerHTML: u.data.html
+		}, null, 10, l)], 2));
+	}
+});
+//#endregion
+export { u as default };
+
+//# sourceMappingURL=RichTextBlock.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/cms/RichTextBlock.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextBlock.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_unref","_createElementVNode","_hoisted_1","RichTextBlock_vue_vue_type_script_setup_true_lang_default","props","__props","sectionClass","useSectionClass","openBlock","createElementBlock","normalizeClass","unref","createElementVNode","cn","cmsWidthClass"],"sources":["../../../src/components/cms/RichTextBlock.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { cmsWidthClass, type CmsBlockSchema, type CmsRichTextBlockData } from '@alfakit/core'\nimport { cn } from '../../lib/utils'\nimport { useSectionClass } from './context'\n\nconst props = defineProps<{\n  block: CmsBlockSchema<CmsRichTextBlockData>\n  data: CmsRichTextBlockData\n}>()\n\nconst sectionClass = useSectionClass('py-8 sm:py-10')\n</script>\n\n<template>\n  <section data-slot=\"cms-rich-text\" :class=\"sectionClass\">\n    <!-- eslint-disable-next-line vue/no-v-html -- sanitised on the server (Html::sanitize) -->\n    <div :class=\"cn('alfakit-prose', cmsWidthClass(props.data.width))\" v-html=\"props.data.html\" />\n  </section>\n</template>\n"],"mappings":";;;;;;;;;;;;EAKA,IAAMO,IAAQC,GAKRC,IAAeC,EAAgB,eAAe;oBAIlDV,EAAA,GAAAC,EAGU,WAAA;GAHD,aAAU;GAAiB,OAAKC,EAAEC,EAAAM,CAAA,CAAY;EAErDL,GAAAA,CAAAA,EAA8F,OAAA;GAAxF,OAAKF,EAAEC,EAAAa,CAAA,CAAE,CAAA,iBAAkBb,EAAAc,CAAA,CAAa,CAACV,EAAM,KAAK,KAAK,CAAA,CAAA;GAAI,WAAQA,EAAM,KAAK"}

package/dist/components/cms/SectionBlock.js

@@ -0,0 +1,7 @@
+import e from "./SectionBlock.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/cms/SectionBlock.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=SectionBlock.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SectionBlock.js","names":["_sfc_main","SectionBlock_vue_vue_type_script_setup_true_lang_default","SectionBlock_default"],"sources":["../../../src/components/cms/SectionBlock.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { CmsBlockSchema, CmsSectionBlockData } from '@alfakit/core'\nimport CmsBlocks from './CmsBlocks.vue'\n\n/** A reusable section: its blocks, at full page width. */\nconst props = defineProps<{\n  block: CmsBlockSchema<CmsSectionBlockData>\n  data: CmsSectionBlockData\n}>()\n</script>\n\n<template>\n  <div data-slot=\"cms-section\" :data-section=\"props.data.name\">\n    <CmsBlocks :blocks=\"props.data.blocks\" />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/cms/SectionBlock.vue.d.ts

@@ -0,0 +1,9 @@
+import type { CmsBlockSchema, CmsSectionBlockData } from '@alfakit/core';
+/** A reusable section: its blocks, at full page width. */
+type __VLS_Props = {
+    block: CmsBlockSchema<CmsSectionBlockData>;
+    data: CmsSectionBlockData;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=SectionBlock.vue.d.ts.map

package/dist/components/cms/SectionBlock.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionBlock.vue.d.ts","sourceRoot":"","sources":["../../../src/components/cms/SectionBlock.vue"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAA;AAGxE,0DAA0D;AAC1D,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,cAAc,CAAC,mBAAmB,CAAC,CAAA;IAC1C,IAAI,EAAE,mBAAmB,CAAA;CAC1B,CAAC;;AA2CF,wBAMG"}

package/dist/components/cms/SectionBlock.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,21 @@
+import e from "./CmsBlocks.js";
+import { createElementBlock as t, createVNode as n, defineComponent as r, openBlock as i } from "vue";
+//#region src/components/cms/SectionBlock.vue?vue&type=script&setup=true&lang.ts
+var a = ["data-section"], o = /*@__PURE__*/ r({
+	__name: "SectionBlock",
+	props: {
+		block: {},
+		data: {}
+	},
+	setup(r) {
+		let o = r;
+		return (r, s) => (i(), t("div", {
+			"data-slot": "cms-section",
+			"data-section": o.data.name
+		}, [n(e, { blocks: o.data.blocks }, null, 8, ["blocks"])], 8, a));
+	}
+});
+//#endregion
+export { o as default };
+
+//# sourceMappingURL=SectionBlock.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/cms/SectionBlock.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionBlock.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_createVNode","CmsBlocks","CmsBlocks_default","_hoisted_1","SectionBlock_vue_vue_type_script_setup_true_lang_default","props","__props","openBlock","createElementBlock","createVNode"],"sources":["../../../src/components/cms/SectionBlock.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { CmsBlockSchema, CmsSectionBlockData } from '@alfakit/core'\nimport CmsBlocks from './CmsBlocks.vue'\n\n/** A reusable section: its blocks, at full page width. */\nconst props = defineProps<{\n  block: CmsBlockSchema<CmsSectionBlockData>\n  data: CmsSectionBlockData\n}>()\n</script>\n\n<template>\n  <div data-slot=\"cms-section\" :data-section=\"props.data.name\">\n    <CmsBlocks :blocks=\"props.data.blocks\" />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;EAKA,IAAMO,IAAQC;oBAOZR,EAAA,GAAAC,EAEM,OAAA;GAFD,aAAU;GAAe,gBAAcM,EAAM,KAAK;EACrDL,GAAAA,CAAAA,EAAyCC,GAAA,EAA7B,QAAQI,EAAM,KAAK,OAAA,GAAA,MAAA,GAAA,CAAA,QAAA,CAAA,CAAA,GAAA,GAAAF,CAAA"}

package/dist/components/cms/TestimonialsBlock.js

@@ -0,0 +1,7 @@
+import e from "./TestimonialsBlock.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/cms/TestimonialsBlock.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=TestimonialsBlock.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TestimonialsBlock.js","names":["_sfc_main","TestimonialsBlock_vue_vue_type_script_setup_true_lang_default","TestimonialsBlock_default"],"sources":["../../../src/components/cms/TestimonialsBlock.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { cmsGridClass, type CmsBlockSchema, type CmsTestimonialsBlockData } from '@alfakit/core'\nimport { QuoteIcon } from '@lucide/vue'\nimport CmsBlockHeading from './CmsBlockHeading.vue'\nimport CmsImage from './CmsImage.vue'\nimport { useSectionClass } from './context'\n\nconst props = defineProps<{\n  block: CmsBlockSchema<CmsTestimonialsBlockData>\n  data: CmsTestimonialsBlockData\n}>()\n\nconst sectionClass = useSectionClass()\n</script>\n\n<template>\n  <section data-slot=\"cms-testimonials\" :class=\"sectionClass\">\n    <div class=\"mx-auto max-w-6xl\">\n      <CmsBlockHeading :heading=\"props.data.heading\" />\n      <ul :class=\"cmsGridClass(Math.min(3, props.data.items.length))\" role=\"list\">\n        <li v-for=\"(item, index) in props.data.items\" :key=\"`${item.author}-${index}`\">\n          <figure class=\"bg-card flex h-full flex-col gap-5 rounded-xl border p-6\">\n            <QuoteIcon class=\"text-primary/60 size-6 rtl:-scale-x-100\" aria-hidden=\"true\" />\n            <blockquote class=\"flex-1 text-pretty\">\n              <p>{{ item.quote }}</p>\n            </blockquote>\n            <figcaption class=\"flex items-center gap-3\">\n              <CmsImage\n                v-if=\"item.avatar\"\n                :image=\"{ ...item.avatar, alt: '' }\"\n                class=\"size-10 rounded-full object-cover\"\n              />\n              <span class=\"flex flex-col\">\n                <span class=\"font-medium\">{{ item.author }}</span>\n                <span v-if=\"item.role\" class=\"text-muted-foreground text-sm\">{{ item.role }}</span>\n              </span>\n            </figcaption>\n          </figure>\n        </li>\n      </ul>\n    </div>\n  </section>\n</template>\n"],"mappings":""}

package/dist/components/cms/TestimonialsBlock.vue.d.ts

@@ -0,0 +1,8 @@
+import { type CmsBlockSchema, type CmsTestimonialsBlockData } from '@alfakit/core';
+type __VLS_Props = {
+    block: CmsBlockSchema<CmsTestimonialsBlockData>;
+    data: CmsTestimonialsBlockData;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=TestimonialsBlock.vue.d.ts.map

package/dist/components/cms/TestimonialsBlock.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TestimonialsBlock.vue.d.ts","sourceRoot":"","sources":["../../../src/components/cms/TestimonialsBlock.vue"],"names":[],"mappings":"AA6CA,OAAO,EAAgB,KAAK,cAAc,EAAE,KAAK,wBAAwB,EAAE,MAAM,eAAe,CAAA;AAMhG,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,cAAc,CAAC,wBAAwB,CAAC,CAAA;IAC/C,IAAI,EAAE,wBAAwB,CAAA;CAC/B,CAAC;;AAuIF,wBAMG"}

package/dist/components/cms/TestimonialsBlock.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,45 @@
+import { useSectionClass as e } from "./context.js";
+import t from "./CmsBlockHeading.js";
+import n from "./CmsImage.js";
+import { cmsGridClass as r } from "@alfakit/core";
+import { Fragment as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, normalizeClass as d, openBlock as f, renderList as p, toDisplayString as m, unref as h } from "vue";
+import { QuoteIcon as g } from "@lucide/vue";
+//#region src/components/cms/TestimonialsBlock.vue?vue&type=script&setup=true&lang.ts
+var _ = { class: "mx-auto max-w-6xl" }, v = { class: "bg-card flex h-full flex-col gap-5 rounded-xl border p-6" }, y = { class: "flex-1 text-pretty" }, b = { class: "flex items-center gap-3" }, x = { class: "flex flex-col" }, S = { class: "font-medium" }, C = {
+	key: 0,
+	class: "text-muted-foreground text-sm"
+}, w = /*@__PURE__*/ u({
+	__name: "TestimonialsBlock",
+	props: {
+		block: {},
+		data: {}
+	},
+	setup(u) {
+		let w = u, T = e();
+		return (e, u) => (f(), s("section", {
+			"data-slot": "cms-testimonials",
+			class: d(h(T))
+		}, [c("div", _, [l(t, { heading: w.data.heading }, null, 8, ["heading"]), c("ul", {
+			class: d(h(r)(Math.min(3, w.data.items.length))),
+			role: "list"
+		}, [(f(!0), s(i, null, p(w.data.items, (e, t) => (f(), s("li", { key: `${e.author}-${t}` }, [c("figure", v, [
+			l(h(g), {
+				class: "text-primary/60 size-6 rtl:-scale-x-100",
+				"aria-hidden": "true"
+			}),
+			c("blockquote", y, [c("p", null, m(e.quote), 1)]),
+			c("figcaption", b, [e.avatar ? (f(), a(n, {
+				key: 0,
+				image: {
+					...e.avatar,
+					alt: ""
+				},
+				class: "size-10 rounded-full object-cover"
+			}, null, 8, ["image"])) : o("", !0), c("span", x, [c("span", S, m(e.author), 1), e.role ? (f(), s("span", C, m(e.role), 1)) : o("", !0)])])
+		])]))), 128))], 2)])], 2));
+	}
+});
+//#endregion
+export { w as default };
+
+//# sourceMappingURL=TestimonialsBlock.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/cms/TestimonialsBlock.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TestimonialsBlock.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_unref","_createElementVNode","_createVNode","CmsBlockHeading","_Fragment","_renderList","_toDisplayString","_createBlock","CmsImage","_createCommentVNode","CmsBlockHeading_default","CmsImage_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","TestimonialsBlock_vue_vue_type_script_setup_true_lang_default","props","__props","sectionClass","useSectionClass","openBlock","createElementBlock","normalizeClass","unref","createElementVNode","createVNode","cmsGridClass","Fragment","renderList","item","index","QuoteIcon","toDisplayString","createBlock","createCommentVNode"],"sources":["../../../src/components/cms/TestimonialsBlock.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { cmsGridClass, type CmsBlockSchema, type CmsTestimonialsBlockData } from '@alfakit/core'\nimport { QuoteIcon } from '@lucide/vue'\nimport CmsBlockHeading from './CmsBlockHeading.vue'\nimport CmsImage from './CmsImage.vue'\nimport { useSectionClass } from './context'\n\nconst props = defineProps<{\n  block: CmsBlockSchema<CmsTestimonialsBlockData>\n  data: CmsTestimonialsBlockData\n}>()\n\nconst sectionClass = useSectionClass()\n</script>\n\n<template>\n  <section data-slot=\"cms-testimonials\" :class=\"sectionClass\">\n    <div class=\"mx-auto max-w-6xl\">\n      <CmsBlockHeading :heading=\"props.data.heading\" />\n      <ul :class=\"cmsGridClass(Math.min(3, props.data.items.length))\" role=\"list\">\n        <li v-for=\"(item, index) in props.data.items\" :key=\"`${item.author}-${index}`\">\n          <figure class=\"bg-card flex h-full flex-col gap-5 rounded-xl border p-6\">\n            <QuoteIcon class=\"text-primary/60 size-6 rtl:-scale-x-100\" aria-hidden=\"true\" />\n            <blockquote class=\"flex-1 text-pretty\">\n              <p>{{ item.quote }}</p>\n            </blockquote>\n            <figcaption class=\"flex items-center gap-3\">\n              <CmsImage\n                v-if=\"item.avatar\"\n                :image=\"{ ...item.avatar, alt: '' }\"\n                class=\"size-10 rounded-full object-cover\"\n              />\n              <span class=\"flex flex-col\">\n                <span class=\"font-medium\">{{ item.author }}</span>\n                <span v-if=\"item.role\" class=\"text-muted-foreground text-sm\">{{ item.role }}</span>\n              </span>\n            </figcaption>\n          </figure>\n        </li>\n      </ul>\n    </div>\n  </section>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;EAOA,IAAMuB,IAAQC,GAKRC,IAAeC,EAAgB;oBAInC1B,EAAA,GAAAC,EAyBU,WAAA;GAzBD,aAAU;GAAoB,OAAKC,EAAEC,EAAAsB,CAAA,CAAY;EACxDrB,GAAAA,CAAAA,EAuBM,OAvBNW,GAuBM,CAtBJV,EAAiDC,GAAA,EAA/B,SAASiB,EAAM,KAAK,QAAA,GAAA,MAAA,GAAA,CAAA,SAAA,CAAA,GACtCnB,EAoBK,MAAA;GApBA,OAAKF,EAAEC,EAAA8B,CAAA,CAAY,CAAC,KAAK,IAAG,GAAIV,EAAM,KAAK,MAAM,MAAM,CAAA,CAAA;GAAI,MAAK;EACnEvB,GAAAA,EAAAA,EAAA,EAAA,GAAAC,EAkBKM,GAAA,MAAAC,EAlBuBe,EAAM,KAAK,QAA3B,GAAM,OAAlBvB,EAAA,GAAAC,EAkBK,MAAA,EAlB0C,KAAG,GAAKmC,EAAK,OAAM,GAAIC,IAAA,GAAA,CACpEjC,EAgBS,UAhBTY,GAgBS;GAfPX,EAAgFF,EAAAmC,CAAA,GAAA;IAArE,OAAM;IAA0C,eAAY;;GACvElC,EAEa,cAFba,GAEa,CADXb,EAAuB,KAAA,MAAAK,EAAjB2B,EAAK,KAAK,GAAA,CAAA,CAAA,CAAA;GAElBhC,EAUa,cAVbc,GAUa,CARHkB,EAAK,UADbpC,EAAA,GAAAU,EAIEC,GAAA;;IAFC,OAAK;KAAA,GAAOyB,EAAK;KAAM,KAAA;IAAA;IACxB,OAAM;GAERhC,GAAAA,MAAAA,GAAAA,CAAAA,OAAAA,CAAAA,KAAAA,EAAAA,IAAAA,EAAAA,GAAAA,EAGO,QAHPe,GAGO,CAFLf,EAAkD,QAAlDgB,GAAkDX,EAArB2B,EAAK,MAAM,GAAA,CAAA,GAC5BA,EAAK,QAAjBpC,EAAA,GAAAC,EAAmF,QAAnFoB,GAAmFZ,EAAnB2B,EAAK,IAAI,GAAA,CAAA,KAAAK,EAAA,IAAA,EAAA,CAAA,CAAA,CAAA,CAAA"}

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

@@ -0,0 +1,4 @@
+import type { AnyComponent } from '../../context';
+/** The built-in block renderers, by type. Each gets `block` and `data` props. */
+export declare const CMS_BLOCK_COMPONENTS: Record<string, AnyComponent>;
+//# sourceMappingURL=blocks.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"blocks.d.ts","sourceRoot":"","sources":["../../../src/components/cms/blocks.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAcjD,iFAAiF;AACjF,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAa7D,CAAA"}

package/dist/components/cms/blocks.js

@@ -0,0 +1,31 @@
+import e from "./CallToActionBlock.js";
+import t from "./ColumnsBlock.js";
+import n from "./EmbedBlock.js";
+import r from "./FaqBlock.js";
+import i from "./FeaturesBlock.js";
+import a from "./FormBlock.js";
+import o from "./GalleryBlock.js";
+import s from "./HeroBlock.js";
+import c from "./ImageBlock.js";
+import l from "./RichTextBlock.js";
+import u from "./SectionBlock.js";
+import d from "./TestimonialsBlock.js";
+//#region src/components/cms/blocks.ts
+var f = {
+	hero: s,
+	"rich-text": l,
+	image: c,
+	gallery: o,
+	"call-to-action": e,
+	features: i,
+	faq: r,
+	testimonials: d,
+	embed: n,
+	columns: t,
+	form: a,
+	section: u
+};
+//#endregion
+export { f as CMS_BLOCK_COMPONENTS };
+
+//# sourceMappingURL=blocks.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"blocks.js","names":["HeroBlock","RichTextBlock","ImageBlock","GalleryBlock","CallToActionBlock","FeaturesBlock","FaqBlock","TestimonialsBlock","EmbedBlock","ColumnsBlock","FormBlock","SectionBlock","CallToActionBlock_default","ColumnsBlock_default","EmbedBlock_default","FaqBlock_default","FeaturesBlock_default","FormBlock_default","GalleryBlock_default","HeroBlock_default","ImageBlock_default","RichTextBlock_default","SectionBlock_default","TestimonialsBlock_default","CMS_BLOCK_COMPONENTS"],"sources":["../../../src/components/cms/blocks.ts"],"sourcesContent":["import type { AnyComponent } from '../../context'\nimport CallToActionBlock from './CallToActionBlock.vue'\nimport ColumnsBlock from './ColumnsBlock.vue'\nimport EmbedBlock from './EmbedBlock.vue'\nimport FaqBlock from './FaqBlock.vue'\nimport FeaturesBlock from './FeaturesBlock.vue'\nimport FormBlock from './FormBlock.vue'\nimport GalleryBlock from './GalleryBlock.vue'\nimport HeroBlock from './HeroBlock.vue'\nimport ImageBlock from './ImageBlock.vue'\nimport RichTextBlock from './RichTextBlock.vue'\nimport SectionBlock from './SectionBlock.vue'\nimport TestimonialsBlock from './TestimonialsBlock.vue'\n\n/** The built-in block renderers, by type. Each gets `block` and `data` props. */\nexport const CMS_BLOCK_COMPONENTS: Record<string, AnyComponent> = {\n  hero: HeroBlock,\n  'rich-text': RichTextBlock,\n  image: ImageBlock,\n  gallery: GalleryBlock,\n  'call-to-action': CallToActionBlock,\n  features: FeaturesBlock,\n  faq: FaqBlock,\n  testimonials: TestimonialsBlock,\n  embed: EmbedBlock,\n  columns: ColumnsBlock,\n  form: FormBlock,\n  section: SectionBlock,\n}\n"],"mappings":";;;;;;;;;;;;;AAeA,IAAawB,IAAqD;CAChE,MAAMxB;CACN,aAAaC;CACb,OAAOC;CACP,SAASC;CACT,kBAAkBC;CAClB,UAAUC;CACV,KAAKC;CACL,cAAcC;CACd,OAAOC;CACP,SAASC;CACT,MAAMC;CACN,SAASC;AACX"}