@knocklabs/react 0.11.12 → 0.11.14

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

@@ -1,79 +1,80 @@
-import { useGuideContext as g, useStore as y } from "@knocklabs/react-core";
+import { useGuideContext as h, useStore as y } from "@knocklabs/react-core";
 import { Button as d } from "@telegraph/button";
-import { Box as h, Stack as p } from "@telegraph/layout";
+import { Box as x, Stack as f } from "@telegraph/layout";
 import { Tooltip as m } from "@telegraph/tooltip";
-import { Text as x } from "@telegraph/typography";
-import { ChevronLeft as E, ChevronRight as k, X as v } from "lucide-react";
+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 C } from "./GuideRow.mjs";
-const f = 60, b = (o, i) => {
+import { GUIDE_ROW_DATA_SELECTOR as T } from "./GuideRow.mjs";
+import { sharedTooltipProps as p } from "./helpers.mjs";
+const b = 60, g = (o, i) => {
   requestAnimationFrame(() => {
-    const n = o.querySelector(`[${C}="${CSS.escape(i)}"]`);
-    if (!n || !(n instanceof HTMLElement)) return;
-    const e = o.getBoundingClientRect(), c = n.getBoundingClientRect();
+    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) - f,
+      top: o.scrollTop - (e.top - c.top) - b,
       behavior: "smooth"
     }) : c.bottom > e.bottom && o.scrollTo({
-      top: o.scrollTop + (c.bottom - e.bottom) + f,
+      top: o.scrollTop + (c.bottom - e.bottom) + b,
       behavior: "smooth"
     });
   });
