@picked/svelte 0.0.1-dev.1789541668638 → 0.0.1-dev.1793756239746

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

@@ -0,0 +1,90 @@
+import type { Event, Store } from 'effector';
+import type { AskedNode, AskedStep, HistoryEntry, HistoryEvent, InstanceLike, OpenOrderEvent, RouteEntry, Trails, VisitedEvent } from '../derive';
+/** The event shapes read off the bus: every reducer's together. */
+export type BusEvent = VisitedEvent & HistoryEvent & OpenOrderEvent;
+/** An experience instance, as far as this model reads one. */
+export interface SessionInstance extends InstanceLike {
+    goToStepByKey: (key: string) => unknown;
+}
+/** The slice of the `Picked` client this model reads, narrowed so tests can build it from units. */
+export interface SessionClient {
+    eventBus: Event<BusEvent>;
+    responses: {
+        getAllStore: Store<Readonly<Record<string, unknown>>>;
+    };
+    steps: {
+        listStore: Store<readonly AskedStep[]>;
+    };
+    experiences: {
+        listStore: Store<readonly {
+            treeStore: Store<{
+                nodes: readonly AskedNode[];
+            }>;
+        }[]>;
+    };
+    experienceInstances: {
+        listStore: Store<readonly SessionInstance[]>;
+    };
+}
+/** The host's say on what the session model reads. */
+export interface SessionOptions {
+    /** Experience keys never picked as the journey: the devtools themselves, and any the host hides. */
+    exclude: ReadonlySet<string>;
+    /** Experience keys, topmost first, that win the journey pick whenever they are open. */
+    precedence: readonly string[];
+    /** Keys a screen carries only for its code; never an answer the reviewer gave. */
+    codeOwned: ReadonlySet<string>;
+}
+/** The journey in front of the reviewer, and where in it the visitor is. */
+export interface JourneyView {
+    experienceKey: string;
+    experienceName: string;
+    stepKey: string | null;
+    stepName: string | null;
+    /**
+     * The engine is transiting a condition or action node, so the recorded step is the one just
+     * LEFT. Panels say so rather than naming a screen the visitor has already gone past.
+     */
+    inTransit: boolean;
+    goToStepByKey: (key: string) => void;
+}
+/** The session model the review panels read. */
+export interface SessionData {
+    /** Screens entered this session, per journey. */
+    trailsStore: Store<Trails>;
+    /** What the visitor answered, screen by screen. */
+    historyStore: Store<readonly HistoryEntry[]>;
+    /** Every screen moved on from, field-less ones too. */
+    routeStore: Store<readonly RouteEntry[]>;
+    /** Every field a journey's screens ask, minus the code-owned ones. */
+    askedStore: Store<ReadonlySet<string>>;
+    /** Instance ids in the order they opened, oldest first. */
+    openOrderStore: Store<readonly string[]>;
+    /** The journey in front, re-read as the visitor moves. */
+    journeyStore: Store<JourneyView | null>;
+    /**
+     * Re-reads the journey now. The engine's transit through a condition or action moves no list
+     * and fires no `step_enter`, so a panel re-reads as it opens rather than show a stale position.
+     */
+    refreshJourney: () => void;
+    /** Clears every unit this model made, leaving the SDK's own units working. */
+    destroy: () => void;
+}
+/**
+ * Builds the session model over a client, inside one region.
+ *
+ * The current STEP lives in a store on the instance and moves without the instance list changing,
+ * which is why the bus is a clock for the journey too.
+ *
+ * @param {SessionClient} client - The Picked client, or any object with the same units.
+ * @param {SessionOptions} options - Which experiences to skip, which sit on top, and which keys are code-owned.
+ * @returns {SessionData} The stores the panels read, and the model's teardown.
+ * @example
+ * const session = createSessionData(client, {
+ *   exclude: new Set(['devtools']),
+ *   precedence: ['checkout-modal'],
+ *   codeOwned: new Set(['quote_response']),
+ * })
+ * onDestroy(session.destroy)
+ */
+export declare function createSessionData(client: SessionClient, options: SessionOptions): SessionData;

package/dist/plugins/devtools/session/session.js

