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

package/dist/plugins/devtools/review/personas/persona-route.d.ts

@@ -0,0 +1,87 @@
+/**
+ * @file A persona's route: the screens its responses take it through, worked out over the real
+ * flow graph and the workspace's own rules without touching the live session. Jump to step lists
+ * them, and the panel's builder draws them.
+ */
+import type { FieldValue, Picked } from '@picked/client';
+import { evaluateRuleLogic } from '@picked/client';
+import { type BuilderWalk, type Persona, type PersonaLanding } from '../../derive';
+/** The rule type the client evaluates. */
+export type Rule = Parameters<typeof evaluateRuleLogic>[1];
+/** The parts of a page's address a rule on `location` reads. */
+export interface EntryLocation {
+    hash: string;
+    host: string;
+    hostname: string;
+    href: string;
+    origin: string;
+    pathname: string;
+    port: string;
+    protocol: string;
+    search: string;
+}
+/**
+ * The entry page's address, as a rule on `location` reads it.
+ *
+ * @param {string} entryUrl - The entry page: a path on this site, with its query.
+ * @param {string} origin - This site's origin.
+ * @returns {EntryLocation} The address.
+ * @example entryLocation('/sale?utm=spring', 'https://shop.example').pathname // '/sale'
+ */
+export declare function entryLocation(entryUrl: string, origin: string): EntryLocation;
+/**
+ * Evaluates rules against draft responses, on an entry page.
+ *
+ * @param {Picked} client - The client.
+ * @param {EntryLocation} location - The entry page's address.
+ * @returns {(rule: Rule, responses: Readonly<Record<string, FieldValue>>) => Promise<boolean>} The evaluator.
+ * @example await ruleEvaluator(client, location)(condition.logic, { purpose: 'home' })
+ */
+export declare function ruleEvaluator(client: Picked, location: EntryLocation): (rule: Rule, responses: Readonly<Record<string, FieldValue>>) => Promise<boolean>;
+/** What a route reads beyond the persona. */
+export interface RouteSettings {
+    /** Every key a journey's screens ask. */
+    asked: ReadonlySet<string>;
+    codeOwned: ReadonlySet<string>;
+    selfAdvancing: ReadonlySet<string>;
+    /** Actions that open another journey, by action key. */
+    handoffs: Readonly<Record<string, string>>;
+    /** Experience keys never walked. */
+    hiddenKeys: ReadonlySet<string>;
+    /** Responses every walk gives when a step asks for them, over the persona's own. */
+    responses: Readonly<Record<string, FieldValue>>;
+}
+/**
+ * The route a persona's responses take through the experiences on this page.
+ *
+ * @param {Picked} client - The client.
+ * @param {Persona} persona - The persona.
+ * @param {RouteSettings} settings - What the walk reads beyond the persona.
+ * @param {{ origin: string; pathname: string; search: string }} here - This page's address, for a persona with no entry page.
+ * @param {string} here.origin - Its origin.
+ * @param {string} here.pathname - Its path.
+ * @param {string} here.search - Its query.
+ * @returns {Promise<BuilderWalk | null>} The walk, or `null` for a persona with no journey.
+ * @example await personaRoute(client, persona, settings, window.location)
+ */
+export declare function personaRoute(client: Picked, persona: Persona, settings: RouteSettings, here: {
+    origin: string;
+    pathname: string;
+    search: string;
+}): Promise<BuilderWalk | null>;
+/** A screen on a persona's route. */
+export interface RouteScreen extends PersonaLanding {
+    stepKey: string;
+    /** `true` on the screen the persona stops on. */
+    isStop: boolean;
+}
+/**
+ * The screens on a route, in order, marking the persona's own stop: the screen it names, else
+ * where its responses run out.
+ *
+ * @param {BuilderWalk} walk - The route.
+ * @param {PersonaLanding | null} landing - Where the persona stops.
+ * @returns {RouteScreen[]} The screens.
+ * @example routeScreens(walk, persona.landing)
+ */
+export declare function routeScreens(walk: BuilderWalk, landing: PersonaLanding | null): RouteScreen[];

package/dist/plugins/devtools/review/personas/persona-route.js

