includio-cms 0.6.0 → 0.6.1

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to includio-cms are documented here.
 Generated from `src/lib/updates/` — do not edit manually.
 
+## 0.6.0 — 2026-03-10
+
+Entity module, collection filters, layout dot-notation, peerDeps migration
+
+### Added
+- Entity module — programmatic CRUD API for entries (`getEntity`)
+- CLI `install-peers` command for automatic peer dependency installation
+- Collection data filters — filter entries by select/radio field values in toolbar
+- Layout dot-notation — distribute object fields across layout nodes
+
+### Fixed
+- AI Claude: lazy client init, no crash without API key
+- Codegen: quote hyphenated slugs, PascalCase form schemas, improved query types
+- TipTap: inline block content field lang fix + placeholder UX
+- Zod schema: skip lang wrapper for non-localized content field
+
+### Breaking
+- Runtime dependencies moved to peerDependencies — run `pnpm includio install-peers` after upgrade
+
 ## 0.5.8 — 2026-03-09
 
 Media GC: deduplicate image styles, auto-cleanup, admin maintenance page

package/ROADMAP.md

@@ -122,11 +122,24 @@
 - [x] `[fix]` `[P1]` resolveUrlFields: normalize flat string url/text, use raw DB calls <!-- files: src/lib/core/server/entries/ -->
 - [x] `[chore]` `[P1]` Migrate #await to reactive query pattern across admin UI
 
-## 0.6.0 — Plugin system _(deferred from 0.2.0)_
+## 0.5.8 — Media GC
 
-- [ ] `[feature]` `[P0]` Wire plugin hooks into CRUD operations (before/afterCreate, Update, Delete) <!-- files: src/lib/types/plugins.ts, src/lib/core/server/entries/operations/ -->
-- [ ] `[feature]` `[P0]` Plugin registration API — public surface for external plugins
-- [ ] `[chore]` `[P1]` Plugin system documentation
+- [x] `[feature]` `[P1]` Image style upsert: replace duplicates instead of creating new files
+- [x] `[feature]` `[P1]` Auto-cleanup old style files from disk on regeneration
+- [x] `[feature]` `[P1]` Admin maintenance page: purge styles, reconcile orphaned disk files
+- [x] `[fix]` `[P1]` Deduplicate existing image style records (keep newest per unique key)
+
+## 0.6.0 — Entity module & DX
+
+- [x] `[feature]` `[P0]` Entity module — programmatic CRUD API for entries (`getEntity`) <!-- files: src/lib/entity/ -->
+- [x] `[feature]` `[P1]` CLI `install-peers` command <!-- files: src/lib/cli/ -->
+- [x] `[feature]` `[P1]` Collection data filters — filter by select/radio fields in toolbar <!-- files: src/lib/admin/client/collection/ -->
+- [x] `[feature]` `[P1]` Layout dot-notation — distribute object fields across layout nodes <!-- files: src/lib/admin/components/fields/ -->
+- [x] `[fix]` `[P1]` AI Claude: lazy client init, no crash without API key <!-- files: src/lib/ai-claude/ -->
+- [x] `[fix]` `[P1]` Codegen: quote hyphenated slugs, PascalCase form schemas, improved query types <!-- files: src/lib/core/server/generator/ -->
+- [x] `[fix]` `[P1]` TipTap: inline block content field lang fix + placeholder UX
+- [x] `[fix]` `[P1]` Zod schema: skip lang wrapper for non-localized content field
+- [x] `[breaking]` `[P0]` Runtime deps → peerDependencies (run `pnpm includio install-peers`)
 
 ## 0.6.1 — Admin experience
 
@@ -164,3 +177,6 @@
 - [ ] `[feature]` `[P1]` Impersonation UI — impersonate/stop bar <!-- files: src/lib/admin/client/users/impersonation-bar.svelte -->
 - [ ] `[chore]` `[P2]` Caching/performance layer (scope TBD)
 - [ ] `[feature]` `[P2]` API/CLI for configuration (setup DX for less technical users)
+- [ ] `[feature]` `[P0]` Plugin hooks in CRUD ops (before/afterCreate, Update, Delete) <!-- files: src/lib/types/plugins.ts, src/lib/core/server/entries/operations/ -->
+- [ ] `[feature]` `[P0]` Plugin registration API — public surface for external plugins
+- [ ] `[chore]` `[P1]` Plugin system documentation

package/dist/admin/client/collection/collection-entries.svelte

