@picked/svelte 0.0.1-dev.1771981674305 → 0.0.1-dev.1772064704206

package/dist/component.d.ts

@@ -1,9 +1,9 @@
-import { AdaptedComponent, AdaptedComponentStyle, LazyComponentLoader } from '@picked/client';
+import { AdaptedComponent, AdaptedComponentStyle } from '@picked/client';
 import { Component } from 'svelte';
 export type ComponentWithProps = Component<any>;
 export declare const adaptSvelteComponent: (component: ComponentWithProps | Promise<{
     default: ComponentWithProps;
-}> | LazyComponentLoader<ComponentWithProps>, style?: AdaptedComponentStyle) => AdaptedComponent<"svelte", ComponentWithProps | Promise<{
+}>, style?: AdaptedComponentStyle) => AdaptedComponent<"svelte", ComponentWithProps | Promise<{
     default: ComponentWithProps;
-}> | LazyComponentLoader<ComponentWithProps>>;
+}>>;
 export declare const isValidAdaptedComponent: (component: AdaptedComponent<string, unknown>) => component is AdaptedComponent<"svelte", ComponentWithProps>;

package/dist/form/build-responses.d.ts

@@ -0,0 +1,13 @@
+import { FieldBase, FieldValue } from '@picked/client';
+type FieldLike = Pick<FieldBase, 'id' | 'type' | 'multiple'>;
+/**
+ * Parses a FormData snapshot into a typed record of field responses.
+ *
+ * - Fields absent from FormData are mapped to `null`.
+ * - Empty string values are mapped to `null`.
+ * - Repeated entries for the same field (e.g. multi-select checkboxes) are
+ *   merged into a typed array — matching the field's declared element type.
+ * - Values are coerced to the field's declared type (text → string, number → number, boolean → boolean).
+ */
+export declare function buildResponsesFromFormData(fields: FieldLike[], formData: FormData): Record<string, FieldValue>;
+export {};

package/dist/form/build-responses.js

@@ -0,0 +1 @@
+function i(e,o,n){const r=e[o];if(r===void 0){e[o]=n;return}if(Array.isArray(r)&&Array.isArray(n)&&n.length>0){typeof r[0]=="string"?e[o]=[...r,...n].map(String):typeof r[0]=="number"?e[o]=[...r,...n].map(Number):typeof r[0]=="boolean"?e[o]=[...r,...n].map(t=>!!t):e[o]=n;return}e[o]=n}function b(e,o){const n=Array.from(o.entries()),r={};return e.forEach(t=>{let m=n.filter(([s])=>s===t.id);m.length===0&&(m=[[t.id,""]]),m.forEach(([,s])=>{if(s===""){i(r,t.id,null);return}switch(t.type){case"text":case"object":i(r,t.id,t.multiple?[String(s)]:String(s));break;case"number":i(r,t.id,t.multiple?[Number(s)]:Number(s));break;case"boolean":i(r,t.id,t.multiple?[s==="true"]:s==="true");break}})}),r}export{b as buildResponsesFromFormData};

package/dist/form/create-field-evaluator.d.ts

@@ -0,0 +1,17 @@
+import { FieldValue, FieldWithStatus, Picked } from '@picked/client';
+import { Store, StoreWritable } from 'effector';
+/**
+ * Creates a reactive store of evaluated fields for a given set of field IDs.
+ *
+ * Fields are re-evaluated whenever:
+ * - The available field IDs change (e.g. a step is entered)
+ * - Any response is committed (options may depend on prior answers)
+ * - The global field registry changes (fields registered after init)
+ * - Staged values change (field visibility conditions may reference responses.*)
+ *
+ * Evaluation runs `getStepFields` with effective responses (committed + staged) as context,
+ * so visibility conditions see live in-session values rather than only committed responses.
+ */
+export declare function createFieldEvaluator(client: Picked, fieldIds: Store<string[]>, stagedValuesStore: StoreWritable<Record<string, FieldValue>>): {
+    fieldsStore: Store<FieldWithStatus[]>;
+};

package/dist/form/create-field-evaluator.js

