@picked/svelte 0.0.1-dev.1793776638554 → 0.0.1-dev.1793835766402

package/dist/plugins/devtools/review/personas/persona-session.d.ts

@@ -0,0 +1,94 @@
+/**
+ * @file A persona session: the tab walks through the experience as one persona. Every field a
+ * screen asks shows the persona's response as its default, flagged `prefilled`, so the reviewer
+ * moves on with Continue or changes a value as a visitor would. Nothing is committed for them.
+ *
+ * The session lasts for the tab, in `sessionStorage`, so a reload keeps it, until the reviewer
+ * stops it. A shared link starts one with the `picked-persona` query parameter.
+ */
+import type { FieldValue } from '@picked/client';
+/** The `sessionStorage` key that names the persona a tab walks through as. */
+export declare const ACTIVE_PERSONA_KEY = "picked-devtools-persona-session";
+/** The query parameter a shared link names a persona with. */
+export declare const PERSONA_LINK_PARAM = "picked-persona";
+/**
+ * The persona this tab walks through as.
+ *
+ * @param {Pick<Storage, 'getItem'>} storage - The tab's `sessionStorage`.
+ * @returns {string | null} The persona's id, or `null` outside a persona session.
+ * @example readActivePersona(sessionStorage)
+ */
+export declare function readActivePersona(storage: Pick<Storage, 'getItem'>): string | null;
+/**
+ * Notes the persona this tab walks through as, or ends the session.
+ *
+ * @param {Pick<Storage, 'setItem' | 'removeItem'>} storage - The tab's `sessionStorage`.
+ * @param {string | null} id - The persona's id; `null` ends the session.
+ * @example writeActivePersona(sessionStorage, null)
+ */
+export declare function writeActivePersona(storage: Pick<Storage, 'setItem' | 'removeItem'>, id: string | null): void;
+/**
+ * The link that starts a walk-through as a site persona on its entry page.
+ *
+ * @param {{ origin: string; pathname: string; search: string }} here - This page's address.
+ * @param {string} here.origin - Its origin.
+ * @param {string} here.pathname - Its path.
+ * @param {string} here.search - Its query.
+ * @param {string | null} entryUrl - The persona's entry page.
+ * @param {string} id - The persona's id.
+ * @returns {string} The full URL.
+ * @example personaLink(window.location, '/sale', 'mover') // 'https://shop.example/sale?picked-persona=mover'
+ */
+export declare function personaLink(here: {
+    origin: string;
+    pathname: string;
+    search: string;
+}, entryUrl: string | null, id: string): string;
+/**
+ * Takes the persona a shared link names off the address bar, so a reload does not start it again.
+ *
+ * @param {{ href: string }} location - The page's location.
+ * @param {string} location.href - Its URL.
+ * @param {(url: string) => void} replace - Replaces the address without a reload.
+ * @returns {string | null} The persona's id, or `null` when the page was not opened from a link.
+ * @example takePersonaLink(window.location, (url) => history.replaceState(history.state, '', url))
+ */
+export declare function takePersonaLink(location: {
+    href: string;
+}, replace: (url: string) => void): string | null;
+/** A field as a walk-through reads and pre-fills it. */
+export interface PrefillField {
+    key: string;
+    defaultValue?: FieldValue;
+    prefilled?: boolean;
+}
+/** A store a walk-through reads, and hears change. */
+export interface ReadableStore<T> {
+    getState: () => T;
+    watch: (watcher: (state: T) => unknown) => () => void;
+}
+/** The part of the client a walk-through pre-fills. */
+export interface PrefillClient {
+    fields: {
+        listStore: ReadableStore<readonly PrefillField[]>;
+        update: (key: string, updates: {
+            defaultValue?: FieldValue;
+            prefilled?: boolean;
+        }) => void;
+    };
+}
+/** A running pre-fill. */
+export interface Prefill {
+    /** Puts back each field's own default and stops pre-filling. */
+    stop: () => void;
+}
+/**
+ * Pre-fills every field a screen asks with the persona's response, now and as fields arrive.
+ *
+ * @param {PrefillClient} client - The client.
+ * @param {Readonly<Record<string, FieldValue>>} answers - The persona's responses.
+ * @param {ReadableStore<ReadonlySet<string>>} asked - The keys the experiences' screens ask.
+ * @returns {Prefill} Stops the pre-fill.
+ * @example const prefill = prefillPersona(client, persona.responses, session.askedStore)
+ */
+export declare function prefillPersona(client: PrefillClient, answers: Readonly<Record<string, FieldValue>>, asked: ReadableStore<ReadonlySet<string>>): Prefill;

