@picked/svelte 0.0.1-dev.1765971320697 → 0.0.1-dev.1767586122445

package/dist/form/form.svelte.d.ts

@@ -0,0 +1,25 @@
+import { CommitResponses, Field, ValidationError } from '@picked/client';
+import { EventCallable, Store } from 'effector';
+import { FieldWithValue } from '../hooks';
+interface GetFormOptions {
+    id: string;
+    title: string;
+    fields: Store<Field[] | FieldWithValue[]>;
+}
+type SuccessCallback = (options: {
+    stopNavigation: EventCallable<void>;
+}) => void | Promise<void>;
+type ErrorCallback = (errors: ValidationError[]) => void | Promise<void>;
+type SubmitCallback = (data: CommitResponses) => CommitResponses | void | Promise<CommitResponses | void>;
+type SubmitEventWithCurrentTarget = SubmitEvent & {
+    currentTarget: EventTarget & HTMLFormElement;
+};
+export declare function getForm({ id: formId, title, fields }: GetFormOptions): {
+    form: {
+        onsubmit: EventCallable<SubmitEventWithCurrentTarget>;
+    };
+    onFormSubmit: (callback: SubmitCallback) => void;
+    onFormSuccess: (callback: SuccessCallback) => void;
+    onFormError: (callback: ErrorCallback) => void;
+};
+export {};

package/dist/form/form.svelte.ts