@@ -0,0 +1 @@
+import{askedFieldKeys as e}from"../derive/answer-display/answer-display.js";import{nextHistory as t}from"../derive/answer-history/answer-history.js";import{nextOpenOrder as n,pickJourney as r}from"../derive/journey-pick/journey-pick.js";import{nextTrails as i}from"../derive/visited-steps/visited-steps.js";import{nextRoute as a}from"../derive/walk-route/walk-route.js";import"../derive/index.js";import{clearNode as o,combine as s,createEvent as c,createNode as l,createStore as u,sample as d,withRegion as f}from"effector";var p=new Set([`step_enter`,`experience_open`,`experience_close`]);function m(m,h){let g=l(),_=[],v=(e,t)=>{let n=r(e,{exclude:h.exclude,precedence:h.precedence,openOrder:t});if(n===void 0)return null;let i=n.currentStepStore.getState(),a=n.currentNodeStore.getState();return{experienceKey:n.experienceKey,experienceName:n.experienceName,stepKey:i?.key??null,stepName:i?.name??null,inTransit:a!==null&&a.type!==`step`,goToStepByKey:e=>{n.goToStepByKey(e)}}};return{...f(g,()=>{let r=m.eventBus,o=u(new Map).on(r,i),l=u([]);d({clock:r,source:{history:l,responses:m.responses.getAllStore},fn:({history:e,responses:n},r)=>t(e,n,r,h.codeOwned),target:l});let f=u([]);d({clock:r,source:{route:f,responses:m.responses.getAllStore},fn:({route:e,responses:t},n)=>a(e,t,n,h.codeOwned),target:f});let g=c(),y=e=>e.map(e=>e.treeStore.getState().nodes),b=u(y(m.experiences.listStore.getState()));d({clock:[m.experiences.listStore,g],source:m.experiences.listStore,fn:y,target:b}),m.experiences.listStore.watch(e=>{for(let e of _)e.unsubscribe();_=e.map(e=>e.treeStore.updates.watch(g))});let x=s(m.steps.listStore,b,(t,n)=>e(t,n,h.codeOwned)),S=u([]).on(r,n),C=d({clock:r,filter:e=>p.has(e.type)}),w=c(),T=u(v(m.experienceInstances.listStore.getState(),S.getState()));return d({clock:[m.experienceInstances.listStore,S,C,w],source:{instances:m.experienceInstances.listStore,openOrder:S},fn:({instances:e,openOrder:t})=>v(e,t),target:T}),{trailsStore:o,historyStore:l,routeStore:f,askedStore:x,openOrderStore:S,journeyStore:T,refreshJourney:w}}),destroy:()=>{for(let e of _)e.unsubscribe();_=[],o(g)}}}export{m as createSessionData};

package/dist/plugins/devtools/session-access.d.ts

@@ -0,0 +1,32 @@
+/** @file Hands the devtools session record and posture to custom tools, per client. */
+import type { Picked } from '@picked/client';
+import type { SafetyPosture } from './derive';
+import type { SessionData } from './session';
+/** What a custom tool can read about the session the devtools are recording. */
+export interface DevtoolsSession {
+    /** The session record's stores: the trail, the answer history, the route, the open journey. */
+    session: Omit<SessionData, 'destroy'>;
+    /** What this session may do; a read-only session must not write. */
+    posture: SafetyPosture;
+}
+/**
+ * Reads the session the devtools panel is recording for a client.
+ *
+ * @param {Pick<Picked, 'getPluginConfig'>} client - The client the devtools plugin is registered on.
+ * @returns {DevtoolsSession | null} The session and posture, or `null` before the devtools mount.
+ * @example
+ * const devtools = getDevtoolsSession(getPicked())
+ * const route = devtools?.session.routeStore.getState() ?? []
+ */
+export declare function getDevtoolsSession(client: Pick<Picked, 'getPluginConfig'>): DevtoolsSession | null;
+/**
+ * Publishes the devtools session for a client until the returned release runs.
+ *
+ * @param {Pick<Picked, 'getPluginConfig'>} client - The client the session belongs to.
+ * @param {DevtoolsSession} value - The session and posture.
+ * @returns {() => void} Release: removes the session if it is still the one published.
+ * @example
+ * const release = provideDevtoolsSession(client, { session, posture })
+ * release()
+ */
+export declare function provideDevtoolsSession(client: Pick<Picked, 'getPluginConfig'>, value: DevtoolsSession): () => void;

package/dist/plugins/devtools/session-access.js

@@ -0,0 +1 @@
+var e=new WeakMap;function t(t){return e.get(t)??null}function n(t,n){return e.set(t,n),()=>{e.get(t)===n&&e.delete(t)}}export{t as getDevtoolsSession,n as provideDevtoolsSession};

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

