@knocklabs/react 0.11.4 → 0.11.6

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # Changelog
 
+## 0.11.6
+
+### Patch Changes
+
+- c134f53: [guides] read and write toolbar run config via local stroage
+- ddb24b4: [guides] add support for focused_guide_key param in toolbar run config
+- Updated dependencies [c134f53]
+  - @knocklabs/client@0.21.4
+  - @knocklabs/react-core@0.13.4
+
+## 0.11.5
+
+### Patch Changes
+
+- 1ed4f75: [Guides] Add additional debug settings to guide client, and improvements to the guide toolbar V2
+
+  - Add `focusedGuideKeys` debug setting to pin a target guide during preview
+  - Add `ignoreDisplayInterval` debug setting to ignore throttling during preview
+  - Add `skipEngagementTracking` debug setting to skip sending engagement updates to the API during preview
+  - Add control UIs to the guide toolbar V2 for the newly added debug settings
+  - Add a drag handle to the guide toolbar for drag and drop
+
+- Updated dependencies [1ed4f75]
+  - @knocklabs/client@0.21.3
+  - @knocklabs/react-core@0.13.3
+
 ## 0.11.4
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -1,2 +1,2 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css           */const o=require("./modules/core/components/Button/Button.js"),i=require("./modules/core/components/Button/ButtonGroup.js"),u=require("./modules/core/components/Icons/Bell.js"),a=require("./modules/core/components/Icons/CheckmarkCircle.js"),c=require("./modules/core/components/Icons/ChevronDown.js"),s=require("./modules/core/components/Icons/CloseCircle.js"),l=require("./modules/core/components/Spinner/Spinner.js"),d=require("./modules/core/hooks/useOnBottomScroll.js"),b=require("./modules/feed/components/EmptyFeed/EmptyFeed.js"),m=require("./modules/feed/components/NotificationCell/NotificationCell.js"),C=require("./modules/feed/components/NotificationCell/Avatar.js"),f=require("./modules/feed/components/NotificationFeed/NotificationFeed.js"),P=require("./modules/feed/components/NotificationFeed/NotificationFeedHeader.js"),k=require("./modules/feed/components/NotificationFeed/MarkAsRead.js"),p=require("./modules/feed/components/NotificationFeedContainer/NotificationFeedContainer.js"),g=require("./modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.js"),y=require("./modules/feed/components/NotificationIconButton/NotificationIconButton.js"),O=require("./modules/feed/components/UnseenBadge/UnseenBadge.js"),t=require("./modules/guide/components/Banner/Banner.js"),r=require("./modules/guide/components/Card/Card.js");require("react");const e=require("@knocklabs/react-core");require("@telegraph/button");require("@telegraph/layout");require("@telegraph/tag");require("@telegraph/typography");require("lucide-react");;/* empty css                                             */require("@telegraph/tooltip");require("@radix-ui/react-hover-card");require("@knocklabs/client");require("@telegraph/select");const n=require("./modules/guide/components/Modal/Modal.js"),S=require("./modules/guide/providers/KnockGuideProvider.js"),j=require("./modules/ms-teams/components/MsTeamsAuthButton/MsTeamsAuthButton.js"),q=require("./modules/ms-teams/components/MsTeamsAuthContainer/MsTeamsAuthContainer.js"),h=require("./modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelCombobox.js"),B=require("./modules/slack/components/SlackAuthButton/SlackAuthButton.js"),K=require("./modules/slack/components/SlackAuthContainer/SlackAuthContainer.js"),M=require("./modules/slack/components/SlackChannelCombobox/SlackChannelCombobox.js");exports.Button=o.Button;exports.ButtonGroup=i.ButtonGroup;exports.BellIcon=u.BellIcon;exports.CheckmarkCircle=a.CheckmarkCircle;exports.ChevronDown=c.ChevronDown;exports.CloseCircle=s.CloseCircle;exports.Spinner=l.Spinner;exports.useOnBottomScroll=d;exports.EmptyFeed=b.EmptyFeed;exports.NotificationCell=m.NotificationCell;exports.Avatar=C.Avatar;exports.NotificationFeed=f.NotificationFeed;exports.NotificationFeedHeader=P.NotificationFeedHeader;exports.MarkAsRead=k.MarkAsRead;exports.NotificationFeedContainer=p.NotificationFeedContainer;exports.NotificationFeedPopover=g.NotificationFeedPopover;exports.NotificationIconButton=y.NotificationIconButton;exports.UnseenBadge=O.UnseenBadge;exports.Banner=t.Banner;exports.BannerView=t.BannerView;exports.Card=r.Card;exports.CardView=r.CardView;Object.defineProperty(exports,"FilterStatus",{enumerable:!0,get:()=>e.FilterStatus});Object.defineProperty(exports,"I18nContext",{enumerable:!0,get:()=>e.I18nContext});Object.defineProperty(exports,"KnockFeedProvider",{enumerable:!0,get:()=>e.KnockFeedProvider});Object.defineProperty(exports,"KnockGuideContext",{enumerable:!0,get:()=>e.KnockGuideContext});Object.defineProperty(exports,"KnockI18nProvider",{enumerable:!0,get:()=>e.KnockI18nProvider});Object.defineProperty(exports,"KnockMsTeamsProvider",{enumerable:!0,get:()=>e.KnockMsTeamsProvider});Object.defineProperty(exports,"KnockProvider",{enumerable:!0,get:()=>e.KnockProvider});Object.defineProperty(exports,"KnockSlackProvider",{enumerable:!0,get:()=>e.KnockSlackProvider});Object.defineProperty(exports,"feedProviderKey",{enumerable:!0,get:()=>e.feedProviderKey});Object.defineProperty(exports,"formatBadgeCount",{enumerable:!0,get:()=>e.formatBadgeCount});Object.defineProperty(exports,"formatTimestamp",{enumerable:!0,get:()=>e.formatTimestamp});Object.defineProperty(exports,"getBadgeAriaLabel",{enumerable:!0,get:()=>e.getBadgeAriaLabel});Object.defineProperty(exports,"locales",{enumerable:!0,get:()=>e.locales});Object.defineProperty(exports,"msTeamsProviderKey",{enumerable:!0,get:()=>e.msTeamsProviderKey});Object.defineProperty(exports,"renderNodeOrFallback",{enumerable:!0,get:()=>e.renderNodeOrFallback});Object.defineProperty(exports,"slackProviderKey",{enumerable:!0,get:()=>e.slackProviderKey});Object.defineProperty(exports,"toSentenceCase",{enumerable:!0,get:()=>e.toSentenceCase});Object.defineProperty(exports,"useAuthenticatedKnockClient",{enumerable:!0,get:()=>e.useAuthenticatedKnockClient});Object.defineProperty(exports,"useConnectedMsTeamsChannels",{enumerable:!0,get:()=>e.useConnectedMsTeamsChannels});Object.defineProperty(exports,"useConnectedSlackChannels",{enumerable:!0,get:()=>e.useConnectedSlackChannels});Object.defineProperty(exports,"useCreateNotificationStore",{enumerable:!0,get:()=>e.useCreateNotificationStore});Object.defineProperty(exports,"useFeedSettings",{enumerable:!0,get:()=>e.useFeedSettings});Object.defineProperty(exports,"useGuide",{enumerable:!0,get:()=>e.useGuide});Object.defineProperty(exports,"useGuideContext",{enumerable:!0,get:()=>e.useGuideContext});Object.defineProperty(exports,"useGuides",{enumerable:!0,get:()=>e.useGuides});Object.defineProperty(exports,"useKnockClient",{enumerable:!0,get:()=>e.useKnockClient});Object.defineProperty(exports,"useKnockFeed",{enumerable:!0,get:()=>e.useKnockFeed});Object.defineProperty(exports,"useKnockMsTeamsClient",{enumerable:!0,get:()=>e.useKnockMsTeamsClient});Object.defineProperty(exports,"useKnockSlackClient",{enumerable:!0,get:()=>e.useKnockSlackClient});Object.defineProperty(exports,"useMsTeamsAuth",{enumerable:!0,get:()=>e.useMsTeamsAuth});Object.defineProperty(exports,"useMsTeamsChannels",{enumerable:!0,get:()=>e.useMsTeamsChannels});Object.defineProperty(exports,"useMsTeamsConnectionStatus",{enumerable:!0,get:()=>e.useMsTeamsConnectionStatus});Object.defineProperty(exports,"useMsTeamsTeams",{enumerable:!0,get:()=>e.useMsTeamsTeams});Object.defineProperty(exports,"useNotificationStore",{enumerable:!0,get:()=>e.useNotificationStore});Object.defineProperty(exports,"useNotifications",{enumerable:!0,get:()=>e.useNotifications});Object.defineProperty(exports,"usePreferences",{enumerable:!0,get:()=>e.usePreferences});Object.defineProperty(exports,"useSlackAuth",{enumerable:!0,get:()=>e.useSlackAuth});Object.defineProperty(exports,"useSlackChannels",{enumerable:!0,get:()=>e.useSlackChannels});Object.defineProperty(exports,"useSlackConnectionStatus",{enumerable:!0,get:()=>e.useSlackConnectionStatus});Object.defineProperty(exports,"useStableOptions",{enumerable:!0,get:()=>e.useStableOptions});Object.defineProperty(exports,"useTranslations",{enumerable:!0,get:()=>e.useTranslations});exports.Modal=n.Modal;exports.ModalView=n.ModalView;exports.KnockGuideProvider=S.KnockGuideProvider;exports.MsTeamsAuthButton=j.MsTeamsAuthButton;exports.MsTeamsAuthContainer=q.MsTeamsAuthContainer;exports.MsTeamsChannelCombobox=h;exports.SlackAuthButton=B.SlackAuthButton;exports.SlackAuthContainer=K.SlackAuthContainer;exports.SlackChannelCombobox=M.SlackChannelCombobox;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css           */const o=require("./modules/core/components/Button/Button.js"),i=require("./modules/core/components/Button/ButtonGroup.js"),u=require("./modules/core/components/Icons/Bell.js"),a=require("./modules/core/components/Icons/CheckmarkCircle.js"),c=require("./modules/core/components/Icons/ChevronDown.js"),s=require("./modules/core/components/Icons/CloseCircle.js"),l=require("./modules/core/components/Spinner/Spinner.js"),d=require("./modules/core/hooks/useOnBottomScroll.js"),b=require("./modules/feed/components/EmptyFeed/EmptyFeed.js"),m=require("./modules/feed/components/NotificationCell/NotificationCell.js"),C=require("./modules/feed/components/NotificationCell/Avatar.js"),f=require("./modules/feed/components/NotificationFeed/NotificationFeed.js"),P=require("./modules/feed/components/NotificationFeed/NotificationFeedHeader.js"),k=require("./modules/feed/components/NotificationFeed/MarkAsRead.js"),p=require("./modules/feed/components/NotificationFeedContainer/NotificationFeedContainer.js"),g=require("./modules/feed/components/NotificationFeedPopover/NotificationFeedPopover.js"),y=require("./modules/feed/components/NotificationIconButton/NotificationIconButton.js"),O=require("./modules/feed/components/UnseenBadge/UnseenBadge.js"),t=require("./modules/guide/components/Banner/Banner.js"),r=require("./modules/guide/components/Card/Card.js");require("react");const e=require("@knocklabs/react-core");require("@telegraph/button");require("@telegraph/layout");require("@telegraph/tag");require("@telegraph/typography");require("lucide-react");;/* empty css                                             */require("@telegraph/icon");require("@telegraph/tooltip");require("@radix-ui/react-hover-card");require("@knocklabs/client");require("@telegraph/select");const n=require("./modules/guide/components/Modal/Modal.js"),S=require("./modules/guide/providers/KnockGuideProvider.js"),j=require("./modules/ms-teams/components/MsTeamsAuthButton/MsTeamsAuthButton.js"),q=require("./modules/ms-teams/components/MsTeamsAuthContainer/MsTeamsAuthContainer.js"),h=require("./modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelCombobox.js"),B=require("./modules/slack/components/SlackAuthButton/SlackAuthButton.js"),K=require("./modules/slack/components/SlackAuthContainer/SlackAuthContainer.js"),M=require("./modules/slack/components/SlackChannelCombobox/SlackChannelCombobox.js");exports.Button=o.Button;exports.ButtonGroup=i.ButtonGroup;exports.BellIcon=u.BellIcon;exports.CheckmarkCircle=a.CheckmarkCircle;exports.ChevronDown=c.ChevronDown;exports.CloseCircle=s.CloseCircle;exports.Spinner=l.Spinner;exports.useOnBottomScroll=d;exports.EmptyFeed=b.EmptyFeed;exports.NotificationCell=m.NotificationCell;exports.Avatar=C.Avatar;exports.NotificationFeed=f.NotificationFeed;exports.NotificationFeedHeader=P.NotificationFeedHeader;exports.MarkAsRead=k.MarkAsRead;exports.NotificationFeedContainer=p.NotificationFeedContainer;exports.NotificationFeedPopover=g.NotificationFeedPopover;exports.NotificationIconButton=y.NotificationIconButton;exports.UnseenBadge=O.UnseenBadge;exports.Banner=t.Banner;exports.BannerView=t.BannerView;exports.Card=r.Card;exports.CardView=r.CardView;Object.defineProperty(exports,"FilterStatus",{enumerable:!0,get:()=>e.FilterStatus});Object.defineProperty(exports,"I18nContext",{enumerable:!0,get:()=>e.I18nContext});Object.defineProperty(exports,"KnockFeedProvider",{enumerable:!0,get:()=>e.KnockFeedProvider});Object.defineProperty(exports,"KnockGuideContext",{enumerable:!0,get:()=>e.KnockGuideContext});Object.defineProperty(exports,"KnockI18nProvider",{enumerable:!0,get:()=>e.KnockI18nProvider});Object.defineProperty(exports,"KnockMsTeamsProvider",{enumerable:!0,get:()=>e.KnockMsTeamsProvider});Object.defineProperty(exports,"KnockProvider",{enumerable:!0,get:()=>e.KnockProvider});Object.defineProperty(exports,"KnockSlackProvider",{enumerable:!0,get:()=>e.KnockSlackProvider});Object.defineProperty(exports,"feedProviderKey",{enumerable:!0,get:()=>e.feedProviderKey});Object.defineProperty(exports,"formatBadgeCount",{enumerable:!0,get:()=>e.formatBadgeCount});Object.defineProperty(exports,"formatTimestamp",{enumerable:!0,get:()=>e.formatTimestamp});Object.defineProperty(exports,"getBadgeAriaLabel",{enumerable:!0,get:()=>e.getBadgeAriaLabel});Object.defineProperty(exports,"locales",{enumerable:!0,get:()=>e.locales});Object.defineProperty(exports,"msTeamsProviderKey",{enumerable:!0,get:()=>e.msTeamsProviderKey});Object.defineProperty(exports,"renderNodeOrFallback",{enumerable:!0,get:()=>e.renderNodeOrFallback});Object.defineProperty(exports,"slackProviderKey",{enumerable:!0,get:()=>e.slackProviderKey});Object.defineProperty(exports,"toSentenceCase",{enumerable:!0,get:()=>e.toSentenceCase});Object.defineProperty(exports,"useAuthenticatedKnockClient",{enumerable:!0,get:()=>e.useAuthenticatedKnockClient});Object.defineProperty(exports,"useConnectedMsTeamsChannels",{enumerable:!0,get:()=>e.useConnectedMsTeamsChannels});Object.defineProperty(exports,"useConnectedSlackChannels",{enumerable:!0,get:()=>e.useConnectedSlackChannels});Object.defineProperty(exports,"useCreateNotificationStore",{enumerable:!0,get:()=>e.useCreateNotificationStore});Object.defineProperty(exports,"useFeedSettings",{enumerable:!0,get:()=>e.useFeedSettings});Object.defineProperty(exports,"useGuide",{enumerable:!0,get:()=>e.useGuide});Object.defineProperty(exports,"useGuideContext",{enumerable:!0,get:()=>e.useGuideContext});Object.defineProperty(exports,"useGuides",{enumerable:!0,get:()=>e.useGuides});Object.defineProperty(exports,"useKnockClient",{enumerable:!0,get:()=>e.useKnockClient});Object.defineProperty(exports,"useKnockFeed",{enumerable:!0,get:()=>e.useKnockFeed});Object.defineProperty(exports,"useKnockMsTeamsClient",{enumerable:!0,get:()=>e.useKnockMsTeamsClient});Object.defineProperty(exports,"useKnockSlackClient",{enumerable:!0,get:()=>e.useKnockSlackClient});Object.defineProperty(exports,"useMsTeamsAuth",{enumerable:!0,get:()=>e.useMsTeamsAuth});Object.defineProperty(exports,"useMsTeamsChannels",{enumerable:!0,get:()=>e.useMsTeamsChannels});Object.defineProperty(exports,"useMsTeamsConnectionStatus",{enumerable:!0,get:()=>e.useMsTeamsConnectionStatus});Object.defineProperty(exports,"useMsTeamsTeams",{enumerable:!0,get:()=>e.useMsTeamsTeams});Object.defineProperty(exports,"useNotificationStore",{enumerable:!0,get:()=>e.useNotificationStore});Object.defineProperty(exports,"useNotifications",{enumerable:!0,get:()=>e.useNotifications});Object.defineProperty(exports,"usePreferences",{enumerable:!0,get:()=>e.usePreferences});Object.defineProperty(exports,"useSlackAuth",{enumerable:!0,get:()=>e.useSlackAuth});Object.defineProperty(exports,"useSlackChannels",{enumerable:!0,get:()=>e.useSlackChannels});Object.defineProperty(exports,"useSlackConnectionStatus",{enumerable:!0,get:()=>e.useSlackConnectionStatus});Object.defineProperty(exports,"useStableOptions",{enumerable:!0,get:()=>e.useStableOptions});Object.defineProperty(exports,"useTranslations",{enumerable:!0,get:()=>e.useTranslations});exports.Modal=n.Modal;exports.ModalView=n.ModalView;exports.KnockGuideProvider=S.KnockGuideProvider;exports.MsTeamsAuthButton=j.MsTeamsAuthButton;exports.MsTeamsAuthContainer=q.MsTeamsAuthContainer;exports.MsTeamsChannelCombobox=h;exports.SlackAuthButton=B.SlackAuthButton;exports.SlackAuthContainer=K.SlackAuthContainer;exports.SlackChannelCombobox=M.SlackChannelCombobox;
 //# sourceMappingURL=index.js.map

