@finsweet/webflow-apps-utils 1.0.3 → 1.0.4

package/dist/ui/components/copy-text/CopyText.svelte

@@ -0,0 +1,249 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	import { CopyIcon, EyeIcon } from '../../icons';
+	import { trimExtraSpaces } from '../../../utils/helpers';
+
+	import type { CopyTextProps } from './types';
+
+	let {
+		content,
+		title,
+		disabled = false,
+		raw = false,
+		hidden = false,
+		comment = '',
+		tooltip = 'Click to copy',
+		onNotify,
+		onCopy,
+		onError,
+		header,
+		footer,
+		class: className = '',
+		...restProps
+	}: CopyTextProps = $props();
+
+	// Component state
+	let isCopied = $state(false);
+	let isCooldown = $state(false);
+
+	// Simple computed values to avoid infinite loops
+	function getProcessedContent() {
+		if (raw) {
+			return comment ? `<!-- ${comment} -->\n${content}` : content;
+		}
+		return trimExtraSpaces(content) ?? '';
+	}
+
+	function getCopyButtonClasses() {
+		return [
+			'copy-button',
+			disabled ? 'copy-button--disabled' : '',
+			isCopied ? 'copy-button--copied' : '',
+			className || ''
+		]
+			.filter(Boolean)
+			.join(' ');
+	}
+
+	/**
+	 * Handles notifications with cooldown to prevent spam
+	 */
+	const handleNotification = (type: 'Success' | 'Error', message: string) => {
+		if (!isCooldown) {
+			onNotify?.({ type, message });
+			isCooldown = true;
+			setTimeout(() => {
+				isCooldown = false;
+			}, 1000);
+		}
+	};
+
+	// Simple click handler without reactive effects to avoid infinite loops
+	function handleClick() {
+		if (disabled) return;
+
+		// Use modern clipboard API instead of ClipboardJS to avoid issues
+		const textToCopy = getProcessedContent();
+
+		if (navigator.clipboard) {
+			navigator.clipboard
+				.writeText(textToCopy)
+				.then(() => {
+					isCopied = true;
+					handleNotification('Success', 'Copied to clipboard!');
+					onCopy?.(textToCopy);
+
+					// Reset copied state after 2 seconds
+					setTimeout(() => {
+						isCopied = false;
+					}, 2000);
+				})
+				.catch(() => {
+					const errorMessage = 'Failed to copy. Please try again.';
+					handleNotification('Error', errorMessage);
+					onError?.(errorMessage);
+				});
+		} else {
+			// Fallback for browsers that don't support navigator.clipboard
+			const errorMessage = 'Clipboard not supported in this browser';
+			handleNotification('Error', errorMessage);
+			onError?.(errorMessage);
+		}
+	}
+</script>
+
+{#if !hidden}
+	<div class="copy-text" {...restProps}>
+		{#if header}
+			<div class="copy-text__header">
+				{@render header()}
+			</div>
+		{:else if title}
+			<div class="copy-text__header">
+				<h3 class="copy-text__title">{title}</h3>
+			</div>
+		{/if}
+
+		<div
+			class={getCopyButtonClasses()}
+			role="button"
+			tabindex="0"
+			aria-label={disabled ? 'Copy disabled' : tooltip}
+			title={tooltip}
+			onclick={handleClick}
+			onkeydown={(e) => {
+				if ((e.key === 'Enter' || e.key === ' ') && !disabled) {
+					e.preventDefault();
+					handleClick();
+				}
+			}}
+		>
+			<div class="copy-button__content" id="copy-content">
+				{getProcessedContent()}
+			</div>
+
+			<div class="copy-button__icon" aria-hidden="true">
+				{#if disabled}
+					<EyeIcon />
+				{:else}
+					<CopyIcon size={16} />
+				{/if}
+			</div>
+		</div>
+
+		{#if footer}
+			<div class="copy-text__footer">
+				{@render footer()}
+			</div>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.copy-text {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+		width: 100%;
+	}
+
+	.copy-text__header {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+	}
+
+	.copy-text__title {
+		margin: 0;
+		color: var(--text-color-primary, #ffffff);
+		font-family: Inter, sans-serif;
+		font-size: 12px;
+		font-weight: 500;
+		line-height: 16px;
+	}
+
+	.copy-button {
+		display: flex;
+		align-items: flex-start;
+		justify-content: space-between;
+		gap: 8px;
+		padding: 6px 8px;
+		border-radius: 4px;
+		background: var(
+			--button-secondary-background,
+			linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.1) 100%),
+			rgba(255, 255, 255, 0.08)
+		);
+		box-shadow:
+			0px 0.5px 0.5px 0px rgba(255, 255, 255, 0.12) inset,
+			0px 0.5px 1px 0px #000;
+		color: var(--text-color-secondary, #d9d9d9);
+		font-family: Inter, sans-serif;
+		font-size: 11px;
+		font-weight: 500;
+		line-height: 16px;
+		cursor: pointer;
+		transition: all 0.2s ease-in-out;
+		outline: none;
+	}
+
+	.copy-button:hover:not(.copy-button--disabled) {
+		background: var(
+			--button-secondary-background-hover,
+			linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.14) 100%),
+			rgba(255, 255, 255, 0.12)
+		);
+	}
+
+	.copy-button:focus-visible {
+		outline: 2px solid var(--focus-color, #0066cc);
+		outline-offset: 2px;
+	}
+
+	.copy-button--disabled {
+		background: none;
+		border: 1px solid var(--border-color-disabled, rgba(255, 255, 255, 0.2));
+		box-shadow: none;
+		opacity: 0.75;
+		cursor: not-allowed;
+		color: var(--text-color-disabled, #999999);
+	}
+
+	.copy-button__content {
+		display: flex;
+		align-items: flex-start;
+		flex: 1;
+		overflow: auto;
+		white-space: pre-wrap;
+		word-wrap: break-word;
+		max-width: 600px;
+		min-height: max-content;
+	}
+
+	.copy-button__content:disabled {
+		cursor: not-allowed;
+		color: var(--text-color-disabled, #999999);
+	}
+
+	.copy-button__icon {
+		display: flex;
+		align-items: center;
+		height: 16px;
+		flex-shrink: 0;
+	}
+
+	.copy-text__footer {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
+	/* Responsive design */
+	@media (max-width: 768px) {
+		.copy-button__content {
+			max-width: 300px;
+		}
+	}
+</style>

package/dist/ui/components/copy-text/CopyText.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CopyTextProps } from './types';
+declare const CopyText: import("svelte").Component<CopyTextProps, {}, "">;
+type CopyText = ReturnType<typeof CopyText>;
+export default CopyText;

package/dist/ui/components/copy-text/index.d.ts

@@ -0,0 +1,2 @@
+export { default as CopyText } from './CopyText.svelte';
+export type * from './types';

package/dist/ui/components/copy-text/index.js

@@ -0,0 +1 @@
+export { default as CopyText } from './CopyText.svelte';

package/dist/ui/components/copy-text/types.d.ts

@@ -0,0 +1,52 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+/**
+ * Notification function type for copy operations
+ */
+export interface NotificationFunction {
+    (options: {
+        type: 'Success' | 'Error';
+        message: string;
+    }): void;
+}
+/**
+ * Props for the CopyText component
+ */
+export interface CopyTextProps extends HTMLAttributes<HTMLDivElement> {
+    /** The content to be copied to clipboard */
+    content: string;
+    /** Optional title/heading text to display above the copy area */
+    title?: string;
+    /** Whether the copy functionality is disabled */
+    disabled?: boolean;
+    /** Whether to show the content in raw format (with HTML) or cleaned */
+    raw?: boolean;
+    /** Whether the component is in a hidden state */
+    hidden?: boolean;
+    /** Optional comment to prepend to copied content when in raw mode */
+    comment?: string;
+    /** Custom tooltip text for the copy button */
+    tooltip?: string;
+    /** Optional notification function to call on copy success/error */
+    onNotify?: NotificationFunction;
+    /** Callback fired when content is successfully copied */
+    onCopy?: (content: string) => void;
+    /** Callback fired when copy fails */
+    onError?: (error: string) => void;
+    /** Optional snippet for custom header content */
+    header?: Snippet;
+    /** Optional snippet for additional content below the copy area */
+    footer?: Snippet;
+    /** Custom CSS classes */
+    class?: string;
+}
+/**
+ * Event types for clipboard operations
+ */
+export interface CopyEvent {
+    text: string;
+    clearSelection: () => void;
+}
+export interface CopyErrorEvent {
+    message: string;
+}

package/dist/ui/components/copy-text/types.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/components/index.d.ts

@@ -3,6 +3,7 @@ export * from './button';
 export * from './button-group';
 export * from './checkbox';
 export * from './controlled-buttons';
+export * from './copy-text';
 export * from './divider';
 export * from './iframe';
 export * from './input';

package/dist/ui/components/index.js

@@ -3,6 +3,7 @@ export * from './button';
 export * from './button-group';
 export * from './checkbox';
 export * from './controlled-buttons';
+export * from './copy-text';
 export * from './divider';
 export * from './iframe';
 export * from './input';

package/dist/ui/components/input/Input.stories.d.ts

@@ -90,6 +90,10 @@ declare const meta: {
             control: string;
             description: string;
         };
+        debounce: {
+            control: string;
+            description: string;
+        };
     };
 };
 export default meta;
@@ -131,3 +135,8 @@ export declare const WithMinLength: Story;
 export declare const InteractiveExample: Story;
 export declare const ComplexExample: Story;
 export declare const FormFieldExample: Story;
+export declare const WithDebounce: Story;
+export declare const FastDebounce: Story;
+export declare const SlowDebounce: Story;
+export declare const NoDebounce: Story;
+export declare const DebounceWithSteppers: Story;

package/dist/ui/components/input/Input.stories.js

@@ -85,6 +85,10 @@ const meta = {
         max: {
             control: 'number',
             description: 'Maximum value for number input'
+        },
+        debounce: {
+            control: 'number',
+            description: 'Debounce delay in milliseconds for input events (0 = no debounce)'
         }
     }
 };
@@ -433,3 +437,77 @@ export const FormFieldExample = {
         invalid: true
     }
 };
+// Debounce examples
+export const WithDebounce = {
+    args: {
+        placeholder: 'Type fast to see debouncing...',
+        debounce: 300,
+        oninput: (value) => console.log('Debounced input:', value)
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Input with 300ms debounce. The oninput event will only fire after you stop typing for 300ms. Check the console to see the difference.'
+            }
+        }
+    }
+};
+export const FastDebounce = {
+    args: {
+        placeholder: 'Fast debounce (100ms)',
+        debounce: 100,
+        oninput: (value) => console.log('Fast debounced input:', value)
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Input with a faster 100ms debounce for more responsive but still controlled input handling.'
+            }
+        }
+    }
+};
+export const SlowDebounce = {
+    args: {
+        placeholder: 'Slow debounce (1000ms)',
+        debounce: 1000,
+        oninput: (value) => console.log('Slow debounced input:', value)
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Input with a slower 1000ms debounce for heavy operations that should only run after the user has finished typing.'
+            }
+        }
+    }
+};
+export const NoDebounce = {
+    args: {
+        placeholder: 'No debounce (immediate)',
+        debounce: 0,
+        oninput: (value) => console.log('Immediate input:', value)
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Input with no debouncing (debounce: 0). Events fire immediately on every keystroke.'
+            }
+        }
+    }
+};
+export const DebounceWithSteppers = {
+    args: {
+        type: 'number',
+        showSteppers: true,
+        value: '10',
+        debounce: 500,
+        placeholder: 'Debounced number input',
+        oninput: (value) => console.log('Debounced stepper input:', value)
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Number input with steppers and debouncing. Both typing and stepper clicks are debounced.'
+            }
+        }
+    }
+};

