@finsweet/webflow-apps-utils 1.0.7 → 1.0.9

package/dist/{router → ui/router}/examples/RouterExample.svelte

@@ -36,7 +36,6 @@
 	<RouterProvider {router}>
 		{#snippet children({ router, currentRoute, currentLocation, isNavigating })}
 			<div class="app-layout">
-				<!-- Navigation -->
 				<nav class="navigation">
 					<div class="nav-brand">
 						<h3>My App</h3>
@@ -57,7 +56,6 @@
 					</ul>
 				</nav>
 
-				<!-- Loading indicator -->
 				{#if isNavigating}
 					<div class="loading-indicator">
 						<div class="spinner"></div>
@@ -65,7 +63,6 @@
 					</div>
 				{/if}
 
-				<!-- Route information display -->
 				<div class="route-info">
 					<strong>Current Route:</strong>
 					{currentLocation?.pathname || 'None'}<br />
@@ -77,9 +74,7 @@
 					{currentLocation?.search || 'None'}
 				</div>
 
-				<!-- Main content area -->
 				<main class="main-content">
-					<!-- Home Route -->
 					<Route path="/">
 						{#snippet children({ params, location, router, isActive })}
 							{#if isActive}
@@ -88,7 +83,6 @@
 						{/snippet}
 					</Route>
 
-					<!-- About Route (with optional section parameter) -->
 					<Route path="/about">
 						{#snippet children({ params, location, router, isActive })}
 							{#if isActive}
@@ -97,7 +91,6 @@
 						{/snippet}
 					</Route>
 
-					<!-- About with section parameter -->
 					<Route path="/about/:section">
 						{#snippet children({ params, location, router, isActive })}
 							{#if isActive}
@@ -106,7 +99,6 @@
 						{/snippet}
 					</Route>
 
-					<!-- Fallback route (404) -->
 					<Route path="*" exact={false}>
 						{#snippet children({ params, location, router, isActive })}
 							{#if isActive && !router.isActive('/') && !router.isActive('/about')}
@@ -116,7 +108,6 @@
 					</Route>
 				</main>
 
-				<!-- Router controls -->
 				<div class="router-controls">
 					<h4>Router Controls</h4>
 					<div class="controls-grid">

package/dist/{router → ui/router}/examples/pages/AboutPage.svelte

@@ -74,7 +74,6 @@
 
 <div class="about-page">
 	{#if section && currentSection}
-		<!-- Section-specific content -->
 		<div class="section-header">
 			<button class="back-button" onclick={() => router.navigate('/about')}>
 				← Back to About
@@ -158,7 +157,6 @@
 			{/if}
 		</div>
 
-		<!-- Navigation to other sections -->
 		<div class="section-navigation">
 			<h3>Explore More</h3>
 			<div class="nav-buttons">
@@ -172,7 +170,6 @@
 			</div>
 		</div>
 	{:else}
-		<!-- Main about page -->
 		<div class="main-about">
 			<header class="about-header">
 				<h1>About Our Company</h1>
@@ -232,7 +229,6 @@
 		</div>
 	{/if}
 
-	<!-- Debug information -->
 	<div class="debug-section">
 		<h3>Route Debug Information</h3>
 		<div class="debug-info">

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

@@ -106,7 +106,6 @@
 	});
 </script>
 
-<!-- Render as anchor tag by default -->
 {#if element === 'a'}
 	<a
 		{href}
@@ -122,7 +121,6 @@
 		{/if}
 	</a>
 {:else if element === 'button'}
-	<!-- Render as button -->
 	<button
 		type="button"
 		class={className}

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

@@ -64,14 +64,11 @@
 	});
 </script>
 
-<!-- Render content only if route is active -->
 {#if isActive}
 	{#if component}
-		<!-- Render provided component with route props -->
 		{@const Component = component}
 		<Component params={routeParams} location={currentLocation} {router} />
 	{:else if children}
-		<!-- Render children snippet with route data -->
 		{@render children({
 			params: routeParams,
 			location: currentLocation,

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/ui/stores/form.d.ts

@@ -0,0 +1,280 @@
+import { derived } from 'svelte/store';
+import { z } from 'zod';
+interface FormState<T> {
+    values: T;
+    errors: Record<keyof T, string[]>;
+    touched: Record<keyof T, boolean>;
+    isValid: boolean;
+    isDirty: boolean;
+    isSubmitting: boolean;
+}
+/**
+ * Generic Form Manager for any Zod schema with cross-component field support
+ */
+export declare class FormManager<T extends Record<string, unknown>> {
+    private schema;
+    private _store;
+    private initialValues;
+    private identifier;
+    private fieldRegistrations;
+    readonly values: ReturnType<typeof derived<typeof this._store, T>>;
+    readonly errors: ReturnType<typeof derived<typeof this._store, Record<keyof T, string[]>>>;
+    readonly touched: ReturnType<typeof derived<typeof this._store, Record<keyof T, boolean>>>;
+    readonly isValid: ReturnType<typeof derived<typeof this._store, boolean>>;
+    readonly isDirty: ReturnType<typeof derived<typeof this._store, boolean>>;
+    readonly isSubmitting: ReturnType<typeof derived<typeof this._store, boolean>>;
+    constructor(identifier: string, schema: z.ZodType<T>, initialValues: T);
+    /**
+     * Register a field with the form for cross-component management
+     */
+    registerField<K extends keyof T>(fieldName: K, options?: {
+        validate?: (value: T[K]) => string | null;
+        transform?: (value: unknown) => T[K];
+    }): {
+        value: import("svelte/store").Readable<T[K]>;
+        error: import("svelte/store").Readable<Record<keyof T, string[]>[K]>;
+        touched: import("svelte/store").Readable<false | Record<keyof T, boolean>[K]>;
+        setValue: (value: T[K]) => void;
+        setTouched: () => void;
+        validate: () => string[];
+    };
+    /**
+     * Set the value of a specific field
+     */
+    setField<K extends keyof T>(field: K, value: T[K]): void;
+    /**
+     * Set multiple field values at once
+     */
+    setFields(values: Partial<T>): void;
+    /**
+     * Set a field as touched without changing its value
+     */
+    setTouched<K extends keyof T>(field: K): void;
+    /**
+     * Validate a specific field
+     */
+    validateField<K extends keyof T>(field: K): string[];
+    /**
+     * Reset the form to initial values
+     */
+    reset(): void;
+    /**
+     * Set the form as submitting
+     */
+    setSubmitting(isSubmitting: boolean): void;
+    /**
+     * Update the schema (useful for dynamic forms)
+     */
+    updateSchema(newSchema: z.ZodType<T>): void;
+    /**
+     * Validate the entire form
+     */
+    private validate;
+    /**
+     * Get the current state of the form
+     */
+    getState(): FormState<T>;
+    /**
+     * Destroy the form and clean up resources
+     */
+    destroy(): void;
+}
+/**
+ * Creates a generic form with Zod validation
+ */
+export declare function createGenericForm<T extends Record<string, unknown>>(identifier: string, schema: z.ZodType<T>, initialValues: T): {
+    values: import("svelte/store").Readable<T>;
+    errors: import("svelte/store").Readable<Record<keyof T, string[]>>;
+    touched: import("svelte/store").Readable<Record<keyof T, boolean>>;
+    isValid: import("svelte/store").Readable<boolean>;
+    isDirty: import("svelte/store").Readable<boolean>;
+    isSubmitting: import("svelte/store").Readable<boolean>;
+    setField: <K extends keyof T>(field: K, value: T[K]) => void;
+    setFields: (values: Partial<T>) => void;
+    setTouched: <K extends keyof T>(field: K) => void;
+    reset: () => void;
+    setSubmitting: (isSubmitting: boolean) => void;
+    updateSchema: (newSchema: z.ZodType<T, z.ZodTypeDef, T>) => void;
+    registerField: <K extends keyof T>(fieldName: K, options?: {
+        validate?: ((value: T[K]) => string | null) | undefined;
+        transform?: ((value: unknown) => T[K]) | undefined;
+    } | undefined) => {
+        value: import("svelte/store").Readable<T[K]>;
+        error: import("svelte/store").Readable<Record<keyof T, string[]>[K]>;
+        touched: import("svelte/store").Readable<false | Record<keyof T, boolean>[K]>;
+        setValue: (value: T[K]) => void;
+        setTouched: () => void;
+        validate: () => string[];
+    };
+    validateField: <K extends keyof T>(field: K) => string[];
+    getState: () => FormState<T>;
+    destroy: () => void;
+};
+/**
+ * Creates a form validation utility with Svelte 5 reactive stores
+ * @param identifier - Unique identifier for the form
+ * @param options - Configuration options
+ */
+export declare class FormValidator<T extends {
+    name: string;
+    instance: string;
+    class: string;
+}> {
+    private schema;
+    private _store;
+    private instancesSet;
+    private initialValues;
+    private identifier;
+    private currentInstanceToIgnore;
+    private classValidationEnabled;
+    readonly values: ReturnType<typeof derived<typeof this._store, T>>;
+    readonly errors: ReturnType<typeof derived<typeof this._store, Record<keyof T, string[]>>>;
+    readonly touched: ReturnType<typeof derived<typeof this._store, Record<keyof T, boolean>>>;
+    readonly isValid: ReturnType<typeof derived<typeof this._store, boolean>>;
+    readonly isDirty: ReturnType<typeof derived<typeof this._store, boolean>>;
+    readonly isSubmitting: ReturnType<typeof derived<typeof this._store, boolean>>;
+    /**
+     * Generates unique name, instance, and class based on solution name and existing instances
+     * @param existingInstances - Array of existing instance names
+     * @param solution - The base solution name
+     * @returns Object containing name, instance, and class values
+     */
+    static generateNames(existingInstances: string[], solution: string, name: string): {
+        name: string;
+        instance: string;
+        class: string;
+    };
+    /**
+     * Cleans up the class name to ensure it's valid
+     * @param className - The class name to clean up
+     * @returns The cleaned up class name
+     */
+    static sanitizeClassName(className: string): string;
+    constructor(identifier: string, initialValues: T, options?: {
+        existingInstances?: string[];
+    });
+    /**
+     * Set a specific instance to ignore during validation
+     * Used in edit mode to prevent the current instance from being flagged as invalid
+     */
+    ignoreInstanceValidation(instanceValue: string, existingInstances: string[]): void;
+    /**
+     * Set the value of a specific field
+     */
+    setField<K extends keyof T>(field: K, value: T[K]): void;
+    /**
+     * Set multiple field values at once
+     */
+    setFields(values: Partial<T>): void;
+    /**
+     * Handle instance field validation with uniqueness check
+     */
+    validateWithInstances(existingInstances: string[]): void;
+    /**
+     * Reset the form to initial values
+     */
+    reset(): void;
+    /**
+     * Enable or disable class name validation
+     * @param enabled - Whether to enable class validation
+     */
+    enableClassValidation(enabled: boolean): void;
+    /**
+     * Validate the form values
+     */
+    private validate;
+    /**
+     * Set the form as submitting
+     */
+    setSubmitting(isSubmitting: boolean): void;
+    /**
+     * Get the current state of the form
+     */
+    getState(): FormState<T>;
+}
+/**
+ * Setup form hook
+ */
+export declare function createForm<T extends {
+    name: string;
+    instance: string;
+    class: string;
+}>(identifier: string, initialValues: T, options?: {
+    existingInstances?: string[];
+    enableClassValidation?: boolean;
+}): {
+    values: import("svelte/store").Readable<T>;
+    errors: import("svelte/store").Readable<Record<keyof T, string[]>>;
+    touched: import("svelte/store").Readable<Record<keyof T, boolean>>;
+    isValid: import("svelte/store").Readable<boolean>;
+    isDirty: import("svelte/store").Readable<boolean>;
+    isSubmitting: import("svelte/store").Readable<boolean>;
+    setField: <K extends keyof T>(field: K, value: T[K]) => void;
+    setFields: (values: Partial<T>) => void;
+    reset: () => void;
+    enableClassValidation: (enabled: boolean) => void;
+    ignoreInstanceValidation: (instanceValue: string, existingInstances: string[]) => void;
+    setSubmitting: (isSubmitting: boolean) => void;
+    validate: () => void;
+    getState: () => FormState<T>;
+};
+/**
+ * Get a form by its identifier
+ */
+export declare function getFormById(identifier: string): FormValidator<{
+    name: string;
+    instance: string;
+    class: string;
+}> | FormManager<Record<string, unknown>> | undefined;
+/**
+ * Check if a form with a specific identifier is valid
+ */
+export declare function isFormValid(identifier: string): boolean;
+/**
+ * Get error messages for a specific form
+ */
+export declare function getFormErrors(identifier: string): Record<string, string[]> | null;
+/**
+ * Reset a form by its identifier
+ */
+export declare function resetForm(identifier: string): boolean;
+export declare function createFormSubscription(identifier: string): import("svelte/store").Writable<{
+    isValid: boolean;
+    errors: {};
+    values: {};
+}> | {
+    subscribe: (this: void, run: import("svelte/store").Subscriber<FormState<{
+        name: string;
+        instance: string;
+        class: string;
+    }> | FormState<Record<string, unknown>>>, invalidate?: () => void) => import("svelte/store").Unsubscriber;
+    destroy: () => void;
+};
+/**
+ * Helper to get field state for a specific form and field
+ */
+export declare function getFieldState<T extends Record<string, unknown>>(formId: string, fieldName: keyof T): {
+    value: undefined;
+    error: never[];
+    touched: boolean;
+    isValid: boolean;
+} | {
+    value: T[keyof T];
+    error: Record<keyof T, string[]>[keyof T];
+    touched: boolean | Record<keyof T, boolean>[keyof T];
+    isValid: boolean;
+};
+/**
+ * Helper to update a field value for a specific form
+ */
+export declare function updateFieldValue<T extends Record<string, unknown>>(formId: string, fieldName: keyof T, value: T[typeof fieldName]): void;
+/**
+ * Helper to get all registered field names for a form
+ */
+export declare function getFormFieldNames(formId: string): string[];
+/**
+ * Store to track if the form is adding or updating to the Canvas
+ */
+export declare const isAddingOrUpdating: import("svelte/store").Writable<boolean>;
+export declare const loadingSelectedElement: import("svelte/store").Writable<boolean>;
+export {};