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

package/dist/plugins/devtools/DevToolsExperience.svelte

@@ -19,18 +19,22 @@
   import SidebarFooter from './sidebar/SidebarFooter.svelte'
   import {
     CUSTOM_TOOLS_TAB,
-    DEVELOPER_OPEN_STORAGE_KEY,
     TAB_STORAGE_KEY,
     buildNav,
-    developerTabId,
-    isInDeveloper,
     readStored,
     resolveTab,
+    screenTabId,
     toolTabId,
     writeStored,
   } from './sidebar/nav'
   import { readDevtoolsOptions } from './options'
-  import { footerTools, readCustomTools, reviewTools } from './customTools'
+  import {
+    developerTools,
+    footerTools,
+    personasTools,
+    readCustomTools,
+    reviewTools,
+  } from './customTools'
   import { provideDevtoolsSession } from './session-access'
   import { setPostureContext } from './posture-context'
   import { createSessionData } from './session'
@@ -38,6 +42,7 @@
     TAB_INTROS,
     configSourceLabel,
     derivePosture,
+    applyEdits,
     guideFixes,
     guideSections,
     readSavedPersonas,
@@ -54,26 +59,31 @@
     VariationsPanel,
   } from './review'
   import {
+    openPersonaJourney,
     screenQuestions,
     takePendingLoad,
     walkNotice,
     walkPersona,
+    type PendingLoad,
     type WalkSettings,
   } from './review/personas/load-persona'
+  import {
+    prefillPersona,
+    readActivePersona,
+    takePersonaLink,
+    writeActivePersona,
+    type Prefill,
+  } from './review/personas/persona-session'
   import ProjectScreen from './screens/project/ProjectScreen.svelte'
   import ComponentsListScreen from './screens/components/ComponentsListScreen.svelte'
   import ConfigScreen from './screens/config/ConfigScreen.svelte'
   import ContentListScreen from './screens/content/ContentListScreen.svelte'
   import EventsListScreen from './screens/events/EventsListScreen.svelte'
-  import ExperienceInstancesListScreen from './screens/experience-instances/ExperienceInstancesListScreen.svelte'
-  import ExperiencesListScreen from './screens/experiences/ExperiencesListScreen.svelte'
-  import FeaturesListScreen from './screens/features/FeaturesListScreen.svelte'
   import FieldsListScreen from './screens/fields/FieldsListScreen.svelte'
   import FrameworksListScreen from './screens/frameworks/FrameworksListScreen.svelte'
   import HistoryEntriesListScreen from './screens/history/HistoryEntriesListScreen.svelte'
   import IdentityScreen from './screens/identity/IdentityScreen.svelte'
   import PredicatesListScreen from './screens/predicates/PredicatesListScreen.svelte'
-  import ResponsesListScreen from './screens/responses/ResponsesListScreen.svelte'
   import CustomToolsScreen from './screens/custom-tools/CustomToolsScreen.svelte'
 
   const experience = getExperience()
@@ -83,6 +93,8 @@
   const registeredTools = readCustomTools(client)
   const tools = reviewTools(registeredTools)
   const footer = footerTools(registeredTools)
+  const personaTools = personasTools(registeredTools)
+  const customTools = developerTools(registeredTools)
   const posture = derivePosture({
     readOnly: options.readOnly,
     environmentLabel: options.environmentLabel,
@@ -108,22 +120,18 @@
   const sessionStorageOf = (): Storage => window.sessionStorage
   const localStorageOf = (): Storage => window.localStorage
 
-  /** The developer screens, keyed by their sidebar id. */
-  const DEVELOPER_COMPONENTS: Record<string, Component> = {
-    [developerTabId('project')]: ProjectScreen,
-    [developerTabId('components')]: ComponentsListScreen,
-    [developerTabId('config')]: ConfigScreen,
-    [developerTabId('content')]: ContentListScreen,
-    [developerTabId('events')]: EventsListScreen,
-    [developerTabId('experience-instances')]: ExperienceInstancesListScreen,
-    [developerTabId('experiences')]: ExperiencesListScreen,
-    [developerTabId('features')]: FeaturesListScreen,
-    [developerTabId('fields')]: FieldsListScreen,
-    [developerTabId('frameworks')]: FrameworksListScreen,
-    [developerTabId('history')]: HistoryEntriesListScreen,
-    [developerTabId('identity')]: IdentityScreen,
-    [developerTabId('predicates')]: PredicatesListScreen,
-    [developerTabId('responses')]: ResponsesListScreen,
+  /** The SDK's own screens, keyed by their sidebar id. */
+  const SCREEN_COMPONENTS: Record<string, Component> = {
+    [screenTabId('project')]: ProjectScreen,
+    [screenTabId('components')]: ComponentsListScreen,
+    [screenTabId('config')]: ConfigScreen,
+    [screenTabId('content')]: ContentListScreen,
+    [screenTabId('events')]: EventsListScreen,
+    [screenTabId('fields')]: FieldsListScreen,
+    [screenTabId('frameworks')]: FrameworksListScreen,
+    [screenTabId('history')]: HistoryEntriesListScreen,
+    [screenTabId('identity')]: IdentityScreen,
+    [screenTabId('predicates')]: PredicatesListScreen,
   }
 
   // ── The session record ───────────────────────────────────────────────────────────────────────
@@ -131,7 +139,7 @@
   // and the answer history listen from the start.
   const session = createSessionData(client, {
     exclude: options.hiddenExperienceKeys,
-    precedence: options.journeyPrecedence,
+    precedence: options.experiencePrecedence,
     codeOwned: options.codeOwnedFields,
   })
   const releaseSession = provideDevtoolsSession(client, { session, posture })
@@ -153,27 +161,25 @@
     buildNav({
       variations: $features.length > 0,
       tools,
+      customTools,
       footerTools: footer,
     }),
   )
   const storedTab = readStored(sessionStorageOf, TAB_STORAGE_KEY)
   let tab = $state(storedTab ?? 'guide')
-  let developerOpen = $state(readStored(sessionStorageOf, DEVELOPER_OPEN_STORAGE_KEY) === 'true')
   let drawerOpen = $state(false)
 
-  // A tab can disappear under the viewer (Variations once the feature list is empty), and a stored
-  // developer screen opens its group.
+  // A tab can disappear under the viewer: Feature flags once the feature list is empty.
   $effect(() => {
     const resolved = resolveTab(tab, nav)
     if (resolved !== tab) tab = resolved
-    if (isInDeveloper(tab, nav) && !developerOpen) developerOpen = true
   })
 
-  const selectedItem = $derived(
-    [...nav.primary, ...nav.developer, ...nav.footer].find((item) => item.id === tab),
+  const selectedItem = $derived([...nav.primary, ...nav.footer].find((item) => item.id === tab))
+  const selectedTool = $derived(
+    [...tools, ...customTools, ...footer].find((tool) => toolTabId(tool.id) === tab),
   )
-  const selectedTool = $derived([...tools, ...footer].find((tool) => toolTabId(tool.id) === tab))
-  const developerScreen = $derived(DEVELOPER_COMPONENTS[tab])
+  const sdkScreen = $derived(SCREEN_COMPONENTS[tab])
 
   /**
    * Narrows a tab id to one of the review tabs.
@@ -198,16 +204,6 @@
     writeStored(sessionStorageOf, TAB_STORAGE_KEY, id)
   }
 
-  /**
-   * Opens or folds the Developer group, and remembers it.
-   *
-   * @example toggleDeveloper()
-   */
-  function toggleDeveloper(): void {
-    developerOpen = !developerOpen
-    writeStored(sessionStorageOf, DEVELOPER_OPEN_STORAGE_KEY, String(developerOpen))
-  }
-
   // ── How to use ───────────────────────────────────────────────────────────────────────────────
   const guide = $derived.by(() => {
     const available = { variations: $features.length > 0 }
@@ -215,7 +211,12 @@
       ...section,
       tab: null,
     }))
-    const toolSections: GuideSection[] = [...tools, ...footer].flatMap((tool) =>
+    const toolSections: GuideSection[] = [
+      ...tools.map((tool) => ({ tool, tab: toolTabId(tool.id) })),
+      ...personaTools.map((tool) => ({ tool, tab: 'personas' })),
+      ...customTools.map((tool) => ({ tool, tab: toolTabId(tool.id) })),
+      ...footer.map((tool) => ({ tool, tab: toolTabId(tool.id) })),
+    ].flatMap(({ tool, tab: toolTab }) =>
       tool.guide
         ? [
             {
@@ -223,7 +224,7 @@
               title: tool.label,
               steps: tool.guide.steps,
               notes: tool.guide.notes ?? [],
-              tab: toolTabId(tool.id),
+              tab: toolTab,
             },
           ]
         : [],
@@ -237,8 +238,8 @@
     }
   })
 
-  const followUp = options.answerFollowUp
-    ? { label: options.answerFollowUp.label, run: () => options.answerFollowUp?.run(client) }
+  const followUp = options.responseFollowUp
+    ? { label: options.responseFollowUp.label, run: () => options.responseFollowUp?.run(client) }
     : null
 
   // ── The floating button ──────────────────────────────────────────────────────────────────────
@@ -255,49 +256,135 @@
     writeAutoHide(localStorageOf, value)
   }
 