package/dist/ui/components/input/Input.svelte

@@ -28,6 +28,7 @@
 		step = 1,
 		min = undefined,
 		max = undefined,
+		debounce = 0,
 		oninput,
 		onblur,
 		onfocus,
@@ -59,6 +60,9 @@
 	// Track HTML5 validation state
 	let isValidationInvalid = $state(false);
 
+	// Debounce timer for input events
+	let debounceTimer: ReturnType<typeof setTimeout> | null = $state(null);
+
 	// Use internal value for reactive state management
 	let currInputValue = $derived(internalValue);
 	let computedColor = $derived(currInputValue ? 'var(--actionPrimaryText)' : 'var(--text3)');
@@ -227,6 +231,37 @@
 		}
 	});
 
+	// Cleanup debounce timer on component destruction
+	$effect(() => {
+		return () => {
+			if (debounceTimer) {
+				clearTimeout(debounceTimer);
+				debounceTimer = null;
+			}
+		};
+	});
+
+	/**
+	 * Debounced oninput handler
+	 */
+	const debouncedOninput = (inputValue: string) => {
+		if (debounce > 0) {
+			// Clear existing timer
+			if (debounceTimer) {
+				clearTimeout(debounceTimer);
+			}
+
+			// Set new timer
+			debounceTimer = setTimeout(() => {
+				oninput?.(inputValue);
+				debounceTimer = null;
+			}, debounce);
+		} else {
+			// No debouncing, call immediately
+			oninput?.(inputValue);
+		}
+	};
+
 	/**
 	 * Handles input events
 	 */
