@picked/svelte 0.0.62-next.11 → 0.0.62-next.2

package/dist/components/LazyImage.svelte

@@ -88,7 +88,7 @@
       if (isConvincelyDomain(url)) {
         const encodedUrl = encodeURIComponent(url.toString())
         const optimizedSize = findClosestSize(targetWidth)
-        return `https://img.picked-content.com/_next/image?url=${encodedUrl}&w=${optimizedSize}&q=75`
+        return `https://img.convincely.io/_next/image?url=${encodedUrl}&w=${optimizedSize}&q=75`
       }
 
       // For other domains, return the original URL

package/dist/hooks/events.js

@@ -1 +1 @@
-import{getExperience as e,getPicked as t}from"./client.js";import{attach as n}from"effector";import{trackRecommendationPresentEvent as r}from"@picked/analytics";var i=()=>{let{session:i,projectId:a}=t(),o=e();return n({source:{config:o.configStore,step:o.currentStepStore,sessionSnapshot:i.store},async effect({config:e,step:t,sessionSnapshot:n},i){if(!t)throw Error(`Cannot track recommendation present event: missing experience step.`);return r({projectId:a,experience:{id:o.experienceId,title:e.name},sessionId:n.id,identifiers:n.identifiers,isUser:n.isUser,step:t,productList:i})}})};export{i as getTrackRecommendationPresentEvent};
+import{getExperience as e,getPicked as t}from"./client.js";import{attach as n}from"effector";import{trackRecommendationPresentEvent as r}from"@picked/analytics";var i=()=>{let{session:i,projectId:a}=t(),o=e();return n({source:{config:o.configStore,step:o.currentStepStore},async effect({config:e,step:t},n){if(!i||!t)throw Error(`Cannot track recommendation present event: missing session or experience data.`);return r({projectId:a,experience:{id:o.experienceId,title:e.name},sessionId:i.id,identifiers:i.identifiers,isUser:i.isUser,step:t,productList:n})}})};export{i as getTrackRecommendationPresentEvent};

package/dist/hooks/index.d.ts

@@ -3,8 +3,7 @@ export { getPicked, getExperience } from './client';
 export { getPredicate, getPredicateResult } from './predicate';
 export { getFeature, getFeatureResult } from './feature';
 export { getAction, getActionResult } from './action';
-export { getStep, setStepContext, getStepContent } from './step';
-export { getContent } from './content';
+export { getStep, setStepContext } from './step';
 export { useUnit, getContextScope, setContextScope } from './stores';
 export { createSessionStorageStore, createLocalStorageStore } from './storage.js';
 export { getTrackRecommendationPresentEvent } from './events';

package/dist/hooks/index.js

@@ -1 +1 @@
-import{getExperience as e,getPicked as t}from"./client.js";import{getPredicate as n,getPredicateResult as r}from"./predicate.js";import{getFeature as i,getFeatureResult as a}from"./feature.js";import{getAction as o,getActionResult as s}from"./action.js";import{getStep as c,getStepContent as l,setStepContext as u}from"./step.js";import{getContent as d}from"./content.js";import{getContextScope as f,setContextScope as p,useUnit as m}from"./stores.js";import{createLocalStorageStore as h,createSessionStorageStore as g}from"./storage.js";import{getTrackRecommendationPresentEvent as _}from"./events.js";import{createQuery as v,queryCache as y,queryPresets as b}from"./create-query/index.js";export{h as createLocalStorageStore,v as createQuery,g as createSessionStorageStore,o as getAction,s as getActionResult,d as getContent,f as getContextScope,e as getExperience,i as getFeature,a as getFeatureResult,t as getPicked,n as getPredicate,r as getPredicateResult,c as getStep,l as getStepContent,_ as getTrackRecommendationPresentEvent,y as queryCache,b as queryPresets,p as setContextScope,u as setStepContext,m as useUnit};
+import{getExperience as e,getPicked as t}from"./client.js";import{getPredicate as n,getPredicateResult as r}from"./predicate.js";import{getFeature as i,getFeatureResult as a}from"./feature.js";import{getAction as o,getActionResult as s}from"./action.js";import{getStep as c,setStepContext as l}from"./step.js";import{getContextScope as u,setContextScope as d,useUnit as f}from"./stores.js";import{createLocalStorageStore as p,createSessionStorageStore as m}from"./storage.js";import{getTrackRecommendationPresentEvent as h}from"./events.js";import{createQuery as g,queryCache as _,queryPresets as v}from"./create-query/index.js";export{p as createLocalStorageStore,g as createQuery,m as createSessionStorageStore,o as getAction,s as getActionResult,u as getContextScope,e as getExperience,i as getFeature,a as getFeatureResult,t as getPicked,n as getPredicate,r as getPredicateResult,c as getStep,h as getTrackRecommendationPresentEvent,_ as queryCache,v as queryPresets,d as setContextScope,l as setStepContext,f as useUnit};