@@ -0,0 +1 @@
+import{startOf as e}from"../../derive/personas/personas.js";import{builderGraph as t,responseKeysOf as n,walkDraft as r}from"../../derive/persona-builder/persona-builder.js";import"../../derive/index.js";import{evaluateRuleLogic as i}from"@picked/client";function a(e,t){let n=new URL(e,t);return{hash:n.hash,host:n.host,hostname:n.hostname,href:n.href,origin:n.origin,pathname:n.pathname,port:n.port,protocol:n.protocol,search:n.search}}function o(e,t){return async(n,r)=>!!await i(e,n,{responses:{...r},location:{...t}})}async function s(i,s,c,l){let u=e(s);if(u===null)return null;let d=new Map(i.fields.listStore.getState().map(e=>[e.key,e])),f=a(s.entryUrl??`${l.pathname}${l.search}`,l.origin);return r({...t(i.experiences.listStore.getState(),c.hiddenKeys),start:u,answers:{...s.responses,...c.responses},choices:s.choices,asked:c.asked,codeOwned:c.codeOwned,selfAdvancing:c.selfAdvancing,handoffs:c.handoffs,field:e=>d.get(e),evaluate:o(i,f),readsOf:n})}function c(e,t){let n=t?.stepKey==null?e.landing:t;return e.rows.flatMap(e=>e.kind===`screen`?[{experienceKey:e.experienceKey,experienceName:e.experienceName,stepKey:e.stepKey,stepName:e.stepName,isStop:n?.experienceKey===e.experienceKey&&n.stepKey===e.stepKey}]:[])}export{a as entryLocation,s as personaRoute,c as routeScreens,o as ruleEvaluator};

package/dist/plugins/devtools/review/personas/persona-session.d.ts

@@ -0,0 +1,94 @@
+/**
+ * @file A persona session: the tab walks through the experience as one persona. Every field a
+ * screen asks shows the persona's response as its default, flagged `prefilled`, so the reviewer
+ * moves on with Continue or changes a value as a visitor would. Nothing is committed for them.
+ *
+ * The session lasts for the tab, in `sessionStorage`, so a reload keeps it, until the reviewer
+ * stops it. A shared link starts one with the `picked-persona` query parameter.
+ */
+import type { FieldValue } from '@picked/client';
+/** The `sessionStorage` key that names the persona a tab walks through as. */
+export declare const ACTIVE_PERSONA_KEY = "picked-devtools-persona-session";
+/** The query parameter a shared link names a persona with. */
+export declare const PERSONA_LINK_PARAM = "picked-persona";
+/**
+ * The persona this tab walks through as.
+ *
+ * @param {Pick<Storage, 'getItem'>} storage - The tab's `sessionStorage`.
+ * @returns {string | null} The persona's id, or `null` outside a persona session.
+ * @example readActivePersona(sessionStorage)
+ */
+export declare function readActivePersona(storage: Pick<Storage, 'getItem'>): string | null;
+/**
+ * Notes the persona this tab walks through as, or ends the session.
+ *
+ * @param {Pick<Storage, 'setItem' | 'removeItem'>} storage - The tab's `sessionStorage`.
+ * @param {string | null} id - The persona's id; `null` ends the session.
+ * @example writeActivePersona(sessionStorage, null)
+ */
+export declare function writeActivePersona(storage: Pick<Storage, 'setItem' | 'removeItem'>, id: string | null): void;
+/**
+ * The link that starts a walk-through as a site persona on its entry page.
+ *
+ * @param {{ origin: string; pathname: string; search: string }} here - This page's address.
+ * @param {string} here.origin - Its origin.
+ * @param {string} here.pathname - Its path.
+ * @param {string} here.search - Its query.
+ * @param {string | null} entryUrl - The persona's entry page.
+ * @param {string} id - The persona's id.
+ * @returns {string} The full URL.
+ * @example personaLink(window.location, '/sale', 'mover') // 'https://shop.example/sale?picked-persona=mover'
+ */
+export declare function personaLink(here: {
+    origin: string;
+    pathname: string;
+    search: string;
+}, entryUrl: string | null, id: string): string;
+/**
+ * Takes the persona a shared link names off the address bar, so a reload does not start it again.
+ *
+ * @param {{ href: string }} location - The page's location.
+ * @param {string} location.href - Its URL.
+ * @param {(url: string) => void} replace - Replaces the address without a reload.
+ * @returns {string | null} The persona's id, or `null` when the page was not opened from a link.
+ * @example takePersonaLink(window.location, (url) => history.replaceState(history.state, '', url))
+ */
+export declare function takePersonaLink(location: {
+    href: string;
+}, replace: (url: string) => void): string | null;
+/** A field as a walk-through reads and pre-fills it. */
+export interface PrefillField {
+    key: string;
+    defaultValue?: FieldValue;
+    prefilled?: boolean;
+}
+/** A store a walk-through reads, and hears change. */
+export interface ReadableStore<T> {
+    getState: () => T;
+    watch: (watcher: (state: T) => unknown) => () => void;
+}
+/** The part of the client a walk-through pre-fills. */
+export interface PrefillClient {
+    fields: {
+        listStore: ReadableStore<readonly PrefillField[]>;
+        update: (key: string, updates: {
+            defaultValue?: FieldValue;
+            prefilled?: boolean;
+        }) => void;
+    };
+}
+/** A running pre-fill. */
+export interface Prefill {
+    /** Puts back each field's own default and stops pre-filling. */
+    stop: () => void;
+}
+/**
+ * Pre-fills every field a screen asks with the persona's response, now and as fields arrive.
+ *
+ * @param {PrefillClient} client - The client.
+ * @param {Readonly<Record<string, FieldValue>>} answers - The persona's responses.
+ * @param {ReadableStore<ReadonlySet<string>>} asked - The keys the experiences' screens ask.
+ * @returns {Prefill} Stops the pre-fill.
+ * @example const prefill = prefillPersona(client, persona.responses, session.askedStore)
+ */
+export declare function prefillPersona(client: PrefillClient, answers: Readonly<Record<string, FieldValue>>, asked: ReadableStore<ReadonlySet<string>>): Prefill;

