@knocklabs/react 0.11.3 → 0.11.5

package/dist/esm/modules/guide/components/Toolbar/V2/GuideContextDetails.mjs

@@ -1,27 +1,42 @@
-import { useGuideContext as m, useStore as p } from "@knocklabs/react-core";
-import { Stack as r, Box as s } from "@telegraph/layout";
-import { Text as t } from "@telegraph/typography";
-import { ChevronDown as d, ChevronRight as g } from "lucide-react";
+import { useGuideContext as E, useStore as y } from "@knocklabs/react-core";
+import { Button as s } from "@telegraph/button";
+import { Icon as m } from "@telegraph/icon";
+import { Stack as t, Box as g } from "@telegraph/layout";
+import { Tooltip as p } from "@telegraph/tooltip";
+import { Text as n } from "@telegraph/typography";
+import { ChevronDown as f, ChevronRight as x, Info as d } from "lucide-react";
 import * as e from "react";
-const z = () => {
+const C = () => {
   const {
     client: a
-  } = m(), [l, i] = e.useState(!1), n = p(a.store, (o) => o.guideGroups[0]), c = (n == null ? void 0 : n.display_interval) ?? null;
-  return /* @__PURE__ */ e.createElement(r, { direction: "column", borderTop: "px" }, /* @__PURE__ */ e.createElement(r, { h: "5", px: "2", bg: "gray-3", align: "center", gap: "1", style: {
+  } = E(), [l, u] = e.useState(!1), {
+    defaultGroup: o,
+    debugSettings: r
+  } = y(a.store, (i) => ({
+    defaultGroup: i.guideGroups[0],
+    debugSettings: i.debug || {}
+  })), c = (o == null ? void 0 : o.display_interval) ?? null;
+  return /* @__PURE__ */ e.createElement(t, { direction: "column", borderTop: "px" }, /* @__PURE__ */ e.createElement(t, { h: "5", px: "2", bg: "gray-3", align: "center", gap: "1", style: {
     cursor: "pointer"
-  }, onClick: () => i((o) => !o) }, /* @__PURE__ */ e.createElement(t, { as: "span", size: "0", weight: "medium" }, "Details"), l ? /* @__PURE__ */ e.createElement(d, { size: 12 }) : /* @__PURE__ */ e.createElement(g, { size: 12 })), l && /* @__PURE__ */ e.createElement(r, { direction: "column" }, /* @__PURE__ */ e.createElement(r, { direction: "column", gap: "0_5", py: "1", px: "2", borderTop: "px" }, /* @__PURE__ */ e.createElement(t, { as: "span", size: "0", weight: "medium" }, "Throttle"), /* @__PURE__ */ e.createElement(t, { as: "code", size: "0" }, c === null ? "-" : `Every ${c}s`)), /* @__PURE__ */ e.createElement(r, { direction: "column", py: "1", px: "2", borderTop: "px" }, /* @__PURE__ */ e.createElement(t, { as: "span", size: "0", weight: "medium" }, "Target params"), /* @__PURE__ */ e.createElement(r, { direction: "column", gap: "0_5", mt: "1" }, /* @__PURE__ */ e.createElement(t, { as: "span", size: "0", color: "gray" }, "Tenant"), /* @__PURE__ */ e.createElement(t, { as: "code", size: "0" }, a.targetParams.tenant ? /* @__PURE__ */ e.createElement(s, { rounded: "2", overflow: "auto", backgroundColor: "gray-2", border: "px", style: {
+  }, onClick: () => u((i) => !i) }, /* @__PURE__ */ e.createElement(n, { as: "span", size: "0", weight: "medium" }, "More"), l ? /* @__PURE__ */ e.createElement(f, { size: 12 }) : /* @__PURE__ */ e.createElement(x, { size: 12 })), l && /* @__PURE__ */ e.createElement(t, { direction: "column" }, /* @__PURE__ */ e.createElement(t, { align: "center", justify: "space-between", py: "1", px: "2", borderTop: "px" }, /* @__PURE__ */ e.createElement(t, { align: "center", gap: "1" }, /* @__PURE__ */ e.createElement(n, { as: "span", size: "0", weight: "medium" }, "Client-only engagement"), /* @__PURE__ */ e.createElement(p, { label: "Contain engagement actions to the client side only while in preview without sending engagement events to the API" }, /* @__PURE__ */ e.createElement(m, { icon: d, size: "0", color: "gray", "aria-hidden": !0 }))), /* @__PURE__ */ e.createElement(s, { size: "0", variant: "soft", color: r.skipEngagementTracking ? "green" : "gray", onClick: () => a.setDebug({
+    ...r,
+    skipEngagementTracking: !r.skipEngagementTracking
+  }) }, r.skipEngagementTracking ? "On" : "Off")), /* @__PURE__ */ e.createElement(t, { direction: "column", py: "1", px: "2" }, /* @__PURE__ */ e.createElement(t, { align: "center", justify: "space-between" }, /* @__PURE__ */ e.createElement(t, { align: "center", gap: "1" }, /* @__PURE__ */ e.createElement(n, { as: "span", size: "0", weight: "medium" }, "Suspend throttling"), /* @__PURE__ */ e.createElement(p, { label: "Suspend throttling during preview, and show next guide immediately" }, /* @__PURE__ */ e.createElement(m, { icon: d, size: "0", color: "gray", "aria-hidden": !0 }))), /* @__PURE__ */ e.createElement(s, { size: "0", variant: "soft", color: r.ignoreDisplayInterval ? "green" : "gray", onClick: () => a.setDebug({
+    ...r,
+    ignoreDisplayInterval: !r.ignoreDisplayInterval
+  }) }, r.ignoreDisplayInterval ? "On" : "Off")), /* @__PURE__ */ e.createElement(t, { direction: "row", gap: "0_5", py: "1" }, /* @__PURE__ */ e.createElement(n, { as: "span", size: "0", color: "gray" }, "Throttle:", " ", r.ignoreDisplayInterval ? "(ignored)" : c === null ? "(none)" : `Every ${c}s`))), /* @__PURE__ */ e.createElement(t, { direction: "column", py: "1", px: "2", borderTop: "px" }, /* @__PURE__ */ e.createElement(n, { as: "span", size: "0", weight: "medium" }, "Target params"), /* @__PURE__ */ e.createElement(t, { direction: "column", gap: "0_5", mt: "1" }, /* @__PURE__ */ e.createElement(n, { as: "span", size: "0", color: "gray" }, "Tenant"), /* @__PURE__ */ e.createElement(n, { as: "code", size: "0" }, a.targetParams.tenant ? /* @__PURE__ */ e.createElement(g, { rounded: "2", overflow: "auto", backgroundColor: "gray-2", border: "px", style: {
     maxHeight: "200px"
   } }, /* @__PURE__ */ e.createElement("pre", { style: {
     fontSize: "11px",
     margin: 0
-  } }, /* @__PURE__ */ e.createElement("code", null, a.targetParams.tenant))) : /* @__PURE__ */ e.createElement(t, { as: "code", size: "0" }, "-"))), /* @__PURE__ */ e.createElement(r, { direction: "column", gap: "0_5" }, /* @__PURE__ */ e.createElement(t, { as: "span", size: "0", color: "gray" }, "Data"), a.targetParams.data ? /* @__PURE__ */ e.createElement(s, { rounded: "2", overflow: "auto", backgroundColor: "gray-2", border: "px", style: {
+  } }, /* @__PURE__ */ e.createElement("code", null, a.targetParams.tenant))) : /* @__PURE__ */ e.createElement(n, { as: "code", size: "0" }, "-"))), /* @__PURE__ */ e.createElement(t, { direction: "column", gap: "0_5" }, /* @__PURE__ */ e.createElement(n, { as: "span", size: "0", color: "gray" }, "Data"), a.targetParams.data ? /* @__PURE__ */ e.createElement(g, { rounded: "2", overflow: "auto", backgroundColor: "gray-2", border: "px", style: {
     maxHeight: "200px"
   } }, /* @__PURE__ */ e.createElement("pre", { style: {
     fontSize: "11px",
     margin: 0
-  } }, /* @__PURE__ */ e.createElement("code", null, JSON.stringify(a.targetParams.data, null, 2)))) : /* @__PURE__ */ e.createElement(t, { as: "code", size: "0" }, "-")))));
+  } }, /* @__PURE__ */ e.createElement("code", null, JSON.stringify(a.targetParams.data, null, 2)))) : /* @__PURE__ */ e.createElement(n, { as: "code", size: "0" }, "-")))));
 };
 export {
-  z as GuideContextDetails
+  C as GuideContextDetails
 };
 //# sourceMappingURL=GuideContextDetails.mjs.map