-  // ── A persona load, carried across its reload ────────────────────────────────────────────────
-  // Load reloads the page clean, so the walk runs here, as the devtools mount on the new page. The
-  // panel stays shut while it walks, so the reviewer watches the journey move, and opens on the
-  // Personas tab when the walk stops short.
+  // ── A persona session, carried across reloads ──────────────────────────────────────────────
+  // Walk through and Jump to step reload the page clean, so the session starts here, as the
+  // devtools mount on the new page, and again on every later page of the tab until Stop. Each
+  // start runs the persona's setup and pre-fills every step with its responses. A jump walks to
+  // its step first, with the panel shut so the reviewer watches the journey move, and opens on the
+  // Personas tab when the walk stops short. A shared link starts a walk-through on the page it
+  // opens.
   let personaWalkNotice = $state<{
     status: 'info' | 'success' | 'warning' | 'error'
     text: string
   } | null>(null)
+  /** The site's personas, once the option has loaded them. */
+  let sitePersonaList = $state.raw<Persona[]>([])
+  /** The persona this tab walks through as. */
+  let activePersona = $state.raw<Persona | null>(null)
+  let prefill: Prefill | null = null
 
   const walkSettings: WalkSettings = {
     exclude: options.hiddenExperienceKeys,
-    precedence: options.journeyPrecedence,
+    precedence: options.experiencePrecedence,
     openOrder: () => session.openOrderStore.getState(),
     selfAdvancing: options.personaWalk.selfAdvancingSteps,
-    answers: options.personaWalk.answers,
+    responses: options.personaWalk.responses,
     askedOn: (fieldKeys) => screenQuestions(client, fieldKeys, options.codeOwnedFields),
   }
 
   /**
-   * The persona a reload was for, among the site's and this browser's.
+   * A persona by id, among the site's as this browser edited them and this browser's own.
    *
-   * @returns {Persona | undefined} The persona, or `undefined` when no load is waiting.
-   * @example pendingPersona()
+   * @param {string} id - The persona's id.
+   * @param {readonly Persona[]} site - The site's personas.
+   * @returns {Persona | undefined} The persona, or `undefined` when none has the id.
+   * @example findPersona('mover', sitePersonaList)
    */
