@picked/svelte 0.0.50-next.4 → 0.0.51-next.1

package/dist/form/create-form.js

@@ -0,0 +1 @@
+import{getExperience as e,getPicked as t}from"../hooks/client.js";import{createForm as n}from"@picked/client/form";import*as r from"svelte/internal/client";function i(i,a,o){let s=n({client:t(),experienceInstance:e()},i,a,o);return{...s,form:{...s.form,onBeforeSubmit:e=>{r.user_effect(()=>s.form.onBeforeSubmit(e))},onSuccess:e=>{r.user_effect(()=>s.form.onSuccess(e))},onError:e=>{r.user_effect(()=>s.form.onError(e))}}}}export{i as createForm};

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

@@ -0,0 +1,24 @@
+import { Store } from 'effector';
+import { FormInstance as CoreFormInstance, ErrorCallback, SubmitCallback, SuccessCallback } from '@picked/client/form';
+export type { FormField } from '@picked/client/form';
+/**
+ * Svelte FormInstance — identical to core but callback registration returns void
+ * (cleanup is handled automatically via $effect, not by the consumer).
+ */
+export interface FormInstance<TFieldIds extends string = string> extends Omit<CoreFormInstance<TFieldIds>, 'form'> {
+    form: Omit<CoreFormInstance<TFieldIds>['form'], 'onBeforeSubmit' | 'onSuccess' | 'onError'> & {
+        onBeforeSubmit: (callback: SubmitCallback<TFieldIds>) => void;
+        onSuccess: (callback: SuccessCallback<TFieldIds>) => void;
+        onError: (callback: ErrorCallback) => void;
+    };
+}
+/**
+ * Creates a form instance with Svelte lifecycle management.
+ *
+ * Wraps the framework-agnostic createForm from @picked/client/form:
+ * - Injects client and experienceInstance from Svelte context
+ * - Auto-wires callback cleanup via $effect so consumers don't need to manage lifecycle
+ *
+ * Used internally by setStepContext — access via getStep() in components.
+ */
+export declare function createForm(formId: string, title: Store<string>, fieldIds: Store<string[]>): FormInstance;

package/dist/form/create-form.svelte.js

@@ -0,0 +1 @@
+export * from './create-form.js';

package/dist/form/get-form.d.ts

@@ -0,0 +1,16 @@
+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 {};

package/dist/form/get-form.js

@@ -0,0 +1 @@
+import{getExperience as e,getPicked as t}from"../hooks/client.js";import{getStep as n}from"../hooks/step.js";import"../hooks/index.js";import{buildResponsesFromFormData as r}from"@picked/client/form";import{attach as i,createEffect as a,createEvent as o,sample as s,split as c}from"effector";function l({id:l,title:u,onError:d,onSuccess:f}){let p=t(),m=n(),h=e(),{currentStepStore:g}=h,_=o(),v=a(e=>p.responses.commit(e)),y=i({source:{step:g},effect:a(({step:e})=>{p.eventBus({type:`form_submit_success`,form:{id:l,title:u},experience:h,step:e??void 0}),f?.()})}),b=i({source:{step:g},mapParams:(e,t)=>({step:t.step,errors:e.errors}),effect:a(({step:e,errors:t})=>{p.eventBus({type:`form_submit_error`,form:{id:l,title:u},exception:{reason:t},experience:h,step:e??void 0}),t.forEach(t=>{p.eventBus({type:`field_validation_error`,exception:{reason:[t]},experience:h,step:e??void 0})}),d?.(t)})});return s({clock:_,source:{step:g},fn:({step:e})=>({formId:l,title:u,step:e}),target:a(({formId:e,title:t,step:n})=>{p.eventBus({type:`form_submit`,form:{id:e,title:t},experience:h,step:n??void 0})})}),s({clock:_,source:{fields:p.fields.listStore,stepFields:m.fields,step:g},fn:({stepFields:e},t)=>(t.preventDefault(),r(e,new FormData(t.currentTarget))),target:v}),c({source:v.doneData,match:{hasErrors:({errors:e})=>e.length>0},cases:{hasErrors:b,__:y}}),{form:{onsubmit:_}}}export{l as getForm};

package/dist/form/index.d.ts

@@ -1,16 +1,2 @@
-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 type { FormField } from '@picked/client/form';
+export { getForm } from './get-form';

package/dist/form/index.js

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

package/dist/hooks/step.d.ts

@@ -1,13 +1,13 @@
 import { Store } from 'effector';
