@vibesdotdev/config 0.0.1

package/src/adapters/web/components/ManifestForm.svelte

@@ -0,0 +1,817 @@
+<script lang="ts">
+	/**
+	 * ManifestForm Component
+	 *
+	 * A production-ready form component that renders configuration forms
+	 * from a ConfigManifest definition. Supports field groups, visibility rules,
+	 * validation, and conditional display.
+	 *
+	 * Features:
+	 * - Automatic field rendering based on manifest schema
+	 * - Real-time validation with Zod schemas
+	 * - Field groups with collapsible sections
+	 * - Conditional visibility based on field values
+	 * - Encrypted field support
+	 */
+
+	import type { ConfigManifest, ConfigFieldMeta, ConfigFieldGroup } from '../../manifest/types.js';
+	import type { ResolvedField } from '../../form/core/types.js';
+	import { resolveFields, groupFields } from '../../form/core/field-resolver.js';
+	import { evaluateRule } from '../../form/core/visibility.js';
+	import type { ConfigContext } from '../../manifest/types.js';
+
+	interface Props {
+		/** The config manifest defining form structure */
+		manifest: ConfigManifest;
+		/** Initial form values */
+		initialValues?: Record<string, unknown>;
+		/** Whether the form is read-only */
+		readonly?: boolean;
+		/** Required context for visibility rules and default resolution */
+		context: ConfigContext;
+		/** Callback when any field changes */
+		onChange?: (values: Record<string, unknown>, changedField: string) => void;
+		/** Callback when form is submitted */
+		onSubmit?: (values: Record<string, unknown>) => void | Promise<void>;
+		/** Callback when form validation fails */
+		onValidationError?: (errors: ValidationError[]) => void;
+		/** Custom component overrides for specific fields */
+		fieldComponents?: Record<string, import('svelte').ComponentType>;
+		/** Children snippet for custom form content */
+		children?: import('svelte').Snippet;
+	}
+
+	interface ValidationError {
+		field: string;
+		message: string;
+	}
+
+	let {
+		manifest,
+		initialValues = {},
+		readonly = false,
+		context,
+		onChange,
+		onSubmit,
+		onValidationError,
+		fieldComponents = {},
+		children
+	}: Props = $props();
+
+	// Form state
+	let values = $state<Record<string, unknown>>({ ...initialValues });
+	let errors = $state<Record<string, string>>({});
+	let touched = $state<Record<string, boolean>>({});
+	let submitting = $state(false);
+	let submitError = $state<string | null>(null);
+
+	// Build context for field resolution - must be provided explicitly
+	const resolvedContext: ConfigContext = $derived({
+		enabledFeatures: new Set(),
+		get: (key: string) => values[key],
+		custom: {},
+		...context
+	});
+
+	// Resolve fields based on manifest and current values
+	let resolvedFields = $derived(resolveFields(manifest, values, {}, {
+		hardware: resolvedContext.hardware,
+		environment: resolvedContext.environment,
+		surface: resolvedContext.surface
+	}));
+
+	// Evaluate visibility for each field
+	let visibleFields = $derived(
+		resolvedFields.filter(field => {
+			if (!field.meta.rules?.visibleWhen) return true;
+			return evaluateRule(field.meta.rules.visibleWhen, values, resolvedContext);
+		})
+	);
+
+	// Group visible fields
+	let groupedFields = $derived(groupFields(visibleFields, manifest.groups));
+
+	// Track which groups are collapsed
+	let collapsedGroups = $state<Set<string>>(new Set());
+
+	// Get value at dot-notation path
+	function getValueAtPath(path: string): unknown {
+		if (path in values) return values[path];
+		const parts = path.split('.');
+		let current: unknown = values;
+		for (const part of parts) {
+			if (current == null || typeof current !== 'object') return undefined;
+			current = (current as Record<string, unknown>)[part];
+		}
+		return current;
+	}
+
+	// Set value at dot-notation path
+	function setValueAtPath(path: string, value: unknown): void {
+		if (!path.includes('.')) {
+			values = { ...values, [path]: value };
+			return;
+		}
+
+		const parts = path.split('.');
+		const newValues = { ...values };
+		let current: Record<string, unknown> = newValues;
+
+		for (let i = 0; i < parts.length - 1; i++) {
+			const part = parts[i];
+			if (typeof current[part] !== 'object' || current[part] === null) {
+				current[part] = {};
+			}
+			current = { ...(current[part] as Record<string, unknown>) };
+			newValues[parts.slice(0, i + 1).join('.')] = current;
+		}
+
+		current[parts[parts.length - 1]] = value;
+		values = newValues;
+	}
+
+	// Validate a single field
+	function validateField(field: ResolvedField, value: unknown): string | null {
+		// Check required
+		const isRequired = field.meta.defaults?.base === undefined &&
+			!field.meta.rules?.visibleWhen; // Simple heuristic
+
+		if (isRequired && (value === undefined || value === null || value === '')) {
+			return `${field.meta.ui.label || field.key} is required`;
+		}
+
+		// Run Zod validation if schema available
+		if (field.fieldSchema) {
+			const result = field.fieldSchema.safeParse(value);
+			if (!result.success) {
+				return result.error.errors[0]?.message || 'Invalid value';
+			}
+		}
+
+		return null;
+	}
+
+	// Handle field change
+	function handleFieldChange(field: ResolvedField, value: unknown) {
+		if (readonly) return;
+
+		setValueAtPath(field.key, value);
+		touched[field.key] = true;
+
+		// Validate immediately
+		const error = validateField(field, value);
+		errors[field.key] = error || '';
+
+		onChange?.(values, field.key);
+	}
+
+	// Validate entire form
+	function validateForm(): ValidationError[] {
+		const formErrors: ValidationError[] = [];
+
+		for (const field of visibleFields) {
+			const value = getValueAtPath(field.key);
+			const error = validateField(field, value);
+			if (error) {
+				errors[field.key] = error;
+				formErrors.push({ field: field.key, message: error });
+			}
+		}
+
+		return formErrors;
+	}
+
+	// Handle form submission
+	async function handleSubmit(e: SubmitEvent) {
+		e.preventDefault();
+		submitError = null;
+
+		const validationErrors = validateForm();
+
+		if (validationErrors.length > 0) {
+			onValidationError?.(validationErrors);
+			return;
+		}
+
+		submitting = true;
+		try {
+			await onSubmit?.(values);
+		} catch (err) {
+			submitError = err instanceof Error ? err.message : 'Submission failed';
+		} finally {
+			submitting = false;
+		}
+	}
+
+	// Toggle group collapse
+	function toggleGroup(groupId: string) {
+		const newCollapsed = new Set(collapsedGroups);
+		if (newCollapsed.has(groupId)) {
+			newCollapsed.delete(groupId);
+		} else {
+			newCollapsed.add(groupId);
+		}
+		collapsedGroups = newCollapsed;
+	}
+
+	// Get input type based on field metadata
+	function getInputType(field: ResolvedField): string {
+		if (field.meta.ui.component === 'password' || field.key.includes('password') || field.key.includes('secret')) {
+			return 'password';
+		}
+		if (field.meta.ui.component === 'email' || field.key.includes('email')) {
+			return 'email';
+		}
+		if (field.meta.ui.component === 'url' || field.key.includes('url') || field.key.includes('endpoint')) {
+			return 'url';
+		}
+		if (field.meta.ui.component === 'number' || field.meta.ui.component === 'slider') {
+			return 'number';
+		}
+		return 'text';
+	}
+</script>
+
+<form onsubmit={handleSubmit} class="manifest-form">
+	{#if submitError}
+		<div class="form-error" role="alert">
+			{submitError}
+		</div>
+	{/if}
+
+	<!-- Render children first if provided -->
+	{#if children}
+		<div class="form-children">
+			{@render children()}
+		</div>
+	{/if}
+
+	<!-- Render field groups -->
+	{#if manifest.groups && manifest.groups.length > 0}
+		{#each manifest.groups as group (group.id)}
+			{@const groupFields = groupedFields.get(group.id) || []}
+			{#if groupFields.length > 0}
+				<fieldset class="field-group" class:collapsed={collapsedGroups.has(group.id)}>
+					{#if group.label}
+						<legend class="group-legend">
+							{#if group.collapsible}
+								<button
+									type="button"
+									class="collapse-toggle"
+									onclick={() => toggleGroup(group.id)}
+									aria-expanded={!collapsedGroups.has(group.id)}
+								>
+									<span class="toggle-icon">
+										{collapsedGroups.has(group.id) ? '▶' : '▼'}
+									</span>
+									{#if group.icon}
+										<span class="group-icon">{group.icon}</span>
+									{/if}
+									<span class="group-title">{group.label}</span>
+								</button>
+							{:else}
+								<span class="group-title-static">
+									{#if group.icon}
+										<span class="group-icon">{group.icon}</span>
+									{/if}
+									{group.label}
+								</span>
+							{/if}
+						</legend>
+					{/if}
+
+					{#if !collapsedGroups.has(group.id)}
+						{#if group.description}
+							<p class="group-description">{group.description}</p>
+						{/if}
+
+						<div class="group-fields">
+							{#each groupFields as field (field.key)}
+								{@const fieldError = errors[field.key]}
+								{@const fieldValue = getValueAtPath(field.key)}
+								{@const inputType = getInputType(field)}
+								{@const CustomComponent = fieldComponents[field.key]}
+
+								<div
+									class="field-wrapper"
+									class:has-error={fieldError}
+									class:required={field.meta.defaults?.base === undefined}
+									data-field={field.key}
+								>
+									<label class="field-label" for={`field-${field.key}`}>
+										{field.meta.ui.label}
+										{#if field.meta.ui.description}
+											<span class="field-description" title={field.meta.ui.description}>
+												ⓘ
+											</span>
+										{/if}
+									</label>
+
+									{#if CustomComponent}
+										<CustomComponent
+											value={fieldValue}
+											onChange={(v: unknown) => handleFieldChange(field, v)}
+											disabled={readonly || field.disabled}
+										/>
+									{:else if field.meta.options && field.meta.options.length > 0}
+										<!-- Select/Radio for options -->
+										{#if field.meta.options.length <= 4 && field.meta.ui.component !== 'select'}
+											<div class="radio-group">
+												{#each field.meta.options as option (option.value)}
+													<label class="radio-label">
+														<input
+															type="radio"
+															name={field.key}
+															value={option.value}
+															checked={fieldValue === option.value}
+															onchange={(e) => handleFieldChange(field, e.currentTarget.value)}
+															disabled={readonly || field.disabled}
+														/>
+														<span>{option.label}</span>
+													</label>
+												{/each}
+											</div>
+										{:else}
+											<select
+												id={`field-${field.key}`}
+												value={fieldValue as string | number}
+												onchange={(e) => handleFieldChange(field, e.currentTarget.value)}
+												disabled={readonly || field.disabled}
+												class="field-select"
+											>
+												<option value="">Select...</option>
+												{#each field.meta.options as option (option.value)}
+													<option value={option.value}>{option.label}</option>
+												{/each}
+											</select>
+										{/if}
+									{:else if field.meta.ui.component === 'checkbox' || field.meta.ui.component === 'toggle'}
+										<label class="checkbox-label">
+											<input
+												type="checkbox"
+												checked={!!fieldValue}
+												onchange={(e) => handleFieldChange(field, e.currentTarget.checked)}
+												disabled={readonly || field.disabled}
+											/>
+											<span>{field.meta.ui.label}</span>
+										</label>
+									{:else if field.meta.ui.component === 'textarea'}
+										<textarea
+											id={`field-${field.key}`}
+											value={fieldValue as string || ''}
+											oninput={(e) => handleFieldChange(field, e.currentTarget.value)}
+											disabled={readonly || field.disabled}
+											placeholder={field.meta.ui.placeholder || ''}
+											class="field-textarea"
+											rows={4}
+										></textarea>
+									{:else}
+										<!-- Default: text input -->
+										<input
+											id={`field-${field.key}`}
+											type={inputType}
+											value={fieldValue as string | number || ''}
+											oninput={(e) => handleFieldChange(field, e.currentTarget.value)}
+											disabled={readonly || field.disabled}
+											placeholder={field.meta.ui.placeholder || ''}
+											class="field-input"
+										/>
+									{/if}
+
+									{#if fieldError}
+										<span class="field-error" role="alert">
+											{fieldError}
+										</span>
+									{/if}
+
+									{#if field.meta.ui.helpText}
+										<span class="field-help">{field.meta.ui.helpText}</span>
+									{/if}
+								</div>
+							{/each}
+						</div>
+					{/if}
+				</fieldset>
+			{/if}
+		{/each}
+
+		<!-- Ungrouped fields -->
+		{@const ungroupedFields = groupedFields.get(undefined) || []}
+		{#if ungroupedFields.length > 0}
+			<div class="ungrouped-fields">
+				{#each ungroupedFields as field (field.key)}
+					{@const fieldError = errors[field.key]}
+					{@const fieldValue = getValueAtPath(field.key)}
+					{@const inputType = getInputType(field)}
+					{@const CustomComponent = fieldComponents[field.key]}
+
+					<div
+						class="field-wrapper"
+						class:has-error={fieldError}
+						class:required={field.meta.defaults?.base === undefined}
+						data-field={field.key}
+					>
+						<label class="field-label" for={`field-${field.key}`}>
+							{field.meta.ui.label}
+							{#if field.meta.ui.description}
+								<span class="field-description" title={field.meta.ui.description}>
+									ⓘ
+								</span>
+							{/if}
+						</label>
+
+						{#if CustomComponent}
+							<CustomComponent
+								value={fieldValue}
+								onChange={(v: unknown) => handleFieldChange(field, v)}
+								disabled={readonly || field.disabled}
+							/>
+						{:else if field.meta.options && field.meta.options.length > 0}
+							{#if field.meta.options.length <= 4 && field.meta.ui.component !== 'select'}
+								<div class="radio-group">
+									{#each field.meta.options as option (option.value)}
+										<label class="radio-label">
+											<input
+												type="radio"
+												name={field.key}
+												value={option.value}
+												checked={fieldValue === option.value}
+												onchange={(e) => handleFieldChange(field, e.currentTarget.value)}
+												disabled={readonly || field.disabled}
+											/>
+											<span>{option.label}</span>
+										</label>
+									{/each}
+								</div>
+							{:else}
+								<select
+									id={`field-${field.key}`}
+									value={fieldValue as string | number}
+									onchange={(e) => handleFieldChange(field, e.currentTarget.value)}
+									disabled={readonly || field.disabled}
+									class="field-select"
+								>
+									<option value="">Select...</option>
+									{#each field.meta.options as option (option.value)}
+										<option value={option.value}>{option.label}</option>
+									{/each}
+								</select>
+							{/if}
+						{:else if field.meta.ui.component === 'checkbox' || field.meta.ui.component === 'toggle'}
+							<label class="checkbox-label">
+								<input
+									type="checkbox"
+									checked={!!fieldValue}
+									onchange={(e) => handleFieldChange(field, e.currentTarget.checked)}
+									disabled={readonly || field.disabled}
+								/>
+								<span>{field.meta.ui.label}</span>
+							</label>
+						{:else if field.meta.ui.component === 'textarea'}
+							<textarea
+								id={`field-${field.key}`}
+								value={fieldValue as string || ''}
+								oninput={(e) => handleFieldChange(field, e.currentTarget.value)}
+								disabled={readonly || field.disabled}
+								placeholder={field.meta.ui.placeholder || ''}
+								class="field-textarea"
+								rows={4}
+							></textarea>
+						{:else}
+							<input
+								id={`field-${field.key}`}
+								type={inputType}
+								value={fieldValue as string | number || ''}
+								oninput={(e) => handleFieldChange(field, e.currentTarget.value)}
+								disabled={readonly || field.disabled}
+								placeholder={field.meta.ui.placeholder || ''}
+								class="field-input"
+							/>
+						{/if}
+
+						{#if fieldError}
+							<span class="field-error" role="alert">
+								{fieldError}
+							</span>
+						{/if}
+
+						{#if field.meta.ui.helpText}
+							<span class="field-help">{field.meta.ui.helpText}</span>
+						{/if}
+					</div>
+				{/each}
+			</div>
+		{/if}
+	{:else}
+		<!-- No groups defined - render all visible fields flat -->
+		<div class="form-fields">
+			{#each visibleFields as field (field.key)}
+				{@const fieldError = errors[field.key]}
+				{@const fieldValue = getValueAtPath(field.key)}
+				{@const inputType = getInputType(field)}
+				{@const CustomComponent = fieldComponents[field.key]}
+
+				<div
+					class="field-wrapper"
+					class:has-error={fieldError}
+					class:required={field.meta.defaults?.base === undefined}
+					data-field={field.key}
+				>
+					<label class="field-label" for={`field-${field.key}`}>
+						{field.meta.ui.label}
+						{#if field.meta.ui.description}
+							<span class="field-description" title={field.meta.ui.description}>
+								ⓘ
+							</span>
+						{/if}
+					</label>
+
+					{#if CustomComponent}
+						<CustomComponent
+							value={fieldValue}
+							onChange={(v: unknown) => handleFieldChange(field, v)}
+							disabled={readonly || field.disabled}
+						/>
+					{:else if field.meta.options && field.meta.options.length > 0}
+						{#if field.meta.options.length <= 4 && field.meta.ui.component !== 'select'}
+							<div class="radio-group">
+								{#each field.meta.options as option (option.value)}
+									<label class="radio-label">
+										<input
+											type="radio"
+											name={field.key}
+											value={option.value}
+											checked={fieldValue === option.value}
+											onchange={(e) => handleFieldChange(field, e.currentTarget.value)}
+											disabled={readonly || field.disabled}
+										/>
+										<span>{option.label}</span>
+									</label>
+								{/each}
+							</div>
+						{:else}
+							<select
+								id={`field-${field.key}`}
+								value={fieldValue as string | number}
+								onchange={(e) => handleFieldChange(field, e.currentTarget.value)}
+								disabled={readonly || field.disabled}
+								class="field-select"
+							>
+								<option value="">Select...</option>
+								{#each field.meta.options as option (option.value)}
+									<option value={option.value}>{option.label}</option>
+								{/each}
+							</select>
+						{/if}
+					{:else if field.meta.ui.component === 'checkbox' || field.meta.ui.component === 'toggle'}
+						<label class="checkbox-label">
+							<input
+								type="checkbox"
+								checked={!!fieldValue}
+								onchange={(e) => handleFieldChange(field, e.currentTarget.checked)}
+								disabled={readonly || field.disabled}
+							/>
+							<span>{field.meta.ui.label}</span>
+						</label>
+					{:else if field.meta.ui.component === 'textarea'}
+						<textarea
+							id={`field-${field.key}`}
+							value={fieldValue as string || ''}
+							oninput={(e) => handleFieldChange(field, e.currentTarget.value)}
+							disabled={readonly || field.disabled}
+							placeholder={field.meta.ui.placeholder || ''}
+							class="field-textarea"
+							rows={4}
+						></textarea>
+					{:else}
+						<input
+							id={`field-${field.key}`}
+							type={inputType}
+							value={fieldValue as string | number || ''}
+							oninput={(e) => handleFieldChange(field, e.currentTarget.value)}
+							disabled={readonly || field.disabled}
+							placeholder={field.meta.ui.placeholder || ''}
+							class="field-input"
+						/>
+					{/if}
+
+					{#if fieldError}
+						<span class="field-error" role="alert">
+							{fieldError}
+						</span>
+					{/if}
+
+					{#if field.meta.ui.helpText}
+						<span class="field-help">{field.meta.ui.helpText}</span>
+					{/if}
+				</div>
+			{/each}
+		</div>
+	{/if}
+</form>
+
+<style>
+	.manifest-form {
+		display: flex;
+		flex-direction: column;
+		gap: 1.5rem;
+	}
+
+	.form-error {
+		padding: 0.75rem 1rem;
+		background: #fee2e2;
+		border: 1px solid #ef4444;
+		border-radius: 0.375rem;
+		color: #991b1b;
+		font-size: 0.875rem;
+	}
+
+	.form-children {
+		margin-bottom: 1rem;
+	}
+
+	.field-group {
+		border: 1px solid #e5e7eb;
+		border-radius: 0.5rem;
+		padding: 1rem;
+		margin: 0;
+	}
+
+	.group-legend {
+		font-weight: 600;
+		padding: 0 0.5rem;
+	}
+
+	.group-title-static,
+	.collapse-toggle {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		font-size: 1rem;
+	}
+
+	.collapse-toggle {
+		background: none;
+		border: none;
+		cursor: pointer;
+		padding: 0;
+		font: inherit;
+		color: inherit;
+	}
+
+	.toggle-icon {
+		font-size: 0.75rem;
+	}
+
+	.group-icon {
+		font-size: 1.25rem;
+	}
+
+	.group-description {
+		margin: 0.5rem 0 1rem;
+		font-size: 0.875rem;
+		color: #6b7280;
+	}
+
+	.group-fields,
+	.ungrouped-fields,
+	.form-fields {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+
+	.field-wrapper {
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+	}
+
+	.field-wrapper.has-error .field-input,
+	.field-wrapper.has-error .field-select,
+	.field-wrapper.has-error .field-textarea {
+		border-color: #ef4444;
+	}
+
+	.field-wrapper.required .field-label::after {
+		content: ' *';
+		color: #ef4444;
+	}
+
+	.field-label {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+		font-weight: 500;
+		font-size: 0.875rem;
+	}
+
+	.field-description {
+		cursor: help;
+		color: #6b7280;
+	}
+
+	.field-input,
+	.field-select,
+	.field-textarea {
+		padding: 0.5rem 0.75rem;
+		border: 1px solid #d1d5db;
+		border-radius: 0.375rem;
+		font-size: 0.875rem;
+		background: white;
+		transition: border-color 0.15s;
+	}
+
+	.field-input:focus,
+	.field-select:focus,
+	.field-textarea:focus {
+		outline: none;
+		border-color: #3b82f6;
+		box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+	}
+
+	.field-input:disabled,
+	.field-select:disabled,
+	.field-textarea:disabled {
+		background: #f3f4f6;
+		cursor: not-allowed;
+	}
+
+	.field-textarea {
+		resize: vertical;
+		min-height: 6rem;
+	}
+
+	.field-error {
+		font-size: 0.75rem;
+		color: #ef4444;
+	}
+
+	.field-help {
+		font-size: 0.75rem;
+		color: #6b7280;
+	}
+
+	.radio-group {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 1rem;
+	}
+
+	.radio-label {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		font-size: 0.875rem;
+		cursor: pointer;
+	}
+
+	.radio-label input {
+		cursor: pointer;
+	}
+
+	.checkbox-label {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		font-size: 0.875rem;
+		cursor: pointer;
+	}
+
+	.checkbox-label input {
+		cursor: pointer;
+	}
+
+	/* Dark mode support */
+	@media (prefers-color-scheme: dark) {
+		.form-error {
+			background: #450a0a;
+			border-color: #b91c1c;
+			color: #fecaca;
+		}
+
+		.field-group {
+			border-color: #374151;
+		}
+
+		.field-input,
+		.field-select,
+		.field-textarea {
+			background: #1f2937;
+			border-color: #4b5563;
+			color: #f9fafb;
+		}
+
+		.field-input:disabled,
+		.field-select:disabled,
+		.field-textarea:disabled {
+			background: #111827;
+		}
+
+		.field-description,
+		.field-help,
+		.group-description {
+			color: #9ca3af;
+		}
+	}
+</style>