@knocklabs/react 0.12.1 → 0.13.1

package/dist/cjs/modules/guide/components/Toolbar/V2/FocusChin.js.map

@@ -1 +1 @@
-{"version":3,"file":"FocusChin.js","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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"}
+{"version":3,"file":"FocusChin.js","names":[],"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"],"mappings":"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"}

package/dist/cjs/modules/guide/components/Toolbar/V2/GuideAnnotatedStatusDot.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),l=require("@telegraph/layout"),i=require("@telegraph/tooltip"),o=require("./helpers.js"),n=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},e=n(a),d={blue:e.default.createElement("svg",{width:"8",height:"8",viewBox:"0 0 8 8","aria-hidden":!0},e.default.createElement("circle",{cx:"4",cy:"4",r:"4",fill:"var(--tgph-blue-9)"})),yellow:e.default.createElement("svg",{width:"8",height:"8",viewBox:"0 0 8 8","aria-hidden":!0},e.default.createElement("polygon",{points:"4,0.5 7.5,7.5 0.5,7.5",fill:"var(--tgph-yellow-9)"})),gray:e.default.createElement("svg",{width:"8",height:"8",viewBox:"0 0 8 8","aria-hidden":!0},e.default.createElement("circle",{cx:"4",cy:"4",r:"2.75",fill:"none",stroke:"var(--tgph-gray-9)",strokeWidth:"2.5"})),red:e.default.createElement("svg",{width:"8",height:"8",viewBox:"0 0 8 8","aria-hidden":!0},e.default.createElement("line",{x1:"1.5",y1:"1.5",x2:"6.5",y2:"6.5",stroke:"var(--tgph-red-9)",strokeWidth:"2",strokeLinecap:"round"}),e.default.createElement("line",{x1:"6.5",y1:"1.5",x2:"1.5",y2:"6.5",stroke:"var(--tgph-red-9)",strokeWidth:"2",strokeLinecap:"round"}))},c=({color:t,tooltip:r})=>e.default.createElement(i.Tooltip,{label:r,...o.sharedTooltipProps},e.default.createElement(l.Stack,{as:"span",align:"center",justify:"center",display:"inline-flex",p:"0_5",style:{flexShrink:0}},d[t]));exports.GuideAnnotatedStatusDot=c;
-//# sourceMappingURL=GuideAnnotatedStatusDot.js.map
+"use strict";const e=require("./helpers.js");let t=require("react/jsx-runtime"),n=require("@telegraph/layout"),r=require("@telegraph/tooltip");var i={blue:(0,t.jsx)(`svg`,{width:`8`,height:`8`,viewBox:`0 0 8 8`,"aria-hidden":!0,children:(0,t.jsx)(`circle`,{cx:`4`,cy:`4`,r:`4`,fill:`var(--tgph-blue-9)`})}),yellow:(0,t.jsx)(`svg`,{width:`8`,height:`8`,viewBox:`0 0 8 8`,"aria-hidden":!0,children:(0,t.jsx)(`polygon`,{points:`4,0.5 7.5,7.5 0.5,7.5`,fill:`var(--tgph-yellow-9)`})}),gray:(0,t.jsx)(`svg`,{width:`8`,height:`8`,viewBox:`0 0 8 8`,"aria-hidden":!0,children:(0,t.jsx)(`circle`,{cx:`4`,cy:`4`,r:`2.75`,fill:`none`,stroke:`var(--tgph-gray-9)`,strokeWidth:`2.5`})}),red:(0,t.jsxs)(`svg`,{width:`8`,height:`8`,viewBox:`0 0 8 8`,"aria-hidden":!0,children:[(0,t.jsx)(`line`,{x1:`1.5`,y1:`1.5`,x2:`6.5`,y2:`6.5`,stroke:`var(--tgph-red-9)`,strokeWidth:`2`,strokeLinecap:`round`}),(0,t.jsx)(`line`,{x1:`6.5`,y1:`1.5`,x2:`1.5`,y2:`6.5`,stroke:`var(--tgph-red-9)`,strokeWidth:`2`,strokeLinecap:`round`})]})},a=({color:a,tooltip:o})=>(0,t.jsx)(r.Tooltip,{label:o,...e.sharedTooltipProps,children:(0,t.jsx)(n.Stack,{as:`span`,align:`center`,justify:`center`,display:`inline-flex`,p:`0_5`,style:{flexShrink:0},children:i[a]})});exports.GuideAnnotatedStatusDot=a;
+//# sourceMappingURL=GuideAnnotatedStatusDot.js.map

package/dist/cjs/modules/guide/components/Toolbar/V2/GuideAnnotatedStatusDot.js.map

@@ -1 +1 @@
-{"version":3,"file":"GuideAnnotatedStatusDot.js","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":"iQAQMA,EAAsD,CAC1DC,6BACG,MAAI,CAAA,MAAM,IAAI,OAAO,IAAI,QAAQ,UAAU,cAAW,IACpDC,EAAA,QAAA,cAAA,SAAA,CAAO,GAAG,IAAI,GAAG,IAAI,EAAE,IAAI,KAAK,oBAAoB,CAAA,CACvD,EAEFC,OACGD,EAAAA,QAAA,cAAA,MAAA,CAAI,MAAM,IAAI,OAAO,IAAI,QAAQ,UAAU,cAAW,IACpDA,UAAA,cAAA,UAAA,CAAQ,OAAO,wBAAwB,KAAK,uBAAsB,CACrE,EAEFE,KACGF,EAAAA,QAAA,cAAA,MAAA,CAAI,MAAM,IAAI,OAAO,IAAI,QAAQ,UAAU,cAAW,EACrD,EAAAA,EAAAA,QAAA,cAAC,UACC,GAAG,IACH,GAAG,IACH,EAAE,OACF,KAAK,OACL,OAAO,qBACP,YAAY,KAAK,CAAA,CAErB,EAEFG,4BACG,MAAI,CAAA,MAAM,IAAI,OAAO,IAAI,QAAQ,UAAU,cAAW,IACpDH,UAAA,cAAA,OAAA,CACC,GAAG,MACH,GAAG,MACH,GAAG,MACH,GAAG,MACH,OAAO,oBACP,YAAY,IACZ,cAAc,OAAO,CAAA,0BAEtB,OACC,CAAA,GAAG,MACH,GAAG,MACH,GAAG,MACH,GAAG,MACH,OAAO,oBACP,YAAY,IACZ,cAAc,QAAO,CAEzB,CAEJ,EAEaI,EAA0BA,CAAC,CACtCC,MAAAA,EACAC,QAAAA,CAIF,4BAEKC,EAAQ,QAAA,CAAA,MAAOD,EAAaE,GAAAA,oBAAAA,0BAC1BC,EACC,MAAA,CAAA,GAAG,OACH,MAAM,SACN,QAAQ,SACR,QAAQ,cACR,EAAE,MACF,MAAO,CAAEC,WAAY,CAAA,GAEpBZ,EAAcO,CAAK,CACtB,CACF"}
+{"version":3,"file":"GuideAnnotatedStatusDot.js","names":[],"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"],"mappings":"+IAQA,IAAM,EAAsD,CAC1D,MACE,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,MAAM,IAAI,OAAO,IAAI,QAAQ,UAAU,cAAA,aAC1C,EAAA,EAAA,IAAA,CAAC,SAAD,CAAQ,GAAG,IAAI,GAAG,IAAI,EAAE,IAAI,KAAK,oBAAsB,CAAA,CACpD,CAAA,EAEP,QACE,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,MAAM,IAAI,OAAO,IAAI,QAAQ,UAAU,cAAA,aAC1C,EAAA,EAAA,IAAA,CAAC,UAAD,CAAS,OAAO,wBAAwB,KAAK,sBAAwB,CAAA,CAClE,CAAA,EAEP,MACE,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,MAAM,IAAI,OAAO,IAAI,QAAQ,UAAU,cAAA,aAC1C,EAAA,EAAA,IAAA,CAAC,SAAD,CACE,GAAG,IACH,GAAG,IACH,EAAE,OACF,KAAK,OACL,OAAO,qBACP,YAAY,KACb,CAAA,CACE,CAAA,EAEP,KACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,MAAM,IAAI,OAAO,IAAI,QAAQ,UAAU,cAAA,YAA5C,EACE,EAAA,EAAA,IAAA,CAAC,OAAD,CACE,GAAG,MACH,GAAG,MACH,GAAG,MACH,GAAG,MACH,OAAO,oBACP,YAAY,IACZ,cAAc,OACf,CAAA,GACD,EAAA,EAAA,IAAA,CAAC,OAAD,CACE,GAAG,MACH,GAAG,MACH,GAAG,MACH,GAAG,MACH,OAAO,oBACP,YAAY,IACZ,cAAc,OACf,CAAA,CACE,GAET,EAEa,GAA2B,CACtC,QACA,cAME,EAAA,EAAA,IAAA,CAAC,EAAA,QAAD,CAAS,MAAO,EAAS,GAAI,EAAA,6BAC3B,EAAA,EAAA,IAAA,CAAC,EAAA,MAAD,CACE,GAAG,OACH,MAAM,SACN,QAAQ,SACR,QAAQ,cACR,EAAE,MACF,MAAO,CAAE,WAAY,CAAE,WAEtB,EAAc,EACV,CAAA,CACA,CAAA"}

