@finsweet/webflow-apps-utils 1.0.2 → 1.0.4

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

@@ -28,7 +28,8 @@ export interface InputProps extends Omit<HTMLInputAttributes, 'onblur' | 'onfocu
      */
     color?: string;
     /**
-     * Optional: If set it will add an element to the right of the input field and show the unit
+     * Optional: If set it will add an element to the right of the input field and show the unit.
+     * Cannot be used together with showSteppers
      */
     units?: string;
     /**
@@ -76,6 +77,29 @@ export interface InputProps extends Omit<HTMLInputAttributes, 'onblur' | 'onfocu
      * Possible values: 'blue', 'gray', or null/undefined for no pill
      */
     pill?: PillVariant;
+    /**
+     * Shows increment/decrement buttons for number inputs.
+     * Only available when type="number"
+     */
+    showSteppers?: boolean;
+    /**
+     * Step value for increment/decrement buttons.
+     */
+    step?: number;
+    /**
+     * Minimum value for number input.
+     */
+    min?: number;
+    /**
+     * 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
      */
@@ -92,6 +116,11 @@ export interface InputProps extends Omit<HTMLInputAttributes, 'onblur' | 'onfocu
      * Event handler for keydown events - receives the standard KeyboardEvent
      */
     onkeydown?: (event: KeyboardEvent) => void;
+    /**
+     * Event handler for numeric value changes - receives the numeric value
+     * Only called when showSteppers is true and value is a valid number
+     */
+    onValueChange?: (value: number) => void;
     /**
      * Additional CSS classes
      */
