zabi-components 5.0.20 → 5.0.22

package/dist/components/atoms/index.d.ts

@@ -1,6 +1,7 @@
 export { default as Toggle } from './Toggle.svelte';
 export { default as Badge } from './Badge.svelte';
 export { default as Button } from './Button.svelte';
+export { default as IconButton } from './IconButton.svelte';
 export { default as Card } from './Card.svelte';
 export { default as CardHeader } from './CardHeader.svelte';
 export { default as CardContent } from './CardContent.svelte';
@@ -9,6 +10,8 @@ export { default as Input } from './Input.svelte';
 export { default as Textarea } from './Textarea.svelte';
 export { default as Select } from './Select.svelte';
 export { default as ColorPicker } from './ColorPicker.svelte';
+export { default as List } from './List.svelte';
+export { default as ListItem } from './ListItem.svelte';
 export { default as Heading } from './Heading.svelte';
 export { default as ThemeToggle } from './ThemeToggle.svelte';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/atoms/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/atoms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/atoms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/components/index.d.ts

@@ -6,6 +6,8 @@ export { default as Input } from './atoms/Input.svelte';
 export { default as Textarea } from './atoms/Textarea.svelte';
 export { default as Select } from './atoms/Select.svelte';
 export { default as ColorPicker } from './atoms/ColorPicker.svelte';
+export { default as List } from './atoms/List.svelte';
+export { default as ListItem } from './atoms/ListItem.svelte';
 export { default as Heading } from './atoms/Heading.svelte';
 export { default as ThemeToggle } from './atoms/ThemeToggle.svelte';
 export { default as Alert } from './molecules/Alert.svelte';
@@ -19,6 +21,8 @@ export { default as SlideUp } from './molecules/SlideUp.svelte';
 export { default as Tabs } from './molecules/Tabs.svelte';
 export { default as Navbar } from './organisms/Navbar.svelte';
 export { default as Navigation } from './organisms/Navigation.svelte';
+export { default as SidebarNavigation } from './organisms/SidebarNavigation.svelte';
+export { default as SidebarProjectPanel } from './organisms/SidebarProjectPanel.svelte';
 export declare const createId: (prefix?: string) => string;
 export declare const cn: (...classes: (string | undefined | null | false)[]) => string;
 export declare const getFormData: (form: HTMLFormElement) => Record<string, any>;

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEpE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE1D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAEtE,eAAO,MAAM,QAAQ,GAAI,SAAQ,MAAa,KAAG,MAMhD,CAAC;AAEF,eAAO,MAAM,EAAE,GAAI,GAAG,SAAS,CAAC,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,KAAK,CAAC,EAAE,KAAG,MAClC,CAAC;AAEtC,eAAO,MAAM,WAAW,GAAI,MAAM,eAAe,KAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAGrE,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,OAAO,MAAM,KAAG,OAG7C,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,OAAO,GAAG,KAAG,OAE7C,CAAC;AAEF,eAAO,MAAM,SAAS,QAAO,OAE5B,CAAC;AAEF,eAAO,MAAM,UAAU,QAAO,MAAM,GAAG,SAEtC,CAAC;AAEF,eAAO,MAAM,YAAY,QAAO,QAAQ,GAAG,SAE1C,CAAC;AAEF,eAAO,MAAM,gBAAgB,QAAO,OAAO,GAAG,SAE7C,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,SAAQ,MAAa,KAAG,MAKlD,CAAC;AAEF,OAAO,EACH,GAAG,EACH,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,WAAW,EACX,YAAY,EACZ,GAAG,EACH,SAAS,EACT,SAAS,EACT,QAAQ,EACX,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"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"}

package/dist/components/molecules/index.d.ts

@@ -11,7 +11,7 @@ export { default as NavigationMenuItem } from './NavigationMenuItem.svelte';
 export { default as NavigationMenuTrigger } from './NavigationMenuTrigger.svelte';
 export { default as NavigationMenuContent } from './NavigationMenuContent.svelte';
 export { default as NavigationMenuLink } from './NavigationMenuLink.svelte';
