@rokkit/forms 1.0.0-next.124 → 1.0.0-next.127

package/src/FormRenderer.svelte

@@ -1,23 +1,46 @@
 <script>
 	/**
 	 * FormRenderer component with snippet-based rendering
-	 * Handles defaultInput and custom child snippet selection based on override flag
+	 * Handles defaultInput, info, separator, display components, and custom child snippet selection.
+	 * Supports form submission with validate-before-submit, loading state, and optional action buttons.
 	 */
 
+	import { onMount, untrack } from 'svelte'
 	import InputField from './InputField.svelte'
+	import InfoField from './InfoField.svelte'
 	import { FormBuilder } from './lib/builder.svelte.js'
+	import { defaultRenderers } from './lib/renderers.js'
+	import DisplayTable from './display/DisplayTable.svelte'
+	import DisplayCardGrid from './display/DisplayCardGrid.svelte'
+	import DisplaySection from './display/DisplaySection.svelte'
+	import DisplayList from './display/DisplayList.svelte'
 
 	let {
-		// FormBuilder binding
+		// Optional external builder instance
+		builder = undefined,
 
 		// Direct props (alternative to builder)
 		data = $bindable(),
 		schema = null,
 		layout = null,
 
+		// Lookup configurations
+		lookups = {},
+
+		// Validation mode: 'blur' | 'change' | 'manual'
+		validateOn = 'blur',
+
+		// Custom type renderers (merged with defaults)
+		renderers = {},
+
 		// Event handlers
 		onupdate = undefined,
 		onvalidate = undefined,
+		onselect = undefined,
+		onsubmit = undefined,
+
+		// Custom actions snippet: receives { submitting, isValid, isDirty, submit, reset }
+		actions = undefined,
 
 		// Styling
 		className = '',
@@ -29,90 +52,208 @@
 		...props
 	} = $props()
 
