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

package/dist/plugins/devtools/derive/personas/personas.d.ts

@@ -20,18 +20,28 @@ export interface PersonaScreen {
     experienceKey: string;
     stepKey: string;
 }
-/** Loads a persona the host's own way, in place of walking its journey with its answers. */
-export type PersonaLoader = (client: Picked) => void | Promise<void>;
+/**
+ * Puts the page in the state a persona needs before its experience starts, such as a stubbed
+ * account or a location. It runs on every page of the persona's session, before the walk.
+ */
+export type PersonaSetup = (client: Picked) => void | Promise<void>;
 /** A customer or situation to try the journey as. */
 export interface Persona {
     id: string;
     name: string;
     description: string | null;
     source: PersonaSource;
+    /** The heading it is listed under; `null` lists it under its source's heading. */
+    group: string | null;
     /** The answers in place once it loads. */
     responses: Readonly<Record<string, FieldValue>>;
     /** Where a load stops; `null` loads the answers only. */
     landing: PersonaLanding | null;
+    /**
+     * The experience a walk starts in, such as the page's entry experience. `null` starts in the
+     * experience of the first screen moved on from, else the landing's.
+     */
+    start: string | null;
     /**
      * The screens moved on from when it was saved, in the order first left. A load presses Continue
      * on a screen that asks nothing only when it is listed here.
@@ -49,8 +59,10 @@ export interface Persona {
     entryUrl: string | null;
     /** When it was saved, as an ISO time; `null` for a host-defined persona. */
     savedAt: string | null;
-    /** The host's own loader; `null` for the standard one. */
-    load: PersonaLoader | null;
+    /** The host's setup; `null` when it needs none. */
+    setup: PersonaSetup | null;
+    /** `true` for a host-defined persona that a reviewer edited in this browser. */
+    edited: boolean;
 }
 /** A persona as the host defines it in the plugin's `personas` option. */
 export interface PersonaDefinition {
@@ -59,16 +71,20 @@ export interface PersonaDefinition {
     name: string;
     /** Who they are, in a sentence. */
     description?: string;
+    /** The heading it is listed under, such as `Moving`. */
+    group?: string;
     /** The answers in place once it loads. */
     responses?: Readonly<Record<string, FieldValue>>;
     /** The journey it opens. */
     experienceKey?: string;
     /** The screen in that journey it lands on. */
     stepKey?: string;
+    /** The experience a walk starts in, such as the page's entry experience; `experienceKey` when absent. */
+    startExperienceKey?: string;
     /** The page a load starts on, such as a campaign landing; the page in front when absent. */
     entryUrl?: string;
-    /** Loads it the host's own way, in place of the standard answers-then-journey load. */
-    load?: PersonaLoader;
+    /** Prepares the page for it, such as stubbing an account, before each walk. */
+    setup?: PersonaSetup;
 }
 /** What the reviewer types when saving where they are. */
 export interface PersonaDraft {
@@ -117,6 +133,22 @@ export declare function personaStorageKey(projectId: string): string;
  * @example readAnswers({ age: 42 }) // { age: 42 }
  */
 export declare function readAnswers(value: unknown): Record<string, FieldValue>;
+/**
+ * Reads a stored landing.
+ *
+ * @param {unknown} value - The value to read.
+ * @returns {PersonaLanding | null} The landing, or `null` when it names no journey.
+ * @example readLanding({ experienceKey: 'needs-analysis' })
+ */
+export declare function readLanding(value: unknown): PersonaLanding | null;
+/**
+ * Reads a stored list of passed screens, keeping only the well-formed entries.
+ *
+ * @param {unknown} value - The stored list.
+ * @returns {PersonaScreen[]} The screens, in order.
+ * @example readPassed([{ experienceKey: 'funnel', stepKey: 'postcode' }])
+ */
+export declare function readPassed(value: unknown): PersonaScreen[];
 /**
  * Reads an entry URL, or `null` when it is not a path on this site.
  *
@@ -186,7 +218,7 @@ export declare function customerAnswers(responses: Readonly<Record<string, Field
  */
 export declare function buildPersona(draft: PersonaDraft, capture: PersonaCapture): BuildPersonaResult;
 /**
- * Reads the host's persona definitions, dropping any without an id or name. A host loader is
+ * Reads the host's persona definitions, dropping any without an id or name. A host setup is
  * wrapped so it can be any function the host passed.
  *
  * @param {unknown} definitions - The plugin's `personas` option.
@@ -202,3 +234,52 @@ export declare function sitePersonas(definitions: unknown): Persona[];
  * @example describeLanding(null) // 'Responses only'
  */
 export declare function describeLanding(landing: PersonaLanding | null): string;
+/**
+ * The experience a persona's walk starts in.
+ *
+ * @param {Pick<Persona, 'passed' | 'start' | 'landing'>} persona - The persona.
+ * @returns {string | null} The experience key, or `null` for a persona with no journey.
+ * @example startOf(persona) // 'needs-analysis'
+ */
+export declare function startOf(persona: Pick<Persona, 'passed' | 'start' | 'landing'>): string | null;
+/** The host's personas with this browser's edits applied, and the reviewer's own. */
+export interface EditedPersonas {
+    /** The host's personas, each replaced by its edit when this browser holds one. */
+    site: Persona[];
+    /** The personas this browser saved that edit none of the host's. */
+    own: Persona[];
+}
+/**
+ * Applies this browser's edits to the host's personas. An edit is a saved persona with a host
+ * persona's id; it keeps the host's heading, start and setup.
+ *
+ * @param {readonly Persona[]} site - The host's personas.
+ * @param {readonly Persona[]} saved - The personas saved in this browser.
+ * @returns {EditedPersonas} The host's personas as edited, and the reviewer's own.
+ * @example applyEdits(options.personas, readSavedPersonas(getStorage, projectId))
+ */
+export declare function applyEdits(site: readonly Persona[], saved: readonly Persona[]): EditedPersonas;
+/** Personas listed under one heading. */
+export interface PersonaGroup {
+    title: string;
+    personas: Persona[];
+}
+/**
+ * Lists personas under their headings, in the order each heading first appears.
+ *
+ * @param {readonly Persona[]} personas - The personas.
+ * @param {string} fallback - The heading for a persona with no group.
+ * @returns {PersonaGroup[]} The headings and their personas.
+ * @example groupPersonas(personas, 'For this site')
+ */
+export declare function groupPersonas(personas: readonly Persona[], fallback: string): PersonaGroup[];
+/**
+ * Whether a persona matches what the reviewer searched for: every word appears in its name,
+ * description or heading.
+ *
+ * @param {Persona} persona - The persona.
+ * @param {string} search - What was typed.
+ * @returns {boolean} `true` when it matches, and always for an empty search.
+ * @example matchesSearch(persona, 'moving gas')
+ */
+export declare function matchesSearch(persona: Persona, search: string): boolean;

package/dist/plugins/devtools/derive/personas/personas.js

@@ -1 +1 @@
-import{isBlank as e}from"../answer-history/answer-history.js";import{deslug as t}from"../plain-language/plain-language.js";var n=`picked-devtools-personas`,r=1;function i(e){return`${n}:${e}`}function a(e){return typeof e==`object`&&!!e&&!Array.isArray(e)}function o(e){return e===null||typeof e==`string`||typeof e==`boolean`?!0:typeof e==`number`?Number.isFinite(e):Array.isArray(e)?e.every(o):a(e)&&Object.values(e).every(o)}function s(e){if(!a(e))return{};let t={};for(let[n,r]of Object.entries(e))o(r)&&(t[n]=r);return t}function c(e){if(typeof e!=`string`)return null;let t=e.trim();return t.length>0?t:null}function l(e){if(!a(e))return null;let t=c(e.experienceKey);return t===null?null:{experienceKey:t,experienceName:c(e.experienceName),stepKey:c(e.stepKey),stepName:c(e.stepName)}}function u(e){return Array.isArray(e)?e.flatMap(e=>{if(!a(e))return[];let t=c(e.experienceKey),n=c(e.stepKey);return t===null||n===null?[]:[{experienceKey:t,stepKey:n}]}):[]}function d(e){if(!a(e))return{};let t={};for(let[n,r]of Object.entries(e))typeof r==`boolean`&&(t[n]=r);return t}function f(e){let t=c(e);return t!==null&&t.startsWith(`/`)&&!t.startsWith(`//`)?t:null}function p(e,t){let n=e.trim();if(n.length===0)return null;try{let e=new URL(n,t);return e.origin===t?`${e.pathname}${e.search}`:null}catch{return null}}function m(e){if(!a(e))return null;let t=c(e.id),n=c(e.name);return t===null||n===null?null:{id:t,name:n,description:c(e.description),source:`saved`,responses:s(e.responses),landing:l(e.landing),passed:u(e.passed),choices:d(e.choices),entryUrl:f(e.entryUrl),savedAt:c(e.savedAt),load:null}}function h(e,t){let n;try{n=e().getItem(i(t))}catch{return[]}if(n===null)return[];let r;try{r=JSON.parse(n)}catch{return[]}return!a(r)||!Array.isArray(r.personas)?[]:r.personas.map(m).filter(e=>e!==null)}function g(e,t,n){let a=n.map(e=>({id:e.id,name:e.name,description:e.description,responses:e.responses,landing:e.landing,passed:e.passed,choices:e.choices,entryUrl:e.entryUrl,savedAt:e.savedAt}));try{return e().setItem(i(t),JSON.stringify({version:r,personas:a})),!0}catch{return!1}}function _(e,t){let n=new Set,r=[];for(let{journey:i,screen:a}of e){let e=`${i}/${a}`;t.has(i)||n.has(e)||(n.add(e),r.push({experienceKey:i,stepKey:a}))}return r}function v(t,n){let r={};for(let[i,a]of Object.entries(t))n.has(i)&&!e(a)&&(r[i]=a);return r}function y(e,t){let n=c(e.name);return n===null?{ok:!1,error:`Give it a name.`}:Object.keys(t.responses).length===0&&t.journey===null?{ok:!1,error:`Nothing to save yet. Give a response first.`}:{ok:!0,persona:{id:t.id,name:n,description:c(e.description),source:`saved`,responses:s(t.responses),landing:t.journey,passed:t.passed,choices:d(t.choices),entryUrl:f(t.entryUrl),savedAt:t.savedAt,load:null}}}function b(e){return Array.isArray(e)?e.flatMap(e=>{if(!a(e))return[];let t=c(e.id),n=c(e.name);if(t===null||n===null)return[];let r=c(e.experienceKey),i=e.load;return[{id:t,name:n,description:c(e.description),source:`site`,responses:s(e.responses),landing:r===null?null:{experienceKey:r,experienceName:null,stepKey:c(e.stepKey),stepName:null},passed:[],choices:{},entryUrl:f(e.entryUrl),savedAt:null,load:typeof i==`function`?async e=>{await Reflect.apply(i,void 0,[e])}:null}]}):[]}function x(e){if(e===null)return`Responses only`;let n=e.experienceName??t(e.experienceKey);return e.stepKey===null?`Opens ${n}`:`Lands on ${e.stepName??t(e.stepKey)} in ${n}`}export{n as PERSONA_STORAGE_PREFIX,y as buildPersona,v as customerAnswers,x as describeLanding,p as entryUrlOf,_ as passedScreens,i as personaStorageKey,s as readAnswers,f as readEntryUrl,h as readSavedPersonas,b as sitePersonas,g as writeSavedPersonas};
+import{isBlank as e}from"../answer-history/answer-history.js";import{deslug as t}from"../plain-language/plain-language.js";var n=`picked-devtools-personas`,r=1;function i(e){return`${n}:${e}`}function a(e){return typeof e==`object`&&!!e&&!Array.isArray(e)}function o(e){return e===null||typeof e==`string`||typeof e==`boolean`?!0:typeof e==`number`?Number.isFinite(e):Array.isArray(e)?e.every(o):a(e)&&Object.values(e).every(o)}function s(e){if(!a(e))return{};let t={};for(let[n,r]of Object.entries(e))o(r)&&(t[n]=r);return t}function c(e){if(typeof e!=`string`)return null;let t=e.trim();return t.length>0?t:null}function l(e){if(!a(e))return null;let t=c(e.experienceKey);return t===null?null:{experienceKey:t,experienceName:c(e.experienceName),stepKey:c(e.stepKey),stepName:c(e.stepName)}}function u(e){return Array.isArray(e)?e.flatMap(e=>{if(!a(e))return[];let t=c(e.experienceKey),n=c(e.stepKey);return t===null||n===null?[]:[{experienceKey:t,stepKey:n}]}):[]}function d(e){if(!a(e))return{};let t={};for(let[n,r]of Object.entries(e))typeof r==`boolean`&&(t[n]=r);return t}function f(e){let t=c(e);return t!==null&&t.startsWith(`/`)&&!t.startsWith(`//`)?t:null}function p(e,t){let n=e.trim();if(n.length===0)return null;try{let e=new URL(n,t);return e.origin===t?`${e.pathname}${e.search}`:null}catch{return null}}function m(e){if(!a(e))return null;let t=c(e.id),n=c(e.name);return t===null||n===null?null:{id:t,name:n,description:c(e.description),source:`saved`,group:null,responses:s(e.responses),landing:l(e.landing),start:null,passed:u(e.passed),choices:d(e.choices),entryUrl:f(e.entryUrl),savedAt:c(e.savedAt),setup:null,edited:!1}}function h(e,t){let n;try{n=e().getItem(i(t))}catch{return[]}if(n===null)return[];let r;try{r=JSON.parse(n)}catch{return[]}return!a(r)||!Array.isArray(r.personas)?[]:r.personas.map(m).filter(e=>e!==null)}function g(e,t,n){let a=n.map(e=>({id:e.id,name:e.name,description:e.description,responses:e.responses,landing:e.landing,passed:e.passed,choices:e.choices,entryUrl:e.entryUrl,savedAt:e.savedAt}));try{return e().setItem(i(t),JSON.stringify({version:r,personas:a})),!0}catch{return!1}}function _(e,t){let n=new Set,r=[];for(let{journey:i,screen:a}of e){let e=`${i}/${a}`;t.has(i)||n.has(e)||(n.add(e),r.push({experienceKey:i,stepKey:a}))}return r}function v(t,n){let r={};for(let[i,a]of Object.entries(t))n.has(i)&&!e(a)&&(r[i]=a);return r}function y(e,t){let n=c(e.name);return n===null?{ok:!1,error:`Give it a name.`}:Object.keys(t.responses).length===0&&t.journey===null?{ok:!1,error:`Nothing to save yet. Give a response first.`}:{ok:!0,persona:{id:t.id,name:n,description:c(e.description),source:`saved`,group:null,responses:s(t.responses),landing:t.journey,start:null,passed:t.passed,choices:d(t.choices),entryUrl:f(t.entryUrl),savedAt:t.savedAt,setup:null,edited:!1}}}function b(e){return Array.isArray(e)?e.flatMap(e=>{if(!a(e))return[];let t=c(e.id),n=c(e.name);if(t===null||n===null)return[];let r=c(e.experienceKey),i=e.setup;return[{id:t,name:n,description:c(e.description),source:`site`,group:c(e.group),responses:s(e.responses),landing:r===null?null:{experienceKey:r,experienceName:null,stepKey:c(e.stepKey),stepName:null},start:c(e.startExperienceKey),passed:[],choices:{},entryUrl:f(e.entryUrl),savedAt:null,setup:typeof i==`function`?async e=>{await Reflect.apply(i,void 0,[e])}:null,edited:!1}]}):[]}function x(e){if(e===null)return`Responses only`;let n=e.experienceName??t(e.experienceKey);return e.stepKey===null?`Opens ${n}`:`Lands on ${e.stepName??t(e.stepKey)} in ${n}`}function S(e){return e.passed.at(0)?.experienceKey??e.start??e.landing?.experienceKey??null}function C(e,t){let n=new Map(t.map(e=>[e.id,e])),r=new Set(e.map(e=>e.id));return{site:e.map(e=>{let t=n.get(e.id);return t===void 0?e:{...t,source:`site`,group:e.group,start:e.start,setup:e.setup,edited:!0}}),own:t.filter(e=>!r.has(e.id))}}function w(e,t){let n=new Map;for(let r of e){let e=r.group??t;n.set(e,[...n.get(e)??[],r])}return[...n].map(([e,t])=>({title:e,personas:t}))}function T(e,t){let n=[e.name,e.description,e.group].join(` `).toLowerCase();return t.toLowerCase().split(/\s+/).filter(e=>e.length>0).every(e=>n.includes(e))}export{n as PERSONA_STORAGE_PREFIX,C as applyEdits,y as buildPersona,v as customerAnswers,x as describeLanding,p as entryUrlOf,w as groupPersonas,T as matchesSearch,_ as passedScreens,i as personaStorageKey,s as readAnswers,f as readEntryUrl,l as readLanding,u as readPassed,h as readSavedPersonas,b as sitePersonas,S as startOf,g as writeSavedPersonas};

package/dist/plugins/devtools/derive/plain-language/index.d.ts

@@ -1,3 +1,3 @@
 /** @file Public entrypoint for the review tools' vocabulary contract. */
-export { DEVELOPER_LABEL, NODE_LABELS, TAB_INTROS, TAB_LABELS, configSourceLabel, deslug, screenName, } from './plain-language';
+export { NODE_LABELS, TAB_INTROS, ADVANCED_LABEL, TAB_LABELS, configSourceLabel, deslug, screenName, } from './plain-language';
 export type { ReviewTabId } from './plain-language';

package/dist/plugins/devtools/derive/plain-language/index.js

@@ -1 +1 @@
-export{DEVELOPER_LABEL,NODE_LABELS,TAB_INTROS,TAB_LABELS,configSourceLabel,deslug,screenName}from"./plain-language.js";
+export{ADVANCED_LABEL,NODE_LABELS,TAB_INTROS,TAB_LABELS,configSourceLabel,deslug,screenName}from"./plain-language.js";

package/dist/plugins/devtools/derive/plain-language/plain-language.d.ts

@@ -53,20 +53,20 @@ export declare const TAB_LABELS: {
     readonly guide: 'How to use';
     readonly session: 'This session';
     readonly answers: 'Responses';
-    readonly journey: 'Flow';
+    readonly journey: 'Experiences';
     readonly personas: 'Personas & Scenarios';
     readonly variations: 'Feature flags';
 };
 /** The id of one of the review tools' own tabs. */
 export type ReviewTabId = keyof typeof TAB_LABELS;
-/** The name of the sidebar section that holds the developer tools, apart from the review tabs. */
-export declare const DEVELOPER_LABEL = "Developer";
+/** The name of the folding sidebar group that holds the SDK's own screens. */
+export declare const ADVANCED_LABEL = "Advanced";
 /** The one-sentence purpose each tab leads with. Kept together so the tone stays consistent. */
 export declare const TAB_INTROS: {
     readonly guide: 'How to use each tab. Open a tab straight from its section.';
     readonly session: 'Where you are right now, and your responses on each step. Start here if something looks wrong.';
     readonly answers: 'Every field this experience can ask for, and the responses given. Change one to see what the visitor would see.';
-    readonly journey: 'Every route this experience can take, with your route marked. Go back to any step you have already visited.';
-    readonly personas: 'Visitors and situations to try this experience as. Load one to land where it would, or save where you are as a new one.';
+    readonly journey: 'Every experience on this site: the route each can take, with yours marked, and where and when it shows. Go back to any step you have already visited.';
+    readonly personas: 'Visitors and situations to try this experience as. Walk through as one, or jump to a step on its route.';
     readonly variations: 'The feature flags running on this site. Force a variant to review it, then copy the link to show someone else exactly what you saw.';
 };

package/dist/plugins/devtools/derive/plain-language/plain-language.js

@@ -1 +1 @@
-var e={origin:`Origin`,step:`Step`,condition:`Condition`,action:`Action`,experience:`Opens another experience`};function t(e){let t=e.replace(/[-_]+/g,` `).trim();return t.length===0?e:t.charAt(0).toUpperCase()+t.slice(1)}function n(e,n){let r=e?.trim();return r!==void 0&&r.length>0?r:n!==void 0&&n.length>0?t(n):`Untitled step`}function r(e){return e!==void 0&&e.length>0?`Viewing unpublished changes`:`Viewing published content`}var i={guide:`How to use`,session:`This session`,answers:`Responses`,journey:`Flow`,personas:`Personas & Scenarios`,variations:`Feature flags`},a=`Developer`,o={guide:`How to use each tab. Open a tab straight from its section.`,session:`Where you are right now, and your responses on each step. Start here if something looks wrong.`,answers:`Every field this experience can ask for, and the responses given. Change one to see what the visitor would see.`,journey:`Every route this experience can take, with your route marked. Go back to any step you have already visited.`,personas:`Visitors and situations to try this experience as. Load one to land where it would, or save where you are as a new one.`,variations:`The feature flags running on this site. Force a variant to review it, then copy the link to show someone else exactly what you saw.`};export{a as DEVELOPER_LABEL,e as NODE_LABELS,o as TAB_INTROS,i as TAB_LABELS,r as configSourceLabel,t as deslug,n as screenName};
+var e={origin:`Origin`,step:`Step`,condition:`Condition`,action:`Action`,experience:`Opens another experience`};function t(e){let t=e.replace(/[-_]+/g,` `).trim();return t.length===0?e:t.charAt(0).toUpperCase()+t.slice(1)}function n(e,n){let r=e?.trim();return r!==void 0&&r.length>0?r:n!==void 0&&n.length>0?t(n):`Untitled step`}function r(e){return e!==void 0&&e.length>0?`Viewing unpublished changes`:`Viewing published content`}var i={guide:`How to use`,session:`This session`,answers:`Responses`,journey:`Experiences`,personas:`Personas & Scenarios`,variations:`Feature flags`},a=`Advanced`,o={guide:`How to use each tab. Open a tab straight from its section.`,session:`Where you are right now, and your responses on each step. Start here if something looks wrong.`,answers:`Every field this experience can ask for, and the responses given. Change one to see what the visitor would see.`,journey:`Every experience on this site: the route each can take, with yours marked, and where and when it shows. Go back to any step you have already visited.`,personas:`Visitors and situations to try this experience as. Walk through as one, or jump to a step on its route.`,variations:`The feature flags running on this site. Force a variant to review it, then copy the link to show someone else exactly what you saw.`};export{a as ADVANCED_LABEL,e as NODE_LABELS,o as TAB_INTROS,i as TAB_LABELS,r as configSourceLabel,t as deslug,n as screenName};

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

@@ -5,4 +5,4 @@ export type * from './plugin';
 export type * from './options';
 export type { CustomTool, CustomToolGuide, CustomToolIcon, CustomToolPlacement, } from './customTools';
 export type { DevtoolsSession } from './session-access';
-export type { PersonaDefinition, PersonaLoader } from './derive/personas';
+export type { PersonaDefinition, PersonaSetup } from './derive/personas';

package/dist/plugins/devtools/launcher/Launcher.svelte

@@ -11,13 +11,20 @@
     autoHide: boolean
     /** The tag beside the button: a preview session, a preview whose workspace is gone, or none. */
     preview: 'preview' | 'unavailable' | null
+    /** The persona the tab walks through as, named in the tag; `null` outside a persona session. */
+    walkingAs?: string | null
     /** Opens the panel. */
     onOpen: () => void
   }
 
-  const { position, autoHide, preview, onOpen }: Props = $props()
+  const { position, autoHide, preview, walkingAs = null, onOpen }: Props = $props()
 
   const edges = $derived(launcherEdges(position))
+  const tag = $derived(
+    [preview === 'preview' ? 'Preview mode' : '', walkingAs === null ? '' : `As ${walkingAs}`]
+      .filter((part) => part.length > 0)
+      .join(' · '),
+  )
 </script>
 
 <div
@@ -33,12 +40,14 @@
       aria-live="polite"
       title="This preview link's workspace no longer exists. The published site is shown."
     >Preview unavailable — showing published</span>
-  {:else if preview === 'preview'}
-    <span class="preview-tag" role="status" aria-live="polite">Preview mode</span>
+  {:else if tag.length > 0}
+    <span class="preview-tag" role="status" aria-live="polite" data-testid="devtools-launcher-tag">
+      {tag}
+    </span>
   {/if}
   <button
     class="floating-button"
-    class:has-preview-tag={preview !== null}
+    class:has-preview-tag={preview === 'unavailable' || tag.length > 0}
     onclick={onOpen}
     aria-label="Open Picked Devtools"
     title="Open Picked Devtools"

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

@@ -97,10 +97,11 @@ export interface DevtoolsPanelOptions {
     /** The floating button's corner and auto-hide. */
     launcher?: LauncherOptions;
     /**
-     * Visitors and situations every viewer can load from the Personas & Scenarios tab. Reviewers
-     * also save their own there, in their browser.
+     * Visitors and situations every viewer can load from the Personas & Scenarios tab, or a function
+     * that loads them, such as a dynamic import a production build can drop. Reviewers also save
+     * their own there, in their browser.
      */
-    personas?: readonly PersonaDefinition[];
+    personas?: readonly PersonaDefinition[] | (() => Promise<readonly PersonaDefinition[]>);
     /** How loading a persona walks an experience. */
     personaWalk?: PersonaWalkOptions;
 }
@@ -118,7 +119,8 @@ export interface ResolvedDevtoolsOptions {
         fixes: DevtoolsGuideFix[];
     };
     launcher: Required<LauncherOptions>;
-    personas: Persona[];
+    /** The site's personas, loaded on the first call. */
+    personas: () => Promise<Persona[]>;
     personaWalk: {
         selfAdvancingSteps: ReadonlySet<string>;
         responses: Readonly<Record<string, FieldValue>>;

package/dist/plugins/devtools/options.js

@@ -1 +1 @@
-import{DEVTOOLS_EXPERIENCE_KEY as e,DEVTOOLS_PLUGIN_NAME as t}from"./constants.js";import{readAnswers as n,sitePersonas as r}from"./derive/personas/personas.js";var i=[`top-left`,`top-right`,`bottom-left`,`bottom-right`];function a(e){return typeof e==`object`&&!!e&&!Array.isArray(e)}function o(e){return Array.isArray(e)?e.filter(e=>typeof e==`string`):[]}function s(e){if(!a(e))return{};let t={};for(let[n,r]of Object.entries(e))typeof r==`string`&&(t[n]=r);return t}function c(e){return i.some(t=>t===e)}function l(e){if(!a(e))return null;let{id:t,title:n,steps:r,notes:i}=e;return typeof t!=`string`||typeof n!=`string`||!Array.isArray(r)?null:{id:t,title:n,steps:o(r),notes:o(i)}}function u(e){if(!a(e))return null;let{problem:t,fix:n}=e;return typeof t!=`string`||typeof n!=`string`?null:{problem:t,fix:n}}function d(e){if(!a(e))return null;let{label:t,run:n}=e;return typeof t!=`string`||typeof n!=`function`?null:{label:t,run:e=>{Reflect.apply(n,void 0,[e])}}}function f(i){let f=i.getPluginConfig(t).options,p=a(f)?f:{},m=a(p.guide)?p.guide:{},h=a(p.launcher)?p.launcher:{},g=a(p.personaWalk)?p.personaWalk:{},_=p.environmentLabel;return{readOnly:p.readOnly===!0,environmentLabel:typeof _==`string`&&_.length>0?_:void 0,hiddenExperienceKeys:new Set([e,...o(p.hiddenExperienceKeys)]),experiencePrecedence:o(p.experiencePrecedence),codeOwnedFields:new Set(o(p.codeOwnedFields)),responseFollowUp:d(p.responseFollowUp),guide:{sections:(Array.isArray(m.sections)?m.sections:[]).map(l).filter(e=>e!==null),fixes:(Array.isArray(m.fixes)?m.fixes:[]).map(u).filter(e=>e!==null)},launcher:{position:c(h.position)?h.position:`bottom-right`,autoHide:typeof h.autoHide!=`boolean`||h.autoHide},personas:r(p.personas),personaWalk:{selfAdvancingSteps:new Set(o(g.selfAdvancingSteps)),responses:n(g.responses),handoffs:s(g.handoffs)}}}export{e as DEVTOOLS_EXPERIENCE_KEY,i as LAUNCHER_POSITIONS,f as readDevtoolsOptions};
+import{DEVTOOLS_EXPERIENCE_KEY as e,DEVTOOLS_PLUGIN_NAME as t}from"./constants.js";import{readAnswers as n,sitePersonas as r}from"./derive/personas/personas.js";var i=[`top-left`,`top-right`,`bottom-left`,`bottom-right`];function a(e){return typeof e==`object`&&!!e&&!Array.isArray(e)}function o(e){return Array.isArray(e)?e.filter(e=>typeof e==`string`):[]}function s(e){if(!a(e))return{};let t={};for(let[n,r]of Object.entries(e))typeof r==`string`&&(t[n]=r);return t}function c(e){return i.some(t=>t===e)}function l(e){if(!a(e))return null;let{id:t,title:n,steps:r,notes:i}=e;return typeof t!=`string`||typeof n!=`string`||!Array.isArray(r)?null:{id:t,title:n,steps:o(r),notes:o(i)}}function u(e){if(!a(e))return null;let{problem:t,fix:n}=e;return typeof t!=`string`||typeof n!=`string`?null:{problem:t,fix:n}}function d(e){if(!a(e))return null;let{label:t,run:n}=e;return typeof t!=`string`||typeof n!=`function`?null:{label:t,run:e=>{Reflect.apply(n,void 0,[e])}}}function f(e){if(typeof e!=`function`){let t=r(e);return()=>Promise.resolve(t)}let t=null;return()=>(t??=Promise.resolve().then(()=>Reflect.apply(e,void 0,[])).then(e=>r(e)).catch(()=>[]),t)}function p(r){let i=r.getPluginConfig(t).options,p=a(i)?i:{},m=a(p.guide)?p.guide:{},h=a(p.launcher)?p.launcher:{},g=a(p.personaWalk)?p.personaWalk:{},_=p.environmentLabel;return{readOnly:p.readOnly===!0,environmentLabel:typeof _==`string`&&_.length>0?_:void 0,hiddenExperienceKeys:new Set([e,...o(p.hiddenExperienceKeys)]),experiencePrecedence:o(p.experiencePrecedence),codeOwnedFields:new Set(o(p.codeOwnedFields)),responseFollowUp:d(p.responseFollowUp),guide:{sections:(Array.isArray(m.sections)?m.sections:[]).map(l).filter(e=>e!==null),fixes:(Array.isArray(m.fixes)?m.fixes:[]).map(u).filter(e=>e!==null)},launcher:{position:c(h.position)?h.position:`bottom-right`,autoHide:typeof h.autoHide!=`boolean`||h.autoHide},personas:f(p.personas),personaWalk:{selfAdvancingSteps:new Set(o(g.selfAdvancingSteps)),responses:n(g.responses),handoffs:s(g.handoffs)}}}export{e as DEVTOOLS_EXPERIENCE_KEY,i as LAUNCHER_POSITIONS,p as readDevtoolsOptions};

package/dist/plugins/devtools/review/journey/ExperienceDetails.svelte

@@ -0,0 +1,129 @@
+<script lang="ts">
+  /**
+   * @file The Experiences tab's Details view: what one experience is, where on the page it shows,
+   * when it starts, and its instances on this page.
+   */
+  import type { ExperienceStore, Picked } from '@picked/client'
+  import { Card, CodeBlock, Text } from '../../ui'
+  import { describeRule, type FieldLookup } from '../../derive'
+  import ExperienceInstancesTable from '../../components/ExperienceInstancesTable.svelte'
+
+  interface ExperienceDetailsProps {
+    client: Picked
+    experience: ExperienceStore
+    /** Names a field the condition reads. */
+    fieldLookup: FieldLookup
+  }
+
+  const { client, experience, fieldLookup }: ExperienceDetailsProps = $props()
+
+  const config = $derived(experience.configStore)
+  const component = $derived(experience.componentStore)
+  const instancesStore = $derived(client.experienceInstances.listStore)
+  const instances = $derived(
+    $instancesStore.filter((instance) => instance.experienceKey === experience.key),
+  )
+
+  /** How a placement puts the experience on the page, by placement. */
+  const PLACEMENTS = {
+    replace: 'In place of',
+    append: 'At the end of',
+    prepend: 'At the start of',
+    before: 'Before',
+    after: 'After',
+  } as const
+
+  /** The condition's verbatim rule is shown while this is `true`. */
+  let showRule = $state(false)
+</script>
+
+<div class="details" data-testid="devtools-experience-details">
+  <Card sectioned>
+    <dl class="facts">
+      <dt>Name</dt>
+      <dd>{experience.name}</dd>
+      <dt>Key</dt>
+      <dd><code>{experience.key}</code></dd>
+      <dt>Component</dt>
+      <dd>{$component?.name ?? 'None'}</dd>
+      <dt>Shows on the page</dt>
+      <dd>
+        {#if $config.targetSelectors.length === 0}
+          Nowhere by itself. Code, or another experience, opens it.
+        {:else}
+          <ul class="targets">
+            {#each $config.targetSelectors as target (`${target.selector}/${target.placement}`)}
+              <li>{PLACEMENTS[target.placement]} <code>{target.selector}</code></li>
+            {/each}
+          </ul>
+        {/if}
+      </dd>
+      <dt>Starts when</dt>
+      <dd>
+        <span data-testid="devtools-experience-condition">
+          {describeRule($config.decisionLogic, fieldLookup)}
+        </span>
+        <button type="button" class="disclosure" onclick={() => (showRule = !showRule)}>
+          {showRule ? 'Hide rule' : 'Show rule'}
+        </button>
+        {#if showRule}
+          <CodeBlock code={JSON.stringify($config.decisionLogic ?? null, null, 2)} />
+        {/if}
+      </dd>
+    </dl>
+  </Card>
+
+  <section class="instances" aria-label="On this page">
+    <Text weight="semibold">On this page</Text>
+    <ExperienceInstancesTable experienceInstances={instances} />
+  </section>
+</div>
+
+<style>
+  .details {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+  }
+
+  .facts {
+    display: grid;
+    grid-template-columns: max-content 1fr;
+    gap: var(--space-2) var(--space-4);
+    margin: 0;
+    padding: var(--space-4);
+    font-size: var(--text-sm);
+  }
+
+  .facts dt {
+    color: var(--color-gray-500);
+  }
+
+  .facts dd {
+    margin: 0;
+    min-width: 0;
+    color: var(--color-gray-900);
+  }
+
+  .targets {
+    margin: 0;
+    padding-left: var(--space-4);
+  }
+
+  .disclosure {
+    margin-left: var(--space-2);
+    padding: 0;
+    border: 0;
+    background: none;
+    color: var(--color-blue-600);
+    font: inherit;
+    font-size: var(--text-xs);
+    cursor: pointer;
+  }
+
+  .instances {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+  }
+</style>

package/dist/plugins/devtools/review/journey/JourneyPanel.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   /**
-   * @file The Flow tab: any experience's flow in plain English — the Developer group's
-   * experience tree without the node ids or the raw JSON Logic. It opens on the experience in
-   * front of the reviewer, and the picker reaches every other experience in the workspace.
+   * @file The Experiences tab: any experience's flow in plain English, without node ids or raw
+   * JSON Logic, and its details. It opens on the experience in front of the reviewer, the picker
+   * reaches every other experience in the workspace, and Launch experience opens the one picked.
    *
    * Navigation is BACKWARDS ONLY, and only in the experience that is OPEN. A step already visited
    * is a plain `goToStepByKey`: the flow has been through every action in between, so returning to
@@ -13,13 +13,15 @@
    * THREE VIEWS, ONE GRAPH. The outline answers "where am I, and why did it go there"; the map
    * answers "what shape is this, and where does each branch end"; the timeline answers "in what
    * order, and where do the branches meet again". All three read the same `treeStore` through the
-   * same vocabulary modules, so a step is named identically in each and they cannot drift.
+   * same vocabulary modules, so a step is named identically in each and they cannot drift. The
+   * fourth view, Details, says where the experience shows, when it starts, and its instances.
    */
   import type { Picked } from '@picked/client'
   import { Badge, Banner, Button, Card, EmptyState } from '../../ui'
   import { buildOutline, buildTimeline, buildTree } from '../../derive'
   import type { FieldLookup, OutlineRow, SafetyPosture, Trails } from '../../derive'
   import type { JourneyView } from '../../session'
+  import ExperienceDetails from './ExperienceDetails.svelte'
   import JourneyMap from './JourneyMap.svelte'
   import JourneyTimeline from './JourneyTimeline.svelte'
 
@@ -62,7 +64,7 @@
   // The union goes on `$state`, not on the `let`. With the annotation alone TypeScript narrows the
   // variable to its initial literal and the `view === 'map'` below reads as a comparison that can
   // never hold — `$derived` is an expression in this same scope, so nothing widens it back.
-  let view = $state<'outline' | 'map' | 'timeline'>('map')
+  let view = $state<'outline' | 'map' | 'timeline' | 'details'>('map')
 
   /** The open journey, unless it is one the tab never follows. */
   const followed = $derived(
@@ -98,11 +100,12 @@
   //
   // It reads the shared `listStore` rather than `experiences.getByKey`, which mints a NEW derived
   // store per call and never releases it.
-  const treeStore = $derived(
+  const selectedExperience = $derived(
     selectedKey === null
       ? undefined
-      : $experiences.find((experience) => experience.key === selectedKey)?.treeStore,
+      : $experiences.find((experience) => experience.key === selectedKey),
   )
+  const treeStore = $derived(selectedExperience?.treeStore)
   const graph: FlowGraph = $derived($treeStore ?? EMPTY_GRAPH)
 
   // Fields arrive asynchronously and AFTER the graph does. Read reactively, so the views re-render
@@ -204,6 +207,17 @@
     picked = key === followed?.experienceKey ? null : key
   }
 
+  /**
+   * Opens the experience picked in the picker, past its own condition.
+   *
+   * @example
+   * launch()
+   */
+  function launch(): void {
+    if (selectedKey === null) return
+    void client.experiences.open({ key: selectedKey, options: { bypassCondition: true } })
+  }
+
   /**
    * Shows a decision's verbatim rule, or hides it again.
    *
@@ -223,6 +237,19 @@
       hint="The workspace has not loaded its experiences. Reload the page if this does not change."
     />
   {:else}
+    <div class="launch">
+      <Button
+        variant="primary"
+        size="small"
+        disabled={!posture.canNavigate}
+        title={posture.canNavigate ? undefined : (posture.reason ?? undefined)}
+        testId="devtools-journey-launch"
+        onclick={launch}
+      >
+        Launch experience
+      </Button>
+    </div>
+
     <!-- One row: how to look on the left, what to look at on the right. -->
     <div class="controls">
       <div class="views" role="group" aria-label="Flow view">
@@ -256,6 +283,16 @@
         >
           Timeline
         </button>
+        <button
+          type="button"
+          class="view"
+          class:selected={view === 'details'}
+          aria-pressed={view === 'details'}
+          data-testid="devtools-journey-view-details"
+          onclick={() => (view = 'details')}
+        >
+          Details
+        </button>
       </div>
 
       <div class="picker">
@@ -284,7 +321,11 @@
       <Banner status="warning" testId="devtools-journey-readonly">{posture.reason}</Banner>
     {/if}
 
-    {#if rows.length === 0}
+    {#if view === 'details'}
+      {#if selectedExperience !== undefined}
+        <ExperienceDetails {client} experience={selectedExperience} {fieldLookup} />
+      {/if}
+    {:else if rows.length === 0}
       <Card sectioned>
         <EmptyState
           message="This experience has no steps yet"
@@ -380,6 +421,11 @@
     flex-direction: column;
   }
 
+  .launch {
+    display: flex;
+    justify-content: flex-end;
+  }
+
   .controls {
     display: flex;
     align-items: center;

package/dist/plugins/devtools/review/personas/ChoiceButton.svelte

@@ -1,38 +1,72 @@
 <script lang="ts">
-  /** @file One choice in the persona builder: a toggle that shows whether it is picked. */
+  /**
+   * @file One choice in the persona builder: a toggle that shows whether it is picked. A tile is a
+   * large card, as a step draws a short list of choices; a pill is a compact chip, as it draws a
+   * long one.
+   */
   interface ChoiceButtonProps {
     label: string
     selected: boolean
     testId: string
     onclick: () => void
+    /** How it is drawn. */
+    variant?: 'pill' | 'tile'
+    /** A line under the label, from the option's own description. */
+    detail?: string
   }
 
-  const { label, selected, testId, onclick }: ChoiceButtonProps = $props()
+  const { label, selected, testId, onclick, variant = 'pill', detail }: ChoiceButtonProps =
+    $props()
 </script>
 
 <button
   type="button"
-  class="choice"
+  class="choice {variant}"
   class:selected
   aria-pressed={selected}
   data-testid={testId}
   {onclick}
 >
-  {label}
+  <span class="label">{label}</span>
+  {#if detail}
+    <span class="detail">{detail}</span>
+  {/if}
 </button>
 
 <style>
   .choice {
-    padding: var(--space-1) var(--space-3);
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-0-5);
     border: 1px solid var(--color-gray-300);
-    border-radius: var(--radius-md);
     background: var(--color-white);
     color: var(--color-gray-900);
     font: inherit;
     font-size: var(--text-sm);
+    text-align: center;
     cursor: pointer;
   }
 
+  .pill {
+    padding: var(--space-1) var(--space-3);
+    border-radius: 999px;
+  }
+
+  .tile {
+    min-height: 4.5rem;
+    padding: var(--space-3);
+    border-radius: var(--radius-md);
+    font-weight: var(--font-medium);
+  }
+
+  .detail {
+    color: var(--color-gray-500);
+    font-size: var(--text-xs);
+    font-weight: normal;
+  }
+
   .choice:hover {
     border-color: var(--color-gray-500);
   }