@finsweet/webflow-apps-utils 1.0.7 → 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/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,

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/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,7 +1,5 @@
 export * from './breakpoints';
-export * from './forms';
+export * from './form';
 export * from './componentInjectErrors';
-export * from './isPreviewMode';
-export * from './router';
 export * from './showConfirmActionModal';
 export * from './siteInfo';

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

@@ -1,7 +1,5 @@
 export * from './breakpoints';
-export * from './forms';
+export * from './form';
 export * from './componentInjectErrors';
-export * from './isPreviewMode';
-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.
  */

package/dist/{utils → ui/utils}/auth/crossWindowLogin.js

@@ -1,4 +1,4 @@
-import { AUTH0_AUDIENCE, AUTH0_CLIENT_ID, AUTH0_LOGIN_URL, AUTH0_REDIRECT_URL, AUTH0_SCOPE, PROD_FINSWEEET_ACCOUNTS_ORIGIN } from '../constants';
+import { AUTH0_AUDIENCE, AUTH0_CLIENT_ID, AUTH0_LOGIN_URL, AUTH0_REDIRECT_URL, AUTH0_SCOPE, PROD_FINSWEEET_ACCOUNTS_ORIGIN } from '../../../utils/constants';
 /**
  * Opens a popup window for cross-window authentication with Auth0.
  */

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

@@ -1,4 +1,4 @@
-import type { FinsweetAuth } from '../../types';
+import type { FinsweetAuth } from '../../../types';
 /**
  * Store for the Finsweet user data.
  */

package/dist/{utils → ui/utils}/auth/index.js

@@ -1,12 +1,10 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import Cookies from 'js-cookie';
 import { get, writable } from 'svelte/store';
+import { getLocalStorage, removeLocalStorage, setLocalStorage } from '../../../utils';
+import { FINSWEET_SUBSCRIPTIONS_ENDPOINT, FINSWEET_SUBSCRIPTIONS_ENDPOINT_STAGING } from '../../../utils/constants';
 import { getFinsweetComponentsEnvironment } from '../api';
-import { getLocalStorage, removeLocalStorage, setLocalStorage } from '../browser-storage';
-import { FINSWEET_SUBSCRIPTIONS_ENDPOINT, FINSWEET_SUBSCRIPTIONS_ENDPOINT_STAGING } from '../constants';
-import { getLogger } from '../logger';
 import { crossWindowLogin } from './crossWindowLogin';
-const logger = getLogger('webflow-apps-ui-utils');
 /**
  * Store for the Finsweet user data.
  */
@@ -51,7 +49,7 @@ export const getSubscriptions = async (token) => {
         return data;
     }
     catch (error) {
-        logger.error({}, 'Failed to fetch subscriptions', error);
+        console.error('Failed to fetch subscriptions', error);
         return [];
     }
 };