package/dist/cjs/modules/guide/components/Toolbar/V2/GuideContextDetails.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react"),d=require("@knocklabs/react-core"),t=require("@telegraph/layout"),c=require("@telegraph/toggle"),o=require("@telegraph/tooltip"),l=require("@telegraph/typography"),i=require("./helpers.js"),s=a=>a&&typeof a=="object"&&"default"in a?a:{default:a},e=s(u),m=()=>{const{client:a}=d.useGuideContext(),{debugSettings:n}=d.useStore(a.store,r=>({debugSettings:r.debug||{}}));return e.default.createElement(t.Box,{py:"3",px:"3"},e.default.createElement(t.Stack,{direction:"column",gap:"1",width:"full"},e.default.createElement(l.Text,{as:"span",size:"1",weight:"medium",display:"block"},"Toolbar settings"),e.default.createElement(t.Stack,{direction:"column",gap:"1"},e.default.createElement(t.Stack,{direction:"row",gap:"2",align:"center",h:"7"},e.default.createElement(o.Tooltip,{label:"When enabled, engagement actions are not sent to Knock.",...i.sharedTooltipProps},e.default.createElement(t.Box,{width:"36",mt:"1"},e.default.createElement(l.Text,{as:"span",size:"1",weight:"medium",color:"gray",borderBottom:"px",borderStyle:"dashed"},"Sandbox engagement"))),e.default.createElement(c.Toggle.Default,{size:"1",pt:"1_5",value:!!n.skipEngagementTracking,onValueChange:r=>{a.setDebug({...n,skipEngagementTracking:r})}})),e.default.createElement(t.Stack,{direction:"row",gap:"2",align:"center",h:"7"},e.default.createElement(o.Tooltip,{label:"Ignore throttle and show next guide immediately",...i.sharedTooltipProps},e.default.createElement(t.Box,{width:"36",mt:"1"},e.default.createElement(l.Text,{as:"span",size:"1",weight:"medium",color:"gray",borderBottom:"px",borderStyle:"dashed"},"Ignore throttle"))),e.default.createElement(c.Toggle.Default,{size:"1",pt:"1_5",value:!!n.ignoreDisplayInterval,onValueChange:r=>{a.setDebug({...n,ignoreDisplayInterval:r})}})))),e.default.createElement(t.Stack,{direction:"column",gap:"1",width:"full"},e.default.createElement(o.Tooltip,{label:e.default.createElement(l.Text,{as:"span",size:"1"},"The tenant and data payload passed to KnockGuideProvider. Available for use in runtime conditions."),...i.sharedTooltipProps},e.default.createElement(l.Text,{as:"span",size:"1",weight:"medium",borderBottom:"px",borderStyle:"dashed",mt:"4",style:{whiteSpace:"nowrap",width:"fit-content"}},"Target params")),e.default.createElement(t.Stack,{direction:"column",gap:"2"},e.default.createElement(t.Stack,{direction:"row",gap:"2",align:"center"},e.default.createElement(l.Text,{as:"span",size:"1",weight:"medium",color:"gray",width:"36",mt:"1"},"Tenant"),e.default.createElement(t.Box,{rounded:"2",overflow:"auto",backgroundColor:"surface-2",border:"px",p:"1",style:{flex:1,minWidth:0}},e.default.createElement("pre",{style:{fontSize:"11px",margin:0}},e.default.createElement("code",null,a.targetParams.tenant||"-")))),e.default.createElement(t.Stack,{direction:"row",gap:"2",align:"flex-start"},e.default.createElement(l.Text,{as:"span",size:"1",weight:"medium",color:"gray",width:"36",mt:"1"},"Data"),e.default.createElement(t.Box,{rounded:"2",overflow:"auto",backgroundColor:"surface-2",border:"px",p:"1",style:{flex:1,minWidth:0,minHeight:"50px",maxHeight:"200px"}},e.default.createElement("pre",{style:{fontSize:"11px",margin:0}},e.default.createElement("code",null,a.targetParams.data?JSON.stringify(a.targetParams.data,null,2):"-")))))))};exports.GuideContextDetails=m;
-//# sourceMappingURL=GuideContextDetails.js.map
+"use strict";const e=require("./helpers.js");let t=require("@knocklabs/react-core"),n=require("react/jsx-runtime"),r=require("@telegraph/layout"),i=require("@telegraph/tooltip"),a=require("@telegraph/typography"),o=require("@telegraph/toggle");var s=()=>{let{client:s}=(0,t.useGuideContext)(),{debugSettings:c}=(0,t.useStore)(s.store,e=>({debugSettings:e.debug||{}}));return(0,n.jsxs)(r.Box,{py:`3`,px:`3`,children:[(0,n.jsxs)(r.Stack,{direction:`column`,gap:`1`,width:`full`,children:[(0,n.jsx)(a.Text,{as:`span`,size:`1`,weight:`medium`,display:`block`,children:`Toolbar settings`}),(0,n.jsxs)(r.Stack,{direction:`column`,gap:`1`,children:[(0,n.jsxs)(r.Stack,{direction:`row`,gap:`2`,align:`center`,h:`7`,children:[(0,n.jsx)(i.Tooltip,{label:`When enabled, engagement actions are not sent to Knock.`,...e.sharedTooltipProps,children:(0,n.jsx)(r.Box,{width:`36`,mt:`1`,children:(0,n.jsx)(a.Text,{as:`span`,size:`1`,weight:`medium`,color:`gray`,borderBottom:`px`,borderStyle:`dashed`,children:`Sandbox engagement`})})}),(0,n.jsx)(o.Toggle.Default,{size:`1`,pt:`1_5`,value:!!c.skipEngagementTracking,onValueChange:e=>{s.setDebug({...c,skipEngagementTracking:e})}})]}),(0,n.jsxs)(r.Stack,{direction:`row`,gap:`2`,align:`center`,h:`7`,children:[(0,n.jsx)(i.Tooltip,{label:`Ignore throttle and show next guide immediately`,...e.sharedTooltipProps,children:(0,n.jsx)(r.Box,{width:`36`,mt:`1`,children:(0,n.jsx)(a.Text,{as:`span`,size:`1`,weight:`medium`,color:`gray`,borderBottom:`px`,borderStyle:`dashed`,children:`Ignore throttle`})})}),(0,n.jsx)(o.Toggle.Default,{size:`1`,pt:`1_5`,value:!!c.ignoreDisplayInterval,onValueChange:e=>{s.setDebug({...c,ignoreDisplayInterval:e})}})]})]})]}),(0,n.jsxs)(r.Stack,{direction:`column`,gap:`1`,width:`full`,children:[(0,n.jsx)(i.Tooltip,{label:(0,n.jsx)(a.Text,{as:`span`,size:`1`,children:`The tenant and data payload passed to KnockGuideProvider. Available for use in runtime conditions.`}),...e.sharedTooltipProps,children:(0,n.jsx)(a.Text,{as:`span`,size:`1`,weight:`medium`,borderBottom:`px`,borderStyle:`dashed`,mt:`4`,style:{whiteSpace:`nowrap`,width:`fit-content`},children:`Target params`})}),(0,n.jsxs)(r.Stack,{direction:`column`,gap:`2`,children:[(0,n.jsxs)(r.Stack,{direction:`row`,gap:`2`,align:`center`,children:[(0,n.jsx)(a.Text,{as:`span`,size:`1`,weight:`medium`,color:`gray`,width:`36`,mt:`1`,children:`Tenant`}),(0,n.jsx)(r.Box,{rounded:`2`,overflow:`auto`,backgroundColor:`surface-2`,border:`px`,p:`1`,style:{flex:1,minWidth:0},children:(0,n.jsx)(`pre`,{style:{fontSize:`11px`,margin:0},children:(0,n.jsx)(`code`,{children:s.targetParams.tenant||`-`})})})]}),(0,n.jsxs)(r.Stack,{direction:`row`,gap:`2`,align:`flex-start`,children:[(0,n.jsx)(a.Text,{as:`span`,size:`1`,weight:`medium`,color:`gray`,width:`36`,mt:`1`,children:`Data`}),(0,n.jsx)(r.Box,{rounded:`2`,overflow:`auto`,backgroundColor:`surface-2`,border:`px`,p:`1`,style:{flex:1,minWidth:0,minHeight:`50px`,maxHeight:`200px`},children:(0,n.jsx)(`pre`,{style:{fontSize:`11px`,margin:0},children:(0,n.jsx)(`code`,{children:s.targetParams.data?JSON.stringify(s.targetParams.data,null,2):`-`})})})]})]})]})]})};exports.GuideContextDetails=s;
+//# sourceMappingURL=GuideContextDetails.js.map

package/dist/cjs/modules/guide/components/Toolbar/V2/GuideContextDetails.js.map

@@ -1 +1 @@
-{"version":3,"file":"GuideContextDetails.js","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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"}
+{"version":3,"file":"GuideContextDetails.js","names":[],"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"],"mappings":"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"}

