@finsweet/webflow-apps-utils 1.0.4 → 1.0.5

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

@@ -9,32 +9,56 @@
 		WarningCircleOutlineIcon
 	} from '../../icons';
 
+	import Section from '../section/Section.svelte';
 	import { Tooltip } from '../tooltip';
 	import { EditModeMessage } from './common';
 	import type { LayoutTab } from './types';
 
 	interface LayoutProps extends HTMLAttributes<HTMLDivElement> {
+		/** The currently active tab path */
 		activeTab: string;
+		/** Array of available tabs to display in the navbar */
 		tabs: LayoutTab[];
+		/** Function to handle tab switching */
 		switchTab: (tab: string) => void;
+		/** Unique key for the form context */
 		formKey: string;
-		editMode?: boolean;
+		/** Whether to show the edit mode message banner */
+		showEditModeMessage?: boolean;
+		/** Whether to display the footer section */
 		showFooter?: boolean;
+		/** Whether to display the sidebar */
 		showSidebar?: boolean;
+		/** Whether to display the tab navigation bar */
 		showTabs?: boolean;
+		/** The height at which the main content area becomes scrollable */
+		mainContentScrollableAt?: number;
+		/** Whether to display the preview bar */
 		showPreviewBar?: boolean;
+		/** Width of the sidebar (CSS value) */
 		sidebarWidth?: string;
+		/** Whether to use container mode (100% dimensions) instead of viewport mode */
 		containerMode?: boolean;
+		/** Size variant for the footer */
 		footerSize?: 'normal' | 'large';
+		/** Array of notification objects for tab status indicators */
 		notifications?: Array<{
+			/** Tab path this notification applies to */
 			path: string;
+			/** Whether the notification indicates success */
 			success: boolean;
+			/** Notification message content */
 			message: string;
+			/** Whether to show the notification badge */
 			showNotification: boolean;
 		}>;
+		/** Sidebar content snippet */
 		sidebar?: Snippet;
+		/** Main content area snippet */
 		main?: Snippet;
+		/** Preview bar content snippet */
 		previewBar?: Snippet;
+		/** Footer content snippet */
 		footer?: Snippet;
 	}
 
@@ -43,7 +67,8 @@
 		tabs,
 		switchTab,
 		formKey,
-		editMode = false,
+		mainContentScrollableAt,
+		showEditModeMessage = false,
 		showFooter = true,
 		showSidebar = true,
 		showTabs = true,
