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

package/dist/plugins/devtools/review/answers/AnswersPanel.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   /**
-   * @file The Answers tab: every question a journey can ask, and the answer given — the Developer
-   * group's Responses screen in a reviewer's vocabulary.
+   * @file The Responses tab: every field an experience can ask for, and the response given — the
+   * Developer group's Responses screen, laid out for a reviewer.
    *
    * Four differences from that screen, all deliberate:
    *  1. Rows are titled by the QUESTION the visitor saw (`field.label`), not `field.key`.
@@ -76,8 +76,8 @@
   )
 
   const filters = $derived<{ value: Filter; label: string }[]>([
-    { value: 'answered', label: `Answered (${answeredCount})` },
-    { value: 'unanswered', label: `Not answered (${rows.length - answeredCount})` },
+    { value: 'answered', label: `With a response (${answeredCount})` },
+    { value: 'unanswered', label: `No response (${rows.length - answeredCount})` },
     { value: 'all', label: 'All' },
   ])
 
@@ -254,15 +254,15 @@
   </div>
 
   {#if confirmingReset}
-    <Banner status="warning" title="Clear every answer?">
+    <Banner status="warning" title="Clear every response?">
       <Stack direction="vertical" gap="small">
         <Text size="small">
-          This empties every answer in this session. Nothing about a real customer changes.
+          This empties every response in this session. Nothing about a real visitor changes.
         </Text>
         <Stack direction="horizontal" gap="small">
           <Button variant="destructive" size="small" onclick={reset}>Clear everything</Button>
           <Button variant="secondary" size="small" onclick={() => (confirmingReset = false)}>
-            Keep my answers
+            Keep my responses
           </Button>
         </Stack>
       </Stack>
@@ -274,7 +274,7 @@
          again. Saying so beats a reviewer reporting the stale screen as a bug. -->
     <Banner status="info" testId="devtools-answers-follow-up">
       <Stack direction="horizontal" gap="small" justify="center" align="space-between">
-        <Text size="small">What is on screen was worked out before this change.</Text>
+        <Text size="small">What the page shows was worked out before this change.</Text>
         <Button
           variant="secondary"
           size="small"
@@ -292,8 +292,8 @@
       <EmptyState
         message="Nothing to show here"
         hint={filter === 'answered'
-          ? 'No questions have been answered yet. Start the journey on the page.'
-          : 'Every question this journey asks already has an answer.'}
+          ? 'No field has a response yet. Start the experience on the page.'
+          : 'Every field this experience asks for already has a response.'}
       />
     {:else}
       <ul class="rows" data-testid="devtools-answers">
@@ -330,7 +330,7 @@
                       title={withheld}
                       onclick={() => startEdit(row)}
                     >
-                      {row.view.answered ? 'Change' : 'Answer'}
+                      {row.view.answered ? 'Change' : 'Add'}
                     </Button>
                     {#if row.view.answered}
                       <Button
@@ -346,7 +346,7 @@
                   </span>
                 {/if}
               {:else}
-                <Badge status="default" size="small">Change it on its screen</Badge>
+                <Badge status="default" size="small">Change it on its step</Badge>
               {/if}
             </div>
 
@@ -388,7 +388,7 @@
                     class="inline-input"
                     type={row.view.kind === 'number' ? 'number' : 'text'}
                     bind:value={draft}
-                    placeholder={row.field.placeholder ?? 'Type an answer'}
+                    placeholder={row.field.placeholder ?? 'Type a response'}
                     aria-label={row.view.title}
                   />
                 {/if}
@@ -405,7 +405,7 @@
             {:else if row.view.answered && row.view.display !== null}
               <Text size="small" color="subdued">{row.view.display}</Text>
             {:else}
-              <Text size="small" color="subdued">Not answered yet</Text>
+              <Text size="small" color="subdued">No response yet</Text>
             {/if}
           </li>
         {/each}

package/dist/plugins/devtools/review/guide/GuidePanel.svelte

@@ -24,7 +24,7 @@
    * @param {GuideSection} section - The section to read.
    * @returns {{ id: string; label: string } | null} The tab to open and its name.
    * @example
-   * openTarget({ ...section, tab: 'answers' }) // { id: 'answers', label: 'Answers' }
+   * openTarget({ ...section, tab: 'answers' }) // { id: 'answers', label: 'Responses' }
    */
   function openTarget(section: GuideSection): { id: string; label: string } | null {
     const id = section.tab

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

@@ -1,6 +1,6 @@
 /**
- * @file The review tabs' panels: How to use, This session, Answers, Journey map, Personas &
- * Scenarios and Variations.
+ * @file The review tabs' panels: How to use, This session, Responses, Flow, Personas & Scenarios
+ * and Feature flags.
  */
 export { default as GuidePanel } from './guide/GuidePanel.svelte';
 export { default as SessionPanel } from './session/SessionPanel.svelte';

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/JourneyMap.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
   /**
-   * @file The journey drawn as a tree — the Developer group's experience tree, in plain English.
+   * @file An experience's flow drawn as a tree — the Developer group's experience tree, in plain
+   * English.
    *
    * `derive/journey-tree` does the thinking: the graph-to-tree walk and the tidy layout. This file
    * owns nothing but pan, zoom and selection, which is why the layout is testable and this is not.
-   * The look follows the experience tree: left to right, a coloured dot per node (grey start, blue
-   * screen, amber decision, sky-blue for a branch that rejoins), curved links, a decision's arms
+   * The look follows the experience tree: left to right, a coloured dot per node (grey origin, blue
+   * step, amber condition, sky-blue for a branch that rejoins), curved links, a condition's arms
    * green and red, and each label above its dot — below it at the end of a branch.
    *
    * NODES ARE HTML, LINKS ARE SVG. A node is a real `<button>` holding its dot and label,
@@ -23,6 +24,7 @@
    * ACTIONS ARE NOT DRAWN. A route runs straight across them, and where a branch hands off to one
    * and stops, the pop-out names it on the node before.
    */
+  import { NODE_LABELS } from '../../derive'
   import type { TreeLayout, TreeNode, TreeNodeKind } from '../../derive'
 
   interface JourneyMapProps {
@@ -50,11 +52,11 @@
   const POP_EDGE = 8
 
   const KIND_LABELS: Record<TreeNodeKind, string> = {
-    start: 'Start',
-    screen: 'Screen',
-    decision: 'Decision',
-    system: 'Behind the scenes',
-    journey: 'Opens another journey',
+    start: NODE_LABELS.origin,
+    screen: NODE_LABELS.step,
+    decision: NODE_LABELS.condition,
+    system: NODE_LABELS.action,
+    journey: NODE_LABELS.experience,
   }
 
   let viewport: HTMLDivElement | undefined = $state()
@@ -554,7 +556,7 @@
                 {#if end.armLabel !== null}
                   <span class="arm-name arm-{end.arm ?? 'none'}">{end.armLabel}</span>
                 {/if}
-                <span>Ends: {end.label} (behind the scenes)</span>
+                <span>Ends: {end.label} (action)</span>
               </li>
             {/each}
           </ul>
@@ -582,7 +584,7 @@
           </button>
         {:else if canJump(selectedNode)}
           <button type="button" class="pop-action" onclick={() => goBack(selectedNode)}>
-            Go back to this screen
+            Go back to this step
           </button>
         {/if}
       </div>
@@ -590,10 +592,10 @@
   </div>
 
   <p class="legend">
-    <span class="key kind-start"></span> Start
-    <span class="key kind-screen"></span> Screen
-    <span class="key kind-decision"></span> Decision
-    <span class="key kind-journey"></span> Opens another journey
+    <span class="key kind-start"></span> {KIND_LABELS.start}
+    <span class="key kind-screen"></span> {KIND_LABELS.screen}
+    <span class="key kind-decision"></span> {KIND_LABELS.decision}
+    <span class="key kind-journey"></span> {KIND_LABELS.journey}
     <span class="key reference"></span> Rejoins an earlier branch (dashed)
     <span class="key seen"></span> Seen
     <span class="key current"></span> You are here

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

@@ -1,25 +1,27 @@
 <script lang="ts">
   /**
-   * @file The Journey map tab: any journey's flow in plain English — the Developer group's
-   * experience tree without the node ids or the raw JSON Logic. It opens on the journey 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 journey that is OPEN. A screen already visited is
-   * a plain `goToStepByKey`: the flow has been through every action in between, so returning to it
-   * is safe. A screen AHEAD is rendered but not clickable — jumping forward skips the actions that
-   * make it renderable, and the screen it lands on can render an error state no visitor could
-   * reach. Forward motion belongs to the journey itself, or to a custom tool that replays one.
+   * 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
+   * it is safe. A step AHEAD is rendered but not clickable — jumping forward skips the actions that
+   * make it renderable, and the step it lands on can render an error state no visitor could reach.
+   * Forward motion belongs to the experience itself, or to a custom tool that replays one.
    *
    * 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 screen 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
@@ -155,14 +158,14 @@
    * @param {OutlineRow} row - The row to explain.
    * @returns {string | undefined} The reason, or undefined when there is nothing to explain.
    * @example
-   * jumpReason(aheadRow) // "You haven't answered enough to get here yet."
+   * jumpReason(aheadRow) // "Your responses don't reach this step yet."
    */
   function jumpReason(row: OutlineRow): string | undefined {
     if (row.kind !== 'screen') return undefined
     if (posture.reason !== null) return posture.reason
-    if (!isOpen) return "This journey isn't open, so there is nowhere to go back to."
-    if (row.state === 'current') return "You're on this screen."
-    if (row.state === 'ahead') return "You haven't answered enough to get here yet."
+    if (!isOpen) return "This experience isn't open, so there is nowhere to go back to."
+    if (row.state === 'current') return "You're on this step."
+    if (row.state === 'ahead') return "Your responses don't reach this step yet."
     return undefined
   }
 
@@ -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.
    *
@@ -219,13 +233,26 @@
 <div class="journey">
   {#if selectedKey === null}
     <EmptyState
-      message="No journeys yet"
+      message="No experiences yet"
       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="Journey view">
+      <div class="views" role="group" aria-label="Flow view">
         <button
           type="button"
           class="view"
@@ -256,17 +283,27 @@
         >
           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">
         {#if followed !== null && !isOpen}
           <Button variant="ghost" size="small" onclick={() => (picked = null)}>
-            Back to the open journey
+            Back to the open experience
           </Button>
         {/if}
         <select
           class="picker-select"
-          aria-label="Journey"
+          aria-label="Experience"
           value={selectedKey}
           onchange={pick}
           data-testid="devtools-journey-picker"
@@ -284,11 +321,15 @@
       <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 journey has no screens yet"
-          hint="Its flow has not loaded, or it is built entirely from background steps."
+          message="This experience has no steps yet"
+          hint="Its flow has not loaded, or it is built entirely from actions."
         />
       </Card>
     {:else if layout !== null}
@@ -343,7 +384,7 @@
               {:else if row.kind === 'arm'}
                 <span class="arm">{row.label}</span>
               {:else if row.kind === 'end'}
-                <span class="end-row">⇥ Ends: {row.label} (behind the scenes)</span>
+                <span class="end-row">⇥ Ends: {row.label} (action)</span>
               {:else if row.kind === 'journey'}
                 <span class="journey-row">
                   <span class="marker muted" aria-hidden="true"></span>
@@ -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/journey/JourneyTimeline.svelte

@@ -1,24 +1,25 @@
 <script lang="ts">
   /**
-   * @file The journey drawn as a TIMELINE — `git log --graph` for a flow. One row per node, top to
-   * bottom; branches run in lanes beside the rows and MERGE back into the node they meet, so a
-   * screen many branches reach is one row with lines converging on it, not a tree full of dashed
-   * jumps. `derive/journey-timeline` owns the layout; this file owns selection and scrolling only.
+   * @file An experience's flow drawn as a TIMELINE — `git log --graph` for a flow. One row per
+   * node, top to bottom; branches run in lanes beside the rows and MERGE back into the node they
+   * meet, so a step many branches reach is one row with lines converging on it, not a tree full of
+   * dashed jumps. `derive/journey-timeline` owns the layout; this file owns selection and scrolling
+   * only.
    *
    * A LOOP is the one thing a git graph never has. It stays off the drawing and rides on its row as
    * a "↩ back to …" note, and the details pane can take the reviewer to its target.
    *
    * COLOUR IS THE BRANCH, as in a git tool: every line and dot takes its branch's colour, so the
    * eye can follow one route down the lanes. That frees the node KIND to be a SHAPE — a circle for
-   * a screen, a diamond for a decision, a square for another journey. Actions are not drawn at all;
-   * where a branch ends on one, the row names it.
+   * a step, a diamond for a condition, a square for another experience. Actions are not drawn at
+   * all; where a branch ends on one, the row names it.
    *
    * ROWS ARE HTML, LINES ARE SVG, the same split as the map: each row is a real `<button>` the full
    * width of the timeline, and the graph column is painted over its left edge with
    * `pointer-events: none`, so clicking a dot or its label selects the same row.
    */
   import { tick } from 'svelte'
-  import { COLOURS, ROW_HEIGHT } from '../../derive'
+  import { COLOURS, NODE_LABELS, ROW_HEIGHT } from '../../derive'
   import type { TimelineLayout, TimelineNode, TreeNodeKind } from '../../derive'
   import TimelineMarker from './TimelineMarker.svelte'
 
@@ -32,11 +33,11 @@
   const { layout, canNavigate, onJump }: JourneyTimelineProps = $props()
 
   const KIND_LABELS: Record<TreeNodeKind, string> = {
-    start: 'Start',
-    screen: 'Screen',
-    decision: 'Decision',
-    system: 'Behind the scenes',
-    journey: 'Opens another journey',
+    start: NODE_LABELS.origin,
+    screen: NODE_LABELS.step,
+    decision: NODE_LABELS.condition,
+    system: NODE_LABELS.action,
+    journey: NODE_LABELS.experience,
   }
 
   /** Marker size per kind — the start a little larger, as on the map. */
@@ -242,7 +243,7 @@
               >
             {/each}
             {#each node.ends as end (end.key)}
-              <span class="end" title="Hands off to {end.label}, behind the scenes"
+              <span class="end" title="Hands off to the {end.label} action"
                 >⇥ {end.armLabel === null ? '' : `${end.armLabel}: `}{end.label}</span
               >
             {/each}
@@ -331,13 +332,13 @@
                   {#if end.armLabel !== null}
                     <span class="arm arm-{end.arm ?? 'none'}">{end.armLabel}</span>
                   {/if}
-                  <span class="end-text">Ends: {end.label} (behind the scenes)</span>
+                  <span class="end-text">Ends: {end.label} (action)</span>
                 </li>
               {/each}
             </ul>
           </div>
         {:else}
-          <p class="text">The journey ends here.</p>
+          <p class="text">The experience ends here.</p>
         {/if}
 
         {#if selectedNode.rule !== null}
@@ -347,7 +348,7 @@
 
         {#if canJump(selectedNode)}
           <button type="button" class="action" onclick={() => goBack(selectedNode)}>
-            Go back to this screen
+            Go back to this step
           </button>
         {/if}
       {/if}
@@ -355,14 +356,14 @@
   </div>
 
   <p class="legend">
-    <span class="key-swatch kind-start"></span> Start
-    <span class="key-swatch kind-screen"></span> Screen
-    <span class="key-swatch kind-decision"></span> Decision
-    <span class="key-swatch kind-journey"></span> Opens another journey
+    <span class="key-swatch kind-start"></span> {KIND_LABELS.start}
+    <span class="key-swatch kind-screen"></span> {KIND_LABELS.screen}
+    <span class="key-swatch kind-decision"></span> {KIND_LABELS.decision}
+    <span class="key-swatch kind-journey"></span> {KIND_LABELS.journey}
     <span class="key-swatch seen"></span> Seen
     <span class="key-swatch current"></span> You are here
     <span
-      >· each colour is one branch · a decision's Yes runs straight on · ↩ loops back · ⇥ hands off</span
+      >· each colour is one branch · a condition's Yes runs straight on · ↩ loops back · ⇥ hands off</span
     >
   </p>
 </div>