package/dist/plugins/devtools/review/personas/persona-session.js

@@ -0,0 +1 @@
+import{loadUrl as e}from"./load-persona.js";var t=`picked-devtools-persona-session`,n=`picked-persona`;function r(e){try{let n=e.getItem(t);return n!==null&&n.length>0?n:null}catch{return null}}function i(e,n){try{n===null?e.removeItem(t):e.setItem(t,n)}catch{}}function a(t,r,i){let a=new URL(e(r,t),t.origin);return a.searchParams.set(n,i),a.toString()}function o(e,t){let r=new URL(e.href),i=r.searchParams.get(n);return i===null||i.length===0?null:(r.searchParams.delete(n),t(r.toString()),i)}function s(e,t,n){let r=new Map,i=()=>{let i=n.getState();for(let n of e.fields.listStore.getState())n.prefilled!==!0&&i.has(n.key)&&Object.hasOwn(t,n.key)&&(r.has(n.key)||r.set(n.key,{defaultValue:n.defaultValue,prefilled:n.prefilled}),e.fields.update(n.key,{defaultValue:t[n.key],prefilled:!0}))},a=[e.fields.listStore.watch(i),n.watch(i)];return{stop:()=>{for(let e of a)e();for(let[t,n]of r)e.fields.update(t,n);r.clear()}}}export{t as ACTIVE_PERSONA_KEY,n as PERSONA_LINK_PARAM,a as personaLink,s as prefillPersona,r as readActivePersona,o as takePersonaLink,i as writeActivePersona};

package/dist/plugins/devtools/review/session/SessionPanel.svelte

@@ -16,7 +16,7 @@
     journey: JourneyView | null
     /** Every screen submitted since the session record started, oldest first. */
     history: readonly HistoryEntry[]
-    /** Opens the Answers tab, so the answer summary leads somewhere it can be acted on. */
+    /** Opens the Responses tab, so the response summary leads somewhere it can be acted on. */
     onShowAnswers: () => void
   }
 
