@picked/svelte 0.0.1-dev.1789541668638 → 0.0.1-next.2

package/dist/plugins/devtools/screens/events/EventListItem.svelte

@@ -1,216 +0,0 @@
-<script lang="ts">
-  /** @file Expandable list item row for displaying an event bus history entry in the devtools events screen. */
-  import type { EventBusPayload, EventHistoryEntry } from '@picked/client'
-  import { Badge, Card, CodeBlock, Stack, Text } from '../../ui'
-  import { getPicked } from '../../../../hooks'
-
-  export let event: EventHistoryEntry
-  export let isExpanded: boolean
-  export let onToggle: () => void
-
-  const client = getPicked()
-
-  const eventExpId =
-    'experience' in event.payload && event.payload.experience
-      ? event.payload.experience.experienceId
-      : undefined
-  const eventExperienceStore = client.experiences.getById(eventExpId ?? '')
-  $: eventExpName = eventExpId
-    ? ($eventExperienceStore?.name ?? eventExpId)
-    : '-'
-
-  /**
-   * Formats a Date as a 24-hour time string with milliseconds.
-   *
-   * @param {Date} date - The date to format.
-   * @returns {string} The formatted time string.
-   * @example
-   * ```typescript
-   * formatTime(new Date()) // '14:30:05.123'
-   * ```
-   */
-  function formatTime(date: Date): string {
-    return date.toLocaleTimeString('en-US', {
-      hour12: false,
-      hour: '2-digit',
-      minute: '2-digit',
-      second: '2-digit',
-      fractionalSecondDigits: 3,
-    })
-  }
-
-  interface PayloadField {
-    label: string
-    value: unknown
-  }
-
-  /**
-   * Extracts experience-related fields from an event payload's experience object.
-   *
-   * @param {unknown} exp - The experience object from the event payload.
-   * @returns {PayloadField[]} Extracted experience fields.
-   * @example
-   * ```typescript
-   * getExperienceFields({ id: 'abc', experienceId: 'quiz' })
-   * // [{ label: 'Experience ID', value: 'abc' }, { label: 'Experience Type', value: 'quiz' }]
-   * ```
-   */
-  function getExperienceFields(exp: unknown): PayloadField[] {
-    if (!exp || typeof exp !== 'object') return []
-    const fields: PayloadField[] = []
-    if ('id' in exp && exp.id) fields.push({ label: 'Experience ID', value: exp.id })
-    if ('experienceId' in exp && exp.experienceId)
-      fields.push({ label: 'Experience Type', value: exp.experienceId })
-    return fields
-  }
-
-  /**
-   * Extracts step-related fields from an event payload's step object.
-   *
-   * @param {unknown} step - The step object from the event payload.
-   * @returns {PayloadField[]} Extracted step fields.
-   * @example
-   * ```typescript
-   * getStepFields({ id: 's1', name: 'Welcome' })
-   * // [{ label: 'Step ID', value: 's1' }, { label: 'Step Name', value: 'Welcome' }]
-   * ```
-   */
-  function getStepFields(step: unknown): PayloadField[] {
-    if (!step || typeof step !== 'object'){
-      return []
-    } 
-
-    const fields: PayloadField[] = []
-    if ('key' in step && step.key) { 
-      fields.push({ label: 'Step Key', value: step.key }) 
-    }
-
-    if ('name' in step && step.name) {
-      fields.push({ label: 'Step Name', value: step.name })
-    }
-
-    return fields
-  }
-
-  /** Scalar payload keys to extract and their display labels. JSON-serializable values are stringified. */
-  const SCALAR_KEYS: { key: string; label: string; serialize?: boolean }[] = [
-    { key: 'value', label: 'Value' },
-    { key: 'form', label: 'Form', serialize: true },
-    { key: 'feature', label: 'Feature', serialize: true },
-    { key: 'exception', label: 'Exception', serialize: true },
-    { key: 'version', label: 'Version' },
-  ]
-
-  /**
-   * Extracts scalar (non-nested) fields from an event bus payload.
-   *
-   * @param {EventBusPayload} payload - The event bus payload to extract scalar fields from.
-   * @returns {PayloadField[]} Extracted scalar fields.
-   * @example
-   * ```typescript
-   * getScalarFields({ type: 'step', value: 42 })
-   * // [{ label: 'Value', value: 42 }]
-   * ```
-   */
-  function getScalarFields(payload: EventBusPayload): PayloadField[] {
-    const fields: PayloadField[] = []
-    const record = payload as Record<string, unknown>
-
-    for (const { key, label, serialize } of SCALAR_KEYS) {
-      const raw = record[key]
-      if (raw !== undefined) {
-        fields.push({ label, value: serialize ? JSON.stringify(raw) : raw })
-      }
-    }
-
-    return fields
-  }
-
-  /**
-   * Builds a flat list of display fields from an event bus payload.
-   *
-   * @param {EventBusPayload} payload - The event bus payload to extract fields from.
-   * @returns {PayloadField[]} All extracted fields.
-   * @example
-   * ```typescript
-   * getPayloadFields({ type: 'session', id: 'sess-1' })
-   * // [{ label: 'Type', value: 'session' }, { label: 'Session ID', value: 'sess-1' }]
-   * ```
-   */
-  function getPayloadFields(payload: EventBusPayload): PayloadField[] {
-    const fields: PayloadField[] = [{ label: 'Type', value: payload.type }]
-    fields.push(...getScalarFields(payload))
-
-    if ('experience' in payload && payload.experience) {
-      fields.push(...getExperienceFields(payload.experience))
-    }
-
-    if ('step' in payload && payload.step) {
-      fields.push(...getStepFields(payload.step))
-    }
-
-    if ('id' in payload && payload.id && payload.type === 'session') {
-      fields.push({ label: 'Session ID', value: payload.id })
-    }
-
-    return fields
-  }
-
-  /**
-   * Formats a field value for display as a string.
-   *
-   * @param {unknown} value - The value to format.
-   * @returns {string} The formatted string representation.
-   * @example
-   * ```typescript
-   * formatValue(42) // '42'
-   * formatValue(null) // 'null'
-   * ```
-   */
-  function formatValue(value: unknown): string {
-    if (value === null) return 'null'
-    if (value === undefined) return 'undefined'
-    if (typeof value === 'string') return value
-    if (typeof value === 'number' || typeof value === 'boolean') return String(value)
-    return JSON.stringify(value)
-  }
-</script>
-
-<tr class="event-row" onclick={onToggle}>
-  <td>
-    <span class="expand-icon">
-      {isExpanded ? '▼' : '▶'}
-    </span>
-    <CodeBlock code={formatTime(event.at)} inline />
-  </td>
-  <td>
-    <Badge status="info">{event.payload.type}</Badge>
-  </td>
-  <td>
-    <Text size="small">{eventExpName}</Text>
-  </td>
-  <td>
-    <Text size="caption" color="subdued">
-      {isExpanded ? 'Click to collapse' : 'Click to expand payload'}
-    </Text>
-  </td>
-</tr>
-{#if isExpanded}
-  <tr>
-    <td colspan="4" class="details-cell">
-      <Stack direction="vertical" gap="small">
-        <Text size="small" weight="semibold">Event Payload</Text>
-        <Card>
-          <Stack direction="vertical" gap="small">
-            {#each getPayloadFields(event.payload) as field (field.label)}
-              <Text size="caption" inline>
-                <Text size="caption" weight="semibold" color="subdued" inline>{field.label}:</Text>
-                <CodeBlock code={formatValue(field.value)} inline />
-              </Text>
-            {/each}
-          </Stack>
-        </Card>
-      </Stack>
-    </td>
-  </tr>
-{/if}

package/dist/plugins/devtools/screens/events/EventsListScreen.svelte

@@ -1,18 +0,0 @@
-<script lang="ts">
-  import { getPicked } from '../../../../hooks'
-  import EventsTable from './EventsTable.svelte'
-  import { Divider, Spacer, Stack, Text } from '../../ui'
-
-  const { events } = getPicked()
-</script>
-
-<Stack direction="vertical" gap="none" fill>
-  <EventsTable />
-  <Spacer />
-  <Divider />
-<Stack padding="small">
-    <Text size="caption" color="subdued">
-      {$events.length} events
-    </Text>
-  </Stack>
-</Stack>

package/dist/plugins/devtools/screens/events/EventsTable.svelte

@@ -1,76 +0,0 @@
-<script lang="ts">
-  import { combine, createStore, createEvent, sample } from 'effector'
-  import { getPicked } from '../../../../hooks'
-  import EventListItem from './EventListItem.svelte'
-  import { Card, DataTable, EmptyState, Stack } from '../../ui'
-  import type { EventHistoryEntry } from '@picked/client'
-
-  const { events } = getPicked()
-
-  let expandedRowIds = new Set<number>()
-
-  function toggleRow(eventId: number) {
-    const newSet = new Set(expandedRowIds)
-    if (newSet.has(eventId)) {
-      newSet.delete(eventId)
-    } else {
-      newSet.add(eventId)
-    }
-    expandedRowIds = newSet
-  }
-
-  const sortDirectionStore = createStore<'asc' | 'desc'>('desc')
-  const toggleSortDirection = createEvent<void>()
-  const oppositeSortDirection: Record<'asc' | 'desc', 'asc' | 'desc'> = { asc: 'desc', desc: 'asc' }
-
-  sample({
-    clock: toggleSortDirection,
-    source: sortDirectionStore,
-    fn: (dir) => oppositeSortDirection[dir],
-    target: sortDirectionStore,
-  })
-
-  function sortEvents(history: EventHistoryEntry[], sort: 'asc' | 'desc'): EventHistoryEntry[] {
-    return [...history].sort((a, b) => {
-      const diff = a.at.getTime() - b.at.getTime()
-      return sort === 'asc' ? diff : -diff
-    })
-  }
-
-  const sortedEvents = combine(events, sortDirectionStore, sortEvents)
-
-  const columns = [
-    { key: 'time', header: 'Time', sortable: true },
-    { key: 'eventType', header: 'Event Type' },
-    { key: 'experience', header: 'Experience' },
-    { key: 'actions', header: '' },
-  ]
-
-  function handleSort() {
-    toggleSortDirection()
-  }
-</script>
-
-<Stack padding="medium">
-  <Card sectioned>
-    <DataTable
-      columns={columns}
-      rows={$sortedEvents}
-      sortKey="time"
-      sortDirection={$sortDirectionStore}
-      onSort={handleSort}
-    >
-      {#snippet row(item)}
-        {@const event = item}
-        <EventListItem
-          {event}
-          isExpanded={expandedRowIds.has(event.id)}
-          onToggle={() => toggleRow(event.id)}
-        />
-      {/snippet}
-      {#snippet empty()}
-        <EmptyState message="No events yet. Interact with the page to see events." />
-      {/snippet}
-    </DataTable>
-  </Card>
-</Stack>

package/dist/plugins/devtools/screens/features/FeaturesListScreen.svelte

@@ -1,239 +0,0 @@
-<script lang="ts">
-  import { createEvent, createStore } from 'effector'
-  import type { FeatureBucket } from '@picked/client'
-  import { getPicked, useUnit } from '../../../../hooks'
-  import { Button, Card, CodeBlock, CopyButton, DataTable, EmptyState, Stack, Text } from '../../ui'
-
-  interface FeatureSelection {
-    included: boolean
-    value: string
-  }
-
-  /** A boolean feature's two arms. */
-  const BOOLEAN_VALUES = ['true', 'false']
-
-  /** What every feature's control arm serves. */
-  const CONTROL_VALUE = 'false'
-
-  const { features: { listStore: featuresStore } } = getPicked()
-  const featuresList = useUnit(featuresStore)
-
-  const initSelections = createEvent<FeatureBucket[]>()
-  const featureToggled = createEvent<string>()
-  const valueChanged = createEvent<{ id: string; value: string }>()
-
-  const selectionsStore = createStore<Record<string, FeatureSelection>>({})
-    .on(initSelections, (state, feats) => {
-      const next = { ...state }
-      feats.forEach((feature) => {
-        if (!(feature.id in next)) {
-          next[feature.id] = { included: false, value: defaultValue(feature) }
-        }
-      })
-      return next
-    })
-    .on(featureToggled, (state, id) => ({
-      ...state,
-      [id]: { ...state[id], included: !state[id].included },
-    }))
-    .on(valueChanged, (state, { id, value }) => ({
-      ...state,
-      [id]: { ...state[id], value },
-    }))
-
-  const selections = useUnit(selectionsStore)
-
-  $effect(() => {
-    initSelections($featuresList)
-  })
-
-  /**
-   * The bucket a feature currently serves, or null while it is still undecided.
-   *
-   * @param {FeatureBucket} feature - The feature to read.
-   * @returns {string | null} The bucket as text, or null when the feature is unresolved.
-   * @example getBucketValue(feature) // 'video-hero'
-   */
-  function getBucketValue(feature: FeatureBucket): string | null {
-    return feature.isResolved ? String(feature.getBucket().bucket) : null
-  }
-
-  /**
-   * The buckets a feature can be forced to: a text feature's published arms, or the
-   * two structural arms of a boolean one. A feature of unknown shape answers null,
-   * and the caller takes free text.
-   *
-   * @param {FeatureBucket} feature - The feature to offer overrides for.
-   * @returns {string[] | null} The values to list, or null for a feature of unknown shape.
-   * @example overrideValues(feature) // ['video-hero', 'false']
-   */
-  function overrideValues(feature: FeatureBucket): string[] | null {
-    const variants = feature.variants
-    if (variants && variants.length > 0) {
-      return variants.map((variant) => String(variant.value))
-    }
-
-    // A text feature with no arms, and a feature resolved outside `true`/`false`, are
-    // both of unknown shape.
-    const current = getBucketValue(feature)
-    if (feature.valueType === 'text' || (current !== null && !BOOLEAN_VALUES.includes(current))) {
-      return null
-    }
-
-    return BOOLEAN_VALUES
-  }
-
-  /**
-   * The bucket a feature's override starts on: whatever it currently serves, else its
-   * first arm outside control, so one click on Include forces the treatment.
-   *
-   * @param {FeatureBucket} feature - The feature the selection is being seeded for.
-   * @returns {string} The bucket to preselect, or the empty string when there is none to offer.
-   * @example defaultValue(feature) // 'video-hero'
-   */
-  function defaultValue(feature: FeatureBucket): string {
-    const current = getBucketValue(feature)
-    if (current !== null) {
-      return current
-    }
-
-    const values = overrideValues(feature)
-    if (!values || values.length === 0) {
-      return ''
-    }
-
-    return values.find((value) => value !== CONTROL_VALUE) ?? values[0]
-  }
-
-  const generatedUrl = $derived.by(() => {
-    const url = new URL(window.location.href)
-    url.searchParams.delete('picked-feature')
-    // `searchParams` escapes a value holding a colon or an ampersand, which is what
-    // keeps the round trip exact.
-    $featuresList
-      .filter((feature) => $selections[feature.id]?.included)
-      .forEach((feature) => {
-        url.searchParams.append('picked-feature', `${feature.id}:${$selections[feature.id].value}`)
-      })
-
-    return url.toString()
-  })
-
-  const hasSelections = $derived(Object.values($selections).some((s) => s.included))
-
-  /**
-   * Navigates to the generated URL, which loads this page with the overrides applied.
-   *
-   * @example refreshPage()
-   */
-  function refreshPage() {
-    window.location.href = generatedUrl
-  }
-
-  const columns = [
-    { key: 'include', header: 'Include' },
-    { key: 'feature', header: 'Feature' },
-    { key: 'currentValue', header: 'Current Value' },
-    { key: 'overrideValue', header: 'Override Value' },
-  ]
-</script>
-
-<Stack direction="vertical" gap="medium" padding="medium">
-  <Text size="caption" color="subdued">
-    Override feature flags via URL parameters. Select features below, choose values, then copy the
-    generated URL. Recipients will see the overridden values on page load.
-  </Text>
-
-  <Card sectioned>
-    <DataTable columns={columns} rows={$featuresList}>
-      {#snippet row(item)}
-      {@const feature = item}
-      {@const selection = $selections[feature.id]}
-      {@const currentValue = getBucketValue(feature)}
-      {@const values = overrideValues(feature)}
-      {#if selection}
-        <tr class:selected={selection.included}>
-          <td class="include-cell">
-            <input
-              type="checkbox"
-              data-feature-id={feature.id}
-              checked={selection.included}
-              onchange={() => featureToggled(feature.id)}
-              aria-label="Include {feature.name} in URL"
-            />
-          </td>
-          <td>
-            <Text size="small" weight="medium">{feature.name}</Text>
-            <CodeBlock code={`${feature.id}:${feature.key}`} inline />
-          </td>
-          <td>
-            {#if currentValue !== null}
-              <CodeBlock code={currentValue} inline />
-            {:else}
-              <Button variant="ghost" size="small" onclick={() => feature.getBucket()}>
-                Click to resolve
-              </Button>
-            {/if}
-          </td>
-          <td>
-            {#if values}
-              <select
-                class="inline-select"
-                data-override-for={feature.id}
-                value={selection.value}
-                onchange={(e) => valueChanged({ id: feature.id, value: e.currentTarget.value })}
-                disabled={!selection.included}
-                aria-label="Override value for {feature.name}"
-              >
-                <!-- Keyed by position: two arms may serve the same string. -->
-                {#each values as value, index (index)}
-                  <option {value}>{value}</option>
-                {/each}
-              </select>
-            {:else}
-              <input
-                class="inline-input"
-                type="text"
-                data-override-for={feature.id}
-                value={selection.value}
-                oninput={(e) => valueChanged({ id: feature.id, value: e.currentTarget.value })}
-                disabled={!selection.included}
-                placeholder="value"
-                aria-label="Override value for {feature.name}"
-              />
-            {/if}
-          </td>
-        </tr>
-      {/if}
-    {/snippet}
-      {#snippet empty()}
-        <EmptyState message="No features registered" />
-      {/snippet}
-    </DataTable>
-  </Card>
-
-  <Card>
-    {#snippet header()}
-      <Text size="caption" weight="semibold" color="subdued">GENERATED URL</Text>
-    {/snippet}
-    <Stack direction="vertical" gap="small">
-      <CodeBlock code={generatedUrl} />
-      <Stack direction="horizontal" gap="small" justify="center">
-        <CopyButton text={generatedUrl} label="Copy URL" />
-        <Button
-          variant="secondary"
-          size="small"
-          onclick={refreshPage}
-          disabled={!hasSelections}
-        >
-          Reload
-        </Button>
-      </Stack>
-      {#if !hasSelections}
-        <Text size="caption" color="subdued">
-          Select at least one feature above to add overrides to the URL.
-        </Text>
-      {/if}
-    </Stack>
-  </Card>
-</Stack>