@picked/svelte 0.0.62-next.9 → 0.0.63-next.1

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>