@picked/svelte 0.0.45-next.1 → 0.0.45-next.2

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

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { ResponseListItem, PrimitiveFieldValue, Field } from '@picked/client'
   import { getPicked } from '../../../../hooks'
+  import { Button, Text, CodeBlock, Banner, Stack } from '../../ui'
 
   export let field: Field
   export let response: ResponseListItem | null
@@ -33,7 +34,6 @@
     editError = ''
 
     if (hasOptions) {
-      // Initialize selected options from current value
       selectedOptions = new Set()
       if (Array.isArray(currentValue)) {
         currentValue.forEach((v) => selectedOptions.add(v))
@@ -54,15 +54,13 @@
 
   function toggleOption(optionValue: PrimitiveFieldValue) {
     if (field?.multiple) {
-      // Multiple selection: toggle in set
       if (selectedOptions.has(optionValue)) {
         selectedOptions.delete(optionValue)
       } else {
         selectedOptions.add(optionValue)
       }
-      selectedOptions = selectedOptions // Trigger reactivity
+      selectedOptions = selectedOptions
     } else {
-      // Single selection: replace set
       selectedOptions = new Set([optionValue])
     }
   }
@@ -70,12 +68,10 @@
   function parseValue(input: string): unknown {
     input = input.trim()
 
-    // Handle empty input
     if (input === '' || input === '-') {
       return null
     }
 
-    // Try to parse as JSON first for arrays and objects
     if (input.startsWith('{') || input.startsWith('[')) {
       try {
         return JSON.parse(input)
@@ -84,7 +80,6 @@
       }
     }
 
-    // Handle specific types based on field type
     if (field.type === 'boolean') {
       if (input === 'true') return true
       if (input === 'false') return false
@@ -99,7 +94,6 @@
       return num
     }
 
-    // Default to string
     return input
   }
 
@@ -108,7 +102,6 @@
       let newValue: unknown
 
       if (hasOptions) {
-        // For fields with options, use selected options
         const values = Array.from(selectedOptions)
         if (field?.multiple) {
           newValue = values
@@ -116,14 +109,12 @@
           newValue = values[0] ?? null
         }
       } else {
-        // For free-form fields, parse the text input
         newValue = parseValue(editValue)
       }
 
       const result = await client.responses.commit({ [field.id]: newValue })
 
       if (result.errors.length > 0) {
-        // Show validation error
         editError = result.errors[0].userMessage
         return
       }
@@ -143,28 +134,25 @@
 
 <tr>
   <td>
-    <span style="font-size: 11px; color: #666; font-family: monospace;">{field.name}</span>
+    <CodeBlock code={field.name} inline />
   </td>
   <td>
-    <strong style="font-size: 13px;">{field.label}</strong>
+    <Text size="small" weight="semibold">{field.label}</Text>
   </td>
   <td>
     {#if isEditing}
-      <div>
+      <Stack direction="vertical" gap="small">
         {#if hasOptions && field?.options}
-          <!-- Show options UI for fields with defined options -->
-          <div style="display: flex; flex-direction: column; gap: 0.5rem; padding: 0.5rem;">
+          <Stack direction="vertical" gap="small">
             {#each field.options as option (option.id)}
-              <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
+              <label class="option-label">
                 {#if field.multiple}
-                  <!-- Multiple selection: checkboxes -->
                   <input
                     type="checkbox"
                     checked={selectedOptions.has(option.value)}
                     on:change={() => toggleOption(option.value)}
                   />
                 {:else}
-                  <!-- Single selection: radio buttons -->
                   <input
                     type="radio"
                     name="field-{field.id}"
@@ -172,76 +160,50 @@
                     on:change={() => toggleOption(option.value)}
                   />
                 {/if}
-                <span style="font-size: 12px;">
+                <Text size="caption" inline>
                   {option.label}
                   {#if option.description}
-                    <span style="color: #666; font-size: 11px;">({option.description})</span>
+                    <Text size="caption" color="subdued" inline>({option.description})</Text>
                   {/if}
-                </span>
+                </Text>
               </label>
             {/each}
-          </div>
+          </Stack>
         {:else}
-          <!-- Free-form text input for fields without options -->
           <textarea
             bind:value={editValue}
-            style="width: 100%; min-height: 60px; font-family: monospace; font-size: 12px; padding: 0.25rem;"
             rows="3"
             placeholder="Enter {field.type} value..."
           ></textarea>
         {/if}
         {#if editError}
-          <div style="color: red; font-size: 11px; margin-top: 0.25rem;">
-            {editError}
-          </div>
+          <Banner status="error">{editError}</Banner>
         {/if}
-      </div>
+      </Stack>
     {:else if response === null}
-      <span style="color: #999; font-style: italic; font-size: 12px;"> No value set </span>
+      <Text size="caption" color="subdued">No value set</Text>
     {:else}
-      <code style="white-space: pre-wrap; word-break: break-all;">
-        {formatValue(currentValue)}
-      </code>
+      <CodeBlock code={formatValue(currentValue)} />
     {/if}
   </td>
   <td>
-    <span style="font-family: monospace; color: #666; font-size: 12px;">
-      {field.type}{field.multiple ? '[]' : ''}
-    </span>
+    <CodeBlock code="{field.type}{field.multiple ? '[]' : ''}" inline />
   </td>
   <td>
     {#if isEditing}
-      <div style="display: flex; gap: 0.25rem; justify-content: flex-end;">
-        <button
-          on:click={saveEdit}
-          style="padding: 0.25rem 0.5rem; cursor: pointer; font-size: 11px; background: #4CAF50; color: white; border: none; border-radius: 2px;"
-        >
-          Save
-        </button>
-        <button
-          on:click={cancelEdit}
-          style="padding: 0.25rem 0.5rem; cursor: pointer; font-size: 11px; background: #f44336; color: white; border: none; border-radius: 2px;"
-        >
-          Cancel
-        </button>
-      </div>
+      <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}
-      <div style="display: flex; gap: 0.25rem; justify-content: flex-end;">
-        <button
-          on:click={startEdit}
-          style="padding: 0.25rem 0.5rem; cursor: pointer; font-size: 11px; border: none; border-radius: 2px;"
-        >
+      <Stack direction="horizontal" gap="none" align="end">
+        <Button variant="secondary" size="small" onclick={startEdit}>
           {response === null ? 'Set' : 'Edit'}
-        </button>
+        </Button>
         {#if response !== null}
-          <button
-            on:click={handleClear}
-            style="padding: 0.25rem 0.5rem; cursor: pointer; font-size: 11px; background: #f44336; color: white; border: none; border-radius: 2px;"
-          >
-            Clear
-          </button>
+          <Button variant="destructive" size="small" onclick={handleClear}>Clear</Button>
         {/if}
-      </div>
+      </Stack>
     {/if}
   </td>
 </tr>

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

@@ -2,21 +2,19 @@
   import type { ResponseListItem, Field } from '@picked/client'
   import { getPicked } from '../../../../hooks'
   import ResponseTableRow from './ResponseTableRow.svelte'
+  import { DataTable, EmptyState, Button, RadioGroup, Stack } from '../../ui'
 
-  export let responses: ResponseListItem[]
+  export let responses: ResponseListItem[] = []
 
   const client = getPicked()
 
-  type FilterType = 'all' | 'set' | 'unset'
-  let filter: FilterType = 'set'
+  let filter = 'set'
 
   $: fieldsStore = client.fields.listStore
-  $: allFields = $fieldsStore
+  $: allFields = $fieldsStore ?? []
 
-  // Create a map of fieldId -> response for quick lookup
   $: responseMap = new Map(responses.map((r) => [r.fieldId, r]))
 
-  // Merge fields with responses, showing all fields
   $: allFieldRows = allFields.map((field) => {
     const response = responseMap.get(field.id)
     return {
@@ -25,7 +23,6 @@
     }
   })
 
-  // Apply filter
   $: fieldRows = allFieldRows.filter((row) => {
     if (filter === 'set') return row.response !== null
     if (filter === 'unset') return row.response === null
@@ -35,64 +32,46 @@
   function handleClearAll() {
     client.responses.clearAll()
   }
+
+  const columns = [
+    { key: 'id', header: 'ID' },
+    { 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>
 
-<div style="display: flex; flex-direction: column;">
-  <table>
-    <thead>
-      <tr>
-        <th>ID</th>
-        <th>Field</th>
-        <th>Value</th>
-        <th>Type</th>
-        <th style="width: 120px;">Actions</th>
-      </tr>
-    </thead>
-    <tbody>
-      {#if fieldRows.length === 0}
-        <tr>
-          <td colspan="5" style="text-align: center; padding: 2rem; color: #666;">
-            No fields registered yet
-          </td>
-        </tr>
-      {:else}
-        {#each fieldRows as { field, response } (field.id)}
-          <ResponseTableRow {field} {response} />
-        {/each}
-      {/if}
-    </tbody>
-  </table>
-  <div
-    style="margin-bottom: 0.5rem; margin-top: auto; padding: 0.5rem; display: flex; justify-content: space-between; align-items: center;"
-  >
-    <div style="display: flex; gap: 0.5rem; align-items: center;">
-      <span style="font-size: 13px; color: #666;">Show:</span>
-      <label
-        style="display: flex; align-items: center; gap: 0.25rem; cursor: pointer; font-size: 13px;"
-      >
-        <input type="radio" bind:group={filter} value="all" />
-        All
-      </label>
-      <label
-        style="display: flex; align-items: center; gap: 0.25rem; cursor: pointer; font-size: 13px;"
-      >
-        <input type="radio" bind:group={filter} value="set" />
-        Set ({responses.length})
-      </label>
-      <label
-        style="display: flex; align-items: center; gap: 0.25rem; cursor: pointer; font-size: 13px;"
-      >
-        <input type="radio" bind:group={filter} value="unset" />
-        Unset ({allFields.length - responses.length})
-      </label>
-    </div>
+<Stack direction="vertical" gap="none">
+  <Stack direction="horizontal" gap="small" align="space-between" justify="center" padding="small">
+    <RadioGroup
+      label="Show"
+      name="filter"
+      options={filterOptions}
+      value={filter}
+      onchange={(val) => { filter = val }}
+      orientation="horizontal"
+    />
     {#if responses.length > 0}
-      <button
-        on:click={handleClearAll}
-        style="padding: 0.25rem 0.5rem; cursor: pointer; background: #f44336; color: white; border: none; border-radius: 2px; font-size: 11px;"
-      >
-        Clear All
-      </button>
+      <Button variant="destructive" size="small" onclick={handleClearAll}>Clear All</Button>
     {/if}
-  </div>
-</div>
+  </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>
+</Stack>

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

@@ -0,0 +1,171 @@
+<!--
+  @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
+    onclick?: (event: MouseEvent) => void
+  }
+
+  let {
+    children,
+    icon,
+    variant = 'primary',
+    size = 'medium',
+    disabled = false,
+    loading = false,
+    type = 'button',
+    fullWidth = false,
+    href,
+    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}
+    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

@@ -0,0 +1,88 @@
+<!--
+  @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

@@ -0,0 +1,62 @@
+<!--
+  @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>