package/dist/esm/modules/guide/components/Toolbar/V2/GuideContextDetails.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"GuideContextDetails.mjs","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/GuideContextDetails.tsx"],"sourcesContent":["import { useGuideContext, useStore } from \"@knocklabs/react-core\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport { Text } from \"@telegraph/typography\";\nimport { ChevronDown, ChevronRight } from \"lucide-react\";\nimport * as React from \"react\";\n\nexport const GuideContextDetails = () => {\n  const { client } = useGuideContext();\n  const [isExpanded, setIsExpanded] = React.useState(false);\n\n  const defaultGroup = useStore(client.store, (state) => state.guideGroups[0]);\n  const displayInterval = defaultGroup?.display_interval ?? null;\n\n  return (\n    <Stack direction=\"column\" borderTop=\"px\">\n      <Stack\n        h=\"5\"\n        px=\"2\"\n        bg=\"gray-3\"\n        align=\"center\"\n        gap=\"1\"\n        style={{ cursor: \"pointer\" }}\n        onClick={() => setIsExpanded((prev) => !prev)}\n      >\n        <Text as=\"span\" size=\"0\" weight=\"medium\">\n          Details\n        </Text>\n        {isExpanded ? <ChevronDown size={12} /> : <ChevronRight size={12} />}\n      </Stack>\n\n      {isExpanded && (\n        <Stack direction=\"column\">\n          <Stack direction=\"column\" gap=\"0_5\" py=\"1\" px=\"2\" borderTop=\"px\">\n            <Text as=\"span\" size=\"0\" weight=\"medium\">\n              Throttle\n            </Text>\n            <Text as=\"code\" size=\"0\">\n              {displayInterval === null ? \"-\" : `Every ${displayInterval}s`}\n            </Text>\n          </Stack>\n\n          <Stack direction=\"column\" py=\"1\" px=\"2\" borderTop=\"px\">\n            <Text as=\"span\" size=\"0\" weight=\"medium\">\n              Target params\n            </Text>\n            <Stack direction=\"column\" gap=\"0_5\" mt=\"1\">\n              <Text as=\"span\" size=\"0\" color=\"gray\">\n                Tenant\n              </Text>\n              <Text as=\"code\" size=\"0\">\n                {client.targetParams.tenant ? (\n                  <Box\n                    rounded=\"2\"\n                    overflow=\"auto\"\n                    backgroundColor=\"gray-2\"\n                    border=\"px\"\n                    style={{ maxHeight: \"200px\" }}\n                  >\n                    <pre style={{ fontSize: \"11px\", margin: 0 }}>\n                      <code>{client.targetParams.tenant}</code>\n                    </pre>\n                  </Box>\n                ) : (\n                  <Text as=\"code\" size=\"0\">\n                    -\n                  </Text>\n                )}\n              </Text>\n            </Stack>\n\n            <Stack direction=\"column\" gap=\"0_5\">\n              <Text as=\"span\" size=\"0\" color=\"gray\">\n                Data\n              </Text>\n              {client.targetParams.data ? (\n                <Box\n                  rounded=\"2\"\n                  overflow=\"auto\"\n                  backgroundColor=\"gray-2\"\n                  border=\"px\"\n                  style={{ maxHeight: \"200px\" }}\n                >\n                  <pre style={{ fontSize: \"11px\", margin: 0 }}>\n                    <code>\n                      {JSON.stringify(client.targetParams.data, null, 2)}\n                    </code>\n                  </pre>\n                </Box>\n              ) : (\n                <Text as=\"code\" size=\"0\">\n                  -\n                </Text>\n              )}\n            </Stack>\n          </Stack>\n        </Stack>\n      )}\n    </Stack>\n  );\n};\n"],"names":["GuideContextDetails","client","useGuideContext","isExpanded","setIsExpanded","React","useState","defaultGroup","useStore","store","state","guideGroups","displayInterval","display_interval","Stack","cursor","prev","Text","ChevronDown","ChevronRight","targetParams","tenant","Box","maxHeight","fontSize","margin","data","JSON","stringify"],"mappings":"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"}
+{"version":3,"file":"GuideContextDetails.mjs","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/GuideContextDetails.tsx"],"sourcesContent":["import { useGuideContext, useStore } from \"@knocklabs/react-core\";\nimport { Button } from \"@telegraph/button\";\nimport { Icon } from \"@telegraph/icon\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text } from \"@telegraph/typography\";\nimport { ChevronDown, ChevronRight, Info } from \"lucide-react\";\nimport * as React from \"react\";\n\nexport const GuideContextDetails = () => {\n  const { client } = useGuideContext();\n  const [isExpanded, setIsExpanded] = React.useState(false);\n\n  const { defaultGroup, debugSettings } = useStore(client.store, (state) => {\n    return {\n      defaultGroup: state.guideGroups[0],\n      debugSettings: state.debug || {},\n    };\n  });\n  const displayInterval = defaultGroup?.display_interval ?? null;\n\n  return (\n    <Stack direction=\"column\" borderTop=\"px\">\n      <Stack\n        h=\"5\"\n        px=\"2\"\n        bg=\"gray-3\"\n        align=\"center\"\n        gap=\"1\"\n        style={{ cursor: \"pointer\" }}\n        onClick={() => setIsExpanded((prev) => !prev)}\n      >\n        <Text as=\"span\" size=\"0\" weight=\"medium\">\n          More\n        </Text>\n        {isExpanded ? <ChevronDown size={12} /> : <ChevronRight size={12} />}\n      </Stack>\n\n      {isExpanded && (\n        <Stack direction=\"column\">\n          <Stack\n            align=\"center\"\n            justify=\"space-between\"\n            py=\"1\"\n            px=\"2\"\n            borderTop=\"px\"\n          >\n            <Stack align=\"center\" gap=\"1\">\n              <Text as=\"span\" size=\"0\" weight=\"medium\">\n                Client-only engagement\n              </Text>\n              <Tooltip label=\"Contain engagement actions to the client side only while in preview without sending engagement events to the API\">\n                <Icon icon={Info} size=\"0\" color=\"gray\" aria-hidden />\n              </Tooltip>\n            </Stack>\n            <Button\n              size=\"0\"\n              variant=\"soft\"\n              color={debugSettings.skipEngagementTracking ? \"green\" : \"gray\"}\n              onClick={() =>\n                client.setDebug({\n                  ...debugSettings,\n                  skipEngagementTracking: !debugSettings.skipEngagementTracking,\n                })\n              }\n            >\n              {debugSettings.skipEngagementTracking ? \"On\" : \"Off\"}\n            </Button>\n          </Stack>\n\n          <Stack direction=\"column\" py=\"1\" px=\"2\">\n            <Stack align=\"center\" justify=\"space-between\">\n              <Stack align=\"center\" gap=\"1\">\n                <Text as=\"span\" size=\"0\" weight=\"medium\">\n                  Suspend throttling\n                </Text>\n                <Tooltip label=\"Suspend throttling during preview, and show next guide immediately\">\n                  <Icon icon={Info} size=\"0\" color=\"gray\" aria-hidden />\n                </Tooltip>\n              </Stack>\n              <Button\n                size=\"0\"\n                variant=\"soft\"\n                color={debugSettings.ignoreDisplayInterval ? \"green\" : \"gray\"}\n                onClick={() =>\n                  client.setDebug({\n                    ...debugSettings,\n                    ignoreDisplayInterval: !debugSettings.ignoreDisplayInterval,\n                  })\n                }\n              >\n                {debugSettings.ignoreDisplayInterval ? \"On\" : \"Off\"}\n              </Button>\n            </Stack>\n            <Stack direction=\"row\" gap=\"0_5\" py=\"1\">\n              <Text as=\"span\" size=\"0\" color=\"gray\">\n                Throttle:{\" \"}\n                {debugSettings.ignoreDisplayInterval\n                  ? \"(ignored)\"\n                  : displayInterval === null\n                    ? \"(none)\"\n                    : `Every ${displayInterval}s`}\n              </Text>\n            </Stack>\n          </Stack>\n\n          <Stack direction=\"column\" py=\"1\" px=\"2\" borderTop=\"px\">\n            <Text as=\"span\" size=\"0\" weight=\"medium\">\n              Target params\n            </Text>\n            <Stack direction=\"column\" gap=\"0_5\" mt=\"1\">\n              <Text as=\"span\" size=\"0\" color=\"gray\">\n                Tenant\n              </Text>\n              <Text as=\"code\" size=\"0\">\n                {client.targetParams.tenant ? (\n                  <Box\n                    rounded=\"2\"\n                    overflow=\"auto\"\n                    backgroundColor=\"gray-2\"\n                    border=\"px\"\n                    style={{ maxHeight: \"200px\" }}\n                  >\n                    <pre style={{ fontSize: \"11px\", margin: 0 }}>\n                      <code>{client.targetParams.tenant}</code>\n                    </pre>\n                  </Box>\n                ) : (\n                  <Text as=\"code\" size=\"0\">\n                    -\n                  </Text>\n                )}\n              </Text>\n            </Stack>\n\n            <Stack direction=\"column\" gap=\"0_5\">\n              <Text as=\"span\" size=\"0\" color=\"gray\">\n                Data\n              </Text>\n              {client.targetParams.data ? (\n                <Box\n                  rounded=\"2\"\n                  overflow=\"auto\"\n                  backgroundColor=\"gray-2\"\n                  border=\"px\"\n                  style={{ maxHeight: \"200px\" }}\n                >\n                  <pre style={{ fontSize: \"11px\", margin: 0 }}>\n                    <code>\n                      {JSON.stringify(client.targetParams.data, null, 2)}\n                    </code>\n                  </pre>\n                </Box>\n              ) : (\n                <Text as=\"code\" size=\"0\">\n                  -\n                </Text>\n              )}\n            </Stack>\n          </Stack>\n        </Stack>\n      )}\n    </Stack>\n  );\n};\n"],"names":["GuideContextDetails","client","useGuideContext","isExpanded","setIsExpanded","React","useState","defaultGroup","debugSettings","useStore","store","state","guideGroups","debug","displayInterval","display_interval","Stack","cursor","prev","Text","ChevronDown","ChevronRight","Tooltip","Icon","Info","Button","skipEngagementTracking","setDebug","ignoreDisplayInterval","targetParams","tenant","Box","maxHeight","fontSize","margin","data","JSON","stringify"],"mappings":"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"}

package/dist/esm/modules/guide/components/Toolbar/V2/GuideHoverCard.mjs

@@ -1,27 +1,57 @@
 import * as t from "@radix-ui/react-hover-card";
-import { Stack as n, Box as l } from "@telegraph/layout";
+import { Button as a } from "@telegraph/button";
+import { Stack as o, Box as i } from "@telegraph/layout";
+import { RotateCcw as c, ExternalLink as m } from "lucide-react";
 import * as e from "react";