package/dist/cjs/modules/guide/components/Toolbar/KnockButton.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),o=require("@telegraph/button"),n=require("./shared.js");;/* empty css            */const r=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},e=r(a),l=({onClick:t})=>e.default.createElement(o.Button,{onClick:t,position:"fixed",top:"4",right:"4",bg:"surface-2",shadow:"3",rounded:"3",w:"10",h:"10",variant:"soft","data-tgph-appearance":"dark","aria-label":"Expand guide toolbar",style:{zIndex:n.TOOLBAR_Z_INDEX}},e.default.createElement("svg",{width:"40",height:"40",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)"}},e.default.createElement("path",{d:"M11.6001 32.4V7.59998H16.6365V21.8219H16.7774L22.3067 14.8525H27.9418L21.8138 22.0696L28.4001 32.4H22.7996L18.8555 25.572L16.6365 28.0839V32.4H11.6001Z",fill:"#EDEEEF"}),e.default.createElement("path",{d:"M28.4 10.4C28.4 11.9464 27.1467 13.2 25.6 13.2C24.0534 13.2 22.8 11.9464 22.8 10.4C22.8 8.85358 24.0534 7.59998 25.6 7.59998C27.1467 7.59998 28.4 8.85358 28.4 10.4Z",fill:"#FF573A"})));exports.KnockButton=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react"),n=require("@telegraph/button"),r=require("./shared.js");;/* empty css            */const l=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},e=l(o),u=({onClick:t,positioned:a=!0})=>e.default.createElement(n.Button,{onClick:t,...a&&{position:"fixed",top:"4",right:"4",style:{zIndex:r.TOOLBAR_Z_INDEX}},bg:"surface-2",shadow:"3",rounded:"3",w:"10",h:"10",variant:"soft","data-tgph-appearance":"dark","aria-label":"Expand guide toolbar"},e.default.createElement("svg",{width:"40",height:"40",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)"}},e.default.createElement("path",{d:"M11.6001 32.4V7.59998H16.6365V21.8219H16.7774L22.3067 14.8525H27.9418L21.8138 22.0696L28.4001 32.4H22.7996L18.8555 25.572L16.6365 28.0839V32.4H11.6001Z",fill:"#EDEEEF"}),e.default.createElement("path",{d:"M28.4 10.4C28.4 11.9464 27.1467 13.2 25.6 13.2C24.0534 13.2 22.8 11.9464 22.8 10.4C22.8 8.85358 24.0534 7.59998 25.6 7.59998C27.1467 7.59998 28.4 8.85358 28.4 10.4Z",fill:"#FF573A"})));exports.KnockButton=u;
 //# sourceMappingURL=KnockButton.js.map

package/dist/cjs/modules/guide/components/Toolbar/KnockButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"KnockButton.js","sources":["../../../../../../src/modules/guide/components/Toolbar/KnockButton.tsx"],"sourcesContent":["import { Button } from \"@telegraph/button\";\n\nimport { TOOLBAR_Z_INDEX } from \"./shared\";\nimport \"./styles.css\";\n\ntype Props = {\n  onClick: () => void;\n};\n\nexport const KnockButton = ({ onClick }: Props) => {\n  return (\n    <Button\n      onClick={onClick}\n      position=\"fixed\"\n      top=\"4\"\n      right=\"4\"\n      bg=\"surface-2\"\n      shadow=\"3\"\n      rounded=\"3\"\n      w=\"10\"\n      h=\"10\"\n      variant=\"soft\"\n      data-tgph-appearance=\"dark\"\n      aria-label=\"Expand guide toolbar\"\n      style={{ zIndex: TOOLBAR_Z_INDEX }}\n    >\n      <svg\n        width=\"40\"\n        height=\"40\"\n        viewBox=\"0 0 40 40\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        style={{\n          position: \"absolute\",\n          top: \"50%\",\n          left: \"50%\",\n          transform: \"translate(-50%, -50%)\",\n        }}\n      >\n        <path\n          d=\"M11.6001 32.4V7.59998H16.6365V21.8219H16.7774L22.3067 14.8525H27.9418L21.8138 22.0696L28.4001 32.4H22.7996L18.8555 25.572L16.6365 28.0839V32.4H11.6001Z\"\n          fill=\"#EDEEEF\"\n        />\n        <path\n          d=\"M28.4 10.4C28.4 11.9464 27.1467 13.2 25.6 13.2C24.0534 13.2 22.8 11.9464 22.8 10.4C22.8 8.85358 24.0534 7.59998 25.6 7.59998C27.1467 7.59998 28.4 8.85358 28.4 10.4Z\"\n          fill=\"#FF573A\"\n        />\n      </svg>\n    </Button>\n  );\n};\n"],"names":["KnockButton","onClick","React","Button","zIndex","TOOLBAR_Z_INDEX","position","top","left","transform"],"mappings":"iQASaA,EAAcA,CAAC,CAAEC,QAAAA,CAAe,IAEzCC,EAAA,QAAA,cAACC,SACC,CAAA,QAAAF,EACA,SAAS,QACT,IAAI,IACJ,MAAM,IACN,GAAG,YACH,OAAO,IACP,QAAQ,IACR,EAAE,KACF,EAAE,KACF,QAAQ,OACR,uBAAqB,OACrB,aAAW,uBACX,MAAO,CAAEG,OAAQC,EAAAA,eAAAA,CAEjB,EAAAH,EAAA,QAAA,cAAC,MACC,CAAA,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OACL,MAAM,6BACN,MAAO,CACLI,SAAU,WACVC,IAAK,MACLC,KAAM,MACNC,UAAW,uBAAA,GAGbP,EAAAA,QAAA,cAAC,OACC,CAAA,EAAE,0JACF,KAAK,SAAS,CAAA,EAEhBA,EAAAA,QAAA,cAAC,QACC,EAAE,uKACF,KAAK,SAAS,CAAA,CAElB,CACF"}
+{"version":3,"file":"KnockButton.js","sources":["../../../../../../src/modules/guide/components/Toolbar/KnockButton.tsx"],"sourcesContent":["import { Button } from \"@telegraph/button\";\n\nimport { TOOLBAR_Z_INDEX } from \"./shared\";\nimport \"./styles.css\";\n\ntype Props = {\n  onClick: () => void;\n  positioned?: boolean;\n};\n\nexport const KnockButton = ({ onClick, positioned = true }: Props) => {\n  return (\n    <Button\n      onClick={onClick}\n      {...(positioned && {\n        position: \"fixed\" as const,\n        top: \"4\" as const,\n        right: \"4\" as const,\n        style: { zIndex: TOOLBAR_Z_INDEX },\n      })}\n      bg=\"surface-2\"\n      shadow=\"3\"\n      rounded=\"3\"\n      w=\"10\"\n      h=\"10\"\n      variant=\"soft\"\n      data-tgph-appearance=\"dark\"\n      aria-label=\"Expand guide toolbar\"\n    >\n      <svg\n        width=\"40\"\n        height=\"40\"\n        viewBox=\"0 0 40 40\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        style={{\n          position: \"absolute\",\n          top: \"50%\",\n          left: \"50%\",\n          transform: \"translate(-50%, -50%)\",\n        }}\n      >\n        <path\n          d=\"M11.6001 32.4V7.59998H16.6365V21.8219H16.7774L22.3067 14.8525H27.9418L21.8138 22.0696L28.4001 32.4H22.7996L18.8555 25.572L16.6365 28.0839V32.4H11.6001Z\"\n          fill=\"#EDEEEF\"\n        />\n        <path\n          d=\"M28.4 10.4C28.4 11.9464 27.1467 13.2 25.6 13.2C24.0534 13.2 22.8 11.9464 22.8 10.4C22.8 8.85358 24.0534 7.59998 25.6 7.59998C27.1467 7.59998 28.4 8.85358 28.4 10.4Z\"\n          fill=\"#FF573A\"\n        />\n      </svg>\n    </Button>\n  );\n};\n"],"names":["KnockButton","onClick","positioned","React","Button","position","top","right","style","zIndex","TOOLBAR_Z_INDEX","left","transform"],"mappings":"iQAUaA,EAAcA,CAAC,CAAEC,QAAAA,EAASC,WAAAA,EAAa,EAAY,IAE3DC,EAAAA,QAAA,cAAAC,EAAAA,OAAA,CACC,QAAAH,EACKC,GAAAA,GAAc,CACjBG,SAAU,QACVC,IAAK,IACLC,MAAO,IACPC,MAAO,CAAEC,OAAQC,EAAAA,eAAAA,CAAgB,EAEnC,GAAG,YACH,OAAO,IACP,QAAQ,IACR,EAAE,KACF,EAAE,KACF,QAAQ,OACR,uBAAqB,OACrB,aAAW,sBAEX,EAAAP,EAAAA,QAAA,cAAC,MACC,CAAA,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OACL,MAAM,6BACN,MAAO,CACLE,SAAU,WACVC,IAAK,MACLK,KAAM,MACNC,UAAW,uBAAA,GAGbT,EAAAA,QAAA,cAAC,OACC,CAAA,EAAE,0JACF,KAAK,SAAS,CAAA,EAEhBA,EAAAA,QAAA,cAAC,QACC,EAAE,uKACF,KAAK,SAAS,CAAA,CAElB,CACF"}

package/dist/cjs/modules/guide/components/Toolbar/V2/DragHandle.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("@telegraph/icon"),n=require("@telegraph/layout"),c=require("lucide-react"),i=require("react"),u=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=u(i),r=16,l=({onPointerDown:e,isDragging:a})=>t.default.createElement(n.Box,{"data-tgph-appearance":"dark",onPointerDown:e,borderRadius:"2",position:"absolute",style:{top:"9px",right:`-${r}px`,height:"24px",cursor:a?"grabbing":"grab",touchAction:"none",userSelect:"none"}},t.default.createElement(o.Icon,{color:"gray",size:"1",icon:c.GripVertical,"aria-hidden":!0}));exports.DRAG_HANDLE_OVERHANG=r;exports.DragHandle=l;
+//# sourceMappingURL=DragHandle.js.map

package/dist/cjs/modules/guide/components/Toolbar/V2/DragHandle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragHandle.js","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/DragHandle.tsx"],"sourcesContent":["import { Icon } from \"@telegraph/icon\";\nimport { Box } from \"@telegraph/layout\";\nimport { GripVertical } from \"lucide-react\";\nimport React from \"react\";\n\n// How far the drag handle protrudes beyond the toolbar's right edge (px)\nexport const DRAG_HANDLE_OVERHANG = 16;\n\ntype DragHandleProps = {\n  onPointerDown: (e: React.PointerEvent) => void;\n  isDragging: boolean;\n};\n\nexport const DragHandle = ({ onPointerDown, isDragging }: DragHandleProps) => {\n  return (\n    <Box\n      data-tgph-appearance=\"dark\"\n      onPointerDown={onPointerDown}\n      borderRadius=\"2\"\n      position=\"absolute\"\n      style={{\n        top: \"9px\",\n        right: `-${DRAG_HANDLE_OVERHANG}px`,\n        height: \"24px\",\n        cursor: isDragging ? \"grabbing\" : \"grab\",\n        touchAction: \"none\",\n        userSelect: \"none\",\n      }}\n    >\n      <Icon color=\"gray\" size=\"1\" icon={GripVertical} aria-hidden />\n    </Box>\n  );\n};\n"],"names":["DRAG_HANDLE_OVERHANG","DragHandle","onPointerDown","isDragging","React","Box","top","right","height","cursor","touchAction","userSelect","Icon","GripVertical"],"mappings":"8PAMaA,EAAuB,GAOvBC,EAAaA,CAAC,CAAEC,cAAAA,EAAeC,WAAAA,CAA4B,IAEpEC,UAAA,cAACC,OACC,uBAAqB,OACrB,cAAAH,EACA,aAAa,IACb,SAAS,WACT,MAAO,CACLI,IAAK,MACLC,MAAO,IAAIP,CAAoB,KAC/BQ,OAAQ,OACRC,OAAQN,EAAa,WAAa,OAClCO,YAAa,OACbC,WAAY,MACd,CAAA,EAECP,EAAAA,QAAA,cAAAQ,EAAAA,KAAA,CAAK,MAAM,OAAO,KAAK,IAAI,KAAMC,EAAAA,aAAc,cAAW,EAAA,CAAA,CAC7D"}

