@knocklabs/react 0.11.6 → 0.11.7

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

@@ -1,55 +1,173 @@
-import { useGuideContext as p, useStore as h } from "@knocklabs/react-core";
-import { Button as n } from "@telegraph/button";
-import { Stack as a, Box as m } from "@telegraph/layout";
-import { Tag as g } from "@telegraph/tag";
-import { Tooltip as o } from "@telegraph/tooltip";
-import { Text as f } from "@telegraph/typography";
-import { Pin as E, Code2 as v, LocateFixed as y, UserCircle2 as x, Eye as T, CheckCircle2 as C, CircleDashed as k } from "lucide-react";
-import * as e from "react";
-import { GuideHoverCard as w } from "./GuideHoverCard.mjs";
-import { isUnknownGuide as s } from "./useInspectGuideClientStore.mjs";
-const z = ({
-  children: t
-}) => /* @__PURE__ */ e.createElement(a, { h: "7", px: "2", borderTop: "px", justify: "space-between", align: "center" }, t), L = ({
-  guide: t,
-  orderIndex: u
-}) => {
+import { useGuideContext as k, useStore as S } from "@knocklabs/react-core";
+import { Button as _ } from "@telegraph/button";
+import { Icon as x } from "@telegraph/icon";
+import { Box as v, Stack as n } from "@telegraph/layout";
+import { Tag as T } from "@telegraph/tag";
+import { Tooltip as y } from "@telegraph/tooltip";
+import { Text as g } from "@telegraph/typography";
+import { Gauge as N } from "lucide-react";
+import * as t from "react";
+import { GuideAnnotatedStatusDot as c } from "./GuideAnnotatedStatusDot.mjs";
+import { GuideRowDetails as G } from "./GuideRowDetails.mjs";
+import { isUnknownGuide as i } from "./useInspectGuideClientStore.mjs";
+const E = ({
+  label: e,
+  color: o = "gray",
+  children: a
+}) => /* @__PURE__ */ t.createElement(n, { direction: "row", align: "center", gap: "0_5", px: "1", height: "5", bg: "surface-2", rounded: "full", border: "px", borderColor: "gray-4" }, /* @__PURE__ */ t.createElement(g, { as: "span", size: "0", color: o, weight: "medium" }, e), a), C = (e) => {
+  if (i(e))
+    return {
+      color: "red",
+      label: "Inactive",
+      tooltip: "This guide has never been committed and published yet"
+    };
   const {
-    client: l
-  } = p(), {
-    debugSettings: i
-  } = h(l.store, (b) => ({
-    debugSettings: b.debug || {}
-  })), c = i.focusedGuideKeys || {}, d = Object.keys(c).length > 0, r = !!c[t.key];
-  return /* @__PURE__ */ e.createElement(z, null, /* @__PURE__ */ e.createElement(w, { guide: t }, /* @__PURE__ */ e.createElement(a, { h: "6", justify: "flex-start", align: "center", gap: "2" }, /* @__PURE__ */ e.createElement(g, { size: "0", variant: "soft", color: t.bypass_global_group_limit ? "blue" : "default" }, u + 1), /* @__PURE__ */ e.createElement(f, { as: "code", size: "1", color: d ? r ? "blue" : "disabled" : "default" }, t.key))), /* @__PURE__ */ e.createElement(a, { justify: "flex-end" }, !s(t) && /* @__PURE__ */ e.createElement(e.Fragment, null, t.annotation.selectable.status !== void 0 && (!d || r) && /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(o, { label: r ? "Unfocus this guide" : "Focus on this guide" }, /* @__PURE__ */ e.createElement(n, { size: "1", variant: "ghost", color: r ? "blue" : "gray", leadingIcon: {
-    icon: E,
-    alt: "Focus"
-  }, onClick: () => l.setDebug({
-    ...i,
-    focusedGuideKeys: r ? {} : {
-      [t.key]: !0
-    }
-  }) })), /* @__PURE__ */ e.createElement(a, { px: "2", align: "center" }, /* @__PURE__ */ e.createElement(m, { h: "3", borderLeft: "px", borderColor: "gray-6" }))), /* @__PURE__ */ e.createElement(a, { gap: "1" }, /* @__PURE__ */ e.createElement(o, { label: t.annotation.selectable.status === "returned" ? "This guide was queried and can display" : t.annotation.selectable.status === "queried" ? "This guide was queried but cannot display" : t.annotation.selectable.status === "throttled" ? "This guide was queried and can display but is throttled currently" : "No component is present in the current location to display this guide" }, /* @__PURE__ */ e.createElement(n, { px: "1", size: "1", variant: "soft", color: t.annotation.selectable.status === "returned" ? "green" : t.annotation.selectable.status === "queried" ? "gray" : t.annotation.selectable.status === "throttled" ? "yellow" : "red", leadingIcon: {
-    icon: v,
-    alt: "Render"
-  } })), /* @__PURE__ */ e.createElement(o, { label: t.annotation.activatable.status ? "This guide can be activated at the current location" : "This guide cannot be activated at the current location" }, /* @__PURE__ */ e.createElement(n, { px: "1", size: "1", variant: "soft", color: t.annotation.activatable.status ? "green" : "red", leadingIcon: {
-    icon: y,
-    alt: "Target"
-  } }))), /* @__PURE__ */ e.createElement(a, { px: "2", align: "center" }, /* @__PURE__ */ e.createElement(m, { h: "3", borderLeft: "px", borderColor: "gray-6" }))), /* @__PURE__ */ e.createElement(a, { gap: "1" }, !s(t) && /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(o, { label: t.annotation.targetable.status ? "This user is being targeted" : t.annotation.targetable.message }, /* @__PURE__ */ e.createElement(n, { px: "1", size: "1", variant: "soft", color: t.annotation.targetable.status ? "green" : "red", leadingIcon: {
-    icon: x,
-    alt: "Target"
-  } })), /* @__PURE__ */ e.createElement(o, { label: t.annotation.archived.status ? "User has already dismissed this guide" : "User has not dismissed this guide" }, /* @__PURE__ */ e.createElement(n, { px: "1", size: "1", variant: "soft", color: t.annotation.archived.status ? "red" : "green", leadingIcon: {
-    icon: T,
-    alt: "Not archived"
-  } }))), /* @__PURE__ */ e.createElement(o, { label: s(t) ? "This guide has never been committed and published yet" : t.active ? "This guide is active" : "This guide is not active" }, /* @__PURE__ */ e.createElement(n, { px: "1", size: "1", variant: "soft", color: t.active ? "green" : "red", leadingIcon: t.active ? {
-    icon: C,
-    alt: "Active"
+    annotation: o
+  } = e;
+  return o.active.status ? o.archived.status ? {
+    color: "red",
+    label: "Archived",
+    tooltip: "User has already dismissed this guide"
+  } : o.targetable.status ? o.selectable.status === void 0 ? {
+    color: "red",
+    label: "Not found",
+    tooltip: "No component that can query this guide was found"
+  } : o.activatable.status ? o.selectable.status === "queried" ? {
+    color: "gray",
+    label: "Queued",
+    tooltip: "This guide is queried but is not ready to display"
+  } : o.selectable.status === "throttled" ? {
+    color: "yellow",
+    label: "Throttled",
+    tooltip: "This guide is queried and ready to display, but throttled currently"
+  } : o.selectable.status === "returned" ? {
+    color: "blue",
+    label: "Display",
+    tooltip: "This guide is queried and ready to display"
+  } : {
+    color: "red",
+    label: "Unknown status",
+    tooltip: "Unknown status"
+  } : {
+    color: "red",
+    label: "Not activated",
+    tooltip: "This guide cannot be activated in the current location"
+  } : {
+    color: "red",
+    label: "Not targeted",
+    tooltip: o.targetable.message
   } : {
-    icon: k,
-    alt: "Inactive"
-  } })))));
+    color: "red",
+    label: "Inactive",
+    tooltip: "This guide is inactive"
+  };
+}, q = (e) => {
+  if (i(e))
+    return {
+      active: {
+        color: "gray"
+      },
+      archived: {
+        color: "gray"
+      },
+      targetable: {
+        color: "gray"
+      },
+      activatable: {
+        color: "gray"
+      },
+      selectable: {
+        color: "gray"
+      }
+    };
+  const {
+    annotation: o
+  } = e, a = {
+    color: o.active.status ? "blue" : "red",
+    tooltip: `Active: ${o.active.status ? "Yes" : "No"}`
+  }, b = {
+    color: o.archived.status ? "red" : "blue",
+    tooltip: `Not archived: ${o.archived.status ? "No" : "Yes"}`
+  }, u = {
+    color: o.targetable.status ? "blue" : "red",
+    tooltip: `Targeted: ${o.targetable.status ? "Yes" : "No"}`
+  }, d = {
+    color: o.activatable.status ? "blue" : "red",
+    tooltip: `Activated: ${o.activatable.status ? "Yes" : "No"}`
+  };
+  let l;
+  switch (o.selectable.status) {
+    case "returned":
+      l = {
+        color: "blue",
+        tooltip: "Ready for display"
+      };
+      break;
+    case "throttled":
+      l = {
+        color: "yellow",
+        tooltip: "Throttled"
+      };
+      break;
+    case "queried":
+      l = {
+        color: "gray",
+        tooltip: "Queued"
+      };
+      break;
+    case void 0:
+    default:
+      l = {
+        color: "red",
+        tooltip: "Not found"
+      };
+      break;
+  }
+  return {
+    active: a,
+    archived: b,
+    targetable: u,
+    activatable: d,
+    selectable: l
+  };
+}, Q = ({
+  guide: e,
+  orderIndex: o,
+  isExpanded: a,
+  onClick: b
+}) => {
+  const {
+    client: u
+  } = k(), {
+    debugSettings: d
+  } = S(u.store, (m) => ({
+    debugSettings: m.debug || {}
+  })), [l, f] = t.useState(!1), h = d.focusedGuideKeys || {}, w = Object.keys(h).length > 0, s = !!h[e.key], r = q(e), p = C(e);
+  return /* @__PURE__ */ t.createElement(v, { rounded: "3", overflow: "hidden", border: "px", borderStyle: "solid", borderColor: a ? "gray-6" : "transparent", onMouseEnter: () => f(!0), onMouseLeave: () => f(!1), style: {
+    cursor: "pointer"
+  } }, /* @__PURE__ */ t.createElement(n, { h: "7", px: "1", gap: "1", align: "center", justify: "space-between", rounded: "3", overflow: "hidden", border: "px", borderStyle: "solid", borderColor: a ? "transparent" : s ? "gray-6" : l ? "gray-4" : "transparent", backgroundColor: a ? "surface-2" : s ? "gray-2" : l ? "surface-2" : "transparent", onClick: () => b(e.key) }, /* @__PURE__ */ t.createElement(n, { align: "center", gap: "1_5", style: {
+    minWidth: 0,
+    flex: 1
+  } }, /* @__PURE__ */ t.createElement(n, { w: "7", justify: "space-between", align: "center", gap: "0_5" }, /* @__PURE__ */ t.createElement(v, { w: "3" }, !e.bypass_global_group_limit && /* @__PURE__ */ t.createElement(x, { icon: N, size: "0", color: "gray", alt: "Subject to throttling" })), /* @__PURE__ */ t.createElement(g, { as: "span", size: "1", weight: "medium", color: e.bypass_global_group_limit ? "blue" : "default", style: {
+    flexShrink: 0
+  } }, o + 1)), /* @__PURE__ */ t.createElement(y, { label: `${e.key}${e.bypass_global_group_limit ? " (unthrottled)" : ""}` }, /* @__PURE__ */ t.createElement(g, { as: "code", size: "1", weight: "medium", color: "default", style: {
+    display: "block",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    maxWidth: "200px"
+  } }, e.key))), /* @__PURE__ */ t.createElement(n, { align: "center", gap: "1_5", style: {
+    flexShrink: 0
+  } }, !w && /* @__PURE__ */ t.createElement(y, { label: p.tooltip }, /* @__PURE__ */ t.createElement(T, { size: "0", variant: "soft", color: p.color }, p.label)), /* @__PURE__ */ t.createElement(E, { label: "Elig:", color: i(e) ? "disabled" : e.annotation.isEligible ? "blue" : "gray" }, /* @__PURE__ */ t.createElement(c, { color: r.active.color, tooltip: r.active.tooltip }), /* @__PURE__ */ t.createElement(c, { color: r.archived.color, tooltip: r.archived.tooltip }), /* @__PURE__ */ t.createElement(c, { color: r.targetable.color, tooltip: r.targetable.tooltip })), /* @__PURE__ */ t.createElement(E, { label: "Vis:", color: i(e) ? "disabled" : e.annotation.isQualified && e.annotation.selectable.status === "returned" ? "blue" : "gray" }, /* @__PURE__ */ t.createElement(c, { color: r.activatable.color, tooltip: r.activatable.tooltip }), /* @__PURE__ */ t.createElement(c, { color: r.selectable.color, tooltip: r.selectable.tooltip })), /* @__PURE__ */ t.createElement(y, { label: i(e) || e.annotation.selectable.status === void 0 ? "No component found that can render this guide" : s ? "Unfocus this guide" : "Focus on this guide" }, /* @__PURE__ */ t.createElement(_, { size: "0", variant: s ? "solid" : "outline", color: s ? "blue" : "gray", disabled: i(e) || e.annotation.selectable.status === void 0, onClick: (m) => {
+    m.stopPropagation(), u.setDebug({
+      ...d,
+      focusedGuideKeys: s ? {} : {
+        [e.key]: !0
+      }
+    });
+  } }, "Focus")))), a && /* @__PURE__ */ t.createElement(G, { guide: e }));
 };
 export {
-  L as GuideRow
+  Q as GuideRow
 };
 //# sourceMappingURL=GuideRow.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"GuideRow.mjs","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/GuideRow.tsx"],"sourcesContent":["import { useGuideContext, useStore } from \"@knocklabs/react-core\";\nimport { Button } from \"@telegraph/button\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport { Tag } from \"@telegraph/tag\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text } from \"@telegraph/typography\";\nimport {\n  CheckCircle2,\n  CircleDashed,\n  Code2,\n  Eye,\n  LocateFixed,\n  Pin,\n  UserCircle2,\n} from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { GuideHoverCard } from \"./GuideHoverCard\";\nimport {\n  AnnotatedGuide,\n  UnknownGuide,\n  isUnknownGuide,\n} from \"./useInspectGuideClientStore\";\n\nconst Row = ({ children }: React.PropsWithChildren) => (\n  <Stack h=\"7\" px=\"2\" borderTop=\"px\" justify=\"space-between\" align=\"center\">\n    {children}\n  </Stack>\n);\n\ntype Props = {\n  guide: UnknownGuide | AnnotatedGuide;\n  orderIndex: number;\n};\n\nexport const GuideRow = ({ guide, orderIndex }: Props) => {\n  const { client } = useGuideContext();\n  const { debugSettings } = useStore(client.store, (state) => ({\n    debugSettings: state.debug || {},\n  }));\n\n  const focusedGuideKeys = debugSettings.focusedGuideKeys || {};\n  const hasFocus = Object.keys(focusedGuideKeys).length > 0;\n  const isFocused = !!focusedGuideKeys[guide.key];\n\n  return (\n    <Row>\n      <GuideHoverCard guide={guide}>\n        <Stack h=\"6\" justify=\"flex-start\" align=\"center\" gap=\"2\">\n          <Tag\n            size=\"0\"\n            variant=\"soft\"\n            color={guide.bypass_global_group_limit ? \"blue\" : \"default\"}\n          >\n            {orderIndex + 1}\n          </Tag>\n          <Text\n            as=\"code\"\n            size=\"1\"\n            color={!hasFocus ? \"default\" : isFocused ? \"blue\" : \"disabled\"}\n          >\n            {guide.key}\n          </Text>\n        </Stack>\n      </GuideHoverCard>\n\n      <Stack justify=\"flex-end\">\n        {!isUnknownGuide(guide) && (\n          <>\n            {guide.annotation.selectable.status !== undefined &&\n              (!hasFocus || isFocused) && (\n                <>\n                  <Tooltip\n                    label={\n                      isFocused ? \"Unfocus this guide\" : \"Focus on this guide\"\n                    }\n                  >\n                    <Button\n                      size=\"1\"\n                      variant=\"ghost\"\n                      color={isFocused ? \"blue\" : \"gray\"}\n                      leadingIcon={{ icon: Pin, alt: \"Focus\" }}\n                      onClick={() =>\n                        client.setDebug({\n                          ...debugSettings,\n                          focusedGuideKeys: isFocused\n                            ? {}\n                            : { [guide.key]: true },\n                        })\n                      }\n                    />\n                  </Tooltip>\n                  <Stack px=\"2\" align=\"center\">\n                    <Box h=\"3\" borderLeft=\"px\" borderColor=\"gray-6\" />\n                  </Stack>\n                </>\n              )}\n            <Stack gap=\"1\">\n              <Tooltip\n                label={\n                  guide.annotation.selectable.status === \"returned\"\n                    ? \"This guide was queried and can display\"\n                    : guide.annotation.selectable.status === \"queried\"\n                      ? \"This guide was queried but cannot display\"\n                      : guide.annotation.selectable.status === \"throttled\"\n                        ? \"This guide was queried and can display but is throttled currently\"\n                        : \"No component is present in the current location to display this guide\"\n                }\n              >\n                <Button\n                  px=\"1\"\n                  size=\"1\"\n                  variant=\"soft\"\n                  color={\n                    guide.annotation.selectable.status === \"returned\"\n                      ? \"green\"\n                      : guide.annotation.selectable.status === \"queried\"\n                        ? \"gray\"\n                        : guide.annotation.selectable.status === \"throttled\"\n                          ? \"yellow\"\n                          : \"red\"\n                  }\n                  leadingIcon={{ icon: Code2, alt: \"Render\" }}\n                />\n              </Tooltip>\n              <Tooltip\n                label={\n                  guide.annotation.activatable.status\n                    ? \"This guide can be activated at the current location\"\n                    : \"This guide cannot be activated at the current location\"\n                }\n              >\n                <Button\n                  px=\"1\"\n                  size=\"1\"\n                  variant=\"soft\"\n                  color={guide.annotation.activatable.status ? \"green\" : \"red\"}\n                  leadingIcon={{ icon: LocateFixed, alt: \"Target\" }}\n                />\n              </Tooltip>\n            </Stack>\n            <Stack px=\"2\" align=\"center\">\n              <Box h=\"3\" borderLeft=\"px\" borderColor=\"gray-6\" />\n            </Stack>\n          </>\n        )}\n        <Stack gap=\"1\">\n          {!isUnknownGuide(guide) && (\n            <>\n              <Tooltip\n                label={\n                  guide.annotation.targetable.status\n                    ? \"This user is being targeted\"\n                    : guide.annotation.targetable.message\n                }\n              >\n                <Button\n                  px=\"1\"\n                  size=\"1\"\n                  variant=\"soft\"\n                  color={guide.annotation.targetable.status ? \"green\" : \"red\"}\n                  leadingIcon={{ icon: UserCircle2, alt: \"Target\" }}\n                />\n              </Tooltip>\n              <Tooltip\n                label={\n                  guide.annotation.archived.status\n                    ? \"User has already dismissed this guide\"\n                    : \"User has not dismissed this guide\"\n                }\n              >\n                <Button\n                  px=\"1\"\n                  size=\"1\"\n                  variant=\"soft\"\n                  color={guide.annotation.archived.status ? \"red\" : \"green\"}\n                  leadingIcon={{ icon: Eye, alt: \"Not archived\" }}\n                />\n              </Tooltip>\n            </>\n          )}\n          <Tooltip\n            label={\n              isUnknownGuide(guide)\n                ? \"This guide has never been committed and published yet\"\n                : !guide.active\n                  ? \"This guide is not active\"\n                  : \"This guide is active\"\n            }\n          >\n            <Button\n              px=\"1\"\n              size=\"1\"\n              variant=\"soft\"\n              color={guide.active ? \"green\" : \"red\"}\n              leadingIcon={\n                guide.active\n                  ? { icon: CheckCircle2, alt: \"Active\" }\n                  : { icon: CircleDashed, alt: \"Inactive\" }\n              }\n            />\n          </Tooltip>\n        </Stack>\n      </Stack>\n    </Row>\n  );\n};\n"],"names":["Row","children","React","Stack","GuideRow","guide","orderIndex","client","useGuideContext","debugSettings","useStore","store","state","debug","focusedGuideKeys","hasFocus","Object","keys","length","isFocused","key","GuideHoverCard","Tag","bypass_global_group_limit","Text","isUnknownGuide","annotation","selectable","status","undefined","Tooltip","Button","icon","Pin","alt","setDebug","Box","Code2","activatable","LocateFixed","targetable","message","UserCircle2","archived","Eye","active","CheckCircle2","CircleDashed"],"mappings":"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"}