package/dist/plugins/devtools/review/personas/persona-session.js

@@ -0,0 +1 @@
+import{loadUrl as e}from"./load-persona.js";var t=`picked-devtools-persona-session`,n=`picked-persona`;function r(e){try{let n=e.getItem(t);return n!==null&&n.length>0?n:null}catch{return null}}function i(e,n){try{n===null?e.removeItem(t):e.setItem(t,n)}catch{}}function a(t,r,i){let a=new URL(e(r,t),t.origin);return a.searchParams.set(n,i),a.toString()}function o(e,t){let r=new URL(e.href),i=r.searchParams.get(n);return i===null||i.length===0?null:(r.searchParams.delete(n),t(r.toString()),i)}function s(e,t,n){let r=new Map,i=()=>{let i=n.getState();for(let n of e.fields.listStore.getState())n.prefilled!==!0&&i.has(n.key)&&Object.hasOwn(t,n.key)&&(r.has(n.key)||r.set(n.key,{defaultValue:n.defaultValue,prefilled:n.prefilled}),e.fields.update(n.key,{defaultValue:t[n.key],prefilled:!0}))},a=[e.fields.listStore.watch(i),n.watch(i)];return{stop:()=>{for(let e of a)e();for(let[t,n]of r)e.fields.update(t,n);r.clear()}}}export{t as ACTIVE_PERSONA_KEY,n as PERSONA_LINK_PARAM,a as personaLink,s as prefillPersona,r as readActivePersona,o as takePersonaLink,i as writeActivePersona};

package/dist/plugins/devtools/sidebar/Sidebar.svelte

@@ -2,40 +2,21 @@
   @paired-component apps/dashboard/src/shared/ui/navigation/sidebar-row-classes.ts
   @design-parity A row mirrors the Dashboard sidebar row: 28px high, text-sm, rounded-md, a 10%
   current-colour fill when selected and 5% on hover, a label that fades out instead of wrapping.
-  The Custom Tools and Developer rows mirror the Dashboard's folding nav group (sidebar-nav-group.tsx).
 -->
 <script lang="ts">
-  /**
-   * @file The devtools sidebar: the main tabs, the folding Custom Tools group, then the folding
-   * Developer group.
-   */
-  import { DEVELOPER_LABEL } from '../derive/plain-language'
+  /** @file The devtools sidebar: one row per tab. */
   import type { NavModel } from './nav'
-  import { CUSTOM_TOOLS_GROUP, CUSTOM_TOOLS_LABEL, nextFocusIndex } from './nav'
+  import { nextFocusIndex } from './nav'
   import SidebarRow from './SidebarRow.svelte'
 
   interface Props {
     nav: NavModel
     /** The selected tab's id. */
     selected: string
-    /** Whether the Developer group lists its screens. */
-    developerOpen: boolean
-    /** Whether the Custom Tools group lists its tools. */
-    customOpen: boolean
     onSelect: (id: string) => void
-    onToggleDeveloper: () => void
-    onToggleCustom: () => void
   }
 
-  const {
-    nav,
-    selected,
-    developerOpen,
-    customOpen,
-    onSelect,
-    onToggleDeveloper,
-    onToggleCustom,
-  }: Props = $props()
+  const { nav, selected, onSelect }: Props = $props()
 
   let list: HTMLElement | undefined = $state()
 
@@ -66,50 +47,10 @@
       <SidebarRow
         label={item.label}
         testId="devtools-nav-{item.id}"
-        depth={0}
         selected={selected === item.id}
         onPress={() => onSelect(item.id)}
       />
     {/each}
