includio-cms 0.5.2 → 0.5.3

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.5.3 — 2026-03-04
+
+Form fields, inline blocks, hybrid preview, field components refactor
+
+### Added
+- Form fields: select type, minLength/maxLength, errorMessage, remote commands
+- Conditional field visibility (showWhen)
+- Hybrid preview: device frames, container queries
+- TipTap placeholder extension + Notion-style styles
+- Server-side field resolution for inline blocks
+- Inline blocks: standalone form, full field rendering, collapse UI
+- URL field: rel attribute, external auto-detect, UI redesign
+- Switch UI component (bits-ui)
+- Boolean field: Switch toggle zamiast checkbox
+- Storybook stories for all field types
+
+### Fixed
+- Hybrid preview layout fix
+
 ## 0.5.2 — 2026-02-25
 
 Update system: split migration into sql + notes

package/ROADMAP.md

@@ -76,6 +76,19 @@
 
 - [x] `[fix]` `[P1]` Split `migration` field into `sql` + `notes` — fixes CLI crash on text descriptions
 
+## 0.5.3 — Form fields, inline blocks, hybrid preview
+
+- [x] `[feature]` `[P1]` Form fields: select type, minLength/maxLength, errorMessage, remote commands
+- [x] `[feature]` `[P1]` Conditional field visibility (showWhen)
+- [x] `[feature]` `[P1]` Hybrid preview: device frames, container queries
+- [x] `[feature]` `[P2]` TipTap placeholder extension + Notion-style styles
+- [x] `[feature]` `[P1]` Server-side field resolution for inline blocks
+- [x] `[feature]` `[P1]` Inline blocks: standalone form, field rendering, collapse UI
+- [x] `[feature]` `[P2]` URL field: rel attribute, external auto-detect, UI redesign
+- [x] `[feature]` `[P2]` Switch UI component + boolean field toggle
+- [x] `[chore]` `[P2]` Storybook stories for all field types
+- [x] `[chore]` `[P1]` Field components refactor: bindable value props
+
 ## 0.6.0 — Plugin system _(deferred from 0.2.0)_
 
 - [ ] `[feature]` `[P0]` Wire plugin hooks into CRUD operations (before/afterCreate, Update, Delete) <!-- files: src/lib/types/plugins.ts, src/lib/core/server/entries/operations/ -->

package/dist/admin/client/entry/entry-form.svelte

@@ -112,6 +112,7 @@
 
 <style>
 	.layout-entry-form {
+		container-type: inline-size;
 		max-width: 1100px;
 		margin: 0 auto;
 		padding: 24px;

package/dist/admin/client/entry/entry.svelte

@@ -13,6 +13,7 @@
 	import ArchiveIcon from '@tabler/icons-svelte/icons/archive';
 	import XIcon from '@tabler/icons-svelte/icons/x';
 	import Button from '../../../components/ui/button/button.svelte';
+	import { cn } from '../../../utils.js';
 	import { ElementSize, useDebounce } from 'runed';
 	import { defaults, superForm, type SuperForm } from 'sveltekit-superforms';
 	import { zod4, zod4Client } from 'sveltekit-superforms/adapters';
@@ -326,9 +327,7 @@
 			validationErrors = errors;
 
 			// Scroll to first errored field
-			const firstErrorKey = Object.keys(validatedForm.errors).find(
-				(k) => k !== '_errors'
-			);
+			const firstErrorKey = Object.keys(validatedForm.errors).find((k) => k !== '_errors');
 			if (firstErrorKey) {
 				scrollToIssue(firstErrorKey);
 			}
@@ -540,137 +539,145 @@
 	});
 
 	const t = $derived(lang[interfaceLanguage.current]);
+	const isHybrid = $derived(hybridContext.mode === 'hybrid' && !!collection.previewUrl);
 </script>
 
