includio-cms 0.6.0 → 0.6.2

package/CHANGELOG.md

@@ -3,6 +3,40 @@
 All notable changes to includio-cms are documented here.
 Generated from `src/lib/updates/` — do not edit manually.
 
+## 0.6.2 — 2026-03-11
+
+Admin hydration fix
+
+### Fixed
+- Admin hydration — replace boundary pending with onMount preloader, type-only remotes import
+
+## 0.6.1 — 2026-03-10
+
+Maintenance release — update definitions, changelog, roadmap
+
+### Notes
+
+No functional changes
+
+## 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/admin/admin-layout.svelte

@@ -4,16 +4,30 @@
 	import { Toaster } from '../../../components/ui/sonner/index.js';
 	import { MediaSort, setMediaSort } from '../../state/media-sort.svelte.js';
 	import AdminPreloader from './admin-preloader.svelte';
+	import { onMount } from 'svelte';
 
 	setMediaSort(new MediaSort());
 
 	let { children }: { children: Snippet } = $props();
+
+	let mounted = $state(false);
+	onMount(() => {
+		mounted = true;
+	});
 </script>
 
 <Toaster richColors />
 
-<svelte:boundary>
-	{#snippet pending()}<AdminPreloader />{/snippet}
+{#if !mounted}
+	<AdminPreloader />
+{/if}
+
+<div class:hidden={!mounted}>
+	<svelte:boundary>
+		{#snippet failed(error)}
+			<pre style="color:red;padding:2rem">{error?.message ?? error}</pre>
+		{/snippet}
 
-	{@render children()}
-</svelte:boundary>
+		{@render children()}
+	</svelte:boundary>
+</div>

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}