-import { isUnknownGuide as i } from "./useInspectGuideClientStore.mjs";
-const f = ({
-  children: r,
-  guide: o
+import { isUnknownGuide as s } from "./useInspectGuideClientStore.mjs";
+const v = ({
+  children: n,
+  guide: r
 }) => {
-  if (i(o))
-    return /* @__PURE__ */ e.createElement(n, { align: "center" }, r);
+  if (s(r))
+    return /* @__PURE__ */ e.createElement(o, { align: "center" }, n);
   const {
-    annotation: c,
-    activation_location_rules: m,
-    priority: s,
-    ...a
-  } = o;
-  return /* @__PURE__ */ e.createElement(t.Root, null, /* @__PURE__ */ e.createElement(t.Trigger, null, /* @__PURE__ */ e.createElement(n, { align: "center" }, r)), /* @__PURE__ */ e.createElement(t.Portal, null, /* @__PURE__ */ e.createElement(t.Content, { sideOffset: 16, side: "left" }, /* @__PURE__ */ e.createElement(l, { px: "2", shadow: "2", rounded: "3", border: "px", overflow: "auto", backgroundColor: "surface-2", style: {
+    annotation: d,
+    activation_location_rules: f,
+    priority: u,
+    ...l
+  } = r;
+  return /* @__PURE__ */ e.createElement(t.Root, null, /* @__PURE__ */ e.createElement(t.Trigger, null, /* @__PURE__ */ e.createElement(o, { align: "center" }, n)), /* @__PURE__ */ e.createElement(t.Portal, null, /* @__PURE__ */ e.createElement(t.Content, { sideOffset: 16, side: "left" }, /* @__PURE__ */ e.createElement(i, { px: "2", shadow: "2", rounded: "3", border: "px", overflow: "auto", backgroundColor: "surface-2", style: {
     width: "450px",
     maxHeight: "600px"
-  } }, /* @__PURE__ */ e.createElement("pre", { style: {
+  } }, /* @__PURE__ */ e.createElement(o, { justify: "flex-end", gap: "1", pt: "2" }, /* @__PURE__ */ e.createElement(
+    a,
+    {
+      size: "0",
+      variant: "soft",
+      color: "default",
+      leadingIcon: {
+        icon: c,
+        alt: "Reset engagement"
+      },
+      onClick: () => {
+      }
+    },
+    "Reset engagement"
+  ), /* @__PURE__ */ e.createElement(
+    a,
+    {
+      size: "0",
+      variant: "soft",
+      color: "default",
+      leadingIcon: {
+        icon: m,
+        alt: "Go to dashboard"
+      },
+      onClick: () => {
+      }
+    },
+    "Go to dashboard"
+  )), /* @__PURE__ */ e.createElement("pre", { style: {
     fontSize: "11px"
-  } }, /* @__PURE__ */ e.createElement("code", null, JSON.stringify(a, null, 2)))), /* @__PURE__ */ e.createElement(t.Arrow, null))));
+  } }, /* @__PURE__ */ e.createElement("code", null, JSON.stringify(l, null, 2)))), /* @__PURE__ */ e.createElement(t.Arrow, null))));
 };
 export {
-  f as GuideHoverCard
+  v as GuideHoverCard
 };
 //# sourceMappingURL=GuideHoverCard.mjs.map

package/dist/esm/modules/guide/components/Toolbar/V2/GuideHoverCard.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"GuideHoverCard.mjs","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/GuideHoverCard.tsx"],"sourcesContent":["import * as HoverCard from \"@radix-ui/react-hover-card\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport * as React from \"react\";\n\nimport {\n  AnnotatedGuide,\n  UnknownGuide,\n  isUnknownGuide,\n} from \"./useInspectGuideClientStore\";\n\ntype Props = {\n  guide: AnnotatedGuide | UnknownGuide;\n};\n\nexport const GuideHoverCard = ({\n  children,\n  guide,\n}: React.PropsWithChildren<Props>) => {\n  if (isUnknownGuide(guide)) {\n    return <Stack align=\"center\">{children}</Stack>;\n  }\n\n  // Prune out internal or legacy fields.\n  const {\n    annotation: _annotation,\n    activation_location_rules: _activation_location_rules,\n    priority: _priority,\n    ...rest\n  } = guide;\n\n  return (\n    <HoverCard.Root>\n      <HoverCard.Trigger>\n        <Stack align=\"center\">{children}</Stack>\n      </HoverCard.Trigger>\n      <HoverCard.Portal>\n        <HoverCard.Content sideOffset={16} side=\"left\">\n          <Box\n            px=\"2\"\n            shadow=\"2\"\n            rounded=\"3\"\n            border=\"px\"\n            overflow=\"auto\"\n            backgroundColor=\"surface-2\"\n            style={{\n              width: \"450px\",\n              maxHeight: \"600px\",\n            }}\n          >\n            <pre\n              style={{\n                fontSize: \"11px\",\n              }}\n            >\n              <code>{JSON.stringify(rest, null, 2)}</code>\n            </pre>\n          </Box>\n          <HoverCard.Arrow />\n        </HoverCard.Content>\n      </HoverCard.Portal>\n    </HoverCard.Root>\n  );\n};\n"],"names":["GuideHoverCard","children","guide","isUnknownGuide","React","Stack","annotation","_annotation","activation_location_rules","_activation_location_rules","priority","_priority","rest","HoverCard","Box","width","maxHeight","fontSize","JSON","stringify"],"mappings":";;;;AAcO,MAAMA,IAAiBA,CAAC;AAAA,EAC7BC,UAAAA;AAAAA,EACAC,OAAAA;AAC8B,MAAM;AAChCC,MAAAA,EAAeD,CAAK;AACtB,WAAQ,gBAAAE,EAAA,cAAAC,GAAA,EAAM,OAAM,SAAA,GAAUJ,CAAS;AAInC,QAAA;AAAA,IACJK,YAAYC;AAAAA,IACZC,2BAA2BC;AAAAA,IAC3BC,UAAUC;AAAAA,IACV,GAAGC;AAAAA,EAAAA,IACDV;AAEJ,yCACGW,EAAU,MAAV,MACE,gBAAAT,EAAA,cAAAS,EAAU,SAAV,MACC,gBAAAT,EAAA,cAACC,GAAM,EAAA,OAAM,YAAUJ,CAAS,CAClC,GACC,gBAAAG,EAAA,cAAAS,EAAU,QAAV,MACC,gBAAAT,EAAA,cAACS,EAAU,SAAV,EAAkB,YAAY,IAAI,MAAK,UACtC,gBAAAT,EAAA,cAACU,KACC,IAAG,KACH,QAAO,KACP,SAAQ,KACR,QAAO,MACP,UAAS,QACT,iBAAgB,aAChB,OAAO;AAAA,IACLC,OAAO;AAAA,IACPC,WAAW;AAAA,EACb,EAAA,GAEC,gBAAAZ,EAAA,cAAA,OAAA,EACC,OAAO;AAAA,IACLa,UAAU;AAAA,EAAA,KAGX,gBAAAb,EAAA,cAAA,QAAA,MAAMc,KAAKC,UAAUP,GAAM,MAAM,CAAC,CAAE,CACvC,CACF,GACC,gBAAAR,EAAA,cAAAS,EAAU,OAAV,IAAe,CAClB,CACF,CACF;AAEJ;"}
+{"version":3,"file":"GuideHoverCard.mjs","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/GuideHoverCard.tsx"],"sourcesContent":["import * as HoverCard from \"@radix-ui/react-hover-card\";\nimport { Button } from \"@telegraph/button\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport { ExternalLink, RotateCcw } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport {\n  AnnotatedGuide,\n  UnknownGuide,\n  isUnknownGuide,\n} from \"./useInspectGuideClientStore\";\n\ntype Props = {\n  guide: AnnotatedGuide | UnknownGuide;\n};\n\nexport const GuideHoverCard = ({\n  children,\n  guide,\n}: React.PropsWithChildren<Props>) => {\n  if (isUnknownGuide(guide)) {\n    return <Stack align=\"center\">{children}</Stack>;\n  }\n\n  // Prune out internal or legacy fields.\n  const {\n    annotation: _annotation,\n    activation_location_rules: _activation_location_rules,\n    priority: _priority,\n    ...rest\n  } = guide;\n\n  return (\n    <HoverCard.Root>\n      <HoverCard.Trigger>\n        <Stack align=\"center\">{children}</Stack>\n      </HoverCard.Trigger>\n      <HoverCard.Portal>\n        <HoverCard.Content sideOffset={16} side=\"left\">\n          <Box\n            px=\"2\"\n            shadow=\"2\"\n            rounded=\"3\"\n            border=\"px\"\n            overflow=\"auto\"\n            backgroundColor=\"surface-2\"\n            style={{\n              width: \"450px\",\n              maxHeight: \"600px\",\n            }}\n          >\n            <Stack justify=\"flex-end\" gap=\"1\" pt=\"2\">\n              <Button\n                size=\"0\"\n                variant=\"soft\"\n                color=\"default\"\n                leadingIcon={{ icon: RotateCcw, alt: \"Reset engagement\" }}\n                // TODO(KNO-11468): Placeholder button\n                onClick={() => {}}\n              >\n                Reset engagement\n              </Button>\n              <Button\n                size=\"0\"\n                variant=\"soft\"\n                color=\"default\"\n                leadingIcon={{ icon: ExternalLink, alt: \"Go to dashboard\" }}\n                // TODO(KNO-11819): Placeholder button\n                onClick={() => {}}\n              >\n                Go to dashboard\n              </Button>\n            </Stack>\n            <pre\n              style={{\n                fontSize: \"11px\",\n              }}\n            >\n              <code>{JSON.stringify(rest, null, 2)}</code>\n            </pre>\n          </Box>\n          <HoverCard.Arrow />\n        </HoverCard.Content>\n      </HoverCard.Portal>\n    </HoverCard.Root>\n  );\n};\n"],"names":["GuideHoverCard","children","guide","isUnknownGuide","React","Stack","annotation","_annotation","activation_location_rules","_activation_location_rules","priority","_priority","rest","HoverCard","Box","width","maxHeight","Button","icon","RotateCcw","alt","ExternalLink","fontSize","JSON","stringify"],"mappings":";;;;;;AAgBO,MAAMA,IAAiBA,CAAC;AAAA,EAC7BC,UAAAA;AAAAA,EACAC,OAAAA;AAC8B,MAAM;AAChCC,MAAAA,EAAeD,CAAK;AACtB,WAAQ,gBAAAE,EAAA,cAAAC,GAAA,EAAM,OAAM,SAAA,GAAUJ,CAAS;AAInC,QAAA;AAAA,IACJK,YAAYC;AAAAA,IACZC,2BAA2BC;AAAAA,IAC3BC,UAAUC;AAAAA,IACV,GAAGC;AAAAA,EAAAA,IACDV;AAEJ,yCACGW,EAAU,MAAV,MACE,gBAAAT,EAAA,cAAAS,EAAU,SAAV,MACC,gBAAAT,EAAA,cAACC,GAAM,EAAA,OAAM,YAAUJ,CAAS,CAClC,GACC,gBAAAG,EAAA,cAAAS,EAAU,QAAV,MACC,gBAAAT,EAAA,cAACS,EAAU,SAAV,EAAkB,YAAY,IAAI,MAAK,UACtC,gBAAAT,EAAA,cAACU,KACC,IAAG,KACH,QAAO,KACP,SAAQ,KACR,QAAO,MACP,UAAS,QACT,iBAAgB,aAChB,OAAO;AAAA,IACLC,OAAO;AAAA,IACPC,WAAW;AAAA,EACb,EAAA,mCAECX,GAAM,EAAA,SAAQ,YAAW,KAAI,KAAI,IAAG,IACnC,GAAA,gBAAAD,EAAA;AAAA,IAACa;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAQ;AAAA,MACR,OAAM;AAAA,MACN,aAAa;AAAA,QAAEC,MAAMC;AAAAA,QAAWC,KAAK;AAAA,MAAmB;AAAA,MAExD,SAAS,MAAM;AAAA,MAAA;AAAA,IAAC;AAAA,IAAE;AAAA,EAIpB,GAAA,gBAAAhB,EAAA;AAAA,IAACa;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAQ;AAAA,MACR,OAAM;AAAA,MACN,aAAa;AAAA,QAAEC,MAAMG;AAAAA,QAAcD,KAAK;AAAA,MAAkB;AAAA,MAE1D,SAAS,MAAM;AAAA,MAAA;AAAA,IAAC;AAAA,IAAE;AAAA,EAItB,CAAA,GACC,gBAAAhB,EAAA,cAAA,OAAA,EACC,OAAO;AAAA,IACLkB,UAAU;AAAA,EAAA,KAGX,gBAAAlB,EAAA,cAAA,QAAA,MAAMmB,KAAKC,UAAUZ,GAAM,MAAM,CAAC,CAAE,CACvC,CACF,GACC,gBAAAR,EAAA,cAAAS,EAAU,OAAV,IAAe,CAClB,CACF,CACF;AAEJ;"}

