@picked/svelte 0.0.62-next.12 → 0.0.62-next.2

package/dist/components/LazyImage.svelte

@@ -88,7 +88,7 @@
       if (isConvincelyDomain(url)) {
         const encodedUrl = encodeURIComponent(url.toString())
         const optimizedSize = findClosestSize(targetWidth)
-        return `https://img.picked-content.com/_next/image?url=${encodedUrl}&w=${optimizedSize}&q=75`
+        return `https://img.convincely.io/_next/image?url=${encodedUrl}&w=${optimizedSize}&q=75`
       }
 
       // For other domains, return the original URL

package/dist/hooks/events.js

@@ -1 +1 @@
-import{getExperience as e,getPicked as t}from"./client.js";import{attach as n}from"effector";import{trackRecommendationPresentEvent as r}from"@picked/analytics";var i=()=>{let{session:i,projectId:a}=t(),o=e();return n({source:{config:o.configStore,step:o.currentStepStore,sessionSnapshot:i.store},async effect({config:e,step:t,sessionSnapshot:n},i){if(!t)throw Error(`Cannot track recommendation present event: missing experience step.`);return r({projectId:a,experience:{id:o.experienceId,title:e.name},sessionId:n.id,identifiers:n.identifiers,isUser:n.isUser,step:t,productList:i})}})};export{i as getTrackRecommendationPresentEvent};
+import{getExperience as e,getPicked as t}from"./client.js";import{attach as n}from"effector";import{trackRecommendationPresentEvent as r}from"@picked/analytics";var i=()=>{let{session:i,projectId:a}=t(),o=e();return n({source:{config:o.configStore,step:o.currentStepStore},async effect({config:e,step:t},n){if(!i||!t)throw Error(`Cannot track recommendation present event: missing session or experience data.`);return r({projectId:a,experience:{id:o.experienceId,title:e.name},sessionId:i.id,identifiers:i.identifiers,isUser:i.isUser,step:t,productList:n})}})};export{i as getTrackRecommendationPresentEvent};

package/dist/hooks/index.d.ts

@@ -3,8 +3,7 @@ export { getPicked, getExperience } from './client';
 export { getPredicate, getPredicateResult } from './predicate';
 export { getFeature, getFeatureResult } from './feature';
 export { getAction, getActionResult } from './action';
-export { getStep, setStepContext, getStepContent } from './step';
-export { getContent } from './content';
+export { getStep, setStepContext } from './step';
 export { useUnit, getContextScope, setContextScope } from './stores';
 export { createSessionStorageStore, createLocalStorageStore } from './storage.js';
 export { getTrackRecommendationPresentEvent } from './events';

package/dist/hooks/index.js

@@ -1 +1 @@
-import{getExperience as e,getPicked as t}from"./client.js";import{getPredicate as n,getPredicateResult as r}from"./predicate.js";import{getFeature as i,getFeatureResult as a}from"./feature.js";import{getAction as o,getActionResult as s}from"./action.js";import{getStep as c,getStepContent as l,setStepContext as u}from"./step.js";import{getContent as d}from"./content.js";import{getContextScope as f,setContextScope as p,useUnit as m}from"./stores.js";import{createLocalStorageStore as h,createSessionStorageStore as g}from"./storage.js";import{getTrackRecommendationPresentEvent as _}from"./events.js";import{createQuery as v,queryCache as y,queryPresets as b}from"./create-query/index.js";export{h as createLocalStorageStore,v as createQuery,g as createSessionStorageStore,o as getAction,s as getActionResult,d as getContent,f as getContextScope,e as getExperience,i as getFeature,a as getFeatureResult,t as getPicked,n as getPredicate,r as getPredicateResult,c as getStep,l as getStepContent,_ as getTrackRecommendationPresentEvent,y as queryCache,b as queryPresets,p as setContextScope,u as setStepContext,m as useUnit};
+import{getExperience as e,getPicked as t}from"./client.js";import{getPredicate as n,getPredicateResult as r}from"./predicate.js";import{getFeature as i,getFeatureResult as a}from"./feature.js";import{getAction as o,getActionResult as s}from"./action.js";import{getStep as c,setStepContext as l}from"./step.js";import{getContextScope as u,setContextScope as d,useUnit as f}from"./stores.js";import{createLocalStorageStore as p,createSessionStorageStore as m}from"./storage.js";import{getTrackRecommendationPresentEvent as h}from"./events.js";import{createQuery as g,queryCache as _,queryPresets as v}from"./create-query/index.js";export{p as createLocalStorageStore,g as createQuery,m as createSessionStorageStore,o as getAction,s as getActionResult,u as getContextScope,e as getExperience,i as getFeature,a as getFeatureResult,t as getPicked,n as getPredicate,r as getPredicateResult,c as getStep,h as getTrackRecommendationPresentEvent,_ as queryCache,v as queryPresets,d as setContextScope,l as setStepContext,f as useUnit};

package/dist/hooks/step.d.ts

@@ -1,15 +1,10 @@
 import { Store } from 'effector';
