@picked/svelte 0.0.44 → 0.0.45-next.2

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

@@ -1,6 +1,7 @@
 <script lang="ts">
   import * as d3 from 'd3'
   import type { ExperienceEdge, ExperienceNode, ExperienceStore } from '@picked/client'
+  import { Badge, Button, Spinner, Stack, Text, VisualizationContainer } from '../../ui'
 
   export let experience: ExperienceStore
 
@@ -237,74 +238,22 @@
   }
 </script>
 
-<div class="graph">
-  {#if loading}
-    <div class="loading-container">Loading visualization...</div>
-  {:else if error}
-    <div class="error-container">{error}</div>
-  {:else}
-    <div class="tree-container">
-      <div class="controls">
-        <button on:click={handleZoomIn} title="Zoom In">
-          <span>Zoom in</span>
-        </button>
-        <button on:click={handleZoomOut} title="Zoom Out">
-          <span>Zoom out</span>
-        </button>
-        <button on:click={handleReset} title="Reset View">
-          <span>Reset</span>
-        </button>
-        <span class="zoom-level">{Math.round(zoom * 100)}%</span>
-      </div>
-      <svg bind:this={svgEl} class="tree-svg"></svg>
-    </div>
-  {/if}
-</div>
-
-<style>
-  .graph {
-    border: 1px solid lightgray;
-  }
-
-  .loading-container,
-  .error-container {
-    display: flex;
-    height: 100%;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .error-container {
-    color: #ef4444;
-  }
-
-  .tree-container {
-    position: relative;
-    height: 100%;
-    width: 100%;
-  }
-
-  .controls {
-    position: absolute;
-    right: 1rem;
-    top: 1rem;
-    z-index: 10;
-    display: flex;
-    gap: 0.5rem;
-  }
-
-  .zoom-level {
-    display: flex;
-    align-items: center;
-    border-radius: 0.25rem;
-    background-color: rgba(255, 255, 255, 0.8);
-    padding: 0.25rem 0.5rem;
-    font-size: 0.75rem;
-  }
-
-  .tree-svg {
-    height: 100%;
-    width: 100%;
-    background-color: white;
-  }
-</style>
+{#if loading}
+  <Stack direction="horizontal" align="center" justify="center" fill>
+    <Spinner label="Loading visualization" />
+  </Stack>
+{:else if error}
+  <Stack direction="horizontal" align="center" justify="center" fill>
+    <Text color="error">{error}</Text>
+  </Stack>
+{:else}
+  <VisualizationContainer>
+    {#snippet controls()}
+      <Button variant="secondary" size="small" onclick={handleZoomIn}>Zoom in</Button>
+      <Button variant="secondary" size="small" onclick={handleZoomOut}>Zoom out</Button>
+      <Button variant="secondary" size="small" onclick={handleReset}>Reset</Button>
+      <Badge status="default" size="small">{Math.round(zoom * 100)}%</Badge>
+    {/snippet}
+    <svg bind:this={svgEl}></svg>
+  </VisualizationContainer>
+{/if}

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

@@ -2,6 +2,7 @@
   import { createStore, createEvent } from 'effector'
   import type { FeatureBucket } from '@picked/client'
   import { getPicked, useUnit } from '../../../../hooks'
+  import { DataTable, EmptyState, Button, Text, CopyButton, Card, CodeBlock, Stack } from '../../ui'
 
   interface FeatureSelection {
     included: boolean
@@ -14,13 +15,8 @@
   const initSelections = createEvent<FeatureBucket[]>()
   const featureToggled = createEvent<string>()
   const valueChanged = createEvent<{ id: string; value: string }>()
-  const copySucceeded = createEvent()
-  const copyReset = createEvent()
 
   const selectionsStore = createStore<Record<string, FeatureSelection>>({})
-    // Triggered whenever the features list changes. Adds an entry for any feature
-    // not yet tracked, seeding its override value from the already-resolved bucket
-    // (or 'true' as a sensible default for unresolved boolean features).
     .on(initSelections, (state, feats) => {
       const next = { ...state }
       feats.forEach((feature) => {
@@ -34,30 +30,21 @@
       })
       return next
     })
-    // Toggles whether the feature is included in the generated URL.
     .on(featureToggled, (state, id) => ({
       ...state,
       [id]: { ...state[id], included: !state[id].included },
     }))
-    // Updates the override value for a feature (edited via the text/select input).
     .on(valueChanged, (state, { id, value }) => ({
       ...state,
       [id]: { ...state[id], value },
     }))
 
-  const copySuccessStore = createStore(false)
-    .on(copySucceeded, () => true)  // Show "Copied!" feedback after a successful clipboard write.
-    .on(copyReset, () => false)     // Reset back to "Copy" after the feedback timeout.
-
   const selections = useUnit(selectionsStore)
-  const copySuccess = useUnit(copySuccessStore)
 
   $effect(() => {
     initSelections($featuresList)
   })
 
-  let urlInputRef: HTMLInputElement | null = $state(null)
-
   function getBucketValue(feature: FeatureBucket): string | null {
     return feature.isResolved ? String(feature.getBucket().bucket) : null
   }
@@ -82,228 +69,105 @@
 
   const hasSelections = $derived(Object.values($selections).some((s) => s.included))
 
-  async function copyUrl() {
-    try {
-      await navigator.clipboard.writeText(generatedUrl)
-      copySucceeded()
-      setTimeout(copyReset, 2000)
-    } catch {
-      urlInputRef?.select()
-    }
-  }
-
   function refreshPage() {
     window.location.href = generatedUrl
   }
-</script>
 
-<div class="url-builder">
-  <p class="description">
-    Select feature overrides to generate a URL. Anyone who loads this URL will get the selected
-    feature values from page load — before any resolution occurs.
-  </p>
+  const columns = [
+    { key: 'include', header: 'Include' },
+    { key: 'feature', header: 'Feature' },
+    { key: 'currentValue', header: 'Current Value' },
+    { key: 'overrideValue', header: 'Override Value' },
+  ]
+</script>
 
-  <table>
-    <thead>
-      <tr>
-        <th style="width: 2.5rem;">Include</th>
-        <th>Feature</th>
-        <th>Current Value</th>
-        <th>Override Value</th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each $featuresList as feature (feature.id)}
-        {@const selection = $selections[feature.id]}
-        {@const currentValue = getBucketValue(feature)}
-        {@const isBoolean = isBooleanFeature(feature)}
-        {#if selection}
-          <tr class:selected={selection.included}>
-            <td style="text-align: center;">
+<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>
+
+  <DataTable columns={columns} rows={$featuresList}>
+    {#snippet row(item)}
+      {@const feature = item}
+      {@const selection = $selections[feature.id]}
+      {@const currentValue = getBucketValue(feature)}
+      {@const isBoolean = isBooleanFeature(feature)}
+      {#if selection}
+        <tr class:selected={selection.included}>
+          <td class="include-cell">
+            <input
+              type="checkbox"
+              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.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 isBoolean}
+              <select
+                class="inline-select"
+                value={selection.value}
+                onchange={(e) => valueChanged({ id: feature.id, value: e.currentTarget.value })}
+                disabled={!selection.included}
+              >
+                <option value="true">true</option>
+                <option value="false">false</option>
+              </select>
+            {:else}
               <input
-                type="checkbox"
-                checked={selection.included}
-                onchange={() => featureToggled(feature.id)}
-                aria-label="Include {feature.name} in URL"
+                class="inline-input"
+                type="text"
+                value={selection.value}
+                oninput={(e) => valueChanged({ id: feature.id, value: e.currentTarget.value })}
+                disabled={!selection.included}
+                placeholder="value"
               />
-            </td>
-            <td>
-              <span style="font-weight: 500;">{feature.name}</span>
-              <code
-                style="
-                display: block;
-                font-size: 10px;
-                color: #888;
-                margin-top: 2px;
-              ">{feature.key}</code>
-            </td>
-            <td>
-              {#if currentValue !== null}
-                <code style="font-size: 11px;">{currentValue}</code>
-              {:else}
-                <button onclick={() => feature.getBucket()} style="margin-left: 0.5rem; font-size: 10px; padding: 0.125rem 0.25rem;">
-                  Click to resolve
-                </button>
-              {/if}
-            </td>
-            <td>
-              {#if isBoolean}
-                <select
-                  value={selection.value}
-                  onchange={(e) => valueChanged({ id: feature.id, value: e.currentTarget.value })}
-                  disabled={!selection.included}
-                  style="font-size: 11px; padding: 0.125rem 0.25rem;"
-                >
-                  <option value="true">true</option>
-                  <option value="false">false</option>
-                </select>
-              {:else}
-                <input
-                  type="text"
-                  value={selection.value}
-                  oninput={(e) => valueChanged({ id: feature.id, value: e.currentTarget.value })}
-                  disabled={!selection.included}
-                  style="width: 100%; font-size: 11px; padding: 0.125rem 0.25rem;"
-                  placeholder="value"
-                />
-              {/if}
-            </td>
-          </tr>
-        {/if}
-      {/each}
-    </tbody>
-  </table>
-
-  {#if $featuresList.length === 0}
-    <div style="padding: 2rem; text-align: center; color: #999;">No features registered</div>
-  {/if}
-
-  <div class="url-output">
-    <div class="url-label">Generated URL</div>
-    <div class="url-row">
-      <input
-        bind:this={urlInputRef}
-        type="text"
-        readonly
-        value={generatedUrl}
-        class="url-input"
-        onclick={(e) => e.currentTarget.select()}
-        aria-label="Generated URL"
-      />
-      <button
-        onclick={copyUrl}
-        class="action-button copy-button"
-        class:success={copySuccess}
-        title="Copy URL to clipboard"
-      >
-        {copySuccess ? 'Copied!' : 'Copy'}
-      </button>
-      <button
-        onclick={refreshPage}
-        class="action-button refresh-button"
-        disabled={!hasSelections}
-        title="Reload the page with this URL"
-      >
-        Reload
-      </button>
-    </div>
-    {#if !hasSelections}
-      <p class="hint">Select at least one feature above to add overrides to the URL.</p>
-    {/if}
-  </div>
-</div>
-
-<style>
-  .url-builder {
-    display: flex;
-    flex-direction: column;
-    gap: 0;
-  }
-
-  .description {
-    margin: 0;
-    padding: 0.75rem 0.5rem;
-    font-size: 12px;
-    color: #555;
-    border-bottom: 1px solid lightgray;
-  }
-
-  tr.selected {
-    background-color: #f0f7ff;
-  }
-
-  .url-output {
-    padding: 0.75rem 0.5rem;
-    border-top: 1px solid lightgray;
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-  }
-
-  .url-label {
-    font-size: 11px;
-    font-weight: 600;
-    color: #555;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-  }
-
-  .url-row {
-    display: flex;
-    gap: 0.5rem;
-    align-items: center;
-  }
-
-  .url-input {
-    flex: 1;
-    font-size: 11px;
-    font-family: monospace;
-    padding: 0.375rem 0.5rem;
-    border: 1px solid #ccc;
-    border-radius: 3px;
-    background-color: #f9f9f9;
-    color: #333;
-    min-width: 0;
-  }
-
-  .url-input:focus {
-    outline: 2px solid #0066cc;
-    outline-offset: -1px;
-  }
-
-  .action-button {
-    padding: 0.375rem 0.75rem;
-    font-size: 11px;
-    border: none;
-    border-radius: 3px;
-    cursor: pointer;
-    white-space: nowrap;
-    font-weight: 500;
-  }
-
-  .action-button:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .copy-button {
-    background-color: #2196f3;
-    color: white;
-  }
-
-  .copy-button.success {
-    background-color: #4caf50;
-  }
-
-  .refresh-button {
-    background-color: #555;
-    color: white;
-  }
-
-  .hint {
-    margin: 0;
-    font-size: 11px;
-    color: #999;
-    font-style: italic;
-  }
-</style>
+            {/if}
+          </td>
+        </tr>
+      {/if}
+    {/snippet}
+    {#snippet empty()}
+      <EmptyState message="No features registered" />
+    {/snippet}
+  </DataTable>
+
+  <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/frameworks/FrameworksListScreen.svelte

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

package/dist/plugins/devtools/screens/history/HistoryEntriesTable.svelte

@@ -1,23 +1,25 @@
 <script lang="ts">
   import type { HistoryEntry } from '@picked/client'
   import HistoryEntryListItem from './HistoryEntryListItem.svelte'
+  import { DataTable, EmptyState } from '../../ui'
 
   export let historyEntries: HistoryEntry[]
+
+  const columns = [
+    { key: 'id', header: 'ID' },
+    { key: 'experienceId', header: 'Experience ID' },
+    { key: 'nodeId', header: 'Node ID' },
+    { key: 'nodeType', header: 'Node Type' },
+    { key: 'at', header: 'At' },
+  ]
 </script>
 
-<table>
-  <thead>
-    <tr>
-      <th>ID</th>
-      <th>Experience ID</th>
-      <th>Node ID</th>
-      <th>Node Type</th>
-      <th>At</th>
-    </tr>
-  </thead>
-  <tbody>
-    {#each historyEntries as historyEntry (historyEntry.id)}
-      <HistoryEntryListItem {historyEntry} />
-    {/each}
-  </tbody>
-</table>
+<DataTable columns={columns} rows={historyEntries}>
+  {#snippet row(item)}
+    {@const historyEntry = item}
+    <HistoryEntryListItem {historyEntry} />
+  {/snippet}
+  {#snippet empty()}
+    <EmptyState message="No history entries" />
+  {/snippet}
+</DataTable>

package/dist/plugins/devtools/screens/predicates/PredicatesListScreen.svelte

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