-export { default as Sidebar } from './Sidebar.svelte';
+export { default as Section } from './Section.svelte';
 export { default as SlideUp } from './SlideUp.svelte';
 export { default as Tabs } from './Tabs.svelte';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/molecules/navigation-menu-context.d.ts

@@ -0,0 +1,7 @@
+export interface NavigationMenuContextValue {
+    activeItem: string | null;
+    setActiveItem: (item: string | null) => void;
+    isMobile: boolean;
+}
+export declare const NAVIGATION_MENU_CONTEXT_KEY: unique symbol;
+//# sourceMappingURL=navigation-menu-context.d.ts.map

package/dist/components/molecules/navigation-menu-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-menu-context.d.ts","sourceRoot":"","sources":["../../../src/components/molecules/navigation-menu-context.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,0BAA0B;IACvC,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7C,QAAQ,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,2BAA2B,eAA4B,CAAC"}

package/dist/components/organisms/index.d.ts

@@ -1,3 +1,5 @@
 export { default as Navbar } from './Navbar.svelte';
 export { default as Navigation } from './Navigation.svelte';
+export { default as SidebarNavigation } from './SidebarNavigation.svelte';
+export { default as SidebarProjectPanel } from './SidebarProjectPanel.svelte';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/organisms/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/organisms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/organisms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,8BAA8B,CAAC"}

package/dist/index.d.ts

@@ -6,6 +6,8 @@ export { default as Input } from './atoms/Input.svelte';
 export { default as Textarea } from './atoms/Textarea.svelte';
 export { default as Select } from './atoms/Select.svelte';
 export { default as ColorPicker } from './atoms/ColorPicker.svelte';
+export { default as List } from './atoms/List.svelte';
+export { default as ListItem } from './atoms/ListItem.svelte';
 export { default as Heading } from './atoms/Heading.svelte';
 export { default as ThemeToggle } from './atoms/ThemeToggle.svelte';
 export { default as Alert } from './molecules/Alert.svelte';
@@ -19,6 +21,8 @@ export { default as SlideUp } from './molecules/SlideUp.svelte';
 export { default as Tabs } from './molecules/Tabs.svelte';
 export { default as Navbar } from './organisms/Navbar.svelte';
 export { default as Navigation } from './organisms/Navigation.svelte';
+export { default as SidebarNavigation } from './organisms/SidebarNavigation.svelte';
+export { default as SidebarProjectPanel } from './organisms/SidebarProjectPanel.svelte';
 export declare const createId: (prefix?: string) => string;
 export declare const cn: (...classes: (string | undefined | null | false)[]) => string;
 export declare const getFormData: (form: HTMLFormElement) => Record<string, any>;

package/dist/index.js

@@ -6,6 +6,8 @@ export { default as Input } from './atoms/Input.svelte';
 export { default as Textarea } from './atoms/Textarea.svelte';
 export { default as Select } from './atoms/Select.svelte';
 export { default as ColorPicker } from './atoms/ColorPicker.svelte';
+export { default as List } from './atoms/List.svelte';
+export { default as ListItem } from './atoms/ListItem.svelte';
 export { default as Heading } from './atoms/Heading.svelte';
 export { default as ThemeToggle } from './atoms/ThemeToggle.svelte';
 export { default as Alert } from './molecules/Alert.svelte';
@@ -19,14 +21,9 @@ export { default as SlideUp } from './molecules/SlideUp.svelte';
 export { default as Tabs } from './molecules/Tabs.svelte';
 export { default as Navbar } from './organisms/Navbar.svelte';
 export { default as Navigation } from './organisms/Navigation.svelte';
-export const createId = (prefix = 'id') => {
-    if (typeof window !== 'undefined') {
-        return `${prefix}-${Math.random().toString(36).substr(2, 9)}`;
-    }
-    else {
-        return `${prefix}-ssr-${Date.now()}`;
-    }
-};
+export { default as SidebarNavigation } from './organisms/SidebarNavigation.svelte';
+export { default as SidebarProjectPanel } from './organisms/SidebarProjectPanel.svelte';
+export const createId = (prefix = 'id') => generateId(prefix);
 export const cn = (...classes) => classes.filter(Boolean).join(' ');
 export const getFormData = (form) => {
     const formData = new FormData(form);

package/dist/molecules/Alert.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import type { ExtendedSemanticVariant } from "../../types/variants.js";
+    type AlertVisualVariant = Exclude<ExtendedSemanticVariant, "default">;
 
     interface Props {
         variant?: ExtendedSemanticVariant;
@@ -27,6 +28,10 @@
         }
     }
 