package/dist/esm/modules/guide/components/Toolbar/V2/GuideRow.mjs

@@ -1,37 +1,55 @@
+import { useGuideContext as p, useStore as h } from "@knocklabs/react-core";
 import { Button as n } from "@telegraph/button";
-import { Stack as a, Box as l } from "@telegraph/layout";
-import { Tag as s } from "@telegraph/tag";
-import { Tooltip as r } from "@telegraph/tooltip";
-import { Text as c } from "@telegraph/typography";
-import { Code2 as m, LocateFixed as d, UserCircle2 as p, Eye as u, CheckCircle2 as b, CircleDashed as h } from "lucide-react";
+import { Stack as a, Box as m } from "@telegraph/layout";
+import { Tag as g } from "@telegraph/tag";
+import { Tooltip as o } from "@telegraph/tooltip";
+import { Text as f } from "@telegraph/typography";
+import { Pin as E, Code2 as v, LocateFixed as y, UserCircle2 as x, Eye as T, CheckCircle2 as C, CircleDashed as k } from "lucide-react";
 import * as e from "react";
-import { GuideHoverCard as E } from "./GuideHoverCard.mjs";
-import { isUnknownGuide as o } from "./useInspectGuideClientStore.mjs";
-const f = ({
+import { GuideHoverCard as w } from "./GuideHoverCard.mjs";
+import { isUnknownGuide as s } from "./useInspectGuideClientStore.mjs";
+const z = ({
   children: t
-}) => /* @__PURE__ */ e.createElement(a, { h: "7", px: "2", borderTop: "px", justify: "space-between", align: "center" }, t), I = ({
+}) => /* @__PURE__ */ e.createElement(a, { h: "7", px: "2", borderTop: "px", justify: "space-between", align: "center" }, t), L = ({
   guide: t,
-  orderIndex: i
-}) => /* @__PURE__ */ e.createElement(f, null, /* @__PURE__ */ e.createElement(E, { guide: t }, /* @__PURE__ */ e.createElement(a, { h: "6", justify: "flex-start", align: "center", gap: "2" }, /* @__PURE__ */ e.createElement(s, { size: "0", variant: "soft", color: t.bypass_global_group_limit ? "blue" : "default" }, i + 1), /* @__PURE__ */ e.createElement(c, { as: "code", size: "1" }, t.key))), /* @__PURE__ */ e.createElement(a, { justify: "flex-end" }, !o(t) && /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(a, { gap: "1" }, /* @__PURE__ */ e.createElement(r, { label: t.annotation.selectable.status === "returned" ? "This guide was queried and can display" : t.annotation.selectable.status === "queried" ? "This guide was queried but cannot display" : t.annotation.selectable.status === "throttled" ? "This guide was queried and can display but is throttled currently" : "No component is present in the current location to display this guide" }, /* @__PURE__ */ e.createElement(n, { px: "1", size: "1", variant: "soft", color: t.annotation.selectable.status === "returned" ? "green" : t.annotation.selectable.status === "queried" ? "gray" : t.annotation.selectable.status === "throttled" ? "yellow" : "red", leadingIcon: {
-  icon: m,
-  alt: "Render"
-} })), /* @__PURE__ */ e.createElement(r, { label: t.annotation.activatable.status ? "This guide can be activated at the current location" : "This guide cannot be activated at the current location" }, /* @__PURE__ */ e.createElement(n, { px: "1", size: "1", variant: "soft", color: t.annotation.activatable.status ? "green" : "red", leadingIcon: {
-  icon: d,
-  alt: "Target"
-} }))), /* @__PURE__ */ e.createElement(a, { px: "2", align: "center" }, /* @__PURE__ */ e.createElement(l, { h: "3", borderLeft: "px", borderColor: "gray-6" }))), /* @__PURE__ */ e.createElement(a, { gap: "1" }, !o(t) && /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(r, { label: t.annotation.targetable.status ? "This user is being targeted" : t.annotation.targetable.message }, /* @__PURE__ */ e.createElement(n, { px: "1", size: "1", variant: "soft", color: t.annotation.targetable.status ? "green" : "red", leadingIcon: {
-  icon: p,
-  alt: "Target"
-} })), /* @__PURE__ */ e.createElement(r, { label: t.annotation.archived.status ? "User has already dismissed this guide" : "User has not dismissed this guide" }, /* @__PURE__ */ e.createElement(n, { px: "1", size: "1", variant: "soft", color: t.annotation.archived.status ? "red" : "green", leadingIcon: {
-  icon: u,
-  alt: "Not archived"
-} }))), /* @__PURE__ */ e.createElement(r, { label: o(t) ? "This guide has never been committed and published yet" : t.active ? "This guide is active" : "This guide is not active" }, /* @__PURE__ */ e.createElement(n, { px: "1", size: "1", variant: "soft", color: t.active ? "green" : "red", leadingIcon: t.active ? {
-  icon: b,
-  alt: "Active"
-} : {
-  icon: h,
-  alt: "Inactive"
-} })))));
+  orderIndex: u
+}) => {
+  const {
+    client: l
+  } = p(), {
+    debugSettings: i
+  } = h(l.store, (b) => ({
+    debugSettings: b.debug || {}
+  })), c = i.focusedGuideKeys || {}, d = Object.keys(c).length > 0, r = !!c[t.key];
+  return /* @__PURE__ */ e.createElement(z, null, /* @__PURE__ */ e.createElement(w, { guide: t }, /* @__PURE__ */ e.createElement(a, { h: "6", justify: "flex-start", align: "center", gap: "2" }, /* @__PURE__ */ e.createElement(g, { size: "0", variant: "soft", color: t.bypass_global_group_limit ? "blue" : "default" }, u + 1), /* @__PURE__ */ e.createElement(f, { as: "code", size: "1", color: d ? r ? "blue" : "disabled" : "default" }, t.key))), /* @__PURE__ */ e.createElement(a, { justify: "flex-end" }, !s(t) && /* @__PURE__ */ e.createElement(e.Fragment, null, t.annotation.selectable.status !== void 0 && (!d || r) && /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(o, { label: r ? "Unfocus this guide" : "Focus on this guide" }, /* @__PURE__ */ e.createElement(n, { size: "1", variant: "ghost", color: r ? "blue" : "gray", leadingIcon: {
+    icon: E,
+    alt: "Focus"
+  }, onClick: () => l.setDebug({
+    ...i,
+    focusedGuideKeys: r ? {} : {
+      [t.key]: !0
+    }
+  }) })), /* @__PURE__ */ e.createElement(a, { px: "2", align: "center" }, /* @__PURE__ */ e.createElement(m, { h: "3", borderLeft: "px", borderColor: "gray-6" }))), /* @__PURE__ */ e.createElement(a, { gap: "1" }, /* @__PURE__ */ e.createElement(o, { label: t.annotation.selectable.status === "returned" ? "This guide was queried and can display" : t.annotation.selectable.status === "queried" ? "This guide was queried but cannot display" : t.annotation.selectable.status === "throttled" ? "This guide was queried and can display but is throttled currently" : "No component is present in the current location to display this guide" }, /* @__PURE__ */ e.createElement(n, { px: "1", size: "1", variant: "soft", color: t.annotation.selectable.status === "returned" ? "green" : t.annotation.selectable.status === "queried" ? "gray" : t.annotation.selectable.status === "throttled" ? "yellow" : "red", leadingIcon: {
+    icon: v,
+    alt: "Render"
+  } })), /* @__PURE__ */ e.createElement(o, { label: t.annotation.activatable.status ? "This guide can be activated at the current location" : "This guide cannot be activated at the current location" }, /* @__PURE__ */ e.createElement(n, { px: "1", size: "1", variant: "soft", color: t.annotation.activatable.status ? "green" : "red", leadingIcon: {
+    icon: y,
+    alt: "Target"
+  } }))), /* @__PURE__ */ e.createElement(a, { px: "2", align: "center" }, /* @__PURE__ */ e.createElement(m, { h: "3", borderLeft: "px", borderColor: "gray-6" }))), /* @__PURE__ */ e.createElement(a, { gap: "1" }, !s(t) && /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(o, { label: t.annotation.targetable.status ? "This user is being targeted" : t.annotation.targetable.message }, /* @__PURE__ */ e.createElement(n, { px: "1", size: "1", variant: "soft", color: t.annotation.targetable.status ? "green" : "red", leadingIcon: {
+    icon: x,
+    alt: "Target"
+  } })), /* @__PURE__ */ e.createElement(o, { label: t.annotation.archived.status ? "User has already dismissed this guide" : "User has not dismissed this guide" }, /* @__PURE__ */ e.createElement(n, { px: "1", size: "1", variant: "soft", color: t.annotation.archived.status ? "red" : "green", leadingIcon: {
+    icon: T,
+    alt: "Not archived"
+  } }))), /* @__PURE__ */ e.createElement(o, { label: s(t) ? "This guide has never been committed and published yet" : t.active ? "This guide is active" : "This guide is not active" }, /* @__PURE__ */ e.createElement(n, { px: "1", size: "1", variant: "soft", color: t.active ? "green" : "red", leadingIcon: t.active ? {
+    icon: C,
+    alt: "Active"
+  } : {
+    icon: k,
+    alt: "Inactive"
+  } })))));
+};
 export {
-  I as GuideRow
+  L as GuideRow
 };
 //# sourceMappingURL=GuideRow.mjs.map

