@websline/cms-view-utils 0.26.0 → 1.0.0-alpha.0

package/dist/editScroll.global.js

@@ -0,0 +1 @@
+(()=>{(function(){var c;if(typeof window>"u")return;let u=150,a=60,t=document.currentScript||[...document.querySelectorAll("script[data-slug]")].pop(),n=(c=t==null?void 0:t.dataset)==null?void 0:c.slug;if(!n){console.warn("[editScroll] Missing data-slug");return}let s=`preview-scroll:${n}`,r=null,l=0,i=()=>{let e=window.scrollY;e!==l&&(l=e,sessionStorage.setItem(s,String(e)))},d=()=>{clearTimeout(r),r=setTimeout(i,u)},w=()=>{let e=sessionStorage.getItem(s);if(!e)return;let o=Number(e);Number.isNaN(o)||requestAnimationFrame(()=>{window.scrollTo(0,o),setTimeout(()=>{window.scrollTo(0,o)},a)})};window.addEventListener("scroll",d,{passive:!0}),window.addEventListener("beforeunload",i),window.addEventListener("load",w)})();})();

package/dist/previewBridge.global.js

@@ -0,0 +1 @@
+(()=>{var e={BLOCK_ADD:"BLOCK_ADD",BLOCK_DELETE:"BLOCK_DELETE",BLOCK_EDIT:"BLOCK_EDIT",BLOCK_SHOW:"BLOCK_SHOW",BLOCK_HIDE:"BLOCK_HIDE",SLUG_CHANGED:"SLUG_CHANGED",SLUG_ON_LOAD:"SLUG_ON_LOAD",IFRAME_DOM_LOADED:"IFRAME_DOM_LOADED",CURRENT_BLOCK_EDIT:"CURRENT_BLOCK_EDIT",SCROLL_TO_BLOCK:"SCROLL_TO_BLOCK"},_=(r,L={})=>{r&&window.parent!==window&&window.parent.postMessage({type:r,payload:L},"*")};(function(){if(window.parent===window||window.__PREVIEW_BRIDGE_INITIALIZED__)return;window.__PREVIEW_BRIDGE_INITIALIZED__=!0;let r=t=>t.metaKey||t.ctrlKey||t.shiftKey,L=t=>{let n=t.target.closest("a[href]");if(!n||n.target==="_blank"||r(t))return;let o=new URL(n.href,window.location.origin);o.origin===window.location.origin&&(t.preventDefault(),t.stopPropagation(),_(e.SLUG_CHANGED,{slug:o.pathname}))};document.addEventListener("click",L,!0),_(e.SLUG_ON_LOAD,{slug:window.location.pathname}),window.addEventListener("load",()=>{_(e.IFRAME_DOM_LOADED)});let c=t=>{let n=`[data-cms-block-id="${t}"]`,o=0,i=10,a=setInterval(()=>{let E=document.querySelector(n);E&&(E.scrollIntoView({behavior:"smooth",block:"center"}),clearInterval(a)),++o>=i&&clearInterval(a)},100)};window.addEventListener("message",t=>{let{type:n,payload:o}=t.data||{};if(n&&n===e.SCROLL_TO_BLOCK){let{draftBlockUuid:i}=o||{};if(!i)return;c(i)}})})();})();

package/package.json

@@ -1,19 +1,25 @@
 {
   "name": "@websline/cms-view-utils",
-  "version": "0.26.0",
+  "version": "1.0.0-alpha.0",
   "type": "module",
-  "exports": {
-    ".": "./src/index.js"
-  },
   "files": [
-    "src"
+    "src",
+    "dist"
   ],
+  "exports": {
+    "./components/*": "./src/components/*",
+    "./utils/*": "./src/utils/*",
+    "./preview-bridge": "./dist/previewBridge.global.js",
+    "./edit-scroll": "./dist/editScroll.global.js",
+    "./dist/*": "./dist/*"
+  },
+  "dependencies": {
+    "jsonwebtoken": "^9.0.3"
+  },
   "peerDependencies": {
-    "astro": "^5.9.2",
-    "svelte": "^5.34.1"
+    "svelte": "^5.0.0"
   },
   "scripts": {
-    "bump:minor": "pnpm version minor --no-git-tag-version",
-    "release": "pnpm run bump:minor && pnpm publish --access public --no-git-checks"
+    "build": "tsup"
   }
 }

package/src/components/AddBlockPlaceholder.svelte

