@picked/svelte 0.0.61 → 0.0.62-next.10

package/dist/components/LazyImage.svelte

@@ -88,7 +88,7 @@
       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`
+        return `https://img.picked-content.com/_next/image?url=${encodedUrl}&w=${optimizedSize}&q=75`
       }
 
       // For other domains, return the original URL

package/dist/hooks/content.d.ts

@@ -0,0 +1,18 @@
+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

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

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,organizationId:o}=t(),s=e();return n({source:{config:s.configStore,step:s.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({organizationId:o,projectId:a,experience:{id:s.experienceId,title:e.name},sessionId:i.id,identifiers:i.identifiers,isUser:i.isUser,step:t,productList:n})}})};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,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};

package/dist/hooks/index.d.ts

@@ -3,7 +3,8 @@ export { getPicked, getExperience } from './client';
 export { getPredicate, getPredicateResult } from './predicate';
 export { getFeature, getFeatureResult } from './feature';
 export { getAction, getActionResult } from './action';
-export { getStep, setStepContext } from './step';
+export { getStep, setStepContext, getStepContent } from './step';
+export { getContent } from './content';
 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,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};
+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};

package/dist/hooks/step.d.ts

@@ -1,10 +1,15 @@
 import { Store } from 'effector';
-import { ExperienceStep } from '@picked/client';
+import { Content, 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>;
@@ -12,13 +17,31 @@ export interface StepContext extends FormInstance {
 /**
  * Creates and sets step context in the Svelte context tree.
  *
- * @param stepKey - The step key.
+ * @param {string} stepKey - The step key.
+ * @returns {StepContext} The created step context.
  * @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{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};
+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};

package/dist/plugins/devtools/screens/project/ProjectScreen.svelte

@@ -13,7 +13,6 @@
 
   const rows = [
     { label: 'Project ID', value: client.projectId },
-    { label: 'Organization ID', value: client.organizationId },
     { label: 'API URL', value: client.apiUrl },
     { label: 'Dashboard URL', value: client.dashboardUrl },
   ]

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

package/dist/router/StepRouter.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   /** @file Root router component that manages step registration and active step detection via Effector. */
-  import { createEvent, createStore, sample } from 'effector'
-  import { supportsWindow } from '@picked/client'
+  import { combine, createEvent, createStore } from 'effector'
   import { getExperience } from '../hooks'
   import { setStepRouter, type Step } from './context'
 
@@ -9,57 +8,24 @@
 
   const { currentStepStore } = experience
 
-  const activeStepStore = createStore<Step | null>(null)
-  let hasActiveStep = false
   const stepsStore = createStore<Step[]>([])
 
-  const registerStepEvent = createEvent<Step>()
-  const unregisterStepEvent = createEvent<Step>()
-  const setActiveStepEvent = createEvent<Step | null>()
+  const registerStep = createEvent<Step>()
+  const unregisterStep = createEvent<Step>()
 
-  stepsStore.on(registerStepEvent, (state, step) => [...state, step])
-  stepsStore.on(unregisterStepEvent, (state, step) => state.filter((s) => s !== step))
+  stepsStore
+    .on(registerStep, (state, step) => [...state, step])
+    .on(unregisterStep, (state, step) => state.filter((s) => s !== step))
 
-  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,
-  })
+  const activeStepStore = combine(
+    { steps: stepsStore, currentStep: currentStepStore },
+    ({ steps, currentStep }) => steps.find((s) => s.key === currentStep?.key) ?? null,
+  )
 
   setStepRouter({
     registerStep,
     unregisterStep,
-    activeStep: activeStepStore.map((val) => val),
+    activeStep: activeStepStore,
   })
 </script>
 

package/package.json

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