includio-cms 0.5.2 → 0.5.3

package/dist/admin/components/fields/url-field.svelte

@@ -1,34 +1,42 @@
-<script lang="ts" module>
-	type T = Record<string, unknown>;
-</script>
-
-<script lang="ts" generics="T extends Record<string, unknown>">
+<script lang="ts">
 	import type { SeoFieldData, UrlField, UrlFieldData } from '../../../types/fields.js';
-	import {
-		formFieldProxy,
-		type FormFieldProxy,
-		type FormPathLeaves,
-		type SuperForm
-	} from 'sveltekit-superforms';
 	import { getRemotes } from '../../../sveltekit/index.js';
 	import type { Entry } from '../../../types/entries.js';
-	import { joinPath } from '../../utils/objectPath.js';
-	import Input from '../../../components/ui/input/input.svelte';
+	import * as InputGroup from '../../../components/ui/input-group/index.js';
+	import Badge from '../../../components/ui/badge/badge.svelte';
 	import Checkbox from '../../../components/ui/checkbox/checkbox.svelte';
+	import Label from '../../../components/ui/label/label.svelte';
 	import { getContentLanguage } from '../../state/content-language.svelte.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import { getLocalizedLabel } from '../../utils/collectionLabel.js';
+	import { isExternalUrl } from '../../../core/fields/urlUtils.js';
+	import GlobeIcon from '@tabler/icons-svelte/icons/world';
 	import LinkIcon from '@tabler/icons-svelte/icons/link';
-	import ExternalLinkIcon from '@tabler/icons-svelte/icons/external-link';
+	import TextIcon from '@tabler/icons-svelte/icons/typography';
 	import XIcon from '@tabler/icons-svelte/icons/x';
