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

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

@@ -19,9 +19,7 @@
     type BuilderWalk,
   } from '../../derive'
   import ChoiceButton from './ChoiceButton.svelte'
-
-  /** The rule type the client evaluates. */
-  type Rule = Parameters<typeof evaluateRuleLogic>[1]
+  import { entryLocation, ruleEvaluator, type Rule } from './persona-route'
 
   interface PersonaBuilderProps {
     client: Picked
@@ -73,37 +71,8 @@
     [...graph.journeys.values()].map((journey) => ({ value: journey.key, label: journey.name })),
   )
 
-  /** The entry page's address, as a rule on `location` reads it. */
-  const location = $derived.by(() => {
-    const url = new URL(entryUrl, window.location.origin)
-    return {
-      hash: url.hash,
-      host: url.host,
-      hostname: url.hostname,
-      href: url.href,
-      origin: url.origin,
-      pathname: url.pathname,
-      port: url.port,
-      protocol: url.protocol,
-      search: url.search,
-    }
-  })
-
-  /**
-   * Evaluates a rule against draft answers, on the entry page.
-   *
-   * @param {Rule} rule - The rule.
-   * @param {Readonly<Record<string, FieldValue>>} responses - The answers it reads.
-   * @returns {Promise<boolean>} Whether it holds.
-   * @example await evaluate(condition.logic, { purpose: 'home' })
-   */
-  async function evaluate(
-    rule: Rule,
-    responses: Readonly<Record<string, FieldValue>>,
-  ): Promise<boolean> {
-    const result = await evaluateRuleLogic(client, rule, { responses: { ...responses }, location })
-    return Boolean(result)
-  }
+  /** Evaluates a rule against draft answers, on the entry page. */
+  const evaluate = $derived(ruleEvaluator(client, entryLocation(entryUrl, window.location.origin)))
 
   let walk = $state.raw<BuilderWalk | null>(null)
 
@@ -215,7 +184,7 @@
       if (typeof result === 'string' || result === false) {
         errors = {
           ...errors,
-          [field.key]: typeof result === 'string' ? result : 'This answer is not accepted.',
+          [field.key]: typeof result === 'string' ? result : 'This response is not accepted.',
         }
         return
       }
@@ -245,13 +214,13 @@
   function endText(row: Extract<BuilderRow, { kind: 'end' }>): string {
     switch (row.reason) {
       case 'loop':
-        return `The journey goes back to “${row.name ?? 'an earlier screen'}” here.`
+        return `The flow goes back to “${row.name ?? 'an earlier step'}” here.`
       case 'handoff':
-        return `${row.name ?? 'Another journey'} takes over here, outside this build.`
+        return `${row.name ?? 'Another experience'} takes over here, outside this build.`
       case 'limit':
-        return 'The journey is too long to walk here, so it stops.'
+        return 'The flow is too long to walk here, so it stops.'
       case 'end':
-        return 'The journey ends here.'
+        return 'The experience ends here.'
     }
   }
 
