@knocklabs/react 0.12.1 → 0.13.1

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

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

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

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