@picked/svelte 0.0.1-dev.1793758300441 → 0.0.1-dev.1793769511104

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

@@ -0,0 +1,226 @@
+/**
+ * @file Loads a persona the way a customer arrives: the page reloads clean, then the persona's
+ * journey is walked from its first screen. Each screen gets its own answers as the walk reaches it,
+ * then Continue, so every condition and action between the screens runs for real. A host persona
+ * with its own `load` skips this.
+ *
+ * Load has two halves on either side of the reload. The first, {@link startPersonaLoad}, clears the
+ * answers and the journey history the SDK keeps, notes the persona in `sessionStorage` and
+ * reloads. The second, {@link walkPersona}, runs on the next page, once the devtools mount there
+ * and pick up the note.
+ *
+ * The walk stops at the persona's screen, or at the first screen it cannot finish: a question with
+ * no answer, an answer that fails its check, a screen that asks nothing and was not moved on from
+ * when the persona was saved, or a Continue that lands nowhere.
+ */
+import type { FieldValue, Picked } from '@picked/client';
+import { type Persona } from '../../derive';
+/** The part of an experience instance a walk reads and moves. */
+export interface WalkInstance {
+    id: string;
+    experienceKey: string;
+    experienceName: string;
+    isOpenStore: {
+        getState: () => boolean;
+    };
+    stateStore: {
+        getState: () => 'transitioning' | 'ready';
+    };
+    currentNodeStore: {
+        getState: () => {
+            type: string;
+        } | null;
+    };
+    currentStepStore: {
+        getState: () => {
+            key: string;
+            name?: string;
+            fieldKeys: readonly string[];
+        } | null;
+    };
+    goToNextStep: () => void;
+}
+/** The part of the client a walk uses. */
+export interface WalkClient {
+    readyStore: {
+        getState: () => boolean;
+    };
+    responses: {
+        register: (payload: Record<string, FieldValue>) => void;
+        commit: (values: Record<string, FieldValue>) => Promise<{
+            errors: readonly unknown[];
+        }>;
+    };
+    experienceInstances: {
+        listStore: {
+            getState: () => readonly WalkInstance[];
+        };
+    };
+    openExperienceByKey: (key: string) => Promise<void>;
+    launchExperienceByKey: (key: string, options: {
+        bypassCondition: boolean;
+        initialiseOpen: boolean;
+    }) => Promise<void>;
+}
+/** The part of the client {@link startPersonaLoad} clears. */
+export interface ResetClient {
+    responses: {
+        clearAll: () => void;
+    };
+    history: {
+        restore: (payload: {
+            entries: [];
+        }) => void;
+    };
+}
+/** How a walk reads the page around it. */
+export interface WalkSettings {
+    /** Experience keys never walked: the devtools themselves, and any the host hides. */
+    exclude: ReadonlySet<string>;
+    /** Experience keys, topmost first, that are in front whenever they are open. */
+    precedence: readonly string[];
+    /** Instance ids in the order they opened, oldest first, read fresh at every screen. */
+    openOrder: () => readonly string[];
+    /** Step keys that move on by themselves, such as a loader. The walk waits on them. */
+    selfAdvancing: ReadonlySet<string>;
+    /** Answers every walk gives when a screen asks them, over the persona's own. */
+    answers: Readonly<Record<string, FieldValue>>;
+    /**
+     * The keys a screen asks: its fields that show now, minus the code-owned ones.
+     *
+     * @param fieldKeys - Every field the screen lists.
+     */
+    askedOn: (fieldKeys: readonly string[]) => Promise<readonly string[]>;
+}
+/** How long a walk waits at each point, in polls 30ms apart. */
+export interface WalkTiming {
+    sleep: (ms: number) => Promise<void>;
+    /** For the page to finish starting. */
+    bootTries: number;
+    /** For a journey asked to open to report open. */
+    openTries: number;
+    /** For a journey to show its first screen. */
+    startTries: number;
+    /** For one Continue to land; an action between two screens can call a live API. */
+    advanceTries: number;
+    /**
+     * For a journey back at rest on the screen it left to stay there before the walk calls it
+     * stuck. A journey that hands off to another can rest on its own screen again first.
+     */
+    returnTries: number;
+    /** For a screen that moves itself on, such as a loader that fetches. */
+    selfAdvanceTries: number;
+    /** Screens walked before the walk gives up, so a loop cannot run forever. */
+    maxHops: number;
+}
+/** A screen the walk stopped on. */
+export interface WalkStop {
+    experienceName: string;
+    stepName: string;
+}
+/** How a walk ended. */
+export type WalkEnd = 
+/** On the persona's screen. */
+'arrived'
+/** The persona has no journey, so its answers went in on their own. */
+ | 'answers-only'
+/** A screen asks something the persona has no answer for. */
+ | 'needs-answer'
+/** An answer fails its check. */
+ | 'invalid'
+/** A Continue that landed nowhere: the journey goes differently now. */
+ | 'stuck'
+/** The journey never showed a screen. */
+ | 'no-journey'
+/** Too many screens without reaching the persona's. */
+ | 'hop-limit';
+/** How a walk ended, and where. */
+export interface WalkOutcome {
+    end: WalkEnd;
+    /** The screen it stopped on; `null` when it never reached one. */
+    at: WalkStop | null;
+}
+/** The `sessionStorage` key that carries a load across the reload. */
+export declare const PENDING_LOAD_KEY = "picked-devtools-persona-load";
+/** Where a load reloads, and how. */
+export interface PersonaReload {
+    /** The tab's `sessionStorage`, which carries the load across the reload. */
+    storage: Pick<Storage, 'setItem'>;
+    /** The page to load on. */
+    url: string;
+    /**
+     * Goes to a URL.
+     *
+     * @param url - The URL.
+     */
+    navigate: (url: string) => void;
+}
+/**
+ * The keys a screen asks now: its fields whose own condition shows them, minus the code-owned ones.
+ *
+ * @param {Picked} client - The client.
+ * @param {readonly string[]} fieldKeys - Every field the screen lists.
+ * @param {ReadonlySet<string>} codeOwned - Keys a screen carries only for its code.
+ * @returns {Promise<string[]>} The keys, in the screen's order.
+ * @example await screenQuestions(client, step.fieldKeys, new Set())
+ */
+export declare function screenQuestions(client: Picked, fieldKeys: readonly string[], codeOwned: ReadonlySet<string>): Promise<string[]>;
+/**
+ * Clears what the session holds and reloads, so the next page can walk the persona from the start.
+ * The answers go, and so does the journey history, which a host may keep across reloads.
+ *
+ * @param {ResetClient} client - The client.
+ * @param {Persona} persona - The persona to load.
+ * @param {PersonaReload} reload - Where the load reloads, and how.
+ * @returns {boolean} `false` when the load could not be noted, so nothing was cleared.
+ * @example startPersonaLoad(client, persona, { storage: sessionStorage, url: '/', navigate })
+ */
+export declare function startPersonaLoad(client: ResetClient, persona: Persona, reload: PersonaReload): boolean;
+/**
+ * The URL a load goes to: the persona's entry page, or this page when it has none. This page's
+ * `picked-` parameters (a preview token, a devtools switch) ride along where the entry URL does not
+ * set them, so the load reads the same configuration this page does.
+ *
+ * @param {string | null} entryUrl - The persona's entry page.
+ * @param {{ pathname: string; search: string }} here - This page's address.
+ * @param {string} here.pathname - Its path.
+ * @param {string} here.search - Its query.
+ * @returns {string} The path and query to load.
+ * @example loadUrl('/sale', { pathname: '/', search: '?picked-preview-token=abc' }) // '/sale?picked-preview-token=abc'
+ */
+export declare function loadUrl(entryUrl: string | null, here: {
+    pathname: string;
+    search: string;
+}): string;
+/**
+ * Takes the persona a reload was for off `sessionStorage`, so it loads once.
+ *
+ * @param {Pick<Storage, 'getItem' | 'removeItem'>} storage - The tab's `sessionStorage`.
+ * @returns {string | null} The persona's id, or `null` when no load is waiting.
+ * @example takePendingLoad(sessionStorage)
+ */
+export declare function takePendingLoad(storage: Pick<Storage, 'getItem' | 'removeItem'>): string | null;
+/**
+ * Walks a persona's journey from its first screen: each screen gets the answers it asks, then
+ * Continue, until the persona's screen or the first screen the walk cannot finish.
+ *
+ * @param {WalkClient} client - The client, on a page that has just loaded.
+ * @param {Persona} persona - The persona.
+ * @param {WalkSettings} settings - How to read the page.
+ * @param {WalkTiming} [timing] - How long to wait; tests pass a short one.
+ * @returns {Promise<WalkOutcome>} How the walk ended, and where.
+ * @example await walkPersona(client, persona, settings)
+ */
+export declare function walkPersona(client: WalkClient, persona: Persona, settings: WalkSettings, timing?: WalkTiming): Promise<WalkOutcome>;
+/**
+ * What the reviewer reads once a walk ends.
+ *
+ * @param {Persona} persona - The persona that was walked.
+ * @param {WalkOutcome} outcome - How the walk ended.
+ * @returns {{ status: 'success' | 'warning' | 'error'; text: string }} The banner's tone and words.
+ * @example walkNotice(persona, { end: 'arrived', at: { experienceName: 'Funnel', stepName: 'Plans' } })
+ */
+export declare function walkNotice(persona: Persona, outcome: WalkOutcome): {
+    status: 'success' | 'warning' | 'error';
+    text: string;
+};

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