package/dist/cjs/modules/guide/components/Toolbar/V2/GuideContextDetails.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("@knocklabs/react-core"),r=require("@telegraph/layout"),a=require("@telegraph/typography"),m=require("lucide-react"),u=require("react");function d(t){if(t&&typeof t=="object"&&"default"in t)return t;const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const o in t)if(o!=="default"){const c=Object.getOwnPropertyDescriptor(t,o);Object.defineProperty(n,o,c.get?c:{enumerable:!0,get:()=>t[o]})}}return n.default=t,Object.freeze(n)}const e=d(u),p=()=>{const{client:t}=s.useGuideContext(),[n,o]=e.useState(!1),c=s.useStore(t.store,l=>l.guideGroups[0]),i=(c==null?void 0:c.display_interval)??null;return e.createElement(r.Stack,{direction:"column",borderTop:"px"},e.createElement(r.Stack,{h:"5",px:"2",bg:"gray-3",align:"center",gap:"1",style:{cursor:"pointer"},onClick:()=>o(l=>!l)},e.createElement(a.Text,{as:"span",size:"0",weight:"medium"},"Details"),n?e.createElement(m.ChevronDown,{size:12}):e.createElement(m.ChevronRight,{size:12})),n&&e.createElement(r.Stack,{direction:"column"},e.createElement(r.Stack,{direction:"column",gap:"0_5",py:"1",px:"2",borderTop:"px"},e.createElement(a.Text,{as:"span",size:"0",weight:"medium"},"Throttle"),e.createElement(a.Text,{as:"code",size:"0"},i===null?"-":`Every ${i}s`)),e.createElement(r.Stack,{direction:"column",py:"1",px:"2",borderTop:"px"},e.createElement(a.Text,{as:"span",size:"0",weight:"medium"},"Target params"),e.createElement(r.Stack,{direction:"column",gap:"0_5",mt:"1"},e.createElement(a.Text,{as:"span",size:"0",color:"gray"},"Tenant"),e.createElement(a.Text,{as:"code",size:"0"},t.targetParams.tenant?e.createElement(r.Box,{rounded:"2",overflow:"auto",backgroundColor:"gray-2",border:"px",style:{maxHeight:"200px"}},e.createElement("pre",{style:{fontSize:"11px",margin:0}},e.createElement("code",null,t.targetParams.tenant))):e.createElement(a.Text,{as:"code",size:"0"},"-"))),e.createElement(r.Stack,{direction:"column",gap:"0_5"},e.createElement(a.Text,{as:"span",size:"0",color:"gray"},"Data"),t.targetParams.data?e.createElement(r.Box,{rounded:"2",overflow:"auto",backgroundColor:"gray-2",border:"px",style:{maxHeight:"200px"}},e.createElement("pre",{style:{fontSize:"11px",margin:0}},e.createElement("code",null,JSON.stringify(t.targetParams.data,null,2)))):e.createElement(a.Text,{as:"code",size:"0"},"-")))))};exports.GuideContextDetails=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("@knocklabs/react-core"),u=require("@telegraph/button"),p=require("@telegraph/icon"),n=require("@telegraph/layout"),d=require("@telegraph/tooltip"),a=require("@telegraph/typography"),s=require("lucide-react"),E=require("react");function y(t){if(t&&typeof t=="object"&&"default"in t)return t;const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const i in t)if(i!=="default"){const c=Object.getOwnPropertyDescriptor(t,i);Object.defineProperty(o,i,c.get?c:{enumerable:!0,get:()=>t[i]})}}return o.default=t,Object.freeze(o)}const e=y(E),x=()=>{const{client:t}=m.useGuideContext(),[o,i]=e.useState(!1),{defaultGroup:c,debugSettings:r}=m.useStore(t.store,l=>({defaultGroup:l.guideGroups[0],debugSettings:l.debug||{}})),g=(c==null?void 0:c.display_interval)??null;return e.createElement(n.Stack,{direction:"column",borderTop:"px"},e.createElement(n.Stack,{h:"5",px:"2",bg:"gray-3",align:"center",gap:"1",style:{cursor:"pointer"},onClick:()=>i(l=>!l)},e.createElement(a.Text,{as:"span",size:"0",weight:"medium"},"More"),o?e.createElement(s.ChevronDown,{size:12}):e.createElement(s.ChevronRight,{size:12})),o&&e.createElement(n.Stack,{direction:"column"},e.createElement(n.Stack,{align:"center",justify:"space-between",py:"1",px:"2",borderTop:"px"},e.createElement(n.Stack,{align:"center",gap:"1"},e.createElement(a.Text,{as:"span",size:"0",weight:"medium"},"Client-only engagement"),e.createElement(d.Tooltip,{label:"Contain engagement actions to the client side only while in preview without sending engagement events to the API"},e.createElement(p.Icon,{icon:s.Info,size:"0",color:"gray","aria-hidden":!0}))),e.createElement(u.Button,{size:"0",variant:"soft",color:r.skipEngagementTracking?"green":"gray",onClick:()=>t.setDebug({...r,skipEngagementTracking:!r.skipEngagementTracking})},r.skipEngagementTracking?"On":"Off")),e.createElement(n.Stack,{direction:"column",py:"1",px:"2"},e.createElement(n.Stack,{align:"center",justify:"space-between"},e.createElement(n.Stack,{align:"center",gap:"1"},e.createElement(a.Text,{as:"span",size:"0",weight:"medium"},"Suspend throttling"),e.createElement(d.Tooltip,{label:"Suspend throttling during preview, and show next guide immediately"},e.createElement(p.Icon,{icon:s.Info,size:"0",color:"gray","aria-hidden":!0}))),e.createElement(u.Button,{size:"0",variant:"soft",color:r.ignoreDisplayInterval?"green":"gray",onClick:()=>t.setDebug({...r,ignoreDisplayInterval:!r.ignoreDisplayInterval})},r.ignoreDisplayInterval?"On":"Off")),e.createElement(n.Stack,{direction:"row",gap:"0_5",py:"1"},e.createElement(a.Text,{as:"span",size:"0",color:"gray"},"Throttle:"," ",r.ignoreDisplayInterval?"(ignored)":g===null?"(none)":`Every ${g}s`))),e.createElement(n.Stack,{direction:"column",py:"1",px:"2",borderTop:"px"},e.createElement(a.Text,{as:"span",size:"0",weight:"medium"},"Target params"),e.createElement(n.Stack,{direction:"column",gap:"0_5",mt:"1"},e.createElement(a.Text,{as:"span",size:"0",color:"gray"},"Tenant"),e.createElement(a.Text,{as:"code",size:"0"},t.targetParams.tenant?e.createElement(n.Box,{rounded:"2",overflow:"auto",backgroundColor:"gray-2",border:"px",style:{maxHeight:"200px"}},e.createElement("pre",{style:{fontSize:"11px",margin:0}},e.createElement("code",null,t.targetParams.tenant))):e.createElement(a.Text,{as:"code",size:"0"},"-"))),e.createElement(n.Stack,{direction:"column",gap:"0_5"},e.createElement(a.Text,{as:"span",size:"0",color:"gray"},"Data"),t.targetParams.data?e.createElement(n.Box,{rounded:"2",overflow:"auto",backgroundColor:"gray-2",border:"px",style:{maxHeight:"200px"}},e.createElement("pre",{style:{fontSize:"11px",margin:0}},e.createElement("code",null,JSON.stringify(t.targetParams.data,null,2)))):e.createElement(a.Text,{as:"code",size:"0"},"-")))))};exports.GuideContextDetails=x;
 //# sourceMappingURL=GuideContextDetails.js.map

package/dist/cjs/modules/guide/components/Toolbar/V2/GuideContextDetails.js.map

@@ -1 +1 @@
-{"version":3,"file":"GuideContextDetails.js","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/GuideContextDetails.tsx"],"sourcesContent":["import { useGuideContext, useStore } from \"@knocklabs/react-core\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport { Text } from \"@telegraph/typography\";\nimport { ChevronDown, ChevronRight } from \"lucide-react\";\nimport * as React from \"react\";\n\nexport const GuideContextDetails = () => {\n  const { client } = useGuideContext();\n  const [isExpanded, setIsExpanded] = React.useState(false);\n\n  const defaultGroup = useStore(client.store, (state) => state.guideGroups[0]);\n  const displayInterval = defaultGroup?.display_interval ?? null;\n\n  return (\n    <Stack direction=\"column\" borderTop=\"px\">\n      <Stack\n        h=\"5\"\n        px=\"2\"\n        bg=\"gray-3\"\n        align=\"center\"\n        gap=\"1\"\n        style={{ cursor: \"pointer\" }}\n        onClick={() => setIsExpanded((prev) => !prev)}\n      >\n        <Text as=\"span\" size=\"0\" weight=\"medium\">\n          Details\n        </Text>\n        {isExpanded ? <ChevronDown size={12} /> : <ChevronRight size={12} />}\n      </Stack>\n\n      {isExpanded && (\n        <Stack direction=\"column\">\n          <Stack direction=\"column\" gap=\"0_5\" py=\"1\" px=\"2\" borderTop=\"px\">\n            <Text as=\"span\" size=\"0\" weight=\"medium\">\n              Throttle\n            </Text>\n            <Text as=\"code\" size=\"0\">\n              {displayInterval === null ? \"-\" : `Every ${displayInterval}s`}\n            </Text>\n          </Stack>\n\n          <Stack direction=\"column\" py=\"1\" px=\"2\" borderTop=\"px\">\n            <Text as=\"span\" size=\"0\" weight=\"medium\">\n              Target params\n            </Text>\n            <Stack direction=\"column\" gap=\"0_5\" mt=\"1\">\n              <Text as=\"span\" size=\"0\" color=\"gray\">\n                Tenant\n              </Text>\n              <Text as=\"code\" size=\"0\">\n                {client.targetParams.tenant ? (\n                  <Box\n                    rounded=\"2\"\n                    overflow=\"auto\"\n                    backgroundColor=\"gray-2\"\n                    border=\"px\"\n                    style={{ maxHeight: \"200px\" }}\n                  >\n                    <pre style={{ fontSize: \"11px\", margin: 0 }}>\n                      <code>{client.targetParams.tenant}</code>\n                    </pre>\n                  </Box>\n                ) : (\n                  <Text as=\"code\" size=\"0\">\n                    -\n                  </Text>\n                )}\n              </Text>\n            </Stack>\n\n            <Stack direction=\"column\" gap=\"0_5\">\n              <Text as=\"span\" size=\"0\" color=\"gray\">\n                Data\n              </Text>\n              {client.targetParams.data ? (\n                <Box\n                  rounded=\"2\"\n                  overflow=\"auto\"\n                  backgroundColor=\"gray-2\"\n                  border=\"px\"\n                  style={{ maxHeight: \"200px\" }}\n                >\n                  <pre style={{ fontSize: \"11px\", margin: 0 }}>\n                    <code>\n                      {JSON.stringify(client.targetParams.data, null, 2)}\n                    </code>\n                  </pre>\n                </Box>\n              ) : (\n                <Text as=\"code\" size=\"0\">\n                  -\n                </Text>\n              )}\n            </Stack>\n          </Stack>\n        </Stack>\n      )}\n    </Stack>\n  );\n};\n"],"names":["GuideContextDetails","client","useGuideContext","isExpanded","setIsExpanded","React","useState","defaultGroup","useStore","store","state","guideGroups","displayInterval","display_interval","Stack","cursor","prev","Text","ChevronDown","ChevronRight","targetParams","tenant","Box","maxHeight","fontSize","margin","data","JSON","stringify"],"mappings":"mjBAMaA,EAAsBA,IAAM,CACjC,KAAA,CAAEC,OAAAA,GAAWC,kBAAgB,EAC7B,CAACC,EAAYC,CAAa,EAAIC,EAAMC,SAAS,EAAK,EAElDC,EAAeC,WAASP,EAAOQ,SAAkBC,EAAMC,YAAY,CAAC,CAAC,EACrEC,GAAkBL,GAAAA,YAAAA,EAAcM,mBAAoB,KAE1D,uBACGC,EAAM,MAAA,CAAA,UAAU,SAAS,UAAU,IAAA,kBACjCA,EAAAA,MACC,CAAA,EAAE,IACF,GAAG,IACH,GAAG,SACH,MAAM,SACN,IAAI,IACJ,MAAO,CAAEC,OAAQ,SAAA,EACjB,QAAS,IAAMX,EAAwBY,GAAA,CAACA,CAAI,CAAA,EAE3CX,EAAA,cAAAY,EAAA,KAAA,CAAK,GAAG,OAAO,KAAK,IAAI,OAAO,UAAQ,SAExC,EACCd,EAAaE,EAAA,cAACa,EAAAA,YAAY,CAAA,KAAM,EAAM,CAAA,EAAIb,EAAA,cAAAc,EAAA,aAAA,CAAa,KAAM,EAAA,CAAM,CACtE,EAEChB,GACEE,EAAA,cAAAS,EAAAA,MAAA,CAAM,UAAU,QAAA,EACdT,EAAA,cAAAS,QAAA,CAAM,UAAU,SAAS,IAAI,MAAM,GAAG,IAAI,GAAG,IAAI,UAAU,IAAA,EACzDT,EAAA,cAAAY,EAAAA,KAAA,CAAK,GAAG,OAAO,KAAK,IAAI,OAAO,QAAA,EAAQ,UAExC,EACCZ,EAAA,cAAAY,EAAAA,KAAA,CAAK,GAAG,OAAO,KAAK,GAClBL,EAAAA,IAAoB,KAAO,IAAM,SAASA,CAAe,GAC5D,CACF,EAEAP,EAAA,cAACS,EAAAA,MAAM,CAAA,UAAU,SAAS,GAAG,IAAI,GAAG,IAAI,UAAU,IAChD,EAAAT,EAAA,cAACY,EAAK,KAAA,CAAA,GAAG,OAAO,KAAK,IAAI,OAAO,QAAQ,EAAA,eAExC,EACAZ,EAAA,cAACS,EAAAA,MAAM,CAAA,UAAU,SAAS,IAAI,MAAM,GAAG,GAAA,EACpCT,EAAA,cAAAY,EAAA,KAAA,CAAK,GAAG,OAAO,KAAK,IAAI,MAAM,MAAA,EAAM,QAErC,EACCZ,EAAA,cAAAY,EAAAA,KAAA,CAAK,GAAG,OAAO,KAAK,GAAA,EAClBhB,EAAOmB,aAAaC,OACnBhB,EAAA,cAACiB,MACC,CAAA,QAAQ,IACR,SAAS,OACT,gBAAgB,SAChB,OAAO,KACP,MAAO,CAAEC,UAAW,OAAQ,CAAA,EAE3BlB,EAAA,cAAA,MAAA,CAAI,MAAO,CAAEmB,SAAU,OAAQC,OAAQ,CAAE,CAAA,kBACvC,OAAMxB,KAAAA,EAAOmB,aAAaC,MAAO,CACpC,CACF,EAEChB,EAAA,cAAAY,EAAAA,KAAA,CAAK,GAAG,OAAO,KAAK,KAAG,GAExB,CAEJ,CACF,EAEAZ,EAAA,cAACS,EAAAA,MAAM,CAAA,UAAU,SAAS,IAAI,OAC3BT,EAAA,cAAAY,EAAAA,KAAA,CAAK,GAAG,OAAO,KAAK,IAAI,MAAM,MAAA,EAAM,MAErC,EACChB,EAAOmB,aAAaM,KAClBrB,EAAA,cAAAiB,MAAA,CACC,QAAQ,IACR,SAAS,OACT,gBAAgB,SAChB,OAAO,KACP,MAAO,CAAEC,UAAW,OAAQ,CAAA,EAE3BlB,EAAA,cAAA,MAAA,CAAI,MAAO,CAAEmB,SAAU,OAAQC,OAAQ,CAAE,CAAA,EACvCpB,EAAA,cAAA,OAAA,KACEsB,KAAKC,UAAU3B,EAAOmB,aAAaM,KAAM,KAAM,CAAC,CACnD,CACF,CACF,EAEArB,EAAA,cAACY,EAAAA,KAAK,CAAA,GAAG,OAAO,KAAK,KAAG,GAExB,CAEJ,CACF,CACF,CAEJ,CAEJ"}
+{"version":3,"file":"GuideContextDetails.js","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/GuideContextDetails.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 { Tooltip } from \"@telegraph/tooltip\";\nimport { Text } from \"@telegraph/typography\";\nimport { ChevronDown, ChevronRight, Info } from \"lucide-react\";\nimport * as React from \"react\";\n\nexport const GuideContextDetails = () => {\n  const { client } = useGuideContext();\n  const [isExpanded, setIsExpanded] = React.useState(false);\n\n  const { defaultGroup, debugSettings } = useStore(client.store, (state) => {\n    return {\n      defaultGroup: state.guideGroups[0],\n      debugSettings: state.debug || {},\n    };\n  });\n  const displayInterval = defaultGroup?.display_interval ?? null;\n\n  return (\n    <Stack direction=\"column\" borderTop=\"px\">\n      <Stack\n        h=\"5\"\n        px=\"2\"\n        bg=\"gray-3\"\n        align=\"center\"\n        gap=\"1\"\n        style={{ cursor: \"pointer\" }}\n        onClick={() => setIsExpanded((prev) => !prev)}\n      >\n        <Text as=\"span\" size=\"0\" weight=\"medium\">\n          More\n        </Text>\n        {isExpanded ? <ChevronDown size={12} /> : <ChevronRight size={12} />}\n      </Stack>\n\n      {isExpanded && (\n        <Stack direction=\"column\">\n          <Stack\n            align=\"center\"\n            justify=\"space-between\"\n            py=\"1\"\n            px=\"2\"\n            borderTop=\"px\"\n          >\n            <Stack align=\"center\" gap=\"1\">\n              <Text as=\"span\" size=\"0\" weight=\"medium\">\n                Client-only engagement\n              </Text>\n              <Tooltip label=\"Contain engagement actions to the client side only while in preview without sending engagement events to the API\">\n                <Icon icon={Info} size=\"0\" color=\"gray\" aria-hidden />\n              </Tooltip>\n            </Stack>\n            <Button\n              size=\"0\"\n              variant=\"soft\"\n              color={debugSettings.skipEngagementTracking ? \"green\" : \"gray\"}\n              onClick={() =>\n                client.setDebug({\n                  ...debugSettings,\n                  skipEngagementTracking: !debugSettings.skipEngagementTracking,\n                })\n              }\n            >\n              {debugSettings.skipEngagementTracking ? \"On\" : \"Off\"}\n            </Button>\n          </Stack>\n\n          <Stack direction=\"column\" py=\"1\" px=\"2\">\n            <Stack align=\"center\" justify=\"space-between\">\n              <Stack align=\"center\" gap=\"1\">\n                <Text as=\"span\" size=\"0\" weight=\"medium\">\n                  Suspend throttling\n                </Text>\n                <Tooltip label=\"Suspend throttling during preview, and show next guide immediately\">\n                  <Icon icon={Info} size=\"0\" color=\"gray\" aria-hidden />\n                </Tooltip>\n              </Stack>\n              <Button\n                size=\"0\"\n                variant=\"soft\"\n                color={debugSettings.ignoreDisplayInterval ? \"green\" : \"gray\"}\n                onClick={() =>\n                  client.setDebug({\n                    ...debugSettings,\n                    ignoreDisplayInterval: !debugSettings.ignoreDisplayInterval,\n                  })\n                }\n              >\n                {debugSettings.ignoreDisplayInterval ? \"On\" : \"Off\"}\n              </Button>\n            </Stack>\n            <Stack direction=\"row\" gap=\"0_5\" py=\"1\">\n              <Text as=\"span\" size=\"0\" color=\"gray\">\n                Throttle:{\" \"}\n                {debugSettings.ignoreDisplayInterval\n                  ? \"(ignored)\"\n                  : displayInterval === null\n                    ? \"(none)\"\n                    : `Every ${displayInterval}s`}\n              </Text>\n            </Stack>\n          </Stack>\n\n          <Stack direction=\"column\" py=\"1\" px=\"2\" borderTop=\"px\">\n            <Text as=\"span\" size=\"0\" weight=\"medium\">\n              Target params\n            </Text>\n            <Stack direction=\"column\" gap=\"0_5\" mt=\"1\">\n              <Text as=\"span\" size=\"0\" color=\"gray\">\n                Tenant\n              </Text>\n              <Text as=\"code\" size=\"0\">\n                {client.targetParams.tenant ? (\n                  <Box\n                    rounded=\"2\"\n                    overflow=\"auto\"\n                    backgroundColor=\"gray-2\"\n                    border=\"px\"\n                    style={{ maxHeight: \"200px\" }}\n                  >\n                    <pre style={{ fontSize: \"11px\", margin: 0 }}>\n                      <code>{client.targetParams.tenant}</code>\n                    </pre>\n                  </Box>\n                ) : (\n                  <Text as=\"code\" size=\"0\">\n                    -\n                  </Text>\n                )}\n              </Text>\n            </Stack>\n\n            <Stack direction=\"column\" gap=\"0_5\">\n              <Text as=\"span\" size=\"0\" color=\"gray\">\n                Data\n              </Text>\n              {client.targetParams.data ? (\n                <Box\n                  rounded=\"2\"\n                  overflow=\"auto\"\n                  backgroundColor=\"gray-2\"\n                  border=\"px\"\n                  style={{ maxHeight: \"200px\" }}\n                >\n                  <pre style={{ fontSize: \"11px\", margin: 0 }}>\n                    <code>\n                      {JSON.stringify(client.targetParams.data, null, 2)}\n                    </code>\n                  </pre>\n                </Box>\n              ) : (\n                <Text as=\"code\" size=\"0\">\n                  -\n                </Text>\n              )}\n            </Stack>\n          </Stack>\n        </Stack>\n      )}\n    </Stack>\n  );\n};\n"],"names":["GuideContextDetails","client","useGuideContext","isExpanded","setIsExpanded","React","useState","defaultGroup","debugSettings","useStore","store","state","guideGroups","debug","displayInterval","display_interval","Stack","cursor","prev","Text","ChevronDown","ChevronRight","Tooltip","Icon","Info","Button","skipEngagementTracking","setDebug","ignoreDisplayInterval","targetParams","tenant","Box","maxHeight","fontSize","margin","data","JSON","stringify"],"mappings":"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"}

