From aced492b400b613d40a752c41ac2d7b22cc6561c Mon Sep 17 00:00:00 2001
From: Thomas <thomas.whyyou@gmail.com>
Date: Fri, 27 Mar 2026 09:55:02 -0400
Subject: [PATCH 1/3] move the toolbar settings to GuideContextDetails

---
 .../Toolbar/V2/GuideContextDetails.tsx        | 197 +++++++++++-------
 .../guide/components/Toolbar/V2/V2.tsx        |  50 +----
 2 files changed, 125 insertions(+), 122 deletions(-)

diff --git a/packages/react/src/modules/guide/components/Toolbar/V2/GuideContextDetails.tsx b/packages/react/src/modules/guide/components/Toolbar/V2/GuideContextDetails.tsx
index d78633d81..b627ed1db 100644
--- a/packages/react/src/modules/guide/components/Toolbar/V2/GuideContextDetails.tsx
+++ b/packages/react/src/modules/guide/components/Toolbar/V2/GuideContextDetails.tsx
@@ -1,94 +1,143 @@
-import { useGuideContext } from "@knocklabs/react-core";
+import { useGuideContext, useStore } from "@knocklabs/react-core";
+import { Button } from "@telegraph/button";
 import { Box, Stack } from "@telegraph/layout";
 import { Tooltip } from "@telegraph/tooltip";
 import { Text } from "@telegraph/typography";
