@knocklabs/react 0.11.12 → 0.11.14

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"V2.mjs","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/V2.tsx"],"sourcesContent":["import { useGuideContext } from \"@knocklabs/react-core\";\nimport { Button } from \"@telegraph/button\";\nimport { Icon } from \"@telegraph/icon\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport { SegmentedControl } from \"@telegraph/segmented-control\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text } from \"@telegraph/typography\";\nimport {\n  ChevronDown,\n  ChevronRight,\n  GripVertical,\n  LogOut,\n  Minimize2,\n  SlidersHorizontal,\n} from \"lucide-react\";\nimport React from \"react\";\n\nimport { KnockButton } from \"../KnockButton\";\nimport { TOOLBAR_Z_INDEX } from \"../shared\";\nimport \"../styles.css\";\n\nimport { FocusChin } from \"./FocusChin\";\nimport { GuideContextDetails } from \"./GuideContextDetails\";\nimport { GuideRow } from \"./GuideRow\";\nimport { DisplayOption, clearRunConfigLS, getRunConfig } from \"./helpers\";\nimport { useDraggable } from \"./useDraggable\";\nimport {\n  InspectionResultOk,\n  useInspectGuideClientStore,\n} from \"./useInspectGuideClientStore\";\n\nconst TOGGLE_COLLAPSED_HOTKEY = \".\";\n\nconst TOOLBAR_WIDTH = \"540px\";\n\nconst Kbd = ({ children }: { children: React.ReactNode }) => {\n  return (\n    <kbd\n      style={{\n        display: \"inline-block\",\n        padding: \"1px 4px\",\n        borderRadius: \"var(--tgph-rounded-2)\",\n        border: \"1px solid rgba(255, 255, 255, 0.3)\",\n        backgroundColor: \"rgba(255, 255, 255, 0.15)\",\n      }}\n    >\n      {children}\n    </kbd>\n  );\n};\n\nconst filterGuides = (\n  guides: InspectionResultOk[\"guides\"],\n  displayOption: DisplayOption,\n) => {\n  return guides.filter((guide) => {\n    const { isEligible, isQualified } = guide.annotation;\n    const isDisplayable = isEligible && isQualified;\n\n    if (displayOption === \"only-displayable\" && !isDisplayable) {\n      return false;\n    }\n    if (displayOption === \"only-eligible\" && !isEligible) {\n      return false;\n    }\n    if (displayOption === \"only-active\" && !guide.annotation.active.status) {\n      return false;\n    }\n    return true;\n  });\n};\n\nexport const V2 = () => {\n  const { client } = useGuideContext();\n\n  const [displayOption, setDisplayOption] =\n    React.useState<DisplayOption>(\"only-active\");\n  const [runConfig, setRunConfig] = React.useState(() => getRunConfig());\n  const [isCollapsed, setIsCollapsed] = React.useState(false);\n  const [isContextPanelOpen, setIsContextPanelOpen] = React.useState(false);\n\n  const [expandedGuideRowKey, setExpandedGuideRowKey] = React.useState<\n    string | undefined\n  >();\n\n  React.useEffect(() => {\n    setExpandedGuideRowKey(undefined);\n  }, [displayOption]);\n\n  React.useEffect(() => {\n    const { isVisible = false, focusedGuideKeys = {} } = runConfig || {};\n    const isDebugging = client.store.state.debug?.debugging;\n    if (isVisible && !isDebugging) {\n      client.setDebug({ focusedGuideKeys });\n\n      // If focused, switch to all guides so you can see in the list.\n      if (Object.keys(focusedGuideKeys).length > 0) {\n        setDisplayOption(\"all-guides\");\n      }\n    }\n\n    return () => {\n      client.unsetDebug();\n    };\n  }, [runConfig, client, setDisplayOption]);\n\n  // Toggle collapsed state with Ctrl + .\n  React.useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.ctrlKey && e.key === TOGGLE_COLLAPSED_HOTKEY && !e.repeat) {\n        e.preventDefault();\n        setIsCollapsed((prev) => !prev);\n      }\n    };\n\n    window.addEventListener(\"keydown\", handleKeyDown);\n    return () => {\n      window.removeEventListener(\"keydown\", handleKeyDown);\n    };\n  }, []);\n\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const guideListRef = React.useRef<HTMLDivElement>(null);\n  const { position, isDragging, handlePointerDown, hasDraggedRef } =\n    useDraggable({\n      elementRef: containerRef,\n      reclampDeps: [isCollapsed],\n      initialPosition: { top: 16, right: 16 },\n    });\n\n  const result = useInspectGuideClientStore(runConfig);\n  if (!result || !runConfig?.isVisible) {\n    return null;\n  }\n\n  const guides =\n    result.status === \"ok\" ? filterGuides(result.guides, displayOption) : [];\n\n  return (\n    <Box\n      tgphRef={containerRef}\n      position=\"fixed\"\n      style={{\n        top: position.top + \"px\",\n        right: position.right + \"px\",\n        zIndex: TOOLBAR_Z_INDEX,\n      }}\n    >\n      {isCollapsed ? (\n        <Tooltip\n          side=\"left\"\n          delayDuration={500}\n          label={\n            <Text as=\"span\" size=\"1\">\n              Guide Toolbar\n              <Stack display=\"inline-block\" ml=\"3\">\n                <Kbd>ctrl</Kbd> + <Kbd>.</Kbd>\n              </Stack>\n            </Text>\n          }\n        >\n          <Stack\n            border=\"px\"\n            rounded=\"4\"\n            align=\"center\"\n            justify=\"center\"\n            w=\"10\"\n            h=\"10\"\n            onPointerDown={handlePointerDown}\n            backgroundColor=\"surface-1\"\n            style={{\n              cursor: isDragging ? \"grabbing\" : \"grab\",\n              touchAction: \"none\",\n              userSelect: \"none\",\n              animation: \"toolbar-collapse-fade-in 150ms ease-out\",\n            }}\n          >\n            <Box\n              style={{\n                transform: \"scale(0.7)\",\n                transformOrigin: \"center center\",\n              }}\n            >\n              <KnockButton\n                onClick={() => {\n                  if (!hasDraggedRef.current) {\n                    setIsCollapsed(false);\n                  }\n                }}\n                positioned={false}\n              />\n            </Box>\n          </Stack>\n        </Tooltip>\n      ) : (\n        <Stack\n          direction=\"column\"\n          backgroundColor=\"surface-1\"\n          rounded=\"4\"\n          border=\"px\"\n          overflow=\"hidden\"\n          style={{\n            width: TOOLBAR_WIDTH,\n            boxShadow: \"0 8px 32px var(--tgph-gray-5)\",\n            animation: \"toolbar-expand-fade-in 150ms ease-out\",\n          }}\n        >\n          {/* Header — also acts as drag handle area */}\n          <Stack\n            w=\"full\"\n            p=\"2\"\n            justify=\"space-between\"\n            direction=\"row\"\n            align=\"center\"\n            gap=\"2\"\n            borderBottom=\"px\"\n            onPointerDown={handlePointerDown}\n            style={{\n              boxSizing: \"border-box\",\n              cursor: isDragging ? \"grabbing\" : \"grab\",\n              touchAction: \"none\",\n              userSelect: \"none\",\n            }}\n          >\n            {/* Left: drag icon + segmented control + settings */}\n            <Stack align=\"center\" gap=\"1_5\" style={{ minWidth: 0, flex: 1 }}>\n              <Stack\n                display=\"inline-flex\"\n                align=\"center\"\n                style={{\n                  cursor: isDragging ? \"grabbing\" : \"grab\",\n                  touchAction: \"none\",\n                  userSelect: \"none\",\n                }}\n                onPointerDown={(e: React.PointerEvent) => {\n                  // Already handled by parent, prevent double-fire\n                  e.stopPropagation();\n                  handlePointerDown(e);\n                }}\n              >\n                <Icon color=\"gray\" size=\"1\" icon={GripVertical} aria-hidden />\n              </Stack>\n              <Stack\n                align=\"center\"\n                gap=\"1_5\"\n                onPointerDown={(e: React.PointerEvent) => e.stopPropagation()}\n              >\n                <SegmentedControl.Root\n                  size=\"1\"\n                  type=\"single\"\n                  value={displayOption}\n                  onValueChange={(val: DisplayOption) => {\n                    if (!val) return;\n\n                    const debugSettings = client.store.state.debug;\n\n                    const focusedGuideKeys = Object.keys(\n                      debugSettings?.focusedGuideKeys || {},\n                    );\n\n                    // Exit out of focus if the currently focused guide is not\n                    // part of the selected list filter.\n                    if (result.status === \"ok\" && focusedGuideKeys.length > 0) {\n                      const currFocusedGuide = filterGuides(\n                        result.guides,\n                        val,\n                      ).find((g) => g.key === focusedGuideKeys[0]);\n\n                      if (!currFocusedGuide) {\n                        client.setDebug({\n                          ...debugSettings,\n                          focusedGuideKeys: {},\n                        });\n                      }\n                    }\n\n                    setDisplayOption(val);\n                  }}\n                >\n                  <SegmentedControl.Option\n                    value=\"all-guides\"\n                    style={{ width: \"54px\" }}\n                  >\n                    All\n                  </SegmentedControl.Option>\n                  <SegmentedControl.Option\n                    value=\"only-active\"\n                    style={{ width: \"54px\" }}\n                  >\n                    Active\n                  </SegmentedControl.Option>\n                  <SegmentedControl.Option\n                    value=\"only-eligible\"\n                    style={{ width: \"54px\" }}\n                  >\n                    Eligible\n                  </SegmentedControl.Option>\n                  {/* Note: `only-displayable` is not available for now */}\n                </SegmentedControl.Root>\n\n                <Tooltip label=\"Settings & target params\">\n                  <Button\n                    size=\"1\"\n                    variant={isContextPanelOpen ? \"outline\" : \"ghost\"}\n                    color={isContextPanelOpen ? \"blue\" : \"gray\"}\n                    leadingIcon={{\n                      icon: SlidersHorizontal,\n                      alt: \"Inspect target params\",\n                    }}\n                    trailingIcon={\n                      isContextPanelOpen\n                        ? { icon: ChevronDown, alt: \"Hide context data\" }\n                        : { icon: ChevronRight, alt: \"Show context data\" }\n                    }\n                    onClick={() => setIsContextPanelOpen((v) => !v)}\n                  />\n                </Tooltip>\n              </Stack>\n            </Stack>\n\n            {/* Right: exit + minimize buttons */}\n            <Stack\n              align=\"center\"\n              gap=\"1_5\"\n              style={{ flexShrink: 0 }}\n              onPointerDown={(e: React.PointerEvent) => e.stopPropagation()}\n            >\n              <Stack align=\"center\" gap=\"1_5\">\n                <Button\n                  size=\"1\"\n                  variant=\"outline\"\n                  leadingIcon={{ icon: LogOut, alt: \"Exit\" }}\n                  onClick={() => {\n                    setRunConfig((curr) => ({ ...curr, isVisible: false }));\n                    clearRunConfigLS();\n                    client.unsetDebug();\n                  }}\n                >\n                  Exit\n                </Button>\n                <Tooltip label=\"Minimize toolbar\">\n                  <Button\n                    size=\"1\"\n                    variant=\"outline\"\n                    leadingIcon={{ icon: Minimize2, alt: \"Minimize\" }}\n                    onClick={() => setIsCollapsed(true)}\n                  />\n                </Tooltip>\n              </Stack>\n            </Stack>\n          </Stack>\n\n          {/* Collapsible panel to show context data */}\n          {isContextPanelOpen && (\n            <Box borderBottom=\"px\">\n              <GuideContextDetails />\n            </Box>\n          )}\n\n          {/* Guide list content area */}\n          <Box\n            tgphRef={guideListRef}\n            p=\"1\"\n            overflow=\"auto\"\n            style={{ maxHeight: \"calc(80vh - 96px)\" }}\n          >\n            {result.status === \"error\" ? (\n              <Box px=\"2\" pb=\"1\" style={{ lineHeight: \"1.2\" }}>\n                <Text\n                  as=\"span\"\n                  size=\"1\"\n                  weight=\"medium\"\n                  color={\n                    result.error === \"no_guides_fetched\" ? \"default\" : \"red\"\n                  }\n                >\n                  {result.message}\n                </Text>\n              </Box>\n            ) : guides.length === 0 ? (\n              <Box px=\"2\" pb=\"1\" style={{ lineHeight: \"1.2\" }}>\n                <Text as=\"span\" size=\"1\" weight=\"medium\" color=\"default\">\n                  No guides match the current filter.\n                </Text>\n              </Box>\n            ) : (\n              guides.map((guide) => (\n                <GuideRow\n                  key={guide.key}\n                  guide={guide}\n                  orderIndex={guide.orderIndex}\n                  isExpanded={guide.key === expandedGuideRowKey}\n                  onClick={() => {\n                    setExpandedGuideRowKey((k) =>\n                      k && k === guide.key ? undefined : guide.key,\n                    );\n                  }}\n                />\n              ))\n            )}\n          </Box>\n\n          {/* Focus chin with dedicated controls */}\n          <FocusChin guides={guides} guideListRef={guideListRef} />\n        </Stack>\n      )}\n    </Box>\n  );\n};\n"],"names":["TOGGLE_COLLAPSED_HOTKEY","TOOLBAR_WIDTH","Kbd","children","React","display","padding","borderRadius","border","backgroundColor","filterGuides","guides","displayOption","filter","guide","isEligible","isQualified","annotation","active","status","V2","client","useGuideContext","setDisplayOption","useState","runConfig","setRunConfig","getRunConfig","isCollapsed","setIsCollapsed","isContextPanelOpen","setIsContextPanelOpen","expandedGuideRowKey","setExpandedGuideRowKey","useEffect","undefined","isVisible","focusedGuideKeys","isDebugging","store","state","debug","debugging","setDebug","Object","keys","length","unsetDebug","handleKeyDown","e","ctrlKey","key","repeat","preventDefault","prev","addEventListener","removeEventListener","containerRef","useRef","guideListRef","position","isDragging","handlePointerDown","hasDraggedRef","useDraggable","elementRef","reclampDeps","initialPosition","top","right","result","useInspectGuideClientStore","Box","zIndex","TOOLBAR_Z_INDEX","Tooltip","Text","Stack","cursor","touchAction","userSelect","animation","transform","transformOrigin","KnockButton","current","width","boxShadow","boxSizing","minWidth","flex","stopPropagation","Icon","GripVertical","SegmentedControl","val","debugSettings","find","g","Button","icon","SlidersHorizontal","alt","ChevronDown","ChevronRight","v","flexShrink","LogOut","curr","clearRunConfigLS","Minimize2","GuideContextDetails","maxHeight","lineHeight","error","message","map","GuideRow","orderIndex","k","FocusChin"],"mappings":"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"}
+{"version":3,"file":"V2.mjs","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/V2.tsx"],"sourcesContent":["import { KnockGuideClient } from \"@knocklabs/client\";\nimport { useGuideContext } from \"@knocklabs/react-core\";\nimport { Button } from \"@telegraph/button\";\nimport { Icon } from \"@telegraph/icon\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport { SegmentedControl } from \"@telegraph/segmented-control\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text } from \"@telegraph/typography\";\nimport {\n  ChevronDown,\n  ChevronRight,\n  GripVertical,\n  LogOut,\n  Minimize2,\n  SlidersHorizontal,\n} from \"lucide-react\";\nimport React from \"react\";\n\nimport { KnockButton } from \"../KnockButton\";\nimport { TOOLBAR_Z_INDEX } from \"../shared\";\nimport \"../styles.css\";\n\nimport { FocusChin } from \"./FocusChin\";\nimport { GuideContextDetails } from \"./GuideContextDetails\";\nimport { GuideRow } from \"./GuideRow\";\nimport { DisplayOption, sharedTooltipProps } from \"./helpers\";\nimport { useDraggable } from \"./useDraggable\";\nimport {\n  InspectionResultOk,\n  useInspectGuideClientStore,\n} from \"./useInspectGuideClientStore\";\n\nconst TOGGLE_COLLAPSED_HOTKEY = \".\";\n\nconst TOOLBAR_WIDTH = \"540px\";\n\nconst TOOLBAR_BOX_SHADOW = [\n  \"0 0 0 1px rgba(0, 0, 0, 0.06)\",\n  \"0 0 0 1px rgba(255, 255, 255, 0.10)\",\n  \"inset 0 1px 0 rgba(255, 255, 255, 0.04)\",\n  \"0 1px 1px 0 rgba(0, 0, 0, 0.04)\",\n  \"0 4px 6px -1px rgba(0, 0, 0, 0.05)\",\n  \"0 8px 16px -4px rgba(0, 0, 0, 0.06)\",\n].join(\", \");\n\nconst Kbd = ({ children }: { children: React.ReactNode }) => {\n  return (\n    <kbd\n      style={{\n        display: \"inline-block\",\n        padding: \"1px 4px\",\n        borderRadius: \"var(--tgph-rounded-2)\",\n        border: \"1px solid rgba(255, 255, 255, 0.3)\",\n        backgroundColor: \"rgba(255, 255, 255, 0.15)\",\n      }}\n    >\n      {children}\n    </kbd>\n  );\n};\n\nconst getEmptyStateMessage = (displayOption: DisplayOption) => {\n  switch (displayOption) {\n    case \"all-guides\":\n      return \"You have no guides. Get started by creating a guide.\";\n    case \"only-active\":\n      return \"There are no active guides.\";\n    case \"only-eligible\":\n      return \"Your current user is not eligible for any guides.\";\n  }\n};\n\nconst filterGuides = (\n  guides: InspectionResultOk[\"guides\"],\n  displayOption: DisplayOption,\n) => {\n  return guides.filter((guide) => {\n    if (displayOption === \"only-eligible\" && !guide.annotation.isEligible) {\n      return false;\n    }\n    if (displayOption === \"only-active\" && !guide.annotation.active.status) {\n      return false;\n    }\n    return true;\n  });\n};\n\ntype Props = {\n  readyToTarget: boolean;\n};\n\nexport const V2 = ({ readyToTarget }: Props) => {\n  const { client } = useGuideContext();\n\n  const [displayOption, setDisplayOption] =\n    React.useState<DisplayOption>(\"only-active\");\n  const [runConfig, setRunConfig] = React.useState(() =>\n    KnockGuideClient.getToolbarRunConfigFromUrl(),\n  );\n  const [isCollapsed, setIsCollapsed] = React.useState(false);\n  const [isContextPanelOpen, setIsContextPanelOpen] = React.useState(false);\n\n  const [expandedGuideRowKey, setExpandedGuideRowKey] = React.useState<\n    string | undefined\n  >();\n\n  React.useEffect(() => {\n    setExpandedGuideRowKey(undefined);\n  }, [displayOption]);\n\n  React.useEffect(() => {\n    const { isVisible = false, focusedGuideKeys = {} } = runConfig || {};\n    const isDebugging = client.store.state.debug?.debugging;\n    if (isVisible && !isDebugging && readyToTarget) {\n      client.setDebug({ focusedGuideKeys });\n\n      // If focused, switch to all guides so you can see in the list.\n      if (Object.keys(focusedGuideKeys).length > 0) {\n        setDisplayOption(\"all-guides\");\n      }\n    }\n\n    return () => {\n      client.unsetDebug();\n    };\n  }, [readyToTarget, runConfig, client, setDisplayOption]);\n\n  // Toggle collapsed state with Ctrl + .\n  React.useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.ctrlKey && e.key === TOGGLE_COLLAPSED_HOTKEY && !e.repeat) {\n        e.preventDefault();\n        setIsCollapsed((prev) => !prev);\n      }\n    };\n\n    window.addEventListener(\"keydown\", handleKeyDown);\n    return () => {\n      window.removeEventListener(\"keydown\", handleKeyDown);\n    };\n  }, []);\n\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const guideListRef = React.useRef<HTMLDivElement>(null);\n  const { position, isDragging, handlePointerDown, hasDraggedRef } =\n    useDraggable({\n      elementRef: containerRef,\n      reclampDeps: [isCollapsed],\n      initialPosition: { top: 16, right: 16 },\n    });\n\n  const result = useInspectGuideClientStore(runConfig);\n  if (!result || !runConfig?.isVisible) {\n    return null;\n  }\n\n  const guides =\n    result.status === \"ok\" ? filterGuides(result.guides, displayOption) : [];\n\n  return (\n    <Box\n      tgphRef={containerRef}\n      position=\"fixed\"\n      style={{\n        top: position.top + \"px\",\n        right: position.right + \"px\",\n        zIndex: TOOLBAR_Z_INDEX,\n      }}\n    >\n      {isCollapsed ? (\n        <Tooltip\n          side=\"left\"\n          label={\n            <Text as=\"span\" size=\"1\">\n              Guide Toolbar\n              <Stack display=\"inline-block\" ml=\"3\">\n                <Kbd>ctrl</Kbd> + <Kbd>.</Kbd>\n              </Stack>\n            </Text>\n          }\n          {...sharedTooltipProps}\n        >\n          <Stack\n            border=\"px\"\n            rounded=\"4\"\n            align=\"center\"\n            justify=\"center\"\n            w=\"10\"\n            h=\"10\"\n            onPointerDown={handlePointerDown}\n            backgroundColor=\"surface-1\"\n            style={{\n              cursor: isDragging ? \"grabbing\" : \"grab\",\n              touchAction: \"none\",\n              userSelect: \"none\",\n              animation: \"toolbar-collapse-fade-in 150ms ease-out\",\n            }}\n          >\n            <Box\n              style={{\n                transform: \"scale(0.7)\",\n                transformOrigin: \"center center\",\n              }}\n            >\n              <KnockButton\n                onClick={() => {\n                  if (!hasDraggedRef.current) {\n                    setIsCollapsed(false);\n                  }\n                }}\n                positioned={false}\n              />\n            </Box>\n          </Stack>\n        </Tooltip>\n      ) : (\n        <Stack\n          direction=\"column\"\n          backgroundColor=\"surface-1\"\n          rounded=\"4\"\n          overflow=\"hidden\"\n          style={{\n            width: TOOLBAR_WIDTH,\n            boxShadow: TOOLBAR_BOX_SHADOW,\n            animation: \"toolbar-expand-fade-in 150ms ease-out\",\n          }}\n        >\n          {/* Header — also acts as drag handle area */}\n          <Stack\n            w=\"full\"\n            p=\"2\"\n            justify=\"space-between\"\n            direction=\"row\"\n            align=\"center\"\n            gap=\"2\"\n            borderBottom=\"px\"\n            onPointerDown={handlePointerDown}\n            style={{\n              boxSizing: \"border-box\",\n              cursor: isDragging ? \"grabbing\" : \"grab\",\n              touchAction: \"none\",\n              userSelect: \"none\",\n            }}\n          >\n            {/* Left: drag icon + segmented control + settings */}\n            <Stack align=\"center\" gap=\"1_5\" style={{ minWidth: 0, flex: 1 }}>\n              <Stack\n                display=\"inline-flex\"\n                align=\"center\"\n                style={{\n                  cursor: isDragging ? \"grabbing\" : \"grab\",\n                  touchAction: \"none\",\n                  userSelect: \"none\",\n                }}\n                onPointerDown={(e: React.PointerEvent) => {\n                  // Already handled by parent, prevent double-fire\n                  e.stopPropagation();\n                  handlePointerDown(e);\n                }}\n              >\n                <Icon color=\"gray\" size=\"1\" icon={GripVertical} aria-hidden />\n              </Stack>\n              <Stack\n                align=\"center\"\n                gap=\"1_5\"\n                onPointerDown={(e: React.PointerEvent) => e.stopPropagation()}\n              >\n                <SegmentedControl.Root\n                  size=\"1\"\n                  type=\"single\"\n                  value={displayOption}\n                  onValueChange={(val: DisplayOption) => {\n                    if (!val) return;\n\n                    const debugSettings = client.store.state.debug;\n\n                    const focusedGuideKeys = Object.keys(\n                      debugSettings?.focusedGuideKeys || {},\n                    );\n\n                    // Exit out of focus if the currently focused guide is not\n                    // part of the selected list filter.\n                    if (result.status === \"ok\" && focusedGuideKeys.length > 0) {\n                      const currFocusedGuide = filterGuides(\n                        result.guides,\n                        val,\n                      ).find((g) => g.key === focusedGuideKeys[0]);\n\n                      if (!currFocusedGuide) {\n                        client.setDebug({\n                          ...debugSettings,\n                          focusedGuideKeys: {},\n                        });\n                      }\n                    }\n\n                    setDisplayOption(val);\n                  }}\n                >\n                  <SegmentedControl.Option\n                    value=\"all-guides\"\n                    style={{ width: \"54px\" }}\n                  >\n                    All\n                  </SegmentedControl.Option>\n                  <SegmentedControl.Option\n                    value=\"only-active\"\n                    style={{ width: \"54px\" }}\n                  >\n                    Active\n                  </SegmentedControl.Option>\n                  <SegmentedControl.Option\n                    value=\"only-eligible\"\n                    style={{ width: \"54px\" }}\n                  >\n                    Eligible\n                  </SegmentedControl.Option>\n                </SegmentedControl.Root>\n\n                <Tooltip label=\"Settings\" {...sharedTooltipProps}>\n                  <Button\n                    size=\"1\"\n                    variant={isContextPanelOpen ? \"outline\" : \"ghost\"}\n                    color={isContextPanelOpen ? \"blue\" : \"gray\"}\n                    leadingIcon={{\n                      icon: SlidersHorizontal,\n                      alt: \"Inspect target params\",\n                    }}\n                    trailingIcon={\n                      isContextPanelOpen\n                        ? { icon: ChevronDown, alt: \"Hide context data\" }\n                        : { icon: ChevronRight, alt: \"Show context data\" }\n                    }\n                    onClick={() => setIsContextPanelOpen((v) => !v)}\n                  />\n                </Tooltip>\n              </Stack>\n            </Stack>\n\n            {/* Right: exit + minimize buttons */}\n            <Stack\n              align=\"center\"\n              gap=\"1_5\"\n              style={{ flexShrink: 0 }}\n              onPointerDown={(e: React.PointerEvent) => e.stopPropagation()}\n            >\n              <Stack align=\"center\" gap=\"1_5\">\n                <Button\n                  size=\"1\"\n                  variant=\"outline\"\n                  leadingIcon={{ icon: LogOut, alt: \"Exit\" }}\n                  onClick={() => {\n                    setRunConfig((curr) => ({ ...curr, isVisible: false }));\n                    client.unsetDebug();\n                  }}\n                >\n                  Exit\n                </Button>\n                <Tooltip label=\"Minimize toolbar\" {...sharedTooltipProps}>\n                  <Button\n                    size=\"1\"\n                    variant=\"outline\"\n                    leadingIcon={{ icon: Minimize2, alt: \"Minimize\" }}\n                    onClick={() => setIsCollapsed(true)}\n                  />\n                </Tooltip>\n              </Stack>\n            </Stack>\n          </Stack>\n\n          {/* Collapsible panel to show context data */}\n          {isContextPanelOpen && (\n            <Box borderBottom=\"px\">\n              <GuideContextDetails />\n            </Box>\n          )}\n\n          {/* Guide list content area */}\n          <Box\n            tgphRef={guideListRef}\n            p=\"1\"\n            overflow=\"auto\"\n            style={{ maxHeight: \"calc(80vh - 96px)\" }}\n          >\n            {result.status === \"error\" ? (\n              <Box px=\"2\" pb=\"1\" style={{ lineHeight: \"1.2\" }}>\n                <Text\n                  as=\"span\"\n                  size=\"1\"\n                  weight=\"medium\"\n                  color={\n                    result.error === \"no_guides_fetched\" ? \"default\" : \"red\"\n                  }\n                >\n                  {result.message}\n                </Text>\n              </Box>\n            ) : guides.length === 0 ? (\n              <Box px=\"2\" pb=\"1\" style={{ lineHeight: \"1.2\" }}>\n                <Text as=\"span\" size=\"1\" weight=\"medium\" color=\"default\">\n                  {getEmptyStateMessage(displayOption)}\n                </Text>\n              </Box>\n            ) : (\n              guides.map((guide) => (\n                <GuideRow\n                  key={guide.key}\n                  guide={guide}\n                  orderIndex={guide.orderIndex}\n                  isExpanded={guide.key === expandedGuideRowKey}\n                  onClick={() => {\n                    setExpandedGuideRowKey((k) =>\n                      k && k === guide.key ? undefined : guide.key,\n                    );\n                  }}\n                />\n              ))\n            )}\n          </Box>\n\n          {/* Focus chin with dedicated controls */}\n          <FocusChin guides={guides} guideListRef={guideListRef} />\n        </Stack>\n      )}\n    </Box>\n  );\n};\n"],"names":["TOGGLE_COLLAPSED_HOTKEY","TOOLBAR_WIDTH","TOOLBAR_BOX_SHADOW","join","Kbd","children","React","display","padding","borderRadius","border","backgroundColor","getEmptyStateMessage","displayOption","filterGuides","guides","filter","guide","annotation","isEligible","active","status","V2","readyToTarget","client","useGuideContext","setDisplayOption","useState","runConfig","setRunConfig","KnockGuideClient","getToolbarRunConfigFromUrl","isCollapsed","setIsCollapsed","isContextPanelOpen","setIsContextPanelOpen","expandedGuideRowKey","setExpandedGuideRowKey","useEffect","undefined","isVisible","focusedGuideKeys","isDebugging","store","state","debug","debugging","setDebug","Object","keys","length","unsetDebug","handleKeyDown","e","ctrlKey","key","repeat","preventDefault","prev","addEventListener","removeEventListener","containerRef","useRef","guideListRef","position","isDragging","handlePointerDown","hasDraggedRef","useDraggable","elementRef","reclampDeps","initialPosition","top","right","result","useInspectGuideClientStore","Box","zIndex","TOOLBAR_Z_INDEX","Tooltip","Text","Stack","sharedTooltipProps","cursor","touchAction","userSelect","animation","transform","transformOrigin","KnockButton","current","width","boxShadow","boxSizing","minWidth","flex","stopPropagation","Icon","GripVertical","SegmentedControl","val","debugSettings","find","g","Button","icon","SlidersHorizontal","alt","ChevronDown","ChevronRight","v","flexShrink","LogOut","curr","Minimize2","GuideContextDetails","maxHeight","lineHeight","error","message","map","GuideRow","orderIndex","k","FocusChin"],"mappings":"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"}

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