@@ -0,0 +1,49 @@
+<script>
+	import { EVENTS, notifyCMS } from "../utils/notify.js";
+
+	let {
+		class: className,
+		color = "#000fff",
+		textColor = "#F1F1F2",
+		label = "Ersten Block hinzufügen",
+	} = $props();
+
+	const handleClick = () => {
+		notifyCMS(EVENTS.BLOCK_ADD);
+	};
+</script>
+
+<button
+	class={`group relative block min-h-32 w-full cursor-pointer rounded-lg transition-all duration-150 ${className}`}
+	style={`--block-color: ${color}; --block-text: ${textColor};`}
+	onclick={handleClick}>
+	<div
+		class="absolute inset-0 rounded-lg border-2 border-dashed transition-all duration-150 group-hover:opacity-60"
+		style="border-color: var(--block-color); opacity: 0.25;">
+	</div>
+
+	<div
+		class="absolute inset-0 rounded-lg transition-all duration-150 group-hover:opacity-10"
+		style="background: var(--block-color); opacity: 0;">
+	</div>
+
+	<div class="relative flex h-full w-full flex-col items-center justify-center gap-2">
+		<div
+			class="flex h-10 w-10 items-center justify-center rounded-full border transition-all duration-150 group-hover:scale-110"
+			style="border-color: var(--block-color); color: var(--block-color);">
+			<svg width="18" height="18" viewBox="0 0 24 24" fill="none">
+				<path
+					d="M12 5V19M5 12H19"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round" />
+			</svg>
+		</div>
+
+		<span
+			class="text-sm transition-opacity duration-150 group-hover:opacity-100"
+			style="color: var(--block-color);">
+			{label}
+		</span>
+	</div>
+</button>

package/src/components/BlockWrapper.svelte

@@ -0,0 +1,51 @@
+<script>
+	let { block, children, spacingValues = {} } = $props();
+
+	const defaultSpacingValues = {
+		bottom: {
+			none: "pb-0",
+			s: "pb-4",
+			m: "pb-12",
+			l: "pb-24",
+			xl: "pb-30",
+		},
+		top: {
+			none: "pt-0",
+			s: "pt-4",
+			m: "pt-12",
+			l: "pt-24",
+			xl: "pt-30",
+		},
+	};
+
+	const spacingMap = $derived({
+		bottom: {
+			...defaultSpacingValues.bottom,
+			...(spacingValues?.bottom ?? {}),
+		},
+		top: {
+			...defaultSpacingValues.top,
+			...(spacingValues?.top ?? {}),
+		},
+	});
+
+	let spacingBottom = $derived(block?.meta?.spacing?.bottom);
+	let spacingTop = $derived(block?.meta?.spacing?.top);
+
+	let spacingClass = $derived(
+		[
+			spacingMap.top[spacingTop] ?? spacingMap.top.m,
+			spacingMap.bottom[spacingBottom] ?? spacingMap.bottom.m,
+		].join(" "),
+	);
+
+	let backgroundColor = $derived(block?.meta?.background);
+
+	let style = $derived(
+		backgroundColor ? `background-color: ${backgroundColor}` : undefined,
+	);
+</script>
+
+<div data-cms-block-wrapper class={`${spacingClass}`} {style}>
+	{@render children?.()}
+</div>

package/src/components/EditableBlock.svelte

