@finsweet/webflow-apps-utils 1.0.6 → 1.0.8

package/dist/index.d.ts

@@ -1,6 +1,3 @@
 export * from './ui';
-export * from './router';
-export * from './stores';
-export * from './providers';
 export * from './utils';
 export * from './types';

package/dist/index.js

@@ -1,6 +1,3 @@
 export * from './ui';
-export * from './router';
-export * from './stores';
-export * from './providers';
 export * from './utils';
 export * from './types';

package/dist/types/dom.d.ts

@@ -0,0 +1 @@
+export type FormField = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;

package/dist/types/dom.js

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

package/dist/types/index.d.ts

@@ -1,4 +1,5 @@
 export * from './auth';
+export * from './dom';
 export * from './customCode';
 export * from './license';
 export * from './webflow';

package/dist/types/index.js

@@ -1,4 +1,5 @@
 export * from './auth';
+export * from './dom';
 export * from './customCode';
 export * from './license';
 export * from './webflow';

package/dist/types/webflow.d.ts

@@ -96,7 +96,7 @@ export type XSCPMetadata = {
         }[];
     };
 };
-type PastedNodes = {
+export type PastedNodes = {
     children: string[];
     classes: string[];
     tag: string;

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

@@ -2,7 +2,6 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 
-	import { useAppContext } from '../../../providers';
 	import {
 		CheckCircleOutlinedIcon,
 		WarningCircleIcon,
@@ -41,6 +40,8 @@
 		containerMode?: boolean;
 		/** Size variant for the footer */
 		footerSize?: 'normal' | 'large';
+		/** Padding for the main content container (CSS value) */
+		mainContentPadding?: string;
 		/** Array of notification objects for tab status indicators */
 		notifications?: Array<{
 			/** Tab path this notification applies to */
@@ -76,6 +77,7 @@
 		sidebarWidth = '274px',
 		containerMode = false,
 		footerSize = 'normal',
+		mainContentPadding = 'var(--Spacing-24, 24px)',
 		notifications = [],
 		sidebar,
 		main,
@@ -240,7 +242,7 @@
 	<!-- Main Content -->
 	<div class="main-content" data-area="main">
 		{#if main}
-			<div class="main-content-container">
+			<div class="main-content-container" style="padding: {mainContentPadding}">
 				{#if showEditModeMessage}
 					<EditModeMessage />
 				{/if}
@@ -462,7 +464,6 @@
 		flex-direction: column;
 		align-items: flex-start;
 		align-self: stretch;
-		padding: var(--Spacing-24, 24px);
 		gap: var(--Spacing-16, 16px);
 	}
 

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

@@ -28,6 +28,8 @@ interface LayoutProps extends HTMLAttributes<HTMLDivElement> {
     containerMode?: boolean;
     /** Size variant for the footer */
     footerSize?: 'normal' | 'large';
+    /** Padding for the main content container (CSS value) */
+    mainContentPadding?: string;
     /** Array of notification objects for tab status indicators */
     notifications?: Array<{
         /** Tab path this notification applies to */

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

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { useAppContext } from '../../../../providers';
 	import { Pencil, WarningTriangleOutlineIcon } from '../../../icons';
+	import { useAppContext } from '../../../providers';
 	import { BRAND } from '../../../../utils';
 
 	import { Notification } from '../../notification';

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 
-	import { useAppContext } from '../../../../providers';
+	import { useAppContext } from '../../../providers';
 
 	import { CheckCircleIcon, CodeIcon, InfoIcon, SettingsIcon } from '../../../icons';
 	import { Button } from '../../button';

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

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

package/dist/ui/components/text/Text.svelte

@@ -43,6 +43,7 @@
 
 		// Link behavior
 		link = false,
+		linkHover = true,
 
 		// Event handlers
 		onclick,
@@ -211,6 +212,7 @@
 		const classes = ['labels'];
 		if (disabled) classes.push('disabled');
 		if (link) classes.push('link');
+		if (link && linkHover) classes.push('link-hover');
 		if (loading) classes.push('is-busy');
 		if (hasPopup && popupConfig.active) classes.push('active');
 		classes.push(className);
@@ -839,8 +841,8 @@
 		border-radius: 4px;
 	}
 
-	.labels.link:hover:not(.disabled),
-	.labels.link.is-busy {
+	.labels.link-hover:hover:not(.disabled),
+	.labels.link-hover.is-busy {
 		background-color: var(--defaultLightHover);
 		border-radius: 4px;
 	}

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

@@ -25,26 +25,48 @@ export interface PopupConfig {
     onclick?: () => void;
 }
 export interface TextProps {
+    /** The text content to display */
     label?: string;
+    /** Additional CSS classes to apply to the component */
     class?: string;
+    /** Whether to render the label as HTML instead of plain text */
     raw?: boolean;
+    /** Whether to capitalize the first letter of the text */
     capitalize?: boolean;
+    /** Whether the component is disabled and non-interactive */
     disabled?: boolean;
+    /** HTML title attribute for accessibility and hover tooltip */
     title?: string;
+    /** Text wrapping behavior - 'nowrap' prevents wrapping, 'normal' allows wrapping */
     wrap?: 'nowrap' | 'normal';
+    /** Horizontal alignment of the text content */
     textAlign?: 'left' | 'center' | 'right';
+    /** Font size - use predefined sizes or custom CSS value */
     fontSize?: TEXT_SIZES | string;
+    /** Font weight - use predefined weights or custom CSS value */
     fontWeight?: TEXT_WEIGHTS | string;
+    /** Text color as any valid CSS color value */
     fontColor?: string;
+    /** Fixed height for the component container */
     height?: string;
+    /** Width at which text will be truncated with ellipsis */
     ellipsisOnWidth?: string;
+    /** Tooltip configuration object with all tooltip-related settings */
     tooltip?: Partial<TooltipProps>;
     /** Specifies whether to show tooltip on the text or icon. Requires icon prop when set to 'icon' */
     tooltipTarget?: 'text' | 'icon';
+    /** Configuration for action popup functionality (delete, reset, etc.) */
     popup?: PopupConfig;
+    /** Icon component to display alongside the text */
     icon?: Component | null;
+    /** Whether to show loading spinner instead of icon */
     loading?: boolean;
+    /** Whether to style the text as a clickable link with pointer cursor */
     link?: boolean;
+    /** Whether to show hover background effect when link is true (default: true) */
+    linkHover?: boolean;
+    /** Custom content snippet to render instead of the label text */
     children?: Snippet;
+    /** Additional pill/badge content snippet to display */
     pill?: Snippet;
 }

package/dist/ui/icons/ChevronIcon.svelte

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
 	<path
 		fill-rule="evenodd"
 		clip-rule="evenodd"

package/dist/ui/index.d.ts

@@ -1,2 +1,6 @@
 export * from './components';
 export * from './icons';
+export * from './utils';
+export * from './stores';
+export * from './providers';
+export * from './router';

package/dist/ui/index.js

@@ -1,2 +1,6 @@
 export * from './components';
 export * from './icons';
+export * from './utils';
+export * from './stores';
+export * from './providers';
+export * from './router';

package/dist/{providers → ui/providers}/GlobalProvider.stories.js

@@ -34,7 +34,7 @@ The \`GlobalProvider\` is a comprehensive context management system built on Sve
 
 \`\`\`svelte
 <script lang="ts">
-	import { GlobalProvider } from './';
+	import { GlobalProvider } from '../../providers';
 
 	const initialContexts = {
 		app: {
@@ -66,7 +66,7 @@ The \`GlobalProvider\` automatically creates these default contexts:
 
 \`\`\`svelte
 <script lang="ts">
-	import { useAppContext, useFormContext, useDataContext } from './';
+	import { useAppContext, useFormContext, useDataContext } from '../../providers';
 
 	const appContext = useAppContext();
 	const formContext = useFormContext();
@@ -141,7 +141,7 @@ The \`GlobalProvider\` includes sophisticated configurator state management with
 
 \`\`\`svelte
 <script lang="ts">
-	import { useConfiguratorContext, useAppContext } from './';
+	import { useConfiguratorContext, useAppContext } from '../../providers';
 
 	// Define your configurator type
 	type MyConfiguratorType = {
@@ -230,7 +230,7 @@ const config6 = { user: { name: 'John', age: 31 }, settings: { theme: 'dark' } }
 ### Generic Context Usage
 
 \`\`\`typescript
-import type { ContextOperations, AppContextData, DataContextData } from './';
+import type { ContextOperations, AppContextData, DataContextData } from '../../providers';
 
 // For custom contexts
 const userContext: ContextOperations<UserType> = useContext<UserType>('user');
@@ -266,7 +266,7 @@ The GlobalProvider system includes several powerful utility functions for advanc
 For detailed object comparison and change analysis:
 
 \`\`\`typescript
-import { hasChangesViaDiff, getDetailedDiff, compareKeys } from './';
+import { hasChangesViaDiff, getDetailedDiff, compareKeys } from '../../providers';
 
 // Quick change detection
 const hasChanges = hasChangesViaDiff(oldConfig, newConfig);
@@ -291,7 +291,7 @@ import {
 	validateWatchOptions,
 	extractKeys,
 	createDebouncedUpdate
-} from './';
+} from '../../providers';
 
 // Create default configurator state
 const defaultState = createDefaultConfiguratorState<MyConfigType>();
@@ -313,7 +313,7 @@ const debouncedSave = createDebouncedUpdate(saveConfig, 300);
 ### Performance Optimization Helpers
 
 \`\`\`typescript
-import { createDebouncedUpdate } from './';
+import { createDebouncedUpdate } from '../../providers';
 
 // Create debounced functions for expensive operations
 const debouncedValidation = createDebouncedUpdate((config) => {

package/dist/{providers → ui/providers}/GlobalProvider.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getFinsweetComponentsEnvironment } from '../utils/index.js';
+	import { getFinsweetComponentsEnvironment } from '../../utils/index.js';
 
 	import { createGlobalContext, setGlobalContext } from './globalContext.svelte';
 	import type { GlobalProviderProps } from './types';

package/dist/{router → ui/router}/providers/RouterProvider.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { onDestroy, onMount, setContext, type Snippet } from 'svelte';
 
+	import { LoadingScreen } from '../..';
 	import type { RouteConfig, Router } from '../router.svelte';
-	import { LoadingScreen } from '../../ui';
 
 	interface Props {
 		/** Router instance to use for routing */

package/dist/{router → ui/router}/router.svelte.d.ts

@@ -102,4 +102,3 @@ export declare function createRouter(config?: RouterConfig): Router;
  */
 export declare const router: Router;
 export * from './hooks.svelte.js';
-export * from './providers/index.js';

package/dist/{router → ui/router}/router.svelte.js

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { routerStore } from '../stores';
+import { routerStore } from '../../utils/stores';
 /**
  * Custom Client-Side Router for Svelte 5
  */
@@ -394,4 +394,5 @@ export function createRouter(config) {
 export const router = createRouter();
 // Export hooks and utilities
 export * from './hooks.svelte.js';
-export * from './providers/index.js';
+// Providers moved to main package - import from @finsweet/webflow-apps-utils directly
+// export * from './providers/index.js';

package/dist/{stores → ui/stores}/forms/Form.stories.js

@@ -35,7 +35,7 @@ The form validation system provides:
 The main class for creating and managing form validation state.
 
 \`\`\`typescript
-import { FormValidator } from './';
+import { FormValidator } from '../../../stores/forms';
 
 // Define your form data structure
 interface MyFormData {
@@ -196,7 +196,7 @@ The system maintains a global registry of all forms for cross-component access.
 Retrieve a form instance by its identifier:
 
 \`\`\`typescript
-import { getFormById } from './';
+import { getFormById } from '../../../stores/forms';
 
 const form = getFormById('my-form-id');
 if (form) {
@@ -209,7 +209,7 @@ if (form) {
 Check if a specific form is valid:
 
 \`\`\`typescript
-import { isFormValid } from './';
+import { isFormValid } from '../../../stores/forms';
 
 if (isFormValid('my-form-id')) {
 	console.log('Form is valid!');
@@ -221,7 +221,7 @@ if (isFormValid('my-form-id')) {
 Get error messages for a specific form:
 
 \`\`\`typescript
-import { getFormErrors } from './';
+import { getFormErrors } from '../../../stores/forms';
 
 const errors = getFormErrors('my-form-id');
 console.log(errors);
@@ -232,7 +232,7 @@ console.log(errors);
 Reset a form by its identifier:
 
 \`\`\`typescript
-import { resetForm } from './';
+import { resetForm } from '../../../stores/forms';
 
 resetForm('my-form-id');
 \`\`\`

package/dist/{stores → ui/stores}/forms/FormDemo.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { FormValidator } from '../forms';
+	import { FormValidator } from '../form';
 
 	interface DemoFormData {
 		name: string;

package/dist/{stores → ui/stores}/index.d.ts

@@ -1,6 +1,5 @@
 export * from './breakpoints';
-export * from './forms';
+export * from './form';
 export * from './componentInjectErrors';
-export * from './router';
 export * from './showConfirmActionModal';
 export * from './siteInfo';

package/dist/{stores → ui/stores}/index.js

@@ -1,6 +1,5 @@
 export * from './breakpoints';
-export * from './forms';
+export * from './form';
 export * from './componentInjectErrors';
-export * from './router';
 export * from './showConfirmActionModal';
 export * from './siteInfo';

package/dist/ui/utils/api/checkIfAppModeIsDesign.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Checks if the app mode is design and shows error notification if not.
+ */
+export declare const checkIfAppModeIsDesign: () => Promise<boolean>;

package/dist/ui/utils/api/checkIfAppModeIsDesign.js

@@ -0,0 +1,19 @@
+/**
+ * Checks if the app mode is design and shows error notification if not.
+ */
+export const checkIfAppModeIsDesign = async () => {
+    const capabilities = await webflow.canForAppMode([
+        webflow.appModes.canDesign,
+        webflow.appModes.canEdit
+    ]);
+    if (capabilities.canDesign) {
+        // Proceed with the action
+        return true;
+    }
+    // Provide feedback to the user
+    await webflow.notify({
+        type: 'Error',
+        message: 'This action cannot be performed right now. Ensure you are working in the Primary Locale, on the Main Branch, and in design mode.'
+    });
+    return false;
+};

package/dist/ui/utils/api/clipboard/handlePaste.d.ts

@@ -0,0 +1,15 @@
+import type { XSCPMetadata } from '../../../../types';
+/**
+ * Processes pasted component data to validate Finsweet components.
+ */
+export declare const processPastedComponent: (pasteData: XSCPMetadata, component: string) => {
+    data: XSCPMetadata;
+    key: string;
+} | undefined;
+/**
+ * Handles pasting of Webflow components from clipboard.
+ */
+export declare const handlePasteXSCP: (e: ClipboardEvent, component: string) => {
+    data: XSCPMetadata;
+    key: string;
+} | undefined;

package/dist/ui/utils/api/clipboard/handlePaste.js

@@ -0,0 +1,49 @@
+import { getLogger } from '../../../../utils/logger';
+const logger = getLogger('webflow-apps-ui-utils');
+/**
+ * Processes pasted component data to validate Finsweet components.
+ */
+export const processPastedComponent = (pasteData, component) => {
+    const valid = pasteData?.payload?.nodes?.some((node) => node?.data?.xattr?.some((attr) => {
+        if (component === 'consent') {
+            // consent is kinda different
+            const bannerFound = attr.name.includes(`fs-consent-element`) && attr.value === 'banner';
+            const wrapperFound = attr.name.includes(`fs-consent-element`) && attr.value === 'wrapper';
+            return bannerFound || wrapperFound;
+        }
+        return attr.name.includes(`fs-${component}-instance`);
+    }));
+    if (valid) {
+        return { data: pasteData, key: component };
+    }
+};
+/**
+ * Handles pasting of Webflow components from clipboard.
+ */
+export const handlePasteXSCP = (e, component) => {
+    if (!e.clipboardData?.types.includes('application/json'))
+        return;
+    const data = e.clipboardData?.getData('application/json');
+    const clipboard = JSON.parse(data);
+    if (clipboard?.type === '@webflow/XscpData') {
+        try {
+            const data = e.clipboardData.getData('application/json');
+            const clipboard = JSON.parse(data);
+            if (clipboard?.type === '@webflow/XscpData') {
+                return processPastedComponent(clipboard, component);
+            }
+            webflow.notify({
+                type: 'Error',
+                message: 'Invalid! You can only paste valid Finsweet Components.'
+            });
+        }
+        catch (error) {
+            logger.error({}, 'handlePasteXSCP', error);
+            webflow.notify({
+                type: 'Error',
+                message: 'Invalid! You can only paste valid Finsweet Components.'
+            });
+            return;
+        }
+    }
+};

package/dist/ui/utils/api/clipboard/index.d.ts

@@ -0,0 +1 @@
+export * from './handlePaste';

package/dist/ui/utils/api/clipboard/index.js

@@ -0,0 +1 @@
+export * from './handlePaste';

package/dist/ui/utils/api/getAllAssets.d.ts

@@ -0,0 +1,11 @@
+export interface AllAssets {
+    name: string;
+    url: string;
+    mimeType: string;
+    altText: string;
+    asset: Asset;
+}
+/**
+ * Gets all assets from the Webflow Canvas with their metadata.
+ */
+export declare const getAllAssets: () => Promise<AllAssets[]>;

package/dist/ui/utils/api/getAllAssets.js

@@ -0,0 +1,20 @@
+/**
+ * Gets all assets from the Webflow Canvas with their metadata.
+ */
+export const getAllAssets = async () => {
+    const assets = await webflow.getAllAssets();
+    const assetPromises = assets.map(async (asset) => {
+        const url = await asset.getUrl();
+        const name = await asset.getName();
+        const mimeType = await asset.getMimeType();
+        const altText = (await asset.getAltText()) ?? '';
+        return {
+            name,
+            url,
+            mimeType,
+            altText,
+            asset
+        };
+    });
+    return await Promise.all(assetPromises);
+};

package/dist/ui/utils/api/getFinsweetComponentsEnvironment.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Gets the Finsweet components environment configuration.
+ */
+export declare const getFinsweetComponentsEnvironment: () => {
+    development: boolean;
+    coreScript: string;
+    api: string;
+};

package/dist/ui/utils/api/getFinsweetComponentsEnvironment.js

@@ -0,0 +1,66 @@
+import { COMPONENTS_CORE_SCRIPT, COMPONENTS_CORE_SCRIPT_LOCAL, COMPONENTS_SERVER_DEV_ENDPOINT, COMPONENTS_SERVER_DEV_ENDPOINT_LOCAL, COMPONENTS_SERVER_PROD_ENDPOINT, getLocalStorage } from '../../../utils';
+const DEV_MODE_KEY = 'fsComponentsDevMode';
+const DEV_MODE_SCRIPT_KEY = 'fsComponentsDevModeScript';
+const DEV_MODE_API_KEY = 'fsComponentsDevModeApi';
+const URL_DEV_MODE_KEY = 'dev';
+const URL_DEV_MODE_SCRIPT_KEY = 'script';
+const URL_DEV_MODE_API_KEY = 'api';
+let lastLogTime = 0;
+const LOG_THROTTLE_MS = 3000;
+/**
+ * Gets a parameter value from the URL search params.
+ */
+const getUrlParam = (key) => {
+    if (typeof window === 'undefined')
+        return null;
+    try {
+        const urlParams = new URLSearchParams(window.location.search);
+        return urlParams.get(key);
+    }
+    catch (e) {
+        console.error('Error getting URL parameter:', e);
+        return null;
+    }
+};
+/**
+ * Throttled console log that only logs once within the throttle interval.
+ */
+const throttledLog = (message, data) => {
+    const now = Date.now();
+    if (now - lastLogTime >= LOG_THROTTLE_MS) {
+        console.log(message, data || '');
+        lastLogTime = now;
+    }
+};
+/**
+ * Gets the Finsweet components environment configuration.
+ */
+export const getFinsweetComponentsEnvironment = () => {
+    const devFromUrl = getUrlParam(URL_DEV_MODE_KEY);
+    const scriptFromUrl = getUrlParam(URL_DEV_MODE_SCRIPT_KEY);
+    const apiFromUrl = getUrlParam(URL_DEV_MODE_API_KEY);
+    const dev = devFromUrl !== null ? devFromUrl === 'true' : getLocalStorage(DEV_MODE_KEY) === 'true';
+    let script = scriptFromUrl || getLocalStorage(DEV_MODE_SCRIPT_KEY) || COMPONENTS_CORE_SCRIPT;
+    let api = dev
+        ? apiFromUrl || getLocalStorage(DEV_MODE_API_KEY) || COMPONENTS_SERVER_DEV_ENDPOINT
+        : COMPONENTS_SERVER_PROD_ENDPOINT;
+    const isBrowser = typeof window !== 'undefined';
+    const isLocalhost = isBrowser && window?.location?.hostname?.includes('localhost');
+    //if localhost then use local scripts
+    if (isLocalhost) {
+        script = COMPONENTS_CORE_SCRIPT_LOCAL;
+        api = COMPONENTS_SERVER_DEV_ENDPOINT_LOCAL;
+    }
+    const development = !!dev || isLocalhost;
+    if (development) {
+        throttledLog(`\n\nFinsweet Components Environment: 
+      - API: ${api}
+      - Core script: ${script}
+      - Development mode: ${development ? 'Yes' : 'No'}\n\n`);
+    }
+    return {
+        development,
+        coreScript: script,
+        api
+    };
+};

package/dist/ui/utils/api/index.d.ts

@@ -0,0 +1,5 @@
+export * from './checkIfAppModeIsDesign';
+export * from './clipboard';
+export * from './getAllAssets';
+export * from './getFinsweetComponentsEnvironment';
+export * from './insertWithXSCP';

package/dist/ui/utils/api/index.js

@@ -0,0 +1,5 @@
+export * from './checkIfAppModeIsDesign';
+export * from './clipboard';
+export * from './getAllAssets';
+export * from './getFinsweetComponentsEnvironment';
+export * from './insertWithXSCP';

package/dist/ui/utils/api/insertWithXSCP.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Inserts a template into the Designer Canvas using XSCP APIs.
+ */
+export declare const insertWithXSCP: (template: string) => Promise<void>;

package/dist/ui/utils/api/insertWithXSCP.js

@@ -0,0 +1,12 @@
+/**
+ * Inserts a template into the Designer Canvas using XSCP APIs.
+ */
+export const insertWithXSCP = async (template) => {
+    try {
+        // @ts-expect-error - typings not available for xscp
+        await webflow._internal.xscp(template);
+    }
+    catch (error) {
+        throw new Error(`Failed to insert template with XSCP: ${error}`);
+    }
+};

package/dist/{utils → ui/utils}/auth/crossWindowLogin.d.ts

@@ -1,4 +1,4 @@
-import type { FinsweetAuth } from '../../types';
+import type { FinsweetAuth } from '../../../types';
 /**
  * Opens a popup window for cross-window authentication with Auth0.
  */