@d34dman/flowdrop 0.0.44 → 0.0.46

package/dist/components/form/FormField.svelte

@@ -61,6 +61,11 @@
 
 	let { fieldKey, schema, value, required = false, animationIndex = 0, onChange }: Props = $props();
 
+	/**
+	 * When schema.readOnly is true, disable all inputs (no editing).
+	 */
+	const isReadOnly = $derived(schema.readOnly === true);
+
 	/**
 	 * Computed description ID for ARIA association
 	 */
@@ -204,7 +209,7 @@
 			}
 			return value ? [String(value)] : [];
 		}
-		return String(value ?? "");
+		return String(value ?? '');
 	});
 </script>
 
@@ -222,6 +227,7 @@
 				value={arrayValue}
 				options={enumOptions}
 				ariaDescribedBy={descriptionId}
+				disabled={isReadOnly}
 				onChange={(val) => onChange(val)}
 			/>
 		{:else if fieldType === 'select-enum'}
@@ -231,6 +237,7 @@
 				options={enumOptions}
 				{required}
 				ariaDescribedBy={descriptionId}
+				disabled={isReadOnly}
 				onChange={(val) => onChange(val)}
 			/>
 		{:else if fieldType === 'textarea'}
@@ -240,6 +247,7 @@
 				placeholder={schema.placeholder ?? ''}
 				{required}
 				ariaDescribedBy={descriptionId}
+				disabled={isReadOnly}
 				onChange={(val) => onChange(val)}
 			/>
 		{:else if fieldType === 'text'}
@@ -249,6 +257,7 @@
 				placeholder={schema.placeholder ?? ''}
 				{required}
 				ariaDescribedBy={descriptionId}
+				disabled={isReadOnly}
 				onChange={(val) => onChange(val)}
 			/>
 		{:else if fieldType === 'number'}
@@ -261,6 +270,7 @@
 				step={schema.step}
 				{required}
 				ariaDescribedBy={descriptionId}
+				disabled={isReadOnly}
 				onChange={(val) => onChange(val)}
 			/>
 		{:else if fieldType === 'range'}
@@ -272,6 +282,7 @@
 				step={schema.step}
 				{required}
 				ariaDescribedBy={descriptionId}
+				disabled={isReadOnly}
 				onChange={(val) => onChange(val)}
 			/>
 		{:else if fieldType === 'toggle'}
@@ -279,6 +290,7 @@
 				id={fieldKey}
 				value={booleanValue}
 				ariaDescribedBy={descriptionId}
+				disabled={isReadOnly}
 				onChange={(val) => onChange(val)}
 			/>
 		{:else if fieldType === 'select-options'}
@@ -288,6 +300,7 @@
 				options={selectOptions}
 				{required}
 				ariaDescribedBy={descriptionId}
+				disabled={isReadOnly}
 				onChange={(val) => onChange(val)}
 			/>
 		{:else if fieldType === 'array' && schema.items}
@@ -298,6 +311,7 @@
 				minItems={schema.minItems}
 				maxItems={schema.maxItems}
 				addLabel={`Add ${schema.items.title ?? 'Item'}`}
+				disabled={isReadOnly}
 				onChange={(val) => onChange(val)}
 			/>
 		{:else if fieldType === 'code-editor'}
@@ -310,6 +324,7 @@
 				darkTheme={(schema.darkTheme as boolean | undefined) ?? false}
 				autoFormat={(schema.autoFormat as boolean | undefined) ?? true}
 				ariaDescribedBy={descriptionId}
+				disabled={isReadOnly}
 				onChange={(val) => onChange(val)}
 			/>
 		{:else if fieldType === 'markdown-editor'}
@@ -323,6 +338,7 @@
 				showStatusBar={(schema.showStatusBar as boolean | undefined) ?? true}
 				spellChecker={(schema.spellChecker as boolean | undefined) ?? false}
 				ariaDescribedBy={descriptionId}
+				disabled={isReadOnly}
 				onChange={(val) => onChange(val)}
 			/>
 		{:else if fieldType === 'template-editor'}
