@picked/svelte 0.0.1-dev.1770256874555 → 0.0.1-dev.1770787109735

package/dist/components/LazyImage.svelte

@@ -0,0 +1,191 @@
+<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 getOptimizedImageUrl(imageSrc: string, targetWidth: number): string {
+    try {
+      // If a custom loader is provided, use it first
+      if (loader) {
+        const result = loader({ src: imageSrc, width: targetWidth })
+        if (result !== undefined) {
+          return result
+        }
+      }
+
+      const url = new URL(imageSrc, import.meta.url)
+
+      // Handle Convincely domain optimization through the image optimization service
+      if (isConvincelyDomain(url)) {
+        const encodedUrl = encodeURIComponent(url.toString())
+        const optimizedSize = findClosestSize(targetWidth)
+        return `https://img.convincely.io/_next/image?url=${encodedUrl}&w=${optimizedSize}&q=75`
+      }
+
+      // For other domains, return the original URL
+      return getImgUrl(imageSrc)
+    } catch {
+      // If URL parsing fails, fall back to original behavior
+      return getImgUrl(imageSrc)
+    }
+  }
+
+  function getImgUrl(imageSrc: string): string {
+    // Skip base64 images
+    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]))
+</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={restProps.class}
+    data-loaded={isLoaded}
+    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

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

package/dist/components/index.js

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

package/dist/hooks/field.d.ts

@@ -1,7 +1,10 @@
-import { Field, FieldValue } from '@picked/client';
+import { Field, FieldValue, FieldOptionArray, JsonValue } from '@picked/client';
 import { Store } from 'effector';
 export interface GetFieldResponse {
-    value: Store<FieldValue>;
     field: Store<Field | null>;
+    value: Store<FieldValue>;
+    options: Store<FieldOptionArray<JsonValue> | null>;
+    isLoading: Store<boolean>;
+    error: Store<string | null>;
 }
 export declare function getField(id: string): GetFieldResponse;

package/dist/hooks/field.js

@@ -1 +1 @@
-import{getPicked as s}from"./client.js";function r(e){const t=s(),n=t.fields.getById(e),o=t.responses.getByFieldId(e);return{field:n,value:o}}export{r as getField};
+import{getPicked as i}from"./client.js";function r(t){const o=i();o.fields.resolve(t);const s=o.fields.getByFieldId(t);return{field:o.fields.getById(t),value:o.responses.getByFieldId(t),options:s.map(e=>e.options),isLoading:s.map(e=>e.status==="loading"||e.status==="idle"),error:s.map(e=>e.error??null)}}export{r as getField};

package/dist/hooks/index.d.ts

@@ -1,4 +1,5 @@
 export { getPicked, getExperience } from './client';
+export { getField } from './field';
 export { getPredicate, getPredicateResult } from './predicate';
 export { getFeature, getFeatureResult } from './feature';
 export { getAction, getActionResult } from './action';

package/dist/hooks/index.js

@@ -1 +1 @@
-import{getExperience as r,getPicked as o}from"./client.js";import{getPredicate as p,getPredicateResult as a}from"./predicate.js";import{getFeature as x,getFeatureResult as n}from"./feature.js";import{getAction as s,getActionResult as f}from"./action.js";import{getStep as u,setStepContext as S}from"./step.js";import{getContextScope as d,setContextScope as l,useUnit as C}from"./stores.js";import{createLocalStorageStore as y,createSessionStorageStore as k}from"./storage.js";import{getTrackRecommendationPresentEvent as A}from"./events.js";import{createQuery as F,queryCache as h,queryPresets as v}from"./create-query/index.js";export{y as createLocalStorageStore,F as createQuery,k as createSessionStorageStore,s as getAction,f as getActionResult,d as getContextScope,r as getExperience,x as getFeature,n as getFeatureResult,o as getPicked,p as getPredicate,a as getPredicateResult,u as getStep,A as getTrackRecommendationPresentEvent,h as queryCache,v as queryPresets,l as setContextScope,S as setStepContext,C as useUnit};
+import{getExperience as r,getPicked as o}from"./client.js";import{getField as p}from"./field.js";import{getPredicate as x,getPredicateResult as a}from"./predicate.js";import{getFeature as n,getFeatureResult as s}from"./feature.js";import{getAction as i,getActionResult as u}from"./action.js";import{getStep as d,setStepContext as l}from"./step.js";import{getContextScope as C,setContextScope as R,useUnit as y}from"./stores.js";import{createLocalStorageStore as k,createSessionStorageStore as q}from"./storage.js";import{getTrackRecommendationPresentEvent as E}from"./events.js";import{createQuery as v,queryCache as L,queryPresets as Q}from"./create-query/index.js";export{k as createLocalStorageStore,v as createQuery,q as createSessionStorageStore,i as getAction,u as getActionResult,C as getContextScope,r as getExperience,n as getFeature,s as getFeatureResult,p as getField,o as getPicked,x as getPredicate,a as getPredicateResult,d as getStep,E as getTrackRecommendationPresentEvent,L as queryCache,Q as queryPresets,R as setContextScope,l as setStepContext,y as useUnit};

