@picked/svelte 0.0.1-dev.1764287278696 → 0.0.1-dev.1764358457580

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/package.json

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

package/dist/components/LazyImage.svelte

@@ -1,196 +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
-  }
-
-  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,
-    ...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
-    }
-  }
-
-  function getOptimizedImageUrl(imageSrc: string, targetWidth: number): string {
-    try {
-      const url = new URL(imageSrc, import.meta.url)
-      if (isConvincelyDomain(url)) {
-        if (
-          import.meta.env.VERCEL_DEPLOYMENT_ID &&
-          import.meta.env.VERCEL_SKEW_PROTECTION_ENABLED === '1'
-        ) {
-          url.searchParams.set('dpl', import.meta.env.VERCEL_DEPLOYMENT_ID)
-        }
-        const encodedUrl = encodeURIComponent(url.toString())
-        const optimizedSize = findClosestSize(targetWidth)
-        return `https://img.convincely.io/_next/image?url=${encodedUrl}&w=${optimizedSize}&q=75`
-      }
-      if (isShopifyDomain(url)) {
-        const optimizedSize = findClosestSize(targetWidth)
-        url.searchParams.set('width', optimizedSize.toString())
-        return url.toString()
-      }
-      return getImgUrl(imageSrc)
-    } catch {
-      return getImgUrl(imageSrc)
-    }
-  }
-
-  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}`
-  }
-
-  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(src, w)} ${w}w`).join(', '),
-  )
-
-  const fallbackSrc = $derived.by(() =>
-    getOptimizedImageUrl(src, 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};