@@ -0,0 +1,340 @@
+import type {
+  CommitResponses,
+  ExperienceStep,
+  Field,
+  FieldValue,
+  ValidationError,
+  ExperienceInstance,
+} from '@picked/client'
+import {
+  attach,
+  createEffect,
+  createEvent,
+  createStore,
+  sample,
+  split,
+  type EventCallable,
+  type Store,
+} from 'effector'
+import { getPicked, getExperience, type FieldWithValue } from '../hooks'
+
+interface Response {
+  questionId: Field['id']
+  value: FieldValue
+}
+
+interface GetFormOptions {
+  id: string
+  title: string
+  fields: Store<Field[] | FieldWithValue[]>
+}
+
+type SuccessCallback = (options: { stopNavigation: EventCallable<void> }) => void | Promise<void>
+type ErrorCallback = (errors: ValidationError[]) => void | Promise<void>
+type SubmitCallback = (
+  data: CommitResponses,
+) => CommitResponses | void | Promise<CommitResponses | void>
+
+type SubmitEventWithCurrentTarget = SubmitEvent & { currentTarget: EventTarget & HTMLFormElement }
+
+/**
+ * Factory function to create a callback observer with automatic cleanup
+ * Reduces duplication across success/error/submit callback patterns
+ */
+function createObserver<TCallback extends (...args: any[]) => any>(
+  executor: (callbacks: TCallback[], ...params: Parameters<TCallback>) => Promise<any>,
+) {
+  let callbacks: TCallback[] = []
+
+  const executeFx = createEffect(async (...params: Parameters<TCallback>) => {
+    return await executor(callbacks, ...params)
+  })
+
+  const register = (callback: TCallback) => {
+    $effect(() => {
+      callbacks.push(callback)
+      return () => {
+        callbacks = callbacks.filter((cb) => cb !== callback)
+      }
+    })
+  }
+
+  return { executeFx, register }
+}
+
+export function getForm({ id: formId, title, fields }: GetFormOptions) {
+  const client = getPicked()
+  const experienceInstance: ExperienceInstance = getExperience()
+  const { currentStepStore: stepStore, goToNextStep } = experienceInstance
+
+  const submitEvent = createEvent<SubmitEventWithCurrentTarget>()
+  const formSuccessEvent = createEvent<void>()
+  const formErrorEvent = createEvent<ValidationError[]>()
+  const stopNavigationEvent = createEvent<void>()
+  const allCallbacksCompleteEvent = createEvent<void>()
+
+  const stopNavigationStore = createStore(false)
+  stopNavigationStore
+    .on(stopNavigationEvent, () => true) // Set to true when stopNavigation is used in onFormSuccess
+    .on(submitEvent, () => false) // Reset to false on new submit
+
+  // Create observers for each callback type
+  const successObserver = createObserver<SuccessCallback>(async (callbacks, options) => {
+    await Promise.all(callbacks.map((callback) => Promise.resolve(callback(options))))
+  })
+
+  const errorObserver = createObserver<ErrorCallback>(async (callbacks, errors) => {
+    await Promise.all(callbacks.map((callback) => Promise.resolve(callback(errors))))
+  })
+
+  const submitObserver = createObserver<SubmitCallback>(async (callbacks, data) => {
+    let transformedData = data
+
+    // Apply each callback's transformation sequentially
+    for (const callback of callbacks) {
+      const result = await Promise.resolve(callback(transformedData))
+      // If callback returns data, use it; otherwise keep current
+      if (result !== undefined) {
+        transformedData = result
+      }
+    }
+
+    return transformedData
+  })
+
+  const commitFx = createEffect((responses: CommitResponses) => client.responses.commit(responses))
+
+  const onSuccessFx = attach({
+    source: { step: stepStore },
+    effect: createEffect(async ({ step }: { step: ExperienceStep | null }) => {
+      client.eventBus({
+        type: 'form_submit_success',
+        form: { id: formId, title },
+        experience: experienceInstance,
+        step: step ?? undefined,
+      })
+    }),
+  })
+
+  const onErrorFx = attach({
+    source: { step: stepStore },
+    mapParams: (params: { errors: ValidationError[] }, source) => ({
+      step: source.step,
+      errors: params.errors,
+    }),
+    effect: createEffect(
+      async ({ step, errors }: { step: ExperienceStep | null; errors: ValidationError[] }) => {
+        client.eventBus({
+          type: 'form_submit_error',
+          form: { id: formId, title },
+          exception: { reason: errors },
+          experience: experienceInstance,
+          step: step ?? undefined,
+        })
+
+        errors.forEach((exception) => {
+          client.eventBus({
+            type: 'field_validation_error',
+            exception: { reason: [exception] },
+            experience: experienceInstance,
+            step: step ?? undefined,
+          })
+        })
+
+        return errors
+      },
+    ),
+  })
+
+  sample({
+    clock: submitEvent,
+    source: { step: stepStore },
+    fn: ({ step }) => ({ formId, title, step }),
+    target: createEffect(
+      ({
+        formId: formIdParam,
+        title: titleParam,
+        step,
+      }: {
+        formId: string
+        title: string
+        step: ExperienceStep | null
+      }) => {
+        client.eventBus({
+          type: 'form_submit',
+          form: { id: formIdParam, title: titleParam },
+          experience: experienceInstance,
+          step: step ?? undefined,
+        })
+      },
+    ),
+  })
+
+  sample({
+    clock: submitEvent,
+    source: {
+      fields: client.fields.listStore,
+      stepFields: fields,
+    },
+    fn: ({ stepFields }, event) => {
+      event.preventDefault()
+
+      const formData = new FormData(event.currentTarget)
+      const formDataEntries = Array.from(formData.entries())
+
+      const responses: { data: Record<Field['id'], FieldValue>; push: (item: Response) => void } = {
+        data: {},
+        push(item: Response) {
+          const questionId = item.questionId
+          const existing = this.data[questionId]
+
+          if (!existing) {
+            // No matching questionId, just add the new item
+            this.data[questionId] = item.value
+            // If both values are arrays, merge them
+          } else if (Array.isArray(existing) && Array.isArray(item.value)) {
+            if (Array.isArray(existing) && Array.isArray(item.value)) {
+              // Check what type FieldValue expects and convert accordingly
+              if (typeof existing[0] === 'string') {
+                this.data[questionId] = [...existing, ...item.value].map(String)
+              } else if (typeof existing[0] === 'number') {
+                this.data[questionId] = [...existing, ...item.value].map(Number)
+              } else if (typeof existing[0] === 'boolean') {
+                this.data[questionId] = [...existing, ...item.value].map((v) => Boolean(v))
+              } else {
+                this.data[questionId] = item.value
+              }
+            }
+          } else {
+            // Otherwise, override the existing value
+            this.data[questionId] = item.value
+          }
+        },
+      }
+
+      stepFields.forEach((field) => {
+        let fieldEntries = formDataEntries.filter(([key]) => key === field.id)
+
+        if (fieldEntries.length === 0) {
+          fieldEntries = [[field.id, '']]
+        }
+
+        fieldEntries.forEach(([, value]) => {
+          const questionId = field.id
+
+          if (value === '') {
+            responses.push({
+              questionId,
+              value: null,
+            })
+
+            return
+          }
+
+          switch (field.type) {
+            case 'text':
+              responses.push({
+                questionId,
+                value: field.multiple ? [String(value)] : String(value),
+              })
+              break
+            case 'number':
+              responses.push({
+                questionId,
+                value: field.multiple ? [Number(value)] : Number(value),
+              })
+              break
+            case 'boolean':
+              responses.push({
+                questionId,
+                value: field.multiple ? [value === 'true'] : value === 'true',
+              })
+              break
+            // case 'object':
+            //   try {
+            //     responses.push({
+            //       questionId,
+            //       value: field.multiple ? [JSON.parse(String(value))] : JSON.parse(String(value)),
+            //     })
+            //   } catch {
+            //     responses.push({
+            //       questionId,
+            //       value: field.multiple ? [null] : null,
+            //     })
+            //   }
+
+            // break
+          }
+        })
+      })
+
+      return responses.data
+    },
+    target: submitObserver.executeFx,
+  })
+
+  // Pass transformed data from submit callbacks to commit
+  sample({
+    clock: submitObserver.executeFx.doneData,
+    target: commitFx,
+  })
+
+  // Errors are returned from the commit even if it is a success, split to handle errors array
+  split({
+    source: commitFx.doneData,
+    match: {
+      hasErrors: ({ errors }) => errors.length > 0,
+    },
+    cases: {
+      hasErrors: onErrorFx,
+      __: onSuccessFx,
+    },
+  })
+
+  sample({
+    clock: onSuccessFx.done,
+    target: formSuccessEvent,
+  })
+
+  // When form succeeds, execute all callbacks
+  sample({
+    clock: formSuccessEvent,
+    fn: () => ({ stopNavigation: stopNavigationEvent }), // Pass event reference to callbacks (not calling it)
+    target: successObserver.executeFx,
+  })
+
+  // When all callbacks complete, trigger navigation check
+  sample({
+    clock: successObserver.executeFx.done,
+    target: allCallbacksCompleteEvent,
+  })
+
+  // Check navigation after all callbacks complete
+  sample({
+    clock: allCallbacksCompleteEvent,
+    source: stopNavigationStore,
+    filter: (stop) => !stop,
+    target: goToNextStep,
+  })
+
+  // Declarative event wiring for error flow
+  sample({
+    clock: onErrorFx.doneData,
+    target: formErrorEvent,
+  })
+
+  // When form errors, execute all error callbacks
+  sample({
+    clock: formErrorEvent,
+    target: errorObserver.executeFx,
+  })
+
+  return {
+    form: {
+      onsubmit: submitEvent,
+    },
+    onFormSubmit: submitObserver.register,
+    onFormSuccess: successObserver.register,
+    onFormError: errorObserver.register,
+  }
+}

