@picked/svelte 0.0.44 → 0.0.45-next.2

package/dist/plugins/devtools/DevToolsExperience.svelte

@@ -1,5 +1,13 @@
+<!--
+  @paired-component apps/dashboard/src/shared/ui/layout/page.tsx
+  @design-parity The devtools modal layout mirrors the Dashboard Page component.
+  The toolbar, main area, padding, and border radius must stay visually identical
+  to the Dashboard's AppShell content area. When modifying this layout, replicate
+  the change in the paired React component to maintain visual and behavioral parity.
+-->
 <script lang="ts">
   import { getExperience } from '../../hooks'
+  import { Button } from './ui'
   import PickedLogo from './PickedLogo.svelte'
   import Tabs from './components/Tabs.svelte'
   import ExperiencesListScreen from './screens/experiences/ExperiencesListScreen.svelte'
@@ -91,9 +99,14 @@
   >
     <div class="backdrop"></div>
     <div class="container">
-      <header class="header" id="devtools-header">
-        <PickedLogo />
-        <button on:click={() => experience.close()}>Close</button>
+      <header class="toolbar" id="devtools-header">
+        <div class="toolbar-left">
+          <PickedLogo width={80} height={28} />
+        </div>
+        <div class="toolbar-center"></div>
+        <div class="toolbar-right">
+          <Button variant="ghost" size="small" onclick={() => experience.close()}>Close</Button>
+        </div>
       </header>
       <section class="main">
         <Tabs {tabs} initialTab={1} />
@@ -103,7 +116,7 @@
 {:else}
   <button
     class="floating-button"
-    on:click={() => experience.open()}
+    onclick={() => experience.open()}
     aria-label="Open Picked Devtools"
     title="Open Picked Devtools (or press .)"
   >
@@ -114,71 +127,74 @@
 <style>
   *,
   .devtools * {
-    box-sizing: inherit;
+    box-sizing: border-box;
   }
 
   .devtools {
     position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
+    inset: 0;
     z-index: 999999999;
-    padding: 2em;
+    padding: 48px;
     display: grid;
     place-items: center;
     overflow: hidden;
-    font-size: 13px;
-    color: black;
-    line-height: 1;
-  }
-
-  .devtools button {
-    font-size: 13px;
-    color: black;
-    line-height: 1;
   }
 
   .backdrop {
     position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
+    inset: 0;
     background-color: rgba(0, 0, 0, 0.5);
     z-index: 1;
   }
 
   .container {
-    background-color: white;
+    background-color: var(--color-white);
+    border-radius: var(--radius-xl);
+    box-shadow: var(--shadow-lg);
     display: flex;
     flex-direction: column;
-    padding: 0.5rem;
-    border-radius: 4px;
-    box-shadow: 4px 4px 4px #00000029;
-    border: 1px solid lightgray;
+    overflow: hidden;
     z-index: 2;
-    overflow: auto;
     width: 100%;
     height: 100%;
   }
 