package/dist/esm/modules/guide/components/Toolbar/V2/GuideRow.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"GuideRow.mjs","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/GuideRow.tsx"],"sourcesContent":["import { Button } from \"@telegraph/button\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport { Tag } from \"@telegraph/tag\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text } from \"@telegraph/typography\";\nimport {\n  CheckCircle2,\n  CircleDashed,\n  Code2,\n  Eye,\n  LocateFixed,\n  UserCircle2,\n} from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { GuideHoverCard } from \"./GuideHoverCard\";\nimport {\n  AnnotatedGuide,\n  UnknownGuide,\n  isUnknownGuide,\n} from \"./useInspectGuideClientStore\";\n\nconst Row = ({ children }: React.PropsWithChildren) => (\n  <Stack h=\"7\" px=\"2\" borderTop=\"px\" justify=\"space-between\" align=\"center\">\n    {children}\n  </Stack>\n);\n\ntype Props = {\n  guide: UnknownGuide | AnnotatedGuide;\n  orderIndex: number;\n};\n\nexport const GuideRow = ({ guide, orderIndex }: Props) => {\n  return (\n    <Row>\n      <GuideHoverCard guide={guide}>\n        <Stack h=\"6\" justify=\"flex-start\" align=\"center\" gap=\"2\">\n          <Tag\n            size=\"0\"\n            variant=\"soft\"\n            color={guide.bypass_global_group_limit ? \"blue\" : \"default\"}\n          >\n            {orderIndex + 1}\n          </Tag>\n          <Text as=\"code\" size=\"1\">\n            {guide.key}\n          </Text>\n        </Stack>\n      </GuideHoverCard>\n\n      <Stack justify=\"flex-end\">\n        {!isUnknownGuide(guide) && (\n          <>\n            <Stack gap=\"1\">\n              <Tooltip\n                label={\n                  guide.annotation.selectable.status === \"returned\"\n                    ? \"This guide was queried and can display\"\n                    : guide.annotation.selectable.status === \"queried\"\n                      ? \"This guide was queried but cannot display\"\n                      : guide.annotation.selectable.status === \"throttled\"\n                        ? \"This guide was queried and can display but is throttled currently\"\n                        : \"No component is present in the current location to display this guide\"\n                }\n              >\n                <Button\n                  px=\"1\"\n                  size=\"1\"\n                  variant=\"soft\"\n                  color={\n                    guide.annotation.selectable.status === \"returned\"\n                      ? \"green\"\n                      : guide.annotation.selectable.status === \"queried\"\n                        ? \"gray\"\n                        : guide.annotation.selectable.status === \"throttled\"\n                          ? \"yellow\"\n                          : \"red\"\n                  }\n                  leadingIcon={{ icon: Code2, alt: \"Render\" }}\n                />\n              </Tooltip>\n              <Tooltip\n                label={\n                  guide.annotation.activatable.status\n                    ? \"This guide can be activated at the current location\"\n                    : \"This guide cannot be activated at the current location\"\n                }\n              >\n                <Button\n                  px=\"1\"\n                  size=\"1\"\n                  variant=\"soft\"\n                  color={guide.annotation.activatable.status ? \"green\" : \"red\"}\n                  leadingIcon={{ icon: LocateFixed, alt: \"Target\" }}\n                />\n              </Tooltip>\n            </Stack>\n            <Stack px=\"2\" align=\"center\">\n              <Box h=\"3\" borderLeft=\"px\" borderColor=\"gray-6\" />\n            </Stack>\n          </>\n        )}\n        <Stack gap=\"1\">\n          {!isUnknownGuide(guide) && (\n            <>\n              <Tooltip\n                label={\n                  guide.annotation.targetable.status\n                    ? \"This user is being targeted\"\n                    : guide.annotation.targetable.message\n                }\n              >\n                <Button\n                  px=\"1\"\n                  size=\"1\"\n                  variant=\"soft\"\n                  color={guide.annotation.targetable.status ? \"green\" : \"red\"}\n                  leadingIcon={{ icon: UserCircle2, alt: \"Target\" }}\n                />\n              </Tooltip>\n              <Tooltip\n                label={\n                  guide.annotation.archived.status\n                    ? \"User has already dismissed this guide\"\n                    : \"User has not dismissed this guide\"\n                }\n              >\n                <Button\n                  px=\"1\"\n                  size=\"1\"\n                  variant=\"soft\"\n                  color={guide.annotation.archived.status ? \"red\" : \"green\"}\n                  leadingIcon={{ icon: Eye, alt: \"Not archived\" }}\n                />\n              </Tooltip>\n            </>\n          )}\n          <Tooltip\n            label={\n              isUnknownGuide(guide)\n                ? \"This guide has never been committed and published yet\"\n                : !guide.active\n                  ? \"This guide is not active\"\n                  : \"This guide is active\"\n            }\n          >\n            <Button\n              px=\"1\"\n              size=\"1\"\n              variant=\"soft\"\n              color={guide.active ? \"green\" : \"red\"}\n              leadingIcon={\n                guide.active\n                  ? { icon: CheckCircle2, alt: \"Active\" }\n                  : { icon: CircleDashed, alt: \"Inactive\" }\n              }\n            />\n          </Tooltip>\n        </Stack>\n      </Stack>\n    </Row>\n  );\n};\n"],"names":["Row","children","React","Stack","GuideRow","guide","orderIndex","GuideHoverCard","Tag","bypass_global_group_limit","Text","key","isUnknownGuide","Tooltip","annotation","selectable","status","Button","icon","Code2","alt","activatable","LocateFixed","Box","targetable","message","UserCircle2","archived","Eye","active","CheckCircle2","CircleDashed"],"mappings":"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"}
+{"version":3,"file":"GuideRow.mjs","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/GuideRow.tsx"],"sourcesContent":["import { useGuideContext, useStore } from \"@knocklabs/react-core\";\nimport { Button } from \"@telegraph/button\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport { Tag } from \"@telegraph/tag\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text } from \"@telegraph/typography\";\nimport {\n  CheckCircle2,\n  CircleDashed,\n  Code2,\n  Eye,\n  LocateFixed,\n  Pin,\n  UserCircle2,\n} from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { GuideHoverCard } from \"./GuideHoverCard\";\nimport {\n  AnnotatedGuide,\n  UnknownGuide,\n  isUnknownGuide,\n} from \"./useInspectGuideClientStore\";\n\nconst Row = ({ children }: React.PropsWithChildren) => (\n  <Stack h=\"7\" px=\"2\" borderTop=\"px\" justify=\"space-between\" align=\"center\">\n    {children}\n  </Stack>\n);\n\ntype Props = {\n  guide: UnknownGuide | AnnotatedGuide;\n  orderIndex: number;\n};\n\nexport const GuideRow = ({ guide, orderIndex }: Props) => {\n  const { client } = useGuideContext();\n  const { debugSettings } = useStore(client.store, (state) => ({\n    debugSettings: state.debug || {},\n  }));\n\n  const focusedGuideKeys = debugSettings.focusedGuideKeys || {};\n  const hasFocus = Object.keys(focusedGuideKeys).length > 0;\n  const isFocused = !!focusedGuideKeys[guide.key];\n\n  return (\n    <Row>\n      <GuideHoverCard guide={guide}>\n        <Stack h=\"6\" justify=\"flex-start\" align=\"center\" gap=\"2\">\n          <Tag\n            size=\"0\"\n            variant=\"soft\"\n            color={guide.bypass_global_group_limit ? \"blue\" : \"default\"}\n          >\n            {orderIndex + 1}\n          </Tag>\n          <Text\n            as=\"code\"\n            size=\"1\"\n            color={!hasFocus ? \"default\" : isFocused ? \"blue\" : \"disabled\"}\n          >\n            {guide.key}\n          </Text>\n        </Stack>\n      </GuideHoverCard>\n\n      <Stack justify=\"flex-end\">\n        {!isUnknownGuide(guide) && (\n          <>\n            {guide.annotation.selectable.status !== undefined &&\n              (!hasFocus || isFocused) && (\n                <>\n                  <Tooltip\n                    label={\n                      isFocused ? \"Unfocus this guide\" : \"Focus on this guide\"\n                    }\n                  >\n                    <Button\n                      size=\"1\"\n                      variant=\"ghost\"\n                      color={isFocused ? \"blue\" : \"gray\"}\n                      leadingIcon={{ icon: Pin, alt: \"Focus\" }}\n                      onClick={() =>\n                        client.setDebug({\n                          ...debugSettings,\n                          focusedGuideKeys: isFocused\n                            ? {}\n                            : { [guide.key]: true },\n                        })\n                      }\n                    />\n                  </Tooltip>\n                  <Stack px=\"2\" align=\"center\">\n                    <Box h=\"3\" borderLeft=\"px\" borderColor=\"gray-6\" />\n                  </Stack>\n                </>\n              )}\n            <Stack gap=\"1\">\n              <Tooltip\n                label={\n                  guide.annotation.selectable.status === \"returned\"\n                    ? \"This guide was queried and can display\"\n                    : guide.annotation.selectable.status === \"queried\"\n                      ? \"This guide was queried but cannot display\"\n                      : guide.annotation.selectable.status === \"throttled\"\n                        ? \"This guide was queried and can display but is throttled currently\"\n                        : \"No component is present in the current location to display this guide\"\n                }\n              >\n                <Button\n                  px=\"1\"\n                  size=\"1\"\n                  variant=\"soft\"\n                  color={\n                    guide.annotation.selectable.status === \"returned\"\n                      ? \"green\"\n                      : guide.annotation.selectable.status === \"queried\"\n                        ? \"gray\"\n                        : guide.annotation.selectable.status === \"throttled\"\n                          ? \"yellow\"\n                          : \"red\"\n                  }\n                  leadingIcon={{ icon: Code2, alt: \"Render\" }}\n                />\n              </Tooltip>\n              <Tooltip\n                label={\n                  guide.annotation.activatable.status\n                    ? \"This guide can be activated at the current location\"\n                    : \"This guide cannot be activated at the current location\"\n                }\n              >\n                <Button\n                  px=\"1\"\n                  size=\"1\"\n                  variant=\"soft\"\n                  color={guide.annotation.activatable.status ? \"green\" : \"red\"}\n                  leadingIcon={{ icon: LocateFixed, alt: \"Target\" }}\n                />\n              </Tooltip>\n            </Stack>\n            <Stack px=\"2\" align=\"center\">\n              <Box h=\"3\" borderLeft=\"px\" borderColor=\"gray-6\" />\n            </Stack>\n          </>\n        )}\n        <Stack gap=\"1\">\n          {!isUnknownGuide(guide) && (\n            <>\n              <Tooltip\n                label={\n                  guide.annotation.targetable.status\n                    ? \"This user is being targeted\"\n                    : guide.annotation.targetable.message\n                }\n              >\n                <Button\n                  px=\"1\"\n                  size=\"1\"\n                  variant=\"soft\"\n                  color={guide.annotation.targetable.status ? \"green\" : \"red\"}\n                  leadingIcon={{ icon: UserCircle2, alt: \"Target\" }}\n                />\n              </Tooltip>\n              <Tooltip\n                label={\n                  guide.annotation.archived.status\n                    ? \"User has already dismissed this guide\"\n                    : \"User has not dismissed this guide\"\n                }\n              >\n                <Button\n                  px=\"1\"\n                  size=\"1\"\n                  variant=\"soft\"\n                  color={guide.annotation.archived.status ? \"red\" : \"green\"}\n                  leadingIcon={{ icon: Eye, alt: \"Not archived\" }}\n                />\n              </Tooltip>\n            </>\n          )}\n          <Tooltip\n            label={\n              isUnknownGuide(guide)\n                ? \"This guide has never been committed and published yet\"\n                : !guide.active\n                  ? \"This guide is not active\"\n                  : \"This guide is active\"\n            }\n          >\n            <Button\n              px=\"1\"\n              size=\"1\"\n              variant=\"soft\"\n              color={guide.active ? \"green\" : \"red\"}\n              leadingIcon={\n                guide.active\n                  ? { icon: CheckCircle2, alt: \"Active\" }\n                  : { icon: CircleDashed, alt: \"Inactive\" }\n              }\n            />\n          </Tooltip>\n        </Stack>\n      </Stack>\n    </Row>\n  );\n};\n"],"names":["Row","children","React","Stack","GuideRow","guide","orderIndex","client","useGuideContext","debugSettings","useStore","store","state","debug","focusedGuideKeys","hasFocus","Object","keys","length","isFocused","key","GuideHoverCard","Tag","bypass_global_group_limit","Text","isUnknownGuide","annotation","selectable","status","undefined","Tooltip","Button","icon","Pin","alt","setDebug","Box","Code2","activatable","LocateFixed","targetable","message","UserCircle2","archived","Eye","active","CheckCircle2","CircleDashed"],"mappings":"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"}