@@ -65,18 +65,18 @@
       {#if journey === null}
         <Text size="medium">Nothing is open yet.</Text>
         <Text size="small" color="subdued">
-          Start a journey on the page, and this will follow you.
+          Start an experience on the page, and this will follow you.
         </Text>
       {:else}
         <Stack direction="vertical" gap="none">
-          <Text size="large" weight="semibold">{journey.stepName ?? 'Moving between screens'}</Text>
+          <Text size="large" weight="semibold">{journey.stepName ?? 'Moving between steps'}</Text>
           <Text size="small" color="subdued">in {journey.experienceName}</Text>
         </Stack>
         {#if journey.inTransit}
           <!-- The engine is transiting a condition or action node, so the recorded step is the one
                just LEFT. Saying so stops a "stuck on loading" report being filed against it. -->
           <Text size="small" color="subdued">
-            Still working — the next screen has not settled yet.
+            Still working — the next step has not settled yet.
           </Text>
         {/if}
       {/if}
@@ -111,24 +111,24 @@
   <Card>
     <Stack direction="vertical" gap="small">
       <Stack direction="horizontal" gap="small" align="space-between" justify="center">
-        <Text size="caption" color="subdued" weight="semibold">WHAT YOU ANSWERED</Text>
+        <Text size="caption" color="subdued" weight="semibold">YOUR RESPONSES</Text>
         {#if rows.length > 0}
-          <Button variant="ghost" size="small" onclick={onShowAnswers}>Change an answer</Button>
+          <Button variant="ghost" size="small" onclick={onShowAnswers}>Change a response</Button>
         {/if}
       </Stack>
 
       {#if rows.length === 0}
         <EmptyState
-          message="Nothing answered yet"
-          hint="Each screen you answer is listed here, in order. Answers from before this page loaded are on the Answers tab."
+          message="No responses yet"
+          hint="Each step you submit is listed here, in order. Responses from before this page loaded are on the Responses tab."
         />
       {:else}
         <table class="history" data-testid="devtools-session-answers">
           <thead>
             <tr>
-              <th scope="col">Screen</th>
-              <th scope="col">Question</th>
-              <th scope="col">Answer</th>
+              <th scope="col">Step</th>
+              <th scope="col">Field</th>
+              <th scope="col">Response</th>
             </tr>
           </thead>
           <tbody>

package/dist/plugins/devtools/review/variations/VariationsPanel.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
   /**
-   * @file The Variations tab: features as named variations, aimed at someone deciding whether a
-   * variation looks right rather than someone debugging bucketing.
+   * @file The Feature flags tab: each feature flag by name, aimed at someone deciding whether a
+   * variant looks right.
    *
    * The mechanism is the SDK's: `?picked-feature=<id>:<value>` forces an arm on the next page load.
-   * What changes is the framing — a variation is NAMED, its arms are radio buttons rather than an
-   * include checkbox plus a value dropdown, and the payoff is a link the reviewer can send to
-   * someone else so both people look at the same thing.
+   * A feature flag is NAMED, its variants are radio buttons, and the payoff is a link the reviewer
+   * can send to someone else so both people look at the same thing.
    */
   import type { FeatureBucket, Picked } from '@picked/client'
   import { Badge, Button, Card, CodeBlock, CopyButton, EmptyState, Stack, Text } from '../../ui'
@@ -158,8 +157,8 @@
 <Stack direction="vertical" gap="medium">
   {#if $features.length === 0}
     <EmptyState
-      message="No variations are running on this site"
-      hint="When an A/B test or a switched-on feature is published, it appears here and you can force either version."
+      message="No feature flags are running on this site"
+      hint="When a feature flag is published, it appears here and you can force any of its variants."
     />
   {:else}
     <Card sectioned>
@@ -174,13 +173,13 @@
                 <Badge status="default" size="small">Now: {armLabel(feature, served)}</Badge>
               {:else}
                 <Button variant="ghost" size="small" onclick={() => resolveBucket(feature)}>
-                  Check which version
+                  Check which variant
                 </Button>
               {/if}
             </div>
 
             {#if arms}
-              <div class="arms" role="group" aria-label="Version of {feature.name}">
+              <div class="arms" role="group" aria-label="Variant of {feature.name}">
                 {#each arms as arm, index (index)}
                   <label class="option-label">
                     <input
@@ -198,8 +197,8 @@
                 class="inline-input"
                 type="text"
                 value={chosen[feature.id] ?? ''}
-                placeholder="Type the version to force"
-                aria-label="Version of {feature.name}"
+                placeholder="Type the variant to force"
+                aria-label="Variant of {feature.name}"
                 oninput={(event) => choose(feature.id, event.currentTarget.value)}
               />
             {/if}
@@ -221,14 +220,14 @@
       <Stack direction="vertical" gap="small">
         {#if chosenCount === 0}
           <Text size="small" color="subdued">
-            Pick a version above. The page reloads showing it, and the link below reproduces exactly
+            Pick a variant above. The page reloads showing it, and the link below reproduces exactly
             what you saw for anyone you send it to.
           </Text>
         {:else}
           <CodeBlock code={shareUrl} />
           <Stack direction="horizontal" gap="small">
             <Button variant="primary" size="small" onclick={apply} testId="devtools-variations-apply">
-              Show me this version
+              Show me this variant
             </Button>
             <CopyButton
               text={shareUrl}

package/dist/plugins/devtools/screens/custom-tools/CustomToolsScreen.svelte

@@ -1,35 +1,21 @@
 <script lang="ts">
   /**
-   * @file The Custom Tools tab: every custom tool placed neither `'review'` nor `'footer'`, as
-   * nested tabs. With none, it says what a custom tool is and links the how-to page.
+   * @file The Custom Tools page, listed while no tool sits in that group: it says what a custom
+   * tool is and links the how-to page.
    */
   import { getPicked } from '../../../../hooks'
-  import AdaptedToolHost from '../../components/AdaptedToolHost.svelte'
-  import Tabs from '../../components/Tabs.svelte'
-  import { developerTools, readCustomTools } from '../../customTools'
   import { Button, EmptyState, Stack } from '../../ui'
 
   const client = getPicked()
   const docsUrl = `${client.documentationSiteUrl}/how-to/add-a-tool-to-the-devtools`
-  const tools = developerTools(readCustomTools(client))
-  const tabs = tools.map((tool) => ({
-    id: tool.id,
-    label: tool.label,
-    component: AdaptedToolHost,
-    props: { tool },
-  }))
 </script>
 
-{#if tabs.length > 0}
-  <Tabs {tabs} />
-{:else}
-  <Stack direction="vertical" gap="medium" padding="medium" justify="center">
-    <EmptyState
-      message="No custom tools yet"
-      hint="A developer can add tools for this site here, such as test customers or a way to request a change."
-    />
-    <Button variant="secondary" size="small" href={docsUrl} target="_blank">
-      How to add a custom tool
-    </Button>
-  </Stack>
-{/if}
+<Stack direction="vertical" gap="medium" padding="medium" justify="center">
+  <EmptyState
+    message="No custom tools yet"
+    hint="A developer can add tools for this site here, such as test accounts or a way to request a change."
+  />
+  <Button variant="secondary" size="small" href={docsUrl} target="_blank">
+    How to add a custom tool
+  </Button>
+</Stack>

package/dist/plugins/devtools/sidebar/Sidebar.svelte

@@ -2,11 +2,9 @@
   @paired-component apps/dashboard/src/shared/ui/navigation/sidebar-row-classes.ts
   @design-parity A row mirrors the Dashboard sidebar row: 28px high, text-sm, rounded-md, a 10%
   current-colour fill when selected and 5% on hover, a label that fades out instead of wrapping.
-  The Developer row mirrors the Dashboard's folding nav group (sidebar-nav-group.tsx).
 -->
 <script lang="ts">
-  /** @file The devtools sidebar: the main tabs, then the folding Developer group. */
-  import { DEVELOPER_LABEL } from '../derive/plain-language'
+  /** @file The devtools sidebar: one row per tab. */
   import type { NavModel } from './nav'
   import { nextFocusIndex } from './nav'
   import SidebarRow from './SidebarRow.svelte'
@@ -15,13 +13,10 @@
     nav: NavModel
     /** The selected tab's id. */
     selected: string
-    /** Whether the Developer group lists its screens. */
-    developerOpen: boolean
     onSelect: (id: string) => void
-    onToggleDeveloper: () => void
   }
 
-  const { nav, selected, developerOpen, onSelect, onToggleDeveloper }: Props = $props()
+  const { nav, selected, onSelect }: Props = $props()
 
   let list: HTMLElement | undefined = $state()
 
@@ -52,30 +47,10 @@
       <SidebarRow
         label={item.label}
         testId="devtools-nav-{item.id}"
-        depth={0}
         selected={selected === item.id}
         onPress={() => onSelect(item.id)}
       />
     {/each}
-    <li class="divider" role="presentation"></li>
-    <SidebarRow
-      label={DEVELOPER_LABEL}
-      testId="devtools-nav-developer"
-      depth={0}
-      expanded={developerOpen}
-      onPress={onToggleDeveloper}
-    />
-    {#if developerOpen}
-      {#each nav.developer as item (item.id)}
-        <SidebarRow
-          label={item.label}
-          testId="devtools-nav-{item.id}"
-          depth={2}
-          selected={selected === item.id}
-          onPress={() => onSelect(item.id)}
-        />
-      {/each}
-    {/if}
   </ul>
 </nav>
 
@@ -96,10 +71,4 @@
     flex-direction: column;
     gap: 1px;
   }
-
-  .divider {
-    height: 1px;
-    margin: var(--space-2) 0;
-    background-color: var(--color-gray-200);
-  }
 </style>

package/dist/plugins/devtools/sidebar/SidebarRow.svelte

@@ -1,45 +1,27 @@
 <script lang="ts">
-  /** @file One row of the devtools sidebar: a tab, or the disclosure that folds the Developer group. */
+  /** @file One row of the devtools sidebar: a tab. */
 
   interface Props {
     label: string
     testId: string
-    /** Indent depth: 0 for a top-level row, 2 for a screen inside the Developer group. */
-    depth: 0 | 2
     onPress: () => void
-    /** A tab row: whether it is the selected tab. */
+    /** Whether it is the selected tab. */
     selected?: boolean
-    /** A disclosure row: whether its group is open. Renders the chevron. */
-    expanded?: boolean
   }
 
-  const { label, testId, depth, onPress, selected = false, expanded }: Props = $props()
+  const { label, testId, onPress, selected = false }: Props = $props()
 </script>
 
 <li>
   <button
     type="button"
-    class="row depth-{depth}"
+    class="row"
     class:active={selected}
     aria-current={selected ? 'page' : undefined}
-    aria-expanded={expanded}
     data-nav-row
     data-testid={testId}
     onclick={onPress}
   >
-    {#if expanded !== undefined}
-      <span class="icon" class:open={expanded} aria-hidden="true">
-        <svg width="12" height="12" viewBox="0 0 16 16" fill="none">
-          <path
-            d="M6 4l4 4-4 4"
-            stroke="currentColor"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-        </svg>
-      </span>
-    {/if}
     <span class="label">{label}</span>
   </button>
 </li>
@@ -66,10 +48,6 @@
       color 0.15s ease;
   }
 
-  .row.depth-2 {
-    padding-left: var(--space-5);
-  }
-
   .row:hover {
     color: var(--color-gray-900);
     background-color: color-mix(in srgb, currentColor 5%, transparent);
@@ -86,20 +64,6 @@
     outline-offset: -2px;
   }
 
-  .icon {
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    width: 16px;
-    height: 16px;
-    transition: transform 0.15s ease;
-  }
-
-  .icon.open {
-    transform: rotate(90deg);
-  }
-
   .label {
     flex: 1;
     min-width: 0;
@@ -109,8 +73,7 @@
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .row,
-    .icon {
+    .row {
       transition: none;
     }
   }

package/dist/plugins/devtools/sidebar/nav.d.ts

@@ -2,10 +2,10 @@
 import type { CustomToolIcon } from '../customTools';
 import type { StorageGetter } from '../launcher/launcher';
 /**
- * What a sidebar entry opens: a review tab, a review- or footer-placed custom tool, the Custom Tools
- * tab, or a developer screen.
+ * What a sidebar entry opens: a review tab, a custom tool, the Custom Tools page listed while no
+ * unplaced tool is registered, or one of the SDK's own screens.
  */
-export type NavKind = 'review' | 'tool' | 'custom-tools' | 'developer';
+export type NavKind = 'review' | 'tool' | 'custom-tools' | 'screen';
 /** One entry of the sidebar: a row, or an icon at its foot. */
 export interface NavItem {
     /** Unique across the whole sidebar. */
@@ -15,27 +15,29 @@ export interface NavItem {
     /** The glyph of an icon at the sidebar's foot. */
     icon?: CustomToolIcon;
 }
-/** The sidebar's entries: the top-level tabs, the Developer group's screens, and the foot's icons. */
+/** The sidebar's entries: its rows, and the icons at its foot. */
 export interface NavModel {
     primary: readonly NavItem[];
-    developer: readonly NavItem[];
     footer: readonly NavItem[];
 }
 /** `sessionStorage` key holding the selected tab's id. */
 export declare const TAB_STORAGE_KEY = "picked-devtools-tab";
-/** `sessionStorage` key holding `'true'` while the Developer group is open. */
-export declare const DEVELOPER_OPEN_STORAGE_KEY = "picked-devtools-developer-open";
+/** The label of the Custom Tools row. */
+export declare const CUSTOM_TOOLS_LABEL = "Custom Tools";
 /** The tab a first open lands on, and where a vanished tab falls back to. */
 export declare const DEFAULT_TAB = "guide";
-/** The id of the Custom Tools tab, which holds every tool placed neither `'review'` nor `'footer'`. */
+/** The id of the Custom Tools row, listed while no unplaced tool is registered; it links the how-to page. */
 export declare const CUSTOM_TOOLS_TAB = "custom-tools";
-/** The developer screens, in the order the Developer group lists them. */
-export declare const DEVELOPER_SCREENS: readonly {
+/**
+ * The SDK's own screens, in the order the sidebar lists them after the review tabs and the site's
+ * tools. Experiences, Feature flags and Responses are review tabs, so they are not here.
+ */
+export declare const SCREENS: readonly {
     id: string;
     label: string;
 }[];
 /**
- * The sidebar id of a review- or footer-placed custom tool.
+ * The sidebar id of a custom tool.
  *
  * @param {string} toolId - The tool's registered id.
  * @returns {string} Its tab id, prefixed so it never collides with a review tab.
@@ -43,22 +45,27 @@ export declare const DEVELOPER_SCREENS: readonly {
  */
 export declare function toolTabId(toolId: string): string;
 /**
- * The sidebar id of a developer screen.
+ * The sidebar id of one of the SDK's own screens.
  *
- * @param {string} screenId - The screen's id in {@link DEVELOPER_SCREENS}.
+ * @param {string} screenId - The screen's id in {@link SCREENS}.
  * @returns {string} Its tab id, prefixed so it never collides with a review tab.
- * @example developerTabId('responses') // 'dev:responses'
+ * @example screenTabId('events') // 'screen:events'
  */
-export declare function developerTabId(screenId: string): string;
+export declare function screenTabId(screenId: string): string;
 /** What decides the sidebar's rows. */
 export interface NavInput {
-    /** Whether the workspace publishes a feature, which lists Variations. */
+    /** Whether the workspace publishes a feature, which lists Feature flags. */
     variations: boolean;
     /** The review-placed custom tools, in registration order, each a tab of its own. */
     tools: readonly {
         id: string;
         label: string;
     }[];
+    /** The unplaced custom tools, in registration order, each a top-level row after the review tools. */
+    customTools: readonly {
+        id: string;
+        label: string;
+    }[];
     /** The footer-placed custom tools, in registration order, each an icon at the sidebar's foot. */
     footerTools: readonly {
         id: string;
@@ -67,11 +74,11 @@ export interface NavInput {
     }[];
 }
 /**
- * Builds the sidebar's entries.
+ * Builds the sidebar's entries: the review tabs, the site's tools, then the SDK's own screens.
  *
  * @param {NavInput} input - What this session lists.
- * @returns {NavModel} The top-level tabs, the Developer group's screens and the foot's icons.
- * @example buildNav({ variations: true, tools: [], footerTools: [] })
+ * @returns {NavModel} The rows and the foot's icons.
+ * @example buildNav({ variations: true, tools: [], customTools: [], footerTools: [] })
  */
 export declare function buildNav(input: NavInput): NavModel;
 /**
@@ -83,15 +90,6 @@ export declare function buildNav(input: NavInput): NavModel;
  * @example resolveTab('journey', nav) // 'journey'
  */
 export declare function resolveTab(stored: string | null, nav: NavModel): string;
-/**
- * Whether a tab sits inside the Developer group.
- *
- * @param {string} tab - A tab id.
- * @param {NavModel} nav - The sidebar's rows.
- * @returns {boolean} `true` for a developer screen.
- * @example isInDeveloper('dev:events', nav) // true
- */
-export declare function isInDeveloper(tab: string, nav: NavModel): boolean;
 /**
  * Where a key moves focus among the sidebar's visible rows.
  *