@@ -252,7 +287,8 @@
 		// Update validation state for real-time feedback
 		updateValidationState();
 
-		oninput?.(inputValue);
+		// Call debounced oninput handler
+		debouncedOninput(inputValue);
 	};
 
 	/**
@@ -316,7 +352,7 @@
 
 		// Trigger change events
 		onValueChange?.(newValue);
-		oninput?.(newStringValue);
+		debouncedOninput(newStringValue);
 	};
 
 	/**
@@ -345,7 +381,7 @@
 
 		// Trigger change events
 		onValueChange?.(newValue);
-		oninput?.(newStringValue);
+		debouncedOninput(newStringValue);
 	};
 
 	/**

package/dist/ui/components/input/types.d.ts

@@ -94,6 +94,12 @@ export interface InputProps extends Omit<HTMLInputAttributes, 'onblur' | 'onfocu
      * Maximum value for number input.
      */
     max?: number;
+    /**
+     * Debounce delay in milliseconds for input events.
+     * When set, oninput will be debounced by this amount.
+     * Default is no debouncing (0).
+     */
+    debounce?: number;
     /**
      * Event handler for input changes - receives the trimmed string value
      */

package/dist/ui/components/layout/Layout.svelte

@@ -11,13 +11,12 @@
 
 	import { Tooltip } from '../tooltip';
 	import { EditModeMessage } from './common';