+	import ExternalLinkIcon from '@tabler/icons-svelte/icons/external-link';
+	import ChevronDown from '@tabler/icons-svelte/icons/chevron-down';
+	import ChevronRight from '@tabler/icons-svelte/icons/chevron-right';
 
 	const remotes = getRemotes();
 	const contentLanguage = getContentLanguage();
 	const interfaceLanguage = useInterfaceLanguage();
 
 	const labels = {
-		linkText: { en: 'Link text', pl: 'Tekst linku' },
-		noTitle: { en: 'No title', pl: 'Bez tytułu' }
+		linkText: { en: 'Displayed link text', pl: 'Tekst wyświetlany jako link' },
+		noTitle: { en: 'No title', pl: 'Bez tytułu' },
+		placeholder: { en: 'Paste URL or search pages...', pl: 'Wklej adres lub szukaj stron...' },
+		openNewTab: { en: 'Open in new tab', pl: 'Otwórz w nowej karcie' },
+		autoExternal: { en: '(auto for external links)', pl: '(automatycznie dla linków zewnętrznych)' },
+		indexing: { en: 'Indexing', pl: 'Indeksowanie' },
+		nofollowLabel: { en: 'nofollow', pl: 'nofollow' },
+		nofollowDesc: { en: "Don't pass SEO authority. Check for untrusted links.", pl: 'Nie przekazuj autorytetu SEO. Zaznacz dla linków, którym nie chcesz ufać.' },
+		sponsoredLabel: { en: 'sponsored', pl: 'sponsored' },
+		sponsoredDesc: { en: 'Sponsored or advertising link.', pl: 'Link reklamowy lub sponsorowany.' },
+		ugcLabel: { en: 'ugc', pl: 'ugc' },
+		ugcDesc: { en: 'User-generated content link (e.g. comment).', pl: 'Link dodany przez użytkownika (np. w komentarzu).' },
+		external: { en: 'External', pl: 'Zewnętrzny' },
+		internal: { en: 'Internal', pl: 'Wewnętrzny' }
 	};
 
 	type EntryWithSeo = Entry & {
@@ -40,30 +48,37 @@
 
 	type Props = {
 		field: UrlField;
-		form: SuperForm<T>;
-		path: FormPathLeaves<T, UrlFieldData>;
+		value: UrlFieldData;
 	};
 
-	let { field, form, path, ...props }: Props = $props();
+	let { field, value = $bindable(), ...props }: Props = $props();
 
-	const { value } = formFieldProxy(form, path) satisfies FormFieldProxy<UrlFieldData>;
+	let isLinked = $derived(value.id != null && value.id.length > 0);
 
-	let isLinked = $derived($value.id != null && $value.id.length > 0);
+	// Current URL for the active language
+	let currentUrl = $derived(value.url[contentLanguage.current] ?? '');
+	let currentIsExternal = $derived(currentUrl ? isExternalUrl(currentUrl) : false);
 
+	// Autocomplete state
+	let autocompleteSuggestions = $state<EntryWithSeo[]>([]);
+	let popoverOpen = $state(false);
+	let activeIndex = $state(-1);
+	let searchTimeout: ReturnType<typeof setTimeout> | null = null;
+	let linkedEntry = $state<(Entry & { data: { seo?: SeoFieldData } }) | null>(null);
+
+	// Rel collapsible
+	let relOpen = $state(false);
+	let relNofollow = $derived((value.rel ?? '').includes('nofollow'));
+	let relSponsored = $derived((value.rel ?? '').includes('sponsored'));
+	let relUgc = $derived((value.rel ?? '').includes('ugc'));
+
+	// Fetch linked entry when linked
 	$effect(() => {
 		if (isLinked) {
-			fetchLinkedEntry($value.id).then((entry) => {
+			fetchLinkedEntry(value.id).then((entry) => {
 				linkedEntry = entry;
 			});
 		}
-
-		if (!isLinked && $value.url && Object.values($value.url).some((url) => url.length > 2)) {
-			fetchSuggestions($value.url).then((suggestions) => {
-				autocompleteSuggestions = suggestions;
-			});
-		} else if (!isLinked) {
-			autocompleteSuggestions = [];
-		}
 	});
 
 	async function fetchLinkedEntry(id: string | undefined) {
@@ -71,135 +86,286 @@
 		return remotes.getEntry({ id });
 	}
 
-	let linkedEntry = $state<(Entry & { data: { seo?: SeoFieldData } }) | null>(null);
-
-	async function fetchSuggestions(currUrl: Record<string, string>) {
-		let suggestions: EntryWithSeo[] = [];
-
-		for (let i = 0; i < Object.values(currUrl).length; i++) {
-			let url = Object.values(currUrl)[i];
-
-			if (url.length > 2) {
-				const [slugResults, titleResults] = await Promise.all([
-					remotes.getEntries({ dataLike: { seo: { slug: url } } }),
-					remotes.getEntries({ dataLike: { seo: { title: url } } })
-				]) as [EntryWithSeo[], EntryWithSeo[]];
-
-				suggestions = [...suggestions, ...slugResults, ...titleResults];
-				suggestions = suggestions.filter(
-					(entry, index, self) => index === self.findIndex((e) => e.id === entry.id)
-				);
-				suggestions = suggestions.slice(0, 5);
-			}
+	function searchEntries() {
+		if (searchTimeout) clearTimeout(searchTimeout);
+		const url = value.url[contentLanguage.current] ?? '';
+		if (isLinked || url.length < 3) {
+			autocompleteSuggestions = [];
+			popoverOpen = false;
+			return;
 		}
-
-		return suggestions;
+		searchTimeout = setTimeout(async () => {
+			const [slugResults, titleResults] = await Promise.all([
+				remotes.getEntries({ dataLike: { seo: { slug: url } } }),
+				remotes.getEntries({ dataLike: { seo: { title: url } } })
+			]) as [EntryWithSeo[], EntryWithSeo[]];
+			const combined = [...slugResults, ...titleResults];
+			const deduped = combined.filter(
+				(entry, index, self) => index === self.findIndex((e) => e.id === entry.id)
+			);
+			autocompleteSuggestions = deduped.slice(0, 5);
+			popoverOpen = autocompleteSuggestions.length > 0;
+			activeIndex = -1;
+		}, 300);
 	}
 
-	let autocompleteSuggestions = $state<EntryWithSeo[]>([]);
+	function linkEntry(entry: EntryWithSeo) {
+		value.id = entry.id;
+		linkedEntry = entry;
+		autocompleteSuggestions = [];
+		popoverOpen = false;
+	}
 
 	function unlinkEntry() {
-		$value.id = '';
+		value.id = '';
 		linkedEntry = null;
 	}
 
-	function linkEntry(id: string) {
-		$value.id = id;
-		autocompleteSuggestions = [];
+	function handleUrlKeydown(e: KeyboardEvent) {
+		if (!popoverOpen || autocompleteSuggestions.length === 0) return;
+
+		switch (e.key) {
+			case 'ArrowDown':
+				e.preventDefault();
+				activeIndex = (activeIndex + 1) % autocompleteSuggestions.length;
+				break;
+			case 'ArrowUp':
+				e.preventDefault();
+				activeIndex = activeIndex <= 0 ? autocompleteSuggestions.length - 1 : activeIndex - 1;
+				break;
+			case 'Enter':
+				e.preventDefault();
+				if (activeIndex >= 0 && activeIndex < autocompleteSuggestions.length) {
+					linkEntry(autocompleteSuggestions[activeIndex]);
+				}
+				break;
+			case 'Escape':
+				e.preventDefault();
+				popoverOpen = false;
+				activeIndex = -1;
+				break;
+		}
+	}
+
+	function updateRel(token: string, add: boolean) {
+		const current = (value.rel ?? '').split(/\s+/).filter(Boolean);
+		if (add && !current.includes(token)) {
+			current.push(token);
+		} else if (!add) {
+			const idx = current.indexOf(token);
+			if (idx >= 0) current.splice(idx, 1);
+		}
+		value.rel = current.join(' ');
 	}
 </script>
 
-<div class="border-border bg-card overflow-hidden rounded-lg border">
-	<!-- URL row -->
-	<div class="relative">
-		{#if isLinked && linkedEntry}
-			<!-- Linked state -->
-			<div class="flex items-center gap-2 px-3 py-2">
-				<LinkIcon class="text-muted-foreground size-4 shrink-0" />
-				<div class="flex min-w-0 flex-1 items-center gap-2">
-					<span class="truncate text-sm font-medium">
+<!-- URL input -->
+<div class="relative">
+	{#if isLinked && linkedEntry}
+		<!-- Linked state: Badge chip -->
+		<InputGroup.Root>
+			<InputGroup.Addon align="inline-start">
+				<LinkIcon class="size-4" />
+			</InputGroup.Addon>
+			<div class="flex min-w-0 flex-1 items-center gap-2 py-1.5">
+				<Badge variant="secondary" class="max-w-full gap-1.5 truncate">
+					<span class="truncate font-medium">
 						{linkedEntry.data.seo?.title || linkedEntry.id}
 					</span>
-					<span class="text-muted-foreground truncate text-xs">
-						{linkedEntry.data.seo?.slug || ''}
-					</span>
-				</div>
+					{#if linkedEntry.data.seo?.slug}
+						<span class="text-muted-foreground truncate text-[10px] font-normal">
+							{linkedEntry.data.seo.slug}
+						</span>
+					{/if}
+				</Badge>
+			</div>
+			<InputGroup.Addon align="inline-end">
 				<button
 					type="button"
-					class="text-muted-foreground hover:text-foreground hover:bg-muted -mr-1 rounded-md p-1 transition-colors"
+					class="text-muted-foreground hover:text-foreground hover:bg-muted rounded-md p-0.5 transition-colors"
 					onclick={unlinkEntry}
+					aria-label={getLocalizedLabel({ en: 'Remove link', pl: 'Usuń powiązanie' }, interfaceLanguage.current)}
 				>
 					<XIcon class="size-3.5" />
 				</button>
+			</InputGroup.Addon>
+		</InputGroup.Root>
+	{:else}
+		{#each contentLanguage.all as lang}
+			<div class={contentLanguage.current === lang ? '' : 'hidden'}>
+				<InputGroup.Root>
+					<InputGroup.Addon align="inline-start">
+						<GlobeIcon class="size-4" />
+					</InputGroup.Addon>
+					<InputGroup.Input
+						bind:value={value.url[lang]}
+						type="text"
+						placeholder={field.placeholder?.[lang] || getLocalizedLabel(labels.placeholder, interfaceLanguage.current)}
+						oninput={searchEntries}
+						onkeydown={handleUrlKeydown}
+						role="combobox"
+						aria-expanded={popoverOpen}
+						aria-controls="url-suggestions"
+						aria-autocomplete="list"
+						aria-activedescendant={activeIndex >= 0 ? `url-suggestion-${activeIndex}` : undefined}
+					/>
+					{#if currentUrl && contentLanguage.current === lang}
+						<InputGroup.Addon align="inline-end">
+							{#if currentIsExternal}
+								<Badge variant="outline" class="text-[10px]">
+									<ExternalLinkIcon class="size-3" />
+									{getLocalizedLabel(labels.external, interfaceLanguage.current)}
+								</Badge>
+							{:else if currentUrl.length > 0}
+								<Badge variant="secondary" class="text-[10px]">
+									<LinkIcon class="size-3" />
+									{getLocalizedLabel(labels.internal, interfaceLanguage.current)}
+								</Badge>
+							{/if}
+						</InputGroup.Addon>
+					{/if}
+				</InputGroup.Root>
 			</div>
-		{:else}
-			<!-- URL input -->
+		{/each}
+	{/if}
+
+	<!-- Floating autocomplete dropdown -->
+	{#if popoverOpen && autocompleteSuggestions.length > 0}
+		<div
+			id="url-suggestions"
+			role="listbox"
+			class="bg-popover text-popover-foreground absolute top-full right-0 left-0 z-50 overflow-hidden rounded-md border shadow-md"
+		>
+			{#each autocompleteSuggestions as suggestion, i}
+				<button
+					type="button"
+					id="url-suggestion-{i}"
+					role="option"
+					aria-selected={i === activeIndex}
+					class="hover:bg-muted flex w-full items-center gap-2 px-3 py-2 text-left transition-colors {i === activeIndex ? 'bg-muted' : ''} {i < autocompleteSuggestions.length - 1 ? 'border-border/50 border-b' : ''}"
+					onclick={() => linkEntry(suggestion)}
+				>
+					<LinkIcon class="text-muted-foreground size-3.5 shrink-0" />
+					<span class="truncate text-sm">
+						{suggestion.data.seo?.title || getLocalizedLabel(labels.noTitle, interfaceLanguage.current)}
+					</span>
+					<span class="text-muted-foreground ml-auto shrink-0 text-xs">
+						{suggestion.data.seo?.slug || ''}
+					</span>
+				</button>
+			{/each}
+		</div>
+	{/if}
+</div>
+
+<!-- Options (text, newTab, rel) -->
+{#if (field.text || field.newTab || field.rel) && (field.text && value.text || field.newTab || field.rel)}
+	<div class="mt-2 space-y-2">
+		<!-- Link text -->
+		{#if field.text && value.text}
 			{#each contentLanguage.all as lang}
 				<div class={contentLanguage.current === lang ? '' : 'hidden'}>
-					<Input
-						bind:value={$value.url[lang]}
-						type="text"
-						placeholder={field.placeholder?.[lang] || 'https://...'}
-						class="rounded-none border-0 shadow-none focus-visible:ring-0 dark:bg-transparent"
-					/>
+					<InputGroup.Root>
+						<InputGroup.Addon align="inline-start">
+							<TextIcon class="size-4" />
+						</InputGroup.Addon>
+						<InputGroup.Input
+							bind:value={value.text[lang]}
+							type="text"
+							placeholder={getLocalizedLabel(labels.linkText, interfaceLanguage.current)}
+						/>
+					</InputGroup.Root>
 				</div>
 			{/each}
 		{/if}
 
-		<!-- Autocomplete dropdown -->
-		{#if autocompleteSuggestions.length > 0}
-			<div class="border-border border-t">
-				{#each autocompleteSuggestions as suggestion, i}
+		<!-- New tab + rel row -->
+		{#if field.newTab || field.rel}
+			<div class="flex flex-wrap items-center gap-x-4 gap-y-2 px-1">
+				{#if field.newTab}
+					<label class="flex cursor-pointer items-center gap-2">
+						<Checkbox
+							checked={value.newTab ?? false}
+							onCheckedChange={(v) => (value.newTab = v === true)}
+						/>
+						<span class="text-sm">
+							{getLocalizedLabel(labels.openNewTab, interfaceLanguage.current)}
+						</span>
+						{#if currentIsExternal}
+							<span class="text-muted-foreground text-xs">
+								{getLocalizedLabel(labels.autoExternal, interfaceLanguage.current)}
+							</span>
+						{/if}
+					</label>
+				{/if}
+
+				{#if field.rel}
 					<button
 						type="button"
-						class="hover:bg-muted flex w-full items-center gap-2 px-3 py-2 text-left transition-colors {i < autocompleteSuggestions.length - 1 ? 'border-border/50 border-b' : ''}"
-						onclick={() => linkEntry(suggestion.id)}
+						class="text-muted-foreground hover:text-foreground flex items-center gap-1 text-sm transition-colors"
+						onclick={() => (relOpen = !relOpen)}
+						aria-expanded={relOpen}
 					>
-						<LinkIcon class="text-muted-foreground size-3.5 shrink-0" />
-						<span class="truncate text-sm">
-							{suggestion.data.seo?.title || getLocalizedLabel(labels.noTitle, interfaceLanguage.current)}
-						</span>
-						<span class="text-muted-foreground ml-auto shrink-0 text-xs">
-							{suggestion.data.seo?.slug || ''}
-						</span>
+						{#if relOpen}
+							<ChevronDown class="size-3.5" />
+						{:else}
+							<ChevronRight class="size-3.5" />
+						{/if}
+						{getLocalizedLabel(labels.indexing, interfaceLanguage.current)}
 					</button>
-				{/each}
+				{/if}
 			</div>
 		{/if}
-	</div>
 
-	<!-- Divider + extra fields -->
-	{#if field.text || field.newTab}
-		<div class="border-border flex items-stretch border-t">
-			{#if field.text && $value.text}
-				<div class="flex-1">
-					{#each contentLanguage.all as lang}
-						<div class={contentLanguage.current === lang ? '' : 'hidden'}>
-							<Input
-								bind:value={$value.text[lang]}
-								type="text"
-								placeholder={getLocalizedLabel(labels.linkText, interfaceLanguage.current)}
-								class="rounded-none border-0 shadow-none focus-visible:ring-0 dark:bg-transparent"
-							/>
-						</div>
-					{/each}
+		<!-- Rel details (collapsible) -->
+		{#if field.rel && relOpen}
+			<div class="border-border space-y-3 rounded-lg border px-3 py-3">
+				<div>
+					<div class="flex items-center gap-2">
+						<Checkbox
+							id="url-rel-nofollow"
+							checked={relNofollow}
+							onCheckedChange={(v) => updateRel('nofollow', v === true)}
+						/>
+						<Label for="url-rel-nofollow" class="cursor-pointer font-normal">
+							{getLocalizedLabel(labels.nofollowLabel, interfaceLanguage.current)}
+						</Label>
+					</div>
+					<p class="text-muted-foreground mt-1 ml-6 text-xs">
+						{getLocalizedLabel(labels.nofollowDesc, interfaceLanguage.current)}
+					</p>
 				</div>
-			{/if}
-
-			{#if field.newTab}
-				<label
-					class="border-border text-muted-foreground hover:text-foreground flex cursor-pointer items-center gap-1.5 px-3 transition-colors {field.text ? 'border-l' : 'flex-1'}"
-				>
-					<Checkbox
-						bind:checked={
-							() => $value.newTab ?? false,
-							(v) => ($value.newTab = v)
-						}
-						class="data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600 data-[state=checked]:text-white dark:data-[state=checked]:border-blue-700 dark:data-[state=checked]:bg-blue-700"
-					/>
-					<ExternalLinkIcon class="size-3.5" />
-				</label>
-			{/if}
-		</div>
-	{/if}
-</div>
+				<div>
+					<div class="flex items-center gap-2">
+						<Checkbox
+							id="url-rel-sponsored"
+							checked={relSponsored}
+							onCheckedChange={(v) => updateRel('sponsored', v === true)}
+						/>
+						<Label for="url-rel-sponsored" class="cursor-pointer font-normal">
+							{getLocalizedLabel(labels.sponsoredLabel, interfaceLanguage.current)}
+						</Label>
+					</div>
+					<p class="text-muted-foreground mt-1 ml-6 text-xs">
+						{getLocalizedLabel(labels.sponsoredDesc, interfaceLanguage.current)}
+					</p>
+				</div>
+				<div>
+					<div class="flex items-center gap-2">
+						<Checkbox
+							id="url-rel-ugc"
+							checked={relUgc}
+							onCheckedChange={(v) => updateRel('ugc', v === true)}
+						/>
+						<Label for="url-rel-ugc" class="cursor-pointer font-normal">
+							{getLocalizedLabel(labels.ugcLabel, interfaceLanguage.current)}
+						</Label>
+					</div>
+					<p class="text-muted-foreground mt-1 ml-6 text-xs">
+						{getLocalizedLabel(labels.ugcDesc, interfaceLanguage.current)}
+					</p>
+				</div>
+			</div>
+		{/if}
+	</div>
+{/if}

package/dist/admin/components/fields/url-field.svelte.d.ts

@@ -1,30 +1,8 @@
 import type { UrlField, UrlFieldData } from '../../../types/fields.js';
-import { type FormPathLeaves, type SuperForm } from 'sveltekit-superforms';
-declare function $$render<T extends Record<string, unknown>>(): {
-    props: {
-        field: UrlField;
-        form: SuperForm<T>;
-        path: FormPathLeaves<T, UrlFieldData>;
-    };
-    exports: {};
-    bindings: "";
-    slots: {};
-    events: {};
+type Props = {
+    field: UrlField;
+    value: UrlFieldData;
 };
-declare class __sveltets_Render<T extends Record<string, unknown>> {
-    props(): ReturnType<typeof $$render<T>>['props'];
-    events(): ReturnType<typeof $$render<T>>['events'];
-    slots(): ReturnType<typeof $$render<T>>['slots'];
-    bindings(): "";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <T extends Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
-    } & ReturnType<__sveltets_Render<T>['exports']>;
-    <T extends Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const UrlField: $$IsomorphicComponent;
-type UrlField<T extends Record<string, unknown>> = InstanceType<typeof UrlField<T>>;
+declare const UrlField: import("svelte").Component<Props, {}, "value">;
+type UrlField = ReturnType<typeof UrlField>;
 export default UrlField;

package/dist/admin/components/layout/layout-renderer.svelte

@@ -4,6 +4,7 @@
 	import type { SuperForm } from 'sveltekit-superforms';
 	import { isLayoutLeaf, isLayoutBranch } from '../../../types/layout.js';
 	import FieldRenderer from '../fields/field-renderer.svelte';
+	import { evaluateCondition } from '../../utils/fieldCondition.js';
 	import * as Accordion from '../../../components/ui/accordion/index.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import { getLocalizedLabel } from '../../utils/collectionLabel.js';
@@ -28,6 +29,7 @@
 	}: Props = $props();
 
 	const interfaceLanguage = useInterfaceLanguage();
+	const { form: formData } = form;
 
 	const fieldMap = $derived(new Map(fields.map((f) => [f.slug, f])));
 
@@ -60,7 +62,7 @@
 				<div class="layout-fields-stack">
 					{#each node.fields as slug (slug)}
 						{@const field = fieldMap.get(slug)}
-						{#if field}
+						{#if field && evaluateCondition(field.showWhen, (s) => $formData[s])}
 							<div
 								data-field-path={slug}
 								class={cn(
@@ -117,7 +119,7 @@
 					<div class="layout-auto-grid">
 						{#each node.fields as slug (slug)}
 							{@const field = fieldMap.get(slug)}
-							{#if field}
+							{#if field && evaluateCondition(field.showWhen, (s) => $formData[s])}
 								<div
 									data-field-path={slug}
 									class={cn(
@@ -135,7 +137,7 @@
 					<div class="layout-fields-stack">
 						{#each node.fields as slug (slug)}
 							{@const field = fieldMap.get(slug)}
-							{#if field}
+							{#if field && evaluateCondition(field.showWhen, (s) => $formData[s])}
 								<div
 									data-field-path={slug}
 									class={cn(
@@ -174,7 +176,7 @@
 							<div class="layout-fields-stack">
 								{#each node.fields as slug (slug)}
 									{@const field = fieldMap.get(slug)}
-									{#if field}
+									{#if field && evaluateCondition(field.showWhen, (s) => $formData[s])}
 										<div
 											data-field-path={slug}
 											class={cn(
@@ -208,7 +210,7 @@
 			{#if isLayoutLeaf(node)}
 				{#each node.fields as slug (slug)}
 					{@const field = fieldMap.get(slug)}
-					{#if field}
+					{#if field && evaluateCondition(field.showWhen, (s) => $formData[s])}
 						<div
 							data-field-path={slug}
 							class={cn(
@@ -334,7 +336,7 @@
 	}
 
 	/* ═══════════ RESPONSIVE ═══════════ */
-	@media (max-width: 768px) {
+	@container (max-width: 768px) {
 		.layout-columns {
 			grid-template-columns: 1fr !important;
 		}