+{"version":3,"file":"GuideRow.mjs","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/GuideRow.tsx"],"sourcesContent":["import { useGuideContext, useStore } from \"@knocklabs/react-core\";\nimport { Button } from \"@telegraph/button\";\nimport { Icon } from \"@telegraph/icon\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport { Tag } from \"@telegraph/tag\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text } from \"@telegraph/typography\";\nimport { Gauge } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport {\n  StatusColor,\n  GuideAnnotatedStatusDot as StatusDot,\n} from \"./GuideAnnotatedStatusDot\";\nimport { GuideRowDetails } from \"./GuideRowDetails\";\nimport {\n  AnnotatedGuide,\n  AnnotatedStatuses,\n  UnknownGuide,\n  isUnknownGuide,\n} from \"./useInspectGuideClientStore\";\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\ntype StatusSummary = {\n  color: StatusColor;\n  label: string;\n  tooltip: string;\n};\n\nconst getStatusSummary = (\n  guide: AnnotatedGuide | UnknownGuide,\n): StatusSummary => {\n  if (isUnknownGuide(guide)) {\n    return {\n      color: \"red\",\n      label: \"Inactive\",\n      tooltip: \"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      tooltip: \"This guide is inactive\",\n    };\n  }\n  if (annotation.archived.status) {\n    return {\n      color: \"red\",\n      label: \"Archived\",\n      tooltip: \"User has already dismissed this guide\",\n    };\n  }\n  if (!annotation.targetable.status) {\n    return {\n      color: \"red\",\n      label: \"Not targeted\",\n      tooltip: annotation.targetable.message,\n    };\n  }\n  if (annotation.selectable.status === undefined) {\n    return {\n      color: \"red\",\n      label: \"Not found\",\n      tooltip: \"No component that can query this guide was found\",\n    };\n  }\n  if (!annotation.activatable.status) {\n    return {\n      color: \"red\",\n      label: \"Not activated\",\n      tooltip: \"This guide cannot be activated in the current location\",\n    };\n  }\n  if (annotation.selectable.status === \"queried\") {\n    return {\n      color: \"gray\",\n      label: \"Queued\",\n      tooltip: \"This guide is queried but is not ready to display\",\n    };\n  }\n  if (annotation.selectable.status === \"throttled\") {\n    return {\n      color: \"yellow\",\n      label: \"Throttled\",\n      tooltip:\n        \"This guide is queried and ready to display, but throttled currently\",\n    };\n  }\n  if (annotation.selectable.status === \"returned\") {\n    return {\n      color: \"blue\",\n      label: \"Display\",\n      tooltip: \"This guide is queried and ready to display\",\n    };\n  }\n  // Should never happen though.\n  return { color: \"red\", label: \"Unknown status\", tooltip: \"Unknown status\" };\n};\n\ntype StatusDot = {\n  color: StatusColor;\n  tooltip?: string;\n};\n\nconst getStatusDots = (\n  guide: AnnotatedGuide | UnknownGuide,\n): Record<keyof AnnotatedStatuses, StatusDot> => {\n  if (isUnknownGuide(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 ? \"blue\" : \"red\",\n    tooltip: `Not archived: ${!annotation.archived.status ? \"Yes\" : \"No\"}`,\n  };\n\n  const targetable: StatusDot = {\n    color: annotation.targetable.status ? \"blue\" : \"red\",\n    tooltip: `Targeted: ${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  let selectable: StatusDot;\n  switch (annotation.selectable.status) {\n    case \"returned\":\n      selectable = { color: \"blue\", tooltip: \"Ready for display\" };\n      break;\n\n    case \"throttled\":\n      selectable = { color: \"yellow\", tooltip: \"Throttled\" };\n      break;\n\n    case \"queried\":\n      selectable = { color: \"gray\", tooltip: \"Queued\" };\n      break;\n\n    case undefined:\n    default:\n      selectable = { color: \"red\", tooltip: \"Not found\" };\n      break;\n  }\n\n  return { active, archived, targetable, activatable, selectable };\n};\n\ntype Props = {\n  guide: UnknownGuide | 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\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    >\n      <Stack\n        h=\"7\"\n        px=\"1\"\n        gap=\"1\"\n        align=\"center\"\n        justify=\"space-between\"\n        rounded=\"3\"\n        overflow=\"hidden\"\n        border=\"px\"\n        borderStyle=\"solid\"\n        borderColor={\n          isExpanded\n            ? \"transparent\"\n            : isFocused\n              ? \"gray-6\"\n              : isHovered\n                ? \"gray-4\"\n                : \"transparent\"\n        }\n        backgroundColor={\n          isExpanded\n            ? \"surface-2\"\n            : isFocused\n              ? \"gray-2\"\n              : isHovered\n                ? \"surface-2\"\n                : \"transparent\"\n        }\n        onClick={() => onClick(guide.key)}\n      >\n        {/* Left section: order + key */}\n        <Stack align=\"center\" gap=\"1_5\" style={{ minWidth: 0, flex: 1 }}>\n          <Stack w=\"7\" justify=\"space-between\" align=\"center\" gap=\"0_5\">\n            <Box w=\"3\">\n              {!guide.bypass_global_group_limit && (\n                <Icon\n                  icon={Gauge}\n                  size=\"0\"\n                  color=\"gray\"\n                  alt=\"Subject to throttling\"\n                />\n              )}\n            </Box>\n            <Text\n              as=\"span\"\n              size=\"1\"\n              weight=\"medium\"\n              color={guide.bypass_global_group_limit ? \"blue\" : \"default\"}\n              style={{ flexShrink: 0 }}\n            >\n              {orderIndex + 1}\n            </Text>\n          </Stack>\n          <Tooltip\n            label={`${guide.key}${guide.bypass_global_group_limit ? \" (unthrottled)\" : \"\"}`}\n          >\n            <Text\n              as=\"code\"\n              size=\"1\"\n              weight=\"medium\"\n              color=\"default\"\n              style={{\n                display: \"block\",\n                overflow: \"hidden\",\n                textOverflow: \"ellipsis\",\n                whiteSpace: \"nowrap\",\n                maxWidth: \"200px\",\n              }}\n            >\n              {guide.key}\n            </Text>\n          </Tooltip>\n        </Stack>\n\n        {/* Right section: verdict + pills + focus */}\n        <Stack align=\"center\" gap=\"1_5\" style={{ flexShrink: 0 }}>\n          {!hasFocus && (\n            <Tooltip label={summary.tooltip}>\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              isUnknownGuide(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              isUnknownGuide(guide)\n                ? \"disabled\"\n                : guide.annotation.isQualified &&\n                    guide.annotation.selectable.status === \"returned\"\n                  ? \"blue\"\n                  : \"gray\"\n            }\n          >\n            <StatusDot\n              color={dots.activatable.color}\n              tooltip={dots.activatable.tooltip!}\n            />\n            <StatusDot\n              color={dots.selectable.color}\n              tooltip={dots.selectable.tooltip!}\n            />\n          </Pill>\n\n          <Tooltip\n            label={\n              isUnknownGuide(guide) ||\n              guide.annotation.selectable.status === undefined\n                ? \"No component found that can render this guide\"\n                : isFocused\n                  ? \"Unfocus this guide\"\n                  : \"Focus on this guide\"\n            }\n          >\n            <Button\n              size=\"0\"\n              variant={isFocused ? \"solid\" : \"outline\"}\n              color={isFocused ? \"blue\" : \"gray\"}\n              disabled={\n                isUnknownGuide(guide) ||\n                guide.annotation.selectable.status === undefined\n              }\n              onClick={(e: React.MouseEvent) => {\n                e.stopPropagation();\n                client.setDebug({\n                  ...debugSettings,\n                  focusedGuideKeys: isFocused ? {} : { [guide.key]: true },\n                });\n              }}\n            >\n              Focus\n            </Button>\n          </Tooltip>\n        </Stack>\n      </Stack>\n\n      {isExpanded && <GuideRowDetails guide={guide} />}\n    </Box>\n  );\n};\n"],"names":["Pill","label","color","children","React","Stack","Text","getStatusSummary","guide","isUnknownGuide","tooltip","annotation","active","status","archived","targetable","selectable","undefined","activatable","message","getStatusDots","GuideRow","orderIndex","isExpanded","onClick","client","useGuideContext","debugSettings","useStore","store","state","debug","isHovered","setIsHovered","useState","focusedGuideKeys","hasFocus","Object","keys","length","isFocused","key","dots","summary","Box","cursor","minWidth","flex","bypass_global_group_limit","Icon","Gauge","flexShrink","Tooltip","display","overflow","textOverflow","whiteSpace","maxWidth","Tag","isEligible","StatusDot","isQualified","Button","e","stopPropagation","setDebug","GuideRowDetails"],"mappings":"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"}

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