@@ -0,0 +1,105 @@
+<!--
+  @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 Developer row mirrors the Dashboard's folding nav group (sidebar-nav-group.tsx).
+-->
+<script lang="ts">
+  /** @file The devtools sidebar: the review tabs, then the folding Developer group. */
+  import { DEVELOPER_LABEL } from '../derive/plain-language'
+  import type { NavModel } 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
+    onSelect: (id: string) => void
+    onToggleDeveloper: () => void
+  }
+
+  const { nav, selected, developerOpen, onSelect, onToggleDeveloper }: Props = $props()
+
+  let list: HTMLElement | undefined = $state()
+
+  /**
+   * Moves focus between visible rows on Up, Down, Home and End.
+   *
+   * @param {KeyboardEvent} event - The key pressed inside the sidebar.
+   * @example onKeydown(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
+   */
+  function onKeydown(event: KeyboardEvent): void {
+    if (list === undefined) return
+    const buttons = Array.from(list.querySelectorAll('button[data-nav-row]')).filter(
+      (node): node is HTMLButtonElement => node instanceof HTMLButtonElement,
+    )
+    const index = buttons.findIndex((button) => button === event.target)
+    if (index === -1) return
+    const next = nextFocusIndex(event.key, index, buttons.length)
+    if (next === null) return
+    event.preventDefault()
+    buttons[next]?.focus()
+  }
+</script>
+
+<nav class="sidebar" aria-label="Devtools" data-testid="devtools-sidebar">
+  <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+  <ul bind:this={list} class="rows" onkeydown={onKeydown}>
+    {#each nav.primary as item (item.id)}
+      <SidebarRow
+        label={item.label}
+        testId="devtools-nav-{item.id}"
+        depth={0}
+        selected={selected === item.id}
+        onPress={() => onSelect(item.id)}
+      />
+    {/each}
+    <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>
+
+<style>
+  .sidebar {
+    height: 100%;
+    overflow-y: auto;
+    padding: var(--space-2);
+    background-color: var(--color-white);
+    color: var(--color-gray-900);
+  }
+
+  .rows {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    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

@@ -0,0 +1,117 @@
+<script lang="ts">
+  /** @file One row of the devtools sidebar: a tab, or the disclosure that folds the Developer group. */
+
+  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. */
+    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()
+</script>
+
+<li>
+  <button
+    type="button"
+    class="row depth-{depth}"
+    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>
+
+<style>
+  .row {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    width: 100%;
+    min-width: 0;
+    height: 28px;
+    padding: 0 var(--space-2);
+    border: 0;
+    border-radius: var(--radius-md);
+    background: none;
+    font: inherit;
+    font-size: var(--text-sm);
+    color: color-mix(in srgb, currentColor 80%, transparent);
+    text-align: left;
+    cursor: pointer;
+    transition:
+      background-color 0.15s ease,
+      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);
+  }
+
+  .row.active {
+    color: var(--color-gray-900);
+    background-color: color-mix(in srgb, currentColor 10%, transparent);
+    font-weight: var(--font-medium);
+  }
+
+  .row:focus-visible {
+    outline: 2px solid currentColor;
+    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;
+    overflow: hidden;
+    white-space: nowrap;
+    mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .row,
+    .icon {
+      transition: none;
+    }
+  }
+</style>

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

@@ -0,0 +1,105 @@
+/** @file The devtools sidebar's tab list, its remembered tab, and its keyboard moves. */
+import type { StorageGetter } from '../launcher/launcher';
+/** What a sidebar row opens: a review tab, a review-placed custom tool, or a developer screen. */
+export type NavKind = 'review' | 'tool' | 'developer';
+/** One row of the sidebar. */
+export interface NavItem {
+    /** Unique across the whole sidebar. */
+    id: string;
+    label: string;
+    kind: NavKind;
+}
+/** The sidebar's rows: the top-level tabs, and the Developer group's screens. */
+export interface NavModel {
+    primary: readonly NavItem[];
+    developer: 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";
+/** The tab a first open lands on, and where a vanished tab falls back to. */
+export declare const DEFAULT_TAB = "guide";
+/** The developer screens, in the order the Developer group lists them. */
+export declare const DEVELOPER_SCREENS: readonly {
+    id: string;
+    label: string;
+}[];
+/**
+ * The sidebar id of a review-placed custom tool.
+ *
+ * @param {string} toolId - The tool's registered id.
+ * @returns {string} Its tab id, prefixed so it never collides with a review tab.
+ * @example toolTabId('customers') // 'tool:customers'
+ */
+export declare function toolTabId(toolId: string): string;
+/**
+ * The sidebar id of a developer screen.
+ *
+ * @param {string} screenId - The screen's id in {@link DEVELOPER_SCREENS}.
+ * @returns {string} Its tab id, prefixed so it never collides with a review tab.
+ * @example developerTabId('responses') // 'dev:responses'
+ */
+export declare function developerTabId(screenId: string): string;
+/**
+ * Builds the sidebar's rows.
+ *
+ * @param {{ variations: boolean, tools: readonly { id: string, label: string }[] }} input - What this session lists.
+ * @param {boolean} input.variations - Whether the workspace publishes a feature, which lists Variations.
+ * @param {readonly { id: string, label: string }[]} input.tools - The review-placed custom tools, in registration order.
+ * @returns {NavModel} The top-level tabs and the Developer group's screens.
+ * @example buildNav({ variations: true, tools: [] })
+ */
+export declare function buildNav(input: {
+    variations: boolean;
+    tools: readonly {
+        id: string;
+        label: string;
+    }[];
+}): NavModel;
+/**
+ * The tab to open: the stored one while it is listed, else How to use.
+ *
+ * @param {string | null} stored - The stored tab id.
+ * @param {NavModel} nav - The sidebar's rows.
+ * @returns {string} The tab id to select.
+ * @example resolveTab('journey', nav) // 'journey'
+ */
+export declare function resolveTab(stored: string | null, nav: NavModel): string;
+/**
+ * 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.
+ *
+ * @param {string} key - The `KeyboardEvent.key`.
+ * @param {number} index - The focused row's index.
+ * @param {number} count - How many rows are visible.
+ * @returns {number | null} The row to focus, or `null` for a key the sidebar does not handle.
+ * @example nextFocusIndex('ArrowDown', 0, 3) // 1
+ */
+export declare function nextFocusIndex(key: string, index: number, count: number): number | null;
+/**
+ * Reads a stored value.
+ *
+ * @param {StorageGetter} getStorage - Reads the storage to use.
+ * @param {string} key - The key to read.
+ * @returns {string | null} The value, or `null` when absent or when storage throws.
+ * @example readStored(() => window.sessionStorage, TAB_STORAGE_KEY)
+ */
+export declare function readStored(getStorage: StorageGetter, key: string): string | null;
+/**
+ * Stores a value. Does nothing where storage is denied.
+ *
+ * @param {StorageGetter} getStorage - Reads the storage to use.
+ * @param {string} key - The key to write.
+ * @param {string} value - The value to store.
+ * @example writeStored(() => window.sessionStorage, TAB_STORAGE_KEY, 'journey')
+ */
+export declare function writeStored(getStorage: StorageGetter, key: string, value: string): void;

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

@@ -0,0 +1 @@
+import{TAB_LABELS as e}from"../derive/plain-language/plain-language.js";var t=`picked-devtools-tab`,n=`picked-devtools-developer-open`,r=`guide`,i=[{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:`Features`},{id:`fields`,label:`Fields`},{id:`frameworks`,label:`Frameworks`},{id:`history`,label:`History`},{id:`identity`,label:`Identity`},{id:`predicates`,label:`Predicates`},{id:`responses`,label:`Responses`},{id:`custom-tools`,label:`Custom Tools`}];function a(e){return`tool:${e}`}function o(e){return`dev:${e}`}function s(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`}];t.variations&&n.push({id:`variations`,label:e.variations,kind:`review`});let r=t.tools.map(e=>({id:a(e.id),label:e.label,kind:`tool`})),s=i.map(e=>({id:o(e.id),label:e.label,kind:`developer`}));return{primary:[...n,...r],developer:s}}function c(e,t){return e===null?r:[...t.primary,...t.developer].some(t=>t.id===e)?e:r}function l(e,t){return t.developer.some(t=>t.id===e)}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{r as DEFAULT_TAB,n as DEVELOPER_OPEN_STORAGE_KEY,i as DEVELOPER_SCREENS,t as TAB_STORAGE_KEY,s as buildNav,o as developerTabId,l as isInDeveloper,u as nextFocusIndex,d as readStored,c as resolveTab,a as toolTabId,f as writeStored};

package/dist/plugins/devtools/ui/actions/Button.svelte

@@ -19,10 +19,13 @@
     fullWidth?: boolean
     href?: string
     target?: string
+    /** Shown as the control's tooltip, such as why a disabled control is unavailable. */
+    title?: string
+    testId?: string
     onclick?: (event: MouseEvent) => void
   }
 
-  let {
+  const {
     children,
     icon,
     variant = 'primary',
@@ -33,6 +36,8 @@
     fullWidth = false,
     href,
     target,
+    title,
+    testId,
     onclick,
   }: Props = $props()
 
@@ -49,6 +54,8 @@
     rel={target === '_blank' ? 'noopener noreferrer' : undefined}
     aria-disabled={isDisabled || undefined}
     tabindex={isDisabled ? -1 : undefined}
+    {title}
+    data-testid={testId}
     onclick={isDisabled
       ? (e: MouseEvent) => e.preventDefault()
       : onclick}
@@ -66,6 +73,8 @@
     class:full-width={fullWidth}
     {type}
     disabled={isDisabled}
+    {title}
+    data-testid={testId}
     {onclick}
   >
     {#if loading}

package/dist/plugins/devtools/ui/actions/CopyButton.svelte

@@ -8,13 +8,23 @@
   interface Props {
     text: string
     label?: string
+    /** Show `label` beside the icon, not only as its accessible name. */
+    showLabel?: boolean
+    testId?: string
   }
 
-  let { text, label = 'Copy to clipboard' }: Props = $props()
+  const { text, label = 'Copy to clipboard', showLabel = false, testId }: Props = $props()
 
   let copied = $state(false)
   let timeoutId: ReturnType<typeof setTimeout> | undefined
 
+  /**
+   * Copies the text to the clipboard and shows a tick for a moment.
+   *
+   * @returns {Promise<void>} Settles once the clipboard has answered.
+   * @example
+   * await handleCopy()
+   */
   async function handleCopy(): Promise<void> {
     try {
       await navigator.clipboard.writeText(text)
@@ -33,6 +43,7 @@
   class="copy-button"
   onclick={handleCopy}
   aria-label={label}
+  data-testid={testId}
 >
   {#if copied}
     <svg class="icon icon-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -44,6 +55,7 @@
       <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
       <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
     </svg>
+    {#if showLabel}<span>{label}</span>{/if}
   {/if}
 </button>
 

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

@@ -11,12 +11,13 @@
     children: Snippet
     status?: 'default' | 'success' | 'warning' | 'error' | 'info'
     size?: 'small' | 'medium'
+    testId?: string
   }
 
-  let { children, status = 'default', size = 'medium' }: Props = $props()
+  const { children, status = 'default', size = 'medium', testId }: Props = $props()
 </script>
 
-<span class="badge status-{status} size-{size}">
+<span class="badge status-{status} size-{size}" data-testid={testId}>
   {@render children()}
 </span>
 

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

@@ -1,21 +1,29 @@
 <script lang="ts">
   interface Props {
     message: string
+    /** A second, smaller line: what would fill the empty space. */
+    hint?: string
   }
 
-  let { message }: Props = $props()
+  const { message, hint }: Props = $props()
 </script>
 
 <div class="empty-state">
   <p class="message">{message}</p>
+  {#if hint}
+    <p class="hint">{hint}</p>
+  {/if}
 </div>
 
 <style>
   .empty-state {
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
+    gap: var(--space-1);
     padding: var(--space-8);
+    text-align: center;
   }
 
   .message {
@@ -23,4 +31,11 @@
     font-size: var(--text-sm);
     margin: 0;
   }
+
+  .hint {
+    max-width: 34ch;
+    color: var(--color-gray-500);
+    font-size: var(--text-xs);
+    margin: 0;
+  }
 </style>

package/dist/plugins/devtools/ui/feedback/Banner.svelte

@@ -11,17 +11,18 @@
     children: Snippet
     status?: 'info' | 'success' | 'warning' | 'error'
     title?: string
+    testId?: string
     onDismiss?: () => void
   }
 
-  let { children, status = 'info', title, onDismiss }: Props = $props()
+  const { children, status = 'info', title, testId, onDismiss }: Props = $props()
 
   const bannerRole = $derived(
     status === 'error' || status === 'warning' ? 'alert' : 'status',
   )
 </script>
 
-<div class="banner status-{status}" role={bannerRole}>
+<div class="banner status-{status}" role={bannerRole} data-testid={testId}>
   <div class="banner-content">
     {#if title}
       <p class="banner-title">{title}</p>

package/dist/plugins/framework/index.js

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

package/dist/render/browser.js

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