@@ -0,0 +1,284 @@
+<script>
+	import { onMount } from "svelte";
+	import { EVENTS, notifyCMS } from "../utils/notify.js";
+	import { CMS_ACTIONS } from "../utils/cmsActions.js";
+	import Text from "./skeleton/Text.svelte";
+	import Image from "./skeleton/Image.svelte";
+	import Grid from "./skeleton/Grid.svelte";
+	import ImageText from "./skeleton/ImageText.svelte";
+
+	let {
+		block,
+		children,
+		color = "#000fff",
+		isValidBlock = true,
+		position,
+		textColor = "#F1F1F2",
+	} = $props();
+
+	const debounce = (fn, delay = 150) => {
+		let timer;
+
+		const debounced = (...args) => {
+			clearTimeout(timer);
+			timer = setTimeout(() => fn(...args), delay);
+		};
+
+		debounced.cancel = () => {
+			clearTimeout(timer);
+		};
+
+		return debounced;
+	};
+
+	const handleClick = (action) => {
+		switch (action) {
+			case CMS_ACTIONS.add:
+				notifyCMS(EVENTS.BLOCK_ADD, { position });
+				break;
+			case CMS_ACTIONS.delete:
+				notifyCMS(EVENTS.BLOCK_DELETE, {
+					draftBlockUuid: block.uuid,
+				});
+				break;
+			case CMS_ACTIONS.edit:
+				notifyCMS(EVENTS.BLOCK_EDIT, {
+					blockIdentifier: block.identifier,
+					draftBlockUuid: block.uuid,
+				});
+				break;
+			case CMS_ACTIONS.hideBlock:
+				notifyCMS(EVENTS.BLOCK_HIDE, {
+					draftBlockUuid: block.uuid,
+				});
+				break;
+			case CMS_ACTIONS.showBlock:
+				notifyCMS(EVENTS.BLOCK_SHOW, {
+					draftBlockUuid: block.uuid,
+				});
+				break;
+			default:
+				break;
+		}
+	};
+
+	let blockVisible = $derived(block?.meta?.visibility?.enabled);
+
+	let isHovered = $state(false);
+	let isActive = $state(false);
+	let skeleton = $derived(block?.meta?.emptyOptions?.skeleton || "text");
+
+	let toolbarVisible = $derived(isHovered || isActive);
+
+	const handleLeave = () => {
+		handleEnterDebounced.cancel();
+		isHovered = false;
+	};
+
+	const handleEnterDebounced = debounce(() => {
+		isHovered = true;
+	}, 50);
+
+	const handler = (event) => {
+		const { type, payload } = event.data || {};
+		if (type !== EVENTS.CURRENT_BLOCK_EDIT) return;
+
+		const { draftBlockUuid } = payload || {};
+
+		isActive = draftBlockUuid === block.uuid;
+	};
+
+	onMount(() => {
+		window.addEventListener("message", handler);
+
+		return () => {
+			window.removeEventListener("message", handler);
+		};
+	});
+</script>
+
+<div
+	class="relative min-h-13"
+	style={`--block-color: ${color}; --block-text: ${textColor};`}
+	data-cms-block-id={block.uuid}
+	data-cms-editable-block
+	onmouseenter={handleEnterDebounced}
+	onmouseleave={handleLeave}
+	role="group">
+	<div
+		class="pointer-events-none absolute inset-0 z-20 border-6 transition-opacity duration-100"
+		style="border-color: var(--block-color)"
+		class:opacity-100={toolbarVisible}
+		class:opacity-0={!toolbarVisible}>
+	</div>
+
+	<div
+		class="absolute top-1.5 left-1/2 z-10 flex h-9 -translate-x-1/2 items-center justify-center gap-1.5 rounded-b-lg px-3 pb-1 transition-opacity duration-100 before:absolute before:top-0 before:-left-4 before:h-4 before:w-4 before:rounded-full before:bg-transparent before:shadow-[6px_-6px_0_0_var(--block-color)] before:content-[''] after:absolute after:top-0 after:-right-4 after:h-4 after:w-4 after:rounded-full after:bg-transparent after:shadow-[-6px_-6px_0_0_var(--block-color)] after:content-['']"
+		style="background: var(--block-color); color: var(--block-text);"
+		class:opacity-100={toolbarVisible}
+		class:opacity-0={!toolbarVisible}>
+		<button
+			aria-label="add block"
+			class="cursor-pointer"
+			onclick={() => handleClick(CMS_ACTIONS.add)}>
+			<svg
+				width="24"
+				height="24"
+				viewBox="0 0 24 24"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg">
+				<path
+					d="M12.0346 4L12.0137 20M4 12H20"
+					stroke="var(--block-text)"
+					stroke-width="1.5"
+					stroke-linecap="round"
+					stroke-linejoin="round" />
+			</svg>
+		</button>
+
+		<!-- {#if blockVisible}
+			<button
+				aria-label="hide block"
+				class="cursor-pointer"
+				onclick={() => handleClick(CMS_ACTIONS.hideBlock)}>
+				<svg
+					width="24"
+					height="24"
+					viewBox="0 0 16 16"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg">
+					<path
+						d="M7.99992 12C11.6818 12 14.6666 8 14.6666 8C14.6666 8 11.6818 4 7.99992 4C4.31802 4 1.33325 8 1.33325 8C1.33325 8 4.31802 12 7.99992 12Z"
+						stroke="var(--block-text)"
+						stroke-width="1"
+						stroke-linejoin="round" />
+					<path
+						d="M7.99992 9.66667C8.92038 9.66667 9.66658 8.92047 9.66658 8C9.66658 7.07953 8.92038 6.33333 7.99992 6.33333C7.07945 6.33333 6.33325 7.07953 6.33325 8C6.33325 8.92047 7.07945 9.66667 7.99992 9.66667Z"
+						stroke="var(--block-text)"
+						stroke-width="1"
+						stroke-linejoin="round" />
+				</svg>
+			</button>
+		{/if}
+
+		{#if !blockVisible}
+			<button
+				aria-label="show block"
+				class="cursor-pointer"
+				onclick={() => handleClick(CMS_ACTIONS.showBlock)}>
+				<svg
+					width="24"
+					height="24"
+					viewBox="0 0 16 16"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg">
+					<path
+						d="M7.99992 12C11.6818 12 14.6666 8 14.6666 8C14.6666 8 11.6818 4 7.99992 4C4.31802 4 1.33325 8 1.33325 8C1.33325 8 4.31802 12 7.99992 12Z"
+						stroke="var(--block-text)"
+						stroke-width="1"
+						stroke-linejoin="round" />
+					<path
+						d="M7.99992 9.66667C8.92038 9.66667 9.66658 8.92047 9.66658 8C9.66658 7.07953 8.92038 6.33333 7.99992 6.33333C7.07945 6.33333 6.33325 7.07953 6.33325 8C6.33325 8.92047 7.07945 9.66667 7.99992 9.66667Z"
+						stroke="var(--block-text)"
+						stroke-width="1"
+						stroke-linejoin="round" />
+					<path
+						d="M2.66675 13.3334L13.3334 2.66671"
+						stroke="var(--block-text)"
+						stroke-width="1"
+						stroke-linecap="round" />
+				</svg>
+			</button>
+		{/if} -->
+
+		<button
+			aria-label="copy block"
+			class="cursor-pointer"
+			onclick={() => handleClick(CMS_ACTIONS.copy)}>
+			<svg
+				width="24"
+				height="24"
+				viewBox="0 0 28 28"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg">
+				<path
+					d="M0 4C0 1.79086 1.79086 0 4 0H24C26.2091 0 28 1.79086 28 4V24C28 26.2091 26.2091 28 24 28H4C1.79086 28 0 26.2091 0 24V4Z"
+					fill="var(--block-color)"></path>
+				<path
+					d="M10 4.5H22C22.2761 4.50011 22.5 4.72392 22.5 5V19C22.5 19.2761 22.2761 19.4999 22 19.5H18.5V22.999C18.5 23.2731 18.2763 23.4999 17.9932 23.5H6.00684C5.72308 23.5 5.5 23.2754 5.5 22.999L5.50293 9.00098C5.50298 8.72676 5.72665 8.5 6.00977 8.5H9.5V5C9.5 4.72386 9.72386 4.5 10 4.5ZM6.50195 10L6.5 22V22.5H17.5V9.5H6.50293L6.50195 10ZM10.5 8.5H18.5V18.5H21.5V5.5H10.5V8.5Z"
+					stroke="var(--block-text)"></path>
+			</svg>
+		</button>
+
+		<button
+			aria-label="position block"
+			class="cursor-pointer"
+			onclick={() => handleClick(CMS_ACTIONS.position)}>
+			<svg
+				width="24"
+				height="24"
+				viewBox="0 0 24 24"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg">
+				<path
+					d="M12.5 7L8 2.5L3.5 7M7.99585 15.5V2.5M21 17L16.5 21.5L12 17M16.4958 8.5V21.5"
+					stroke="var(--block-text)"
+					stroke-width="1.5"
+					stroke-linecap="round"
+					stroke-linejoin="round" />
+			</svg>
+		</button>
+
+		<button
+			aria-label="delete block"
+			class="cursor-pointer"
+			onclick={() => handleClick(CMS_ACTIONS.delete)}>
+			<svg
+				width="24"
+				height="24"
+				viewBox="0 0 16 16"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg">
+				<path
+					d="M6.66667 6.66659V11.3333M9.33333 6.66659V11.3333M2 3.33325H14M3.33333 3.33325V14.6666H12.6667V3.33325H3.33333ZM5.33333 3.33325L6.42967 1.33325H9.59237L10.6667 3.33325H5.33333Z"
+					stroke="var(--block-text)"
+					stroke-width="1"
+					stroke-linecap="round"
+					stroke-linejoin="round" />
+			</svg>
+		</button>
+
+		<button
+			aria-label="edit block"
+			class="cursor-pointer"
+			onclick={() => handleClick(CMS_ACTIONS.edit)}>
+			<svg
+				width="24"
+				height="24"
+				viewBox="0 0 24 24"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg">
+				<path
+					d="M3 22H21M5 13.5111V17.5556H8.6586L19 6.06006L15.3476 2L5 13.5111Z"
+					stroke="var(--block-text)"
+					stroke-width="1.5"
+					stroke-linecap="round"
+					stroke-linejoin="round" />
+			</svg>
+		</button>
+	</div>
+
+	<div class:opacity-100={blockVisible} class:opacity-25={!blockVisible}>
+		{#if isValidBlock}
+			{@render children?.()}
+		{:else if skeleton === "text"}
+			<Text />
+		{:else if skeleton === "image"}
+			<Image />
+		{:else if skeleton === "grid"}
+			<Grid />
+		{:else if skeleton === "image-text"}
+			<ImageText />
+		{/if}
+	</div>
+</div>

package/src/components/Picture.svelte

@@ -0,0 +1,87 @@
+<script>
+	let {
+		className = "",
+		decoding = "async",
+		image,
+		loading = "lazy",
+		sources = {},
+	} = $props();
+
+	const data = (() => {
+		if (!image || !image.formats) {
+			return {
+				resolved: [],
+				fallbackFormat: null,
+				fallbackSrc: "",
+				alt: "",
+			};
+		}
+
+		const formats = image.formats;
+
+		const formatMap = Object.create(null);
+
+		for (let i = 0; i < formats.length; i++) {
+			const f = formats[i];
+			formatMap[f.identifier] = f;
+		}
+
+		const normalized = [];
+
+		for (const id in sources) {
+			const min = sources[id];
+			normalized.push([id, min === true ? 0 : (min ?? 0)]);
+		}
+
+		if (normalized.length > 1) {
+			normalized.sort((a, b) => b[1] - a[1]);
+		}
+
+		const resolved = [];
+
+		for (let i = 0; i < normalized.length; i++) {
+			const [id, min] = normalized[i];
+			const format = formatMap[id];
+
+			if (format && format.sources && format.sources.length) {
+				resolved.push({ min, format });
+			}
+		}
+
+		let fallbackFormat = null;
+		let fallbackSrc = "";
+
+		if (resolved.length) {
+			const last = resolved[resolved.length - 1];
+
+			fallbackFormat = last.format;
+			fallbackSrc = fallbackFormat.sources[0]?.url ?? "";
+		}
+
+		const alt = image.alt ?? image.title ?? "";
+
+		return { resolved, fallbackFormat, fallbackSrc, alt };
+	})();
+</script>
+
+{#if data.resolved.length}
+	<picture>
+		{#each data.resolved as r (r.format.identifier + "-" + r.min)}
+			{#each r.format.sources as source (source.type + source.url)}
+				<source
+					srcset={source.url}
+					type={source.type}
+					media={r.min > 0 ? `(min-width: ${r.min}px)` : undefined} />
+			{/each}
+		{/each}
+
+		<img
+			src={data.fallbackSrc}
+			alt={data.alt}
+			width={data.fallbackFormat.width}
+			height={data.fallbackFormat.height}
+			{loading}
+			{decoding}
+			class={`h-full w-full object-cover ${className}`} />
+	</picture>
+{/if}

package/src/components/skeleton/Grid.svelte

@@ -0,0 +1,34 @@
+<script>
+	const { columns = 3, gap = 2, items = 6, ratio = "4/3" } = $props();
+
+	const gridClass = $derived(
+		columns === 2 ? "grid-cols-2" : columns === 4 ? "grid-cols-4" : "grid-cols-3",
+	);
+</script>
+
+<div class={`mx-auto grid max-w-220 gap-${gap} ${gridClass}`}>
+	{#each Array.from({ length: items }, (_, idx) => idx) as idx (idx)}
+		<div
+			class="relative w-full overflow-hidden bg-slate-300/60"
+			style={`aspect-ratio: ${ratio};`}>
+			<div
+				class="animate-shimmer absolute inset-0 bg-linear-to-r from-transparent via-white/60 to-transparent">
+			</div>
+		</div>
+	{/each}
+</div>
+
+<style>
+	@keyframes shimmer {
+		0% {
+			transform: translateX(-120%);
+		}
+		100% {
+			transform: translateX(120%);
+		}
+	}
+
+	.animate-shimmer {
+		animation: shimmer 1.4s infinite;
+	}
+</style>

package/src/components/skeleton/Image.svelte

@@ -0,0 +1,26 @@
+<script>
+	const { ratio = "16/9" } = $props();
+</script>
+
+<div
+	class="relative mx-auto w-full max-w-220 overflow-hidden bg-slate-300/60"
+	style={`aspect-ratio: ${ratio};`}>
+	<div
+		class="animate-shimmer absolute inset-0 bg-linear-to-r from-transparent via-white/60 to-transparent">
+	</div>
+</div>
+
+<style>
+	@keyframes shimmer {
+		0% {
+			transform: translateX(-120%);
+		}
+		100% {
+			transform: translateX(120%);
+		}
+	}
+
+	.animate-shimmer {
+		animation: shimmer 1.4s infinite;
+	}
+</style>

package/src/components/skeleton/ImageText.svelte

@@ -0,0 +1,50 @@
+<script>
+	const { ratio = "1/1", reverse = false } = $props();
+
+	const widths = ["w-full", "w-11/12", "w-10/12", "w-8/12"];
+</script>
+
+<div
+	class={`mx-auto flex max-w-220 items-center gap-6 ${
+		reverse ? "flex-row-reverse" : "flex-row"
+	}`}>
+	<div
+		class="relative w-1/2 overflow-hidden bg-slate-300/60"
+		style={`aspect-ratio: ${ratio};`}>
+		<div
+			class="animate-shimmer absolute inset-0 bg-linear-to-r from-transparent via-white/60 to-transparent">
+		</div>
+	</div>
+
+	<div class="w-1/2 space-y-2.5">
+		{#each Array.from({ length: 6 }, (_, idx) => idx) as idx (idx)}
+			<div
+				class={`relative overflow-hidden rounded-md ${
+					idx === 0
+						? "h-5 w-2/3 bg-slate-300/70"
+						: `h-[0.7rem] bg-slate-300/60 ${
+								idx === 3 ? "w-2/5" : widths[idx % widths.length]
+							}`
+				}`}>
+				<div
+					class="animate-shimmer absolute inset-0 bg-linear-to-r from-transparent via-white/60 to-transparent">
+				</div>
+			</div>
+		{/each}
+	</div>
+</div>
+
+<style>
+	@keyframes shimmer {
+		0% {
+			transform: translateX(-120%);
+		}
+		100% {
+			transform: translateX(120%);
+		}
+	}
+
+	.animate-shimmer {
+		animation: shimmer 1.4s infinite;
+	}
+</style>

package/src/components/skeleton/Text.svelte

@@ -0,0 +1,38 @@
+<script>
+	const { lines = 6 } = $props();
+
+	const widths = ["w-full", "w-11/12", "w-10/12", "w-8/12", "w-9/12"];
+</script>
+
+<div class="mx-auto max-w-220 space-y-2.5">
+	{#each Array.from({ length: lines }) as value, idx (idx)}
+		<div
+			class={`relative overflow-hidden rounded-md ${
+				idx === 0
+					? "h-5 w-2/3 bg-slate-300/70"
+					: `h-[0.7rem] bg-slate-300/60 ${
+							idx === lines - 1 ? "w-2/5" : widths[idx % widths.length]
+						}`
+			}`}
+			data-ignore={value}>
+			<div
+				class="animate-shimmer absolute inset-0 bg-linear-to-r from-transparent via-white/60 to-transparent">
+			</div>
+		</div>
+	{/each}
+</div>
+
+<style>
+	@keyframes shimmer {
+		0% {
+			transform: translateX(-120%);
+		}
+		100% {
+			transform: translateX(120%);
+		}
+	}
+
+	.animate-shimmer {
+		animation: shimmer 1.4s infinite;
+	}
+</style>

package/src/utils/blockValidation.js

@@ -0,0 +1,9 @@
+const isValid = (schema, block) => {
+	const { data, meta: { emptyOptions: { emptyBehavior } = {} } = {} } = block || {};
+
+	if (emptyBehavior === "show") return true;
+
+	return schema.safeParse(data).success;
+};
+
+export { isValid };

package/src/utils/cmsActions.js

@@ -0,0 +1,12 @@
+const CMS_ACTIONS = {
+	add: "add-block",
+	copy: "copy-block",
+	delete: "delete-block",
+	edit: "edit-block",
+	hideBlock: "hide-block",
+	position: "position-block",
+	showBlock: "show-block",
+	unlink: "unlink-block",
+};
+
+export { CMS_ACTIONS };

package/src/utils/editScroll.js

@@ -0,0 +1,55 @@
+(function () {
+	if (typeof window === "undefined") return;
+
+	const DEBOUNCE_MS = 150;
+	const RESTORE_DELAY = 60;
+
+	const script =
+		document.currentScript ||
+		[...document.querySelectorAll("script[data-slug]")].pop();
+
+	const slug = script?.dataset?.slug;
+
+	if (!slug) {
+		console.warn("[editScroll] Missing data-slug");
+		return;
+	}
+
+	const storageKey = `preview-scroll:${slug}`;
+
+	let timeout = null;
+	let lastY = 0;
+
+	const saveScroll = () => {
+		const y = window.scrollY;
+		if (y === lastY) return;
+
+		lastY = y;
+		sessionStorage.setItem(storageKey, String(y));
+	};
+
+	const onScroll = () => {
+		clearTimeout(timeout);
+		timeout = setTimeout(saveScroll, DEBOUNCE_MS);
+	};
+
+	const restoreScroll = () => {
+		const raw = sessionStorage.getItem(storageKey);
+		if (!raw) return;
+
+		const y = Number(raw);
+		if (Number.isNaN(y)) return;
+
+		requestAnimationFrame(() => {
+			window.scrollTo(0, y);
+
+			setTimeout(() => {
+				window.scrollTo(0, y);
+			}, RESTORE_DELAY);
+		});
+	};
+
+	window.addEventListener("scroll", onScroll, { passive: true });
+	window.addEventListener("beforeunload", saveScroll);
+	window.addEventListener("load", restoreScroll);
+})();

package/src/utils/editorToken.js

@@ -0,0 +1,24 @@
+import jwt from "jsonwebtoken";
+import { HttpError } from "./errors.js";
+
+const resolveDraftUuidFromToken = (editorToken) => {
+	if (!editorToken) return undefined;
+
+	try {
+		const payload = jwt.verify(editorToken, import.meta.env.CMS_EDITOR_JWT_SECRET);
+
+		if (payload.type !== "editor") {
+			throw new HttpError(401, "Invalid token type");
+		}
+
+		if (!payload.draftUuid) {
+			throw new HttpError(401, "Draft UUID missing in token");
+		}
+
+		return payload.draftUuid;
+	} catch {
+		throw new HttpError(401, "Invalid or expired editor token");
+	}
+};
+
+export { resolveDraftUuidFromToken };

package/src/utils/errors.js

@@ -0,0 +1,10 @@
+class HttpError extends Error {
+	constructor(status, message) {
+		super(message);
+		this.name = "HttpError";
+		this.status = status;
+		this.statusCode = status;
+	}
+}
+
+export { HttpError };

package/src/utils/fetchPage.js

@@ -0,0 +1,51 @@
+import { resolveDraftUuidFromToken } from "./editorToken.js";
+import { buildCmsPageUrl } from "./urlResolver.js";
+import { buildCmsHeaders } from "./headers.js";
+import { HttpError } from "./errors.js";
+
+const fetchPage = async (context) => {
+	let { slug = "" } = context.params;
+	const request = context.request;
+	const url = new URL(request.url);
+	const isCMSPreviewRoute = url.pathname.startsWith("/preview_");
+
+	if (isCMSPreviewRoute) {
+		slug = slug.replace(/^preview_/, "");
+	}
+
+	const editorToken = url.searchParams.get("editorToken");
+	const draftUuid = resolveDraftUuidFromToken(editorToken);
+	const isCMSEditRoute = editorToken && draftUuid;
+
+	const cmsUrl = buildCmsPageUrl({ slug, draftUuid });
+
+	const response = await fetch(cmsUrl, {
+		method: "GET",
+		headers: buildCmsHeaders(request),
+	});
+
+	if (response.status === 404) {
+		throw new HttpError(404, "Not Found");
+	}
+
+	if (!response.ok) {
+		throw new HttpError(response.status, "CMS Error");
+	}
+
+	const data = await response.json();
+
+	context.locals.content = data?.content ?? [];
+	context.locals.navigation = data?.navigation ?? {};
+	context.locals.page = data?.page ?? {};
+	context.locals.seo = data?.seo ?? {};
+	context.locals._cmsRaw = data;
+
+	if (isCMSPreviewRoute) {
+		context.locals._preview = true;
+	}
+	if (isCMSEditRoute) {
+		context.locals._edit = true;
+	}
+};
+
+export { fetchPage };

package/src/utils/headers.js

@@ -0,0 +1,9 @@
+const buildCmsHeaders = (request) => ({
+	"accept-language": request.headers.get("accept-language") ?? "",
+	"cms-tenant": import.meta.env.CMS_TENANT,
+	"cms-token": import.meta.env.CMS_TOKEN,
+	"user-agent": request.headers.get("user-agent") ?? "",
+	referer: request.headers.get("referer") ?? "",
+});
+
+export { buildCmsHeaders };

package/src/utils/notify.js

@@ -0,0 +1,27 @@
+const EVENTS = {
+	BLOCK_ADD: "BLOCK_ADD",
+	BLOCK_DELETE: "BLOCK_DELETE",
+	BLOCK_EDIT: "BLOCK_EDIT",
+	BLOCK_SHOW: "BLOCK_SHOW",
+	BLOCK_HIDE: "BLOCK_HIDE",
+	SLUG_CHANGED: "SLUG_CHANGED",
+	SLUG_ON_LOAD: "SLUG_ON_LOAD",
+	IFRAME_DOM_LOADED: "IFRAME_DOM_LOADED",
+	CURRENT_BLOCK_EDIT: "CURRENT_BLOCK_EDIT",
+	SCROLL_TO_BLOCK: "SCROLL_TO_BLOCK",
+};
+
+const notifyCMS = (type, payload = {}) => {
+	if (!type) return;
+	if (window.parent === window) return;
+
+	window.parent.postMessage(
+		{
+			type,
+			payload,
+		},
+		"*",
+	);
+};
+
+export { EVENTS, notifyCMS };

package/src/utils/previewBridge.js

@@ -0,0 +1,71 @@
+import { EVENTS, notifyCMS } from "./notify.js";
+
+(function () {
+	if (window.parent === window) return;
+	if (window.__PREVIEW_BRIDGE_INITIALIZED__) return;
+
+	window.__PREVIEW_BRIDGE_INITIALIZED__ = true;
+
+	const isModifiedClick = (event) => event.metaKey || event.ctrlKey || event.shiftKey;
+
+	const handleClick = (event) => {
+		const link = event.target.closest("a[href]");
+
+		if (!link) return;
+		if (link.target === "_blank") return;
+		if (isModifiedClick(event)) return;
+
+		const url = new URL(link.href, window.location.origin);
+		if (url.origin !== window.location.origin) return;
+
+		event.preventDefault();
+		event.stopPropagation();
+
+		notifyCMS(EVENTS.SLUG_CHANGED, {
+			slug: url.pathname,
+		});
+	};
+
+	document.addEventListener("click", handleClick, true);
+
+	notifyCMS(EVENTS.SLUG_ON_LOAD, {
+		slug: window.location.pathname,
+	});
+
+	window.addEventListener("load", () => {
+		notifyCMS(EVENTS.IFRAME_DOM_LOADED);
+	});
+
+	const scrollToId = (id) => {
+		const selector = `[data-cms-block-id="${id}"]`;
+
+		let tries = 0;
+		const max = 10;
+
+		const interval = setInterval(() => {
+			const el = document.querySelector(selector);
+
+			if (el) {
+				el.scrollIntoView({ behavior: "smooth", block: "center" });
+				clearInterval(interval);
+			}
+
+			if (++tries >= max) {
+				clearInterval(interval);
+			}
+		}, 100);
+	};
+
+	window.addEventListener("message", (event) => {
+		const { type, payload } = event.data || {};
+
+		if (!type) return;
+
+		if (type === EVENTS.SCROLL_TO_BLOCK) {
+			const { draftBlockUuid } = payload || {};
+			if (!draftBlockUuid) return;
+
+			scrollToId(draftBlockUuid);
+		}
+	});
+})();

package/src/utils/urlResolver.js

@@ -0,0 +1,13 @@
+const buildCmsPageUrl = ({ slug, draftUuid }) => {
+	const base = import.meta.env.CMS_URL;
+
+	if (draftUuid) {
+		return `${base}/api/public/pages/preview/${draftUuid}`;
+	}
+
+	const normalizedSlug = slug.startsWith("/") ? slug : `/${slug}`;
+
+	return `${base}/api/public/pages${normalizedSlug}`;
+};
+
+export { buildCmsPageUrl };

package/src/components/Block.astro

@@ -1,26 +0,0 @@
----
-const editToken = Astro.url.searchParams.get("edit_token") || null;
-const isPreviewMode = editToken !== null && editToken !== "";
-
-const { class: classes, style, ...rest } = Astro.props;
----
-
-{
-	isPreviewMode ? (
-		<div class={classes} data-edit-block {style} {...rest}>
-			<div data-edit-block-menu>
-				<div data-edit-block-item data-edit-block-item-edit>
-					Bearbeiten...
-				</div>
-				<div data-edit-block-item data-edit-block-item-delete>
-					Löschen...
-				</div>
-			</div>
-			<slot />
-		</div>
-	) : (
-		<div class={classes} {style}>
-			<slot />
-		</div>
-	)
-}

package/src/components/PageRenderer.astro

@@ -1,47 +0,0 @@
----
-import { fetchPageData } from "../data/pageData";
-
-const { locale, slug } = Astro.params;
-const editToken = Astro.url.searchParams.get("edit_token") || null;
-const isPreviewMode = editToken !== null && editToken !== "";
-
-await fetchPageData({ editToken, locals: Astro.locals, locale, slug });
-
-const CMS_URL = import.meta.env.PUBLIC_CMS_URL?.replace(/\/+$/, "");
-
-const styleURL = `${CMS_URL}/api/static/styles/drag-drop-blocks.css`;
-const scriptDragHandlerURL = `${CMS_URL}/api/static/scripts/iframeDragHandler.js`;
-const scriptDragDropUtilsURL = `${CMS_URL}/api/static/scripts/dragDropUtils.js`;
-
-const previewScript = `
-  import IframeDragHandler from "${scriptDragHandlerURL}";
-  import {
-    disableLinks,
-    enableEditBlocks,
-    insertDropZones,
-  } from "${scriptDragDropUtilsURL}";
-
-  new IframeDragHandler();
-  insertDropZones();
-  disableLinks();
-  enableEditBlocks();
-
-  window.CMS_URL = "${CMS_URL}";
-`;
----
-
-<slot />
-
-{
-	isPreviewMode && (
-		<>
-			<link
-				href="https://fonts.googleapis.com/css2?family=Ancizar+Sans:ital,wght@0,100..1000;1,100..1000&display=swap"
-				rel="stylesheet"
-			/>
-			<link rel="stylesheet" href={styleURL} />
-		</>
-	)
-}
-
-{isPreviewMode && <script type="module" set:html={previewScript} />}

package/src/data/index.js

@@ -1 +0,0 @@
-export * from "./pageData";

package/src/data/pageData.js

@@ -1,46 +0,0 @@
-const fetchPageData = async ({ editToken, locals, locale, slug }) => {
-	const CMS_URL = import.meta.env.PUBLIC_CMS_URL?.replace(/\/+$/, ""); // Remove trailing slashes
-	if (!CMS_URL) throw new Error("PUBLIC_CMS_URL ist nicht gesetzt.");
-
-	const API_URL = CMS_URL + "/api/public";
-
-	const key = `__pageData__${locale}__${slug}`;
-
-	if (!locals[key]) {
-		let url = `${API_URL}/${locale}/pages/${slug}`;
-
-		if (editToken) {
-			url += `?edit_token=${editToken}`;
-		}
-		const res = await fetch(url);
-
-		if (!res.ok) {
-			throw new Error(
-				`Fehler beim Abrufen der Seite: ${res.status} ${res.statusText}`
-			);
-		}
-
-		locals[key] = await res.json();
-	}
-
-	locals.__currentPageKey = key;
-	return locals[key];
-};
-
-const getPageData = (locals) => {
-	const key = locals?.__currentPageKey;
-
-	if (!key) {
-		throw new Error("locals fehlt");
-	}
-
-	if (!key || !locals[key]) {
-		throw new Error(
-			"getPageData() wurde aufgerufen, bevor fetchPageData() ausgeführt wurde."
-		);
-	}
-
-	return locals[key];
-};
-
-export { fetchPageData, getPageData };

package/src/index.js

@@ -1,3 +0,0 @@
-export { default as Block } from "./components/Block.astro";
-export { default as PageRenderer } from "./components/PageRenderer.astro";
-export * from "./data";