@knocklabs/react 0.11.18 → 0.11.19

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

@@ -1,80 +1,112 @@
-import { useGuideContext as h, useStore as y } from "@knocklabs/react-core";
-import { Button as d } from "@telegraph/button";
-import { Box as x, Stack as f } from "@telegraph/layout";
-import { Tooltip as m } from "@telegraph/tooltip";
-import { Text as E } from "@telegraph/typography";
-import { ChevronLeft as v, ChevronRight as k, X as C } from "lucide-react";
-import * as t from "react";
-import { GUIDE_ROW_DATA_SELECTOR as T } from "./GuideRow.mjs";
-import { sharedTooltipProps as p } from "./helpers.mjs";
-const b = 60, g = (o, i) => {
+import { useGuideContext as v, useStore as x } from "@knocklabs/react-core";
+import { Button as f } from "@telegraph/button";
+import { Box as C, Stack as m } from "@telegraph/layout";
+import { Tooltip as p } from "@telegraph/tooltip";
+import { Text as b } from "@telegraph/typography";
+import { ChevronLeft as w, ChevronRight as T, X as S } from "lucide-react";
+import * as e from "react";
+import { GUIDE_ROW_DATA_SELECTOR as O } from "./GuideRow.mjs";
+import { Kbd as d } from "./Kbd.mjs";
+import { sharedTooltipProps as E } from "./helpers.mjs";
+const h = 60, R = ",", G = "/", I = (r, l) => {
   requestAnimationFrame(() => {
-    const r = o.querySelector(`[${T}="${CSS.escape(i)}"]`);
-    if (!r || !(r instanceof HTMLElement)) return;
-    const e = o.getBoundingClientRect(), c = r.getBoundingClientRect();
-    c.top < e.top ? o.scrollTo({
-      top: o.scrollTop - (e.top - c.top) - b,
+    const o = r.querySelector(`[${O}="${CSS.escape(l)}"]`);
+    if (!o || !(o instanceof HTMLElement)) return;
+    const t = r.getBoundingClientRect(), n = o.getBoundingClientRect();
+    n.top < t.top ? r.scrollTo({
+      top: r.scrollTop - (t.top - n.top) - h,
       behavior: "smooth"
-    }) : c.bottom > e.bottom && o.scrollTo({
-      top: o.scrollTop + (c.bottom - e.bottom) + b,
+    }) : n.bottom > t.bottom && r.scrollTo({
+      top: r.scrollTop + (n.bottom - t.bottom) + h,
       behavior: "smooth"
     });
   });
-}, z = ({
-  guides: o,
-  guideListRef: i
+}, y = ({
+  guides: r,
+  currentKey: l,
+  focusGuide: o
+}) => {
+  const t = r.filter((c) => !!c.annotation.selectable.status);
+  if (t.length === 0) return;
+  if (!l) {
+    o(t[t.length - 1].key);
+    return;
+  }
+  const n = t.findIndex((c) => c.key === l), s = n <= 0 ? void 0 : t[n - 1];
+  s && o(s.key);
+}, k = ({
+  guides: r,
+  currentKey: l,
+  focusGuide: o
+}) => {
+  const t = r.filter((c) => !!c.annotation.selectable.status);
+  if (t.length === 0) return;
+  if (!l) {
+    o(t[0].key);
+    return;
+  }
+  const n = t.findIndex((c) => c.key === l), s = n < 0 || n + 1 > t.length - 1 ? void 0 : t[n + 1];
+  s && o(s.key);
+}, A = ({
+  guides: r,
+  guideListRef: l
 }) => {
   const {
-    client: r
-  } = h(), {
-    debugSettings: e
-  } = y(r.store, (n) => ({
-    debugSettings: n.debug
-  })), c = Object.keys((e == null ? void 0 : e.focusedGuideKeys) || {});
-  if (!(c.length > 0))
-    return null;
-  const a = c[0];
-  return /* @__PURE__ */ t.createElement(x, { borderTop: "px", px: "3", py: "1", overflow: "hidden", backgroundColor: "blue-2" }, /* @__PURE__ */ t.createElement(f, { align: "center", justify: "space-between", gap: "4" }, /* @__PURE__ */ t.createElement(E, { as: "span", size: "1", weight: "medium", color: "blue", style: {
+    client: o
+  } = v(), {
+    debugSettings: t
+  } = x(o.store, (i) => ({
+    debugSettings: i.debug
+  })), n = Object.keys((t == null ? void 0 : t.focusedGuideKeys) || {}), s = n.length > 0, c = n[0], g = e.useCallback((i) => {
+    o.setDebug({
+      ...o.store.state.debug,
+      focusedGuideKeys: {
+        [i]: !0
+      }
+    }), l.current && I(l.current, i);
+  }, [o, l]), u = e.useRef({
+    guides: r,
+    currentKey: c,
+    focusGuide: g
+  });
+  return e.useEffect(() => {
+    u.current = {
+      guides: r,
+      currentKey: c,
+      focusGuide: g
+    };
+  }), e.useEffect(() => {
+    const i = (a) => {
+      !a.ctrlKey || a.repeat || (a.key === R ? (a.preventDefault(), y(u.current)) : a.key === G && (a.preventDefault(), k(u.current)));
+    };
+    return window.addEventListener("keydown", i), () => {
+      window.removeEventListener("keydown", i);
+    };
+  }, []), s ? /* @__PURE__ */ e.createElement(C, { borderTop: "px", px: "3", py: "1", overflow: "hidden", backgroundColor: "blue-2" }, /* @__PURE__ */ e.createElement(m, { align: "center", justify: "space-between", gap: "4" }, /* @__PURE__ */ e.createElement(b, { as: "span", size: "1", weight: "medium", color: "blue", style: {
     display: "block",
     overflow: "hidden",
     textOverflow: "ellipsis",
     whiteSpace: "nowrap",
     minWidth: 0
-  } }, "Focus mode: ", a), /* @__PURE__ */ t.createElement(f, { align: "center", gap: "1", style: {
+  } }, "Focus mode: ", c), /* @__PURE__ */ e.createElement(m, { align: "center", gap: "1", style: {
     flexShrink: 0
-  } }, /* @__PURE__ */ t.createElement(m, { label: "Focus previous guide", ...p }, /* @__PURE__ */ t.createElement(d, { size: "0", variant: "ghost", color: "blue", leadingIcon: {
-    icon: v,
+  } }, /* @__PURE__ */ e.createElement(p, { label: /* @__PURE__ */ e.createElement(b, { as: "span", size: "1" }, "Focus previous guide", /* @__PURE__ */ e.createElement(m, { display: "inline-block", ml: "3" }, /* @__PURE__ */ e.createElement(d, null, "ctrl"), " + ", /* @__PURE__ */ e.createElement(d, null, ","))), ...E }, /* @__PURE__ */ e.createElement(f, { size: "0", variant: "ghost", color: "blue", leadingIcon: {
+    icon: w,
     alt: "Previous guide"
-  }, onClick: () => {
-    const n = o.filter((s) => !!s.annotation.selectable.status), u = n.findIndex((s) => s.key === a), l = u <= 0 ? void 0 : n[u - 1];
-    l && (r.setDebug({
-      ...e,
-      focusedGuideKeys: {
-        [l.key]: !0
-      }
-    }), i.current && g(i.current, l.key));
-  } })), /* @__PURE__ */ t.createElement(m, { label: "Focus next guide", ...p }, /* @__PURE__ */ t.createElement(d, { size: "0", variant: "ghost", color: "blue", leadingIcon: {
-    icon: k,
+  }, onClick: () => y(u.current) })), /* @__PURE__ */ e.createElement(p, { label: /* @__PURE__ */ e.createElement(b, { as: "span", size: "1" }, "Focus next guide", /* @__PURE__ */ e.createElement(m, { display: "inline-block", ml: "3" }, /* @__PURE__ */ e.createElement(d, null, "ctrl"), " + ", /* @__PURE__ */ e.createElement(d, null, "/"))), ...E }, /* @__PURE__ */ e.createElement(f, { size: "0", variant: "ghost", color: "blue", leadingIcon: {
+    icon: T,
     alt: "Next guide"
-  }, onClick: () => {
-    const n = o.filter((s) => !!s.annotation.selectable.status), u = n.findIndex((s) => s.key === a), l = u < 0 || u + 1 > n.length - 1 ? void 0 : n[u + 1];
-    l && (r.setDebug({
-      ...e,
-      focusedGuideKeys: {
-        [l.key]: !0
-      }
-    }), i.current && g(i.current, l.key));
-  } })), /* @__PURE__ */ t.createElement(m, { label: "Exit focus mode", ...p }, /* @__PURE__ */ t.createElement(d, { size: "0", variant: "ghost", color: "blue", leadingIcon: {
-    icon: C,
+  }, onClick: () => k(u.current) })), /* @__PURE__ */ e.createElement(p, { label: "Exit focus mode", ...E }, /* @__PURE__ */ e.createElement(f, { size: "0", variant: "ghost", color: "blue", leadingIcon: {
+    icon: S,
     alt: "Clear focus"
   }, onClick: () => {
-    r.setDebug({
-      ...e,
+    o.setDebug({
+      ...t,
       focusedGuideKeys: {}
     });
-  } })))));
+  } }))))) : null;
 };
 export {
-  z as FocusChin
+  A as FocusChin
 };
 //# sourceMappingURL=FocusChin.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"FocusChin.mjs","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/FocusChin.tsx"],"sourcesContent":["import { useGuideContext, useStore } from \"@knocklabs/react-core\";\nimport { Button } from \"@telegraph/button\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text } from \"@telegraph/typography\";\nimport { ChevronLeft, ChevronRight, X } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { GUIDE_ROW_DATA_SELECTOR } from \"./GuideRow\";\nimport { sharedTooltipProps } from \"./helpers\";\nimport { InspectionResultOk } from \"./useInspectGuideClientStore\";\n\n// Extra scroll overshoot so the focused guide plus ~1-2 neighbors are visible,\n// reducing how often consecutive next/prev clicks trigger a scroll.\nconst SCROLL_OVERSHOOT = 60;\n\nconst maybeScrollGuideIntoView = (container: HTMLElement, guideKey: string) => {\n  requestAnimationFrame(() => {\n    const el = container.querySelector(\n      `[${GUIDE_ROW_DATA_SELECTOR}=\"${CSS.escape(guideKey)}\"]`,\n    );\n    if (!el || !(el instanceof HTMLElement)) return;\n\n    const containerRect = container.getBoundingClientRect();\n    const elRect = el.getBoundingClientRect();\n\n    if (elRect.top < containerRect.top) {\n      container.scrollTo({\n        top:\n          container.scrollTop -\n          (containerRect.top - elRect.top) -\n          SCROLL_OVERSHOOT,\n        behavior: \"smooth\",\n      });\n    } else if (elRect.bottom > containerRect.bottom) {\n      container.scrollTo({\n        top:\n          container.scrollTop +\n          (elRect.bottom - containerRect.bottom) +\n          SCROLL_OVERSHOOT,\n        behavior: \"smooth\",\n      });\n    }\n  });\n};\n\ntype Props = {\n  guides: InspectionResultOk[\"guides\"];\n  guideListRef: React.RefObject<HTMLDivElement | null>;\n};\n\nexport const FocusChin = ({ guides, guideListRef }: Props) => {\n  const { client } = useGuideContext();\n  const { debugSettings } = useStore(client.store, (state) => ({\n    debugSettings: state.debug,\n  }));\n\n  const focusedKeys = Object.keys(debugSettings?.focusedGuideKeys || {});\n\n  const isFocused = focusedKeys.length > 0;\n  if (!isFocused) {\n    return null;\n  }\n\n  const currentKey = focusedKeys[0]!;\n\n  return (\n    <Box\n      borderTop=\"px\"\n      px=\"3\"\n      py=\"1\"\n      overflow=\"hidden\"\n      backgroundColor=\"blue-2\"\n    >\n      <Stack align=\"center\" justify=\"space-between\" gap=\"4\">\n        <Text\n          as=\"span\"\n          size=\"1\"\n          weight=\"medium\"\n          color=\"blue\"\n          style={{\n            display: \"block\",\n            overflow: \"hidden\",\n            textOverflow: \"ellipsis\",\n            whiteSpace: \"nowrap\",\n            minWidth: 0,\n          }}\n        >\n          Focus mode: {currentKey}\n        </Text>\n        <Stack align=\"center\" gap=\"1\" style={{ flexShrink: 0 }}>\n          <Tooltip label=\"Focus previous guide\" {...sharedTooltipProps}>\n            <Button\n              size=\"0\"\n              variant=\"ghost\"\n              color=\"blue\"\n              leadingIcon={{ icon: ChevronLeft, alt: \"Previous guide\" }}\n              onClick={() => {\n                const selectableGuides = guides.filter(\n                  (g) => !!g.annotation.selectable.status,\n                );\n                const currIndex = selectableGuides.findIndex(\n                  (g) => g.key === currentKey,\n                );\n                const prevGuide =\n                  currIndex <= 0 ? undefined : selectableGuides[currIndex - 1];\n\n                if (!prevGuide) return;\n\n                client.setDebug({\n                  ...debugSettings,\n                  focusedGuideKeys: { [prevGuide.key]: true },\n                });\n\n                if (guideListRef.current) {\n                  maybeScrollGuideIntoView(guideListRef.current, prevGuide.key);\n                }\n              }}\n            />\n          </Tooltip>\n          <Tooltip label=\"Focus next guide\" {...sharedTooltipProps}>\n            <Button\n              size=\"0\"\n              variant=\"ghost\"\n              color=\"blue\"\n              leadingIcon={{ icon: ChevronRight, alt: \"Next guide\" }}\n              onClick={() => {\n                const selectableGuides = guides.filter(\n                  (g) => !!g.annotation.selectable.status,\n                );\n                const currIndex = selectableGuides.findIndex(\n                  (g) => g.key === currentKey,\n                );\n                const nextGuide =\n                  currIndex < 0 || currIndex + 1 > selectableGuides.length - 1\n                    ? undefined\n                    : selectableGuides[currIndex + 1];\n\n                if (!nextGuide) return;\n\n                client.setDebug({\n                  ...debugSettings,\n                  focusedGuideKeys: { [nextGuide.key]: true },\n                });\n\n                if (guideListRef.current) {\n                  maybeScrollGuideIntoView(guideListRef.current, nextGuide.key);\n                }\n              }}\n            />\n          </Tooltip>\n          <Tooltip label=\"Exit focus mode\" {...sharedTooltipProps}>\n            <Button\n              size=\"0\"\n              variant=\"ghost\"\n              color=\"blue\"\n              leadingIcon={{ icon: X, alt: \"Clear focus\" }}\n              onClick={() => {\n                client.setDebug({ ...debugSettings, focusedGuideKeys: {} });\n              }}\n            />\n          </Tooltip>\n        </Stack>\n      </Stack>\n    </Box>\n  );\n};\n"],"names":["SCROLL_OVERSHOOT","maybeScrollGuideIntoView","container","guideKey","requestAnimationFrame","el","querySelector","GUIDE_ROW_DATA_SELECTOR","CSS","escape","HTMLElement","containerRect","getBoundingClientRect","elRect","top","scrollTo","scrollTop","behavior","bottom","FocusChin","guides","guideListRef","client","useGuideContext","debugSettings","useStore","store","state","debug","focusedKeys","Object","keys","focusedGuideKeys","length","currentKey","React","Box","Stack","Text","display","overflow","textOverflow","whiteSpace","minWidth","flexShrink","Tooltip","sharedTooltipProps","Button","icon","ChevronLeft","alt","selectableGuides","filter","g","annotation","selectable","status","currIndex","findIndex","key","prevGuide","undefined","setDebug","current","ChevronRight","nextGuide","X"],"mappings":"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"}
+{"version":3,"file":"FocusChin.mjs","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/FocusChin.tsx"],"sourcesContent":["import { useGuideContext, useStore } from \"@knocklabs/react-core\";\nimport { Button } from \"@telegraph/button\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text } from \"@telegraph/typography\";\nimport { ChevronLeft, ChevronRight, X } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { GUIDE_ROW_DATA_SELECTOR } from \"./GuideRow\";\nimport { Kbd } from \"./Kbd\";\nimport { sharedTooltipProps } from \"./helpers\";\nimport { InspectionResultOk } from \"./useInspectGuideClientStore\";\n\n// Extra scroll overshoot so the focused guide plus ~1-2 neighbors are visible,\n// reducing how often consecutive next/prev clicks trigger a scroll.\nconst SCROLL_OVERSHOOT = 60;\n\nconst FOCUS_PREV_HOTKEY = \",\";\nconst FOCUS_NEXT_HOTKEY = \"/\";\n\nconst maybeScrollGuideIntoView = (container: HTMLElement, guideKey: string) => {\n  requestAnimationFrame(() => {\n    const el = container.querySelector(\n      `[${GUIDE_ROW_DATA_SELECTOR}=\"${CSS.escape(guideKey)}\"]`,\n    );\n    if (!el || !(el instanceof HTMLElement)) return;\n\n    const containerRect = container.getBoundingClientRect();\n    const elRect = el.getBoundingClientRect();\n\n    if (elRect.top < containerRect.top) {\n      container.scrollTo({\n        top:\n          container.scrollTop -\n          (containerRect.top - elRect.top) -\n          SCROLL_OVERSHOOT,\n        behavior: \"smooth\",\n      });\n    } else if (elRect.bottom > containerRect.bottom) {\n      container.scrollTo({\n        top:\n          container.scrollTop +\n          (elRect.bottom - containerRect.bottom) +\n          SCROLL_OVERSHOOT,\n        behavior: \"smooth\",\n      });\n    }\n  });\n};\n\ntype FocusNav = {\n  guides: InspectionResultOk[\"guides\"];\n  currentKey: string | undefined;\n  focusGuide: (guideKey: string) => void;\n};\n\nconst focusPrev = ({ guides, currentKey, focusGuide }: FocusNav) => {\n  const selectableGuides = guides.filter(\n    (g) => !!g.annotation.selectable.status,\n  );\n  if (selectableGuides.length === 0) return;\n\n  if (!currentKey) {\n    focusGuide(selectableGuides[selectableGuides.length - 1]!.key);\n    return;\n  }\n\n  const currIndex = selectableGuides.findIndex((g) => g.key === currentKey);\n  const prevGuide =\n    currIndex <= 0 ? undefined : selectableGuides[currIndex - 1];\n  if (!prevGuide) return;\n  focusGuide(prevGuide.key);\n};\n\nconst focusNext = ({ guides, currentKey, focusGuide }: FocusNav) => {\n  const selectableGuides = guides.filter(\n    (g) => !!g.annotation.selectable.status,\n  );\n  if (selectableGuides.length === 0) return;\n\n  if (!currentKey) {\n    focusGuide(selectableGuides[0]!.key);\n    return;\n  }\n\n  const currIndex = selectableGuides.findIndex((g) => g.key === currentKey);\n  const nextGuide =\n    currIndex < 0 || currIndex + 1 > selectableGuides.length - 1\n      ? undefined\n      : selectableGuides[currIndex + 1];\n  if (!nextGuide) return;\n  focusGuide(nextGuide.key);\n};\n\ntype Props = {\n  guides: InspectionResultOk[\"guides\"];\n  guideListRef: React.RefObject<HTMLDivElement | null>;\n};\n\nexport const FocusChin = ({ guides, guideListRef }: Props) => {\n  const { client } = useGuideContext();\n  const { debugSettings } = useStore(client.store, (state) => ({\n    debugSettings: state.debug,\n  }));\n\n  const focusedKeys = Object.keys(debugSettings?.focusedGuideKeys || {});\n  const isFocused = focusedKeys.length > 0;\n  const currentKey = focusedKeys[0];\n\n  const focusGuide = React.useCallback(\n    (guideKey: string) => {\n      client.setDebug({\n        ...client.store.state.debug,\n        focusedGuideKeys: { [guideKey]: true },\n      });\n      if (guideListRef.current) {\n        maybeScrollGuideIntoView(guideListRef.current, guideKey);\n      }\n    },\n    [client, guideListRef],\n  );\n\n  // Latest-ref so the window keydown listener below can attach once and always\n  // read the current guides / focused key without needing to re-subscribe.\n  const latestRef = React.useRef<FocusNav>({ guides, currentKey, focusGuide });\n  React.useEffect(() => {\n    latestRef.current = { guides, currentKey, focusGuide };\n  });\n\n  React.useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (!e.ctrlKey || e.repeat) return;\n      if (e.key === FOCUS_PREV_HOTKEY) {\n        e.preventDefault();\n        focusPrev(latestRef.current);\n      } else if (e.key === FOCUS_NEXT_HOTKEY) {\n        e.preventDefault();\n        focusNext(latestRef.current);\n      }\n    };\n    window.addEventListener(\"keydown\", handleKeyDown);\n    return () => {\n      window.removeEventListener(\"keydown\", handleKeyDown);\n    };\n  }, []);\n\n  if (!isFocused) {\n    return null;\n  }\n\n  return (\n    <Box\n      borderTop=\"px\"\n      px=\"3\"\n      py=\"1\"\n      overflow=\"hidden\"\n      backgroundColor=\"blue-2\"\n    >\n      <Stack align=\"center\" justify=\"space-between\" gap=\"4\">\n        <Text\n          as=\"span\"\n          size=\"1\"\n          weight=\"medium\"\n          color=\"blue\"\n          style={{\n            display: \"block\",\n            overflow: \"hidden\",\n            textOverflow: \"ellipsis\",\n            whiteSpace: \"nowrap\",\n            minWidth: 0,\n          }}\n        >\n          Focus mode: {currentKey}\n        </Text>\n        <Stack align=\"center\" gap=\"1\" style={{ flexShrink: 0 }}>\n          <Tooltip\n            label={\n              <Text as=\"span\" size=\"1\">\n                Focus previous guide\n                <Stack display=\"inline-block\" ml=\"3\">\n                  <Kbd>ctrl</Kbd> + <Kbd>,</Kbd>\n                </Stack>\n              </Text>\n            }\n            {...sharedTooltipProps}\n          >\n            <Button\n              size=\"0\"\n              variant=\"ghost\"\n              color=\"blue\"\n              leadingIcon={{ icon: ChevronLeft, alt: \"Previous guide\" }}\n              onClick={() => focusPrev(latestRef.current)}\n            />\n          </Tooltip>\n          <Tooltip\n            label={\n              <Text as=\"span\" size=\"1\">\n                Focus next guide\n                <Stack display=\"inline-block\" ml=\"3\">\n                  <Kbd>ctrl</Kbd> + <Kbd>/</Kbd>\n                </Stack>\n              </Text>\n            }\n            {...sharedTooltipProps}\n          >\n            <Button\n              size=\"0\"\n              variant=\"ghost\"\n              color=\"blue\"\n              leadingIcon={{ icon: ChevronRight, alt: \"Next guide\" }}\n              onClick={() => focusNext(latestRef.current)}\n            />\n          </Tooltip>\n          <Tooltip label=\"Exit focus mode\" {...sharedTooltipProps}>\n            <Button\n              size=\"0\"\n              variant=\"ghost\"\n              color=\"blue\"\n              leadingIcon={{ icon: X, alt: \"Clear focus\" }}\n              onClick={() => {\n                client.setDebug({ ...debugSettings, focusedGuideKeys: {} });\n              }}\n            />\n          </Tooltip>\n        </Stack>\n      </Stack>\n    </Box>\n  );\n};\n"],"names":["SCROLL_OVERSHOOT","FOCUS_PREV_HOTKEY","FOCUS_NEXT_HOTKEY","maybeScrollGuideIntoView","container","guideKey","requestAnimationFrame","el","querySelector","GUIDE_ROW_DATA_SELECTOR","CSS","escape","HTMLElement","containerRect","getBoundingClientRect","elRect","top","scrollTo","scrollTop","behavior","bottom","focusPrev","guides","currentKey","focusGuide","selectableGuides","filter","g","annotation","selectable","status","length","key","currIndex","findIndex","prevGuide","undefined","focusNext","nextGuide","FocusChin","guideListRef","client","useGuideContext","debugSettings","useStore","store","state","debug","focusedKeys","Object","keys","focusedGuideKeys","isFocused","React","useCallback","setDebug","current","latestRef","useRef","useEffect","handleKeyDown","e","ctrlKey","repeat","preventDefault","addEventListener","removeEventListener","Box","Stack","Text","display","overflow","textOverflow","whiteSpace","minWidth","flexShrink","Tooltip","Kbd","sharedTooltipProps","Button","icon","ChevronLeft","alt","ChevronRight","X"],"mappings":"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"}

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

@@ -0,0 +1,14 @@
+import * as d from "react";
+const e = ({
+  children: r
+}) => /* @__PURE__ */ d.createElement("kbd", { style: {
+  display: "inline-block",
+  padding: "1px 4px",
+  borderRadius: "var(--tgph-rounded-2)",
+  border: "1px solid rgba(255, 255, 255, 0.3)",
+  backgroundColor: "rgba(255, 255, 255, 0.15)"
+} }, r);
+export {
+  e as Kbd
+};
+//# sourceMappingURL=Kbd.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Kbd.mjs","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/Kbd.tsx"],"sourcesContent":["import * as React from \"react\";\n\nexport const Kbd = ({ children }: { children: React.ReactNode }) => {\n  return (\n    <kbd\n      style={{\n        display: \"inline-block\",\n        padding: \"1px 4px\",\n        borderRadius: \"var(--tgph-rounded-2)\",\n        border: \"1px solid rgba(255, 255, 255, 0.3)\",\n        backgroundColor: \"rgba(255, 255, 255, 0.15)\",\n      }}\n    >\n      {children}\n    </kbd>\n  );\n};\n"],"names":["Kbd","children","React","display","padding","borderRadius","border","backgroundColor"],"mappings":";AAEO,MAAMA,IAAMA,CAAC;AAAA,EAAEC,UAAAA;AAAwC,MAE1D,gBAAAC,EAAA,cAAC,SACC,OAAO;AAAA,EACLC,SAAS;AAAA,EACTC,SAAS;AAAA,EACTC,cAAc;AAAA,EACdC,QAAQ;AAAA,EACRC,iBAAiB;KAGlBN,CACH;"}

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

@@ -3,7 +3,7 @@ import { useGuideContext as T } from "@knocklabs/react-core";
 import { Button as w } from "@telegraph/button";
 import { Icon as B } from "@telegraph/icon";
 import { Box as u, Stack as i } from "@telegraph/layout";
-import { SegmentedControl as m } from "@telegraph/segmented-control";
+import { SegmentedControl as p } from "@telegraph/segmented-control";
 import { Tooltip as k } from "@telegraph/tooltip";
 import { Text as v } from "@telegraph/typography";
 import { GripVertical as H, ChevronDown as V, ChevronRight as j, SlidersHorizontal as M, LogOut as W, Minimize2 as Y } from "lucide-react";
@@ -14,19 +14,12 @@ import { TOOLBAR_Z_INDEX as X } from "../shared.mjs";
 import { FocusChin as N } from "./FocusChin.mjs";
 import { GuideContextDetails as Z } from "./GuideContextDetails.mjs";
 import { GuideRow as q } from "./GuideRow.mjs";
+import { Kbd as _ } from "./Kbd.mjs";
 import { sharedTooltipProps as D } from "./helpers.mjs";
 import { useDraggable as J } from "./useDraggable.mjs";
 import { useInspectGuideClientStore as Q } from "./useInspectGuideClientStore.mjs";
-const $ = ".", U = "540px", ee = ["0 0 0 1px rgba(0, 0, 0, 0.06)", "0 0 0 1px rgba(255, 255, 255, 0.10)", "inset 0 1px 0 rgba(255, 255, 255, 0.04)", "0 1px 1px 0 rgba(0, 0, 0, 0.04)", "0 4px 6px -1px rgba(0, 0, 0, 0.05)", "0 8px 16px -4px rgba(0, 0, 0, 0.06)"].join(", "), _ = ({
-  children: r
-}) => /* @__PURE__ */ e.createElement("kbd", { style: {
-  display: "inline-block",
-  padding: "1px 4px",
-  borderRadius: "var(--tgph-rounded-2)",
-  border: "1px solid rgba(255, 255, 255, 0.3)",
-  backgroundColor: "rgba(255, 255, 255, 0.15)"
-} }, r), te = (r) => {
-  switch (r) {
+const $ = ".", U = "540px", ee = ["0 0 0 1px rgba(0, 0, 0, 0.06)", "0 0 0 1px rgba(255, 255, 255, 0.10)", "inset 0 1px 0 rgba(255, 255, 255, 0.04)", "0 1px 1px 0 rgba(0, 0, 0, 0.04)", "0 4px 6px -1px rgba(0, 0, 0, 0.05)", "0 8px 16px -4px rgba(0, 0, 0, 0.06)"].join(", "), te = (l) => {
+  switch (l) {
     case "all-guides":
       return "You have no guides. Get started by creating a guide.";
     case "only-active":
@@ -34,61 +27,61 @@ const $ = ".", U = "540px", ee = ["0 0 0 1px rgba(0, 0, 0, 0.06)", "0 0 0 1px rg
     case "only-eligible":
       return "Your current user is not eligible for any guides.";
   }
-}, z = (r, s) => r.filter((o) => !(s === "only-eligible" && !o.annotation.isEligible || s === "only-active" && !o.annotation.active.status)), we = ({
-  readyToTarget: r,
+}, z = (l, s) => l.filter((o) => !(s === "only-eligible" && !o.annotation.isEligible || s === "only-active" && !o.annotation.active.status)), ke = ({
+  readyToTarget: l,
   listenForUpdates: s
 }) => {
   const {
     client: o
-  } = T(), [d, f] = e.useState("only-active"), [c, I] = e.useState(() => L.getToolbarRunConfigFromUrl()), [C, b] = e.useState(!1), [g, P] = e.useState(!1), [K, O] = e.useState();
+  } = T(), [m, f] = e.useState("only-active"), [c, I] = e.useState(() => L.getToolbarRunConfigFromUrl()), [C, b] = e.useState(!1), [d, P] = e.useState(!1), [K, O] = e.useState();
   e.useEffect(() => {
     O(void 0);
-  }, [d]), e.useEffect(() => {
+  }, [m]), e.useEffect(() => {
     var h;
     const {
       isVisible: t = !1,
       focusedGuideKeys: n = {}
-    } = c || {}, l = (h = o.store.state.debug) == null ? void 0 : h.debugging;
-    return t && !l && r && (o.setDebug({
+    } = c || {}, a = (h = o.store.state.debug) == null ? void 0 : h.debugging;
+    return t && !a && l && (o.setDebug({
       focusedGuideKeys: n
-    }), Object.keys(n).length > 0 && f("all-guides")), !t && l && o.unsetDebug({
+    }), Object.keys(n).length > 0 && f("all-guides")), !t && a && o.unsetDebug({
       listenForUpdates: s
     }), () => {
-      var p;
-      (p = o.store.state.debug) != null && p.debugging && o.unsetDebug({
+      var g;
+      (g = o.store.state.debug) != null && g.debugging && o.unsetDebug({
         listenForUpdates: s
       });
     };
-  }, [r, s, c, o, f]), e.useEffect(() => {
+  }, [l, s, c, o, f]), e.useEffect(() => {
     const t = (n) => {
-      n.ctrlKey && n.key === $ && !n.repeat && (n.preventDefault(), b((l) => !l));
+      n.ctrlKey && n.key === $ && !n.repeat && (n.preventDefault(), b((a) => !a));
     };
     return window.addEventListener("keydown", t), () => {
       window.removeEventListener("keydown", t);
     };
   }, []);
-  const R = e.useRef(null), G = e.useRef(null), {
+  const G = e.useRef(null), R = e.useRef(null), {
     position: S,
-    isDragging: x,
+    isDragging: E,
     handlePointerDown: y,
     hasDraggedRef: A
   } = J({
-    elementRef: R,
+    elementRef: G,
     reclampDeps: [C],
     initialPosition: {
       top: 16,
       right: 16
     }
-  }), a = Q(c);
-  if (!a || !(c != null && c.isVisible))
+  }), r = Q(c);
+  if (!r || !(c != null && c.isVisible))
     return null;
-  const E = a.status === "ok" ? z(a.guides, d) : [];
-  return /* @__PURE__ */ e.createElement(u, { tgphRef: R, position: "fixed", style: {
+  const x = r.status === "ok" ? z(r.guides, m) : [];
+  return /* @__PURE__ */ e.createElement(u, { tgphRef: G, position: "fixed", style: {
     top: S.top + "px",
     right: S.right + "px",
     zIndex: X
   } }, C ? /* @__PURE__ */ e.createElement(k, { side: "left", label: /* @__PURE__ */ e.createElement(v, { as: "span", size: "1" }, "Guide Toolbar", /* @__PURE__ */ e.createElement(i, { display: "inline-block", ml: "3" }, /* @__PURE__ */ e.createElement(_, null, "ctrl"), " + ", /* @__PURE__ */ e.createElement(_, null, "."))), ...D }, /* @__PURE__ */ e.createElement(i, { border: "px", rounded: "4", align: "center", justify: "center", w: "10", h: "10", onPointerDown: y, backgroundColor: "surface-1", style: {
-    cursor: x ? "grabbing" : "grab",
+    cursor: E ? "grabbing" : "grab",
     touchAction: "none",
     userSelect: "none",
     animation: "toolbar-collapse-fade-in 150ms ease-out"
@@ -103,35 +96,35 @@ const $ = ".", U = "540px", ee = ["0 0 0 1px rgba(0, 0, 0, 0.06)", "0 0 0 1px rg
     animation: "toolbar-expand-fade-in 150ms ease-out"
   } }, /* @__PURE__ */ e.createElement(i, { w: "full", p: "2", justify: "space-between", direction: "row", align: "center", gap: "2", borderBottom: "px", onPointerDown: y, style: {
     boxSizing: "border-box",
-    cursor: x ? "grabbing" : "grab",
+    cursor: E ? "grabbing" : "grab",
     touchAction: "none",
     userSelect: "none"
   } }, /* @__PURE__ */ e.createElement(i, { align: "center", gap: "1_5", style: {
     minWidth: 0,
     flex: 1
   } }, /* @__PURE__ */ e.createElement(i, { display: "inline-flex", align: "center", style: {
-    cursor: x ? "grabbing" : "grab",
+    cursor: E ? "grabbing" : "grab",
     touchAction: "none",
     userSelect: "none"
   }, onPointerDown: (t) => {
     t.stopPropagation(), y(t);
-  } }, /* @__PURE__ */ e.createElement(B, { color: "gray", size: "1", icon: H, "aria-hidden": !0 })), /* @__PURE__ */ e.createElement(i, { align: "center", gap: "1_5", onPointerDown: (t) => t.stopPropagation() }, /* @__PURE__ */ e.createElement(m.Root, { size: "1", type: "single", value: d, onValueChange: (t) => {
+  } }, /* @__PURE__ */ e.createElement(B, { color: "gray", size: "1", icon: H, "aria-hidden": !0 })), /* @__PURE__ */ e.createElement(i, { align: "center", gap: "1_5", onPointerDown: (t) => t.stopPropagation() }, /* @__PURE__ */ e.createElement(p.Root, { size: "1", type: "single", value: m, onValueChange: (t) => {
     if (!t) return;
-    const n = o.store.state.debug, l = Object.keys((n == null ? void 0 : n.focusedGuideKeys) || {});
-    a.status === "ok" && l.length > 0 && (z(a.guides, t).find((p) => p.key === l[0]) || o.setDebug({
+    const n = o.store.state.debug, a = Object.keys((n == null ? void 0 : n.focusedGuideKeys) || {});
+    r.status === "ok" && a.length > 0 && (z(r.guides, t).find((g) => g.key === a[0]) || o.setDebug({
       ...n,
       focusedGuideKeys: {}
     })), f(t);
-  } }, /* @__PURE__ */ e.createElement(m.Option, { value: "all-guides", style: {
+  } }, /* @__PURE__ */ e.createElement(p.Option, { value: "all-guides", style: {
     width: "54px"
-  } }, "All"), /* @__PURE__ */ e.createElement(m.Option, { value: "only-active", style: {
+  } }, "All"), /* @__PURE__ */ e.createElement(p.Option, { value: "only-active", style: {
     width: "54px"
-  } }, "Active"), /* @__PURE__ */ e.createElement(m.Option, { value: "only-eligible", style: {
+  } }, "Active"), /* @__PURE__ */ e.createElement(p.Option, { value: "only-eligible", style: {
     width: "54px"
-  } }, "Eligible")), /* @__PURE__ */ e.createElement(k, { label: "Settings", ...D }, /* @__PURE__ */ e.createElement(w, { size: "1", variant: g ? "outline" : "ghost", color: g ? "blue" : "gray", leadingIcon: {
+  } }, "Eligible")), /* @__PURE__ */ e.createElement(k, { label: "Settings", ...D }, /* @__PURE__ */ e.createElement(w, { size: "1", variant: d ? "outline" : "ghost", color: d ? "blue" : "gray", leadingIcon: {
     icon: M,
     alt: "Inspect target params"
-  }, trailingIcon: g ? {
+  }, trailingIcon: d ? {
     icon: V,
     alt: "Hide context data"
   } : {
@@ -150,17 +143,17 @@ const $ = ".", U = "540px", ee = ["0 0 0 1px rgba(0, 0, 0, 0.06)", "0 0 0 1px rg
   } }, "Exit"), /* @__PURE__ */ e.createElement(k, { label: "Minimize toolbar", ...D }, /* @__PURE__ */ e.createElement(w, { size: "1", variant: "outline", leadingIcon: {
     icon: Y,
     alt: "Minimize"
-  }, onClick: () => b(!0) }))))), g && /* @__PURE__ */ e.createElement(u, { borderBottom: "px" }, /* @__PURE__ */ e.createElement(Z, null)), /* @__PURE__ */ e.createElement(u, { tgphRef: G, p: "1", overflow: "auto", style: {
+  }, onClick: () => b(!0) }))))), d && /* @__PURE__ */ e.createElement(u, { borderBottom: "px" }, /* @__PURE__ */ e.createElement(Z, null)), /* @__PURE__ */ e.createElement(u, { tgphRef: R, p: "1", overflow: "auto", style: {
     maxHeight: "calc(80vh - 96px)"
-  } }, a.status === "error" ? /* @__PURE__ */ e.createElement(u, { px: "2", pb: "1", style: {
+  } }, r.status === "error" ? /* @__PURE__ */ e.createElement(u, { px: "2", pb: "1", style: {
     lineHeight: "1.2"
-  } }, /* @__PURE__ */ e.createElement(v, { as: "span", size: "1", weight: "medium", color: a.error === "no_guides_fetched" ? "default" : "red" }, a.message)) : E.length === 0 ? /* @__PURE__ */ e.createElement(u, { px: "2", pb: "1", style: {
+  } }, /* @__PURE__ */ e.createElement(v, { as: "span", size: "1", weight: "medium", color: r.error === "no_guides_fetched" ? "default" : "red" }, r.message)) : x.length === 0 ? /* @__PURE__ */ e.createElement(u, { px: "2", pb: "1", style: {
     lineHeight: "1.2"
-  } }, /* @__PURE__ */ e.createElement(v, { as: "span", size: "1", weight: "medium", color: "default" }, te(d))) : E.map((t) => /* @__PURE__ */ e.createElement(q, { key: t.key, guide: t, orderIndex: t.orderIndex, isExpanded: t.key === K, onClick: () => {
+  } }, /* @__PURE__ */ e.createElement(v, { as: "span", size: "1", weight: "medium", color: "default" }, te(m))) : x.map((t) => /* @__PURE__ */ e.createElement(q, { key: t.key, guide: t, orderIndex: t.orderIndex, isExpanded: t.key === K, onClick: () => {
     O((n) => n && n === t.key ? void 0 : t.key);
-  } }))), /* @__PURE__ */ e.createElement(N, { guides: E, guideListRef: G })));
+  } }))), /* @__PURE__ */ e.createElement(N, { guides: x, guideListRef: R })));
 };
 export {
-  we as V2
+  ke 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 { KnockGuideClient } from \"@knocklabs/client\";\nimport { useGuideContext } from \"@knocklabs/react-core\";\nimport { Button } from \"@telegraph/button\";\nimport { Icon } from \"@telegraph/icon\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport { SegmentedControl } from \"@telegraph/segmented-control\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text } from \"@telegraph/typography\";\nimport {\n  ChevronDown,\n  ChevronRight,\n  GripVertical,\n  LogOut,\n  Minimize2,\n  SlidersHorizontal,\n} from \"lucide-react\";\nimport React from \"react\";\n\nimport { KnockButton } from \"../KnockButton\";\nimport { TOOLBAR_Z_INDEX } from \"../shared\";\nimport \"../styles.css\";\n\nimport { FocusChin } from \"./FocusChin\";\nimport { GuideContextDetails } from \"./GuideContextDetails\";\nimport { GuideRow } from \"./GuideRow\";\nimport { DisplayOption, sharedTooltipProps } from \"./helpers\";\nimport { useDraggable } from \"./useDraggable\";\nimport {\n  InspectionResultOk,\n  useInspectGuideClientStore,\n} from \"./useInspectGuideClientStore\";\n\nconst TOGGLE_COLLAPSED_HOTKEY = \".\";\n\nconst TOOLBAR_WIDTH = \"540px\";\n\nconst TOOLBAR_BOX_SHADOW = [\n  \"0 0 0 1px rgba(0, 0, 0, 0.06)\",\n  \"0 0 0 1px rgba(255, 255, 255, 0.10)\",\n  \"inset 0 1px 0 rgba(255, 255, 255, 0.04)\",\n  \"0 1px 1px 0 rgba(0, 0, 0, 0.04)\",\n  \"0 4px 6px -1px rgba(0, 0, 0, 0.05)\",\n  \"0 8px 16px -4px rgba(0, 0, 0, 0.06)\",\n].join(\", \");\n\nconst Kbd = ({ children }: { children: React.ReactNode }) => {\n  return (\n    <kbd\n      style={{\n        display: \"inline-block\",\n        padding: \"1px 4px\",\n        borderRadius: \"var(--tgph-rounded-2)\",\n        border: \"1px solid rgba(255, 255, 255, 0.3)\",\n        backgroundColor: \"rgba(255, 255, 255, 0.15)\",\n      }}\n    >\n      {children}\n    </kbd>\n  );\n};\n\nconst getEmptyStateMessage = (displayOption: DisplayOption) => {\n  switch (displayOption) {\n    case \"all-guides\":\n      return \"You have no guides. Get started by creating a guide.\";\n    case \"only-active\":\n      return \"There are no active guides.\";\n    case \"only-eligible\":\n      return \"Your current user is not eligible for any guides.\";\n  }\n};\n\nconst filterGuides = (\n  guides: InspectionResultOk[\"guides\"],\n  displayOption: DisplayOption,\n) => {\n  return guides.filter((guide) => {\n    if (displayOption === \"only-eligible\" && !guide.annotation.isEligible) {\n      return false;\n    }\n    if (displayOption === \"only-active\" && !guide.annotation.active.status) {\n      return false;\n    }\n    return true;\n  });\n};\n\ntype Props = {\n  readyToTarget: boolean;\n  listenForUpdates: boolean;\n};\n\nexport const V2 = ({ readyToTarget, listenForUpdates }: Props) => {\n  const { client } = useGuideContext();\n\n  const [displayOption, setDisplayOption] =\n    React.useState<DisplayOption>(\"only-active\");\n  const [runConfig, setRunConfig] = React.useState(() =>\n    KnockGuideClient.getToolbarRunConfigFromUrl(),\n  );\n  const [isCollapsed, setIsCollapsed] = React.useState(false);\n  const [isContextPanelOpen, setIsContextPanelOpen] = React.useState(false);\n\n  const [expandedGuideRowKey, setExpandedGuideRowKey] = React.useState<\n    string | undefined\n  >();\n\n  React.useEffect(() => {\n    setExpandedGuideRowKey(undefined);\n  }, [displayOption]);\n\n  React.useEffect(() => {\n    const { isVisible = false, focusedGuideKeys = {} } = runConfig || {};\n    const isDebugging = client.store.state.debug?.debugging;\n\n    if (isVisible && !isDebugging && readyToTarget) {\n      client.setDebug({ focusedGuideKeys });\n\n      // If focused, switch to all guides so you can see in the list.\n      if (Object.keys(focusedGuideKeys).length > 0) {\n        setDisplayOption(\"all-guides\");\n      }\n    }\n\n    if (!isVisible && isDebugging) {\n      client.unsetDebug({ listenForUpdates });\n    }\n\n    return () => {\n      if (client.store.state.debug?.debugging) {\n        client.unsetDebug({ listenForUpdates });\n      }\n    };\n  }, [readyToTarget, listenForUpdates, runConfig, client, setDisplayOption]);\n\n  // Toggle collapsed state with Ctrl + .\n  React.useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.ctrlKey && e.key === TOGGLE_COLLAPSED_HOTKEY && !e.repeat) {\n        e.preventDefault();\n        setIsCollapsed((prev) => !prev);\n      }\n    };\n\n    window.addEventListener(\"keydown\", handleKeyDown);\n    return () => {\n      window.removeEventListener(\"keydown\", handleKeyDown);\n    };\n  }, []);\n\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const guideListRef = React.useRef<HTMLDivElement>(null);\n  const { position, isDragging, handlePointerDown, hasDraggedRef } =\n    useDraggable({\n      elementRef: containerRef,\n      reclampDeps: [isCollapsed],\n      initialPosition: { top: 16, right: 16 },\n    });\n\n  const result = useInspectGuideClientStore(runConfig);\n  if (!result || !runConfig?.isVisible) {\n    return null;\n  }\n\n  const guides =\n    result.status === \"ok\" ? filterGuides(result.guides, displayOption) : [];\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      {isCollapsed ? (\n        <Tooltip\n          side=\"left\"\n          label={\n            <Text as=\"span\" size=\"1\">\n              Guide Toolbar\n              <Stack display=\"inline-block\" ml=\"3\">\n                <Kbd>ctrl</Kbd> + <Kbd>.</Kbd>\n              </Stack>\n            </Text>\n          }\n          {...sharedTooltipProps}\n        >\n          <Stack\n            border=\"px\"\n            rounded=\"4\"\n            align=\"center\"\n            justify=\"center\"\n            w=\"10\"\n            h=\"10\"\n            onPointerDown={handlePointerDown}\n            backgroundColor=\"surface-1\"\n            style={{\n              cursor: isDragging ? \"grabbing\" : \"grab\",\n              touchAction: \"none\",\n              userSelect: \"none\",\n              animation: \"toolbar-collapse-fade-in 150ms ease-out\",\n            }}\n          >\n            <Box\n              style={{\n                transform: \"scale(0.7)\",\n                transformOrigin: \"center center\",\n              }}\n            >\n              <KnockButton\n                onClick={() => {\n                  if (!hasDraggedRef.current) {\n                    setIsCollapsed(false);\n                  }\n                }}\n                positioned={false}\n              />\n            </Box>\n          </Stack>\n        </Tooltip>\n      ) : (\n        <Stack\n          direction=\"column\"\n          backgroundColor=\"surface-1\"\n          rounded=\"4\"\n          overflow=\"hidden\"\n          style={{\n            width: TOOLBAR_WIDTH,\n            boxShadow: TOOLBAR_BOX_SHADOW,\n            animation: \"toolbar-expand-fade-in 150ms ease-out\",\n          }}\n        >\n          {/* Header — also acts as drag handle area */}\n          <Stack\n            w=\"full\"\n            p=\"2\"\n            justify=\"space-between\"\n            direction=\"row\"\n            align=\"center\"\n            gap=\"2\"\n            borderBottom=\"px\"\n            onPointerDown={handlePointerDown}\n            style={{\n              boxSizing: \"border-box\",\n              cursor: isDragging ? \"grabbing\" : \"grab\",\n              touchAction: \"none\",\n              userSelect: \"none\",\n            }}\n          >\n            {/* Left: drag icon + segmented control + settings */}\n            <Stack align=\"center\" gap=\"1_5\" style={{ minWidth: 0, flex: 1 }}>\n              <Stack\n                display=\"inline-flex\"\n                align=\"center\"\n                style={{\n                  cursor: isDragging ? \"grabbing\" : \"grab\",\n                  touchAction: \"none\",\n                  userSelect: \"none\",\n                }}\n                onPointerDown={(e: React.PointerEvent) => {\n                  // Already handled by parent, prevent double-fire\n                  e.stopPropagation();\n                  handlePointerDown(e);\n                }}\n              >\n                <Icon color=\"gray\" size=\"1\" icon={GripVertical} aria-hidden />\n              </Stack>\n              <Stack\n                align=\"center\"\n                gap=\"1_5\"\n                onPointerDown={(e: React.PointerEvent) => e.stopPropagation()}\n              >\n                <SegmentedControl.Root\n                  size=\"1\"\n                  type=\"single\"\n                  value={displayOption}\n                  onValueChange={(val: DisplayOption) => {\n                    if (!val) return;\n\n                    const debugSettings = client.store.state.debug;\n\n                    const focusedGuideKeys = Object.keys(\n                      debugSettings?.focusedGuideKeys || {},\n                    );\n\n                    // Exit out of focus if the currently focused guide is not\n                    // part of the selected list filter.\n                    if (result.status === \"ok\" && focusedGuideKeys.length > 0) {\n                      const currFocusedGuide = filterGuides(\n                        result.guides,\n                        val,\n                      ).find((g) => g.key === focusedGuideKeys[0]);\n\n                      if (!currFocusedGuide) {\n                        client.setDebug({\n                          ...debugSettings,\n                          focusedGuideKeys: {},\n                        });\n                      }\n                    }\n\n                    setDisplayOption(val);\n                  }}\n                >\n                  <SegmentedControl.Option\n                    value=\"all-guides\"\n                    style={{ width: \"54px\" }}\n                  >\n                    All\n                  </SegmentedControl.Option>\n                  <SegmentedControl.Option\n                    value=\"only-active\"\n                    style={{ width: \"54px\" }}\n                  >\n                    Active\n                  </SegmentedControl.Option>\n                  <SegmentedControl.Option\n                    value=\"only-eligible\"\n                    style={{ width: \"54px\" }}\n                  >\n                    Eligible\n                  </SegmentedControl.Option>\n                </SegmentedControl.Root>\n\n                <Tooltip label=\"Settings\" {...sharedTooltipProps}>\n                  <Button\n                    size=\"1\"\n                    variant={isContextPanelOpen ? \"outline\" : \"ghost\"}\n                    color={isContextPanelOpen ? \"blue\" : \"gray\"}\n                    leadingIcon={{\n                      icon: SlidersHorizontal,\n                      alt: \"Inspect target params\",\n                    }}\n                    trailingIcon={\n                      isContextPanelOpen\n                        ? { icon: ChevronDown, alt: \"Hide context data\" }\n                        : { icon: ChevronRight, alt: \"Show context data\" }\n                    }\n                    onClick={() => setIsContextPanelOpen((v) => !v)}\n                  />\n                </Tooltip>\n              </Stack>\n            </Stack>\n\n            {/* Right: exit + minimize buttons */}\n            <Stack\n              align=\"center\"\n              gap=\"1_5\"\n              style={{ flexShrink: 0 }}\n              onPointerDown={(e: React.PointerEvent) => e.stopPropagation()}\n            >\n              <Stack align=\"center\" gap=\"1_5\">\n                <Button\n                  size=\"1\"\n                  variant=\"outline\"\n                  leadingIcon={{ icon: LogOut, alt: \"Exit\" }}\n                  onClick={() => {\n                    setRunConfig((curr) => ({ ...curr, isVisible: false }));\n                  }}\n                >\n                  Exit\n                </Button>\n                <Tooltip label=\"Minimize toolbar\" {...sharedTooltipProps}>\n                  <Button\n                    size=\"1\"\n                    variant=\"outline\"\n                    leadingIcon={{ icon: Minimize2, alt: \"Minimize\" }}\n                    onClick={() => setIsCollapsed(true)}\n                  />\n                </Tooltip>\n              </Stack>\n            </Stack>\n          </Stack>\n\n          {/* Collapsible panel to show context data */}\n          {isContextPanelOpen && (\n            <Box borderBottom=\"px\">\n              <GuideContextDetails />\n            </Box>\n          )}\n\n          {/* Guide list content area */}\n          <Box\n            tgphRef={guideListRef}\n            p=\"1\"\n            overflow=\"auto\"\n            style={{ maxHeight: \"calc(80vh - 96px)\" }}\n          >\n            {result.status === \"error\" ? (\n              <Box px=\"2\" pb=\"1\" style={{ lineHeight: \"1.2\" }}>\n                <Text\n                  as=\"span\"\n                  size=\"1\"\n                  weight=\"medium\"\n                  color={\n                    result.error === \"no_guides_fetched\" ? \"default\" : \"red\"\n                  }\n                >\n                  {result.message}\n                </Text>\n              </Box>\n            ) : guides.length === 0 ? (\n              <Box px=\"2\" pb=\"1\" style={{ lineHeight: \"1.2\" }}>\n                <Text as=\"span\" size=\"1\" weight=\"medium\" color=\"default\">\n                  {getEmptyStateMessage(displayOption)}\n                </Text>\n              </Box>\n            ) : (\n              guides.map((guide) => (\n                <GuideRow\n                  key={guide.key}\n                  guide={guide}\n                  orderIndex={guide.orderIndex}\n                  isExpanded={guide.key === expandedGuideRowKey}\n                  onClick={() => {\n                    setExpandedGuideRowKey((k) =>\n                      k && k === guide.key ? undefined : guide.key,\n                    );\n                  }}\n                />\n              ))\n            )}\n          </Box>\n\n          {/* Focus chin with dedicated controls */}\n          <FocusChin guides={guides} guideListRef={guideListRef} />\n        </Stack>\n      )}\n    </Box>\n  );\n};\n"],"names":["TOGGLE_COLLAPSED_HOTKEY","TOOLBAR_WIDTH","TOOLBAR_BOX_SHADOW","join","Kbd","children","React","display","padding","borderRadius","border","backgroundColor","getEmptyStateMessage","displayOption","filterGuides","guides","filter","guide","annotation","isEligible","active","status","V2","readyToTarget","listenForUpdates","client","useGuideContext","setDisplayOption","useState","runConfig","setRunConfig","KnockGuideClient","getToolbarRunConfigFromUrl","isCollapsed","setIsCollapsed","isContextPanelOpen","setIsContextPanelOpen","expandedGuideRowKey","setExpandedGuideRowKey","useEffect","undefined","isVisible","focusedGuideKeys","isDebugging","store","state","debug","debugging","setDebug","Object","keys","length","unsetDebug","handleKeyDown","e","ctrlKey","key","repeat","preventDefault","prev","addEventListener","removeEventListener","containerRef","useRef","guideListRef","position","isDragging","handlePointerDown","hasDraggedRef","useDraggable","elementRef","reclampDeps","initialPosition","top","right","result","useInspectGuideClientStore","Box","zIndex","TOOLBAR_Z_INDEX","Tooltip","Text","Stack","sharedTooltipProps","cursor","touchAction","userSelect","animation","transform","transformOrigin","KnockButton","current","width","boxShadow","boxSizing","minWidth","flex","stopPropagation","Icon","GripVertical","SegmentedControl","val","debugSettings","find","g","Button","icon","SlidersHorizontal","alt","ChevronDown","ChevronRight","v","flexShrink","LogOut","curr","Minimize2","GuideContextDetails","maxHeight","lineHeight","error","message","map","GuideRow","orderIndex","k","FocusChin"],"mappings":";;;;;;;;;;;;;;;;;;;AAgCA,MAAMA,IAA0B,KAE1BC,IAAgB,SAEhBC,KAAqB,CACzB,iCACA,uCACA,2CACA,mCACA,sCACA,qCAAqC,EACrCC,KAAK,IAAI,GAELC,IAAMA,CAAC;AAAA,EAAEC,UAAAA;AAAwC,MAEnDC,gBAAAA,EAAA,cAAC,SACC,OAAO;AAAA,EACLC,SAAS;AAAA,EACTC,SAAS;AAAA,EACTC,cAAc;AAAA,EACdC,QAAQ;AAAA,EACRC,iBAAiB;KAGlBN,CACH,GAIEO,KAAuBA,CAACC,MAAiC;AAC7D,UAAQA,GAAa;AAAA,IACnB,KAAK;AACI,aAAA;AAAA,IACT,KAAK;AACI,aAAA;AAAA,IACT,KAAK;AACI,aAAA;AAAA,EAAA;AAEb,GAEMC,IAAeA,CACnBC,GACAF,MAEOE,EAAOC,OAAQC,CAAUA,MAC1BJ,EAAAA,MAAkB,mBAAmB,CAACI,EAAMC,WAAWC,cAGvDN,MAAkB,iBAAiB,CAACI,EAAMC,WAAWE,OAAOC,OAIjE,GAQUC,KAAKA,CAAC;AAAA,EAAEC,eAAAA;AAAAA,EAAeC,kBAAAA;AAAwB,MAAM;AAC1D,QAAA;AAAA,IAAEC,QAAAA;AAAAA,MAAWC,EAAgB,GAE7B,CAACb,GAAec,CAAgB,IACpCrB,EAAMsB,SAAwB,aAAa,GACvC,CAACC,GAAWC,CAAY,IAAIxB,EAAMsB,SAAS,MAC/CG,EAAiBC,4BACnB,GACM,CAACC,GAAaC,CAAc,IAAI5B,EAAMsB,SAAS,EAAK,GACpD,CAACO,GAAoBC,CAAqB,IAAI9B,EAAMsB,SAAS,EAAK,GAElE,CAACS,GAAqBC,CAAsB,IAAIhC,EAAMsB,SAE1D;AAEFtB,EAAAA,EAAMiC,UAAU,MAAM;AACpBD,IAAAA,EAAuBE,MAAS;AAAA,EAAA,GAC/B,CAAC3B,CAAa,CAAC,GAElBP,EAAMiC,UAAU,MAAM;;AACd,UAAA;AAAA,MAAEE,WAAAA,IAAY;AAAA,MAAOC,kBAAAA,IAAmB,CAAA;AAAA,IAAG,IAAIb,KAAa,CAAC,GAC7Dc,KAAclB,IAAAA,EAAOmB,MAAMC,MAAMC,UAAnBrB,gBAAAA,EAA0BsB;AAE1CN,WAAAA,KAAa,CAACE,KAAepB,MAC/BE,EAAOuB,SAAS;AAAA,MAAEN,kBAAAA;AAAAA,IAAAA,CAAkB,GAGhCO,OAAOC,KAAKR,CAAgB,EAAES,SAAS,KACzCxB,EAAiB,YAAY,IAI7B,CAACc,KAAaE,KAChBlB,EAAO2B,WAAW;AAAA,MAAE5B,kBAAAA;AAAAA,IAAAA,CAAkB,GAGjC,MAAM;;AACX,OAAIC,IAAAA,EAAOmB,MAAMC,MAAMC,UAAnBrB,QAAAA,EAA0BsB,aAC5BtB,EAAO2B,WAAW;AAAA,QAAE5B,kBAAAA;AAAAA,MAAAA,CAAkB;AAAA,IAE1C;AAAA,EAAA,GACC,CAACD,GAAeC,GAAkBK,GAAWJ,GAAQE,CAAgB,CAAC,GAGzErB,EAAMiC,UAAU,MAAM;AACdc,UAAAA,IAAgBA,CAACC,MAAqB;AAC1C,MAAIA,EAAEC,WAAWD,EAAEE,QAAQxD,KAA2B,CAACsD,EAAEG,WACvDH,EAAEI,eAAe,GACDC,EAAAA,CAAAA,MAAS,CAACA,CAAI;AAAA,IAElC;AAEOC,kBAAAA,iBAAiB,WAAWP,CAAa,GACzC,MAAM;AACJQ,aAAAA,oBAAoB,WAAWR,CAAa;AAAA,IACrD;AAAA,EACF,GAAG,EAAE;AAECS,QAAAA,IAAexD,EAAMyD,OAAuB,IAAI,GAChDC,IAAe1D,EAAMyD,OAAuB,IAAI,GAChD;AAAA,IAAEE,UAAAA;AAAAA,IAAUC,YAAAA;AAAAA,IAAYC,mBAAAA;AAAAA,IAAmBC,eAAAA;AAAAA,MAC/CC,EAAa;AAAA,IACXC,YAAYR;AAAAA,IACZS,aAAa,CAACtC,CAAW;AAAA,IACzBuC,iBAAiB;AAAA,MAAEC,KAAK;AAAA,MAAIC,OAAO;AAAA,IAAA;AAAA,EAAG,CACvC,GAEGC,IAASC,EAA2B/C,CAAS;AACnD,MAAI,CAAC8C,KAAU,EAAC9C,KAAAA,QAAAA,EAAWY;AAClB,WAAA;AAGH1B,QAAAA,IACJ4D,EAAOtD,WAAW,OAAOP,EAAa6D,EAAO5D,QAAQF,CAAa,IAAI,CAAE;AAE1E,yCACGgE,GACC,EAAA,SAASf,GACT,UAAS,SACT,OAAO;AAAA,IACLW,KAAKR,EAASQ,MAAM;AAAA,IACpBC,OAAOT,EAASS,QAAQ;AAAA,IACxBI,QAAQC;AAAAA,EACV,EAAA,GAEC9C,IACE3B,gBAAAA,EAAA,cAAA0E,GAAA,EACC,MAAK,QACL,OACG1E,gBAAAA,EAAA,cAAA2E,GAAA,EAAK,IAAG,QAAO,MAAK,IAAG,GAAA,iBAErB3E,gBAAAA,EAAA,cAAA4E,GAAA,EAAM,SAAQ,gBAAe,IAAG,IAC/B,GAAA5E,gBAAAA,EAAA,cAACF,GAAI,MAAA,MAAI,GAAM,uCAAIA,GAAI,MAAA,GAAC,CAC1B,CACF,GAEF,GAAI+E,KAEH7E,gBAAAA,EAAA,cAAA4E,GAAA,EACC,QAAO,MACP,SAAQ,KACR,OAAM,UACN,SAAQ,UACR,GAAE,MACF,GAAE,MACF,eAAef,GACf,iBAAgB,aAChB,OAAO;AAAA,IACLiB,QAAQlB,IAAa,aAAa;AAAA,IAClCmB,aAAa;AAAA,IACbC,YAAY;AAAA,IACZC,WAAW;AAAA,EACb,EAAA,GAECjF,gBAAAA,EAAA,cAAAuE,GAAA,EACC,OAAO;AAAA,IACLW,WAAW;AAAA,IACXC,iBAAiB;AAAA,EAGnB,EAAA,GAAAnF,gBAAAA,EAAA,cAACoF,GACC,EAAA,SAAS,MAAM;AACT,IAACtB,EAAcuB,WACjBzD,EAAe,EAAK;AAAA,EACtB,GAEF,YAAY,IAAM,CAEtB,CACF,CACF,IAEA5B,gBAAAA,EAAA,cAAC4E,GACC,EAAA,WAAU,UACV,iBAAgB,aAChB,SAAQ,KACR,UAAS,UACT,OAAO;AAAA,IACLU,OAAO3F;AAAAA,IACP4F,WAAW3F;AAAAA,IACXqF,WAAW;AAAA,EAAA,KAIZjF,gBAAAA,EAAA,cAAA4E,GAAA,EACC,GAAE,QACF,GAAE,KACF,SAAQ,iBACR,WAAU,OACV,OAAM,UACN,KAAI,KACJ,cAAa,MACb,eAAef,GACf,OAAO;AAAA,IACL2B,WAAW;AAAA,IACXV,QAAQlB,IAAa,aAAa;AAAA,IAClCmB,aAAa;AAAA,IACbC,YAAY;AAAA,EAAA,KAIbhF,gBAAAA,EAAA,cAAA4E,GAAA,EAAM,OAAM,UAAS,KAAI,OAAM,OAAO;AAAA,IAAEa,UAAU;AAAA,IAAGC,MAAM;AAAA,EAAA,KACzD1F,gBAAAA,EAAA,cAAA4E,GAAA,EACC,SAAQ,eACR,OAAM,UACN,OAAO;AAAA,IACLE,QAAQlB,IAAa,aAAa;AAAA,IAClCmB,aAAa;AAAA,IACbC,YAAY;AAAA,EAAA,GAEd,eAAe,CAAChC,MAA0B;AAExCA,IAAAA,EAAE2C,gBAAgB,GAClB9B,EAAkBb,CAAC;AAAA,EAAA,KAGpBhD,gBAAAA,EAAA,cAAA4F,GAAA,EAAK,OAAM,QAAO,MAAK,KAAI,MAAMC,GAAc,eAAW,IAAA,CAC7D,GACC7F,gBAAAA,EAAA,cAAA4E,GAAA,EACC,OAAM,UACN,KAAI,OACJ,eAAe,CAAC5B,MAA0BA,EAAE2C,kBAAgB,mCAE3DG,EAAiB,MAAjB,EACC,MAAK,KACL,MAAK,UACL,OAAOvF,GACP,eAAe,CAACwF,MAAuB;AACrC,QAAI,CAACA,EAAK;AAEJC,UAAAA,IAAgB7E,EAAOmB,MAAMC,MAAMC,OAEnCJ,IAAmBO,OAAOC,MAC9BoD,KAAAA,gBAAAA,EAAe5D,qBAAoB,CAAA,CACrC;AAIA,IAAIiC,EAAOtD,WAAW,QAAQqB,EAAiBS,SAAS,MAC7BrC,EACvB6D,EAAO5D,QACPsF,CACF,EAAEE,KAAMC,CAAAA,MAAMA,EAAEhD,QAAQd,EAAiB,CAAC,CAAC,KAGzCjB,EAAOuB,SAAS;AAAA,MACd,GAAGsD;AAAAA,MACH5D,kBAAkB,CAAA;AAAA,IAAC,CACpB,IAILf,EAAiB0E,CAAG;AAAA,EAAA,KAGrB/F,gBAAAA,EAAA,cAAA8F,EAAiB,QAAjB,EACC,OAAM,cACN,OAAO;AAAA,IAAER,OAAO;AAAA,EAAA,KAAS,KAG3B,GACAtF,gBAAAA,EAAA,cAAC8F,EAAiB,QAAjB,EACC,OAAM,eACN,OAAO;AAAA,IAAER,OAAO;AAAA,EAAA,KAAS,QAG3B,GACAtF,gBAAAA,EAAA,cAAC8F,EAAiB,QAAjB,EACC,OAAM,iBACN,OAAO;AAAA,IAAER,OAAO;AAAA,EAAO,EAAA,GAAE,UAG3B,CACF,mCAECZ,GAAQ,EAAA,OAAM,YAAeG,GAAAA,EAC5B,GAAA7E,gBAAAA,EAAA,cAACmG,KACC,MAAK,KACL,SAAStE,IAAqB,YAAY,SAC1C,OAAOA,IAAqB,SAAS,QACrC,aAAa;AAAA,IACXuE,MAAMC;AAAAA,IACNC,KAAK;AAAA,EAAA,GAEP,cACEzE,IACI;AAAA,IAAEuE,MAAMG;AAAAA,IAAaD,KAAK;AAAA,EAAA,IAC1B;AAAA,IAAEF,MAAMI;AAAAA,IAAcF,KAAK;AAAA,EAAA,GAEjC,SAAS,MAAMxE,EAAuB2E,CAAMA,MAAA,CAACA,CAAC,EAAE,CAAA,CAEpD,CACF,CACF,GAGCzG,gBAAAA,EAAA,cAAA4E,GAAA,EACC,OAAM,UACN,KAAI,OACJ,OAAO;AAAA,IAAE8B,YAAY;AAAA,KACrB,eAAe,CAAC1D,MAA0BA,EAAE2C,gBAAAA,KAE3C3F,gBAAAA,EAAA,cAAA4E,GAAA,EAAM,OAAM,UAAS,KAAI,SACvB5E,gBAAAA,EAAA,cAAAmG,GAAA,EACC,MAAK,KACL,SAAQ,WACR,aAAa;AAAA,IAAEC,MAAMO;AAAAA,IAAQL,KAAK;AAAA,EAAO,GACzC,SAAS,MAAM;AACb9E,IAAAA,EAAcoF,CAAUA,OAAA;AAAA,MAAE,GAAGA;AAAAA,MAAMzE,WAAW;AAAA,IAAA,EAAQ;AAAA,EAAA,KACtD,MAGJ,GACAnC,gBAAAA,EAAA,cAAC0E,KAAQ,OAAM,oBAAuBG,GAAAA,EAAAA,mCACnCsB,GACC,EAAA,MAAK,KACL,SAAQ,WACR,aAAa;AAAA,IAAEC,MAAMS;AAAAA,IAAWP,KAAK;AAAA,EACrC,GAAA,SAAS,MAAM1E,EAAe,EAAI,EAAA,CAAE,CAExC,CACF,CACF,CACF,GAGCC,KACE7B,gBAAAA,EAAA,cAAAuE,GAAA,EAAI,cAAa,KAAA,GACfvE,gBAAAA,EAAA,cAAA8G,GAAA,IAAmB,CACtB,GAID9G,gBAAAA,EAAA,cAAAuE,GAAA,EACC,SAASb,GACT,GAAE,KACF,UAAS,QACT,OAAO;AAAA,IAAEqD,WAAW;AAAA,EAAoB,EAAA,GAEvC1C,EAAOtD,WAAW,UACjBf,gBAAAA,EAAA,cAACuE,KAAI,IAAG,KAAI,IAAG,KAAI,OAAO;AAAA,IAAEyC,YAAY;AAAA,EAAA,EACtC,GAAAhH,gBAAAA,EAAA,cAAC2E,GACC,EAAA,IAAG,QACH,MAAK,KACL,QAAO,UACP,OACEN,EAAO4C,UAAU,sBAAsB,YAAY,MAGpD5C,GAAAA,EAAO6C,OACV,CACF,IACEzG,EAAOoC,WAAW,IACnB7C,gBAAAA,EAAA,cAAAuE,GAAA,EAAI,IAAG,KAAI,IAAG,KAAI,OAAO;AAAA,IAAEyC,YAAY;AAAA,EAAA,EACtC,GAAAhH,gBAAAA,EAAA,cAAC2E,GAAK,EAAA,IAAG,QAAO,MAAK,KAAI,QAAO,UAAS,OAAM,UAAA,GAC5CrE,GAAqBC,CAAa,CACrC,CACF,IAEAE,EAAO0G,IAAKxG,CACVA,MAAAX,gBAAAA,EAAA,cAACoH,GACC,EAAA,KAAKzG,EAAMuC,KACX,OAAAvC,GACA,YAAYA,EAAM0G,YAClB,YAAY1G,EAAMuC,QAAQnB,GAC1B,SAAS,MAAM;AACbC,IAAAA,EAAwBsF,OACtBA,KAAKA,MAAM3G,EAAMuC,MAAMhB,SAAYvB,EAAMuC,GAC3C;AAAA,EAAA,IAGL,CAEL,mCAGCqE,GAAU,EAAA,QAAA9G,GAAgB,cAAAiD,EAA2B,CAAA,CACxD,CAEJ;AAEJ;"}
+{"version":3,"file":"V2.mjs","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/V2.tsx"],"sourcesContent":["import { KnockGuideClient } from \"@knocklabs/client\";\nimport { useGuideContext } from \"@knocklabs/react-core\";\nimport { Button } from \"@telegraph/button\";\nimport { Icon } from \"@telegraph/icon\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport { SegmentedControl } from \"@telegraph/segmented-control\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text } from \"@telegraph/typography\";\nimport {\n  ChevronDown,\n  ChevronRight,\n  GripVertical,\n  LogOut,\n  Minimize2,\n  SlidersHorizontal,\n} from \"lucide-react\";\nimport React from \"react\";\n\nimport { KnockButton } from \"../KnockButton\";\nimport { TOOLBAR_Z_INDEX } from \"../shared\";\nimport \"../styles.css\";\n\nimport { FocusChin } from \"./FocusChin\";\nimport { GuideContextDetails } from \"./GuideContextDetails\";\nimport { GuideRow } from \"./GuideRow\";\nimport { Kbd } from \"./Kbd\";\nimport { DisplayOption, sharedTooltipProps } from \"./helpers\";\nimport { useDraggable } from \"./useDraggable\";\nimport {\n  InspectionResultOk,\n  useInspectGuideClientStore,\n} from \"./useInspectGuideClientStore\";\n\nconst TOGGLE_COLLAPSED_HOTKEY = \".\";\n\nconst TOOLBAR_WIDTH = \"540px\";\n\nconst TOOLBAR_BOX_SHADOW = [\n  \"0 0 0 1px rgba(0, 0, 0, 0.06)\",\n  \"0 0 0 1px rgba(255, 255, 255, 0.10)\",\n  \"inset 0 1px 0 rgba(255, 255, 255, 0.04)\",\n  \"0 1px 1px 0 rgba(0, 0, 0, 0.04)\",\n  \"0 4px 6px -1px rgba(0, 0, 0, 0.05)\",\n  \"0 8px 16px -4px rgba(0, 0, 0, 0.06)\",\n].join(\", \");\n\nconst getEmptyStateMessage = (displayOption: DisplayOption) => {\n  switch (displayOption) {\n    case \"all-guides\":\n      return \"You have no guides. Get started by creating a guide.\";\n    case \"only-active\":\n      return \"There are no active guides.\";\n    case \"only-eligible\":\n      return \"Your current user is not eligible for any guides.\";\n  }\n};\n\nconst filterGuides = (\n  guides: InspectionResultOk[\"guides\"],\n  displayOption: DisplayOption,\n) => {\n  return guides.filter((guide) => {\n    if (displayOption === \"only-eligible\" && !guide.annotation.isEligible) {\n      return false;\n    }\n    if (displayOption === \"only-active\" && !guide.annotation.active.status) {\n      return false;\n    }\n    return true;\n  });\n};\n\ntype Props = {\n  readyToTarget: boolean;\n  listenForUpdates: boolean;\n};\n\nexport const V2 = ({ readyToTarget, listenForUpdates }: Props) => {\n  const { client } = useGuideContext();\n\n  const [displayOption, setDisplayOption] =\n    React.useState<DisplayOption>(\"only-active\");\n  const [runConfig, setRunConfig] = React.useState(() =>\n    KnockGuideClient.getToolbarRunConfigFromUrl(),\n  );\n  const [isCollapsed, setIsCollapsed] = React.useState(false);\n  const [isContextPanelOpen, setIsContextPanelOpen] = React.useState(false);\n\n  const [expandedGuideRowKey, setExpandedGuideRowKey] = React.useState<\n    string | undefined\n  >();\n\n  React.useEffect(() => {\n    setExpandedGuideRowKey(undefined);\n  }, [displayOption]);\n\n  React.useEffect(() => {\n    const { isVisible = false, focusedGuideKeys = {} } = runConfig || {};\n    const isDebugging = client.store.state.debug?.debugging;\n\n    if (isVisible && !isDebugging && readyToTarget) {\n      client.setDebug({ focusedGuideKeys });\n\n      // If focused, switch to all guides so you can see in the list.\n      if (Object.keys(focusedGuideKeys).length > 0) {\n        setDisplayOption(\"all-guides\");\n      }\n    }\n\n    if (!isVisible && isDebugging) {\n      client.unsetDebug({ listenForUpdates });\n    }\n\n    return () => {\n      if (client.store.state.debug?.debugging) {\n        client.unsetDebug({ listenForUpdates });\n      }\n    };\n  }, [readyToTarget, listenForUpdates, runConfig, client, setDisplayOption]);\n\n  // Toggle collapsed state with Ctrl + .\n  React.useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.ctrlKey && e.key === TOGGLE_COLLAPSED_HOTKEY && !e.repeat) {\n        e.preventDefault();\n        setIsCollapsed((prev) => !prev);\n      }\n    };\n\n    window.addEventListener(\"keydown\", handleKeyDown);\n    return () => {\n      window.removeEventListener(\"keydown\", handleKeyDown);\n    };\n  }, []);\n\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const guideListRef = React.useRef<HTMLDivElement>(null);\n  const { position, isDragging, handlePointerDown, hasDraggedRef } =\n    useDraggable({\n      elementRef: containerRef,\n      reclampDeps: [isCollapsed],\n      initialPosition: { top: 16, right: 16 },\n    });\n\n  const result = useInspectGuideClientStore(runConfig);\n  if (!result || !runConfig?.isVisible) {\n    return null;\n  }\n\n  const guides =\n    result.status === \"ok\" ? filterGuides(result.guides, displayOption) : [];\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      {isCollapsed ? (\n        <Tooltip\n          side=\"left\"\n          label={\n            <Text as=\"span\" size=\"1\">\n              Guide Toolbar\n              <Stack display=\"inline-block\" ml=\"3\">\n                <Kbd>ctrl</Kbd> + <Kbd>.</Kbd>\n              </Stack>\n            </Text>\n          }\n          {...sharedTooltipProps}\n        >\n          <Stack\n            border=\"px\"\n            rounded=\"4\"\n            align=\"center\"\n            justify=\"center\"\n            w=\"10\"\n            h=\"10\"\n            onPointerDown={handlePointerDown}\n            backgroundColor=\"surface-1\"\n            style={{\n              cursor: isDragging ? \"grabbing\" : \"grab\",\n              touchAction: \"none\",\n              userSelect: \"none\",\n              animation: \"toolbar-collapse-fade-in 150ms ease-out\",\n            }}\n          >\n            <Box\n              style={{\n                transform: \"scale(0.7)\",\n                transformOrigin: \"center center\",\n              }}\n            >\n              <KnockButton\n                onClick={() => {\n                  if (!hasDraggedRef.current) {\n                    setIsCollapsed(false);\n                  }\n                }}\n                positioned={false}\n              />\n            </Box>\n          </Stack>\n        </Tooltip>\n      ) : (\n        <Stack\n          direction=\"column\"\n          backgroundColor=\"surface-1\"\n          rounded=\"4\"\n          overflow=\"hidden\"\n          style={{\n            width: TOOLBAR_WIDTH,\n            boxShadow: TOOLBAR_BOX_SHADOW,\n            animation: \"toolbar-expand-fade-in 150ms ease-out\",\n          }}\n        >\n          {/* Header — also acts as drag handle area */}\n          <Stack\n            w=\"full\"\n            p=\"2\"\n            justify=\"space-between\"\n            direction=\"row\"\n            align=\"center\"\n            gap=\"2\"\n            borderBottom=\"px\"\n            onPointerDown={handlePointerDown}\n            style={{\n              boxSizing: \"border-box\",\n              cursor: isDragging ? \"grabbing\" : \"grab\",\n              touchAction: \"none\",\n              userSelect: \"none\",\n            }}\n          >\n            {/* Left: drag icon + segmented control + settings */}\n            <Stack align=\"center\" gap=\"1_5\" style={{ minWidth: 0, flex: 1 }}>\n              <Stack\n                display=\"inline-flex\"\n                align=\"center\"\n                style={{\n                  cursor: isDragging ? \"grabbing\" : \"grab\",\n                  touchAction: \"none\",\n                  userSelect: \"none\",\n                }}\n                onPointerDown={(e: React.PointerEvent) => {\n                  // Already handled by parent, prevent double-fire\n                  e.stopPropagation();\n                  handlePointerDown(e);\n                }}\n              >\n                <Icon color=\"gray\" size=\"1\" icon={GripVertical} aria-hidden />\n              </Stack>\n              <Stack\n                align=\"center\"\n                gap=\"1_5\"\n                onPointerDown={(e: React.PointerEvent) => e.stopPropagation()}\n              >\n                <SegmentedControl.Root\n                  size=\"1\"\n                  type=\"single\"\n                  value={displayOption}\n                  onValueChange={(val: DisplayOption) => {\n                    if (!val) return;\n\n                    const debugSettings = client.store.state.debug;\n\n                    const focusedGuideKeys = Object.keys(\n                      debugSettings?.focusedGuideKeys || {},\n                    );\n\n                    // Exit out of focus if the currently focused guide is not\n                    // part of the selected list filter.\n                    if (result.status === \"ok\" && focusedGuideKeys.length > 0) {\n                      const currFocusedGuide = filterGuides(\n                        result.guides,\n                        val,\n                      ).find((g) => g.key === focusedGuideKeys[0]);\n\n                      if (!currFocusedGuide) {\n                        client.setDebug({\n                          ...debugSettings,\n                          focusedGuideKeys: {},\n                        });\n                      }\n                    }\n\n                    setDisplayOption(val);\n                  }}\n                >\n                  <SegmentedControl.Option\n                    value=\"all-guides\"\n                    style={{ width: \"54px\" }}\n                  >\n                    All\n                  </SegmentedControl.Option>\n                  <SegmentedControl.Option\n                    value=\"only-active\"\n                    style={{ width: \"54px\" }}\n                  >\n                    Active\n                  </SegmentedControl.Option>\n                  <SegmentedControl.Option\n                    value=\"only-eligible\"\n                    style={{ width: \"54px\" }}\n                  >\n                    Eligible\n                  </SegmentedControl.Option>\n                </SegmentedControl.Root>\n\n                <Tooltip label=\"Settings\" {...sharedTooltipProps}>\n                  <Button\n                    size=\"1\"\n                    variant={isContextPanelOpen ? \"outline\" : \"ghost\"}\n                    color={isContextPanelOpen ? \"blue\" : \"gray\"}\n                    leadingIcon={{\n                      icon: SlidersHorizontal,\n                      alt: \"Inspect target params\",\n                    }}\n                    trailingIcon={\n                      isContextPanelOpen\n                        ? { icon: ChevronDown, alt: \"Hide context data\" }\n                        : { icon: ChevronRight, alt: \"Show context data\" }\n                    }\n                    onClick={() => setIsContextPanelOpen((v) => !v)}\n                  />\n                </Tooltip>\n              </Stack>\n            </Stack>\n\n            {/* Right: exit + minimize buttons */}\n            <Stack\n              align=\"center\"\n              gap=\"1_5\"\n              style={{ flexShrink: 0 }}\n              onPointerDown={(e: React.PointerEvent) => e.stopPropagation()}\n            >\n              <Stack align=\"center\" gap=\"1_5\">\n                <Button\n                  size=\"1\"\n                  variant=\"outline\"\n                  leadingIcon={{ icon: LogOut, alt: \"Exit\" }}\n                  onClick={() => {\n                    setRunConfig((curr) => ({ ...curr, isVisible: false }));\n                  }}\n                >\n                  Exit\n                </Button>\n                <Tooltip label=\"Minimize toolbar\" {...sharedTooltipProps}>\n                  <Button\n                    size=\"1\"\n                    variant=\"outline\"\n                    leadingIcon={{ icon: Minimize2, alt: \"Minimize\" }}\n                    onClick={() => setIsCollapsed(true)}\n                  />\n                </Tooltip>\n              </Stack>\n            </Stack>\n          </Stack>\n\n          {/* Collapsible panel to show context data */}\n          {isContextPanelOpen && (\n            <Box borderBottom=\"px\">\n              <GuideContextDetails />\n            </Box>\n          )}\n\n          {/* Guide list content area */}\n          <Box\n            tgphRef={guideListRef}\n            p=\"1\"\n            overflow=\"auto\"\n            style={{ maxHeight: \"calc(80vh - 96px)\" }}\n          >\n            {result.status === \"error\" ? (\n              <Box px=\"2\" pb=\"1\" style={{ lineHeight: \"1.2\" }}>\n                <Text\n                  as=\"span\"\n                  size=\"1\"\n                  weight=\"medium\"\n                  color={\n                    result.error === \"no_guides_fetched\" ? \"default\" : \"red\"\n                  }\n                >\n                  {result.message}\n                </Text>\n              </Box>\n            ) : guides.length === 0 ? (\n              <Box px=\"2\" pb=\"1\" style={{ lineHeight: \"1.2\" }}>\n                <Text as=\"span\" size=\"1\" weight=\"medium\" color=\"default\">\n                  {getEmptyStateMessage(displayOption)}\n                </Text>\n              </Box>\n            ) : (\n              guides.map((guide) => (\n                <GuideRow\n                  key={guide.key}\n                  guide={guide}\n                  orderIndex={guide.orderIndex}\n                  isExpanded={guide.key === expandedGuideRowKey}\n                  onClick={() => {\n                    setExpandedGuideRowKey((k) =>\n                      k && k === guide.key ? undefined : guide.key,\n                    );\n                  }}\n                />\n              ))\n            )}\n          </Box>\n\n          {/* Focus chin with dedicated controls */}\n          <FocusChin guides={guides} guideListRef={guideListRef} />\n        </Stack>\n      )}\n    </Box>\n  );\n};\n"],"names":["TOGGLE_COLLAPSED_HOTKEY","TOOLBAR_WIDTH","TOOLBAR_BOX_SHADOW","join","getEmptyStateMessage","displayOption","filterGuides","guides","filter","guide","annotation","isEligible","active","status","V2","readyToTarget","listenForUpdates","client","useGuideContext","setDisplayOption","React","useState","runConfig","setRunConfig","KnockGuideClient","getToolbarRunConfigFromUrl","isCollapsed","setIsCollapsed","isContextPanelOpen","setIsContextPanelOpen","expandedGuideRowKey","setExpandedGuideRowKey","useEffect","undefined","isVisible","focusedGuideKeys","isDebugging","store","state","debug","debugging","setDebug","Object","keys","length","unsetDebug","handleKeyDown","e","ctrlKey","key","repeat","preventDefault","prev","addEventListener","removeEventListener","containerRef","useRef","guideListRef","position","isDragging","handlePointerDown","hasDraggedRef","useDraggable","elementRef","reclampDeps","initialPosition","top","right","result","useInspectGuideClientStore","Box","zIndex","TOOLBAR_Z_INDEX","Tooltip","Text","Stack","Kbd","sharedTooltipProps","cursor","touchAction","userSelect","animation","transform","transformOrigin","KnockButton","current","width","boxShadow","boxSizing","minWidth","flex","stopPropagation","Icon","GripVertical","SegmentedControl","val","debugSettings","find","g","Button","icon","SlidersHorizontal","alt","ChevronDown","ChevronRight","v","flexShrink","LogOut","curr","Minimize2","GuideContextDetails","maxHeight","lineHeight","error","message","map","GuideRow","orderIndex","k","FocusChin"],"mappings":"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"}