+    const visualVariant = $derived<AlertVisualVariant>(
+        variant === "default" ? "info" : variant,
+    );
+
     let alertClasses = $derived({
         info: "text-info border border-info",
         success: "text-success border border-success",
@@ -64,10 +69,10 @@
 
 <div
     class="relative rounded-md p-4 border {alertClasses[
-        variant
+        visualVariant
     ]} transition-all duration-200 motion-reduce:transition-none {className}"
     role={alertRole}
-    aria-live={variant === "success" || variant === "info"
+    aria-live={visualVariant === "success" || visualVariant === "info"
         ? "polite"
         : "assertive"}
     aria-atomic="true"
@@ -98,7 +103,7 @@
 
     <div class="flex items-start gap-3 {closable ? 'pr-8' : ''}">
         <div class="shrink-0 mt-0.5">
-            {@html iconSvg[variant]}
+            {@html iconSvg[visualVariant]}
         </div>
 
         <div class="flex-1 min-w-0">

package/dist/molecules/ContactForm.svelte

@@ -14,9 +14,8 @@
 
     let {
         className = "",
-        children,
-        ...restProps
-    } = $props<Props & { children?: any }>();
+        onsubmit,
+    }: Props = $props();
 
     let formData = $state<ContactFormData>({
         name: "",
@@ -25,21 +24,65 @@
         subscribe: false,
     });
 
+    let fieldErrors = $state<Partial<Record<keyof ContactFormData, string>>>({});
+    let formErrorMessage = $state("");
+
+    function validate(data: ContactFormData) {
+        const nextErrors: Partial<Record<keyof ContactFormData, string>> = {};
+
+        if (!data.name.trim()) {
+            nextErrors.name = "Please enter your name.";
+        }
+
+        if (!data.email.trim()) {
+            nextErrors.email = "Please enter your email address.";
+        } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email)) {
+            nextErrors.email = "Please enter a valid email address.";
+        }
+
+        if (!(data.message || "").trim()) {
+            nextErrors.message = "Please enter a message.";
+        }
+
+        fieldErrors = nextErrors;
+        return Object.keys(nextErrors).length === 0;
+    }
+
     function handleFormSubmit(event: SubmitEvent) {
-        const formData = new FormData(event.target as HTMLFormElement);
+        const submittedFormData = new FormData(event.target as HTMLFormElement);
         const data: ContactFormData = {
-            name: (formData.get("name") as string) || "",
-            email: (formData.get("email") as string) || "",
-            message: (formData.get("message") as string) || "",
-            subscribe: formData.get("subscribe") === "on" || false,
+            name: (submittedFormData.get("name") as string) || "",
+            email: (submittedFormData.get("email") as string) || "",
+            message: (submittedFormData.get("message") as string) || "",
+            subscribe: submittedFormData.get("subscribe") === "on" || false,
         };
 
-        console.log("Form submitted with data:", data);
+        if (!validate(data)) {
+            formErrorMessage =
+                "We could not submit your request. Fix the highlighted fields and try again.";
+            return;
+        }
+
+        formErrorMessage = "";
+        if (onsubmit) {
+            onsubmit(event);
+        }
     }
 </script>
 