package/dist/esm/modules/guide/components/Toolbar/V2/V2.mjs

@@ -1,54 +1,71 @@
-import { useGuideContext as p } from "@knocklabs/react-core";
+import { useGuideContext as b } from "@knocklabs/react-core";
 import { Button as d } from "@telegraph/button";
-import { Box as a, Stack as m } from "@telegraph/layout";
-import { Undo2 as f, Minimize2 as b } from "lucide-react";
+import { Box as c, Stack as p } from "@telegraph/layout";
+import { Text as x } from "@telegraph/typography";
+import { Undo2 as y, Minimize2 as D } from "lucide-react";
 import e from "react";
-import { KnockButton as E } from "../KnockButton.mjs";
-import { TOOLBAR_Z_INDEX as y } from "../shared.mjs";
+import { KnockButton as h } from "../KnockButton.mjs";
+import { TOOLBAR_Z_INDEX as w } from "../shared.mjs";
 /* empty css             */
-import { GuideContextDetails as g } from "./GuideContextDetails.mjs";
-import { GuideRow as x } from "./GuideRow.mjs";
-import { GuidesListDisplaySelect as C } from "./GuidesListDisplaySelect.mjs";
-import { detectToolbarParam as w } from "./helpers.mjs";
-import { useInspectGuideClientStore as D } from "./useInspectGuideClientStore.mjs";
-const k = ({
-  guides: r,
-  displayOption: i
-}) => r.map((o, n) => {
+import { DragHandle as C, DRAG_HANDLE_OVERHANG as G } from "./DragHandle.mjs";
+import { GuideContextDetails as R } from "./GuideContextDetails.mjs";
+import { GuideRow as k } from "./GuideRow.mjs";
+import { GuidesListDisplaySelect as I } from "./GuidesListDisplaySelect.mjs";
+import { detectToolbarParam as S } from "./helpers.mjs";
+import { useDraggable as z } from "./useDraggable.mjs";
+import { useInspectGuideClientStore as L } from "./useInspectGuideClientStore.mjs";
+const _ = ({
+  guides: i,
+  displayOption: t
+}) => i.map((o, n) => {
   const {
     isEligible: l,
-    isQualified: u,
-    selectable: s
-  } = o.annotation, t = l && u, c = t && s.status === "returned";
-  return i === "only-displaying" && !c || i === "only-displayable" && !t || i === "all-eligible" && !l ? null : /* @__PURE__ */ e.createElement(x, { key: o.key, guide: o, orderIndex: n });
-}), j = () => {
+    isQualified: s,
+    selectable: a
+  } = o.annotation, r = l && s, m = r && a.status === "returned";
+  return t === "only-displaying" && !m || t === "only-displayable" && !r || t === "all-eligible" && !l ? null : /* @__PURE__ */ e.createElement(k, { key: o.key, guide: o, orderIndex: n });
+}), q = () => {
   const {
-    client: r
-  } = p(), [i, o] = e.useState("only-displayable"), [n, l] = e.useState(w()), [u, s] = e.useState(!0);
+    client: i
+  } = b(), [t, o] = e.useState("only-displayable"), [n, l] = e.useState(S()), [s, a] = e.useState(!0);
   e.useEffect(() => {
     if (n)
-      return r.setDebug(), () => {
-        r.unsetDebug();
+      return i.setDebug(), () => {
+        i.unsetDebug();
       };
-  }, [n, r]);
-  const t = D();
-  return t ? /* @__PURE__ */ e.createElement(a, { position: "fixed", top: "4", right: "4", style: {
-    zIndex: y
-  } }, u ? /* @__PURE__ */ e.createElement(E, { onClick: () => s(!1) }) : /* @__PURE__ */ e.createElement(m, { direction: "column", backgroundColor: "surface-2", shadow: "2", rounded: "3", border: "px", overflow: "hidden", style: {
+  }, [n, i]);
+  const r = e.useRef(null), {
+    position: m,
+    isDragging: f,
+    handlePointerDown: g
+  } = z({
+    elementRef: r,
+    reclampDeps: [s],
+    rightPadding: G,
+    initialPosition: {
+      top: 16,
+      right: 16
+    }
+  }), u = L();
+  return u ? /* @__PURE__ */ e.createElement(c, { tgphRef: r, position: "fixed", style: {
+    top: m.top + "px",
+    right: m.right + "px",
+    zIndex: w
+  } }, /* @__PURE__ */ e.createElement(C, { onPointerDown: g, isDragging: f }), s ? /* @__PURE__ */ e.createElement(h, { onClick: () => a(!1), positioned: !1 }) : /* @__PURE__ */ e.createElement(p, { direction: "column", backgroundColor: "surface-2", shadow: "2", rounded: "3", border: "px", overflow: "hidden", style: {
     width: "400px"
-  } }, /* @__PURE__ */ e.createElement(m, { w: "full", p: "2", justify: "space-between", direction: "row", style: {
+  } }, /* @__PURE__ */ e.createElement(p, { w: "full", p: "2", justify: "space-between", direction: "row", style: {
     boxSizing: "border-box"
-  } }, /* @__PURE__ */ e.createElement(a, { style: {
+  } }, /* @__PURE__ */ e.createElement(c, { style: {
     width: "220px"
-  } }, /* @__PURE__ */ e.createElement(C, { value: i, onChange: (c) => o(c) })), /* @__PURE__ */ e.createElement(m, { gap: "2" }, /* @__PURE__ */ e.createElement(d, { onClick: () => l(!1), size: "1", variant: "soft", trailingIcon: {
-    icon: f,
+  } }, /* @__PURE__ */ e.createElement(I, { value: t, onChange: (E) => o(E) })), /* @__PURE__ */ e.createElement(p, { gap: "2" }, /* @__PURE__ */ e.createElement(d, { onClick: () => l(!1), size: "1", variant: "soft", trailingIcon: {
+    icon: y,
     "aria-hidden": !0
-  } }, "Exit"), /* @__PURE__ */ e.createElement(d, { onClick: () => s(!0), size: "1", variant: "soft", leadingIcon: {
-    icon: b,
+  } }, "Exit"), /* @__PURE__ */ e.createElement(d, { onClick: () => a(!0), size: "1", variant: "soft", leadingIcon: {
+    icon: D,
     alt: "Collapse guide toolbar"
-  } }))), /* @__PURE__ */ e.createElement(a, { w: "full" }, t.error && /* @__PURE__ */ e.createElement(a, null, t.error), /* @__PURE__ */ e.createElement(g, null), /* @__PURE__ */ e.createElement(k, { guides: t.guides, displayOption: i })))) : null;
+  } }))), /* @__PURE__ */ e.createElement(c, { w: "full" }, /* @__PURE__ */ e.createElement(R, null), u.error && /* @__PURE__ */ e.createElement(c, { px: "2", pb: "1" }, /* @__PURE__ */ e.createElement(x, { as: "span", size: "0", weight: "medium", color: "red" }, u.error)), /* @__PURE__ */ e.createElement(_, { guides: u.guides, displayOption: t })))) : null;
 };
 export {
-  j as V2
+  q as V2
 };
 //# sourceMappingURL=V2.mjs.map