@@ -0,0 +1,51 @@
+import e from "react";
+import { Box as n, Stack as o } from "@telegraph/layout";
+import { Text as i } from "@telegraph/typography";
+import { GuideAnnotatedStatusDot as c } from "./GuideAnnotatedStatusDot.mjs";
+import { isUnknownGuide as u } from "./useInspectGuideClientStore.mjs";
+const s = ({
+  title: a,
+  children: t
+}) => /* @__PURE__ */ e.createElement(o, { 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
+} }, /* @__PURE__ */ e.createElement(i, { as: "span", size: "0", color: "gray", weight: "medium" }, a), /* @__PURE__ */ e.createElement(o, { direction: "column", gap: "1", mt: "1" }, t)), l = ({
+  label: a,
+  value: t,
+  color: r
+}) => /* @__PURE__ */ e.createElement(o, { align: "center", gap: "1" }, /* @__PURE__ */ e.createElement(c, { color: r, tooltip: `${a}: ${t}` }), /* @__PURE__ */ e.createElement(i, { as: "span", size: "1", weight: "medium" }, a, ":"), /* @__PURE__ */ e.createElement(i, { as: "span", size: "1", weight: "medium", color: r }, t)), m = (a) => {
+  switch (a) {
+    case "returned":
+      return {
+        value: "Ready to display",
+        color: "blue"
+      };
+    case "throttled":
+      return {
+        value: "Throttled",
+        color: "yellow"
+      };
+    case "queried":
+      return {
+        value: "Queued",
+        color: "gray"
+      };
+    default:
+      return {
+        value: "Not found",
+        color: "red"
+      };
+  }
+}, E = ({
+  guide: a
+}) => {
+  if (u(a))
+    return /* @__PURE__ */ e.createElement(n, { px: "3", py: "2" }, /* @__PURE__ */ e.createElement(i, { as: "span", size: "1", color: "gray" }, "This guide has never been committed and published."));
+  const {
+    annotation: t
+  } = a, r = m(t.selectable.status);
+  return /* @__PURE__ */ e.createElement(o, { px: "3", py: "2", gap: "2", direction: "row", align: "flex-start" }, /* @__PURE__ */ e.createElement(s, { title: "Eligibility" }, /* @__PURE__ */ e.createElement(l, { label: "Active", value: t.active.status ? "Yes" : "No", color: t.active.status ? "blue" : "red" }), /* @__PURE__ */ e.createElement(l, { label: "Not archived", value: t.archived.status ? "No" : "Yes", color: t.archived.status ? "red" : "blue" }), /* @__PURE__ */ e.createElement(l, { label: "Targeting", value: t.targetable.status ? "Yes" : "No", color: t.targetable.status ? "blue" : "red" })), /* @__PURE__ */ e.createElement(s, { title: "Visibility" }, /* @__PURE__ */ e.createElement(l, { label: "Activation", value: t.activatable.status ? "Yes" : "No", color: t.activatable.status ? "blue" : "red" }), /* @__PURE__ */ e.createElement(l, { label: "Display", value: r.value, color: r.color })));
+};
+export {
+  E as GuideRowDetails
+};
+//# sourceMappingURL=GuideRowDetails.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GuideRowDetails.mjs","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/GuideRowDetails.tsx"],"sourcesContent":["import { Box, Stack } from \"@telegraph/layout\";\nimport { Text } from \"@telegraph/typography\";\n\nimport {\n  StatusColor,\n  GuideAnnotatedStatusDot as StatusDot,\n} from \"./GuideAnnotatedStatusDot\";\nimport {\n  AnnotatedGuide,\n  UnknownGuide,\n  isUnknownGuide,\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 }}\n  >\n    <Text as=\"span\" size=\"0\" color=\"gray\" weight=\"medium\">\n      {title}\n    </Text>\n    <Stack direction=\"column\" gap=\"1\" mt=\"1\">\n      {children}\n    </Stack>\n  </Stack>\n);\n\nconst StatusRow = ({\n  label,\n  value,\n  color,\n}: {\n  label: string;\n  value: string;\n  color: StatusColor;\n}) => (\n  <Stack align=\"center\" gap=\"1\">\n    <StatusDot color={color} tooltip={`${label}: ${value}`} />\n    <Text as=\"span\" size=\"1\" weight=\"medium\">\n      {label}:\n    </Text>\n    <Text as=\"span\" size=\"1\" weight=\"medium\" color={color}>\n      {value}\n    </Text>\n  </Stack>\n);\n\nconst getDisplayValue = (\n  status: \"returned\" | \"throttled\" | \"queried\" | undefined,\n): { value: string; color: StatusColor } => {\n  switch (status) {\n    case \"returned\":\n      return { value: \"Ready to display\", color: \"blue\" };\n    case \"throttled\":\n      return { value: \"Throttled\", color: \"yellow\" };\n    case \"queried\":\n      return { value: \"Queued\", color: \"gray\" };\n    default:\n      return { value: \"Not found\", color: \"red\" };\n  }\n};\n\nexport const GuideRowDetails = ({\n  guide,\n}: {\n  guide: AnnotatedGuide | UnknownGuide;\n}) => {\n  if (isUnknownGuide(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 } = guide;\n  const display = getDisplayValue(annotation.selectable.status);\n\n  return (\n    <Stack px=\"3\" py=\"2\" 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        />\n        <StatusRow\n          label=\"Not archived\"\n          value={!annotation.archived.status ? \"Yes\" : \"No\"}\n          color={!annotation.archived.status ? \"blue\" : \"red\"}\n        />\n        <StatusRow\n          label=\"Targeting\"\n          value={annotation.targetable.status ? \"Yes\" : \"No\"}\n          color={annotation.targetable.status ? \"blue\" : \"red\"}\n        />\n      </CardContainer>\n\n      <CardContainer title=\"Visibility\">\n        <StatusRow\n          label=\"Activation\"\n          value={annotation.activatable.status ? \"Yes\" : \"No\"}\n          color={annotation.activatable.status ? \"blue\" : \"red\"}\n        />\n        <StatusRow\n          label=\"Display\"\n          value={display.value}\n          color={display.color}\n        />\n      </CardContainer>\n    </Stack>\n  );\n};\n"],"names":["CardContainer","title","children","React","Stack","flex","Text","StatusRow","label","value","color","StatusDot","getDisplayValue","status","GuideRowDetails","guide","isUnknownGuide","Box","annotation","display","selectable","active","archived","targetable","activatable"],"mappings":"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"}

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

