@picked/svelte 0.0.1-dev.1774224866171 → 0.0.1-dev.1774244905386

package/dist/form/index.d.ts

@@ -1,2 +1,25 @@
-export type { FormField } from '@picked/client/form';
-export { getForm } from './get-form';
+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;
+};
+/**
+ *
+ * @param root0
+ * @param root0.id
+ * @param root0.title
+ * @param root0.onError
+ * @param root0.onSuccess
+ * @example
+ */
+export declare function getForm({ id: formId, title, onError, onSuccess }: GetFormOptions): {
+    form: {
+        onsubmit: import('effector').EventCallable<SubmitEventWithCurrentTarget>;
+    };
+};
+export {};

package/dist/form/index.js

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

package/dist/hooks/field.d.ts

@@ -1,7 +1,8 @@
 import { Field, FieldValue } from '@picked/client';
 import { Store } from 'effector';
-export interface GetFieldResponse {
+interface GetFieldResponse {
     value: Store<FieldValue>;
     field: Store<Field | null>;
 }
-export declare function getField(id: string): GetFieldResponse;
+export declare function getField(key: string): GetFieldResponse;
+export {};

package/dist/hooks/field.js

@@ -1 +1 @@
-import{getPicked as e}from"./client.js";function t(t){let n=e();return{field:n.fields.getById(t),value:n.responses.getByFieldId(t)}}export{t as getField};
+import{getPicked as e}from"./client.js";function t(t){let n=e();return{field:n.fields.getByKey(t),value:n.responses.getByFieldKey(t)}}export{t as getField};

package/dist/hooks/step.d.ts

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

package/dist/hooks/step.js

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

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

@@ -1,9 +1,14 @@
 <script lang="ts">
+  /** @file List item row displaying an experience instance's current state in the devtools panel. */
   import type { ExperienceInstance } from '@picked/client'
   import { Button } from '../ui'
+  import { getPicked } from '../../../hooks'
 
   export let experienceInstance: ExperienceInstance
 
+  const client = getPicked()
+  const experienceLookup = client.experiences.get(experienceInstance.experienceId)
+
   const currentNode = experienceInstance.currentNodeStore
   const currentStep = experienceInstance.currentStepStore
   const nextStepNodes = experienceInstance.nextReachableStepNodesStore
@@ -12,15 +17,22 @@
   const isOpen = experienceInstance.isOpenStore
 
   $: totalNextStepNodes = $nextStepNodes.length
+  $: experienceName = $experienceLookup?.name ?? experienceInstance.experienceId
+  $: currentNodeDisplay = $currentNode
+    ? (('name' in $currentNode && $currentNode.name) ||
+        ('stepKey' in $currentNode && $currentNode.stepKey) ||
+        $currentNode.id)
+    : ''
+  $: currentStepDisplay = $currentStep?.name ?? ''
 </script>
 
 <tr>
-  <td>{experienceInstance.experienceId}</td>
+  <td>{experienceName}</td>
   <td><Button variant="ghost" size="small" onclick={() => experienceInstance.toggleOpen()}>{$isOpen}</Button></td>
-  <td>{$currentNode?.id || ''}</td>
+  <td>{currentNodeDisplay}</td>
   <td>{$currentNode?.type || ''}</td>
-  <td>{$currentStep?.id || ''}</td>
-  <td>{$currentStep?.label || ''}</td>
+  <td>{currentStepDisplay}</td>
+  <td>{$currentStep?.title || ''}</td>
   <td>{totalNextStepNodes}</td>
   <td>{$stepsToOrigin[0]} - {$stepsToOrigin[1]}</td>
   <td>{$stepsToLeaf[0]} - {$stepsToLeaf[1]}</td>

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

@@ -6,7 +6,7 @@
   export let experienceInstances: ExperienceInstance[]
 
   const columns = [
-    { key: 'experience', header: 'Experience' },
+    { key: 'experience', header: 'Name' },
     { key: 'isOpen', header: 'Is Open' },
     { key: 'currentNodeId', header: 'Current node ID' },
     { key: 'currentNodeType', header: 'Current node Type' },

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

@@ -11,5 +11,14 @@ export interface SvelteDevtoolsPluginOptions {
 /**
  * Registers the devtools experience for on-demand loading via the Chrome DevTools extension.
  * The devtools component is lazily loaded — it is never included in the initial bundle.
+ *
+ * @param options - Optional configuration for the devtools plugin.
+ * @returns An array of plugins to register with the Picked client.
+ * @example
+ * ```typescript
+ * const client = new Picked({
+ *   plugins: [...svelteDevtoolsPlugin({ enabled: true })],
+ * })
+ * ```
  */
 export declare const svelteDevtoolsPlugin: (options?: SvelteDevtoolsPluginOptions) => Plugin[];

package/dist/plugins/devtools/plugin.js

@@ -1 +1 @@
-import{adaptSvelteComponent as e}from"../../component.js";import{__vitePreload as t}from"../../_virtual/_vite/preload-helper.js";import{lazyComponent as n}from"@picked/client";import{createExperience as r,createExperiencePlugin as i}from"@picked/client/plugins/create-experience";var a=a=>{let o=r({id:`devtools`,name:`Picked Devtools`,condition:!1,initializeOpen:!1,targets:[{selector:`body`,placement:`append`}],component:e(n(()=>t(()=>import(`./DevToolsExperience.svelte`),[])))});return o.addStep({label:`Tools`}),[{name:`svelte-devtools`,setup:e=>{a?.enabled&&e.eventBus.watch(t=>{t.type===`ready`&&e.experiences.launch({id:o.id,options:{bypassCondition:!0}})})}},i({experiences:[o]})]};export{a as svelteDevtoolsPlugin};
+import{adaptSvelteComponent as e}from"../../component.js";import{__vitePreload as t}from"../../_virtual/_vite/preload-helper.js";import{lazyComponent as n}from"@picked/client";import{createExperience as r,createExperiencePlugin as i}from"@picked/client/plugins/create-experience";var a=a=>{let o=r({id:`devtools`,name:`Picked Devtools`,condition:!1,initializeOpen:!1,targets:[{selector:`body`,placement:`append`}],component:e(n(()=>t(()=>import(`./DevToolsExperience.svelte`),[])))});return o.addStep({label:`Tools`}),[{name:`svelte-devtools`,setup:e=>{a?.enabled&&e.eventBus.watch(t=>{t.type===`ready`&&e.experiences.launch({key:o.key,options:{bypassCondition:!0}})})}},i({experiences:[o]})]};export{a as svelteDevtoolsPlugin};

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

@@ -1,11 +1,33 @@
 <script lang="ts">
+  /** @file Expandable list item row for displaying an event bus history entry in the devtools events screen. */
   import type { EventBusPayload, EventHistoryEntry } from '@picked/client'
   import { Badge, Card, CodeBlock, Stack, Text } from '../../ui'
+  import { getPicked } from '../../../../hooks'
 
   export let event: EventHistoryEntry
   export let isExpanded: boolean
   export let onToggle: () => void
 
+  const client = getPicked()
+
+  const eventExpId =
+    'experience' in event.payload && event.payload.experience
+      ? event.payload.experience.experienceId
+      : undefined
+  const eventExpLookup = client.experiences.get(eventExpId ?? '')
+  $: eventExpName = eventExpId
+    ? ($eventExpLookup?.name ?? eventExpId)
+    : '-'
+
+  /**
+   * Formats a Date as a 24-hour time string with milliseconds.
+   *
+   * @param date - The date to format.
+   * @example
+   * ```typescript
+   * formatTime(new Date()) // '14:30:05.123'
+   * ```
+   */
   function formatTime(date: Date): string {
     return date.toLocaleTimeString('en-US', {
       hour12: false,
@@ -21,62 +43,102 @@
     value: unknown
   }
 
-  function getPayloadFields(payload: EventBusPayload): PayloadField[] {
+  /**
+   * Extracts experience-related fields from an event payload's experience object.
+   *
+   * @param exp - The experience object from the event payload.
+   * @example
+   * ```typescript
+   * getExperienceFields({ id: 'abc', experienceId: 'quiz' })
+   * // [{ label: 'Experience ID', value: 'abc' }, { label: 'Experience Type', value: 'quiz' }]
+   * ```
+   */
+  function getExperienceFields(exp: unknown): PayloadField[] {
+    if (!exp || typeof exp !== 'object') return []
     const fields: PayloadField[] = []
+    if ('id' in exp && exp.id) fields.push({ label: 'Experience ID', value: exp.id })
+    if ('experienceId' in exp && exp.experienceId)
+      fields.push({ label: 'Experience Type', value: exp.experienceId })
+    return fields
+  }
 
-    fields.push({ label: 'Type', value: payload.type })
+  /**
+   * Extracts step-related fields from an event payload's step object.
+   *
+   * @param step - The step object from the event payload.
+   * @example
+   * ```typescript
+   * getStepFields({ id: 's1', name: 'Welcome' })
+   * // [{ label: 'Step ID', value: 's1' }, { label: 'Step Name', value: 'Welcome' }]
+   * ```
+   */
+  function getStepFields(step: unknown): PayloadField[] {
+    if (!step || typeof step !== 'object') return []
+    const fields: PayloadField[] = []
+    if ('id' in step && step.id) fields.push({ label: 'Step ID', value: step.id })
+    // eslint-disable-next-line sonarjs/deprecation -- backwards-compat fallback for label
+    const stepName = ('name' in step && step.name) || ('label' in step && step.label)
+    if (stepName) fields.push({ label: 'Step Name', value: stepName })
+    return fields
+  }
 
-    if ('value' in payload && payload.value !== undefined) {
+  /**
+   * Extracts scalar (non-nested) fields from an event bus payload.
+   *
+   * @param payload - The event bus payload to extract fields from.
+   * @example
+   * ```typescript
+   * getScalarFields({ type: 'step', value: 42 })
+   * // [{ label: 'Value', value: 42 }]
+   * ```
+   */
+  function getScalarFields(payload: EventBusPayload): PayloadField[] {
+    const fields: PayloadField[] = []
+    if ('value' in payload && payload.value !== undefined)
       fields.push({ label: 'Value', value: payload.value })
-    }
-
-    if ('experience' in payload && payload.experience) {
-      const exp = payload.experience
-      if (exp && typeof exp === 'object') {
-        if ('id' in exp && exp.id) {
-          fields.push({ label: 'Experience ID', value: exp.id })
-        }
-        if ('experienceId' in exp && exp.experienceId) {
-          fields.push({ label: 'Experience Type', value: exp.experienceId })
-        }
-      }
-    }
-
-    if ('step' in payload && payload.step) {
-      const step = payload.step
-      if (step && typeof step === 'object') {
-        if ('id' in step && step.id) {
-          fields.push({ label: 'Step ID', value: step.id })
-        }
-        if ('label' in step && step.label) {
-          fields.push({ label: 'Step Label', value: step.label })
-        }
-      }
-    }
-
-    if ('form' in payload && payload.form) {
+    if ('form' in payload && payload.form)
       fields.push({ label: 'Form', value: JSON.stringify(payload.form) })
-    }
-
-    if ('feature' in payload && payload.feature) {
+    if ('feature' in payload && payload.feature)
       fields.push({ label: 'Feature', value: JSON.stringify(payload.feature) })
-    }
-
-    if ('exception' in payload && payload.exception) {
+    if ('exception' in payload && payload.exception)
       fields.push({ label: 'Exception', value: JSON.stringify(payload.exception) })
-    }
-
-    if ('version' in payload && payload.version) {
+    if ('version' in payload && payload.version)
       fields.push({ label: 'Version', value: payload.version })
-    }
+    return fields
+  }
 
-    if ('id' in payload && payload.id && payload.type === 'session') {
+  /**
+   * Builds a complete list of display fields from an event bus payload.
+   *
+   * @param payload - The event bus payload to extract all fields from.
+   * @example
+   * ```typescript
+   * getPayloadFields({ type: 'session', id: 'sess-1' })
+   * // [{ label: 'Type', value: 'session' }, { label: 'Session ID', value: 'sess-1' }]
+   * ```
+   */
+  function getPayloadFields(payload: EventBusPayload): PayloadField[] {
+    const fields: PayloadField[] = [{ label: 'Type', value: payload.type }]
+    fields.push(...getScalarFields(payload))
+    if ('experience' in payload && payload.experience)
+      fields.push(...getExperienceFields(payload.experience))
+    if ('step' in payload && payload.step)
+      fields.push(...getStepFields(payload.step))
+    if ('id' in payload && payload.id && payload.type === 'session')
       fields.push({ label: 'Session ID', value: payload.id })
-    }
-
     return fields
   }
 
+  /**
+   * Formats a field value for display as a string.
+   *
+   * @param value - The value to format.
+   * @example
+   * ```typescript
+   * formatValue(42) // '42'
+   * formatValue(null) // 'null'
+   * ```
+   */
   function formatValue(value: unknown): string {
     if (value === null) return 'null'
     if (value === undefined) return 'undefined'
@@ -97,9 +159,7 @@
     <Badge status="info">{event.payload.type}</Badge>
   </td>
   <td>
-    <Text size="small">
-      {'experience' in event.payload && event.payload.experience ? event.payload.experience.experienceId : '-'}
-    </Text>
+    <Text size="small">{eventExpName}</Text>
   </td>
   <td>
     <Text size="caption" color="subdued">
@@ -114,7 +174,7 @@
         <Text size="small" weight="semibold">Event Payload</Text>
         <Card>
           <Stack direction="vertical" gap="small">
-            {#each getPayloadFields(event.payload) as field}
+            {#each getPayloadFields(event.payload) as field (field.label)}
               <Text size="caption" inline>
                 <Text size="caption" weight="semibold" color="subdued" inline>{field.label}:</Text>
                 <CodeBlock code={formatValue(field.value)} inline />

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+  /** @file Detail screen for a single experience, showing its config, target selectors, and decision logic. */
   import type { ExperienceStore } from '@picked/client'
   import { getPicked } from '../../../../hooks'
   import { Button, Card, Text, CodeBlock, Stack } from '../../ui'
@@ -11,7 +12,7 @@
 
 <Stack direction="vertical" gap="medium" padding="medium">
   <Stack direction="horizontal" gap="small">
-    <Button variant="primary" size="small" onclick={() => client.launchExperienceById(experience.id)}>
+    <Button variant="primary" size="small" onclick={() => client.experiences.open({ key: experience.key, options: { bypassCondition: true } })}>
       Launch experience
     </Button>
   </Stack>

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+  /** @file D3-based tree visualization of an experience's node graph in the devtools panel. */
   import * as d3 from 'd3'
   import type { ExperienceEdge, ExperienceNode, ExperienceStore } from '@picked/client'
   import { Badge, Button, Spinner, Stack, Text, VisualizationContainer } from '../../ui'
@@ -7,19 +8,20 @@
 
   let svgEl: SVGSVGElement
   let zoom = 1
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- reserved for future node details panel
   let selectedNode = null
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, sonarjs/no-unused-collection -- reserved for future path highlighting
   let highlightedPath: string[][] = []
-  let error: string | null = null
+  let error = null
   const loading = false
 
   let treeRenderingDone = false
 
   const tree = experience.treeStore
 
-  $: steps = $tree.steps
   $: nodes = $tree.nodes
   $: edges = $tree.edges
-  $: conditionals = $tree.conditionals
+  $: conditions = $tree.conditions
 
   let zoomBehavior: d3.ZoomBehavior<SVGSVGElement, unknown>
 
@@ -35,10 +37,30 @@
     _referenceTo?: string
   }
 
+  /**
+   * Type guard that checks if a value is a non-null, non-array object.
+   *
+   * @param val - The value to check.
+   * @example
+   * ```typescript
+   * isRecord({ key: 'value' }) // true
+   * isRecord([1, 2]) // false
+   * ```
+   */
   function isRecord(val: unknown): val is Record<string, unknown> {
     return val !== null && typeof val === 'object' && !Array.isArray(val)
   }
 
+  /**
+   * Recursively formats a JSON Logic rule into a human-readable string.
+   *
+   * @param rule - The JSON Logic rule object to format.
+   * @example
+   * ```typescript
+   * formatLogicRule({ '==': [{ var: 'age' }, 18] }) // 'age = 18'
+   * ```
+   */
+  // eslint-disable-next-line sonarjs/cognitive-complexity -- recursive logic rule formatter handles all operator types
   function formatLogicRule(rule: unknown): string {
     if (rule === null || rule === undefined) return '?'
     if (typeof rule === 'string') return rule
@@ -46,6 +68,7 @@
     if (Array.isArray(rule)) {
       return rule.map(formatLogicRule).join(', ')
     }
+
     if (isRecord(rule)) {
       const keys = Object.keys(rule)
       if (keys.length === 0) return 'Condition'
@@ -69,28 +92,43 @@
       if (op in compOps && Array.isArray(args) && args.length >= 2) {
         return `${formatLogicRule(args[0])} ${compOps[op]} ${formatLogicRule(args[1])}`
       }
+
       if (op === 'and' && Array.isArray(args)) {
         return args.map(formatLogicRule).join(' & ')
       }
+
       if (op === 'or' && Array.isArray(args)) {
         return args.map(formatLogicRule).join(' | ')
       }
+
       if ((op === '!' || op === 'not') && Array.isArray(args)) {
         return `!${formatLogicRule(args[0])}`
       }
+
       if (op === 'in' && Array.isArray(args) && args.length >= 2) {
         return `${formatLogicRule(args[0])} in ${formatLogicRule(args[1])}`
       }
+
       return `${op}(?)`
     }
+
     return '?'
   }
 
+  /**
+   * Renders the experience node graph as an interactive D3 tree visualization.
+   *
+   * @example
+   * ```typescript
+   * renderGraph() // builds and renders the SVG tree
+   * ```
+   */
   function renderGraph() {
     d3.select(svgEl).selectAll('*').remove()
 
-    const stepsMap = new Map(steps.map((s) => [s.id, s]))
-    const conditionalsMap = new Map(conditionals.map((c) => [c.id, c]))
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity -- D3 visualization runs imperatively outside Svelte reactivity
+    const conditionsMap = new Map(conditions.map((c) => [c.id, c]))
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity -- D3 visualization runs imperatively outside Svelte reactivity
     const outgoingEdges = new Map<string, ExperienceEdge[]>()
     edges.forEach((e) => {
       if (!outgoingEdges.has(e.sourceNodeId)) outgoingEdges.set(e.sourceNodeId, [])
@@ -99,17 +137,20 @@
 
     const getNodeLabel = (node: ExperienceNode): string => {
       if (node.type === 'origin') return 'Start'
-      if (node.type === 'step' && node.stepId)
-        return stepsMap.get(node.stepId)?.label ?? 'Unknown Step'
-      if (node.type === 'conditional' && node.conditionalId) {
-        const conditional = conditionalsMap.get(node.conditionalId)
-        if (conditional?.label) return conditional.label
-        if (conditional?.condition) return formatLogicRule(conditional.condition)
+      if (node.type === 'step')
+        return node.name ?? node.stepKey ?? node.stepId ?? 'Unknown Step'
+      if (node.type === 'condition') {
+        const conditionId = node.conditionId
+        const conditionItem = conditionId ? conditionsMap.get(conditionId) : undefined
+        if (conditionItem?.name) return conditionItem.name
+        if (conditionItem?.logic) return formatLogicRule(conditionItem.logic)
         return 'Condition'
       }
+
       return 'Unknown Node'
     }
 
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity -- D3 visualization runs imperatively outside Svelte reactivity
     const processedNodes = new Map<string, ProcessedNode>()
     nodes.forEach((n) => {
       processedNodes.set(n.id, {
@@ -141,6 +182,7 @@
       // Use a global visited set so join nodes (multiple incoming branches converging
       // to the same node) only appear once in the tree, with reference nodes on
       // subsequent visits to indicate the convergence point.
+      // eslint-disable-next-line svelte/prefer-svelte-reactivity -- D3 visualization runs imperatively outside Svelte reactivity
       const globalVisited = new Set<string>()
       const convertGraphToTree = (node: ProcessedNode): ProcessedNode => {
         if (globalVisited.has(node.id)) {
@@ -196,8 +238,9 @@
         .append('path')
         .attr('class', 'link')
         .attr('fill', 'none')
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- D3 callback types are untyped
         .attr('stroke', (d: any) => {
-          if (d.source.data.type !== 'conditional') return '#94a3b8'
+          if (d.source.data.type !== 'condition') return '#94a3b8'
           const targetId = d.target.data._isReference
             ? d.target.data._referenceTo
             : d.target.data.id
@@ -211,17 +254,21 @@
         .attr('stroke-width', 2)
         .attr('d', linkGenerator)
 
-      // Label true/false branches from conditional nodes
+      // Label true/false branches from condition nodes
       g.selectAll('.edge-label')
-        .data(treeRoot.links().filter((d: any) => d.source.data.type === 'conditional'))
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- D3 callback types are untyped
+        .data(treeRoot.links().filter((d: any) => d.source.data.type === 'condition'))
         .enter()
         .append('text')
         .attr('class', 'edge-label')
         .attr('text-anchor', 'middle')
         .attr('font-size', '10px')
         .attr('font-weight', 'bold')
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- D3 callback types are untyped
         .attr('x', (d: any) => (d.source.y + d.target.y) / 2)
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- D3 callback types are untyped
         .attr('y', (d: any) => (d.source.x + d.target.x) / 2 - 6)
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- D3 callback types are untyped
         .attr('fill', (d: any) => {
           const targetId = d.target.data._isReference
             ? d.target.data._referenceTo
@@ -233,6 +280,7 @@
           if (edge?.sourceNodeHandle === 'false') return '#ef4444'
           return '#64748b'
         })
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- D3 callback types are untyped
         .text((d: any) => {
           const targetId = d.target.data._isReference
             ? d.target.data._referenceTo
@@ -251,15 +299,18 @@
         .enter()
         .append('g')
         .attr('class', 'node')
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- D3 callback types are untyped
         .attr('transform', (d: any) => `translate(${d.y},${d.x})`)
 
       nodesSelection
         .append('circle')
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- D3 callback types are untyped
         .attr('r', (d: any) => (d.data.type === 'origin' ? 15 : 10))
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- D3 callback types are untyped
         .attr('fill', (d: any) => {
           if (d.data._isReference) return '#38bdf8'
           if (d.data.type === 'origin') return '#00cd90'
-          if (d.data.type === 'conditional') return '#f59e0b'
+          if (d.data.type === 'condition') return '#f59e0b'
           return '#1748ff'
         })
         .attr('stroke', '#fff')
@@ -267,10 +318,12 @@
 
       nodesSelection
         .append('text')
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- D3 callback types are untyped
         .attr('dy', (d: any) => (d.children ? -15 : 25))
         .attr('text-anchor', 'middle')
         .attr('font-size', '12px')
         .attr('fill', '#1e293b')
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- D3 callback types are untyped
         .text((d: any) =>
           d.data.name.length > 30 ? `${d.data.name.slice(0, 27)}...` : d.data.name,
         )
@@ -301,11 +354,27 @@
     treeRenderingDone = true
   }
 
+  /**
+   * Zooms the tree visualization in by 20%.
+   *
+   * @example
+   * ```typescript
+   * handleZoomIn() // increases zoom level
+   * ```
+   */
   function handleZoomIn() {
     if (!svgEl || !zoomBehavior) return
     d3.select(svgEl).transition().duration(250).call(zoomBehavior.scaleBy, 1.2)
   }
 
+  /**
+   * Zooms the tree visualization out by 20%.
+   *
+   * @example
+   * ```typescript
+   * handleZoomOut() // decreases zoom level
+   * ```
+   */
   function handleZoomOut() {
     if (!svgEl || !zoomBehavior) return
     d3.select(svgEl)
@@ -314,6 +383,14 @@
       .call(zoomBehavior.scaleBy, 1 / 1.2)
   }
 
+  /**
+   * Resets the tree visualization zoom and position to the default centered view.
+   *
+   * @example
+   * ```typescript
+   * handleReset() // resets zoom to default
+   * ```
+   */
   function handleReset() {
     if (!svgEl || !zoomBehavior) return
     const width = svgEl.clientWidth
@@ -327,6 +404,15 @@
     d3.select(svgEl).transition().duration(750).call(zoomBehavior.transform, initialTransform)
   }
 
+  /**
+   * Closes the node details panel and resets all link/node highlights.
+   *
+   * @example
+   * ```typescript
+   * closeNodeDetails() // resets selection and highlighting
+   * ```
+   */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- reserved for future node details panel
   function closeNodeDetails() {
     selectedNode = null
     if (svgEl) {

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+  /** @file Screen listing all registered experiences as tabs in the devtools panel. */
   import Tabs from '../../components/Tabs.svelte'
   import { getPicked } from '../../../../hooks'
   import ExperienceScreen from './ExperienceScreen.svelte'
@@ -9,7 +10,7 @@
   $: tabs = $experiences.map((experience) => {
     return {
       id: experience.id,
-      label: experience.id,
+      label: experience.name,
       component: ExperienceScreen,
       props: {
         experience,

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

@@ -1,12 +1,18 @@
 <script lang="ts">
+  /** @file List item row displaying a navigation history entry in the devtools history screen. */
   import type { HistoryEntry } from '@picked/client'
+  import { getPicked } from '../../../../hooks'
 
   export let historyEntry: HistoryEntry
+
+  const client = getPicked()
+  const experienceLookup = client.experiences.get(historyEntry.experienceId)
+  $: experienceName = $experienceLookup?.name ?? historyEntry.experienceId
 </script>
 
 <tr>
   <td>{historyEntry.id}</td>
-  <td>{historyEntry.experienceId}</td>
+  <td>{experienceName}</td>
   <td>{historyEntry.node.id}</td>
   <td>{historyEntry.node.type}</td>
   <td>{historyEntry.at}</td>

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

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import type { ResponseListItem, PrimitiveFieldValue, Field, FieldValue } from '@picked/client'
+  /** @file Editable table row for a single field response in the devtools responses screen. */
+  import type { ResponseListItem, PrimitiveFieldValue, Field } from '@picked/client'
   import { getPicked } from '../../../../hooks'
   import { Button, Text, CodeBlock, Banner, Stack } from '../../ui'
 
@@ -11,25 +12,46 @@
   let isEditing = false
   let editValue = ''
   let editError = ''
-  let selectedOptions: Set<FieldValue> = new Set()
+  // eslint-disable-next-line svelte/prefer-svelte-reactivity -- Set is reassigned for Svelte reactivity via `selectedOptions = selectedOptions`
+  let selectedOptions: Set<PrimitiveFieldValue> = new Set()
 
-  $: hasOptions = Array.isArray(field?.options) && field.options.length > 0
-  $: staticOptions = Array.isArray(field?.options) ? field.options : null
+  $: hasOptions = field?.options && field.options.length > 0
   $: currentValue = response?.value ?? null
 
+  /**
+   * Formats a response value for display, handling arrays, objects, and primitives.
+   *
+   * @param value - The response value to format.
+   * @example
+   * ```typescript
+   * formatValue(['a', 'b']) // 'a, b'
+   * formatValue(null) // '-'
+   * ```
+   */
   function formatValue(value: unknown): string {
     if (value === null || value === undefined) {
       return '-'
     }
+
     if (Array.isArray(value) && value.every((item) => typeof item === 'string')) {
       return value.join(', ')
     }
+
     if (typeof value === 'object') {
       return JSON.stringify(value, null, 2)
     }
+
     return String(value)
   }
 
+  /**
+   * Enters edit mode for this field, initializing the edit state from the current value.
+   *
+   * @example
+   * ```typescript
+   * startEdit() // opens the inline editor
+   * ```
+   */
   function startEdit() {
     isEditing = true
     editError = ''
@@ -46,6 +68,14 @@
     }
   }
 
+  /**
+   * Cancels the current edit, discarding changes and resetting edit state.
+   *
+   * @example
+   * ```typescript
+   * cancelEdit() // closes editor without saving
+   * ```
+   */
   function cancelEdit() {
     isEditing = false
     editValue = ''
@@ -53,61 +83,90 @@
     selectedOptions = new Set()
   }
 
-  function toggleOption(optionValue: FieldValue) {
+  /**
+   * Toggles selection of a field option, supporting both single and multi-select modes.
+   *
+   * @param optionValue - The option value to toggle.
+   * @example
+   * ```typescript
+   * toggleOption('red') // selects or deselects the 'red' option
+   * ```
+   */
+  function toggleOption(optionValue: PrimitiveFieldValue) {
     if (field?.multiple) {
       if (selectedOptions.has(optionValue)) {
         selectedOptions.delete(optionValue)
       } else {
         selectedOptions.add(optionValue)
       }
+
       selectedOptions = selectedOptions
     } else {
       selectedOptions = new Set([optionValue])
     }
   }
 
-  function parseValue(input: string): FieldValue {
-    input = input.trim()
+  /**
+   * Parses a string input into a typed value based on the field's type.
+   *
+   * @param input - The raw string input to parse.
+   * @example
+   * ```typescript
+   * parseValue('42') // 42 (when field.type is 'number')
+   * parseValue('true') // true (when field.type is 'boolean')
+   * ```
+   */
+  function parseValue(input: string): unknown {
+    const trimmed = input.trim()
 
-    if (input === '' || input === '-') {
+    if (trimmed === '' || trimmed === '-') {
       return null
     }
 
-    if (input.startsWith('{') || input.startsWith('[')) {
+    if (trimmed.startsWith('{') || trimmed.startsWith('[')) {
       try {
-        return JSON.parse(input)
+        return JSON.parse(trimmed)
       } catch {
         throw new Error('Invalid JSON format')
       }
     }
 
     if (field.type === 'boolean') {
-      if (input === 'true') return true
-      if (input === 'false') return false
+      if (trimmed === 'true') return true
+      if (trimmed === 'false') return false
       throw new Error('Boolean must be "true" or "false"')
     }
 
     if (field.type === 'number') {
-      const num = Number(input)
+      const num = Number(trimmed)
       if (isNaN(num)) {
         throw new Error('Invalid number format')
       }
+
       return num
     }
 
-    return input
+    return trimmed
   }
 
+  /**
+   * Commits the edited value via the client responses API and exits edit mode.
+   *
+   * @example
+   * ```typescript
+   * await saveEdit() // saves the current edit value
+   * ```
+   */
   async function saveEdit() {
     try {
-      let newValue: FieldValue
+      let newValue: unknown
 
       if (hasOptions) {
         const values = Array.from(selectedOptions)
         if (field?.multiple) {
           newValue = values
         } else {
-          newValue = values.at(0) ?? null
+          newValue = values[0] ?? null
         }
       } else {
         newValue = parseValue(editValue)
@@ -128,6 +187,14 @@
     }
   }
 
+  /**
+   * Clears the response value for this field via the client responses API.
+   *
+   * @example
+   * ```typescript
+   * handleClear() // removes the response for this field
+   * ```
+   */
   function handleClear() {
     client.responses.clear(field.id)
   }
@@ -135,7 +202,7 @@
 
 <tr>
   <td>
-    <CodeBlock code={field.name} inline />
+    <CodeBlock code={field.key} inline />
   </td>
   <td>
     <Text size="small" weight="semibold">{field.label}</Text>
@@ -143,9 +210,9 @@
   <td>
     {#if isEditing}
       <Stack direction="vertical" gap="small">
-        {#if hasOptions && staticOptions}
+        {#if hasOptions && field?.options}
           <Stack direction="vertical" gap="small">
-            {#each staticOptions as option (option.id)}
+            {#each field.options as option (option.id)}
               <label class="option-label">
                 {#if field.multiple}
                   <input

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

@@ -1,8 +1,9 @@
 <script lang="ts">
-  import type { ResponseListItem, Field } from '@picked/client'
+  /** @file Table displaying all field responses with filtering and clear-all functionality in the devtools panel. */
+  import type { ResponseListItem } from '@picked/client'
   import { getPicked } from '../../../../hooks'
-  import ResponseTableRow from './ResponseTableRow.svelte'
   import { Card, DataTable, EmptyState, Button, RadioGroup, Stack } from '../../ui'
+  import ResponseTableRow from './ResponseTableRow.svelte'
 
   export let responses: ResponseListItem[] = []
 
@@ -10,7 +11,7 @@
 
   let filter = 'set'
 
-  $: fieldsStore = client.fields.listStore
+  const fieldsStore = client.fields.listStore
   $: allFields = $fieldsStore ?? []
 
   $: responseMap = new Map(responses.map((r) => [r.fieldId, r]))
@@ -29,12 +30,20 @@
     return true
   })
 
+  /**
+   * Clears all committed field responses via the client responses API.
+   *
+   * @example
+   * ```typescript
+   * handleClearAll() // removes all responses
+   * ```
+   */
   function handleClearAll() {
     client.responses.clearAll()
   }
 
   const columns = [
-    { key: 'id', header: 'ID' },
+    { key: 'key', header: 'Key' },
     { key: 'field', header: 'Field' },
     { key: 'value', header: 'Value' },
     { key: 'type', header: 'Type' },

package/dist/router/Step.svelte

@@ -13,6 +13,7 @@
 
   const step = {
     id,
+    key: id
   }
 
   const { registerStep, unregisterStep } = getStepRouter()

package/dist/router/StepRouter.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  /** @file Root router component that manages step registration and active step detection via Effector. */
   import { createEvent, createStore, sample } from 'effector'
   import { supportsWindow } from '@picked/client'
   import { getExperience } from '../hooks'
@@ -51,7 +52,7 @@
 
   sample({
     source: { steps: stepsStore, currentStep: currentStepStore },
-    fn: ({ steps, currentStep }) => steps.find((s) => s.id === currentStep?.id) || null,
+    fn: ({ steps, currentStep }) => steps.find((s) => s.id === currentStep?.key) || null,
     target: setActiveStepEvent,
   })
 

package/dist/utils/get-step-fields.d.ts

@@ -0,0 +1,2 @@
+import { Field, Picked } from '@picked/client';
+export declare function getStepFields(client: Picked, fields: Field[]): Promise<Field[]>;

package/dist/utils/get-step-fields.js

@@ -0,0 +1 @@
+import{evaluateRuleLogic as e}from"@picked/client";function t(e){return e.options?.some(e=>`condition`in e)??!1}function n(e){return e.some(e=>e.condition||e.conditionKey||t(e))}async function r(e,t){return t.conditionKey?e.conditions.getByKey(t.conditionKey).getState()?.logic??null:t.condition??null}async function i(i,a){return a.length===0||!n(a)?a:(await Promise.all(a.map(async n=>{let a=await r(i,n);if(!(!a||await e(i,a)))return null;if(!n.options||!t(n))return n;let o=(await Promise.all(n.options.map(async t=>t.condition?await e(i,t.condition)?t:null:t))).filter(e=>e!==null);return o.length===n.options.length?n:o.length===0?null:{...n,options:o}}))).filter(e=>e!==null)}export{i as getStepFields};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@picked/svelte",
-  "version": "0.0.1-dev.1774224866171",
+  "version": "0.0.1-dev.1774244905386",
   "dependencies": {
     "d3": "^7.9.0"
   },
@@ -88,7 +88,7 @@
   },
   "module": "./dist/index.js",
   "peerDependencies": {
-    "@picked/client": "0.0.1-dev.1774224866171",
+    "@picked/client": "0.0.1-dev.1774244905386",
     "effector": "^23.3.0",
     "svelte": "^5.46.4"
   },

package/dist/form/create-form.js

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

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

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

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

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

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

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

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