@@ -274,18 +243,18 @@
 
 <div class="builder" data-testid="devtools-persona-builder">
   {#if journeyOptions.length === 0}
-    <Text size="small" color="subdued">This page has no journeys to build a persona in.</Text>
+    <Text size="small" color="subdued">This page has no experiences to build a persona in.</Text>
   {:else}
     <Select
       label="Starts in"
       name="devtools-builder-start"
       options={journeyOptions}
       value={start}
-      placeholder="Pick a journey"
+      placeholder="Pick an experience"
       onchange={onStartChange}
     />
     <Text size="small" color="subdued">
-      Answer each screen; the next one appears below. Where the site's own code decides the route,
+      Complete each step; the next one appears below. Where the site's own code decides the route,
       pick the outcome to follow. The real outcome decides when the persona loads.
     </Text>
 
@@ -351,21 +320,21 @@
                     </div>
                   {:else if kind === 'system'}
                     <Text size="small" color="subdued">
-                      This is answered on its own screen. The persona stops here, so load it and
-                      answer it there.
+                      This is set on its own step. The persona stops here, so load it and set it
+                      there.
                     </Text>
                   {/if}
                 </div>
               {/if}
             {:else}
               <Text size="small" color="subdued">
-                Nothing to answer here. The customer continues.
+                Nothing to fill in here. The visitor continues.
               </Text>
             {/each}
           </li>
         {:else if row.kind === 'choice'}
           <li class="decision" data-testid="devtools-builder-decision">
-            <Text size="small">The site decides: {row.question}</Text>
+            <Text size="small">The site's code decides: {row.question}</Text>
             <div class="choices">
               <ChoiceButton
                 label="Yes"

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

@@ -1,72 +1,207 @@
 <script lang="ts">
-  /** @file One persona in the Personas & Scenarios tab: who it is, where it lands, Load and Delete. */
-  import { Button, Card, Text } from '../../ui'
-  import { describeLanding, type Persona } from '../../derive'
+  /**
+   * @file One persona in the Personas & Scenarios tab: who it is and where it lands, with Walk
+   * through, Jump to step, Edit, and Delete or Reset. Jump to step lists the screens on the
+   * persona's route; picking one walks the persona there.
+   */
+  import { Badge, Button, Card, CopyButton, Text } from '../../ui'
+  import { describeLanding, deslug, type Persona } from '../../derive'
+  import type { RouteScreen } from './persona-route'
 
   interface PersonaCardProps {
     persona: Persona
-    /** Why Load is withheld; `undefined` while it is allowed. */
-    loadReason: string | undefined
-    /** True while this persona is loading. */
-    loading: boolean
-    onLoad: () => void
-    /** Opens it in the form; absent for a persona the site defines. */
-    onEdit?: () => void
-    /** Deletes it; absent for a persona the site defines. */
+    /** Why starting it is withheld; `undefined` while it is allowed. */
+    startReason: string | undefined
+    /** True while this persona is starting. */
+    starting: boolean
+    /** True while the tab walks through as this persona. */
+    active: boolean
+    onWalkThrough: () => void
+    /** Works out the screens on its route; `null` when it has no journey. */
+    route: () => Promise<RouteScreen[] | null>
+    /**
+     * Walks the persona to a screen on its route.
+     *
+     * @param screen - The screen.
+     */
+    onJump: (screen: RouteScreen) => void
+    /** Opens it in the form. */
+    onEdit: () => void
+    /** Deletes a persona saved in this browser; absent for the site's own. */
     onDelete?: () => void
+    /** Drops this browser's edit of a site persona; absent otherwise. */
+    onReset?: () => void
+    /** The link that starts a walk-through as it in another browser; absent for a saved persona. */
+    link?: string
   }
 
-  const { persona, loadReason, loading, onLoad, onEdit, onDelete }: PersonaCardProps = $props()
+  const {
+    persona,
+    startReason,
+    starting,
+    active,
+    onWalkThrough,
+    route,
+    onJump,
+    onEdit,
+    onDelete,
+    onReset,
+    link,
+  }: PersonaCardProps = $props()
 
   let confirming = $state(false)
+  let jumpOpen = $state(false)
+  /** The route's screens; `undefined` while they are worked out. */
+  let screens = $state.raw<RouteScreen[] | null | undefined>(undefined)
 
   const answers = $derived(Object.keys(persona.responses).length)
-  const answerLabel = $derived(answers === 1 ? '1 answer' : `${answers} answers`)
+  const answerLabel = $derived(answers === 1 ? '1 response' : `${answers} responses`)
   const summary = $derived(
-    persona.load === null
-      ? `${answerLabel} · ${describeLanding(persona.landing)}`
-      : 'Set up by this site',
+    [answerLabel, describeLanding(persona.landing), persona.edited ? 'Edited in this browser' : '']
+      .filter((part) => part.length > 0)
+      .join(' · '),
   )
+  const removeLabel = $derived(onReset ? 'Reset' : 'Delete')
+  const removeQuestion = $derived(
+    onReset ? `Undo your edits to ${persona.name}?` : `Delete ${persona.name}?`,
+  )
+
+  /**
+   * Opens or closes the list of screens to jump to, working the route out on first open.
+   *
+   * @returns {Promise<void>} Settles once the route is worked out.
+   * @example await toggleJump()
+   */
+  async function toggleJump(): Promise<void> {
+    jumpOpen = !jumpOpen
+    if (!jumpOpen) return
+    screens = undefined
+    try {
+      screens = await route()
+    } catch {
+      screens = null
+    }
+  }
+
+  /**
+   * A screen's name in the list.
+   *
+   * @param {RouteScreen} screen - The screen.
+   * @returns {string} Its name.
+   * @example screenLabel(screen) // 'Postcode'
+   */
+  function screenLabel(screen: RouteScreen): string {
+    return screen.stepName ?? deslug(screen.stepKey)
+  }
 </script>
 
 <Card>
   <div class="persona" data-testid="devtools-persona" data-persona-id={persona.id}>
-    <div class="details">
-      <Text weight="semibold">{persona.name}</Text>
-      {#if persona.description}
-        <Text size="small">{persona.description}</Text>
-      {/if}
-      <Text size="caption" color="subdued">{summary}</Text>
-    </div>
-    <div class="actions">
-      {#if confirming && onDelete}
-        <Text size="small">Delete {persona.name}?</Text>
-        <Button variant="destructive" size="small" onclick={onDelete}>Yes, delete</Button>
-        <Button variant="ghost" size="small" onclick={() => (confirming = false)}>Keep</Button>
-      {:else}
-        <Button
-          variant="primary"
-          size="small"
-          disabled={loadReason !== undefined}
-          title={loadReason}
-          {loading}
-          onclick={onLoad}
-        >
-          Load
-        </Button>
-        {#if onEdit}
-          <Button variant="ghost" size="small" onclick={onEdit}>Edit</Button>
+    <div class="head">
+      <div class="details">
+        <Text weight="semibold">{persona.name}</Text>
+        {#if persona.description}
+          <Text size="small">{persona.description}</Text>
         {/if}
-        {#if onDelete}
-          <Button variant="ghost" size="small" onclick={() => (confirming = true)}>Delete</Button>
+        <Text size="caption" color="subdued">{summary}</Text>
+        {#if active}
+          <span><Badge status="info" size="small">Walking through now</Badge></span>
         {/if}
-      {/if}
+      </div>
+      <div class="actions">
+        {#if confirming && (onDelete || onReset)}
+          <Text size="small">{removeQuestion}</Text>
+          <Button
+            variant="destructive"
+            size="small"
+            onclick={() => {
+              confirming = false
+              ;(onReset ?? onDelete)?.()
+            }}
+          >
+            Yes, {removeLabel.toLowerCase()}
+          </Button>
+          <Button variant="ghost" size="small" onclick={() => (confirming = false)}>Keep</Button>
+        {:else}
+          <Button
+            variant="primary"
+            size="small"
+            disabled={startReason !== undefined}
+            title={startReason}
+            loading={starting}
+            onclick={onWalkThrough}
+          >
+            Walk through
+          </Button>
+          <Button
+            variant="secondary"
+            size="small"
+            disabled={startReason !== undefined}
+            title={startReason}
+            onclick={() => void toggleJump()}
+          >
+            Jump to step
+          </Button>
+          <Button variant="ghost" size="small" onclick={onEdit}>Edit</Button>
+          {#if link}
+            <CopyButton
+              text={link}
+              label="Copy a link that walks through as {persona.name}"
+              testId="devtools-persona-link"
+            />
+          {/if}
+          {#if onDelete || onReset}
+            <Button variant="ghost" size="small" onclick={() => (confirming = true)}>
+              {removeLabel}
+            </Button>
+          {/if}
+        {/if}
+      </div>
     </div>
+
+    {#if jumpOpen}
+      <div class="jump" data-testid="devtools-persona-jump">
+        {#if screens === undefined}
+          <Text size="small" color="subdued">Working out the route…</Text>
+        {:else if screens === null || screens.length === 0}
+          <Text size="small" color="subdued">No steps to jump to from this page.</Text>
+        {:else}
+          <Text size="small" color="subdued">
+            Pick a step. The page reloads and walks there as {persona.name}.
+          </Text>
+          <ol class="steps">
+            {#each screens as screen (`${screen.experienceKey}/${screen.stepKey}`)}
+              <li>
+                <button
+                  type="button"
+                  class="step"
+                  data-testid="devtools-persona-jump-step"
+                  disabled={startReason !== undefined}
+                  onclick={() => onJump(screen)}
+                >
+                  <span class="step-name">{screenLabel(screen)}</span>
+                  <span class="step-journey">{screen.experienceName}</span>
+                  {#if screen.isStop}
+                    <Badge size="small">Where it stops</Badge>
+                  {/if}
+                </button>
+              </li>
+            {/each}
+          </ol>
+        {/if}
+      </div>
+    {/if}
   </div>
 </Card>
 
 <style>
   .persona {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+  }
+
+  .head {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
@@ -88,4 +223,52 @@
     align-items: center;
     gap: var(--space-2);
   }
+
+  .jump {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    padding-top: var(--space-3);
+    border-top: 1px solid var(--color-gray-200);
+  }
+
+  .steps {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    margin: 0;
+    padding-left: var(--space-5);
+  }
+
+  .step {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-2);
+    width: 100%;
+    padding: var(--space-1-5) var(--space-2);
+    border: 0;
+    border-radius: var(--radius-sm);
+    background: transparent;
+    color: var(--color-gray-900);
+    font: inherit;
+    font-size: var(--text-sm);
+    text-align: left;
+    cursor: pointer;
+  }
+
+  .step:hover:not(:disabled),
+  .step:focus-visible {
+    background: var(--color-gray-100);
+  }
+
+  .step:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  .step-journey {
+    color: var(--color-gray-500);
+    font-size: var(--text-xs);
+  }
 </style>