-<Card size="md" fullWidth={true} title="Get in Touch">
-    <Form onsubmit={handleFormSubmit} className="space-y-4">
+<div class={className}>
+    <Card size="md" fullWidth={true} title="Get in Touch">
+        <Form onsubmit={handleFormSubmit} className="space-y-4">
+        {#if formErrorMessage}
+            <div
+                class="rounded-lg border border-error px-4 py-3 text-sm text-error"
+                role="alert"
+            >
+                <p class="font-medium">Something went wrong</p>
+                <p>{formErrorMessage}</p>
+                <p class="mt-1">Recovery action: review your inputs and resubmit.</p>
+            </div>
+        {/if}
         <div class="space-y-4">
             <Input
                 type="text"
@@ -49,6 +92,8 @@
                 value={formData.name}
                 oninput={(e) =>
                     (formData.name = (e.target as HTMLInputElement).value)}
+                variant={fieldErrors.name ? "error" : "default"}
+                message={fieldErrors.name || ""}
             />
             <Input
                 type="email"
@@ -58,24 +103,8 @@
                 value={formData.email}
                 oninput={(e) =>
                     (formData.email = (e.target as HTMLInputElement).value)}
-            />
-            <Input
-                type="email"
-                name="email"
-                label="Email"
-                placeholder="Enter your email"
-                value={formData.email}
-                oninput={(e) =>
-                    (formData.email = (e.target as HTMLInputElement).value)}
-            />
-            <Input
-                type="email"
-                name="email"
-                label="Email"
-                placeholder="Enter your email"
-                value={formData.email}
-                oninput={(e) =>
-                    (formData.email = (e.target as HTMLInputElement).value)}
+                variant={fieldErrors.email ? "error" : "default"}
+                message={fieldErrors.email || ""}
             />
             <Textarea
                 name="message"
@@ -87,6 +116,8 @@
                     (formData.message = (
                         e.target as HTMLTextAreaElement
                     ).value)}
+                variant={fieldErrors.message ? "error" : "default"}
+                message={fieldErrors.message || ""}
             />
             <Checkbox
                 name="subscribe"
@@ -103,5 +134,6 @@
                 Send Message
             </Button>
         </div>
-    </Form>
-</Card>
+        </Form>
+    </Card>
+</div>

package/dist/molecules/ContactForm.svelte.d.ts

@@ -2,9 +2,6 @@ interface Props {
     className?: string;
     onsubmit?: (event: SubmitEvent) => void;
 }
-type $$ComponentProps = Props & {
-    children?: any;
-};
-declare const ContactForm: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const ContactForm: import("svelte").Component<Props, {}, "">;
 type ContactForm = ReturnType<typeof ContactForm>;
 export default ContactForm;

package/dist/molecules/Dropdown.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import Button from "../atoms/Button.svelte";
+    import { generateId } from "../../routes/lib/ssr-safe.js";
 
     interface Props {
         isOpen?: boolean;
@@ -26,7 +27,7 @@
         ...restProps
     }: Props & { children?: any; trigger?: any } = $props();
 
-    let dropdownId = `dropdown-${Math.random().toString(36).substr(2, 9)}`;
+    const dropdownId = generateId("dropdown");
     let triggerElement = $state<HTMLElement | null>(null);
     let menuElement = $state<HTMLElement | null>(null);
     let openedViaKeyboard = $state(false);

package/dist/molecules/ImageUpload.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { onDestroy } from "svelte";
     import Button from "../atoms/Button.svelte";
     import { Image } from "@lucide/svelte";
 
@@ -7,6 +8,7 @@
         disabled?: boolean;
         accept?: string;
         placeholder?: string;
+        errorMessage?: string;
         onchange?: (event: Event) => void;
         onclick?: (event: Event) => void;
     }
@@ -16,11 +18,20 @@
         disabled = false,
         accept = "image/*",
         placeholder = "No image selected",
+        errorMessage = "",
         children,
         ...restProps
     } = $props<Props & { children?: any }>();
 
     let fileInput = $state<HTMLInputElement>();
+    let currentObjectUrl = $state<string | null>(null);
+
+    function revokeCurrentObjectUrl() {
+        if (currentObjectUrl && typeof URL !== "undefined" && URL.revokeObjectURL) {
+            URL.revokeObjectURL(currentObjectUrl);
+            currentObjectUrl = null;
+        }
+    }
 
     function handleFileSelect(event: Event) {
         if (disabled) return;
@@ -31,17 +42,17 @@
         const file = input.files[0];
 
         if (typeof URL !== "undefined" && URL.createObjectURL) {
+            revokeCurrentObjectUrl();
             const url = URL.createObjectURL(file);
             value = url;
+            currentObjectUrl = url;
         }
     }
 
     function removeImage() {
         if (disabled) return;
 
-        if (value && typeof URL !== "undefined" && URL.revokeObjectURL) {
-            URL.revokeObjectURL(value);
-        }
+        revokeCurrentObjectUrl();
         value = null;
     }
 