@@ -0,0 +1 @@
+import{deslug as e,screenName as t}from"../../derive/plain-language/plain-language.js";import{pickJourney as n}from"../../derive/journey-pick/journey-pick.js";import"../../derive/index.js";import{getStepFields as r}from"@picked/client/form";var i=`picked-devtools-persona-load`,a=30,o={sleep:e=>new Promise(t=>{setTimeout(t,e)}),bootTries:500,openTries:20,startTries:100,advanceTries:500,returnTries:33,selfAdvanceTries:1e3,maxHops:60};function s(e){return`${e.experienceKey}/${e.stepKey}`}async function c(e,t,n){for(let r=0;r<=t;r++){let i=e();if(i!==null)return i;r<t&&await n.sleep(a)}return null}function l(e,r,i){let a=e.experienceInstances.listStore.getState().filter(e=>r.has(e.experienceKey)),o=n(a,{exclude:i.exclude,precedence:i.precedence,openOrder:i.openOrder()}),s=o?.currentStepStore.getState();return o===void 0||s==null||o.currentNodeStore.getState()?.type!==`step`||o.stateStore.getState()!==`ready`?null:{instance:o,screen:{experienceKey:o.experienceKey,stepKey:s.key},fieldKeys:s.fieldKeys,stop:{experienceName:o.experienceName,stepName:t(s.name,s.key)}}}async function u(e,t,n){await e.openExperienceByKey(t),await c(()=>e.experienceInstances.listStore.getState().some(e=>e.experienceKey===t&&e.isOpenStore.getState())?!0:null,n.openTries,n)===null&&await e.launchExperienceByKey(t,{bypassCondition:!0,initialiseOpen:!0})}function d(e,t){let n={};for(let r of t)Object.hasOwn(e,r)&&(n[r]=e[r]);return n}async function f(e,t,n){let i=e.fields.listStore.getState(),a=t.flatMap(e=>i.filter(t=>t.key===e));return(await r(e,a)).map(e=>e.key).filter(e=>!n.has(e))}function p(e,t,n){try{n.storage.setItem(i,t.id)}catch{return!1}return e.responses.clearAll(),e.history.restore({entries:[]}),n.navigate(n.url),!0}function m(e,t){let n=new URL(e??`${t.pathname}${t.search}`,`https://entry.invalid`);for(let[e,r]of new URLSearchParams(t.search))e.startsWith(`picked-`)&&!n.searchParams.has(e)&&n.searchParams.append(e,r);return`${n.pathname}${n.search}`}function h(e){try{let t=e.getItem(i);return e.removeItem(i),t!==null&&t.length>0?t:null}catch{return null}}function g(e,t){return e===null||e.experienceKey!==t.experienceKey?!1:e.stepKey===null||e.stepKey===t.stepKey}async function _(e,t,n){let r=!1,i=0;return await c(()=>{let n=e.resting();return n===null?(r=!0,i=0,null):s(n.screen)!==t||(r&&(i+=1),i>e.timing.returnTries?!1:null)},n,e.timing)===!0}async function v(e,t){let n=await e.settings.askedOn(t.fieldKeys),r=n.filter(t=>Object.hasOwn(e.answers,t));if(r.length>0){let{errors:n}=await e.client.responses.commit(d(e.answers,r));if(n.length>0)return{end:`invalid`,at:t.stop}}if(g(e.landing,t.screen))return{end:`arrived`,at:t.stop};let i=s(t.screen);return e.settings.selfAdvancing.has(t.screen.stepKey)?await _(e,i,e.timing.selfAdvanceTries)?null:{end:`stuck`,at:t.stop}:(n.length>0?r.length===n.length:e.passed.has(i))?(t.instance.goToNextStep(),await _(e,i,e.timing.advanceTries)?null:{end:`stuck`,at:t.stop}):{end:`needs-answer`,at:t.stop}}async function y(e,t,n,r=o){let{landing:i}=t,a=t.passed.at(0)?.experienceKey??i?.experienceKey;if(a===void 0)return Object.keys(t.responses).length>0&&e.responses.register({...t.responses}),{end:`answers-only`,at:null};let d=new Set(t.passed.map(e=>e.experienceKey));i!==null&&d.add(i.experienceKey);let f={client:e,settings:n,timing:r,landing:i,passed:new Set(t.passed.map(s)),answers:{...t.responses,...n.answers},resting:()=>l(e,d,n)};await c(()=>e.readyStore.getState()?!0:null,r.bootTries,r),await c(f.resting,r.startTries,r)===null&&await u(e,a,r);for(let e=0;e<r.maxHops;e++){let e=await c(f.resting,r.startTries,r);if(e===null)return{end:`no-journey`,at:null};let t=await v(f,e);if(t!==null)return t}return{end:`hop-limit`,at:null}}function b(t,n){let{name:r}=t,i=n.at===null?``:`“${n.at.stepName}”`;switch(n.end){case`arrived`:return{status:`success`,text:`Loaded ${r} on ${i}.`};case`answers-only`:return{status:`success`,text:`Loaded ${r}’s answers.`};case`needs-answer`:return{status:`warning`,text:`Loaded ${r} as far as ${i}. ${r} has no answer for that screen.`};case`invalid`:return{status:`warning`,text:`Loaded ${r} as far as ${i}. An answer there no longer passes its check.`};case`stuck`:return{status:`warning`,text:`Loaded ${r} as far as ${i}. The journey did not move on from there.`};case`no-journey`:{let n=t.passed.at(0)?.experienceKey??t.landing?.experienceKey;return{status:`error`,text:`${r} did not load: ${t.landing?.experienceName??(n===void 0?`its journey`:e(n))} didn't open on this page.`}}case`hop-limit`:return{status:`warning`,text:`Stopped loading ${r} after too many screens. The journey may be going round in a loop.`}}}export{i as PENDING_LOAD_KEY,m as loadUrl,f as screenQuestions,p as startPersonaLoad,h as takePendingLoad,b as walkNotice,y as walkPersona};

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