package/dist/cjs/modules/guide/components/Toolbar/V2/GuideRow.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("@knocklabs/react-core"),T=require("@telegraph/button"),D=require("@telegraph/icon"),l=require("@telegraph/layout"),A=require("@telegraph/tag"),h=require("@telegraph/tooltip"),y=require("@telegraph/typography"),x=require("lucide-react"),q=require("react"),n=require("./GuideAnnotatedStatusDot.js"),v=require("./GuideRowDetails.js"),E=require("./helpers.js"),u=require("./useInspectGuideClientStore.js");function C(e){if(e&&typeof e=="object"&&"default"in e)return e;const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const s=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,s.get?s:{enumerable:!0,get:()=>e[a]})}}return t.default=e,Object.freeze(t)}const o=C(q),_="data-kgt-guide-row-key",G=({label:e,color:t="gray",children:a})=>o.createElement(l.Stack,{direction:"row",align:"center",gap:"0_5",px:"1",height:"5",bg:"surface-2",rounded:"full",border:"px",borderColor:"gray-4"},o.createElement(y.Text,{as:"span",size:"0",color:t,weight:"medium"},e),a),O=e=>{if(u.isUncommittedGuide(e))return{color:"red",label:"Inactive",description:"This guide has never been committed and published yet"};const{annotation:t}=e;if(!t.active.status)return{color:"red",label:"Inactive",description:"This guide is inactive"};if(t.archived.status)return{color:"red",label:"Archived",description:"User has already dismissed this guide"};if(!t.targetable.status)return{color:"red",label:"Not targeted",description:t.targetable.message};const a=v.getSelectableStatusSummary(t.selectable.status);return t.selectable.status===void 0?a:t.activatable.status?{...a,...t.selectable.status==="returned"?{label:"Display"}:void 0}:{color:"red",label:"Not activated",description:"This guide cannot be activated in the current location"}},R=e=>{if(u.isUncommittedGuide(e))return{active:{color:"gray"},archived:{color:"gray"},targetable:{color:"gray"},activatable:{color:"gray"},selectable:{color:"gray"}};const{annotation:t}=e,a={color:t.active.status?"blue":"red",tooltip:`Active: ${t.active.status?"Yes":"No"}`},s={color:t.archived.status?"red":"blue",tooltip:`Archived: ${t.archived.status?"Yes":"No"}`},d={color:t.targetable.status?"blue":"red",tooltip:`Targeting: ${t.targetable.status?"Yes":"No"}`},b={color:t.activatable.status?"blue":"red",tooltip:`Activated: ${t.activatable.status?"Yes":"No"}`},c=v.getSelectableStatusSummary(t.selectable.status),p={color:c.color,tooltip:c.label};return{active:a,archived:s,targetable:d,activatable:b,selectable:p}},j=({guide:e,orderIndex:t,isExpanded:a,onClick:s})=>{const{client:d}=S.useGuideContext(),{debugSettings:b}=S.useStore(d.store,g=>({debugSettings:g.debug||{}})),[c,p]=o.useState(!1),f=b.focusedGuideKeys||{},k=Object.keys(f).length>0,i=!!f[e.key],r=R(e),m=O(e),w={[_]:e.key};return o.createElement(l.Box,{rounded:"3",overflow:"hidden",border:"px",borderStyle:"solid",borderColor:a?"gray-6":"transparent",onMouseEnter:()=>p(!0),onMouseLeave:()=>p(!1),style:{cursor:"pointer"},...w},o.createElement(l.Stack,{h:"7",px:"1",gap:"1",align:"center",justify:"space-between",rounded:"3",overflow:"hidden",border:"px",borderStyle:"solid",borderColor:a?"transparent":i?"gray-6":c?"gray-4":"transparent",backgroundColor:a?"surface-2":i?"gray-2":c?"surface-2":"transparent",onClick:()=>s(e.key)},o.createElement(l.Stack,{align:"center",gap:"1_5",style:{minWidth:0,flex:1}},o.createElement(l.Stack,{w:"7",justify:"space-between",align:"center",gap:"0_5"},o.createElement(l.Box,{w:"3"},!e.bypass_global_group_limit&&o.createElement(D.Icon,{icon:x.Gauge,size:"0",color:"gray",alt:"Subject to throttling"})),o.createElement(y.Text,{as:"span",size:"1",weight:"medium",color:e.bypass_global_group_limit?"blue":"default",style:{flexShrink:0}},t+1)),o.createElement(h.Tooltip,{label:`${e.key}${e.bypass_global_group_limit?" (unthrottled)":""}`,...E.sharedTooltipProps},o.createElement(y.Text,{as:"code",size:"1",weight:"medium",color:"default",style:{display:"block",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",maxWidth:"200px"}},e.key))),o.createElement(l.Stack,{align:"center",gap:"1_5",style:{flexShrink:0}},!k&&o.createElement(h.Tooltip,{label:m.description,...E.sharedTooltipProps},o.createElement(A.Tag,{size:"0",variant:"soft",color:m.color},m.label)),o.createElement(G,{label:"Elig:",color:u.isUncommittedGuide(e)?"disabled":e.annotation.isEligible?"blue":"gray"},o.createElement(n.GuideAnnotatedStatusDot,{color:r.active.color,tooltip:r.active.tooltip}),o.createElement(n.GuideAnnotatedStatusDot,{color:r.archived.color,tooltip:r.archived.tooltip}),o.createElement(n.GuideAnnotatedStatusDot,{color:r.targetable.color,tooltip:r.targetable.tooltip})),o.createElement(G,{label:"Vis:",color:u.isUncommittedGuide(e)?"disabled":e.annotation.isQualified&&e.annotation.selectable.status==="returned"?"blue":"gray"},o.createElement(n.GuideAnnotatedStatusDot,{color:r.activatable.color,tooltip:r.activatable.tooltip}),o.createElement(n.GuideAnnotatedStatusDot,{color:r.selectable.color,tooltip:r.selectable.tooltip})),o.createElement(T.Button,{size:"0",variant:i?"solid":"outline",color:i?"blue":"gray",disabled:u.isUncommittedGuide(e)||e.annotation.selectable.status===void 0,onClick:g=>{g.stopPropagation(),d.setDebug({...b,focusedGuideKeys:i?{}:{[e.key]:!0}})}},"Focus"))),a&&o.createElement(v.GuideRowDetails,{guide:e}))};exports.GUIDE_ROW_DATA_SELECTOR=_;exports.GuideRow=j;
-//# sourceMappingURL=GuideRow.js.map
+"use strict";const e=require("../../../../../_virtual/_rolldown/runtime.js"),t=require("./helpers.js"),n=require("./GuideAnnotatedStatusDot.js"),r=require("./useInspectGuideClientStore.js"),i=require("./GuideRowDetails.js");let a=require("@knocklabs/react-core"),o=require("react");o=e.__toESM(o);let s=require("react/jsx-runtime"),c=require("@telegraph/button"),l=require("@telegraph/icon"),u=require("@telegraph/layout"),d=require("@telegraph/tooltip"),f=require("@telegraph/typography"),p=require("lucide-react"),m=require("@telegraph/tag");var h=`data-kgt-guide-row-key`,g=({label:e,color:t=`gray`,children:n})=>(0,s.jsxs)(u.Stack,{direction:`row`,align:`center`,gap:`0_5`,px:`1`,height:`5`,bg:`surface-2`,rounded:`full`,border:`px`,borderColor:`gray-4`,children:[(0,s.jsx)(f.Text,{as:`span`,size:`0`,color:t,weight:`medium`,children:e}),n]}),_=e=>{if(r.isUncommittedGuide(e))return{color:`red`,label:`Inactive`,description:`This guide has never been committed and published yet`};let{annotation:t}=e;if(!t.active.status)return{color:`red`,label:`Inactive`,description:`This guide is inactive`};if(t.archived.status)return{color:`red`,label:`Archived`,description:`User has already dismissed this guide`};if(!t.targetable.status)return{color:`red`,label:`Not targeted`,description:t.targetable.message};let n=i.getSelectableStatusSummary(t.selectable.status);return t.selectable.status===void 0?n:t.activatable.status?{...n,...t.selectable.status===`returned`?{label:`Display`}:void 0}:{color:`red`,label:`Not activated`,description:`This guide cannot be activated in the current location`}},v=e=>{if(r.isUncommittedGuide(e))return{active:{color:`gray`},archived:{color:`gray`},targetable:{color:`gray`},activatable:{color:`gray`},selectable:{color:`gray`}};let{annotation:t}=e,n={color:t.active.status?`blue`:`red`,tooltip:`Active: ${t.active.status?`Yes`:`No`}`},a={color:t.archived.status?`red`:`blue`,tooltip:`Archived: ${t.archived.status?`Yes`:`No`}`},o={color:t.targetable.status?`blue`:`red`,tooltip:`Targeting: ${t.targetable.status?`Yes`:`No`}`},s={color:t.activatable.status?`blue`:`red`,tooltip:`Activated: ${t.activatable.status?`Yes`:`No`}`},c=i.getSelectableStatusSummary(t.selectable.status);return{active:n,archived:a,targetable:o,activatable:s,selectable:{color:c.color,tooltip:c.label}}},y=({guide:e,orderIndex:y,isExpanded:b,onClick:x})=>{let{client:S}=(0,a.useGuideContext)(),{debugSettings:C}=(0,a.useStore)(S.store,e=>({debugSettings:e.debug||{}})),[w,T]=o.useState(!1),E=C.focusedGuideKeys||{},D=Object.keys(E).length>0,O=!!E[e.key],k=v(e),A=_(e),j={[h]:e.key};return(0,s.jsxs)(u.Box,{rounded:`3`,overflow:`hidden`,border:`px`,borderStyle:`solid`,borderColor:b?`gray-6`:`transparent`,onMouseEnter:()=>T(!0),onMouseLeave:()=>T(!1),style:{cursor:`pointer`},...j,children:[(0,s.jsxs)(u.Stack,{h:`7`,px:`1`,gap:`1`,align:`center`,justify:`space-between`,rounded:`3`,overflow:`hidden`,border:`px`,borderStyle:`solid`,borderColor:b?`transparent`:O?`gray-6`:w?`gray-4`:`transparent`,backgroundColor:b?`surface-2`:O?`gray-2`:w?`surface-2`:`transparent`,onClick:()=>x(e.key),children:[(0,s.jsxs)(u.Stack,{align:`center`,gap:`1_5`,style:{minWidth:0,flex:1},children:[(0,s.jsxs)(u.Stack,{w:`7`,justify:`space-between`,align:`center`,gap:`0_5`,children:[(0,s.jsx)(u.Box,{w:`3`,children:!e.bypass_global_group_limit&&(0,s.jsx)(l.Icon,{icon:p.Gauge,size:`0`,color:`gray`,alt:`Subject to throttling`})}),(0,s.jsx)(f.Text,{as:`span`,size:`1`,weight:`medium`,color:e.bypass_global_group_limit?`blue`:`default`,style:{flexShrink:0},children:y+1})]}),(0,s.jsx)(d.Tooltip,{label:`${e.key}${e.bypass_global_group_limit?` (unthrottled)`:``}`,...t.sharedTooltipProps,children:(0,s.jsx)(f.Text,{as:`code`,size:`1`,weight:`medium`,color:`default`,style:{display:`block`,overflow:`hidden`,textOverflow:`ellipsis`,whiteSpace:`nowrap`,maxWidth:`200px`},children:e.key})})]}),(0,s.jsxs)(u.Stack,{align:`center`,gap:`1_5`,style:{flexShrink:0},children:[!D&&(0,s.jsx)(d.Tooltip,{label:A.description,...t.sharedTooltipProps,children:(0,s.jsx)(m.Tag,{size:`0`,variant:`soft`,color:A.color,children:A.label})}),(0,s.jsxs)(g,{label:`Elig:`,color:r.isUncommittedGuide(e)?`disabled`:e.annotation.isEligible?`blue`:`gray`,children:[(0,s.jsx)(n.GuideAnnotatedStatusDot,{color:k.active.color,tooltip:k.active.tooltip}),(0,s.jsx)(n.GuideAnnotatedStatusDot,{color:k.archived.color,tooltip:k.archived.tooltip}),(0,s.jsx)(n.GuideAnnotatedStatusDot,{color:k.targetable.color,tooltip:k.targetable.tooltip})]}),(0,s.jsxs)(g,{label:`Vis:`,color:r.isUncommittedGuide(e)?`disabled`:e.annotation.isQualified&&e.annotation.selectable.status===`returned`?`blue`:`gray`,children:[(0,s.jsx)(n.GuideAnnotatedStatusDot,{color:k.activatable.color,tooltip:k.activatable.tooltip}),(0,s.jsx)(n.GuideAnnotatedStatusDot,{color:k.selectable.color,tooltip:k.selectable.tooltip})]}),(0,s.jsx)(c.Button,{size:`0`,variant:O?`solid`:`outline`,color:O?`blue`:`gray`,disabled:r.isUncommittedGuide(e)||e.annotation.selectable.status===void 0,onClick:t=>{t.stopPropagation(),S.setDebug({...C,focusedGuideKeys:O?{}:{[e.key]:!0}})},children:`Focus`})]})]}),b&&(0,s.jsx)(i.GuideRowDetails,{guide:e})]})};exports.GUIDE_ROW_DATA_SELECTOR=h,exports.GuideRow=y;
+//# sourceMappingURL=GuideRow.js.map

package/dist/cjs/modules/guide/components/Toolbar/V2/GuideRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"GuideRow.js","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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"}
+{"version":3,"file":"GuideRow.js","names":[],"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"],"mappings":"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"}

package/dist/cjs/modules/guide/components/Toolbar/V2/GuideRowDetails.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("react"),g=require("@knocklabs/react-core"),u=require("@telegraph/button"),r=require("@telegraph/layout"),d=require("@telegraph/tooltip"),s=require("@telegraph/typography"),b=require("./GuideAnnotatedStatusDot.js"),h=require("./helpers.js"),f=require("./useInspectGuideClientStore.js"),y=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},e=y(p),c=({title:t,children:i})=>e.default.createElement(r.Stack,{direction:"column",justify:"flex-start",gap:"1",px:"1_5",py:"1",rounded:"2",bg:"surface-1",border:"px",borderColor:"gray-4",style:{flex:1,alignSelf:"stretch"}},e.default.createElement(s.Text,{as:"span",size:"0",color:"gray",weight:"medium"},t),e.default.createElement(r.Stack,{direction:"column",gap:"1"},i)),n=({label:t,value:i,color:a,tooltip:o,children:l})=>e.default.createElement(r.Stack,{align:"center",gap:"1"},e.default.createElement(d.Tooltip,{enabled:!!o,label:o,...h.sharedTooltipProps},e.default.createElement(r.Stack,{align:"center",gap:"1",display:"inline-flex"},e.default.createElement(b.GuideAnnotatedStatusDot,{color:a,tooltip:`${t}: ${i}`}),e.default.createElement(s.Text,{as:"span",size:"1",weight:"medium"},t,":"),!l&&e.default.createElement(s.Text,{as:"span",size:"1",weight:"medium",color:a},i))),l),m=t=>{switch(t){case"returned":return{label:"Ready to display",color:"blue",description:"The guide is queried and ready to render."};case"throttled":return{label:"Throttled",color:"yellow",description:"The guide is queried but held back by throttle settings."};case"queried":return{label:"Queued",color:"gray",description:"The guide is queried but waiting behind higher-priority guides."};default:return{label:"Not queried",color:"red",description:"No useGuide(s) call on this page matches this guide."}}},E=({guide:t})=>{const{client:i}=g.useGuideContext();if(f.isUncommittedGuide(t))return e.default.createElement(r.Box,{px:"3",py:"2"},e.default.createElement(s.Text,{as:"span",size:"1",color:"gray"},"This guide has never been committed and published."));const{annotation:a,dashboard_url:o}=t,l=m(a.selectable.status);return e.default.createElement(r.Stack,{p:"1",gap:"2",direction:"row",align:"flex-start"},e.default.createElement(c,{title:"Eligibility"},e.default.createElement(n,{label:"Active",value:a.active.status?"Yes":"No",color:a.active.status?"blue":"red",tooltip:"Whether the guide is active in this environment."}),e.default.createElement(n,{label:"Archived",value:a.archived.status?"Yes":"No",color:a.archived.status?"red":"blue",tooltip:"Whether the current user has dismissed this guide."}),e.default.createElement(n,{label:"Targeting",value:a.targetable.status?"Yes":"No",color:a.targetable.status?"blue":"red",tooltip:"Whether the current user matches the guide's targeting conditions."})),e.default.createElement(c,{title:"Visibility"},e.default.createElement(n,{label:"Activation",value:a.activatable.status?"Yes":"No",color:a.activatable.status?"blue":"red",tooltip:"Whether the current page matches the guide's activation rules."}),e.default.createElement(n,{label:"Display",value:l.label,color:l.color,tooltip:"Whether the guide has been queried and is ready to render on the current page."},e.default.createElement(d.Tooltip,{label:l.description,...h.sharedTooltipProps},e.default.createElement(s.Text,{as:"span",size:"1",weight:"medium",color:l.color},l.label)))),e.default.createElement(r.Stack,{direction:"column",justify:"flex-end",gap:"1",style:{alignSelf:"stretch"}},e.default.createElement(u.Button,{size:"0",variant:"outline",onClick:()=>i.resetEngagement(t)},"Reset engagement"),o&&e.default.createElement(u.Button,{size:"0",variant:"outline",onClick:()=>window.open(o,"_blank","noopener")},"Open in dashboard")))};exports.GuideRowDetails=E;exports.getSelectableStatusSummary=m;
-//# sourceMappingURL=GuideRowDetails.js.map
+"use strict";const e=require("./helpers.js"),t=require("./GuideAnnotatedStatusDot.js"),n=require("./useInspectGuideClientStore.js");let r=require("@knocklabs/react-core"),i=require("react/jsx-runtime"),a=require("@telegraph/button"),o=require("@telegraph/layout"),s=require("@telegraph/tooltip"),c=require("@telegraph/typography");var l=({title:e,children:t})=>(0,i.jsxs)(o.Stack,{direction:`column`,justify:`flex-start`,gap:`1`,px:`1_5`,py:`1`,rounded:`2`,bg:`surface-1`,border:`px`,borderColor:`gray-4`,style:{flex:1,alignSelf:`stretch`},children:[(0,i.jsx)(c.Text,{as:`span`,size:`0`,color:`gray`,weight:`medium`,children:e}),(0,i.jsx)(o.Stack,{direction:`column`,gap:`1`,children:t})]}),u=({label:n,value:r,color:a,tooltip:l,children:u})=>(0,i.jsxs)(o.Stack,{align:`center`,gap:`1`,children:[(0,i.jsx)(s.Tooltip,{enabled:!!l,label:l,...e.sharedTooltipProps,children:(0,i.jsxs)(o.Stack,{align:`center`,gap:`1`,display:`inline-flex`,children:[(0,i.jsx)(t.GuideAnnotatedStatusDot,{color:a,tooltip:`${n}: ${r}`}),(0,i.jsxs)(c.Text,{as:`span`,size:`1`,weight:`medium`,children:[n,`:`]}),!u&&(0,i.jsx)(c.Text,{as:`span`,size:`1`,weight:`medium`,color:a,children:r})]})}),u]}),d=e=>{switch(e){case`returned`:return{label:`Ready to display`,color:`blue`,description:`The guide is queried and ready to render.`};case`throttled`:return{label:`Throttled`,color:`yellow`,description:`The guide is queried but held back by throttle settings.`};case`queried`:return{label:`Queued`,color:`gray`,description:`The guide is queried but waiting behind higher-priority guides.`};default:return{label:`Not queried`,color:`red`,description:`No useGuide(s) call on this page matches this guide.`}}},f=({guide:t})=>{let{client:f}=(0,r.useGuideContext)();if(n.isUncommittedGuide(t))return(0,i.jsx)(o.Box,{px:`3`,py:`2`,children:(0,i.jsx)(c.Text,{as:`span`,size:`1`,color:`gray`,children:`This guide has never been committed and published.`})});let{annotation:p,dashboard_url:m}=t,h=d(p.selectable.status);return(0,i.jsxs)(o.Stack,{p:`1`,gap:`2`,direction:`row`,align:`flex-start`,children:[(0,i.jsxs)(l,{title:`Eligibility`,children:[(0,i.jsx)(u,{label:`Active`,value:p.active.status?`Yes`:`No`,color:p.active.status?`blue`:`red`,tooltip:`Whether the guide is active in this environment.`}),(0,i.jsx)(u,{label:`Archived`,value:p.archived.status?`Yes`:`No`,color:p.archived.status?`red`:`blue`,tooltip:`Whether the current user has dismissed this guide.`}),(0,i.jsx)(u,{label:`Targeting`,value:p.targetable.status?`Yes`:`No`,color:p.targetable.status?`blue`:`red`,tooltip:`Whether the current user matches the guide's targeting conditions.`})]}),(0,i.jsxs)(l,{title:`Visibility`,children:[(0,i.jsx)(u,{label:`Activation`,value:p.activatable.status?`Yes`:`No`,color:p.activatable.status?`blue`:`red`,tooltip:`Whether the current page matches the guide's activation rules.`}),(0,i.jsx)(u,{label:`Display`,value:h.label,color:h.color,tooltip:`Whether the guide has been queried and is ready to render on the current page.`,children:(0,i.jsx)(s.Tooltip,{label:h.description,...e.sharedTooltipProps,children:(0,i.jsx)(c.Text,{as:`span`,size:`1`,weight:`medium`,color:h.color,children:h.label})})})]}),(0,i.jsxs)(o.Stack,{direction:`column`,justify:`flex-end`,gap:`1`,style:{alignSelf:`stretch`},children:[(0,i.jsx)(a.Button,{size:`0`,variant:`outline`,onClick:()=>f.resetEngagement(t),children:`Reset engagement`}),m&&(0,i.jsx)(a.Button,{size:`0`,variant:`outline`,onClick:()=>window.open(m,`_blank`,`noopener`),children:`Open in dashboard`})]})]})};exports.GuideRowDetails=f,exports.getSelectableStatusSummary=d;
+//# sourceMappingURL=GuideRowDetails.js.map

package/dist/cjs/modules/guide/components/Toolbar/V2/GuideRowDetails.js.map

@@ -1 +1 @@
-{"version":3,"file":"GuideRowDetails.js","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/GuideRowDetails.tsx"],"sourcesContent":["import { useGuideContext } 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\";\n\nimport {\n  StatusColor,\n  GuideAnnotatedStatusDot as StatusDot,\n} from \"./GuideAnnotatedStatusDot\";\nimport { sharedTooltipProps } from \"./helpers\";\nimport {\n  AnnotatedGuide,\n  UncommittedGuide,\n  isUncommittedGuide,\n} from \"./useInspectGuideClientStore\";\n\nconst CardContainer = ({\n  title,\n  children,\n}: {\n  title: string;\n  children: React.ReactNode;\n}) => (\n  <Stack\n    direction=\"column\"\n    justify=\"flex-start\"\n    gap=\"1\"\n    px=\"1_5\"\n    py=\"1\"\n    rounded=\"2\"\n    bg=\"surface-1\"\n    border=\"px\"\n    borderColor=\"gray-4\"\n    style={{ flex: 1, alignSelf: \"stretch\" }}\n  >\n    <Text as=\"span\" size=\"0\" color=\"gray\" weight=\"medium\">\n      {title}\n    </Text>\n    <Stack direction=\"column\" gap=\"1\">\n      {children}\n    </Stack>\n  </Stack>\n);\n\nconst StatusRow = ({\n  label,\n  value,\n  color,\n  tooltip,\n  children,\n}: {\n  label: string;\n  value: string;\n  color: StatusColor;\n  tooltip?: React.ReactNode;\n  children?: React.ReactNode;\n}) => {\n  return (\n    <Stack align=\"center\" gap=\"1\">\n      <Tooltip enabled={!!tooltip} label={tooltip} {...sharedTooltipProps}>\n        <Stack align=\"center\" gap=\"1\" display=\"inline-flex\">\n          <StatusDot color={color} tooltip={`${label}: ${value}`} />\n          <Text as=\"span\" size=\"1\" weight=\"medium\">\n            {label}:\n          </Text>\n          {/* User children over value when provided, for cases when we want to\n              have its own tooltip over it */}\n          {!children && (\n            <Text as=\"span\" size=\"1\" weight=\"medium\" color={color}>\n              {value}\n            </Text>\n          )}\n        </Stack>\n      </Tooltip>\n      {children}\n    </Stack>\n  );\n};\n\nexport type StatusSummary = {\n  color: StatusColor;\n  label: string;\n  description: string;\n};\n\nexport const getSelectableStatusSummary = (\n  status: \"returned\" | \"throttled\" | \"queried\" | undefined,\n): StatusSummary => {\n  switch (status) {\n    case \"returned\":\n      return {\n        label: \"Ready to display\",\n        color: \"blue\",\n        description: \"The guide is queried and ready to render.\",\n      };\n    case \"throttled\":\n      return {\n        label: \"Throttled\",\n        color: \"yellow\",\n        description: \"The guide is queried but held back by throttle settings.\",\n      };\n    case \"queried\":\n      return {\n        label: \"Queued\",\n        color: \"gray\",\n        description:\n          \"The guide is queried but waiting behind higher-priority guides.\",\n      };\n    default:\n      return {\n        label: \"Not queried\",\n        color: \"red\",\n        description: \"No useGuide(s) call on this page matches this guide.\",\n      };\n  }\n};\n\nexport const GuideRowDetails = ({\n  guide,\n}: {\n  guide: AnnotatedGuide | UncommittedGuide;\n}) => {\n  const { client } = useGuideContext();\n\n  if (isUncommittedGuide(guide)) {\n    return (\n      <Box px=\"3\" py=\"2\">\n        <Text as=\"span\" size=\"1\" color=\"gray\">\n          This guide has never been committed and published.\n        </Text>\n      </Box>\n    );\n  }\n\n  const { annotation, dashboard_url: dashboardUrl } = guide;\n  const selectableStatusSummary = getSelectableStatusSummary(\n    annotation.selectable.status,\n  );\n\n  return (\n    <Stack p=\"1\" gap=\"2\" direction=\"row\" align=\"flex-start\">\n      <CardContainer title=\"Eligibility\">\n        <StatusRow\n          label=\"Active\"\n          value={annotation.active.status ? \"Yes\" : \"No\"}\n          color={annotation.active.status ? \"blue\" : \"red\"}\n          tooltip=\"Whether the guide is active in this environment.\"\n        />\n        <StatusRow\n          label=\"Archived\"\n          value={annotation.archived.status ? \"Yes\" : \"No\"}\n          color={annotation.archived.status ? \"red\" : \"blue\"}\n          tooltip=\"Whether the current user has dismissed this guide.\"\n        />\n        <StatusRow\n          label=\"Targeting\"\n          value={annotation.targetable.status ? \"Yes\" : \"No\"}\n          color={annotation.targetable.status ? \"blue\" : \"red\"}\n          tooltip=\"Whether the current user matches the guide's targeting conditions.\"\n        />\n      </CardContainer>\n      <CardContainer title=\"Visibility\">\n        <StatusRow\n          label=\"Activation\"\n          value={annotation.activatable.status ? \"Yes\" : \"No\"}\n          color={annotation.activatable.status ? \"blue\" : \"red\"}\n          tooltip=\"Whether the current page matches the guide's activation rules.\"\n        />\n        <StatusRow\n          label=\"Display\"\n          value={selectableStatusSummary.label}\n          color={selectableStatusSummary.color}\n          tooltip=\"Whether the guide has been queried and is ready to render on the current page.\"\n        >\n          <Tooltip\n            label={selectableStatusSummary.description}\n            {...sharedTooltipProps}\n          >\n            <Text\n              as=\"span\"\n              size=\"1\"\n              weight=\"medium\"\n              color={selectableStatusSummary.color}\n            >\n              {selectableStatusSummary.label}\n            </Text>\n          </Tooltip>\n        </StatusRow>\n      </CardContainer>\n      <Stack\n        direction=\"column\"\n        justify=\"flex-end\"\n        gap=\"1\"\n        style={{ alignSelf: \"stretch\" }}\n      >\n        <Button\n          size=\"0\"\n          variant=\"outline\"\n          onClick={() => client.resetEngagement(guide)}\n        >\n          Reset engagement\n        </Button>\n        {dashboardUrl && (\n          <Button\n            size=\"0\"\n            variant=\"outline\"\n            onClick={() => window.open(dashboardUrl, \"_blank\", \"noopener\")}\n          >\n            Open in dashboard\n          </Button>\n        )}\n      </Stack>\n    </Stack>\n  );\n};\n"],"names":["CardContainer","title","children","React","Stack","flex","alignSelf","Text","StatusRow","label","value","color","tooltip","Tooltip","sharedTooltipProps","StatusDot","getSelectableStatusSummary","status","description","GuideRowDetails","guide","client","useGuideContext","isUncommittedGuide","Box","annotation","dashboard_url","dashboardUrl","selectableStatusSummary","selectable","active","archived","targetable","activatable","Button","resetEngagement","window","open"],"mappings":"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"}
+{"version":3,"file":"GuideRowDetails.js","names":[],"sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/GuideRowDetails.tsx"],"sourcesContent":["import { useGuideContext } 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\";\n\nimport {\n  StatusColor,\n  GuideAnnotatedStatusDot as StatusDot,\n} from \"./GuideAnnotatedStatusDot\";\nimport { sharedTooltipProps } from \"./helpers\";\nimport {\n  AnnotatedGuide,\n  UncommittedGuide,\n  isUncommittedGuide,\n} from \"./useInspectGuideClientStore\";\n\nconst CardContainer = ({\n  title,\n  children,\n}: {\n  title: string;\n  children: React.ReactNode;\n}) => (\n  <Stack\n    direction=\"column\"\n    justify=\"flex-start\"\n    gap=\"1\"\n    px=\"1_5\"\n    py=\"1\"\n    rounded=\"2\"\n    bg=\"surface-1\"\n    border=\"px\"\n    borderColor=\"gray-4\"\n    style={{ flex: 1, alignSelf: \"stretch\" }}\n  >\n    <Text as=\"span\" size=\"0\" color=\"gray\" weight=\"medium\">\n      {title}\n    </Text>\n    <Stack direction=\"column\" gap=\"1\">\n      {children}\n    </Stack>\n  </Stack>\n);\n\nconst StatusRow = ({\n  label,\n  value,\n  color,\n  tooltip,\n  children,\n}: {\n  label: string;\n  value: string;\n  color: StatusColor;\n  tooltip?: React.ReactNode;\n  children?: React.ReactNode;\n}) => {\n  return (\n    <Stack align=\"center\" gap=\"1\">\n      <Tooltip enabled={!!tooltip} label={tooltip} {...sharedTooltipProps}>\n        <Stack align=\"center\" gap=\"1\" display=\"inline-flex\">\n          <StatusDot color={color} tooltip={`${label}: ${value}`} />\n          <Text as=\"span\" size=\"1\" weight=\"medium\">\n            {label}:\n          </Text>\n          {/* User children over value when provided, for cases when we want to\n              have its own tooltip over it */}\n          {!children && (\n            <Text as=\"span\" size=\"1\" weight=\"medium\" color={color}>\n              {value}\n            </Text>\n          )}\n        </Stack>\n      </Tooltip>\n      {children}\n    </Stack>\n  );\n};\n\nexport type StatusSummary = {\n  color: StatusColor;\n  label: string;\n  description: string;\n};\n\nexport const getSelectableStatusSummary = (\n  status: \"returned\" | \"throttled\" | \"queried\" | undefined,\n): StatusSummary => {\n  switch (status) {\n    case \"returned\":\n      return {\n        label: \"Ready to display\",\n        color: \"blue\",\n        description: \"The guide is queried and ready to render.\",\n      };\n    case \"throttled\":\n      return {\n        label: \"Throttled\",\n        color: \"yellow\",\n        description: \"The guide is queried but held back by throttle settings.\",\n      };\n    case \"queried\":\n      return {\n        label: \"Queued\",\n        color: \"gray\",\n        description:\n          \"The guide is queried but waiting behind higher-priority guides.\",\n      };\n    default:\n      return {\n        label: \"Not queried\",\n        color: \"red\",\n        description: \"No useGuide(s) call on this page matches this guide.\",\n      };\n  }\n};\n\nexport const GuideRowDetails = ({\n  guide,\n}: {\n  guide: AnnotatedGuide | UncommittedGuide;\n}) => {\n  const { client } = useGuideContext();\n\n  if (isUncommittedGuide(guide)) {\n    return (\n      <Box px=\"3\" py=\"2\">\n        <Text as=\"span\" size=\"1\" color=\"gray\">\n          This guide has never been committed and published.\n        </Text>\n      </Box>\n    );\n  }\n\n  const { annotation, dashboard_url: dashboardUrl } = guide;\n  const selectableStatusSummary = getSelectableStatusSummary(\n    annotation.selectable.status,\n  );\n\n  return (\n    <Stack p=\"1\" gap=\"2\" direction=\"row\" align=\"flex-start\">\n      <CardContainer title=\"Eligibility\">\n        <StatusRow\n          label=\"Active\"\n          value={annotation.active.status ? \"Yes\" : \"No\"}\n          color={annotation.active.status ? \"blue\" : \"red\"}\n          tooltip=\"Whether the guide is active in this environment.\"\n        />\n        <StatusRow\n          label=\"Archived\"\n          value={annotation.archived.status ? \"Yes\" : \"No\"}\n          color={annotation.archived.status ? \"red\" : \"blue\"}\n          tooltip=\"Whether the current user has dismissed this guide.\"\n        />\n        <StatusRow\n          label=\"Targeting\"\n          value={annotation.targetable.status ? \"Yes\" : \"No\"}\n          color={annotation.targetable.status ? \"blue\" : \"red\"}\n          tooltip=\"Whether the current user matches the guide's targeting conditions.\"\n        />\n      </CardContainer>\n      <CardContainer title=\"Visibility\">\n        <StatusRow\n          label=\"Activation\"\n          value={annotation.activatable.status ? \"Yes\" : \"No\"}\n          color={annotation.activatable.status ? \"blue\" : \"red\"}\n          tooltip=\"Whether the current page matches the guide's activation rules.\"\n        />\n        <StatusRow\n          label=\"Display\"\n          value={selectableStatusSummary.label}\n          color={selectableStatusSummary.color}\n          tooltip=\"Whether the guide has been queried and is ready to render on the current page.\"\n        >\n          <Tooltip\n            label={selectableStatusSummary.description}\n            {...sharedTooltipProps}\n          >\n            <Text\n              as=\"span\"\n              size=\"1\"\n              weight=\"medium\"\n              color={selectableStatusSummary.color}\n            >\n              {selectableStatusSummary.label}\n            </Text>\n          </Tooltip>\n        </StatusRow>\n      </CardContainer>\n      <Stack\n        direction=\"column\"\n        justify=\"flex-end\"\n        gap=\"1\"\n        style={{ alignSelf: \"stretch\" }}\n      >\n        <Button\n          size=\"0\"\n          variant=\"outline\"\n          onClick={() => client.resetEngagement(guide)}\n        >\n          Reset engagement\n        </Button>\n        {dashboardUrl && (\n          <Button\n            size=\"0\"\n            variant=\"outline\"\n            onClick={() => window.open(dashboardUrl, \"_blank\", \"noopener\")}\n          >\n            Open in dashboard\n          </Button>\n        )}\n      </Stack>\n    </Stack>\n  );\n};\n"],"mappings":"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"}

package/dist/cjs/modules/guide/components/Toolbar/V2/Kbd.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react");function a(e){if(e&&typeof e=="object"&&"default"in e)return e;const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,o.get?o:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const c=a(n),d=({children:e})=>c.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)"}},e);exports.Kbd=d;
-//# sourceMappingURL=Kbd.js.map
+"use strict";const e=require("../../../../../_virtual/_rolldown/runtime.js");let t=require("react");t=e.__toESM(t);let n=require("react/jsx-runtime");var r=({children:e})=>(0,n.jsx)(`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)`},children:e});exports.Kbd=r;
+//# sourceMappingURL=Kbd.js.map