@@ -1,82 +1,144 @@
-import { useGuideContext as y } from "@knocklabs/react-core";
-import { Button as g } from "@telegraph/button";
-import { Box as p, Stack as d } from "@telegraph/layout";
-import { Text as h } from "@telegraph/typography";
-import { Undo2 as C, Minimize2 as w } from "lucide-react";
+import { useGuideContext as v, useStore as I } from "@knocklabs/react-core";
+import { Button as m } from "@telegraph/button";
+import { Icon as R } from "@telegraph/icon";
+import { Box as p, Stack as a } from "@telegraph/layout";
+import { SegmentedControl as f } from "@telegraph/segmented-control";
+import { Tooltip as b } from "@telegraph/tooltip";
+import { Text as z } from "@telegraph/typography";
+import { GripVertical as O, Box as P, Gauge as _, ChevronDown as G, ChevronRight as B, SlidersHorizontal as T, LogOut as A, Minimize2 as V } from "lucide-react";
 import e from "react";
-import { KnockButton as R } from "../KnockButton.mjs";
-import { TOOLBAR_Z_INDEX as G } from "../shared.mjs";
+import { KnockButton as L } from "../KnockButton.mjs";
+import { TOOLBAR_Z_INDEX as H } from "../shared.mjs";
 /* empty css             */