package/dist/cjs/modules/guide/components/Toolbar/V2/GuideHoverCard.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("@radix-ui/react-hover-card"),c=require("@telegraph/layout"),s=require("react"),d=require("./useInspectGuideClientStore.js");function l(e){if(e&&typeof e=="object"&&"default"in e)return e;const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const a=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(r,n,a.get?a:{enumerable:!0,get:()=>e[n]})}}return r.default=e,Object.freeze(r)}const o=l(u),t=l(s),f=({children:e,guide:r})=>{if(d.isUnknownGuide(r))return t.createElement(c.Stack,{align:"center"},e);const{annotation:n,activation_location_rules:a,priority:p,...i}=r;return t.createElement(o.Root,null,t.createElement(o.Trigger,null,t.createElement(c.Stack,{align:"center"},e)),t.createElement(o.Portal,null,t.createElement(o.Content,{sideOffset:16,side:"left"},t.createElement(c.Box,{px:"2",shadow:"2",rounded:"3",border:"px",overflow:"auto",backgroundColor:"surface-2",style:{width:"450px",maxHeight:"600px"}},t.createElement("pre",{style:{fontSize:"11px"}},t.createElement("code",null,JSON.stringify(i,null,2)))),t.createElement(o.Arrow,null))))};exports.GuideHoverCard=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("@radix-ui/react-hover-card"),l=require("@telegraph/button"),a=require("@telegraph/layout"),i=require("lucide-react"),f=require("react"),m=require("./useInspectGuideClientStore.js");function u(t){if(t&&typeof t=="object"&&"default"in t)return t;const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const c=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(n,r,c.get?c:{enumerable:!0,get:()=>t[r]})}}return n.default=t,Object.freeze(n)}const o=u(d),e=u(f),p=({children:t,guide:n})=>{if(m.isUnknownGuide(n))return e.createElement(a.Stack,{align:"center"},t);const{annotation:r,activation_location_rules:c,priority:g,...s}=n;return e.createElement(o.Root,null,e.createElement(o.Trigger,null,e.createElement(a.Stack,{align:"center"},t)),e.createElement(o.Portal,null,e.createElement(o.Content,{sideOffset:16,side:"left"},e.createElement(a.Box,{px:"2",shadow:"2",rounded:"3",border:"px",overflow:"auto",backgroundColor:"surface-2",style:{width:"450px",maxHeight:"600px"}},e.createElement(a.Stack,{justify:"flex-end",gap:"1",pt:"2"},e.createElement(l.Button,{size:"0",variant:"soft",color:"default",leadingIcon:{icon:i.RotateCcw,alt:"Reset engagement"},onClick:()=>{}},"Reset engagement"),e.createElement(l.Button,{size:"0",variant:"soft",color:"default",leadingIcon:{icon:i.ExternalLink,alt:"Go to dashboard"},onClick:()=>{}},"Go to dashboard")),e.createElement("pre",{style:{fontSize:"11px"}},e.createElement("code",null,JSON.stringify(s,null,2)))),e.createElement(o.Arrow,null))))};exports.GuideHoverCard=p;
 //# sourceMappingURL=GuideHoverCard.js.map

package/dist/cjs/modules/guide/components/Toolbar/V2/GuideHoverCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"GuideHoverCard.js","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/GuideHoverCard.tsx"],"sourcesContent":["import * as HoverCard from \"@radix-ui/react-hover-card\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport * as React from \"react\";\n\nimport {\n  AnnotatedGuide,\n  UnknownGuide,\n  isUnknownGuide,\n} from \"./useInspectGuideClientStore\";\n\ntype Props = {\n  guide: AnnotatedGuide | UnknownGuide;\n};\n\nexport const GuideHoverCard = ({\n  children,\n  guide,\n}: React.PropsWithChildren<Props>) => {\n  if (isUnknownGuide(guide)) {\n    return <Stack align=\"center\">{children}</Stack>;\n  }\n\n  // Prune out internal or legacy fields.\n  const {\n    annotation: _annotation,\n    activation_location_rules: _activation_location_rules,\n    priority: _priority,\n    ...rest\n  } = guide;\n\n  return (\n    <HoverCard.Root>\n      <HoverCard.Trigger>\n        <Stack align=\"center\">{children}</Stack>\n      </HoverCard.Trigger>\n      <HoverCard.Portal>\n        <HoverCard.Content sideOffset={16} side=\"left\">\n          <Box\n            px=\"2\"\n            shadow=\"2\"\n            rounded=\"3\"\n            border=\"px\"\n            overflow=\"auto\"\n            backgroundColor=\"surface-2\"\n            style={{\n              width: \"450px\",\n              maxHeight: \"600px\",\n            }}\n          >\n            <pre\n              style={{\n                fontSize: \"11px\",\n              }}\n            >\n              <code>{JSON.stringify(rest, null, 2)}</code>\n            </pre>\n          </Box>\n          <HoverCard.Arrow />\n        </HoverCard.Content>\n      </HoverCard.Portal>\n    </HoverCard.Root>\n  );\n};\n"],"names":["GuideHoverCard","children","guide","isUnknownGuide","React","Stack","annotation","_annotation","activation_location_rules","_activation_location_rules","priority","_priority","rest","HoverCard","Box","width","maxHeight","fontSize","JSON","stringify"],"mappings":"+iBAcaA,EAAiBA,CAAC,CAC7BC,SAAAA,EACAC,MAAAA,CAC8B,IAAM,CAChCC,GAAAA,EAAAA,eAAeD,CAAK,EACtB,OAAQE,EAAA,cAAAC,EAAA,MAAA,CAAM,MAAM,QAAA,EAAUJ,CAAS,EAInC,KAAA,CACJK,WAAYC,EACZC,0BAA2BC,EAC3BC,SAAUC,EACV,GAAGC,CAAAA,EACDV,EAEJ,uBACGW,EAAU,KAAV,KACET,EAAA,cAAAS,EAAU,QAAV,KACCT,EAAA,cAACC,EAAAA,MAAM,CAAA,MAAM,UAAUJ,CAAS,CAClC,EACCG,EAAA,cAAAS,EAAU,OAAV,KACCT,EAAA,cAACS,EAAU,QAAV,CAAkB,WAAY,GAAI,KAAK,QACtCT,EAAA,cAACU,OACC,GAAG,IACH,OAAO,IACP,QAAQ,IACR,OAAO,KACP,SAAS,OACT,gBAAgB,YAChB,MAAO,CACLC,MAAO,QACPC,UAAW,OACb,CAAA,EAECZ,EAAA,cAAA,MAAA,CACC,MAAO,CACLa,SAAU,MAAA,GAGXb,EAAA,cAAA,OAAA,KAAMc,KAAKC,UAAUP,EAAM,KAAM,CAAC,CAAE,CACvC,CACF,EACCR,EAAA,cAAAS,EAAU,MAAV,IAAe,CAClB,CACF,CACF,CAEJ"}
+{"version":3,"file":"GuideHoverCard.js","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/GuideHoverCard.tsx"],"sourcesContent":["import * as HoverCard from \"@radix-ui/react-hover-card\";\nimport { Button } from \"@telegraph/button\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport { ExternalLink, RotateCcw } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport {\n  AnnotatedGuide,\n  UnknownGuide,\n  isUnknownGuide,\n} from \"./useInspectGuideClientStore\";\n\ntype Props = {\n  guide: AnnotatedGuide | UnknownGuide;\n};\n\nexport const GuideHoverCard = ({\n  children,\n  guide,\n}: React.PropsWithChildren<Props>) => {\n  if (isUnknownGuide(guide)) {\n    return <Stack align=\"center\">{children}</Stack>;\n  }\n\n  // Prune out internal or legacy fields.\n  const {\n    annotation: _annotation,\n    activation_location_rules: _activation_location_rules,\n    priority: _priority,\n    ...rest\n  } = guide;\n\n  return (\n    <HoverCard.Root>\n      <HoverCard.Trigger>\n        <Stack align=\"center\">{children}</Stack>\n      </HoverCard.Trigger>\n      <HoverCard.Portal>\n        <HoverCard.Content sideOffset={16} side=\"left\">\n          <Box\n            px=\"2\"\n            shadow=\"2\"\n            rounded=\"3\"\n            border=\"px\"\n            overflow=\"auto\"\n            backgroundColor=\"surface-2\"\n            style={{\n              width: \"450px\",\n              maxHeight: \"600px\",\n            }}\n          >\n            <Stack justify=\"flex-end\" gap=\"1\" pt=\"2\">\n              <Button\n                size=\"0\"\n                variant=\"soft\"\n                color=\"default\"\n                leadingIcon={{ icon: RotateCcw, alt: \"Reset engagement\" }}\n                // TODO(KNO-11468): Placeholder button\n                onClick={() => {}}\n              >\n                Reset engagement\n              </Button>\n              <Button\n                size=\"0\"\n                variant=\"soft\"\n                color=\"default\"\n                leadingIcon={{ icon: ExternalLink, alt: \"Go to dashboard\" }}\n                // TODO(KNO-11819): Placeholder button\n                onClick={() => {}}\n              >\n                Go to dashboard\n              </Button>\n            </Stack>\n            <pre\n              style={{\n                fontSize: \"11px\",\n              }}\n            >\n              <code>{JSON.stringify(rest, null, 2)}</code>\n            </pre>\n          </Box>\n          <HoverCard.Arrow />\n        </HoverCard.Content>\n      </HoverCard.Portal>\n    </HoverCard.Root>\n  );\n};\n"],"names":["GuideHoverCard","children","guide","isUnknownGuide","React","Stack","annotation","_annotation","activation_location_rules","_activation_location_rules","priority","_priority","rest","HoverCard","Box","width","maxHeight","Button","icon","RotateCcw","alt","ExternalLink","fontSize","JSON","stringify"],"mappings":"wmBAgBaA,EAAiBA,CAAC,CAC7BC,SAAAA,EACAC,MAAAA,CAC8B,IAAM,CAChCC,GAAAA,EAAAA,eAAeD,CAAK,EACtB,OAAQE,EAAA,cAAAC,EAAA,MAAA,CAAM,MAAM,QAAA,EAAUJ,CAAS,EAInC,KAAA,CACJK,WAAYC,EACZC,0BAA2BC,EAC3BC,SAAUC,EACV,GAAGC,CAAAA,EACDV,EAEJ,uBACGW,EAAU,KAAV,KACET,EAAA,cAAAS,EAAU,QAAV,KACCT,EAAA,cAACC,EAAAA,MAAM,CAAA,MAAM,UAAUJ,CAAS,CAClC,EACCG,EAAA,cAAAS,EAAU,OAAV,KACCT,EAAA,cAACS,EAAU,QAAV,CAAkB,WAAY,GAAI,KAAK,QACtCT,EAAA,cAACU,OACC,GAAG,IACH,OAAO,IACP,QAAQ,IACR,OAAO,KACP,SAAS,OACT,gBAAgB,YAChB,MAAO,CACLC,MAAO,QACPC,UAAW,OACb,CAAA,kBAECX,EAAM,MAAA,CAAA,QAAQ,WAAW,IAAI,IAAI,GAAG,GACnC,EAAAD,EAAA,cAACa,EAAA,OAAA,CACC,KAAK,IACL,QAAQ,OACR,MAAM,UACN,YAAa,CAAEC,KAAMC,EAAAA,UAAWC,IAAK,kBAAmB,EAExD,QAAS,IAAM,CAAA,CAAC,EAAE,kBAIpB,EAAAhB,EAAA,cAACa,EAAA,OAAA,CACC,KAAK,IACL,QAAQ,OACR,MAAM,UACN,YAAa,CAAEC,KAAMG,EAAAA,aAAcD,IAAK,iBAAkB,EAE1D,QAAS,IAAM,CAAA,CAAC,EAAE,iBAItB,CAAA,EACChB,EAAA,cAAA,MAAA,CACC,MAAO,CACLkB,SAAU,MAAA,GAGXlB,EAAA,cAAA,OAAA,KAAMmB,KAAKC,UAAUZ,EAAM,KAAM,CAAC,CAAE,CACvC,CACF,EACCR,EAAA,cAAAS,EAAU,MAAV,IAAe,CAClB,CACF,CACF,CAEJ"}