-import { Content, ExperienceStep } from '@picked/client';
+import { ExperienceStep } from '@picked/client';
 import { FormInstance, FormField } from '../form/create-form.svelte';
 export interface StepContext extends FormInstance {
     step: Store<ExperienceStep>;
     /** Directly accessible fields with current response values — usable without a form. */
     fields: Store<FormField[]>;
-    /**
-     * Reactive store of the current step's CMS layout content. Resolves the step's
-     * `layoutContentId` against `client.contents` and stays reactive.
-     */
-    layoutContentStore: Store<Content | null>;
     isActive: Store<boolean>;
     /** @deprecated Use `isActive` instead. */
     isActiveStep: Store<boolean>;
@@ -17,31 +12,13 @@ export interface StepContext extends FormInstance {
 /**
  * Creates and sets step context in the Svelte context tree.
  *
- * @param {string} stepKey - The step key.
- * @returns {StepContext} The created step context.
+ * @param stepKey - The step key.
  * @example setStepContext('step-1')
  */
 export declare function setStepContext(stepKey: string): StepContext;
 /**
  * Retrieves the step context from the Svelte context tree.
  *
- * @returns {StepContext} The current step context.
  * @example getStep()
  */
 export declare function getStep(): StepContext;
-/**
- * Returns a Svelte/Effector store that yields the current step's resolved CMS content
- * data, or `null` when no content is registered for the step's `layoutContentId`.
- * Subscribers automatically receive updates when content is registered or replaced.
- *
- * @returns {Store<Record<string, unknown> | null>} A store of the Content record's `data`.
- * @example
- * ```svelte
- * <script>
- *   import { getStepContent } from '@picked/svelte'
- *   const content = getStepContent()
- * </script>
- * <h1>{$content?.headline ?? ''}</h1>
- * ```
- */
-export declare function getStepContent(): Store<Record<string, unknown> | null>;

package/dist/hooks/step.js

@@ -1 +1 @@
-import{STEP_CONTEXT_KEY as e}from"../context.js";import{getPicked as t}from"./client.js";import{getStepRouter as n}from"../router/context.js";import{combine as r}from"effector";import{getContext as i,setContext as a}from"svelte";import{createForm as o}from"../form/create-form.svelte";function s(i){let s=t(),{activeStep:c}=n(),l=c.map(e=>e?.key===i),u=s.steps.listStore.map(e=>e.find(e=>e.key===i)??{id:i,key:i,name:``,fieldKeys:[]}),d=o(i,u.map(e=>e.name),u.map(e=>e.fieldKeys));return a(e,{step:u,layoutContentStore:r(u,s.contents.indexStore,(e,t)=>e.layoutContentId?t[e.layoutContentId]??null:null,{skipVoid:!1}),isActive:l,isActiveStep:l,...d})}function c(){return i(e)}function l(){let{layoutContentStore:e}=c();return e.map(e=>e?.data??null,{skipVoid:!1})}export{c as getStep,l as getStepContent,s as setStepContext};
+import{STEP_CONTEXT_KEY as e}from"../context.js";import{getPicked 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(r){let o=t(),{activeStep:s}=n(),c=s.map(e=>e?.key===r),l=o.steps.listStore.map(e=>e.find(e=>e.key===r)??{id:r,key:r,name:``,fieldKeys:[]});return i(e,{step:l,isActive:c,isActiveStep:c,...a(r,l.map(e=>e.name),l.map(e=>e.fieldKeys))})}function s(){return r(e)}export{s as getStep,o as setStepContext};

package/dist/plugins/devtools/DevToolsExperience.svelte

@@ -15,12 +15,8 @@
   import ComponentsListScreen from './screens/components/ComponentsListScreen.svelte'
   import FrameworksListScreen from './screens/frameworks/FrameworksListScreen.svelte'
   import ProjectScreen from './screens/project/ProjectScreen.svelte'
-  import ConfigScreen from './screens/config/ConfigScreen.svelte'
-  import IdentityScreen from './screens/identity/IdentityScreen.svelte'
   import HistoryEntriesListScreen from './screens/history/HistoryEntriesListScreen.svelte'
   import ResponsesListScreen from './screens/responses/ResponsesListScreen.svelte'
-  import FieldsListScreen from './screens/fields/FieldsListScreen.svelte'
-  import ContentListScreen from './screens/content/ContentListScreen.svelte'
   import FeaturesListScreen from './screens/features/FeaturesListScreen.svelte'
   import EventsListScreen from './screens/events/EventsListScreen.svelte'
   import PickedIcon from './PickedIcon.svelte'
@@ -39,21 +35,9 @@
       props: {},
     },
     {
-      id: 'components',
-      label: 'Components',
-      component: ComponentsListScreen,
-      props: {},
-    },
-    {
-      id: 'config',
-      label: 'Config',
-      component: ConfigScreen,
-      props: {},
-    },
-    {
-      id: 'content',
-      label: 'Content',
-      component: ContentListScreen,
+      id: 'history',
+      label: 'History',
+      component: HistoryEntriesListScreen,
       props: {},
     },
     {
@@ -62,6 +46,12 @@
       component: EventsListScreen,
       props: {},
     },
+    {
+      id: 'responses',
+      label: 'Responses',
+      component: ResponsesListScreen,
+      props: {},
+    },
     {
       id: 'experience-instances',
       label: 'Experience Instances',
@@ -74,6 +64,12 @@
       component: ExperiencesListScreen,
       props: {},
     },
+    {
+      id: 'predicates',
+      label: 'Predicates',
+      component: PredicatesListScreen,
+      props: {},
+    },
     {
       id: 'features',
       label: 'Features',
@@ -81,9 +77,9 @@
       props: {},
     },
     {
-      id: 'fields',
-      label: 'Fields',
-      component: FieldsListScreen,
+      id: 'components',
+      label: 'Components',
+      component: ComponentsListScreen,
       props: {},
     },
     {
@@ -92,30 +88,6 @@
       component: FrameworksListScreen,
       props: {},
     },
-    {
-      id: 'history',
-      label: 'History',
-      component: HistoryEntriesListScreen,
-      props: {},
-    },
-    {
-      id: 'identity',
-      label: 'Identity',
-      component: IdentityScreen,
-      props: {},
-    },
-    {
-      id: 'predicates',
-      label: 'Predicates',
-      component: PredicatesListScreen,
-      props: {},
-    },
-    {
-      id: 'responses',
-      label: 'Responses',
-      component: ResponsesListScreen,
-      props: {},
-    },
   ]
 
   const isOpen = experience.isOpenStore
@@ -146,7 +118,7 @@
         </div>
       </header>
       <section class="main">
-        <Tabs {tabs} initialTab={0} />
+        <Tabs {tabs} initialTab={1} />
       </section>
     </div>
   </div>
@@ -157,7 +129,6 @@
     {/if}
     <button
       class="floating-button"
-      class:has-preview-tag={isPreview}
       onclick={() => experience.open()}
       aria-label="Open Picked Devtools"
       title="Open Picked Devtools"
@@ -352,7 +323,7 @@
   }
 
   .floating-button {
-    border-radius: 6px;
+    border-radius: 0 6px 6px 0;
     background-color: #ffffff;
     display: grid;
     place-items: center;
@@ -366,10 +337,6 @@
     }
   }
 