-    {#if nav.custom.length > 0}
-      <SidebarRow
-        label={CUSTOM_TOOLS_LABEL}
-        testId="devtools-nav-{CUSTOM_TOOLS_GROUP}"
-        depth={0}
-        expanded={customOpen}
-        onPress={onToggleCustom}
-      />
-      {#if customOpen}
-        {#each nav.custom as item (item.id)}
-          <SidebarRow
-            label={item.label}
-            testId="devtools-nav-{item.id}"
-            depth={2}
-            selected={selected === item.id}
-            onPress={() => onSelect(item.id)}
-          />
-        {/each}
-      {/if}
-    {/if}
-    <li class="divider" role="presentation"></li>
-    <SidebarRow
-      label={DEVELOPER_LABEL}
-      testId="devtools-nav-developer"
-      depth={0}
-      expanded={developerOpen}
-      onPress={onToggleDeveloper}
-    />
-    {#if developerOpen}
-      {#each nav.developer as item (item.id)}
-        <SidebarRow
-          label={item.label}
-          testId="devtools-nav-{item.id}"
-          depth={2}
-          selected={selected === item.id}
-          onPress={() => onSelect(item.id)}
-        />
-      {/each}
-    {/if}
   </ul>
 </nav>
 
@@ -130,10 +71,4 @@
     flex-direction: column;
     gap: 1px;
   }
-
-  .divider {
-    height: 1px;
-    margin: var(--space-2) 0;
-    background-color: var(--color-gray-200);
-  }
 </style>

package/dist/plugins/devtools/sidebar/SidebarRow.svelte

@@ -1,45 +1,27 @@
 <script lang="ts">
-  /** @file One row of the devtools sidebar: a tab, or the disclosure that folds the Developer group. */
+  /** @file One row of the devtools sidebar: a tab. */
 
   interface Props {
     label: string
     testId: string
-    /** Indent depth: 0 for a top-level row, 2 for a screen inside the Developer group. */
-    depth: 0 | 2
     onPress: () => void
-    /** A tab row: whether it is the selected tab. */
+    /** Whether it is the selected tab. */
     selected?: boolean
-    /** A disclosure row: whether its group is open. Renders the chevron. */
-    expanded?: boolean
   }
 
-  const { label, testId, depth, onPress, selected = false, expanded }: Props = $props()
+  const { label, testId, onPress, selected = false }: Props = $props()
 </script>
 
 <li>
   <button
     type="button"
-    class="row depth-{depth}"
+    class="row"
     class:active={selected}
     aria-current={selected ? 'page' : undefined}
-    aria-expanded={expanded}
     data-nav-row
     data-testid={testId}
     onclick={onPress}
   >
-    {#if expanded !== undefined}
-      <span class="icon" class:open={expanded} aria-hidden="true">
-        <svg width="12" height="12" viewBox="0 0 16 16" fill="none">
-          <path
-            d="M6 4l4 4-4 4"
-            stroke="currentColor"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-        </svg>
-      </span>
-    {/if}
     <span class="label">{label}</span>
   </button>
 </li>
@@ -66,10 +48,6 @@
       color 0.15s ease;
   }
 
-  .row.depth-2 {
-    padding-left: var(--space-5);
-  }
-
   .row:hover {
     color: var(--color-gray-900);
     background-color: color-mix(in srgb, currentColor 5%, transparent);
@@ -86,20 +64,6 @@
     outline-offset: -2px;
   }
 
-  .icon {
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    width: 16px;
-    height: 16px;
-    transition: transform 0.15s ease;
-  }
-
-  .icon.open {
-    transform: rotate(90deg);
-  }
-
   .label {
     flex: 1;
     min-width: 0;
@@ -109,8 +73,7 @@
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .row,
-    .icon {
+    .row {
       transition: none;
     }
   }

package/dist/plugins/devtools/sidebar/nav.d.ts

@@ -2,10 +2,10 @@
 import type { CustomToolIcon } from '../customTools';
 import type { StorageGetter } from '../launcher/launcher';
 /**
- * What a sidebar entry opens: a review tab, a custom tool, the Custom Tools page shown while no tool
- * sits in that group, or a developer screen.
+ * What a sidebar entry opens: a review tab, a custom tool, the Custom Tools page listed while no
+ * unplaced tool is registered, or one of the SDK's own screens.
  */
-export type NavKind = 'review' | 'tool' | 'custom-tools' | 'developer';
+export type NavKind = 'review' | 'tool' | 'custom-tools' | 'screen';
 /** One entry of the sidebar: a row, or an icon at its foot. */
 export interface NavItem {
     /** Unique across the whole sidebar. */
@@ -15,32 +15,24 @@ export interface NavItem {
     /** The glyph of an icon at the sidebar's foot. */
     icon?: CustomToolIcon;
 }
-/**
- * The sidebar's entries: the top-level tabs, the Custom Tools group's tools, the Developer group's
- * screens, and the foot's icons.
- */
+/** The sidebar's entries: its rows, and the icons at its foot. */
 export interface NavModel {
     primary: readonly NavItem[];
-    custom: readonly NavItem[];
-    developer: readonly NavItem[];
     footer: readonly NavItem[];
 }
 /** `sessionStorage` key holding the selected tab's id. */
 export declare const TAB_STORAGE_KEY = "picked-devtools-tab";
-/** `sessionStorage` key holding `'true'` while the Developer group is open. */
-export declare const DEVELOPER_OPEN_STORAGE_KEY = "picked-devtools-developer-open";
-/** `sessionStorage` key holding `'false'` while the Custom Tools group is folded. */
-export declare const CUSTOM_TOOLS_OPEN_STORAGE_KEY = "picked-devtools-custom-tools-open";
-/** The label of the Custom Tools row and group. */
+/** The label of the Custom Tools row. */
 export declare const CUSTOM_TOOLS_LABEL = "Custom Tools";
 /** The tab a first open lands on, and where a vanished tab falls back to. */
 export declare const DEFAULT_TAB = "guide";
-/** The id of the Custom Tools row listed while no tool sits in that group; it links the how-to page. */
+/** The id of the Custom Tools row, listed while no unplaced tool is registered; it links the how-to page. */
 export declare const CUSTOM_TOOLS_TAB = "custom-tools";
-/** The id of the row that folds the Custom Tools group. */
-export declare const CUSTOM_TOOLS_GROUP = "custom-tools-group";
-/** The developer screens, in the order the Developer group lists them. */
-export declare const DEVELOPER_SCREENS: readonly {
+/**
+ * The SDK's own screens, in the order the sidebar lists them after the review tabs and the site's
+ * tools. Experiences, Feature flags and Responses are review tabs, so they are not here.
+ */
+export declare const SCREENS: readonly {
     id: string;
     label: string;
 }[];
@@ -53,13 +45,13 @@ export declare const DEVELOPER_SCREENS: readonly {
  */
 export declare function toolTabId(toolId: string): string;
 /**
- * The sidebar id of a developer screen.
+ * The sidebar id of one of the SDK's own screens.
  *
- * @param {string} screenId - The screen's id in {@link DEVELOPER_SCREENS}.
+ * @param {string} screenId - The screen's id in {@link SCREENS}.
  * @returns {string} Its tab id, prefixed so it never collides with a review tab.
- * @example developerTabId('responses') // 'dev:responses'
+ * @example screenTabId('events') // 'screen:events'
  */
-export declare function developerTabId(screenId: string): string;
+export declare function screenTabId(screenId: string): string;
 /** What decides the sidebar's rows. */
 export interface NavInput {
     /** Whether the workspace publishes a feature, which lists Feature flags. */
@@ -69,7 +61,7 @@ export interface NavInput {
         id: string;
         label: string;
     }[];
-    /** The unplaced custom tools, in registration order, each a row of the Custom Tools group. */
+    /** The unplaced custom tools, in registration order, each a top-level row after the review tools. */
     customTools: readonly {
         id: string;
         label: string;
@@ -82,10 +74,10 @@ export interface NavInput {
     }[];
 }
 /**
- * Builds the sidebar's entries.
+ * Builds the sidebar's entries: the review tabs, the site's tools, then the SDK's own screens.
  *
  * @param {NavInput} input - What this session lists.
- * @returns {NavModel} The top-level tabs, the Custom Tools and Developer groups' rows, and the foot's icons.
+ * @returns {NavModel} The rows and the foot's icons.
  * @example buildNav({ variations: true, tools: [], customTools: [], footerTools: [] })
  */
 export declare function buildNav(input: NavInput): NavModel;
@@ -98,24 +90,6 @@ export declare function buildNav(input: NavInput): NavModel;
  * @example resolveTab('journey', nav) // 'journey'
  */
 export declare function resolveTab(stored: string | null, nav: NavModel): string;
-/**
- * Whether a tab sits inside the Custom Tools group.
- *
- * @param {string} tab - A tab id.
- * @param {NavModel} nav - The sidebar's rows.
- * @returns {boolean} `true` for an unplaced custom tool.
- * @example isInCustomTools('tool:simulator', nav) // true
- */
-export declare function isInCustomTools(tab: string, nav: NavModel): boolean;
-/**
- * Whether a tab sits inside the Developer group.
- *
- * @param {string} tab - A tab id.
- * @param {NavModel} nav - The sidebar's rows.
- * @returns {boolean} `true` for a developer screen.
- * @example isInDeveloper('dev:events', nav) // true
- */
-export declare function isInDeveloper(tab: string, nav: NavModel): boolean;
 /**
  * Where a key moves focus among the sidebar's visible rows.
  *

package/dist/plugins/devtools/sidebar/nav.js

@@ -1 +1 @@
-import{TAB_LABELS as e}from"../derive/plain-language/plain-language.js";var t=`picked-devtools-tab`,n=`picked-devtools-developer-open`,r=`picked-devtools-custom-tools-open`,i=`Custom Tools`,a=`guide`,o=`custom-tools`,s=`custom-tools-group`,c=[{id:`project`,label:`Project`},{id:`components`,label:`Components`},{id:`config`,label:`Config`},{id:`content`,label:`Content`},{id:`events`,label:`Events`},{id:`experience-instances`,label:`Experience Instances`},{id:`experiences`,label:`Experiences`},{id:`features`,label:`Feature flags`},{id:`fields`,label:`Fields`},{id:`frameworks`,label:`Frameworks`},{id:`history`,label:`History`},{id:`identity`,label:`Identity`},{id:`predicates`,label:`Predicates`},{id:`responses`,label:`Responses`}];function l(e){return`tool:${e}`}function u(e){return`dev:${e}`}function d(t){let n=[{id:`guide`,label:e.guide,kind:`review`},{id:`session`,label:e.session,kind:`review`},{id:`answers`,label:e.answers,kind:`review`},{id:`journey`,label:e.journey,kind:`review`},{id:`personas`,label:e.personas,kind:`review`}];t.variations&&n.push({id:`variations`,label:e.variations,kind:`review`});let r=e=>({id:l(e.id),label:e.label,kind:`tool`}),a=t.tools.map(r),s=t.customTools.map(r),d=c.map(e=>({id:u(e.id),label:e.label,kind:`developer`})),f=s.length===0?[{id:o,label:i,kind:`custom-tools`}]:[],p=t.footerTools.map(e=>({id:l(e.id),label:e.label,kind:`tool`,icon:e.icon??`wrench`}));return{primary:[...n,...a,...f],custom:s,developer:d,footer:p}}function f(e,t){return e===null?a:[...t.primary,...t.custom,...t.developer,...t.footer].some(t=>t.id===e)?e:a}function p(e,t){return t.custom.some(t=>t.id===e)}function m(e,t){return t.developer.some(t=>t.id===e)}function h(e,t,n){let r=Math.max(0,n-1);switch(e){case`ArrowDown`:return Math.min(t+1,r);case`ArrowUp`:return Math.max(t-1,0);case`Home`:return 0;case`End`:return r;default:return null}}function g(e,t){try{return e().getItem(t)}catch{return null}}function _(e,t,n){try{e().setItem(t,n)}catch{}}export{s as CUSTOM_TOOLS_GROUP,i as CUSTOM_TOOLS_LABEL,r as CUSTOM_TOOLS_OPEN_STORAGE_KEY,o as CUSTOM_TOOLS_TAB,a as DEFAULT_TAB,n as DEVELOPER_OPEN_STORAGE_KEY,c as DEVELOPER_SCREENS,t as TAB_STORAGE_KEY,d as buildNav,u as developerTabId,p as isInCustomTools,m as isInDeveloper,h as nextFocusIndex,g as readStored,f as resolveTab,l as toolTabId,_ as writeStored};
+import{TAB_LABELS as e}from"../derive/plain-language/plain-language.js";var t=`picked-devtools-tab`,n=`Custom Tools`,r=`guide`,i=`custom-tools`,a=[{id:`project`,label:`Project`},{id:`components`,label:`Components`},{id:`config`,label:`Config`},{id:`content`,label:`Content`},{id:`events`,label:`Events`},{id:`fields`,label:`Fields`},{id:`frameworks`,label:`Frameworks`},{id:`history`,label:`History`},{id:`identity`,label:`Identity`},{id:`predicates`,label:`Predicates`}];function o(e){return`tool:${e}`}function s(e){return`screen:${e}`}function c(t){let r=[{id:`guide`,label:e.guide,kind:`review`},{id:`session`,label:e.session,kind:`review`},{id:`answers`,label:e.answers,kind:`review`},{id:`journey`,label:e.journey,kind:`review`},{id:`personas`,label:e.personas,kind:`review`}];t.variations&&r.push({id:`variations`,label:e.variations,kind:`review`});let c=e=>({id:o(e.id),label:e.label,kind:`tool`}),l=t.tools.map(c),u=t.customTools.map(c),d=a.map(e=>({id:s(e.id),label:e.label,kind:`screen`})),f=u.length===0?[{id:i,label:n,kind:`custom-tools`}]:[],p=t.footerTools.map(e=>({id:o(e.id),label:e.label,kind:`tool`,icon:e.icon??`wrench`}));return{primary:[...r,...l,...u,...f,...d],footer:p}}function l(e,t){return e===null?r:[...t.primary,...t.footer].some(t=>t.id===e)?e:r}function u(e,t,n){let r=Math.max(0,n-1);switch(e){case`ArrowDown`:return Math.min(t+1,r);case`ArrowUp`:return Math.max(t-1,0);case`Home`:return 0;case`End`:return r;default:return null}}function d(e,t){try{return e().getItem(t)}catch{return null}}function f(e,t,n){try{e().setItem(t,n)}catch{}}export{n as CUSTOM_TOOLS_LABEL,i as CUSTOM_TOOLS_TAB,r as DEFAULT_TAB,a as SCREENS,t as TAB_STORAGE_KEY,c as buildNav,u as nextFocusIndex,d as readStored,l as resolveTab,s as screenTabId,o as toolTabId,f as writeStored};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@picked/svelte",
-  "version": "0.0.1-dev.1793776638554",
+  "version": "0.0.1-dev.1793835766402",
   "dependencies": {
     "d3": "^7.9.0"
   },
@@ -113,7 +113,7 @@
   "license": "SEE LICENSE IN LICENSE",
   "module": "./dist/index.js",
   "peerDependencies": {
-    "@picked/client": "0.0.1-dev.1793776638554",
+    "@picked/client": "0.0.1-dev.1793835766402",
     "effector": "^23.4.4",
     "svelte": "^5.55.7"
   },

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

@@ -1,10 +0,0 @@
-<script lang="ts">
-  import ExperienceInstancesTable from '../../components/ExperienceInstancesTable.svelte'
-  import { getPicked } from '../../../../hooks'
-
-  const client = getPicked()
-
-  $: experienceInstances = client.experienceInstances.listStore
-</script>
-
-<ExperienceInstancesTable experienceInstances={$experienceInstances} />

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

@@ -1,44 +0,0 @@
-<script lang="ts">
-  /** @file Detail screen for a single experience, showing its config, target selectors, and condition. */
-  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
-
-  $: 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>
-
-  <Card sectioned>
-    <Stack direction="vertical" gap="medium" padding="medium">
-
-      <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">Condition</Text>
-        <CodeBlock code={JSON.stringify($config.decisionLogic, null, 2)} />
-      </div>
-    </Stack>
-  </Card>
-</Stack>

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

@@ -1,13 +0,0 @@
-<script lang="ts">
-  import type { ExperienceStore } from '@picked/client'
-  import { getPicked } from '../../../../hooks'
-  import ExperienceInstancesTable from '../../components/ExperienceInstancesTable.svelte'
-
-  export let experience: ExperienceStore
-
-  const client = getPicked()
-
-  $: experienceInstances = client.experienceInstances.getByExperienceId(experience.id)
-</script>
-
-<ExperienceInstancesTable experienceInstances={$experienceInstances} />

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

@@ -1,32 +0,0 @@
-<script lang="ts">
-  import type { ExperienceStore } from '@picked/client'
-  import Tabs from '../../components/Tabs.svelte'
-  import ExperienceTreeScreen from './ExperienceTreeScreen.svelte'
-  import ExperienceDetailsScreen from './ExperienceDetailsScreen.svelte'
-  import ExperienceExperienceInstancesListScreen from './ExperienceExperienceInstancesListScreen.svelte'
-
-  export let experience: ExperienceStore
-
-  $: tabs = [
-    {
-      id: 'details',
-      label: 'Details',
-      component: ExperienceDetailsScreen,
-      props: { experience },
-    },
-    {
-      id: 'tree',
-      label: 'Tree',
-      component: ExperienceTreeScreen,
-      props: { experience },
-    },
-    {
-      id: 'experience-instances',
-      label: 'Instances',
-      component: ExperienceExperienceInstancesListScreen,
-      props: { experience },
-    },
-  ]
-</script>
-
-<Tabs {tabs} />