@picked/svelte 0.0.1-dev.1772073931707 → 0.0.1-dev.1772085077346

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

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

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

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { getPicked } from '../../../../hooks'
-  import { DataTable, EmptyState } from '../../ui'
+  import { Card, DataTable, EmptyState, Stack } from '../../ui'
 
   const client = getPicked()
 
@@ -9,14 +9,18 @@
   const columns = [{ key: 'name', header: 'Name' }]
 </script>
 
-<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>
+<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>

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 { DataTable, EmptyState } from '../../ui'
+  import { Card, DataTable, EmptyState, Stack } from '../../ui'
 
   export let historyEntries: HistoryEntry[]
 
@@ -14,12 +14,16 @@
   ]
 </script>
 
-<DataTable columns={columns} rows={historyEntries}>
-  {#snippet row(item)}
-    {@const historyEntry = item}
-    <HistoryEntryListItem {historyEntry} />
-  {/snippet}
-  {#snippet empty()}
-    <EmptyState message="No history entries" />
-  {/snippet}
-</DataTable>
+<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>

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

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { getPicked } from '../../../../hooks'
-  import { DataTable, EmptyState } from '../../ui'
+  import { Card, DataTable, EmptyState, Stack } from '../../ui'
 
   const client = getPicked()
 
@@ -9,14 +9,18 @@
   const columns = [{ key: 'name', header: 'Name' }]
 </script>
 
-<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>
+<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>

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

@@ -1 +1,47 @@
-<p>todo: project</p>
+<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>

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { ResponseListItem, PrimitiveFieldValue, Field, FieldValue } from '@picked/client'
+  import type { ResponseListItem, PrimitiveFieldValue, Field } from '@picked/client'
   import { getPicked } from '../../../../hooks'
   import { Button, Text, CodeBlock, Banner, Stack } from '../../ui'
 
@@ -11,10 +11,9 @@
   let isEditing = false
   let editValue = ''
   let editError = ''
-  let selectedOptions: Set<FieldValue> = new Set()
+  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
 
   function formatValue(value: unknown): string {
@@ -53,7 +52,7 @@
     selectedOptions = new Set()
   }
 
-  function toggleOption(optionValue: FieldValue) {
+  function toggleOption(optionValue: PrimitiveFieldValue) {
     if (field?.multiple) {
       if (selectedOptions.has(optionValue)) {
         selectedOptions.delete(optionValue)
@@ -66,7 +65,7 @@
     }
   }
 
-  function parseValue(input: string): FieldValue {
+  function parseValue(input: string): unknown {
     input = input.trim()
 
     if (input === '' || input === '-') {
@@ -100,14 +99,14 @@
 
   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)
@@ -143,9 +142,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

@@ -2,7 +2,7 @@
   import type { ResponseListItem, Field } from '@picked/client'
   import { getPicked } from '../../../../hooks'
   import ResponseTableRow from './ResponseTableRow.svelte'
-  import { DataTable, EmptyState, Button, RadioGroup, Stack } from '../../ui'
+  import { Card, DataTable, EmptyState, Button, RadioGroup, Stack } from '../../ui'
 
   export let responses: ResponseListItem[] = []
 
@@ -51,27 +51,29 @@
   $: filterOptions[2] = { value: 'unset', label: `Unset (${allFields.length - responses.length})` }
 </script>
 
-<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 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>

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

@@ -18,6 +18,7 @@
     type?: 'button' | 'submit' | 'reset'
     fullWidth?: boolean
     href?: string
+    target?: string
     onclick?: (event: MouseEvent) => void
   }
 
@@ -31,6 +32,7 @@
     type = 'button',
     fullWidth = false,
     href,
+    target,
     onclick,
   }: Props = $props()
 
@@ -43,6 +45,8 @@
     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="TRow">
+<script lang="ts" generics="T">
   import type { Snippet } from 'svelte'
 
   interface Column {
@@ -9,8 +9,8 @@
 
   interface Props {
     columns: Column[]
-    rows: TRow[]
-    row: Snippet<[TRow, number]>
+    rows: T[]
+    row: Snippet<[T, number]>
     empty?: Snippet
     sortKey?: string | null
     sortDirection?: 'asc' | 'desc'
@@ -131,4 +131,14 @@
   :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/dist/render/browser.js

@@ -1 +1 @@
-import{mount as a}from"svelte";import{isValidAdaptedComponent as u}from"../component.js";import{CLIENT_CONTEXT_KEY as d,EXPERIENCE_CONTEXT_KEY as E}from"../context.js";import{mergeArrays as p}from"../utils/array.js";import f from"../utils/ErrorBoundary.svelte";function y(n,e){return new Map([[d,n],[E,e]])}const g=async(n,e,s,o,i)=>{if(!u(e))throw new Error("The component is invalid.");const c=p(e.style?.sheets,i.stylesheets),m=p(e.style?.css,i.css);c.length&&c.forEach(r=>{const t=document.createElement("link");t.setAttribute("rel","stylesheet"),t.setAttribute("href",r),t.setAttribute("type","text/css"),t.setAttribute("picked-injected","true"),n.appendChild(t)}),m.length&&m.forEach(r=>{const t=document.createElement("style");t.textContent=r,t.setAttribute("type","text/css"),t.setAttribute("picked-injected","true"),n.appendChild(t)});const l=r=>{a(f,{target:n,props:{component:r,componentProps:{client:s,experience:o}},context:y(s,o)})};if(e.component instanceof Promise){const{default:r}=await e.component;l(r);return}l(e.component)},x=n=>{};export{y as createContext,g as renderSvelteComponent,x as unRenderSvelteComponent};
+import{isLazyLoader as p}from"@picked/client";import{mount as u}from"svelte";import{isValidAdaptedComponent as d}from"../component.js";import{CLIENT_CONTEXT_KEY as f,EXPERIENCE_CONTEXT_KEY as E}from"../context.js";import{mergeArrays as l}from"../utils/array.js";import y from"../utils/ErrorBoundary.svelte";function C(n,t){return new Map([[f,n],[E,t]])}const k=async(n,t,s,i,c)=>{if(!d(t))throw new Error("The component is invalid.");const m=l(t.style?.sheets,c.stylesheets),a=l(t.style?.css,c.css);m.length&&m.forEach(r=>{const e=document.createElement("link");e.setAttribute("rel","stylesheet"),e.setAttribute("href",r),e.setAttribute("type","text/css"),e.setAttribute("picked-injected","true"),n.appendChild(e)}),a.length&&a.forEach(r=>{const e=document.createElement("style");e.textContent=r,e.setAttribute("type","text/css"),e.setAttribute("picked-injected","true"),n.appendChild(e)});const o=r=>{u(y,{target:n,props:{component:r,componentProps:{client:s,experience:i}},context:C(s,i)})};if(p(t.component)){const{default:r}=await t.component.load();o(r);return}if(t.component instanceof Promise){const{default:r}=await t.component;o(r);return}o(t.component)},N=n=>{};export{C as createContext,k as renderSvelteComponent,N as unRenderSvelteComponent};

package/dist/render/server.js

@@ -1 +1 @@
-import{render as a}from"svelte/server";import{isValidAdaptedComponent as E}from"../component.js";import{CLIENT_CONTEXT_KEY as p,EXPERIENCE_CONTEXT_KEY as f}from"../context.js";import{mergeArrays as n}from"../utils/array.js";function d(t,s){return new Map([[p,t],[f,s]])}const C=async(t,s,e,o)=>{if(!E(t))throw new Error("The component is invalid.");const h=n(t.style?.sheets,o.stylesheets),m=n(t.style?.css,o.css),r=t.component instanceof Promise?a((await t.component).default,{props:{client:s,experience:e},context:d(s,e)}):a(t.component,{props:{client:s,experience:e},context:d(s,e)});return{stylesheets:h,css:m,head:r.head,html:r.html,body:r.body,hashes:r.hashes}};export{d as createContext,C as staticRenderSvelteComponent};
+import{isLazyLoader as m}from"@picked/client";import{render as l}from"svelte/server";import{isValidAdaptedComponent as h}from"../component.js";import{CLIENT_CONTEXT_KEY as f,EXPERIENCE_CONTEXT_KEY as p}from"../context.js";import{mergeArrays as n}from"../utils/array.js";function c(e,t){return new Map([[f,e],[p,t]])}const w=async(e,t,o,a)=>{if(!h(e))throw new Error("The component is invalid.");const d=n(e.style?.sheets,a.stylesheets),i=n(e.style?.css,a.css);let s;m(e.component)?s=(await e.component.load()).default:e.component instanceof Promise?s=(await e.component).default:s=e.component;const r=l(s,{props:{client:t,experience:o},context:c(t,o)});return{stylesheets:d,css:i,head:r.head,html:r.html,body:r.body,hashes:r.hashes}};export{c as createContext,w as staticRenderSvelteComponent};

package/package.json

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

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

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

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

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

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

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

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

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

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

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

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

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