package/dist/form/index.d.ts

@@ -1,16 +1 @@
-import { ValidationError } from '@picked/client';
-interface GetFormOptions {
-    id: string;
-    title: string;
-    onSuccess?: () => void | Promise<void>;
-    onError?: (errors: ValidationError[]) => void | Promise<void>;
-}
-type SubmitEventWithCurrentTarget = SubmitEvent & {
-    currentTarget: EventTarget & HTMLFormElement;
-};
-export declare function getForm({ id: formId, title, onError, onSuccess }: GetFormOptions): {
-    form: {
-        onsubmit: import('effector').EventCallable<SubmitEventWithCurrentTarget>;
-    };
-};
-export {};
+export { getForm } from './form.svelte';

package/dist/form/index.js

@@ -1 +1 @@
-import{createEvent as k,createEffect as m,attach as b,sample as g,split as D}from"effector";import{getPicked as F,getExperience as S}from"../hooks/client.js";import{getStep as B}from"../hooks/step.js";import"svelte";import"svelte/store";import"@picked/client";import"@picked/analytics";function z({id:f,title:l,onError:d,onSuccess:h}){const o=F(),x=B(),n=S(),{currentStepStore:u}=n,v=k(),y=m(r=>o.responses.commit(r)),A=b({source:{step:u},effect:m(({step:r})=>{o.eventBus({type:"form_submit_success",form:{id:f,title:l},experience:n,step:r??void 0}),h==null||h()})}),_=b({source:{step:u},mapParams:(r,a)=>({step:a.step,errors:r.errors}),effect:m(({step:r,errors:a})=>{o.eventBus({type:"form_submit_error",form:{id:f,title:l},exception:{reason:a},experience:n,step:r??void 0}),a.forEach(p=>{o.eventBus({type:"field_validation_error",exception:{reason:[p]},experience:n,step:r??void 0})}),d==null||d(a)})});return g({clock:v,source:{step:u},fn:({step:r})=>({formId:f,title:l,step:r}),target:m(({formId:r,title:a,step:p})=>{o.eventBus({type:"form_submit",form:{id:r,title:a},experience:n,step:p??void 0})})}),g({clock:v,source:{fields:o.fields.listStore,stepFields:x.fields,step:u},fn:({stepFields:r},a)=>{a.preventDefault();const p=new FormData(a.currentTarget),E=Array.from(p.entries()),c={data:{},push(t){const s=t.questionId,e=this.data[s];e?Array.isArray(e)&&Array.isArray(t.value)?Array.isArray(e)&&Array.isArray(t.value)&&(typeof e[0]=="string"?this.data[s]=[...e,...t.value].map(String):typeof e[0]=="number"?this.data[s]=[...e,...t.value].map(Number):typeof e[0]=="boolean"?this.data[s]=[...e,...t.value].map(i=>!!i):this.data[s]=t.value):this.data[s]=t.value:this.data[s]=t.value}};return r.forEach(t=>{let s=E.filter(([e])=>e===t.id);s.length===0&&(s=[[t.id,""]]),s.forEach(([,e])=>{const i=t.id;if(e===""){c.push({questionId:i,value:null});return}switch(t.type){case"text":c.push({questionId:i,value:t.multiple?[String(e)]:String(e)});break;case"number":c.push({questionId:i,value:t.multiple?[Number(e)]:Number(e)});break;case"boolean":c.push({questionId:i,value:t.multiple?[e==="true"]:e==="true"});break}})}),c.data},target:y}),D({source:y.doneData,match:{hasErrors:({errors:r})=>r.length>0},cases:{hasErrors:_,__:A}}),{form:{onsubmit:v}}}export{z as getForm};
+import{getForm as e}from"./form.svelte";export{e as getForm};