@@ -1 +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};
+import{nextHistory as e}from"../derive/answer-history/answer-history.js";import{askedFieldKeys as t}from"../derive/answer-display/answer-display.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:t,responses:n},r)=>e(t,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,(e,n)=>t(e,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/sidebar/SidebarFooter.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+  /** @file The foot of the devtools sidebar: the auto-hide switch, then each footer tool as an icon. */
+  import { Switch, Tooltip } from '../ui'
+  import type { NavItem } from './nav'
+  import ToolIcon from './ToolIcon.svelte'
+
+  interface Props {
+    /** The footer tools, each with its glyph. */
+    tools: readonly NavItem[]
+    /** The selected tab's id. */
+    selected: string
+    /** Whether the Picked button auto-hides. */
+    autoHide: boolean
+    onSelect: (id: string) => void
+    onAutoHideChange: (value: boolean) => void
+  }
+
+  const { tools, selected, autoHide, onSelect, onAutoHideChange }: Props = $props()
+</script>
+
+<div class="footer" data-testid="devtools-sidebar-footer">
+  <span class="auto-hide" data-testid="devtools-auto-hide">
+    <Switch
+      label="Auto-hide button"
+      name="devtools-auto-hide"
+      size="small"
+      checked={autoHide}
+      onchange={onAutoHideChange}
+    />
+  </span>
+  {#each tools as tool (tool.id)}
+    <Tooltip content={tool.label}>
+      <button
+        type="button"
+        class="icon-button"
+        class:active={selected === tool.id}
+        aria-label={tool.label}
+        aria-current={selected === tool.id ? 'page' : undefined}
+        data-testid="devtools-nav-{tool.id}"
+        onclick={() => onSelect(tool.id)}
+      >
+        <ToolIcon name={tool.icon ?? 'wrench'} />
+      </button>
+    </Tooltip>
+  {/each}
+</div>
+
+<style>
+  .footer {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+    padding: var(--space-2);
+    border-top: 1px solid var(--color-gray-200);
+    color: var(--color-gray-900);
+  }
+
+  .auto-hide {
+    flex: 1;
+    min-width: 0;
+  }
+
+  /* The switch shares a 200px column with the icons, so its label is small and never wraps. */
+  .auto-hide :global(.switch-label) {
+    gap: var(--space-2);
+    min-width: 0;
+  }
+
+  .auto-hide :global(.label-text) {
+    min-width: 0;
+    overflow: hidden;
+    font-size: var(--text-xs);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .icon-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border: 0;
+    border-radius: var(--radius-md);
+    background: none;
+    color: color-mix(in srgb, currentColor 80%, transparent);
+    cursor: pointer;
+    transition:
+      background-color 0.15s ease,
+      color 0.15s ease;
+  }
+
+  .icon-button:hover {
+    color: var(--color-gray-900);
+    background-color: color-mix(in srgb, currentColor 5%, transparent);
+  }
+
+  .icon-button.active {
+    color: var(--color-gray-900);
+    background-color: color-mix(in srgb, currentColor 10%, transparent);
+  }
+
+  .icon-button:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: -2px;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .icon-button {
+      transition: none;
+    }
+  }
+</style>

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