@@ -95,7 +93,7 @@ export const handleLogin = async () => {
     }
     catch (error) {
         const err = error;
-        logger.error({}, 'Login failed:', err.message);
+        console.error('Login failed:', err.message);
         finsweetUser.set(null);
         webflow.notify({
             type: 'Error',

package/dist/{utils → ui/utils}/diff-mapper/DiffMapper.stories.js

@@ -131,7 +131,7 @@ Automatic cache cleanup when size exceeds 100 entries or TTL expires.
 The diff mapper is seamlessly integrated with the GlobalProvider system:
 
 \`\`\`typescript
-import { useConfiguratorContext } from '../../providers';
+import { useConfiguratorContext } from '../../../providers';
 
 const configurator = useConfiguratorContext<MyConfigType>();
 
@@ -155,7 +155,7 @@ import {
 	validateWatchOptions,
 	extractKeys,
 	createDebouncedUpdate
-} from '../../providers';
+} from '../../../providers';
 
 // Create default configurator state
 const defaultState = createDefaultConfiguratorState<MyConfigType>();

package/dist/{utils → ui/utils}/diff-mapper/DiffMapperDemo.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getDetailedDiff, hasChangesViaDiff } from '../../providers/configuratorUtils';
+	import { getDetailedDiff, hasChangesViaDiff } from '../../providers';
 
 	let output = '';
 	let coercionExamples = '';

package/dist/{utils → ui/utils}/helpers/goto.js

@@ -1,8 +1,6 @@
 import { get } from 'svelte/store';
 import { navigate } from 'svelte-routing';
-import { routerStore } from '../../stores';
-import { getLogger } from '../logger';
-const logger = getLogger('webflow-apps-ui-utils');
+import { routerStore } from '../../../utils/stores';
 /**
  * Normalizes a URL path to ensure proper formatting.
  */
@@ -21,7 +19,7 @@ const normalizeUrlPath = (path, hash) => {
 export const goto = (path = '/', state = {}) => {
     const { hash = '' } = get(routerStore);
     if (!hash) {
-        logger.error({}, 'goto method found no router hash in the router store. Contact Finsweet support.');
+        console.error('goto method found no router hash in the router store. Contact Finsweet support.');
         return;
     }
     const url = normalizeUrlPath(`/${hash}/${path}`, hash);

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

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

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

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

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

@@ -0,0 +1,3 @@
+export * from './auth';
+export * from './diff-mapper';
+export * from './helpers';

package/dist/ui/utils/index.js

@@ -0,0 +1,3 @@
+export * from './auth';
+export * from './diff-mapper';
+export * from './helpers';

package/dist/utils/custom-code/api.d.ts

@@ -2,7 +2,7 @@ import type { CustomCodeBlock } from '../../types';
 /**
  * Gets stored Custom Code blocks by ID or returns all if no ID provided.
  */
-export declare const getCustomCode: (id?: string) => Promise<Array<CustomCodeBlock>>;
+export declare const getCustomCode: (displayName?: string) => Promise<Array<CustomCodeBlock>>;
 /**
  * Sets custom code blocks in the site.
  */

package/dist/utils/custom-code/api.js

@@ -1,17 +1,15 @@
-import { getLogger } from '../logger';
-const logger = getLogger('webflow-apps-ui-utils');
 /**
  * Gets stored Custom Code blocks by ID or returns all if no ID provided.
  */
-export const getCustomCode = async (id) => {
+export const getCustomCode = async (displayName) => {
     //TODO: update this when typings are available plus any other place we have disabled this warning.
     //@ts-expect-error - not available in typings for now
     const customCodeBlock = (await webflow.getSiteCustomCode());
     if (!customCodeBlock || customCodeBlock.length === 0)
         return [];
-    if (!id)
+    if (!displayName)
         return customCodeBlock;
-    const storedConfigs = customCodeBlock.filter((block) => block.id === id);
+    const storedConfigs = customCodeBlock.filter((block) => block.id === displayName);
     if (storedConfigs)
         return storedConfigs;
     return [];
@@ -25,7 +23,7 @@ export const setCustomCode = async (customCodeBlock) => {
         await webflow.setSiteCustomCode(customCodeBlock);
     }
     catch (error) {
-        logger.error({}, 'Failed to save custom code block', error, customCodeBlock);
+        console.error('Failed to save custom code block', error, customCodeBlock);
     }
 };
 /**

package/dist/utils/custom-code/configs.d.ts

@@ -12,11 +12,12 @@ export type CustomCodeConfigsStore = {
 export declare const customCodeConfigsStore: import("svelte/store").Writable<CustomCodeConfigsStore>;
 /**
  * Get configs from custom code.
+ * @param displayName - The name of the custom code block to get configs from.
  */
-export declare const getProjectConfigs: () => Promise<any>;
+export declare const getProjectConfigs: (displayName: string) => Promise<any>;
 /**
  * Fetches configs stored in custom code for a given component.
  * @param component
  * @returns
  */
-export declare const getComponentConfigs: (component: string) => Promise<any>;
+export declare const getComponentConfigs: (component: string, displayName: string) => Promise<any>;

package/dist/utils/custom-code/configs.js

@@ -1,8 +1,5 @@
 import { writable } from 'svelte/store';
-import { getLogger } from '../logger';
 import { getCustomCode } from './api';
-const logger = getLogger('utils');
-const DISPLAY_NAME = 'finsweetcomponentsconfig';
 /**
  * Store for Custom Code stored Component configs
  */
@@ -13,9 +10,10 @@ export const componentConfigsStore = writable(null);
 export const customCodeConfigsStore = writable([]);
 /**
  * Get configs from custom code.
+ * @param displayName - The name of the custom code block to get configs from.
  */
-export const getProjectConfigs = async () => {
-    const [customCodeBlock] = await getCustomCode(DISPLAY_NAME);
+export const getProjectConfigs = async (displayName) => {
+    const [customCodeBlock] = await getCustomCode(displayName);
     if (!customCodeBlock || !customCodeBlock.hostedLocation) {
         return null;
     }
@@ -24,7 +22,6 @@ export const getProjectConfigs = async () => {
     const configs = await import(/* @vite-ignore */ customCodeBlock.hostedLocation);
     window.isLoadingCustomCodeConfigs = false;
     customCodeConfigsStore.set(configs);
-    logger.log({}, 'Project custom code configs', configs);
     return configs;
 };
 /**
@@ -32,8 +29,8 @@ export const getProjectConfigs = async () => {
  * @param component
  * @returns
  */
-export const getComponentConfigs = async (component) => {
-    const customCodeBlock = await getProjectConfigs();
+export const getComponentConfigs = async (component, displayName) => {
+    const customCodeBlock = await getProjectConfigs(displayName);
     if (!customCodeBlock || Object.keys(customCodeBlock[component]).length === 0)
         return null;
     return customCodeBlock[component];

package/dist/utils/custom-code/index.d.ts

@@ -1,2 +1,2 @@
-export * from './api';
 export * from './configs';
+export * from './api';

package/dist/utils/custom-code/index.js

@@ -1,2 +1,2 @@
-export * from './api';
 export * from './configs';
+export * from './api';

package/dist/utils/helpers/index.d.ts

@@ -1,7 +1,6 @@
 export * from './capitalizeFirstLetter';
 export * from './cleanupTooltipMessage';
 export * from './encodeDecodeConfigs';
-export * from './goto';
 export * from './dom';
 export * from './events';
 export * from './forms';

package/dist/utils/helpers/index.js

@@ -1,7 +1,6 @@
 export * from './capitalizeFirstLetter';
 export * from './cleanupTooltipMessage';
 export * from './encodeDecodeConfigs';
-export * from './goto';
 export * from './dom';
 export * from './events';
 export * from './forms';

package/dist/utils/index.d.ts

@@ -1,11 +1,10 @@
 export * from './animations';
 export * from './api';
-export * from './auth';
 export * from './browser-storage';
-export * from './constants';
 export * from './custom-code';
-export * from './diff-mapper';
+export * from './constants';
 export * from './helpers';
 export * from './logger';
 export * from './webflow';
 export * from './webflow-canvas';
+export type * from '../types';

package/dist/utils/index.js

@@ -1,10 +1,8 @@
 export * from './animations';
 export * from './api';
-export * from './auth';
 export * from './browser-storage';
-export * from './constants';
 export * from './custom-code';
-export * from './diff-mapper';
+export * from './constants';
 export * from './helpers';
 export * from './logger';
 export * from './webflow';

package/dist/utils/logger/index.d.ts

@@ -1,5 +1,4 @@
-export type PredefinedLoggerContext = 'finsweet-components' | 'webflow-apps-ui-utils' | 'fast-search' | 'fs-cmp';
-export type LoggerContext = PredefinedLoggerContext | (string & Record<never, never>);
+export type LoggerContext = string & Record<never, never>;
 export interface LogData {
     [key: string]: any;
 }

package/dist/utils/stores/index.d.ts

@@ -0,0 +1,2 @@
+export * from './isPreviewMode';
+export * from './router';

package/dist/utils/stores/index.js

@@ -0,0 +1,2 @@
+export * from './isPreviewMode';
+export * from './router';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finsweet/webflow-apps-utils",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "Shared utilities for Webflow apps",
   "homepage": "https://github.com/finsweet/webflow-apps-utils",
   "repository": {
@@ -18,9 +18,18 @@
   "type": "module",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "svelte": "./dist/index.js",
-      "default": "./dist/index.js"
+      "types": "./dist/ui/index.d.ts",
+      "svelte": "./dist/ui/index.js",
+      "default": "./dist/ui/index.js"
+    },
+    "./utils": {
+      "types": "./dist/utils/index.d.ts",
+      "default": "./dist/utils/index.js"
+    },
+    "./ui": {
+      "types": "./dist/ui/index.d.ts",
+      "svelte": "./dist/ui/index.js",
+      "default": "./dist/ui/index.js"
     },
     "./index.css": "./dist/ui/index.css"
   },