@knocklabs/react 0.11.11 → 0.11.12

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

@@ -1,68 +1,62 @@
-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 { useGuideContext as x, useStore as G } from "@knocklabs/react-core";
+import { Button as C } from "@telegraph/button";
+import { Icon as T } from "@telegraph/icon";
+import { Box as h, Stack as n } from "@telegraph/layout";
+import { Tag as A } from "@telegraph/tag";
 import { Tooltip as y } from "@telegraph/tooltip";
-import { Text as g } from "@telegraph/typography";
-import { Gauge as N } from "lucide-react";
+import { Text as v } from "@telegraph/typography";
+import { Gauge as R } 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 = ({
+import { GuideAnnotatedStatusDot as i } from "./GuideAnnotatedStatusDot.mjs";
+import { GuideRowDetails as D, getSelectableStatusSummary as w } from "./GuideRowDetails.mjs";
+import { FOCUS_ERRORS as E } from "./helpers.mjs";
+import { isUncommittedGuide as l } from "./useInspectGuideClientStore.mjs";
+const z = "data-kgt-guide-row-key", S = ({
   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))
+}) => /* @__PURE__ */ t.createElement(n, { direction: "row", align: "center", gap: "0_5", px: "1", height: "5", bg: "surface-2", rounded: "full", border: "px", borderColor: "gray-4" }, /* @__PURE__ */ t.createElement(v, { as: "span", size: "0", color: o, weight: "medium" }, e), a), N = (e) => {
+  if (l(e))
     return {
       color: "red",
       label: "Inactive",
-      tooltip: "This guide has never been committed and published yet"
+      description: "This guide has never been committed and published yet"
     };
   const {
     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"
+  if (!o.active.status)
+    return {
+      color: "red",
+      label: "Inactive",
+      description: "This guide is inactive"
+    };
+  if (o.archived.status)
+    return {
+      color: "red",
+      label: "Archived",
+      description: "User has already dismissed this guide"
+    };
+  if (!o.targetable.status)
+    return {
+      color: "red",
+      label: "Not targeted",
+      description: o.targetable.message
+    };
+  const a = w(o.selectable.status);
+  return o.selectable.status === void 0 ? a : o.activatable.status ? {
+    ...a,
+    // Shorten the label we display here for space.
+    ...o.selectable.status === "returned" ? {
+      label: "Display"
+    } : void 0
   } : {
     color: "red",
     label: "Not activated",
-    tooltip: "This guide cannot be activated in the current location"
-  } : {
-    color: "red",
-    label: "Not targeted",
-    tooltip: o.targetable.message
-  } : {
-    color: "red",
-    label: "Inactive",
-    tooltip: "This guide is inactive"
+    description: "This guide cannot be activated in the current location"
   };
-}, q = (e) => {
-  if (i(e))
+}, O = (e) => {
+  if (l(e))
     return {
       active: {
         color: "gray"
@@ -85,72 +79,49 @@ const E = ({
   } = e, a = {
     color: o.active.status ? "blue" : "red",
     tooltip: `Active: ${o.active.status ? "Yes" : "No"}`
-  }, b = {
+  }, m = {
     color: o.archived.status ? "red" : "blue",
-    tooltip: `Not archived: ${o.archived.status ? "No" : "Yes"}`
+    tooltip: `Archived: ${o.archived.status ? "Yes" : "No"}`
   }, u = {
     color: o.targetable.status ? "blue" : "red",
-    tooltip: `Targeted: ${o.targetable.status ? "Yes" : "No"}`
-  }, d = {
+    tooltip: `Targeting: ${o.targetable.status ? "Yes" : "No"}`
+  }, b = {
     color: o.activatable.status ? "blue" : "red",
     tooltip: `Activated: ${o.activatable.status ? "Yes" : "No"}`
+  }, s = w(o.selectable.status), d = {
+    color: s.color,
+    tooltip: s.label
   };
-  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,
+    archived: m,
     targetable: u,
-    activatable: d,
-    selectable: l
+    activatable: b,
+    selectable: d
   };
-}, Q = ({
+}, P = ({
   guide: e,
   orderIndex: o,
   isExpanded: a,
-  onClick: b
+  onClick: m
 }) => {
   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: {
+  } = x(), {
+    debugSettings: b
+  } = G(u.store, (g) => ({
+    debugSettings: g.debug || {}
+  })), [s, d] = t.useState(!1), f = b.focusedGuideKeys || {}, _ = Object.keys(f).length > 0, c = !!f[e.key], r = O(e), p = N(e), k = {
+    [z]: e.key
+  };
+  return /* @__PURE__ */ t.createElement(h, { rounded: "3", overflow: "hidden", border: "px", borderStyle: "solid", borderColor: a ? "gray-6" : "transparent", onMouseEnter: () => d(!0), onMouseLeave: () => d(!1), style: {
     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: {
+  }, ...k }, /* @__PURE__ */ t.createElement(n, { h: "7", px: "1", gap: "1", align: "center", justify: "space-between", rounded: "3", overflow: "hidden", border: "px", borderStyle: "solid", borderColor: a ? "transparent" : c ? "gray-6" : s ? "gray-4" : "transparent", backgroundColor: a ? "surface-2" : c ? "gray-2" : s ? "surface-2" : "transparent", onClick: () => m(e.key) }, /* @__PURE__ */ t.createElement(n, { align: "center", gap: "1_5", style: {
     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: {
+  } }, /* @__PURE__ */ t.createElement(n, { w: "7", justify: "space-between", align: "center", gap: "0_5" }, /* @__PURE__ */ t.createElement(h, { w: "3" }, !e.bypass_global_group_limit && /* @__PURE__ */ t.createElement(T, { icon: R, size: "0", color: "gray", alt: "Subject to throttling" })), /* @__PURE__ */ t.createElement(v, { as: "span", size: "1", weight: "medium", color: e.bypass_global_group_limit ? "blue" : "default", style: {
     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: {
+  } }, o + 1)), /* @__PURE__ */ t.createElement(y, { label: `${e.key}${e.bypass_global_group_limit ? " (unthrottled)" : ""}` }, /* @__PURE__ */ t.createElement(v, { as: "code", size: "1", weight: "medium", color: "default", style: {
     display: "block",
     overflow: "hidden",
     textOverflow: "ellipsis",
@@ -158,16 +129,17 @@ const E = ({
     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 ? {} : {
+  } }, !_ && /* @__PURE__ */ t.createElement(y, { label: p.description }, /* @__PURE__ */ t.createElement(A, { size: "0", variant: "soft", color: p.color }, p.label)), /* @__PURE__ */ t.createElement(S, { label: "Elig:", color: l(e) ? "disabled" : e.annotation.isEligible ? "blue" : "gray" }, /* @__PURE__ */ t.createElement(i, { color: r.active.color, tooltip: r.active.tooltip }), /* @__PURE__ */ t.createElement(i, { color: r.archived.color, tooltip: r.archived.tooltip }), /* @__PURE__ */ t.createElement(i, { color: r.targetable.color, tooltip: r.targetable.tooltip })), /* @__PURE__ */ t.createElement(S, { label: "Vis:", color: l(e) ? "disabled" : e.annotation.isQualified && e.annotation.selectable.status === "returned" ? "blue" : "gray" }, /* @__PURE__ */ t.createElement(i, { color: r.activatable.color, tooltip: r.activatable.tooltip }), /* @__PURE__ */ t.createElement(i, { color: r.selectable.color, tooltip: r.selectable.tooltip })), /* @__PURE__ */ t.createElement(y, { label: l(e) ? E.focusUncommittedGuide : e.annotation.selectable.status === void 0 ? E.focusUnselectableGuide : "", enabled: l(e) || e.annotation.selectable.status === void 0 }, /* @__PURE__ */ t.createElement(C, { size: "0", variant: c ? "solid" : "outline", color: c ? "blue" : "gray", disabled: l(e) || e.annotation.selectable.status === void 0, onClick: (g) => {
+    g.stopPropagation(), u.setDebug({
+      ...b,
+      focusedGuideKeys: c ? {} : {
         [e.key]: !0
       }
     });
-  } }, "Focus")))), a && /* @__PURE__ */ t.createElement(G, { guide: e }));
+  } }, "Focus")))), a && /* @__PURE__ */ t.createElement(D, { guide: e }));
 };
 export {
-  Q as GuideRow
+  z as GUIDE_ROW_DATA_SELECTOR,
+  P as GuideRow
 };
 //# sourceMappingURL=GuideRow.mjs.map

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

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

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

@@ -1,51 +1,59 @@
 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,
+import { Box as c, Stack as l } from "@telegraph/layout";
+import { Tooltip as u } from "@telegraph/tooltip";
+import { Text as s } from "@telegraph/typography";
+import { GuideAnnotatedStatusDot as d } from "./GuideAnnotatedStatusDot.mjs";
+import { FOCUS_ERRORS as m } from "./helpers.mjs";
+import { isUncommittedGuide as p } from "./useInspectGuideClientStore.mjs";
+const n = ({
+  title: i,
   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: {
+}) => /* @__PURE__ */ e.createElement(l, { 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,
+} }, /* @__PURE__ */ e.createElement(s, { as: "span", size: "0", color: "gray", weight: "medium" }, i), /* @__PURE__ */ e.createElement(l, { direction: "column", gap: "1", mt: "1" }, t)), r = ({
+  label: i,
   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) {
+  color: a,
+  tooltip: o
+}) => /* @__PURE__ */ e.createElement(l, { align: "center", gap: "1" }, /* @__PURE__ */ e.createElement(u, { enabled: !!o, label: o, delayDuration: 500 }, /* @__PURE__ */ e.createElement(l, { as: "span", align: "center", gap: "1", display: "inline-flex" }, /* @__PURE__ */ e.createElement(d, { color: a, tooltip: `${i}: ${t}` }), /* @__PURE__ */ e.createElement(s, { as: "span", size: "1", weight: "medium" }, i, ":"), /* @__PURE__ */ e.createElement(s, { as: "span", size: "1", weight: "medium", color: a }, t)))), b = (i) => {
+  switch (i) {
     case "returned":
       return {
-        value: "Ready to display",
-        color: "blue"
+        label: "Ready to display",
+        color: "blue",
+        description: "This guide is queried and ready to display"
       };
     case "throttled":
       return {
-        value: "Throttled",
-        color: "yellow"
+        label: "Throttled",
+        color: "yellow",
+        description: "This guide is queried and ready to display, but throttled currently"
       };
     case "queried":
       return {
-        value: "Queued",
-        color: "gray"
+        label: "Queued",
+        color: "gray",
+        description: "This guide is queried but is not ready to display"
       };
     default:
       return {
-        value: "Not found",
-        color: "red"
+        label: "Not queried",
+        color: "red",
+        description: `This guide is not queried (${m.focusUnselectableGuide.toLowerCase()})`
       };
   }
-}, E = ({
-  guide: a
+}, x = ({
+  guide: i
 }) => {
-  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."));
+  if (p(i))
+    return /* @__PURE__ */ e.createElement(c, { px: "3", py: "2" }, /* @__PURE__ */ e.createElement(s, { 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 })));
+  } = i, a = b(t.selectable.status);
+  return /* @__PURE__ */ e.createElement(l, { px: "3", py: "2", gap: "2", direction: "row", align: "flex-start" }, /* @__PURE__ */ e.createElement(n, { title: "Eligibility" }, /* @__PURE__ */ e.createElement(r, { label: "Active", value: t.active.status ? "Yes" : "No", color: t.active.status ? "blue" : "red", tooltip: "Eligible if the guide is currently active" }), /* @__PURE__ */ e.createElement(r, { label: "Archived", value: t.archived.status ? "Yes" : "No", color: t.archived.status ? "red" : "blue", tooltip: "Eligible if the guide has not been dismissed/archived by the user already" }), /* @__PURE__ */ e.createElement(r, { label: "Targeting", value: t.targetable.status ? "Yes" : "No", color: t.targetable.status ? "blue" : "red", tooltip: "Eligible if the user meets the guide's targeting conditions" })), /* @__PURE__ */ e.createElement(n, { title: "Visibility" }, /* @__PURE__ */ e.createElement(r, { label: "Activation", value: t.activatable.status ? "Yes" : "No", color: t.activatable.status ? "blue" : "red", tooltip: "Visible when the user's current location matches the guide's activation rules" }), /* @__PURE__ */ e.createElement(r, { label: "Display", value: a.label, color: a.color, tooltip: /* @__PURE__ */ e.createElement(s, { as: "span", size: "1" }, "Visible when the guide is queried via `useGuide(s)` in the current page,", /* @__PURE__ */ e.createElement("br", null), "and ready to display per its position in the display pipeline:", /* @__PURE__ */ e.createElement("br", null), a.description) })));
 };
 export {
-  E as GuideRowDetails
+  x as GuideRowDetails,
+  b as getSelectableStatusSummary
 };
 //# sourceMappingURL=GuideRowDetails.mjs.map

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

@@ -1 +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":";;;;;AAaA,MAAMA,IAAgBA,CAAC;AAAA,EACrBC,OAAAA;AAAAA,EACAC,UAAAA;AAIF,MACEC,gBAAAA,EAAA,cAACC,KACC,WAAU,UACV,SAAQ,cACR,KAAI,KACJ,IAAG,OACH,IAAG,KACH,SAAQ,KACR,IAAG,aACH,QAAO,MACP,aAAY,UACZ,OAAO;AAAA,EAAEC,MAAM;AAAE,EAEjB,GAAAF,gBAAAA,EAAA,cAACG,KAAK,IAAG,QAAO,MAAK,KAAI,OAAM,QAAO,QAAO,SAAA,GAC1CL,CACH,GACAE,gBAAAA,EAAA,cAACC,KAAM,WAAU,UAAS,KAAI,KAAI,IAAG,IAClCF,GAAAA,CACH,CACF,GAGIK,IAAYA,CAAC;AAAA,EACjBC,OAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,OAAAA;AAKF,sCACGN,GAAM,EAAA,OAAM,UAAS,KAAI,OACvBD,gBAAAA,EAAA,cAAAQ,GAAA,EAAU,OAAAD,GAAc,SAAS,GAAGF,CAAK,KAAKC,CAAK,GAAA,CAAG,GACtDN,gBAAAA,EAAA,cAAAG,GAAA,EAAK,IAAG,QAAO,MAAK,KAAI,QAAO,YAC7BE,GAAM,GACT,GACAL,gBAAAA,EAAA,cAACG,GAAK,EAAA,IAAG,QAAO,MAAK,KAAI,QAAO,UAAS,OAAAI,KACtCD,CACH,CACF,GAGIG,IAAkBA,CACtBC,MAC0C;AAC1C,UAAQA,GAAM;AAAA,IACZ,KAAK;AACI,aAAA;AAAA,QAAEJ,OAAO;AAAA,QAAoBC,OAAO;AAAA,MAAO;AAAA,IACpD,KAAK;AACI,aAAA;AAAA,QAAED,OAAO;AAAA,QAAaC,OAAO;AAAA,MAAS;AAAA,IAC/C,KAAK;AACI,aAAA;AAAA,QAAED,OAAO;AAAA,QAAUC,OAAO;AAAA,MAAO;AAAA,IAC1C;AACS,aAAA;AAAA,QAAED,OAAO;AAAA,QAAaC,OAAO;AAAA,MAAM;AAAA,EAAA;AAEhD,GAEaI,IAAkBA,CAAC;AAAA,EAC9BC,OAAAA;AAGF,MAAM;AACAC,MAAAA,EAAeD,CAAK;AACtB,WACGZ,gBAAAA,EAAA,cAAAc,GAAA,EAAI,IAAG,KAAI,IAAG,IACb,GAAAd,gBAAAA,EAAA,cAACG,GAAK,EAAA,IAAG,QAAO,MAAK,KAAI,OAAM,UAAM,oDAErC,CACF;AAIE,QAAA;AAAA,IAAEY,YAAAA;AAAAA,EAAAA,IAAeH,GACjBI,IAAUP,EAAgBM,EAAWE,WAAWP,MAAM;AAG1D,SAAAV,gBAAAA,EAAA,cAACC,KAAM,IAAG,KAAI,IAAG,KAAI,KAAI,KAAI,WAAU,OAAM,OAAM,gBAChDD,gBAAAA,EAAA,cAAAH,GAAA,EAAc,OAAM,cACnB,GAAAG,gBAAAA,EAAA,cAACI,KACC,OAAM,UACN,OAAOW,EAAWG,OAAOR,SAAS,QAAQ,MAC1C,OAAOK,EAAWG,OAAOR,SAAS,SAAS,MAAM,CAAA,GAElDV,gBAAAA,EAAA,cAAAI,GAAA,EACC,OAAM,gBACN,OAAQW,EAAWI,SAAST,SAAiB,OAAR,OACrC,OAAQK,EAAWI,SAAST,SAAkB,QAAT,QAAe,GAErDV,gBAAAA,EAAA,cAAAI,GAAA,EACC,OAAM,aACN,OAAOW,EAAWK,WAAWV,SAAS,QAAQ,MAC9C,OAAOK,EAAWK,WAAWV,SAAS,SAAS,MAAM,CAAA,CAEzD,mCAECb,GAAc,EAAA,OAAM,aACnB,GAAAG,gBAAAA,EAAA,cAACI,GACC,EAAA,OAAM,cACN,OAAOW,EAAWM,YAAYX,SAAS,QAAQ,MAC/C,OAAOK,EAAWM,YAAYX,SAAS,SAAS,OAAM,GAEvDV,gBAAAA,EAAA,cAAAI,GAAA,EACC,OAAM,WACN,OAAOY,EAAQV,OACf,OAAOU,EAAQT,MAAM,CAAA,CAEzB,CACF;AAEJ;"}
+{"version":3,"file":"GuideRowDetails.mjs","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/GuideRowDetails.tsx"],"sourcesContent":["import { Box, Stack } from \"@telegraph/layout\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text } from \"@telegraph/typography\";\n\nimport {\n  StatusColor,\n  GuideAnnotatedStatusDot as StatusDot,\n} from \"./GuideAnnotatedStatusDot\";\nimport { FOCUS_ERRORS } from \"./helpers\";\nimport {\n  AnnotatedGuide,\n  UncommittedGuide,\n  isUncommittedGuide,\n} from \"./useInspectGuideClientStore\";\n\nconst CardContainer = ({\n  title,\n  children,\n}: {\n  title: string;\n  children: React.ReactNode;\n}) => (\n  <Stack\n    direction=\"column\"\n    justify=\"flex-start\"\n    gap=\"1\"\n    px=\"1_5\"\n    py=\"1\"\n    rounded=\"2\"\n    bg=\"surface-1\"\n    border=\"px\"\n    borderColor=\"gray-4\"\n    style={{ flex: 1 }}\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  tooltip,\n}: {\n  label: string;\n  value: string;\n  color: StatusColor;\n  tooltip?: React.ReactNode;\n}) => {\n  return (\n    <Stack align=\"center\" gap=\"1\">\n      <Tooltip enabled={!!tooltip} label={tooltip} delayDuration={500}>\n        <Stack as=\"span\" align=\"center\" gap=\"1\" display=\"inline-flex\">\n          <StatusDot color={color} tooltip={`${label}: ${value}`} />\n          <Text as=\"span\" size=\"1\" weight=\"medium\">\n            {label}:\n          </Text>\n          <Text as=\"span\" size=\"1\" weight=\"medium\" color={color}>\n            {value}\n          </Text>\n        </Stack>\n      </Tooltip>\n    </Stack>\n  );\n};\n\nexport type StatusSummary = {\n  color: StatusColor;\n  label: string;\n  description: string;\n};\n\nexport const getSelectableStatusSummary = (\n  status: \"returned\" | \"throttled\" | \"queried\" | undefined,\n): StatusSummary => {\n  switch (status) {\n    case \"returned\":\n      return {\n        label: \"Ready to display\",\n        color: \"blue\",\n        description: \"This guide is queried and ready to display\",\n      };\n    case \"throttled\":\n      return {\n        label: \"Throttled\",\n        color: \"yellow\",\n        description:\n          \"This guide is queried and ready to display, but throttled currently\",\n      };\n    case \"queried\":\n      return {\n        label: \"Queued\",\n        color: \"gray\",\n        description: \"This guide is queried but is not ready to display\",\n      };\n    default:\n      return {\n        label: \"Not queried\",\n        color: \"red\",\n        description: `This guide is not queried (${FOCUS_ERRORS.focusUnselectableGuide.toLowerCase()})`,\n      };\n  }\n};\n\nexport const GuideRowDetails = ({\n  guide,\n}: {\n  guide: AnnotatedGuide | UncommittedGuide;\n}) => {\n  if (isUncommittedGuide(guide)) {\n    return (\n      <Box px=\"3\" py=\"2\">\n        <Text as=\"span\" size=\"1\" color=\"gray\">\n          This guide has never been committed and published.\n        </Text>\n      </Box>\n    );\n  }\n\n  const { annotation } = guide;\n  const selectableStatusSummary = getSelectableStatusSummary(\n    annotation.selectable.status,\n  );\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          tooltip=\"Eligible if the guide is currently active\"\n        />\n        <StatusRow\n          label=\"Archived\"\n          value={annotation.archived.status ? \"Yes\" : \"No\"}\n          color={annotation.archived.status ? \"red\" : \"blue\"}\n          tooltip=\"Eligible if the guide has not been dismissed/archived by the user already\"\n        />\n        <StatusRow\n          label=\"Targeting\"\n          value={annotation.targetable.status ? \"Yes\" : \"No\"}\n          color={annotation.targetable.status ? \"blue\" : \"red\"}\n          tooltip=\"Eligible if the user meets the guide's targeting conditions\"\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          tooltip=\"Visible when the user's current location matches the guide's activation rules\"\n        />\n        <StatusRow\n          label=\"Display\"\n          value={selectableStatusSummary.label}\n          color={selectableStatusSummary.color}\n          tooltip={\n            <Text as=\"span\" size=\"1\">\n              Visible when the guide is queried via `useGuide(s)` in the current\n              page,\n              <br />\n              and ready to display per its position in the display pipeline:\n              <br />\n              {selectableStatusSummary.description}\n            </Text>\n          }\n        />\n      </CardContainer>\n    </Stack>\n  );\n};\n"],"names":["CardContainer","title","children","React","Stack","flex","Text","StatusRow","label","value","color","tooltip","Tooltip","StatusDot","getSelectableStatusSummary","status","description","FOCUS_ERRORS","focusUnselectableGuide","toLowerCase","GuideRowDetails","guide","isUncommittedGuide","Box","annotation","selectableStatusSummary","selectable","active","archived","targetable","activatable"],"mappings":"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"}