@@ -0,0 +1 @@
+import{getStepFields as m}from"@picked/client";import{createStore as u,attach as F,createEffect as S,sample as i}from"effector";function k(e,r,s){const o=u([]),t=F({source:{allFields:e.fields.listStore,fieldIds:r,staged:s,committed:e.responses.getAllStore},effect:S(async({allFields:l,fieldIds:a,staged:c,committed:d})=>{const f=l.filter(p=>a.includes(p.id)),n={...d,...c};return await m(e,f,{responses:n})})});return i({clock:t.doneData,target:o}),t(),i({clock:[e.responses.listStore,r,e.fields.listStore,s],target:t}),{fieldsStore:o}}export{k as createFieldEvaluator};

package/dist/form/create-field-validation.d.ts

@@ -0,0 +1,41 @@
+import { FieldValue, FieldWithStatus, Picked, ValidationError } from '@picked/client';
+import { EventCallable, Store, StoreWritable } from 'effector';
+export interface FieldValidation {
+    /** Dispatch when a field value changes — runs validation if the field has been touched. */
+    fieldChangeEvent: EventCallable<{
+        fieldId: string;
+        value: FieldValue;
+    }>;
+    /** Dispatch when a field loses focus — always runs full validation including required check. */
+    fieldBlurEvent: EventCallable<{
+        fieldId: string;
+        value: FieldValue;
+    }>;
+    /** Which fields have been interacted with — used by formFieldsStore to show/hide errors. */
+    touchedStore: StoreWritable<Partial<Record<string, boolean>>>;
+    /**
+     * Per-field validation errors — written by client-side validation and overwritten
+     * by server errors on commit failure. Exposed as writable so the submit pipeline
+     * can populate server errors and reset state on new submit attempts.
+     */
+    fieldErrorsStore: StoreWritable<Partial<Record<string, ValidationError>>>;
+    /** Flat list of all current validation errors — derived from fieldErrorsStore. */
+    formErrorsStore: Store<ValidationError[]>;
+    /**
+     * Current in-session field values — updated on every onChange/onBlur before commit.
+     * Used as the responses context for condition evaluation so conditions react to
+     * live input without writing to client.responses prematurely.
+     */
+    stagedValuesStore: StoreWritable<Record<string, FieldValue>>;
+}
+/**
+ * Creates the client-side validation slice for a form.
+ *
+ * Responsibilities:
+ * - Tracks which fields have been touched (first blur = touched)
+ * - Validates on blur (full: includes required check) and on change (if already touched)
+ * - Uses the same json-logic evaluator the server uses, so client and server results match
+ * - Maintains stagedValuesStore: current in-session values used as responses context for
+ *   condition evaluation, avoiding premature writes to client.responses
+ */
+export declare function createFieldValidation(client: Picked, fieldsStore: Store<FieldWithStatus[]>, stagedValuesStore: StoreWritable<Record<string, FieldValue>>): FieldValidation;

package/dist/form/create-field-validation.js

@@ -0,0 +1 @@
+import{evaluateRuleLogic as M}from"@picked/client";import{createEvent as h,createStore as y,sample as p,attach as q}from"effector";function F(s){return s===null||s===""||Array.isArray(s)&&s.length===0}function R(s,k,c){const f=h(),a=h(),u=y({});p({clock:a,source:u,fn:(r,{fieldId:e})=>({...r,[e]:!0}),target:u});const g=y({}),v=g.map(r=>Object.values(r).filter(e=>e!==void 0)),m=q({source:{fields:k,staged:c,committed:s.responses.getAllStore},effect:async({fields:r,staged:e,committed:n},{fieldId:t,value:i,checkRequired:E})=>{const o=r.find(d=>d.id===t);if(!o)return{fieldId:t,error:null};if(o.validation&&Object.keys(o.validation).length>0){const d={...n,...e},l=await M(s,o.validation,{responses:d,$input:i});if(typeof l=="string")return{fieldId:t,error:{fieldId:t,userMessage:l,systemMessage:l,value:i}};if(l===!1)return{fieldId:t,error:{fieldId:t,userMessage:"This field is invalid",systemMessage:"Field validation rule returned false.",value:i}}}return E&&o.required&&F(i)?{fieldId:t,error:{fieldId:t,userMessage:"This field is required",systemMessage:"Field is required.",value:i}}:{fieldId:t,error:null}}});return p({clock:f,source:u,filter:(r,{fieldId:e})=>r[e]===!0,fn:(r,{fieldId:e,value:n})=>({fieldId:e,value:n,checkRequired:!1}),target:m}),p({clock:a,fn:({fieldId:r,value:e})=>({fieldId:r,value:e,checkRequired:!0}),target:m}),c.on(f,(r,{fieldId:e,value:n})=>({...r,[e]:n})),c.on(a,(r,{fieldId:e,value:n})=>({...r,[e]:n})),g.on(m.doneData,(r,{fieldId:e,error:n})=>{if(n===null){const t={...r};return delete t[e],t}return{...r,[e]:n}}),{fieldChangeEvent:f,fieldBlurEvent:a,touchedStore:u,fieldErrorsStore:g,formErrorsStore:v,stagedValuesStore:c}}export{R as createFieldValidation};