-	import type { LayoutFooter, LayoutTab } from './types';
+	import type { LayoutTab } from './types';
 
 	interface LayoutProps extends HTMLAttributes<HTMLDivElement> {
 		activeTab: string;
 		tabs: LayoutTab[];
 		switchTab: (tab: string) => void;
-		footer?: LayoutFooter;
 		formKey: string;
 		editMode?: boolean;
 		showFooter?: boolean;
@@ -36,13 +35,13 @@
 		sidebar?: Snippet;
 		main?: Snippet;
 		previewBar?: Snippet;
+		footer?: Snippet;
 	}
 
 	let {
 		activeTab,
 		tabs,
 		switchTab,
-		footer = { buttons: [] },
 		formKey,
 		editMode = false,
 		showFooter = true,
@@ -56,12 +55,12 @@
 		sidebar,
 		main,
 		previewBar,
+		footer,
 		class: className = '',
 		...restProps
 	}: LayoutProps = $props();
 
 	// Derived states
-	let hasFooterButtons = $derived(footer?.buttons && footer.buttons.length > 0);
 	let containerStyles = $derived(
 		containerMode ? 'height: 100%; width: 100%;' : 'height: 100vh; width: 100vw;'
 	);
@@ -93,7 +92,7 @@
 		}
 
 		// Handle footer row
-		if (showFooter && hasFooterButtons) {
+		if (showFooter && footer) {
 			if (showSidebar) {
 				areas.push('"sidebar footer"');
 			} else {
@@ -118,7 +117,7 @@
 
 		rows.push('1fr'); // main content area takes remaining space
 
-		if (showFooter && hasFooterButtons) {
+		if (showFooter && footer) {
 			rows.push(footerHeight);
 		}
 
@@ -240,21 +239,9 @@
 	</div>
 
 	<!-- Footer -->
-	{#if showFooter && hasFooterButtons}
+	{#if showFooter && footer}
 		<div class="footer" data-area="footer">
-			{#each footer.buttons as button (button.text)}
-				<button
-					class="footer-button footer-button--{button.variant}"
-					disabled={editMode}
-					onclick={button.onClick}
-				>
-					{#if button.icon}
-						{@const Icon = button.icon}
-						<Icon />
-					{/if}
-					{button.text}
-				</button>
-			{/each}
+			{@render footer()}
 		</div>
 	{/if}
 </div>
@@ -507,43 +494,4 @@
 		height: 100%;
 		overflow: hidden;
 	}
-
-	.footer-button {
-		display: flex;
-		padding: 4px 8px;
-		justify-content: center;
-		align-items: center;
-		gap: 2px;
-		border-radius: 4px;
-		border: 1px solid var(--border-border-1, #363636);
-		background: var(--background2);
-		color: var(--text1);
-		text-align: center;
-		font-family: Inter;
-		font-size: 11px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 16px;
-		cursor: pointer;
-		transition: all 0.2s ease-in-out;
-	}
-
-	.footer-button--primary {
-		background: var(--action-action-primary-background-hover, #1280ee);
-		color: var(--actionPrimaryText);
-	}
-
-	.footer-button--secondary {
-		background: var(--background2);
-		color: var(--text1);
-	}
-
-	.footer-button:hover:not(:disabled) {
-		opacity: 0.8;
-	}
-
-	.footer-button:disabled {
-		opacity: 0.5;
-		cursor: not-allowed;
-	}
 </style>

package/dist/ui/components/layout/Layout.svelte.d.ts

@@ -1,11 +1,10 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import type { LayoutFooter, LayoutTab } from './types';
+import type { LayoutTab } from './types';
 interface LayoutProps extends HTMLAttributes<HTMLDivElement> {
     activeTab: string;
     tabs: LayoutTab[];
     switchTab: (tab: string) => void;
-    footer?: LayoutFooter;
     formKey: string;
     editMode?: boolean;
     showFooter?: boolean;
@@ -24,6 +23,7 @@ interface LayoutProps extends HTMLAttributes<HTMLDivElement> {
     sidebar?: Snippet;
     main?: Snippet;
     previewBar?: Snippet;
+    footer?: Snippet;
 }
 declare const Layout: import("svelte").Component<LayoutProps, {}, "">;
 type Layout = ReturnType<typeof Layout>;