@picked/svelte 0.0.1-dev.1793776638554 → 0.0.1-dev.1793923852884

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 flag' },
-    { 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 feature flags 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>

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

@@ -1,286 +0,0 @@
-<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 { getPicked } from '../../../../hooks'
-  import { Button, Text, CodeBlock, Banner, Stack } from '../../ui'
-  import { readOnlyReasonFromContext } from '../../posture-context'
-
-  export let field: Field
-  export let response: ResponseListItem | null
-
-  const client = getPicked()
-  const readOnlyReason = readOnlyReasonFromContext()
-
-  let isEditing = false
-  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()
-
-  $: hasOptions = Array.isArray(field?.options) && field.options.length > 0
-  $: staticOptions = Array.isArray(field?.options) ? field.options : null
-  $: currentValue = response?.value ?? null
-
-  /**
-   * 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.
-   * @example
-   * ```typescript
-   * formatValue(['a', 'b']) // 'a, b'
-   * formatValue(null) // '-'
-   * ```
-   */
-  function formatValue(value: unknown): string {
-    if (value === null || value === undefined) {
-      return '-'
-    }
-
-    if (Array.isArray(value) && value.every((item) => typeof item === 'string')) {
-      return value.join(', ')
-    }
-
-    if (typeof value === 'object') {
-      return JSON.stringify(value, null, 2)
-    }
-
-    return String(value)
-  }
-
-  /**
-   * Enters edit mode for this field, initializing the edit state from the current value.
-   *
-   * @example
-   * ```typescript
-   * startEdit() // opens the inline editor
-   * ```
-   */
-  function startEdit() {
-    isEditing = true
-    editError = ''
-
-    if (hasOptions) {
-      selectedOptions = new Set()
-      if (Array.isArray(currentValue)) {
-        currentValue.forEach((v) => selectedOptions.add(v))
-      } else if (currentValue !== null && currentValue !== undefined) {
-        selectedOptions.add(currentValue)
-      }
-    } else {
-      editValue = formatValue(currentValue)
-    }
-  }
-
-  /**
-   * Cancels the current edit, discarding changes and resetting edit state.
-   *
-   * @example
-   * ```typescript
-   * cancelEdit() // closes editor without saving
-   * ```
-   */
-  function cancelEdit() {
-    isEditing = false
-    editValue = ''
-    editError = ''
-    selectedOptions = new Set()
-  }
-
-  /**
-   * Toggles selection of a field option, supporting both single and multi-select modes.
-   *
-   * @param {JsonValue} optionValue - The option value to toggle.
-   * @example
-   * ```typescript
-   * toggleOption('red') // selects or deselects the 'red' option
-   * ```
-   */
-  function toggleOption(optionValue: JsonValue) {
-    if (field?.multiple) {
-      if (selectedOptions.has(optionValue)) {
-        selectedOptions.delete(optionValue)
-      } else {
-        selectedOptions.add(optionValue)
-      }
-
-      selectedOptions = selectedOptions
-    } else {
-      selectedOptions = new Set([optionValue])
-    }
-  }
-
-  /**
-   * 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).
-   * @example
-   * ```typescript
-   * parseValue('42') // 42 (when field.type is 'number')
-   * parseValue('true') // true (when field.type is 'boolean')
-   * ```
-   */
-  function parseValue(input: string): FieldValue {
-    const trimmed = input.trim()
-
-    if (trimmed === '' || trimmed === '-') {
-      return null
-    }
-
-    if (trimmed.startsWith('{') || trimmed.startsWith('[')) {
-      try {
-        return JSON.parse(trimmed)
-      } catch {
-        throw new Error('Invalid JSON format')
-      }
-    }
-
-    if (field.type === 'boolean') {
-      if (trimmed === 'true') return true
-      if (trimmed === 'false') return false
-      throw new Error('Boolean must be "true" or "false"')
-    }
-
-    if (field.type === 'number') {
-      const num = Number(trimmed)
-      if (isNaN(num)) {
-        throw new Error('Invalid number format')
-      }
-
-      return num
-    }
-
-    return trimmed
-  }
-
-  /**
-   * Commits the edited value via the client responses API and exits edit mode.
-   *
-   * @example
-   * ```typescript
-   * await saveEdit() // saves the current edit value
-   * ```
-   */
-  async function saveEdit() {
-    try {
-      let newValue: FieldValue
-
-      if (hasOptions) {
-        const values = Array.from(selectedOptions)
-        if (field?.multiple) {
-          newValue = values
-        } else {
-          newValue = values.at(0) ?? null
-        }
-      } else {
-        newValue = parseValue(editValue)
-      }
-
-      const result = await client.responses.commit({ [field.key]: newValue })
-
-      if (result.errors.length > 0) {
-        editError = result.errors[0].userMessage
-        return
-      }
-
-      isEditing = false
-      editError = ''
-      selectedOptions = new Set()
-    } catch (error) {
-      editError = error instanceof Error ? error.message : 'Failed to save'
-    }
-  }
-
-  /**
-   * Clears the response value for this field via the client responses API.
-   *
-   * @example
-   * ```typescript
-   * handleClear() // removes the response for this field
-   * ```
-   */
-  function handleClear() {
-    client.responses.clear(field.key)
-  }
-</script>
-
-<tr>
-  <td>
-    <CodeBlock code={field.key} inline />
-  </td>
-  <td>
-    <Text size="small" weight="semibold">{field.label}</Text>
-  </td>
-  <td>
-    {#if isEditing}
-      <Stack direction="vertical" gap="small">
-        {#if hasOptions && staticOptions}
-          <Stack direction="vertical" gap="small">
-            {#each staticOptions as option (option.id)}
-              <label class="option-label">
-                {#if field.multiple}
-                  <input
-                    type="checkbox"
-                    checked={selectedOptions.has(option.value)}
-                    on:change={() => toggleOption(option.value)}
-                  />
-                {:else}
-                  <input
-                    type="radio"
-                    name="field-{field.id}"
-                    checked={selectedOptions.has(option.value)}
-                    on:change={() => toggleOption(option.value)}
-                  />
-                {/if}
-                <Text size="caption" inline>
-                  {option.label}
-                  {#if option.description}
-                    <Text size="caption" color="subdued" inline>({option.description})</Text>
-                  {/if}
-                </Text>
-              </label>
-            {/each}
-          </Stack>
-        {:else}
-          <textarea
-            bind:value={editValue}
-            rows="3"
-            placeholder="Enter {field.type} value..."
-          ></textarea>
-        {/if}
-        {#if editError}
-          <Banner status="error">{editError}</Banner>
-        {/if}
-      </Stack>
-    {:else if response === null}
-      <Text size="caption" color="subdued">No value set</Text>
-    {:else}
-      <CodeBlock code={formatValue(currentValue)} />
-    {/if}
-  </td>
-  <td>
-    <CodeBlock code="{field.type}{field.multiple ? '[]' : ''}" inline />
-  </td>
-  <td>
-    {#if isEditing}
-      <Stack direction="horizontal" gap="none" align="end">
-        <Button variant="primary" size="small" onclick={saveEdit}>Save</Button>
-        <Button variant="destructive" size="small" onclick={cancelEdit}>Cancel</Button>
-      </Stack>
-    {:else if readOnlyReason !== null}
-      <span title={readOnlyReason} data-testid="devtools-response-read-only">
-        <Text size="caption" color="subdued">Read-only</Text>
-      </span>
-    {:else}
-      <Stack direction="horizontal" gap="none" align="end">
-        <Button variant="secondary" size="small" onclick={startEdit}>
-          {response === null ? 'Set' : 'Edit'}
-        </Button>
-        {#if response !== null}
-          <Button variant="destructive" size="small" onclick={handleClear}>Clear</Button>
-        {/if}
-      </Stack>
-    {/if}
-  </td>
-</tr>

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

@@ -1,12 +0,0 @@
-<script lang="ts">
-  import { getPicked } from '../../../../hooks'
-  import ResponsesTable from './ResponsesTable.svelte'
-
-  const client = getPicked()
-
-  $: responsesStore = client.responses.listStore
-</script>
-
-<div>
-  <ResponsesTable responses={$responsesStore} />
-</div>

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

@@ -1,88 +0,0 @@
-<script lang="ts">
-  /** @file Table displaying all field responses with filtering and clear-all functionality in the devtools panel. */
-  import type { ResponseListItem } from '@picked/client'
-  import { getPicked } from '../../../../hooks'
-  import { Card, DataTable, EmptyState, Button, RadioGroup, Stack } from '../../ui'
-  import ResponseTableRow from './ResponseTableRow.svelte'
-
-  export let responses: ResponseListItem[] = []
-
-  const client = getPicked()
-
-  let filter = 'set'
-
-  const fieldsStore = client.fields.listStore
-  $: allFields = $fieldsStore ?? []
-
-  $: responseMap = new Map(responses.map((r) => [r.fieldKey, r]))
-
-  $: allFieldRows = allFields.map((field) => {
-    const response = responseMap.get(field.key)
-    return {
-      field,
-      response: response || null,
-    }
-  })
-
-  $: fieldRows = allFieldRows.filter((row) => {
-    if (filter === 'set') return row.response !== null
-    if (filter === 'unset') return row.response === null
-    return true
-  })
-
-  /**
-   * Clears all committed field responses via the client responses API.
-   *
-   * @example
-   * ```typescript
-   * handleClearAll() // removes all responses
-   * ```
-   */
-  function handleClearAll() {
-    client.responses.clearAll()
-  }
-
-  const columns = [
-    { key: 'key', header: 'Key' },
-    { key: 'field', header: 'Field' },
-    { key: 'value', header: 'Value' },
-    { key: 'type', header: 'Type' },
-    { key: 'actions', header: 'Actions' },
-  ]
-
-  const filterOptions = [
-    { value: 'all', label: 'All' },
-    { value: 'set', label: 'Set (0)' },
-    { value: 'unset', label: 'Unset (0)' },
-  ]
-
-  $: filterOptions[1] = { value: 'set', label: `Set (${responses.length})` }
-  $: filterOptions[2] = { value: 'unset', label: `Unset (${allFields.length - responses.length})` }
-</script>
-
-<Stack padding="medium">
-  <Card sectioned>
-    <Stack direction="horizontal" gap="small" align="space-between" justify="center" padding="medium">
-      <RadioGroup
-        label="Show"
-        name="filter"
-        options={filterOptions}
-        value={filter}
-        onchange={(val) => { filter = val }}
-        orientation="horizontal"
-      />
-      {#if responses.length > 0}
-        <Button variant="destructive" size="small" onclick={handleClearAll}>Clear All</Button>
-      {/if}
-    </Stack>
-    <DataTable columns={columns} rows={fieldRows}>
-      {#snippet row(item)}
-        {@const rowData = item}
-        <ResponseTableRow field={rowData.field} response={rowData.response} />
-      {/snippet}
-      {#snippet empty()}
-        <EmptyState message="No fields registered yet" />
-      {/snippet}
-    </DataTable>
-  </Card>
-</Stack>