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

package/dist/_virtual/preload-helper.js

@@ -0,0 +1 @@
+const p="modulepreload",v=function(l){return"/"+l},u={},y=function(d,c,E){let i=Promise.resolve();if(c&&c.length>0){let f=function(e){return Promise.all(e.map(o=>Promise.resolve(o).then(s=>({status:"fulfilled",value:s}),s=>({status:"rejected",reason:s}))))};document.getElementsByTagName("link");const r=document.querySelector("meta[property=csp-nonce]"),t=r?.nonce||r?.getAttribute("nonce");i=f(c.map(e=>{if(e=v(e),e in u)return;u[e]=!0;const o=e.endsWith(".css"),s=o?'[rel="stylesheet"]':"";if(document.querySelector(`link[href="${e}"]${s}`))return;const n=document.createElement("link");if(n.rel=o?"stylesheet":p,o||(n.as="script"),n.crossOrigin="",n.href=e,t&&n.setAttribute("nonce",t),document.head.appendChild(n),o)return new Promise((m,h)=>{n.addEventListener("load",m),n.addEventListener("error",()=>h(new Error(`Unable to preload CSS for ${e}`)))})}))}function a(r){const t=new Event("vite:preloadError",{cancelable:!0});if(t.payload=r,window.dispatchEvent(t),!t.defaultPrevented)throw r}return i.then(r=>{for(const t of r||[])t.status==="rejected"&&a(t.reason);return d().catch(a)})};export{y as __vitePreload};

package/dist/component.d.ts

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

package/dist/form/index.d.ts

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

package/dist/hooks/field.d.ts

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

package/dist/plugins/devtools/DevToolsExperience.svelte

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

package/dist/plugins/devtools/PickedIcon.svelte

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

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?.label || ''}</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

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

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

@@ -1,7 +1,15 @@
 import { Plugin } from '@picked/client';
+export interface SvelteDevtoolsPluginOptions {
+    /**
+     * When `true`, the devtools experience launches automatically on page load.
+     * When `false`, devtools can only be opened via the Picked Chrome extension.
+     *
+     * @default false
+     */
+    enabled?: boolean;
+}
 /**
- * Enables Svelte component rendering compatability.
- * This plugin registers the Svelte framework and allows rendering Svelte components
- * with the client's experience data.
+ * 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.
  */
-export declare const svelteDevtoolsPlugin: () => Plugin[];
+export declare const svelteDevtoolsPlugin: (options?: SvelteDevtoolsPluginOptions) => Plugin[];

package/dist/plugins/devtools/plugin.js

@@ -1 +1 @@
-import{supportsDocument as c,isPickedRoot as a}from"@picked/client";import{createExperiencePlugin as g}from"@picked/client/plugins/create-experience";import{devtoolsExperience as r}from"./experience.js";const m=()=>[{name:"svelte-devtools",setup:t=>{if(!c())return;const s=t.experienceInstances.getByExperienceId(r.id),i=e=>{if(!(!e.target||!("tagName"in e.target)||typeof e.target.tagName!="string")&&e.key==="."&&!["INPUT","TEXTAREA"].includes(e.target.tagName)&&!(e.currentTarget instanceof HTMLElement&&a(e.currentTarget))&&!(e.target instanceof HTMLElement&&a(e.target))){const n=s.getState();n.length>0?n.forEach(o=>o.toggleOpen()):t.launchExperienceById(r.id)}};document.addEventListener("keydown",i),t.eventBus.watch(e=>{e.type==="ready"&&t.launchExperienceById(r.id)})}},g({experiences:[r]})];export{m as svelteDevtoolsPlugin};
+import{__vitePreload as t}from"../../_virtual/preload-helper.js";import{lazyComponent as n}from"@picked/client";import{createExperience as r,createExperiencePlugin as i}from"@picked/client/plugins/create-experience";import{adaptSvelteComponent as l}from"../../component.js";const d=o=>{const e=r({id:"devtools",name:"Picked Devtools",condition:o?.enabled??!1,initializeOpen:!1,targets:[{selector:"body",placement:"append"}],component:l(n(()=>t(()=>import("./DevToolsExperience.svelte"),[])))});return e.addStep({label:"Tools"}),[i({experiences:[e]})]};export{d as svelteDevtoolsPlugin};

package/dist/plugins/devtools/screens/components/ComponentsListScreen.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()
 
@@ -12,15 +12,19 @@
   ]
 </script>
 
-<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>
+<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>

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 { DataTable, EmptyState } from '../../ui'
+  import { Card, DataTable, EmptyState, Stack } from '../../ui'
   import type { EventHistoryEntry } from '@picked/client'
 
   const { events } = getPicked()
@@ -51,22 +51,26 @@
   }
 </script>
 
-<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>
+<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>

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

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

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, Text, CodeBlock, Stack } from '../../ui'
+  import { Button, Card, Text, CodeBlock, Stack } from '../../ui'
 
   const client = getPicked()
   export let experience: ExperienceStore
@@ -10,34 +10,38 @@
 </script>
 
 <Stack direction="vertical" gap="medium" padding="medium">
-  <div>
+  <Stack direction="horizontal" gap="small">
     <Button variant="primary" size="small" onclick={() => client.launchExperienceById(experience.id)}>
       Launch experience
     </Button>
-  </div>
+  </Stack>
 
-  <div>
-    <Text weight="semibold">Type</Text>
-    <Text>{$config.name}</Text>
-  </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">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>
+      <div>
+        <Text weight="semibold">Decision logic</Text>
+        <CodeBlock code={JSON.stringify($config.decisionLogic, null, 2)} />
+      </div>
+    </Stack>
+  </Card>
 </Stack>

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

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