-}, K = ({
+}, z = ({
   guides: o,
   guideListRef: i
 }) => {
   const {
-    client: n
-  } = g(), {
+    client: r
+  } = h(), {
     debugSettings: e
-  } = y(n.store, (r) => ({
-    debugSettings: r.debug
+  } = 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(h, { borderTop: "px", px: "3", py: "1", overflow: "hidden", backgroundColor: "blue-2" }, /* @__PURE__ */ t.createElement(p, { align: "center", justify: "space-between", gap: "4" }, /* @__PURE__ */ t.createElement(x, { as: "span", size: "1", weight: "medium", color: "blue", style: {
+  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: {
     display: "block",
     overflow: "hidden",
     textOverflow: "ellipsis",
     whiteSpace: "nowrap",
     minWidth: 0
-  } }, "Focus mode: ", a), /* @__PURE__ */ t.createElement(p, { align: "center", gap: "1", style: {
+  } }, "Focus mode: ", a), /* @__PURE__ */ t.createElement(f, { align: "center", gap: "1", style: {
     flexShrink: 0
-  } }, /* @__PURE__ */ t.createElement(m, { label: "Focus previous guide" }, /* @__PURE__ */ t.createElement(d, { size: "0", variant: "ghost", color: "blue", leadingIcon: {
-    icon: E,
+  } }, /* @__PURE__ */ t.createElement(m, { label: "Focus previous guide", ...p }, /* @__PURE__ */ t.createElement(d, { size: "0", variant: "ghost", color: "blue", leadingIcon: {
+    icon: v,
     alt: "Previous guide"
   }, onClick: () => {
-    const r = o.filter((s) => !!s.annotation.selectable.status), u = r.findIndex((s) => s.key === a), l = u <= 0 ? void 0 : r[u - 1];
-    l && (n.setDebug({
+    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 && b(i.current, l.key));
-  } })), /* @__PURE__ */ t.createElement(m, { label: "Focus next guide" }, /* @__PURE__ */ t.createElement(d, { size: "0", variant: "ghost", color: "blue", leadingIcon: {
+    }), 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,
     alt: "Next guide"
   }, onClick: () => {
-    const r = o.filter((s) => !!s.annotation.selectable.status), u = r.findIndex((s) => s.key === a), l = u < 0 || u + 1 > r.length - 1 ? void 0 : r[u + 1];
-    l && (n.setDebug({
+    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 && b(i.current, l.key));
-  } })), /* @__PURE__ */ t.createElement(m, { label: "Exit focus lock" }, /* @__PURE__ */ t.createElement(d, { size: "0", variant: "ghost", color: "blue", leadingIcon: {
-    icon: v,
+    }), 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,
     alt: "Clear focus"
   }, onClick: () => {
-    n.setDebug({
+    r.setDebug({
       ...e,
       focusedGuideKeys: {}
     });
   } })))));
 };
 export {
-  K as FocusChin
+  z 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 { 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\">\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\">\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 lock\">\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","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 { 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":";;;;;;;;;AAcA,MAAMA,IAAmB,IAEnBC,IAA2BA,CAACC,GAAwBC,MAAqB;AAC7EC,wBAAsB,MAAM;AACpBC,UAAAA,IAAKH,EAAUI,cACnB,IAAIC,CAAuB,KAAKC,IAAIC,OAAON,CAAQ,CAAC,IACtD;AACA,QAAI,CAACE,KAAM,EAAEA,aAAcK,aAAc;AAEnCC,UAAAA,IAAgBT,EAAUU,sBAAsB,GAChDC,IAASR,EAAGO,sBAAsB;AAEpCC,IAAAA,EAAOC,MAAMH,EAAcG,MAC7BZ,EAAUa,SAAS;AAAA,MACjBD,KACEZ,EAAUc,aACTL,EAAcG,MAAMD,EAAOC,OAC5Bd;AAAAA,MACFiB,UAAU;AAAA,IAAA,CACX,IACQJ,EAAOK,SAASP,EAAcO,UACvChB,EAAUa,SAAS;AAAA,MACjBD,KACEZ,EAAUc,aACTH,EAAOK,SAASP,EAAcO,UAC/BlB;AAAAA,MACFiB,UAAU;AAAA,IAAA,CACX;AAAA,EACH,CACD;AACH,GAOaE,IAAYA,CAAC;AAAA,EAAEC,QAAAA;AAAAA,EAAQC,cAAAA;AAAoB,MAAM;AACtD,QAAA;AAAA,IAAEC,QAAAA;AAAAA,MAAWC,EAAgB,GAC7B;AAAA,IAAEC,eAAAA;AAAAA,EAAkBC,IAAAA,EAASH,EAAOI,OAAQC,CAAWA,OAAA;AAAA,IAC3DH,eAAeG,EAAMC;AAAAA,EAAAA,EACrB,GAEIC,IAAcC,OAAOC,MAAKP,KAAAA,gBAAAA,EAAeQ,qBAAoB,CAAA,CAAE;AAGrE,MAAI,EADcH,EAAYI,SAAS;AAE9B,WAAA;AAGHC,QAAAA,IAAaL,EAAY,CAAC;AAEhC,SACG,gBAAAM,EAAA,cAAAC,GAAA,EACC,WAAU,MACV,IAAG,KACH,IAAG,KACH,UAAS,UACT,iBAAgB,SAAA,mCAEfC,GAAM,EAAA,OAAM,UAAS,SAAQ,iBAAgB,KAAI,OAChD,gBAAAF,EAAA,cAACG,GACC,EAAA,IAAG,QACH,MAAK,KACL,QAAO,UACP,OAAM,QACN,OAAO;AAAA,IACLC,SAAS;AAAA,IACTC,UAAU;AAAA,IACVC,cAAc;AAAA,IACdC,YAAY;AAAA,IACZC,UAAU;AAAA,EACZ,EAAA,GAAE,gBAEWT,CACf,GACA,gBAAAC,EAAA,cAACE,KAAM,OAAM,UAAS,KAAI,KAAI,OAAO;AAAA,IAAEO,YAAY;AAAA,EAAA,KACjD,gBAAAT,EAAA,cAACU,GAAQ,EAAA,OAAM,wBAA2BC,GAAAA,KACvC,gBAAAX,EAAA,cAAAY,GAAA,EACC,MAAK,KACL,SAAQ,SACR,OAAM,QACN,aAAa;AAAA,IAAEC,MAAMC;AAAAA,IAAaC,KAAK;AAAA,EAAiB,GACxD,SAAS,MAAM;AACPC,UAAAA,IAAmB/B,EAAOgC,OAC7BC,CAAAA,MAAM,CAAC,CAACA,EAAEC,WAAWC,WAAWC,MACnC,GACMC,IAAYN,EAAiBO,UAChCL,CAAMA,MAAAA,EAAEM,QAAQzB,CACnB,GACM0B,IACJH,KAAa,IAAII,SAAYV,EAAiBM,IAAY,CAAC;AAE7D,IAAKG,MAELtC,EAAOwC,SAAS;AAAA,MACd,GAAGtC;AAAAA,MACHQ,kBAAkB;AAAA,QAAE,CAAC4B,EAAUD,GAAG,GAAG;AAAA,MAAA;AAAA,IAAK,CAC3C,GAEGtC,EAAa0C,WACU1C,EAAAA,EAAa0C,SAASH,EAAUD,GAAG;AAAA,EAC9D,GACA,CAEN,GACC,gBAAAxB,EAAA,cAAAU,GAAA,EAAQ,OAAM,oBAAuBC,GAAAA,EACpC,GAAA,gBAAAX,EAAA,cAACY,KACC,MAAK,KACL,SAAQ,SACR,OAAM,QACN,aAAa;AAAA,IAAEC,MAAMgB;AAAAA,IAAcd,KAAK;AAAA,EAAa,GACrD,SAAS,MAAM;AACPC,UAAAA,IAAmB/B,EAAOgC,OAC7BC,CAAAA,MAAM,CAAC,CAACA,EAAEC,WAAWC,WAAWC,MACnC,GACMC,IAAYN,EAAiBO,UAChCL,CAAMA,MAAAA,EAAEM,QAAQzB,CACnB,GACM+B,IACJR,IAAY,KAAKA,IAAY,IAAIN,EAAiBlB,SAAS,IACvD4B,SACAV,EAAiBM,IAAY,CAAC;AAEpC,IAAKQ,MAEL3C,EAAOwC,SAAS;AAAA,MACd,GAAGtC;AAAAA,MACHQ,kBAAkB;AAAA,QAAE,CAACiC,EAAUN,GAAG,GAAG;AAAA,MAAA;AAAA,IAAK,CAC3C,GAEGtC,EAAa0C,WACU1C,EAAAA,EAAa0C,SAASE,EAAUN,GAAG;AAAA,EAC9D,GACA,CAEN,GACC,gBAAAxB,EAAA,cAAAU,GAAA,EAAQ,OAAM,mBAAsBC,GAAAA,EACnC,GAAA,gBAAAX,EAAA,cAACY,KACC,MAAK,KACL,SAAQ,SACR,OAAM,QACN,aAAa;AAAA,IAAEC,MAAMkB;AAAAA,IAAGhB,KAAK;AAAA,EAAc,GAC3C,SAAS,MAAM;AACb5B,IAAAA,EAAOwC,SAAS;AAAA,MAAE,GAAGtC;AAAAA,MAAeQ,kBAAkB,CAAA;AAAA,IAAC,CAAG;AAAA,EAAA,EAC1D,CAAA,CAEN,CACF,CACF,CACF;AAEJ;"}

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

@@ -1,18 +1,19 @@
 import e from "react";
 import { Stack as i } from "@telegraph/layout";
 import { Tooltip as a } from "@telegraph/tooltip";
-const l = {
+import { sharedTooltipProps as l } from "./helpers.mjs";
+const o = {
   blue: /* @__PURE__ */ e.createElement("svg", { width: "8", height: "8", viewBox: "0 0 8 8", "aria-hidden": !0 }, /* @__PURE__ */ e.createElement("circle", { cx: "4", cy: "4", r: "4", fill: "var(--tgph-blue-9)" })),
   yellow: /* @__PURE__ */ e.createElement("svg", { width: "8", height: "8", viewBox: "0 0 8 8", "aria-hidden": !0 }, /* @__PURE__ */ e.createElement("polygon", { points: "4,0.5 7.5,7.5 0.5,7.5", fill: "var(--tgph-yellow-9)" })),
   gray: /* @__PURE__ */ e.createElement("svg", { width: "8", height: "8", viewBox: "0 0 8 8", "aria-hidden": !0 }, /* @__PURE__ */ e.createElement("circle", { cx: "4", cy: "4", r: "2.75", fill: "none", stroke: "var(--tgph-gray-9)", strokeWidth: "2.5" })),
   red: /* @__PURE__ */ e.createElement("svg", { width: "8", height: "8", viewBox: "0 0 8 8", "aria-hidden": !0 }, /* @__PURE__ */ e.createElement("line", { x1: "1.5", y1: "1.5", x2: "6.5", y2: "6.5", stroke: "var(--tgph-red-9)", strokeWidth: "2", strokeLinecap: "round" }), /* @__PURE__ */ e.createElement("line", { x1: "6.5", y1: "1.5", x2: "1.5", y2: "6.5", stroke: "var(--tgph-red-9)", strokeWidth: "2", strokeLinecap: "round" }))
-}, h = ({
+}, s = ({
   color: t,
   tooltip: r
-}) => /* @__PURE__ */ e.createElement(a, { label: r }, /* @__PURE__ */ e.createElement(i, { as: "span", align: "center", justify: "center", display: "inline-flex", p: "0_5", style: {
+}) => /* @__PURE__ */ e.createElement(a, { label: r, ...l }, /* @__PURE__ */ e.createElement(i, { as: "span", align: "center", justify: "center", display: "inline-flex", p: "0_5", style: {
   flexShrink: 0
-} }, l[t]));
+} }, o[t]));
 export {
-  h as GuideAnnotatedStatusDot
+  s as GuideAnnotatedStatusDot
 };
 //# sourceMappingURL=GuideAnnotatedStatusDot.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"GuideAnnotatedStatusDot.mjs","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/GuideAnnotatedStatusDot.tsx"],"sourcesContent":["import { Stack } from \"@telegraph/layout\";\nimport { Tooltip } from \"@telegraph/tooltip\";\n\nexport type StatusColor = \"blue\" | \"red\" | \"yellow\" | \"gray\";\n\n// Directly copied from the design prototype.\nconst STATUS_SHAPES: Record<StatusColor, React.ReactNode> = {\n  blue: (\n    <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" aria-hidden>\n      <circle cx=\"4\" cy=\"4\" r=\"4\" fill=\"var(--tgph-blue-9)\" />\n    </svg>\n  ),\n  yellow: (\n    <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" aria-hidden>\n      <polygon points=\"4,0.5 7.5,7.5 0.5,7.5\" fill=\"var(--tgph-yellow-9)\" />\n    </svg>\n  ),\n  gray: (\n    <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" aria-hidden>\n      <circle\n        cx=\"4\"\n        cy=\"4\"\n        r=\"2.75\"\n        fill=\"none\"\n        stroke=\"var(--tgph-gray-9)\"\n        strokeWidth=\"2.5\"\n      />\n    </svg>\n  ),\n  red: (\n    <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" aria-hidden>\n      <line\n        x1=\"1.5\"\n        y1=\"1.5\"\n        x2=\"6.5\"\n        y2=\"6.5\"\n        stroke=\"var(--tgph-red-9)\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n      />\n      <line\n        x1=\"6.5\"\n        y1=\"1.5\"\n        x2=\"1.5\"\n        y2=\"6.5\"\n        stroke=\"var(--tgph-red-9)\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n      />\n    </svg>\n  ),\n};\n\nexport const GuideAnnotatedStatusDot = ({\n  color,\n  tooltip,\n}: {\n  color: StatusColor;\n  tooltip: string;\n}) => {\n  return (\n    <Tooltip label={tooltip}>\n      <Stack\n        as=\"span\"\n        align=\"center\"\n        justify=\"center\"\n        display=\"inline-flex\"\n        p=\"0_5\"\n        style={{ flexShrink: 0 }}\n      >\n        {STATUS_SHAPES[color]}\n      </Stack>\n    </Tooltip>\n  );\n};\n"],"names":["STATUS_SHAPES","blue","React","yellow","gray","red","GuideAnnotatedStatusDot","color","tooltip","Tooltip","Stack","flexShrink"],"mappings":";;;AAMA,MAAMA,IAAsD;AAAA,EAC1DC,sCACG,OAAI,EAAA,OAAM,KAAI,QAAO,KAAI,SAAQ,WAAU,eAAW,MACpDC,gBAAAA,EAAA,cAAA,UAAA,EAAO,IAAG,KAAI,IAAG,KAAI,GAAE,KAAI,MAAK,qBAAoB,CAAA,CACvD;AAAA,EAEFC,QACGD,gBAAAA,EAAA,cAAA,OAAA,EAAI,OAAM,KAAI,QAAO,KAAI,SAAQ,WAAU,eAAW,MACpDA,gBAAAA,EAAA,cAAA,WAAA,EAAQ,QAAO,yBAAwB,MAAK,wBAAsB,CACrE;AAAA,EAEFE,MACGF,gBAAAA,EAAA,cAAA,OAAA,EAAI,OAAM,KAAI,QAAO,KAAI,SAAQ,WAAU,eAAW,GACrD,GAAAA,gBAAAA,EAAA,cAAC,YACC,IAAG,KACH,IAAG,KACH,GAAE,QACF,MAAK,QACL,QAAO,sBACP,aAAY,MAAK,CAAA,CAErB;AAAA,EAEFG,qCACG,OAAI,EAAA,OAAM,KAAI,QAAO,KAAI,SAAQ,WAAU,eAAW,MACpDH,gBAAAA,EAAA,cAAA,QAAA,EACC,IAAG,OACH,IAAG,OACH,IAAG,OACH,IAAG,OACH,QAAO,qBACP,aAAY,KACZ,eAAc,QAAO,CAAA,mCAEtB,QACC,EAAA,IAAG,OACH,IAAG,OACH,IAAG,OACH,IAAG,OACH,QAAO,qBACP,aAAY,KACZ,eAAc,SAAO,CAEzB;AAEJ,GAEaI,IAA0BA,CAAC;AAAA,EACtCC,OAAAA;AAAAA,EACAC,SAAAA;AAIF,sCAEKC,GAAQ,EAAA,OAAOD,KACdN,gBAAAA,EAAA,cAACQ,KACC,IAAG,QACH,OAAM,UACN,SAAQ,UACR,SAAQ,eACR,GAAE,OACF,OAAO;AAAA,EAAEC,YAAY;AAAA,KAEpBX,EAAcO,CAAK,CACtB,CACF;"}
+{"version":3,"file":"GuideAnnotatedStatusDot.mjs","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/GuideAnnotatedStatusDot.tsx"],"sourcesContent":["import { Stack } from \"@telegraph/layout\";\nimport { Tooltip } from \"@telegraph/tooltip\";\n\nimport { sharedTooltipProps } from \"./helpers\";\n\nexport type StatusColor = \"blue\" | \"red\" | \"yellow\" | \"gray\";\n\n// Directly copied from the design prototype.\nconst STATUS_SHAPES: Record<StatusColor, React.ReactNode> = {\n  blue: (\n    <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" aria-hidden>\n      <circle cx=\"4\" cy=\"4\" r=\"4\" fill=\"var(--tgph-blue-9)\" />\n    </svg>\n  ),\n  yellow: (\n    <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" aria-hidden>\n      <polygon points=\"4,0.5 7.5,7.5 0.5,7.5\" fill=\"var(--tgph-yellow-9)\" />\n    </svg>\n  ),\n  gray: (\n    <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" aria-hidden>\n      <circle\n        cx=\"4\"\n        cy=\"4\"\n        r=\"2.75\"\n        fill=\"none\"\n        stroke=\"var(--tgph-gray-9)\"\n        strokeWidth=\"2.5\"\n      />\n    </svg>\n  ),\n  red: (\n    <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" aria-hidden>\n      <line\n        x1=\"1.5\"\n        y1=\"1.5\"\n        x2=\"6.5\"\n        y2=\"6.5\"\n        stroke=\"var(--tgph-red-9)\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n      />\n      <line\n        x1=\"6.5\"\n        y1=\"1.5\"\n        x2=\"1.5\"\n        y2=\"6.5\"\n        stroke=\"var(--tgph-red-9)\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n      />\n    </svg>\n  ),\n};\n\nexport const GuideAnnotatedStatusDot = ({\n  color,\n  tooltip,\n}: {\n  color: StatusColor;\n  tooltip: string;\n}) => {\n  return (\n    <Tooltip label={tooltip} {...sharedTooltipProps}>\n      <Stack\n        as=\"span\"\n        align=\"center\"\n        justify=\"center\"\n        display=\"inline-flex\"\n        p=\"0_5\"\n        style={{ flexShrink: 0 }}\n      >\n        {STATUS_SHAPES[color]}\n      </Stack>\n    </Tooltip>\n  );\n};\n"],"names":["STATUS_SHAPES","blue","React","yellow","gray","red","GuideAnnotatedStatusDot","color","tooltip","Tooltip","sharedTooltipProps","Stack","flexShrink"],"mappings":";;;;AAQA,MAAMA,IAAsD;AAAA,EAC1DC,sCACG,OAAI,EAAA,OAAM,KAAI,QAAO,KAAI,SAAQ,WAAU,eAAW,MACpDC,gBAAAA,EAAA,cAAA,UAAA,EAAO,IAAG,KAAI,IAAG,KAAI,GAAE,KAAI,MAAK,qBAAoB,CAAA,CACvD;AAAA,EAEFC,QACGD,gBAAAA,EAAA,cAAA,OAAA,EAAI,OAAM,KAAI,QAAO,KAAI,SAAQ,WAAU,eAAW,MACpDA,gBAAAA,EAAA,cAAA,WAAA,EAAQ,QAAO,yBAAwB,MAAK,wBAAsB,CACrE;AAAA,EAEFE,MACGF,gBAAAA,EAAA,cAAA,OAAA,EAAI,OAAM,KAAI,QAAO,KAAI,SAAQ,WAAU,eAAW,GACrD,GAAAA,gBAAAA,EAAA,cAAC,YACC,IAAG,KACH,IAAG,KACH,GAAE,QACF,MAAK,QACL,QAAO,sBACP,aAAY,MAAK,CAAA,CAErB;AAAA,EAEFG,qCACG,OAAI,EAAA,OAAM,KAAI,QAAO,KAAI,SAAQ,WAAU,eAAW,MACpDH,gBAAAA,EAAA,cAAA,QAAA,EACC,IAAG,OACH,IAAG,OACH,IAAG,OACH,IAAG,OACH,QAAO,qBACP,aAAY,KACZ,eAAc,QAAO,CAAA,mCAEtB,QACC,EAAA,IAAG,OACH,IAAG,OACH,IAAG,OACH,IAAG,OACH,QAAO,qBACP,aAAY,KACZ,eAAc,SAAO,CAEzB;AAEJ,GAEaI,IAA0BA,CAAC;AAAA,EACtCC,OAAAA;AAAAA,EACAC,SAAAA;AAIF,sCAEKC,GAAQ,EAAA,OAAOD,GAAaE,GAAAA,EAAAA,mCAC1BC,GACC,EAAA,IAAG,QACH,OAAM,UACN,SAAQ,UACR,SAAQ,eACR,GAAE,OACF,OAAO;AAAA,EAAEC,YAAY;AAAA,KAEpBZ,EAAcO,CAAK,CACtB,CACF;"}

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

@@ -1,28 +1,29 @@
 import e from "react";
-import { useGuideContext as c, useStore as d } from "@knocklabs/react-core";
+import { useGuideContext as d, useStore as s } from "@knocklabs/react-core";
 import { Box as o, Stack as t } from "@telegraph/layout";
-import { Toggle as m } from "@telegraph/toggle";
-import { Tooltip as i } from "@telegraph/tooltip";
+import { Toggle as c } from "@telegraph/toggle";
+import { Tooltip as l } from "@telegraph/tooltip";
 import { Text as a } from "@telegraph/typography";
-const f = () => {
+import { sharedTooltipProps as m } from "./helpers.mjs";
+const w = () => {
   const {
     client: r
-  } = c(), {
-    debugSettings: l
-  } = d(r.store, (n) => ({
+  } = d(), {
+    debugSettings: i
+  } = s(r.store, (n) => ({
     debugSettings: n.debug || {}
   }));
-  return /* @__PURE__ */ e.createElement(o, { py: "3", px: "3" }, /* @__PURE__ */ e.createElement(t, { direction: "column", gap: "1", width: "full" }, /* @__PURE__ */ e.createElement(a, { as: "span", size: "1", weight: "medium", display: "block" }, "Toolbar settings"), /* @__PURE__ */ e.createElement(t, { direction: "column", gap: "1" }, /* @__PURE__ */ e.createElement(t, { direction: "row", gap: "2", align: "center", h: "7" }, /* @__PURE__ */ e.createElement(i, { label: "Contain engagement actions to client side only" }, /* @__PURE__ */ e.createElement(o, { width: "36", mt: "1" }, /* @__PURE__ */ e.createElement(a, { as: "span", size: "1", weight: "medium", color: "gray", borderBottom: "px", borderStyle: "dashed" }, "Sandbox engagement"))), /* @__PURE__ */ e.createElement(m.Default, { size: "1", pt: "1_5", value: !!l.skipEngagementTracking, onValueChange: (n) => {
+  return /* @__PURE__ */ e.createElement(o, { py: "3", px: "3" }, /* @__PURE__ */ e.createElement(t, { direction: "column", gap: "1", width: "full" }, /* @__PURE__ */ e.createElement(a, { as: "span", size: "1", weight: "medium", display: "block" }, "Toolbar settings"), /* @__PURE__ */ e.createElement(t, { direction: "column", gap: "1" }, /* @__PURE__ */ e.createElement(t, { direction: "row", gap: "2", align: "center", h: "7" }, /* @__PURE__ */ e.createElement(l, { label: "When enabled, engagement actions are not sent to Knock.", ...m }, /* @__PURE__ */ e.createElement(o, { width: "36", mt: "1" }, /* @__PURE__ */ e.createElement(a, { as: "span", size: "1", weight: "medium", color: "gray", borderBottom: "px", borderStyle: "dashed" }, "Sandbox engagement"))), /* @__PURE__ */ e.createElement(c.Default, { size: "1", pt: "1_5", value: !!i.skipEngagementTracking, onValueChange: (n) => {
     r.setDebug({
-      ...l,
+      ...i,
       skipEngagementTracking: n
     });
-  } })), /* @__PURE__ */ e.createElement(t, { direction: "row", gap: "2", align: "center", h: "7" }, /* @__PURE__ */ e.createElement(i, { label: "Ignore throttle and show next guide immediately" }, /* @__PURE__ */ e.createElement(o, { width: "36", mt: "1" }, /* @__PURE__ */ e.createElement(a, { as: "span", size: "1", weight: "medium", color: "gray", borderBottom: "px", borderStyle: "dashed" }, "Ignore throttle"))), /* @__PURE__ */ e.createElement(m.Default, { size: "1", pt: "1_5", value: !!l.ignoreDisplayInterval, onValueChange: (n) => {
+  } })), /* @__PURE__ */ e.createElement(t, { direction: "row", gap: "2", align: "center", h: "7" }, /* @__PURE__ */ e.createElement(l, { label: "Ignore throttle and show next guide immediately", ...m }, /* @__PURE__ */ e.createElement(o, { width: "36", mt: "1" }, /* @__PURE__ */ e.createElement(a, { as: "span", size: "1", weight: "medium", color: "gray", borderBottom: "px", borderStyle: "dashed" }, "Ignore throttle"))), /* @__PURE__ */ e.createElement(c.Default, { size: "1", pt: "1_5", value: !!i.ignoreDisplayInterval, onValueChange: (n) => {
     r.setDebug({
-      ...l,
+      ...i,
       ignoreDisplayInterval: n
     });
-  } })))), /* @__PURE__ */ e.createElement(t, { direction: "column", gap: "1", width: "full" }, /* @__PURE__ */ e.createElement(i, { label: /* @__PURE__ */ e.createElement(a, { as: "span", size: "1" }, "The tenant and data payload passed to the guide client that are used for targeting", /* @__PURE__ */ e.createElement("br", null), "(via the targetParams prop to KnockGuideProvider)"), delayDuration: 500 }, /* @__PURE__ */ e.createElement(a, { as: "span", size: "1", weight: "medium", borderBottom: "px", borderStyle: "dashed", mt: "4", style: {
+  } })))), /* @__PURE__ */ e.createElement(t, { direction: "column", gap: "1", width: "full" }, /* @__PURE__ */ e.createElement(l, { label: /* @__PURE__ */ e.createElement(a, { as: "span", size: "1" }, "The tenant and data payload passed to KnockGuideProvider. Available for use in runtime conditions."), ...m }, /* @__PURE__ */ e.createElement(a, { as: "span", size: "1", weight: "medium", borderBottom: "px", borderStyle: "dashed", mt: "4", style: {
     whiteSpace: "nowrap",
     width: "fit-content"
   } }, "Target params")), /* @__PURE__ */ e.createElement(t, { direction: "column", gap: "2" }, /* @__PURE__ */ e.createElement(t, { direction: "row", gap: "2", align: "center" }, /* @__PURE__ */ e.createElement(a, { as: "span", size: "1", weight: "medium", color: "gray", width: "36", mt: "1" }, "Tenant"), /* @__PURE__ */ e.createElement(o, { rounded: "2", overflow: "auto", backgroundColor: "surface-2", border: "px", p: "1", style: {
@@ -42,6 +43,6 @@ const f = () => {
   } }, /* @__PURE__ */ e.createElement("code", null, r.targetParams.data ? JSON.stringify(r.targetParams.data, null, 2) : "-")))))));
 };
 export {
-  f as GuideContextDetails
+  w 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 { Toggle } from \"@telegraph/toggle\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text } from \"@telegraph/typography\";\n\nexport const GuideContextDetails = () => {\n  const { client } = useGuideContext();\n  const { debugSettings } = useStore(client.store, (state) => ({\n    debugSettings: state.debug || {},\n  }));\n\n  return (\n    <Box py=\"3\" px=\"3\">\n      <Stack direction=\"column\" gap=\"1\" width=\"full\">\n        <Text as=\"span\" size=\"1\" weight=\"medium\" display=\"block\">\n          Toolbar settings\n        </Text>\n        <Stack direction=\"column\" gap=\"1\">\n          <Stack direction=\"row\" gap=\"2\" align=\"center\" h=\"7\">\n            <Tooltip label=\"Contain engagement actions to client side only\">\n              <Box width=\"36\" mt=\"1\">\n                <Text\n                  as=\"span\"\n                  size=\"1\"\n                  weight=\"medium\"\n                  color=\"gray\"\n                  borderBottom=\"px\"\n                  borderStyle=\"dashed\"\n                >\n                  Sandbox engagement\n                </Text>\n              </Box>\n            </Tooltip>\n            <Toggle.Default\n              size=\"1\"\n              pt=\"1_5\"\n              value={!!debugSettings.skipEngagementTracking}\n              onValueChange={(value: boolean) => {\n                client.setDebug({\n                  ...debugSettings,\n                  skipEngagementTracking: value,\n                });\n              }}\n            />\n          </Stack>\n          <Stack direction=\"row\" gap=\"2\" align=\"center\" h=\"7\">\n            <Tooltip label=\"Ignore throttle and show next guide immediately\">\n              <Box width=\"36\" mt=\"1\">\n                <Text\n                  as=\"span\"\n                  size=\"1\"\n                  weight=\"medium\"\n                  color=\"gray\"\n                  borderBottom=\"px\"\n                  borderStyle=\"dashed\"\n                >\n                  Ignore throttle\n                </Text>\n              </Box>\n            </Tooltip>\n            <Toggle.Default\n              size=\"1\"\n              pt=\"1_5\"\n              value={!!debugSettings.ignoreDisplayInterval}\n              onValueChange={(value: boolean) => {\n                client.setDebug({\n                  ...debugSettings,\n                  ignoreDisplayInterval: value,\n                });\n              }}\n            />\n          </Stack>\n        </Stack>\n      </Stack>\n      <Stack direction=\"column\" gap=\"1\" width=\"full\">\n        <Tooltip\n          label={\n            <Text as=\"span\" size=\"1\">\n              The tenant and data payload passed to the guide client that are\n              used for targeting\n              <br />\n              (via the targetParams prop to KnockGuideProvider)\n            </Text>\n          }\n          delayDuration={500}\n        >\n          <Text\n            as=\"span\"\n            size=\"1\"\n            weight=\"medium\"\n            borderBottom=\"px\"\n            borderStyle=\"dashed\"\n            mt=\"4\"\n            style={{\n              whiteSpace: \"nowrap\",\n              width: \"fit-content\",\n            }}\n          >\n            Target params\n          </Text>\n        </Tooltip>\n        <Stack direction=\"column\" gap=\"2\">\n          <Stack direction=\"row\" gap=\"2\" align=\"center\">\n            <Text\n              as=\"span\"\n              size=\"1\"\n              weight=\"medium\"\n              color=\"gray\"\n              width=\"36\"\n              mt=\"1\"\n            >\n              Tenant\n            </Text>\n            <Box\n              rounded=\"2\"\n              overflow=\"auto\"\n              backgroundColor=\"surface-2\"\n              border=\"px\"\n              p=\"1\"\n              style={{ flex: 1, minWidth: 0 }}\n            >\n              <pre style={{ fontSize: \"11px\", margin: 0 }}>\n                <code>{client.targetParams.tenant || \"-\"}</code>\n              </pre>\n            </Box>\n          </Stack>\n          <Stack direction=\"row\" gap=\"2\" align=\"flex-start\">\n            <Text\n              as=\"span\"\n              size=\"1\"\n              weight=\"medium\"\n              color=\"gray\"\n              width=\"36\"\n              mt=\"1\"\n            >\n              Data\n            </Text>\n            <Box\n              rounded=\"2\"\n              overflow=\"auto\"\n              backgroundColor=\"surface-2\"\n              border=\"px\"\n              p=\"1\"\n              style={{\n                flex: 1,\n                minWidth: 0,\n                minHeight: \"50px\",\n                maxHeight: \"200px\",\n              }}\n            >\n              <pre style={{ fontSize: \"11px\", margin: 0 }}>\n                <code>\n                  {client.targetParams.data\n                    ? JSON.stringify(client.targetParams.data, null, 2)\n                    : \"-\"}\n                </code>\n              </pre>\n            </Box>\n          </Stack>\n        </Stack>\n      </Stack>\n    </Box>\n  );\n};\n"],"names":["GuideContextDetails","client","useGuideContext","debugSettings","useStore","store","state","debug","Box","Stack","Text","React","Tooltip","Toggle","skipEngagementTracking","value","setDebug","ignoreDisplayInterval","whiteSpace","width","flex","minWidth","fontSize","margin","targetParams","tenant","minHeight","maxHeight","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 { Box, Stack } from \"@telegraph/layout\";\nimport { Toggle } from \"@telegraph/toggle\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text } from \"@telegraph/typography\";\n\nimport { sharedTooltipProps } from \"./helpers\";\n\nexport const GuideContextDetails = () => {\n  const { client } = useGuideContext();\n  const { debugSettings } = useStore(client.store, (state) => ({\n    debugSettings: state.debug || {},\n  }));\n\n  return (\n    <Box py=\"3\" px=\"3\">\n      <Stack direction=\"column\" gap=\"1\" width=\"full\">\n        <Text as=\"span\" size=\"1\" weight=\"medium\" display=\"block\">\n          Toolbar settings\n        </Text>\n        <Stack direction=\"column\" gap=\"1\">\n          <Stack direction=\"row\" gap=\"2\" align=\"center\" h=\"7\">\n            <Tooltip\n              label=\"When enabled, engagement actions are not sent to Knock.\"\n              {...sharedTooltipProps}\n            >\n              <Box width=\"36\" mt=\"1\">\n                <Text\n                  as=\"span\"\n                  size=\"1\"\n                  weight=\"medium\"\n                  color=\"gray\"\n                  borderBottom=\"px\"\n                  borderStyle=\"dashed\"\n                >\n                  Sandbox engagement\n                </Text>\n              </Box>\n            </Tooltip>\n            <Toggle.Default\n              size=\"1\"\n              pt=\"1_5\"\n              value={!!debugSettings.skipEngagementTracking}\n              onValueChange={(value: boolean) => {\n                client.setDebug({\n                  ...debugSettings,\n                  skipEngagementTracking: value,\n                });\n              }}\n            />\n          </Stack>\n          <Stack direction=\"row\" gap=\"2\" align=\"center\" h=\"7\">\n            <Tooltip\n              label=\"Ignore throttle and show next guide immediately\"\n              {...sharedTooltipProps}\n            >\n              <Box width=\"36\" mt=\"1\">\n                <Text\n                  as=\"span\"\n                  size=\"1\"\n                  weight=\"medium\"\n                  color=\"gray\"\n                  borderBottom=\"px\"\n                  borderStyle=\"dashed\"\n                >\n                  Ignore throttle\n                </Text>\n              </Box>\n            </Tooltip>\n            <Toggle.Default\n              size=\"1\"\n              pt=\"1_5\"\n              value={!!debugSettings.ignoreDisplayInterval}\n              onValueChange={(value: boolean) => {\n                client.setDebug({\n                  ...debugSettings,\n                  ignoreDisplayInterval: value,\n                });\n              }}\n            />\n          </Stack>\n        </Stack>\n      </Stack>\n      <Stack direction=\"column\" gap=\"1\" width=\"full\">\n        <Tooltip\n          label={\n            <Text as=\"span\" size=\"1\">\n              The tenant and data payload passed to KnockGuideProvider.\n              Available for use in runtime conditions.\n            </Text>\n          }\n          {...sharedTooltipProps}\n        >\n          <Text\n            as=\"span\"\n            size=\"1\"\n            weight=\"medium\"\n            borderBottom=\"px\"\n            borderStyle=\"dashed\"\n            mt=\"4\"\n            style={{\n              whiteSpace: \"nowrap\",\n              width: \"fit-content\",\n            }}\n          >\n            Target params\n          </Text>\n        </Tooltip>\n        <Stack direction=\"column\" gap=\"2\">\n          <Stack direction=\"row\" gap=\"2\" align=\"center\">\n            <Text\n              as=\"span\"\n              size=\"1\"\n              weight=\"medium\"\n              color=\"gray\"\n              width=\"36\"\n              mt=\"1\"\n            >\n              Tenant\n            </Text>\n            <Box\n              rounded=\"2\"\n              overflow=\"auto\"\n              backgroundColor=\"surface-2\"\n              border=\"px\"\n              p=\"1\"\n              style={{ flex: 1, minWidth: 0 }}\n            >\n              <pre style={{ fontSize: \"11px\", margin: 0 }}>\n                <code>{client.targetParams.tenant || \"-\"}</code>\n              </pre>\n            </Box>\n          </Stack>\n          <Stack direction=\"row\" gap=\"2\" align=\"flex-start\">\n            <Text\n              as=\"span\"\n              size=\"1\"\n              weight=\"medium\"\n              color=\"gray\"\n              width=\"36\"\n              mt=\"1\"\n            >\n              Data\n            </Text>\n            <Box\n              rounded=\"2\"\n              overflow=\"auto\"\n              backgroundColor=\"surface-2\"\n              border=\"px\"\n              p=\"1\"\n              style={{\n                flex: 1,\n                minWidth: 0,\n                minHeight: \"50px\",\n                maxHeight: \"200px\",\n              }}\n            >\n              <pre style={{ fontSize: \"11px\", margin: 0 }}>\n                <code>\n                  {client.targetParams.data\n                    ? JSON.stringify(client.targetParams.data, null, 2)\n                    : \"-\"}\n                </code>\n              </pre>\n            </Box>\n          </Stack>\n        </Stack>\n      </Stack>\n    </Box>\n  );\n};\n"],"names":["GuideContextDetails","client","useGuideContext","debugSettings","useStore","store","state","debug","Box","Stack","Text","React","Tooltip","sharedTooltipProps","Toggle","skipEngagementTracking","value","setDebug","ignoreDisplayInterval","whiteSpace","width","flex","minWidth","fontSize","margin","targetParams","tenant","minHeight","maxHeight","data","JSON","stringify"],"mappings":"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"}

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

@@ -1,22 +1,22 @@
 import { useGuideContext as x, useStore as G } from "@knocklabs/react-core";
-import { Button as C } from "@telegraph/button";
-import { Icon as T } from "@telegraph/icon";
-import { Box as h, Stack as n } from "@telegraph/layout";
-import { Tag as A } from "@telegraph/tag";
-import { Tooltip as y } from "@telegraph/tooltip";
-import { Text as v } from "@telegraph/typography";
-import { Gauge as R } from "lucide-react";
+import { Button as T } from "@telegraph/button";
+import { Icon as A } from "@telegraph/icon";
+import { Box as f, Stack as i } from "@telegraph/layout";
+import { Tag as C } from "@telegraph/tag";
+import { Tooltip as h } from "@telegraph/tooltip";
+import { Text as y } from "@telegraph/typography";
+import { Gauge as D } from "lucide-react";
 import * as t from "react";
-import { GuideAnnotatedStatusDot as i } from "./GuideAnnotatedStatusDot.mjs";
-import { GuideRowDetails as D, getSelectableStatusSummary as w } from "./GuideRowDetails.mjs";
-import { FOCUS_ERRORS as E } from "./helpers.mjs";
-import { isUncommittedGuide as l } from "./useInspectGuideClientStore.mjs";
-const z = "data-kgt-guide-row-key", S = ({
+import { GuideAnnotatedStatusDot as c } from "./GuideAnnotatedStatusDot.mjs";
+import { GuideRowDetails as z, getSelectableStatusSummary as w } from "./GuideRowDetails.mjs";
+import { sharedTooltipProps as E } from "./helpers.mjs";
+import { isUncommittedGuide as n } from "./useInspectGuideClientStore.mjs";
+const N = "data-kgt-guide-row-key", S = ({
   label: e,
   color: o = "gray",
   children: a
-}) => /* @__PURE__ */ t.createElement(n, { direction: "row", align: "center", gap: "0_5", px: "1", height: "5", bg: "surface-2", rounded: "full", border: "px", borderColor: "gray-4" }, /* @__PURE__ */ t.createElement(v, { as: "span", size: "0", color: o, weight: "medium" }, e), a), N = (e) => {
-  if (l(e))
+}) => /* @__PURE__ */ t.createElement(i, { direction: "row", align: "center", gap: "0_5", px: "1", height: "5", bg: "surface-2", rounded: "full", border: "px", borderColor: "gray-4" }, /* @__PURE__ */ t.createElement(y, { as: "span", size: "0", color: o, weight: "medium" }, e), a), $ = (e) => {
+  if (n(e))
     return {
       color: "red",
       label: "Inactive",
@@ -55,8 +55,8 @@ const z = "data-kgt-guide-row-key", S = ({
     label: "Not activated",
     description: "This guide cannot be activated in the current location"
   };
-}, O = (e) => {
-  if (l(e))
+}, I = (e) => {
+  if (n(e))
     return {
       active: {
         color: "gray"
@@ -85,21 +85,21 @@ const z = "data-kgt-guide-row-key", S = ({
   }, u = {
     color: o.targetable.status ? "blue" : "red",
     tooltip: `Targeting: ${o.targetable.status ? "Yes" : "No"}`
-  }, b = {
+  }, d = {
     color: o.activatable.status ? "blue" : "red",
     tooltip: `Activated: ${o.activatable.status ? "Yes" : "No"}`
-  }, s = w(o.selectable.status), d = {
-    color: s.color,
-    tooltip: s.label
+  }, l = w(o.selectable.status), b = {
+    color: l.color,
+    tooltip: l.label
   };
   return {
     active: a,
     archived: m,
     targetable: u,
-    activatable: b,
-    selectable: d
+    activatable: d,
+    selectable: b
   };
-}, P = ({
+}, M = ({
   guide: e,
   orderIndex: o,
   isExpanded: a,
@@ -108,38 +108,38 @@ const z = "data-kgt-guide-row-key", S = ({
   const {
     client: u
   } = x(), {
-    debugSettings: b
+    debugSettings: d
   } = G(u.store, (g) => ({
     debugSettings: g.debug || {}
-  })), [s, d] = t.useState(!1), f = b.focusedGuideKeys || {}, _ = Object.keys(f).length > 0, c = !!f[e.key], r = O(e), p = N(e), k = {
-    [z]: e.key
+  })), [l, b] = t.useState(!1), v = d.focusedGuideKeys || {}, k = Object.keys(v).length > 0, s = !!v[e.key], r = I(e), p = $(e), _ = {
+    [N]: e.key
   };
-  return /* @__PURE__ */ t.createElement(h, { rounded: "3", overflow: "hidden", border: "px", borderStyle: "solid", borderColor: a ? "gray-6" : "transparent", onMouseEnter: () => d(!0), onMouseLeave: () => d(!1), style: {
+  return /* @__PURE__ */ t.createElement(f, { rounded: "3", overflow: "hidden", border: "px", borderStyle: "solid", borderColor: a ? "gray-6" : "transparent", onMouseEnter: () => b(!0), onMouseLeave: () => b(!1), style: {
     cursor: "pointer"
-  }, ...k }, /* @__PURE__ */ t.createElement(n, { h: "7", px: "1", gap: "1", align: "center", justify: "space-between", rounded: "3", overflow: "hidden", border: "px", borderStyle: "solid", borderColor: a ? "transparent" : c ? "gray-6" : s ? "gray-4" : "transparent", backgroundColor: a ? "surface-2" : c ? "gray-2" : s ? "surface-2" : "transparent", onClick: () => m(e.key) }, /* @__PURE__ */ t.createElement(n, { align: "center", gap: "1_5", style: {
+  }, ..._ }, /* @__PURE__ */ t.createElement(i, { h: "7", px: "1", gap: "1", align: "center", justify: "space-between", rounded: "3", overflow: "hidden", border: "px", borderStyle: "solid", borderColor: a ? "transparent" : s ? "gray-6" : l ? "gray-4" : "transparent", backgroundColor: a ? "surface-2" : s ? "gray-2" : l ? "surface-2" : "transparent", onClick: () => m(e.key) }, /* @__PURE__ */ t.createElement(i, { align: "center", gap: "1_5", style: {
     minWidth: 0,
     flex: 1
-  } }, /* @__PURE__ */ t.createElement(n, { w: "7", justify: "space-between", align: "center", gap: "0_5" }, /* @__PURE__ */ t.createElement(h, { w: "3" }, !e.bypass_global_group_limit && /* @__PURE__ */ t.createElement(T, { icon: R, size: "0", color: "gray", alt: "Subject to throttling" })), /* @__PURE__ */ t.createElement(v, { as: "span", size: "1", weight: "medium", color: e.bypass_global_group_limit ? "blue" : "default", style: {
+  } }, /* @__PURE__ */ t.createElement(i, { w: "7", justify: "space-between", align: "center", gap: "0_5" }, /* @__PURE__ */ t.createElement(f, { w: "3" }, !e.bypass_global_group_limit && /* @__PURE__ */ t.createElement(A, { icon: D, size: "0", color: "gray", alt: "Subject to throttling" })), /* @__PURE__ */ t.createElement(y, { as: "span", size: "1", weight: "medium", color: e.bypass_global_group_limit ? "blue" : "default", style: {
     flexShrink: 0
-  } }, o + 1)), /* @__PURE__ */ t.createElement(y, { label: `${e.key}${e.bypass_global_group_limit ? " (unthrottled)" : ""}` }, /* @__PURE__ */ t.createElement(v, { as: "code", size: "1", weight: "medium", color: "default", style: {
+  } }, o + 1)), /* @__PURE__ */ t.createElement(h, { label: `${e.key}${e.bypass_global_group_limit ? " (unthrottled)" : ""}`, ...E }, /* @__PURE__ */ t.createElement(y, { as: "code", size: "1", weight: "medium", color: "default", style: {
     display: "block",
     overflow: "hidden",
     textOverflow: "ellipsis",
     whiteSpace: "nowrap",
     maxWidth: "200px"
-  } }, e.key))), /* @__PURE__ */ t.createElement(n, { align: "center", gap: "1_5", style: {
+  } }, e.key))), /* @__PURE__ */ t.createElement(i, { align: "center", gap: "1_5", style: {
     flexShrink: 0
-  } }, !_ && /* @__PURE__ */ t.createElement(y, { label: p.description }, /* @__PURE__ */ t.createElement(A, { size: "0", variant: "soft", color: p.color }, p.label)), /* @__PURE__ */ t.createElement(S, { label: "Elig:", color: l(e) ? "disabled" : e.annotation.isEligible ? "blue" : "gray" }, /* @__PURE__ */ t.createElement(i, { color: r.active.color, tooltip: r.active.tooltip }), /* @__PURE__ */ t.createElement(i, { color: r.archived.color, tooltip: r.archived.tooltip }), /* @__PURE__ */ t.createElement(i, { color: r.targetable.color, tooltip: r.targetable.tooltip })), /* @__PURE__ */ t.createElement(S, { label: "Vis:", color: l(e) ? "disabled" : e.annotation.isQualified && e.annotation.selectable.status === "returned" ? "blue" : "gray" }, /* @__PURE__ */ t.createElement(i, { color: r.activatable.color, tooltip: r.activatable.tooltip }), /* @__PURE__ */ t.createElement(i, { color: r.selectable.color, tooltip: r.selectable.tooltip })), /* @__PURE__ */ t.createElement(y, { label: l(e) ? E.focusUncommittedGuide : e.annotation.selectable.status === void 0 ? E.focusUnselectableGuide : "", enabled: l(e) || e.annotation.selectable.status === void 0 }, /* @__PURE__ */ t.createElement(C, { size: "0", variant: c ? "solid" : "outline", color: c ? "blue" : "gray", disabled: l(e) || e.annotation.selectable.status === void 0, onClick: (g) => {
+  } }, !k && /* @__PURE__ */ t.createElement(h, { label: p.description, ...E }, /* @__PURE__ */ t.createElement(C, { size: "0", variant: "soft", color: p.color }, p.label)), /* @__PURE__ */ t.createElement(S, { label: "Elig:", color: n(e) ? "disabled" : e.annotation.isEligible ? "blue" : "gray" }, /* @__PURE__ */ t.createElement(c, { color: r.active.color, tooltip: r.active.tooltip }), /* @__PURE__ */ t.createElement(c, { color: r.archived.color, tooltip: r.archived.tooltip }), /* @__PURE__ */ t.createElement(c, { color: r.targetable.color, tooltip: r.targetable.tooltip })), /* @__PURE__ */ t.createElement(S, { label: "Vis:", color: n(e) ? "disabled" : e.annotation.isQualified && e.annotation.selectable.status === "returned" ? "blue" : "gray" }, /* @__PURE__ */ t.createElement(c, { color: r.activatable.color, tooltip: r.activatable.tooltip }), /* @__PURE__ */ t.createElement(c, { color: r.selectable.color, tooltip: r.selectable.tooltip })), /* @__PURE__ */ t.createElement(T, { size: "0", variant: s ? "solid" : "outline", color: s ? "blue" : "gray", disabled: n(e) || e.annotation.selectable.status === void 0, onClick: (g) => {
     g.stopPropagation(), u.setDebug({
-      ...b,
-      focusedGuideKeys: c ? {} : {
+      ...d,
+      focusedGuideKeys: s ? {} : {
         [e.key]: !0
       }
     });
-  } }, "Focus")))), a && /* @__PURE__ */ t.createElement(D, { guide: e }));
+  } }, "Focus"))), a && /* @__PURE__ */ t.createElement(z, { guide: e }));
 };
 export {
-  z as GUIDE_ROW_DATA_SELECTOR,
-  P as GuideRow
+  N as GUIDE_ROW_DATA_SELECTOR,
+  M 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 { useGuideContext, useStore } from \"@knocklabs/react-core\";\nimport { Button } from \"@telegraph/button\";\nimport { Icon } from \"@telegraph/icon\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport { Tag } from \"@telegraph/tag\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text } from \"@telegraph/typography\";\nimport { Gauge } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport {\n  StatusColor,\n  GuideAnnotatedStatusDot as StatusDot,\n} from \"./GuideAnnotatedStatusDot\";\nimport {\n  GuideRowDetails,\n  StatusSummary,\n  getSelectableStatusSummary,\n} from \"./GuideRowDetails\";\nimport { FOCUS_ERRORS } from \"./helpers\";\nimport {\n  AnnotatedGuide,\n  AnnotatedStatuses,\n  UncommittedGuide,\n  isUncommittedGuide,\n} from \"./useInspectGuideClientStore\";\n\nexport const GUIDE_ROW_DATA_SELECTOR = \"data-kgt-guide-row-key\";\n\nconst Pill = ({\n  label,\n  color = \"gray\",\n  children,\n}: {\n  label: string;\n  color?: StatusColor | \"disabled\";\n  children: React.ReactNode;\n}) => {\n  return (\n    <Stack\n      direction=\"row\"\n      align=\"center\"\n      gap=\"0_5\"\n      px=\"1\"\n      height=\"5\"\n      bg=\"surface-2\"\n      rounded=\"full\"\n      border=\"px\"\n      borderColor=\"gray-4\"\n    >\n      <Text as=\"span\" size=\"0\" color={color} weight=\"medium\">\n        {label}\n      </Text>\n      {children}\n    </Stack>\n  );\n};\n\nconst getStatusSummary = (\n  guide: AnnotatedGuide | UncommittedGuide,\n): StatusSummary => {\n  if (isUncommittedGuide(guide)) {\n    return {\n      color: \"red\",\n      label: \"Inactive\",\n      description: \"This guide has never been committed and published yet\",\n    };\n  }\n\n  const { annotation } = guide;\n\n  if (!annotation.active.status) {\n    return {\n      color: \"red\",\n      label: \"Inactive\",\n      description: \"This guide is inactive\",\n    };\n  }\n  if (annotation.archived.status) {\n    return {\n      color: \"red\",\n      label: \"Archived\",\n      description: \"User has already dismissed this guide\",\n    };\n  }\n  if (!annotation.targetable.status) {\n    return {\n      color: \"red\",\n      label: \"Not targeted\",\n      description: annotation.targetable.message,\n    };\n  }\n\n  const selectableStatusSummary = getSelectableStatusSummary(\n    annotation.selectable.status,\n  );\n\n  // Prioritize an undefined selectable status ahead of activatable status.\n  if (annotation.selectable.status === undefined) {\n    return selectableStatusSummary;\n  }\n\n  if (!annotation.activatable.status) {\n    return {\n      color: \"red\",\n      label: \"Not activated\",\n      description: \"This guide cannot be activated in the current location\",\n    };\n  }\n\n  return {\n    ...selectableStatusSummary,\n\n    // Shorten the label we display here for space.\n    ...(annotation.selectable.status === \"returned\"\n      ? { label: \"Display\" }\n      : undefined),\n  };\n};\n\ntype StatusDot = {\n  color: StatusColor;\n  tooltip?: string;\n};\n\nconst getStatusDots = (\n  guide: AnnotatedGuide | UncommittedGuide,\n): Record<keyof AnnotatedStatuses, StatusDot> => {\n  if (isUncommittedGuide(guide)) {\n    return {\n      active: { color: \"gray\" },\n      archived: { color: \"gray\" },\n      targetable: { color: \"gray\" },\n      activatable: { color: \"gray\" },\n      selectable: { color: \"gray\" },\n    };\n  }\n\n  const { annotation } = guide;\n\n  const active: StatusDot = {\n    color: annotation.active.status ? \"blue\" : \"red\",\n    tooltip: `Active: ${annotation.active.status ? \"Yes\" : \"No\"}`,\n  };\n\n  const archived: StatusDot = {\n    color: annotation.archived.status ? \"red\" : \"blue\",\n    tooltip: `Archived: ${annotation.archived.status ? \"Yes\" : \"No\"}`,\n  };\n\n  const targetable: StatusDot = {\n    color: annotation.targetable.status ? \"blue\" : \"red\",\n    tooltip: `Targeting: ${annotation.targetable.status ? \"Yes\" : \"No\"}`,\n  };\n\n  const activatable: StatusDot = {\n    color: annotation.activatable.status ? \"blue\" : \"red\",\n    tooltip: `Activated: ${annotation.activatable.status ? \"Yes\" : \"No\"}`,\n  };\n\n  const selectableStatusSummary = getSelectableStatusSummary(\n    annotation.selectable.status,\n  );\n\n  const selectable = {\n    color: selectableStatusSummary.color,\n    tooltip: selectableStatusSummary.label,\n  };\n\n  return { active, archived, targetable, activatable, selectable };\n};\n\ntype Props = {\n  guide: UncommittedGuide | AnnotatedGuide;\n  orderIndex: number;\n  isExpanded: boolean;\n  onClick: (guideKey: string) => void;\n};\n\nexport const GuideRow = ({ guide, orderIndex, isExpanded, onClick }: Props) => {\n  const { client } = useGuideContext();\n  const { debugSettings } = useStore(client.store, (state) => ({\n    debugSettings: state.debug || {},\n  }));\n  const [isHovered, setIsHovered] = React.useState(false);\n\n  const focusedGuideKeys = debugSettings.focusedGuideKeys || {};\n  const hasFocus = Object.keys(focusedGuideKeys).length > 0;\n  const isFocused = !!focusedGuideKeys[guide.key];\n\n  const dots = getStatusDots(guide);\n  const summary = getStatusSummary(guide);\n  const dataAttrs = { [GUIDE_ROW_DATA_SELECTOR]: guide.key };\n\n  return (\n    <Box\n      rounded=\"3\"\n      overflow=\"hidden\"\n      border=\"px\"\n      borderStyle=\"solid\"\n      borderColor={isExpanded ? \"gray-6\" : \"transparent\"}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      style={{ cursor: \"pointer\" }}\n      {...dataAttrs}\n    >\n      <Stack\n        h=\"7\"\n        px=\"1\"\n        gap=\"1\"\n        align=\"center\"\n        justify=\"space-between\"\n        rounded=\"3\"\n        overflow=\"hidden\"\n        border=\"px\"\n        borderStyle=\"solid\"\n        borderColor={\n          isExpanded\n            ? \"transparent\"\n            : isFocused\n              ? \"gray-6\"\n              : isHovered\n                ? \"gray-4\"\n                : \"transparent\"\n        }\n        backgroundColor={\n          isExpanded\n            ? \"surface-2\"\n            : isFocused\n              ? \"gray-2\"\n              : isHovered\n                ? \"surface-2\"\n                : \"transparent\"\n        }\n        onClick={() => onClick(guide.key)}\n      >\n        {/* Left section: order + key */}\n        <Stack align=\"center\" gap=\"1_5\" style={{ minWidth: 0, flex: 1 }}>\n          <Stack w=\"7\" justify=\"space-between\" align=\"center\" gap=\"0_5\">\n            <Box w=\"3\">\n              {!guide.bypass_global_group_limit && (\n                <Icon\n                  icon={Gauge}\n                  size=\"0\"\n                  color=\"gray\"\n                  alt=\"Subject to throttling\"\n                />\n              )}\n            </Box>\n            <Text\n              as=\"span\"\n              size=\"1\"\n              weight=\"medium\"\n              color={guide.bypass_global_group_limit ? \"blue\" : \"default\"}\n              style={{ flexShrink: 0 }}\n            >\n              {orderIndex + 1}\n            </Text>\n          </Stack>\n          <Tooltip\n            label={`${guide.key}${guide.bypass_global_group_limit ? \" (unthrottled)\" : \"\"}`}\n          >\n            <Text\n              as=\"code\"\n              size=\"1\"\n              weight=\"medium\"\n              color=\"default\"\n              style={{\n                display: \"block\",\n                overflow: \"hidden\",\n                textOverflow: \"ellipsis\",\n                whiteSpace: \"nowrap\",\n                maxWidth: \"200px\",\n              }}\n            >\n              {guide.key}\n            </Text>\n          </Tooltip>\n        </Stack>\n\n        {/* Right section: verdict + pills + focus */}\n        <Stack align=\"center\" gap=\"1_5\" style={{ flexShrink: 0 }}>\n          {!hasFocus && (\n            <Tooltip label={summary.description}>\n              <Tag size=\"0\" variant=\"soft\" color={summary.color}>\n                {summary.label}\n              </Tag>\n            </Tooltip>\n          )}\n\n          <Pill\n            label=\"Elig:\"\n            color={\n              isUncommittedGuide(guide)\n                ? \"disabled\"\n                : guide.annotation.isEligible\n                  ? \"blue\"\n                  : \"gray\"\n            }\n          >\n            <StatusDot\n              color={dots.active.color}\n              tooltip={dots.active.tooltip!}\n            />\n            <StatusDot\n              color={dots.archived.color}\n              tooltip={dots.archived.tooltip!}\n            />\n            <StatusDot\n              color={dots.targetable.color}\n              tooltip={dots.targetable.tooltip!}\n            />\n          </Pill>\n          <Pill\n            label=\"Vis:\"\n            color={\n              isUncommittedGuide(guide)\n                ? \"disabled\"\n                : guide.annotation.isQualified &&\n                    guide.annotation.selectable.status === \"returned\"\n                  ? \"blue\"\n                  : \"gray\"\n            }\n          >\n            <StatusDot\n              color={dots.activatable.color}\n              tooltip={dots.activatable.tooltip!}\n            />\n            <StatusDot\n              color={dots.selectable.color}\n              tooltip={dots.selectable.tooltip!}\n            />\n          </Pill>\n\n          <Tooltip\n            label={\n              isUncommittedGuide(guide)\n                ? FOCUS_ERRORS.focusUncommittedGuide\n                : guide.annotation.selectable.status === undefined\n                  ? FOCUS_ERRORS.focusUnselectableGuide\n                  : \"\"\n            }\n            enabled={\n              isUncommittedGuide(guide) ||\n              guide.annotation.selectable.status === undefined\n            }\n          >\n            <Button\n              size=\"0\"\n              variant={isFocused ? \"solid\" : \"outline\"}\n              color={isFocused ? \"blue\" : \"gray\"}\n              disabled={\n                isUncommittedGuide(guide) ||\n                guide.annotation.selectable.status === undefined\n              }\n              onClick={(e: React.MouseEvent) => {\n                e.stopPropagation();\n                client.setDebug({\n                  ...debugSettings,\n                  focusedGuideKeys: isFocused ? {} : { [guide.key]: true },\n                });\n              }}\n            >\n              Focus\n            </Button>\n          </Tooltip>\n        </Stack>\n      </Stack>\n\n      {isExpanded && <GuideRowDetails guide={guide} />}\n    </Box>\n  );\n};\n"],"names":["GUIDE_ROW_DATA_SELECTOR","Pill","label","color","children","React","Stack","Text","getStatusSummary","guide","isUncommittedGuide","description","annotation","active","status","archived","targetable","message","selectableStatusSummary","getSelectableStatusSummary","selectable","undefined","activatable","getStatusDots","tooltip","GuideRow","orderIndex","isExpanded","onClick","client","useGuideContext","debugSettings","useStore","store","state","debug","isHovered","setIsHovered","useState","focusedGuideKeys","hasFocus","Object","keys","length","isFocused","key","dots","summary","dataAttrs","Box","cursor","minWidth","flex","bypass_global_group_limit","Icon","Gauge","flexShrink","Tooltip","display","overflow","textOverflow","whiteSpace","maxWidth","Tag","isEligible","StatusDot","isQualified","FOCUS_ERRORS","focusUncommittedGuide","focusUnselectableGuide","Button","e","stopPropagation","setDebug","GuideRowDetails"],"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 { Icon } from \"@telegraph/icon\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport { Tag } from \"@telegraph/tag\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text } from \"@telegraph/typography\";\nimport { Gauge } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport {\n  StatusColor,\n  GuideAnnotatedStatusDot as StatusDot,\n} from \"./GuideAnnotatedStatusDot\";\nimport {\n  GuideRowDetails,\n  StatusSummary,\n  getSelectableStatusSummary,\n} from \"./GuideRowDetails\";\nimport { sharedTooltipProps } from \"./helpers\";\nimport {\n  AnnotatedGuide,\n  AnnotatedStatuses,\n  UncommittedGuide,\n  isUncommittedGuide,\n} from \"./useInspectGuideClientStore\";\n\nexport const GUIDE_ROW_DATA_SELECTOR = \"data-kgt-guide-row-key\";\n\nconst Pill = ({\n  label,\n  color = \"gray\",\n  children,\n}: {\n  label: string;\n  color?: StatusColor | \"disabled\";\n  children: React.ReactNode;\n}) => {\n  return (\n    <Stack\n      direction=\"row\"\n      align=\"center\"\n      gap=\"0_5\"\n      px=\"1\"\n      height=\"5\"\n      bg=\"surface-2\"\n      rounded=\"full\"\n      border=\"px\"\n      borderColor=\"gray-4\"\n    >\n      <Text as=\"span\" size=\"0\" color={color} weight=\"medium\">\n        {label}\n      </Text>\n      {children}\n    </Stack>\n  );\n};\n\nconst getStatusSummary = (\n  guide: AnnotatedGuide | UncommittedGuide,\n): StatusSummary => {\n  if (isUncommittedGuide(guide)) {\n    return {\n      color: \"red\",\n      label: \"Inactive\",\n      description: \"This guide has never been committed and published yet\",\n    };\n  }\n\n  const { annotation } = guide;\n\n  if (!annotation.active.status) {\n    return {\n      color: \"red\",\n      label: \"Inactive\",\n      description: \"This guide is inactive\",\n    };\n  }\n  if (annotation.archived.status) {\n    return {\n      color: \"red\",\n      label: \"Archived\",\n      description: \"User has already dismissed this guide\",\n    };\n  }\n  if (!annotation.targetable.status) {\n    return {\n      color: \"red\",\n      label: \"Not targeted\",\n      description: annotation.targetable.message,\n    };\n  }\n\n  const selectableStatusSummary = getSelectableStatusSummary(\n    annotation.selectable.status,\n  );\n\n  // Prioritize an undefined selectable status ahead of activatable status.\n  if (annotation.selectable.status === undefined) {\n    return selectableStatusSummary;\n  }\n\n  if (!annotation.activatable.status) {\n    return {\n      color: \"red\",\n      label: \"Not activated\",\n      description: \"This guide cannot be activated in the current location\",\n    };\n  }\n\n  return {\n    ...selectableStatusSummary,\n\n    // Shorten the label we display here for space.\n    ...(annotation.selectable.status === \"returned\"\n      ? { label: \"Display\" }\n      : undefined),\n  };\n};\n\ntype StatusDot = {\n  color: StatusColor;\n  tooltip?: string;\n};\n\nconst getStatusDots = (\n  guide: AnnotatedGuide | UncommittedGuide,\n): Record<keyof AnnotatedStatuses, StatusDot> => {\n  if (isUncommittedGuide(guide)) {\n    return {\n      active: { color: \"gray\" },\n      archived: { color: \"gray\" },\n      targetable: { color: \"gray\" },\n      activatable: { color: \"gray\" },\n      selectable: { color: \"gray\" },\n    };\n  }\n\n  const { annotation } = guide;\n\n  const active: StatusDot = {\n    color: annotation.active.status ? \"blue\" : \"red\",\n    tooltip: `Active: ${annotation.active.status ? \"Yes\" : \"No\"}`,\n  };\n\n  const archived: StatusDot = {\n    color: annotation.archived.status ? \"red\" : \"blue\",\n    tooltip: `Archived: ${annotation.archived.status ? \"Yes\" : \"No\"}`,\n  };\n\n  const targetable: StatusDot = {\n    color: annotation.targetable.status ? \"blue\" : \"red\",\n    tooltip: `Targeting: ${annotation.targetable.status ? \"Yes\" : \"No\"}`,\n  };\n\n  const activatable: StatusDot = {\n    color: annotation.activatable.status ? \"blue\" : \"red\",\n    tooltip: `Activated: ${annotation.activatable.status ? \"Yes\" : \"No\"}`,\n  };\n\n  const selectableStatusSummary = getSelectableStatusSummary(\n    annotation.selectable.status,\n  );\n\n  const selectable = {\n    color: selectableStatusSummary.color,\n    tooltip: selectableStatusSummary.label,\n  };\n\n  return { active, archived, targetable, activatable, selectable };\n};\n\ntype Props = {\n  guide: UncommittedGuide | AnnotatedGuide;\n  orderIndex: number;\n  isExpanded: boolean;\n  onClick: (guideKey: string) => void;\n};\n\nexport const GuideRow = ({ guide, orderIndex, isExpanded, onClick }: Props) => {\n  const { client } = useGuideContext();\n  const { debugSettings } = useStore(client.store, (state) => ({\n    debugSettings: state.debug || {},\n  }));\n  const [isHovered, setIsHovered] = React.useState(false);\n\n  const focusedGuideKeys = debugSettings.focusedGuideKeys || {};\n  const hasFocus = Object.keys(focusedGuideKeys).length > 0;\n  const isFocused = !!focusedGuideKeys[guide.key];\n\n  const dots = getStatusDots(guide);\n  const summary = getStatusSummary(guide);\n  const dataAttrs = { [GUIDE_ROW_DATA_SELECTOR]: guide.key };\n\n  return (\n    <Box\n      rounded=\"3\"\n      overflow=\"hidden\"\n      border=\"px\"\n      borderStyle=\"solid\"\n      borderColor={isExpanded ? \"gray-6\" : \"transparent\"}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      style={{ cursor: \"pointer\" }}\n      {...dataAttrs}\n    >\n      <Stack\n        h=\"7\"\n        px=\"1\"\n        gap=\"1\"\n        align=\"center\"\n        justify=\"space-between\"\n        rounded=\"3\"\n        overflow=\"hidden\"\n        border=\"px\"\n        borderStyle=\"solid\"\n        borderColor={\n          isExpanded\n            ? \"transparent\"\n            : isFocused\n              ? \"gray-6\"\n              : isHovered\n                ? \"gray-4\"\n                : \"transparent\"\n        }\n        backgroundColor={\n          isExpanded\n            ? \"surface-2\"\n            : isFocused\n              ? \"gray-2\"\n              : isHovered\n                ? \"surface-2\"\n                : \"transparent\"\n        }\n        onClick={() => onClick(guide.key)}\n      >\n        {/* Left section: order + key */}\n        <Stack align=\"center\" gap=\"1_5\" style={{ minWidth: 0, flex: 1 }}>\n          <Stack w=\"7\" justify=\"space-between\" align=\"center\" gap=\"0_5\">\n            <Box w=\"3\">\n              {!guide.bypass_global_group_limit && (\n                <Icon\n                  icon={Gauge}\n                  size=\"0\"\n                  color=\"gray\"\n                  alt=\"Subject to throttling\"\n                />\n              )}\n            </Box>\n            <Text\n              as=\"span\"\n              size=\"1\"\n              weight=\"medium\"\n              color={guide.bypass_global_group_limit ? \"blue\" : \"default\"}\n              style={{ flexShrink: 0 }}\n            >\n              {orderIndex + 1}\n            </Text>\n          </Stack>\n          <Tooltip\n            label={`${guide.key}${guide.bypass_global_group_limit ? \" (unthrottled)\" : \"\"}`}\n            {...sharedTooltipProps}\n          >\n            <Text\n              as=\"code\"\n              size=\"1\"\n              weight=\"medium\"\n              color=\"default\"\n              style={{\n                display: \"block\",\n                overflow: \"hidden\",\n                textOverflow: \"ellipsis\",\n                whiteSpace: \"nowrap\",\n                maxWidth: \"200px\",\n              }}\n            >\n              {guide.key}\n            </Text>\n          </Tooltip>\n        </Stack>\n\n        {/* Right section: verdict + pills + focus */}\n        <Stack align=\"center\" gap=\"1_5\" style={{ flexShrink: 0 }}>\n          {!hasFocus && (\n            <Tooltip label={summary.description} {...sharedTooltipProps}>\n              <Tag size=\"0\" variant=\"soft\" color={summary.color}>\n                {summary.label}\n              </Tag>\n            </Tooltip>\n          )}\n\n          <Pill\n            label=\"Elig:\"\n            color={\n              isUncommittedGuide(guide)\n                ? \"disabled\"\n                : guide.annotation.isEligible\n                  ? \"blue\"\n                  : \"gray\"\n            }\n          >\n            <StatusDot\n              color={dots.active.color}\n              tooltip={dots.active.tooltip!}\n            />\n            <StatusDot\n              color={dots.archived.color}\n              tooltip={dots.archived.tooltip!}\n            />\n            <StatusDot\n              color={dots.targetable.color}\n              tooltip={dots.targetable.tooltip!}\n            />\n          </Pill>\n          <Pill\n            label=\"Vis:\"\n            color={\n              isUncommittedGuide(guide)\n                ? \"disabled\"\n                : guide.annotation.isQualified &&\n                    guide.annotation.selectable.status === \"returned\"\n                  ? \"blue\"\n                  : \"gray\"\n            }\n          >\n            <StatusDot\n              color={dots.activatable.color}\n              tooltip={dots.activatable.tooltip!}\n            />\n            <StatusDot\n              color={dots.selectable.color}\n              tooltip={dots.selectable.tooltip!}\n            />\n          </Pill>\n\n          <Button\n            size=\"0\"\n            variant={isFocused ? \"solid\" : \"outline\"}\n            color={isFocused ? \"blue\" : \"gray\"}\n            disabled={\n              isUncommittedGuide(guide) ||\n              guide.annotation.selectable.status === undefined\n            }\n            onClick={(e: React.MouseEvent) => {\n              e.stopPropagation();\n              client.setDebug({\n                ...debugSettings,\n                focusedGuideKeys: isFocused ? {} : { [guide.key]: true },\n              });\n            }}\n          >\n            Focus\n          </Button>\n        </Stack>\n      </Stack>\n\n      {isExpanded && <GuideRowDetails guide={guide} />}\n    </Box>\n  );\n};\n"],"names":["GUIDE_ROW_DATA_SELECTOR","Pill","label","color","children","React","Stack","Text","getStatusSummary","guide","isUncommittedGuide","description","annotation","active","status","archived","targetable","message","selectableStatusSummary","getSelectableStatusSummary","selectable","undefined","activatable","getStatusDots","tooltip","GuideRow","orderIndex","isExpanded","onClick","client","useGuideContext","debugSettings","useStore","store","state","debug","isHovered","setIsHovered","useState","focusedGuideKeys","hasFocus","Object","keys","length","isFocused","key","dots","summary","dataAttrs","Box","cursor","minWidth","flex","bypass_global_group_limit","Icon","Gauge","flexShrink","Tooltip","sharedTooltipProps","display","overflow","textOverflow","whiteSpace","maxWidth","Tag","isEligible","StatusDot","isQualified","Button","e","stopPropagation","setDebug","GuideRowDetails"],"mappings":"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"}