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

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,29 +1,21 @@
 <script lang="ts">
-  /** @file The Custom Tools tab: every custom tool not placed `'review'`, as nested tabs. */
+  /**
+   * @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}/chrome-extension#custom-tools`
-  const tools = developerTools(readCustomTools(client))
-  const tabs = tools.map((tool) => ({
-    id: tool.id,
-    label: tool.label,
-    component: AdaptedToolHost,
-    props: { tool },
-  }))
+  const docsUrl = `${client.documentationSiteUrl}/how-to/add-a-tool-to-the-devtools`
 </script>
 
-{#if tabs.length > 0}
-  <Tabs {tabs} />
-{:else}
-  <Stack direction="vertical" gap="medium" padding="medium" justify="center">
-    <EmptyState message="No custom tools registered." />
-    <Button variant="ghost" size="small" href={docsUrl} target="_blank">
-      Learn how to add custom tools
-    </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/screens/experiences/ExperienceDetailsScreen.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  /** @file Detail screen for a single experience, showing its config, target selectors, and decision logic. */
+  /** @file Detail screen for a single experience, showing its config, target selectors, and condition. */
   import type { ExperienceStore } from '@picked/client'
   import { getPicked } from '../../../../hooks'
   import { Button, Card, Text, CodeBlock, Stack } from '../../ui'
@@ -36,7 +36,7 @@
       </div>
 
       <div>
-        <Text weight="semibold">Decision logic</Text>
+        <Text weight="semibold">Condition</Text>
         <CodeBlock code={JSON.stringify($config.decisionLogic, null, 2)} />
       </div>
     </Stack>

package/dist/plugins/devtools/screens/features/FeaturesListScreen.svelte

@@ -132,7 +132,7 @@
 
   const columns = [
     { key: 'include', header: 'Include' },
-    { key: 'feature', header: 'Feature' },
+    { key: 'feature', header: 'Feature flag' },
     { key: 'currentValue', header: 'Current Value' },
     { key: 'overrideValue', header: 'Override Value' },
   ]
@@ -140,8 +140,8 @@
 
 <Stack direction="vertical" gap="medium" padding="medium">
   <Text size="caption" color="subdued">
-    Override feature flags via URL parameters. Select features below, choose values, then copy the
-    generated URL. Recipients will see the overridden values on page load.
+    Override feature flags via URL parameters. Select feature flags below, choose values, then copy
+    the generated URL. Recipients will see the overridden values on page load.
   </Text>
 
   <Card sectioned>

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

@@ -2,13 +2,16 @@
   @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).
+  The Custom Tools and Developer rows mirror 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. */
+  /**
+   * @file The devtools sidebar: the main tabs, the folding Custom Tools group, then the folding
+   * Developer group.
+   */
   import { DEVELOPER_LABEL } from '../derive/plain-language'
   import type { NavModel } from './nav'
-  import { nextFocusIndex } from './nav'
+  import { CUSTOM_TOOLS_GROUP, CUSTOM_TOOLS_LABEL, nextFocusIndex } from './nav'
   import SidebarRow from './SidebarRow.svelte'
 
   interface Props {
@@ -17,11 +20,22 @@
     selected: string
     /** Whether the Developer group lists its screens. */
     developerOpen: boolean
+    /** Whether the Custom Tools group lists its tools. */
+    customOpen: boolean
     onSelect: (id: string) => void
     onToggleDeveloper: () => void
+    onToggleCustom: () => void
   }
 
-  const { nav, selected, developerOpen, onSelect, onToggleDeveloper }: Props = $props()
+  const {
+    nav,
+    selected,
+    developerOpen,
+    customOpen,
+    onSelect,
+    onToggleDeveloper,
+    onToggleCustom,
+  }: Props = $props()
 
   let list: HTMLElement | undefined = $state()
 
@@ -57,6 +71,26 @@
         onPress={() => onSelect(item.id)}
       />
     {/each}
