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

package/dist/plugins/devtools/derive/plain-language/plain-language.d.ts

@@ -53,20 +53,18 @@ export declare const TAB_LABELS: {
     readonly guide: 'How to use';
     readonly session: 'This session';
     readonly answers: 'Responses';
-    readonly journey: 'Flow';
+    readonly journey: 'Experiences';
     readonly personas: 'Personas & Scenarios';
     readonly variations: 'Feature flags';
 };
 /** The id of one of the review tools' own tabs. */
 export type ReviewTabId = keyof typeof TAB_LABELS;
-/** The name of the sidebar section that holds the developer tools, apart from the review tabs. */
-export declare const DEVELOPER_LABEL = "Developer";
 /** The one-sentence purpose each tab leads with. Kept together so the tone stays consistent. */
 export declare const TAB_INTROS: {
     readonly guide: 'How to use each tab. Open a tab straight from its section.';
     readonly session: 'Where you are right now, and your responses on each step. Start here if something looks wrong.';
     readonly answers: 'Every field this experience can ask for, and the responses given. Change one to see what the visitor would see.';
-    readonly journey: 'Every route this experience can take, with your route marked. Go back to any step you have already visited.';
-    readonly personas: 'Visitors and situations to try this experience as. Load one to land where it would, or save where you are as a new one.';
+    readonly journey: 'Every experience on this site: the route each can take, with yours marked, and where and when it shows. Go back to any step you have already visited.';
+    readonly personas: 'Visitors and situations to try this experience as. Walk through as one, or jump to a step on its route.';
     readonly variations: 'The feature flags running on this site. Force a variant to review it, then copy the link to show someone else exactly what you saw.';
 };

package/dist/plugins/devtools/derive/plain-language/plain-language.js

@@ -1 +1 @@
-var e={origin:`Origin`,step:`Step`,condition:`Condition`,action:`Action`,experience:`Opens another experience`};function t(e){let t=e.replace(/[-_]+/g,` `).trim();return t.length===0?e:t.charAt(0).toUpperCase()+t.slice(1)}function n(e,n){let r=e?.trim();return r!==void 0&&r.length>0?r:n!==void 0&&n.length>0?t(n):`Untitled step`}function r(e){return e!==void 0&&e.length>0?`Viewing unpublished changes`:`Viewing published content`}var i={guide:`How to use`,session:`This session`,answers:`Responses`,journey:`Flow`,personas:`Personas & Scenarios`,variations:`Feature flags`},a=`Developer`,o={guide:`How to use each tab. Open a tab straight from its section.`,session:`Where you are right now, and your responses on each step. Start here if something looks wrong.`,answers:`Every field this experience can ask for, and the responses given. Change one to see what the visitor would see.`,journey:`Every route this experience can take, with your route marked. Go back to any step you have already visited.`,personas:`Visitors and situations to try this experience as. Load one to land where it would, or save where you are as a new one.`,variations:`The feature flags running on this site. Force a variant to review it, then copy the link to show someone else exactly what you saw.`};export{a as DEVELOPER_LABEL,e as NODE_LABELS,o as TAB_INTROS,i as TAB_LABELS,r as configSourceLabel,t as deslug,n as screenName};
+var e={origin:`Origin`,step:`Step`,condition:`Condition`,action:`Action`,experience:`Opens another experience`};function t(e){let t=e.replace(/[-_]+/g,` `).trim();return t.length===0?e:t.charAt(0).toUpperCase()+t.slice(1)}function n(e,n){let r=e?.trim();return r!==void 0&&r.length>0?r:n!==void 0&&n.length>0?t(n):`Untitled step`}function r(e){return e!==void 0&&e.length>0?`Viewing unpublished changes`:`Viewing published content`}var i={guide:`How to use`,session:`This session`,answers:`Responses`,journey:`Experiences`,personas:`Personas & Scenarios`,variations:`Feature flags`},a={guide:`How to use each tab. Open a tab straight from its section.`,session:`Where you are right now, and your responses on each step. Start here if something looks wrong.`,answers:`Every field this experience can ask for, and the responses given. Change one to see what the visitor would see.`,journey:`Every experience on this site: the route each can take, with yours marked, and where and when it shows. Go back to any step you have already visited.`,personas:`Visitors and situations to try this experience as. Walk through as one, or jump to a step on its route.`,variations:`The feature flags running on this site. Force a variant to review it, then copy the link to show someone else exactly what you saw.`};export{e as NODE_LABELS,a as TAB_INTROS,i as TAB_LABELS,r as configSourceLabel,t as deslug,n as screenName};

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