package/dist/hooks/index.d.ts

@@ -1,5 +1,5 @@
 export { getPicked, getExperience } from './client';
-export { getStep, setStepContext } from './step';
+export { getStep, setStepContext, type FieldWithValue } from './step';
 export { useUnit, getContextScope, setContextScope } from './stores';
 export { createSessionStorageStore, createLocalStorageStore } from './storage.js';
 export { getTrackRecommendationPresentEvent } from './events';

package/dist/hooks/step.d.ts

@@ -1,13 +1,28 @@
 import { Store } from 'effector';
 import { ExperienceStep, Field, Response } from '@picked/client';
-type FieldWithValue = Field & {
+import { getForm } from '../form';
+export type FieldWithValue = Field & {
     value: Response | undefined;
 };
 export interface StepContext {
     step: Store<ExperienceStep>;
     fields: Store<FieldWithValue[]>;
     isActiveStep: Store<boolean>;
+    form: ReturnType<typeof getForm>;
 }
-export declare function getStep(): StepContext;
+export declare function getStep(): {
+    form: {
+        onsubmit: import('effector').EventCallable<SubmitEvent & {
+            currentTarget: EventTarget & HTMLFormElement;
+        }>;
+    };
+    onFormSubmit: (callback: (data: import('@picked/client').CommitResponses) => import('@picked/client').CommitResponses | void | Promise<import('@picked/client').CommitResponses | void>) => void;
+    onFormSuccess: (callback: (options: {
+        stopNavigation: import('effector').EventCallable<void>;
+    }) => void | Promise<void>) => void;
+    onFormError: (callback: (errors: import('@picked/client').ValidationError[]) => void | Promise<void>) => void;
+    step: Store<ExperienceStep>;
+    fields: Store<FieldWithValue[]>;
+    isActiveStep: Store<boolean>;
+};
 export declare function setStepContext(stepId: string): StepContext;
-export {};

package/dist/hooks/step.js

@@ -1 +1 @@
-import{getContext as v,setContext as E}from"svelte";import{createStore as h,combine as a,attach as w,createEffect as C,sample as l}from"effector";import{getStepFields as A}from"@picked/client";import{STEP_CONTEXT_KEY as d}from"../context.js";import{getStepRouter as F}from"../router/context.js";import{getExperience as T,getPicked as P}from"./client.js";function N(){return v(d)}function O(o){const u=T(),i=P(),{activeStep:m}=F(),n=m.map(e=>(e==null?void 0:e.id)===o),s=u.treeStore.map(e=>{const t=e.steps.find(r=>r.id===o);if(!t)throw new Error(`Step with id "${o}" not found in the experience tree.`);return t}),c=h([]),S=a({fields:c,responses:i.responses.listStore},({fields:e,responses:t})=>e.map(r=>{var f;const g=(f=t.find(x=>x.fieldId===r.id))==null?void 0:f.value;return{...r,value:g}})),p=w({source:a({step:s,fields:i.fields.listStore}),effect:C(async({step:{fieldIds:e},fields:t})=>await A(i,t.filter(r=>e.includes(r.id))))});return l({source:{isActiveStep:n},filter:({isActiveStep:e})=>e,target:p}),l({source:p.doneData,target:c}),E(d,{step:s,fields:S,isActiveStep:n})}export{N as getStep,O as setStepContext};
+import{getContext as h,setContext as w}from"svelte";import{createStore as C,combine as l,attach as F,createEffect as A,sample as m}from"effector";import{getStepFields as T}from"@picked/client";import{STEP_CONTEXT_KEY as d}from"../context.js";import{getStepRouter as b}from"../router/context.js";import{getForm as P}from"../form/form.svelte";import{getExperience as _,getPicked as $}from"./client.js";function V(){const t=h(d),{form:i}=t;return{...t,...i}}function W(t){const i=_(),n=$(),{activeStep:u}=b(),f=u.map(e=>(e==null?void 0:e.id)===t),s=i.treeStore.map(e=>{const r=e.steps.find(o=>o.id===t);if(!r)throw new Error(`Step with id "${t}" not found in the experience tree.`);return r}),c=C([]),S=l({fields:c,responses:n.responses.listStore},({fields:e,responses:r})=>e.map(o=>{var p;const v=(p=r.find(E=>E.fieldId===o.id))==null?void 0:p.value;return{...o,value:v}})),a=F({source:l({step:s,fields:n.fields.listStore}),effect:A(async({step:{fieldIds:e},fields:r})=>await T(n,r.filter(o=>e.includes(o.id))))}),{label:g}=s.getState(),x=P({id:`${t}`,title:g||t,fields:c});return m({source:{isActiveStep:f},filter:({isActiveStep:e})=>e,target:a}),m({source:a.doneData,target:c}),w(d,{step:s,fields:S,isActiveStep:f,form:x})}export{V as getStep,W as setStepContext};

package/dist/index.d.ts

@@ -1,3 +1,2 @@
 export { adaptSvelteComponent, isValidAdaptedComponent } from './component';
-export type { ComponentWithProps } from './component';
-export { LazyImage } from './components';
+export type * from './component';

package/dist/index.js

@@ -1 +1 @@
-import{adaptSvelteComponent as o,isValidAdaptedComponent as t}from"./component.js";import{default as d}from"./components/LazyImage.svelte";export{d as LazyImage,o as adaptSvelteComponent,t as isValidAdaptedComponent};
+import{adaptSvelteComponent as t,isValidAdaptedComponent as p}from"./component.js";export{t as adaptSvelteComponent,p as isValidAdaptedComponent};

package/dist/render/browser.js

@@ -1 +1 @@
-import{mount as a}from"svelte";import{isValidAdaptedComponent as d}from"../component.js";import{CLIENT_CONTEXT_KEY as f,EXPERIENCE_CONTEXT_KEY as C}from"../context.js";import{mergeArrays as u}from"../utils/array.js";function E(r,e){return new Map([[f,r],[C,e]])}const g=async(r,e,n,o,i)=>{var m,p;if(!d(e))throw new Error("The component is invalid.");const c=u((m=e.style)==null?void 0:m.sheets,i.stylesheets),l=u((p=e.style)==null?void 0:p.css,i.css);if(c.length&&c.forEach(s=>{const t=document.createElement("link");t.setAttribute("rel","stylesheet"),t.setAttribute("href",s),t.setAttribute("type","text/css"),t.setAttribute("picked-injected","true"),r.appendChild(t)}),l.length&&l.forEach(s=>{const t=document.createElement("style");t.textContent=s,t.setAttribute("type","text/css"),t.setAttribute("picked-injected","true"),r.appendChild(t)}),e.component instanceof Promise){const{default:s}=await e.component;a(s,{target:r,props:{client:n,experience:o},context:E(n,o)});return}a(e.component,{target:r,props:{client:n,experience:o},context:E(n,o)})},T=r=>{};export{E as createContext,g as renderSvelteComponent,T as unRenderSvelteComponent};
+import{mount as d}from"svelte";import{isValidAdaptedComponent as E}from"../component.js";import{CLIENT_CONTEXT_KEY as f,EXPERIENCE_CONTEXT_KEY as y}from"../context.js";import{mergeArrays as u}from"../utils/array.js";import h from"../utils/ErrorBoundary.svelte";function C(n,e){return new Map([[f,n],[y,e]])}const k=async(n,e,s,o,i)=>{var p,a;if(!E(e))throw new Error("The component is invalid.");const c=u((p=e.style)==null?void 0:p.sheets,i.stylesheets),m=u((a=e.style)==null?void 0:a.css,i.css);c.length&&c.forEach(r=>{const t=document.createElement("link");t.setAttribute("rel","stylesheet"),t.setAttribute("href",r),t.setAttribute("type","text/css"),t.setAttribute("picked-injected","true"),n.appendChild(t)}),m.length&&m.forEach(r=>{const t=document.createElement("style");t.textContent=r,t.setAttribute("type","text/css"),t.setAttribute("picked-injected","true"),n.appendChild(t)});const l=r=>{d(h,{target:n,props:{component:r,componentProps:{client:s,experience:o}},context:C(s,o)})};if(e.component instanceof Promise){const{default:r}=await e.component;l(r);return}l(e.component)},N=n=>{};export{C as createContext,k as renderSvelteComponent,N as unRenderSvelteComponent};

package/dist/utils/ErrorBoundary.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import type { ComponentWithProps } from '../component'
+  import { getPicked } from '../hooks'
+
+  interface Props {
+    component: ComponentWithProps
+    componentProps?: Record<string, unknown>
+  }
+
+  const { component: InnerComponent, componentProps }: Props = $props()
+
+  function handleError(error: unknown) {
+    const client = getPicked()
+
+    // We still log to console for visibility during development
+    // eslint-disable-next-line no-console
+    console.error(error)
+
+    client.eventBus({
+      type: 'exception',
+      level: 'error',
+      data: error,
+    })
+  }
+</script>
+
+<svelte:boundary onerror={handleError}><InnerComponent {...componentProps} /></svelte:boundary>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@picked/svelte",
-  "version": "0.0.1-dev.1765971320697",
+  "version": "0.0.1-dev.1767586122445",
   "dependencies": {
     "d3": "^7.9.0"
   },
@@ -75,7 +75,7 @@
   ],
   "module": "./dist/index.js",
   "peerDependencies": {
-    "@picked/client": "0.0.1-dev.1765971320697",
+    "@picked/client": "0.0.1-dev.1767586122445",
     "effector": "^23.3.0",
     "svelte": "^5.34.3"
   },