-  .header {
-    height: 50px;
-    border-bottom: 1px solid lightgray;
+  .toolbar {
+    height: 40px;
+    background-color: var(--color-white);
+    border-bottom: 1px solid var(--color-gray-200);
+    padding: 0 var(--space-4);
     display: flex;
     align-items: center;
-    padding: 0.5em;
     justify-content: space-between;
+    flex-shrink: 0;
+  }
+
+  .toolbar-left {
+    display: flex;
+    align-items: center;
+  }
+
+  .toolbar-center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .toolbar-right {
+    display: flex;
+    align-items: center;
   }
 
   .main {
-    flex: 1 1 auto;
-    display: grid;
+    flex: 1;
+    background-color: var(--color-gray-50);
+    overflow: auto;
+    display: flex;
     flex-direction: column;
-    height: 100%;
   }
 
+  /* Global table styles for screens that still use raw tables */
   .devtools :global(table) {
     width: 100%;
     border-collapse: collapse;
@@ -186,15 +202,16 @@
 
   .devtools :global(th),
   .devtools :global(td) {
-    padding: 0.5rem;
+    padding: var(--space-2);
     text-align: left;
-    border-bottom: 1px solid lightgray;
+    border-bottom: 1px solid var(--color-gray-200);
+    font-size: var(--text-sm);
+    color: var(--color-gray-900);
   }
 
   .devtools :global(th) {
-    padding: 0.5rem;
-    font-weight: normal;
-    background-color: #f0f0f0;
+    font-weight: var(--font-medium);
+    background-color: var(--color-gray-50);
   }
 
   .floating-button {
@@ -203,9 +220,9 @@
     right: 1.5rem;
     width: 4.5rem;
     height: 4.5rem;
-    border-radius: 50%;
-    background-color: white;
-    border: 1px solid lightgray;
+    border-radius: var(--radius-full);
+    background-color: var(--color-white);
+    border: 1px solid var(--color-gray-200);
     box-shadow: 0 4px 12px rgba(21, 73, 255, 0.2);
     display: flex;
     align-items: center;

package/dist/plugins/devtools/components/ExperienceInstanceListItem.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { ExperienceInstance } from '@picked/client'
+  import { Button } from '../ui'
 
   export let experienceInstance: ExperienceInstance
 
@@ -15,7 +16,7 @@
 
 <tr>
   <td>{experienceInstance.experienceId}</td>
-  <td><button onclick={() => experienceInstance.toggleOpen()}>{$isOpen}</button></td>
+  <td><Button variant="ghost" size="small" onclick={() => experienceInstance.toggleOpen()}>{$isOpen}</Button></td>
   <td>{$currentNode?.id || ''}</td>
   <td>{$currentNode?.type || ''}</td>
   <td>{$currentStep?.id || ''}</td>

package/dist/plugins/devtools/components/ExperienceInstancesTable.svelte

@@ -1,27 +1,29 @@
 <script lang="ts">
   import type { ExperienceInstance } from '@picked/client'
   import ExperienceInstanceListItem from './ExperienceInstanceListItem.svelte'
+  import { DataTable, EmptyState } from '../ui'
 
   export let experienceInstances: ExperienceInstance[]
+
+  const columns = [
+    { key: 'experience', header: 'Experience' },
+    { key: 'isOpen', header: 'Is Open' },
+    { key: 'currentNodeId', header: 'Current node ID' },
+    { key: 'currentNodeType', header: 'Current node Type' },
+    { key: 'currentStepId', header: 'Current step ID' },
+    { key: 'currentStepTitle', header: 'Current step Title' },
+    { key: 'nextSteps', header: 'Next reachable steps amount' },
+    { key: 'stepsToOrigin', header: 'Steps to origin' },
+    { key: 'stepsToEnd', header: 'Steps to end' },
+  ]
 </script>
 
-<table>
-  <thead>
-    <tr>
-      <th>Experience</th>
-      <th>Is Open</th>
-      <th>Current node ID</th>
-      <th>Current node Type</th>
-      <th>Current step ID</th>
-      <th>Current step Title</th>
-      <th>Next reachable steps amount</th>
-      <th>Steps to origin</th>
-      <th>Steps to end</th>
-    </tr>
-  </thead>
-  <tbody>
-    {#each experienceInstances as experienceInstance (experienceInstance.id)}
-      <ExperienceInstanceListItem {experienceInstance} />
-    {/each}
-  </tbody>
-</table>
+<DataTable columns={columns} rows={experienceInstances}>
+  {#snippet row(item)}
+    {@const experienceInstance = item}
+    <ExperienceInstanceListItem {experienceInstance} />
+  {/snippet}
+  {#snippet empty()}
+    <EmptyState message="No experience instances" />
+  {/snippet}
+</DataTable>

package/dist/plugins/devtools/components/Tabs.svelte

@@ -82,37 +82,50 @@
     width: 100%;
     display: flex;
     flex-direction: column;
+    flex: 1;
   }
 
   .tab-list {
     display: flex;
-    border-bottom: 1px solid #ccc;
+    border-bottom: 1px solid var(--color-gray-200);
+    flex-shrink: 0;
+    overflow-x: auto;
   }
 
   .tab-button {
-    padding: 0.5rem 1rem;
+    padding: var(--space-2) var(--space-4);
     border: none;
     background: none;
     cursor: pointer;
     border-bottom: 2px solid transparent;
+    font-size: var(--text-sm);
+    color: var(--color-gray-600);
+    font-family: inherit;
+    white-space: nowrap;
+    transition: color 0.15s ease, border-color 0.15s ease;
   }
 
   .tab-button:hover {
-    background-color: #f0f0f0;
+    background-color: var(--color-gray-100);
+    color: var(--color-gray-900);
   }
 
   .tab-button.active {
-    border-bottom: 2px solid #000;
+    border-bottom-color: var(--color-gray-900);
+    color: var(--color-gray-900);
+    font-weight: var(--font-medium);
   }
 
-  .tab-button:focus {
-    outline: 2px solid #0066cc;
-    outline-offset: -2px;
+  .tab-button:focus-visible {
+    outline: var(--ring-width) solid var(--ring-color);
+    outline-offset: calc(-1 * var(--ring-width));
   }
 
   .tab-panel {
     flex: 1 1 auto;
     display: grid;
+    align-content: start;
+    overflow: auto;
   }
 
   .tab-panel:not(.active) {

package/dist/plugins/devtools/experience.js

@@ -1 +1 @@
-import{createExperience as e}from"@picked/client/plugins/create-experience";import{adaptSvelteComponent as o}from"../../component.js";import t from"./DevToolsExperience.svelte";const p=e({id:"svelte-devtools",name:"Picked Devtools",decide:{},targets:[{selector:"body",placement:"append"}],component:o(t)});p.addStep({label:"Tools"});export{p as devtoolsExperience};
+import{createExperience as e}from"@picked/client/plugins/create-experience";import{adaptSvelteComponent as o}from"../../component.js";import t from"./DevToolsExperience.svelte";import p from"./ui/tokens.css.js";const r=e({id:"svelte-devtools",name:"Picked Devtools",decide:{},targets:[{selector:"body",placement:"append"}],component:o(t,{css:[p]})});r.addStep({label:"Tools"});export{r as devtoolsExperience};

package/dist/plugins/devtools/screens/components/ComponentsListScreen.svelte

@@ -1,26 +1,26 @@
 <script lang="ts">
   import { getPicked } from '../../../../hooks'
+  import { DataTable, EmptyState } from '../../ui'
 
   const client = getPicked()
 
   $: components = client.components.listStore
+
+  const columns = [
+    { key: 'name', header: 'Name' },
+    { key: 'framework', header: 'Framework' },
+  ]
 </script>
 
-<div>
-  <table>
-    <thead>
-      <tr>
-        <th>Name</th>
-        <th>Framework</th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each $components as component (component.name)}
-        <tr>
-          <td>{component.name}</td>
-          <td>{component.component.frameworkName}</td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
+<DataTable columns={columns} rows={$components}>
+  {#snippet row(item)}
+    {@const component = item}
+    <tr>
+      <td>{component.name}</td>
+      <td>{component.component.frameworkName}</td>
+    </tr>
+  {/snippet}
+  {#snippet empty()}
+    <EmptyState message="No components" />
+  {/snippet}
+</DataTable>

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

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { EventBusPayload, EventHistoryEntry } from '@picked/client'
+  import { Badge, Card, CodeBlock, Stack, Text } from '../../ui'
 
   export let event: EventHistoryEntry
   export let isExpanded: boolean
@@ -23,15 +24,12 @@
   function getPayloadFields(payload: EventBusPayload): PayloadField[] {
     const fields: PayloadField[] = []
 
-    // Add type
     fields.push({ label: 'Type', value: payload.type })
 
-    // Add optional value field if present
     if ('value' in payload && payload.value !== undefined) {
       fields.push({ label: 'Value', value: payload.value })
     }
 
-    // Add experience identifiers if present
     if ('experience' in payload && payload.experience) {
       const exp = payload.experience
       if (exp && typeof exp === 'object') {
@@ -44,7 +42,6 @@
       }
     }
 
-    // Add step information if present
     if ('step' in payload && payload.step) {
       const step = payload.step
       if (step && typeof step === 'object') {
@@ -57,27 +54,22 @@
       }
     }
 
-    // Add form information if present
     if ('form' in payload && payload.form) {
       fields.push({ label: 'Form', value: JSON.stringify(payload.form) })
     }
 
-    // Add feature information if present
     if ('feature' in payload && payload.feature) {
       fields.push({ label: 'Feature', value: JSON.stringify(payload.feature) })
     }
 
-    // Add exception/validation errors if present
     if ('exception' in payload && payload.exception) {
       fields.push({ label: 'Exception', value: JSON.stringify(payload.exception) })
     }
 
-    // Add version if present
     if ('version' in payload && payload.version) {
       fields.push({ label: 'Version', value: payload.version })
     }
 
-    // Add session id if present
     if ('id' in payload && payload.id && payload.type === 'session') {
       fields.push({ label: 'Session ID', value: payload.id })
     }
@@ -94,49 +86,43 @@
   }
 </script>
 
-<tr on:click={onToggle} style="cursor: pointer;">
-  <td style="font-family: monospace; font-size: 12px;">
-    <span style="margin-right: 0.5rem; display: inline-block; width: 12px;">
+<tr class="event-row" onclick={onToggle}>
+  <td>
+    <span class="expand-icon">
       {isExpanded ? '▼' : '▶'}
     </span>
-    {formatTime(event.at)}
+    <CodeBlock code={formatTime(event.at)} inline />
   </td>
   <td>
-    <code
-      style="display: inline-block; padding: 0.25rem 0.5rem; background-color: #e8f4ff; border: 1px solid #b3d9ff; border-radius: 3px; font-size: 12px; color: #0066cc;"
-    >
-      {event.payload.type}
-    </code>
+    <Badge status="info">{event.payload.type}</Badge>
   </td>
-  <td style="font-size: 13px; color: #333;">
-    {'experience' in event.payload && event.payload.experience ? event.payload.experience.experienceId : '-'}
+  <td>
+    <Text size="small">
+      {'experience' in event.payload && event.payload.experience ? event.payload.experience.experienceId : '-'}
+    </Text>
   </td>
-  <td style="font-size: 12px; color: #666; font-style: italic;">
-    {isExpanded ? 'Click to collapse' : 'Click to expand payload'}
+  <td>
+    <Text size="caption" color="subdued">
+      {isExpanded ? 'Click to collapse' : 'Click to expand payload'}
+    </Text>
   </td>
 </tr>
 {#if isExpanded}
   <tr>
-    <td colspan="4" style="background-color: #f8f9fa; padding: 1rem; border-left: 3px solid #0066cc;">
-      <div style="font-weight: 600; margin-bottom: 0.5rem; font-size: 13px; color: #333;">
-        Event Payload
-      </div>
-      <div
-        style="background-color: #fff; padding: 0.75rem; border: 1px solid #e0e0e0; border-radius: 4px;"
-      >
-        {#each getPayloadFields(event.payload) as field}
-          <div style="margin-bottom: 0.5rem; font-size: 12px;">
-            <span style="font-weight: 600; color: #555; margin-right: 0.5rem;"
-              >{field.label}:</span
-            >
-            <code
-              style="font-family: 'Monaco', 'Menlo', 'Courier New', monospace; background-color: #f0f0f0; padding: 0.125rem 0.25rem; border-radius: 2px; color: #333;"
-            >
-              {formatValue(field.value)}
-            </code>
-          </div>
-        {/each}
-      </div>
+    <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}
+              <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,19 +1,18 @@
 <script lang="ts">
   import { getPicked } from '../../../../hooks'
   import EventsTable from './EventsTable.svelte'
+  import { Divider, Spacer, Stack, Text } from '../../ui'
 
   const { events } = getPicked()
 </script>
 
-<div style="display: flex; flex-direction: column; height: 100%;">
+<Stack direction="vertical" gap="none" fill>
   <EventsTable />
-  <div
-    style="margin-top: auto; padding: 0.5rem; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid lightgray;"
-  >
-    <div style="display: flex; gap: 0.5rem; align-items: center;">
-      <span style="font-size: 13px; color: #666;">
-        {$events.length} events
-      </span>
-    </div>
-  </div>
-</div>
+  <Spacer />
+  <Divider />
+  <Stack padding="small">
+    <Text size="caption" color="subdued">
+      {$events.length} events
+    </Text>
+  </Stack>
+</Stack>

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

@@ -2,6 +2,7 @@
   import { combine, createStore, createEvent, sample } from 'effector'
   import { getPicked } from '../../../../hooks'
   import EventListItem from './EventListItem.svelte'
+  import { DataTable, EmptyState } from '../../ui'
   import type { EventHistoryEntry } from '@picked/client'
 
   const { events } = getPicked()
@@ -18,7 +19,6 @@
     expandedRowIds = newSet
   }
 
-
   const sortDirectionStore = createStore<'asc' | 'desc'>('desc')
   const toggleSortDirection = createEvent<void>()
   const oppositeSortDirection: Record<'asc' | 'desc', 'asc' | 'desc'> = { asc: 'desc', desc: 'asc' }
@@ -38,37 +38,35 @@
   }
 
   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>
 
-<table>
-  <thead>
-    <tr>
-      <th
-        style="width: 140px; cursor: pointer; user-select: none;"
-        on:click={() => toggleSortDirection()}
-      >
-        Time {$sortDirectionStore === 'asc' ? '↑' : '↓'}
-      </th>
-      <th style="width: 200px;">Event Type</th>
-      <th style="width: 180px;">Experience</th>
-      <th></th>
-    </tr>
-  </thead>
-  <tbody>
-    {#if $sortedEvents.length === 0}
-      <tr>
-        <td colspan="4" style="text-align: center; padding: 2rem; color: #666;">
-            No events yet. Interact with the page to see events.
-        </td>
-      </tr>
-    {:else}
-      {#each $sortedEvents as event (event.at)}
-        <EventListItem
-          {event}
-          isExpanded={expandedRowIds.has(event.id)}
-          onToggle={() => toggleRow(event.id)}
-        />
-      {/each}
-    {/if}
-  </tbody>
-</table>
+<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>

package/dist/plugins/devtools/screens/experiences/ExperienceDetailsScreen.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { ExperienceStore } from '@picked/client'
   import { getPicked } from '../../../../hooks'
+  import { Button, Text, CodeBlock, Stack } from '../../ui'
 
   const client = getPicked()
   export let experience: ExperienceStore
@@ -8,39 +9,35 @@
   $: config = experience.configStore
 </script>
 
-<div class="container">
+<Stack direction="vertical" gap="medium" padding="medium">
   <div>
-    <button on:click={() => client.launchExperienceById(experience.id)}>Launch experience</button>
+    <Button variant="primary" size="small" onclick={() => client.launchExperienceById(experience.id)}>
+      Launch experience
+    </Button>
   </div>
 
   <div>
-    <p><b>Type</b></p>
-    <p>{$config.type}</p>
+    <Text weight="semibold">Type</Text>
+    <Text>{$config.type}</Text>
   </div>
 
   <div>
-    <p><b>Target selectors</b></p>
+    <Text weight="semibold">Target selectors</Text>
     <ul>
       {#if $config.targetSelectors.length > 0}
         {#each $config.targetSelectors as selector (selector)}
           <li>
-            <pre>{selector.selector} || {selector.placement}</pre>
+            <CodeBlock code="{selector.selector} || {selector.placement}" />
           </li>
         {/each}
       {:else}
-        <li>(none)</li>
+        <li><Text color="subdued">(none)</Text></li>
       {/if}
     </ul>
   </div>
 
   <div>
-    <p><b>Decision logic</b></p>
-    <pre>{JSON.stringify($config.decisionLogic, null, 2)}</pre>
+    <Text weight="semibold">Decision logic</Text>
+    <CodeBlock code={JSON.stringify($config.decisionLogic, null, 2)} />
   </div>
-</div>
-
-<style>
-  .container {
-    padding: 0.5em;
-  }
-</style>
+</Stack>