@@ -5,4 +5,4 @@ export type * from './plugin';
 export type * from './options';
 export type { CustomTool, CustomToolGuide, CustomToolIcon, CustomToolPlacement, } from './customTools';
 export type { DevtoolsSession } from './session-access';
-export type { PersonaDefinition, PersonaLoader } from './derive/personas';
+export type { PersonaDefinition, PersonaSetup } from './derive/personas';

package/dist/plugins/devtools/launcher/Launcher.svelte

@@ -11,13 +11,20 @@
     autoHide: boolean
     /** The tag beside the button: a preview session, a preview whose workspace is gone, or none. */
     preview: 'preview' | 'unavailable' | null
+    /** The persona the tab walks through as, named in the tag; `null` outside a persona session. */
+    walkingAs?: string | null
     /** Opens the panel. */
     onOpen: () => void
   }
 
-  const { position, autoHide, preview, onOpen }: Props = $props()
+  const { position, autoHide, preview, walkingAs = null, onOpen }: Props = $props()
 
   const edges = $derived(launcherEdges(position))
+  const tag = $derived(
+    [preview === 'preview' ? 'Preview mode' : '', walkingAs === null ? '' : `As ${walkingAs}`]
+      .filter((part) => part.length > 0)
+      .join(' · '),
+  )
 </script>
 
 <div
@@ -33,12 +40,14 @@
       aria-live="polite"
       title="This preview link's workspace no longer exists. The published site is shown."
     >Preview unavailable — showing published</span>
-  {:else if preview === 'preview'}
-    <span class="preview-tag" role="status" aria-live="polite">Preview mode</span>
+  {:else if tag.length > 0}
+    <span class="preview-tag" role="status" aria-live="polite" data-testid="devtools-launcher-tag">
+      {tag}
+    </span>
   {/if}
   <button
     class="floating-button"
-    class:has-preview-tag={preview !== null}
+    class:has-preview-tag={preview === 'unavailable' || tag.length > 0}
     onclick={onOpen}
     aria-label="Open Picked Devtools"
     title="Open Picked Devtools"

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

@@ -97,10 +97,11 @@ export interface DevtoolsPanelOptions {
     /** The floating button's corner and auto-hide. */
     launcher?: LauncherOptions;
     /**
-     * Visitors and situations every viewer can load from the Personas & Scenarios tab. Reviewers
-     * also save their own there, in their browser.
+     * Visitors and situations every viewer can load from the Personas & Scenarios tab, or a function
+     * that loads them, such as a dynamic import a production build can drop. Reviewers also save
+     * their own there, in their browser.
      */
-    personas?: readonly PersonaDefinition[];
+    personas?: readonly PersonaDefinition[] | (() => Promise<readonly PersonaDefinition[]>);
     /** How loading a persona walks an experience. */
     personaWalk?: PersonaWalkOptions;
 }
@@ -118,7 +119,8 @@ export interface ResolvedDevtoolsOptions {
         fixes: DevtoolsGuideFix[];
     };
     launcher: Required<LauncherOptions>;