@@ -28,7 +28,7 @@
 	import EmptyState from './empty-state.svelte';
 	import { createCollectionViewState } from './collection-view.svelte.js';
 	import type { EntryStatus as EntryStatusType, RawEntry } from '../../../types/entries.js';
-	import type { RelationField } from '../../../types/fields.js';
+	import type { RelationField, SelectField, RadioField } from '../../../types/fields.js';
 	import {
 		validateA11y,
 		a11yLangPl,
@@ -144,6 +144,31 @@
 	);
 
 
+	// Data filter configs from select/radio fields in listColumns
+	const dataFilterConfigs = $derived(
+		(collection.listColumns ?? [])
+			.map((slug) => {
+				const field = collection.fields.find((f) => f.slug === slug);
+				if (field?.type === 'select' || field?.type === 'radio') {
+					const f = field as SelectField | RadioField;
+					return {
+						slug: f.slug,
+						label: getLocalizedLabel(f.label, interfaceLanguage.current),
+						options: f.options.map((o) => ({
+							label: getLocalizedLabel(o.label, interfaceLanguage.current),
+							value: o.value
+						}))
+					};
+				}
+				return null;
+			})
+			.filter((f): f is NonNullable<typeof f> => f !== null)
+	);
+
+	let activeDataFilters = $state<Record<string, string | null>>({});
+
+	const hasActiveDataFilter = $derived(Object.values(activeDataFilters).some((v) => v !== null));
+
 	// Find seo field for slug extraction
 	const seoField = $derived(collection.fields.find((f) => f.type === 'seo'));
 
@@ -588,6 +613,17 @@
 		if (!isArchivedFilter) {
 			rows = filterByStatus(rows);
 		}