-import { ExperienceStep, Field, Response } from '@picked/client';
-type FieldWithValue = Field & {
-    value: Response | undefined;
-};
-export interface StepContext {
+import { ExperienceStep } from '@picked/client';
+import { FormInstance, FormField } from '../form/create-form.svelte';
+export interface StepContext extends FormInstance {
     step: Store<ExperienceStep>;
-    fields: Store<FieldWithValue[]>;
+    /** Directly accessible fields with current response values — usable without a form */
+    fields: Store<FormField[]>;
+    isActive: Store<boolean>;
+    /** @deprecated Use `isActive` instead */
     isActiveStep: Store<boolean>;
 }
-export declare function getStep(): StepContext;
 export declare function setStepContext(stepId: string): StepContext;
-export {};
+export declare function getStep(): StepContext;

package/dist/hooks/step.js

@@ -1 +1 @@
-import{STEP_CONTEXT_KEY as e}from"../context.js";import{getExperience as t,getPicked as n}from"./client.js";import{getStepRouter as r}from"../router/context.js";import{attach as i,combine as a,createEffect as o,createStore as s,sample as c}from"effector";import{getContext as l,setContext as u}from"svelte";import{getStepFields as d}from"@picked/client";function f(){return l(e)}function p(l){let f=t(),p=n(),{activeStep:m}=r(),h=m.map(e=>e?.id===l),g=f.treeStore.map(e=>{let t=e.steps.find(e=>e.id===l);if(!t)throw Error(`Step with id "${l}" not found in the experience tree.`);return t}),_=s([]),v=a({fields:_,responses:p.responses.listStore},({fields:e,responses:t})=>e.map(e=>{let n=t.find(t=>t.fieldId===e.id)?.value;return{...e,value:n}})),y=i({source:a({step:g,fields:p.fields.listStore}),effect:o(async({step:{fieldIds:e},fields:t})=>await d(p,t.filter(t=>e.includes(t.id))))});return c({source:{isActiveStep:h},filter:({isActiveStep:e})=>e,target:y}),c({clock:p.responses.listStore,source:{isActiveStep:h},filter:({isActiveStep:e})=>e,target:y}),c({source:y.doneData,target:_}),u(e,{step:g,fields:v,isActiveStep:h})}export{f as getStep,p as setStepContext};
+import{STEP_CONTEXT_KEY as e}from"../context.js";import{getExperience 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(e){let n=t().treeStore.map(t=>{let n=t.steps.find(t=>t.id===e);if(!n)throw Error(`Step with id "${e}" not found in the experience tree.`);return n});return{stepStore:n,form:a(e,n.map(e=>e.label),n.map(e=>e.fieldIds))}}function s(t){let{activeStep:r}=n(),a=r.map(e=>e?.id===t),{stepStore:s,form:c}=o(t);return i(e,{step:s,isActive:a,isActiveStep:a,...c})}function c(){return r(e)}export{c as getStep,s as setStepContext};

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

@@ -20,7 +20,7 @@
   <td>{$currentNode?.id || ''}</td>
   <td>{$currentNode?.type || ''}</td>
   <td>{$currentStep?.id || ''}</td>
-  <td>{$currentStep?.title || ''}</td>
+  <td>{$currentStep?.label || ''}</td>
   <td>{totalNextStepNodes}</td>
   <td>{$stepsToOrigin[0]} - {$stepsToOrigin[1]}</td>
   <td>{$stepsToLeaf[0]} - {$stepsToLeaf[1]}</td>

package/dist/plugins/devtools/screens/experiences/ExperienceTreeScreen.svelte

@@ -9,7 +9,7 @@
   let zoom = 1
   let selectedNode = null
   let highlightedPath: string[][] = []
-  let error = null
+  let error: string | null = null
   const loading = false
 
   let treeRenderingDone = false
@@ -19,7 +19,7 @@
   $: steps = $tree.steps
   $: nodes = $tree.nodes
   $: edges = $tree.edges
-  $: conditionals = $tree.conditionals
+  $: conditions = $tree.conditions
 
   let zoomBehavior: d3.ZoomBehavior<SVGSVGElement, unknown>
 
@@ -90,7 +90,7 @@
     d3.select(svgEl).selectAll('*').remove()
 
     const stepsMap = new Map(steps.map((s) => [s.id, s]))
-    const conditionalsMap = new Map(conditionals.map((c) => [c.id, c]))
+    const conditionsMap = new Map(conditions.map((c) => [c.id, c]))
     const outgoingEdges = new Map<string, ExperienceEdge[]>()
     edges.forEach((e) => {
       if (!outgoingEdges.has(e.sourceNodeId)) outgoingEdges.set(e.sourceNodeId, [])
@@ -101,10 +101,10 @@
       if (node.type === 'origin') return 'Start'
       if (node.type === 'step' && node.stepId)
         return stepsMap.get(node.stepId)?.label ?? 'Unknown Step'
-      if (node.type === 'conditional' && node.conditionalId) {
-        const conditional = conditionalsMap.get(node.conditionalId)
-        if (conditional?.label) return conditional.label
-        if (conditional?.condition) return formatLogicRule(conditional.condition)
+      if (node.type === 'condition' && node.conditionId) {
+        const condition = conditionsMap.get(node.conditionId)
+        if (condition?.label) return condition.label
+        if (condition?.condition) return formatLogicRule(condition.condition)
         return 'Condition'
       }
       return 'Unknown Node'
@@ -197,7 +197,7 @@
         .attr('class', 'link')
         .attr('fill', 'none')
         .attr('stroke', (d: any) => {
-          if (d.source.data.type !== 'conditional') return '#94a3b8'
+          if (d.source.data.type !== 'condition') return '#94a3b8'
           const targetId = d.target.data._isReference
             ? d.target.data._referenceTo
             : d.target.data.id
@@ -211,9 +211,9 @@
         .attr('stroke-width', 2)
         .attr('d', linkGenerator)
 
-      // Label true/false branches from conditional nodes
+      // Label true/false branches from condition nodes
       g.selectAll('.edge-label')
-        .data(treeRoot.links().filter((d: any) => d.source.data.type === 'conditional'))
+        .data(treeRoot.links().filter((d: any) => d.source.data.type === 'condition'))
         .enter()
         .append('text')
         .attr('class', 'edge-label')
@@ -259,7 +259,7 @@
         .attr('fill', (d: any) => {
           if (d.data._isReference) return '#38bdf8'
           if (d.data.type === 'origin') return '#00cd90'
-          if (d.data.type === 'conditional') return '#f59e0b'
+          if (d.data.type === 'condition') return '#f59e0b'
           return '#1748ff'
         })
         .attr('stroke', '#fff')

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { ResponseListItem, PrimitiveFieldValue, Field } from '@picked/client'
+  import type { ResponseListItem, PrimitiveFieldValue, Field, FieldValue } from '@picked/client'
   import { getPicked } from '../../../../hooks'
   import { Button, Text, CodeBlock, Banner, Stack } from '../../ui'
 
@@ -11,9 +11,10 @@
   let isEditing = false
   let editValue = ''
   let editError = ''
-  let selectedOptions: Set<PrimitiveFieldValue> = new Set()
+  let selectedOptions: Set<FieldValue> = new Set()
 
-  $: hasOptions = field?.options && field.options.length > 0
+  $: hasOptions = Array.isArray(field?.options) && field.options.length > 0
+  $: staticOptions = Array.isArray(field?.options) ? field.options : null
   $: currentValue = response?.value ?? null
 
   function formatValue(value: unknown): string {
@@ -52,7 +53,7 @@
     selectedOptions = new Set()
   }
 
-  function toggleOption(optionValue: PrimitiveFieldValue) {
+  function toggleOption(optionValue: FieldValue) {
     if (field?.multiple) {
       if (selectedOptions.has(optionValue)) {
         selectedOptions.delete(optionValue)
@@ -65,7 +66,7 @@
     }
   }
 
-  function parseValue(input: string): unknown {
+  function parseValue(input: string): FieldValue {
     input = input.trim()
 
     if (input === '' || input === '-') {
@@ -99,14 +100,14 @@
 
   async function saveEdit() {
     try {
-      let newValue: unknown
+      let newValue: FieldValue
 
       if (hasOptions) {
         const values = Array.from(selectedOptions)
         if (field?.multiple) {
           newValue = values
         } else {
-          newValue = values[0] ?? null
+          newValue = values.at(0) ?? null
         }
       } else {
         newValue = parseValue(editValue)
@@ -142,9 +143,9 @@
   <td>
     {#if isEditing}
       <Stack direction="vertical" gap="small">
-        {#if hasOptions && field?.options}
+        {#if hasOptions && staticOptions}
           <Stack direction="vertical" gap="small">
-            {#each field.options as option (option.id)}
+            {#each staticOptions as option (option.id)}
               <label class="option-label">
                 {#if field.multiple}
                   <input

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@picked/svelte",
-  "version": "0.0.50-next.4",
+  "version": "0.0.51-next.1",
   "dependencies": {
     "d3": "^7.9.0"
   },
@@ -18,7 +18,7 @@
     "@vitest/coverage-v8": "^4.1.0",
     "effector": "^23.3.0",
     "fast-glob": "^3.3.3",
-    "happy-dom": "^20.0.2",
+    "happy-dom": "^20.8.8",
     "size-limit": "^12.0.0",
     "svelte": "^5.46.4",
     "svelte-check": "^4.2.2",
@@ -88,7 +88,7 @@
   },
   "module": "./dist/index.js",
   "peerDependencies": {
-    "@picked/client": "0.0.50-next.4",
+    "@picked/client": "0.0.51-next.1",
     "effector": "^23.3.0",
     "svelte": "^5.46.4"
   },
@@ -108,7 +108,7 @@
     "svelte-check": "svelte-check --tsconfig ./tsconfig.json",
     "svelte-check:report": "mkdir -p ./.reports && pnpm svelte-check --tsconfig ./tsconfig.json --output=machine > ./.reports/svelte-check.txt || [ -f './.reports/svelte-check.txt' ]",
     "test": "vitest run",
-    "test:coverage": "vitest run --coverage",
+    "test:coverage": "../../scripts/vitest-coverage.sh",
     "test:packaged-types": "attw --pack",
     "test:watch": "vitest",
     "type-check": "tsgo -p . --noEmit"