@knocklabs/react 0.11.5 → 0.11.7

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

@@ -1 +1 @@
-{"version":3,"file":"V2.mjs","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/V2.tsx"],"sourcesContent":["import { useGuideContext } from \"@knocklabs/react-core\";\nimport { Button } from \"@telegraph/button\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport { Text } from \"@telegraph/typography\";\nimport { Minimize2, Undo2 } from \"lucide-react\";\nimport React from \"react\";\n\nimport { KnockButton } from \"../KnockButton\";\nimport { TOOLBAR_Z_INDEX } from \"../shared\";\nimport \"../styles.css\";\n\nimport { DRAG_HANDLE_OVERHANG, DragHandle } from \"./DragHandle\";\nimport { GuideContextDetails } from \"./GuideContextDetails\";\nimport { GuideRow } from \"./GuideRow\";\nimport {\n  DisplayOption,\n  GuidesListDisplaySelect,\n} from \"./GuidesListDisplaySelect\";\nimport { detectToolbarParam } from \"./helpers\";\nimport { useDraggable } from \"./useDraggable\";\nimport {\n  InspectionResult,\n  useInspectGuideClientStore,\n} from \"./useInspectGuideClientStore\";\n\nconst GuidesList = ({\n  guides,\n  displayOption,\n}: {\n  guides: InspectionResult[\"guides\"];\n  displayOption: DisplayOption;\n}) => {\n  return guides.map((guide, idx) => {\n    const { isEligible, isQualified, selectable } = guide.annotation;\n    const isDisplayable = isEligible && isQualified;\n    const isDisplaying = isDisplayable && selectable.status === \"returned\";\n\n    if (displayOption === \"only-displaying\" && !isDisplaying) {\n      return null;\n    }\n    if (displayOption === \"only-displayable\" && !isDisplayable) {\n      return null;\n    }\n    if (displayOption === \"all-eligible\" && !isEligible) {\n      return null;\n    }\n\n    return <GuideRow key={guide.key} guide={guide} orderIndex={idx} />;\n  });\n};\n\nexport const V2 = () => {\n  const { client } = useGuideContext();\n\n  const [guidesListDisplayOption, setGuidesListDisplayOption] =\n    React.useState<DisplayOption>(\"only-displayable\");\n\n  const [isVisible, setIsVisible] = React.useState(detectToolbarParam());\n  const [isCollapsed, setIsCollapsed] = React.useState(true);\n\n  React.useEffect(() => {\n    if (!isVisible) {\n      return;\n    }\n\n    client.setDebug();\n\n    return () => {\n      client.unsetDebug();\n    };\n  }, [isVisible, client]);\n\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const { position, isDragging, handlePointerDown } = useDraggable({\n    elementRef: containerRef,\n    reclampDeps: [isCollapsed],\n    rightPadding: DRAG_HANDLE_OVERHANG,\n    initialPosition: { top: 16, right: 16 },\n  });\n\n  const result = useInspectGuideClientStore();\n  if (!result) {\n    return null;\n  }\n\n  return (\n    <Box\n      tgphRef={containerRef}\n      position=\"fixed\"\n      style={{\n        top: position.top + \"px\",\n        right: position.right + \"px\",\n        zIndex: TOOLBAR_Z_INDEX,\n      }}\n    >\n      <DragHandle onPointerDown={handlePointerDown} isDragging={isDragging} />\n      {isCollapsed ? (\n        <KnockButton onClick={() => setIsCollapsed(false)} positioned={false} />\n      ) : (\n        <Stack\n          direction=\"column\"\n          backgroundColor=\"surface-2\"\n          shadow=\"2\"\n          rounded=\"3\"\n          border=\"px\"\n          overflow=\"hidden\"\n          style={{ width: \"400px\" }}\n        >\n          <Stack\n            w=\"full\"\n            p=\"2\"\n            justify=\"space-between\"\n            direction=\"row\"\n            style={{ boxSizing: \"border-box\" }}\n          >\n            <Box style={{ width: \"220px\" }}>\n              <GuidesListDisplaySelect\n                value={guidesListDisplayOption}\n                onChange={(opt) => setGuidesListDisplayOption(opt)}\n              />\n            </Box>\n\n            <Stack gap=\"2\">\n              <Button\n                onClick={() => setIsVisible(false)}\n                size=\"1\"\n                variant=\"soft\"\n                trailingIcon={{ icon: Undo2, \"aria-hidden\": true }}\n              >\n                Exit\n              </Button>\n              <Button\n                onClick={() => setIsCollapsed(true)}\n                size=\"1\"\n                variant=\"soft\"\n                leadingIcon={{ icon: Minimize2, alt: \"Collapse guide toolbar\" }}\n              />\n            </Stack>\n          </Stack>\n\n          <Box w=\"full\">\n            <GuideContextDetails />\n            {result.error && (\n              <Box px=\"2\" pb=\"1\">\n                <Text as=\"span\" size=\"0\" weight=\"medium\" color=\"red\">\n                  {result.error}\n                </Text>\n              </Box>\n            )}\n            <GuidesList\n              guides={result.guides}\n              displayOption={guidesListDisplayOption}\n            />\n          </Box>\n        </Stack>\n      )}\n    </Box>\n  );\n};\n"],"names":["GuidesList","guides","displayOption","map","guide","idx","isEligible","isQualified","selectable","annotation","isDisplayable","isDisplaying","status","GuideRow","key","V2","client","useGuideContext","guidesListDisplayOption","setGuidesListDisplayOption","React","useState","isVisible","setIsVisible","detectToolbarParam","isCollapsed","setIsCollapsed","useEffect","setDebug","unsetDebug","containerRef","useRef","position","isDragging","handlePointerDown","useDraggable","elementRef","reclampDeps","rightPadding","DRAG_HANDLE_OVERHANG","initialPosition","top","right","result","useInspectGuideClientStore","Box","zIndex","TOOLBAR_Z_INDEX","DragHandle","KnockButton","Stack","width","boxSizing","GuidesListDisplaySelect","opt","Button","icon","Undo2","Minimize2","alt","GuideContextDetails","error","Text"],"mappings":"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"}
+{"version":3,"file":"V2.mjs","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/V2.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 { SegmentedControl } from \"@telegraph/segmented-control\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text } from \"@telegraph/typography\";\nimport {\n  Box as BoxIcon,\n  ChevronDown,\n  ChevronRight,\n  Gauge,\n  GripVertical,\n  LogOut,\n  Minimize2,\n  SlidersHorizontal,\n} from \"lucide-react\";\nimport React from \"react\";\n\nimport { KnockButton } from \"../KnockButton\";\nimport { TOOLBAR_Z_INDEX } from \"../shared\";\nimport \"../styles.css\";\n\nimport { GuideContextDetails } from \"./GuideContextDetails\";\nimport { GuideRow } from \"./GuideRow\";\nimport { clearRunConfigLS, getRunConfig } from \"./helpers\";\nimport { useDraggable } from \"./useDraggable\";\nimport {\n  InspectionResultOk,\n  useInspectGuideClientStore,\n} from \"./useInspectGuideClientStore\";\n\nconst TOOLBAR_WIDTH = \"540px\";\n\ntype DisplayOption = \"all-guides\" | \"only-eligible\" | \"only-displayable\";\n\nconst GuidesList = ({\n  guides,\n  displayOption,\n}: {\n  guides: InspectionResultOk[\"guides\"];\n  displayOption: DisplayOption;\n}) => {\n  const [expandedGuideRowKey, setExpandedGuideRowKey] = React.useState<\n    string | undefined\n  >();\n\n  React.useEffect(() => {\n    setExpandedGuideRowKey(undefined);\n  }, [displayOption]);\n\n  return guides.map((guide, idx) => {\n    const { isEligible, isQualified } = guide.annotation;\n    const isDisplayable = isEligible && isQualified;\n\n    if (displayOption === \"only-displayable\" && !isDisplayable) {\n      return null;\n    }\n    if (displayOption === \"only-eligible\" && !isEligible) {\n      return null;\n    }\n    return (\n      <GuideRow\n        key={guide.key}\n        guide={guide}\n        orderIndex={idx}\n        isExpanded={guide.key === expandedGuideRowKey}\n        onClick={() => {\n          setExpandedGuideRowKey((k) =>\n            k && k === guide.key ? undefined : guide.key,\n          );\n        }}\n      />\n    );\n  });\n};\n\nexport const V2 = () => {\n  const { client } = useGuideContext();\n\n  const [displayOption, setDisplayOption] =\n    React.useState<DisplayOption>(\"only-eligible\");\n  const [runConfig, setRunConfig] = React.useState(() => getRunConfig());\n  const [isCollapsed, setIsCollapsed] = React.useState(false);\n  const [isContextPanelOpen, setIsContextPanelOpen] = React.useState(false);\n\n  const { debugSettings } = useStore(client.store, (state) => ({\n    debugSettings: state.debug || {},\n  }));\n\n  React.useEffect(() => {\n    const { isVisible = false, focusedGuideKeys = {} } = runConfig || {};\n    const isDebugging = client.store.state.debug?.debugging;\n    if (isVisible && !isDebugging) {\n      client.setDebug({ focusedGuideKeys });\n\n      // If focused, switch to all guides so you can see in the list.\n      if (Object.keys(focusedGuideKeys).length > 0) {\n        setDisplayOption(\"all-guides\");\n      }\n    }\n\n    return () => {\n      client.unsetDebug();\n    };\n  }, [runConfig, client, setDisplayOption]);\n\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const { position, isDragging, handlePointerDown, hasDraggedRef } =\n    useDraggable({\n      elementRef: containerRef,\n      reclampDeps: [isCollapsed],\n      initialPosition: { top: 16, right: 16 },\n    });\n\n  const result = useInspectGuideClientStore(runConfig);\n  if (!result || !runConfig?.isVisible) {\n    return null;\n  }\n\n  return (\n    <Box\n      tgphRef={containerRef}\n      position=\"fixed\"\n      style={{\n        top: position.top + \"px\",\n        right: position.right + \"px\",\n        zIndex: TOOLBAR_Z_INDEX,\n      }}\n    >\n      {isCollapsed ? (\n        <Stack\n          border=\"px\"\n          rounded=\"4\"\n          align=\"center\"\n          justify=\"center\"\n          w=\"10\"\n          h=\"10\"\n          onPointerDown={handlePointerDown}\n          backgroundColor=\"surface-1\"\n          style={{\n            cursor: isDragging ? \"grabbing\" : \"grab\",\n            touchAction: \"none\",\n            userSelect: \"none\",\n          }}\n        >\n          <Box\n            style={{\n              transform: \"scale(0.7)\",\n              transformOrigin: \"center center\",\n            }}\n          >\n            <KnockButton\n              onClick={() => {\n                if (!hasDraggedRef.current) {\n                  setIsCollapsed(false);\n                }\n              }}\n              positioned={false}\n            />\n          </Box>\n        </Stack>\n      ) : (\n        <Stack\n          direction=\"column\"\n          backgroundColor=\"surface-1\"\n          rounded=\"4\"\n          border=\"px\"\n          overflow=\"hidden\"\n          style={{\n            width: TOOLBAR_WIDTH,\n            boxShadow: \"0 8px 32px var(--tgph-gray-5)\",\n          }}\n        >\n          {/* Header — also acts as drag handle area */}\n          <Stack\n            w=\"full\"\n            p=\"2\"\n            justify=\"space-between\"\n            direction=\"row\"\n            align=\"center\"\n            gap=\"2\"\n            borderBottom=\"px\"\n            onPointerDown={handlePointerDown}\n            style={{\n              boxSizing: \"border-box\",\n              cursor: isDragging ? \"grabbing\" : \"grab\",\n              touchAction: \"none\",\n              userSelect: \"none\",\n            }}\n          >\n            {/* Left: drag icon + segmented control + settings */}\n            <Stack align=\"center\" gap=\"1_5\" style={{ minWidth: 0, flex: 1 }}>\n              <Stack\n                display=\"inline-flex\"\n                align=\"center\"\n                style={{\n                  cursor: isDragging ? \"grabbing\" : \"grab\",\n                  touchAction: \"none\",\n                  userSelect: \"none\",\n                }}\n                onPointerDown={(e: React.PointerEvent) => {\n                  // Already handled by parent, prevent double-fire\n                  e.stopPropagation();\n                  handlePointerDown(e);\n                }}\n              >\n                <Icon color=\"gray\" size=\"1\" icon={GripVertical} aria-hidden />\n              </Stack>\n              <Stack\n                align=\"center\"\n                gap=\"1_5\"\n                onPointerDown={(e: React.PointerEvent) => e.stopPropagation()}\n              >\n                <SegmentedControl.Root\n                  size=\"1\"\n                  type=\"single\"\n                  value={displayOption}\n                  onValueChange={(val: DisplayOption) => {\n                    if (!val) return;\n                    setDisplayOption(val);\n                  }}\n                >\n                  <SegmentedControl.Option value=\"all-guides\">\n                    All guides\n                  </SegmentedControl.Option>\n                  <SegmentedControl.Option value=\"only-eligible\">\n                    Eligible\n                  </SegmentedControl.Option>\n                  <SegmentedControl.Option value=\"only-displayable\">\n                    On this page\n                  </SegmentedControl.Option>\n                </SegmentedControl.Root>\n\n                <Tooltip label=\"Sandbox: Contain engagement actions to client side only\">\n                  <Button\n                    size=\"1\"\n                    variant={\n                      debugSettings.skipEngagementTracking ? \"outline\" : \"ghost\"\n                    }\n                    color={\n                      debugSettings.skipEngagementTracking ? \"blue\" : \"gray\"\n                    }\n                    icon={{ icon: BoxIcon, alt: \"Sandbox mode\" }}\n                    onClick={() => {\n                      client.setDebug({\n                        ...debugSettings,\n                        skipEngagementTracking:\n                          !debugSettings.skipEngagementTracking,\n                      });\n                    }}\n                  />\n                </Tooltip>\n\n                <Tooltip label=\"Ignore throttle: Show next guide immediately\">\n                  <Button\n                    size=\"1\"\n                    variant={\n                      debugSettings.ignoreDisplayInterval ? \"outline\" : \"ghost\"\n                    }\n                    color={\n                      debugSettings.ignoreDisplayInterval ? \"blue\" : \"gray\"\n                    }\n                    icon={{ icon: Gauge, alt: \"Ignore throttle\" }}\n                    onClick={() => {\n                      client.setDebug({\n                        ...debugSettings,\n                        ignoreDisplayInterval:\n                          !debugSettings.ignoreDisplayInterval,\n                      });\n                    }}\n                  />\n                </Tooltip>\n\n                <Tooltip label=\"Inspect target params\">\n                  <Button\n                    size=\"1\"\n                    variant={isContextPanelOpen ? \"outline\" : \"ghost\"}\n                    color={isContextPanelOpen ? \"blue\" : \"gray\"}\n                    leadingIcon={{\n                      icon: SlidersHorizontal,\n                      alt: \"Inspect target params\",\n                    }}\n                    trailingIcon={\n                      isContextPanelOpen\n                        ? { icon: ChevronDown, alt: \"Hide context data\" }\n                        : { icon: ChevronRight, alt: \"Show context data\" }\n                    }\n                    onClick={() => setIsContextPanelOpen((v) => !v)}\n                  />\n                </Tooltip>\n              </Stack>\n            </Stack>\n\n            {/* Right: exit + minimize buttons */}\n            <Stack\n              align=\"center\"\n              gap=\"1_5\"\n              style={{ flexShrink: 0 }}\n              onPointerDown={(e: React.PointerEvent) => e.stopPropagation()}\n            >\n              <Stack align=\"center\" gap=\"1_5\">\n                <Button\n                  size=\"1\"\n                  variant=\"outline\"\n                  leadingIcon={{ icon: LogOut, alt: \"Exit\" }}\n                  onClick={() => {\n                    setRunConfig((curr) => ({ ...curr, isVisible: false }));\n                    clearRunConfigLS();\n                    client.unsetDebug();\n                  }}\n                >\n                  Exit\n                </Button>\n                <Tooltip label=\"Minimize toolbar\">\n                  <Button\n                    size=\"1\"\n                    variant=\"outline\"\n                    leadingIcon={{ icon: Minimize2, alt: \"Minimize\" }}\n                    onClick={() => setIsCollapsed(true)}\n                  />\n                </Tooltip>\n              </Stack>\n            </Stack>\n          </Stack>\n\n          {/* Collapsible panel to show context data */}\n          {isContextPanelOpen && (\n            <Box borderBottom=\"px\">\n              <GuideContextDetails />\n            </Box>\n          )}\n\n          {/* Guide list content area */}\n          <Box p=\"1\" overflow=\"auto\" style={{ maxHeight: \"calc(80vh - 96px)\" }}>\n            {result.status === \"error\" ? (\n              <Box px=\"2\" pb=\"1\">\n                <Text\n                  as=\"span\"\n                  size=\"1\"\n                  weight=\"medium\"\n                  color={\n                    result.error === \"no_guides_fetched\" ? \"default\" : \"red\"\n                  }\n                >\n                  {result.message}\n                </Text>\n              </Box>\n            ) : (\n              <GuidesList\n                guides={result.guides}\n                displayOption={displayOption}\n              />\n            )}\n          </Box>\n        </Stack>\n      )}\n    </Box>\n  );\n};\n"],"names":["TOOLBAR_WIDTH","GuidesList","guides","displayOption","expandedGuideRowKey","setExpandedGuideRowKey","React","useState","useEffect","undefined","map","guide","idx","isEligible","isQualified","annotation","GuideRow","key","k","V2","client","useGuideContext","setDisplayOption","runConfig","setRunConfig","getRunConfig","isCollapsed","setIsCollapsed","isContextPanelOpen","setIsContextPanelOpen","debugSettings","useStore","store","state","debug","isVisible","focusedGuideKeys","isDebugging","debugging","setDebug","Object","keys","length","unsetDebug","containerRef","useRef","position","isDragging","handlePointerDown","hasDraggedRef","useDraggable","elementRef","reclampDeps","initialPosition","top","right","result","useInspectGuideClientStore","Box","zIndex","TOOLBAR_Z_INDEX","Stack","cursor","touchAction","userSelect","transform","transformOrigin","KnockButton","current","width","boxShadow","boxSizing","minWidth","flex","e","stopPropagation","Icon","GripVertical","SegmentedControl","val","Tooltip","Button","skipEngagementTracking","icon","BoxIcon","alt","ignoreDisplayInterval","Gauge","SlidersHorizontal","ChevronDown","ChevronRight","v","flexShrink","LogOut","curr","clearRunConfigLS","Minimize2","GuideContextDetails","maxHeight","status","Text","error","message"],"mappings":"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"}

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