package/dist/form/create-form.js

@@ -0,0 +1 @@
+import"svelte/internal/client";import{createStore as C,combine as P,attach as j,sample as u}from"effector";import{getPicked as N,getExperience as R}from"../hooks/client.js";import{createFieldEvaluator as W}from"./create-field-evaluator.js";import{createFieldValidation as q}from"./create-field-validation.js";import{createSubmitPipeline as w}from"./create-submit-pipeline.svelte";function x(m){const t=m.currentTarget;if(t instanceof HTMLInputElement)return t.type==="checkbox"?t.checked:t.value;if(t instanceof HTMLSelectElement||t instanceof HTMLTextAreaElement)return t.value}function X(m,t,k){const r=N(),g=R(),{currentStepStore:F,goToNextStep:I}=g,d=C({}),{fieldsStore:a}=W(r,k,d),{fieldChangeEvent:E,fieldBlurEvent:T,touchedStore:b,fieldErrorsStore:p,formErrorsStore:A}=q(r,a,d),y=P({fields:a,responses:r.responses.listStore,staged:d,fieldErrors:p,touched:b},({fields:s,responses:o,staged:i,fieldErrors:S,touched:f})=>s.map(e=>({...e,value:i[e.id]??o.find(n=>n.fieldId===e.id)?.value,error:S[e.id],touched:f[e.id]??!1,onChange:n=>{const c=x(n);c!==void 0&&E({fieldId:e.id,value:c})},onBlur:n=>{const c=x(n);c!==void 0&&T({fieldId:e.id,value:c})}}))),D=j({source:{staged:d,committed:r.responses.getAllStore,allFields:r.fields.listStore},effect:({staged:s,committed:o,allFields:i},S)=>{const f={...o,...s};for(const e of S){const n=i.find(v=>v.id===e);if(!n)continue;(n.dependsOn??[]).every(v=>{const l=f[v];return l!=null&&l!==""&&!(Array.isArray(l)&&l.length===0)})?r.fields.resolveAll([e],{force:!0,context:{responses:f}}):r.fields.setWaiting(e)}}});u({clock:E,source:{fields:a},fn:({fields:s},{fieldId:o})=>s.filter(i=>i.dependsOn?.includes(o)).map(i=>i.id),target:D});const{submitEvent:H,isFormSubmitting:L,onSubmit:M,onSuccess:O,onError:V,submitStarted:h,serverErrorsReceived:B}=w({client:r,experienceInstance:g,formId:m,title:t,stepStore:F,fieldsStore:a,goToNextStep:I});return u({clock:h,fn:()=>({}),target:b}),u({clock:h,fn:()=>({}),target:p}),u({clock:B,fn:s=>Object.fromEntries(s.map(o=>[o.fieldId,o])),target:p}),{form:{onsubmit:H,errors:A,submitting:L,onSubmit:M,onSuccess:O,onError:V},fields:y}}export{X as createForm};

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

