includio-cms 0.1.0 → 0.1.1

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to includio-cms are documented here.
 Generated from `src/lib/updates/` — do not edit manually.
 
+## 0.1.1 — 2026-02-18
+
+Field constraint UI — visible limits, counters, and hints
+
+### Added
+- Text fields: character counter (X / Y) with aria-live, destructive color at limit
+- Text fields: constraint hints (min/max chars, pattern format) in description
+- Text fields: native minlength/maxlength HTML attributes on input/textarea
+- Number fields: native min/max/step HTML attributes on input
+- Number fields: range and step hints in description
+- Array fields: items counter (X / Y) next to label when maxItems defined
+- Array fields: Add/Duplicate buttons disabled at maxItems limit
+- Array fields: fixed-length mode (minItems === maxItems) — pre-populated, reorder only
+
 ## 0.1.0 — 2026-02-17
 
 Stabilization — pagination, language switcher, and more

package/ROADMAP.md

@@ -22,10 +22,10 @@
 
 ## 0.1.1 — Input integrity
 
-- [ ] `[fix]` `[P1]` Input constraints UI — HTML maxlength, character counter, pattern feedback <!-- files: src/lib/admin/components/fields/text-field.svelte -->
-- [ ] `[fix]` `[P1]` Array field maxItems — disable Add button when max reached <!-- files: src/lib/admin/components/fields/array-field.svelte -->
-- [ ] `[feature]` `[P1]` Array field fixed length — fixed item count, no add/remove, reorder only
-- [ ] `[feature]` `[P1]` Field constraint info display — show constraints before validation error (WCAG/ATAG)
+- [x] `[fix]` `[P1]` Input constraints UI — HTML maxlength, character counter, pattern feedback <!-- files: src/lib/admin/components/fields/text-field.svelte, src/lib/admin/components/fields/text-field-wrapper.svelte -->
+- [x] `[fix]` `[P1]` Array field maxItems — disable Add button when max reached <!-- files: src/lib/admin/components/fields/array-field.svelte -->
+- [x] `[feature]` `[P1]` Array field fixed length — fixed item count, no add/remove, reorder only
+- [x] `[feature]` `[P1]` Field constraint info display — show constraints before validation error (WCAG/ATAG) <!-- files: src/lib/admin/components/fields/text-field-wrapper.svelte, src/lib/admin/components/fields/field-renderer.svelte -->
 
 ## 0.1.2 — User management & RBAC
 

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

@@ -71,9 +71,28 @@
 			acc.push(item);
 			return acc;
 		}, [] as ObjectFieldData[]);