package/dist/cjs/modules/guide/components/Toolbar/V2/Kbd.js.map

@@ -1 +1 @@
-{"version":3,"file":"Kbd.js","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":"obAEaA,EAAMA,CAAC,CAAEC,SAAAA,CAAwC,IAE1DC,EAAA,cAAC,OACC,MAAO,CACLC,QAAS,eACTC,QAAS,UACTC,aAAc,wBACdC,OAAQ,qCACRC,gBAAiB,8BAGlBN,CACH"}
+{"version":3,"file":"Kbd.js","names":[],"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"],"mappings":"sJAEA,IAAa,GAAO,CAAE,eAElB,EAAA,EAAA,IAAA,CAAC,MAAD,CACE,MAAO,CACL,QAAS,eACT,QAAS,UACT,aAAc,wBACd,OAAQ,qCACR,gBAAiB,2BACnB,EAEC,UACE,CAAA"}

package/dist/cjs/modules/guide/components/Toolbar/V2/V2.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const K=require("@knocklabs/client"),z=require("@knocklabs/react-core"),S=require("@telegraph/button"),A=require("@telegraph/icon"),o=require("@telegraph/layout"),p=require("@telegraph/segmented-control"),k=require("@telegraph/tooltip"),w=require("@telegraph/typography"),c=require("lucide-react"),L=require("react"),H=require("../KnockButton.js"),V=require("../shared.js");;/* empty css             */const j=require("../useToolbarStyles.js"),M=require("./FocusChin.js"),F=require("./GuideContextDetails.js"),W=require("./GuideRow.js"),q=require("./Kbd.js"),C=require("./helpers.js"),Y=require("./useDraggable.js"),X=require("./useInspectGuideClientStore.js"),N=a=>a&&typeof a=="object"&&"default"in a?a:{default:a},e=N(L),Z=".",$="540px",J=["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(", "),Q=a=>{switch(a){case"all-guides":return"You have no guides. Get started by creating a guide.";case"only-active":return"There are no active guides.";case"only-eligible":return"Your current user is not eligible for any guides."}},T=(a,u)=>a.filter(l=>!(u==="only-eligible"&&!l.annotation.isEligible||u==="only-active"&&!l.annotation.active.status)),U=({readyToTarget:a,listenForUpdates:u})=>{const{client:l}=z.useGuideContext(),[d,b]=e.default.useState("only-active"),[i,B]=e.default.useState(()=>K.KnockGuideClient.getToolbarRunConfigFromUrl()),[D,m]=e.default.useState(!1),[f,P]=e.default.useState(!1),[_,v]=e.default.useState();j.useToolbarStyles(!!(i!=null&&i.isVisible)),e.default.useEffect(()=>{v(void 0)},[d]),e.default.useEffect(()=>{var h;const{isVisible:t=!1,focusedGuideKeys:n={}}=i||{},s=(h=l.store.state.debug)==null?void 0:h.debugging;return t&&!s&&a&&(l.setDebug({focusedGuideKeys:n}),Object.keys(n).length>0&&b("all-guides")),!t&&s&&l.unsetDebug({listenForUpdates:u}),()=>{var g;(g=l.store.state.debug)!=null&&g.debugging&&l.unsetDebug({listenForUpdates:u})}},[a,u,i,l,b]),e.default.useEffect(()=>{const t=n=>{n.ctrlKey&&n.key===Z&&!n.repeat&&(n.preventDefault(),m(s=>!s))};return window.addEventListener("keydown",t),()=>{window.removeEventListener("keydown",t)}},[]);const G=e.default.useRef(null),O=e.default.useRef(null),{position:R,isDragging:y,handlePointerDown:x,hasDraggedRef:I}=Y.useDraggable({elementRef:G,reclampDeps:[D],initialPosition:{top:16,right:16}}),r=X.useInspectGuideClientStore(i);if(!r||!(i!=null&&i.isVisible))return null;const E=r.status==="ok"?T(r.guides,d):[];return e.default.createElement(o.Box,{tgphRef:G,position:"fixed",style:{top:R.top+"px",right:R.right+"px",zIndex:V.TOOLBAR_Z_INDEX}},D?e.default.createElement(k.Tooltip,{side:"left",label:e.default.createElement(w.Text,{as:"span",size:"1"},"Guide Toolbar",e.default.createElement(o.Stack,{display:"inline-block",ml:"3"},e.default.createElement(q.Kbd,null,"ctrl")," + ",e.default.createElement(q.Kbd,null,"."))),...C.sharedTooltipProps},e.default.createElement(o.Stack,{border:"px",rounded:"4",align:"center",justify:"center",w:"10",h:"10",onPointerDown:x,backgroundColor:"surface-1",style:{cursor:y?"grabbing":"grab",touchAction:"none",userSelect:"none",animation:"toolbar-collapse-fade-in 150ms ease-out"}},e.default.createElement(o.Box,{style:{transform:"scale(0.7)",transformOrigin:"center center"}},e.default.createElement(H.KnockButton,{onClick:()=>{I.current||m(!1)},positioned:!1})))):e.default.createElement(o.Stack,{direction:"column",backgroundColor:"surface-1",rounded:"4",overflow:"hidden",style:{width:$,boxShadow:J,animation:"toolbar-expand-fade-in 150ms ease-out"}},e.default.createElement(o.Stack,{w:"full",p:"2",justify:"space-between",direction:"row",align:"center",gap:"2",borderBottom:"px",onPointerDown:x,style:{boxSizing:"border-box",cursor:y?"grabbing":"grab",touchAction:"none",userSelect:"none"}},e.default.createElement(o.Stack,{align:"center",gap:"1_5",style:{minWidth:0,flex:1}},e.default.createElement(o.Stack,{display:"inline-flex",align:"center",style:{cursor:y?"grabbing":"grab",touchAction:"none",userSelect:"none"},onPointerDown:t=>{t.stopPropagation(),x(t)}},e.default.createElement(A.Icon,{color:"gray",size:"1",icon:c.GripVertical,"aria-hidden":!0})),e.default.createElement(o.Stack,{align:"center",gap:"1_5",onPointerDown:t=>t.stopPropagation()},e.default.createElement(p.SegmentedControl.Root,{size:"1",type:"single",value:d,onValueChange:t=>{if(!t)return;const n=l.store.state.debug,s=Object.keys((n==null?void 0:n.focusedGuideKeys)||{});r.status==="ok"&&s.length>0&&(T(r.guides,t).find(g=>g.key===s[0])||l.setDebug({...n,focusedGuideKeys:{}})),b(t)}},e.default.createElement(p.SegmentedControl.Option,{value:"all-guides",style:{width:"54px"}},"All"),e.default.createElement(p.SegmentedControl.Option,{value:"only-active",style:{width:"54px"}},"Active"),e.default.createElement(p.SegmentedControl.Option,{value:"only-eligible",style:{width:"54px"}},"Eligible")),e.default.createElement(k.Tooltip,{label:"Settings",...C.sharedTooltipProps},e.default.createElement(S.Button,{size:"1",variant:f?"outline":"ghost",color:f?"blue":"gray",leadingIcon:{icon:c.SlidersHorizontal,alt:"Inspect target params"},trailingIcon:f?{icon:c.ChevronDown,alt:"Hide context data"}:{icon:c.ChevronRight,alt:"Show context data"},onClick:()=>P(t=>!t)})))),e.default.createElement(o.Stack,{align:"center",gap:"1_5",style:{flexShrink:0},onPointerDown:t=>t.stopPropagation()},e.default.createElement(o.Stack,{align:"center",gap:"1_5"},e.default.createElement(S.Button,{size:"1",variant:"outline",leadingIcon:{icon:c.LogOut,alt:"Exit"},onClick:()=>{B(t=>({...t,isVisible:!1}))}},"Exit"),e.default.createElement(k.Tooltip,{label:"Minimize toolbar",...C.sharedTooltipProps},e.default.createElement(S.Button,{size:"1",variant:"outline",leadingIcon:{icon:c.Minimize2,alt:"Minimize"},onClick:()=>m(!0)}))))),f&&e.default.createElement(o.Box,{borderBottom:"px"},e.default.createElement(F.GuideContextDetails,null)),e.default.createElement(o.Box,{tgphRef:O,p:"1",overflow:"auto",style:{maxHeight:"calc(80vh - 96px)"}},r.status==="error"?e.default.createElement(o.Box,{px:"2",pb:"1",style:{lineHeight:"1.2"}},e.default.createElement(w.Text,{as:"span",size:"1",weight:"medium",color:r.error==="no_guides_fetched"?"default":"red"},r.message)):E.length===0?e.default.createElement(o.Box,{px:"2",pb:"1",style:{lineHeight:"1.2"}},e.default.createElement(w.Text,{as:"span",size:"1",weight:"medium",color:"default"},Q(d))):E.map(t=>e.default.createElement(W.GuideRow,{key:t.key,guide:t,orderIndex:t.orderIndex,isExpanded:t.key===_,onClick:()=>{v(n=>n&&n===t.key?void 0:t.key)}}))),e.default.createElement(M.FocusChin,{guides:E,guideListRef:O})))};exports.V2=U;
-//# sourceMappingURL=V2.js.map
+"use strict";const e=require("../../../../../_virtual/_rolldown/runtime.js"),t=require("../shared.js");;/* empty css         */const n=require("../KnockButton.js"),r=require("../useToolbarStyles.js"),i=require("./helpers.js"),a=require("./useInspectGuideClientStore.js"),o=require("./GuideRow.js"),s=require("./Kbd.js"),c=require("./FocusChin.js"),l=require("./GuideContextDetails.js"),u=require("./useDraggable.js");let d=require("@knocklabs/react-core"),f=require("react");f=e.__toESM(f);let p=require("react/jsx-runtime"),m=require("@knocklabs/client"),h=require("@telegraph/button"),g=require("@telegraph/icon"),_=require("@telegraph/layout"),v=require("@telegraph/segmented-control"),y=require("@telegraph/tooltip"),b=require("@telegraph/typography"),x=require("lucide-react");var S=`.`,C=`540px`,w=[`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(`, `),T=e=>{switch(e){case`all-guides`:return`You have no guides. Get started by creating a guide.`;case`only-active`:return`There are no active guides.`;case`only-eligible`:return`Your current user is not eligible for any guides.`}},E=(e,t)=>e.filter(e=>!(t===`only-eligible`&&!e.annotation.isEligible||t===`only-active`&&!e.annotation.active.status)),D=({readyToTarget:e,listenForUpdates:D})=>{let{client:O}=(0,d.useGuideContext)(),[k,A]=f.default.useState(`only-active`),[j,M]=f.default.useState(()=>m.KnockGuideClient.getToolbarRunConfigFromUrl()),[N,P]=f.default.useState(!1),[F,I]=f.default.useState(!1),[L,R]=f.default.useState();r.useToolbarStyles(!!j?.isVisible),f.default.useEffect(()=>{R(void 0)},[k]),f.default.useEffect(()=>{let{isVisible:t=!1,focusedGuideKeys:n={}}=j||{},r=O.store.state.debug?.debugging;return t&&!r&&e&&(O.setDebug({focusedGuideKeys:n}),Object.keys(n).length>0&&A(`all-guides`)),!t&&r&&O.unsetDebug({listenForUpdates:D}),()=>{O.store.state.debug?.debugging&&O.unsetDebug({listenForUpdates:D})}},[e,D,j,O,A]),f.default.useEffect(()=>{let e=e=>{e.ctrlKey&&e.key===S&&!e.repeat&&(e.preventDefault(),P(e=>!e))};return window.addEventListener(`keydown`,e),()=>{window.removeEventListener(`keydown`,e)}},[]);let z=f.default.useRef(null),B=f.default.useRef(null),{position:V,isDragging:H,handlePointerDown:U,hasDraggedRef:W}=u.useDraggable({elementRef:z,reclampDeps:[N],initialPosition:{top:16,right:16}}),G=a.useInspectGuideClientStore(j);if(!G||!j?.isVisible)return null;let K=G.status===`ok`?E(G.guides,k):[];return(0,p.jsx)(_.Box,{tgphRef:z,position:`fixed`,style:{top:V.top+`px`,right:V.right+`px`,zIndex:t.TOOLBAR_Z_INDEX},children:N?(0,p.jsx)(y.Tooltip,{side:`left`,label:(0,p.jsxs)(b.Text,{as:`span`,size:`1`,children:[`Guide Toolbar`,(0,p.jsxs)(_.Stack,{display:`inline-block`,ml:`3`,children:[(0,p.jsx)(s.Kbd,{children:`ctrl`}),` + `,(0,p.jsx)(s.Kbd,{children:`.`})]})]}),...i.sharedTooltipProps,children:(0,p.jsx)(_.Stack,{border:`px`,rounded:`4`,align:`center`,justify:`center`,w:`10`,h:`10`,onPointerDown:U,backgroundColor:`surface-1`,style:{cursor:H?`grabbing`:`grab`,touchAction:`none`,userSelect:`none`,animation:`toolbar-collapse-fade-in 150ms ease-out`},children:(0,p.jsx)(_.Box,{style:{transform:`scale(0.7)`,transformOrigin:`center center`},children:(0,p.jsx)(n.KnockButton,{onClick:()=>{W.current||P(!1)},positioned:!1})})})}):(0,p.jsxs)(_.Stack,{direction:`column`,backgroundColor:`surface-1`,rounded:`4`,overflow:`hidden`,style:{width:C,boxShadow:w,animation:`toolbar-expand-fade-in 150ms ease-out`},children:[(0,p.jsxs)(_.Stack,{w:`full`,p:`2`,justify:`space-between`,direction:`row`,align:`center`,gap:`2`,borderBottom:`px`,onPointerDown:U,style:{boxSizing:`border-box`,cursor:H?`grabbing`:`grab`,touchAction:`none`,userSelect:`none`},children:[(0,p.jsxs)(_.Stack,{align:`center`,gap:`1_5`,style:{minWidth:0,flex:1},children:[(0,p.jsx)(_.Stack,{display:`inline-flex`,align:`center`,style:{cursor:H?`grabbing`:`grab`,touchAction:`none`,userSelect:`none`},onPointerDown:e=>{e.stopPropagation(),U(e)},children:(0,p.jsx)(g.Icon,{color:`gray`,size:`1`,icon:x.GripVertical,"aria-hidden":!0})}),(0,p.jsxs)(_.Stack,{align:`center`,gap:`1_5`,onPointerDown:e=>e.stopPropagation(),children:[(0,p.jsxs)(v.SegmentedControl.Root,{size:`1`,type:`single`,value:k,onValueChange:e=>{if(!e)return;let t=O.store.state.debug,n=Object.keys(t?.focusedGuideKeys||{});G.status===`ok`&&n.length>0&&(E(G.guides,e).find(e=>e.key===n[0])||O.setDebug({...t,focusedGuideKeys:{}})),A(e)},children:[(0,p.jsx)(v.SegmentedControl.Option,{value:`all-guides`,style:{width:`54px`},children:`All`}),(0,p.jsx)(v.SegmentedControl.Option,{value:`only-active`,style:{width:`54px`},children:`Active`}),(0,p.jsx)(v.SegmentedControl.Option,{value:`only-eligible`,style:{width:`54px`},children:`Eligible`})]}),(0,p.jsx)(y.Tooltip,{label:`Settings`,...i.sharedTooltipProps,children:(0,p.jsx)(h.Button,{size:`1`,variant:F?`outline`:`ghost`,color:F?`blue`:`gray`,leadingIcon:{icon:x.SlidersHorizontal,alt:`Inspect target params`},trailingIcon:F?{icon:x.ChevronDown,alt:`Hide context data`}:{icon:x.ChevronRight,alt:`Show context data`},onClick:()=>I(e=>!e)})})]})]}),(0,p.jsx)(_.Stack,{align:`center`,gap:`1_5`,style:{flexShrink:0},onPointerDown:e=>e.stopPropagation(),children:(0,p.jsxs)(_.Stack,{align:`center`,gap:`1_5`,children:[(0,p.jsx)(h.Button,{size:`1`,variant:`outline`,leadingIcon:{icon:x.LogOut,alt:`Exit`},onClick:()=>{M(e=>({...e,isVisible:!1}))},children:`Exit`}),(0,p.jsx)(y.Tooltip,{label:`Minimize toolbar`,...i.sharedTooltipProps,children:(0,p.jsx)(h.Button,{size:`1`,variant:`outline`,leadingIcon:{icon:x.Minimize2,alt:`Minimize`},onClick:()=>P(!0)})})]})})]}),F&&(0,p.jsx)(_.Box,{borderBottom:`px`,children:(0,p.jsx)(l.GuideContextDetails,{})}),(0,p.jsx)(_.Box,{tgphRef:B,p:`1`,overflow:`auto`,style:{maxHeight:`calc(80vh - 96px)`},children:G.status===`error`?(0,p.jsx)(_.Box,{px:`2`,pb:`1`,style:{lineHeight:`1.2`},children:(0,p.jsx)(b.Text,{as:`span`,size:`1`,weight:`medium`,color:G.error===`no_guides_fetched`?`default`:`red`,children:G.message})}):K.length===0?(0,p.jsx)(_.Box,{px:`2`,pb:`1`,style:{lineHeight:`1.2`},children:(0,p.jsx)(b.Text,{as:`span`,size:`1`,weight:`medium`,color:`default`,children:T(k)})}):K.map(e=>(0,p.jsx)(o.GuideRow,{guide:e,orderIndex:e.orderIndex,isExpanded:e.key===L,onClick:()=>{R(t=>t&&t===e.key?void 0:e.key)}},e.key))}),(0,p.jsx)(c.FocusChin,{guides:K,guideListRef:B})]})})};exports.V2=D;
+//# sourceMappingURL=V2.js.map