@@ -338,6 +354,7 @@
 				placeholderExample={(schema.placeholderExample as string | undefined) ??
 					'Hello {{ name }}, your order #{{ order_id }} is ready!'}
 				ariaDescribedBy={descriptionId}
+				disabled={isReadOnly}
 				onChange={(val) => onChange(val)}
 			/>
 		{:else if fieldType === 'autocomplete' && schema.autocomplete}
@@ -348,6 +365,7 @@
 				placeholder={schema.placeholder ?? ''}
 				{required}
 				ariaDescribedBy={descriptionId}
+				disabled={isReadOnly}
 				onChange={(val) => onChange(val)}
 			/>
 		{:else}
@@ -357,6 +375,7 @@
 				value={stringValue}
 				placeholder={schema.placeholder ?? ''}
 				ariaDescribedBy={descriptionId}
+				disabled={isReadOnly}
 				onChange={(val) => onChange(val)}
 			/>
 		{/if}

package/dist/components/form/FormMarkdownEditor.svelte

@@ -45,6 +45,8 @@
 		autosave?: boolean;
 		/** Autosave delay in milliseconds */
 		autosaveDelay?: number;
+		/** Whether the field is disabled (read-only) */
+		disabled?: boolean;
 		/** ARIA description ID */
 		ariaDescribedBy?: string;
 		/** Callback when value changes */
@@ -62,6 +64,7 @@
 		spellChecker = false,
 		autosave = false,
 		autosaveDelay = 10000,
+		disabled = false,
 		ariaDescribedBy,
 		onChange
 	}: Props = $props();
@@ -137,7 +140,7 @@
 				placeholder: placeholder,
 				spellChecker: spellChecker,
 				autosave: autosaveConfig,
-				toolbar: showToolbar ? [...toolbarConfig] : false,
+				toolbar: disabled ? false : showToolbar ? [...toolbarConfig] : false,
 				status: showStatusBar,
 				forceSync: true,
 				minHeight: height,
@@ -145,26 +148,33 @@
 					singleLineBreaks: false,
 					codeSyntaxHighlighting: true
 				},
-				shortcuts: {
-					toggleBold: 'Cmd-B',
-					toggleItalic: 'Cmd-I',
-					toggleStrikethrough: 'Cmd-Alt-S',
-					toggleHeadingSmaller: 'Cmd-H',
-					toggleHeadingBigger: 'Shift-Cmd-H',
-					toggleCodeBlock: 'Cmd-Alt-C',
-					toggleBlockquote: "Cmd-'",
-					toggleOrderedList: 'Cmd-Alt-L',
-					toggleUnorderedList: 'Cmd-L',
-					cleanBlock: 'Cmd-E',
-					drawLink: 'Cmd-K',
-					drawImage: 'Cmd-Alt-I',
-					drawTable: 'Cmd-Alt-T',
-					togglePreview: 'Cmd-P',
-					toggleSideBySide: 'F9',
-					toggleFullScreen: 'F11'
-				}
+				shortcuts: disabled
+					? {}
+					: {
+							toggleBold: 'Cmd-B',
+							toggleItalic: 'Cmd-I',
+							toggleStrikethrough: 'Cmd-Alt-S',
+							toggleHeadingSmaller: 'Cmd-H',
+							toggleHeadingBigger: 'Shift-Cmd-H',
+							toggleCodeBlock: 'Cmd-Alt-C',
+							toggleBlockquote: "Cmd-'",
+							toggleOrderedList: 'Cmd-Alt-L',
+							toggleUnorderedList: 'Cmd-L',
+							cleanBlock: 'Cmd-E',
+							drawLink: 'Cmd-K',
+							drawImage: 'Cmd-Alt-I',
+							drawTable: 'Cmd-Alt-T',
+							togglePreview: 'Cmd-P',
+							toggleSideBySide: 'F9',
+							toggleFullScreen: 'F11'
+						}
 			});
 
