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

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

@@ -0,0 +1,50 @@
+<script lang="ts">
+  /** @file One choice in the persona builder: a toggle that shows whether it is picked. */
+  interface ChoiceButtonProps {
+    label: string
+    selected: boolean
+    testId: string
+    onclick: () => void
+  }
+
+  const { label, selected, testId, onclick }: ChoiceButtonProps = $props()
+</script>
+
+<button
+  type="button"
+  class="choice"
+  class:selected
+  aria-pressed={selected}
+  data-testid={testId}
+  {onclick}
+>
+  {label}
+</button>
+
+<style>
+  .choice {
+    padding: var(--space-1) var(--space-3);
+    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);
+    cursor: pointer;
+  }
+
+  .choice:hover {
+    border-color: var(--color-gray-500);
+  }
+
+  .choice.selected {
+    border-color: var(--color-blue-600);
+    background: color-mix(in srgb, var(--color-blue-600) 8%, var(--color-white));
+    color: var(--color-blue-700);
+  }
+
+  .choice:focus-visible {
+    outline: 2px solid var(--color-blue-500);
+    outline-offset: 1px;
+  }
+</style>

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

@@ -0,0 +1,450 @@
+<script lang="ts">
+  /**
+   * @file Builds a persona in the panel: the journey's screens, one after another, each with the
+   * questions a customer is asked there. Answering a screen shows the next one below it, and
+   * changing an earlier answer re-routes the screens after it. The walk is `walkDraft`'s, over the
+   * real flow graph and the workspace's own rules; nothing reaches the live session.
+   */
+  import type { Field, FieldValue, Picked } from '@picked/client'
+  import { evaluateRuleLogic } from '@picked/client'
+  import { Select, Text, TextField } from '../../ui'
+  import {
+    builderGraph,
+    kindOf,
+    questionOf,
+    responseKeysOf,
+    screenName,
+    walkDraft,
+    type BuilderRow,
+    type BuilderWalk,
+  } from '../../derive'
+  import ChoiceButton from './ChoiceButton.svelte'
+
+  /** The rule type the client evaluates. */
+  type Rule = Parameters<typeof evaluateRuleLogic>[1]
+
+  interface PersonaBuilderProps {
+    client: Picked
+    /** The journey the walk starts in. */
+    start: string
+    /** The draft answers, by field key. */
+    answers: Readonly<Record<string, FieldValue>>
+    /** The reviewer's pick on each outcome the site's code decides, by row id. */
+    choices: Readonly<Record<string, boolean>>
+    /** The page a load starts on, so a rule on the page's address reads that page. */
+    entryUrl: string
+    /** 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 built in. */
+    hiddenKeys: ReadonlySet<string>
+    onStartChange: (key: string) => void
+    onAnswersChange: (answers: Record<string, FieldValue>) => void
+    onChoicesChange: (choices: Record<string, boolean>) => void
+    /** Hears each walk as it lands. */
+    onWalk: (walk: BuilderWalk) => void
+  }
+
+  const {
+    client,
+    start,
+    answers,
+    choices,
+    entryUrl,
+    asked,
+    codeOwned,
+    selfAdvancing,
+    handoffs,
+    hiddenKeys,
+    onStartChange,
+    onAnswersChange,
+    onChoicesChange,
+    onWalk,
+  }: PersonaBuilderProps = $props()
+
+  const experiencesStore = $derived(client.experiences.listStore)
+  const fieldsStore = $derived(client.fields.listStore)
+  const fields = $derived(new Map($fieldsStore.map((field) => [field.key, field])))
+  const graph = $derived(builderGraph<Rule>($experiencesStore, hiddenKeys))
+  const journeyOptions = $derived(
+    [...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)
+  }
+
+  let walk = $state.raw<BuilderWalk | null>(null)
+
+  // Each change walks again; a slower, older walk never lands over a newer one.
+  let ticket = 0
+  $effect(() => {
+    const mine = ++ticket
+    void walkDraft<Rule>({
+      ...graph,
+      start,
+      answers,
+      choices,
+      asked,
+      codeOwned,
+      selfAdvancing,
+      handoffs,
+      field: (key) => fields.get(key),
+      evaluate,
+      readsOf: responseKeysOf,
+    }).then((result) => {
+      if (mine !== ticket) return
+      walk = result
+      onWalk(result)
+    })
+  })
+
+  const rows: BuilderRow[] = $derived(walk?.rows ?? [])
+  const nextId = $derived(
+    rows.findLast((row) => row.kind === 'screen' && !row.complete)?.id ?? null,
+  )
+
+  // The next screen appears below the one just answered, often under the panel's fold.
+  const rowElements: Record<string, HTMLLIElement | undefined> = $state({})
+  $effect(() => {
+    if (nextId !== null) rowElements[nextId]?.scrollIntoView({ block: 'nearest' })
+  })
+
+  let errors = $state<Record<string, string>>({})
+
+  /**
+   * Sets one draft answer, or clears it.
+   *
+   * @param {string} key - The field key.
+   * @param {FieldValue | undefined} value - The answer; `undefined` clears it.
+   * @example setAnswer('purpose', 'home')
+   */
+  function setAnswer(key: string, value: FieldValue | undefined): void {
+    const next = Object.fromEntries(Object.entries(answers).filter(([entry]) => entry !== key))
+    if (value !== undefined) next[key] = value
+    onAnswersChange(next)
+    errors = Object.fromEntries(Object.entries(errors).filter(([entry]) => entry !== key))
+  }
+
+  /**
+   * Picks a choice: the answer for a single choice, toggled in or out of a multiple one.
+   *
+   * @param {Field} field - The question.
+   * @param {FieldValue} value - The choice's value.
+   * @example choose(field, 'family')
+   */
+  function choose(field: Field, value: FieldValue): void {
+    if (!field.multiple) {
+      setAnswer(field.key, value)
+      return
+    }
+
+    const current = answers[field.key]
+    const list = Array.isArray(current) ? current : []
+    setAnswer(
+      field.key,
+      list.includes(value) ? list.filter((entry) => entry !== value) : [...list, value],
+    )
+  }
+
+  /**
+   * Whether a choice is picked.
+   *
+   * @param {Field} field - The question.
+   * @param {unknown} value - The choice's value.
+   * @returns {boolean} `true` when it is.
+   * @example isChosen(field, 'family')
+   */
+  function isChosen(field: Field, value: unknown): boolean {
+    const answer = answers[field.key]
+    return Array.isArray(answer) ? answer.some((entry) => entry === value) : answer === value
+  }
+
+  /**
+   * Takes a typed answer once the field's own rule accepts it, as its screen would.
+   *
+   * @param {Field} field - The question.
+   * @param {string} raw - What was typed.
+   * @returns {Promise<void>} Settles once it is taken or refused.
+   * @example await typeAnswer(field, '3000')
+   */
+  async function typeAnswer(field: Field, raw: string): Promise<void> {
+    const text = raw.trim()
+    if (text.length === 0) {
+      setAnswer(field.key, undefined)
+      return
+    }
+
+    const value = field.type === 'number' ? Number(text) : text
+    if (field.validation != null) {
+      const result = await evaluateRuleLogic(client, field.validation, {
+        $input: value,
+        responses: { ...(walk?.answers ?? {}) },
+      })
+      if (typeof result === 'string' || result === false) {
+        errors = {
+          ...errors,
+          [field.key]: typeof result === 'string' ? result : 'This answer is not accepted.',
+        }
+        return
+      }
+    }
+
+    setAnswer(field.key, value)
+  }
+
+  /**
+   * The text an answer shows in its box.
+   *
+   * @param {FieldValue | undefined} value - The answer.
+   * @returns {string} Its text, or nothing for an answer that is not text or a number.
+   * @example typedText(3000) // '3000'
+   */
+  function typedText(value: FieldValue | undefined): string {
+    return typeof value === 'string' || typeof value === 'number' ? String(value) : ''
+  }
+
+  /**
+   * What an end row says.
+   *
+   * @param {Extract<BuilderRow, { kind: 'end' }>} row - The row.
+   * @returns {string} The sentence.
+   * @example endText({ kind: 'end', id: 'x', reason: 'end', name: null })
+   */
+  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.`
+      case 'handoff':
+        return `${row.name ?? 'Another journey'} takes over here, outside this build.`
+      case 'limit':
+        return 'The journey is too long to walk here, so it stops.'
+      case 'end':
+        return 'The journey ends here.'
+    }
+  }
+
+  /**
+   * The journey's name above a screen that starts it.
+   *
+   * @param {number} index - The row's position.
+   * @returns {string | null} The name, or `null` when the screen before is in the same journey.
+   * @example journeyChange(0) // 'Entry card'
+   */
+  function journeyChange(index: number): string | null {
+    const row = rows.at(index)
+    if (row?.kind !== 'screen') return null
+    const previous = rows.slice(0, index).findLast((entry) => entry.kind === 'screen')
+    return previous?.kind === 'screen' && previous.experienceKey === row.experienceKey
+      ? null
+      : row.experienceName
+  }
+</script>
+
+<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>
+  {:else}
+    <Select
+      label="Starts in"
+      name="devtools-builder-start"
+      options={journeyOptions}
+      value={start}
+      placeholder="Pick a journey"
+      onchange={onStartChange}
+    />
+    <Text size="small" color="subdued">
+      Answer each screen; 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>
+
+    <ol class="rows">
+      {#each rows as row, index (row.id)}
+        {#if row.kind === 'screen'}
+          <li
+            bind:this={rowElements[row.id]}
+            class="screen"
+            class:next={row.id === nextId}
+            data-testid="devtools-builder-screen-{row.stepKey}"
+          >
+            {#if journeyChange(index) !== null}
+              <Text size="caption" color="subdued" weight="semibold">{journeyChange(index)}</Text>
+            {/if}
+            <Text weight="semibold">{screenName(row.stepName ?? undefined, row.stepKey)}</Text>
+            {#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'}
+                    <TextField
+                      label={questionOf(field)}
+                      name="devtools-builder-{key}"
+                      type={kind}
+                      placeholder={field.placeholder}
+                      value={typedText(answers[key])}
+                      error={errors[key]}
+                      onchange={(value) => void typeAnswer(field, value)}
+                    />
+                  {:else}
+                    <Text size="small" weight="medium">{questionOf(field)}</Text>
+                  {/if}
+                  {#if kind === 'options'}
+                    <div class="choices">
+                      {#each row.options[key] ?? [] as position (position)}
+                        {@const option = field.options?.at(position)}
+                        {#if option !== undefined}
+                          <ChoiceButton
+                            label={option.label}
+                            selected={isChosen(field, option.value)}
+                            testId="devtools-builder-choice-{key}-{position}"
+                            onclick={() => choose(field, option.value)}
+                          />
+                        {/if}
+                      {/each}
+                    </div>
+                  {:else if kind === 'boolean'}
+                    <div class="choices">
+                      <ChoiceButton
+                        label="Yes"
+                        selected={answers[key] === true}
+                        testId="devtools-builder-choice-{key}-yes"
+                        onclick={() => setAnswer(key, true)}
+                      />
+                      <ChoiceButton
+                        label="No"
+                        selected={answers[key] === false}
+                        testId="devtools-builder-choice-{key}-no"
+                        onclick={() => setAnswer(key, false)}
+                      />
+                    </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.
+                    </Text>
+                  {/if}
+                </div>
+              {/if}
+            {:else}
+              <Text size="small" color="subdued">
+                Nothing to answer here. The customer 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>
+            <div class="choices">
+              <ChoiceButton
+                label="Yes"
+                selected={row.value}
+                testId="devtools-builder-decision-{index}-yes"
+                onclick={() => onChoicesChange({ ...choices, [row.id]: true })}
+              />
+              <ChoiceButton
+                label="No"
+                selected={!row.value}
+                testId="devtools-builder-decision-{index}-no"
+                onclick={() => onChoicesChange({ ...choices, [row.id]: false })}
+              />
+            </div>
+          </li>
+        {:else}
+          <li class="end" data-testid="devtools-builder-end">
+            <Text size="small" weight="medium">{endText(row)}</Text>
+          </li>
+        {/if}
+      {/each}
+    </ol>
+  {/if}
+</div>
+
+<style>
+  .builder {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+  }
+
+  .rows {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .screen,
+  .decision,
+  .end {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    padding: var(--space-3);
+    border: 1px solid var(--color-gray-200);
+    border-radius: var(--radius-md);
+  }
+
+  .screen.next {
+    border-color: var(--color-blue-500);
+    box-shadow: 0 0 0 1px var(--color-blue-500);
+  }
+
+  .decision {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--space-2) var(--space-3);
+    background: var(--color-gray-50);
+  }
+
+  .end {
+    border-style: dashed;
+  }
+
+  .question {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+  }
+
+  .choices {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-1);
+  }
+</style>

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

@@ -0,0 +1,86 @@
+<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'
+
+  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
+    /** Deletes it; absent for a persona the site defines. */
+    onDelete?: () => void
+  }
+
+  const { persona, loadReason, loading, onLoad, onDelete }: PersonaCardProps = $props()
+
+  let confirming = $state(false)
+
+  const answers = $derived(Object.keys(persona.responses).length)
+  const answerLabel = $derived(answers === 1 ? '1 answer' : `${answers} answers`)
+  const summary = $derived(
+    persona.load === null
+      ? `${answerLabel} · ${describeLanding(persona.landing)}`
+      : 'Set up by this site',
+  )
+</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 onDelete}
+          <Button variant="ghost" size="small" onclick={() => (confirming = true)}>Delete</Button>
+        {/if}
+      {/if}
+    </div>
+  </div>
+</Card>
+
+<style>
+  .persona {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-3);
+  }
+
+  .details {
+    display: flex;
+    flex: 1 1 16rem;
+    flex-direction: column;
+    gap: var(--space-0-5);
+    min-width: 0;
+  }
+
+  .actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-2);
+  }
+</style>