@picked/svelte 0.0.62-next.8 → 0.0.62

package/dist/components/LazyImage.svelte

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

package/dist/plugins/devtools/DevToolsExperience.svelte

@@ -15,8 +15,12 @@
   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'
@@ -35,21 +39,27 @@
       props: {},
     },
     {
-      id: 'history',
-      label: 'History',
-      component: HistoryEntriesListScreen,
+      id: 'components',
+      label: 'Components',
+      component: ComponentsListScreen,
       props: {},
     },
     {
-      id: 'events',
-      label: 'Events',
-      component: EventsListScreen,
+      id: 'config',
+      label: 'Config',
+      component: ConfigScreen,
       props: {},
     },
     {
-      id: 'responses',
-      label: 'Responses',
-      component: ResponsesListScreen,
+      id: 'content',
+      label: 'Content',
+      component: ContentListScreen,
+      props: {},
+    },
+    {
+      id: 'events',
+      label: 'Events',
+      component: EventsListScreen,
       props: {},
     },
     {
@@ -64,12 +74,6 @@
       component: ExperiencesListScreen,
       props: {},
     },
-    {
-      id: 'predicates',
-      label: 'Predicates',
-      component: PredicatesListScreen,
-      props: {},
-    },
     {
       id: 'features',
       label: 'Features',
@@ -77,9 +81,9 @@
       props: {},
     },
     {
-      id: 'components',
-      label: 'Components',
-      component: ComponentsListScreen,
+      id: 'fields',
+      label: 'Fields',
+      component: FieldsListScreen,
       props: {},
     },
     {
@@ -88,6 +92,30 @@
       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
@@ -118,7 +146,7 @@
         </div>
       </header>
       <section class="main">
-        <Tabs {tabs} initialTab={1} />
+        <Tabs {tabs} initialTab={0} />
       </section>
     </div>
   </div>
@@ -129,6 +157,7 @@
     {/if}
     <button
       class="floating-button"
+      class:has-preview-tag={isPreview}
       onclick={() => experience.open()}
       aria-label="Open Picked Devtools"
       title="Open Picked Devtools"
@@ -323,7 +352,7 @@
   }
 
   .floating-button {
-    border-radius: 0 6px 6px 0;
+    border-radius: 6px;
     background-color: #ffffff;
     display: grid;
     place-items: center;
@@ -337,6 +366,10 @@
     }
   }
 
+  .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,18 +13,21 @@
   export let initialTab = 0
 
   let activeTab = initialTab
+  const tabButtons: (HTMLButtonElement | undefined)[] = []
 
   /**
-   * Sets the active tab to the given index.
+   * Sets the active tab to the given index and scrolls the corresponding button into the
+   * horizontal viewport so keyboard navigation never lands off-screen.
    *
    * @param {number} index - The zero-based tab index to activate.
    * @example
    * ```typescript
-   * activateTab(2) // switches to the third tab
+   * activateTab(2) // switches to the third tab and scrolls it into view
    * ```
    */
   function activateTab(index: number) {
     activeTab = index
+    tabButtons[index]?.scrollIntoView({ inline: 'nearest', block: 'nearest', behavior: 'smooth' })
   }
 
   /**
@@ -66,6 +69,7 @@
   <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}"
@@ -110,6 +114,23 @@
     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/config/ConfigScreen.svelte

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

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

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

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

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

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

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, PrimitiveFieldValue, Field, FieldValue } from '@picked/client'
+  import type { ResponseListItem, Field, FieldValue, JsonValue } 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<PrimitiveFieldValue> = new Set()
+  let selectedOptions: Set<JsonValue> = new Set()
 
   $: hasOptions = Array.isArray(field?.options) && field.options.length > 0
   $: staticOptions = Array.isArray(field?.options) ? field.options : null
@@ -22,7 +22,8 @@
   /**
    * Formats a response value for display, handling arrays, objects, and primitives.
    *
-   * @param value - The response value to format.
+   * @param {unknown} value - The response value to format.
+   * @returns {string} The display string for the value.
    * @example
    * ```typescript
    * formatValue(['a', 'b']) // 'a, b'
@@ -87,13 +88,13 @@
   /**
    * Toggles selection of a field option, supporting both single and multi-select modes.
    *
-   * @param optionValue - The option value to toggle.
+   * @param {JsonValue} optionValue - The option value to toggle.
    * @example
    * ```typescript
    * toggleOption('red') // selects or deselects the 'red' option
    * ```
    */
-  function toggleOption(optionValue: PrimitiveFieldValue) {
+  function toggleOption(optionValue: JsonValue) {
     if (field?.multiple) {
       if (selectedOptions.has(optionValue)) {
         selectedOptions.delete(optionValue)
@@ -110,14 +111,15 @@
   /**
    * Parses a string input into a typed value based on the field's type.
    *
-   * @param input - The raw string input to parse.
+   * @param {string} input - The raw string input to parse.
+   * @returns {FieldValue} The parsed value (null, number, boolean, JSON, or string).
    * @example
    * ```typescript
    * parseValue('42') // 42 (when field.type is 'number')
    * parseValue('true') // true (when field.type is 'boolean')
    * ```
    */
-  function parseValue(input: string): unknown {
+  function parseValue(input: string): FieldValue {
     const trimmed = input.trim()
 
     if (trimmed === '' || trimmed === '-') {
@@ -173,7 +175,7 @@
         newValue = parseValue(editValue)
       }
 
-      const result = await client.responses.commit({ [field.id]: newValue })
+      const result = await client.responses.commit({ [field.key]: newValue })
 
       if (result.errors.length > 0) {
         editError = result.errors[0].userMessage

package/package.json

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