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

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

@@ -1,22 +1,29 @@
 <script lang="ts">
   /**
    * @file The Personas & Scenarios tab: customers and situations to try the journey as. The site's
-   * own come from the plugin's `personas` option. A reviewer makes theirs in this browser, either by
-   * answering the journey's questions here, screen by screen, or from where they are on the page.
-   * A persona keeps the answers a customer gives on fields they can see, the screens moved on from,
-   * the screen it stops on and the page it starts on. Loading one reloads that page clean and walks
-   * the journey with its answers, screen by screen, up to that screen. Site tools placed here
-   * follow, each a section under its label.
+   * own come from the plugin's `personas` option, under their headings. A reviewer makes theirs in
+   * this browser, either by answering the journey's questions here, screen by screen, or from where
+   * they are on the page, and can edit any persona; an edit of the site's own stays in this
+   * browser. A persona keeps the answers a customer gives on fields they can see, the screens moved
+   * on from, the screen it stops on and the page it starts on.
+   *
+   * Walk through reloads that page clean and pre-fills every step with the persona's responses, so
+   * the reviewer moves through it themselves. Jump to step walks the persona to a step on its
+   * route first. Site tools placed here follow, each a section under its label.
    */
   import type { FieldValue, Picked } from '@picked/client'
   import { getStepFields } from '@picked/client/form'