@@ -49,6 +60,10 @@
         if (disabled) return;
         fileInput?.click();
     }
+
+    onDestroy(() => {
+        revokeCurrentObjectUrl();
+    });
 </script>
 
 <div class="space-y-3">
@@ -118,4 +133,12 @@
         {disabled}
         class="hidden"
     />
+
+    {#if errorMessage}
+        <div class="rounded-lg border border-error px-3 py-2 text-sm text-error" role="alert">
+            <p class="font-medium">Image upload failed</p>
+            <p>{errorMessage}</p>
+            <p class="mt-1">Recovery action: try another file or retry upload.</p>
+        </div>
+    {/if}
 </div>

package/dist/molecules/ImageUpload.svelte.d.ts

@@ -3,6 +3,7 @@ interface Props {
     disabled?: boolean;
     accept?: string;
     placeholder?: string;
+    errorMessage?: string;
     onchange?: (event: Event) => void;
     onclick?: (event: Event) => void;
 }

package/dist/molecules/Modal.svelte

@@ -28,7 +28,7 @@
         ...restProps
     }: Props & { children?: any; footer?: any } = $props();
 
-    let modalContainer: HTMLDivElement;
+    let modalContainer = $state<HTMLDivElement>();
     let cleanupFocusTrap: (() => void) | null = null;
 
     const sizeClasses = $derived(
@@ -53,12 +53,13 @@
 
     // Handle focus trap when modal opens
     $effect(() => {
-        if (isOpen && modalContainer) {
+        const container = modalContainer;
+        if (isOpen && container) {
             saveFocus();
-            cleanupFocusTrap = trapFocus(modalContainer);
+            cleanupFocusTrap = trapFocus(container);
             // Small delay to ensure modal is rendered
             setTimeout(() => {
-                focusFirstElement(modalContainer);
+                focusFirstElement(container);
             }, 0);
         } else if (!isOpen && cleanupFocusTrap) {
             cleanupFocusTrap();
@@ -93,49 +94,49 @@
         aria-labelledby={title ? "modal-title" : undefined}
         tabindex="-1"
     >
-        <Card
+        <div
             bind:this={modalContainer}
-            variant="default"
-            fullWidth={false}
             class="bg-card rounded-t-3xl md:rounded-3xl shadow-xl min-w-[320px] {sizeClasses} max-h-[90vh] overflow-y-auto animate-[slideUp_0.3s_ease-out] md:animate-none flex flex-col p-0"
         >
-            {#if title || description}
-                <CardHeader
-                    {description}
-                    className="px-6 pt-6 pb-4"
-                >
-                    {#if title}
-                        <div class="flex items-center justify-between">
-                            <h2
-                                id="modal-title"
-                                class="text-2xl font-normal leading-8 text-headline tracking-normal"
-                            >
-                                {title}
-                            </h2>
-                            <button
-                                type="button"
-                                onclick={closeModal}
-                                class="text-description hover:text-headline text-2xl cursor-pointer transition-colors w-8 h-8 flex items-center justify-center rounded-full hover:bg-base-100"
-                                aria-label="Close"
-                            >
-                                ×
-                            </button>
-                        </div>
-                    {/if}
-                </CardHeader>
-            {/if}
+            <Card variant="default" fullWidth={false}>
+                {#if title || description}
+                    <CardHeader
+                        {description}
+                        className="px-6 pt-6 pb-4"
+                    >
+                        {#if title}
+                            <div class="flex items-center justify-between">
+                                <h2
+                                    id="modal-title"
+                                    class="text-2xl font-normal leading-8 text-headline tracking-normal"
+                                >
+                                    {title}
+                                </h2>
+                                <button
+                                    type="button"
+                                    onclick={closeModal}
+                                    class="text-description hover:text-headline text-2xl cursor-pointer transition-colors w-8 h-8 flex items-center justify-center rounded-full hover:bg-base-100"
+                                    aria-label="Close"
+                                >
+                                    ×
+                                </button>
+                            </div>
+                        {/if}
+                    </CardHeader>
+                {/if}
 
-            {#if children}
-                <CardContent className="flex-1">
-                    {@render children?.()}
-                </CardContent>
-            {/if}
+                {#if children}
+                    <CardContent className="flex-1">
+                        {@render children?.()}
+                    </CardContent>
+                {/if}
 
-            {#if footer}
-                <CardFooter className="flex justify-end gap-3 pt-4">
-                    {@render footer?.()}
-                </CardFooter>
-            {/if}
-        </Card>
+                {#if footer}
+                    <CardFooter className="flex justify-end gap-3 pt-4">
+                        {@render footer?.()}
+                    </CardFooter>
+                {/if}
+            </Card>
+        </div>
     </div>
 {/if}

package/dist/molecules/NavigationMenu.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
-    import { getContext, setContext } from "svelte";
+    import { setContext } from "svelte";
     import { onMount } from "svelte";
     import NavigationMenuList from "./NavigationMenuList.svelte";
     import NavigationMenuItem from "./NavigationMenuItem.svelte";
@@ -8,13 +8,10 @@
     import NavigationMenuContent from "./NavigationMenuContent.svelte";
     import NavigationMenuLink from "./NavigationMenuLink.svelte";
 
-    interface NavigationMenuContext {
-        activeItem: string | null;
-        setActiveItem: (item: string | null) => void;
-        isMobile: boolean;
-    }
-
-    const NAVIGATION_MENU_CONTEXT = Symbol("navigation-menu");
+    import {
+        NAVIGATION_MENU_CONTEXT_KEY,
+        type NavigationMenuContextValue,
+    } from "./navigation-menu-context.js";
 
     export interface NavigationMenuItemData {
         value: string;
@@ -76,7 +73,7 @@
         }
     });
 
-    const context: NavigationMenuContext = {
+    const context: NavigationMenuContextValue = {
         get activeItem() {
             return activeItem;
         },
@@ -86,7 +83,7 @@
         },
     };
 
-    setContext(NAVIGATION_MENU_CONTEXT, context);
+    setContext(NAVIGATION_MENU_CONTEXT_KEY, context);
 </script>
 
 <nav

package/dist/molecules/NavigationMenuContent.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
     import { getContext } from "svelte";
-    import { onMount, onDestroy } from "svelte";
-
-    const NAVIGATION_MENU_CONTEXT = Symbol("navigation-menu");
+    import { onMount } from "svelte";
+    import {
+        NAVIGATION_MENU_CONTEXT_KEY,
+        type NavigationMenuContextValue,
+    } from "./navigation-menu-context.js";
 
     interface Props {
         value?: string;
@@ -21,11 +23,9 @@
     let contentElement = $state<HTMLElement | null>(null);
     let parentItem = $state<HTMLElement | null>(null);
 
-    const context = getContext<{
-        activeItem: string | null;
-        setActiveItem: (item: string | null) => void;
-        isMobile: boolean;
-    }>(NAVIGATION_MENU_CONTEXT);
+    const context = getContext<NavigationMenuContextValue>(
+        NAVIGATION_MENU_CONTEXT_KEY,
+    );
 
     const isActive = $derived(context?.activeItem === value);
 

package/dist/molecules/NavigationMenuItem.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
     import { getContext } from "svelte";
-
-    const NAVIGATION_MENU_CONTEXT = Symbol("navigation-menu");
+    import {
+        NAVIGATION_MENU_CONTEXT_KEY,
+        type NavigationMenuContextValue,
+    } from "./navigation-menu-context.js";
 
     interface Props {
         value?: string;
@@ -17,10 +19,9 @@
         ...restProps
     }: Props = $props();
 
-    const context = getContext<{
-        activeItem: string | null;
-        setActiveItem: (item: string | null) => void;
-    }>(NAVIGATION_MENU_CONTEXT);
+    const context = getContext<NavigationMenuContextValue>(
+        NAVIGATION_MENU_CONTEXT_KEY,
+    );
 
     const isActive = $derived(context?.activeItem === value);
 </script>