-	// Use provided builder or create one from data/schema/layout
-	let formBuilder = $derived(new FormBuilder(data, schema, layout))
-	// Get elements from the builder
-	let elements = $derived(() => formBuilder.elements)
+	// Merged renderer registry
+	const allRenderers = $derived({ ...defaultRenderers, ...renderers })
+
+	// Stable FormBuilder instance — created once, updated via $effect
+	let formBuilder = untrack(() => builder ?? new FormBuilder(data, schema, layout, lookups))
+
+	// Initialize lookups after mount (async fire-and-forget; $state updates trigger re-derive)
+	onMount(() => {
+		if (Object.keys(lookups).length > 0) {
+			formBuilder.initializeLookups()
+		}
+	})
+
+	// Sync prop changes to builder
+	$effect(() => {
+		if (formBuilder.data !== data) {
+			formBuilder.data = data
+		}
+	})
+
+	$effect(() => {
+		if (schema !== null && schema !== undefined) formBuilder.schema = schema
+	})
+
+	$effect(() => {
+		if (layout !== null && layout !== undefined) formBuilder.layout = layout
+	})
 
 	// Handle field value changes
 	function handleFieldChange(element, newValue) {
 		const fieldPath = element.scope.replace(/^#\//, '')
 
-		if (formBuilder) {
-			// Update through FormBuilder
-			formBuilder.updateField(fieldPath, newValue)
-		} else {
-			// Update data directly
-			updateNestedValue(data, fieldPath, newValue)
-		}
+		// Update builder (source of truth)
+		formBuilder.updateField(fieldPath, newValue)
+
+		// Sync builder data back to bindable prop
+		data = formBuilder.data
 
 		// Call onupdate callback if provided
 		if (onupdate) {
-			const currentData = formBuilder ? formBuilder.data : data
-			onupdate(currentData)
+			onupdate(data)
+		}
+
+		// Built-in validation on change
+		if (validateOn === 'change') {
+			formBuilder.validateField(fieldPath)
 		}
 
-		// Trigger validation if handler provided
+		// External validation callback (backward compat)
 		if (onvalidate) {
-			onvalidate(fieldPath, newValue)
+			const result = onvalidate(fieldPath, newValue, 'change')
+			if (result && typeof result === 'object' && result.state) {
+				formBuilder.setFieldValidation(fieldPath, result)
+			}
 		}
 	}
 
-	// Helper function to update nested object values
-	function updateNestedValue(obj, path, value) {
-		const keys = path.split('/')
-		let current = obj
+	// Handle blur events for validation
+	function handleFieldBlur(element) {
+		const fieldPath = element.scope.replace(/^#\//, '')
+		const currentValue = formBuilder.getValue(fieldPath)
 
-		for (let i = 0; i < keys.length - 1; i++) {
-			if (!(keys[i] in current)) {
-				current[keys[i]] = {}
-			}
-			current = current[keys[i]]
+		// Built-in validation on blur (default mode)
+		if (validateOn === 'blur') {
+			formBuilder.validateField(fieldPath)
 		}
 
-		current[keys[keys.length - 1]] = value
+		// External validation callback (backward compat)
+		if (onvalidate) {
+			const result = onvalidate(fieldPath, currentValue, 'blur')
+			if (result && typeof result === 'object' && result.state) {
+				formBuilder.setFieldValidation(fieldPath, result)
+			}
+		}
 	}
 
-	// Handle focus events for validation
-	function handleFieldFocus(element) {
-		// Could trigger validation on focus if needed
-	}
+	// Submission state
+	let submitting = $state(false)
+	let formRoot = $state(null)
 
-	// Handle blur events for validation
-	function handleFieldBlur(element) {
+	// Handle form submission: validate → focus first error → call onsubmit → snapshot
+	async function handleSubmit(e) {
+		e.preventDefault()
+		if (submitting || !onsubmit) return
+
+		// Validate all fields
+		formBuilder.validate()
+
+		// External form-level validation
 		if (onvalidate) {
-			const fieldPath = element.scope.replace(/^#\//, '')
-			const currentValue = element.value
-			onvalidate(fieldPath, currentValue, 'blur')
+			const result = onvalidate('*', data, 'submit')
+			if (result && typeof result === 'object' && result.state) {
+				formBuilder.setFieldValidation('*', result)
+			}
 		}
+
+		// If invalid, focus first error field
+		if (!formBuilder.isValid) {
+			const firstError = formBuilder.errors[0]
+			if (firstError && formRoot) {
+				const field = formRoot.querySelector(
+					`[data-scope="#/${firstError.path}"] input, [data-scope="#/${firstError.path}"] select, [data-scope="#/${firstError.path}"] textarea`
+				)
+				field?.focus?.()
+			}
+			return
+		}
+
+		// Submit
+		submitting = true
+		try {
+			await onsubmit(data, { isValid: true, errors: [] })
+			formBuilder.snapshot()
+		} catch {
+			// Consumer handles errors in their onsubmit callback
+		} finally {
+			submitting = false
+		}
+	}
+
+	// Handle form reset
+	function handleReset() {
+		formBuilder.reset()
+		data = formBuilder.data
 	}
 </script>
 
-<!-- Form container -->
-<div data-form-root class={className} {...props}>
-	<!-- <div data-form-field data-scope={formBuilder.elements[0].scope}>
-		{@render defaultInput(formBuilder.elements[0])}
-	</div> -->
-	{#each formBuilder.elements as element, index (index)}
-		<div data-form-field data-scope={element.scope}>
-			{#if element.override && child}
-				{@render child(element)}
-			{:else}
-				{@render defaultInput(element)}
+<!-- Form container: <form> when onsubmit provided, <div> otherwise -->
+{#if onsubmit}
+	<form
+		bind:this={formRoot}
+		data-form-root
+		data-form-submitting={submitting || undefined}
+		class={className}
+		onsubmit={handleSubmit}
+		{...props}
+	>
+		{#each formBuilder.elements as element, index (index)}
+			{@render renderElement(element)}
+		{/each}
+		{#if actions}
+			{@render actions({ submitting, isValid: formBuilder.isValid, isDirty: formBuilder.isDirty, submit: handleSubmit, reset: handleReset })}
+		{:else}
+			<div data-form-actions>
+				<button type="button" data-form-reset disabled={!formBuilder.isDirty || submitting} onclick={handleReset}>Reset</button>
+				<button type="submit" data-form-submit disabled={!formBuilder.isDirty || submitting}>Submit</button>
+			</div>
+		{/if}
+	</form>
+{:else}
+	<div bind:this={formRoot} data-form-root class={className} {...props}>
+		{#each formBuilder.elements as element, index (index)}
+			{@render renderElement(element)}
+		{/each}
+	</div>
+{/if}
+
+<!-- Render a single element by type -->
+{#snippet renderElement(element)}
+	{#if element.type === 'separator'}
+		<div data-form-separator></div>
+	{:else if element.type === 'group'}
+		<fieldset data-form-group data-scope={element.scope}>
+			{#if element.props?.label}
+				<legend data-form-group-label>{element.props.label}</legend>
 			{/if}
+			{#each element.props?.elements ?? [] as child_element, i (child_element.scope ?? i)}
+				{@render renderElement(child_element)}
+			{/each}
+		</fieldset>
+	{:else if element.type === 'display-table'}
+		<DisplayTable data={element.value} {...element.props} {onselect} />
+	{:else if element.type === 'display-cards'}
+		<DisplayCardGrid data={element.value} {...element.props} {onselect} />
+	{:else if element.type === 'display-section'}
+		<DisplaySection data={element.value} {...element.props} />
+	{:else if element.type === 'display-list'}
+		<DisplayList data={element.value} {...element.props} />
+	{:else if element.type === 'info'}
+		<div data-form-field data-scope={element.scope}>
+			<InfoField
+				name={element.scope}
+				value={element.value}
+				label={element.props?.label}
+				description={element.props?.description}
+			/>
+		</div>
+	{:else if element.override && child}
+		<div data-form-field data-scope={element.scope}>
+			{@render child(element)}
+		</div>
+	{:else}
+		<div data-form-field data-scope={element.scope}>
+			<InputField
+				name={element.scope}
+				type={element.type}
+				value={element.value}
+				{...element.props}
+				renderers={allRenderers}
+				onchange={(newValue) => handleFieldChange(element, newValue)}
+				onblur={() => handleFieldBlur(element)}
+			/>
 		</div>
-	{/each}
-</div>
-
-<!-- Default input snippet -->
-{#snippet defaultInput(element)}
-	<InputField
-		name={element.scope}
-		type={element.type}
-		value={element.value}
-		{...element.props}
-		onchange={(newValue) => handleFieldChange(element, newValue)}
-		onfocus={() => handleFieldFocus(element)}
-		onblur={() => handleFieldBlur(element)}
-	/>
+	{/if}
 {/snippet}

package/src/InfoField.svelte

@@ -0,0 +1,26 @@
+<script>
+	let {
+		class: className,
+		name,
+		value,
+		label,
+		description
+	} = $props()
+</script>
+
+<div
+	data-field-root
+	class={className}
+	data-field-type="info"
+	data-field-empty={value === null || value === undefined}
+>
+	<div data-field aria-label={description ?? label ?? name}>
+		{#if label}
+			<label for={name}>{label}</label>
+		{/if}
+		<span data-field-info>{value === undefined ? '—' : String(value)}</span>
+	</div>
+	{#if description}
+		<div data-description>{description}</div>
+	{/if}
+</div>

package/src/Input.svelte

@@ -1,22 +1,5 @@
 <script>
-	import { Icon } from '@rokkit/ui'
-	import InputCheckbox from './input/InputCheckbox.svelte'
-	import InputColor from './input/InputColor.svelte'
-	import InputDate from './input/InputDate.svelte'
-	import InputDateTime from './input/InputDateTime.svelte'
-	import InputEmail from './input/InputEmail.svelte'
-	import InputFile from './input/InputFile.svelte'
-	import InputMonth from './input/InputMonth.svelte'
-	import InputNumber from './input/InputNumber.svelte'
-	import InputPassword from './input/InputPassword.svelte'
-	import InputRange from './input/InputRange.svelte'
-	import InputTel from './input/InputTel.svelte'
-	import InputText from './input/InputText.svelte'
-	import InputTextArea from './input/InputTextArea.svelte'
-	import InputTime from './input/InputTime.svelte'
-	import InputUrl from './input/InputUrl.svelte'
-	import InputWeek from './input/InputWeek.svelte'
-	import InputSelect from './input/InputSelect.svelte'
+	import { defaultRenderers, resolveRenderer } from './lib/renderers.js'
 
 	let {
 		type = 'text',
@@ -26,50 +9,23 @@
 		onfocus = null,
 		onblur = null,
 		icon = null,
+		renderers = {},
 		...restProps
 	} = $props()
+
+	const allRenderers = $derived({ ...defaultRenderers, ...renderers })
+	const extraProps = $derived(type === 'integer' ? { step: '1' } : {})
 </script>
 
-<div data-input-root>
-	{#if icon}
-		<Icon name={icon} />
-	{/if}
-	{#if type === 'number'}
-		<InputNumber bind:value {onchange} {oninput} {onfocus} {onblur} {...restProps} />
-	{:else if type === 'integer'}
-		<InputNumber bind:value {onchange} {oninput} {onfocus} {onblur} step="1" {...restProps} />
-	{:else if type === 'password'}
-		<InputPassword bind:value {onchange} {oninput} {onfocus} {onblur} {...restProps} />
-	{:else if type === 'checkbox'}
-		<InputCheckbox bind:value {onchange} {oninput} {onfocus} {onblur} {...restProps} />
-	{:else if type === 'color'}
-		<InputColor bind:value {onchange} {oninput} {onfocus} {onblur} {...restProps} />
-	{:else if type === 'date'}
-		<InputDate bind:value {onchange} {oninput} {onfocus} {onblur} {...restProps} />
-	{:else if type === 'email'}
-		<InputEmail bind:value {onchange} {oninput} {onfocus} {onblur} {...restProps} />
-	{:else if type === 'tel'}
-		<InputTel bind:value {onchange} {oninput} {onfocus} {onblur} {...restProps} />
-	{:else if type === 'time'}
-		<InputTime bind:value {onchange} {oninput} {onfocus} {onblur} {...restProps} />
-	{:else if ['datetime', 'datetime-local'].includes(type)}
-		<InputDateTime bind:value {onchange} {oninput} {onfocus} {onblur} {...restProps} />
-	{:else if type === 'month'}
-		<InputMonth bind:value {onchange} {oninput} {onfocus} {onblur} {...restProps} />
-	{:else if type === 'range'}
-		<InputRange bind:value {onchange} {oninput} {onfocus} {onblur} {...restProps} />
-	{:else if type === 'select'}
-		<InputSelect bind:value {onchange} {onfocus} {onblur} {...restProps} />
-	{:else if type === 'textarea'}
-		<InputTextArea bind:value {onchange} {oninput} {onfocus} {onblur} {...restProps} />
-	{:else if type === 'url'}
-		<InputUrl bind:value {onchange} {oninput} {onfocus} {onblur} {...restProps} />
-	{:else if type === 'week'}
-		<InputWeek bind:value {onchange} {oninput} {onfocus} {onblur} {...restProps} />
-		<!-- {:else if type === 'switch'}
-		<InputWeek bind:value {onchange} {oninput} {onfocus} {onblur} {...restProps} /> -->
-	{:else}
-		<!-- Default to text input -->
-		<InputText bind:value {onchange} {oninput} {onfocus} {onblur} {...restProps} />
-	{/if}
-</div>
+{#if type === 'checkbox'}
+	{@const Component = resolveRenderer({ type: 'checkbox' }, allRenderers)}
+	<Component bind:value {onchange} {oninput} {onfocus} {onblur} {...restProps} />
+{:else}
+	{@const Component = resolveRenderer({ type, props: restProps }, allRenderers)}
+	<div data-input-root>
+		{#if icon}
+			<span class={icon} aria-hidden="true"></span>
+		{/if}
+		<Component bind:value {onchange} {oninput} {onfocus} {onblur} {...extraProps} {...restProps} />
+	</div>
+{/if}

package/src/InputField.svelte

@@ -1,6 +1,4 @@
 <script>
-	import { pick, omit, isNil } from 'ramda'
-	import { Icon } from '@rokkit/ui'
 	import Input from './Input.svelte'
 
 	let {
@@ -11,45 +9,51 @@
 		required,
 		status,
 		disabled,
+		dirty,
 		message,
 		nolabel,
 		icon,
 		label,
 		description,
 		onchange,
+		id,
+		renderers,
 		...restProps
 	} = $props()
 
-	let rootProps = pick(['id'], restProps)
-	let properties = {
+	let rootProps = $derived(id !== null && id !== undefined ? { id } : {})
+	let properties = $derived({
 		required,
 		readOnly: disabled,
-		...omit(['id'], restProps),
+		...restProps,
 		name
-	}
+	})
 </script>
 
 <div
 	data-field-root
 	{...rootProps}
 	class={className}
-	data-field-state={status}
+	data-field-state={status ?? message?.state}
 	data-field-type={type}
 	data-field-required={required}
 	data-field-disabled={disabled}
-	data-field-empty={isNil(value)}
-	data-has-icon={!isNil(icon)}
+	data-field-dirty={dirty || undefined}
+	data-field-empty={value === null || value === undefined}
+	data-has-icon={icon !== null && icon !== undefined}
 >
 	<div data-field aria-label={description ?? label ?? name}>
 		{#if label && !nolabel}
 			<label for={name}>{label}</label>
 		{/if}
-		<Input id={name} bind:value {type} {...properties} {onchange} {icon} />
+		<Input id={name} bind:value {type} {...properties} {onchange} {icon} {renderers} />
 	</div>
 	{#if description}
 		<div data-description>{description}</div>
 	{/if}
 	{#if message}
-		<div data-message>{message}</div>
+		<div data-message data-message-state={message?.state ?? 'info'}>
+			{message?.text ?? message}
+		</div>
 	{/if}
 </div>

package/src/ValidationReport.svelte

@@ -0,0 +1,52 @@
+<script>
+	/**
+	 * ValidationReport — grouped summary of validation messages
+	 * Groups items by severity (error, warning, info, success) with count headers.
+	 * Supports click-to-focus via onclick callback.
+	 */
+
+	const SEVERITY_ORDER = ['error', 'warning', 'info', 'success']
+	const SEVERITY_LABELS = { error: 'error', warning: 'warning', info: 'info', success: 'success' }
+
+	let {
+		items = [],
+		onclick = undefined,
+		class: className = ''
+	} = $props()
+
+	const grouped = $derived(
+		SEVERITY_ORDER.map((state) => ({
+			state,
+			items: items.filter((item) => item.state === state)
+		})).filter((group) => group.items.length > 0)
+	)
+</script>
+
+{#if items.length > 0}
+	<div data-validation-report class={className} role="status">
+		{#each grouped as group (group.state)}
+			<div data-validation-group data-severity={group.state}>
+				<div data-validation-group-header>
+					<span data-validation-count>{group.items.length}</span>
+					<span>{group.items.length === 1 ? SEVERITY_LABELS[group.state] : `${SEVERITY_LABELS[group.state]}s`}</span>
+				</div>
+				{#each group.items as item (item.path)}
+					{#if onclick}
+						<button
+							data-validation-item
+							data-status={item.state}
+							onclick={() => onclick(item.path)}
+							type="button"
+						>
+							{item.text}
+						</button>
+					{:else}
+						<div data-validation-item data-status={item.state}>
+							{item.text}
+						</div>
+					{/if}
+				{/each}
+			</div>
+		{/each}
+	</div>
+{/if}

package/src/display/DisplayCardGrid.svelte

@@ -0,0 +1,68 @@
+<script>
+	/**
+	 * Renders an array of objects as a responsive card grid.
+	 * Each card displays fields with formatted values.
+	 */
+	import DisplayValue from './DisplayValue.svelte'
+
+	let {
+		data = [],
+		fields = [],
+		select,
+		title,
+		onselect,
+		class: className = ''
+	} = $props()
+
+	let selectedIndex = $state(-1)
+	let selectedIndices = $state(new Set())
+
+	function handleCardClick(item, index) {
+		if (!select) return
+
+		if (select === 'one') {
+			selectedIndex = index
+			onselect?.(item, item)
+		} else if (select === 'many') {
+			const next = new Set(selectedIndices)
+			if (next.has(index)) {
+				next.delete(index)
+			} else {
+				next.add(index)
+			}
+			selectedIndices = next
+			const selected = data.filter((_, i) => next.has(i))
+			onselect?.(selected, item)
+		}
+	}
+
+	function isSelected(index) {
+		if (select === 'one') return selectedIndex === index
+		if (select === 'many') return selectedIndices.has(index)
+		return false
+	}
+</script>
+
+<div data-display-cards data-selectable={select || undefined} class={className}>
+	{#if title}
+		<div data-display-title>{title}</div>
+	{/if}
+	<div data-display-grid>
+		{#each data as item, index (index)}
+			<!-- svelte-ignore a11y_click_events_have_key_events -->
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<div
+				data-display-card
+				data-selected={isSelected(index) || undefined}
+				onclick={select ? () => handleCardClick(item, index) : undefined}
+			>
+				{#each fields as field (field.key)}
+					<div data-display-field>
+						<span data-display-label>{field.label ?? field.key}</span>
+						<DisplayValue value={item[field.key]} format={field.format} />
+					</div>
+				{/each}
+			</div>
+		{/each}
+	</div>
+</div>

package/src/display/DisplayList.svelte

@@ -0,0 +1,31 @@
+<script>
+	/**
+	 * Renders an array of objects as a styled list.
+	 */
+	import DisplayValue from './DisplayValue.svelte'
+
+	let {
+		data = [],
+		fields = [],
+		title,
+		class: className = ''
+	} = $props()
+</script>
+
+<div data-display-list class={className}>
+	{#if title}
+		<div data-display-title>{title}</div>
+	{/if}
+	<ul>
+		{#each data as item, index (index)}
+			<li data-display-list-item>
+				{#each fields as field (field.key)}
+					<span data-display-field>
+						<span data-display-label>{field.label ?? field.key}</span>
+						<DisplayValue value={item[field.key]} format={field.format} />
+					</span>
+				{/each}
+			</li>
+		{/each}
+	</ul>
+</div>

package/src/display/DisplaySection.svelte

@@ -0,0 +1,20 @@
+<script>
+	/**
+	 * Renders an object as key-value pairs (detail/summary view).
+	 */
+	import DisplayValue from './DisplayValue.svelte'
+
+	let { data = {}, fields = [], title } = $props()
+</script>
+
+<div data-display-section>
+	{#if title}
+		<div data-display-title>{title}</div>
+	{/if}
+	{#each fields as field (field.key)}
+		<div data-display-field>
+			<span data-display-label>{field.label ?? field.key}</span>
+			<DisplayValue value={data[field.key]} format={field.format} />
+		</div>
+	{/each}
+</div>