@picked/svelte 0.0.1-dev.1771973228237 → 0.0.1-dev.1772057362040

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';
+type SubmitEventWithCurrentTarget = SubmitEvent & {
+    currentTarget: EventTarget & HTMLFormElement;
+};
+interface GetFormOptions {
+    id: string;
+    title: string;
+    onSuccess?: () => void | Promise<void>;
+    onError?: (errors: ValidationError[]) => void | Promise<void>;
+}
+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 g,createEffect as s,attach as u,sample as f,split as E}from"effector";import{getPicked as F,getExperience as b}from"../hooks/client.js";import"@picked/client";import{getStep as h}from"../hooks/step.js";import"svelte";import"svelte/store";import"@picked/analytics";import{buildResponsesFromFormData as S}from"./build-responses.js";function j({id:c,title:n,onError:d,onSuccess:l}){const r=F(),x=h(),o=b(),{currentStepStore:i}=o,p=g(),a=s(e=>r.responses.commit(e)),v=u({source:{step:i},effect:s(({step:e})=>{r.eventBus({type:"form_submit_success",form:{id:c,title:n},experience:o,step:e??void 0}),l?.()})}),_=u({source:{step:i},mapParams:(e,t)=>({step:t.step,errors:e.errors}),effect:s(({step:e,errors:t})=>{r.eventBus({type:"form_submit_error",form:{id:c,title:n},exception:{reason:t},experience:o,step:e??void 0}),t.forEach(m=>{r.eventBus({type:"field_validation_error",exception:{reason:[m]},experience:o,step:e??void 0})}),d?.(t)})});return f({clock:p,source:{step:i},fn:({step:e})=>({formId:c,title:n,step:e}),target:s(({formId:e,title:t,step:m})=>{r.eventBus({type:"form_submit",form:{id:e,title:t},experience:o,step:m??void 0})})}),f({clock:p,source:{stepFields:x.fields},fn:({stepFields:e},t)=>(t.preventDefault(),S(e,new FormData(t.currentTarget))),target:a}),E({source:a.doneData,match:{hasErrors:({errors:e})=>e.length>0},cases:{hasErrors:_,__:v}}),{form:{onsubmit:p}}}export{j 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>
@@ -128,7 +120,7 @@
     aria-label="Open Picked Devtools"
     title="Open Picked Devtools (or press .)"
   >
-    <PickedIcon height={25} width={25}/>
+    <PickedLogo />
   </button>
 {/if}
 
@@ -192,7 +184,6 @@
   .toolbar-right {
     display: flex;
     align-items: center;
-    gap: var(--space-1);
   }
 
   .main {
@@ -223,36 +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;
   }
 
+  .floating-button:hover {
+    box-shadow: 0 6px 16px rgba(21, 73, 255, 0.3);
+    transform: scale(1.05);
+  }
 
+  .floating-button:active {
+    transform: scale(0.95);
+  }
 
-
+  .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.js

@@ -1 +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:"devtools",name:"Picked Devtools",decide:{},targets:[{selector:"body",placement:"append"}],component:o(t,{css:[p]})});r.addStep({label:"Tools"});export{r as devtoolsExperience};
+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};

package/dist/plugins/devtools/screens/components/ComponentsListScreen.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { getPicked } from '../../../../hooks'
-  import { Card, DataTable, EmptyState, Stack } from '../../ui'
+  import { DataTable, EmptyState } from '../../ui'
 
   const client = getPicked()
 
@@ -12,19 +12,15 @@
   ]
 </script>
 