@@ -216,8 +241,16 @@
 	<div class="main-content" data-area="main">
 		{#if main}
 			<div class="main-content-container">
-				<EditModeMessage />
-				{@render main()}
+				{#if showEditModeMessage}
+					<EditModeMessage />
+				{/if}
+				{#if mainContentScrollableAt}
+					<Section height={`${mainContentScrollableAt}px`} scrollable padding="0">
+						{@render main()}
+					</Section>
+				{:else}
+					{@render main()}
+				{/if}
 			</div>
 		{:else}
 			<div class="main-placeholder">
@@ -231,7 +264,7 @@
 						<li>Show Tabs: {showTabs}</li>
 						<li>Show Preview Bar: {showPreviewBar}</li>
 						<li>Show Footer: {showFooter}</li>
-						<li>Edit Mode: {editMode}</li>
+						<li>Edit Mode: {showEditModeMessage}</li>
 					</ul>
 				</div>
 			</div>

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

@@ -2,27 +2,50 @@ import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import type { LayoutTab } from './types';
 interface LayoutProps extends HTMLAttributes<HTMLDivElement> {
+    /** The currently active tab path */
     activeTab: string;
+    /** Array of available tabs to display in the navbar */
     tabs: LayoutTab[];
+    /** Function to handle tab switching */
     switchTab: (tab: string) => void;
+    /** Unique key for the form context */
     formKey: string;
-    editMode?: boolean;
+    /** Whether to show the edit mode message banner */
+    showEditModeMessage?: boolean;
+    /** Whether to display the footer section */
     showFooter?: boolean;
+    /** Whether to display the sidebar */
     showSidebar?: boolean;
+    /** Whether to display the tab navigation bar */
     showTabs?: boolean;
+    /** The height at which the main content area becomes scrollable */
+    mainContentScrollableAt?: number;
+    /** Whether to display the preview bar */
     showPreviewBar?: boolean;
+    /** Width of the sidebar (CSS value) */
     sidebarWidth?: string;
+    /** Whether to use container mode (100% dimensions) instead of viewport mode */
     containerMode?: boolean;
+    /** Size variant for the footer */
     footerSize?: 'normal' | 'large';
+    /** Array of notification objects for tab status indicators */
     notifications?: Array<{
+        /** Tab path this notification applies to */
         path: string;
+        /** Whether the notification indicates success */
         success: boolean;
+        /** Notification message content */
         message: string;
+        /** Whether to show the notification badge */
         showNotification: boolean;
     }>;
+    /** Sidebar content snippet */
     sidebar?: Snippet;
+    /** Main content area snippet */
     main?: Snippet;
+    /** Preview bar content snippet */
     previewBar?: Snippet;
+    /** Footer content snippet */
     footer?: Snippet;
 }
 declare const Layout: import("svelte").Component<LayoutProps, {}, "">;

package/dist/ui/components/layout/examples/ExampleLayout.svelte

@@ -18,20 +18,20 @@
 	let showTabs = $state(true);
 	let showPreviewBar = $state(true);
 	let showFooter = $state(true);
-	let editMode = $state(false);
+	let showEditModeMessage = $state(false);
 	let sidebarWidth = $state('239px');
 	let footerSize = $state<'normal' | 'large'>('normal');
 	let showNotifications = $state(false);
 	let notificationSuccess = $state(true);
 	let inputValue = $state('');
 
-	// Get app context and keep editMode in sync
+	// Get app context and keep showEditModeMessage in sync
 	const appContext = useAppContext();
 
-	// Subscribe to context changes to keep local editMode in sync
+	// Subscribe to context changes to keep local showEditModeMessage in sync
 	appContext.subscribe((data) => {
-		if (data?.editMode !== undefined && data.editMode !== editMode) {
-			editMode = data.editMode;
+		if (data?.editMode !== undefined && data.editMode !== showEditModeMessage) {
+			showEditModeMessage = data.editMode;
 		}
 	});
 
@@ -92,8 +92,8 @@
 				watchOptions: { watchAll: true, debounceMs: 50 }
 			}
 		});
-		// Initialize local editMode state
-		editMode = true;
+		// Initialize local showEditModeMessage state
+		showEditModeMessage = true;
 	});
 </script>
 
@@ -182,12 +182,12 @@
 						<div class="toggle-control">
 							<input
 								type="checkbox"
-								bind:checked={editMode}
+								bind:checked={showEditModeMessage}
 								id="edit-mode"
 								class="checkbox-input"
 								onchange={() => {
 									const current = appContext.get();
-									appContext.set({ ...current, editMode });
+									appContext.set({ ...current, editMode: showEditModeMessage });
 								}}
 							/>
 							<label for="edit-mode" class="checkbox-label">Edit Mode</label>
@@ -227,7 +227,7 @@
 			{tabs}
 			{switchTab}
 			formKey="dummy-layout"
-			{editMode}
+			{showEditModeMessage}
 			{showFooter}
 			{showSidebar}
 			{showTabs}
@@ -329,11 +329,11 @@
 					variant="secondary"
 					icon={CheckCircleIcon}
 					onclick={handleSaveClick}
-					disabled={editMode}
+					disabled={showEditModeMessage}
 				>
 					Save Changes
 				</Button>
-				<Button variant="primary" onclick={handleApplyClick} disabled={editMode}>
+				<Button variant="primary" onclick={handleApplyClick} disabled={showEditModeMessage}>
 					Apply Settings
 				</Button>
 			{/snippet}

package/dist/ui/components/section/Section.svelte