-<EntryHeader
-	{entry}
-	version={editingEntry}
-	{onSave}
-	onSaveDraft={performAutosave}
-	{onArchive}
-	{saveStatus}
-	{isArchived}
-	fields={getFieldsFromConfig(collection)}
-	getFormData={() => get(form.form)}
-	onScrollToIssue={scrollToIssue}
-	{translationStatus}
-/>
-
-{#if validationErrors.length > 0}
-	<div
-		role="alert"
-		aria-live="assertive"
-		class="flex items-start gap-3 border-b border-[var(--error)]/20 bg-[#FDF0F0] px-6 py-3 text-sm text-[var(--error)]"
-	>
-		<AlertCircle class="mt-0.5 size-4 shrink-0" />
-		<div class="min-w-0 flex-1">
-			<p class="font-semibold">{t.cannotPublish}</p>
-			<p class="text-xs opacity-80">{t.validationHint}</p>
-			<ul class="mt-1 text-xs">
-				{#each validationErrors.slice(0, 5) as error}
-					<li>— {error}</li>
-				{/each}
-			</ul>
-		</div>
-		<button
-			type="button"
-			onclick={() => (validationErrors = [])}
-			class="shrink-0 rounded p-0.5 opacity-60 hover:opacity-100"
-			aria-label="Zamknij"
+<div class={isHybrid ? 'flex h-full flex-col overflow-hidden' : ''}>
+	<EntryHeader
+		{entry}
+		version={editingEntry}
+		{onSave}
+		onSaveDraft={performAutosave}
+		{onArchive}
+		{saveStatus}
+		{isArchived}
+		fields={getFieldsFromConfig(collection)}
+		getFormData={() => get(form.form)}
+		onScrollToIssue={scrollToIssue}
+		{translationStatus}
+	/>
+
+	{#if validationErrors.length > 0}
+		<div
+			role="alert"
+			aria-live="assertive"
+			class="flex shrink-0 items-start gap-3 border-b border-[var(--error)]/20 bg-[#FDF0F0] px-6 py-3 text-sm text-[var(--error)]"
 		>
-			<XIcon class="size-4" />
-		</button>
-	</div>
-{/if}
+			<AlertCircle class="mt-0.5 size-4 shrink-0" />
+			<div class="min-w-0 flex-1">
+				<p class="font-semibold">{t.cannotPublish}</p>
+				<p class="text-xs opacity-80">{t.validationHint}</p>
+				<ul class="mt-1 text-xs">
+					{#each validationErrors.slice(0, 5) as error}
+						<li>— {error}</li>
+					{/each}
+				</ul>
+			</div>
+			<button
+				type="button"
+				onclick={() => (validationErrors = [])}
+				class="shrink-0 rounded p-0.5 opacity-60 hover:opacity-100"
+				aria-label="Zamknij"
+			>
+				<XIcon class="size-4" />
+			</button>
+		</div>
+	{/if}
 
-{#if isArchived}
-	<div
-		role="alert"
-		class="flex items-center justify-between gap-3 border-b border-[var(--warning)]/20 bg-[#FDF6EC] px-6 py-3 text-sm"
-	>
-		<div class="flex items-center gap-2 text-[var(--warning)]">
-			<ArchiveIcon class="size-4 shrink-0" />
-			<span>{t.archivedBanner}</span>
+	{#if isArchived}
+		<div
+			role="alert"
+			class="flex shrink-0 items-center justify-between gap-3 border-b border-[var(--warning)]/20 bg-[#FDF6EC] px-6 py-3 text-sm"
+		>
+			<div class="flex items-center gap-2 text-[var(--warning)]">
+				<ArchiveIcon class="size-4 shrink-0" />
+				<span>{t.archivedBanner}</span>
+			</div>
+			<Button size="sm" onclick={onRestore}>{t.restore}</Button>
 		</div>
-		<Button size="sm" onclick={onRestore}>{t.restore}</Button>
-	</div>
-{/if}
+	{/if}
 
-{#if showDraftBanner}
-	<div
-		class="flex items-center justify-between border-b bg-[var(--lavender-lighter)] px-6 py-2 text-sm"
-	>
-		<span class="text-[var(--text-secondary)]">{lang[interfaceLanguage.current].newerDraft}</span>
-		<button
-			type="button"
-			class="font-semibold text-[var(--primary)] hover:underline"
-			onclick={() => goto(`?version=${draftVersionId}`)}
+	{#if showDraftBanner}
+		<div
+			class="flex shrink-0 items-center justify-between border-b bg-[var(--lavender-lighter)] px-6 py-2 text-sm"
 		>
-			{lang[interfaceLanguage.current].switchToDraft}
-		</button>
-	</div>
-{:else if showPublishedBanner}
+			<span class="text-[var(--text-secondary)]">{lang[interfaceLanguage.current].newerDraft}</span>
+			<button
+				type="button"
+				class="font-semibold text-[var(--primary)] hover:underline"
+				onclick={() => goto(`?version=${draftVersionId}`)}
+			>
+				{lang[interfaceLanguage.current].switchToDraft}
+			</button>
+		</div>
+	{:else if showPublishedBanner}
+		<div
+			class="flex shrink-0 items-center justify-between border-b bg-[var(--lavender-lighter)] px-6 py-2 text-sm"
+		>
+			<span class="text-[var(--text-secondary)]"
+				>{lang[interfaceLanguage.current].editingDraft}</span
+			>
+			<button
+				type="button"
+				class="font-semibold text-[var(--primary)] hover:underline"
+				onclick={() => goto(`?version=${entry.publishedVersion!.id}`)}
+			>
+				{lang[interfaceLanguage.current].switchToPublished}
+			</button>
+		</div>
+	{/if}
+
 	<div
-		class="flex items-center justify-between border-b bg-[var(--lavender-lighter)] px-6 py-2 text-sm"
+		class={cn(
+			isArchived && 'pointer-events-none opacity-60',
+			isHybrid && 'flex min-h-0 flex-1 overflow-hidden'
+		)}
 	>
-		<span class="text-[var(--text-secondary)]">{lang[interfaceLanguage.current].editingDraft}</span>
-		<button
-			type="button"
-			class="font-semibold text-[var(--primary)] hover:underline"
-			onclick={() => goto(`?version=${entry.publishedVersion!.id}`)}
-		>
-			{lang[interfaceLanguage.current].switchToPublished}
-		</button>
-	</div>
-{/if}
-
-<div class={isArchived ? 'pointer-events-none opacity-60' : ''}>
-{#if hybridContext.mode === 'hybrid' && collection.previewUrl}
-	<div class="flex min-h-0 flex-1 overflow-hidden">
-		{#await import('./hybrid/hybrid-layout.svelte')}
-			<div class="bg-accent h-full animate-pulse rounded-md"></div>
-		{:then { default: HybridLayout }}
-			<HybridLayout>
-				{#snippet preview()}
-					{#await import('./hybrid/hybrid-preview.svelte')}
-						<div class="bg-accent h-full animate-pulse rounded-md"></div>
-					{:then { default: HybridPreview }}
-						<HybridPreview
-							{collection}
-							{editingEntry}
-							bind:previewIframe
-							bind:sizePreset
-							{size}
-							bind:el
+		{#if isHybrid}
+			{#await import('./hybrid/hybrid-layout.svelte')}
+				<div class="bg-accent h-full animate-pulse rounded-md"></div>
+			{:then { default: HybridLayout }}
+				<HybridLayout>
+					{#snippet preview()}
+						{#await import('./hybrid/hybrid-preview.svelte')}
+							<div class="bg-accent h-full animate-pulse rounded-md"></div>
+						{:then { default: HybridPreview }}
+							<HybridPreview
+								{collection}
+								{editingEntry}
+								bind:previewIframe
+								bind:sizePreset
+								{size}
+								bind:el
+							/>
+						{:catch}
+							<p class="text-destructive p-4 text-sm">Failed to load preview</p>
+						{/await}
+					{/snippet}
+					{#snippet formPanel()}
+						<EntryForm
+							{form}
+							{entry}
+							focusedPath={hybridContext.focusedPath}
+							onPathSelect={(path) => (hybridContext.focusedPath = path)}
 						/>
-					{:catch}
-						<p class="text-destructive p-4 text-sm">Failed to load preview</p>
-					{/await}
-				{/snippet}
-				{#snippet formPanel()}
-					<EntryForm
-						{form}
-						{entry}
-						focusedPath={hybridContext.focusedPath}
-						onPathSelect={(path) => (hybridContext.focusedPath = path)}
-					/>
-				{/snippet}
-			</HybridLayout>
-		{:catch}
-			<p class="text-destructive p-4 text-sm">Failed to load layout</p>
-		{/await}
-	</div>
-{:else if hasLayout(collection)}
-	<div class="overflow-y-auto" style="scroll-padding-top: 48px;">
-		<EntryForm {form} {entry} />
-	</div>
-{:else}
-	<div class="flex items-stretch justify-center" style="scroll-padding-top: 48px;">
-		<div class="max-w-2xl grow p-4 lg:p-6">
-			<div class="bg-card rounded-2xl border p-4 shadow-sm lg:p-6">
+					{/snippet}
+				</HybridLayout>
+			{:catch}
+				<p class="text-destructive p-4 text-sm">Failed to load layout</p>
+			{/await}
+		{:else if hasLayout(collection)}
+			<div class="overflow-y-auto" style="scroll-padding-top: 48px;">
 				<EntryForm {form} {entry} />
 			</div>
-		</div>
+		{:else}
+			<div class="flex items-stretch justify-center" style="scroll-padding-top: 48px;">
+				<div class="max-w-2xl grow p-4 lg:p-6">
+					<div class="bg-card rounded-2xl border p-4 shadow-sm lg:p-6">
+						<EntryForm {form} {entry} />
+					</div>
+				</div>
+			</div>
+		{/if}
 	</div>
-{/if}
 </div>

package/dist/admin/client/entry/hybrid/hybrid-preview.svelte

@@ -28,6 +28,36 @@
 		tablet: [768, 1024],
 		mobile: [375, 667]
 	} as const;
+
+	const deviceFrames = {
+		mobile: { padX: 16, padTop: 40, padBottom: 24, radius: 32, notch: 40 },
+		tablet: { padX: 20, padTop: 32, padBottom: 24, radius: 24, notch: 48 }
+	} as const;
+
+	const frameSize = $derived.by(() => {
+		if (sizePreset !== 'mobile' && sizePreset !== 'tablet') return null;
+		const frame = deviceFrames[sizePreset];
+		const [iw, ih] = sizePresets[sizePreset];
+		return {
+			w: iw + frame.padX * 2 + 16,
+			h: ih + frame.padTop + frame.padBottom + 16
+		};
+	});
+
+	const scale = $derived.by(() => {
+		if (sizePreset === 'responsive') return 1;
+		const cw = size.width;
+		const ch = size.height;
+		if (!cw || !ch) return 1;
+
+		if (sizePreset === 'desktop') {
+			const [iw, ih] = sizePresets.desktop;
+			return Math.min(cw / iw, ch / ih, 1);
+		}
+
+		if (!frameSize) return 1;
+		return Math.min(cw / frameSize.w, ch / frameSize.h, 1) * 0.95;
+	});
 </script>
 
 <div class="flex h-full flex-col overflow-hidden">
@@ -56,14 +86,67 @@
 		</Button>
 	</div>
 	<div class="relative flex-1 overflow-hidden" bind:this={el}>
-		<iframe
-			bind:this={previewIframe}
-			style={sizePreset !== 'responsive' ? `transform: scale(${size.width / sizePresets[sizePreset][0]});` : ''}
-			class="{sizePreset === 'responsive' ? 'h-full w-full' : 'absolute top-0 left-0 origin-top-left'} border-0"
-			width={sizePreset !== 'responsive' ? sizePresets[sizePreset][0] : undefined}
-			height={sizePreset !== 'responsive' ? sizePresets[sizePreset][1] : undefined}
-			src="{collection.previewUrl}?preview={editingEntry.id}"
-			title="preview"
-		></iframe>
+		{#if sizePreset === 'responsive'}
+			<iframe
+				bind:this={previewIframe}
+				class="h-full w-full border-0"
+				src="{collection.previewUrl}?preview={editingEntry.id}"
+				title="preview"
+			></iframe>
+		{:else if sizePreset === 'desktop'}
+			<div class="flex h-full w-full items-center justify-center">
+				<iframe
+					bind:this={previewIframe}
+					style="transform: scale({scale}); transform-origin: center center;"
+					class="shrink-0 border-0"
+					width={sizePresets.desktop[0]}
+					height={sizePresets.desktop[1]}
+					src="{collection.previewUrl}?preview={editingEntry.id}"
+					title="preview"
+				></iframe>
+			</div>
+		{:else}
+			{@const frame = deviceFrames[sizePreset]}
+			{@const [iw, ih] = sizePresets[sizePreset]}
+			<div class="flex h-full w-full items-center justify-center">
+				<div
+					class="relative shrink-0 overflow-hidden"
+					style="
+						width: {iw + frame.padX * 2 + 16}px;
+						height: {ih + frame.padTop + frame.padBottom + 16}px;
+						border: 8px solid #1a1a2e;
+						border-radius: {frame.radius}px;
+						background: #000;
+						transform: scale({scale});
+						transform-origin: center center;
+					"
+				>
+					<!-- notch -->
+					<div
+						class="absolute left-1/2 -translate-x-1/2"
+						style="
+							top: {(frame.padTop - 6) / 2}px;
+							width: {frame.notch}px;
+							height: 6px;
+							background: #333;
+							border-radius: 3px;
+						"
+					></div>
+					<!-- iframe -->
+					<iframe
+						bind:this={previewIframe}
+						class="absolute border-0 bg-white"
+						style="
+							top: {frame.padTop}px;
+							left: {frame.padX}px;
+						"
+						width={iw}
+						height={ih}
+						src="{collection.previewUrl}?preview={editingEntry.id}"
+						title="preview"
+					></iframe>
+				</div>
+			</div>
+		{/if}
 	</div>
 </div>