@@ -0,0 +1,41 @@
+import { FieldValue, FieldWithStatus, ValidationError } from '@picked/client';
+import { EventCallable, Store } from 'effector';
+import { ErrorCallback, SubmitCallback, SubmitEventWithCurrentTarget, SuccessCallback } from './create-submit-pipeline.svelte';
+export type FormField = Omit<FieldWithStatus, 'error'> & {
+    value: FieldValue | undefined;
+    /** Validation error for this field, or undefined if valid. */
+    error: ValidationError | undefined;
+    touched: boolean;
+    onChange: (e: Event) => void;
+    onBlur: (e: Event) => void;
+};
+/**
+ * Return type for createForm()
+ * Provides form handlers, reactive stores, and callback registration
+ */
+export interface FormInstance<TFieldIds extends string = string> {
+    /** Form element props (bind to <form>) */
+    form: {
+        onsubmit: EventCallable<SubmitEventWithCurrentTarget>;
+        /** Flat list of all current validation errors — derived from fieldErrors */
+        errors: Store<ValidationError[]>;
+        /** Reactive store indicating if form is currently submitting */
+        submitting: Store<boolean>;
+        /** Register callbacks to transform/validate data before submission */
+        onSubmit: (callback: SubmitCallback<TFieldIds>) => void;
+        /** Register callbacks to run on successful form submission */
+        onSuccess: (callback: SuccessCallback<TFieldIds>) => void;
+        /** Register callbacks to run on form validation errors */
+        onError: (callback: ErrorCallback) => void;
+    };
+    /** Reactive store of fields with current values, errors, touched state, and event handlers */
+    fields: Store<FormField[]>;
+}
+/**
+ * Creates a form instance tied to a set of field IDs.
+ * Handles field evaluation, form submission, data transformation,
+ * validation, event bus tracking, and step navigation.
+ *
+ * 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/create-submit-pipeline.js

@@ -0,0 +1 @@
+import*as C from"svelte/internal/client";import{createEvent as i,createStore as B,createEffect as l,attach as O,sample as s,split as R}from"effector";import{buildResponsesFromFormData as T}from"./build-responses.js";function k(c){let o=[];return{executeFx:l(async(...a)=>await c(o,...a)),register:a=>{const f=()=>{o=o.filter(p=>p!==a)};C.user_effect(()=>(o.push(a),f))}}}function q({client:c,experienceInstance:o,formId:u,title:m,stepStore:a,fieldsStore:f,goToNextStep:p}){const n=i(),y=i(),v=i(),_=i(),x=i(),d=B(!1),D=B(!1);D.on(_,()=>!0).on(n,()=>!1);const N=n.map(()=>{}),g=k(async(e,t)=>{await Promise.all(e.map(r=>Promise.resolve(r(t))))}),b=k(async(e,t)=>{await Promise.all(e.map(r=>Promise.resolve(r(t))))}),F=k(async(e,t)=>{let r=t;for(const E of e){const w=await Promise.resolve(E(r));w!==void 0&&(r=w)}return r}),P=l(async e=>{const t=await c.responses.commit(e);return{data:e,errors:t.errors}}),h=O({source:{step:a,title:m},mapParams:(e,t)=>({step:t.step,title:t.title,data:e.data}),effect:l(async({step:e,title:t,data:r})=>(c.eventBus({type:"form_submit_success",form:{id:u,title:t},experience:o,step:e??void 0}),r))}),S=O({source:{step:a,title:m},mapParams:(e,t)=>({step:t.step,title:t.title,errors:e.errors}),effect:l(async({step:e,title:t,errors:r})=>(c.eventBus({type:"form_submit_error",form:{id:u,title:t},exception:{reason:r},experience:o,step:e??void 0}),r.forEach(E=>{c.eventBus({type:"field_validation_error",exception:{reason:[E]},experience:o,step:e??void 0})}),r))});return s({clock:n,fn:()=>!0,target:d}),s({clock:n,source:{step:a,title:m},fn:({step:e,title:t})=>({formId:u,title:t,step:e}),target:l(({formId:e,title:t,step:r})=>{c.eventBus({type:"form_submit",form:{id:e,title:t},experience:o,step:r??void 0})})}),s({clock:n,source:{stepFields:f},fn:({stepFields:e},t)=>(t.preventDefault(),T(e,new FormData(t.currentTarget))),target:F.executeFx}),s({clock:F.executeFx.doneData,target:P}),R({source:P.doneData,match:{hasErrors:({errors:e})=>e.length>0},cases:{hasErrors:S,__:h}}),s({clock:h.doneData,target:y}),s({clock:y,fn:e=>({data:e,stopNavigation:_}),target:g.executeFx}),s({clock:g.executeFx.done,target:x}),s({clock:x,source:D,filter:e=>!e,target:p}),s({clock:S.doneData,target:v}),s({clock:v,target:b.executeFx}),s({clock:[x,b.executeFx.done],fn:()=>!1,target:d}),{submitEvent:n,isFormSubmitting:d,onSubmit:F.register,onSuccess:g.register,onError:b.register,submitStarted:N,serverErrorsReceived:v}}export{q as createSubmitPipeline};

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

@@ -0,0 +1,53 @@
+import { ExperienceInstance, ExperienceStep, FieldValue, FieldWithStatus, Picked, ValidationError } from '@picked/client';
+import { Event, EventCallable, Store } from 'effector';
+export type SubmitEventWithCurrentTarget = SubmitEvent & {
+    currentTarget: EventTarget & HTMLFormElement;
+};
+export type SuccessCallback<TFieldIds extends string = string> = (options: {
+    data: Record<TFieldIds, FieldValue>;
+    stopNavigation: EventCallable<void>;
+}) => void | Promise<void>;
+export type ErrorCallback = (errors: ValidationError[]) => void | Promise<void>;
+export type SubmitCallback<TFieldIds extends string = string> = (data: Record<TFieldIds, FieldValue>) => Record<TFieldIds, FieldValue> | void | Promise<Record<TFieldIds, FieldValue> | void>;
+export interface SubmitPipelineConfig {
+    client: Picked;
+    experienceInstance: ExperienceInstance;
+    formId: string;
+    title: Store<string>;
+    stepStore: Store<ExperienceStep | null>;
+    fieldsStore: Store<FieldWithStatus[]>;
+    goToNextStep: EventCallable<void>;
+}
+export interface SubmitPipeline {
+    submitEvent: EventCallable<SubmitEventWithCurrentTarget>;
+    isFormSubmitting: Store<boolean>;
+    onSubmit: (callback: SubmitCallback) => void;
+    onSuccess: (callback: SuccessCallback) => void;
+    onError: (callback: ErrorCallback) => void;
+    /**
+     * Fired when a submit attempt starts — callers use this to clear validation state.
+     * Separating this from `submitEvent` keeps the pipeline decoupled from the
+     * validation module's internal stores.
+     */
+    submitStarted: Event<void>;
+    /**
+     * Fired when the server returns validation errors — callers write these to
+     * `fieldErrorsStore` in the validation module.
+     */
+    serverErrorsReceived: Event<ValidationError[]>;
+}
+/**
+ * Creates the submit pipeline for a form instance.
+ *
+ * Manages the full lifecycle of a form submission:
+ * - Emitting event bus calls (form_submit, form_submit_success, form_submit_error)
+ * - Running onSubmit data-transform callbacks in series
+ * - Committing responses to the server
+ * - Running onSuccess/onError callbacks in parallel
+ * - Navigating to the next step (unless stopNavigation is called)
+ *
+ * Returns coordination events (`submitStarted`, `serverErrorsReceived`) that the
+ * caller wires to the validation module to keep validation state in sync without
+ * the pipeline needing direct access to validation stores.
+ */
+export declare function createSubmitPipeline({ client, experienceInstance, formId, title, stepStore, fieldsStore, goToNextStep, }: SubmitPipelineConfig): SubmitPipeline;

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

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

