@finsweet/webflow-apps-utils 1.0.8 → 1.0.10

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

@@ -305,7 +305,6 @@
 
 {#if label || tooltip || icon || children}
 	{#if !hasPopup && shouldShowTooltipOnText}
-		<!-- Simple text with tooltip on text -->
 		<Tooltip {...tooltip}>
 			{#snippet target()}
 				<div
@@ -320,7 +319,6 @@
 				>
 					{#if label?.trim() || icon || children}
 						{#if ellipsisOnWidth && (icon || loading)}
-							<!-- handling ellipsis with icons -->
 							<div
 								class="text-with-icon"
 								style="display: flex; align-items: center; gap: 4px; width: {ellipsisOnWidth}; justify-content: {textAlign ===
@@ -356,7 +354,6 @@
 								</div>
 							</div>
 						{:else}
-							<!-- Normal text handling -->
 							<div class={textClasses()} style={textStyles()}>
 								{#if icon || loading}
 									{#if loading}
@@ -392,7 +389,6 @@
 			{/snippet}
 		</Tooltip>
 	{:else if !hasPopup && shouldShowTooltipOnIcon}
-		<!-- Simple text with tooltip on icon -->
 		<div
 			class={labelClasses()}
 			data-component="Text"
@@ -405,7 +401,6 @@
 		>
 			{#if label?.trim() || icon || children}
 				{#if ellipsisOnWidth && (icon || loading)}
-					<!-- handling ellipsis with icons -->
 					<div
 						class="text-with-icon"
 						style="display: flex; align-items: center; gap: 4px; width: {ellipsisOnWidth}; justify-content: {textAlign ===
@@ -439,7 +434,6 @@
 						</div>
 					</div>
 				{:else}
-					<!-- Normal text handling -->
 					<div class={textClasses()} style={textStyles()}>
 						{#if icon || loading}
 							{#if loading}
@@ -471,7 +465,6 @@
 			{/if}
 		</div>
 	{:else if !hasPopup}
-		<!-- Simple text without tooltip -->
 		<div
 			class={labelClasses()}
 			data-component="Text"
@@ -484,7 +477,6 @@
 		>
 			{#if label?.trim() || icon || children}
 				{#if ellipsisOnWidth && (icon || loading)}
-					<!-- handling ellipsis with icons -->
 					<div
 						class="text-with-icon"
 						style="display: flex; align-items: center; gap: 4px; width: {ellipsisOnWidth}; justify-content: {textAlign ===
@@ -514,7 +506,6 @@
 						</div>
 					</div>
 				{:else}
-					<!-- Normal text handling -->
 					<div class={textClasses()} style={textStyles()}>
 						{#if icon || loading}
 							{#if loading}
@@ -542,7 +533,6 @@
 			{/if}
 		</div>
 	{:else}
-		<!-- Text with popup functionality -->
 		<div
 			class="label-popup {disabled ? 'disabled' : ''}"
 			onclick={handlePopupToggle}
@@ -564,7 +554,6 @@
 				{#snippet target()}
 					<span class="dropdown-label item {popupConfig.active ? 'active' : ''}">
 						{#if shouldShowTooltipOnText}
-							<!-- Text with popup and tooltip on text -->
 							<Tooltip {...tooltip}>
 								{#snippet target()}
 									<div
@@ -579,7 +568,6 @@
 									>
 										{#if label?.trim() || icon || children}
 											{#if ellipsisOnWidth && (icon || loading)}
-												<!-- handling ellipsis with icons -->
 												<div
 													class="text-with-icon"
 													style="display: flex; align-items: center; gap: 4px; width: {ellipsisOnWidth}; justify-content: {textAlign ===
@@ -615,7 +603,6 @@
 													</div>
 												</div>
 											{:else}
-												<!-- Normal text handling -->
 												<div class={textClasses()} style={textStyles()}>
 													{#if icon || loading}
 														{#if loading}
@@ -651,7 +638,6 @@
 								{/snippet}
 							</Tooltip>
 						{:else if shouldShowTooltipOnIcon}
-							<!-- Text with popup and tooltip on icon -->
 							<div
 								class={labelClasses()}
 								data-component="Text"
@@ -664,7 +650,6 @@
 							>
 								{#if label?.trim() || icon || children}
 									{#if ellipsisOnWidth && (icon || loading)}
-										<!-- handling ellipsis with icons -->
 										<div
 											class="text-with-icon"
 											style="display: flex; align-items: center; gap: 4px; width: {ellipsisOnWidth}; justify-content: {textAlign ===
@@ -698,7 +683,6 @@
 											</div>
 										</div>
 									{:else}
-										<!-- Normal text handling -->
 										<div class={textClasses()} style={textStyles()}>
 											{#if icon || loading}
 												{#if loading}
@@ -730,7 +714,6 @@
 								{/if}
 							</div>
 						{:else}
-							<!-- Text with popup without tooltip -->
 							<div
 								class={labelClasses()}
 								data-component="Text"
@@ -743,7 +726,6 @@
 							>
 								{#if label?.trim() || icon || children}
 									{#if ellipsisOnWidth && (icon || loading)}
-										<!-- handling ellipsis with icons -->
 										<div
 											class="text-with-icon"
 											style="display: flex; align-items: center; gap: 4px; width: {ellipsisOnWidth}; justify-content: {textAlign ===
@@ -773,7 +755,6 @@
 											</div>
 										</div>
 									{:else}
-										<!-- Normal text handling -->
 										<div class={textClasses()} style={textStyles()}>
 											{#if icon || loading}
 												{#if loading}

package/dist/ui/components/tooltip/Tooltip.svelte

@@ -212,7 +212,6 @@
 				tooltipEl.removeAttribute('data-trigger-type');
 				isActive = false;
 				hidden = true;
-
 				activeTooltips = activeTooltips.filter((id) => id !== tooltipId);
 
 				dispatchEvent('close', true);
@@ -356,7 +355,6 @@
 	{#if target}
 		{@render target()}
 	{:else}
-		<!-- Default target for Storybook compatibility -->
 		<button
 			style="
 				padding: 4px 8px; 
@@ -411,12 +409,17 @@
 		display: none;
 		top: 0;
 		left: 0;
-		z-index: 99999999999;
 		border-radius: 4px;
+		z-index: 99999999999;
+		border-radius: var(--border-radius, 4px);
 		background: var(--background3);
 		box-shadow:
-			0px 0.5px 1px 0px #000,
-			0px 0.5px 0.5px 0px rgba(255, 255, 255, 0.12) inset;
+			0 12px 24px 8px #0000004d,
+			0 8px 16px 4px #0000004d,
+			0 4px 8px 2px #0000,
+			0 2px 6px #00000014,
+			0 -0.5px 0.5px #0000 inset,
+			0 0.5px 0.5px #ffffff57 inset;
 		color: var(--text2);
 		font-family: Inter;
 		line-height: 120%;
@@ -431,6 +434,7 @@
 	.content-wrapper {
 		flex: 1;
 		min-width: 0;
+		border-radius: var(--border-radius, 4px);
 		z-index: 3;
 		background: inherit;
 	}

package/dist/ui/icons/FinsweetLogoOutlineIcon.svelte

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">
+	<g clip-path="url(#clip0_5665_3736)">
+		<path
+			d="M12.7839 6.16037V4.88037H8.15991V12.0924H9.79591V9.30037H12.1599V8.06837H9.79591V6.16037H12.7839Z"
+			fill="currentColor"
+		/>
+		<path
+			d="M3.89982 5.37971V7.52371C3.90035 7.58096 3.88959 7.63776 3.86817 7.69086C3.84674 7.74396 3.81507 7.79232 3.77495 7.83318C3.73484 7.87404 3.68707 7.9066 3.63437 7.92899C3.58167 7.95139 3.52508 7.96318 3.46782 7.96371H3.21582V9.01171H3.46382C3.52108 9.01171 3.57777 9.02298 3.63067 9.0449C3.68357 9.06681 3.73163 9.09892 3.77212 9.13941C3.8126 9.17989 3.84472 9.22796 3.86663 9.28086C3.88854 9.33376 3.89982 9.39045 3.89982 9.44771V11.5677C3.89982 12.6677 4.47982 13.2677 5.53582 13.2677H6.51981V12.0677H5.92382C5.86826 12.0679 5.81299 12.0598 5.75982 12.0437C5.51182 11.9917 5.35982 11.7917 5.35982 11.4437V9.65171C5.35982 9.17171 5.35982 8.69571 4.73582 8.47571C5.35982 8.25171 5.35982 7.69971 5.35982 7.24771V5.49971C5.34084 5.36798 5.37117 5.23389 5.44499 5.12316C5.51881 5.01242 5.63092 4.93285 5.75982 4.89971C5.81592 4.88498 5.87383 4.87824 5.93182 4.87971H6.53181V3.69971H5.53582C4.46782 3.69971 3.89982 4.29971 3.89982 5.37971Z"
+			fill="currentColor"
+		/>
+	</g>
+	<defs>
+		<clipPath id="clip0_5665_3736">
+			<rect y="0.5" width="16" height="16" rx="1.33333" fill="currentColor" />
+		</clipPath>
+	</defs>
+</svg>

package/dist/ui/icons/FinsweetLogoOutlineIcon.svelte.d.ts

@@ -0,0 +1,26 @@
+export default FinsweetLogoOutlineIcon;
+type FinsweetLogoOutlineIcon = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const FinsweetLogoOutlineIcon: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/ui/icons/TriangleDownIconToggle.svelte

@@ -1,4 +1,3 @@
-<!-- TriangleDownIconToggle.svelte -->
 <script lang="ts">
 	export let rotate = false;
 </script>

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

@@ -46,6 +46,7 @@ import FileUploadIcon from './FileUploadIcon.svelte';
 import FilterIcon from './FilterIcon.svelte';
 import FinsweetLibraryIcon from './FinsweetLibraryIcon.svelte';
 import FinsweetLogoIcon from './FinsweetLogoIcon.svelte';
+import FinsweetLogoOutlineIcon from './FinsweetLogoOutlineIcon.svelte';
 import FolderIcon from './FolderIcon.svelte';
 import FolderOutlinedIcon from './FolderOutlinedIcon.svelte';
 import FolderPlusIcon from './FolderPlusIcon.svelte';
@@ -118,4 +119,4 @@ import WizedLogoIcon from './WizedLogoIcon.svelte';
 import XL from './XL.svelte';
 import XXL from './XXL.svelte';
 import XXXL from './XXXL.svelte';
-export { AccordionDownArrow, AccordionUpArrow, AccountIcon, ArrowIcon, BackIcon, BodyIcon, BookmarkIcon, BoxAddIcon, BrushIcon, BuilderEditIcon, BuilderIcon, CheckboxCheckedIcon, CheckCircleIcon, CheckCircleOutlinedIcon, CheckIcon, ChevronIcon, ChevronRightIcon, CircleIcon, CloseCircleIcon, CloseIcon, CMSIcon, CodeIcon, ComponentsIcon, CookieIcon, CopyIcon, CrossIcon, DeleteIcon, DeleteOutlinedIcon, Desktop, DesktopWithStar, DivBlock, DOMElement, EditIcon, ExpertIcon, EyeCancelIcon, EyeIcon, FavouriteIcon, FileUploadIcon, FilterIcon, FinsweetLibraryIcon, FinsweetLogoIcon, FolderIcon, FolderOutlinedIcon, FolderPlusIcon, FreeComponentIcon, GlobeIcon, HandPointUpIcon, HeartIcon, HeartIconOutlined, HelpAltIcon, HelpIcon, HomeIcon, InfoIcon, LineChartIcon, ListIcon, LockIcon, MessageIcon, MobileLandscape, MobilePortrait, NavigatorIcon, OpenBookIcon, PageDraftIcon, PageIcon, PageLockedIcon, PageOutlinedIcon, PageSectionIcon, Pencil, PencilOutlinedIcon, PinIcon, PlayIcon, PlusIcon, PreviewEyeIcon, ProfileIcon, PublishCancelIcon, PublishIcon, RefreshIcon, RepairIcon, SaveIcon, SearchIcon, SelectIcon, SettingsIcon, SidebarToggleIcon, SliderAppIcon, SquareCheckIcon, StarIcon, StarOutlinedIcon, StaticContentIcon, SubtractIcon, TableAppIcon, Tablet, TabletPreview, TabNewIcon, TabsIcon, ThreeDotsIcon, TimesIcon, TooltipInfoCircleFilled, ToolTipInfoCircleIcon, TooltipInfoSquaredIcon, TriangleDownIcon, TriangleDownIconToggle, UndoIcon, UploadFileIcon, WarningCircleIcon, WarningCircleOutlineIcon, WarningTriangleIcon, WarningTriangleOutlineIcon, WebflowComponentIcon, WebflowComponentOutlinedIcon, WebflowInsightsIcon, WizedLogoIcon, XL, XXL, XXXL };
+export { AccordionDownArrow, AccordionUpArrow, AccountIcon, ArrowIcon, BackIcon, BodyIcon, BookmarkIcon, BoxAddIcon, BrushIcon, BuilderEditIcon, BuilderIcon, CheckboxCheckedIcon, CheckCircleIcon, CheckCircleOutlinedIcon, CheckIcon, ChevronIcon, ChevronRightIcon, CircleIcon, CloseCircleIcon, CloseIcon, CMSIcon, CodeIcon, ComponentsIcon, CookieIcon, CopyIcon, CrossIcon, DeleteIcon, DeleteOutlinedIcon, Desktop, DesktopWithStar, DivBlock, DOMElement, EditIcon, ExpertIcon, EyeCancelIcon, EyeIcon, FavouriteIcon, FileUploadIcon, FilterIcon, FinsweetLibraryIcon, FinsweetLogoIcon, FinsweetLogoOutlineIcon, FolderIcon, FolderOutlinedIcon, FolderPlusIcon, FreeComponentIcon, GlobeIcon, HandPointUpIcon, HeartIcon, HeartIconOutlined, HelpAltIcon, HelpIcon, HomeIcon, InfoIcon, LineChartIcon, ListIcon, LockIcon, MessageIcon, MobileLandscape, MobilePortrait, NavigatorIcon, OpenBookIcon, PageDraftIcon, PageIcon, PageLockedIcon, PageOutlinedIcon, PageSectionIcon, Pencil, PencilOutlinedIcon, PinIcon, PlayIcon, PlusIcon, PreviewEyeIcon, ProfileIcon, PublishCancelIcon, PublishIcon, RefreshIcon, RepairIcon, SaveIcon, SearchIcon, SelectIcon, SettingsIcon, SidebarToggleIcon, SliderAppIcon, SquareCheckIcon, StarIcon, StarOutlinedIcon, StaticContentIcon, SubtractIcon, TableAppIcon, Tablet, TabletPreview, TabNewIcon, TabsIcon, ThreeDotsIcon, TimesIcon, TooltipInfoCircleFilled, ToolTipInfoCircleIcon, TooltipInfoSquaredIcon, TriangleDownIcon, TriangleDownIconToggle, UndoIcon, UploadFileIcon, WarningCircleIcon, WarningCircleOutlineIcon, WarningTriangleIcon, WarningTriangleOutlineIcon, WebflowComponentIcon, WebflowComponentOutlinedIcon, WebflowInsightsIcon, WizedLogoIcon, XL, XXL, XXXL };

package/dist/ui/icons/index.js

@@ -46,6 +46,7 @@ import FileUploadIcon from './FileUploadIcon.svelte';
 import FilterIcon from './FilterIcon.svelte';
 import FinsweetLibraryIcon from './FinsweetLibraryIcon.svelte';
 import FinsweetLogoIcon from './FinsweetLogoIcon.svelte';
+import FinsweetLogoOutlineIcon from './FinsweetLogoOutlineIcon.svelte';
 import FolderIcon from './FolderIcon.svelte';
 import FolderOutlinedIcon from './FolderOutlinedIcon.svelte';
 import FolderPlusIcon from './FolderPlusIcon.svelte';
@@ -118,4 +119,4 @@ import WizedLogoIcon from './WizedLogoIcon.svelte';
 import XL from './XL.svelte';
 import XXL from './XXL.svelte';
 import XXXL from './XXXL.svelte';
-export { AccordionDownArrow, AccordionUpArrow, AccountIcon, ArrowIcon, BackIcon, BodyIcon, BookmarkIcon, BoxAddIcon, BrushIcon, BuilderEditIcon, BuilderIcon, CheckboxCheckedIcon, CheckCircleIcon, CheckCircleOutlinedIcon, CheckIcon, ChevronIcon, ChevronRightIcon, CircleIcon, CloseCircleIcon, CloseIcon, CMSIcon, CodeIcon, ComponentsIcon, CookieIcon, CopyIcon, CrossIcon, DeleteIcon, DeleteOutlinedIcon, Desktop, DesktopWithStar, DivBlock, DOMElement, EditIcon, ExpertIcon, EyeCancelIcon, EyeIcon, FavouriteIcon, FileUploadIcon, FilterIcon, FinsweetLibraryIcon, FinsweetLogoIcon, FolderIcon, FolderOutlinedIcon, FolderPlusIcon, FreeComponentIcon, GlobeIcon, HandPointUpIcon, HeartIcon, HeartIconOutlined, HelpAltIcon, HelpIcon, HomeIcon, InfoIcon, LineChartIcon, ListIcon, LockIcon, MessageIcon, MobileLandscape, MobilePortrait, NavigatorIcon, OpenBookIcon, PageDraftIcon, PageIcon, PageLockedIcon, PageOutlinedIcon, PageSectionIcon, Pencil, PencilOutlinedIcon, PinIcon, PlayIcon, PlusIcon, PreviewEyeIcon, ProfileIcon, PublishCancelIcon, PublishIcon, RefreshIcon, RepairIcon, SaveIcon, SearchIcon, SelectIcon, SettingsIcon, SidebarToggleIcon, SliderAppIcon, SquareCheckIcon, StarIcon, StarOutlinedIcon, StaticContentIcon, SubtractIcon, TableAppIcon, Tablet, TabletPreview, TabNewIcon, TabsIcon, ThreeDotsIcon, TimesIcon, TooltipInfoCircleFilled, ToolTipInfoCircleIcon, TooltipInfoSquaredIcon, TriangleDownIcon, TriangleDownIconToggle, UndoIcon, UploadFileIcon, WarningCircleIcon, WarningCircleOutlineIcon, WarningTriangleIcon, WarningTriangleOutlineIcon, WebflowComponentIcon, WebflowComponentOutlinedIcon, WebflowInsightsIcon, WizedLogoIcon, XL, XXL, XXXL };
+export { AccordionDownArrow, AccordionUpArrow, AccountIcon, ArrowIcon, BackIcon, BodyIcon, BookmarkIcon, BoxAddIcon, BrushIcon, BuilderEditIcon, BuilderIcon, CheckboxCheckedIcon, CheckCircleIcon, CheckCircleOutlinedIcon, CheckIcon, ChevronIcon, ChevronRightIcon, CircleIcon, CloseCircleIcon, CloseIcon, CMSIcon, CodeIcon, ComponentsIcon, CookieIcon, CopyIcon, CrossIcon, DeleteIcon, DeleteOutlinedIcon, Desktop, DesktopWithStar, DivBlock, DOMElement, EditIcon, ExpertIcon, EyeCancelIcon, EyeIcon, FavouriteIcon, FileUploadIcon, FilterIcon, FinsweetLibraryIcon, FinsweetLogoIcon, FinsweetLogoOutlineIcon, FolderIcon, FolderOutlinedIcon, FolderPlusIcon, FreeComponentIcon, GlobeIcon, HandPointUpIcon, HeartIcon, HeartIconOutlined, HelpAltIcon, HelpIcon, HomeIcon, InfoIcon, LineChartIcon, ListIcon, LockIcon, MessageIcon, MobileLandscape, MobilePortrait, NavigatorIcon, OpenBookIcon, PageDraftIcon, PageIcon, PageLockedIcon, PageOutlinedIcon, PageSectionIcon, Pencil, PencilOutlinedIcon, PinIcon, PlayIcon, PlusIcon, PreviewEyeIcon, ProfileIcon, PublishCancelIcon, PublishIcon, RefreshIcon, RepairIcon, SaveIcon, SearchIcon, SelectIcon, SettingsIcon, SidebarToggleIcon, SliderAppIcon, SquareCheckIcon, StarIcon, StarOutlinedIcon, StaticContentIcon, SubtractIcon, TableAppIcon, Tablet, TabletPreview, TabNewIcon, TabsIcon, ThreeDotsIcon, TimesIcon, TooltipInfoCircleFilled, ToolTipInfoCircleIcon, TooltipInfoSquaredIcon, TriangleDownIcon, TriangleDownIconToggle, UndoIcon, UploadFileIcon, WarningCircleIcon, WarningCircleOutlineIcon, WarningTriangleIcon, WarningTriangleOutlineIcon, WebflowComponentIcon, WebflowComponentOutlinedIcon, WebflowInsightsIcon, WizedLogoIcon, XL, XXL, XXXL };

package/dist/ui/index.css

@@ -10,7 +10,7 @@
 	--background1: #292929;
 	--black: #000000;
 	--background2: #353535;
-	--background3: #404040;
+	--background3: #383838;
 	--background-background-3: #363636;
 	--background4: #373737;
 	--background5: #404040;

package/dist/ui/providers/GlobalProviderDemo.svelte

@@ -57,12 +57,10 @@
 </div>
 
 {#snippet DemoContent()}
-	<!-- Get contexts and data reactively -->
 	{@const appContext = useAppContext<DemoConfigType>()}
 	{@const formContext = useFormContext()}
 	{@const configuratorContext = useConfiguratorContext<DemoConfigType>()}
 
-	<!-- Force reactive updates with trigger -->
 	{#key refreshTrigger}
 		{@const appData = appContext.get()}
 		{@const formData = formContext.get()}

package/dist/ui/router/Router.stories.js

@@ -345,7 +345,7 @@ interface HistoryEntry {
 ### Complete Application Setup
 
 \`\`\`typescript
-<!-- App.svelte -->
+
 <script lang="ts">
   import { onMount } from 'svelte';
   import { createRouter, RouterProvider, Route, Link } from '@finsweet/webflow-apps-utils';
@@ -379,7 +379,7 @@ interface HistoryEntry {
 <RouterProvider {router}>
   {#snippet children({ router, currentRoute, isNavigating })}
     <div class="app">
-      <!-- Navigation -->
+      
       <nav class="navbar">
         <div class="nav-brand">
           <Link to="/">My App</Link>
@@ -391,17 +391,17 @@ interface HistoryEntry {
         </ul>
       </nav>
 
-      <!-- Loading indicator -->
+      
       {#if isNavigating}
         <div class="loading-bar"></div>
       {/if}
 
-      <!-- Page title -->
+      
       <title>{currentRoute?.meta?.title || 'My App'}</title>
 
-      <!-- Main content -->
+      
       <main class="main-content">
-        <!-- Routes -->
+        
         <Route path="/" component={HomePage} />
         <Route path="/about" component={AboutPage} />
         <Route path="/users/:id">
@@ -421,7 +421,7 @@ interface HistoryEntry {
 ### Using Hooks in Components
 
 \`\`\`typescript
-<!-- UserProfile.svelte -->
+
 <script lang="ts">
   import { useParams, useNavigate, useSearchParams } from '@finsweet/webflow-apps-utils';
 

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

@@ -1,4 +1,5 @@
 import { derived } from 'svelte/store';
+import { z } from 'zod';
 interface FormState<T> {
     values: T;
     errors: Record<keyof T, string[]>;
@@ -7,6 +8,108 @@ interface FormState<T> {
     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
@@ -85,7 +188,7 @@ export declare class FormValidator<T extends {
      */
     setSubmitting(isSubmitting: boolean): void;
     /**
-     * Get the current state of the form (for legacy compatibility)
+     * Get the current state of the form
      */
     getState(): FormState<T>;
 }
@@ -118,7 +221,11 @@ export declare function createForm<T extends {
 /**
  * Get a form by its identifier
  */
-export declare function getFormById(identifier: string): FormValidator<any> | undefined;
+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
  */
@@ -136,9 +243,35 @@ export declare function createFormSubscription(identifier: string): import("svel
     errors: {};
     values: {};
 }> | {
-    subscribe: (this: void, run: import("svelte/store").Subscriber<FormState<any>>, invalidate?: () => void) => import("svelte/store").Unsubscriber;
+    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
  */