package/dist/esm/modules/guide/components/Toolbar/V2/V2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"V2.mjs","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/V2.tsx"],"sourcesContent":["import { useGuideContext } from \"@knocklabs/react-core\";\nimport { Button } from \"@telegraph/button\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport { Minimize2, Undo2 } from \"lucide-react\";\nimport React from \"react\";\n\nimport { KnockButton } from \"../KnockButton\";\nimport { TOOLBAR_Z_INDEX } from \"../shared\";\nimport \"../styles.css\";\n\nimport { GuideContextDetails } from \"./GuideContextDetails\";\nimport { GuideRow } from \"./GuideRow\";\nimport {\n  DisplayOption,\n  GuidesListDisplaySelect,\n} from \"./GuidesListDisplaySelect\";\nimport { detectToolbarParam } from \"./helpers\";\nimport {\n  InspectionResult,\n  useInspectGuideClientStore,\n} from \"./useInspectGuideClientStore\";\n\nconst GuidesList = ({\n  guides,\n  displayOption,\n}: {\n  guides: InspectionResult[\"guides\"];\n  displayOption: DisplayOption;\n}) => {\n  return guides.map((guide, idx) => {\n    const { isEligible, isQualified, selectable } = guide.annotation;\n    const isDisplayable = isEligible && isQualified;\n    const isDisplaying = isDisplayable && selectable.status === \"returned\";\n\n    if (displayOption === \"only-displaying\" && !isDisplaying) {\n      return null;\n    }\n    if (displayOption === \"only-displayable\" && !isDisplayable) {\n      return null;\n    }\n    if (displayOption === \"all-eligible\" && !isEligible) {\n      return null;\n    }\n\n    return <GuideRow key={guide.key} guide={guide} orderIndex={idx} />;\n  });\n};\n\nexport const V2 = () => {\n  const { client } = useGuideContext();\n\n  const [guidesListDisplayOption, setGuidesListDisplayOption] =\n    React.useState<DisplayOption>(\"only-displayable\");\n\n  const [isVisible, setIsVisible] = React.useState(detectToolbarParam());\n  const [isCollapsed, setIsCollapsed] = React.useState(true);\n\n  React.useEffect(() => {\n    if (!isVisible) {\n      return;\n    }\n\n    client.setDebug();\n\n    return () => {\n      client.unsetDebug();\n    };\n  }, [isVisible, client]);\n\n  const result = useInspectGuideClientStore();\n  if (!result) {\n    return null;\n  }\n\n  return (\n    <Box position=\"fixed\" top=\"4\" right=\"4\" style={{ zIndex: TOOLBAR_Z_INDEX }}>\n      {isCollapsed ? (\n        <KnockButton onClick={() => setIsCollapsed(false)} />\n      ) : (\n        <Stack\n          direction=\"column\"\n          backgroundColor=\"surface-2\"\n          shadow=\"2\"\n          rounded=\"3\"\n          border=\"px\"\n          overflow=\"hidden\"\n          style={{ width: \"400px\" }}\n        >\n          <Stack\n            w=\"full\"\n            p=\"2\"\n            justify=\"space-between\"\n            direction=\"row\"\n            style={{ boxSizing: \"border-box\" }}\n          >\n            <Box style={{ width: \"220px\" }}>\n              <GuidesListDisplaySelect\n                value={guidesListDisplayOption}\n                onChange={(opt) => setGuidesListDisplayOption(opt)}\n              />\n            </Box>\n\n            <Stack gap=\"2\">\n              <Button\n                onClick={() => setIsVisible(false)}\n                size=\"1\"\n                variant=\"soft\"\n                trailingIcon={{ icon: Undo2, \"aria-hidden\": true }}\n              >\n                Exit\n              </Button>\n              <Button\n                onClick={() => setIsCollapsed(true)}\n                size=\"1\"\n                variant=\"soft\"\n                leadingIcon={{ icon: Minimize2, alt: \"Collapse guide toolbar\" }}\n              />\n            </Stack>\n          </Stack>\n\n          <Box w=\"full\">\n            {result.error && <Box>{result.error}</Box>}\n            <GuideContextDetails />\n            <GuidesList\n              guides={result.guides}\n              displayOption={guidesListDisplayOption}\n            />\n          </Box>\n        </Stack>\n      )}\n    </Box>\n  );\n};\n"],"names":["GuidesList","guides","displayOption","map","guide","idx","isEligible","isQualified","selectable","annotation","isDisplayable","isDisplaying","status","GuideRow","key","V2","client","useGuideContext","guidesListDisplayOption","setGuidesListDisplayOption","React","useState","isVisible","setIsVisible","detectToolbarParam","isCollapsed","setIsCollapsed","useEffect","setDebug","unsetDebug","result","useInspectGuideClientStore","Box","zIndex","TOOLBAR_Z_INDEX","KnockButton","Stack","width","boxSizing","GuidesListDisplaySelect","opt","Button","icon","Undo2","Minimize2","alt","error","GuideContextDetails"],"mappings":";;;;;;;;;;;;;AAsBA,MAAMA,IAAaA,CAAC;AAAA,EAClBC,QAAAA;AAAAA,EACAC,eAAAA;AAIF,MACSD,EAAOE,IAAI,CAACC,GAAOC,MAAQ;AAC1B,QAAA;AAAA,IAAEC,YAAAA;AAAAA,IAAYC,aAAAA;AAAAA,IAAaC,YAAAA;AAAAA,MAAeJ,EAAMK,YAChDC,IAAgBJ,KAAcC,GAC9BI,IAAeD,KAAiBF,EAAWI,WAAW;AAQxDV,SANAA,MAAkB,qBAAqB,CAACS,KAGxCT,MAAkB,sBAAsB,CAACQ,KAGzCR,MAAkB,kBAAkB,CAACI,IAChC,uCAGDO,GAAS,EAAA,KAAKT,EAAMU,KAAK,OAAAV,GAAc,YAAYC,GAAO;AAAA,CACnE,GAGUU,IAAKA,MAAM;AAChB,QAAA;AAAA,IAAEC,QAAAA;AAAAA,MAAWC,EAAgB,GAE7B,CAACC,GAAyBC,CAA0B,IACxDC,EAAMC,SAAwB,kBAAkB,GAE5C,CAACC,GAAWC,CAAY,IAAIH,EAAMC,SAASG,GAAoB,GAC/D,CAACC,GAAaC,CAAc,IAAIN,EAAMC,SAAS,EAAI;AAEzDD,EAAAA,EAAMO,UAAU,MAAM;AACpB,QAAKL;AAILN,aAAAA,EAAOY,SAAS,GAET,MAAM;AACXZ,QAAAA,EAAOa,WAAW;AAAA,MACpB;AAAA,EAAA,GACC,CAACP,GAAWN,CAAM,CAAC;AAEtB,QAAMc,IAASC,EAA2B;AAC1C,SAAKD,IAKHV,gBAAAA,EAAA,cAACY,KAAI,UAAS,SAAQ,KAAI,KAAI,OAAM,KAAI,OAAO;AAAA,IAAEC,QAAQC;AAAAA,EAAgB,EAAA,GACtET,IACCL,gBAAAA,EAAA,cAACe,GAAY,EAAA,SAAS,MAAMT,EAAe,EAAK,EAAE,CAAA,IAEjDN,gBAAAA,EAAA,cAAAgB,GAAA,EACC,WAAU,UACV,iBAAgB,aAChB,QAAO,KACP,SAAQ,KACR,QAAO,MACP,UAAS,UACT,OAAO;AAAA,IAAEC,OAAO;AAAA,EAAQ,EAAA,GAEvBjB,gBAAAA,EAAA,cAAAgB,GAAA,EACC,GAAE,QACF,GAAE,KACF,SAAQ,iBACR,WAAU,OACV,OAAO;AAAA,IAAEE,WAAW;AAAA,EAAa,EAAA,GAEhClB,gBAAAA,EAAA,cAAAY,GAAA,EAAI,OAAO;AAAA,IAAEK,OAAO;AAAA,EAAA,EAAQ,GAC1BjB,gBAAAA,EAAA,cAAAmB,GAAA,EACC,OAAOrB,GACP,UAAWsB,CAAAA,MAAQrB,EAA2BqB,CAAG,EAAE,CAAA,CAEvD,GAEApB,gBAAAA,EAAA,cAACgB,GAAM,EAAA,KAAI,IACT,GAAAhB,gBAAAA,EAAA,cAACqB,GACC,EAAA,SAAS,MAAMlB,EAAa,EAAK,GACjC,MAAK,KACL,SAAQ,QACR,cAAc;AAAA,IAAEmB,MAAMC;AAAAA,IAAO,eAAe;AAAA,EAAA,EAAO,GAAA,MAGrD,GACAvB,gBAAAA,EAAA,cAACqB,KACC,SAAS,MAAMf,EAAe,EAAI,GAClC,MAAK,KACL,SAAQ,QACR,aAAa;AAAA,IAAEgB,MAAME;AAAAA,IAAWC,KAAK;AAAA,EAAA,EAA2B,CAAA,CAEpE,CACF,GAEAzB,gBAAAA,EAAA,cAACY,GAAI,EAAA,GAAE,OACJF,GAAAA,EAAOgB,SAAS1B,gBAAAA,EAAA,cAACY,GAAKF,MAAAA,EAAOgB,KAAM,GACnC1B,gBAAAA,EAAA,cAAA2B,GAAA,IAAmB,GACpB3B,gBAAAA,EAAA,cAACpB,GACC,EAAA,QAAQ8B,EAAO7B,QACf,eAAeiB,EAAAA,CAAwB,CAE3C,CACF,CAEJ,IA3DO;AA6DX;"}
+{"version":3,"file":"V2.mjs","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/V2.tsx"],"sourcesContent":["import { useGuideContext } from \"@knocklabs/react-core\";\nimport { Button } from \"@telegraph/button\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport { Text } from \"@telegraph/typography\";\nimport { Minimize2, Undo2 } from \"lucide-react\";\nimport React from \"react\";\n\nimport { KnockButton } from \"../KnockButton\";\nimport { TOOLBAR_Z_INDEX } from \"../shared\";\nimport \"../styles.css\";\n\nimport { DRAG_HANDLE_OVERHANG, DragHandle } from \"./DragHandle\";\nimport { GuideContextDetails } from \"./GuideContextDetails\";\nimport { GuideRow } from \"./GuideRow\";\nimport {\n  DisplayOption,\n  GuidesListDisplaySelect,\n} from \"./GuidesListDisplaySelect\";\nimport { detectToolbarParam } from \"./helpers\";\nimport { useDraggable } from \"./useDraggable\";\nimport {\n  InspectionResult,\n  useInspectGuideClientStore,\n} from \"./useInspectGuideClientStore\";\n\nconst GuidesList = ({\n  guides,\n  displayOption,\n}: {\n  guides: InspectionResult[\"guides\"];\n  displayOption: DisplayOption;\n}) => {\n  return guides.map((guide, idx) => {\n    const { isEligible, isQualified, selectable } = guide.annotation;\n    const isDisplayable = isEligible && isQualified;\n    const isDisplaying = isDisplayable && selectable.status === \"returned\";\n\n    if (displayOption === \"only-displaying\" && !isDisplaying) {\n      return null;\n    }\n    if (displayOption === \"only-displayable\" && !isDisplayable) {\n      return null;\n    }\n    if (displayOption === \"all-eligible\" && !isEligible) {\n      return null;\n    }\n\n    return <GuideRow key={guide.key} guide={guide} orderIndex={idx} />;\n  });\n};\n\nexport const V2 = () => {\n  const { client } = useGuideContext();\n\n  const [guidesListDisplayOption, setGuidesListDisplayOption] =\n    React.useState<DisplayOption>(\"only-displayable\");\n\n  const [isVisible, setIsVisible] = React.useState(detectToolbarParam());\n  const [isCollapsed, setIsCollapsed] = React.useState(true);\n\n  React.useEffect(() => {\n    if (!isVisible) {\n      return;\n    }\n\n    client.setDebug();\n\n    return () => {\n      client.unsetDebug();\n    };\n  }, [isVisible, client]);\n\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const { position, isDragging, handlePointerDown } = useDraggable({\n    elementRef: containerRef,\n    reclampDeps: [isCollapsed],\n    rightPadding: DRAG_HANDLE_OVERHANG,\n    initialPosition: { top: 16, right: 16 },\n  });\n\n  const result = useInspectGuideClientStore();\n  if (!result) {\n    return null;\n  }\n\n  return (\n    <Box\n      tgphRef={containerRef}\n      position=\"fixed\"\n      style={{\n        top: position.top + \"px\",\n        right: position.right + \"px\",\n        zIndex: TOOLBAR_Z_INDEX,\n      }}\n    >\n      <DragHandle onPointerDown={handlePointerDown} isDragging={isDragging} />\n      {isCollapsed ? (\n        <KnockButton onClick={() => setIsCollapsed(false)} positioned={false} />\n      ) : (\n        <Stack\n          direction=\"column\"\n          backgroundColor=\"surface-2\"\n          shadow=\"2\"\n          rounded=\"3\"\n          border=\"px\"\n          overflow=\"hidden\"\n          style={{ width: \"400px\" }}\n        >\n          <Stack\n            w=\"full\"\n            p=\"2\"\n            justify=\"space-between\"\n            direction=\"row\"\n            style={{ boxSizing: \"border-box\" }}\n          >\n            <Box style={{ width: \"220px\" }}>\n              <GuidesListDisplaySelect\n                value={guidesListDisplayOption}\n                onChange={(opt) => setGuidesListDisplayOption(opt)}\n              />\n            </Box>\n\n            <Stack gap=\"2\">\n              <Button\n                onClick={() => setIsVisible(false)}\n                size=\"1\"\n                variant=\"soft\"\n                trailingIcon={{ icon: Undo2, \"aria-hidden\": true }}\n              >\n                Exit\n              </Button>\n              <Button\n                onClick={() => setIsCollapsed(true)}\n                size=\"1\"\n                variant=\"soft\"\n                leadingIcon={{ icon: Minimize2, alt: \"Collapse guide toolbar\" }}\n              />\n            </Stack>\n          </Stack>\n\n          <Box w=\"full\">\n            <GuideContextDetails />\n            {result.error && (\n              <Box px=\"2\" pb=\"1\">\n                <Text as=\"span\" size=\"0\" weight=\"medium\" color=\"red\">\n                  {result.error}\n                </Text>\n              </Box>\n            )}\n            <GuidesList\n              guides={result.guides}\n              displayOption={guidesListDisplayOption}\n            />\n          </Box>\n        </Stack>\n      )}\n    </Box>\n  );\n};\n"],"names":["GuidesList","guides","displayOption","map","guide","idx","isEligible","isQualified","selectable","annotation","isDisplayable","isDisplaying","status","GuideRow","key","V2","client","useGuideContext","guidesListDisplayOption","setGuidesListDisplayOption","React","useState","isVisible","setIsVisible","detectToolbarParam","isCollapsed","setIsCollapsed","useEffect","setDebug","unsetDebug","containerRef","useRef","position","isDragging","handlePointerDown","useDraggable","elementRef","reclampDeps","rightPadding","DRAG_HANDLE_OVERHANG","initialPosition","top","right","result","useInspectGuideClientStore","Box","zIndex","TOOLBAR_Z_INDEX","DragHandle","KnockButton","Stack","width","boxSizing","GuidesListDisplaySelect","opt","Button","icon","Undo2","Minimize2","alt","GuideContextDetails","error","Text"],"mappings":"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"}