package/dist/cjs/modules/guide/components/Toolbar/V2/GuideRow.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("@telegraph/button"),a=require("@telegraph/layout"),u=require("@telegraph/tag"),i=require("@telegraph/tooltip"),d=require("@telegraph/typography"),n=require("lucide-react"),p=require("react"),b=require("./GuideHoverCard.js"),c=require("./useInspectGuideClientStore.js");function m(e){if(e&&typeof e=="object"&&"default"in e)return e;const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const l in e)if(l!=="default"){const s=Object.getOwnPropertyDescriptor(e,l);Object.defineProperty(r,l,s.get?s:{enumerable:!0,get:()=>e[l]})}}return r.default=e,Object.freeze(r)}const t=m(p),h=({children:e})=>t.createElement(a.Stack,{h:"7",px:"2",borderTop:"px",justify:"space-between",align:"center"},e),g=({guide:e,orderIndex:r})=>t.createElement(h,null,t.createElement(b.GuideHoverCard,{guide:e},t.createElement(a.Stack,{h:"6",justify:"flex-start",align:"center",gap:"2"},t.createElement(u.Tag,{size:"0",variant:"soft",color:e.bypass_global_group_limit?"blue":"default"},r+1),t.createElement(d.Text,{as:"code",size:"1"},e.key))),t.createElement(a.Stack,{justify:"flex-end"},!c.isUnknownGuide(e)&&t.createElement(t.Fragment,null,t.createElement(a.Stack,{gap:"1"},t.createElement(i.Tooltip,{label:e.annotation.selectable.status==="returned"?"This guide was queried and can display":e.annotation.selectable.status==="queried"?"This guide was queried but cannot display":e.annotation.selectable.status==="throttled"?"This guide was queried and can display but is throttled currently":"No component is present in the current location to display this guide"},t.createElement(o.Button,{px:"1",size:"1",variant:"soft",color:e.annotation.selectable.status==="returned"?"green":e.annotation.selectable.status==="queried"?"gray":e.annotation.selectable.status==="throttled"?"yellow":"red",leadingIcon:{icon:n.Code2,alt:"Render"}})),t.createElement(i.Tooltip,{label:e.annotation.activatable.status?"This guide can be activated at the current location":"This guide cannot be activated at the current location"},t.createElement(o.Button,{px:"1",size:"1",variant:"soft",color:e.annotation.activatable.status?"green":"red",leadingIcon:{icon:n.LocateFixed,alt:"Target"}}))),t.createElement(a.Stack,{px:"2",align:"center"},t.createElement(a.Box,{h:"3",borderLeft:"px",borderColor:"gray-6"}))),t.createElement(a.Stack,{gap:"1"},!c.isUnknownGuide(e)&&t.createElement(t.Fragment,null,t.createElement(i.Tooltip,{label:e.annotation.targetable.status?"This user is being targeted":e.annotation.targetable.message},t.createElement(o.Button,{px:"1",size:"1",variant:"soft",color:e.annotation.targetable.status?"green":"red",leadingIcon:{icon:n.UserCircle2,alt:"Target"}})),t.createElement(i.Tooltip,{label:e.annotation.archived.status?"User has already dismissed this guide":"User has not dismissed this guide"},t.createElement(o.Button,{px:"1",size:"1",variant:"soft",color:e.annotation.archived.status?"red":"green",leadingIcon:{icon:n.Eye,alt:"Not archived"}}))),t.createElement(i.Tooltip,{label:c.isUnknownGuide(e)?"This guide has never been committed and published yet":e.active?"This guide is active":"This guide is not active"},t.createElement(o.Button,{px:"1",size:"1",variant:"soft",color:e.active?"green":"red",leadingIcon:e.active?{icon:n.CheckCircle2,alt:"Active"}:{icon:n.CircleDashed,alt:"Inactive"}})))));exports.GuideRow=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("@knocklabs/react-core"),r=require("@telegraph/button"),a=require("@telegraph/layout"),g=require("@telegraph/tag"),c=require("@telegraph/tooltip"),h=require("@telegraph/typography"),o=require("lucide-react"),y=require("react"),f=require("./GuideHoverCard.js"),u=require("./useInspectGuideClientStore.js");function E(e){if(e&&typeof e=="object"&&"default"in e)return e;const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const s=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(i,n,s.get?s:{enumerable:!0,get:()=>e[n]})}}return i.default=e,Object.freeze(i)}const t=E(y),v=({children:e})=>t.createElement(a.Stack,{h:"7",px:"2",borderTop:"px",justify:"space-between",align:"center"},e),T=({guide:e,orderIndex:i})=>{const{client:n}=m.useGuideContext(),{debugSettings:s}=m.useStore(n.store,p=>({debugSettings:p.debug||{}})),d=s.focusedGuideKeys||{},b=Object.keys(d).length>0,l=!!d[e.key];return t.createElement(v,null,t.createElement(f.GuideHoverCard,{guide:e},t.createElement(a.Stack,{h:"6",justify:"flex-start",align:"center",gap:"2"},t.createElement(g.Tag,{size:"0",variant:"soft",color:e.bypass_global_group_limit?"blue":"default"},i+1),t.createElement(h.Text,{as:"code",size:"1",color:b?l?"blue":"disabled":"default"},e.key))),t.createElement(a.Stack,{justify:"flex-end"},!u.isUnknownGuide(e)&&t.createElement(t.Fragment,null,e.annotation.selectable.status!==void 0&&(!b||l)&&t.createElement(t.Fragment,null,t.createElement(c.Tooltip,{label:l?"Unfocus this guide":"Focus on this guide"},t.createElement(r.Button,{size:"1",variant:"ghost",color:l?"blue":"gray",leadingIcon:{icon:o.Pin,alt:"Focus"},onClick:()=>n.setDebug({...s,focusedGuideKeys:l?{}:{[e.key]:!0}})})),t.createElement(a.Stack,{px:"2",align:"center"},t.createElement(a.Box,{h:"3",borderLeft:"px",borderColor:"gray-6"}))),t.createElement(a.Stack,{gap:"1"},t.createElement(c.Tooltip,{label:e.annotation.selectable.status==="returned"?"This guide was queried and can display":e.annotation.selectable.status==="queried"?"This guide was queried but cannot display":e.annotation.selectable.status==="throttled"?"This guide was queried and can display but is throttled currently":"No component is present in the current location to display this guide"},t.createElement(r.Button,{px:"1",size:"1",variant:"soft",color:e.annotation.selectable.status==="returned"?"green":e.annotation.selectable.status==="queried"?"gray":e.annotation.selectable.status==="throttled"?"yellow":"red",leadingIcon:{icon:o.Code2,alt:"Render"}})),t.createElement(c.Tooltip,{label:e.annotation.activatable.status?"This guide can be activated at the current location":"This guide cannot be activated at the current location"},t.createElement(r.Button,{px:"1",size:"1",variant:"soft",color:e.annotation.activatable.status?"green":"red",leadingIcon:{icon:o.LocateFixed,alt:"Target"}}))),t.createElement(a.Stack,{px:"2",align:"center"},t.createElement(a.Box,{h:"3",borderLeft:"px",borderColor:"gray-6"}))),t.createElement(a.Stack,{gap:"1"},!u.isUnknownGuide(e)&&t.createElement(t.Fragment,null,t.createElement(c.Tooltip,{label:e.annotation.targetable.status?"This user is being targeted":e.annotation.targetable.message},t.createElement(r.Button,{px:"1",size:"1",variant:"soft",color:e.annotation.targetable.status?"green":"red",leadingIcon:{icon:o.UserCircle2,alt:"Target"}})),t.createElement(c.Tooltip,{label:e.annotation.archived.status?"User has already dismissed this guide":"User has not dismissed this guide"},t.createElement(r.Button,{px:"1",size:"1",variant:"soft",color:e.annotation.archived.status?"red":"green",leadingIcon:{icon:o.Eye,alt:"Not archived"}}))),t.createElement(c.Tooltip,{label:u.isUnknownGuide(e)?"This guide has never been committed and published yet":e.active?"This guide is active":"This guide is not active"},t.createElement(r.Button,{px:"1",size:"1",variant:"soft",color:e.active?"green":"red",leadingIcon:e.active?{icon:o.CheckCircle2,alt:"Active"}:{icon:o.CircleDashed,alt:"Inactive"}})))))};exports.GuideRow=T;
 //# sourceMappingURL=GuideRow.js.map

package/dist/cjs/modules/guide/components/Toolbar/V2/GuideRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"GuideRow.js","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/GuideRow.tsx"],"sourcesContent":["import { Button } from \"@telegraph/button\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport { Tag } from \"@telegraph/tag\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text } from \"@telegraph/typography\";\nimport {\n  CheckCircle2,\n  CircleDashed,\n  Code2,\n  Eye,\n  LocateFixed,\n  UserCircle2,\n} from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { GuideHoverCard } from \"./GuideHoverCard\";\nimport {\n  AnnotatedGuide,\n  UnknownGuide,\n  isUnknownGuide,\n} from \"./useInspectGuideClientStore\";\n\nconst Row = ({ children }: React.PropsWithChildren) => (\n  <Stack h=\"7\" px=\"2\" borderTop=\"px\" justify=\"space-between\" align=\"center\">\n    {children}\n  </Stack>\n);\n\ntype Props = {\n  guide: UnknownGuide | AnnotatedGuide;\n  orderIndex: number;\n};\n\nexport const GuideRow = ({ guide, orderIndex }: Props) => {\n  return (\n    <Row>\n      <GuideHoverCard guide={guide}>\n        <Stack h=\"6\" justify=\"flex-start\" align=\"center\" gap=\"2\">\n          <Tag\n            size=\"0\"\n            variant=\"soft\"\n            color={guide.bypass_global_group_limit ? \"blue\" : \"default\"}\n          >\n            {orderIndex + 1}\n          </Tag>\n          <Text as=\"code\" size=\"1\">\n            {guide.key}\n          </Text>\n        </Stack>\n      </GuideHoverCard>\n\n      <Stack justify=\"flex-end\">\n        {!isUnknownGuide(guide) && (\n          <>\n            <Stack gap=\"1\">\n              <Tooltip\n                label={\n                  guide.annotation.selectable.status === \"returned\"\n                    ? \"This guide was queried and can display\"\n                    : guide.annotation.selectable.status === \"queried\"\n                      ? \"This guide was queried but cannot display\"\n                      : guide.annotation.selectable.status === \"throttled\"\n                        ? \"This guide was queried and can display but is throttled currently\"\n                        : \"No component is present in the current location to display this guide\"\n                }\n              >\n                <Button\n                  px=\"1\"\n                  size=\"1\"\n                  variant=\"soft\"\n                  color={\n                    guide.annotation.selectable.status === \"returned\"\n                      ? \"green\"\n                      : guide.annotation.selectable.status === \"queried\"\n                        ? \"gray\"\n                        : guide.annotation.selectable.status === \"throttled\"\n                          ? \"yellow\"\n                          : \"red\"\n                  }\n                  leadingIcon={{ icon: Code2, alt: \"Render\" }}\n                />\n              </Tooltip>\n              <Tooltip\n                label={\n                  guide.annotation.activatable.status\n                    ? \"This guide can be activated at the current location\"\n                    : \"This guide cannot be activated at the current location\"\n                }\n              >\n                <Button\n                  px=\"1\"\n                  size=\"1\"\n                  variant=\"soft\"\n                  color={guide.annotation.activatable.status ? \"green\" : \"red\"}\n                  leadingIcon={{ icon: LocateFixed, alt: \"Target\" }}\n                />\n              </Tooltip>\n            </Stack>\n            <Stack px=\"2\" align=\"center\">\n              <Box h=\"3\" borderLeft=\"px\" borderColor=\"gray-6\" />\n            </Stack>\n          </>\n        )}\n        <Stack gap=\"1\">\n          {!isUnknownGuide(guide) && (\n            <>\n              <Tooltip\n                label={\n                  guide.annotation.targetable.status\n                    ? \"This user is being targeted\"\n                    : guide.annotation.targetable.message\n                }\n              >\n                <Button\n                  px=\"1\"\n                  size=\"1\"\n                  variant=\"soft\"\n                  color={guide.annotation.targetable.status ? \"green\" : \"red\"}\n                  leadingIcon={{ icon: UserCircle2, alt: \"Target\" }}\n                />\n              </Tooltip>\n              <Tooltip\n                label={\n                  guide.annotation.archived.status\n                    ? \"User has already dismissed this guide\"\n                    : \"User has not dismissed this guide\"\n                }\n              >\n                <Button\n                  px=\"1\"\n                  size=\"1\"\n                  variant=\"soft\"\n                  color={guide.annotation.archived.status ? \"red\" : \"green\"}\n                  leadingIcon={{ icon: Eye, alt: \"Not archived\" }}\n                />\n              </Tooltip>\n            </>\n          )}\n          <Tooltip\n            label={\n              isUnknownGuide(guide)\n                ? \"This guide has never been committed and published yet\"\n                : !guide.active\n                  ? \"This guide is not active\"\n                  : \"This guide is active\"\n            }\n          >\n            <Button\n              px=\"1\"\n              size=\"1\"\n              variant=\"soft\"\n              color={guide.active ? \"green\" : \"red\"}\n              leadingIcon={\n                guide.active\n                  ? { icon: CheckCircle2, alt: \"Active\" }\n                  : { icon: CircleDashed, alt: \"Inactive\" }\n              }\n            />\n          </Tooltip>\n        </Stack>\n      </Stack>\n    </Row>\n  );\n};\n"],"names":["Row","children","React","Stack","GuideRow","guide","orderIndex","GuideHoverCard","Tag","bypass_global_group_limit","Text","key","isUnknownGuide","Tooltip","annotation","selectable","status","Button","icon","Code2","alt","activatable","LocateFixed","Box","targetable","message","UserCircle2","archived","Eye","active","CheckCircle2","CircleDashed"],"mappings":"yrBAsBMA,EAAMA,CAAC,CAAEC,SAAAA,CAAkC,IAC9CC,EAAA,cAAAC,EAAAA,MAAA,CAAM,EAAE,IAAI,GAAG,IAAI,UAAU,KAAK,QAAQ,gBAAgB,MAAM,QAAA,EAC9DF,CACH,EAQWG,EAAWA,CAAC,CAAEC,MAAAA,EAAOC,WAAAA,CAAkB,IAEhDJ,EAAA,cAACF,OACEE,EAAA,cAAAK,EAAA,eAAA,CAAe,MAAAF,GACbH,EAAA,cAAAC,EAAA,MAAA,CAAM,EAAE,IAAI,QAAQ,aAAa,MAAM,SAAS,IAAI,KAClDD,EAAA,cAAAM,EAAAA,IAAA,CACC,KAAK,IACL,QAAQ,OACR,MAAOH,EAAMI,0BAA4B,OAAS,SAEjDH,EAAAA,EAAa,CAChB,EACAJ,EAAA,cAACQ,EAAAA,MAAK,GAAG,OAAO,KAAK,GAAA,EAClBL,EAAMM,GACT,CACF,CACF,EAECT,EAAA,cAAAC,EAAAA,MAAA,CAAM,QAAQ,UAAA,EACZ,CAACS,EAAeP,eAAAA,CAAK,GACpBH,EAAA,cAAAA,EAAA,SAAA,KACGA,EAAA,cAAAC,EAAA,MAAA,CAAM,IAAI,GACT,EAAAD,EAAA,cAACW,WACC,MACER,EAAMS,WAAWC,WAAWC,SAAW,WACnC,yCACAX,EAAMS,WAAWC,WAAWC,SAAW,UACrC,4CACAX,EAAMS,WAAWC,WAAWC,SAAW,YACrC,oEACA,uEAGV,EAAAd,EAAA,cAACe,EACC,OAAA,CAAA,GAAG,IACH,KAAK,IACL,QAAQ,OACR,MACEZ,EAAMS,WAAWC,WAAWC,SAAW,WACnC,QACAX,EAAMS,WAAWC,WAAWC,SAAW,UACrC,OACAX,EAAMS,WAAWC,WAAWC,SAAW,YACrC,SACA,MAEV,YAAa,CAAEE,KAAMC,EAAAA,MAAOC,IAAK,QAAA,CAAW,CAAA,CAEhD,EACClB,EAAA,cAAAW,EAAA,QAAA,CACC,MACER,EAAMS,WAAWO,YAAYL,OACzB,sDACA,wDAGN,EAAAd,EAAA,cAACe,EACC,OAAA,CAAA,GAAG,IACH,KAAK,IACL,QAAQ,OACR,MAAOZ,EAAMS,WAAWO,YAAYL,OAAS,QAAU,MACvD,YAAa,CAAEE,KAAMI,EAAAA,YAAaF,IAAK,QAAA,CAAW,CAAA,CAEtD,CACF,EACAlB,EAAA,cAACC,EAAAA,MAAM,CAAA,GAAG,IAAI,MAAM,QAClB,EAAAD,EAAA,cAACqB,EAAI,IAAA,CAAA,EAAE,IAAI,WAAW,KAAK,YAAY,QAAA,CAAQ,CACjD,CACF,EAEFrB,EAAA,cAACC,EAAAA,MAAM,CAAA,IAAI,GACR,EAAA,CAACS,EAAAA,eAAeP,CAAK,GAElBH,EAAA,cAAAA,EAAA,SAAA,KAAAA,EAAA,cAACW,EAAAA,QACC,CAAA,MACER,EAAMS,WAAWU,WAAWR,OACxB,8BACAX,EAAMS,WAAWU,WAAWC,SAGlCvB,EAAA,cAACe,EAAAA,OACC,CAAA,GAAG,IACH,KAAK,IACL,QAAQ,OACR,MAAOZ,EAAMS,WAAWU,WAAWR,OAAS,QAAU,MACtD,YAAa,CAAEE,KAAMQ,EAAAA,YAAaN,IAAK,QAAA,CAAW,CAAA,CAEtD,EACClB,EAAA,cAAAW,EAAA,QAAA,CACC,MACER,EAAMS,WAAWa,SAASX,OACtB,wCACA,mCAGN,EAAAd,EAAA,cAACe,EACC,OAAA,CAAA,GAAG,IACH,KAAK,IACL,QAAQ,OACR,MAAOZ,EAAMS,WAAWa,SAASX,OAAS,MAAQ,QAClD,YAAa,CAAEE,KAAMU,EAAAA,IAAKR,IAAK,cAAA,CAAiB,CAAA,CAEpD,CACF,EAEDlB,EAAA,cAAAW,EAAAA,QAAA,CACC,MACED,EAAAA,eAAeP,CAAK,EAChB,wDACCA,EAAMwB,OAEL,uBADA,4BAIR3B,EAAA,cAACe,EAAAA,OACC,CAAA,GAAG,IACH,KAAK,IACL,QAAQ,OACR,MAAOZ,EAAMwB,OAAS,QAAU,MAChC,YACExB,EAAMwB,OACF,CAAEX,KAAMY,EAAAA,aAAcV,IAAK,QAAA,EAC3B,CAAEF,KAAMa,EAAAA,aAAcX,IAAK,UAAA,CAChC,CAAA,CAEL,CACF,CACF,CACF"}
+{"version":3,"file":"GuideRow.js","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/GuideRow.tsx"],"sourcesContent":["import { useGuideContext, useStore } from \"@knocklabs/react-core\";\nimport { Button } from \"@telegraph/button\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport { Tag } from \"@telegraph/tag\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text } from \"@telegraph/typography\";\nimport {\n  CheckCircle2,\n  CircleDashed,\n  Code2,\n  Eye,\n  LocateFixed,\n  Pin,\n  UserCircle2,\n} from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { GuideHoverCard } from \"./GuideHoverCard\";\nimport {\n  AnnotatedGuide,\n  UnknownGuide,\n  isUnknownGuide,\n} from \"./useInspectGuideClientStore\";\n\nconst Row = ({ children }: React.PropsWithChildren) => (\n  <Stack h=\"7\" px=\"2\" borderTop=\"px\" justify=\"space-between\" align=\"center\">\n    {children}\n  </Stack>\n);\n\ntype Props = {\n  guide: UnknownGuide | AnnotatedGuide;\n  orderIndex: number;\n};\n\nexport const GuideRow = ({ guide, orderIndex }: Props) => {\n  const { client } = useGuideContext();\n  const { debugSettings } = useStore(client.store, (state) => ({\n    debugSettings: state.debug || {},\n  }));\n\n  const focusedGuideKeys = debugSettings.focusedGuideKeys || {};\n  const hasFocus = Object.keys(focusedGuideKeys).length > 0;\n  const isFocused = !!focusedGuideKeys[guide.key];\n\n  return (\n    <Row>\n      <GuideHoverCard guide={guide}>\n        <Stack h=\"6\" justify=\"flex-start\" align=\"center\" gap=\"2\">\n          <Tag\n            size=\"0\"\n            variant=\"soft\"\n            color={guide.bypass_global_group_limit ? \"blue\" : \"default\"}\n          >\n            {orderIndex + 1}\n          </Tag>\n          <Text\n            as=\"code\"\n            size=\"1\"\n            color={!hasFocus ? \"default\" : isFocused ? \"blue\" : \"disabled\"}\n          >\n            {guide.key}\n          </Text>\n        </Stack>\n      </GuideHoverCard>\n\n      <Stack justify=\"flex-end\">\n        {!isUnknownGuide(guide) && (\n          <>\n            {guide.annotation.selectable.status !== undefined &&\n              (!hasFocus || isFocused) && (\n                <>\n                  <Tooltip\n                    label={\n                      isFocused ? \"Unfocus this guide\" : \"Focus on this guide\"\n                    }\n                  >\n                    <Button\n                      size=\"1\"\n                      variant=\"ghost\"\n                      color={isFocused ? \"blue\" : \"gray\"}\n                      leadingIcon={{ icon: Pin, alt: \"Focus\" }}\n                      onClick={() =>\n                        client.setDebug({\n                          ...debugSettings,\n                          focusedGuideKeys: isFocused\n                            ? {}\n                            : { [guide.key]: true },\n                        })\n                      }\n                    />\n                  </Tooltip>\n                  <Stack px=\"2\" align=\"center\">\n                    <Box h=\"3\" borderLeft=\"px\" borderColor=\"gray-6\" />\n                  </Stack>\n                </>\n              )}\n            <Stack gap=\"1\">\n              <Tooltip\n                label={\n                  guide.annotation.selectable.status === \"returned\"\n                    ? \"This guide was queried and can display\"\n                    : guide.annotation.selectable.status === \"queried\"\n                      ? \"This guide was queried but cannot display\"\n                      : guide.annotation.selectable.status === \"throttled\"\n                        ? \"This guide was queried and can display but is throttled currently\"\n                        : \"No component is present in the current location to display this guide\"\n                }\n              >\n                <Button\n                  px=\"1\"\n                  size=\"1\"\n                  variant=\"soft\"\n                  color={\n                    guide.annotation.selectable.status === \"returned\"\n                      ? \"green\"\n                      : guide.annotation.selectable.status === \"queried\"\n                        ? \"gray\"\n                        : guide.annotation.selectable.status === \"throttled\"\n                          ? \"yellow\"\n                          : \"red\"\n                  }\n                  leadingIcon={{ icon: Code2, alt: \"Render\" }}\n                />\n              </Tooltip>\n              <Tooltip\n                label={\n                  guide.annotation.activatable.status\n                    ? \"This guide can be activated at the current location\"\n                    : \"This guide cannot be activated at the current location\"\n                }\n              >\n                <Button\n                  px=\"1\"\n                  size=\"1\"\n                  variant=\"soft\"\n                  color={guide.annotation.activatable.status ? \"green\" : \"red\"}\n                  leadingIcon={{ icon: LocateFixed, alt: \"Target\" }}\n                />\n              </Tooltip>\n            </Stack>\n            <Stack px=\"2\" align=\"center\">\n              <Box h=\"3\" borderLeft=\"px\" borderColor=\"gray-6\" />\n            </Stack>\n          </>\n        )}\n        <Stack gap=\"1\">\n          {!isUnknownGuide(guide) && (\n            <>\n              <Tooltip\n                label={\n                  guide.annotation.targetable.status\n                    ? \"This user is being targeted\"\n                    : guide.annotation.targetable.message\n                }\n              >\n                <Button\n                  px=\"1\"\n                  size=\"1\"\n                  variant=\"soft\"\n                  color={guide.annotation.targetable.status ? \"green\" : \"red\"}\n                  leadingIcon={{ icon: UserCircle2, alt: \"Target\" }}\n                />\n              </Tooltip>\n              <Tooltip\n                label={\n                  guide.annotation.archived.status\n                    ? \"User has already dismissed this guide\"\n                    : \"User has not dismissed this guide\"\n                }\n              >\n                <Button\n                  px=\"1\"\n                  size=\"1\"\n                  variant=\"soft\"\n                  color={guide.annotation.archived.status ? \"red\" : \"green\"}\n                  leadingIcon={{ icon: Eye, alt: \"Not archived\" }}\n                />\n              </Tooltip>\n            </>\n          )}\n          <Tooltip\n            label={\n              isUnknownGuide(guide)\n                ? \"This guide has never been committed and published yet\"\n                : !guide.active\n                  ? \"This guide is not active\"\n                  : \"This guide is active\"\n            }\n          >\n            <Button\n              px=\"1\"\n              size=\"1\"\n              variant=\"soft\"\n              color={guide.active ? \"green\" : \"red\"}\n              leadingIcon={\n                guide.active\n                  ? { icon: CheckCircle2, alt: \"Active\" }\n                  : { icon: CircleDashed, alt: \"Inactive\" }\n              }\n            />\n          </Tooltip>\n        </Stack>\n      </Stack>\n    </Row>\n  );\n};\n"],"names":["Row","children","React","Stack","GuideRow","guide","orderIndex","client","useGuideContext","debugSettings","useStore","store","state","debug","focusedGuideKeys","hasFocus","Object","keys","length","isFocused","key","GuideHoverCard","Tag","bypass_global_group_limit","Text","isUnknownGuide","annotation","selectable","status","undefined","Tooltip","Button","icon","Pin","alt","setDebug","Box","Code2","activatable","LocateFixed","targetable","message","UserCircle2","archived","Eye","active","CheckCircle2","CircleDashed"],"mappings":"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"}