@@ -1,55 +1,12 @@
-import "@knocklabs/react-core";
-import "react";
-/* empty css                                             */
-import "lodash.debounce";
-import { checkForWindow as e } from "../../../../core/utils.mjs";
-const a = "knock_guide_toolbar", u = "focused_guide_key", c = "knock_guide_debug", _ = () => {
-  const t = {
-    isVisible: !1
-  }, o = e();
-  if (!o || !o.location)
-    return t;
-  const i = new URLSearchParams(o.location.search), r = i.get(a), s = i.get(u);
-  if (r !== null) {
-    const n = {
-      isVisible: r === "true"
-    };
-    return s && (n.focusedGuideKeys = {
-      [s]: !0
-    }), l(n), n;
-  }
-  return g() || t;
-}, l = (t) => {
-  const o = e();
-  if (!(!o || !o.localStorage))
-    try {
-      o.localStorage.setItem(c, JSON.stringify(t));
-    } catch {
-    }
-}, g = () => {
-  const t = e();
-  if (!(!t || !t.localStorage))
-    try {
-      const o = t.localStorage.getItem(c);
-      if (o)
-        return JSON.parse(o);
-    } catch {
-    }
-}, h = () => {
-  const t = e();
-  if (!(!t || !t.localStorage))
-    try {
-      t.localStorage.removeItem(c);
-    } catch {
-    }
-}, p = {
+const e = {
+  delayDuration: 1e3
+}, o = {
   focusUnknownGuide: "No such guide exists",
   focusUncommittedGuide: "This guide has not been committed",
   focusUnselectableGuide: "No component that can display this guide is present"
 };
 export {
-  p as FOCUS_ERRORS,
-  h as clearRunConfigLS,
-  _ as getRunConfig
+  o as FOCUS_ERRORS,
+  e as sharedTooltipProps
 };
 //# sourceMappingURL=helpers.mjs.map