package/dist/index.d.ts

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

package/dist/index.js

@@ -1 +1 @@
-import{adaptSvelteComponent as t,isValidAdaptedComponent as p}from"./component.js";export{t as adaptSvelteComponent,p as isValidAdaptedComponent};
+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};

package/dist/plugins/devtools/components/ExperienceInstanceListItem.svelte

@@ -8,12 +8,14 @@
   const nextStepNodes = experienceInstance.nextReachableStepNodesStore
   const stepsToOrigin = experienceInstance.stepsToOriginStore
   const stepsToLeaf = experienceInstance.stepsToLeafStore
+  const isOpen = experienceInstance.isOpenStore
 
   $: totalNextStepNodes = $nextStepNodes.length
 </script>
 
 <tr>
   <td>{experienceInstance.experienceId}</td>
+  <td><button onclick={() => experienceInstance.toggleOpen()}>{$isOpen}</button></td>
   <td>{$currentNode?.id || ''}</td>
   <td>{$currentNode?.type || ''}</td>
   <td>{$currentStep?.id || ''}</td>

package/dist/plugins/devtools/components/ExperienceInstancesTable.svelte

@@ -9,6 +9,7 @@
   <thead>
     <tr>
       <th>Experience</th>
+      <th>Is Open</th>
       <th>Current node ID</th>
       <th>Current node Type</th>
       <th>Current step ID</th>

package/dist/plugins/devtools/plugin.js

@@ -1 +1 @@
-import{supportsDocument as c,isPickedRoot as o}from"@picked/client";import{createExperiencePlugin as g}from"@picked/client/plugins/create-experience";import{devtoolsExperience as t}from"./experience.js";const d=()=>[{name:"svelte-devtools",setup:r=>{if(!c())return;const s=r.experienceInstances.getByExperienceId(t.id),i=e=>{if(!(!e.target||!("tagName"in e.target)||typeof e.target.tagName!="string")&&e.key==="."&&!["INPUT","TEXTAREA"].includes(e.target.tagName)&&!(e.currentTarget instanceof HTMLElement&&o(e.currentTarget))&&!(e.target instanceof HTMLElement&&o(e.target))){const n=s.getState();n.length>0?n.forEach(a=>a.toggleOpen()):r.launchExperienceById(t.id)}};document.addEventListener("keydown",i)}},g({experiences:[t]})];export{d as svelteDevtoolsPlugin};
+import{supportsDocument as c,isPickedRoot as a}from"@picked/client";import{createExperiencePlugin as g}from"@picked/client/plugins/create-experience";import{devtoolsExperience as r}from"./experience.js";const m=()=>[{name:"svelte-devtools",setup:t=>{if(!c())return;const s=t.experienceInstances.getByExperienceId(r.id),i=e=>{if(!(!e.target||!("tagName"in e.target)||typeof e.target.tagName!="string")&&e.key==="."&&!["INPUT","TEXTAREA"].includes(e.target.tagName)&&!(e.currentTarget instanceof HTMLElement&&a(e.currentTarget))&&!(e.target instanceof HTMLElement&&a(e.target))){const n=s.getState();n.length>0?n.forEach(o=>o.toggleOpen()):t.launchExperienceById(r.id)}};document.addEventListener("keydown",i),t.eventBus.watch(e=>{e.type==="ready"&&t.launchExperienceById(r.id)})}},g({experiences:[r]})];export{m as svelteDevtoolsPlugin};

package/package.json

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