@@ -2,12 +2,49 @@ import "@knocklabs/react-core";
 import "react";
 /* empty css                                             */
 import "lodash.debounce";
-import { checkForWindow as o } from "../../../../core/utils.mjs";
-const a = "knock_guide_toolbar", l = () => {
-  const r = o();
-  return !r || !r.location ? !1 : new URLSearchParams(r.location.search).get(a) === "true";
+import { checkForWindow as e } from "../../../../core/utils.mjs";
+const s = "knock_guide_toolbar", l = "focused_guide_key", n = "knock_guide_debug", R = () => {
+  const t = {
+    isVisible: !1
+  }, o = e();
+  if (!o || !o.location)
+    return t;
+  const c = new URLSearchParams(o.location.search), i = c.get(s), a = c.get(l);
+  if (i !== null) {
+    const r = {
+      isVisible: i === "true"
+    };
+    return a && (r.focusedGuideKeys = {
+      [a]: !0
+    }), u(r), r;
+  }
+  return g() || t;
+}, u = (t) => {
+  const o = e();
+  if (!(!o || !o.localStorage))
+    try {
+      o.localStorage.setItem(n, JSON.stringify(t));
+    } catch {
+    }
+}, g = () => {
+  const t = e();
+  if (!(!t || !t.localStorage))
+    try {
+      const o = t.localStorage.getItem(n);
+      if (o)
+        return JSON.parse(o);
+    } catch {
+    }
+}, h = () => {
+  const t = e();
+  if (!(!t || !t.localStorage))
+    try {
+      t.localStorage.removeItem(n);
+    } catch {
+    }
 };
 export {
-  l as detectToolbarParam
+  h as clearRunConfigLS,
+  R as getRunConfig
 };
 //# sourceMappingURL=helpers.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"helpers.mjs","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/helpers.ts"],"sourcesContent":["import { checkForWindow } from \"../../../../../modules/core\";\n\n// Use this param to start Toolbar and enter into a debugging session when\n// it is present and set to true.\nconst TOOLBAR_QUERY_PARAM = \"knock_guide_toolbar\";\n\nexport const detectToolbarParam = () => {\n  const win = checkForWindow();\n  if (!win || !win.location) {\n    return false;\n  }\n\n  const urlSearchParams = new URLSearchParams(win.location.search);\n  const hasToolbarParam = urlSearchParams.get(TOOLBAR_QUERY_PARAM) === \"true\";\n\n  return hasToolbarParam;\n};\n"],"names":["TOOLBAR_QUERY_PARAM","detectToolbarParam","win","checkForWindow","location","URLSearchParams","search","get"],"mappings":";;;;;AAIA,MAAMA,IAAsB,uBAEfC,IAAqBA,MAAM;AACtC,QAAMC,IAAMC,EAAe;AAC3B,SAAI,CAACD,KAAO,CAACA,EAAIE,WACR,KAGe,IAAIC,gBAAgBH,EAAIE,SAASE,MAAM,EACvBC,IAAIP,CAAmB,MAAM;AAGvE;"}
+{"version":3,"file":"helpers.mjs","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/helpers.ts"],"sourcesContent":["import { KnockGuide } from \"@knocklabs/client\";\n\nimport { checkForWindow } from \"../../../../../modules/core\";\n\n// Use this param to start Toolbar and enter into a debugging session when\n// it is present and set to true.\nconst TOOLBAR_QUERY_PARAM = \"knock_guide_toolbar\";\n\n// Optional, when present pin/focus on this guide.\nconst GUIDE_KEY_PARAM = \"focused_guide_key\";\n\n// Use this key to read and write the run config data.\nconst LOCAL_STORAGE_KEY = \"knock_guide_debug\";\n\nexport type ToolbarV2RunConfig = {\n  isVisible: boolean;\n  focusedGuideKeys?: Record<KnockGuide[\"key\"], true>;\n};\n\nexport const getRunConfig = (): ToolbarV2RunConfig => {\n  const fallback = { isVisible: false };\n\n  const win = checkForWindow();\n  if (!win || !win.location) {\n    return fallback;\n  }\n\n  const urlSearchParams = new URLSearchParams(win.location.search);\n  const toolbarParamValue = urlSearchParams.get(TOOLBAR_QUERY_PARAM);\n  const guideKeyParamValue = urlSearchParams.get(GUIDE_KEY_PARAM);\n\n  // If toolbar param detected in the URL, write to local storage before\n  // returning.\n  if (toolbarParamValue !== null) {\n    const config: ToolbarV2RunConfig = {\n      isVisible: toolbarParamValue === \"true\",\n    };\n    if (guideKeyParamValue) {\n      config.focusedGuideKeys = { [guideKeyParamValue]: true };\n    }\n\n    writeRunConfigLS(config);\n    return config;\n  }\n\n  // If not detected, check local storage for a persisted run config. If not\n  // present then fall back to a default config.\n  return readRunConfigLS() || fallback;\n};\n\nconst writeRunConfigLS = (config: ToolbarV2RunConfig) => {\n  const win = checkForWindow();\n  if (!win || !win.localStorage) return;\n\n  try {\n    win.localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(config));\n  } catch {\n    // localStorage may be unavailable (e.g. private browsing)\n  }\n};\n\nconst readRunConfigLS = (): ToolbarV2RunConfig | undefined => {\n  const win = checkForWindow();\n  if (!win || !win.localStorage) return undefined;\n\n  try {\n    const stored = win.localStorage.getItem(LOCAL_STORAGE_KEY);\n    if (stored) {\n      return JSON.parse(stored);\n    }\n  } catch {\n    // localStorage may be unavailable (e.g. private browsing)\n  }\n  return undefined;\n};\n\nexport const clearRunConfigLS = () => {\n  const win = checkForWindow();\n  if (!win || !win.localStorage) return;\n\n  try {\n    win.localStorage.removeItem(LOCAL_STORAGE_KEY);\n  } catch {\n    // localStorage may be unavailable (e.g. private browsing)\n  }\n};\n"],"names":["TOOLBAR_QUERY_PARAM","GUIDE_KEY_PARAM","LOCAL_STORAGE_KEY","getRunConfig","fallback","isVisible","win","checkForWindow","location","urlSearchParams","URLSearchParams","search","toolbarParamValue","get","guideKeyParamValue","config","focusedGuideKeys","writeRunConfigLS","readRunConfigLS","localStorage","setItem","JSON","stringify","stored","getItem","parse","clearRunConfigLS","removeItem"],"mappings":";;;;;AAMA,MAAMA,IAAsB,uBAGtBC,IAAkB,qBAGlBC,IAAoB,qBAObC,IAAeA,MAA0B;AACpD,QAAMC,IAAW;AAAA,IAAEC,WAAW;AAAA,EAAM,GAE9BC,IAAMC,EAAe;AAC3B,MAAI,CAACD,KAAO,CAACA,EAAIE;AACRJ,WAAAA;AAGT,QAAMK,IAAkB,IAAIC,gBAAgBJ,EAAIE,SAASG,MAAM,GACzDC,IAAoBH,EAAgBI,IAAIb,CAAmB,GAC3Dc,IAAqBL,EAAgBI,IAAIZ,CAAe;AAI9D,MAAIW,MAAsB,MAAM;AAC9B,UAAMG,IAA6B;AAAA,MACjCV,WAAWO,MAAsB;AAAA,IACnC;AACA,WAAIE,MACFC,EAAOC,mBAAmB;AAAA,MAAE,CAACF,CAAkB,GAAG;AAAA,IAAK,IAGzDG,EAAiBF,CAAM,GAChBA;AAAAA,EAAAA;AAKT,SAAOG,EAAqBd,KAAAA;AAC9B,GAEMa,IAAmBA,CAACF,MAA+B;AACvD,QAAMT,IAAMC,EAAe;AAC3B,MAAI,GAACD,KAAO,CAACA,EAAIa;AAEb,QAAA;AACFb,MAAAA,EAAIa,aAAaC,QAAQlB,GAAmBmB,KAAKC,UAAUP,CAAM,CAAC;AAAA,IAAA,QAC5D;AAAA,IAAA;AAGV,GAEMG,IAAkBA,MAAsC;AAC5D,QAAMZ,IAAMC,EAAe;AAC3B,MAAI,GAACD,KAAO,CAACA,EAAIa;AAEb,QAAA;AACF,YAAMI,IAASjB,EAAIa,aAAaK,QAAQtB,CAAiB;AACzD,UAAIqB;AACKF,eAAAA,KAAKI,MAAMF,CAAM;AAAA,IAC1B,QACM;AAAA,IAAA;AAIV,GAEaG,IAAmBA,MAAM;AACpC,QAAMpB,IAAMC,EAAe;AAC3B,MAAI,GAACD,KAAO,CAACA,EAAIa;AAEb,QAAA;AACEA,MAAAA,EAAAA,aAAaQ,WAAWzB,CAAiB;AAAA,IAAA,QACvC;AAAA,IAAA;AAGV;"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"useDraggable.mjs","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/useDraggable.ts"],"sourcesContent":["import React from \"react\";\n\n// NOTE: This hook was generated entirely with Claude then lightly touched up,\n// and the behavior works correctly from testing it manually in the browser.\n\ntype Position = { top: number; right: number };\n\ntype UseDraggableOptions = {\n  elementRef: React.RefObject<HTMLElement | null>;\n  initialPosition?: Position;\n  reclampDeps?: React.DependencyList;\n  /** Extra space to reserve beyond the element's right edge (px). */\n  rightPadding?: number;\n};\n\ntype UseDraggableReturn = {\n  position: Position;\n  isDragging: boolean;\n  handlePointerDown: (e: React.PointerEvent) => void;\n};\n\nconst DEFAULT_POSITION: Position = { top: 16, right: 16 };\n\n/**\n * @param rightPadding Extra space to reserve on the right edge (e.g. for a\n *   drag handle that protrudes beyond the element). The element's left edge\n *   is clamped so that `elementWidth + rightPadding` stays within the viewport.\n */\nexport function clampPosition(\n  pos: Position,\n  elementWidth: number,\n  elementHeight: number,\n  rightPadding = 0,\n): Position {\n  const viewportWidth = window.innerWidth;\n  const viewportHeight = window.innerHeight;\n\n  const totalWidth = elementWidth + rightPadding;\n  const left = viewportWidth - pos.right - elementWidth;\n  const clampedLeft = Math.max(0, Math.min(left, viewportWidth - totalWidth));\n  const clampedTop = Math.max(\n    0,\n    Math.min(pos.top, viewportHeight - elementHeight),\n  );\n  const clampedRight = viewportWidth - clampedLeft - elementWidth;\n\n  return { top: clampedTop, right: clampedRight };\n}\n\nexport function useDraggable({\n  elementRef,\n  initialPosition = DEFAULT_POSITION,\n  reclampDeps = [],\n  rightPadding = 0,\n}: UseDraggableOptions): UseDraggableReturn {\n  const [position, setPosition] = React.useState<Position>(initialPosition);\n  const [isDragging, setIsDragging] = React.useState(false);\n\n  const positionRef = React.useRef(position);\n  positionRef.current = position;\n\n  const startPointerRef = React.useRef({ x: 0, y: 0 });\n  const startPositionRef = React.useRef<Position>({ top: 0, right: 0 });\n  const rafIdRef = React.useRef<number | null>(null);\n  const isDraggingRef = React.useRef(false);\n  const cleanupListenersRef = React.useRef<(() => void) | null>(null);\n\n  const reclamp = React.useCallback(() => {\n    const el = elementRef.current;\n    if (!el) return;\n    const rect = el.getBoundingClientRect();\n    setPosition((prev) =>\n      clampPosition(prev, rect.width, rect.height, rightPadding),\n    );\n  }, [elementRef, rightPadding]);\n\n  // Stable pointerdown handler\n  const handlePointerDown = React.useCallback(\n    (e: React.PointerEvent) => {\n      e.preventDefault();\n      startPointerRef.current = { x: e.clientX, y: e.clientY };\n      startPositionRef.current = { ...positionRef.current };\n      isDraggingRef.current = true;\n      setIsDragging(true);\n\n      const onPointerMove = (moveEvent: PointerEvent) => {\n        if (!isDraggingRef.current) return;\n\n        if (rafIdRef.current !== null) return;\n\n        rafIdRef.current = requestAnimationFrame(() => {\n          rafIdRef.current = null;\n          if (!isDraggingRef.current) return;\n\n          const dx = moveEvent.clientX - startPointerRef.current.x;\n          const dy = moveEvent.clientY - startPointerRef.current.y;\n\n          const newPos: Position = {\n            top: startPositionRef.current.top + dy,\n            right: startPositionRef.current.right - dx,\n          };\n\n          const el = elementRef.current;\n          if (!el) return;\n          const rect = el.getBoundingClientRect();\n          const clamped = clampPosition(\n            newPos,\n            rect.width,\n            rect.height,\n            rightPadding,\n          );\n          setPosition(clamped);\n        });\n      };\n\n      const cleanup = () => {\n        isDraggingRef.current = false;\n        setIsDragging(false);\n        if (rafIdRef.current !== null) {\n          cancelAnimationFrame(rafIdRef.current);\n          rafIdRef.current = null;\n        }\n        document.removeEventListener(\"pointermove\", onPointerMove);\n        document.removeEventListener(\"pointerup\", onPointerUp);\n        cleanupListenersRef.current = null;\n      };\n\n      const onPointerUp = () => cleanup();\n\n      document.addEventListener(\"pointermove\", onPointerMove);\n      document.addEventListener(\"pointerup\", onPointerUp);\n      cleanupListenersRef.current = cleanup;\n    },\n    [elementRef, rightPadding],\n  );\n\n  // Cleanup on unmount\n  React.useEffect(() => {\n    return () => {\n      cleanupListenersRef.current?.();\n    };\n  }, []);\n\n  // Re-clamp on window resize\n  React.useEffect(() => {\n    const onResize = () => reclamp();\n    window.addEventListener(\"resize\", onResize);\n    return () => window.removeEventListener(\"resize\", onResize);\n  }, [reclamp]);\n\n  // Re-clamp when deps change (e.g. collapse toggle)\n  React.useEffect(() => {\n    const id = requestAnimationFrame(() => reclamp());\n    return () => cancelAnimationFrame(id);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, reclampDeps);\n\n  return { position, isDragging, handlePointerDown };\n}\n"],"names":["DEFAULT_POSITION","top","right","clampPosition","pos","elementWidth","elementHeight","rightPadding","viewportWidth","window","innerWidth","viewportHeight","innerHeight","totalWidth","left","clampedLeft","Math","max","min","clampedTop","clampedRight","useDraggable","elementRef","initialPosition","reclampDeps","position","setPosition","React","useState","isDragging","setIsDragging","positionRef","useRef","current","startPointerRef","x","y","startPositionRef","rafIdRef","isDraggingRef","cleanupListenersRef","reclamp","useCallback","el","rect","getBoundingClientRect","prev","width","height","handlePointerDown","e","preventDefault","clientX","clientY","onPointerMove","moveEvent","requestAnimationFrame","dx","dy","newPos","clamped","cleanup","cancelAnimationFrame","removeEventListener","onPointerUp","addEventListener","useEffect","onResize","id"],"mappings":"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"}
+{"version":3,"file":"useDraggable.mjs","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/useDraggable.ts"],"sourcesContent":["import React from \"react\";\n\n// NOTE: This hook was generated entirely with Claude then lightly touched up,\n// and the behavior works correctly from testing it manually in the browser.\n\ntype Position = { top: number; right: number };\n\ntype UseDraggableOptions = {\n  elementRef: React.RefObject<HTMLElement | null>;\n  initialPosition?: Position;\n  reclampDeps?: React.DependencyList;\n  /** Extra space to reserve beyond the element's right edge (px). */\n  rightPadding?: number;\n};\n\ntype UseDraggableReturn = {\n  position: Position;\n  isDragging: boolean;\n  handlePointerDown: (e: React.PointerEvent) => void;\n  /** True if the pointer moved beyond a small threshold during the last interaction. */\n  hasDraggedRef: React.RefObject<boolean>;\n};\n\nconst DEFAULT_POSITION: Position = { top: 16, right: 16 };\nconst DRAG_THRESHOLD = 5;\n\n/**\n * @param rightPadding Extra space to reserve on the right edge (e.g. for a\n *   drag handle that protrudes beyond the element). The element's left edge\n *   is clamped so that `elementWidth + rightPadding` stays within the viewport.\n */\nexport function clampPosition(\n  pos: Position,\n  elementWidth: number,\n  elementHeight: number,\n  rightPadding = 0,\n): Position {\n  const viewportWidth = window.innerWidth;\n  const viewportHeight = window.innerHeight;\n\n  const totalWidth = elementWidth + rightPadding;\n  const left = viewportWidth - pos.right - elementWidth;\n  const clampedLeft = Math.max(0, Math.min(left, viewportWidth - totalWidth));\n  const clampedTop = Math.max(\n    0,\n    Math.min(pos.top, viewportHeight - elementHeight),\n  );\n  const clampedRight = viewportWidth - clampedLeft - elementWidth;\n\n  return { top: clampedTop, right: clampedRight };\n}\n\nexport function useDraggable({\n  elementRef,\n  initialPosition = DEFAULT_POSITION,\n  reclampDeps = [],\n  rightPadding = 0,\n}: UseDraggableOptions): UseDraggableReturn {\n  const [position, setPosition] = React.useState<Position>(initialPosition);\n  const [isDragging, setIsDragging] = React.useState(false);\n\n  const positionRef = React.useRef(position);\n  positionRef.current = position;\n\n  const startPointerRef = React.useRef({ x: 0, y: 0 });\n  const startPositionRef = React.useRef<Position>({ top: 0, right: 0 });\n  const rafIdRef = React.useRef<number | null>(null);\n  const isDraggingRef = React.useRef(false);\n  const hasDraggedRef = React.useRef(false);\n  const cleanupListenersRef = React.useRef<(() => void) | null>(null);\n\n  const reclamp = React.useCallback(() => {\n    const el = elementRef.current;\n    if (!el) return;\n    const rect = el.getBoundingClientRect();\n    setPosition((prev) =>\n      clampPosition(prev, rect.width, rect.height, rightPadding),\n    );\n  }, [elementRef, rightPadding]);\n\n  // Stable pointerdown handler\n  const handlePointerDown = React.useCallback(\n    (e: React.PointerEvent) => {\n      e.preventDefault();\n      startPointerRef.current = { x: e.clientX, y: e.clientY };\n      startPositionRef.current = { ...positionRef.current };\n      isDraggingRef.current = true;\n      hasDraggedRef.current = false;\n      setIsDragging(true);\n\n      const onPointerMove = (moveEvent: PointerEvent) => {\n        if (!isDraggingRef.current) return;\n\n        const dx = moveEvent.clientX - startPointerRef.current.x;\n        const dy = moveEvent.clientY - startPointerRef.current.y;\n        if (!hasDraggedRef.current && Math.hypot(dx, dy) >= DRAG_THRESHOLD) {\n          hasDraggedRef.current = true;\n        }\n\n        if (rafIdRef.current !== null) return;\n\n        rafIdRef.current = requestAnimationFrame(() => {\n          rafIdRef.current = null;\n          if (!isDraggingRef.current) return;\n\n          const dx = moveEvent.clientX - startPointerRef.current.x;\n          const dy = moveEvent.clientY - startPointerRef.current.y;\n\n          const newPos: Position = {\n            top: startPositionRef.current.top + dy,\n            right: startPositionRef.current.right - dx,\n          };\n\n          const el = elementRef.current;\n          if (!el) return;\n          const rect = el.getBoundingClientRect();\n          const clamped = clampPosition(\n            newPos,\n            rect.width,\n            rect.height,\n            rightPadding,\n          );\n          setPosition(clamped);\n        });\n      };\n\n      const cleanup = () => {\n        isDraggingRef.current = false;\n        setIsDragging(false);\n        if (rafIdRef.current !== null) {\n          cancelAnimationFrame(rafIdRef.current);\n          rafIdRef.current = null;\n        }\n        document.removeEventListener(\"pointermove\", onPointerMove);\n        document.removeEventListener(\"pointerup\", onPointerUp);\n        cleanupListenersRef.current = null;\n      };\n\n      const onPointerUp = () => cleanup();\n\n      document.addEventListener(\"pointermove\", onPointerMove);\n      document.addEventListener(\"pointerup\", onPointerUp);\n      cleanupListenersRef.current = cleanup;\n    },\n    [elementRef, rightPadding],\n  );\n\n  // Cleanup on unmount\n  React.useEffect(() => {\n    return () => {\n      cleanupListenersRef.current?.();\n    };\n  }, []);\n\n  // Re-clamp on window resize\n  React.useEffect(() => {\n    const onResize = () => reclamp();\n    window.addEventListener(\"resize\", onResize);\n    return () => window.removeEventListener(\"resize\", onResize);\n  }, [reclamp]);\n\n  // Re-clamp when deps change (e.g. collapse toggle)\n  React.useEffect(() => {\n    const id = requestAnimationFrame(() => reclamp());\n    return () => cancelAnimationFrame(id);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, reclampDeps);\n\n  return { position, isDragging, handlePointerDown, hasDraggedRef };\n}\n"],"names":["DEFAULT_POSITION","top","right","DRAG_THRESHOLD","clampPosition","pos","elementWidth","elementHeight","rightPadding","viewportWidth","window","innerWidth","viewportHeight","innerHeight","totalWidth","left","clampedLeft","Math","max","min","clampedTop","clampedRight","useDraggable","elementRef","initialPosition","reclampDeps","position","setPosition","React","useState","isDragging","setIsDragging","positionRef","useRef","current","startPointerRef","x","y","startPositionRef","rafIdRef","isDraggingRef","hasDraggedRef","cleanupListenersRef","reclamp","useCallback","el","rect","getBoundingClientRect","prev","width","height","handlePointerDown","e","preventDefault","clientX","clientY","onPointerMove","moveEvent","dx","dy","hypot","requestAnimationFrame","newPos","clamped","cleanup","cancelAnimationFrame","removeEventListener","onPointerUp","addEventListener","useEffect","onResize","id"],"mappings":"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"}

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