-import { DragHandle as k, DRAG_HANDLE_OVERHANG as S } from "./DragHandle.mjs";
-import { GuideContextDetails as I } from "./GuideContextDetails.mjs";
-import { GuideRow as L } from "./GuideRow.mjs";
-import { GuidesListDisplaySelect as z } from "./GuidesListDisplaySelect.mjs";
-import { getRunConfig as _, clearRunConfigLS as V } from "./helpers.mjs";
-import { useDraggable as v } from "./useDraggable.mjs";
-import { useInspectGuideClientStore as A } from "./useInspectGuideClientStore.mjs";
-const B = ({
-  guides: i,
-  displayOption: o
-}) => i.map((n, t) => {
-  const {
-    isEligible: l,
-    isQualified: a,
-    selectable: u
-  } = n.annotation, r = l && a, c = r && u.status === "returned";
-  return o === "only-displaying" && !c || o === "only-displayable" && !r || o === "all-eligible" && !l ? null : /* @__PURE__ */ e.createElement(L, { key: n.key, guide: n, orderIndex: t });
-}), Y = () => {
+import { GuideContextDetails as K } from "./GuideContextDetails.mjs";
+import { GuideRow as j } from "./GuideRow.mjs";
+import { getRunConfig as M, clearRunConfigLS as W } from "./helpers.mjs";
+import { useDraggable as N } from "./useDraggable.mjs";
+import { useInspectGuideClientStore as Q } from "./useInspectGuideClientStore.mjs";
+const X = "540px", Z = ({
+  guides: o,
+  displayOption: l
+}) => {
+  const [c, i] = e.useState();
+  return e.useEffect(() => {
+    i(void 0);
+  }, [l]), o.map((r, d) => {
+    const {
+      isEligible: g,
+      isQualified: s
+    } = r.annotation;
+    return l === "only-displayable" && !(g && s) || l === "only-eligible" && !g ? null : /* @__PURE__ */ e.createElement(j, { key: r.key, guide: r, orderIndex: d, isExpanded: r.key === c, onClick: () => {
+      i((n) => n && n === r.key ? void 0 : r.key);
+    } });
+  });
+}, ue = () => {
   const {
-    client: i
-  } = y(), [o, n] = e.useState("all-guides"), [t, l] = e.useState(() => _()), [a, u] = e.useState(!1);
+    client: o
+  } = v(), [l, c] = e.useState("only-eligible"), [i, r] = e.useState(() => M()), [d, g] = e.useState(!1), [s, x] = e.useState(!1), {
+    debugSettings: n
+  } = I(o.store, (t) => ({
+    debugSettings: t.debug || {}
+  }));
   e.useEffect(() => {
-    var f;
+    var C;
     const {
-      isVisible: s = !1,
-      focusedGuideKeys: D = {}
-    } = t || {}, x = (f = i.store.state.debug) == null ? void 0 : f.debugging;
-    return s && !x && i.setDebug({
-      focusedGuideKeys: D
-    }), () => {
-      i.unsetDebug();
+      isVisible: t = !1,
+      focusedGuideKeys: k = {}
+    } = i || {}, w = (C = o.store.state.debug) == null ? void 0 : C.debugging;
+    return t && !w && (o.setDebug({
+      focusedGuideKeys: k
+    }), Object.keys(k).length > 0 && c("all-guides")), () => {
+      o.unsetDebug();
     };
-  }, [t, i]);
-  const r = e.useRef(null), {
-    position: c,
-    isDragging: b,
-    handlePointerDown: E
-  } = v({
-    elementRef: r,
-    reclampDeps: [a],
-    rightPadding: S,
+  }, [i, o, c]);
+  const h = e.useRef(null), {
+    position: D,
+    isDragging: E,
+    handlePointerDown: y,
+    hasDraggedRef: S
+  } = N({
+    elementRef: h,
+    reclampDeps: [d],
     initialPosition: {
       top: 16,
       right: 16
     }
-  }), m = A(t);
-  return !m || !(t != null && t.isVisible) ? null : /* @__PURE__ */ e.createElement(p, { tgphRef: r, position: "fixed", style: {
-    top: c.top + "px",
-    right: c.right + "px",
-    zIndex: G
-  } }, /* @__PURE__ */ e.createElement(k, { onPointerDown: E, isDragging: b }), a ? /* @__PURE__ */ e.createElement(R, { onClick: () => u(!1), positioned: !1 }) : /* @__PURE__ */ e.createElement(d, { direction: "column", backgroundColor: "surface-2", shadow: "2", rounded: "3", border: "px", overflow: "hidden", style: {
-    width: "400px"
-  } }, /* @__PURE__ */ e.createElement(d, { w: "full", p: "2", justify: "space-between", direction: "row", style: {
-    boxSizing: "border-box"
+  }), u = Q(i);
+  return !u || !(i != null && i.isVisible) ? null : /* @__PURE__ */ e.createElement(p, { tgphRef: h, position: "fixed", style: {
+    top: D.top + "px",
+    right: D.right + "px",
+    zIndex: H
+  } }, d ? /* @__PURE__ */ e.createElement(a, { border: "px", rounded: "4", align: "center", justify: "center", w: "10", h: "10", onPointerDown: y, backgroundColor: "surface-1", style: {
+    cursor: E ? "grabbing" : "grab",
+    touchAction: "none",
+    userSelect: "none"
   } }, /* @__PURE__ */ e.createElement(p, { style: {
-    width: "220px"
-  } }, /* @__PURE__ */ e.createElement(z, { value: o, onChange: (s) => n(s) })), /* @__PURE__ */ e.createElement(d, { gap: "2" }, /* @__PURE__ */ e.createElement(g, { onClick: () => {
-    l((s) => ({
-      ...s,
+    transform: "scale(0.7)",
+    transformOrigin: "center center"
+  } }, /* @__PURE__ */ e.createElement(L, { onClick: () => {
+    S.current || g(!1);
+  }, positioned: !1 }))) : /* @__PURE__ */ e.createElement(a, { direction: "column", backgroundColor: "surface-1", rounded: "4", border: "px", overflow: "hidden", style: {
+    width: X,
+    boxShadow: "0 8px 32px var(--tgph-gray-5)"
+  } }, /* @__PURE__ */ e.createElement(a, { w: "full", p: "2", justify: "space-between", direction: "row", align: "center", gap: "2", borderBottom: "px", onPointerDown: y, style: {
+    boxSizing: "border-box",
+    cursor: E ? "grabbing" : "grab",
+    touchAction: "none",
+    userSelect: "none"
+  } }, /* @__PURE__ */ e.createElement(a, { align: "center", gap: "1_5", style: {
+    minWidth: 0,
+    flex: 1
+  } }, /* @__PURE__ */ e.createElement(a, { display: "inline-flex", align: "center", style: {
+    cursor: E ? "grabbing" : "grab",
+    touchAction: "none",
+    userSelect: "none"
+  }, onPointerDown: (t) => {
+    t.stopPropagation(), y(t);
+  } }, /* @__PURE__ */ e.createElement(R, { color: "gray", size: "1", icon: O, "aria-hidden": !0 })), /* @__PURE__ */ e.createElement(a, { align: "center", gap: "1_5", onPointerDown: (t) => t.stopPropagation() }, /* @__PURE__ */ e.createElement(f.Root, { size: "1", type: "single", value: l, onValueChange: (t) => {
+    t && c(t);
+  } }, /* @__PURE__ */ e.createElement(f.Option, { value: "all-guides" }, "All guides"), /* @__PURE__ */ e.createElement(f.Option, { value: "only-eligible" }, "Eligible"), /* @__PURE__ */ e.createElement(f.Option, { value: "only-displayable" }, "On this page")), /* @__PURE__ */ e.createElement(b, { label: "Sandbox: Contain engagement actions to client side only" }, /* @__PURE__ */ e.createElement(m, { size: "1", variant: n.skipEngagementTracking ? "outline" : "ghost", color: n.skipEngagementTracking ? "blue" : "gray", icon: {
+    icon: P,
+    alt: "Sandbox mode"
+  }, onClick: () => {
+    o.setDebug({
+      ...n,
+      skipEngagementTracking: !n.skipEngagementTracking
+    });
+  } })), /* @__PURE__ */ e.createElement(b, { label: "Ignore throttle: Show next guide immediately" }, /* @__PURE__ */ e.createElement(m, { size: "1", variant: n.ignoreDisplayInterval ? "outline" : "ghost", color: n.ignoreDisplayInterval ? "blue" : "gray", icon: {
+    icon: _,
+    alt: "Ignore throttle"
+  }, onClick: () => {
+    o.setDebug({
+      ...n,
+      ignoreDisplayInterval: !n.ignoreDisplayInterval
+    });
+  } })), /* @__PURE__ */ e.createElement(b, { label: "Inspect target params" }, /* @__PURE__ */ e.createElement(m, { size: "1", variant: s ? "outline" : "ghost", color: s ? "blue" : "gray", leadingIcon: {
+    icon: T,
+    alt: "Inspect target params"
+  }, trailingIcon: s ? {
+    icon: G,
+    alt: "Hide context data"
+  } : {
+    icon: B,
+    alt: "Show context data"
+  }, onClick: () => x((t) => !t) })))), /* @__PURE__ */ e.createElement(a, { align: "center", gap: "1_5", style: {
+    flexShrink: 0
+  }, onPointerDown: (t) => t.stopPropagation() }, /* @__PURE__ */ e.createElement(a, { align: "center", gap: "1_5" }, /* @__PURE__ */ e.createElement(m, { size: "1", variant: "outline", leadingIcon: {
+    icon: A,
+    alt: "Exit"
+  }, onClick: () => {
+    r((t) => ({
+      ...t,
       isVisible: !1
-    })), V(), i.unsetDebug();
-  }, size: "1", variant: "soft", trailingIcon: {
-    icon: C,
-    "aria-hidden": !0
-  } }, "Exit"), /* @__PURE__ */ e.createElement(g, { onClick: () => u(!0), size: "1", variant: "soft", leadingIcon: {
-    icon: w,
-    alt: "Collapse guide toolbar"
-  } }))), /* @__PURE__ */ e.createElement(p, { w: "full" }, /* @__PURE__ */ e.createElement(I, null), m.error && /* @__PURE__ */ e.createElement(p, { px: "2", pb: "1" }, /* @__PURE__ */ e.createElement(h, { as: "span", size: "0", weight: "medium", color: "red" }, m.error)), /* @__PURE__ */ e.createElement(B, { guides: m.guides, displayOption: o }))));
+    })), W(), o.unsetDebug();
+  } }, "Exit"), /* @__PURE__ */ e.createElement(b, { label: "Minimize toolbar" }, /* @__PURE__ */ e.createElement(m, { size: "1", variant: "outline", leadingIcon: {
+    icon: V,
+    alt: "Minimize"
+  }, onClick: () => g(!0) }))))), s && /* @__PURE__ */ e.createElement(p, { borderBottom: "px" }, /* @__PURE__ */ e.createElement(K, null)), /* @__PURE__ */ e.createElement(p, { p: "1", overflow: "auto", style: {
+    maxHeight: "calc(80vh - 96px)"
+  } }, u.status === "error" ? /* @__PURE__ */ e.createElement(p, { px: "2", pb: "1" }, /* @__PURE__ */ e.createElement(z, { as: "span", size: "1", weight: "medium", color: u.error === "no_guides_fetched" ? "default" : "red" }, u.message)) : /* @__PURE__ */ e.createElement(Z, { guides: u.guides, displayOption: l }))));
 };
 export {
-  Y as V2
+  ue as V2
 };
 //# sourceMappingURL=V2.mjs.map