+
+		// Fixed-length: pad or trim to exact count
+		if (isFixedLength && $value.length !== fixedCount) {
+			const current = [...$value];
+			if (current.length < fixedCount) {
+				const defaults = field.defaultValue;
+				for (let i = current.length; i < fixedCount; i++) {
+					if (defaults && defaults[i]) {
+						current.push({ _id: generateId(), ...JSON.parse(JSON.stringify(defaults[i])) });
+					} else {
+						current.push({ _id: generateId(), slug: field.of[0].slug, data: {} });
+					}
+				}
+			} else {
+				current.length = fixedCount;
+			}
+			$value = current;
+		}
 	});
 
 	async function addItem(field: ObjectFieldType) {
+		if (atMax) return;
 		$value = [
 			...($value ?? []),
 			{
@@ -87,7 +106,7 @@
 	}
 
 	function duplicateItem(index: number) {
-		if (!$value) return;
+		if (!$value || atMax) return;
 		const itemToDuplicate = $value[index];
 		if (!itemToDuplicate) return;
 
@@ -192,11 +211,28 @@
 		return normalizePath(flashingPath) === fieldPath;
 	}
 
+	const atMax = $derived(field.maxItems !== undefined && ($value?.length ?? 0) >= field.maxItems);
+
+	const isFixedLength = $derived(
+		field.minItems !== undefined &&
+		field.maxItems !== undefined &&
+		field.minItems === field.maxItems &&
+		field.minItems > 0
+	);
+	const fixedCount = $derived(isFixedLength ? field.minItems! : 0);
+
 	let blockPickerOpen = $state(false);
 </script>
 
 <div class="flex items-center justify-between gap-4">
-	<RequiredLabel required={field.minItems !== undefined && field.minItems > 0} class="text-lg">{getLocalizedLabel(field.label, interfaceLanguage.current)}</RequiredLabel>
+	<div class="flex items-center gap-2">
+		<RequiredLabel required={field.minItems !== undefined && field.minItems > 0} class="text-lg">{getLocalizedLabel(field.label, interfaceLanguage.current)}</RequiredLabel>
+		{#if isFixedLength}
+			<span class="text-xs text-muted-foreground">{fixedCount} elementów</span>
+		{:else if field.maxItems !== undefined}
+			<span class="text-xs {atMax ? 'text-destructive' : 'text-muted-foreground'}">{$value?.length ?? 0} / {field.maxItems}</span>
+		{/if}
+	</div>
 
 	<div class="flex items-center gap-2">
 		<Button
@@ -263,6 +299,7 @@
 							>
 								<div class="flex grow items-center justify-between gap-4">
 									<div class="flex items-center gap-4">
+										{#if !isFixedLength || fixedCount > 1}
 										<!-- svelte-ignore a11y_no_static_element_interactions -->
 										<div
 											use:draggable={{ container: index.toString(), dragData: { id: item._id } }}
@@ -272,11 +309,13 @@
 										>
 											<GripVertical class="h-4 w-4" />
 										</div>
+										{/if}
 										<span>{index < 10 ? '0' : ''}{index + 1}</span>
 										<Badge variant="outline">{getLocalizedLabel(objectField.label, interfaceLanguage.current) || objectField.slug}</Badge>
 										<span>{getAccordionLabel($value[index])}</span>
 									</div>
 
+									{#if !(isFixedLength && fixedCount <= 1)}
 									<DropdownMenu.Root>
 										<DropdownMenu.Trigger
 											class="data-[state=open]:bg-muted text-muted-foreground flex size-8"
@@ -289,9 +328,11 @@
 											{/snippet}
 										</DropdownMenu.Trigger>
 										<DropdownMenu.Content align="end" class="w-32">
-											<DropdownMenu.Item onclick={() => duplicateItem(index)}>
+											{#if !isFixedLength}
+											<DropdownMenu.Item onclick={() => duplicateItem(index)} disabled={atMax}>
 												Duplicate
 											</DropdownMenu.Item>
+											{/if}
 											<DropdownMenu.Item onclick={() => moveItemUp(index)} disabled={index === 0}>
 												Move up
 											</DropdownMenu.Item>
@@ -301,11 +342,14 @@
 											>
 												Move down
 											</DropdownMenu.Item>
+											{#if !isFixedLength}
 											<DropdownMenu.Item variant="destructive" onclick={() => removeItem(index)}>
 												Delete
 											</DropdownMenu.Item>
+											{/if}
 										</DropdownMenu.Content>
 									</DropdownMenu.Root>
+									{/if}
 								</div>
 							</Accordion.Trigger>
 							<Accordion.Content
@@ -341,25 +385,27 @@
 	{/if}
 </Accordion.Root>
 
-{#if field.displayMode === 'blocks'}
-	<div class="mt-4">
-		<Button size="sm" type="button" variant="outline" onclick={() => (blockPickerOpen = true)}>
-			<CirclePlus />
-			Add Block
-		</Button>
-	</div>
-	<BlockPickerModal
-		bind:open={blockPickerOpen}
-		options={field.of}
-		onSelect={(option) => addItem(option)}
-	/>
-{:else}
-	<div class="mt-4 flex flex-wrap gap-2">
-		{#each field.of as option}
-			<Button size="sm" type="button" variant="outline" onclick={() => addItem(option)}>
+{#if !isFixedLength}
+	{#if field.displayMode === 'blocks'}
+		<div class="mt-4">
+			<Button size="sm" type="button" variant="outline" disabled={atMax} onclick={() => (blockPickerOpen = true)}>
 				<CirclePlus />
-				{getLocalizedLabel(option.label, interfaceLanguage.current) || option.slug}
+				Add Block
 			</Button>
-		{/each}
-	</div>
+		</div>
+		<BlockPickerModal
+			bind:open={blockPickerOpen}
+			options={field.of}
+			onSelect={(option) => addItem(option)}
+		/>
+	{:else}
+		<div class="mt-4 flex flex-wrap gap-2">
+			{#each field.of as option}
+				<Button size="sm" type="button" variant="outline" disabled={atMax} onclick={() => addItem(option)}>
+					<CirclePlus />
+					{getLocalizedLabel(option.label, interfaceLanguage.current) || option.slug}
+				</Button>
+			{/each}
+		</div>
+	{/if}
 {/if}

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

@@ -48,6 +48,23 @@
 	function isCheckboxesField(field: Field): field is Extract<Field, { type: 'checkboxes' }> {
 		return field.type === 'checkboxes';
 	}
+
+	function numberConstraintHint(f: Field): string {
+		if (f.type !== 'number') return '';
+		const parts: string[] = [];
+		if (f.min !== undefined && f.max !== undefined) {
+			parts.push(`Zakres: ${f.min}–${f.max}`);
+		} else if (f.min !== undefined) {
+			parts.push(`Min. ${f.min}`);
+		} else if (f.max !== undefined) {
+			parts.push(`Maks. ${f.max}`);
+		}
+		if (f.step !== undefined) {
+			if (parts.length > 0) parts.push(` · `);
+			parts.push(`Krok: ${f.step}`);
+		}
+		return parts.join('');
+	}
 </script>
 
 {#if isRadioField(field)}
@@ -132,8 +149,14 @@
 				</div>
 			{/snippet}
 		</Form.Control>
-		{#if !fieldsWithNoDescription.includes(field.type) && !fieldsWithAlternativeDescription.includes(field.type) && field.description}
-			<Form.Description>{getLocalizedLabel(field.description, interfaceLanguage.current)}</Form.Description>
+		{#if !fieldsWithNoDescription.includes(field.type) && !fieldsWithAlternativeDescription.includes(field.type) && (field.description || numberConstraintHint(field))}
+			<Form.Description>
+				{#if field.description}{getLocalizedLabel(field.description, interfaceLanguage.current)}{/if}
+				{#if numberConstraintHint(field)}
+					{#if field.description}<br />{/if}
+					{numberConstraintHint(field)}
+				{/if}
+			</Form.Description>
 		{/if}
 		<Form.FieldErrors />
 	</Form.Field>

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

@@ -31,4 +31,4 @@
 	});
 </script>
 
-<Input {...props} bind:value={$value} type="number" />
+<Input {...props} bind:value={$value} type="number" min={field.min} max={field.max} step={field.step} />

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

@@ -27,6 +27,30 @@
 	};
 
 	let { field, form, path, ...props }: Props = $props();
+
+	const formData = form.form;
+
+	const isText = $derived(field.type === 'text');
+	const hasConstraints = $derived(
+		isText && (field.minLength !== undefined || field.maxLength !== undefined || field.pattern !== undefined)
+	);
+
+	function resolvePathValue(data: Record<string, unknown>, dotPath: string): unknown {
+		return dotPath.split('.').reduce<unknown>((obj, key) => (obj as Record<string, unknown>)?.[key], data);
+	}
+
+	function constraintHint(): string {
+		if (field.type !== 'text') return '';
+		const parts: string[] = [];
+		if (field.minLength !== undefined && field.maxLength !== undefined) {
+			parts.push(`${field.minLength}–${field.maxLength} znaków`);
+		} else if (field.minLength !== undefined) {
+			parts.push(`Min. ${field.minLength} znaków`);
+		} else if (field.maxLength !== undefined) {
+			parts.push(`Maks. ${field.maxLength} znaków`);
+		}
+		return parts.join('');
+	}
 </script>
 
 <Tabs.Root
@@ -66,7 +90,38 @@
 					{/snippet}
 				</Form.Control>
 
-				<Form.Description>{getLocalizedLabel(field.description, interfaceLanguage.current)}</Form.Description>
+				{#if isText}
+					{@const val = resolvePathValue($formData, joinPath(path, lang))}
+					{@const charCount = typeof val === 'string' ? val.length : 0}
+					{@const atLimit = field.type === 'text' && field.maxLength !== undefined && charCount >= field.maxLength}
+					<div class="flex items-start justify-between gap-4">
+						{#if field.description || hasConstraints}
+							<Form.Description class="flex-1">
+								{#if field.description}{getLocalizedLabel(field.description, interfaceLanguage.current)}{/if}
+								{#if hasConstraints}
+									{#if field.description && constraintHint()}<br />{/if}
+									{#if constraintHint()}{constraintHint()}{/if}
+									{#if field.type === 'text' && field.pattern}
+										{#if constraintHint()} · {/if}Format: <code class="text-xs bg-muted px-1 py-0.5 rounded">{field.pattern}</code>
+									{/if}
+								{/if}
+							</Form.Description>
+						{:else}
+							<div></div>
+						{/if}
+						<span class="shrink-0 text-xs {atLimit ? 'text-destructive' : 'text-muted-foreground'}" aria-live="polite">
+							{#if field.type === 'text' && field.maxLength !== undefined}
+								{charCount} / {field.maxLength}
+							{:else if field.type === 'text' && field.minLength !== undefined}
+								{charCount} (min. {field.minLength})
+							{:else}
+								{charCount}
+							{/if}
+						</span>
+					</div>
+				{:else if field.description}
+					<Form.Description>{getLocalizedLabel(field.description, interfaceLanguage.current)}</Form.Description>
+				{/if}
 
 				<Form.FieldErrors />
 			</Form.Field>

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

@@ -35,7 +35,7 @@
 </script>
 
 {#if field.multiline}
-	<Textarea {...props} bind:value={$value} placeholder={getLocalizedLabel(field.placeholder, interfaceLanguage.current)} />
+	<Textarea {...props} bind:value={$value} placeholder={getLocalizedLabel(field.placeholder, interfaceLanguage.current)} minlength={field.minLength} maxlength={field.maxLength} />
 {:else}
-	<Input {...props} bind:value={$value} type="text" placeholder={getLocalizedLabel(field.placeholder, interfaceLanguage.current)} />
+	<Input {...props} bind:value={$value} type="text" placeholder={getLocalizedLabel(field.placeholder, interfaceLanguage.current)} minlength={field.minLength} maxlength={field.maxLength} />
 {/if}

package/dist/cms/runtime/types.d.ts

@@ -35,6 +35,13 @@ export interface BlogPost {
     slug: string;
     data: {
         title: string;
+        rating: number;
+        test?: ({
+            slug: 'test-object';
+            data: {
+                dupa: string;
+            };
+        })[];
         slug?: string;
         seo: {
             slug?: string;

package/dist/core/fields/fieldSchemaToTs.js

@@ -74,10 +74,24 @@ export function generateZodSchemaFromField(field, languages, options = {
                 ? z.discriminatedUnion('slug', schemas)
                 : schemas[0];
             let schema = z.array(itemSchema);
-            if (field.minItems !== undefined)
-                schema = schema.min(field.minItems, { message: `Minimum ${field.minItems} elementów` });
-            if (field.maxItems !== undefined)
-                schema = schema.max(field.maxItems, { message: `Maksimum ${field.maxItems} elementów` });
+            if (field.minItems !== undefined &&
+                field.maxItems !== undefined &&
+                field.minItems === field.maxItems &&
+                field.minItems > 0) {
+                schema = schema.length(field.minItems, {
+                    message: `Wymagane dokładnie ${field.minItems} elementów`
+                });
+            }
+            else {
+                if (field.minItems !== undefined)
+                    schema = schema.min(field.minItems, {
+                        message: `Minimum ${field.minItems} elementów`
+                    });
+                if (field.maxItems !== undefined)
+                    schema = schema.max(field.maxItems, {
+                        message: `Maksimum ${field.maxItems} elementów`
+                    });
+            }
             return schema.default([]); // Default to empty array if not required
         }
         case 'slug': {

package/dist/updates/0.1.1/index.d.ts

@@ -0,0 +1,2 @@
+import type { CmsUpdate } from '../index.js';
+export declare const update: CmsUpdate;

package/dist/updates/0.1.1/index.js

@@ -0,0 +1,17 @@
+export const update = {
+    version: '0.1.1',
+    date: '2026-02-18',
+    description: 'Field constraint UI — visible limits, counters, and hints',
+    features: [
+        'Text fields: character counter (X / Y) with aria-live, destructive color at limit',
+        'Text fields: constraint hints (min/max chars, pattern format) in description',
+        'Text fields: native minlength/maxlength HTML attributes on input/textarea',
+        'Number fields: native min/max/step HTML attributes on input',
+        'Number fields: range and step hints in description',
+        'Array fields: items counter (X / Y) next to label when maxItems defined',
+        'Array fields: Add/Duplicate buttons disabled at maxItems limit',
+        'Array fields: fixed-length mode (minItems === maxItems) — pre-populated, reorder only'
+    ],
+    fixes: [],
+    breakingChanges: []
+};

package/dist/updates/index.js

@@ -4,7 +4,8 @@ import { update as update0067 } from './0.0.67/index.js';
 import { update as update0068 } from './0.0.68/index.js';
 import { update as update0069 } from './0.0.69/index.js';
 import { update as update010 } from './0.1.0/index.js';
-export const updates = [update0065, update0066, update0067, update0068, update0069, update010];
+import { update as update011 } from './0.1.1/index.js';
+export const updates = [update0065, update0066, update0067, update0068, update0069, update010, update011];
 export const getUpdatesFrom = (fromVersion) => {
     const fromParts = fromVersion.split('.').map(Number);
     return updates.filter((update) => {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "includio-cms",
-	"version": "0.1.0",
+	"version": "0.1.1",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",