+		// Client-side data filter (select/radio fields)
+		if (hasActiveDataFilter) {
+			rows = rows.filter((row) => {
+				for (const [slug, value] of Object.entries(activeDataFilters)) {
+					if (value === null) continue;
+					const rowValue = row.customData[slug];
+					if (String(rowValue ?? '') !== value) return false;
+				}
+				return true;
+			});
+		}
 		// Client-side search
 		if (searchQuery) {
 			rows = rows.filter((item) => item.searchText.includes(searchQuery.toLowerCase()));
@@ -623,6 +659,12 @@
 		onViewModeChange={(m) => (viewState.viewMode = m)}
 		{onCreateEntry}
 		createLabel={addLabel}
+		dataFilters={dataFilterConfigs}
+		{activeDataFilters}
+		onDataFilterChange={(slug, value) => {
+			activeDataFilters = { ...activeDataFilters, [slug]: value };
+			viewState.pageIndex = 0;
+		}}
 	/>
 
 	{#if totalItems === 0 && !searchQuery}

package/dist/admin/client/collection/table-toolbar.svelte

@@ -11,6 +11,12 @@
 	import type { InterfaceLanguage } from '../../../types/languages.js';
 	import type { ViewMode, StatusFilter } from './collection-view.svelte.js';
 
+	interface DataFilterConfig {
+		slug: string;
+		label: string;
+		options: { label: string; value: string }[];
+	}
+
 	type Props = {
 		searchQuery: string;
 		onSearchChange: (query: string) => void;
@@ -21,6 +27,9 @@
 		onCreateEntry: () => void;
 		createLabel: string;
 		searchPlaceholder?: string;
+		dataFilters?: DataFilterConfig[];
+		activeDataFilters?: Record<string, string | null>;
+		onDataFilterChange?: (slug: string, value: string | null) => void;
 	};
 
 	let {
@@ -32,7 +41,10 @@
 		onViewModeChange,
 		onCreateEntry,
 		createLabel,
-		searchPlaceholder
+		searchPlaceholder,
+		dataFilters = [],
+		activeDataFilters = {},
+		onDataFilterChange
 	}: Props = $props();
 
 	const interfaceLanguage = useInterfaceLanguage();
@@ -92,6 +104,7 @@
 	const hasActiveFilter = $derived(statusFilter !== null);
 
 	let statusPopoverOpen = $state(false);
+	let dataFilterPopovers = $state<Record<string, boolean>>({});
 </script>
 
 <div class="mb-6 flex flex-wrap items-center gap-2.5">
@@ -142,6 +155,56 @@
 		</Popover.Content>
 	</Popover.Root>
 
+	{#each dataFilters as filter}
+		{@const activeValue = activeDataFilters[filter.slug] ?? null}
+		{@const hasActive = activeValue !== null}
+		{@const activeLabel = filter.options.find((o) => o.value === activeValue)?.label ?? ''}
+		<Popover.Root open={dataFilterPopovers[filter.slug] ?? false} onOpenChange={(v) => dataFilterPopovers[filter.slug] = v}>
+			<Popover.Trigger>
+				{#snippet child({ props })}
+					<Button
+						{...props}
+						variant="outline"
+						size="sm"
+						class="gap-1.5 {hasActive
+							? 'border-primary/30 bg-lavender-lighter text-primary'
+							: ''}"
+					>
+						<Filter class="size-3.5" />
+						{filter.label}{hasActive ? `: ${activeLabel}` : ''}
+					</Button>
+				{/snippet}
+			</Popover.Trigger>
+			<Popover.Content class="w-44 p-1" align="start">
+				<button
+					class="hover:bg-accent flex w-full items-center rounded-md px-2.5 py-1.5 text-sm transition-colors {!hasActive
+						? 'bg-accent text-accent-foreground font-medium'
+						: 'text-foreground'}"
+					onclick={() => {
+						onDataFilterChange?.(filter.slug, null);
+						dataFilterPopovers[filter.slug] = false;
+					}}
+				>
+					{t.all}
+				</button>
+				{#each filter.options as option}
+					<button
+						class="hover:bg-accent flex w-full items-center rounded-md px-2.5 py-1.5 text-sm transition-colors {activeValue ===
+						option.value
+							? 'bg-accent text-accent-foreground font-medium'
+							: 'text-foreground'}"
+						onclick={() => {
+							onDataFilterChange?.(filter.slug, option.value);
+							dataFilterPopovers[filter.slug] = false;
+						}}
+					>
+						{option.label}
+					</button>
+				{/each}
+			</Popover.Content>
+		</Popover.Root>
+	{/each}
+
 	<div class="flex items-center gap-0.5 rounded-lg border p-0.5">
 		<Button
 			variant={viewMode === 'list' ? 'secondary' : 'ghost'}

package/dist/admin/client/collection/table-toolbar.svelte.d.ts

@@ -1,4 +1,12 @@
 import type { ViewMode, StatusFilter } from './collection-view.svelte.js';
+interface DataFilterConfig {
+    slug: string;
+    label: string;
+    options: {
+        label: string;
+        value: string;
+    }[];
+}
 type Props = {
     searchQuery: string;
     onSearchChange: (query: string) => void;
@@ -9,6 +17,9 @@ type Props = {
     onCreateEntry: () => void;
     createLabel: string;
     searchPlaceholder?: string;
+    dataFilters?: DataFilterConfig[];
+    activeDataFilters?: Record<string, string | null>;
+    onDataFilterChange?: (slug: string, value: string | null) => void;
 };
 declare const TableToolbar: import("svelte").Component<Props, {}, "">;
 type TableToolbar = ReturnType<typeof TableToolbar>;

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

@@ -25,9 +25,10 @@
 		focusedPath?: string | null;
 		flashingPath?: string | null;
 		depth?: number;
+		distributed?: boolean;
 	};
 
-	let { field, form, path, objectFieldType = 'default', focusedPath = null, flashingPath = null, depth = 0, ...props }: Props = $props();
+	let { field, form, path, objectFieldType = 'default', focusedPath = null, flashingPath = null, depth = 0, distributed = false, ...props }: Props = $props();
 
 	const interfaceLanguage = useInterfaceLanguage();
 
@@ -137,7 +138,7 @@
 							<ArrayField {field} bind:value={$value} />
 						{/await}
 					{:else if field.type === 'object'}
-						<LazyField loader={() => import('./object-field.svelte')} props={{ field, form, path, objectFieldType, focusedPath, flashingPath, depth }} skeletonClass="h-20" />
+						<LazyField loader={() => import('./object-field.svelte')} props={{ field, form, path, objectFieldType: distributed ? 'distributed' : objectFieldType, focusedPath, flashingPath, depth }} skeletonClass="h-20" />
 					{:else if field.type === 'slug'}
 						<LazyField loader={() => import('./slug-field.svelte')} props={{ field, form, path }} skeletonClass="h-10" />
 					{:else if field.type === 'boolean'}

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

@@ -8,6 +8,7 @@ type Props = {
     focusedPath?: string | null;
     flashingPath?: string | null;
     depth?: number;
+    distributed?: boolean;
 };
 declare const FieldRenderer: import("svelte").Component<Props, {}, "">;
 type FieldRenderer = ReturnType<typeof FieldRenderer>;

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

@@ -15,7 +15,7 @@
 	import { cn } from '../../../utils.js';
 
 	type Props = {
-		objectFieldType?: 'default' | 'inline';
+		objectFieldType?: 'default' | 'inline' | 'distributed';
 		field: ObjectField;
 		form: SuperForm<Record<string, unknown>>;
 		path: FormPathLeaves<Record<string, unknown>>;
@@ -83,11 +83,11 @@
 	</div>
 {/snippet}
 
-{#if objectFieldType === 'inline'}
+{#if objectFieldType === 'distributed'}
+	<!-- Distributed mode: layout handles field rendering, object only initializes data -->
+{:else if objectFieldType === 'inline'}
 	{@render content()}
-{/if}
-
-{#if objectFieldType === 'default'}
+{:else if objectFieldType === 'default'}
 	{#if depth >= 1}
 		<!-- Nested: lighter style without border -->
 		<div class="space-y-3 pt-1">

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

@@ -1,7 +1,7 @@
 import { type FormPathLeaves, type SuperForm } from 'sveltekit-superforms';
 import type { ObjectField } from '../../../types/fields.js';
 type Props = {
-    objectFieldType?: 'default' | 'inline';
+    objectFieldType?: 'default' | 'inline' | 'distributed';
     field: ObjectField;
     form: SuperForm<Record<string, unknown>>;
     path: FormPathLeaves<Record<string, unknown>>;

package/dist/admin/components/fields/text-field-wrapper.svelte

@@ -15,6 +15,7 @@
 	import { joinPath, setAtPath } from '../../utils/objectPath.js';
 	import { getContentLanguage } from '../../state/content-language.svelte.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import { getContext } from 'svelte';
 	import { getLocalizedLabel } from '../../utils/collectionLabel.js';
 	import RequiredLabel from './required-label.svelte';
 	import ClipboardIcon from '@tabler/icons-svelte/icons/clipboard';
@@ -23,6 +24,7 @@
 
 	const contentLanguage = getContentLanguage();
 	const interfaceLanguage = useInterfaceLanguage();
+	const inInlineBlock = getContext<boolean>('inInlineBlock') ?? false;
 
 	type Props = {
 		field: TextFieldType | RichtextFieldType | ContentFieldType;
@@ -160,7 +162,7 @@
 						{#if field.label}
 							<div class="flex items-center gap-1.5">
 								<RequiredLabel required={field.required}>{getLocalizedLabel(field.label, interfaceLanguage.current)}</RequiredLabel>
-								{#if isMultiLang && (field.required || contentLanguage.all.some(l => getLangFillStatus(l)))}
+								{#if isMultiLang && !inInlineBlock && (field.required || contentLanguage.all.some(l => getLangFillStatus(l)))}
 									<span
 										class="inline-flex items-center gap-1"
 										title={dotTooltip()}
@@ -176,7 +178,7 @@
 							</div>
 						{/if}
 
-						{#if contentLanguage.referenceMode && isMultiLang}
+						{#if contentLanguage.referenceMode && isMultiLang && !inInlineBlock}
 							{@const refSource = findSourceLang(lang)}
 							{#if refSource}
 								{@const refText = getReferenceText(refSource)}
@@ -199,7 +201,7 @@
 							<div class="h-32 animate-pulse rounded-md bg-accent"></div>
 						{/if}
 
-						{#if isMultiLang}
+						{#if isMultiLang && !inInlineBlock}
 							{@const currentVal = resolvePathValue($formData, joinPath(path, lang))}
 							{@const sourceLang = isValueEmpty(currentVal) ? findSourceLang(lang) : null}
 							{#if sourceLang}

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

@@ -9,6 +9,11 @@
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import { getLocalizedLabel } from '../../utils/collectionLabel.js';
 	import { cn } from '../../../utils.js';
+	import {
+		resolveFieldByPath,
+		buildFormPath,
+		getDistributedObjectSlugs
+	} from '../../../core/fields/layoutUtils.js';
 
 	type Props = {
 		nodes: LayoutNode[];
@@ -17,6 +22,7 @@
 		focusedPath?: string | null;
 		flashingPath?: string | null;
 		depth?: number;
+		distributedSlugs?: Set<string>;
 	};
 
 	let {
@@ -25,7 +31,8 @@
 		form,
 		focusedPath = null,
 		flashingPath = null,
-		depth = 0
+		depth = 0,
+		distributedSlugs: parentDistributedSlugs
 	}: Props = $props();
 
 	const interfaceLanguage = useInterfaceLanguage();
@@ -33,6 +40,26 @@
 
 	const fieldMap = $derived(new Map(fields.map((f) => [f.slug, f])));
 
+	// Compute distributed object slugs once at top level
+	const distributedSlugs = $derived(parentDistributedSlugs ?? getDistributedObjectSlugs(nodes, fields));
+
+	/**
+	 * Resolve a field reference (slug or dot-notation path) to its Field definition and form path.
+	 * Returns { field, formPath } or undefined if not found.
+	 */
+	function resolveFieldRef(ref: string): { field: Field; formPath: string } | undefined {
+		if (!ref.includes('.')) {
+			// Simple slug — top-level field
+			const field = fieldMap.get(ref);
+			if (!field) return undefined;
+			return { field, formPath: ref };
+		}
+		// Dot-notation — resolve through field tree
+		const field = resolveFieldByPath(fields, ref);
+		if (!field) return undefined;
+		return { field, formPath: buildFormPath(ref) };
+	}
+
 	// Compact field types for autoGrid
 	const compactFieldTypes = new Set(['number', 'select', 'boolean', 'date', 'datetime', 'radio']);
 
@@ -52,6 +79,44 @@
 	}
 </script>
 
+{#snippet fieldSlot(ref: string, autoGrid?: boolean)}
+	{@const resolved = resolveFieldRef(ref)}
+	{#if resolved}
+		{@const { field, formPath } = resolved}
+		{#if evaluateCondition(field.showWhen, (s) => $formData[s])}
+			<div
+				data-field-path={formPath}
+				class={cn(
+					'rounded-lg transition-all duration-500',
+					autoGrid && !isCompactField(field) && 'auto-grid-full',
+					isFlashing(formPath) && 'ring-2 ring-primary ring-offset-2 bg-primary/5 animate-in fade-in'
+				)}
+			>
+				<FieldRenderer
+					{field}
+					{form}
+					path={formPath}
+					{focusedPath}
+					{flashingPath}
+					distributed={field.type === 'object' && distributedSlugs.has(field.slug)}
+				/>
+			</div>
+		{/if}
+	{/if}
+{/snippet}
+
+{#snippet recurse(childNodes: LayoutNode[])}
+	<svelte:self
+		nodes={childNodes}
+		{fields}
+		{form}
+		{focusedPath}
+		{flashingPath}
+		depth={depth + 1}
+		{distributedSlugs}
+	/>
+{/snippet}
+
 {#each nodes as node (node)}
 	{#if node.type === 'section'}
 		<section aria-label={getLabel(node)} class="layout-section">
@@ -60,31 +125,13 @@
 			</div>
 			{#if isLayoutLeaf(node)}
 				<div class="layout-fields-stack">
-					{#each node.fields as slug (slug)}
-						{@const field = fieldMap.get(slug)}
-						{#if field && evaluateCondition(field.showWhen, (s) => $formData[s])}
-							<div
-								data-field-path={slug}
-								class={cn(
-									'rounded-lg transition-all duration-500',
-									isFlashing(slug) && 'ring-2 ring-primary ring-offset-2 bg-primary/5 animate-in fade-in'
-								)}
-							>
-								<FieldRenderer {field} {form} path={slug} {focusedPath} {flashingPath} />
-							</div>
-						{/if}
+					{#each node.fields as ref (ref)}
+						{@render fieldSlot(ref)}
 					{/each}
 				</div>
 			{/if}
 			{#if isLayoutBranch(node)}
-				<svelte:self
-					nodes={node.children}
-					{fields}
-					{form}
-					{focusedPath}
-					{flashingPath}
-					depth={depth + 1}
-				/>
+				{@render recurse(node.children)}
 			{/if}
 		</section>
 
@@ -96,14 +143,7 @@
 			{#if isLayoutBranch(node)}
 				{#each node.children as child (child)}
 					<div class="layout-column">
-						<svelte:self
-							nodes={[child]}
-							{fields}
-							{form}
-							{focusedPath}
-							{flashingPath}
-							depth={depth + 1}
-						/>
+						{@render recurse([child])}
 					</div>
 				{/each}
 			{/if}
@@ -117,49 +157,19 @@
 			<div class="layout-card-body">
 				{#if isLayoutLeaf(node) && node.autoGrid}
 					<div class="layout-auto-grid">
-						{#each node.fields as slug (slug)}
-							{@const field = fieldMap.get(slug)}
-							{#if field && evaluateCondition(field.showWhen, (s) => $formData[s])}
-								<div
-									data-field-path={slug}
-									class={cn(
-										'rounded-lg transition-all duration-500',
-										!isCompactField(field) && 'auto-grid-full',
-										isFlashing(slug) && 'ring-2 ring-primary ring-offset-2 bg-primary/5 animate-in fade-in'
-									)}
-								>
-									<FieldRenderer {field} {form} path={slug} {focusedPath} {flashingPath} />
-								</div>
-							{/if}
+						{#each node.fields as ref (ref)}
+							{@render fieldSlot(ref, true)}
 						{/each}
 					</div>
 				{:else if isLayoutLeaf(node)}
 					<div class="layout-fields-stack">
-						{#each node.fields as slug (slug)}
-							{@const field = fieldMap.get(slug)}
-							{#if field && evaluateCondition(field.showWhen, (s) => $formData[s])}
-								<div
-									data-field-path={slug}
-									class={cn(
-										'rounded-lg transition-all duration-500',
-										isFlashing(slug) && 'ring-2 ring-primary ring-offset-2 bg-primary/5 animate-in fade-in'
-									)}
-								>
-									<FieldRenderer {field} {form} path={slug} {focusedPath} {flashingPath} />
-								</div>
-							{/if}
+						{#each node.fields as ref (ref)}
+							{@render fieldSlot(ref)}
 						{/each}
 					</div>
 				{/if}
 				{#if isLayoutBranch(node)}
-					<svelte:self
-						nodes={node.children}
-						{fields}
-						{form}
-						{focusedPath}
-						{flashingPath}
-						depth={depth + 1}
-					/>
+					{@render recurse(node.children)}
 				{/if}
 			</div>
 		</div>
@@ -174,31 +184,13 @@
 					<Accordion.Content>
 						{#if isLayoutLeaf(node)}
 							<div class="layout-fields-stack">
-								{#each node.fields as slug (slug)}
-									{@const field = fieldMap.get(slug)}
-									{#if field && evaluateCondition(field.showWhen, (s) => $formData[s])}
-										<div
-											data-field-path={slug}
-											class={cn(
-												'rounded-lg transition-all duration-500',
-												isFlashing(slug) && 'ring-2 ring-primary ring-offset-2 bg-primary/5 animate-in fade-in'
-											)}
-										>
-											<FieldRenderer {field} {form} path={slug} {focusedPath} {flashingPath} />
-										</div>
-									{/if}
+								{#each node.fields as ref (ref)}
+									{@render fieldSlot(ref)}
 								{/each}
 							</div>
 						{/if}
 						{#if isLayoutBranch(node)}
-							<svelte:self
-								nodes={node.children}
-								{fields}
-								{form}
-								{focusedPath}
-								{flashingPath}
-								depth={depth + 1}
-							/>
+							{@render recurse(node.children)}
 						{/if}
 					</Accordion.Content>
 				</Accordion.Item>
@@ -208,30 +200,12 @@
 	{:else if node.type === 'stack'}
 		<div class="layout-stack">
 			{#if isLayoutLeaf(node)}
-				{#each node.fields as slug (slug)}
-					{@const field = fieldMap.get(slug)}
-					{#if field && evaluateCondition(field.showWhen, (s) => $formData[s])}
-						<div
-							data-field-path={slug}
-							class={cn(
-								'rounded-lg transition-all duration-500',
-								isFlashing(slug) && 'ring-2 ring-primary ring-offset-2 bg-primary/5 animate-in fade-in'
-							)}
-						>
-							<FieldRenderer {field} {form} path={slug} {focusedPath} {flashingPath} />
-						</div>
-					{/if}
+				{#each node.fields as ref (ref)}
+					{@render fieldSlot(ref)}
 				{/each}
 			{/if}
 			{#if isLayoutBranch(node)}
-				<svelte:self
-					nodes={node.children}
-					{fields}
-					{form}
-					{focusedPath}
-					{flashingPath}
-					depth={depth + 1}
-				/>
+				{@render recurse(node.children)}
 			{/if}
 		</div>
 	{/if}

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

@@ -8,6 +8,7 @@ type Props = {
     focusedPath?: string | null;
     flashingPath?: string | null;
     depth?: number;
+    distributedSlugs?: Set<string>;
 };
 declare const LayoutRenderer: import("svelte").Component<Props, {}, "">;
 type LayoutRenderer = ReturnType<typeof LayoutRenderer>;