package/dist/esm/modules/guide/components/Toolbar/V2/useDraggable.mjs

@@ -0,0 +1,74 @@
+import e from "react";
+const C = {
+  top: 16,
+  right: 16
+};
+function L(n, i, h, o = 0) {
+  const r = window.innerWidth, f = window.innerHeight, w = i + o, p = r - n.right - i, d = Math.max(0, Math.min(p, r - w)), s = Math.max(0, Math.min(n.top, f - h)), u = r - d - i;
+  return {
+    top: s,
+    right: u
+  };
+}
+function b({
+  elementRef: n,
+  initialPosition: i = C,
+  reclampDeps: h = [],
+  rightPadding: o = 0
+}) {
+  const [r, f] = e.useState(i), [w, p] = e.useState(!1), d = e.useRef(r);
+  d.current = r;
+  const s = e.useRef({
+    x: 0,
+    y: 0
+  }), u = e.useRef({
+    top: 0,
+    right: 0
+  }), c = e.useRef(null), m = e.useRef(!1), a = e.useRef(null), v = e.useCallback(() => {
+    const t = n.current;
+    if (!t) return;
+    const l = t.getBoundingClientRect();
+    f((g) => L(g, l.width, l.height, o));
+  }, [n, o]), P = e.useCallback((t) => {
+    t.preventDefault(), s.current = {
+      x: t.clientX,
+      y: t.clientY
+    }, u.current = {
+      ...d.current
+    }, m.current = !0, p(!0);
+    const l = (E) => {
+      m.current && c.current === null && (c.current = requestAnimationFrame(() => {
+        if (c.current = null, !m.current) return;
+        const A = E.clientX - s.current.x, F = E.clientY - s.current.y, M = {
+          top: u.current.top + F,
+          right: u.current.right - A
+        }, x = n.current;
+        if (!x) return;
+        const D = x.getBoundingClientRect(), y = L(M, D.width, D.height, o);
+        f(y);
+      }));
+    }, g = () => {
+      m.current = !1, p(!1), c.current !== null && (cancelAnimationFrame(c.current), c.current = null), document.removeEventListener("pointermove", l), document.removeEventListener("pointerup", R), a.current = null;
+    }, R = () => g();
+    document.addEventListener("pointermove", l), document.addEventListener("pointerup", R), a.current = g;
+  }, [n, o]);
+  return e.useEffect(() => () => {
+    var t;
+    (t = a.current) == null || t.call(a);
+  }, []), e.useEffect(() => {
+    const t = () => v();
+    return window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
+  }, [v]), e.useEffect(() => {
+    const t = requestAnimationFrame(() => v());
+    return () => cancelAnimationFrame(t);
+  }, h), {
+    position: r,
+    isDragging: w,
+    handlePointerDown: P
+  };
+}
+export {
+  L as clampPosition,
+  b as useDraggable
+};
+//# sourceMappingURL=useDraggable.mjs.map