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

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

@@ -1,47 +1,22 @@
-<script lang="ts" generics="P extends Record<string, unknown> = Record<string, never>">
-  /** @file Accessible tab container that renders dynamic Svelte components per tab. */
+<script lang="ts">
   import type { Component } from 'svelte'
 
   interface Tab {
     id: string
     label: string
-    component: Component<P>
-    props: P
+    component: Component<any>
+    props?: Record<string, unknown>
   }
 
   export let tabs: Tab[]
   export let initialTab = 0
 
   let activeTab = initialTab
-  // Keyed by tab index — written at render time via Svelte `bind:this`. A
-  // record rather than an array sidesteps `sonarjs/no-empty-collection`,
-  // whose flow analysis can't see the bind writes.
-  const tabButtons: Record<number, HTMLButtonElement | undefined> = {}
-
-  /**
-   * Sets the active tab to the given index and scrolls the corresponding button into the
-   * horizontal viewport so keyboard navigation never lands off-screen.
-   *
-   * @param {number} index - The zero-based tab index to activate.
-   * @example
-   * ```typescript
-   * activateTab(2) // switches to the third tab and scrolls it into view
-   * ```
-   */
+
   function activateTab(index: number) {
     activeTab = index
-    tabButtons[index]?.scrollIntoView({ inline: 'nearest', block: 'nearest', behavior: 'smooth' })
   }
 
-  /**
-   * Handles arrow-key, Home, and End navigation within the tab list.
-   *
-   * @param {KeyboardEvent} event - The keyboard event from the tab list.
-   * @example
-   * ```typescript
-   * handleKeydown(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
-   * ```
-   */
   function handleKeydown(event: KeyboardEvent) {
     const tabCount = tabs.length
     let newIndex = activeTab
@@ -72,7 +47,6 @@
   <div role="tablist" tabindex="0" on:keydown={handleKeydown} class="tab-list">
     {#each tabs as tab, i (tab.id)}
       <button
-        bind:this={tabButtons[i]}
         role="tab"
         id="tab-{tab.id}"
         aria-controls="panel-{tab.id}"
@@ -97,7 +71,7 @@
       hidden={activeTab !== i}
     >
       {#if activeTab === i}
-        <svelte:component this={tab.component} {...tab.props} />
+        <svelte:component this={tab.component} {...tab.props || {}} />
       {/if}
     </div>
   {/each}
@@ -108,68 +82,37 @@
     width: 100%;
     display: flex;
     flex-direction: column;
-    flex: 1;
-    min-height: 0;
   }
 
   .tab-list {
     display: flex;
-    border-bottom: 1px solid var(--color-gray-200);
-    flex-shrink: 0;
-    overflow-x: auto;
-    overflow-y: hidden;
-    scrollbar-width: thin;
-    scrollbar-color: var(--color-gray-300) transparent;
-    scroll-behavior: smooth;
-  }
-
-  .tab-list::-webkit-scrollbar {
-    height: 6px;
-  }
-
-  .tab-list::-webkit-scrollbar-thumb {
-    background-color: var(--color-gray-300);
-    border-radius: var(--radius-full);
-  }
-
-  .tab-list::-webkit-scrollbar-track {
-    background-color: transparent;
+    border-bottom: 1px solid #ccc;
   }
 
   .tab-button {
-    padding: var(--space-2) var(--space-4);
+    padding: 0.5rem 1rem;
     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: var(--color-gray-100);
-    color: var(--color-gray-900);
+    background-color: #f0f0f0;
   }
 
   .tab-button.active {
-    border-bottom-color: var(--color-gray-900);
-    color: var(--color-gray-900);
-    font-weight: var(--font-medium);
+    border-bottom: 2px solid #000;
   }
 
-  .tab-button:focus-visible {
-    outline: var(--ring-width) solid var(--ring-color);
-    outline-offset: calc(-1 * var(--ring-width));
+  .tab-button:focus {
+    outline: 2px solid #0066cc;
+    outline-offset: -2px;
   }
 
   .tab-panel {
     flex: 1 1 auto;
     display: grid;
-    min-height: 0;
-    overflow: auto;
   }
 
   .tab-panel:not(.active) {

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

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

package/dist/plugins/devtools/experience.js

@@ -0,0 +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:"main",placement:"append"}],type:"funnel",component:o(t)});p.addStep({label:"Tools"});export{p as devtoolsExperience};

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

@@ -1,4 +1,2 @@
-/** @file Public entrypoint for the Svelte devtools plugin — the plugin factory and its consumer-facing types. */
 export { svelteDevtoolsPlugin } from './plugin';
 export type * from './plugin';
-export type { CustomTool } from './customTools';

package/dist/plugins/devtools/index.js

@@ -1 +1 @@
-import{svelteDevtoolsPlugin as e}from"./plugin.js";export{e as svelteDevtoolsPlugin};
+import{svelteDevtoolsPlugin as l}from"./plugin.js";export{l as svelteDevtoolsPlugin};

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