package/dist/form/index.js

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

package/dist/hooks/field.d.ts

@@ -4,4 +4,9 @@ export interface GetFieldResponse {
     value: Store<FieldValue>;
     field: Store<Field | null>;
 }
+/**
+ * @deprecated Field options and status are now available directly on the Field object
+ * from the step fields store. Use `field.options`, `field.status`, and `field.error`
+ * instead of accessing them through this hook.
+ */
 export declare function getField(id: string): GetFieldResponse;

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{getContext as v,setContext as x}from"svelte";import{createStore as E,combine as a,attach as h,createEffect as w,sample as c}from"effector";import{getStepFields as A}from"@picked/client";import{STEP_CONTEXT_KEY as l}from"../context.js";import{getStepRouter as C}from"../router/context.js";import{getExperience as F,getPicked as T}from"./client.js";function K(){return v(l)}function N(i){const u=F(),o=T(),{activeStep:S}=C(),s=S.map(e=>e?.id===i),p=u.treeStore.map(e=>{const t=e.steps.find(r=>r.id===i);if(!t)throw new Error(`Step with id "${i}" not found in the experience tree.`);return t}),f=E([]),d=a({fields:f,responses:o.responses.listStore},({fields:e,responses:t})=>e.map(r=>{const m=t.find(g=>g.fieldId===r.id)?.value;return{...r,value:m}})),n=h({source:a({step:p,fields:o.fields.listStore}),effect:w(async({step:{fieldIds:e},fields:t})=>await A(o,t.filter(r=>e.includes(r.id))))});return c({source:{isActiveStep:s},filter:({isActiveStep:e})=>e,target:n}),c({clock:o.responses.listStore,source:{isActiveStep:s},filter:({isActiveStep:e})=>e,target:n}),c({source:n.doneData,target:f}),x(l,{step:p,fields:d,isActiveStep:s})}export{K as getStep,N as setStepContext};
+import{getContext as x,onMount as h,setContext as A}from"svelte";import{createEffect as S,createEvent as E,sample as p}from"effector";import{STEP_CONTEXT_KEY as g}from"../context.js";import{createForm as O}from"../form/create-form.svelte";import{getStepRouter as k}from"../router/context.js";import{getPicked as C,getExperience as I}from"./client.js";function _(c){const s=I().treeStore.map(i=>{const d=i.steps.find(f=>f.id===c);if(!d)throw new Error(`Step with id "${c}" not found in the experience tree.`);return d}),l=s.map(i=>i.label),u=s.map(i=>i.fieldIds),n=O(c,l,u);return{stepStore:s,form:n}}function P(c){const{activeStep:a}=k(),s=a.map(e=>e?.id===c),{stepStore:l,form:u}=_(c),n=C(),i=S(e=>{n.fields.resolveAll(e)});function d(e){if(!e.dependsOn?.length)return!0;const r=n.responses.getAllStore.getState();return e.dependsOn.every(o=>{const t=r[o];return t!=null&&t!==""&&!(Array.isArray(t)&&t.length===0)})}const f=E();p({clock:f,source:{step:l,fields:n.fields.listStore},fn:({step:e,fields:r})=>e.fieldIds.filter(o=>!r.find(t=>t.id===o)?.dependsOn?.length),target:i});const m=S(({step:e,fields:r})=>{for(const o of e.fieldIds){const t=r.find(v=>v.id===o);t?.dependsOn?.length&&(d(t)?n.fields.resolveAll([o],{force:!0}):n.fields.setWaiting(o))}});return p({clock:f,source:{step:l,fields:n.fields.listStore},target:m}),h(()=>{f()}),p({clock:s,source:{step:l,fields:n.fields.listStore},filter:(e,r)=>r,fn:({step:e,fields:r})=>e.fieldIds.filter(o=>!r.find(t=>t.id===o)?.dependsOn?.length),target:i}),p({clock:s,source:{step:l,fields:n.fields.listStore},filter:(e,r)=>r,target:m}),A(g,{step:l,isActive:s,isActiveStep:s,...u})}function K(){return x(g)}export{K as getStep,P as setStepContext};