@@ -140,7 +140,7 @@
 		scrollbars: {
 			theme: 'os-theme-dark',
 			visibility: 'auto',
-			autoHide: 'never',
+			autoHide: 'leave',
 			autoHideDelay: 800
 		}
 	};
@@ -186,6 +186,7 @@
 			tooltipIconColor="var(--yellowText)"
 			message={defaultDisabledMessage}
 			width={disabledTooltipWidth}
+			class="not-allowed"
 		>
 			{#snippet target()}
 				{@render sectionContent()}
@@ -271,6 +272,7 @@
 	/* Disabled in edit mode styles */
 	.section-wrap.disabled-in-edit-mode {
 		pointer-events: none;
+		cursor: not-allowed;
 	}
 
 	.section-wrap.disabled-in-edit-mode :global(.label-popup .labels span) {
@@ -301,7 +303,7 @@
 
 	/* OverlayScrollbars dark theme customization using design system */
 	.section-wrap :global(.os-scrollbar) {
-		--os-size: var(--sb-size, 6px);
+		--os-size: var(--sb-size);
 		--os-padding-perpendicular: 2px;
 		--os-padding-axis: 2px;
 	}

package/dist/ui/index.css

@@ -4,7 +4,7 @@
 	/* custom scrollbar related */
 	--sb-track-color: #1e1e1e;
 	--sb-thumb-color: #373737;
-	--sb-size: 6px;
+	--sb-size: 8px;
 
 	/* Webflow colors */
 	--background1: #292929;
@@ -264,9 +264,13 @@ label {
 .disabled,
 .login-required {
 	cursor: not-allowed !important;
-	opacity: 0.75 !important;
+	opacity: 0.8 !important;
 }
 
+/* Used for disabled sections */
+.not-allowed {
+	cursor: not-allowed !important;
+}
 /* OverlayScrollbars Global Theme */
 :root {
 	/* OverlayScrollbars theme variables using design system colors */

package/dist/utils/diff-mapper/DiffMapper.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from '@storybook/sveltekit';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Interactive: Story;

package/dist/utils/diff-mapper/DiffMapper.stories.js

@@ -0,0 +1,185 @@
+import DiffMapperDemo from './DiffMapperDemo.svelte';
+const meta = {
+    title: 'Utils/DiffMapper',
+    component: DiffMapperDemo,
+    parameters: {
+        layout: 'centered',
+        backgrounds: {
+            default: 'dark',
+            values: [
+                { name: 'dark', value: '#292929' },
+                { name: 'light', value: '#ffffff' }
+            ]
+        },
+        docs: {
+            description: {
+                component: `
+# DiffMapper Utilities
+
+The DiffMapper utility provides intelligent object comparison with type coercion, whitespace handling, and advanced diff detection. Built specifically for configurator state management and general object comparison needs.
+
+## Features
+
+- **Smart Type Coercion**: Handles string/number/boolean conversions intelligently
+- **Whitespace Handling**: Automatically trims and compares string values
+- **Deep Comparison**: Recursively compares nested objects and arrays
+- **Performance Optimized**: Includes caching and circular reference detection
+- **Detailed Diff Output**: Provides granular change information
+- **Type Safety**: Full TypeScript support with proper type definitions
+
+## API Reference
+
+### Core Functions
+
+#### \`hasChangesViaDiff<T>(current: T, updated: T): boolean\`
+
+Determines if there are any meaningful changes between two objects.
+
+\`\`\`typescript
+const config1 = { theme: 'dark', notifications: true };
+const config2 = { theme: 'light', notifications: true };
+
+const hasChanges = hasChangesViaDiff(config1, config2); // true
+\`\`\`
+
+**Features:**
+- Automatic caching for performance
+- Type coercion handling
+- Whitespace normalization
+- Deep nested comparison
+
+#### \`getDetailedDiff<T>(current: T, updated: T): DiffResult | DiffMap\`
+
+Returns a detailed diff map showing exactly what changed.
+
+\`\`\`typescript
+const user1 = {
+  profile: { name: 'John', age: 30 },
+  settings: { theme: 'dark' }
+};
+
+const user2 = {
+  profile: { name: 'John', age: 31 },
+  settings: { theme: 'light', notifications: true }
+};
+
+const diff = getDetailedDiff(user1, user2);
+// Returns detailed diff structure showing exactly what changed
+\`\`\`
+
+### Diff Types
+
+\`\`\`typescript
+enum DiffType {
+	UNCHANGED = 'UNCHANGED', // Value is identical
+	UPDATED = 'UPDATED', // Value was modified
+	CREATED = 'CREATED', // Property was added
+	DELETED = 'DELETED' // Property was removed
+}
+\`\`\`
+
+## Type Coercion Examples
+
+The diff mapper intelligently handles type coercion:
+
+### String/Number Coercion
+\`\`\`typescript
+// These are considered UNCHANGED
+hasChangesViaDiff({ value: '42' }, { value: 42 }); // false
+hasChangesViaDiff({ value: '0' }, { value: 0 }); // false
+hasChangesViaDiff({ value: '' }, { value: 0 }); // false
+\`\`\`
+
+### String/Boolean Coercion
+\`\`\`typescript
+// These are considered UNCHANGED
+hasChangesViaDiff({ active: 'true' }, { active: true }); // false
+hasChangesViaDiff({ active: 'false' }, { active: false }); // false
+hasChangesViaDiff({ active: '' }, { active: false }); // false
+\`\`\`
+
+### Whitespace Handling
+\`\`\`typescript
+// These are considered UNCHANGED
+hasChangesViaDiff({ name: 'John' }, { name: '  John  ' }); // false
+hasChangesViaDiff({ value: '42' }, { value: ' 42 ' }); // false
+
+// But these are UPDATED (whitespace-only strings ≠ numbers)
+hasChangesViaDiff({ value: '  ' }, { value: 0 }); // true
+hasChangesViaDiff({ value: ' ' }, { value: false }); // true
+\`\`\`
+
+## Performance Features
+
+### Caching Strategy
+Results are cached for 1 second to avoid expensive re-computation:
+
+\`\`\`typescript
+const cacheKey = JSON.stringify([current, updated]);
+const cached = diffCache.get(cacheKey);
+
+if (cached && Date.now() - cached.timestamp < CACHE_TTL) {
+  return cached.result;
+}
+\`\`\`
+
+### Memory Management
+Automatic cache cleanup when size exceeds 100 entries or TTL expires.
+
+## GlobalProvider Integration
+
+The diff mapper is seamlessly integrated with the GlobalProvider system:
+
+\`\`\`typescript
+import { useConfiguratorContext } from '../../providers';
+
+const configurator = useConfiguratorContext<MyConfigType>();
+
+// Automatic change detection using diff mapper
+const hasChanged = configurator.hasChanged; // Uses hasChangesViaDiff internally
+
+// Manual comparison
+const currentConfig = configurator.configurator;
+const cachedConfig = configurator.configuratorCache;
+const changes = getDetailedDiff(currentConfig, cachedConfig);
+\`\`\`
+
+## Usage with GlobalProvider
+
+For manual configurator state management:
+
+\`\`\`typescript
+import {
+	createDefaultConfiguratorState,
+	hasConfiguratorChanged,
+	validateWatchOptions,
+	extractKeys,
+	createDebouncedUpdate
+} from '../../providers';
+
+// Create default configurator state
+const defaultState = createDefaultConfiguratorState<MyConfigType>();
+
+// Manual change detection with watch options
+const watchOptions = { watchKeys: ['theme'], debounceMs: 100 };
+const hasChanged = hasConfiguratorChanged(current, cached, watchOptions);
+\`\`\`
+
+Click the buttons in the interactive demo below to see these features in action!
+				`
+            }
+        }
+    },
+    tags: ['autodocs']
+};
+export default meta;
+export const Interactive = {
+    name: 'Interactive Demo',
+    parameters: {
+        docs: {
+            description: {
+                story: 'Click the buttons to run diff examples and see results. All functionality is combined in a single interactive demo.'
+            }
+        }
+    }
+};