@picked/svelte 0.0.45-next.4 → 0.0.45-next.5

package/dist/_virtual/preload-helper.js

@@ -0,0 +1 @@
+const p="modulepreload",v=function(l){return"/"+l},u={},y=function(d,c,E){let i=Promise.resolve();if(c&&c.length>0){let f=function(e){return Promise.all(e.map(o=>Promise.resolve(o).then(s=>({status:"fulfilled",value:s}),s=>({status:"rejected",reason:s}))))};document.getElementsByTagName("link");const r=document.querySelector("meta[property=csp-nonce]"),t=r?.nonce||r?.getAttribute("nonce");i=f(c.map(e=>{if(e=v(e),e in u)return;u[e]=!0;const o=e.endsWith(".css"),s=o?'[rel="stylesheet"]':"";if(document.querySelector(`link[href="${e}"]${s}`))return;const n=document.createElement("link");if(n.rel=o?"stylesheet":p,o||(n.as="script"),n.crossOrigin="",n.href=e,t&&n.setAttribute("nonce",t),document.head.appendChild(n),o)return new Promise((m,h)=>{n.addEventListener("load",m),n.addEventListener("error",()=>h(new Error(`Unable to preload CSS for ${e}`)))})}))}function a(r){const t=new Event("vite:preloadError",{cancelable:!0});if(t.payload=r,window.dispatchEvent(t),!t.defaultPrevented)throw r}return i.then(r=>{for(const t of r||[])t.status==="rejected"&&a(t.reason);return d().catch(a)})};export{y as __vitePreload};

package/dist/component.d.ts

@@ -1,9 +1,9 @@
-import { AdaptedComponent, AdaptedComponentStyle } from '@picked/client';
+import { AdaptedComponent, AdaptedComponentStyle, LazyComponentLoader } from '@picked/client';
 import { Component } from 'svelte';
 export type ComponentWithProps = Component<any>;
 export declare const adaptSvelteComponent: (component: ComponentWithProps | Promise<{
     default: ComponentWithProps;
-}>, style?: AdaptedComponentStyle) => AdaptedComponent<"svelte", ComponentWithProps | Promise<{
+}> | LazyComponentLoader<ComponentWithProps>, style?: AdaptedComponentStyle) => AdaptedComponent<"svelte", ComponentWithProps | Promise<{
     default: ComponentWithProps;
-}>>;
+}> | LazyComponentLoader<ComponentWithProps>>;
 export declare const isValidAdaptedComponent: (component: AdaptedComponent<string, unknown>) => component is AdaptedComponent<"svelte", ComponentWithProps>;

package/dist/plugins/devtools/DevToolsExperience.svelte

@@ -6,9 +6,8 @@
   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 { getExperience, getPicked } from '../../hooks'
+  import { Button, Heading, Stack } from './ui'
   import Tabs from './components/Tabs.svelte'
   import ExperiencesListScreen from './screens/experiences/ExperiencesListScreen.svelte'
   import ExperienceInstancesListScreen from './screens/experience-instances/ExperienceInstancesListScreen.svelte'
@@ -20,8 +19,12 @@
   import ResponsesListScreen from './screens/responses/ResponsesListScreen.svelte'
   import FeaturesListScreen from './screens/features/FeaturesListScreen.svelte'
   import EventsListScreen from './screens/events/EventsListScreen.svelte'
+  import PickedIcon from './PickedIcon.svelte'
 
   const experience = getExperience()