@@ -3,103 +3,103 @@ import { useGuideContext as _, useStore as b } from "@knocklabs/react-core";
 const g = (e) => e.reduce((t, s) => ({
   ...t,
   [s.key]: s
-}), {}), v = (e, t, s, r) => {
-  var u, n, o, l, a, c, d, f;
-  const i = !!((l = (o = (n = (u = r.key) == null ? void 0 : u.one) == null ? void 0 : n.metadata) == null ? void 0 : o.opts) != null && l.includeThrottled) || !!((f = (d = (c = (a = r.key) == null ? void 0 : a.all) == null ? void 0 : c.metadata) == null ? void 0 : d.opts) != null && f.includeThrottled);
-  return e.bypass_global_group_limit ? "returned" : e.key === s.resolved ? t.throttled && !i ? "throttled" : "returned" : "queried";
-}, h = (e, t, s, r) => {
-  var n, o, l, a;
-  const i = !!((a = (l = (o = (n = r.type) == null ? void 0 : n.one) == null ? void 0 : o.metadata) == null ? void 0 : l.opts) != null && a.includeThrottled), u = r.type.one;
-  if (u.size === 0)
+}), {}), v = (e, t, s, n) => {
+  var r, o, i, d, u, l, c, f;
+  const a = !!((d = (i = (o = (r = n.key) == null ? void 0 : r.one) == null ? void 0 : o.metadata) == null ? void 0 : i.opts) != null && d.includeThrottled) || !!((f = (c = (l = (u = n.key) == null ? void 0 : u.all) == null ? void 0 : l.metadata) == null ? void 0 : c.opts) != null && f.includeThrottled);
+  return e.bypass_global_group_limit ? "returned" : e.key === s.resolved ? t.throttled && !a ? "throttled" : "returned" : "queried";
+}, h = (e, t, s, n) => {
+  var o, i, d, u;
+  const a = !!((u = (d = (i = (o = n.type) == null ? void 0 : o.one) == null ? void 0 : i.metadata) == null ? void 0 : d.opts) != null && u.includeThrottled), r = n.type.one;
+  if (r.size === 0)
     return "queried";
   if (e.bypass_global_group_limit) {
-    const d = [...u.values()][0];
-    return e.key !== d.key ? "queried" : "returned";
+    const c = [...r.values()][0];
+    return e.key !== c.key ? "queried" : "returned";
   }
-  return e.key === s.resolved ? t.throttled && !i ? "throttled" : "returned" : "queried";
-}, G = (e, t, s, r) => {
-  var a, c, d, f;
-  const i = r.type.all;
-  if (i.size === 0)
+  return e.key === s.resolved ? t.throttled && !a ? "throttled" : "returned" : "queried";
+}, G = (e, t, s, n) => {
+  var u, l, c, f;
+  const a = n.type.all;
+  if (a.size === 0)
     return "queried";
-  const u = [...i.values()], n = u[0], o = g(u);
-  return (f = (d = (c = (a = r.type) == null ? void 0 : a.all) == null ? void 0 : c.metadata) == null ? void 0 : d.opts) != null && f.includeThrottled ? o[e.key] ? "returned" : "queried" : (n.bypass_global_group_limit || n.key === s.resolved) && o[e.key] ? t.throttled ? e.bypass_global_group_limit ? "returned" : "throttled" : "returned" : "queried";
-}, S = (e, t, s, r) => {
-  var i, u;
-  if (r.key)
-    return v(e, t, s, r);
-  if ((i = r.type) != null && i.all)
-    return G(e, t, s, r);
-  if ((u = r.type) != null && u.one)
-    return h(e, t, s, r);
+  const r = [...a.values()], o = r[0], i = g(r);
+  return (f = (c = (l = (u = n.type) == null ? void 0 : u.all) == null ? void 0 : l.metadata) == null ? void 0 : c.opts) != null && f.includeThrottled ? i[e.key] ? "returned" : "queried" : (o.bypass_global_group_limit || o.key === s.resolved) && i[e.key] ? t.throttled ? e.bypass_global_group_limit ? "returned" : "throttled" : "returned" : "queried";
+}, S = (e, t, s, n) => {
+  var a, r;
+  if (n.key)
+    return v(e, t, s, n);
+  if ((a = n.type) != null && a.all)
+    return G(e, t, s, n);
+  if ((r = n.type) != null && r.one)
+    return h(e, t, s, n);
 }, T = (e, t, s) => {
   if (!s || s.status === "open")
     return {
       status: void 0
     };
-  const r = {
+  const n = {
     key: (s.results.key || {})[e.key],
     type: (s.results.type || {})[e.type]
   };
-  if (!!!(r.key || r.type))
+  if (!!!(n.key || n.type))
     return {
       status: void 0
     };
-  const u = S(e, t, s, r);
-  return u ? {
-    status: u,
-    query: r
+  const r = S(e, t, s, n);
+  return r ? {
+    status: r,
+    query: n
   } : {
     status: void 0
   };
-}, w = (e, t) => {
+}, q = (e, t) => {
   const s = {};
   return ((t == null ? void 0 : t.reason) === "not_in_target_audience" || (t == null ? void 0 : t.reason) === "target_conditions_not_met") && (s.targetable = {
     status: !1,
     reason: t.reason,
     message: t.message
-  }), ((t == null ? void 0 : t.reason) === "marked_as_archived" || (e.steps || []).every((r) => !!r.message.archived_at)) && (s.archived = {
+  }), ((t == null ? void 0 : t.reason) === "marked_as_archived" || (e.steps || []).every((n) => !!n.message.archived_at)) && (s.archived = {
     status: !0
   }), (t == null ? void 0 : t.reason) === "guide_not_active" && (s.active = {
     status: !1
   }), s;
-}, B = ({
+}, k = ({
   active: e,
   targetable: t,
   archived: s
-}) => !(!e.status || !t.status || s.status), I = ({
+}) => !(!e.status || !t.status || s.status), w = ({
   activatable: e,
   selectable: t
-}) => !(!e.status || !t.status), q = (e, t, s) => {
+}) => !(!e.status || !t.status), m = (e, t, s) => {
   const {
-    ineligibleGuides: r,
-    location: i
-  } = t, u = r[e.key], n = w(e, u), o = {
+    ineligibleGuides: n,
+    location: a
+  } = t, r = n[e.key], o = q(e, r), i = {
     // isEligible:
-    active: (n == null ? void 0 : n.active) || {
+    active: (o == null ? void 0 : o.active) || {
       status: !0
     },
-    targetable: (n == null ? void 0 : n.targetable) || {
+    targetable: (o == null ? void 0 : o.targetable) || {
       status: !0
     },
-    archived: (n == null ? void 0 : n.archived) || {
+    archived: (o == null ? void 0 : o.archived) || {
       status: !1
     },
     // isQualified:
     activatable: {
-      status: y(e, i)
+      status: y(e, a)
     },
     selectable: T(e, t, s)
-  }, l = {
-    ...o,
-    isEligible: B(o),
-    isQualified: I(o)
+  }, d = {
+    ...i,
+    isEligible: k(i),
+    isQualified: w(i)
   };
   return {
     ...e,
-    annotation: l
+    annotation: d
   };
-}, R = (e) => ({
+}, B = (e) => ({
   __typename: "UnknownGuide",
   key: e,
   active: !1,
@@ -111,41 +111,55 @@ const g = (e) => e.reduce((t, s) => ({
       status: void 0
     }
   }
-}), E = () => {
-  var u;
+}), R = (e) => {
+  var d;
   const {
-    client: e
-  } = _(), t = b(e.store, (n) => {
-    const o = p(n);
+    client: t
+  } = _(), s = b(t.store, (u) => {
+    const l = p(u);
     return {
-      location: n.location,
-      guides: n.guides,
-      guideGroups: n.guideGroups,
-      ineligibleGuides: n.ineligibleGuides,
-      debug: n.debug,
-      counter: n.counter,
-      throttled: o
+      location: u.location,
+      guides: u.guides,
+      guideGroups: u.guideGroups,
+      ineligibleGuides: u.ineligibleGuides,
+      debug: u.debug,
+      counter: u.counter,
+      queries: u.queries,
+      throttled: l
     };
   });
-  if (!((u = t.debug) != null && u.debugging))
+  if (!((d = s.debug) != null && d.debugging))
     return;
-  const s = t.guideGroups[0];
-  if (!s)
+  const n = Object.entries(s.queries)[0];
+  if (!n || n[1].status === "loading")
     return {
+      status: "error",
+      error: "no_guides_fetched",
+      message: "Loading..."
+    };
+  const a = s.guideGroups[0];
+  if (!a)
+    return {
+      status: "error",
       error: "no_guide_group",
-      guides: []
+      message: "No guide group found"
     };
-  const r = e.getStage();
-  return {
-    guides: s.display_sequence.map((n) => {
-      const o = t.guides[n];
-      return o ? q(o, t, r) : R(n);
-    })
+  const r = t.getStage(), o = a.display_sequence.map((u) => {
+    const l = s.guides[u];
+    return l ? m(l, s, r) : B(u);
+  }), i = Object.keys(e.focusedGuideKeys || {})[0];
+  return (r == null ? void 0 : r.status) === "closed" && i && !o.find((l) => l.key === i && l.annotation.selectable.status) ? {
+    status: "error",
+    error: "no_guide_present",
+    message: `No component that can render \`${i}\` was found`
+  } : {
+    status: "ok",
+    guides: o
   };
-}, Q = (e) => typeof e == "object" && e !== null && "__typename" in e && e.__typename === "UnknownGuide";
+}, U = (e) => typeof e == "object" && e !== null && "__typename" in e && e.__typename === "UnknownGuide";
 export {
-  Q as isUnknownGuide,
-  I as resolveIsQualified,
-  E as useInspectGuideClientStore
+  U as isUnknownGuide,
+  w as resolveIsQualified,
+  R as useInspectGuideClientStore
 };
 //# sourceMappingURL=useInspectGuideClientStore.mjs.map