+import { Box as BoxIcon, Gauge } from "lucide-react";
 
 export const GuideContextDetails = () => {
   const { client } = useGuideContext();
+  const { debugSettings } = useStore(client.store, (state) => ({
+    debugSettings: state.debug || {},
+  }));
 
   return (
     <Box py="3" px="3">
-      <Tooltip
-        label={
-          <Text as="span" size="1">
-            The tenant and data payload passed to the guide client that are used
-            for targeting
-            <br />
-            (via the `targetParams` prop to `KnockGuideProvider`)
-          </Text>
-        }
-        delayDuration={500}
-      >
-        <Text
-          as="label"
-          size="1"
-          weight="medium"
-          borderBottom="px"
-          borderStyle="dashed"
-          style={{
-            whiteSpace: "nowrap",
-          }}
-        >
-          Target params
+      <Stack direction="column" gap="2" width="full">
+        <Text as="label" size="1" weight="medium" display="block">
+          Settings
         </Text>
-      </Tooltip>
-      <Stack direction="column" gap="2" mt="2">
-        <Stack direction="row" gap="2" align="center">
-          <Text
-            as="span"
-            size="1"
-            weight="medium"
-            color="gray"
-            width="36"
-            mt="1"
-          >
-            Tenant
-          </Text>
-          <Box
-            rounded="2"
-            overflow="auto"
-            backgroundColor="surface-2"
-            border="px"
-            p="1"
-            style={{ flex: 1, minWidth: 0 }}
-          >
-            <pre style={{ fontSize: "11px", margin: 0 }}>
-              <code>{client.targetParams.tenant || "-"}</code>
-            </pre>
-          </Box>
+        <Stack direction="row" gap="2">
+          <Tooltip label="Sandbox: Contain engagement actions to client side only">
+            <Button
+              size="1"
+              variant={
+                debugSettings.skipEngagementTracking ? "outline" : "ghost"
+              }
+              color={debugSettings.skipEngagementTracking ? "blue" : "gray"}
+              icon={{ icon: BoxIcon, alt: "Sandbox mode" }}
+              onClick={() => {
+                client.setDebug({
+                  ...debugSettings,
+                  skipEngagementTracking: !debugSettings.skipEngagementTracking,
+                });
+              }}
+            />
+          </Tooltip>
+
+          <Tooltip label="Ignore throttle: Show next guide immediately">
+            <Button
+              size="1"
+              variant={
+                debugSettings.ignoreDisplayInterval ? "outline" : "ghost"
+              }
+              color={debugSettings.ignoreDisplayInterval ? "blue" : "gray"}
+              icon={{ icon: Gauge, alt: "Ignore throttle" }}
+              onClick={() => {
+                client.setDebug({
+                  ...debugSettings,
+                  ignoreDisplayInterval: !debugSettings.ignoreDisplayInterval,
+                });
+              }}
+            />
+          </Tooltip>
         </Stack>
-        <Stack direction="row" gap="2" align="flex-start">
+      </Stack>
+      <Stack direction="column" gap="2" width="full">
+        <Tooltip
+          label={
+            <Text as="span" size="1">
+              The tenant and data payload passed to the guide client that are
+              used for targeting
+              <br />
+              (via the `targetParams` prop to `KnockGuideProvider`)
+            </Text>
+          }
+          delayDuration={500}
+        >
           <Text
-            as="span"
+            as="label"
             size="1"
             weight="medium"
-            color="gray"
-            width="36"
-            mt="1"
-          >
-            Data
-          </Text>
-          <Box
-            rounded="2"
-            overflow="auto"
-            backgroundColor="surface-2"
-            border="px"
-            p="1"
+            borderBottom="px"
+            borderStyle="dashed"
+            mt="4"
             style={{
-              flex: 1,
-              minWidth: 0,
-              minHeight: "50px",
-              maxHeight: "200px",
+              whiteSpace: "nowrap",
+              width: "fit-content",
             }}
           >
-            <pre style={{ fontSize: "11px", margin: 0 }}>
-              <code>
-                {client.targetParams.data
-                  ? JSON.stringify(client.targetParams.data, null, 2)
-                  : "-"}
-              </code>
-            </pre>
-          </Box>
+            Target params
+          </Text>
+        </Tooltip>
+        <Stack direction="column" gap="2">
+          <Stack direction="row" gap="2" align="center">
+            <Text
+              as="span"
+              size="1"
+              weight="medium"
+              color="gray"
+              width="36"
+              mt="1"
+            >
+              Tenant
+            </Text>
+            <Box
+              rounded="2"
+              overflow="auto"
+              backgroundColor="surface-2"
+              border="px"
+              p="1"
+              style={{ flex: 1, minWidth: 0 }}
+            >
+              <pre style={{ fontSize: "11px", margin: 0 }}>
+                <code>{client.targetParams.tenant || "-"}</code>
+              </pre>
+            </Box>
+          </Stack>
+          <Stack direction="row" gap="2" align="flex-start">
+            <Text
+              as="span"
+              size="1"
+              weight="medium"
+              color="gray"
+              width="36"
+              mt="1"
+            >
+              Data
+            </Text>
+            <Box
+              rounded="2"
+              overflow="auto"
+              backgroundColor="surface-2"
+              border="px"
+              p="1"
+              style={{
+                flex: 1,
+                minWidth: 0,
+                minHeight: "50px",
+                maxHeight: "200px",
+              }}
+            >
+              <pre style={{ fontSize: "11px", margin: 0 }}>
+                <code>
+                  {client.targetParams.data
+                    ? JSON.stringify(client.targetParams.data, null, 2)
+                    : "-"}
+                </code>
+              </pre>
+            </Box>
+          </Stack>
         </Stack>
       </Stack>
     </Box>
diff --git a/packages/react/src/modules/guide/components/Toolbar/V2/V2.tsx b/packages/react/src/modules/guide/components/Toolbar/V2/V2.tsx
index 2f97e0844..ecfac67a5 100644
--- a/packages/react/src/modules/guide/components/Toolbar/V2/V2.tsx
+++ b/packages/react/src/modules/guide/components/Toolbar/V2/V2.tsx
@@ -1,4 +1,4 @@
-import { useGuideContext, useStore } from "@knocklabs/react-core";
+import { useGuideContext } from "@knocklabs/react-core";
 import { Button } from "@telegraph/button";
 import { Icon } from "@telegraph/icon";
 import { Box, Stack } from "@telegraph/layout";
@@ -6,10 +6,8 @@ import { SegmentedControl } from "@telegraph/segmented-control";
 import { Tooltip } from "@telegraph/tooltip";
 import { Text } from "@telegraph/typography";
 import {
-  Box as BoxIcon,
   ChevronDown,
   ChevronRight,
-  Gauge,
   GripVertical,
   LogOut,
   Minimize2,
@@ -100,10 +98,6 @@ export const V2 = () => {
   const [isCollapsed, setIsCollapsed] = React.useState(false);
   const [isContextPanelOpen, setIsContextPanelOpen] = React.useState(false);
 
-  const { debugSettings } = useStore(client.store, (state) => ({
-    debugSettings: state.debug || {},
-  }));
-
   React.useEffect(() => {
     const { isVisible = false, focusedGuideKeys = {} } = runConfig || {};
     const isDebugging = client.store.state.debug?.debugging;
@@ -287,47 +281,7 @@ export const V2 = () => {
                   </SegmentedControl.Option>
                 </SegmentedControl.Root>
 
-                <Tooltip label="Sandbox: Contain engagement actions to client side only">
-                  <Button
-                    size="1"
-                    variant={
-                      debugSettings.skipEngagementTracking ? "outline" : "ghost"
-                    }
-                    color={
-                      debugSettings.skipEngagementTracking ? "blue" : "gray"
-                    }
-                    icon={{ icon: BoxIcon, alt: "Sandbox mode" }}
-                    onClick={() => {
-                      client.setDebug({
-                        ...debugSettings,
-                        skipEngagementTracking:
-                          !debugSettings.skipEngagementTracking,
-                      });
-                    }}
-                  />
-                </Tooltip>
-
-                <Tooltip label="Ignore throttle: Show next guide immediately">
-                  <Button
-                    size="1"
-                    variant={
-                      debugSettings.ignoreDisplayInterval ? "outline" : "ghost"
-                    }
-                    color={
-                      debugSettings.ignoreDisplayInterval ? "blue" : "gray"
-                    }
-                    icon={{ icon: Gauge, alt: "Ignore throttle" }}
-                    onClick={() => {
-                      client.setDebug({
-                        ...debugSettings,
-                        ignoreDisplayInterval:
-                          !debugSettings.ignoreDisplayInterval,
-                      });
-                    }}
-                  />
-                </Tooltip>
-
-                <Tooltip label="Inspect target params">
+                <Tooltip label="Settings & target params">
                   <Button
                     size="1"
                     variant={isContextPanelOpen ? "outline" : "ghost"}

From 2a55b0dc0a4ea8ac7e567cfb9c7c385202e561ff Mon Sep 17 00:00:00 2001
From: Thomas <thomas.whyyou@gmail.com>
Date: Fri, 27 Mar 2026 10:35:07 -0400
Subject: [PATCH 2/3] switch button to toggle for settings ui

---
 packages/react/package.json                   |  1 +
 .../Toolbar/V2/GuideContextDetails.tsx        | 66 ++++++++++++-------
 yarn.lock                                     | 21 ++++++
 3 files changed, 63 insertions(+), 25 deletions(-)

diff --git a/packages/react/package.json b/packages/react/package.json
index 50d856f18..e0652e9fa 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -84,6 +84,7 @@
     "@telegraph/segmented-control": "^0.2.2",
     "@telegraph/select": "^0.0.86",
     "@telegraph/tag": "^0.1.4",
+    "@telegraph/toggle": "0.1.1",
     "@telegraph/tokens": "^0.1.4",
     "@telegraph/tooltip": "0.1.3",
     "@telegraph/typography": "^0.2.1",
diff --git a/packages/react/src/modules/guide/components/Toolbar/V2/GuideContextDetails.tsx b/packages/react/src/modules/guide/components/Toolbar/V2/GuideContextDetails.tsx
index b627ed1db..b363cbe2d 100644
--- a/packages/react/src/modules/guide/components/Toolbar/V2/GuideContextDetails.tsx
+++ b/packages/react/src/modules/guide/components/Toolbar/V2/GuideContextDetails.tsx
@@ -1,9 +1,8 @@
 import { useGuideContext, useStore } from "@knocklabs/react-core";
-import { Button } from "@telegraph/button";
 import { Box, Stack } from "@telegraph/layout";
+import { Toggle } from "@telegraph/toggle";
 import { Tooltip } from "@telegraph/tooltip";
 import { Text } from "@telegraph/typography";
-import { Box as BoxIcon, Gauge } from "lucide-react";
 
 export const GuideContextDetails = () => {
   const { client } = useGuideContext();
@@ -17,43 +16,60 @@ export const GuideContextDetails = () => {
         <Text as="label" size="1" weight="medium" display="block">
           Settings
         </Text>
-        <Stack direction="row" gap="2">
-          <Tooltip label="Sandbox: Contain engagement actions to client side only">
-            <Button
+        <Stack direction="column" gap="1">
+          <Stack direction="row" gap="2" align="center" h="7">
+            <Tooltip label="Contain engagement actions to client side only">
+              <Text
+                as="span"
+                size="1"
+                weight="medium"
+                color="gray"
+                width="36"
+                mt="1"
+              >
+                Sandbox engagement
+              </Text>
+            </Tooltip>
+            <Toggle.Default
               size="1"
-              variant={
-                debugSettings.skipEngagementTracking ? "outline" : "ghost"
-              }
-              color={debugSettings.skipEngagementTracking ? "blue" : "gray"}
-              icon={{ icon: BoxIcon, alt: "Sandbox mode" }}
-              onClick={() => {
+              pt="1_5"
+              value={!!debugSettings.skipEngagementTracking}
+              onValueChange={(value: boolean) => {
                 client.setDebug({
                   ...debugSettings,
-                  skipEngagementTracking: !debugSettings.skipEngagementTracking,
+                  skipEngagementTracking: value,
                 });
               }}
             />
-          </Tooltip>
-
-          <Tooltip label="Ignore throttle: Show next guide immediately">
-            <Button
+          </Stack>
+          <Stack direction="row" gap="2" align="center" h="7">
+            <Tooltip label="Ignore throttle and show next guide immediately">
+              <Text
+                as="span"
+                size="1"
+                weight="medium"
+                color="gray"
+                width="36"
+                mt="1"
+              >
+                Ignore throttle
+              </Text>
+            </Tooltip>
+            <Toggle.Default
               size="1"
-              variant={
-                debugSettings.ignoreDisplayInterval ? "outline" : "ghost"
-              }
-              color={debugSettings.ignoreDisplayInterval ? "blue" : "gray"}
-              icon={{ icon: Gauge, alt: "Ignore throttle" }}
-              onClick={() => {
+              pt="1_5"
+              value={!!debugSettings.ignoreDisplayInterval}
+              onValueChange={(value: boolean) => {
                 client.setDebug({
                   ...debugSettings,
-                  ignoreDisplayInterval: !debugSettings.ignoreDisplayInterval,
+                  ignoreDisplayInterval: value,
                 });
               }}
             />
-          </Tooltip>
+          </Stack>
         </Stack>
       </Stack>
-      <Stack direction="column" gap="2" width="full">
+      <Stack direction="column" gap="1" width="full">
         <Tooltip
           label={
             <Text as="span" size="1">
diff --git a/yarn.lock b/yarn.lock
index 03db26283..151af02fb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4556,6 +4556,7 @@ __metadata:
     "@telegraph/segmented-control": "npm:^0.2.2"
     "@telegraph/select": "npm:^0.0.86"
     "@telegraph/tag": "npm:^0.1.4"
+    "@telegraph/toggle": "npm:0.1.1"
     "@telegraph/tokens": "npm:^0.1.4"
     "@telegraph/tooltip": "npm:0.1.3"
     "@telegraph/typography": "npm:^0.2.1"
@@ -7506,6 +7507,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@telegraph/toggle@npm:0.1.1":
+  version: 0.1.1
+  resolution: "@telegraph/toggle@npm:0.1.1"
+  dependencies:
+    "@radix-ui/react-use-controllable-state": "npm:^1.2.2"
+    "@radix-ui/react-visually-hidden": "npm:^1.2.4"
+    "@telegraph/button": "npm:^0.5.0"
+    "@telegraph/helpers": "npm:^0.0.15"
+    "@telegraph/icon": "npm:^0.4.0"
+    "@telegraph/layout": "npm:^0.5.0"
+    "@telegraph/tag": "npm:^0.1.4"
+    "@telegraph/typography": "npm:^0.2.1"
+    lucide-react: "npm:^0.544.0"
+  peerDependencies:
+    react: ^18.0.0 || ^19.0.0
+    react-dom: ^18.0.0 || ^19.0.0
+  checksum: 10c0/5ebdb275d8b758fbfb7b893c5558255e0bf50a2c9c5b4132f4d31de7495861a4ee0a31a56ca5c1fd73d2d93aa8622b93050139241c365b7c460612933c7bc88b
+  languageName: node
+  linkType: hard
+
 "@telegraph/tokens@npm:^0.1.3":
   version: 0.1.3
   resolution: "@telegraph/tokens@npm:0.1.3"

From 96d88d369a365c9ce44bc813d7564f4e7f05c7eb Mon Sep 17 00:00:00 2001
From: Thomas <thomas.whyyou@gmail.com>
Date: Fri, 27 Mar 2026 11:12:31 -0400
Subject: [PATCH 3/3] more tweaks

---
 .../Toolbar/V2/GuideContextDetails.tsx        |  4 +-
 .../guide/components/Toolbar/styles.css       |  1 +
 yarn.lock                                     | 38 ++++++++++++++-----
 3 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/packages/react/src/modules/guide/components/Toolbar/V2/GuideContextDetails.tsx b/packages/react/src/modules/guide/components/Toolbar/V2/GuideContextDetails.tsx
index b363cbe2d..fd1099b70 100644
--- a/packages/react/src/modules/guide/components/Toolbar/V2/GuideContextDetails.tsx
+++ b/packages/react/src/modules/guide/components/Toolbar/V2/GuideContextDetails.tsx
@@ -12,9 +12,9 @@ export const GuideContextDetails = () => {
 
   return (
     <Box py="3" px="3">
-      <Stack direction="column" gap="2" width="full">
+      <Stack direction="column" gap="1" width="full">
         <Text as="label" size="1" weight="medium" display="block">
-          Settings
+          Toolbar settings
         </Text>
         <Stack direction="column" gap="1">
           <Stack direction="row" gap="2" align="center" h="7">
diff --git a/packages/react/src/modules/guide/components/Toolbar/styles.css b/packages/react/src/modules/guide/components/Toolbar/styles.css
index de3d2c23d..cec9f010e 100644
--- a/packages/react/src/modules/guide/components/Toolbar/styles.css
+++ b/packages/react/src/modules/guide/components/Toolbar/styles.css
@@ -1,3 +1,4 @@
+@import "@telegraph/toggle/default.css";
 @telegraph tokens;
 @telegraph components;
 
diff --git a/yarn.lock b/yarn.lock
index 151af02fb..601c4c776 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4556,7 +4556,7 @@ __metadata:
     "@telegraph/segmented-control": "npm:^0.2.2"
     "@telegraph/select": "npm:^0.0.86"
     "@telegraph/tag": "npm:^0.1.4"
-    "@telegraph/toggle": "npm:0.1.1"
+    "@telegraph/toggle": "npm:0.1.0"
     "@telegraph/tokens": "npm:^0.1.4"
     "@telegraph/tooltip": "npm:0.1.3"
     "@telegraph/typography": "npm:^0.2.1"
@@ -7268,6 +7268,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@telegraph/button@npm:^0.4.0":
+  version: 0.4.1
+  resolution: "@telegraph/button@npm:0.4.1"
+  dependencies:
+    "@telegraph/helpers": "npm:^0.0.15"
+    "@telegraph/icon": "npm:^0.4.0"
+    "@telegraph/layout": "npm:^0.4.0"
+    "@telegraph/style-engine": "npm:^0.2.2"
+    "@telegraph/typography": "npm:^0.2.0"
+    clsx: "npm:^2.1.1"
+    lucide-react: "npm:^0.544.0"
+  peerDependencies:
+    react: ^18.0.0 || ^19.0.0
+    react-dom: ^18.0.0 || ^19.0.0
+  checksum: 10c0/f83da4f73d25658635e3faf5230b6dbd14b392bf84572fe092e04abfedc2854694729211ed215d268876d337ecc65ecee29df9727a44624584eed3a47097120c
+  languageName: node
+  linkType: hard
+
 "@telegraph/button@npm:^0.5.0":
   version: 0.5.0
   resolution: "@telegraph/button@npm:0.5.0"
@@ -7473,7 +7491,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@telegraph/tag@npm:^0.1.4":
+"@telegraph/tag@npm:^0.1.0, @telegraph/tag@npm:^0.1.4":
   version: 0.1.4
   resolution: "@telegraph/tag@npm:0.1.4"
   dependencies:
@@ -7507,23 +7525,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@telegraph/toggle@npm:0.1.1":
-  version: 0.1.1
-  resolution: "@telegraph/toggle@npm:0.1.1"
+"@telegraph/toggle@npm:0.1.0":
+  version: 0.1.0
+  resolution: "@telegraph/toggle@npm:0.1.0"
   dependencies:
     "@radix-ui/react-use-controllable-state": "npm:^1.2.2"
     "@radix-ui/react-visually-hidden": "npm:^1.2.4"
-    "@telegraph/button": "npm:^0.5.0"
+    "@telegraph/button": "npm:^0.4.0"
     "@telegraph/helpers": "npm:^0.0.15"
     "@telegraph/icon": "npm:^0.4.0"
-    "@telegraph/layout": "npm:^0.5.0"
-    "@telegraph/tag": "npm:^0.1.4"
-    "@telegraph/typography": "npm:^0.2.1"
+    "@telegraph/layout": "npm:^0.4.0"
+    "@telegraph/tag": "npm:^0.1.0"
+    "@telegraph/typography": "npm:^0.2.0"
     lucide-react: "npm:^0.544.0"
   peerDependencies:
     react: ^18.0.0 || ^19.0.0
     react-dom: ^18.0.0 || ^19.0.0
-  checksum: 10c0/5ebdb275d8b758fbfb7b893c5558255e0bf50a2c9c5b4132f4d31de7495861a4ee0a31a56ca5c1fd73d2d93aa8622b93050139241c365b7c460612933c7bc88b
+  checksum: 10c0/7d2cb03d6575511dbb982862b76cc8f0880ad6f524e74705664808fbff72b9450d3e532d0cc7e82b87ac214d6fff3429c312e9911c7668dd215f4d4b0f899985
   languageName: node
   linkType: hard