-    personas: Persona[];
+    /** The site's personas, loaded on the first call. */
+    personas: () => Promise<Persona[]>;
     personaWalk: {
         selfAdvancingSteps: ReadonlySet<string>;
         responses: Readonly<Record<string, FieldValue>>;

package/dist/plugins/devtools/options.js

@@ -1 +1 @@
-import{DEVTOOLS_EXPERIENCE_KEY as e,DEVTOOLS_PLUGIN_NAME as t}from"./constants.js";import{readAnswers as n,sitePersonas as r}from"./derive/personas/personas.js";var i=[`top-left`,`top-right`,`bottom-left`,`bottom-right`];function a(e){return typeof e==`object`&&!!e&&!Array.isArray(e)}function o(e){return Array.isArray(e)?e.filter(e=>typeof e==`string`):[]}function s(e){if(!a(e))return{};let t={};for(let[n,r]of Object.entries(e))typeof r==`string`&&(t[n]=r);return t}function c(e){return i.some(t=>t===e)}function l(e){if(!a(e))return null;let{id:t,title:n,steps:r,notes:i}=e;return typeof t!=`string`||typeof n!=`string`||!Array.isArray(r)?null:{id:t,title:n,steps:o(r),notes:o(i)}}function u(e){if(!a(e))return null;let{problem:t,fix:n}=e;return typeof t!=`string`||typeof n!=`string`?null:{problem:t,fix:n}}function d(e){if(!a(e))return null;let{label:t,run:n}=e;return typeof t!=`string`||typeof n!=`function`?null:{label:t,run:e=>{Reflect.apply(n,void 0,[e])}}}function f(i){let f=i.getPluginConfig(t).options,p=a(f)?f:{},m=a(p.guide)?p.guide:{},h=a(p.launcher)?p.launcher:{},g=a(p.personaWalk)?p.personaWalk:{},_=p.environmentLabel;return{readOnly:p.readOnly===!0,environmentLabel:typeof _==`string`&&_.length>0?_:void 0,hiddenExperienceKeys:new Set([e,...o(p.hiddenExperienceKeys)]),experiencePrecedence:o(p.experiencePrecedence),codeOwnedFields:new Set(o(p.codeOwnedFields)),responseFollowUp:d(p.responseFollowUp),guide:{sections:(Array.isArray(m.sections)?m.sections:[]).map(l).filter(e=>e!==null),fixes:(Array.isArray(m.fixes)?m.fixes:[]).map(u).filter(e=>e!==null)},launcher:{position:c(h.position)?h.position:`bottom-right`,autoHide:typeof h.autoHide!=`boolean`||h.autoHide},personas:r(p.personas),personaWalk:{selfAdvancingSteps:new Set(o(g.selfAdvancingSteps)),responses:n(g.responses),handoffs:s(g.handoffs)}}}export{e as DEVTOOLS_EXPERIENCE_KEY,i as LAUNCHER_POSITIONS,f as readDevtoolsOptions};
+import{DEVTOOLS_EXPERIENCE_KEY as e,DEVTOOLS_PLUGIN_NAME as t}from"./constants.js";import{readAnswers as n,sitePersonas as r}from"./derive/personas/personas.js";var i=[`top-left`,`top-right`,`bottom-left`,`bottom-right`];function a(e){return typeof e==`object`&&!!e&&!Array.isArray(e)}function o(e){return Array.isArray(e)?e.filter(e=>typeof e==`string`):[]}function s(e){if(!a(e))return{};let t={};for(let[n,r]of Object.entries(e))typeof r==`string`&&(t[n]=r);return t}function c(e){return i.some(t=>t===e)}function l(e){if(!a(e))return null;let{id:t,title:n,steps:r,notes:i}=e;return typeof t!=`string`||typeof n!=`string`||!Array.isArray(r)?null:{id:t,title:n,steps:o(r),notes:o(i)}}function u(e){if(!a(e))return null;let{problem:t,fix:n}=e;return typeof t!=`string`||typeof n!=`string`?null:{problem:t,fix:n}}function d(e){if(!a(e))return null;let{label:t,run:n}=e;return typeof t!=`string`||typeof n!=`function`?null:{label:t,run:e=>{Reflect.apply(n,void 0,[e])}}}function f(e){if(typeof e!=`function`){let t=r(e);return()=>Promise.resolve(t)}let t=null;return()=>(t??=Promise.resolve().then(()=>Reflect.apply(e,void 0,[])).then(e=>r(e)).catch(()=>[]),t)}function p(r){let i=r.getPluginConfig(t).options,p=a(i)?i:{},m=a(p.guide)?p.guide:{},h=a(p.launcher)?p.launcher:{},g=a(p.personaWalk)?p.personaWalk:{},_=p.environmentLabel;return{readOnly:p.readOnly===!0,environmentLabel:typeof _==`string`&&_.length>0?_:void 0,hiddenExperienceKeys:new Set([e,...o(p.hiddenExperienceKeys)]),experiencePrecedence:o(p.experiencePrecedence),codeOwnedFields:new Set(o(p.codeOwnedFields)),responseFollowUp:d(p.responseFollowUp),guide:{sections:(Array.isArray(m.sections)?m.sections:[]).map(l).filter(e=>e!==null),fixes:(Array.isArray(m.fixes)?m.fixes:[]).map(u).filter(e=>e!==null)},launcher:{position:c(h.position)?h.position:`bottom-right`,autoHide:typeof h.autoHide!=`boolean`||h.autoHide},personas:f(p.personas),personaWalk:{selfAdvancingSteps:new Set(o(g.selfAdvancingSteps)),responses:n(g.responses),handoffs:s(g.handoffs)}}}export{e as DEVTOOLS_EXPERIENCE_KEY,i as LAUNCHER_POSITIONS,p as readDevtoolsOptions};

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

@@ -1,8 +1,8 @@
 <script lang="ts">
   /**
-   * @file The Flow tab: any experience's flow in plain English — the Developer group's
-   * experience tree without the node ids or the raw JSON Logic. It opens on the experience 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 experience that is OPEN. A step already visited
    * is a plain `goToStepByKey`: the flow has been through every action in between, so returning to
@@ -13,13 +13,15 @@
    * 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 step 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
@@ -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.
    *
@@ -223,6 +237,19 @@
       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="Flow view">
@@ -256,6 +283,16 @@
         >
           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">
@@ -284,7 +321,11 @@
       <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 experience has no steps yet"
@@ -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/personas/PersonaBuilder.svelte

@@ -19,9 +19,7 @@
     type BuilderWalk,
   } from '../../derive'
   import ChoiceButton from './ChoiceButton.svelte'
-
-  /** The rule type the client evaluates. */
-  type Rule = Parameters<typeof evaluateRuleLogic>[1]
+  import { entryLocation, ruleEvaluator, type Rule } from './persona-route'
 
   interface PersonaBuilderProps {
     client: Picked
@@ -73,37 +71,8 @@
     [...graph.journeys.values()].map((journey) => ({ value: journey.key, label: journey.name })),
   )
 
-  /** The entry page's address, as a rule on `location` reads it. */
-  const location = $derived.by(() => {
-    const url = new URL(entryUrl, window.location.origin)
-    return {
-      hash: url.hash,
-      host: url.host,
-      hostname: url.hostname,
-      href: url.href,
-      origin: url.origin,
-      pathname: url.pathname,
-      port: url.port,
-      protocol: url.protocol,
-      search: url.search,
-    }
-  })
-
-  /**
-   * Evaluates a rule against draft answers, on the entry page.
-   *
-   * @param {Rule} rule - The rule.
-   * @param {Readonly<Record<string, FieldValue>>} responses - The answers it reads.
-   * @returns {Promise<boolean>} Whether it holds.
-   * @example await evaluate(condition.logic, { purpose: 'home' })
-   */
-  async function evaluate(
-    rule: Rule,
-    responses: Readonly<Record<string, FieldValue>>,
-  ): Promise<boolean> {
-    const result = await evaluateRuleLogic(client, rule, { responses: { ...responses }, location })
-    return Boolean(result)
-  }
+  /** Evaluates a rule against draft answers, on the entry page. */
+  const evaluate = $derived(ruleEvaluator(client, entryLocation(entryUrl, window.location.origin)))
 
   let walk = $state.raw<BuilderWalk | null>(null)