package/dist/cjs/modules/guide/components/Toolbar/V2/V2.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("@knocklabs/react-core"),d=require("@telegraph/button"),n=require("@telegraph/layout"),f=require("lucide-react"),b=require("react"),y=require("../KnockButton.js"),m=require("../shared.js");;/* empty css             */const E=require("./GuideContextDetails.js"),g=require("./GuideRow.js"),x=require("./GuidesListDisplaySelect.js"),C=require("./helpers.js"),q=require("./useInspectGuideClientStore.js"),S=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},e=S(b),D=({guides:t,displayOption:i})=>t.map((r,u)=>{const{isEligible:o,isQualified:s,selectable:a}=r.annotation,l=o&&s,c=l&&a.status==="returned";return i==="only-displaying"&&!c||i==="only-displayable"&&!l||i==="all-eligible"&&!o?null:e.default.createElement(g.GuideRow,{key:r.key,guide:r,orderIndex:u})}),k=()=>{const{client:t}=p.useGuideContext(),[i,r]=e.default.useState("only-displayable"),[u,o]=e.default.useState(C.detectToolbarParam()),[s,a]=e.default.useState(!0);e.default.useEffect(()=>{if(u)return t.setDebug(),()=>{t.unsetDebug()}},[u,t]);const l=q.useInspectGuideClientStore();return l?e.default.createElement(n.Box,{position:"fixed",top:"4",right:"4",style:{zIndex:m.TOOLBAR_Z_INDEX}},s?e.default.createElement(y.KnockButton,{onClick:()=>a(!1)}):e.default.createElement(n.Stack,{direction:"column",backgroundColor:"surface-2",shadow:"2",rounded:"3",border:"px",overflow:"hidden",style:{width:"400px"}},e.default.createElement(n.Stack,{w:"full",p:"2",justify:"space-between",direction:"row",style:{boxSizing:"border-box"}},e.default.createElement(n.Box,{style:{width:"220px"}},e.default.createElement(x.GuidesListDisplaySelect,{value:i,onChange:c=>r(c)})),e.default.createElement(n.Stack,{gap:"2"},e.default.createElement(d.Button,{onClick:()=>o(!1),size:"1",variant:"soft",trailingIcon:{icon:f.Undo2,"aria-hidden":!0}},"Exit"),e.default.createElement(d.Button,{onClick:()=>a(!0),size:"1",variant:"soft",leadingIcon:{icon:f.Minimize2,alt:"Collapse guide toolbar"}}))),e.default.createElement(n.Box,{w:"full"},l.error&&e.default.createElement(n.Box,null,l.error),e.default.createElement(E.GuideContextDetails,null),e.default.createElement(D,{guides:l.guides,displayOption:i})))):null};exports.V2=k;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("@knocklabs/react-core"),p=require("@telegraph/button"),i=require("@telegraph/layout"),q=require("@telegraph/typography"),b=require("lucide-react"),R=require("react"),G=require("../KnockButton.js"),S=require("../shared.js");;/* empty css             */const m=require("./DragHandle.js"),w=require("./GuideContextDetails.js"),k=require("./GuideRow.js"),B=require("./GuidesListDisplaySelect.js"),D=require("./helpers.js"),I=require("./useDraggable.js"),L=require("./useInspectGuideClientStore.js"),_=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},e=_(R),z=({guides:t,displayOption:l})=>t.map((s,n)=>{const{isEligible:a,isQualified:u,selectable:c}=s.annotation,o=a&&u,d=o&&c.status==="returned";return l==="only-displaying"&&!d||l==="only-displayable"&&!o||l==="all-eligible"&&!a?null:e.default.createElement(k.GuideRow,{key:s.key,guide:s,orderIndex:n})}),V=()=>{const{client:t}=h.useGuideContext(),[l,s]=e.default.useState("all-guides"),[n,a]=e.default.useState(()=>D.getRunConfig()),[u,c]=e.default.useState(!1);e.default.useEffect(()=>{var g;const{isVisible:r=!1,focusedGuideKeys:x={}}=n||{},C=(g=t.store.state.debug)==null?void 0:g.debugging;return r&&!C&&t.setDebug({focusedGuideKeys:x}),()=>{t.unsetDebug()}},[n,t]);const o=e.default.useRef(null),{position:d,isDragging:y,handlePointerDown:E}=I.useDraggable({elementRef:o,reclampDeps:[u],rightPadding:m.DRAG_HANDLE_OVERHANG,initialPosition:{top:16,right:16}}),f=L.useInspectGuideClientStore(n);return!f||!(n!=null&&n.isVisible)?null:e.default.createElement(i.Box,{tgphRef:o,position:"fixed",style:{top:d.top+"px",right:d.right+"px",zIndex:S.TOOLBAR_Z_INDEX}},e.default.createElement(m.DragHandle,{onPointerDown:E,isDragging:y}),u?e.default.createElement(G.KnockButton,{onClick:()=>c(!1),positioned:!1}):e.default.createElement(i.Stack,{direction:"column",backgroundColor:"surface-2",shadow:"2",rounded:"3",border:"px",overflow:"hidden",style:{width:"400px"}},e.default.createElement(i.Stack,{w:"full",p:"2",justify:"space-between",direction:"row",style:{boxSizing:"border-box"}},e.default.createElement(i.Box,{style:{width:"220px"}},e.default.createElement(B.GuidesListDisplaySelect,{value:l,onChange:r=>s(r)})),e.default.createElement(i.Stack,{gap:"2"},e.default.createElement(p.Button,{onClick:()=>{a(r=>({...r,isVisible:!1})),D.clearRunConfigLS(),t.unsetDebug()},size:"1",variant:"soft",trailingIcon:{icon:b.Undo2,"aria-hidden":!0}},"Exit"),e.default.createElement(p.Button,{onClick:()=>c(!0),size:"1",variant:"soft",leadingIcon:{icon:b.Minimize2,alt:"Collapse guide toolbar"}}))),e.default.createElement(i.Box,{w:"full"},e.default.createElement(w.GuideContextDetails,null),f.error&&e.default.createElement(i.Box,{px:"2",pb:"1"},e.default.createElement(q.Text,{as:"span",size:"0",weight:"medium",color:"red"},f.error)),e.default.createElement(z,{guides:f.guides,displayOption:l}))))};exports.V2=V;
 //# sourceMappingURL=V2.js.map

package/dist/cjs/modules/guide/components/Toolbar/V2/V2.js.map

