@d34dman/flowdrop 0.0.37 → 0.0.39

package/dist/components/interrupt/ConfirmationPrompt.svelte

@@ -0,0 +1,280 @@
+<!--
+  ConfirmationPrompt Component
+  
+  Renders a Yes/No confirmation prompt for confirmation-type interrupts.
+  Displays the message and two action buttons with customizable labels.
+  Shows the selected response when resolved.
+  Styled with BEM syntax.
+-->
+
+<script lang="ts">
+	import Icon from '@iconify/svelte';
+	import type { ConfirmationConfig } from '../../types/interrupt.js';
+
+	/**
+	 * Component props
+	 */
+	interface Props {
+		/** Confirmation configuration from the interrupt */
+		config: ConfirmationConfig;
+		/** Whether this interrupt has been resolved */
+		isResolved: boolean;
+		/** The resolved value (true/false) if resolved */
+		resolvedValue?: boolean;
+		/** Whether the form is currently submitting */
+		isSubmitting: boolean;
+		/** Error message if submission failed */
+		error?: string;
+		/** Callback when user confirms (Yes) */
+		onConfirm: () => void;
+		/** Callback when user declines (No) */
+		onDecline: () => void;
+	}
+
+	let { config, isResolved, resolvedValue, isSubmitting, error, onConfirm, onDecline }: Props =
+		$props();
+
+	/** Computed label for confirm button */
+	const confirmLabel = $derived(config.confirmLabel ?? 'Yes');
+
+	/** Computed label for decline/cancel button */
+	const declineLabel = $derived(config.cancelLabel ?? 'No');
+</script>
+
+<div
+	class="confirmation-prompt"
+	class:confirmation-prompt--resolved={isResolved}
+	class:confirmation-prompt--submitting={isSubmitting}
+>
+	<!-- Message -->
+	<p class="confirmation-prompt__message">{config.message}</p>
+
+	<!-- Error message -->
+	{#if error}
+		<div class="confirmation-prompt__error">
+			<Icon icon="mdi:alert-circle" />
+			<span>{error}</span>
+		</div>
+	{/if}
+
+	<!-- Actions -->
+	<div class="confirmation-prompt__actions">
+		<button
+			type="button"
+			class="confirmation-prompt__button confirmation-prompt__button--decline"
+			class:confirmation-prompt__button--selected={isResolved && resolvedValue === false}
+			class:confirmation-prompt__button--not-selected={isResolved && resolvedValue !== false}
+			onclick={onDecline}
+			disabled={isResolved || isSubmitting}
+			aria-label={declineLabel}
+		>
+			{#if isSubmitting && !isResolved}
+				<span class="confirmation-prompt__spinner"></span>
+			{:else if isResolved && resolvedValue === false}
+				<Icon icon="mdi:check-circle" />
+			{:else if isResolved}
+				<!-- Not selected - show dimmed X icon -->
+				<Icon icon="mdi:close" />
+			{:else}
+				<Icon icon="mdi:close" />
+			{/if}
+			<span>{declineLabel}</span>
+		</button>
+
+		<button
+			type="button"
+			class="confirmation-prompt__button confirmation-prompt__button--confirm"
+			class:confirmation-prompt__button--selected={isResolved && resolvedValue === true}
+			class:confirmation-prompt__button--not-selected={isResolved && resolvedValue !== true}
+			onclick={onConfirm}
+			disabled={isResolved || isSubmitting}
+			aria-label={confirmLabel}
+		>
+			{#if isSubmitting && !isResolved}
+				<span class="confirmation-prompt__spinner"></span>
+			{:else if isResolved && resolvedValue === true}
+				<Icon icon="mdi:check-circle" />
+			{:else if isResolved}
+				<!-- Not selected - show dimmed check icon -->
+				<Icon icon="mdi:check" />
+			{:else}
+				<Icon icon="mdi:check" />
+			{/if}
+			<span>{confirmLabel}</span>
+		</button>
+	</div>
+
+	<!-- Resolved indicator -->
+	{#if isResolved}
+		<div class="confirmation-prompt__resolved-badge">
+			<Icon icon="mdi:check-circle" />
+			<span>Response submitted</span>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.confirmation-prompt {
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+	}
+
+	.confirmation-prompt--resolved {
+		opacity: 0.85;
+	}
+
+	.confirmation-prompt--submitting {
+		pointer-events: none;
+	}
+
+	.confirmation-prompt__message {
+		margin: 0;
+		font-size: 0.9375rem;
+		line-height: 1.5;
+		color: var(--color-ref-gray-800, #1f2937);
+	}
+
+	.confirmation-prompt__error {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+		padding: 0.5rem 0.75rem;
+		background-color: var(--color-ref-red-50, #fef2f2);
+		border-radius: 0.375rem;
+		color: var(--color-ref-red-600, #dc2626);
+		font-size: 0.8125rem;
+	}
+
+	.confirmation-prompt__actions {
+		display: flex;
+		gap: 0.75rem;
+		flex-wrap: wrap;
+	}
+
+	.confirmation-prompt__button {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.5rem;
+		padding: 0.625rem 1.25rem;
+		border-radius: 0.5rem;
+		font-size: 0.875rem;
+		font-weight: 600;
+		font-family: inherit;
+		cursor: pointer;
+		transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+		border: 1px solid transparent;
+		min-height: 2.5rem;
+		min-width: 100px;
+	}
+
+	.confirmation-prompt__button:disabled {
+		cursor: not-allowed;
+	}
+
+	/* Uses design tokens from base.css: --flowdrop-interrupt-* */
+	.confirmation-prompt__button--decline {
+		background-color: var(--flowdrop-interrupt-btn-secondary-bg);
+		border-color: var(--flowdrop-interrupt-btn-secondary-border);
+		color: var(--flowdrop-interrupt-btn-secondary-text);
+	}
+
+	.confirmation-prompt__button--decline:hover:not(:disabled) {
+		background-color: var(--color-ref-gray-200, #e5e7eb);
+		border-color: var(--color-ref-gray-400, #9ca3af);
+	}
+
+	.confirmation-prompt__button--decline:disabled {
+		opacity: 0.6;
+	}
+
+	/* Non-selected decline button when resolved - very dimmed */
+	.confirmation-prompt__button--decline.confirmation-prompt__button--not-selected {
+		opacity: var(--flowdrop-interrupt-not-selected-opacity);
+		background-color: var(--color-ref-gray-50, #f9fafb);
+		border-color: var(--color-ref-gray-200, #e5e7eb);
+		color: var(--color-ref-gray-400, #9ca3af);
+	}
+
+	/* Selected decline button - highlighted with border and background */
+	.confirmation-prompt__button--decline.confirmation-prompt__button--selected {
+		opacity: 1;
+		background-color: var(--flowdrop-interrupt-selected-decline-bg);
+		border-color: var(--flowdrop-interrupt-selected-decline-border);
+		border-width: 2px;
+		color: var(--flowdrop-interrupt-selected-decline-text);
+		box-shadow: 0 0 0 3px var(--flowdrop-interrupt-selected-decline-glow);
+	}
+
+	.confirmation-prompt__button--confirm {
+		background: var(--flowdrop-interrupt-btn-primary-bg);
+		color: #ffffff;
+		box-shadow: 0 1px 3px var(--flowdrop-interrupt-btn-primary-shadow);
+	}
+
+	.confirmation-prompt__button--confirm:hover:not(:disabled) {
+		background: var(--flowdrop-interrupt-btn-primary-bg-hover);
+		box-shadow: 0 4px 12px var(--flowdrop-interrupt-btn-primary-shadow);
+		transform: translateY(-1px);
+	}
+
+	.confirmation-prompt__button--confirm:disabled {
+		opacity: 0.6;
+		transform: none;
+		box-shadow: none;
+	}
+
+	/* Non-selected confirm button when resolved - very dimmed */
+	.confirmation-prompt__button--confirm.confirmation-prompt__button--not-selected {
+		opacity: var(--flowdrop-interrupt-not-selected-opacity);
+		background: var(--color-ref-gray-200, #e5e7eb);
+		color: var(--color-ref-gray-400, #9ca3af);
+		box-shadow: none;
+	}
+
+	/* Selected confirm button - highlighted with glow */
+	.confirmation-prompt__button--confirm.confirmation-prompt__button--selected {
+		opacity: 1;
+		background: var(--flowdrop-interrupt-selected-confirm-bg);
+		border-width: 2px;
+		border-color: var(--flowdrop-interrupt-selected-confirm-border);
+		box-shadow:
+			0 0 0 3px var(--flowdrop-interrupt-selected-confirm-glow),
+			0 2px 8px var(--flowdrop-interrupt-btn-primary-shadow);
+	}
+
+	.confirmation-prompt__spinner {
+		width: 1rem;
+		height: 1rem;
+		border: 2px solid rgba(255, 255, 255, 0.3);
+		border-top-color: currentColor;
+		border-radius: 50%;
+		animation: confirmation-spin 0.6s linear infinite;
+	}
+
+	.confirmation-prompt__button--decline .confirmation-prompt__spinner {
+		border-color: rgba(55, 65, 81, 0.3);
+		border-top-color: #374151;
+	}
+
+	@keyframes confirmation-spin {
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	/* Resolved badge - neutral blue theme */
+	.confirmation-prompt__resolved-badge {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.375rem;
+		padding: 0.375rem 0.75rem;
+		background-color: var(--flowdrop-interrupt-badge-completed-bg);
+		border-radius: 9999px;
+		color: var(--flowdrop-interrupt-badge-completed-text);
+		font-size: 0.75rem;
+		font-weight: 500;
+		align-self: flex-start;
+	}
+</style>

package/dist/components/interrupt/ConfirmationPrompt.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { ConfirmationConfig } from '../../types/interrupt.js';
+/**
+ * Component props
+ */
+interface Props {
+    /** Confirmation configuration from the interrupt */
+    config: ConfirmationConfig;
+    /** Whether this interrupt has been resolved */
+    isResolved: boolean;
+    /** The resolved value (true/false) if resolved */
+    resolvedValue?: boolean;
+    /** Whether the form is currently submitting */
+    isSubmitting: boolean;
+    /** Error message if submission failed */
+    error?: string;
+    /** Callback when user confirms (Yes) */
+    onConfirm: () => void;
+    /** Callback when user declines (No) */
+    onDecline: () => void;
+}
+declare const ConfirmationPrompt: import("svelte").Component<Props, {}, "">;
+type ConfirmationPrompt = ReturnType<typeof ConfirmationPrompt>;
+export default ConfirmationPrompt;

package/dist/components/interrupt/FormPrompt.svelte

@@ -0,0 +1,223 @@
+<!--
+  FormPrompt Component
+  
+  Renders a JSON Schema-based form for form-type interrupts.
+  Wraps the existing SchemaForm component for consistent form handling.
+  Shows the submitted form data when resolved.
+  Styled with BEM syntax.
+-->
+
+<script lang="ts">
+	import Icon from '@iconify/svelte';
+	import SchemaForm from '../SchemaForm.svelte';
+	import type { FormConfig } from '../../types/interrupt.js';
+
+	/**
+	 * Component props
+	 */
+	interface Props {
+		/** Form configuration from the interrupt */
+		config: FormConfig;
+		/** Whether this interrupt has been resolved */
+		isResolved: boolean;
+		/** The resolved form values if resolved */
+		resolvedValue?: Record<string, unknown>;
+		/** Whether the form is currently submitting */
+		isSubmitting: boolean;
+		/** Error message if submission failed */
+		error?: string;
+		/** Callback when user submits form */
+		onSubmit: (value: Record<string, unknown>) => void;
+	}
+
+	let { config, isResolved, resolvedValue, isSubmitting, error, onSubmit }: Props = $props();
+
+	/** Local state for form values */
+	let formValues = $state<Record<string, unknown>>(config.defaultValues ?? {});
+
+	/** Display values - either resolved or current form values */
+	const displayValues = $derived(isResolved ? (resolvedValue ?? {}) : formValues);
+
+	/**
+	 * Handle form value changes
+	 */
+	function handleChange(values: Record<string, unknown>): void {
+		if (isResolved || isSubmitting) return;
+		formValues = values;
+	}
+
+	/**
+	 * Handle form submission
+	 */
+	function handleSave(values: Record<string, unknown>): void {
+		if (isResolved || isSubmitting) return;
+		onSubmit(values);
+	}
+
+	/**
+	 * Format resolved value for display
+	 */
+	function formatResolvedValue(value: unknown): string {
+		if (value === null || value === undefined) return '—';
+		if (typeof value === 'boolean') return value ? 'Yes' : 'No';
+		if (typeof value === 'object') return JSON.stringify(value, null, 2);
+		return String(value);
+	}
+</script>
+
+<div
+	class="form-prompt"
+	class:form-prompt--resolved={isResolved}
+	class:form-prompt--submitting={isSubmitting}
+>
+	<!-- Message -->
+	<p class="form-prompt__message">{config.message}</p>
+
+	<!-- Error message -->
+	{#if error}
+		<div class="form-prompt__error">
+			<Icon icon="mdi:alert-circle" />
+			<span>{error}</span>
+		</div>
+	{/if}
+
+	<!-- Form -->
+	{#if !isResolved}
+		<div class="form-prompt__form-wrapper">
+			<SchemaForm
+				schema={config.schema}
+				values={formValues}
+				onChange={handleChange}
+				onSave={handleSave}
+				showActions={true}
+				saveLabel="Submit"
+				cancelLabel=""
+				loading={isSubmitting}
+				disabled={isResolved}
+			/>
+		</div>
+	{:else}
+		<!-- Resolved state: Show submitted values as read-only -->
+		<div class="form-prompt__resolved-values">
+			<h4 class="form-prompt__resolved-title">Submitted Values</h4>
+			<div class="form-prompt__values-list">
+				{#each Object.entries(config.schema.properties ?? {}) as [key, field]}
+					{@const value = displayValues[key]}
+					{@const fieldTitle = ((field as Record<string, unknown>).title as string) ?? key}
+					<div class="form-prompt__value-item">
+						<span class="form-prompt__value-label">{fieldTitle}</span>
+						<span class="form-prompt__value-content">
+							{formatResolvedValue(value)}
+						</span>
+					</div>
+				{/each}
+			</div>
+		</div>
+	{/if}
+
+	<!-- Resolved indicator -->
+	{#if isResolved}
+		<div class="form-prompt__resolved-badge">
+			<Icon icon="mdi:check-circle" />
+			<span>Response submitted</span>
+		</div>
+	{/if}
+</div>
+
+<style>
+	/* Uses design tokens from base.css: --flowdrop-interrupt-*, --color-ref-* */
+	.form-prompt {
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+	}
+
+	.form-prompt--resolved {
+		opacity: 0.85;
+	}
+
+	.form-prompt--submitting {
+		pointer-events: none;
+	}
+
+	.form-prompt__message {
+		margin: 0;
+		font-size: 0.9375rem;
+		line-height: 1.5;
+		color: var(--color-ref-gray-800, #1f2937);
+	}
+
+	.form-prompt__error {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+		padding: 0.5rem 0.75rem;
+		background-color: var(--color-ref-red-50, #fef2f2);
+		border-radius: 0.375rem;
+		color: var(--color-ref-red-600, #dc2626);
+		font-size: 0.8125rem;
+	}
+
+	.form-prompt__form-wrapper {
+		background-color: var(--color-ref-gray-50, #f9fafb);
+		border: 1px solid var(--color-ref-gray-200, #e5e7eb);
+		border-radius: 0.5rem;
+		padding: 1rem;
+	}
+
+	/* Resolved values - neutral blue theme */
+	.form-prompt__resolved-values {
+		background-color: var(--color-ref-blue-50, #eff6ff);
+		border: 1px solid var(--flowdrop-interrupt-completed-border);
+		border-radius: 0.5rem;
+		padding: 1rem;
+	}
+
+	.form-prompt__resolved-title {
+		margin: 0 0 0.75rem 0;
+		font-size: 0.8125rem;
+		font-weight: 600;
+		color: var(--flowdrop-interrupt-badge-completed-text);
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+	}
+
+	.form-prompt__values-list {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+
+	.form-prompt__value-item {
+		display: flex;
+		flex-direction: column;
+		gap: 0.125rem;
+	}
+
+	.form-prompt__value-label {
+		font-size: 0.75rem;
+		font-weight: 500;
+		color: var(--color-ref-gray-500, #6b7280);
+	}
+
+	.form-prompt__value-content {
+		font-size: 0.875rem;
+		color: var(--color-ref-gray-800, #1f2937);
+		word-break: break-word;
+		white-space: pre-wrap;
+	}
+
+	/* Resolved badge - neutral blue theme */
+	.form-prompt__resolved-badge {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.375rem;
+		padding: 0.375rem 0.75rem;
+		background-color: var(--flowdrop-interrupt-badge-completed-bg);
+		border-radius: 9999px;
+		color: var(--flowdrop-interrupt-badge-completed-text);
+		font-size: 0.75rem;
+		font-weight: 500;
+		align-self: flex-start;
+	}
+</style>

package/dist/components/interrupt/FormPrompt.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { FormConfig } from '../../types/interrupt.js';
+/**
+ * Component props
+ */
+interface Props {
+    /** Form configuration from the interrupt */
+    config: FormConfig;
+    /** Whether this interrupt has been resolved */
+    isResolved: boolean;
+    /** The resolved form values if resolved */
+    resolvedValue?: Record<string, unknown>;
+    /** Whether the form is currently submitting */
+    isSubmitting: boolean;
+    /** Error message if submission failed */
+    error?: string;
+    /** Callback when user submits form */
+    onSubmit: (value: Record<string, unknown>) => void;
+}
+declare const FormPrompt: import("svelte").Component<Props, {}, "">;
+type FormPrompt = ReturnType<typeof FormPrompt>;
+export default FormPrompt;