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

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

@@ -1,280 +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'
-
-  export let field: Field
-  export let response: ResponseListItem | null
-
-  const client = getPicked()
-
-  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}
-      <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>

package/dist/plugins/devtools/ui/actions/Button.svelte

@@ -1,175 +0,0 @@
-<!--
-  @paired-component apps/dashboard/src/shared/ui/actions/button.tsx
-  @design-parity Props, variants, sizes, and visual output must stay in sync
-  with the Dashboard React counterpart. When modifying this component, replicate
-  the change in the paired React component to maintain visual and behavioral parity.
--->
-<script lang="ts">
-  import type { Snippet } from 'svelte'
-  import Spinner from '../feedback/Spinner.svelte'
-
-  interface Props {
-    children: Snippet
-    icon?: Snippet
-    variant?: 'primary' | 'secondary' | 'destructive' | 'ghost'
-    size?: 'small' | 'medium' | 'large'
-    disabled?: boolean
-    loading?: boolean
-    type?: 'button' | 'submit' | 'reset'
-    fullWidth?: boolean
-    href?: string
-    target?: string
-    onclick?: (event: MouseEvent) => void
-  }
-
-  let {
-    children,
-    icon,
-    variant = 'primary',
-    size = 'medium',
-    disabled = false,
-    loading = false,
-    type = 'button',
-    fullWidth = false,
-    href,
-    target,
-    onclick,
-  }: Props = $props()
-
-  const isDisabled = $derived(disabled || loading)
-</script>
-
-{#if href}
-  <a
-    class="button variant-{variant} size-{size}"
-    class:full-width={fullWidth}
-    class:is-disabled={isDisabled}
-    {href}
-    {target}
-    rel={target === '_blank' ? 'noopener noreferrer' : undefined}
-    aria-disabled={isDisabled || undefined}
-    tabindex={isDisabled ? -1 : undefined}
-    onclick={isDisabled
-      ? (e: MouseEvent) => e.preventDefault()
-      : onclick}
-  >
-    {#if loading}
-      <Spinner size="small" color="current" label="Loading" />
-    {:else if icon}
-      {@render icon()}
-    {/if}
-    {@render children()}
-  </a>
-{:else}
-  <button
-    class="button variant-{variant} size-{size}"
-    class:full-width={fullWidth}
-    {type}
-    disabled={isDisabled}
-    {onclick}
-  >
-    {#if loading}
-      <Spinner size="small" color="current" label="Loading" />
-    {:else if icon}
-      {@render icon()}
-    {/if}
-    {@render children()}
-  </button>
-{/if}
-
-<style>
-  .button {
-    position: relative;
-    display: inline-flex;
-    cursor: pointer;
-    align-items: center;
-    justify-content: center;
-    gap: var(--space-2);
-    border-radius: var(--radius-md);
-    font-weight: var(--font-medium);
-    font-family: inherit;
-    line-height: 1.5;
-    border: none;
-    text-decoration: none;
-    transition: background-color 0.15s ease, color 0.15s ease;
-  }
-
-  .button:focus-visible {
-    outline: var(--ring-width) solid var(--ring-color);
-    outline-offset: var(--ring-offset);
-  }
-
-  /* Variants */
-  .variant-primary {
-    background-color: var(--color-blue-600);
-    color: var(--color-white);
-  }
-  .variant-primary:hover:not(:disabled):not(.is-disabled) {
-    background-color: var(--color-blue-700);
-  }
-  .variant-primary:active:not(:disabled):not(.is-disabled) {
-    background-color: var(--color-blue-800);
-  }
-
-  .variant-secondary {
-    background-color: var(--color-gray-100);
-    color: var(--color-gray-900);
-  }
-  .variant-secondary:hover:not(:disabled):not(.is-disabled) {
-    background-color: var(--color-gray-200);
-  }
-  .variant-secondary:active:not(:disabled):not(.is-disabled) {
-    background-color: var(--color-gray-300);
-  }
-
-  .variant-destructive {
-    background-color: var(--color-red-600);
-    color: var(--color-white);
-  }
-  .variant-destructive:hover:not(:disabled):not(.is-disabled) {
-    background-color: var(--color-red-700);
-  }
-  .variant-destructive:active:not(:disabled):not(.is-disabled) {
-    background-color: var(--color-red-800);
-  }
-
-  .variant-ghost {
-    background-color: transparent;
-    color: var(--color-gray-700);
-  }
-  .variant-ghost:hover:not(:disabled):not(.is-disabled) {
-    background-color: var(--color-gray-100);
-  }
-  .variant-ghost:active:not(:disabled):not(.is-disabled) {
-    background-color: var(--color-gray-200);
-  }
-
-  /* Sizes */
-  .size-small {
-    padding: var(--space-1) var(--space-2-5);
-    font-size: var(--text-sm);
-  }
-  .size-medium {
-    padding: var(--space-1-5) var(--space-3);
-    font-size: var(--text-sm);
-  }
-  .size-large {
-    padding: var(--space-2) var(--space-5);
-    font-size: var(--text-base);
-  }
-
-  /* States */
-  .button:disabled,
-  .is-disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  a.is-disabled {
-    pointer-events: none;
-  }
-
-  .full-width {
-    width: 100%;
-  }
-</style>

package/dist/plugins/devtools/ui/actions/CopyButton.svelte

@@ -1,88 +0,0 @@
-<!--
-  @paired-component apps/dashboard/src/shared/ui/actions/copy-button.tsx
-  @design-parity Props, variants, sizes, and visual output must stay in sync
-  with the Dashboard React counterpart. When modifying this component, replicate
-  the change in the paired React component to maintain visual and behavioral parity.
--->
-<script lang="ts">
-  interface Props {
-    text: string
-    label?: string
-  }
-
-  let { text, label = 'Copy to clipboard' }: Props = $props()
-
-  let copied = $state(false)
-  let timeoutId: ReturnType<typeof setTimeout> | undefined
-
-  async function handleCopy(): Promise<void> {
-    try {
-      await navigator.clipboard.writeText(text)
-      copied = true
-      clearTimeout(timeoutId)
-      timeoutId = setTimeout(() => {
-        copied = false
-      }, 1500)
-    } catch {
-      // Clipboard API may not be available
-    }
-  }
-</script>
-
-<button
-  class="copy-button"
-  onclick={handleCopy}
-  aria-label={label}
->
-  {#if copied}
-    <svg class="icon icon-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-      <polyline points="20 6 9 17 4 12" />
-    </svg>
-    <span class="copied-text" aria-live="polite">Copied!</span>
-  {:else}
-    <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-      <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
-      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
-    </svg>
-  {/if}
-</button>
-
-<style>
-  .copy-button {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--space-1);
-    border-radius: var(--radius-sm);
-    padding: var(--space-1) var(--space-2);
-    font-size: var(--text-sm);
-    font-family: inherit;
-    color: var(--color-gray-600);
-    background: none;
-    border: none;
-    cursor: pointer;
-    transition: background-color 0.15s ease, color 0.15s ease;
-  }
-
-  .copy-button:hover {
-    background-color: var(--color-gray-100);
-    color: var(--color-gray-900);
-  }
-
-  .copy-button:focus-visible {
-    outline: var(--ring-width) solid var(--ring-color);
-    outline-offset: var(--ring-offset);
-  }
-
-  .icon {
-    width: 1rem;
-    height: 1rem;
-  }
-
-  .icon-check {
-    color: var(--color-green-700);
-  }
-
-  .copied-text {
-    color: var(--color-green-700);
-  }
-</style>

package/dist/plugins/devtools/ui/data/Badge.svelte

@@ -1,62 +0,0 @@
-<!--
-  @paired-component apps/dashboard/src/shared/ui/data/badge.tsx
-  @design-parity Props, variants, sizes, and visual output must stay in sync
-  with the Dashboard React counterpart. When modifying this component, replicate
-  the change in the paired React component to maintain visual and behavioral parity.
--->
-<script lang="ts">
-  import type { Snippet } from 'svelte'
-
-  interface Props {
-    children: Snippet
-    status?: 'default' | 'success' | 'warning' | 'error' | 'info'
-    size?: 'small' | 'medium'
-  }
-
-  let { children, status = 'default', size = 'medium' }: Props = $props()
-</script>
-
-<span class="badge status-{status} size-{size}">
-  {@render children()}
-</span>
-
-<style>
-  .badge {
-    display: inline-flex;
-    align-items: center;
-    border-radius: var(--radius-full);
-    font-weight: var(--font-medium);
-  }
-
-  /* Sizes */
-  .size-small {
-    padding: 1px var(--space-1-5);
-    font-size: 10px;
-  }
-  .size-medium {
-    padding: var(--space-0-5) var(--space-2);
-    font-size: var(--text-xs);
-  }
-
-  /* Status colors */
-  .status-default {
-    background-color: var(--color-gray-100);
-    color: var(--color-gray-700);
-  }
-  .status-success {
-    background-color: var(--color-green-100);
-    color: var(--color-green-800);
-  }
-  .status-warning {
-    background-color: var(--color-yellow-100);
-    color: var(--color-yellow-800);
-  }
-  .status-error {
-    background-color: #fee2e2;
-    color: var(--color-red-800, #991b1b);
-  }
-  .status-info {
-    background-color: #dbeafe;
-    color: var(--color-blue-800, #1e40af);
-  }
-</style>