@@ -1,39 +1,7 @@
-/** @file Svelte devtools plugin that registers and lazily loads the Picked DevTools experience. */
-import { type Plugin } from '@picked/client';
-import type { CustomTool } from './customTools';
-/** Plugin name under which the devtools plugin stores its config (including registered custom tools). */
-export declare const DEVTOOLS_PLUGIN_NAME = "svelte-devtools";
-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,
-     * **unless** a preview token is present — in which case the launcher always
-     * mounts so the previewed site remains inspectable in production builds.
-     *
-     * @default false
-     */
-    enabled?: boolean;
-    /**
-     * Project-specific custom dev tools surfaced under the "Custom Tools" tab. Each tool's
-     * `component` is framework-adapted (via `adaptReactComponent` or `adaptSvelteComponent`), so it
-     * can be authored in the host app's framework and still receive the live Picked client the way
-     * an experience component does.
-     *
-     * @default []
-     */
-    customTools?: CustomTool[];
-}
+import { Plugin } from '@picked/client';
 /**
- * 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.
- *
- * @param {SvelteDevtoolsPluginOptions} [options] - Optional configuration for the devtools plugin.
- * @returns {Plugin[]} An array of plugins to register with the Picked client.
- * @example
- * ```typescript
- * const client = new Picked({
- *   plugins: [...svelteDevtoolsPlugin({ enabled: true })],
- * })
- * ```
+ * Enables Svelte component rendering compatability.
+ * This plugin registers the Svelte framework and allows rendering Svelte components
+ * with the client's experience data.
  */
-export declare const svelteDevtoolsPlugin: (options?: SvelteDevtoolsPluginOptions) => Plugin[];
+export declare const svelteDevtoolsPlugin: () => Plugin[];

package/dist/plugins/devtools/plugin.js

@@ -1 +1 @@
-import{adaptSvelteComponent as e}from"../../component.js";import{__vitePreload as t}from"../../_virtual/_vite/preload-helper.js";import{lazyComponent as n}from"@picked/client";import{createExperience as r,createExperiencePlugin as i}from"@picked/client/plugins/create-experience";var a=`svelte-devtools`,o=o=>{let s=r({id:`devtools`,key:`devtools`,name:`Picked Devtools`,condition:!1,initializeOpen:!1,targets:[{selector:`body`,placement:`append`}],component:e(n(()=>t(()=>import(`./DevToolsExperience.svelte`),[])))});return s.addStep({name:`Tools`}),[{name:a,setup:e=>{let t=!!e.searchParams[`preview-token`]?.[0];return(o?.enabled||t)&&e.eventBus.watch(t=>{t.type===`ready`&&e.experiences.launch({key:s.key,options:{bypassCondition:!0}})}),{customTools:o?.customTools??[]}}},i({experiences:[s]})]};export{a as DEVTOOLS_PLUGIN_NAME,o as svelteDevtoolsPlugin};
+import{supportsDocument as c,isPickedRoot as o}from"@picked/client";import{createExperiencePlugin as g}from"@picked/client/plugins/create-experience";import{devtoolsExperience as t}from"./experience.js";const d=()=>[{name:"svelte-devtools",setup:r=>{if(!c())return;const s=r.experienceInstances.getByExperienceId(t.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&&o(e.currentTarget))&&!(e.target instanceof HTMLElement&&o(e.target))){const n=s.getState();n.length>0?n.forEach(a=>a.toggleOpen()):r.launchExperienceById(t.id)}};document.addEventListener("keydown",i)}},g({experiences:[t]})];export{d as svelteDevtoolsPlugin};

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

@@ -1,30 +1,26 @@
 <script lang="ts">
   import { getPicked } from '../../../../hooks'
-  import { Card, DataTable, EmptyState, Stack } from '../../ui'
 
   const client = getPicked()
 
   $: components = client.components.listStore
-
-  const columns = [
-    { key: 'name', header: 'Name' },
-    { key: 'framework', header: 'Framework' },
-  ]
 </script>
 
-<Stack padding="medium">
-  <Card sectioned>
-    <DataTable columns={columns} rows={$components}>
-      {#snippet row(item)}
-        {@const component = item}
+<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>
-      {/snippet}
-      {#snippet empty()}
-        <EmptyState message="No components" />
-      {/snippet}
-    </DataTable>
-  </Card>
-</Stack>
+      {/each}
+    </tbody>
+  </table>
+</div>

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

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

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

@@ -1,8 +1,6 @@
 <script lang="ts">
-  /** @file Detail screen for a single experience, showing its config, target selectors, and decision logic. */
   import type { ExperienceStore } from '@picked/client'
   import { getPicked } from '../../../../hooks'
-  import { Button, Card, Text, CodeBlock, Stack } from '../../ui'
 
   const client = getPicked()
   export let experience: ExperienceStore
@@ -10,35 +8,39 @@
   $: config = experience.configStore
 </script>
 
-<Stack direction="vertical" gap="medium" padding="medium">
-  <Stack direction="horizontal" gap="small">
-    <Button variant="primary" size="small" onclick={() => client.experiences.open({ key: experience.key, options: { bypassCondition: true } })}>
-      Launch experience
-    </Button>
-  </Stack>
+<div class="container">
+  <div>
+    <button on:click={() => client.launchExperienceById(experience.id)}>Launch experience</button>
+  </div>
 
-  <Card sectioned>
-    <Stack direction="vertical" gap="medium" padding="medium">
+  <div>
+    <p><b>Type</b></p>
+    <p>{$config.type}</p>
+  </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>
+    <p><b>Target selectors</b></p>
+    <ul>
+      {#if $config.targetSelectors.length > 0}
+        {#each $config.targetSelectors as selector (selector)}
+          <li>
+            <pre>{selector.selector} || {selector.placement}</pre>
+          </li>
+        {/each}
+      {:else}
+        <li>(none)</li>
+      {/if}
+    </ul>
+  </div>
 
-      <div>
-        <Text weight="semibold">Decision logic</Text>
-        <CodeBlock code={JSON.stringify($config.decisionLogic, null, 2)} />
-      </div>
-    </Stack>
-  </Card>
-</Stack>
+  <div>
+    <p><b>Decision logic</b></p>
+    <pre>{JSON.stringify($config.decisionLogic, null, 2)}</pre>
+  </div>
+</div>
+
+<style>
+  .container {
+    padding: 0.5em;
+  }
+</style>

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

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