-  function pendingPersona(): Persona | undefined {
-    const id = takePendingLoad(sessionStorageOf())
-    if (id === null || !posture.canEditAnswers) return undefined
-    const saved = readSavedPersonas(localStorageOf, client.projectId)
-    return [...options.personas, ...saved].find((persona) => persona.id === id)
-  }
-
-  const walking = pendingPersona()
-  if (walking !== undefined) {
-    personaWalkNotice = { status: 'info', text: `Loading ${walking.name}…` }
-    void walkPersona(client, walking, walkSettings).then((outcome) => {
-      const notice = walkNotice(walking, outcome)
-      personaWalkNotice = notice
-      if (notice.status === 'success') return
-      selectTab('personas')
-      experience.open()
+  function findPersona(id: string, site: readonly Persona[]): Persona | undefined {
+    const listed = applyEdits(site, readSavedPersonas(localStorageOf, client.projectId))
+    return [...listed.site, ...listed.own].find((persona) => persona.id === id)
+  }
+
+  /**
+   * Walks a jump to its step, then says how it went, opening the panel when it stopped short.
+   *
+   * @param {Persona} persona - The persona.
+   * @param {PendingLoad} pending - The jump.
+   * @returns {Promise<void>} Settles once the walk ends.
+   * @example await jump(persona, pending)
+   */
+  async function jump(persona: Persona, pending: PendingLoad): Promise<void> {
+    const stepName = pending.stop?.stepName ?? pending.stop?.stepKey ?? ''
+    personaWalkNotice = { status: 'info', text: `Jumping to “${stepName}” as ${persona.name}…` }
+    const outcome = await walkPersona(
+      client,
+      { ...persona, landing: pending.stop, passed: pending.passed },
+      walkSettings,
+    )
+    const notice = walkNotice(persona, outcome)
+    personaWalkNotice = notice
+    if (notice.status === 'success') return
+    selectTab('personas')
+    experience.open()
+  }
+
+  /**
+   * Starts or resumes this tab's persona session: a reload's start, a shared link, or the session
+   * a reload carried on.
+   *
+   * @returns {Promise<void>} Settles once the persona is set up and any jump has walked.
+   * @example await startPersonaSession()
+   */
+  async function startPersonaSession(): Promise<void> {
+    const storage = sessionStorageOf()
+    const pending = takePendingLoad(storage)
+    const linked = takePersonaLink(window.location, (url) => {
+      window.history.replaceState(window.history.state, '', url)
     })
+    const site = await options.personas()
+    sitePersonaList = site
+    const id = pending?.id ?? linked ?? readActivePersona(storage)
+    if (id === null || !posture.canEditAnswers) return
+    const persona = findPersona(id, site)
+    if (persona === undefined || (pending === null && linked !== null && persona.source !== 'site')) {
+      writeActivePersona(storage, null)
+      return
+    }
+
+    writeActivePersona(storage, persona.id)
+    activePersona = persona
+    try {
+      await persona.setup?.(client)
+    } catch (error) {
+      const detail = error instanceof Error ? ` ${error.message}` : ''
+      personaWalkNotice = { status: 'error', text: `${persona.name}’s setup failed.${detail}` }
+    }
+
+    prefill = prefillPersona(
+      client,
+      { ...persona.responses, ...options.personaWalk.responses },
+      session.askedStore,
+    )
+    if (pending?.stop != null) await jump(persona, pending)
+    else if (pending !== null || linked !== null) {
+      await openPersonaJourney(client, persona, walkSettings)
+    }
   }
 
+  /**
+   * Ends this tab's persona session: every field gets its own default back.
+   *
+   * @example stopPersonaSession()
+   */
+  function stopPersonaSession(): void {
+    prefill?.stop()
+    prefill = null
+    writeActivePersona(sessionStorageOf(), null)
+    if (activePersona !== null) {
+      personaWalkNotice = {
+        status: 'success',
+        text: `Stopped walking through as ${activePersona.name}. Fields already filled in keep their values.`,
+      }
+    }
+
+    activePersona = null
+  }
+
+  void startPersonaSession()
+  $effect(() => () => {
+    prefill?.stop()
+  })
+
   // ── Dialog behaviour ─────────────────────────────────────────────────────────────────────────
   /** The open panel; Svelte sets it back to `null` when the panel unmounts. */
   let panel: HTMLDivElement | null = $state(null)
@@ -423,13 +510,7 @@
           <div class="drawer-scrim" aria-hidden="true" onclick={() => (drawerOpen = false)}></div>
         {/if}
         <div class="nav-column" class:drawer-open={drawerOpen} id="devtools-nav">
-          <Sidebar
-            {nav}
-            selected={tab}
-            {developerOpen}
-            onSelect={selectTab}
-            onToggleDeveloper={toggleDeveloper}
-          />
+          <Sidebar {nav} selected={tab} onSelect={selectTab} />
           <SidebarFooter
             tools={nav.footer}
             selected={tab}
@@ -440,9 +521,9 @@
         </div>
 
         <section class="pane" aria-label={selectedItem?.label} data-testid="devtools-pane">
-          {#if developerScreen}
-            {@const Screen = developerScreen}
-            <div class="developer-body">
+          {#if sdkScreen}
+            {@const Screen = sdkScreen}
+            <div class="screen-body">
               <Screen />
             </div>
           {:else if tab === CUSTOM_TOOLS_TAB}
@@ -501,12 +582,15 @@
                   {client}
                   {posture}
                   journey={$journey}
-                  personas={options.personas}
+                  personas={sitePersonaList}
                   asked={$asked}
                   route={$route}
                   hiddenKeys={options.hiddenExperienceKeys}
                   codeOwned={options.codeOwnedFields}
                   personaWalk={options.personaWalk}
+                  tools={personaTools}
+                  {activePersona}
+                  onStop={stopPersonaSession}
                   walkNotice={personaWalkNotice}
                   onWalkNoticeDismiss={() => (personaWalkNotice = null)}
                 />
@@ -524,6 +608,7 @@
     position={options.launcher.position}
     {autoHide}
     {preview}
+    walkingAs={activePersona?.name ?? null}
     onOpen={() => experience.open()}
   />
 {/if}
@@ -791,7 +876,7 @@
     display: grid;
   }
 
-  .developer-body {
+  .screen-body {
     flex: 1 1 auto;
     display: grid;
     min-height: 0;

package/dist/plugins/devtools/components/AdaptedToolHost.svelte

@@ -7,6 +7,8 @@
   import { Banner } from '../ui'
 
   export let tool: CustomTool
+  /** Drops the host's own padding, for a tool set inside another panel's section. */
+  export let flush = false
 
   const client = getPicked()
   const experience = getExperience()
@@ -73,16 +75,16 @@
 </script>
 
 {#if framework}
-  <div class="adapted-tool-host" bind:this={host} hidden={renderFailed}></div>
+  <div class="adapted-tool-host" class:flush bind:this={host} hidden={renderFailed}></div>
   {#if renderFailed}
-    <div class="adapted-tool-fallback">
+    <div class="adapted-tool-fallback" class:flush>
       <Banner status="error" title="Tool failed to render">
         The "{tool.label}" tool threw while rendering. See the browser console for details.
       </Banner>
     </div>
   {/if}
 {:else}
-  <div class="adapted-tool-fallback">
+  <div class="adapted-tool-fallback" class:flush>
     <Banner status="warning" title="Framework not registered">
       This tool renders a "{tool.component.frameworkName}" component, but no matching framework is
       registered with the Picked client. Add the corresponding framework plugin to use it.
@@ -100,4 +102,8 @@
   .adapted-tool-fallback {
     padding: var(--space-4);
   }
+
+  .flush {
+    padding: 0;
+  }
 </style>

package/dist/plugins/devtools/customTools.d.ts

@@ -1,7 +1,7 @@
 /** @file Registry helpers for devtools custom tools — user-supplied, framework-adapted tools. */
 import type { AdaptedComponent, Picked } from '@picked/client';
 /** Where a custom tool is listed in the devtools sidebar. */
-export type CustomToolPlacement = 'review' | 'footer' | 'developer';
+export type CustomToolPlacement = 'review' | 'personas' | 'footer' | 'developer';
 /** The glyphs a `'footer'` tool can show. */
 export declare const CUSTOM_TOOL_ICONS: readonly ['bug', 'wrench'];
 /** A glyph a `'footer'` tool can show. */
@@ -25,9 +25,10 @@ export interface CustomTool {
     label: string;
     component: AdaptedComponent;
     /**
-     * `'review'` lists the tool as a tab of its own, beside the review tabs. `'footer'` shows it as
-     * an icon at the foot of the sidebar, beside the auto-hide switch, with its label as a tooltip.
-     * `'developer'` lists it in the Custom Tools tab, with the other unplaced tools.
+     * `'review'` lists the tool as a tab of its own, beside the review tabs. `'personas'` shows it
+     * as a section of the Personas & Scenarios tab, under its label. `'footer'` shows it as an icon
+     * at the foot of the sidebar, beside the auto-hide switch, with its label as a tooltip.
+     * `'developer'` lists it as a top-level row of its own, after the review-placed tools.
      *
      * @default 'developer'
      */
@@ -40,7 +41,7 @@ export interface CustomTool {
     icon?: CustomToolIcon;
     /** One sentence on what the tool is for, shown above it. */
     description?: string;
-    /** How to use steps for the tool. Listed for a `'review'` or `'footer'` tool. */
+    /** How to use steps for the tool, listed under its label in How to use. */
     guide?: CustomToolGuide;
 }
 /**
@@ -64,6 +65,14 @@ export declare function readCustomTools(client: Pick<Picked, 'getPluginConfig'>)
  * @example reviewTools(readCustomTools(client))
  */
 export declare function reviewTools(tools: readonly CustomTool[]): CustomTool[];
+/**
+ * The tools shown as sections of the Personas & Scenarios tab.
+ *
+ * @param {readonly CustomTool[]} tools - The registered tools.
+ * @returns {CustomTool[]} The tools placed `'personas'`, in registration order.
+ * @example personasTools(readCustomTools(client))
+ */
+export declare function personasTools(tools: readonly CustomTool[]): CustomTool[];
 /**
  * The tools shown as icons at the foot of the sidebar.
  *
@@ -73,10 +82,10 @@ export declare function reviewTools(tools: readonly CustomTool[]): CustomTool[];
  */
 export declare function footerTools(tools: readonly CustomTool[]): CustomTool[];
 /**
- * The tools listed in the Custom Tools tab.
+ * The tools listed as top-level rows after the review-placed tools.
  *
  * @param {readonly CustomTool[]} tools - The registered tools.
- * @returns {CustomTool[]} Every tool placed neither `'review'` nor `'footer'`, in registration order.
+ * @returns {CustomTool[]} The unplaced tools and those placed `'developer'`, in registration order.
  * @example developerTools(readCustomTools(client))
  */
 export declare function developerTools(tools: readonly CustomTool[]): CustomTool[];

package/dist/plugins/devtools/customTools.js

@@ -1 +1 @@
-import{DEVTOOLS_PLUGIN_NAME as e}from"./constants.js";var t=[`bug`,`wrench`];function n(e){return typeof e==`object`&&!!e}function r(e){return n(e)&&`frameworkName`in e&&typeof e.frameworkName==`string`&&`component`in e}function i(e){return t.some(t=>t===e)}function a(e){return Array.isArray(e)&&e.every(e=>typeof e==`string`)}function o(e){if(n(e)&&a(e.steps))return a(e.notes)?{steps:e.steps,notes:e.notes}:{steps:e.steps}}function s(e){if(!n(e))return null;let{id:t,label:a,component:s,placement:c,icon:l,description:u,guide:d}=e;if(typeof t!=`string`||typeof a!=`string`||!r(s))return null;let f={id:t,label:a,component:s};(c===`review`||c===`footer`||c===`developer`)&&(f.placement=c),i(l)&&(f.icon=l),typeof u==`string`&&(f.description=u);let p=o(d);return p&&(f.guide=p),f}function c(t){let n=t.getPluginConfig(e).customTools;if(!Array.isArray(n))return[];let r=new Set;return n.map(s).filter(e=>e!==null).filter(e=>!r.has(e.id)&&(r.add(e.id),!0))}function l(e){return e.filter(e=>e.placement===`review`)}function u(e){return e.filter(e=>e.placement===`footer`)}function d(e){return e.filter(e=>e.placement===void 0||e.placement===`developer`)}export{t as CUSTOM_TOOL_ICONS,d as developerTools,u as footerTools,c as readCustomTools,l as reviewTools};
+import{DEVTOOLS_PLUGIN_NAME as e}from"./constants.js";var t=[`bug`,`wrench`];function n(e){return typeof e==`object`&&!!e}function r(e){return n(e)&&`frameworkName`in e&&typeof e.frameworkName==`string`&&`component`in e}function i(e){return t.some(t=>t===e)}var a=[`review`,`personas`,`footer`,`developer`];function o(e){return a.some(t=>t===e)}function s(e){return Array.isArray(e)&&e.every(e=>typeof e==`string`)}function c(e){if(n(e)&&s(e.steps))return s(e.notes)?{steps:e.steps,notes:e.notes}:{steps:e.steps}}function l(e){if(!n(e))return null;let{id:t,label:a,component:s,placement:l,icon:u,description:d,guide:f}=e;if(typeof t!=`string`||typeof a!=`string`||!r(s))return null;let p={id:t,label:a,component:s};o(l)&&(p.placement=l),i(u)&&(p.icon=u),typeof d==`string`&&(p.description=d);let m=c(f);return m&&(p.guide=m),p}function u(t){let n=t.getPluginConfig(e).customTools;if(!Array.isArray(n))return[];let r=new Set;return n.map(l).filter(e=>e!==null).filter(e=>!r.has(e.id)&&(r.add(e.id),!0))}function d(e){return e.filter(e=>e.placement===`review`)}function f(e){return e.filter(e=>e.placement===`personas`)}function p(e){return e.filter(e=>e.placement===`footer`)}function m(e){return e.filter(e=>e.placement===void 0||e.placement===`developer`)}export{t as CUSTOM_TOOL_ICONS,m as developerTools,p as footerTools,f as personasTools,u as readCustomTools,d as reviewTools};

package/dist/plugins/devtools/derive/answer-display/answer-display.d.ts

@@ -12,7 +12,7 @@ export interface AnswerField {
         label: string;
     }[] | null;
 }
-/** Everything a row of the Answers panel needs about one answer. */
+/** Everything a row of the Responses tab needs about one response. */
 export interface AnswerView {
     /** The question as the customer met it. */
     title: string;

package/dist/plugins/devtools/derive/answer-display/answer-display.js

@@ -1 +1 @@
-import{deslug as e}from"../plain-language/plain-language.js";var t=`Not answered yet`,n=`Answered on its screen`;function r(t){let n=t.name?.trim();return n!==void 0&&n.length>0?n:e(t.key)}function i(e){let t=e.label?.trim();return t!==void 0&&t.length>0?t:r(e)}function a(e){return e.type===`object`?`system`:e.options!==null&&e.options!==void 0&&e.options.length>0?`options`:e.type===`boolean`?`boolean`:e.type===`number`?`number`:`text`}function o(e,n){let r=n.options?.find(t=>t.value===e);return r===void 0?e===!0?`Yes`:e===!1?`No`:e===null?t:typeof e==`string`?e:typeof e==`number`?String(e):JSON.stringify(e):r.label}function s(e,t){return e==null||e===``?null:Array.isArray(e)?e.length===0?null:e.map(e=>o(e,t)).join(`, `):a(t)===`system`?n:o(e,t)}function c(e,t){let n=a(t),o=s(e,t);return{title:i(t),noun:r(t),kind:n,display:o,answered:o!==null,editable:n!==`system`}}function l(e,t,n=new Set){let r=new Set;for(let e of t)for(let t of e)t.type===`step`&&t.stepId!==void 0&&r.add(t.stepId);let i=new Set;for(let t of e)if(r.has(t.id))for(let e of t.fieldKeys)n.has(e)||i.add(e);return i}function u(e){return e===void 0?``:JSON.stringify(e,null,2)}export{l as askedFieldKeys,c as describeAnswer,a as kindOf,r as nounOf,i as questionOf,s as renderAnswer,u as systemPayload};
+import{deslug as e}from"../plain-language/plain-language.js";var t=`No response yet`,n=`Set on its step`;function r(t){let n=t.name?.trim();return n!==void 0&&n.length>0?n:e(t.key)}function i(e){let t=e.label?.trim();return t!==void 0&&t.length>0?t:r(e)}function a(e){return e.type===`object`?`system`:e.options!==null&&e.options!==void 0&&e.options.length>0?`options`:e.type===`boolean`?`boolean`:e.type===`number`?`number`:`text`}function o(e,n){let r=n.options?.find(t=>t.value===e);return r===void 0?e===!0?`Yes`:e===!1?`No`:e===null?t:typeof e==`string`?e:typeof e==`number`?String(e):JSON.stringify(e):r.label}function s(e,t){return e==null||e===``?null:Array.isArray(e)?e.length===0?null:e.map(e=>o(e,t)).join(`, `):a(t)===`system`?n:o(e,t)}function c(e,t){let n=a(t),o=s(e,t);return{title:i(t),noun:r(t),kind:n,display:o,answered:o!==null,editable:n!==`system`}}function l(e,t,n=new Set){let r=new Set;for(let e of t)for(let t of e)t.type===`step`&&t.stepId!==void 0&&r.add(t.stepId);let i=new Set;for(let t of e)if(r.has(t.id))for(let e of t.fieldKeys)n.has(e)||i.add(e);return i}function u(e){return e===void 0?``:JSON.stringify(e,null,2)}export{l as askedFieldKeys,c as describeAnswer,a as kindOf,r as nounOf,i as questionOf,s as renderAnswer,u as systemPayload};

package/dist/plugins/devtools/derive/guide-sections/guide-sections.js

@@ -1 +1 @@
-var e=[{id:`session`,title:`See where you are`,steps:[],notes:[`To see the screen you are on and every answer so far, open **This session**.`],tab:`session`},{id:`answers`,title:`Change an answer`,steps:[`Open **Answers**.`,`Find the question. Use **Answered**, **Not answered** or **All** to narrow the list.`,`Click **Change**, or **Answer** if it has none yet.`,`Pick or type the new answer, then click **Save**.`],notes:[`To remove one answer, click **Clear** beside it.`,`To start the whole journey again, click **Start over**, then **Clear everything**.`,`If a question says **Change it on its screen**, go back to that screen and change it there.`],tab:`answers`},{id:`journey`,title:`Go back to an earlier screen`,steps:[`Open **Journey map**.`,`Find a screen on your route. Your route is blue, and your screen says **You are here**.`,`Click the screen, then click **Go back to this screen**.`],notes:[`You can only go back to screens you have already visited.`,`To change how the map looks, pick **Map**, **Timeline** or **Outline** at the top.`],tab:`journey`},{id:`personas`,title:`Try the journey as a customer`,steps:[`Open **Personas & Scenarios**.`,`Click **Load** beside the customer you want. The journey opens where they would be.`],notes:[`To keep where you are for later, click **Create**, give it a name, then click **Save**.`,`What you save stays in this browser only.`],tab:`personas`},{id:`variations`,title:`View a test version of a page`,steps:[`Open **Variations**.`,`Find the test and pick the version you want.`,`Click **Show me this version**. The page reloads showing it.`,`To share exactly what you saw, click **Copy link** and send it.`],notes:[`To go back to normal for that test, click **Leave this one alone**.`],tab:`variations`}],t=[{tab:`journey`,entry:{problem:`I can't click a screen on the Journey map`,fix:`Go back only to screens you have visited.`}}];function n(e,t){return e!==`variations`||t.variations}function r(t,r){return[...r?.lead??[],...e.filter(e=>n(e.tab,t)),...r?.tools??[]]}function i(e,r){return[...t.filter(t=>n(t.tab,e)).map(e=>e.entry),...r??[]]}function a(e){let t=e.split(`**`);return t.length%2==0?[{text:e,bold:!1}]:t.map((e,t)=>({text:e,bold:t%2==1})).filter(e=>e.text.length>0)}export{a as emphasis,i as guideFixes,r as guideSections};
+var e=[{id:`session`,title:`See where you are`,steps:[],notes:[`To see the step you are on and every response so far, open **This session**.`],tab:`session`},{id:`answers`,title:`Change a response`,steps:[`Open **Responses**.`,`Find the field. Use **With a response**, **No response** or **All** to narrow the list.`,`Click **Change**, or **Add** if it has no response yet.`,`Pick or type the new response, then click **Save**.`],notes:[`To remove one response, click **Clear** beside it.`,`To start the whole experience again, click **Start over**, then **Clear everything**.`,`If a field says **Change it on its step**, go back to that step and change it there.`],tab:`answers`},{id:`journey`,title:`Go back to an earlier step`,steps:[`Open **Experiences**.`,`Find a step on your route. Your route is blue, and your step says **You are here**.`,`Click the step, then click **Go back to this step**.`],notes:[`You can only go back to steps you have already visited.`,`To change how the flow is drawn, pick **Map**, **Timeline** or **Outline** at the top.`,`To see where an experience shows and when it starts, pick **Details**.`,`To open an experience that is not on the page, pick it, then click **Launch experience**.`],tab:`journey`},{id:`personas`,title:`Try the experience as a visitor`,steps:[`Open **Personas & Scenarios**.`,`Click **Walk through** beside the visitor you want. The page starts again.`,`Go through the experience. Each step shows their responses. Click **Continue**, or change a response first.`,`When you are done, click **Stop** at the top of the tab.`],notes:[`To start further in, click **Jump to step**, then pick the step.`,`To change a persona, click **Edit**. Your change stays in this browser only.`,`To keep where you are for later, click **Create**, give it a name, then click **Save**.`,`To send a site persona to someone else, click its copy icon and share the link.`],tab:`personas`},{id:`variations`,title:`View a feature flag variant`,steps:[`Open **Feature flags**.`,`Find the feature flag and pick the variant you want.`,`Click **Show me this variant**. The page reloads showing it.`,`To share exactly what you saw, click **Copy link** and send it.`],notes:[`To go back to normal for that feature flag, click **Leave this one alone**.`],tab:`variations`}],t=[{tab:`journey`,entry:{problem:`I can't click a step in the Experiences tab`,fix:`Go back only to steps you have visited.`}}];function n(e,t){return e!==`variations`||t.variations}function r(t,r){return[...r?.lead??[],...e.filter(e=>n(e.tab,t)),...r?.tools??[]]}function i(e,r){return[...t.filter(t=>n(t.tab,e)).map(e=>e.entry),...r??[]]}function a(e){let t=e.split(`**`);return t.length%2==0?[{text:e,bold:!1}]:t.map((e,t)=>({text:e,bold:t%2==1})).filter(e=>e.text.length>0)}export{a as emphasis,i as guideFixes,r as guideSections};

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

@@ -16,12 +16,12 @@ export { COLOURS, LANE_WIDTH, ROW_HEIGHT, buildTimeline } from './journey-timeli
 export type { TimelineEdge, TimelineLayout, TimelineNext, TimelineNode } from './journey-timeline';
 export { BREADTH, DEPTH, buildTree } from './journey-tree';
 export type { FlowEnd, TreeInput, TreeJump, TreeLayout, TreeLink, TreeNode, TreeNodeKind, } from './journey-tree';
-export { DEVELOPER_LABEL, NODE_LABELS, TAB_INTROS, TAB_LABELS, configSourceLabel, deslug, screenName, } from './plain-language';
+export { NODE_LABELS, TAB_INTROS, TAB_LABELS, configSourceLabel, deslug, screenName, } from './plain-language';
 export type { ReviewTabId } from './plain-language';
 export { builderGraph, responseKeysOf, walkDraft } from './persona-builder';
 export type { BuilderCondition, BuilderEdge, BuilderField, BuilderInput, BuilderJourney, BuilderNode, BuilderRow, BuilderStep, BuilderWalk, GraphSource, } from './persona-builder';
-export { PERSONA_STORAGE_PREFIX, buildPersona, customerAnswers, describeLanding, entryUrlOf, passedScreens, personaStorageKey, readAnswers, readEntryUrl, readSavedPersonas, sitePersonas, writeSavedPersonas, } from './personas';
-export type { BuildPersonaResult, Persona, PersonaCapture, PersonaDefinition, PersonaDraft, PersonaLanding, PersonaLoader, PersonaScreen, PersonaSource, PersonaStorageGetter, } from './personas';
+export { PERSONA_STORAGE_PREFIX, applyEdits, buildPersona, customerAnswers, describeLanding, entryUrlOf, groupPersonas, matchesSearch, passedScreens, personaStorageKey, readAnswers, readEntryUrl, readLanding, readPassed, readSavedPersonas, sitePersonas, startOf, writeSavedPersonas, } from './personas';
+export type { BuildPersonaResult, EditedPersonas, Persona, PersonaCapture, PersonaDefinition, PersonaDraft, PersonaGroup, PersonaLanding, PersonaScreen, PersonaSetup, PersonaSource, PersonaStorageGetter, } from './personas';
 export { UNDESCRIBABLE, describeRule, varKeyOf } from './plain-logic';
 export type { FieldLookup, FieldSummary } from './plain-logic';
 export { derivePosture } from './safety-posture';

package/dist/plugins/devtools/derive/index.js

@@ -1 +1 @@
-import{isBlank as e,nextHistory as t,submittedAnswers as n}from"./answer-history/answer-history.js";import{DEVELOPER_LABEL as r,NODE_LABELS as i,TAB_INTROS as a,TAB_LABELS as o,configSourceLabel as s,deslug as c,screenName as l}from"./plain-language/plain-language.js";import{PERSONA_STORAGE_PREFIX as u,buildPersona as d,customerAnswers as f,describeLanding as p,entryUrlOf as m,passedScreens as h,personaStorageKey as g,readAnswers as _,readEntryUrl as v,readSavedPersonas as y,sitePersonas as b,writeSavedPersonas as x}from"./personas/personas.js";import{askedFieldKeys as S,describeAnswer as C,kindOf as w,nounOf as T,questionOf as E,renderAnswer as D,systemPayload as O}from"./answer-display/answer-display.js";import{emphasis as k,guideFixes as A,guideSections as j}from"./guide-sections/guide-sections.js";import{UNDESCRIBABLE as M,describeRule as N,varKeyOf as P}from"./plain-logic/plain-logic.js";import{buildOutline as F}from"./journey-outline/journey-outline.js";import{nextOpenOrder as I,pickJourney as L}from"./journey-pick/journey-pick.js";import{BREADTH as R,DEPTH as z,buildTree as B}from"./journey-tree/journey-tree.js";import"./journey-tree/index.js";import{COLOURS as V,LANE_WIDTH as H,ROW_HEIGHT as U,buildTimeline as W}from"./journey-timeline/journey-timeline.js";import"./journey-timeline/index.js";import{builderGraph as G,responseKeysOf as K,walkDraft as q}from"./persona-builder/persona-builder.js";import{derivePosture as J}from"./safety-posture/safety-posture.js";import{nextTrails as Y}from"./visited-steps/visited-steps.js";import{nextRoute as X}from"./walk-route/walk-route.js";export{R as BREADTH,V as COLOURS,z as DEPTH,r as DEVELOPER_LABEL,H as LANE_WIDTH,i as NODE_LABELS,u as PERSONA_STORAGE_PREFIX,U as ROW_HEIGHT,a as TAB_INTROS,o as TAB_LABELS,M as UNDESCRIBABLE,S as askedFieldKeys,F as buildOutline,d as buildPersona,W as buildTimeline,B as buildTree,G as builderGraph,s as configSourceLabel,f as customerAnswers,J as derivePosture,C as describeAnswer,p as describeLanding,N as describeRule,c as deslug,k as emphasis,m as entryUrlOf,A as guideFixes,j as guideSections,e as isBlank,w as kindOf,t as nextHistory,I as nextOpenOrder,X as nextRoute,Y as nextTrails,T as nounOf,h as passedScreens,g as personaStorageKey,L as pickJourney,E as questionOf,_ as readAnswers,v as readEntryUrl,y as readSavedPersonas,D as renderAnswer,K as responseKeysOf,l as screenName,b as sitePersonas,n as submittedAnswers,O as systemPayload,P as varKeyOf,q as walkDraft,x as writeSavedPersonas};
+import{isBlank as e,nextHistory as t,submittedAnswers as n}from"./answer-history/answer-history.js";import{NODE_LABELS as r,TAB_INTROS as i,TAB_LABELS as a,configSourceLabel as o,deslug as s,screenName as c}from"./plain-language/plain-language.js";import{PERSONA_STORAGE_PREFIX as l,applyEdits as u,buildPersona as d,customerAnswers as f,describeLanding as p,entryUrlOf as m,groupPersonas as h,matchesSearch as g,passedScreens as _,personaStorageKey as v,readAnswers as y,readEntryUrl as b,readLanding as x,readPassed as S,readSavedPersonas as C,sitePersonas as w,startOf as T,writeSavedPersonas as E}from"./personas/personas.js";import{askedFieldKeys as D,describeAnswer as O,kindOf as k,nounOf as A,questionOf as j,renderAnswer as M,systemPayload as N}from"./answer-display/answer-display.js";import{emphasis as P,guideFixes as F,guideSections as I}from"./guide-sections/guide-sections.js";import{UNDESCRIBABLE as L,describeRule as R,varKeyOf as z}from"./plain-logic/plain-logic.js";import{buildOutline as B}from"./journey-outline/journey-outline.js";import{nextOpenOrder as V,pickJourney as H}from"./journey-pick/journey-pick.js";import{BREADTH as U,DEPTH as W,buildTree as G}from"./journey-tree/journey-tree.js";import"./journey-tree/index.js";import{COLOURS as K,LANE_WIDTH as q,ROW_HEIGHT as J,buildTimeline as Y}from"./journey-timeline/journey-timeline.js";import"./journey-timeline/index.js";import{builderGraph as X,responseKeysOf as Z,walkDraft as Q}from"./persona-builder/persona-builder.js";import{derivePosture as $}from"./safety-posture/safety-posture.js";import{nextTrails as ee}from"./visited-steps/visited-steps.js";import{nextRoute as te}from"./walk-route/walk-route.js";export{U as BREADTH,K as COLOURS,W as DEPTH,q as LANE_WIDTH,r as NODE_LABELS,l as PERSONA_STORAGE_PREFIX,J as ROW_HEIGHT,i as TAB_INTROS,a as TAB_LABELS,L as UNDESCRIBABLE,u as applyEdits,D as askedFieldKeys,B as buildOutline,d as buildPersona,Y as buildTimeline,G as buildTree,X as builderGraph,o as configSourceLabel,f as customerAnswers,$ as derivePosture,O as describeAnswer,p as describeLanding,R as describeRule,s as deslug,P as emphasis,m as entryUrlOf,h as groupPersonas,F as guideFixes,I as guideSections,e as isBlank,k as kindOf,g as matchesSearch,t as nextHistory,V as nextOpenOrder,te as nextRoute,ee as nextTrails,A as nounOf,_ as passedScreens,v as personaStorageKey,H as pickJourney,j as questionOf,y as readAnswers,b as readEntryUrl,x as readLanding,S as readPassed,C as readSavedPersonas,M as renderAnswer,Z as responseKeysOf,c as screenName,w as sitePersonas,T as startOf,n as submittedAnswers,N as systemPayload,z as varKeyOf,Q as walkDraft,E as writeSavedPersonas};

package/dist/plugins/devtools/derive/journey-outline/journey-outline.js

@@ -1 +1 @@
-import{NODE_LABELS as e,deslug as t,screenName as n}from"../plain-language/plain-language.js";import{describeRule as r}from"../plain-logic/plain-logic.js";var i=[{handle:`true`,label:`Yes`},{handle:`false`,label:`Otherwise`}],a=400,o=24,s=new Set([`origin`,`step`,`condition`,`experience`]);function c(e,t,n){return e!==null&&e===n?`current`:e!==null&&t.has(e)?`visited`:`ahead`}function l({nodes:l,edges:u,conditions:d,fieldLookup:f,visited:p,currentStepKey:m}){let h=new Map(l.map(e=>[e.id,e])),g=new Map(d.map(e=>[e.id,e])),_=new Map;for(let e of u){let t=_.get(e.sourceNodeId);t===void 0?_.set(e.sourceNodeId,[e]):t.push(e)}let v=[],y=new Map,b=(e,t)=>(_.get(e)??[]).find(e=>e.sourceHandle===t),x=e=>{let t=_.get(e)??[];return t.find(e=>e.sourceHandle===`true`)??t.find(e=>e.sourceHandle===void 0)??t[0]},S=e=>!s.has(e.type),C=(r,i)=>{if(r.type===`origin`)return{row:{kind:`start`,id:r.id,depth:i,label:e.origin},backref:e.origin};if(r.type===`step`){let e=n(r.name,r.stepKey);return{row:{kind:`screen`,id:r.id,depth:i,label:e,stepKey:r.stepKey??null,state:c(r.stepKey??null,p,m)},backref:e}}if(r.type===`experience`){let e=r.experienceKey??`another journey`;return{row:{kind:`journey`,id:r.id,depth:i,label:t(e)},backref:`opening ${e}`}}let a=t(r.actionKey??r.name??r.type);return{row:{kind:`end`,id:r.id,depth:i,label:a},backref:a}},w=e=>{let t=new Set,n=e;for(;!t.has(n);){let e=h.get(n);if(e===void 0||!S(e))return{next:n};t.add(n);let r=x(n);if(r===void 0)return{end:e};n=r.destinationNodeId}return null},T=(e,t)=>{let n=e.conditionId===void 0?void 0:g.get(e.conditionId),a=r(n?.logic,f);y.set(e.id,`the “${a}” decision`),v.push({kind:`decision`,id:e.id,depth:t,label:a,rule:JSON.stringify(n?.logic??null,null,2)});for(let n of i){let r=b(e.id,n.handle);r!==void 0&&(v.push({kind:`arm`,id:`${e.id}:${n.handle}`,depth:t+1,label:n.label}),E(r.destinationNodeId,t+2))}},E=(e,t)=>{if(e===void 0||v.length>=a||t>o)return;let n=w(e);if(n===null)return;if(`end`in n){let e=C(n.end,t).row.label;v.push({kind:`end`,id:`${n.end.id}:end:${v.length}`,depth:t,label:e});return}let r=n.next,i=h.get(r);if(i===void 0)return;let s=y.get(r);if(s!==void 0){v.push({kind:`backref`,id:`${r}:back:${v.length}`,depth:t,label:s});return}if(i.type===`condition`){T(i,t);return}let{row:c,backref:l}=C(i,t);y.set(r,l),v.push(c),E(x(r)?.destinationNodeId,t)};if(E(l.find(e=>e.type===`origin`)?.id,0),v.length===0)for(let e of l)e.type===`step`&&v.push(C(e,0).row);return v}export{l as buildOutline};
+import{NODE_LABELS as e,deslug as t,screenName as n}from"../plain-language/plain-language.js";import{describeRule as r}from"../plain-logic/plain-logic.js";var i=[{handle:`true`,label:`Yes`},{handle:`false`,label:`Otherwise`}],a=400,o=24,s=new Set([`origin`,`step`,`condition`,`experience`]);function c(e,t,n){return e!==null&&e===n?`current`:e!==null&&t.has(e)?`visited`:`ahead`}function l({nodes:l,edges:u,conditions:d,fieldLookup:f,visited:p,currentStepKey:m}){let h=new Map(l.map(e=>[e.id,e])),g=new Map(d.map(e=>[e.id,e])),_=new Map;for(let e of u){let t=_.get(e.sourceNodeId);t===void 0?_.set(e.sourceNodeId,[e]):t.push(e)}let v=[],y=new Map,b=(e,t)=>(_.get(e)??[]).find(e=>e.sourceHandle===t),x=e=>{let t=_.get(e)??[];return t.find(e=>e.sourceHandle===`true`)??t.find(e=>e.sourceHandle===void 0)??t[0]},S=e=>!s.has(e.type),C=(r,i)=>{if(r.type===`origin`)return{row:{kind:`start`,id:r.id,depth:i,label:e.origin},backref:e.origin};if(r.type===`step`){let e=n(r.name,r.stepKey);return{row:{kind:`screen`,id:r.id,depth:i,label:e,stepKey:r.stepKey??null,state:c(r.stepKey??null,p,m)},backref:e}}if(r.type===`experience`){let e=r.experienceKey??`another experience`;return{row:{kind:`journey`,id:r.id,depth:i,label:t(e)},backref:`opening ${e}`}}let a=t(r.actionKey??r.name??r.type);return{row:{kind:`end`,id:r.id,depth:i,label:a},backref:a}},w=e=>{let t=new Set,n=e;for(;!t.has(n);){let e=h.get(n);if(e===void 0||!S(e))return{next:n};t.add(n);let r=x(n);if(r===void 0)return{end:e};n=r.destinationNodeId}return null},T=(e,t)=>{let n=e.conditionId===void 0?void 0:g.get(e.conditionId),a=r(n?.logic,f);y.set(e.id,`the “${a}” condition`),v.push({kind:`decision`,id:e.id,depth:t,label:a,rule:JSON.stringify(n?.logic??null,null,2)});for(let n of i){let r=b(e.id,n.handle);r!==void 0&&(v.push({kind:`arm`,id:`${e.id}:${n.handle}`,depth:t+1,label:n.label}),E(r.destinationNodeId,t+2))}},E=(e,t)=>{if(e===void 0||v.length>=a||t>o)return;let n=w(e);if(n===null)return;if(`end`in n){let e=C(n.end,t).row.label;v.push({kind:`end`,id:`${n.end.id}:end:${v.length}`,depth:t,label:e});return}let r=n.next,i=h.get(r);if(i===void 0)return;let s=y.get(r);if(s!==void 0){v.push({kind:`backref`,id:`${r}:back:${v.length}`,depth:t,label:s});return}if(i.type===`condition`){T(i,t);return}let{row:c,backref:l}=C(i,t);y.set(r,l),v.push(c),E(x(r)?.destinationNodeId,t)};if(E(l.find(e=>e.type===`origin`)?.id,0),v.length===0)for(let e of l)e.type===`step`&&v.push(C(e,0).row);return v}export{l as buildOutline};