-  .floating-button.has-preview-tag {
-    border-radius: 0 6px 6px 0;
-  }
-
   .preview-tag {
     display: flex;
     align-items: center;

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

@@ -13,21 +13,18 @@
   export let initialTab = 0
 
   let activeTab = initialTab
-  const tabButtons: (HTMLButtonElement | undefined)[] = []
 
   /**
-   * Sets the active tab to the given index and scrolls the corresponding button into the
-   * horizontal viewport so keyboard navigation never lands off-screen.
+   * Sets the active tab to the given index.
    *
    * @param {number} index - The zero-based tab index to activate.
    * @example
    * ```typescript
-   * activateTab(2) // switches to the third tab and scrolls it into view
+   * activateTab(2) // switches to the third tab
    * ```
    */
   function activateTab(index: number) {
     activeTab = index
-    tabButtons[index]?.scrollIntoView({ inline: 'nearest', block: 'nearest', behavior: 'smooth' })
   }
 
   /**
@@ -69,7 +66,6 @@
   <div role="tablist" tabindex="0" on:keydown={handleKeydown} class="tab-list">
     {#each tabs as tab, i (tab.id)}
       <button
-        bind:this={tabButtons[i]}
         role="tab"
         id="tab-{tab.id}"
         aria-controls="panel-{tab.id}"
@@ -114,23 +110,6 @@
     border-bottom: 1px solid var(--color-gray-200);
     flex-shrink: 0;
     overflow-x: auto;
-    overflow-y: hidden;
-    scrollbar-width: thin;
-    scrollbar-color: var(--color-gray-300) transparent;
-    scroll-behavior: smooth;
-  }
-
-  .tab-list::-webkit-scrollbar {
-    height: 6px;
-  }
-
-  .tab-list::-webkit-scrollbar-thumb {
-    background-color: var(--color-gray-300);
-    border-radius: var(--radius-full);
-  }
-
-  .tab-list::-webkit-scrollbar-track {
-    background-color: transparent;
   }
 
   .tab-button {

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

@@ -1,6 +1,6 @@
 <script lang="ts">
   /** @file Editable table row for a single field response in the devtools responses screen. */
-  import type { ResponseListItem, Field, FieldValue, JsonValue } from '@picked/client'
+  import type { ResponseListItem, PrimitiveFieldValue, Field } from '@picked/client'
   import { getPicked } from '../../../../hooks'
   import { Button, Text, CodeBlock, Banner, Stack } from '../../ui'
 
@@ -13,7 +13,7 @@
   let editValue = ''
   let editError = ''
   // eslint-disable-next-line svelte/prefer-svelte-reactivity -- Set is reassigned for Svelte reactivity via `selectedOptions = selectedOptions`
-  let selectedOptions: Set<JsonValue> = 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
@@ -22,8 +22,7 @@
   /**
    * Formats a response value for display, handling arrays, objects, and primitives.
    *
-   * @param {unknown} value - The response value to format.
-   * @returns {string} The display string for the value.
+   * @param value - The response value to format.
    * @example
    * ```typescript
    * formatValue(['a', 'b']) // 'a, b'
@@ -88,13 +87,13 @@
   /**
    * Toggles selection of a field option, supporting both single and multi-select modes.
    *
-   * @param {JsonValue} optionValue - The option value to toggle.
+   * @param optionValue - The option value to toggle.
    * @example
    * ```typescript
    * toggleOption('red') // selects or deselects the 'red' option
    * ```
    */
-  function toggleOption(optionValue: JsonValue) {
+  function toggleOption(optionValue: PrimitiveFieldValue) {
     if (field?.multiple) {
       if (selectedOptions.has(optionValue)) {
         selectedOptions.delete(optionValue)
@@ -111,15 +110,14 @@
   /**
    * Parses a string input into a typed value based on the field's type.
    *
-   * @param {string} input - The raw string input to parse.
-   * @returns {FieldValue} The parsed value (null, number, boolean, JSON, or string).
+   * @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): FieldValue {
+  function parseValue(input: string): unknown {
     const trimmed = input.trim()
 
     if (trimmed === '' || trimmed === '-') {
@@ -175,7 +173,7 @@
         newValue = parseValue(editValue)
       }
 
-      const result = await client.responses.commit({ [field.key]: newValue })
+      const result = await client.responses.commit({ [field.id]: newValue })
 
       if (result.errors.length > 0) {
         editError = result.errors[0].userMessage
@@ -199,7 +197,7 @@
    * ```
    */
   function handleClear() {
-    client.responses.clear(field.key)
+    client.responses.clear(field.id)
   }
 </script>
 

package/dist/router/StepRouter.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   /** @file Root router component that manages step registration and active step detection via Effector. */
-  import { combine, createEvent, createStore } from 'effector'
+  import { createEvent, createStore, sample } from 'effector'
+  import { supportsWindow } from '@picked/client'
   import { getExperience } from '../hooks'
   import { setStepRouter, type Step } from './context'
 
@@ -8,24 +9,57 @@
 
   const { currentStepStore } = experience
 
+  const activeStepStore = createStore<Step | null>(null)
+  let hasActiveStep = false
   const stepsStore = createStore<Step[]>([])
 
-  const registerStep = createEvent<Step>()
-  const unregisterStep = createEvent<Step>()
+  const registerStepEvent = createEvent<Step>()
+  const unregisterStepEvent = createEvent<Step>()
+  const setActiveStepEvent = createEvent<Step | null>()
 
-  stepsStore
-    .on(registerStep, (state, step) => [...state, step])
-    .on(unregisterStep, (state, step) => state.filter((s) => s !== step))
+  stepsStore.on(registerStepEvent, (state, step) => [...state, step])
+  stepsStore.on(unregisterStepEvent, (state, step) => state.filter((s) => s !== step))
 
-  const activeStepStore = combine(
-    { steps: stepsStore, currentStep: currentStepStore },
-    ({ steps, currentStep }) => steps.find((s) => s.key === currentStep?.key) ?? null,
-  )
+  sample({
+    source: setActiveStepEvent,
+    filter: (step) => step !== null,
+    target: activeStepStore,
+  })
+
+  const registerStep = (step: Step) => {
+    // todo: getIsSSR context
+
+    if (!supportsWindow()) {
+      // In SSR we should set the activeStep immediately if it is a match.
+      // If there are more Routes being registered after a match is found,
+      // we just skip them.
+      if (hasActiveStep) return
+
+      const isMatchingStep = step.key === currentStepStore.getState()?.key
+
+      if (isMatchingStep) {
+        setActiveStepEvent(step)
+        hasActiveStep = true
+      }
+    } else {
+      registerStepEvent(step)
+    }
+  }
+
+  const unregisterStep = (step: Step) => {
+    unregisterStepEvent(step)
+  }
+
+  sample({
+    source: { steps: stepsStore, currentStep: currentStepStore },
+    fn: ({ steps, currentStep }) => steps.find((s) => s.key === currentStep?.key) || null,
+    target: setActiveStepEvent,
+  })
 
   setStepRouter({
     registerStep,
     unregisterStep,
-    activeStep: activeStepStore,
+    activeStep: activeStepStore.map((val) => val),
   })
 </script>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@picked/svelte",
-  "version": "0.0.62-next.12",
+  "version": "0.0.62-next.2",
   "dependencies": {
     "d3": "^7.9.0"
   },
@@ -88,7 +88,7 @@
   },
   "module": "./dist/index.js",
   "peerDependencies": {
-    "@picked/client": "0.0.62-next.12",
+    "@picked/client": "0.0.62-next.2",
     "effector": "^23.3.0",
     "svelte": "^5.46.4"
   },

package/dist/hooks/content.d.ts

@@ -1,18 +0,0 @@
-import { Store } from 'effector';
-import { Content } from '@picked/client';
-/**
- * Returns the registry store for a content id, mirroring `getField(key)`. Resolves
- * the Picked client via `getPicked()` and returns `client.contents.getById(id)`.
- *
- * @param {string} id - The content record id to look up.
- * @returns {Store<Content | null>} The registry store; `null` until content is registered.
- * @example
- * ```svelte
- * <script>
- *   import { getContent } from '@picked/svelte'
- *   const banner = getContent('lc_banner')
- * </script>
- * <h1>{$banner?.data?.headline ?? ''}</h1>
- * ```
- */
-export declare function getContent(id: string): Store<Content | null>;

package/dist/hooks/content.js

@@ -1 +0,0 @@
-import{getPicked as e}from"./client.js";function t(t){return e().contents.getById(t)}export{t as getContent};

package/dist/plugins/devtools/screens/config/ConfigScreen.svelte

@@ -1,153 +0,0 @@
-<script lang="ts">
-  /** @file Devtools screen for the resolved Picked client configuration and reactive lifecycle state. */
-  import { getPicked } from '../../../../hooks'
-  import { Badge, Card, CodeBlock, DataTable, EmptyState, Stack, Text } from '../../ui'
-
-  const client = getPicked()
-  const lifecycleStageStore = client.lifecycleStageStore
-  const readyStore = client.readyStore
-  const preconditionPassedStore = client.preconditionPassedStore
-  const conditionPassedStore = client.conditionPassedStore
-
-  const searchParamEntries = Object.entries(client.searchParams ?? {}).map(([key, value]) => ({
-    key,
-    value: Array.isArray(value) ? value.join(', ') : String(value ?? ''),
-  }))
-
-  const staticRows = [
-    { label: 'Project ID', value: client.projectId },
-    { label: 'API URL', value: client.apiUrl },
-    { label: 'Dashboard URL', value: client.dashboardUrl },
-    { label: 'Documentation URL', value: client.documentationSiteUrl },
-    { label: 'Data source', value: client.dataSource === null ? '—' : JSON.stringify(client.dataSource) },
-  ]
-
-  const configColumns = [
-    { key: 'label', header: 'Property' },
-    { key: 'value', header: 'Value' },
-  ]
-
-  const searchParamColumns = [
-    { key: 'key', header: 'Key' },
-    { key: 'value', header: 'Value' },
-  ]
-
-  /**
-   * Maps a lifecycle stage to a Badge status colour.
-   *
-   * @param {'idle' | 'starting' | 'ready' | 'failed'} stage - The current lifecycle stage.
-   * @returns {'default' | 'info' | 'success' | 'error'} The Badge status variant.
-   * @example
-   * ```typescript
-   * stageStatus('ready') // 'success'
-   * ```
-   */
-  function stageStatus(
-    stage: 'idle' | 'starting' | 'ready' | 'failed',
-  ): 'default' | 'info' | 'success' | 'error' {
-    if (stage === 'ready') return 'success'
-    if (stage === 'starting') return 'info'
-    if (stage === 'failed') return 'error'
-    return 'default'
-  }
-
-  /**
-   * Maps a tri-state boolean gate result to a Badge status colour.
-   *
-   * @param {boolean | undefined} value - The gate value: true (passed), false (blocked), or undefined (unevaluated).
-   * @returns {'default' | 'success' | 'error'} The Badge status variant.
-   * @example
-   * ```typescript
-   * gateStatus(undefined) // 'default'
-   * gateStatus(true) // 'success'
-   * ```
-   */
-  function gateStatus(value: boolean | undefined): 'default' | 'success' | 'error' {
-    if (value === true) return 'success'
-    if (value === false) return 'error'
-    return 'default'
-  }
-
-  /**
-   * Renders a tri-state boolean gate as a short label.
-   *
-   * @param {boolean | undefined} value - The gate value.
-   * @returns {string} The label text.
-   * @example
-   * ```typescript
-   * gateLabel(undefined) // 'pending'
-   * ```
-   */
-  function gateLabel(value: boolean | undefined): string {
-    if (value === true) return 'passed'
-    if (value === false) return 'blocked'
-    return 'pending'
-  }
-</script>
-
-<Stack direction="vertical" gap="medium" padding="medium">
-  <Text size="caption" color="subdued">
-    The resolved configuration and live lifecycle state for this Picked client instance.
-  </Text>
-
-  <Card sectioned>
-    {#snippet header()}
-      <Text size="caption" weight="semibold" color="subdued">CONFIGURATION</Text>
-    {/snippet}
-    <DataTable columns={configColumns} rows={staticRows}>
-      {#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>
-
-  <Card sectioned>
-    {#snippet header()}
-      <Text size="caption" weight="semibold" color="subdued">LIFECYCLE</Text>
-    {/snippet}
-    <Stack direction="vertical" gap="small" padding="medium">
-      <Stack direction="horizontal" gap="small">
-        <Text size="small" weight="medium">Stage:</Text>
-        <Badge status={stageStatus($lifecycleStageStore)} size="small">{$lifecycleStageStore}</Badge>
-      </Stack>
-      <Stack direction="horizontal" gap="small">
-        <Text size="small" weight="medium">Ready:</Text>
-        <Badge status={$readyStore ? 'success' : 'default'} size="small">{$readyStore ? 'true' : 'false'}</Badge>
-      </Stack>
-      <Stack direction="horizontal" gap="small">
-        <Text size="small" weight="medium">Precondition:</Text>
-        <Badge status={gateStatus($preconditionPassedStore)} size="small">
-          {gateLabel($preconditionPassedStore)}
-        </Badge>
-      </Stack>
-      <Stack direction="horizontal" gap="small">
-        <Text size="small" weight="medium">Condition:</Text>
-        <Badge status={gateStatus($conditionPassedStore)} size="small">
-          {gateLabel($conditionPassedStore)}
-        </Badge>
-      </Stack>
-    </Stack>
-  </Card>
-
-  <Card sectioned>
-    {#snippet header()}
-      <Text size="caption" weight="semibold" color="subdued">
-        PICKED SEARCH PARAMS ({searchParamEntries.length})
-      </Text>
-    {/snippet}
-    <DataTable columns={searchParamColumns} rows={searchParamEntries}>
-      {#snippet row(entry)}
-        <tr>
-          <td><CodeBlock code={entry.key} inline /></td>
-          <td><CodeBlock code={entry.value} inline /></td>
-        </tr>
-      {/snippet}
-      {#snippet empty()}
-        <EmptyState message="No picked-* search params on the current URL" />
-      {/snippet}
-    </DataTable>
-  </Card>
-</Stack>

package/dist/plugins/devtools/screens/content/ContentListScreen.svelte

@@ -1,89 +0,0 @@
-<script lang="ts">
-  /** @file Devtools screen listing CMS content records registered with the client. */
-  import type { Content } from '@picked/client'
-  import { getPicked } from '../../../../hooks'
-  import { Badge, Card, CodeBlock, DataTable, EmptyState, ExpandableRow, Stack, Text } from '../../ui'
-
-  const client = getPicked()
-  const contentsStore = client.contents.listStore
-
-  let expandedId: string | null = null
-
-  const columns = [
-    { key: 'id', header: 'ID' },
-    { key: 'keys', header: 'Top-level keys' },
-  ]
-
-  /**
-   * Returns the top-level keys of a content record's `data` object, used to give a quick
-   * shape preview in the row summary without expanding.
-   *
-   * @param {Content} content - The content record.
-   * @returns {string[]} The data object's top-level keys.
-   * @example
-   * ```typescript
-   * dataKeys({ id: 'c1', data: { headline: 'hi' } }) // ['headline']
-   * ```
-   */
-  function dataKeys(content: Content): string[] {
-    return Object.keys(content.data ?? {})
-  }
-
-  /**
-   * Pretty-prints the content record's `data` object for use inside a multi-line CodeBlock.
-   *
-   * @param {Content} content - The content record.
-   * @returns {string} A two-space-indented JSON representation of `data`.
-   * @example
-   * ```typescript
-   * formatData({ id: 'c1', data: { a: 1 } }) // '{\n  "a": 1\n}'
-   * ```
-   */
-  function formatData(content: Content): string {
-    return JSON.stringify(content.data, null, 2)
-  }
-</script>
-
-<Stack direction="vertical" gap="medium" padding="medium">
-  <Text size="caption" color="subdued">
-    Content records registered with the client by the active content loader.
-  </Text>
-
-  <Card sectioned>
-    <DataTable {columns} rows={$contentsStore}>
-      {#snippet row(content)}
-        {@const expanded = expandedId === content.id}
-        {@const keys = dataKeys(content)}
-        <ExpandableRow
-          {expanded}
-          onToggle={() => { expandedId = expanded ? null : content.id }}
-          colspan={columns.length}
-        >
-          {#snippet summary()}
-            <td><CodeBlock code={content.id} inline /></td>
-            <td>
-              {#if keys.length > 0}
-                <Stack direction="horizontal" gap="small" wrap={true}>
-                  {#each keys as key (key)}
-                    <Badge status="default" size="small">{key}</Badge>
-                  {/each}
-                </Stack>
-              {:else}
-                <Text size="small" color="subdued">—</Text>
-              {/if}
-            </td>
-          {/snippet}
-          {#snippet details()}
-            <Stack direction="vertical" gap="small">
-              <Text size="caption" weight="semibold" color="subdued">DATA</Text>
-              <CodeBlock code={formatData(content)} />
-            </Stack>
-          {/snippet}
-        </ExpandableRow>
-      {/snippet}
-      {#snippet empty()}
-        <EmptyState message="No content registered" />
-      {/snippet}
-    </DataTable>
-  </Card>
-</Stack>

package/dist/plugins/devtools/screens/fields/FieldTableRow.svelte

@@ -1,276 +0,0 @@
-<script lang="ts">
-  /** @file Expandable row presenting a single registered field's schema in the devtools fields screen. */
-  import type { Field } from '@picked/client'
-  import { Badge, CodeBlock, ExpandableRow, Stack, Text } from '../../ui'
-
-  export let field: Field
-  export let columnCount: number
-
-  let expanded = false
-
-  $: optionsList = Array.isArray(field.options) ? field.options : []
-  $: hasOptions = optionsList.length > 0
-  $: hasCondition = field.condition !== undefined && field.condition !== null
-  $: hasValidation = field.validation !== undefined && field.validation !== null
-  $: hasDefault = field.defaultValue !== undefined
-  $: doNotTrack = Boolean(field.policies?.doNotTrackValue)
-  $: doNotStore = Boolean(field.policies?.doNotStoreValue)
-  $: hasDetails =
-    hasCondition ||
-    hasValidation ||
-    hasOptions ||
-    Boolean(field.description) ||
-    Boolean(field.helpText) ||
-    Boolean(field.placeholder) ||
-    Boolean(field.label && field.label !== field.name) ||
-    Boolean(field.id)
-
-  /**
-   * Returns a Badge status colour for a given field type so each type renders consistently.
-   *
-   * @param {Field['type']} type - The field's primitive type.
-   * @returns {'default' | 'success' | 'warning' | 'info'} The Badge status variant to apply.
-   * @example
-   * ```typescript
-   * typeStatus('number') // 'success'
-   * ```
-   */
-  function typeStatus(type: Field['type']): 'default' | 'success' | 'warning' | 'info' {
-    if (type === 'text') return 'info'
-    if (type === 'number') return 'success'
-    if (type === 'boolean') return 'warning'
-    return 'default'
-  }
-
-  /**
-   * Renders an arbitrary value as a short, single-line preview for use in compact table cells.
-   * Strings are returned unquoted, primitives are stringified, and objects/arrays are JSON-encoded
-   * and truncated.
-   *
-   * @param {unknown} value - The value to preview.
-   * @param {number} [maxLength] - Maximum character length before the preview is truncated.
-   * @returns {string} The short preview string, or `'—'` when the value is null/undefined.
-   * @example
-   * ```typescript
-   * previewValue({ foo: 'bar' }) // '{"foo":"bar"}'
-   * previewValue(null) // '—'
-   * ```
-   */
-  function previewValue(value: unknown, maxLength = 48): string {
-    if (value === null || value === undefined) return '—'
-
-    let str: string
-    if (typeof value === 'string') {
-      str = value
-    } else if (typeof value === 'object') {
-      str = JSON.stringify(value)
-    } else {
-      str = String(value)
-    }
-
-    if (str.length > maxLength) return `${str.slice(0, maxLength - 1)}…`
-    return str
-  }
-
-  /**
-   * Pretty-prints a JSON-serializable value for use inside a multi-line CodeBlock.
-   *
-   * @param {unknown} value - The value to format.
-   * @returns {string} A two-space-indented JSON representation.
-   * @example
-   * ```typescript
-   * formatJson({ a: 1 }) // '{\n  "a": 1\n}'
-   * ```
-   */
-  function formatJson(value: unknown): string {
-    return JSON.stringify(value, null, 2)
-  }
-
-  /**
-   * Renders a `FieldOption.value` (which may be any JSON-serializable shape across field types)
-   * as a short, copyable code string.
-   *
-   * @param {unknown} value - The option's underlying value.
-   * @returns {string} The string to display inside an inline CodeBlock.
-   * @example
-   * ```typescript
-   * formatOptionValue('us') // 'us'
-   * formatOptionValue({ id: 1 }) // '{"id":1}'
-   * ```
-   */
-  function formatOptionValue(value: unknown): string {
-    if (typeof value === 'string') return value
-    return JSON.stringify(value)
-  }
-</script>
-
-<ExpandableRow
-  {expanded}
-  onToggle={() => { if (hasDetails) expanded = !expanded }}
-  colspan={columnCount}
->
-  {#snippet summary()}
-    <td><CodeBlock code={field.key} inline /></td>
-    <td>
-      <Stack direction="vertical" gap="none">
-        <Text size="small" weight="medium">{field.name}</Text>
-        {#if field.label && field.label !== field.name}
-          <Text size="caption" color="subdued">{field.label}</Text>
-        {/if}
-      </Stack>
-    </td>
-    <td><Badge status={typeStatus(field.type)} size="small">{field.type}</Badge></td>
-    <td>
-      <Stack direction="horizontal" gap="small">
-        {#if field.multiple}
-          <Badge status="default" size="small">multiple</Badge>
-        {/if}
-        {#if field.required}
-          <Badge status="warning" size="small">required</Badge>
-        {/if}
-        {#if doNotTrack}
-          <Badge status="error" size="small">no-track</Badge>
-        {/if}
-        {#if doNotStore}
-          <Badge status="error" size="small">no-store</Badge>
-        {/if}
-      </Stack>
-    </td>
-    <td>
-      {#if hasDefault}
-        <CodeBlock code={previewValue(field.defaultValue)} inline />
-      {:else}
-        <Text size="small" color="subdued">—</Text>
-      {/if}
-    </td>
-    <td>
-      {#if hasOptions}
-        <Badge status="info" size="small">{optionsList.length}</Badge>
-      {:else}
-        <Text size="small" color="subdued">—</Text>
-      {/if}
-    </td>
-    <td>
-      <Stack direction="horizontal" gap="small">
-        {#if hasCondition}
-          <Badge status="info" size="small">condition</Badge>
-        {/if}
-        {#if hasValidation}
-          <Badge status="info" size="small">validation</Badge>
-        {/if}
-        {#if !hasCondition && !hasValidation}
-          <Text size="small" color="subdued">—</Text>
-        {/if}
-      </Stack>
-    </td>
-  {/snippet}
-
-  {#snippet details()}
-    <Stack direction="vertical" gap="medium">
-      <Stack direction="vertical" gap="small">
-        <Text size="caption" weight="semibold" color="subdued">IDENTITY</Text>
-        <Stack direction="horizontal" gap="medium">
-          <Text size="small"><strong>id:</strong></Text>
-          <CodeBlock code={field.id} inline />
-        </Stack>
-      </Stack>
-
-      {#if field.description || field.helpText || field.placeholder}
-        <Stack direction="vertical" gap="small">
-          <Text size="caption" weight="semibold" color="subdued">COPY</Text>
-          {#if field.description}
-            <Text size="small"><strong>description:</strong> {field.description}</Text>
-          {/if}
-          {#if field.helpText}
-            <Text size="small"><strong>help text:</strong> {field.helpText}</Text>
-          {/if}
-          {#if field.placeholder}
-            <Text size="small"><strong>placeholder:</strong> {field.placeholder}</Text>
-          {/if}
-        </Stack>
-      {/if}
-
-      {#if hasDefault}
-        <Stack direction="vertical" gap="small">
-          <Text size="caption" weight="semibold" color="subdued">DEFAULT VALUE</Text>
-          <CodeBlock code={formatJson(field.defaultValue)} />
-        </Stack>
-      {/if}
-
-      {#if hasOptions}
-        <Stack direction="vertical" gap="small">
-          <Text size="caption" weight="semibold" color="subdued">OPTIONS ({optionsList.length})</Text>
-          <table class="options-table">
-            <thead>
-              <tr>
-                <th>Label</th>
-                <th>Value</th>
-                <th>ID</th>
-                <th>Description</th>
-              </tr>
-            </thead>
-            <tbody>
-              {#each optionsList as option (option.id)}
-                <tr>
-                  <td>{option.label}</td>
-                  <td><CodeBlock code={formatOptionValue(option.value)} inline /></td>
-                  <td><CodeBlock code={option.id} inline /></td>
-                  <td>
-                    {#if option.description}
-                      {option.description}
-                    {:else}
-                      <Text size="small" color="subdued">—</Text>
-                    {/if}
-                  </td>
-                </tr>
-              {/each}
-            </tbody>
-          </table>
-        </Stack>
-      {/if}
-
-      {#if hasCondition}
-        <Stack direction="vertical" gap="small">
-          <Text size="caption" weight="semibold" color="subdued">CONDITION</Text>
-          <CodeBlock code={formatJson(field.condition)} />
-        </Stack>
-      {/if}
-
-      {#if hasValidation}
-        <Stack direction="vertical" gap="small">
-          <Text size="caption" weight="semibold" color="subdued">VALIDATION</Text>
-          <CodeBlock code={formatJson(field.validation)} />
-        </Stack>
-      {/if}
-    </Stack>
-  {/snippet}
-</ExpandableRow>
-
-<style>
-  .options-table {
-    width: 100%;
-    border-collapse: collapse;
-    background-color: var(--color-white);
-    border: 1px solid var(--color-gray-200);
-    border-radius: var(--radius-md);
-    overflow: hidden;
-  }
-
-  .options-table th,
-  .options-table td {
-    padding: var(--space-1-5) var(--space-2);
-    text-align: left;
-    font-size: var(--text-xs);
-    border-bottom: 1px solid var(--color-gray-200);
-  }
-
-  .options-table tr:last-child td {
-    border-bottom: 0;
-  }
-
-  .options-table th {
-    font-weight: var(--font-medium);
-    color: var(--color-gray-700);
-    background-color: var(--color-gray-50);
-  }
-</style>

package/dist/plugins/devtools/screens/fields/FieldsListScreen.svelte

@@ -1,12 +0,0 @@
-<script lang="ts">
-  /** @file Devtools screen that lists every field registered with the SDK. */
-  import { getPicked } from '../../../../hooks'
-  import FieldsTable from './FieldsTable.svelte'
-
-  const client = getPicked()
-  const fieldsStore = client.fields.listStore
-</script>
-
-<div>
-  <FieldsTable fields={$fieldsStore} />
-</div>

package/dist/plugins/devtools/screens/fields/FieldsTable.svelte

@@ -1,78 +0,0 @@
-<script lang="ts">
-  /** @file Table of registered fields with type filtering for the devtools fields screen. */
-  import type { Field } from '@picked/client'
-  import { Card, DataTable, EmptyState, RadioGroup, Stack } from '../../ui'
-  import FieldTableRow from './FieldTableRow.svelte'
-
-  export let fields: Field[] = []
-
-  type TypeFilter = 'all' | Field['type']
-
-  let filter: TypeFilter = 'all'
-
-  $: counts = {
-    all: fields.length,
-    text: fields.filter((f) => f.type === 'text').length,
-    number: fields.filter((f) => f.type === 'number').length,
-    boolean: fields.filter((f) => f.type === 'boolean').length,
-    object: fields.filter((f) => f.type === 'object').length,
-  }
-
-  $: visibleFields = filter === 'all' ? fields : fields.filter((f) => f.type === filter)
-
-  const columns = [
-    { key: 'key', header: 'Key' },
-    { key: 'name', header: 'Name' },
-    { key: 'type', header: 'Type' },
-    { key: 'flags', header: 'Flags' },
-    { key: 'default', header: 'Default' },
-    { key: 'options', header: 'Options' },
-    { key: 'rules', header: 'Rules' },
-  ]
-
-  $: filterOptions = [
-    { value: 'all', label: `All (${counts.all})` },
-    { value: 'text', label: `Text (${counts.text})` },
-    { value: 'number', label: `Number (${counts.number})` },
-    { value: 'boolean', label: `Boolean (${counts.boolean})` },
-    { value: 'object', label: `Object (${counts.object})` },
-  ]
-
-  /**
-   * Updates the active type filter when the user picks a different radio option.
-   *
-   * @param {string} value - The chosen filter value, expected to be `'all'` or a `Field['type']`.
-   * @example
-   * ```typescript
-   * handleFilterChange('number') // narrows the table to number fields
-   * ```
-   */
-  function handleFilterChange(value: string): void {
-    if (value === 'all' || value === 'text' || value === 'number' || value === 'boolean' || value === 'object') {
-      filter = value
-    }
-  }
-</script>
-
-<Stack padding="medium">
-  <Card sectioned>
-    <Stack direction="horizontal" gap="small" align="space-between" justify="center" padding="medium">
-      <RadioGroup
-        label="Filter by type"
-        name="field-type-filter"
-        options={filterOptions}
-        value={filter}
-        onchange={handleFilterChange}
-        orientation="horizontal"
-      />
-    </Stack>
-    <DataTable {columns} rows={visibleFields}>
-      {#snippet row(field)}
-        <FieldTableRow {field} columnCount={columns.length} />
-      {/snippet}
-      {#snippet empty()}
-        <EmptyState message="No fields registered" />
-      {/snippet}
-    </DataTable>
-  </Card>
-</Stack>

package/dist/plugins/devtools/screens/identity/IdentityScreen.svelte

@@ -1,66 +0,0 @@
-<script lang="ts">
-  /** @file Devtools screen for the current visitor session — id, isUser flag, and identifiers map. */
-  import { getPicked } from '../../../../hooks'
-  import { Badge, Card, CodeBlock, DataTable, EmptyState, Stack, Text } from '../../ui'
-
-  const client = getPicked()
-  const sessionStore = client.session.store
-
-  $: identifierEntries = Object.entries($sessionStore.identifiers ?? {})
-
-  const overviewColumns = [
-    { key: 'label', header: 'Property' },
-    { key: 'value', header: 'Value' },
-  ]
-
-  const identifierColumns = [
-    { key: 'key', header: 'Key' },
-    { key: 'value', header: 'Value' },
-  ]
-</script>
-
-<Stack direction="vertical" gap="medium" padding="medium">
-  <Text size="caption" color="subdued">
-    The current visitor session as tracked by the SDK. Persisted to localStorage when available.
-  </Text>
-
-  <Card sectioned>
-    <DataTable columns={overviewColumns} rows={[{ label: 'Session ID', value: $sessionStore.id }]}>
-      {#snippet row(item)}
-        <tr>
-          <td><Text size="small" weight="medium">{item.label}</Text></td>
-          <td><CodeBlock code={item.value} inline /></td>
-        </tr>
-      {/snippet}
-    </DataTable>
-    <Stack direction="horizontal" gap="small" padding="medium">
-      <Text size="small" weight="medium">Identified as user:</Text>
-      {#if $sessionStore.isUser === true}
-        <Badge status="success" size="small">true</Badge>
-      {:else if $sessionStore.isUser === false}
-        <Badge status="default" size="small">false</Badge>
-      {:else}
-        <Badge status="default" size="small">unset</Badge>
-      {/if}
-    </Stack>
-  </Card>
-
-  <Card sectioned>
-    {#snippet header()}
-      <Text size="caption" weight="semibold" color="subdued">
-        IDENTIFIERS ({identifierEntries.length})
-      </Text>
-    {/snippet}
-    <DataTable columns={identifierColumns} rows={identifierEntries}>
-      {#snippet row(entry)}
-        <tr>
-          <td><CodeBlock code={entry[0]} inline /></td>
-          <td><CodeBlock code={entry[1]} inline /></td>
-        </tr>
-      {/snippet}
-      {#snippet empty()}
-        <EmptyState message="No identifiers set" />
-      {/snippet}
-    </DataTable>
-  </Card>
-</Stack>