package/dist/components/LazyImage.svelte

@@ -1,226 +0,0 @@
-<script lang="ts">
-  import type { HTMLImgAttributes } from 'svelte/elements'
-  import { onMount } from 'svelte'
-
-  type CommonProps = Omit<HTMLImgAttributes, 'src' | 'loading' | 'width' | 'height'> & {
-    src: string
-    loading?: 'eager' | 'lazy'
-    alt: string
-    sizes?: string
-    objectFit?: string
-    loader?: (params: { src: string; width: number }) => string | undefined
-  }
-
-  type FillProps = {
-    fill: true
-    width?: never
-    height?: never
-  }
-
-  type FixedSizeProps = {
-    fill?: false
-    width: number
-    height: number
-  }
-
-  type Props = (CommonProps & FillProps) | (CommonProps & FixedSizeProps)
-
-  const {
-    src,
-    width,
-    height,
-    loading = 'lazy',
-    alt,
-    sizes = '100vw',
-    objectFit = 'cover',
-    fill = false,
-    loader,
-    ...restProps
-  }: Props = $props()
-
-  let imgElement = $state<HTMLImageElement | undefined>(undefined)
-  let placeholderElement = $state<HTMLDivElement | undefined>(undefined)
-  let isLoaded = $state(false)
-  let isInView = $state(false)
-  let observer: IntersectionObserver | undefined
-
-  const aspectRatio = $derived.by(() =>
-    !fill && typeof width === 'number' && typeof height === 'number' && height !== 0
-      ? width / height
-      : undefined,
-  )
-
-  const SUPPORTED_SIZES = [
-    16, 32, 48, 64, 96, 128, 256, 384, 640, 750, 828, 1080, 1200, 1920, 2048, 3840,
-  ]
-
-  function findClosestSize(targetSize: number): number {
-    const roundedTargetSize = Math.round(targetSize)
-    return SUPPORTED_SIZES.reduce(
-      (prev, curr) =>
-        Math.abs(curr - roundedTargetSize) < Math.abs(prev - roundedTargetSize) ? curr : prev,
-      SUPPORTED_SIZES[0],
-    )
-  }
-
-  function isConvincelyDomain(url: URL): boolean {
-    try {
-      return url.hostname.endsWith('.convincely.io')
-    } catch {
-      return false
-    }
-  }
-
-  function isShopifyDomain(url: URL): boolean {
-    try {
-      return url.hostname === 'cdn.shopify.com'
-    } catch {
-      return false
-    }
-  }
-
-  /**
-   * Add dpl param to Convincely domain URLs for deployment-specific routing.
-   */
-  function addDplParamIfNeeded(imageSrc: string): string {
-    try {
-      const url = new URL(imageSrc, import.meta.url)
-      
-      if (isConvincelyDomain(url)) {
-        // Check for Vercel deployment ID (works in both browser and server contexts)
-        const vercelDeploymentId = typeof import.meta.env !== 'undefined' 
-          ? import.meta.env.VERCEL_DEPLOYMENT_ID 
-          : undefined
-        const vercelSkewProtection = typeof import.meta.env !== 'undefined'
-          ? import.meta.env.VERCEL_SKEW_PROTECTION_ENABLED
-          : undefined
-
-        if (vercelDeploymentId && vercelSkewProtection === '1') {
-          url.searchParams.set('dpl', vercelDeploymentId)
-        }
-        return url.toString()
-      }
-      
-      return imageSrc
-    } catch {
-      return imageSrc
-    }
-  }
-
-  function getOptimizedImageUrl(imageSrc: string, targetWidth: number): string {
-    const width = findClosestSize(targetWidth)
-    
-    try {
-      const url = new URL(imageSrc, import.meta.url)
-      
-      // If it's a Shopify domain and a custom loader is provided, use the loader
-      if (isShopifyDomain(url) && loader) {
-        const customUrl = loader({ src: imageSrc, width })
-        if (customUrl) return customUrl
-      }
-    } catch {
-      // If URL parsing fails, continue with default behavior
-    }
-
-    // Default optimization: use img.convincely.io for all images
-    const imgUrl = getImgUrl(imageSrc)
-    const encodedUrl = encodeURIComponent(imgUrl)
-    return `https://img.convincely.io/_next/image?url=${encodedUrl}&w=${width}&q=75`
-  }
-
-  function getImgUrl(imageSrc: string): string {
-    if (imageSrc.startsWith('data:')) {
-      return imageSrc
-    }
-
-    const baseUrl = new URL(import.meta.url).origin
-    return imageSrc.startsWith('http') ? imageSrc : `${baseUrl}${imageSrc}`
-  }
-
-  // Add dpl param to src if it's a Convincely domain
-  const processedSrc = $derived(addDplParamIfNeeded(src))
-
-  function handleLoad() {
-    isLoaded = true
-  }
-
-  onMount(() => {
-    if (loading === 'lazy') {
-      const elementToObserve = placeholderElement || imgElement
-      if (elementToObserve) {
-        observer = new IntersectionObserver(
-          (entries) => {
-            entries.forEach((entry) => {
-              if (entry.isIntersecting) {
-                isInView = true
-                observer?.unobserve(entry.target)
-              }
-            })
-          },
-          {
-            rootMargin: '50px',
-          },
-        )
-        observer.observe(elementToObserve)
-
-        return () => {
-          observer?.disconnect()
-        }
-      }
-    } else if (loading === 'eager') {
-      isInView = true
-    }
-  })
-
-  const shouldLoadImage = $derived(loading === 'eager' || isInView)
-
-  const widthCandidates = $derived.by(() => {
-    if (typeof width === 'number' && Number.isFinite(width)) {
-      const filtered = SUPPORTED_SIZES.filter((w) => w <= width)
-      return filtered.length ? filtered : [width]
-    }
-
-    return SUPPORTED_SIZES
-  })
-
-  const srcSet = $derived.by(() =>
-    widthCandidates.map((w) => `${getOptimizedImageUrl(processedSrc, w)} ${w}w`).join(', '),
-  )
-
-  const fallbackSrc = $derived.by(() => getOptimizedImageUrl(processedSrc, widthCandidates[0]))
-
-  const fadeClasses = $derived.by(() => {
-    if (loading === 'eager') return ''
-    return `transition-opacity duration-300 ${isLoaded ? 'opacity-100' : 'opacity-0'}`
-  })
-</script>
-
-{#if shouldLoadImage}
-  <img
-    {...restProps}
-    bind:this={imgElement}
-    src={fallbackSrc}
-    srcset={srcSet}
-    {sizes}
-    width={fill ? undefined : width}
-    height={fill ? undefined : height}
-    {alt}
-    style:aspect-ratio={aspectRatio}
-    style:object-fit={objectFit}
-    style:position={fill ? 'absolute' : undefined}
-    style:inset={fill ? 0 : undefined}
-    {loading}
-    onload={handleLoad}
-    class="{fadeClasses} {restProps.class || ''}"
-    data-testid="lazy-image-element"
-  />
-{:else}
-  <div
-    bind:this={placeholderElement}
-    style:aspect-ratio={aspectRatio}
-    style:position={fill ? 'absolute' : undefined}
-    style:inset={fill ? 0 : undefined}
-    aria-label={alt}
-    data-testid="lazy-image-placeholder"
-  ></div>
-{/if}

package/dist/components/index.d.ts

@@ -1 +0,0 @@
-export { default as LazyImage } from './LazyImage.svelte';

package/dist/components/index.js

@@ -1 +0,0 @@
-import{default as f}from"./LazyImage.svelte";export{f as LazyImage};