+  const client = getPicked()
+
+  const dashboardProjectUrl = `${client.dashboardUrl}/p/${client.projectId}`
 
   const tabs = [
     {
@@ -101,10 +104,15 @@
     <div class="container">
       <header class="toolbar" id="devtools-header">
         <div class="toolbar-left">
-          <PickedLogo width={80} height={28} />
+          <Stack direction="horizontal" gap="small" >
+            <PickedIcon height={25} width={25}/>
+            <Heading size="small">Developer Tools</Heading>
+          </Stack>
         </div>
         <div class="toolbar-center"></div>
         <div class="toolbar-right">
+          <Button variant="ghost" size="small" href={client.documentationSiteUrl} target="_blank">Docs</Button>
+          <Button variant="ghost" size="small" href={dashboardProjectUrl} target="_blank">Dashboard</Button>
           <Button variant="ghost" size="small" onclick={() => experience.close()}>Close</Button>
         </div>
       </header>
@@ -118,9 +126,9 @@
     class="floating-button"
     onclick={() => experience.open()}
     aria-label="Open Picked Devtools"
-    title="Open Picked Devtools (or press .)"
+    title="Open Picked Devtools"
   >
-    <PickedLogo />
+    <PickedIcon height={25} width={25}/>
   </button>
 {/if}
 
@@ -131,6 +139,80 @@
   }
 
   .devtools {
+    /* Colors — match Tailwind's default palette exactly */
+    --color-blue-500: #3b82f6;
+    --color-blue-600: #2563eb;
+    --color-blue-700: #1d4ed8;
+    --color-blue-800: #1e40af;
+    --color-gray-50: #f9fafb;
+    --color-gray-100: #f3f4f6;
+    --color-gray-200: #e5e7eb;
+    --color-gray-300: #d1d5db;
+    --color-gray-500: #6b7280;
+    --color-gray-600: #4b5563;
+    --color-gray-700: #374151;
+    --color-gray-900: #111827;
+    --color-red-500: #ef4444;
+    --color-red-600: #dc2626;
+    --color-red-700: #b91c1c;
+    --color-red-800: #991b1b;
+    --color-green-100: #dcfce7;
+    --color-green-700: #15803d;
+    --color-green-800: #166534;
+    --color-yellow-100: #fef9c3;
+    --color-yellow-700: #a16207;
+    --color-yellow-800: #854d0e;
+    --color-white: #ffffff;
+    --color-black: #000000;
+
+    /* Typography — match Tailwind's type scale */
+    --text-xs: 0.75rem;
+    --text-sm: 0.875rem;
+    --text-base: 1rem;
+    --text-lg: 1.125rem;
+    --text-xl: 1.25rem;
+    --text-2xl: 1.5rem;
+    --font-normal: 400;
+    --font-medium: 500;
+    --font-semibold: 600;
+
+    /* Spacing — match Tailwind's spacing scale */
+    --space-0: 0;
+    --space-0-5: 0.125rem;
+    --space-1: 0.25rem;
+    --space-1-5: 0.375rem;
+    --space-2: 0.5rem;
+    --space-2-5: 0.625rem;
+    --space-3: 0.75rem;
+    --space-4: 1rem;
+    --space-5: 1.25rem;
+    --space-6: 1.5rem;
+    --space-8: 2rem;
+
+    /* Radii */
+    --radius-sm: 0.125rem;
+    --radius-md: 0.375rem;
+    --radius-lg: 0.5rem;
+    --radius-xl: 0.75rem;
+    --radius-full: 9999px;
+
+    /* Shadows */
+    --shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+
+    /* Focus ring — matches dashboard's ring-2 ring-blue-500 ring-offset-2 */
+    --ring-color: var(--color-blue-500);
+    --ring-width: 2px;
+    --ring-offset: 2px;
+
+    /* Base typography reset */
+    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+      'Helvetica Neue', Arial, sans-serif;
+    font-size: var(--text-sm);
+    line-height: 1.5;
+    color: var(--color-gray-900);
+
     position: fixed;
     inset: 0;
     z-index: 999999999;
@@ -184,6 +266,7 @@
   .toolbar-right {
     display: flex;
     align-items: center;
+    gap: var(--space-1);
   }
 
   .main {
@@ -214,36 +297,101 @@
     background-color: var(--color-gray-50);
   }
 
+  .devtools :global(th:first-child),
+  .devtools :global(td:first-child) {
+    padding-left: var(--space-4);
+  }
+
+  .devtools :global(th:last-child),
+  .devtools :global(td:last-child) {
+    padding-right: var(--space-4);
+  }
+
   .floating-button {
     position: fixed;
-    bottom: 1.5rem;
+    bottom: 1rem;
     right: 1.5rem;
-    width: 4.5rem;
-    height: 4.5rem;
-    border-radius: var(--radius-full);
+    border-radius: 6px;
     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;
-    justify-content: center;
+    display: grid;
+    place-items: center;
     cursor: pointer;
     z-index: 999999;
-    transition: all 0.2s ease;
-    padding: 0;
+    border: 0 transparent;
+    padding: 6px;
+    box-shadow: 2px 2px 4px #00000029;
+
+    &:hover {
+      background-color: #f5f5f5;
+    }
   }
 
-  .floating-button:hover {
-    box-shadow: 0 6px 16px rgba(21, 73, 255, 0.3);
-    transform: scale(1.05);
+  /** Compact inline form elements for use within table cells */
+  .devtools :global(.inline-select),
+  .devtools :global(.inline-input) {
+    font-size: var(--text-xs);
+    padding: var(--space-0-5) var(--space-1);
+    border: 1px solid var(--color-gray-300);
+    border-radius: var(--radius-sm);
+    font-family: inherit;
   }
 
-  .floating-button:active {
-    transform: scale(0.95);
+  .devtools :global(.inline-input) {
+    width: 100%;
   }
 
-  .floating-button :global(svg) {
-    width: 2.25rem;
-    height: 2.25rem;
+  .devtools :global(.inline-select:focus),
+  .devtools :global(.inline-input:focus) {
+    outline: none;
+    box-shadow: 0 0 0 var(--ring-width) var(--ring-color);
+  }
+
+  /** Textarea elements within devtools */
+  .devtools :global(textarea) {
+    width: 100%;
+    min-height: 60px;
+    font-family: monospace;
+    font-size: var(--text-xs);
+    padding: var(--space-1);
+    border: 1px solid var(--color-gray-300);
+    border-radius: var(--radius-md);
+  }
+
+  .devtools :global(textarea:focus) {
+    outline: none;
+    box-shadow: 0 0 0 var(--ring-width) var(--ring-color);
+  }
+
+  /** Event detail panel styling */
+  .devtools :global(.details-cell) {
+    background-color: var(--color-gray-50);
+    padding: var(--space-4);
+    border-left: 3px solid var(--color-blue-500);
+  }
+
+  /** Expand/collapse icon for table rows */
+  .devtools :global(.expand-icon) {
+    margin-right: var(--space-2);
+    display: inline-block;
+    width: 12px;
+  }
+
+  /** Clickable table rows (e.g., expandable event rows) */
+  .devtools :global(.event-row) {
+    cursor: pointer;
+  }
+
+  /** Centered checkbox cell in tables */
+  .devtools :global(.include-cell) {
+    text-align: center;
+    width: 2.5rem;
+  }
+
+  /** Inline option label for checkbox/radio lists in table cells */
+  .devtools :global(.option-label) {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    cursor: pointer;
   }
 </style>

package/dist/plugins/devtools/PickedIcon.svelte

@@ -0,0 +1,19 @@
+<!-- PickedIcon.svelte -->
+<script lang="ts">
+  export let width = 48
+  export let height = 48
+</script>
+
+<svg {width} {height} viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g opacity="0.5">
+    <ellipse opacity="0.8" cx="32.5807" cy="7.38424" rx="6.29832" ry="6.29832" fill="#01AD7A"/>
+    <circle opacity="0.6" cx="31.4947" cy="8.47015" r="6.29832" fill="#01AD7A"/>
+    <ellipse opacity="0.4" cx="30.4088" cy="9.55607" rx="6.29832" ry="6.29832" fill="#01AD7A"/>
+    <ellipse opacity="0.2" cx="29.3229" cy="10.642" rx="6.29832" ry="6.29832" fill="#01AD7A"/>
+    <circle opacity="0.1" cx="28.237" cy="11.7279" r="6.29832" fill="#01AD7A"/>
+  </g>
+  <ellipse cx="33.6664" cy="6.29832" rx="6.29832" ry="6.29832" fill="#00CD90"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5997 16.1802C14.5788 16.1802 16.1832 14.5758 16.1832 12.5967C16.1832 10.6175 14.5788 9.01315 12.5997 9.01315C10.6206 9.01315 9.01617 10.6175 9.01617 12.5967C9.01617 14.5758 10.6206 16.1802 12.5997 16.1802ZM12.5997 18.895C16.0782 18.895 18.898 16.0751 18.898 12.5967C18.898 9.11821 16.0782 6.29836 12.5997 6.29836C9.12123 6.29836 6.30138 9.11821 6.30138 12.5967C6.30138 16.0751 9.12123 18.895 12.5997 18.895Z" fill="#1549FF"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5997 30.9486C14.5788 30.9486 16.1832 29.3442 16.1832 27.3651C16.1832 25.386 14.5788 23.7816 12.5997 23.7816C10.6206 23.7816 9.01617 25.386 9.01617 27.3651C9.01617 29.3442 10.6206 30.9486 12.5997 30.9486ZM12.5997 33.6634C16.0782 33.6634 18.898 30.8436 18.898 27.3651C18.898 23.8866 16.0782 21.0668 12.5997 21.0668C9.12123 21.0668 6.30138 23.8866 6.30138 27.3651C6.30138 30.8436 9.12123 33.6634 12.5997 33.6634Z" fill="#1549FF"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M27.3683 30.9486C29.3474 30.9486 30.9518 29.3442 30.9518 27.3651C30.9518 25.386 29.3474 23.7816 27.3683 23.7816C25.3891 23.7816 23.7847 25.386 23.7847 27.3651C23.7847 29.3442 25.3891 30.9486 27.3683 30.9486ZM27.3683 33.6634C30.8467 33.6634 33.6666 30.8436 33.6666 27.3651C33.6666 23.8866 30.8467 21.0668 27.3683 21.0668C23.8898 21.0668 21.0699 23.8866 21.0699 27.3651C21.0699 30.8436 23.8898 33.6634 27.3683 33.6634Z" fill="#1549FF"/>
+</svg>

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

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { ExperienceInstance } from '@picked/client'
   import ExperienceInstanceListItem from './ExperienceInstanceListItem.svelte'
-  import { DataTable, EmptyState } from '../ui'
+  import { Card, DataTable, EmptyState, Stack } from '../ui'
 
   export let experienceInstances: ExperienceInstance[]
 
@@ -18,12 +18,16 @@
   ]
 </script>
 
-<DataTable columns={columns} rows={experienceInstances}>
-  {#snippet row(item)}
-    {@const experienceInstance = item}
-    <ExperienceInstanceListItem {experienceInstance} />
-  {/snippet}
-  {#snippet empty()}
-    <EmptyState message="No experience instances" />
-  {/snippet}
-</DataTable>
+<Stack padding="medium">
+  <Card sectioned>
+    <DataTable columns={columns} rows={experienceInstances}>
+      {#snippet row(item)}
+        {@const experienceInstance = item}
+        <ExperienceInstanceListItem {experienceInstance} />
+      {/snippet}
+      {#snippet empty()}
+        <EmptyState message="No experience instances" />
+      {/snippet}
+    </DataTable>
+  </Card>
+</Stack>

package/dist/plugins/devtools/plugin.d.ts

@@ -1,7 +1,15 @@
 import { Plugin } from '@picked/client';
+export interface SvelteDevtoolsPluginOptions {
+    /**
+     * When `true`, the devtools experience launches automatically on page load.
+     * When `false`, devtools can only be opened via the Picked Chrome extension.
+     *
+     * @default false
+     */
+    enabled?: boolean;
+}
 /**
- * Enables Svelte component rendering compatability.
- * This plugin registers the Svelte framework and allows rendering Svelte components
- * with the client's experience data.
+ * Registers the devtools experience for on-demand loading via the Chrome DevTools extension.
+ * The devtools component is lazily loaded — it is never included in the initial bundle.
  */
-export declare const svelteDevtoolsPlugin: () => Plugin[];
+export declare const svelteDevtoolsPlugin: (options?: SvelteDevtoolsPluginOptions) => Plugin[];

package/dist/plugins/devtools/plugin.js

@@ -1 +1 @@
-import{supportsDocument as c,isPickedRoot as a}from"@picked/client";import{createExperiencePlugin as g}from"@picked/client/plugins/create-experience";import{devtoolsExperience as r}from"./experience.js";const m=()=>[{name:"svelte-devtools",setup:t=>{if(!c())return;const s=t.experienceInstances.getByExperienceId(r.id),i=e=>{if(!(!e.target||!("tagName"in e.target)||typeof e.target.tagName!="string")&&e.key==="."&&!["INPUT","TEXTAREA"].includes(e.target.tagName)&&!(e.currentTarget instanceof HTMLElement&&a(e.currentTarget))&&!(e.target instanceof HTMLElement&&a(e.target))){const n=s.getState();n.length>0?n.forEach(o=>o.toggleOpen()):t.launchExperienceById(r.id)}};document.addEventListener("keydown",i),t.eventBus.watch(e=>{e.type==="ready"&&t.launchExperienceById(r.id)})}},g({experiences:[r]})];export{m as svelteDevtoolsPlugin};
+import{__vitePreload as t}from"../../_virtual/preload-helper.js";import{lazyComponent as n}from"@picked/client";import{createExperience as r,createExperiencePlugin as i}from"@picked/client/plugins/create-experience";import{adaptSvelteComponent as l}from"../../component.js";const d=o=>{const e=r({id:"devtools",name:"Picked Devtools",condition:o?.enabled??!1,initializeOpen:!1,targets:[{selector:"body",placement:"append"}],component:l(n(()=>t(()=>import("./DevToolsExperience.svelte"),[])))});return e.addStep({label:"Tools"}),[i({experiences:[e]})]};export{d as svelteDevtoolsPlugin};

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

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { getPicked } from '../../../../hooks'
-  import { DataTable, EmptyState } from '../../ui'
+  import { Card, DataTable, EmptyState, Stack } from '../../ui'
 
   const client = getPicked()
 
@@ -12,15 +12,19 @@
   ]
 </script>
 
-<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>
+<Stack padding="medium">
+  <Card sectioned>
+    <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>
+  </Card>
+</Stack>

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

@@ -2,7 +2,7 @@
   import { combine, createStore, createEvent, sample } from 'effector'
   import { getPicked } from '../../../../hooks'
   import EventListItem from './EventListItem.svelte'
-  import { DataTable, EmptyState } from '../../ui'
+  import { Card, DataTable, EmptyState, Stack } from '../../ui'
   import type { EventHistoryEntry } from '@picked/client'
 
   const { events } = getPicked()
@@ -51,22 +51,26 @@
   }
 </script>
 
-<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>
+<Stack padding="medium">
+  <Card sectioned>
+    <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>
+  </Card>
+</Stack>

package/dist/plugins/devtools/screens/experience-instances/ExperienceInstancesListScreen.svelte

@@ -7,6 +7,4 @@
   $: experienceInstances = client.experienceInstances.listStore
 </script>
 
-<div>
-  <ExperienceInstancesTable experienceInstances={$experienceInstances} />
-</div>
+<ExperienceInstancesTable experienceInstances={$experienceInstances} />

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

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { ExperienceStore } from '@picked/client'
   import { getPicked } from '../../../../hooks'
-  import { Button, Text, CodeBlock, Stack } from '../../ui'
+  import { Button, Card, Text, CodeBlock, Stack } from '../../ui'
 
   const client = getPicked()
   export let experience: ExperienceStore
@@ -10,34 +10,38 @@
 </script>
 
 <Stack direction="vertical" gap="medium" padding="medium">
-  <div>
+  <Stack direction="horizontal" gap="small">
     <Button variant="primary" size="small" onclick={() => client.launchExperienceById(experience.id)}>
       Launch experience
     </Button>
-  </div>
+  </Stack>
 
-  <div>
-    <Text weight="semibold">Type</Text>
-    <Text>{$config.type}</Text>
-  </div>
+  <Card sectioned>
+    <Stack direction="vertical" gap="medium" padding="medium">
+      <div>
+        <Text weight="semibold">Type</Text>
+        <Text>{$config.type}</Text>
+      </div>
 
-  <div>
-    <Text weight="semibold">Target selectors</Text>
-    <ul>
-      {#if $config.targetSelectors.length > 0}
-        {#each $config.targetSelectors as selector (selector)}
-          <li>
-            <CodeBlock code="{selector.selector} || {selector.placement}" />
-          </li>
-        {/each}
-      {:else}
-        <li><Text color="subdued">(none)</Text></li>
-      {/if}
-    </ul>
-  </div>
+      <div>
+        <Text weight="semibold">Target selectors</Text>
+        <ul>
+          {#if $config.targetSelectors.length > 0}
+            {#each $config.targetSelectors as selector (selector)}
+              <li>
+                <CodeBlock code="{selector.selector} || {selector.placement}" />
+              </li>
+            {/each}
+          {:else}
+            <li><Text color="subdued">(none)</Text></li>
+          {/if}
+        </ul>
+      </div>
 
-  <div>
-    <Text weight="semibold">Decision logic</Text>
-    <CodeBlock code={JSON.stringify($config.decisionLogic, null, 2)} />
-  </div>
+      <div>
+        <Text weight="semibold">Decision logic</Text>
+        <CodeBlock code={JSON.stringify($config.decisionLogic, null, 2)} />
+      </div>
+    </Stack>
+  </Card>
 </Stack>

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

@@ -10,6 +10,4 @@
   $: experienceInstances = client.experienceInstances.getByExperienceId(experience.id)
 </script>
 
-<div>
-  <ExperienceInstancesTable experienceInstances={$experienceInstances} />
-</div>
+<ExperienceInstancesTable experienceInstances={$experienceInstances} />

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

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { createStore, createEvent } from 'effector'
+  import { createEvent, createStore } from 'effector'
   import type { FeatureBucket } from '@picked/client'
   import { getPicked, useUnit } from '../../../../hooks'
-  import { DataTable, EmptyState, Button, Text, CopyButton, Card, CodeBlock, Stack } from '../../ui'
+  import { Button, Card, CodeBlock, CopyButton, DataTable, EmptyState, Stack, Text } from '../../ui'
 
   interface FeatureSelection {
     included: boolean
@@ -87,8 +87,9 @@
     generated URL. Recipients will see the overridden values on page load.
   </Text>
 
-  <DataTable columns={columns} rows={$featuresList}>
-    {#snippet row(item)}
+  <Card sectioned>
+    <DataTable columns={columns} rows={$featuresList}>
+      {#snippet row(item)}
       {@const feature = item}
       {@const selection = $selections[feature.id]}
       {@const currentValue = getBucketValue(feature)}
@@ -105,7 +106,7 @@
           </td>
           <td>
             <Text size="small" weight="medium">{feature.name}</Text>
-            <CodeBlock code={feature.key} inline />
+            <CodeBlock code={feature.id + ':' + feature.key} inline />
           </td>
           <td>
             {#if currentValue !== null}
@@ -141,10 +142,11 @@
         </tr>
       {/if}
     {/snippet}
-    {#snippet empty()}
-      <EmptyState message="No features registered" />
-    {/snippet}
-  </DataTable>
+      {#snippet empty()}
+        <EmptyState message="No features registered" />
+      {/snippet}
+    </DataTable>
+  </Card>
 
   <Card>
     {#snippet header()}

package/dist/plugins/devtools/screens/frameworks/FrameworksListScreen.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { getPicked } from '../../../../hooks'
-  import { DataTable, EmptyState } from '../../ui'
+  import { Card, DataTable, EmptyState, Stack } from '../../ui'
 
   const client = getPicked()
 
@@ -9,14 +9,18 @@
   const columns = [{ key: 'name', header: 'Name' }]
 </script>
 
-<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>
+<Stack padding="medium">
+  <Card sectioned>
+    <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>
+  </Card>
+</Stack>

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

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { HistoryEntry } from '@picked/client'
   import HistoryEntryListItem from './HistoryEntryListItem.svelte'
-  import { DataTable, EmptyState } from '../../ui'
+  import { Card, DataTable, EmptyState, Stack } from '../../ui'
 
   export let historyEntries: HistoryEntry[]
 
@@ -14,12 +14,16 @@
   ]
 </script>
 
-<DataTable columns={columns} rows={historyEntries}>
-  {#snippet row(item)}
-    {@const historyEntry = item}
-    <HistoryEntryListItem {historyEntry} />
-  {/snippet}
-  {#snippet empty()}
-    <EmptyState message="No history entries" />
-  {/snippet}
-</DataTable>
+<Stack padding="medium">
+  <Card sectioned>
+    <DataTable columns={columns} rows={historyEntries}>
+      {#snippet row(item)}
+        {@const historyEntry = item}
+        <HistoryEntryListItem {historyEntry} />
+      {/snippet}
+      {#snippet empty()}
+        <EmptyState message="No history entries" />
+      {/snippet}
+    </DataTable>
+  </Card>
+</Stack>

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

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { getPicked } from '../../../../hooks'
-  import { DataTable, EmptyState } from '../../ui'
+  import { Card, DataTable, EmptyState, Stack } from '../../ui'
 
   const client = getPicked()
 
@@ -9,14 +9,18 @@
   const columns = [{ key: 'name', header: 'Name' }]
 </script>
 
-<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>
+<Stack padding="medium">
+  <Card sectioned>
+    <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>
+  </Card>
+</Stack>

package/dist/plugins/devtools/screens/project/ProjectScreen.svelte

@@ -1 +1,47 @@
-<p>todo: project</p>
+<script lang="ts">
+  import { getPicked } from '../../../../hooks'
+  import { Button, Card, CodeBlock, DataTable, Stack, Text } from '../../ui'
+
+  const client = getPicked()
+
+  const dashboardProjectUrl = `${client.dashboardUrl}/p/${client.projectId}`
+
+  const columns = [
+    { key: 'label', header: 'Property' },
+    { key: 'value', header: 'Value' },
+  ]
+
+  const rows = [
+    { label: 'Project ID', value: client.projectId },
+    { label: 'Organization ID', value: client.organizationId },
+    { label: 'API URL', value: client.apiUrl },
+    { label: 'Dashboard URL', value: client.dashboardUrl },
+  ]
+</script>
+
+<Stack direction="vertical" gap="medium" padding="medium">
+  <Text size="caption" color="subdued">
+    Project configuration for this Picked client instance.
+  </Text>
+
+  <Card sectioned>
+    <DataTable {columns} {rows}>
+      {#snippet row(item)}
+        <tr>
+          <td>
+            <Text size="small" weight="medium">{item.label}</Text>
+          </td>
+          <td>
+            <CodeBlock code={item.value} inline />
+          </td>
+        </tr>
+      {/snippet}
+    </DataTable>
+  </Card>
+
+  <Stack direction="horizontal" gap="small">
+    <Button variant="primary" size="small" href={dashboardProjectUrl} target="_blank">
+      Open in Dashboard
+    </Button>
+  </Stack>
+</Stack>

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

@@ -2,7 +2,7 @@
   import type { ResponseListItem, Field } from '@picked/client'
   import { getPicked } from '../../../../hooks'
   import ResponseTableRow from './ResponseTableRow.svelte'
-  import { DataTable, EmptyState, Button, RadioGroup, Stack } from '../../ui'
+  import { Card, DataTable, EmptyState, Button, RadioGroup, Stack } from '../../ui'
 
   export let responses: ResponseListItem[] = []
 
@@ -51,27 +51,29 @@
   $: filterOptions[2] = { value: 'unset', label: `Unset (${allFields.length - responses.length})` }
 </script>
 
-<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 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>
+<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

@@ -18,6 +18,7 @@
     type?: 'button' | 'submit' | 'reset'
     fullWidth?: boolean
     href?: string
+    target?: string
     onclick?: (event: MouseEvent) => void
   }
 
@@ -31,6 +32,7 @@
     type = 'button',
     fullWidth = false,
     href,
+    target,
     onclick,
   }: Props = $props()
 
@@ -43,6 +45,8 @@
     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

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

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts" generics="T">
   import type { Snippet } from 'svelte'
 
   interface Column {
@@ -9,8 +9,8 @@
 
   interface Props {
     columns: Column[]
-    rows: unknown[]
-    row: Snippet<[unknown, number]>
+    rows: T[]
+    row: Snippet<[T, number]>
     empty?: Snippet
     sortKey?: string | null
     sortDirection?: 'asc' | 'desc'
@@ -131,4 +131,14 @@
   :global(tbody tr.selected) {
     background-color: color-mix(in srgb, var(--color-blue-500) 8%, var(--color-white));
   }
+
+  th:first-child,
+  :global(tbody td:first-child) {
+    padding-left: var(--space-4);
+  }
+
+  th:last-child,
+  :global(tbody td:last-child) {
+    padding-right: var(--space-4);
+  }
 </style>

package/dist/render/browser.js

@@ -1 +1 @@
-import{mount as a}from"svelte";import{isValidAdaptedComponent as u}from"../component.js";import{CLIENT_CONTEXT_KEY as d,EXPERIENCE_CONTEXT_KEY as E}from"../context.js";import{mergeArrays as p}from"../utils/array.js";import f from"../utils/ErrorBoundary.svelte";function y(n,e){return new Map([[d,n],[E,e]])}const g=async(n,e,s,o,i)=>{if(!u(e))throw new Error("The component is invalid.");const c=p(e.style?.sheets,i.stylesheets),m=p(e.style?.css,i.css);c.length&&c.forEach(r=>{const t=document.createElement("link");t.setAttribute("rel","stylesheet"),t.setAttribute("href",r),t.setAttribute("type","text/css"),t.setAttribute("picked-injected","true"),n.appendChild(t)}),m.length&&m.forEach(r=>{const t=document.createElement("style");t.textContent=r,t.setAttribute("type","text/css"),t.setAttribute("picked-injected","true"),n.appendChild(t)});const l=r=>{a(f,{target:n,props:{component:r,componentProps:{client:s,experience:o}},context:y(s,o)})};if(e.component instanceof Promise){const{default:r}=await e.component;l(r);return}l(e.component)},x=n=>{};export{y as createContext,g as renderSvelteComponent,x as unRenderSvelteComponent};
+import{isLazyLoader as p}from"@picked/client";import{mount as u}from"svelte";import{isValidAdaptedComponent as d}from"../component.js";import{CLIENT_CONTEXT_KEY as f,EXPERIENCE_CONTEXT_KEY as E}from"../context.js";import{mergeArrays as l}from"../utils/array.js";import y from"../utils/ErrorBoundary.svelte";function C(n,t){return new Map([[f,n],[E,t]])}const k=async(n,t,s,i,c)=>{if(!d(t))throw new Error("The component is invalid.");const m=l(t.style?.sheets,c.stylesheets),a=l(t.style?.css,c.css);m.length&&m.forEach(r=>{const e=document.createElement("link");e.setAttribute("rel","stylesheet"),e.setAttribute("href",r),e.setAttribute("type","text/css"),e.setAttribute("picked-injected","true"),n.appendChild(e)}),a.length&&a.forEach(r=>{const e=document.createElement("style");e.textContent=r,e.setAttribute("type","text/css"),e.setAttribute("picked-injected","true"),n.appendChild(e)});const o=r=>{u(y,{target:n,props:{component:r,componentProps:{client:s,experience:i}},context:C(s,i)})};if(p(t.component)){const{default:r}=await t.component.load();o(r);return}if(t.component instanceof Promise){const{default:r}=await t.component;o(r);return}o(t.component)},N=n=>{};export{C as createContext,k as renderSvelteComponent,N as unRenderSvelteComponent};

package/dist/render/server.js

@@ -1 +1 @@
-import{render as a}from"svelte/server";import{isValidAdaptedComponent as E}from"../component.js";import{CLIENT_CONTEXT_KEY as p,EXPERIENCE_CONTEXT_KEY as f}from"../context.js";import{mergeArrays as n}from"../utils/array.js";function d(t,s){return new Map([[p,t],[f,s]])}const C=async(t,s,e,o)=>{if(!E(t))throw new Error("The component is invalid.");const h=n(t.style?.sheets,o.stylesheets),m=n(t.style?.css,o.css),r=t.component instanceof Promise?a((await t.component).default,{props:{client:s,experience:e},context:d(s,e)}):a(t.component,{props:{client:s,experience:e},context:d(s,e)});return{stylesheets:h,css:m,head:r.head,html:r.html,body:r.body,hashes:r.hashes}};export{d as createContext,C as staticRenderSvelteComponent};
+import{isLazyLoader as m}from"@picked/client";import{render as l}from"svelte/server";import{isValidAdaptedComponent as h}from"../component.js";import{CLIENT_CONTEXT_KEY as f,EXPERIENCE_CONTEXT_KEY as p}from"../context.js";import{mergeArrays as n}from"../utils/array.js";function c(e,t){return new Map([[f,e],[p,t]])}const w=async(e,t,o,a)=>{if(!h(e))throw new Error("The component is invalid.");const d=n(e.style?.sheets,a.stylesheets),i=n(e.style?.css,a.css);let s;m(e.component)?s=(await e.component.load()).default:e.component instanceof Promise?s=(await e.component).default:s=e.component;const r=l(s,{props:{client:t,experience:o},context:c(t,o)});return{stylesheets:d,css:i,head:r.head,html:r.html,body:r.body,hashes:r.hashes}};export{c as createContext,w as staticRenderSvelteComponent};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@picked/svelte",
-  "version": "0.0.45-next.4",
+  "version": "0.0.45-next.5",
   "dependencies": {
     "d3": "^7.9.0"
   },
@@ -86,7 +86,7 @@
   },
   "module": "./dist/index.js",
   "peerDependencies": {
-    "@picked/client": "0.0.45-next.4",
+    "@picked/client": "0.0.45-next.5",
     "effector": "^23.3.0",
     "svelte": "^5.34.3"
   },

package/dist/plugins/devtools/experience.d.ts

@@ -1 +0,0 @@
-export declare const devtoolsExperience: import('@picked/client/plugins/create-experience').SerializableExperience;

package/dist/plugins/devtools/experience.js

@@ -1 +0,0 @@
-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/ui/tokens.css.js

@@ -1 +0,0 @@
-const e=".devtools{--color-blue-500: #3b82f6;--color-blue-600: #2563eb;--color-blue-700: #1d4ed8;--color-blue-800: #1e40af;--color-gray-50: #f9fafb;--color-gray-100: #f3f4f6;--color-gray-200: #e5e7eb;--color-gray-300: #d1d5db;--color-gray-500: #6b7280;--color-gray-600: #4b5563;--color-gray-700: #374151;--color-gray-900: #111827;--color-red-500: #ef4444;--color-red-600: #dc2626;--color-red-700: #b91c1c;--color-red-800: #991b1b;--color-green-100: #dcfce7;--color-green-700: #15803d;--color-green-800: #166534;--color-yellow-100: #fef9c3;--color-yellow-700: #a16207;--color-yellow-800: #854d0e;--color-white: #ffffff;--color-black: #000000;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--font-normal: 400;--font-medium: 500;--font-semibold: 600;--space-0: 0;--space-0-5: .125rem;--space-1: .25rem;--space-1-5: .375rem;--space-2: .5rem;--space-2-5: .625rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--radius-sm: .125rem;--radius-md: .375rem;--radius-lg: .5rem;--radius-xl: .75rem;--radius-full: 9999px;--shadow-card: 0 1px 2px 0 rgba(0, 0, 0, .03);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);--ring-color: var(--color-blue-500);--ring-width: 2px;--ring-offset: 2px;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:var(--text-sm);line-height:1.5;color:var(--color-gray-900)}.devtools .inline-select,.devtools .inline-input{font-size:var(--text-xs);padding:var(--space-0-5) var(--space-1);border:1px solid var(--color-gray-300);border-radius:var(--radius-sm);font-family:inherit}.devtools .inline-input{width:100%}.devtools .inline-select:focus,.devtools .inline-input:focus{outline:none;box-shadow:0 0 0 var(--ring-width) var(--ring-color)}.devtools textarea{width:100%;min-height:60px;font-family:monospace;font-size:var(--text-xs);padding:var(--space-1);border:1px solid var(--color-gray-300);border-radius:var(--radius-md)}.devtools textarea:focus{outline:none;box-shadow:0 0 0 var(--ring-width) var(--ring-color)}.devtools .details-cell{background-color:var(--color-gray-50);padding:var(--space-4);border-left:3px solid var(--color-blue-500)}.devtools .expand-icon{margin-right:var(--space-2);display:inline-block;width:12px}.devtools .event-row{cursor:pointer}.devtools .include-cell{text-align:center;width:2.5rem}.devtools .option-label{display:flex;align-items:center;gap:var(--space-2);cursor:pointer}";export{e as default};