-<Stack padding="medium">
-  <Card sectioned>
-    <DataTable columns={columns} rows={$components}>
-      {#snippet row(item)}
-        {@const component = item}
-        <tr>
-          <td>{component.name}</td>
-          <td>{component.component.frameworkName}</td>
-        </tr>
-      {/snippet}
-      {#snippet empty()}
-        <EmptyState message="No components" />
-      {/snippet}
-    </DataTable>
-  </Card>
-</Stack>
+<DataTable columns={columns} rows={$components}>
+  {#snippet row(item)}
+    {@const component = item}
+    <tr>
+      <td>{component.name}</td>
+      <td>{component.component.frameworkName}</td>
+    </tr>
+  {/snippet}
+  {#snippet empty()}
+    <EmptyState message="No components" />
+  {/snippet}
+</DataTable>

package/dist/plugins/devtools/screens/events/EventsTable.svelte

@@ -2,7 +2,7 @@
   import { combine, createStore, createEvent, sample } from 'effector'
   import { getPicked } from '../../../../hooks'
   import EventListItem from './EventListItem.svelte'
-  import { Card, DataTable, EmptyState, Stack } from '../../ui'
+  import { DataTable, EmptyState } from '../../ui'
   import type { EventHistoryEntry } from '@picked/client'
 
   const { events } = getPicked()
@@ -51,26 +51,22 @@
   }
 </script>
 
-<Stack padding="medium">
-  <Card sectioned>
-    <DataTable
-      columns={columns}
-      rows={$sortedEvents}
-      sortKey="time"
-      sortDirection={$sortDirectionStore}
-      onSort={handleSort}
-    >
-      {#snippet row(item)}
-        {@const event = item}
-        <EventListItem
-          {event}
-          isExpanded={expandedRowIds.has(event.id)}
-          onToggle={() => toggleRow(event.id)}
-        />
-      {/snippet}
-      {#snippet empty()}
-        <EmptyState message="No events yet. Interact with the page to see events." />
-      {/snippet}
-    </DataTable>
-  </Card>
-</Stack>
+<DataTable
+  columns={columns}
+  rows={$sortedEvents}
+  sortKey="time"
+  sortDirection={$sortDirectionStore}
+  onSort={handleSort}
+>
+  {#snippet row(item)}
+    {@const event = item}
+    <EventListItem
+      {event}
+      isExpanded={expandedRowIds.has(event.id)}
+      onToggle={() => toggleRow(event.id)}
+    />
+  {/snippet}
+  {#snippet empty()}
+    <EmptyState message="No events yet. Interact with the page to see events." />
+  {/snippet}
+</DataTable>

package/dist/plugins/devtools/screens/experience-instances/ExperienceInstancesListScreen.svelte

@@ -7,4 +7,6 @@
   $: experienceInstances = client.experienceInstances.listStore
 </script>
 
-<ExperienceInstancesTable experienceInstances={$experienceInstances} />
+<div>
+  <ExperienceInstancesTable experienceInstances={$experienceInstances} />
+</div>

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

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { ExperienceStore } from '@picked/client'
   import { getPicked } from '../../../../hooks'
-  import { Button, Card, Text, CodeBlock, Stack } from '../../ui'
+  import { Button, Text, CodeBlock, Stack } from '../../ui'
 
   const client = getPicked()
   export let experience: ExperienceStore
@@ -10,38 +10,34 @@
 </script>
 
 <Stack direction="vertical" gap="medium" padding="medium">
-  <Stack direction="horizontal" gap="small">
+  <div>
     <Button variant="primary" size="small" onclick={() => client.launchExperienceById(experience.id)}>
       Launch experience
     </Button>
-  </Stack>
+  </div>
 
-  <Card sectioned>
-    <Stack direction="vertical" gap="medium" padding="medium">
-      <div>
-        <Text weight="semibold">Type</Text>
-        <Text>{$config.type}</Text>
-      </div>
+  <div>
+    <Text weight="semibold">Type</Text>
+    <Text>{$config.name}</Text>
+  </div>
 
-      <div>
-        <Text weight="semibold">Target selectors</Text>
-        <ul>
-          {#if $config.targetSelectors.length > 0}
-            {#each $config.targetSelectors as selector (selector)}
-              <li>
-                <CodeBlock code="{selector.selector} || {selector.placement}" />
-              </li>
-            {/each}
-          {:else}
-            <li><Text color="subdued">(none)</Text></li>
-          {/if}
-        </ul>
-      </div>
+  <div>
+    <Text weight="semibold">Target selectors</Text>
+    <ul>
+      {#if $config.targetSelectors.length > 0}
+        {#each $config.targetSelectors as selector (selector)}
+          <li>
+            <CodeBlock code="{selector.selector} || {selector.placement}" />
+          </li>
+        {/each}
+      {:else}
+        <li><Text color="subdued">(none)</Text></li>
+      {/if}
+    </ul>
+  </div>
 
-      <div>
-        <Text weight="semibold">Decision logic</Text>
-        <CodeBlock code={JSON.stringify($config.decisionLogic, null, 2)} />
-      </div>
-    </Stack>
-  </Card>
+  <div>
+    <Text weight="semibold">Decision logic</Text>
+    <CodeBlock code={JSON.stringify($config.decisionLogic, null, 2)} />
+  </div>
 </Stack>

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

@@ -10,4 +10,6 @@
   $: experienceInstances = client.experienceInstances.getByExperienceId(experience.id)
 </script>
 
-<ExperienceInstancesTable experienceInstances={$experienceInstances} />
+<div>
+  <ExperienceInstancesTable experienceInstances={$experienceInstances} />
+</div>

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
@@ -139,7 +139,7 @@
         .attr(
           'd',
           d3
-            .linkHorizontal<d3.HierarchyPointLink<ProcessedNode>, ProcessedNode>()
+            .linkHorizontal<d3.HierarchyPointLink<ProcessedNode>, d3.HierarchyPointNode<ProcessedNode>>()
             .x((d) => d.y)
             .y((d) => d.x),
         )

package/dist/plugins/devtools/screens/features/FeaturesListScreen.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { createEvent, createStore } from 'effector'
+  import { createStore, createEvent } from 'effector'
   import type { FeatureBucket } from '@picked/client'
   import { getPicked, useUnit } from '../../../../hooks'
-  import { Button, Card, CodeBlock, CopyButton, DataTable, EmptyState, Stack, Text } from '../../ui'
+  import { DataTable, EmptyState, Button, Text, CopyButton, Card, CodeBlock, Stack } from '../../ui'
 
   interface FeatureSelection {
     included: boolean
@@ -87,9 +87,8 @@
     generated URL. Recipients will see the overridden values on page load.
   </Text>
 
-  <Card sectioned>
-    <DataTable columns={columns} rows={$featuresList}>
-      {#snippet row(item)}
+  <DataTable columns={columns} rows={$featuresList}>
+    {#snippet row(item)}
       {@const feature = item}
       {@const selection = $selections[feature.id]}
       {@const currentValue = getBucketValue(feature)}
@@ -106,7 +105,7 @@
           </td>
           <td>
             <Text size="small" weight="medium">{feature.name}</Text>
-            <CodeBlock code={feature.id + ':' + feature.key} inline />
+            <CodeBlock code={feature.key} inline />
           </td>
           <td>
             {#if currentValue !== null}
@@ -142,11 +141,10 @@
         </tr>
       {/if}
     {/snippet}
-      {#snippet empty()}
-        <EmptyState message="No features registered" />
-      {/snippet}
-    </DataTable>
-  </Card>
+    {#snippet empty()}
+      <EmptyState message="No features registered" />
+    {/snippet}
+  </DataTable>
 
   <Card>
     {#snippet header()}

package/dist/plugins/devtools/screens/frameworks/FrameworksListScreen.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { getPicked } from '../../../../hooks'
-  import { Card, DataTable, EmptyState, Stack } from '../../ui'
+  import { DataTable, EmptyState } from '../../ui'
 
   const client = getPicked()
 
@@ -9,18 +9,14 @@
   const columns = [{ key: 'name', header: 'Name' }]
 </script>
 
-<Stack padding="medium">
-  <Card sectioned>
-    <DataTable columns={columns} rows={$frameworks}>
-      {#snippet row(item)}
-        {@const framework = item}
-        <tr>
-          <td>{framework.name}</td>
-        </tr>
-      {/snippet}
-      {#snippet empty()}
-        <EmptyState message="No frameworks" />
-      {/snippet}
-    </DataTable>
-  </Card>
-</Stack>
+<DataTable columns={columns} rows={$frameworks}>
+  {#snippet row(item)}
+    {@const framework = item}
+    <tr>
+      <td>{framework.name}</td>
+    </tr>
+  {/snippet}
+  {#snippet empty()}
+    <EmptyState message="No frameworks" />
+  {/snippet}
+</DataTable>

package/dist/plugins/devtools/screens/history/HistoryEntriesTable.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { HistoryEntry } from '@picked/client'
   import HistoryEntryListItem from './HistoryEntryListItem.svelte'
-  import { Card, DataTable, EmptyState, Stack } from '../../ui'
+  import { DataTable, EmptyState } from '../../ui'
 
   export let historyEntries: HistoryEntry[]
 
@@ -14,16 +14,12 @@
   ]
 </script>
 
-<Stack padding="medium">
-  <Card sectioned>
-    <DataTable columns={columns} rows={historyEntries}>
-      {#snippet row(item)}
-        {@const historyEntry = item}
-        <HistoryEntryListItem {historyEntry} />
-      {/snippet}
-      {#snippet empty()}
-        <EmptyState message="No history entries" />
-      {/snippet}
-    </DataTable>
-  </Card>
-</Stack>
+<DataTable columns={columns} rows={historyEntries}>
+  {#snippet row(item)}
+    {@const historyEntry = item}
+    <HistoryEntryListItem {historyEntry} />
+  {/snippet}
+  {#snippet empty()}
+    <EmptyState message="No history entries" />
+  {/snippet}
+</DataTable>

package/dist/plugins/devtools/screens/predicates/PredicatesListScreen.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { getPicked } from '../../../../hooks'
-  import { Card, DataTable, EmptyState, Stack } from '../../ui'
+  import { DataTable, EmptyState } from '../../ui'
 
   const client = getPicked()
 
@@ -9,18 +9,14 @@
   const columns = [{ key: 'name', header: 'Name' }]
 </script>
 
-<Stack padding="medium">
-  <Card sectioned>
-    <DataTable columns={columns} rows={$predicates}>
-      {#snippet row(item)}
-        {@const predicate = item}
-        <tr>
-          <td>{predicate.name}</td>
-        </tr>
-      {/snippet}
-      {#snippet empty()}
-        <EmptyState message="No predicates" />
-      {/snippet}
-    </DataTable>
-  </Card>
-</Stack>
+<DataTable columns={columns} rows={$predicates}>
+  {#snippet row(item)}
+    {@const predicate = item}
+    <tr>
+      <td>{predicate.name}</td>
+    </tr>
+  {/snippet}
+  {#snippet empty()}
+    <EmptyState message="No predicates" />
+  {/snippet}
+</DataTable>

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

@@ -1,47 +1 @@
-<script lang="ts">
-  import { getPicked } from '../../../../hooks'
-  import { Button, Card, CodeBlock, DataTable, Stack, Text } from '../../ui'
-
-  const client = getPicked()
-
-  const dashboardProjectUrl = `${client.dashboardUrl}/p/${client.projectId}`
-
-  const columns = [
-    { key: 'label', header: 'Property' },
-    { key: 'value', header: 'Value' },
-  ]
-
-  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 },
-  ]
-</script>
-
-<Stack direction="vertical" gap="medium" padding="medium">
-  <Text size="caption" color="subdued">
-    Project configuration for this Picked client instance.
-  </Text>
-
-  <Card sectioned>
-    <DataTable {columns} {rows}>
-      {#snippet row(item)}
-        <tr>
-          <td>
-            <Text size="small" weight="medium">{item.label}</Text>
-          </td>
-          <td>
-            <CodeBlock code={item.value} inline />
-          </td>
-        </tr>
-      {/snippet}
-    </DataTable>
-  </Card>
-
-  <Stack direction="horizontal" gap="small">
-    <Button variant="primary" size="small" href={dashboardProjectUrl} target="_blank">
-      Open in Dashboard
-    </Button>
-  </Stack>
-</Stack>
+<p>todo: project</p>

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/dist/plugins/devtools/screens/responses/ResponsesTable.svelte

@@ -2,7 +2,7 @@
   import type { ResponseListItem, Field } from '@picked/client'
   import { getPicked } from '../../../../hooks'
   import ResponseTableRow from './ResponseTableRow.svelte'
-  import { Card, DataTable, EmptyState, Button, RadioGroup, Stack } from '../../ui'
+  import { DataTable, EmptyState, Button, RadioGroup, Stack } from '../../ui'
 
   export let responses: ResponseListItem[] = []
 
@@ -51,29 +51,27 @@
   $: filterOptions[2] = { value: 'unset', label: `Unset (${allFields.length - responses.length})` }
 </script>
 
-<Stack padding="medium">
-  <Card sectioned>
-    <Stack direction="horizontal" gap="small" align="space-between" justify="center" padding="medium">
-      <RadioGroup
-        label="Show"
-        name="filter"
-        options={filterOptions}
-        value={filter}
-        onchange={(val) => { filter = val }}
-        orientation="horizontal"
-      />
-      {#if responses.length > 0}
-        <Button variant="destructive" size="small" onclick={handleClearAll}>Clear All</Button>
-      {/if}
-    </Stack>
-    <DataTable columns={columns} rows={fieldRows}>
-      {#snippet row(item)}
-        {@const rowData = item}
-        <ResponseTableRow field={rowData.field} response={rowData.response} />
-      {/snippet}
-      {#snippet empty()}
-        <EmptyState message="No fields registered yet" />
-      {/snippet}
-    </DataTable>
-  </Card>
+<Stack direction="vertical" gap="none">
+  <Stack direction="horizontal" gap="small" align="space-between" justify="center" padding="small">
+    <RadioGroup
+      label="Show"
+      name="filter"
+      options={filterOptions}
+      value={filter}
+      onchange={(val) => { filter = val }}
+      orientation="horizontal"
+    />
+    {#if responses.length > 0}
+      <Button variant="destructive" size="small" onclick={handleClearAll}>Clear All</Button>
+    {/if}
+  </Stack>
+  <DataTable columns={columns} rows={fieldRows}>
+    {#snippet row(item)}
+      {@const rowData = item}
+      <ResponseTableRow field={rowData.field} response={rowData.response} />
+    {/snippet}
+    {#snippet empty()}
+      <EmptyState message="No fields registered yet" />
+    {/snippet}
+  </DataTable>
 </Stack>

package/dist/plugins/devtools/ui/actions/Button.svelte

@@ -18,7 +18,6 @@
     type?: 'button' | 'submit' | 'reset'
     fullWidth?: boolean
     href?: string
-    target?: string
     onclick?: (event: MouseEvent) => void
   }
 
@@ -32,7 +31,6 @@
     type = 'button',
     fullWidth = false,
     href,
-    target,
     onclick,
   }: Props = $props()
 
@@ -45,8 +43,6 @@
     class:full-width={fullWidth}
     class:is-disabled={isDisabled}
     {href}
-    {target}
-    rel={target === '_blank' ? 'noopener noreferrer' : undefined}
     aria-disabled={isDisabled || undefined}
     tabindex={isDisabled ? -1 : undefined}
     onclick={isDisabled

package/dist/plugins/devtools/ui/data/DataTable.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" generics="T">
+<script lang="ts" generics="TRow">
   import type { Snippet } from 'svelte'
 
   interface Column {
@@ -9,8 +9,8 @@
 
   interface Props {
     columns: Column[]
-    rows: T[]
-    row: Snippet<[T, number]>
+    rows: TRow[]
+    row: Snippet<[TRow, number]>
     empty?: Snippet
     sortKey?: string | null
     sortDirection?: 'asc' | 'desc'
@@ -131,14 +131,4 @@
   :global(tbody tr.selected) {
     background-color: color-mix(in srgb, var(--color-blue-500) 8%, var(--color-white));
   }
-
-  th:first-child,
-  :global(tbody td:first-child) {
-    padding-left: var(--space-4);
-  }
-
-  th:last-child,
-  :global(tbody td:last-child) {
-    padding-right: var(--space-4);
-  }
 </style>

package/package.json

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

package/dist/plugins/devtools/PickedIcon.svelte

@@ -1,19 +0,0 @@
-<!-- PickedIcon.svelte -->
-<script lang="ts">
-  export let width = 48
-  export let height = 48
-</script>
-
-<svg {width} {height} viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <g opacity="0.5">
-    <ellipse opacity="0.8" cx="32.5807" cy="7.38424" rx="6.29832" ry="6.29832" fill="#01AD7A"/>
-    <circle opacity="0.6" cx="31.4947" cy="8.47015" r="6.29832" fill="#01AD7A"/>
-    <ellipse opacity="0.4" cx="30.4088" cy="9.55607" rx="6.29832" ry="6.29832" fill="#01AD7A"/>
-    <ellipse opacity="0.2" cx="29.3229" cy="10.642" rx="6.29832" ry="6.29832" fill="#01AD7A"/>
-    <circle opacity="0.1" cx="28.237" cy="11.7279" r="6.29832" fill="#01AD7A"/>
-  </g>
-  <ellipse cx="33.6664" cy="6.29832" rx="6.29832" ry="6.29832" fill="#00CD90"/>
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5997 16.1802C14.5788 16.1802 16.1832 14.5758 16.1832 12.5967C16.1832 10.6175 14.5788 9.01315 12.5997 9.01315C10.6206 9.01315 9.01617 10.6175 9.01617 12.5967C9.01617 14.5758 10.6206 16.1802 12.5997 16.1802ZM12.5997 18.895C16.0782 18.895 18.898 16.0751 18.898 12.5967C18.898 9.11821 16.0782 6.29836 12.5997 6.29836C9.12123 6.29836 6.30138 9.11821 6.30138 12.5967C6.30138 16.0751 9.12123 18.895 12.5997 18.895Z" fill="#1549FF"/>
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5997 30.9486C14.5788 30.9486 16.1832 29.3442 16.1832 27.3651C16.1832 25.386 14.5788 23.7816 12.5997 23.7816C10.6206 23.7816 9.01617 25.386 9.01617 27.3651C9.01617 29.3442 10.6206 30.9486 12.5997 30.9486ZM12.5997 33.6634C16.0782 33.6634 18.898 30.8436 18.898 27.3651C18.898 23.8866 16.0782 21.0668 12.5997 21.0668C9.12123 21.0668 6.30138 23.8866 6.30138 27.3651C6.30138 30.8436 9.12123 33.6634 12.5997 33.6634Z" fill="#1549FF"/>
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M27.3683 30.9486C29.3474 30.9486 30.9518 29.3442 30.9518 27.3651C30.9518 25.386 29.3474 23.7816 27.3683 23.7816C25.3891 23.7816 23.7847 25.386 23.7847 27.3651C23.7847 29.3442 25.3891 30.9486 27.3683 30.9486ZM27.3683 33.6634C30.8467 33.6634 33.6666 30.8436 33.6666 27.3651C33.6666 23.8866 30.8467 21.0668 27.3683 21.0668C23.8898 21.0668 21.0699 23.8866 21.0699 27.3651C21.0699 30.8436 23.8898 33.6634 27.3683 33.6634Z" fill="#1549FF"/>
-</svg>