+  import { SvelteMap } from 'svelte/reactivity'
   import { Banner, Button, Card, EmptyState, RadioGroup, Stack, Text, TextField } from '../../ui'
   import {
+    applyEdits,
     buildPersona,
     customerAnswers,
     deslug,
     entryUrlOf,
+    groupPersonas,
     isBlank,
+    matchesSearch,
     passedScreens,
     readSavedPersonas,
     writeSavedPersonas,
@@ -32,6 +39,8 @@
   import type { CustomTool } from '../../customTools'
   import type { JourneyView } from '../../session'
   import { loadUrl, startPersonaLoad } from './load-persona'
+  import { personaLink } from './persona-session'
+  import { personaRoute, routeScreens, type RouteScreen } from './persona-route'
   import PersonaBuilder from './PersonaBuilder.svelte'
   import PersonaCard from './PersonaCard.svelte'
 
@@ -50,14 +59,22 @@
     hiddenKeys: ReadonlySet<string>
     /** Keys a screen carries only for its code. */
     codeOwned: ReadonlySet<string>
-    /** Screens that move on by themselves, and actions that open another journey. */
+    /**
+     * Screens that move on by themselves, responses every walk gives, and actions that open
+     * another journey.
+     */
     personaWalk: {
       selfAdvancingSteps: ReadonlySet<string>
+      responses: Readonly<Record<string, FieldValue>>
       handoffs: Readonly<Record<string, string>>
     }
     /** The site's tools placed in this tab. */
     tools?: readonly CustomTool[]
-    /** How the last load's walk ended; `null` when no load ran on this page. */
+    /** The persona this tab walks through as; `null` outside a persona session. */
+    activePersona: Persona | null
+    /** Ends the persona session. */
+    onStop: () => void
+    /** How the last jump's walk ended; `null` when no jump ran on this page. */
     walkNotice: Notice | null
     onWalkNoticeDismiss: () => void
     /** The storage saved personas live in. */
@@ -89,6 +106,8 @@
     codeOwned,
     personaWalk,
     tools = [],
+    activePersona,
+    onStop,
     walkNotice,
     onWalkNoticeDismiss,
     getStorage = () => window.localStorage,
@@ -129,26 +148,65 @@
   let buildChoices = $state.raw<Record<string, boolean>>({})
   let buildWalk = $state.raw<BuilderWalk | null>(null)
   let notice = $state<Notice | null>(null)
-  let loadingId = $state<string | null>(null)
+  let startingId = $state<string | null>(null)
+  let search = $state('')
   /** The answers Save would keep; `null` while they are read. */
   let captured = $state<Record<string, FieldValue> | null>(null)
 
+  const listed = $derived(applyEdits(personas, saved))
+  const siteGroups = $derived(
+    groupPersonas(
+      listed.site.filter((persona) => matchesSearch(persona, search)),
+      'For this site',
+    ),
+  )
+  const own = $derived(listed.own.filter((persona) => matchesSearch(persona, search)))
+  /** Every heading in the list: the site's groups, then this browser's own. */
+  const sections = $derived(
+    own.length > 0 ? [...siteGroups, { title: 'Saved in this browser', personas: own }] : siteGroups,
+  )
   const isEmpty = $derived(personas.length === 0 && saved.length === 0 && tools.length === 0)
+  /** Enough personas that a reviewer needs to search them. */
+  const searchable = $derived(personas.length + listed.own.length > 6)
   const postureReason = $derived(posture.canEditAnswers ? undefined : (posture.reason ?? undefined))
+  const routeSettings = $derived({
+    asked,
+    codeOwned,
+    selfAdvancing: personaWalk.selfAdvancingSteps,
+    handoffs: personaWalk.handoffs,
+    hiddenKeys,
+    responses: personaWalk.responses,
+  })
+  /** Each persona's route as last worked out, so a jump moves on from its screens. */
+  const routes = new SvelteMap<string, BuilderWalk>()
 
   /**
-   * Why a persona's Load is withheld: the session's posture, or another persona loading.
+   * Why starting a persona is withheld: the session's posture, or another persona starting.
    *
    * @param {Persona} persona - The persona on the card.
-   * @returns {string | undefined} The reason, or `undefined` while Load is allowed.
-   * @example loadReason(persona)
+   * @returns {string | undefined} The reason, or `undefined` while it can start.
+   * @example startReason(persona)
    */
-  function loadReason(persona: Persona): string | undefined {
+  function startReason(persona: Persona): string | undefined {
     if (postureReason !== undefined) return postureReason
-    return loadingId !== null && loadingId !== persona.id
-      ? 'Another persona is loading.'
+    return startingId !== null && startingId !== persona.id
+      ? 'Another persona is starting.'
       : undefined
   }
+
+  /**
+   * The screens a persona's responses take it through.
+   *
+   * @param {Persona} persona - The persona.
+   * @returns {Promise<RouteScreen[] | null>} The screens, or `null` when it has no journey.
+   * @example await routeOf(persona)
+   */
+  async function routeOf(persona: Persona): Promise<RouteScreen[] | null> {
+    const walk = await personaRoute(client, persona, routeSettings, window.location)
+    if (walk === null) return null
+    routes.set(persona.id, walk)
+    return routeScreens(walk, persona.landing)
+  }
   const landing = $derived<PersonaLanding | null>(
     journey === null
       ? null
@@ -166,7 +224,7 @@
     const stop = buildWalk.landing
     if (stop === null) return `Saves ${answers}.`
     const screen = stop.stepName ?? deslug(stop.stepKey ?? '')
-    return `Saves ${answers}. Loading it walks the experience to ${screen}.`
+    return `Saves ${answers}. It stops at ${screen}.`
   })
 
   const captureSummary = $derived.by(() => {
@@ -174,11 +232,11 @@
     const count = Object.keys(captured).length
     const answers = count === 1 ? '1 response' : `${count} responses`
     if (landing === null)
-      return `Saves ${answers}. No experience is open, so it loads the responses only.`
+      return `Saves ${answers}. No experience is open, so it keeps the responses only.`
     const journeyName = landing.experienceName ?? deslug(landing.experienceKey)
-    if (landing.stepKey === null) return `Saves ${answers}. Loading it walks ${journeyName}.`
+    if (landing.stepKey === null) return `Saves ${answers}. It starts in ${journeyName}.`
     const screen = landing.stepName ?? deslug(landing.stepKey)
-    return `Saves ${answers}. Loading it walks ${journeyName} to ${screen}.`
+    return `Saves ${answers}. It stops at ${screen} in ${journeyName}.`
   })
 
   /**
@@ -355,7 +413,7 @@
     }
 
     const edited = editingId !== null
-    saved = edited
+    saved = saved.some((entry) => entry.id === result.persona.id)
       ? saved.map((entry) => (entry.id === result.persona.id ? result.persona : entry))
       : [...saved, result.persona]
     creating = false
@@ -370,56 +428,69 @@
   }
 
   /**
-   * Deletes a saved persona.
+   * Deletes a saved persona, or drops this browser's edit of a site persona.
    *
-   * @param {Persona} persona - The persona to delete.
+   * @param {Persona} persona - The persona.
    * @example remove(persona)
    */
   function remove(persona: Persona): void {
     saved = saved.filter((entry) => entry.id !== persona.id)
     writeSavedPersonas(getStorage, client.projectId, saved)
-    notice = { status: 'success', text: `Deleted ${persona.name}.` }
+    notice = {
+      status: 'success',
+      text: persona.edited ? `Put ${persona.name} back as the site has it.` : `Deleted ${persona.name}.`,
+    }
   }
 
   /**
-   * Loads a persona: the site's own loader when it has one, else a clean reload that walks its
-   * journey on the persona's page, keeping this page's query.
+   * Starts a persona session: a clean reload of the persona's page that pre-fills every step, after
+   * walking to `stop` when one is picked.
    *
-   * @param {Persona} persona - The persona to load.
-   * @returns {Promise<void>} Settles once it has loaded, failed, or the reload is under way.
-   * @example await load(persona)
+   * @param {Persona} persona - The persona.
+   * @param {RouteScreen | null} stop - The step to walk to; `null` for a walk-through from the start.
+   * @example start(persona, null)
    */
-  async function load(persona: Persona): Promise<void> {
-    loadingId = persona.id
+  function start(persona: Persona, stop: RouteScreen | null): void {
+    startingId = persona.id
     notice = null
     onWalkNoticeDismiss()
-    try {
-      if (persona.load === null) {
-        const started = startPersonaLoad(client, persona, {
-          storage: getSessionStorage(),
-          url: loadUrl(persona.entryUrl, window.location),
-          navigate,
-        })
-        if (!started) {
-          notice = { status: 'error', text: 'This browser would not let the load start.' }
-          loadingId = null
-        }
-
-        return
-      }
-
-      await persona.load(client)
-      notice = { status: 'success', text: `Loaded ${persona.name}.` }
-      loadingId = null
-    } catch (error) {
-      const detail = error instanceof Error ? ` ${error.message}` : ''
-      notice = { status: 'error', text: `${persona.name} did not load.${detail}` }
-      loadingId = null
+    const started = startPersonaLoad(
+      client,
+      {
+        id: persona.id,
+        stop:
+          stop === null
+            ? null
+            : {
+                experienceKey: stop.experienceKey,
+                experienceName: stop.experienceName,
+                stepKey: stop.stepKey,
+                stepName: stop.stepName,
+              },
+        passed: stop === null ? [] : (routes.get(persona.id)?.passed ?? []),
+      },
+      { storage: getSessionStorage(), url: loadUrl(persona.entryUrl, window.location), navigate },
+    )
+    if (!started) {
+      notice = { status: 'error', text: 'This browser would not let the persona start.' }
+      startingId = null
     }
   }
 </script>
 
 <div class="personas" data-testid="devtools-personas">
+  {#if activePersona}
+    <Banner status="info" testId="devtools-persona-session">
+      <div class="session">
+        <span>
+          Walking through as <strong>{activePersona.name}</strong>. Each step shows their
+          responses. Click Continue, or change a response first.
+        </span>
+        <Button variant="secondary" size="small" onclick={onStop}>Stop</Button>
+      </div>
+    </Banner>
+  {/if}
+
   {#if walkNotice}
     <Banner
       status={walkNotice.status}
@@ -439,6 +510,11 @@
       <div class="form">
         <Stack direction="vertical" gap="medium">
           <Text weight="semibold">{editingId === null ? 'New persona' : 'Edit persona'}</Text>
+          {#if personas.some((persona) => persona.id === editingId)}
+            <Text size="small" color="subdued">
+              Your edits stay in this browser. Reset puts it back as the site has it.
+            </Text>
+          {/if}
           <RadioGroup
             label="Make it by"
             name="persona-mode"
@@ -518,38 +594,46 @@
     </div>
   {:else}
     <div class="toolbar">
+      {#if searchable}
+        <div class="search">
+          <TextField
+            label="Search"
+            name="persona-search"
+            placeholder="Search, such as moving or gas"
+            value={search}
+            oninput={(value) => (search = value)}
+          />
+        </div>
+      {/if}
       <Button variant="secondary" size="small" onclick={startCreate}>Create</Button>
     </div>
   {/if}
 
-  {#if personas.length > 0}
-    <section class="group" aria-label="For this site">
-      <h3 class="group-title">For this site</h3>
-      {#each personas as persona (persona.id)}
+  {#each sections as section (section.title)}
+    <section class="group" aria-label={section.title}>
+      <h3 class="group-title">{section.title}</h3>
+      {#each section.personas as persona (persona.id)}
         <PersonaCard
           {persona}
-          loadReason={loadReason(persona)}
-          loading={loadingId === persona.id}
-          onLoad={() => void load(persona)}
-        />
-      {/each}
-    </section>
-  {/if}
-
-  {#if saved.length > 0}
-    <section class="group" aria-label="Saved in this browser">
-      <h3 class="group-title">Saved in this browser</h3>
-      {#each saved as persona (persona.id)}
-        <PersonaCard
-          {persona}
-          loadReason={loadReason(persona)}
-          loading={loadingId === persona.id}
-          onLoad={() => void load(persona)}
+          startReason={startReason(persona)}
+          starting={startingId === persona.id}
+          active={activePersona?.id === persona.id}
+          onWalkThrough={() => start(persona, null)}
+          route={() => routeOf(persona)}
+          onJump={(screen) => start(persona, screen)}
           onEdit={() => startEdit(persona)}
-          onDelete={() => remove(persona)}
+          onDelete={persona.source === 'saved' ? () => remove(persona) : undefined}
+          onReset={persona.edited ? () => remove(persona) : undefined}
+          link={persona.source === 'site'
+            ? personaLink(window.location, persona.entryUrl, persona.id)
+            : undefined}
         />
       {/each}
     </section>
+  {/each}
+
+  {#if search.length > 0 && sections.length === 0}
+    <Text size="small" color="subdued">No persona or scenario matches “{search}”.</Text>
   {/if}
 
   {#each tools as tool (tool.id)}
@@ -588,9 +672,22 @@
   }
 
   .toolbar {
+    align-items: flex-end;
     justify-content: flex-end;
   }
 
+  .search {
+    flex: 1 1 auto;
+  }
+
+  .session {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-2);
+  }
+
   .group {
     display: flex;
     flex-direction: column;

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

@@ -1,20 +1,20 @@
 /**
- * @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.
+ * @file Starts a persona the way a customer arrives: the page reloads clean on the persona's entry
+ * page. A jump then walks the persona's journey from its first screen to the screen picked. Each
+ * screen gets its own answers as the walk reaches it, then Continue, so every condition and action
+ * between the screens runs for real.
  *
- * 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.
+ * A start 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 runs on the next page, once the devtools mount there and pick up the note:
+ * {@link walkPersona} for a jump, {@link openPersonaJourney} for a walk-through.
  *
- * 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.
+ * The walk stops at the screen picked, 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 is not on the persona's
+ * route, or a Continue that lands nowhere.
  */
 import type { FieldValue, Picked } from '@picked/client';
-import { type Persona } from '../../derive';
+import { type Persona, type PersonaLanding, type PersonaScreen } from '../../derive';
 /** The part of an experience instance a walk reads and moves. */
 export interface WalkInstance {
     id: string;
@@ -142,6 +142,15 @@ export interface WalkOutcome {
 }
 /** The `sessionStorage` key that carries a load across the reload. */
 export declare const PENDING_LOAD_KEY = "picked-devtools-persona-load";
+/** A persona start, carried across its reload. */
+export interface PendingLoad {
+    /** The persona's id. */
+    id: string;
+    /** The screen a jump walks to; `null` for a walk-through, which walks nowhere. */
+    stop: PersonaLanding | null;
+    /** The screens the walk moves on from on its way to `stop`, in order. */
+    passed: PersonaScreen[];
+}
 /** Where a load reloads, and how. */
 export interface PersonaReload {
     /** The tab's `sessionStorage`, which carries the load across the reload. */
@@ -166,16 +175,16 @@ export interface PersonaReload {
  */
 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.
+ * Clears what the session holds and reloads, so the next page can start the persona clean. 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 {PendingLoad} load - The persona, and the screen a jump walks to.
  * @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 })
+ * @example startPersonaLoad(client, { id: persona.id, stop: null, passed: [] }, reload)
  */
-export declare function startPersonaLoad(client: ResetClient, persona: Persona, reload: PersonaReload): boolean;
+export declare function startPersonaLoad(client: ResetClient, load: PendingLoad, 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
@@ -193,13 +202,13 @@ export declare function loadUrl(entryUrl: string | null, here: {
     search: string;
 }): string;
 /**
- * Takes the persona a reload was for off `sessionStorage`, so it loads once.
+ * Takes the start a reload was for off `sessionStorage`, so it runs 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.
+ * @returns {PendingLoad | null} The start, or `null` when none is waiting.
  * @example takePendingLoad(sessionStorage)
  */
-export declare function takePendingLoad(storage: Pick<Storage, 'getItem' | 'removeItem'>): string | null;
+export declare function takePendingLoad(storage: Pick<Storage, 'getItem' | 'removeItem'>): PendingLoad | 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.
@@ -212,6 +221,18 @@ export declare function takePendingLoad(storage: Pick<Storage, 'getItem' | 'remo
  * @example await walkPersona(client, persona, settings)
  */
 export declare function walkPersona(client: WalkClient, persona: Persona, settings: WalkSettings, timing?: WalkTiming): Promise<WalkOutcome>;
+/**
+ * Gets a walk-through going once the page has started: the page's own experience when one is
+ * open, else the persona's first one.
+ *
+ * @param {WalkClient} client - The client, on a page that has just loaded.
+ * @param {Persona} persona - The persona.
+ * @param {WalkSettings} settings - Which experiences the devtools never follow.
+ * @param {WalkTiming} [timing] - How long to wait; tests pass a short one.
+ * @returns {Promise<boolean>} `false` when no experience is open at the end.
+ * @example await openPersonaJourney(client, persona, settings)
+ */
+export declare function openPersonaJourney(client: WalkClient, persona: Persona, settings: Pick<WalkSettings, 'exclude'>, timing?: WalkTiming): Promise<boolean>;
 /**
  * What the reviewer reads once a walk ends.
  *

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

@@ -1 +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.responses},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 responses.`};case`needs-answer`:return{status:`warning`,text:`Loaded ${r} as far as ${i}. ${r} has no response for a field there.`};case`invalid`:return{status:`warning`,text:`Loaded ${r} as far as ${i}. A response there no longer passes its check.`};case`stuck`:return{status:`warning`,text:`Loaded ${r} as far as ${i}. The experience 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 experience`:e(n))} didn't open on this page.`}}case`hop-limit`:return{status:`warning`,text:`Stopped loading ${r} after too many steps. The flow 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};
+import{deslug as e,screenName as t}from"../../derive/plain-language/plain-language.js";import{readLanding as n,readPassed as r,startOf as i}from"../../derive/personas/personas.js";import{pickJourney as a}from"../../derive/journey-pick/journey-pick.js";import"../../derive/index.js";import{getStepFields as o}from"@picked/client/form";var s=`picked-devtools-persona-load`,c=30,l={sleep:e=>new Promise(t=>{setTimeout(t,e)}),bootTries:500,openTries:20,startTries:100,advanceTries:500,returnTries:33,selfAdvanceTries:1e3,maxHops:60};function u(e){return`${e.experienceKey}/${e.stepKey}`}async function d(e,t,n){for(let r=0;r<=t;r++){let i=e();if(i!==null)return i;r<t&&await n.sleep(c)}return null}function f(e,n,r){let i=e.experienceInstances.listStore.getState().filter(e=>n.has(e.experienceKey)),o=a(i,{exclude:r.exclude,precedence:r.precedence,openOrder:r.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 p(e,t,n){await e.openExperienceByKey(t),await d(()=>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 m(e,t){let n={};for(let r of t)Object.hasOwn(e,r)&&(n[r]=e[r]);return n}async function h(e,t,n){let r=e.fields.listStore.getState(),i=t.flatMap(e=>r.filter(t=>t.key===e));return(await o(e,i)).map(e=>e.key).filter(e=>!n.has(e))}function g(e,t,n){try{n.storage.setItem(s,JSON.stringify(t))}catch{return!1}return e.responses.clearAll(),e.history.restore({entries:[]}),n.navigate(n.url),!0}function _(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 v(e){let t;try{t=JSON.parse(e)}catch{return null}if(typeof t!=`object`||!t||Array.isArray(t))return null;let i=Reflect.get(t,`id`);return typeof i!=`string`||i.length===0?null:{id:i,stop:n(Reflect.get(t,`stop`)),passed:r(Reflect.get(t,`passed`))}}function y(e){try{let t=e.getItem(s);return e.removeItem(s),t===null?null:v(t)}catch{return null}}function b(e,t){return e===null||e.experienceKey!==t.experienceKey?!1:e.stepKey===null||e.stepKey===t.stepKey}async function x(e,t,n){let r=!1,i=0;return await d(()=>{let n=e.resting();return n===null?(r=!0,i=0,null):u(n.screen)!==t||(r&&(i+=1),i>e.timing.returnTries?!1:null)},n,e.timing)===!0}async function S(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(m(e.answers,r));if(n.length>0)return{end:`invalid`,at:t.stop}}if(b(e.landing,t.screen))return{end:`arrived`,at:t.stop};let i=u(t.screen);return e.settings.selfAdvancing.has(t.screen.stepKey)?await x(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 x(e,i,e.timing.advanceTries)?null:{end:`stuck`,at:t.stop}):{end:`needs-answer`,at:t.stop}}async function C(e,t,n,r=l){let{landing:a}=t,o=i(t);if(o===null)return Object.keys(t.responses).length>0&&e.responses.register({...t.responses}),{end:`answers-only`,at:null};let s=new Set([o,...t.passed.map(e=>e.experienceKey)]);a!==null&&s.add(a.experienceKey);let c={client:e,settings:n,timing:r,landing:a,passed:new Set(t.passed.map(u)),answers:{...t.responses,...n.responses},resting:()=>f(e,s,n)};await d(()=>e.readyStore.getState()?!0:null,r.bootTries,r),await d(c.resting,r.startTries,r)===null&&await p(e,o,r);for(let e=0;e<r.maxHops;e++){let e=await d(c.resting,r.startTries,r);if(e===null)return{end:`no-journey`,at:null};let t=await S(c,e);if(t!==null)return t}return{end:`hop-limit`,at:null}}async function w(e,t,n,r=l){let a=()=>e.experienceInstances.listStore.getState().some(e=>!n.exclude.has(e.experienceKey)&&e.isOpenStore.getState())?!0:null;if(await d(()=>e.readyStore.getState()?!0:null,r.bootTries,r),await d(a,r.startTries,r)!==null)return!0;let o=i(t);return o!==null&&(await p(e,o,r),await d(a,r.openTries,r)!==null)}function T(t,n){let{name:r}=t,a=n.at===null?``:`“${n.at.stepName}”`;switch(n.end){case`arrived`:return{status:`success`,text:`Jumped to ${a} as ${r}.`};case`answers-only`:return{status:`success`,text:`Loaded ${r}’s responses.`};case`needs-answer`:return{status:`warning`,text:`Walked as ${r} as far as ${a}. ${r} has no response for a field there.`};case`invalid`:return{status:`warning`,text:`Walked as ${r} as far as ${a}. A response there no longer passes its check.`};case`stuck`:return{status:`warning`,text:`Walked as ${r} as far as ${a}. The experience did not move on from there.`};case`no-journey`:{let n=i(t);return{status:`error`,text:`${r} did not load: ${t.landing?.experienceName??(n===null?`its experience`:e(n))} didn't open on this page.`}}case`hop-limit`:return{status:`warning`,text:`Stopped walking as ${r} after too many steps. The flow may be going round in a loop.`}}}export{s as PENDING_LOAD_KEY,_ as loadUrl,w as openPersonaJourney,h as screenQuestions,g as startPersonaLoad,y as takePendingLoad,T as walkNotice,C as walkPersona};

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

@@ -0,0 +1,87 @@
+/**
+ * @file A persona's route: the screens its responses take it through, worked out over the real
+ * flow graph and the workspace's own rules without touching the live session. Jump to step lists
+ * them, and the panel's builder draws them.
+ */
+import type { FieldValue, Picked } from '@picked/client';
+import { evaluateRuleLogic } from '@picked/client';
+import { type BuilderWalk, type Persona, type PersonaLanding } from '../../derive';
+/** The rule type the client evaluates. */
+export type Rule = Parameters<typeof evaluateRuleLogic>[1];
+/** The parts of a page's address a rule on `location` reads. */
+export interface EntryLocation {
+    hash: string;
+    host: string;
+    hostname: string;
+    href: string;
+    origin: string;
+    pathname: string;
+    port: string;
+    protocol: string;
+    search: string;
+}
+/**
+ * The entry page's address, as a rule on `location` reads it.
+ *
+ * @param {string} entryUrl - The entry page: a path on this site, with its query.
+ * @param {string} origin - This site's origin.
+ * @returns {EntryLocation} The address.
+ * @example entryLocation('/sale?utm=spring', 'https://shop.example').pathname // '/sale'
+ */
+export declare function entryLocation(entryUrl: string, origin: string): EntryLocation;
+/**
+ * Evaluates rules against draft responses, on an entry page.
+ *
+ * @param {Picked} client - The client.
+ * @param {EntryLocation} location - The entry page's address.
+ * @returns {(rule: Rule, responses: Readonly<Record<string, FieldValue>>) => Promise<boolean>} The evaluator.
+ * @example await ruleEvaluator(client, location)(condition.logic, { purpose: 'home' })
+ */
+export declare function ruleEvaluator(client: Picked, location: EntryLocation): (rule: Rule, responses: Readonly<Record<string, FieldValue>>) => Promise<boolean>;
+/** What a route reads beyond the persona. */
+export interface RouteSettings {
+    /** Every key a journey's screens ask. */
+    asked: ReadonlySet<string>;
+    codeOwned: ReadonlySet<string>;
+    selfAdvancing: ReadonlySet<string>;
+    /** Actions that open another journey, by action key. */
+    handoffs: Readonly<Record<string, string>>;
+    /** Experience keys never walked. */
+    hiddenKeys: ReadonlySet<string>;
+    /** Responses every walk gives when a step asks for them, over the persona's own. */
+    responses: Readonly<Record<string, FieldValue>>;
+}
+/**
+ * The route a persona's responses take through the experiences on this page.
+ *
+ * @param {Picked} client - The client.
+ * @param {Persona} persona - The persona.
+ * @param {RouteSettings} settings - What the walk reads beyond the persona.
+ * @param {{ origin: string; pathname: string; search: string }} here - This page's address, for a persona with no entry page.
+ * @param {string} here.origin - Its origin.
+ * @param {string} here.pathname - Its path.
+ * @param {string} here.search - Its query.
+ * @returns {Promise<BuilderWalk | null>} The walk, or `null` for a persona with no journey.
+ * @example await personaRoute(client, persona, settings, window.location)
+ */
+export declare function personaRoute(client: Picked, persona: Persona, settings: RouteSettings, here: {
+    origin: string;
+    pathname: string;
+    search: string;
+}): Promise<BuilderWalk | null>;
+/** A screen on a persona's route. */
+export interface RouteScreen extends PersonaLanding {
+    stepKey: string;
+    /** `true` on the screen the persona stops on. */
+    isStop: boolean;
+}
+/**
+ * The screens on a route, in order, marking the persona's own stop: the screen it names, else
+ * where its responses run out.
+ *
+ * @param {BuilderWalk} walk - The route.
+ * @param {PersonaLanding | null} landing - Where the persona stops.
+ * @returns {RouteScreen[]} The screens.
+ * @example routeScreens(walk, persona.landing)
+ */
+export declare function routeScreens(walk: BuilderWalk, landing: PersonaLanding | null): RouteScreen[];

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

@@ -0,0 +1 @@
+import{startOf as e}from"../../derive/personas/personas.js";import{builderGraph as t,responseKeysOf as n,walkDraft as r}from"../../derive/persona-builder/persona-builder.js";import"../../derive/index.js";import{evaluateRuleLogic as i}from"@picked/client";function a(e,t){let n=new URL(e,t);return{hash:n.hash,host:n.host,hostname:n.hostname,href:n.href,origin:n.origin,pathname:n.pathname,port:n.port,protocol:n.protocol,search:n.search}}function o(e,t){return async(n,r)=>!!await i(e,n,{responses:{...r},location:{...t}})}async function s(i,s,c,l){let u=e(s);if(u===null)return null;let d=new Map(i.fields.listStore.getState().map(e=>[e.key,e])),f=a(s.entryUrl??`${l.pathname}${l.search}`,l.origin);return r({...t(i.experiences.listStore.getState(),c.hiddenKeys),start:u,answers:{...s.responses,...c.responses},choices:s.choices,asked:c.asked,codeOwned:c.codeOwned,selfAdvancing:c.selfAdvancing,handoffs:c.handoffs,field:e=>d.get(e),evaluate:o(i,f),readsOf:n})}function c(e,t){let n=t?.stepKey==null?e.landing:t;return e.rows.flatMap(e=>e.kind===`screen`?[{experienceKey:e.experienceKey,experienceName:e.experienceName,stepKey:e.stepKey,stepName:e.stepName,isStop:n?.experienceKey===e.experienceKey&&n.stepKey===e.stepKey}]:[])}export{a as entryLocation,s as personaRoute,c as routeScreens,o as ruleEvaluator};