@@ -107,3 +136,6 @@ export interface InputEvent {
 export interface BlurEvent {
     value: string;
 }
+export interface NumericValueChangeEvent {
+    value: number;
+}

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

@@ -1,11 +1,11 @@
 <script module lang="ts">
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 
-	import ExampleLayout from './ExampleLayout.svelte';
+	import { Wrapper } from './examples';
 
 	const { Story } = defineMeta({
 		title: 'UI/Layout',
-		component: ExampleLayout,
+		component: Wrapper,
 		tags: ['autodocs'],
 		parameters: {
 			layout: 'centered',
@@ -20,5 +20,5 @@
 </script>
 
 <Story name="Default">
-	<ExampleLayout />
+	<Wrapper />
 </Story>

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

@@ -2,7 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 
-	import { globalStore } from '../../../stores';
+	import { useAppContext } from '../../../providers';
 	import {
 		CheckCircleOutlinedIcon,
 		WarningCircleIcon,
@@ -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);
 		}
 
@@ -198,7 +197,7 @@
 
 	<!-- Sidebar -->
 	{#if showSidebar}
-		<div class="sidebar" data-area="sidebar" data-simplebar="">
+		<div class="sidebar" data-area="sidebar">
 			{#if sidebar}
 				{@render sidebar()}
 			{:else}
@@ -217,9 +216,7 @@
 	<div class="main-content" data-area="main">
 		{#if main}
 			<div class="main-content-container">
-				{#if $globalStore.editMode || $globalStore.repairMode}
-					<EditModeMessage />
-				{/if}
+				<EditModeMessage />
 				{@render main()}
 			</div>
 		{:else}
@@ -242,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>
@@ -509,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>;

package/dist/ui/components/layout/common/EditModeMessage.svelte

@@ -1,24 +1,36 @@
 <script lang="ts">
-	import { globalStore } from '../../../../stores';
+	import { useAppContext } from '../../../../providers';
 	import { Pencil, WarningTriangleOutlineIcon } from '../../../icons';
 	import { BRAND } from '../../../../utils';
 
-	import Notification from '../../Notification.svelte';
+	import { Notification } from '../../notification';
 
-	const isEditMode = $derived($globalStore.editMode);
-	const isRepairMode = $derived($globalStore.repairMode);
-	const title = $derived($globalStore.title);
+	const appContext = useAppContext();
+	let appData = $state(appContext.get());
+
+	// Subscribe to context changes
+	appContext.subscribe((data) => {
+		appData = data;
+	});
+
+	const isEditMode = $derived(appData?.editMode);
+	const isRepairMode = $derived(appData?.repairMode);
+	const title = $derived(appData?.title);
+
+	$effect(() => {
+		console.log('appData', { appData, editMode: appData?.editMode });
+	});
 </script>
 
 {#if isEditMode && !isRepairMode}
 	<div class="edit-mode">
 		<Notification
-			type="warning"
+			variant="warning"
 			title="You are in edit mode for {title} {BRAND.COMPONENT}."
 			message={`Make your edits and click on the "Update ${title}" button. You can review and confirm all changes before we proceed with the updates.`}
-			richtextMessage
-			defaultIcon={Pencil}
-			closeIcon={false}
+			richTextMessage={true}
+			icon={Pencil}
+			showCloseButton={false}
 		/>
 	</div>
 {/if}
@@ -26,11 +38,11 @@
 {#if isRepairMode}
 	<div class="edit-mode">
 		<Notification
-			type="warning"
+			variant="warning"
 			title="Component instance not found"
 			message="We have detected {BRAND.COMPONENT} as valid, but we couldn't find the associated configurations. This may be a {BRAND.COMPONENT} from another project. Click the 'Repair' button to fix it."
-			defaultIcon={WarningTriangleOutlineIcon}
-			closeIcon={false}
+			icon={WarningTriangleOutlineIcon}
+			showCloseButton={false}
 		/>
 	</div>
 {/if}

package/dist/ui/components/layout/{ExampleLayout.svelte → examples/ExampleLayout.svelte}

@@ -1,16 +1,16 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 
-	import { globalStore } from '../../../stores';
+	import { useAppContext } from '../../../../providers';
 
-	import { CheckCircleIcon, CodeIcon, InfoIcon, SettingsIcon } from '../../icons';
-	import { Button } from '../button';
-	import { Clickable } from '../clickable';
-	import { Input } from '../input';
-	import { Switch } from '../switch';
-	import Text from '../text/Text.svelte';
-	import Layout from './Layout.svelte';
-	import type { LayoutNotification, LayoutTab } from './types';
+	import { CheckCircleIcon, CodeIcon, InfoIcon, SettingsIcon } from '../../../icons';
+	import { Button } from '../../button';
+	import { Input } from '../../input';
+	import { Section } from '../../section';
+	import { Switch } from '../../switch';
+	import Text from '../../text/Text.svelte';
+	import Layout from '../Layout.svelte';
+	import type { LayoutNotification, LayoutTab } from '../types';
 
 	// Internal state for configuration
 	let activeTab = $state('settings');
@@ -25,28 +25,30 @@
 	let notificationSuccess = $state(true);
 	let inputValue = $state('');
 
+	// Get app context and keep editMode in sync
+	const appContext = useAppContext();
+
+	// Subscribe to context changes to keep local editMode in sync
+	appContext.subscribe((data) => {
+		if (data?.editMode !== undefined && data.editMode !== editMode) {
+			editMode = data.editMode;
+		}
+	});
+
 	// Dummy data for 2 tabs: settings and code
 	const dummyTabs: LayoutTab[] = [
 		{ path: 'settings', name: 'Settings', icon: SettingsIcon, isActive: false },
 		{ path: 'code', name: 'Code', icon: CodeIcon, isActive: false }
 	];
 
-	// Dummy footer buttons
-	const dummyFooterButtons = [
-		{
-			id: 'save' as const,
-			text: 'Save Changes',
-			variant: 'secondary' as const,
-			icon: CheckCircleIcon,
-			onClick: () => console.log('Save clicked')
-		},
-		{
-			id: 'main' as const,
-			text: 'Apply Settings',
-			variant: 'primary' as const,
-			onClick: () => console.log('Apply clicked')
-		}
-	];
+	// Footer button handlers
+	function handleSaveClick() {
+		console.log('Save clicked');
+	}
+
+	function handleApplyClick() {
+		console.log('Apply clicked');
+	}
 
 	// Create tabs with active state
 	let tabs = $derived(
@@ -79,17 +81,19 @@
 	}
 
 	onMount(() => {
-		globalStore.set({
+		appContext.set({
 			editMode: true,
-			componentKey: 'dummy-layout',
 			repairMode: false,
-			formKey: 'dummy-layout',
-			formUpdateKey: 'dummy-layout-update',
 			title: 'Example',
-			state: {
-				random: Math.random()
+			configurator: {
+				configurator: null,
+				configuratorCache: null,
+				hasChanged: false,
+				watchOptions: { watchAll: true, debounceMs: 50 }
 			}
 		});
+		// Initialize local editMode state
+		editMode = true;
 	});
 </script>
 
@@ -181,9 +185,9 @@
 								bind:checked={editMode}
 								id="edit-mode"
 								class="checkbox-input"
-								oninput={() => {
-									editMode = !editMode;
-									globalStore.set({ ...$globalStore, editMode });
+								onchange={() => {
+									const current = appContext.get();
+									appContext.set({ ...current, editMode });
 								}}
 							/>
 							<label for="edit-mode" class="checkbox-label">Edit Mode</label>
@@ -222,7 +226,6 @@
 			{activeTab}
 			{tabs}
 			{switchTab}
-			footer={{ buttons: dummyFooterButtons }}
 			formKey="dummy-layout"
 			{editMode}
 			{showFooter}
@@ -306,12 +309,12 @@
 							width="130px"
 						/>
 					</div>
-					<Clickable disabled>
+					<Section clickable disabled>
 						<Text fontSize="md" fontWeight="normal">Clickable disabled</Text>
-					</Clickable>
-					<Clickable>
+					</Section>
+					<Section clickable>
 						<Text fontSize="md" fontWeight="normal">Clickable enabled</Text>
-					</Clickable>
+					</Section>
 				{:else if activeTab === 'code'}
 					<Text fontSize="xl" fontWeight="normal">Code Editor Tab content</Text>
 				{/if}
@@ -320,6 +323,20 @@
 			{#snippet previewBar()}
 				<Text fontSize="md" fontWeight="normal">Preview bar content</Text>
 			{/snippet}
+
+			{#snippet footer()}
+				<Button
+					variant="secondary"
+					icon={CheckCircleIcon}
+					onclick={handleSaveClick}
+					disabled={editMode}
+				>
+					Save Changes
+				</Button>
+				<Button variant="primary" onclick={handleApplyClick} disabled={editMode}>
+					Apply Settings
+				</Button>
+			{/snippet}
 		</Layout>
 	</div>
 </div>

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

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { GlobalProvider } from '../../../../providers';
+
+	import ExampleLayout from './ExampleLayout.svelte';
+</script>
+
+<GlobalProvider>
+	<ExampleLayout />
+</GlobalProvider>

package/dist/ui/components/{Header.svelte.d.ts → layout/examples/Wrapper.svelte.d.ts}

@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: Props & {
+    (internal: unknown, props: {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -11,10 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Header: $$__sveltets_2_IsomorphicComponent<{
-    title?: string;
-}, {
+declare const Wrapper: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-type Header = InstanceType<typeof Header>;
-export default Header;
+type Wrapper = InstanceType<typeof Wrapper>;
+export default Wrapper;

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

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

package/dist/ui/components/layout/examples/index.js

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

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

@@ -1,3 +1,4 @@
 export { default as Layout } from './Layout.svelte';
-export { default as DummyLayoutWrapper } from './ExampleLayout.svelte';
-export type { LayoutProps, LayoutTab, LayoutFooter } from './types';
+export * from './examples';
+export * from './common';
+export type { LayoutProps, LayoutTab } from './types';

package/dist/ui/components/layout/index.js

@@ -1,2 +1,3 @@
 export { default as Layout } from './Layout.svelte';
-export { default as DummyLayoutWrapper } from './ExampleLayout.svelte';
+export * from './examples';
+export * from './common';

package/dist/ui/components/layout/test-helpers/TestLayoutWithFooter.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { CodeIcon, SettingsIcon } from '../../../icons';
+	import { Button } from '../../button';
+	import Layout from '../Layout.svelte';
+	import type { LayoutProps } from '../types';
+
+	interface TestLayoutWithFooterProps extends Omit<LayoutProps, 'footer'> {
+		footerText?: string;
+	}
+
+	let { footerText = 'Test Button', ...layoutProps }: TestLayoutWithFooterProps = $props();
+</script>
+
+<Layout {...layoutProps}>
+	{#snippet footer()}
+		<Button variant="primary" onclick={() => {}}>
+			{footerText}
+		</Button>
+	{/snippet}
+</Layout>

package/dist/ui/components/layout/test-helpers/TestLayoutWithFooter.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { LayoutProps } from '../types';
+interface TestLayoutWithFooterProps extends Omit<LayoutProps, 'footer'> {
+    footerText?: string;
+}
+declare const TestLayoutWithFooter: import("svelte").Component<TestLayoutWithFooterProps, {}, "">;
+type TestLayoutWithFooter = ReturnType<typeof TestLayoutWithFooter>;
+export default TestLayoutWithFooter;

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

@@ -7,15 +7,6 @@ export interface LayoutTab {
     isActive: boolean;
     hidden?: boolean;
 }
-export interface LayoutFooter {
-    buttons: Array<{
-        id: string;
-        text: string;
-        variant: 'primary' | 'secondary';
-        icon?: Component;
-        onClick?: () => void;
-    }>;
-}
 export interface LayoutNotification {
     path: string;
     success: boolean;
@@ -29,7 +20,7 @@ export interface LayoutProps extends HTMLAttributes<HTMLDivElement> {
     main?: Snippet;
     sidebar?: Snippet;
     previewBar?: Snippet;
-    footer?: LayoutFooter;
+    footer?: Snippet;
     formKey: string;
     editMode?: boolean;
     showFooter?: boolean;