package/dist/hooks/step.d.ts

@@ -1,15 +1,10 @@
 import { Store } from 'effector';
-import { Content, ExperienceStep } from '@picked/client';
+import { ExperienceStep } from '@picked/client';
 import { FormInstance, FormField } from '../form/create-form.svelte';
 export interface StepContext extends FormInstance {
     step: Store<ExperienceStep>;
     /** Directly accessible fields with current response values — usable without a form. */
     fields: Store<FormField[]>;
-    /**
-     * Reactive store of the current step's CMS layout content. Resolves the step's
-     * `layoutContentId` against `client.contents` and stays reactive.
-     */
-    layoutContentStore: Store<Content | null>;
     isActive: Store<boolean>;
     /** @deprecated Use `isActive` instead. */
     isActiveStep: Store<boolean>;
@@ -17,31 +12,13 @@ export interface StepContext extends FormInstance {
 /**
  * Creates and sets step context in the Svelte context tree.
  *
- * @param {string} stepKey - The step key.
- * @returns {StepContext} The created step context.
+ * @param stepKey - The step key.
  * @example setStepContext('step-1')
  */
 export declare function setStepContext(stepKey: string): StepContext;
 /**
  * Retrieves the step context from the Svelte context tree.
  *
- * @returns {StepContext} The current step context.
  * @example getStep()
  */
 export declare function getStep(): StepContext;
-/**
- * Returns a Svelte/Effector store that yields the current step's resolved CMS content
- * data, or `null` when no content is registered for the step's `layoutContentId`.
- * Subscribers automatically receive updates when content is registered or replaced.
- *
- * @returns {Store<Record<string, unknown> | null>} A store of the Content record's `data`.
- * @example
- * ```svelte
- * <script>
- *   import { getStepContent } from '@picked/svelte'
- *   const content = getStepContent()
- * </script>
- * <h1>{$content?.headline ?? ''}</h1>
- * ```
- */
-export declare function getStepContent(): Store<Record<string, unknown> | null>;

package/dist/hooks/step.js

@@ -1 +1 @@
-import{STEP_CONTEXT_KEY as e}from"../context.js";import{getPicked as t}from"./client.js";import{getStepRouter as n}from"../router/context.js";import{combine as r}from"effector";import{getContext as i,setContext as a}from"svelte";import{createForm as o}from"../form/create-form.svelte";function s(i){let s=t(),{activeStep:c}=n(),l=c.map(e=>e?.key===i),u=s.steps.listStore.map(e=>e.find(e=>e.key===i)??{id:i,key:i,name:``,fieldKeys:[]}),d=o(i,u.map(e=>e.name),u.map(e=>e.fieldKeys));return a(e,{step:u,layoutContentStore:r(u,s.contents.indexStore,(e,t)=>e.layoutContentId?t[e.layoutContentId]??null:null,{skipVoid:!1}),isActive:l,isActiveStep:l,...d})}function c(){return i(e)}function l(){let{layoutContentStore:e}=c();return e.map(e=>e?.data??null,{skipVoid:!1})}export{c as getStep,l as getStepContent,s as setStepContext};
+import{STEP_CONTEXT_KEY as e}from"../context.js";import{getPicked as t}from"./client.js";import{getStepRouter as n}from"../router/context.js";import{getContext as r,setContext as i}from"svelte";import{createForm as a}from"../form/create-form.svelte";function o(r){let o=t(),{activeStep:s}=n(),c=s.map(e=>e?.key===r),l=o.steps.listStore.map(e=>e.find(e=>e.key===r)??{id:r,key:r,name:``,fieldKeys:[]});return i(e,{step:l,isActive:c,isActiveStep:c,...a(r,l.map(e=>e.name),l.map(e=>e.fieldKeys))})}function s(){return r(e)}export{s as getStep,o as setStepContext};

package/dist/plugins/devtools/screens/responses/ResponseTableRow.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   /** @file Editable table row for a single field response in the devtools responses screen. */
-  import type { ResponseListItem, Field, FieldValue, JsonValue } from '@picked/client'
+  import type { ResponseListItem, PrimitiveFieldValue, Field } from '@picked/client'
   import { getPicked } from '../../../../hooks'
   import { Button, Text, CodeBlock, Banner, Stack } from '../../ui'
 
@@ -13,7 +13,7 @@
   let editValue = ''
   let editError = ''
   // eslint-disable-next-line svelte/prefer-svelte-reactivity -- Set is reassigned for Svelte reactivity via `selectedOptions = selectedOptions`
-  let selectedOptions: Set<JsonValue> = new Set()
+  let selectedOptions: Set<PrimitiveFieldValue> = new Set()
 
   $: hasOptions = Array.isArray(field?.options) && field.options.length > 0
   $: staticOptions = Array.isArray(field?.options) ? field.options : null
@@ -22,8 +22,7 @@
   /**
    * Formats a response value for display, handling arrays, objects, and primitives.
    *
-   * @param {unknown} value - The response value to format.
-   * @returns {string} The display string for the value.
+   * @param value - The response value to format.
    * @example
    * ```typescript
    * formatValue(['a', 'b']) // 'a, b'
@@ -88,13 +87,13 @@
   /**
    * Toggles selection of a field option, supporting both single and multi-select modes.
    *
-   * @param {JsonValue} optionValue - The option value to toggle.
+   * @param optionValue - The option value to toggle.
    * @example
    * ```typescript
    * toggleOption('red') // selects or deselects the 'red' option
    * ```
    */
-  function toggleOption(optionValue: JsonValue) {
+  function toggleOption(optionValue: PrimitiveFieldValue) {
     if (field?.multiple) {
       if (selectedOptions.has(optionValue)) {
         selectedOptions.delete(optionValue)
@@ -111,15 +110,14 @@
   /**
    * Parses a string input into a typed value based on the field's type.
    *
-   * @param {string} input - The raw string input to parse.
-   * @returns {FieldValue} The parsed value (null, number, boolean, JSON, or string).
+   * @param input - The raw string input to parse.
    * @example
    * ```typescript
    * parseValue('42') // 42 (when field.type is 'number')
    * parseValue('true') // true (when field.type is 'boolean')
    * ```
    */
-  function parseValue(input: string): FieldValue {
+  function parseValue(input: string): unknown {
     const trimmed = input.trim()
 
     if (trimmed === '' || trimmed === '-') {
@@ -175,7 +173,7 @@
         newValue = parseValue(editValue)
       }
 
-      const result = await client.responses.commit({ [field.key]: newValue })
+      const result = await client.responses.commit({ [field.id]: newValue })
 
       if (result.errors.length > 0) {
         editError = result.errors[0].userMessage
@@ -199,7 +197,7 @@
    * ```
    */
   function handleClear() {
-    client.responses.clear(field.key)
+    client.responses.clear(field.id)
   }
 </script>
 

package/dist/router/StepRouter.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   /** @file Root router component that manages step registration and active step detection via Effector. */
-  import { combine, createEvent, createStore } from 'effector'
+  import { createEvent, createStore, sample } from 'effector'
+  import { supportsWindow } from '@picked/client'
   import { getExperience } from '../hooks'
   import { setStepRouter, type Step } from './context'
 
@@ -8,24 +9,57 @@
 
   const { currentStepStore } = experience
 
+  const activeStepStore = createStore<Step | null>(null)
+  let hasActiveStep = false
   const stepsStore = createStore<Step[]>([])
 
-  const registerStep = createEvent<Step>()
-  const unregisterStep = createEvent<Step>()
+  const registerStepEvent = createEvent<Step>()
+  const unregisterStepEvent = createEvent<Step>()
+  const setActiveStepEvent = createEvent<Step | null>()
 
-  stepsStore
-    .on(registerStep, (state, step) => [...state, step])
-    .on(unregisterStep, (state, step) => state.filter((s) => s !== step))
+  stepsStore.on(registerStepEvent, (state, step) => [...state, step])
+  stepsStore.on(unregisterStepEvent, (state, step) => state.filter((s) => s !== step))
 
-  const activeStepStore = combine(
-    { steps: stepsStore, currentStep: currentStepStore },
-    ({ steps, currentStep }) => steps.find((s) => s.key === currentStep?.key) ?? null,
-  )
+  sample({
+    source: setActiveStepEvent,
+    filter: (step) => step !== null,
+    target: activeStepStore,
+  })
+
+  const registerStep = (step: Step) => {
+    // todo: getIsSSR context
+
+    if (!supportsWindow()) {
+      // In SSR we should set the activeStep immediately if it is a match.
+      // If there are more Routes being registered after a match is found,
+      // we just skip them.
+      if (hasActiveStep) return
+
+      const isMatchingStep = step.key === currentStepStore.getState()?.key
+
+      if (isMatchingStep) {
+        setActiveStepEvent(step)
+        hasActiveStep = true
+      }
+    } else {
+      registerStepEvent(step)
+    }
+  }
+
+  const unregisterStep = (step: Step) => {
+    unregisterStepEvent(step)
+  }
+
+  sample({
+    source: { steps: stepsStore, currentStep: currentStepStore },
+    fn: ({ steps, currentStep }) => steps.find((s) => s.key === currentStep?.key) || null,
+    target: setActiveStepEvent,
+  })
 
   setStepRouter({
     registerStep,
     unregisterStep,
-    activeStep: activeStepStore,
+    activeStep: activeStepStore.map((val) => val),
   })
 </script>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@picked/svelte",
-  "version": "0.0.62-next.11",
+  "version": "0.0.62-next.2",
   "dependencies": {
     "d3": "^7.9.0"
   },
@@ -88,7 +88,7 @@
   },
   "module": "./dist/index.js",
   "peerDependencies": {
-    "@picked/client": "0.0.62-next.11",
+    "@picked/client": "0.0.62-next.2",
     "effector": "^23.3.0",
     "svelte": "^5.46.4"
   },

package/dist/hooks/content.d.ts

@@ -1,18 +0,0 @@
-import { Store } from 'effector';
-import { Content } from '@picked/client';
-/**
- * Returns the registry store for a content id, mirroring `getField(key)`. Resolves
- * the Picked client via `getPicked()` and returns `client.contents.getById(id)`.
- *
- * @param {string} id - The content record id to look up.
- * @returns {Store<Content | null>} The registry store; `null` until content is registered.
- * @example
- * ```svelte
- * <script>
- *   import { getContent } from '@picked/svelte'
- *   const banner = getContent('lc_banner')
- * </script>
- * <h1>{$banner?.data?.headline ?? ''}</h1>
- * ```
- */
-export declare function getContent(id: string): Store<Content | null>;

package/dist/hooks/content.js

@@ -1 +0,0 @@
-import{getPicked as e}from"./client.js";function t(t){return e().contents.getById(t)}export{t as getContent};