@picked/svelte 0.0.1-dev.1788925875333 → 0.0.1-next.1

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
-  $: tracked = Boolean(field.policies?.trackValue)
-  $: stored = Boolean(field.policies?.storeValue)
-  $: 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 tracked}
-          <Badge status="success" size="small">track</Badge>
-        {/if}
-        {#if stored}
-          <Badge status="success" size="small">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>