package/dist/plugins/devtools/DevToolsExperience.svelte

@@ -6,8 +6,9 @@
   the change in the paired React component to maintain visual and behavioral parity.
 -->
 <script lang="ts">
-  import { getExperience, getPicked } from '../../hooks'
-  import { Button, Heading, Stack } from './ui'
+  import { getExperience } from '../../hooks'
+  import { Button } from './ui'
+  import PickedLogo from './PickedLogo.svelte'
   import Tabs from './components/Tabs.svelte'
   import ExperiencesListScreen from './screens/experiences/ExperiencesListScreen.svelte'
   import ExperienceInstancesListScreen from './screens/experience-instances/ExperienceInstancesListScreen.svelte'
@@ -19,12 +20,8 @@
   import ResponsesListScreen from './screens/responses/ResponsesListScreen.svelte'
   import FeaturesListScreen from './screens/features/FeaturesListScreen.svelte'
   import EventsListScreen from './screens/events/EventsListScreen.svelte'
-  import PickedIcon from './PickedIcon.svelte'
 
   const experience = getExperience()
-  const client = getPicked()
-
-  const dashboardProjectUrl = `${client.dashboardUrl}/p/${client.projectId}`
 
   const tabs = [
     {
@@ -104,15 +101,10 @@
     <div class="container">
       <header class="toolbar" id="devtools-header">
         <div class="toolbar-left">
-          <Stack direction="horizontal" gap="small" >
-            <PickedIcon height={25} width={25}/>
-            <Heading size="small">Developer Tools</Heading>
-          </Stack>
+          <PickedLogo width={80} height={28} />
         </div>
         <div class="toolbar-center"></div>
         <div class="toolbar-right">
-          <Button variant="ghost" size="small" href={client.documentationSiteUrl} target="_blank">Docs</Button>
-          <Button variant="ghost" size="small" href={dashboardProjectUrl} target="_blank">Dashboard</Button>
           <Button variant="ghost" size="small" onclick={() => experience.close()}>Close</Button>
         </div>
       </header>
@@ -126,9 +118,9 @@
     class="floating-button"
     onclick={() => experience.open()}
     aria-label="Open Picked Devtools"
-    title="Open Picked Devtools"
+    title="Open Picked Devtools (or press .)"
   >
-    <PickedIcon height={25} width={25}/>
+    <PickedLogo />
   </button>
 {/if}
 
@@ -139,80 +131,6 @@
   }
 
   .devtools {
-    /* Colors — match Tailwind's default palette exactly */
-    --color-blue-500: #3b82f6;
-    --color-blue-600: #2563eb;
-    --color-blue-700: #1d4ed8;
-    --color-blue-800: #1e40af;
-    --color-gray-50: #f9fafb;
-    --color-gray-100: #f3f4f6;
-    --color-gray-200: #e5e7eb;
-    --color-gray-300: #d1d5db;
-    --color-gray-500: #6b7280;
-    --color-gray-600: #4b5563;
-    --color-gray-700: #374151;
-    --color-gray-900: #111827;
-    --color-red-500: #ef4444;
-    --color-red-600: #dc2626;
-    --color-red-700: #b91c1c;
-    --color-red-800: #991b1b;
-    --color-green-100: #dcfce7;
-    --color-green-700: #15803d;
-    --color-green-800: #166534;
-    --color-yellow-100: #fef9c3;
-    --color-yellow-700: #a16207;
-    --color-yellow-800: #854d0e;
-    --color-white: #ffffff;
-    --color-black: #000000;
-
-    /* Typography — match Tailwind's type scale */
-    --text-xs: 0.75rem;
-    --text-sm: 0.875rem;
-    --text-base: 1rem;
-    --text-lg: 1.125rem;
-    --text-xl: 1.25rem;
-    --text-2xl: 1.5rem;
-    --font-normal: 400;
-    --font-medium: 500;
-    --font-semibold: 600;
-
-    /* Spacing — match Tailwind's spacing scale */
-    --space-0: 0;
-    --space-0-5: 0.125rem;
-    --space-1: 0.25rem;
-    --space-1-5: 0.375rem;
-    --space-2: 0.5rem;
-    --space-2-5: 0.625rem;
-    --space-3: 0.75rem;
-    --space-4: 1rem;
-    --space-5: 1.25rem;
-    --space-6: 1.5rem;
-    --space-8: 2rem;
-
-    /* Radii */
-    --radius-sm: 0.125rem;
-    --radius-md: 0.375rem;
-    --radius-lg: 0.5rem;
-    --radius-xl: 0.75rem;
-    --radius-full: 9999px;
-
-    /* Shadows */
-    --shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
-    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
-    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
-
-    /* Focus ring — matches dashboard's ring-2 ring-blue-500 ring-offset-2 */
-    --ring-color: var(--color-blue-500);
-    --ring-width: 2px;
-    --ring-offset: 2px;
-
-    /* Base typography reset */
-    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-      'Helvetica Neue', Arial, sans-serif;
-    font-size: var(--text-sm);
-    line-height: 1.5;
-    color: var(--color-gray-900);
-
     position: fixed;
     inset: 0;
     z-index: 999999999;
@@ -266,7 +184,6 @@
   .toolbar-right {
     display: flex;
     align-items: center;
-    gap: var(--space-1);
   }
 
   .main {
@@ -297,101 +214,36 @@
     background-color: var(--color-gray-50);
   }
 
-  .devtools :global(th:first-child),
-  .devtools :global(td:first-child) {
-    padding-left: var(--space-4);
-  }
-
-  .devtools :global(th:last-child),
-  .devtools :global(td:last-child) {
-    padding-right: var(--space-4);
-  }
-
   .floating-button {
     position: fixed;
-    bottom: 1rem;
+    bottom: 1.5rem;
     right: 1.5rem;
-    border-radius: 6px;
+    width: 4.5rem;
+    height: 4.5rem;
+    border-radius: var(--radius-full);
     background-color: var(--color-white);
-    display: grid;
-    place-items: center;
+    border: 1px solid var(--color-gray-200);
+    box-shadow: 0 4px 12px rgba(21, 73, 255, 0.2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
     cursor: pointer;
     z-index: 999999;
-    border: 0 transparent;
-    padding: 6px;
-    box-shadow: 2px 2px 4px #00000029;
-
-    &:hover {
-      background-color: #f5f5f5;
-    }
+    transition: all 0.2s ease;
+    padding: 0;
   }
 
-  /** Compact inline form elements for use within table cells */
-  .devtools :global(.inline-select),
-  .devtools :global(.inline-input) {
-    font-size: var(--text-xs);
-    padding: var(--space-0-5) var(--space-1);
-    border: 1px solid var(--color-gray-300);
-    border-radius: var(--radius-sm);
-    font-family: inherit;
+  .floating-button:hover {
+    box-shadow: 0 6px 16px rgba(21, 73, 255, 0.3);
+    transform: scale(1.05);
   }
 
-  .devtools :global(.inline-input) {
-    width: 100%;
+  .floating-button:active {
+    transform: scale(0.95);
   }
 
-  .devtools :global(.inline-select:focus),
-  .devtools :global(.inline-input:focus) {
-    outline: none;
-    box-shadow: 0 0 0 var(--ring-width) var(--ring-color);
-  }
-
-  /** Textarea elements within devtools */
-  .devtools :global(textarea) {
-    width: 100%;
-    min-height: 60px;
-    font-family: monospace;
-    font-size: var(--text-xs);
-    padding: var(--space-1);
-    border: 1px solid var(--color-gray-300);
-    border-radius: var(--radius-md);
-  }
-
-  .devtools :global(textarea:focus) {
-    outline: none;
-    box-shadow: 0 0 0 var(--ring-width) var(--ring-color);
-  }
-
-  /** Event detail panel styling */
-  .devtools :global(.details-cell) {
-    background-color: var(--color-gray-50);
-    padding: var(--space-4);
-    border-left: 3px solid var(--color-blue-500);
-  }
-
-  /** Expand/collapse icon for table rows */
-  .devtools :global(.expand-icon) {
-    margin-right: var(--space-2);
-    display: inline-block;
-    width: 12px;
-  }
-
-  /** Clickable table rows (e.g., expandable event rows) */
-  .devtools :global(.event-row) {
-    cursor: pointer;
-  }
-
-  /** Centered checkbox cell in tables */
-  .devtools :global(.include-cell) {
-    text-align: center;
-    width: 2.5rem;
-  }
-
-  /** Inline option label for checkbox/radio lists in table cells */
-  .devtools :global(.option-label) {
-    display: flex;
-    align-items: center;
-    gap: var(--space-2);
-    cursor: pointer;
+  .floating-button :global(svg) {
+    width: 2.25rem;
+    height: 2.25rem;
   }
 </style>

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/components/ExperienceInstancesTable.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { ExperienceInstance } from '@picked/client'
   import ExperienceInstanceListItem from './ExperienceInstanceListItem.svelte'
-  import { Card, DataTable, EmptyState, Stack } from '../ui'
+  import { DataTable, EmptyState } from '../ui'
 
   export let experienceInstances: ExperienceInstance[]
 
@@ -18,16 +18,12 @@
   ]
 </script>
 
-<Stack padding="medium">
-  <Card sectioned>
-    <DataTable columns={columns} rows={experienceInstances}>
-      {#snippet row(item)}
-        {@const experienceInstance = item}
-        <ExperienceInstanceListItem {experienceInstance} />
-      {/snippet}
-      {#snippet empty()}
-        <EmptyState message="No experience instances" />
-      {/snippet}
-    </DataTable>
-  </Card>
-</Stack>
+<DataTable columns={columns} rows={experienceInstances}>
+  {#snippet row(item)}
+    {@const experienceInstance = item}
+    <ExperienceInstanceListItem {experienceInstance} />
+  {/snippet}
+  {#snippet empty()}
+    <EmptyState message="No experience instances" />
+  {/snippet}
+</DataTable>

package/dist/plugins/devtools/experience.d.ts

@@ -0,0 +1 @@
+export declare const devtoolsExperience: import('@picked/client/plugins/create-experience').SerializableExperience;

package/dist/plugins/devtools/experience.js

@@ -0,0 +1 @@
+import{createExperience as e}from"@picked/client/plugins/create-experience";import{adaptSvelteComponent as o}from"../../component.js";import t from"./DevToolsExperience.svelte";import p from"./ui/tokens.css.js";const r=e({id:"svelte-devtools",name:"Picked Devtools",decide:{},targets:[{selector:"body",placement:"append"}],component:o(t,{css:[p]})});r.addStep({label:"Tools"});export{r as devtoolsExperience};