@@ -1 +1 @@
-{"version":3,"file":"V2.js","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/V2.tsx"],"sourcesContent":["import { useGuideContext } from \"@knocklabs/react-core\";\nimport { Button } from \"@telegraph/button\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport { Minimize2, Undo2 } from \"lucide-react\";\nimport React from \"react\";\n\nimport { KnockButton } from \"../KnockButton\";\nimport { TOOLBAR_Z_INDEX } from \"../shared\";\nimport \"../styles.css\";\n\nimport { GuideContextDetails } from \"./GuideContextDetails\";\nimport { GuideRow } from \"./GuideRow\";\nimport {\n  DisplayOption,\n  GuidesListDisplaySelect,\n} from \"./GuidesListDisplaySelect\";\nimport { detectToolbarParam } from \"./helpers\";\nimport {\n  InspectionResult,\n  useInspectGuideClientStore,\n} from \"./useInspectGuideClientStore\";\n\nconst GuidesList = ({\n  guides,\n  displayOption,\n}: {\n  guides: InspectionResult[\"guides\"];\n  displayOption: DisplayOption;\n}) => {\n  return guides.map((guide, idx) => {\n    const { isEligible, isQualified, selectable } = guide.annotation;\n    const isDisplayable = isEligible && isQualified;\n    const isDisplaying = isDisplayable && selectable.status === \"returned\";\n\n    if (displayOption === \"only-displaying\" && !isDisplaying) {\n      return null;\n    }\n    if (displayOption === \"only-displayable\" && !isDisplayable) {\n      return null;\n    }\n    if (displayOption === \"all-eligible\" && !isEligible) {\n      return null;\n    }\n\n    return <GuideRow key={guide.key} guide={guide} orderIndex={idx} />;\n  });\n};\n\nexport const V2 = () => {\n  const { client } = useGuideContext();\n\n  const [guidesListDisplayOption, setGuidesListDisplayOption] =\n    React.useState<DisplayOption>(\"only-displayable\");\n\n  const [isVisible, setIsVisible] = React.useState(detectToolbarParam());\n  const [isCollapsed, setIsCollapsed] = React.useState(true);\n\n  React.useEffect(() => {\n    if (!isVisible) {\n      return;\n    }\n\n    client.setDebug();\n\n    return () => {\n      client.unsetDebug();\n    };\n  }, [isVisible, client]);\n\n  const result = useInspectGuideClientStore();\n  if (!result) {\n    return null;\n  }\n\n  return (\n    <Box position=\"fixed\" top=\"4\" right=\"4\" style={{ zIndex: TOOLBAR_Z_INDEX }}>\n      {isCollapsed ? (\n        <KnockButton onClick={() => setIsCollapsed(false)} />\n      ) : (\n        <Stack\n          direction=\"column\"\n          backgroundColor=\"surface-2\"\n          shadow=\"2\"\n          rounded=\"3\"\n          border=\"px\"\n          overflow=\"hidden\"\n          style={{ width: \"400px\" }}\n        >\n          <Stack\n            w=\"full\"\n            p=\"2\"\n            justify=\"space-between\"\n            direction=\"row\"\n            style={{ boxSizing: \"border-box\" }}\n          >\n            <Box style={{ width: \"220px\" }}>\n              <GuidesListDisplaySelect\n                value={guidesListDisplayOption}\n                onChange={(opt) => setGuidesListDisplayOption(opt)}\n              />\n            </Box>\n\n            <Stack gap=\"2\">\n              <Button\n                onClick={() => setIsVisible(false)}\n                size=\"1\"\n                variant=\"soft\"\n                trailingIcon={{ icon: Undo2, \"aria-hidden\": true }}\n              >\n                Exit\n              </Button>\n              <Button\n                onClick={() => setIsCollapsed(true)}\n                size=\"1\"\n                variant=\"soft\"\n                leadingIcon={{ icon: Minimize2, alt: \"Collapse guide toolbar\" }}\n              />\n            </Stack>\n          </Stack>\n\n          <Box w=\"full\">\n            {result.error && <Box>{result.error}</Box>}\n            <GuideContextDetails />\n            <GuidesList\n              guides={result.guides}\n              displayOption={guidesListDisplayOption}\n            />\n          </Box>\n        </Stack>\n      )}\n    </Box>\n  );\n};\n"],"names":["GuidesList","guides","displayOption","map","guide","idx","isEligible","isQualified","selectable","annotation","isDisplayable","isDisplaying","status","GuideRow","key","V2","client","useGuideContext","guidesListDisplayOption","setGuidesListDisplayOption","React","useState","isVisible","setIsVisible","detectToolbarParam","isCollapsed","setIsCollapsed","useEffect","setDebug","unsetDebug","result","useInspectGuideClientStore","Box","zIndex","TOOLBAR_Z_INDEX","KnockButton","Stack","width","boxSizing","GuidesListDisplaySelect","opt","Button","icon","Undo2","Minimize2","alt","error","GuideContextDetails"],"mappings":"gjBAsBMA,EAAaA,CAAC,CAClBC,OAAAA,EACAC,cAAAA,CAIF,IACSD,EAAOE,IAAI,CAACC,EAAOC,IAAQ,CAC1B,KAAA,CAAEC,WAAAA,EAAYC,YAAAA,EAAaC,WAAAA,GAAeJ,EAAMK,WAChDC,EAAgBJ,GAAcC,EAC9BI,EAAeD,GAAiBF,EAAWI,SAAW,WAQxDV,OANAA,IAAkB,mBAAqB,CAACS,GAGxCT,IAAkB,oBAAsB,CAACQ,GAGzCR,IAAkB,gBAAkB,CAACI,EAChC,6BAGDO,EAAS,SAAA,CAAA,IAAKT,EAAMU,IAAK,MAAAV,EAAc,WAAYC,EAAO,CAAA,CACnE,EAGUU,EAAKA,IAAM,CAChB,KAAA,CAAEC,OAAAA,GAAWC,kBAAgB,EAE7B,CAACC,EAAyBC,CAA0B,EACxDC,EAAAA,QAAMC,SAAwB,kBAAkB,EAE5C,CAACC,EAAWC,CAAY,EAAIH,EAAAA,QAAMC,SAASG,EAAAA,oBAAoB,EAC/D,CAACC,EAAaC,CAAc,EAAIN,EAAAA,QAAMC,SAAS,EAAI,EAEzDD,EAAAA,QAAMO,UAAU,IAAM,CACpB,GAAKL,EAILN,OAAAA,EAAOY,SAAS,EAET,IAAM,CACXZ,EAAOa,WAAW,CACpB,CAAA,EACC,CAACP,EAAWN,CAAM,CAAC,EAEtB,MAAMc,EAASC,EAAAA,2BAA2B,EAC1C,OAAKD,EAKHV,UAAA,cAACY,OAAI,SAAS,QAAQ,IAAI,IAAI,MAAM,IAAI,MAAO,CAAEC,OAAQC,EAAAA,eAAgB,CAAA,EACtET,EACCL,EAAAA,QAAA,cAACe,EAAY,YAAA,CAAA,QAAS,IAAMT,EAAe,EAAK,CAAE,CAAA,EAEjDN,EAAAA,QAAA,cAAAgB,EAAAA,MAAA,CACC,UAAU,SACV,gBAAgB,YAChB,OAAO,IACP,QAAQ,IACR,OAAO,KACP,SAAS,SACT,MAAO,CAAEC,MAAO,OAAQ,CAAA,EAEvBjB,EAAAA,QAAA,cAAAgB,EAAAA,MAAA,CACC,EAAE,OACF,EAAE,IACF,QAAQ,gBACR,UAAU,MACV,MAAO,CAAEE,UAAW,YAAa,CAAA,EAEhClB,EAAAA,QAAA,cAAAY,EAAA,IAAA,CAAI,MAAO,CAAEK,MAAO,OAAA,CAAQ,EAC1BjB,EAAA,QAAA,cAAAmB,EAAA,wBAAA,CACC,MAAOrB,EACP,SAAWsB,GAAQrB,EAA2BqB,CAAG,CAAE,CAAA,CAEvD,EAEApB,EAAA,QAAA,cAACgB,EAAAA,MAAM,CAAA,IAAI,GACT,EAAAhB,EAAAA,QAAA,cAACqB,EAAAA,OACC,CAAA,QAAS,IAAMlB,EAAa,EAAK,EACjC,KAAK,IACL,QAAQ,OACR,aAAc,CAAEmB,KAAMC,EAAAA,MAAO,cAAe,EAAA,CAAO,EAAA,MAGrD,EACAvB,EAAAA,QAAA,cAACqB,EAAAA,QACC,QAAS,IAAMf,EAAe,EAAI,EAClC,KAAK,IACL,QAAQ,OACR,YAAa,CAAEgB,KAAME,EAAAA,UAAWC,IAAK,wBAAA,CAA2B,CAAA,CAEpE,CACF,EAEAzB,EAAAA,QAAA,cAACY,EAAAA,IAAI,CAAA,EAAE,MACJF,EAAAA,EAAOgB,OAAS1B,EAAAA,QAAA,cAACY,EAAAA,IAAKF,KAAAA,EAAOgB,KAAM,EACnC1B,EAAAA,QAAA,cAAA2B,EAAAA,oBAAA,IAAmB,EACpB3B,EAAA,QAAA,cAACpB,EACC,CAAA,OAAQ8B,EAAO7B,OACf,cAAeiB,CAAAA,CAAwB,CAE3C,CACF,CAEJ,EA3DO,IA6DX"}
+{"version":3,"file":"V2.js","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/V2.tsx"],"sourcesContent":["import { useGuideContext } from \"@knocklabs/react-core\";\nimport { Button } from \"@telegraph/button\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport { Text } from \"@telegraph/typography\";\nimport { Minimize2, Undo2 } from \"lucide-react\";\nimport React from \"react\";\n\nimport { KnockButton } from \"../KnockButton\";\nimport { TOOLBAR_Z_INDEX } from \"../shared\";\nimport \"../styles.css\";\n\nimport { DRAG_HANDLE_OVERHANG, DragHandle } from \"./DragHandle\";\nimport { GuideContextDetails } from \"./GuideContextDetails\";\nimport { GuideRow } from \"./GuideRow\";\nimport {\n  DisplayOption,\n  GuidesListDisplaySelect,\n} from \"./GuidesListDisplaySelect\";\nimport { clearRunConfigLS, getRunConfig } from \"./helpers\";\nimport { useDraggable } from \"./useDraggable\";\nimport {\n  InspectionResult,\n  useInspectGuideClientStore,\n} from \"./useInspectGuideClientStore\";\n\nconst GuidesList = ({\n  guides,\n  displayOption,\n}: {\n  guides: InspectionResult[\"guides\"];\n  displayOption: DisplayOption;\n}) => {\n  return guides.map((guide, idx) => {\n    const { isEligible, isQualified, selectable } = guide.annotation;\n    const isDisplayable = isEligible && isQualified;\n    const isDisplaying = isDisplayable && selectable.status === \"returned\";\n\n    if (displayOption === \"only-displaying\" && !isDisplaying) {\n      return null;\n    }\n    if (displayOption === \"only-displayable\" && !isDisplayable) {\n      return null;\n    }\n    if (displayOption === \"all-eligible\" && !isEligible) {\n      return null;\n    }\n\n    return <GuideRow key={guide.key} guide={guide} orderIndex={idx} />;\n  });\n};\n\nexport const V2 = () => {\n  const { client } = useGuideContext();\n\n  const [guidesListDisplayOption, setGuidesListDisplayOption] =\n    React.useState<DisplayOption>(\"all-guides\");\n\n  const [runConfig, setRunConfig] = React.useState(() => getRunConfig());\n  const [isCollapsed, setIsCollapsed] = React.useState(false);\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\n    return () => {\n      client.unsetDebug();\n    };\n  }, [runConfig, client]);\n\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const { position, isDragging, handlePointerDown } = useDraggable({\n    elementRef: containerRef,\n    reclampDeps: [isCollapsed],\n    rightPadding: DRAG_HANDLE_OVERHANG,\n    initialPosition: { top: 16, right: 16 },\n  });\n\n  const result = useInspectGuideClientStore(runConfig);\n  if (!result || !runConfig?.isVisible) {\n    return null;\n  }\n\n  return (\n    <Box\n      tgphRef={containerRef}\n      position=\"fixed\"\n      style={{\n        top: position.top + \"px\",\n        right: position.right + \"px\",\n        zIndex: TOOLBAR_Z_INDEX,\n      }}\n    >\n      <DragHandle onPointerDown={handlePointerDown} isDragging={isDragging} />\n      {isCollapsed ? (\n        <KnockButton onClick={() => setIsCollapsed(false)} positioned={false} />\n      ) : (\n        <Stack\n          direction=\"column\"\n          backgroundColor=\"surface-2\"\n          shadow=\"2\"\n          rounded=\"3\"\n          border=\"px\"\n          overflow=\"hidden\"\n          style={{ width: \"400px\" }}\n        >\n          <Stack\n            w=\"full\"\n            p=\"2\"\n            justify=\"space-between\"\n            direction=\"row\"\n            style={{ boxSizing: \"border-box\" }}\n          >\n            <Box style={{ width: \"220px\" }}>\n              <GuidesListDisplaySelect\n                value={guidesListDisplayOption}\n                onChange={(opt) => setGuidesListDisplayOption(opt)}\n              />\n            </Box>\n\n            <Stack gap=\"2\">\n              <Button\n                onClick={() => {\n                  setRunConfig((curr) => ({ ...curr, isVisible: false }));\n                  clearRunConfigLS();\n                  client.unsetDebug();\n                }}\n                size=\"1\"\n                variant=\"soft\"\n                trailingIcon={{ icon: Undo2, \"aria-hidden\": true }}\n              >\n                Exit\n              </Button>\n              <Button\n                onClick={() => setIsCollapsed(true)}\n                size=\"1\"\n                variant=\"soft\"\n                leadingIcon={{ icon: Minimize2, alt: \"Collapse guide toolbar\" }}\n              />\n            </Stack>\n          </Stack>\n\n          <Box w=\"full\">\n            <GuideContextDetails />\n            {result.error && (\n              <Box px=\"2\" pb=\"1\">\n                <Text as=\"span\" size=\"0\" weight=\"medium\" color=\"red\">\n                  {result.error}\n                </Text>\n              </Box>\n            )}\n            <GuidesList\n              guides={result.guides}\n              displayOption={guidesListDisplayOption}\n            />\n          </Box>\n        </Stack>\n      )}\n    </Box>\n  );\n};\n"],"names":["GuidesList","guides","displayOption","map","guide","idx","isEligible","isQualified","selectable","annotation","isDisplayable","isDisplaying","status","GuideRow","key","V2","client","useGuideContext","guidesListDisplayOption","setGuidesListDisplayOption","React","useState","runConfig","setRunConfig","getRunConfig","isCollapsed","setIsCollapsed","useEffect","isVisible","focusedGuideKeys","isDebugging","store","state","debug","debugging","setDebug","unsetDebug","containerRef","useRef","position","isDragging","handlePointerDown","useDraggable","elementRef","reclampDeps","rightPadding","DRAG_HANDLE_OVERHANG","initialPosition","top","right","result","useInspectGuideClientStore","Box","zIndex","TOOLBAR_Z_INDEX","DragHandle","KnockButton","Stack","width","boxSizing","GuidesListDisplaySelect","opt","Button","curr","clearRunConfigLS","icon","Undo2","Minimize2","alt","GuideContextDetails","error","Text"],"mappings":"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"}

package/dist/cjs/modules/guide/components/Toolbar/V2/helpers.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("@knocklabs/react-core");require("react");;/* empty css                                             */require("lodash.debounce");const e=require("../../../../core/utils.js"),a="knock_guide_toolbar",o=()=>{const r=e.checkForWindow();return!r||!r.location?!1:new URLSearchParams(r.location.search).get(a)==="true"};exports.detectToolbarParam=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("@knocklabs/react-core");require("react");;/* empty css                                             */require("lodash.debounce");const r=require("../../../../core/utils.js"),u="knock_guide_toolbar",s="focused_guide_key",n="knock_guide_debug",l=()=>{const e={isVisible:!1},o=r.checkForWindow();if(!o||!o.location)return e;const c=new URLSearchParams(o.location.search),i=c.get(u),a=c.get(s);if(i!==null){const t={isVisible:i==="true"};return a&&(t.focusedGuideKeys={[a]:!0}),g(t),t}return f()||e},g=e=>{const o=r.checkForWindow();if(!(!o||!o.localStorage))try{o.localStorage.setItem(n,JSON.stringify(e))}catch{}},f=()=>{const e=r.checkForWindow();if(!(!e||!e.localStorage))try{const o=e.localStorage.getItem(n);if(o)return JSON.parse(o)}catch{}},d=()=>{const e=r.checkForWindow();if(!(!e||!e.localStorage))try{e.localStorage.removeItem(n)}catch{}};exports.clearRunConfigLS=d;exports.getRunConfig=l;
 //# sourceMappingURL=helpers.js.map