+			// When disabled, make the underlying CodeMirror read-only
+			if (disabled && easymde.codemirror) {
+				easymde.codemirror.setOption('readOnly', true);
+			}
+
 			// Listen for changes
 			easymde.codemirror.on('change', () => {
 				if (isInternalUpdate) {

package/dist/components/form/FormMarkdownEditor.svelte.d.ts

@@ -19,6 +19,8 @@ interface Props {
     autosave?: boolean;
     /** Autosave delay in milliseconds */
     autosaveDelay?: number;
+    /** Whether the field is disabled (read-only) */
+    disabled?: boolean;
     /** ARIA description ID */
     ariaDescribedBy?: string;
     /** Callback when value changes */

package/dist/components/form/FormNumberField.svelte

@@ -24,6 +24,8 @@
 		step?: number;
 		/** Whether the field is required */
 		required?: boolean;
+		/** Whether the field is disabled (read-only) */
+		disabled?: boolean;
 		/** ARIA description ID */
 		ariaDescribedBy?: string;
 		/** Callback when value changes */
@@ -38,6 +40,7 @@
 		max,
 		step,
 		required = false,
+		disabled = false,
 		ariaDescribedBy,
 		onChange
 	}: Props = $props();
@@ -68,6 +71,7 @@
 	{min}
 	{max}
 	{step}
+	{disabled}
 	aria-describedby={ariaDescribedBy}
 	aria-required={required}
 	oninput={handleInput}

package/dist/components/form/FormNumberField.svelte.d.ts

@@ -13,6 +13,8 @@ interface Props {
     step?: number;
     /** Whether the field is required */
     required?: boolean;
+    /** Whether the field is disabled (read-only) */
+    disabled?: boolean;
     /** ARIA description ID */
     ariaDescribedBy?: string;
     /** Callback when value changes */

package/dist/components/form/FormRangeField.svelte

@@ -24,6 +24,8 @@
 		step?: number;
 		/** Whether the field is required */
 		required?: boolean;
+		/** Whether the field is disabled (read-only) */
+		disabled?: boolean;
 		/** ARIA description ID */
 		ariaDescribedBy?: string;
 		/** Callback when value changes */
@@ -37,6 +39,7 @@
 		max = 100,
 		step = 1,
 		required = false,
+		disabled = false,
 		ariaDescribedBy,
 		onChange
 	}: Props = $props();
@@ -84,6 +87,7 @@
 			{min}
 			{max}
 			{step}
+			{disabled}
 			aria-describedby={ariaDescribedBy}
 			aria-valuemin={min}
 			aria-valuemax={max}

package/dist/components/form/FormRangeField.svelte.d.ts

@@ -11,6 +11,8 @@ interface Props {
     step?: number;
     /** Whether the field is required */
     required?: boolean;
+    /** Whether the field is disabled (read-only) */
+    disabled?: boolean;
     /** ARIA description ID */
     ariaDescribedBy?: string;
     /** Callback when value changes */

package/dist/components/form/FormSelect.svelte

@@ -21,6 +21,8 @@
 		options: FieldOption[] | string[];
 		/** Whether the field is required */
 		required?: boolean;
+		/** Whether the field is disabled (read-only) */
+		disabled?: boolean;
 		/** ARIA description ID */
 		ariaDescribedBy?: string;
 		/** Callback when value changes */
@@ -32,6 +34,7 @@
 		value = '',
 		options = [],
 		required = false,
+		disabled = false,
 		ariaDescribedBy,
 		onChange
 	}: Props = $props();
@@ -55,6 +58,7 @@
 		{id}
 		class="form-select"
 		value={value ?? ''}
+		{disabled}
 		aria-describedby={ariaDescribedBy}
 		aria-required={required}
 		onchange={handleChange}

package/dist/components/form/FormSelect.svelte.d.ts

@@ -8,6 +8,8 @@ interface Props {
     options: FieldOption[] | string[];
     /** Whether the field is required */
     required?: boolean;
+    /** Whether the field is disabled (read-only) */
+    disabled?: boolean;
     /** ARIA description ID */
     ariaDescribedBy?: string;
     /** Callback when value changes */

package/dist/components/form/FormTemplateEditor.svelte

@@ -52,6 +52,8 @@
 		variableHints?: string[];
 		/** Placeholder variable example for the hint */
 		placeholderExample?: string;
+		/** Whether the field is disabled (read-only) */
+		disabled?: boolean;
 		/** ARIA description ID */
 		ariaDescribedBy?: string;
 		/** Callback when value changes */
@@ -67,6 +69,7 @@
 		height = '250px',
 		variableHints = [],
 		placeholderExample = 'Hello {{ name }}, your order #{{ order_id }} is ready!',
+		disabled = false,
 		ariaDescribedBy,
 		onChange
 	}: Props = $props();
@@ -123,6 +126,7 @@
 	/**
 	 * Create editor extensions array for template editing
 	 * Uses minimal setup for better performance (no auto-closing brackets, no autocompletion)
+	 * When disabled is true, adds readOnly/editable so the editor cannot be modified
 	 */
 	function createExtensions() {
 		const extensions = [
@@ -133,20 +137,25 @@
 			highlightActiveLine(),
 			drawSelection(),
 
-			// Editing features
-			history(),
-			indentOnInput(),
+			// Editing features (skip when read-only)
+			...(disabled
+				? []
+				: [
+						history(),
+						indentOnInput(),
+						keymap.of([...defaultKeymap, ...historyKeymap, indentWithTab])
+					]),
+
+			// Read-only: prevent document changes and mark content as non-editable
+			...(disabled ? [EditorState.readOnly.of(true), EditorView.editable.of(false)] : []),
 
 			// Syntax highlighting
 			syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
 
-			// Keymaps for basic editing
-			keymap.of([...defaultKeymap, ...historyKeymap, indentWithTab]),
-
 			// Template-specific variable highlighter
 			variableHighlighter,
 
-			// Update listener
+			// Update listener (only fires on user edit when not disabled)
 			EditorView.updateListener.of(handleUpdate),
 
 			// Custom theme

package/dist/components/form/FormTemplateEditor.svelte.d.ts

@@ -15,6 +15,8 @@ interface Props {
     variableHints?: string[];
     /** Placeholder variable example for the hint */
     placeholderExample?: string;
+    /** Whether the field is disabled (read-only) */
+    disabled?: boolean;
     /** ARIA description ID */
     ariaDescribedBy?: string;
     /** Callback when value changes */

package/dist/components/form/FormTextField.svelte

@@ -18,6 +18,8 @@
 		placeholder?: string;
 		/** Whether the field is required */
 		required?: boolean;
+		/** Whether the field is disabled (read-only) */
+		disabled?: boolean;
 		/** ARIA description ID */
 		ariaDescribedBy?: string;
 		/** Callback when value changes */
@@ -29,6 +31,7 @@
 		value = '',
 		placeholder = '',
 		required = false,
+		disabled = false,
 		ariaDescribedBy,
 		onChange
 	}: Props = $props();
@@ -48,6 +51,7 @@
 	class="form-text-field"
 	value={value ?? ''}
 	{placeholder}
+	{disabled}
 	aria-describedby={ariaDescribedBy}
 	aria-required={required}
 	oninput={handleInput}

package/dist/components/form/FormTextField.svelte.d.ts

@@ -7,6 +7,8 @@ interface Props {
     placeholder?: string;
     /** Whether the field is required */
     required?: boolean;
+    /** Whether the field is disabled (read-only) */
+    disabled?: boolean;
     /** ARIA description ID */
     ariaDescribedBy?: string;
     /** Callback when value changes */

package/dist/components/form/FormTextarea.svelte

@@ -20,6 +20,8 @@
 		rows?: number;
 		/** Whether the field is required */
 		required?: boolean;
+		/** Whether the field is disabled (read-only) */
+		disabled?: boolean;
 		/** ARIA description ID */
 		ariaDescribedBy?: string;
 		/** Callback when value changes */
@@ -32,6 +34,7 @@
 		placeholder = '',
 		rows = 4,
 		required = false,
+		disabled = false,
 		ariaDescribedBy,
 		onChange
 	}: Props = $props();
@@ -51,6 +54,7 @@
 	value={value ?? ''}
 	{placeholder}
 	{rows}
+	{disabled}
 	aria-describedby={ariaDescribedBy}
 	aria-required={required}
 	oninput={handleInput}

package/dist/components/form/FormTextarea.svelte.d.ts

@@ -9,6 +9,8 @@ interface Props {
     rows?: number;
     /** Whether the field is required */
     required?: boolean;
+    /** Whether the field is disabled (read-only) */
+    disabled?: boolean;
     /** ARIA description ID */
     ariaDescribedBy?: string;
     /** Callback when value changes */

package/dist/components/form/FormToggle.svelte

@@ -18,6 +18,8 @@
 		onLabel?: string;
 		/** Label shown when toggle is off */
 		offLabel?: string;
+		/** Whether the field is disabled (read-only) */
+		disabled?: boolean;
 		/** ARIA description ID */
 		ariaDescribedBy?: string;
 		/** Callback when value changes */
@@ -29,6 +31,7 @@
 		value = false,
 		onLabel = 'Enabled',
 		offLabel = 'Disabled',
+		disabled = false,
 		ariaDescribedBy,
 		onChange
 	}: Props = $props();
@@ -48,6 +51,7 @@
 		type="checkbox"
 		class="form-toggle__input"
 		checked={value}
+		{disabled}
 		aria-describedby={ariaDescribedBy}
 		onchange={handleChange}
 	/>

package/dist/components/form/FormToggle.svelte.d.ts

@@ -7,6 +7,8 @@ interface Props {
     onLabel?: string;
     /** Label shown when toggle is off */
     offLabel?: string;
+    /** Whether the field is disabled (read-only) */
+    disabled?: boolean;
     /** ARIA description ID */
     ariaDescribedBy?: string;
     /** Callback when value changes */

package/dist/components/form/types.d.ts

@@ -318,6 +318,11 @@ export interface FieldSchema {
     required?: string[];
     /** Autocomplete configuration for fetching suggestions from callback URL */
     autocomplete?: AutocompleteConfig;
+    /**
+     * Whether the field is read-only (JSON Schema readOnly keyword).
+     * When true, the field is displayed but cannot be edited.
+     */
+    readOnly?: boolean;
     /** Allow additional properties not defined by the schema */
     [key: string]: unknown;
 }

package/dist/components/form/types.js

@@ -15,7 +15,7 @@ export function isFieldOptionArray(options) {
  * Type guard to check if items are OneOfItem objects (JSON Schema oneOf pattern)
  */
 export function isOneOfArray(items) {
-    return items.length > 0 && typeof items[0] === 'object' && items[0] !== null && 'const' in items[0];
+    return (items.length > 0 && typeof items[0] === 'object' && items[0] !== null && 'const' in items[0]);
 }
 /**
  * Convert JSON Schema oneOf items to FieldOption format

package/dist/components/layouts/MainLayout.svelte

@@ -377,7 +377,9 @@
 					aria-label="Resize bottom panel"
 					tabindex="0"
 				>
-					<div class="flowdrop-main-layout__divider-handle flowdrop-main-layout__divider-handle--horizontal"></div>
+					<div
+						class="flowdrop-main-layout__divider-handle flowdrop-main-layout__divider-handle--horizontal"
+					></div>
 				</div>
 			{/if}
 
@@ -630,7 +632,8 @@
 		transform: scaleX(1.2);
 	}
 
-	.flowdrop-main-layout__divider--bottom.flowdrop-main-layout__divider--active .flowdrop-main-layout__divider-handle--horizontal {
+	.flowdrop-main-layout__divider--bottom.flowdrop-main-layout__divider--active
+		.flowdrop-main-layout__divider-handle--horizontal {
 		transform: scaleX(1.4);
 	}