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

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

@@ -10,7 +10,7 @@
   import { Select, Text, TextField } from '../../ui'
   import {
     builderGraph,
-    kindOf,
+    inputStyleOf,
     questionOf,
     responseKeysOf,
     screenName,
@@ -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)
 
@@ -305,13 +274,18 @@
             {#each row.fields as key (key)}
               {@const field = fields.get(key)}
               {#if field !== undefined}
-                {@const kind = kindOf(field)}
-                <div class="question" data-testid="devtools-builder-question-{key}">
-                  {#if kind === 'text' || kind === 'number'}
+                {@const positions = row.options[key] ?? []}
+                {@const style = inputStyleOf(field, positions.length)}
+                <div
+                  class="question"
+                  data-testid="devtools-builder-question-{key}"
+                  data-input-style={style}
+                >
+                  {#if style === 'text' || style === 'number'}
                     <TextField
                       label={questionOf(field)}
                       name="devtools-builder-{key}"
-                      type={kind}
+                      type={style}
                       placeholder={field.placeholder}
                       value={typedText(answers[key])}
                       error={errors[key]}
@@ -320,13 +294,15 @@
                   {:else}
                     <Text size="small" weight="medium">{questionOf(field)}</Text>
                   {/if}
-                  {#if kind === 'options'}
-                    <div class="choices">
-                      {#each row.options[key] ?? [] as position (position)}
+                  {#if style === 'tiles' || style === 'pills'}
+                    <div class="choices {style}">
+                      {#each positions as position (position)}
                         {@const option = field.options?.at(position)}
                         {#if option !== undefined}
                           <ChoiceButton
                             label={option.label}
+                            detail={option.description}
+                            variant={style === 'tiles' ? 'tile' : 'pill'}
                             selected={isChosen(field, option.value)}
                             testId="devtools-builder-choice-{key}-{position}"
                             onclick={() => choose(field, option.value)}
@@ -334,22 +310,41 @@
                         {/if}
                       {/each}
                     </div>
-                  {:else if kind === 'boolean'}
-                    <div class="choices">
+                  {:else if style === 'checkboxes'}
+                    <div class="checkboxes">
+                      {#each positions as position (position)}
+                        {@const option = field.options?.at(position)}
+                        {#if option !== undefined}
+                          <label class="checkbox">
+                            <input
+                              type="checkbox"
+                              checked={isChosen(field, option.value)}
+                              data-testid="devtools-builder-choice-{key}-{position}"
+                              onchange={() => choose(field, option.value)}
+                            />
+                            <span>{option.label}</span>
+                          </label>
+                        {/if}
+                      {/each}
+                    </div>
+                  {:else if style === 'yes-no'}
+                    <div class="choices tiles">
                       <ChoiceButton
                         label="Yes"
+                        variant="tile"
                         selected={answers[key] === true}
                         testId="devtools-builder-choice-{key}-yes"
                         onclick={() => setAnswer(key, true)}
                       />
                       <ChoiceButton
                         label="No"
+                        variant="tile"
                         selected={answers[key] === false}
                         testId="devtools-builder-choice-{key}-no"
                         onclick={() => setAnswer(key, false)}
                       />
                     </div>
-                  {:else if kind === 'system'}
+                  {:else if style === 'system'}
                     <Text size="small" color="subdued">
                       This is set on its own step. The persona stops here, so load it and set it
                       there.
@@ -447,4 +442,33 @@
     flex-wrap: wrap;
     gap: var(--space-1);
   }
+
+  .choices.tiles {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
+    gap: var(--space-2);
+  }
+
+  .checkboxes {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+    gap: var(--space-1) var(--space-3);
+  }
+
+  .checkbox {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-1) 0;
+    font-size: var(--text-sm);
+    color: var(--color-gray-900);
+    cursor: pointer;
+  }
+
+  .checkbox input {
+    width: 1rem;
+    height: 1rem;
+    margin: 0;
+    accent-color: var(--color-blue-600);
+  }
 </style>

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 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>