package/dist/cjs/modules/guide/components/Toolbar/V2/helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.js","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/helpers.ts"],"sourcesContent":["import { checkForWindow } from \"../../../../../modules/core\";\n\n// Use this param to start Toolbar and enter into a debugging session when\n// it is present and set to true.\nconst TOOLBAR_QUERY_PARAM = \"knock_guide_toolbar\";\n\nexport const detectToolbarParam = () => {\n  const win = checkForWindow();\n  if (!win || !win.location) {\n    return false;\n  }\n\n  const urlSearchParams = new URLSearchParams(win.location.search);\n  const hasToolbarParam = urlSearchParams.get(TOOLBAR_QUERY_PARAM) === \"true\";\n\n  return hasToolbarParam;\n};\n"],"names":["TOOLBAR_QUERY_PARAM","detectToolbarParam","win","checkForWindow","location","URLSearchParams","search","get"],"mappings":"sQAIMA,EAAsB,sBAEfC,EAAqBA,IAAM,CACtC,MAAMC,EAAMC,EAAAA,eAAe,EAC3B,MAAI,CAACD,GAAO,CAACA,EAAIE,SACR,GAGe,IAAIC,gBAAgBH,EAAIE,SAASE,MAAM,EACvBC,IAAIP,CAAmB,IAAM,MAGvE"}
+{"version":3,"file":"helpers.js","sources":["../../../../../../../src/modules/guide/components/Toolbar/V2/helpers.ts"],"sourcesContent":["import { KnockGuide } from \"@knocklabs/client\";\n\nimport { checkForWindow } from \"../../../../../modules/core\";\n\n// Use this param to start Toolbar and enter into a debugging session when\n// it is present and set to true.\nconst TOOLBAR_QUERY_PARAM = \"knock_guide_toolbar\";\n\n// Optional, when present pin/focus on this guide.\nconst GUIDE_KEY_PARAM = \"focused_guide_key\";\n\n// Use this key to read and write the run config data.\nconst LOCAL_STORAGE_KEY = \"knock_guide_debug\";\n\nexport type ToolbarV2RunConfig = {\n  isVisible: boolean;\n  focusedGuideKeys?: Record<KnockGuide[\"key\"], true>;\n};\n\nexport const getRunConfig = (): ToolbarV2RunConfig => {\n  const fallback = { isVisible: false };\n\n  const win = checkForWindow();\n  if (!win || !win.location) {\n    return fallback;\n  }\n\n  const urlSearchParams = new URLSearchParams(win.location.search);\n  const toolbarParamValue = urlSearchParams.get(TOOLBAR_QUERY_PARAM);\n  const guideKeyParamValue = urlSearchParams.get(GUIDE_KEY_PARAM);\n\n  // If toolbar param detected in the URL, write to local storage before\n  // returning.\n  if (toolbarParamValue !== null) {\n    const config: ToolbarV2RunConfig = {\n      isVisible: toolbarParamValue === \"true\",\n    };\n    if (guideKeyParamValue) {\n      config.focusedGuideKeys = { [guideKeyParamValue]: true };\n    }\n\n    writeRunConfigLS(config);\n    return config;\n  }\n\n  // If not detected, check local storage for a persisted run config. If not\n  // present then fall back to a default config.\n  return readRunConfigLS() || fallback;\n};\n\nconst writeRunConfigLS = (config: ToolbarV2RunConfig) => {\n  const win = checkForWindow();\n  if (!win || !win.localStorage) return;\n\n  try {\n    win.localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(config));\n  } catch {\n    // localStorage may be unavailable (e.g. private browsing)\n  }\n};\n\nconst readRunConfigLS = (): ToolbarV2RunConfig | undefined => {\n  const win = checkForWindow();\n  if (!win || !win.localStorage) return undefined;\n\n  try {\n    const stored = win.localStorage.getItem(LOCAL_STORAGE_KEY);\n    if (stored) {\n      return JSON.parse(stored);\n    }\n  } catch {\n    // localStorage may be unavailable (e.g. private browsing)\n  }\n  return undefined;\n};\n\nexport const clearRunConfigLS = () => {\n  const win = checkForWindow();\n  if (!win || !win.localStorage) return;\n\n  try {\n    win.localStorage.removeItem(LOCAL_STORAGE_KEY);\n  } catch {\n    // localStorage may be unavailable (e.g. private browsing)\n  }\n};\n"],"names":["TOOLBAR_QUERY_PARAM","GUIDE_KEY_PARAM","LOCAL_STORAGE_KEY","getRunConfig","fallback","isVisible","win","checkForWindow","location","urlSearchParams","URLSearchParams","search","toolbarParamValue","get","guideKeyParamValue","config","focusedGuideKeys","writeRunConfigLS","readRunConfigLS","localStorage","setItem","JSON","stringify","stored","getItem","parse","clearRunConfigLS","removeItem"],"mappings":"sQAMMA,EAAsB,sBAGtBC,EAAkB,oBAGlBC,EAAoB,oBAObC,EAAeA,IAA0B,CACpD,MAAMC,EAAW,CAAEC,UAAW,EAAM,EAE9BC,EAAMC,EAAAA,eAAe,EAC3B,GAAI,CAACD,GAAO,CAACA,EAAIE,SACRJ,OAAAA,EAGT,MAAMK,EAAkB,IAAIC,gBAAgBJ,EAAIE,SAASG,MAAM,EACzDC,EAAoBH,EAAgBI,IAAIb,CAAmB,EAC3Dc,EAAqBL,EAAgBI,IAAIZ,CAAe,EAI9D,GAAIW,IAAsB,KAAM,CAC9B,MAAMG,EAA6B,CACjCV,UAAWO,IAAsB,MACnC,EACA,OAAIE,IACFC,EAAOC,iBAAmB,CAAE,CAACF,CAAkB,EAAG,EAAK,GAGzDG,EAAiBF,CAAM,EAChBA,CAAAA,CAKT,OAAOG,EAAqBd,GAAAA,CAC9B,EAEMa,EAAoBF,GAA+B,CACvD,MAAMT,EAAMC,EAAAA,eAAe,EAC3B,GAAI,GAACD,GAAO,CAACA,EAAIa,cAEb,GAAA,CACFb,EAAIa,aAAaC,QAAQlB,EAAmBmB,KAAKC,UAAUP,CAAM,CAAC,CAAA,MAC5D,CAAA,CAGV,EAEMG,EAAkBA,IAAsC,CAC5D,MAAMZ,EAAMC,EAAAA,eAAe,EAC3B,GAAI,GAACD,GAAO,CAACA,EAAIa,cAEb,GAAA,CACF,MAAMI,EAASjB,EAAIa,aAAaK,QAAQtB,CAAiB,EACzD,GAAIqB,EACKF,OAAAA,KAAKI,MAAMF,CAAM,CAC1B,MACM,CAAA,CAIV,EAEaG,EAAmBA,IAAM,CACpC,MAAMpB,EAAMC,EAAAA,eAAe,EAC3B,GAAI,GAACD,GAAO,CAACA,EAAIa,cAEb,GAAA,CACEA,EAAAA,aAAaQ,WAAWzB,CAAiB,CAAA,MACvC,CAAA,CAGV"}

package/dist/cjs/modules/guide/components/Toolbar/V2/useDraggable.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const C=require("react"),F=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},n=F(C),S={top:16,right:16};function R(e,u,h,o=0){const r=window.innerWidth,f=window.innerHeight,v=u+o,d=r-e.right-u,p=Math.max(0,Math.min(d,r-v)),i=Math.max(0,Math.min(e.top,f-h)),s=r-p-u;return{top:i,right:s}}function I({elementRef:e,initialPosition:u=S,reclampDeps:h=[],rightPadding:o=0}){const[r,f]=n.default.useState(u),[v,d]=n.default.useState(!1),p=n.default.useRef(r);p.current=r;const i=n.default.useRef({x:0,y:0}),s=n.default.useRef({top:0,right:0}),c=n.default.useRef(null),g=n.default.useRef(!1),a=n.default.useRef(null),w=n.default.useCallback(()=>{const t=e.current;if(!t)return;const l=t.getBoundingClientRect();f(m=>R(m,l.width,l.height,o))},[e,o]),y=n.default.useCallback(t=>{t.preventDefault(),i.current={x:t.clientX,y:t.clientY},s.current={...p.current},g.current=!0,d(!0);const l=E=>{g.current&&c.current===null&&(c.current=requestAnimationFrame(()=>{if(c.current=null,!g.current)return;const L=E.clientX-i.current.x,x=E.clientY-i.current.y,M={top:s.current.top+x,right:s.current.right-L},P=e.current;if(!P)return;const b=P.getBoundingClientRect(),A=R(M,b.width,b.height,o);f(A)}))},m=()=>{g.current=!1,d(!1),c.current!==null&&(cancelAnimationFrame(c.current),c.current=null),document.removeEventListener("pointermove",l),document.removeEventListener("pointerup",D),a.current=null},D=()=>m();document.addEventListener("pointermove",l),document.addEventListener("pointerup",D),a.current=m},[e,o]);return n.default.useEffect(()=>()=>{var t;(t=a.current)==null||t.call(a)},[]),n.default.useEffect(()=>{const t=()=>w();return window.addEventListener("resize",t),()=>window.removeEventListener("resize",t)},[w]),n.default.useEffect(()=>{const t=requestAnimationFrame(()=>w());return()=>cancelAnimationFrame(t)},h),{position:r,isDragging:v,handlePointerDown:y}}exports.clampPosition=R;exports.useDraggable=I;
+//# sourceMappingURL=useDraggable.js.map

package/dist/cjs/modules/guide/components/Toolbar/V2/useDraggable.js.map

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

package/dist/cjs/modules/guide/components/Toolbar/V2/useInspectGuideClientStore.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("@knocklabs/client"),p=require("@knocklabs/react-core"),b=e=>e.reduce((r,s)=>({...r,[s.key]:s}),{}),g=(e,r,s,n)=>{var u,t,o,a,l,c,d,f;const i=!!((a=(o=(t=(u=n.key)==null?void 0:u.one)==null?void 0:t.metadata)==null?void 0:o.opts)!=null&&a.includeThrottled)||!!((f=(d=(c=(l=n.key)==null?void 0:l.all)==null?void 0:c.metadata)==null?void 0:d.opts)!=null&&f.includeThrottled);return e.bypass_global_group_limit?"returned":e.key===s.resolved?r.throttled&&!i?"throttled":"returned":"queried"},v=(e,r,s,n)=>{var t,o,a,l;const i=!!((l=(a=(o=(t=n.type)==null?void 0:t.one)==null?void 0:o.metadata)==null?void 0:a.opts)!=null&&l.includeThrottled),u=n.type.one;if(u.size===0)return"queried";if(e.bypass_global_group_limit){const d=[...u.values()][0];return e.key!==d.key?"queried":"returned"}return e.key===s.resolved?r.throttled&&!i?"throttled":"returned":"queried"},k=(e,r,s,n)=>{var l,c,d,f;const i=n.type.all;if(i.size===0)return"queried";const u=[...i.values()],t=u[0],o=b(u);return(f=(d=(c=(l=n.type)==null?void 0:l.all)==null?void 0:c.metadata)==null?void 0:d.opts)!=null&&f.includeThrottled?o[e.key]?"returned":"queried":(t.bypass_global_group_limit||t.key===s.resolved)&&o[e.key]?r.throttled?e.bypass_global_group_limit?"returned":"throttled":"returned":"queried"},h=(e,r,s,n)=>{var i,u;if(n.key)return g(e,r,s,n);if((i=n.type)!=null&&i.all)return k(e,r,s,n);if((u=n.type)!=null&&u.one)return v(e,r,s,n)},S=(e,r,s)=>{if(!s||s.status==="open")return{status:void 0};const n={key:(s.results.key||{})[e.key],type:(s.results.type||{})[e.type]};if(!!!(n.key||n.type))return{status:void 0};const u=h(e,r,s,n);return u?{status:u,query:n}:{status:void 0}},G=e=>{switch(e.reason){case"not_in_target_audience":case"target_conditions_not_met":return{targetable:{status:!1,reason:e.reason,message:e.message}};case"marked_as_archived":return{archived:{status:!0}};case"guide_not_active":return{active:{status:!1}};default:return}},m=({active:e,targetable:r,archived:s})=>!(!e.status||!r.status||s.status),_=({activatable:e,selectable:r})=>!(!e.status||!r.status),T=(e,r,s)=>{const{ineligibleGuides:n,location:i}=r,u=n[e.key],t=u?G(u):void 0,o={active:(t==null?void 0:t.active)||{status:!0},targetable:(t==null?void 0:t.targetable)||{status:!0},archived:(t==null?void 0:t.archived)||{status:!1},activatable:{status:y.checkActivatable(e,i)},selectable:S(e,r,s)},a={...o,isEligible:m(o),isQualified:_(o)};return{...e,annotation:a}},w=e=>({__typename:"UnknownGuide",key:e,active:!1,bypass_global_group_limit:!1,annotation:{isEligible:!1,isQualified:!1,selectable:{status:void 0}}}),I=()=>{var u;const{client:e}=p.useGuideContext(),r=p.useStore(e.store,t=>{const o=y.checkStateIfThrottled(t);return{location:t.location,guides:t.guides,guideGroups:t.guideGroups,ineligibleGuides:t.ineligibleGuides,debug:t.debug,counter:t.counter,throttled:o}});if(!((u=r.debug)!=null&&u.debugging))return;const s=r.guideGroups[0];if(!s)return{error:"no_guide_group",guides:[]};const n=e.getStage();return{guides:s.display_sequence.map(t=>{const o=r.guides[t];return o?T(o,r,n):w(t)})}},q=e=>typeof e=="object"&&e!==null&&"__typename"in e&&e.__typename==="UnknownGuide";exports.isUnknownGuide=q;exports.resolveIsQualified=_;exports.useInspectGuideClientStore=I;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("@knocklabs/client"),y=require("@knocklabs/react-core"),b=e=>e.reduce((t,s)=>({...t,[s.key]:s}),{}),v=(e,t,s,n)=>{var o,r,u,l,a,c,d,f;const i=!!((l=(u=(r=(o=n.key)==null?void 0:o.one)==null?void 0:r.metadata)==null?void 0:u.opts)!=null&&l.includeThrottled)||!!((f=(d=(c=(a=n.key)==null?void 0:a.all)==null?void 0:c.metadata)==null?void 0:d.opts)!=null&&f.includeThrottled);return e.bypass_global_group_limit?"returned":e.key===s.resolved?t.throttled&&!i?"throttled":"returned":"queried"},g=(e,t,s,n)=>{var r,u,l,a;const i=!!((a=(l=(u=(r=n.type)==null?void 0:r.one)==null?void 0:u.metadata)==null?void 0:l.opts)!=null&&a.includeThrottled),o=n.type.one;if(o.size===0)return"queried";if(e.bypass_global_group_limit){const d=[...o.values()][0];return e.key!==d.key?"queried":"returned"}return e.key===s.resolved?t.throttled&&!i?"throttled":"returned":"queried"},h=(e,t,s,n)=>{var a,c,d,f;const i=n.type.all;if(i.size===0)return"queried";const o=[...i.values()],r=o[0],u=b(o);return(f=(d=(c=(a=n.type)==null?void 0:a.all)==null?void 0:c.metadata)==null?void 0:d.opts)!=null&&f.includeThrottled?u[e.key]?"returned":"queried":(r.bypass_global_group_limit||r.key===s.resolved)&&u[e.key]?t.throttled?e.bypass_global_group_limit?"returned":"throttled":"returned":"queried"},G=(e,t,s,n)=>{var i,o;if(n.key)return v(e,t,s,n);if((i=n.type)!=null&&i.all)return h(e,t,s,n);if((o=n.type)!=null&&o.one)return g(e,t,s,n)},S=(e,t,s)=>{if(!s||s.status==="open")return{status:void 0};const n={key:(s.results.key||{})[e.key],type:(s.results.type||{})[e.type]};if(!!!(n.key||n.type))return{status:void 0};const o=G(e,t,s,n);return o?{status:o,query:n}:{status:void 0}},T=(e,t)=>{const s={};return((t==null?void 0:t.reason)==="not_in_target_audience"||(t==null?void 0:t.reason)==="target_conditions_not_met")&&(s.targetable={status:!1,reason:t.reason,message:t.message}),((t==null?void 0:t.reason)==="marked_as_archived"||(e.steps||[]).every(n=>!!n.message.archived_at))&&(s.archived={status:!0}),(t==null?void 0:t.reason)==="guide_not_active"&&(s.active={status:!1}),s},I=({active:e,targetable:t,archived:s})=>!(!e.status||!t.status||s.status),_=({activatable:e,selectable:t})=>!(!e.status||!t.status),q=(e,t,s)=>{const{ineligibleGuides:n,location:i}=t,o=n[e.key],r=T(e,o),u={active:(r==null?void 0:r.active)||{status:!0},targetable:(r==null?void 0:r.targetable)||{status:!0},archived:(r==null?void 0:r.archived)||{status:!1},activatable:{status:p.checkActivatable(e,i)},selectable:S(e,t,s)},l={...u,isEligible:I(u),isQualified:_(u)};return{...e,annotation:l}},w=e=>({__typename:"UnknownGuide",key:e,active:!1,bypass_global_group_limit:!1,annotation:{isEligible:!1,isQualified:!1,selectable:{status:void 0}}}),k=e=>{var r;const{client:t}=y.useGuideContext(),s=y.useStore(t.store,u=>{const l=p.checkStateIfThrottled(u);return{location:u.location,guides:u.guides,guideGroups:u.guideGroups,ineligibleGuides:u.ineligibleGuides,debug:u.debug,counter:u.counter,throttled:l}});if(!((r=s.debug)!=null&&r.debugging))return;const n=s.guideGroups[0];if(!n)return{error:"no_guide_group",guides:[]};const i=t.getStage(),o=n.display_sequence.map(u=>{const l=s.guides[u];return l?q(l,s,i):w(u)});return(i==null?void 0:i.status)==="closed"&&e.focusedGuideKeys&&!o.find(l=>e.focusedGuideKeys[l.key]&&l.annotation.selectable.status)?{error:"no_guide_present",guides:[]}:{guides:o}},B=e=>typeof e=="object"&&e!==null&&"__typename"in e&&e.__typename==="UnknownGuide";exports.isUnknownGuide=B;exports.resolveIsQualified=_;exports.useInspectGuideClientStore=k;
 //# sourceMappingURL=useInspectGuideClientStore.js.map