+    {#if nav.custom.length > 0}
+      <SidebarRow
+        label={CUSTOM_TOOLS_LABEL}
+        testId="devtools-nav-{CUSTOM_TOOLS_GROUP}"
+        depth={0}
+        expanded={customOpen}
+        onPress={onToggleCustom}
+      />
+      {#if customOpen}
+        {#each nav.custom 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}
+    {/if}
     <li class="divider" role="presentation"></li>
     <SidebarRow
       label={DEVELOPER_LABEL}

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

@@ -2,8 +2,8 @@
 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 shown while no tool
+ * sits in that group, or a developer screen.
  */
 export type NavKind = 'review' | 'tool' | 'custom-tools' | 'developer';
 /** One entry of the sidebar: a row, or an icon at its foot. */
@@ -15,9 +15,13 @@ 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: the top-level tabs, the Custom Tools group's tools, the Developer group's
+ * screens, and the foot's icons.
+ */
 export interface NavModel {
     primary: readonly NavItem[];
+    custom: readonly NavItem[];
     developer: readonly NavItem[];
     footer: readonly NavItem[];
 }
@@ -25,17 +29,23 @@ export interface NavModel {
 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";
+/** `sessionStorage` key holding `'false'` while the Custom Tools group is folded. */
+export declare const CUSTOM_TOOLS_OPEN_STORAGE_KEY = "picked-devtools-custom-tools-open";
+/** The label of the Custom Tools row and group. */
+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 tool sits in that group; it links the how-to page. */
 export declare const CUSTOM_TOOLS_TAB = "custom-tools";
+/** The id of the row that folds the Custom Tools group. */
+export declare const CUSTOM_TOOLS_GROUP = "custom-tools-group";
 /** The developer screens, in the order the Developer group lists them. */
 export declare const DEVELOPER_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.
@@ -52,15 +62,18 @@ export declare function toolTabId(toolId: string): string;
 export declare function developerTabId(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;
     }[];
-    /** Whether any tool sits in the Custom Tools tab, which lists it. */
-    customTools: boolean;
+    /** The unplaced custom tools, in registration order, each a row of the Custom Tools group. */
+    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;
@@ -72,8 +85,8 @@ export interface NavInput {
  * Builds the sidebar's entries.
  *
  * @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: [], customTools: false, footerTools: [] })
+ * @returns {NavModel} The top-level tabs, the Custom Tools and Developer groups' rows, and the foot's icons.
+ * @example buildNav({ variations: true, tools: [], customTools: [], footerTools: [] })
  */
 export declare function buildNav(input: NavInput): NavModel;
 /**
@@ -85,6 +98,15 @@ 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 Custom Tools group.
+ *
+ * @param {string} tab - A tab id.
+ * @param {NavModel} nav - The sidebar's rows.
+ * @returns {boolean} `true` for an unplaced custom tool.
+ * @example isInCustomTools('tool:simulator', nav) // true
+ */
+export declare function isInCustomTools(tab: string, nav: NavModel): boolean;
 /**
  * Whether a tab sits inside the Developer group.
  *

package/dist/plugins/devtools/sidebar/nav.js

@@ -1 +1 @@
-import{TAB_LABELS as e}from"../derive/plain-language/plain-language.js";var t=`picked-devtools-tab`,n=`picked-devtools-developer-open`,r=`guide`,i=`custom-tools`,a=[{id:`project`,label:`Project`},{id:`components`,label:`Components`},{id:`config`,label:`Config`},{id:`content`,label:`Content`},{id:`events`,label:`Events`},{id:`experience-instances`,label:`Experience Instances`},{id:`experiences`,label:`Experiences`},{id:`features`,label:`Features`},{id:`fields`,label:`Fields`},{id:`frameworks`,label:`Frameworks`},{id:`history`,label:`History`},{id:`identity`,label:`Identity`},{id:`predicates`,label:`Predicates`},{id:`responses`,label:`Responses`}];function o(e){return`tool:${e}`}function s(e){return`dev:${e}`}function c(t){let n=[{id:`guide`,label:e.guide,kind:`review`},{id:`session`,label:e.session,kind:`review`},{id:`answers`,label:e.answers,kind:`review`},{id:`journey`,label:e.journey,kind:`review`},{id:`personas`,label:e.personas,kind:`review`}];t.variations&&n.push({id:`variations`,label:e.variations,kind:`review`});let r=t.tools.map(e=>({id:o(e.id),label:e.label,kind:`tool`})),c=a.map(e=>({id:s(e.id),label:e.label,kind:`developer`})),l=t.customTools?[{id:i,label:`Custom Tools`,kind:`custom-tools`}]:[],u=t.footerTools.map(e=>({id:o(e.id),label:e.label,kind:`tool`,icon:e.icon??`wrench`}));return{primary:[...n,...r,...l],developer:c,footer:u}}function l(e,t){return e===null?r:[...t.primary,...t.developer,...t.footer].some(t=>t.id===e)?e:r}function u(e,t){return t.developer.some(t=>t.id===e)}function d(e,t,n){let r=Math.max(0,n-1);switch(e){case`ArrowDown`:return Math.min(t+1,r);case`ArrowUp`:return Math.max(t-1,0);case`Home`:return 0;case`End`:return r;default:return null}}function f(e,t){try{return e().getItem(t)}catch{return null}}function p(e,t,n){try{e().setItem(t,n)}catch{}}export{i as CUSTOM_TOOLS_TAB,r as DEFAULT_TAB,n as DEVELOPER_OPEN_STORAGE_KEY,a as DEVELOPER_SCREENS,t as TAB_STORAGE_KEY,c as buildNav,s as developerTabId,u as isInDeveloper,d as nextFocusIndex,f as readStored,l as resolveTab,o as toolTabId,p as writeStored};
+import{TAB_LABELS as e}from"../derive/plain-language/plain-language.js";var t=`picked-devtools-tab`,n=`picked-devtools-developer-open`,r=`picked-devtools-custom-tools-open`,i=`Custom Tools`,a=`guide`,o=`custom-tools`,s=`custom-tools-group`,c=[{id:`project`,label:`Project`},{id:`components`,label:`Components`},{id:`config`,label:`Config`},{id:`content`,label:`Content`},{id:`events`,label:`Events`},{id:`experience-instances`,label:`Experience Instances`},{id:`experiences`,label:`Experiences`},{id:`features`,label:`Feature flags`},{id:`fields`,label:`Fields`},{id:`frameworks`,label:`Frameworks`},{id:`history`,label:`History`},{id:`identity`,label:`Identity`},{id:`predicates`,label:`Predicates`},{id:`responses`,label:`Responses`}];function l(e){return`tool:${e}`}function u(e){return`dev:${e}`}function d(t){let n=[{id:`guide`,label:e.guide,kind:`review`},{id:`session`,label:e.session,kind:`review`},{id:`answers`,label:e.answers,kind:`review`},{id:`journey`,label:e.journey,kind:`review`},{id:`personas`,label:e.personas,kind:`review`}];t.variations&&n.push({id:`variations`,label:e.variations,kind:`review`});let r=e=>({id:l(e.id),label:e.label,kind:`tool`}),a=t.tools.map(r),s=t.customTools.map(r),d=c.map(e=>({id:u(e.id),label:e.label,kind:`developer`})),f=s.length===0?[{id:o,label:i,kind:`custom-tools`}]:[],p=t.footerTools.map(e=>({id:l(e.id),label:e.label,kind:`tool`,icon:e.icon??`wrench`}));return{primary:[...n,...a,...f],custom:s,developer:d,footer:p}}function f(e,t){return e===null?a:[...t.primary,...t.custom,...t.developer,...t.footer].some(t=>t.id===e)?e:a}function p(e,t){return t.custom.some(t=>t.id===e)}function m(e,t){return t.developer.some(t=>t.id===e)}function h(e,t,n){let r=Math.max(0,n-1);switch(e){case`ArrowDown`:return Math.min(t+1,r);case`ArrowUp`:return Math.max(t-1,0);case`Home`:return 0;case`End`:return r;default:return null}}function g(e,t){try{return e().getItem(t)}catch{return null}}function _(e,t,n){try{e().setItem(t,n)}catch{}}export{s as CUSTOM_TOOLS_GROUP,i as CUSTOM_TOOLS_LABEL,r as CUSTOM_TOOLS_OPEN_STORAGE_KEY,o as CUSTOM_TOOLS_TAB,a as DEFAULT_TAB,n as DEVELOPER_OPEN_STORAGE_KEY,c as DEVELOPER_SCREENS,t as TAB_STORAGE_KEY,d as buildNav,u as developerTabId,p as isInCustomTools,m as isInDeveloper,h as nextFocusIndex,g as readStored,f as resolveTab,l as toolTabId,_ as writeStored};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@picked/svelte",
-  "version": "0.0.1-dev.1793769511104",
+  "version": "0.0.1-dev.1793776638554",
   "dependencies": {
     "d3": "^7.9.0"
   },
@@ -113,7 +113,7 @@
   "license": "SEE LICENSE IN LICENSE",
   "module": "./dist/index.js",
   "peerDependencies": {
-    "@picked/client": "0.0.1-dev.1793769511104",
+    "@picked/client": "0.0.1-dev.1793776638554",
     "effector": "^23.4.4",
     "svelte": "^5.55.7"
   },