@@ -0,0 +1,32 @@
+<script lang="ts">
+  /** @file The glyph of a footer tool, drawn in the current text colour. */
+  import type { CustomToolIcon } from '../customTools'
+
+  interface Props {
+    name: CustomToolIcon
+  }
+
+  const { name }: Props = $props()
+</script>
+
+<svg
+  width="16"
+  height="16"
+  viewBox="0 0 16 16"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="1.4"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  aria-hidden="true"
+>
+  {#if name === 'bug'}
+    <path d="M5.5 4.5 4.5 3M10.5 4.5l1-1.5" />
+    <path d="M5 7a3 3 0 0 1 6 0v3a3 3 0 0 1-6 0Z" />
+    <path d="M8 7.5V13M5 8.5H2.5M11 8.5h2.5M5 11l-2 1.5M11 11l2 1.5" />
+  {:else}
+    <path
+      d="M10.2 2.6a3.2 3.2 0 0 0-3.5 4.3l-4 4a1.3 1.3 0 0 0 1.9 1.9l4-4a3.2 3.2 0 0 0 4.3-3.5L11 7.2 9.4 6.6 8.8 5Z"
+    />
+  {/if}
+</svg>

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

@@ -1,21 +1,25 @@
 /** @file The devtools sidebar's tab list, its remembered tab, and its keyboard moves. */
+import type { CustomToolIcon } from '../customTools';
 import type { StorageGetter } from '../launcher/launcher';
 /**
- * What a sidebar row opens: a review tab, a review-placed custom tool, the Custom Tools tab, or a
- * developer screen.
+ * What a sidebar entry opens: a review tab, a review- or footer-placed custom tool, the Custom Tools
+ * tab, or a developer screen.
  */
 export type NavKind = 'review' | 'tool' | 'custom-tools' | 'developer';
-/** One row of the sidebar. */
+/** One entry of the sidebar: a row, or an icon at its foot. */
 export interface NavItem {
     /** Unique across the whole sidebar. */
     id: string;
     label: string;
     kind: NavKind;
+    /** The glyph of an icon at the sidebar's foot. */
+    icon?: CustomToolIcon;
 }
-/** The sidebar's rows: the top-level tabs, and the Developer group's screens. */
+/** The sidebar's entries: the top-level tabs, the Developer group's screens, and the foot's icons. */
 export interface NavModel {
     primary: 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";
@@ -23,7 +27,7 @@ export declare const TAB_STORAGE_KEY = "picked-devtools-tab";
 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 id of the Custom Tools tab, which holds every tool not placed `'review'`. */
+/** The id of the Custom Tools tab, which holds every tool placed neither `'review'` nor `'footer'`. */
 export declare const CUSTOM_TOOLS_TAB = "custom-tools";
 /** The developer screens, in the order the Developer group lists them. */
 export declare const DEVELOPER_SCREENS: readonly {
@@ -31,7 +35,7 @@ export declare const DEVELOPER_SCREENS: readonly {
     label: string;
 }[];
 /**
- * The sidebar id of a review-placed custom tool.
+ * The sidebar id of a review- or footer-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.
@@ -57,13 +61,19 @@ export interface NavInput {
     }[];
     /** Whether any tool sits in the Custom Tools tab, which lists it. */
     customTools: boolean;
+    /** The footer-placed custom tools, in registration order, each an icon at the sidebar's foot. */
+    footerTools: readonly {
+        id: string;
+        label: string;
+        icon?: CustomToolIcon;
+    }[];
 }
 /**
- * Builds the sidebar's rows.
+ * Builds the sidebar's entries.
  *
  * @param {NavInput} input - What this session lists.
- * @returns {NavModel} The top-level tabs and the Developer group's screens.
- * @example buildNav({ variations: true, tools: [], customTools: false })
+ * @returns {NavModel} The top-level tabs, the Developer group's screens and the foot's icons.
+ * @example buildNav({ variations: true, tools: [], customTools: false, footerTools: [] })
  */
 export declare function buildNav(input: NavInput): NavModel;
 /**

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=`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:`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`}];function o(e){return`tool:${e}`}function s(e){return`dev:${e}`}function c(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:o(e.id),label:e.label,kind:`tool`})),c=a.map(e=>({id:s(e.id),label:e.label,kind:`developer`})),l=t.customTools?[{id:i,label:`Custom Tools`,kind:`custom-tools`}]:[];return{primary:[...n,...r,...l],developer:c}}function l(e,t){return e===null?r:[...t.primary,...t.developer].some(t=>t.id===e)?e:r}function u(e,t){return t.developer.some(t=>t.id===e)}function d(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 f(e,t){try{return e().getItem(t)}catch{return null}}function p(e,t,n){try{e().setItem(t,n)}catch{}}export{i as CUSTOM_TOOLS_TAB,r as DEFAULT_TAB,n as DEVELOPER_OPEN_STORAGE_KEY,a as DEVELOPER_SCREENS,t as TAB_STORAGE_KEY,c as buildNav,s as developerTabId,u as isInDeveloper,d as nextFocusIndex,f as readStored,l as resolveTab,o as toolTabId,p as writeStored};
+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=`custom-tools`,a=[{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`}];function o(e){return`tool:${e}`}function s(e){return`dev:${e}`}function c(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=t.tools.map(e=>({id:o(e.id),label:e.label,kind:`tool`})),c=a.map(e=>({id:s(e.id),label:e.label,kind:`developer`})),l=t.customTools?[{id:i,label:`Custom Tools`,kind:`custom-tools`}]:[],u=t.footerTools.map(e=>({id:o(e.id),label:e.label,kind:`tool`,icon:e.icon??`wrench`}));return{primary:[...n,...r,...l],developer:c,footer:u}}function l(e,t){return e===null?r:[...t.primary,...t.developer,...t.footer].some(t=>t.id===e)?e:r}function u(e,t){return t.developer.some(t=>t.id===e)}function d(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 f(e,t){try{return e().getItem(t)}catch{return null}}function p(e,t,n){try{e().setItem(t,n)}catch{}}export{i as CUSTOM_TOOLS_TAB,r as DEFAULT_TAB,n as DEVELOPER_OPEN_STORAGE_KEY,a as DEVELOPER_SCREENS,t as TAB_STORAGE_KEY,c as buildNav,s as developerTabId,u as isInDeveloper,d as nextFocusIndex,f as readStored,l as resolveTab,o as toolTabId,p as writeStored};

package/dist/plugins/devtools/ui/forms/TextField.svelte

@@ -12,34 +12,60 @@
     placeholder?: string
     value?: string
     oninput?: (value: string) => void
+    /** Fires once the value is settled: on blur, or on Enter. */
+    onchange?: (value: string) => void
     error?: string
     helpText?: string
     disabled?: boolean
     required?: boolean
   }
 
-  let {
+  const {
     label,
     name,
     type = 'text',
     placeholder,
     value = '',
     oninput,
+    onchange,
     error,
     helpText,
     disabled = false,
     required = false,
   }: Props = $props()
 
-  let inputId = $derived(`field-${name}`)
-  let errorId = $derived(`${inputId}-error`)
-  let helpId = $derived(`${inputId}-help`)
+  const inputId = $derived(`field-${name}`)
+  const errorId = $derived(`${inputId}-error`)
+  const helpId = $derived(`${inputId}-help`)
+  /** The note the input is described by: its error, else its help text. */
+  const describedBy = $derived.by(() => {
+    if (error) return errorId
+    return helpText ? helpId : undefined
+  })
 
+  /**
+   * Hands each keystroke's value on.
+   *
+   * @param {Event} event - The input event.
+   * @example handleInput(event)
+   */
   function handleInput(event: Event): void {
     if (event.target instanceof HTMLInputElement) {
       oninput?.(event.target.value)
     }
   }
+
+  /**
+   * Hands the settled value on.
+   *
+   * @param {Event} event - The change event.
+   * @example handleChange(event)
+   */
+  function handleChange(event: Event): void {
+    if (event.target instanceof HTMLInputElement) {
+      onchange?.(event.target.value)
+    }
+  }
 </script>
 
 <div class="text-field">
@@ -50,7 +76,7 @@
   <input
     id={inputId}
     class="input"
-    class:has-error={!!error}
+    class:has-error={Boolean(error)}
     {type}
     {name}
     {placeholder}
@@ -58,8 +84,9 @@
     {disabled}
     {required}
     aria-invalid={error ? true : undefined}
-    aria-describedby={error ? errorId : helpText ? helpId : undefined}
+    aria-describedby={describedBy}
     oninput={handleInput}
+    onchange={handleChange}
   />
   {#if error}
     <p id={errorId} class="error-text">{error}</p>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@picked/svelte",
-  "version": "0.0.1-dev.1793758300441",
+  "version": "0.0.1-dev.1793769511104",
   "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.1793758300441",
+    "@picked/client": "0.0.1-dev.1793769511104",
     "effector": "^23.4.4",
     "svelte": "^5.55.7"
   },